@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════
   TABLERO · sistema de diseño
   Diario del automóvil mexicano. Tres superficies: Portada · Sección · Nota

   Los acentos vienen de objetos físicos reales de la carretera mexicana:
     topo  → cinta reflejante de tope / caseta de cobro
     rosa  → rosa mexicano de los rótulos pintados a mano
     frío  → azul cobalto del talavera
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1 · TOKENS ─────────────────────────── */
:root{
  --asfalto:#15120F;  --asfalto-alto:#1F1B17;  --regla-noche:#332B25;
  --papel:#F1E8D6;    --papel-alto:#E7DCC7;    --regla-papel:#CBBFA6;
  --topo:#F2B705;     --rosa:#D62A6B;          --negro-cinta:#0E0C0A;

  --mono: ui-monospace, "JetBrains Mono", "IBM Plex Mono", Consolas, "Liberation Mono", monospace;
  --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --texto:  "Archivo", system-ui, "Segoe UI", Arial, sans-serif;

  --sep: clamp(14px, 1.9vw, 26px);
  --ancho: 1240px;
  --lectura: 1180px;   /* nota: columna de texto más angosta que la portada */
  --borde: 2px;
}

[data-tema="noche"]{
  --fondo:var(--asfalto); --alzado:var(--asfalto-alto);
  --tinta:var(--papel);   --suave:#A99C8C;
  --regla:var(--regla-noche); --frio:#8CC0EE;
  --foto-a:#262019; --foto-b:#100E0C;
}
[data-tema="papel"]{
  --fondo:var(--papel); --alzado:var(--papel-alto);
  --tinta:#1A1512;      --suave:#5C534A;
  --regla:var(--regla-papel); --frio:#1F4E7A;
  --foto-a:#DED3BC; --foto-b:#F1E8D6;
}
/* banda siempre nocturna: cabecera, Industria, pie */
.sobre-asfalto{
  --fondo:var(--asfalto); --alzado:var(--asfalto-alto);
  --tinta:var(--papel);   --suave:#A99C8C;
  --regla:var(--regla-noche); --frio:#8CC0EE;
  --foto-a:#262019; --foto-b:#100E0C;
  /* body 的 color 已在 html 层按主题解析；此处必须显式重置，否则浅色主题下文字继承深色 */
  color:var(--tinta);
}
/* invierte la superficie respecto al tema activo (Pruebas) */
[data-tema="noche"] .inverso{
  --fondo:var(--papel); --alzado:var(--papel-alto);
  --tinta:#1A1512;      --suave:#5C534A;
  --regla:var(--regla-papel); --frio:#1F4E7A;
  --foto-a:#DED3BC; --foto-b:#F1E8D6;
  color:var(--tinta);
}
[data-tema="papel"] .inverso{
  --fondo:var(--asfalto); --alzado:var(--asfalto-alto);
  --tinta:var(--papel);   --suave:#A99C8C;
  --regla:var(--regla-noche); --frio:#8CC0EE;
  --foto-a:#262019; --foto-b:#100E0C;
  color:var(--tinta);
}

/* ─────────────────────────── 2 · BASE ───────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--texto); font-size:17px; line-height:1.6;
  font-variation-settings:"wdth" 100,"wght" 400;
  transition:background-color .25s ease, color .25s ease;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}

:focus-visible{outline:3px solid var(--topo); outline-offset:3px; border-radius:1px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salto{position:absolute;left:-9999px;top:0;z-index:99;background:var(--topo);color:var(--negro-cinta);padding:12px 18px;font-weight:800}
.salto:focus{left:8px;top:8px}

/* ─────────────────────────── 3 · REJILLA ────────────────────────── */
.envoltorio{max-width:var(--ancho); margin-inline:auto; padding-inline:clamp(16px,3.2vw,34px)}
.envoltorio--lectura{max-width:var(--lectura)}
.rejilla{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--sep)}
.u8{grid-column:span 8} .u4{grid-column:span 4}
.u7{grid-column:span 7} .u5{grid-column:span 5} .u3{grid-column:span 3}
.u5--apilado{display:flex; flex-direction:column; justify-content:space-between}
@media (max-width:900px){
  .rejilla{grid-template-columns:repeat(6,1fr)}
  .u8,.u7,.u5,.u4{grid-column:1 / -1}
  .u3{grid-column:span 2}
}
@media (max-width:560px){ .u3{grid-column:1 / -1} }

