:root {
  --bg:#05070c;
  --panel:#0d131e;
  --orange:#ff6900;
  --blue:#00b9ff;
  --green:#20e38c;
  --white:#f7f9ff;
  --muted:#8490a5;
  --line:rgba(255,255,255,.09);
  --shadow:0 25px 70px rgba(0,0,0,.45);
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html {
  scroll-behavior:smooth;
}

body {
  background:
    radial-gradient(circle at 10% 0%,rgba(255,105,0,.10),transparent 28%),
    radial-gradient(circle at 90% 30%,rgba(0,185,255,.09),transparent 30%),
    var(--bg);

  color:var(--white);
  font-family:Inter,sans-serif;
  overflow-x:hidden;
}

a {
  color:inherit;
  text-decoration:none;
}

.background-grid {
  position:fixed;
  inset:0;
  z-index:-10;
  opacity:.12;

  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);

  background-size:50px 50px;
  pointer-events:none;
}

.glow {
  position:fixed;
  width:450px;
  height:450px;
  border-radius:50%;
  filter:blur(130px);
  opacity:.12;
  z-index:-5;
  pointer-events:none;
}

.glow-orange {
  background:var(--orange);
  left:-280px;
  top:15%;
}

.glow-blue {
  background:var(--blue);
  right:-280px;
  bottom:10%;
}


/* =====================================================
   HEADER
===================================================== */

.header {
  position:sticky;
  top:0;
  z-index:999;

  background:rgba(5,7,12,.82);
  backdrop-filter:blur(18px);

  border-bottom:1px solid var(--line);
}

.header-inner {
  width:min(1380px,94%);
  min-height:76px;
  margin:auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.logo {
  display:flex;
  align-items:center;
  gap:12px;
}

.logo-box {
  width:45px;
  height:45px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  background:linear-gradient(135deg,var(--orange),#ff3000);

  font-family:Orbitron,sans-serif;
  font-weight:900;

  box-shadow:0 0 30px rgba(255,105,0,.3);
}

.logo-box span {
  font-size:11px;
  margin-left:2px;
}

.logo-text strong {
  display:block;
  font-family:Orbitron,sans-serif;
  font-size:18px;
}

.logo-text strong b {
  color:var(--orange);
}

.logo-text small {
  display:block;
  color:var(--muted);
  font-size:8px;
  letter-spacing:3px;
}

nav {
  display:flex;
  gap:24px;
}

nav a {
  color:#aeb8ca;
  font-size:11px;
  font-weight:800;
  transition:.25s;
}

nav a:hover {
  color:var(--orange);
}

.header-live {
  font-size:9px;
  font-weight:900;
  letter-spacing:2px;
}

.header-live i,
.live-badge i,
.tv-status i {
  display:inline-block;

  width:7px;
  height:7px;

  margin-right:6px;

  border-radius:50%;

  background:#ff3b30;

  box-shadow:0 0 12px #ff3b30;
}


/* =====================================================
   HERO
===================================================== */

.hero {
  width:min(1380px,94%);
  min-height:710px;
  margin:auto;

  display:grid;
  grid-template-columns:1.05fr .95fr;

  align-items:center;
  gap:40px;
}

.location {
  display:flex;
  align-items:center;
  gap:8px;

  color:var(--orange);

  font-size:9px;
  font-weight:900;
  letter-spacing:3px;

  margin-bottom:22px;
}

.location i {
  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--orange);
  box-shadow:0 0 14px var(--orange);
}

.hero h1 {
  font-family:Orbitron,sans-serif;

  font-size:clamp(60px,10vw,130px);
  line-height:.9;

  letter-spacing:-7px;
}

.hero h1 strong {
  color:var(--orange);
}

.hero h2 {
  margin-top:25px;

  color:var(--blue);

  font-family:Orbitron,sans-serif;

  font-size:clamp(17px,2vw,25px);
  letter-spacing:7px;
}

.hero p {
  max-width:620px;
  margin-top:20px;

  color:var(--muted);

  line-height:1.8;
  font-size:14px;
}

.hero-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}

