/* PortSync V2.5 · prototipo «4 · Fusión» · pg-noticias.css — Noticias (encargo G3, doc 13 filas 3 y 4).
   Ref. 05 n.º 3: pila de tarjetas en abanico, la activa derecha, con anterior y siguiente; la distancia a la activa se
   calcula con vuelta (es un bucle, no una línea). Retrato dibujado en vez de foto y avatares con iniciales.
   Base (sin JS o con movimiento reducido): una lista legible en grilla, con sus dos grupos. El mazo solo existe con
   html.c-js:not(.c-reducido) y .no-mazo.is-pila (lo pone pg-noticias.js). */

.no-escena { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); }   /* el marco (ancho, margen) es de inicio-secciones.css */
.no-intro { display: grid; gap: 18px; align-content: start; }
.no-filtros { justify-self: start; margin-top: 6px; }

/* ---------- tarjeta (igual en lista y en mazo) ---------- */
.no-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.no-grupo + .no-grupo { margin-top: clamp(36px, 6vh, 64px); }
.no-grupo__t { margin-bottom: clamp(14px, 2vw, 22px); }
.no-carta { scroll-margin-top: 120px; }
.no-carta__in {
  position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--pg-carta); border: 1px solid var(--pg-carta-borde); border-radius: 22px;
  box-shadow: inset 0 1px 0 var(--pg-carta-filo), var(--c-sombra-chica);
}
.no-carta:target .no-carta__in { border-color: var(--accent); }

/* foto de la tarjeta (C3, 2026-11-08): foto real arriba con la fecha encima y un degradado para que se lea; el pie rotula
   qué es (render, captura o foto de referencia con su crédito). Sobre la foto el texto es siempre claro: la foto manda, no el tema. */
.no-foto {
  position: relative; flex: none; height: 180px; margin: 0; overflow: hidden; isolation: isolate;
  background: var(--pg-retrato); border-bottom: 1px solid var(--pg-carta-borde);
}
.no-foto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.no-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--negro-88) 0, color-mix(in srgb, var(--negro-88) 62%, transparent) 36%, transparent 66%),
    linear-gradient(to top, var(--negro-88) 0, transparent 34%);
}
.no-fecha { position: absolute; left: 20px; top: 12px; right: 20px; z-index: 2; margin: 0; color: var(--blanco); text-shadow: 0 1px 10px var(--negro-60); }
.no-fecha time { display: inline-flex; align-items: baseline; gap: .35em; }
.no-fecha__dia { font-family: var(--f-titulo); font-style: italic; font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: -.01em; }
.no-fecha__dia--texto { font-family: inherit; font-style: italic; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: 0; }
.no-fecha__anio { font-family: var(--f-dato); font-size: 14px; opacity: .92; }
.no-pie {
  position: absolute; left: 20px; right: 20px; bottom: 9px; z-index: 2;
  font-size: 12px; line-height: 1.3; color: var(--blanco); text-shadow: 0 1px 6px var(--negro-88);
}
/* crédito de las fotos de Commons (REV-FINAL): autor → página del archivo, licencia → su texto; mismo blanco, subrayado fino */
.no-pie a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.no-pie a:hover { text-decoration-thickness: 2px; }

.no-cuerpo { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.no-fuente { font-size: 15px; font-weight: 600; color: var(--c-tinta); line-height: 1.3; }
.no-pendiente { font-style: italic; }
.no-titulo { font-size: var(--t-h3); line-height: 1.15; color: var(--c-tinta); text-wrap: balance; }
.no-resumen { font-size: var(--t-chico); line-height: 1.6; color: var(--c-tinta-2); text-wrap: pretty; }
.no-enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: auto; padding-top: 2px; font-size: var(--t-chico); }
.no-enlaces .pg-enlace:not(.pg-enlace--flecha) { min-height: 32px; display: inline-flex; align-items: center; }

/* ======================================================================================================
   MAZO EN ABANICO (solo con JS y sin movimiento reducido)
   ====================================================================================================== */
.no-escena.is-pila {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  grid-template-areas: "intro mazo" "mandos mazo";
  align-items: center; column-gap: clamp(24px, 4vw, 72px); row-gap: 22px;
  min-height: 0; padding-block: clamp(8px, 2vh, 24px) clamp(24px, 5vh, 56px);
  overflow-x: clip; overflow-y: visible;
}
.is-pila .no-intro { grid-area: intro; align-self: end; }
.is-pila .no-mandos { grid-area: mandos; align-self: start; }
.is-pila .no-mazo { grid-area: mazo; }

