/* ============================================================
   HERO · dirección A «La casa del ritmo, de noche»
   Copia de alta fidelidad del mockup daiquiri-hero-A.png.

   --u = 1 píxel del lienzo de 1672 px del mockup. Todas las
   medidas salen de medirlo, así que se escriben tal cual
   (calc(68 * var(--u)) = los 68 px de margen del mockup) y la
   composición escala con la pantalla sin perder proporción.

   Colores: muestreados del mockup sobre píxeles de TRAZO, no de
   fondo, y levantados un punto para compensar el antialiasing
   de los bordes, que oscurece el promedio.
   ============================================================ */
:root{
  --u: calc(min(100vw, 1920px) / 1672);

  --cielo:#000b2a;   --mar:#000c2e;
  --magenta:#c52640; --violeta:#2a1558;
  --arena:#dcb892;   /* titular   (medido #c9a384) */
  --naranja:#dd7b3b; /* antetítulo (medido #be6d33) */
  --texto:#d8b8a5;   /* entradilla (medido #c5a290) */
  --nav:#dab59d;     /* navegación (medido #cda58f) */
  --datos:#c8a08c;   /* datos      (medido #b38b79) */
  --coral:#d0432f;   /* botón      (medido #cd402f, relleno sólido) */
  --btn-texto:#fde8de;
  --linea:rgba(220,184,146,.34);

  --display:"Anton","Anton respaldo",Impact,sans-serif;
  --body:"Inter","Inter respaldo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--cielo);color:var(--texto);font-family:var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.saltar{position:absolute;left:-9999px;top:0;z-index:50;background:var(--coral);color:#fff;
  padding:10px 16px;font-weight:700;border-radius:0 0 8px 0}
.saltar:focus{left:0}
:focus-visible{outline:2px solid var(--naranja);outline-offset:3px;border-radius:4px}

/* ---------- navegación ---------- */
.nav{position:absolute;z-index:10;top:calc(24*var(--u));left:calc(68*var(--u));right:calc(55*var(--u));
  height:calc(36*var(--u));display:flex;align-items:center}
