/* Aqua 102.7 — estilos */

:root{
  --noche:#0A1230;      /* fondo */
  --noche-2:#121C45;    /* tarjetas */
  --aqua:#1E8BFF;       /* azul del logo */
  --cian:#4FE3F0;       /* brillo del logo */
  --violeta:#8A6BFF;    /* luces del estudio */
  --texto:#EEF4FF;
  --texto-suave:#B9C6E8;
  --borde:rgba(79,227,240,.25);
  --fs:1.25rem;         /* tamaño base grande: 20px */
  --radio:22px;
  --display:"Fredoka", "Atkinson Hyperlegible", system-ui, sans-serif;
  --cuerpo:"Atkinson Hyperlegible", system-ui, sans-serif;
}
html.letra-grande{ --fs:1.5rem; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  -webkit-tap-highlight-color:transparent; overscroll-behavior-y:none;
  margin:0; background:var(--noche); color:var(--texto);
  font-family:var(--cuerpo); font-size:var(--fs); line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:var(--cian); }
[hidden]{ display:none !important; }
:focus-visible{ outline:4px solid var(--cian); outline-offset:4px; border-radius:8px; }
.envoltura{ width:min(1120px, 100% - 32px); margin-inline:auto; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- Barra superior ---------- */
.barra{
  position:sticky; top:0; z-index:20; padding-top:env(safe-area-inset-top);
  background:rgba(10,18,48,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borde);
}
.barra .envoltura{ display:flex; align-items:center; gap:16px; min-height:72px; flex-wrap:wrap; padding-block:8px; }
.marca{ font-family:var(--display); font-weight:700; font-size:1.5rem; text-decoration:none; color:var(--texto); margin-right:auto; }
.marca span{ color:var(--cian); }
.barra nav{ display:flex; gap:6px; flex-wrap:wrap; }
.barra nav a{ color:var(--texto); text-decoration:none; padding:8px 14px; border-radius:999px; font-size:1.05rem; }
.barra nav a:hover{ background:var(--noche-2); }
.boton-letra{
  font:700 1.05rem var(--cuerpo); color:var(--noche); background:var(--texto);
  border:0; border-radius:999px; padding:10px 18px; cursor:pointer; min-height:48px;
}

/* ---------- Portada ---------- */
.portada{ position:relative; overflow:hidden; isolation:isolate; padding:56px 0 64px; }
.portada::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url(../img/estudio.webp) center 40%/cover no-repeat; opacity:.35;
}
.portada::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,18,48,.55) 0%, rgba(10,18,48,.85) 60%, var(--noche) 100%);
}
.logo{
  width:min(640px, 100%); height:auto; aspect-ratio:1536/600; object-fit:cover; object-position:center 44%;
  margin:0 auto; filter:drop-shadow(0 10px 40px rgba(30,139,255,.45));
}
/* El logo flota y brilla mientras suena la radio */
.sonando .logo{ animation:flotar 3.2s ease-in-out infinite; }
@keyframes flotar{
  50%{ transform:translateY(-6px); filter:drop-shadow(0 16px 56px rgba(79,227,240,.6)); }
}
.lema{
  text-align:center; font-family:var(--display); font-weight:600; text-wrap:balance;
  font-size:clamp(1.6rem, 4vw, 2.6rem); line-height:1.2; margin:8px 0 36px;
}
.lema em{ font-style:normal; color:var(--cian); }

