/* ═══════════════════════════════════════════════════════════════════════════
   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}
/* 🔴 La nav NO puede empujar el ancho del documento. Con la barra a 390 px
   bastan tres o cuatro enlaces para desbordar, y el desborde no se ve: se
   siente como un temblor lateral en toda la pagina. `min-width:0` deja que el
   flex se encoja y `overflow-x:auto` mete el sobrante en un scroll propio,
   invisible, que NO cuenta para document.scrollWidth. (260911) */
.topbar nav{display:flex;gap:clamp(14px,2.6vw,28px);align-items:center;
  min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{flex:0 0 auto;scroll-snap-align:start}
.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)}
/* Horizontal: dos columnas y 3/2. Recortar una foto de grupo a 4/5 deja fuera
   a quien esta en los extremos — justo a quien la foto existe para mostrar. */
.gal a.ancha{aspect-ratio:3/2;grid-column:span 2}
@media (max-width:520px){.gal a.ancha{grid-column:span 1}}

/* ═══ .gal.mosaico — galeria de orientaciones mezcladas ═══════════════════
   Con verticales y horizontales en la misma reticula, cualquier proporcion
   fija recorta la mitad de las fotos y deja huecos al final de las filas.
   En mosaico cada foto conserva SU proporcion: cero recorte, cero huecos.
   Es opt-in (`galeria.estilo: "mosaico"`): las galerias de una sola
   orientacion siguen mejor en reticula. */
.gal.mosaico{display:block;columns:3;column-gap:12px}
@media (max-width:999px){.gal.mosaico{columns:2}}
@media (max-width:559px){.gal.mosaico{columns:1}}
.gal.mosaico a{aspect-ratio:auto;break-inside:avoid;margin:0 0 12px;
  -webkit-column-break-inside:avoid}
.gal.mosaico img{height:auto;display:block}

/* Entrada escalonada de cada foto. Muy corta y muy corta distancia: la idea
   es que la sala "aparezca", no que la pagina haga una coreografia.
   Muere entera con prefers-reduced-motion (bloque de mas abajo). */
.gal a{opacity:1;transform:none;
  transition:transform .4s ease,opacity .5s ease,box-shadow .4s ease}
.rv.pre .gal a{opacity:0;transform:translateY(10px)}
.rv:not(.pre) .gal a:nth-child(1){transition-delay:.04s}
.rv:not(.pre) .gal a:nth-child(2){transition-delay:.08s}
.rv:not(.pre) .gal a:nth-child(3){transition-delay:.12s}
.rv:not(.pre) .gal a:nth-child(4){transition-delay:.16s}
.rv:not(.pre) .gal a:nth-child(5){transition-delay:.20s}
.rv:not(.pre) .gal a:nth-child(6){transition-delay:.24s}
.rv:not(.pre) .gal a:nth-child(7){transition-delay:.28s}
.rv:not(.pre) .gal a:nth-child(8){transition-delay:.32s}
.rv:not(.pre) .gal a:nth-child(n+9){transition-delay:.36s}
.gal a:hover{box-shadow:0 10px 30px rgba(0,0,0,.14)}

@media (prefers-reduced-motion:reduce){
  .gal a,.rv.pre .gal a{opacity:1!important;transform:none!important;
    transition:none!important;box-shadow:none}
  .gal a:hover img{transform:none}
}

/* ─── 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)}

/* ═══════════════════════════════════════════════════════════════════════════
   .hero--memoria · el hero de «esto pasó» — variante OPT-IN por clase (260911)
   Motor de Plataformas · Capa 1 (solo consume var(--*) de la Capa 2)

   Solo muerde bajo `.hero.hero--memoria`. No toca ni una regla existente:
   mentecapital-2026 y mentecapital-2026-cey siguen viendo el mismo píxel.
   Reemplaza la retícula «evento por venir» (.compacto + .hero-grid + retrato)
   por una foto a sangre con la frase de la noche encima.

   Presupuesto de movimiento (techo): una sola entrada, 280 ms, 10 px, sin
   bucle, sin parallax. Muere entera con prefers-reduced-motion y el layout
   queda idéntico (solo transform/opacity).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── el contenedor: a sangre, con el texto asentado abajo ─── */
