/* ══════════════════════════════════════════════════════════════════════════
   Sannu · /articulos/ — el archivo como regla del tiempo
   ──────────────────────────────────────────────────────────────────────────
   El gran momento de la página es la cabecera: la regla del tiempo de la
   portada (viaje.css), pero cada artículo cuelga de su fecha como un punto de
   la trama del mapa. Debajo, filtros por tema, el más reciente en grande y
   el resto en lista. Lo monta pagina-articulos.js a partir del bloque de
   consulta; sin script, la lista de WordPress se queda como estaba.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── La regla ─────────────────────────────────────────────────────────── */

.arch-regla { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.arch-cuenta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0 !important; }
.arch-numero {
  font-family: var(--h-display);
  font-size: clamp(3.6rem, 6vw, 6rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--h-texto);
}
.arch-resto { font-family: var(--h-display); font-weight: 700; font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.35rem); letter-spacing: -0.02em; line-height: 1.3; color: var(--h-suave); max-width: 28ch; text-wrap: balance; }

/* La línea: el trazo verde llega hasta hoy; los puntos se apilan encima de
   su día, como la trama del mapa. */
.arch-linea { position: relative; height: 150px; margin-top: 1.4rem; }
.arch-trazo { position: absolute; left: 0; right: 0; bottom: 34px; height: 2px; background: var(--h-linea-2); }
.arch-trazo::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: var(--hasta, 100%);
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--h-verde));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 900ms var(--h-sale);
}
.arch-regla.viva .arch-trazo::before { transform: scaleX(1); }

.arch-dia, .arch-hoy {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--h-tenue);
}
.arch-dia::before { content: ""; position: absolute; left: 50%; top: -14px; width: 1px; height: 8px; background: var(--h-linea-2); }
.arch-hoy { bottom: 28px; padding: 0.15rem 0.5rem; transform: translate(-50%, -14px); border-radius: 6px; background: var(--h-texto); color: var(--h-fondo); font-size: 0.72rem; font-weight: 800; }
.arch-hoy::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px; background: var(--h-texto); }

/* Cada punto es un artículo. El área que responde al ratón es mayor que el
   punto (22 px) para que apuntar no sea un ejercicio de precisión. */
.arch-punto {
  --paso-y: 18px;
  position: absolute;
  bottom: calc(46px + var(--fila) * var(--paso-y));
  width: 22px;
  height: 18px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  text-decoration: none !important;
  opacity: 0;
  transition: opacity 260ms var(--h-sale);
  transition-delay: calc(var(--orden) * 30ms + 300ms);
}
.arch-punto::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--h-verde);
  transition: transform 160ms var(--h-sale), background-color 200ms ease, opacity 200ms ease;
}
.arch-regla.viva .arch-punto { opacity: 1; }
.arch-punto.apagado::before { background: var(--h-linea-2); }
.arch-punto.en-foco::before, .arch-punto:hover::before { transform: scale(1.35); background: var(--h-vivo); }
html[data-tema="claro"] .arch-punto.en-foco::before, html[data-tema="claro"] .arch-punto:hover::before { background: #087A35; }

/* El rótulo con el titular aparece solo al apuntar (escritorio). */
.arch-rotulo {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  width: max-content;
  max-width: 30ch;
  padding: 0.4rem 0.7rem;
  border-radius: 10px;
  background: var(--h-texto);
  color: var(--h-fondo);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 150ms ease, transform 150ms var(--h-sale);
  z-index: 2;
}
.arch-punto:hover .arch-rotulo { opacity: 1; transform: translate(-50%, 0); }

/* ── Filtros ──────────────────────────────────────────────────────────── */

.arch-filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: clamp(2rem, 4vw, 2.8rem) 0 0 !important; }
.arch-filtro {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--h-linea-2);
  background: none;
  color: var(--h-suave);
  font: 700 0.92rem var(--h-letra);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--h-sale);
}
.arch-n { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--h-tenue); transition: color 200ms ease; }
.arch-filtro:hover { color: var(--h-texto); border-color: var(--h-tenue); }
.arch-filtro:active { transform: scale(0.97); }
.arch-filtro[aria-pressed="true"] { background: var(--h-texto); color: var(--h-fondo); border-color: var(--h-texto); }
.arch-filtro[aria-pressed="true"] .arch-n { color: var(--h-fondo); opacity: 0.7; }
.arch-aviso { margin: 0.8rem 0 0 !important; min-height: 1.5em; font-size: 0.9rem; color: var(--h-tenue); }
.arch-aviso:empty { margin: 0 !important; min-height: 0; }

