/* ==========================================================================
   NOVEDADES v2 (v4.21) — el listado (novedades.php) y cada nota (novedad.php)
   --------------------------------------------------------------------------
   El sistema es el mismo del sitio ("Cédula Oficial": papel, tinta, carmín,
   oro y azul de tokens.css); lo propio de acá es la LECTURA. Una novedad
   larga se lee en serif, a ~68 caracteres por línea y con aire entre
   párrafos, como un boletín impreso — no en la sans del panel de juego,
   pensada para rótulos y números.
   ========================================================================== */

/* El botón "Compartir" nativo sale con hidden y lo destapa el JS si el
   navegador tiene Web Share; la clase .btn le ganaba al hidden. */
.fila-compartir [hidden], .nov-nota [hidden] { display: none !important; }

/* Contraste (WCAG AA, 4.5:1) del texto chico de estas páginas: fechas,
   rótulos, lectura. --tinta-3 del sistema da 3.1:1 sobre el fondo claro. Se
   ajusta solo acá para no mover el resto del sitio. */
.pagina-novedades {
  --tinta-3: #5f675f;
  --nov-oro-txt: #7d5c08;
  --nov-anuncio: #7a5408;
  --nov-foco: #7d5c08;
  --alto-cab: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pagina-novedades { --tinta-3: #8193ab; --nov-oro-txt: var(--py-oro); --nov-anuncio: var(--alerta); --nov-foco: var(--py-oro); }
}
:root[data-theme="dark"] .pagina-novedades { --tinta-3: #8193ab; --nov-oro-txt: var(--py-oro); --nov-anuncio: var(--alerta); --nov-foco: var(--py-oro); }
.pagina-novedades :is(a, button, summary, input):focus-visible { outline: 3px solid var(--nov-foco); outline-offset: 2px; }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Piezas comunes ---------- */
.nov-antetitulo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 0 0 var(--e-3); font-size: var(--t-xs); color: var(--tinta-2);
}
.nov-boletin {
  font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: var(--track-etiqueta);
  color: var(--nov-oro-txt, var(--py-oro)); font-weight: 700;
}
.nov-chip {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px;
  border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em;
  background: var(--info-suave); color: var(--info); text-decoration: none; border: 1px solid transparent;
}
.nov-chip-version { background: var(--peligro-suave); color: var(--peligro); }
.nov-chip-anuncio { background: var(--alerta-suave); color: var(--nov-anuncio, var(--alerta)); }
/* Chips chicos a la vista, pero con 44px de área para el dedo. */
a.nov-chip, .nov-ficha-temas a { position: relative; }
a.nov-chip::after, .nov-ficha-temas a::after { content: ''; position: absolute; inset: -10px -4px; }
a.nov-chip:hover { border-color: currentColor; }
.nov-version {
  font-family: var(--f-dato); font-size: var(--t-xs); font-weight: 700; color: var(--tinta);
  padding: 1px 8px; border: 1.5px solid var(--tinta-3); border-radius: var(--r-sm);
  transform: rotate(-2deg); display: inline-block;
}
.nov-bajada {
  font-family: var(--f-serif); font-size: var(--t-lg); line-height: 1.5; color: var(--tinta-2);
  max-width: 62ch; margin: 0 0 var(--e-4); text-wrap: pretty;
}

/* ---------- Barra de lectura ---------- */
.nov-progreso { position: fixed; inset: 0 0 auto; height: 3px; z-index: var(--z-flotante); pointer-events: none; }
.nov-progreso span {
  display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--py-rojo) 0 33%, var(--py-oro) 33% 66%, var(--py-azul) 66%);
}

.nov-migas { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--t-xs); color: var(--tinta-3); margin: 0 0 var(--e-4); }
.nov-migas a { color: var(--tinta-2); }
.nov-migas a:hover { color: var(--link); }
.nov-migas [aria-current] { color: var(--tinta-2); }

.nov-aviso-previa {
  display: flex; align-items: center; gap: 8px; margin: 0 0 var(--e-4); padding: var(--e-3) var(--e-4);
  border: 2px dashed var(--alerta); border-radius: var(--r-md); background: var(--alerta-suave); font-size: var(--t-sm);
}

/* ==========================================================================
   LA NOTA
   ========================================================================== */
