/* Cronista Urbano. Contenido: tarjetas, portada, nota, archivos y columna lateral. */

/* Etiqueta de sección: caja normal, distinguida por color y peso. */
.kicker { font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--sec); }

/* Tarjeta de nota. */
.story { display: grid; gap: 12px; align-content: start; }
.story__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.story:hover .story__media img { transform: scale(1.02); }
.story__body { display: grid; gap: 6px; }
.story__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.story__time { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.story__title { font-size: 1.2rem; line-height: 1.18; font-weight: 600; text-wrap: balance; }
.story__dek { color: var(--ink-2); font-size: 1.05rem; line-height: 1.45; }

.story--lead .story__title { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3rem); line-height: 1.06; letter-spacing: -0.015em; }
.story--lead .story__dek { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); max-width: 40em; }
.story--stack .story__title { font-size: 1.35rem; }
.story--compact { padding-block: 14px; border-top: 1px solid var(--rule); gap: 6px; }
.story--compact .story__title { font-size: 1.12rem; }
.story--row { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding-block: 18px; border-top: 1px solid var(--rule); }
.story--row .story__media { aspect-ratio: 1; }
.story--row .story__dek { display: none; }
@media (min-width: 768px) {
  .story--row { grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
  .story--row .story__media { aspect-ratio: 16 / 9; }
  .story--row .story__title { font-size: 1.35rem; }
  .story--row .story__dek { display: block; }
}

.grid-3 { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Encabezado de bloque: regla en el color de la sección y el nombre en serif. */
.section-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-top: 10px; border-top: 3px solid var(--sec); }
.section-block__title { font-size: 1.6rem; font-weight: 700; color: var(--ink); }
.section-block__more { font-family: var(--sans); font-size: 0.9rem; font-weight: 600; color: var(--sec); white-space: nowrap; }

/* Portada. */
.front { display: grid; gap: 48px; }
.front__top { display: grid; gap: 40px; }
.front__main { display: grid; gap: var(--gap); align-content: start; }
.front__secondary { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .front__secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .front__main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .front__lead { grid-column: 1; }
  .front__secondary { grid-column: 2; grid-template-columns: minmax(0, 1fr); align-content: start; padding-left: var(--gap); border-left: 1px solid var(--rule); }
  .front__more { grid-column: 1 / -1; padding-top: var(--gap); border-top: 1px solid var(--rule); }
}
.front__bottom { display: grid; gap: 40px; }
@media (min-width: 1100px) { .front__top, .front__bottom { grid-template-columns: minmax(0, 1fr) 300px; } }

.section-block__grid { display: grid; gap: var(--gap); }
@media (min-width: 768px) { .section-block__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.section-block__list .story--compact:first-child { border-top: 0; padding-top: 0; }
.latest__list .story--row:first-child { border-top: 0; padding-top: 0; }
.button-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; padding: 0 20px; border: 1px solid var(--ink); font-family: var(--sans); font-weight: 600; }
.button-link:hover { background: var(--ink); color: var(--paper); text-decoration: none; }

/* Columna lateral: lo último como línea de tiempo, con el color de sección en cada punto. */
.rail { display: grid; gap: 28px; align-content: start; }
.rail-block { display: grid; gap: 14px; }
.rail-title { padding-top: 10px; border-top: 3px solid var(--ink); font-size: 1.35rem; font-weight: 700; }
.timeline { display: grid; }
.timeline__item { position: relative; display: grid; gap: 2px; padding: 0 0 16px 18px; border-left: 1px solid var(--rule); }
.timeline__item::before { content: ""; position: absolute; left: -5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--sec); }
.timeline__time { font-family: var(--sans); font-size: 0.82rem; font-weight: 700; color: var(--sec); font-variant-numeric: tabular-nums; }
.timeline__item a { font-size: 1.05rem; line-height: 1.25; font-weight: 500; }
.rail__sticky { display: grid; gap: 20px; }
@media (min-width: 1100px) { .rail__sticky { position: sticky; top: 72px; } }
.section-list { display: grid; }
.section-list a { display: flex; align-items: center; gap: 10px; min-height: 40px; font-family: var(--sans); font-weight: 600; border-bottom: 1px solid var(--rule); }
.section-list a::before { content: ""; width: 10px; height: 10px; background: var(--sec); }

/* Nota. */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 3px; background: var(--sec, var(--ink)); transform-origin: left; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .reading-progress { animation: noticias-progress linear both; animation-timeline: scroll(root); }
  @keyframes noticias-progress { to { transform: scaleX(1); } }
}
.article__head { display: grid; gap: 14px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--sans); font-size: 0.88rem; color: var(--muted); }
.crumbs a + a::before { content: "/"; margin-inline: 8px; color: var(--rule); }
.crumbs__current { font-weight: 700; color: var(--sec); }
.article__title { max-width: 22em; font-size: clamp(2rem, 1.2rem + 3vw, 3.3rem); line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; }
.article__dek { max-width: 38em; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); line-height: 1.4; color: var(--ink-2); }
.article__hero { margin-block: 28px 0; }
.article__hero-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-2); }
.article__hero figcaption { margin-top: 8px; font-family: var(--sans); font-size: 0.85rem; color: var(--muted); }
.article__layout { display: grid; gap: 48px; margin-top: 28px; }
@media (min-width: 1100px) { .article__layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; } }
.article__main { max-width: 700px; }

