@import url("https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap");
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#03070d}
body{font-family:Inter,system-ui,"Segoe UI",Arial,sans-serif;color:#fff;overflow:hidden}

.radio-shell{
  position:relative;width:100%;height:100dvh;overflow:hidden;isolation:isolate;
  background-image:linear-gradient(180deg,rgba(0,0,0,.07),rgba(0,0,0,.16)),var(--bg-desktop);
  background-position:center;background-size:cover;background-repeat:no-repeat
}
.radio-shell::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,transparent 0 48%,rgba(0,0,0,.22) 100%)
}
.skip-link{
  position:fixed;z-index:99;left:10px;top:10px;transform:translateY(-160%);
  background:#fff;color:#000;padding:9px 12px;border-radius:8px;font-weight:800
}
.skip-link:focus{transform:none}

.identity{
  position:absolute;left:4.2vw;top:8.2vh;width:205px;z-index:2;perspective:900px
}
.logo-orbit{
  width:205px;aspect-ratio:1;border-radius:50%;padding:9px;
  background:radial-gradient(circle,#0b111b 60%,#1a2535 100%);
  border:2px solid rgba(255,255,255,.82);
  box-shadow:0 0 0 6px var(--primary),0 0 28px color-mix(in srgb,var(--primary) 48%,transparent);
  animation:logoAlive 6s ease-in-out infinite;transform-style:preserve-3d;cursor:help
}
.logo-orbit img{
  width:100%;height:100%;object-fit:contain;border-radius:50%;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.48));
  animation:logoPulse 3s ease-in-out infinite alternate
}

.station-title{
  position:absolute;z-index:2;left:50%;top:9.4vh;transform:translateX(-50%);
  width:min(760px,68vw);text-align:center;pointer-events:none;
  text-shadow:0 4px 16px rgba(0,0,0,.78)
}
.station-title h1{
  margin:0;font-size:clamp(30px,3.55vw,56px);line-height:.98;
  font-family:"Merienda","Segoe Print","Comic Sans MS","Trebuchet MS",cursive;
  font-weight:700;letter-spacing:.01em
}
.station-title p{
  margin:7px 0 0;color:#e6f0ff;font-size:clamp(18px,1.8vw,26px);
  font-weight:900;letter-spacing:.06em
}

.player-card{
  position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);z-index:2;
  width:min(540px,58vw);min-height:158px;padding:14px 24px 12px;
  display:grid;grid-template-columns:1fr 90px 1fr;grid-template-rows:1fr auto;
  align-items:center;gap:12px;border-radius:25px;
  background:linear-gradient(180deg,rgba(6,10,17,.73),rgba(2,5,10,.84));
  border:1px solid rgba(255,255,255,.17);
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 20px 42px rgba(0,0,0,.34);
  backdrop-filter:blur(9px);animation:panelIn .6s ease both
}
.player-card::after{
  content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);
  transform:skewX(-18deg);animation:sweep 5s 1.2s infinite;pointer-events:none
}
.play-btn{z-index:2;width:90px;height:90px;border:0;background:none;padding:0;cursor:pointer}
.play-core{
  width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 42% 33%,#2d3541,#101620 47%,#03060a 70%);
  border:2px solid var(--primary);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--primary) 10%,transparent),
             0 0 27px color-mix(in srgb,var(--primary) 36%,transparent),
             0 13px 28px rgba(0,0,0,.5);
  position:relative;overflow:hidden
}
.play-core::before{
  content:"";position:absolute;inset:-20%;
  background:conic-gradient(transparent 0 30%,rgba(255,255,255,.28) 36%,transparent 43% 76%,var(--accent) 85%,transparent 92%);
  animation:spin 5s linear infinite
}
.play-triangle{
  position:relative;z-index:2;width:0;height:0;
  border-top:17px solid transparent;border-bottom:17px solid transparent;border-left:27px solid #fff;
  margin-left:6px;filter:drop-shadow(0 3px 5px #000)
}
.play-btn.playing .play-triangle{width:26px;height:26px;border:0;background:#fff;border-radius:5px;margin:0}

.vu{height:70px;display:flex;align-items:center;justify-content:center;gap:4px}
.vu::before{
  content:"";display:block;width:100%;height:100%;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb, white 20%, var(--primary) 80%) 0 6px,
    color-mix(in srgb, white 4%, var(--primary) 96%) 6px 9px,
    transparent 9px 12px);
  clip-path:polygon(0 68%,5% 54%,10% 78%,15% 34%,20% 62%,25% 22%,30% 48%,35% 14%,40% 37%,45% 54%,50% 18%,55% 44%,60% 24%,65% 59%,70% 33%,75% 69%,80% 41%,85% 74%,90% 51%,95% 78%,100% 64%,100% 100%,0 100%);
  filter:drop-shadow(0 0 9px color-mix(in srgb,var(--primary) 52%,transparent));
  transform-origin:center bottom;
  animation:vuMorph 1.45s ease-in-out infinite alternate,vuGlow .9s ease-in-out infinite alternate
}
.vu.left{transform:scaleX(-1)}

