/* ============================================================
   LA PORTADA (v4.20) · la tapa del diario del día de tu asunción
   ------------------------------------------------------------
   El marcado vive en templates/portada.php y el comportamiento en
   assets/portada.js. Todo acá cuelga de #vista-login.portada para
   no tocar nada del juego: la misma vista sigue siendo la del
   login cuando la sesión se vence en medio de una partida.

   El diario es PAPEL en los dos temas. De noche no se invierte:
   se atenúa, como un diario bajo una lámpara sobre el escritorio
   azul oscuro de la "sesión nocturna". La cédula del login sí
   sigue el tema, porque es la misma pieza de toda la interfaz.

   OJO con game.css: carga antes y le fuerza a TODO .btn-rojo y
   .btn-fantasma width:100% y margin-top. Donde acá se quiere un
   botón de ancho natural hay que decirlo explícitamente (ver 3).
   ============================================================ */

#vista-login.portada {
  /* ---- Tinta y papel del diario ---- */
  --np-papel: #f6f2e5;
  --np-papel-2: #ede7d4;
  --np-tinta: #1b1813;
  --np-tinta-2: #463f33;
  --np-tinta-3: #635a49;
  --np-regla: #1b1813;
  --np-regla-suave: rgba(27, 24, 19, .2);
  --np-rojo: #b1241a;
  --np-azul: #143f8d;
  --np-oro: #7f5c05;
  --np-sombra: 0 1px 0 rgba(27, 24, 19, .06), 0 10px 30px rgba(27, 24, 19, .12);
  --pt-alto-barra: 58px;

  display: block;
  min-height: 100dvh;
  padding: 0;
  overflow: visible;
  position: relative;
  background: var(--fondo);
  background-image: var(--textura-papel);
  background-size: var(--trama-escala);
  color: var(--tinta);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #vista-login.portada {
    --np-papel: #d9d2bf;
    --np-papel-2: #cec6b0;
    --np-tinta: #15120d;
    --np-tinta-2: #3b342a;
    --np-tinta-3: #51493b;
    --np-regla-suave: rgba(21, 18, 13, .24);
    --np-rojo: #a51f16;
    --np-azul: #11387d;
    --np-oro: #6d4f03;
    --np-sombra: 0 0 0 1px rgba(0, 0, 0, .4), 0 18px 50px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] #vista-login.portada {
  --np-papel: #d9d2bf;
  --np-papel-2: #cec6b0;
  --np-tinta: #15120d;
  --np-tinta-2: #3b342a;
  --np-tinta-3: #51493b;
  --np-regla-suave: rgba(21, 18, 13, .24);
  --np-rojo: #a51f16;
  --np-azul: #11387d;
  --np-oro: #6d4f03;
  --np-sombra: 0 0 0 1px rgba(0, 0, 0, .4), 0 18px 50px rgba(0, 0, 0, .55);
}

/* El rojo de los botones un punto más oscuro: el blanco sobre el primer
   tono del --foil-rojo daba 4.2:1 (3.5:1 de noche). Con este pasa 5:1. */
#vista-login.portada .btn-rojo { background: linear-gradient(160deg, #d0321f 0%, #b8231a 45%, #8f1109 100%); }

/* El atributo hidden manda en toda la portada: varias clases del sistema
   (.enlace-sutil, .btn-*) fijan display y le ganaban al estilo del navegador.
   La excepción es el botón fijo, que se esconde con una animación (sección 7). */
#vista-login [hidden]:not(.pt-cta-fija) { display: none !important; }

/* ============================================================
   1 · LA BARRA DE ARRIBA
   ============================================================ */
.pt-barra {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--pt-alto-barra);
  padding: 0 max(var(--e-4), env(safe-area-inset-right)) 0 max(var(--e-4), env(safe-area-inset-left));
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--borde);
}
.pt-barra::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--hilo);
}
.pt-marca {
  display: flex; align-items: center; gap: 9px; min-width: 0; min-height: var(--tap);
  text-decoration: none; color: var(--tinta);
  font-family: var(--f-titulo); font-weight: 800; letter-spacing: .06em; font-size: var(--t-sm);
  white-space: normal;
}
.pt-marca span{max-width:290px;line-height:1.2}
.pt-marca em { font-style: italic; color: var(--py-oro); font-weight: 600; }
/* A 320 px el nombre no entra al lado de "Entrar" y del tema: queda el escudo
   (el nombre está en el aria-label y en la volanta del titular). */
@media (max-width: 379px) { .pt-marca span { display: none; } }
.pt-nav { display: none; gap: var(--e-1); margin-left: auto; }
.pt-nav a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-family: var(--f-titulo); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-2); text-decoration: none;
  padding: 0 12px; border-radius: var(--r-sm);
}
.pt-nav a:hover { color: var(--tinta); background: var(--superficie-2); }
.pt-barra-acciones { display: flex; align-items: center; gap: var(--e-2); margin-left: auto; flex-shrink: 0; }
.pt-nav + .pt-barra-acciones { margin-left: 0; }
.pt-barra-entrar {
  min-height: var(--tap); padding: 0 14px;
  font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-sm);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--py-rojo); border: 2px solid currentColor; border-radius: var(--r-md);
}
.pt-barra-entrar:hover { background: var(--peligro-suave); }
@media (min-width: 760px) { .pt-nav { display: flex; } }

/* ============================================================
   2 · LA GRILLA · el diario a la izquierda, la cédula a la derecha
   En el celular es una sola columna en el orden del HTML: la tapa,
   la cédula, y recién después las páginas de adentro.
   ============================================================ */
