/*
Theme Name: De Reporteros — Nocturno Directo
Theme URI: https://tudominio.com
Author: Duck Hack
Author URI: https://duck-hack.com
Description: Propuesta de tema para dereporteros.com — la estructura cálida de Moderno Equilibrado (hero + mini-cards, pills de color, ranking numerado) en modo nocturno, con los acentos mono de Panorama.
Version: 1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: dereporteros-nocturno-directo
*/

:root{
  --bg:#10140F;
  --panel:#171D16;
  --panel-hi:#1E251C;
  --line:#2B3327;
  --text:#EDEAE0;
  --text-soft:#98A292;
  --green:#2F8F52;
  --green-deep:#1A4F30;
  --alert:#E14B4B;
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
/* Footer pegado abajo: body es una columna flex de altura mínima igual al
   viewport; .site-main (header.php/footer.php) crece para ocupar el
   espacio sobrante cuando el contenido de la página es corto, empujando
   el footer al fondo en vez de dejarlo flotando a media pantalla. */
body{display:flex;flex-direction:column;min-height:100%;background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;}
.site-main{flex:1 0 auto;}
img{max-width:100%;display:block;}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:'Barlow',sans-serif;margin:0;color:var(--text);}
.mono{font-family:'JetBrains Mono',monospace;}
.pill{display:inline-flex;align-items:center;font-family:'Inter',sans-serif;font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:3px;color:#fff;}
.pill.green{background:var(--green);}
.pill.alert{background:var(--alert);}
a.pill{transition:opacity .15s ease;}
a.pill:hover{opacity:.85;}
.meta-mono{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.03em;color:var(--text-soft);text-transform:uppercase;}
.meta-mono a{color:inherit;}
.meta-mono a:hover{text-decoration:underline;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Barra superior fija: cintillo + navbar quedan siempre visibles al hacer scroll */
.site-topbar{position:sticky;top:0;z-index:60;}

/* Ticker — una sola nota: categoría/título fijos + extracto en marquesina */
.ticker{background:var(--panel);border-bottom:1px solid var(--line);color:#fff;}
.ticker .wrap{display:flex;align-items:center;height:42px;gap:16px;}
/* Badge "Última hora" con un pulso tipo "en vivo" — anillo que se expande
   y se desvanece alrededor del badge — distinto de la marquesina (que ya
   trae su propia animación de scroll) para que el cintillo llame más la
   atención sin copiar el tratamiento del tema Bento Claro. */
.ticker .badge{background:var(--alert);font-family:'Barlow',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.05em;padding:5px 10px;border-radius:3px;flex-shrink:0;animation:ticker-badge-pulse 2.2s ease-out infinite;}
.ticker .items{flex:1;min-width:0;height:100%;overflow:hidden;}
.ticker-item{display:flex;align-items:center;gap:14px;height:100%;overflow:hidden;}
.ticker-static{display:flex;align-items:center;gap:8px;flex-shrink:0;max-width:48%;overflow:hidden;}
.ticker-cat{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--green);flex-shrink:0;}
.ticker-title{color:var(--text);font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ticker-sep{color:var(--line);padding:0 2px;flex-shrink:0;}
.ticker-marquee-wrap{flex:1;min-width:0;height:100%;display:flex;align-items:center;overflow:hidden;}
/* Máquina de escribir en vez de marquesina deslizante (esa es la del tema
   Bento Claro): el texto se revela de a un carácter con steps(), el ancho
   final en "ch" (--ticker-width, calculado por PHP según la longitud del
   extracto) es lo que hace que el texto completo termine descubierto, y
   el borde derecho hace de cursor parpadeante mientras tanto. */
.ticker-marquee{
  position:relative;
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  vertical-align:middle;
  width:0;
  border-right:2px solid var(--green);
  animation:
    ticker-type var(--marquee-duration, 8s) steps(40, end) infinite,
    ticker-caret-blink .8s step-end infinite;
}
.ticker-item:hover .ticker-marquee{animation-play-state:paused;}
.ticker-body{color:var(--text-soft);font-weight:400;font-size:13px;}

@keyframes ticker-type{
  0%{width:0;}
  65%{width:var(--ticker-width, 32ch);}
  100%{width:var(--ticker-width, 32ch);}
}
@keyframes ticker-caret-blink{
  0%, 100%{border-color:transparent;}
  50%{border-color:var(--green);}
}
@keyframes ticker-badge-pulse{
  0%{box-shadow:0 0 0 0 rgba(225,75,75,.55);}
  70%{box-shadow:0 0 0 8px rgba(225,75,75,0);}
  100%{box-shadow:0 0 0 0 rgba(225,75,75,0);}
}
@media (prefers-reduced-motion: reduce){
  /* Sin animación, el ancho se queda en 0 (punto de partida del tecleo) y
     el texto no se vería nunca — se muestra directo, ya completo. */
  .ticker-marquee{animation:none;width:var(--ticker-width, 32ch);border-right-color:transparent;}
  .ticker .badge{animation:none;}
}

/* Header */
header.site{padding:20px 0;background:var(--bg);border-bottom:1px solid var(--line);}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;}
/* Chip claro detrás del logo: el isotipo trae texto en negro sólido y se
   pierde sobre el fondo oscuro del tema si se coloca directo. */
.brand{display:inline-flex;align-items:center;flex-shrink:0;background:#fff;padding:6px 14px;border-radius:8px;}
.site-logo{height:26px;width:auto;display:block;}
.nav-panel{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.main-nav{display:flex;gap:24px;flex-wrap:wrap;}
.main-nav a{font-family:'Barlow',sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.02em;color:var(--text-soft);}
.main-nav a.active,.main-nav a:hover{color:var(--text);}
.social-nav{display:flex;gap:14px;align-items:center;flex-shrink:0;}
.social-nav a{display:flex;color:var(--text-soft);transition:color .15s ease;}
.social-nav a:hover{color:var(--green);}
.social-nav svg{width:20px;height:20px;}

/* Botón hamburguesa: oculto en escritorio, .nav-panel nunca se colapsa
   arriba de 900px (mismo breakpoint que el resto del sitio). */
.nav-toggle{display:none;}

/* Hero — últimas 4 notas (a=grande, b=mediana, c/d=apiladas a la derecha) */
.hero-latest{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.8fr 1.1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:3px;
  height:clamp(560px, 80vh, 750px);
  background:var(--bg);
}
.hl-tile{position:relative;display:block;overflow:hidden;background:var(--panel);}
/* .hl-tile ya no es <a> (para que el pill de categoría tenga su propio
   destino): .hl-cover es el link "de fondo" que hace clicable el resto de
   la tarjeta (imagen incluida). Las capas decorativas dejan pasar el clic
   hacia ese cover; .hl-body también, salvo sus <a> reales, que lo
   recuperan explícitamente y ganan prioridad de clic. */
.hl-cover{position:absolute;inset:0;}
.hl-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.hl-a{grid-column:1;grid-row:1 / 3;}
.hl-b{grid-column:2;grid-row:1 / 3;}
.hl-c{grid-column:3;grid-row:1;}
.hl-d{grid-column:3;grid-row:2;}
.hl-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(6,8,5,0) 38%, rgba(5,7,4,.94) 100%);pointer-events:none;}
.hl-body{position:absolute;left:0;right:0;bottom:0;padding:26px;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
.hl-body a{pointer-events:auto;}
.hl-body .pill{align-self:flex-start;}
.hl-title{font-family:'Barlow',sans-serif;font-weight:800;color:#fff;margin:0;line-height:1.16;}
.hl-a .hl-title{font-size:36px;max-width:22ch;}
.hl-b .hl-title{font-size:23px;max-width:20ch;}
.hl-c .hl-body,.hl-d .hl-body{padding:18px;}
.hl-c .hl-title,.hl-d .hl-title{font-size:15px;max-width:28ch;}

/* Hero (estructura de Moderno: card grande + mini-cards) */
.hero{padding:32px 0;}
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;}
.hero-main{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.hero-main img{width:100%;height:340px;object-fit:cover;}
.hero-main .body{padding:22px;}
.hero-main h1{font-size:30px;line-height:1.15;font-weight:800;margin:12px 0 10px;}
.hero-main p.dek{font-size:14.5px;color:var(--text-soft);margin:0 0 12px;}
.hero-main .body .pill{position:relative;z-index:2;}
.hero-main-author{position:relative;z-index:2;}
/* Toda la tarjeta clicable a la nota (imagen incluida) vía este link
   "estirado" sobre el título; pill de categoría y autor quedan encima. */
.hero-main-link::after{content:'';position:absolute;inset:0;z-index:1;}

.hero-side{display:flex;flex-direction:column;gap:14px;}
.mini-card{position:relative;display:flex;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;align-items:center;}
.mini-card img{width:84px;height:64px;object-fit:cover;border-radius:6px;flex-shrink:0;}
.mini-card h3{font-size:14.5px;line-height:1.28;font-weight:700;}
.mini-card .pill{position:relative;z-index:2;}
.mini-card-link::after{content:'';position:absolute;inset:0;z-index:1;}

/* Relleno para el hueco que queda bajo las mini-cards de .hero-side (el
   grid la estira a la altura de .hero-main, pero 3 mini-cards casi nunca
   la llenan): la última nota etiquetada "cdmx", con el mapa de la ciudad
   superpuesto sobre la foto de la nota y desvanecido en degradado (ver
   .hero-cdmx-map) para que se distinga a simple vista del resto de
   tarjetas del hero. */
.hero-cdmx{flex:1;min-height:130px;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.hero-cdmx-media{position:relative;flex:1;min-height:76px;}
.hero-cdmx-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.hero-cdmx-thumb{z-index:1;}
/* El mapa va encima, a tamaño completo, pero una máscara en degradado lo
   desvanece de izquierda a derecha: opaco hasta ~35% del ancho y ya
   transparente del todo a partir de ~70%, así se funde gradualmente con
   la foto de la nota en vez de cortarse de golpe a la mitad. */
.hero-cdmx-map{
  z-index:2;
  filter:grayscale(.25) brightness(.85);
  -webkit-mask-image:linear-gradient(to right, #000 0%, #000 35%, transparent 70%);
  mask-image:linear-gradient(to right, #000 0%, #000 35%, transparent 70%);
}
.hero-cdmx-body{padding:12px 14px;}
.hero-cdmx-body .pill{margin-bottom:6px;}
.hero-cdmx-body h3{font-size:14px;line-height:1.32;font-weight:700;color:var(--text);}

/* "Nota del día": banner inmersivo de una sola nota (etiqueta
   "nota-del-dia"), foto de fondo a toda la tarjeta + degradado, listón
   destacado y botón real de lectura. */
.nota-dia{padding:0 28px 40px;}
.nota-dia-card{
  position:relative;display:block;overflow:hidden;
  max-width:1240px;margin:0 auto;
  height:clamp(420px, 62vh, 560px);
  border-radius:16px;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.6);
  outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;
}
/* .nota-dia-card no es <a> (para que la categoría y el autor tengan su
   propio destino): .nota-dia-cover es el link "de fondo" que hace clicable
   el resto de la tarjeta (imagen incluida). Las capas puramente
   decorativas dejan pasar el clic (pointer-events:none) hacia ese cover;
   .nota-dia-content también, salvo sus <a> reales (pill, autor, CTA), que
   lo recuperan explícitamente y así ganan la prioridad de clic. */
.nota-dia-cover{position:absolute;inset:0;}
.nota-dia-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;pointer-events:none;}
.nota-dia-card:hover .nota-dia-img{transform:scale(1.035);}
.nota-dia-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,12,9,.08) 0%, rgba(8,12,9,.32) 42%, rgba(6,9,7,.94) 100%);pointer-events:none;}
.nota-dia-ribbon{
  position:absolute;top:24px;left:0;z-index:1;
  display:inline-flex;align-items:center;gap:7px;
  background:var(--alert);color:#fff;
  font-family:'Barlow',sans-serif;font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;
  padding:9px 20px 9px 16px;border-radius:0 30px 30px 0;
  box-shadow:0 10px 22px -8px rgba(194,59,59,.65);
  pointer-events:none;
}
.nota-dia-content{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:44px 48px;max-width:760px;pointer-events:none;}
.nota-dia-content a{pointer-events:auto;}
.nota-dia-content .pill{margin-bottom:16px;}
.nota-dia-title{font-family:'Barlow',sans-serif;font-size:42px;line-height:1.06;font-weight:800;color:#fff;margin:0 0 14px;}
.nota-dia-dek{font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.8);margin:0 0 24px;max-width:58ch;}
.nota-dia-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.nota-dia-foot .meta-mono{color:#9FD6B4;}
.nota-dia-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:var(--green-deep);
  font-family:'Barlow',sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.03em;
  padding:12px 22px;border-radius:30px;
  transition:background .2s ease,color .2s ease;
}
.nota-dia-card:hover .nota-dia-cta{background:var(--green);color:#fff;}

/* Espacio publicitario horizontal, dinámico (etiquetas publicidad1/publicidad2). */
.ad-banner{padding:6px 28px 34px;}
.ad-banner-label{display:block;color:var(--text-soft);font-size:10.5px;letter-spacing:.05em;margin-bottom:8px;}
.ad-banner-img{width:100%;height:auto;border-radius:var(--radius);display:block;}
.ad-banner a{display:block;}

/* Espacio publicitario vertical (columna angosta de .body-cols). */
.ad-slot{position:sticky;top:20px;}
.ad-slot-label{display:block;color:var(--text-soft);font-size:10.5px;letter-spacing:.05em;margin-bottom:8px;}
.ad-slot-img{width:100%;height:auto;border-radius:var(--radius);display:block;}
.ad-slot a{display:block;}

/* Carousel "Personas Desaparecidas" — acento rojo (distinto del verde del
   resto del sitio) para señalar que es contenido urgente/sensible. */
.personas{padding-top:14px;padding-bottom:40px;}
.personas-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap;}
.personas-eyebrow{display:flex;align-items:center;gap:10px;}
.personas-eyebrow .dot{width:9px;height:9px;border-radius:50%;background:var(--alert);flex-shrink:0;}
.personas-eyebrow h2{font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;}
.personas-sub{font-size:13px;line-height:1.55;color:var(--text-soft);max-width:56ch;margin:8px 0 0 19px;}
.personas-see-all{font-family:'Barlow',sans-serif;font-weight:700;font-size:13px;color:var(--alert);white-space:nowrap;padding-top:2px;}
.personas-see-all:hover{text-decoration:underline;}

.personas-carousel{position:relative;}
.personas-track{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 2px 10px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.personas-track::-webkit-scrollbar{display:none;}
.personas-card{
  flex:0 0 250px;scroll-snap-align:start;display:block;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:box-shadow .2s ease,transform .2s ease;
}
.personas-card:hover{box-shadow:0 14px 30px -14px rgba(0,0,0,.5);transform:translateY(-2px);}
.personas-card .imgwrap{position:relative;height:300px;}
.personas-card .imgwrap img{width:100%;height:100%;object-fit:cover;}
.personas-card .imgwrap::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(6,8,5,0) 55%, rgba(5,7,4,.9) 100%);}
.personas-card .imgwrap .pill{position:absolute;left:14px;bottom:14px;z-index:1;}
.personas-card .body{padding:16px;}
.personas-card h3{font-size:15px;line-height:1.35;font-weight:700;margin:0 0 10px;}
.personas-cta{font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--alert);}

