@import url('../bespoke-sans.css');
/* --- Variables CSS --- */
:root {
    --color-primary: #0052ff; /* Azul principal */
    --color-secondary: #fca11f; /* Naranja */
    --color-text: #333333; /* Texto principal oscuro */
    --color-text-light: #555555; /* Texto secundario */
    --color-background: #F9F5ED; /* Fondo crema muy claro */
    --color-background-alt: #ffffff; /* Blanco */
    --color-accent: #ff4f6a; /* Rosa/Rojo */
    --color-dark: #000000; /* Negro */
    --font-primary: 'BespokeSans-Variable', sans-serif; /* Usa la fuente variable */
    --container-width: 1254px;
    --padding-section: 66px 0;
}

/* --- Reset Básico y Globales --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.6;
    font-size: 18px;
    font-weight: 500; /* Peso base ligeramente aumentado */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Asegura que el body ocupe al menos toda la altura de la ventana */
}

h1, h2, h3 {
    color: var(--color-text);
    margin-bottom: 1rem;
    line-height: 1.3;
}

h1 {
    font-size: 3rem;
    font-weight: 700; /* Usando capacidad de fuente variable */
}

h2 {
    font-size: 2.2rem;
    text-align: center; /* Centrado por defecto */
    margin-bottom: 2rem;
}

h3 {
    font-size: 1.5rem; /* Ajustar tamaño */
}


p {
    margin-bottom: 1rem;
    color: var(--color-text-light);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Evita espacio extra debajo */
}

ul {
    list-style: none;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 17px;
}

/* Estilos para el contenido principal */
main {
    flex-grow: 1; /* Permite que el main crezca y ocupe el espacio disponible */
    display: flex; /* Para que .auth-section pueda crecer dentro de main */
    flex-direction: column; /* Apila los elementos hijos de main verticalmente */
}

/* --- Botones --- */
.btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem; /* Tamaño relativo al body */
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-2px); /* Efecto hover sutil */
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-background-alt);
    box-shadow: 0 4px 6px rgba(0, 82, 255, 0.2);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-background-alt);
     box-shadow: 0 4px 6px rgba(252, 161, 31, 0.2);
}

.btn-light {
    background-color: var(--color-background-alt);
    color: var(--color-primary);
    border: 1px solid #eee; /* Borde sutil si es necesario */
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* --- Header --- */
.site-header {
    background-color: var(--color-dark);
    padding: 17px 0;
    position: sticky; /* O fixed si lo quieres siempre visible */
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo { /* Contenedor del logo */
    flex-shrink: 0; /* Evita que el contenedor del logo se encoja */
    line-height: 0; /* Ayuda a eliminar posible espacio extra alrededor de la imagen */
}

.logo img {
    height: 44px;
}

.main-nav ul {
    display: flex;
    align-items: center;
    gap: 20px; /* Espacio uniforme entre elementos del menú */
}

.main-nav li {
    /* margin-left: 10px; */ /* Eliminado para usar gap en ul */
}


.main-nav a {
    color: var(--color-background-alt); /* Texto blanco en el header oscuro */
    font-weight: 700; /* Hacemos los enlaces del menú bold */
    padding: 6px 0;
}
.main-nav a:hover {
    color: var(--color-secondary); /* Naranja al pasar el ratón */
    text-decoration: none;
}

.main-nav .btn {
    /* margin-left: 15px; */ /* Eliminado para usar gap en ul y evitar doble margen */
    padding: 8px 18px; /* Botón Unirse un poco más pequeño */
    background-color: var(--color-secondary); /* Naranja para el botón "Unirse" */
    color: var(--color-background-alt); /* Texto blanco */
    box-shadow: 0 4px 6px rgba(252, 161, 31, 0.2); /* Sombra naranja */
}
/* Para que el botón "Iniciar Sesión" del header no tenga el fondo primario por defecto */
.main-nav .btn-light {
    /* margin-left: 28px; */ /* Eliminado para usar gap en ul y evitar doble margen */
    /* El color de fondo y texto se definen en .btn-light, pero podemos sobreescribir para este botón específico si es necesario */
}
 
#headerLoginBtn {
    background-color: var(--color-primary); /* Azul para el botón "Iniciar Sesión" */
    color: var(--color-background-alt); /* Texto blanco para contraste */
    border: none; /* Quitar el borde que podría venir de .btn-light */
    box-shadow: 0 4px 6px rgba(0, 82, 255, 0.2); /* Sombra azul */
}
/* Para que el botón "Acceder a la Beta" no tenga fondo y parezca un enlace normal */
#headerBetaBtn {
    background-color: transparent;
    box-shadow: none;
    padding: 6px 0; /* Ajustar padding para que coincida con otros enlaces de navegación */
    /* El color del texto lo hereda de .main-nav a (blanco) */
}

