/* ============================================================================
   ZEYNA Clinical Research — Sistema de diseño
   Paleta muestreada del logotipo oficial: grafito #4A5158 · azul #1E8AD6
   ========================================================================== */

@import url('../fonts/fonts.css');

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* Tinta: negros con matiz azul, nunca gris puro — es lo que da profundidad */
  --ink-950:#04101E;
  --ink-900:#071A2E;
  --ink-800:#0B2540;
  --ink-700:#103352;
  --ink-600:#17456B;

  /* Grafito de marca */
  --slate-700:#333A40;
  --slate-600:#4A5158;
  --slate-500:#5F6A73;
  --slate-400:#8B959D;
  --slate-300:#B4BCC2;

  /* Azul de marca, muestreado del logotipo ZEYNA */
  --blue-900:#062449;
  --blue-800:#0B3B84;
  --blue-700:#0F4A9B;
  --blue-600:#1257A8;   /* acento sobre claro — 6,3:1 contra el papel */
  --blue-500:#1E8AD6;   /* azul medio del wordmark */
  --blue-400:#31AEE4;
  --blue-300:#5BD2EE;   /* acento sobre tinta */
  --blue-100:#C3EAF8;
  --blue-50:#EDF6FD;

  /* Papel cálido: un blanco frío abarata; este calienta la página */
  --paper:#F7F6F2;
  --paper-2:#EFEDE6;
  --paper-3:#E4E1D8;
  --white:#FFFFFF;

  /* Acento raro, sólo para momentos de prestigio */
  --brass:#B99754;

  /* Semánticos — claro */
  --bg:var(--paper);
  --surface:var(--white);
  --fg:var(--ink-900);
  --fg-soft:var(--slate-600);
  --fg-mute:var(--slate-500);
  --line:color-mix(in oklab, var(--ink-900) 12%, transparent);
  --line-soft:color-mix(in oklab, var(--ink-900) 7%, transparent);
  --accent:var(--blue-600);

  /* Tipografía */
  --font-display:'Instrument Serif',ui-serif,Georgia,'Times New Roman',serif;
  --font-sans:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --step--2:clamp(.72rem,.70rem + .10vw,.78rem);
  --step--1:clamp(.83rem,.80rem + .16vw,.92rem);
  --step-0:clamp(1rem,.96rem + .20vw,1.09rem);
  --step-1:clamp(1.18rem,1.10rem + .38vw,1.42rem);
  --step-2:clamp(1.45rem,1.28rem + .78vw,2.05rem);
  --step-3:clamp(1.85rem,1.50rem + 1.60vw,3.10rem);
  --step-4:clamp(2.35rem,1.70rem + 2.90vw,4.60rem);
  --step-5:clamp(2.90rem,1.75rem + 5.10vw,6.60rem);

  /* Ritmo espacial */
  --gutter:clamp(1.25rem,4vw,3rem);
  --wrap:78rem;
  --wrap-narrow:52rem;
  --section-y:clamp(4.5rem,9vw,9.5rem);

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;

  /* Sombras en tinta azul, no en negro: se integran con el papel cálido */
  --sh-1:0 1px 2px color-mix(in oklab,var(--ink-900) 5%,transparent),
         0 4px 14px color-mix(in oklab,var(--ink-900) 5%,transparent);
  --sh-2:0 2px 6px color-mix(in oklab,var(--ink-900) 6%,transparent),
         0 14px 38px color-mix(in oklab,var(--ink-900) 9%,transparent);
  --sh-3:0 4px 12px color-mix(in oklab,var(--ink-900) 7%,transparent),
         0 30px 70px color-mix(in oklab,var(--ink-900) 14%,transparent);
  --sh-brand:0 18px 44px color-mix(in oklab,var(--blue-600) 26%,transparent);

  /* Curvas: lentas y con carácter. Las rápidas abaratan. */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-in-out:cubic-bezier(.65,.05,.36,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:180ms; --t-mid:340ms; --t-slow:620ms; --t-xslow:1100ms;

  --z-base:1; --z-raise:10; --z-sticky:20; --z-nav:30; --z-overlay:50; --z-top:60;
}