.pt-grilla {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
  max-width: 1280px; margin: 0 auto;
  padding: var(--e-5) var(--e-4) var(--e-5);
  padding-left: max(var(--e-4), env(safe-area-inset-left));
  padding-right: max(var(--e-4), env(safe-area-inset-right));
}
.pt-interior { display: grid; gap: var(--e-5); min-width: 0; }
@media (min-width: 1000px) {
  .pt-grilla {
    grid-template-columns: minmax(0, 1fr) 372px;
    grid-template-areas: "tapa lado" "interior lado";
    gap: var(--e-5) var(--e-6);
  }
  .pt-tapa { grid-area: tapa; }
  .pt-lado { grid-area: lado; }
  .pt-interior { grid-area: interior; }
  .pt-cedula { position: sticky; top: calc(var(--pt-alto-barra) + var(--e-5)); }
}

/* ============================================================
   3 · LA HOJA DE DIARIO
   ============================================================ */
.pt-hoja {
  position: relative;
  background: var(--np-papel);
  /* La fibra del papel de diario: dos tramas casi invisibles */
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.35), transparent 60%);
  color: var(--np-tinta);
  border-radius: 2px;
  box-shadow: var(--np-sombra);
  padding: var(--e-5) var(--e-4);
  min-width: 0;
}
@media (min-width: 640px) { .pt-hoja { padding: var(--e-6) var(--e-6); } }
.pt-hoja a:not([class]) { color: var(--np-azul); text-underline-offset: 3px; }
/* El anillo de foco sobre el papel: el oro del sistema daba 1.5:1 sobre el
   papel nocturno y 2.9:1 sobre el diurno. En tinta pasa de 12:1. */
#vista-login .pt-hoja :focus-visible,
#vista-login .pt-hoja .pt-carta summary:focus-visible { outline: 3px solid var(--np-tinta); outline-offset: 3px; }
/* En la pizarra (hoja en negativo) el foco va en papel */
#vista-login .pt-pizarra :focus-visible { outline-color: var(--np-papel); }

/* Botones sobre el papel: de ancho natural (game.css los estira) y el
   secundario con los colores del diario, no los del tema. */
#vista-login .pt-cta-tapa > .btn-rojo,
#vista-login .pt-cta-tapa > .btn-secundario,
#vista-login .pt-rec-acciones > .btn-rojo,
#vista-login .pt-seccion-pie > .btn-fantasma { width: auto; margin-top: 0; }
#vista-login .pt-rec-cta { margin-top: 0; }
.pt-hoja .btn-secundario { background: var(--np-papel); color: var(--np-tinta); border-color: var(--np-regla); box-shadow: 0 2px 0 var(--np-regla-suave); }
.pt-hoja .btn-secundario:hover:not(:disabled) { background: var(--np-papel-2); border-color: var(--np-regla); box-shadow: 0 3px 0 var(--np-regla-suave); }

/* ---- La tapa ---- */
.pt-tapa { container-type: inline-size; overflow-x: clip; }

/* ---- Cabezal: el nombre del diario arriba y la línea de folio abajo ---- */
.pt-cabezal {
  display: grid; grid-template-columns: 1fr;
  grid-template-areas: "nombre" "izq" "der";
  gap: 4px; text-align: center;
}
.pt-cab-nombre {
  grid-area: nombre;
  font-family: var(--f-serif); font-weight: 900;
  font-size: clamp(1.75rem, 1rem + 3.6vw, 3.6rem);
  font-size: clamp(1.6rem, 7.6cqi, 3.6rem);   /* al ancho de la tapa, no de la ventana */
  line-height: 1; letter-spacing: -.01em;
  font-variant: small-caps;
  text-wrap: balance;
  padding-bottom: var(--e-2);
}
.pt-cab-dato {
  grid-area: izq;
  font-family: var(--f-titulo); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .1em; color: var(--np-tinta-2);
  text-wrap: balance;
}
.pt-cab-der { grid-area: der; }
/* El folio en una sola línea entre reglas finas, pero solo cuando la tapa
   (no la ventana) tiene lugar: entre 1000 y 1150 px la tapa es angosta. */
@container (min-width: 640px) {
  .pt-cabezal { grid-template-columns: 1fr auto; grid-template-areas: "nombre nombre" "izq der"; gap: 0; }
  .pt-cab-dato { text-align: left; padding: 6px 0; border-top: 1px solid var(--np-regla); }
  .pt-cab-der { text-align: right; }
}
.pt-regla-doble { border-top: 5px double var(--np-regla); margin: var(--e-3) 0 var(--e-4); }

/* ---- Último momento: arriba, con su pausa ---- */
.pt-ultimo {
  display: flex; align-items: stretch;
  border: 2px solid var(--np-regla);
  font-family: var(--f-titulo);
  margin-bottom: var(--e-5);
}
.pt-ultimo-rotulo {
  display: flex; align-items: center;
  background: var(--np-rojo); color: #fff;
  padding: 0 12px; flex-shrink: 0;
  font-weight: 900; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
}
.pt-ultimo-txt {
  flex: 1; display: flex; align-items: center; min-width: 0;
  min-height: 3.1em;
  padding: 6px 12px;
  font-weight: 800; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.3;
}
.pt-ultimo-txt.escribiendo::after {
  content: ''; display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -2px;
  background: currentColor; animation: pt-cursor .8s steps(1) infinite;
}
@keyframes pt-cursor { 50% { opacity: 0; } }
.pt-ultimo-pausa {
  flex-shrink: 0; width: var(--tap); min-height: var(--tap);
  border-left: 2px solid var(--np-regla);
  font-size: 12px; letter-spacing: -1px; color: var(--np-tinta);
}
.pt-ultimo-pausa[aria-pressed="true"] { background: var(--np-papel-2); }
.pt-ultimo-pausa[hidden] { display: none; }
/* En el celular el rótulo va arriba y el texto tiene todo el ancho: al costado
   del rótulo quedaban 130 px y un titular largo ocupaba cinco renglones, que al
   reescribirse hacían saltar todo lo de abajo. Con el ancho entero entra en
   tres, y esos tres quedan reservados. */
