/* =========================================================
   DIARIO OBELISCO — Sistema de diseño «broadsheet»
   Papel y tinta. Filetes, no cajas. Cero radios, cero sombras.
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Tinta y papel — neutros, sin matiz cálido */
  --tinta:#141414;
  --tinta-suave:#565656;
  --tinta-tenue:#858585;
  --papel:#FFFFFF;
  --papel-alt:#F4F4F4;      /* huecos de anuncio y franja comercial */

  /* Acentos */
  --rojo:#011E46;   /* el acento es el azul del logotipo */
  --rojo-oscuro:#0A2E63;
  --azul:#011E46;          /* azul del logotipo */
  --azul-oscuro:#0A2E63;

  /* Filetes: la unidad estructural de todo el diseño */
  --filete:#DEDEDE;         /* hairline */
  --filete-fuerte:#141414;  /* regla de sección */

  /* Semánticos */
  --texto:var(--tinta);
  --texto-suave:var(--tinta-suave);
  --enlace:var(--tinta);

  /* Tipografía */
  --serif:"Source Serif 4",Georgia,"Times New Roman",Times,serif;
  --titular:"Playfair Display","Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --ancho:1180px;
  --ancho-texto:660px;
  --radio:0;

  /* Alias de compatibilidad: los estilos en línea de las páginas
     siguen usando estos nombres. Todos apuntan a la tinta y el papel. */
  --borde:var(--filete);
  --superficie:var(--papel);
  --texto-tenue:var(--tinta-tenue);
  --arena:var(--papel-alt);
  --arena-borde:var(--tinta-tenue);
  --verde:var(--rojo);
  --verde-oscuro:var(--rojo-oscuro);
  --verde-claro:var(--papel-alt);
  --ambar:var(--rojo);
  --grafito:var(--tinta);
  --gris:var(--tinta-suave);
  --niebla:var(--filete);
  --fondo:var(--papel);
  --sombra:none;
}

/* El diario es siempre claro: no hay modo oscuro. */

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--texto);
  font-family:var(--serif);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--enlace);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
h1,h2,h3,h4{font-family:var(--titular);font-weight:700;line-height:1.14;margin:0;letter-spacing:-.008em}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
::selection{background:var(--tinta);color:var(--papel)}

.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:18px}

/* Cuando aparecen los rascacielos, la columna de texto cede el ancho
   justo para que quepan las dos torres de 160 px más su margen.
   400 = 2 × (160 de anuncio + 20 de aire + 20 de margen exterior). */
@media (min-width:1320px){
  :root{--ancho:min(1180px, calc(100vw - 400px))}
}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Etiquetilla sans que se repite en todo el diario */
.sans-etiqueta,.kicker,.bloque__titulo,.meta,.nav-secciones a,
.esencial h2,.tira h2,.fuentes h2{
  font-family:var(--sans);
}

/* ---------- 3. AVISO DEMO ---------- */
.aviso-demo{
  background:var(--tinta);color:var(--papel);font-family:var(--sans);
  font-size:11.5px;font-weight:600;text-align:center;padding:6px 18px;letter-spacing:.02em;margin:0;
}

/* ---------- 4. MANCHETA (portada) ---------- */
.mancheta{border-bottom:1px solid var(--filete);text-align:center;padding:16px 18px 14px}

.mancheta__titulo{display:inline-block;line-height:0}
.mancheta__titulo img{height:58px;width:auto;margin-inline:auto}
.mancheta__titulo:hover{text-decoration:none}
.mancheta__slogan{
  font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--texto-suave);
  margin:8px 0 0;letter-spacing:.01em;
}
@media (min-width:700px){.mancheta__titulo img{height:88px}}

/* ---------- 5. BARRA COMPACTA (páginas interiores) ---------- */
.cabecera{background:var(--papel)}
.cabecera__barra{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  min-height:52px;width:100%;padding:8px 24px;
  border-bottom:1px solid var(--filete);
}
.barra__izq,.barra__der{display:flex;align-items:center;gap:8px;min-width:0}
.barra__der{justify-self:end}
.barra__izq{justify-self:start}
.icono-btn{width:40px;height:40px;display:grid;place-items:center;color:var(--texto)}
.icono-btn:hover{color:var(--rojo)}

/* ---------- 5.1 Clima y lugar en la barra de utilidades ---------- */
.utilidad{
  display:flex;align-items:center;gap:9px;min-width:0;
  font-family:var(--sans);font-size:12px;color:var(--texto-suave);
}
.utilidad__lugar{
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;
  color:var(--texto);white-space:nowrap;
}
.clima{display:flex;align-items:center;gap:7px;white-space:nowrap}
.clima[hidden]{display:none}
.clima::before{content:"";width:1px;height:14px;background:var(--filete);flex:none}
.clima__icono{font-size:15px;line-height:1}
.clima__temp{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--texto)}
.clima__temp .f{color:var(--texto-suave);font-weight:400}
.clima__desc{color:var(--texto-suave)}
@media (max-width:620px){
  .utilidad__lugar,.clima__desc{display:none}
  .utilidad{gap:6px}
}

/* ---------- 5.15 Buscador ---------- */
.buscador{
  display:none;border-bottom:1px solid var(--filete);background:var(--papel);
}
.buscador[data-abierto="true"]{display:block}
.buscador__caja{
  width:100%;padding:12px 24px;display:flex;align-items:center;gap:12px;
}
.buscador input{
  flex:1;font-family:var(--titular);font-size:22px;font-weight:700;
  border:0;border-bottom:2px solid var(--texto);background:transparent;
  color:var(--texto);padding:6px 0;letter-spacing:-.02em;min-width:0;
}
.buscador input::placeholder{color:var(--tinta-tenue);font-weight:400}
.buscador__cuenta{
  font-family:var(--sans);font-size:11.5px;color:var(--texto-suave);
  white-space:nowrap;letter-spacing:.04em;
}

/* ---------- 5.2 Barra de temas del día ---------- */
.temas{position:relative;
  background:var(--azul);border-bottom:1px solid var(--azul-oscuro);
  overflow-x:auto;scrollbar-width:none;
}
.temas::-webkit-scrollbar{display:none}
.temas__lista{
  display:flex;align-items:center;gap:0;list-style:none;margin:0;
  width:100%;padding:0 24px;justify-content:center;
}
.temas__etiqueta{
  font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:#FFFFFF;opacity:.72;
  padding:9px 14px 9px 0;flex:none;white-space:nowrap;
}
.temas a{
  display:block;padding:9px 13px;font-family:var(--sans);font-size:12px;font-weight:600;
  color:#FFFFFF;white-space:nowrap;
}
.temas a:hover{
  color:#FFFFFF;text-decoration:underline;text-underline-offset:3px;
  background:var(--azul-oscuro);
}
.marca{display:flex;align-items:center;justify-self:center;text-decoration:none}
.marca:hover{text-decoration:none}
.marca__logo{display:block;height:30px;width:auto}
.marca__texto{display:none}
.marca__nombre{display:none}
.marca__slogan{font-family:var(--serif);font-style:italic;font-size:10.5px;color:var(--texto-suave);margin-top:3px}
.btn-suscribir{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--texto);padding:7px 12px;white-space:nowrap;color:var(--texto);
}
.btn-suscribir:hover{background:var(--texto);color:var(--papel);text-decoration:none}

/* ---------- 6. NAVEGACIÓN (pegajosa) ---------- */
.nav-secciones{
  position:sticky;top:0;z-index:60;background:var(--papel);
  border-top:2px solid var(--filete-fuerte);border-bottom:1px solid var(--filete);
  overflow-x:auto;scrollbar-width:none;
}
.nav-secciones::-webkit-scrollbar{display:none}
.nav-secciones ul{
  display:flex;align-items:center;gap:0;list-style:none;margin:0;
  width:100%;padding:0 24px;justify-content:center;
}
.nav-secciones a{
  display:block;padding:10px 9px;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--texto);white-space:nowrap;
}
.nav-secciones a:hover{color:var(--rojo);text-decoration:none}
.nav-secciones a[aria-current="page"]{color:var(--rojo)}
.nav__marca{
  font-family:var(--titular);font-weight:800;font-size:17px;letter-spacing:-.02em;
  padding-right:14px;margin-right:4px;border-right:1px solid var(--filete);
  opacity:0;width:0;overflow:hidden;transition:opacity .2s;white-space:nowrap;
}
.nav__marca[data-visible="true"]{opacity:1;width:auto;padding-left:0}

/* ---------- 7. MENÚ LATERAL ---------- */
.menu{
  position:fixed;inset:0 auto 0 0;width:min(320px,86vw);background:var(--papel);
  z-index:80;transform:translateX(-102%);transition:transform .2s ease;
  border-right:1px solid var(--filete-fuerte);padding:18px;overflow-y:auto;
}
.menu[data-abierto="true"]{transform:none}
.menu h3{
  font-family:var(--sans);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--texto-suave);margin:20px 0 6px;padding-bottom:6px;border-bottom:1px solid var(--filete);
}
.menu h3:first-child{margin-top:0}
.menu ul{list-style:none;margin:0;padding:0}
.menu li a{display:block;padding:8px 0;font-size:16px;color:var(--texto);border-bottom:1px solid var(--filete)}
.velo{position:fixed;inset:0;background:rgba(22,19,15,.55);z-index:70;opacity:0;pointer-events:none;transition:opacity .2s}
.velo[data-abierto="true"]{opacity:1;pointer-events:auto}

/* ---------- 8. ÚLTIMA HORA (banda, no caja) ---------- */
.ultima-hora{
  display:flex;align-items:stretch;min-height:38px;overflow:hidden;
  border-bottom:1px solid var(--filete);max-width:var(--ancho);margin-inline:auto;
}
.ultima-hora[hidden]{display:none}
.ultima-hora__etiqueta{
  display:flex;align-items:center;gap:6px;padding:0 14px 0 18px;flex:none;
  font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.12em;
  color:var(--rojo);border-right:1px solid var(--filete);
}
.punto{width:6px;height:6px;border-radius:50%;background:var(--rojo);animation:latir 1.6s infinite}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.punto{animation:none}}
.ultima-hora__pista{flex:1;position:relative;overflow:hidden}
.ultima-hora__item{
  position:absolute;inset:0;display:flex;align-items:center;gap:9px;padding:0 12px;
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--texto);
  opacity:0;transition:opacity .35s;
}
.ultima-hora__item[data-activo="true"]{opacity:1}
.ultima-hora__hora{font-family:var(--mono);font-size:11px;color:var(--texto-tenue);flex:none}
.ultima-hora__nav{width:30px;flex:none;color:var(--texto-suave);font-size:16px}
.ultima-hora__nav:hover{color:var(--rojo)}