/* Bloque oscuro: se invierten los semánticos, no se reescriben los componentes */
.on-ink{
  --bg:var(--ink-900);
  --surface:color-mix(in oklab,var(--white) 5%,transparent);
  --fg:#EDF3F8;
  --fg-soft:color-mix(in oklab,#EDF3F8 74%,transparent);
  --fg-mute:color-mix(in oklab,#EDF3F8 56%,transparent);
  --line:color-mix(in oklab,#FFFFFF 14%,transparent);
  --line-soft:color-mix(in oklab,#FFFFFF 8%,transparent);
  --accent:var(--blue-400);
  color:var(--fg);
  background:var(--bg);
}

/* ------------------------------------------------------------ cimientos -- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:6rem;
}
body{
  font-family:var(--font-sans);
  font-size:var(--step-0);
  line-height:1.65;
  font-weight:400;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  font-feature-settings:"ss01" 1,"cv11" 1;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}

::selection{background:var(--blue-500);color:#FFFFFF}
:focus-visible{
  outline:2px solid var(--blue-500);
  outline-offset:3px;
  border-radius:4px;
}

/* Barra de scroll discreta */
@supports (scrollbar-color:auto){
  html{scrollbar-color:var(--slate-300) transparent;scrollbar-width:thin}
}

/* ----------------------------------------------------------- tipografía -- */
h1,h2,h3,h4{
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.015em;
  line-height:.98;
}
.display em{font-style:italic;color:var(--accent)}
.h1{font-size:var(--step-5)}
.h2{font-size:var(--step-4)}
.h3{font-size:var(--step-3)}
.h4{font-size:var(--step-2)}
.h5{font-size:var(--step-1);letter-spacing:-.01em;line-height:1.25}

p{text-wrap:pretty}
.lead{
  font-size:var(--step-1);
  line-height:1.55;
  color:var(--fg-soft);
  font-weight:350;
  max-width:60ch;
}
.body-soft{color:var(--fg-soft)}
.measure{max-width:68ch}
.measure-tight{max-width:52ch}

/* Antetítulo: mayúsculas con tracking amplio, el detalle que separa
   una pieza cara de una plantilla */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:var(--step--2);
  font-weight:600;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1.1rem;
}
.eyebrow::before{
  content:"";width:2.2rem;height:1px;
  background:currentColor;opacity:.5;flex:none;
}
.eyebrow--center::after{
  content:"";width:2.2rem;height:1px;
  background:currentColor;opacity:.5;flex:none;
}

/* -------------------------------------------------------------- layout --- */
.wrap{width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - var(--gutter)*2,var(--wrap-narrow));margin-inline:auto}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:clamp(3rem,6vw,6rem)}
.stack>*+*{margin-top:var(--stack-gap,1rem)}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lead,.center .measure{margin-inline:auto}

.grid{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.rule{height:1px;background:var(--line);border:0}

/* ---------------------------------------------------------- textura y luz - */
/* Grano: rompe el degradado plano. Sin él, los fondos oscuros se ven digitales */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora span{
  position:absolute;border-radius:50%;
  filter:blur(70px);
  opacity:.55;
  will-change:transform;
  animation:drift var(--dur,26s) var(--e-in-out) infinite alternate;
  animation-delay:var(--delay,0s);
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(var(--dx,6%),var(--dy,-8%),0) scale(var(--ds,1.22))}
}

/* --------------------------------------------------------------- botones -- */
.btn{
  --btn-bg:var(--ink-900);
  --btn-fg:#fff;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  min-height:52px;
  padding:.95rem 1.75rem;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--t-mid) var(--e-out),
             box-shadow var(--t-mid) var(--e-out),
             color var(--t-mid) var(--e-out),
             border-color var(--t-mid) var(--e-out);
  white-space:nowrap;
}
/* El barrido de color entra desde abajo — más señorial que un cambio seco */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,var(--blue-600),var(--blue-400));
  transform:translateY(101%);
  transition:transform var(--t-slow) var(--e-out);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover{box-shadow:var(--sh-brand);color:#FFFFFF}
.btn:active{transform:scale(.975)}

.btn--accent{--btn-bg:var(--blue-600);--btn-fg:#fff}
.btn--accent::before{background:linear-gradient(135deg,var(--ink-900),var(--ink-700))}
.btn--accent:hover{color:#fff;box-shadow:0 18px 44px color-mix(in oklab,var(--ink-900) 30%,transparent)}

.btn--ghost{
  --btn-bg:transparent;--btn-fg:var(--fg);
  border-color:var(--line);
}
.btn--ghost:hover{color:#FFFFFF;border-color:transparent}

.btn--light{--btn-bg:#fff;--btn-fg:var(--ink-900)}

.btn__ico{width:1.05em;height:1.05em;flex:none;transition:transform var(--t-mid) var(--e-out)}
.btn:hover .btn__ico{transform:translateX(4px)}

/* Enlace-flecha: el subrayado se dibuja, no aparece */
.link-arrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:var(--step--1);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);
  padding-bottom:.3em;
  position:relative;
  cursor:pointer;
}
.link-arrow::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-mid) var(--e-out);
}
.link-arrow:hover::after{transform:scaleX(1);transform-origin:left}
.link-arrow svg{width:1.1em;height:1.1em;transition:transform var(--t-mid) var(--e-out)}
.link-arrow:hover svg{transform:translateX(5px)}

/* -------------------------------------------------------------- barra ---- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--blue-600),var(--blue-300),var(--brass));
  z-index:var(--z-top);
  will-change:transform;
}

/* ------------------------------------------------------------ navegación -- */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:var(--z-nav);
  transition:background var(--t-mid) var(--e-out),
             box-shadow var(--t-mid) var(--e-out),
             border-color var(--t-mid) var(--e-out);
  border-bottom:1px solid transparent;
}
.nav__bar{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(.75rem,1.6vw,1.5rem);
  height:var(--nav-h,88px);
  transition:height var(--t-mid) var(--e-out);
}
.nav.is-stuck{
  background:color-mix(in oklab,var(--paper) 78%,transparent);
  backdrop-filter:saturate(1.7) blur(18px);
  -webkit-backdrop-filter:saturate(1.7) blur(18px);
  border-bottom-color:var(--line-soft);
  box-shadow:0 8px 30px color-mix(in oklab,var(--ink-900) 6%,transparent);
}
.nav.is-stuck .nav__bar{--nav-h:68px}
/* Sobre héroe oscuro la barra arranca en blanco y se “enciende” al fijarse */
.nav.on-dark:not(.is-stuck){color:#fff}
.nav.on-dark:not(.is-stuck) .nav__link{color:color-mix(in oklab,#fff 82%,transparent)}
.nav.on-dark:not(.is-stuck) .nav__link:hover{color:#fff}
.nav.on-dark:not(.is-stuck) .burger span{background:#fff}
.nav.on-dark:not(.is-stuck) .nav__logo-dark{opacity:0}
.nav.on-dark:not(.is-stuck) .nav__logo-light{opacity:1}

.nav__logo{position:relative;display:block;flex:none;margin-right:auto;height:clamp(30px,3.4vw,40px);width:auto}
.nav__logo img{height:100%;width:auto;transition:opacity var(--t-mid) var(--e-out)}
.nav__logo-light{position:absolute;inset:0;opacity:0}

.nav__menu{display:flex;align-items:center;gap:clamp(.35rem,1.1vw,1.35rem);min-width:0;flex:0 1 auto}
.nav__link{
  position:relative;
  padding:.6rem .2rem;
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--slate-600);
  transition:color var(--t-fast) var(--e-out);
  white-space:nowrap;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1.5px;
  background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-mid) var(--e-out);
}
.nav__link:hover{color:var(--ink-900)}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}
.nav__link.is-active{color:var(--blue-600)}
.nav__link.is-active::after{transform:scaleX(1)}

/* Desplegable de formularios */
.nav__has-sub{position:relative}
.nav__sub{
  position:absolute;top:calc(100% + .4rem);left:50%;
  translate:-50% 0;
  min-width:20rem;
  padding:.55rem;
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;
  transform:translateY(-8px) scale(.98);
  transform-origin:top center;
  transition:opacity var(--t-mid) var(--e-out),transform var(--t-mid) var(--e-out),visibility var(--t-mid);
}
.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.nav__sub a{
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem .85rem;border-radius:var(--r-sm);
  font-size:var(--step--1);font-weight:600;color:var(--ink-900);
  letter-spacing:0;text-transform:none;
  transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out);
}
.nav__sub a:hover{background:var(--blue-50);color:var(--blue-700)}
.nav__sub svg{width:1.1rem;height:1.1rem;color:var(--blue-600);flex:none}
.nav__sub small{display:block;font-weight:400;color:var(--slate-500);font-size:var(--step--2);line-height:1.35}

.nav__cta{display:none;flex:none}
@media (min-width:1320px){.nav__cta{display:inline-flex}}

/* Hamburguesa */
.burger{
  display:none;
  width:48px;height:48px;
  align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;
  flex:none;
}
.burger i{display:block;width:24px;height:14px;position:relative}
.burger span{
  position:absolute;left:0;height:1.5px;width:100%;
  background:var(--ink-900);border-radius:2px;
  transition:transform var(--t-mid) var(--e-out),opacity var(--t-fast) var(--e-out),width var(--t-mid) var(--e-out);
}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:6.25px;width:70%}
.burger span:nth-child(3){top:12.5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;width:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.25px) rotate(-45deg)}

