/*
Theme Name: El Notero
Theme URI: https://elnotero.com/
Author: Redacción El Notero
Description: Tema propio del diario. Arma cada página en el servidor, sin React ni relleno: cinco ediciones, tres modelos de portada, edición en inglés y la nota con su crédito de foto. Necesita el plugin «El Notero — Portal».
Version: 1.8.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: el-notero
*/

/* ---------- Base ---------- */
:root{
 --tinta:#0b1932; --tinta-2:#3d4a63; --suave:#6b7280; --linea:#dfe4ec; --linea-2:#eef1f6;
 --fondo:#ffffff; --papel:#f6f7f9; --navy:#0d2145; --acento:#c8102e; --naranja:#f34316;
 --serif:"Playfair Display",Georgia,"Times New Roman",Times,serif;
 --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --ancho:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--sans);font-size:16px;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.cont{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Cabecera ---------- */
.franja .fecha-corta{display:none}
.franja{background:var(--navy);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.franja .cont{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:34px}
.franja a{color:#c9d6ee}
.franja a:hover{color:#fff;text-decoration:none}
.masthead{border-bottom:3px solid var(--tinta);padding:22px 0 14px}
.masthead .cont{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* LA ENE ENCUADRADA.
   El cuadrado naranja que antes iba suelto delante del nombre ahora encierra
   la ene de NOTERO: la marca dejó de repetirse y el naranja sigue en la
   cabecera. Todo en medidas relativas al cuerpo de letra, así el recuadro
   acompaña al nombre cuando la pantalla achica y cuando el lector agranda la
   tipografía. El -.06em de la ene es lo que hace que su línea de base coincida
   con la de las otras letras; sin eso el recuadro queda flotando bajo. */
.marca{font-family:var(--serif);font-weight:900;font-size:clamp(34px,5vw,54px);letter-spacing:-.02em;line-height:1}
.marca a{display:inline-block}
.marca .ene{position:relative;display:inline-block;width:.93em;height:.93em;background:var(--naranja);
 border-radius:.087em;margin:0 .05em;vertical-align:-.115em}
.marca .ene i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 font-style:normal;color:#fff;line-height:1;transform:translateY(-.06em)}
.marca a:hover{text-decoration:none}
.lema{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.ediciones{border-bottom:1px solid var(--linea);background:var(--fondo);position:sticky;top:0;z-index:50}
.ediciones ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ediciones li a{display:block;padding:12px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--tinta-2);white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}
.ediciones li a:hover{color:var(--tinta);text-decoration:none}
.ediciones li a.on{color:var(--tinta);border-bottom-color:var(--naranja)}
.ediciones li.idioma{margin-left:auto}

/* ---------- Contacto y aporte ---------- */
.ediciones li.idioma{display:flex;gap:2px;align-items:center}
.ediciones li.idioma .aportar-chico{color:var(--acento);border-bottom-color:transparent}
.ediciones li.idioma .aportar-chico:hover{color:var(--acento);border-bottom-color:var(--acento)}
.pie .aportar{display:inline-block;background:var(--acento);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:9px 14px;border-radius:3px}
.pie .aportar:hover{text-decoration:none;opacity:.9}

.enp-contacto{max-width:760px;margin:0 auto;padding:10px 0 40px}
.enp-contacto .enp-bloque{padding:26px 0;border-top:1px solid var(--linea)}
.enp-contacto .enp-bloque:first-child{border-top:0}
.enp-contacto h2{font-family:var(--serif);font-size:26px;line-height:1.15;margin:0 0 8px}
.enp-contacto h3{font-size:17px;margin:22px 0 6px}
.enp-contacto .enp-intro{color:var(--tinta-2);margin:0 0 18px;max-width:62ch}
.enp-contacto .enp-legal{font-size:13px;color:var(--suave);max-width:70ch;margin:14px 0 0}
.enp-aviso{padding:12px 14px;border-radius:6px;margin:0 0 18px;font-size:15px}
.enp-ok{background:#e6f4ee;border:1px solid #bde3d1;color:#0a6b45}
.enp-mal{background:#fdeceb;border:1px solid #f3c4c0;color:#b42318}
.enp-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.enp-campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.enp-campos label{display:block;font-size:14px}
.enp-campos label.enp-ancho{grid-column:1/-1}
.enp-campos label span{display:block;margin:0 0 4px;font-weight:600;color:var(--tinta)}
.enp-campos label em{font-weight:400;font-style:normal;color:var(--suave)}
.enp-campos input[type=text],.enp-campos input[type=email],.enp-campos select,.enp-campos textarea{width:100%;padding:10px;border:1px solid var(--linea);border-radius:4px;font:inherit;font-size:15px;background:#fff}
.enp-campos textarea{resize:vertical}
.enp-campos input:focus,.enp-campos textarea:focus,.enp-campos select:focus{outline:2px solid var(--naranja);outline-offset:1px;border-color:var(--naranja)}
.enp-btn{margin-top:16px;background:var(--tinta);color:#fff;border:0;border-radius:4px;padding:12px 22px;font:inherit;font-weight:700;cursor:pointer}
.enp-btn:hover{background:var(--acento)}
.enp-seguro{margin-top:24px;padding:16px;border-left:4px solid var(--naranja);background:var(--papel)}
.enp-seguro h3{margin:0 0 6px}
/* Aportes: la pasarela va en una caja, para que se vea dónde se paga */
.enp-pasarela{border:1px solid var(--linea);border-radius:10px;background:var(--fondo);padding:18px;margin:0 0 16px}
.enp-pasarela-cripto{background:var(--papel)}
.enp-pasarela-cab{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px}
.enp-pasarela-cab .enp-ico{flex:none;color:var(--acento);margin-top:2px}
.enp-pasarela-cab strong{display:block;font-size:16px;color:var(--tinta)}
.enp-pasarela-cab span{display:block;font-size:13.5px;color:var(--suave);margin-top:2px}
.enp-pasarela-cab b{color:var(--tinta-2)}
.enp-botones{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0 0 6px}
.enp-botones-otros{margin:0 0 16px}
.enp-pago{display:block;padding:16px;border:1px solid var(--linea);border-radius:8px;background:#fff}
.enp-pago:hover{border-color:var(--acento);text-decoration:none}
.enp-pago strong{display:block;color:var(--tinta);font-size:16px}
.enp-pago span{display:block;margin-top:3px;font-size:13px;color:var(--suave)}
.enp-pago-stripe{border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
.enp-pago-stripe strong{color:var(--acento)}
.enp-medios{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0}
.enp-medio{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linea);border-radius:20px;background:#fff;padding:5px 12px 5px 9px;font-size:12.5px;color:var(--tinta-2);white-space:nowrap}
.enp-medio .enp-ico{width:17px;height:17px;color:var(--suave)}
.enp-seguro-nota{display:flex;gap:7px;align-items:flex-start;margin-top:12px}
.enp-seguro-nota .enp-ico{flex:none;width:16px;height:16px;margin-top:1px;color:#0a6b45}
.enp-cripto{list-style:none;margin:8px 0 0;padding:0}
.enp-cripto li{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:11px 0;border-bottom:1px solid var(--linea)}
.enp-cripto li:last-child{border-bottom:0}
.enp-cripto .enp-moneda{flex:0 0 150px}
.enp-cripto .enp-moneda strong{display:block;font-size:14px;color:var(--tinta)}
.enp-cripto .enp-red{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.enp-cripto code{font-size:12.5px;word-break:break-all;flex:1 1 220px;color:var(--tinta);background:#fff;border:1px solid var(--linea);border-radius:4px;padding:7px 9px}
.enp-copiar{border:1px solid var(--linea);background:#fff;border-radius:4px;padding:7px 14px;font:inherit;font-size:13px;cursor:pointer}
.enp-copiar:hover{border-color:var(--acento);color:var(--acento)}
@media (max-width:560px){
 .enp-campos{grid-template-columns:1fr}
 .enp-pasarela{padding:14px}
 .enp-cripto .enp-moneda{flex:1 0 100%}
 .enp-cripto code{flex:1 1 100%}
}

.ediciones li.idioma a{color:var(--suave);font-weight:600}

/* ---------- Alerta ---------- */
.alerta{background:var(--acento);color:#fff}
.alerta .cont{display:flex;align-items:center;gap:12px;min-height:44px}
.alerta .rotulo{flex:none;background:#fff;color:var(--acento);font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.12em;padding:5px 8px;border-radius:2px}
.alerta .rotulo.parpadea{animation:enp-parpadeo 1.1s steps(2,start) infinite}
@keyframes enp-parpadeo{to{visibility:hidden}}
.alerta a.texto{color:#fff;font-weight:600;font-size:15px;line-height:1.3}

/* ---------- Rótulos y tarjetas ---------- */
.seccion{padding-top:28px;padding-bottom:8px}
.seccion-cab{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:2px solid var(--tinta);padding-bottom:8px;margin-bottom:18px}
.seccion-cab h2{font-family:var(--serif);font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0;text-transform:uppercase}
.seccion-cab .chico{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.vol{font-family:var(--mono);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--acento);margin:0 0 6px}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--suave);margin:8px 0 0;display:flex;gap:8px;flex-wrap:wrap}
/* El separador ahora tiene que valer para span y para time, porque la fecha
   dejó de ser un span suelto y pasó a ser un <time> con su fecha legible. */
.meta > *+*::before{content:"·";margin-right:8px}
.meta a[rel=author]{color:var(--tinta-2);font-weight:600}
.meta a[rel=author]:hover{color:var(--acento)}
.meta .actualizada{color:var(--acento)}
/* Los titulares de las secciones que no son la apertura llevan el peso más
   alto de la tipografía. A 17 o 21 píxeles, una Playfair en 800 se afina y
   pierde contra la foto de al lado; en 900 el título vuelve a mandar, que es
   lo que un lector busca cuando barre una portada con el pulgar. */
.tar h3{font-family:var(--serif);font-weight:900;line-height:1.15;letter-spacing:-.012em;margin:0;color:var(--tinta)}
.apertura .principal h3{font-weight:800}
.tar p.bajada{color:var(--tinta-2);margin:8px 0 0;font-size:15px;line-height:1.5}
.tar .foto{overflow:hidden;background:var(--papel);border-radius:4px;margin-bottom:12px}
.tar .foto img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 26%;transition:transform .35s}
/* El encuadre real lo pone el tema foto por foto, con object-position en línea:
   el valor de acá es solo la red de seguridad para una imagen sin dato. */
.nota figure img{object-fit:contain}
.tar:hover .foto img{transform:scale(1.02)}
.tar a:hover{text-decoration:none}
.tar a:hover h3{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.credito{font-family:var(--mono);font-size:10.5px;color:var(--suave);margin:6px 0 0;line-height:1.35}

/* Apertura */
.apertura{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;padding-top:26px;padding-bottom:8px}
.apertura .principal{grid-column:span 8}
.apertura .lado{grid-column:span 4;display:flex;flex-direction:column;gap:22px}
.apertura .lado .tar{padding-bottom:22px;border-bottom:1px solid var(--linea)}
.apertura .lado .tar:last-child{border-bottom:0;padding-bottom:0}
.apertura .principal h3{font-size:clamp(28px,3.6vw,44px)}
.apertura .principal .foto img{aspect-ratio:16/9}
.apertura .principal p.bajada{font-size:18px;margin-top:12px}
.apertura .lado h3{font-size:20px}
.apertura .abajo{grid-column:span 12;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-top:22px;border-top:1px solid var(--linea)}
.apertura .abajo h3{font-size:19px}
.apertura.gran .principal{grid-column:span 12}
.apertura.gran .principal h3{font-size:clamp(34px,5vw,60px)}
.apertura.gran .principal .foto img{aspect-ratio:2/1}

/* Grillas */
.grilla-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.grilla-3 h3{font-size:19px}
.lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.lista .tar{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--linea)}
.lista .tar .foto{margin:0}
.lista .tar .foto img{aspect-ratio:4/3}
.lista .tar h3{font-size:17px}
.regional{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.regional .tar{display:flex;gap:12px;padding:12px;border:1px solid var(--linea);border-radius:8px;background:var(--fondo)}
.regional .tar .foto{flex:none;width:84px;margin:0;border-radius:6px}
.regional .tar .foto img{aspect-ratio:1/1;object-position:50% 22%}
.regional .tar h3{font-size:15px}
.regional .vol{margin-bottom:3px}

/* Nota */
.nota{max-width:820px;margin:0 auto;padding:30px 20px 60px}
.nota .volver{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
.nota h1{font-family:var(--serif);font-size:clamp(30px,4.2vw,46px);font-weight:900;line-height:1.1;letter-spacing:-.015em;margin:14px 0 12px}
.nota .bajada{font-size:20px;line-height:1.45;color:var(--tinta-2);margin:0 0 18px}
.nota .meta{margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid var(--linea)}
.nota figure{margin:0 0 26px}
.nota figure img{width:100%;border-radius:6px}
.nota figcaption{font-family:var(--mono);font-size:11px;color:var(--suave);padding:8px 2px 0;line-height:1.4}
.cuerpo{font-size:18.5px;line-height:1.7}
.cuerpo p{margin:0 0 1.15em}
.cuerpo h2,.cuerpo h3{font-family:var(--serif);line-height:1.2;margin:1.4em 0 .5em}
.cuerpo blockquote{margin:1.3em 0;padding:4px 0 4px 20px;border-left:4px solid var(--naranja);color:var(--tinta-2);font-style:italic}
.cuerpo iframe,.cuerpo video{max-width:100%}
.cuerpo hr{border:0;border-top:1px solid var(--linea);margin:2em 0}
.cuerpo .enp-pie,.cuerpo .enp-fuentes{font-size:14px;color:var(--suave);border-top:1px solid var(--linea);padding-top:14px;margin-top:2em}
.relacionadas{border-top:2px solid var(--tinta);margin-top:40px;padding-top:18px}
.relacionadas h2{font-family:var(--serif);font-size:20px;margin:0 0 16px;text-transform:uppercase}

/* Pie */
.pie{background:var(--navy);color:#c9d6ee;margin-top:50px;padding:34px 0 26px;font-size:14px}
.pie .cont{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.pie .marca{color:#fff;font-size:30px}
.pie h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8fa3c7;margin:0 0 10px}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin:0 0 7px}
.pie a{color:#dfe6f4}
.pie .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#8fa3c7;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}

/* Archivo / búsqueda / 404 */
.archivo{padding-top:26px;padding-bottom:40px}
.archivo h1{font-family:var(--serif);font-size:30px;margin:0 0 18px}
.nada{padding:60px 20px;text-align:center;color:var(--suave)}
.paginado{display:flex;gap:8px;justify-content:center;margin:30px 0 0;font-family:var(--mono);font-size:12px}
.paginado a,.paginado span{padding:8px 12px;border:1px solid var(--linea);border-radius:4px}
.paginado .current{background:var(--tinta);color:#fff;border-color:var(--tinta)}

/* ---------- Teléfono ---------- */
@media (max-width:900px){
 .apertura{gap:22px}
 .apertura .principal,.apertura .lado{grid-column:span 12}
 .apertura .abajo{grid-template-columns:1fr}
 .grilla-3,.regional{grid-template-columns:1fr}
 .lista{grid-template-columns:1fr}
 .pie .cont{grid-template-columns:1fr}
}
@media (max-width:560px){
 .cont{padding:0 16px}
 .masthead{padding:16px 0 10px}
}

/* La barra de lectura de una nota: sin guiones, sin peso, y si el navegador
   no la entiende no se dibuja y no pasa nada. */
.lectura{position:fixed;top:0;left:0;height:3px;width:0;background:var(--naranja);z-index:99}
@supports (animation-timeline:scroll()){
 .lectura{width:100%;transform:scaleX(0);transform-origin:0 50%;
   animation:enp-leyendo linear both;animation-timeline:scroll(root block)}
 @keyframes enp-leyendo{to{transform:scaleX(1)}}
}

/* ==========================================================================
   EL DIARIO EN EL TELÉFONO
   ==========================================================================

   Ocho de cada diez lectores de un diario digital entran desde el teléfono, y
   hasta acá el teléfono recibía la portada de escritorio apretada en una
   columna: el mismo orden, los mismos tamaños, todo más angosto. Eso se lee,
   pero no se parece a nada.

   Lo que sigue no es «la versión chica»: es una portada pensada para una mano
   y una pantalla vertical, con cuatro decisiones de fondo.

   1. LA APERTURA OCUPA LA PANTALLA. La foto va de borde a borde, sin margen, y
      el titular va ENCIMA, sobre un degradado. En un teléfono, media pantalla
      de foto y el título abajo desperdicia el golpe de vista; así la nota
      principal entra entera de una y se parece a una portada, no a una lista.
   2. CADA BLOQUE SE VE DISTINTO. La apertura es una imagen grande; las notas
      del lado son fichas con miniatura cuadrada; «Últimas» es una lista
      numerada sin fotos, que se recorre con el pulgar; «En la región» es un
      carrusel que se arrastra. El lector sabe dónde está por la forma, no por
      el rótulo.
   3. EL CUADRADO NARANJA ES EL SISTEMA. El mismo cuadrado de la marca marca
      las secciones, numera la lista y señala la edición activa. Una sola idea
      gráfica repetida, que es lo que hace que un diseño se reconozca.
   4. TODO LO QUE SE TOCA MIDE 44 PÍXELES. Y todo lo que se toca responde: sin
      respuesta al dedo, una página se siente rota aunque funcione.
   ========================================================================== */

@media (max-width:700px){

 :root{ --ancho:100%; }
 body{font-size:17px}
 .cont{padding:0 18px}

 /* La franja: una sola línea, sin gritar. Antes ocupaba dos renglones en
    mayúsculas y era lo primero que veía el lector. */
 .franja{font-size:10px;letter-spacing:.1em}
 .franja .cont{min-height:30px;gap:10px;padding-top:env(safe-area-inset-top,0)}
 .franja .cont span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .franja .cont span:last-child{flex:none}

 /* Cabecera compacta: la marca manda y el lema no se lleva una línea entera. */
 .masthead{padding:12px 0 10px;border-bottom-width:2px}
 .masthead .cont{align-items:center;gap:10px}
 .marca{font-size:31px;gap:9px}
 .marca::before{width:11px;height:11px}
 .lema{font-size:8.5px;letter-spacing:.06em;text-align:right;white-space:nowrap}
 .franja .fecha-larga{display:none}
 .franja .fecha-corta{display:inline}

 /* Ediciones: pastillas que se arrastran, con la activa llena. La barra ya no
    corta una edición por la mitad —«ARGENTI»— ni obliga a adivinar que hay más
    a la derecha: el degradado del borde lo dice. */
 .ediciones{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--linea)}
 .ediciones .cont{padding:0;position:relative}
 .ediciones .cont::after{content:"";position:absolute;right:0;top:0;bottom:0;width:34px;pointer-events:none;
   background:linear-gradient(90deg,rgba(255,255,255,0),var(--fondo) 70%)}
 .ediciones ul{gap:6px;padding:8px 18px;scroll-snap-type:x proximity;scrollbar-width:none}
 .ediciones ul::-webkit-scrollbar{display:none}
 .ediciones li{scroll-snap-align:start}
 .ediciones li a{padding:9px 14px;font-size:11px;letter-spacing:.1em;border-bottom:0;margin:0;
   border-radius:999px;background:var(--papel);color:var(--tinta-2);min-height:34px;display:flex;align-items:center}
 .ediciones li a.on{background:var(--tinta);color:#fff}
 .ediciones li.idioma{margin-left:6px;gap:6px}
 .ediciones li.idioma a{background:transparent;border:1px solid var(--linea);font-size:10.5px;padding:8px 11px}
 .ediciones li.idioma .aportar-chico{border-color:var(--acento);color:var(--acento)}

 /* La franja de alerta: el rótulo arriba, el texto abajo, sin apretarse. */
 .alerta .cont{gap:10px;align-items:flex-start;padding:9px 18px;min-height:0}
 .alerta .rotulo{margin-top:2px}
 .alerta a.texto{font-size:15px;line-height:1.3}

 /* ---- La apertura, a pantalla completa ---- */
 /* La apertura conserva el margen lateral: el único que lo rompe es la foto
    principal, con su margen negativo, y lo hace a propósito. */
 .apertura{display:block;padding:0 18px 4px}
 .apertura .principal{margin:0 0 26px}
 .apertura .principal .tar{position:relative}
 .apertura .principal .foto{
   display:block;margin:0 -18px 0;border-radius:0;background:var(--navy);position:relative}
 /* Cuadrada, no vertical: con 4:5 el titular quedaba apenas debajo del borde
    de la pantalla en un teléfono con la franja de alerta puesta. Así la
    apertura entra entera —foto y título— en el primer golpe de vista. */
 .apertura .principal .foto img,
 .apertura.gran .principal .foto img{aspect-ratio:1/1;width:100%;object-fit:cover}
 /* El degradado que deja leer el título sobre la foto. Va en el enlace de la
    foto para que el texto pueda apoyarse encima sin tocar el marcado. */
 .apertura .principal .foto::after{content:"";position:absolute;inset:0;
   background:linear-gradient(180deg,rgba(11,25,50,0) 34%,rgba(11,25,50,.55) 62%,rgba(9,20,40,.92) 100%)}
 .apertura .principal .texto{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 18px 20px;pointer-events:none}
 .apertura .principal .texto a{pointer-events:auto}
 .apertura .principal h3{color:#fff;font-size:clamp(28px,7.6vw,34px);line-height:1.08;letter-spacing:-.02em;
   text-shadow:0 1px 24px rgba(4,12,28,.45)}
 .apertura .principal .vol{color:#fff;background:var(--acento);display:inline-block;
   padding:4px 8px;margin:0 0 10px;font-size:10px;letter-spacing:.14em}
 .apertura .principal .bajada{display:none}
 .apertura .principal .meta{color:rgba(255,255,255,.72);margin-top:10px}
 .apertura .principal .meta span+span::before{color:rgba(255,255,255,.45)}
 /* El crédito de la foto, chiquito y dentro de la imagen: no puede ocupar un
    renglón propio en una pantalla de seis pulgadas, pero tampoco puede faltar. */
 /* El crédito, en su propio renglón al pie de la foto: la licencia de una foto
    libre exige nombrar al autor, así que no se puede esconder, pero tampoco
    puede pelearle el lugar a la hora de publicación. */
 .apertura .principal .credito{position:absolute;bottom:7px;left:18px;right:18px;z-index:3;margin:0;
   color:rgba(255,255,255,.5);font-size:9px;line-height:1.4;text-align:right;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .apertura .principal .texto{padding-bottom:28px}

 /* ---- Las del lado: fichas con miniatura cuadrada ---- */
 .apertura .lado{display:block;margin-bottom:22px}
 .apertura .lado .tar{display:grid;grid-template-columns:1fr 92px;gap:14px;align-items:start;
   padding:0 0 15px;margin-bottom:15px;border-bottom:1px solid var(--linea)}
 .apertura .lado .tar:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
 .apertura .lado .foto{grid-column:2;grid-row:1;margin:0;border-radius:7px}
 .apertura .lado .foto img{aspect-ratio:1/1}
 .apertura .lado .texto{grid-column:1;grid-row:1}
 .apertura .lado h3{font-size:18px;line-height:1.22}
 .apertura .lado .vol{margin-bottom:5px}
 .apertura .lado .meta{margin-top:7px}

 /* ---- Las de abajo y las grillas: una columna, foto ancha ---- */
 .apertura .abajo{display:block;padding-top:0;border-top:0}
 .apertura .abajo .tar,.grilla-3 .tar{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--linea)}
 .apertura .abajo .tar:last-child,.grilla-3 .tar:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
 .apertura .abajo h3,.grilla-3 h3{font-size:21px;line-height:1.18}
 .tar .foto img{aspect-ratio:16/9}
 .tar .foto{border-radius:8px}

 /* ---- Rótulos de sección: el cuadrado naranja como marca del sistema ---- */
 .seccion{padding-top:26px;padding-bottom:0}
 .seccion-cab{display:flex;align-items:center;gap:9px;border-bottom:0;padding-bottom:0;margin-bottom:16px}
 .seccion-cab::before{content:"";width:9px;height:9px;background:var(--naranja);flex:none}
 .seccion-cab h2{font-size:15px;letter-spacing:.02em}
 .seccion-cab .chico{margin-left:auto;font-size:9.5px}

 /* ---- «Últimas»: lista numerada, sin fotos, para recorrer con el pulgar ---- */
 .lista{display:block;counter-reset:ultimas}
 .lista .tar{display:grid;grid-template-columns:34px 1fr;gap:13px;align-items:start;
   padding:14px 0;margin:0;border-bottom:1px solid var(--linea-2)}
 .lista .tar:first-child{padding-top:0}
 .lista .tar:last-child{border-bottom:0}
 .lista .tar .foto{display:none}
 .lista .tar::before{counter-increment:ultimas;content:counter(ultimas,decimal-leading-zero);
   font-family:var(--mono);font-size:13px;font-weight:700;color:var(--acento);
   padding-top:2px;font-variant-numeric:tabular-nums}
 .lista .tar h3{font-size:17px;line-height:1.28;letter-spacing:-.015em}
 .lista .tar .vol{display:none}
 .lista .tar .meta{margin-top:6px;font-size:10px}

 /* ---- «En la región»: carrusel que se arrastra ---- */
 /* El carrusel. Las tarjetas se estiraban todas a la altura de la más alta y
    la más corta quedaba con un hueco blanco enorme abajo. Ahora cada una mide
    lo suyo —align-items:start— y el titular se corta en dos renglones, así
    todas terminan igual de altas sin depender del largo del título. */
 /* Ojo con esto: sin anular grid-template-columns, las tres columnas del
    escritorio siguen vivas y la primera tarjeta del carrusel se aplasta a dos
    píxeles. Pasó, y es de los errores que solo se ven midiendo. */
 .regional{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:68%;gap:11px;
   align-items:start;scroll-padding-left:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
   margin:0 -18px;padding:2px 18px 6px}
 .regional::-webkit-scrollbar{display:none}
 .regional .tar{display:block;scroll-snap-align:start;padding:0;border:1px solid var(--linea);
   border-radius:10px;overflow:hidden;background:var(--fondo)}
 .regional .tar .foto{width:100%;margin:0;border-radius:0}
 .regional .tar .foto img{aspect-ratio:16/9;object-position:50% 22%}
 .regional .tar .texto{padding:11px 12px 12px}
 .regional .tar .vol{margin-bottom:5px}
 .regional .tar h3{font-size:15.5px;line-height:1.26;min-height:2.52em;
   display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .regional .tar .meta{margin-top:7px;font-size:10px}

 /* ---- La nota ---- */
 .nota{padding:22px 18px 48px}
 .nota h1{font-size:clamp(27px,7.4vw,33px);line-height:1.12;margin:12px 0 10px}
 .nota .bajada{font-size:18px;line-height:1.42}
 .nota figure{margin:0 -18px 22px}
 .nota figure img{border-radius:0}
 .nota figcaption{padding:8px 18px 0}
 .cuerpo{font-size:18px;line-height:1.72}
 .cuerpo p{margin:0 0 1.05em}
 .relacionadas{margin-top:34px}

 /* ---- El pie ---- */
 .pie{margin-top:36px;padding:28px 0 calc(22px + env(safe-area-inset-bottom,0))}
 .pie .cont{gap:22px}
 .pie .legal{flex-direction:column;gap:6px}
 .pie .aportar{display:block;text-align:center;padding:13px 14px;margin-top:4px}

 /* ---- Al dedo: blancos de toque y respuesta ---- */
 .tar a,.ediciones li a,.pie a,.paginado a{-webkit-tap-highlight-color:transparent}
 .tar a:active h3{color:var(--acento)}
 .ediciones li a:active{transform:scale(.97)}
 .tar .foto img{transition:none}
 .contacto-flotante{display:none}
}

/* Pantallas medianas: la portada no salta de golpe de tres columnas a una. */
@media (min-width:701px) and (max-width:900px){
 .grilla-3{grid-template-columns:repeat(2,minmax(0,1fr))}
 .regional{grid-template-columns:repeat(2,minmax(0,1fr))}
}