/* =========================
   RESETEOS Y VARIABLES
   ========================= */
* { box-sizing: border-box; }
html, body { 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;
  --nav-offset: 90px; /* altura aproximada del navbar fijo */
}
html { scroll-behavior: smooth; }
body {
  background: var(--color-bg);
  color: var(--color-txt);
  font-family: var(--font-body);
}

/* Offset para secciones con ancla (navbar fijo) */
#home,#conocenos-video,#cursos,#como-funciona,#ia-gamificacion,#faq,#demo {
  scroll-margin-top: var(--nav-offset);
}

/* Animaciones on-scroll */
.animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s; }
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* Tipografías clave */
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);
}

/* Espaciado general */
section { padding: 5rem 0; }

/* =========================
   NAVBAR + MENÚ
   ========================= */
.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,.05) !important;
  z-index: 1050;
}
.navbar .navbar-brand img { max-width: 200px; }
.navbar .nav-link {
  color: var(--color-primario) !important;
  font-weight: 700; position: relative; padding-bottom: .5rem;
  transition: color .3s ease, opacity .15s ease; opacity: .9;
}
.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: left; transition: transform .3s ease-in-out;
}
.navbar .nav-link:hover { opacity: 1; }
.navbar .nav-link:hover::after,.navbar .nav-link.active::after { transform: scaleX(1); }
.navbar .nav-link.active,.navbar .nav-link:hover,.navbar .nav-link:focus { color: var(--color-acento) !important; }
.navbar .nav-link:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }

/* Overlay + bloqueo de scroll cuando el menú está abierto */
.navbar-mobile-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(35,45,45,.45); backdrop-filter: blur(2px);
  transition: opacity .3s; opacity: 0; z-index: 1040;
}
.navbar-mobile-overlay.active { display: block; opacity: 1; }
.no-scroll { overflow: hidden; }

/* Toggler: hamburguesa ↔ X (íconos dentro del mismo botón) */
.navbar-toggler .toggler-icon-open,
.navbar-toggler .toggler-icon-close { font-size: 1.8rem; line-height: 1; display: inline-block; }
.navbar-toggler .toggler-icon-close { display: none; }
.navbar-toggler[aria-expanded="true"] .toggler-icon-open { display: none; }
.navbar-toggler[aria-expanded="true"] .toggler-icon-close { display: inline-block; }
.navbar-toggler-icon { display: none; } /* oculta el ícono default de Bootstrap */

/* =========================
   HERO
   ========================= */
.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,.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
  padding: 3rem; border-radius: 1rem; box-shadow: 0 8px 32px rgba(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); }

/* CTA principal */
.hero-cta-btn{
  font-size:1.1rem;padding:.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 rgba(0,0,0,.1);transition:all .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,.12);transform:translateY(-2px) scale(1.035);
}

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

/* =========================
   CURSOS
   ========================= */
#cursos { background: #fff; }
.course-card{
  border:none;border-radius:1.1rem;overflow:hidden;background:#fff;margin-bottom:2rem;
  box-shadow:0 4px 25px rgba(6,78,100,.08);transition:all .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,.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:.5rem; }
