/* ==========================================================
   Radio Municipal Las Ovejas — estilos
   Paleta tomada del escudo municipal: azul cordillera + crema.
   ========================================================== */

@property --iris { syntax: '<length>'; inherits: false; initial-value: 0px; }

:root {
  --noche: #0b141c;
  --suelo: #0d1821;            /* lo ajusta cielo.js según la hora */
  --suelo-rgb: 13 24 33;
  --azul: #243947;             /* azul del escudo */
  --azul-2: #2f4a5c;
  --crema: #fbdcb7;            /* crema del escudo */
  --crema-2: #f4e7d7;
  --crema-dim: rgba(251, 220, 183, .64);
  --crema-tenue: rgba(251, 220, 183, .38);
  --linea: rgba(251, 220, 183, .14);
  --vidrio: rgba(20, 34, 45, .55);
  --senal: #a8f0d0;            /* la luz que a veces cruza el cielo */
  --brasa: #ff7b5c;
  --naranja: #ff8000;          /* el naranja del logo de la radio */
  --naranja-claro: #ffa64d;
  --naranja-hondo: #d96400;

  --f-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --f-texto: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'DM Mono', ui-monospace, 'Cascadia Mono', monospace;

  --ease: cubic-bezier(.2, .75, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --gutter: clamp(16px, 5vw, 72px);
  --radio: 20px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--noche);
  color: var(--crema-2);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
a, button, input { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--crema); color: var(--noche); }
:focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; border-radius: 6px; }

.saltar {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--crema); color: var(--noche); padding: 10px 16px; border-radius: 99px;
  text-decoration: none; font-weight: 600; transition: top .3s var(--ease);
}
.saltar:focus { top: 16px; }

/* ==========================================================
   INTRO — el dial busca la señal y el cielo se abre
   ========================================================== */