/* ─────────────── MOTIVO 1 · cinta reflejante de tope ────────────── */
.cinta{
  height:9px;
  background:repeating-linear-gradient(-45deg,
    var(--topo) 0 13px, var(--negro-cinta) 13px 26px);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(0,0,0,.5);
}
/* 板块内通栏 cinta：绝对定位贴合板块宽度（100vw 会算上滚动条宽度产生溢出） */
.banda--cinta{position:relative}
.banda--cinta > .cinta--plena{position:absolute; inset-inline:0; top:0; width:auto; margin-inline:0}
/* ───────── MOTIVO 2 · doble línea amarilla (separador) ──────────── */
.doble-linea{
  height:8px; border:0; margin:clamp(40px,5vw,68px) 0;
  background:linear-gradient(to bottom,
    var(--topo) 0 2px, transparent 2px 6px, var(--topo) 6px 8px);
}
@media (max-width:600px){ .doble-linea{margin-block:34px 28px} }

/* ─────────────── MOTIVO 3 · placa (matrícula) ───────────────────── */
.placa{
  display:inline-flex; align-items:center; gap:7px;
  border:2px solid var(--tinta); border-radius:4px;
  padding:3px 8px 2px;
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; line-height:1.5;
  box-shadow:inset 0 0 0 1px var(--fondo), inset 0 2px 4px rgba(0,0,0,.22);
}
.placa--clara{background:var(--papel); color:#15120F; border-color:#15120F; box-shadow:inset 0 0 0 1px #E7DCC7, inset 0 2px 4px rgba(0,0,0,.18)}

/* ─────────────────────────── 4 · TIPOGRAFÍA ─────────────────────── */
.display{
  font-family:var(--display); font-variation-settings:"wdth" 76,"wght" 820;
  line-height:.96; letter-spacing:-.01em; margin:0;
  text-wrap:balance; hyphens:auto;
}
.titan{font-size:clamp(2.3rem,5.9vw,4.4rem)}
.encabezado{font-size:clamp(1.85rem,3.6vw,2.9rem)}
.chico{font-size:clamp(1.24rem,1.9vw,1.55rem); line-height:1.06; font-variation-settings:"wdth" 78,"wght" 800}
.mediano{font-size:clamp(1.4rem,2.3vw,1.85rem); line-height:1.08; font-variation-settings:"wdth" 78,"wght" 810}
.bajada{font-size:1.08rem; line-height:1.62; max-width:62ch; color:var(--suave); margin:0}
.quitar{margin:0}
.enlace{display:inline-block; font-weight:700; font-size:.95rem; border-bottom:2px solid var(--topo); padding-bottom:1px}
.enlace:hover{border-bottom-color:var(--rosa)}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:9px 14px; font-size:.83rem; color:var(--suave); margin:0}
.seccion__kicker{
  display:flex; align-items:center; gap:9px;
  font-family:var(--display); font-variation-settings:"wdth" 80,"wght" 800;
  font-size:.95rem; letter-spacing:.01em; margin:0 0 10px;
}
.seccion__kicker::before{content:""; width:16px; height:7px; background:var(--rosa); flex:0 0 auto}
.dato{
  font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--suave); margin:0;
}

/* ─────────────────── 5 · FOTO ───────────────────────────────────── */
.foto{
  position:relative; overflow:hidden; isolation:isolate; display:block;
  background:linear-gradient(158deg, var(--foto-a) 0%, var(--foto-b) 68%);
}
.foto::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(115% 78% at 18% 12%, rgba(242,183,5,.16), transparent 62%),
    radial-gradient(95% 72% at 88% 92%, rgba(214,42,107,.14), transparent 60%);
  background:
    radial-gradient(115% 78% at 18% 12%, color-mix(in srgb, var(--topo) 22%, transparent), transparent 62%),
    radial-gradient(95% 72% at 88% 92%, color-mix(in srgb, var(--rosa) 20%, transparent), transparent 60%);
}
.foto::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.55;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 8px);
}
/* imágenes reales: cubren el marco; el degradado queda como fondo de carga */
.foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.foto__pie{
  position:absolute; left:12px; bottom:10px; margin:0; z-index:2;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--suave); text-shadow:0 1px 2px rgba(0,0,0,.55);
}
[data-tema="papel"] .foto__pie{text-shadow:0 1px 2px rgba(241,232,214,.7)}
.foto__raya{
  position:absolute; left:0; right:0; bottom:34%; height:14px; z-index:2;
  border-top:2px solid var(--topo); border-bottom:2px solid var(--topo);
  opacity:.42;
}

