:root{
  --bg:#0f172a;
  --panel:#111827;
  --muted:#9ca3af;
  --text:#f8fafc;
  --brand:#1976d2;
  --accent:#25d366;
  --card:#0b1225;
  --glow:#60a5fa;
}
*{box-sizing:border-box}
html,body{
  margin:0; font-family:system-ui,-apple-system, Segoe UI, Roboto, Ubuntu,"Helvetica Neue", Arial; color:var(--text);
  height:100%;
}
body{
  background:
    radial-gradient(1200px 600px at 80% -200px, #1e40af33 0%, transparent 60%),
    radial-gradient(1000px 600px at -200px 80%, #22d3ee22 0%, transparent 60%),
    var(--bg);
  min-height:100%;
  overflow-x:hidden;
  position:relative;
  isolation:isolate;
}
body::before{
  content:"";
  position:fixed; inset:-20vmax;
  background: conic-gradient(from 0deg, #60a5fa0a, #22d3ee0a, #60a5fa0a);
  filter: blur(60px);
  animation: spin-bg 36s linear infinite;
  z-index:-1; pointer-events:none;
}
@keyframes spin-bg{to{transform:rotate(360deg)}}

a{color:inherit}
.container{max-width:1040px; margin:0 auto; padding:24px}

header{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:48px; height:48px; border-radius:50%; object-fit:cover}
.brand h1{font-size:clamp(20px, 4vw, 28px); margin:0}

.live-badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg, #ef4444, #f59e0b);
  font-weight:600;
  box-shadow:0 8px 20px #ef444455;
  animation:pulse 1s ease-in-out infinite alternate;
  will-change: transform;
}
.dot{width:10px; height:10px; border-radius:999px; background:#fff; box-shadow:0 0 0 3px #ffffff44}
@keyframes pulse{from{transform:scale(1)} to{transform:scale(1.06)}}

.hero{display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:center; margin-top:16px}
@media (max-width:900px){.hero{grid-template-columns:1fr;}}

/* === CARD base con animaciones === */
.card{
  background:linear-gradient(180deg, #0b1225cc, #0b1225ee);
  border:1px solid #ffffff10; border-radius:20px; padding:20px; box-shadow:0 20px 60px #00000050;
  backdrop-filter: blur(6px);
  position:relative; overflow:hidden;
  transform: translateY(14px) translateZ(0);
  opacity:0;
  transition:
    transform .6s cubic-bezier(.2,.8,.2,1),
    opacity .6s ease,
    box-shadow .35s ease,
    border-color .35s ease;
  will-change: transform, opacity, box-shadow;
}
/* Efecto sheen al hover */
.card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 20%, transparent 40%);
  transform: translateX(-120%) skewX(-12deg);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.card:hover::after{ transform: translateX(120%) skewX(-12deg); }
.card:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow:0 28px 80px #00000066, 0 0 0 1px #ffffff14 inset;
  border-color:#ffffff22;
}

/* Estado visible al hacer scroll */
.reveal{ opacity:0; transform: translateY(18px); }
.reveal.is-visible{
  opacity:1; transform: translateY(0);
  transition: transform .7s cubic-bezier(.2,.8,.2,1) var(--delay,0s), opacity .7s ease var(--delay,0s);
}

/* Player */
.player{
  display:flex; flex-direction:column; gap:16px; position:relative;
  background: linear-gradient(180deg, rgba(11,18,37,.78), rgba(11,18,37,.92)), url('/fondo.jpg') center/cover no-repeat;
  transform-style: preserve-3d;
}
/* Tilt brillo */
.player::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:20px;
  background: radial-gradient(600px 180px at var(--mx,50%) var(--my,30%), #60a5fa26, transparent 60%);
  pointer-events:none;
  transition: background .15s linear;
}

/* Disco */
.disc{
  width:180px; height:180px; border-radius:999px; margin:auto; background:
    radial-gradient(circle at 50% 50%, #111 0 20px, #000 21px 24px, transparent 25px),
    conic-gradient(from 0deg, #111 0 25%, #222 25% 50%, #111 50% 75%, #222 75% 100%);
  box-shadow: inset 0 0 10px #000, 0 20px 60px #00000055; position:relative; animation:spin 8s linear infinite; border:2px solid #1f2937;
}
.disc.paused{animation-play-state:paused; filter:grayscale(0.6) brightness(0.8)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Tortuga (imagen) */
.turtle-img{
  width:180px;
  height:180px;
  margin:auto;
  display:none;              /* oculta por defecto */
  object-fit:contain;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.45));
}
.turtle-img.sway{
  display:block;             /* visible cuando está balanceándose */
  animation: sway 2.2s ease-in-out infinite;
}
@keyframes sway{
  0%   { transform: rotate(-4deg) translateY(0); }
  50%  { transform: rotate(4deg) translateY(-4px); }
  100% { transform: rotate(-4deg) translateY(0); }
}

.controls{display:flex; align-items:center; justify-content:center; gap:14px}
.btn{appearance:none; border:0; border-radius:999px; padding:14px 18px; cursor:pointer; font-weight:700; color:#fff}
.btn-primary{background:var(--brand); box-shadow:0 10px 24px #1976d266; transition: transform .25s ease}
.btn-primary:active{ transform: scale(.98); }
.btn-ghost{background:#111827; border:1px solid #ffffff1a}

.range{width:min(520px,100%); margin:4px auto 0}
input[type="range"]{width:100%}

.now{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center}
.now h2{margin:0; font-size:clamp(18px, 3.5vw, 22px)}
.now p{margin:0; color:var(--muted)}

/* Info side */
.info-list{display:grid; gap:12px}
.info-item{display:flex; align-items:flex-start; gap:12px}
.info-item .icon{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:#111827; border:1px solid #ffffff12}
.info-item h3{margin:2px 0 4px}
.info-item p{margin:0; color:var(--muted)}

/* Programación */
.section{margin-top:36px}
.section h3{margin:0 0 14px}
.schedule{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media (max-width:700px){.schedule{grid-template-columns:1fr}}
.slot{
  padding:14px; border:1px solid #ffffff12; border-radius:14px; background:#0b1225cc;
  transform: translateY(10px); opacity:0;
  transition: transform .6s cubic-bezier(.2,.8,.2,1) var(--delay,0s), opacity .6s ease var(--delay,0s), box-shadow .3s ease, border-color .3s ease;
}
.slot.is-visible{ transform: translateY(0); opacity:1; }
.slot:hover{ transform: translateY(-3px); box-shadow:0 18px 40px #00000055; border-color:#ffffff22; }

/* Footer */
footer{margin:32px 0 10px; color:var(--muted); font-size:14px; text-align:center}
.links{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.chip{padding:8px 12px; border-radius:999px; border:1px solid #ffffff1a; background:#0b1225cc; transition: transform .25s ease, border-color .25s ease}
.chip:hover{ transform: translateY(-2px); border-color:#ffffff30; }

/* Botón WhatsApp */
.whatsapp{
  position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:999px; display:grid; place-items:center;
  background:var(--accent); color:#fff; box-shadow:0 14px 40px #25d36688; text-decoration:none; font-weight:700;
  animation: floaty 3s ease-in-out infinite;
}
.whatsapp:active{ transform: scale(.97); }
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}
.whatsapp svg{ width:28px; height:28px; display:block; fill:currentColor; }

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .live-badge, .disc, body::before, .whatsapp{ animation:none !important; }
  .card, .reveal, .slot{ transition:none !important; transform:none !important; opacity:1 !important; }
  .turtle-img{ animation:none !important; }
}

/* Utilidad para accesibilidad */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}




/* Logo grande, fijado en la esquina superior izquierda */
.logo-fixed{
  position: fixed;
  top: 14px;
  left: 14px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  z-index: 2000; /* por encima de las cards */
}

/* Ajuste responsive */
@media (max-width:700px){
  .logo-fixed{
    width: 72px;
    height: 72px;
    top: 12px;
    left: 12px;
  }
}

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