/* ---------- 9. ETIQUETAS Y METADATOS ---------- */
.kicker{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rojo);display:block;margin-bottom:6px;
}
.kicker--nacional,.kicker--economia,.kicker--gente{color:var(--rojo)}
.meta{
  font-size:11.5px;color:var(--texto-suave);display:flex;flex-wrap:wrap;gap:3px 8px;
  align-items:baseline;letter-spacing:.01em;
}
.meta__punto{opacity:.45}

/* ---------- 10. PORTADA: HERO ---------- */
.hero{padding:22px 0 0;border-bottom:1px solid var(--filete);margin-bottom:20px}
.hero__figura{margin:0 0 16px}
.hero__figura img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.92)}
.hero__pie{font-size:11px;color:var(--texto-suave);padding-top:6px;line-height:1.45;font-family:var(--sans)}
.hero__titulo{font-size:42px;margin:0 0 14px;letter-spacing:-.026em;line-height:1.08}
.hero__titulo a{color:var(--texto)}
.hero__bajada{font-size:19px;color:var(--texto-suave);margin:0 0 14px;line-height:1.45;max-width:56ch}
.hero__satelites{
  list-style:none;margin:16px 0 22px;padding:12px 0 0;border-top:1px solid var(--filete);
}
.hero__satelites li{padding:5px 0}
.hero__satelites a{
  font-family:var(--serif);font-weight:600;font-size:15.5px;color:var(--texto);
  display:flex;gap:8px;line-height:1.35;
}
.hero__satelites a::before{content:"—";color:var(--rojo);flex:none}

@media (min-width:900px){
  .hero{display:grid;grid-template-columns:1.35fr 1fr;gap:0 30px;align-items:start;padding-top:26px}
  .hero__figura{grid-column:1;grid-row:1/span 5;margin:0}
  .hero__figura img{aspect-ratio:4/3}
  .hero .kicker,.hero__titulo,.hero__bajada,.hero .meta,.hero__satelites{grid-column:2}
  .hero__titulo{font-size:42px}
}

/* ---------- 11. TIRA DE RESUMEN (reglas, no caja) ---------- */
.tira{
  border-top:2px solid var(--filete-fuerte);border-bottom:1px solid var(--filete);
  padding:12px 0 14px;margin:0 0 26px;
}
.tira h2{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto);margin-bottom:10px;
}
.tira ol{margin:0;padding:0;list-style:none;counter-reset:t}
.tira li{
  counter-increment:t;position:relative;padding:7px 0 7px 26px;
  border-bottom:1px dotted var(--filete);font-size:17px;line-height:1.4;
}
.tira li:last-child{border-bottom:0;padding-bottom:0}
.tira li::before{
  content:counter(t);position:absolute;left:0;top:7px;
  font-family:var(--mono);font-size:11px;color:var(--rojo);font-weight:600;
}
.tira a{color:var(--texto)}

/* ---------- 12. CABEZA DE SECCIÓN ---------- */
.bloque{margin:0 0 30px}
.bloque__cabeza{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:2px solid var(--filete-fuerte);padding-top:7px;margin-bottom:14px;
}
.bloque__titulo{
  font-family:var(--sans);font-size:12.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;margin:0;
}
.bloque__titulo span{color:var(--rojo)}
.bloque__enlace{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rojo)}

.selector{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:11px;color:var(--texto-suave);letter-spacing:.06em;text-transform:uppercase}
.selector select{
  font-family:var(--sans);font-size:12px;font-weight:700;padding:4px 6px;
  border:0;border-bottom:1px solid var(--texto);background:transparent;color:var(--texto);
}

/* ---------- 13. NOTAS EN COLUMNA (adiós tarjetas) ---------- */
.rejilla{display:grid;gap:0}
.tarjeta{
  display:block;padding:16px 0;border-top:1px solid var(--filete);
}
.rejilla > .tarjeta:first-child{border-top:0;padding-top:0}
.tarjeta__figura{margin:0 0 10px;overflow:hidden}
.tarjeta__figura img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.92)}
.tarjeta__titulo{font-size:23px;margin:0 0 8px;line-height:1.18;letter-spacing:-.018em}
.tarjeta__titulo a{color:var(--texto)}
.tarjeta__bajada{font-size:15.5px;color:var(--texto-suave);margin:0 0 7px;line-height:1.45}

/* Nota sin foto: solo texto y filete */
.tarjeta--texto .tarjeta__titulo{font-size:20px}

/* Nota con foto pequeña a la derecha */
.tarjeta--horizontal{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:4px 14px;align-items:start}
.tarjeta--horizontal .tarjeta__figura{grid-column:2;grid-row:1/span 3;margin:0}
.tarjeta--horizontal .tarjeta__figura img{aspect-ratio:1/1}
.tarjeta--horizontal .tarjeta__titulo{font-size:19px;grid-column:1}
.tarjeta--horizontal .kicker,.tarjeta--horizontal .meta{grid-column:1}
.tarjeta--horizontal .tarjeta__bajada{display:none}

/* Columnas con filete vertical: el gesto de periódico */
@media (min-width:700px){
  /* minmax(0,1fr) y no 1fr: con «1fr» la columna nunca baja del ancho
     mínimo del contenido y la rejilla se desborda sobre el lateral. */
  .rejilla--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
  .rejilla--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
  .rejilla > *{min-width:0}
  .rejilla--2 > *,.rejilla--3 > *{
    border-top:0;padding-top:0;padding-left:26px;border-left:1px solid var(--filete);
  }
  .rejilla--3 > *{padding-left:24px}
  .rejilla--2 > *:first-child,
  .rejilla--3 > *:first-child,
  .rejilla--3 > *:nth-child(3n+1),
  .rejilla--2 > *:nth-child(2n+1){border-left:0;padding-left:0}
  .rejilla--3 > *:nth-child(n+4),.rejilla--2 > *:nth-child(n+3){
    margin-top:16px;padding-top:16px;border-top:1px solid var(--filete);
  }
}

/* ---------- 14. RADAR ECONÓMICO (tabla, no caja) ---------- */
.radar{border-top:2px solid var(--filete-fuerte);padding-top:10px;margin-bottom:20px}
.radar__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:12px}
.indicador{
  padding:11px 0 11px 14px;border-left:1px solid var(--filete);border-top:1px solid var(--filete);
}
.indicador:nth-child(odd){border-left:0;padding-left:0}
.indicador__nombre{
  font-family:var(--sans);font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--texto-suave);margin:0 0 4px;
}
.indicador__valor{font-family:var(--mono);font-size:20px;font-weight:600;line-height:1;margin:0;letter-spacing:-.02em}
.indicador__cambio{font-family:var(--sans);font-size:11.5px;font-weight:600;margin:4px 0 0}
.sube{color:#1F6B45}.baja{color:var(--rojo)}
@media (min-width:700px){
  .radar__grid{grid-template-columns:repeat(4,1fr)}
  .indicador{border-top:0;padding-left:18px;border-left:1px solid var(--filete)}
  .indicador:nth-child(odd){padding-left:18px;border-left:1px solid var(--filete)}
  .indicador:first-child{border-left:0;padding-left:0}
}

/* ---------- 15. VIDEO VERTICAL ---------- */
.videos{
  display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;
}
.videos::-webkit-scrollbar{height:3px}
.videos::-webkit-scrollbar-thumb{background:var(--filete)}
.video{flex:0 0 138px;scroll-snap-align:start;position:relative}
.video img{aspect-ratio:9/16;object-fit:cover;filter:saturate(.9) contrast(1.02)}
.video__texto{
  display:block;padding:8px 0 0;font-family:var(--serif);font-weight:600;
  font-size:14px;line-height:1.3;color:var(--texto);
}
.video__play{
  position:absolute;top:8px;left:8px;background:var(--tinta);color:var(--papel);
  padding:2px 6px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;
}

/* ---------- 16. CAPTACIÓN (banda con reglas) ---------- */
.captura{
  border-top:3px double var(--filete-fuerte);border-bottom:3px double var(--filete-fuerte);
  padding:22px 0;margin:30px 0;
}
.captura h2{font-size:26px;margin-bottom:8px;letter-spacing:-.02em}
.captura p{font-size:15.5px;color:var(--texto-suave);margin-bottom:16px;max-width:52ch}
.captura__form{display:grid;gap:10px;max-width:520px}
.captura input[type=email]{
  font-family:var(--sans);font-size:16px;padding:11px 0;border:0;border-bottom:1px solid var(--texto);
  background:transparent;color:var(--texto);
}
.captura input::placeholder{color:var(--texto-tenue)}
.captura__btn{
  background:var(--tinta);color:var(--papel);border:1px solid var(--tinta);padding:12px 18px;
  font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.captura__btn:hover{background:transparent;color:var(--texto)}
.captura__wa{
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--texto);padding:12px 18px;color:var(--texto);
  font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.captura__wa:hover{background:var(--texto);color:var(--papel);text-decoration:none}
.captura__legal{font-family:var(--sans);font-size:11.5px;color:var(--texto-suave);margin:8px 0 0;line-height:1.5}
@media (min-width:700px){
  .captura__form{grid-template-columns:1fr auto}
  .captura__wa{grid-column:1/-1}
  .captura__legal{grid-column:1/-1}
}

/* ---------- 17. CONTENIDO PATROCINADO ----------
   Es el único elemento con fondo propio: la separación
   comercial es una norma ética, no una decisión estética. */
.patrocinado{
  background:var(--papel-alt);border-top:1px solid var(--tinta-tenue);border-bottom:1px solid var(--tinta-tenue);
  padding:16px 18px;margin:30px -18px;
}
.patrocinado__etiqueta{
  font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-suave);display:block;margin-bottom:8px;
}
.patrocinado h3{font-family:var(--sans);font-weight:700;font-size:18px;letter-spacing:-.01em;margin:0 0 6px;line-height:1.25}
.patrocinado h3 a{color:var(--texto)}
.patrocinado p{font-family:var(--sans);font-size:14px;color:var(--texto-suave);margin:0}
.patrocinado__nota{font-size:11.5px;margin-top:10px;padding-top:8px;border-top:1px solid var(--filete)}
@media (min-width:700px){.patrocinado{margin-inline:0;padding-inline:18px}}

/* ---------- 18. ARTÍCULO ---------- */
.progreso{position:fixed;top:0;left:0;height:2px;background:var(--rojo);width:0;z-index:90;transition:width .1s linear}
.articulo{max-width:var(--ancho-texto);margin-inline:auto;padding-block:24px 44px}
.articulo__titulo{font-size:38px;margin:0 0 15px;letter-spacing:-.028em;line-height:1.07}
.articulo__bajada{font-family:var(--serif);font-size:20px;color:var(--texto-suave);line-height:1.42;margin:0 0 20px;font-style:italic}
.firma{
  display:block;border-top:1px solid var(--texto);border-bottom:1px solid var(--filete);
  padding:10px 0;margin-bottom:20px;
}
.firma__avatar{display:none}
.firma__datos{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--texto-suave)}
.firma__nombre{font-weight:700;color:var(--texto);font-size:13px;letter-spacing:.02em;text-transform:uppercase}
.articulo__figura{margin:0 0 20px}
.articulo__figura img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.92)}
.articulo__figura figcaption{font-family:var(--sans);font-size:11px;color:var(--texto-suave);padding-top:7px;line-height:1.45}