.volume-line{
  grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;
  width:min(366px,84%);justify-self:center;z-index:2
}
.volume-line button{border:0;background:none;color:#fff;font-size:20px;cursor:pointer}
.volume-line input{width:100%;accent-color:color-mix(in srgb,var(--primary) 76%, var(--accent) 24%)}
.volume-line output{font-size:12px}

.social-dock{
  position:absolute;right:3vw;top:48%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  min-width:126px;padding:10px 10px 8px;
  background:rgba(3,7,13,.13);backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,var(--primary) 72%,rgba(255,255,255,.4));
  border-radius:19px;
  box-shadow:0 12px 28px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.025)
}
.social-caption{
  width:100%;display:grid;justify-items:center;gap:5px;padding-bottom:3px
}
.social-caption h2{
  margin:0;font-size:10px;letter-spacing:.18em;font-weight:900;color:#f3f6fa
}
.social-caption span{
  width:34px;height:1px;background:var(--primary);
  box-shadow:0 0 7px color-mix(in srgb,var(--primary) 55%,transparent)
}
.social-dock nav{display:flex;flex-direction:column;gap:6px}

.social-3d,.preview-social{
  --i:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  text-decoration:none;color:#fff;
  background:linear-gradient(145deg,#384557,#18202c 44%,#05080d 78%);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 4px 4px 8px rgba(255,255,255,.12),
             inset -5px -6px 10px rgba(0,0,0,.7),
             0 8px 15px rgba(0,0,0,.45);
  animation:socialFloat 2.8s calc(var(--i)*.18s) ease-in-out infinite alternate;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.social-3d:hover{
  transform:translateY(-6px) rotateY(18deg) scale(1.08);
  border-color:var(--primary);
  box-shadow:0 13px 22px rgba(0,0,0,.55),0 0 16px color-mix(in srgb,var(--primary) 38%,transparent)
}
.social-3d img,.preview-social img{
  width:78%;height:78%;object-fit:contain;display:block;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.46))
}

.app-link{
  display:block;border-top:1px solid rgba(255,255,255,.15);padding-top:5px;
  position:relative;overflow:hidden;animation:appFloat 3s ease-in-out infinite alternate
}
.app-link::after{
  content:"";position:absolute;top:5px;bottom:0;left:-50%;width:35%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:sweepSmall 4.6s 1s infinite;pointer-events:none
}
.app-link img,.preview-app{display:block;width:132px;max-width:31vw;height:auto;border-radius:9px}

.ownership{
  position:absolute;z-index:2;left:50%;bottom:8px;transform:translateX(-50%);
  font-size:10px;color:rgba(255,255,255,.68);letter-spacing:.04em;text-shadow:0 2px 5px #000;
  white-space:nowrap
}

.suspended{
  min-height:100dvh;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle,#16253b,#070b12);color:#fff;padding:20px
}
.suspended div{padding:30px;border:1px solid #324862;border-radius:18px;background:#0c1420}

.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;
  white-space:nowrap!important;border:0!important
}

.play-btn:focus-visible,.social-3d:focus-visible,.app-link:focus-visible,
.logo-orbit:focus-visible,.player-card:focus-visible,input:focus-visible,button:focus-visible{
  outline:3px solid #78c6ff;outline-offset:4px
}