@container (max-width: 559px) {
  .pt-ultimo { flex-wrap: wrap; }
  .pt-ultimo-rotulo { flex: 1 0 calc(100% - var(--tap)); padding: 6px 12px; order: 0; }
  .pt-ultimo-pausa { order: 1; min-height: 32px; }
  .pt-ultimo-txt { order: 2; flex-basis: 100%; min-height: calc(3 * 1.3em + 12px); border-top: 2px solid var(--np-regla); }
}

/* ---- El titular (es el h1 de la página) ---- */
.pt-titular { margin: 0 0 var(--e-3); }
.pt-volanta {
  display: block;
  font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-sm);
  letter-spacing: .14em; text-transform: uppercase; color: var(--np-rojo);
  margin-bottom: var(--e-2);
}
.pt-volanta em { font-style: italic; text-transform: none; letter-spacing: .04em; }
.pt-titular-grande {
  display: block;
  font-family: var(--f-serif); font-weight: 900;
  font-size: clamp(2.15rem, 1.15rem + 4.6vw, 4.5rem);
  font-size: clamp(2.1rem, 9.4cqi, 4.6rem);
  line-height: .98; letter-spacing: -.022em;
  text-wrap: balance;
}
.pt-bajada {
  font-family: var(--f-serif);
  font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem);
  line-height: 1.55; color: var(--np-tinta-2);
  max-width: 62ch;
  margin-bottom: var(--e-4);
}
.pt-bajada::first-letter {
  float: left;
  font-weight: 900; font-size: 3.3em; line-height: .82;
  padding: .06em .08em 0 0; color: var(--np-tinta);
}
/* En el celular va la mitad de la bajada: así el botón entra en la primera pantalla */
@media (max-width: 639px) { .pt-bajada-mas { display: none; } }

/* ---- Botones de la tapa ---- */
.pt-cta-tapa { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-4); }
.pt-cta-grande { flex: 1 1 220px; min-height: 52px; font-size: var(--t-md); }
@media (min-width: 1000px) { .pt-cta-grande { flex: 0 1 auto; padding-inline: var(--e-6); } }

/* ---- Sellos de goma: cada uno con su inclinación ----
   Keyframes propios: los de components.css (sello-cae) terminan en -4° con
   fill both y dejaban a los tres iguales; además arrancaban en scale(2.4),
   que durante la caída abría scroll horizontal en el celular. */
.pt-sellos { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-5); }
.pt-sello {
  --rot: -3deg;
  display: inline-block;
  font-family: var(--f-titulo); font-weight: 900; font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: .12em;
  padding: 5px 12px;
  border: 3px double currentColor; border-radius: var(--r-sm);
  color: var(--np-rojo);
  transform: rotate(var(--rot));
  mix-blend-mode: multiply;
  animation: pt-sello-cae .5s var(--ease-sello) both;
}
.pt-sello:nth-child(2) { --rot: 2deg; animation-delay: .12s; }
.pt-sello:nth-child(3) { --rot: -1.5deg; animation-delay: .24s; }
.pt-sello-azul { color: var(--np-azul); }
.pt-sello-oro { color: var(--np-oro); }
@keyframes pt-sello-cae {
  0%   { opacity: 0; transform: rotate(calc(var(--rot) - 10deg)) scale(1.5); }
  60%  { opacity: 1; transform: rotate(var(--rot)) scale(.96); }
  100% { opacity: 1; transform: rotate(var(--rot)) scale(1); }
}

/* ---- La foto de tapa: el grabado se funde con el papel ---- */
.pt-foto { margin: 0 calc(var(--e-4) * -1); }
@media (min-width: 640px) { .pt-foto { margin: 0; } }
.pt-foto img {
  display: block; width: 100%; height: auto; max-width: 100%;
  aspect-ratio: 1312 / 816;
  mix-blend-mode: multiply;
  border-top: 1px solid var(--np-regla-suave); border-bottom: 1px solid var(--np-regla-suave);
}
.pt-foto figcaption {
  font-family: var(--f-serif); font-style: italic; font-size: var(--t-sm);
  color: var(--np-tinta-2); line-height: 1.45;
  padding: var(--e-2) var(--e-4) 0;
}
@media (min-width: 640px) { .pt-foto figcaption { padding-inline: 0; } }
.pt-foto figcaption span {
  font-style: normal; font-family: var(--f-titulo); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .1em; color: var(--np-tinta-3);
}

/* ---- En pantallas anchas la foto va al lado de la bajada y los botones ----
   Como en una tapa de verdad: el titular a todo el ancho y la foto grande al
   lado del texto, dentro de la primera pantalla. Antes quedaba debajo, a
   780 px de altura, y lo primero que se veía era solo texto. */
@media (min-width: 1200px) {
  .pt-tapa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas:
      "cab cab" "regla regla" "ult ult" "rec rec" "vuelve vuelve" "h1 h1"
      "bajada foto" "cta foto" "sellos foto" ". foto";
    column-gap: var(--e-5);
    align-content: start;
  }
  .pt-cabezal { grid-area: cab; }
  .pt-regla-doble { grid-area: regla; }
  .pt-ultimo { grid-area: ult; }
  .pt-rec-reto, .pt-rec-invita { grid-area: rec; }
  .pt-rec-vuelve { grid-area: vuelve; }
  .pt-titular { grid-area: h1; }
  .pt-bajada { grid-area: bajada; }
  .pt-cta-tapa { grid-area: cta; flex-direction: column; align-items: stretch; }
  .pt-cta-tapa .pt-cta-grande { flex: 0 0 auto; }
  .pt-sellos { grid-area: sellos; }
  .pt-foto { grid-area: foto; align-self: start; margin-top: 6px; }
}

