/* ═══════════════════════════════════════════════════════════════════════════
   CAPA 1 · NÚCLEO — invariante
   Motor de Plataformas · EL ASTILLERO
   Layout, retícula, tipografía fluida, movimiento, impresión.
   CERO color de marca aquí: todo viene de var(--*) que define Capa 2.
   No se toca al dar de alta un sitio nuevo.
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

:root{
  --t-hero:clamp(2.4rem,7.6vw,4.6rem);
  --t-h2:clamp(1.6rem,4.4vw,2.6rem);
  --t-h3:clamp(1.1rem,2.6vw,1.35rem);
  --t-lead:clamp(1.02rem,2.5vw,1.22rem);
  --t-body:clamp(.95rem,2.1vw,1.04rem);
  --t-small:clamp(.84rem,1.9vw,.92rem);
  --t-eye:clamp(.64rem,1.6vw,.72rem);
  --pad-sec:clamp(56px,9vw,110px);
  --pad-x:clamp(22px,5.2vw,40px);
  --gap:clamp(16px,3vw,24px);
  --mx:1080px;
  --mx-narrow:760px;
}

body{
  background:var(--paper);
  color:var(--fg);
  font-family:var(--font-bdy);
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--brand);color:#fff}

.wrap{max-width:var(--mx);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x);width:100%}
/* narrow constriñe el contenido, NO el contenedor: todas las secciones
   comparten el mismo borde izquierdo, sin importar el ancho de su columna */
.wrap.narrow{max-width:var(--mx)}
.wrap.narrow>*{max-width:var(--mx-narrow)}
section{padding-top:var(--pad-sec);padding-bottom:var(--pad-sec)}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--gap)}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:var(--gap)}

h1,h2,h3{font-family:var(--font-dsp);line-height:1.05;letter-spacing:-.03em;text-wrap:balance;font-weight:400}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.02em}
p{color:var(--fg-2);max-width:66ch}
strong,b{color:var(--fg);font-weight:400}
.mn{font-family:var(--font-mn);font-variant-numeric:tabular-nums}

/* eyebrow */
.eye{
  font-family:var(--font-mn);font-size:var(--t-eye);
  letter-spacing:.22em;text-transform:uppercase;color:var(--brand);
  display:flex;align-items:center;gap:11px;font-weight:500;
}
.eye::before{content:"";width:26px;height:2px;background:var(--brand);flex:0 0 auto}
.on-dark .eye{color:var(--tint)}
.on-dark .eye::before{background:var(--tint)}

.lead{font-size:var(--t-lead);color:var(--fg-2);line-height:1.55;max-width:58ch}
.on-dark, .on-dark h1,.on-dark h2,.on-dark h3{color:var(--fg-inv)}
.on-dark p,.on-dark .lead{color:var(--fg-inv-2)}
.on-dark strong,.on-dark b{color:var(--fg-inv)}

/* ─── superficies ─── */
.dark{
  background:
    radial-gradient(112% 76% at 84% -8%, var(--ink-glow) 0%, transparent 60%),
    radial-gradient(86% 60% at -6% 10%, rgba(16,71,171,.26) 0%, transparent 56%),
    var(--ink);
  color:var(--fg-inv);position:relative;overflow:hidden;
}
.deep{background:linear-gradient(168deg,var(--ink-2) 0%,var(--ink) 72%);color:var(--fg-inv);position:relative;overflow:hidden}
.tint-bg{background:var(--surface)}
.rule{border-top:1px solid var(--line)}
.on-dark .rule,.dark .rule,.deep .rule{border-top-color:var(--ink-line)}

/* ─── barra superior ─── */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(6,11,24,.86);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--ink-line);
}
.topbar .row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:14px;padding-bottom:14px}
.topbar img{height:34px;width:auto}
.topbar nav{display:flex;gap:clamp(14px,2.6vw,28px);align-items:center}
.topbar nav a{
  font-family:var(--font-mn);font-size:var(--t-eye);
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-inv-2);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s,border-color .2s;
}
.topbar nav a:hover{color:var(--fg-inv);border-bottom-color:var(--tint)}
@media (max-width:640px){.topbar nav a.opt{display:none}}