.btn {
  padding:15px 22px;

  border-radius:9px;

  font-size:10px;
  font-weight:900;
  letter-spacing:1px;

  transition:.25s;
}

.btn.primary {
  background:linear-gradient(135deg,var(--orange),#ff3600);
  box-shadow:0 15px 35px rgba(255,105,0,.18);
}

.btn.primary:hover {
  transform:translateY(-3px);
}

.btn.secondary {
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

.btn.secondary:hover {
  color:var(--blue);
  border-color:var(--blue);
}

.hero-data {
  display:flex;
  gap:35px;
  margin-top:45px;
}

.hero-data>div {
  display:flex;
  flex-direction:column;
  gap:6px;
}

.hero-data small {
  color:#657086;
  font-size:8px;
  font-weight:900;
  letter-spacing:2px;
}

.hero-data strong {
  font-size:11px;
}

.online {
  color:var(--green);
}

.online i {
  display:inline-block;

  width:6px;
  height:6px;

  margin-right:5px;

  border-radius:50%;

  background:var(--green);

  box-shadow:0 0 10px var(--green);
}


/* HERO VISUAL */

.hero-visual {
  position:relative;

  min-height:500px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.record {
  width:min(390px,70vw);
  aspect-ratio:1;

  border-radius:50%;

  background:
    repeating-radial-gradient(
      circle,
      #070a0f 0 6px,
      #171c25 7px 9px
    );

  border:1px solid rgba(255,255,255,.15);

  box-shadow:
    0 0 0 20px rgba(255,255,255,.02),
    0 0 0 45px rgba(255,105,0,.025),
    0 0 100px rgba(255,105,0,.13);

  animation:spin 18s linear infinite;
}

.record-center {
  position:absolute;

  width:115px;
  height:115px;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  display:flex;
  align-items:center;
  justify-content:center;

  gap:3px;

  border-radius:50%;

  background:radial-gradient(circle,#ff781b,#a62b00);

  box-shadow:0 0 45px rgba(255,105,0,.5);

  font-family:Orbitron,sans-serif;
}

.record-center span {
  font-size:32px;
}

.record-center b {
  font-size:18px;
}

.circle {
  position:absolute;
  border:1px solid rgba(0,185,255,.25);
  border-radius:50%;
}

.circle-one {
  width:480px;
  height:270px;
  transform:rotate(25deg);
}

.circle-two {
  width:510px;
  height:330px;
  transform:rotate(-30deg);
  border-color:rgba(255,105,0,.2);
}

.hero-eq {
  position:absolute;
  bottom:25px;

  display:flex;
  align-items:end;
  gap:5px;
}

.hero-eq i {
  width:5px;
  height:25px;

  border-radius:5px;

  background:linear-gradient(to top,var(--orange),var(--blue));

  animation:equalize .7s infinite alternate;
}

.hero-eq i:nth-child(2n) {
  animation-delay:.2s;
}

.hero-eq i:nth-child(3n) {
  animation-delay:.4s;
}

@keyframes spin {
  to { transform:rotate(360deg); }
}

@keyframes equalize {
  from { height:18px; }
  to { height:65px; }
}


/* =====================================================
   GENERAL
===================================================== */

.section {
  width:min(1380px,94%);
  margin:100px auto;
}

.section-title {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:30px;
}

.section-title>div:first-child span,
.social>div:first-child span,
.contact>div:first-child span {
  color:var(--orange);

  font-size:9px;
  font-weight:900;
  letter-spacing:3px;
}

.section-title h2,
.social h2,
.contact h2 {
  margin-top:8px;

  font-family:Orbitron,sans-serif;

  font-size:clamp(27px,4vw,47px);
}

.section-title h2 strong,
.social h2 strong,
.contact h2 strong {
  color:var(--orange);
}


/* =====================================================
   RADIO
===================================================== */

.radio-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:24px;
}

.radio-console {
  padding:24px;

  border-radius:22px;

  background:linear-gradient(
    145deg,
    rgba(20,27,41,.96),
    rgba(6,9,15,.96)
  );

  border:1px solid var(--line);

  box-shadow:var(--shadow);

  overflow:hidden;
}

.console-header {
  display:flex;
  align-items:center;
  gap:14px;
}

.mini-logo {
  width:60px;
  height:60px;

  display:grid;
  place-items:center;

  border-radius:15px;

  background:linear-gradient(135deg,var(--orange),#ff3400);

  font-family:Orbitron,sans-serif;
  font-size:24px;
  font-weight:900;
}

.mini-logo span {
  font-size:11px;
}

.console-header strong,
.console-header small {
  display:block;
}

.console-header strong {
  font-size:13px;
}

.console-header small {
  margin-top:5px;
  color:var(--muted);
  font-size:8px;
  letter-spacing:2px;
}

.console-online {
  margin-left:auto;
  color:var(--green);
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
}


/* =====================================================
   EQUALIZER
===================================================== */

.equalizer {
  height:115px;

  margin-top:20px;
  padding:18px;

  display:flex;
  justify-content:center;
  align-items:end;

  gap:5px;

  background:#030509;

  border-radius:13px;

  border:1px solid rgba(255,255,255,.05);
}

.equalizer i {
  width:5px;
  min-height:10px;
  height:30%;

  border-radius:5px;

  background:linear-gradient(
    to top,
    var(--orange),
    var(--blue)
  );

  animation:eq .8s infinite alternate;
}

.equalizer i:nth-child(2n) {
  animation-delay:.12s;
}

.equalizer i:nth-child(3n) {
  animation-delay:.3s;
}

.equalizer i:nth-child(4n) {
  animation-delay:.5s;
}

@keyframes eq {
  from { height:15%; }
  to { height:90%; }
}


/* =====================================================
   NOW PLAYING
===================================================== */

.now {
  display:flex;
  align-items:center;
  gap:13px;

  margin-top:17px;
  padding:14px;

  border:1px solid var(--line);
  border-radius:12px;
}

.music-icon {
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:9px;

  background:rgba(255,105,0,.12);

  color:var(--orange);

  font-size:21px;
}

.now small,
.now strong {
  display:block;
}

.now small {
  color:var(--muted);

  font-size:8px;
  font-weight:900;
  letter-spacing:2px;
}

.now strong {
  margin-top:5px;
  font-size:12px;
}

.now-live {
  margin-left:auto;

  color:var(--green);

  font-size:9px;
  font-weight:900;
}

.now-live i {
  display:inline-block;

  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--green);

  box-shadow:0 0 10px var(--green);

  margin-right:5px;
}


/* =====================================================
   ZENO 7.1
   OBJETIVO:
   - OCULTAR CABECERA
   - OCULTAR APPLE / APP STORE
   - OCULTAR GOOGLE PLAY
   - DEJAR VISIBLE EL PLAY REAL
===================================================== */

.arena-player {
  position:relative;

  height:125px;

  margin-top:18px;

  overflow:hidden;

  border-radius:16px;

  background:
    radial-gradient(
      circle at center,
      rgba(255,105,0,.16),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      #090d15,
      #020407
    );

  border:1px solid rgba(255,105,0,.22);

  box-shadow:
    inset 0 0 40px rgba(0,0,0,.75),
    0 10px 35px rgba(0,0,0,.3);
}


/* brillo */

.player-glow {
  position:absolute;

  width:180px;
  height:180px;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  border-radius:50%;

  background:rgba(255,105,0,.12);

  filter:blur(55px);

  pointer-events:none;
}


/* etiqueta propia */

.player-title {
  position:absolute;

  z-index:20;

  left:15px;
  top:11px;

  color:#8994a8;

  font-size:8px;

  font-weight:900;

  letter-spacing:2px;

  pointer-events:none;
}

.player-title i {
  display:inline-block;

  width:6px;
  height:6px;

  margin-right:6px;

  border-radius:50%;

  background:#ff3b30;

  box-shadow:0 0 10px #ff3b30;
}


/*
   VENTANA DEL ZENO

   Antes:
   translateY(+58px)

   Ahora:
   translateY(-72px)

   Esto mueve hacia arriba el reproductor original
   para que la zona central del botón PLAY quede
   dentro de nuestra ventana.
*/

.zeno-window {
  position:absolute;

  width:575px;
  height:250px;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%)
    translateY(-72px);

  overflow:hidden;

  z-index:5;
}

.zeno-window iframe {
  display:block;

  width:575px;
  height:250px;

  border:0;
}


/*
   CORTINA SUPERIOR

   Tapa cualquier texto/logotipo de la parte superior.
*/

.zeno-cover-top {
  position:absolute;

  left:0;
  right:0;

  top:0;

  height:32px;

  z-index:15;

  background:
    linear-gradient(
      180deg,
      #090d15 0%,
      #090d15 70%,
      rgba(9,13,21,0) 100%
    );

  pointer-events:none;
}


/*
   CORTINA INFERIOR

   Tapa completamente la zona donde aparecen
   Apple / App Store / Google Play y enlaces.
*/

.zeno-cover-bottom {
  position:absolute;

  left:0;
  right:0;

  bottom:0;

  height:52px;

  z-index:15;

  background:
    linear-gradient(
      0deg,
      #05080d 0%,
      #05080d 72%,
      rgba(5,8,13,0) 100%
    );

  pointer-events:none;
}


/*
   BRILLO SOBRE LA ZONA DEL PLAY

   No bloquea el clic.
*/

.arena-player::after {
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:105px;
  height:105px;

  transform:translate(-50%,-50%);

  border-radius:50%;

  border:1px solid rgba(255,105,0,.16);

  box-shadow:
    0 0 35px rgba(255,105,0,.10);

  pointer-events:none;

  z-index:10;
}


/* =====================================================
   RADIO FOOTER
===================================================== */

.radio-bottom {
  display:flex;

  justify-content:space-between;

  gap:15px;

  margin-top:13px;

  color:#748095;

  font-size:8px;

  letter-spacing:1px;
}

.radio-bottom strong {
  color:var(--blue);
}


/* =====================================================
   RADIO SIDE
===================================================== */

.radio-info {
  display:flex;
  flex-direction:column;
  gap:18px;
}

.info-card {
  padding:25px;

  border-radius:18px;

  background:linear-gradient(
    145deg,
    rgba(18,25,38,.95),
    rgba(7,10,16,.95)
  );

  border:1px solid var(--line);

  box-shadow:var(--shadow);
}

.info-card.big {
  min-height:245px;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255,105,0,.20),
      transparent 50%
    ),
    linear-gradient(
      145deg,
      #151d2c,
      #070a10
    );
}

