:root {
  --accent: #cf3b8e;
  --accent-light: #f26db3;
  --accent-dark: #8f1858;
  --panel: rgba(18, 13, 19, .78);
  --panel-border: rgba(255,255,255,.20);
  --text: #ffffff;
  --muted: rgba(255,255,255,.78);
  --meter-a: #ff2f9a;
  --meter-b: #cf3b8e;
  --meter-c: #ff82c4;
  --volume-line: #d63b91;
  --play-ring: #ea439e;
  --play-inner: #0c090d;
  --wave-dark: #8a1454;
  --wave-light: #d73d91;
  --background-overlay: .18;

  --logo-size-desktop: clamp(220px, 19vw, 290px);
  --logo-size-mobile: clamp(170px, 50vw, 220px);
  --play-size: clamp(86px, 7.6vw, 110px);
  --social-icon-size: 34px;
  --reaction-icon-size: 38px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: #0b0710;
  color: var(--text);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}
button, input { font: inherit; }

.page-background,
.page-overlay {
  position: fixed;
  inset: 0;
}
.page-background {
  z-index: -3;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.page-overlay {
  z-index: -2;
  background:
    radial-gradient(circle at 54% 34%, rgba(204,57,143,.12), transparent 38%),
    linear-gradient(rgba(7,4,9,var(--background-overlay)), rgba(7,4,9,var(--background-overlay)));
}

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

/* ============================
   REDES + APP - UN SOLO RECUADRO
   SOLO SE MODIFICA ESTE BLOQUE
   ============================ */
.left-rail {
  position: absolute;
  z-index: 4;
  left: clamp(22px, 3vw, 46px);
  top: 50%;
  transform: translateY(-48%);
  width: clamp(190px, 16vw, 235px);

  /* Un único panel exterior */
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: rgba(12, 10, 14, .72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
}

.social-list {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.social-link {
  min-height: 58px;
  display: grid;
  grid-template-columns: var(--social-icon-size) 1fr 16px;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  color: #fff;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.social-link:hover { background: rgba(255,255,255,.05); }

.social-icon {
  width: var(--social-icon-size);
  height: var(--social-icon-size);
  display: grid;
  place-items: center;
}

.social-icon svg,
.social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.social-name {
  font-size: 15px;
  font-weight: 600;
  min-width: 0;
}

.social-arrow {
  font-size: 23px;
  color: rgba(255,255,255,.70);
  text-align: right;
}

/* NOESPLAY queda como la última celda DEL MISMO PANEL */
.app-card {
  width: 100%;
  min-height: 92px;
  margin: 0;
  padding: 10px 13px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: rgba(255,255,255,.018);
  box-shadow: none;
  text-decoration: none;
}

.app-card:hover { background: rgba(255,255,255,.045); }

.app-card img {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 8px;
}

/* ============================
   BLOQUE CENTRAL - centro real
   ============================ */
.center-stage {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -49%);
  width: min(860px, 62vw);
  display: grid;
  justify-items: center;
  gap: 14px;
}
.brand-block {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}
.logo-wrap {
  width: var(--logo-size-desktop);
  height: var(--logo-size-desktop);
  display: grid;
  place-items: center;
}
.station-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,.34));
  animation: logoBreath 7s ease-in-out infinite;
}
@keyframes logoBreath {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.012); }
}
.station-tagline {
  margin: -2px 0 0;
  color: rgba(255,255,255,.94);
  font-size: clamp(11px, .92vw, 14px);
  letter-spacing: .075em;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0,0,0,.45);
}

/* ============================
   REPRODUCTOR
   ============================ */
.player-card {
  width: 100%;
  min-height: 278px;
  padding: 20px 28px 18px;
  border: 1px solid var(--panel-border);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(28,23,30,.82), rgba(16,13,19,.88));
  box-shadow: 0 24px 48px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}
