@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 */
}

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;
}

/* --- 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);
}

.btn-login {
    background-color: var(--color-background-alt); /* Blanco */
    color: var(--color-dark); /* Negro */
    /* Puedes añadir un borde si lo deseas, por ejemplo: */
    /* border: 1px solid var(--color-dark); */
}
/* --- 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;
}

.main-nav li {
    margin-left: 20px; /* Reducido para acercar elementos y mover a la izquierda */
}

.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-background-alt); /* Mantenemos el color blanco al pasar el ratón */
    text-decoration: none;
}

.main-nav .btn {
    margin-left: 6px; /* Reducido para acercar más los botones entre sí */
    padding: 8px 18px; /* Botón Unirse un poco más pequeño */
}
.main-nav a.btn-login {
    color: var(--color-dark); /* Asegura texto negro para el botón Iniciar Sesión */
    /* El background-color blanco ya es aplicado por .btn-login */
}

/* --- 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: var(--color-accent); /* Mismo color que .tagline */
    color: white;                          /* Texto blanco como en .tagline */
    padding: 6px 17px;                     /* Mismo padding que .tagline */
    border-radius: 20px;                   /* Mismos bordes redondeados que .tagline */
    /* font-weight: bold; si quieres que también sea negrita como el tagline */
}

/* --- 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: 100px;        /* Aumentado aún más para que el cambio sea más evidente */
    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: 33px 0;
    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 */
}

.footer-nav a {
    color: #c0c0c0; /* Enlaces un poco más brillantes */
    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 */
    }
    /* Reducir espacio en la navegación para evitar corte temprano del botón */
    .main-nav li {
        margin-left: 12px; /* Reducido aún más para pantallas medianas */
    }
    .main-nav .btn {
        margin-left: 4px; /* Reducido aún más para acercar botones en pantallas medianas */
    }
}

/* 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: 30px; /* Reducido aún más para que quepa mejor en móvil */
        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 */
}

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 */
}