/* ─────────────────────────── 6 · CABECERA ───────────────────────── */
.cabecera{background:var(--asfalto); color:var(--papel); position:sticky; top:0; z-index:40}
.cabecera__barra{display:flex; align-items:center; gap:var(--sep); padding-block:14px}
.marca{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.marca__nombre{
  font-family:var(--display); font-variation-settings:"wdth" 68,"wght" 870;
  font-size:1.44rem; line-height:1; letter-spacing:-.015em; color:var(--papel);
}
/* la luz del tablero: un foco cuadrado, como el testigo que se enciende */
.marca__luz{width:9px; height:9px; background:var(--topo); flex:0 0 auto}
.nav{display:flex; gap:clamp(12px,1.6vw,24px); margin-inline-start:auto; flex-wrap:wrap}
.nav a{font-size:.94rem; font-weight:600; padding:5px 0; border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--topo)}
.nav a[aria-current="page"]{border-bottom-color:var(--rosa)}
.cabecera__herr{display:flex; align-items:center; gap:10px}
.buscar__campo{
  background:var(--asfalto-alto); color:var(--papel);
  border:1px solid var(--regla-noche); border-radius:2px;
  padding:8px 11px; font-size:.9rem; width:clamp(130px,15vw,190px);
}
.buscar__campo::placeholder{color:#8B8175}
.interruptor{
  background:transparent; border:1px solid var(--regla-noche); border-radius:2px;
  padding:8px 11px; font-size:.82rem; font-weight:700; cursor:pointer; white-space:nowrap;
}
.interruptor:hover{border-color:var(--topo); color:var(--topo)}
@media (max-width:820px){
  .cabecera__barra{flex-wrap:wrap; gap:12px 16px}
  .buscar__campo{display:none}
  .nav{order:3; width:100%; margin-inline-start:0; overflow-x:auto; white-space:nowrap; padding-bottom:2px}
}
.progreso{position:fixed; top:0; left:0; height:3px; z-index:60; width:calc(var(--p, 0) * 1%); background:var(--topo)}

/* serpentín de datos */
.serpentin{
  border-top:1px solid var(--regla-noche); background:#100E0C;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  color:#8B8175; overflow-x:auto; white-space:nowrap; scrollbar-width:none;
}
.serpentin::-webkit-scrollbar{display:none}
.serpentin ul{display:flex; gap:22px; margin:0; padding:9px 0; list-style:none}
.serpentin b{color:var(--papel); font-weight:600}
.serpentin .vivo{color:var(--topo)}

/* migas */
.migas{padding-block:14px; font-size:.85rem; color:var(--suave)}
.migas ol{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.migas li:not(:last-child)::after{content:"›"; margin-left:8px; color:var(--regla)}
.migas a{border-bottom:1px solid var(--regla)}
.migas a:hover{border-bottom-color:var(--topo)}

/* ─────────────────────── 7 · PORTADA (index) ────────────────────── */
.portada{padding-block:clamp(26px,4vw,46px)}
.principal{grid-column:span 8; display:flex; flex-direction:column; gap:14px}
.principal .foto{aspect-ratio:16/8; min-height:210px; border:var(--borde) solid var(--regla)}
.colateral{grid-column:span 4; display:flex; flex-direction:column; justify-content:space-between}
.colateral__item{padding:15px 0; border-top:1px solid var(--regla)}
.colateral__item:first-child{border-top:0; padding-top:0}
.colateral__item:last-child{border-bottom:1px solid var(--regla); padding-bottom:15px}
.colateral__item--media{align-items:center}
@media (max-width:900px){
  .principal,.colateral{grid-column:1 / -1}
  .colateral{border-top:2px solid var(--regla); margin-top:24px; padding-top:8px}
}

.nota{display:flex; flex-direction:column; gap:10px; padding-block:20px 22px; border-top:1px solid var(--regla)}
.nota__cabeza{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.nota__nota{font-size:1rem; max-width:64ch}
.nota--alta{padding-top:0; border-top:0}
.nota--alta .foto{aspect-ratio:16/9; border:var(--borde) solid var(--regla)}
@media (max-width:900px){ .nota--alta .foto{aspect-ratio:16/8} }

/* media-rich portada: 卡片带图变体（v3 统一版） */
/* 卡片统一元信息行：[■ Section ········ hace] */
.nota__linea{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; min-width:0}
.nota__linea .mini{
  display:inline-flex; align-items:center; gap:7px; min-width:0;
  font-family:var(--display); font-variation-settings:"wdth" 80,"wght" 800;
  font-size:.78rem; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap;
}
.nota__linea .mini::before{content:""; width:12px; height:6px; background:var(--rosa); flex:0 0 auto}
.nota__linea .dato{white-space:nowrap}

/* 缩略行卡片（colateral/堆叠/Industria 列表）：缩略图左 104px + 文字右 */
.colateral__item--media,
.nota--thumb{
  display:grid; grid-template-columns:104px minmax(0,1fr);
  gap:14px; align-items:center;
}
.colateral__item--media .colateral__cuerpo,
.nota--thumb .nota__cuerpo{display:flex; flex-direction:column; gap:7px; min-width:0}
.colateral__item--media .foto,
.nota--thumb .foto{aspect-ratio:4/3; border:1px solid var(--regla); align-self:start}
.colateral__item--media h2,
.nota--thumb h3{
  font-size:clamp(1.02rem,1.4vw,1.18rem); line-height:1.12;
  font-variation-settings:"wdth" 78,"wght" 800;
}
@media (max-width:560px){
  .colateral__item--media,
  .nota--thumb{grid-template-columns:92px minmax(0,1fr); gap:12px}
}
/* u3 表面卡：图顶置全出血 + alzado 卡面 */
.nota--media{
  border:var(--borde) solid var(--regla); background:var(--alzado);
  padding:0;
}
.nota--media .foto{aspect-ratio:16/9; border:0; border-bottom:var(--borde) solid var(--regla)}
.nota--media .nota__cuerpo{padding:13px 15px 15px; display:flex; flex-direction:column; gap:8px}
.nota--media h3{
  font-size:clamp(1.08rem,1.6vw,1.28rem); line-height:1.1;
  font-variation-settings:"wdth" 78,"wght" 800;
}
/* hover：图微放大（仅 linked 卡），尊重 reduced-motion */
@media (prefers-reduced-motion: no-preference){
  a.foto img{transition:transform .45s cubic-bezier(.2,.7,.25,1)}
  article:hover > a.foto img,
  article:hover a.fila__foto img{transform:scale(1.045)}
}

.banda{padding-block:clamp(34px,4.6vw,60px); background:var(--fondo)}
.banda__cabeza{grid-column:1 / -1; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sep); flex-wrap:wrap; margin-bottom:26px}
.banda__cabeza p, .banda__cabeza h2{margin:0}

/* pruebas: velocímetro */
.prueba{grid-column:span 4; background:var(--alzado); border:var(--borde) solid var(--regla); padding:18px; display:flex; flex-direction:column; gap:12px}
@media (max-width:900px){ .prueba{grid-column:1 / -1} }
.reloj{--v:50; position:relative; width:100%; max-width:168px; aspect-ratio:1; align-self:center; margin-block:2px}
.reloj svg{width:100%; height:100%; display:block; overflow:visible}
.reloj__pista{fill:none; stroke:var(--regla); stroke-width:2; stroke-dasharray:301.6 402.2; transform:rotate(45deg); transform-origin:80px 80px}
.reloj__marcas{fill:none; stroke:var(--regla); stroke-width:9; stroke-dasharray:1.6 7.4; opacity:.85}
.reloj__arco{fill:none; stroke:var(--topo); stroke-width:6; stroke-dasharray:calc(var(--v) * 3.016) 402.2; transform:rotate(45deg); transform-origin:80px 80px}
.reloj__centro{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.reloj__num{font-family:var(--mono); font-size:clamp(1.7rem,3.2vw,2.15rem); font-weight:600; line-height:1; letter-spacing:-.02em; margin:0}
.reloj__num span{font-size:.44em; color:var(--suave); letter-spacing:.06em}
.reloj__lbl{font-size:.76rem; color:var(--suave); margin:2px 0 0}
.ficha{display:grid; grid-template-columns:auto 1fr; gap:7px 14px; margin:0; padding:14px 0 0; border-top:1px solid var(--regla); font-size:.9rem}
.ficha dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--suave); padding-top:3px}
.ficha dd{margin:0; font-weight:600}

/* industria */
.industria-lista{grid-column:span 5; display:flex; flex-direction:column; justify-content:space-between}
.industria-lista .nota:first-child{border-top:0; padding-top:0}
.industria-lista .nota:last-child{border-bottom:1px solid var(--regla)}
@media (max-width:900px){ .industria-lista{grid-column:1 / -1} }
.destacado{grid-column:span 7; display:flex; flex-direction:column; gap:14px}
@media (max-width:900px){ .destacado{grid-column:1 / -1} }

/* ─────────────────────── 8 · SECCIÓN (archivo) ──────────────────── */
.cabecera-seccion{padding-block:clamp(22px,3.2vw,40px) 0}
.cabecera-seccion__top{display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sep); flex-wrap:wrap}
.tablero{display:flex; gap:clamp(18px,3vw,38px); flex-wrap:wrap; margin:22px 0 0; padding:0; list-style:none}
.tablero div{display:flex; flex-direction:column-reverse}
.tablero dt{font-size:.78rem; color:var(--suave); margin-top:2px}
.tablero dd{
  margin:0; font-family:var(--mono); font-size:clamp(1.35rem,2.6vw,1.9rem);
  font-weight:600; line-height:1; letter-spacing:-.02em;
}
.tablero dd span{font-size:.5em; color:var(--suave); letter-spacing:.04em}

