* {
    box-sizing: border-box;
}
/* SOLUCIONA EL SCROLL HORIZONTAL INDESEADO */
body, html {
    overflow-x: hidden;
}
:root {
    --color-primario: #064e64;
    --color-acento: rgb(149, 196, 80);
    --color-bg: #f7fafc;
    --color-txt: #232d2d;
    --color-cta-amarillo: #fdb813;
    --font-headings: "Plus Jakarta Sans", sans-serif;
    --font-body: "Inter", sans-serif;
}
html {
    scroll-behavior: smooth;
}
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s, transform 0.6s;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
body {
    background: var(--color-bg);
    color: var(--color-txt);
    font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6,
.section-title,
.course-card .card-title,
.testimonial-author,
.faq-section .accordion-button,
.hero-cta-btn,
.btn,
.badge-gamification {
    font-family: var(--font-headings);
}
section {
    padding: 5rem 0;
}
.navbar {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
.navbar .navbar-brand img { max-width: 200px; }
.navbar .nav-link {
    color: var(--color-primario) !important;
    font-weight: 700;
    position: relative;
    padding-bottom: 0.5rem;
    transition: color 0.3s ease;
}
.navbar .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 3px;
    background-color: var(--color-acento);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease-in-out;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after { transform: scaleX(1);}
.navbar .nav-link.active,
.navbar .nav-link:hover { color: var(--color-acento) !important; }
.navbar .nav-link:focus { color: var(--color-acento) !important; }
.navbar .btn-warning {
    background: var(--color-acento);
    color: var(--color-primario) !important;
    border: none;
    font-weight: 700;
    transition: all 0.3s;
}
.navbar .btn-warning:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(149, 196, 80, 0.25);
}
/* HERO BANNER - PARALLAX JS */
.hero-banner {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 80px 0;
    background-image: url("../images/bk2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}
.hero-text-box {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 3rem;
    border-radius: 1rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}
.hero-banner h1, .hero-banner h2 {
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--color-primario);
}
.hero-banner p {
    font-size: 1.25rem;
    margin-bottom: 32px;
    line-height: 1.6;
    max-width: 550px;
    color: var(--color-txt);
}
.hero-cta-btn {
    font-size: 1.1rem;
    padding: 0.9rem 2.7rem;
    border-radius: 32px;
    font-weight: 700;
    background: var(--color-cta-amarillo) !important;
    color: var(--color-primario) !important;
    border: none;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}
.hero-cta-btn:hover, .hero-cta-btn:focus {
    background: var(--color-primario) !important;
    color: #fff !important;
    box-shadow: 0 6px 26px rgba(6, 78, 100, 0.12);
    transform: translateY(-2px) scale(1.035);
}
/* SWIPER HERO */
.hero-carousel { width: 100%; min-height: 240px; }
.swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    min-height: 220px;
}
.swiper-pagination { bottom: 8px !important; }
.swiper-button-next, .swiper-button-prev {
    color: var(--color-primario);
    top: 58% !important;
    --swiper-navigation-size: 28px;
}
.swiper-pagination-bullet-active {
    background: var(--color-acento) !important;
}
/* Courses Section */
#cursos { background: #fff; }
.course-card {
    border: none;
    border-radius: 1.1rem;
    box-shadow: 0 4px 25px rgba(6, 78, 100, 0.08);
    background: #fff;
    overflow: hidden;
    margin-bottom: 2rem;
    transition: all 0.3s ease-in-out;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(6, 78, 100, 0.12);
}
.course-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.course-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1.5rem;
}
.course-card .card-title { font-weight: 700; margin-bottom: 0.5rem; }
.course-card .card-text { flex-grow: 1; color: #5a6464; }
.course-card .btn { margin-top: 1rem; font-weight: 700; }
.course-badge {
    background: var(--color-acento);
    color: var(--color-primario);
    font-weight: 700;
    border-radius: 999px;
    font-size: 0.9rem;
    margin-top: -20px;
    margin-left: 16px;
    display: inline-block;
    padding: 0.4em 1.3em;
    position: relative;
}
.course-features {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
    font-size: 0.9rem;
}
.course-features li {
    padding-left: 1.5em;
    margin-bottom: 0.5em;
    position: relative;
}
.course-features li::before {
    content: "✓";
    color: var(--color-acento);
    font-weight: 800;
    position: absolute;
    left: 0;
}
.btn-outline-accent {
    background: transparent !important;
    color: var(--color-acento) !important;
    border: 2px solid var(--color-acento);
    font-weight: 700;
    transition: all 0.3s;
}
.btn-outline-accent:hover {
    background: var(--color-acento) !important;
    color: var(--color-primario) !important;
    border-color: var(--color-acento);
    transform: translateY(-2px) scale(1.03);
}
.btn-primary {
    background: var(--color-primario) !important;
    color: #fff !important;
    border: none;
    font-weight: 700;
    transition: all 0.3s;
}
.btn-primary:hover {
    background: var(--color-acento) !important;
    color: var(--color-primario) !important;
    box-shadow: 0 6px 26px rgba(149, 196, 80, 0.15);
    transform: translateY(-2px) scale(1.035);
}
.btn-dark {
    background: #232d2d !important;
    color: #fff !important;
    border: none;
    font-weight: 700;
    transition: all 0.3s;
}
.btn-dark:hover {
    background: var(--color-acento) !important;
    color: var(--color-primario) !important;
    box-shadow: 0 6px 26px rgba(149, 196, 80, 0.15);
    transform: translateY(-2px) scale(1.03);
}
.section-title {
    font-weight: 800;
    font-size: 2.4rem;
    margin-bottom: 1rem;
    color: var(--color-primario);
    text-align: center;
}
.section-subtitle {
    max-width: 720px;
    margin: 0 auto 3rem auto;
    text-align: center;
    font-size: 1.15rem;
    line-height: 1.7;
    color: #5a6464;
}
#como-funciona { background-color: #f0f5f7; }
#como-funciona .bi { font-size: 2.8rem; color: var(--color-primario); margin-bottom: 0.5rem; }
#como-funciona h6 { font-weight: 700; font-size: 1.1rem; color: var(--color-primario); }
#como-funciona p { color: #5a6464; }
.badge-gamification {
    display: inline-block;
    background-color: var(--color-acento);
    color: var(--color-primario);
    padding: 0.5em 1.5em;
    border-radius: 999px;
    font-weight: 800;
}
#ia-gamificacion .section-title, #demo .section-title { text-align: left; }
#ia-gamificacion .list-unstyled .bi, #demo .list-unstyled .bi { color: var(--color-primario); }
#ia-gamificacion .list-unstyled li, #demo .list-unstyled li { font-size: 1.1rem; font-weight: 600; }
#ia-gamificacion img {
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(6, 78, 100, 0.15);
}
#testimonios { background-color: #f7fafc; }
.testimonial-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 1.1rem;
    padding: 2.1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.testimonial-card .testimonial-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.testimonial-card img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--color-acento);
}
.testimonial-card .bi-quote {
    color: var(--color-acento);
    font-size: 2rem;
    opacity: 0.5;
    float: left;
    margin-right: 0.5rem;
    margin-top: -0.5rem;
}
.testimonial-text { font-size: 1.05rem; color: #3c4646; line-height: 1.7; }
.testimonial-author { font-weight: 700; color: var(--color-primario); }
.faq-section { background-color: #f0f5f7; }
.faq-section .accordion-item {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem !important;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(6, 78, 100, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}
.faq-section .accordion-button {
    font-weight: 700;
    color: var(--color-primario);
    background-color: #fff;
    box-shadow: none;
    transition: all 0.3s ease;
}
.faq-section .accordion-button:not(.collapsed) {
    color: #fff;
    background-color: var(--color-primario);
}
.faq-section .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(149, 196, 80, 0.3);
}
.faq-section .accordion-button::after { transition: transform 0.3s ease; }
.faq-section .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.faq-section .accordion-body { font-size: 1rem; line-height: 1.7; }
footer {
    background: var(--color-primario);
    color: #fff;
    padding: 40px 0 20px 0;
    margin-top: 0;
}
footer img { filter: brightness(0) invert(1);}
footer a { color: var(--color-acento); text-decoration: none;}
footer a:hover { text-decoration: underline; }

/* --- INICIO ESTILOS PARA AVATAR INTERACTIVO --- */
#avatar-interaction-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}
#avatar-container {
    order: 2;
    width: 100%;
    max-width: 280px;
    background: linear-gradient(to top, var(--color-primario), var(--color-acento));
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    line-height: 0;
    padding: 1em 1em 0 1em;
}
#avatar-canvas { width: 100%; height: auto; }
#speech-bubble {
    order: 1;
    background-color: #fff;
    padding: 1.2rem;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: 100%;
    max-width: 300px;
    position: relative;
}
#speech-bubble.visible { opacity: 1; transform: scale(1); }
/* Triángulo del globo de texto para la vista móvil */
#speech-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #fff;
}
#input-container {
    order: 3;
    width: 100%;
    max-width: 300px;
    display: flex;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    overflow: hidden;
}
#text-input {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 0.8rem 1.2rem;
    font-size: 1rem;
    background: #fff;
}
#send-btn {
    background: var(--color-primario);
    color: white;
    border: none;
    padding: 0 1.5rem;
    cursor: pointer;
    font-size: 1.2rem;
}
#send-btn:hover {
    background: var(--color-acento);
    color: var(--color-primario);
}
#avatar-interaction-container .small.text-muted { order: 4; }
/* --- FIN ESTILOS PARA AVATAR INTERACTIVO --- */

