/* ═══════════════════════════════════════════════════════
   ALTURA MAGAZINE — hoja de estilos
   Paleta: papel / tinta / óxido
   ═══════════════════════════════════════════════════════ */

:root{
  --paper:#F4F2ED;
  --paper-2:#EAE6DE;
  --ink:#14161A;
  --ink-2:#3A4048;
  --muted:#6E7480;
  --rust:#C8501E;
  --rule:rgba(20,22,26,.14);
  --rule-light:rgba(244,242,237,.18);

  --display:"Schibsted Grotesk","Segoe UI",system-ui,sans-serif;
  --sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  --wrap:1240px;
  --header-h:74px;
  --gap:clamp(20px,3vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
/* El desplazamiento suave lo maneja main.js con su propia curva de
   aceleración: el nativo del navegador es demasiado seco y no permite
   controlar la duración. Aquí solo queda como red de seguridad si el
   JS no llegara a cargar. */
html{scroll-behavior:auto}
html.sin-js{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.02em}

/* ── Titulares ──────────────────────────────────────────
   Schibsted Grotesk es una sans: a peso 400 los titulares grandes se
   quedan sin cuerpo, donde la serif anterior aguantaba sola. Toda la
   familia de display va en semibold, y cuanto mayor es el tamaño más
   se cierra el espaciado —una regla tipográfica básica que la serif
   no necesitaba porque ya venía compensada de fábrica. */
.logo__word,.masthead__word,.coverline__head,.toc__head,.block__title,
.card__title,.list__head,.radio__title,.feature__title,.offer__title,
.issue__title,.news__title,.footer__word,.stat__num,.edition__num,
.articulo__h1,.side__head,.issue__mast{
  font-weight:600;
}
/* El nombre de la revista es una marca, no un texto: pesa más y cierra más. */
.masthead__word{font-weight:700;letter-spacing:-.045em}
.logo__word{font-weight:700;letter-spacing:-.03em;font-size:26px}
.issue__mast{font-weight:700;letter-spacing:-.03em}
.edition__num,.stat__num{letter-spacing:-.04em}
.coverline__head,.feature__title,.radio__title,.articulo__h1{letter-spacing:-.025em}

p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

/* Las anclas no deben quedar bajo el header sticky */
section[id]{scroll-margin-top:calc(var(--header-h) + 14px)}
#portada{scroll-margin-top:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

/* ── Tipografía de apoyo ───────────────────────────── */
.kicker{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rust);font-weight:600;
}
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.eyebrow--light{color:rgba(244,242,237,.7)}

.link-arrow{
  font-size:13px;font-weight:500;color:var(--ink-2);
  border-bottom:1px solid var(--rule);padding-bottom:2px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.link-arrow span{display:inline-block;transition:transform .3s var(--ease)}
.link-arrow:hover{color:var(--rust);border-color:var(--rust)}
.link-arrow:hover span{transform:translateX(4px)}
.link-arrow--light{color:rgba(244,242,237,.85);border-color:var(--rule-light)}
.link-arrow--light:hover{color:#fff;border-color:#fff}

/* ── Botones ───────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;letter-spacing:.01em;
  padding:10px 18px;border-radius:2px;border:1px solid transparent;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
  cursor:pointer;white-space:nowrap;
}
.btn--ghost{border-color:var(--rule);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(20,22,26,.04)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--rust)}
.btn--lg{padding:15px 32px;font-size:14px}

.pulse{
  width:6px;height:6px;border-radius:50%;background:var(--rust);
  box-shadow:0 0 0 0 rgba(200,80,30,.6);animation:pulse 2.2s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 8px rgba(200,80,30,0)}
  100%{box-shadow:0 0 0 0 rgba(200,80,30,0)}
}

/* ── Cintillo ──────────────────────────────────────── */
.ticker{
  display:flex;align-items:stretch;
  background:var(--ink);color:var(--paper);
  font-size:12px;overflow:hidden;
}
.ticker__label{
  flex:0 0 auto;background:var(--rust);color:#fff;
  padding:8px 16px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:10px;display:flex;align-items:center;
}
.ticker__viewport{flex:1;overflow:hidden;display:flex;align-items:center}
.ticker__track{
  display:flex;align-items:center;gap:16px;white-space:nowrap;
  padding-left:16px;animation:slide 55s linear infinite;
}
.ticker__track i{color:var(--rust);font-style:normal}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── Header ────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(244,242,237,.88);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .3s var(--ease);
}
.site-header.is-stuck{box-shadow:0 1px 24px rgba(20,22,26,.07)}
.header__inner{display:flex;align-items:center;gap:var(--gap);height:var(--header-h)}

.logo{display:flex;align-items:baseline;gap:8px;flex:0 0 auto}
.logo__mark{
  width:14px;height:14px;flex:0 0 auto;align-self:center;
  background:var(--rust);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.logo__mark--light{background:var(--rust)}
.logo__word{font-family:var(--display);font-size:28px;line-height:1;letter-spacing:-.01em}
.logo__sub{
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}

/* Separación fluida entre secciones. Con un hueco fijo, el header se
   desborda entre 1080 y 1300 px —poco con una serif estrecha, mucho con
   una sans ancha—, así que el menú cede espacio según el ancho real. */
.nav{display:flex;gap:clamp(14px,1.6vw,26px);margin-inline:auto;font-size:14px}
.nav a{position:relative;padding:4px 0;color:var(--ink-2);transition:color .2s var(--ease)}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--rust);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}

.header__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* ── Redes sociales ────────────────────────────────── */
.social{display:flex;align-items:center;gap:2px;margin-right:6px}
.social a{
  display:grid;place-items:center;width:34px;height:34px;border-radius:2px;
  color:var(--rust);
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.social svg{
  width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
/* El punto del logo de Instagram es macizo, no de trazo. */
.social svg .fill{fill:currentColor;stroke:none}
.social a:hover{background:rgba(200,80,30,.12);transform:translateY(-1px)}
.site-header.is-over .social a:hover{background:rgba(200,80,30,.22)}
/* Las dos barras van posicionadas al centro exacto del botón, no
   apiladas con márgenes: así al rotar cruzan justo en el mismo punto
   y forman una X limpia en lugar de una flecha torcida. */
.burger{
  display:none;position:relative;
  width:38px;height:38px;padding:0;
  background:none;border:1px solid var(--rule);border-radius:2px;cursor:pointer;
}
.burger span{
  position:absolute;left:50%;top:50%;
  width:17px;height:1.5px;background:var(--ink);
  transition:transform .32s var(--ease);
}
.burger span:first-child{transform:translate(-50%,-50%) translateY(-3.5px)}
.burger span:last-child{transform:translate(-50%,-50%) translateY(3.5px)}
.burger[aria-expanded="true"] span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}

.mobile-nav[hidden]{display:none}
/* Fondo y color propios, SIEMPRE. Sobre la portada el header pinta su
   texto en blanco, y sin esto el desplegable heredaba letras claras
   sobre fondo claro: se abría en blanco. */
.mobile-nav{
  display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);
  border-top:1px solid var(--rule);padding:8px clamp(20px,4vw,48px) 20px;
}
.mobile-nav > a{color:var(--ink)}

.burger[aria-expanded="true"]{background:rgba(20,22,26,.06)}
.mobile-nav > a{padding:12px 0;border-bottom:1px solid var(--rule);font-size:15px}
.social--movil{margin:14px 0 4px;gap:6px}
.social--movil a{width:40px;height:40px;border:1px solid var(--rule)}
.social--movil svg{width:19px;height:19px}

/* ══════════════════════════════════════════════════════
   PORTADA DE LA EDICIÓN
   Ocupa la pantalla completa: es la tapa de la revista.
   ══════════════════════════════════════════════════════ */
.masthead{
  position:relative;
  /* Sube por debajo del header para que la tapa quede a
     sangre completa y el header flote encima de ella. */
  margin-top:calc(-1 * var(--header-h));
  min-height:calc(100svh - 32px);
  display:flex;align-items:stretch;
  background:#0E1013;color:var(--paper);
  overflow:hidden;
}
.masthead__art{position:absolute;inset:0;z-index:0}
.masthead__art img{
  width:100%;height:100%;object-fit:cover;
  /* Rebaja el brillo y desatura un punto: cualquier foto entra así
     en la paleta de la revista en vez de pelearse con ella. */
  filter:saturate(.82) contrast(1.05);
}
/* EL VELO. Es lo que hace que el masthead se lea con CUALQUIER
   fotografía, incluidas las de cielo blanco. No tocar a la ligera:
   sin esto la portada depende de la suerte. */
.masthead__art::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(14,16,19,.92) 0%,
      rgba(14,16,19,.55) 30%,
      rgba(14,16,19,.45) 50%,
      rgba(14,16,19,.88) 82%,
      rgba(14,16,19,.96) 100%),
    linear-gradient(90deg,
      rgba(14,16,19,.75) 0%,
      rgba(14,16,19,.25) 55%,
      rgba(14,16,19,.1) 100%);
}