.hero.hero--memoria{
  /* dónde ancla el recorte de la foto en móvil: ponente + primera fila.
     Son valores de layout, no color; se afinan por sitio si hace falta. */
  --hm-foco:50% 74%;--hm-zoom:1.6;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:min(88vh,820px);
  min-height:min(88svh,820px);
  padding-top:clamp(120px,24vw,200px);
  padding-bottom:clamp(40px,7vw,72px);
  /* el radial de .dark queda debajo de la foto; aquí basta el tinta plano */
  background:var(--ink);
}
@media (min-width:860px){
  .hero.hero--memoria{--hm-foco:50% 64%;--hm-zoom:1}
}

/* ─── la foto: rompe el .wrap porque vive en el section, no en la columna ─── */
.hero.hero--memoria > .hm-foto{
  position:absolute;inset:0;z-index:0;margin:0;overflow:hidden;
}
.hero.hero--memoria > .hm-foto img{
  width:100%;height:100%;object-fit:cover;object-position:var(--hm-foco);
  /* 🔴 En un telefono, una foto horizontal dentro de un hero vertical se
     escala por ALTURA: sobra ancho, no alto, y entonces `object-position` en
     el eje Y no mueve nada — el techo del auditorio se queda ocupando media
     pantalla. Se acerca con un scale anclado abajo, que si saca el techo del
     encuadre. Es transform estatico, no animacion: no toca el presupuesto de
     movimiento. La foto es de 1920 px de ancho; a 390@2x sobra resolucion de
     sobra para 1.6x. (260911) */
  transform:scale(var(--hm-zoom,1));transform-origin:50% 100%;
}
/* Dos capas de lectura, en tinta institucional y sin bajar el texto:
   1) un velo plano baja las pantallas encendidas y los blancos de la sala;
   2) una cama que sube desde abajo donde vive el texto, más una franja
      corta arriba para que la barra superior no flote sobre luz. */
.hero.hero--memoria > .hm-foto::before{
  content:"";position:absolute;inset:0;
  background:var(--ink);opacity:.28;
}
.hero.hero--memoria > .hm-foto::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,var(--ink) 0%,transparent 16%),
    linear-gradient(0deg,var(--ink) 0%,var(--ink) 8%,transparent 66%);
  opacity:.92;
}

/* ─── la columna de texto: una idea, la frase de la noche ─── */
.hero.hero--memoria .hm-cuerpo .stack{
  gap:clamp(14px,2.6vw,22px);
  max-width:760px;
}
.hero.hero--memoria h1{
  font-size:clamp(1.85rem,5.6vw,3.5rem);
  letter-spacing:-.03em;line-height:1.08;
  max-width:24ch;text-wrap:balance;
}
/* el eco: lo que pasó después de la pregunta */
.hero.hero--memoria .hm-eco{
  font-size:var(--t-lead);line-height:1.45;color:var(--fg-inv-2);max-width:34ch;
}
.hero.hero--memoria .hm-eco .soft{color:var(--tint)}
/* quién lo dijo y ante quién */
.hero.hero--memoria .hm-quien{
  font-family:var(--font-mn);font-size:var(--t-eye);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-inv-2);line-height:1.8;
}

/* ─── la ficha baja de jerarquía: una línea, sin cajas ─── */
.hero.hero--memoria .hm-ficha{
  display:flex;flex-wrap:wrap;gap:6px 0;margin:0;
  padding-top:16px;border-top:1px solid var(--ink-line);
  font-size:var(--t-small);color:var(--fg-inv-2);line-height:1.5;
}
.hero.hero--memoria .hm-ficha > div{display:inline-flex;align-items:baseline}
/* el separador cierra cada dato (no abre el siguiente): si la línea rompe,
   el punto queda al final y nunca arranca un renglón */
.hero.hero--memoria .hm-ficha > div:not(:last-child)::after{
  content:"·";margin:0 .6em;color:var(--fg-inv-3);
}
/* el término queda para lectores de pantalla; a ojo la línea se lee sola */
.hero.hero--memoria .hm-ficha dt{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;
}
.hero.hero--memoria .hm-ficha dd{margin:0;white-space:nowrap}