/* Para que el texto del botón "Registrarse" (naranja) se mantenga blanco en hover */
#headerRegisterBtn:hover {
    color: var(--color-background-alt); /* Mantener texto blanco para contraste */
}

/* --- Hero Section --- */
.hero {
    padding: var(--padding-section);
    padding-top: 88px;
    padding-bottom: 88px;
}

.hero-container {
    display: flex;
    align-items: center;
    gap: 44px;
}

.hero-text {
    flex: 1; /* Ocupa el espacio disponible */
}

.hero-text h1 {
    font-size: 3.0rem;
    margin-bottom: 1rem;
}

.hero-text p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.hero-buttons .btn {
    margin-right: 17px;
}

.hero-image {
    flex: 1;
    text-align: center; /* O ajusta según necesites */
}
.hero-image img {
    max-width: 500px; /* Ajusta el tamaño máximo de la imagen */
    /* Añade aquí estilos si necesitas posicionamiento específico */
}


/* --- Memorization Section --- */

/* Contenedor del encabezado de la sección de memorización */
.section-header-memorization {
    margin-bottom: 4.5rem; /* Aumentado: Espacio antes del contenido de métodos/escudo */
}

.section-main-title-memorization {
    font-size: 2.6rem; /* Aumentado: Tamaño del título principal */
    font-weight: bold;
    color: #333333; /* Color de texto principal oscuro */
    line-height: 1.3;
    margin-bottom: 0.6rem;
    text-align: center; /* Alineación al centro */
}

.section-subtitle-memorization {
    font-size: 1.50rem; /* Tamaño del subtítulo */
    color: #555555; /* Color de texto secundario */
    margin-bottom: 0; /* Quitamos margen inferior si no se necesita */
}
.section-subtitle-memorization mark {
    background-color: #fde48e; /* Mantenemos el resaltado */
    padding: 0.1em 0.3em;
    border-radius: 3px;
    color: var(--color-text);
}
.section-subtitle-memorization { text-align: center; } /* Alineación al centro */

/* Columna que contiene los items de método */
.methods-column {
    /* Ahora contendrá el header y los items */
    display: flex;
    flex-direction: column; /* Apila el header y los items */
    align-items: flex-start; /* Alinea el contenido a la izquierda */
    gap: 2.5rem; /* Aumentado: Espacio entre el header y los items */
}

/* Contenedor para los items de método (Pictogramas, Mnemotecnia) */
.method-items-container {
    display: flex;
    width: 100%; /* Ocupa el ancho de la columna */
    align-items: center; /* Alinea verticalmente los items y el signo más */
    justify-content: center; /* Centra los items y el plus dentro de la columna de métodos */
    gap: 100px; /* Espacio entre Pictogramas y Mnemotecnia */
}

/* Estilo para cada "item" de método (ya no es una card) */
.method-item {
    display: flex;
    flex-direction: column; /* Apila título, imagen y descripción verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
    width: 220px; /* Ancho para cada bloque de método. */
}

.method-item-title {
    font-size: 1.6rem; /* Tamaño para "Pictogramas", "Mnemotecnia" */
    font-weight: bold;
    color: #3A3A3A; /* Un poco más oscuro */
    margin-bottom: 0.8rem;
    text-align: center;
}

.method-item-image {
    width: 100%; /* La imagen ocupará el ancho del .method-item */
    max-width: 300px; /* Tamaño máximo de la imagen */
    height: auto;
    display: block; /* Elimina espacio extra debajo de la imagen */
    margin-bottom: 0.8rem;
    margin-left: auto; margin-right: auto;
}

