/* ═══════════════════════════════════════════════════════════════════════
   SURCONEURO — REDISEÑO CINEMATOGRÁFICO
   Inversión tonal del sistema editorial: tres bloques ancla en negro
   (apertura, momento, cierre) y cuerpo de lectura en blanco.

   ponytail: HTML/CSS/JS estáticos, sin build ni dependencias. El movimiento
   es CSS + IntersectionObserver; nada de librerías.
   ponytail: fuentes por CDN de Google. Autoalojar (Fontsource) antes de
   producción, por rendimiento y por el salto de carga.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────────────────────────────────── */
:root{
  /* Permite interpolar hacia auto: lo necesita el acordeón. */
  interpolate-size:allow-keywords;
  /* claro */
  --surface:#FFFFFF;
  --surface-alt:#F7F8FA;
  --ink:#0F1D2E;
  /* 4,6:1 pasaba AA por los pelos, pero este texto lo lee un adulto mayor en
     un móvil y en serif, donde el trazo es fino. Subido a ~7:1. */
  --ink-muted:#525C6A;
  --rule:#E2E4E6;
  --rule-strong:#C3C6CB;

  /* oscuro */
  --void:#070D15;
  --void-2:#0C1420;
  --ink-inv:#F2F5F8;
  --ink-inv-muted:#94A0AE;
  --rule-inv:rgba(255,255,255,.12);
  --rule-inv-strong:rgba(255,255,255,.28);

  /* hueso — sólo la columna del margen izquierdo. Es el único sitio del
     sistema con un cálido: la raíz de la derecha sigue siendo regla gris,
     y así los dos gestos no se confunden. Los tres valores están calculados
     a la misma luminancia que la regla que sustituyen, de modo que entra el
     tono y no cambia el peso de la página. */
  --bone:#CEC5AC;
  --bone-inv:rgba(238,228,200,.36);
  --bone-ghost:rgba(238,228,200,.21);

  --brand:#14304D;
  --accent:#5C7EC1;
  --accent-hover:#7192CE;
  --accent-active:#4B69A2;

  /* espaciado — Fibonacci × 8 · móvil */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:56px; --s7:72px;

  /* rejilla */
  --cols:4; --gutter:16px; --margin:20px; --max:1440px;

  /* tipografía */
  /* El titular se mide contra las dos dimensiones: sin el tope en dvh, en una
     pantalla ancha y baja (portátil de 900px) las tres líneas empujan la franja
     de prueba fuera del fold. */
  --t-dxl:clamp(46px,min(9.6vw,12dvh),132px);
  --t-d:clamp(32px,5.2vw,74px);
  --t-h2:clamp(23px,2.5vw,38px);
  --t-h3:18px;
  --t-bl:18px; --t-b:16px; --t-cap:13px; --t-lab:11px;
  --t-mono:12px; --t-nav:13px; --t-btn:13px;

  --header-h:72px;
  --spine-w:150px;

  /* motion */
  /* Flecha del sistema, en máscara: hereda el color del elemento que la usa. */
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 9'%3E%3Cpath d='M0 4.5h18M14.5 1 18 4.5 14.5 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");

  --e-enter:cubic-bezier(.16,1,.3,1);
  --e-micro:cubic-bezier(.4,0,.2,1);
  --e-line:cubic-bezier(.65,0,.35,1);
}

@media (min-width:768px){
  :root{ --cols:8; --gutter:20px; --margin:32px; --header-h:80px;
         --t-h3:19px; --t-bl:19px; --t-b:17px; }
}
@media (min-width:1024px){
  :root{ --cols:12; --gutter:24px; --margin:40px; --header-h:88px;
         --s4:40px; --s5:64px; --s6:80px; --s7:120px;
         --t-h3:21px; --t-bl:20px; --t-b:17px; }
}
@media (min-width:1440px){ :root{ --margin:64px; } }
@media (min-width:1600px){ :root{ --spine-w:210px; } }
@media (min-width:1920px){ :root{ --margin:96px; --spine-w:270px; } }

/* ── BASE ────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%;
      scroll-padding-top:calc(var(--header-h) + var(--s2));
      scrollbar-width:thin; scrollbar-color:var(--rule-strong) var(--surface); }
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:"Newsreader",Georgia,serif;
  font-optical-sizing:auto;
  font-size:var(--t-b);
  line-height:1.70;
  -webkit-font-smoothing:antialiased;
}
/* Las raices laterales cuelgan a proposito por fuera de los dos bordes, y cada
   modulo las recorta. La portada se escapaba: 86px de ancho fantasma que no
   enseñaban barra —overflow-x:hidden en body se propaga al viewport— pero que
   ahi estaban, y que en cuanto un navegador no propague se convierten en una
   barra horizontal en la pagina principal.
   Va «clip» y no «hidden» porque hidden crea un contenedor de scroll y se
   lleva por delante el position:sticky del numero de capitulo. */
html,body{ overflow-x:clip; }
h1,h2,h3,p,ul,ol,dl,figure,address{ margin:0; }
ul,ol{ list-style:none; padding:0; }
dd,dl{ margin:0; }
address{ font-style:normal; }
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a,button{ -webkit-tap-highlight-color:transparent; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* Lo que no dibujamos también es diseño: selección teñida en los dos mundos. */
::selection{ background:var(--brand); color:#fff; }
.hero ::selection,.cine ::selection,.close ::selection,.foot ::selection{
  background:var(--accent); color:var(--void); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--surface); color:var(--ink);
  padding:var(--s2) var(--s3); font-family:"IBM Plex Sans",sans-serif;
  font-size:var(--t-nav);
}
.skip:focus{ left:0; }

.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ── LAYOUT ──────────────────────────────────────────────────────────── */
.container{ max-width:var(--max); margin-inline:auto; padding-inline:var(--margin); }
.grid{ display:grid; grid-template-columns:repeat(var(--cols),1fr); column-gap:var(--gutter); }
.grid > *{ grid-column:1 / -1; min-width:0; }

.s{ padding-block:var(--s6); }
/* position: los filamentos laterales se anclan al módulo, no a la página. */
.s--light{ position:relative; overflow-x:clip;
           background:var(--surface); color:var(--ink); }
/* Costura entre bloques claros: sin ella la página parece un solo lienzo y el
   ritmo de capítulos se pierde. */
.s--light + .s--light{ padding-top:0; }
/* Y la costura cuando cambia el tono. Entre dos claros ya se colapsaba; entre
   claro y oscuro no, y ahí los dos rellenos se sumaban: son los cuatro huecos
   más grandes de la página, de 200 a 340px sin nada dentro. Se colapsan igual.
   El aire de dentro de cada módulo no se toca — ese sí es diseño. */
.s--light:has(+ .act),
.s--light:has(+ .desc),
.s--light:has(+ .cine),
.s--light:has(+ .close){ padding-bottom:var(--s5); }
.act + .s--light,
.cine + .s--light{ padding-top:var(--s5); }
/* Dos respiraciones más largas: si todas las bandas miden lo mismo, la página
   avanza como una escalera. */
@media (min-width:1024px){
  #el-doctor,#tecnologia{ padding-bottom:var(--s7); }
}

/* ── TIPOGRAFÍA ──────────────────────────────────────────────────────── */
.display-xl,.display,.h2{ font-family:"Newsreader",Georgia,serif; font-weight:400; }
.display-xl{ font-size:var(--t-dxl); line-height:.92; letter-spacing:-.03em;
             margin-left:-.025em; overflow-wrap:break-word; }
.display{ font-size:var(--t-d); line-height:1.0; letter-spacing:-.025em;
          margin-left:-.025em; }
.h2{ font-size:var(--t-h2); line-height:1.1; letter-spacing:-.02em; }
.lead{ font-size:clamp(20px,2vw,28px); line-height:1.4; letter-spacing:-.015em; }
.body-l{ font-size:var(--t-bl); line-height:1.65; }
.body{ font-size:var(--t-b); line-height:1.70; }

.label{
  font-family:"IBM Plex Sans",sans-serif; font-weight:500;
  font-size:var(--t-lab); line-height:1.4; letter-spacing:.12em;
  text-transform:uppercase;
}
.label--muted{ color:var(--ink-muted); }

.caption{
  font-family:"IBM Plex Sans",sans-serif; font-weight:400;
  font-size:var(--t-cap); line-height:1.5; color:var(--ink-muted);
}

.mono,.clock{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:400;
  font-size:var(--t-mono); line-height:1.6; letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.pend{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:var(--t-mono); letter-spacing:.04em; color:var(--ink-muted);
}

/* enlace de texto: filete que crece desde la izquierda */
.link-line{ margin-top:var(--s4); }
.link-line a,.foot__list a,.foot__ext a,.mono a{
  font-family:"IBM Plex Sans",sans-serif; font-size:var(--t-cap);
  position:relative; display:inline-block; padding-bottom:2px;
}
.mono a{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--t-mono); }
.link-line a::after,.foot__list a::after,.foot__ext a::after,.mono a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform-origin:left;
  transition:opacity 180ms var(--e-micro);
}
.link-line a::after{ opacity:.35; }
.foot__list a::after,.foot__ext a::after,.mono a::after{ opacity:0; }
/* En táctil el hover se queda pegado tras el toque: sólo se ofrece a quien
   tiene puntero. */
@media (hover:hover) and (pointer:fine){
  .link-line a:hover::after,.foot__list a:hover::after,
  .foot__ext a:hover::after,.mono a:hover::after{ opacity:1; }
}

/* ── ACCIÓN ──────────────────────────────────────────────────────────── */
/* El botón lleva la flecha del sistema —la misma de las filas— y se rellena
   por barrido desde el borde de entrada. Ni sombra ni radio: la jerarquía la
   pone el acento, no el relieve. */