/* =======================
   BOTONES PRINCIPALES
   ======================= */
.btn-warning,
.hero-cta-btn {
    background: var(--color-acento) !important;
    color: var(--color-primario) !important;
    border: none;
    font-weight: 700;
    transition: all 0.3s;
}
.btn-warning:hover,
.hero-cta-btn:hover {
    background: var(--color-primario) !important;
    color: #fff !important;
    box-shadow: 0 6px 26px rgba(6, 78, 100, 0.12);
    transform: translateY(-2px) scale(1.035);
}
.btn-primary {
    background: var(--color-primario) !important;
    color: #fff !important;
    border: none;
    font-weight: 700;
    transition: all 0.3s;
}
.btn-primary:hover {
    background: var(--color-acento) !important;
    color: var(--color-primario) !important;
    box-shadow: 0 6px 26px rgba(149, 196, 80, 0.15);
    transform: translateY(-2px) scale(1.035);
}
.btn-outline-accent {
    background: transparent !important;
    color: var(--color-acento) !important;
    border: 2px solid var(--color-acento);
    font-weight: 700;
    transition: all 0.3s;
}
.btn-outline-accent:hover {
    background: var(--color-acento) !important;
    color: var(--color-primario) !important;
    border-color: var(--color-acento);
    transform: translateY(-2px) scale(1.03);
}
.btn-dark {
    background: #232d2d !important;
    color: #fff !important;
    border: none;
    font-weight: 700;
    transition: all 0.3s;
}
.btn-dark:hover {
    background: var(--color-acento) !important;
    color: var(--color-primario) !important;
    box-shadow: 0 6px 26px rgba(149, 196, 80, 0.15);
    transform: translateY(-2px) scale(1.03);
}

