/* Radar K-pop · editorial-ui · Cristian Pérez · cristianperez.me
   Dirección: diario de stickers que orbita un planeta de juguete. Papel cuadriculado lila, stickers troquelados
   con borde blanco y sombra dura, un color fuerte por grupo y palabras en hangul. Mobile first. */

:root {
  --paper: #F4EEFF;
  --grid: #E7DDFB;
  --ink: #2E2150;
  --ink-2: #5A4B82;
  --white: #FFFFFF;
  --shadow: #B9A4EE;
  --bubble: #FF5FA8;
  --mint: #C6F3DA;
  --sky: #A8DDF2;
  --butter: #FFF1A8;
  --lilac: #DCCFFF;
  --peach: #FFD9C7;
  --live: #FF3D8B;
  --on: #FFFFFF;        /* texto sobre un relleno de color (grupo, rosa, live): blanco en los dos temas */

  --c-bts: #7B3FE4;
  --c-skz: #E5323B;
  --c-twice: #FF8A2B;
  --c-blackpink: #F2559A;
  --c-lngshot: #0FA3B1;
  --c-seventeen: #6C7BE8;
  --c-enhypen: #22A36A;
  --c-newjeans: #F2B705;
  --c-cortis: #7CB518;
  --c-ateez: #C08A1E;

  --f-display: 'Jua', 'Baloo 2', ui-rounded, system-ui, sans-serif;
  --f-body: 'Baloo 2', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-hand: 'Gaegu', 'Baloo 2', ui-rounded, cursive;

  --r-1: 14px;
  --r-2: 22px;
  --r-3: 30px;
  --b: 2.5px solid var(--ink);
  --sh-1: 0 3px 0 var(--shadow);
  --sh-2: 3px 5px 0 var(--shadow);
  --sh-3: 4px 7px 0 var(--shadow), 0 18px 40px rgba(46, 33, 80, .16);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --boing: cubic-bezier(.34, 1.56, .64, 1);
  --bar-h: 60px;
  --row1: 56px;
  --nav-h: 54px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html {
  -webkit-tap-highlight-color: transparent;
  scrollbar-gutter: stable;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 14px);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  color: var(--ink);
  font: 400 16.5px/1.5 var(--f-body);
  overflow-x: clip;
  min-height: 100svh;
}
img, svg, canvas { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--bubble); outline-offset: 3px; border-radius: 10px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ko { font-family: var(--f-hand); font-weight: 700; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--white); border: var(--b); border-radius: 12px; padding: 8px 14px; font-weight: 700; }
.skip:focus { top: 10px; }

/* ---------- iconos de línea ---------- */
.btn-ico svg, .btn svg, .link-btn svg, .act svg, .focus svg, .video-x svg {
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none;
}

/* ---------- botones (sticker) ---------- */
.btn, .btn-ico {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 18px;
  background: var(--white); border: var(--b); border-radius: 999px;
  font-weight: 700; font-size: 16px; line-height: 1.1;
  box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s;
  white-space: nowrap;
}
.btn svg, .btn-ico svg { width: 20px; height: 20px; }
.btn:active, .btn-ico:active, .act:active { transform: translateY(2px) scale(.97); box-shadow: 0 1px 0 var(--shadow); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover, .btn-ico:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 5px 0 var(--shadow); }
}
.btn.primary { background: var(--bubble); color: var(--on); }
.btn.ghost { background: transparent; box-shadow: none; border-style: dashed; }
.btn.small { min-height: 44px; padding: 6px 14px; font-size: 15px; }
.link-btn { background: none; border: 0; padding: 12px 4px; min-height: 44px; font-weight: 700; color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--shadow); }
.link-btn:hover { color: var(--ink); text-decoration-color: var(--bubble); }

/* ---------- barra superior ---------- */
/* la fila del logo se va con el scroll y el menú queda pegado arriba (top negativo = alto de la primera fila) */
.bar {
  position: sticky; top: calc(-1 * var(--row1)); z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--paper);  /* sólida: al 97 % se leía el texto de abajo detrás del menú ("Nroups") */
  border-bottom: 2px dashed var(--grid);
  transition: box-shadow .3s;
}
.bar.stuck { box-shadow: 0 8px 20px rgba(46, 33, 80, .08); }
.bar-top { height: var(--row1); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
.topnav { position: relative; display: flex; align-items: center; gap: 2px; height: var(--nav-h); padding: 4px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a, .topnav button { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 6px 13px; border: 0; background: none; border-radius: 999px; font-weight: 800; font-size: 14px; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: color .25s; }
.topnav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.topnav [aria-current="true"] { color: var(--white); }
.topnav a.pop svg { animation: navPop .55s var(--boing); }
.topnav button[data-video] { color: #C2186B; }
:root[data-theme="dark"] .topnav button[data-video] { color: var(--bubble); }
.tn-pill { position: absolute; z-index: 0; left: 0; top: 4px; height: 42px; width: 0; border-radius: 999px; background: var(--ink); box-shadow: 0 3px 0 var(--bubble); transition: transform .5s var(--boing), width .5s var(--boing); }
@keyframes navPop { 40% { transform: translateY(-4px) rotate(-12deg) scale(1.25); } }
@media (hover: hover) and (pointer: fine) { .topnav a:not([aria-current="true"]):hover { color: var(--ink); background: rgba(255, 255, 255, .7); } }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; min-height: 44px; }
.logo-dot { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--sky); border: var(--b); box-shadow: var(--sh-1); display: grid; place-items: center; }
.logo-dot svg { width: 24px; height: 24px; fill: var(--mint); stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.logo-text { font: 400 22px/1 var(--f-display); letter-spacing: -.01em; white-space: nowrap; }
.logo-text b { font-weight: 400; color: var(--bubble); -webkit-text-stroke: 0; }
.logo-ko { display: none; font: 700 15px/1 var(--f-hand); color: var(--ink-2); padding: 3px 8px; border-radius: 8px; background: var(--butter); transform: rotate(-3deg); white-space: nowrap; }
.bar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.btn-ico { padding: 8px; width: 44px; min-width: 44px; }
.btn-ico.install { width: auto; padding: 8px 12px; font-size: 14px; }
.btn-ico.install span { display: none; }
.mute .ico-off { display: none; }
.mute[aria-pressed="true"] .ico-on { display: none; }
.mute[aria-pressed="true"] .ico-off { display: block; }
.mute[aria-pressed="true"] { background: var(--lilac); }
.lang { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: var(--b); border-radius: 999px; background: var(--white); box-shadow: var(--sh-1); padding: 3px; }
.lang button { position: relative; z-index: 1; min-width: 40px; min-height: 36px; border: 0; background: none; border-radius: 999px; font-weight: 800; font-size: 14px; transition: color .3s; }
.lang button::after { content: ""; position: absolute; inset: -4px 0; }
.lang button[aria-pressed="true"] { color: var(--white); }
.lang-pill { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--ink); transition: transform .45s var(--boing); }
.lang[data-l="en"] .lang-pill { transform: translateX(100%); }
.lang-pop { position: fixed; z-index: 120; left: 50%; top: 40%; display: grid; justify-items: center; gap: 2px; padding: 12px 22px 10px; background: var(--white); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 5px 7px 0 var(--bubble); pointer-events: none; animation: langPop 1.25s var(--boing) both; }
.lang-pop span { font: 700 22px/1 var(--f-hand); color: var(--bubble); }
.lang-pop b { font: 400 32px/1.1 var(--f-display); }
@keyframes langPop { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-14deg); opacity: 0; } 22% { transform: translate(-50%, -50%) scale(1.08) rotate(3deg); opacity: 1; } 70% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); opacity: 1; } 100% { transform: translate(-50%, -80%) scale(.9) rotate(-2deg); opacity: 0; } }
::view-transition-old(root) { animation: .32s ease-in both vtOut; }
::view-transition-new(root) { animation: .42s var(--ease) both vtIn; }
@keyframes vtOut { to { opacity: 0; filter: blur(4px); transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; filter: blur(4px); transform: translateY(8px); } }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.content-col { display: grid; gap: 40px; padding: 30px max(12px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); min-width: 0; }

/* ---------- escenario ---------- */
.stage-col { position: relative; min-width: 0; }
.stage {
  position: relative;
  height: clamp(440px, 64svh, 640px);
  overflow: hidden;
  isolation: isolate;
}
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, #FFE3F1 0, rgba(255, 227, 241, .55) 30%, rgba(244, 238, 255, 0) 62%); }
.spark { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  background: #FFD84D; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.heart-f { position: absolute; left: var(--x); top: var(--y); width: 18px; height: 16px; background: #FFB3D4;
  clip-path: path('M9 16C2 10.5 0 7.5 0 4.6 0 2 2 0 4.6 0 6.5 0 8 1 9 2.6 10 1 11.5 0 13.4 0 16 0 18 2 18 4.6 18 7.5 16 10.5 9 16Z'); }
.anim-twinkle { animation: twinkle var(--d, 4s) ease-in-out infinite; }
.anim-float { animation: floaty var(--d, 6s) ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1.1) rotate(25deg); opacity: 1; } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-14px) rotate(8deg); } }

.view-toggle {
  position: absolute; z-index: 6; top: 12px; left: 12px;
  display: grid; grid-template-columns: 1fr 1fr; padding: 4px;
  background: var(--white); border: var(--b); border-radius: 999px; box-shadow: var(--sh-1);
}
.view-toggle button { position: relative; z-index: 1; border: 0; background: none; min-height: 38px; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; transition: color .2s; }
.view-toggle button span[lang] { font-family: var(--f-hand); font-weight: 700; font-size: 15px; }
.view-toggle button::after { content: ""; position: absolute; inset: -4px 0; }
.view-toggle button[aria-pressed="true"] { color: var(--white); }
.vt-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--ink); transition: transform .38s var(--boing); }
.view-toggle[data-v="sonar"] .vt-pill { transform: translateX(100%); }
.video-btn { position: absolute; z-index: 6; top: 12px; right: 12px; width: auto; padding: 8px 12px; font-size: 14px; }
.video-btn span { display: none; }

.globe-view, .sonar-view { position: absolute; inset: 0; }
/* el globo se queda con el gesto: girar con un dedo, pellizcar para zoom; la página no se mueve */
.globe-view { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#globe { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#globe:focus-visible { outline-offset: -6px; border-radius: 24px; }
.g-halo, .g-ball, .g-shade { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; transform-origin: 50% 50%; }
.g-halo { background: radial-gradient(circle, rgba(255, 170, 214, .55) 0, rgba(255, 170, 214, .5) 46%, rgba(214, 190, 255, .3) 62%, rgba(244, 238, 255, 0) 100%); }
.g-ball {
  background: radial-gradient(circle at 32% 30%, #D8F3FF 0, #A8DDF2 58%, #86C9EA 100%);
  box-shadow: 0 0 0 var(--rim, 8px) #fff, 0 0 0 calc(var(--rim, 8px) + 2.5px) #2E2150, calc(var(--rim, 8px) * .45) calc(var(--rim, 8px) * 1.2) 0 calc(var(--rim, 8px) + 2.5px) #B9A4EE;
}
.g-shade {
  background:
    radial-gradient(ellipse 17% 8% at 26% 21%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .06) 34%, rgba(120, 90, 200, .04) 70%, rgba(90, 60, 170, .34) 100%);
}
#globe, #vglobe { z-index: 1; }
.g-shade { z-index: 2; }
.pins { z-index: 3; }
#globe.grabbing { cursor: grabbing; }
.ring { position: absolute; left: 50%; top: 50%; width: var(--ring, 300px); height: var(--ring, 300px); margin: calc(var(--ring, 300px) / -2) 0 0 calc(var(--ring, 300px) / -2); pointer-events: none; transition: opacity .5s var(--ease); }
.ring svg { width: 100%; height: 100%; overflow: visible; }
.ring text { font: 700 9.4px var(--f-hand); fill: var(--ink-2); letter-spacing: .06em; }
.stage.zoomed .ring { opacity: 0; }
.anim-spin { animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.drag-hint { position: absolute; z-index: 5; left: 50%; bottom: 62px; margin: 0; transform: translateX(-50%) rotate(-3deg); padding: 6px 14px; background: var(--butter); border: var(--b); border-radius: 12px; font-weight: 700; font-size: 15px; white-space: nowrap; pointer-events: none; transition: opacity .4s, transform .4s var(--ease); box-shadow: var(--sh-1); }
.drag-hint span[lang] { font-family: var(--f-hand); font-size: 17px; }
.drag-hint.gone { opacity: 0; transform: translateX(-50%) translateY(10px) rotate(-3deg); }

/* ---------- pines de chibi sobre el globo ---------- */
.pins { position: absolute; inset: 0; pointer-events: none; }
.pin {
  position: absolute; left: 0; top: 0; width: var(--pw, 74px);
  border: 0; padding: 0; background: none; pointer-events: auto;
  transform-origin: 50% 100%;
  transition: opacity .3s;
  will-change: transform;
}
.pin.away { opacity: 0; pointer-events: none; }
.pin-bob { display: block; position: relative; animation: bob var(--bd, 2s) ease-in-out var(--bdl, 0s) infinite; transform-origin: 50% 100%; }
.crowd { position: relative; display: block; margin: 0 auto; pointer-events: none; }
.crowd .cm { position: absolute; height: auto; -webkit-user-drag: none; user-select: none; transform-origin: 50% 94%; }
/* rendimiento: con 10 grupos son ~60 chibis sobre el globo; animarlos uno por uno trababa el celular cuando se juntaban.
   El pin entero flota (pin-bob) y solo el grupo elegido respira miembro por miembro. */
.pin.sel .crowd .cm { animation: breathe var(--bd, 2.4s) ease-in-out var(--dl, 0s) infinite; }
.pin.hop .cm { animation: memHop .75s var(--boing) calc(var(--hi, 0) * 55ms) 1 both; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.985, 1.035); } }
@keyframes memHop { 0% { transform: translateY(0) scale(1, 1); } 25% { transform: translateY(2px) scale(1.08, .9); } 55% { transform: translateY(-38%) scale(.94, 1.08) rotate(-6deg); } 80% { transform: translateY(0) scale(1.06, .94); } 100% { transform: none; } }
.pin-tag {
  position: absolute; left: 50%; top: -14px; transform: translateX(-50%) rotate(-3deg);
  padding: 1px 9px 0; border-radius: 999px; background: var(--white); border: 2px solid var(--ink);
  font: 400 13px/1.35 var(--f-display); white-space: nowrap; color: var(--ink);
  box-shadow: 0 2px 0 var(--gc);
}
.pin-tag i { font-style: normal; color: var(--gt, var(--gc)); }
.pin.low .pin-tag { top: auto; bottom: -16px; transform: translateX(-50%) rotate(2deg); }
.pin-glow { position: absolute; left: 50%; bottom: -6px; width: 120%; aspect-ratio: 1; transform: translate(-50%, 30%) scale(.4); border-radius: 50%; background: radial-gradient(circle, rgba(255, 61, 139, .5), rgba(255, 61, 139, 0) 65%); opacity: 0; pointer-events: none; }
.pin.live .pin-glow { animation: glow 1.6s ease-out infinite; }
.pin.live .pin-tag { background: var(--live); color: var(--on); border-color: var(--ink); }
.pin.live .pin-tag i { color: var(--butter); }
.pin.rest .pin-bob { animation-duration: 3.6s; }
.pin.rest .pin-tag { font-size: 11.5px; padding: 0 7px; opacity: .92; }
.pin.rest .pin-tag::after { content: " zZ"; color: var(--gt, var(--gc)); }
.pin.stag .pin-tag { top: -50px; }
.pin.low.stag .pin-tag { top: auto; bottom: -50px; }
.pin.sel { z-index: 50 !important; }
.pin.sel .pin-tag { box-shadow: 0 3px 0 var(--gc), 0 0 0 3px var(--gc); }
.pin.dim { opacity: .35; }
.pin.cheer .pin-bob { animation: cheer .9s var(--boing) 2; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-6px); } }
@keyframes glow { 0% { transform: translate(-50%, 30%) scale(.4); opacity: .95; } 100% { transform: translate(-50%, 30%) scale(1.5); opacity: 0; } }
@keyframes cheer { 0% { transform: translateY(0); } 40% { transform: translateY(-34px) rotate(-12deg); } 70% { transform: translateY(-10px) rotate(8deg); } 100% { transform: translateY(0); } }
@media (hover: hover) and (pointer: fine) {
  .pin:hover .pin-bob { animation-duration: .7s; }
}

/* ---------- zoom y centrar en mí ---------- */
.zoom-ctrl { position: absolute; z-index: 6; right: 10px; bottom: 58px; display: grid; gap: 8px; transition: opacity .25s; }
.stage.zoomed .zoom-ctrl { opacity: 0; pointer-events: none; }
.z-btn { width: 44px; height: 44px; border-radius: 50%; border: var(--b); background: var(--white); box-shadow: var(--sh-1); display: grid; place-items: center; padding: 0; transition: transform .2s var(--boing), opacity .2s; }
.z-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.z-btn:active { transform: scale(.9); }
.z-btn:disabled { opacity: .4; cursor: default; }
.z-btn[data-center-me] { background: var(--butter); }
.stage.zoomed-in .ring { opacity: 0; }