@media (max-width:1040px){
  .burger{display:flex}
  .nav__menu{display:none}
}

/* Cajón móvil */
.drawer{
  position:fixed;inset:0;z-index:var(--z-overlay);
  background:var(--ink-900);
  color:#fff;
  display:flex;flex-direction:column;
  padding:calc(var(--nav-h,88px) + 1.5rem) var(--gutter) 2.5rem;
  clip-path:circle(0% at calc(100% - 3rem) 3rem);
  transition:clip-path var(--t-slow) var(--e-in-out);
  overflow-y:auto;
  visibility:hidden;
}
.drawer.is-open{clip-path:circle(150% at calc(100% - 3rem) 3rem);visibility:visible}
.drawer__list{display:flex;flex-direction:column;gap:.2rem;margin-top:auto;margin-bottom:auto}
.drawer__list a{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.9rem,8vw,3rem);
  line-height:1.18;
  color:#fff;
  opacity:0;transform:translateY(22px);
  transition:opacity 460ms var(--e-out),transform 460ms var(--e-out),color var(--t-fast);
}
.drawer.is-open .drawer__list a{opacity:1;transform:none;transition-delay:calc(var(--i,0)*55ms + 120ms)}
.drawer__list a:hover,.drawer__list a.is-active{color:var(--blue-400)}
.drawer__foot{
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:.4rem 2rem;
  font-size:var(--step--1);
  color:rgba(255,255,255,.7);
}
.drawer__foot a:hover{color:var(--blue-400)}
body.is-locked{overflow:hidden}

