/* =========================================================================
   bloques — Radar, géneros, conversación, suscripción, pie, mini reproductor y utilidades.

   Tramo 5 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.
   ========================================================================= */

/* --------------------------------------------------------------------------
   11. Radar de artistas emergentes
   -------------------------------------------------------------------------- */
.radar {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .radar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .radar { grid-template-columns: repeat(4, 1fr); } }

.radar__item {
  background: var(--sup-1);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.radar__item:hover { border-color: var(--oro); transform: translateY(-4px); }
.radar__item::before {
  content: "";
  position: absolute; inset: auto -30% -60% auto;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(153, 129, 25, .30), transparent 68%);
  pointer-events: none;
}
.radar__nombre { font-family: var(--display); text-transform: uppercase; font-size: 1.35rem; line-height: 1; }
.radar__ciudad { font-size: .78rem; color: var(--oro-luz); font-weight: 900; letter-spacing: .06em; }
.radar__nota { font-size: .87rem; color: var(--texto-2); margin: 0; }
.radar__cambio {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--linea);
  font-size: .78rem; color: var(--texto-3);
}
.radar__cambio b { color: var(--sube); font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   12. Géneros
   -------------------------------------------------------------------------- */
.generos { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .generos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .generos { grid-template-columns: repeat(5, 1fr); } }

.genero {
  position: relative;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--sup-1);
  border: 1px solid var(--linea);
  overflow: hidden;
  text-align: left;
  transition: border-color .18s, background .18s;
}
.genero:hover { border-color: var(--rojo); background: var(--sup-2); }
.genero__relleno {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(0deg, rgba(228, 18, 58, .28), transparent);
  pointer-events: none;
}
.genero__nombre { position: relative; font-weight: 900; font-size: .92rem; line-height: 1.2; }
.genero__cambio { position: relative; margin-top: 8px; font-size: .76rem; font-weight: 900; }

/* --------------------------------------------------------------------------
   13. Conversación (foros) + fuentes
   -------------------------------------------------------------------------- */
.dos-columnas { display: grid; gap: clamp(24px, 4vw, 44px); }
@media (min-width: 980px) { .dos-columnas { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }

.conversacion { display: grid; gap: 2px; }
.conversacion li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--linea);
}
.conversacion li:first-child { border-top: 1px solid var(--linea); }
.conversacion__tema { font-weight: 900; font-size: .96rem; }
.conversacion__fuente { font-size: .76rem; color: var(--texto-3); margin-top: 3px; letter-spacing: .04em; }
.conversacion__num { text-align: right; }
.conversacion__num b { font-family: var(--display); font-size: 1.5rem; display: block; line-height: 1; }
.conversacion__num span { font-size: .68rem; color: var(--texto-3); letter-spacing: .1em; text-transform: uppercase; }

.fuentes { display: grid; gap: 10px; }
.fuente {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--sup-1);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
}
.fuente__tipo {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: .62rem; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--sup-3); color: var(--oro-luz);
}
.fuente__nombre { font-weight: 900; font-size: .92rem; }
.fuente__detalle { font-size: .8rem; color: var(--texto-2); }
.fuente__cadencia {
  margin-left: auto; flex-shrink: 0;
  font-size: .7rem; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-3);
}

/* --------------------------------------------------------------------------
   14. Suscripción
   -------------------------------------------------------------------------- */
.suscribete {
  background: var(--rojo);
  border-radius: var(--r-xl);
  padding: clamp(28px, 5vw, 56px);
  display: grid; gap: 24px;
  position: relative; overflow: hidden;
}
@media (min-width: 900px) {
  .suscribete { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); align-items: center; gap: 48px; }
}
.suscribete::before {
  content: "";
  position: absolute; inset: -40% -10% auto auto;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .20), transparent 65%);
  pointer-events: none;
}
.suscribete h2 {
  position: relative;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(2rem, 5.6vw, 3.6rem); line-height: .92; color: #fff;
}
.suscribete p { position: relative; color: rgba(255, 255, 255, .92); margin: 12px 0 0; max-width: 48ch; }