/* ============================================================
   4 · LOS RECUADROS (reto, invitación, el que vuelve)
   ============================================================ */
.pt-recuadro {
  position: relative;
  border: 2px solid var(--np-regla);
  padding: var(--e-4);
  margin-bottom: var(--e-5);
  background: var(--np-papel-2);
  animation: pt-recuadro-entra .55s var(--ease-sello) both;
}
@keyframes pt-recuadro-entra {
  from { opacity: 0; transform: translateY(-10px) rotate(-.6deg); }
  to   { opacity: 1; transform: none; }
}
.pt-recuadro[hidden] { display: none; }
.pt-recuadro .pt-rec-volanta {
  font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-xs); line-height: 1.4;
  text-transform: uppercase; letter-spacing: .12em; color: var(--np-rojo);
  margin-bottom: 4px;
}
.pt-recuadro .pt-rec-titulo {
  font-family: var(--f-serif); font-weight: 900;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.08;
  margin-bottom: var(--e-2); text-wrap: balance; overflow-wrap: anywhere;
}
.pt-recuadro p:not(.pt-rec-volanta):not(.pt-rec-titulo) { font-family: var(--f-serif); line-height: 1.5; margin-bottom: var(--e-3); }
.pt-rec-cta { min-height: 48px; }
.pt-recuadro .pt-rec-nota { font-size: var(--t-sm); margin: var(--e-2) 0 0; }
.pt-rec-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.pt-enlace {
  font: inherit; color: var(--np-azul); text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 4px;
}
.pt-enlace:hover { color: var(--np-rojo); }

/* El duelo: cartel de "se busca". El sello va montado sobre el marco, así no
   pisa la volanta en el celular. */
.pt-rec-reto { border-width: 4px; border-style: double; text-align: center; margin-top: 10px; }
.pt-rec-reto::after {
  content: 'DUELO'; position: absolute; top: -14px; right: 12px;
  font-family: var(--f-titulo); font-weight: 900; font-size: 11px; letter-spacing: .2em;
  color: var(--np-rojo); border: 2px solid currentColor; padding: 2px 8px;
  background: var(--np-papel-2);
  transform: rotate(6deg);
}
.pt-reto-ficha {
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: var(--np-regla-suave); border: 1px solid var(--np-regla-suave);
  margin: var(--e-3) 0 var(--e-4); text-align: left;
}
.pt-reto-ficha > div { background: var(--np-papel); padding: 8px 10px; }
.pt-reto-ficha dt { font-family: var(--f-titulo); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--np-tinta-3); }
.pt-reto-ficha dd { margin: 0; font-weight: 700; }
.pt-reto-meta { grid-column: 1 / -1; text-align: center; }
.pt-reto-meta dd { font-family: var(--f-dato); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); color: var(--np-rojo); line-height: 1.1; }
@media (min-width: 520px) { .pt-reto-ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* La invitación: telegrama con el billete de quien invita */
.pt-rec-invita {
  display: grid; gap: var(--e-4);
  border-style: solid; border-width: 2px 2px 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(20,63,141,.05) 22px 23px),
    var(--np-papel-2);
}
@media (min-width: 700px) { .pt-rec-invita { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.pt-rec-billete { display: block; transform: rotate(2deg); transition: transform var(--vel-media) var(--ease); }
.pt-rec-billete:hover { transform: rotate(0) scale(1.02); }
.pt-rec-billete img { display: block; width: 100%; height: auto; max-width: 100%; box-shadow: 0 6px 18px rgba(0,0,0,.25); border-radius: 3px; }

/* El que vuelve: aviso con su retrato */
.pt-rec-vuelve { display: flex; gap: var(--e-4); align-items: flex-start; border-left-width: 6px; border-left-color: var(--np-oro); }
.pt-vuelve-av {
  width: 64px; height: 64px; flex-shrink: 0;
  border: 3px double var(--np-regla); border-radius: 50%;
  background: var(--np-papel); object-fit: cover;
}
.pt-rec-vuelve .pt-rec-cuerpo { min-width: 0; }
@media (max-width: 479px) {
  .pt-rec-vuelve { flex-direction: column; gap: var(--e-3); }
  .pt-vuelve-av { width: 52px; height: 52px; }
}

/* ============================================================
   5 · LAS SECCIONES DE ADENTRO
   ============================================================ */
.pt-seccion-rotulo {
  display: inline-block;
  font-family: var(--f-titulo); font-weight: 900; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--np-papel); background: var(--np-tinta);
  padding: 4px 10px; margin-bottom: var(--e-3);
}
.pt-seccion-titulo {
  font-family: var(--f-serif); font-weight: 900;
  font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.35rem);
  line-height: 1.05; letter-spacing: -.012em;
  padding-bottom: var(--e-3); margin-bottom: var(--e-4);
  border-bottom: 1px solid var(--np-regla);
  box-shadow: 0 3px 0 -2px var(--np-papel), 0 4px 0 -2px var(--np-regla);
  text-wrap: balance;
}
.pt-seccion-bajada { font-family: var(--f-serif); color: var(--np-tinta-2); margin-bottom: var(--e-4); line-height: 1.5; }
.pt-seccion-pie { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; margin-top: var(--e-4); }

/* ---- Indicadores: la pizarra de mercados, en negativo ----
   Es la única hoja oscura del diario: rompe la tira de hojas iguales y
   hace que los números se lean como lo que son, la cotización del día. */