.method-item-description {
    font-size: 1.1rem; /* Tamaño para la descripción debajo de la imagen */
    color: #000000;
    line-height: 1.4;
    text-align: center; /* Alineación central */
}

/* Columna del Escudo de Radicales */
.radicals-column img {
    display: block; /* Quita espacio extra */
    width: 440px;
    height: auto; /* Mantiene la proporción */
}

.memorization-content-wrapper {
    display: flex; /* Activa Flexbox para poner las columnas lado a lado */
    align-items: center; /* Alinea verticalmente las columnas al centro */
    gap: 22px; /* Reducido a la mitad: 44 / 2 */
    /* Quitamos el margen superior aquí, ya que el header ahora está dentro de la columna */
}

.radicals-column {
    flex: 1; /* Permite que este contenedor también crezca */
    display: flex; /* Para controlar la alineación de la imagen */
    justify-content: flex-end; /* Alinea la imagen a la derecha */
    /* Quitamos el margen negativo que subía la columna */
}

.radicals-column img {
    max-width: 100%; /* Asegura que la imagen no se salga de su columna */
    /* Puedes establecer un max-width específico si la imagen es muy grande */
    /* max-width: 450px; */
    height: auto; /* Mantiene la proporción */
}

.memorization {
    padding: var(--padding-section);
    background-color: var(--color-background-alt); /* Fondo blanco para esta sección */
}

.memorization mark { /* Estilo para el texto resaltado '2000 KANJIS' */
    background-color: #fde48e; /* Amarillo pálido para resaltar */
    padding: 0.1em 0.3em;
    border-radius: 3px; /* Mantener radios pequeños */
    color: var(--color-text);
}

/* --- Assessment Section (Pink) --- */
.assessment {
    background-color: var(--color-accent);
    color: var(--color-background-alt); /* Texto blanco */
    padding: var(--padding-section);
    padding-top: 88px;
    padding-bottom: 80px;
    overflow: hidden; /* Para contener la curva si la haces con pseudo-elementos */
    position: relative; /* Necesario para elementos posicionados dentro */
}

/* Simulación básica de la curva (esto puede ser complejo) */
.assessment::before {
    content: '';
    position: absolute;
    top: -55px;
    left: 0;
    width: 100%;
    height: 100px; /* Altura de la curva */
    background-color: var(--color-background-alt); /* Color de la sección ANTERIOR (Memorización) */
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    z-index: 1;
}
.assessment::after { /* Curva inferior */
    content: '';
    position: absolute;
    bottom: -55px;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: var(--color-background); /* Color de la sección siguiente */
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
     z-index: 1;
}

.assessment-container {
    display: flex;
    align-items: center;
    gap: 44px;
    position: relative; /* Para que el contenido esté sobre las curvas */
    z-index: 2;
}

.assessment-text {
    flex: 1;
}

.assessment-text h2 {
    color: var(--color-background-alt);
    text-align: left; /* Alineado a la izquierda */
    margin-bottom: 1rem;
}

.assessment-text p {
    color: var(--color-background-alt);
    margin-bottom: 2rem;
    opacity: 0.9; /* Ligeramente transparente */
}

.assessment-text .btn-light {
    color: var(--color-accent); /* Texto del botón con el color de fondo */
}

.assessment-image {
    flex-basis: 330px;
    text-align: right;
}
.assessment-image img {
    max-width: 100%; /* Asegura que no se desborde */
}


/* --- Quizzes Section --- */
.quizzes {
    padding: var(--padding-section);
    padding-top: 88px;
}

.quizzes-container {
    display: flex;
    align-items: center;
    gap: 55px;
}

.quiz-graphic {
    flex: 1;
    text-align: center;
} /* No escalar alineación */
.quiz-graphic img {
    max-width: 450px; /* Ajustar tamaño */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1)); /* Sombra suave */
}

.quizzes-text {
    flex: 1;
}