.masthead__inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  /* Los ritmos verticales del hero se miden en vh, no en vw: si la
     pantalla es baja el bloque se comprime en vez de expulsar el pie
     fuera de la ventana. */
  padding-top:calc(var(--header-h) + clamp(10px,1.6vh,26px));
  padding-bottom:clamp(18px,2.6vh,44px);
  width:100%;
}

.masthead__top{
  display:flex;align-items:center;gap:18px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:rgba(244,242,237,.7);
}
.masthead__top .rule{flex:1;height:1px;background:var(--rule-light)}

.masthead__word{
  font-family:var(--display);
  /* Limitado por ancho Y por alto: en portátiles de pantalla baja
     el masthead no puede comerse el espacio del titular. En pantallas
     normales (≥1000px de alto) manda el 15vw de siempre. */
  font-size:clamp(72px,min(15vw,22vh),230px);
  line-height:.82;letter-spacing:-.03em;
  margin-top:clamp(8px,1.8vh,32px);
}
.masthead__tag{
  font-size:clamp(10px,.85vw,12px);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(244,242,237,.5);font-weight:500;
  margin-top:12px;padding-bottom:clamp(14px,2.4vh,36px);
  border-bottom:1px solid var(--rule-light);
}

.masthead__lines{
  display:grid;grid-template-columns:1.5fr .78fr;
  gap:clamp(28px,4vw,72px);
  align-items:end;
  margin-top:auto;padding-top:clamp(20px,3vh,52px);
}