/* «Lo esencial»: doble regla, sin fondo */
.esencial{
  border-top:3px double var(--filete-fuerte);border-bottom:3px double var(--filete-fuerte);
  padding:14px 0 15px;margin:0 0 26px;
}
.esencial h2{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.esencial ul{margin:0;padding:0;list-style:none}
.esencial li{
  font-size:15.5px;line-height:1.45;padding:6px 0 6px 16px;position:relative;
  border-bottom:1px dotted var(--filete);
}
.esencial li:last-child{border-bottom:0;padding-bottom:0}
.esencial li::before{content:"—";position:absolute;left:0;color:var(--rojo)}
.esencial strong{font-weight:700;color:var(--texto)}

.cuerpo{font-size:18.5px;line-height:1.7}
.cuerpo p{margin:0 0 1.05em}
.cuerpo > p:first-of-type::first-letter{
  float:left;font-family:var(--titular);font-size:56px;line-height:.82;
  padding:5px 9px 0 0;font-weight:800;
}
.cuerpo h2{
  font-family:var(--sans);font-size:12.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  margin:34px 0 12px;padding-top:9px;border-top:1px solid var(--filete);
}
.cuerpo a{text-decoration:underline;text-underline-offset:3px}
.cita{
  border:0;border-top:1px solid var(--texto);border-bottom:1px solid var(--texto);
  margin:28px 0;padding:16px 0;font-family:var(--titular);font-size:23px;line-height:1.32;
  text-align:center;letter-spacing:-.015em;
}
.cita footer{
  font-family:var(--sans);font-size:11.5px;color:var(--texto-suave);margin-top:10px;
  letter-spacing:.08em;text-transform:uppercase;
}

.tabla-datos{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px;margin:24px 0}
.tabla-datos caption{
  text-align:left;font-size:10.5px;color:var(--texto-suave);padding-bottom:8px;
  text-transform:uppercase;letter-spacing:.12em;font-weight:700;
}
.tabla-datos th,.tabla-datos td{padding:8px 10px 8px 0;border-bottom:1px solid var(--filete);text-align:left;vertical-align:top}
.tabla-datos thead th{
  border-bottom:1.5px solid var(--texto);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;padding-bottom:6px;
}
.tabla-datos td:last-child,.tabla-datos th:last-child{text-align:right;font-family:var(--mono);padding-right:0}
.tabla-envoltorio{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* «¿Y esto qué significa para el Cibao?» — regla roja, sin caja */
.que-significa{
  border-top:2px solid var(--rojo);padding:14px 0 4px;margin:32px 0;
}
.que-significa h2{font-family:var(--titular);font-size:22px;margin-bottom:10px;letter-spacing:-.02em}
.que-significa p{font-size:16.5px;color:var(--texto-suave)}

details.contexto{border-top:1px solid var(--filete);border-bottom:1px solid var(--filete);margin:28px 0}
details.contexto summary{
  padding:13px 0;font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.06em;
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;
  text-transform:uppercase;
}
details.contexto summary::-webkit-details-marker{display:none}
details.contexto summary::after{content:"+";font-size:18px;color:var(--rojo);font-weight:400}
details.contexto[open] summary::after{content:"–"}
details.contexto .contenido{padding:0 0 16px;font-size:16px;color:var(--texto-suave)}

.fuentes{border-top:2px solid var(--filete-fuerte);padding-top:12px;margin:32px 0}
.fuentes h2{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.fuentes ol{margin:0;padding-left:18px;font-family:var(--sans);font-size:13.5px;color:var(--texto-suave);line-height:1.55}
.fuentes li{margin-bottom:6px}

.actualizacion{
  border-left:2px solid var(--rojo);padding:4px 0 4px 14px;font-family:var(--sans);
  font-size:14px;margin:24px 0;color:var(--texto-suave);
}
.actualizacion strong{color:var(--rojo);text-transform:uppercase;font-size:11.5px;letter-spacing:.08em}

.correccion{
  border-top:1px solid var(--filete);border-bottom:1px solid var(--filete);padding:12px 0;
  font-family:var(--sans);font-size:13px;color:var(--texto-suave);margin:26px 0;line-height:1.55;
}

.compartir{display:flex;gap:0;flex-wrap:wrap;margin:26px 0;border-top:1px solid var(--filete);border-bottom:1px solid var(--filete)}
.compartir button,.compartir a{
  padding:11px 16px 11px 0;margin-right:16px;color:var(--texto);
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.compartir a:hover,.compartir button:hover{color:var(--rojo);text-decoration:none}

/* ---------- 19. PÁGINAS ESTÁTICAS ---------- */
.pagina{max-width:var(--ancho-texto);margin-inline:auto;padding-block:26px 48px}
.pagina h1{font-size:32px;margin-bottom:14px;letter-spacing:-.024em}
.pagina h2{
  font-family:var(--sans);font-size:12.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  margin:34px 0 12px;padding-top:9px;border-top:2px solid var(--filete-fuerte);
}
.pagina h3{font-family:var(--titular);font-size:19px;margin:22px 0 6px;letter-spacing:-.015em}
.pagina ul,.pagina ol{padding-left:19px;font-size:17px;line-height:1.6}
.pagina li{margin-bottom:8px}
.entradilla{font-size:19px;color:var(--texto-suave);line-height:1.5;font-style:italic}
.aviso-caja{
  border-top:1px solid var(--texto);border-bottom:1px solid var(--texto);
  padding:14px 0;font-size:16px;margin:22px 0;
}
.registro{list-style:none;padding:0;margin:0}
.registro li{border-bottom:1px solid var(--filete);padding:15px 0;font-size:15.5px;margin:0}
.registro time{font-family:var(--mono);font-size:11.5px;color:var(--rojo);display:block;margin-bottom:5px}

.equipo{display:grid;gap:0;grid-template-columns:1fr;margin-top:16px}
.persona{display:block;border-top:1px solid var(--filete);padding:14px 0}
.persona__avatar{display:none}
.persona h3{margin:0 0 3px;font-size:18px}
.persona p{margin:0;font-family:var(--sans);font-size:13.5px;color:var(--texto-suave)}
@media (min-width:700px){
  .equipo{grid-template-columns:1fr 1fr;gap:0 28px}
  .persona{padding-left:0}
  .equipo > .persona:nth-child(2n){padding-left:28px;border-left:1px solid var(--filete)}
}

/* ---------- 20. PIE ---------- */
.pie{background:var(--azul);color:#C8D4E4;
  border-top:3px double var(--filete-fuerte);margin-top:50px;padding:30px 0 24px;
  font-family:var(--sans);font-size:13px;color:var(--texto-suave);
}
.pie a{color:#C8D4E4}
.pie a:hover{color:#fff}
.pie__grid{display:grid;gap:24px}
.pie h3{
  font-family:var(--sans);font-size:10px;text-transform:uppercase;letter-spacing:.16em;
  color:#fff;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.22);
}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:6px}
.pie__marca{font-family:var(--titular);font-size:28px;color:var(--texto);font-weight:800;letter-spacing:-.028em;margin:0}
.pie__slogan{color:#9DB2CC;font-family:var(--serif);font-style:italic;font-size:13px;margin:3px 0 12px}
.pie__legal{border-top:1px solid rgba(255,255,255,.22);margin-top:26px;padding-top:16px;font-size:11.5px;line-height:1.6}
.pie__redes{display:flex;gap:0;margin-top:12px}
.pie__redes a{
  padding:0 12px;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  border-right:1px solid rgba(255,255,255,.22);
}
.pie__redes a:first-child{padding-left:0}
.pie__redes a:last-child{border-right:0}
@media (min-width:700px){.pie__grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}}

/* ---------- 21. REJILLA DE PORTADA ---------- */
@media (min-width:1000px){
  /* Lateral fluido: se estrecha cuando las torres publicitarias le
     quitan ancho a la columna central, para que el texto no se ahogue. */
  .portada{
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(230px,24%,290px);
    gap:0 30px;align-items:start;
  }
  .portada__lateral{
    position:sticky;top:60px;padding-left:30px;border-left:1px solid var(--filete);
    min-width:0;
  }
}

/* =========================================================
   22. PUBLICIDAD
   Dos sistemas conviven y se distinguen a la vista:
     · .carrusel-pub  → venta directa (la controlas tú)
     · .anuncio       → red programática, Google (automático)
   Todo espacio comercial va rotulado y con altura reservada
   para que la página no salte al cargar (CLS = 0).
   ========================================================= */

.rotulo-pub{
  font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta-tenue);display:block;
  padding-bottom:5px;
}

/* ---------- 22.1 Carrusel superior (venta directa) ---------- */
/* Va arriba del todo, antes de la cabecera, como en los diarios
   grandes: el lector lo ve antes que cualquier otra cosa. */
.carrusel-pub{
  max-width:var(--ancho);margin:0 auto;padding:10px 18px 12px;
  border-bottom:1px solid var(--filete);
}
.carrusel-pub[hidden]{display:none}
/* Altura fija y la imagen completa dentro: los banners de los
   anunciantes vienen en proporciones distintas y ninguno se
   recorta. La altura reservada evita que la página salte. */
/* Proporción de «billboard» 970×250, la medida estándar del sector.
   Un banner de 970×250 llena el marco de borde a borde; cualquier
   otra proporción se muestra completa y centrada, sin recortarse. */
.carrusel-pub__marco{
  position:relative;overflow:hidden;background:var(--papel-alt);
  width:100%;max-width:970px;margin-inline:auto;
  aspect-ratio:970/250;border:1px solid var(--filete);
}
@media (max-width:900px){.carrusel-pub__marco{aspect-ratio:970/210}}
@media (max-width:640px){.carrusel-pub__marco{aspect-ratio:640/200}}
.carrusel-pub__pista{position:absolute;inset:0}
.carrusel-pub__slide{
  position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
  pointer-events:none;
}
.carrusel-pub__slide[data-activo="true"]{opacity:1;pointer-events:auto}
/* Absoluto en vez de grid: dentro de un grid con fila «auto» el
   height:100% no resuelve y el banner se desbordaba del marco. */
.carrusel-pub__slide img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;
}
@media (prefers-reduced-motion:reduce){.carrusel-pub__slide{transition:none}}

.carrusel-pub__pie{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:6px;
}

/* ---------- 22.2 Huecos de red programática (Google) ---------- */
.anuncio{display:block;margin:0 0 26px}
.anuncio__hueco{
  display:grid;place-items:center;min-height:var(--alto,250px);
  border:1px dashed var(--filete);background:var(--papel-alt);
  overflow:hidden;
}
.anuncio__hueco > ins{display:block;width:100%}
/* Pieza vendida directamente dentro de un hueco.
   El alto lo manda la imagen; los atributos width/height del <img>
   reservan el espacio antes de que cargue, así no salta la página. */
.anuncio__hueco.tiene-pieza{border-style:solid;background:transparent}
.anuncio__pieza{display:block;line-height:0;width:100%}
.anuncio__pieza img{width:100%;height:auto;display:block}
.anuncio__vacio{
  font-family:var(--mono);font-size:11px;color:var(--tinta-tenue);
  text-align:center;line-height:1.6;padding:10px;
}
.anuncio--lateral{margin-bottom:24px}
.anuncio--intercalado{
  border-top:1px solid var(--filete);border-bottom:1px solid var(--filete);
  padding:14px 0;margin:26px 0;
}
.anuncio--intercalado .anuncio__hueco{--alto:280px}

/* Billboard 970×250 bajo la barra de temas */
.anuncio--billboard{
  max-width:var(--ancho);margin:14px auto 0;padding:0 18px;
}
/* 970×250 exactos como techo: nunca se estira más allá de la
   medida estándar aunque la columna sea más ancha. */
.anuncio--billboard .anuncio__hueco{
  width:100%;max-width:970px;margin-inline:auto;
  aspect-ratio:970/250;min-height:0;
}
@media (max-width:900px){
  .anuncio--billboard .anuncio__hueco{aspect-ratio:auto;min-height:170px}
}
.anuncio--pegajoso{position:sticky;top:60px}
/* En móvil el lateral se apila debajo del texto: un hueco de 600 px
   ahí solo estorba, así que se retira. */
@media (max-width:999px){.anuncio--pegajoso{display:none}}

/* ---------- 22.3 Rascacielos laterales (solo pantallas anchas) ---------- */
/* Las torres viven en columnas propias del documento, NO flotando
   por encima. Con position:sticky se deslizan junto a la página y
   se detienen al llegar arriba, sin taparle nada al lector. */
.lienzo{display:block}
.rascacielos{display:none}

@media (min-width:1320px){
  .lienzo{
    display:grid;
    grid-template-columns:160px minmax(0,var(--ancho)) 160px;
    column-gap:20px;
    justify-content:center;
    align-items:start;
  }
  .lienzo__centro{min-width:0}
  .rascacielos{
    display:block;
    position:sticky;
    top:52px;              /* justo debajo de la barra de secciones */
    align-self:start;
    margin-top:14px;
  }
  .rascacielos .anuncio__hueco{--alto:600px}
}

/* ---------- 23. IMPRESIÓN ---------- */
@media print{
  .cabecera,.nav-secciones,.ultima-hora,.captura,.pie,.compartir,.aviso-demo,.menu,.velo,
  .carrusel-pub,.anuncio,.rascacielos{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .articulo{max-width:none}
  a{text-decoration:none;color:#000}
}

/* =========================================================
   24. COMPONENTES DE PERIÓDICO NACIONAL
   ========================================================= */

/* ---------- 24.1 Resultados del buscador ---------- */
.buscador__resultados{
  max-width:900px;margin-inline:auto;padding:0 24px 14px;display:grid;gap:0;
}
.buscador__item{
  display:grid;gap:2px;padding:11px 0;border-top:1px solid var(--filete);
}
.buscador__item:hover{text-decoration:none}
.buscador__item:hover .buscador__titular{color:var(--rojo)}
.buscador__seccion{
  font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rojo);
}
.buscador__titular{font-family:var(--titular);font-weight:700;font-size:17px;line-height:1.25;color:var(--texto)}
.buscador__meta{font-family:var(--sans);font-size:11.5px;color:var(--texto-suave)}
.buscador__vacio{font-family:var(--sans);font-size:14px;color:var(--texto-suave);padding:14px 0 4px}

/* ---------- 24.2 Cabeza de sección ---------- */
.seccion__cabeza{padding:26px 0 14px;border-bottom:2px solid var(--filete-fuerte);margin-bottom:22px}
.seccion__titulo{font-size:38px;letter-spacing:-.028em;margin:0 0 8px}
.seccion__entradilla{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--texto-suave);max-width:60ch;margin:0 0 8px}
@media (min-width:700px){.seccion__titulo{font-size:48px}}

/* ---------- 24.3 Nota destacada de sección ---------- */
.destacada{display:grid;gap:16px;padding-bottom:22px;margin-bottom:6px;border-bottom:1px solid var(--filete)}
.destacada__figura{margin:0}
.destacada__figura img{width:100%;aspect-ratio:16/9;object-fit:cover}
.destacada__titulo{font-size:34px;letter-spacing:-.026em;margin:6px 0 11px;line-height:1.1}
.destacada__titulo a{color:var(--texto)}
.destacada__bajada{font-size:17.5px;color:var(--texto-suave);line-height:1.5;max-width:58ch;margin:0 0 10px}
@media (min-width:900px){
  .destacada{grid-template-columns:1.4fr 1fr;gap:0 30px;align-items:start}
  .destacada__titulo{font-size:36px}
}

/* ---------- 24.4 Flujo de última hora ---------- */
.flujo{margin:0 0 34px}
.flujo__dia{
  font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texto-suave);
  border-top:2px solid var(--filete-fuerte);padding-top:8px;margin-bottom:6px;
}
.flujo__lista{list-style:none;margin:0;padding:0}
.flujo__item{
  display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;
  padding:15px 0;border-bottom:1px solid var(--filete);
}
.flujo__hora{
  font-family:var(--mono);font-size:12px;color:var(--rojo);font-weight:600;padding-top:3px;
}
.flujo__titulo{font-size:23px;line-height:1.2;margin:3px 0 6px;letter-spacing:-.018em}
.flujo__titulo a{color:var(--texto)}
.flujo__bajada{font-size:14.5px;color:var(--texto-suave);margin:0;line-height:1.45}
@media (max-width:600px){
  .flujo__item{grid-template-columns:1fr;gap:2px}
  .flujo__hora{padding:0}
}

/* ---------- 24.5 «Lo último» del lateral ---------- */
.ultimo{list-style:none;margin:0;padding:0}
.ultimo__item{
  display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--filete);
}
.ultimo__item:last-child{border-bottom:0}
.ultimo__item time{font-family:var(--mono);font-size:10.5px;color:var(--rojo)}
.ultimo__item a{font-family:var(--serif);font-weight:600;font-size:16.5px;line-height:1.28;color:var(--texto)}

/* ---------- 24.6 Columnas de opinión ---------- */
.columnas{display:grid;gap:0}
.columna{
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--filete);
}
.columna:last-child{border-bottom:0}
.columna__avatar{
  width:38px;height:38px;border-radius:50%;background:var(--azul);color:#fff;
  display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:13px;
}
.columna__autor{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto-suave);display:block;margin-bottom:3px;
}
.columna__titulo{font-family:var(--titular);font-size:18px;font-style:italic;line-height:1.28;margin:0}
.columna__titulo a{color:var(--texto)}