.cta{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  height:56px; padding-inline:32px 26px;
  background:var(--accent); color:var(--void);
  font-family:"IBM Plex Sans",sans-serif; font-weight:500;
  font-size:var(--t-btn); letter-spacing:.08em; text-transform:uppercase;
  border:0; border-radius:0;
  transition:transform 160ms var(--e-micro);
}
.cta::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--accent-hover);
  transform:scaleX(0); transform-origin:left;
  transition:transform 320ms var(--e-enter);
}
.cta::after{
  content:""; width:20px; height:9px; flex:none;
  background:currentColor;
  -webkit-mask:var(--arrow) no-repeat center/contain;
          mask:var(--arrow) no-repeat center/contain;
  transition:transform 260ms var(--e-micro);
}
@media (hover:hover) and (pointer:fine){
  .cta:hover::before{ transform:scaleX(1); }
  .cta:hover::after{ transform:translateX(5px); }
}
/* El botón acusa el dedo antes de que llegue la respuesta del sistema. */
.cta:active{ background:var(--accent-active); transform:scale(.97); }
.cta--sm{ height:44px; padding-inline:22px 18px; gap:10px; }
.cta--sm::after{ width:16px; }
/* En el panel móvil ocupa el ancho: la flecha se va al filo derecho. */
.panel__cta{ justify-content:space-between; }

.ghost{
  display:inline-flex; align-items:center; height:56px;
  font-family:"IBM Plex Sans",sans-serif; font-weight:500;
  font-size:var(--t-btn); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-inv); position:relative;
}
.ghost::after{
  content:""; position:absolute; left:0; right:0; bottom:16px; height:1px;
  background:currentColor; transform-origin:left;
  transition:transform 220ms var(--e-micro);
}
.ghost::after{ opacity:.4; }
@media (hover:hover) and (pointer:fine){
  .ghost:hover::after{ opacity:1; }
}

/* ── HEADER ──────────────────────────────────────────────────────────── */
/* Sobre la apertura el header es transparente y blanco; en cuanto el cuerpo
   claro pasa por debajo se vuelve sólido. */
.header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  color:var(--ink-inv);
  background:transparent; border-bottom:1px solid transparent;
  transition:transform 260ms var(--e-micro), background-color 260ms var(--e-micro),
             color 260ms var(--e-micro), border-color 260ms var(--e-micro);
}
.header.is-solid{ background:var(--surface); color:var(--ink);
                  border-bottom-color:var(--rule); }
.header.is-hidden{ transform:translateY(-100%); }
.header__inner{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}
.lockup{
  font-family:"IBM Plex Sans",sans-serif; font-weight:500;
  font-size:var(--t-nav); letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:11px;
  --mark:46px;
}
/* El símbolo del cliente, recortado a su dibujo. Va como fondo y no como
   imagen para poder cambiar de tinta según la superficie: sobre oscuro no se
   invierte —el azul de marca se volvería naranja— sino que se usa la versión
   clara del mismo dibujo. Ni se redibuja ni se reinterpreta. */
.lockup__mark{
  width:var(--mark); height:var(--mark); flex:0 0 auto;
  background:url(assets/simbolo.png) no-repeat center/contain;
}
.header:not(.is-solid) .lockup__mark,
.lockup--foot .lockup__mark{ background-image:url(assets/simbolo-claro.png); }

.nav{ display:none; gap:clamp(20px,2.2vw,36px); white-space:nowrap; }
.nav a{
  font-family:"IBM Plex Sans",sans-serif; font-weight:500;
  font-size:var(--t-nav); letter-spacing:.10em; text-transform:uppercase;
  position:relative; display:flex; align-items:center; height:44px;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:8px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform 180ms var(--e-micro);
}
@media (hover:hover) and (pointer:fine){
  .nav a:hover::after{ transform:scaleX(1); }
}
/* La página en la que se está ya lleva su filete puesto. */
.nav a[aria-current]::after{ transform:scaleX(1); opacity:.45; }
/* Y la sección por la que se va pasando. Sin esto la barra es un menú mudo:
   dice a dónde se puede ir, nunca dónde se está. */
.nav a.is-here::after{ transform:scaleX(1); opacity:.45; }
.nav a.is-here{ color:var(--accent); }
.panel__nav a[aria-current]{ color:var(--accent); }
.header__cta{ display:none; }

.burger{
  width:44px; height:44px; padding:0; margin-right:-10px;
  background:none; border:0; cursor:pointer; color:inherit;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
  transition:transform 160ms var(--e-micro);
}
.burger span{ display:block; width:24px; height:1px; background:currentColor; }
.burger:active,.panel__close:active{ transform:scale(.94); }

/* La barra horizontal sale a 1280 y no a 1024: con «Equipo multidisciplinario»
   dentro, por debajo de eso los seis enlaces parten en dos líneas y se meten
   bajo el botón. Entre 1024 y 1279 manda el panel, que ya existe. */
@media (min-width:1280px){
  .nav{ display:flex; }
  .header__cta{ display:inline-flex; }
  .burger{ display:none; }
}

/* ── PANEL MÓVIL ─────────────────────────────────────────────────────── */
.panel{
  position:fixed; inset:0; z-index:60;
  background:var(--void); color:var(--ink-inv);
  padding:calc(var(--header-h) + var(--s5)) var(--margin) var(--s5);
  display:flex; flex-direction:column; justify-content:space-between;
}
.panel[hidden]{ display:none; }
.panel__nav{ display:flex; flex-direction:column; }
.panel__nav > a{
  font-family:"Newsreader",Georgia,serif; font-size:clamp(30px,8vw,44px);
  line-height:1.2; letter-spacing:-.02em; padding-block:var(--s2);
}
.panel__rule{ border:0; border-top:1px solid var(--rule-inv);
              margin:var(--s4) 0; width:100%; }
.panel__sec{
  font-family:"IBM Plex Sans",sans-serif !important; font-size:var(--t-b) !important;
  letter-spacing:0 !important; color:var(--ink-inv-muted);
  padding-block:var(--s1) !important;
}
.panel__cta{ width:100%; margin-top:var(--s5); }
.panel__close{
  position:absolute; top:0; right:calc(var(--margin) - 10px);
  height:var(--header-h); min-width:44px; padding:0;
  background:none; border:0; cursor:pointer; color:var(--ink-inv);
  font-family:"IBM Plex Sans",sans-serif; font-weight:500;
  font-size:var(--t-nav); letter-spacing:.10em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:flex-end;
  transition:transform 160ms var(--e-micro);
}

/* ── BARRA FIJA DE ACCIÓN (MÓVIL) ────────────────────────────────────── */
/* En móvil la apertura ocupa la pantalla entera y el botón se va con ella.
   Esta barra lo devuelve en cuanto empieza el cuerpo, y no antes. */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:flex; align-items:center; justify-content:center;
  height:60px; padding-bottom:env(safe-area-inset-bottom);
  background:var(--accent); color:var(--void);
  font-family:"IBM Plex Sans",sans-serif; font-weight:500;
  font-size:var(--t-btn); letter-spacing:.08em; text-transform:uppercase;
  transform:translateY(100%);
  transition:transform 320ms var(--e-enter);
}
.dock[hidden]{ display:none; }
.dock.is-in{ transform:translateY(0); }
.dock:active{ background:var(--accent-active); }
@media (min-width:1024px){ .dock{ display:none; } }

/* ── 01 · APERTURA ───────────────────────────────────────────────────── */
.hero{
  position:relative; overflow-x:clip; background:var(--void); color:var(--ink-inv);
  min-height:100dvh; display:flex; flex-direction:column;
  overflow:hidden;
}
/* Media primero en el DOM por prioridad de carga; en móvil manda arriba. */
.hero__media{ position:relative; height:40dvh; min-height:250px; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  /* A color, por petición del cliente. Se mantiene la bajada de brillo y la
     máscara: sin ellas el encuadre sería un rectángulo luminoso con borde
     pegado en mitad del negro, y el titular perdería el contraste. */
  filter:contrast(1.04) saturate(.92) brightness(.7);
  -webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 45%,transparent 100%);
}
/* Velo de marca sobre la apertura: ya no tiñe el color —la imagen va a
   color— sólo asienta el encuadre sobre el negro. */
.hero__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--void); opacity:.28;
  -webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 45%,transparent 100%);
}
.hero__prov{
  position:absolute; right:var(--margin); bottom:var(--s2); z-index:2;
  margin:0;
}
.hero__prov .pend{ color:var(--ink-inv-muted); }

.hero__panel{
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:var(--s5);
  padding:var(--s5) var(--margin) var(--s6);
  max-width:var(--max); width:100%; margin-inline:auto;
}
.hero__ch{ color:var(--ink-inv-muted); margin-bottom:var(--s3); }
.hero__t{ margin-bottom:var(--s4); }
.hero__sig{
  font-family:"IBM Plex Sans",sans-serif; font-size:var(--t-lab);
  letter-spacing:.10em; text-transform:uppercase; color:var(--ink-inv);
}
@media (min-width:768px){ .hero__sig{ font-size:var(--t-cap); } }
.hero__sig span{ color:var(--accent); padding-inline:6px; }
.hero__act{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4);
            margin-top:var(--s5); }

.proof{
  display:grid; gap:var(--s3);
  border-top:1px solid var(--rule-inv); padding-top:var(--s3);
}
.proof__k{
  display:block; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:var(--t-mono); letter-spacing:.04em; color:var(--accent);
  margin-bottom:4px;
}
.proof__v{
  display:block; font-family:"IBM Plex Sans",sans-serif; font-size:var(--t-cap);
  line-height:1.5; color:var(--ink-inv);
}

@media (min-width:768px){
  .proof{ grid-template-columns:repeat(3,1fr); gap:var(--s4); }
}