/* ----------------------------------------------------------------- héroe -- */
.hero{
  --accent:var(--blue-300);
  --line:color-mix(in oklab,#FFFFFF 16%,transparent);
  position:relative;
  min-height:min(100svh,900px);
  display:flex;align-items:center;
  padding-block:calc(var(--nav-h,88px) + 4rem) 5rem;
  overflow:hidden;
  background:var(--ink-950);
  color:#fff;
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  opacity:.4;
  transform:scale(1.12);
  animation:heroZoom 15s var(--e-out) forwards;
}
@keyframes heroZoom{to{transform:scale(1)}}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 22% 42%,transparent 0%,color-mix(in oklab,var(--ink-950) 62%,transparent) 55%,var(--ink-950) 100%),
    linear-gradient(100deg,var(--ink-950) 6%,color-mix(in oklab,var(--ink-900) 72%,transparent) 46%,transparent 82%);
}
.hero__inner{position:relative;z-index:3}
.hero__content{max-width:min(100%,54rem)}
.hero .eyebrow{color:var(--blue-300)}
.hero__title{
  font-size:var(--step-5);
  margin-bottom:1.5rem;
}
.hero__sub{
  font-size:var(--step-1);
  font-weight:300;
  color:rgba(255,255,255,.78);
  max-width:44ch;
  margin-bottom:2.5rem;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem}

/* Marcadores del héroe abajo a la derecha */
.hero__meta{
  position:absolute;right:0;bottom:0;z-index:3;
  display:flex;gap:clamp(1.5rem,4vw,3.5rem);
  padding:1.5rem 0;
  border-top:1px solid rgba(255,255,255,.14);
  justify-content:flex-end;
}
.hero__meta div{text-align:right}
.hero__meta dt{
  font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.hero__meta dd{font-family:var(--font-display);font-size:var(--step-2);color:#fff}
@media (max-width:720px){.hero__meta{display:none}}

/* Revelado cinético del titular: cada línea sube tras su máscara */
.kinetic{display:block;overflow:hidden}
.kinetic > span{
  display:block;
  transform:translateY(105%);
  animation:kineticUp 1.15s var(--e-out) forwards;
  animation-delay:calc(var(--k,0)*110ms + 220ms);
}
@keyframes kineticUp{to{transform:translateY(0)}}

.fade-up{opacity:0;transform:translateY(24px);animation:fadeUp .95s var(--e-out) forwards;animation-delay:var(--d,0ms)}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* Indicador de scroll */
.scroll-hint{
  position:absolute;left:50%;bottom:6.5rem;translate:-50% 0;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:var(--step--2);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.scroll-hint i{
  display:block;width:1px;height:52px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.65));
  position:relative;overflow:hidden;
}
.scroll-hint i::after{
  content:"";position:absolute;left:0;top:-52px;width:1px;height:52px;
  background:linear-gradient(to bottom,transparent,var(--blue-300));
  animation:scrollDown 2.4s var(--e-in-out) infinite;
}
@keyframes scrollDown{0%{top:-52px}60%,100%{top:52px}}
@media (max-width:900px){.scroll-hint{display:none}}

/* ---------------------------------------------------- cabecera interior -- */
.pagehead{
  --accent:var(--blue-300);
  --line:color-mix(in oklab,#FFFFFF 16%,transparent);
  position:relative;
  padding-block:calc(var(--nav-h,88px) + clamp(4rem,9vw,7.5rem)) clamp(3.5rem,7vw,6rem);
  background:var(--ink-900);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.pagehead__media{position:absolute;inset:0;z-index:0}
.pagehead__media img{width:100%;height:100%;object-fit:cover;opacity:.3}
.pagehead__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--ink-950) 10%,color-mix(in oklab,var(--ink-900) 68%,transparent) 55%,transparent);
}
.pagehead__inner{position:relative;z-index:3}
.pagehead .lead{color:rgba(255,255,255,.75)}
.crumbs{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:1.4rem;
}
.crumbs a:hover{color:var(--blue-300)}
.crumbs span{opacity:.45}

/* ---------------------------------------------------------------- cards -- */
.card{
  position:relative;
  display:flex;flex-direction:column;
  padding:clamp(1.6rem,2.6vw,2.3rem);
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--t-slow) var(--e-out),
             box-shadow var(--t-slow) var(--e-out),
             border-color var(--t-slow) var(--e-out);
}
/* Foco de luz que sigue al puntero — el detalle que hace “vivo” el hover */
.card::before{
  content:"";position:absolute;inset:-1px;z-index:-1;
  background:radial-gradient(28rem 28rem at var(--mx,50%) var(--my,0%),
             color-mix(in oklab,var(--blue-500) 16%,transparent),transparent 62%);
  opacity:0;transition:opacity var(--t-slow) var(--e-out);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sh-2);
  border-color:color-mix(in oklab,var(--blue-500) 34%,transparent);
}
.card:hover::before{opacity:1}
.card__ico{
  width:56px;height:56px;flex:none;
  display:grid;place-items:center;
  border-radius:var(--r-md);
  background:linear-gradient(150deg,var(--blue-500),var(--blue-700));
  color:#fff;
  margin-bottom:1.4rem;
  box-shadow:0 10px 24px color-mix(in oklab,var(--blue-600) 30%,transparent);
  transition:transform var(--t-slow) var(--e-spring);
}
.card:hover .card__ico{transform:rotate(-6deg) scale(1.06)}
.card__ico svg{width:26px;height:26px}
.card h3{font-size:var(--step-1);margin-bottom:.7rem}
.card p{color:var(--fg-soft);font-size:var(--step--1);line-height:1.62}
.card__num{
  position:absolute;top:1.1rem;right:1.4rem;
  font-family:var(--font-display);
  font-size:3.2rem;line-height:1;
  color:var(--ink-900);opacity:.06;
  transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out);
}
.card:hover .card__num{opacity:.13;transform:translateY(-3px)}
.on-ink .card{background:color-mix(in oklab,#fff 4%,transparent);backdrop-filter:blur(8px)}
.on-ink .card__num{color:#fff}

/* Tarjeta con imagen */
.card-img{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--ink-900);
  isolation:isolate;
}
.card-img__frame{overflow:hidden;aspect-ratio:4/3}
.card-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-xslow) var(--e-out),filter var(--t-xslow) var(--e-out);
}
.card-img:hover img{transform:scale(1.07)}
.card-img__body{
  position:absolute;inset:auto 0 0 0;
  padding:clamp(1.3rem,2.4vw,2rem);
  background:linear-gradient(to top,var(--ink-950) 6%,color-mix(in oklab,var(--ink-950) 72%,transparent) 55%,transparent);
  color:#fff;
}
.card-img__body h3{font-size:var(--step-1);margin-bottom:.35rem}
.card-img__body p{font-size:var(--step--1);color:rgba(255,255,255,.72)}