.nov-nota { max-width: 1040px; margin: 0 auto; }
.nov-cab { max-width: 780px; margin-bottom: var(--e-5); }
.nov-titulo {
  font-family: var(--f-titulo); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(1.85rem, 1.1rem + 3.1vw, 3.15rem); line-height: 1.04;
  margin: 0 0 var(--e-3); text-wrap: balance; color: var(--tinta);
}
.nov-emoji { font-size: .82em; vertical-align: .04em; }
.nov-firma { display: flex; align-items: center; gap: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--borde); }
.nov-firma img { width: 40px; height: 40px; flex-shrink: 0; }
.nov-firma p { margin: 0; font-size: var(--t-sm); }
.nov-firma a { font-weight: 700; color: var(--tinta); }
.nov-firma a:hover { color: var(--link); }
.nov-firma-datos { color: var(--tinta-3); display: flex; flex-wrap: wrap; gap: 0 6px; }

.nov-portada { margin: 0 0 var(--e-6); }
.nov-portada img {
  display: block; width: 100%; height: auto; max-height: 620px; object-fit: cover;
  border-radius: var(--r-lg); border: 1px solid var(--borde); background: var(--superficie-2);
}
.nov-portada figcaption { margin-top: var(--e-2); font-size: var(--t-xs); color: var(--tinta-3); }

.nov-grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
.nov-ficha { display: none; }
@media (min-width: 1000px) {
  .nov-grilla { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--e-7); }
  /* Debajo de la cabecera del sitio, que también es pegajosa. */
  .nov-lateral { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--alto-cab, 64px) + var(--e-4)); align-self: start;
    max-height: calc(100vh - var(--alto-cab, 64px) - 2 * var(--e-4)); overflow: auto; display: flex; flex-direction: column; gap: var(--e-4); }
  .nov-cuerpo { grid-column: 1; grid-row: 1; }
  .nov-ficha {
    display: block; padding: var(--e-4); border: 1px solid var(--borde); border-radius: var(--r-md);
    background: var(--superficie); font-size: var(--t-sm);
  }
}
.nov-ficha-tit, .nov-indice summary {
  font-family: var(--f-titulo); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--track-etiqueta); font-size: var(--t-xs); color: var(--tinta-2);
}
.nov-ficha-tit { margin: 0 0 var(--e-2); }
.nov-ficha dl { margin: 0 0 var(--e-3); }
.nov-ficha dl div { display: flex; justify-content: space-between; gap: var(--e-2); padding: 5px 0; border-bottom: 1px dashed var(--borde); }
.nov-ficha dt { color: var(--tinta-3); }
.nov-ficha dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.nov-ficha-temas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--e-3); }
.nov-ficha-temas a { font-size: var(--t-xs); padding: 2px 9px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-full); color: var(--tinta-2); text-decoration: none; }
.nov-ficha-temas a:hover { border-color: var(--py-oro); color: var(--tinta); }
.nov-ficha .btn { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

/* ---------- Índice ---------- */
.nov-indice details { border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); }
.nov-indice summary { cursor: pointer; padding: var(--e-3) var(--e-4); min-height: var(--tap); display: flex; align-items: center; list-style: none; }
.nov-indice summary::-webkit-details-marker { display: none; }
/* La flecha propia: con display:flex el navegador deja de dibujar la suya y,
   plegado en el celular, el índice no daba ninguna señal de que se abre. */
.nov-indice summary::after { content: '▾'; margin-left: auto; font-size: 1rem; transition: transform var(--vel-rapida) var(--ease); }
.nov-indice details[open] > summary::after { transform: rotate(180deg); }
.nov-indice ol { list-style: none; margin: 0; padding: 0 var(--e-4) var(--e-3); }
.nov-indice li a {
  display: flex; align-items: center; min-height: var(--tap); padding: 4px 0 4px var(--e-3); border-left: 2px solid var(--borde);
  color: var(--tinta-2); font-size: var(--t-sm); line-height: 1.35;
}
.nov-indice li.nivel-3 a { padding-left: calc(var(--e-3) * 2); font-size: var(--t-xs); }
.nov-indice li a:hover { color: var(--tinta); border-left-color: var(--tinta-3); }
.nov-indice li a.actual { color: var(--tinta); border-left-color: var(--py-oro); font-weight: 700; }