@media (min-width:1024px){
  .hero{ flex-direction:row; align-items:stretch; }
  .hero__media{
    position:absolute; inset:0 0 0 auto; width:46%; height:100%; min-height:0;
  }
  .hero__media img{
    object-position:50% 18%;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 42%),
                       linear-gradient(to bottom,#000 78%,transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to right,transparent 0%,#000 42%),
                       linear-gradient(to bottom,#000 78%,transparent 100%);
            mask-composite:intersect;
  }
  .hero__media::after{
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 42%);
            mask-image:linear-gradient(to right,transparent 0%,#000 42%);
  }
  .hero__panel{
    justify-content:flex-end;
    padding:calc(var(--header-h) + var(--s5)) var(--margin) var(--s5);
    gap:var(--s4);
  }
  .hero__body,.proof{ max-width:min(64%,760px); }
  .hero__t{ margin-bottom:var(--s5); }
}

/* ── MARCADOR DE CAPÍTULO ────────────────────────────────────────────── */
.mark{ display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s4); }
.mark__n{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--t-mono);
  letter-spacing:.04em; color:var(--accent); font-variant-numeric:tabular-nums;
}
.mark__r{ display:block; width:40px; height:1px; background:var(--rule-strong); }
/* El número solo no orienta: al lado va el nombre del capítulo. Es la única
   etiqueta fija de la página y resuelve el «no sé dónde estoy». */
.mark__l{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--t-lab);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted);
  /* La columna del margen es estrecha y una palabra larga no puede partirse
     sola: «ESPECIALIDADES» se salia 3px por encima de la primera ficha. Que
     parta antes de invadir nada. */
  overflow-wrap:anywhere;
}
.mark__n--dark{ color:var(--ink-inv-muted); display:block; margin-bottom:var(--s3); }

@media (min-width:1024px){
  /* Sticky: el número de capítulo baja con la lectura. Es lo único de la
     retícula que se mueve contra el resto, y basta para que la columna
     izquierda deje de leerse como un margen muerto. */
  .mark{ position:sticky; top:calc(var(--header-h) + var(--s4)); align-self:start;
         grid-column:1 / 2; flex-direction:column; align-items:flex-start; gap:var(--s1);
         margin-bottom:0; position:sticky; top:calc(var(--header-h) + var(--s5));
         align-self:start; }
  .mark__r{ width:24px; margin-top:var(--s1); }
}

/* ── TÍTULO DE SECCIÓN ───────────────────────────────────────────────── */
.sec__t{ margin-bottom:var(--s4); max-width:20ch; }
/* Una entradilla nunca va pegada al filete de la lista que introduce. */
.lead + .index,.lead + .rows,
.lead + .team,.lead + .acc,.lead + .cards,.lead + .plus{ margin-top:var(--s5); }
/* Entradilla y cuerpo son dos voces, no un párrafo partido: si se tocan, la
   diferencia de tamaño se lee como un salto de línea raro y no como jerarquía. */
.lead + .body-l{ margin-top:var(--s3); }
.body-l + .body-l{ margin-top:var(--s2); }
.body-l + .plus{ margin-top:var(--s5); }

/* ── COLUMNAS ────────────────────────────────────────────────────────── */
@media (min-width:768px){ .c1,.doc__text{ grid-column:2 / 8; } .data{ grid-column:1 / -1; } }
@media (min-width:1024px){
  .c1{ grid-column:3 / 11; }
  /* Dos capítulos rompen la alineación: uno tira a la izquierda, otro entra
     más adentro. Con el número de capítulo siempre en la columna 1 de ancla,
     el desplazamiento se lee como ritmo y no como descuadre. */
  #areas .c1{ grid-column:2 / 10; }
  #proceso .c1{ grid-column:4 / 12; }
  /* Y lo mismo en las páginas interiores, pero sin nombrarlas una a una: ahí
     estaba media culpa del aire de presentación. Todos los capítulos caían en
     la misma columna, uno detrás de otro, con el mismo número a la izquierda y
     la misma sangría — la misma plantilla maestra con distinto contenido.
     .top sólo existe en las interiores, así que el selector no toca la portada.
     Cuenta entre hermanos <section>: la cabecera es la 1, los capítulos van de
     la 2 en adelante y el cierre no tiene .c1, así que no estorba. */
  .top ~ .s--light:nth-of-type(even) :is(.c1,.cur){ grid-column:2 / 10; }
  .top ~ .s--light:nth-of-type(odd) :is(.c1,.cur){ grid-column:4 / 12; }
  .doc__text{ grid-column:3 / 8; }
  .doc__fig{ grid-column:9 / 13; }
  .facts{ grid-column:3 / 13; }
}

/* ── 02 · BIFURCACIÓN ────────────────────────────────────────────────── */
.rows{ border-top:1px solid var(--rule); }
.rows li{ border-bottom:1px solid var(--rule); }
.rows a{
  display:flex; align-items:center; gap:var(--s3);
  min-height:76px;
  transition:transform 220ms var(--e-micro);
}
.rows__n{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--t-mono);
  letter-spacing:.04em; color:var(--accent); flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.rows__t{ font-size:clamp(20px,2.2vw,30px); line-height:1.2; letter-spacing:-.015em; }
.rows__go{
  margin-left:auto; flex:0 0 auto; display:flex; align-items:center;
  color:var(--rule-strong); padding-left:var(--s2);
  transition:color 180ms var(--e-micro), transform 220ms var(--e-micro);
}
.rows a:focus-visible .rows__go{ color:var(--accent); }
/* El desplazamiento va en transform: con padding-left cada fotograma
   recalculaba la maqueta. */
@media (hover:hover) and (pointer:fine){
  .rows li:hover{ border-color:var(--rule-strong); }
  .rows li:hover a{ transform:translateX(10px); }
  .rows li:hover .rows__go{ color:var(--accent); transform:translateX(8px); }
}
.rows a:active{ transform:translateX(5px); }
.rows + .caption{ margin-top:var(--s3); }

/* ── 03 · EL DOCTOR ──────────────────────────────────────────────────── */
.doc__text .lead{ margin-bottom:var(--s3); }
.doc__text .body-l{ color:var(--ink-muted); max-width:52ch; }

/* El retrato entra en la sección donde está su nombre, no en la apertura:
   mientras sea una imagen generada, no puede ocupar la primera pantalla. */
.doc__fig{ margin-top:var(--s5); position:relative; }
.doc__fig img{
  width:100%; height:auto; filter:grayscale(.9) contrast(1.05) brightness(.98);
  /* Sin borde inferior: la fotografía se funde en el blanco en vez de cortarse
     en recto. Es el único modo de quitar un canto duro sin meter un radio. */
  -webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 66%,transparent 100%);
}
.doc__cap{ margin-top:var(--s2); }

.facts{ margin-top:var(--s5); border-top:1px solid var(--ink); }
.facts > div{
  display:grid; gap:2px; padding-block:var(--s3);
  border-bottom:1px solid var(--rule);
}
.facts dt{
  font-family:"IBM Plex Sans",sans-serif; font-size:var(--t-lab);
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted);
}
.facts dd{
  font-family:"IBM Plex Sans",sans-serif; font-size:15px;
  line-height:1.5; color:var(--ink);
}
@media (min-width:768px){
  .facts{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:var(--gutter); }
  /* Dos columnas cuando el dato no es un dato sino una frase: las cuatro
     líneas de la IPS llevan una descripción, y a tres columnas se parten en
     cuatro líneas de texto cada una. */
  .facts--2{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){ .doc__fig{ margin-top:0; } }

/* ── BANDA FOTOGRÁFICA ───────────────────────────────────────────────── */
.band{
  position:relative; margin:0; background:var(--void);
  height:44vh; min-height:280px; overflow:hidden;
}
.band img{
  width:100%; height:100%; object-fit:cover; object-position:50% 65%;
  filter:saturate(.92) contrast(1.06) brightness(.94);
}
/* El pie de sombra existe para que el marcador de archivo no desaparezca sobre
   el gris medio. Donde no hay marcador no hay nada que rescatar, y el degradado
   se lee como viñeta contra el blanco de abajo. */
.band:has(figcaption)::after{
  content:""; position:absolute; inset:auto 0 0 0; height:38%; pointer-events:none;
  background:linear-gradient(to top, rgba(7,13,21,.72), transparent);
}
.band figcaption{ position:absolute; right:var(--margin); bottom:var(--s2); z-index:2; }
.band .pend{ color:var(--ink-inv-muted); }

@media (min-width:1024px){ .band{ height:58vh; } }

/* La banda de una especialidad es un respiro entre la cabecera y el cuerpo, no
   una segunda portada: a 58vh se comía dos pantallas. Y va centrada, no al 65 %:
   ese encuadre estaba calculado para la lámina de quirófano, que tiene el
   asunto abajo. Las de especialidad lo tienen en medio. */
.band--esp{ height:30vh; min-height:200px; }
.band--esp img{ object-position:50% 50%; }
@media (min-width:1024px){ .band--esp{ height:40vh; } }

/* ── 04 · ÁREAS ──────────────────────────────────────────────────────── */
.index{ border-top:1px solid var(--ink); }
.index li{
  display:flex; align-items:center; gap:var(--s3);
  min-height:84px; padding-block:var(--s3);
  border-bottom:1px solid var(--rule);
  transition:transform 220ms var(--e-micro);
}
.index__n{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--t-mono);
  letter-spacing:.04em; color:var(--accent); flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.index__t{ font-size:clamp(19px,1.9vw,26px); line-height:1.25; letter-spacing:-.01em; }
@media (hover:hover) and (pointer:fine){
  .index li:hover{ transform:translateX(8px); border-color:var(--rule-strong); }
}
.index + .caption{ margin-top:var(--s3); }

/* ── 05 · APOYO TECNOLÓGICO ──────────────────────────────────────────── */
/* Lámina técnica, no galería: las imágenes son de catálogo y de baja
   resolución, así que van pequeñas, todas al mismo tamaño óptico y sobre el
   blanco de la página. El número va en gris y no en acento: esto es inventario,
   no una lista de acciones — el acento se gasta sólo donde se puede pulsar. */
.tech__lead{ margin-bottom:var(--s5); max-width:36ch; }
.tech__list{ border-top:1px solid var(--ink); }
.tech__list li{
  display:grid; grid-template-columns:88px 1fr; gap:var(--s3);
  align-items:start; padding-block:var(--s4);
  border-bottom:1px solid var(--rule);
}
.tech__list img{
  width:88px; height:88px; object-fit:contain;
  /* Sin brightness: bajarlo tiñe de gris el fondo blanco del catálogo y cada
     lámina aparece como un recuadro. El blanco tiene que seguir siendo 255. */
  filter:grayscale(.95) contrast(1.06);
}
.tech__n{
  display:block; margin-bottom:6px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--t-mono);
  letter-spacing:.04em; color:var(--ink-muted); font-variant-numeric:tabular-nums;
}
.tech__t{ font-weight:400; font-size:var(--t-h3); line-height:1.3; letter-spacing:-.01em; }
/* La descripción de cada equipo va plegada: en la retícula sólo queda la
   lámina y el nombre. Diez descripciones abiertas convertían el módulo en
   texto corrido, que es justo lo que no queremos. */
