/* CSS propio de noticias.html y de los cuatro artículos noticias-*.html (sitio «origen»). Lo edita solo
   quien porta esas páginas: docs/sitio-2026/09-origen.md, «Receta para portar una página».
   Portado de prototipo/css/noticias.css. Diferencia con el
   prototipo (09-origen, decisión 3): las portadas son los afiches originales de producción
   (src/assets/img/noticias/), que llevan texto y nunca se recortan; se muestran enteros sobre un
   paspartú del color de su borde (--pieza-fondo, una clase .afiche--* por afiche).
   Movimiento: solo var(--ease); solo transform, opacity y clip-path; todo estado oculto cuelga de
   .movimiento-listo, así que con movimiento reducido o sin JS todo queda en su estado final.

   1. Listado: cabecera, nota destacada y la línea de notas (las fechas son sus estaciones)
   2. Afiches: paspartú por afiche, en el listado y en la portada del artículo
   3. Artículo: meta, prosa, ficha lateral (mapa de tira vertical), cierre y más noticias */

/* ================= 1 · Listado ================= */
.noticias { padding-block: clamp(40px, 5vw, 80px) var(--esp-seccion); }
.noticias__cabeza { max-width: 60rem; }
.noticias__titulo {
  font: 700 clamp(2.4rem, 1.4rem + 3.2vw, 4.6rem)/1.02 var(--f-display); font-stretch: 104%;
  letter-spacing: -0.028em; max-width: 16ch; text-wrap: balance;
}
.noticias__bajada { margin-top: 22px; max-width: 40rem; font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem); line-height: 1.6; color: var(--tinta-2); }

/* Una nota: toda la tarjeta lleva al artículo (el único enlace es el titular, estirado) */
.nota { position: relative; display: grid; align-content: start; min-width: 0; }
.nota__titulo a { color: inherit; text-decoration: none; }
.nota__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 6px; }
.nota__titulo a:focus-visible { outline: none; }
.nota:has(.nota__titulo a:focus-visible) { outline: 3px solid var(--foco); outline-offset: 8px; border-radius: 8px; }
.nota:hover .nota__titulo a, .nota:has(.nota__titulo a:focus-visible) .nota__titulo a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; text-decoration-color: currentColor; }

.nota__foto { position: relative; margin: 0; overflow: hidden; border-radius: 4px; background: var(--superficie-2); }
.nota__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--pos, 50% 50%); }
.nota__texto { display: grid; align-content: start; gap: 12px; min-width: 0; padding-top: 18px; }
.nota__titulo { font: 650 clamp(1.18rem, 1.04rem + 0.45vw, 1.42rem)/1.28 var(--f-display); font-stretch: 102%; letter-spacing: -0.008em; color: var(--tinta); text-wrap: balance; }
.nota__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font: 600 0.84rem/1.4 var(--f-texto); color: var(--tinta-3); }
.nota__meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 14px; border-radius: 50%; background: var(--borde-fuerte); vertical-align: middle; transform: translateY(-1px); }
.nota__bajada { font-size: 1rem; line-height: 1.6; color: var(--tinta-2); max-width: 60ch; }
.nota__leer { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font: 650 0.92rem/1.2 var(--f-display); font-stretch: 104%; color: var(--tinta); }
.nota__leer .icono { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.nota:hover .nota__leer .icono, .nota:focus-within .nota__leer .icono { transform: translateX(4px); }

/* La destacada: afiche a 7 de 12 y el texto a 4 (5 en portátiles), a la misma altura */
.nota--destacada { margin-top: clamp(36px, 4.4vw, 64px); }
.nota--destacada .nota__titulo { font-size: clamp(1.55rem, 1.1rem + 1.4vw, 2.5rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.018em; max-width: 26ch; }
.nota--destacada .nota__bajada { font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem); }
.nota--destacada .nota__texto { gap: 16px; padding-top: 22px; }
@media (min-width: 1000px) {
  .nota--destacada { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center; }
  .nota--destacada .nota__foto { grid-column: 1 / span 7; }
  .nota--destacada .nota__texto { grid-column: 9 / span 4; padding-top: 0; }
}
@media (min-width: 1000px) and (max-width: 1365px) {
  .nota--destacada .nota__texto { grid-column: 8 / span 5; }
}

/* La línea de notas: una vía de 8 px con una estación por nota; el nombre de la estación es la fecha.
   Vertical bajo 1000 px (la vía corre a la izquierda); horizontal desde 1000 px. */
.notas-linea { position: relative; margin-top: clamp(56px, 6.4vw, 104px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--borde); --est: 26px; --via: 8px; }
.notas-linea__via { position: absolute; z-index: 0; border-radius: calc(var(--via) / 2); background: var(--tinta); }
.notas-linea__lista { position: relative; z-index: 1; display: grid; gap: clamp(44px, 6vw, 64px); }
.nota__parada { position: relative; font: 650 0.78rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); }
.nota__parada::before {
  content: ""; position: absolute; width: var(--est); height: var(--est); border-radius: 50%;
  background: var(--estacion-relleno); box-shadow: inset 0 0 0 4px var(--tinta);
  transition: background-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.nota:hover .nota__parada::before, .nota:focus-within .nota__parada::before { background: var(--tinta); transform: scale(1.1); }

@media (max-width: 999px) {
  .notas-linea { padding-left: 46px; }
  .notas-linea__via { left: calc(var(--est) / 2 - var(--via) / 2); top: calc(clamp(28px, 3vw, 40px) + 13px); bottom: 0; width: var(--via); }
  .nota__parada { min-height: var(--est); display: flex; align-items: center; margin-bottom: 14px; }
  .nota__parada::before { left: -46px; top: 0; }
  .movimiento-listo .notas-linea__via[data-revela] { opacity: 1; transform: scaleY(0); transform-origin: top; transition: transform 1.2s var(--ease); }
}
/* Tableta: la nota en fila (afiche a 2 de 5, texto a 3) */
@media (min-width: 700px) and (max-width: 999px) {
  .notas-linea__lista .nota { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 28px; }
  .notas-linea__lista .nota__parada { grid-column: 1 / -1; }
  .notas-linea__lista .nota__texto { padding-top: 0; }
}
@media (min-width: 1000px) {
  .notas-linea__via { left: 0; right: 0; top: calc(clamp(28px, 3vw, 40px) + var(--est) / 2 - var(--via) / 2); height: var(--via); }
  .notas-linea__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 3vw, 56px); }
  .nota__parada { padding-top: calc(var(--est) + 14px); margin-bottom: 18px; }
  .nota__parada::before { left: 0; top: 0; }
  .movimiento-listo .notas-linea__via[data-revela] { opacity: 1; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
}
.movimiento-listo .notas-linea__via[data-revela].is-visible { transform: none; }