/* ---------- El cuerpo ---------- */
.nov-cuerpo {
  font-family: var(--f-serif); font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); line-height: 1.72;
  color: var(--tinta); max-width: 70ch; min-width: 0;
}
.nov-cuerpo > * { margin: 0 0 1.05em; }
.nov-cuerpo p { text-wrap: pretty; }
.nov-cuerpo h2, .nov-cuerpo h3, .nov-cuerpo h4 {
  font-family: var(--f-titulo); color: var(--tinta); line-height: 1.15; text-wrap: balance;
  /* la cabecera del sitio es pegajosa: sin esto tapaba el subtítulo al saltar desde el índice */
  scroll-margin-top: calc(var(--alto-cab, 64px) + var(--e-4));
}
#comentarios { scroll-margin-top: calc(var(--alto-cab, 64px) + var(--e-4)); }
.nov-cuerpo h2 { font-size: var(--t-xl); margin: 1.9em 0 .6em; padding-top: .55em; border-top: 2px solid var(--tinta); position: relative; }
.nov-cuerpo h2::before { content: ''; position: absolute; top: -2px; left: 0; width: 56px; height: 2px; background: var(--py-rojo); }
.nov-cuerpo h3 { font-size: var(--t-lg); margin: 1.5em 0 .5em; }
.nov-cuerpo h4 { font-size: var(--t-md); margin: 1.3em 0 .4em; text-transform: uppercase; letter-spacing: .04em; }
.nov-cuerpo > :first-child { margin-top: 0; }
.nov-cuerpo a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nov-cuerpo a:hover { text-decoration-thickness: 2px; }
.nov-cuerpo strong { font-weight: 700; }
.nov-entrada { font-family: var(--f-titulo); letter-spacing: .025em; font-size: .94em; }
.nov-cuerpo ul, .nov-cuerpo ol { padding-left: 1.35em; }
.nov-cuerpo li { margin-bottom: .35em; }
.nov-cuerpo li::marker { color: var(--py-oro); font-weight: 700; }
.nov-cuerpo li ul { margin-top: .35em; }
.nov-cuerpo blockquote {
  margin-left: 0; padding: var(--e-3) var(--e-4); border-left: 4px solid var(--py-oro);
  background: var(--superficie-2); border-radius: 0 var(--r-md) var(--r-md) 0; font-style: italic; color: var(--tinta-2);
}
.nov-cuerpo blockquote p { margin: 0; }
.nov-cuerpo code { font-family: var(--f-dato); font-size: .86em; background: var(--superficie-2); padding: 1px 5px; border-radius: var(--r-sm); }
.nov-cuerpo hr {
  border: 0; height: 3px; width: 84px; margin: 2em auto; border-radius: 2px;
  background: linear-gradient(90deg, var(--py-rojo) 0 33%, var(--py-oro) 33% 66%, var(--py-azul) 66%);
}

/* Recuadros :::dato / :::tip / :::ojo / :::nota */
.nov-recuadro {
  font-family: var(--f-texto); font-size: var(--t-md); line-height: 1.6;
  padding: var(--e-3) var(--e-4); border-radius: var(--r-md);
  border: 1px solid var(--borde); border-left: 4px solid var(--info); background: var(--info-suave);
}
.nov-recuadro > * { margin: 0 0 .6em; }
.nov-recuadro > :last-child { margin-bottom: 0; }
.nov-recuadro-tit { font-family: var(--f-titulo); font-weight: 800; text-transform: uppercase; letter-spacing: var(--track-etiqueta); font-size: var(--t-xs); color: var(--info); }
.nov-recuadro-tip { border-left-color: var(--ok); background: var(--ok-suave); }
.nov-recuadro-tip .nov-recuadro-tit { color: var(--ok); }
.nov-recuadro-ojo { border-left-color: var(--peligro); background: var(--peligro-suave); }
.nov-recuadro-ojo .nov-recuadro-tit { color: var(--peligro); }
.nov-recuadro-nota { border-left-color: var(--py-oro); background: var(--alerta-suave); }
.nov-recuadro-nota .nov-recuadro-tit { color: var(--alerta); }