/* ─── CTA único: reusa .btn tal cual, sin .pulse (es un bucle) ─── */
.hero.hero--memoria .hm-cta{margin-top:6px}

/* ─── movimiento: una sola entrada, el bloque de texto ─── */
/* Apaga la coreografía por hijo de .hero .stack>* (750 ms · 22 px) y la
   cambia por UNA subida del bloque completo dentro del techo. La foto no
   entra: ya está. Nada más se mueve. */
.hero.hero--memoria .stack > *{animation:none}
.hero.hero--memoria .hm-cuerpo{
  animation:hmRise .28s cubic-bezier(.22,.7,.3,1) .06s backwards;
}
@keyframes hmRise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .hero.hero--memoria .hm-cuerpo{animation:none}
}
@media print{
  .hero.hero--memoria > .hm-foto::before,
  .hero.hero--memoria > .hm-foto::after{display:none}
}

/* ─── la frase de la noche: franja destacada BAJO el h1, nunca el h1 ───
   🔴 Sellado por Ed (260910, VOL): el <h1> es la tagline descriptiva —es la
   señal de entidad que leen buscadores y modelos—. Una cita, por buena que
   sea, va en franja destacada inmediatamente despues, con atribucion. */
.hero.hero--memoria .hm-cita{
  margin:0;padding:2px 0 2px clamp(14px,3vw,20px);
  border-left:2px solid var(--tint);
  font-family:var(--font-dsp);
  font-size:clamp(1.15rem,3.2vw,1.6rem);
  line-height:1.32;letter-spacing:-.01em;
  color:var(--fg-inv);max-width:30ch;text-wrap:balance;
}
/* ═══════════════════════════════════════════════════════════════════════════
   .orgs · «quiénes estuvieron» — la capa de difusión (260911)
   Motor de Plataformas · Capa 1 (solo consume var(--*) de la Capa 2)

   Diseña para el HTML exacto que produce build.py › seccion_quienes():
   .orgs > .org (a|div) > .org-logo > img · .org-nombre · [.quien > .n + .c]

   Jerarquía sellada: nombre + cargo pesa más que el logo; el logo pesa más
   que el nombre del organismo (que el logo ya dice). Por eso .quien es el
   texto más fuerte de la tarjeta y .org-nombre el más discreto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── retícula ───
   Móvil (<720): dos columnas fluidas — a 390 quedan tarjetas de ~167 px.
   Escritorio: tarjetas de 220 px fijos alineadas al borde izquierdo; con 2
   organismos no se estiran a media página, con 6 caen 4 + 2 a 1080.
   (No se usa minmax(...,220px) en auto-fit: el navegador cuenta las
   repeticiones con el máximo y a 390 daba UNA columna — medido 260911.) */
.orgs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:12px;justify-content:start;
}
@media (min-width:720px){
  .orgs{grid-template-columns:repeat(auto-fill,220px)}
}

/* ─── la tarjeta: misma forma sea <a> o <div> ─── */
.org{
  display:flex;flex-direction:column;gap:12px;min-width:0;
  padding:16px 16px 18px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);
  color:var(--fg);
}
/* enlazada: se anuncia solo al tocarla (borde de marca + 2 px), sin flecha
   ni subrayado — el organismo no es un botón, es una presencia */
a.org{transition:border-color .2s,transform .2s,box-shadow .2s}
a.org:hover{border-color:var(--brand);transform:translateY(-2px);
  box-shadow:0 12px 30px -22px var(--brand)}
a.org:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ─── el logo: altura óptica común para PNG transparente, SVG y JPEG blanco ───
   Caja fija de 64 px sobre papel; el logo entra por contain, nunca deformado.
   `multiply` hace desaparecer el fondo blanco del JPEG sobre el papel blanco y
   deja intactos los que ya son transparentes. Un logo muy ancho se acota a
   150 px para que no pese el doble que un emblema cuadrado. */
