/* =========================================================================
   historias — Historias: un hecho que varios medios cubrieron.

   Tramo 12 de 14 de la hoja que antes era una sola (`tendencias.css`, 4 671
   líneas). Los tramos son CONTIGUOS y se cargan en este mismo orden: el
   orden de carga es la cascada, así que mover una hoja de sitio puede
   cambiar qué regla gana sin que nada falle. Si hace falta reordenar, se
   comprueba con `npm run huella` y no razonando.
   ========================================================================= */

/* --------------------------------------------------------------------------
   Historias: un hecho que varios medios cubrieron.
   -------------------------------------------------------------------------- */
.historia__marca {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 14px 0 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(228, 18, 58, .22);
  border: 1px solid var(--rojo);
  font: 900 .74rem/1 var(--texto-fuente);
  letter-spacing: .06em;
  color: #fff;
}
.historia__hecho {
  font-size: clamp(1.8rem, 4.4vw, 3.2rem);
  line-height: .96;
  color: #fff;
  margin: 0 0 14px;
  max-width: 24ch;
}

/* El índice, con su desglose visible. */
.indice {
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--sup-1);
  padding: clamp(18px, 3vw, 26px);
  margin-bottom: 30px;
}
.indice__cabeza {
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: baseline; justify-content: space-between;
  margin-bottom: 18px;
}
.indice__de { font-size: .5em; color: var(--texto-3); }
.indice__nota { margin: 0; max-width: 42ch; font-size: .82rem; color: var(--texto-2); }

.indice__partes { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.indice__parte {
  display: grid;
  gap: 4px 14px;
  grid-template-columns: 1fr auto;
  align-items: center;
}
@media (min-width: 760px) {
  .indice__parte { grid-template-columns: 110px minmax(90px, 1fr) 78px; }
}
.indice__eti { font-weight: 900; font-size: .84rem; color: var(--texto); }
.indice__barra {
  height: 8px; border-radius: 999px;
  background: var(--sup-3); overflow: hidden;
  grid-column: 1 / -1;
}
@media (min-width: 760px) { .indice__barra { grid-column: 2; } }
.indice__barra i { display: block; height: 100%; background: var(--oro-luz); border-radius: 999px; }
.indice__cifra {
  font-weight: 900; font-size: .84rem; text-align: right;
  color: var(--texto); font-variant-numeric: tabular-nums;
}
.indice__cifra small { color: var(--texto-3); font-weight: 400; }
.indice__exp {
  grid-column: 1 / -1;
  font-size: .78rem; color: var(--texto-3); line-height: 1.5;
}

/* Las coberturas, en orden cronológico. */
.coberturas { display: grid; gap: 12px; margin-top: 22px; list-style: none; padding: 0; }
.cobertura {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--sup-1);
}
.cobertura__orden {
  font-family: var(--display);
  font-size: 1.3rem; line-height: 1;
  color: var(--texto-3); text-align: center;
}
.cobertura__medio {
  margin: 0 0 4px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font: 900 .7rem/1 var(--texto-fuente);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--oro-luz);
}
.cobertura__primero {
  padding: 3px 8px; border-radius: 999px;
  background: rgba(228, 18, 58, .2);
  border: 1px solid var(--rojo);
  color: var(--rojo-claro);
  letter-spacing: .04em;
}
.cobertura__titulo { margin: 0 0 6px; font-weight: 700; font-size: 1rem; line-height: 1.35; }
.cobertura__titulo a:hover { color: var(--rojo-claro); }
.cobertura__resumen { margin: 0 0 8px; font-size: .86rem; color: var(--texto-2); line-height: 1.55; }
.cobertura__pie { margin: 0; font-size: .76rem; color: var(--texto-3); }
.cobertura__pie a { text-decoration: underline; text-underline-offset: 3px; }
.cobertura__pie a:hover { color: var(--texto); }