/* ─── hero ─── */
.hero{padding-top:clamp(60px,11vw,120px);padding-bottom:clamp(60px,11vw,120px)}
.hero h1{font-size:var(--t-hero);letter-spacing:-.04em}
.hero h1 .soft{color:var(--tint)}
.iso-wm{
  position:absolute;z-index:0;pointer-events:none;opacity:.06;
  filter:brightness(0) invert(1);
  width:min(58vw,560px);right:-9%;top:-14%;
  animation:spin60 60s linear infinite;
}
@keyframes spin60{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.hero > *:not(.iso-wm){position:relative;z-index:2}  /* el watermark queda fuera: es absolute y va detrás (260827) */

/* ─── ficha de datos ─── */
.facts{display:flex;flex-direction:column;border-top:1px solid var(--ink-line)}
.fact{display:grid;grid-template-columns:minmax(96px,150px) 1fr;gap:14px 22px;
  padding:18px 0;border-bottom:1px solid var(--ink-line);align-items:baseline}
.fact .k{font-family:var(--font-mn);font-size:var(--t-eye);letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-inv-3)}
.fact .v{color:var(--fg-inv);font-size:var(--t-body);line-height:1.4}
@media (max-width:520px){.fact{grid-template-columns:1fr;gap:4px}}

/* ─── hilo / timeline ─── */
.thread{display:flex;flex-direction:column;gap:0}
.node{display:grid;grid-template-columns:auto 1fr;gap:0 22px;position:relative}
.node .dot{width:14px;height:14px;border-radius:50%;background:var(--brand);
  margin-top:7px;position:relative;z-index:2;flex:0 0 auto}
.node .line{grid-column:1;width:2px;background:var(--line-2);margin:0 auto;min-height:22px}
.node.on .dot{background:var(--brand);box-shadow:0 0 0 6px var(--brand-dim)}
.node .body{padding-bottom:30px}
.node .when{display:block;font-family:var(--font-mn);font-size:var(--t-eye);letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:7px}
.node .what{font-family:var(--font-dsp);font-size:var(--t-h3);letter-spacing:-.02em;color:var(--fg);margin-bottom:6px}
.node .where{font-size:var(--t-small);color:var(--fg-2)}

/* ─── tarjeta ─── */
.card{
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(24px,4vw,34px);
  box-shadow:0 1px 2px rgba(2,6,23,.04),0 12px 34px -20px rgba(2,6,23,.18);
}
.card.on-ink{background:rgba(255,255,255,.04);border-color:var(--ink-line)}

/* ─── cita ─── */
.quote{
  border-left:3px solid var(--brand);padding-left:clamp(20px,3.4vw,30px);
  font-family:var(--font-dsp);font-size:clamp(1.2rem,3.1vw,1.7rem);
  line-height:1.3;letter-spacing:-.025em;color:var(--fg);
}
.on-dark .quote{color:var(--fg-inv);border-left-color:var(--tint)}
.quote .who{display:block;font-family:var(--font-mn);font-size:var(--t-eye);
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin-top:18px;line-height:1.8}
.on-dark .quote .who{color:var(--fg-inv-3)}

/* ─── prosa larga · la cronica firmada ─── */
/* Medida de lectura corta a proposito: esta seccion se lee entera, no se escanea. */
.prosa{max-width:62ch}
.prosa p{font-size:var(--t-body);line-height:1.75;color:var(--fg-2);margin:0 0 1.15em}
.prosa p:first-child::first-letter{
  float:left;font-family:var(--font-dsp);font-size:3.1em;line-height:.82;
  padding:.06em .12em 0 0;color:var(--brand);
}
.prosa p:last-child{margin-bottom:0}
.on-dark .prosa p{color:var(--fg-inv-2)}

.firma{display:flex;align-items:center;gap:16px;margin-top:30px;
  padding-top:22px;border-top:1px solid var(--line-2)}
