:root {
  --gold: #d8aa69;
  --gold-light: #f4d7a7;
  --text: #fff8ec;
  --muted: rgba(255, 247, 233, .86);
  --meter-light: #f4cc8d;
  --meter-dark: rgba(175, 119, 65, .48);
  --volume-track: rgba(255, 255, 255, .34);
  --volume-fill: #e6bc78;
  --play-bg-top: #765033;
  --play-bg-bottom: #2a1f16;
  --play-ring: #f0cb91;
  --overlay: 0;
  --logo-desktop: 310px;
  --logo-tablet: 270px;
  --logo-mobile: 205px;
  --play-desktop: 160px;
  --play-tablet: 132px;
  --play-mobile: 96px;
  --social-size: 54px;
  --volume-pct: 75%;

  /* Variables activas: las media queries cambian estas sin pisar config.js */
  --logo-current: var(--logo-desktop);
  --play-current: var(--play-desktop);
  --social-current: var(--social-size);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: #9c7650;
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.background,
.background-wash {
  position: fixed;
  inset: 0;
}
.background {
  z-index: -3;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.background-wash {
  z-index: -2;
  pointer-events: none;
  background: rgba(48, 31, 18, var(--overlay));
}

.page-shell {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
}

.center-stage {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  width: min(820px, 62vw);
  max-height: calc(100dvh - 24px);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(16px, 2.6vh, 28px);
}

.brand-block {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(7px, .9vh, 10px);
}
.station-logo {
  display: block;
  width: var(--logo-current);
  max-width: 46vw;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(61, 36, 19, .16));
}
.ministry {
  margin: 0;
  color: var(--gold-light);
  font-size: clamp(21px, 1.75vw, 31px);
  letter-spacing: .30em;
  line-height: 1.14;
  font-weight: 400;
  text-shadow: 0 2px 7px rgba(73, 44, 25, .26);
}
.microline {
  width: min(610px, 84%);
  display: grid;
  grid-template-columns: minmax(64px, 105px) auto minmax(64px, 105px);
  align-items: center;
  gap: 20px;
  color: rgba(255, 248, 235, .92);
}
.microline span,
.phrase-row span {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.microline strong {
  font-size: clamp(12px, .95vw, 16px);
  letter-spacing: .34em;
  font-weight: 400;
  white-space: nowrap;
}

.player {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1vh, 12px);
}
.player-main-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--play-current) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}

.meters {
  height: 116px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.meter-left { justify-content: flex-end; }
.meter-right { justify-content: flex-start; }
.meters i {
  display: block;
  width: 5px;
  min-width: 5px;
  height: var(--h);
  border-radius: 99px;
  transform-origin: center;
  background: linear-gradient(180deg, var(--meter-light), var(--meter-dark));
  opacity: .84;
  box-shadow: 0 0 7px rgba(238, 188, 113, .10);
}
body.is-playing .meters i {
  animation: meterMove .92s ease-in-out var(--delay) infinite alternate;
}

.play-button {
  width: var(--play-current);
  height: var(--play-current);
  border-radius: 50%;
  border: 2px solid var(--play-ring);
  background: radial-gradient(circle at 48% 34%, var(--play-bg-top), var(--play-bg-bottom) 64%, #1a130e);
  color: #fff5e5;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 5px rgba(242, 202, 142, .055),
    0 0 18px rgba(255, 210, 145, .12),
    0 12px 26px rgba(61, 37, 21, .22);
  transition: transform .16s ease, box-shadow .16s ease;
}
.play-button:hover { transform: scale(1.018); }
.play-button:active { transform: scale(.985); }
.play-button.needs-stream { animation: streamPulse .8s ease; }
#playGlyph {
  font-size: 49px;
  line-height: 1;
  display: block;
}
#playGlyph.bi-play-fill {
  transform: translateX(2px);
}
#playGlyph.bi-pause-fill {
  transform: none;
}

.volume-row {
  width: min(410px, 62%);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
}
.speaker-button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.speaker-copy { display: grid; place-items: center; }
.speaker-icon {
  font-size: 24px;
  line-height: 1;
  color: var(--text);
}

input[type="range"] {
  --fill: var(--volume-fill);
  width: 100%;
  height: 4px;
  appearance: none;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(to right, var(--fill) 0 var(--volume-pct), var(--volume-track) var(--volume-pct) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.58);
  background: #fff4df;
  box-shadow: 0 2px 7px rgba(79, 48, 28, .20);
}
input[type="range"]::-moz-range-thumb {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.58);
  background: #fff4df;
}

.phrase-row {
  width: min(610px, 84%);
  display: grid;
  grid-template-columns: minmax(58px, 92px) auto minmax(58px, 92px);
  align-items: center;
  gap: 22px;
}
.phrase-row p {
  margin: 0;
  color: var(--gold-light);
  font-size: clamp(19px, 1.6vw, 27px);
  letter-spacing: .24em;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 7px rgba(73, 44, 25, .22);
}

.socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--social-current);
}
.social-link {
  width: var(--social-current);
  height: var(--social-current);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 233, 196, .68);
  background: rgba(91, 62, 39, .28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: transform .16s ease, background .16s ease;
}
.social-link:hover {
  transform: translateY(-2px);
  background: rgba(91, 62, 39, .42);
}
.social-icon {
  font-size: 90%;
  line-height: 1;
  color: var(--gold-light);
  display: block;
}

@keyframes meterMove {
  from { transform: scaleY(.58); opacity: .58; }
  to { transform: scaleY(1); opacity: .92; }
}
@keyframes streamPulse {
  0%,100% { box-shadow: 0 0 0 5px rgba(242,202,142,.055), 0 0 18px rgba(255,210,145,.12), 0 12px 26px rgba(61,37,21,.22); }
  50% { box-shadow: 0 0 0 11px rgba(242,202,142,.12), 0 0 20px rgba(255,210,145,.18), 0 12px 26px rgba(61,37,21,.22); }
}

/* ==========================================================
   RESPONSIVE
   La composición de escritorio aprobada no se rediseña.
   Solo cambian proporciones para que entre completa en cada viewport.
   ========================================================== */

/* Escritorio amplio / maqueta aprobada */
@media (min-width: 901px) and (min-height: 821px) {
  :root {
    --logo-current: var(--logo-desktop);
    --play-current: var(--play-desktop);
    --social-current: var(--social-size);
  }

  .center-stage {
    width: min(820px, 62vw);
    top: 47%;
    gap: clamp(14px, 2.1vh, 24px);
  }

  .brand-block { transform: translateY(-18px); }
  .volume-row { margin-top: 24px; }
  .phrase-row { margin-top: 8px; }
}

/* Escritorio / notebook 1366x768 y alturas similares */
@media (min-width: 901px) and (max-height: 820px) {
  :root {
    --logo-current: min(var(--logo-desktop), 238px);
    --play-current: min(var(--play-desktop), 118px);
    --social-current: min(var(--social-size), 42px);
  }

  .center-stage {
    width: min(740px, 61vw);
    top: 50%;
    gap: clamp(5px, .9vh, 8px);
    max-height: calc(100dvh - 12px);
  }

  .brand-block { gap: 4px; }
  .station-logo { max-width: 34vw; }
  .ministry {
    font-size: clamp(17px, 1.45vw, 20px);
    letter-spacing: .25em;
  }
  .microline { width: min(560px, 82%); gap: 14px; }
  .microline strong { font-size: 10px; letter-spacing: .27em; }

  .player-main-row { gap: 16px; }
  .meters { height: 82px; gap: 3px; }
  .meters i { width: 4px; min-width: 4px; }

  .volume-row {
    width: min(350px, 56%);
    margin-top: 3px;
  }
  .phrase-row { width: min(560px, 80%); gap: 16px; }
  .phrase-row p {
    font-size: clamp(16px, 1.35vw, 19px);
    letter-spacing: .20em;
  }
  .socials { gap: 30px; }
}

/* Tablet horizontal y vertical */
@media (min-width: 561px) and (max-width: 900px) {
  :root {
    --logo-current: min(var(--logo-tablet), 31vw, 255px);
    --play-current: min(var(--play-tablet), 16vw, 126px);
    --social-current: min(var(--social-size), 5.8vw, 46px);
  }

  .background { background-position: 68% center; }

  .center-stage {
    width: min(720px, calc(100vw - 44px));
    top: 50%;
    max-height: calc(100dvh - 20px);
    gap: clamp(8px, 1.25vh, 13px);
  }

  .brand-block { gap: 5px; }
  .station-logo { max-width: 42vw; }
  .ministry {
    max-width: 92vw;
    font-size: clamp(17px, 2.6vw, 24px);
    letter-spacing: .20em;
  }
  .microline {
    width: min(560px, 88%);
    grid-template-columns: minmax(42px, 78px) auto minmax(42px, 78px);
    gap: 14px;
  }
  .microline strong {
    font-size: clamp(10px, 1.45vw, 12px);
    letter-spacing: .24em;
  }

  .player-main-row {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) var(--play-current) minmax(0, 1fr);
    gap: clamp(10px, 2vw, 18px);
  }
  .play-button {
    width: var(--play-current);
    height: var(--play-current);
  }
  #playGlyph,
  body.is-playing #playGlyph {
    font-size: clamp(34px, 5vw, 42px);
  }
  .meters {
    height: clamp(72px, 10vw, 94px);
    gap: 3px;
  }
  .meters i { width: 4px; min-width: 4px; }

  .volume-row {
    width: min(390px, 66vw);
    grid-template-columns: 32px minmax(0,1fr) 32px;
    gap: 10px;
  }
  .speaker-icon { font-size: 22px; }

  .phrase-row {
    width: min(560px, 88%);
    grid-template-columns: minmax(38px, 72px) auto minmax(38px, 72px);
    gap: 14px;
  }
  .phrase-row p {
    font-size: clamp(16px, 2.6vw, 21px);
    letter-spacing: .16em;
  }
  .socials { gap: 30px; }
}