.byline { display: grid; gap: 6px; padding-block: 16px; margin-bottom: 28px; border-block: 1px solid var(--rule); font-family: var(--sans); font-size: 0.92rem; }
.byline__author { font-weight: 700; }
.byline__author a { color: var(--sec); }
.byline__dates { color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.share { display: flex; gap: 8px; margin-top: 8px; }
.share__btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.share__btn:hover { border-color: var(--ink); }
.share__btn svg { width: 18px; height: 18px; fill: currentColor; }
.share__copied { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); padding: 4px 8px; background: var(--ink); color: var(--paper); font-size: 0.8rem; white-space: nowrap; }

.prose { font-size: 1.22rem; line-height: 1.66; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 1.8em; font-size: 1.6rem; }
.prose h3 { margin-top: 1.5em; font-size: 1.3rem; }
.prose a { color: var(--sec); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose blockquote { margin-inline: 0; padding-left: 20px; border-left: 3px solid var(--sec); font-style: italic; font-size: 1.35rem; color: var(--ink-2); }
.prose img, .prose figure { margin-inline: 0; }
.prose figcaption, .prose .wp-caption-text { margin-top: 6px; font-family: var(--sans); font-size: 0.85rem; color: var(--muted); }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.article__sources { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 0.92rem; color: var(--muted); }
.article__sources a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.15em; }
.tags, .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; font-family: var(--sans); font-size: 0.88rem; }
.tags a, .chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 18px; }
.tags a:hover, .chips a:hover { border-color: var(--ink); text-decoration: none; }
.related { margin-top: 56px; }
.page-content { max-width: 760px; display: grid; gap: 24px; }

/* Archivos de sección, autor y búsqueda. */
.listing { display: grid; gap: 28px; }
.archive__head { display: grid; gap: 10px; padding-top: 12px; border-top: 3px solid var(--sec); }
.archive__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 700; letter-spacing: -0.015em; }
.archive__description { max-width: 40em; color: var(--ink-2); font-size: 1.1rem; }
.archive__layout { display: grid; gap: 48px; }
@media (min-width: 1100px) { .archive__layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; } }
.archive__lead { padding-bottom: var(--gap); margin-bottom: 4px; border-bottom: 1px solid var(--rule); }
.author-head { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; }
.author-head__avatar { border-radius: 50%; }
.empty { font-size: 1.15rem; color: var(--ink-2); }
.empty a { text-decoration: underline; }
.search-form { display: flex; gap: 8px; max-width: 520px; font-family: var(--sans); }
.search-form input { flex: 1; min-height: 44px; padding: 0 12px; border: 1px solid var(--muted); background: #fff; font: inherit; }
.search-form button { min-height: 44px; padding: 0 18px; border: 0; background: var(--ink); color: var(--paper); font-weight: 600; cursor: pointer; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; font-family: var(--sans); }
.pagination .page-numbers { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--rule); }
.pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Una columna implícita "auto" crece hasta el ancho de su contenido y desborda la página en
   móvil: todas las retículas de una columna se fijan a minmax(0, 1fr). */
.front, .front__top, .front__main, .front__bottom, .rail, .rail-block, .listing, .archive__layout,
.article__layout, .article__head, .section-block__grid, .story:not(.story--row), .story__body, .page-content {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1100px) {
  .front__top, .front__bottom, .archive__layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .article__layout { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (min-width: 900px) { .front__main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
@media (min-width: 768px) { .section-block__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.story--row.story--noimg { grid-template-columns: minmax(0, 1fr); }

/* Nota: composición de los grandes diarios. En computadora, una columna angosta a la izquierda
   para el avatar de quien firma, el titular y el texto alineados después de ella, y "Lo último"
   separado por una línea. En tablet y celular, una sola columna de lectura centrada. */
.reading-progress { top: 51px; }
.byline { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.byline__avatar { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sec); color: #fff; font-family: var(--serif); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; }
.byline .share { grid-column: 1 / -1; }
.article__head, .article__layout { max-width: 740px; }
@media (min-width: 1100px) {
  .article__head { max-width: var(--wrap); padding-left: calc(var(--gutter) + 142px); }
  .article__layout { max-width: var(--wrap); grid-template-columns: 110px minmax(0, 660px) minmax(0, 1fr) 300px; column-gap: 32px; }
  .article__main { grid-column: 2; max-width: none; }
  .article__layout > .rail { grid-column: 4; padding-left: 32px; border-left: 1px solid var(--rule); }
  .byline { position: relative; grid-template-columns: minmax(0, 1fr); }
  .byline__avatar { position: absolute; left: -142px; top: 16px; width: 76px; height: 76px; font-size: 1.6rem; }
}

/* La columna derecha agrupa su contenido en .rail__inner. */
.rail__inner { display: grid; gap: 28px; align-content: start; grid-template-columns: minmax(0, 1fr); }

/* En la nota, la columna más corta (casi siempre el texto) se queda fija mientras la larga se
   desplaza; al terminar la larga, todo sigue bajando junto. assets/js/site.js marca cuál es la
   corta y calcula su --stick-top: si mide más que la pantalla, se desplaza hasta mostrar su
   final y ahí se queda, para que nunca quede texto escondido. */
@media (min-width: 1100px) {
  .article__layout > * { align-self: start; }
  .article__layout > .is-stuck-column { position: sticky; top: var(--stick-top, 51px); }
}