.firma img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.firma .who{font-family:var(--font-mn);font-size:var(--t-eye);
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);line-height:1.9}
.on-dark .firma{border-top-color:var(--ink-line)}
.on-dark .firma .who{color:var(--fg-inv-3)}

/* ─── botón ─── */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--brand);color:#fff;
  font-family:var(--font-bdy);font-size:var(--t-body);
  padding:15px 28px;border-radius:var(--r-pill);
  border:1px solid transparent;
  transition:background .2s,transform .18s;
}
.btn:hover{background:var(--brand-lift);transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:var(--ink-line);color:var(--fg-inv)}
.btn.ghost:hover{background:rgba(255,255,255,.07);border-color:var(--tint)}

/* ─── video vertical (recap) ─── */
.vwrap{max-width:420px;margin-inline:auto;width:100%}
.vframe{
  position:relative;width:100%;aspect-ratio:9/16;
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--ink-line);background:var(--ink-2);
}
.vframe video,.vframe iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}

/* ─── galería ─── */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:12px}
.gal a{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--r);background:var(--surface);border:1px solid var(--line-2)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.gal a:hover img{transform:scale(1.045)}

/* ─── estado vacío (contenido aún no publicado) ─── */
.empty{
  border:1px dashed var(--line-2);border-radius:var(--r-lg);
  padding:clamp(34px,6vw,58px);text-align:center;
}
.on-dark .empty,.dark .empty,.deep .empty{border-color:var(--ink-line)}
.empty .t{font-family:var(--font-mn);font-size:var(--t-eye);letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-3);line-height:2}
.on-dark .empty .t,.dark .empty .t,.deep .empty .t{color:var(--fg-inv-3)}

/* ─── pie ─── */
footer{background:var(--ink);color:var(--fg-inv-3);padding-top:clamp(46px,7vw,72px);padding-bottom:clamp(38px,6vw,56px)}
footer img{height:38px;width:auto;margin-bottom:22px}
footer .tag{font-family:var(--font-dsp);font-size:clamp(1.3rem,3.2vw,1.7rem);
  color:var(--fg-inv);letter-spacing:-.02em;margin-bottom:22px}
footer a{color:var(--fg-inv-2);border-bottom:1px solid rgba(255,255,255,.2)}
footer a:hover{color:var(--fg-inv)}
footer .fine{font-family:var(--font-mn);font-size:var(--t-eye);line-height:2.1;
  letter-spacing:.08em;color:var(--fg-inv-3);margin-top:26px;padding-top:22px;border-top:1px solid var(--ink-line)}

/* ─── reveal ─── */
.rv{transition:opacity .55s ease,transform .55s ease}
.rv.pre{opacity:0;transform:translateY(16px)}

@media print{
  .topbar,.iso-wm{display:none}
  .rv{opacity:1!important;transform:none!important}
  section{break-inside:avoid;padding:22px 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ── cta-bar · barra de conversión fija en móvil — componente reutilizable
      del núcleo (alta 260820). Solo consume var(--*), cero color propio. ── */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--ink);border-top:1px solid var(--ink-line)}
.cta-bar .t{color:var(--fg-inv-2);font-size:var(--t-small);line-height:1.3}
.cta-bar .btn{flex-shrink:0}
@media(max-width:720px){.cta-bar{display:flex}body{padding-bottom:76px}}

/* ── hero con retrato · humaniza y compacta (componente reutilizable, 260820) ── */
.hero.compacto{padding-top:clamp(36px,6vw,72px);padding-bottom:0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,360px);gap:clamp(24px,4vw,56px);align-items:end}
.hero-grid>.stack{padding-bottom:clamp(36px,6vw,72px)}
.hero-photo{position:relative;z-index:2;align-self:end}
.hero-photo img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-photo{max-width:280px;margin:0 auto}
}
.hero.compacto h1{font-size:clamp(2.1rem,4.6vw,3.6rem);text-wrap:balance}