.quizzes-text .tagline {
    display: inline-block; /* Para que el fondo se ajuste al texto */
    background-color: var(--color-accent);
    color: white;
    padding: 6px 17px;
    border-radius: 20px; /* Bordes redondeados */
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.quizzes-text h2 {
    text-align: left;
}

/* --- Community Section --- */
.community {
    /* Aumentamos el padding vertical */
    padding: 110px 0; /* Ajusta este valor si necesitas más/menos espacio */
    background-color: var(--color-background-alt); /* Fondo blanco */
}

.community-container {
    display: flex;
    align-items: center;
    gap: 55px;
}

.community-image {
    flex: 1;
    text-align: center;
}
.community-image img {
    max-width: 400px; /* Ajusta tamaño */
}

.community-text {
    flex: 1;
}

.community-text h2 {
    text-align: left;
}

.community-links {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap; /* Permite que los botones bajen en pantallas pequeñas */
    gap: 17px; /* 15 * 1.1 = 16.5, redondeado */
}

.btn-social { /* Botón azul grande */
    background-color: var(--color-primary);
    color: white;
    flex-basis: 100%; /* Ocupa toda la línea */
    text-align: center;
}

.btn-social-alt {
    background-color: var(--color-background-alt);
    color: var(--color-text-light);
    border: 1px solid #ddd;
    display: flex; /* Para alinear icono y texto */
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 22px;
    flex-grow: 1; /* Hace que los botones crezcan para ocupar el espacio */
}
.btn-social-alt img { /* Iconos dentro de los botones */
    height: 20px;
    width: 20px;
}
.btn-social-alt:hover {
    border-color: #ccc;
}


/* --- Final CTA Section --- */
.final-cta {
    /* Aumentamos padding para hacerla más grande, similar a hero */
    padding: 100px 0; /* Ajusta este valor si quieres más/menos altura */
    background-color: var(--color-background); /* Fondo simple crema */
    position: relative; /* Necesario para posicionar el ninja absolutamente dentro */
}

.final-cta .container {
    /* Usamos flexbox como en el hero */
    display: flex;
    align-items: center;
    gap: 44px; /* Espacio entre texto e imagen */
}

/* Nuevo estilo para el contenedor de texto/botones */
.cta-text {
    flex: 1; /* Ocupa la mitad del espacio */
    text-align: left; /* Alineamos a la izquierda */
}

.final-cta h2 {
    text-align: left; /* Aseguramos alineación izquierda */
    margin-bottom: 2rem;
}

/* Ajustamos los botones */
.cta-buttons .btn {
    margin: 0; /* Quitamos margen horizontal */
}
.cta-buttons {
    display: flex;
    flex-direction: column; /* Apilamos los botones */
    align-items: flex-start; /* Alineamos botones a la izquierda */
    gap: 1rem; /* Espacio entre botones */
}

/* Nuevo estilo para el contenedor de la imagen */
.cta-image {
    flex: 1; /* Ocupa la otra mitad */
    text-align: center; /* Centramos el contenido (el div del ninja) */
}

.cta-ninja {
    position: absolute; /* Volvemos a posicionamiento absoluto */
    bottom: 0px;      /* Ajusta este valor para controlar cuánto baja */
    right: 50px;        /* Posición fija desde la derecha */
    z-index: 1;        /* IMPORTANTE: Mayor que el z-index del footer (10) */
}
.cta-ninja img {
    max-width: 600px; /* Ajusta el tamaño si es necesario */
}

/* --- Doubts Section --- */
.doubts {
    background-color: var(--color-dark);
    color: #e0e0e0;
    padding: 44px 0;
}

.doubts-container {
    display: flex;
    align-items: center;
    gap: 33px; /* 30 * 1.1 */
}

.doubts-icon {
    width: 60px; /* Tamaño del icono de email */
    height: 60px;
}

.doubts-text {
    flex-grow: 1; /* Ocupa el espacio restante */
}

.doubts-text h3 {
    color: var(--color-background-alt);
    margin-bottom: 0.5rem;
}

.doubts-text p {
    color: #cccccc; /* Gris más claro */
    margin-bottom: 0;
    font-size: 0.95rem;
}

.doubts .btn-light {
    flex-shrink: 0; /* Evita que el botón se encoja */
    background-color: var(--color-background-alt);
    color: var(--color-dark); /* Texto oscuro en botón claro */
}


/* --- Footer Bottom --- */
.site-footer-bottom {
    background-color: var(--color-dark);
    color: #a0a0a0; /* Texto grisáceo */
    padding: 20px 0; /* Reducido de 33px a 20px */
    font-size: 0.85rem;
    border-top: 1px solid #333; /* Línea separadora sutil */
}

.footer-container {
    /* No necesita flex si los elementos van uno debajo del otro */
}

.disclaimer {
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
    color: #888; /* Aún más claro */
    text-align: center;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.footer-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Para pantallas pequeñas */
    gap: 11px;
}

.footer-nav p { /* Copyright */
    margin-bottom: 0; /* Quitar margen por defecto */
    color: #a0a0a0; /* Asegurar consistencia con los enlaces del footer */
}

.footer-nav a {
    color: #a0a0a0; /* Mismo color que el copyright para consistencia */
    margin: 0 6px;
}
.footer-nav a:hover {
    color: var(--color-background-alt);
}


/* --- Media Queries (Adaptación a Móviles - Ejemplo Básico) --- */

@media (max-width: 992px) {
    /* Reducimos el padding vertical de comunidad en pantallas más pequeñas */
    .community {
        padding: var(--padding-section); /* Volvemos al padding estándar */
    }

    h1 { font-size: 2.8rem; }
    h2 { font-size: 2rem; }

    .hero-container {
        flex-direction: column; /* Apila texto e imagen */
        text-align: center;
    }
    .hero-text { order: 2; } /* Pone el texto debajo */
    .hero-image {
        order: 1;
        margin-bottom: 0.5rem; /* Reducido el espacio inferior */
    }
    .hero-image img { max-width: 350px; margin: 0 auto; } /* Tamaño reducido y centrado */

    .quizzes-container,
    .community-container {
        flex-direction: column;
        text-align: center;
    }
     .quizzes-text h2,
     .community-text h2 {
        text-align: center;
    }
    .quiz-graphic, .community-image { margin-bottom: 2rem; }
    .community-links { justify-content: center; }

    .assessment-container {
        flex-direction: column;
        text-align: center;
    }
    .assessment-text h2 { text-align: center; }
    .assessment-image { order: -1; margin-bottom: 2rem; } /* Imagen arriba */
    .assessment-image img {
        max-width: 250px; /* Reducir tamaño de imagen mock */
        margin: 0 auto; /* Centrar imagen */
    }
    /* Ajustar el espacio en la navegación para pantallas más pequeñas */
    .main-nav ul {
        gap: 15px; /* Reducir el espacio entre elementos del menú */
    }
}

/* Estilos para pantallas más anchas (donde aumentamos la imagen de comunidad) */
@media (min-width: 992px) {
    .community-image img {
        max-width: 550px; /* Aumentamos el tamaño máximo de la imagen */
    }
}

@media (max-width: 992px) { /* Ajustes específicos para CTA en pantallas medianas/pequeñas */
    .final-cta .container {
        flex-direction: column; /* Apilar texto e imagen */
        text-align: center; /* Centrar texto base */
    }
    .cta-text {
        order: 1; /* Asegurar que el texto va primero */
        text-align: center; /* Centrar el h2 */
    }
    .cta-text h2 { text-align: center; } /* Centrar específicamente el h2 */
    .cta-buttons { align-items: center; } /* Centrar los botones */
    .cta-image { order: 2; } /* La imagen (con el ninja) va después */
    .cta-ninja {
        position: static; /* Quitar posicionamiento absoluto */
        margin-top: 4rem; /* Aumentado para que baje más */
        text-align: center; /* Centrar el div del ninja */
    }
    .cta-ninja img {
        display: inline-block; /* Para que el centrado funcione */
        max-width: 350px; /* Aumentado tamaño del ninja en móvil */
        /* Quitar right/bottom */
    }
}

@media (max-width: 768px) {
    :root { --padding-section: 44px 0; } /* Padding reducido en móvil */
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }

    .header-container { /* Preparación para menú hamburguesa */
        /* position: relative; */
    }
    .main-nav { /* Ocultar nav normal */
       /* display: none; */
       /* Aquí irían estilos para mostrarlo como menú desplegable con JS */
    }
    .logo img {
        height: 35px; /* Reducir altura del logo en pantallas pequeñas */
        width: auto; /* Asegurar que el ancho se ajuste automáticamente */
    }
    /* --- Ajuste Sección Memorización --- */
    .memorization-content-wrapper {
        flex-direction: column; /* Apila métodos y escudo */
        gap: 0.75rem; /* Reducido el espacio a la mitad */
    }
    .radicals-column img {
        max-width: 250px; /* Reducido el tamaño del escudo */
        margin: 0 auto; /* Centrar el escudo si es más pequeño que el contenedor */
    }
    .radicals-column { order: 2; } /* Asegura que el escudo vaya después (opcional, por defecto ya lo haría) */
    .methods-column { order: 1; } /* Asegura que los métodos vayan primero (opcional) */
    /* .menu-toggle { display: block; } Botón hamburguesa */
    .method-item {
        width: 180px; /* Reducir ancho del contenedor del método */
    }
    .method-item-image {
        max-width: 120px; /* Reducir tamaño de imágenes pictograma/mnemotecnia */
    }
    /* Reducir el gap entre pictogramas y mnemotecnia en vertical */
    .method-items-container {
        gap: 40px; /* Ajusta este valor según necesites */
    }



    .methods-grid {
        flex-direction: column; /* Apilar tarjetas de métodos */
        align-items: center;
    }

    .doubts-container {
        flex-direction: column;
        text-align: center;
        gap: 22px;
    }
    .doubts .btn-light {
        align-self: center; /* Centrar botón para evitar corte */
    }

    .footer-nav nav { text-align: center; }

    /* --- Ajuste Ninja CTA en 768px --- */
    /* .cta-ninja { */
        /* right: 10px; Ya no se usa */
        /* bottom: -15px; Ya no se usa */
    /* } */
    /* .cta-ninja img { max-width: 250px; } -> Se mantiene el de 992px (350px) */
}