/* Listado de historias. */
.historias-lista { display: grid; gap: 10px; margin-top: 22px; list-style: none; padding: 0; }
.historia-card {
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--sup-1);
  transition: border-color .18s, background .18s;
}
.historia-card:hover { border-color: var(--linea-fuerte); background: var(--sup-2); }
.historia-card__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
  padding: 15px 18px;
  color: inherit;
}
.historia-card__medios {
  font-size: .68rem; color: var(--texto-2);
  text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap;
}
.historia-card__medios b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem; line-height: 1;
  color: var(--rojo-claro);
}
.historia-card__cuerpo { min-width: 0; display: grid; gap: 3px; }
.historia-card__hecho { font-weight: 900; font-size: .98rem; color: var(--texto); line-height: 1.35; }
.historia-card__fuentes {
  font-size: .74rem; color: var(--texto-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.historia-card__rel {
  font-family: var(--display);
  font-size: 1.3rem; color: var(--oro-luz);
  white-space: nowrap;
}
.historia-card__rel small { font-size: .5em; color: var(--texto-3); }

/* Filtros plegados. El resumen es la fila que se ve siempre; la lista sólo
   aparece al abrirlo. Así el encabezado deja de ocupar media pantalla antes
   de la primera nota. */
.filtros-plegado {
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .22);
}
.filtros-plegado > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-size: .84rem;
}
/* Safari dibuja su propio triángulo y descuadra la fila. */
.filtros-plegado > summary::-webkit-details-marker { display: none; }
.filtros-plegado > summary::after {
  content: '';
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s;
  opacity: .7;
}
.filtros-plegado[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.filtros-plegado__eti {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: .75;
}
.filtros-plegado__valor { font-weight: 700; }
.filtros-plegado .filtros-fila { padding: 0 14px 14px; margin: 0; }

/* Rejilla de artistas. Circular como en la portada, para que se lea como la
   misma cosa en los dos sitios. */
.rejilla-artistas {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; gap: 20px 14px;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.artista-card { display: grid; justify-items: center; text-align: center; gap: 6px; color: inherit; }
.artista-card__foto {
  width: 88px; height: 88px;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--sup-2);
  border: 2px solid transparent;
  transition: border-color .18s, transform .18s;
}
.artista-card:hover .artista-card__foto { border-color: var(--oro); transform: translateY(-2px); }
.artista-card__foto img { width: 100%; height: 100%; object-fit: cover; }
.artista-card__foto--vacia span {
  font-family: var(--display); font-size: 1.5rem;
  color: rgba(255, 255, 255, .92);
}
.artista-card__nombre {
  font-weight: 700; font-size: .88rem; line-height: 1.25; color: var(--texto);
}
.artista-card__meta { font-size: .74rem; color: var(--texto-3); }
.artista-card__genero {
  font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--oro-luz);
}

/* Filas del perfil: guardadas, hypes y ediciones. Misma forma para las tres
   porque son la misma pregunta —«qué es esto y a dónde me lleva»— y darles
   tres diseños distintos sólo obligaría a releer cada bloque. */
.mis-items { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.mi-item {
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--sup-1);
  transition: background .18s, border-color .18s;
}
.mi-item:hover { background: var(--sup-2); border-color: var(--linea-fuerte); }
.mi-item__link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: inherit;
}
/* Sin miniatura (ediciones del newsletter): dos columnas, si no el texto se
   metía en la casilla de 44px de la carátula y salía cortado a «Lo q…». */