/* ==== BOTÓN CTA AMARILLO SOLO PARA .hero-cta-btn ==== */
.hero-cta-btn {
    background: var(--color-cta-amarillo) !important;
    color: var(--color-primario) !important;
    border: none;
    font-weight: 700;
    transition: all 0.3s;
}
.hero-cta-btn:hover,
.hero-cta-btn:focus {
    background: var(--color-primario) !important;
    color: #fff !important;
    box-shadow: 0 6px 26px rgba(6, 78, 100, 0.12);
    transform: translateY(-2px) scale(1.035);
}

/* ... AQUÍ SIGUEN TUS MEDIA QUERIES ... */
/* No repito los @media por espacio, pero van igual que en tu archivo original */



@media (max-width: 991px) {
    .hero-banner h1,
    .hero-banner h2 {
        font-size: 2.5rem;
    }
    #ia-gamificacion .section-title,
    #demo .section-title {
        text-align: center;
    }
    #ia-gamificacion .text-center-lg-start,
    #demo .text-center-lg-start {
        text-align: center !important;
    }

    /* ============== INICIO SECCIÓN CORREGIDA ============== */
    .hero-banner {
        min-height: auto; /* La altura ya no será el 100% de la pantalla */
        background-image: none; /* OCULTA la imagen de fondo original */
        padding: 0; /* Reinicia el padding para controlar con la imagen y el container */
        display: block; /* Cambia de flex a block para un flujo normal */
        background-attachment: scroll !important;
    }

    .hero-mobile-image {
        height: 280px; /* Dale una altura fija para que no sea demasiado grande */
        object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
        margin-top: 56px; /* Espacio para la barra de navegación fija */
    }

    /* Ajusta el espaciado del container ahora que el hero no lo tiene */
    .hero-banner .container {
        padding-top: 2rem;
        padding-bottom: 3rem;
    }

    .hero-text-box {
        background: transparent; /* QUITA el fondo semitransparente */
        backdrop-filter: none; /* QUITA el efecto blur */
        -webkit-backdrop-filter: none;
        box-shadow: none; /* QUITA la sombra */
        border: none; /* QUITA el borde */
        padding: 0; /* Reinicia el padding, el container se encarga ahora */
        border-radius: 0;
    }

    /* Centra el texto del carrusel en móvil */
    .hero-banner .swiper-slide {
        text-align: center;
        align-items: center; /* Centra los elementos del slide */
    }

    .hero-banner .section-title,
    .hero-banner p {
        text-align: center; /* Asegura que el texto esté centrado */
    }

    .hero-banner .section-title {
        text-align: center !important; /* Sobreescribe el 'text-start' del elemento */
    }
    /* ============== FIN SECCIÓN CORREGIDA ============== */
}

