/* K-Pulso: estilos de la web
   Estética de photocard: fondo blanco espacial, holográfico pastel, rosa lightstick y lavanda. */

/* ---------- Colores y medidas ---------- */
:root {
  --fondo: #FBF9FF;
  --superficie: #FFFFFF;
  --tinta: #1D1433;
  --tinta-suave: #625A7C;
  --linea: #ECE6F7;
  --rosa: #FF3D9A;
  --rosa-texto: #C8136F;
  --rosa-fuerte: #DB1F7B; /* fondo de los botones con letra blanca (contraste 4,5:1); igual en modo oscuro */
  --rosa-suave: #FFE8F3;
  --lavanda: #8B6CFF;
  --lavanda-suave: #F1ECFF;
  --menta: #C8F5B4;
  --cielo: #B6E8FF;
  --melocoton: #FFE0B8;
  --hueco: #EFEAF8;
  --contorno-num: #1D1433;
  --holo: linear-gradient(120deg, #FFB3DA 0%, #C9B6FF 24%, #A9E4FF 48%, #C8F5B4 72%, #FFE0B3 100%);
  --radio: 16px;
  --ancho: 1240px;
  --fuente: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
  --fuente-display: "Bagel Fat One", "Pretendard Variable", system-ui, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #130D24;
    --superficie: #1C1533;
    --tinta: #F5F0FF;
    --tinta-suave: #ADA3C9;
    --linea: #2E2548;
    --rosa: #FF5FAE;
    --rosa-texto: #FF8CC6;
    --rosa-suave: #3A1A33;
    --lavanda: #A890FF;
    --lavanda-suave: #2A2150;
    --hueco: #241C3D;
    --contorno-num: #0E0A1C;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-synthesis: none; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
:focus-visible { outline: 3px solid var(--lavanda); outline-offset: 3px; border-radius: 8px; }

.contenedor { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }
.oculto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--tinta); color: var(--fondo); padding: 10px 16px; border-radius: 10px;
  font-weight: 700; text-decoration: none;
}
.saltar:focus { top: 12px; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--fondo) 80%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--linea) 70%, transparent);
}
.cabecera__fila { display: flex; align-items: center; gap: 20px; height: 64px; }
.marca {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  text-decoration: none; font-family: var(--fuente-display); font-weight: 800;
  font-size: 1.15rem; letter-spacing: 0;
}
.marca__icono { width: 34px; height: 34px; flex-shrink: 0; }
.menu { display: flex; gap: 2px; margin-left: 12px; }
.menu a {
  text-decoration: none; padding: 8px 13px; border-radius: 999px;
  font-weight: 650; font-size: .95rem; color: var(--tinta-suave);
}
.menu a:hover { color: var(--tinta); background: var(--lavanda-suave); }
.menu a[aria-current] { color: var(--tinta); background: var(--rosa-suave); }
/* Selector de idioma */
.idiomas { position: relative; margin-left: auto; }
.idiomas summary {
  display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
  padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--linea);
  font-weight: 750; font-size: .86rem; color: var(--tinta);
}
.idiomas summary::-webkit-details-marker { display: none; }
.idiomas summary:hover, .idiomas[open] summary { border-color: var(--lavanda); }
.idiomas ul {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 170px;
  list-style: none; margin: 0; padding: 6px;
  background: var(--superficie); border: 1.5px solid var(--linea); border-radius: 14px;
  box-shadow: 0 18px 40px -20px rgba(29, 20, 51, .45);
}
.idiomas a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-weight: 650; }
.idiomas a:hover { background: var(--lavanda-suave); }
.idiomas a[aria-current="true"] { background: var(--rosa-suave); color: var(--rosa-texto); }

.sin-corte { white-space: nowrap; }

/* Coreano y japonés: sin cortar palabras y con algo más de aire en los titulares */
:lang(ko) { word-break: keep-all; }
:lang(ja) { line-break: strict; word-break: auto-phrase; }
:lang(ko) h1, :lang(ja) h1 { letter-spacing: 0; line-height: 1.2; }
:lang(ja) h1 { font-size: clamp(1.9rem, 1rem + 3.6vw, 3.4rem); }