.personas-arrow{
  position:absolute;top:120px;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  background:var(--panel);box-shadow:0 10px 22px -10px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;color:var(--text);
  cursor:pointer;z-index:2;padding:0;
}
.personas-arrow.prev{left:-8px;}
.personas-arrow.next{right:-8px;}
.personas-arrow:hover{background:var(--alert);border-color:var(--alert);color:#fff;}

/* Card grid */
.grid-section{padding:10px 0 34px;}
.section-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.section-head h2{font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;}
.section-head .dot{width:9px;height:9px;border-radius:50%;background:var(--green);}
.section-see-all{font-family:'Barlow',sans-serif;font-weight:700;font-size:13px;color:var(--green);white-space:nowrap;margin-left:auto;}
.section-see-all:hover{text-decoration:underline;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.grid-section.is-narrow{max-width:760px;}
.grid-section.is-narrow .grid-4{grid-template-columns:repeat(3,1fr);}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.card img{width:100%;height:126px;object-fit:cover;}
.card .body{padding:14px;}
.card h3{font-size:15px;line-height:1.3;font-weight:700;margin:8px 0 0;}
.card .pill{position:relative;z-index:2;}
.card-link::after{content:'';position:absolute;inset:0;z-index:1;}

/* Two column lower */
.body-cols{display:grid;grid-template-columns:2fr 1fr;gap:32px;padding:10px 0 46px;}
.latest-row{position:relative;display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center;}
.latest-row img{width:120px;height:88px;object-fit:cover;border-radius:8px;flex-shrink:0;}
.latest-row h3{font-size:16px;line-height:1.3;font-weight:700;margin-bottom:5px;}
.latest-row p.dek{font-size:12.5px;color:var(--text-soft);margin:0;}
.latest-row .pill{position:relative;z-index:2;}
.latest-row-link::after{content:'';position:absolute;inset:0;z-index:1;}

.trend-card{background:var(--green-deep);border-radius:12px;padding:22px;color:#fff;}
.trend-card h2{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:#B7DBC4;margin-bottom:16px;}
.trend-card p{font-size:13px;color:#B7DBC4;}
.trend-item{position:relative;display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);align-items:flex-start;}
.trend-item .n{font-family:'Barlow',sans-serif;font-weight:800;font-size:20px;color:#5FC084;width:26px;flex-shrink:0;}
.trend-item h3{font-size:14.5px;line-height:1.35;font-weight:600;color:#fff;}
.trend-item:last-child{border-bottom:none;}
.trend-item-link::after{content:'';position:absolute;inset:0;z-index:1;}

/* Footer */
footer{background:var(--panel);border-top:1px solid var(--line);color:var(--text-soft);padding:40px 0 22px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;padding-bottom:26px;border-bottom:1px solid var(--line);}
.foot-logo{display:inline-flex;background:#fff;padding:8px 14px;border-radius:10px;margin-bottom:14px;}
.foot-logo img{display:block;height:28px;width:auto;}
.foot-grid p{font-size:13px;line-height:1.6;}
.foot-col h4{font-family:'Barlow',sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--text);margin:0 0 12px;}
.foot-col a{display:block;font-size:13.5px;margin-bottom:8px;}
.foot-bottom{display:flex;justify-content:space-between;padding-top:18px;font-size:12px;color:#5E6858;flex-wrap:wrap;gap:8px;}

/* Single post */
.single-wrap{max-width:760px;margin:0 auto;padding:40px 28px 70px;}
.single-wrap h1{font-size:34px;line-height:1.15;margin:14px 0 12px;}
.single-wrap .meta-mono{display:block;margin-bottom:22px;}
.single-wrap .content{font-size:16px;line-height:1.75;color:var(--text);}
.single-wrap .content p{margin:0 0 20px;}

/* Cabecera de la entrada superpuesta sobre la imagen destacada: categoría,
   título, autor y fecha van encima de la foto con un scrim en degradado que
   deja ver la imagen a ~70% (máximo 30% de opacidad oscura) para que los
   datos no se pierdan sin tapar la foto. */
.single-featured{position:relative;border-radius:12px;overflow:hidden;margin-bottom:26px;border:1px solid var(--line);}
.single-featured-img{width:100%;height:clamp(280px, 46vw, 460px);object-fit:cover;}
.single-featured-scrim{position:absolute;inset:0;background:linear-gradient(0deg, rgba(6,8,5,.55) 0%, rgba(6,8,5,.22) 55%, rgba(6,8,5,0) 100%);}
.single-featured-content{position:absolute;left:0;right:0;bottom:0;padding:26px 24px 22px;}
.single-featured-content .pill{margin-bottom:10px;}
.single-featured-content h1{margin:0 0 10px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.45);}
.single-featured-content .meta-mono{display:block;margin-bottom:0;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.45);}

/* Barra "Compartir": botones a redes sociales + correo. */
.share-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 32px;padding-bottom:26px;border-bottom:1px solid var(--line);}
.share-bar .share-label{margin:0 2px 0 0;}
.share-bar--top{margin:32px 0 0;padding:26px 0 0;border-bottom:0;border-top:1px solid var(--line);}
.share-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:30px;border:1px solid var(--line);font-family:'Inter',sans-serif;font-weight:700;font-size:12.5px;color:var(--text-soft);transition:background .15s ease,border-color .15s ease,color .15s ease;}
.share-btn svg{width:15px;height:15px;flex-shrink:0;}
.share-btn:hover{background:var(--green);border-color:var(--green);color:#fff;}

/* Comentarios de la entrada: botón para desplegar el formulario, el
   formulario en sí y el listado de comentarios ya publicados. */
.comments-section{max-width:760px;margin:0 auto;padding:0 28px 70px;}
.comments-section .section-head{margin-bottom:16px;}
.comments-section .section-head h2{font-size:16px;}
.comments-toggle{display:inline-flex;align-items:center;padding:10px 20px;border-radius:30px;border:1px solid var(--green);background:transparent;font-family:'Barlow',sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--green);cursor:pointer;transition:background .15s ease,color .15s ease;}
.comments-toggle:hover{background:var(--green);color:#fff;}
.comments-form-wrap{display:none;margin-top:18px;}
.comments-form-wrap.is-open{display:block;}
.comments-form p{margin:0 0 14px;}
.comments-form label{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-soft);margin-bottom:6px;}
.comments-form input[type="text"],
.comments-form input[type="email"],
.comments-form input[type="url"],
.comments-form textarea{width:100%;padding:11px 14px;border-radius:8px;border:1px solid var(--line);background:var(--panel);font-family:'Inter',sans-serif;font-size:14px;color:var(--text);resize:vertical;}
.comments-form input[type="text"]:focus,
.comments-form input[type="email"]:focus,
.comments-form input[type="url"]:focus,
.comments-form textarea:focus{outline:none;border-color:var(--green);}
.comments-submit{display:inline-flex;align-items:center;padding:11px 24px;border:0;border-radius:30px;background:var(--green);color:#fff;font-family:'Barlow',sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:background .15s ease;}
.comments-submit:hover{background:var(--green-deep);}
.comments-empty{margin-top:18px;}
.comments-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:22px;}
.comment-item{display:flex;gap:14px;padding-top:22px;border-top:1px solid var(--line);}
.comment-item:first-child{padding-top:0;border-top:0;}
.comment-avatar{border-radius:50%;flex-shrink:0;}
.comment-meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.comment-author{font-family:'Barlow',sans-serif;font-weight:800;font-size:14px;color:var(--text);}
.comment-pending{margin:0 0 8px;}
.comment-text{font-size:14.5px;line-height:1.6;color:var(--text);}
.comment-text p{margin:0 0 10px;}
.comment-text p:last-child{margin-bottom:0;}

/* Archivo genérico (archive.php): categorías, etiquetas y autores. */
.archive-head{padding:44px 28px 30px;border-bottom:1px solid var(--line);margin-bottom:8px;}
.archive-avatar{border-radius:50%;margin-bottom:14px;}
.archive-kind{display:block;color:var(--green);margin-bottom:8px;}
.archive-head h1{font-size:32px;line-height:1.15;margin-bottom:10px;}
.archive-desc{font-size:15px;line-height:1.6;color:var(--text-soft);max-width:70ch;margin-bottom:14px;}
.archive-desc p{margin:0 0 10px;}
.archive-desc p:last-child{margin-bottom:0;}
.archive-count{display:block;}

/* Paginación (the_posts_pagination): números tipo pill. */
.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:34px;}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:30px;border:1px solid var(--line);font-family:'Barlow',sans-serif;font-weight:700;font-size:13px;color:var(--text-soft);transition:background .15s ease,border-color .15s ease,color .15s ease;}
.pagination .page-numbers:hover{background:var(--green);border-color:var(--green);color:#fff;}
.pagination .page-numbers.current{background:var(--green);border-color:var(--green);color:#fff;}
.pagination .page-numbers.dots{border-color:transparent;}
.pagination .page-numbers.dots:hover{background:none;color:var(--text-soft);}

@media (max-width:900px){
  /* Cintillo "última hora": en móvil no cabe categoría + título + extracto
     sin amontonarse — se deja solo el badge y el extracto. */
  .ticker-static{display:none;}

  .hero-grid,.grid-4{grid-template-columns:1fr;}
  .body-cols{grid-template-columns:1fr;}
  .ad-slot{position:static;max-width:260px;margin:0 auto;}
  .foot-grid{grid-template-columns:1fr;}

  .nota-dia-card{height:clamp(380px, 72vh, 480px);border-radius:12px;}
  .nota-dia-content{padding:28px 24px;max-width:none;}
  .nota-dia-title{font-size:27px;margin-bottom:18px;}
  .nota-dia-ribbon{top:18px;font-size:11px;padding:8px 16px 8px 14px;}
  /* El extracto amontona la tarjeta en pantallas chicas: en móvil solo se
     muestra título + categoría + CTA. */
  .nota-dia-dek{display:none;}

  /* La cuadrícula 80vh/750px del hero de últimas notas no cabe apilada en
     móvil: pasa a una columna con alturas fijas más manejables. */
  .hero-latest{display:flex;flex-direction:column;height:auto;gap:3px;}
  .hl-a{height:320px;}
  .hl-b{height:240px;}
  .hl-c,.hl-d{height:200px;}
  .hl-a .hl-title{font-size:26px;}
  .hl-b .hl-title{font-size:19px;}

  .single-featured-img{height:clamp(220px, 62vw, 340px);}
  .single-featured-content{padding:18px 18px 16px;}
  .single-featured-content h1{font-size:24px;}

  .share-bar{gap:8px;}
  .share-btn{padding:7px 12px;font-size:12px;}

  /* Header: el logo + botón hamburguesa quedan en la barra; el nav y las
     redes sociales se pliegan en un panel debajo que se abre con el botón.
     (header.site .wrap ya es flex-wrap:wrap por defecto — necesario para
     que .nav-panel, con flex-basis:100%, baje a su propia línea al abrir). */
  .nav-toggle{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;margin-left:auto;flex-shrink:0;
    border:1px solid var(--line);border-radius:8px;background:var(--bg);
    padding:0;cursor:pointer;
  }
  .nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{
    content:'';display:block;width:18px;height:2px;background:var(--text);
    transition:transform .2s ease,opacity .2s ease,background .2s ease;
  }
  .nav-toggle-bars{position:relative;}
  .nav-toggle-bars::before{position:absolute;top:-6px;left:0;}
  .nav-toggle-bars::after{position:absolute;top:6px;left:0;}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent;}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg);}

  .nav-panel{
    display:none;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:4px;
    margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  }
  .nav-panel.is-open{display:flex;}
  .main-nav{flex-direction:column;gap:2px;width:100%;}
  .main-nav a{display:block;padding:10px 0;width:100%;}
  .social-nav{width:100%;margin-top:8px;padding-top:12px;border-top:1px solid var(--line);}

  /* En pantallas chicas el swipe táctil basta: se ocultan las flechas para
     no perder ancho útil de las tarjetas, y se muestra una tarjeta completa
     a la vez (en vez de dos a medias) para que el scroll horizontal sea claro. */
  .personas-arrow{display:none;}
  .personas-card{flex:0 0 100%;}
  .personas-card .imgwrap{height:280px;}
  .personas-sub{margin-left:0;}
}