/* ---------- avistamientos en el globo (insignias redondas, como el tracker) ---------- */
.sight { position: absolute; left: 0; top: 0; width: 34px; height: 34px; padding: 3px; border-radius: 50%; border: 2.5px solid var(--gc, var(--bubble)); background: var(--white); box-shadow: 0 0 0 2px var(--ink), 1px 3px 0 var(--shadow); pointer-events: auto; transition: opacity .3s; will-change: transform; }
.sight img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.sight.away { opacity: 0; pointer-events: none; }
.sight-ring { position: absolute; inset: -3px; border-radius: 50%; border: 2.5px solid var(--gc, var(--bubble)); opacity: 0; pointer-events: none; animation: sightPing 2.8s ease-out infinite; }
.sight.fresh .sight-ring { animation-duration: 1.1s; }
.sight::after { content: ""; position: absolute; inset: -6px; }
@keyframes sightPing { 0% { transform: scale(.9); opacity: .9; } 70%, 100% { transform: scale(2.1); opacity: 0; } }
.sight-bubble { position: absolute; z-index: 9; left: 12px; top: 66px; max-width: calc(100% - 90px); padding: 8px 14px; border: var(--b); border-radius: 16px 16px 16px 4px; background: var(--bubble); color: var(--white); font: 400 16px/1.2 var(--f-display); box-shadow: 3px 5px 0 var(--ink); text-align: left; }
.sight-bubble.go { animation: bubbleIn .6s var(--boing) both; }
@keyframes bubbleIn { 0% { transform: scale(.3) rotate(-10deg); opacity: 0; } 60% { transform: scale(1.08) rotate(2deg); opacity: 1; } 100% { transform: rotate(-2deg); } }

/* ---------- sonar ---------- */
.sonar-view { display: grid; place-items: center; align-content: center; padding: 56px 12px 90px; }
.sonar { position: relative; width: 300px; height: 300px; }
.sonar-plate { position: absolute; inset: 0; }
.sonar-plate svg { width: 100%; height: 100%; overflow: visible; }
.sonar-sweep { position: absolute; inset: 5%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 95, 168, .42), rgba(255, 95, 168, 0) 24%, rgba(255, 95, 168, 0)); pointer-events: none; }
.anim-sweep { animation: spin 6s linear infinite; }
.sonar-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sonar-me { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); padding: 2px 10px; background: var(--ink); color: var(--white); border-radius: 10px; font: 400 15px/1.4 var(--f-display); white-space: nowrap; z-index: 3; pointer-events: none; }
.sonar-blips { position: absolute; inset: 0; }
.blip { position: absolute; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 2px; z-index: 2; }
.blip-face { width: 44px; height: 44px; padding: 3px; border-radius: 50%; background: var(--white); border: 3px solid var(--gc); box-shadow: 0 0 0 2px var(--ink), 2px 4px 0 var(--shadow); overflow: hidden; }
.blip-face img { width: 100%; height: 100%; object-fit: contain; }
.blip-l i { font-style: normal; color: var(--gt, var(--gc)); }
.blip-l { padding: 0 7px; border-radius: 999px; background: var(--white); border: 2px solid var(--ink); font: 400 12px/1.4 var(--f-display); white-space: nowrap; }
.blip.live .blip-face { animation: blipLive 1.4s ease-in-out infinite; }
.blip[aria-pressed="true"] .blip-face { box-shadow: 0 0 0 2px var(--ink), 0 0 0 7px var(--gc); }
@keyframes blipLive { 50% { transform: scale(1.12); } }
.sonar-note { position: absolute; bottom: 64px; left: 0; right: 0; margin: 0; text-align: center; font-size: 13px; color: var(--ink-2); padding: 0 16px; }

/* ---------- tarjeta de enfoque (grupo elegido) ---------- */
.focus {
  position: absolute; z-index: 8; left: 10px; right: 10px; bottom: 58px;
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 10px 12px 10px 10px; background: var(--white); border: var(--b); border-radius: var(--r-2);
  box-shadow: 4px 6px 0 var(--gc);
  animation: popIn .45s var(--boing) both;
}
.focus .f-face { width: 76px; height: 58px; padding: 3px; border-radius: 16px; background: color-mix(in srgb, var(--gc) 18%, var(--white)); overflow: hidden; border: 2px solid var(--ink); }
.focus .f-face img { width: 100%; height: 100%; object-fit: contain; }
.focus .f-name { margin: 0; font: 400 21px/1.05 var(--f-display); }
.focus .f-name small { font: 700 15px var(--f-hand); color: var(--gt, var(--gc)); margin-left: 4px; }
.focus .f-where { margin: 2px 0 0; font-size: 14.5px; line-height: 1.3; color: var(--ink-2); overflow-wrap: anywhere; }
.focus .f-where b { color: var(--ink); }
.focus .f-dday { font: 400 30px/1 var(--f-display); color: var(--gt, var(--gc)); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; text-align: right; white-space: nowrap; }
.focus .f-acts { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.focus .f-x { position: absolute; top: -14px; right: -8px; width: 34px; height: 34px; border-radius: 50%; border: var(--b); background: var(--white); display: grid; place-items: center; padding: 0; box-shadow: var(--sh-1); }
.focus .f-x::after { content: ""; position: absolute; inset: -6px; }
.focus .f-x svg { width: 16px; height: 16px; }
@keyframes popIn { from { opacity: 0; transform: translateY(18px) scale(.92) rotate(-2deg); } to { opacity: 1; transform: none; } }

.act {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px;
  border-radius: 999px; border: 2px solid var(--ink); background: var(--white); font-weight: 700; font-size: 14.5px; white-space: nowrap;
  box-shadow: 0 2px 0 var(--shadow); transition: transform .16s var(--ease), background-color .2s;
  position: relative;
}
.act::after { content: ""; position: absolute; inset: -3px 0; }
.act svg { width: 18px; height: 18px; }
.act.solid { background: var(--gc, var(--bubble)); color: var(--on); }
.act.ico { width: 44px; padding: 0; justify-content: center; }
@media (hover: hover) and (pointer: fine) { .act:hover { transform: translateY(-2px); } }

/* ---------- riel de grupos ---------- */
.rail {
  position: relative; z-index: 9; margin-top: -46px;
  display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 8px 16px 14px; scroll-padding: 0 16px; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.r-item {
  --gc: var(--ink);
  flex: none; width: 162px; scroll-snap-align: start;
  display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 2px 8px;
  padding: 7px 10px 7px 7px; text-align: left;
  background: var(--white); border: var(--b); border-radius: 18px; box-shadow: 0 4px 0 var(--gc);
  transition: transform .25s var(--boing), box-shadow .25s;
  position: relative;
}
.r-item:nth-child(odd) { transform: rotate(-1.5deg); }
.r-item:nth-child(even) { transform: rotate(1.2deg); }
.r-item[aria-pressed="true"] { transform: translateY(-5px) rotate(0); box-shadow: 0 8px 0 var(--gc), 0 0 0 3px var(--gc); }
.r-face { grid-row: span 2; width: 54px; height: 44px; padding: 2px; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--gc) 16%, var(--white)); }
.r-face img { width: 100%; height: 100%; object-fit: contain; }
.r-name { font: 400 17px/1.05 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-name.long { font-size: 14.5px; letter-spacing: -.01em; }
.r-st { font-size: 13px; line-height: 1.2; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-st b { color: var(--gt, var(--gc)); font-weight: 800; }
.r-item.live .r-st b { color: var(--live); }
.r-item.live::before { content: "LIVE"; position: absolute; top: -10px; right: 8px; padding: 0 7px; border-radius: 6px; background: var(--live); color: var(--on); font: 400 11.5px/1.5 var(--f-display); border: 2px solid var(--ink); transform: rotate(4deg); }

/* ---------- cinta de avistamientos (estilo noticiero) ---------- */
.ticker { position: relative; z-index: 9; display: flex; align-items: center; gap: 10px; margin: 0 12px; min-height: 44px; padding: 5px 6px 5px 6px; background: var(--ink); color: var(--white); border-radius: 16px; text-decoration: none; overflow: hidden; box-shadow: 0 4px 0 var(--shadow); }
.ticker-k { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 3px; border-radius: 11px; background: var(--bubble); color: #2E2150; font: 400 13px/1.2 var(--f-display); letter-spacing: .03em; }
.ticker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--white); animation: dotBlink 1.4s ease-in-out infinite; }
@keyframes dotBlink { 50% { opacity: .25; } }
.ticker-vp { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.ticker-track { display: inline-flex; white-space: nowrap; font-weight: 700; font-size: 14.5px; }
.anim-ticker { animation: tick var(--tk, 30s) linear infinite; }
.ticker:hover .anim-ticker { animation-play-state: paused; }
.tk-run { display: inline-flex; gap: 26px; padding-right: 26px; }
.tk-i { display: inline-flex; align-items: center; gap: 6px; }
.tk-i::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gc, var(--bubble)); box-shadow: 0 0 0 2px var(--white); }
.tk-i b { font-family: var(--f-display); font-weight: 400; color: var(--butter); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- sección: tu ciudad ---------- */
.sec-title, .near h2 { margin: 0 0 14px; font: 400 clamp(26px, 7vw, 34px)/1.08 var(--f-display); letter-spacing: -.01em; }
.sec-title .ko, .near h2 .ko { display: inline-block; font-size: .62em; color: var(--white); background: var(--ink); padding: 2px 9px 0; border-radius: 9px; transform: rotate(-3deg) translateY(-4px); margin-right: 4px; }
.near-head { display: grid; gap: 10px; }
.near h2 { margin: 0; }
.near-ctrls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.select-sticker { position: relative; flex: 1 1 200px; min-width: 0; }
.select-sticker select {
  width: 100%; min-height: 46px; appearance: none; -webkit-appearance: none; font-size: 16px; font-weight: 700;
  padding: 8px 40px 8px 16px; background: var(--white); border: var(--b); border-radius: 999px; box-shadow: var(--sh-1);
}
.select-sticker::after { content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.near-card { margin-top: 14px; }
.geo-note { margin: 12px 0 0; padding: 8px 12px; border-radius: 14px; background: var(--white); border: 2px dashed var(--bubble); font-size: 14.5px; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.geo-note .link-btn { padding: 8px 2px; min-height: 40px; }
.geo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bubble); animation: dotBlink 1s ease-in-out infinite; }
.nearest {
  --gc: var(--bubble);
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; align-items: center;
  padding: 16px; background: var(--butter); border: var(--b); border-radius: var(--r-2); box-shadow: var(--sh-2);
  transform: rotate(-.8deg);
}
.nearest .n-face { grid-row: span 3; width: 96px; height: 80px; }
.nearest .n-face img { width: 100%; height: 100%; object-fit: contain; }
.nearest .n-k { margin: 0; font-weight: 800; font-size: 14px; color: var(--ink-2); }
.nearest .n-v { margin: 0; font: 400 23px/1.12 var(--f-display); overflow-wrap: anywhere; }
.nearest .n-v b { font-weight: 400; color: var(--gt, var(--gc)); }
.nearest .n-s { margin: 0; font-size: 15px; font-weight: 600; }
.meta { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.meta .off { color: var(--live); font-weight: 700; }

/* ---------- tarjetas de grupo (photocards) ---------- */
.cards { display: grid; gap: 30px; }
.card {
  --gc: var(--ink);
  position: relative; padding: 18px 16px 16px; background: var(--white); border: var(--b); border-radius: var(--r-3);
  box-shadow: 5px 7px 0 var(--gc);
  display: grid; gap: 12px; min-width: 0;
  transition: box-shadow .3s, transform .4s var(--boing);
}
.card:nth-child(odd) { transform: rotate(-.6deg); }
.card:nth-child(even) { transform: rotate(.5deg); }
.card.is-sel { box-shadow: 5px 7px 0 var(--gc), 0 0 0 4px color-mix(in srgb, var(--gc) 40%, var(--white)); }
.card.flash { animation: arrive .8s var(--boing); }
@keyframes arrive { 30% { transform: scale(1.03) rotate(-1deg); } }
.tape { position: absolute; top: -13px; left: 50%; width: 112px; height: 26px; transform: translateX(-50%) rotate(-3deg); opacity: .9;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--gc) 45%, var(--white)) 0 8px, color-mix(in srgb, var(--gc) 22%, var(--white)) 8px 16px);
  clip-path: polygon(0 0, 4% 20%, 0 40%, 4% 60%, 0 80%, 4% 100%, 100% 100%, 96% 80%, 100% 60%, 96% 40%, 100% 20%, 96% 0); }
