:root{
  --papel:#FAFBFA;
  --verde:#0D5C4C;
  --selva:#1E7663;
  --salvia:#C1CCC8;
  --ladrillo:#750E09;
  --malva:#834E56;
  --tinta:#12211E;

  --display:"Space Grotesk","Arial Narrow",Arial,Helvetica,sans-serif;
  --texto:"Inter",Arial,Helvetica,sans-serif;

  /* escala 1.25 */
  --t-titular:clamp(2.5rem,6.1vw,5.7rem);
  --t-titular-b:clamp(1.45rem,2.4vw,2.2rem);
  --t-sub:clamp(1.1rem,1.85vw,1.55rem);
  --t-bajada:clamp(1rem,1.3vw,1.2rem);
  --t-cuerpo:clamp(.94rem,1.02vw,1.04rem);
  --t-epigrafe:.78rem;
  --t-antetitulo:.7rem;

  --hdr:66px;
  --margen:max(6.2vw,22px);
  --ease:cubic-bezier(.22,.68,.16,1);

  --bg:var(--papel);
  --fg:var(--tinta);
  --acc:var(--verde);
  --line:rgba(18,33,30,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--texto);
  font-size:var(--t-cuerpo);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde)}

.wrap{max-width:68ch;margin:0 auto;padding:clamp(2.5rem,7vw,5rem) var(--margen)}
.ante{font-size:var(--t-antetitulo);text-transform:uppercase;letter-spacing:.12em;
  font-weight:600;color:var(--selva);margin:0 0 .9rem}
h1{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.1;
  font-size:var(--t-titular-b);margin:0 0 .8rem}
h2{font-family:var(--display);font-weight:500;letter-spacing:-.01em;
  font-size:var(--t-sub);margin:2.4rem 0 .7rem}
.bajada{font-size:var(--t-bajada);font-weight:300;color:rgba(18,33,30,.78);margin:0 0 1.6rem}
/* La bajada del indice de notas dejo de ser una linea: son tres frases que
   explican quien redacta y quien edita. Necesita interlineado de parrafo. */
.bajada--intro{line-height:1.55;max-width:60ch}
.bajada--intro a{color:var(--verde);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.bajada--intro a:hover{text-decoration-thickness:2px}
.fecha{font-size:var(--t-epigrafe);color:rgba(18,33,30,.6)}
.filete{height:4px;width:64px;background:var(--verde);border:0;margin:0 0 2rem}

.lista{list-style:none;margin:0;padding:0}
.lista li{border-top:1px solid var(--line);padding:1.6rem 0}
.lista li:last-child{border-bottom:1px solid var(--line)}
.lista h2{margin:.3rem 0 .4rem}
.lista a{text-decoration:none;color:inherit}
.lista a:hover h2{color:var(--verde)}

.vacio{border:1px dashed var(--line);padding:2rem;text-align:center;
  color:rgba(18,33,30,.6);font-size:var(--t-epigrafe)}

.pie{border-top:1px solid var(--line);padding:1.6rem var(--margen);
  font-size:var(--t-epigrafe);color:rgba(18,33,30,.6);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.pie a{color:var(--selva)}

/* Antes la foto llegaba a 56vh (casi la pantalla completa en laptops
   bajos): el titular quedaba fuera de la vista sin hacer scroll. Ahora
   la foto se achica y el titular se superpone abajo, sobre un
   degradado oscuro que garantiza contraste sin importar cuán clara
   sea la foto (ver calculo de contraste en el commit). */
.portada{margin:0;padding:0;position:relative;overflow:hidden}
.portada img{width:100%;height:clamp(240px,34vw,420px);object-fit:cover;display:block}
.portada__velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(9,14,12,.88) 0%, rgba(9,14,12,.55) 40%, rgba(9,14,12,0) 75%)}
.portada__titular{position:absolute;left:0;right:0;bottom:0;
  padding:clamp(1.4rem,4vw,2.4rem) var(--margen) clamp(1.3rem,3vw,1.9rem);
  max-width:calc(68ch + var(--margen) * 2);margin:0 auto}
.portada__titular .ante{color:rgba(250,251,250,.86)}
.portada__titular h1{color:var(--papel)}

.lista__fila{display:flex;gap:clamp(14px,2.4vw,26px);align-items:flex-start}
.lista__texto{flex:1;min-width:0}
.lista__mini{flex:none;width:clamp(88px,20vw,148px);aspect-ratio:3/2;
  overflow:hidden;border-radius:2px;background:var(--salvia)}
.lista__mini img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:520px){ .lista__mini{width:84px} }