.filtros{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:26px; padding-block:14px;
  border-top:2px solid var(--tinta); border-bottom:1px solid var(--regla);
}
.filtros__titulo{font-size:.82rem; color:var(--suave); margin:0 8px 0 0}
.chip{
  display:inline-block; border:2px solid var(--regla); padding:6px 13px;
  font-size:.88rem; font-weight:700; border-radius:2px;
}
.chip:hover{border-color:var(--tinta)}
.chip[aria-current="true"]{background:var(--topo); color:var(--negro-cinta); border-color:var(--topo)}
.filtros__orden{margin-inline-start:auto; display:flex; gap:8px; align-items:center}

/* lista en filas: distinta a la rejilla de portada, a propósito */
.lista{margin:0}
.fila{
  position:relative; display:grid;
  grid-template-columns:94px minmax(0,1fr) 152px;
  gap:clamp(14px,2vw,28px);
  padding-block:26px; border-top:1px solid var(--regla);
}
.fila:first-child{border-top:0}
.fila__fecha{display:flex; flex-direction:column; gap:9px; align-items:flex-start}
.fila__fecha time{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--suave); line-height:1.5;
}
.fila__cuerpo{display:flex; flex-direction:column; gap:9px; min-width:0}
.fila__titulo a::after{content:""; position:absolute; inset:0; z-index:1}
.fila:hover .chico a{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px}
.fila__foto{aspect-ratio:4/3; border:2px solid var(--regla); align-self:start}
.fila__dato{display:flex; flex-wrap:wrap; gap:6px 16px}
@media (max-width:820px){
  .fila{grid-template-columns:1fr; gap:10px}
  .fila__foto{display:none}
  .fila__fecha{flex-direction:row; align-items:center; gap:12px}
}