/* ── La lista ─────────────────────────────────────────────────────────── */

.arch-js .wp-block-post-template { margin-top: 1rem !important; }
.arch-js .wp-block-post-template > li[hidden] { display: none !important; }
.arch-js .wp-block-post-template > li > .wp-block-group { position: relative; }
.arch-temas { margin: 0.6rem 0 0 !important; font-size: 0.8rem; font-weight: 700; color: var(--h-tenue) !important; }
.arch-leer { display: none; }
.wp-block-post-template > li.en-foco .wp-block-post-title a { color: var(--h-verde) !important; }
.wp-block-post-title a { transition: color 160ms ease; }

/* El más reciente (del tema elegido), en grande: el titular manda y el
   enlace se ve como acción. Un panel, no una tarjeta más de la lista. */
.wp-block-post-template > li.arch-destacado > .wp-block-group {
  padding: clamp(1.5rem, 3vw, 2.4rem) !important;
  margin-bottom: 1rem;
  border: 1px solid var(--h-linea) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 1.5px 1.5px, var(--h-linea-2) 1.5px, transparent 2px) 0 0 / 14px 14px,
    var(--h-superficie);
  background-position: right top;
  background-repeat: repeat, no-repeat;
}
/* La trama solo asoma por la derecha: un fundido de la superficie la tapa
   detrás del texto. */
.wp-block-post-template > li.arch-destacado > .wp-block-group::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, var(--h-superficie) 55%, color-mix(in srgb, var(--h-superficie) 0%, transparent) 100%);
  pointer-events: none;
}
.wp-block-post-template > li.arch-destacado > .wp-block-group > * { position: relative; }
.arch-destacado .wp-block-post-title { font-size: clamp(2rem, 2.2vw + 1.2rem, 3.1rem) !important; line-height: 1.05 !important; letter-spacing: -0.035em; margin-top: 0.6rem !important; text-wrap: balance; }
.arch-destacado .wp-block-post-excerpt { font-size: 1.1rem; line-height: 1.6; max-width: 56ch; margin-left: 0 !important; }
.arch-destacado .arch-leer {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-top: 0.4rem;
  color: var(--h-verde) !important;
  font-weight: 800;
  text-decoration: none !important;
}
.arch-destacado .arch-leer::after { content: "→"; transition: transform 160ms var(--h-sale); }
.arch-destacado .arch-leer:hover::after { transform: translateX(3px); }
html[data-tema="claro"] .arch-destacado .arch-leer { color: #087A35 !important; }

/* Entrada escalonada: corta, de salida fuerte, desde ya casi en su sitio. */
.arch-espera > li:nth-child(-n+5) { opacity: 0; }
.arch-entra { animation: arch-entra 300ms var(--h-sale) both; animation-delay: var(--paso, 0ms); }
@keyframes arch-entra { from { opacity: 0; transform: translateY(10px); } }

/* ── Móvil ────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .arch-linea { height: 130px; }
  .arch-dia.menor { display: none; }
  .arch-punto { --paso-y: 16px; }
  .arch-punto::before { width: 10px; height: 10px; }
  .arch-rotulo { display: none; }
  .wp-block-post-template > li.arch-destacado > .wp-block-group { margin-inline: -0.5rem; }
}
@media (hover: none) { .arch-punto { pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  .arch-trazo::before { transition: none; transform: scaleX(1); }
  .arch-punto { transition: opacity 150ms ease; transition-delay: 0ms; }
  .arch-entra { animation: arch-fundido 180ms ease both; animation-delay: 0ms; }
  @keyframes arch-fundido { from { opacity: 0; } }
}