.boton-tiktok {
  margin-left: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; background: var(--tinta); color: var(--fondo);
  text-decoration: none; font-weight: 700; font-size: .9rem;
}
.boton-tiktok svg { width: 18px; height: 18px; }
.boton-tiktok:hover { background: var(--rosa-fuerte); color: #fff; }

/* ---------- Portada ---------- */
.portada-fondo {
  position: relative; margin-top: -65px; padding-top: 65px; overflow: hidden;
  background:
    radial-gradient(38% 55% at 88% 28%, rgba(255, 179, 218, .55), transparent 70%),
    radial-gradient(30% 45% at 70% 88%, rgba(169, 228, 255, .5), transparent 70%),
    radial-gradient(26% 40% at 99% 92%, rgba(200, 245, 180, .5), transparent 70%),
    radial-gradient(40% 55% at 4% 0%, rgba(201, 182, 255, .38), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  .portada-fondo {
    background:
      radial-gradient(38% 55% at 88% 28%, rgba(255, 95, 174, .22), transparent 70%),
      radial-gradient(30% 45% at 70% 88%, rgba(120, 200, 255, .16), transparent 70%),
      radial-gradient(40% 55% at 4% 0%, rgba(168, 144, 255, .2), transparent 70%);
  }
}
.portada {
  display: grid; gap: 36px; align-items: center;
  padding: clamp(28px, 6vw, 64px) 0 clamp(36px, 5vw, 56px);
}
.portada > * { min-width: 0; }
.portada h1 {
  font-family: var(--fuente-display);
  font-size: clamp(2.1rem, 1rem + 4.2vw, 4rem);
  font-weight: 800; letter-spacing: 0; line-height: 1.02;
  max-width: 12ch; text-wrap: balance;
}
.pulso { width: min(520px, 100%); height: 30px; margin: 18px 0 16px; overflow: visible; }
.pulso path {
  fill: none; stroke: var(--rosa); stroke-width: 3; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: trazar 1.6s cubic-bezier(.65, 0, .25, 1) .2s forwards;
}
@keyframes trazar { to { stroke-dashoffset: 0; } }
.portada__sub { margin: 0 0 24px; max-width: 46ch; color: var(--tinta-suave); font-size: 1.08rem; }

.buscador {
  display: flex; align-items: center; gap: 4px; max-width: 540px;
  background: var(--superficie); border: 1.5px solid var(--linea); border-radius: 999px;
  padding: 6px 6px 6px 18px;
  box-shadow: 0 10px 30px -18px rgba(139, 108, 255, .55);
}
.buscador:focus-within { border-color: var(--lavanda); box-shadow: 0 0 0 4px var(--lavanda-suave); }
.buscador__lupa { width: 20px; height: 20px; color: var(--tinta-suave); flex-shrink: 0; }
.buscador input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  padding: 10px 8px; font-size: 1rem;
}
.buscador button {
  border: 0; border-radius: 999px; padding: 11px 22px;
  background: var(--rosa-fuerte); color: #fff; font-weight: 750;
}
.buscador button:hover { background: var(--rosa-texto); }
.buscador__ir { display: none; }
/* Móviles estrechos: el botón se queda en una lupa redonda para que quepa entero el texto del buscador */
@media (max-width: 480px) {
  .buscador { padding-left: 14px; }
  .buscador__lupa { display: none; }
  .buscador button { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; padding: 0; }
  .buscador__ir { display: block; }
  .buscador__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.sugerencias { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; }
.sugerencias__texto { font-size: .88rem; color: var(--tinta-suave); }
.sugerencias__lista { display: flex; flex-wrap: wrap; gap: 6px; }
.sugerencias__lista button {
  border: 0; border-radius: 999px; padding: 10px 15px; font-size: .86rem; font-weight: 700;
  color: #2A1D47; background: var(--rosa-suave);
}
.sugerencias__lista button:nth-child(4n + 2) { background: var(--lavanda-suave); }
.sugerencias__lista button:nth-child(4n + 3) { background: #E6F9DD; }
.sugerencias__lista button:nth-child(4n + 4) { background: #E3F5FF; }
.sugerencias__lista button:hover { outline: 2px solid var(--lavanda); }
@media (prefers-color-scheme: dark) {
  .sugerencias__lista button { color: var(--tinta); }
  .sugerencias__lista button:nth-child(4n + 3) { background: #1E3324; }
  .sugerencias__lista button:nth-child(4n + 4) { background: #182C3A; }
}

/* Podio de hoy en forma de photocards */
.portada__fotos { position: relative; min-height: 330px; }
.fotos { position: relative; width: 100%; height: 100%; min-height: 330px; }
.fotocard {
  --giro: 0deg; --x: 0px; --y: 0px; --rx: 0deg; --ry: 0deg;
  position: absolute; left: 50%; top: 50%; width: 178px;
  margin: -150px 0 0 -89px;
  display: block; text-decoration: none; color: var(--tinta);
  padding: 7px 7px 0; border-radius: 18px;
  background: var(--holo); background-size: 220% 220%;
  box-shadow: 0 22px 40px -22px rgba(57, 30, 110, .55), 0 2px 6px rgba(57, 30, 110, .12);
  transform: translate(var(--x), var(--y)) rotate(var(--giro)) perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .25s ease, box-shadow .25s ease, background-position .4s ease;
  animation: repartir .8s cubic-bezier(.2, .9, .25, 1.15) backwards;
}
.fotocard--1 { --giro: -3deg; --y: -6px; z-index: 3; animation-delay: .35s; }
.fotocard--2 { --giro: -12deg; --x: -118px; --y: 20px; z-index: 2; animation-delay: .5s; }
.fotocard--3 { --giro: 10deg; --x: 120px; --y: 26px; z-index: 1; animation-delay: .65s; }
@keyframes repartir {
  from { opacity: 0; transform: translate(0, 40px) rotate(0deg) scale(.92); }
}
.fotocard:hover, .fotocard:focus-visible {
  z-index: 4; background-position: 100% 100%;
  box-shadow: 0 30px 50px -24px rgba(57, 30, 110, .6), 0 2px 6px rgba(57, 30, 110, .12);
}
.fotocard__marco {
  display: block; position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 12px; background: var(--hueco);
}
.fotocard__marco img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.34); /* esconde las franjas negras de la miniatura de YouTube */
}
.fotocard__marco::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 45%, transparent 60%);
  background-size: 250% 100%; background-position: 120% 0; mix-blend-mode: soft-light;
  transition: background-position .6s ease;
}
.fotocard:hover .fotocard__marco::after { background-position: -20% 0; }
.fotocard__pie {
  display: block; padding: 8px 4px 9px; text-align: center;
  font-family: var(--fuente-display); font-weight: 700; font-size: .78rem; letter-spacing: 0;
  color: #2A1D47; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fotocard__puesto {
  position: absolute; top: -10px; left: -10px; z-index: 2;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--rosa-fuerte); color: #fff; border: 3px solid #fff;
  font-family: var(--fuente-display); font-weight: 900; font-size: 1.15rem;
  box-shadow: 0 6px 14px -6px rgba(200, 19, 111, .7);
}
.fotocard--2 .fotocard__puesto { background: #6A4BE8; }
.fotocard--3 .fotocard__puesto { background: #1878B0; left: auto; right: -10px; }

.pegatina { position: absolute; pointer-events: none; z-index: 5; }
.pegatina--brillo1 { width: 34px; top: 6%; right: 16%; fill: var(--rosa); animation: brillar 3.2s ease-in-out 1.4s infinite; }
.pegatina--brillo2 { width: 20px; bottom: 14%; left: 14%; fill: var(--lavanda); animation: brillar 3.2s ease-in-out 2.2s infinite; }
.pegatina--corazon { width: 30px; bottom: 6%; right: 22%; fill: #FF7EB8; transform: rotate(14deg); }
@keyframes brillar { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(.75) rotate(20deg); } }

@media (min-width: 960px) {
  .portada { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; }
  .portada__fotos, .fotos { min-height: 400px; }
  .fotocard { width: 206px; margin: -170px 0 0 -103px; }
  .fotocard--2 { --x: -138px; }
  .fotocard--3 { --x: 140px; }
}
@media (max-width: 520px) {
  .portada__fotos, .fotos { min-height: 270px; }
  .fotocard { width: 132px; margin: -116px 0 0 -66px; padding: 5px 5px 0; }
  .fotocard--2 { --x: -84px; --y: 16px; }
  .fotocard--3 { --x: 84px; --y: 20px; }
  .fotocard__pie { font-size: .68rem; padding: 6px 2px 7px; }
  .fotocard__puesto { width: 34px; height: 34px; font-size: .95rem; }
}

/* ---------- Cabeceras de sección ---------- */
.seccion-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 16px; }
.seccion-cabeza h2, .extra h2 {
  font-family: var(--fuente-display); font-weight: 800; font-size: 1.45rem; letter-spacing: 0;
}
.seccion-cabeza p { margin: 0; color: var(--tinta-suave); font-size: .92rem; }

/* ---------- Próximos comebacks: entradas de concierto ---------- */
.comebacks { padding: 12px 0 44px; }
.comebacks:not(.comebacks--pagina):not(:has(.ticket)) { display: none; }
.tickets {
  list-style: none; margin: 0 -16px; padding: 6px 16px 14px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(208px, 236px); gap: 16px; align-items: start;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  scrollbar-color: var(--linea) transparent;
}
.ticket {
  scroll-snap-align: start; display: flex; flex-direction: column;
  background: var(--superficie); border: 1.5px solid var(--linea); border-radius: var(--radio);
  transition: transform .2s ease, border-color .2s ease;
}
.ticket:hover { transform: translateY(-3px) rotate(-.6deg); border-color: var(--rosa); }
.ticket__enlace { display: block; text-decoration: none; color: inherit; }
.ticket__imagen { position: relative; display: block; aspect-ratio: 16 / 9; margin: 8px 8px 0; border-radius: 11px; overflow: hidden; background: var(--hueco); }
.ticket__imagen img { width: 100%; height: 100%; object-fit: cover; }
/* Imagen de un vídeo anterior del grupo (aún no hay teaser del comeback) */
.ticket__anterior {
  position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px;
  background: rgba(19, 13, 36, .78); color: #fff; font-size: .72rem; font-weight: 700;
}
.ticket__talon {
  position: relative; display: block; margin-top: 12px; padding: 12px 14px 14px;
  border-top: 2px dashed var(--linea);
}
.ticket__talon::before, .ticket__talon::after {
  content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--fondo); border: 1.5px solid var(--linea);
}
.ticket__talon::before { left: -10px; clip-path: inset(0 0 0 50%); }
.ticket__talon::after { right: -10px; clip-path: inset(0 50% 0 0); }
.ticket__artista { display: block; font-family: var(--fuente-display); font-weight: 800; font-size: .98rem; letter-spacing: 0; }
.ticket__cancion { display: block; margin-top: 2px; color: var(--tinta-suave); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket__pista {
  display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 999px;
  background: var(--rosa-suave); color: var(--rosa-texto); font-size: .76rem; font-weight: 750;
}
.ticket:nth-child(3n + 2) .ticket__pista { background: var(--lavanda-suave); color: #5B3FD6; }
.ticket:nth-child(3n + 3) .ticket__pista { background: #E3F5FF; color: #0F6A92; }
@media (prefers-color-scheme: dark) {
  .ticket:nth-child(3n + 2) .ticket__pista { color: var(--lavanda); }
  .ticket:nth-child(3n + 3) .ticket__pista { background: #182C3A; color: #8FD3F5; }
}
@media (min-width: 760px) { .tickets { margin-inline: 0; padding-inline: 0; } }

/* ---------- Controles del ranking ---------- */
.ranking { padding-top: 8px; }
.controles {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 24px; padding-bottom: 14px;
}
.pestanas {
  display: inline-flex; padding: 4px; border-radius: 999px;
  background: var(--superficie); border: 1.5px solid var(--linea);
}
.pestanas a {
  border-radius: 999px; padding: 10px 22px; text-decoration: none;
  font-weight: 750; font-size: 1rem; color: var(--tinta-suave);
}
.pestanas a[aria-current="page"] { background: var(--tinta); color: var(--fondo); }
.pestanas a:not([aria-current="page"]):hover { color: var(--tinta); }
.controles__izquierda { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.periodos {
  display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin-inline: -16px; padding: 2px 16px;
}
.periodos::-webkit-scrollbar { display: none; }
.periodos a {
  flex-shrink: 0; border: 1.5px solid var(--linea); background: var(--superficie); border-radius: 999px;
  padding: 9px 15px; font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums;
  color: var(--tinta-suave); text-decoration: none;
}
.periodos a:hover { color: var(--tinta); border-color: var(--tinta-suave); }
.periodos a[aria-current="page"] { border-color: var(--rosa); background: var(--rosa-suave); color: var(--rosa-texto); }
/* Mientras se busca, ninguna lista aparece marcada */
.ranking--buscando .pestanas a[aria-current="page"] { background: transparent; color: var(--tinta-suave); }
.ranking--buscando .periodos a[aria-current="page"] { border-color: var(--linea); background: var(--superficie); color: var(--tinta-suave); }
.periodos__separador { flex-shrink: 0; width: 1.5px; height: 22px; margin: 0 6px; background: var(--linea); }
@media (min-width: 760px) { .periodos { margin-inline: 0; padding-inline: 0; } }

.estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 22px; }
.estado p { margin: 0; color: var(--tinta-suave); font-size: .92rem; }
.estado__borrar {
  border: 0; background: none; padding: 10px 0; margin: -10px 0; color: var(--rosa-texto);
  font-weight: 700; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px;
}
.aviso-borrador {
  margin: -8px 0 24px; padding: 10px 14px; border-radius: 12px;
  background: var(--lavanda-suave); color: var(--tinta); font-size: .88rem;
}

/* ---------- Maqueta: ranking + lateral ---------- */
.maqueta { display: grid; gap: 40px; }
.maqueta__principal { min-width: 0; }
.lateral { display: none; }
@media (min-width: 1180px) {
  .maqueta { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; }
  .lateral { display: block; }
  .lateral__fijo { position: sticky; top: 88px; display: grid; gap: 20px; }
}

/* ---------- Rejilla de vídeos ---------- */
.rejilla {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 34px 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr));
}
.tarjeta { min-width: 0; }
.tarjeta > a { display: block; text-decoration: none; color: inherit; border-radius: var(--radio); }
.tarjeta__imagen {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: var(--radio); background: var(--hueco);
}
.tarjeta__imagen img {
  width: 100%; height: 100%; object-fit: cover; border-radius: var(--radio);
  background: var(--hueco);
}
.tarjeta__total {
  position: absolute; top: 8px; right: 8px;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(29, 20, 51, .78); color: #fff;
  font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.6;
}

/* Número del puesto: contorno grueso y sombra rosa, como una pegatina.
   Va junto al nombre y no sobre la miniatura, para no tapar el logo del canal que llevan muchas */
.tarjeta__cabeza { display: flex; align-items: center; gap: 9px; min-width: 0; margin-bottom: 4px; }
.tarjeta__puesto {
  flex-shrink: 0; margin-left: 3px;
  font-family: var(--fuente-display); font-weight: 900; font-size: 1.85rem; line-height: 1;
  letter-spacing: 0; color: #fff;
  -webkit-text-stroke: 6px var(--contorno-num); paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--rosa);
}
.tarjeta__texto { display: block; padding: 12px 2px 0; }
.tarjeta__artista {
  display: block; min-width: 0; font-weight: 780; font-size: 1rem; letter-spacing: -0.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tarjeta__titulo {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 2px; color: var(--tinta-suave); font-size: .875rem; line-height: 1.42; font-weight: 600;
}
.tarjeta__datos {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  margin-top: 8px; color: var(--tinta-suave); font-size: .82rem;
}
.sube { color: var(--rosa-texto); font-weight: 780; font-variant-numeric: tabular-nums; }
/* Tipo de fancam (Fancam, Full cam, Relay dance…) delante de «canción · programa» */
.tipo-video {
  display: inline-block; margin-right: 2px; padding: 0 7px; border-radius: 999px; vertical-align: 1px;
  background: var(--lavanda-suave); color: #5B3FD6; font-size: .72rem; font-weight: 800; line-height: 1.6;
}
@media (prefers-color-scheme: dark) { .tipo-video { color: var(--lavanda); } }
/* «Ver 30 más» al final de la lista */
.boton.ver-mas { display: flex; margin: 30px auto 0; padding: 12px 26px; font-size: 1rem; background: var(--superficie); }
.boton.ver-mas[hidden] { display: none; }
/* «¿Qué es una fancam?» bajo la entradilla de las listas de fancams */
.portada__guia { margin: -12px 0 20px; font-size: .95rem; }
.portada__guia a { color: var(--rosa-texto); font-weight: 700; text-underline-offset: 3px; }
/* Subidas y bajadas: como en los charts coreanos, subir en rojo y bajar en azul */
.mov { font-weight: 800; font-size: .8rem; font-variant-numeric: tabular-nums; }
.mov--sube { color: #D6243A; }
.mov--baja { color: #2563C9; }
.mov--nuevo { padding: 0 7px; border-radius: 999px; background: var(--lavanda-suave); color: #5B3FD6; font-size: .74rem; }
@media (prefers-color-scheme: dark) {
  .mov--sube { color: #FF7A8A; }
  .mov--baja { color: #8DB4FF; }
  .mov--nuevo { color: var(--lavanda); }
}
.tarjeta > a:hover .tarjeta__artista { text-decoration: underline; text-decoration-color: var(--rosa); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Podio: marco holográfico de photocard */
.tarjeta--podio .tarjeta__imagen {
  padding: 4px; background: var(--holo); background-size: 200% 100%;
  border-radius: calc(var(--radio) + 4px);
  transition: background-position .6s ease;
}
.tarjeta--podio .tarjeta__imagen img { border-radius: calc(var(--radio) - 2px); }
.tarjeta--podio > a:hover .tarjeta__imagen { background-position: 100% 0; }
.tarjeta--podio .tarjeta__puesto { text-shadow: 3px 3px 0 var(--lavanda); }
.tarjeta--podio.tarjeta--1 .tarjeta__puesto { text-shadow: 5px 5px 0 var(--rosa); }

/* Huecos mientras carga */
.tarjeta--hueco .tarjeta__imagen { animation: latido 1.4s ease-in-out infinite; }
.tarjeta--hueco::after {
  content: ""; display: block; height: 52px; margin-top: 18px; border-radius: 8px; width: 80%;
  background: linear-gradient(var(--hueco) 0 14px, transparent 14px 22px, var(--hueco) 22px 34px, transparent 34px);
}
@keyframes latido { 50% { opacity: .55; } }

/* El número 1 ocupa el doble */
@media (min-width: 640px) {
  .rejilla--ranking .tarjeta--1 { grid-column: span 2; grid-row: span 2; }
  .rejilla--ranking .tarjeta--1 .tarjeta__cabeza { gap: 14px; }
  .rejilla--ranking .tarjeta--1 .tarjeta__puesto { font-size: 3.6rem; margin-left: 5px; -webkit-text-stroke-width: 10px; }
  .rejilla--ranking .tarjeta--1 .tarjeta__texto { padding-top: 16px; padding-left: 4px; }
  .rejilla--ranking .tarjeta--1 .tarjeta__artista { font-family: var(--fuente-display); font-weight: 800; font-size: 1.5rem; letter-spacing: 0; }
  .rejilla--ranking .tarjeta--1 .tarjeta__titulo { font-size: 1rem; }
  .rejilla--ranking .tarjeta--1 .tarjeta__datos { font-size: .95rem; }
}

/* Móvil: filas tipo lista de éxitos */
@media (max-width: 639px) {
  .rejilla { gap: 18px; }
  .tarjeta:not(.tarjeta--1) > a,
  .rejilla--busqueda .tarjeta > a {
    display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 14px; align-items: start;
  }
  .tarjeta:not(.tarjeta--1) .tarjeta__texto,
  .rejilla--busqueda .tarjeta__texto { padding-top: 0; }
  .tarjeta:not(.tarjeta--1) .tarjeta__cabeza { gap: 7px; }
  .tarjeta:not(.tarjeta--1) .tarjeta__puesto { font-size: 1.5rem; -webkit-text-stroke-width: 5px; }
  .tarjeta__titulo { -webkit-line-clamp: 3; }
  .tarjeta__total { font-size: .7rem; padding: 1px 6px; }
  .rejilla--ranking .tarjeta--1 .tarjeta__cabeza { gap: 12px; }
  .rejilla--ranking .tarjeta--1 .tarjeta__puesto { font-size: 2.6rem; -webkit-text-stroke-width: 8px; }
  .rejilla--ranking .tarjeta--1 .tarjeta__texto { padding-top: 14px; }
  .rejilla--ranking .tarjeta--1 .tarjeta__artista { font-family: var(--fuente-display); font-size: 1.25rem; letter-spacing: 0; }
  .tarjeta--hueco:not(.tarjeta--1)::after { display: none; }
}

/* ---------- Publicidad ---------- */
/* Hasta que AdSense apruebe la web, los huecos no se enseñan: vacíos, la web parece a medio hacer.
   Cuando haya anuncios, poner class="con-anuncios" en <body>. */
body:not(.con-anuncios) .anuncio { display: none; }
.anuncio {
  display: grid; place-items: center; min-height: 110px;
  border: 1.5px dashed var(--linea); border-radius: var(--radio);
  color: var(--tinta-suave); font-size: .78rem;
}
.rejilla > .anuncio { grid-column: 1 / -1; }
.anuncio--lateral { min-height: 600px; }

/* ---------- Estado vacío ---------- */
.vacio {
  padding: 40px 24px; border-radius: var(--radio); border: 1.5px dashed var(--linea);
  background: var(--superficie); text-align: center;
}
.vacio h3 { font-family: var(--fuente-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0; margin-bottom: 8px; }
.vacio p { margin: 0 auto; max-width: 52ch; color: var(--tinta-suave); }

/* ---------- Promo TikTok ---------- */
.promo {
  position: relative; overflow: hidden; padding: 22px; border-radius: var(--radio);
  background: var(--tinta); color: var(--fondo);
}
.promo::before {
  content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -70px; border-radius: 50%;
  background: var(--holo); opacity: .55; filter: blur(8px);
}
.promo > * { position: relative; }
.promo__titulo { margin: 0 0 6px; font-family: var(--fuente-display); font-weight: 800; font-size: 1.05rem; line-height: 1.25; letter-spacing: 0; }
.promo p { margin: 0 0 14px; font-size: .92rem; opacity: .88; }
.promo__boton {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  background: var(--rosa-fuerte); color: #fff; font-weight: 750; font-size: .9rem; text-decoration: none;
}
.promo__boton:hover { background: #fff; color: var(--rosa-texto); }
.promo--banda { margin-top: 40px; }
@media (min-width: 1180px) { .promo--banda { display: none; } }

/* ---------- Explicación y próximamente ---------- */
.extra {
  display: grid; gap: 40px; margin-top: 72px; padding: 48px 0 8px; border-top: 1.5px solid var(--linea);
}
.extra h2 { margin-bottom: 14px; }
.explicacion p { margin: 0 0 14px; max-width: 64ch; color: var(--tinta-suave); }
.explicacion p:first-of-type { color: var(--tinta); font-size: 1.08rem; }
.proximamente { display: grid; gap: 32px; align-content: start; }
.proximamente p { margin: 0; color: var(--tinta-suave); }
.lista-guias { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-guias li {
  padding: 12px 16px; border-radius: 12px; background: var(--superficie);
  border: 1.5px solid var(--linea); font-weight: 650;
}
.pronto {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  padding: 2px 9px; border-radius: 999px; background: var(--rosa-suave); color: var(--rosa-texto);
  font-family: var(--fuente); font-size: .72rem; font-weight: 750; letter-spacing: 0;
}
@media (min-width: 900px) { .extra { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; } }

/* ---------- Pie ---------- */
.pie { margin-top: 72px; padding: 48px 0 32px; background: var(--superficie); border-top: 1.5px solid var(--linea); }
.pie__rejilla { display: grid; gap: 32px; }
.pie__marca p { margin: 12px 0 0; color: var(--tinta-suave); max-width: 36ch; }
.pie h2 { font-size: .95rem; margin-bottom: 10px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; color: var(--tinta-suave); }
.pie ul a { display: inline-block; padding: 8px 0; text-decoration: none; }
.pie ul a:hover { color: var(--tinta); text-decoration: underline; }
.pie__nota {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--linea);
  font-size: .82rem; color: var(--tinta-suave);
}
.pie__nota p { margin: 0 0 6px; max-width: 90ch; }
@media (min-width: 760px) { .pie__rejilla { grid-template-columns: 2fr 1fr 1fr; } }

/* ---------- Reproductor ---------- */
.reproductor {
  width: min(100% - 24px, 960px); max-width: none; max-height: calc(100dvh - 24px);
  padding: 0; border: 0; background: transparent; color: var(--tinta); overflow: visible;
}
.reproductor::backdrop { background: rgba(19, 13, 36, .82); }
.reproductor[open] .reproductor__marco { animation: abrir .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes abrir { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.reproductor__marco {
  background: var(--superficie); border-radius: 20px; overflow: hidden;
  max-height: calc(100dvh - 24px); overflow-y: auto;
}
.reproductor__barra { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; }
.reproductor__puesto { margin: 0; flex: 1; font-weight: 750; font-size: .9rem; color: var(--rosa-texto); }
.reproductor__cerrar {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--fondo);
}
.reproductor__cerrar svg { width: 22px; height: 22px; }
.reproductor__cerrar:hover { background: var(--rosa-suave); }
.reproductor__video { aspect-ratio: 16 / 9; background: #000; }
.reproductor__video iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Aviso antes de cargar el reproductor de YouTube */
.rep-aviso {
  position: relative; display: grid; place-items: center; min-height: 100%;
  padding: 20px; overflow: hidden; color: #fff; text-align: center;
}
.rep-aviso__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.rep-aviso__caja { position: relative; max-width: 48ch; }
.rep-aviso__caja p { margin: 0 0 16px; font-weight: 600; line-height: 1.5; text-wrap: pretty; }
.rep-aviso__botones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; }
.rep-aviso__botones a { color: #fff; font-weight: 700; font-size: .92rem; text-underline-offset: 3px; }
@media (max-width: 520px) {
  .rep-aviso { padding: 14px; }
  .rep-aviso__caja p { margin-bottom: 12px; font-size: .9rem; }
}
.reproductor__info { padding: 18px 20px 22px; }
.reproductor__artista { margin: 0 0 2px; font-family: var(--fuente-display); font-weight: 800; font-size: 1.2rem; letter-spacing: 0; }
.reproductor__titulo { font-size: 1rem; font-weight: 500; color: var(--tinta-suave); line-height: 1.45; }
.reproductor__datos { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 16px; font-size: .9rem; color: var(--tinta-suave); }
.reproductor__datos strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.reproductor__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.reproductor__nav { display: inline-flex; gap: 8px; margin-left: auto; }
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--linea);
  background: transparent; font-weight: 700; font-size: .92rem; text-decoration: none;
}
.boton:hover:not(:disabled) { border-color: var(--tinta); }
.boton:disabled { opacity: .4; cursor: default; }
.boton--oscuro { background: var(--rosa-fuerte); border-color: var(--rosa-fuerte); color: #fff; }
.boton--oscuro:hover { background: var(--rosa-texto); border-color: var(--rosa-texto); color: #fff; }

/* ---------- Metas a la vista ---------- */
.metas { margin-top: 64px; }
.metas__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.meta > a {
  display: grid; gap: 8px; height: 100%; padding: 16px 18px; text-decoration: none; color: inherit;
  background: var(--superficie); border: 1.5px solid var(--linea); border-radius: var(--radio);
}
.meta > a:hover { border-color: var(--rosa); }
.meta__texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta-suave); }
.meta__texto strong { color: var(--tinta); font-weight: 800; }
.meta__barra { display: block; height: 10px; border-radius: 999px; background: var(--hueco); overflow: hidden; }
.meta__barra span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rosa), var(--lavanda)); }
.meta__cifras { display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.meta__cifras strong { color: var(--tinta); }
.meta__eta { font-size: .86rem; font-weight: 700; color: var(--rosa-texto); }
.meta__eta--semana { font-weight: 600; color: var(--tinta-suave); }

/* Página /metas/ */
.metaspag { margin-top: 8px; }
/* min-height: el sitio de los botones antes de que los pinte app.js, para que la lista que ya trae el HTML
   (prerender.php) no salte hacia abajo al aparecer */
.metas__filtros {
  display: flex; gap: 8px; margin: 0 0 20px; padding-bottom: 4px; min-height: calc(.95rem * 1.55 + 24px);
  overflow-x: auto; scrollbar-width: thin;
}
.metas__filtros button {
  flex: none; padding: 9px 18px; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 750; font-size: .95rem; color: var(--tinta-suave);
  background: var(--superficie); border: 1.5px solid var(--linea);
}
.metas__filtros button:hover { color: var(--tinta); }
.metas__filtros button[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }

/* ---------- Mis idols ---------- */
.tarjeta { position: relative; }
.corazon {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #1D1433; /* fondo siempre blanco: tinta oscura también en modo oscuro */
  box-shadow: 0 4px 12px -4px rgba(29, 20, 51, .45);
}
/* Zona de toque de 44 px aunque el círculo se vea de 34: así no se abre el vídeo sin querer */
.corazon::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.corazon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.corazon:hover { color: #C8136F; }
.corazon[aria-pressed="true"] { background: var(--rosa); color: #fff; }
.corazon[aria-pressed="true"] svg { fill: currentColor; }
.corazon--latido { animation: latir .35s ease; }
@keyframes latir { 50% { transform: scale(1.28); } }
.tarjeta--podio .corazon { top: 12px; left: 12px; }

.chip-favs {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--linea); background: var(--superficie); border-radius: 999px;
  padding: 9px 15px; font-weight: 750; font-size: .95rem; color: var(--tinta-suave);
}
.chip-favs svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.chip-favs:hover { color: var(--rosa-texto); border-color: var(--rosa); }
.chip-favs[aria-pressed="true"] { background: var(--rosa-fuerte); border-color: var(--rosa-fuerte); color: #fff; }
.chip-favs[aria-pressed="true"] svg { fill: currentColor; }
.chip-favs__n {
  min-width: 22px; padding: 0 6px; border-radius: 999px; text-align: center;
  background: var(--rosa-suave); color: var(--rosa-texto); font-size: .8rem; line-height: 1.6;
}
.chip-favs[aria-pressed="true"] .chip-favs__n { background: rgba(255, 255, 255, .25); color: #fff; }

.mis-idols { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.mis-idols__texto { color: var(--tinta-suave); font-size: .9rem; margin-right: 2px; }
.mis-idols button {
  display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px;
  padding: 9px 10px 9px 14px; background: var(--rosa-suave); color: var(--rosa-texto); font-weight: 750; font-size: .88rem;
}
.mis-idols button span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(200, 19, 111, .14); font-size: .8rem; }
.mis-idols button:hover span { background: var(--rosa-fuerte); color: #fff; }

.aviso-flotante {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: calc(100% - 32px);
  padding: 11px 18px; border-radius: 999px; background: var(--tinta); color: var(--fondo);
  font-weight: 650; font-size: .92rem; box-shadow: 0 14px 30px -12px rgba(29, 20, 51, .6);
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.aviso-flotante--visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Comebacks: fecha, cuenta atrás y horas ---------- */
.seccion-cabeza .ver-todos {
  margin: -10px 0 -10px auto; padding: 10px 0; color: var(--rosa-texto); font-weight: 750; font-size: .92rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.ticket__sinimagen {
  display: grid; place-items: center; width: 100%; height: 100%; padding: 12px; text-align: center;
  background: var(--holo); color: #2A1D47;
  font-family: var(--fuente-display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0; line-height: 1.1;
}
.ticket__disco { display: block; margin-top: 2px; color: var(--tinta-suave); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket__cuando { padding: 0 14px 14px; }
.ticket__fecha { margin: 0; font-size: .86rem; color: var(--tinta-suave); }
.ticket__fecha strong { color: var(--tinta); font-weight: 750; }
.ticket__cuenta {
  display: inline-block; margin: 8px 0 0; padding: 3px 10px; border-radius: 999px;
  background: var(--rosa-fuerte); color: #fff; font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.ticket__cuenta--ya { background: #13805A; }
.ticket__horas { margin-top: 0; font-size: .82rem; }
.ticket__horas summary { padding: 10px 0; cursor: pointer; color: var(--rosa-texto); font-weight: 700; list-style-position: inside; }
.ticket__horas ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.ticket__horas li { display: flex; justify-content: space-between; gap: 10px; color: var(--tinta-suave); }
.ticket__horas li span:last-child { color: var(--tinta); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticket--favorito { border-color: var(--rosa); box-shadow: 0 0 0 3px var(--rosa-suave); }
.ticket__sigues {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle;
  color: var(--rosa-texto); font-family: var(--fuente); font-size: .72rem; font-weight: 800; letter-spacing: 0;
}
.tickets--rejilla {
  grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  overflow: visible; margin-inline: 0; padding-inline: 0;
  align-items: stretch; /* las entradas de una fila, todas igual de altas */
}
/* Página de comebacks: grupos por fecha (hoy, próximos 7 días, más adelante, sin fecha, recién salidos) */
.cb-grupo + .cb-grupo { margin-top: 32px; }
.cb-grupo__titulo {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-family: var(--fuente-display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0;
}
.cb-grupo__n {
  min-width: 26px; padding: 1px 8px; border-radius: 999px; text-align: center;
  background: var(--rosa-suave); color: var(--rosa-texto); font-family: var(--fuente); font-size: .8rem; font-weight: 800;
}
/* «Añadir al calendario»: un botón que abre dos opciones */
.ticket__calendario { margin-top: 10px; }
.ticket__calendario summary {
  display: inline-flex; align-items: center; gap: 7px; list-style: none; cursor: pointer;
  padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--superficie);
  font-size: .82rem; font-weight: 750; color: var(--tinta);
}
.ticket__calendario summary::-webkit-details-marker { display: none; }
.ticket__calendario summary:hover, .ticket__calendario[open] summary { border-color: var(--rosa); color: var(--rosa-texto); }
.ticket__calendario summary svg { width: 17px; height: 17px; flex-shrink: 0; }
.ticket__calendario-opciones { display: grid; gap: 6px; margin-top: 8px; }
.ticket__calendario-opciones a, .ticket__calendario-opciones button {
  display: block; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px;
  background: var(--lavanda-suave); color: var(--tinta); font-size: .84rem; font-weight: 700; text-align: left; text-decoration: none;
}
.ticket__calendario-opciones a:hover, .ticket__calendario-opciones button:hover { background: var(--rosa-suave); color: var(--rosa-texto); }
/* Móvil: cada comeback en una fila compacta (foto pequeña a la izquierda) y la fecha en el talón, tras la línea de corte */
@media (max-width: 639px) {
  .tickets--rejilla { gap: 12px; }
  .tickets--rejilla .ticket__enlace {
    display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 12px 0 8px;
  }
  .tickets--rejilla .ticket__imagen { margin: 0; }
  .tickets--rejilla .ticket__talon { margin: 0; padding: 0; border-top: 0; }
  .tickets--rejilla .ticket__talon::before, .tickets--rejilla .ticket__talon::after { display: none; }
  .tickets--rejilla .ticket__cuando { position: relative; margin-top: 10px; padding: 10px 14px 4px; border-top: 2px dashed var(--linea); }
  .tickets--rejilla .ticket__cuando::before, .tickets--rejilla .ticket__cuando::after {
    content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--fondo); border: 1.5px solid var(--linea);
  }
  .tickets--rejilla .ticket__cuando::before { left: -10px; clip-path: inset(0 0 0 50%); }
  .tickets--rejilla .ticket__cuando::after { right: -10px; clip-path: inset(0 50% 0 0); }
  .tickets--rejilla .ticket__pista { margin-top: 0; }
}
/* Calendario mensual de comebacks */
.cb-vista { display: inline-flex; gap: 4px; margin: 0 0 18px; padding: 4px; border-radius: 999px; background: var(--lavanda-suave); }
.cb-vista[hidden] { display: none; }
.cb-vista__boton {
  border: 0; border-radius: 999px; padding: 10px 18px; min-height: 40px; background: transparent;
  color: var(--tinta-suave); font-weight: 750; font-size: .92rem;
}
.cb-vista__boton:hover { color: var(--rosa-texto); }
.cb-vista__boton[aria-pressed="true"] { background: var(--rosa-fuerte); color: #fff; }
.cb-mes__cabeza { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cb-mes__titulo {
  flex: 1; margin: 0; text-align: center;
  font-family: var(--fuente-display); font-weight: 800; font-size: 1.25rem; letter-spacing: 0;
}
.cb-mes__titulo::first-letter { text-transform: uppercase; }
.cb-mes__flecha {
  display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--linea); border-radius: 50%;
  background: var(--superficie); color: var(--tinta); font-size: 1.5rem; line-height: 1;
}
.cb-mes__flecha:hover:not(:disabled) { border-color: var(--rosa); color: var(--rosa-texto); }
.cb-mes__flecha:disabled { opacity: .35; cursor: default; }
.cb-mes__hoy {
  min-height: 40px; padding: 0 14px; border: 1.5px solid var(--linea); border-radius: 999px; background: var(--superficie);
  color: var(--rosa-texto); font-weight: 750; font-size: .88rem;
}
.cb-mes__hoy[hidden] { display: none; }
.cb-mes__rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cb-mes__sem { padding: 4px 0; text-align: center; color: var(--tinta-suave); font-size: .8rem; font-weight: 750; }
.cb-mes__dia {
  display: flex; flex-direction: column; gap: 4px; min-height: 92px; padding: 7px 7px 6px; border-radius: 12px;
  background: var(--superficie); border: 1.5px solid var(--linea); color: var(--tinta); text-decoration: none; min-width: 0;
}
.cb-mes__dia--fuera { background: transparent; border-color: transparent; }
.cb-mes__num { font-weight: 750; font-size: .86rem; color: var(--tinta-suave); }
.cb-mes__dia--hoy { border-color: var(--rosa-fuerte); box-shadow: 0 0 0 2px var(--rosa-suave); }
.cb-mes__dia--hoy .cb-mes__num { color: var(--rosa-texto); }
.cb-mes__dia--con { background: var(--lavanda-suave); }
a.cb-mes__dia:hover, a.cb-mes__dia:focus-visible { border-color: var(--rosa); }
.cb-mes__dia--pasado { background: var(--superficie); opacity: .62; }
.cb-mes__dia--pasado .cb-mes__chip { background: var(--lavanda-suave); color: var(--tinta-suave); }
.cb-mes__chips { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cb-mes__chip {
  display: block; padding: 2px 7px; border-radius: 999px; background: var(--rosa-suave); color: var(--rosa-texto);
  font-size: .72rem; font-weight: 750; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cb-mes__chip--fav { background: var(--rosa-fuerte); color: #fff; }
.cb-mes__mas { color: var(--tinta-suave); font-size: .72rem; font-weight: 750; padding-left: 4px; }
.cb-mes__n { display: none; }
.cb-mes__nota { margin: 14px 0 6px; color: var(--tinta-suave); font-size: .85rem; }
.cb-mes__resumen { margin: 14px 0 20px; font-weight: 750; }
.cb-mes .cb-grupo { scroll-margin-top: 90px; }
@media (max-width: 639px) {
  .cb-mes__rejilla { gap: 4px; }
  .cb-mes__dia { min-height: 54px; align-items: center; padding: 6px 2px; border-radius: 10px; }
  .cb-mes__chips { display: none; }
  .cb-mes__n {
    display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px;
    background: var(--rosa-fuerte); color: #fff; font-size: .75rem; font-weight: 800;
  }
  .cb-mes__titulo { font-size: 1.1rem; }
}
/* Calendario en texto (lo escribe prerender.php: lo lee Google y sirve sin JavaScript) */
.cb-texto { padding-top: 40px; }
.cb-texto h2 { margin: 0 0 6px; font-family: var(--fuente-display); font-weight: 800; font-size: 1.35rem; letter-spacing: 0; }
.cb-texto__sub { margin: 0 0 18px; color: var(--tinta-suave); font-size: .92rem; max-width: 70ch; }
.cb-texto__meses { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.cb-texto__mes { padding: 16px 18px; border-radius: 16px; border: 1.5px solid var(--linea); background: var(--superficie); }
.cb-texto__mes h3 { margin: 0 0 10px; font-family: var(--fuente-display); font-weight: 800; font-size: 1.1rem; letter-spacing: 0; }
.cb-texto__mes p { margin: 0; color: var(--tinta-suave); font-size: .9rem; }
.cb-texto__lista { list-style: none; margin: 0; padding: 0; }
.cb-texto__lista li {
  display: grid; grid-template-columns: 5.6em minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid var(--linea); font-size: .9rem;
}
.cb-texto__lista li:first-child { border-top: 0; }
.cb-texto__lista time { color: var(--tinta-suave); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-texto__lista strong { font-weight: 800; }
.cb-texto__obra { grid-column: 2; color: var(--tinta-suave); font-size: .84rem; overflow-wrap: anywhere; }
.cb-texto__hora { grid-column: 3; grid-row: 1; color: var(--tinta-suave); font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cb-texto__mes h3 a { color: inherit; text-decoration-color: var(--rosa); text-underline-offset: 4px; }
.cb-texto__mes h3 a:hover { color: var(--rosa-texto); }
.cb-texto__todos { margin-top: 22px; }
.cb-texto__todos h3 { margin: 0 0 10px; font-size: 1rem; font-weight: 800; }
.cb-texto__todos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cb-texto__todos ul:empty { display: none; }
.cb-texto__todos a {
  display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--superficie);
  color: var(--tinta); font-weight: 700; font-size: .88rem; text-decoration: none;
}
.cb-texto__todos a:hover { border-color: var(--rosa); color: var(--rosa-texto); }

/* Artículos: resumen «en 30 segundos» y tarjetas de MV (formato fijo de los artículos) */
.guia-clave {
  margin: 0 0 28px; padding: 16px 20px; border-radius: 16px;
  background: var(--lavanda-suave); border: 1.5px solid var(--linea);
}
.guia-clave__titulo { margin: 0 0 8px; font-family: var(--fuente-display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0; }
.guia-clave ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.guia-clave li { margin: 0; }
.guia-mvs { margin: 22px 0 28px; }
.guia-mvs h3 { margin: 0 0 12px; }
.guia-mvs__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}
.guia-mvs__lista li { margin: 0; }
/* Una tarjeta sola (el MV de un estreno) sale más grande, en vez de ocupar una columna estrecha */
.guia-mvs__lista:has(> li:only-child) { grid-template-columns: minmax(0, 420px); }
.guia-mvs__lista > li:only-child .guia-mv__texto strong { font-size: 1.05rem; }
@media (max-width: 639px) { .guia-mv__play { width: 38px; height: 38px; margin: -19px 0 0 -19px; } .guia-mv__play::after { left: 15px; top: 11px; border-width: 8px 0 8px 12px; } }
.guia-mv { display: block; color: inherit; text-decoration: none; }
.guia-mv__imagen {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px;
  background: var(--holo); box-shadow: 0 10px 24px -16px rgba(29, 20, 51, .55);
}
.guia-mv__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.guia-mv:hover .guia-mv__imagen img, .guia-mv:focus-visible .guia-mv__imagen img { transform: scale(1.04); }
.guia-mv__play {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45);
}
.guia-mv__play::after {
  content: ""; position: absolute; left: 18px; top: 14px;
  border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--rosa-fuerte);
}
.guia-mv__texto { display: block; padding: 8px 2px 0; line-height: 1.35; }
.guia-mv__texto strong { display: block; font-weight: 800; }
.guia-mv__texto span { color: var(--tinta-suave); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .guia-mv__imagen img { transition: none; } }

/* Ranking semanal de un artículo (los MV más vistos del año): tabla de puestos y un apartado por vídeo */
.guia .mv-tabla { margin: 8px 0 10px; }
.guia .mv-tabla th[scope="row"] { font-weight: 500; }
.guia .mv-tabla th[scope="row"] a { color: var(--tinta); text-decoration: none; }
.guia .mv-tabla th[scope="row"] a:hover span, .guia .mv-tabla th[scope="row"] a:focus-visible span { color: var(--rosa-texto); text-decoration: underline; text-underline-offset: 3px; }
.guia .mv-tabla th[scope="row"] strong { font-weight: 800; }
.guia .mv-tabla th[scope="row"] span { color: var(--tinta-suave); }
.guia .mv-tabla__n { width: 3.2em; font-family: var(--fuente-display); font-weight: 800; color: var(--tinta); white-space: nowrap; }
.guia .mv-tabla__num { text-align: right; padding-right: 14px; font-variant-numeric: tabular-nums; color: var(--tinta); font-weight: 700; white-space: nowrap; }
.guia .mv-tabla thead th:nth-child(3), .guia .mv-tabla thead th:nth-child(5) { text-align: right; padding-right: 14px; }
.guia .mv-tabla__fecha { white-space: nowrap; }
/* Subidas y bajadas de puesto: las mismas marcas que el ranking (.mov), con la letra del texto */
.guia .mov { font-family: var(--fuente); vertical-align: 2px; }
.guia .mv-nota { margin: 0 0 26px; color: var(--tinta-suave); font-size: .84rem; line-height: 1.5; }
@media (max-width: 560px) {
  /* Móvil: puesto a la izquierda, nombre arriba y las tres cifras debajo con su título */
  .guia .mv-tabla tr { grid-template-columns: 2.4em repeat(3, minmax(0, 1fr)); column-gap: 10px; row-gap: 6px; }
  .guia .mv-tabla__n { grid-row: span 2; width: auto; font-size: 1.15rem; }
  .guia .mv-tabla th[scope="row"] { grid-column: 2 / -1; padding: 0; border: 0; }
  .guia .mv-tabla td[data-titulo] { text-align: left; padding: 0; font-size: .86rem; white-space: normal; }
}
.guia-ranking .mv-puesto { margin: 0 0 22px; padding: 18px 18px 6px; border: 1.5px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.mv-puesto h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.mv-puesto__n {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--holo); color: #1D1433; font-family: var(--fuente-display); font-size: 1.2rem; font-weight: 800;
}
.mv-puesto__cancion { color: var(--tinta-suave); font-weight: 700; }
.mv-puesto__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 14px; }
/* Visualizaciones y fecha a lo ancho; las dos cifras calculadas, una al lado de otra */
.mv-puesto .mv-puesto__cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: auto; }
.mv-puesto .mv-puesto__cifras > div { min-width: 0; padding: 8px 12px; background: var(--lavanda-suave); border-color: transparent; }
.mv-puesto .mv-puesto__cifras > div:nth-child(-n+2) { grid-column: 1 / -1; }
.mv-puesto .mv-puesto__cifras dd { font-size: 1.05rem; overflow-wrap: anywhere; }
@media (max-width: 560px) { .mv-puesto__cuerpo { grid-template-columns: 1fr; } .guia-ranking .mv-puesto { padding: 14px 14px 4px; } }

/* Enlace al artículo de un comeback (en los calendarios) y artículos en la ficha de un artista */
.cb-articulo {
  display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; vertical-align: 1px;
  background: var(--rosa-suave); color: var(--rosa-texto); font-size: .76rem; font-weight: 800; text-decoration: none;
}
.cb-articulo:hover { background: var(--rosa-fuerte); color: #fff; }
.grupo-articulos { margin-top: 8px; margin-bottom: 8px; }
.grupo-articulos h2 { margin: 0 0 12px; font-family: var(--fuente-display); font-weight: 800; font-size: 1.2rem; letter-spacing: 0; }

/* Página de un mes de comebacks (/comebacks/2026-11/): la lista la escribe prerender.php */
.cbm { padding-top: 8px; }
.cbm__resumen { margin: 0 0 22px; font-size: 1.05rem; max-width: 70ch; }
.cbm__dia { margin-bottom: 18px; padding: 14px 18px 8px; border-radius: 16px; border: 1.5px solid var(--linea); background: var(--superficie); }
.cbm__dia h2 { margin: 0 0 6px; font-family: var(--fuente-display); font-weight: 800; font-size: 1.12rem; letter-spacing: 0; }
.cbm__dia ul { list-style: none; margin: 0; padding: 0; }
.cbm__dia li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--linea);
}
.cbm__dia li:first-child { border-top: 0; }
.cbm__dia strong { font-weight: 800; }
.cbm__dia strong a { color: inherit; text-decoration-color: var(--rosa); text-underline-offset: 3px; }
.cbm__dia strong a:hover { color: var(--rosa-texto); }
.cbm__obra { grid-column: 1; color: var(--tinta-suave); font-size: .9rem; overflow-wrap: anywhere; }
.cbm__hora { grid-column: 2; grid-row: 1; color: var(--tinta-suave); font-size: .84rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cbm__nota { margin: 18px 0 14px; color: var(--tinta-suave); font-size: .88rem; max-width: 70ch; }
.cbm__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 26px; }
.cbm__nav a {
  padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--superficie);
  color: var(--tinta); font-weight: 750; text-decoration: none;
}
.cbm__nav a:hover { border-color: var(--rosa); color: var(--rosa-texto); }
.cbm__sig { margin-left: auto; }

/* Preguntas frecuentes de la portada (las responde prerender.php con los datos del día) */
.faq { margin-top: 56px; padding-top: 40px; padding-bottom: 8px; border-top: 1.5px solid var(--linea); }
.faq h2 { margin: 0 0 16px; font-family: var(--fuente-display); font-weight: 800; font-size: 1.35rem; letter-spacing: 0; }
.faq__lista { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.faq__item { padding: 16px 18px; border-radius: 16px; border: 1.5px solid var(--linea); background: var(--superficie); }
.faq__item h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 800; line-height: 1.35; }
.faq__item p { margin: 0; color: var(--tinta-suave); font-size: .92rem; line-height: 1.6; }
.faq__item a { color: var(--rosa-texto); font-weight: 700; text-underline-offset: 3px; }
.faq__lista:empty { display: none; }
.grupo-resumen { margin-top: 4px; margin-bottom: 8px; color: var(--tinta-suave); font-size: .95rem; line-height: 1.6; max-width: 80ch; }
.grupo-resumen:empty { display: none; }
.comebacks--pagina { padding-top: 8px; }
.comebacks--pagina .seccion-cabeza .chip-favs { margin-left: auto; }
.anuncio--banda { margin-top: 32px; min-height: 120px; }
.portada--compacta { grid-template-columns: 1fr !important; padding-bottom: 28px; }
.portada--compacta h1 { max-width: 18ch; }
/* ---------- Aviso de las estadísticas (cookies) ---------- */
.consentimiento {
  position: fixed; z-index: 70; left: 16px; bottom: 16px; width: min(420px, calc(100% - 32px));
  padding: 16px 18px; border-radius: 16px; background: var(--superficie); color: var(--tinta);
  border: 1.5px solid var(--linea); box-shadow: 0 18px 40px -18px rgba(29, 20, 51, .45);
}
.consentimiento__titulo { margin: 0 0 4px; font-weight: 800; }
.consentimiento__texto { margin: 0 0 14px; font-size: .92rem; color: var(--tinta-suave); line-height: 1.5; }
.consentimiento__texto a { color: var(--rosa-texto); }
.consentimiento__botones { display: flex; gap: 10px; }
.consentimiento__botones .boton { flex: 1; background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.consentimiento__botones .boton:hover { background: var(--rosa-texto); border-color: var(--rosa-texto); color: #fff; }
.legal .estado-analitica { font-weight: 700; color: var(--tinta); }
.legal .botones-legal { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Páginas legales ---------- */
.legal { padding-bottom: 32px; }
.legal > * { max-width: 70ch; }
.legal h2 { margin: 40px 0 12px; font-size: 1.35rem; }
.legal h2:first-child { margin-top: 8px; }
.legal h3 { margin: 24px 0 6px; font-size: 1.05rem; font-family: inherit; font-weight: 750; letter-spacing: 0; }
.legal p, .legal li { color: var(--tinta-suave); line-height: 1.65; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 1.2em; }
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--rosa); }
.legal strong { color: var(--tinta); }
.legal a { color: var(--rosa-texto); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal .traduccion { margin-bottom: 28px; padding: 12px 16px; border-radius: 12px; background: var(--lavanda-suave); color: var(--tinta); font-size: .94rem; }
.legal .tabla, .guia .tabla { max-width: 100%; overflow-x: auto; margin: 0 0 16px; }
.legal table, .guia table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .94rem; }
.legal th, .legal td, .guia th, .guia td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; border-bottom: 1.5px solid var(--linea); }
.legal th, .guia th { color: var(--tinta); font-weight: 750; }
.legal td, .guia td { color: var(--tinta-suave); }
.guia .tabla caption { caption-side: top; padding: 0 0 10px; text-align: left; color: var(--tinta-suave); font-size: .86rem; }
.legal code { font-size: .9em; font-weight: 700; color: var(--tinta); white-space: nowrap; }
.legal mark.pendiente { padding: 0 5px; border-radius: 4px; background: #FFE58A; color: #1D1433; font-weight: 700; }
/* En el móvil, cada fila de la tabla pasa a ser un bloque (sin desplazamiento lateral) */
@media (max-width: 560px) {
  .legal table, .guia table { min-width: 0; }
  .legal thead, .guia thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal tr, .guia tr { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1.5px solid var(--linea); }
  .legal td, .guia td { padding: 0; border: 0; }
  .legal td:last-child, .guia td:last-child { font-size: .88rem; }
  /* En las tablas de las guías, el nombre de la fila arriba y cada dato con su título («Edad», «Nacionalidad»…) */
  .guia .tabla th[scope="row"] { padding: 0; border: 0; }
  .guia .tabla td[data-titulo]::before { content: attr(data-titulo); display: block; color: var(--tinta-suave); font-size: .7rem; font-weight: 700; }
}

/* ---------- Sobre K-Pulso: con la cara de la marca (no la de una página legal) ---------- */
.sobre > .sobre__sello {
  display: grid; place-items: center; aspect-ratio: 16 / 5; max-width: 43rem; margin: 0 0 18px; padding: 12px;
  border-radius: var(--radio); background: var(--holo); background-size: 200% 100%; color: #2A1D47;
  font-family: var(--fuente-display); font-weight: 800; font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1; letter-spacing: 0;
}
.sobre__cifras { margin: 0 0 8px; }
@media (min-width: 640px) {
  .sobre .sobre__cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sobre .sobre__cifras > div { min-width: 0; }
}
.legal .sobre h2 { font-family: var(--fuente-display); font-weight: 800; letter-spacing: 0; }
/* «Qué encontrarás»: una tarjeta por sección; si solo lleva un enlace, se pulsa entera */
.legal .sobre__secciones {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.legal .sobre__secciones li {
  position: relative; margin: 0; padding: 14px 16px; line-height: 1.5;
  border: 1.5px solid var(--linea); border-radius: 14px; background: var(--superficie);
  transition: border-color .2s ease, transform .2s ease;
}
.legal .sobre__secciones li:has(> a:only-of-type):hover { border-color: var(--rosa); transform: translateY(-2px); }
.legal .sobre__secciones a, .legal .sobre__secciones strong {
  font-family: var(--fuente-display); font-weight: 800; letter-spacing: 0; color: var(--tinta); text-decoration: none;
}
.legal .sobre__secciones a:hover { color: var(--rosa-texto); }
.legal .sobre__secciones a:only-of-type::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
/* Tarjeta final: contacto y TikTok */
.sobre__tarjeta {
  position: relative; overflow: hidden; margin-top: 40px; padding: 20px 22px 8px 28px;
  border: 1.5px solid var(--linea); border-radius: var(--radio); background: var(--superficie);
}
.sobre__tarjeta::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 6px; background: var(--holo); }
.legal .sobre__tarjeta h2 { margin-top: 0; }
.legal .sobre__boton {
  display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px;
  background: var(--rosa-fuerte); color: #fff; font-weight: 750; text-decoration: none;
}
.legal .sobre__boton:hover { background: var(--rosa-texto); }

.atajos { display: flex; flex-wrap: wrap; gap: 10px; }
.atajos .boton { padding: 11px 20px; font-size: 1rem; background-color: var(--superficie); }
.atajos .boton--oscuro { background-color: var(--rosa-fuerte); }
.atajos .boton--oscuro:hover { background-color: var(--rosa-texto); }

/* ---------- Guías ---------- */
/* Texto de lectura: solo los hijos directos del artículo, para no tocar las tarjetas que lleva dentro */
/* Pretendard no tiene cursiva: aquí sí dejamos que el navegador la incline */
.guia { padding-bottom: 32px; font-synthesis: style; }
.guia > *, .guia > .tabla { max-width: 68ch; }
.guia td strong { color: var(--tinta); }
.guia__fecha { margin: 0 0 22px; color: var(--tinta-suave); font-size: .9rem; }
.guia__fecha a { color: var(--rosa-texto); font-weight: 700; text-underline-offset: 3px; }
/* Cabecera de cada guía: la misma palabra en coreano que en su tarjeta */
.guia > .guia__sello {
  display: grid; place-items: center; aspect-ratio: 16 / 5; max-width: 43rem; margin: 0 0 18px; padding: 12px;
  border-radius: var(--radio); background: var(--holo); background-size: 200% 100%; color: #2A1D47;
  font-family: var(--fuente-display); font-weight: 800; font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1; letter-spacing: 0;
}
/* «En esta guía»: en el móvil, atajos a cada apartado; en pantallas anchas, una columna a la derecha que acompaña al bajar */
.guia { position: relative; }
.guia__indice { margin: 0 0 28px; }
.guia__indice-fijo { padding: 14px 16px; border: 1.5px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.guia__indice-titulo { margin: 0 0 10px; font-weight: 800; font-size: .9rem; }
.guia__indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.guia__indice a {
  display: inline-block; padding: 9px 13px; border-radius: 999px; background: var(--lavanda-suave);
  color: var(--tinta); font-size: .86rem; font-weight: 700; text-decoration: none;
}
.guia__indice a:hover { background: var(--rosa-suave); color: var(--rosa-texto); }
@media (min-width: 1100px) {
  .guia:has(> .guia__indice) { padding-right: 290px; }   /* la columna del índice queda reservada */
  .guia > .guia__indice { position: absolute; top: 0; right: 0; bottom: 0; width: 250px; max-width: none; margin: 0; }
  .guia__indice-fijo { position: sticky; top: 96px; }
  .guia__indice ol { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .guia__indice a { display: block; padding: 8px 10px; border-radius: 10px; background: none; line-height: 1.35; }
}
/* Página de guías: 4 tarjetas (las 3 guías y el resumen de la semana) en filas completas */
@media (min-width: 640px) { .guias-indice .guias-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .guias-indice .guias-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.guia > p, .guia > ul > li { font-size: 1.0625rem; line-height: 1.7; }
.guia > p { margin: 0 0 16px; }
.guia > .entradilla { margin-bottom: 30px; font-size: 1.22rem; line-height: 1.6; }
.guia > h2 { margin: 48px 0 14px; font-family: var(--fuente-display); font-weight: 800; font-size: 1.5rem; line-height: 1.2; letter-spacing: 0; }
.guia > ul { margin: 0 0 18px; padding-left: 1.2em; }
.guia > ul > li { margin-bottom: 8px; }
.guia > ul > li::marker { color: var(--rosa); }
.guia strong { font-weight: 750; }
.guia > p a, .guia > ul a, .diccionario a { color: var(--rosa-texto); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* Diccionario: término y definición; en pantallas anchas, en dos columnas */
.diccionario { margin: 0 0 12px; }
.diccionario[hidden] { display: none; }
.diccionario dt { padding-top: 14px; font-weight: 800; font-size: 1.0625rem; }
.diccionario dd { margin: 4px 0 0; padding-bottom: 14px; border-bottom: 1.5px solid var(--linea); color: var(--tinta-suave); line-height: 1.65; }
@media (min-width: 720px) {
  .diccionario { display: grid; grid-template-columns: minmax(140px, 13rem) minmax(0, 1fr); column-gap: 24px; }
  .diccionario dt, .diccionario dd { margin: 0; padding: 14px 0; border-bottom: 1.5px solid var(--linea); }
}

/* Vídeos del día dentro de una guía: más ancho que el texto, para que quepan tres por fila */
.guia > .guia-videos {
  max-width: 940px; margin: 28px 0 36px; padding: 20px 20px 24px;
  background: var(--superficie); border: 1.5px solid var(--linea); border-radius: var(--radio);
}
.guia-videos h3 { font-family: var(--fuente-display); font-weight: 800; font-size: 1.2rem; letter-spacing: 0; }

/* Cabecera con foto (guías con <!--portada-->): la miniatura del vídeo en 16:6, recortada por arriba, con el sello en una esquina */
.guia > .guia__portada { position: relative; max-width: 43rem; margin: 0 0 18px; }
.guia__portada > a { display: block; overflow: hidden; aspect-ratio: 16 / 6; border-radius: var(--radio); background: var(--hueco); }
.guia__portada > a img, .guia__portada-marco img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.guia__portada-sello {
  position: absolute; top: 12px; left: 12px; padding: 6px 14px; border-radius: 999px;
  background: var(--holo); background-size: 200% 100%; color: #2A1D47;
  font-family: var(--fuente-display); font-weight: 800; font-size: 1.05rem; line-height: 1; pointer-events: none;
}
.guia__portada figcaption { margin-top: 6px; font-size: .85rem; color: var(--tinta-suave); }
/* Cabecera con foto con licencia libre (<!--imagen-->): mismo encuadre, sin enlace */
.guia__portada-marco { display: block; overflow: hidden; aspect-ratio: 16 / 7; border-radius: var(--radio); background: var(--hueco); }
.guia__portada-marco img { object-position: 50% 35%; }
.guia__portada figcaption { line-height: 1.5; }
.guia__portada figcaption a, .guia-foto figcaption a { color: inherit; text-underline-offset: 2px; }
/* Foto dentro del texto de un artículo, con su crédito */
.guia > .guia-foto { max-width: 43rem; margin: 26px 0 30px; }
.mv-puesto .guia-foto { margin: 0 0 16px; }

/* Calendario de premios de un artículo: una tabla por mes. «Próxima» y «Ya celebrada» las pone app.js (marcarPremios) */
.guia .premios-tabla { margin: 8px 0 20px; }
.guia .premios-tabla caption {
  caption-side: top; padding: 0 0 8px; text-align: left;
  font-family: var(--fuente-display); font-size: 1.05rem; font-weight: 800; color: var(--tinta);
}
.guia .premios-tabla th[scope="row"] { color: var(--tinta); font-weight: 800; }
.guia .premios-tabla td { font-size: .9rem; }
/* Las mismas columnas en las tablas de todos los meses, para que se lean como una sola */
@media (min-width: 561px) {
  .guia .premios-tabla table { table-layout: fixed; }
  .guia .premios-tabla th:nth-child(1) { width: 30%; }
  .guia .premios-tabla th:nth-child(2) { width: 20%; }
  .guia .premios-tabla th:nth-child(3) { width: 26%; }
}
.premio-estado {
  display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
  font-family: var(--fuente); font-size: .72rem; font-weight: 800; white-space: nowrap;
}
.premio-estado--proxima { background: var(--rosa-suave); color: var(--rosa-texto); }
.premio-estado--celebrada { background: var(--lavanda-suave); color: var(--tinta-suave); }
.premio-estado--tba { border: 1.5px dashed var(--linea); color: var(--tinta-suave); }
.premio-estado--votacion { background: var(--menta); color: #1D4D12; }
.premios-tabla th[scope="row"] a { color: inherit; text-decoration: none; }
.premios-tabla th[scope="row"] a:hover, .premios-tabla th[scope="row"] a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.premio__referencia { color: var(--tinta-suave); font-size: .86em; }
.guia .premios__revision { margin: -6px 0 22px; padding: 10px 14px; border-radius: 12px; background: var(--lavanda-suave); color: var(--tinta); font-size: .9rem; }
/* Apartado de cada ceremonia: sus datos en una caja, como las fichas del ranking de MV */
.guia .premio { margin: 0 0 22px; padding: 18px 18px 6px; border: 1.5px solid var(--linea); border-radius: var(--radio); background: var(--superficie); scroll-margin-top: 90px; }
.guia .premio h3 { margin: 0 0 12px; }
.premio__datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 12px; }
.premio__datos div { display: contents; }
.premio__datos dt { color: var(--tinta-suave); font-size: .82rem; font-weight: 700; padding-top: 2px; }
.premio__datos dd { margin: 0; color: var(--tinta); font-size: .94rem; }
.guia .premio__fuentes { color: var(--tinta-suave); font-size: .84rem; }
@media (max-width: 560px) {
  .premio__datos { grid-template-columns: 1fr; gap: 2px; }
  .premio__datos dd { margin-bottom: 8px; }
}
.guia .premio--proxima th[scope="row"] { color: var(--rosa-texto); }
/* Las que ya pasaron, atenuadas: se siguen leyendo, pero no compiten con las que vienen */
.guia .premio--celebrada th, .guia .premio--celebrada td, .guia .premio.premio--celebrada { opacity: .6; }
.guia-foto img { display: block; width: 100%; height: auto; border-radius: var(--radio); background: var(--hueco); }
.guia-foto figcaption { margin-top: 6px; font-size: .85rem; color: var(--tinta-suave); }
@media (max-width: 639px) { .guia__portada-marco { aspect-ratio: 16 / 9; } }

/* Integrantes de un grupo: foto (miniatura de su fancam, recortada en vertical) + nombre + datos; toda la tarjeta lleva a la fancam */
.guia > ul.integrantes {
  max-width: 760px; margin: 20px 0 10px; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.guia > ul.integrantes > li { margin: 0; font-size: 1rem; line-height: 1.4; }
.guia > ul.integrantes a { display: block; color: inherit; text-decoration: none; border-radius: var(--radio); }
.integrantes__foto { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radio); background: var(--hueco); }
/* la miniatura es 16:9: se recorta en vertical sobre la cara y se agranda un poco para que no se vea la franja rosa de arriba */
.integrantes__foto img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 59% 0;
  transform: scale(1.07); transform-origin: 59% 100%; transition: transform .25s ease;
}
.guia > ul.integrantes a:hover .integrantes__foto img { transform: scale(1.12); }
.integrantes__nombre { display: block; margin-top: 8px; font-family: var(--fuente-display); font-weight: 800; font-size: 1.15rem; }
.integrantes__datos { display: block; color: var(--tinta-suave); font-size: .93rem; }
.integrantes__ver { display: inline-block; margin-top: 4px; color: var(--rosa-texto); font-weight: 700; font-size: .9rem; }
.guia > ul.integrantes a:focus-visible .integrantes__foto { outline: 3px solid var(--rosa); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .integrantes__foto img, .guia > ul.integrantes a:hover .integrantes__foto img { transition: none; transform: scale(1.07); } }
.guia > .integrantes-nota { font-size: .9rem; color: var(--tinta-suave); }
@media (max-width: 639px) { .guia > ul.integrantes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* Tarjetas de guía: la palabra en coreano sobre el degradado holográfico, como un sello */
.guias-indice { padding-bottom: 24px; }
.guias-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.guia-carta {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--superficie); border: 1.5px solid var(--linea); border-radius: var(--radio);
  transition: transform .2s ease, border-color .2s ease;
}
.guia-carta:hover { transform: translateY(-3px) rotate(-.6deg); border-color: var(--rosa); }
.guia-carta__sello {
  display: grid; place-items: center; aspect-ratio: 16 / 7; padding: 12px;
  background: var(--holo); background-size: 200% 100%; color: #2A1D47;
  font-family: var(--fuente-display); font-weight: 800; font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1; letter-spacing: 0;
}
.guias-lista > :nth-child(3n + 2) .guia-carta__sello { background-position: 50% 0; }
.guias-lista > :nth-child(3n + 3) .guia-carta__sello { background-position: 100% 0; }
.guia-carta__titulo { margin: 0; padding: 16px 18px 0; font-family: var(--fuente-display); font-weight: 800; font-size: 1.2rem; line-height: 1.2; letter-spacing: 0; }
.guia-carta__titulo a { color: inherit; text-decoration: none; }
.guia-carta__titulo a::after { content: ""; position: absolute; inset: 0; }
.guia-carta__resumen { margin: 8px 0 0; padding: 0 18px 20px; color: var(--tinta-suave); font-size: .94rem; line-height: 1.5; }
@supports selector(:has(a)) {
  .guia-carta__titulo a:focus-visible { outline: none; }
  .guia-carta:has(a:focus-visible) { outline: 3px solid var(--lavanda); outline-offset: 3px; }
}
.guia__mas { margin-top: 56px; padding-top: 28px; border-top: 1.5px solid var(--linea); }
.guia__mas > h2 { margin-bottom: 16px; font-family: var(--fuente-display); font-weight: 800; font-size: 1.35rem; letter-spacing: 0; }

/* ---------- Fichas de artistas ---------- */
.grupo-ko { display: block; margin-top: 6px; font-family: var(--fuente); font-size: .4em; font-weight: 700; color: var(--tinta-suave); letter-spacing: 0; }
.grupo-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 4px 0 32px; }
.grupo-cifras { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.grupo-cifras > div {
  min-width: 128px; padding: 10px 16px; border-radius: 14px;
  background: var(--superficie); border: 1.5px solid var(--linea);
}
.grupo-cifras dt { font-size: .78rem; font-weight: 700; color: var(--tinta-suave); }
.grupo-cifras dd { margin: 2px 0 0; font-family: var(--fuente-display); font-weight: 800; font-size: 1.3rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.grupo-cifras #grupo-ultimo { font-family: var(--fuente); font-size: .95rem; font-weight: 700; }
.grupo-cifras #grupo-ultimo a { color: var(--rosa-texto); text-underline-offset: 3px; }
.grupo-cifras #grupo-ultimo time { display: block; font-weight: 500; color: var(--tinta-suave); font-size: .82rem; }
/* «Último MV»: toda la tarjeta se puede pulsar, no solo el título */
#grupo-ultimo-caja { position: relative; transition: border-color .2s ease; }
#grupo-ultimo-caja:hover { border-color: var(--rosa); }
.grupo-cifras #grupo-ultimo a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
/* Móvil: las cifras en dos columnas, para que se vea algún vídeo sin bajar */
@media (max-width: 639px) {
  .grupo-cabeza { gap: 12px; padding-bottom: 24px; }
  .grupo-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .grupo-cifras > div { min-width: 0; padding: 9px 12px; }
  .grupo-cifras dd { font-size: 1.12rem; overflow-wrap: anywhere; }
  /* Con fandom son cinco datos: el último MV ocupa la fila entera */
  .grupo-cifras #grupo-fandom-caja:not([hidden]) ~ #grupo-ultimo-caja { grid-column: 1 / -1; }
}
/* Sus vídeos (6, 12 y 6): columnas que los reparten en filas completas, sin tarjetas sueltas */
@media (min-width: 640px) { .rejilla--ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .rejilla--ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .rejilla--ficha { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 16px; } }
.corazon.corazon--ficha {
  position: static; width: auto; height: auto; gap: 8px; padding: 11px 20px; border-radius: 999px;
  display: inline-flex; align-items: center; font-weight: 750; font-size: .95rem;
  background: var(--superficie); border: 1.5px solid var(--rosa); color: var(--rosa-texto);
}
/* Este botón ya es grande y no va encima de nada: sin la zona de toque ampliada (que, sin position, taparía toda la página) */
.corazon.corazon--ficha::before { content: none; }
.corazon.corazon--ficha[aria-pressed="true"] { background: var(--rosa-fuerte); border-color: var(--rosa-fuerte); color: #fff; }
/* Un bloque sin vídeos no se enseña */
.resumen-bloque:not(:has(li)) { display: none; }

/* Lista de artistas: nombre y, debajo, su nombre en coreano */
.artistas-indice { padding-bottom: 24px; }
.artistas-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
.artistas-lista a {
  display: block; height: 100%; padding: 8px 8px 12px; border-radius: 14px; text-decoration: none; color: inherit;
  background: var(--superficie); border: 1.5px solid var(--linea); transition: border-color .2s ease, transform .2s ease;
}
.artistas-lista a:hover { border-color: var(--rosa); transform: translateY(-2px); }
/* Foto: la miniatura de su MV más visto (o de su vídeo que más sube hoy, en «En tendencia hoy») */
.artistas-lista__foto { display: block; aspect-ratio: 2 / 1; margin-bottom: 10px; overflow: hidden; border-radius: 10px; background: var(--hueco); }
.artistas-lista__foto img { width: 100%; height: 100%; object-fit: cover; }
.artistas-lista__foto--vacia {
  display: grid; place-items: center; background: var(--holo); color: #2A1D47;
  font-family: var(--fuente-display); font-weight: 800; font-size: 2rem; letter-spacing: 0;
}
.artistas-lista__nombre { display: block; padding: 0 6px; font-family: var(--fuente-display); font-weight: 800; font-size: 1.02rem; letter-spacing: 0; overflow-wrap: anywhere; }
.artistas-lista__ko { display: block; margin-top: 2px; padding: 0 6px; color: var(--tinta-suave); font-size: .82rem; font-weight: 600; }
.artistas-lista__datos { display: block; margin-top: 6px; padding: 0 6px; color: var(--tinta-suave); font-size: .78rem; font-weight: 600; }
.artistas-lista__datos--hoy { color: var(--rosa-texto); font-weight: 780; }
/* Los que sigues en «Mis idols»: borde rosa y un corazón junto al nombre */
.artista--favorito a { border-color: var(--rosa); box-shadow: 0 0 0 3px var(--rosa-suave); }
.artista--favorito .artistas-lista__nombre::after { content: " ♥"; content: " ♥" / ""; color: var(--rosa); }
/* Filas de arriba: «Mis idols» y «En tendencia hoy» */
.artistas-destacados { margin-bottom: 28px; }
.artistas-destacados__titulo { margin: 0 0 12px; font-family: var(--fuente-display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0; }
@media (max-width: 639px) {
  .artistas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .artistas-lista__nombre { font-size: .95rem; }
  /* La lista completa (y «Más artistas»), más compacta: foto baja y sin la línea de cifras */
  .artistas-indice > .artistas-lista .artistas-lista__foto, .otros-artistas .artistas-lista__foto { aspect-ratio: 8 / 3; margin-bottom: 8px; }
  .artistas-indice > .artistas-lista .artistas-lista__datos, .otros-artistas .artistas-lista__datos { display: none; }
}
/* Buscador de la lista de artistas: filtra mientras se escribe (sin JavaScript no se enseña) */
.buscador--artistas, .buscador--filtro { max-width: 440px; margin: 0 0 22px; padding-right: 18px; }
.buscador--artistas[hidden], .buscador--filtro[hidden] { display: none; }
.buscador--artistas .buscador__lupa, .buscador--filtro .buscador__lupa { display: block; }
.artistas-ninguno, .filtro-ninguno { margin: 0; color: var(--tinta-suave); }
.artistas-ninguno:not(:empty), .filtro-ninguno:not(:empty) {
  margin-bottom: 16px; padding: 28px 20px; text-align: center;
  border: 1.5px dashed var(--linea); border-radius: var(--radio);
}
.otros-artistas { padding: 8px 0 24px; }

/* ---------- Resumen de la semana ---------- */
.resumen-bloque { padding: 12px 0 44px; }
/* «Lo más destacado»: frases escritas con los datos, en una tarjeta con el borde holográfico a la izquierda */
.resumen-destacado { padding: 4px 0 40px; }
.destacado {
  position: relative; overflow: hidden; padding: 22px 24px 22px 30px;
  border-radius: var(--radio); background: var(--superficie); border: 1.5px solid var(--linea);
}
.destacado::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 6px; background: var(--holo); }
.destacado .seccion-cabeza { margin-bottom: 12px; }
.destacado__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 36px; }
.destacado__lista li { position: relative; padding-left: 20px; line-height: 1.55; }
.destacado__lista li::before {
  content: ""; position: absolute; left: 1px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--rosa);
}
.destacado__lista li:nth-child(3n + 2)::before { background: var(--lavanda); }
.destacado__lista li:nth-child(3n + 3)::before { background: #3FB7E8; }
.destacado__lista strong { font-weight: 780; }
@media (min-width: 900px) { .destacado__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .destacado { padding: 18px 16px 18px 22px; } }
/* Comebacks de la semana: en pantallas anchas llenan la fila; en el móvil siguen en carrusel */
@media (min-width: 760px) {
  .tickets--llenar {
    grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    overflow: visible; align-items: stretch;
  }
}
/* Top 10 de la semana: dos filas completas de 5 (en el móvil, la lista de siempre) */
@media (min-width: 640px) { .rejilla--resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rejilla--resumen { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.resumen-nota { margin: -6px 0 24px; max-width: 80ch; color: var(--tinta-suave); font-size: .88rem; }
.proximamente .ver-todos {
  display: inline-block; padding: 10px 0; margin: -10px 0; color: var(--rosa-texto); font-weight: 750; font-size: .92rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.proximamente p + p { margin-top: 10px; }

/* En la portada, cada guía es un enlace que ocupa toda la fila */
.lista-guias a {
  display: flex; align-items: center; gap: 12px;
  margin: -12px -16px; padding: 12px 16px; border-radius: 11px; text-decoration: none;
}
.lista-guias a:hover { color: var(--rosa-texto); }
/* El sello en coreano de cada guía, como en su tarjeta */
.lista-guias__sello {
  flex: 0 0 5.4em; padding: 3px 4px; border-radius: 8px; text-align: center; white-space: nowrap;
  background: var(--holo); color: #2A1D47; font-size: .74rem; font-weight: 800; line-height: 1.5;
}

/* ---------- Imagen del top 5 ---------- */
.estado .boton-compartir { margin-left: auto; }
.boton-compartir {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--linea); background: var(--superficie); border-radius: 999px;
  padding: 10px 15px; font-weight: 750; font-size: .88rem; color: var(--tinta);
}
.boton-compartir svg { width: 17px; height: 17px; }
.boton-compartir:hover { border-color: var(--rosa); color: var(--rosa-texto); }
.compartir {
  width: min(100% - 24px, 460px); max-height: calc(100dvh - 24px);
  padding: 0; border: 0; background: transparent; color: var(--tinta);
}
.compartir::backdrop { background: rgba(19, 13, 36, .82); }
.compartir__marco { background: var(--superficie); border-radius: 20px; max-height: calc(100dvh - 24px); overflow-y: auto; }
.compartir__titulo { margin: 0; flex: 1; font-family: var(--fuente-display); font-weight: 800; font-size: 1.1rem; letter-spacing: 0; }
.compartir__nota { margin: 0 18px 12px; color: var(--tinta-suave); font-size: .9rem; }
.compartir__vista { margin: 0 18px; display: grid; place-items: center; min-height: 200px; border-radius: 14px; background: var(--hueco); }
.compartir__vista img { width: 100%; height: auto; max-height: 58dvh; object-fit: contain; border-radius: 14px; }
.compartir__acciones { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px 18px; }

/* ---------- Avisos de comebacks y «Mis idols» en otro dispositivo: botones ---------- */
.boton-avisos {
  display: inline-flex; align-items: center; gap: 7px; align-self: center;
  border: 1.5px solid var(--linea); background: var(--superficie); border-radius: 999px;
  padding: 8px 14px; font-weight: 750; font-size: .88rem; color: var(--tinta);
}
.boton-avisos svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.boton-avisos:hover { border-color: var(--rosa); color: var(--rosa-texto); }
.seccion-cabeza .boton-avisos:not([hidden]) + .ver-todos { margin-left: 4px; }
.seccion-cabeza .boton-avisos:not([hidden]) { margin-left: auto; }
.comebacks--pagina .seccion-cabeza .boton-avisos:not([hidden]) ~ .chip-favs { margin-left: 0; }
.chip-sincro {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
  border: 1.5px solid var(--linea); background: var(--superficie); border-radius: 50%; color: var(--tinta-suave);
}
.chip-sincro svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chip-sincro:hover { color: var(--rosa-texto); border-color: var(--rosa); }

/* ---------- Ventanas (sincronizar y avisos) ---------- */
.dialogo__cuerpo { padding: 0 18px 18px; }
.dialogo__cuerpo > p { margin: 0 0 14px; color: var(--tinta-suave); font-size: .95rem; line-height: 1.5; }
.dialogo__cuerpo > p:first-child { color: var(--tinta); }
.dialogo__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.dialogo__acciones--suaves .boton { font-size: .85rem; font-weight: 650; color: var(--tinta-suave); }
.dialogo__codigo {
  display: grid; gap: 2px; justify-items: center; margin: 4px 0 14px !important; padding: 16px;
  border-radius: 16px; background: var(--holo); color: #2A1D47 !important; text-align: center;
}
.dialogo__codigo span { font-size: .8rem; font-weight: 700; }
.dialogo__codigo strong { font-family: var(--fuente-display); font-size: 2rem; letter-spacing: .06em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dialogo__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 4px 0 14px; padding-top: 16px; border-top: 1.5px dashed var(--linea); }
.dialogo__form label { font-weight: 700; font-size: .92rem; }
.dialogo__fila { display: flex; gap: 8px; }
.dialogo__fila .boton { flex-shrink: 0; }
.dialogo__fila input {
  flex: 1; width: 100%; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--fondo);
  font-size: 1.05rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.dialogo__fila input:focus { outline: none; border-color: var(--lavanda); box-shadow: 0 0 0 4px var(--lavanda-suave); }
.dialogo__fila input::placeholder { font-weight: 500; letter-spacing: .04em; opacity: .55; }
.dialogo__opciones { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
.dialogo__opcion {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--linea); font-weight: 700;
}
.dialogo__opcion input { width: 20px; height: 20px; margin: 0; accent-color: var(--rosa-fuerte); flex-shrink: 0; }
.dialogo__opcion:has(input:checked) { border-color: var(--rosa); background: var(--rosa-suave); }
.dialogo__cuerpo .dialogo__nota { font-size: .85rem; }
.dialogo__cuerpo .dialogo__aviso { padding: 12px 14px; border-radius: 14px; background: var(--lavanda-suave); color: var(--tinta); }
.dialogo__cuerpo .dialogo__estado { font-weight: 750; color: var(--rosa-texto); }
.dialogo__cuerpo .dialogo__mensaje { padding: 10px 14px; border-radius: 12px; background: #E6F9DD; color: #1F5A12; font-weight: 700; }
.dialogo__cuerpo .dialogo__mensaje--error { background: var(--rosa-suave); color: var(--rosa-texto); }
.dialogo__cuerpo .dialogo__mensaje--espera { background: var(--lavanda-suave); color: var(--tinta); font-weight: 650; }
@media (prefers-color-scheme: dark) {
  .dialogo__cuerpo .dialogo__mensaje { background: #1E3324; color: #B7F0A0; }
  .dialogo__cuerpo .dialogo__mensaje--error { background: var(--rosa-suave); color: var(--rosa-texto); }
}

/* ---------- Votaciones de la semana ---------- */
.votar__lista { display: grid; gap: 28px; }
.votar--anteriores { margin-top: 56px; }
.encuesta {
  padding: 18px; border-radius: 22px; background: var(--superficie); border: 1.5px solid var(--linea);
}
.encuesta--hueco { min-height: 460px; background: var(--hueco); border-color: transparent; animation: latido 1.4s ease-in-out infinite; }
.encuesta__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 14px; }
.encuesta__titulo { font-family: var(--fuente-display); font-weight: 800; font-size: 1.45rem; letter-spacing: 0; }
.encuesta__estado { margin: 0; color: var(--tinta-suave); font-size: .9rem; font-variant-numeric: tabular-nums; }
.encuesta__grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
.encuesta__opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.opcion { position: relative; }
.opcion__elegir {
  display: flex; flex-direction: column; height: 100%; padding: 6px 6px 12px; border-radius: 16px; cursor: pointer;
  border: 2px solid var(--linea); background: var(--fondo); transition: border-color .15s ease, transform .15s ease;
}
.opcion__elegir:hover { border-color: var(--lavanda); }
.opcion__elegir:has(input:focus-visible) { outline: 3px solid var(--lavanda); outline-offset: 3px; }
.opcion--elegida .opcion__elegir { border-color: var(--rosa); background: var(--rosa-suave); transform: translateY(-2px); }
.opcion__imagen { display: block; aspect-ratio: 16 / 9; border-radius: 11px; overflow: hidden; background: var(--hueco); }
.opcion__imagen img { width: 100%; height: 100%; object-fit: cover; }
.opcion__texto { display: block; padding: 10px 6px 0; min-width: 0; }
.opcion__artista { display: block; font-family: var(--fuente-display); font-weight: 800; font-size: 1rem; letter-spacing: 0; line-height: 1.25; }
.opcion__cancion { display: block; margin-top: 2px; color: var(--tinta-suave); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opcion__marca {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); border: 2px solid rgba(29, 20, 51, .25); box-shadow: 0 4px 10px -4px rgba(29, 20, 51, .5);
}
.opcion--elegida .opcion__marca { background: var(--rosa-fuerte); border-color: #fff; }
.opcion--elegida .opcion__marca::after {
  content: ""; position: absolute; left: 8px; top: 4px; width: 7px; height: 12px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.opcion__ver {
  position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(19, 13, 36, .72); color: #fff;
}
.opcion__ver svg { width: 16px; height: 16px; fill: currentColor; margin-left: 2px; }
.opcion__ver:hover { background: var(--rosa-fuerte); }
.encuesta__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.encuesta__pie .boton--oscuro { padding: 11px 28px; font-size: 1rem; }
.encuesta__nota { margin: 0; color: var(--tinta-suave); font-size: .92rem; }

/* Resultados: filas con una barra que se llena según el porcentaje */
.encuesta--resultado .encuesta__opciones { grid-template-columns: 1fr; gap: 8px; }
.opcion--resultado .opcion__elegir {
  position: relative; flex-direction: row; align-items: center; gap: 12px; padding: 6px 14px 6px 6px; cursor: default; overflow: hidden;
  background: linear-gradient(90deg, var(--lavanda-suave) var(--p), var(--fondo) var(--p));
}
.opcion--resultado .opcion__elegir:hover { border-color: var(--linea); }
.opcion--resultado .opcion__imagen { width: 112px; flex-shrink: 0; border-radius: 10px; }
.opcion--resultado .opcion__texto { flex: 1; padding: 0; }
.opcion--resultado .opcion__ver { left: 12px; top: 50%; width: 30px; height: 30px; margin-top: -15px; }
.opcion__cifra { display: grid; justify-items: end; gap: 3px; flex-shrink: 0; text-align: right; }
.opcion__cifra strong { font-family: var(--fuente-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.opcion__etiqueta {
  padding: 1px 8px; border-radius: 999px; background: var(--rosa-fuerte); color: #fff; font-size: .7rem; font-weight: 800; white-space: nowrap;
}
.opcion__etiqueta--gana { background: var(--holo); color: #2A1D47; }
.opcion--mia .opcion__elegir { border-color: var(--rosa); }
.opcion--gana .opcion__elegir { border-color: var(--lavanda); background: linear-gradient(90deg, color-mix(in srgb, var(--lavanda) 26%, var(--fondo)) var(--p), var(--fondo) var(--p)); }
/* Móvil: cada opción es una fila (miniatura a la izquierda), como en el ranking */
@media (max-width: 639px) {
  .encuesta { padding: 14px; border-radius: 18px; }
  .encuesta__titulo { font-size: 1.3rem; }
  .encuesta__opciones { grid-template-columns: 1fr; gap: 8px; }
  .opcion:not(.opcion--resultado) .opcion__elegir { flex-direction: row; align-items: center; gap: 12px; padding: 6px 46px 6px 6px; }
  .opcion:not(.opcion--resultado) .opcion__imagen { width: 42%; flex-shrink: 0; border-radius: 10px; }
  .opcion:not(.opcion--resultado) .opcion__texto { padding: 0; }
  .opcion:not(.opcion--resultado) .opcion__marca { top: 50%; right: 12px; margin-top: -14px; }
  .opcion__ver, .opcion--resultado .opcion__ver { left: 12px; top: 50%; width: 30px; height: 30px; margin-top: -15px; }
  .opcion__cancion { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .opcion--resultado .opcion__imagen { width: 88px; }
  .encuesta__pie .boton--oscuro { flex: 1; }
}
@media (min-width: 900px) {
  .encuesta { padding: 24px; }
  .encuesta__opciones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .encuesta--resultado .encuesta__opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* «Imagen para TikTok» de cada votación y su ventana */
.encuesta__cabeza .boton-tiktok-imagen { margin-left: auto; align-self: center; padding: 8px 13px; font-size: .84rem; }
.boton-tiktok-imagen svg { width: 16px; height: 16px; }
.tiktok__vistas { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }
.tiktok__vistas[hidden] { display: none; }
.tiktok__vistas .chip-favs { padding: 8px 14px; font-size: .88rem; }
.tiktok__etiqueta { display: block; margin: 2px 0 6px; font-weight: 700; font-size: .92rem; }
.tiktok__texto {
  display: block; width: 100%; margin-bottom: 10px; padding: 10px 12px; resize: vertical;
  border: 1.5px solid var(--linea); border-radius: 12px; background: var(--fondo); color: var(--tinta);
  font: 500 .9rem/1.45 var(--fuente);
}
#dialogo-tiktok .compartir__vista img { max-height: 46dvh; }

/* «Instalar K-Pulso» (solo en el móvil) */
.instalar {
  position: fixed; z-index: 65; left: 12px; right: 12px; bottom: 12px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 14px; border-radius: 18px; background: var(--superficie); color: var(--tinta);
  border: 1.5px solid var(--linea); box-shadow: 0 18px 40px -18px rgba(29, 20, 51, .55);
  animation: abrir .25s cubic-bezier(.2, .8, .2, 1);
}
.instalar img { width: 48px; height: 48px; border-radius: 12px; }
.instalar__texto p { margin: 0; color: var(--tinta-suave); font-size: .88rem; line-height: 1.4; }
.instalar__texto .instalar__titulo { color: var(--tinta); font-size: 1rem; font-weight: 800; }
.instalar__botones { grid-column: 1 / -1; display: flex; gap: 8px; }
.instalar__botones .boton { flex: 1; padding: 10px 14px; }
@media (min-width: 760px) { .instalar { left: auto; right: 16px; bottom: 16px; width: 380px; } }

/* Portada: tarjeta «¿Cuál es el MV de la semana?» */
.votar-promo { margin-top: 56px; }
.votar-promo__enlace {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px;
  padding: 20px 24px; border-radius: 22px; overflow: hidden; text-decoration: none; color: #2A1D47;
  background: var(--holo); background-size: 200% 100%; transition: background-position .5s ease, transform .2s ease;
}
.votar-promo__enlace:hover { background-position: 100% 0; transform: translateY(-2px); }
.votar-promo__fotos { display: flex; padding-left: 18px; }
.votar-promo__fotos img {
  width: 96px; aspect-ratio: 3 / 4; object-fit: cover; margin-left: -18px; border-radius: 12px;
  border: 3px solid #fff; box-shadow: 0 10px 22px -12px rgba(57, 30, 110, .6);
}
.votar-promo__fotos img:nth-child(1) { transform: rotate(-8deg); }
.votar-promo__fotos img:nth-child(2) { transform: translateY(-6px); position: relative; z-index: 1; }
.votar-promo__fotos img:nth-child(3) { transform: rotate(8deg); }
.votar-promo__texto { display: grid; gap: 4px; }
.votar-promo__sello { font-family: var(--fuente-display); font-size: .85rem; opacity: .7; }
.votar-promo__titulo { font-family: var(--fuente-display); font-weight: 800; font-size: 1.45rem; letter-spacing: 0; line-height: 1.15; }
.votar-promo__sub { font-size: .95rem; opacity: .85; }
.votar-promo__boton {
  padding: 12px 24px; border-radius: 999px; background: #1D1433; color: #fff; font-weight: 800; white-space: nowrap;
}
@media (max-width: 639px) {
  .votar-promo__enlace { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; }
  .votar-promo__fotos img { width: 78px; }
  .votar-promo__boton { justify-self: start; }
}

/* ---------- Móvil ---------- */
@media (max-width: 759px) {
  .cabecera__fila { gap: 12px; }
  .menu {
    position: absolute; left: 0; right: 0; top: 64px; margin: 0; padding: 2px 12px;
    background: var(--fondo); border-bottom: 1px solid var(--linea); overflow-x: auto; scrollbar-width: none;
  }
  .menu::-webkit-scrollbar { display: none; }
  /* Pestañas altas para el dedo; la barra mide lo mismo que antes (menos margen alrededor) */
  .menu a { flex-shrink: 0; font-size: .9rem; padding: 10px 12px; }
  /* Degradado pegado al borde derecho: avisa de que hay más pestañas; al final hace de margen */
  .menu::after {
    content: ""; position: sticky; right: 0; flex: 0 0 32px; margin: -2px 0;
    background: linear-gradient(to right, transparent, var(--fondo) 75%); pointer-events: none;
  }
  .portada-fondo { padding-top: 109px; }
  html { scroll-padding-top: 124px; }
  /* El ranking llega antes: va justo después de la portada (los comebacks, detrás) y la portada tiene menos aire */
  #contenido:has(> .ranking) { display: grid; grid-template-columns: minmax(0, 1fr); }
  #contenido:has(> .ranking) > .portada-fondo { order: -2; }
  #contenido:has(> .ranking) > .ranking { order: -1; }
  #contenido:has(> .ranking) > .comebacks { margin-top: 56px; }
  .portada:not(.portada--compacta) { gap: 18px; padding: 18px 0 22px; }
  .portada:not(.portada--compacta) .pulso { margin: 10px 0; }
  .portada:not(.portada--compacta) .portada__sub { margin-bottom: 18px; font-size: 1rem; }
  /* «Hoy suenan» en una sola fila que se desliza con el dedo */
  .sugerencias { flex-wrap: nowrap; margin: 12px -16px 0 0; }
  .sugerencias__texto { flex-shrink: 0; }
  .sugerencias__lista {
    flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-right: 24px;
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
  .sugerencias__lista::-webkit-scrollbar { display: none; }
  .sugerencias__lista button { flex-shrink: 0; white-space: nowrap; }
  .boton-tiktok span { display: none; }
  .boton-tiktok { padding: 0; width: 44px; height: 44px; }
  .reproductor__nav { margin-left: 0; }
}

/* ---------- Animaciones ---------- */

/* 1. Photocards holográficas: el brillo arcoíris sigue al dedo o al ratón, y recorre las cartas al llegar */
.fotocard { --px: 50%; --py: 50%; }
.fotocard__marco::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 34%, #FF77C6 40%, #FFD666 44%, #7CFFCB 48%, #6EB4FF 52%, #C48CFF 56%, transparent 63%);
  background-size: 300% 300%; background-position: var(--px) var(--py);
  mix-blend-mode: color-dodge; opacity: 0;
  transition: opacity .35s ease;
  animation: holo 1.7s ease-in-out 1.4s backwards;
}
.fotocard--2 .fotocard__marco::before { animation-delay: 1.52s; }
.fotocard--3 .fotocard__marco::before { animation-delay: 1.64s; }
.fotocard:hover .fotocard__marco::before, .fotocard:focus-visible .fotocard__marco::before { opacity: .55; }
@keyframes holo {
  0% { opacity: 0; background-position: 100% 100%; }
  25% { opacity: .6; }
  80% { opacity: .6; }
  100% { opacity: 0; background-position: 0% 0%; }
}

/* 2. Corazones que saltan al seguir a un grupo */
.estallido { position: fixed; z-index: 80; width: 0; height: 0; pointer-events: none; }
.estallido span {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; color: var(--rosa);
  animation: estallar .8s cubic-bezier(.2, .7, .3, 1) both;
}
.estallido span:nth-child(3n) { color: var(--lavanda); }
.estallido span:nth-child(3n + 1) { color: #FF7EB8; }
.estallido svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@keyframes estallar {
  0% { opacity: 0; transform: translate(0, 0) scale(.3); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--giro)); }
}

/* 3. Al cambiar de lista, periodo o búsqueda: los vídeos entran en orden y las flechas de puesto saltan */
.rejilla--entra > li { animation: entrar .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.rejilla--entra > li:nth-child(2) { animation-delay: .03s; }
.rejilla--entra > li:nth-child(3) { animation-delay: .06s; }
.rejilla--entra > li:nth-child(4) { animation-delay: .09s; }
.rejilla--entra > li:nth-child(5) { animation-delay: .12s; }
.rejilla--entra > li:nth-child(6) { animation-delay: .15s; }
.rejilla--entra > li:nth-child(7) { animation-delay: .18s; }
.rejilla--entra > li:nth-child(8) { animation-delay: .21s; }
.rejilla--entra > li:nth-child(9) { animation-delay: .24s; }
.rejilla--entra > li:nth-child(n + 10) { animation-delay: .27s; }
@keyframes entrar { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.mov { display: inline-block; }
.rejilla--entra .mov { animation: saltar .5s cubic-bezier(.3, 1.7, .5, 1) .35s backwards; }
@keyframes saltar { from { opacity: 0; transform: scale(.2) translateY(6px); } }

/* 4. Comebacks de las próximas 24 horas: cuenta atrás en directo, con un punto que late */
.ticket__cuenta--pronto { display: inline-flex; align-items: center; gap: 6px; }
.ticket__cuenta--pronto::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: directo 1.2s ease-in-out infinite;
}
@keyframes directo { 50% { opacity: .25; transform: scale(.7); } }

/* 5. Metas a la vista: las barras se llenan al llegar a ellas */
.meta__barra span { width: 0; transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.metas--visible .meta__barra span { width: var(--p); }
.metas--visible .meta:nth-child(2) .meta__barra span { transition-delay: .08s; }
.metas--visible .meta:nth-child(3) .meta__barra span { transition-delay: .16s; }
.metas--visible .meta:nth-child(4) .meta__barra span { transition-delay: .24s; }
.metas--visible .meta:nth-child(5) .meta__barra span { transition-delay: .32s; }
.metas--visible .meta:nth-child(6) .meta__barra span { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  .tarjeta--hueco .tarjeta__imagen, .pegatina, .fotocard__marco::before, .ticket__cuenta--pronto::before, .encuesta--hueco { animation: none; }
  .rejilla--entra > li { animation-name: aparecer; }
  .rejilla--entra .mov { animation: none; }
  .meta__barra span { transition: none; }
}
@keyframes aparecer { from { opacity: 0; } }