:root {--amarillo:#CFD113;
--azul-marino: #0a192f;--azul-claro: #112240;--celeste: #64ffda;--celeste-soft: #0077b6;--blanco: #f8f9fa;--texto-gris: #8892b0;--font-main: 'Inter', sans-serif;--font-heading: 'Outfit', sans-serif;}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* --- CONFIG BASE & SCROLL SUAVE --- */
html {scroll-behavior: smooth;}
body {font-family: var(--font-main);background-color: var(--blanco);color: var(--azul-marino);font-size:1.2rem;line-height: 1.6;overflow-x: hidden;}
h1, h2, h3 { font-family: var(--font-heading); font-weight: 800; }
h4{font-size: 1.5rem;font-weight: 800;}
label{font-size:1rem}
.div{box-sizing: border-box}
.container { width: 90%; max-width: 1100px; margin: 0 auto; }
/* --- NAVBAR --- */
nav {position: fixed;top: 0; width: 100%; height: var(--nav-height);background: rgba(10, 25, 47, 0.95);backdrop-filter: blur(10px);display: flex;align-items: center;z-index: 1000;border-bottom: 1px solid rgba(255,255,255,0.1);}
.nav-container {display: flex;justify-content: space-between;align-items: center;width: 90%;margin: 0 auto;}
.logo {color: var(--blanco);font-family: 'Outfit', sans-serif;font-weight: 800;font-size: 1.5rem;text-decoration: none;}
/* Menu Desktop */
.nav-menu {display: flex;list-style: none;gap: 25px;}
.nav-menu li:last-child{background:var(--celeste-soft);padding:0 .8rem;border-radius:8px}
.nav-menu a {color: var(--blanco);text-decoration: none;font-size: 0.9rem;font-weight: 600;transition: color 0.3s;}
.nav-menu a:hover { color: var(--celeste-soft); }
/* Hamburguesa (Mobile) */
.hamburger {display: none;cursor: pointer;flex-direction: column;gap: 5px;}
.hamburger span {width: 25px;height: 3px;background: var(--blanco);border-radius: 2px;}
/* --- HERO SECTION --- */
.hero {position: relative;height: auto;min-height: 600px;display: flex;align-items: center;justify-content: center;color: white;text-align: center;overflow: hidden;padding-top:6.5rem;padding-bottom:5rem}
.video-background {position: absolute;top: 0; left: 0; width: 100%; height: 100%;object-fit: cover;z-index: -1;filter: brightness(0.4);}
.hero-content { z-index: 1; padding: 20px; }
h1 { font-size: 2.5rem; line-height: 1.1; margin-bottom: 20px; }
h1 span { color: var(--celeste); display: block; font-size: 1.7rem; text-transform: uppercase; letter-spacing: 2px; }
.fs-sm{font-size:.9rem}
.fs-h3{font-size:1.9rem}
.subtitulo{font-size:1.3rem}
.subtitle { font-size: 1.1rem; max-width: 700px; margin: 0 auto 30px; }
.bullets { text-align: left; max-width: 500px; margin: 0 auto 30px; list-style: none; }
.bullets-pro {max-width: 100%}
.bullets li { margin-bottom: 10px; display: flex; align-items: flex-start;position:relative;padding-left:25px }
.positivo,.negativo{padding:0;display:flex;flex-wrap:wrap;list-style:none;gap:.3rem;justify-content:center}
.positivo li,.negativo li{padding:.5rem 1rem .5rem 2.5rem;position:relative;background:#fff;border-radius:1.5rem;font-size:1rem}
.bullets li::before { content: '';position:absolute;left:0;top:5px;width:15px;height:15px;background:url("../svg/check-hero.svg") no-repeat;background-size:cover; }
.positivo li:before,.negativo li:before{content: '';position:absolute;left:5px;top:10px;width:25px;height:25px;}
.positivo li:before{background:url("../svg/check-hero.svg") no-repeat;background-size:cover}
.negativo li:before{background:url("../svg/x-circle-fill.svg") no-repeat;background-size:cover}
.cta-container { display: flex; flex-direction: column; gap: 15px; align-items: center; }
.btn {display:block;padding: 18px 30px;border-radius: 50px;text-decoration: none;font-weight: bold;font-size: 1.1rem;transition: transform 0.3s;text-align: center;width: 100%;max-width: 400px;}
.btn:hover { transform: scale(1.05); }
.btn-primary { background-color: var(--celeste-soft); color: white; }
.btn-secondary { background-color: transparent; border: 2px solid white; color: white; }
.microcopy { font-size: 0.85rem; margin-top: 10px; opacity: 0.9; }
/* --- SECTION 2: DOLOR --- */
.section-padding { padding: 80px 0; }
.bg-navy { background-color: var(--azul-marino); color: white; }.txt-navy{color:var(--azul-marino)}
.pain-points { margin-top: 40px; }
.pain-points li { margin-bottom: 15px; color: var(--celeste); font-style: italic; list-style: none; border-left: 3px solid var(--celeste); padding-left: 15px;}
.remate { font-size: 1.5rem; font-weight: 800; margin-top: 30px; color: var(--blanco); }
/* --- SECTION 3: PERFIL --- */
.grid-4 { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
.card-w{ background: #ffffff; padding: 30px; border-radius: 15px; }
.card { background: #f0f4f8; padding: 30px; border-radius: 15px; }
.card h3 { color: var(--azul-marino); margin-bottom: 10px; }
/* --- SECTION 5: EVALUACION --- */
.eval-box { border: 2px dashed var(--celeste-soft); padding: 30px; border-radius: 20px; margin: 30px 0; }
.highlight,.txt-amarillo { color: var(--amarillo); font-weight: bold; }
/* --- FOOTER / SEALS --- */
.seals { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
.seals img { height: 50px; }
/* --- UTILIDADES --- */
.row {--bs-gutter-x: 1.5rem;--bs-gutter-y: 0;display: flex;flex-wrap: wrap;margin-top: calc(-1 * var(--bs-gutter-y));margin-right: calc(-.5 * var(--bs-gutter-x));    margin-left: calc(-.5 * var(--bs-gutter-x));}
.align-items-center {align-items: center !important;}
.justify-content-center {justify-content: center !important;}
.text-center{text-align:center}
.mb-0{margin-bottom:0px}
.mb-30{margin-bottom:30px}
.pt-1{padding-top:1rem}
.pt-2{padding-top:2rem}
.pt-3{padding-top:3rem}
.pt-4{padding-top:4rem}
.img-fluid{max-width: 100%;height: auto;}
.txt-celeste1{color:var(--celeste)}
.txt-celeste{color:var(--celeste-soft)}
.bg-celeste{background:var(--celeste-soft)}
.contenedor-principal {width: 100%;box-sizing: border-box;padding: 15px;}
.contenido-imagen img{width:200px;height:200px;border-radius:50%;overflow:hidden;}
.gap-2{gap:2rem}
.contenedor-bg {opacity: 0.4;mix-blend-mode:multiply;background-size: contain;background-repeat: no-repeat;background-position: center center;height: 100px;}
.bg-bi{background-image: url('../img/logo-ib.webp')}
.bg-min{background-image: url('../img/logo-ministerio.webp')}
.bg-white{background:#ffffff}
.img-stand{position:relative;overflow:hidden;height:100%}
.img-stand img{position:absolute;height:100%;width:100%;object-fit:cover;object-position:center;display: block;}
.w-100{width:100%}.h-100{height:100%}
.col-30,.col50,.col-70{width:100%}
.redes{padding:0;list-style:none}
.redes li{display:inline-block;margin:.5rem}
.redes li a{display:block;width:40px;height:40px;border-radius:5px;padding:5px;position:relative}
.redes li a:hover{background:var(--celeste-soft)}
.redes li a.instagram:before,.redes li a.facebook:before,.redes li a.whatsapp:before{content:"";position:absolute;top:5px;left:5px;width:30px;height:30px;background-repeat:no-repeat;background-size:contain}
.redes li a.instagram:before{background:url("../svg/instagram.svg")}
.redes li a.facebook:before{background:url("../svg/facebook.svg")}
.redes li a.whatsapp:before{background:url("../svg/whatsapp.svg")}
.botonwhatsapp{position:fixed;padding:1rem 1.2rem 1rem 3rem;background:#25d366;color:#fff;display:block;right:10px;bottom:10px;border-radius:20px;z-index: 10;text-decoration: none;font-size: 1rem;line-height: 1rem;}
.botonwhatsapp:hover{background:#128c7e}
.botonwhatsapp:before{content:"";position:absolute;top:8px;left:12px;width:30px;height:30px;background:url("../svg/whatsapp.svg");background-repeat:no-repeat;background-size:contain}

/* 1. Estilos Base del Modal (Fondo Oscuro) */
.modal {display: none; position: fixed; z-index: 1000; left: 0;top: 0;width: 100%;height: 100%;overflow: hidden; background-color: rgba(0, 0, 0, 0.7); }
.modal.activo {display: flex;justify-content: center;align-items: center;z-index:1040}
/* 2. Contenedor Principal del Modal */
.modal-contenido {background-color: #ffffff;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);position: relative;max-height: 80vh;display: flex;flex-direction: column;
}
/* 3. Encabezado y Botón de Cerrar (X) */
.modal-encabezado {padding: 1rem 2rem;border-bottom: 1px solid #eee;display: flex;justify-content: space-between;align-items: center;position: sticky;top: 0;background-color: inherit;z-index: 10;border-radius:12px}
.cerrar {background: none;border: none;font-size: 2.5rem;color: #555;cursor: pointer;line-height: 1;padding: 0;transition: color 0.2s;}
.cerrar:hover {color: #000;}
/* 4. Cuerpo con Scroll Interno y Padding de 4rem */
.modal-cuerpo {padding: 1rem 2rem;overflow-y: auto;max-height: calc(90vh - 100px);}
/* 5. Responsividad (Media Queries) */
/* a) Móviles (Por defecto, < 768px): Ocupa el 100% del ancho */
.modal-contenido {width: 100%;max-width: 95%;}

#abrirModal {padding: 1rem 2rem;font-size: 1rem;background-color: #007bff;color: white;border: none;border-radius: 25px;cursor: pointer;transition: background-color 0.2s;}
#abrirModal:hover {background-color: #0056b3;}
/*Formulario*/
.multi-step-form {padding:0px;margin-bottom:0px;}
.multi-step-form h3 {text-align: center;font-size: 22px;margin-bottom: 25px;color: #333;}
.multi-step-form h4 {font-size: 18px;color:var(--celeste-soft);margin-top: 0;margin-bottom: 20px;}
.multi-step-form h4.osc {color: var(--azul-oscuro);}
.multi-step-form input:not([type="radio"]),.multi-step-form select,.form-floating input:not([type="radio"]),.form-floating select,textarea{width: calc(100% - 20px);padding: 10px;margin-bottom: 15px;border: 1px solid #ddd;border-radius: 8px;font-size: 15px;box-sizing: border-box;}
.subir-archivo{position:relative}
/* Ocultamos el input original */
.input-file-hidden {display: none!important;}
/* Estilizamos el label para que parezca un botón */
.up-button {
  display: inline-block!important;
  text-align: center!important;
}

/* Efecto al pasar el ratón */
.custom-button:hover {
  background-color: #0056b3;
}

/* Efecto al hacer clic */
.custom-button:active {
  background-color: #004085;
  transform: translateY(1px);
}
.radio-group label {display: block;padding: 10px 0;font-size: 15px;color: #555;cursor: pointer;border-bottom: 1px solid #eee;}
.progress-indicator {display: flex;justify-content: space-between;align-items: center;margin-bottom: 30px;padding: 0 10px;}
.progress-indicator .step {width: 30px;height: 30px;border-radius: 50%;background-color: #ddd;color: #777;display: flex;justify-content: center;align-items: center;font-weight: bold;font-size: 14px;z-index: 10;transition: background-color 0.3s;}
.progress-indicator .step.active {background-color:var(--celeste-soft);color: white;}
.progress-indicator .line {flex-grow: 1;height: 3px;background-color: #ddd;margin: 0 -10px;}
.btn {padding: 12px 25px;border: none;border-radius: 25px;font-weight: bold;cursor: pointer;transition: all 0.2s;text-decoration: none;display: inline-block;text-align: center;}
.btn-view-profile {background-color: #4dc2c0;color: white;}
.btn-direct-contact {background-color: #e53957;color: white;}
.btn-next {width: 100%;margin-top: 20px;display: flex;justify-content: center;align-items: center;font-size: 16px;padding: 15px;background-color:var(--celeste-soft)}
.btn-confirm {width: 100%;margin-top: 20px;font-size: 16px;padding: 15px;}
.btn-next:hover,.btn-confirm:hover{background:var(--azul-marino);color:#fff}
.arrow-right {font-size: 1.2em;margin-left: 8px;font-weight: normal;}
.reset-link {text-align: center;display: block;margin-top: 15px;font-size: 13px;color: #aaa;text-decoration: none;}
.features-section h2 {font-size: 24px;text-align: center;margin-bottom: 25px;}
.icon-circle {width: 40px;height: 40px;margin-bottom:10px;border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size: 20px;color: white;margin-right: 15px;flex-shrink: 0;}
.list-white a{color:#fff;text-decoration:none}.list-white a:hover{color:var(--celeste-soft)}
/* --- Bachillerato Internacional --- */.module-diagnostica {background-color: #fff;position: relative;overflow: hidden;min-height: 400px;display: flex;flex-direction: column;min-width: 0;word-wrap: break-word;background-clip: border-box;border-radius: 0px;
}.bg-circle-diag {position: absolute;}.md-contenido{z-index:10}
/* --- FORMS OUTERS--- */
.form-floating input,.form-floating label{display:block;width:100%;text-align:left}

.lc-faq {
  padding: 60px 20px;
}

.lc-faq-container {
  max-width: 900px;
  margin: 0 auto;
}

.lc-faq-title {
  font-size: 28px;
  margin-bottom: 30px;
  text-align: center;
}

.lc-faq-item {
  border-bottom: 1px solid #e5e5e5;
}

.lc-faq-question {
  width: 100%;
  text-align: left;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}

.lc-faq-question::after {
  content: "+";
  position: absolute;
  right: 0;
  font-size: 20px;
  transition: transform 0.3s ease;
}

.lc-faq-item.active .lc-faq-question::after {
  content: "−";
}

.lc-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.lc-faq-answer p {
  margin: 0 0 15px 0;
  color: #555;
}

/* --- RESPONSIVE 992 --- */
@media (min-width: 992px) {
.ps-md-4{padding-left:4rem!important}
.col{padding-right:15px;padding-left:15px;}
.col-50{flex: 0 0 auto;width: 50%;}
.col-30{flex: 0 0 auto;width: 30%;}
.col-70{flex: 0 0 auto;width: 70%;}
}
/* --- MOBILE ADJUSTMENTS --- */
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-menu {position: absolute;top: 0;left: -100%;flex-direction: column;background: var(--azul-marino);width: 100%;text-align: center;padding: 40px 0;transition: 0.4s;box-shadow: 0 10px 20px rgba(0,0,0,0.3);}
.nav-menu.active { left: 0; }
.logo img{width:150px}
.logo-ib img{width:120px}
.hero h1 { font-size: 2.2rem; }
.cta-container { width: 100%; }
.img-stand{display:inline-block;width:90vw;aspect-ratio:9 / 16}
.px-md-2{padding-right:2rem;padding-left:2rem}
.pt-md-2{padding-top:2rem}
}
/* --- RESPONSIVE 768 --- */
@media (min-width: 769px) {
.logo img{width:200px}
.logo-ib img{width:160px}
}
/* --- RESPONSIVE 768 --- */
@media (min-width: 768px) {
h1 { font-size: 4rem; }
h2 { font-size: 3rem; line-height:2.8rem;margin-bottom:30px}
.subtitulo { font-size: 1.7rem;}
.grid-4 { grid-template-columns: 1fr 1fr; }
.cta-container { flex-direction: row; justify-content: center; }
.modal-contenido {width: 80%;}
}
@media (min-width: 993px) {
.contenedor-principal {display: flex;gap: 30px;}
.contenido-imagen {flex: 0 0 auto;text-align: left;margin-bottom: 0;}
.contenido-texto {flex-grow: 1;min-width: 0; }
}
@media (min-width: 1200px) {.modal-contenido {width: 50%;}
}

/* Botones next/prev en una sola línea (solo navegación) */
.nav-buttons{
  flex-wrap: nowrap;          /* evita que bajen */
  gap: 12px;
}

/* Anula el width:100% y max-width:400px heredado de .btn */
.nav-buttons .btn{
  width: auto !important;
  max-width: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Opcional: mismos tamaños */
.nav-buttons .btn{
  min-width: 180px;           /* ajusta a gusto */
}

/* En móvil: si no caben, que sí se apilen */
@media (max-width: 520px){
  .nav-buttons{ flex-wrap: wrap; }
  .nav-buttons .btn{
    width: 100% !important;
  }
}

/* Igualar altura/estilo de los botones en navegación del modal */
.nav-buttons .btn{
  margin-top: 0 !important;      /* quita el margin-top de .btn-confirm */
  padding: 15px 25px;            /* iguala el padding */
  font-size: 16px;               /* iguala tamaño de letra */
  line-height: 1;                /* evita que crezcan por line-height */
  height: 52px;                  /* fuerza misma altura */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Evita que .btn-confirm ponga width:100% dentro de nav-buttons */
.nav-buttons .btn-confirm{
  width: auto !important;
  max-width: none !important;
}

.is-invalid { border: 1px solid #d00 !important; }

/* Botones CTA en la sección final */
#agenda-tu-visita .cta-container{
  display: flex;
  flex-wrap: wrap;          /* permite que bajen si no entra */
  gap: 15px;
  justify-content: center;
  align-items: stretch;     /* mismo alto */
}

/* quitar el 100%/max-width del .btn SOLO en esta sección */
#agenda-tu-visita .cta-container .btn{
  width: auto;
  max-width: none;
  flex: 1 1 280px;          /* mínimo 280px, luego se acomodan */
  padding: 16px 22px;       /* opcional */
  font-size: 1rem;          /* opcional */
}

/* En móvil: vuelven a columna como ya te funciona */
@media (max-width: 768px){
  #agenda-tu-visita .cta-container{
    flex-direction: column;
    align-items: center;
  }
  #agenda-tu-visita .cta-container .btn{
    width: 100%;
    max-width: 400px;       /* tu estilo original */
  }
}