/* ============================================================
   LURRAFLY v2 — Sistema de diseño "Cabina"
   Evolución del v1: mismo ADN (navy #0B2447 + azul #2563EB + Exo 2/Inter),
   con lenguaje de instrumentación aeronáutica: líneas finas, rejilla HUD,
   lecturas de datos en mono y bloques condensados tipo bento.
   NO sustituye al style.css del sitio en producción.
   ============================================================ */

:root{
  /* --- Superficies --- */
  --c-void:#06162E;          /* Cabina: fondo más profundo que el navy */
  --c-navy:#0B2447;          /* Navy de marca (heredado) */
  --c-navy-soft:#13315C;
  --c-white:#FFFFFF;
  --c-paper:#F7F9FC;
  --c-line:#E2E8F0;
  --c-line-dark:rgba(255,255,255,.10);

  /* --- Marca --- */
  --c-blue:#2563EB;          /* Azul eléctrico (heredado) */
  --c-cyan:#38BDF8;          /* Lectura HUD */
  --c-green:#10B981;         /* Validado (heredado) */
  --c-amber:#F59E0B;         /* Acción */

  /* --- Texto --- */
  --c-title:#0B2447;
  --c-text:#334155;
  --c-muted:#64748B;
  --c-on-dark:#E8EEF7;
  --c-on-dark-muted:#93A5BE;
  --c-on-dark-soft:#CBD8E8;   /* enlaces de menu: pasa AA aun sobre cabecera translucida */

  /* --- Tipografía --- */
  --f-head:"Exo 2",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Courier New",monospace;

  /* --- Escala espaciosa (density 3/10) --- */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px;
  --s-5:64px; --s-6:96px; --s-7:128px;

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-full:999px;

  --sh-sm:0 2px 8px rgba(11,36,71,.06);
  --sh-md:0 12px 32px -12px rgba(11,36,71,.16);
  --sh-lg:0 32px 64px -24px rgba(11,36,71,.28);
  --sh-glow:0 0 0 1px rgba(56,189,248,.28), 0 18px 48px -20px rgba(37,99,235,.55);

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;font-family:var(--f-body);color:var(--c-text);
  background:var(--c-white);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-blue);text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--c-title);line-height:1.12;margin:0;font-weight:800;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* Foco visible siempre (accesibilidad, prioridad 1) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--c-cyan);outline-offset:3px;border-radius:var(--r-sm);
}

.wrap{max-width:1200px;margin:0 auto;padding:0 var(--s-3)}
.section{padding:var(--s-6) 0}
.section--tight{padding:var(--s-5) 0}
.dark{background:var(--c-void);color:var(--c-on-dark)}
/* Superficies oscuras. .cta-band y .price-card tienen fondo navy pero no la
   clase .dark, asi que sus titulares heredaban --c-title (navy sobre navy = 1.00:1). */
.dark h1,.dark h2,.dark h3,
.cta-band h1,.cta-band h2,.cta-band h3,
.price-card h1,.price-card h2,.price-card h3{color:#fff}
.paper{background:var(--c-paper)}

/* ---------- Etiqueta técnica (eyebrow mono) ---------- */
.tag{
  display:inline-flex;align-items:center;gap:var(--s-1);
  font-family:var(--f-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-blue);
  margin-bottom:var(--s-2);
}
.dark .tag,.cta-band .tag,.price-card .tag{color:var(--c-cyan)}
.tag::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}