.c-top { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.c-id { min-width: 0; }
.c-face { position: relative; width: 96px; height: 84px; margin-top: -40px; }
.c-face img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.c-face.cheer img { animation: cheer .9s var(--boing); }
.c-ko { margin: 0; font: 700 17px/1 var(--f-hand); color: var(--gt, var(--gc)); }
.c-name { margin: 2px 0 0; font: 400 clamp(30px, 9vw, 38px)/.95 var(--f-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.c-name { word-break: keep-all; overflow-wrap: normal; }
.c-name.long { font-size: clamp(25px, 7.4vw, 34px); }
.c-name.xlong { font-size: clamp(22px, 6.4vw, 32px); letter-spacing: -.02em; }
.c-tour { margin: 4px 0 0; font-size: 14px; line-height: 1.25; color: var(--ink-2); font-weight: 600; }
.bias { width: 44px; height: 44px; border-radius: 50%; border: var(--b); background: var(--white); display: grid; place-items: center; padding: 0; box-shadow: var(--sh-1); align-self: start; transition: transform .3s var(--boing), background-color .2s; }
.bias svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.bias[aria-pressed="true"] { background: var(--gc); transform: rotate(-10deg) scale(1.06); }
.bias[aria-pressed="true"] svg { fill: var(--on); stroke: var(--ink); }
.c-state { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 2px 12px 1px; border-radius: 10px; font: 400 15px/1.5 var(--f-display); background: color-mix(in srgb, var(--gc) 16%, var(--white)); border: 2px solid var(--ink); transform: rotate(-2deg); }
.c-state .ko { font-size: 16px; }
.c-state.live { background: var(--live); color: var(--on); }
.c-state.rest { background: var(--lilac); }
.c-where { margin: 0; font: 400 clamp(25px, 7.4vw, 30px)/1.1 var(--f-display); overflow-wrap: anywhere; }
.c-where small { display: block; font: 600 15px/1.35 var(--f-body); color: var(--ink-2); margin-top: 4px; }
.c-when { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.c-when b { color: var(--ink); }
.tag { display: inline-block; padding: 0 7px; border-radius: 6px; border: 1.5px dashed var(--ink-2); font-size: 12.5px; font-weight: 700; vertical-align: 1px; }

.cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cd-t { position: relative; display: grid; justify-items: center; padding: 8px 2px 6px; border-radius: 16px; background: color-mix(in srgb, var(--gc) 12%, var(--white)); border: 2px solid var(--ink); overflow: hidden; box-shadow: 0 3px 0 var(--gc); }
.cd-n { position: relative; height: 1em; width: 100%; font: 400 clamp(34px, 11vw, 46px)/1 var(--f-display); text-align: center; font-variant-numeric: tabular-nums; overflow: hidden; }
.cd-n span { display: block; }
.cd-n span.in { animation: rollIn .42s var(--ease) both; }
.cd-n span.out { position: absolute; inset: 0; animation: rollOut .42s var(--ease) both; }
@keyframes rollIn { from { transform: translateY(-80%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rollOut { to { transform: translateY(80%); opacity: 0; } }
.cd-l { font-size: 12.5px; font-weight: 700; color: var(--ink-2); line-height: 1.2; text-align: center; }
.cd-l .ko { font-size: 16px; color: var(--ink); display: block; line-height: 1; }
.cd-live { padding: 16px; text-align: center; border-radius: 18px; background: var(--live); color: var(--on); border: var(--b); font: 400 26px/1.15 var(--f-display); box-shadow: 0 4px 0 var(--ink); position: relative; overflow: hidden; }
.cd-live .ko { display: block; font-size: 20px; }
.cd-rest { padding: 14px 16px; border-radius: 18px; border: 2px dashed var(--ink-2); background: color-mix(in srgb, var(--lilac) 50%, var(--white)); font-weight: 600; font-size: 15px; display: flex; gap: 12px; align-items: center; }
.cd-rest b { font: 400 30px/1 var(--f-display); color: var(--gt, var(--gc)); }

.facts { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
.km { font: 400 clamp(30px, 9vw, 38px)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.km small { font: 700 14.5px var(--f-body); color: var(--ink-2); }
.fly { font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.dday { margin-left: auto; padding: 2px 12px 0; border-radius: 12px; background: var(--ink); color: var(--white); font: 400 22px/1.4 var(--f-display); transform: rotate(3deg); }
.acts { display: flex; flex-wrap: wrap; gap: 8px; }
.acts { gap: 6px; }
.acts .act { padding-inline: 10px; }
.watch { margin: 0; padding: 12px 14px; list-style: none; display: grid; gap: 6px; border-radius: 16px; background: var(--paper); font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.watch li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; }
.watch li::before { content: ""; width: 10px; height: 10px; margin-top: 6px; background: var(--gc); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

details.agenda { border-top: 2px dashed var(--grid); padding-top: 4px; }
details.agenda summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; font-size: 15.5px; }
details.agenda summary::-webkit-details-marker { display: none; }
details.agenda summary::before { content: ""; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--gc); border: 2px solid var(--ink);
  clip-path: none; box-shadow: inset 0 0 0 4px var(--white); transition: transform .3s var(--boing); }
details.agenda[open] summary::before { transform: rotate(90deg) scale(1.1); background: var(--butter); }
.stubs { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.stub { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px 9px 10px; border-radius: 12px; background: color-mix(in srgb, var(--gc) 9%, var(--white)); border: 1.5px solid color-mix(in srgb, var(--gc) 45%, var(--white)); }
.stub::before, .stub::after { content: ""; position: absolute; left: 80px; width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 1.5px solid color-mix(in srgb, var(--gc) 45%, var(--white)); }
.stub::before { top: -7px; } .stub::after { bottom: -7px; }
.stub .s-d { font: 400 15px/1.15 var(--f-display); color: var(--gt, var(--gc)); border-right: 2px dashed color-mix(in srgb, var(--gc) 40%, var(--white)); padding-right: 6px; }
.stub .s-c { min-width: 0; font-weight: 700; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.stub .s-c span { display: block; font-weight: 500; font-size: 13px; color: var(--ink-2); }
.stub .s-k { font: 400 14px var(--f-display); white-space: nowrap; }
.stub.past { opacity: .55; }

/* ---------- feed de alertas ---------- */
.bubbles { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.bub { --gc: var(--bubble); display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; animation: popIn .45s var(--boing) both; }
.bub-face { width: 52px; height: 42px; padding: 2px; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--gc) 18%, var(--white)); border: 2px solid var(--ink); }
.bub-face img { width: 100%; height: 100%; object-fit: contain; }
.bub-body { position: relative; padding: 10px 14px 12px; background: var(--white); border: 2px solid var(--ink); border-radius: 4px 18px 18px 18px; box-shadow: 0 3px 0 var(--gc); min-width: 0; }
.bub-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--ink-2); font-weight: 700; }
.bub-h .typ { padding: 0 7px; border-radius: 6px; background: var(--gc); color: var(--on); font: 400 12.5px/1.5 var(--f-display); }
.bub-h time { margin-left: auto; font-weight: 600; }
.bub-t { margin: 4px 0 2px; font-weight: 800; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.bub-t a { text-decoration-color: var(--gc); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bub-b { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.bub.empty .bub-body { border-style: dashed; box-shadow: none; }
.bub.fresh .bub-body { box-shadow: 0 3px 0 var(--gc), 0 0 0 3px color-mix(in srgb, var(--gc) 35%, var(--white)); }
.bub.flash .bub-body { animation: arrive .8s var(--boing); }
.s-link { display: inline-flex; align-items: center; min-height: 40px; margin-top: 2px; font-weight: 800; font-size: 14.5px; text-decoration: underline; text-decoration-color: var(--gc); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sample-tag { margin: -6px 0 14px; display: inline-block; padding: 4px 12px; border-radius: 10px; border: 2px dashed var(--ink-2); background: var(--butter); font-weight: 700; font-size: 14px; transform: rotate(-1deg); }
.sight-src { margin: 0; font-size: 13px; color: var(--ink-2); }

/* ---------- formulario de alertas ---------- */
.sub-lead { margin: -4px 0 16px; font-size: 16px; color: var(--ink-2); max-width: 46ch; }
.sub-form { display: grid; gap: 16px; padding: 18px 16px; background: var(--white); border: var(--b); border-radius: var(--r-3); box-shadow: var(--sh-2); }
.tabs { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; border-radius: 999px; background: var(--paper); border: 2px solid var(--ink); }
.tabs button { position: relative; z-index: 1; min-height: 44px; border: 0; background: none; border-radius: 999px; font-weight: 800; font-size: 16px; transition: color .2s; }
.tabs button[aria-selected="true"] { color: var(--on); }
.tab-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 2); border-radius: 999px; background: #338574; transition: transform .38s var(--boing), background-color .3s; }
.tabs[data-ch="discord"] .tab-pill { transform: translateX(100%); background: #5865F2; }
.tabs button small { font-size: 12px; font-weight: 700; opacity: .75; }
/* pasos del formulario de alertas */
.step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--ink); color: var(--white); font: 400 14px/1 var(--f-display); vertical-align: 1px; }
.sub-form .legend { margin: 0; font-weight: 800; font-size: 15px; }
.ntfy-only, .dc-only { display: grid; gap: 16px; }
.ntfy-only[hidden], .dc-only[hidden] { display: none; }
.sub-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.sub-extra .check { flex: 1 1 auto; }
.select-sticker.small { flex: 1 1 160px; }
.select-sticker.small select { min-height: 44px; font-size: 15px; }
.stores { display: flex; flex-wrap: wrap; gap: 8px; }
.store { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 14px 6px 10px; border-radius: 12px; background: var(--ink); color: var(--white); text-decoration: none; font: 800 15px/1.1 var(--f-body); box-shadow: 0 3px 0 #338574; }
.store svg { width: 24px; height: 24px; fill: currentColor; }
.store small { display: block; font-size: 10.5px; font-weight: 600; opacity: .8; }
.topics { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 8px; }
.topics li { --gc: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 16px; border: 2px solid var(--ink); background: color-mix(in srgb, var(--gc) 7%, var(--white)); box-shadow: 0 3px 0 color-mix(in srgb, var(--gc) 55%, transparent); }
.topics li.done { background: color-mix(in srgb, var(--mint) 60%, var(--white)); }
.topics li.done .tp-l::after { content: " ✓"; color: #1E8E5A; }
.tp-txt { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; }
.tp-l { font-weight: 800; font-size: 14px; }
.tp-txt code { font: 600 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2); overflow-wrap: anywhere; user-select: all; }
.tp-acts { display: flex; gap: 6px; flex: none; }
.tp-acts .act { min-height: 40px; padding: 4px 12px; font-size: 13.5px; text-decoration: none; }
.tp-acts .act.solid { --gc: #338574; }
.hint.warn { color: var(--live); font-weight: 700; }
.dc-steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.dc-steps .btn { text-decoration: none; }
.dc-soon { margin: 0; padding: 14px; border-radius: 16px; border: 2px dashed #5865F2; background: color-mix(in srgb, #5865F2 8%, var(--white)); font-size: 15px; line-height: 1.45; }
.pv-thread { font-size: 12.5px; opacity: .75; }
.tabs button { font-size: 15px; padding: 0 4px; }
.preview-bubble.push { background: var(--white); color: var(--ink); border: 1.5px solid var(--grid); border-radius: 18px; box-shadow: 0 6px 18px rgba(46, 33, 80, .14); }
.pv-app { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 2px; }
.pv-app img { border-radius: 5px; }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font-weight: 800; font-size: 15px; padding: 0; }
.field input:not([type="checkbox"]):not([type="range"]) { width: 100%; min-height: 48px; font-size: 16px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); }
.field input:focus { outline: none; border-color: var(--bubble); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bubble) 35%, var(--white)); background: var(--white); }
.field input[aria-invalid="true"] { border-color: var(--live); }
.hint { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.err { margin: 0; font-size: 14px; font-weight: 700; color: #C4145E; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600 !important; font-size: 15px !important; min-height: 44px; padding-top: 6px; }
.check input { width: 22px; height: 22px; accent-color: var(--bubble); flex: none; margin: 1px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 13px; border-radius: 999px; border: 2px solid var(--ink); background: var(--white); font-weight: 700; font-size: 14.5px; transition: background-color .2s, transform .25s var(--boing); }
.chip span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); }
.chip input:checked + span { background: color-mix(in srgb, var(--gc, var(--bubble)) 22%, var(--white)); transform: rotate(-2deg); }
.chip input:checked + span::before { background: var(--gc, var(--bubble)); }
.chip input:focus-visible + span { outline: 3px solid var(--bubble); outline-offset: 2px; }
input[type="range"] { width: 100%; accent-color: var(--bubble); min-height: 32px; }
.preview { display: grid; gap: 6px; }
.preview-k { margin: 0; font-weight: 800; font-size: 14px; color: var(--ink-2); }
.preview-bubble { justify-self: start; max-width: 100%; padding: 10px 14px 8px; border-radius: 4px 16px 16px 16px; font-size: 15px; line-height: 1.45; transition: background-color .3s; overflow-wrap: anywhere; }
.preview-bubble.discord { background: #313338; color: #F2F3F5; border-left: 4px solid #5865F2; border-radius: 8px; }
.preview-bubble.discord b { color: #fff; }
.preview-bubble.whatsapp { background: #DCF8C6; color: #111B21; border: 1.5px solid #B9E3A2; }
.preview-bubble .pv-meta { display: block; text-align: right; font-size: 12px; opacity: .7; margin-top: 2px; }
.privacy { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sub-result { padding: 14px; border-radius: 16px; background: var(--mint); border: 2px solid var(--ink); font-size: 15px; display: grid; gap: 10px; }
.sub-result p { margin: 0; }
.sub-result pre { margin: 0; max-height: 180px; overflow: auto; padding: 10px; border-radius: 10px; background: var(--white); font-size: 12.5px; line-height: 1.4; white-space: pre-wrap; word-break: break-all; }

/* ---------- el grupo completo en la tarjeta: toca a cada miembro ---------- */
.squad-wrap { display: grid; gap: 6px; }
.squad-k { margin: 0; font-weight: 800; font-size: 14px; color: var(--ink-2); }
.squad-k b { color: var(--gt, var(--gc)); }
.squad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 2px; }
.mem { position: relative; width: 100%; border: 0; background: none; padding: 16px 0 0; display: grid; justify-items: center; gap: 0; border-radius: 14px; }
.mem img { width: 50px; height: auto; aspect-ratio: 132 / 174; transform-origin: 50% 94%; animation: breathe 2.6s ease-in-out var(--dl, 0s) infinite; pointer-events: none; }
.bias-badge { position: absolute; z-index: 2; top: 10px; right: calc(50% - 34px); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--bubble); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); animation: biasBeat 2.4s ease-in-out infinite; pointer-events: none; }
.bias-badge svg { width: 13px; height: 13px; fill: var(--on); stroke: none; }
.gp-mems .bias-badge { top: 6px; right: 6px; }
.mem.is-bias .mem-n { color: var(--gt, var(--gc)); }
.gp-mems button.is-bias { border-color: var(--gc); box-shadow: 0 4px 0 var(--gc), 0 0 0 3px color-mix(in srgb, var(--gc) 30%, transparent); }
@keyframes biasBeat { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.22); } 86% { transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { .bias-badge { animation: none; } }
.bias-mem { display: inline-flex; align-items: center; gap: 7px; margin: 8px 0 4px; }
.bias-mem svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.bias-mem[aria-pressed="true"] { background: var(--bubble); color: var(--on); box-shadow: 0 3px 0 var(--ink); }
.bias-mem[aria-pressed="true"] svg { fill: var(--on); stroke: var(--ink); }
.mem-n { font: 400 clamp(10.5px, 3.1vw, 12.5px)/1.15 var(--f-display); text-align: center; max-width: 100%; white-space: nowrap; letter-spacing: -.01em; }
.mem-say { position: absolute; top: -4px; left: 50%; transform: translateX(-50%) scale(.4); padding: 1px 8px; border-radius: 10px; background: var(--gc); color: var(--on); border: 2px solid var(--ink); font: 700 14px/1.3 var(--f-hand); white-space: nowrap; opacity: 0; pointer-events: none; z-index: 2; }
.mem.hop img { animation: memHop .7s var(--boing) both; }
.mem.hop .mem-say { animation: say 1.6s var(--boing) both; }
.mem.off img { opacity: .45; filter: grayscale(.6); }
.mem.off .mem-n { color: var(--ink-2); }

/* estado de cada miembro: servicio militar (gris y quieto), por enlistarse, de regreso, contrato pendiente */
.ms-badge { position: absolute; top: 12px; right: calc(50% - 30px); z-index: 1; width: 22px; height: 22px; display: grid; place-items: center; font-size: 12.5px; line-height: 1; border-radius: 50%; background: var(--white); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--gc); pointer-events: none; }
.ms-back { background: var(--butter); animation: wiggle 1.8s ease-in-out infinite; }
.away img { filter: grayscale(1) contrast(.9); opacity: .5; animation: none !important; }
.away .mem-n, .away b { color: var(--ink-2); }
.st-back img { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gc) 60%, #FFD84D)); }
.gp-mems .ms-badge { top: 8px; right: 8px; width: 26px; height: 26px; font-size: 14px; }
.gp-mems .away { background: repeating-linear-gradient(135deg, #fff 0 10px, #F4F1F8 10px 20px); box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 25%, transparent); }
.gp-mems small.ms-s { color: var(--ink-2); text-align: center; line-height: 1.25; }
.gp-big-chibi.away img { filter: grayscale(1); opacity: .6; }
.ms-list { border: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 16px; padding: 6px 12px; background: color-mix(in srgb, var(--gc) 5%, var(--white)); }
.ms-list summary { cursor: pointer; font-weight: 800; font-size: 14px; padding: 4px 0; list-style: none; }
.ms-list summary::-webkit-details-marker { display: none; }
.ms-list summary::after { content: " ▾"; color: var(--gt, var(--gc)); }
.ms-list[open] summary::after { content: " ▴"; }
.ms-list ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.ms-list li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; }
.ms-list li img { width: 34px; aspect-ratio: 132 / 174; }
.ms-list li img.gray { filter: grayscale(1); opacity: .6; }
.ms-list li b { font: 400 15px/1.1 var(--f-display); display: block; }
.ms-list li small { font-size: 12.5px; color: var(--ink-2); font-weight: 700; }
.ms-bar { display: block; height: 6px; margin-top: 4px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.ms-bar i { display: block; height: 100%; border-radius: inherit; background: var(--gc); }
.ms-foot { margin: 8px 0 4px; font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.ms-note { margin: 6px 0; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--gc) 8%, var(--white)); border: 2px dashed color-mix(in srgb, var(--gc) 45%, transparent); font-size: 13.5px; line-height: 1.45; display: grid; gap: 2px; }
.ms-note.ms-back { background: var(--butter); border-style: solid; }
.ms-note span { color: var(--ink-2); }

/* exintegrantes: recuerdo en gris, con el motivo */
.former { display: grid; gap: 6px; margin-top: 2px; }
.former ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fm { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 16px; background: #F6F4F8; border: 2px dashed color-mix(in srgb, var(--ink) 28%, transparent); }
.fm-pic { position: relative; display: block; width: 54px; }
.fm-pic img { width: 54px; aspect-ratio: 132 / 174; filter: grayscale(1) sepia(.15) contrast(.92); opacity: .62; }
.fm-pic::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 2px; height: 2px; background: color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 2px; }
.fm p { margin: 0; }
.fm-n b { font: 400 15.5px/1.15 var(--f-display); }
.fm-tag { display: inline-block; margin-left: 2px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--ink-2); background: var(--white); border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); white-space: nowrap; }
.fm-t { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.fm-back { background: var(--butter); border-style: solid; border-color: var(--ink); }
.fm-back .fm-pic img { filter: none; opacity: 1; }
.fm-back .fm-tag { background: var(--gc); color: var(--on); border-color: var(--ink); }
@keyframes say { 0% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.4); } 20%, 75% { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1) rotate(-4deg); } 100% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.9); } }
@media (hover: hover) and (pointer: fine) { .mem:hover img { animation-duration: 1s; } }

/* foto oficial: polaroid, la imagen completa sin recortar */
.polaroid { justify-self: center; margin: 4px 0; max-width: 100%; padding: 10px 10px 8px; background: var(--white); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 4px 6px 0 var(--gc); transform: rotate(1.2deg); }
.polaroid img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(210px, 52vw); margin: 0 auto; border-radius: 2px; background: var(--paper); }
.polaroid figcaption { margin-top: 6px; text-align: center; font: 700 17px/1.2 var(--f-hand); color: var(--ink-2); }

/* mini trivia */
.trivia .tq { margin: 6px 0 0; padding: 0 0 0 20px; display: grid; gap: 12px; }
.trivia .tq p { margin: 0 0 6px; font-weight: 700; font-size: 15px; }
.tq-o { display: flex; flex-wrap: wrap; gap: 6px; }
.src-link { font-size: 13px; font-weight: 800; color: var(--ink); text-decoration: underline wavy color-mix(in srgb, var(--gc) 70%, transparent); text-underline-offset: 3px; }
.next-rel { margin: 0; padding: 9px 13px; border-radius: 14px; background: color-mix(in srgb, var(--gc) 14%, var(--white)); border: 2px dashed color-mix(in srgb, var(--gc) 55%, transparent); font-weight: 700; font-size: 14.5px; }
.next-rel .ko { color: var(--gt, var(--gc)); font-weight: 900; margin-right: 2px; }
.next-rel.rel-today { background: var(--butter); border-style: solid; border-color: var(--ink); animation: wiggle 2.4s ease-in-out infinite; }
.next-rel .tag { font-size: 11px; }
.next-rel a { color: var(--ink); text-decoration: underline wavy color-mix(in srgb, var(--gc) 70%, transparent); text-underline-offset: 3px; }
.nt-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.nt-list li { display: grid; gap: 2px; padding: 9px 12px; border-radius: 14px; background: var(--paper); }
.nt-list a { color: var(--ink); font-weight: 700; font-size: 14px; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.nt-list small { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.nt-src { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: #1CC8D8; color: #fff; font-size: 11px; font-weight: 800; vertical-align: 1px; }
.listen { display: grid; gap: 6px; }
.listen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ln { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 4px 13px 4px 5px; border-radius: 999px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-weight: 800; font-size: 13.5px; text-decoration: none; box-shadow: 0 3px 0 var(--gc); transition: transform .25s var(--boing), box-shadow .2s; }
.ln-ico { width: 34px; height: 34px; flex: none; color: var(--ink); transform: rotate(-7deg); filter: drop-shadow(1.5px 2px 0 color-mix(in srgb, var(--gc) 75%, var(--white))); transition: transform .35s var(--boing); }
.listen li:nth-child(even) .ln-ico { transform: rotate(6deg); }
.ln-s { display: none; }
.ln:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gc); }
@media (hover: hover) and (pointer: fine) { .ln:hover { transform: translateY(-2px); } .ln:hover .ln-ico { transform: rotate(0) scale(1.15); } }
.st-ag { margin: 4px 0 8px; font-size: 14px; color: var(--ink-2); }
.st-ag b { color: var(--ink); }
.st-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(132px, 44%), 1fr)); gap: 8px; }
.st-grid li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--gc) 10%, var(--white)); border: 2px solid color-mix(in srgb, var(--gc) 40%, transparent); }
.st-grid b { font: 400 22px/1.1 var(--f-display); color: var(--ink); overflow-wrap: anywhere; }
.st-grid span { font-size: 12.5px; font-weight: 700; color: var(--ink-2); line-height: 1.25; }
.st-grid li.wide { grid-column: 1 / -1; }
.st-grid li.wide { gap: 8px; }
.st-grid li.wide b { font-size: 20px; }
.st-grid a { color: inherit; text-decoration: underline wavy color-mix(in srgb, var(--gc) 70%, transparent); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.st-src { margin: 8px 0 4px; font-size: 12px; color: var(--ink-2); }
.chip-btn { min-height: 44px; padding: 6px 13px; border-radius: 999px; border: 2px solid var(--ink); background: var(--white); font-weight: 700; font-size: 14.5px; transition: transform .25s var(--boing), background-color .2s; }
.chip-btn.right { background: var(--mint); transform: rotate(-2deg) scale(1.04); }
.chip-btn.wrong { background: #FFD3DF; text-decoration: line-through; }
.chip-btn:disabled { cursor: default; color: var(--ink); }
.trivia .tq-r { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); font-weight: 700; }
.trivia .tq-score { margin: 8px 0 0; font: 400 16px var(--f-display); color: var(--gt, var(--gc)); }

/* venta de boletas */
.onsale { justify-self: start; margin: 0; padding: 6px 12px; border-radius: 12px; border: 2px solid var(--ink); background: var(--butter); font: 400 16px/1.3 var(--f-display); transform: rotate(-1.5deg); }
.onsale small { display: block; font: 600 13px var(--f-body); color: var(--ink-2); }
.near-me { justify-self: start; margin: 0; padding: 8px 14px 9px; border-radius: 16px; border: 2px solid var(--ink); background: var(--bubble); color: var(--on); transform: rotate(1deg); box-shadow: 0 3px 0 var(--ink); animation: nearIn .7s var(--boing) both; display: grid; gap: 2px; }
.near-me .nm-k { margin: 0; font: 400 16px/1.25 var(--f-display); }
.near-me .ko { font: 700 15px var(--f-hand); color: var(--butter); }
.near-me b { display: block; font: 400 26px/1.1 var(--f-display); letter-spacing: -.01em; }
.near-me small { display: block; font: 700 13px var(--f-body); color: var(--on); }
.near-me .nm-now { font-weight: 600; opacity: .95; }
.cards > .card > .near-me { align-self: flex-start; }
.cd.mini { display: flex; gap: 6px; margin: 4px 0 2px; font: 700 13px var(--f-body); }
.cd.mini .cd-t { display: inline-flex; align-items: baseline; gap: 1px; padding: 2px 7px; border-radius: 9px; background: var(--white); color: var(--ink); border: 0; box-shadow: none; min-width: 0; }
.cd.mini .cd-n { font: 400 19px/1 var(--f-display); height: 1em; width: 2.1ch; display: inline-block; }
@keyframes nearIn { 0% { transform: rotate(8deg) scale(.6); opacity: 0; } 70% { transform: rotate(-1deg) scale(1.05); opacity: 1; } 100% { transform: rotate(1deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .near-me { animation: none; } }
.onsale.today { background: var(--live); color: var(--on); animation: onsalePulse 1.4s ease-in-out infinite; }
.onsale.today small { color: var(--on); }
@keyframes onsalePulse { 50% { transform: rotate(1deg) scale(1.03); } }

/* novedades */
.changes-box summary .ko { color: var(--bubble); }
.changes { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 12px; }
.changes > li { padding-left: 12px; border-left: 3px solid var(--grid); }
.ch-v { margin: 0 0 4px !important; color: var(--ink); }
.ch-v b { font: 400 16px var(--f-display); color: var(--bubble); }
.changes ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13.5px; }

/* ---------- pie: escena final ---------- */
.foot { display: grid; gap: 12px; padding-top: 10px; font-size: 14px; color: var(--ink-2); }
.foot p { margin: 0; }
.foot-card { display: grid; justify-items: center; gap: 6px; padding: 18px 16px 18px; border-radius: 26px; background: linear-gradient(180deg, #2E2550 0%, #4A3A7A 100%); color: #EDE7FF; border: var(--b); box-shadow: 0 6px 0 var(--shadow); overflow: hidden; position: relative; text-align: center; }
.foot-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background-image: radial-gradient(circle at 12% 22%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 82% 14%, #fff 0 1.5px, transparent 2.3px), radial-gradient(circle at 64% 38%, #FFE58A 0 1.2px, transparent 2px), radial-gradient(circle at 28% 62%, #fff 0 1px, transparent 1.8px), radial-gradient(circle at 90% 58%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 46% 12%, #FFE58A 0 1px, transparent 1.8px); }
.moon-scene { position: relative; height: 112px; width: min(100%, 330px); }
.moon { position: absolute; left: 50%; bottom: 0; width: min(300px, 92%); height: 62px; transform: translateX(-50%); border-radius: 50% 50% 22px 22px / 100% 100% 22px 22px; background: var(--butter); border: var(--b); box-shadow: 0 5px 0 rgba(0, 0, 0, .25), 0 0 40px rgba(255, 229, 138, .35);
  background-image: radial-gradient(circle at 22% 52%, #F5E07E 0 8px, transparent 9px), radial-gradient(circle at 66% 40%, #F5E07E 0 11px, transparent 12px), radial-gradient(circle at 84% 70%, #F5E07E 0 5px, transparent 6px); }
.moon-chibis { position: absolute; left: 50%; bottom: 40px; z-index: 1; transform: translateX(-50%); display: flex; align-items: flex-end; justify-content: center; width: min(290px, 90%); }
.moon-chibis img { flex: 0 1 auto; min-width: 0; width: 34px; height: auto; aspect-ratio: 132 / 174; margin: 0 -3px; transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .18)); }
.zzz { position: absolute; right: 12%; top: 14px; font: 400 20px var(--f-display); color: #CFC3FF; }
.zzz.z2 { right: 7%; top: 0; font-size: 16px; }
.zzz.z3 { right: 2%; top: -14px; font-size: 24px; }
.anim-zzz { animation: zzz 3.6s ease-in-out infinite; }
.anim-zzz.z2 { animation-delay: .9s; } .anim-zzz.z3 { animation-delay: 1.8s; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 10px); } 30%, 70% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -12px); } }
.bye { font: 400 21px/1.25 var(--f-display); color: #fff; margin-top: 4px !important; }
.bye .ko { display: block; font-size: 17px; color: #FFB3D6; letter-spacing: .04em; }
.foot-lead { max-width: 40ch; font-size: 13.5px; line-height: 1.45; color: #D8CFFF; }
.folds { display: grid; border-radius: 22px; background: var(--white); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--shadow); overflow: hidden; }
.fold + .fold { border-top: 2px dashed var(--grid); }
.fold summary { cursor: pointer; min-height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 16px; font-weight: 800; color: var(--ink); list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2.5px solid var(--ink-2); border-bottom: 2.5px solid var(--ink-2); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.fold[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.fold-i { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--paper); font-size: 15px; }
.fold-n { color: var(--ink-2); font-weight: 700; margin-left: -4px; }
.fold > :not(summary) { margin: 0 16px 14px; }
.fold > p { font-size: 14px; line-height: 1.5; }
.privacy a { font-weight: 700; color: var(--ink); text-decoration-color: var(--bubble); text-decoration-thickness: 2px; text-underline-offset: 3px; display: inline-block; padding: 8px 0; }
.sources { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sources a { display: inline-flex; min-height: 32px; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--grid); text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sources a:hover { border-color: var(--ink); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 10px; padding: 4px 0 8px; font-size: 12.5px; color: var(--ink-2); text-align: center; }
.foot-row > span:first-child::after { content: "·"; margin-left: 10px; }
.credit a { display: inline-block; padding: 10px 0; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--bubble); text-underline-offset: 3px; }

/* ---------- celebración ---------- */
.party { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 50%, rgba(255, 227, 241, .92), rgba(220, 207, 255, .86)); animation: veil .35s ease-out both; }
.party.out { animation: veilOut .35s ease-in both; }
.ios-sheet .party-card { padding-top: 26px; text-align: left; }
.ios-sheet .p-ko, .ios-sheet h2 { text-align: center; }
.ios-steps { margin: 14px 0 18px; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: st; font-weight: 700; font-size: 16px; line-height: 1.35; }
.ios-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.ios-ico { width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--ink); background: var(--lilac); display: grid; place-items: center; }
.ios-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes veil { from { opacity: 0; } }
@keyframes veilOut { to { opacity: 0; } }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.party-card {
  --gc: var(--bubble);
  position: relative; width: min(100%, 380px); padding: 64px 22px 20px; text-align: center;
  background: var(--white); border: 3px solid var(--ink); border-radius: 30px; box-shadow: 7px 10px 0 var(--gc);
  animation: partyPop .7s var(--boing) both;
}
.party-card .tape { top: -15px; width: 140px; height: 30px; }
.party-card .p-chibi { position: absolute; left: 50%; top: -78px; width: auto; max-width: 240px; height: 112px; object-fit: contain; transform: translateX(-50%); animation: partyJump 1s var(--boing) .25s both; }
.party-card .p-ko { margin: 0; font: 700 26px/1 var(--f-hand); color: var(--gt, var(--gc)); }
.party-card h2 { margin: 4px 0 6px; font: 400 clamp(28px, 8vw, 36px)/1.05 var(--f-display); }
.party-card .p-type { display: inline-block; padding: 1px 10px 0; border-radius: 8px; background: var(--gc); color: var(--on); font: 400 15px/1.5 var(--f-display); transform: rotate(-3deg); border: 2px solid var(--ink); }
.party-card .p-t { margin: 12px 0 4px; font-weight: 800; font-size: 18px; line-height: 1.3; }
.party-card .p-b { margin: 0 0 16px; font-size: 15px; color: var(--ink-2); }
.party-card .p-more { margin: -8px 0 14px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.party-card .p-acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
@keyframes partyPop { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.06) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(-1deg); } }
@keyframes partyJump { 0% { transform: translateX(-50%) translateY(60px) scale(.5); opacity: 0; } 60% { transform: translateX(-50%) translateY(-18px) scale(1.08) rotate(-6deg); opacity: 1; } 100% { transform: translateX(-50%); } }

/* ---------- modo video 9:16: tres zonas que nunca se pisan ---------- */
.video { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #E9E1FB; cursor: none; }
.video.show-ui { cursor: auto; }
.video-frame { position: relative; height: 100svh; width: min(100vw, calc(100svh * 9 / 16)); overflow: hidden; isolation: isolate; container-type: size;
  display: grid; grid-template-rows: 19% 49% 32%;
  background-color: #FBF5FF;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px; }
.v-sky { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 44%, #FFE0F0 0, rgba(255, 224, 240, .6) 30%, rgba(255, 255, 255, 0) 60%); }
.v-top { position: relative; z-index: 2; display: grid; place-items: center; padding: 3cqh 6cqw 0; text-align: center; }
.v-zone { position: relative; overflow: hidden; }
.v-zone .g-halo { display: none; }
#vglobe { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-zone .pins { position: absolute; inset: 0; }
.v-zone.dots-only .pin { opacity: 0 !important; }
.video .pin-tag { font-size: clamp(13px, 3.4cqw, 18px); }
.video .pin.star { z-index: 60 !important; }
.v-bottom { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: center; padding: 3cqh 6cqw 0; }
.v-title { animation: popIn .6s var(--boing) both; }
.v-title b { display: inline-block; padding: 6px 18px 2px; background: var(--white); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 5px 7px 0 var(--bubble); font: 400 clamp(18px, min(10cqw, 5.6cqh), 56px)/1 var(--f-display); white-space: nowrap; transform: rotate(-3deg); }
.v-title.small b { font-size: clamp(15px, min(6.6cqw, 3.8cqh), 36px); box-shadow: 4px 5px 0 var(--bubble); }
.v-title b em { font-style: normal; color: var(--bubble); }
.v-title span { display: block; margin-top: 1.4cqh; font: 700 clamp(11px, min(5cqw, 2.8cqh), 26px)/1.1 var(--f-body); }
.v-title span[lang="ko"] { font-family: var(--f-hand); }
.v-cap { position: relative; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2cqw 4cqw; padding: min(2.4cqh, 4cqw) 4.4cqw; background: var(--white); border: 3px solid var(--ink); border-radius: 26px; box-shadow: 6px 8px 0 var(--gc, var(--bubble)); animation: capIn .5s var(--boing) both; text-align: left; }
.v-cap .tape { width: 30%; }
.v-cap .vc-face { width: min(26cqw, 15cqh); height: auto; max-height: 18cqh; object-fit: contain; }
.v-cap .vc-faces { display: flex; align-items: flex-end; }
.v-cap .vc-faces img { width: 15cqw; max-height: 12cqh; object-fit: contain; margin-right: -3cqw; }
.v-cap .vc-ko { margin: 0; font: 700 clamp(11px, min(4.6cqw, 2.6cqh), 24px)/1 var(--f-hand); color: var(--gt, var(--gc)); }
.v-cap .vc-n { margin: .4cqh 0 0; font: 400 clamp(16px, min(8.4cqw, 4.8cqh), 48px)/1 var(--f-display); overflow-wrap: anywhere; }
.v-cap .vc-n.small { font-size: clamp(13px, min(5.4cqw, 3.1cqh), 30px); }
.v-cap .vc-w { margin: .8cqh 0 0; font: 700 clamp(11px, min(4.4cqw, 2.5cqh), 22px)/1.2 var(--f-body); }
.v-cap .vc-k { margin: .4cqh 0 0; font: 600 clamp(10px, min(3.6cqw, 2.1cqh), 18px)/1.2 var(--f-body); color: var(--ink-2); }
.v-cap .vc-d { position: absolute; right: 14px; top: -22px; padding: 4px 14px 0; border-radius: 16px; background: var(--ink); color: var(--white); font: 400 clamp(15px, min(7cqw, 4cqh), 40px)/1.2 var(--f-display); transform: rotate(5deg); border: 3px solid var(--white); }
.v-cap.live .vc-d { background: var(--live); }
.v-cap.v-intro { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.v-cap.v-intro .vc-faces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6cqh 1.5cqw; width: 100%; }
.v-cap.v-intro .vc-faces img { width: 100%; height: min(7cqh, 13cqw); max-height: none; margin: 0; object-fit: contain; }
.v-cap.v-intro p { margin: 0; font: 400 clamp(14px, min(6cqw, 3.4cqh), 32px)/1.15 var(--f-display); }
.v-outro { width: 100%; text-align: center; animation: capIn .6s var(--boing) both; }
.v-outro b { display: inline-block; padding: 8px 20px 4px; background: var(--bubble); color: var(--on); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 5px 7px 0 var(--ink); font: 400 clamp(15px, min(7.4cqw, 4.2cqh), 40px)/1.1 var(--f-display); transform: rotate(-2deg); }
.v-outro span { display: block; margin-top: 2cqh; font: 700 clamp(11px, min(4.4cqw, 2.5cqh), 22px)/1.1 var(--f-body); }
/* en pantallas horizontales (computador) el video es 16:9: globo a la izquierda, título y tarjeta a la derecha */
@media (min-aspect-ratio: 5/4) {
  .video-frame { width: min(100vw, calc(100svh * 16 / 9)); height: min(100svh, calc(100vw * 9 / 16));
    grid-template-columns: 56% 44%; grid-template-rows: 30% 70%; grid-template-areas: "zone top" "zone bottom"; }
  .v-zone { grid-area: zone; }
  .v-top { grid-area: top; align-self: end; padding: 0 5cqw 2cqh 0; }
  .v-bottom { grid-area: bottom; padding: 3cqh 5cqw 0 0; }
  .v-cap .vc-face { width: min(14cqw, 20cqh); max-height: 24cqh; }
  .v-cap .vc-faces img { width: min(8cqw, 13cqh); max-height: 16cqh; }
  .v-cap.v-intro .vc-faces img { width: 100%; height: min(11cqh, 7cqw); }
  .v-cap .vc-n { font-size: clamp(16px, min(5cqw, 7cqh), 64px); }
  .v-cap .vc-w { font-size: clamp(11px, min(2.4cqw, 3.4cqh), 28px); }
  .v-cap .vc-k { font-size: clamp(10px, min(2cqw, 2.8cqh), 22px); }
  .v-title b { font-size: clamp(18px, min(5.4cqw, 8cqh), 72px); }
  .v-title span { font-size: clamp(11px, min(2.4cqw, 3.4cqh), 30px); }
  .v-outro b { font-size: clamp(15px, min(4cqw, 6cqh), 52px); }
  .v-outro span { font-size: clamp(11px, min(2.2cqw, 3.2cqh), 26px); }
}
@keyframes capIn { from { transform: translateY(30px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.v-endbar { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; gap: 10px; pointer-events: none; }
.v-endbar .btn { pointer-events: auto; animation: capIn .4s var(--boing) both; }
.video-x { position: fixed; z-index: 101; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: var(--b); background: var(--white); display: grid; place-items: center; padding: 0; opacity: 0; transition: opacity .3s; box-shadow: var(--sh-1); }
.video-x svg { width: 20px; height: 20px; }
.video.show-ui .video-x { opacity: 1; }

/* ---------- mapa de la ciudad ---------- */
.city { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 0; background: rgba(46, 33, 80, .32); animation: veil .3s ease-out both; }
.city-card { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--paper); overflow: hidden; }
.city-head { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; background: var(--white); border-bottom: 2.5px solid var(--ink); }
.city-face { width: 64px; height: 50px; padding: 2px; border-radius: 14px; background: color-mix(in srgb, var(--gc) 18%, var(--white)); border: 2px solid var(--ink); }
.city-face img { width: 100%; height: 100%; object-fit: contain; }
.city-k { margin: 0; font: 700 13px/1.2 var(--f-body); color: var(--gt, var(--gc)); text-transform: uppercase; letter-spacing: .04em; }
.city-id h2 { margin: 2px 0 0; font: 400 clamp(19px, 5.4vw, 26px)/1.1 var(--f-display); overflow-wrap: anywhere; }
.city-sub { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.city-x { width: 44px; height: 44px; border-radius: 50%; border: var(--b); background: var(--white); display: grid; place-items: center; padding: 0; box-shadow: var(--sh-1); }
.city-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.city-map { position: relative; min-height: 0; background: #F7F2FF; }
.city-map .maplibregl-canvas { outline: none; }
.city-msg { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; margin: 0; padding: 20px; text-align: center; font: 400 20px/1.3 var(--f-display); color: var(--ink-2); pointer-events: none; }
.city-tools { position: absolute; z-index: 3; right: 12px; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; }
.city-tools .z-btn svg { fill: none; }
.city-pin { display: grid; justify-items: center; cursor: pointer; }
.city-pin img { width: 92px; height: auto; transform-origin: 50% 100%; animation: bob 2.2s ease-in-out infinite; }
.city-pin img.hop { animation: memHop .7s var(--boing) both; }
.city-pin .cp-tag { margin-top: -4px; padding: 1px 10px 0; border-radius: 999px; background: var(--white); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--gc); font: 400 13px/1.4 var(--f-display); white-space: nowrap; }
.city-pin .cp-ring { position: absolute; bottom: 4px; width: 70px; height: 24px; border-radius: 50%; border: 3px solid var(--gc); animation: sightPing 2.4s ease-out infinite; }
.city-me { display: grid; justify-items: center; gap: 2px; }
.city-me span { width: 16px; height: 16px; border-radius: 50%; background: var(--bubble); border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--ink); }
.city-me b { font: 400 12px var(--f-display); background: var(--white); padding: 0 6px; border-radius: 6px; border: 1.5px solid var(--ink); }
.maplibregl-ctrl-attrib { font: 600 11px var(--f-body); }

/* ---------- hoja iOS y toast ---------- */
.sheet { position: fixed; inset: 0; z-index: 95; display: grid; align-items: end; justify-items: center; padding: 16px; background: rgba(46, 33, 80, .3); }
.sheet-card { width: min(100%, 420px); padding: 22px; background: var(--white); border: var(--b); border-radius: 26px; box-shadow: var(--sh-3); animation: popIn .4s var(--boing) both; margin-bottom: env(safe-area-inset-bottom, 0px); }
.sheet-card h2 { margin: 0 0 8px; font: 400 26px var(--f-display); }
.sheet-card ol { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 6px; font-size: 16px; }
.toast { position: fixed; z-index: 130; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) rotate(-2deg); padding: 8px 16px; border-radius: 14px; background: var(--ink); color: var(--white); font-weight: 700; font-size: 15px; box-shadow: var(--sh-2); animation: popIn .35s var(--boing) both; max-width: calc(100vw - 32px); text-align: center; }


/* ---------- secciones: cada una con su papel, su número y su ritmo ---------- */
.sec { position: relative; scroll-margin-top: calc(var(--nav-h) + 26px); padding: 30px 16px 24px; border-radius: 30px; background: var(--sec-bg, transparent); border: 2px solid var(--sec-line, transparent); }
.sec::before { content: ""; position: absolute; top: -12px; left: 28px; width: 96px; height: 24px; transform: rotate(-4deg); opacity: .9;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--sec-ac) 55%, var(--white)) 0 7px, color-mix(in srgb, var(--sec-ac) 28%, var(--white)) 7px 14px);
  clip-path: polygon(0 0, 5% 25%, 0 50%, 5% 75%, 0 100%, 100% 100%, 95% 75%, 100% 50%, 95% 25%, 100% 0); }
.sec-near { --sec-bg: #FFF8DE; --sec-line: #F6E2A0; --sec-ac: #F2B705; }
.sec-sights { --sec-bg: #E7F8EF; --sec-line: #B8E8CE; --sec-ac: #22A36A; }
.sec-groups { --sec-ac: #FF5FA8; padding-inline: 0; }
.sec-groups::before { left: 12px; }
.sec-media { --sec-bg: #E6F3FC; --sec-line: #B7DCF3; --sec-ac: #3E9BF0; }
.sec-feed { --sec-bg: #FFEFE6; --sec-line: #F8CDB8; --sec-ac: #FF8A5B; }
.sec-subscribe { --sec-bg: #EFE8FF; --sec-line: #D3C4F7; --sec-ac: #7B3FE4; }
.sec .sec-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sec-n { display: inline-block; padding: 7px 9px 4px; border-radius: 11px; background: var(--sec-ac); color: var(--on); font: 400 16px/1 var(--f-display); transform: rotate(-5deg); box-shadow: 0 3px 0 var(--ink); }
.sec .sec-title .ko { margin-right: 0; }
.sec.reveal { opacity: 0; transform: translateY(26px); }
.sec.reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .7s var(--boing); }

/* ---------- ubicación: siempre dice si es real, elegida o por defecto ---------- */
.near-head { gap: 12px; }
.loc-chip { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 9px 14px; border-radius: 16px; border: 2px solid var(--ink); background: var(--white); font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.loc-chip svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.loc-chip b { font-weight: 800; }
.loc-chip.real { background: #DDF7E8; border-color: #1E8F57; color: #135E3A; }
.loc-chip.real svg { stroke: #1E8F57; }
.loc-chip.chosen { background: #EFE8FF; }
.loc-chip.default { background: #FFF0F6; border-style: dashed; border-color: #D63C7E; }
.loc-chip.default svg { stroke: #D63C7E; }
.loc-chip.asking { background: var(--white); }
.loc-acts { display: inline-flex; flex-wrap: wrap; gap: 0 12px; }
.loc-acts .link-btn { padding: 6px 2px; min-height: 40px; color: #B0285F; }
.loc-help { flex-basis: 100%; font-size: 13.5px; color: var(--ink-2); padding: 8px 10px; border-radius: 10px; background: var(--white); }
.loc-ask { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 12px; padding: 14px; border-radius: 22px; background: var(--white); border: var(--b); box-shadow: 4px 6px 0 var(--bubble); animation: popIn .5s var(--boing) both; }
.la-ico { width: 54px; height: 54px; border-radius: 16px; background: #FFE3F1; display: grid; place-items: center; border: 2px solid var(--ink); }
.la-ico svg { width: 30px; height: 30px; fill: #FF9CC6; stroke: var(--ink); stroke-width: 2; animation: floaty 2.6s ease-in-out infinite; }
.la-t { margin: 0; font: 400 19px/1.2 var(--f-display); }
.la-b { margin: 4px 0 8px; font-size: 14.5px; color: var(--ink-2); }
.la-acts { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.z-btn[data-spin][aria-pressed="false"] { background: var(--white); opacity: .8; }
.z-btn[data-spin][aria-pressed="true"] svg { animation: spin 3s linear infinite; }

/* ---------- estrenos y videos ---------- */
.media-filter { margin-bottom: 12px; }
.sight-sort { margin: 0 0 10px; }
.media { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 12px; }
.m-item a { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 20px; background: var(--white); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--gc); text-decoration: none; transition: transform .25s var(--boing), box-shadow .25s; }
.m-item:nth-child(odd) a { transform: rotate(-.6deg); }
.m-item:nth-child(even) a { transform: rotate(.5deg); }
@media (hover: hover) and (pointer: fine) { .m-item a:hover { transform: translateY(-3px) rotate(0); box-shadow: 0 7px 0 var(--gc); } }
.m-img { position: relative; display: block; width: 104px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--gc) 16%, var(--white)); }
.m-video .m-img { aspect-ratio: 4 / 3; background: #1C1726; }
.m-img img { width: 100%; height: 100%; object-fit: contain; }
.m-img img.m-fb { padding: 10%; object-fit: contain; animation: breathe 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.ph-bg { display: none; }
.m-kind { position: absolute; right: 6px; top: 6px; padding: 1px 8px 0; border-radius: 8px; background: var(--ink); color: var(--white); font: 800 11px/1.6 var(--f-body); }
.m-badge { position: absolute; left: 6px; bottom: 6px; padding: 1px 8px 0; border-radius: 8px; background: var(--white); border: 1.5px solid var(--ink); font: 400 11.5px/1.5 var(--f-display); }
.m-txt { display: grid; gap: 2px; min-width: 0; }
.m-g { font: 400 14px/1.2 var(--f-display); color: var(--gt, var(--gc)); }
.m-t { font-weight: 800; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.m-d { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.m-empty { padding: 14px; border-radius: 16px; border: 2px dashed var(--ink-2); }

/* ---------- pantallas más anchas ---------- */
@media (min-width: 600px) {
  .logo-ko { display: inline-block; }
  .btn-ico.install span, .video-btn span { display: inline; }
  .r-item { width: 170px; }
  .stage { height: clamp(500px, 70svh, 720px); }
  .squad { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
  .mem img { width: 58px; }
  .polaroid img { max-height: 260px; }
  .stage.zoomed .zoom-ctrl { opacity: 1; pointer-events: auto; }
  .content-col { padding-inline: 28px; }
  .focus { left: 50%; right: auto; width: 420px; transform: translateX(-50%); animation-name: popInC; }
  @keyframes popInC { from { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.92); } to { opacity: 1; transform: translateX(-50%); } }
}
@media (min-width: 1024px) {
  :root { --row1: 0px; --nav-h: 68px; }
  .bar { top: 0; display: flex; align-items: center; gap: 16px; padding-inline: 16px; height: 68px; }
  .bar-top { display: contents; }
  .logo { order: 1; }
  .topnav { order: 2; flex: 1; min-width: 0; justify-content: safe center; height: 56px; padding: 0 4px; overflow-x: auto; }
  .topnav a, .topnav button { padding: 6px 7px; font-size: 13.5px; gap: 4px; }
  .topnav svg { width: 17px; height: 17px; }
  .logo { flex: none; }
  .logo-ko { display: none; }
  .bar-actions { order: 3; }
  .tn-pill { top: 50%; margin-top: -21px; }
  .layout { grid-template-columns: minmax(0, 1fr) 470px; align-items: start; }
  .stage-col { position: sticky; top: 68px; height: calc(100svh - 68px); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .stage { height: auto; }
  .rail { margin-top: -50px; padding: 10px 20px 14px; justify-content: safe center; gap: 10px; scroll-padding: 0 20px; }
  .r-item { width: 156px; }
  .stage-col { grid-template-rows: minmax(0, 1fr) auto auto; }
  .ticker { margin: 0 20px 16px; }
  .zoom-ctrl { top: auto; bottom: 110px; right: 16px; }
  .sight-bubble { top: 70px; left: 16px; }
  .content-col { padding: 34px 30px 60px 10px; gap: 48px; }
  .city { padding: 28px; }
  .city-card { max-width: 1100px; height: min(820px, 100%); border: 3px solid var(--ink); border-radius: 30px; box-shadow: 8px 10px 0 var(--gc, var(--bubble)); }
  .focus { bottom: 100px; }
  .drag-hint { bottom: 104px; }
  .sonar-note { bottom: 96px; }
  .sonar-view { padding-bottom: 120px; }
  .toast { bottom: 40px; }
}
@media (min-width: 1280px) {
  .layout { grid-template-columns: minmax(0, 1fr) 520px; }
  .topnav a, .topnav button { padding: 6px 13px; font-size: 14px; }
}
@media (min-width: 1500px) {
  .logo-ko { display: inline-block; }
  .r-item { width: 170px; }
}

/* ---------- movimiento reducido y bucles en pausa ---------- */
.is-paused, .is-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [class*="anim-"], .pin-bob, .pin.live .pin-glow, .blip.live .blip-face, .crowd .cm, .mem img, .sight-ring, .ticker-dot, .geo-dot, .onsale.today { animation: none !important; }
  .ticker-vp { overflow-x: auto; scrollbar-width: none; }
  .mem.hop .mem-say { animation: none; opacity: 1; transform: translateX(-50%); }
  .card, .r-item, .focus, .party-card, .party-card .p-chibi, .bub, .v-cap, .v-title, .v-outro, .toast, .sheet-card, .sight-bubble, .pin.hop .cm, .mem.hop img, .loc-ask, .lang-pop { animation-duration: .01ms !important; }
  .sec.reveal { opacity: 1; transform: none; }
  .city-pin img, .city-pin .cp-ring, .la-ico svg, .z-btn[data-spin] svg { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .cd-n span.in, .cd-n span.out { animation: none !important; }
  .cd-n span.out { display: none; }
}

/* ---------- página de cada grupo (pestañas) y perfil de miembro ---------- */
.gp { position: fixed; inset: 0; z-index: 105; display: grid; place-items: center; background: rgba(46, 33, 80, .32); animation: veil .3s ease-out both; }
.gp-card { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: var(--paper); overflow: hidden; }
.gp-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; background: var(--white); border-bottom: 2.5px solid var(--ink); }
.gp-face { width: 72px; height: 56px; padding: 2px; border-radius: 16px; background: color-mix(in srgb, var(--gc) 18%, var(--white)); border: 2px solid var(--ink); }
.gp-face img { width: 100%; height: 100%; object-fit: contain; }
.gp-ko { margin: 0; font: 700 13px/1.2 var(--f-body); color: var(--gt, var(--gc)); }
.gp-id h2 { margin: 0; font: 400 clamp(22px, 6vw, 30px)/1.05 var(--f-display); overflow-wrap: anywhere; }
.gp-sub { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.gp-x { width: 44px; height: 44px; border-radius: 50%; border: var(--b); background: var(--white); display: grid; place-items: center; padding: 0; box-shadow: var(--sh-1); }
.gp-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.gp-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 10px 12px; background: color-mix(in srgb, var(--gc) 10%, var(--paper)); border-bottom: 2px dashed color-mix(in srgb, var(--gc) 45%, transparent); scrollbar-width: none; }
.gp-tabs::-webkit-scrollbar { display: none; }
.gp-tabs button { flex: 1 0 auto; display: grid; justify-items: center; gap: 0; min-height: 48px; padding: 5px 9px; border-radius: 16px; border: 2px solid var(--ink); background: var(--white); font-weight: 800; font-size: 14px; color: var(--ink); transition: transform .25s var(--boing), background-color .2s; }
.gp-tabs button .ko { font-size: 10px; color: var(--gt, var(--gc)); font-weight: 900; }
.gp-tabs button[aria-selected="true"] { background: var(--gc); color: #fff; transform: translateY(-2px) rotate(-1.5deg); box-shadow: 0 3px 0 var(--ink); }
.gp-tabs button[aria-selected="true"] .ko { color: #fff; }
.gp-body { overflow-y: auto; padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; align-content: start; grid-auto-rows: max-content; gap: 14px; overscroll-behavior: contain; }
.gp-sec { display: grid; gap: 6px; padding: 14px; border-radius: 20px; background: var(--white); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--gc); }
.gp-sec h4 { margin: 0 0 4px; font: 400 18px/1.2 var(--f-display); }
.gp-sec p { margin: 0; }
.gp-k { font: 800 12px/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .05em; color: var(--gt, var(--gc)); }
.gp-big { font: 400 26px/1.1 var(--f-display); }
.gp-muted { margin: 0; font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.gp-next .act { justify-self: start; margin-top: 6px; }
.gp-hint { margin: 0; font-weight: 700; color: var(--ink-2); font-size: 14px; }
.gp-tourname { margin: 0; font: 400 20px/1.2 var(--f-display); }
.gp-bday { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-radius: 18px; border: 2px solid var(--ink); background: linear-gradient(120deg, #FFE7F1, #FFF6C9); font-weight: 800; font-size: 15px; text-align: left; color: var(--ink); animation: wiggle 2.4s ease-in-out infinite; }
.gp-bday span { font-size: 24px; }
@keyframes wiggle { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
.gp-mems { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(104px, 30%), 1fr)); gap: 10px; }
.gp-mems button { position: relative; width: 100%; display: grid; justify-items: center; gap: 1px; padding: 10px 6px 10px; border-radius: 20px; border: 2px solid var(--ink); background: var(--white); box-shadow: 0 3px 0 var(--gc); color: var(--ink); transition: transform .25s var(--boing); }
.gp-mems button:active { transform: translateY(2px) scale(.98); }
.gp-mems img { width: 76%; aspect-ratio: 132 / 174; animation: breathe 2.6s ease-in-out var(--dl, 0s) infinite; transform-origin: 50% 94%; }
.gp-mems b { font: 400 15px/1.1 var(--f-display); }
.gp-mems span { font-size: 12px; color: var(--ink-2); font-weight: 700; }
.gp-mems small { font-size: 11.5px; font-weight: 700; color: var(--gt, var(--gc)); }
.gp-hat { position: absolute; top: 4px; right: 6px; font-size: 22px; animation: wiggle 1.6s ease-in-out infinite; }
.gp-back { justify-self: start; min-height: 40px; padding: 4px 14px; border-radius: 999px; border: 2px solid var(--ink); background: var(--white); font-weight: 800; color: var(--ink); }
.gp-prof { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-radius: 24px; background: color-mix(in srgb, var(--gc) 12%, var(--white)); border: 2px solid var(--ink); box-shadow: 0 5px 0 var(--gc); }
.gp-prof h3 { margin: 0; font: 400 clamp(24px, 7vw, 32px)/1.05 var(--f-display); }
.gp-prof h3 span { display: block; font: 700 14px/1.3 var(--f-body); color: var(--gt, var(--gc)); }
.gp-big-chibi { border: 0; background: none; padding: 0; }
.gp-big-chibi img { width: 100%; filter: drop-shadow(0 6px 0 color-mix(in srgb, var(--gc) 35%, transparent)); transform-origin: 50% 92%; }
.gp-big-chibi img.hop { animation: hop .5s var(--boing); }
.gp-bd { margin: 8px 0 !important; font-weight: 800; font-size: 14.5px; }
.gp-bd.today { color: #E0457B; }
.soc-row { display: flex; flex-wrap: wrap; gap: 6px; }
.soc { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 5px 12px 5px 8px; border-radius: 999px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-weight: 800; font-size: 13px; text-decoration: none; overflow-wrap: anywhere; }
.soc.small { min-height: 34px; font-size: 12px; }
.soc svg, .soc-mini svg, .ln-tt svg, .ln-ig svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.soc svg .dot, .ln-ig svg .dot { fill: currentColor; stroke: none; }
.soc-ig svg, .ln-ig svg { color: #D6247A; } .soc-tt svg, .ln-tt svg { color: #111; } .soc-x svg { color: #111; }
:root[data-theme="dark"] .soc-tt svg, :root[data-theme="dark"] .ln-tt svg, :root[data-theme="dark"] .soc-x svg { color: var(--ink); }
:root[data-theme="dark"] .soc-ig svg, :root[data-theme="dark"] .ln-ig svg { color: #FF6FB3; }
.ln-tt, .ln-ig { padding-left: 10px; }
.ln-tt::before, .ln-ig::before { display: none; }
.gp-others { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; }
.gp-others button { flex: none; width: 58px; padding: 4px; border-radius: 14px; border: 2px solid var(--ink); background: var(--white); }
.gp-others img { width: 100%; aspect-ratio: 132 / 174; }
.gp-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gp-post { display: grid; gap: 6px; padding: 10px 12px; border-radius: 16px; background: var(--paper); }
.gp-post-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.soc-mini { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--ink); background: var(--white); }
.soc-mini svg { width: 16px; height: 16px; }
.gp-post p { margin: 0; font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.gp-post .chip-btn { justify-self: start; min-height: 36px; }
.gp-embed { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 2px solid var(--ink); background: #000; }
.gp-embed.tall { aspect-ratio: 9 / 16; max-width: 340px; max-height: 70vh; }
.gp-embed iframe { width: 100%; height: 100%; border: 0; }
.gp-media { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gp-media li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 18px; background: var(--white); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--gc); }
.gp-media li > div:last-child { display: grid; gap: 3px; min-width: 0; }
.gp-media b { font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.gp-media small { font-size: 12.5px; color: var(--ink-2); font-weight: 700; }
.gp-thumb { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1; background: color-mix(in srgb, var(--gc) 16%, var(--white)); }
.gp-media .m-video .gp-thumb { aspect-ratio: 16 / 10; cursor: pointer; }
.gp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gp-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.gp-media .gp-embed { grid-column: 1 / -1; }
.gp-socmem { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gp-socmem li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; }
.gp-socmem button { display: grid; justify-items: center; border: 0; background: none; padding: 0; color: var(--ink); }
.gp-socmem img { width: 52px; aspect-ratio: 132 / 174; }
.gp-socmem b { font-size: 12px; }
.act.gp-open { background: color-mix(in srgb, var(--gc) 16%, var(--white)); }
@media (min-width: 900px) {
  .gp { padding: 28px; }
  .gp-card { max-width: 860px; height: min(900px, 100%); border: 3px solid var(--ink); border-radius: 30px; box-shadow: 8px 10px 0 var(--gc); }
  .gp-body { padding: 20px 26px 30px; }
}
@media (prefers-reduced-motion: reduce) { .gp-bday, .gp-hat, .gp-mems img, .ms-back { animation: none !important; } }

/* ---------- tarjetas en el celular: lo esencial arriba, foto y música abajo, alineadas entre tarjetas ---------- */
.c-foot { display: grid; gap: 12px; }
.card .watch li:nth-child(n+3) { display: none; }
.card .watch li span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .cd-n { font-size: clamp(28px, 9vw, 40px); }
.card .squad { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 60px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; }
.card .squad > li { scroll-snap-align: start; }
.fm-mem .fm-tag { position: absolute; top: 10px; right: 4px; z-index: 1; padding: 0 6px; border-radius: 8px; background: var(--white); border: 1.5px solid var(--ink-2); font: 800 10.5px/1.5 var(--f-body); color: var(--ink-2); }
.fm-mem.fm-back .fm-tag { background: var(--butter); border-color: var(--ink); color: var(--ink); }
.card .c-tour { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 699.98px) {
  .card .watch li:nth-child(n+2) { display: none; }
  .cards .acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  .cards .acts .act { flex-direction: column; justify-content: center; gap: 2px; min-height: 58px; padding: 6px 2px; border-radius: 16px; font-size: 11.5px; line-height: 1.1; white-space: normal; text-align: center; }
  .cards .acts .act svg { width: 20px; height: 20px; }
  .cards .listen ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  .cards .ln { flex-direction: column; justify-content: center; gap: 2px; min-height: 66px; padding: 6px 2px; border-radius: 16px; font-size: 10.5px; line-height: 1.1; text-align: center; }
  .cards .listen li, .cards .ln { min-width: 0; }
  .cards .ln .ln-l { display: none; }
  .cards .ln .ln-s { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cards > .card { display: flex; flex-direction: column; min-height: var(--card-h, auto); }
  .cards > .card > .c-state, .cards > .card > .onsale { align-self: flex-start; }
  /* lo que sobra en las tarjetas más cortas lo toma la foto (hasta un tope); el resto queda sobre la foto */
  .cards .c-foot { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
  .cards .polaroid { flex: 1 1 auto; display: flex; flex-direction: column; margin: 4px 0; transform: rotate(.8deg); }
  /* la foto toma el alto que sobre: se ve completa y el espacio extra lo llena la misma foto desenfocada (nunca queda blanco) */
  .cards .ph { position: relative; flex: 1 1 auto; display: block; min-height: min(200px, 48vw); overflow: hidden; border-radius: 2px; background: var(--paper); }
  .cards .ph-bg { display: block; position: absolute; inset: -24px; background: center / cover no-repeat; filter: blur(16px) saturate(1.15); opacity: .85; }
  /* el fondo desenfocado se pide solo cuando la tarjeta está en pantalla (como un lazy de verdad) */
  .cards .card.vis .ph-bg { background-image: var(--ph); }
  .cards .polaroid .ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; }
}
}
@media (min-width: 700px) {
  .card .watch li:nth-child(n+2) { display: grid; }
  .card .watch li span { display: inline; -webkit-line-clamp: unset; overflow: visible; }
  .card .cd-n { font-size: clamp(34px, 11vw, 46px); }
  .card .squad { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); grid-auto-columns: auto; overflow: visible; padding-bottom: 0; }
}

/* ---------- carrusel de grupos en el celular ---------- */
.content-col > *, .sec-groups { min-width: 0; max-width: 100%; }
.g-pick { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 4px; padding: 4px 16px 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
.g-pick::-webkit-scrollbar, .cards::-webkit-scrollbar { display: none; }
.g-pick button { position: relative; flex: none; scroll-snap-align: center; display: grid; justify-items: center; gap: 2px; width: 74px; padding: 6px 4px 6px; border-radius: 18px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); box-shadow: 0 3px 0 color-mix(in srgb, var(--gc) 50%, transparent); transition: transform .25s var(--boing), background .2s; }
.g-pick button[aria-selected="true"] { background: color-mix(in srgb, var(--gc) 18%, var(--white)); box-shadow: 0 3px 0 var(--gc); transform: translateY(-2px); }
.gpk-face { display: block; width: 58px; height: 36px; }
.gpk-face img { width: 100%; height: 100%; object-fit: contain; }
.gpk-n { font: 400 11.5px/1.1 var(--f-display); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.gpk-live { position: absolute; top: 5px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 30%, transparent); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.cards { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 14px 16px 16px; align-items: flex-start; scrollbar-width: none; }
.cards > .card { flex: 0 0 calc(100% - 26px); scroll-snap-align: center; scroll-snap-stop: always; transform: none !important; }
.swipe-hint { margin: 0; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.swipe-hint::before { content: "← "; } .swipe-hint::after { content: " →"; }
.feed-more { list-style: none; display: flex; justify-content: center; padding-top: 4px; }
@media (min-width: 700px) {
  .g-pick, .swipe-hint { display: none; }
  .cards { display: grid; gap: 30px; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .cards > .card { scroll-snap-align: none; }
  .cards > .card:nth-child(odd) { transform: rotate(-.6deg) !important; }
  .cards > .card:nth-child(even) { transform: rotate(.5deg) !important; }
}
@media (prefers-reduced-motion: reduce) { .gpk-live { animation: none; } }

#feed .bub-b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- rendimiento: lo que está lejos de la pantalla no se dibuja hasta que llegas ---------- */
.sec-media, .sec-feed, .sec-subscribe, .foot { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.pin-bob { backface-visibility: hidden; }
.pin { contain: layout style; }
/* los miembros de una tarjeta solo respiran mientras la tarjeta está en pantalla (en el carrusel, las otras 9 quedan quietas) */
.card:not(.vis) .mem img { animation: none; }


/* noticias: idioma original y traducción automática */
.lang-tag { display: inline-block; padding: 0 6px; border-radius: 6px; border: 1.5px solid var(--ink); background: var(--white); font: 800 11px/1.5 var(--f-body); letter-spacing: .04em; }
.orig { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.orig summary { cursor: pointer; font-weight: 700; list-style: none; display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.orig summary::-webkit-details-marker { display: none; }
.orig p { margin: 2px 0 0; font-style: italic; }

/* ================= Concert mode: el tema oscuro =================
   De noche el diario de stickers se vuelve estadio: papel ciruela, stickers oscuros con borde claro, el globo
   de noche con las ciudades encendidas y, abajo, un mar de lightsticks del color de tu grupo favorito.
   Solo cambian las variables (y unos pocos fondos fijos); los rellenos de color de cada grupo no se tocan. */
:root[data-theme="dark"] {
  /* noche pastel: lavanda profunda en vez de negro, sombras de caramelo y los pasteles intactos como stickers */
  --paper: #1C1535;
  --grid: #261D45;
  --ink: #F1EBFF;
  --ink-2: #C7BBEE;
  --white: #2A2148;
  --shadow: #8C72E8;
  --bubble: #FF7DBA;
  --mint: #A9EDCD;
  --sky: #ABDAF7;
  --butter: #FFE89E;
  --lilac: #D5C6FF;
  --peach: #FFCBB5;
  --live: #FF4B95;
  --sh-3: 4px 7px 0 var(--shadow), 0 18px 40px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
:root[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 70% 50% at 8% -6%, rgba(255, 125, 186, .26), transparent 62%),
    radial-gradient(ellipse 60% 45% at 96% 4%, rgba(169, 237, 205, .16), transparent 60%),
    radial-gradient(ellipse 90% 50% at 50% 0, rgba(140, 114, 232, .22), transparent 70%),
    radial-gradient(circle at 12px 12px, rgba(255, 246, 200, .55) 0 1px, transparent 1.6px),
    radial-gradient(circle at 60px 84px, rgba(213, 198, 255, .5) 0 1.2px, transparent 1.8px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100% 110vh, 100% 110vh, 100% 110vh, 96px 96px, 120px 120px, 24px 24px, 24px 24px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat;
}
:root[data-theme="dark"] .sec-near { --sec-bg: #2C2440; --sec-line: #FFE89E; }
:root[data-theme="dark"] .sec-sights { --sec-bg: #1F2A43; --sec-line: #A9EDCD; }
:root[data-theme="dark"] .sec-media { --sec-bg: #1E2549; --sec-line: #ABDAF7; }
:root[data-theme="dark"] .sec-feed { --sec-bg: #2D2140; --sec-line: #FFCBB5; }
:root[data-theme="dark"] .sec-subscribe { --sec-bg: #261E4A; --sec-line: #D5C6FF; }
/* de noche cada sección lleva su borde pastel punteado y una sombra de su color, como un sticker sobre el cuaderno */
:root[data-theme="dark"] .sec:is(.sec-near, .sec-sights, .sec-media, .sec-feed, .sec-subscribe) { border: 2.5px dashed color-mix(in srgb, var(--sec-line) 70%, transparent); box-shadow: 5px 6px 0 color-mix(in srgb, var(--sec-line) 28%, transparent); }
/* lo que va relleno de pastel conserva la tinta de día: texto y borde oscuros sobre el sticker */
:root[data-theme="dark"] :is(.nearest, .moon, .logo-dot, .logo-ko, .mute[aria-pressed="true"], .drag-hint, .z-btn[data-center-me], .c-state.rest, details.agenda[open] summary::before, .sample-tag, .sub-result, .ms-back, .ms-note.ms-back, .fm-back, .next-rel.rel-today, .chip-btn.right, .onsale, .ios-ico, .fm-mem.fm-back .fm-tag) { --ink: #2E2150; --ink-2: #5A4B82; color: var(--ink); }
:root[data-theme="dark"] .cd-rest { background: color-mix(in srgb, var(--lilac) 16%, var(--white)); }
:root[data-theme="dark"] .topics li.done { background: color-mix(in srgb, var(--mint) 18%, var(--white)); }
:root[data-theme="dark"] .sky { background: radial-gradient(circle at 50% 46%, rgba(255, 95, 168, .16) 0, rgba(123, 63, 228, .1) 32%, transparent 62%); }
:root[data-theme="dark"] .g-halo { background: radial-gradient(circle, rgba(255, 95, 168, .22) 0, rgba(123, 63, 228, .2) 50%, rgba(20, 14, 34, 0) 100%); }
:root[data-theme="dark"] .g-ball {
  background: radial-gradient(circle at 32% 30%, #2C5A92 0, #173A6A 58%, #0E2448 100%);
  box-shadow: 0 0 0 var(--rim, 8px) #2A2148, 0 0 0 calc(var(--rim, 8px) + 2.5px) var(--ink), calc(var(--rim, 8px) * .45) calc(var(--rim, 8px) * 1.2) 0 calc(var(--rim, 8px) + 2.5px) var(--shadow);
}
:root[data-theme="dark"] .g-shade { opacity: .45; }
:root[data-theme="dark"] .gp-mems .away { background: repeating-linear-gradient(135deg, #221A3A 0 10px, #1B1530 10px 20px); }
:root[data-theme="dark"] .fm { background: #1D1733; }
:root[data-theme="dark"] .chip-btn.wrong { background: #4A1F31; }
:root[data-theme="dark"] .party { background: radial-gradient(circle at 50% 50%, rgba(58, 30, 70, .94), rgba(20, 14, 34, .92)); }
:root[data-theme="dark"] .city-map { background: #1B1530; }
:root[data-theme="dark"] .loc-chip.real { background: #12301F; border-color: #3FC27E; color: #A9F0C7; }
:root[data-theme="dark"] .loc-chip.chosen { background: #2D2452; }
:root[data-theme="dark"] .loc-chip.default { background: #3A1A2C; border-color: #FF6FB3; }
:root[data-theme="dark"] .la-ico { background: #3A1F33; }
:root[data-theme="dark"] .gp-bday { background: linear-gradient(120deg, #3A1F33, #3A321B); }
@media (hover: hover) and (pointer: fine) { :root[data-theme="dark"] .topnav a:not([aria-current="true"]):hover { background: rgba(255, 255, 255, .07); } }

/* botón del tema: luna de día, sol de noche */
.btn-ico.theme .ico-sun { display: none; }
:root[data-theme="dark"] .btn-ico.theme .ico-moon { display: none; }
:root[data-theme="dark"] .btn-ico.theme .ico-sun { display: block; }
.btn-ico.theme svg { transition: transform .5s var(--boing); }
.btn-ico.theme:active svg { transform: rotate(-40deg) scale(.85); }
/* el cambio de tema se abre como un círculo de luz desde el botón
   (solo cuando el cambio es de tema; el cambio de idioma conserva su fundido) */
html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root) { mix-blend-mode: normal; }
html.vt-theme::view-transition-old(root) { animation: none; }
html.vt-theme::view-transition-new(root) { animation: themeReveal 1.2s cubic-bezier(.55, 0, .25, 1) both; }
html.vt-theme::view-transition-group(theme-ring) { animation: none; }
@keyframes themeReveal { from { clip-path: circle(0 at var(--vt-x, 90%) var(--vt-y, 30px)); } to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 90%) var(--vt-y, 30px)); } }
/* el aro de luz que viaja en el borde del círculo: va en su propia capa de la transición para quedar encima */
.theme-ring { position: fixed; z-index: 200; border-radius: 50%; pointer-events: none; view-transition-name: theme-ring;
  border: 5px solid #FFB3D9; box-shadow: 0 0 18px 6px rgba(255, 179, 217, .65), inset 0 0 18px 6px rgba(213, 198, 255, .6);
  animation: themeRing 1.2s cubic-bezier(.55, 0, .25, 1) both; }
.theme-ring.light { border-color: #FFE89E; box-shadow: 0 0 18px 6px rgba(255, 232, 158, .7), inset 0 0 18px 6px rgba(255, 179, 217, .5); }
@keyframes themeRing { 0% { transform: scale(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

/* ================= lightsticks =================
   Fila en la tarjeta (mango a la izquierda, nombre a la derecha) y versión grande en la página del grupo.
   Encendido: el lightstick se mece, su luz respira detrás (solo opacidad y transform) y el texto lo dice. */
.ls-row { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 22px; border: 2.5px solid var(--ink); background: var(--white); box-shadow: 3px 4px 0 color-mix(in srgb, var(--lc) 55%, var(--white)); cursor: pointer; transition: box-shadow .4s var(--ease), background-color .4s var(--ease); }
.ls-row.is-lit { background: color-mix(in srgb, var(--lc) 9%, var(--white)); box-shadow: 3px 4px 0 var(--lc), 0 0 22px color-mix(in srgb, var(--lc) 35%, transparent); }
.ls-btn { display: block; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; border-radius: 18px; }
/* el escenario: pastel de día; al encender cae la noche adentro y salen estrellitas */
.ls-stage { position: relative; display: block; width: 78px; height: 104px; border-radius: 18px; border: 2px solid var(--ink); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lc) 26%, #fff), color-mix(in srgb, var(--lc2) 20%, #fff)); transform: rotate(-2deg); transition: transform .4s var(--boing); }
:root[data-theme="dark"] .ls-stage { background: linear-gradient(180deg, color-mix(in srgb, var(--lc) 30%, #2A2145), color-mix(in srgb, var(--lc2) 16%, #2A2145)); }
.ls-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--lc) 60%, #2A1F4E) 0, #2A1F4E 58%, #1A1333 100%); }
.ls-stage::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -14px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--lc) 30%, rgba(46, 33, 80, .25)); }
.is-lit .ls-stage::before { opacity: 1; }
.ls-btn:active .ls-stage, .ls-row:active .ls-stage { transform: rotate(-2deg) scale(.95); }
@media (hover: hover) and (pointer: fine) { .ls-row:hover .ls-stage { transform: rotate(1deg) scale(1.03); } }
.ls-star { position: absolute; width: 9px; height: 9px; background: #FFF6C8; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; transform: scale(.3); transition: opacity .4s var(--ease), transform .5s var(--boing); }
.ls-star.s1 { left: 12%; top: 14%; } .ls-star.s2 { right: 12%; top: 26%; width: 7px; height: 7px; } .ls-star.s3 { left: 18%; top: 52%; width: 6px; height: 6px; background: #fff; } .ls-star.s4 { right: 16%; top: 62%; width: 8px; height: 8px; background: color-mix(in srgb, var(--lc) 40%, #fff); }
.is-lit .ls-star { opacity: 1; transform: scale(1); animation: lsTwinkle 2.4s ease-in-out infinite; }
.is-lit .ls-star.s2 { animation-delay: -.6s; } .is-lit .ls-star.s3 { animation-delay: -1.2s; } .is-lit .ls-star.s4 { animation-delay: -1.8s; }
/* el lightstick: se mece desde la mano (abajo); el brillo vive adentro, así lo sigue */
.ls-wave { position: absolute; left: 50%; bottom: -8px; width: 42px; height: 84px; margin-left: -21px; transform-origin: 50% 96%; }
.ls-pop { position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 90%; }
.ls-svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible;
  filter: saturate(.45) brightness(.97) drop-shadow(1.6px 0 0 #fff) drop-shadow(-1.6px 0 0 #fff) drop-shadow(0 1.6px 0 #fff) drop-shadow(0 -1.6px 0 #fff);
  transition: filter .5s var(--ease); }
.is-lit .ls-svg { filter: saturate(1.15) brightness(1.08) drop-shadow(1.6px 0 0 #fff) drop-shadow(-1.6px 0 0 #fff) drop-shadow(0 1.6px 0 #fff) drop-shadow(0 -1.6px 0 #fff) drop-shadow(0 0 7px var(--lc)); }
.ls-svg .ls-h { fill: #2E2150; }
.ls-svg .ls-g { fill: #5A4B82; }
.ls-glow { position: absolute; left: 50%; top: 25%; width: 330%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.4); border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0, color-mix(in srgb, var(--lc) 90%, transparent) 14%, color-mix(in srgb, var(--lc) 45%, transparent) 34%, color-mix(in srgb, var(--lc2) 22%, transparent) 50%, transparent 70%); transition: opacity .45s var(--ease), transform .5s var(--boing); }
.ls-ring { position: absolute; left: 50%; top: 25%; width: 120%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--lc); opacity: 0; transform: translate(-50%, -50%) scale(.3); pointer-events: none; }
.is-lit .ls-glow { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: lsBreathe 2.2s ease-in-out infinite; }
.is-lit .ls-wave { animation: lsWave 1.8s ease-in-out infinite; }
/* encender: salto, destello y una onda de luz. apagar: parpadeo y el lightstick se cae un poquito */
.ls-just-on .ls-pop { animation: lsPop .65s var(--boing); }
.ls-just-on .ls-glow { animation: lsFlash .7s var(--ease), lsBreathe 2.2s ease-in-out .7s infinite; }
.ls-just-on .ls-ring { animation: lsRing .75s var(--ease); }
.ls-just-on .ls-chip { animation: lsChip .5s var(--boing); }
.ls-just-off .ls-pop { animation: lsDroop .6s var(--ease); }
.ls-just-off .ls-glow { animation: lsFlicker .55s linear; }
@keyframes lsWave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-13deg); } 75% { transform: rotate(13deg); } }
@keyframes lsBreathe { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .72; transform: translate(-50%, -50%) scale(.88); } }
@keyframes lsPop { 0% { transform: var(--ls-from, scale(.82)); } 40% { transform: scale(1.18) rotate(-7deg); } 70% { transform: scale(.96) rotate(4deg); } 100% { transform: none; } }
@keyframes lsFlash { 0% { opacity: var(--ls-g0, 0); transform: translate(-50%, -50%) scale(.3); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.45); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes lsRing { 0% { opacity: .95; transform: translate(-50%, -50%) scale(.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); } }
@keyframes lsFlicker { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 18% { opacity: .15; } 32% { opacity: .8; } 50% { opacity: .1; } 64% { opacity: .45; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } }
@keyframes lsDroop { 0% { transform: var(--ls-from, none); } 35% { transform: rotate(-9deg) scale(.95); } 65% { transform: rotate(4deg); } 100% { transform: none; } }
@keyframes lsTwinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: .35; transform: scale(.6) rotate(45deg); } }
@keyframes lsChip { 0% { transform: scale(.7) rotate(-6deg); } 60% { transform: scale(1.12) rotate(3deg); } 100% { transform: rotate(-2deg); } }
.ls-txt { min-width: 0; display: grid; gap: 3px; }
.ls-txt .squad-k { margin: 0; }
.ls-txt b { font: 400 22px/1.12 var(--f-display); letter-spacing: -.01em; }
.ls-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ls-meta small { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
/* la etiqueta es un sticker pastel en los dos temas */
.ls-chip { --ink: #2E2150; display: inline-block; padding: 2px 10px 1px; border-radius: 10px; border: 2px dashed color-mix(in srgb, var(--lc) 60%, #2E2150); background: #fff; color: var(--ink); font: 700 13px/1.4 var(--f-body); transform: rotate(-2deg); }
.is-lit .ls-chip { border-style: solid; border-color: #2E2150; background: color-mix(in srgb, var(--lc) 38%, #fff); box-shadow: 0 2px 0 var(--ink); }
.ls-row.big { grid-template-columns: 108px minmax(0, 1fr); padding: 12px 16px 12px 12px; }
.ls-row.big .ls-stage { width: 108px; height: 146px; border-radius: 22px; }
.ls-row.big .ls-wave { width: 60px; height: 120px; margin-left: -30px; }
.ls-row.big .ls-star { width: 12px; height: 12px; }
/* sin lightstick todavía: la silueta punteada flota quieta en su escenario; no se enciende */
.ls-soon { cursor: default; }
.ls-soon .ls-stage { border-style: dashed; }
.ls-soon .ls-svg { filter: drop-shadow(1.6px 0 0 #fff) drop-shadow(-1.6px 0 0 #fff) drop-shadow(0 1.6px 0 #fff) drop-shadow(0 -1.6px 0 #fff); }
.ls-soon .ls-wave { animation: lsFloat 3.2s ease-in-out infinite; }
.ls-soon .ls-chip { border-style: dashed; }
.ls-soon.is-ann .ls-chip { border-style: solid; border-color: #2E2150; background: color-mix(in srgb, var(--lc) 38%, #fff); }
.ls-soon.is-ann .ls-wave { animation: lsWave 2.6s ease-in-out infinite; }
.ls-soon .ls-note a { font-weight: 700; color: var(--ink); text-decoration-color: var(--lc); text-underline-offset: 3px; }
.ls-soon:active .ls-stage { transform: none; }
@keyframes lsFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .ls-soon .ls-wave { animation: none !important; } }
.ls-note { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .is-lit .ls-wave, .is-lit .ls-glow, .is-lit .ls-star, .ls-just-on *, .ls-just-off * { animation: none !important; } }

/* el mar de lightsticks: solo de noche, abajo del escenario, con el color del que tienes encendido */
.ocean { display: none; }
:root[data-theme="dark"] .ocean { display: block; position: absolute; z-index: 0; left: -10%; right: -10%; bottom: 0; height: 120px; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 55%); mask-image: linear-gradient(transparent, #000 55%); }
.ocean i { position: absolute; left: -24px; right: -24px; bottom: 0; height: 100%;
  background-image: radial-gradient(circle, var(--oc1, #C9A8FF) 0 2.4px, color-mix(in srgb, var(--oc1, #C9A8FF) 35%, transparent) 3.4px, transparent 6px);
  background-size: 22px 16px; opacity: .85; animation: oceanSway 3.2s ease-in-out infinite alternate; }
.ocean i.b { bottom: -8px; background-image: radial-gradient(circle, var(--oc2, #FF8CC6) 0 2px, color-mix(in srgb, var(--oc2, #FF8CC6) 30%, transparent) 3px, transparent 5.5px);
  background-size: 18px 13px; background-position: 9px 4px; opacity: .7; animation-duration: 2.6s; animation-delay: -1.3s; }
@keyframes oceanSway { from { transform: translate3d(-10px, 0, 0); } to { transform: translate3d(10px, -3px, 0); } }
@media (prefers-reduced-motion: reduce) { .ocean i { animation: none; } }
/* el ticker sigue siendo una franja oscura de noche (no se invierte como los stickers) */
:root[data-theme="dark"] .ticker { background: #0B0717; color: #EEE7FF; box-shadow: 0 4px 0 var(--shadow), 0 0 0 2px #2D2452; }
:root[data-theme="dark"] .tk-i b { color: #FFE58A; }
:root[data-theme="dark"] .ticker-k { color: #140E22; }
:root[data-theme="dark"] .tk-i::before { box-shadow: 0 0 0 2px #0B0717; }
/* con 4 controles arriba, en los celulares más angostos (360 px) el logo y los botones se aprietan un poco */
@media (max-width: 389px) {
  .bar-top { gap: 6px; padding-inline: 10px; }
  .bar-actions { gap: 5px; }
  .logo { gap: 6px; }
  .logo-dot { width: 34px; height: 34px; }
  .logo-text { font-size: 19px; }
  .lang button { min-width: 36px; }
  .bar-actions .btn-ico { position: relative; width: 40px; min-width: 40px; padding: 6px; }
  .bar-actions .btn-ico::after { content: ""; position: absolute; inset: -2px; }
}

/* selección y barra a tono con el tema */
::selection { background: color-mix(in oklab, var(--bubble) 40%, var(--white)); color: var(--ink); }
html { scrollbar-color: color-mix(in oklab, var(--ink) 35%, transparent) var(--paper); }
/* de noche, el texto de cada grupo usa su versión clara (la calcula gText con contraste AA sobre la superficie) */
:root[data-theme="dark"] [style*="--gt-d"] { --gt: var(--gt-d) !important; }

/* ================= noche pastel: lo que eliges es un sticker pastel con tinta oscura ================= */
:root[data-theme="dark"] .chip input:checked + span { --ink: #2E2150; color: var(--ink); background: color-mix(in srgb, var(--gc, var(--bubble)) 30%, #FFF5FB); box-shadow: 0 3px 0 color-mix(in srgb, var(--gc, var(--bubble)) 70%, #fff); }
:root[data-theme="dark"] .chip input:checked + span::before { border-color: #2E2150; }
:root[data-theme="dark"] .chip-btn[aria-pressed="true"] { --ink: #2E2150; color: var(--ink); background: #FFD6EA; box-shadow: 0 3px 0 var(--bubble); }
:root[data-theme="dark"] .tn-pill, :root[data-theme="dark"] .lang-pill { background: #FFD6EA; }
:root[data-theme="dark"] .topnav a[aria-current="true"], :root[data-theme="dark"] .lang button[aria-pressed="true"] { color: #2E2150; }
:root[data-theme="dark"] .check input { accent-color: #FF7DBA; }

/* ================= hover en PC: todo responde como un sticker que se despega =================
   Solo transform/opacity, con resorte; en móvil no aplica y con movimiento reducido se apaga. */
@keyframes hJiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.12); } 60% { transform: rotate(8deg) scale(1.06); } }
@keyframes hHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px) rotate(-4deg); } 70% { transform: translateY(1px); } }
@keyframes hShine { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
@keyframes hSwing { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-22deg); } 65% { transform: rotate(12deg); } }
@keyframes hSpin { to { transform: rotate(180deg); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn, .btn-ico, .act, .chip-btn, .z-btn { transition: transform .35s var(--boing), box-shadow .3s var(--ease), background-color .2s; }
  .btn:hover, .btn-ico:hover { transform: translateY(-3px) rotate(-1.5deg) scale(1.03); box-shadow: 0 6px 0 var(--shadow); }
  .btn:hover svg, .act:hover svg, .chip-btn:hover svg { animation: hJiggle .5s var(--ease); }
  /* el botón rosa lleva un brillo que lo cruza */
  .btn.primary { position: relative; overflow: hidden; isolation: isolate; }
  .btn.primary::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-120%) skewX(-20deg); pointer-events: none; }
  .btn.primary:hover::after { animation: hShine .7s var(--ease); }
  .act:hover, .chip-btn:hover { transform: translateY(-3px) rotate(-2deg); box-shadow: 0 4px 0 var(--shadow); }
  .z-btn:hover { transform: scale(1.12) rotate(-8deg); }
  .chip:hover span { transform: translateY(-2px) rotate(-2deg); }
  .chip:hover span::before { transform: scale(1.3); transition: transform .3s var(--boing); }
  .r-item:hover { transform: translateY(-6px) rotate(0); box-shadow: 0 9px 0 var(--gc); }
  .r-item:hover .r-face img { animation: hHop .55s var(--ease); }
  .card:hover { transform: translateY(-4px) rotate(0); box-shadow: 7px 10px 0 var(--gc); }
  .card:hover .chibi, .card:hover .c-face img { animation: hHop .6s var(--ease); }
  .gp-tabs button { transition: transform .3s var(--boing), box-shadow .3s; }
  .gp-tabs button:not([aria-selected="true"]):hover { transform: translateY(-3px) rotate(1.5deg); box-shadow: 0 3px 0 var(--gc); }
  .gp-tabs button:hover .ko { display: inline-block; animation: hJiggle .5s var(--ease); }
  .topnav a:not([aria-current="true"]):hover svg { animation: hJiggle .5s var(--ease); }
  .btn-ico.theme:hover .ico-moon { animation: hSwing .7s var(--ease); }
  .btn-ico.theme:hover .ico-sun { animation: hSpin .8s var(--boing); }
  .link-btn:hover, .sources a:hover { text-decoration-style: wavy; text-decoration-color: var(--bubble); }
  .ls-row:hover { box-shadow: 4px 6px 0 var(--lc); }
}

/* ================= transiciones: abrir, cerrar, cambiar de pestaña, llegar a una sección =================
   Todo con transform/opacity y resorte; con movimiento reducido no corre nada. */
/* desplegables (trivia, números, gira, avisos): crecen hasta su alto real y el contenido entra suave */
/* sin animar el alto (eso recalcula la página en cada cuadro y se siente lento): solo el contenido entra con opacidad y transform */
details[open] > :not(summary) { animation: foldIn .32s cubic-bezier(.2, .8, .3, 1.15) both; }
details[open] > :not(summary):nth-child(3) { animation-delay: .04s; }
details summary::before, details summary::after { transition: transform .4s var(--boing), background-color .2s; }
@keyframes foldIn { from { opacity: 0; transform: translateY(-6px); } }
/* página del grupo: entra como una tarjeta que sube, sale hundiéndose */
.gp.gp-opening .gp-card { animation: gpIn .55s var(--boing) both; }
.gp.gp-opening .gp-head .gp-face { animation: hHop .6s .2s var(--ease) both; }
.gp.gp-closing { animation: veilOut .26s ease-in both; }
.gp.gp-closing .gp-card { animation: gpOut .26s ease-in both; }
@keyframes gpIn { from { opacity: 0; transform: translateY(46px) scale(.96); } }
@keyframes gpOut { to { opacity: 0; transform: translateY(30px) scale(.97); } }
/* pestañas: el contenido se desliza desde el lado de la pestaña nueva, en cascada; la pestaña elegida da un saltito */
.gp.gp-tabbing .gp-body > * { animation: tabIn .46s var(--boing) both; }
.gp.gp-tabbing .gp-body > :nth-child(2) { animation-delay: .04s; }
.gp.gp-tabbing .gp-body > :nth-child(3) { animation-delay: .08s; }
.gp.gp-tabbing .gp-body > :nth-child(n+4) { animation-delay: .12s; }
.gp.gp-tabbing .gp-tabs button[aria-selected="true"] { animation: tabPop .45s var(--boing); }
@keyframes tabIn { from { opacity: 0; transform: translateX(var(--dx, 36px)); } }
@keyframes tabPop { 0% { transform: translateY(0) scale(.9); } 60% { transform: translateY(-4px) rotate(-3deg) scale(1.08); } 100% { transform: translateY(-2px) rotate(-1.5deg); } }
/* al llegar desde el menú: el número de la sección salta y el borde da un destello pastel */
.sec-arrive .sec-n { animation: secNum .7s var(--boing); }
.sec-arrive .sec-title { animation: secHead .6s .08s var(--boing); }
.sec-arrive::after { content: ""; position: absolute; inset: -6px; border-radius: 34px; border: 3px solid var(--sec-ac, var(--bubble)); pointer-events: none; animation: secRing 1s var(--ease) both; }
@keyframes secHead { 0% { transform: none; } 40% { transform: translateY(-4px) rotate(-1deg); } 100% { transform: none; } }
@keyframes secRing { 0% { opacity: 0; transform: scale(.98); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(1.015); } }
/* selector de app de música: una píldora que se desliza */
.app-sw-wrap:empty { display: none; }
.app-sw { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; margin: 2px 0 10px; border-radius: 999px; border: 2.5px solid var(--ink); background: var(--white); box-shadow: 0 3px 0 var(--shadow); max-width: 440px; }
.app-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: var(--ink); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .5s var(--boing); box-shadow: 0 2px 0 var(--bubble); }
.app-sw button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 6px; border: 0; background: none; border-radius: 999px; font-weight: 800; font-size: 13.5px; color: var(--ink); transition: color .3s; white-space: nowrap; }
.app-sw button[aria-pressed="true"] { color: var(--white); }
:root[data-theme="dark"] .app-pill { background: #FFD6EA; }
:root[data-theme="dark"] .app-sw button[aria-pressed="true"] { color: #2E2150; }
.app-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; }
.app-spotify { background: #1ED760; } .app-apple { background: #FA2D48; } .app-ytm { background: #FF0033; }
.app-sw button[aria-pressed="true"] .app-dot { animation: hJiggle .5s var(--ease); }
.app-k { margin: 0 0 4px; font-weight: 700; }
@media (max-width: 389px) { .app-sw button { font-size: 12px; gap: 4px; } }
/* Instagram y TikTok en la fila de acciones de la tarjeta */
.act.c-soc svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.act.c-soc svg .dot { fill: currentColor; stroke: none; }
.act.c-soc.soc-ig { color: #D6247A; } .act.c-soc.soc-tt { color: #111; }
:root[data-theme="dark"] .act.c-soc.soc-ig { color: #FF7DBA; } :root[data-theme="dark"] .act.c-soc.soc-tt { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  details[open] > :not(summary), .gp.gp-opening .gp-card, .gp.gp-closing, .gp.gp-closing .gp-card, .gp.gp-tabbing .gp-body > *, .gp.gp-tabbing .gp-tabs button, .sec-arrive *, .sec-arrive::after, .theme-ring { animation: none !important; }
  .app-pill { transition: none; }
}
.c-socs { display: contents; }
@media (max-width: 699.98px) {
  /* en la tarjeta del celular, Instagram y TikTok comparten una columna, uno sobre otro */
  .cards .acts .c-socs { display: grid; grid-template-rows: 1fr 1fr; gap: 4px; }
  .cards .acts .act.c-soc { width: auto; min-height: 0; padding: 2px; border-radius: 12px; }
  .cards .acts .act.c-soc svg { width: 18px; height: 18px; }
}

/* ================= cortina: tapa la pantalla al moverse por el menú y al cambiar de idioma ================= */
.curtain { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; pointer-events: none; overflow: hidden;
  background: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .55) 0 2px, transparent 3px) 0 0 / 46px 46px,
              radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .4) 0 1.5px, transparent 2.5px) 0 0 / 64px 64px,
              color-mix(in srgb, var(--cc) 34%, #FFF6FB);
  color: #2E2150; border-top: 4px solid #2E2150;
  animation: cuIn .42s cubic-bezier(.2, .9, .25, 1.05) both; will-change: transform; }
:root[data-theme="dark"] .curtain { background: radial-gradient(circle at 20% 15%, rgba(255, 246, 200, .5) 0 1.5px, transparent 2.5px) 0 0 / 46px 46px,
  radial-gradient(circle at 70% 60%, rgba(213, 198, 255, .45) 0 1.2px, transparent 2px) 0 0 / 64px 64px,
  color-mix(in srgb, var(--cc) 30%, #2A2148); color: #F1EBFF; border-top-color: color-mix(in srgb, var(--cc) 70%, #fff); }
.curtain.out { animation: cuOut .5s cubic-bezier(.6, 0, .4, 1) both; }
@keyframes cuIn { from { transform: translateY(102%); } to { transform: none; } }
@keyframes cuOut { to { transform: translateY(-102%); } }
.cu-in { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 0 20px; }
.cu-n { display: inline-block; padding: 10px 18px 6px; border-radius: 20px; background: var(--cc); color: #fff; border: 3px solid #2E2150; box-shadow: 0 5px 0 #2E2150;
  font: 400 clamp(44px, 12vw, 88px)/1 var(--f-display); animation: cuNum .7s .12s var(--boing) both; }
.cu-ko { font: 700 clamp(22px, 5vw, 32px)/1 var(--f-hand); color: color-mix(in srgb, var(--cc) 75%, #2E2150); animation: cuUp .45s .22s var(--boing) both; }
:root[data-theme="dark"] .cu-ko { color: color-mix(in srgb, var(--cc) 45%, #fff); }
.cu-t { font: 400 clamp(34px, 9vw, 72px)/1.05 var(--f-display); letter-spacing: -.01em; animation: cuUp .5s .26s var(--boing) both; }
.cu-sub { font: 700 clamp(16px, 3.6vw, 22px)/1.2 var(--f-body); opacity: .85; animation: cuUp .45s .34s var(--boing) both; }
.cu-chibis { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; margin-top: 12px; max-width: 760px; }
.cu-chibis img { width: clamp(64px, 17vw, 150px); height: auto; filter: drop-shadow(0 3px 0 rgba(46, 33, 80, .25)); animation: cuHop .7s calc(.3s + var(--k) * .07s) var(--boing) both; }
.cu-chibis img:nth-child(even) { --r: 6deg; } .cu-chibis img:nth-child(odd) { --r: -6deg; }
.cu-star { position: absolute; width: 22px; height: 22px; background: #FFE89E; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: cuTw 1.2s ease-in-out infinite; }
.cu-star.a { left: 14%; top: 22%; } .cu-star.b { right: 16%; top: 30%; width: 16px; height: 16px; background: #fff; animation-delay: -.4s; } .cu-star.c { left: 22%; bottom: 20%; width: 14px; height: 14px; background: #FFB3D9; animation-delay: -.8s; }
@keyframes cuNum { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; } 55% { transform: scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: rotate(-4deg); } }
@keyframes cuUp { from { transform: translateY(24px); opacity: 0; } }
@keyframes cuHop { 0% { transform: translateY(70px) scale(.6); opacity: 0; } 60% { transform: translateY(-14px) rotate(var(--r)) scale(1.05); opacity: 1; } 100% { transform: rotate(var(--r)); } }
@keyframes cuTw { 50% { transform: scale(.5) rotate(45deg); opacity: .5; } }
/* el saludo del idioma: el "안녕!" va grande y el resto saluda en los otros idiomas */
.cu-lang .cu-ko { font-size: clamp(30px, 7vw, 46px); }
.cu-lang .cu-t { font-size: clamp(46px, 13vw, 96px); }
/* al llegar: el número salta grande (se ve porque ya estás ahí) */
.sec-arrive .sec-n { animation: secNum .8s var(--boing); }
@keyframes secNum { 0% { transform: rotate(-5deg) scale(1); } 30% { transform: translateY(-10px) rotate(-18deg) scale(1.6); } 60% { transform: rotate(6deg) scale(.92); } 100% { transform: rotate(-5deg); } }
@media (prefers-reduced-motion: reduce) { .curtain { display: none; } }

/* ================= reproductor: el lanzamiento con la interfaz de tu app ================= */
.player { position: fixed; inset: 0; z-index: 110; display: grid; align-items: end; justify-items: center; background: rgba(46, 33, 80, .38); animation: veil .25s ease-out both; }
.pl-card { width: min(100%, 560px); max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 12px; padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border: 3px solid var(--ink); border-bottom: 0; border-radius: 28px 28px 0 0; box-shadow: 0 -6px 0 var(--gc, var(--bubble)); animation: plIn .45s var(--boing) both; }
@media (min-width: 700px) { .player { align-items: center; } .pl-card { border-bottom: 3px solid var(--ink); border-radius: 28px; box-shadow: 6px 8px 0 var(--gc, var(--bubble)); } }
.player.pl-closing { animation: veilOut .24s ease-in both; }
.player.pl-closing .pl-card { animation: plOut .24s ease-in both; }
@keyframes plIn { from { transform: translateY(60%); opacity: 0; } }
@keyframes plOut { to { transform: translateY(40%); opacity: 0; } }
.pl-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pl-cover { width: 64px; height: 64px; border-radius: 14px; border: 2px solid var(--ink); object-fit: cover; transform: rotate(-3deg); background: var(--white); }
.pl-id { min-width: 0; }
.pl-g { margin: 0; font: 800 13px/1.2 var(--f-body); color: var(--gt, var(--gc)); }
.pl-id h2 { margin: 2px 0; font: 400 22px/1.1 var(--f-display); overflow-wrap: anywhere; }
.pl-k { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.player .app-sw { margin: 0; max-width: none; }
.pl-frame { border-radius: 16px; overflow: hidden; border: 2px solid var(--ink); background: var(--white); animation: plFrame .35s var(--ease) both; }
.pl-frame iframe { display: block; width: 100%; height: 452px; border: 0; }

.pl-frame.none { border-style: dashed; }
.pl-note { margin: 0; padding: 10px 12px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.pl-frame.none .pl-note { padding: 22px 14px; text-align: center; }
.pl-open { justify-self: center; }
@keyframes plFrame { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 420px) { .pl-frame iframe { height: 380px; } }
@media (prefers-reduced-motion: reduce) { .player, .pl-card, .pl-frame, .player.pl-closing, .player.pl-closing .pl-card { animation: none !important; } }
/* ================= un lanzamiento: el reproductor de la app o la tarjeta propia con avances ================= */
.rel-list { display: grid; gap: 14px; }
.rel { display: grid; gap: 10px; padding: 10px; border-radius: 20px; border: 2.5px solid var(--ink); background: var(--white); box-shadow: 4px 5px 0 var(--gc, var(--shadow)); animation: plFrame .35s var(--ease) both; }
.rel-embed { border-radius: 14px; overflow: hidden; background: var(--paper); }
.rel-embed iframe { display: block; width: 100%; height: 352px; border: 0; }
.rel-embed.video { position: relative; height: 0; padding-top: 56.25%; }
.rel-embed.video iframe { position: absolute; inset: 0; width: 100%; height: 100% !important; }
.rel-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; }
.rel-art { width: 112px; height: 112px; border-radius: 14px; border: 2px solid var(--ink); object-fit: cover; transform: rotate(-2deg); box-shadow: 3px 4px 0 var(--gc, var(--shadow)); background: var(--paper); }
.rel-info { display: grid; gap: 4px; min-width: 0; }
.rel-info b { font: 400 22px/1.12 var(--f-display); overflow-wrap: anywhere; }
.rel-info small { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.rel-soon { --ink: #2E2150; justify-self: start; padding: 2px 10px 1px; border-radius: 10px; border: 2px solid var(--ink); background: var(--butter); color: var(--ink); font: 400 15px/1.4 var(--f-display); transform: rotate(-2deg); }
.rel-tracks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: tr; }
.rel-tracks li { --p: 0%; position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 40px; padding: 3px 8px 3px 4px; border-radius: 12px; isolation: isolate; }
.rel-tracks li::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 12px; background: color-mix(in srgb, var(--gc, var(--bubble)) 16%, transparent); transform-origin: left; transform: scaleX(var(--p)); opacity: 0; transition: opacity .2s; }
.rel-tracks li:has(.on)::before { opacity: 1; }
.rel-n { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-d { font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rel-play { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); display: grid; place-items: center; padding: 0; cursor: pointer; transition: transform .3s var(--boing), background-color .2s; }
.rel-play i { width: 0; height: 0; border-left: 10px solid var(--ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.rel-play.on { background: var(--gc, var(--bubble)); transform: scale(1.08); animation: relBeat 1s ease-in-out infinite; }
.rel-play.on i { width: 10px; height: 11px; margin: 0; border: 0; border-left: 3.5px solid var(--on); border-right: 3.5px solid var(--on); }
.rel-play.off { opacity: .35; border-style: dashed; cursor: default; }
@keyframes relBeat { 50% { transform: scale(1.14); } }
.rel-open { justify-self: start; font-weight: 800; font-size: 14.5px; color: var(--gt, var(--ink)); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; padding: 4px 2px; }
@media (hover: hover) and (pointer: fine) { .rel-play:not(.off):hover { transform: scale(1.12) rotate(-6deg); } .rel-open:hover { text-decoration-style: wavy; } }
@media (max-width: 420px) { .rel-card { grid-template-columns: 88px minmax(0, 1fr); } .rel-art { width: 88px; height: 88px; } }
.player .rel { box-shadow: none; border: 0; padding: 0; background: none; }
@media (prefers-reduced-motion: reduce) { .rel, .rel-play.on { animation: none; } }
/* modo story de noche: el mismo cuaderno pastel, en lavanda con estrellitas */
:root[data-theme="dark"] .video { background: #120C22; }
:root[data-theme="dark"] .video-frame { background-color: #1C1535; }
:root[data-theme="dark"] .v-sky { background: radial-gradient(circle at 50% 44%, rgba(255, 125, 186, .22) 0, rgba(140, 114, 232, .16) 32%, rgba(28, 21, 53, 0) 62%); }
/* en PC los lanzamientos respiran: dos columnas en la página del grupo, portada más grande y la hoja más ancha */
@media (min-width: 900px) {
  .rel-list { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); align-items: start; }
  .rel-card { grid-template-columns: 150px minmax(0, 1fr); }
  .rel-art { width: 150px; height: 150px; }
  .rel-info b { font-size: 26px; }
  .pl-card { width: min(100% - 40px, 760px); }
  .player .rel-card { grid-template-columns: 200px minmax(0, 1fr); }
  .player .rel-art { width: 200px; height: 200px; }
  .player .rel-info b { font-size: 32px; }
  .cards .acts .c-socs { display: inline-flex; gap: 6px; }
}
.fan-tag { --ink: #2E2150; display: inline-block; padding: 1px 9px; border-radius: 9px; border: 2px dashed var(--ink); background: var(--butter); color: var(--ink); font-weight: 800; font-size: 12.5px; transform: rotate(-2deg); }