.tech__list details{ min-width:0; }
.tech__list summary{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s3); cursor:pointer; list-style:none;
}
.tech__list summary::-webkit-details-marker{ display:none; }
.tech__list summary > div{ min-width:0; }
.tech__list summary .acc__m{ margin-top:8px; }
.tech__list details > p{
  margin-top:10px; max-width:44ch;
  font-family:"IBM Plex Sans",sans-serif; font-size:14px; line-height:1.6;
  color:var(--ink-muted);
}
@media (hover:hover) and (pointer:fine){
  .tech__list summary:hover .tech__t{ color:var(--brand); }
}
.tech__note{ margin-top:var(--s4); max-width:64ch; }
.tech .link-line{ margin-top:var(--s4); }

/* En pantalla estrecha la lámina se pone encima: 88px de imagen más un título
   de cuatro palabras no caben uno al lado del otro en 360px. */
@media (max-width:559px){
  .tech__list li{ grid-template-columns:1fr; gap:var(--s2); }
}
@media (min-width:768px){
  .tech__list{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--s5); }
  .tech__list li{ grid-template-columns:104px 1fr; }
  .tech__list img{ width:104px; height:104px; }
}
@media (min-width:1024px){
  .tech{ grid-column:3 / 13; }
  .tech__list{ column-gap:var(--s5); }
  .tech__list li{ grid-template-columns:120px 1fr; gap:var(--s3); padding-block:var(--s5); }
  .tech__list img{ width:120px; height:120px; }
}

/* ── 05 · PROCESO ────────────────────────────────────────────────────── */
.proc{ position:relative; padding-left:var(--s4); }
.proc__line{
  position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:var(--accent); transform-origin:top;
  transition:transform 620ms var(--e-line);
}
.js .proc__line{ transform:scaleY(0); }
.js .proc__line.is-in{ transform:scaleY(1); }
.proc__list{ display:flex; flex-direction:column; gap:var(--s4); }
.proc__n{
  display:block;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--t-mono);
  letter-spacing:.04em; color:var(--ink-muted); margin-bottom:4px;
  font-variant-numeric:tabular-nums;
}
.proc__t{ font-size:var(--t-h3); line-height:1.35; }
.proc + .body{ margin-top:var(--s4); max-width:60ch; color:var(--ink-muted); }

@media (min-width:1024px){
  .proc{ padding-left:0; padding-top:var(--s3); }
  .proc__line{ left:0; right:0; top:0; bottom:auto; width:auto; height:1px;
               transform-origin:left; }
  .js .proc__line{ transform:scaleX(0); }
  .js .proc__line.is-in{ transform:scaleX(1); }
  .proc__list{ flex-direction:row; gap:var(--gutter); }
  .proc__list li{ flex:1 1 0; }
}

/* ── 07 · MOMENTO ────────────────────────────────────────────────────── */
.cine{
  position:relative; background:var(--void); color:var(--ink-inv);
  min-height:76vh; display:flex; align-items:center; padding-block:var(--s5);
  overflow:hidden;
}
/* El vídeo recibe el mismo tratamiento que el retrato de la apertura: la
   página tiene un solo lenguaje fotográfico, no dos. */
.cine__v{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.8) contrast(1.06) brightness(.92);
}
/* El velo no es decoración: es lo que mantiene el titular legible pase lo que
   pase en la imagen de debajo. */
.cine__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,13,21,.92), rgba(7,13,21,.62) 48%, rgba(7,13,21,.28)),
    linear-gradient(180deg, rgba(7,13,21,.45), rgba(7,13,21,.08) 44%, rgba(7,13,21,.72)),
    radial-gradient(120% 90% at 78% 18%, rgba(20,48,77,.35), transparent 62%);
}
/* Contenido en movimiento durante más de cinco segundos necesita una parada
   al alcance del usuario. */
.cine__toggle{
  position:absolute; right:var(--margin); bottom:var(--s4); z-index:3;
  min-height:44px; padding:0 2px;
  background:none; border:0; cursor:pointer; color:var(--ink-inv-muted);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--t-mono);
  letter-spacing:.04em; text-transform:uppercase;
  transition:color 180ms var(--e-micro);
}
.cine__toggle::after{
  content:""; position:absolute; left:2px; right:2px; bottom:10px; height:1px;
  background:currentColor; opacity:.4;
}
@media (hover:hover) and (pointer:fine){ .cine__toggle:hover{ color:var(--ink-inv); } }
.cine__inner{
  position:relative; max-width:var(--max); width:100%; margin-inline:auto;
  padding-inline:var(--margin);
}
.cine__t{ max-width:16ch; }
.cine__note{ margin-top:var(--s5); }
.cine__note .pend{ color:var(--ink-inv-muted); }

@media (min-width:1024px){
  .cine{ min-height:88vh; }
  .cine__t{ max-width:13ch; }
}

/* ── 07 · CONSULTA ───────────────────────────────────────────────────── */
/* Antes esto era mono a 12px. Es la dirección a la que tiene que llegar un
   paciente y el teléfono al que tiene que escribir: es acción, no dato de
   sistema. El mono se queda sólo donde hay una cifra que cambia (el reloj). */
.data{ display:grid; gap:var(--s5); }
.data__b .label{ margin-bottom:var(--s2); }
.data__k2{ margin-top:var(--s4); }
.data__v{
  font-family:"IBM Plex Sans",sans-serif; font-size:15px; line-height:1.65;
  color:var(--ink);
}
.data__mail{ position:relative; display:inline-block; padding-bottom:2px; }
.data__mail::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; opacity:.35;
  transition:opacity 180ms var(--e-micro);
}
@media (hover:hover) and (pointer:fine){ .data__mail:hover::after{ opacity:1; } }
.tel{ font-family:"IBM Plex Sans",sans-serif; font-weight:500;
      font-size:clamp(21px,2vw,26px); letter-spacing:.01em;
      font-variant-numeric:tabular-nums; margin-bottom:var(--s2); }
.tel a{ position:relative; display:inline-block; }
.tel a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform 220ms var(--e-micro);
}
@media (hover:hover) and (pointer:fine){ .tel a:hover::after{ transform:scaleX(1); } }
.clock{ font-size:var(--t-h3); letter-spacing:.06em; }

@media (min-width:768px){
  .data{ grid-template-columns:repeat(3,1fr); column-gap:var(--gutter); }
}
@media (min-width:768px){ .data__h{ grid-column:2 / 8; } }
@media (min-width:1024px){ .data,.data__h{ grid-column:3 / 13; } }

/* ── 08 · CIERRE ─────────────────────────────────────────────────────── */
.close{
  position:relative; overflow-x:clip;
  background:var(--void); color:var(--ink-inv);
  padding-block:var(--s5);
}
.close__body{ max-width:22ch; }
/* El cierre es un remate, no una segunda portada: a tamaño `display` completo
   la frase pedía dos tercios de pantalla para dos líneas y un botón. */
.close__t{ text-wrap:balance; font-size:clamp(30px,3.3vw,46px); line-height:1.08; }
.close__act{ margin-top:var(--s3); display:flex; flex-direction:column;
             align-items:flex-start; gap:var(--s3); }
.close__alt{ color:var(--ink-inv-muted); }

@media (min-width:768px){
  /* El salto de línea lo manda el <br> del cierre: un max-width encima partía
     "Confianza para avanzar." en dos y dejaba un huérfano. */
  .close__body{ max-width:none; }
  .close__t{ max-width:none; }
  .close__act{ flex-direction:row; align-items:center; gap:var(--s5); }
}

/* ── COLOFÓN ─────────────────────────────────────────────────────────── */
.foot{
  background:var(--void); color:var(--ink-inv);
  border-top:1px solid var(--rule-inv);
  /* Poco pie. El colofón no es un capítulo: es la firma. Tres columnas cortas
     y una barra, por debajo de un cuarto de pantalla. */
  padding-block:var(--s4) var(--s3);
}
.foot .label--muted,.foot .caption,.foot .pend{ color:var(--ink-inv-muted); }
.foot__grid{ row-gap:var(--s4); }
.foot__col .label{ margin-bottom:var(--s2); }
.foot__list li{ margin-bottom:4px; }
.foot__list li,.foot__col--a .caption{ font-family:"IBM Plex Sans",sans-serif;
  font-size:var(--t-cap); line-height:1.6; color:var(--ink-inv-muted);
  overflow-wrap:anywhere; }