.intro {
  --ix: 50vw; --iy: 50vh;
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 58%, #142533 0%, #0a131b 55%, #05090e 100%);
  -webkit-mask: radial-gradient(circle at var(--ix) var(--iy), transparent var(--iris), #000 calc(var(--iris) + 1px));
  mask: radial-gradient(circle at var(--ix) var(--iy), transparent var(--iris), #000 calc(var(--iris) + 1px));
  transition: --iris 1.5s cubic-bezier(.75, 0, .2, 1);
}
.intro.abrir { --iris: 160vmax; pointer-events: none; }
.intro__centro { display: flex; flex-direction: column; align-items: center; gap: 34px; transition: transform 1.5s cubic-bezier(.75, 0, .2, 1), opacity 1s; }
.intro.abrir .intro__centro { transform: scale(1.12); opacity: 0; }
.intro__sello {
  width: 168px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; opacity: 0;
  background: radial-gradient(circle at 38% 30%, #fff8ec, #f1dfc4 60%, #e2c9a6);
  box-shadow: 0 0 0 4px var(--naranja), 0 0 50px rgba(255, 128, 0, .55), 0 20px 40px rgba(0, 0, 0, .5);
  animation: neon 1.2s linear .5s forwards, girarIntro 2.6s var(--ease) .5s both;
}
.intro__sello img { width: 66%; height: auto; translate: 9% 0; }
@keyframes girarIntro { from { transform: rotate(-200deg) scale(.7); } to { transform: none; } }
@keyframes neon {
  0% { opacity: 0; } 8% { opacity: .85; } 13% { opacity: .1; } 24% { opacity: .95; } 29% { opacity: .35; } 42%, 100% { opacity: 1; }
}
.intro__dial { position: relative; width: min(520px, 78vw); height: 48px; opacity: 0; animation: aparecer .7s var(--ease) .1s forwards; }
.intro__escala {
  position: absolute; left: 0; right: 0; top: 0; height: 18px; border-right: 1px solid rgba(251, 220, 183, .8);
  background:
    repeating-linear-gradient(90deg, rgba(251, 220, 183, .8) 0 1px, transparent 1px 20%) bottom / 100% 18px no-repeat,
    repeating-linear-gradient(90deg, rgba(251, 220, 183, .4) 0 1px, transparent 1px 2%) bottom / 100% 8px no-repeat;
}
.intro__numeros { position: absolute; left: 0; right: 0; top: 26px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: var(--crema-tenue); }
.intro__numeros span { position: absolute; transform: translateX(-50%); }
.intro__numeros span:nth-child(1) { left: 0; } .intro__numeros span:nth-child(2) { left: 20%; } .intro__numeros span:nth-child(3) { left: 40%; }
.intro__numeros span:nth-child(4) { left: 60%; } .intro__numeros span:nth-child(5) { left: 80%; } .intro__numeros span:nth-child(6) { left: 100%; }
.intro__aguja {
  position: absolute; top: -12px; left: 0; width: 2px; height: 40px; margin-left: -1px; border-radius: 2px;
  background: var(--naranja); box-shadow: 0 0 14px 2px rgba(255, 128, 0, .8);
}
.intro__lectura {
  margin: 0; min-height: 1.4em; font-family: var(--f-mono); font-size: 14px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--crema); text-shadow: 0 0 18px rgba(251, 220, 183, .45); font-variant-numeric: tabular-nums;
}

/* Las entradas del héroe esperan a que termine la intro */
html:not(.listo) :is(.kicker--entrada, .titulo__pre, .letra, .disco, .consola, .heroe__pie) { animation-play-state: paused; }

/* ---------- Cielo, textura y cursor ---------- */
.grano {
  position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grano 1.2s steps(6) infinite;
}
@keyframes grano {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

.cursor { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; display: none; transition: opacity .4s; }
html.cursor-propio .cursor { display: block; }
html.cursor-propio, html.cursor-propio * { cursor: none !important; }
html.cursor-propio input, html.cursor-propio textarea { cursor: text !important; }
.cursor__punto, .cursor__aro { position: fixed; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cursor__punto { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--naranja); box-shadow: 0 0 10px 1px rgba(255, 128, 0, .9); transition: background .3s, opacity .3s; }
.cursor__aro {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(251, 220, 183, .45);
  transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), border-color .3s, background .3s, box-shadow .3s, opacity .3s;
}
.cursor--activo .cursor__aro { width: 62px; height: 62px; margin: -31px 0 0 -31px; border-color: rgba(251, 220, 183, .85); background: rgba(251, 220, 183, .07); }
.cursor--texto .cursor__aro, .cursor--texto .cursor__punto { opacity: 0; }
.cursor--luz .cursor__aro { width: 70px; height: 70px; margin: -35px 0 0 -35px; border-color: var(--senal); box-shadow: 0 0 26px rgba(168, 240, 208, .55), inset 0 0 16px rgba(168, 240, 208, .35); }
.cursor--luz .cursor__punto { background: var(--senal); box-shadow: 0 0 12px 2px rgba(168, 240, 208, .9); }
.cursor--fuera { opacity: 0; }

/* ---------- Tipografía utilitaria ---------- */
.kicker {
  font-family: var(--f-mono); font-size: 12px; font-weight: 400; letter-spacing: .24em;
  text-transform: uppercase; color: var(--crema-dim); margin: 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.kicker::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.kicker--entrada::before { display: none; }
.kicker--chico { font-size: 10.5px; letter-spacing: .22em; }
.kicker--chico::before { width: 14px; }

/* Ecualizador "al aire": se mueve con el audio real */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; }
.eq i { display: block; width: 2.5px; height: calc(3px + var(--e, 0) * 9px); border-radius: 1px; background: var(--naranja); box-shadow: 0 0 6px rgba(255, 128, 0, .6); }
html:not([data-radio="vivo"]) .eq i { animation: eqReposo 1.8s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .25s !important; } .eq i:nth-child(3) { animation-delay: .5s !important; } .eq i:nth-child(4) { animation-delay: .75s !important; }
@keyframes eqReposo { 0%, 100% { height: 3px; } 50% { height: 6px; } }

/* ==========================================================
   CABECERA
   ========================================================== */
.cabecera {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 28px;
  padding: max(16px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 16px max(var(--gutter), env(safe-area-inset-left));
  transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom: 1px solid transparent;
}
.cabecera.compacta {
  background: rgba(11, 20, 28, .72);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--linea);
  padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 10px;
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.marca__sello {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 30%, #fff8ec, #f1dfc4 60%, #e2c9a6);
  box-shadow: 0 0 0 2px var(--naranja), 0 6px 16px rgba(0, 0, 0, .45);
  transition: transform .8s var(--ease);
}
.marca__sello img { width: 72%; height: auto; translate: 8% 0; }
.marca:hover .marca__sello { transform: rotate(-24deg) scale(1.06); }
.marca__texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca__radio { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--crema-dim); }
.marca__pueblo { font-family: var(--f-display); font-size: 21px; color: var(--crema); letter-spacing: .01em; }


.cabecera__clima { display: flex; gap: 18px; padding-left: 18px; border-left: 1px solid var(--linea); }
.dato { display: flex; flex-direction: column; line-height: 1.15; }
.dato__k { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--crema-tenue); }
.dato__v { font-family: var(--f-mono); font-size: 14px; color: var(--crema); font-variant-numeric: tabular-nums; white-space: nowrap; }


/* ==========================================================
   HÉROE
   ========================================================== */
.heroe {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center; gap: clamp(24px, 4vw, 64px);
  padding: clamp(96px, 12vh, 140px) var(--gutter) clamp(96px, 13vh, 170px);
  overflow: hidden;
}
/* Fondo: la foto scrollea con la página (nativo) y el parallax lo hace el navegador */
.fondo {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--cielo-top, #0b1522), var(--cielo-bot, #22344d) 42%, var(--suelo) 100%);
}
.fondo__raton { position: absolute; inset: 0; transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0); transition: transform 1.4s var(--ease); }
.fondo__marco {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; isolation: isolate;
  transform-origin: 50% 36%; will-change: transform;
  animation: respira 46s ease-in-out infinite alternate;
}
@keyframes respira { from { scale: 1; } to { scale: 1.045; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .fondo__marco {
      animation: respira 46s ease-in-out infinite alternate, fondoBaja linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
    @keyframes fondoBaja { to { translate: 0 26vh; } }
  }
}
.fondo__foto { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s var(--ease); }
.fondo__foto.cargada { opacity: 1; }
.fondo__capa { position: absolute; inset: 0; transition: opacity 2s linear; }
.fondo__cielo { -webkit-clip-path: var(--recorte-cielo); clip-path: var(--recorte-cielo); }
.fondo__noche { background: rgb(52, 66, 104); mix-blend-mode: multiply; opacity: calc(var(--noche, 1) * .94); }
.fondo__horizonte { background: linear-gradient(180deg, transparent 6%, rgba(40, 52, 84, .6) 34%); mix-blend-mode: screen; opacity: var(--noche, 1); }
.fondo__dia { background: linear-gradient(180deg, var(--cielo-top, #1c4f7f), var(--cielo-bot, #b8d4e6) 34%); mix-blend-mode: color; opacity: calc(var(--dia, 0) * .8); }
.fondo__dia-suelo { background: #a9c2da; mix-blend-mode: soft-light; opacity: calc(var(--dia, 0) * .4); }
.fondo__estrellas { position: absolute; display: block; mix-blend-mode: screen; }
.fondo__cresta { position: absolute; display: block; }
.fondo__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 12, 18, .55), rgba(6, 12, 18, 0) 150px),
    linear-gradient(90deg, rgba(6, 12, 18, var(--velo, .6)), rgba(6, 12, 18, calc(var(--velo, .6) * .45)) 34%, rgba(6, 12, 18, 0) 62%),
    linear-gradient(180deg, rgb(var(--suelo-rgb) / 0) 66%, rgb(var(--suelo-rgb) / .55) 86%, rgb(var(--suelo-rgb)) 100%),
    radial-gradient(ellipse 80% 70% at 58% 48%, rgba(5, 10, 16, 0) 45%, rgba(5, 10, 16, .42) 100%);
}

.heroe__texto { position: relative; max-width: 660px; }
.kicker--entrada { opacity: 0; animation: aparecer 1s var(--ease) .2s forwards; }

.titulo { margin: 18px 0 8px; font-family: var(--f-display); font-weight: 400; line-height: .84; letter-spacing: -.025em; }
.titulo__pre {
  display: block; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .38em; line-height: 1;
  text-transform: uppercase; color: var(--crema-dim); margin-bottom: 18px;
  opacity: 0; animation: aparecer 1s var(--ease) .35s forwards;
}
.titulo__linea { display: block; font-size: clamp(64px, min(10.5vw, 17vh), 172px); overflow: hidden; padding: .04em .1em .22em 0; margin-bottom: -.22em; filter: drop-shadow(0 4px 22px rgba(5, 10, 16, .6)); }
.titulo__linea--it { font-style: italic; padding-left: .55em; }
.letra {
  --v: 0;
  display: inline-block; transform: translateY(125%) rotate(6deg); transform-origin: 0 100%;
  padding: .04em .08em .2em; margin: -.04em -.08em -.2em;
  background: linear-gradient(176deg, #fff6ea 8%, var(--crema) 52%, #e2ae80 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: subir 1.4s var(--ease) forwards; animation-delay: calc(220ms + var(--i) * 60ms);
  /* con la radio al aire, cada letra respira con su banda del espectro */
  translate: 0 calc(var(--v) * -.08em);
  filter: drop-shadow(0 0 calc(var(--v) * 26px) rgba(251, 220, 183, .55));
}
.letra--o { background-image: linear-gradient(176deg, #ffd3a6 6%, var(--naranja) 52%, var(--naranja-hondo) 100%); filter: drop-shadow(0 0 calc(10px + var(--v) * 30px) rgba(255, 128, 0, calc(.25 + var(--v) * .45))); }
@keyframes subir { to { transform: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }



/* ---------- Disco / reproductor ---------- */
.heroe__player { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.disco {
  --tam: min(36vw, 440px, 52svh);

  position: relative; width: var(--tam); aspect-ratio: 1;
  opacity: 0; animation: discoEntra 1.8s var(--ease) .3s forwards;
}
@keyframes discoEntra { from { opacity: 0; transform: scale(.86) rotate(-12deg); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
#espectro { position: absolute; left: 50%; top: 50%; width: 176%; height: 176%; transform: translate(-50%, -50%); pointer-events: none; }

/* el cuerpo del disco se inclina hacia el cursor */
.disco__cuerpo {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 1.1s var(--ease);
}
.disco__anillo { position: absolute; inset: -7%; width: 114%; height: 114%; overflow: visible; animation: girar 70s linear infinite; animation-play-state: paused; }
html[data-radio="vivo"] .disco__anillo { animation-play-state: running; }
html[data-radio="sintonizando"] .disco__anillo { animation-play-state: running; animation-duration: 6s; }
.disco__anillo text { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .28em; fill: var(--crema); opacity: .78; }
.disco__guia { fill: none; stroke: rgba(251, 220, 183, .22); stroke-width: 1; stroke-dasharray: 1 7; }
@keyframes girar { to { transform: rotate(360deg); } }

.disco__nucleo {
  position: absolute; inset: 8%; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 29%, rgba(0, 0, 0, .25) 29.4% 29.8%, transparent 30.2%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .028) 0 1px, transparent 1.5px 4px),
    radial-gradient(circle at 34% 26%, #2c4456 0%, #172633 42%, #0b141c 78%, #070c11 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -30px 70px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(251, 220, 183, .16),
    0 40px 90px -30px rgba(0, 0, 0, .85);
  will-change: transform;
}
.disco__halo {
  position: absolute; inset: -16%; border-radius: 50%; pointer-events: none; opacity: 0; will-change: opacity, transform;
  background: radial-gradient(closest-side, rgba(255, 140, 40, .5), rgba(255, 140, 40, .16) 58%, transparent 74%);
}
.disco__brillo {
  /* el reflejo de un vinilo queda quieto mientras el disco gira */
  position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(251, 220, 183, .14) 12%, transparent 17% 58%, rgba(251, 220, 183, .1) 62%, transparent 67%);
}
.disco__reflejo {
  position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(circle at var(--lx, 34%) var(--ly, 24%), rgba(255, 244, 230, .2), rgba(255, 244, 230, .05) 22%, transparent 46%);
}
.disco__etiqueta {
  position: relative; width: 64%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; will-change: transform;
  translate: var(--tx, 0px) var(--ty, 0px); transition: translate 1.1s var(--ease);
  background:
    radial-gradient(circle, transparent 0 77%, rgba(255, 128, 0, .95) 77.6% 79%, transparent 79.6%),
    repeating-radial-gradient(circle, rgba(120, 80, 40, .045) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 38% 30%, #fff8ec, #f2e1c7 58%, #e0c6a2);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .5), 0 8px 22px rgba(0, 0, 0, .5);
}
.etiqueta__texto { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.etiqueta__texto text { font-family: var(--f-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .3em; fill: #3a2c20; opacity: .82; }
.etiqueta__logo { width: 56%; height: auto; translate: 9% 0; pointer-events: none; }

[data-iman] { translate: var(--ix, 0px) var(--iy, 0px); }

.disco__play {
  position: absolute; left: 50%; bottom: -1%; z-index: 3;
  width: clamp(66px, 6.4vw, 86px); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #1a0e04;
  background: radial-gradient(circle at 35% 30%, #ffc48a, var(--naranja) 58%, var(--naranja-hondo));
  box-shadow: 0 0 0 9px rgba(11, 20, 28, .72), 0 0 0 10px rgba(255, 128, 0, .45), 0 18px 40px -8px rgba(0, 0, 0, .7), 0 0 46px rgba(255, 128, 0, .45);
  transform: translate(-50%, 0); transition: transform .5s var(--ease), box-shadow .5s, translate .6s var(--ease);
}
.disco__play::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(255, 128, 0, .7);
  animation: invitar 2.6s var(--ease) infinite;
}
html[data-radio="vivo"] .disco__play::before, html[data-radio="sintonizando"] .disco__play::before { animation: none; opacity: 0; }
@keyframes invitar { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.disco__play:hover { transform: translate(-50%, 0) scale(1.07); }
.disco__play:active { transform: translate(-50%, 0) scale(.96); }

.ico { grid-area: 1 / 1; width: 40%; height: 40%; fill: currentColor; transition: opacity .35s, transform .5s var(--ease); }
.ico--play { transform: translateX(6%); }
.ico--pausa, .ico--carga { opacity: 0; transform: scale(.5); }
.ico--carga { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 18 60; }
html[data-radio="vivo"] .ico--play, html[data-radio="sintonizando"] .ico--play { opacity: 0; transform: scale(.5); }
html[data-radio="vivo"] .ico--pausa { opacity: 1; transform: none; }
html[data-radio="sintonizando"] .ico--carga { opacity: 1; transform: none; animation: girar .9s linear infinite; }

.consola {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; animation: aparecer 1.2s var(--ease) 1.2s forwards; transition: filter 1.2s var(--ease);
}
.consola::before { content: ''; position: absolute; inset: -18px -40px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(8, 15, 22, .42), transparent); pointer-events: none; }
.lectura {
  margin: 0; min-height: 1.4em; font-family: var(--f-mono); font-size: 13px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--crema); text-align: center; text-shadow: 0 0 18px rgba(251, 220, 183, .35), 0 1px 14px rgba(5, 10, 16, .7), 0 0 3px rgba(5, 10, 16, .5);
}
html[data-radio="error"] .lectura { color: var(--brasa); text-shadow: 0 0 18px rgba(255, 123, 92, .35); }
html[data-radio="espera"] .lectura { color: var(--crema-dim); }
/* fuera del aire: el ecualizador se apaga */
html[data-senal="fuera"] .eq i { background: var(--crema-tenue); box-shadow: none; animation: none; height: 3px; }

.volumen { display: flex; align-items: center; gap: 10px; }
.volumen__btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linea); background: var(--vidrio); cursor: pointer; display: grid; place-items: center; transition: border-color .3s, translate .6s var(--ease); }
.volumen__btn:hover { border-color: var(--crema-tenue); }
.volumen__btn svg { width: 18px; height: 18px; fill: none; stroke: var(--crema); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.volumen__btn .v-base { fill: var(--crema); }
.volumen__btn .v-mute, .volumen__btn .i-cerrar { display: none; }
.volumen__btn[aria-pressed="true"] .v-mute { display: inline; }
.volumen__btn[aria-pressed="true"] .v-onda1, .volumen__btn[aria-pressed="true"] .v-onda2 { display: none; }
#btnInmersivo { margin-left: 4px; }

input[type="range"] {
  --v: .85;
  -webkit-appearance: none; appearance: none; width: 150px; height: 20px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--crema) calc(var(--v) * 100%), rgba(251, 220, 183, .2) 0);
}
input[type="range"]::-moz-range-track { height: 2px; border-radius: 2px; background: rgba(251, 220, 183, .2); }
input[type="range"]::-moz-range-progress { height: 2px; background: var(--crema); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%;
  background: var(--crema); box-shadow: 0 0 0 4px rgba(251, 220, 183, .15), 0 0 14px rgba(251, 220, 183, .5);
  transition: transform .3s var(--ease);
}
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--crema); }
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.25); }

.aviso-demo { margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; color: var(--crema-dim); text-align: center; text-shadow: 0 1px 10px rgba(5, 10, 16, .8); }
.aviso-demo code { font-family: inherit; color: var(--crema-dim); }

.heroe__pie {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 22px;
  display: flex; align-items: center; gap: 16px;
  opacity: 0; animation: aparecer 1s var(--ease) 1.5s forwards; transition: filter 1.2s var(--ease);
}
.chip-cielo {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--linea); background: rgba(11, 20, 28, .5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; color: var(--crema-dim); text-align: left;
  transition: border-color .3s, color .3s, translate .6s var(--ease);
}
.chip-cielo:hover { border-color: var(--crema-tenue); color: var(--crema); }
.chip-cielo__ico {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: conic-gradient(from 200deg, #0b141c, #2a3557, #f4a76f, #87b8dc, #1f4f7d, #0b141c);
  box-shadow: 0 0 0 1px rgba(251, 220, 183, .3);
}

@supports (animation-timeline: scroll()) {
  @media (min-width: 921px) and (prefers-reduced-motion: no-preference) {
    .heroe__texto { animation: salidaTexto linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
    .heroe__player { animation: salidaPlayer linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
    @keyframes salidaTexto { to { translate: 0 -90px; opacity: 0; } }
    @keyframes salidaPlayer { to { translate: 0 70px; scale: .84; opacity: .05; } }
  }
}

/* ---------- Banda (la mueve app.js, más rápido con la música) ---------- */
.banda {
  --b: 0;
  position: relative; overflow: hidden; background: var(--suelo);
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  padding: 22px 0;
}
.banda__pista { display: flex; align-items: center; gap: 34px; width: max-content; will-change: transform; }
.banda span, .banda i { flex: none; }
.banda span {
  font-family: var(--f-display); font-size: clamp(34px, 4.6vw, 64px); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(251, 220, 183, calc(.4 + var(--b) * .5));
}
.banda span.it { font-style: italic; color: var(--crema); -webkit-text-stroke: 0; text-shadow: 0 0 calc(var(--b) * 28px) rgba(251, 220, 183, .55); }
.banda i { font-style: normal; color: var(--crema-tenue); font-size: 20px; }



/* ==========================================================
   PIE
   ========================================================== */
.pie { position: relative; padding: clamp(70px, 10vw, 120px) var(--gutter) 120px; background: var(--noche); border-top: 1px solid var(--linea); }
.pie__marca { display: flex; align-items: center; gap: clamp(20px, 4vw, 44px); padding-bottom: 48px; border-bottom: 1px solid var(--linea); }
.pie__marca img { width: clamp(88px, 11vw, 132px); height: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6)); }
.pie__nombre { margin: 0; font-family: var(--f-display); font-size: clamp(36px, 5vw, 68px); line-height: .95; color: var(--crema); }
.pie__nombre em { font-style: italic; }
.pie__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 44px 0; }
.pie__cols h3 { margin: 0 0 12px; font-family: var(--f-mono); font-weight: 400; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--crema-tenue); }
.pie__cols p { margin: 0 0 6px; color: var(--crema-dim); font-size: 15.5px; }
.pie__cols a { color: var(--crema-2); text-decoration-color: var(--crema-tenue); text-underline-offset: 4px; }
.pie__cols b { font-family: var(--f-mono); color: var(--senal); font-weight: 400; }
.pie__legal { margin: 0; font-family: var(--f-mono); font-size: 11.5px; color: var(--crema-tenue); letter-spacing: .06em; }

/* ==========================================================
   MINI REPRODUCTOR Y AVISOS
   ========================================================== */
.mini {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 45;
  width: min(640px, calc(100% - 24px));
  display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 8px; border-radius: 99px;
  background: rgba(13, 24, 33, .78); border: 1px solid var(--linea);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8);
  transform: translate(-50%, 160%); transition: transform .8s var(--ease);
}
.mini.visible { transform: translate(-50%, 0); }
.mini__play { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffc48a, var(--naranja) 60%, var(--naranja-hondo)); color: #1a0e04; transition: translate .6s var(--ease); }
.mini__play .ico { width: 44%; height: 44%; }
.mini__info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mini__radio { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--crema-dim); white-space: nowrap; }
.mini__radio .eq { height: 10px; }
.mini__prog { font-family: var(--f-display); font-style: italic; font-size: 18px; color: var(--crema); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini__ondas { flex: 1; min-width: 60px; height: 34px; }
.mini__subir { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea); display: grid; place-items: center; transition: border-color .3s; }
.mini__subir:hover { border-color: var(--crema-tenue); }
.mini__subir svg { width: 18px; height: 18px; fill: none; stroke: var(--crema); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.aviso {
  position: fixed; left: 50%; top: 86px; z-index: 70; max-width: min(460px, calc(100% - 32px));
  padding: 12px 18px; border-radius: 14px; border: 1px solid var(--linea);
  background: rgba(13, 24, 33, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--crema-2); font-size: 14.5px; text-align: center;
  transform: translate(-50%, -16px); opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.aviso b { color: var(--crema); }
.aviso--senal { border-color: rgba(168, 240, 208, .4); box-shadow: 0 0 40px -10px rgba(168, 240, 208, .4); }
.aviso--senal b { color: var(--senal); }

/* ==========================================================
   MODO CIELO — pantalla completa, sólo el cielo y la radio
   ========================================================== */
html.inmersivo body { overflow: hidden; }
html.inmersivo :is(.cabecera, .banda, .pie, .mini, .heroe__texto, .aviso-demo) { display: none !important; }
html.inmersivo .heroe { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; min-height: 100vh; min-height: 100svh; padding: 12vh var(--gutter) 14vh; }
html.inmersivo .heroe__player { gap: 40px; }
html.inmersivo .disco { --tam: min(46vh, 70vw); }
html.inmersivo .i-abrir { display: none; }
html.inmersivo .volumen__btn .i-cerrar { display: inline; }
html.inmersivo.quieto :is(.consola, .heroe__pie) { filter: opacity(0); }
html.inmersivo.quieto .cursor { opacity: 0; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1100px) {
  .cabecera__clima #climaDato { display: none; }
}

@media (max-width: 920px) {
  .cabecera { gap: 14px; }
  .cabecera__clima { border-left: 0; padding-left: 0; }
  .fondo__velo {
    background:
      linear-gradient(180deg, rgba(6, 12, 18, .62), rgba(6, 12, 18, .2) 30%, rgba(6, 12, 18, .08) 42%, rgba(6, 12, 18, .42) 58%, rgba(6, 12, 18, .5) 70%),
      linear-gradient(180deg, rgb(var(--suelo-rgb) / 0) 66%, rgb(var(--suelo-rgb) / .65) 86%, rgb(var(--suelo-rgb)) 100%);
  }
  .consola::before { inset: -22px -50px; background: radial-gradient(closest-side, rgba(8, 15, 22, .62), transparent); }

  .heroe { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 108px; padding-bottom: 140px; align-content: start; }
  .heroe__texto { display: contents; }
  .heroe .kicker--entrada { order: 1; }
  .titulo { order: 2; margin-bottom: 10px; }
  .heroe__player { order: 4; margin: 18px 0 30px; }
  .disco { --tam: min(74vw, 400px, 56svh); }

  .pie__cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .marca__sello { width: 40px; height: 40px; }
  .marca__pueblo { font-size: 18px; }
  .cabecera { gap: 10px; }
  .cabecera__clima .dato__k { display: none; }
  .marca__radio { font-size: 9.5px; letter-spacing: .2em; }
  .heroe { padding-bottom: 200px; }
  .titulo__linea--it { padding-left: .3em; }
  input[type="range"] { width: 120px; }
  .heroe__pie { bottom: 16px; }
  .mini__ondas { display: none; }
  .pie__marca { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .cabecera__clima { display: none; }
  .titulo__linea { font-size: clamp(56px, 17vw, 72px); }
}

/* Celular acostado: dos columnas, todo entra en la altura */
@media (orientation: landscape) and (max-height: 560px) {
  .heroe { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 24px; align-content: center; padding-top: 68px; padding-bottom: 28px; }
  .heroe__texto { display: block; }
  .titulo { margin: 6px 0 12px; }
  .titulo__pre { display: none; }
  .lectura { font-size: 11.5px; }
  .titulo__linea { font-size: clamp(44px, 15vh, 84px); }
  .aviso-demo { display: none; }
  .heroe__player { margin: 0; gap: 16px; }
  .disco { --tam: min(50svh, 38vw, 270px); }
  .heroe__pie { display: none; }
  .fondo__velo {
    background:
      linear-gradient(90deg, rgba(6, 12, 18, .65), rgba(6, 12, 18, .2) 50%, rgba(6, 12, 18, 0) 70%),
      linear-gradient(180deg, rgb(var(--suelo-rgb) / 0) 70%, rgb(var(--suelo-rgb)) 100%);
  }
}

/* Celulares y tablets: sin desenfoques de vidrio ni filtros que se recalculan en cada cuadro */
@media (hover: none), (pointer: coarse) {
  .grano { animation: none; }
  .chip-cielo, .mini, .cabecera.compacta { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .chip-cielo { background: rgba(11, 20, 28, .8); }
  .mini { background: rgba(13, 24, 33, .95); }
  .cabecera.compacta { background: rgba(11, 20, 28, .93); }
  .titulo__linea, .letra, .letra--o, .disco__logo { filter: none; }
  .fondo__raton { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .letra { transform: none; }
  .intro { display: none; }
}