.course-card .card-text{ flex-grow:1; color:#5a6464; }
.course-badge{
  background:var(--color-acento); color:var(--color-primario); font-weight:700; border-radius:999px;
  font-size:.9rem; margin-top:-20px; margin-left:16px; display:inline-block; padding:.4em 1.3em; position:relative;
}
.course-features{ list-style:none; padding-left:0; margin-top:1rem; font-size:.9rem; }
.course-features li{ padding-left:1.5em; margin-bottom:.5em; position:relative; }
.course-features li::before{ content:"✓"; color:var(--color-acento); font-weight:800; position:absolute; left:0; }

/* =========================
   BOTONES (consolidados)
   ========================= */
.btn-primary{ background:var(--color-primario) !important; color:#fff !important; border:none; font-weight:700; transition:all .3s; }
.btn-primary:hover{ background:var(--color-acento) !important; color:var(--color-primario) !important; box-shadow:0 6px 26px rgba(149,196,80,.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 .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 .3s; }
.btn-dark:hover{ background:var(--color-acento) !important; color:var(--color-primario) !important; box-shadow:0 6px 26px rgba(149,196,80,.15); transform:translateY(-2px) scale(1.03); }
.navbar .btn-warning{ background:var(--color-acento); color:var(--color-primario) !important; border:none; font-weight:700; transition:all .3s; }
.navbar .btn-warning:hover{ transform:scale(1.05); box-shadow:0 4px 15px rgba(149,196,80,.25); }

/* =========================
   TITULARES Y SECCIONES
   ========================= */
.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; }

/* Cómo funciona */
#como-funciona{ background-color:#f0f5f7; }
#como-funciona .bi{ font-size:2.8rem; color:var(--color-primario); margin-bottom:.5rem; }
#como-funciona h6{ font-weight:700; font-size:1.1rem; color:var(--color-primario); }
#como-funciona p{ color:#5a6464; }

/* IA & Gamificación */
.badge-gamification{ display:inline-block; background-color:var(--color-acento); color:var(--color-primario); padding:.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,.15); }

/* Testimonios (si lo activas) */
#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:.5; float:left; margin-right:.5rem; margin-top:-.5rem; }
.testimonial-text{ font-size:1.05rem; color:#3c4646; line-height:1.7; }
.testimonial-author{ font-weight:700; color:var(--color-primario); }

/* FAQ */
.faq-section{ background-color:#f0f5f7; }
.faq-section .accordion-item{
  background:#fff; border:1px solid #e9ecef; border-radius:.75rem !important; margin-bottom:1rem;
  box-shadow:0 2px 10px rgba(6,78,100,.05); overflow:hidden; transition:all .3s ease;
}
.faq-section .accordion-button{ font-weight:700; color:var(--color-primario); background:#fff; box-shadow:none; transition:all .3s ease; }
.faq-section .accordion-button:not(.collapsed){ color:#fff; background:var(--color-primario); }
.faq-section .accordion-button:focus{ box-shadow:0 0 0 .25rem rgba(149,196,80,.3); }
.faq-section .accordion-button::after{ transition: transform .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 */
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; }

/* =========================
   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,.1); line-height:0; padding:1em 1em 0 1em; }
#avatar-canvas{ width:100%; height:auto; }
#speech-bubble{
  order:1; background:#fff; padding:1.2rem; border-radius:15px; box-shadow:0 4px 15px rgba(0,0,0,.08);
  font-size:1rem; line-height:1.5; opacity:0; transform:scale(.95); transition:opacity .3s ease, transform .3s ease;
  width:100%; max-width:300px; position:relative;
}
#speech-bubble.visible{ opacity:1; transform:scale(1); }
#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,.1);
  border:1px solid #e0e0e0; overflow:hidden;
}
#text-input{ flex-grow:1; border:none; outline:none; padding:.8rem 1.2rem; font-size:1rem; background:#fff; }
#send-btn{ background:var(--color-primario); color:#fff; 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; }

/* =========================
   MEDIA QUERIES
   ========================= */
@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; }

  /* Hero móvil corregido */
  .hero-banner{ min-height:auto; background-image:none; padding:0; display:block; background-attachment:scroll !important; }
  .hero-mobile-image{ height:280px; object-fit:cover; margin-top:56px; }
  .hero-banner .container{ padding-top:2rem; padding-bottom:3rem; }
  .hero-text-box{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; border:none; padding:0; border-radius:0; }
  .hero-banner .swiper-slide{ text-align:center; align-items:center; }
  .hero-banner .section-title,.hero-banner p{ text-align:center !important; }

  /* Menú mobile refinado */
  .navbar.mobile-menu-open{
    background:#fff !important; backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:0 2px 4px rgba(0,0,0,.05) !important;
  }
  .navbar-collapse{
    position:absolute; top:100%; left:0; right:0; z-index:1055;
    background:#fff; border-radius:0 0 18px 18px; box-shadow:0 15px 30px -10px rgba(0,0,0,.2);
    padding:1.5rem 1rem; width:calc(100% - 1rem); margin:.5rem auto 0;
    animation:slideDownMenu .4s cubic-bezier(0.16,1,0.3,1) both;
  }
  @keyframes slideDownMenu { from { transform:translateY(-15px); opacity:0; } to { transform:translateY(0); opacity:1; } }

  .navbar-collapse .nav-item{ margin-bottom:.25rem; }
  .navbar-collapse .nav-link{
    font-size:1.1rem; padding:.75rem 1rem; border-radius:9px;
    transition:background-color .2s ease-in-out, color .2s ease-in-out;
  }
  .navbar-collapse .nav-link::after{ display:none; } /* sin subrayado en mobile */
  .navbar .nav-link.active,.navbar .nav-link:hover{ background:#f0f5f7; color:var(--color-primario) !important; }

  .navbar-collapse .btn-warning{ width:100%; margin-top:1rem; padding:.8rem; font-size:1.1rem; }
}

@media (min-width: 992px) {
  /* Layout escritorio avatar */
  #ia-gamificacion .col-lg-6.text-center.animate-on-scroll{ position:relative; min-height:520px; }
  #avatar-interaction-container{ 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%; transform:translateY(-50%);
    width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:15px solid #fff; 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; }
}

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

/* =========================
   ACCESIBILIDAD
   ========================= */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}