.foot__list a{ color:var(--ink-inv); }
.lockup--foot{ margin-bottom:var(--s2); }
.lockup--foot .lockup__mark{ width:44px; height:44px; }
.foot__col--a .caption + .caption{ margin-top:var(--s1); }

.foot__bar{
  margin-top:var(--s3); padding-top:var(--s2);
  border-top:1px solid var(--rule-inv);
  display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between;
}
.foot__ext{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); }
.foot__c{ color:var(--ink-inv-muted); }

/* En móvil las dos listas van a la par: apiladas, el colofón se comía la
   pantalla entera. */
@media (max-width:767px){
  .foot__col:nth-child(2),.foot__col:nth-child(3){ grid-column:span calc(var(--cols) / 2); }
}
@media (min-width:768px){
  .foot__col{ grid-column:span 4; }
  .foot__col--a{ grid-column:span 8; }
}
@media (min-width:1024px){
  .foot__col--a{ grid-column:1 / 6; }
  .foot__col:nth-child(2){ grid-column:7 / 10; }
  .foot__col:nth-child(3){ grid-column:10 / 13; }
}

/* ── OBJETIVOS TÁCTILES ──────────────────────────────────────────────── */
/* Los enlaces de texto miden 21–27px de alto: correcto con ratón, corto con
   el dedo. Se amplía el área sin mover un píxel visible. */
@media (max-width:767px){
  .foot__list li{ margin-bottom:var(--s2); }
  .lockup::before,.link-line a::before,.mono a::before,
  .foot__list a::before,.foot__ext a::before{
    content:""; position:absolute; left:0; right:0; top:50%;
    height:44px; transform:translateY(-50%);
  }
  .lockup{ position:relative; }
  /* La barra fija tapa el final del colofón: se reserva su alto, no más. */
  .foot{ padding-bottom:calc(var(--s2) + 60px); }
}

/* ── ESTADOS ─────────────────────────────────────────────────────────── */
/* Un enlace pendiente no puede verse igual que uno que funciona. */
a[aria-disabled="true"]{ color:var(--ink-muted); cursor:default; }
.foot a[aria-disabled="true"],.panel a[aria-disabled="true"]{ color:var(--ink-inv-muted); }
a[aria-disabled="true"]::after{ display:none; }

/* ── MOTION ──────────────────────────────────────────────────────────── */
.js [data-reveal]{ opacity:0; transform:translateY(14px);
  transition:opacity 460ms var(--e-enter), transform 460ms var(--e-enter); }
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* La apertura es EL momento de la página: el titular entra por líneas, como
   una cortina, y no con el mismo desvanecido que un pie de foto. */
.js .hero__t .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.js .hero__t .line > span{ display:block; transform:translateY(105%);
  transition:transform 900ms var(--e-enter); }
.js .hero.is-in .hero__t .line:nth-child(1) > span{ transition-delay:120ms; }
.js .hero.is-in .hero__t .line:nth-child(2) > span{ transition-delay:200ms; }
.js .hero.is-in .hero__t .line:nth-child(3) > span{ transition-delay:280ms; }
.js .hero.is-in .hero__t .line > span{ transform:translateY(0); }

.js .hero__ch,.js .hero__sig,.js .hero__act,.js .proof,.js .hero__prov{
  opacity:0; transform:translateY(12px);
  transition:opacity 620ms var(--e-enter), transform 620ms var(--e-enter); }
.js .hero.is-in .hero__ch{ transition-delay:60ms; }
.js .hero.is-in .hero__sig{ transition-delay:420ms; }
.js .hero.is-in .hero__act{ transition-delay:520ms; }
.js .hero.is-in .proof{ transition-delay:620ms; }
.js .hero.is-in .hero__prov{ transition-delay:900ms; }
.js .hero.is-in .hero__ch,.js .hero.is-in .hero__sig,
.js .hero.is-in .hero__act,.js .hero.is-in .proof,
.js .hero.is-in .hero__prov{ opacity:1; transform:none; }

/* La imagen entra desde el negro: escala y desenfoque que se resuelven. El ojo
   lee un enfoque, no dos objetos superpuestos. */
.js .hero__media img{ transform:scale(1.08); filter:contrast(1.04) saturate(.92) brightness(.4) blur(8px);
  transition:transform 1400ms var(--e-enter), filter 1200ms var(--e-enter); }
.js .hero.is-in .hero__media img{ transform:none;
  filter:contrast(1.04) saturate(.92) brightness(.7) blur(0); }

/* Cinco elementos que aparecen a la vez son un bloque; escalonados se leen. */
.js .rows li:nth-child(2),.js .index li:nth-child(2),.js .proc__list li:nth-child(2){ transition-delay:60ms; }
.js .rows li:nth-child(3),.js .index li:nth-child(3),.js .proc__list li:nth-child(3){ transition-delay:120ms; }
.js .index li:nth-child(4),.js .proc__list li:nth-child(4){ transition-delay:180ms; }
.js .proc__list li:nth-child(5){ transition-delay:240ms; }
.js .facts > div:nth-child(2){ transition-delay:40ms; }
.js .facts > div:nth-child(3){ transition-delay:80ms; }

/* Paralaje de la apertura, sólo donde el navegador lo resuelve en el
   compositor. Sin soporte, no hay paralaje y no pasa nada. */
@supports (animation-timeline:view()){
  @media (min-width:1024px) and (prefers-reduced-motion:no-preference){
    .hero__media img{ animation:hero-par linear both; animation-timeline:view();
                      animation-range:contain 0% exit 100%; }
    @keyframes hero-par{ to{ translate:0 8%; } }
  }
}

/* ── CABECERA DE PÁGINA INTERIOR ─────────────────────────────────────── */
/* La portada abre con pantalla completa en negro. Una página interior no: abre
   clara, corta y con la miga de pan puesta. Que las dos no se parezcan es
   justamente lo que le dice al visitante que se ha movido de sitio. */
.top{
  position:relative; overflow-x:clip;
  background:var(--surface); color:var(--ink);
  padding-block:calc(var(--header-h) + var(--s6)) var(--s6);
  /* Sin filete de cierre. Una raya a todo lo ancho entre la cabecera y el
     cuerpo no separa capitulos: separa diapositivas. Lo que dice que has
     cambiado de bloque es el cambio de tono o la lamina, no una linea. */
}
.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-bottom:var(--s4);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--t-mono);
  letter-spacing:.06em; color:var(--ink-muted);
}
.crumb a{ color:var(--ink-muted); }
.crumb span[aria-current]{ color:var(--ink); }
.crumb i{ font-style:normal; color:var(--rule-strong); }
@media (hover:hover) and (pointer:fine){ .crumb a:hover{ color:var(--accent); } }
/* El logotipo del cliente, sólo en la página de la IPS. Corto y con aire:
   es una marca, no una ilustración, y el archivo entregado no da para más
   ancho sin ablandarse. */
.top__marca{ display:block; width:152px; height:auto; margin-bottom:var(--s3); }
@media (min-width:1024px){ .top__marca{ width:176px; } }

.top__t{ margin-bottom:var(--s3); max-width:14ch; }
.top__s{ max-width:44ch; color:var(--ink-muted); }
.top__act{ margin-top:var(--s5); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4); }
.top .ghost{ color:var(--ink); }
@media (min-width:1024px){
  .top{ padding-block:calc(var(--header-h) + var(--s5)) var(--s6); }
  .top__b{ grid-column:3 / 11; }
  .top .mark{ grid-column:1 / 2; }
}

/* ── MÓDULO BREVE ────────────────────────────────────────────────────── */
/* En la portada, cada tema se presenta en corto y se va a su propia página.
   Nadie decide un neurocirujano leyendo la home: decide entrando. */
.brief{ display:grid; gap:var(--s4); }
/* El retrato va recortado en el propio archivo —fondo a blanco, color de vuelta
   sólo donde hay color— así que aquí no lleva ni recuadro ni filtro: un brillo
   por debajo de 1 volvería gris ese blanco y devolvería el marco. */
.brief__fig{ position:relative; }
.brief__fig img{
  width:100%; height:auto; display:block;
  transform-origin:50% 100%;
  transition:transform 700ms var(--e-enter);
}

/* Y crece según se baja, desde los pies: el doctor se va poniendo de pie
   mientras uno lee. Va en `scale`, no en `transform`, para no pisar el
   acercamiento del hover. */
@supports (animation-timeline:view()){
  @media (min-width:768px) and (prefers-reduced-motion:no-preference){
    .brief__fig img{
      animation:retrato-crece linear both;
      animation-timeline:view();
      animation-range:entry 20% exit 45%;
    }
    @keyframes retrato-crece{ from{ scale:.86; } to{ scale:1.06; } }
  }
}
.brief__n{ margin-bottom:var(--s2); }
.brief__b .lead{ margin-bottom:var(--s3); }
@media (hover:hover) and (pointer:fine){ .brief:hover .brief__fig img{ transform:scale(1.03); } }
@media (min-width:768px){
  .brief{ grid-template-columns:minmax(0,300px) 1fr; gap:var(--s5); align-items:center; }
}
@media (min-width:1024px){
  /* Grande: el retrato es el argumento, no una ilustración de apoyo. Ocupa
     hasta la columna 13 porque con la medida de lectura normal el texto de al
     lado se queda en cuatro palabras por línea. */
  .brief{ grid-column:3 / 13; grid-template-columns:minmax(0,380px) 1fr; gap:var(--s6); }
  .brief__b{ padding-bottom:var(--s5); }
}

/* ── FICHAS ──────────────────────────────────────────────────────────── */
/* Tres columnas por dos filas. Sin recuadro, sin sombra y sin fondo: lo que
   agrupa cada ficha es su propia imagen y el aire de alrededor, no una caja.
   Todas las imágenes comparten marco 3:2 para que la parrilla no baile. */