@media (max-width: 576px) {
    .hero-text h1 { font-size: 2rem; }
    .hero-buttons { display: flex; flex-direction: column; gap: 11px; align-items: center;}
    .hero-buttons .btn { width: 80%; margin-right: 0; }

    .cta-buttons { display: flex; flex-direction: column; gap: 11px; align-items: center;}
    .cta-buttons .btn { width: 80%; margin: 0; }

    .btn-social-alt { flex-basis: 45%; } /* 2 botones por línea aprox */

     .assessment::before, .assessment::after { /* Simplificar o quitar curvas en móvil */
        height: 55px;
        top: -28px;
        bottom: -28px;
     }
     .assessment { padding-top: 55px; padding-bottom: 55px; }

    /* --- Ajuste Ninja CTA en 576px --- */
    /* .cta-ninja { */
        /* right: 5px; Ya no se usa */
        /* bottom: -10px; Ya no se usa */
    /* } */
    .cta-ninja img { max-width: 400px; } /* Reducir ligeramente para pantallas muy pequeñas */
}

/* --- Auth Page Styles --- */
.auth-section {
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-height: calc(100vh - 100px - 100px); /* Ya no es necesario con flex-grow */
    padding: 44px 0;
    background-color: var(--color-background); /* Fondo crema de tu diseño */
    flex-grow: 1; /* Hace que la sección de autenticación se expanda para llenar 'main' */
}