/* ── animación · entradas, stagger y pulso (260820). El bloque global de
      prefers-reduced-motion (arriba) mata TODO esto — narrativa corre igual. ── */
html{scroll-behavior:smooth}
@keyframes nuRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes nuPhoto{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes nuBar{from{transform:translateY(110%)}to{transform:none}}
@keyframes nuPulse{0%,100%{box-shadow:0 0 0 0 var(--ink-glow)}55%{box-shadow:0 0 0 14px transparent}}
.hero .stack>*{animation:nuRise .75s cubic-bezier(.22,.7,.3,1) backwards}
.hero .stack>*:nth-child(2){animation-delay:.1s}
.hero .stack>*:nth-child(3){animation-delay:.2s}
.hero .stack>*:nth-child(4){animation-delay:.3s}
.hero .stack>*:nth-child(5){animation-delay:.42s}
.hero-photo{animation:nuPhoto .9s cubic-bezier(.22,.7,.3,1) .35s backwards}
.btn.pulse{animation:nuPulse 2.6s ease-out .9s infinite}
@media(max-width:720px){.cta-bar{animation:nuBar .5s cubic-bezier(.22,.7,.3,1) .7s backwards}}
.rv>*{transition:opacity .6s ease,transform .6s cubic-bezier(.22,.7,.3,1)}
.rv.pre>*{opacity:0;transform:translateY(16px)}
.rv:not(.pre)>*:nth-child(2){transition-delay:.07s}
.rv:not(.pre)>*:nth-child(3){transition-delay:.14s}
.rv:not(.pre)>*:nth-child(4){transition-delay:.21s}
.rv:not(.pre)>*:nth-child(5){transition-delay:.28s}

/* ── co-branding · dos instituciones a la par (componente 260820) ── */
.cobrand{display:flex;align-items:center;gap:16px}
.cobrand .div{width:1px;height:26px;background:var(--ink-line);flex-shrink:0}
footer .cobrand{margin-bottom:22px}
footer .cobrand img{margin-bottom:0}

/* ── cartel · ponentes del evento — componente reutilizable (260821).
      Funciona con retrato o con monograma cuando aún no hay foto. ── */
.cartel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:18px;margin-top:24px}
.pon{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s,transform .25s}
.pon:hover{border-color:var(--brand);transform:translateY(-2px)}
.pon .marco{position:relative;aspect-ratio:1/1;background:var(--ink);overflow:hidden;display:flex;align-items:center;justify-content:center}
.pon .marco img{width:100%;height:100%;object-fit:cover;object-position:top center}
.pon .mono{font-family:var(--font-dsp);font-size:clamp(2.4rem,7vw,3.4rem);letter-spacing:-.03em;color:var(--fg-inv-3);line-height:1}
.pon .cuerpo{padding:18px 20px 22px;display:flex;flex-direction:column;gap:7px;flex:1}
.pon .nom{font-family:var(--font-dsp);font-size:1.16rem;letter-spacing:-.02em;color:var(--fg);line-height:1.15}
.pon .rol{font-size:var(--t-small);color:var(--fg-2);line-height:1.45}
.pon .tema{font-size:var(--t-small);color:var(--fg);line-height:1.45;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.pon .cuando{font-family:var(--font-mn);font-size:var(--t-eye);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.badge{position:absolute;top:12px;left:12px;z-index:2;padding:5px 12px;border-radius:var(--r-pill);background:var(--brand);color:#fff;font-family:var(--font-mn);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.badge.cierre{background:var(--ink);border:1px solid var(--tint)}
.pon.destacado{grid-column:1/-1;flex-direction:row;align-items:stretch}
.pon.destacado .marco{width:min(38%,260px);aspect-ratio:auto}
.pon.destacado .cuerpo{padding:26px 28px;justify-content:center;gap:9px}
.pon.destacado .nom{font-size:clamp(1.4rem,3.4vw,1.9rem)}
@media(max-width:640px){.pon.destacado{flex-direction:column}.pon.destacado .marco{width:100%;aspect-ratio:16/10}}

/* ═══ CAPA EXPERIENCIA (260821) — todo muere con prefers-reduced-motion ═══ */

/* duotono de marca: unifica retratos de fuentes distintas · color al hover */
.pon .marco img{filter:grayscale(1) contrast(1.06) brightness(.94);
  transition:filter .65s cubic-bezier(.22,.7,.3,1),transform .8s cubic-bezier(.22,.7,.3,1)}
.pon .marco::after{content:"";position:absolute;inset:0;background:var(--brand);
  mix-blend-mode:color;opacity:.8;transition:opacity .65s;pointer-events:none}
.pon .marco::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(6,11,24,.55) 100%);transition:opacity .65s}
.pon:hover .marco img{filter:none;transform:scale(1.05)}
.pon:hover .marco::after{opacity:0}
.pon:hover .marco::before{opacity:.35}

/* co-brand con jerarquía: la marca protagonista manda en tamaño */
.cobrand{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px)}
.cobrand .div{width:1px;height:30px;background:var(--ink-line);flex-shrink:0}
.topbar .cobrand img{height:32px}
.topbar .cobrand img.lead{height:44px}
footer .cobrand{justify-content:flex-start;margin-bottom:22px}
footer .cobrand img{height:34px;margin-bottom:0}
footer .cobrand img.lead{height:48px;margin-bottom:0}
@media(max-width:640px){
  .topbar .cobrand img{height:24px}.topbar .cobrand img.lead{height:34px}
  .cobrand .div{height:22px}
}