/* ================= 2 · Afiches ================= */
/* El paspartú de cada afiche repite el color de su borde (medido en el archivo), así el afiche entero
   se lee como una pieza montada y no como una foto con franjas. */
.afiche--efecto { --pieza-fondo: #fefefe; }
.afiche--prochile { --pieza-fondo: linear-gradient(90deg, #01132e, #0b1c31); }
.afiche--marca-chile { --pieza-fondo: #020e22; }
.afiche--5000 { --pieza-fondo: linear-gradient(90deg, #051946, #035f6d); }
/* El de «El Efecto» es claro: un filete lo separa del papel en los dos temas */
.nota__foto.afiche--efecto, .articulo__portada.afiche--efecto img { outline: 1px solid var(--borde); outline-offset: -1px; }

/* En el listado: en celular cada afiche a su proporción natural (sin paspartú); desde 700 px todos en
   el mismo marco 4:3, enteros (contain) */
.nota__foto--afiche { background: var(--pieza-fondo, var(--superficie-2)); }
.nota__foto--afiche img { object-fit: contain; }
@media (max-width: 699px) {
  .nota__foto--afiche img { aspect-ratio: auto; }
}
@media (min-width: 700px) {
  .nota__foto--afiche img { aspect-ratio: 4 / 3; }
}

/* En la portada del artículo (plantilla de paginas.css §8: 16:9 con tope de alto y --pieza en contain):
   el afiche cuadrado no se encoge a la altura de un 16:9 (en celular quedaba de 200 px): va a todo el
   ancho hasta el tope de alto, centrado sobre su paspartú. */
.articulo__portada--cuadrada { display: grid; justify-items: center; border-radius: 4px; background: var(--pieza-fondo, #020e23); }
.articulo__portada--cuadrada img { width: min(100%, 720px, 76svh); aspect-ratio: 1; max-height: none; }

/* ================= 3 · Artículo ================= */
/* El titular a 30 ch, la portada con tope de alto, --pos y --pieza, el lado a la derecha desde 1100 px
   y la meta en columna en celular son de la plantilla de artículo (paginas.css §8 y §13). */
.articulo__original { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-2); }
.articulo__original .icono { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.articulo__original:hover .icono { transform: translate(2px, -2px); }

.articulo--noticia .prosa a { color: var(--tinta); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.articulo--noticia .prosa a:hover { text-decoration-color: currentColor; }
/* El remate de cada nota (su última frase), en la voz display */
.articulo--noticia .prosa .nota-remate { font: 650 clamp(1.14rem, 1.06rem + 0.3vw, 1.3rem)/1.45 var(--f-display); font-stretch: 102%; color: var(--tinta); }
.nota-etiqueta { display: inline-block; margin-left: 4px; font: 600 0.92rem/1.3 var(--f-texto); color: var(--tinta-2); }
.nota-actualizacion { padding: 16px 18px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borde); font-size: 0.98rem; }
.nota-actualizacion__rotulo { font-weight: 650; color: var(--tinta); }

/* La ficha: los cuatro datos de cada nota como mapa de tira vertical (vía de 8 px, estaciones de 26 px).
   En celular va entre la portada y el cuerpo; desde 1100 px, fija a la derecha del cuerpo. */
.ficha-nota { position: relative; display: grid; gap: 22px; max-width: 30rem; padding-left: 46px; --est: 26px; --via: 8px; }
.ficha-nota::before { content: ""; position: absolute; left: calc(var(--est) / 2 - var(--via) / 2); top: 13px; bottom: 13px; width: var(--via); border-radius: 4px; background: var(--tinta); }
.ficha-nota__parada { position: relative; display: grid; gap: 2px; min-height: var(--est); }
.ficha-nota__parada::before {
  content: ""; position: absolute; left: -46px; top: 0; width: var(--est); height: var(--est); border-radius: 50%;
  background: var(--estacion-relleno); box-shadow: inset 0 0 0 4px var(--tinta);
}
.ficha-nota__parada:last-child::before { background: var(--tinta); }
.ficha-nota__valor { font: 700 clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem)/1.15 var(--f-display); font-stretch: 104%; letter-spacing: -0.01em; color: var(--tinta); }
.ficha-nota__texto { font-size: 0.95rem; line-height: 1.45; color: var(--tinta-2); }
@media (min-width: 700px) and (max-width: 1099px) {
  .ficha-nota { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; max-width: 46rem; }
  .ficha-nota::before { display: none; }
  .ficha-nota__parada:last-child::before { background: var(--estacion-relleno); }
}
/* Entra con la aparición de la casa (metro.css [data-revela]). No se recorta la lista observada: el
   IntersectionObserver respeta el clip-path del elemento y nunca la daría por visible. */

/* El cierre de cada nota: el próximo paso, como estación terminal sobre el tablero navy */
.articulo__cierre {
  position: relative; margin-top: clamp(56px, 6vw, 96px); padding: clamp(28px, 4vw, 56px); padding-left: clamp(76px, 7vw, 112px);
  border-radius: 16px; background: var(--cierre); color: #ffffff; box-shadow: var(--sombra-alta);
}
.articulo__cierre::before {
  content: ""; position: absolute; left: clamp(24px, 2.6vw, 44px); top: clamp(30px, 4vw, 58px); width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle, #f3f5fb 0 7px, var(--cierre) 7.5px 12px, #f3f5fb 12.5px);
}
.articulo__cierre h2 { max-width: 30ch; font: 700 clamp(1.5rem, 1.15rem + 1.1vw, 2.3rem)/1.15 var(--f-display); font-stretch: 104%; letter-spacing: -0.018em; color: #ffffff; }
.articulo__cierre p { margin-top: 14px; max-width: 56ch; font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem); line-height: 1.6; color: #ccd2e8; }
.articulo__cierre-acciones { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 26px; }
.articulo__cierre .boton--secundario { --b-tinta: #ffffff; --b-borde: rgba(255, 255, 255, 0.62); }
.articulo__cierre .boton--secundario:hover { --b-bg: rgba(255, 255, 255, 0.08); }
.articulo__cierre :focus-visible { outline-color: #5fd4bf; }
html[data-theme="dark"] .articulo__cierre { box-shadow: var(--sombra-alta), 0 0 0 1px var(--borde); }

.mas-noticias__cabeza { font: 700 clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem)/1.2 var(--f-display); font-stretch: 104%; letter-spacing: -0.01em; }

@media (max-width: 719px) {
  .articulo__cierre { padding: 76px 22px 26px; }
  .articulo__cierre::before { left: 22px; top: 24px; }
  .articulo__cierre-acciones .boton { flex: 1 1 100%; white-space: normal; text-align: center; }
  .nota--destacada .nota__titulo { max-width: none; }
}