.pt-pizarra {
  background: var(--np-tinta); background-image: none; color: var(--np-papel);
}
.pt-pizarra .pt-seccion-rotulo { background: var(--np-rojo); color: #fff; }
.pt-pizarra .pt-seccion-titulo { border-color: var(--np-papel); box-shadow: 0 3px 0 -2px var(--np-tinta), 0 4px 0 -2px var(--np-papel); }
.pt-indicadores {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--e-4); border-top: 3px solid currentColor;
}
@media (min-width: 560px) { .pt-indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pt-ind {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--e-3) 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.pt-ind b {
  font-family: var(--f-dato); font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pt-ind span { font-size: var(--t-sm); line-height: 1.35; opacity: .86; }
.pt-pizarra .pt-ind b { color: #f4d27a; }
.pt-ind-comunidad { margin-top: var(--e-4); border-top-width: 1px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt-pizarra .pt-ind-comunidad .pt-ind b { color: #ff8a7a; }
.pt-desafio {
  margin-top: var(--e-4); padding: var(--e-3) var(--e-4);
  border: 2px dashed color-mix(in srgb, currentColor 40%, transparent);
  display: grid; gap: 4px;
}
.pt-desafio-rotulo { font-family: var(--f-titulo); font-weight: 900; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; color: #f4d27a; }
.pt-desafio-txt { font-family: var(--f-serif); line-height: 1.5; }

/* ---- Guía para el nuevo mandatario: tres columnas con regla ---- */
.pt-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
@media (min-width: 720px) {
  .pt-pasos { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .pt-pasos li { padding: 0 var(--e-4); border-left: 1px solid var(--np-regla-suave); }
  .pt-pasos li:first-child { padding-left: 0; border-left: none; }
  .pt-pasos li:last-child { padding-right: 0; }
}
.pt-paso-n {
  display: block;
  font-family: var(--f-serif); font-weight: 900; font-size: 3.4rem; line-height: .9;
  color: var(--np-rojo);
}
.pt-pasos h3 {
  font-family: var(--f-titulo); font-size: var(--t-lg); font-weight: 900;
  text-transform: uppercase; letter-spacing: .06em; margin: var(--e-2) 0;
}
.pt-pasos p { font-family: var(--f-serif); line-height: 1.55; color: var(--np-tinta-2); }

/* ---- Lo que hay adentro: los clasificados (4+4 en escritorio, 2 en el celular) ---- */
.pt-clasificados {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: var(--e-3);
}
.pt-clas {
  border: 1px solid var(--np-regla);
  padding: var(--e-3) var(--e-3) var(--e-4);
  background: var(--np-papel);
  transition: transform var(--vel-rapida) var(--ease), box-shadow var(--vel-rapida) var(--ease);
}
.pt-clas:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 4px 5px 0 var(--np-regla-suave); }
.pt-clas-sec {
  display: block; font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em; color: var(--np-rojo);
  border-bottom: 1px solid var(--np-regla-suave); padding-bottom: 4px; margin-bottom: var(--e-2);
}
.pt-clas h3 {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--f-serif); font-weight: 900; font-size: var(--t-md); line-height: 1.15;
  margin-bottom: 6px;
}
.pt-clas h3 svg { flex-shrink: 0; color: var(--np-oro); }
.pt-clas p { font-size: var(--t-sm); line-height: 1.5; color: var(--np-tinta-2); }

/* ---- El podio de la temporada ---- */
.pt-podio { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pt-podio li {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--np-regla-suave);
}
.pt-podio-pos { font-size: 1.6rem; }
.pt-podio img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--np-regla); background: var(--np-papel-2); }
.pt-podio-quien { display: flex; flex-direction: column; min-width: 0; }
.pt-podio-quien strong { font-family: var(--f-serif); font-size: var(--t-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-podio-quien small { font-size: var(--t-xs); color: var(--np-tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-podio-pts { font-family: var(--f-dato); font-weight: 700; font-size: var(--t-lg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-podio-pts small { font-size: var(--t-xs); color: var(--np-tinta-3); }
.pt-trono-vacio {
  font-family: var(--f-serif); font-style: italic; font-size: var(--t-lg); line-height: 1.5;
  padding: var(--e-4); border: 2px dashed var(--np-regla-suave); text-align: center; color: var(--np-tinta-2);
}
.pt-seccion .btn-fantasma { color: var(--np-tinta); border-color: var(--np-regla); background: transparent; }
.pt-seccion .btn-fantasma:hover:not(:disabled) { background: var(--np-papel-2); color: var(--np-tinta); border-color: var(--np-regla); }
.pt-pozo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-sm); letter-spacing: .03em;
  color: #2a1c02; background: var(--foil-oro); text-decoration: none;
  padding: 10px 14px; border-radius: var(--r-sm); min-height: var(--tap);
}
.pt-pozo strong { font-family: var(--f-dato); }

/* ---- Avisos fúnebres: las esquelas, con la franja de luto ---- */
.pt-luto { border-top: 10px solid var(--np-tinta); }
.pt-esquelas { display: grid; grid-template-columns: 1fr; gap: var(--e-3); }
/* 10 esquelas + la del misterio ocupando dos lugares = filas completas en 2 y en 3 columnas */
@media (min-width: 480px) { .pt-esquelas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pt-esq-misterio { grid-column: span 2; } }
@media (min-width: 760px) { .pt-esquelas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pt-esquela {
  text-align: center;
  border: 4px double var(--np-regla);
  padding: var(--e-3) var(--e-3) var(--e-4);
  background: var(--np-papel);
}
.pt-esq-ico { display: block; font-size: 1.9rem; line-height: 1.2; margin-bottom: 4px; filter: grayscale(.25); }
.pt-esquela h3 {
  font-family: var(--f-serif); font-weight: 900; font-size: var(--t-md);
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.2; margin-bottom: 6px;
  text-wrap: balance;
}
.pt-esquela p { font-family: var(--f-serif); font-style: italic; font-size: var(--t-sm); line-height: 1.45; color: var(--np-tinta-2); }
.pt-esq-misterio { border-style: dashed; border-width: 2px; background: transparent; display: grid; align-content: center; }
.pt-esq-misterio .pt-esq-ico {
  font-family: var(--f-serif); font-weight: 900; font-size: 2.2rem; color: var(--np-rojo); filter: none;
}

/* ---- Boletín oficial: las últimas novedades (v4.21) ---- */
.pt-bol-sec { container-type: inline-size; }
.pt-boletin { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--np-regla); }
@container (min-width: 640px) { .pt-boletin { grid-template-columns: 1fr 1fr; column-gap: var(--e-5); } }
.pt-boletin li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--np-regla-suave); }
.pt-boletin time { font-family: var(--f-dato); font-weight: 700; font-size: var(--t-sm); color: var(--np-rojo); padding-top: 2px; border-right: 1px solid var(--np-regla-suave); }
.pt-bol-meta { font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--np-azul); margin: 0 0 2px; }
.pt-boletin h3 { font-family: var(--f-serif); font-size: var(--t-md); line-height: 1.3; margin: 0 0 4px; }
.pt-boletin h3 a { color: var(--np-tinta); text-decoration: none; }
.pt-boletin h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pt-boletin h3 a:focus-visible { outline: 3px solid var(--np-tinta); outline-offset: 2px; }
.pt-boletin li p:last-child { font-family: var(--f-serif); font-size: var(--t-sm); color: var(--np-tinta-2); line-height: 1.45; margin: 0; }

/* ---- Cartas de lectores ---- */
.pt-cartas { display: grid; gap: 0; border-top: 1px solid var(--np-regla); }
.pt-carta { border-bottom: 1px solid var(--np-regla-suave); }
.pt-carta summary {
  cursor: pointer; list-style: none;
  display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline;
  padding: var(--e-3) 32px var(--e-3) 0; position: relative;
  font-family: var(--f-serif); font-weight: 700; font-size: var(--t-md); line-height: 1.35;
  min-height: var(--tap);
}
.pt-carta summary::-webkit-details-marker { display: none; }
.pt-carta summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-dato); font-size: 1.3rem; color: var(--np-rojo);
  transition: transform var(--vel-media) var(--ease);
}
.pt-carta[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.pt-carta-sr { font-style: italic; font-weight: 400; color: var(--np-tinta-3); white-space: nowrap; }
.pt-carta p { font-family: var(--f-serif); line-height: 1.6; color: var(--np-tinta-2); padding: 0 0 var(--e-4); max-width: 68ch; }
.pt-carta-resp { font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--np-rojo); }

/* ---- Pie (afuera de <main>: es el contentinfo de la página) ---- */
.pt-pie {
  max-width: 1280px; margin: 0 auto;
  text-align: center; color: var(--tinta-2); font-size: var(--t-sm);
  padding: 0 var(--e-4) var(--e-6);
}
/* Lugar para el botón fijo del celular, que si no tapa el último renglón */
@media (max-width: 999px) { .pt-pie { padding-bottom: calc(var(--e-6) + 84px + env(safe-area-inset-bottom, 0px)); } }
.pt-pie nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--e-1); margin-bottom: var(--e-3); }
.pt-pie a, .pt-pie-bug {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--tinta-2); text-decoration: none; padding: 0 8px;
  font-family: var(--f-titulo); font-weight: 700; letter-spacing: .04em; font-size: var(--t-sm);
}
.pt-pie a:hover, .pt-pie-bug:hover { color: var(--tinta); text-decoration: underline; }
.pt-pie p { font-style: italic; }