.mi-item--doc .mi-item__link { grid-template-columns: minmax(0, 1fr) auto; }
.mi-item__cover {
  width: 44px; height: 44px;
  border-radius: 8px; overflow: hidden;
  background: var(--sup-3);
}
.mi-item__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mi-item__cuerpo { min-width: 0; display: grid; gap: 2px; }
.mi-item__titulo {
  font-weight: 700; font-size: .92rem; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mi-item__sub {
  font-size: .78rem; color: var(--texto-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mi-item__etiqueta {
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-3); white-space: nowrap;
  border: 1px solid var(--linea); border-radius: 999px; padding: 3px 9px;
}

/* Cierre de una sección larga: el mismo enlace que va en la cabecera, para
   quien llegó hasta abajo y no tiene por qué volver a subir. */
.seccion__cierre { margin: 24px 0 0; display: flex; justify-content: center; }

/* Botón de Google. Fondo claro y logotipo a color: sus condiciones de marca
   no permiten recolorear el logo, y además es lo que la gente reconoce. */
.boton-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  background: #fff;
  color: #1f1f1f;
  font-weight: 700; font-size: .92rem;
  border: 1px solid rgba(0, 0, 0, .12);
  transition: background .18s, transform .12s;
}
.boton-google:hover { background: #f2f2f2; color: #1f1f1f; }
.boton-google:active { transform: scale(.98); }
.icono-google { flex: none; }

/* En espera de que Turnstile confirme a la persona: el botón se ve apagado y
   no navega (lo bloquea el JS por captura). En cuanto el widget valida, el JS
   le quita esta clase y el enlace se activa. */
.boton-google--espera { opacity: .5; cursor: not-allowed; }
.boton-google--espera:hover { background: #fff; }
.suscribete__turnstile { margin-bottom: 4px; min-height: 65px; }

.formulario--google { display: grid; gap: 10px; justify-items: start; }
.formulario--google small { color: var(--texto-3); font-size: .78rem; line-height: 1.5; }
/* Dentro del bloque rojo de «Suscríbete» el gris de --texto-3 quedaba
   ilegible sobre el fondo: ahí el texto va en blanco tenue, como la bajada
   de al lado. */
/* El texto cae bajo el resplandor decorativo de la esquina (::before), donde
   el fondo se aclara y el blanco pierde contraste. Una sombra sutil lo hace
   legible sobre cualquier parte del degradado, y `position: relative` lo saca
   por encima del resplandor. */
.suscribete .formulario--google small {
  position: relative;
  color: #fff; font-size: .82rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.suscribete .formulario--google small a { color: #fff; text-decoration: underline; }

/* Avatar de la cabecera cuando hay sesión. */
.cabecera__yo {
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--sup-2);
  border: 1px solid var(--linea-fuerte);
  font-weight: 900; font-size: .9rem; color: var(--texto);
}
.cabecera__yo img { width: 100%; height: 100%; object-fit: cover; }

/* Menú de la cuenta (avatar → desplegable). */
.menu-yo { position: relative; }
.menu-yo > summary { cursor: pointer; list-style: none; }
.menu-yo > summary::-webkit-details-marker { display: none; }
.menu-yo > summary .cabecera__yo,
.menu-yo > summary.cabecera__yo { transition: border-color .16s; }
.menu-yo[open] > summary .cabecera__yo,
.menu-yo[open] > summary.cabecera__yo { border-color: var(--rojo); }

.menu-yo__panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 220px;
  background: var(--sup-1);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-md);
  padding: 8px;
  display: grid; gap: 2px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  z-index: 60;
}
.menu-yo__quien {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--linea);
  margin: 0 0 6px;
  font-weight: 700; font-size: .9rem; color: var(--texto);
  display: grid; gap: 2px;
}
.menu-yo__quien small { font-weight: 400; font-size: .74rem; color: var(--texto-3); }
.menu-yo__panel a,
.menu-yo__panel button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: .88rem; color: var(--texto-2);
  transition: background .14s, color .14s;
}
.menu-yo__panel a,
.menu-yo__panel button { -webkit-tap-highlight-color: transparent; outline: none; }
.menu-yo__panel a:hover,
.menu-yo__panel button:hover { background: var(--sup-2); color: var(--texto); }
/* Estado seleccionado/enfocado por teclado: un realce limpio en vez del
   recuadro azul del navegador, que se veía fuera de lugar. */