/* El tema de portada manda: sin corsé de ancho, que lo gobierne
   la columna del grid. */
.coverline{display:block;max-width:none}
.coverline .kicker{white-space:nowrap}
.coverline__head{
  display:block;font-family:var(--display);
  font-size:clamp(34px,4.9vw,72px);line-height:1.0;
  letter-spacing:-.015em;
  margin-top:12px;max-width:15ch;
  background-image:linear-gradient(var(--rust),var(--rust));
  background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease);
}
.coverline:hover .coverline__head{background-size:100% 2px}
.coverline__sub{
  display:block;margin-top:18px;max-width:40ch;
  color:rgba(244,242,237,.68);font-size:16px;line-height:1.6;
}

/* Despegadas del borde inferior: quedan a media altura del titular,
   como el sumario lateral de una portada impresa. */
.coverline__rest{
  align-self:end;border-top:1px solid var(--rule-light);
  margin-bottom:clamp(0px,4.5vh,72px);
}
.coverline__rest li{border-bottom:1px solid var(--rule-light)}
.coverline__rest a{
  display:block;padding:13px 0;font-size:15.5px;line-height:1.35;
  color:rgba(244,242,237,.82);
  transition:color .2s var(--ease),padding-left .3s var(--ease);
}
.coverline__rest em{
  display:block;font-style:normal;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rust);font-weight:600;margin-bottom:4px;
}
.coverline__rest a:hover{color:#fff;padding-left:8px}

.masthead__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  margin-top:clamp(18px,2.6vh,44px);
  padding-top:16px;border-top:1px solid var(--rule-light);
  font-size:12px;
}
.scroll-cue{
  display:inline-flex;align-items:center;gap:12px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:rgba(244,242,237,.85);
}
.scroll-cue:hover{color:#fff}
.scroll-cue__arrow{color:var(--rust);animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.masthead__next{color:rgba(244,242,237,.45);letter-spacing:.1em;text-transform:uppercase;font-size:11px}

/* Header sobre la portada: transparente y en claro */
.site-header.is-over{background:transparent;backdrop-filter:none;border-bottom-color:transparent;color:var(--paper)}
.site-header.is-over .logo{opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.site-header.is-over .nav a{color:rgba(244,242,237,.75)}
.site-header.is-over .nav a:hover{color:#fff}
.site-header.is-over .btn--ghost{border-color:var(--rule-light);color:var(--paper)}
.site-header.is-over .btn--ghost:hover{border-color:var(--paper);background:rgba(244,242,237,.08)}
.site-header.is-over .btn--solid{background:var(--paper);color:var(--ink)}
.site-header.is-over .btn--solid:hover{background:var(--rust);color:#fff}
.site-header.is-over .burger{border-color:var(--rule-light)}
.site-header.is-over .burger span{background:var(--paper)}
.logo{transition:opacity .3s var(--ease)}

/* Con el menú desplegado el header abandona el "modo portada".
   IMPORTANTE: este bloque tiene que ir DESPUÉS de las reglas .is-over
   de arriba. Ambas pesan igual, así que gana la última escrita; si se
   mueve más arriba, la X de cerrar vuelve a quedar blanca sobre fondo
   claro y desaparece. */
.site-header.menu-abierto{
  background:rgba(244,242,237,.97);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom-color:var(--rule);
  color:var(--ink);
}
.site-header.menu-abierto .logo{opacity:1;pointer-events:auto}
.site-header.menu-abierto .burger{border-color:var(--ink)}
.site-header.menu-abierto .burger span{background:var(--ink)}
.site-header.menu-abierto .btn--solid{background:var(--ink);color:var(--paper)}
.site-header.menu-abierto .btn--ghost{border-color:var(--rule);color:var(--ink)}

/* ── Sumario de la edición ─────────────────────────── */
.contents{padding-block:clamp(48px,6vw,88px)}
.contents__count{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.contents__grid{display:grid;grid-template-columns:1fr 330px;gap:clamp(32px,5vw,72px);align-items:start}

.toc{border-top:1px solid var(--rule)}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{display:flex;gap:clamp(16px,2.5vw,32px);padding:22px 0;transition:padding-left .3s var(--ease)}
.toc a:hover{padding-left:10px}
.toc__num{font-family:var(--display);font-size:15px;color:var(--rust);flex:0 0 auto;padding-top:4px}
.toc__body{display:block;flex:1}
.toc__head{
  display:block;font-family:var(--display);
  font-size:clamp(21px,2.2vw,29px);line-height:1.13;margin-top:6px;
}
.toc__meta{display:block;font-size:12px;color:var(--muted);margin-top:8px}

.edition{background:var(--paper-2);border:1px solid var(--rule);padding:28px 26px;border-radius:2px}
.edition__label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--rust);font-weight:600}
.edition__num{font-family:var(--display);font-size:86px;line-height:.85;margin:8px 0 22px}
.edition__facts{border-top:1px solid var(--rule);font-size:13.5px}
.edition__facts > div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule)}
.edition__facts dt{color:var(--muted)}
.edition__facts dd{margin:0;text-align:right;font-weight:500}
.btn--block{display:flex;justify-content:center;width:100%;margin-top:22px}
.edition__note{font-size:12px;color:var(--muted);text-align:center;margin-top:10px}

/* ── Archivo de ediciones ──────────────────────────── */
.archive{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.issue__cover{
  position:relative;display:block;overflow:hidden;border-radius:2px;
  background:var(--ink);aspect-ratio:1024/1536;
  box-shadow:0 14px 34px -24px rgba(20,22,26,.7);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.issue__cover img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) contrast(1.05);
  transition:transform .6s var(--ease);
}
.issue:hover .issue__cover img{transform:scale(1.04)}
/* Mismo criterio que la portada: el nombre de la revista no puede
   depender de si la foto tiene el cielo claro o cargado. */
.issue__cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(14,16,19,.85) 0%, rgba(14,16,19,.25) 38%,
    rgba(14,16,19,.15) 62%, rgba(14,16,19,.8) 100%);
}
.issue__mast,.issue__n{position:absolute;z-index:1;color:var(--paper)}
.issue__mast{
  top:5.5%;left:7%;
  font-family:var(--display);font-size:clamp(20px,2.2vw,28px);line-height:1;
}
.issue__n{
  bottom:5.5%;left:7%;
  font-size:10px;letter-spacing:.22em;font-weight:600;color:var(--rust);
}
.issue:hover .issue__cover{transform:translateY(-6px);box-shadow:0 22px 44px -22px rgba(20,22,26,.6)}
.issue__meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:16px}
.issue__title{font-family:var(--display);font-size:21px;line-height:1.15;margin-top:7px}
.issue__title a:hover{color:var(--rust)}