.org-logo{
  height:64px;display:flex;align-items:center;justify-content:flex-start;
  background:var(--paper);border-radius:var(--r);
}
.org-logo img{
  display:block;width:auto;height:auto;
  max-height:100%;max-width:min(100%,150px);
  object-fit:contain;mix-blend-mode:multiply;
}
/* sin logo el generador deja la caja vacía: desaparece, y el nombre del
   organismo sube a hacer de marca (ver abajo) */
.org-logo:empty{display:none}

/* ─── nombre del organismo: discreto cuando hay logo y persona ───
   margin-top:auto pega el bloque de texto al pie: en una fila de tarjetas de
   alto igual, todas leen «logo arriba, texto abajo». */
.org-nombre{
  font-size:var(--t-small);color:var(--fg-2);line-height:1.35;margin-top:auto;
}
/* sin logo: el nombre ocupa el lugar del logo, arriba y con peso de título */
.org-logo:empty + .org-nombre{
  margin-top:0;font-family:var(--font-dsp);font-size:1.1rem;letter-spacing:-.01em;
  color:var(--fg);line-height:1.2;
}
/* sin .quien el nombre es el único texto: sube a título para que la tarjeta
   «solo logo» se vea deliberada, no recortada */
.org-nombre:last-child{
  font-family:var(--font-dsp);font-size:1.02rem;letter-spacing:-.01em;
  color:var(--fg);padding-top:10px;border-top:1px solid var(--line);
}

/* ─── la persona: lo que más pesa ─── */
.quien{
  padding-top:10px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px;
}
.org-logo:empty ~ .quien{margin-top:auto}
.quien .n{
  font-family:var(--font-dsp);font-size:1.02rem;letter-spacing:-.01em;
  color:var(--fg);line-height:1.2;
}
.quien .c{
  font-family:var(--font-mn);font-size:var(--t-eye);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);line-height:1.6;
}

/* ─── la nota al pie de la retícula (fuera del footer no existía) ─── */
.orgs ~ .fine{
  font-size:var(--t-small);color:var(--fg-3);max-width:62ch;margin-top:8px;
}

/* Movimiento: ninguno propio. La sección entra con el .rv del núcleo como un
   solo bloque; las tarjetas no se escalonan (sería una segunda cosa moviéndose). */
@media (prefers-reduced-motion:reduce){
  a.org{transition:none}
  a.org:hover{transform:none}
}

/* 🔴 Un CTA visible a la vez: bajo 720 px vive la .cta-bar fija con la misma
   accion. Dos botones identicos pegados no dan el doble de conversion, dan
   duda. Arriba de 720 px no hay barra y este boton es el unico. (260911) */
@media (max-width:720px){
  .hero.hero--memoria .hm-cta{display:none}
}

/* 🔴 La barra superior es fija: al llegar a una seccion por su ancla, el
   navegador deja el borde de la seccion en y=0 y la barra se come el eyebrow y
   parte del titulo. `scroll-margin-top` le reserva su alto. Se nota solo al
   navegar por el menu, que es justo lo que nadie prueba. (260911) */
section[id]{scroll-margin-top:clamp(64px,12vw,84px)}

/* ─── .orgs sobre fondo oscuro ───
   Los logos institucionales llegan en mil formatos: PNG con fondo, SVG, un
   JPEG con blanco solido. Sobre papel hay que pelearse con cada uno. Sobre
   tinta, con las versiones BLANCAS vectoriales que ya existen de los artes de
   pantalla, los cuatro caen con el mismo peso optico y sin trucos de mezcla.
   Por eso esta variante existe: es la que de verdad viste. (260911) */
.dark .orgs .org{background:transparent;border-color:var(--ink-line)}
.dark .orgs .org:hover{border-color:var(--tint)}
.dark .orgs .org-logo{background:transparent}
.dark .orgs .org-logo img{mix-blend-mode:normal;filter:none;opacity:.92}
.dark .orgs .org:hover .org-logo img{opacity:1}
.dark .orgs .org-nombre{color:var(--fg-inv-2)}
.dark .orgs .quien{border-top-color:var(--ink-line)}
.dark .orgs .quien .n{color:var(--fg-inv)}
.dark .orgs .quien .c{color:var(--fg-inv-3)}
.dark .orgs ~ .fine{color:var(--fg-inv-3)}