*,*::before,*::after{ box-sizing:border-box; margin:0 }
html{ scroll-behavior:smooth }
body{ font-family:var(--font-body); font-size:var(--fs-md); line-height:1.6; letter-spacing:-.004em;
  color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
img,video{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--ink); color:var(--paper) }

/* Tipografía: grotesca en peso normal, sentence case (primera letra en alza vía CSS) */
.display{ font-family:var(--font-display); font-weight:300; letter-spacing:-.032em;
  font-size:clamp(2.3rem,5.2vw,4.2rem); line-height:1.02; text-wrap:balance }
.h1{ font-family:var(--font-display); font-weight:300; letter-spacing:-.028em;
  font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.08; text-wrap:balance }
.h2{ font-family:var(--font-display); font-weight:400; letter-spacing:-.022em;
  font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.16; text-wrap:balance }
.h3{ font-family:var(--font-display); font-weight:500; letter-spacing:-.012em; font-size:1.2rem; line-height:1.32 }
.display::first-letter,.h1::first-letter,.h2::first-letter,.h3::first-letter{ text-transform:uppercase }
.lower{ text-transform:none }        /* legado: ya no forzamos minúscula */
/* Énfasis en titulares: NUNCA por peso (rompe el display fino). Solo color, y con moderación. */
.mark{ font-weight:inherit; color:inherit }              /* énfasis neutro por defecto */
.mark--blue{ color:var(--acc-blue) } .mark--red{ color:var(--acc-red) }
.mark--violet{ color:var(--acc-violet) } .mark--orange{ color:var(--acc-orange) }

.lead{ color:var(--ink-2); font-size:var(--fs-lg); max-width:60ch; line-height:1.6; letter-spacing:-.006em }
.lead--big{ font-size:clamp(1.15rem,1.8vw,1.4rem) }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mist) }
.eyebrow::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--ink); opacity:.55 }
.kickers{ display:flex; flex-wrap:wrap; gap:0; font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mist) }
.kickers span+span::before{ content:"|"; margin:0 14px; color:var(--hairline-2) }
.data{ font-family:var(--font-data); font-variant-numeric:tabular-nums; letter-spacing:-.01em }
.u{ font-size:.55em; font-weight:500; color:var(--mist); margin-left:2px }
.link{ color:var(--ink); font-weight:500; border-bottom:1px solid var(--hairline-2) }
.link:hover{ border-color:var(--ink) }

.container{ width:min(100% - 3rem, var(--container)); margin-inline:auto }
.section{ padding-block:var(--space-24) } .section--tight{ padding-block:var(--space-16) }
.center{ text-align:center }
.grid{ display:grid; gap:var(--space-6) }
.grid--2{ grid-template-columns:repeat(2,1fr) } .grid--3{ grid-template-columns:repeat(3,1fr) }
.grid--4{ grid-template-columns:repeat(4,1fr) }
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-16); align-items:center }
@media (max-width:900px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr) }
  .split{ grid-template-columns:1fr } }
@media (max-width:640px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr } }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px }