/* ── Altura Radio ──────────────────────────────────── */
.radio{background:var(--ink);color:var(--paper);padding-block:clamp(56px,7vw,96px)}
.radio__inner{display:grid;grid-template-columns:1fr 300px;gap:clamp(32px,5vw,72px);align-items:start}
.radio__title{
  font-family:var(--display);font-size:clamp(30px,4vw,50px);
  line-height:1.06;margin:16px 0 18px;max-width:22ch;
}
.radio__desc{color:rgba(244,242,237,.68);max-width:58ch}

.player{
  display:flex;align-items:center;gap:20px;
  margin-top:36px;padding:20px;
  border:1px solid var(--rule-light);border-radius:2px;
  background:rgba(244,242,237,.03);
}
.player__play{
  width:56px;height:56px;flex:0 0 auto;border:0;border-radius:50%;
  background:var(--rust);cursor:pointer;display:grid;place-items:center;
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.player__play:hover{transform:scale(1.07)}
.player__play svg{width:22px;height:22px;fill:#fff;margin-left:2px}
.player__play.is-playing svg{margin-left:0}
.player__body{flex:1;min-width:0}
.wave{
  height:38px;
  background:repeating-linear-gradient(90deg,
    rgba(244,242,237,.42) 0 2px, transparent 2px 6px);
  -webkit-mask-image:linear-gradient(90deg,#000 0 var(--p,18%),rgba(0,0,0,.28) var(--p,18%) 100%);
  mask-image:linear-gradient(90deg,#000 0 var(--p,18%),rgba(0,0,0,.28) var(--p,18%) 100%);
  transition:-webkit-mask-image .4s linear,mask-image .4s linear;
}
.player__meta{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;color:rgba(244,242,237,.55);font-variant-numeric:tabular-nums}

.radio__links{display:flex;flex-wrap:wrap;gap:22px;margin-top:26px;font-size:13px}
.radio__links a{color:rgba(244,242,237,.6);border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s,border-color .2s}
.radio__links a:hover{color:#fff;border-color:var(--rust)}

.sponsor{border:1px dashed var(--rule-light);padding:24px;border-radius:2px}
.sponsor__label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);font-weight:600}
.sponsor__copy{font-size:14px;color:rgba(244,242,237,.6);margin-top:10px;line-height:1.5}
.sponsor__slot{
  margin:18px 0;height:118px;display:grid;place-items:center;
  border:1px solid var(--rule-light);
  background:repeating-linear-gradient(45deg,rgba(244,242,237,.04) 0 8px,transparent 8px 16px);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,237,.4);
}

/* ── Bloques ───────────────────────────────────────── */
.block{padding-block:clamp(56px,7vw,96px)}
.block__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:16px;margin-bottom:clamp(24px,3vw,40px);
  border-bottom:1px solid var(--ink);
}
.block__title{font-family:var(--display);font-size:clamp(26px,3vw,36px);line-height:1}
.block__head--center{
  flex-direction:column;align-items:center;text-align:center;
  border-bottom:0;gap:14px;
}
.block__title--big{font-size:clamp(34px,4.4vw,56px);line-height:1.04;max-width:18ch}
.block__sub{max-width:62ch;color:var(--ink-2)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}

.card__media{
  display:block;overflow:hidden;background:var(--paper-2);
  margin-bottom:16px;border-radius:2px;aspect-ratio:3/2;
}
.card__media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) contrast(1.03);
  transition:transform .7s var(--ease);
}
.card:hover .card__media img{transform:scale(1.04)}
.card__title{
  font-family:var(--display);font-size:clamp(22px,2vw,27px);
  line-height:1.12;margin:8px 0 10px;
}
.card__title a{background-image:linear-gradient(var(--rust),var(--rust));
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s var(--ease);padding-bottom:2px}
.card:hover .card__title a{background-size:100% 1px}
.card__excerpt{color:var(--ink-2);font-size:15px}
.card__meta{margin-top:12px;font-size:12px;color:var(--muted)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}
.list li{border-bottom:1px solid var(--rule)}
.list a{display:grid;gap:5px;padding:18px 0;transition:padding-left .3s var(--ease)}
.list a:hover{padding-left:10px}
.list__head{font-family:var(--display);font-size:22px;line-height:1.16}
.list__meta{font-size:12px;color:var(--muted)}