.info-card>span {
  color:var(--orange);

  font-size:8px;
  font-weight:900;
  letter-spacing:2px;
}

.info-card h3 {
  margin-top:35px;

  font-family:Orbitron,sans-serif;
  font-size:23px;
  line-height:1.4;
}

.info-card h3 strong {
  display:block;
  color:var(--orange);
}

.info-card p {
  margin-top:13px;

  color:var(--muted);

  font-size:11px;
  line-height:1.7;
}

.mini-show {
  display:flex;
  gap:14px;

  padding:15px 0;

  border-bottom:1px solid var(--line);
}

.mini-show:last-child {
  border-bottom:0;
}

.mini-show>b {
  color:var(--blue);

  font-family:Orbitron,sans-serif;
  font-size:10px;
}

.mini-show strong,
.mini-show small {
  display:block;
}

.mini-show strong {
  font-size:11px;
}

.mini-show small {
  margin-top:4px;
  color:var(--muted);
  font-size:9px;
}


/* =====================================================
   TV
===================================================== */

.tv-box {
  padding:12px;

  border-radius:22px;

  background:linear-gradient(
    145deg,
    #121a27,
    #06090e
  );

  border:1px solid var(--line);

  box-shadow:var(--shadow);
}

.tv-top {
  min-height:58px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 14px;
}

