/* =====================================================================
   PRE ICFES SUPERIOR — Hoja de estilos principal
   Diseño: mobile-first. Los media queries AGREGAN estilos para pantallas
   más grandes (min-width), nunca al revés.
   ---------------------------------------------------------------------
   ÍNDICE
   01. Tokens (colores, tipografía, espacios)   → cambia la marca aquí
   02. Base y tipografía
   03. Utilidades y botones
   04. Encabezado y menú móvil
   05. Héroes (inicio y páginas internas)
   06. Ruta S (firma visual)
   07. Componentes: selector de público, programa, listas, pasos…
   08. Simulacros: precios y calculadora
   09. Preguntas frecuentes
   10. Formularios
   11. Equipo, testimonios, resultados (secciones activables)
   12. Cierre, pie de página y botón de WhatsApp
   13. Movimiento y accesibilidad
   ===================================================================== */

/* ---------- 00. FUENTES (alojadas en el sitio: más rápido y sin depender de Google) ---------- */
@font-face{font-family:"Poppins";src:url(../fonts/poppins-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ---------- 01. TOKENS ---------- */
:root{
  --azul:#002e9b;          /* Azul Superior (principal) */
  --noche:#00154f;         /* Azul profundo para secciones oscuras */
  --noche-2:#062171;
  --cielo:#0175d8;         /* Azul claro de apoyo */
  --naranja:#e6640e;       /* Naranja de marca (fondos y botones) */
  --naranja-txt:#c2520a;   /* Naranja para texto pequeño sobre blanco (contraste AA) */
  --naranja-claro:#ff9a52; /* Naranja para texto sobre azul noche */
  --papel:#f3f6ff;         /* Fondo claro de sección */
  --papel-2:#e6edff;
  --tinta:#1b2540;         /* Texto principal */
  --tinta-2:#4b5675;       /* Texto secundario */
  --linea:#d9e1f5;
  --blanco:#fff;
  --wa:#1faa53;

  --f-display:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-texto:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-h1:clamp(2rem,1.4rem + 2.8vw,3.4rem);
  --t-h2:clamp(1.65rem,1.25rem + 1.7vw,2.5rem);
  --t-h3:clamp(1.15rem,1.05rem + .45vw,1.35rem);
  --t-lead:clamp(1.0625rem,1rem + .3vw,1.18rem);

  --gutter:20px;
  --ancho:1200px;
  --sec:clamp(64px,8vw,120px);   /* espacio vertical de las secciones */
  --r-s:12px; --r-m:20px; --r-l:32px;
  --sombra:0 18px 50px -24px rgba(0,21,79,.35);
  --header-h:64px;
}
@media (min-width:1024px){ :root{ --gutter:40px; --header-h:78px; } }

/* ---------- 02. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;font-family:var(--f-texto);font-size:1rem;line-height:1.6;color:var(--tinta);background:var(--blanco);overflow-x:clip;-webkit-font-smoothing:antialiased;font-kerning:normal;text-rendering:optimizeLegibility;font-synthesis:none}
img,svg,video,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
p,li{text-wrap:pretty}
p{margin:0 0 .85em}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--azul);margin:0 0 .45em;line-height:1.14;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
h1{font-size:var(--t-h1);line-height:1.08;letter-spacing:-.03em}
h2{font-size:var(--t-h2);line-height:1.12;letter-spacing:-.025em}
h3{font-size:var(--t-h3);line-height:1.25;font-weight:700;letter-spacing:-.012em}
h4{font-size:1.05rem;line-height:1.3;font-weight:700;letter-spacing:-.008em}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--cielo);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible,.dark :focus-visible{outline-color:var(--naranja-claro)}
::selection{background:var(--naranja);color:var(--noche)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--noche);color:#fff;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700}
.skip:focus{top:12px}

/* ---------- 03. UTILIDADES Y BOTONES ---------- */
.wrap{width:100%;max-width:calc(var(--ancho) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec)}
.sec--papel{background:var(--papel)}
.sec--tight{padding-block:calc(var(--sec)*.6)}
.dark{background:var(--noche);color:#dbe4ff}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.lead{font-size:var(--t-lead);color:var(--tinta-2);max-width:40ch}
.dark .lead{color:#c6d3ff}
.kicker{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.9rem;letter-spacing:.02em;color:var(--naranja-txt);margin-bottom:14px}
.kicker::before{content:"";width:22px;height:3px;border-radius:3px;background:currentColor}
.dark .kicker{color:var(--naranja-claro)}
.sec-head{max-width:720px;margin-bottom:clamp(28px,4vw,52px)}
.sec-head p{color:var(--tinta-2);font-size:var(--t-lead);margin:0}
.dark .sec-head p{color:#c6d3ff}
.hl{color:var(--naranja)}
.dark .hl{color:var(--naranja-claro)}
.muted{color:var(--tinta-2)}
.small{font-size:.92rem}
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.btn{--bg:var(--azul);--fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border-radius:999px;border:2px solid transparent;background:var(--bg);color:var(--fg);font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;text-align:center;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease,border-color .2s}
.btn .ico{width:20px;height:20px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{--bg:var(--naranja);--fg:var(--noche);box-shadow:0 10px 24px -12px rgba(230,100,14,.8)}
.btn--primary:hover{--bg:#f27420}
.btn--blue:hover{--bg:var(--noche-2)}
.btn--line{--bg:transparent;--fg:var(--noche);border-color:var(--linea);background:#fff}
.btn--line:hover{border-color:var(--azul)}
.btn--light{--bg:#fff;--fg:var(--noche)}
.btn--ghost{--bg:transparent;--fg:#fff;border-color:rgba(255,255,255,.45)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn .ico-wa{color:var(--wa)}
.btn--ghost .ico-wa,.btn--blue .ico-wa{color:#fff}
.btn--block{width:100%}
.btn-row{display:flex;flex-direction:column;gap:12px}
@media (min-width:560px){ .btn-row{flex-direction:row;flex-wrap:wrap} .btn-row .btn{width:auto} }
.link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--azul);text-decoration:none;min-height:44px}
.link .ico{width:18px;height:18px;transition:transform .2s}
.link:hover .ico{transform:translateX(4px)}
.dark .link{color:#fff}

.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--linea);font-size:.92rem;font-weight:600;color:var(--noche)}
.chip .ico{width:18px;height:18px;color:var(--cielo)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- 04. ENCABEZADO Y MENÚ ---------- */
.top{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.top.is-scrolled{border-color:var(--linea);box-shadow:0 6px 20px -16px rgba(0,21,79,.5)}
.top__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header-h)}
.brand{display:flex;align-items:center;flex:none}
.brand img{width:132px;height:auto}
@media (min-width:1024px){ .brand img{width:158px} }
.nav{display:none}
.menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px 8px 16px;border-radius:999px;border:1.5px solid var(--linea);background:#fff;font-weight:700;color:var(--noche)}
.menu-btn .ico{width:22px;height:22px}
@media (min-width:1024px){
  .menu-btn{display:none}
  .nav{display:flex;align-items:center;gap:6px}
  .nav a{position:relative;padding:10px 12px;border-radius:10px;text-decoration:none;font-weight:600;font-size:.98rem;color:var(--tinta)}
  .nav a:hover{color:var(--azul);background:var(--papel)}
  .nav a[aria-current="page"]{color:var(--azul)}
  .nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;border-radius:3px;background:var(--naranja)}
  .nav .btn{margin-left:10px;min-height:46px;padding:10px 20px}
}

/* Menú móvil (hoja a pantalla completa) */
.sheet{position:fixed;inset:0;z-index:120;background:var(--noche);color:#fff;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transform:translateY(-12px);transition:opacity .25s ease,transform .25s ease,visibility 0s .25s}
.sheet.is-open{visibility:visible;opacity:1;transform:none;transition:opacity .25s ease,transform .25s ease}
.sheet__bar{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);flex:none}
.sheet__bar img{width:132px}
.sheet__close{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-weight:700}
.sheet__close .ico{width:22px;height:22px}
.sheet__nav{padding-block:18px 8px}
.sheet__nav a{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--f-display);font-size:1.7rem;font-weight:700;letter-spacing:-.02em;text-decoration:none;color:#fff}
.sheet__nav a .ico{width:22px;height:22px;color:var(--naranja-claro)}
.sheet__nav a[aria-current="page"]{color:var(--naranja-claro)}
.sheet__who{margin-top:26px}
.sheet__who p{margin:0 0 10px;color:#aebcf0;font-weight:600}
.sheet__who .chips a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;text-decoration:none;min-height:44px}
.sheet__cta{margin-top:auto;padding-block:28px calc(24px + env(safe-area-inset-bottom));display:grid;gap:12px}
.sheet__cta small{color:#aebcf0;text-align:center}
body.lock{overflow:hidden}

/* ---------- 05. HÉROES ---------- */
.hero{position:relative;overflow:hidden;padding-top:clamp(24px,5vw,56px);background:linear-gradient(180deg,#fff 0%,var(--papel) 100%)}
.hero__grid{display:grid;gap:24px;align-items:end}
.hero__copy{position:relative;z-index:2;padding-bottom:4px}
.hero__tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:#fff;border:1px solid var(--linea);font-size:.9rem;font-weight:600;color:var(--noche);margin-bottom:18px}
.hero__tag b{display:inline-grid;place-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--noche);color:#fff;font-size:.8125rem}
.hero h1{margin-bottom:.4em}
.hero h1 .l2{display:block;color:var(--naranja)}
.hero .lead{margin-bottom:24px}
.hero__facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hero__art{position:relative;z-index:1;margin-inline:calc(var(--gutter)*-1);height:clamp(240px,62vw,300px)}
.hero__art .stage{position:absolute;inset:auto 0 0 0;height:78%;background:var(--azul);border-radius:var(--r-l) var(--r-l) 0 0;overflow:hidden}
.hero__art .stage::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(1,117,216,.8),transparent 55%)}
.hero__art .people{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:100%;width:auto;max-width:none;z-index:2;filter:drop-shadow(0 20px 30px rgba(0,21,79,.35))}
.hero__art .suko{position:absolute;z-index:3;right:10px;bottom:6px;width:clamp(78px,22vw,110px)}
.hero__art .note{position:absolute;z-index:3;left:14px;top:26%;background:#fff;border-radius:14px;padding:8px 12px;font-weight:700;font-size:.85rem;color:var(--noche);box-shadow:var(--sombra);display:flex;gap:8px;align-items:center;transform:rotate(-3deg)}
.hero__art .note .ico{width:18px;height:18px;color:var(--naranja)}
@media (min-width:900px){
  .hero{padding-top:40px}
  .hero__grid{grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;min-height:min(620px,calc(100svh - var(--header-h)))}
  .hero__copy{padding-block:40px 110px}
  .hero__art{margin:0;height:600px;align-self:end}
  .hero__art .stage{height:84%;left:4%;right:4%;border-radius:280px 280px 0 0}
  .hero__art .people{height:76%}
  .hero__art .suko{right:-6px;bottom:24px;width:150px}
  .hero__art .note{left:-16px;top:30%;font-size:.95rem;padding:10px 14px}
}

/* Héroe de páginas internas */
.phero{position:relative;overflow:hidden;padding-block:clamp(28px,6vw,72px) 0;background:var(--papel)}
.phero.dark{background:var(--noche)}
.phero__grid{display:grid;gap:28px;align-items:end}
.phero__copy{position:relative;z-index:2;padding-bottom:clamp(8px,3vw,64px)}
.phero .lead{margin-bottom:24px}
.phero__media{position:relative;margin-inline:calc(var(--gutter)*-1)}
.phero__media img.photo{width:100%;height:clamp(190px,52vw,300px);object-fit:cover;border-radius:var(--r-l) var(--r-l) 0 0}
.phero__media .suko{position:absolute;right:14px;bottom:-4px;width:clamp(86px,24vw,130px);z-index:2}
.phero__media--cut{display:flex;justify-content:center;align-items:flex-end;min-height:0}
.phero__media--cut img{height:clamp(200px,58vw,320px);width:auto}
@media (min-width:900px){
  .phero__grid{grid-template-columns:1.1fr .9fr;gap:48px}
  .phero__media{margin:0}
  .phero__media img.photo{height:440px;border-radius:var(--r-l) var(--r-l) 0 0}
  .phero__media--cut img{height:420px}
  .phero__media .suko{right:-20px;width:150px}
}

/* ---------- 06. RUTA S ---------- */
.route{position:absolute;pointer-events:none;z-index:0}
.route path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.route .r-main{stroke:url(#rgrad);stroke-width:26}
.route .r-head{fill:var(--azul);stroke:none}
.hero .route{left:-40px;bottom:-30px;width:130%;max-width:none;opacity:.95}
@media (min-width:900px){ .hero .route{left:-60px;bottom:-40px;width:100%} }
.js .draw .r-main{stroke-dasharray:var(--len,2400);stroke-dashoffset:var(--len,2400);animation:draw 1.6s .2s cubic-bezier(.65,0,.35,1) forwards}
.js .draw .r-head{opacity:0;animation:pop .35s 1.6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}
.js .rise{opacity:0;transform:translateY(18px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.js .rise.d1{animation-delay:.08s}.js .rise.d2{animation-delay:.18s}.js .rise.d3{animation-delay:.28s}.js .rise.d4{animation-delay:.4s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- 07. COMPONENTES ---------- */
/* Selector de público (pestañas) */
.who{background:var(--papel)}
.who__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px;border-radius:18px;background:#fff;border:1px solid var(--linea);margin-bottom:18px}
.who__tab{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:64px;padding:10px 4px;border:0;border-radius:13px;background:transparent;font-weight:700;font-size:.86rem;line-height:1.15;color:var(--tinta-2);transition:background-color .2s,color .2s}
.who__tab .ico{width:22px;height:22px}
.who__tab[aria-selected="true"]{background:var(--noche);color:#fff}
.who__tab[aria-selected="true"] .ico{color:var(--naranja-claro)}
.who__panel{background:#fff;border-radius:var(--r-m);padding:22px;border:1px solid var(--linea)}
.who__panel h3{margin-bottom:8px}
.who__panel > p{color:var(--tinta-2)}
.who__links{display:grid;gap:10px;margin:18px 0 20px}
.who__links a{display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;background:var(--papel);text-decoration:none;font-weight:600;color:var(--noche);min-height:56px;transition:background-color .2s}
.who__links a:hover{background:var(--papel-2)}
.who__links a .ico:first-child{color:var(--azul);width:26px;height:26px}
.who__links a .ico:last-child{margin-left:auto;width:18px;height:18px;color:var(--tinta-2)}
.who__links span small{display:block;font-weight:500;color:var(--tinta-2);font-size:.88rem}
@media (min-width:760px){
  .who__tabs{display:inline-grid;grid-template-columns:repeat(3,auto)}
  .who__tab{flex-direction:row;gap:10px;min-height:52px;padding:10px 18px;font-size:1rem}
  .who__panel{padding:34px;display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:start}
  .who__links{margin:0;grid-row:span 3;grid-column:2}
}
.js .who__panel.is-entering{animation:panel .35s ease}
@keyframes panel{from{opacity:0;transform:translateY(8px)}}

/* Programa: selector de modalidad + tarjetas */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px;border-radius:999px;background:var(--papel-2);margin-bottom:16px}
.seg button{min-height:48px;border:0;border-radius:999px;background:transparent;font-weight:700;color:var(--tinta-2)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--noche);box-shadow:0 4px 14px -6px rgba(0,21,79,.35)}
.plans{display:grid;gap:20px}
.plan{position:relative;display:flex;flex-direction:column;border-radius:var(--r-l);background:#fff;border:1.5px solid var(--linea);overflow:hidden}
.plan__head{padding:24px 22px 18px;background:var(--papel)}
.plan--v .plan__head{background:#fff4ec}
.plan__head .ico-big{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--azul);color:#fff;margin-bottom:14px}
.plan--v .plan__head .ico-big{background:var(--naranja);color:var(--noche)}
.plan__head h3{font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem);margin-bottom:4px}
.plan__head p{margin:0;color:var(--tinta-2)}
.plan__price{padding:20px 22px;border-bottom:1.5px dashed var(--linea)}
.plan__price .big{font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,1.8rem + 1.6vw,2.8rem);letter-spacing:-.03em;color:var(--noche);line-height:1}
.plan__price .big small{font-family:var(--f-texto);font-size:.95rem;font-weight:600;color:var(--tinta-2);letter-spacing:0;margin-left:4px}
.pay{display:grid;gap:10px;margin-top:16px}
.pay div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 14px;border-radius:12px;background:var(--papel);font-size:.95rem}
.pay div b{font-family:var(--f-display);font-size:1.12rem;color:var(--noche);white-space:nowrap}
.pay div span small{display:block;color:var(--tinta-2);font-size:.85rem}
.plan__list{padding:20px 22px;display:grid;gap:12px;flex:1}
.plan__list li{display:flex;gap:12px;align-items:flex-start}
.plan__list .ico{width:22px;height:22px;color:var(--azul);margin-top:2px}
.plan--v .plan__list .ico{color:var(--naranja-txt)}
.plan__list b{color:var(--noche)}
.plan__cta{padding:0 22px 22px}
.both{margin-top:28px;padding:22px;border-radius:var(--r-m);background:var(--noche);color:#dbe4ff}
.both h3{color:#fff;margin-bottom:14px}
.both ul{display:grid;gap:12px}
.both li{display:flex;gap:12px;align-items:flex-start}
.both .ico{color:var(--naranja-claro);margin-top:2px}
.both b{color:#fff}
@media (max-width:899.98px){ .js .plans .plan.is-off{display:none} }
@media (min-width:900px){
  .seg{display:none}
  .plans{grid-template-columns:1fr 1fr;gap:28px}
  .both{padding:32px 36px}
  .both ul{grid-template-columns:repeat(2,1fr);gap:16px 32px}
}

/* Áreas del Saber 11 */
.areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.area{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.area{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:#fff;border:1px solid var(--linea);font-weight:700;color:var(--noche);font-size:.98rem;line-height:1.2}
.area .ico{width:26px;height:26px;color:var(--azul)}
.area:last-child:nth-child(odd){grid-column:span 2}
.dark .area{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.dark .area .ico{color:var(--naranja-claro)}
@media (min-width:760px){ .areas{grid-template-columns:repeat(5,1fr)} .area{flex-direction:column;text-align:center;padding:20px 12px} .area:last-child:nth-child(odd){grid-column:auto} }

/* Lista con íconos (beneficios, “para ti si”) */
.ilist{display:grid;gap:16px}
.ilist li{display:flex;gap:14px;align-items:flex-start}
.ilist .bullet{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--papel);color:var(--azul)}
.dark .ilist .bullet{background:rgba(255,255,255,.08);color:var(--naranja-claro)}
.ilist b{display:block;color:var(--noche);font-size:1.05rem;line-height:1.3}
.dark .ilist b{color:#fff}
.ilist span{color:var(--tinta-2)}
.dark .ilist span{color:#c6d3ff}

.split{display:grid;gap:36px;align-items:center}
.split > *,.hero__grid > *,.phero__grid > *,.form-layout > *,.closing__grid > *{min-width:0}
@media (min-width:900px){ .split{grid-template-columns:1fr 1fr;gap:64px} .split--wide-left{grid-template-columns:1.15fr .85fr} }
.photo-frame{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--papel)}
.photo-frame img{width:100%;height:100%;object-fit:cover}

/* Pasos (metodología) — secuencia vertical con la ruta */
.steps{position:relative;display:grid;gap:0;counter-reset:paso}
.steps::before{content:"";position:absolute;left:23px;top:30px;bottom:30px;width:4px;border-radius:4px;background:rgba(255,255,255,.14)}
.steps__fill{position:absolute;left:23px;top:30px;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--naranja),#ffb27a);height:0;transition:height .15s linear}
.step{position:relative;display:grid;grid-template-columns:50px 1fr;gap:16px;padding-bottom:30px}
.step:last-child{padding-bottom:0}
.step__n{position:relative;z-index:1;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--noche-2);border:2px solid rgba(255,255,255,.2);font-family:var(--f-display);font-weight:800;color:#fff;transition:background-color .3s,border-color .3s,color .3s}
.step.is-reached .step__n{background:var(--naranja);border-color:var(--naranja);color:var(--noche)}
.step__body{padding-top:8px}
.step__body h3{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.step__body h3 .ico{width:22px;height:22px;color:var(--naranja-claro)}
.step__body p{margin:0 0 10px;color:#c6d3ff}
.step__body q{display:inline-block;quotes:none;font-weight:600;color:#fff;font-size:.95rem;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,.07)}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(2,1fr);column-gap:64px}
  .steps::before,.steps__fill{display:none}
  .step{padding:26px 0;border-top:1px solid rgba(255,255,255,.14)}
  .step__n{background:var(--naranja);border-color:var(--naranja);color:var(--noche)}
}
/* Variante compacta (inicio) */
.steps-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-block:8px 28px}
.steps-mini li{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:rgba(255,255,255,.07);color:#fff;font-weight:700;font-size:.95rem;line-height:1.2;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
.steps-mini li span{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--naranja);color:var(--noche);font-family:var(--f-display);font-size:.85rem}
@media (min-width:760px){ .steps-mini{grid-template-columns:repeat(3,1fr)} }

/* Bloque “No estás solo” con Suko */
.mascot-card{position:relative;display:grid;gap:18px;padding:26px 22px 0;border-radius:var(--r-l);background:var(--azul);color:#dbe4ff;overflow:hidden}
.mascot-card h3{color:#fff;font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.mascot-card img{width:150px;margin:0 auto -6px}
@media (min-width:760px){ .mascot-card{grid-template-columns:1fr 180px;align-items:end;padding:36px 36px 0} .mascot-card > div{padding-bottom:36px} .mascot-card img{width:180px;margin:0} }

/* Tarjeta de sede / convenio */
.place{display:grid;gap:0;border-radius:var(--r-l);overflow:hidden;background:#fff;border:1.5px solid var(--linea)}
.place__map{aspect-ratio:4/3;background:var(--papel)}
.place__map iframe{width:100%;height:100%;border:0}
.place__info{padding:22px}
.place__info ul{display:grid;gap:14px;margin:14px 0 18px}
.place__info li{display:flex;gap:12px}
.place__info .ico{color:var(--azul);margin-top:2px}
@media (min-width:900px){ .place{grid-template-columns:1.1fr .9fr} .place__map{aspect-ratio:auto;min-height:380px} .place__info{padding:36px} }

/* ---------- 08. SIMULACROS ---------- */
.prices{display:grid;gap:12px}
.price{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 16px;padding:18px 20px;border-radius:var(--r-m);background:#fff;border:1.5px solid var(--linea)}
.price h3{margin:0;font-size:1.15rem}
.price .val{margin:0;font-family:var(--f-display);font-weight:800;font-size:1.7rem;color:var(--noche);letter-spacing:-.02em;text-align:right;line-height:1}
.price p:not(.val){grid-column:1/-1;margin:0;font-size:.9rem;color:var(--tinta-2)}
.price--best{border-color:var(--naranja);background:#fff8f2}
.price__tag{display:inline-block;margin-left:6px;padding:2px 10px;border-radius:999px;background:var(--naranja);color:var(--noche);font-size:.8125rem;font-weight:800;vertical-align:middle}
@media (min-width:900px){ .prices{grid-template-columns:repeat(3,1fr);gap:16px} .price{grid-template-columns:1fr;padding:26px} .price .val{margin:0;text-align:left;font-size:2.2rem;margin-top:6px} }

.calc{margin-top:24px;padding:22px;border-radius:var(--r-l);background:var(--noche);color:#dbe4ff}
.calc h3{color:#fff}
.calc__row{display:grid;gap:16px;margin-top:14px}
.calc label,.calc legend{display:block;font-weight:700;color:#fff;margin-bottom:8px}
.stepper{display:grid;grid-template-columns:52px 1fr 52px;gap:6px;align-items:center}
.stepper button{height:52px;border-radius:14px;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff;display:grid;place-items:center}
.stepper input{height:52px;border-radius:14px;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;text-align:center;font-family:var(--f-display);font-weight:800;font-size:1.3rem;width:100%;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc fieldset{border:0;margin:0;padding:0}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.opts label{margin:0}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts span{display:grid;place-items:center;min-height:52px;border-radius:14px;border:1.5px solid rgba(255,255,255,.3);font-weight:700;color:#fff;cursor:pointer;text-align:center;line-height:1.1;padding:4px}
.opts input:checked + span{background:var(--naranja);border-color:var(--naranja);color:var(--noche)}
.opts input:focus-visible + span{outline:3px solid var(--naranja-claro);outline-offset:2px}
.calc__out{margin-top:20px;padding:18px;border-radius:16px;background:rgba(255,255,255,.07)}
.calc__out .total{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,1.6rem + 2vw,2.8rem);color:#fff;line-height:1;letter-spacing:-.02em}
.calc__out p{margin:8px 0 16px;font-size:.92rem;color:#c6d3ff}
@media (min-width:900px){ .calc{padding:36px} .calc__row{grid-template-columns:1fr 1.3fr;gap:24px} }

.flow{display:grid;gap:14px;counter-reset:f}
.flow li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px;border-radius:var(--r-m);background:#fff;border:1px solid var(--linea)}
.flow li::before{counter-increment:f;content:counter(f);width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--azul);color:#fff;font-family:var(--f-display);font-weight:800}
.flow b{display:block;color:var(--noche);font-size:1.05rem}
.flow p{margin:2px 0 0;color:var(--tinta-2);font-size:.95rem}
@media (min-width:900px){ .flow{grid-template-columns:repeat(4,1fr)} .flow li{grid-template-columns:1fr;align-content:start} }

.tabs-box{border-radius:var(--r-l);background:#fff;border:1.5px solid var(--linea);overflow:hidden}
.tabs-box [role=tablist]{display:grid;grid-template-columns:1fr 1fr;border-bottom:1.5px solid var(--linea)}
.tabs-box [role=tab]{min-height:56px;border:0;background:var(--papel);font-weight:700;color:var(--tinta-2);padding:10px}
.tabs-box [role=tab][aria-selected="true"]{background:#fff;color:var(--noche);box-shadow:inset 0 -3px 0 var(--naranja)}
.tabs-box [role=tabpanel]{padding:22px}
.checks{display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks .ico{width:22px;height:22px;color:var(--wa);margin-top:2px}
@media (min-width:900px){
  .tabs-box--split [role=tablist]{display:none}
  .tabs-box--split .tabs-box__panels{display:grid;grid-template-columns:1fr 1fr}
  .tabs-box--split [role=tabpanel]{display:block!important;padding:32px}
  .tabs-box--split [role=tabpanel] + [role=tabpanel]{border-left:1.5px solid var(--linea)}
  .tabs-box__title{display:block!important}
}
.tabs-box__title{display:none;margin-bottom:16px}

/* ---------- 09. PREGUNTAS FRECUENTES ---------- */
.faq-tools{display:grid;gap:14px;margin-bottom:28px}
.search{position:relative}
.search .ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--tinta-2);pointer-events:none}
.search input{width:100%;min-height:56px;padding:12px 16px 12px 50px;border-radius:999px;border:1.5px solid var(--linea);background:#fff;font-size:1rem}
.search input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(1,117,216,.18)}
.filters{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;scroll-snap-align:start;min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--linea);background:#fff;font-weight:700;color:var(--tinta-2);font-size:.95rem}
.filters button[aria-pressed="true"]{background:var(--noche);border-color:var(--noche);color:#fff}
@media (min-width:760px){ .filters{flex-wrap:wrap;overflow:visible;margin:0;padding:0} }
.faq-group{margin-bottom:34px}
.faq-group > h3{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.faq-group > h3 .ico{color:var(--naranja)}
.qa{border-radius:16px;background:#fff;border:1.5px solid var(--linea);margin-bottom:10px;transition:border-color .2s}
.qa[open]{border-color:var(--azul)}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:14px 18px;font-weight:700;color:var(--noche);cursor:pointer;line-height:1.35}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ico{flex:none;width:28px;height:28px;padding:4px;border-radius:50%;background:var(--papel);color:var(--azul);transition:transform .25s}
.qa[open] summary .ico{transform:rotate(45deg);background:var(--azul);color:#fff}
.qa .ans{padding:0 18px 18px;color:var(--tinta-2)}
.qa .ans p:last-child{margin:0}
.faq-empty{padding:26px;border-radius:var(--r-m);background:var(--papel);text-align:center}
.dark .qa{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.dark .qa summary{color:#fff}
.dark .qa .ans{color:#c6d3ff}
.dark .qa summary .ico{background:rgba(255,255,255,.1);color:#fff}
@media (min-width:1024px){ .faq-layout{display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:start} .faq-layout .faq-tools{position:sticky;top:calc(var(--header-h) + 24px)} .faq-layout .filters{flex-direction:column;align-items:stretch} .faq-layout .filters button{text-align:left;border-radius:12px} }

/* ---------- 10. FORMULARIOS ---------- */
.form-card{padding:22px;border-radius:var(--r-l);background:#fff;border:1.5px solid var(--linea)}
@media (min-width:760px){ .form-card{padding:36px} }
.form{display:grid;gap:18px}
.field{display:grid;gap:6px}
.field label,.field legend{font-weight:700;color:var(--noche);font-size:.98rem}
.field .opt{font-weight:500;color:var(--tinta-2)}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--linea);background:#fbfcff;font-size:1rem;color:var(--tinta)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300154f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px;padding-right:44px}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(1,117,216,.18);background:#fff}
.field .hint{font-size:.88rem;color:var(--tinta-2)}
.field .err{display:none;font-size:.9rem;font-weight:600;color:#b42318}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#d92d20}
.field.is-invalid .err{display:block}
.radios{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:0;margin:0;padding:0}
.radios legend{margin-bottom:8px;grid-column:1/-1}
.radios label{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 12px;border-radius:14px;border:1.5px solid var(--linea);background:#fbfcff;font-weight:600;font-size:.95rem;cursor:pointer;line-height:1.2}
.radios input{width:20px;height:20px;accent-color:var(--azul);flex:none;margin:0}
.radios label:has(input:checked){border-color:var(--azul);background:var(--papel)}
.file{display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 16px;border-radius:14px;border:1.5px dashed var(--linea);background:#fbfcff;cursor:pointer}
.file input{position:absolute;opacity:0;width:1px;height:1px}
.file:focus-within{border-color:var(--azul)}
.file .ico{color:var(--azul)}
.file small{display:block;color:var(--tinta-2)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.93rem;color:var(--tinta-2);cursor:pointer}
.consent input{width:22px;height:22px;margin-top:1px;accent-color:var(--azul);flex:none}
.form__actions{display:grid;gap:10px}
.form__alt{font-size:.93rem;color:var(--tinta-2);text-align:center;margin:0}
.form__alt button{border:0;background:none;padding:0;color:var(--azul);font-weight:700;text-decoration:underline;text-underline-offset:3px;min-height:44px}
.hp{position:absolute;left:-9999px}
.status{display:none;gap:12px;align-items:flex-start;padding:16px;border-radius:14px;font-weight:600}
.status .ico{flex:none;margin-top:1px}
.status.is-on{display:flex}
.status--ok{background:#e7f8ee;color:#0e5a2c}
.status--err{background:#fdecea;color:#8a1c12}
.status--busy{background:var(--papel);color:var(--noche)}
.btn[aria-busy="true"]{opacity:.75;pointer-events:none}
.btn .spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;display:none}
.btn[aria-busy="true"] .spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.form-layout{display:grid;gap:28px}
@media (min-width:1000px){ .form-layout{grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start} .row-2{display:grid;grid-template-columns:1fr 1fr;gap:18px} }

/* Canales de contacto */
.channels{display:grid;gap:10px}
.channel{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;background:#fff;border:1.5px solid var(--linea);text-decoration:none;color:var(--tinta);min-height:72px}
a.channel:hover{border-color:var(--azul)}
.channel .bullet{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--papel);color:var(--azul)}
.channel--wa .bullet{background:#e7f8ee;color:var(--wa)}
.channel b{display:block;color:var(--noche)}
.channel span{font-size:.95rem;color:var(--tinta-2);overflow-wrap:anywhere}

/* Tarjetas de intención (contacto) */
.intents{display:grid;gap:12px}
.intent{display:grid;grid-template-columns:48px 1fr;gap:4px 14px;align-items:start;padding:18px;border-radius:var(--r-m);background:#fff;border:1.5px solid var(--linea);text-decoration:none;color:var(--tinta);transition:border-color .2s,transform .2s}
.intent:hover{border-color:var(--azul);transform:translateY(-2px)}
.intent .bullet{grid-row:span 2;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--noche);color:var(--naranja-claro)}
.intent b{font-family:var(--f-display);font-size:1.15rem;color:var(--noche)}
.intent span{color:var(--tinta-2);font-size:.95rem}
@media (min-width:900px){ .intents{grid-template-columns:repeat(3,1fr);gap:16px} .intent{grid-template-columns:1fr;padding:26px} .intent .bullet{grid-row:auto;margin-bottom:10px} }

/* ---------- 11. SECCIONES ACTIVABLES Y EQUIPO ---------- */
.team{display:grid;gap:14px}
.person{display:flex;gap:16px;align-items:center;padding:18px;border-radius:var(--r-m);background:#fff;border:1.5px solid var(--linea)}
.person__av{flex:none;width:72px;height:72px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--azul);color:#fff;font-family:var(--f-display);font-weight:800;font-size:1.6rem}
.person__av img{width:100%;height:100%;object-fit:cover}
.person b{display:block;font-family:var(--f-display);font-size:1.2rem;color:var(--noche)}
.person span{color:var(--naranja-txt);font-weight:700;font-size:.95rem}
.person p{margin:4px 0 0;font-size:.93rem;color:var(--tinta-2)}
.person--soon{border-style:dashed;background:transparent}
.person--soon .person__av{background:var(--papel-2);color:var(--azul)}
@media (min-width:760px){ .team{grid-template-columns:repeat(2,1fr)} }
.values{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.values li{padding:16px;border-radius:16px;background:#fff;border:1px solid var(--linea)}
.values b{display:block;font-family:var(--f-display);font-size:1.1rem;color:var(--noche);margin-bottom:2px}
.values span{font-size:.92rem;color:var(--tinta-2);line-height:1.45;display:block}
.values li:last-child:nth-child(odd){grid-column:span 2}
@media (min-width:900px){ .values{grid-template-columns:repeat(5,1fr)} .values li:last-child:nth-child(odd){grid-column:auto} }
.quote-big{font-family:var(--f-display);font-weight:700;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.3rem);line-height:1.15;letter-spacing:-.02em;color:#fff;margin:0}
.testis{display:grid;gap:14px}
.testi{padding:22px;border-radius:var(--r-m);background:#fff;border:1.5px solid var(--linea)}
.testi blockquote{margin:0 0 14px;font-size:1.05rem;color:var(--tinta)}
.testi cite{font-style:normal;font-weight:700;color:var(--noche)}
@media (min-width:900px){ .testis{grid-template-columns:repeat(3,1fr)} }
.preview-flag{position:relative;outline:3px dashed var(--naranja);outline-offset:-3px}
.preview-flag::before{content:"Vista previa: sección oculta en el sitio publicado";position:absolute;top:10px;left:10px;z-index:5;background:var(--naranja);color:var(--noche);font-weight:800;font-size:.8125rem;padding:4px 10px;border-radius:999px}

/* Mini práctica */
.quiz{padding:22px;border-radius:var(--r-l);background:#fff;border:1.5px solid var(--linea)}
.quiz fieldset{border:0;padding:0;margin:0 0 16px}
.quiz legend{font-weight:700;color:var(--noche);margin-bottom:12px;font-size:1.08rem}
.quiz .radios{grid-template-columns:1fr}
.quiz .fb{display:none;margin-top:12px;padding:14px;border-radius:12px}
.quiz .fb.ok{display:block;background:#e7f8ee;color:#0e5a2c}
.quiz .fb.no{display:block;background:#fff4ec;color:#7a2e04}

/* ---------- 12. CIERRE, PIE Y WHATSAPP ---------- */
.closing{position:relative;overflow:hidden;background:var(--noche);color:#dbe4ff;padding-top:var(--sec)}
.closing__grid{display:grid;gap:10px;align-items:end}
.closing h2{color:#fff;max-width:20ch;text-wrap:balance}
.closing .lead{margin-bottom:24px}
.closing__suko{justify-self:center;width:min(260px,70vw);margin-top:6px}
@media (min-width:900px){ .closing__grid{grid-template-columns:1.2fr .8fr} .closing__grid > div{padding-bottom:var(--sec)} .closing__suko{width:320px;justify-self:end} }

.foot{background:#000e38;color:#aebcf0;padding-block:56px calc(110px + env(safe-area-inset-bottom));font-size:.96rem}
@media (min-width:1024px){ .foot{padding-bottom:36px} }
.foot__grid{display:grid;gap:34px}
.foot__brand img{width:170px;margin-bottom:14px}
.foot__brand p{max-width:34ch}
.foot h2{font-family:var(--f-texto);font-size:1rem;letter-spacing:0;color:#fff;margin-bottom:14px}
.foot ul{display:grid;gap:10px}
.foot li{display:flex;gap:10px;align-items:flex-start}
.foot li .ico{width:20px;height:20px;color:var(--naranja-claro);margin-top:2px}
.foot a{color:#dbe4ff;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot .pagos{background:#fff;border-radius:12px;padding:10px 12px;max-width:320px}
.foot__legal{display:flex;flex-direction:column;gap:8px;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:.88rem}
.foot__legal a{color:var(--naranja-claro);font-weight:700}
@media (min-width:760px){ .foot__grid{grid-template-columns:1.3fr 1fr 1fr} .foot__legal{flex-direction:row;justify-content:space-between} }
@media (min-width:1100px){ .foot__grid{grid-template-columns:1.4fr 1fr .8fr 1fr} }

/* Botón flotante de WhatsApp + menú de temas */
.fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:10px;transition:transform .25s ease,opacity .25s ease}
.fab.is-hidden{transform:translateY(140%);opacity:0;pointer-events:none}
.fab__btn{display:inline-flex;align-items:center;gap:10px;height:58px;padding:0 20px 0 16px;border-radius:999px;border:0;background:var(--wa);color:#fff;font-weight:800;box-shadow:0 14px 30px -12px rgba(15,110,50,.7)}
.fab__btn .ico{width:28px;height:28px}
.fab__btn .lbl{font-size:.98rem}
@media (max-width:380px){ .fab__btn{width:58px;padding:0;justify-content:center} .fab__btn .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} }
.fab__pop{width:min(320px,calc(100vw - 32px));padding:14px;border-radius:20px;background:#fff;box-shadow:0 24px 60px -20px rgba(0,21,79,.55);border:1px solid var(--linea);transform-origin:bottom right;animation:panel .2s ease}
.fab__pop p{margin:4px 6px 10px;font-weight:700;color:var(--noche);display:flex;align-items:center;gap:10px}
.fab__pop p img{width:40px}
.fab__pop a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:10px 12px;border-radius:12px;text-decoration:none;font-weight:600;color:var(--noche)}
.fab__pop a:hover,.fab__pop a:focus-visible{background:var(--papel)}
.fab__pop a .ico{width:18px;height:18px;color:var(--wa)}

/* 404 / gracias */
.center-page{min-height:70vh;display:grid;place-items:center;text-align:center;padding-block:60px}
.center-page img{width:180px;margin:0 auto 20px}
.center-page .btn-row{justify-content:center}

/* ---------- 13. MOVIMIENTO Y ACCESIBILIDAD ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .draw .r-main{stroke-dashoffset:0}
  .js .rise{opacity:1;transform:none}
}

/* Ajustes por página */
.phero__media--sm img{height:clamp(130px,36vw,170px)}
@media (min-width:900px){ .phero__media--sm img{height:320px} }
.form-intro-suko{display:none}
@media (min-width:1000px){ .form-intro-suko{display:block;width:220px;margin-top:24px} }
@media (max-width:999.98px){ .form-layout--form-first .form-card{order:-1} }

/* =====================================================================
   HÉROE DE MARCA (fotografía de fondo) — restaurado del diseño original
   Escritorio: la foto ocupa todo el ancho y el texto va a la izquierda.
   Celular: la foto va arriba (recortada) y el texto debajo.
   Cambia la foto en el <picture> de cada página.
   ===================================================================== */
.bhero{position:relative;overflow:hidden;background:var(--bh-bg)}
.bhero--light{--bh-bg:#eef3ff;--bh-fade:rgba(238,243,255,.97)}
.bhero--dark{--bh-bg:var(--noche);--bh-fade:rgba(0,21,79,.97);color:#dbe4ff}
.bhero--dark h1{color:#fff}
.bhero--dark .lead{color:#c6d3ff}
.bhero h1 .nar{color:var(--naranja)}
.bhero--dark h1 .nar{color:#ff8a3d}
.bhero__media img{display:block;width:100%;height:auto;max-height:64vw;object-fit:cover}
.bhero__body{position:relative;z-index:2;padding:26px 0 34px}
.bhero .lead{max-width:34rem;margin-bottom:24px}
.tag{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:8px;font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;background:#fff;color:var(--azul);border:1px solid var(--linea)}
.tag .ico{width:15px;height:15px;color:var(--cielo)}
.tag--pill{border-radius:999px;text-transform:none;letter-spacing:0;font-size:.82rem;font-weight:500;box-shadow:0 4px 14px rgba(0,46,155,.06)}
.tag--blue{background:var(--cielo);color:#fff;border-color:var(--cielo)}
.bhero--dark .tag{background:rgba(255,255,255,.08);color:#dbe4ff;border-color:rgba(255,255,255,.25)}
.eyebrow{display:block;color:var(--naranja-txt);font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px}
.bhero--dark .eyebrow{color:#ff8a3d}
.bhero__feats{display:grid;gap:14px;margin-top:6px}
.bhero__feats li{display:flex;align-items:center;gap:12px}
.bhero__feats .ico{width:34px;height:34px;padding:7px;border-radius:10px;background:rgba(255,255,255,.1);color:#ff8a3d}
.bhero__feats b{display:block;color:#fff;font-size:.95rem;line-height:1.2}
.bhero__feats span{font-size:.88rem;color:#c6d3ff}
.firma{display:flex;align-items:center;gap:14px;margin-top:22px}
.firma img{width:64px}
.firma p{margin:0;font-weight:600;font-style:italic;font-size:1.05rem;line-height:1.35;color:inherit}
.bhero--dark .firma p{color:#fff}
.firma p span{color:var(--naranja)}
.bhero--dark .firma p span{color:#ff8a3d}
.firma--line p{position:relative;padding-bottom:10px}
.firma--line p::after{content:"";position:absolute;left:0;bottom:0;width:70%;height:3px;border-radius:3px;background:var(--naranja)}
.bhero__card{display:none}
.bhero .search{max-width:520px}
.bhero .note{font-size:.9rem;margin:14px 0 0;color:var(--tinta-2)}
.bhero .note a{color:var(--azul);font-weight:700}
@media (min-width:900px){
  .bhero{display:flex;align-items:center;min-height:clamp(520px,44vw,640px)}
  .bhero__media{position:absolute;inset:0}
  .bhero__media img{height:100%;max-height:none;object-position:right center}
  .bhero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bh-fade) 0%,var(--bh-fade) 26%,transparent 58%)}
  .bhero--nofade .bhero__media::after{display:none}
  .bhero > .wrap{position:relative;width:100%}
  .bhero__body{max-width:560px;padding:64px 0 96px}
  .bhero--strip .bhero__body{padding-bottom:140px}
  .bhero__card{display:block;position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);width:250px;padding:20px;border-radius:18px;background:#fff;color:var(--tinta);box-shadow:0 20px 50px -20px rgba(0,21,79,.55);z-index:3}
  .bhero__card h3{font-size:1rem;margin:10px 0 6px;color:var(--azul)}
  .bhero__card p{font-size:.86rem;margin:0 0 8px;color:var(--tinta-2)}
  .bhero__card b{color:var(--naranja-txt);font-size:.86rem}
  .bhero__card .bullet{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--papel);color:var(--azul)}
  .bhero__cards{position:absolute;right:var(--gutter);bottom:40px;display:grid;gap:10px;width:270px;z-index:3}
  .bhero__cards a,.bhero__cards div{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#fff;box-shadow:0 14px 34px -18px rgba(0,21,79,.5);text-decoration:none;color:var(--tinta)}
  .bhero__cards small{display:block;font-size:.8125rem;color:var(--tinta-2)}
  .bhero__cards b{font-size:.86rem;color:var(--noche);overflow-wrap:anywhere}
  .bhero__cards .ico{flex:none;width:34px;height:34px;padding:7px;border-radius:10px;background:var(--papel);color:var(--azul)}
  .bhero__cards .wa .ico{background:#e7f8ee;color:var(--wa)}
}
.bhero__cards{display:none}
@media (min-width:1100px){ .bhero__cards{display:grid} }

/* Franja de beneficios bajo el héroe de inicio */
.strip-wrap{position:relative;z-index:4;background:#eef3ff;padding-bottom:28px}
.strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;padding:20px 16px;border-radius:18px;background:#fff;box-shadow:0 12px 40px rgba(0,46,155,.10)}
.strip li{display:flex;align-items:center;gap:12px;min-width:0}
.strip .ic{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--azul);color:#fff}
.strip .ic .ico{width:22px;height:22px}
.strip b{display:block;color:var(--azul);font-size:.86rem;line-height:1.3}
.strip i{display:block;width:26px;height:3px;background:var(--naranja);border-radius:3px;margin-top:7px}
@media (min-width:900px){
  .strip-wrap{background:transparent;margin-top:-72px;padding-bottom:0}
  .strip{grid-template-columns:repeat(4,1fr);padding:26px 12px}
  .strip li{justify-content:center;padding:0 12px;border-right:1px solid #e8edf9}
  .strip li:last-child{border-right:0}
  .strip .ic{width:54px;height:54px}
  .strip b{font-size:.92rem}
}

/* Áreas con Suko */
.suko-areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.suko-area{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 10px 14px;border-radius:20px;background:#fff;border:1.5px solid var(--linea)}
.suko-area img{height:110px;width:auto;margin-bottom:10px}
.suko-area b{color:var(--azul);font-size:.95rem;line-height:1.25}
.suko-area:last-child:nth-child(odd){grid-column:span 2}
@media (min-width:760px){ .suko-areas{grid-template-columns:repeat(5,1fr);gap:16px} .suko-area img{height:140px} .suko-area:last-child:nth-child(odd){grid-column:auto} }
.empty-suko{width:110px;margin:0 auto 10px}
@media (min-width:900px){ .bhero__body{max-width:min(560px,46%)} .bhero--light .bhero__body{max-width:min(560px,50%)} }
@media (max-width:479.98px){ .fab__btn{width:58px;padding:0;justify-content:center} .fab__btn .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} }

/* =====================================================================
   CURSOS (tarjetas tipo producto) — Programa y precios
   ===================================================================== */
.courses{display:grid;gap:22px}
.course{position:relative;display:flex;flex-direction:column;border-radius:26px;background:#fff;box-shadow:0 18px 50px -24px rgba(0,21,79,.45);overflow:hidden;border:1px solid var(--linea)}
.course__banner{position:relative;min-height:200px;padding:20px 20px 0;overflow:hidden;background:linear-gradient(135deg,#002e9b 0%,#0175d8 100%);color:#fff}
.course--v .course__banner{background:linear-gradient(135deg,#00154f 0%,#002e9b 70%)}
.course__banner::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-70px;top:-60px;background:rgba(255,255,255,.08)}
.course__banner::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:40px;bottom:-110px;background:var(--naranja);opacity:.9}
.course--v .course__banner::after{background:var(--cielo)}
.course__badge{position:relative;z-index:2;display:inline-block;padding:5px 12px;border-radius:999px;background:var(--naranja);color:var(--noche);font-size:.8125rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.course__kicker{position:relative;z-index:2;display:block;margin:14px 0 0;font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#bcd0ff}
.course__title{position:relative;z-index:2;margin:0;font-size:clamp(2rem,1.6rem + 2vw,2.6rem);line-height:1;color:#fff;font-weight:800}
.course__when{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;margin:12px 0 20px;padding:7px 12px;border-radius:10px;background:rgba(255,255,255,.12);font-size:.86rem;font-weight:600;max-width:62%}
.course__when .ico{width:18px;height:18px;flex:none;color:#ffb27a}
.course__suko{position:absolute;z-index:2;right:6px;bottom:0;height:176px;width:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))}
.course__price{padding:20px 20px 16px}
.course__price .lbl{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.save{display:inline-block;padding:4px 10px;border-radius:999px;background:#e7f8ee;color:#0e5a2c;font-size:.8125rem;letter-spacing:0;text-transform:none}
.course__price .amount{margin:6px 0 2px;font-size:clamp(2.3rem,2rem + 1.5vw,2.9rem);font-weight:800;line-height:1;color:var(--noche);letter-spacing:-.02em}
.course__price .amount small{font-size:.95rem;font-weight:600;color:var(--tinta-2);letter-spacing:0}
.course__price .note{margin:6px 0 0;font-size:.88rem;color:var(--tinta-2);display:flex;gap:6px;align-items:center}
.course__price .note .ico{width:16px;height:16px;color:var(--wa)}
.cuotas{margin-top:14px;border-radius:14px;background:var(--papel);overflow:hidden}
.cuotas summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:10px 14px;cursor:pointer;font-weight:700;color:var(--azul);font-size:.95rem}
.cuotas summary::-webkit-details-marker{display:none}
.cuotas summary .ico{width:20px;height:20px;transition:transform .2s}
.cuotas[open] summary .ico{transform:rotate(180deg)}
.cuotas table{width:100%;border-collapse:collapse;font-size:.92rem}
.cuotas td{padding:9px 14px;border-top:1px solid #dde5fa}
.cuotas td:last-child{text-align:right;font-weight:700;color:var(--noche);white-space:nowrap}
.cuotas tr.total td{background:#e2eaff;font-weight:700}
.course__inc{padding:0 20px 18px;flex:1}
.course__inc h4{margin:6px 0 12px;font-size:1rem;color:var(--noche)}
.course__inc ul{display:grid;gap:10px}
.course__inc li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;line-height:1.45}
.course__inc li .ico{flex:none;width:20px;height:20px;color:var(--wa);margin-top:1px}
.course__inc li b{color:var(--noche)}
.course__inc .sep{height:1px;background:var(--linea);margin:4px 0}
.course__cta{padding:0 20px 22px;display:grid;gap:10px}
.course__cta .btn{font-size:1.02rem}
.course__cta small{text-align:center;color:var(--tinta-2);font-size:.84rem}
@media (max-width:899.98px){ .js .courses .course.is-off{display:none} }
@media (min-width:900px){
  .courses{grid-template-columns:1fr 1fr;gap:28px;align-items:start}
  .course__banner{min-height:230px;padding:26px 26px 0}
  .course__suko{height:210px;right:14px}
  .course__price,.course__inc{padding-left:26px;padding-right:26px}
  .course__cta{padding:0 26px 26px}
}
.hybrid{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:16px 18px;border-radius:16px;background:#fff4ec;color:#6b2c05;font-size:.95rem}
.hybrid .ico{flex:none;color:var(--naranja-txt);margin-top:2px}
.hybrid b{color:#4d1f02}

/* =====================================================================
   BENEFICIOS DE LANZAMIENTO
   ===================================================================== */
.launch{position:relative;overflow:hidden;background:var(--noche);color:#dbe4ff;padding-block:var(--sec)}
.launch::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle at 70% 20%,#000 0,transparent 70%);-webkit-mask-image:radial-gradient(circle at 70% 20%,#000 0,transparent 70%)}
.launch .wrap{position:relative}
.launch h2{color:#fff}
.launch .sec-head p{color:#c6d3ff}
.launch__grid{display:grid;gap:16px}
.beca{position:relative;overflow:hidden;display:grid;gap:6px;padding:24px 22px 0;border-radius:24px;background:linear-gradient(140deg,#ff8a3d 0%,#e6640e 55%,#c24f00 100%);color:#2b1000}
.beca .kick{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#3b1500}
.beca .kick .ico{width:18px;height:18px}
.beca h3{margin:4px 0 0;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);color:#fff;line-height:1.1}
.beca .big{margin:4px 0 0;font-size:clamp(3.6rem,3rem + 4vw,5.6rem);font-weight:800;line-height:.9;color:#fff;letter-spacing:-.04em}
.beca .big small{display:block;font-size:1rem;font-weight:700;letter-spacing:0;color:#fff;margin-top:6px}
.beca p{margin:6px 0 0;color:#3b1500;font-weight:500;max-width:34ch}
.beca img{justify-self:end;height:170px;width:auto;margin-top:-10px}
.perk{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.perk .bullet{flex:none;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:#fff;color:var(--azul)}
.perk h3{margin:0 0 4px;color:#fff;font-size:1.15rem}
.perk p{margin:0;color:#c6d3ff;font-size:.95rem}
.perk .btn{margin-top:12px;min-height:44px;padding:8px 16px;font-size:.92rem}
.launch__foot{margin-top:18px;font-size:.85rem;color:#aebcf0}
.launch__foot a{color:#fff;font-weight:700}
@media (min-width:900px){
  .launch__grid{grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto}
  .beca{grid-row:span 2;grid-template-columns:1fr auto;padding:34px 30px 0;align-items:end}
  .beca > div{padding-bottom:34px}
  .beca img{height:250px;margin:0}
  .perk{padding:26px}
}

/* =====================================================================
   MÁS QUE UN PREICFES (componentes del programa con Suko)
   ===================================================================== */
.pillars{display:grid;gap:12px}
.pillar{display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:center;padding:16px;border-radius:20px;background:#fff;border:1.5px solid var(--linea)}
.pillar img{width:78px;height:78px;object-fit:contain}
.pillar h3{margin:0 0 3px;font-size:1.05rem}
.pillar p{margin:0;font-size:.9rem;color:var(--tinta-2);line-height:1.5}
.pillar--hero{grid-template-columns:1fr;background:linear-gradient(135deg,#002e9b,#0175d8);border:0;color:#dbe4ff;padding:22px}
.pillar--hero h3{color:#fff;font-size:1.35rem}
.pillar--hero p{color:#dbe4ff;font-size:.95rem}
.pillar--hero .tagx{display:inline-block;margin-bottom:8px;padding:4px 10px;border-radius:999px;background:var(--naranja);color:var(--noche);font-size:.8125rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.pillar--hero ul{display:grid;gap:8px;margin-top:12px}
.pillar--hero li{display:flex;gap:10px;font-size:.92rem}
.pillar--hero li .ico{width:18px;height:18px;flex:none;color:#ffb27a;margin-top:2px}
.pillar--hero img{display:none}
@media (min-width:760px){ .pillars{grid-template-columns:repeat(2,1fr)} .pillar--hero{grid-column:span 2;grid-template-columns:1fr 150px} .pillar--hero img{display:block;width:150px;height:auto} }
@media (min-width:1100px){ .pillars{grid-template-columns:repeat(4,1fr);gap:16px} .pillar{grid-template-columns:1fr;text-align:left;align-content:start;padding:20px} .pillar img{width:96px;height:96px} .pillar--hero{grid-row:span 1} }
@media (max-width:479.98px){ .strip{gap:14px 10px;padding:16px 12px} .strip .ic{width:38px;height:38px} .strip .ic .ico{width:19px;height:19px} .strip b{font-size:.8125rem} .strip li{gap:9px} }

/* Kicker: la rayita se alinea con la primera línea si el texto baja a dos */
.kicker{align-items:flex-start;line-height:1.35}
.kicker::before{flex:none;margin-top:.6em}
.sec-head .kicker + h2{margin-top:2px}

/* =====================================================================
   TABLET (700–899 px): se muestra la información completa, sin ocultar
   ===================================================================== */
@media (min-width:600px) and (max-width:899.98px){
  .bhero__media img{max-height:360px}
  .bhero__body{padding:30px 0 40px}
}
@media (min-width:700px){
  .seg{display:none}
  .js .courses .course.is-off{display:flex}
  .courses{grid-template-columns:1fr 1fr;gap:18px;align-items:start}
  .split{grid-template-columns:1fr 1fr;gap:36px}
  .closing__grid{grid-template-columns:1.2fr .8fr}
  .closing__grid > div{padding-bottom:var(--sec)}
  .closing__suko{justify-self:end;width:min(280px,34vw)}
  .launch__grid{grid-template-columns:1fr 1fr}
  .beca{grid-column:1/-1;grid-template-columns:1fr auto;align-items:end;padding:28px 26px 0}
  .beca > div{padding-bottom:28px}
  .beca img{height:210px;margin:0}
  .form-layout .row-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
}
@media (min-width:700px) and (max-width:899.98px){
  .course__banner{min-height:210px;padding:18px 16px 0}
  .course__title{font-size:1.85rem}
  .course__when{max-width:78%;font-size:.8125rem}
  .course__suko{height:130px;right:2px}
  .course__price,.course__inc{padding-left:16px;padding-right:16px}
  .course__cta{padding:0 16px 18px}
  .course__price .amount{font-size:2rem}
  .phero__grid{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .launch__grid{grid-template-columns:1.15fr 1fr}
  .beca{grid-column:auto;grid-row:span 2}
  .beca img{height:250px}
}
@media (min-width:700px) and (max-width:1099.98px){ .split .steps-mini{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:700px) and (max-width:1099.98px){
  .split .mascot-card{grid-template-columns:1fr;padding:26px 24px 0}
  .split .mascot-card > div{padding-bottom:0}
  .split .mascot-card img{width:150px;margin:0 auto -6px}
}
@media (min-width:760px) and (max-width:999.98px){
  .areas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .area{flex-direction:row;text-align:left;padding:14px}
}

/* ---- Ajustes anti-amontonamiento en celulares pequeños ---- */
@media (max-width:479.98px){
  .strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 8px;padding:18px 10px}
  .strip li{flex-direction:column;text-align:center;gap:8px}
  .strip .ic{width:42px;height:42px}
  .strip b{font-size:.82rem;line-height:1.3}
  .strip i{margin:6px auto 0}
  .steps-mini{gap:8px}
  .steps-mini li{padding:10px;gap:8px;font-size:.86rem;overflow-wrap:normal;hyphens:manual;-webkit-hyphens:manual}
  .steps-mini li span{width:26px;height:26px;font-size:.8125rem}
  .course__banner{padding:18px 16px 0;min-height:190px}
  .course__title{font-size:1.9rem}
  .course__suko{height:128px}
  .course__when{max-width:66%;font-size:.8125rem;padding:6px 10px;align-items:flex-start}
  .course__when .ico{margin-top:1px}
  .cuotas summary{font-size:.9rem}
}
.nowrap{white-space:nowrap}
/* Héroe de escritorio: la foto se ancla abajo a la derecha (ver guía del banner) */
@media (min-width:900px){
  .bhero{min-height:clamp(520px,44vw,720px)}
  .bhero__media img{object-position:right bottom}
}

/* =====================================================================
   HÉROE DE INICIO (banner con Suko): nunca recorta a Suko
   - Celular y tablet (hasta 1199 px): foto arriba completa, texto abajo.
   - Escritorio (1200 px o más): la foto toma el alto del héroe y se pega
     abajo a la derecha; si sobra espacio a la izquierda, se funde con el fondo.
   ===================================================================== */
@media (min-width:600px) and (max-width:1199.98px){ .bhero--fit .bhero__media img{max-height:47vw;object-position:center} }
@media (min-width:900px) and (max-width:1199.98px){
  .bhero--fit{display:block;min-height:0}
  .bhero--fit .bhero__media{position:static}
  .bhero--fit .bhero__media::after{display:none}
  .bhero--fit .bhero__media img{height:auto}
  .bhero--fit .bhero__body{max-width:none;padding:30px 0 110px}
}
@media (min-width:1200px){
  .bhero--fit{min-height:560px}
  .bhero--fit .bhero__media{overflow:hidden}
  .bhero--fit .bhero__media::after{display:none}
  .bhero--fit .bhero__media img{position:absolute;right:0;bottom:0;height:100%;width:auto;max-width:none;max-height:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
  .bhero--fit .bhero__body{max-width:min(520px,44%)}
}
@media (min-width:1200px){ .bhero--fit .bhero__body{max-width:520px} }
@media (min-width:1200px) and (max-width:1439.98px){
  .bhero--fit .bhero__media img{transform:translateX(7%)}
  .bhero--fit .bhero__body{padding-top:48px}
}

/* =====================================================================
   TRAE A TU PARCHE · calculadora de descuento (index.html #parche)
   Bloque independiente: se puede mover o duplicar sin tocar el resto.
   ===================================================================== */
.parche{padding-block:var(--sec);background:#fff}
.parche__card{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:26px;padding:26px 18px 22px;border-radius:28px;color:#fff;
  background:
    radial-gradient(90% 70% at 100% 0%,rgba(1,117,216,.9) 0%,rgba(1,117,216,0) 62%),
    radial-gradient(70% 60% at 0% 100%,rgba(230,100,14,.38) 0%,rgba(230,100,14,0) 62%),
    linear-gradient(165deg,#002e9b 0%,#00154f 100%);
  box-shadow:0 34px 70px -34px rgba(0,21,79,.75)}
.parche__card::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 80%);mask-image:linear-gradient(180deg,#000 0%,transparent 80%)}
.parche__head{display:grid;grid-template-columns:1fr 92px;grid-template-areas:"k k" "h s" "l l";column-gap:10px;align-items:start}
.parche__head .kicker{grid-area:k;color:var(--naranja-claro)}
.parche h2{grid-area:h;margin:0;color:#fff;font-size:clamp(1.8rem,1.3rem + 2.4vw,3rem);line-height:1.05;letter-spacing:-.03em}
.parche h2 em{font-style:normal;color:var(--naranja-claro)}
.parche__suko{grid-area:s;width:92px;height:auto;margin-top:-6px;animation:parcheBob 4.2s ease-in-out infinite}
.parche__lead{grid-area:l;margin:14px 0 0;color:#c6d3ff;font-size:var(--t-lead);max-width:44ch}

.parche__ui{display:grid;gap:20px;padding:16px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pf{border:0;margin:0;padding:0;min-width:0}
.p-label{display:block;float:left;width:100%;padding:0;margin:0 0 10px;font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#aebcf0}
.pf > :not(legend){clear:both}

/* Modalidad: interruptor de dos opciones */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:999px;background:rgba(0,10,40,.5)}
.seg label,.nchip{position:relative;display:block;cursor:pointer}
.seg input,.nchip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:999px;font-weight:700;color:#dbe4ff;transition:background .2s,color .2s,box-shadow .2s}
.seg input:checked + span{background:#fff;color:var(--azul);box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}

/* Tamaño del parche: fichas grandes y táctiles */
.nchips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.nchip span{display:grid;justify-items:center;align-content:center;gap:3px;min-height:78px;padding:10px 2px;border-radius:16px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);text-align:center;transition:transform .2s cubic-bezier(.3,1.5,.5,1),background .2s,border-color .2s,box-shadow .2s}
.nchip b{font-size:1.55rem;line-height:1;font-weight:800;color:#fff;letter-spacing:-.02em}
.nchip small{font-size:.8125rem;font-weight:600;color:#c6d3ff;white-space:nowrap}
.nchip input:checked + span{transform:translateY(-3px);background:linear-gradient(160deg,#ff9a52 0%,#e6640e 100%);border-color:#ffd9bf;box-shadow:0 16px 26px -14px rgba(230,100,14,.95)}
.nchip input:checked + span b,.nchip input:checked + span small{color:var(--noche)}
.seg input:focus-visible + span,.nchip input:focus-visible + span{outline:3px solid #fff;outline-offset:3px}
@media (hover:hover){.nchip:hover input:not(:checked) + span{background:rgba(255,255,255,.13)}}

/* El parche se va llenando */
.crew{display:flex;justify-content:center;gap:6px;margin-top:14px}
.crew i{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2px dashed rgba(255,255,255,.32);color:rgba(255,255,255,.5);transition:background .25s,border-color .25s,color .25s}
.crew i .ico{width:20px;height:20px}
.crew i.on{background:var(--naranja);border:2px solid #fff;color:#fff;animation:parchePop .38s cubic-bezier(.3,1.7,.5,1) both}
.crew[data-n="5"] i:last-child::after{content:"+";position:absolute;right:-5px;top:-8px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff;color:var(--azul);font-size:.95rem;font-weight:800;line-height:1}

/* Resultado */
.result{display:grid;gap:12px;padding:18px 16px;border-radius:20px;background:#fff;color:var(--tinta);box-shadow:0 24px 40px -26px rgba(0,0,0,.65)}
.result__row{display:grid;gap:14px}
.result__stat span{display:block;margin-bottom:2px;font-size:.8125rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-2)}
.result__stat b{display:block;font-size:clamp(2.1rem,1.7rem + 2vw,2.75rem);line-height:1.02;font-weight:800;letter-spacing:-.035em;color:var(--azul);font-variant-numeric:tabular-nums}
.result__stat--save b{color:var(--naranja-txt)}
.result__stat s{display:inline-block;margin-top:2px;font-size:.95rem;font-weight:600;color:var(--tinta-2)}
.result .bump{animation:parcheBump .4s cubic-bezier(.3,1.6,.5,1)}
.result__tot{margin:0;padding:10px 14px;border-radius:12px;background:#e7f8ee;color:#0e5a2c;font-size:.95rem;font-weight:700;line-height:1.35}
.result__nudge{margin:0;font-size:.95rem;font-weight:600;color:var(--azul)}
.parche__foot{margin:0;font-size:.8125rem;line-height:1.5;color:#aebcf0}
.parche__foot a{color:#fff;font-weight:700}

@keyframes parcheBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes parchePop{0%{transform:scale(.4)}100%{transform:scale(1)}}
@keyframes parcheBump{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}

@media (min-width:520px){
  .result__row{grid-template-columns:1fr 1fr;align-items:end}
  .crew i{width:44px;height:44px}
}
@media (min-width:760px){
  .parche__card{padding:40px 34px 34px}
  .parche__ui{padding:22px}
}
@media (min-width:980px){
  .parche__card{grid-template-columns:1fr 1.08fr;gap:44px;padding:52px 48px;align-items:center}
  .parche__head{grid-template-columns:1fr;grid-template-areas:"k" "h" "l" "s"}
  .parche__suko{width:min(270px,70%);margin:18px 0 -20px;justify-self:start}
  .parche__lead{margin-top:16px}
}
@media (max-width:359.98px){
  .nchip b{font-size:1.4rem}
  .nchip small{font-size:.8125rem;letter-spacing:-.02em}
}

/* ---------- Profes ---------- */
.profes{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));margin-top:28px}
.profe{background:#fff;border:1.5px solid var(--linea);border-radius:var(--r-m);overflow:hidden;display:flex;flex-direction:column}
.profe__foto{position:relative;aspect-ratio:4/5;background:linear-gradient(160deg,#eef3ff 0%,#dfe8ff 100%)}
.profe__foto img{width:100%;height:100%;object-fit:cover;object-position:top;mix-blend-mode:multiply}
.profe__tag{position:absolute;left:14px;bottom:14px;background:var(--naranja);color:#fff;font-weight:700;font-size:.85rem;padding:6px 12px;border-radius:999px}
.profe__body{padding:18px 20px 22px}
.profe__body b{display:block;font-family:var(--f-display);font-size:1.3rem;color:var(--noche);line-height:1.1}
.profe__body span{color:var(--naranja-txt);font-weight:700;font-size:.95rem}
.profe__body p{margin:8px 0 0;font-size:.95rem;color:var(--tinta-2)}

/* =====================================================================
   v5 · Selector de modalidad visible, calculadora de 3 tramos, descuentos
   ===================================================================== */
:root{--verde:#12924a}
.seg[data-seg]{display:grid;max-width:520px;margin:0 auto 22px;background:var(--papel-2);border:1.5px solid var(--linea)}
.seg[data-seg] button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;font-size:1.02rem;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.seg[data-seg] button::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid currentColor;opacity:.45;flex:none;transition:all .2s}
.seg[data-seg] button[aria-pressed="true"]{background:var(--azul);color:#fff;box-shadow:0 10px 22px -10px rgba(0,46,155,.8)}
.seg[data-seg] button[aria-pressed="true"]::before{opacity:1;border-color:#fff;background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
@media (hover:hover){.seg[data-seg] button[aria-pressed="false"]:hover{background:#fff;color:var(--azul)}}
.course__pick{display:none;position:absolute;z-index:5;top:14px;right:14px;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:999px;background:var(--verde);color:#fff;font-size:.8125rem;font-weight:800;box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.course__pick .ico{width:16px;height:16px}
.js .course.is-on .course__pick{display:inline-flex;animation:parchePop .35s cubic-bezier(.3,1.7,.5,1) both}
.course{transition:opacity .25s,transform .25s,box-shadow .25s,outline-color .25s;outline:3px solid transparent;outline-offset:3px}
.js .course.is-on{outline-color:var(--azul);box-shadow:0 24px 60px -24px rgba(0,46,155,.7)}
@media (min-width:700px){
  .js .courses .course.is-off{opacity:.55;transform:scale(.97);filter:saturate(.6);cursor:pointer}
  .js .courses .course.is-off:hover{opacity:.8}
}
.cuotas__vc{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 0;padding:10px 12px;border-radius:12px;background:#fffaf0;border:1px solid #ffe2a8;font-size:.9rem;color:var(--tinta-2)}
.cuotas__vc img{width:96px;height:auto}
.cuotas__vc a{font-weight:700;color:var(--azul)}

/* Calculadora: 3 tramos */
.nchips{grid-template-columns:repeat(3,1fr)}
.nchip em{font-style:normal;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#9fb3f0;line-height:1.1}
.nchip input:checked + span em{color:#5a2300}
.nchip span{min-height:96px}
.nchip:nth-child(2) b{font-size:1.75rem}
.nchip--max b{font-size:1.95rem}
.nchip--max span{border-color:rgba(255,154,82,.55)}
.crew i.maybe{border-color:var(--naranja-claro);color:var(--naranja-claro)}
.launch__more{display:inline-flex;align-items:center;gap:6px;margin-right:10px;color:#fff;font-weight:700}
.launch__more .ico{width:16px;height:16px}

/* Pie: medios de pago */
.pagos__safe{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;font-size:.92rem}
.pagos__safe .ico{flex:none;width:18px;height:18px;margin-top:2px;color:#4ade80}
.pagos__safe b{color:#fff}

/* ---------- Página Descuentos ---------- */
.dhero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 85% 10%,#0175d8 0%,#002e9b 45%,#00154f 100%);color:#dbe4ff;padding:calc(var(--header-h) + 36px) 0 48px}
.dhero__grid{display:grid;gap:20px;align-items:center}
.dhero h1{color:#fff;font-size:clamp(2.2rem,1.6rem + 3.2vw,3.9rem);line-height:1.04;letter-spacing:-.03em;margin:0 0 14px}
.dhero h1 .nar{color:var(--naranja-claro)}
.dhero .lead{color:#dbe4ff;max-width:52ch}
.dhero .chips{margin-top:18px}
.dhero .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.dhero .chip .ico{color:var(--naranja-claro)}
.dhero img{justify-self:center;width:min(260px,62vw);height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}
@media (min-width:900px){.dhero__grid{grid-template-columns:1.3fr .7fr}.dhero img{width:320px}}

.dgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.dcard{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r-m);background:#fff;border:1.5px solid var(--linea)}
.dcard .bullet{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--papel);color:var(--azul)}
.dcard h3{margin:6px 0 0;font-size:1.2rem;color:var(--noche)}
.dcard .val{margin:0;font-family:var(--f-display);font-weight:800;font-size:1.9rem;line-height:1;letter-spacing:-.03em;color:var(--naranja-txt)}
.dcard p{margin:0;color:var(--tinta-2);font-size:.95rem}
.dcard a{margin-top:auto;padding-top:6px;font-weight:700;color:var(--azul)}
.dcard--hot{background:linear-gradient(150deg,#ff8a3d 0%,#e6640e 70%);border-color:transparent}
.dcard--hot h3,.dcard--hot .val,.dcard--hot p,.dcard--hot a{color:#fff}
.dcard--hot .bullet{background:#fff;color:var(--naranja-txt)}

.ptable{width:100%;border-collapse:separate;border-spacing:0;border-radius:var(--r-m);overflow:hidden;border:1.5px solid var(--linea);background:#fff;font-size:.98rem}
.ptable th,.ptable td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--linea)}
.ptable thead th{background:var(--noche);color:#fff;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}
.ptable tr:last-child td{border-bottom:0}
.ptable td b{font-family:var(--f-display);color:var(--noche)}
.ptable .off{color:var(--naranja-txt);font-weight:800;white-space:nowrap}
.ptable s{color:var(--tinta-2);font-size:.85rem;margin-left:4px}
.ptable .tier{display:block;font-size:.8rem;color:var(--tinta-2)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

.steps3{display:grid;gap:14px;counter-reset:st;margin-top:22px}
.steps3 li{counter-increment:st;display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:#fff;border:1.5px solid var(--linea)}
.steps3 li::before{content:counter(st);flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--naranja);color:#fff;font-weight:800}
.steps3 b{display:block;color:var(--noche)}
.steps3 span{color:var(--tinta-2);font-size:.95rem}
@media (min-width:900px){.steps3{grid-template-columns:repeat(3,1fr)}}

.fin__head{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-bottom:24px}
.fin__head img{width:170px;height:auto;padding:12px 16px;border-radius:14px;background:#fff}
.fin__plans{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.fplan{padding:22px;border-radius:var(--r-m);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.fplan h3{margin:0 0 4px;color:#fff;font-size:1.25rem}
.fplan .tot{margin:0 0 14px;font-family:var(--f-display);font-weight:800;font-size:2.2rem;color:#fff;letter-spacing:-.03em;line-height:1}
.fplan .tot small{font-size:.9rem;font-weight:600;color:#aebcf0;letter-spacing:0}
.fplan ol{display:grid;gap:8px}
.fplan li{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.06);font-size:.95rem}
.fplan li b{color:#fff;white-space:nowrap}
.fplan li:first-child{background:rgba(230,100,14,.25)}

.vs{display:grid;gap:12px;margin-top:30px}
.vs__row{display:grid;gap:8px;padding:16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.vs__row h4{margin:0;color:#fff;font-size:1rem}
.vs__us,.vs__them{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;margin:0}
.vs__us{color:#fff}
.vs__them{color:#9fb0e0}
.vs__us .ico{flex:none;width:20px;height:20px;color:#4ade80;margin-top:2px}
.vs__them .ico{flex:none;width:20px;height:20px;color:#ff8a80;margin-top:2px}
.vs__cols{display:none}
@media (min-width:900px){
  .vs__cols{display:grid;grid-template-columns:200px 1fr 1fr;gap:16px;padding:0 16px;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#aebcf0}
  .vs__cols span:nth-child(2){color:#4ade80}
  .vs__row{grid-template-columns:200px 1fr 1fr;gap:16px;align-items:start}
}
.fin__note{margin-top:20px;font-size:.92rem;color:#c6d3ff}

.conds{display:grid;gap:12px}
.conds li{display:flex;gap:12px;align-items:flex-start;color:var(--tinta-2)}
.conds .ico{flex:none;color:var(--azul);margin-top:2px}
.payband{display:grid;gap:16px;align-items:center;margin-top:30px;padding:22px;border-radius:var(--r-m);background:#fff;border:1.5px solid var(--linea)}
.payband h3{margin:0 0 4px;color:var(--noche)}
.payband p{margin:0;color:var(--tinta-2)}
.payband .safe{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 12px;border-radius:999px;background:#e8f7ee;color:#0b6b35;font-weight:700;font-size:.9rem}
.payband .safe .ico{width:18px;height:18px}
.payband img{width:100%;max-width:420px;height:auto}
@media (min-width:900px){.payband{grid-template-columns:1fr 1fr;padding:28px 32px}}

@media (min-width:1024px) and (max-width:1199.98px){.nav a{padding:10px 9px;font-size:.94rem}}
.dgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr))}
@media (max-width:599.98px){
  .ptable thead{display:none}
  .ptable,.ptable tbody{display:block}
  .ptable tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:14px 16px;border-bottom:1px solid var(--linea)}
  .ptable tr:last-child{border-bottom:0}
  .ptable td{padding:0;border:0}
  .ptable td:nth-child(1){display:flex;align-items:baseline;gap:8px}
  .ptable td:nth-child(2){text-align:right}
  .ptable td:nth-child(3)::before{content:"Presencial";display:block;font-size:.75rem;color:var(--tinta-2)}
  .ptable td:nth-child(4)::before{content:"Virtual";display:block;font-size:.75rem;color:var(--tinta-2)}
}
/* Teaser de profes en Nosotros */
.profes-teaser{display:grid;gap:28px;align-items:center}
.profes-teaser__faces{display:flex;justify-content:center}
.profes-teaser__faces img{width:120px;height:150px;object-fit:cover;object-position:top;border-radius:20px;border:4px solid #fff;background:linear-gradient(160deg,#eef3ff,#dfe8ff);mix-blend-mode:multiply;box-shadow:0 14px 30px -16px rgba(0,21,79,.5)}
.profes-teaser__faces img+img{margin-left:-18px}
.profes-teaser__faces img:nth-child(2){transform:translateY(-12px)}
@media (min-width:900px){.profes-teaser{grid-template-columns:auto 1fr;gap:48px}.profes-teaser__faces img{width:150px;height:190px}}
@media (min-width:900px){.profes-como{grid-template-columns:repeat(3,1fr);gap:24px}}
/* Menú con 8 enlaces */
@media (min-width:1024px) and (max-width:1279.98px){.nav{gap:2px}.nav a{padding:10px 7px;font-size:.9rem}.nav .btn{padding-inline:14px}}
.nav a{white-space:nowrap}
@media (min-width:1024px) and (max-width:1279.98px){.top__bar .brand img{width:132px}.nav a{padding:9px 6px!important;font-size:.86rem!important}.nav .btn{padding-inline:12px!important}}
/* Metodología: explorador "Aquí se entrena…" */
.xtabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 12px;margin:0 calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-snap-type:x proximity}
.xtabs::-webkit-scrollbar{display:none}
.xtab{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border-radius:999px;border:1.5px solid var(--linea);background:#fff;color:var(--noche);font-weight:700;font-size:.95rem;cursor:pointer;scroll-snap-align:center;transition:background .2s,color .2s,border-color .2s}
.xtab .ico{width:18px;height:18px;color:var(--azul)}
.xtab[aria-selected="true"]{background:var(--azul);border-color:var(--azul);color:#fff}
.xtab[aria-selected="true"] .ico{color:var(--naranja-claro)}
.xpanel{display:grid;gap:12px;align-items:center;padding:22px;border-radius:24px;background:#fff;border:1.5px solid var(--linea)}
.js .xpanel.is-entering{animation:panel .35s ease}
.xpanel h3{margin:8px 0 6px;font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem);color:var(--noche);line-height:1.12}
.xpanel p{margin:0 0 12px;color:var(--tinta-2)}
.xpanel ul{display:grid;gap:8px}
.xpanel li{display:flex;gap:10px;align-items:flex-start;color:var(--tinta)}
.xpanel li .ico{flex:none;width:20px;height:20px;color:var(--verde,#12924a);margin-top:2px}
.xpanel img{justify-self:center;width:130px;height:auto;order:-1}
@media (min-width:700px){
  .xtabs{flex-wrap:wrap;overflow:visible;margin:0;padding:0 0 16px}
  .xpanel{grid-template-columns:1fr 200px;padding:32px 36px;gap:28px}
  .xpanel img{order:0;width:190px}
}
.xpanel .tagx{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--naranja);color:var(--noche);font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
/* Metodología más liviana en celular */
@media (max-width:699.98px){
  .step__body q{display:none}
  .mascot-card{display:none}
  .suko-areas{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .suko-area{padding:10px 4px}
  .suko-area img{height:62px;margin-bottom:6px}
  .suko-area b{font-size:.8rem}
  .suko-area:last-child:nth-child(odd){grid-column:auto}
  .xpanel{position:relative;padding:18px}
  .xpanel img{position:absolute;top:12px;right:12px;width:78px}
  .xpanel .tagx,.xpanel h3{margin-right:84px}
}
/* Tonos (pestañas y ruta) */
[data-tone="azul"]{--tone:#002e9b;--tone-soft:#eaf0ff}
[data-tone="naranja"]{--tone:#e6640e;--tone-soft:#fff1e7}
[data-tone="cielo"]{--tone:#0175d8;--tone-soft:#e6f3ff}
[data-tone="verde"]{--tone:#12924a;--tone-soft:#e7f7ee}
[data-tone="morado"]{--tone:#6a4bd6;--tone-soft:#f0ecff}
[data-tone="rosa"]{--tone:#d9417a;--tone-soft:#ffecf3}
.xtab .ico{color:var(--tone,var(--azul))}
.xtab[aria-selected="true"]{background:var(--tone,var(--azul));border-color:var(--tone,var(--azul));color:#fff}
.xtab[aria-selected="true"] .ico{color:#fff}
.xpanel{background:linear-gradient(135deg,var(--tone-soft,#fff) 0%,#fff 70%);border-color:color-mix(in srgb,var(--tone,#ccd) 25%,#fff)}
.xpanel .tagx{background:var(--tone,var(--naranja));color:#fff}
.xpanel h3{color:var(--tone,var(--noche))}
.xpanel li .ico{color:var(--tone,var(--verde))}
.xpanel__more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:800;color:var(--tone,var(--azul))}
.xpanel__more .ico{width:18px;height:18px}
.xmore{margin-top:20px}

/* Ruta de 6 etapas (Metodología) */
.ruta{background:#fff}
.ruta__list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 6px;counter-reset:none}
.ruta__list::-webkit-scrollbar{display:none}
.ruta__step{flex:0 0 78%;scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:22px;background:var(--tone-soft);border-top:5px solid var(--tone)}
.ruta__n{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--tone);color:#fff;font-family:var(--f-display);font-weight:800;font-size:1.2rem}
.ruta__step h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:1.15rem;color:var(--noche)}
.ruta__step h3 .ico{width:20px;height:20px;color:var(--tone)}
.ruta__step p{margin:0;font-size:.95rem;color:var(--tinta-2)}
.ruta__hint{margin:10px 0 0;font-size:.85rem;font-weight:700;color:var(--tinta-2)}
@media (min-width:700px){
  .ruta__list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;overflow:visible;margin:0;padding:0}
  .ruta__hint{display:none}
}
.ruta__list{scroll-padding-inline:var(--gutter)}
/* Ruta: animación al bajar (vertical compacta en celular) */
.ruta__track{display:none}
.ruta__step .ruta__n{transition:background .35s,color .35s,box-shadow .35s,transform .35s}
.js .ruta__step:not(.is-on) .ruta__n{background:#fff;color:var(--tone);box-shadow:inset 0 0 0 2px var(--tone)}
.js .ruta__step.is-on .ruta__n{transform:scale(1.06);box-shadow:0 0 0 6px color-mix(in srgb,var(--tone) 18%,transparent)}
@media (max-width:699.98px){
  .ruta__list{position:relative;display:grid;gap:18px;overflow:visible;margin:0;padding:0 0 0 2px;scroll-snap-type:none}
  .ruta__track{display:block;position:absolute;left:19px;top:18px;bottom:18px;width:4px;border-radius:4px;background:var(--linea)}
  .ruta__track i{position:absolute;left:0;top:0;width:100%;height:0;border-radius:4px;background:linear-gradient(180deg,#002e9b 0%,#e6640e 22%,#0175d8 42%,#12924a 62%,#6a4bd6 80%,#d9417a 100%);background-size:100% 520px;transition:height .15s linear}
  .ruta__step{position:relative;flex:none;flex-direction:row;align-items:flex-start;gap:14px;padding:0;background:none;border:0;border-radius:0}
  .ruta__n{flex:none;position:relative;z-index:1;width:38px;height:38px;border-radius:50%;font-size:1rem}
  .ruta__step > div{padding:10px 14px 12px;border-radius:16px;background:var(--tone-soft);transition:opacity .35s,transform .35s}
  .js .ruta__step:not(.is-on) > div{opacity:.45;transform:translateX(6px)}
  .ruta__step h3{font-size:1.02rem;margin-bottom:2px}
  .ruta__step p{font-size:.88rem;line-height:1.45}
}
@media (min-width:700px){
  .ruta__step{border-top-width:5px;transition:opacity .45s,transform .45s}
  .js .ruta__step:not(.is-on){opacity:.35;transform:translateY(14px)}
}
@media (prefers-reduced-motion:reduce){.ruta__step,.ruta__step>div,.ruta__n{transition:none!important;transform:none!important;opacity:1!important}}
/* Pagar por partes: dos opciones */
.paybox{display:grid;gap:10px;margin-top:10px}
.payopt{padding:14px;border-radius:14px;background:#fff;border:1.5px solid var(--linea)}
.payopt__t{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-weight:800;color:var(--noche)}
.payopt__t .ico{width:18px;height:18px;color:var(--azul)}
.payopt__t img{width:110px;height:auto}
.payopt__d{margin:0 0 8px;font-size:.9rem;color:var(--tinta-2)}
.payopt table{margin:0}
.payopt--vc{background:#fffaf0;border-color:#ffe2a8}
.payopt__btn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 14px;border-radius:999px;background:#1f9d55;color:#fff;font-weight:700;font-size:.9rem;text-decoration:none}
.payopt__btn .ico{width:18px;height:18px}
.fplan{display:flex;flex-direction:column;gap:10px}
.fplan__k{display:flex;align-items:center;gap:8px;margin:0;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--naranja-claro)}
.fplan__k img{width:150px;height:auto;padding:8px 12px;border-radius:12px;background:#fff}
.fplan h3{font-size:1.35rem}
.fplan__d{margin:0;color:#c6d3ff}
.fplan__two{display:grid;gap:14px;margin:6px 0 8px}
.fplan__two > div > b{display:block;margin-bottom:6px;color:#fff}
@media (min-width:520px){.fplan__two{grid-template-columns:1fr 1fr}}
.fplan__list{display:grid;gap:8px;margin:4px 0 8px}
.fplan__list li{display:flex;gap:10px;color:#fff;font-size:.95rem}
.fplan__list .ico{flex:none;width:20px;height:20px;color:#ffc94d}
.fplan--vc{border-color:rgba(255,201,77,.45);background:rgba(255,201,77,.08)}
.fplan__note{margin:0;font-size:.85rem;color:#aebcf0}
.fplan .btn{margin-top:auto}
.ctable{width:100%;min-width:620px;border-collapse:separate;border-spacing:0;font-size:.93rem;color:#dbe4ff}
.ctable th,.ctable td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,.12);vertical-align:top}
.ctable thead th{color:#fff;font-size:.9rem}
.ctable thead th span{display:block;width:max-content;margin-top:4px;padding:2px 8px;border-radius:999px;background:#1f9d55;font-size:.72rem}
.ctable tbody th{color:#aebcf0;font-weight:700;white-space:nowrap}
.ctable td:nth-child(2){color:#fff;font-weight:700}
.fplan .fplan__list li{justify-content:flex-start;padding:0;background:none!important;border-radius:0}
@media (max-width:699.98px){
  .ctable{min-width:0}
  .ctable thead{display:none}
  .ctable,.ctable tbody,.ctable tr{display:block}
  .ctable tr{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .ctable th,.ctable td{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:4px 0;border:0}
  .ctable tbody th{display:block;margin-bottom:6px;color:var(--naranja-claro);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
  .ctable td::before{color:#aebcf0;font-weight:700;font-size:.85rem}
  .ctable td:nth-of-type(1)::before{content:"De contado"}
  .ctable td:nth-of-type(2)::before{content:"3 cuotas"}
  .ctable td:nth-of-type(3)::before{content:"ValCredit"}
}
/* Precio anterior tachado */
.course__price .was{margin:2px 0 -2px;font-size:1.15rem;font-weight:700;color:#9aa6c4}
.course__price .was s{text-decoration-color:#e0352b;text-decoration-thickness:2px}
.cuotas tr.total s,.ctable s,.dcard s,.fplan__two s{font-weight:500;opacity:.75;margin-left:4px;text-decoration-color:#e0352b}
.course__price .was{font-size:1.05rem;font-weight:600;color:var(--tinta-2)}
.course__price .was s{font-size:1.35rem;font-weight:800;color:#6b7593;text-decoration-thickness:3px;margin-left:4px}
/* Botón de pago en línea */
.paynow{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin:14px 0 4px;padding:10px 16px;border-radius:999px;background:var(--azul);color:#fff;font-weight:800;text-decoration:none;box-shadow:0 10px 22px -12px rgba(0,46,155,.8)}
.paynow .ico{width:18px;height:18px}
.paynow:hover{background:#00237a}
.paynow__note{margin:0 0 8px;text-align:center;font-size:.8rem;color:var(--tinta-2)}
.paynow--sm{min-height:42px;margin:10px 0 0;font-size:.9rem;box-shadow:none}
.fplan .paynow--sm{background:#fff;color:var(--azul)}