/* barra de progreso de lectura */
.progreso{position:fixed;top:0;left:0;height:2px;width:0;z-index:80;
  background:linear-gradient(90deg,var(--brand),var(--brand-lift));transition:width .12s linear}

/* cuenta regresiva */
.cuenta{display:flex;gap:clamp(14px,3vw,30px);margin-top:20px;flex-wrap:wrap}
.cuenta .u{min-width:64px}
.cuenta .n{font-family:var(--font-dsp);font-size:clamp(1.7rem,4.4vw,2.5rem);letter-spacing:-.04em;
  color:var(--fg-inv);line-height:1;font-variant-numeric:tabular-nums}
.cuenta .l{font-family:var(--font-mn);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-inv-3);margin-top:6px}
.cuenta.oculta{display:none}

/* parallax del retrato del hero */
.hero-photo{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .pon .marco img{filter:none}.pon .marco::after{opacity:0}
  .progreso{display:none}.hero-photo{transform:none!important}
}

/* ═══ COMPONENTES DE EVENTO PROPIO ════════════════════════════════════════════
   Nacen en Biohacking Empresarial (EXA, 260826) pero son genéricos a propósito:
   los tres eventos del Clúster de este ciclo usan los mismos bloques.
   Todo sale de los tokens de la Capa 2 — aquí no vive ni un color literal. */

/* ─── bloques "qué te llevas" ─── */
.llevas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--gap)}
.llevas .b{
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(22px,3.4vw,30px);
}
.llevas .b.destaca{border-color:var(--brand);box-shadow:0 12px 34px -22px var(--brand)}
.llevas .b .k{
  font-family:var(--font-mn);font-size:var(--t-eye);letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:12px;
}
.llevas .b.destaca .k{color:var(--brand)}
.llevas .b p{margin:0}

/* ─── opciones de estudios ─── */
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:var(--gap)}
.opcion{
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(22px,3.4vw,30px);
}
.opcion.destaca{border-color:var(--brand)}
.opcion .nom{font-family:var(--font-dsp);font-size:var(--t-h3);letter-spacing:-.02em;color:var(--fg)}
.opcion .badge-op{
  display:inline-block;margin-bottom:12px;font-family:var(--font-mn);font-size:var(--t-eye);
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand);
  border:1px solid var(--brand);border-radius:var(--r-pill);padding:5px 12px;
}
.opcion ul{list-style:none;margin:16px 0 0;padding:0}
.opcion li{
  padding:9px 0 9px 22px;border-top:1px solid var(--line);position:relative;
  color:var(--fg-2);font-size:var(--t-small);line-height:1.5;
}
.opcion li:first-child{border-top:0}
.opcion li::before{content:"";position:absolute;left:0;top:17px;width:8px;height:2px;background:var(--brand)}
.opcion li b{color:var(--fg);font-weight:400}

