:root{--ink:#0E0B08;--gold:#C9A24B;--gold2:#E8C878;--bone:#F3E9D6;--dust:#A8977A;--ember:#B34D21;--line:rgba(232,200,120,.25);--muted:rgba(243,233,214,.64);--serif:"Cormorant Garamond",Georgia,serif;--display:"Cinzel","Times New Roman",serif;--sans:"Montserrat",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--ink)}body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--sans);overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}img{max-width:100%;display:block}.noise{position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.032;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.progress{position:fixed;left:0;top:0;width:100%;height:2px;z-index:1100;background:rgba(255,255,255,.04)}.progress b{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2),#fff1b0)}.shell{width:min(1460px,calc(100% - 72px));margin:auto}
.site-head{position:fixed;inset:0 0 auto 0;height:84px;z-index:1000;display:flex;align-items:center;transition:.35s;border-bottom:1px solid transparent}.site-head.scrolled{background:rgba(14,11,8,.82);backdrop-filter:blur(18px);border-color:rgba(232,200,120,.16)}.head-inner{width:min(1540px,calc(100% - 54px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:13px;letter-spacing:.18em;font-family:var(--display);font-size:15px}.brand img{width:49px;height:49px;object-fit:contain}.nav{display:flex;align-items:center;gap:28px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}.nav a{opacity:.7}.nav a:hover,.nav a.active{opacity:1}.head-cta{border:1px solid rgba(232,200,120,.5);padding:12px 17px;font-size:10px;letter-spacing:.17em;text-transform:uppercase}.menu{display:none;background:none;border:0;color:var(--bone);font-size:24px}
.hero{min-height:100vh;position:relative;display:grid;align-items:center;overflow:hidden;background:radial-gradient(circle at 70% 50%,rgba(201,162,75,.08),transparent 42%)}.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(14,11,8,.91) 36%,rgba(14,11,8,.28) 70%,rgba(14,11,8,.78) 100%);z-index:2}.hero-slides{position:absolute;inset:0;z-index:1}.hero-slide{position:absolute;inset:-2%;opacity:0;transition:opacity 1.5s ease;display:flex;align-items:center;justify-content:flex-end;overflow:hidden}.hero-slide.active{opacity:1}.hero-slide img{width:67%;height:100%;object-fit:contain;object-position:center right;animation:kenburns 11s ease-in-out infinite alternate}.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 5%,transparent 58%),linear-gradient(0deg,var(--ink) 0%,transparent 18%)}@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.035)}}.hero-content{position:relative;z-index:4;padding-top:84px}.eyebrow{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold2);margin-bottom:24px}.eyebrow::before{content:"";width:52px;height:1px;background:var(--gold)}.hero h1{font-family:var(--display);font-size:clamp(58px,8.6vw,144px);line-height:.84;margin:0;letter-spacing:.035em;font-weight:500}.hero h1 em{font-family:var(--serif);font-weight:400;display:block;color:var(--gold2);font-size:.73em;letter-spacing:.08em}.hero-copy{max-width:720px;margin-top:30px;font-family:var(--serif);font-size:clamp(21px,2vw,32px);line-height:1.35;color:rgba(243,233,214,.87)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border:1px solid var(--gold);font-size:10px;letter-spacing:.18em;text-transform:uppercase;transition:.3s;cursor:pointer;background:none;color:var(--bone)}.btn.primary{background:var(--gold);color:var(--ink)}.hero-number{position:absolute;right:3.5%;bottom:34px;z-index:4;font-family:var(--display);font-size:11px;letter-spacing:.2em;color:var(--gold2)}
.section{position:relative;padding:150px 0}.section-kicker{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold2)}.section h2{font-family:var(--display);font-size:clamp(42px,6vw,88px);line-height:1.02;font-weight:500;letter-spacing:.025em;margin:16px 0 24px}.section h2 em{font-family:var(--serif);font-weight:400;color:var(--gold2)}.intro-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:90px;align-items:center}.visual-stack{position:relative;min-height:760px}.visual-main{position:absolute;inset:0 19% 0 0;border:1px solid var(--line);padding:16px}.visual-main img{width:100%;height:100%;object-fit:contain;background:#0b0806}.visual-float{position:absolute;width:44%;right:0;bottom:-30px;border:1px solid var(--gold);padding:9px;background:var(--ink);box-shadow:0 25px 60px rgba(0,0,0,.5)}.visual-float img{aspect-ratio:3/4;object-fit:contain;background:#080604}.prose .lead{font-family:var(--serif);font-size:29px;line-height:1.45;color:#f6ead5}.prose p{color:var(--muted);line-height:1.9;font-size:14px}.quote{border-left:1px solid var(--gold);padding:18px 0 18px 28px;margin:36px 0;font-family:var(--serif);font-style:italic;font-size:24px;color:var(--gold2)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px}.stat{background:var(--ink);padding:25px}.stat strong{font-family:var(--display);font-size:35px;color:var(--gold2);display:block}.stat span{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.live{background:linear-gradient(180deg,#0b0806 0%,#14100d 50%,#0b0806 100%)}.live-head{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:end;margin-bottom:60px}.live-head p{color:var(--muted);font-size:14px;line-height:1.8}.live-stage{display:grid;grid-template-columns:1.25fr .75fr;gap:20px}.live-card{position:relative;border:1px solid var(--line);overflow:hidden;min-height:630px;background:#050403}.live-card img{width:100%;height:100%;object-fit:contain}.live-label{position:absolute;left:20px;right:20px;bottom:20px;padding:15px 17px;background:rgba(14,11,8,.8);backdrop-filter:blur(12px);border:1px solid rgba(232,200,120,.18);display:flex;justify-content:space-between;gap:20px}.live-label span{font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold2)}.live-label b{font-family:var(--serif);font-size:19px;font-weight:500}.timeline{margin-top:70px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}.moment{padding:24px 18px;border-right:1px solid var(--line);min-height:170px}.moment b{display:block;font-family:var(--display);color:var(--gold2);font-size:22px;margin-bottom:14px}.moment p{font-size:12px;line-height:1.6;color:var(--muted)}
.music{background:radial-gradient(circle at 20% 40%,rgba(179,77,33,.12),transparent 35%),var(--ink)}.music-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:80px;align-items:start}.song-list{border-top:1px solid var(--line)}.song{padding:21px 2px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:16px}.song i{font-family:var(--display);font-style:normal;color:var(--gold)}.song b{font-family:var(--serif);font-size:21px;font-weight:500}.song small{color:var(--dust);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.spotify-box{border:1px solid var(--line);padding:18px;background:#0a0705}.spotify-box iframe{border:0;width:100%;height:352px}
.archive-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:34px}.archive-head p{max-width:520px;color:var(--muted);line-height:1.7;font-size:13px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}.filter{background:none;color:var(--bone);border:1px solid rgba(232,200,120,.25);padding:10px 13px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}.filter.active,.filter:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}.archive-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 4px 24px}.archive-card{flex:0 0 min(370px,78vw);scroll-snap-align:start;background:#090705;border:1px solid var(--line);color:var(--bone);padding:0;text-align:left;cursor:pointer}.archive-media{display:block;height:490px;overflow:hidden;background:#060504}.archive-media img{width:100%;height:100%;object-fit:contain}.archive-info{padding:16px 17px;display:block}.archive-info small{display:block;color:var(--gold);font-size:8px;letter-spacing:.17em;text-transform:uppercase;margin-bottom:7px}.archive-info b{font-family:var(--serif);font-weight:500;font-size:18px}
.offer{background:#0a0705;border-block:1px solid var(--line)}.offer-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:center}.offer-photo{height:700px;border:1px solid var(--line);padding:14px;background:#060504}.offer-photo img{width:100%;height:100%;object-fit:contain}.format-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:34px;border:1px solid var(--line)}.format{padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.format:nth-child(2n){border-right:0}.format:nth-last-child(-n+2){border-bottom:0}.format span{font-family:var(--display);font-size:10px;color:var(--gold)}.format h3{font-family:var(--serif);font-size:25px;margin:10px 0 8px}.format p{font-size:12px;line-height:1.6;color:var(--muted)}
.press{background:linear-gradient(135deg,#0e0b08,#1b110c)}.press-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.press-card{position:relative;border:1px solid var(--gold);padding:50px;background:rgba(255,255,255,.015)}.socials{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:32px}.social{border:1px solid var(--line);padding:16px 10px;text-align:center;font-size:9px;letter-spacing:.14em;text-transform:uppercase}.footer{padding:80px 0 35px;border-top:1px solid var(--line);text-align:center}.footer img{width:150px;margin:0 auto 18px}.footer p{font-family:var(--serif);font-size:28px}.footer small{color:var(--dust);font-size:9px;letter-spacing:.15em;text-transform:uppercase}.lightbox{position:fixed;inset:0;background:rgba(5,4,3,.96);z-index:2000;display:none;align-items:center;justify-content:center;padding:30px}.lightbox.open{display:flex}.lightbox img{max-width:92vw;max-height:83vh;object-fit:contain}.lightbox button{position:absolute;right:24px;top:20px;background:none;border:0;color:var(--bone);font-size:34px}.lightbox p{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-family:var(--serif);font-size:18px;color:var(--gold2)}
@media(max-width:980px){.shell{width:min(100% - 34px,900px)}.nav,.head-cta{display:none}.menu{display:block}.nav.open{display:flex;position:fixed;inset:84px 0 auto 0;padding:26px 28px;background:rgba(14,11,8,.96);flex-direction:column;align-items:flex-start}.hero-slide img{width:100%;opacity:.58}.hero::before{background:linear-gradient(90deg,rgba(14,11,8,.96),rgba(14,11,8,.48))}.intro-grid,.live-head,.music-grid,.offer-grid,.press-grid{grid-template-columns:1fr;gap:44px}.visual-stack{min-height:640px}.live-stage{grid-template-columns:1fr}.timeline{grid-template-columns:1fr 1fr}.archive-head{display:block}.offer-photo{height:590px}}
@media(max-width:620px){.site-head{height:72px}.head-inner{width:calc(100% - 28px)}.brand span{display:none}.section{padding:105px 0}.hero h1{font-size:59px}.hero-copy{font-size:22px}.visual-stack{min-height:520px}.stats{grid-template-columns:1fr}.timeline{grid-template-columns:1fr}.format-grid{grid-template-columns:1fr}.archive-media{height:430px}.socials{grid-template-columns:1fr 1fr}.press-card{padding:30px}.offer-photo{height:520px}}


/* ============================================================
   EFECTOS INTERACTIVOS RESTAURADOS
   No cambian layout ni contenido del CMS.
   ============================================================ */
.cursor-glow{
  position:fixed;
  width:420px;
  height:420px;
  left:-500px;
  top:-500px;
  border-radius:50%;
  pointer-events:none;
  z-index:3;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(201,162,75,.10),rgba(201,162,75,.035) 32%,transparent 68%);
  filter:blur(10px);
  opacity:0;
  transition:opacity .35s ease;
  mix-blend-mode:screen;
}
.cursor-glow.visible{opacity:1}

.btn,.head-cta,.social,.filter{
  transition:transform .28s ease,background .28s ease,border-color .28s ease,
             box-shadow .28s ease,color .28s ease,opacity .28s ease;
}
.btn:hover,.head-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.30);
}
.social:hover{
  transform:translateY(-3px);
  border-color:rgba(232,200,120,.62);
  background:rgba(201,162,75,.07);
}
.brand img{
  transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .35s ease;
}
.brand:hover img{
  transform:translateY(-2px) scale(1.035);
  filter:drop-shadow(0 8px 16px rgba(201,162,75,.18));
}

.tilt-react{
  --tilt-x:0deg;
  --tilt-y:0deg;
  --lift:0px;
  transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
  transform-style:preserve-3d;
  transition:transform .20s ease-out,border-color .3s ease,box-shadow .3s ease;
  will-change:transform;
}
.tilt-react:hover{
  --lift:-4px;
  border-color:rgba(232,200,120,.62)!important;
  box-shadow:0 22px 55px rgba(0,0,0,.28);
}
.tilt-react img{
  transition:filter .35s ease,transform .45s cubic-bezier(.2,.7,.2,1);
}
.tilt-react:hover img{
  filter:brightness(1.035) contrast(1.015);
}

.parallax-react{
  transform:translateY(var(--parallax-y,0px));
  will-change:transform;
}

.hero-slide img{
  animation:kenburns 11s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenburns{
  from{transform:translate(var(--hero-x,0px),var(--hero-y,0px)) scale(1)}
  to{transform:translate(var(--hero-x,0px),var(--hero-y,0px)) scale(1.038)}
}

.archive-card{
  transition:transform .30s cubic-bezier(.2,.7,.2,1),border-color .3s ease,
             box-shadow .3s ease,opacity .3s ease;
}
.archive-track{cursor:grab}
.archive-track.dragging{
  cursor:grabbing;
  scroll-snap-type:none;
  user-select:none;
}
.archive-track.dragging .archive-card{pointer-events:none}

.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .78s ease,transform .78s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{
  opacity:1;
  transform:none;
}

.live{overflow:hidden}
.stage-beam{
  position:absolute;
  width:8vw;
  min-width:72px;
  height:118%;
  top:-12%;
  filter:blur(22px);
  opacity:.065;
  transform-origin:top;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(180deg,rgba(232,200,120,.9),rgba(201,162,75,.18) 45%,transparent 78%);
}
.live>.shell{position:relative;z-index:1}
.beam-1{left:10%;transform:rotate(16deg);animation:beamOne 7s ease-in-out infinite alternate}
.beam-2{left:48%;transform:rotate(-9deg);animation:beamTwo 8s ease-in-out infinite alternate}
.beam-3{right:9%;transform:rotate(12deg);animation:beamOne 9s ease-in-out infinite alternate-reverse}
@keyframes beamOne{to{transform:rotate(-9deg) translateX(42px);opacity:.13}}
@keyframes beamTwo{to{transform:rotate(13deg) translateX(-34px);opacity:.115}}

@media (hover:none),(pointer:coarse){
  .cursor-glow{display:none}
  .tilt-react{transform:none!important}
  .tilt-react:hover{box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
  .cursor-glow,.stage-beam{display:none!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .parallax-react,.tilt-react{transform:none!important}
  .hero-slide img{animation:none!important;transform:none!important}
}


/* ============================================================
   PROFUNDIDAD CRUZADA — FOTO GRANDE / RETRATO FLOTANTE
   Restaura el intercambio frente ↔ fondo de la versión original.
   ============================================================ */
.visual-stack{
  perspective:1400px;
  transform-style:preserve-3d;
  isolation:isolate;
}
.visual-main,
.visual-float{
  transform-style:preserve-3d;
  will-change:transform,filter,box-shadow;
  transition:
    transform .72s cubic-bezier(.18,.78,.2,1),
    filter .55s ease,
    box-shadow .55s ease,
    opacity .55s ease,
    border-color .4s ease;
}

/* El parallax sigue funcionando, pero ahora se combina con profundidad. */
.visual-main.depth-front{
  z-index:6;
  transform:
    translate3d(10px, calc(var(--parallax-y,0px) - 8px), 95px)
    rotateY(1.25deg)
    scale(1.018);
  filter:brightness(1.045) saturate(1.025);
  box-shadow:0 34px 78px rgba(0,0,0,.42);
  border-color:rgba(232,200,120,.68);
}
.visual-main.depth-back{
  z-index:2;
  transform:
    translate3d(-8px, calc(var(--parallax-y,0px) + 5px), -46px)
    rotateY(-1deg)
    scale(.985);
  filter:brightness(.88) saturate(.92);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}

.visual-float.depth-front{
  z-index:8;
  transform:
    translate3d(8px, -8px, 125px)
    rotateY(-1.8deg)
    rotateZ(.2deg)
    scale(1.045);
  filter:brightness(1.06) saturate(1.04);
  box-shadow:0 38px 82px rgba(0,0,0,.52);
  border-color:rgba(232,200,120,.82);
}
.visual-float.depth-back{
  z-index:1;
  transform:
    translate3d(-16px, 8px, -62px)
    rotateY(1.25deg)
    scale(.94);
  filter:brightness(.80) saturate(.88);
  box-shadow:0 12px 36px rgba(0,0,0,.24);
}

/* Pequeña respuesta adicional al cursor sin perder la jerarquía de profundidad. */
.visual-stack:hover .depth-front img{
  transform:scale(1.012);
}
.visual-stack .depth-back img{
  opacity:.94;
}

@media (hover:none),(pointer:coarse){
  .visual-main.depth-front{
    transform:translate3d(8px,-5px,70px) scale(1.012);
  }
  .visual-main.depth-back{
    transform:translate3d(-5px,4px,-30px) scale(.99);
  }
  .visual-float.depth-front{
    transform:translate3d(5px,-5px,90px) scale(1.03);
  }
  .visual-float.depth-back{
    transform:translate3d(-10px,6px,-38px) scale(.955);
  }
}
@media(prefers-reduced-motion:reduce){
  .visual-main,.visual-float{
    transition:none!important;
  }
  .visual-main.depth-front,
  .visual-main.depth-back,
  .visual-float.depth-front,
  .visual-float.depth-back{
    transform:none!important;
    filter:none!important;
  }
}


/* ============================================================
   MOVIMIENTO UNIVERSAL DE FOTOGRAFÍAS — V3
   Todas las fotos principales reaccionan al mouse.
   ============================================================ */
.photo-react{
  --photo-x:0px;
  --photo-y:0px;
  overflow:hidden;
}
.photo-react img{
  transform:translate3d(var(--photo-x),var(--photo-y),0) scale(1.012);
  transition:
    transform .18s ease-out,
    filter .35s ease,
    opacity .35s ease;
  will-change:transform;
}
.photo-react:hover img{
  transform:translate3d(var(--photo-x),var(--photo-y),0) scale(1.035);
}

/* En vivo: un poco más de profundidad para que sí se note. */
.live-card.photo-react{
  transform:
    perspective(1200px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateY(var(--lift,0px));
}
.live-card.photo-react:hover{
  --lift:-7px;
  box-shadow:0 30px 70px rgba(0,0,0,.38);
}

/* Galería: movimiento visible pero controlado. */
.archive-card.photo-react{
  transform:
    perspective(1000px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateY(var(--lift,0px));
}
.archive-card.photo-react:hover{
  --lift:-8px;
  box-shadow:0 24px 60px rgba(0,0,0,.36);
}

/* Foto de formatos y press card. */
.offer-photo.photo-react,
.press-card.photo-react{
  transform:
    perspective(1200px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateY(var(--lift,0px));
}
.offer-photo.photo-react:hover,
.press-card.photo-react:hover{
  --lift:-6px;
}

/* La pareja inicial mantiene su profundidad cruzada;
   solo el contenido de la foto responde al cursor. */
.visual-main.photo-react,
.visual-float.photo-react{
  overflow:hidden;
}

/* En dispositivos táctiles evitamos movimientos erráticos. */
@media (hover:none),(pointer:coarse){
  .photo-react img{
    transform:none!important;
  }
  .live-card.photo-react,
  .archive-card.photo-react,
  .offer-photo.photo-react,
  .press-card.photo-react{
    transform:none!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .photo-react img{
    transform:none!important;
    transition:none!important;
  }
}


/* ============================================================
   V4 — CARRUSEL HORIZONTAL RESTAURADO
   El carrusel conserva hover en cada foto sin perder scroll/drag.
   ============================================================ */
.archive-track{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:16px;
  width:100%;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  cursor:grab;
  scrollbar-width:none;
  transform:none!important;
}
.archive-track::-webkit-scrollbar{display:none}

.archive-track.dragging{
  cursor:grabbing;
  scroll-snap-type:none;
  scroll-behavior:auto;
}

/* Las tarjetas nunca se encogen ni saltan a otra fila. */
.archive-card,
.archive-card.photo-react{
  flex:0 0 min(370px,78vw)!important;
  width:min(370px,78vw);
  scroll-snap-align:start;
  scroll-snap-stop:normal;
}

/* El movimiento 3D queda dentro de cada tarjeta, no sobre el carrusel. */
.archive-card.photo-react{
  position:relative;
}
.archive-card.photo-react:hover{
  --lift:-7px;
}

/* Durante el drag no se aplica tilt, para que el arrastre sea limpio. */
.archive-track.dragging .archive-card{
  transform:none!important;
  transition:none!important;
}
.archive-track.dragging .archive-card img{
  transform:none!important;
  transition:none!important;
}

/* En móvil el gesto horizontal queda reservado al carrusel. */
@media (hover:none),(pointer:coarse){
  .archive-track{
    touch-action:pan-x;
    scroll-snap-type:x mandatory;
  }
  .archive-card,
  .archive-card.photo-react{
    flex-basis:82vw!important;
    width:82vw;
  }
}


/* ============================================================
   V5 — FLECHAS DEL CARRUSEL RESTAURADAS
   ============================================================ */
.archive-carousel-shell{
  position:relative;
  width:100%;
  overflow:visible;
}

.archive-arrow{
  position:absolute;
  top:50%;
  z-index:30;
  width:54px;
  height:54px;
  margin-top:-27px;
  border-radius:50%;
  border:1px solid rgba(232,200,120,.58);
  background:rgba(14,11,8,.88);
  color:var(--gold2);
  display:grid;
  place-items:center;
  cursor:pointer;
  backdrop-filter:blur(10px);
  box-shadow:0 15px 38px rgba(0,0,0,.35);
  transition:
    transform .28s ease,
    background .28s ease,
    border-color .28s ease,
    opacity .28s ease,
    box-shadow .28s ease;
}

.archive-arrow span{
  display:block;
  font-family:Georgia,serif;
  font-size:42px;
  line-height:1;
  transform:translateY(-2px);
}

.archive-arrow.prev{left:-27px}
.archive-arrow.next{right:-27px}

.archive-arrow:hover{
  transform:scale(1.08);
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold2);
  box-shadow:0 18px 46px rgba(0,0,0,.45);
}

.archive-arrow.disabled{
  opacity:.22;
  pointer-events:none;
}

/* Mantiene espacio visual para que las flechas no tapen demasiado la foto. */
.archive-carousel-shell .archive-track{
  padding-left:4px;
  padding-right:4px;
}

@media(max-width:1050px){
  .archive-arrow.prev{left:8px}
  .archive-arrow.next{right:8px}
  .archive-arrow{
    width:46px;
    height:46px;
    margin-top:-23px;
    background:rgba(14,11,8,.76);
  }
  .archive-arrow span{font-size:36px}
}

@media(max-width:620px){
  .archive-arrow{
    width:42px;
    height:42px;
    margin-top:-21px;
  }
  .archive-arrow.prev{left:6px}
  .archive-arrow.next{right:6px}
  .archive-arrow span{font-size:33px}
}

@media(prefers-reduced-motion:reduce){
  .archive-arrow{transition:none!important}
}


/* ============================================================
   V6 — BOTÓN AUTO DEL CARRUSEL
   ============================================================ */
.archive-auto{
  position:absolute;
  right:10px;
  top:-52px;
  z-index:31;
  height:34px;
  padding:0 13px;
  border:1px solid rgba(232,200,120,.42);
  background:rgba(14,11,8,.72);
  color:var(--gold2);
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  backdrop-filter:blur(9px);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease,
    opacity .25s ease;
}

.archive-auto:hover{
  transform:translateY(-1px);
  border-color:rgba(232,200,120,.8);
}

.archive-auto .auto-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(201,162,75,.10);
  transition:opacity .25s ease,transform .25s ease;
}

.archive-auto.active{
  background:rgba(201,162,75,.10);
}

.archive-auto.active .auto-dot{
  animation:autoPulse 1.45s ease-in-out infinite;
}

.archive-auto.paused{
  opacity:.72;
}
.archive-auto.paused .auto-dot{
  opacity:.35;
  animation:none;
}

@keyframes autoPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 4px rgba(201,162,75,.10)}
  50%{transform:scale(1.18);box-shadow:0 0 0 7px rgba(201,162,75,.04)}
}

@media(max-width:620px){
  .archive-auto{
    right:4px;
    top:-46px;
    height:31px;
    padding:0 10px;
    font-size:8px;
  }
}

@media(prefers-reduced-motion:reduce){
  .archive-auto.active .auto-dot{animation:none!important}
}


/* ============================================================
   V7 — CANCIONES INTERACTIVAS
   ============================================================ */
.song-select{
  width:100%;
  background:transparent;
  color:var(--bone);
  border:0;
  border-bottom:1px solid var(--line);
  text-align:left;
  cursor:pointer;
  position:relative;
  transition:background .28s ease,transform .28s ease,border-color .28s ease;
}
.song-select:first-child{border-top:1px solid var(--line)}
.song-select:hover{
  background:rgba(201,162,75,.055);
  transform:translateX(5px);
  border-color:rgba(232,200,120,.42);
}
.song-select.active{
  background:linear-gradient(90deg,rgba(201,162,75,.11),transparent 72%);
  border-color:rgba(232,200,120,.52);
}
.song-select.active b{color:var(--gold2)}
.song-select.active i{color:var(--gold2)}
.song-action{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}
.song-action em{
  width:25px;
  height:25px;
  border:1px solid rgba(232,200,120,.36);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:8px;
  color:var(--gold2);
  opacity:.55;
  transform:scale(.92);
  transition:opacity .25s ease,transform .25s ease,background .25s ease,color .25s ease;
}
.song-select:hover .song-action em,
.song-select.active .song-action em{
  opacity:1;
  transform:scale(1);
}
.song-select.active .song-action em{
  background:var(--gold);
  color:var(--ink);
}
.spotify-box{
  transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease;
}
.spotify-box.player-pulse{
  border-color:rgba(232,200,120,.75);
  transform:translateY(-2px);
  box-shadow:0 24px 60px rgba(0,0,0,.32);
}
@media(max-width:620px){
  .song-select:hover{transform:none}
}

/* La rueda vertical vuelve a pertenecer a la página, no al carrusel. */
.archive-track{
  overscroll-behavior-x:auto;
}