/* ---------- Titulares ---------- */
.h-xl{font-size:clamp(2.4rem,6vw,4.6rem)}
.h-lg{font-size:clamp(2rem,4.2vw,3.2rem)}
.h-md{font-size:clamp(1.35rem,2.4vw,1.9rem)}
.lead{font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--c-muted);max-width:56ch}
.dark .lead,.cta-band .lead,.price-card .lead{color:var(--c-on-dark-muted)}
.grad{background:linear-gradient(100deg,#7DD3FC,#60A5FA);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Rejilla HUD de fondo ---------- */
.hud{position:relative;overflow:hidden;isolation:isolate}
.hud::before{
  content:"";position:absolute;inset:-2px;z-index:-2;
  background-image:linear-gradient(var(--c-line-dark) 1px,transparent 1px),
                   linear-gradient(90deg,var(--c-line-dark) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 40%,transparent 100%);
}
/* Resplandor que sigue al cursor (lo mueve app.js; degrada a estático) */
.hud::after{
  content:"";position:absolute;z-index:-1;width:640px;height:640px;
  left:var(--mx,50%);top:var(--my,0%);transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(37,99,235,.30),transparent 62%);
  pointer-events:none;transition:opacity .4s ease;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 var(--s-3);border:0;border-radius:var(--r-full);
  font-family:var(--f-head);font-size:1rem;font-weight:700;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
  text-align:center;
}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--c-amber);color:#2A1A00;box-shadow:0 10px 30px -10px rgba(245,158,11,.6)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(245,158,11,.75)}
.btn--blue{background:var(--c-blue);color:#fff;box-shadow:0 10px 30px -10px rgba(37,99,235,.6)}
.btn--blue:hover{transform:translateY(-2px)}
.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.9}
.btn--ghost:hover{opacity:1;transform:translateY(-2px)}
.btn--sm{min-height:44px;font-size:.92rem}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---------- Cabecera ---------- */
.hdr{position:sticky;top:0;z-index:80;backdrop-filter:blur(14px);
  background:rgba(6,22,46,.94);border-bottom:1px solid var(--c-line-dark)}
.hdr--light{background:rgba(255,255,255,.88);border-bottom:1px solid var(--c-line)}
.hdr .inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:var(--s-3)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-weight:600;
  font-size:1.42rem;color:#fff;letter-spacing:-.5px}
.hdr--light .brand{color:var(--c-navy)}
.brand svg{width:46px;transition:transform .4s var(--ease)}
.brand:hover svg{transform:translateX(3px) rotate(-3deg)}
.nav{display:flex;align-items:center;gap:var(--s-3)}
/* :not(.btn) es imprescindible: sin el, esta regla (0,1,1) gana a .btn--primary
   (0,1,0) y pinta el texto del boton de gris claro sobre ambar -> 1.49:1 */
.nav a:not(.btn){font-size:.93rem;font-weight:500;color:var(--c-on-dark-soft);transition:color .2s}
.hdr--light .nav a:not(.btn){color:var(--c-text)}
.nav a:not(.btn):hover{color:#fff}
/* Acceso al campus: es para quien YA ha comprado, asi que se distingue de los
   anclas de seccion con un borde discreto, pero sin competir con el CTA de
   matricula, que es lo que tiene que llamar la atencion del visitante nuevo. */
.nav a.nav-campus:not(.btn){display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-sm)}
.nav a.nav-campus:not(.btn):hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.hdr--light .nav a.nav-campus:not(.btn){border-color:rgba(15,23,42,.18)}
.hdr--light .nav a.nav-campus:not(.btn):hover{border-color:var(--c-blue);background:rgba(37,99,235,.06)}
@media(max-width:960px){.nav a.nav-campus:not(.btn){justify-content:center}}

.hdr--light .nav a:not(.btn):hover{color:var(--c-blue)}
.burger{display:none;width:46px;height:46px;background:none;border:0;cursor:pointer;
  flex-direction:column;gap:5px;align-items:center;justify-content:center;border-radius:var(--r-sm)}
.burger span{display:block;width:24px;height:2px;background:#fff;transition:.3s var(--ease)}
.hdr--light .burger span{background:var(--c-navy)}
@media(max-width:960px){
  .burger{display:flex}
  .nav{position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--c-void);max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
  .hdr--light .nav{background:#fff;border-bottom:1px solid var(--c-line)}
  .nav a:not(.btn){padding:16px var(--s-3);border-top:1px solid var(--c-line-dark)}
  .nav.open{max-height:460px}
  .nav .btn{margin:var(--s-2) var(--s-3) var(--s-3)}
}

/* ---------- HERO ---------- */
.hero{padding:var(--s-7) 0 var(--s-6);position:relative}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-5);align-items:center}
@media(max-width:980px){.hero .grid{grid-template-columns:1fr;gap:var(--s-4)}
  .hero{padding:var(--s-5) 0 var(--s-5)}}