@keyframes logoAlive{
  0%,100%{transform:rotateX(0) rotateY(0) scale(1)}
  25%{transform:rotateX(6deg) rotateY(-11deg) scale(1.035)}
  50%{transform:translateZ(25px) scale(1.08)}
  75%{transform:rotateX(-5deg) rotateY(10deg) scale(1.035)}
}
@keyframes logoPulse{to{transform:translateZ(30px) scale(1.035)}}
@keyframes panelIn{from{opacity:0;transform:translate(-50%,calc(-50% + 14px)) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes sweep{0%,60%{left:-40%;opacity:0}70%{opacity:1}90%{left:115%;opacity:.8}100%{left:115%;opacity:0}}
@keyframes sweepSmall{0%,60%{left:-50%;opacity:0}70%{opacity:1}90%{left:115%;opacity:.8}100%{left:115%;opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes vuMorph{
  0%{clip-path:polygon(0 68%,5% 54%,10% 78%,15% 34%,20% 62%,25% 22%,30% 48%,35% 14%,40% 37%,45% 54%,50% 18%,55% 44%,60% 24%,65% 59%,70% 33%,75% 69%,80% 41%,85% 74%,90% 51%,95% 78%,100% 64%,100% 100%,0 100%)}
  50%{clip-path:polygon(0 72%,5% 46%,10% 66%,15% 24%,20% 58%,25% 14%,30% 44%,35% 28%,40% 18%,45% 47%,50% 12%,55% 39%,60% 21%,65% 51%,70% 27%,75% 60%,80% 38%,85% 68%,90% 47%,95% 73%,100% 58%,100% 100%,0 100%)}
  100%{clip-path:polygon(0 64%,5% 52%,10% 74%,15% 38%,20% 54%,25% 18%,30% 46%,35% 10%,40% 34%,45% 49%,50% 16%,55% 43%,60% 20%,65% 57%,70% 30%,75% 63%,80% 36%,85% 70%,90% 49%,95% 75%,100% 61%,100% 100%,0 100%)}
}
@keyframes vuGlow{from{opacity:.82;transform:scaleY(.92)}to{opacity:1;transform:scaleY(1.05)}}
@keyframes socialFloat{to{transform:translateY(-5px) rotateZ(1.5deg)}}
@keyframes appFloat{to{transform:translateY(-3px) scale(1.025);filter:brightness(1.08)}}


/* v5.2.9 · Responsive específico para tablet y celular */
@media(max-width:1024px){
  .radio-shell{
    min-height:100svh;
    background-image:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.17)),var(--bg-tablet)
  }
  .station-title h1{font-family:"Merienda","Segoe Print","Comic Sans MS","Trebuchet MS",cursive}
}

/* Tablet vertical: composición apilada, aireada y centrada */
@media(min-width:651px) and (max-width:1024px) and (orientation:portrait){
  body{overflow:hidden}
  .radio-shell{
    height:100dvh;overflow-y:auto;overflow-x:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:0;padding:clamp(42px,5.5svh,72px) 18px 32px;
    overscroll-behavior:none
  }
  .station-title,.identity,.player-card,.social-dock{
    position:relative;left:auto;right:auto;top:auto;transform:none
  }
  .station-title{
    order:1;width:min(90vw,700px);margin:0 0 clamp(20px,2.5svh,30px);text-align:center
  }
  .station-title h1{font-size:clamp(38px,5.2vw,50px);line-height:1.08}
  .station-title p{font-size:clamp(20px,2.8vw,26px);margin-top:8px}
  .identity{order:2;width:clamp(176px,24vw,205px);margin:0 0 clamp(24px,3svh,34px)}
  .logo-orbit{width:100%}
  .player-card{
    order:3;width:min(610px,88vw);min-height:174px;margin:0 0 clamp(24px,3svh,34px);
    grid-template-columns:1fr 96px 1fr;padding:15px 24px 13px;gap:13px;animation:none
  }
  .play-btn{width:96px;height:96px}
  .vu{height:72px}
  .volume-line{width:min(410px,88%)}
  .social-dock{
    order:4;width:min(340px,72vw);min-width:0;padding:12px 16px 13px;gap:10px;
    background:rgba(3,7,13,.18)
  }
  .social-dock nav{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:9px}
  .social-3d,.preview-social{width:46px;height:46px}
  .app-link{margin-top:3px;padding-top:10px;width:100%;display:grid;place-items:center}
  .app-link img,.preview-app{width:158px;max-width:70vw}
  .ownership{
    position:relative;order:5;left:auto;bottom:auto;transform:none;margin-top:auto;padding-top:24px
  }
}

/* Tablet y celular acostados: mantiene la composición panorámica, pero con más aire */
@media(max-width:1024px) and (orientation:landscape){
  body{overflow:hidden}
  .radio-shell{height:100dvh;overflow:hidden}
  .station-title{
    left:50%;top:6.5svh;width:min(600px,58vw);transform:translateX(-50%)
  }
  .station-title h1{font-size:clamp(29px,3.5vw,43px);line-height:1.04}
  .station-title p{font-size:clamp(16px,2vw,23px);margin-top:6px}
  .identity{
    left:4.5vw;top:48%;transform:translateY(-50%);width:clamp(128px,18vw,190px)
  }
  .logo-orbit{width:100%}
  .player-card{
    left:50%;top:65%;width:min(570px,57vw);min-height:150px;
    grid-template-columns:1fr 86px 1fr;padding:12px 20px 10px;gap:10px;animation:none
  }
  .play-btn{width:86px;height:86px}
  .vu{height:62px}
  .volume-line{width:min(390px,88%)}
  .social-dock{
    right:2.5vw;top:52%;min-width:124px;max-width:17vw;padding:9px 9px 8px;gap:7px
  }
  .social-dock nav{gap:6px}
  .social-3d,.preview-social{width:42px;height:42px}
  .app-link{padding-top:8px;margin-top:2px}
  .app-link img,.preview-app{width:122px;max-width:15vw}
  .ownership{bottom:5px}
}

/* Celular vertical: todos los bloques bajan y dejan de encimarse */
@media(max-width:650px) and (orientation:portrait){
  body{overflow:hidden}
  .radio-shell{
    height:100dvh;min-height:100svh;overflow-y:auto;overflow-x:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:0;padding:clamp(30px,4.5svh,42px) 9px 22px;
    background-image:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.16)),var(--bg-mobile);
    overscroll-behavior:none
  }
  .station-title,.identity,.player-card,.social-dock{
    position:relative;left:auto;right:auto;top:auto;transform:none
  }
  .station-title{order:1;width:min(94vw,460px);margin:0 0 17px;text-align:center}
  .station-title h1{font-size:clamp(31px,8.6vw,38px);line-height:1.08}
  .station-title p{font-size:clamp(16px,4.8vw,20px);margin-top:5px}
  .identity{order:2;width:clamp(148px,40vw,166px);margin:0 0 21px}
  .logo-orbit{width:100%;padding:7px}
  .player-card{
    order:3;width:min(382px,94vw);min-height:150px;margin:0 0 21px;
    grid-template-columns:1fr 78px 1fr;padding:12px 13px 10px;border-radius:22px;gap:8px;animation:none
  }
  .play-btn{width:78px;height:78px}
  .vu{height:57px}
  .volume-line{width:92%;gap:7px}
  .volume-line output{font-size:13px}
  .social-dock{
    order:4;width:min(250px,78vw);min-width:0;max-width:94vw;padding:11px 14px 12px;gap:9px;
    background:rgba(3,7,13,.16)
  }
  .social-caption h2{font-size:11px}
  .social-dock nav{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px}
  .social-3d,.preview-social{width:43px;height:43px}
  .app-link{width:100%;display:grid;place-items:center;margin-top:2px;padding-top:10px}
  .app-link img,.preview-app{width:148px;max-width:68vw}
  .ownership{
    position:relative;order:5;left:auto;bottom:auto;transform:none;margin-top:auto;padding-top:20px;font-size:9px
  }
}

/* Pantallas acostadas muy bajas: evita cortes por la barra del navegador */
@media(max-height:460px) and (orientation:landscape){
  .station-title{top:4.5svh}
  .station-title h1{font-size:clamp(27px,3.3vw,38px)}
  .station-title p{font-size:16px;margin-top:3px}
  .identity{left:3.2vw;top:49%;width:clamp(112px,17vw,158px)}
  .player-card{top:66%;width:min(540px,58vw);min-height:132px;padding:9px 16px 8px;grid-template-columns:1fr 74px 1fr}
  .play-btn{width:74px;height:74px}
  .vu{height:52px}
  .volume-line{width:90%}
  .social-dock{right:2vw;top:52%;padding:7px;gap:4px}
  .social-caption{gap:3px}
  .social-3d,.preview-social{width:36px;height:36px}
  .app-link{padding-top:5px}
  .app-link img,.preview-app{width:108px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}