.auth-container {
    display: flex;
    max-width: 1000px; /* Ancho total para dos columnas */
    width: 90%;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */ /* Movido a auth-forms-panel */
    /* overflow: hidden; */ /* No es estrictamente necesario aquí si los hijos lo manejan */
    /* El padding y borde se aplicarán al panel de formularios directamente */
    /* background-color: var(--color-background); */ /* El fondo general es el de auth-section */
    gap: 200px; /* Aumentado aún más el espacio entre el panel de forms y el promo */
    align-items: stretch; /* Para que ambas columnas tengan la misma altura si es posible */
    position: relative; /* Necesario para posicionar la imagen lateral */
}

.auth-forms-panel {
    flex-basis: 450px; /* Ancho fijo para el panel de formularios */
    flex-shrink: 0;
    padding: 44px 33px;
    position: relative;
    overflow: hidden; /* Para la animación de deslizamiento */
    color: var(--color-text);
    background-color: var(--color-background); /* Fondo igual al de la página */
    border: 2px solid var(--color-dark); /* Borde negro */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra aplicada directamente aquí */
    /* display: flex; */ /* No es necesario flex aquí, el wrapper se encarga */
    /* flex-direction: column; */
    z-index: 10; /* Para asegurar que esté sobre la imagen lateral */
}