.marca{color:var(--naranja);width:calc(26*var(--u));height:calc(26*var(--u))}
.marca svg{width:100%;height:100%}
.enlaces{display:flex;gap:calc(38*var(--u));margin-left:calc(51*var(--u))}
.enlaces a{font-size:calc(12.2*var(--u));font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--nav);padding:calc(6*var(--u)) 0;position:relative;transition:color .2s}
.enlaces a:hover{color:#fff}
.enlaces a.activo::after{content:"";position:absolute;left:0;right:0;bottom:calc(-2*var(--u));
  height:calc(2*var(--u));background:var(--naranja);border-radius:2px}
.redes{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:calc(18*var(--u))}
.redes a{display:block;width:calc(23*var(--u));height:calc(23*var(--u));color:var(--nav);transition:color .2s}
.redes a:hover{color:#fff}
.redes svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.redes svg .lleno{fill:currentColor;stroke:none}

/* ---------- hero ---------- */
.hero{position:relative;min-height:calc(760*var(--u));overflow:hidden;isolation:isolate}

/* El cielo del mockup no es plano: índigo arriba, banda magenta en el
   horizonte hacia el centro y mar oscuro abajo a la izquierda. */
.cielo{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(46% 7% at 44% 57%, rgba(234,70,72,.85), transparent 72%),
    radial-gradient(70% 16% at 48% 55%, rgba(197,38,64,.55), transparent 70%),
    radial-gradient(40% 30% at 52% 44%, rgba(120,32,96,.40), transparent 72%),
    radial-gradient(55% 45% at 74% 22%, rgba(62,26,112,.55), transparent 70%),
    linear-gradient(180deg,#000a27 0%,#040f38 30%,#180d42 50%,#2a0f3c 56%,#030d31 62%,var(--mar) 100%)}
/* reflejos del atardecer en el agua, bajo el horizonte y a lo ancho */
.cielo::after{content:"";position:absolute;left:14%;right:28%;top:58%;height:22%;
  background:repeating-linear-gradient(180deg,rgba(234,80,70,.26) 0 2px,transparent 2px 8px);
  -webkit-mask:radial-gradient(60% 70% at 50% 0,#000,transparent 75%);
          mask:radial-gradient(60% 70% at 50% 0,#000,transparent 75%)}
/* la luna del mockup, arriba a la derecha */
.cielo::before{content:"";position:absolute;right:calc(262*var(--u));top:calc(52*var(--u));
  width:calc(22*var(--u));height:calc(22*var(--u));border-radius:50%;
  box-shadow:inset calc(-6*var(--u)) calc(-2*var(--u)) 0 0 #f4e2b8;transform:rotate(-20deg);opacity:.9}

/* La escena: se funde por la izquierda y por arriba para que no haya
   ni un borde recto. Ocupa lo mismo que en el mockup: 842x570 a partir
   de x=842, y=72. La máscara va en el contenedor para que funda igual
   la imagen quieta y el canvas animado (../capas/hero-vivo/). */
.escena{position:absolute;z-index:-1;right:0;top:calc(40*var(--u));
  width:calc(1034*var(--u));height:calc(707*var(--u));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%),linear-gradient(180deg,transparent 0,#000 10%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0,#000 26%),linear-gradient(180deg,transparent 0,#000 10%,#000 86%,transparent 100%);
          mask-composite:intersect}
/* 1034 de ancho y no 842: el logotipo real es más alto que el del mockup
   (proporción 3,9 frente a 5,3) y empuja el texto ~40 px. La escena se
   agranda lo mismo para que el malecón siga llegando al pie del hero.
   707 = 1034 / (1684/1151), la proporción de la placa maestra sin el marco. */
.escena .poster,.escena canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* scale(1.06): el mismo margen que usa el shader para el paralaje, así no salta al aparecer el canvas */
.escena .poster{transform:scale(1.06)}
.escena canvas{opacity:0;transition:opacity .6s ease}
.escena.viva canvas{opacity:1}

/* ---------- contenido ---------- */
.contenido{position:relative;padding:calc(90*var(--u)) 0 calc(60*var(--u)) calc(68*var(--u));
  max-width:calc(760*var(--u))}
.contenido > *{animation:subir .8s cubic-bezier(.2,.7,.2,1) both}
.contenido > :nth-child(2){animation-delay:.08s}
.contenido > :nth-child(3){animation-delay:.18s}
.contenido > :nth-child(4){animation-delay:.24s}
.contenido > :nth-child(5){animation-delay:.32s}
.contenido > :nth-child(6){animation-delay:.40s}

.ante{margin:0;font-size:calc(13*var(--u));font-weight:700;letter-spacing:.55em;text-transform:uppercase;color:var(--naranja)}
h1{margin:0;font-weight:400}
/* Logo grande y SIN caja: regla del cliente. Sombra en lugar de marco. */
.logo{width:calc(680*var(--u));height:auto;margin:calc(14*var(--u)) 0 0 calc(-4*var(--u));
  filter:drop-shadow(0 calc(14*var(--u)) calc(30*var(--u)) rgba(0,4,24,.55))}
.t1,.t2{display:block;font-family:var(--display);text-transform:uppercase;color:var(--arena);line-height:1}
.t1{font-size:calc(68*var(--u));margin-top:calc(12*var(--u));letter-spacing:.005em}
.t2{font-size:calc(45*var(--u));margin-top:calc(6*var(--u));letter-spacing:.005em}

.entrada{margin:calc(16*var(--u)) 0 0;max-width:calc(360*var(--u));font-size:calc(15*var(--u));line-height:1.55;color:var(--texto)}
.entrada + .entrada{margin-top:calc(12*var(--u))}
.entrada strong{color:#f1dcc6;font-weight:700}

.acciones{display:flex;gap:calc(22*var(--u));margin-top:calc(22*var(--u))}
.btn{display:inline-flex;align-items:center;gap:calc(10*var(--u));height:calc(46*var(--u));
  padding:0 calc(24*var(--u));border-radius:calc(9*var(--u));font-size:calc(13*var(--u));font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;transition:transform .18s,box-shadow .18s,background .18s}
.btn:hover{transform:translateY(calc(-2*var(--u)))}
.btn.primario{background:var(--coral);color:var(--btn-texto);box-shadow:0 calc(10*var(--u)) calc(28*var(--u)) rgba(208,67,47,.32)}
.btn.primario:hover{box-shadow:0 calc(14*var(--u)) calc(34*var(--u)) rgba(208,67,47,.45)}
.play{display:grid;place-items:center;width:calc(22*var(--u));height:calc(22*var(--u));border-radius:50%;background:var(--btn-texto)}
.play svg{width:70%;height:70%;fill:var(--coral)}
.btn.secundario{border:calc(1.5*var(--u)) solid rgba(221,123,59,.75);color:var(--arena);background:rgba(0,11,42,.35)}

.datos{display:flex;gap:calc(34*var(--u));margin:calc(28*var(--u)) 0 0;align-items:flex-start}
.datos > div{display:grid;grid-template-columns:auto 1fr;column-gap:calc(14*var(--u));align-items:start}
.datos > div + div{padding-left:calc(34*var(--u));border-left:1px solid var(--linea)}
.datos svg{grid-row:span 2;width:calc(30*var(--u));height:calc(30*var(--u));fill:none;stroke:var(--naranja);stroke-width:1.6;stroke-linecap:round}
.datos svg .punto{stroke-width:2.2}
.datos dt,.datos dd{margin:0;font-size:calc(11.5*var(--u));font-weight:700;letter-spacing:.17em;text-transform:uppercase;line-height:1.55;color:var(--datos)}

@keyframes subir{from{opacity:0;transform:translateY(calc(14*var(--u)))}to{opacity:1;transform:none}}

/* ---------- discografía: franja «Cuatro décadas de historia» ----------
   Del mockup: borde fino arriba, antetítulo naranja espaciado, titular Anton
   en arena y tarjetas con filo dorado; flechas circulares a la derecha.
   Las portadas son las REALES (8 álbumes de estudio + El Origen): las del
   mockup eran inventadas (títulos y años que no existen). */
.discos{position:relative;padding:calc(26*var(--u)) 0 calc(64*var(--u));
  border-top:1px solid rgba(221,123,59,.18);background:linear-gradient(180deg,#000c30 0%,var(--cielo) 100%)}
.discos-cabecera{display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 calc(100*var(--u)) 0 calc(68*var(--u))}
.discos .ante{font-size:calc(11*var(--u));letter-spacing:.5em}
.discos h2{margin:calc(10*var(--u)) 0 0;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:calc(38*var(--u));line-height:1;letter-spacing:.005em;color:var(--arena)}
.flechas{display:flex;gap:calc(22*var(--u))}
.flecha{display:grid;place-items:center;width:calc(42*var(--u));height:calc(42*var(--u));padding:0;border-radius:50%;
  border:calc(1.6*var(--u)) solid var(--naranja);background:transparent;color:var(--naranja);cursor:pointer;
  transition:background .2s,color .2s,opacity .2s,transform .2s}
.flecha svg{width:50%;height:50%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flecha:hover:not(:disabled){background:var(--naranja);color:var(--cielo);transform:translateY(calc(-2*var(--u)))}
.flecha:disabled{opacity:.3;cursor:default}

.carril{list-style:none;margin:calc(18*var(--u)) 0 0;padding:calc(6*var(--u)) calc(68*var(--u)) calc(10*var(--u));
  display:flex;gap:calc(18*var(--u));overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 calc(68*var(--u));
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carril::-webkit-scrollbar{display:none}
.disco{flex:0 0 calc(196*var(--u));scroll-snap-align:start}
.disco a,.disco.proximo{display:block;color:inherit}
.tapa{position:relative;display:block;aspect-ratio:1/1;border-radius:calc(7*var(--u));overflow:hidden;
  border:calc(1.5*var(--u)) solid rgba(221,123,59,.55);background:#0a1236;
  box-shadow:0 calc(10*var(--u)) calc(26*var(--u)) rgba(0,4,24,.55);transition:transform .25s,border-color .25s,box-shadow .25s}
.tapa img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.disco a:hover .tapa,.disco a:focus-visible .tapa{transform:translateY(calc(-6*var(--u)));border-color:var(--naranja);
  box-shadow:0 calc(16*var(--u)) calc(34*var(--u)) rgba(221,123,59,.28)}
.disco a:hover .tapa img{transform:scale(1.05)}
.nombre{display:block;margin-top:calc(12*var(--u));font-family:var(--display);text-transform:uppercase;
  font-size:calc(17*var(--u));line-height:1.05;letter-spacing:.02em;color:var(--arena)}
.anio{display:block;margin-top:calc(4*var(--u));font-size:calc(11*var(--u));font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--datos)}
/* El Origen: aún no hay portada → logotipo sobre la noche y una pastilla */
.proximo .tapa{display:grid;place-items:center;border-style:dashed;
  background:radial-gradient(80% 60% at 50% 70%,rgba(197,38,64,.45),transparent 70%),linear-gradient(180deg,#0b1850,#000b2a)}
.proximo .tapa img{width:82%;height:auto;object-fit:contain;filter:drop-shadow(0 calc(6*var(--u)) calc(14*var(--u)) rgba(0,0,0,.5))}
.pastilla{position:absolute;left:50%;bottom:calc(14*var(--u));transform:translateX(-50%);white-space:nowrap;
  padding:calc(5*var(--u)) calc(12*var(--u));border-radius:99px;background:var(--coral);color:var(--btn-texto);
  font-size:calc(10*var(--u));font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* entrada escalonada: .espera sólo se pone si el observador confirma que la franja está fuera de pantalla,
   así nunca quedan tarjetas invisibles si el JS o el observador fallan */
.discos.espera .disco{opacity:0;transform:translateY(calc(18*var(--u)))}
.discos.espera.visible .disco{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 60ms)}

/* ---------- la chispa: el clip de 74 s que puso en marcha el disco ----------
   Sin mockup propio: mismo lenguaje que el hero (antetítulo naranja, Anton
   en arena, botón coral) y el filo dorado de las tarjetas de discos. */
.chispa{position:relative;display:grid;grid-template-columns:calc(420*var(--u)) 1fr;gap:calc(64*var(--u));align-items:center;
  padding:calc(80*var(--u)) calc(100*var(--u)) calc(90*var(--u)) calc(68*var(--u));
  background:radial-gradient(40% 60% at 72% 55%,rgba(197,38,64,.20),transparent 70%),
             radial-gradient(30% 40% at 15% 40%,rgba(42,21,88,.35),transparent 70%)}
.chispa h2{margin:calc(10*var(--u)) 0 0;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:calc(52*var(--u));line-height:.98;letter-spacing:.005em;color:var(--arena)}
.chispa .entrada{max-width:none;margin-top:calc(18*var(--u))}
.remate{margin:calc(18*var(--u)) 0 0;padding-left:calc(14*var(--u));border-left:calc(3*var(--u)) solid var(--coral);
  font-family:var(--display);text-transform:uppercase;font-size:calc(22*var(--u));line-height:1.1;color:#f1dcc6}

.video{margin:0}
.video-play,.video iframe{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;
  border-radius:calc(10*var(--u));overflow:hidden;background:#000}
.video-play{cursor:pointer;outline-offset:4px;
  box-shadow:0 0 0 calc(1.5*var(--u)) rgba(221,123,59,.55),0 calc(22*var(--u)) calc(50*var(--u)) rgba(0,4,24,.6);
  transition:box-shadow .25s,transform .25s}
.video-play img{width:100%;height:100%;object-fit:cover;filter:saturate(.8);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
/* velo de la noche sobre la miniatura: la integra con la paleta y hace legible el botón */
.video-play::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,11,42,.15),rgba(0,11,42,.62) 75%),linear-gradient(180deg,rgba(0,11,42,.25),rgba(0,11,42,.55));transition:opacity .3s}
.video-play:hover::after{opacity:.7}
.video-btn{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;
  width:calc(104*var(--u));height:calc(104*var(--u));border-radius:50%;background:var(--coral);
  transform:translate(-50%,-50%);box-shadow:0 calc(12*var(--u)) calc(30*var(--u)) rgba(208,67,47,.45);transition:transform .25s}
.video-btn svg{width:42%;height:42%;fill:var(--btn-texto);margin-left:8%}
.video-btn::before{content:"";position:absolute;inset:0;border-radius:50%;border:calc(2*var(--u)) solid rgba(208,67,47,.7);
  animation:latido 2.2s ease-out infinite}
.video-dur{position:absolute;right:calc(14*var(--u));bottom:calc(14*var(--u));z-index:2;padding:calc(4*var(--u)) calc(10*var(--u));
  border-radius:99px;background:rgba(0,11,42,.75);color:var(--btn-texto);font-size:calc(12*var(--u));font-weight:700;letter-spacing:.08em}
.video-play:hover,.video-play:focus-visible{transform:translateY(calc(-3*var(--u)));
  box-shadow:0 0 0 calc(1.5*var(--u)) var(--naranja),0 calc(28*var(--u)) calc(60*var(--u)) rgba(208,67,47,.25)}
.video-play:hover img{transform:scale(1.04)}
.video-play:hover .video-btn{transform:translate(-50%,-50%) scale(1.08)}
.video figcaption{margin-top:calc(14*var(--u));font-size:calc(12.5*var(--u));line-height:1.55;color:var(--datos)}
.video figcaption b{color:var(--arena)}
.video figcaption a{text-decoration:underline;text-decoration-color:rgba(221,123,59,.6);text-underline-offset:3px}
.video figcaption a:hover{color:var(--naranja)}
.credito,.gracias{display:block;margin-top:calc(4*var(--u))}
.gracias{font-style:italic;color:var(--texto)}
@keyframes latido{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.6);opacity:0}}

.chispa.espera .chispa-texto,.chispa.espera .video{opacity:0;transform:translateY(calc(22*var(--u)))}
.chispa.espera.visible .chispa-texto,.chispa.espera.visible .video{opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.chispa.espera.visible .video{transition-delay:.12s}

/* ---------- contacto y pie ----------
   Remate de la página: una fila de teclas de piano (el malecón del hero)
   separa la sección; mismos botones y antetítulo que el hero. */
.contacto{position:relative;padding:calc(34*var(--u)) calc(68*var(--u)) calc(90*var(--u));text-align:center;
  background:radial-gradient(50% 70% at 50% 100%,rgba(197,38,64,.22),transparent 72%)}
.teclas{height:calc(34*var(--u));margin:0 auto calc(56*var(--u));max-width:calc(620*var(--u));opacity:.6;border-radius:calc(4*var(--u));
  -webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  /* teclado de verdad: grupos de 2 y 3 teclas negras cada 7 blancas */
  background:
    repeating-linear-gradient(90deg,transparent calc(0*var(--u)) calc(11*var(--u)),#05081c calc(11*var(--u)) calc(21*var(--u)),transparent calc(21*var(--u)) calc(27*var(--u)),#05081c calc(27*var(--u)) calc(37*var(--u)),transparent calc(37*var(--u)) calc(59*var(--u)),#05081c calc(59*var(--u)) calc(69*var(--u)),transparent calc(69*var(--u)) calc(75*var(--u)),#05081c calc(75*var(--u)) calc(85*var(--u)),transparent calc(85*var(--u)) calc(91*var(--u)),#05081c calc(91*var(--u)) calc(101*var(--u)),transparent calc(101*var(--u)) calc(112*var(--u))) top left/100% 62% no-repeat,
    repeating-linear-gradient(90deg,#ead0b6 0 calc(15*var(--u)),#1b1f3a calc(15*var(--u)) calc(16*var(--u)));
  box-shadow:0 0 calc(24*var(--u)) rgba(242,183,5,.18)}
.contacto h2{margin:calc(10*var(--u)) 0 0;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:calc(64*var(--u));line-height:1;color:var(--arena)}
.contacto .entrada{max-width:calc(460*var(--u));margin:calc(16*var(--u)) auto 0}
.contacto .acciones{justify-content:center;margin-top:calc(28*var(--u))}
.play.sobre svg{width:62%;height:62%;fill:none;stroke:var(--coral);stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.redes-grandes{justify-content:center;margin:calc(34*var(--u)) 0 0;gap:calc(26*var(--u))}
.redes-grandes a{width:calc(28*var(--u));height:calc(28*var(--u));color:var(--arena)}
.redes-grandes a:hover{color:var(--naranja)}

.pie{padding:calc(26*var(--u)) calc(68*var(--u)) calc(34*var(--u));border-top:1px solid rgba(221,123,59,.18);text-align:center}
.pie-marca{margin:0;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:calc(15*var(--u));color:var(--naranja)}
.pie-creditos{max-width:calc(760*var(--u));margin:calc(8*var(--u)) auto 0;font-size:calc(11.5*var(--u));line-height:1.6;color:var(--datos)}
.pie-creditos b{color:var(--arena);font-weight:700}

/* ---------- móvil: la escena arriba como portada, el texto debajo ---------- */
@media (max-width:900px){
  .cielo::before{display:none}
  :root{--u:calc(100vw / 390)}
  .nav{top:14px;left:18px;right:18px;height:30px}
  .marca{width:24px;height:24px}
  .enlaces{display:none}
  .redes{gap:14px}
  .redes a{width:20px;height:20px}
  .hero{min-height:auto;display:flex;flex-direction:column}
  .escena{position:relative;order:-1;top:0;right:auto;width:100%;height:auto;aspect-ratio:1684/1151;margin-top:52px;
    -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent);-webkit-mask-composite:source-over;mask-composite:add}
  .contenido{padding:4px 20px 44px;max-width:none;margin-top:-26px}
  .ante{font-size:10.5px;letter-spacing:.34em}
  .logo{width:100%;margin:10px 0 0 -2px}
  .t1{font-size:clamp(2.5rem,11vw,3.4rem);margin-top:10px}
  .t2{font-size:clamp(1.55rem,7vw,2.1rem)}
  .entrada{max-width:none;font-size:15px}
  .acciones{flex-direction:column;gap:12px}
  .btn{height:48px;justify-content:center;font-size:13px;padding:0 20px;border-radius:10px}
  .play{width:22px;height:22px}
  .datos{gap:20px;flex-wrap:wrap}
  .datos > div + div{padding-left:20px}
  .datos svg{width:26px;height:26px}
  .datos dt,.datos dd{font-size:10.5px}
  .discos{padding:28px 0 44px}
  .discos-cabecera{padding:0 20px}
  .discos .ante{font-size:10.5px;letter-spacing:.34em}
  .discos h2{font-size:clamp(1.9rem,8.6vw,2.4rem)}
  .flechas{display:none}
  .carril{margin-top:16px;padding:6px 20px 10px;gap:14px;scroll-padding:0 20px}
  .disco{flex-basis:58vw}
  .nombre{font-size:18px;margin-top:10px}
  .anio{font-size:10.5px}
  .pastilla{font-size:10px;padding:5px 12px;bottom:12px}
  .chispa{grid-template-columns:1fr;gap:22px;padding:40px 20px 52px}
  .chispa h2{font-size:clamp(2.2rem,10vw,2.9rem)}
  .remate{font-size:19px;padding-left:12px;border-left-width:3px}
  .video-btn{width:64px;height:64px}
  .video-dur{font-size:11px;right:10px;bottom:10px;padding:3px 9px}
  .video figcaption{font-size:12.5px}
  .contacto{padding:24px 20px 56px}
  .teclas{height:26px;margin-bottom:36px;max-width:86%}
  .contacto h2{font-size:clamp(2.6rem,12vw,3.4rem)}
  .contacto .entrada{max-width:none}
  .redes-grandes{gap:22px;margin-top:28px}
  .redes-grandes a{width:26px;height:26px}
  .pie{padding:22px 20px 30px}
  .pie-marca{font-size:14px}
  .pie-creditos{font-size:12px}
}

/* ---------- movimiento reducido: todo quieto y en su fotograma FINAL ---------- */
@media (prefers-reduced-motion:reduce){
  .contenido > *{animation:none!important}
  .escena canvas{display:none}
  .discos.espera .disco{opacity:1;transform:none;transition:none}
  .tapa,.tapa img,.flecha{transition:none}
  .video-btn::before{animation:none;display:none}
  .video-play,.video-play img,.video-btn{transition:none}
  html{scroll-behavior:auto}
  .btn,.enlaces a,.redes a{transition:none}
}