/* ── Cifras ────────────────────────────────────────── */
.stats{background:var(--paper-2);padding-block:clamp(48px,6vw,80px);border-block:1px solid var(--rule)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:32px}
.stat{border-top:1px solid var(--ink);padding-top:18px}
.stat__num{
  font-family:var(--display);font-size:clamp(46px,5.5vw,74px);line-height:.9;
  display:inline-block;font-variant-numeric:tabular-nums;
}
.stat__unit{display:inline-block;font-family:var(--display);font-size:22px;color:var(--rust);margin-left:6px}
.stat__label{font-size:13px;color:var(--ink-2);margin-top:14px;max-width:26ch;line-height:1.45}

/* ── Serie destacada ───────────────────────────────── */
.feature{background:var(--ink);color:var(--paper)}
.feature__inner{display:grid;grid-template-columns:0.85fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;padding-block:clamp(48px,6vw,88px)}
.feature__media img{
  width:100%;height:auto;border-radius:2px;
  filter:saturate(.85) contrast(1.03);
}
.feature__title{font-family:var(--display);font-size:clamp(32px,4.2vw,54px);line-height:1.04;margin:16px 0 18px;max-width:16ch}
.feature__text{color:rgba(244,242,237,.66);max-width:56ch}
.feature__parts{margin-top:32px;border-top:1px solid var(--rule-light)}
.feature__parts li{border-bottom:1px solid var(--rule-light)}
.feature__parts a{display:flex;gap:18px;padding:15px 0;font-size:16px;color:rgba(244,242,237,.85);transition:color .2s var(--ease),padding-left .3s var(--ease)}
.feature__parts a span{font-family:var(--display);color:var(--rust);width:22px;flex:0 0 auto}
.feature__parts a:hover{color:#fff;padding-left:8px}

/* ── Oferta comercial ──────────────────────────────── */
.offers{margin-top:8px}
.offer{border:1px solid var(--rule);padding:28px 26px;border-radius:2px;background:#fff;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.offer:hover{transform:translateY(-4px);box-shadow:0 18px 40px -28px rgba(20,22,26,.45)}
.offer--featured{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.offer__tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--rust)}
.offer__title{font-family:var(--display);font-size:28px;line-height:1.1;margin:10px 0 12px}
.offer__text{font-size:14.5px;color:var(--ink-2)}
.offer--featured .offer__text{color:rgba(244,242,237,.68)}
.offer__list{margin-top:20px;border-top:1px solid var(--rule);font-size:14px}
.offer--featured .offer__list{border-color:var(--rule-light)}
.offer__list li{padding:11px 0 11px 20px;border-bottom:1px solid var(--rule);position:relative}
.offer--featured .offer__list li{border-color:var(--rule-light)}
.offer__list li:last-child{border-bottom:0}
.offer__list li::before{content:"";position:absolute;left:0;top:19px;width:7px;height:1px;background:var(--rust)}
.offers__cta{text-align:center;margin-top:clamp(32px,4vw,48px)}

/* ── Newsletter ────────────────────────────────────── */
.news{border-top:1px solid var(--ink);padding-block:clamp(48px,6vw,80px)}
.news__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.news__title{font-family:var(--display);font-size:clamp(28px,3.6vw,44px);line-height:1.08}
.news__text{color:var(--ink-2);margin-top:14px;font-size:15px}
.news__form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.news__form input{
  flex:1;min-width:200px;padding:14px 16px;font:inherit;font-size:15px;
  border:1px solid var(--ink);border-radius:2px;background:transparent;color:var(--ink);
}
.news__form input::placeholder{color:var(--muted)}
.news__form .btn{padding:14px 26px}
.news__note{flex:0 0 100%;font-size:13px;color:var(--rust);min-height:19px}

/* ── Footer ────────────────────────────────────────── */
.site-footer{background:var(--ink);color:var(--paper);padding-top:clamp(48px,6vw,72px)}
.footer__inner{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--gap);padding-bottom:48px}
.footer__word{font-family:var(--display);font-size:34px;line-height:1;margin-top:12px}
.footer__tag{color:rgba(244,242,237,.55);font-size:14px;margin-top:12px;max-width:30ch}
.footer__col{display:flex;flex-direction:column;gap:11px;font-size:14px}
.footer__h{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,242,237,.4);font-weight:600;margin-bottom:5px}
.footer__col a{color:rgba(244,242,237,.75);transition:color .2s var(--ease)}
.footer__col a:hover{color:var(--rust)}
.footer__base{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--rule-light);padding-block:22px;
  font-size:12px;color:rgba(244,242,237,.45);
}