.hero h1{margin-bottom:var(--s-3)}
.hero .cta{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}

/* Chips de confianza */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-4)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-full);
  font-size:.82rem;font-weight:500;background:rgba(255,255,255,.06);
  border:1px solid var(--c-line-dark);color:var(--c-on-dark)}
.chip svg{width:14px;height:14px;color:var(--c-green)}

/* Panel de instrumentos del hero */
.panel{
  border:1px solid var(--c-line-dark);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(19,49,92,.85),rgba(6,22,46,.92));
  padding:var(--s-3);box-shadow:var(--sh-lg);position:relative;overflow:hidden;
}
.panel-top{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:var(--s-2);border-bottom:1px solid var(--c-line-dark);margin-bottom:var(--s-3)}
.panel-title{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-cyan)}
.dots{display:flex;gap:6px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--c-line-dark);display:block}
.dots i:first-child{background:var(--c-green);box-shadow:0 0 10px var(--c-green)}
.readouts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.readout{padding:var(--s-2);border:1px solid var(--c-line-dark);border-radius:var(--r-md);
  background:rgba(255,255,255,.03)}
.readout b{display:block;font-family:var(--f-mono);font-size:1.65rem;font-weight:700;
  color:#fff;line-height:1.1;letter-spacing:-.02em}
.readout span{font-size:.76rem;color:var(--c-on-dark-muted);letter-spacing:.03em}
.readout--wide{grid-column:1/-1}
.bar{height:6px;border-radius:var(--r-full);background:rgba(255,255,255,.09);margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--c-cyan),var(--c-blue));width:0;transition:width 1.4s var(--ease)}

/* ---------- BENTO ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2);margin-top:var(--s-4)}
.cell{
  position:relative;padding:var(--s-3);border-radius:var(--r-lg);
  border:1px solid var(--c-line);background:var(--c-white);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  overflow:hidden;
}
.cell:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:#C7D6EC}
@media (prefers-reduced-motion:reduce){.cell:hover{transform:none}}
.cell h3{font-size:1.12rem;margin-bottom:8px}
.cell p{font-size:.93rem;color:var(--c-muted);line-height:1.55}
.cell .ico{width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;
  margin-bottom:var(--s-2);background:rgba(37,99,235,.09);color:var(--c-blue)}
.cell .ico svg{width:21px;height:21px}
.cell--2{grid-column:span 2}
.cell--4{grid-column:span 4}
.cell--dark{background:linear-gradient(150deg,var(--c-navy),var(--c-void));
  border-color:transparent;color:var(--c-on-dark)}
.cell--dark h3{color:#fff}
.cell--dark p{color:var(--c-on-dark-muted)}
.cell--dark .ico{background:rgba(56,189,248,.14);color:var(--c-cyan)}
.cell--accent{background:linear-gradient(150deg,var(--c-blue),#1E40AF);border-color:transparent;color:#fff}
.cell--accent h3{color:#fff}
.cell--accent p{color:#FFFFFF}
.cell--accent .ico{background:rgba(255,255,255,.16);color:#fff}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.cell--4{grid-column:span 2}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.cell--2,.cell--4{grid-column:span 1}}

/* Número grande dentro de una celda */
.big{font-family:var(--f-mono);font-size:clamp(2.2rem,5vw,3.4rem);font-weight:700;
  line-height:1;letter-spacing:-.03em;color:var(--c-title);display:block;margin-bottom:6px}
.cell--dark .big,.cell--accent .big{color:#fff}

/* ---------- Cabecera de sección ---------- */
.shead{max-width:60ch;margin-bottom:var(--s-4)}
.shead--center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- Pasos ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);margin-top:var(--s-4)}
.step{position:relative;padding-top:var(--s-3)}
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--c-line)}
.step::after{content:"";position:absolute;top:-5px;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--c-blue);box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.step em{font-family:var(--f-mono);font-style:normal;font-size:.74rem;letter-spacing:.14em;
  color:var(--c-blue);display:block;margin-bottom:8px}
