@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=Libre+Franklin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root{
  --bg: #150d0b;
  --bg-raised: #1e1310;
  --surface: #2a1c19;
  --surface-2: #331f1a;
  --ink: #f6ede2;
  --ink-dim: #cbb9ab;
  --ink-faint: #8f7d72;
  --clave: #c8452b;
  --clave-bright: #e85a3a;
  --clave-dim: #7a2c1c;
  --brass: #dcae52;
  --line: rgba(246,237,226,0.12);
  --line-strong: rgba(246,237,226,0.22);
  --focus: #e8b96b;
  --ok: #3d9a6a;
  --danger: #e85a3a;
  --paper: #efe6d8;
  --paper-ink: #241811;
  --paper-ink-dim: rgba(36,24,17,0.68);
  --paper-line: rgba(36,24,17,0.14);
  --paper-line-strong: rgba(36,24,17,0.26);
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Libre Franklin", -apple-system, "Segoe UI", sans-serif;

  --slc-black: var(--bg);
  --slc-wine: var(--clave-dim);
  --slc-copper: var(--brass);
  --slc-white: var(--ink);
  --slc-muted: var(--ink-faint);
  --sticky-h: 74px;
}

*{ box-sizing:border-box; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
html{ color-scheme: dark; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height:1.5;
  padding-inline: clamp(16px, 4vw, 48px);
  padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px));
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:200; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:0.05; mix-blend-mode:overlay;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background: var(--clave); color: var(--ink); }

h1,h2,h3{ font-family: var(--font-display); font-weight:800; margin:0; text-wrap:balance; letter-spacing:0.01em; }
p{ margin:0; }

.wrap{ max-width: 1200px; margin-inline:auto; position:relative; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.reveal{ opacity:1; transform:none; }

.glow{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; }
@media (prefers-reduced-motion:no-preference){ .glow{ animation: drift 14s ease-in-out infinite; } }
@keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-12px,16px) scale(1.08); } }