/* ============================================================
   6 · LA CÉDULA (login / registro)
   Es la .caja-entrada de siempre (layout.css), que acá deja de
   estar centrada en la pantalla y pasa a la columna del costado.
   ============================================================ */
.pt-lado { min-width: 0; }
.pt-cedula.caja-entrada { max-width: none; animation-delay: .15s; }
@media (max-width: 999px) { .pt-cedula.caja-entrada { max-width: 520px; margin: 0 auto; scroll-margin-top: calc(var(--pt-alto-barra) + 12px); } }
@media (min-width: 1000px) {
  /* En escritorio la marca ya está en la barra y en la volanta del titular: el
     logotipo de la cédula eran 110 px que empujaban el botón fuera de vista. */
  .pt-cedula .logotipo, .pt-cedula svg.logotipo { display: none; }
  .pt-cedula.caja-entrada { padding-top: var(--e-5); max-height: calc(100dvh - var(--pt-alto-barra) - var(--e-6)); overflow-y: auto; scrollbar-width: thin; }
}
/* Laptops bajas (1366×768 deja ~625 px útiles): sin scroll interno ni fija.
   La cédula baja con la página y el botón se alcanza con el scroll normal,
   en vez de quedar escondido adentro de una caja con su propia barra. */
@media (min-width: 1000px) and (max-height: 820px) {
  .pt-cedula { position: static; }
  .pt-cedula.caja-entrada { max-height: none; overflow: visible; padding: var(--e-4); }
  .pt-ced-pie { display: none; }
  /* Menos aire entre campos: así el botón de enviar entra en la primera pantalla */
  .pt-ced-titulo { margin-bottom: var(--e-3); }
  .pt-cedula .tabs-segmento { margin-bottom: var(--e-3); }
  .pt-cedula .campo { margin-bottom: var(--e-2); }
  .pt-cedula .pt-opcionales { margin-bottom: var(--e-2); }
  .pt-cedula .campo { padding-block: 9px; }
  .pt-cedula .pt-ayuda { display: none; }
}
.pt-cedula .logotipo { max-width: 250px; margin-bottom: var(--e-2); }
@media (max-width: 999px) { .pt-cedula svg.logotipo { display: block; width: 100%; height: auto; margin-inline: auto; } }
.pt-ced-titulo {
  font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-md);
  letter-spacing: .02em; color: var(--tinta); line-height: 1.3;
  margin-bottom: var(--e-4); text-wrap: balance;
}
.pt-cedula #banner-premios { margin: 0 0 var(--e-4); }
.pt-campo-rot {
  display: block; text-align: left;
  font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--tinta-2);
  margin-bottom: 4px;
}
.pt-ayuda { display: block; text-align: left; font-size: var(--t-xs); color: var(--tinta-2); margin: calc(var(--e-2) * -1) 0 var(--e-3); }
.pt-cedula #btn-auth, .pt-cedula #form-recuperar .btn-rojo, .pt-cedula #btn-recuperar-volver { width: 100%; min-height: 50px; }
.pt-cedula #btn-auth { font-size: var(--t-md); }
/* Los grises de la cédula en --tinta-2: con --tinta-3 daban 3.6:1 (4.3:1 de noche) */
.pt-cedula .enlace-sutil, .pt-ced-pie, .pt-opcionales summary small { color: var(--tinta-2); }
.pt-cedula .campo::placeholder { color: color-mix(in srgb, var(--tinta-2) 85%, var(--superficie-2)); opacity: 1; }
.pt-ced-pie { font-size: var(--t-xs); margin-top: var(--e-2); }
/* El número de serie de layout.css choca con el pie en esta versión */
.pt-cedula.caja-entrada::after { content: none; }
#fila-terminos {
  display: flex; align-items: center; gap: 10px; min-height: var(--tap);
  margin: 2px 0 var(--e-2); text-align: left; font-size: var(--t-xs); color: var(--tinta-2);
}
#fila-terminos input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--py-rojo); }