.no-mazo.is-pila {
  --no-ancho: clamp(300px, 27vw, 440px);
  position: relative; height: var(--no-alto, 600px); margin-block: 8px 12px;
  touch-action: pan-y;
}
.no-mazo.is-pila .no-grupo, .no-mazo.is-pila .no-lista { display: contents; }
.no-mazo.is-pila .no-grupo + .no-grupo { margin: 0; }
.no-mazo.is-pila .no-grupo__t {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.no-mazo.is-pila .no-carta {
  position: absolute; left: 50%; top: 0; width: var(--no-ancho); margin-left: calc(var(--no-ancho) / -2);
  z-index: var(--z, 1); opacity: var(--o, 1);
  transform: translate3d(calc(var(--x, 0px) + var(--dx, 0px)), var(--y, 0px), 0) rotate(var(--r, 0deg)) scale(var(--s, 1));
  transform-origin: 50% 92%;
  transition: transform .7s var(--pg-ease), opacity .45s var(--pg-ease);
  will-change: transform;
}
.no-mazo.is-pila .no-carta[hidden] { display: none !important; }
.no-mazo.is-pila .no-carta.is-arrastre { transition: none; }
.no-mazo.is-pila .no-carta__in { height: var(--no-alto, 600px); box-shadow: inset 0 1px 0 var(--pg-carta-filo), var(--pg-carta-sombra); }
.no-mazo.is-pila .no-foto { height: 190px; }
/* las de atrás se oscurecen con la distancia (velo, más barato que un filtro): desde la primera, para que su texto no compita */
.no-mazo.is-pila .no-carta__in::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: var(--c-fondo); opacity: calc(min(var(--ad, 0), 1) * .42 + var(--ad, 0) * .12); transition: opacity .45s var(--pg-ease);
}
.no-mazo.is-pila .no-carta:not(.is-activa) { cursor: pointer; }
.no-mazo.is-pila .no-carta:not(.is-activa) .no-carta__in { pointer-events: none; }
.no-mazo.is-pila .no-carta.is-lejos { pointer-events: none; }
.no-mazo.is-pila .no-carta.is-activa .no-carta__in { border-color: var(--c-linea-fuerte); }

.no-mandos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.no-contador { display: inline-flex; align-items: baseline; gap: 6px; min-width: 5.2em; justify-content: center; color: var(--c-tinta-2); font-size: 15px; }
.no-contador__i { color: var(--c-tinta); font-size: 20px; }
.no-ayuda { flex-basis: 100%; margin-top: 2px; }
.no-mazo:focus-visible { outline: 2px solid var(--focus); outline-offset: 10px; border-radius: 26px; }

/* la nota del sector, que en el mazo sube junto a los mandos */
.is-pila .no-nota { flex-basis: 100%; }

/* ---------- anchos ---------- */
@media (max-width: 1099px) {
  .no-mazo.is-pila { --no-ancho: clamp(290px, 40vw, 420px); }
}
@media (max-width: 899px) {
  .no-escena.is-pila {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "mazo" "mandos";
    min-height: 0; row-gap: 18px;
  }
  .is-pila .no-intro { align-self: start; }
  .no-mazo.is-pila { --no-ancho: min(100% - 40px, 400px); margin-block: 18px 6px; }
  .is-pila .no-mandos { justify-content: center; }
  .is-pila .no-ayuda { text-align: center; }
}
@media (max-width: 560px) {
  .no-filtros { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .no-filtros::-webkit-scrollbar { display: none; }
  .no-filtros button { padding: 0 13px; }
  .no-mazo.is-pila { --no-ancho: min(100% - 34px, 360px); }
  .no-mazo.is-pila .no-foto { height: 132px; }
  .no-fecha { top: 9px; left: 16px; }
  .no-fecha__dia { font-size: 32px; }
  .no-fecha__dia--texto { font-size: 19px; }
  .no-pie { left: 16px; right: 16px; }
  .no-cuerpo { padding: 18px 18px 20px; }
}
@media (forced-colors: active) {
  .no-foto::after { display: none; }
  .no-fecha, .no-pie { color: CanvasText; background: Canvas; padding: 1px 6px; width: max-content; max-width: calc(100% - 32px); }
}