/* ---------- 24.7 Página de autor ---------- */
.autor__cabeza{
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:start;
  padding:28px 0 20px;border-bottom:2px solid var(--filete-fuerte);margin-bottom:24px;
}
.autor__avatar{
  width:72px;height:72px;border-radius:50%;background:var(--azul);color:#fff;
  display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:24px;
}
.autor__nombre{font-size:32px;letter-spacing:-.024em;margin:0 0 4px}
.autor__cargo{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rojo);margin:0 0 8px}
.autor__bio{font-family:var(--serif);font-size:16.5px;color:var(--texto-suave);max-width:60ch;margin:0 0 8px}

/* ---------- 24.8 Migas, etiquetas y paginación ---------- */
.migas{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--texto-suave);margin-bottom:10px;
}
.migas a{color:var(--texto-suave)}
.migas a:hover{color:var(--rojo)}
.etiquetas{
  font-family:var(--sans);font-size:12.5px;margin:24px 0;
  padding-top:12px;border-top:1px solid var(--filete);
}
.etiquetas span{color:var(--texto-suave);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;font-weight:700}
.etiquetas a{
  display:inline-block;border:1px solid var(--filete);padding:4px 11px;margin-left:6px;
  font-weight:600;color:var(--texto);
}
.etiquetas a:hover{border-color:var(--azul);color:var(--azul);text-decoration:none}
.paginacion{
  display:flex;gap:6px;justify-content:center;margin:30px 0 10px;flex-wrap:wrap;
}
.paginacion a{
  font-family:var(--sans);font-size:13px;font-weight:700;
  border:1px solid var(--filete);padding:8px 14px;color:var(--texto);
}
.paginacion a:hover{border-color:var(--texto);text-decoration:none}
.paginacion a[aria-current="page"]{background:var(--azul);border-color:var(--azul);color:#fff}

/* ---------- 24.9 Marca de contenido de muestra ---------- */
.muestra{
  font-family:var(--sans);font-size:12px;font-weight:600;
  background:#FFF8E6;border-left:3px solid #8A6100;color:#6B4B00;
  padding:9px 13px;margin:0 0 18px;
}
.pastilla-muestra{
  font-family:var(--sans);font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;background:#FFF8E6;color:#8A6100;
  border:1px solid #E3D5AE;padding:1px 5px;margin-left:6px;
}

/* ---------- 24.10 Varios ---------- */
.vacio{font-family:var(--sans);font-size:14.5px;color:var(--texto-suave)}
.fuentes__nota{font-family:var(--sans);font-size:12px;color:var(--texto-suave);margin-top:12px}
.compartir--firma{border:0;margin:0;margin-left:auto}
.compartir--firma button{padding:6px 0;margin:0}
.firma{display:flex;align-items:center;gap:12px}
.firma__avatar{
  display:grid;width:42px;height:42px;border-radius:50%;background:var(--azul);color:#fff;
  place-items:center;font-family:var(--sans);font-weight:700;font-size:14px;flex:none;
}
.pie__logo{height:38px;width:auto;filter:brightness(0) invert(1);opacity:.95;margin-bottom:6px}

/* ---------- 24.11 Pieza comercial y alerta de ejemplo ---------- */
.comercial{max-width:var(--ancho-texto);margin-inline:auto;padding-block:22px 44px;font-family:var(--sans)}
.comercial h1{font-family:var(--sans);font-weight:800;font-size:30px;letter-spacing:-.022em;margin:8px 0 8px}
.comercial__bajada{font-size:16.5px;color:var(--texto-suave)}
.comercial .cuerpo{font-family:var(--sans);font-size:16.5px}
.comercial .cuerpo p:first-of-type::first-letter{float:none;font-size:inherit;padding:0;font-weight:inherit}
.cinta{
  background:#7A5B1E;color:#FFF7E8;text-align:center;padding:9px 16px;margin:0 0 18px;
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.firma__avatar--comercial{background:#7A5B1E}
.patrocinado--aviso{background:#fff;border-color:var(--arena-borde)}
.patrocinado--aviso .patrocinado__nota{border:0;padding:0;margin:0}
body:has(.comercial){background:var(--arena)}

.ejemplo-alerta{
  background:#F1F6F2;border-left:4px solid #25D366;padding:16px 18px;
  font-family:var(--sans);font-size:15px;line-height:1.55;margin:18px 0;
}
.ejemplo-alerta p{margin:0 0 5px}
.ejemplo-alerta__pie{margin-top:12px;color:var(--texto-suave)}

/* ---------- 24.12 Equipo ---------- */
.persona h3{font-family:var(--titular);font-size:19px;margin:0 0 4px}
.persona h3 a{color:var(--texto)}
.persona h3 a:hover{color:var(--azul)}


/* ---------- 24.13 Cabecera: en móvil el menú se desliza desde la izquierda ---------- */
@media (max-width:900px){
  .nav-secciones ul,.temas__lista{justify-content:flex-start}
  .cabecera__barra{grid-template-columns:auto 1fr auto;gap:6px}
  .marca{justify-self:center}
}


/* ---------- 24.14 Rótulos que no descentran ----------
   A partir de 1100 px la etiqueta «Temas del día» se saca del flujo:
   así los temas quedan centrados de verdad y no empujados por ella. */
@media (min-width:1100px){
  /* Anclada al borde de la propia barra azul, no fuera: así queda
     dentro y no empuja los temas, que siguen centrados. */
  .temas__etiqueta{position:absolute;left:24px;top:0;padding-right:0}
}


/* ---------- 24.15 Escala tipográfica en pantallas grandes ---------- */
@media (min-width:700px){
  .articulo__titulo{font-size:46px}
  .destacada__titulo{font-size:40px}
}
@media (min-width:1100px){
  .hero__titulo{font-size:56px}
  .tarjeta__titulo{font-size:24px}
  .flujo__titulo{font-size:24px}
}

/* =========================================================
   25. APERTURA, MANCHETA Y ESQUINAS REDONDEADAS
   ========================================================= */

/* ---------- 25.1 Apertura: principal + dos acompañantes ---------- */
.apertura{
  display:grid;gap:24px;
  padding:22px 0 24px;border-bottom:2px solid var(--filete-fuerte);margin-bottom:24px;
}
.apertura__figura{margin:0 0 12px;overflow:hidden;border-radius:var(--redondeo)}
.apertura__figura img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.94)}
.apertura__figura--grande img{aspect-ratio:3/2}
.apertura__titulo2{
  font-size:24px;line-height:1.18;letter-spacing:-.02em;margin:0 0 8px;
}
.apertura__titulo2 a{color:var(--texto)}
.apertura__bajada2{font-size:15.5px;color:var(--texto-suave);line-height:1.45;margin:0 0 8px}

@media (min-width:900px){
  .apertura{
    grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);
    gap:0 26px;align-items:start;
  }
  .apertura__secundaria{padding-left:26px;border-left:1px solid var(--filete)}
  .apertura__titulo2{font-size:22px}
}
@media (min-width:1100px){
  .apertura__titulo2{font-size:24px}
}

/* ---------- 25.2 Mancheta con fecha y clima a los lados ---------- */
.mancheta{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:0 18px;border-bottom:1px solid var(--filete);padding:14px 24px;
  text-align:center;
}
.mancheta__lado{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  font-family:var(--sans);font-size:12.5px;color:var(--texto-suave);text-align:left;
}
.mancheta__lado--der{align-items:flex-end}
.mancheta__fecha{
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto);font-weight:600;white-space:nowrap;
}
.mancheta__slogan{grid-column:2;margin:6px 0 0}
.mancheta .clima::before{display:none}
@media (max-width:820px){
  .mancheta{grid-template-columns:1fr;gap:8px;padding:12px 18px}
  .mancheta__lado{align-items:center;flex-direction:row;justify-content:center;order:2}
  .mancheta__lado--der{display:none}
  .mancheta__titulo{order:1}
  .mancheta__slogan{grid-column:1;order:3}
}

