/* ============================================================
   HOME.CSS  ·  Estilos de la página de inicio (index.html)
   Dos secciones: hero (100vh exacto) y niveles.
   ============================================================ */

/* ============================================================
   SECCIÓN 1 · HERO
   Ocupa exactamente el alto de la pantalla. La caja de texto,
   si es muy larga, tiene su propio scroll interno para que las
   flechas de "baja aquí" nunca desaparezcan.
   ============================================================ */
.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Fondo (imagen de la pareja) */
.hero__fondo {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero__fondo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

/* Wrapper del hero: mismo bloque de 1440 con margen 80 que los niveles */
.hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: 0 var(--margen-lateral);   /* margen lateral estándar = 80 */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Logo centrado arriba */
.hero__logo {
    width: 180px;
    height: auto;
    margin-top: var(--espacio-md);
    flex-shrink: 0;
}

/* Caja de bienvenida: ancho FLUIDO para balance en cualquier pantalla.
   clamp(mínimo, ideal, máximo): nunca menos de 380px, ideal ~52% del
   ancho, nunca más de 760px. Así respira con la pantalla. */
.hero__bienvenida {
    align-self: flex-start;
    width: clamp(380px, 52%, 760px);
    max-width: 100%;
    margin-top: var(--espacio-lg);
    padding: 28px 40px;
    border-radius: 16px;
    background-color: rgba(0, 0, 0, 0.60);
    backdrop-filter: blur(4px);
    color: var(--color-blanco);

    overflow-y: auto;
    max-height: calc(100vh - 180px);
}
.hero__bienvenida h1 {
    font-size: 1.4rem;
    font-weight: 900;
    margin-bottom: 0.6rem;
}
.hero__bienvenida h2 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-top: 0.7rem;
    margin-bottom: 0.15rem;
}
.hero__bienvenida p {
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Indicador de scroll (flechas animadas) — siempre visible abajo */
.hero__scroll {
    position: absolute;
    bottom: var(--espacio-md);
    left: 50%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    animation: rebote 1.8s ease-in-out infinite;
}
.hero__scroll-flecha {
    width: 20px;
    height: 20px;
    border-right: 3px solid var(--color-blanco);
    border-bottom: 3px solid var(--color-blanco);
    transform: rotate(45deg);
}
@keyframes rebote {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(10px); }
}
/* Fija el centrado horizontal (el translateX lo maneja la animación) */
.hero__scroll { transform: translateX(-50%); }

/* ============================================================
   SECCIÓN 2 · NIVELES
   Todo el contenido vive en un bloque centrado de máx. 1440px.
   ============================================================ */
.niveles {
    background-color: #FAFAFA;
    padding: var(--espacio-lg) 0 var(--espacio-xl);
}

/* Contenedor centrado: mismo wrapper de 1440 con margen 80 que el hero */
.niveles__inner {
    position: relative;
    width: 100%;
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: 0 var(--margen-lateral);   /* margen lateral estándar = 80 */
}

/* Botón home: pegado al borde derecho del área de contenido */
.niveles__inner .btn-home {
    position: absolute;
    top: 0;
    right: var(--margen-lateral);
}

.niveles__encabezado {
    margin-bottom: var(--espacio-xl);
}
/* La fila del título (título + home). En desktop el home es absoluto,
   así que esta fila solo contiene el título visualmente. */
.niveles__fila-titulo {
    display: flex;
    align-items: center;
}
.niveles__titulo {
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--color-texto);
}
.niveles__subtitulo {
    font-style: italic;
    color: var(--color-texto);
    font-size: 1.1rem;
}

/* Los 4 botones repartidos a lo ancho del bloque */
.niveles__botones {
    display: flex;
    justify-content: space-between;  /* espacio igual entre ellos */
    align-items: center;
    gap: var(--espacio-lg);
    flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 900px) {
    .btn-nivel { width: 160px; height: 160px; }
    .niveles__botones { justify-content: center; }
}

/* Móvil */
@media (max-width: 600px) {

    /* El hero deja de ser 100vh fijo: crece con el contenido y hay
       scroll natural de la página. Así la caja nunca se corta. */
    .hero {
        height: auto;
        min-height: 100vh;
    }
    .hero__inner {
        padding: 0 var(--espacio-md);   /* menos margen lateral en móvil */
        padding-bottom: var(--espacio-xl);
    }

    .hero__logo {
        width: 140px;
        margin-top: var(--espacio-md);
    }

    /* La caja ocupa el ancho disponible y muestra TODO el texto,
       sin scroll interno ni recortes. */
    .hero__bienvenida {
        width: 100%;
        margin-top: var(--espacio-md);
        padding: var(--espacio-md);
        max-height: none;              /* sin límite: se ve completa */
        overflow-y: visible;
    }
    .hero__bienvenida h1 { font-size: 1.3rem; }

    /* Las flechas dejan de ser absolutas para no tapar contenido */
    .hero__scroll {
        position: relative;
        left: auto;
        transform: none;
        margin: var(--espacio-md) auto 0;
    }
    @keyframes rebote {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(10px); }
    }

    /* --- Sección niveles en móvil --- */
    .niveles { padding: var(--espacio-lg) 0; }
    .niveles__inner { padding: 0 var(--espacio-md); }
    .niveles__titulo { font-size: 1.75rem; }

    /* Título y home en la misma fila, alineados a los extremos */
    .niveles__fila-titulo {
        justify-content: space-between;
        margin-bottom: var(--espacio-xs);
    }
    /* El home vuelve a fluir (no flotante) para entrar en la fila */
    .niveles__inner .btn-home {
        position: static;
        flex-shrink: 0;
    }

    .niveles__botones {
        justify-content: center;
        gap: var(--espacio-lg);
    }
    .btn-nivel { width: 150px; height: 150px; }
}