/* home.css */

/* ¡Importar global.css al inicio de home.css es crucial! */
/* Aunque ya lo haces en index.php, es una buena práctica para la edición CSS si se desea previsualizar */
/* @import "global.css"; */ 

/* HEADER - Ocultar o neutralizar si Home.css lo define */
#header {
    background: none !important; /* Eliminar imagen de fondo antigua */
    min-width: 100% !important;
    min-height: 0 !important; /* Reducir altura mínima */
    height: auto !important; /* Permitir altura flexible */
    background-size: cover !important;
    z-index: 0 !important;
    display: block !important; /* Para evitar conflictos de display si el diseño antiguo lo definía */
    padding: 0 !important; /* Eliminar padding */
}
#header .content { /* Deshabilitar estilos de contenido si existen */
    display: none !important;
}


/* SECCIÓN DE FONDO (#fondo1) - Estilizar como el fondo negro principal */
#fondo1 {
    background: none !important; /* Eliminar imagen de fondo antigua */
    background-color: var(--black-color) !important; /* Forzar fondo negro */
    padding: 30px 0px !important;
    min-height: 100% !important; /* Asegurar que cubra la altura disponible */
    flex-grow: 1 !important; /* Para que ocupe el espacio disponible en el body flex */
    color: var(--text-light-color) !important; /* Asegurar color de texto */
    display: flex !important; /* Usar flex para centrar contenido */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Alinear al inicio del contenido */
    text-align: center !important;
}
/* Asegurar que los contenedores internos también se centren */
#fondo1 .container, #fondo1 .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important; /* Permitir que ocupe el ancho necesario */
}
/* Tu index.php tiene div.col-sm-4 y div.col-sm-8. */
/* Forzaremos que se apilen y centren */
#fondo1 .row > .col-sm-4, #fondo1 .row > .col-sm-8 {
    width: 100% !important; /* Hacer que ocupen el 100% del ancho disponible */
    max-width: 600px !important; /* Limitar el ancho máximo para legibilidad en desktop */
    margin: 0 auto !important; /* Centrar las columnas */
    padding: 0 !important; /* Eliminar padding de columna */
    box-sizing: border-box !important;
    display: flex !important; /* Para controlar el layout interno */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
/* Asegurar el orden: primero la sección de inicio/formulario, luego las tarjetas */
#fondo1 .row > .col-sm-4 {
    order: 2 !important; /* Ahora las tarjetas van SEGUNDO */
    margin-top: 10px !important; /* Espacio encima de las tarjetas */
    margin-bottom: 20px !important;
}
#fondo1 .row > .col-sm-8 {
    order: 1 !important; /* Ahora el título y el formulario van PRIMERO */
    margin-bottom: 20px !important; /* Espacio debajo del formulario/título */
}


/* Estilos para las tarjetas de plataforma (.link-plataformas) */
.link-plataformas {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important; /* Centrar contenido horizontalmente */
    gap: 10px !important;
    background: var(--card-bg) !important;
    padding: 20px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out, background 0.2s ease-in-out !important;
    min-height: 140px !important; /* Altura mínima para que las tarjetas sean consistentes */
    width: 100% !important; /* Ocupar el ancho completo de su columna */
    text-align: center !important;
    backdrop-filter: blur(5px) !important; /* Efecto de cristal esmerilado */
    -webkit-backdrop-filter: blur(5px) !important; /* Compatibilidad Safari */
    box-sizing: border-box !important;
    margin: 5px !important; /* Margen para separar las tarjetas */
}

/* Deshabilitar animaciones de link-plataformas de home.css */
.link-plataformas.animacionnetflix,
.link-plataformas.animaciondisney,
.link-plataformas.animacionstar {
    animation: none !important;
    transform: none !important;
}


.link-plataformas:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 8px 20px rgba(0,0,0,0.5) !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

.tituloplataformas { /* Títulos de tarjetas */
    color: var(--primary-color) !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    text-transform: uppercase !important;
    transition: none !important; /* Eliminar transiciones antiguas */
}
.url:hover .tituloplataformas { /* Eliminar desplazamiento al hover */
    margin-left: 0 !important;
}

.link-description { /* Contenedor de la descripción dentro de la tarjeta */
    display: block !important; /* Simplificar para que la descripción esté debajo del título */
    width: 100% !important;
}

.description { /* Texto de la descripción de la tarjeta */
    color: var(--secondary-color) !important;
    font-size: 0.9em !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    padding: 0px 5px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    transition: none !important; /* Eliminar transiciones antiguas */
}
.url:hover .description { /* Eliminar desplazamiento al hover */
    margin-left: 0 !important;
}

/* Ocultar los iconos antiguos de las plataformas */
.icono-netflix, .icono-disney, .icono-star, .icono-primevideo {
    display: none !important;
}
.icono-netflix i, .icono-disney i, .icono-star i, .icono-primevideo i {
    display: none !important;
}

/* Responsive (mantener de home.css, adaptar para nuevas clases y !important) */
@media screen and (max-width: 1361px) {
    /* Estos estilos internos de #header ya no son relevantes porque #header .content está display: none */
    #header .content { flex-direction: column !important; padding: 120px 90px !important; height: 100% !important; gap: 60px !important; }
    #header .content .left { gap: 30px !important; justify-content: left !important; }
    #header .content .right .stats { width: fit-content !important; }
    #header .content .right .logo-img { display: none !important; }
    @media screen and (min-height: 745px) {
        #header .content { justify-content: center !important; }
        #header .content .left { height: fit-content !important; justify-content: center !important; gap: 30px !important; }
        #header .content .right { height: fit-content !important; justify-content: center !important; gap: 30px !important; }
    }
}
@media screen and (max-width: 819px) {
    #header .content { padding: 150px 30px !important; }
    #header .content .left .server-name p { font-size: 15px !important; }
    #header .content .left .server-name h1 { font-size: 40px !important; }
    #header .content .left .server-description { font-size: 16px !important; }
    #header .content .right { width: 100% !important; }
    #header .content .right .stats { width: 100% !important; justify-content: space-between !important; }
}
@media screen and (max-width: 621px) {
    #header .content .right .stats { flex-direction: column !important; justify-content: space-between !important; align-items: start !important; }
    #header .content .right .stats .stat:hover .icon { transform: scale(1) !important; }
}
@media screen and (max-width: 447px) {
    #header .content .left .server-name h1 { font-size: 30px !important; }
}