/* ---------- header ---------- */
header{
  position: sticky; top:0; z-index:200;
  background: rgba(21,13,11,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  margin-inline: calc(clamp(16px,4vw,48px) * -1);
  padding-inline: clamp(16px,4vw,48px);
}
.header-row{
  max-width:1200px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px; gap:24px;
}
.brandmark{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.brandmark-logo{ width:34px; height:34px; border-radius:50%; flex-shrink:0; }
@media (prefers-reduced-motion:no-preference){ .brandmark-logo{ animation: spin 10s linear infinite; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
.brandmark span{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:0.02em; }
nav{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); }
nav a{ text-decoration:none; font-size:0.86rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-dim); position:relative; }
nav a:not(.btn)::after{ content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px; background:var(--brass); transition:right 0.25s ease; }
nav a:not(.btn):hover::after{ right:0; }
nav a:hover{ color:var(--ink); }
.nav-links{ display:flex; gap:clamp(14px,2vw,28px); }
.header-actions{ display:flex; align-items:center; gap:14px; }

.btn{
  font-family:var(--font-body); font-weight:700; font-size:0.82rem; letter-spacing:0.04em; text-transform:uppercase;
  border-radius:3px; border:1px solid transparent; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.btn:active{ transform: translateY(1px) scale(0.98); }
.btn-primary{ background:var(--clave); color:var(--ink); padding:11px 20px; }
.btn-primary:hover{ background:var(--clave-bright); box-shadow:0 4px 24px -4px rgba(232,90,58,0.65); }
.btn-invert{ background:var(--ink); color:var(--clave-dim); padding:13px 24px; }
.btn-invert:hover{ background:#fff; box-shadow:0 4px 24px -4px rgba(0,0,0,0.35); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); padding:11px 20px; }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass); }

/* ---------- hamburger + drawer ---------- */
.menu-toggle{
  display:none; width:44px; height:44px; border-radius:8px; border:1px solid var(--line-strong);
  background:transparent; color:var(--ink); cursor:pointer; align-items:center; justify-content:center;
  flex-direction:column; gap:4px; flex-shrink:0;
}
.menu-toggle span{ width:20px; height:2px; background:currentColor; border-radius:2px; transition:transform 0.2s ease, opacity 0.2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (max-width: 760px){
  .nav-links{ display:none; }
  .header-cta{ display:none; }
  .menu-toggle{ display:flex; }
}

.drawer{
  position:fixed; inset:0; z-index:250; display:flex; justify-content:flex-end;
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
.drawer[hidden]{ display:none; }
.drawer.is-open{ opacity:1; pointer-events:auto; }
.drawer-backdrop{ position:absolute; inset:0; background:rgba(10,6,5,0.86); backdrop-filter:blur(6px); }
.drawer-panel{
  position:relative; z-index:1; width:min(320px,84vw); height:100%; background:var(--bg-raised);
  border-left:1px solid var(--line-strong); padding:20px; display:flex; flex-direction:column; gap:6px;
  transform:translateX(24px); transition:transform 0.28s ease;
  overflow-y:auto;
}
.drawer.is-open .drawer-panel{ transform:translateX(0); }
@media (prefers-reduced-motion:reduce){ .drawer, .drawer-panel{ transition:none; } }
.drawer-top{ display:flex; justify-content:flex-end; margin-bottom:12px; }
.drawer-close{
  width:44px; height:44px; border-radius:8px; border:1px solid var(--line-strong); background:transparent;
  color:var(--ink); cursor:pointer; font-size:1.1rem;
}
.drawer-nav{ display:flex; flex-direction:column; gap:4px; }
.drawer-nav a{
  display:block; padding:14px 6px; text-decoration:none; color:var(--ink); font-weight:700;
  font-size:1.05rem; border-bottom:1px solid var(--line); min-height:44px;
}
.drawer-nav a:hover{ color:var(--clave-bright); }
.drawer-cta{ margin-top:20px; }

.statement{
  position:relative; isolation:isolate; overflow:hidden; border-radius:16px; border-bottom:none;
  background:var(--clave); color:var(--ink);
  padding:clamp(40px,7vw,72px) clamp(28px,6vw,64px) !important;
}
.statement-scene{ position:absolute; inset:0; z-index:-1; }
.statement-photo{
  position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover;
  object-position:66% 48%; filter:saturate(1.05) contrast(1.05);
}
.statement-tint{
  position:absolute; inset:0; z-index:-2;
  background:linear-gradient(100deg, rgba(200,69,43,0.94) 8%, rgba(122,44,28,0.8) 34%, rgba(21,13,11,0.45) 62%, rgba(21,13,11,0.18) 100%);
}
.statement-inner{ position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; }
.statement p{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,4vw,2.5rem); line-height:1.08; max-width:24ch; text-wrap:balance; }

/* programación — single-show "ticket" card */
#programacion h2{ max-width:16ch; margin-bottom:clamp(28px,4vw,44px); }
.prog-card{
  display:grid; grid-template-columns: 1.3fr auto 1fr; align-items:stretch;
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--line-strong); border-radius:14px; overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.7);
}
.prog-main{ padding:clamp(26px,4vw,40px); display:flex; flex-direction:column; gap:12px; justify-content:center; }
.prog-status{ display:flex; align-items:center; gap:8px; font-size:0.74rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--clave-bright); }
.prog-status[data-window="off"]{ color:var(--ink-faint); }
.prog-name{ font-size:clamp(1.6rem,3vw,2.1rem); }
.prog-desc{ color:var(--ink-dim); font-size:0.94rem; max-width:46ch; }
.prog-divider{ position:relative; border-left:2px dashed var(--line-strong); }
.prog-divider::before, .prog-divider::after{
  content:""; position:absolute; left:-12px; width:24px; height:24px; border-radius:50%; background:var(--bg);
}
.prog-divider::before{ top:-12px; }
.prog-divider::after{ bottom:-12px; }
.prog-side{ padding:clamp(26px,4vw,40px); display:flex; flex-direction:column; gap:22px; justify-content:center; background:rgba(0,0,0,0.15); }
.prog-times{ display:flex; flex-direction:column; gap:14px; }
.prog-time-item{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.prog-time-label{ font-size:0.74rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); }
.prog-time-value{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--brass); font-variant-numeric:tabular-nums; }
.prog-simulcast{ display:flex; flex-direction:column; gap:4px; border-top:1px solid var(--line); padding-top:16px; }
.prog-simulcast-label{ font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); }
.prog-simulcast-value{ font-size:0.92rem; font-weight:600; }
@media (max-width:760px){
  .prog-card{ grid-template-columns:1fr; }
  .prog-divider{ border-left:none; border-top:2px dashed var(--line-strong); height:0; }
  .prog-divider::before, .prog-divider::after{ left:50%; top:-12px; transform:translateX(-50%); }
  .prog-divider::after{ top:auto; bottom:-12px; }
  .prog-side{ background:rgba(0,0,0,0.15); }
}
.live-dot{ width:7px; height:7px; border-radius:50%; background:#ffb199; flex-shrink:0; box-shadow:0 0 8px 1px rgba(232,90,58,0.7); }
@media (prefers-reduced-motion:no-preference){ .live-dot{ animation: pulse 1.8s ease-in-out infinite; } }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }
.prog-status[data-window="off"] .live-dot{ background:var(--ink-faint); box-shadow:none; animation:none; }