/* Los datos opcionales del registro, plegados */
.pt-opcionales { text-align: left; margin-bottom: var(--e-3); border: 1px dashed var(--borde-fuerte); border-radius: var(--r-md); }
.pt-opcionales summary {
  cursor: pointer; list-style: none; min-height: var(--tap);
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px;
  padding: 6px 12px; font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2);
}
.pt-opcionales summary::-webkit-details-marker { display: none; }
.pt-opcionales summary::before { content: '+'; font-family: var(--f-dato); font-size: 1rem; color: var(--py-oro); }
.pt-opcionales[open] summary::before { content: '−'; }
.pt-opcionales summary small { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: var(--t-xs); }
.pt-opcionales summary:focus-visible { outline: 3px solid var(--py-oro); outline-offset: 2px; }
.pt-opc-cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; }
.pt-opc-cuerpo .campo { margin-bottom: 0; }
.pt-opc-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-opc-fila .campo { flex: 1 1 130px; min-width: 0; }

.pt-cedula.resaltada { animation: pt-resalta .9s var(--ease); }
@keyframes pt-resalta {
  0%   { box-shadow: var(--sombra-3), 0 0 0 0 color-mix(in srgb, var(--py-oro) 70%, transparent); }
  40%  { box-shadow: var(--sombra-3), 0 0 0 8px color-mix(in srgb, var(--py-oro) 35%, transparent); }
  100% { box-shadow: var(--sombra-3), 0 0 0 0 transparent; }
}
/* El temblor del login fallido le gana al resaltado y sin la demora de entrada:
   .pt-cedula.resaltada pisaba a .caja-entrada.temblor (components.css). */
.pt-cedula.caja-entrada.temblor { animation: temblor .5s var(--ease) 0s; }

/* ============================================================
   7 · EL BOTÓN FIJO DEL CELULAR
   ============================================================ */
.pt-cta-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-flotante);
  padding: var(--e-3) max(var(--e-4), env(safe-area-inset-right)) calc(var(--e-3) + env(safe-area-inset-bottom, 0px)) max(var(--e-4), env(safe-area-inset-left));
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--borde);
  visibility: visible;
  transform: translateY(0); transition: transform var(--vel-media) var(--ease), opacity var(--vel-media) var(--ease), visibility 0s;
}
/* Escondido con visibility (además de la animación): sin eso el botón
   invisible seguía en el orden del Tab y lo leía el lector de pantalla. */
.pt-cta-fija[hidden] {
  display: block; visibility: hidden; transform: translateY(110%); opacity: 0; pointer-events: none;
  transition: transform var(--vel-media) var(--ease), opacity var(--vel-media) var(--ease), visibility 0s linear var(--vel-media);
}
#vista-login .pt-cta-fija .btn-rojo { width: 100%; min-height: 52px; font-size: var(--t-md); margin-top: 0; }
@media (min-width: 1000px) { .pt-cta-fija, .pt-cta-fija[hidden] { display: none; } }