.tv-logo {
  font-family:Orbitron,sans-serif;
  font-weight:900;
}

.tv-logo strong {
  color:var(--orange);
  font-size:23px;
}

.tv-logo small {
  color:var(--blue);
}

.tv-top>span {
  color:var(--green);

  font-size:8px;
  font-weight:900;
}

.video {
  position:relative;

  width:100%;
  aspect-ratio:16/9;

  overflow:hidden;

  border-radius:15px;

  background:#000;
}

.video iframe {
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  border:0;
}

.tv-bottom {
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:15px;

  color:var(--muted);

  font-size:9px;
}

.tv-bottom a {
  color:var(--orange);
  font-weight:900;
}


/* =====================================================
   NOTICIAS
===================================================== */

.news-grid {
  display:grid;

  grid-template-columns:1.05fr .95fr;

  gap:24px;
}

.featured-news {
  overflow:hidden;

  border-radius:20px;

  background:var(--panel);

  border:1px solid var(--line);

  box-shadow:var(--shadow);
}

.news-cover {
  height:285px;

  display:flex;
  align-items:end;

  padding:25px;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.9),
      transparent
    ),
    radial-gradient(
      circle at 30% 25%,
      rgba(255,105,0,.35),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #162237,
      #05070b
    );
}

.news-cover span,
.news-cover strong {
  display:block;
  font-family:Orbitron,sans-serif;
}