/* ---------- on-air marquee (the one allowed marquee) ---------- */
.ticker{
  overflow:hidden; border-bottom:1px solid var(--line); background:var(--bg-raised);
  margin-inline: calc(clamp(16px,4vw,48px) * -1); padding-block:9px;
}
.ticker-track{ display:flex; width:max-content; }
.ticker-track span{
  display:inline-flex; align-items:center; gap:10px; padding-inline:20px;
  font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint);
  white-space:nowrap;
}
.ticker-track span i{ color:var(--brass); font-style:normal; }
@media (prefers-reduced-motion:no-preference){ .ticker-track{ animation: ticker 34s linear infinite; } }
@media (prefers-reduced-motion:reduce){ .ticker{ overflow-x:auto; } .ticker-track{ width:max-content; } }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- hero ---------- */
.hero{
  position:relative; isolation:isolate;
  padding-block: clamp(40px, 7vw, 76px) clamp(56px,9vw,96px);
  display:grid; grid-template-columns: 1.35fr 1fr; gap:clamp(24px,4vw,56px);
  align-items:end;
  border-bottom:1px solid var(--line);
}
.hero-scene{ position:absolute; inset:-6% -6% 0 -6%; z-index:-1; overflow:hidden; pointer-events:none; }
.hero-scene .rings{ position:absolute; top:8%; left:38%; width:64%; opacity:0.55; }
.hero-scene .skyline{ position:absolute; left:0; right:0; bottom:0; width:100%; opacity:0.9; }
.hero-scene .fade{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 0%, transparent 55%, var(--bg) 96%); }
.hero-scene .photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:78% 26%; opacity:0.9; filter:saturate(0.85) contrast(1.08); }
.hero-scene .tint{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(21,13,11,0.94) 20%, rgba(21,13,11,0.72) 42%, rgba(30,19,16,0.38) 66%, rgba(200,69,43,0.22) 100%); }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.74rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--brass); margin-bottom:18px;
}
.hero h1{
  font-size: clamp(3.6rem, 10.5vw, 7.6rem);
  line-height:0.84;
  margin-left:-4px;
  text-shadow: 0 2px 40px rgba(0,0,0,0.4);
}
.hero h1 em{ font-style:normal; color:var(--clave-bright); }
.hero-tagline{
  font-style:italic; font-weight:500; color:var(--ink-dim);
  font-size:clamp(1.05rem,2vw,1.3rem); margin-top:18px; max-width:34ch;
}
.hero-sub{ color:var(--ink-dim); margin-top:14px; max-width:46ch; font-size:0.98rem; }
.hero-ctas{ display:flex; align-items:center; gap:20px; margin-top:30px; flex-wrap:wrap; }
.hero-link{ font-size:0.86rem; font-weight:600; text-decoration:underline; text-underline-offset:3px; color:var(--ink-dim); }
.hero-link:hover{ color:var(--ink); }

.vinyl-wrap{ position:absolute; width:200px; height:200px; right:-36px; top:-76px; z-index:-1; }
@media (max-width:860px){ .vinyl-wrap{ display:none; } }
.vinyl-spin{ width:100%; height:100%; transform-origin:center; }
@media (prefers-reduced-motion:no-preference){ .vinyl-spin{ animation: spin 9s linear infinite; } }