.paginacion{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:34px; padding-top:20px; border-top:2px solid var(--regla)}
.paginacion__paginas{display:flex; gap:6px; flex-wrap:wrap}
.paginacion a, .paginacion span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 12px;
  border:2px solid var(--regla); font-weight:700; font-size:.92rem;
}
.paginacion a:hover{border-color:var(--tinta)}
.paginacion [aria-current="page"]{background:var(--topo); color:var(--negro-cinta); border-color:var(--topo)}
.paginacion .hueco{border:0; min-width:auto; width:auto; color:var(--suave)}

/* rail genérico (sección y nota) */
.rail__bloque{border-top:2px solid var(--regla); padding-top:16px; margin-bottom:30px}
.rail__bloque:first-child{border-top:0; padding-top:0}
.rail__titulo{
  font-family:var(--display); font-variation-settings:"wdth" 84,"wght" 800;
  font-size:.92rem; letter-spacing:.01em; margin:0 0 14px; color:var(--topo);
}
.rail__lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.rail__lista li{padding:13px 0; border-top:1px solid var(--regla); display:flex; gap:12px; align-items:baseline}
.rail__lista li:first-child{border-top:0; padding-top:0}
.rail__num{font-family:var(--mono); font-size:.95rem; color:var(--topo); font-weight:600; flex:0 0 auto}
.rail__txt{font-size:.97rem; font-weight:600; line-height:1.35}
.rail__chips{display:flex; flex-wrap:wrap; gap:8px}