.news-cover span {
  color:var(--blue);
  font-size:10px;
  letter-spacing:4px;
}

.news-cover strong {
  margin-top:5px;
  font-size:35px;
}

.featured-content {
  padding:25px;
}

.featured-content small,
.news-card small {
  color:var(--orange);

  font-size:8px;
  font-weight:900;
  letter-spacing:2px;
}

.featured-content h3 {
  margin-top:11px;

  font-size:24px;
  line-height:1.35;
}

.featured-content p {
  margin-top:12px;

  color:var(--muted);

  font-size:11px;
  line-height:1.7;
}

.featured-content a,
.news-card a {
  display:inline-block;

  margin-top:16px;

  color:var(--blue);

  font-size:9px;
  font-weight:900;
}

.news-list {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.news-card {
  display:grid;

  grid-template-columns:48px 1fr;

  gap:15px;

  padding:20px;

  border-radius:15px;

  background:rgba(255,255,255,.025);

  border:1px solid var(--line);
}

.number {
  color:rgba(255,255,255,.16);

  font-family:Orbitron,sans-serif;

  font-size:22px;
  font-weight:900;
}

.news-card h3 {
  margin-top:7px;
  font-size:14px;
  line-height:1.4;
}

.news-card p {
  margin-top:7px;

  color:var(--muted);

  font-size:10px;
}

.news-banner {
  display:flex;
  gap:15px;
  align-items:center;

  margin-top:18px;
  padding:16px 20px;

  border-left:3px solid var(--orange);

  background:rgba(255,105,0,.05);
}

.news-banner strong {
  color:var(--orange);

  font-size:9px;
  letter-spacing:2px;
}

.news-banner span {
  color:var(--muted);
  font-size:10px;
}


/* =====================================================
   PROGRAMACIÓN
===================================================== */

.program-grid {
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:15px;
}

.program {
  min-height:245px;

  padding:25px;

  border-radius:18px;

  background:linear-gradient(
    145deg,
    rgba(18,25,38,.94),
    rgba(7,10,16,.94)
  );

  border:1px solid var(--line);

  transition:.25s;
}

.program:hover {
  transform:translateY(-5px);

  border-color:rgba(255,105,0,.4);
}

.program-icon {
  font-size:29px;
  margin-bottom:32px;
}

.program>span {
  color:var(--orange);

  font-size:8px;
  font-weight:900;
  letter-spacing:2px;
}

.program h3 {
  margin-top:8px;

  font-family:Orbitron,sans-serif;
  font-size:21px;
}

.program p {
  margin-top:12px;

  color:var(--muted);

  font-size:10px;
  line-height:1.7;
}


/* =====================================================
   SOCIAL
===================================================== */

.social {
  width:min(1380px,94%);

  margin:100px auto;

  padding:45px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:30px;

  border-radius:22px;

  border:1px solid var(--line);

  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(0,185,255,.08),
      transparent 35%
    ),
    rgba(10,14,22,.8);
}

.social p,
.contact p {
  margin-top:10px;

  color:var(--muted);

  font-size:11px;
}