/* Tablas */
.nov-tabla { overflow-x: auto; font-family: var(--f-texto); font-size: var(--t-sm); border: 1px solid var(--borde); border-radius: var(--r-md); }
.nov-tabla table { width: 100%; border-collapse: collapse; min-width: 420px; }
.nov-tabla th { text-align: left; background: var(--superficie-2); color: var(--tinta-2); font-weight: 700; padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--borde); }
.nov-tabla td { padding: var(--e-2) var(--e-3); border-bottom: 1px dashed var(--borde); font-variant-numeric: tabular-nums; }
.nov-tabla tr:last-child td { border-bottom: 0; }

/* Imágenes */
.nov-fig { margin: 1.7em 0; }
.nov-fig img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--borde); background: var(--superficie-2); }
.nov-ampliar { display: block; cursor: zoom-in; border-radius: var(--r-md); }
.nov-ampliar:focus-visible { outline: 3px solid var(--nov-foco, var(--py-oro)); outline-offset: 3px; }
.nov-fig figcaption, .nov-video figcaption {
  margin-top: var(--e-2); padding-left: var(--e-3); border-left: 2px solid var(--py-oro);
  font-family: var(--f-texto); font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.5;
}

/* Videos: la fachada (miniatura + play) y el iframe que la reemplaza */
.nov-video { margin: 1.7em 0; }
.nov-video video { display: block; width: 100%; height: auto; border-radius: var(--r-md); background: #000; }
.nov-video-fachada, .nov-video iframe {
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--r-md); overflow: hidden; background: #0d1117; border: 0;
}
.nov-video-fachada img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--vel-media) var(--ease), filter var(--vel-media) var(--ease); }
.nov-video-sin-mini { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, #1d2a44, #05080f 70%); }
.nov-video-play {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 50px; transform: translate(-50%, -50%);
  background: var(--py-rojo); border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  transition: transform var(--vel-rapida) var(--ease), background var(--vel-rapida) var(--ease);
}
.nov-video-play::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-38%, -50%);
  border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff;
}
.nov-video-rotulo {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 10px; color: #fff;
  font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-sm);
  background: linear-gradient(transparent, rgba(0, 0, 0, .78)); text-align: left;
}
.nov-video-fachada:hover img, .nov-video-fachada:focus-visible img { transform: scale(1.03); filter: brightness(.85); }
.nov-video-fachada:hover .nov-video-play, .nov-video-fachada:focus-visible .nov-video-play { transform: translate(-50%, -50%) scale(1.08); background: #e8261b; }
.nov-video-fachada:focus-visible { outline: 3px solid var(--nov-foco, var(--py-oro)); outline-offset: 3px; }

/* ---------- Pie de la nota ---------- */
.nov-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--f-texto); font-size: var(--t-sm); margin-top: var(--e-6) !important; }
.nov-etiquetas span { color: var(--tinta-3); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-etiqueta); font-size: var(--t-xs); }
.nov-cuerpo .nov-etiquetas a {
  text-decoration: none; color: var(--tinta); padding: 4px 12px; border-radius: var(--r-full);
  border: 1px solid var(--borde-fuerte); background: var(--superficie); min-height: var(--tap); display: inline-flex; align-items: center;
}
.nov-cuerpo .nov-etiquetas a:hover { border-color: var(--py-oro); background: var(--superficie-2); }

.nov-cta, .nov-suscribir {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4);
  font-family: var(--f-texto); padding: var(--e-4) var(--e-5); margin: var(--e-6) 0 !important;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-lg);
  background: var(--superficie) var(--trama, none); box-shadow: var(--sombra-1);
}
.nov-cta p, .nov-suscribir p { margin: 0; font-size: var(--t-sm); color: var(--tinta-2); max-width: 46ch; }
.nov-cta-tit { font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-lg) !important; color: var(--tinta) !important; margin-bottom: 4px !important; }
.nov-cta .btn { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.nov-cuerpo .nov-cta a.btn { color: #fff; }

.nov-compartir, .nov-reacciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); font-family: var(--f-texto); }
.nov-compartir > p, .nov-reacciones > p { margin: 0; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--tinta-3); min-width: 110px; }
.btn-reaccion {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 6px 16px;
  border-radius: var(--r-full); border: 1px solid var(--borde); background: var(--superficie-2);
  color: var(--tinta-2); font-size: var(--t-sm); cursor: pointer; font-family: var(--f-texto);
  transition: transform var(--vel-rapida) var(--ease), background var(--vel-rapida) var(--ease);
}
.btn-reaccion:hover { border-color: var(--borde-fuerte); color: var(--tinta); }
.btn-reaccion:active { transform: scale(.96); }
.btn-reaccion:focus-visible { outline: 3px solid var(--nov-foco, var(--py-oro)); outline-offset: 2px; }
.btn-reaccion[aria-pressed="true"][data-tipo="like"] { background: var(--ok-suave); color: var(--ok); border-color: var(--ok); }
.btn-reaccion[aria-pressed="true"][data-tipo="dislike"] { background: var(--peligro-suave); color: var(--peligro); border-color: var(--peligro); }
.btn-reaccion .n { font-family: var(--f-dato); font-weight: 700; }
.ico-abajo { display: inline-flex; transform: rotate(180deg); }