/* ---------- 25.3 Esquinas redondeadas en las imágenes ---------- */
:root{--redondeo:10px}
.tarjeta__figura,
.apertura__figura,
.destacada__figura,
.articulo__figura,
.hero__figura,
.video,
.foto__vista,
.carrusel-pub__marco,
.anuncio__hueco,
.anuncio__pieza img,
.buscador__item img{
  border-radius:var(--redondeo);overflow:hidden;
}
.tarjeta__figura img,
.apertura__figura img,
.destacada__figura img,
.articulo__figura img,
.hero__figura img,
.video img,
.anuncio__pieza img{
  border-radius:var(--redondeo);
}
.tarjeta--horizontal .tarjeta__figura,
.tarjeta--horizontal .tarjeta__figura img{border-radius:calc(var(--redondeo) * .7)}
.autor__avatar,.columna__avatar,.firma__avatar{border-radius:50%}
/* El pie de foto no se redondea con la imagen */
.articulo__figura{border-radius:0;overflow:visible}
.articulo__figura img{border-radius:var(--redondeo)}
.apertura__figura--grande{border-radius:0;overflow:visible}
.apertura__figura--grande img{border-radius:var(--redondeo)}

/* ---------- 25.4 El anuncio superior, a la mitad de alto ---------- */
.carrusel-pub__marco{aspect-ratio:970/125}
@media (max-width:900px){.carrusel-pub__marco{aspect-ratio:970/105}}
@media (max-width:640px){.carrusel-pub__marco{aspect-ratio:640/100}}

/* =========================================================
   26. ESCALA CORREGIDA
   Los titulares se habían ido de tamaño: en columnas estrechas
   una sola noticia ocupaba media pantalla de alto.
   ========================================================= */

/* ---------- 26.1 Apertura, ya a todo el ancho ---------- */
.hero__titulo{font-size:30px;line-height:1.12;letter-spacing:-.022em;margin:0 0 10px}
.hero__bajada{font-size:16.5px;line-height:1.42;margin:0 0 10px}
.apertura__titulo2{font-size:19px;line-height:1.22;letter-spacing:-.014em;margin:0 0 6px}
.apertura__bajada2{font-size:14px;line-height:1.4;margin:0 0 6px}
.apertura__figura--grande img{aspect-ratio:16/9}

@media (min-width:900px){
  .hero__titulo{font-size:36px}
  .apertura__titulo2{font-size:19px}
}
@media (min-width:1100px){
  .hero__titulo{font-size:40px}
  .apertura__titulo2{font-size:20px}
}