.formulario { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
.formulario input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(0, 0, 0, .22);
  color: #fff;
  font: inherit;
  font-size: .95rem;
}
.formulario input::placeholder { color: rgba(255, 255, 255, .62); }
.formulario input:focus { outline: 3px solid #fff; outline-offset: 2px; }
.formulario .boton { flex: 0 0 auto; }
.formulario small {
  flex-basis: 100%;
  font-size: .74rem;
  color: rgba(255, 255, 255, .78);
}

/* --------------------------------------------------------------------------
   15. Pie
   -------------------------------------------------------------------------- */
.pie {
  border-top: 1px solid var(--linea);
  padding-block: clamp(36px, 6vw, 64px) 120px;
  margin-top: clamp(40px, 7vw, 80px);
}
@media (min-width: 900px) { .pie { padding-bottom: 48px; } }

.pie__rejilla { display: grid; gap: 32px; }
@media (min-width: 760px) { .pie__rejilla { grid-template-columns: 1.4fr repeat(3, 1fr); } }

.pie__marca img { height: 42px; width: auto; margin-bottom: 14px; }
.pie__marca p { color: var(--texto-2); font-size: .88rem; max-width: 34ch; margin: 0; }

.pie h4 {
  margin: 0 0 12px;
  font-size: .72rem; font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro-luz);
}
.pie li { margin-bottom: 8px; }
.pie li a { color: var(--texto-2); font-size: .88rem; }
.pie li a:hover { color: var(--texto); }

.pie__base {
  margin-top: 36px; padding-top: 22px;
  border-top: 1px solid var(--linea);
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  justify-content: space-between;
  font-size: .78rem; color: var(--texto-3);
}

/* --------------------------------------------------------------------------
   16. Mini reproductor fijo (móvil y escritorio)
   -------------------------------------------------------------------------- */
.mini-player {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  background: rgba(20, 20, 24, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--linea);
  transform: translateY(110%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  padding-bottom: env(safe-area-inset-bottom);
}
.mini-player[data-visible="true"] { transform: none; }

.mini-player__fila {
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--gutter);
  max-width: var(--ancho); margin-inline: auto;
}
.mini-player__datos { min-width: 0; flex: 1; }
.mini-player__titulo {
  font-weight: 900; font-size: .88rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-player__artista {
  font-size: .76rem; color: var(--texto-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-player__acciones { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mini-player .portada-mini { width: 44px; height: 44px; border-radius: 8px; }

/* --------------------------------------------------------------------------
   17. Aviso de datos de ejemplo
   -------------------------------------------------------------------------- */
.aviso-demo {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 18px;
  padding: 12px 16px;
  border: 1px dashed var(--oro);
  border-radius: var(--r-md);
  background: rgba(153, 129, 25, .10);
  font-size: .82rem;
  color: var(--texto-2);
}
.aviso-demo b { color: var(--oro-luz); }
.aviso-demo svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--oro-luz); }

/* --------------------------------------------------------------------------
   18. Utilidades de aparición
   -------------------------------------------------------------------------- */
.aparece { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .aparece { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   19. Ajustes de la versión servida (Express + Handlebars)
   -------------------------------------------------------------------------- */

/* Las fichas de región ahora son enlaces reales, no botones. */
.ficha[aria-current="page"] {
  background: var(--rojo);
  border-color: var(--rojo);
  color: #fff;
  box-shadow: var(--sombra-rojo);
}

.portada__cta { margin-top: 22px; }

.pista__titulo { display: block; color: inherit; }
.pista__titulo:hover { color: var(--rojo-claro); }
.sonando__titulo a:hover { color: var(--rojo-claro); }

.seccion__titulo--chico { font-size: clamp(1.6rem, 4vw, 2.4rem); }

.artista__cambio.es-sube, .genero__cambio.es-sube { color: var(--sube); }
.artista__cambio.es-baja, .genero__cambio.es-baja { color: var(--baja); }

.pie__bajada { color: var(--texto-2); font-size: .88rem; max-width: 34ch; margin: 0; }

/* El aviso de datos de ejemplo es un <p> en la versión servida. */
p.aviso-demo { align-items: flex-start; }
.aviso-demo a { color: var(--oro-luz); text-decoration: underline; }