.social-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.social-buttons a {
  padding:14px 18px;

  border-radius:9px;

  border:1px solid var(--line);

  font-size:9px;
  font-weight:900;
  letter-spacing:1px;

  transition:.25s;
}

.social-buttons a:hover {
  color:var(--orange);
  border-color:var(--orange);
}


/* =====================================================
   CONTACTO
===================================================== */

.contact {
  padding:42px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:30px;

  border-radius:22px;

  background:linear-gradient(
    145deg,
    rgba(18,25,38,.95),
    rgba(7,10,16,.95)
  );

  border:1px solid var(--line);

  box-shadow:var(--shadow);
}

.contact-buttons {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.contact-buttons a {
  padding:14px 18px;

  border-radius:9px;

  border:1px solid var(--line);

  color:var(--blue);

  font-size:9px;
  font-weight:900;
}

.contact-buttons a:hover {
  color:var(--orange);
  border-color:var(--orange);
}


/* =====================================================
   FOOTER
===================================================== */

footer {
  min-height:120px;

  padding:30px 4%;

  display:grid;

  grid-template-columns:1fr 1fr 1fr;

  align-items:center;

  gap:20px;

  border-top:1px solid var(--line);

  color:var(--muted);

  font-size:8px;

  letter-spacing:1px;
}

.footer-logo {
  color:var(--white);

  font-family:Orbitron,sans-serif;

  font-size:16px;
  font-weight:900;
}

.footer-logo strong {
  color:var(--orange);
}

.footer-logo small {
  display:block;

  color:var(--muted);

  font-family:Inter,sans-serif;

  font-size:7px;

  letter-spacing:3px;
}

footer>div:nth-child(2) {
  text-align:center;
}

footer>div:nth-child(3) {
  text-align:right;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1050px) {

  nav {
    display:none;
  }

  .hero {
    grid-template-columns:1fr;
    padding:70px 0;
  }

  .hero-visual {
    min-height:430px;
  }

  .radio-layout,
  .news-grid {
    grid-template-columns:1fr;
  }

  .radio-info {
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .program-grid {
    grid-template-columns:repeat(2,1fr);
  }
}


@media(max-width:700px) {

  .header-live {
    display:none;
  }

  .hero {
    min-height:auto;
    padding:60px 0;
  }

  .hero h1 {
    letter-spacing:-4px;
  }

  .hero-visual {
    min-height:350px;
  }

  .record {
    width:280px;
  }

  .circle-one {
    width:340px;
    height:200px;
  }

  .circle-two {
    width:360px;
    height:230px;
  }

  .section {
    margin:75px auto;
  }

  .radio-info,
  .program-grid {
    grid-template-columns:1fr;
  }

  .section-title {
    align-items:flex-start;
    flex-direction:column;
  }

  .social,
  .contact {
    flex-direction:column;
    align-items:flex-start;
    padding:28px;
  }

  .tv-bottom {
    flex-direction:column;
    align-items:flex-start;
  }

  footer {
    grid-template-columns:1fr;
    text-align:center;
  }

  footer>div:nth-child(2),
  footer>div:nth-child(3) {
    text-align:center;
  }
}


@media(max-width:480px) {

  .logo-text {
    display:none;
  }

  .hero-buttons {
    flex-direction:column;
  }

  .btn {
    text-align:center;
  }

  .hero-data {
    gap:20px;
  }

  .console-header {
    flex-wrap:wrap;
  }

  .console-online {
    width:100%;
    margin-left:0;
  }

  .now {
    flex-wrap:wrap;
  }

  .now-live {
    width:100%;
    margin-left:0;
  }

  .arena-player {
    height:120px;
  }

  .radio-bottom {
    flex-direction:column;
  }

  .news-banner {
    flex-direction:column;
    align-items:flex-start;
  }

  /*
     En teléfonos mantenemos la misma zona del PLAY,
     pero centramos el widget.
  */

  .zeno-window {
    transform:
      translate(-50%,-50%)
      translateY(-72px)
      scale(.82);

    transform-origin:center center;
  }

}