/* ---------- 26.2 Tarjetas más compactas ---------- */
.tarjeta__titulo{font-size:18px;line-height:1.24;letter-spacing:-.012em;margin:0 0 6px}
.tarjeta__bajada{
  font-size:14px;line-height:1.42;margin:0 0 6px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.tarjeta--texto .tarjeta__titulo{font-size:17px}
.tarjeta--horizontal .tarjeta__titulo{font-size:16px}
.tarjeta__figura{margin:0 0 9px}
.tarjeta{padding:14px 0}
@media (min-width:1100px){
  .tarjeta__titulo{font-size:19px}
}

/* ---------- 26.3 Resto de titulares ---------- */
.articulo__titulo{font-size:32px;line-height:1.1;margin:0 0 13px}
.articulo__bajada{font-size:18px;line-height:1.45;margin:0 0 18px}
.destacada__titulo{font-size:27px;line-height:1.14;margin:6px 0 9px}
.destacada__bajada{font-size:16px;line-height:1.45}
.flujo__titulo{font-size:19px;line-height:1.25;margin:3px 0 5px}
.flujo__bajada{font-size:14px;line-height:1.42}
.ultimo__item a{font-size:15px;line-height:1.3}
.columna__titulo{font-size:16px;line-height:1.3}
.tira li{font-size:15.5px}
.seccion__titulo{font-size:32px}
.apertura{padding:20px 0 22px;margin-bottom:22px}

@media (min-width:700px){
  .articulo__titulo{font-size:38px}
  .destacada__titulo{font-size:31px}
  .seccion__titulo{font-size:38px}
}

/* ---------- 26.4 Hueco ocupado por Google ---------- */
.anuncio__hueco.tiene-google{border-style:solid;background:transparent;min-height:0}
.anuncio__hueco.tiene-google > ins{display:block;width:100%}
.carrusel-pub__marco.tiene-google{border:1px solid var(--filete)}

/* =========================================================
   27. ESPACIOS INTERCALADOS (reservados para Google)
   Formato «in-article»: ancho de columna de texto, centrado,
   con la altura reservada para que la página no salte.
   ========================================================= */
.anuncio--intercalado{
  border-top:1px solid var(--filete);border-bottom:1px solid var(--filete);
  padding:18px 0;margin:30px auto;max-width:728px;
}
.anuncio--intercalado .rotulo-pub{text-align:center}
.anuncio--intercalado .anuncio__hueco{
  --alto:250px;
  width:100%;max-width:728px;margin-inline:auto;
  border:1px dashed var(--filete);background:var(--papel-alt);
  border-radius:var(--redondeo);
}
/* Dentro del cuerpo de la nota va a sangre de la columna de texto */
.cuerpo .anuncio--intercalado{margin:32px 0}

/* Cuando Google lo ocupa, desaparecen el marco y el fondo de espera */
.anuncio--intercalado .anuncio__hueco.tiene-google{
  border:0;background:transparent;min-height:0;
}

@media (max-width:600px){
  .anuncio--intercalado{padding:14px 0;margin:24px 0}
  .anuncio--intercalado .anuncio__hueco{--alto:280px}
}

/* =========================================================
   28. LOS BANNERS VAN SIN RÓTULO
   Un banner gráfico se reconoce solo. El rótulo «Publicidad»
   se reserva para el contenido patrocinado, que sí puede
   confundirse con una noticia.
   ========================================================= */
.carrusel-pub .rotulo-pub,
.anuncio .rotulo-pub,
.carrusel-pub__pie{display:none}

.carrusel-pub{padding:10px 24px 12px}
.anuncio--lateral,.rascacielos{margin-bottom:22px}

/* Los huecos vacíos se ven neutros, sin texto de relleno */
.anuncio__vacio{
  font-family:var(--mono);font-size:10.5px;color:var(--tinta-tenue);
  text-align:center;opacity:.5;
}

/* =========================================================
   29. MENOS RAYAS, Y EL ENCABEZADO DENTRO DE LA CAJA
   ========================================================= */

/* ---------- 29.1 Ninguna línea vertical separa una noticia de otra ----------
   El aire entre columnas ya las separa: la raya sobraba. Se conserva el
   padding, que es lo que da la separación. */
.rejilla--2 > *, .rejilla--3 > *,
.apertura__secundaria,
.portada__lateral,
.indicador, .indicador:nth-child(odd), .indicador:first-child,
.equipo > .persona, .equipo > .persona:nth-child(2n){
  border-left:0;
}

/* ---------- 29.2 Las horizontales, más tenues ----------
   Siguen ahí para ordenar la lectura, pero sin pesar en la página. */
:root{ --filete-fino:#ECECEC; }
.rejilla--2 > *:nth-child(n+3),
.rejilla--3 > *:nth-child(n+4),
.indicador,
.persona,
.lista-titulares > li,
.tarjeta,
.mas-leidas li,
.suelto{
  border-top-color:var(--filete-fino);
}

/* ---------- 29.3 El encabezado, alineado con las noticias ----------
   El filete sigue de esquina a esquina, pero el menú, la fecha y el clima
   arrancan justo donde arranca la primera columna del periódico. */
.cabecera__barra,
.mancheta{
  padding-inline:max(18px, calc((100% - var(--ancho)) / 2 + 18px));
}

/* Fecha, hora y clima en una sola línea, a la izquierda de la caja */
.mancheta__lado{
  flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap;
}
.mancheta__hora{
  font-family:var(--mono);font-size:12px;color:var(--texto-suave);
  white-space:nowrap;
}
/* El costado derecho lleva buscar y suscribirse desde la sección 31.
   Aquí estaba oculto de cuando iba vacío; quitarlo evita que una
   reordenación futura los haga desaparecer sin motivo aparente. */
.mancheta{grid-template-columns:1fr auto 1fr}

@media (max-width:820px){
  .mancheta__lado{justify-content:center}
}

/* =========================================================
   30. AVISO DE COOKIES
   Discreto, abajo, sin tapar la lectura. Los dos botones
   pesan igual: rechazar no puede costar más que aceptar.
   ========================================================= */
.cookies{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:80;
  max-width:640px;margin-inline:auto;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--papel);border:1px solid var(--tinta);
  border-radius:var(--redondeo);padding:14px 18px;
  box-shadow:0 6px 28px rgba(0,0,0,.14);
}
.cookies__texto{
  margin:0;flex:1;min-width:220px;
  font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--tinta-suave);
}
.cookies__texto a{color:var(--azul);text-decoration:underline}
.cookies__acciones{display:flex;gap:8px;flex:none}
.cookies__btn{
  font:inherit;font-family:var(--sans);font-size:12.5px;font-weight:600;
  cursor:pointer;padding:8px 16px;border-radius:6px;
  border:1px solid var(--tinta);background:var(--papel);color:var(--tinta);
}
.cookies__btn:last-child{background:var(--azul);border-color:var(--azul);color:#fff}
.cookies__btn:hover{opacity:.85}

@media (max-width:520px){
  .cookies{left:10px;right:10px;bottom:10px;padding:13px 15px}
  .cookies__acciones{width:100%}
  .cookies__btn{flex:1;justify-content:center}
}

/* =========================================================
   31. ENCABEZADO EN UNA SOLA FILA
   Desaparece la barra de arriba: el menú baja junto a la fecha,
   y buscar y suscribirse pasan al costado derecho del logo.
   Todo dentro del ancho de la caja, alineado con las noticias.
   ========================================================= */
.mancheta{
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  padding-block:12px;
  gap:0 22px;
}

/* Izquierda: menú + fecha, hora y clima */
.mancheta__lado{
  flex-direction:row;align-items:center;gap:10px;
  justify-content:flex-start;
}
.mancheta__datos{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;
}
.mancheta__datos .clima{white-space:nowrap}

/* Derecha: buscar y suscribirse, pegados al filo de la caja */
.mancheta__lado--der{
  display:flex;flex-direction:row;align-items:center;
  justify-content:flex-end;gap:8px;
}
.mancheta__lado--der .btn-suscribir{white-space:nowrap}

.mancheta .icono-btn{width:34px;height:34px;flex:none}

/* En pantalla estrecha el encabezado se apila:
   arriba menú y acciones, en medio el logo, y debajo fecha y clima. */
@media (max-width:860px){
  .mancheta{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
      "menu logo acciones"
      "datos datos datos";
    gap:8px 10px;
  }
  /* El costado izquierdo se disuelve: su botón y sus datos pasan a ser
     celdas de la rejilla por su cuenta. Si no, el botón arrastra consigo
     el ancho de la fecha y aplasta la columna del logo. */
  .mancheta__lado:not(.mancheta__lado--der){display:contents}
  .mancheta__lado:not(.mancheta__lado--der) > .icono-btn{grid-area:menu;align-self:center}
  .mancheta__titulo{grid-area:logo;justify-self:center}
  .mancheta__lado--der{
    grid-area:acciones;align-self:center;
    display:flex;flex-direction:row;justify-content:flex-end;
  }
  .mancheta__datos{
    grid-area:datos;flex-direction:row;flex-wrap:wrap;
    justify-content:center;gap:4px 12px;width:100%;
  }
  .mancheta__slogan{display:none}
}
@media (max-width:520px){
  .mancheta__lado--der .btn-suscribir{display:none}
}

/* Los dos costados ocupan las dos filas del encabezado y se centran
   frente al logo: así el menú y el botón quedan a la misma altura. */
@media (min-width:861px){
  .mancheta__lado,
  .mancheta__lado--der{grid-row:1 / span 2;align-self:center}
  .mancheta__titulo{grid-row:1}
  .mancheta__slogan{grid-row:2}
}

/* =========================================================
   32. BARRA DE BÚSQUEDA EN EL ENCABEZADO
   La lupa deja de ser un icono escondido: es una barra visible
   bajo el botón de suscribirse, como en el mapa del director.
   ========================================================= */
.mancheta__lado--der{
  flex-direction:column;align-items:flex-end;justify-content:center;gap:9px;
}

.barra-buscar{
  display:flex;align-items:stretch;width:100%;max-width:300px;
  border:1px solid var(--texto);background:var(--papel);
  border-radius:2px;overflow:hidden;
}
.barra-buscar__campo{
  flex:1;min-width:0;font-family:var(--sans);font-size:12.5px;
  border:0;background:transparent;color:var(--texto);
  padding:7px 10px;
}
.barra-buscar__campo::placeholder{color:var(--tinta-tenue)}
.barra-buscar__campo:focus{outline:0}
.barra-buscar:focus-within{box-shadow:inset 0 0 0 1px var(--texto)}
.barra-buscar__btn{
  flex:none;width:36px;display:grid;place-items:center;
  border-left:1px solid var(--filete);color:var(--texto);
}
.barra-buscar__btn:hover{background:var(--texto);color:var(--papel)}
/* Chrome pinta su propia «x»; sobra teniendo Escape. */
.barra-buscar__campo::-webkit-search-cancel-button{-webkit-appearance:none}

/* El panel de resultados ya no lleva campo dentro. */
.buscador{padding:0}
.buscador .buscador__cuenta{display:block;padding:10px 24px 0}
.buscador__resultados{padding-bottom:8px}

@media (max-width:860px){
  .mancheta__lado--der{flex-direction:row;align-items:center;gap:6px}
  .barra-buscar{max-width:none;width:auto}
  .barra-buscar__campo{width:0;padding:0;transition:width .18s}
  .barra-buscar:focus-within .barra-buscar__campo{width:150px;padding:7px 10px}
  .barra-buscar{border-color:transparent}
  .barra-buscar:focus-within{border-color:var(--texto)}
  .barra-buscar__btn{border-left:0}
}

/* En móvil la lupa es el único acceso a la búsqueda: tiene que
   poderse pulsar con el dedo, no con la punta de un lápiz. */
@media (max-width:860px){
  .barra-buscar{align-items:center}
  .barra-buscar__btn{width:44px;height:44px}
}

/* =========================================================
   33. LOS DOS COSTADOS, EN COLUMNA Y EN ESPEJO
   Izquierda: fecha y clima arriba, menú debajo.
   Derecha:   suscribirse arriba, buscar debajo.
   ========================================================= */
@media (min-width:861px){
  .mancheta__lado{
    flex-direction:column;align-items:flex-start;justify-content:center;gap:9px;
  }
  .mancheta__lado--der{align-items:flex-end}
  .mancheta__datos{align-items:flex-start}
}

/* =========================================================
   34. LOS RESULTADOS, DEBAJO DE LA CABECERA
   Antes salían encima de la mancheta y empujaban el periódico
   hacia abajo mientras se escribía. Ahora aparecen donde el
   lector ya está mirando: bajo la navegación, sobre las noticias.
   ========================================================= */
.buscador{
  display:none;background:var(--papel);
  border-bottom:1px solid var(--filete-fuerte);
}
.buscador[data-abierto="true"]{display:block}
.buscador__interior{
  width:100%;max-width:var(--ancho);margin-inline:auto;
  padding:14px 18px 18px;
}
.buscador .buscador__cuenta{
  display:block;padding:0 0 10px;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--texto-suave);
}
.buscador__resultados{padding:0}