/* ---------------------------------------------------------- cifras/stats - */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,3rem);
}
@media (max-width:720px){.stats{grid-template-columns:1fr;gap:2rem}}
.stat{position:relative;padding-top:1.6rem;border-top:1px solid var(--line)}
.stat__n{
  font-family:var(--font-display);
  font-size:clamp(3.4rem,8vw,6rem);
  line-height:.9;
  letter-spacing:-.03em;
  background:linear-gradient(160deg,var(--blue-300),var(--blue-600) 70%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  display:block;
}
.stat__l{
  margin-top:.7rem;
  font-size:var(--step--1);
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-mute);
}
/* La regla superior se dibuja al entrar en vista */
.stat::after{
  content:"";position:absolute;left:0;top:0;height:1px;width:100%;
  background:var(--blue-500);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--e-out) var(--sd,0ms);
}
.stat.is-in::after{transform:scaleX(1)}

/* --------------------------------------------------------------- acordeón */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.3rem,2.4vw,1.9rem) 0;
  background:none;border:0;text-align:left;cursor:pointer;
  transition:color var(--t-fast) var(--e-out);
}
.acc__btn:hover{color:var(--accent)}
.acc__btn h3{font-size:var(--step-2);font-weight:500;transition:transform var(--t-mid) var(--e-out)}
.acc__btn:hover h3{transform:translateX(8px)}
.acc__idx{
  font-family:var(--font-display);
  font-size:var(--step--1);
  color:var(--accent);
  margin-right:1.2rem;
  vertical-align:super;
}
.acc__sign{
  flex:none;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);
  display:grid;place-items:center;
  transition:background var(--t-mid) var(--e-out),border-color var(--t-mid) var(--e-out),transform var(--t-mid) var(--e-out);
}
.acc__sign::before,.acc__sign::after{
  content:"";position:absolute;background:currentColor;border-radius:2px;
  transition:transform var(--t-mid) var(--e-out),opacity var(--t-fast) var(--e-out);
}
.acc__sign::before{width:13px;height:1.5px}
.acc__sign::after{width:1.5px;height:13px}
.acc__btn[aria-expanded="true"] .acc__sign{background:var(--blue-600);border-color:var(--blue-600);color:#fff;transform:rotate(180deg)}
.acc__btn[aria-expanded="true"] .acc__sign::after{transform:scaleY(0);opacity:0}
.acc__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t-slow) var(--e-in-out);
}
.acc__btn[aria-expanded="true"] + .acc__panel{grid-template-rows:1fr}
.acc__panel > div{overflow:hidden}
.acc__body{
  padding-bottom:clamp(1.6rem,3vw,2.6rem);
  display:grid;grid-template-columns:1.25fr 1fr;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
}
@media (max-width:820px){.acc__body{grid-template-columns:1fr}}
.acc__body img{border-radius:var(--r-md);width:100%;aspect-ratio:4/3;object-fit:cover}

/* Lista con viñeta de marca */
.ticks{display:flex;flex-direction:column;gap:.85rem;margin-top:1.4rem}
.ticks li{
  display:flex;gap:.85rem;align-items:flex-start;
  font-size:var(--step--1);color:var(--fg-soft);line-height:1.55;
}
.ticks svg{width:1.15rem;height:1.15rem;flex:none;color:var(--blue-600);margin-top:.22em}