/* Columna Derecha: Contenido Promocional */
.auth-promo-column {
    flex: 1; /* Ocupa el espacio restante */
    padding: 24px 0 64px 0; /* Ajustado para subir el contenido (original 44px 0; movido 20px hacia arriba) */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea contenido a la izquierda */
    justify-content: center; /* Centra verticalmente el bloque de contenido */
    color: var(--color-text);
}

.auth-promo-column .promo-symbols {
    max-width: 210px; /* Aumentado ~30% */
    margin-bottom: 40px; /* Aumentado proporcionalmente */
}

.auth-promo-column h2 {
    color: var(--color-text);
    font-size: 3.8rem; /* Ajustado */
    line-height: 1.25;
    text-align: left; /* Alineación a la izquierda */
    margin-bottom: 40px; /* Aumentado proporcionalmente */
}

.auth-promo-column .promo-logo {
    max-width: 210px; /* Aumentado ~30% */
}
 
.forms-wrapper {
    position: relative;
    width: 100%;
    /* min-height: 490px; */ /* Cambiado a height para evitar cambios de tamaño */
    height: 490px; /* Altura fija para acomodar el formulario más alto (registro) y mantener consistencia */
    transition: transform 0.6s ease-in-out;
}

.form-box {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centra el contenido verticalmente */
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    height: 100%; /* Asegura que todos los form-box ocupen la altura completa del wrapper */
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, transform 0.6s ease-in-out;
}

.form-box.login-form {
    transform: translateX(0); /* El de login empieza visible */
}
.form-box.active-form {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    position: relative; /* Para que ocupe espacio cuando está activo */
    /* height: 100%; Ya está en la regla general de .form-box */
}

.forms-wrapper.show-register .login-form {
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
}
.forms-wrapper.show-register .register-form {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

/* Estilos de .relocated-promo-content eliminados o movidos a .auth-promo-column */


.auth-forms-panel .forms-wrapper h2 { /* Títulos de formulario (Iniciar Sesión / Crear Cuenta) */
    color: var(--color-text); /* Cambiado de claro a oscuro */
    text-align: center;
    margin-bottom: 25px;
    font-size: 2rem; /* Ajusta según tu `style.css` si es necesario */
}

.auth-forms-panel form {
    width: 100%;
    max-width: 320px; /* Ancho máximo del formulario interno */
    margin: 0 auto;
}

.input-group {
    margin-bottom: 20px;
}

.input-group input[type="email"],
.input-group input[type="text"],
.input-group input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc; /* Borde más claro para fondo claro */
    background-color: var(--color-background-alt); /* Fondo de input blanco */
    color: var(--color-text); /* Texto oscuro en input */
    border-radius: 5px;
    font-size: 1rem;
    font-family: var(--font-primary);
    position: relative;
    z-index: 1; /* Asegurar que esté por debajo de los mensajes */
}

.input-group input::placeholder {
    color: #999; /* Placeholder ligeramente más claro para input claro */
}

.btn-full-width {
    width: 100%;
    padding: 12px; /* Botones un poco más grandes */
    margin-bottom: 15px;
}

.toggle-form-text {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--color-text-light); /* Usar variable para consistencia */
}
.toggle-form-text a {
    color: var(--color-secondary); /* Naranja para el enlace */
    font-weight: bold;
}
.toggle-form-text a:hover {
    text-decoration: underline;
}
.toggle-form-text a:hover {
    text-decoration: none; /* Elimina el subrayado al pasar el ratón */
}