.menu-yo__panel a:focus-visible,
.menu-yo__panel button:focus-visible { background: var(--sup-2); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.menu-yo__panel a:active,
.menu-yo__panel button:active { background: var(--sup-3); }
/* «Salir» se tiñe de rojo al pasar por encima: es la acción que cierra todo. */
.menu-yo__panel form button:hover { color: var(--rojo-claro); }
.menu-yo__panel svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.menu-yo__panel form { margin: 0; }

/* El botón "Salir" del cajón móvil, para que se vea como los demás enlaces. */
.cajon__form { margin: 0; }
.cajon__form button {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
}

/* Página de cuenta. */
.cuenta { display: grid; gap: 24px; max-width: 620px; }
.cuenta__quien { display: flex; align-items: center; gap: 14px; }
.cuenta__foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.cuenta__nombre { font-weight: 900; font-size: 1.05rem; margin: 0; }
.cuenta__correo { color: var(--texto-3); font-size: .86rem; margin: 2px 0 0; }
.cuenta__form { display: grid; gap: 14px; justify-items: start; }

.opcion {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--sup-1);
  cursor: pointer;
  width: 100%;
}
.opcion:hover { border-color: var(--linea-fuerte); }
.opcion input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--rojo); }
.opcion b { display: block; font-size: .95rem; }
.opcion small { display: block; color: var(--texto-3); font-size: .8rem; line-height: 1.55; margin-top: 3px; }

.cuenta__promesa { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cuenta__promesa li { font-size: .86rem; color: var(--texto-2); line-height: 1.55; }
.cuenta__promesa b { color: var(--texto); }

.aviso-ok {
  padding: 12px 16px; border-radius: var(--r-md);
  border: 1px solid var(--oro); background: rgba(153, 129, 25, .14);
  color: var(--oro-luz); font-size: .88rem; margin: 0 0 22px;
}

/* ===================================================================== */
/* Perfil (Ver perfil, /cuenta)                                          */
/* ===================================================================== */

/* Portada de identidad, a todo el ancho. Reusa las ondas de las demás
   portadas para que se lea como parte del mismo sitio, no como una pantalla
   aparte. */
.perfil__portada {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 3vw, 26px) 0 clamp(24px, 4vw, 40px);
  border-bottom: 1px solid var(--linea);
}
.migas--sobre { position: relative; z-index: 1; margin-bottom: clamp(24px, 6vw, 56px); }

.perfil__cabecera {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; gap: clamp(16px, 3vw, 28px);
  flex-wrap: wrap;
}
.perfil__avatar {
  width: clamp(88px, 18vw, 116px); height: clamp(88px, 18vw, 116px);
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  display: grid; place-items: center;
  background: var(--sup-2);
  border: 3px solid var(--negro);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 1px var(--linea-fuerte);
}
.perfil__avatar img { width: 100%; height: 100%; object-fit: cover; }
.perfil__inicial { font-family: var(--display); font-size: 2.4rem; color: var(--texto); }

.perfil__meta { min-width: 0; flex: 1 1 260px; }
.perfil__nombre {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.7rem, 5vw, 2.8rem); line-height: 1; color: var(--texto);
  margin: 0;
}
.perfil__handle { color: var(--texto-3); font-size: .92rem; margin: 8px 0 0; word-break: break-all; }

.perfil__stats {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  font-size: .88rem; color: var(--texto-3);
}
.perfil__stats b { color: var(--texto); font-family: var(--display); font-size: 1.1rem; margin-right: 3px; }
.perfil__stats li { position: relative; }
.perfil__stats li + li:not(.perfil__desde)::before,
.perfil__stats .perfil__desde::before {
  content: ""; position: absolute; left: -10px; top: 50%;
  width: 3px; height: 3px; border-radius: 50%; background: var(--texto-3); transform: translateY(-50%);
}
.perfil__desde { color: var(--texto-3); }

.perfil__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
  border: 1px solid var(--linea-fuerte); color: var(--texto-2);
}
.chip svg { width: 14px; height: 14px; }
/* Estado «activo» en dorado, no verde: el sitio es rojo y oro, y meter un
   verde de otra paleta se vería pegado. */
.chip--verde { color: var(--oro-luz); border-color: rgba(153, 129, 25, .55); background: rgba(153, 129, 25, .12); }
.chip--tenue { color: var(--texto-3); }
.chip--enlace:hover { border-color: var(--rojo); color: var(--texto); }

/* Cuerpo en dos columnas: contenido grande a la izquierda, riel chico a la
   derecha. En móvil se apila, contenido primero. */
.perfil__grid { display: grid; gap: 28px; padding-top: clamp(24px, 4vw, 40px); padding-bottom: 40px; }
@media (min-width: 940px) {
  .perfil__grid {
    grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 340px);
    align-items: start;
  }
}
.perfil__contenido { min-width: 0; display: grid; gap: 34px; }
.perfil__bloque { min-width: 0; }