/* --- INICIO: LAYOUT ESCRITORIO MODIFICADO --- */
@media (min-width: 992px) {
    #ia-gamificacion .col-lg-6.text-center.animate-on-scroll {
        position: relative;
        min-height: 520px;
    }

    #avatar-interaction-container {
        /* Reseteamos flexbox y posicionamos relativamente para los hijos absolutos */
        position: static;
        display: block;
    }

    #avatar-container {
        position: absolute;
        top: 0;
        right: 0;
        width: 314px;
        max-width: 314px;
    }

    #speech-bubble {
        position: absolute;
        z-index: 10;
        top: 40px;
        right: 280px;
        width: 280px;
        margin-bottom: 0;
    }

    #speech-bubble::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%; /* Se posiciona a la derecha de la burbuja */
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 15px solid #fff; /* Crea el triángulo apuntando a la derecha */
        border-right: none;
    }

    #input-container {
        position: absolute;
        z-index: 5;
        bottom: 20px;
        right: 17px;
        width: 300px;

        margin-top: 240px;
    }

    #ia-gamificacion .col-lg-6.text-center .small.text-muted {
        position: absolute;
        bottom: -50px;
        right: 0;
        width: 314px;
        text-align: center;
    }
}
/* --- FIN: LAYOUT ESCRITORIO MODIFICADO --- */

@media (max-width: 767px) {
    .hero-banner {
        text-align: center;
    }
    .hero-banner p {
        margin-left: auto;
        margin-right: auto;
    }
    .section-title {
        font-size: 2rem;
    }
    .testimonial-card {
        margin-bottom: 1.5rem;
    }
}
@media (max-width: 575px) {
    .hero-banner h1,
    .hero-banner h2 {
        font-size: 2rem;
    }
}

/* Overlay y animación para navbar mobile */
.navbar-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(35, 45, 45, 0.45);
    z-index: 1040;
    transition: opacity 0.3s;
    opacity: 0;
    backdrop-filter: blur(2px);
}

.navbar-mobile-overlay.active {
    display: block;
    opacity: 1;
}

/* --- INICIO ESTILOS MEJORADOS MENU MOBILE --- */
@media (max-width: 991.98px) {
    /* Cuando el menú está abierto, la barra de navegación se vuelve sólida */
    .navbar.mobile-menu-open {
        background: rgba(255, 255, 255, 1) !important; /* Fondo blanco sólido */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    }

    .navbar-collapse {
        background: #fff;
        box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2); /* Sombra más suave y difusa */
        border-radius: 0 0 18px 18px;
        /* Se quita el margin-top para que se una a la barra */
        margin-top: 0;
        /* Se ajusta el padding para dar espacio interno */
        padding: 1.5rem 1rem 1.5rem 1rem;
        animation: slideDownMenu 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
        position: absolute; /* Asegura el posicionamiento correcto */
        top: 100%; /* Se posiciona justo debajo de la barra de navegación */
        left: 0;
        right: 0;
        width: auto;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    @keyframes slideDownMenu {
        from {
            transform: translateY(-15px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Oculta el icono de hamburguesa cuando el menú está abierto */
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        display: none;
    }

    .navbar-close-btn {
        display: block;
        position: absolute;
        top: 10px;
        right: 22px;
        font-size: 2.2rem;
        color: var(--color-primario);
        background: none;
        border: none;
        z-index: 1100;
    }

    /* Mejora de los links para hacerlos más táctiles */
    .navbar-collapse .nav-item {
        margin-bottom: 0.25rem;
    }
    .navbar-collapse .nav-link {
        font-size: 1.1rem; /* Texto más grande */
        padding: 0.75rem 1rem; /* Más área de toque */
        border-radius: 9px; /* Bordes redondeados */
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    }
    .navbar-collapse .nav-link::after {
        display: none; /* Oculta la línea inferior en mobile */
    }

    /* Estilo para el link activo o al pasar el cursor */
    .navbar .nav-link.active,
    .navbar .nav-link:hover {
        background-color: #f0f5f7; /* Fondo sutil para destacar */
        color: var(--color-primario) !important;
    }

    /* Estilos para el botón de Iniciar Sesión */
    .navbar-collapse .btn-warning {
        width: 100%;
        margin-top: 1rem;
        padding: 0.8rem;
        font-size: 1.1rem;
    }
}
/* --- FIN ESTILOS MEJORADOS MENU MOBILE --- */

/* Oculta el botón cerrar en escritorio */
@media (min-width: 992px) {
    .navbar-close-btn {
        display: none !important;
    }
}