/* ---------- Comentarios ---------- */
.nov-comentarios { max-width: 780px; margin: var(--e-7) 0 0; padding-top: var(--e-5); border-top: 2px solid var(--tinta); }
.nov-comentarios h2 { font-family: var(--f-titulo); font-size: var(--t-xl); margin: 0 0 var(--e-4); display: flex; align-items: center; gap: 10px; }
.nov-cuenta { font-family: var(--f-dato); font-size: var(--t-sm); background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r-full); padding: 1px 10px; }
.nov-com { display: flex; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px dashed var(--borde); }
.nov-com img { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--borde-fuerte); }
.nov-com p { margin: 0; }
.nov-com-cab { font-size: var(--t-sm); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.nov-com-cab a { font-weight: 700; color: var(--tinta); }
.nov-com-cab time { color: var(--tinta-3); font-size: var(--t-xs); }
.nov-com-txt { margin-top: 2px !important; line-height: 1.55; overflow-wrap: anywhere; }
.nov-com-borrar { background: none; border: 0; color: var(--peligro); font-size: var(--t-xs); cursor: pointer; padding: 4px 0; min-height: var(--tap); }
.nov-form-com { margin-top: var(--e-4); }
.nov-form-com form { display: flex; flex-direction: column; gap: var(--e-2); }
.nov-form-com textarea { min-height: 90px; }
.nov-form-com .fila { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.nov-form-com small { color: var(--tinta-3); }
.nov-form-com .error { color: var(--peligro); font-size: var(--t-sm); }

/* ---------- Anterior / siguiente ---------- */
.nov-vecinas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); max-width: 1040px; margin: var(--e-7) auto var(--e-5); }
.nov-vecina {
  display: flex; flex-direction: column; gap: 4px; padding: var(--e-3) var(--e-4); min-height: 76px;
  border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); color: var(--tinta); text-decoration: none;
  transition: border-color var(--vel-rapida) var(--ease), transform var(--vel-rapida) var(--ease);
}
.nov-vecina-siguiente { text-align: right; }
.nov-vecina small { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--tinta-3); font-weight: 700; }
.nov-vecina span { font-family: var(--f-titulo); font-weight: 700; line-height: 1.25; }
.nov-vecina:hover { border-color: var(--py-oro); transform: translateY(-2px); }
@media (max-width: 560px) { .nov-vecinas { grid-template-columns: 1fr; } .nov-vecina-siguiente { text-align: left; } }

.nov-relacionadas { max-width: 1040px; margin: var(--e-6) auto 0; }

/* ==========================================================================
   EL LISTADO
   ========================================================================== */
.nov-listado-cab { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-items: end; margin-bottom: var(--e-4); }
/* Una búsqueda de una sola palabra larga no puede empujar el buscador fuera de la pantalla. */
.nov-listado-tit, .nov-vacio p { overflow-wrap: anywhere; }
@media (min-width: 900px) { .nov-listado-cab { grid-template-columns: minmax(0, 1fr) 340px; } }
.nov-listado-tit {
  font-family: var(--f-titulo); font-weight: 800; font-size: clamp(2rem, 1.3rem + 3vw, 3.3rem);
  line-height: 1; margin: 0 0 var(--e-3); text-wrap: balance;
}
.nov-listado-cab .nov-bajada { margin-bottom: 0; font-size: var(--t-md); }
.nov-buscar { display: flex; gap: var(--e-2); }
.nov-buscar .campo { flex: 1; min-width: 0; margin: 0; min-height: var(--tap); }
.nov-buscar .btn { min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; }