.cards{ display:grid; gap:var(--s5) var(--gutter); }
.cards > li > *{ display:block; }
.cards figure{
  position:relative; overflow:hidden; aspect-ratio:3 / 2;
  margin-bottom:var(--s3); background:var(--surface-alt);
}
.cards img{
  width:100%; height:100%; object-fit:cover;
  /* En color. El blanco y negro las unificaba, pero a costa de apagar la
     página entera: una web de medicina en escala de grises se lee como un
     archivo. Lo que las hace serie ahora es el contraste común y el grano,
     no quitarles el color. */
  filter:saturate(.92) contrast(1.06);
  transition:transform 700ms var(--e-enter), filter 400ms var(--e-micro);
}
/* Grano. No es decoración: es lo que le da una misma piel a imágenes de
   procedencias distintas, y de paso rompe la planitud del degradado digital.
   Va sobre la imagen y sólo sobre la imagen. */
.cards figure::after,.band::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
}
.band::before{ opacity:.10; }
.cards__n{
  display:block; margin-bottom:6px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--t-mono);
  letter-spacing:.04em; color:var(--ink-muted); font-variant-numeric:tabular-nums;
}
.cards__t{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2);
  font-size:clamp(19px,1.8vw,24px); line-height:1.25; letter-spacing:-.01em;
}
.cards__go{ flex:0 0 auto; color:var(--ink-muted); transition:transform 260ms var(--e-micro); }
.cards__d{
  margin-top:var(--s2); max-width:40ch;
  font-family:"IBM Plex Sans",sans-serif; font-size:14px; line-height:1.6;
  color:var(--ink-muted);
}
.cards__x{ opacity:.55; }
@media (hover:hover) and (pointer:fine){
  .cards a:hover img{ transform:scale(1.05); filter:saturate(1) contrast(1.06) brightness(1.04); }
  .cards a:hover .cards__go{ transform:translateX(6px); color:var(--accent); }
}
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .cards{ grid-template-columns:repeat(3,1fr); gap:var(--s5) var(--gutter); } }
.cards + .caption{ margin-top:var(--s5); }

/* ── ÁREAS · NOMBRE Y UN MÁS ─────────────────────────────────────────── */
/* No es una lista: son cuatro nombres grandes con un signo más. Sin filetes
   entre ellos —el filete es lo que convierte cualquier cosa en lista— y en dos
   columnas, para que se lean como opciones y no como índice. */
.plus{ display:grid; gap:var(--s4) var(--s5); }
.plus summary{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding-block:var(--s2); cursor:pointer; list-style:none;
}
.plus summary::-webkit-details-marker{ display:none; }
.plus__t{
  font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:clamp(21px,2.1vw,29px); line-height:1.2; letter-spacing:-.015em;
  transition:color 200ms var(--e-micro);
}
.plus__m{
  position:relative; flex:0 0 auto; width:16px; height:16px; align-self:center;
  color:var(--accent); transition:transform 320ms var(--e-enter);
}
.plus__m::before,.plus__m::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1px; background:currentColor;
}
.plus__m::after{ transform:rotate(90deg); }
.plus details[open] .plus__m,.plus > details[open] .plus__m{ transform:rotate(135deg); }
.plus__b{
  padding-bottom:var(--s3); max-width:44ch;
  font-family:"IBM Plex Sans",sans-serif; font-size:14px; line-height:1.7;
  color:var(--ink-muted);
}
.plus__b p + p{ margin-top:var(--s2); }
/* Enlace dentro del párrafo. El filete del sistema —.link-line a— es
   inline-block y no parte por líneas: dentro de un texto corrido se lleva la
   última palabra a un renglón suelto. Aquí manda el subrayado nativo, que sí
   corta bien. Y tiene que verse: `a{color:inherit}` deja el enlace del mismo
   color que la frase, y un enlace de WhatsApp que nadie distingue del texto
   es un enlace que nadie pulsa. */
.plus__b a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color 180ms var(--e-micro), text-decoration-color 180ms var(--e-micro);
}
@media (hover:hover) and (pointer:fine){
  .plus__b a:hover{ color:var(--accent); text-decoration-color:var(--accent); }
}
@media (hover:hover) and (pointer:fine){
  .plus summary:hover .plus__t{ color:var(--brand); }
}
@media (min-width:768px){ .plus{ grid-template-columns:1fr 1fr; } }

/* ── 03 · EL DESCENSO ────────────────────────────────────────────────── */
/* Cuarto bloque oscuro de la página y a propósito: la nota está en index.html.
   Lámina anclada, texto que pasa por delante. El relevo entre estaciones va en
   `clip-path` y no en opacidad — un fundido dice «he cambiado de foto», un
   barrido de arriba abajo dice «la cámara sigue bajando», que es la única
   razón por la que este módulo existe. */
.desc{
  position:relative; background:var(--void); color:var(--ink-inv);
  padding-top:var(--s5);
}
.desc .mark__l{ color:var(--ink-inv-muted); }
.desc .mark__r{ background:var(--rule-inv-strong); }
.desc .caption{ color:var(--ink-inv-muted); }
.desc__head .sec__t{ margin-bottom:0; }
.desc__foot{ padding-block:var(--s4) var(--s5); }

.desc__track{ position:relative; margin-top:var(--s2); }
/* La raíz se espesa en tres tramos: cada par cubre un tercio del descenso. Es
   el punto más denso de todo el sitio, que es exactamente donde debe estar. */
.desc__track > .spine{ bottom:auto; height:34%; }
.desc__track > .spine[data-third="1"]{ top:33%; }
.desc__track > .spine[data-third="2"]{ top:66%; }

.desc__stage{
  position:sticky; top:0; height:42dvh; overflow:hidden;
  background:var(--void-2); z-index:1;
}
/* La escena: un lienzo que se rebobina con el scroll y un póster debajo que es
   lo que ve quien no descarga la secuencia. Los dos van a `cover`: el encuadre
   se recorta por los lados, nunca se deforma. */
.desc__lienzo,.desc__poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 42%; display:block;
}
.desc__lienzo{ opacity:0; transition:opacity 600ms var(--e-enter); }
.desc.is-secuencia .desc__lienzo{ opacity:1; }
.desc.is-secuencia .desc__poster{ opacity:0; }


/* En móvil la lámina ocupa la banda de arriba, así que el texto arranca justo
   por debajo: centrarlo dejaba el título de la estación escondido detrás de la
   imagen justo cuando esa estación se activaba. */
.desc__step{
  min-height:86dvh; display:flex; flex-direction:column; justify-content:flex-start;
  padding:44dvh var(--margin) var(--s6);
  max-width:var(--max); margin-inline:auto;
}
.desc__n{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--t-mono);
  letter-spacing:.04em; color:var(--accent); font-variant-numeric:tabular-nums;
  margin-bottom:var(--s2);
}
.desc__t{
  font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:clamp(30px,4.4vw,60px); line-height:1.05; letter-spacing:-.02em;
  margin-bottom:var(--s4);
}
/* Una sola línea bajo el título de la estación. «No invasivo» hay que decirlo
   además de dibujarlo: la imagen enseña una aguja, y una aguja sin contexto
   se lee como lo contrario de lo que es. */
.desc__nota{
  font-family:"IBM Plex Sans",sans-serif; font-size:var(--t-cap); line-height:1.6;
  color:var(--ink-inv-muted); max-width:34ch; margin:calc(var(--s2) * -1) 0 var(--s4);
}
/* El remate: el recorrido que le falta a la secuencia para llegar al final.
   Va vacío a propósito. La lámina sigue pegada arriba —los dos están en la
   misma fila de la retícula— y el zoom a los puntos de entrada ocurre aquí,
   con la columna de texto en silencio.

   24dvh: el acercamiento es un empujón, no una estación más, y son cinco
   fotogramas.
   Sale a unos treinta píxeles por fotograma, el mismo ritmo que el resto del
   descenso. Con el doble de recorrido la sección pedía media pantalla extra
   de scroll para contar algo que ya estaba contado, y eso no se siente como
   detalle: se siente como cuesta. */
.desc__coda{ min-height:24dvh; }

/* Cada procedimiento se abre y se explica. El nombre de un procedimiento no
   le dice nada a quien no es médico —«neurólisis percutánea» no es una
   respuesta, es otra pregunta— y la lista sola dejaba al paciente igual de
   perdido que antes. Cerrado se lee el índice de un vistazo; abierto, en
   castellano. Se usa <details> y no JavaScript: funciona sin scripts, se abre
   con el teclado y el buscador ve el texto igual. */
.desc__list{ border-top:1px solid var(--rule-inv); }
.desc__list li{
  border-bottom:1px solid var(--rule-inv); padding-block:var(--s2);
  font-family:"IBM Plex Sans",sans-serif; font-size:var(--t-b); line-height:1.5;
  color:var(--ink-inv);
}
.desc__list summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  cursor:pointer; list-style:none;
}
.desc__list summary::-webkit-details-marker{ display:none; }
.desc__q{ transition:color 200ms var(--e-micro); }
.desc__m{
  position:relative; flex:0 0 auto; width:13px; height:13px;
  color:var(--accent); transition:transform 320ms var(--e-enter);
}
.desc__m::before,.desc__m::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1px; background:currentColor;
}
.desc__m::after{ transform:rotate(90deg); }
.desc__list details[open] .desc__m{ transform:rotate(135deg); }
.desc__d{
  padding-top:var(--s2); max-width:46ch;
  font-size:var(--t-cap); line-height:1.7; color:var(--ink-inv-muted);
}
@media (hover:hover) and (pointer:fine){
  .desc__list summary:hover .desc__q{ color:var(--accent); }
}
@media (prefers-reduced-motion:reduce){ .desc__m{ transition:none; } }