/* ---------------------------------------------------- áreas terapéuticas -- */
.areas{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.area{
  position:relative;
  padding:clamp(1.5rem,2.4vw,2rem);
  background:var(--bg);
  min-height:12.5rem;
  display:flex;flex-direction:column;
  overflow:hidden;isolation:isolate;
  transition:color var(--t-mid) var(--e-out);
  cursor:default;
}
.area::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(155deg,var(--ink-800),var(--blue-700));
  transform:translateY(100%);
  transition:transform var(--t-slow) var(--e-out);
}
.area:hover{color:#fff}
.area:hover::before{transform:translateY(0)}
.area__ico{width:30px;height:30px;color:var(--blue-600);margin-bottom:auto;transition:color var(--t-mid),transform var(--t-slow) var(--e-spring)}
.area:hover .area__ico{color:var(--blue-300);transform:scale(1.12) rotate(-4deg)}
.area h3{font-size:var(--step-0);font-weight:600;letter-spacing:-.01em;margin:1.3rem 0 .5rem}
.area p{
  font-size:var(--step--2);line-height:1.55;color:var(--fg-mute);
  transition:color var(--t-mid) var(--e-out);
}
.area:hover p{color:rgba(255,255,255,.8)}

/* ------------------------------------------------------------- marquesina */
.marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee__track{
  display:flex;width:max-content;
  gap:clamp(3rem,7vw,6.5rem);
  animation:slide var(--speed,42s) linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee img{
  height:clamp(30px,4.2vw,46px);width:auto;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.5;
  transition:filter var(--t-mid) var(--e-out),opacity var(--t-mid) var(--e-out);
}
.marquee img:hover{filter:none;opacity:1}

/* ------------------------------------------------------------ cronómetro -- */
.countdown{display:flex;gap:clamp(.6rem,2vw,1.5rem);flex-wrap:wrap}
.cd{
  flex:1 1 6.5rem;min-width:5.5rem;
  padding:clamp(1rem,2vw,1.6rem) 1rem;
  text-align:center;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  position:relative;overflow:hidden;
}
.cd::after{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:linear-gradient(90deg,var(--blue-600),var(--blue-300));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--e-out);
}
.cd.is-in::after{transform:scaleX(1)}
.cd b{
  display:block;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.2rem,5.5vw,3.4rem);line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--fg);
}
.cd span{
  display:block;margin-top:.5rem;
  font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-mute);
}