/* ─────────────────────── 9 · NOTA (detalle) ─────────────────────── */
.art-cabeza{padding-block:clamp(18px,2.6vw,32px) 0; display:flex; flex-direction:column; gap:16px}
.art__titulo{font-size:clamp(2.35rem,6.4vw,4.9rem); font-variation-settings:"wdth" 70,"wght" 840; line-height:.93}
.art__bajada{font-size:clamp(1.1rem,1.6vw,1.32rem); line-height:1.55; max-width:60ch; color:var(--suave); margin:0}
.art__autor{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-block:14px; border-top:1px solid var(--regla); border-bottom:1px solid var(--regla)}
.art__autor strong{font-weight:800}
.art__foto{aspect-ratio:16/8; border:var(--borde) solid var(--regla); margin-top:24px}
@media (max-width:700px){ .art__foto{aspect-ratio:4/3} }

.nota-cuerpo{padding-block:clamp(28px,4vw,52px)}
.nota-cuerpo__rejilla{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(26px,4.4vw,64px); align-items:start}
@media (max-width:1000px){ .nota-cuerpo__rejilla{grid-template-columns:1fr} }
/* 124 px = alto de la cabecera fija; la rail y los anclajes deben respetarlo */
@media (min-width:1001px){
  .rail-nota{position:sticky; top:128px}
}
.prosa h2[id]{scroll-margin-top:130px}

/* prosa */
.prosa{max-width:66ch}
.prosa > p{font-size:1.075rem; line-height:1.7; margin:0 0 22px}
.prosa > p.entrada{font-size:1.24rem; line-height:1.55; font-weight:600}
.prosa > p.entrada::first-letter{
  font-family:var(--display); font-variation-settings:"wdth" 72,"wght" 860;
  font-size:3.1em; line-height:.78; float:left; margin:6px 12px 0 0; color:var(--topo);
}
.prosa h2{
  font-family:var(--display); font-variation-settings:"wdth" 80,"wght" 810;
  font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.1; margin:38px 0 14px;
}
.prosa h3{font-size:1.06rem; font-weight:800; margin:28px 0 10px}
.prosa ul, .prosa ol{margin:0 0 22px; padding-inline-start:22px}
.prosa li{margin-bottom:9px; line-height:1.65}
.prosa a:not(.enlace){border-bottom:2px solid var(--frio)}
.prosa strong{font-weight:800}
.prosa img{height:auto; border:2px solid var(--regla)}
.cita{
  margin:30px 0; padding:4px 0 4px 22px; border-left:4px solid var(--rosa);
  font-family:var(--display); font-variation-settings:"wdth" 80,"wght" 740;
  font-size:clamp(1.28rem,2.2vw,1.62rem); line-height:1.24;
}
.cita footer{font-family:var(--texto); font-variation-settings:"wdth" 100,"wght" 400; font-size:.86rem; color:var(--suave); margin-top:10px}
.cifra{
  margin:30px 0; padding:20px 22px; background:var(--alzado);
  border-left:4px solid var(--topo); display:flex; flex-direction:column; gap:6px;
}
.cifra b{font-family:var(--mono); font-size:clamp(1.9rem,4vw,2.6rem); font-weight:600; line-height:1; letter-spacing:-.02em}
.cifra span{font-size:.92rem; color:var(--suave)}
.figura{margin:32px 0}
.figura .foto{aspect-ratio:16/9; border:2px solid var(--regla)}
.figura figcaption{font-size:.87rem; color:var(--suave); margin-top:9px; max-width:60ch}
.nota__foto{aspect-ratio:16/9; border:2px solid var(--regla)}
.actualizado{
  display:flex; gap:10px; align-items:baseline; margin:0 0 26px;
  padding:11px 14px; border-left:4px solid var(--frio); background:var(--alzado); font-size:.92rem;
}
.actualizado b{font-weight:800}