/* ---------- La radio ---------- */
.radio{
  background:linear-gradient(180deg, #16224F, #0E1738);
  border:1px solid var(--borde); border-radius:32px;
  padding:28px clamp(18px, 4vw, 40px) 32px;
  box-shadow:0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  max-width:880px; margin:0 auto;
}

/* Dial de FM con la onda del logo */
.dial{
  position:relative; height:132px; border-radius:16px;
  background:radial-gradient(120% 90% at 50% 100%, #0B1A4A, #050A1F);
  border:1px solid rgba(255,255,255,.08); overflow:hidden;
}
.dial canvas{ position:absolute; inset:0; width:100%; height:100%; }
.dial-escala{ position:absolute; inset:0; }
.dial-escala .marca-fm{ position:absolute; bottom:0; width:2px; background:rgba(185,198,232,.5); transform:translateX(-1px); }
.dial-escala .marca-fm.mayor{ background:rgba(238,244,255,.85); }
.dial-escala .numero{
  position:absolute; top:8px; transform:translateX(-50%);
  font:700 1.05rem var(--cuerpo); color:var(--texto); text-shadow:0 1px 6px #050A1F, 0 0 2px #050A1F;
}
.aguja{
  position:absolute; top:0; bottom:0; width:4px; left:var(--pos, 0%);
  transform:translateX(-2px); background:#fff;
  box-shadow:0 0 10px var(--cian), 0 0 28px var(--aqua);
  transition:left 2.2s cubic-bezier(.2,.8,.2,1);
}
.aguja span{
  position:absolute; top:40px; left:10px;
  font:700 1.1rem var(--cuerpo); color:var(--noche); background:var(--cian);
  padding:2px 8px; border-radius:6px; white-space:nowrap;
}
.sonando .aguja{ animation:brillo 1.4s ease-in-out infinite; }
@keyframes brillo{ 50%{ box-shadow:0 0 18px var(--cian), 0 0 48px var(--aqua); } }

.controles{ display:grid; grid-template-columns:auto 1fr; gap:24px 28px; align-items:center; margin-top:28px; }
.play{
  width:128px; height:128px; border-radius:50%; border:0; cursor:pointer;
  background:radial-gradient(circle at 35% 30%, #6FD8FF, var(--aqua) 55%, #0D4FC2);
  box-shadow:0 12px 30px rgba(30,139,255,.55), inset 0 -6px 14px rgba(0,0,0,.25), inset 0 4px 10px rgba(255,255,255,.35);
  display:grid; place-items:center; color:#fff; transition:transform .15s ease;
}
.play:hover{ transform:scale(1.04); }
.play:active{ transform:scale(.97); }
.play svg{ width:52px; height:52px; }
.play .icono-pausa{ display:none; }
.sonando .play .icono-play{ display:none; }
.sonando .play .icono-pausa{ display:block; }

/* Programa al aire */
.estado-etiqueta{
  display:inline-flex; align-items:center; gap:10px; margin:0;
  font:700 1rem var(--cuerpo); letter-spacing:.08em; text-transform:uppercase; color:var(--texto-suave);
}
.estado-etiqueta .luz{ width:14px; height:14px; border-radius:50%; background:#E03B3B; }
.sonando .estado-etiqueta{ color:#FF9A9A; }
.sonando .estado-etiqueta .luz{ background:#FF4D4D; box-shadow:0 0 12px #FF4D4D; animation:latido 1.6s ease-in-out infinite; }
@keyframes latido{ 50%{ opacity:.35; } }

.al-aire-nombre{ font-family:var(--display); font-weight:700; font-size:clamp(1.7rem, 4vw, 2.3rem); line-height:1.1; margin:6px 0 2px; }
.al-aire-con{ margin:0; font-weight:700; color:var(--cian); }
.al-aire-desc{ margin:2px 0 0; color:var(--texto-suave); font-size:1.05rem; line-height:1.4; }
.al-aire-tiempo{
  display:flex; align-items:center; gap:12px; margin-top:12px;
  font-weight:700; font-size:1rem; font-variant-numeric:tabular-nums; color:var(--texto-suave);
}
.progreso{ flex:1; height:8px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; }
.progreso span{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--aqua), var(--cian)); transition:width 1s ease; }
.al-aire-sigue{ margin:10px 0 0; font-size:1.05rem; color:var(--texto-suave); }
.al-aire-sigue strong{ color:var(--texto); }
.cambio{ animation:entrar .7s cubic-bezier(.2,.8,.2,1); }
@keyframes entrar{ from{ opacity:0; transform:translateY(10px); } }

.ayuda-play{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center; }
.instruccion{ margin:0; font-weight:700; }
.mensaje-error{ color:#FFB4B4; margin:0; width:100%; }

.volumen{ grid-column:1 / -1; display:flex; align-items:center; gap:16px; }
.volumen input{ flex:1; accent-color:var(--cian); height:36px; cursor:pointer; }
.vol-btn{
  width:52px; height:52px; border-radius:50%; border:2px solid var(--borde); background:transparent;
  color:var(--texto); font:700 1.6rem/1 var(--cuerpo); cursor:pointer;
}
.vol-btn:hover{ background:var(--noche-2); }

/* ---------- Instalar la app ---------- */
.instalar{
  max-width:880px; margin:24px auto 0; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:rgba(18,28,69,.85); border:1px dashed rgba(79,227,240,.5); border-radius:24px; padding:18px 22px;
}
.instalar img{ width:64px; height:64px; border-radius:16px; flex:none; }
.instalar div{ flex:1 1 220px; }
.instalar strong{ display:block; font-family:var(--display); font-weight:600; font-size:1.35rem; line-height:1.2; }
.instalar p{ margin:2px 0 0; color:var(--texto-suave); font-size:1.05rem; }
.instalar li strong{ display:inline; font:inherit; font-weight:700; }
.boton-instalar{
  font:700 1.15rem var(--cuerpo); color:var(--noche); background:var(--cian); border:0; cursor:pointer;
  border-radius:999px; padding:14px 26px; min-height:56px;
}
.boton-instalar:hover{ filter:brightness(1.08); }
.ayuda-ios{ width:100%; margin:6px 0 0; padding-left:1.4em; font-size:1.05rem; }
.ayuda-ios li{ margin:4px 0; }

/* ---------- Secciones ---------- */
section{ padding:72px 0; }
h2{ font-family:var(--display); font-weight:700; font-size:clamp(2rem, 5vw, 2.8rem); line-height:1.1; margin:0 0 12px; }
.bajada{ color:var(--texto-suave); margin:0 0 36px; max-width:46ch; }

.decadas{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.decada{ border-radius:var(--radio); padding:28px; background:var(--noche-2); border:1px solid var(--borde); }
.decada .anio{
  font-family:var(--display); font-weight:700; font-size:5rem; line-height:1;
  background:linear-gradient(180deg, var(--cian), var(--aqua)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.decada.d80 .anio{ background-image:linear-gradient(180deg, #B9A6FF, var(--violeta)); }
.decada.d90 .anio{ background-image:linear-gradient(180deg, #8FD3FF, #3E6BFF); }
.decada h3{ font-family:var(--display); font-weight:600; font-size:1.5rem; margin:8px 0 6px; }
.decada p{ margin:0; color:var(--texto-suave); }

/* Programación */
.dias{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 20px; }
.dias button{
  min-width:64px; min-height:52px; padding:8px 14px; border-radius:14px; cursor:pointer;
  font:700 1.05rem var(--cuerpo); color:var(--texto); background:var(--noche-2); border:1px solid var(--borde);
}
.dias button[aria-pressed="true"]{ background:var(--cian); color:var(--noche); border-color:var(--cian); }
.grilla-titulo{ font-family:var(--display); font-weight:600; font-size:1.5rem; margin:0 0 8px; }
.grilla{ list-style:none; margin:0; padding:0; border-top:1px solid var(--borde); }
.grilla li{
  display:grid; grid-template-columns:180px 1fr; gap:8px 24px; align-items:baseline;
  padding:22px 8px; border-bottom:1px solid var(--borde);
}
.grilla .hora{ font-weight:700; font-size:1.3rem; color:var(--cian); font-variant-numeric:tabular-nums; }
.grilla h3{ font-family:var(--display); font-weight:600; font-size:1.5rem; margin:0; }
.grilla p{ margin:2px 0 0; color:var(--texto-suave); }
.grilla li.ahora{ background:linear-gradient(90deg, rgba(30,139,255,.18), transparent); border-radius:12px; }
.grilla li.ahora h3::after{
  content:"AL AIRE"; margin-left:12px; vertical-align:middle;
  font:700 .85rem var(--cuerpo); letter-spacing:.08em; color:#fff; background:#E03B3B; padding:3px 8px; border-radius:6px;
}

/* Pedidos */
.pedidos{ background:linear-gradient(180deg, transparent, #0E1738); }
.pedidos-caja{
  display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center;
  background:var(--noche-2); border:1px solid var(--borde); border-radius:32px; padding:clamp(24px, 5vw, 48px);
}
.pedidos-caja .bajada{ margin-bottom:0; }
.botones-contacto{ display:grid; gap:14px; }
.boton{
  display:flex; align-items:center; justify-content:center; gap:12px; min-height:64px;
  border-radius:999px; text-decoration:none; font:700 1.25rem var(--cuerpo); padding:12px 24px;
}
.boton svg{ width:28px; height:28px; flex:none; }
.boton.wa{ background:#25D366; color:#062B14; }
.boton.tel{ background:var(--texto); color:var(--noche); }
.boton:hover{ filter:brightness(1.08); }

footer{ padding:40px 0 calc(120px + env(safe-area-inset-bottom)); color:var(--texto-suave); border-top:1px solid var(--borde); }
footer .envoltura{ display:flex; flex-wrap:wrap; gap:16px 32px; justify-content:space-between; }
footer strong{ color:var(--texto); }

/* Reproductor flotante (aparece al bajar) */
.mini{
  position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:30; transform:translate(-50%, 160%);
  display:flex; align-items:center; gap:14px; padding:10px 22px 10px 10px;
  background:#16224F; border:1px solid var(--borde); border-radius:999px;
  box-shadow:0 12px 40px rgba(0,0,0,.5); transition:transform .4s ease;
  font-weight:700; color:var(--texto); cursor:pointer; font-family:var(--cuerpo); font-size:1.1rem;
}
.mini.visible{ transform:translate(-50%, 0); }
.mini-ic{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--aqua); flex:none; }
.mini svg{ width:26px; height:26px; }

@media (display-mode: standalone){
  .instalar{ display:none !important; }
}
@media (max-width:820px){
  .decadas, .pedidos-caja, .grilla li{ grid-template-columns:1fr; }
  .barra nav{ display:none; }
}
@media (max-width:520px){
  .controles{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .al-aire{ width:100%; }
  .al-aire-tiempo{ justify-content:center; }
  .ayuda-play{ justify-content:center; }
  .dial-escala .numero.menor{ display:none; }
  .play{ width:144px; height:144px; }
  .portada{ padding-top:28px; }
  section{ padding:56px 0; }
  .decada .anio{ font-size:4rem; }
  .boton-instalar{ width:100%; }
  /* En el celular el reproductor flotante ocupa todo el ancho, al alcance del pulgar */
  .mini{ left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); transform:translateY(160%); padding-right:16px; }
  .mini.visible{ transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto; }
}