/* ------------------------------------------------------------------ blog -- */
.post{
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform var(--t-slow) var(--e-out),box-shadow var(--t-slow) var(--e-out);
}
.post:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.post__media{overflow:hidden;aspect-ratio:16/10;background:var(--paper-2)}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-xslow) var(--e-out)}
.post:hover .post__media img{transform:scale(1.06)}
.post__body{padding:clamp(1.3rem,2.4vw,1.8rem);display:flex;flex-direction:column;flex:1;gap:.8rem}
.post h3{font-size:var(--step-0);font-weight:600;line-height:1.35;letter-spacing:-.005em}
.post__meta{display:flex;align-items:center;gap:.7rem;font-size:var(--step--2);color:var(--fg-mute)}
.post .link-arrow{margin-top:auto;padding-top:.4rem}
.tag{
  display:inline-flex;align-items:center;
  padding:.3rem .7rem;border-radius:var(--r-pill);
  font-size:var(--step--2);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--blue-50);color:var(--blue-700);
  border:1px solid color-mix(in oklab,var(--blue-500) 22%,transparent);
}
.tag--news{background:color-mix(in oklab,var(--brass) 12%,transparent);color:#7A5F1E;border-color:color-mix(in oklab,var(--brass) 34%,transparent)}

/* ------------------------------------------------------------ formularios */
.form{display:grid;gap:1.4rem}
.field{position:relative;display:flex;flex-direction:column}
.field > label{
  font-size:var(--step--1);font-weight:600;
  margin-bottom:.5rem;color:var(--fg);
}
.field .req{color:var(--blue-600)}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=number],.field select,.field textarea{
  width:100%;
  min-height:52px;
  padding:.85rem 1.05rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:var(--step-0);
  color:var(--fg);
  transition:border-color var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out),background var(--t-fast);
}
.field textarea{min-height:9rem;resize:vertical;line-height:1.6}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475058' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:1.1rem;
  padding-right:2.8rem;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--blue-500);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--blue-500) 15%,transparent);
}
.field input::placeholder,.field textarea::placeholder{color:var(--slate-400)}
.field .hint{font-size:var(--step--2);color:var(--fg-mute);margin-top:.4rem}
.field .err{font-size:var(--step--2);color:#C0392B;margin-top:.4rem;display:none}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#C0392B}
.field.has-error .err{display:block}

fieldset{border:0;padding:0;margin:0}
legend{
  font-size:var(--step--1);font-weight:600;margin-bottom:.7rem;padding:0;
}
.choices{display:flex;flex-wrap:wrap;gap:.6rem}
.choice{
  position:relative;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.7rem 1.1rem;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  cursor:pointer;
  font-size:var(--step--1);
  min-height:46px;
  transition:border-color var(--t-fast) var(--e-out),background var(--t-fast) var(--e-out),color var(--t-fast);
  user-select:none;
}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice i{
  width:18px;height:18px;flex:none;
  border:1.5px solid var(--slate-400);
  border-radius:5px;
  display:grid;place-items:center;
  transition:background var(--t-fast) var(--e-out),border-color var(--t-fast) var(--e-out);
}
.choice input[type=radio] ~ i{border-radius:50%}
.choice i::after{
  content:"";width:9px;height:9px;border-radius:2px;
  background:#fff;transform:scale(0);
  transition:transform var(--t-fast) var(--e-spring);
  clip-path:polygon(14% 44%,0 59%,39% 100%,100% 20%,85% 6%,38% 70%);
}
.choice input[type=radio] ~ i::after{clip-path:none;border-radius:50%;width:8px;height:8px}
.choice:hover{border-color:var(--blue-500)}
.choice:has(input:checked){background:var(--blue-50);border-color:var(--blue-500);color:var(--blue-700);font-weight:600}
.choice:has(input:checked) i{background:var(--blue-600);border-color:var(--blue-600)}
.choice:has(input:checked) i::after{transform:scale(1)}
.choice:has(input:focus-visible){outline:2px solid var(--blue-500);outline-offset:3px}

.form__note{font-size:var(--step--2);color:var(--fg-mute);line-height:1.55}
.form__status{
  display:none;
  padding:1rem 1.2rem;border-radius:var(--r-sm);
  font-size:var(--step--1);
  border:1px solid transparent;
}
.form__status.is-ok{display:block;background:var(--blue-50);border-color:color-mix(in oklab,var(--blue-500) 30%,transparent);color:var(--blue-700)}
.form__status.is-bad{display:block;background:#FDF0EE;border-color:#E8B4AC;color:#9B2C1C}
.btn[data-busy="1"]{pointer-events:none;opacity:.6}
.btn .spinner{
  width:1.05em;height:1.05em;border-radius:50%;
  border:2px solid color-mix(in oklab,currentColor 30%,transparent);
  border-top-color:currentColor;
  animation:spin .75s linear infinite;
  display:none;
}
.btn[data-busy="1"] .spinner{display:block}
.btn[data-busy="1"] .btn__ico{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* Panel de formulario sobre tinta */
.formcard{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-xl);
  padding:clamp(1.6rem,3.5vw,3rem);
  box-shadow:var(--sh-2);
}

/* ------------------------------------------------------------------- CTA -- */
.cta{
  --accent:var(--blue-300);
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-xl);
  padding:clamp(2.5rem,6vw,5rem);
  background:var(--ink-900);
  color:#fff;
}
.cta__inner{position:relative;z-index:3}
.cta h2{font-size:var(--step-3);margin-bottom:1rem}
.cta p{color:rgba(255,255,255,.72);max-width:52ch}
.cta__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

/* --------------------------------------------------------------- imagen --- */
/* Revelado por cortina: la foto se descubre, no aparece */
.reveal-img{position:relative;overflow:hidden;border-radius:var(--r-lg)}
.reveal-img img{
  width:100%;display:block;
  transform:scale(1.16);
  transition:transform 1.5s var(--e-out);
}
.reveal-img::after{
  content:"";position:absolute;inset:0;
  background:var(--blue-600);
  transform-origin:right;
  transition:transform 1.05s var(--e-in-out);
}
.reveal-img.is-in img{transform:scale(1)}
.reveal-img.is-in::after{transform:scaleX(0)}

.frame-offset{position:relative}
.frame-offset::before{
  content:"";position:absolute;
  inset:auto -1.4rem -1.4rem auto;
  width:62%;height:62%;
  border:1px solid var(--blue-500);
  border-radius:var(--r-lg);
  z-index:-1;
  opacity:.55;
}

/* ------------------------------------------------------------------- pie -- */
.footer{
  background:var(--ink-950);
  color:rgba(255,255,255,.72);
  position:relative;overflow:hidden;isolation:isolate;
  padding-top:clamp(3.5rem,7vw,6rem);
}
.footer__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.4fr;
  gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
@media (max-width:960px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer__grid{grid-template-columns:1fr}}
.footer h4{
  font-size:var(--step--2);letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue-400);font-weight:700;margin-bottom:1.2rem;
}
.footer a{transition:color var(--t-fast) var(--e-out)}
.footer a:hover{color:var(--blue-300)}
.footer li + li{margin-top:.6rem}
.footer li a,.footer address a{font-size:var(--step--1)}
.footer address{font-style:normal;font-size:var(--step--1);line-height:1.7}
.footer__logo{height:64px;width:auto;margin-bottom:1.5rem}
.footer__tag{font-size:var(--step--1);max-width:34ch;line-height:1.7}
.social{display:flex;gap:.6rem;margin-top:1.6rem}
.social a{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);
  transition:background var(--t-mid) var(--e-out),border-color var(--t-mid) var(--e-out),transform var(--t-mid) var(--e-out);
}
.social a:hover{background:var(--blue-600);border-color:var(--blue-600);color:#fff;transform:translateY(-3px)}
.social svg{width:18px;height:18px}
.footer__bar{
  border-top:1px solid rgba(255,255,255,.12);
  padding-block:1.5rem 1.8rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  font-size:var(--step--2);
  color:rgba(255,255,255,.5);
}

/* --------------------------------------------------------- firma Lambda -- */
/* Autoría discreta: nunca compite con la marca del cliente */
.lambda-sig{
  display:inline-flex;align-items:center;gap:.5rem;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  transition:color var(--t-fast) var(--e-out),opacity var(--t-fast) var(--e-out);
}
.lambda-sig:hover{color:rgba(255,255,255,.95)}
.lambda-sig img,.lambda-sig svg{width:16px;height:16px;flex:none;opacity:.9}
.lambda-sig span{font-size:11.5px;letter-spacing:.02em;line-height:1}
.lambda-mark--nav{
  display:inline-flex;align-items:center;gap:.42rem;flex:none;
  color:#98A2B0;text-decoration:none;
  padding-left:clamp(.6rem,1vw,1rem);margin-left:.2rem;
  border-left:1px solid var(--line-soft);
}
.lambda-mark--nav img,.lambda-mark--nav svg{width:14px;height:14px;opacity:.85}
.lambda-mark--nav span{font-size:10.5px;letter-spacing:.03em;white-space:nowrap}
.nav.on-dark:not(.is-stuck) .lambda-mark--nav{color:rgba(255,255,255,.6);border-left-color:rgba(255,255,255,.18)}
.nav.on-dark:not(.is-stuck) .lambda-mark--nav img{filter:brightness(0) invert(1);opacity:.65}
.nav.on-dark:not(.is-stuck) .lambda-mark--nav svg{opacity:.7}
@media (max-width:1180px){.lambda-mark--nav{display:none}}
@media (max-width:980px){.lambda-sig span{display:none}}

/* ---------------------------------------------------------- artículos --- */
.prose{max-width:44rem;font-size:var(--step-0);line-height:1.78}
.prose > * + *{margin-top:1.35em}
.prose h2{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--step-2);line-height:1.15;
  margin-top:2.6em;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:var(--step-1);font-weight:600;margin-top:2em}