/* Riel derecho. Pegajoso en escritorio para que las preferencias y los atajos
   sigan a la vista mientras se recorre el contenido. */
.perfil__rail { display: grid; gap: 16px; }
@media (min-width: 940px) { .perfil__rail { position: sticky; top: 96px; } }

.rail-tarjeta {
  background: var(--sup-1);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: 18px;
}
.rail-tarjeta__titulo {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3); margin: 0 0 12px;
}
.rail-lista { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.rail-lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .9rem; color: var(--texto-2); }
.rail-estado {
  font-size: .74rem; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--linea-fuerte); color: var(--texto-3);
}
.rail-estado--si { color: var(--oro-luz); border-color: rgba(153, 129, 25, .55); background: rgba(153, 129, 25, .12); }
.rail-tarjeta__cta { width: 100%; }

.rail-atajos { display: grid; gap: 2px; }
.rail-atajos a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-sm);
  font-size: .88rem; color: var(--texto-2);
  transition: background .14s, color .14s;
}
.rail-atajos a:hover { background: var(--sup-2); color: var(--texto); }
.rail-atajos svg { width: 17px; height: 17px; opacity: .85; }
.rail-nota { font-size: .78rem; line-height: 1.6; color: var(--texto-3); margin: 4px 2px 0; }

/* Editar cuenta (/cuenta/editar). */
.editar { max-width: 640px; display: grid; gap: 34px; }
.editar__bloque { display: grid; gap: 14px; }
.editar__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.editar__acciones form { margin: 0; }
.editar__volver { margin: 0; }
.boton--peligro {
  border: 1px solid rgba(228, 18, 58, .5); color: var(--rojo-claro); background: transparent;
}
.boton--peligro:hover { background: rgba(228, 18, 58, .12); border-color: var(--rojo); color: #fff; }

/* Acciones compactas: dentro de una tarjeta de video o de una fila, no hay
   sitio para los botones a tamaño completo. */
.acciones--compacta { gap: 6px; margin-top: 8px; }
.acciones--compacta .accion { padding: 6px 10px; font-size: .78rem; }
.acciones--compacta .accion svg { width: 15px; height: 15px; }

/* Reparto del hype entre tipos. */
.reparto { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.reparto__fila {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 14px;
}
@media (min-width: 720px) {
  .reparto__fila { grid-template-columns: 120px minmax(0, 1fr) 110px 130px; }
}
.reparto__eti { font-weight: 900; font-size: .9rem; color: var(--texto); }
.reparto__barra {
  height: 10px; border-radius: 999px;
  background: var(--sup-2); overflow: hidden;
}
.reparto__barra i { display: block; height: 100%; background: var(--rojo); }
.reparto__cifra { font-family: var(--display); font-size: 1.1rem; color: var(--oro-luz); white-space: nowrap; }
.reparto__cifra small { font-size: .55em; color: var(--texto-3); }
.reparto__exp {
  grid-column: 1 / -1; font-size: .76rem; color: var(--texto-3);
}
@media (min-width: 720px) { .reparto__exp { grid-column: auto; text-align: right; } }

.pista__hype {
  font-family: var(--display); font-size: 1.15rem;
  color: var(--rojo-claro); white-space: nowrap;
}
.pista__hype small { font-size: .5em; color: var(--texto-3); }

/* "Nuestra nota sobre esto", dentro de la ficha de una nota ajena. Se separa
   con fondo y borde rojo porque es lo único de la página que es nuestro. */
.nuestra {
  border: 1px solid var(--rojo);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--sup-1);
  padding: 18px;
  margin: 26px 0;
}
.nuestra__rotulo {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--rojo-claro);
}
.nuestra__rotulo svg { width: 16px; height: 16px; }
.nuestra__titulo { font-size: 1.15rem; line-height: 1.3; margin: 0 0 8px; }
.nuestra__titulo a { color: var(--texto); }
.nuestra__titulo a:hover { color: var(--rojo-claro); }
.nuestra__entrada { font-size: .95rem; line-height: 1.6; color: var(--texto-2); margin: 0 0 10px; }
.nuestra__pie { font-size: .78rem; color: var(--texto-3); margin: 0 0 14px; }