.nov-filtros, .nov-temas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--e-3); }
.nov-filtro {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 6px 16px;
  border-radius: var(--r-full); border: 1px solid var(--borde-fuerte); background: var(--superficie);
  color: var(--tinta-2); font-weight: 700; font-size: var(--t-sm); text-decoration: none;
}
.nov-filtro:hover { color: var(--tinta); border-color: var(--tinta-3); }
.nov-filtro.activo { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.nov-rss { margin-left: auto; color: var(--nov-anuncio, var(--alerta)); border-style: dashed; }
.nov-temas { padding: var(--e-3) 0 var(--e-4); border-bottom: 1px solid var(--borde); margin-bottom: var(--e-5); font-size: var(--t-sm); }
.nov-temas > span { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--tinta-3); margin-right: 4px; }
.nov-temas a {
  color: var(--tinta-2); text-decoration: none; padding: 4px 10px; border-radius: var(--r-md);
  border: 1px dashed var(--borde-fuerte); min-height: var(--tap); display: inline-flex; align-items: center; gap: 5px;
}
.nov-temas a small { font-family: var(--f-dato); color: var(--tinta-3); }
.nov-temas a:hover { border-style: solid; color: var(--tinta); }
.nov-temas a.activo { border-style: solid; border-color: var(--py-oro); color: var(--tinta); background: var(--alerta-suave); }
.nov-temas .nov-temas-quitar { border-color: transparent; color: var(--link); }

.nov-sep { margin: var(--e-6) 0 var(--e-4); }

/* ---------- Tarjetas ---------- */
.nov-grid { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.nov-tarjeta {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra-1);
  transition: transform var(--vel-rapida) var(--ease), box-shadow var(--vel-rapida) var(--ease), border-color var(--vel-rapida) var(--ease);
}
.nov-tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--borde-fuerte); }
.nov-tarjeta:focus-within { outline: 3px solid var(--nov-foco, var(--py-oro)); outline-offset: 2px; }
.nov-tarjeta-img { aspect-ratio: 16 / 9; background: var(--superficie-2); overflow: hidden; border-bottom: 1px solid var(--borde); }
.nov-tarjeta-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--vel-lenta) var(--ease); }
.nov-tarjeta:hover .nov-tarjeta-img img { transform: scale(1.04); }
.nov-tarjeta-txt { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4); flex: 1; }
.nov-tarjeta-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: var(--t-xs); color: var(--tinta-3); }
.nov-tarjeta-tit { font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-lg); line-height: 1.18; margin: 0; text-wrap: balance; }
.nov-tarjeta-tit a { color: var(--tinta); text-decoration: none; }
.nov-tarjeta-tit a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.nov-tarjeta-tit a:focus-visible { outline: none; }
.nov-tarjeta-bajada { margin: 0; font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.5; }
.nov-tarjeta-pie { display: flex; gap: 12px; margin: auto 0 0; padding-top: var(--e-2); font-size: var(--t-xs); color: var(--tinta-3); font-family: var(--f-dato); }
.nov-tarjeta-pie span { display: inline-flex; align-items: center; gap: 4px; }

/* El sello: la "foto" de las notas sin portada */
.nov-sello {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 100%; height: 100%;
  background-color: var(--superficie-2);
  background-image:
    repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, var(--tinta) 5%, transparent) 11px 12px),
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--sello, var(--py-azul)) 16%, transparent), transparent 62%);
}
.nov-t-version .nov-sello { --sello: var(--py-rojo); }
.nov-t-anuncio .nov-sello { --sello: var(--py-oro); }
.nov-sello::before {
  content: ''; position: absolute; width: 132px; height: 132px; border-radius: 50%;
  border: 3px double color-mix(in srgb, var(--sello, var(--py-azul)) 55%, transparent); transform: rotate(-8deg);
}
.nov-sello-emoji { position: relative; font-size: 3.1rem; line-height: 1; filter: saturate(1.1); }
.nov-sello-txt {
  position: relative; font-family: var(--f-dato); font-weight: 800; font-size: var(--t-sm);
  color: var(--sello, var(--py-azul)); text-transform: uppercase; letter-spacing: .06em; transform: rotate(-4deg);
}
.nov-sello-num { position: absolute; right: 12px; bottom: 8px; font-family: var(--f-dato); font-size: var(--t-xs); color: var(--tinta-3); }