@media (min-width:1024px){
  /* La lámina a la derecha y a sangre, como la apertura: las dos veces que la
     página enseña una imagen a pantalla completa lo hace por el mismo lado. */
  .desc__track{ display:grid; grid-template-columns:1fr 46%; align-items:start; }
  /* `align-items:start` no es cosmético: sin él la celda estira el elemento a
     la altura de la fila y `sticky` deja de tener recorrido donde pegarse. */
  .desc__stage{ grid-column:2; grid-row:1; height:100dvh; }
  .desc__steps{ grid-column:1; grid-row:1; }
  .desc__step{
    /* 84dvh y no 100: con la pantalla entera, centrar el texto dejaba 180px
       muertos por encima de cada estación. Sigue siendo una estación por
       pantalla, sólo que sin el colchón. */
    min-height:74dvh; justify-content:center;
    /* El texto se alinea con el margen de la retícula, no con el canto de su
       columna. Sin el max() por debajo de --max el cálculo sale negativo y en
       un portátil de 1024 el título quedaba pegado al borde. */
    padding:var(--s6) var(--s7) var(--s6)
            max(var(--margin), calc((100vw - var(--max)) / 2 + var(--margin)));
  }
  .desc__list{ max-width:34ch; }
}

/* Sin movimiento: se desancla y quedan tres bloques completos, uno detrás de
   otro. El contenido no depende en ningún momento de la animación. */
@media (prefers-reduced-motion:reduce){
  .desc__stage{ position:static; height:auto; }
  .desc__lienzo{ display:none; }
  .desc__poster{ position:static; height:auto; aspect-ratio:4 / 5; }
  .desc__step{ min-height:0; }
  .desc__track{ display:block; }
}

/* Atado al scroll. Hasta aquí el barrido corría por reloj: se disparaba al
   cruzar la mitad de la pantalla y luego seguía 900ms por su cuenta aunque uno
   parase de bajar. Con la línea de tiempo del propio recorrido, el corte avanza
   exactamente lo que avanza la mano — que es la única razón por la que este
   módulo existe. Donde el navegador no lo soporte se queda el relevo por
   umbral de más arriba: correcto, sólo que no tan fino. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .desc__track{ view-timeline:--descenso block; }

    /* Las estaciones llegan y se van, escalonadas. Antes aparecían una vez y
       ahí se quedaban las tres, que es lo que hacía que el módulo se leyera
       como diapositivas. */
    .desc__step{ view-timeline:--estacion block; }
    .desc__step > *{ animation:desc-estacion linear both; animation-timeline:--estacion; }
    .desc__n{ animation-range:cover 12% cover 88%; }
    .desc__t{ animation-range:cover 15% cover 85%; }
    .desc__list{ animation-range:cover 18% cover 82%; }
  }
}

@keyframes desc-estacion{
  from{ opacity:0; transform:translateY(26px); }
  26%,74%{ opacity:1; transform:none; }
  to{ opacity:0; transform:translateY(-26px); }
}

/* ── ACORDEÓN ────────────────────────────────────────────────────────── */
/* Nadie llega a esta página a leer. El texto largo se guarda detrás de su
   propia pregunta y sólo sale si alguien lo pide. <details> nativo: cero JS,
   funciona sin script y el buscador lo indexa igual. */
.acc{ border-top:1px solid var(--ink); }
.acc__i{ border-bottom:1px solid var(--rule); }
.acc__i summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding-block:var(--s3); cursor:pointer; list-style:none;
}
.acc__i summary::-webkit-details-marker{ display:none; }
.acc__t{
  font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:clamp(17px,1.5vw,21px); line-height:1.3; letter-spacing:-.01em;
}
/* El indicador es una flecha hecha con dos filetes de 1px: la misma familia que
   el resto del sistema. Un icono aquí sería el primero de la página. */
.acc__m{
  flex:0 0 auto; width:11px; height:11px; margin-bottom:5px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); color:var(--ink-muted);
  transition:transform 300ms var(--e-micro), margin 300ms var(--e-micro);
}
.acc__i[open] .acc__m{ transform:rotate(-135deg); margin-bottom:0; margin-top:5px; }
.acc__b{
  padding-bottom:var(--s3); max-width:62ch;
  font-family:"IBM Plex Sans",sans-serif; font-size:15px; line-height:1.7;
  color:var(--ink-muted);
}
.acc__b p + p{ margin-top:var(--s2); }
@media (hover:hover) and (pointer:fine){
  .acc__i summary:hover .acc__t{ color:var(--brand); }
}
@media (min-width:1024px){
  /* Nada de var(--s5) aquí: siete preguntas cerradas se comían la pantalla
     entera y el bloque se leía como un menú de restaurante. */
  .acc__i summary{ padding-block:var(--s3); }
}

/* Apertura suave donde el motor la resuelve. Sin soporte, abre y cierra de
   golpe, que es exactamente lo que hace un <details> de toda la vida. */
@supports selector(::details-content){
  @media (prefers-reduced-motion:no-preference){
    .acc__i::details-content,
    .tech__list details::details-content{
      block-size:0; overflow:hidden;
      transition:block-size 340ms var(--e-enter), content-visibility 340ms allow-discrete;
    }
    .acc__i[open]::details-content,
    .tech__list details[open]::details-content{ block-size:auto; }
  }
}

/* ── BANDA DE ACCIÓN ─────────────────────────────────────────────────── */
/* Entre módulo y módulo, una franja oscura con una sola pregunta y un botón.
   Corta el blanco, da un punto de salida a quien ya se decidió y evita que la
   única acción viva al final de la página. */
.act{ position:relative; overflow-x:clip;
      background:var(--void); color:var(--ink-inv); padding-block:var(--s5); }
.act__in{ display:flex; flex-direction:column; gap:var(--s3); align-items:flex-start; }
.act__t{
  font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:clamp(21px,2.4vw,32px); line-height:1.2; letter-spacing:-.02em;
  max-width:22ch;
}
.act__t em{ font-style:normal; color:var(--accent); }
/* Dos salidas, no una: quien escribe y quien prefiere llamar. El teléfono va
   en el gris del bloque y no en el azul del acento — el acento es del botón,
   y si lo llevan los dos deja de señalar nada. */
.act__vias{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4); }
.act__tel{ font-size:var(--t-mono); letter-spacing:.06em; color:var(--ink-inv-muted); }
.act__tel a{ color:var(--ink-inv); }
@media (hover:hover) and (pointer:fine){ .act__tel a:hover{ color:var(--accent); } }
@media (min-width:768px){
  .act__in{ flex-direction:row; align-items:center; justify-content:space-between;
            gap:var(--s5); }
  .act__t{ max-width:32ch; }
}
@media (min-width:1024px){ .act{ padding-block:var(--s6); } }

/* ── EL EQUIPO ───────────────────────────────────────────────────────── */
/* Red de especialistas alrededor de la consulta. Nombre de la especialidad y
   una línea de función: ni un párrafo. Las que aún no están confirmadas se
   quedan a la vista como pendientes, no se rellenan de relleno. */
.team{ border-top:1px solid var(--ink); }
.team li{ border-bottom:1px solid var(--rule); }
.team a,.team .team__x{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s3);
  align-items:baseline; padding-block:var(--s4);
  transition:transform 220ms var(--e-micro);
}
.team__n{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--t-mono);
  letter-spacing:.04em; color:var(--ink-muted); font-variant-numeric:tabular-nums;
}
.team__t{ font-size:clamp(19px,1.9vw,26px); line-height:1.25; letter-spacing:-.01em; }
.team__r{
  grid-column:2; font-family:"IBM Plex Sans",sans-serif; font-size:14px;
  line-height:1.55; color:var(--ink-muted); max-width:46ch;
}
.team .team__x{ opacity:.55; }
@media (hover:hover) and (pointer:fine){
  .team li:has(a):hover{ border-color:var(--rule-strong); }
  .team li:hover a{ transform:translateX(10px); }
}

/* ── FORMACIÓN CONTINUADA ────────────────────────────────────────────── */
/* Cuarenta y tres registros seguidos. Lo que los hace recorribles no es
   plegarlos —el cliente los quiere todos y tiene razón: la lista larga dice
   lo que no dice ninguna frase— sino sacar el año fuera del texto. Con el año
   en su propia columna la página se lee saltando de década en década, y quien
   quiera el detalle baja a la línea. Sin tarjetas: son datos, no productos. */
.cur{ margin-top:var(--s6); border-top:1px solid var(--ink); }
.cur__a{ padding-block:var(--s4); border-bottom:1px solid var(--rule); }

.cur__y{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:400;
  font-size:var(--t-mono); letter-spacing:.10em; color:var(--ink-muted);
  margin-bottom:var(--s3);
}

.cur__l{ display:grid; gap:var(--s3); }
/* Expositor, conferencista, profesor. Tres renglones de veinticinco en los que
   el doctor no estaba sentado en la sala. Esa es la diferencia que dice algo de
   una trayectoria, asi que se marca — y se marca con tipografia, no con una
   pastilla de color: es un dato, no una etiqueta de producto. */
.cur__rol{
  display:block; margin-bottom:4px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--t-lab);
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand);
}
.cur__t{
  display:block; font-family:"IBM Plex Sans",sans-serif; font-size:15px;
  line-height:1.45; color:var(--ink);
  /* Sin tope, un título de curso se estira a doce palabras por línea y deja
     de leerse. */
  max-width:62ch;
}
.cur__s{
  display:block; margin-top:4px; font-family:"IBM Plex Sans",sans-serif;
  font-size:var(--t-cap); line-height:1.4; color:var(--ink-muted);
  max-width:62ch;
}

/* El año se sale a su propia columna y se queda arriba mientras pasan los
   cursos de ese año: en 2023, que son nueve, si el año no acompaña se pierde
   a media lista de qué año se está hablando. */