/* Tablet de poca altura / horizontal */
@media (min-width: 561px) and (max-width: 900px) and (max-height: 720px) {
  :root {
    --logo-current: min(var(--logo-tablet), 190px);
    --play-current: min(var(--play-tablet), 96px);
    --social-current: min(var(--social-size), 38px);
  }

  .center-stage { gap: 5px; }
  .ministry { font-size: 16px; }
  .microline strong { font-size: 9px; }
  .meters { height: 62px; }
  .volume-row { width: min(330px, 62vw); }
  .phrase-row p { font-size: 15px; }
}

/* Celular: adaptación propia, sin escalar toda la página */
@media (max-width: 560px) {
  :root {
    --logo-current: min(var(--logo-mobile), 52vw, 200px);
    --play-current: min(var(--play-mobile), 25vw, 94px);
    --social-current: min(var(--social-size), 11vw, 40px);
  }

  .background { background-position: 69% center; }

  .center-stage {
    width: calc(100vw - 18px);
    top: 50%;
    max-height: calc(100dvh - 12px);
    gap: clamp(6px, .9vh, 9px);
  }

  .brand-block { gap: 4px; }
  .station-logo {
    max-width: 54vw;
  }
  .ministry {
    max-width: calc(100vw - 28px);
    font-size: clamp(13px, 4.0vw, 16px);
    letter-spacing: .11em;
    line-height: 1.22;
  }
  .microline {
    width: 94%;
    grid-template-columns: minmax(18px, 30px) minmax(0,1fr) minmax(18px, 30px);
    gap: 6px;
  }
  .microline strong {
    min-width: 0;
    font-size: clamp(8px, 2.45vw, 10px);
    letter-spacing: .13em;
    white-space: nowrap;
  }

  .player { gap: 7px; }
  .player-main-row {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) var(--play-current) minmax(0, 1fr);
    gap: clamp(5px, 1.6vw, 8px);
  }
  .play-button {
    width: var(--play-current);
    height: var(--play-current);
  }
  #playGlyph,
  body.is-playing #playGlyph {
    font-size: clamp(27px, 8vw, 31px);
  }

  .meters {
    height: clamp(52px, 16vw, 64px);
    gap: clamp(1px, .45vw, 2px);
  }
  .meters i {
    width: clamp(2px, .75vw, 3px);
    min-width: clamp(2px, .75vw, 3px);
  }

  .volume-row {
    width: min(330px, 84vw);
    grid-template-columns: 28px minmax(0,1fr) 28px;
    gap: 7px;
  }
  .speaker-button { width: 28px; height: 28px; }
  .speaker-icon { font-size: 20px; }
  input[type="range"]::-webkit-slider-thumb { width: 17px; height: 17px; }
  input[type="range"]::-moz-range-thumb { width: 17px; height: 17px; }

  .phrase-row {
    width: 96%;
    grid-template-columns: minmax(18px, 28px) minmax(0,1fr) minmax(18px, 28px);
    gap: 6px;
  }
  .phrase-row p {
    min-width: 0;
    font-size: clamp(13px, 3.9vw, 16px);
    letter-spacing: .09em;
    line-height: 1.22;
    white-space: normal;
  }

  .socials {
    gap: 9px;
    min-height: var(--social-current);
    max-width: 100%;
    flex-wrap: nowrap;
  }
}

/* Celulares de poca altura: 360x640 y similares */
@media (max-width: 560px) and (max-height: 700px) {
  :root {
    --logo-current: min(var(--logo-mobile), 150px, 43vw);
    --play-current: min(var(--play-mobile), 78px, 23vw);
    --social-current: min(var(--social-size), 34px, 10vw);
  }

  .center-stage {
    width: calc(100vw - 14px);
    max-height: calc(100dvh - 8px);
    gap: 4px;
  }
  .brand-block { gap: 2px; }
  .ministry { font-size: 12px; line-height: 1.15; }
  .microline strong { font-size: 7.5px; }
  .meters { height: 48px; }
  .volume-row { width: min(300px, 82vw); }
  .phrase-row p { font-size: 12px; }
  .socials { gap: 6px; }
}

/* Celular muy angosto */
@media (max-width: 340px) {
  :root {
    --logo-current: min(var(--logo-mobile), 140px, 44vw);
    --play-current: min(var(--play-mobile), 72px, 23vw);
    --social-current: min(var(--social-size), 32px, 10vw);
  }

  .microline strong { font-size: 7px; letter-spacing: .09em; }
  .phrase-row p { font-size: 11.5px; letter-spacing: .07em; }
  .meters i { width: 2px; min-width: 2px; }
}

/* Landscape bajo: conserva todos los elementos sin solaparlos */
@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --logo-current: min(var(--logo-mobile), 112px);
    --play-current: min(var(--play-mobile), 64px);
    --social-current: min(var(--social-size), 30px);
  }

  .center-stage {
    width: min(620px, calc(100vw - 24px));
    gap: 2px;
  }
  .station-logo { max-width: 24vw; }
  .ministry { font-size: 11px; }
  .microline strong { font-size: 7px; }
  .meters { height: 40px; }
  .volume-row { width: min(280px, 54vw); }
  .phrase-row p { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .meters i { animation: none !important; }
  .play-button, .social-link { transition: none; }
}