/* La destacada */
.nov-destacada { margin-bottom: var(--e-4); }
.nov-tarjeta-grande .nov-tarjeta-tit { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem); }
.nov-tarjeta-grande .nov-tarjeta-bajada { font-family: var(--f-serif); font-size: var(--t-md); }
.nov-tarjeta-grande .nov-sello-emoji { font-size: 4.6rem; }
.nov-tarjeta-grande .nov-sello::before { width: 190px; height: 190px; }
@media (min-width: 860px) {
  .nov-tarjeta-grande { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .nov-tarjeta-grande .nov-tarjeta-img { aspect-ratio: auto; min-height: 300px; border-bottom: 0; border-right: 1px solid var(--borde); }
  .nov-tarjeta-grande .nov-tarjeta-txt { padding: var(--e-6) var(--e-5); justify-content: center; }
}

/* En el celular, las tarjetas del listado van en fila (la "foto" a la
   izquierda, angosta): de a una por pantalla, el sello a lo ancho obligaba a
   scrollear media pantalla por nota. */
@media (max-width: 600px) {
  .nov-grid .nov-tarjeta { display: grid; grid-template-columns: 92px minmax(0, 1fr); }
  .nov-grid .nov-tarjeta-img { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--borde); }
  .nov-grid .nov-sello::before { width: 64px; height: 64px; border-width: 2px; }
  .nov-grid .nov-sello-emoji { font-size: 1.7rem; }
  .nov-grid .nov-sello-txt { font-size: 10px; }
  .nov-grid .nov-sello-num { display: none; }
  .nov-grid .nov-tarjeta-txt { padding: var(--e-3); gap: 6px; }
  .nov-grid .nov-tarjeta-tit { font-size: var(--t-md); }
  .nov-grid .nov-tarjeta-bajada { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

.nov-vacio { text-align: center; padding: var(--e-7) var(--e-4); border: 1px dashed var(--borde-fuerte); border-radius: var(--r-lg); }
.nov-vacio p { margin: 0 0 var(--e-4); color: var(--tinta-2); }

.nov-paginas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: var(--e-6) 0; }
.nov-paginas a, .nov-paginas span {
  min-width: var(--tap); min-height: var(--tap); padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta-2);
  text-decoration: none; font-weight: 700; font-family: var(--f-dato);
}
.nov-paginas a:hover { border-color: var(--tinta-3); color: var(--tinta); }
.nov-paginas [aria-current] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.nov-paginas .nov-pag-salto { border-color: transparent; background: none; min-width: 20px; }

/* ---------- Visor de imágenes ---------- */
/* margin:auto a mano: base.css pone margin:0 a todo, y eso le gana al
   centrado que el navegador le da al <dialog>. El botón de cerrar va fijo en
   la esquina, siempre adentro de la pantalla (antes quedaba arriba del
   diálogo, fuera de la vista, y en el celular no había cómo cerrarlo). */
.nov-visor {
  margin: auto; border: 0; padding: 0; background: transparent; max-width: min(96vw, 1600px); max-height: 94vh; overflow: visible;
}
.nov-visor::backdrop { background: rgba(4, 7, 13, .88); }
.nov-visor img { display: block; max-width: min(96vw, 1600px); max-height: calc(88vh - 56px); width: auto; height: auto; border-radius: var(--r-md); margin: 0 auto; }
.nov-visor p { color: #e7ecf3; text-align: center; margin: var(--e-3) auto 0; font-size: var(--t-sm); max-width: 70ch; }
.nov-visor form { position: fixed; top: max(10px, env(safe-area-inset-top, 0px)); right: 10px; z-index: 1; }
.nov-visor .btn-icono:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.nov-visor .btn-icono { color: #fff; background: rgba(255, 255, 255, .12); border-radius: 50%; width: var(--tap); height: var(--tap); border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 640px) {
  .nov-cta, .nov-suscribir { padding: var(--e-4); }
  .nov-cta .btn { width: 100%; justify-content: center; }
  .nov-rss { margin-left: 0; }
  .nov-compartir > p, .nov-reacciones > p { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nov-tarjeta, .nov-tarjeta-img img, .nov-vecina, .nov-video-fachada img, .nov-video-play, .btn-reaccion { transition: none; }
  .nov-tarjeta:hover, .nov-vecina:hover { transform: none; }
  .nov-progreso { display: none; }
}