/* Paginación. Enlaces reales, así que se estilan como enlaces y no como
   controles: tienen que verse pulsables incluso sin JavaScript. */
.paginacion {
  display: flex; flex-wrap: wrap; gap: 8px 12px;
  align-items: center; justify-content: center;
  margin-top: 30px;
}
.paginacion__salto,
.paginacion__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: var(--sup-1);
  font-size: .86rem; font-weight: 700;
  color: var(--texto-2);
  transition: background .18s, color .18s, border-color .18s;
}
.paginacion__salto:hover,
.paginacion__num:hover { background: var(--sup-2); border-color: var(--linea-fuerte); color: var(--texto); }
.paginacion__salto--nulo { opacity: .32; }
.paginacion__num--activa {
  background: var(--rojo); border-color: var(--rojo); color: #fff;
}
.paginacion__lista {
  display: flex; gap: 6px; list-style: none; padding: 0; margin: 0;
}
.paginacion__cuenta {
  text-align: center; margin: 12px 0 0;
  font-size: .78rem; color: var(--texto-3);
}

/* Celda sin dato todavía. El guion se distingue de un valor real para que no
   se lea como "cero" ni como un fallo. */
.tabla-nd { color: var(--texto-3); cursor: help; }
.tabla-pie {
  font-size: .8rem; line-height: 1.6;
  color: var(--texto-3);
  margin: 12px 0 0;
}

/* Canciones que ya salieron de los charts. Van sin número a propósito: no
   tienen posición y ponerles una sería inventarla. */
.fuera-lista {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; gap: 6px;
}
@media (min-width: 720px) { .fuera-lista { grid-template-columns: 1fr 1fr; gap: 6px 18px; } }
.fuera-lista a {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  padding: 9px 12px;
  border-radius: var(--r-md);
  background: var(--sup-1);
  font-size: .9rem; font-weight: 700; color: var(--texto-2);
  transition: background .18s, color .18s;
}
.fuera-lista a:hover { background: var(--sup-2); color: var(--texto); }
.fuera-lista span { font-weight: 400; font-size: .82rem; color: var(--texto-3); }

/* Notas propias. La tarjeta le da el peso al texto que escribimos —la entrada
   de la síntesis— y manda el conteo de medios al pie, que es el lugar que le
   toca cuando ya hay una nota redactada. */