/* =========================================================
   35. CLIMA DIBUJADO Y EN MOVIMIENTO
   Sustituye a los emojis: el sol gira, la nube respira,
   las gotas caen y el rayo parpadea. Todo en SVG, sin imágenes.
   ========================================================= */
.clima__icono{display:inline-flex;align-items:center;line-height:0}
.cl{
  width:26px;height:29px;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

/* El sol: disco quieto, rayos girando despacio */
.cl-sol{fill:#F2B01E;stroke:#C88A08}
.cl-rayos{stroke:#F2B01E;stroke-width:1.9;transform-origin:17px 15px;animation:girarRayos 14s linear infinite}
@keyframes girarRayos{to{transform:rotate(360deg)}}

/* La nube va y viene, como empujada por la brisa */
.cl-nube{fill:#FFFFFF;stroke:#9AA6B4;stroke-width:1.7;animation:vaivenNube 5s ease-in-out infinite}
@keyframes vaivenNube{
  0%,100%{transform:translateX(-1.2px)}
  50%{transform:translateX(1.2px)}
}
.cl--nube .cl-nube{fill:#EDF1F5}

/* Cuando hay sol y nube, la nube tapa un poco y el sol asoma */
.cl--solnube .cl-sol{transform:translate(-3px,-2px) scale(.86);transform-origin:17px 15px}
.cl--solnube .cl-rayos{transform-box:fill-box}

/* La lluvia cae, cada gota con su propio compás */
.cl-gota{stroke:#3E7BC4;stroke-width:2;animation:caerGota 1.1s linear infinite}
.cl-gota--2{animation-delay:.36s}
.cl-gota--3{animation-delay:.72s}
@keyframes caerGota{
  0%{opacity:0;transform:translateY(-3px)}
  25%{opacity:1}
  100%{opacity:0;transform:translateY(5px)}
}

/* El rayo parpadea de vez en cuando, no sin parar */
.cl-rayo{fill:#F2B01E;stroke:none;animation:parpadeoRayo 2.4s ease-in-out infinite}
@keyframes parpadeoRayo{
  0%,58%,100%{opacity:.28}
  62%,70%{opacity:1}
  66%{opacity:.4}
}

/* La neblina se desliza en capas */
.cl-hilo{stroke:#9AA6B4;stroke-width:2.2;animation:deslizarNiebla 4.5s ease-in-out infinite}
.cl-hilo--2{animation-delay:.7s}
.cl-hilo--3{animation-delay:1.4s}
@keyframes deslizarNiebla{
  0%,100%{transform:translateX(-2px);opacity:.55}
  50%{transform:translateX(2px);opacity:1}
}

/* La nieve baja meciéndose */
.cl-copo{fill:#8FB8DE;stroke:none;animation:caerCopo 2.6s ease-in-out infinite}
.cl-copo--2{animation-delay:.85s}
.cl-copo--3{animation-delay:1.7s}
@keyframes caerCopo{
  0%{opacity:0;transform:translate(0,-4px)}
  30%{opacity:1}
  100%{opacity:0;transform:translate(2px,5px)}
}

/* Quien pidió menos movimiento no ve ninguno. */
@media (prefers-reduced-motion:reduce){
  .cl-rayos,.cl-nube,.cl-gota,.cl-rayo,.cl-hilo,.cl-copo{animation:none}
}

/* =========================================================
   36. AJUSTES DE PESO Y TAMAÑO
   Más cuerpo en la navegación y en los temas del día;
   el logotipo, un punto más discreto.
   ========================================================= */

/* La línea de secciones: de 700 a 800 y una pizca más grande */
.nav-secciones a{font-weight:800;font-size:11.6px;letter-spacing:.055em}

/* Temas del día: rótulo y enlaces con más cuerpo sobre el azul */
.temas__etiqueta{font-weight:900;opacity:.85;letter-spacing:.16em}
.temas__lista a{font-weight:700;letter-spacing:.015em}

/* El logotipo, algo más pequeño */
.mancheta__titulo img{height:52px}
@media (min-width:700px){.mancheta__titulo img{height:76px}}

/* Fecha y clima en dos líneas limpias, ya sin la hora */
.mancheta__datos{gap:5px}
.mancheta__fecha{font-size:11.5px;font-weight:700;white-space:nowrap}
.clima{white-space:nowrap}

/* =========================================================
   37. LAS DOS FILAS, DE EXTREMO A EXTREMO
   Secciones y temas del día se reparten todo el ancho de la
   caja: el primer texto arranca en el filo izquierdo y el
   último termina en el derecho, igual que la mancheta.
   ========================================================= */
@media (min-width:861px){
  .nav-secciones ul,
  .temas__lista{
    max-width:var(--ancho);
    margin-inline:auto;
    padding-inline:18px;
    justify-content:space-between;
    gap:0;
  }

  /* El padding lateral de los extremos sobraría: lo que tiene que
     tocar el filo es la letra, no el aire que la rodea. */
  .nav-secciones li:first-child a{padding-left:0}
  .nav-secciones li:last-child a{padding-right:0}
  .temas__lista li:first-child{padding-left:0}
  .temas__lista li:last-child a{padding-right:0}

  /* El rótulo vuelve al flujo: con el reparto ya no descentra nada,
     y así queda pegado al filo izquierdo como el resto. */
  .temas__etiqueta{position:static;padding:9px 0}
}

/* En pantalla estrecha las filas se desplazan con el dedo:
   repartir ahí dejaría huecos absurdos entre dos palabras. */
@media (max-width:860px){
  .nav-secciones ul,
  .temas__lista{justify-content:flex-start;padding-inline:16px}
}

/* =========================================================
   38. AJUSTES DE PORTADA
   ========================================================= */

/* ---- 38.1 Los anuncios, a escuadra ----
   Nada de esquinas redondeadas en publicidad: un banner con
   los cantos romos parece un adorno, no un anuncio vendido. */
.carrusel-pub__marco,
.carrusel-pub__slide,
.carrusel-pub__slide img,
.anuncio__hueco,
.anuncio--intercalado .anuncio__hueco,
.anuncio__pieza,
.anuncio__pieza img,
.rascacielos .anuncio__hueco,
.anuncio__hueco > ins{
  border-radius:0;
}

/* ---- 38.2 El antetítulo: gris translúcido y sin tanta fuerza ----
   Dice a qué pertenece la noticia; no compite con el titular. */
.kicker,
.kicker--nacional,.kicker--economia,.kicker--gente{
  color:rgba(20,20,20,.42);
  font-weight:600;
  letter-spacing:.1em;
  font-size:10px;
}

/* ---- 38.3 El texto bajo el titular, en negro ----
   Es la entrada de la noticia: se lee, no se ojea. */
.tarjeta__bajada,
.hero__bajada,
.apertura__bajada,
.apertura__bajada2,
.destacada__bajada,
.flujo__bajada,
.articulo__bajada{
  color:var(--tinta);
}

/* ---- 38.4 Una sola raya entre la cabecera y las secciones ----
   Había dos pegadas: el filete inferior de la mancheta y la regla
   superior de la navegación. Se queda una, y más fina. */
.mancheta{border-bottom:0}
.nav-secciones{
  border-top:1px solid var(--filete-fuerte);
  border-bottom:1px solid var(--filete);
}

/* =========================================================
   39. LOS ANUNCIOS, SIN MARCO
   Un banner vendido no lleva recuadro alrededor: el recuadro
   delata que el hueco lo dibujamos nosotros. El anuncio se
   apoya en la página, sin borde ni fondo que lo enmarque.
   ========================================================= */
.carrusel-pub__marco,
.carrusel-pub__marco.tiene-google,
.anuncio__hueco,
.anuncio__hueco.tiene-pieza,
.anuncio__hueco.tiene-google,
.anuncio--intercalado .anuncio__hueco,
.rascacielos .anuncio__hueco,
.anuncio--billboard .anuncio__hueco{
  border:0;
  background:transparent;
}

/* El hueco de reserva sí conserva su marca de puntos: solo lo
   ve quien edita, porque al lector se le oculta entero. */
.anuncio__hueco:not(.tiene-pieza):not(.tiene-google){
  border:1px dashed var(--filete);
  background:var(--papel-alt);
}

/* Un espacio sin anuncio y sin Google se oculta de verdad.
   Las reglas .anuncio{display:block} y .rascacielos{position:sticky}
   ganaban al display:none que el navegador aplica a [hidden], así que
   el hueco seguía ocupando su sitio aunque estuviera marcado oculto. */
.anuncio[hidden],
.rascacielos[hidden],
.carrusel-pub[hidden],
[hidden]{display:none !important}

/* =========================================================
   40. LA REJILLA NO DEPENDE DE QUE HAYA TORRES
   Al ocultar una torre vacía dejaba de ser celda, y el
   navegador metía el periódico entero en su columna de 160 px.
   Cada pieza va ahora a una columna fija: falte quien falte,
   el contenido no se mueve de su sitio.
   ========================================================= */
@media (min-width:1320px){
  .lienzo > .rascacielos--izq{grid-column:1;grid-row:1}
  .lienzo > .lienzo__centro,
  .lienzo > .contenedor,
  .lienzo > main{grid-column:2;grid-row:1}
  .lienzo > .rascacielos--der{grid-column:3;grid-row:1}
}

/* =========================================================
   41. EL ANUNCIO DE ARRIBA, A SANGRE
   Sin relleno vertical ni filete: el banner arranca en el
   borde mismo de la página y la cabecera sube hasta él.
   ========================================================= */
.carrusel-pub{
  padding-block:0;
  border-bottom:0;
}

/* Fecha y botón de suscribirse, a la misma altura.
   Los dos costados arrancan arriba en vez de centrarse:
   centrados, cada uno caía a distinta altura porque sus
   contenidos no miden lo mismo. */
@media (min-width:861px){
  .mancheta__lado,
  .mancheta__lado--der{justify-content:flex-start}
  .mancheta{padding-block:14px}
}

/* Los dos costados se anclan ARRIBA, no al centro: centrados,
   como el izquierdo mide más que el derecho, sus primeras líneas
   caían a distinta altura. Anclados arriba, la fecha y el botón
   de suscribirse empiezan en el mismo píxel. */
@media (min-width:861px){
  .mancheta__lado,
  .mancheta__lado--der{align-self:start}
}

/* =========================================================
   42. EL BANNER SUPERIOR, MÁS BAJO
   De 970 × 125 a 970 × 90, la medida estándar del IAB para
   esta posición. Una sola proporción en todos los anchos:
   la creatividad es una imagen fija y no cambia de forma.
   ========================================================= */
.carrusel-pub__marco,
.carrusel-pub__marco.tiene-google{aspect-ratio:970/90}
@media (max-width:900px){.carrusel-pub__marco{aspect-ratio:970/90}}
@media (max-width:640px){.carrusel-pub__marco{aspect-ratio:970/90}}

/* =========================================================
   43. EL BOLETÍN EN EL PIE
   Última oportunidad de quedarse: quien llega hasta abajo
   es quien más ha leído.
   ========================================================= */
.pie__boletin{
  display:grid;gap:16px 40px;align-items:center;
  padding:26px 0;margin-bottom:6px;
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
}
@media (min-width:760px){
  .pie__boletin{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
}
.pie__boletin-texto h3{
  font-family:var(--titular);font-size:20px;font-weight:700;
  color:#fff;margin:0 0 4px;letter-spacing:-.01em;
}
.pie__boletin-texto p{
  font-family:var(--sans);font-size:14px;color:rgba(255,255,255,.72);margin:0;
}
.pie__boletin-form{max-width:none;margin:0}
.pie__boletin-form input[type=email]{
  font-family:var(--sans);font-size:15px;padding:11px 0;
  border:0;border-bottom:1px solid rgba(255,255,255,.45);
  background:transparent;color:#fff;min-width:0;
}
.pie__boletin-form input::placeholder{color:rgba(255,255,255,.45)}
.pie__boletin-form input:focus{outline:0;border-bottom-color:#fff}
.pie__boletin-form .captura__btn{
  background:#fff;color:var(--azul);border:1px solid #fff;
  font-weight:700;white-space:nowrap;
}
.pie__boletin-form .captura__btn:hover{background:transparent;color:#fff}
.pie__boletin-form .captura__legal{
  grid-column:1/-1;font-size:12.5px;color:rgba(255,255,255,.72);margin:0;
}
@media (min-width:560px){
  .pie__boletin-form{grid-template-columns:minmax(0,1fr) auto}
}

/* =========================================================
   44. MENOS REGLAS
   Esto es un periódico digital, no una plancha de plomo.
   La regla doble es un recurso del impreso del XIX y en
   pantalla solo ensucia. Se queda UNA raya donde de verdad
   separa una sección de otra, y desaparece el resto.
   ========================================================= */

/* ---- 44.1 Fuera las reglas dobles ---- */
.captura{
  border-top:0;border-bottom:0;
  background:#F7F7F7;
  padding:24px 22px;
  margin:34px 0;
}
.esencial{
  border-top:1px solid var(--filete);
  border-bottom:1px solid var(--filete);
}
/* El pie ya cambia de color: no necesita además una regla encima. */
.pie{border-top:0}

/* ---- 44.2 Las reglas de sección, a un píxel ----
   Siguen marcando dónde empieza cada bloque, pero sin gritar. */
.bloque__cabeza,
.tira,
.radar,
.fuentes,
.seccion__cabeza,
.apertura,
.nav-secciones{
  border-top-width:1px;
  border-bottom-width:1px;
}
.seccion__cabeza,
.apertura{border-bottom-width:1px}

/* ---- 44.3 Sin rayas pegadas ----
   La tira terminaba justo donde empezaba la cabecera del
   bloque siguiente: dos reglas en el mismo píxel. */
.tira{border-bottom:0;margin-bottom:20px}
.apertura{border-bottom:0;padding-bottom:10px}

/* ---- 44.4 El separador entre noticias, más tenue ---- */
.ultimo__item,
.flujo__item{border-top-color:var(--filete-fino)}

/* ---- 44.5 Los separadores de lista, al tono más tenue ----
   Son 21 en la portada: al gris medio pesaban demasiado
   para lo poco que tienen que decir. */
.menu li a,
.ultimo__item,
.flujo__item,
.lista-titulares > li,
.mas-leidas li,
.pie li{
  border-bottom-color:var(--filete-fino);
}
.bloque__cabeza{border-top-color:var(--tinta)}

/* =========================================================
   45. EL ESPACIO ENTRE LOS TEMAS Y LA PRIMERA NOTICIA
   970 × 180: exactamente el doble de alto que el banner
   del encabezado, que mide 970 × 90.
   ========================================================= */
.anuncio--billboard .anuncio__hueco{aspect-ratio:970/180}
@media (max-width:900px){
  .anuncio--billboard .anuncio__hueco{aspect-ratio:970/180;min-height:0}
}

/* El billboard necesita aire por los dos lados: pegado a la barra
   azul de arriba y a la primera noticia de abajo, no se lee como
   un espacio aparte sino como parte de la página. */
.anuncio--billboard{margin:22px auto 30px}



/* =========================================================
   46. UNOS MILÍMETROS MÁS DE ANCHO
   La reserva para las torres pasa de 400 a 330 px: el
   periódico gana 35 px por cada lado.
   ========================================================= */
@media (min-width:1320px){
  :root{ --ancho:min(1180px, calc(100vw - 330px)) }
}

/* =========================================================
   47. TORNO DE ANUNCIOS
   Cada espacio turna cinco piezas. El cambio es un relevo:
   la nueva entra con una transición corta, no se desliza.
   ========================================================= */
.anuncio__pieza{transition:opacity .45s ease}
.anuncio__pieza--entrando{opacity:0}
@media (prefers-reduced-motion:reduce){
  .anuncio__pieza{transition:none}
  .anuncio__pieza--entrando{opacity:1}
}

/* =========================================================
   48. LAS TORRES, A LA ALTURA DEL BANNER
   Arrancaban por encima del billboard. Ahora las tres piezas
   —torre izquierda, banner y torre derecha— empiezan en la
   misma línea. Se quedan quietas mientras el lector baja y
   suben solo cuando se acaba la columna de noticias.
   ========================================================= */
@media (min-width:1320px){
  .rascacielos{
    margin-top:22px;          /* el mismo aire que lleva el billboard */
    top:56px;                 /* justo bajo la barra de secciones */
    align-self:start;
    position:sticky;
  }
  /* El billboard ya no empuja: su margen superior lo marca la torre. */
  .anuncio--billboard{margin-top:22px}
}

/* =========================================================
   49. TORRES APILADAS
   Cada columna lateral guarda tres anuncios, uno debajo de
   otro. El primero se queda quieto mientras el lector baja;
   al agotarse su tramo sube y ocupa su sitio el siguiente.
   Es el relevo que hacen los diarios grandes: el lector nunca
   ve un hueco pegado, pero tampoco el mismo anuncio 4.000 px.
   ========================================================= */
@media (min-width:1320px){
  .rascacielos{
    position:static;          /* ahora lo pegajoso es cada tramo */
    display:flex;
    flex-direction:column;
    align-self:stretch;       /* la columna acompaña al alto de las noticias */
    margin-top:22px;
  }
  .rascacielos__tramo{
    flex:1 1 0;
    min-height:660px;         /* 600 del anuncio más su aire */
    position:relative;
  }
  .rascacielos__tramo .anuncio__hueco{
    position:sticky;
    top:56px;                 /* justo bajo la barra de secciones */
  }
  /* Un tramo sin anuncio no deja hueco ni empuja a los demás. */
  .rascacielos__tramo[hidden]{display:none !important}
}

/* Fuera del escritorio ancho no hay torres, así que tampoco tramos. */
@media (max-width:1319px){
  .rascacielos__tramo{display:none}
}