/* ficha ancha: hoja de datos antes de la prosa, no escondida en el rail */
.ficha-ancho{
  display:grid; grid-template-columns:190px minmax(0,1fr);
  gap:clamp(20px,3vw,40px); align-items:center;
  background:var(--alzado); border:2px solid var(--regla); border-top:4px solid var(--rosa);
  padding:22px 24px; margin-top:26px;
}
.ficha-ancho__datos{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  gap:16px 26px; margin:0;
}
.ficha-ancho__datos div{display:flex; flex-direction:column; gap:3px}
.ficha-ancho dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--suave)}
.ficha-ancho dd{margin:0; font-weight:800; font-size:1.08rem; line-height:1.2}
@media (max-width:640px){
  .ficha-ancho{grid-template-columns:1fr; padding:18px}
  .ficha-ancho .reloj{max-width:160px}
}

/* ficha técnica de la nota */
.ficha-nota{border:2px solid var(--regla); border-top:4px solid var(--rosa); padding:18px 20px; background:var(--alzado)}
.ficha-nota h2{font-family:var(--display); font-variation-settings:"wdth" 84,"wght" 800; font-size:1rem; margin:0 0 14px}
.ficha-nota table{width:100%; border-collapse:collapse; font-size:.94rem}
.ficha-nota th, .ficha-nota td{text-align:left; padding:9px 0; border-bottom:1px solid var(--regla); vertical-align:top}
.ficha-nota tr:last-child th, .ficha-nota tr:last-child td{border-bottom:0}
.ficha-nota th{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--suave); font-weight:600; width:44%; padding-right:14px}
.ficha-nota td{font-weight:600}

/* índice */
.indice{border:2px solid var(--regla); padding:18px 20px}
.indice h2{font-family:var(--display); font-variation-settings:"wdth" 84,"wght" 800; font-size:1rem; margin:0 0 12px}
.indice ol{margin:0; padding-inline-start:20px; font-size:.94rem}
.indice li{margin-bottom:9px}
.indice a{color:var(--suave)}
.indice a:hover{color:var(--tinta)}
.indice [aria-current="true"]{color:var(--tinta); font-weight:800}

.tabla-datos{width:100%; border-collapse:collapse; font-size:.9rem}
.tabla-datos th{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--suave); font-weight:600; padding:8px 10px 8px 0; border-bottom:1px solid var(--regla); text-align:left;
}
.tabla-datos td{padding:8px 10px 8px 0; border-bottom:1px solid var(--regla); font-weight:600}
.tabla-datos th:not(:first-child), .tabla-datos td:not(:first-child){text-align:right; font-family:var(--mono)}
.tabla-datos td:nth-child(3){color:var(--suave)}
.tabla-datos tr:last-child td{border-bottom:0}

/* cierre de nota */
.etiquetas{display:flex; flex-wrap:wrap; gap:8px; margin:34px 0 0; padding:0; list-style:none}
.etiquetas a{display:inline-block; border:2px solid var(--regla); padding:6px 12px; font-size:.86rem; font-weight:700}
.etiquetas a:hover{border-color:var(--rosa); color:var(--rosa)}
.autor-bio{display:flex; gap:16px; margin-top:34px; padding-top:24px; border-top:2px solid var(--regla)}
.autor-bio__retrato{width:64px; height:64px; flex:0 0 auto; border:2px solid var(--regla); background:var(--alzado)}
.autor-bio h2{margin:0; font-size:1.05rem; font-weight:800}
.autor-bio p{margin:6px 0 0; font-size:.94rem; color:var(--suave); max-width:56ch}
.autor-bio .dato{margin-top:8px}

.relacionadas{padding-block:clamp(34px,4.6vw,58px) 0}
.relacionadas .nota{padding-block:18px 0}
@media (max-width:900px){ .relacionadas .u3{grid-column:span 3} }
@media (max-width:600px){ .relacionadas .u3{grid-column:1 / -1} }