/* ─── pasos numerados ─── */
.pasos{list-style:none;margin:0;padding:0;counter-reset:paso}
.pasos li{
  counter-increment:paso;display:grid;grid-template-columns:auto 1fr;gap:0 22px;
  padding:20px 0;border-top:1px solid var(--line);align-items:baseline;
}
.pasos li:first-child{border-top:0}
.pasos li::before{
  content:counter(paso,decimal-leading-zero);font-family:var(--font-mn);
  font-size:var(--t-eye);letter-spacing:.12em;color:var(--brand);
}
.pasos .t{font-family:var(--font-dsp);font-size:var(--t-h3);letter-spacing:-.02em;color:var(--fg);line-height:1.15}
.pasos .d{color:var(--fg-2);font-size:var(--t-small);margin-top:6px;line-height:1.55;max-width:56ch}

/* ─── preguntas frecuentes ─── */
.faq{border-top:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--font-dsp);font-size:var(--t-h3);letter-spacing:-.02em;
  color:var(--fg);line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:2px;
  background:var(--brand);transition:transform .22s ease;
}
.faq summary::before{
  content:"";position:absolute;right:13.5px;top:50%;width:2px;height:13px;
  margin-top:-5.5px;background:var(--brand);transition:transform .22s ease,opacity .22s ease;
}
.faq[open] summary::before{opacity:0;transform:rotate(90deg)}
.faq summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}
.faq .r{padding:0 0 22px;color:var(--fg-2);font-size:var(--t-body);line-height:1.65;max-width:64ch}
.faq .r a{color:var(--brand)}

/* ─── franja "convocan" ─── */
.convocan{display:flex;align-items:center;justify-content:center;gap:clamp(28px,6vw,64px);flex-wrap:wrap}
.convocan img{height:clamp(30px,4.6vw,44px);width:auto}
.convocan .sep{width:1px;height:38px;background:var(--line-2)}
@media (max-width:520px){.convocan .sep{display:none}}

/* ═══ REGISTRO · contrato de public/assets/registro-cluster.js ════════════════ */
.cr-campo{display:flex;flex-direction:column;gap:8px}
.cr-campo label{
  font-family:var(--font-mn);font-size:var(--t-eye);letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-3);
}
.cr-campo input{
  width:100%;background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--r);padding:15px 17px;color:var(--fg);
  font-family:var(--font-bdy);font-size:16px; /* 16px evita el zoom de iOS al enfocar */
  transition:border-color .18s ease;
}
.cr-campo input:focus{outline:none;border-color:var(--brand)}
.cr-campo input::placeholder{color:var(--fg-3)}
.cr-campo.cr-mal input{border-color:#DC2626}
.cr-campo .pista{font-size:var(--t-small);color:var(--fg-3)}
.cr-trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cr-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:18px}

#cr-generando{padding:clamp(28px,5vw,44px) 0}
#cr-generando .barra{height:3px;background:var(--line-2);border-radius:2px;overflow:hidden;margin-top:16px}
#cr-generando .fill{height:100%;width:6%;background:var(--brand);transition:width .5s ease}
#cr-generando-texto{font-family:var(--font-mn);font-size:var(--t-small);letter-spacing:.08em;color:var(--fg-2)}