/* ── Animación de entrada ──────────────────────────── */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ── Responsive ────────────────────────────────────── */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:block}
  .masthead__lines{grid-template-columns:1fr;gap:28px}
  .coverline{max-width:none}
  .contents__grid{grid-template-columns:1fr}
  .archive{grid-template-columns:repeat(2,1fr)}
  .radio__inner{grid-template-columns:1fr}
  .feature__inner{grid-template-columns:1fr}
  .feature__media{max-width:420px}
  .footer__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .grid-3{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:1fr 1fr}
  .news__inner{grid-template-columns:1fr}
  /* En pantallas estrechas el header solo aguanta logo + Anunciar +
     menú. Las redes y Altura Radio se van al desplegable: si no, el
     botón de menú acaba fuera de la pantalla. */
  .header__actions .btn--ghost{display:none}
  .header__actions .social{display:none}
}
@media (max-width:560px){
  .stats__grid{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr}
  .ticker__label{padding:8px 12px}
  :root{--header-h:64px}
  .masthead__foot{flex-direction:column;align-items:flex-start;gap:10px}
  .archive{grid-template-columns:1fr}
}

/* Windows trae "reducir movimiento" activado de fábrica en muchos
   equipos, así que apagarlo TODO deja el sitio muerto para gente que
   nunca pidió eso. Silenciamos lo que de verdad puede marear —los
   bucles infinitos y los desplazamientos— y conservamos los fundidos,
   que no producen malestar vestibular. */
@media (prefers-reduced-motion:reduce){
  .ticker__track,.pulse,.scroll-cue__arrow{animation:none!important}
  .reveal{transform:none}
  .reveal.is-in{transition:opacity .5s var(--ease)}
  .card:hover .card__media img,
  .issue:hover .issue__cover img,
  .masthead__art img{transform:none!important}
}