/* =========================================================================
   contenido — Cinta, encabezados, destacada y tarjetas de nota.

   Tramo 3 de 8 de la hoja que antes era una sola (1 468 líneas). Los
   tramos son CONTIGUOS y se cargan en este orden: el orden de carga es la
   cascada. Mover una hoja de sitio puede cambiar qué regla gana sin que
   nada falle — se comprueba con `npm run huella`, no razonando.
   ========================================================================= */

/* ------------------------------------------------------------- contenido */

.principal { display: flex; flex-direction: column; min-width: 0; }

.cinta {
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 2rem;
  position: sticky;
  top: 0;
  z-index: 20;
}

.cinta__etiquetas {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.cinta__etiquetas::-webkit-scrollbar { display: none; }

/* Las etiquetas SON enlaces. Eran `<span>`: tenían forma de pastilla tocable y
   no llevaban a ningún lado, que es la peor combinación posible — el lector
   toca, no pasa nada, y aprende a no tocar. Ahora abren la lista de notas que
   las mencionan, y sólo se dibujan las que tienen notas detrás. */
.etiqueta {
  white-space: nowrap;
  background: #f3f2f2;
  color: var(--tinta-tenue);
  border-radius: 999px;
  padding: .28rem .8rem;
  font-size: .75rem;
  text-decoration: none;
  display: inline-block;
  transition: background .15s ease, color .15s ease;
}

.etiqueta:hover,
.etiqueta:focus-visible {
  background: var(--rojo);
  color: #fff;
}

/* El panel blanco sobre el papel gris: es lo que le da al contenido borde de
   página impresa en vez de fondo infinito. */
.contenido {
  background: var(--blanco);
  padding: 2.5rem 2.5rem 3rem;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  flex: 1;
}

.encabezado { margin-bottom: 1.75rem; }

.encabezado h1 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.08;
  margin: 0;
}
.encabezado p { margin: .4rem 0 0; color: var(--tinta-tenue); }

/* Separador de bloque dentro de la portada («Más noticias»). */
.encabezado--seccion {
  border-top: 2px solid var(--negro);
  padding-top: .8rem;
  margin: 3rem 0 1.75rem;
}
.encabezado--seccion h2 {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0;
}

/* ----------------------------------------------------------- la destacada */

.destacada {
  display: grid;
  gap: 1.5rem;
  text-decoration: none;
  color: inherit;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--linea);
}

@media (min-width: 900px) {
  .destacada { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
  .destacada__foto { order: 2; }
}

.destacada__foto {
  border-radius: var(--radio);
  overflow: hidden;
  background: #ebe9e9;
  aspect-ratio: 4 / 3;
}
.destacada__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.destacada:hover .destacada__foto img { transform: scale(1.03); }

/* El titular de la destacada es el elemento más grande de la página a
   propósito: en un quiosco, la portada se lee desde un metro de distancia. */
.destacada__titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
  margin: .3rem 0 .9rem;
}
.destacada:hover .destacada__titulo { color: var(--rojo); }

.destacada__entrada {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--tinta-tenue);
  margin: 0 0 .8rem;
}

/* --------------------------------------------------- tarjetas de nota (ct-*)
   Las clases ct- las escribe el widget de CMS Turbo. Se estilan aquí para que
   lo que pinta el widget y lo que deja el pre-render se vean idénticos: si no,
   al cargar el widget la portada daría un salto de estilo a la vista. */

.ct-lista {
  display: grid;
  gap: 2rem 1.75rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.ct-nota {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  text-decoration: none;
  color: inherit;
}

.ct-nota__foto {
  border-radius: var(--radio);
  overflow: hidden;
  background: #ebe9e9;
  aspect-ratio: 16 / 10;
}
.ct-nota__foto img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.ct-nota:hover .ct-nota__foto img { transform: scale(1.04); }

/*
 * Hueco para la nota sin foto.
 *
 * No todas las fuentes traen imagen, y una tarjeta sin foto entre dos que sí la
 * tienen empieza más arriba y desalinea la fila entera. El `:has()` lo resuelve
 * sin tocar el marcado, que es importante porque estas tarjetas las pinta
 * también el widget y no se le puede pedir que invente una foto.
 *
 * El hueco no es gris muerto: lleva la marca de agua de la R, así se lee como
 * «esta nota no trae foto» y no como «aquí falló algo».
 */
.ct-nota:not(:has(.ct-nota__foto))::before {
  content: "";
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radio);
  background:
    url("/img/erre.png") center / 3.5rem no-repeat,
    linear-gradient(135deg, #1c1818, #2a1016);
  opacity: .9;
}

.ct-nota__seccion {
  display: inline-block;
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--rojo);
  font-weight: 700;
  margin-bottom: .35rem;
}

.ct-nota__titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.16;
  margin: 0 0 .45rem;
}
.ct-nota:hover .ct-nota__titulo { color: var(--rojo); }

.ct-nota__entrada {
  margin: 0 0 .6rem;
  font-size: .93rem;
  color: var(--tinta-tenue);
}

.ct-nota__pie {
  margin: 0;
  font-size: .76rem;
  color: var(--tinta-tenue);
}

.ct-nota__audio { color: var(--rojo); font-weight: 600; }

.vacio {
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--tinta-tenue);
}