.propias-lista { display: grid; gap: 14px; margin-top: 22px; list-style: none; padding: 0; }
.propia-card {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--rojo);
  border-radius: var(--r-md);
  background: var(--sup-1);
  overflow: hidden;
  transition: border-color .18s, background .18s;
}
.propia-card:hover { background: var(--sup-2); border-color: var(--linea-fuerte); border-left-color: var(--rojo); }
.propia-card__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px;
  color: inherit;
  align-items: start;
}
@media (min-width: 720px) {
  .propia-card__link { grid-template-columns: 168px minmax(0, 1fr); gap: 18px; }
}
.propia-card__foto {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--sup-3);
}
.propia-card__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.propia-card__cuerpo { min-width: 0; display: grid; gap: 7px; }
.propia-card__hecho {
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--texto);
}
.propia-card__entrada {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--texto-2);
}
.propia-card__pie { font-size: .74rem; color: var(--texto-3); }
.propia-card__sello {
  color: var(--rojo-claro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .68rem;
}
/* Fila de hype/guardar/compartir al pie de la tarjeta, alineada con el texto
   del enlace y separada por una línea fina para que no se lea como parte de él. */
.propia-card__acciones {
  padding: 10px 18px 14px;
  border-top: 1px solid var(--linea);
}
@media (min-width: 720px) {
  .propia-card__acciones { padding-left: calc(168px + 18px + 18px); }
}

/* La gaceta: buscador + lista de ediciones. */
.gaceta-buscar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.gaceta-buscar input {
  flex: 1; min-width: 220px; padding: 12px 16px;
  border-radius: var(--r-sm); border: 1px solid var(--linea-fuerte);
  background: var(--sup-1); color: var(--texto); font: inherit;
}
.gaceta-buscar input:focus-visible { outline: 2px solid var(--oro-luz); border-color: var(--oro-luz); }
.gacetas { list-style: none; display: grid; gap: 12px; }
.gaceta-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 18px; padding: 16px 18px;
  border: 1px solid var(--linea); border-left: 3px solid var(--rojo);
  border-radius: var(--r-md); background: var(--sup-1);
}
.gaceta-card:hover { background: var(--sup-2); border-color: var(--linea-fuerte); }
.gaceta-card__num { font-family: var(--display); font-size: 1.6rem; color: var(--oro-luz); }
.gaceta-card__cuerpo { min-width: 0; }
.gaceta-card__titulo { font-size: 1.05rem; font-weight: 900; color: var(--texto); line-height: 1.25; }
.gaceta-card__fecha { color: var(--texto-3); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.gaceta-card__resumen { color: var(--texto-2); font-size: .9rem; line-height: 1.5; margin-top: 6px; }
.gaceta-card__pdf { white-space: nowrap; flex: none; }
.gaceta-card__pdf--pend { color: var(--texto-3); font-size: .8rem; }
/* Muro de acceso: cuando no hay sesión, invita a crear cuenta. */
.gaceta-muro { max-width: 620px; margin: 0 auto; text-align: center; padding: 20px 0; display: grid; gap: 16px; justify-items: center; }
.gaceta-muro__titulo { font-family: var(--display); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; }
.gaceta-muro__titulo em { color: var(--rojo); font-style: normal; }
.gaceta-muro__texto { color: var(--texto-2); font-size: 1.05rem; line-height: 1.6; max-width: 52ch; }
@media (max-width: 560px) {
  .gaceta-card { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .gaceta-card__pdf { grid-column: 1 / -1; text-align: center; }
}

/* Sección de la última edición en la portada: texto a la izquierda y una
   "tapa" de PDF a la derecha, que hace las veces de portada de revista. */
.gaceta-portada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: 32px; align-items: center; }
.gaceta-portada__fecha { color: var(--texto-3); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 4px 0 10px; }
.gaceta-portada__acciones { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 18px; }
.gaceta-portada__nota { color: var(--texto-3); font-size: .85rem; margin-top: 10px; max-width: 52ch; }
.gaceta-portada__tapa {
  display: grid; align-content: space-between; aspect-ratio: 3 / 4; padding: 20px;
  border-radius: 14px; text-decoration: none; color: #fff; overflow: hidden;
  background: linear-gradient(150deg, var(--rojo) 0%, #7a0d16 55%, #12100f 100%);
  border: 1px solid var(--linea-fuerte); box-shadow: 0 18px 40px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gaceta-portada__tapa:hover { transform: translateY(-3px); box-shadow: 0 24px 52px rgba(0,0,0,.45); }
.gaceta-portada__num { font-family: var(--display); font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; color: var(--oro-luz); }
.gaceta-portada__marca { font-weight: 900; letter-spacing: .14em; font-size: .72rem; text-transform: uppercase; opacity: .92; }
.gaceta-portada__sello { justify-self: end; font-weight: 900; letter-spacing: .1em; font-size: .8rem; background: rgba(0,0,0,.35); padding: 4px 10px; border-radius: 999px; }
.gaceta-portada__tapa--muro { background: linear-gradient(150deg, #3a3330 0%, #201c1a 60%, #12100f 100%); }
@media (max-width: 720px) {
  /* En móvil, una sola columna con la tapa arriba a ancho completo: antes
     quedaba a 260px pegada a la izquierda y dejaba un hueco grande a la
     derecha, como si el bloque se inclinara. */
  .gaceta-portada { grid-template-columns: 1fr; gap: 20px; }
  .gaceta-portada__tapa { order: -1; max-width: none; width: 100%; aspect-ratio: 4 / 3; }
}

/* Acciones de cabecera de sección, cuando hay más de un enlace. */
.cabeza-acciones { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
/* Tira de cortes anteriores del chart. */
.cortes-fila { margin-top: 16px; }