.player-card{
  background:linear-gradient(160deg, var(--surface-2), var(--surface)); border:1px solid var(--line-strong); border-radius:10px;
  padding:22px; display:flex; flex-direction:column; gap:16px; position:relative;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.05);
}
.player-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.player-status{ display:flex; align-items:center; gap:8px; font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--clave-bright); }
.player-bitrate{ font-size:0.7rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; border:1px solid var(--line-strong); border-radius:3px; padding:3px 7px; }
.player-track{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; letter-spacing:0.01em; }
.player-artist{ color:var(--ink-dim); font-size:0.88rem; margin-top:2px; }
.waveform{ display:flex; align-items:flex-end; gap:3px; height:34px; }
.waveform span{ flex:1; background:linear-gradient(180deg, var(--clave-bright), var(--clave)); border-radius:1px; opacity:0.9; }
@media (prefers-reduced-motion:no-preference){ .waveform span{ animation: bar 1.1s ease-in-out infinite; } }
@keyframes bar{ 0%,100%{ transform:scaleY(0.22); } 50%{ transform:scaleY(1); } }
.player-controls{
  display:flex; align-items:center; gap:14px;
  overflow:hidden; transition:opacity 0.25s ease, max-height 0.25s ease, margin 0.25s ease;
  max-height:80px; opacity:1;
}
.player-controls[inert]{ max-height:0; opacity:0; margin-top:-16px; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .player-controls{ transition:none; } }
.play-toggle{
  width:46px; height:46px; border-radius:50%; background:var(--clave); border:none; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  transition:box-shadow 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.play-toggle:hover{ background:var(--clave-bright); box-shadow:0 0 0 8px rgba(232,90,58,0.14); transform:scale(1.05); }
.volume{ flex:1; accent-color:var(--clave); }

/* ---------- banner de instalación (PWA) ---------- */
.install-banner{
  position:fixed; left:0; right:0; z-index:160;
  bottom:calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px));
  background:var(--surface-2); border-top:1px solid var(--line-strong);
  transform:translateY(0); transition:transform 0.3s ease, opacity 0.3s ease;
}
.install-banner[hidden]{ display:none; }
.install-banner-inner{
  max-width:1200px; margin-inline:auto; padding:12px clamp(16px,4vw,48px);
  display:flex; align-items:center; gap:14px;
}
.install-banner-logo{ width:36px; height:36px; border-radius:50%; flex-shrink:0; }
.install-banner-text{ min-width:0; flex:1; }
.install-banner-title{ font-weight:700; font-size:0.92rem; }
.install-banner-sub{ color:var(--ink-dim); font-size:0.8rem; margin-top:2px; }
.install-banner-btn{ padding:9px 18px; font-size:0.78rem; flex-shrink:0; }
.install-banner-close{
  width:36px; height:36px; min-width:36px; border-radius:50%; border:1px solid var(--line-strong);
  background:transparent; color:var(--ink-dim); cursor:pointer; flex-shrink:0; font-size:0.8rem;
}
.install-banner-close:hover{ color:var(--ink); }
@media (max-width:520px){ .install-banner-sub{ display:none; } }