.step h3{font-size:1.05rem;margin-bottom:6px}
.step p{font-size:.9rem;color:var(--c-muted)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- Precio ---------- */
.price-card{max-width:520px;margin:0 auto;border-radius:var(--r-lg);padding:var(--s-4);
  background:linear-gradient(160deg,var(--c-navy),var(--c-void));color:var(--c-on-dark);
  box-shadow:var(--sh-glow);text-align:center;position:relative;overflow:hidden}
.price{font-family:var(--f-mono);font-size:4rem;font-weight:700;color:#fff;line-height:1;letter-spacing:-.04em}
.price sup{font-size:1.5rem;vertical-align:super;margin-left:4px}
.price-includes{text-align:left;margin:var(--s-3) 0;display:grid;gap:10px}
.price-includes li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem}
.price-includes svg{width:18px;height:18px;color:var(--c-green);flex:none;margin-top:3px}

/* ---------- Blog ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
@media(max-width:940px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.posts{grid-template-columns:1fr}}
.post{display:flex;flex-direction:column;border:1px solid var(--c-line);border-radius:var(--r-lg);
  overflow:hidden;background:#fff;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.post:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
@media (prefers-reduced-motion:reduce){.post:hover{transform:none}}
/* Miniatura: contenedor comun. aspect-ratio reserva el hueco antes de que
   cargue la imagen, de modo que no hay salto de maquetado (CLS). */
.thumb{aspect-ratio:16/9;position:relative;display:grid;place-items:center;
  overflow:hidden;background:var(--c-navy)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.post:hover .thumb img,.feature-post:hover .thumb img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){
  .post:hover .thumb img,.feature-post:hover .thumb img{transform:none}
}
/* Velo de marca: unifica fotos dispares con la paleta y da contraste al pie */
.thumb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,22,46,0) 40%,rgba(6,22,46,.42) 100%)}