.cr-error{display:none;color:#DC2626;font-size:var(--t-small);margin-top:12px}

.cr-listo{text-align:center;padding:clamp(24px,4vw,36px) 0}
.cr-listo-ico{
  width:54px;height:54px;margin:0 auto 18px;border-radius:50%;
  display:grid;place-items:center;font-size:26px;color:#fff;background:var(--ok,var(--brand));
}
.cr-listo h3{font-size:var(--t-h2)}
.cr-listo-nombre{
  font-family:var(--font-mn);font-size:var(--t-small);letter-spacing:.16em;
  color:var(--fg-2);margin-top:8px;
}
.cr-listo-copy{margin:14px auto 0;max-width:46ch}
.cr-folio-caja{
  display:inline-flex;flex-direction:column;gap:6px;margin-top:20px;
  border:1px solid var(--brand);border-radius:var(--r-lg);padding:18px 34px;
}
.cr-folio-caja span{
  font-family:var(--font-mn);font-size:var(--t-eye);letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-3);
}
.cr-folio-caja b{
  font-family:var(--font-dsp);font-size:clamp(1.7rem,5vw,2.4rem);
  letter-spacing:-.02em;color:var(--brand);font-weight:400;font-variant-numeric:tabular-nums;
}
.cr-listo-captura{font-size:var(--t-small);color:var(--fg-3);margin-top:18px}

/* ═══ PASE + INTAKE · contrato de public/assets/pase-estudios.js ══════════════ */
.pase{
  border:1px solid var(--brand);border-radius:var(--r-lg);overflow:hidden;
  max-width:520px;margin:30px auto 0;background:var(--paper);
}
.pase-cinta{
  background:var(--brand);color:#fff;text-align:center;padding:11px;
  font-family:var(--font-mn);font-size:var(--t-eye);letter-spacing:.24em;text-transform:uppercase;
}
.pase-cuerpo{padding:clamp(24px,4vw,32px);text-align:center}
.pase-evento{font-family:var(--font-mn);font-size:var(--t-eye);letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-3);margin:0}
.pase-nombre{
  font-family:var(--font-dsp);font-size:clamp(1.2rem,3.6vw,1.6rem);
  letter-spacing:-.01em;color:var(--fg);margin:10px 0 0;line-height:1.15;
}
.pase-folio{margin-top:20px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pase-folio span{
  display:block;font-family:var(--font-mn);font-size:var(--t-eye);
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);
}
.pase-folio b{
  display:block;margin-top:6px;font-family:var(--font-dsp);
  font-size:clamp(1.9rem,6vw,2.6rem);letter-spacing:-.02em;color:var(--brand);
  font-weight:400;font-variant-numeric:tabular-nums;
}
.pase-datos{margin:18px 0 0;display:grid;gap:10px;text-align:left}
.pase-datos div{display:grid;grid-template-columns:minmax(70px,88px) 1fr;gap:14px;align-items:baseline}
.pase-datos dt{font-family:var(--font-mn);font-size:var(--t-eye);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3)}
.pase-datos dd{margin:0;color:var(--fg-2);font-size:var(--t-small);line-height:1.45}
.pase-nota{font-size:var(--t-small);color:var(--fg-3);margin-top:20px;line-height:1.55}