/* Kiosco: papel y cabeceras tipográficas locales, sin imágenes ni terceros. */
#kiosco-prensa { scroll-margin-top: calc(var(--pt-alto-barra) + 16px); }
.pt-kiosco-acceso { display: inline-flex; align-items: center; min-height: 44px; margin: 8px 0; color: var(--np-azul); font: bold 14px/1.5 system-ui; text-underline-offset: 4px; }
.pt-kiosco-aviso { padding: 12px; border-left: 3px solid var(--np-rojo); background: var(--np-papel-2); font: 13px/1.6 var(--font-sans, system-ui); }
.pt-kiosco-control { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 20px 0 12px; font: 14px/1.5 system-ui; }
.pt-kiosco-control select { min-height: 44px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--np-tinta-3); border-radius: 3px; background: var(--np-papel); color: var(--np-tinta); font: inherit; }
.pt-kiosco-hecho { font: 14px/1.6 system-ui; }
.pt-kiosco-estado { min-height: 1.5em; margin: 4px 0 12px; font: 12px/1.5 system-ui; color: var(--np-tinta-2); }
.pt-kiosco-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pt-periodico { --medio-color: #184d85; display: flex; flex-direction: column; min-width: 0; padding: 14px; background: var(--np-papel); border: 1px solid var(--np-regla-suave); border-top: 5px solid var(--medio-color); box-shadow: 2px 3px 0 var(--np-papel-2); color: var(--np-tinta); overflow-wrap: anywhere; }
.pt-periodico-edicion { margin: 0 0 10px; text-transform: uppercase; letter-spacing: .08em; font: 9px/1.5 system-ui; color: var(--np-tinta-3); }
.pt-periodico-marca { margin: 0; padding-bottom: 8px; border-bottom: 3px double var(--medio-color); color: var(--medio-color); font: bold 28px/1.05 Georgia, serif; letter-spacing: -1px; }
.pt-periodico-seccion { margin: 8px 0 14px; font: 10px/1.5 system-ui; text-transform: uppercase; letter-spacing: .04em; }
.pt-periodico-titular { margin: 0 0 12px; font: bold 21px/1.13 Georgia, serif; text-wrap: pretty; }
.pt-periodico-bajada { margin: 0 0 18px; font: 13px/1.6 Georgia, serif; }
.pt-periodico footer { display: grid; gap: 4px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--np-regla-suave); font: 10px/1.5 system-ui; }
.pt-periodico footer span { text-transform: uppercase; letter-spacing: .08em; color: var(--np-tinta-3); }
.pt-periodico footer a, .pt-kiosco-contexto a { color: var(--np-azul); text-underline-offset: 3px; }
.pt-periodico footer a { display: flex; align-items: center; min-height: 44px; }
.pt-periodico-abc { --medio-color: #a91b22; }
.pt-periodico-abc .pt-periodico-marca { font-family: Arial, sans-serif; font-weight: 900; }
.pt-periodico-uh { --medio-color: #16487e; }
.pt-periodico-uh .pt-periodico-marca { font-style: italic; }
.pt-periodico-ln { --medio-color: #165074; }
.pt-periodico-ln .pt-periodico-marca { text-transform: uppercase; font-size: 25px; letter-spacing: .03em; }
.pt-periodico-popular { --medio-color: #a51e29; }
.pt-periodico-popular .pt-periodico-marca, .pt-periodico-extra .pt-periodico-marca { padding: 7px; background: var(--medio-color); color: #fff; font: 900 italic 30px/1.1 Arial, sans-serif; }
.pt-periodico-cronica { --medio-color: #ac2221; }
.pt-periodico-cronica .pt-periodico-marca { font: 900 30px/1.1 Arial, sans-serif; text-transform: uppercase; }
.pt-periodico-extra { --medio-color: #a61d25; }
.pt-periodico-5dias { --medio-color: #274f7a; }
.pt-periodico-5dias .pt-periodico-marca { font: bold 34px/1.05 Arial, sans-serif; }
.pt-periodico-hoy { --medio-color: #a61c24; }
.pt-periodico-hoy .pt-periodico-marca { font: 900 34px/1.05 Arial, sans-serif; letter-spacing: -2px; }
.pt-periodico-nacional { --medio-color: #242a34; }
.pt-kiosco-contexto { margin-top: 22px; border-top: 1px solid var(--np-regla-suave); font: 13px/1.7 system-ui; }
.pt-kiosco-contexto summary { padding: 14px 0; cursor: pointer; font-weight: 700; }
@media (max-width: 1200px) { .pt-kiosco-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) {
  .pt-kiosco-grilla { grid-template-columns: minmax(0, 1fr); }
  .pt-periodico { padding: 18px; }
  .pt-periodico-marca { font-size: 34px; }
  .pt-periodico-titular { font-size: 25px; }
  .pt-kiosco-control { display: grid; }
  .pt-kiosco-control select { width: 100%; }
}

/* ============================================================
   8 · ENTRADAS AL HACER SCROLL
   Solo si portada.js corrió (pone .pt-js en la vista): sin JS, o
   si el observer no llega, todo está visible desde el principio.
   ============================================================ */
.pt-js .pt-interior > .pt-seccion.pt-por-ver { opacity: 0; transform: translateY(24px); }
.pt-js .pt-interior > .pt-seccion {
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

/* ============================================================
   9 · LO QUE FLOTA ENCIMA
   El botón de bugs se esconde en la portada (en el celular tapaba el
   botón fijo del pie): el pie tiene "Reportar un problema". Y el aviso
   de cookies, más compacto, para no tapar los botones de la tapa.
   ============================================================ */
body:has(#vista-login.portada:not(.oculto)) #btn-bug-flotante { display: none; }
@media (max-width: 999px) {
  body:has(#vista-login.portada:not(.oculto)) #aviso-cookies { padding: var(--e-2) var(--e-3); padding-bottom: max(var(--e-2), env(safe-area-inset-bottom)); gap: var(--e-2); }
  body:has(#vista-login.portada:not(.oculto)) #aviso-cookies p { font-size: var(--t-xs); }
}

@media (prefers-reduced-motion: reduce) {
  #vista-login.portada *, #vista-login.portada *::before, #vista-login.portada *::after {
    animation: none !important; transition: none !important;
  }
  .pt-js .pt-interior > .pt-seccion.pt-por-ver { opacity: 1; transform: none; }
  .pt-sello { transform: rotate(var(--rot)); }
  .pt-rec-billete, .pt-rec-reto::after { transform: none; }
}