/* ─────────────────────── 10 · BOLETÍN Y PIE ─────────────────────── */
.boletin{background:var(--rosa); color:#FFF6E9; padding-block:clamp(34px,4.6vw,58px); margin-top:clamp(30px,4vw,50px)}
.boletin__caja{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(22px,4vw,52px); align-items:end}
@media (max-width:760px){ .boletin__caja{grid-template-columns:1fr} }
.boletin h2{color:#FFF6E9}
.boletin p{color:#FFE8F1}
.boletin form{display:flex; flex-wrap:wrap; gap:10px}
.boletin input{
  flex:1 1 220px; background:transparent; color:#FFF6E9;
  border:2px solid #FFF6E9; border-radius:2px; padding:13px 14px; font-size:1rem;
}
.boletin input::placeholder{color:rgba(255,246,233,.88)}
.boletin button{
  flex:0 0 auto; background:var(--topo); color:var(--negro-cinta); border:0; border-radius:2px;
  padding:13px 24px; font-weight:800; font-size:1rem; cursor:pointer;
}
.boletin button:hover{background:#FFF6E9}
.boletin .aviso{font-size:.84rem; margin:12px 0 0; color:#FFE8F1}

.pie{background:var(--asfalto); color:var(--papel); padding-block:44px 34px; margin-top:clamp(38px,5vw,64px)}
.pie__rejilla{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(20px,3vw,40px)}
@media (max-width:760px){ .pie__rejilla{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .pie__rejilla{grid-template-columns:1fr} }
.pie h3{font-family:var(--display); font-variation-settings:"wdth" 82,"wght" 800; font-size:.9rem; letter-spacing:.02em; margin:0 0 12px; color:var(--topo)}
.pie ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:.92rem}
.pie ul a:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}
.pie__lema{color:#A99C8C; font-size:.94rem; max-width:34ch; margin:12px 0 0}
.pie__legal{border-top:1px solid var(--regla-noche); margin-top:30px; padding-top:16px; font-size:.8rem; color:#8B8175; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.pie__legal a{border-bottom:1px solid #8B8175}

/* ────────────── 11 · un solo momento de movimiento ──────────────── */
@media (prefers-reduced-motion: no-preference){
  .portada .principal > *{animation:subir .55s cubic-bezier(.2,.7,.25,1) both}
  .portada .principal > *:nth-child(2){animation-delay:.05s}
  .portada .principal > *:nth-child(3){animation-delay:.1s}
  .portada .principal > *:nth-child(4){animation-delay:.15s}
  .portada .principal > *:nth-child(5){animation-delay:.2s}
  @keyframes subir{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
}

/* ════════════════════════════════════════════════════════════════════
   12 · EXTENSIONES DEL SITIO DINÁMICO (no estaban en el prototipo)
   comentarios · estados vacíos · 404
   ════════════════════════════════════════════════════════════════════ */

/* comentarios: mismos materiales, sin software redondeado */
.comentarios__lista{display:flex; flex-direction:column; gap:0; margin-bottom:30px}
.cmt{border:2px solid var(--regla); background:var(--alzado); padding:16px 18px; margin-bottom:14px}
.cmt__cabeza{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.cmt__cabeza b{font-weight:800; font-size:.95rem}
.cmt__cabeza time{font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--suave)}
.cmt__texto{font-size:.98rem; line-height:1.6}
.cmt__responder{
  margin-top:10px; background:transparent; border:1px solid var(--regla); border-radius:2px;
  padding:5px 12px; font-size:.78rem; font-weight:700; cursor:pointer; color:var(--suave);
}
.cmt__responder:hover{border-color:var(--topo); color:var(--topo)}
.cmt--respuesta{margin:14px 0 0 22px; border-left:4px solid var(--rosa); background:transparent}
.cmt-form{border-top:2px solid var(--tinta); padding-top:22px; max-width:640px}
.cmt-form__fila{margin-bottom:12px}
.cmt-form input, .cmt-form textarea{
  width:100%; background:var(--alzado); color:var(--tinta);
  border:2px solid var(--regla); border-radius:2px; padding:11px 13px;
  font:inherit; font-size:.98rem;
}
.cmt-form input:focus-visible, .cmt-form textarea:focus-visible{outline-offset:0}
.cmt-form textarea{min-height:120px; resize:vertical}
.cmt-form button{
  background:var(--topo); color:var(--negro-cinta); border:0; border-radius:2px;
  padding:12px 22px; font-weight:800; font-size:.95rem; cursor:pointer;
}
.cmt-form button:hover{background:var(--papel)}

/* estado vacío (sección/búsqueda sin notas) */
.vacio{
  font-size:1.05rem; color:var(--suave); border:2px dashed var(--regla);
  padding:34px 26px; text-align:center;
}

/* 404 */
.e404{padding-block:clamp(50px,9vw,110px); text-align:center}
.e404__codigo{
  font-family:var(--mono); font-size:clamp(4rem,11vw,8rem); font-weight:600;
  line-height:1; letter-spacing:-.04em; color:var(--topo); margin:0;
}
.e404__msg{max-width:52ch; margin:16px auto 30px; color:var(--suave)}