.est{max-width:640px;margin:44px auto 0;padding-top:34px;border-top:1px solid var(--line)}
.est-kicker{
  font-family:var(--font-mn);font-size:var(--t-eye);letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand);margin:0;
}
.est h3{margin:12px 0 0}
.est-lead{margin-top:12px}
.est-consent{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  margin-top:24px;padding:20px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-lg);cursor:pointer;
}
.est-consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--brand);flex:0 0 auto}
.est-consent span{font-size:var(--t-small);color:var(--fg-2);line-height:1.6}
.est-consent a{color:var(--brand)}
.est-caja{margin-top:20px}
.est-caja input[type=file]{
  width:100%;padding:16px;border:1px dashed var(--line-2);border-radius:var(--r);
  color:var(--fg-2);font-size:var(--t-small);background:transparent;
}
.est-caja input[type=file]:disabled{opacity:.42;cursor:not-allowed}
.est-ayuda{font-size:var(--t-small);color:var(--fg-3);margin-top:10px}
.est-error{color:#DC2626;font-size:var(--t-small);margin-top:14px}
.est-btn{
  margin-top:20px;background:var(--brand);color:#fff;border:1px solid transparent;
  font-family:var(--font-bdy);font-size:var(--t-body);padding:15px 28px;
  border-radius:var(--r-pill);cursor:pointer;
}
.est-btn:disabled{opacity:.4;cursor:not-allowed}
.est-listo{margin-top:20px;color:var(--ok-text,var(--fg));font-size:var(--t-body)}

@media (prefers-reduced-motion:reduce){
  #cr-generando .fill,.faq summary::after,.faq summary::before{transition:none}
}

/* Un solo ponente: el grid de auto-fit lo estiraba a todo el ancho y, como el
   marco es aspect-ratio 1/1, el retrato ocupaba una pantalla entera. Se acota.
   Doble regla a propósito: :has resuelve el grid; max-width protege por si el
   navegador no lo soporta. */
.cartel:has(> .pon:only-child){grid-template-columns:minmax(0,320px)}
.pon:only-child{max-width:320px}

/* Estado "todavia no abre". Lo pinta registro-cluster.js cuando el evento no
   esta en `abierto` — por ejemplo mientras la sede no se confirma. Sin estilo
   salia como un parrafo suelto dentro de una tarjeta vacia, que se lee como
   pagina rota en vez de como una espera deliberada. */
.cr-proximamente{
  text-align:center;padding:clamp(26px,5vw,42px) 18px;color:var(--fg-2);
  border:1px dashed var(--line-2);border-radius:var(--r-lg);
  font-size:var(--t-body);line-height:1.6;max-width:none;
}

/* ─── bloque de pago del pase ─── */
.pago{
  max-width:520px;margin:22px auto 0;padding:clamp(22px,4vw,28px);
  background:var(--paper);border:1px solid var(--brand);border-radius:var(--r-lg);
}
.pago-kicker{
  font-family:var(--font-mn);font-size:var(--t-eye);letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand);margin:0;
}
.pago h3{margin:10px 0 0}
.pago-dato{
  display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
}
.pago-dato span{
  grid-column:1/-1;font-family:var(--font-mn);font-size:var(--t-eye);
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);
}
.pago-dato b{
  font-family:var(--font-mn);font-size:clamp(15px,3.6vw,19px);color:var(--fg);
  font-weight:400;letter-spacing:.02em;word-break:break-all;line-height:1.35;
}
.pago-copiar{
  flex:none;min-height:38px;padding:0 15px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--line-2);background:transparent;color:var(--fg);
  font-family:var(--font-bdy);font-size:var(--t-small);
}
.pago-copiar:hover{border-color:var(--brand);background:var(--tint)}
.pago-copiar.ok{border-color:var(--ok,var(--brand));color:var(--ok-text,var(--brand))}
.pago-meta{margin:18px 0 0;display:grid;gap:9px;padding-top:16px;border-top:1px solid var(--line)}
.pago-meta div{display:grid;grid-template-columns:minmax(90px,110px) 1fr;gap:14px;align-items:baseline}
.pago-meta dt{
  font-family:var(--font-mn);font-size:var(--t-eye);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);
}
.pago-meta dd{margin:0;color:var(--fg-2);font-size:var(--t-small);line-height:1.45}
/* El aviso existe porque el codigo de banco de la CLABE (646 = STP) no coincide
   con el nombre comercial del banco. Quien transfiere ve "STP" en su app y duda
   justo antes de mandar dinero: mas vale decirselo antes de que lo vea. */
.pago-aviso{
  margin:16px 0 0;padding:11px 13px;border-radius:var(--r-sm);
  font-size:var(--t-small);line-height:1.55;color:var(--fg-2);
  background:var(--surface);border:1px solid var(--line);
}

/* Enlace al pase desde la confirmacion del registro. */
.cr-ir-pase{
  display:inline-block;margin-top:6px;background:var(--brand);color:#fff;
  font-size:var(--t-body);padding:14px 28px;border-radius:var(--r-pill);text-decoration:none;
}
.cr-ir-pase:hover{background:var(--brand-lift)}