/* Estilos del antiguo Panel Derecho de Promoción eliminados */
/* .auth-promo-panel {...} */
/* .promo-symbols {...} (ahora estilizado dentro de .relocated-promo-content) */
/* .auth-promo-panel h2 {...} */
/* .promo-logo {...} (ahora estilizado dentro de .relocated-promo-content) */
/* Media Queries para responsividad del panel de autenticación (ajustado punto de quiebre) */
@media (max-width: 900px) { /* Cuando el contenedor de dos columnas ya no quepa bien */
    .auth-container {
        flex-direction: column;
        max-width: 480px; /* Ancho máximo para una sola columna en móvil */
        gap: 30px; /* Reducir gap en móvil cuando se apilan */
    }

    .auth-forms-panel {
        flex-basis: auto; /* Ocupa el ancho necesario */
        width: 100%;
        border-radius: 15px; /* Asegurar bordes redondeados en móvil */
        margin-bottom: 0; /* Quitar margen si el promo va debajo sin espacio */
        /* box-shadow ya está aquí, se mantiene */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .auth-promo-column {
        padding: 33px 22px; /* Padding reducido en móvil */
        align-items: center; /* Centrar contenido promocional */
        order: -1; /* Poner el contenido promocional arriba en móviles */
        /* margin-bottom: 30px; */ /* El gap del auth-container ya da espacio */
    }

    .auth-promo-column h2 {
        font-size: 2.8rem; /* Reducido para móvil */
        text-align: center; /* Texto centrado en móviles */
        margin-bottom: 26px; /* Ajustado proporcionalmente */
    }
    .auth-promo-column .promo-symbols {
        max-width: 155px; /* Ajustado para móvil, ~30% más que antes */
        margin-bottom: 26px; /* Ajustado proporcionalmente */
    }
    .auth-promo-column .promo-logo {
        max-width: 155px; /* Ajustado para móvil, ~30% más que antes */
    }

    /* Títulos de formulario en móviles */
    .auth-forms-panel .forms-wrapper h2 {
        font-size: 1.8rem;
    }

    .peeking-characters {
        display: none; /* Ocultar la imagen lateral en pantallas pequeñas */
    }
}

/* --- Estilos para la Imagen Lateral Asomándose --- */
.peeking-characters {
    position: absolute;
    /* Se posiciona a la derecha del panel de formularios (que tiene flex-basis: 450px) */
    /* 'left' se calcula desde el borde izquierdo del auth-container. Comienza justo donde termina el panel de formularios. */
    left: 450px; /* Coincide con el flex-basis del auth-forms-panel */
    bottom: 40px; /* Ajustado para que baje un poco más */
    width: 200px; /* Ajusta el ancho de tu imagen. Ej: si la imagen es ancha y quieres que 60px queden 'ocultos' y 140px visibles */
    z-index: 5;   /* Debe estar debajo del auth-forms-panel (z-index: 10) pero encima del fondo. */
    pointer-events: none; /* Para que no interfiera con clics si se superpone a algo interactivo por error */
}

.peeking-characters img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* --- Estilos para Mensajes de Formulario --- */
.message-container {
    margin-bottom: 20px;
    min-height: 0;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1000; /* Asegurar que esté por encima de otros elementos */
}

.form-message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    animation: slideDown 0.3s ease-out;
    border: 1px solid transparent;
    position: relative;
    z-index: 1001; /* Asegurar que el mensaje esté por encima del contenedor */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Agregar sombra para destacar */
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.form-message.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #bee5eb;
}

/* Estados de los inputs */
.input-group input.success {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
    background-color: #f8fff9;
    position: relative;
    z-index: 1; /* Menor que los mensajes */
}

.input-group input.error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-color: #fff8f8;
    position: relative;
    z-index: 1; /* Menor que los mensajes */
}

.input-group input.success:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
    z-index: 1; /* Menor que los mensajes */
}

.input-group input.error:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    z-index: 1; /* Menor que los mensajes */
}

/* Animaciones */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 100px;
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
        max-height: 100px;
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
}

.form-message.removing {
    animation: slideUp 0.3s ease-in;
}

img {
    -webkit-user-drag: none;   /* Evita que se puedan arrastrar en Safari/Chrome */
    user-select: none;         /* Evita que se puedan seleccionar como texto */
    -moz-user-select: none;    /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opera */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    pointer-events: none;      /* La propiedad MÁGICA: hace que la imagen ignore todos los eventos del ratón */
}