@media (min-width:768px){
  /* Se alinea con el cuerpo de texto de la seccion, no con el ancho total:
     la lista es lectura, no una tabla de datos. */
  .cur{ grid-column:2 / 8; }
  .cur__a{ display:grid; grid-template-columns:88px 1fr; gap:var(--gutter); }
  .cur__y{ margin-bottom:0; position:sticky; top:calc(var(--header-h) + var(--s3)); }
}
/* Las dos anchuras van juntas y en orden: declarar la de 1024 arriba con el
   resto de la rejilla no servía —la de 768 vive más abajo en el fichero y con
   la misma especificidad la pisaba también en pantalla ancha. */
@media (min-width:1024px){ .cur{ grid-column:3 / 11; } }

/* ── RAÍZ LATERAL ────────────────────────────────────────────────────── */
/* El cuerpo blanco deja libres los márgenes. Ahí baja un sistema de raíces de
   1px por lado: raíz principal que serpea, ramas que salen hacia el borde y
   se subdividen, y una densidad que sube módulo a módulo — cuanto más abajo va
   uno en la página, más raíz hay. Los trazos vienen de tools/raices.py.
   La raíz se dibuja al ritmo del scroll y al final del cuerpo desemboca en el
   símbolo de marca. Los bloques oscuros la interrumpen: son capítulo.
   Sin scroll-driven animations la raíz simplemente está dibujada. */
.spine-defs{ position:absolute; width:0; height:0; overflow:hidden; }

.spine{
  display:none; position:absolute; top:0; bottom:0; width:var(--spine-w);
  z-index:0; pointer-events:none;
  /* El destello se mueve con transform, y un transform sí alarga el area
     scrollable del documento: sin recortar aquí, el destello del cierre añadía
     su propia altura por debajo del colofón y la página terminaba en un hueco
     oscuro vacío. El margen deja respirar al halo sin devolver el hueco. */
  overflow:clip; overflow-clip-margin:40px;
}
/* El borde interior de la banda cae justo donde empieza el texto; lo que sobra
   se sale por el canto de la página y lo recorta la sección. Una raíz cortada
   por el borde es lo que hace una raíz contra un muro. */
.spine--l{ left:calc(max(0px, (100% - var(--max)) / 2) + var(--margin) - var(--spine-w)); --tip:76%; }
.spine--r{ right:calc(max(0px, (100% - var(--max)) / 2) + var(--margin) - var(--spine-w)); --tip:24%; }

.spine svg{ width:100%; height:100%; fill:none; stroke:var(--rule-strong); }
/* Sobre negro la raíz sigue, en blanco: es el mismo sistema, no otro. Encima
   de fotografía baja a la mitad — una línea a plena fuerza sobre una imagen se
   lee como un arañazo, no como dibujo. */
.spine--inv svg{ stroke:var(--rule-inv-strong); }
.spine--ghost svg{ stroke:rgba(255,255,255,.16); }
.spine--inv i,.spine--ghost i{
  background:radial-gradient(circle 26px at var(--tip) 26px,
             rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
}
/* El grosor y la opacidad de cada orden viajan como atributo en el propio
   trazo: si se declaran aquí, el CSS gana y la raíz pierde el afinado. */
.spine--r svg{ transform:scaleX(-1); }

/* El margen izquierdo no es raíz: es columna vertebral. Vértebra de perfil de
   assets/columna.svg repetida en vertical, y el cuerpo vertebral centrado en
   --tip para que el destello baje por el mismo eje. En máscara y no como
   imagen: así el color sigue siendo el del sistema y cambia sobre negro.
   El módulo mide 84x850 en píxeles fijos —una vértebra estirada deja de ser
   una vértebra—, de modo que la altura de la sección no lo deforma: sólo
   caben más o menos. Y no es una vértebra: son treinta y cuatro montadas sobre
   una onda entera y giradas con la tangente, porque una columna a plomo no
   existe. Los trazos vienen de tools/columna.py.
   La fase la escribe main.js en --sy: cada tramo es un elemento distinto y sin
   corregir el desfase la onda saltaría en cada costura entre secciones. */
.spine--l svg{ display:none; }
.spine--l::before{
  content:""; position:absolute; top:0; bottom:0;
  left:calc(var(--tip) - 53px); width:84px;
  background:var(--bone);
  -webkit-mask:url(assets/columna.svg) repeat-y 0 calc(-1 * var(--sy, 0px)) / 84px 850px;
          mask:url(assets/columna.svg) repeat-y 0 calc(-1 * var(--sy, 0px)) / 84px 850px;
}
.spine--l.spine--inv::before{ background:var(--bone-inv); }
.spine--l.spine--ghost::before{ background:var(--bone-ghost); }

/* El destello. Ocupa toda la altura del módulo y dibuja la luz en su borde
   superior; moverlo un 100% en Y lo lleva de arriba abajo del módulo, y eso lo
   resuelve el compositor. Es un halo, no un punto: la raíz serpea y un punto
   duro se despegaría del trazo. Azul de marca, nunca el acento. */
.spine i{
  display:none; position:absolute; left:0; right:0; top:-26px; height:100%;
  background:radial-gradient(circle 26px at var(--tip) 26px,
             rgba(20,48,77,.20), rgba(20,48,77,0) 70%);
  background-repeat:no-repeat;
}

/* Terminal: la raíz del último módulo claro desemboca en el símbolo. Se usa
   tal cual, en máscara y a proporción — no se redibuja ni se reinterpreta. */
/* Sobre el cierre negro el símbolo va en claro: el azul de marca ahí no se ve. */
.spine--end.spine--inv::after{ background:var(--ink-inv); }
.spine--end::after{
  content:""; position:absolute; left:var(--tip); bottom:var(--s6);
  width:40px; height:40px; margin-left:-20px; opacity:0;
  background:var(--brand);
  -webkit-mask:url(assets/simbolo-claro.png) no-repeat center/contain;
          mask:url(assets/simbolo-claro.png) no-repeat center/contain;
}

/* Sólo donde hay margen que aprovechar. Por debajo de 1024px el margen es de
   20-32px y la página no tiene laterales que llenar. */
@media (min-width:1024px){ .spine{ display:block; } }

@supports (animation-timeline:view()){
  @media (min-width:1024px) and (prefers-reduced-motion:no-preference){
    /* Una sola línea de tiempo por módulo: raíz, destello y símbolo van clavados. */
    .spine{ view-timeline-name:--spine; }
    .spine svg,.spine--l::before,.spine i,.spine--end::after{
      animation:linear both; animation-timeline:--spine;
      animation-range:entry 50% exit 50%;
    }
    .spine svg,.spine--l::before{ animation-name:spine-draw; }
    .spine i{ display:block; animation-name:spine-spark; }
    .spine--end::after{ animation-name:spine-seed; }

    @keyframes spine-draw{
      from{ clip-path:inset(0 0 100% 0); }
      to  { clip-path:inset(0 0 0 0); }
    }
    @keyframes spine-spark{
      0%  { transform:translateY(0);    opacity:0; }
      7%  { opacity:1; }
      93% { opacity:1; }
      100%{ transform:translateY(100%); opacity:0; }
    }
    @keyframes spine-seed{
      0%,72%{ opacity:0; }
      100%  { opacity:1; }
    }
  }
}
/* Sin línea de tiempo el símbolo no puede quedarse invisible para siempre. */
@supports not (animation-timeline:view()){ .spine--end::after{ opacity:1; } }

@media (prefers-reduced-motion:reduce){
  .js [data-reveal],
  .js .hero__ch,.js .hero__sig,.js .hero__act,.js .proof,.js .hero__prov{
    transform:none !important; transition:opacity 140ms linear !important;
    transition-delay:0ms !important; }
  .js .hero__t .line > span{ transform:none !important; transition:none !important; }
  .js .hero__media img{ transform:none !important;
    filter:contrast(1.04) saturate(.92) brightness(.7) !important;
    transition:none !important; }
  .js .proc__line{ transform:none !important; transition:none !important; }
  .header,.dock{ transition:none; }
  .header.is-hidden{ transform:none; }
  .dock{ transform:translateY(0); }
  .cta,.cta::before,.cta::after,
  .nav a::after,.ghost::after,.link-line a::after,.foot__list a::after,
  .foot__ext a::after,.mono a::after,.rows a,.index li,
  .panel__close{ transition:none !important; }
  .cta:active,.cta:hover::after,.burger:active,.panel__close:active,.rows a:active,
  .rows li:hover a,.rows li:hover .rows__go,.index li:hover{ transform:none !important; }
  .spine--end::after{ opacity:1 !important; }
  *{ scroll-behavior:auto !important; }
}


/* ── PÁGINAS LEGALES ─────────────────────────────────────────────────── */
/* Texto largo, seguido y para leer entero: una sola columna estrecha, sin
   plegables. Un aviso legal que hay que ir abriendo por partes no se lee, y
   éstos son los dos documentos del sitio que alguien puede necesitar imprimir
   o citar. La única concesión al estilo de la casa es la tipografía. */
.legal{ max-width:68ch; }
.legal h2{
  font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:clamp(19px,1.7vw,23px); line-height:1.25; letter-spacing:-.01em;
  margin-top:var(--s5); margin-bottom:var(--s2);
}
.legal h2:first-of-type{ margin-top:var(--s4); }
.legal p{
  font-family:"IBM Plex Sans",sans-serif; font-size:var(--t-b); line-height:1.7;
  color:var(--ink-muted);
}
.legal p + p{ margin-top:var(--s2); }
.legal p strong{ color:var(--ink); font-weight:500; }
.legal ul{ margin-top:var(--s2); }
.legal li{
  font-family:"IBM Plex Sans",sans-serif; font-size:var(--t-b); line-height:1.7;
  color:var(--ink-muted); padding-left:1.1em; text-indent:-1.1em; margin-bottom:6px;
}
.legal li::before{ content:"— "; color:var(--rule-strong); }
.legal .facts{ margin-bottom:var(--s5); }