/* ---------- sticky player bar ---------- */
.sticky-player{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:rgba(21,13,11,0.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line-strong);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sticky-player-inner{
  max-width:1200px; margin-inline:auto; padding:11px clamp(16px,4vw,48px);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.sticky-track-info{ display:flex; align-items:center; gap:12px; min-width:0; }
.sticky-art{
  width:2.5rem; height:2.5rem; border-radius:50%; flex-shrink:0;
  background:repeating-radial-gradient(circle, #0f0908 0, #0f0908 2px, #1e1310 3px, #1e1310 4px);
  border:1px solid var(--line-strong); position:relative;
}
.sticky-art::after{ content:""; position:absolute; inset:38%; border-radius:50%; background:var(--clave); }
@media (prefers-reduced-motion:no-preference){ .sticky-art{ animation:spin 6s linear infinite; } }
.sticky-text{ min-width:0; }
.sticky-status{ display:flex; align-items:center; gap:6px; font-size:0.66rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--clave-bright); }
.sticky-track{ font-size:0.86rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.sticky-track .sticky-artist{ color:var(--ink-dim); font-weight:400; }
.sticky-controls{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.play-toggle.small{ width:2.2rem; height:2.2rem; font-size:0.7rem; }
.waveform.small{ height:16px; gap:2px; width:52px; }
.sticky-volume{ display:flex; align-items:center; gap:8px; }
.sticky-volume .volume{ width:80px; }
@media (max-width:760px){
  .sticky-volume, .waveform.small{ display:none; }
  .sticky-track{ max-width:38vw; }
}
@media (max-width:460px){
  .sticky-status{ display:none; }
}

/* ---------- player states ---------- */
.js-status[data-state="off"] .live-dot,
.js-status[data-state="error"] .live-dot{ background:var(--ink-faint); box-shadow:none; animation:none; }
.js-status[data-state="connecting"] .live-dot,
.js-status[data-state="buffering"] .live-dot,
.js-status[data-state="reconnecting"] .live-dot,
.js-status[data-state="needs-tap"] .live-dot{ background:var(--brass); box-shadow:0 0 8px 1px rgba(220,174,82,0.6); }
.js-status[data-state="off"] .js-status-text,
.js-status[data-state="error"] .js-status-text{ color:var(--ink-faint); }
.js-status[data-state="connecting"] .js-status-text,
.js-status[data-state="buffering"] .js-status-text,
.js-status[data-state="reconnecting"] .js-status-text,
.js-status[data-state="needs-tap"] .js-status-text{ color:var(--brass); }

.play-toggle[data-loading]{ position:relative; }
.play-toggle[data-loading]::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid transparent; border-top-color:var(--brass); border-right-color:var(--brass);
}
@media (prefers-reduced-motion:no-preference){ .play-toggle[data-loading]::after{ animation:spin 0.9s linear infinite; } }

.expand-toggle{
  width:2.2rem; height:2.2rem; min-width:44px; min-height:44px; border-radius:50%;
  border:1px solid var(--line-strong); background:transparent; color:var(--ink-dim); cursor:pointer;
  flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.85rem;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.expand-toggle:hover{ color:var(--ink); border-color:var(--brass); }
@media (max-width:760px){ .expand-toggle{ width:2.2rem; height:2.2rem; } }

/* ---------- now playing (expanded) ---------- */
.now-playing-overlay{
  position:fixed; inset:0; z-index:300; display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
.now-playing-overlay[hidden]{ display:none; }
.now-playing-overlay.is-open{ opacity:1; pointer-events:auto; }
.now-playing-backdrop{ position:absolute; inset:0; background:rgba(10,6,5,0.86); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.now-playing-panel{
  position:relative; z-index:1; width:100%; max-width:480px; max-height:100dvh; overflow-y:auto;
  background:linear-gradient(180deg, var(--surface-2), var(--bg) 75%);
  border-top-left-radius:20px; border-top-right-radius:20px;
  padding: 18px clamp(20px,5vw,32px) calc(28px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;
  box-shadow:0 -20px 60px -20px rgba(0,0,0,0.8);
  transform:translateY(24px); transition:transform 0.28s ease;
}
.now-playing-overlay.is-open .now-playing-panel{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .now-playing-overlay, .now-playing-panel{ transition:none; } }
@media (min-width:760px){
  .now-playing-overlay{ align-items:center; }
  .now-playing-panel{ border-radius:20px; max-height:min(680px,88vh); }
}
.now-playing-close{
  align-self:flex-end; width:36px; height:36px; min-width:44px; min-height:44px; border-radius:50%;
  border:1px solid var(--line-strong); background:transparent; color:var(--ink-dim); cursor:pointer; font-size:0.9rem;
}
.now-playing-close:hover{ color:var(--ink); border-color:var(--line); }
.now-playing-art{
  width:min(240px,58vw); height:min(240px,58vw); border-radius:16px; flex-shrink:0;
  background:radial-gradient(circle at 35% 30%, var(--clave-dim), var(--bg-raised) 70%);
  display:flex; align-items:center; justify-content:center; font-size:3.4rem;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.7);
}
.now-playing-title{ font-family:var(--font-display); font-size:1.6rem; }
.now-playing-artist{ color:var(--ink-dim); }
.now-playing-controls{ display:flex; align-items:center; gap:22px; }
.play-toggle.large{ width:64px; height:64px; font-size:1.1rem; }
.np-icon-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:transparent;
  color:var(--ink-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.np-icon-btn:hover{ color:var(--ink); border-color:var(--brass); }
.np-icon-btn[aria-pressed="true"]{ color:var(--clave-bright); border-color:var(--clave); }
.now-playing-volume{ width:100%; max-width:280px; }
.now-playing-recent{ width:100%; margin-top:4px; text-align:left; }
.now-playing-recent ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.now-playing-recent li{ font-size:0.86rem; color:var(--ink-dim); border-bottom:1px solid var(--line); padding-bottom:8px; }
.now-playing-recent li b{ color:var(--ink); font-weight:600; }
.now-playing-recent:empty, .now-playing-recent:has(ol:empty){ display:none; }
.now-playing-empty{ font-size:0.82rem; color:var(--ink-faint); padding-block:4px; }

/* ---------- section shell ---------- */
section{ padding-block: clamp(48px,7vw,88px); border-bottom:1px solid var(--line); position:relative; }

/* destellos dorados sutiles — solo en secciones sin foto propia */
#programacion, #ahora-suena, #comunidad{ isolation:isolate; }
.ray-sweep{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:-1; pointer-events:none; }
@media (prefers-reduced-motion:no-preference){ .ray-sweep{ animation:drift 20s ease-in-out infinite; } }
section:last-of-type{ border-bottom:none; }
.kicker{ font-size:0.74rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--brass); display:block; margin-bottom:14px; }

/* why listen */
.why{
  display:grid; grid-template-columns: 0.85fr 1.15fr; gap:clamp(28px,5vw,64px); align-items:start;
  position:relative; isolation:isolate; border-radius:16px; overflow:hidden; border-bottom:none;
  background:var(--paper); color:var(--paper-ink);
  padding:clamp(40px,6vw,72px) clamp(28px,6vw,64px) !important;
}
.why-scene{ position:absolute; inset:0; z-index:-1; opacity:0.5; }
.why h2{ color:var(--paper-ink); max-width:12ch; }
.clave-pattern{ display:flex; gap:9px; margin-top:22px; }
.clave-pattern i{ width:9px; height:9px; border-radius:50%; background:var(--paper-line-strong); font-style:normal; }
.clave-pattern i.hit{ background:var(--clave); box-shadow:0 0 8px 1px rgba(200,69,43,0.35); }
.why-list{ display:flex; flex-direction:column; }
.why-item{
  display:grid; grid-template-columns: 4.5rem 1fr; gap:20px; align-items:center;
  padding-block:20px; border-top:1px solid var(--paper-line);
  transition: transform 0.35s ease;
}
.why-item:last-child{ border-bottom:1px solid var(--paper-line); }
.why-item:hover{ transform:translateX(6px); }
.icon-tile{
  width:4.5rem; height:4.5rem; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(200,69,43,0.08);
  border:1px solid var(--paper-line-strong);
  transition: transform 0.35s ease;
}
.why-item:hover .icon-tile{ transform:rotate(-6deg) scale(1.05); }
.icon-tile svg{ width:2.1rem; height:2.1rem; }
.why-item h3{ font-size:1.15rem; font-weight:700; font-family:var(--font-body); color:var(--paper-ink); }
.why-item p{ color:var(--paper-ink-dim); font-size:0.92rem; margin-top:6px; max-width:52ch; }

/* ahora suena */
.ahora-sub{ color:var(--ink-dim); margin-top:10px; max-width:52ch; font-size:0.98rem; }
#ahora-suena .np-inline{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,40px); align-items:center;
  background:linear-gradient(160deg, var(--surface-2), var(--surface)); border:1px solid var(--line-strong);
  border-radius:16px; padding:clamp(24px,4vw,36px); box-shadow:0 30px 60px -30px rgba(0,0,0,0.7);
}
.np-inline-art{
  width:120px; height:120px; border-radius:14px; flex-shrink:0;
  background:radial-gradient(circle at 35% 30%, var(--clave-dim), var(--bg-raised) 70%);
  display:flex; align-items:center; justify-content:center; font-size:2.2rem;
}
.np-inline-title{ font-family:var(--font-display); font-size:1.5rem; }
.np-inline-artist{ color:var(--ink-dim); margin-top:2px; }
.np-inline-meta{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.np-inline-updated{ font-size:0.78rem; color:var(--ink-faint); }
.np-inline-fallback{ font-size:0.86rem; color:var(--ink-faint); margin-top:6px; font-style:italic; }
.np-inline-fallback[hidden]{ display:none; }
.recent-heading{ margin-top:clamp(28px,4vw,44px); font-size:0.8rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); }
.recent-list-page{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.recent-list-page li{ font-size:0.9rem; color:var(--ink-dim); border-bottom:1px solid var(--line); padding-bottom:10px; }
.recent-list-page li b{ color:var(--ink); font-weight:600; display:block; }
.recent-empty{ font-size:0.86rem; color:var(--ink-faint); margin-top:16px; }
.recent-empty[hidden]{ display:none; }
@media (max-width:640px){ #ahora-suena .np-inline{ grid-template-columns:1fr; text-align:center; } .np-inline-art{ margin-inline:auto; } .np-inline-meta{ justify-content:center; } }

/* legends strip */
.legends-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.scroller{
  display:flex; gap:22px; overflow-x:auto; padding:10px 4px 16px; margin-top:32px;
  scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color: var(--line-strong) transparent;
}
.legend{ flex:0 0 138px; scroll-snap-align:start; text-align:center; }
.legend-btn{ background:none; border:none; padding:0; cursor:pointer; font:inherit; color:inherit; width:100%; }
.legend-disc{
  width:118px; height:118px; border-radius:50%; margin-inline:auto; position:relative; overflow:hidden;
  border:1px solid var(--line-strong); transition: transform 0.3s ease, box-shadow 0.3s ease;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,0.10), transparent 45%),
    repeating-radial-gradient(circle at 50% 50%, var(--surface) 0 3px, var(--bg-raised) 3px 6px);
  display:flex; align-items:center; justify-content:center;
}
.legend-disc img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.legend-disc span{ font-family:var(--font-display); font-size:1.6rem; color:var(--brass); background:var(--bg); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-strong); position:relative; z-index:1; }
.legend-disc:has(img) span{ display:none; }
.legend:hover .legend-disc, .legend-btn:focus-visible .legend-disc{ transform:scale(1.08) rotate(-4deg); box-shadow:0 10px 30px -10px rgba(200,69,43,0.6); }
.legend p{ margin-top:12px; font-size:0.86rem; font-weight:600; }

.legend-modal{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
.legend-modal[hidden]{ display:none; }
.legend-modal.is-open{ opacity:1; pointer-events:auto; }
.legend-modal-backdrop{ position:absolute; inset:0; background:rgba(10,6,5,0.86); backdrop-filter:blur(12px); }
.legend-modal-panel{
  position:relative; z-index:1; width:100%; max-width:480px; max-height:86vh; overflow-y:auto;
  background:linear-gradient(160deg, var(--surface-2), var(--bg)); border:1px solid var(--line-strong);
  border-radius:16px; padding:clamp(24px,4vw,36px); transform:translateY(16px); transition:transform 0.28s ease;
}
.legend-modal.is-open .legend-modal-panel{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .legend-modal, .legend-modal-panel{ transition:none; } }
.legend-modal-close{
  position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line-strong); background:transparent; color:var(--ink-dim); cursor:pointer;
}
.legend-modal-close:hover{ color:var(--ink); }
.legend-modal-art{
  width:96px; height:96px; border-radius:50%; margin-bottom:18px; overflow:hidden; position:relative;
  background:repeating-radial-gradient(circle at 50% 50%, var(--surface) 0 3px, var(--bg-raised) 3px 6px);
  border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
}
.legend-modal-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.legend-modal-art span{ font-family:var(--font-display); font-size:1.4rem; color:var(--brass); }
.legend-modal-name{ font-size:1.5rem; }
.legend-modal-role{ color:var(--ink-faint); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; margin-top:4px; }
.legend-modal-bio{ color:var(--ink-dim); margin-top:16px; line-height:1.6; }

/* story + director split */
#historia{ position:relative; isolation:isolate; border-radius:16px; overflow:hidden; background:var(--bg-raised); border-bottom:none; padding:clamp(40px,6vw,80px) clamp(28px,6vw,64px) !important; }
.story-scene{ position:absolute; inset:0; z-index:-1; }
.story-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 62%; opacity:0.85; filter:saturate(1.1) contrast(1.05); }
.story-tint{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(21,13,11,0.85) 12%, rgba(21,13,11,0.5) 40%, rgba(21,13,11,0.22) 100%); }
.story{ display:grid; grid-template-columns: 1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.story-copy p{ color:var(--ink-dim); margin-top:16px; max-width:56ch; }
.story-copy p:first-of-type{ margin-top:0; }
blockquote{
  margin:26px 0 0; padding-left:20px; border-left:2px solid var(--clave-bright);
  font-style:italic; font-size:1.1rem; color:var(--ink); max-width:48ch;
}
.medallion{
  position:relative; aspect-ratio:1/1; max-width:300px; margin-inline:auto; overflow:hidden; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.medallion img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.medallion .disc{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,0.08), transparent 46%),
    repeating-radial-gradient(circle at 50% 50%, var(--surface-2) 0 4px, var(--bg-raised) 4px 8px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.7), inset 0 0 0 1px var(--line-strong);
}
@media (prefers-reduced-motion:no-preference){ .medallion .disc{ animation: spin 40s linear infinite; } }
.medallion .center{
  position:relative; width:46%; height:46%; border-radius:50%; background:var(--clave);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  box-shadow:0 0 0 6px var(--bg), 0 0 0 7px var(--line-strong);
}
.medallion .center span{ font-family:var(--font-display); font-size:2.2rem; color:var(--ink); line-height:1; }
.medallion .center small{ font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(246,237,226,0.75); margin-top:4px; }
.director-info{ margin-top:26px; text-align:center; }
.director-role{ font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); }
.director-name{ font-family:var(--font-display); font-size:1.8rem; font-weight:700; margin-top:4px; }
.director-info p.bio{ color:var(--ink-dim); font-size:0.92rem; margin-top:10px; max-width:38ch; margin-inline:auto; }

/* comunidad */
.comunidad-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:clamp(24px,4vw,36px); }
.comunidad-card{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:12px; padding:24px;
  display:flex; flex-direction:column; gap:10px;
}
.comunidad-card .icon-tile{ background:rgba(220,174,82,0.1); border-color:var(--line-strong); width:3.4rem; height:3.4rem; }
.comunidad-card .icon-tile svg{ width:1.7rem; height:1.7rem; }
.comunidad-card h3{ font-size:1.05rem; }
.comunidad-card p{ color:var(--ink-dim); font-size:0.9rem; }
.comunidad-card a.card-link{ margin-top:auto; font-size:0.86rem; font-weight:700; color:var(--brass); text-decoration:none; }
.comunidad-card a.card-link:hover{ text-decoration:underline; }