.prose p{color:var(--fg-soft)}
.prose strong{color:var(--fg);font-weight:700}
.prose em{font-style:italic}
.prose ul{display:flex;flex-direction:column;gap:.7em}
.prose ul li{
  position:relative;padding-left:1.6em;color:var(--fg-soft);
}
.prose ul li::before{
  content:"";position:absolute;left:.2em;top:.72em;
  width:.45em;height:.45em;border-radius:50%;
  background:var(--blue-500);
}
.prose ol{counter-reset:p;display:flex;flex-direction:column;gap:.7em}
.prose ol li{position:relative;padding-left:2em;color:var(--fg-soft);counter-increment:p}
.prose ol li::before{
  content:counter(p);position:absolute;left:0;top:0;
  font-family:var(--font-display);color:var(--blue-600);
}
.prose a{color:var(--blue-700);text-decoration:underline;text-underline-offset:.2em}
.prose a:hover{color:var(--blue-500)}
.prose .refs{font-size:var(--step--1);line-height:1.6;color:var(--fg-mute)}
.prose .refs li::before{background:var(--slate-400)}

/* Sumario destacado al inicio del artículo */
.abstract{
  padding:clamp(1.4rem,2.6vw,2rem);
  border-left:3px solid var(--blue-500);
  background:linear-gradient(100deg,var(--blue-50),transparent 75%);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.abstract p{color:var(--fg);font-size:var(--step-0)}
.abstract .eyebrow{margin-bottom:.6rem}

.article-aside{
  position:sticky;top:calc(var(--nav-h,88px) + 2rem);
  font-size:var(--step--1);
}
.article-aside h4{
  font-size:var(--step--2);letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:.8rem;
}
.article-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 16rem;
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
@media (max-width:960px){
  .article-layout{grid-template-columns:1fr}
  .article-aside{position:static}
}

/* Estado del cronómetro cuando la fecha ya pasó */
[data-cd-past]{display:none}
.is-past [data-cd-past]{display:block}
.is-past .cd{opacity:.42}

/* -------------------------------------------------------- transiciones --- */
.page-veil{
  position:fixed;inset:0;z-index:var(--z-top);
  background:var(--ink-950);
  transform:translateY(100%);
  pointer-events:none;
}
.page-veil.is-out{
  animation:veilIn .62s var(--e-in-out) forwards;
  pointer-events:all;
}
@keyframes veilIn{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ------------------------------------------------------------- revelados -- */
[data-reveal]{
  opacity:0;
  transform:translateY(var(--ry,28px));
  transition:opacity .95s var(--e-out) var(--rd,0ms),
             transform .95s var(--e-out) var(--rd,0ms);
  will-change:opacity,transform;
}
[data-reveal="left"]{transform:translateX(-34px)}
[data-reveal="right"]{transform:translateX(34px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--e-in-out) var(--rd,0ms)}
[data-reveal].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* Rótulo que se descubre línea a línea */
.split-line{display:block;overflow:hidden}
.split-line > i{
  display:block;font-style:inherit;
  transform:translateY(105%);
  transition:transform 1.05s var(--e-out) var(--ld,0ms);
}
.is-in .split-line > i,.split-line.is-in > i{transform:translateY(0)}

/* ------------------------------------------------------------ utilidades -- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:1rem;top:-4rem;z-index:var(--z-top);
  background:var(--ink-900);color:#fff;
  padding:.8rem 1.2rem;border-radius:var(--r-sm);
  transition:top var(--t-mid) var(--e-out);
}
.skip:focus{top:1rem}

.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}
.mt-3{margin-top:1.5rem}.mt-4{margin-top:2.2rem}.mt-5{margin-top:3.2rem}
.mb-4{margin-bottom:2.2rem}
.gap-sm{gap:.6rem}
.flex{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.text-accent{color:var(--accent)}

/* --------------------------------------------------- movimiento reducido - */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal],.kinetic > span,.fade-up,.split-line > i{
    opacity:1 !important;transform:none !important;clip-path:none !important;
  }
  .reveal-img::after{transform:scaleX(0) !important}
  .reveal-img img{transform:none !important}
  .hero__media img{animation:none;transform:none}
  .marquee__track{animation:none}
}

/* ------------------------------------------------------------- impresión - */
@media print{
  .nav,.drawer,.progress,.page-veil,.scroll-hint,.marquee{display:none !important}
  body{background:#fff;color:#000}
  .hero,.pagehead,.footer,.cta{background:#fff !important;color:#000 !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
}