.player-head {
  display: grid;
  grid-template-columns: 145px 1fr 145px;
  align-items: center;
}
.live-pill {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 6px 11px;
  color: var(--accent-light);
  font-size: 12px;
  font-weight: 700;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(214,59,145,.58);
}
.station-copy {
  grid-column: 2;
  text-align: center;
}
.station-copy h1 {
  margin: 0;
  font-size: clamp(22px, 1.9vw, 29px);
  font-weight: 600;
}
.station-copy p {
  margin: 5px 0 0;
  color: var(--accent-light);
  font-size: clamp(14px, 1.15vw, 17px);
}
.player-main-row {
  display: grid;
  grid-template-columns: 1fr var(--play-size) 1fr;
  align-items: center;
  gap: 24px;
}
.meter {
  height: 96px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.meter-left { justify-content: flex-end; }
.meter-right { justify-content: flex-start; }
.meter span {
  width: 4px;
  min-width: 4px;
  border-radius: 3px;
  transform-origin: center;
  background: linear-gradient(180deg,var(--meter-c),var(--meter-a) 48%,var(--meter-b));
  box-shadow: 0 0 8px rgba(255,47,154,.20);
  animation: vu 1.25s ease-in-out infinite alternate;
}
@keyframes vu {
  from { transform: scaleY(.60); opacity: .68; }
  to { transform: scaleY(1); opacity: 1; }
}
body.is-paused .meter span { animation-play-state: paused; opacity: .65; }
.play-button {
  width: var(--play-size);
  height: var(--play-size);
  border-radius: 50%;
  border: 4px solid var(--play-ring);
  background: var(--play-inner);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 0 0 6px rgba(228,58,150,.10), 0 12px 28px rgba(0,0,0,.30);
}
.play-button svg { width: 40%; height: 40%; fill: currentColor; }
.volume-row {
  width: 84%;
  justify-self: center;
  display: grid;
  grid-template-columns: 36px 1fr 50px 34px;
  align-items: center;
  gap: 10px;
}
.mute-button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.mute-button svg { width: 22px; height: 22px; fill: currentColor; }
.volume-row input[type="range"] { width: 100%; accent-color: var(--volume-line); }
#volumeValue { font-size: 13px; color: rgba(255,255,255,.86); }
.speaker-copy { font-size: 18px; color: rgba(255,255,255,.90); }

/* ============================
   REACCIONES
   ============================ */
.reaction-card {
  width: 78%;
  min-height: 110px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 26px;
  background: rgba(12,10,14,.82);
  box-shadow: 0 16px 34px rgba(0,0,0,.23);
  backdrop-filter: blur(7px);
  padding: 13px 18px;
  display: grid;
  align-items: center;
}
.reaction-list {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  align-items: center;
}
.reaction-button {
  border: 0;
  border-left: 1px solid rgba(255,255,255,.10);
  background: transparent;
  color: #fff;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 5px 8px;
  cursor: pointer;
}
.reaction-button:first-child { border-left: 0; }
.reaction-emoji {
  font-size: var(--reaction-icon-size);
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.30));
  transition: transform .15s ease;
}
.reaction-button:hover .reaction-emoji { transform: translateY(-2px) scale(1.08); }
.reaction-count { font-size: 14px; color: rgba(255,255,255,.90); }
.reaction-float-layer { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.float-reaction { position: fixed; font-size: 31px; animation: floatReaction 1.7s ease-out forwards; }
@keyframes floatReaction {
  0% { opacity:0; transform:translateY(0) scale(.7); }
  15% { opacity:1; }
  100% { opacity:0; transform:translateY(-80px) scale(1.1); }
}

.bottom-wave {
  position: absolute;
  z-index: 2;
  left: -4%;
  right: -4%;
  bottom: -58px;
  height: 110px;
  background: linear-gradient(180deg,var(--wave-light),var(--wave-dark));
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  box-shadow: inset 0 9px 0 rgba(255,255,255,.08);
}

/* ============================
   NOTEBOOKS / PC BAJO
   ============================ */
@media (min-width: 981px) and (max-height: 720px) {
  :root {
    --logo-size-desktop: clamp(178px, 15vw, 210px);
    --play-size: 84px;
    --reaction-icon-size: 31px;
  }
  .center-stage { gap: 9px; transform: translate(-50%, -50%); }
  .station-tagline { font-size: 10px; }
  .player-card { min-height: 225px; padding: 14px 23px 13px; border-radius: 27px; gap: 8px; }
  .player-head { grid-template-columns: 120px 1fr 120px; }
  .station-copy h1 { font-size: 21px; }
  .station-copy p { font-size: 13px; }
  .meter { height: 72px; }
  .volume-row { width: 82%; }
  .reaction-card { min-height: 82px; padding: 8px 14px; }
  .left-rail { width: 185px; }
  .social-link { min-height: 47px; padding: 7px 10px; }
  .social-name { font-size: 12px; }
  .bottom-wave { bottom: -68px; }
}

/* ============================
   TABLET
   ============================ */
@media (max-width: 980px) {
  body { overflow: auto; }
  .viewport-shell {
    width: 100%;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    padding: 18px 16px 34px;
    display: grid;
    justify-items: center;
    gap: 16px;
  }
  .center-stage {
    position: static;
    transform: none;
    width: min(100%, 760px);
    grid-row: 1;
  }
  .left-rail {
    position: static;
    transform: none;
    width: min(100%, 360px);
    grid-row: 2;
    display: block;
  }
  .social-list { display: block; }
  .social-link { min-height: 52px; }
  .app-card { min-height: 88px; }
  .app-card img { max-width: 205px; }
  .bottom-wave { position: fixed; height: 82px; bottom: -55px; }
}

/* ============================
   CELULAR
   ============================ */
@media (max-width: 620px) {
  :root {
    --logo-size-desktop: var(--logo-size-mobile);
    --play-size: 84px;
    --social-icon-size: 29px;
    --reaction-icon-size: 28px;
  }
  .viewport-shell { padding: 12px 10px 30px; }
  .center-stage { gap: 10px; }
  .station-tagline { font-size: 9px; letter-spacing: .045em; }
  .player-card {
    min-height: 0;
    padding: 15px 13px 14px;
    border-radius: 24px;
  }
  .player-head {
    grid-template-columns: 1fr;
    gap: 6px;
    justify-items: center;
  }
  .live-pill { justify-self: center; }
  .station-copy { grid-column: 1; }
  .station-copy h1 { font-size: 20px; }
  .station-copy p { font-size: 13px; }
  .head-spacer { display: none; }
  .player-main-row {
    grid-template-columns: 1fr var(--play-size) 1fr;
    gap: 8px;
  }
  .meter { height: 62px; gap: 2px; }
  .meter span { width: 3px; min-width: 3px; }
  .volume-row {
    width: 100%;
    grid-template-columns: 32px 1fr 42px;
    gap: 7px;
  }
  .speaker-copy { display: none; }
  .reaction-card { width: 100%; min-height: 0; padding: 10px 7px; border-radius: 22px; }
  .reaction-button { padding: 3px; }
  .reaction-count { font-size: 11px; }
  .left-rail {
    width: min(100%, 330px);
    display: block;
  }
  .social-list { display: block; }
  .social-link {
    min-height: 48px;
    grid-template-columns: var(--social-icon-size) 1fr 14px;
    gap: 8px;
    padding: 7px 9px;
  }
  .social-arrow { display: block; font-size: 19px; }
  .social-name { font-size: 12px; }
  .app-card { min-height: 82px; padding: 9px 11px; }
  .app-card img { max-width: 205px; margin: 0 auto; }
}

@media (max-width: 420px) {
  .social-list { display: block; }
  .reaction-emoji { font-size: 25px; }
  .reaction-count { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .station-logo,
  .meter span,
  .float-reaction { animation: none !important; }
}