/* contact */
.contact-shell{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line-strong); background:var(--bg-raised); }
.contact-scene{ position:absolute; inset:0; z-index:0; opacity:0.5; }
.contact{ position:relative; z-index:1; display:grid; grid-template-columns: 0.9fr 1.1fr; gap:clamp(32px,5vw,64px); padding:clamp(28px,5vw,56px); }
.contact-list{ display:flex; flex-direction:column; gap:22px; margin-top:28px; }
.contact-item{ display:flex; gap:14px; align-items:flex-start; }
.contact-item a{ text-decoration:none; }
.contact-item a:hover .contact-value{ color:var(--brass); }
.contact-icon{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--brass);
}
.contact-label{ font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); }
.contact-value{ font-weight:600; margin-top:2px; transition:color 0.2s ease; }
form{ display:flex; flex-direction:column; gap:16px; background:rgba(42,28,25,0.6); backdrop-filter:blur(14px); border:1px solid rgba(246,237,226,0.14); border-radius:12px; padding:24px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); scroll-margin-bottom: calc(var(--sticky-h) + 24px); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:0.76rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-faint); }
.field input, .field textarea{
  background:rgba(21,13,11,0.55); border:1px solid var(--line-strong); border-radius:5px; color:var(--ink);
  font-family:var(--font-body); font-size:0.95rem; padding:12px 14px;
}
.field input:focus, .field textarea:focus{ border-color:var(--brass); }
.field textarea{ resize:vertical; min-height:100px; }
.field input::placeholder, .field textarea::placeholder{ color: var(--ink-faint); }
.field-error{ font-size:0.78rem; color:var(--danger); min-height:1em; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-submit-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.form-status{ font-size:0.86rem; min-height:1.2em; }
.form-status[data-kind="ok"]{ color:var(--ok); }
.form-status[data-kind="error"]{ color:var(--danger); }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }

/* closing cta */
.closing{ position:relative; isolation:isolate; border-radius:16px; overflow:hidden; text-align:left; padding:clamp(40px,6vw,80px) clamp(28px,6vw,64px) !important; background:var(--bg-raised); }
.closing-scene{ position:absolute; inset:0; z-index:-1; opacity:0.45; mix-blend-mode:screen; }
.closing-photo{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:68% 38%; filter:saturate(1.05) contrast(1.05); }
.closing-tint{ position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgba(21,13,11,0.94) 26%, rgba(122,44,28,0.6) 58%, rgba(21,13,11,0.35) 85%); }
.closing h2{ font-size:clamp(2.6rem,7.5vw,5rem); max-width:14ch; }
.closing-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:28px; }
.closing p{ color:var(--ink-dim); max-width:44ch; }

footer{ padding-block:56px 48px; text-align:center; }
.foot-nav{ display:flex; justify-content:center; gap:28px; flex-wrap:wrap; font-size:0.84rem; font-weight:600; }
.foot-nav a{ text-decoration:none; color:var(--ink-dim); }
.foot-nav a:hover{ color:var(--ink); }
.foot-contact{ margin-top:20px; font-size:0.86rem; color:var(--ink-dim); display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
.foot-contact a{ color:var(--ink-dim); text-decoration:none; }
.foot-contact a:hover{ color:var(--ink); }
.foot-social{ display:flex; justify-content:center; gap:14px; margin-top:26px; }
.foot-social a{
  width:2.4rem; height:2.4rem; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); color:var(--ink-dim); transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.foot-social a:hover{ color:var(--ink); border-color:var(--clave-bright); background:rgba(200,69,43,0.14); }
.foot-social svg{ width:1.1rem; height:1.1rem; }
.foot-divider{ height:1px; background:var(--line); margin:32px 0 24px; }
.foot-bottom{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; color:var(--ink-faint); font-size:0.78rem; }

/* ---------- toasts ---------- */
.toast-region{
  position:fixed; left:50%; bottom:calc(var(--sticky-h) + env(safe-area-inset-bottom,0px) + 16px);
  transform:translateX(-50%); z-index:400; display:flex; flex-direction:column; gap:8px; align-items:center;
  width:min(420px,92vw);
}
.toast{
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:8px; padding:12px 16px;
  font-size:0.86rem; box-shadow:0 12px 30px -10px rgba(0,0,0,0.6); display:flex; align-items:center; gap:10px;
}
.toast[data-kind="ok"]{ border-color:var(--ok); }
.toast[data-kind="error"]{ border-color:var(--danger); }

@media (max-width: 860px){
  .hero{ grid-template-columns:1fr; align-items:start; }
  .why, .story, .contact{ grid-template-columns:1fr; }
}