/* --- Portada de respaldo: solo si el articulo NO trae imagen --- */
.thumb--fb{background:linear-gradient(140deg,var(--c-navy),var(--c-blue))}
.thumb--fb::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:30px 30px}
.thumb--fb svg{width:52px;height:52px;color:rgba(255,255,255,.72);position:relative;z-index:2}
/* Variantes de respaldo por categoria, para que no salgan todas iguales */
.thumb--fb.fb-2{background:linear-gradient(140deg,#13315C,#38BDF8)}
.thumb--fb.fb-3{background:linear-gradient(140deg,#06162E,#2563EB)}
.thumb--fb.fb-4{background:linear-gradient(140deg,#0B2447,#10B981)}
.post .body{padding:var(--s-3);display:flex;flex-direction:column;gap:10px;flex:1}
.post h3{font-size:1.06rem;line-height:1.32}
.post p{font-size:.9rem;color:var(--c-muted)}
.post .meta{margin-top:auto;display:flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;color:var(--c-muted);text-transform:uppercase}
.cat{display:inline-block;padding:5px 12px;border-radius:var(--r-full);font-size:.75rem;font-weight:600;
  background:rgba(37,99,235,.09);color:var(--c-blue);width:fit-content}
.cats{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-3)}
.cats a{padding:9px 18px;border-radius:var(--r-full);border:1px solid var(--c-line-dark);
  font-size:.88rem;color:var(--c-on-dark);transition:.25s var(--ease)}
.cats a:hover{background:rgba(56,189,248,.14);border-color:var(--c-cyan);color:#fff}

/* Post destacado */
.feature-post{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--c-line);background:#fff;margin-bottom:var(--s-3)}
.feature-post .thumb{aspect-ratio:auto;min-height:320px}
.feature-post .body{padding:var(--s-4);justify-content:center}
.feature-post h2{font-size:clamp(1.4rem,2.6vw,2.05rem);margin-bottom:var(--s-2)}
@media(max-width:820px){.feature-post{grid-template-columns:1fr}.feature-post .thumb{min-height:200px}}

/* ---------- CTA final ---------- */
.cta-band{border-radius:var(--r-lg);padding:var(--s-5) var(--s-4);text-align:center;
  background:linear-gradient(150deg,var(--c-navy),var(--c-void));color:var(--c-on-dark);
  box-shadow:var(--sh-lg);position:relative;overflow:hidden}

/* ---------- Pie ---------- */
.ftr{background:var(--c-void);color:var(--c-on-dark-muted);padding:var(--s-5) 0 var(--s-3);
  border-top:1px solid var(--c-line-dark)}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-4);margin-bottom:var(--s-4)}
@media(max-width:760px){.ftr-grid{grid-template-columns:1fr;gap:var(--s-3)}}
.ftr h4{color:#fff;font-size:.82rem;font-family:var(--f-mono);letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:var(--s-2)}
.ftr a{color:var(--c-on-dark-muted);font-size:.92rem;display:block;padding:5px 0;transition:color .2s}
.ftr a:hover{color:var(--c-cyan)}
.ftr-btm{border-top:1px solid var(--c-line-dark);padding-top:var(--s-3);
  display:flex;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap;font-size:.85rem}

/* ---------- Animación: mejora progresiva ---------- */
/* Sin JS o con reduced-motion, .reveal queda visible: nunca se oculta contenido al crawler */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.in{opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .hud::after{display:none}
}

/* Aviso de borrador */
.draft{position:fixed;bottom:18px;right:18px;z-index:200;display:flex;align-items:center;gap:10px;
  padding:11px 17px;border-radius:var(--r-full);background:rgba(6,22,46,.94);color:#fff;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--c-cyan);box-shadow:var(--sh-lg);backdrop-filter:blur(8px)}
.draft b{color:var(--c-cyan)}
.draft a{color:var(--c-cyan);border-bottom:1px solid currentColor}
@media(max-width:620px){.draft{left:14px;right:14px;justify-content:center;font-size:.68rem}}

/* ============================================================
   FORMULARIO DE MATRICULA (v2)
   Las clases las genera checkout.js (copia verbatim de produccion),
   asi que los NOMBRES no se pueden cambiar: student-card,
   student-fields-grid, form-group, full-width, etc.
   Ficha clara sobre seccion oscura: los campos se leen mejor.
   ============================================================ */
.form-card{max-width:720px;margin:0 auto;background:#fff;border-radius:var(--r-lg);
  padding:var(--s-4);box-shadow:var(--sh-lg)}
@media(max-width:560px){.form-card{padding:var(--s-3)}}

.form-section-header{display:flex;align-items:center;gap:12px;margin:var(--s-4) 0 var(--s-3)}
.form-section-header:first-of-type{margin-top:0}
.form-section-header h3{font-size:1.12rem;margin:0}
.form-step-badge{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--c-navy);color:#fff;font-family:var(--f-mono);font-size:.85rem;font-weight:700}

.form-group{margin-bottom:var(--s-2)}
.form-group label{display:block;font-size:.86rem;font-weight:600;color:var(--c-title);margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 14px;font-family:var(--f-body);
  font-size:.95rem;color:var(--c-text);background:#fff;
  border:1.5px solid var(--c-line);border-radius:var(--r-md);transition:border-color .2s,box-shadow .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--c-blue);
  box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.form-group input:invalid:not(:placeholder-shown){border-color:#DC2626}
.form-hint{font-size:.8rem;color:var(--c-muted);margin-top:6px}

/* Selector de plazas */
.student-stepper{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stepper-btn{width:44px;height:44px;border-radius:var(--r-md);border:1.5px solid var(--c-line);
  background:#fff;color:var(--c-navy);cursor:pointer;display:grid;place-items:center;
  transition:.2s var(--ease)}
.stepper-btn:hover:not(:disabled){border-color:var(--c-blue);color:var(--c-blue)}
.stepper-btn:disabled{opacity:.4;cursor:not-allowed}
.stepper-btn svg{width:16px;height:16px}
.stepper-display{display:flex;align-items:baseline;gap:7px;min-width:110px;justify-content:center;
  padding:8px 16px;border-radius:var(--r-md);background:var(--c-paper)}
#student-count-display{font-family:var(--f-mono);font-size:1.5rem;font-weight:700;color:var(--c-title)}
.stepper-unit{font-size:.88rem;color:var(--c-muted)}
.stepper-price-hint{font-size:.8rem;color:var(--c-muted)}

/* Ficha de cada alumno */
.student-card{border:1.5px solid var(--c-line);border-radius:var(--r-md);
  padding:var(--s-3);margin-bottom:var(--s-2);background:var(--c-paper)}
.student-card-num{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-blue);font-weight:600}
.student-card-header{margin-bottom:var(--s-2)}
.student-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.student-fields-grid .form-group{margin-bottom:0}
.student-fields-grid .full-width{grid-column:1/-1}
@media(max-width:560px){.student-fields-grid{grid-template-columns:1fr}}

/* Resumen */
.checkout-summary{background:var(--c-paper);border-radius:var(--r-md);
  padding:var(--s-3);margin:var(--s-3) 0}
.checkout-summary-row{display:flex;justify-content:space-between;font-size:.92rem;
  color:var(--c-muted);padding-bottom:12px;border-bottom:1px solid var(--c-line)}
.checkout-summary-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px}
.checkout-summary-total>span:first-child{font-weight:600;color:var(--c-title)}
.summary-amount{font-family:var(--f-mono);font-size:1.75rem;font-weight:700;color:var(--c-title)}

/* Consentimiento */
.form-consent{display:flex;gap:11px;align-items:flex-start}
.form-consent input[type=checkbox]{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--c-blue);cursor:pointer}
.form-consent label{font-size:.87rem;font-weight:400;color:var(--c-text);line-height:1.5;margin:0;cursor:pointer}

.w-100{width:100%}

/* El JS original inyecta iconos FontAwesome al enviar; v2 no carga FA.
   Damos un spinner propio para que el boton no quede con un hueco. */
.fa-spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;vertical-align:-2px}
.fa-spin{animation:ll-spin .7s linear infinite}
@keyframes ll-spin{to{transform:rotate(360deg)}}
.fa-lock{display:none}
@media (prefers-reduced-motion:reduce){.fa-spin{animation:none}}

/* ============================================================
   FILTROS DE CATEGORIA DEL BLOG (v2)
   Los genera blog.js a partir de las categorias reales que
   encuentra en /blog, asi que crecen solos.
   ============================================================ */
.cat-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;min-height:44px;
  border-radius:var(--r-full);border:1px solid var(--c-line-dark);background:transparent;
  color:var(--c-on-dark);font-family:var(--f-body);font-size:.88rem;font-weight:500;
  cursor:pointer;transition:.25s var(--ease)}
.cat-pill span{font-family:var(--f-mono);font-size:.72rem;padding:2px 7px;border-radius:var(--r-full);
  background:rgba(255,255,255,.10);color:var(--c-on-dark-soft)}
.cat-pill:hover{background:rgba(56,189,248,.12);border-color:var(--c-cyan);color:#fff}
.cat-pill.is-on{background:var(--c-cyan);border-color:var(--c-cyan);color:#06162E;font-weight:600}
.cat-pill.is-on span{background:rgba(6,22,46,.20);color:#06162E}
@media (prefers-reduced-motion:reduce){.cat-pill{transition:none}}

/* Aviso de "sin resultados" */
#sin-resultados{display:none;text-align:center;padding:var(--s-5) 0;color:var(--c-muted)}

/* El destacado enlaza al articulo real */
.feature-post h2 a{text-decoration:none}
.feature-post h2 a:hover{color:var(--c-blue)}

/* ============================================================
   FORMULARIO DE CONTACTO — CSS COPIADO DE LA v1
   legacy.js depende de estas clases exactas. El chatbot se
   retiro el 21/08/2026 y sus reglas se quitaron con el.
   ============================================================ */


.contact-card-premium:hover {
    border-color: var(--clr-blue);
    box-shadow: var(--shadow-lg);
}


.contact-card-inner {
    padding: 48px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.contact-card-inner h3 {
    font-size: 1.6rem;
    margin-bottom: 8px;
    color: var(--clr-navy);
}


@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}


@keyframes bounce-price {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}









































.contact-form {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}










/* Contacto: el textarea y el select necesitan altura y familia propias */
.form-group textarea{min-height:132px;resize:vertical;font-family:var(--f-body);line-height:1.6}
.form-group 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='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px}