:root{
  --bg:#08080a;
  --bg-2:#0d0d10;
  --panel:#121216;
  --panel-2:#16161b;
  --text:#f4f3f0;
  --muted:#a3a09b;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --roa:#9c5cff;
  --eladio:#e0a73a;
  --feid:#8fe000;
  --jhayco:#1fd6c9;
  --red:#ff3b30;
  --lime:#c6ff2e;
  --max:1200px;
  --focus:2px solid var(--lime);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;color:var(--text);background:var(--bg);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.6;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--lime);color:#08080a}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:var(--focus);outline-offset:3px;border-radius:4px}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  transform: translateY(-140%);
  padding: 10px 14px;
  border-radius: 999px;
  background: #c6ff2e;
  color: #08080a;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform .2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.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}

.mono{font-family:"Space Mono",monospace}

/* ---- líneas de rack: borde superior con muescas ---- */
.rack-rule{
  position:relative;height:1px;background:var(--line);
  width:min(calc(100% - 40px),var(--max));margin:0 auto;
}
.rack-rule::before,.rack-rule::after{
  content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--bg);
}
.rack-rule::before{left:0}
.rack-rule::after{right:0}

/* ---------- header ---------- */
.site-header{
  width:min(calc(100% - 32px),var(--max));height:70px;margin:14px auto 0;padding:0 22px;
  position:sticky;top:12px;z-index:40;display:flex;align-items:center;justify-content:space-between;
  border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(8,8,10,.9);backdrop-filter:blur(22px);
  box-shadow:0 1px 0 0 rgba(255,255,255,.04) inset,0 8px 32px rgba(0,0,0,.4);
}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.08em;font-size:.88rem}
.brand img{width:32px;height:32px;object-fit:contain}
.main-nav{display:flex;align-items:center;gap:22px}
.main-nav a{color:#b8b5b0;font-size:.82rem;font-weight:600;letter-spacing:.01em;transition:color .2s}
.main-nav a:hover{color:var(--text)}
.main-nav .nav-cta{color:#08080a;background:var(--lime);padding:10px 18px;border-radius:10px;font-weight:800;letter-spacing:.02em}
.menu-button{display:none}

/* ---------- secciones ---------- */
.section{width:min(calc(100% - 40px),var(--max));margin:0 auto;padding:120px 0}

.kicker{
  display:inline-flex;align-items:center;gap:11px;
  font-family:"Space Mono",monospace;font-size:.63rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent,var(--lime));
}
.kicker::before{content:"";width:30px;height:1px;background:currentColor;opacity:.6}

h1,h2,h3{margin-top:0}
h1,h2{font-family:"Archivo Black",Impact,sans-serif;line-height:.92;letter-spacing:-.045em;text-transform:uppercase}
h1{margin:20px 0 26px;font-size:clamp(2.8rem,7.8vw,6.2rem)}
h1 .stroke{-webkit-text-stroke:0;color:var(--lime);text-shadow:0 0 24px color-mix(in srgb,var(--lime) 18%,transparent)}
h2{margin:16px 0 22px;font-size:clamp(2.1rem,5vw,4.6rem)}
h2 .accent{color:var(--accent,var(--lime))}

.lead{max-width:540px;color:#d0cec8;font-size:clamp(1.02rem,1.9vw,1.18rem);line-height:1.72}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:54px;
  padding:0 26px;
  border:1px solid transparent;
  border-radius:13px;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .28s cubic-bezier(.22,1,.36,1),filter .28s,background .2s,border-color .2s,box-shadow .28s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.08)}
.btn:active{transform:scale(.97);transition-duration:.08s}
.btn-lime,
.btn-accent{color:#08080a}
.btn-lime{background:var(--lime)}
.btn-ghost{border-color:var(--line-2);background:transparent;color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-accent{background:var(--accent)}
.btn-red{color:#fff;background:linear-gradient(135deg,#c90e17,#ff3a2e)}
.btn-block{width:100%}

/* ---------- hero ---------- */
.hero{
  --hero-lime:#c6ff00;
  --hero-purple:#7c3aed;
  --hero-muted:#b8b8c0;
  min-height:min(830px,calc(100svh - 104px));
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(430px,.98fr);
  grid-template-rows:1fr auto;
  align-items:center;
  column-gap:clamp(36px,5vw,74px);
  row-gap:clamp(24px,3vw,36px);
  padding-top:62px;
  padding-bottom:34px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#08080d;
}
.hero.section{
  width:100%;max-width:none;margin:0;
  padding-left:max(20px,calc((100% - var(--max))/2));
  padding-right:max(20px,calc((100% - var(--max))/2));
}
.hero::before{
  content:"";position:absolute;inset:-12% -8% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 58% at 75% 43%,rgba(124,58,237,.36) 0%,rgba(94,43,184,.19) 31%,rgba(33,24,67,.085) 58%,transparent 84%),
    radial-gradient(ellipse 38% 44% at 92% 12%,rgba(36,70,160,.24) 0%,rgba(19,35,91,.13) 40%,transparent 78%),
    radial-gradient(ellipse 78% 72% at 58% 64%,rgba(111,52,214,.09) 0%,rgba(34,23,66,.05) 45%,transparent 82%),
    radial-gradient(ellipse 82% 94% at 2% 42%,rgba(255,255,255,.024) 0%,rgba(255,255,255,.01) 30%,transparent 72%),
    linear-gradient(115deg,#08080d 0%,#060608 34%,#090913 60%,#07070b 78%,#08080d 100%);
  filter:saturate(1.12) contrast(1.05);
  animation:heroAmbientDrift 40s ease-in-out infinite alternate,heroAmbientBreath 34s ease-in-out infinite;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.92;
  background-image:
    radial-gradient(ellipse 92% 78% at 59% 48%,transparent 0%,transparent 56%,rgba(0,0,0,.24) 80%,rgba(0,0,0,.58) 100%),
    linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.08) 33%,rgba(0,0,0,.07) 65%,rgba(0,0,0,.38) 100%),
    linear-gradient(180deg,rgba(0,0,0,.32) 0%,transparent 25%,transparent 68%,rgba(0,0,0,.48) 100%),
    radial-gradient(circle at 18% 30%,rgba(255,255,255,.05) 0 .34px,transparent .62px),
    radial-gradient(circle at 78% 64%,rgba(255,255,255,.04) 0 .3px,transparent .58px);
  background-size:100% 100%,100% 100%,100% 100%,2px 2px,3px 3px;
  background-position:center,center,center,0 0,1px 1px;
  animation:heroTextureDrift 46s linear infinite;
}
@keyframes heroAmbientDrift{
  from{transform:translate3d(-.35%,-.25%,0) scale(1)}
  to{transform:translate3d(.45%,.35%,0) scale(1.018)}
}
@keyframes heroAmbientBreath{
  0%,100%{opacity:.96}
  50%{opacity:1}
}
@keyframes heroTextureDrift{
  from{background-position:center,center,center,0 0,1px 1px}
  to{background-position:center,center,center,16px 10px,-12px 18px}
}
.hero-orbs{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hero-orb{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.hero-orb-a{
  width:420px;height:420px;left:6%;top:-10%;opacity:.5;
  background:radial-gradient(circle,rgba(124,58,237,.55),transparent 70%);
  animation:heroOrbA 22s ease-in-out infinite;
}
.hero-orb-b{
  width:340px;height:340px;right:4%;top:28%;opacity:.4;
  background:radial-gradient(circle,rgba(198,255,0,.32),transparent 70%);
  animation:heroOrbB 26s ease-in-out infinite;
}
.hero-orb-c{
  width:300px;height:300px;left:36%;bottom:-16%;opacity:.42;
  background:radial-gradient(circle,rgba(31,214,201,.3),transparent 70%);
  animation:heroOrbC 19s ease-in-out infinite;
}
@keyframes heroOrbA{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(70px,50px,0) scale(1.14)}
}
@keyframes heroOrbB{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-60px,-36px,0) scale(1.1)}
}
@keyframes heroOrbC{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(50px,-56px,0) scale(1.12)}
}
.hero-grain{
  position:absolute;inset:-30%;z-index:1;pointer-events:none;
  opacity:.35;mix-blend-mode:overlay;
  background-image:
    radial-gradient(circle at 22% 32%,rgba(255,255,255,.9) 0 1px,transparent 1px),
    radial-gradient(circle at 68% 18%,rgba(255,255,255,.7) 0 1px,transparent 1px),
    radial-gradient(circle at 42% 68%,rgba(255,255,255,.65) 0 1px,transparent 1px),
    radial-gradient(circle at 85% 74%,rgba(255,255,255,.8) 0 1px,transparent 1px),
    radial-gradient(circle at 12% 82%,rgba(255,255,255,.6) 0 1px,transparent 1px);
  background-size:64px 64px,89px 89px,71px 71px,97px 97px,77px 77px;
  animation:heroGrainFlicker .5s steps(1) infinite;
}
@keyframes heroGrainFlicker{
  0%{background-position:0 0,0 0,0 0,0 0,0 0}
  20%{background-position:-3px 2px,4px -3px,2px 3px,-4px -2px,3px 4px}
  40%{background-position:2px -4px,-2px 3px,-3px -2px,3px 2px,-2px -3px}
  60%{background-position:-4px 3px,3px 2px,4px -3px,-2px 4px,2px -4px}
  80%{background-position:3px -2px,-4px -3px,-2px 4px,4px -2px,-3px 2px}
  100%{background-position:0 0,0 0,0 0,0 0,0 0}
}
.hero-copy,.hero-art,.hero-proof{position:relative;z-index:2;min-width:0}
.hero-copy{--accent:var(--hero-lime);max-width:650px}
.hero-kicker{color:var(--hero-purple);margin-bottom:18px}
.hero-kicker::before{background:linear-gradient(90deg,var(--hero-purple),var(--hero-lime));opacity:.9}
.hero h1{
  max-width:760px;
  margin:18px 0 24px;
  font-size:clamp(3.15rem,5.5vw,5.7rem);
  text-shadow:0 20px 70px rgba(0,0,0,.55);
}
.hero h1 .stroke{
  color:var(--hero-lime);
  text-shadow:0 0 18px rgba(198,255,0,.2),0 12px 44px rgba(198,255,0,.08);
}
.hero .lead{
  max-width:560px;
  color:#d7d5d0;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}
.hero .btn-lime{
  background:linear-gradient(135deg,var(--hero-lime),#a8ff18);
  box-shadow:0 18px 42px rgba(198,255,0,.16),inset 0 1px 0 rgba(255,255,255,.28);
}
.hero .btn-ghost{
  background:rgba(10,10,16,.42);
  border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
}
.hero-art{position:relative;min-height:510px;display:grid;place-items:center;isolation:isolate;border-radius:28px}
.product-scene{
  position:relative;width:min(680px,100%);min-height:inherit;isolation:isolate;
  --scene-x:0deg;
  --scene-y:0deg;
  display:grid;place-items:center;perspective:1400px;
  animation:productPremiumDrift 12s ease-in-out infinite;
}
.product-scene::before{
  content:"";position:absolute;inset:3% -4% 9%;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 22% 44%,rgba(255,255,255,.13) 0 .42px,transparent .78px),
    radial-gradient(circle at 76% 27%,rgba(198,255,0,.12) 0 .36px,transparent .74px),
    radial-gradient(circle at 62% 70%,rgba(124,58,237,.15) 0 .34px,transparent .7px);
  background-size:38px 38px,52px 52px,44px 44px;
  mask-image:radial-gradient(ellipse at 58% 48%,#000 0%,rgba(0,0,0,.62) 42%,transparent 78%);
  opacity:.34;
  animation:productDust 38s linear infinite;
}
.product-scene::after{
  content:"";position:absolute;left:50%;top:49%;z-index:1;pointer-events:none;
  width:min(670px,104%);height:min(500px,80%);border-radius:50%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse at 52% 46%,rgba(255,255,255,.08),transparent 15%),
    radial-gradient(ellipse at 55% 50%,rgba(124,58,237,.18),rgba(45,25,92,.08) 38%,transparent 72%);
  filter:blur(28px);
  opacity:.58;
  animation:productCorePulse 8s ease-in-out infinite;
}
.product-glow{
  position:absolute;top:46%;left:53%;z-index:0;pointer-events:none;
  width:min(680px,110%);height:min(500px,86%);border-radius:50%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse at 50% 50%,rgba(124,58,237,.48),rgba(90,43,183,.22) 34%,rgba(32,22,72,.1) 60%,transparent 82%),
    radial-gradient(ellipse at 70% 28%,rgba(31,214,201,.1),transparent 58%);
  filter:blur(62px);
  opacity:.72;
  animation:productGlowBreath 10.5s ease-in-out infinite;
}
.product-orbit{
  position:absolute;left:50%;top:50%;z-index:2;pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%) rotateX(68deg) rotateZ(0deg);
  border:1px solid rgba(198,255,0,.13);
  box-shadow:0 0 38px rgba(124,58,237,.16),inset 0 0 32px rgba(124,58,237,.08);
  mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
}
.product-orbit-outer{
  width:min(610px,98%);height:300px;
  animation:productOrbit 18s linear infinite;
}
.product-orbit-inner{
  width:min(470px,76%);height:220px;
  border-color:rgba(124,58,237,.2);
  animation:productOrbit 13s linear infinite reverse;
}
.product-scanline{
  position:absolute;left:50%;top:49%;z-index:7;pointer-events:none;
  width:min(520px,86%);height:min(390px,66%);
  transform:translate(-50%,-50%) rotate(-5deg);
  background:linear-gradient(90deg,transparent 0%,rgba(198,255,0,.12) 48%,rgba(255,255,255,.24) 50%,rgba(124,58,237,.16) 52%,transparent 100%);
  filter:blur(10px);opacity:0;mix-blend-mode:screen;
  animation:productScanner 6.4s cubic-bezier(.22,1,.36,1) infinite;
}
.product-sparks{
  position:absolute;inset:0;z-index:6;pointer-events:none;
}
.product-sparks span{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--hero-lime);
  box-shadow:0 0 14px rgba(198,255,0,.78),0 0 28px rgba(124,58,237,.32);
  opacity:.55;
  animation:productSpark 7s ease-in-out infinite;
}
.product-sparks span:nth-child(1){left:18%;top:37%;animation-delay:-.8s}
.product-sparks span:nth-child(2){left:79%;top:30%;animation-delay:-2.4s;background:#d8ccff}
.product-sparks span:nth-child(3){left:69%;top:70%;animation-delay:-4.1s}
.product-sparks span:nth-child(4){left:31%;top:73%;animation-delay:-5.8s;background:#1fd6c9}
.product-sparks span:nth-child(5){left:88%;top:56%;animation-delay:-3.2s;background:#d8ccff}
.product-platform{
  position:absolute;left:50%;bottom:10.5%;z-index:2;pointer-events:none;
  width:min(620px,102%);height:156px;border-radius:50%;
  transform:translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 50%,rgba(124,58,237,.42),rgba(91,43,180,.22) 38%,rgba(12,12,18,.86) 64%,transparent 78%),
    linear-gradient(90deg,transparent 0%,rgba(198,255,0,.16) 45%,rgba(124,58,237,.26) 52%,rgba(31,214,201,.11) 63%,transparent 100%);
  filter:blur(2px);
  opacity:.7;
}
.product-shadow{
  position:absolute;left:51.5%;bottom:16%;z-index:3;pointer-events:none;
  width:min(530px,82%);height:74px;border-radius:50%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(0,0,0,.68),rgba(0,0,0,.28) 48%,transparent 74%);
  filter:blur(18px);opacity:.82;
}
.product-pack{
  position:absolute;top:49%;left:50%;z-index:10;
  width:min(382px,68%);aspect-ratio:1;border-radius:22px;overflow:hidden;
  background:#050506;
  backface-visibility:hidden;
  will-change:transform,filter;
  /* posición de reposo = imagen "frente"; sirve de estado fijo cuando
     prefers-reduced-motion desactiva la animación de abajo.
     Ojo: NO usamos transform-style:preserve-3d ni opacity animada aquí.
     Ambos obligan al navegador a "aplanar" la tarjeta en una capa aparte,
     lo que rompe el orden de profundidad real y hace que las tarjetas de
     atrás se vean translúcidas por delante. El orden de apilado lo decide
     el z-index (salto instantáneo, sin mezcla), y rotateY/translateZ solo
     aportan la perspectiva visual de cada tarjeta. */
  transform:translate(-50%,-52%) translateZ(70px) scale(1.08) rotateY(0deg) rotateZ(-1.5deg);
  filter:brightness(1.05) saturate(1.08);
  box-shadow:0 45px 110px rgba(0,0,0,.72),0 0 70px rgba(124,58,237,.35),0 0 0 1px rgba(255,255,255,.14);
  animation:productOrbitCard 18s cubic-bezier(.22,1,.36,1) infinite;
}
.product-scene:hover .product-pack,
.product-scene:hover .pack-float{animation-play-state:paused}
.product-pack::before{
  content:"";position:absolute;inset:-36%;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.04) 43%,rgba(255,255,255,.28) 50%,rgba(198,255,0,.09) 56%,transparent 64%);
  transform:translateX(-58%) rotate(9deg);
  mix-blend-mode:screen;opacity:.65;
  animation:packLightSweep 7.4s cubic-bezier(.22,1,.36,1) infinite;
}
.product-pack::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(124,58,237,.1);
}
.pack-float{position:absolute;inset:0;animation:packIdleBob 7.6s ease-in-out infinite}
.pack-float img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.pack-float-a{animation-duration:7.2s;animation-delay:0s}
.pack-float-b{animation-duration:8.4s;animation-delay:-2.1s}
.pack-float-c{animation-duration:7.8s;animation-delay:-4.3s}
.pack-float-d{animation-duration:8.9s;animation-delay:-6.2s}
@keyframes packIdleBob{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  50%{transform:translateY(-5px) rotate(.5deg) scale(1.012)}
}

/* ── Carrusel editorial: 4 posiciones en círculo, bucle continuo ──
   frente(0%) → zoom-push(≈22%) → derecha(25%) → fondo(50%) →
   izquierda(75%) → zoom-push(≈97%) → frente(100%=0%)
   cada tramo asentado dura ~3.5s y cada transición ~1s (18s ÷ 4).
   .pack-main/side/back/mid fijan el desfase (animation-delay) para que
   las 4 carátulas estén siempre repartidas en las 4 fases, y además
   declaran su propia posición estática de reposo — es el fallback que
   se ve si prefers-reduced-motion desactiva la animación de abajo. */
.pack-main{animation-delay:0s}
.pack-side{
  animation-delay:-4.5s;z-index:4;
  transform:translate(calc(-50% + 134px),calc(-50% + 24px)) translateZ(-42px) scale(.8) rotateY(-30deg) rotateZ(7deg);
  filter:brightness(.4) saturate(.72) blur(1.6px);
  box-shadow:0 26px 70px rgba(0,0,0,.6);
}
.pack-back{
  animation-delay:-9s;z-index:2;
  transform:translate(calc(-50% + 2px),calc(-50% - 46px)) translateZ(-125px) scale(.62) rotateY(6deg) rotateZ(2deg);
  filter:brightness(.22) saturate(.55) blur(2.6px);
  box-shadow:0 20px 50px rgba(0,0,0,.55);
}
.pack-mid{
  animation-delay:-13.5s;z-index:6;
  transform:translate(calc(-50% - 130px),calc(-50% + 22px)) translateZ(-42px) scale(.8) rotateY(30deg) rotateZ(-7deg);
  filter:brightness(.4) saturate(.72) blur(1.6px);
  box-shadow:0 26px 70px rgba(0,0,0,.6);
}
/* z-index no se puede interpolar: salta de golpe en cada punto del keyframe.
   Como salta entre valores 100% OPACOS (sin opacity/preserve-3d de por medio),
   el salto no se ve como una mezcla translúcida — una tarjeta simplemente
   pasa a pintarse encima o debajo de otra, limpio y sin fantasmas. */
@keyframes productOrbitCard{
  0%,19.44%{
    z-index:10;
    transform:translate(-50%,-52%) translateZ(70px) scale(1.08) rotateY(0deg) rotateZ(-1.5deg);
    filter:brightness(1.05) saturate(1.08);
    box-shadow:0 45px 110px rgba(0,0,0,.72),0 0 70px rgba(124,58,237,.35),0 0 0 1px rgba(255,255,255,.14);
  }
  22%{
    z-index:10;
    transform:translate(calc(-50% + 58px),-56%) translateZ(150px) scale(1.24) rotateY(-14deg) rotateZ(-3deg);
    filter:brightness(1.18) saturate(1.2);
    box-shadow:0 55px 130px rgba(0,0,0,.75),0 0 92px rgba(124,58,237,.46);
  }
  25%,44.44%{
    z-index:4;
    transform:translate(calc(-50% + 134px),calc(-50% + 24px)) translateZ(-42px) scale(.8) rotateY(-30deg) rotateZ(7deg);
    filter:brightness(.4) saturate(.72) blur(1.6px);
    box-shadow:0 26px 70px rgba(0,0,0,.6);
  }
  50%,69.44%{
    z-index:2;
    transform:translate(calc(-50% + 2px),calc(-50% - 46px)) translateZ(-125px) scale(.62) rotateY(6deg) rotateZ(2deg);
    filter:brightness(.22) saturate(.55) blur(2.6px);
    box-shadow:0 20px 50px rgba(0,0,0,.55);
  }
  75%,94.44%{
    z-index:6;
    transform:translate(calc(-50% - 130px),calc(-50% + 22px)) translateZ(-42px) scale(.8) rotateY(30deg) rotateZ(-7deg);
    filter:brightness(.4) saturate(.72) blur(1.6px);
    box-shadow:0 26px 70px rgba(0,0,0,.6);
  }
  97%{
    z-index:10;
    transform:translate(calc(-50% - 58px),-56%) translateZ(150px) scale(1.24) rotateY(14deg) rotateZ(3deg);
    filter:brightness(1.18) saturate(1.2);
    box-shadow:0 55px 130px rgba(0,0,0,.75),0 0 92px rgba(124,58,237,.46);
  }
  100%{
    z-index:10;
    transform:translate(-50%,-52%) translateZ(70px) scale(1.08) rotateY(0deg) rotateZ(-1.5deg);
    filter:brightness(1.05) saturate(1.08);
    box-shadow:0 45px 110px rgba(0,0,0,.72),0 0 70px rgba(124,58,237,.35),0 0 0 1px rgba(255,255,255,.14);
  }
}
.product-label{
  position:absolute;left:50%;bottom:5.5%;z-index:20;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:9px 16px 8px;border-radius:999px;border:1px solid rgba(124,58,237,.3);
  background:linear-gradient(135deg,rgba(8,8,13,.82),rgba(22,16,40,.66));
  box-shadow:0 18px 40px rgba(0,0,0,.42),0 0 28px rgba(124,58,237,.14),inset 0 1px 0 rgba(255,255,255,.07);
  color:#d8ccff;font-family:"Space Mono",monospace;font-size:.61rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;backdrop-filter:blur(14px);
  animation:productLabelFloat 5.6s ease-in-out infinite;
}
.product-label-dot{
  width:6px;height:6px;border-radius:50%;background:var(--hero-lime);
  box-shadow:0 0 14px rgba(198,255,0,.42);
}
.hero-proof{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr 1.3fr;
  align-items:center;
  gap:1px;
  margin-top:-6px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(12,12,18,.64),rgba(18,18,28,.36));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 60px rgba(0,0,0,.24);
  overflow:hidden;
  backdrop-filter:blur(18px);
}
.hero-proof-item{
  min-height:72px;
  display:flex;align-items:center;gap:10px;
  padding:15px 22px;
  color:#f6f5f0;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  border-left:1px solid rgba(255,255,255,.08);
}
.hero-proof-item:first-child{border-left:0}
.hero-proof-social{color:var(--hero-muted)}
.hero-proof-main{color:#f5f3ee}
.hero-proof-icon{
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  color:#d7b8ff;
  border:1px solid rgba(124,58,237,.32);
  background:rgba(124,58,237,.12);
  box-shadow:0 0 24px rgba(124,58,237,.12);
}
.hero-proof-item.hero-proof-compat{font-size:.7rem;letter-spacing:.01em}
.daw-line{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.daw-and{color:var(--muted);font-size:.64rem;font-weight:700;margin:0 1px}
.daw-badge{
  flex:none;width:22px;height:22px;padding:4px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;border-radius:7px;
  background:linear-gradient(160deg,rgba(124,58,237,.24),rgba(124,58,237,.09));
  border:1px solid rgba(124,58,237,.4);
  box-shadow:0 0 10px rgba(124,58,237,.16),inset 0 1px 0 rgba(255,255,255,.08);
}
.daw-badge img{display:block;width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1);opacity:.94}
@keyframes productPremiumDrift{
  0%,100%{transform:rotateX(var(--scene-y)) rotateY(var(--scene-x)) translate3d(0,-2px,0)}
  50%{transform:rotateX(var(--scene-y)) rotateY(var(--scene-x)) translate3d(0,4px,0)}
}
@keyframes productCorePulse{
  0%,100%{opacity:.5;filter:blur(28px) saturate(1)}
  50%{opacity:.7;filter:blur(32px) saturate(1.2)}
}
@keyframes productGlowBreath{
  0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(.992)}
  50%{opacity:.74;transform:translate(-50%,-50%) scale(1.012)}
}
@keyframes productOrbit{
  from{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(0deg)}
  to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(360deg)}
}
@keyframes productScanner{
  0%,22%{opacity:0;transform:translate(-86%,-50%) rotate(-5deg)}
  34%{opacity:.75}
  52%{opacity:.18}
  62%,100%{opacity:0;transform:translate(-12%,-50%) rotate(-5deg)}
}
@keyframes productSpark{
  0%,100%{transform:translate3d(0,0,0) scale(.8);opacity:.18}
  38%{opacity:.66}
  50%{transform:translate3d(10px,-20px,0) scale(1.18);opacity:.85}
  72%{opacity:.28}
}
@keyframes packLightSweep{
  0%,30%{transform:translateX(-62%) rotate(9deg);opacity:0}
  43%{opacity:.72}
  62%,100%{transform:translateX(62%) rotate(9deg);opacity:0}
}
@keyframes productLabelFloat{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-4px)}
}
@keyframes productDust{
  from{background-position:0 0,14px 8px,6px 20px}
  to{background-position:46px 34px,-38px 52px,34px -42px}
}
@media(max-width:1040px){
  .product-pack{width:min(335px,66%)}
  .hero-proof{grid-template-columns:repeat(2,1fr)}
  .hero-proof-item:nth-child(odd){border-left:0}
}
@media(max-width:780px){
  .product-glow{width:min(460px,92%);height:320px;filter:blur(56px);opacity:.62}
  .product-platform{bottom:11%;width:92%;height:118px}
  .product-shadow{bottom:16%;width:70%;height:54px}
  .product-pack{width:min(255px,62%);border-radius:18px}
  .hero-proof{grid-template-columns:1fr;gap:0}
  .hero-proof-item{border-left:0;border-top:1px solid rgba(255,255,255,.08);min-height:58px}
  .hero-proof-item:first-child{border-top:0}
}
@media(max-width:520px){
  .product-pack{width:min(215px,60%)}
  .product-label{bottom:4%;font-size:.55rem;padding:8px 12px 7px;letter-spacing:.12em}
}
@media(prefers-reduced-motion:reduce){
  .product-scene,.product-glow,.product-scene::before,.product-scene::after,
  .product-orbit,.product-scanline,.product-sparks span,.product-label,
  .product-pack,.product-pack::before,.pack-float{animation:none!important}
}

/* garra — firma */
.claw{position:absolute;pointer-events:none;opacity:.85}
.claw svg{display:block}

/* ---------- free kit (módulo destacado) ---------- */
.module{
  --accent:var(--roa);
  margin-top:0;padding:0;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:24px;overflow:hidden;
  display:grid;grid-template-columns:.92fr 1.08fr;
  background:
    radial-gradient(circle at 68% 42%,color-mix(in srgb,var(--roa) 8%,transparent),transparent 42%),
    linear-gradient(90deg,#050506 0%,#07050a 38%,#0b0712 62%,#111018 100%);
}
.module-media{
  position:relative;isolation:isolate;overflow:hidden;min-height:100%;
  display:grid;place-items:center;padding:clamp(12px,2vw,22px);
  background:radial-gradient(circle at 52% 48%,color-mix(in srgb,var(--roa) 15%,transparent),transparent 48%);
}
.module-media::before{
  content:"";position:absolute;inset:8% 6% 26%;z-index:0;border-radius:50%;
  background:radial-gradient(circle at 70% 38%,color-mix(in srgb,var(--roa) 22%,transparent),transparent 52%);
  filter:blur(20px);opacity:.45;
}
.module-media img{
  position:relative;z-index:1;width:min(100%,620px);height:auto;aspect-ratio:1/1;object-fit:contain;min-height:0;
  border-radius:18px;box-shadow:0 30px 86px rgba(0,0,0,.48);
}
.module-media::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,transparent 34%,rgba(12,9,16,.05) 48%,rgba(15,11,20,.16) 62%,rgba(17,14,22,.08) 78%,transparent 100%);
}
.module-body{padding:54px 58px;background:transparent}
.module-body .free-flag{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:6px;padding:6px 11px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
  font-family:"Space Mono",monospace;font-size:.64rem;font-weight:700;letter-spacing:.1em;
}
.module-body>p{color:#c2bfb9;font-size:1.02rem;max-width:520px}
.spec-list{margin:24px 0;padding:0;list-style:none}
.spec-list li{position:relative;padding:9px 0 9px 28px;color:#e1dfda;border-bottom:1px solid var(--line);font-size:.92rem}
.spec-list li::before{content:"▸";position:absolute;left:0;color:var(--accent);font-size:.8rem;top:11px}
.price-row{display:flex;align-items:baseline;gap:12px;margin:22px 0}
.price-row strong{font-family:"Archivo Black";font-size:2rem;line-height:1}
.price-row .note{color:var(--muted);font-size:.78rem;font-family:"Space Mono",monospace}
.module-body>.btn-accent{
  width:min(100%,460px);min-height:58px;padding:0 26px;justify-content:space-between;
  font-size:.94rem;box-shadow:0 18px 46px color-mix(in srgb,var(--accent) 24%,transparent);
}
/* ---------- bundle ---------- */
.bundle{--accent:var(--lime);margin-top:0;border:1px solid color-mix(in srgb,var(--lime) 24%,var(--line));border-radius:24px;overflow:hidden;background:linear-gradient(150deg,rgba(255,255,255,.03),rgba(255,255,255,.008))}
.bundle-banner{position:relative;background:#050506;border-bottom:1px solid color-mix(in srgb,var(--lime) 18%,var(--line))}
.bundle-banner img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.bundle-banner::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(to top,rgba(5,5,6,.55),transparent)}
.bundle-grid{padding:52px 58px 56px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(290px,.88fr);gap:54px;align-items:center}
.bundle-info{min-width:0}
.bundle-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-bottom:6px}
.pill{padding:6px 11px;border:1px solid color-mix(in srgb,var(--lime) 38%,transparent);border-radius:999px;color:var(--lime);font-family:"Space Mono",monospace;font-size:.62rem;font-weight:700;letter-spacing:.1em}
.bundle-artists{display:flex;flex-wrap:wrap;gap:6px 12px;margin:20px 0 0}
.bundle-artists span{font-family:"Archivo Black";font-size:1rem}
.bundle-artists .roa{color:var(--roa)}.bundle-artists .eladio{color:var(--eladio)}.bundle-artists .feid{color:var(--feid)}.bundle-artists .jhayco{color:var(--jhayco)}
.bundle-list{margin:22px 0 0;padding:0;list-style:none}
.bundle-list li{position:relative;padding:9px 0 9px 28px;color:#e1dfda;border-bottom:1px solid var(--line);font-size:.92rem}
.bundle-list li::before{content:"▸";position:absolute;left:0;color:var(--lime);font-size:.8rem;top:11px}
.buy-box{position:relative;padding:30px;border:1px solid color-mix(in srgb,var(--lime) 26%,var(--line));border-radius:18px;background:rgba(255,255,255,.025);min-width:0}
.buy-flag{display:inline-flex;padding:6px 10px;border-radius:6px;color:#08080a;background:var(--lime);font-family:"Space Mono",monospace;font-size:.6rem;font-weight:700;letter-spacing:.08em}
.price-cmp{margin:24px 0 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.price-cmp .was{display:flex;flex-direction:column;gap:2px}
.price-cmp .was span{color:#88857f;font-size:.72rem;font-family:"Space Mono",monospace}
.price-cmp .was del{color:#76736d;font-size:1rem}
.price-cmp .now{font-family:"Archivo Black";font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:.92}
.save{margin-bottom:20px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid color-mix(in srgb,var(--lime) 24%,transparent);border-radius:12px;background:color-mix(in srgb,var(--lime) 6%,transparent);flex-wrap:wrap}
.save span{color:#b0ada7;font-size:.68rem;font-weight:800;letter-spacing:.07em;font-family:"Space Mono",monospace}
.save strong{color:var(--lime);font-family:"Archivo Black";font-size:1.2rem}
.buy-note{display:block;width:100%;margin:8px 0 0;color:#a9ff1f;font-family:"Space Mono",monospace;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-align:center;text-transform:uppercase;text-wrap:balance}
.buy-box .fine{width:100%;margin:11px 0 0;color:var(--muted);font-size:.72rem;text-align:center;text-wrap:balance}

/* ---------- vocal chains: rack de fichas ---------- */
.chains{padding-top:120px}
.section-head{max-width:720px;margin-bottom:60px}
.section-head>p{color:#c8c5bf;font-size:1.02rem;max-width:580px;line-height:1.7}
.chains .section-head{margin-bottom:44px}
.chains-proof{
  width:100%;box-sizing:border-box;
  display:flex;align-items:center;gap:0;margin-bottom:64px;
  padding:16px 24px;border:1px solid rgba(255,255,255,.09);border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.014));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 36px rgba(0,0,0,.26),0 0 34px color-mix(in srgb,var(--roa) 6%,transparent);
}
.chains-proof-icon{
  flex:none;width:40px;height:40px;border-radius:11px;margin-right:14px;
  display:grid;place-items:center;color:#e3cfff;
  border:1px solid rgba(124,58,237,.42);
  background:linear-gradient(150deg,rgba(124,58,237,.24),rgba(183,255,22,.06));
  box-shadow:0 0 18px rgba(124,58,237,.18),inset 0 1px 0 rgba(255,255,255,.1);
}
.chains-proof-icon svg{width:17px;height:17px}
.chains-proof-num{flex:none;margin-right:18px;font-family:"Archivo Black";font-size:1.9rem;color:var(--text);line-height:1;letter-spacing:-.02em}
.chains-proof-divider{
  flex:none;width:1px;height:26px;align-self:center;margin-right:18px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.16),transparent);
}
.chains-proof-text{color:#d9d6d0;font-size:.94rem;line-height:1.4}

.chain-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.chain{
  --accent:var(--roa);position:relative;display:grid;grid-template-columns:46% 54%;min-height:380px;
  border:1px solid color-mix(in srgb,var(--accent) 13%,var(--line));border-radius:22px;
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%),
    var(--panel);
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.32);
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s ease,box-shadow .4s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.chain:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  box-shadow:0 24px 56px rgba(0,0,0,.4),0 0 34px color-mix(in srgb,var(--accent) 11%,transparent),inset 0 1px 0 rgba(255,255,255,.05);
}
.chain.roa{--accent:var(--roa)}
.chain.eladio{--accent:var(--eladio)}
.chain.feid{--accent:var(--feid)}
.chain.jhayco{--accent:var(--jhayco)}
.chain-img{position:relative;overflow:hidden}
.chain-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .7s cubic-bezier(.22,1,.36,1),filter .7s cubic-bezier(.22,1,.36,1)}
.chain:hover .chain-img img{transform:scale(1.04);filter:brightness(1.04) saturate(1.06)}
.chain-img::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.18) 48%,rgba(255,255,255,.04) 54%,transparent 62%);
  transform:translateX(-130%);
  transition:transform .85s cubic-bezier(.22,1,.36,1);
}
.chain:hover .chain-img::after{transform:translateX(130%)}
.chain-serial{
  position:absolute;left:14px;top:14px;z-index:3;
  display:block;color:rgba(255,255,255,.6);font-family:"Space Mono",monospace;font-size:.62rem;
  letter-spacing:.1em;opacity:0;transform:translateY(-4px);
  transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1);
}
.chain:hover .chain-serial{opacity:1;transform:translateY(0)}
.chain-badge{
  position:absolute;top:13px;right:13px;z-index:3;padding:6px 11px;border-radius:6px;color:#08080a;background:var(--accent);
  font-family:"Space Mono",monospace;font-size:.6rem;font-weight:700;letter-spacing:.06em;
  box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 40%,transparent);
  animation:chainBadgePulse 2.6s ease-in-out infinite;
}
.chain-body{padding:30px 30px 26px;display:flex;flex-direction:column;min-width:0}
.chain-daw{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.chain-daw span{
  display:inline-block;padding:6px 10px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:7px;
  color:var(--accent);font-family:"Space Mono",monospace;font-size:.6rem;font-weight:700;letter-spacing:.02em;
  background:color-mix(in srgb,var(--accent) 5%,transparent);
  transition:background-color .3s,transform .3s cubic-bezier(.22,1,.36,1);
}
.chain:hover .chain-daw span{background-color:color-mix(in srgb,var(--accent) 14%,transparent)}
.chain h3{
  position:relative;display:inline-block;margin:0 0 10px;
  font-family:"Archivo Black";font-size:1.85rem;text-transform:uppercase;letter-spacing:-.02em;line-height:1;color:var(--accent);
}
.chain h3::after{
  content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--accent);
  transition:width .4s cubic-bezier(.22,1,.36,1);
}
.chain:hover h3::after{width:100%}
.chain p.tl{color:#bdbab4;font-size:.92rem;line-height:1.55;margin:0}
.chain-social{
  display:inline-flex;align-items:center;gap:7px;flex:none;width:fit-content;
  margin-top:14px;padding:6px 12px 6px 10px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  color:#eae7e1;font-family:"Space Mono",monospace;font-size:.66rem;font-weight:700;letter-spacing:.03em;
}
.chain-social::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 65%,transparent);
}
.chain-listen{margin-top:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chain-listen:has(.play:not([hidden])){margin-top:16px}
.play{display:inline-flex;align-items:center;gap:8px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);border-radius:999px;padding:7px 13px 7px 9px;font-size:.74rem;font-weight:700;cursor:pointer;transition:background-color .25s,transform .25s cubic-bezier(.22,1,.36,1)}
.play:hover{background-color:color-mix(in srgb,var(--accent) 20%,transparent);transform:scale(1.03)}
.play[hidden]{display:none}
.play .ring{width:20px;height:20px;border-radius:50%;border:1.4px solid currentColor;display:grid;place-items:center;flex-shrink:0}
.play .ring::before{content:"";border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:1px}
.play.on .ring::before{content:"";width:7px;height:7px;border:0;background:currentColor;margin:0}
.chain-foot{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid rgba(255,255,255,.08)}
.chain-foot strong{flex:none;white-space:nowrap;font-family:"Archivo Black";font-size:1.42rem;letter-spacing:-.01em;color:#f4f3f0}
.chain-cta{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:12px 20px;border-radius:11px;
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);
  font-size:.78rem;font-weight:800;letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.22);
  transition:background-color .3s ease,border-color .3s ease,color .3s ease,transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
}
.chain-cta:hover{
  background-color:var(--accent);border-color:var(--accent);color:#08080a;
  transform:translateY(-2px);
  box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 38%,transparent);
}
@keyframes chainBadgePulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}
  50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 0%,transparent)}
}
.legal{width:100%;max-width:none;margin:26px auto 0;color:#a9a69f;text-align:center;font-size:.78rem;line-height:1.5;white-space:nowrap}

/* ---------- drum kit ---------- */
.drum{
  --accent:var(--red);margin-top:0;position:relative;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px;
  padding:48px 0 84px;
}
.drum-info .colab{
  display:inline-flex;gap:7px;align-items:center;
  font-family:"Space Mono",monospace;font-size:.68rem;font-weight:700;letter-spacing:.05em;
  color:#a9a6a1;text-transform:uppercase;
}
.drum-info .colab b{color:var(--red);font-weight:700}
.drum-info .kicker{margin-left:14px}
.drum-info h2{
  margin:16px 0 18px;
  font-size:clamp(2.7rem,4.3vw,4.3rem);
  line-height:.96;
  letter-spacing:-.025em;
  text-shadow:0 22px 60px rgba(0,0,0,.55);
}
.drum-info h2 .accent{color:var(--red);text-shadow:0 0 34px color-mix(in srgb,var(--red) 35%,transparent)}
.drum-info>p{color:#c8c5bf;font-size:1.02rem;line-height:1.65;max-width:500px}
.drum-tags{display:flex;flex-wrap:wrap;gap:10px;max-width:330px;margin:28px 0 30px}
.drum-tags span{
  padding:8px 14px;border:1px solid color-mix(in srgb,var(--red) 32%,transparent);border-radius:999px;
  color:#ffb3ac;background:linear-gradient(150deg,color-mix(in srgb,var(--red) 10%,transparent),rgba(255,255,255,.015));
  font-family:"Space Mono",monospace;font-size:.68rem;font-weight:700;letter-spacing:.02em;
  transition:background-color .3s ease,border-color .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.drum-tags span:hover{
  border-color:color-mix(in srgb,var(--red) 55%,transparent);
  background:color-mix(in srgb,var(--red) 16%,transparent);
  transform:translateY(-2px);
}
.drum-media{position:relative;isolation:isolate}
.drum-media img{
  position:relative;z-index:2;width:100%;border-radius:20px;
  box-shadow:0 36px 90px rgba(0,0,0,.65),0 0 0 1px rgba(255,90,80,.08);
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.drum-media:hover img{
  transform:translateY(-4px) scale(1.015);
  box-shadow:0 44px 110px rgba(0,0,0,.7),0 0 60px color-mix(in srgb,var(--red) 20%,transparent);
}
.drum-media::after{
  content:"";position:absolute;left:8%;right:8%;bottom:-4%;z-index:0;height:22%;
  background:radial-gradient(ellipse,rgba(0,0,0,.6),rgba(90,15,15,.16) 48%,transparent 74%);
  filter:blur(20px);pointer-events:none;
}
.drum-ring{position:absolute;inset:-8%;z-index:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--red) 32%,transparent),transparent 65%);filter:blur(26px);transition:opacity .5s ease}
#chains .glow-bg{inset:-80px -6vw;overflow:visible}
#chains .glow-bg::before{display:none}
#chains .glow-bg::after{display:none}
#drum .glow-bg{inset:-60px -4vw;overflow:visible}
#drum .glow-bg::before{left:8%;bottom:12%;width:min(34vw,400px);opacity:.56;filter:blur(110px)}
#drum .glow-bg::after{right:14%;bottom:6%;width:min(32vw,380px);opacity:.5;filter:blur(100px)}
.drum-price-wrap{display:inline-flex;flex-direction:column;margin-top:8px}
.drum-price-wrap .price-row{margin:0 0 20px}
.drum-price-wrap .price-row strong{font-size:2.2rem;text-shadow:0 14px 36px rgba(0,0,0,.5)}
.drum-price-wrap .price-row .note{
  padding:5px 10px;border:1px solid color-mix(in srgb,var(--red) 28%,transparent);border-radius:999px;
  background:color-mix(in srgb,var(--red) 6%,transparent);color:#ffb3ac;
}
.drum-price-wrap .btn-red{
  align-self:stretch;min-height:58px;
  background:linear-gradient(135deg,#e4141f 0%,#c90e17 55%,#8f0a10 100%);
  box-shadow:0 20px 50px rgba(201,14,23,.32),0 0 30px rgba(201,14,23,.14),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,filter .3s ease;
}
.drum-price-wrap .btn-red:hover{
  transform:translateY(-3px);
  box-shadow:0 30px 68px rgba(201,14,23,.46),0 0 46px rgba(201,14,23,.26),inset 0 1px 0 rgba(255,255,255,.26);
  filter:brightness(1.06);
}

/* ---------- proceso ---------- */
.flow{padding-top:40px}
.flow .glow-bg{inset:-60px -4vw;overflow:visible}
.flow .glow-bg::before{left:10%;top:0;width:min(30vw,360px);opacity:.24;filter:blur(90px)}
.flow .glow-bg::after{right:8%;bottom:0;width:min(28vw,340px);opacity:.2;filter:blur(80px)}
.flow .section-head{max-width:900px}
.flow .section-head h2{
  font-size:clamp(2.3rem,3.6vw,3.6rem);
  line-height:1;
  letter-spacing:-.02em;
}
.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:12px}
.flow-step{
  --accent:var(--lime);
  position:relative;min-height:200px;padding:30px 26px;
  border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));border-radius:18px;
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%),
    linear-gradient(150deg,rgba(255,255,255,.03),rgba(255,255,255,.006));
  box-shadow:0 16px 40px rgba(0,0,0,.28);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .35s cubic-bezier(.22,1,.36,1);
}
.flow-step:nth-child(2n){--accent:var(--roa)}
.flow-step:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  box-shadow:0 24px 54px rgba(0,0,0,.36),0 0 32px color-mix(in srgb,var(--accent) 14%,transparent);
}
.flow-step .n{
  display:block;font-family:"Archivo Black";font-size:2rem;color:var(--accent);letter-spacing:-.01em;line-height:1;
  text-shadow:0 0 24px color-mix(in srgb,var(--accent) 30%,transparent);
}
.flow-step h3{margin:22px 0 9px;font-size:1.04rem;font-weight:800;letter-spacing:-.01em;color:var(--text)}
.flow-step p{color:#b0ada7;font-size:.86rem;margin:0;line-height:1.6}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:.78fr 1.22fr;gap:64px;align-items:start}
.faq .glow-bg{inset:-60px -4vw;overflow:visible}
.faq .glow-bg::before{left:6%;top:10%;width:min(30vw,360px);opacity:.22;filter:blur(90px)}
.faq .glow-bg::after{right:10%;bottom:10%;width:min(26vw,320px);opacity:.18;filter:blur(80px)}
.faq .section-head{position:sticky;top:110px}
.faq .section-head h2{
  font-size:clamp(2.3rem,3.6vw,3.6rem);
  line-height:1;
  letter-spacing:-.02em;
}
.faq-list{
  border:1px solid rgba(255,255,255,.08);border-radius:18px;
  background:linear-gradient(150deg,rgba(255,255,255,.03),rgba(255,255,255,.006));
  box-shadow:0 16px 40px rgba(0,0,0,.26);
  overflow:hidden;
}
.faq-list details{border-bottom:1px solid rgba(255,255,255,.07)}
.faq-list details:last-child{border-bottom:none}
.faq-list summary{
  position:relative;padding:22px 64px 22px 26px;cursor:pointer;list-style:none;
  font-size:.98rem;font-weight:700;letter-spacing:-.005em;
  transition:color .25s ease,background-color .25s ease;
}
.faq-list summary:hover{background:color-mix(in srgb,var(--lime) 5%,transparent);color:var(--lime)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--lime) 34%,transparent);
  background:color-mix(in srgb,var(--lime) 6%,transparent);
  color:var(--lime);font-size:1.15rem;font-weight:400;font-family:"Space Mono",monospace;
  transition:background-color .3s ease,border-color .3s ease;
}
.faq-list summary:hover::after{border-color:color-mix(in srgb,var(--lime) 55%,transparent)}
.faq-list details[open] summary::after{content:"\2212";background:color-mix(in srgb,var(--lime) 14%,transparent)}
.faq-list details p{margin:0;padding:0 64px 24px 26px;color:#c2bfba;font-size:.92rem;line-height:1.65}

/* ---------- cierre ---------- */
.closer{
  --accent:var(--lime);margin-bottom:64px;padding:100px 32px;display:flex;flex-direction:column;align-items:center;
  border:1px solid rgba(198,255,46,.12);border-radius:28px;
  background:
    radial-gradient(circle at 50% 0%,rgba(198,255,46,.07),transparent 50%),
    linear-gradient(160deg,rgba(255,255,255,.032),rgba(255,255,255,.006));
  text-align:center;position:relative;overflow:hidden;
}
.closer::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:400px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(198,255,46,.5) 40%,rgba(198,255,46,.5) 60%,transparent);
}
.closer img{width:72px;height:72px;object-fit:contain;margin-bottom:18px;opacity:.88}
.closer h2{max-width:860px}
.closer .hero-actions{justify-content:center;margin-top:32px}

/* ---------- footer ---------- */
.site-footer{width:min(calc(100% - 40px),var(--max));margin:0 auto;padding:26px 0 44px;display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--line);color:var(--muted);font-size:.74rem}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-brand img{width:28px;height:28px;object-fit:contain}
.foot-brand strong{color:#d7d4ce;letter-spacing:.07em}
.foot-links{display:flex;gap:15px}
.foot-links a:hover{color:var(--text)}

/* ---- Premium reveal system — one-time, GPU-first ---- */
.reveal{opacity:1;transform:none}
.js-ready .reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1);
  will-change:transform,opacity;
}
.js-ready .reveal.visible{opacity:1;transform:none}

/* hero-copy: contenedor visible, hijos se escalonan */
.js-ready .hero-copy{opacity:1;transform:none;transition:none}
.js-ready .hero-copy>*{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
  will-change:transform,opacity;
}
.js-ready .hero-copy.hero-ready>*{opacity:1;transform:none}
.js-ready .hero-copy.hero-ready>*:nth-child(1){transition-delay:0ms}
.js-ready .hero-copy.hero-ready>*:nth-child(2){transition-delay:80ms}
.js-ready .hero-copy.hero-ready>*:nth-child(3){transition-delay:180ms}
.js-ready .hero-copy.hero-ready>*:nth-child(4){transition-delay:280ms}
.js-ready .hero-copy.hero-ready>*:nth-child(5){transition-delay:360ms}
.js-ready .hero-copy.hero-ready>*:nth-child(6){transition-delay:420ms}

/* hero-art: entrada con escala sutil */
.js-ready .hero-art{
  opacity:0;transform:translateY(18px) scale(.97);
  transition:opacity .9s cubic-bezier(.22,1,.36,1) .18s,transform .9s cubic-bezier(.22,1,.36,1) .18s;
  will-change:transform,opacity;
}
.js-ready .hero-art.visible{opacity:1;transform:none}

/* section-head: 100ms de ventaja, menos desplazamiento */
.js-ready .section-head.reveal{
  transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}

/* bundle: stagger entre info y buy-box */
.js-ready .bundle-info.reveal{
  transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1);
}
.js-ready .buy-box.reveal{
  transition:opacity .85s cubic-bezier(.22,1,.36,1) .12s,transform .85s cubic-bezier(.22,1,.36,1) .12s;
}

@media (prefers-reduced-motion:reduce){
  .js-ready .reveal,.js-ready .hero-copy>*,.js-ready .hero-art{
    opacity:1!important;transform:none!important;transition:none!important
  }
}

/* ======= fondos animados suaves (estilo samplack) ======= */
.glow-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.glow-bg::before,.glow-bg::after{
  content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;
}
.glow-bg::before{
  width:46vw;max-width:560px;aspect-ratio:1;left:-8%;top:10%;
  background:radial-gradient(circle,color-mix(in srgb,var(--glow-a,var(--roa)) 60%,transparent),transparent 70%);
  animation:drift-a 22s ease-in-out infinite alternate;
}
.glow-bg::after{
  width:40vw;max-width:480px;aspect-ratio:1;right:-6%;bottom:6%;
  background:radial-gradient(circle,color-mix(in srgb,var(--glow-b,var(--jhayco)) 55%,transparent),transparent 70%);
  animation:drift-b 26s ease-in-out infinite alternate;
}
@keyframes drift-a{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(8%,6%) scale(1.12)}
  100%{transform:translate(-4%,-5%) scale(1.05)}
}
@keyframes drift-b{
  0%{transform:translate(0,0) scale(1.05)}
  50%{transform:translate(-7%,-6%) scale(1)}
  100%{transform:translate(5%,4%) scale(1.12)}
}
@media (prefers-reduced-motion:reduce){
  .glow-bg::before,.glow-bg::after{animation:none}
}
.has-glow{position:relative;isolation:isolate}
#free-kit{padding-top:42px}
#free-kit .glow-bg::after{display:none}
#free-kit .glow-bg::before{
  left:8%;top:12%;width:min(38vw,460px);
  filter:blur(96px);opacity:.18;
}
#bundle{padding-top:42px}
#bundle .glow-bg{inset:0;overflow:hidden}
#bundle .glow-bg::before,
#bundle .glow-bg::after{animation:none}
#bundle .glow-bg::before{
  width:min(38vw,480px);left:clamp(96px,16%,220px);top:34%;
  filter:blur(96px);opacity:.26;
  background:radial-gradient(circle,color-mix(in srgb,var(--glow-a,var(--lime)) 48%,transparent),transparent 72%);
}
#bundle .glow-bg::after{
  width:min(32vw,400px);right:clamp(96px,12%,180px);bottom:20%;
  filter:blur(104px);opacity:.18;
  background:radial-gradient(circle,color-mix(in srgb,var(--glow-b,var(--jhayco)) 42%,transparent),transparent 72%);
}

/* ======= divider de sección (estilo samplack) ======= */
.divider{
  width:min(calc(100% - 40px),var(--max));margin:0 auto;position:relative;
  height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1) 20%,rgba(255,255,255,.1) 80%,transparent);
}
.divider span{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:0 18px;background:var(--bg);
  font-family:"Space Mono",monospace;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:10px;
}
.divider span::before,.divider span::after{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--accent,var(--lime));
  box-shadow:0 0 6px var(--accent,var(--lime));
}
.divider.d-roa{--accent:var(--roa)}
.divider.d-lime{--accent:var(--lime)}
.divider.d-red{--accent:var(--red)}
.divider.d-cyan{--accent:var(--jhayco)}

/* ======= reveal variants ======= */
.js-ready .reveal.rv-zoom{transform:scale(.95)}
.js-ready .reveal.rv-zoom.visible{transform:scale(1)}

.js-ready .reveal.rv-left{transform:translateX(-28px)}
.js-ready .reveal.rv-left.visible{transform:none}

.js-ready .reveal.rv-right{transform:translateX(28px)}
.js-ready .reveal.rv-right.visible{transform:none}

.js-ready .reveal.rv-blur{
  filter:blur(6px);transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),filter .9s cubic-bezier(.22,1,.36,1);
}
.js-ready .reveal.rv-blur.visible{filter:blur(0);transform:none}

@media (prefers-reduced-motion:reduce){
  .js-ready .reveal.rv-zoom,.js-ready .reveal.rv-left,.js-ready .reveal.rv-right,.js-ready .reveal.rv-blur{
    filter:none!important;transform:none!important
  }
}

/* ================= responsive ================= */
@media (max-width:1040px){
  .hero{grid-template-columns:1fr;padding-top:84px}
  .hero-art{min-height:500px}
  .module{
    grid-template-columns:1fr;
    background:
      radial-gradient(circle at 68% 30%,color-mix(in srgb,var(--roa) 8%,transparent),transparent 34%),
      linear-gradient(180deg,#050506 0%,#07050a 38%,#0b0712 62%,#111018 100%);
  }
  .module-media{padding:20px}
  .module-media img{width:min(100%,540px);min-height:0}
  .module-media::after{background:linear-gradient(to bottom,transparent 35%,transparent 52%,rgba(14,10,19,.12) 68%,rgba(17,14,22,.08) 82%,transparent 100%)}
  .chain{grid-template-columns:1fr;min-height:0}
  .chain-img{aspect-ratio:1}
  .chain-body{padding:24px 24px 22px}
  .flow-grid{grid-template-columns:repeat(2,1fr)}
  .faq{grid-template-columns:1fr;gap:26px}
  .bundle-grid{grid-template-columns:1fr}
  .buy-box{width:min(100%,540px)}
  .drum{grid-template-columns:1fr;gap:40px;padding:36px 0 56px}
  .drum-media{order:-1}
}
@media (max-width:780px){
  .site-header{height:62px;top:8px}
  .main-nav{position:absolute;left:0;right:0;top:calc(100% + 10px);padding:15px;display:none;flex-direction:column;align-items:stretch;gap:4px;border:1px solid var(--line);border-radius:13px;background:rgba(8,8,10,.97)}
  .main-nav.open{display:flex}
  .main-nav a{padding:11px}
  .main-nav .nav-cta{text-align:center}
  .menu-button{width:38px;height:38px;display:grid;place-content:center;gap:5px;border:0;border-radius:9px;color:var(--text);background:rgba(255,255,255,.06)}
  .menu-button span:not(.sr-only){width:18px;height:2px;background:currentColor;display:block}
  .section{width:min(calc(100% - 26px),var(--max));padding:72px 0}
  .rack-rule{width:calc(100% - 26px)}
  .hero{min-height:auto;padding-top:74px;gap:18px}
  .hero-art{min-height:420px}
  .hero-proof{margin-top:0}
  .module{width:100%;margin-top:0;border-radius:20px}
  .module-body{padding:30px 24px}
  .module-body>.btn-accent{width:100%}
  .bundle{width:calc(100% - 26px);margin:0 auto;border-radius:20px}
  .bundle-banner img{aspect-ratio:1}
  .bundle-grid{padding:28px 22px 30px;gap:30px}
  .chains .section-head{margin-bottom:32px}
  .chains-proof{flex-wrap:wrap;row-gap:8px;padding:16px 18px;margin-bottom:40px}
  .chains-proof-divider{display:none}
  .chains-proof-text{flex:1 1 100%;max-width:none}
  .chain-grid{gap:22px}
  .drum{padding:32px 0 48px}
  .drum-price-wrap{display:flex;width:100%}
  .drum-price-wrap .btn-red{width:100%}
  .flow-step h3{margin-top:22px}
  .closer{width:calc(100% - 26px);padding:56px 18px}
  .site-footer{flex-direction:column;text-align:center}
}
@media (max-width:520px){
  .brand span{font-size:.74rem}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  .hero-art{min-height:340px;overflow:hidden}
  .hero h1{font-size:clamp(2.25rem,12vw,3.1rem)}
  .hero-proof-item{padding:13px 16px}
  .chain-grid{grid-template-columns:1fr;gap:20px}
  .chain h3{font-size:1.6rem}
  .chain-foot strong{font-size:1.3rem}
  .chain-cta{padding:10px 15px;font-size:.72rem}
  .drum-info h2{font-size:clamp(2.3rem,10vw,3.2rem)}
  .drum-tags{max-width:280px}
  .drum-tags span{padding:7px 12px;font-size:.64rem}
  .drum-price-wrap .price-row strong{font-size:1.9rem}
  .flow-grid{grid-template-columns:1fr}
}
@media (max-width:370px){
  .brand span{display:none}
  .hero-art{min-height:290px}
}

/* ================= popup ================= */
.modal{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .3s cubic-bezier(.22,1,.36,1),visibility .3s;
}
.modal.open{visibility:visible;opacity:1;pointer-events:auto}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.8)}
body.locked{overflow:hidden}
.modal-card{
  position:relative;z-index:1;width:min(1020px,calc(100vw - 32px));max-height:min(720px,calc(100svh - 32px));
  display:grid;grid-template-columns:minmax(370px,.96fr) minmax(0,1.04fr);
  border:1px solid color-mix(in srgb,var(--roa) 35%,var(--line));border-radius:22px;background:#0c0c0e;
  overflow:hidden;box-shadow:0 32px 100px rgba(0,0,0,.7);
  transform:translateY(20px) scale(.97);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.modal.open .modal-card{transform:none}
.modal-close{position:absolute;top:12px;right:12px;z-index:4;width:38px;height:38px;display:grid;place-content:center;border:1px solid var(--line);border-radius:50%;color:var(--text);background:rgba(0,0,0,.55);font-size:1.35rem;line-height:1;cursor:pointer}
.modal-media{position:relative;min-height:100%;display:grid;place-items:center;padding:92px 34px 70px;overflow:hidden;background:#050506}
.modal-media::before{content:"";position:absolute;inset:-12%;background:var(--modal-art,none) center/cover no-repeat;filter:blur(24px) saturate(1.15);opacity:.34;transform:scale(1.03)}
.modal-media::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,transparent 55%,#0c0c0e)}
.modal-cover-fan{position:relative;z-index:1;width:min(302px,100%);height:502px;margin:auto}
.modal-cover{position:absolute;width:246px;height:auto;aspect-ratio:1/1;border:1px solid color-mix(in srgb,var(--roa) 28%,rgba(255,255,255,.12));border-radius:14px;object-fit:contain;background:#08080a;box-shadow:0 24px 52px rgba(0,0,0,.55)}
.modal-cover.cover-roa{top:0;left:26px;z-index:1;transform:rotate(-1.5deg)}
.modal-cover.cover-eladio{top:84px;left:4px;z-index:2;transform:rotate(1.1deg)}
.modal-cover.cover-feid{top:168px;left:32px;z-index:3;transform:rotate(-.8deg)}
.modal-cover.cover-jhayco{top:252px;left:14px;z-index:4;transform:rotate(1.2deg)}
.modal-flag{position:absolute;left:18px;bottom:18px;z-index:3;padding:8px 13px;border-radius:999px;color:#08080a;background:var(--lime);font-family:"Archivo Black";font-size:.72rem;letter-spacing:.08em}
.modal-body{padding:52px 34px 34px 42px}
.modal-body h2{margin:14px 0 16px;line-height:.95}
.modal-body h2 .title-line{display:block;width:max-content;max-width:100%;white-space:nowrap}
.modal-body h2 .title-main{font-size:clamp(2rem,4.4vw,3.5rem);letter-spacing:0}
.modal-body h2 .accent{color:var(--roa);font-size:clamp(1.72rem,3.3vw,3.08175rem);line-height:.98;letter-spacing:0}
.modal-body>p{max-width:510px;color:#c2bfb9;font-size:.9rem;line-height:1.55}
.modal-perks{margin:18px 0 0;padding:0;list-style:none}
.modal-perks li{position:relative;padding:7px 0 7px 26px;color:#dedbd5;font-size:.86rem;border-bottom:1px solid var(--line)}
.modal-perks li::before{content:"✓";position:absolute;left:0;top:7px;color:var(--lime);font-weight:900}
.promo-box{
  margin:22px 0;padding:16px 16px 16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px dashed color-mix(in srgb,var(--lime) 50%,transparent);border-radius:14px;
  background:color-mix(in srgb,var(--lime) 7%,transparent);
}
.promo-left{display:flex;flex-direction:column;gap:2px;min-width:0}
.promo-label{font-family:"Space Mono",monospace;font-size:.58rem;letter-spacing:.14em;color:var(--muted)}
.promo-code{font-family:"Archivo Black";font-size:1.5rem;letter-spacing:.04em;color:var(--lime);line-height:1}
.promo-sub{color:#cdcac4;font-size:.74rem}
.promo-copy{
  flex-shrink:0;padding:11px 16px;border:0;border-radius:10px;cursor:pointer;
  color:#08080a;background:var(--lime);font-size:.8rem;font-weight:800;
  transition:transform .15s,background .15s;
}
.promo-copy:hover{transform:translateY(-2px)}
.promo-copy.copied{background:var(--feid)}
.lf{margin-top:24px}
.lf-label{display:block;margin-bottom:8px;color:#e3e0db;font-size:.75rem;font-weight:700}
.lf-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.lf-row input[type=email]{min-width:0;height:50px;padding:0 14px;border:1px solid var(--line);border-radius:11px;color:var(--text);background:rgba(255,255,255,.04);font:inherit}
.lf-row input[type=email]::placeholder{color:#76736d}
.consent{margin-top:13px;display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:start;color:#a3a09b;font-size:.69rem;line-height:1.45;cursor:pointer}
.consent input{width:15px;height:15px;margin:2px 0 0;accent-color:var(--lime)}
.privacy{margin:10px 0 0!important;color:var(--muted)!important;font-size:.67rem!important}
.lf-status{min-height:20px;margin:11px 0 0!important;color:#ffb0ab!important;font-size:.73rem!important}
.lf-ok{margin-top:26px;padding:20px;border:1px solid color-mix(in srgb,var(--roa) 30%,transparent);border-radius:15px;background:color-mix(in srgb,var(--roa) 7%,transparent)}
.lf-ok .ic{width:40px;height:40px;margin-bottom:11px;display:grid;place-content:center;border-radius:50%;color:#08080a;background:var(--lime);font-weight:900}
.lf-ok p{color:#aba8a3;font-size:.84rem}
.lf-skip{margin:15px auto 0;display:block;border:0;color:var(--muted);background:transparent;font-size:.73rem;cursor:pointer}
.hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

.mob-cta{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:35;min-height:58px;padding:9px 12px 9px 15px;display:none;align-items:center;justify-content:space-between;gap:14px;border:1px solid color-mix(in srgb,var(--lime) 40%,transparent);border-radius:15px;color:#08080a;background:var(--lime);box-shadow:0 18px 56px rgba(0,0,0,.48)}
.mob-cta span{min-width:0;display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.mob-cta strong{font-size:.76rem;letter-spacing:.03em}
.mob-cta small{color:rgba(8,8,10,.7);font-size:.66rem}
.mob-cta b{padding:8px 10px;border-radius:8px;color:var(--lime);background:#08080a;font-size:.68rem;white-space:nowrap}

@media (max-width:760px){
  .legal{white-space:normal}
  .js-ready .reveal.rv-left,
  .js-ready .reveal.rv-right{transform:translateY(28px)}
  .js-ready .reveal.rv-left.visible,
  .js-ready .reveal.rv-right.visible{transform:none}
  .modal-card{width:min(520px,100%);grid-template-columns:1fr;overflow:auto}
  .modal-media{min-height:230px;max-height:270px;padding:18px 20px 24px}
  .modal-media::after{background:linear-gradient(to bottom,transparent 45%,#0c0c0e)}
  .modal-cover-fan{width:min(320px,100%);height:220px}
  .modal-cover{width:160px;border-radius:10px}
  .modal-cover.cover-roa{top:0;left:72px}
  .modal-cover.cover-eladio{top:34px;left:46px}
  .modal-cover.cover-feid{top:68px;left:88px}
  .modal-cover.cover-jhayco{top:102px;left:62px}
  .modal-body{padding:26px 20px 20px}
  .modal-body h2{font-size:clamp(2rem,9vw,3rem)}
  .modal-body h2 .title-main{font-size:clamp(2rem,9vw,3rem)}
  .modal-body h2 .accent{font-size:clamp(1.76rem,7.5vw,2.7rem)}
  .modal-body>p{max-width:none;font-size:.9rem}
  .lf-row{grid-template-columns:1fr}
  .lf-row .btn{width:100%}
  .mob-cta{display:flex}
  .site-footer{padding-bottom:max(108px,calc(84px + env(safe-area-inset-bottom)))}
}
@media (max-width:430px){
  .modal{padding:8px}
  .modal-card{max-height:calc(100svh - 16px);border-radius:16px}
  .modal-media{min-height:190px;max-height:210px;padding:12px 14px 18px}
  .modal-cover-fan{width:240px;height:184px}
  .modal-cover{width:112px;border-radius:8px}
  .modal-cover.cover-roa{top:0;left:62px}
  .modal-cover.cover-eladio{top:24px;left:40px}
  .modal-cover.cover-feid{top:48px;left:82px}
  .modal-cover.cover-jhayco{top:72px;left:60px}
  .modal-body{padding:22px 15px 18px}
  .modal-body h2{font-size:2rem}
  .modal-body h2 .title-main{font-size:2rem}
  .modal-body h2 .accent{font-size:1.7611rem}
}

/* ============================================================
   GLOBAL FIXED BACKGROUND SYSTEM — crossfade por sección
   GPU-first · z-index:-10 · opacity transitions only
   ============================================================ */

html,body{background:#08080a}

/* ── Contenedor global fijo ── */
.site-bg-system{
  position:fixed;inset:0;z-index:-10;
  overflow:hidden;pointer-events:none;
  background:#08080a;
}

/* ── Capas de fondo ── */
.bg-scene{
  position:absolute;inset:-12%;
  opacity:0;
  transition:opacity 900ms cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.bg-scene.is-active{opacity:1}

/* ── Overlay oscuro global (legibilidad) ── */
.bg-global-overlay{
  position:absolute;inset:0;z-index:20;
  background:
    linear-gradient(180deg,rgba(8,8,10,.70) 0%,rgba(8,8,10,.34) 42%,rgba(8,8,10,.78) 100%),
    radial-gradient(circle at 50% 50%,transparent 0%,rgba(0,0,0,.42) 72%);
}

/* ── Capa de ruido / textura ── */
.bg-noise{
  position:absolute;inset:0;z-index:25;
  opacity:.04;mix-blend-mode:screen;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.22) 0 1px,transparent 1px),
    radial-gradient(circle at 80% 70%,rgba(255,255,255,.16) 0 1px,transparent 1px);
  background-size:120px 120px,180px 180px;
  animation:bgNoiseMove 18s linear infinite;
}
@keyframes bgNoiseMove{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-120px,80px,0)}
}

/* ── Secciones: fondo transparente para que se vea el global ── */
.page-section{
  position:relative;isolation:isolate;
  background:transparent!important;
}

/* ── BG-1: Hero — glow verde/morado sobre negro ── */
.bg-scene-1{
  background:
    radial-gradient(ellipse 48% 62% at 76% 44%,rgba(154,82,255,.155),rgba(75,42,142,.078) 36%,transparent 76%),
    radial-gradient(ellipse 38% 40% at 92% 10%,rgba(21,67,162,.145),rgba(8,23,68,.085) 40%,transparent 78%),
    radial-gradient(ellipse 76% 70% at 20% 50%,rgba(255,255,255,.018),transparent 68%),
    radial-gradient(ellipse 72% 64% at 55% 60%,rgba(36,30,74,.095),transparent 76%),
    linear-gradient(120deg,#050505 0%,#050506 44%,#060711 68%,#050505 100%);
  animation:bgHeroMove 40s ease-in-out infinite alternate;
}
.bg-scene-1::before{
  content:"";position:absolute;inset:0;opacity:.07;
  background-image:
    radial-gradient(circle at 25% 35%,rgba(255,255,255,.13) 0 .35px,transparent .62px),
    radial-gradient(circle at 76% 64%,rgba(255,255,255,.09) 0 .3px,transparent .58px);
  background-size:2px 2px,3px 3px;
  animation:bgHeroBreath 36s ease-in-out infinite;
}
.bg-scene-1::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 50%,transparent 0%,transparent 55%,rgba(0,0,0,.34) 86%,rgba(0,0,0,.56) 100%),
    linear-gradient(180deg,rgba(0,0,0,.22) 0%,transparent 35%,rgba(0,0,0,.28) 100%);
}
@keyframes bgHeroMove{
  from{transform:translate3d(-.35%,-.25%,0) scale(1)}
  to{transform:translate3d(.45%,.35%,0) scale(1.018)}
}
@keyframes bgHeroBreath{
  0%,100%{opacity:.055}
  50%{opacity:.085}
}

/* ── BG-2: Free Kit — aurora morada ── */
.bg-scene-2{
  background:
    radial-gradient(circle at 32% 30%,rgba(155,92,255,.28),transparent 28%),
    radial-gradient(circle at 70% 70%,rgba(183,255,22,.11),transparent 30%),
    linear-gradient(180deg,#08080a 0%,#090612 100%);
  animation:bgAurora 14s cubic-bezier(.22,1,.36,1) infinite alternate;
}
.bg-scene-2::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle,rgba(255,255,255,.14) 0 1px,transparent 1.5px);
  background-size:150px 150px;
  opacity:.15;
  animation:bgParticlesSlow 20s linear infinite;
}
@keyframes bgAurora{
  from{transform:translate3d(-2%,1%,0) rotate(0deg) scale(1)}
  to{transform:translate3d(2%,-2%,0) rotate(4deg) scale(1.06)}
}
@keyframes bgParticlesSlow{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(80px,-80px,0)}
}

/* ── BG-3: Bundle — verde lima ── */
.bg-scene-3{
  background:
    radial-gradient(circle at 50% 28%,rgba(183,255,22,.20),transparent 30%),
    radial-gradient(circle at 78% 70%,rgba(155,92,255,.13),transparent 32%),
    linear-gradient(135deg,#08080a 0%,#0a1005 100%);
  animation:bgBundlePulse 11s cubic-bezier(.22,1,.36,1) infinite alternate;
}
.bg-scene-3::before{
  content:"";position:absolute;inset:0;opacity:.16;
  background:repeating-linear-gradient(
    90deg,
    transparent 0,transparent 38px,
    rgba(183,255,22,.09) 39px,transparent 40px
  );
  animation:bgLinesMove 18s linear infinite;
}
@keyframes bgBundlePulse{
  from{transform:scale(1);opacity:.82}
  to{transform:scale(1.07);opacity:1}
}
@keyframes bgLinesMove{
  from{transform:translate3d(-3%,0,0)}
  to{transform:translate3d(3%,0,0)}
}

/* ── BG-4: Vocal Chains — multicolor por artista ── */
.bg-scene-4{
  background:
    radial-gradient(circle at 38% 42%,rgba(155,92,255,.18),transparent 22%),
    radial-gradient(circle at 62% 38%,rgba(244,184,46,.13),transparent 22%),
    radial-gradient(circle at 36% 60%,rgba(183,255,22,.13),transparent 22%),
    radial-gradient(circle at 64% 62%,rgba(24,216,216,.16),transparent 22%),
    linear-gradient(180deg,#08080a 0%,#060808 100%);
  animation:bgVocalChains 13s cubic-bezier(.22,1,.36,1) infinite alternate;
}
@keyframes bgVocalChains{
  from{transform:scale(1) rotate(0deg)}
  to{transform:scale(1.05) rotate(2deg)}
}

/* ── BG-5: Drum Kit — rojo ── */
.bg-scene-5{
  background:
    radial-gradient(circle at 72% 42%,rgba(255,45,45,.26),transparent 30%),
    radial-gradient(circle at 30% 70%,rgba(183,255,22,.11),transparent 28%),
    linear-gradient(135deg,#08080a 0%,#130606 100%);
  animation:bgDrumRed 10s cubic-bezier(.22,1,.36,1) infinite alternate;
}
.bg-scene-5::before{
  content:"";position:absolute;inset:0;opacity:.15;
  background:repeating-linear-gradient(
    125deg,
    transparent 0,transparent 42px,
    rgba(255,45,45,.14) 43px,transparent 44px
  );
  animation:bgDiagonalDrift 18s linear infinite;
}
@keyframes bgDrumRed{
  from{transform:translate3d(-1%,0,0) scale(1)}
  to{transform:translate3d(2%,1%,0) scale(1.07)}
}
@keyframes bgDiagonalDrift{
  from{transform:translate3d(-4%,-4%,0)}
  to{transform:translate3d(4%,4%,0)}
}

/* ── BG-6: Flow / FAQ — grid técnico cian ── */
.bg-scene-6{
  background:
    radial-gradient(circle at 68% 40%,rgba(24,216,216,.16),transparent 30%),
    radial-gradient(circle at 34% 60%,rgba(155,92,255,.14),transparent 28%),
    linear-gradient(180deg,#08080a 0%,#061010 100%);
}
.bg-scene-6::before{
  content:"";position:absolute;inset:0;opacity:.20;
  background:
    linear-gradient(rgba(24,216,216,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(155,92,255,.07) 1px,transparent 1px);
  background-size:62px 62px;
  animation:bgGridMove 20s linear infinite;
}
@keyframes bgGridMove{
  from{background-position:0 0,0 0}
  to{background-position:62px 62px,62px 62px}
}

/* ── BG-7: Closer / CTA — spotlight final ── */
.bg-scene-7{
  background:
    radial-gradient(circle at 50% 20%,rgba(183,255,22,.14),transparent 28%),
    radial-gradient(circle at 50% 75%,rgba(155,92,255,.20),transparent 34%),
    linear-gradient(180deg,#08080a 0%,#000 100%);
  animation:bgFinalSpotlight 9s cubic-bezier(.22,1,.36,1) infinite alternate;
}
@keyframes bgFinalSpotlight{
  from{transform:translate3d(0,-2%,0) scale(1)}
  to{transform:translate3d(0,2%,0) scale(1.07)}
}

/* ── BG-8: Reseñas — lima/morado calmo ── */
.bg-scene-8{
  background:
    radial-gradient(circle at 20% 24%,rgba(183,255,22,.14),transparent 30%),
    radial-gradient(circle at 82% 68%,rgba(155,92,255,.16),transparent 32%),
    linear-gradient(160deg,#08080a 0%,#0a0a08 46%,#09080d 100%);
  animation:bgReviewsDrift 15s cubic-bezier(.22,1,.36,1) infinite alternate;
}
@keyframes bgReviewsDrift{
  from{transform:translate3d(-1%,0,0) scale(1)}
  to{transform:translate3d(1%,-1%,0) scale(1.045)}
}

/* ── Responsive ── */
@media (max-width:900px){
  .hero.section{
    padding-left:max(13px,calc((100% - var(--max))/2));
    padding-right:max(13px,calc((100% - var(--max))/2));
  }
  .hero::before{
    background:
      radial-gradient(ellipse 70% 44% at 58% 64%,rgba(124,58,237,.22) 0%,rgba(78,43,146,.11) 40%,transparent 78%),
      radial-gradient(ellipse 52% 34% at 88% 8%,rgba(24,63,150,.16) 0%,rgba(9,23,62,.08) 42%,transparent 80%),
      radial-gradient(ellipse 88% 58% at 12% 34%,rgba(255,255,255,.024),transparent 72%),
      radial-gradient(ellipse 86% 92% at -18% 50%,transparent 0%,rgba(0,0,0,.09) 60%,rgba(0,0,0,.22) 100%),
      linear-gradient(180deg,#08080d 0%,#060608 42%,#090913 62%,#08080d 100%);
  }
  .bg-scene{inset:-20%}
  .bg-global-overlay{
    background:linear-gradient(180deg,rgba(8,8,10,.84) 0%,rgba(8,8,10,.52) 45%,rgba(8,8,10,.9) 100%);
  }
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion:reduce){
  .bg-scene,.bg-scene::before,.bg-noise{animation:none!important}
  .bg-scene{transition:opacity 400ms ease!important}
  .hero::before{animation:none!important}
}

/* ── Mobile legibility and touch targets ── */
@media (max-width:780px){
  .kicker,
  .artist-strip .lbl,
  .product-label,
  .hero-proof-social,
  .module-body .free-flag,
  .pill,
  .buy-flag,
  .price-cmp .was span,
  .save span,
  .buy-note,
  .buy-box .fine,
  .chain-badge,
  .chain-daw span,
  .legal,
  .drum-info .colab,
  .drum-tags span,
  .divider span,
  .promo-label,
  .promo-sub,
  .modal-flag,
  .lf-skip,
  .site-footer,
  .mob-cta small,
  .mob-cta b{
    font-size:.75rem;
  }

  .play{
    min-height:44px;
    padding:10px 16px;
    font-size:.75rem;
  }

  .brand,
  .menu-button,
  .modal-close{
    min-width:44px;
    min-height:44px;
  }

  .menu-button,
  .modal-close{
    width:44px;
    height:44px;
  }

  .main-nav a,
  .promo-copy,
  .lf-skip,
  .chain-foot a,
  .foot-links a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

/* ---------- hero premium refresh ---------- */
.hero{
  min-height:min(880px,calc(100svh - 82px));
  grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr);
  column-gap:clamp(34px,5vw,74px);
  row-gap:clamp(24px,3vw,42px);
  padding-top:76px;
  padding-bottom:32px;
  background:#040406;
}
.hero::before{
  inset:-16% -10% -14%;
  background:
    radial-gradient(ellipse 54% 62% at 76% 43%,rgba(111,52,214,.46) 0%,rgba(76,34,154,.23) 34%,rgba(25,17,54,.09) 60%,transparent 84%),
    radial-gradient(ellipse 46% 44% at 62% 20%,rgba(198,255,0,.07) 0%,transparent 58%),
    radial-gradient(ellipse 82% 78% at 19% 48%,rgba(255,255,255,.035) 0%,rgba(255,255,255,.014) 28%,transparent 66%),
    linear-gradient(115deg,#050506 0%,#08070d 42%,#0a0712 67%,#050506 100%);
  filter:saturate(1.06) contrast(1.08);
  animation:heroAmbientBreath 28s ease-in-out infinite;
}
.hero::after{
  opacity:.82;
  background-image:
    radial-gradient(ellipse 94% 82% at 58% 48%,transparent 0%,transparent 52%,rgba(0,0,0,.26) 78%,rgba(0,0,0,.72) 100%),
    linear-gradient(90deg,rgba(0,0,0,.64) 0%,rgba(0,0,0,.16) 40%,rgba(0,0,0,.08) 64%,rgba(0,0,0,.4) 100%),
    linear-gradient(180deg,rgba(0,0,0,.4) 0%,transparent 26%,transparent 70%,rgba(0,0,0,.58) 100%),
    radial-gradient(circle at 18% 30%,rgba(255,255,255,.045) 0 .28px,transparent .56px),
    radial-gradient(circle at 78% 64%,rgba(255,255,255,.035) 0 .26px,transparent .52px);
  background-size:100% 100%,100% 100%,100% 100%,3px 3px,4px 4px;
}
.hero-orbs{display:none}
.hero-grain{opacity:.2;mix-blend-mode:soft-light}
.hero-copy{
  max-width:660px;
  padding-top:clamp(0px,2vw,18px);
}
.hero-kicker{
  color:#d8ccff;
  margin-bottom:20px;
  letter-spacing:.2em;
}
.hero-kicker::before{
  width:34px;
  background:linear-gradient(90deg,var(--hero-lime),rgba(124,58,237,.88));
}
.hero h1{
  max-width:760px;
  margin:16px 0 24px;
  font-size:clamp(3.1rem,4.45vw,5.05rem);
  line-height:.9;
  letter-spacing:0;
  text-wrap:balance;
  text-shadow:0 18px 58px rgba(0,0,0,.62);
}
.hero h1 .stroke{
  display:inline-block;
  color:var(--hero-lime);
  text-shadow:0 0 18px rgba(198,255,0,.24),0 18px 58px rgba(198,255,0,.12);
}
.hero .lead{
  max-width:585px;
  color:#c9c7d0;
  font-size:clamp(1.02rem,1.25vw,1.15rem);
  line-height:1.68;
}
.hero-actions{
  gap:14px;
  margin-top:32px;
}
.hero .btn{
  min-height:50px;
  border-radius:12px;
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1),background .28s cubic-bezier(.22,1,.36,1),border-color .28s cubic-bezier(.22,1,.36,1);
}
.hero .btn:hover{transform:translateY(-3px)}
.hero .btn-lime{
  background:linear-gradient(135deg,#d8ff37 0%,#baff00 52%,#97e900 100%);
  box-shadow:0 18px 46px rgba(198,255,0,.22),0 8px 22px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.42);
}
.hero .btn-lime:hover{
  box-shadow:0 24px 58px rgba(198,255,0,.28),0 10px 26px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.5);
}
.hero .btn-ghost{
  color:#f2f0f8;
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.032));
  border-color:rgba(216,204,255,.26);
  box-shadow:0 16px 40px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
}
.hero .btn-ghost:hover{
  border-color:rgba(198,255,0,.34);
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(124,58,237,.12));
  box-shadow:0 20px 46px rgba(0,0,0,.28),0 0 32px rgba(124,58,237,.14),inset 0 1px 0 rgba(255,255,255,.12);
}
.hero-art{
  min-height:510px;
  border-radius:0;
}
.product-scene{
  width:min(710px,100%);
  min-height:510px;
  perspective:1600px;
  transform-style:preserve-3d;
  animation:productPremiumDrift 14s ease-in-out infinite;
}
.product-scene::before{
  inset:10% 0 18%;
  background:
    radial-gradient(circle at 34% 38%,rgba(255,255,255,.12) 0 .34px,transparent .68px),
    radial-gradient(circle at 72% 24%,rgba(198,255,0,.1) 0 .3px,transparent .62px);
  background-size:52px 52px,68px 68px;
  opacity:.22;
  mask-image:radial-gradient(ellipse at 56% 48%,#000 0%,rgba(0,0,0,.55) 40%,transparent 76%);
}
.product-scene::after{
  width:min(680px,104%);
  height:min(500px,82%);
  background:
    radial-gradient(ellipse at 54% 48%,rgba(124,58,237,.34),rgba(50,25,105,.14) 43%,transparent 74%),
    radial-gradient(ellipse at 68% 28%,rgba(198,255,0,.08),transparent 48%);
  filter:blur(38px);
  opacity:.78;
  animation:productCorePulse 10s ease-in-out infinite;
}
.product-glow{
  top:45%;
  left:55%;
  width:min(720px,112%);
  height:min(520px,86%);
  background:
    radial-gradient(ellipse at 50% 52%,rgba(124,58,237,.58),rgba(79,37,168,.3) 34%,rgba(28,18,66,.14) 60%,transparent 82%),
    radial-gradient(ellipse at 72% 28%,rgba(198,255,0,.08),transparent 54%);
  filter:blur(74px);
  opacity:.78;
}
.product-orbit,
.product-scanline,
.product-sparks{display:none}
.product-platform{
  bottom:9%;
  width:min(590px,94%);
  height:132px;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(124,58,237,.36),rgba(55,25,119,.2) 40%,rgba(6,6,10,.74) 66%,transparent 80%),
    linear-gradient(90deg,transparent 0%,rgba(198,255,0,.08) 42%,rgba(124,58,237,.18) 56%,transparent 100%);
  opacity:.62;
  filter:blur(4px);
}
.product-shadow{
  bottom:15%;
  width:min(520px,78%);
  height:76px;
  opacity:.86;
}
.product-pack{
  top:48%;
  left:50%;
  width:min(334px,57%);
  border-radius:24px;
  opacity:1;
  transition:transform 1120ms cubic-bezier(.22,1,.36,1),filter 1120ms cubic-bezier(.22,1,.36,1),box-shadow 1120ms cubic-bezier(.22,1,.36,1);
  animation:none!important;
  will-change:transform,filter;
}
.product-pack::before{
  opacity:.46;
  animation:packLightSweep 8.6s cubic-bezier(.22,1,.36,1) infinite;
}
.product-pack::after{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.08);
}
.pack-float{animation:packIdleBob 8.4s ease-in-out infinite}
.product-pack.is-front{
  z-index:12;
  transform:translate(-50%,-53%) translateZ(120px) scale(1.08) rotateY(-2deg) rotateZ(-1.5deg);
  filter:brightness(1.08) saturate(1.1);
  box-shadow:0 48px 120px rgba(0,0,0,.76),0 0 84px rgba(124,58,237,.42),0 0 0 1px rgba(198,255,0,.28);
}
.product-pack.is-right{
  z-index:8;
  transform:translate(calc(-50% + 142px),calc(-50% + 6px)) translateZ(-28px) scale(.83) rotateY(-26deg) rotateZ(6deg);
  filter:brightness(.74) saturate(.94);
  box-shadow:0 34px 86px rgba(0,0,0,.66),0 0 42px rgba(124,58,237,.2),0 0 0 1px rgba(255,255,255,.08);
}
.product-pack.is-back{
  z-index:5;
  transform:translate(calc(-50% + 10px),calc(-50% - 58px)) translateZ(-116px) scale(.68) rotateY(5deg) rotateZ(2deg);
  filter:brightness(.58) saturate(.86);
  box-shadow:0 28px 72px rgba(0,0,0,.58),0 0 28px rgba(124,58,237,.16),0 0 0 1px rgba(255,255,255,.055);
}
.product-pack.is-left{
  z-index:7;
  transform:translate(calc(-50% - 144px),calc(-50% + 18px)) translateZ(-42px) scale(.82) rotateY(28deg) rotateZ(-6deg);
  filter:brightness(.72) saturate(.92);
  box-shadow:0 34px 86px rgba(0,0,0,.64),0 0 38px rgba(124,58,237,.18),0 0 0 1px rgba(255,255,255,.08);
}
.product-pack.is-front::after{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(198,255,0,.32),0 0 24px rgba(198,255,0,.12);
}
.product-label{
  bottom:8%;
  padding:8px 14px 7px;
  border-color:rgba(216,204,255,.2);
  background:linear-gradient(135deg,rgba(10,10,16,.68),rgba(27,20,48,.5));
  box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 24px rgba(124,58,237,.16),inset 0 1px 0 rgba(255,255,255,.08);
  color:#eee9ff;
  font-size:.58rem;
  letter-spacing:.15em;
}
.hero-proof{
  margin-top:-2px;
  border-color:rgba(216,204,255,.12);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(12,12,18,.68),rgba(18,15,30,.44));
  box-shadow:0 20px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07);
}
.hero-proof-item{
  min-height:68px;
  padding:14px 22px;
  gap:12px;
  border-left-color:rgba(216,204,255,.1);
  font-size:.74rem;
  letter-spacing:.035em;
}
.hero-proof-icon{
  width:30px;
  height:30px;
  border-radius:9px;
  color:#e4d7ff;
  border-color:rgba(216,204,255,.24);
  background:linear-gradient(145deg,rgba(124,58,237,.18),rgba(255,255,255,.035));
}
.hero-proof-main{color:#fbfaf4}
.hero-proof-social{color:#d3d0db}
.js-ready .hero-proof{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .82s cubic-bezier(.22,1,.36,1) .48s,transform .82s cubic-bezier(.22,1,.36,1) .48s;
}
.js-ready .hero-proof.hero-proof-ready{
  opacity:1;
  transform:none;
}
.js-ready .hero-copy>*{
  transform:translateY(18px);
  transition-duration:.82s;
}
.js-ready .hero-copy.hero-ready>*:nth-child(1){transition-delay:0ms}
.js-ready .hero-copy.hero-ready>*:nth-child(2){transition-delay:90ms}
.js-ready .hero-copy.hero-ready>*:nth-child(3){transition-delay:205ms}
.js-ready .hero-copy.hero-ready>*:nth-child(4){transition-delay:320ms}
.js-ready .hero-art{
  transform:translateY(24px) scale(.965) rotate(-1deg);
  transition:opacity 1s cubic-bezier(.22,1,.36,1) .22s,transform 1s cubic-bezier(.22,1,.36,1) .22s;
}
@media(max-width:1040px){
  .hero{
    min-height:auto;
    grid-template-columns:1fr;
    padding-top:86px;
  }
  .hero-copy{max-width:760px}
  .hero-art{min-height:500px}
  .product-scene{
    min-height:500px;
    width:min(680px,100%);
  }
  .product-pack{width:min(330px,54%)}
}
@media(max-width:780px){
  .hero{
    padding-top:76px;
    padding-bottom:24px;
    gap:18px;
  }
  .hero h1{
    font-size:clamp(2.75rem,11vw,4.6rem);
    line-height:.92;
  }
  .hero .lead{max-width:620px}
  .hero-art{min-height:420px}
  .product-scene{min-height:420px}
  .product-pack{
    width:min(270px,57%);
    border-radius:20px;
  }
  .product-pack.is-right{
    transform:translate(calc(-50% + 104px),calc(-50% + 8px)) translateZ(-28px) scale(.82) rotateY(-24deg) rotateZ(6deg);
  }
  .product-pack.is-left{
    transform:translate(calc(-50% - 104px),calc(-50% + 18px)) translateZ(-42px) scale(.81) rotateY(26deg) rotateZ(-6deg);
  }
  .product-pack.is-back{
    transform:translate(calc(-50% + 4px),calc(-50% - 50px)) translateZ(-108px) scale(.66) rotateY(5deg) rotateZ(2deg);
  }
  .product-label{bottom:6%}
  .hero-proof{border-radius:14px}
  .hero-proof-item{
    min-height:56px;
    padding:12px 16px;
  }
}
@media(max-width:520px){
  .hero.section{
    padding-left:13px;
    padding-right:13px;
  }
  .hero h1{font-size:clamp(2.18rem,10.8vw,2.9rem)}
  .hero-actions{gap:10px}
  .hero .btn{
    justify-content:center;
    min-height:48px;
  }
  .hero-art{
    min-height:340px;
    overflow:visible;
  }
  .product-scene{min-height:340px}
  .product-pack{
    width:min(218px,60%);
    border-radius:17px;
  }
  .product-pack.is-front{
    transform:translate(-50%,-54%) translateZ(100px) scale(1.05) rotateY(-2deg) rotateZ(-1.5deg);
  }
  .product-pack.is-right{
    transform:translate(calc(-50% + 76px),calc(-50% + 8px)) translateZ(-24px) scale(.78) rotateY(-22deg) rotateZ(6deg);
  }
  .product-pack.is-left{
    transform:translate(calc(-50% - 76px),calc(-50% + 16px)) translateZ(-38px) scale(.77) rotateY(24deg) rotateZ(-6deg);
  }
  .product-pack.is-back{
    transform:translate(calc(-50% + 2px),calc(-50% - 42px)) translateZ(-95px) scale(.62) rotateY(5deg) rotateZ(2deg);
  }
  .product-label{
    bottom:3%;
    font-size:.52rem;
    letter-spacing:.12em;
    padding:7px 11px 6px;
  }
}
@media(max-width:370px){
  .product-pack{width:min(198px,62%)}
}
@media(prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.hero-grain,.product-scene,.product-scene::before,.product-scene::after,
  .product-glow,.product-pack,.product-pack::before,.pack-float,.product-label,.hero-proof{
    animation:none!important;
    transition:none!important;
  }
  .js-ready .hero-proof{
    opacity:1!important;
    transform:none!important;
  }
}

/* ---------- hero DAW compatibility badges ---------- */
.hero-proof-compat{
  min-width:0;
}
.hero-proof-compat .daw-line{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
  white-space:nowrap;
}
.hero-proof-compat .daw-label{
  flex:none;
}
.hero-proof-compat .daw-and{
  color:#b8b2c8;
  font-family:"Space Mono",monospace;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.08em;
  margin:0 -1px;
  opacity:.78;
}
.hero-proof-compat .daw-badge{
  position:relative;
  flex:none;
  width:32px;
  height:30px;
  padding:0;
  border-radius:9px;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 34% 16%,rgba(255,255,255,.13),transparent 34%),
    linear-gradient(145deg,rgba(216,204,255,.14),rgba(124,58,237,.08) 48%,rgba(8,8,13,.64));
  border:1px solid rgba(216,204,255,.2);
  box-shadow:0 8px 24px rgba(0,0,0,.22),0 0 18px rgba(124,58,237,.12),inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter:blur(12px);
}
.hero-proof-compat .daw-ableton{
  width:46px;
}
.hero-proof-compat .daw-badge img{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  filter:none;
  pointer-events:none;
}
.hero-proof-compat .daw-badge::before{
  content:"";
  display:block;
  width:18px;
  height:24px;
  background:linear-gradient(180deg,#f7f3ff 0%,#d9caff 100%);
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  filter:drop-shadow(0 0 8px rgba(216,204,255,.18));
}
.hero-proof-compat .daw-fl::before{
  mask-image:url("assets/fl-studio-logo.png");
  -webkit-mask-image:url("assets/fl-studio-logo.png");
}
.hero-proof-compat .daw-ableton::before{
  width:34px;
  height:16px;
  background:linear-gradient(180deg,#f9f7ff 0%,#dfd8ef 100%);
  mask-image:url("assets/ableton-live-logo.png");
  -webkit-mask-image:url("assets/ableton-live-logo.png");
}
@media(max-width:780px){
  .hero-proof-compat .daw-line{
    gap:8px;
  }
  .hero-proof-compat .daw-badge{
    height:28px;
  }
}
@media(max-width:520px){
  .hero-proof-compat .daw-line{
    gap:0;
    white-space:normal;
  }
  .hero-proof-compat .daw-label{
    color:#f4f0ff;
    font-size:.67rem;
    letter-spacing:.02em;
    line-height:1.3;
  }
  .hero-proof-compat .daw-label::after{
    content:" con FL Studio 25 · Ableton Live 12";
    color:#d9d2e8;
    font-weight:700;
  }
  .hero-proof-compat .daw-and,
  .hero-proof-compat .daw-badge{
    display:none;
  }
  .hero-proof-compat .daw-badge{
    width:auto;
    min-width:0;
    height:28px;
    padding:0 9px;
    border-radius:999px;
  }
  .hero-proof-compat .daw-badge::before{
    width:6px;
    height:6px;
    border-radius:50%;
    mask-image:none;
    -webkit-mask-image:none;
    background:#c6ff00;
    box-shadow:0 0 10px rgba(198,255,0,.35);
    filter:none;
    margin-right:7px;
  }
  .hero-proof-compat .daw-badge::after{
    content:attr(data-label);
    color:#f4f0ff;
    font-family:"Space Mono",monospace;
    font-size:.61rem;
    font-weight:700;
    letter-spacing:.03em;
    line-height:1;
  }
}

/* ---------- hero fine tune pass ---------- */
.hero h1{
  max-width:680px;
  font-size:clamp(3.15rem,4.8vw,5.25rem);
  line-height:.88;
}
.hero-art{
  min-height:540px;
}
.product-scene{
  width:min(780px,108%);
  min-height:540px;
  margin-left:clamp(-30px,-2vw,-14px);
}
.product-scene::after{
  width:min(730px,110%);
  height:min(530px,86%);
  opacity:.84;
}
.product-glow{
  width:min(790px,118%);
  height:min(570px,92%);
  opacity:.82;
}
.product-pack{
  width:min(370px,62%);
}
.product-pack.is-front{
  transform:translate(-50%,-53%) translateZ(126px) scale(1.1) rotateY(-2deg) rotateZ(-1.5deg);
  filter:brightness(1.1) saturate(1.12);
  box-shadow:0 52px 128px rgba(0,0,0,.76),0 0 92px rgba(124,58,237,.42),0 0 0 1px rgba(198,255,0,.3);
}
.product-pack.is-right{
  transform:translate(calc(-50% + 156px),calc(-50% + 4px)) translateZ(-26px) scale(.86) rotateY(-25deg) rotateZ(6deg);
  filter:brightness(.84) saturate(1);
}
.product-pack.is-left{
  transform:translate(calc(-50% - 158px),calc(-50% + 16px)) translateZ(-40px) scale(.85) rotateY(27deg) rotateZ(-6deg);
  filter:brightness(.82) saturate(.98);
}
.product-pack.is-back{
  transform:translate(calc(-50% + 8px),calc(-50% - 60px)) translateZ(-112px) scale(.72) rotateY(5deg) rotateZ(2deg);
  filter:brightness(.68) saturate(.94);
}
.product-platform{
  bottom:10%;
  width:min(640px,98%);
  opacity:.58;
}
.product-shadow{
  bottom:16%;
  width:min(570px,82%);
}
.product-label{
  bottom:11.5%;
  padding:9px 16px 8px;
  border-color:rgba(198,255,0,.16);
  background:linear-gradient(135deg,rgba(8,8,13,.78),rgba(27,20,48,.58));
  box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 22px rgba(124,58,237,.18),0 0 18px rgba(198,255,0,.05),inset 0 1px 0 rgba(255,255,255,.1);
  font-size:.6rem;
  letter-spacing:.16em;
}
.product-label-dot{
  width:7px;
  height:7px;
  box-shadow:0 0 12px rgba(198,255,0,.5);
}
.hero-proof{
  margin-top:-10px;
  border-color:rgba(216,204,255,.1);
  background:linear-gradient(135deg,rgba(8,8,13,.64),rgba(18,15,30,.34));
  box-shadow:0 14px 48px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.055);
}
.hero-proof-item{
  min-height:58px;
  padding:10px 18px;
  gap:10px;
  border-left-color:rgba(216,204,255,.075);
  font-size:.7rem;
}
.hero-proof-icon{
  width:28px;
  height:28px;
  border-radius:8px;
  color:#dfd1ff;
  border-color:rgba(216,204,255,.2);
  background:linear-gradient(145deg,rgba(124,58,237,.16),rgba(255,255,255,.028));
  box-shadow:0 0 18px rgba(124,58,237,.1);
}
.hero-proof-compat .daw-line{
  gap:9px;
}
.hero-proof-compat .daw-badge{
  width:34px;
  height:28px;
  border-radius:8px;
  border-color:rgba(216,204,255,.18);
  box-shadow:0 6px 18px rgba(0,0,0,.2),0 0 16px rgba(124,58,237,.1),inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-proof-compat .daw-ableton{
  width:50px;
}
.hero-proof-compat .daw-badge::before{
  width:19px;
  height:23px;
}
.hero-proof-compat .daw-ableton::before{
  width:37px;
  height:15px;
}
@media(max-width:1040px){
  .product-scene{
    width:min(720px,100%);
    margin-left:0;
  }
  .product-pack{
    width:min(350px,56%);
  }
}
@media(max-width:780px){
  .hero h1{
    font-size:clamp(2.55rem,10.2vw,4.2rem);
    line-height:.92;
  }
  .hero-art{
    min-height:430px;
  }
  .product-scene{
    min-height:430px;
  }
  .product-pack{
    width:min(285px,59%);
  }
  .product-pack.is-front{
    transform:translate(-50%,-53%) translateZ(110px) scale(1.06) rotateY(-2deg) rotateZ(-1.5deg);
  }
  .product-pack.is-right{
    transform:translate(calc(-50% + 108px),calc(-50% + 6px)) translateZ(-26px) scale(.84) rotateY(-23deg) rotateZ(6deg);
  }
  .product-pack.is-left{
    transform:translate(calc(-50% - 108px),calc(-50% + 16px)) translateZ(-38px) scale(.83) rotateY(25deg) rotateZ(-6deg);
  }
  .product-pack.is-back{
    transform:translate(calc(-50% + 2px),calc(-50% - 52px)) translateZ(-104px) scale(.68) rotateY(5deg) rotateZ(2deg);
  }
  .product-label{
    bottom:8%;
  }
  .hero-proof{
    margin-top:-4px;
  }
  .hero-proof-item{
    min-height:54px;
    padding:11px 15px;
  }
}
@media(max-width:520px){
  .hero h1{
    font-size:clamp(1.96rem,8.8vw,2.2rem);
    line-height:.96;
  }
  .hero-art{
    min-height:350px;
  }
  .product-scene{
    min-height:350px;
  }
  .product-pack{
    width:min(230px,62%);
  }
  .product-pack.is-front{
    transform:translate(-50%,-54%) translateZ(100px) scale(1.04) rotateY(-2deg) rotateZ(-1.5deg);
  }
  .product-pack.is-right{
    transform:translate(calc(-50% + 80px),calc(-50% + 8px)) translateZ(-24px) scale(.8) rotateY(-22deg) rotateZ(6deg);
  }
  .product-pack.is-left{
    transform:translate(calc(-50% - 80px),calc(-50% + 16px)) translateZ(-36px) scale(.79) rotateY(24deg) rotateZ(-6deg);
  }
  .product-pack.is-back{
    transform:translate(calc(-50% + 2px),calc(-50% - 44px)) translateZ(-94px) scale(.64) rotateY(5deg) rotateZ(2deg);
  }
  .product-label{
    bottom:5%;
    font-size:.52rem;
    padding:7px 12px 6px;
  }
  .hero-proof-item{
    min-height:52px;
  }
  .hero-proof-compat .daw-label{
    font-size:.65rem;
  }
}

/* ---------- hero left column correction ---------- */
.hero{
  padding-top:64px;
}
.hero-copy{
  max-width:690px;
  padding-top:0;
  align-self:center;
  transform:translateY(-10px);
}
.hero h1{
  max-width:720px;
  margin:14px 0 20px;
  font-size:clamp(3rem,3.95vw,4.55rem);
  line-height:.9;
}
.hero h1 .stroke{
  white-space:nowrap;
}
.hero .lead{
  max-width:570px;
  line-height:1.58;
}
.hero-actions{
  margin-top:26px;
}
@media(max-width:1040px){
  .hero{
    padding-top:76px;
  }
  .hero-copy{
    transform:none;
  }
}
@media(max-width:780px){
  .hero{
    padding-top:70px;
  }
  .hero h1{
    font-size:clamp(2.38rem,9.4vw,3.75rem);
    line-height:.92;
    margin-bottom:18px;
  }
  .hero .lead{
    line-height:1.56;
  }
  .hero-actions{
    margin-top:24px;
  }
}
@media(max-width:520px){
  .hero h1{
    font-size:clamp(2rem,9.2vw,2.32rem);
    line-height:.94;
  }
}
@media(max-width:370px){
  .hero h1{
    font-size:clamp(1.82rem,8.9vw,2rem);
  }
}

/* ---------- hero cinematic polish pass ---------- */
.hero{
  background:
    radial-gradient(ellipse 72% 58% at 75% 31%,rgba(95,46,190,.18),transparent 70%),
    linear-gradient(180deg,#050506 0%,#07060b 48%,#050506 100%);
}
.hero::before{
  background:
    radial-gradient(ellipse 48% 52% at 77% 42%,rgba(124,58,237,.5) 0%,rgba(67,30,142,.24) 35%,rgba(23,16,50,.1) 62%,transparent 84%),
    radial-gradient(ellipse 34% 24% at 80% 24%,rgba(31,214,201,.115),transparent 64%),
    radial-gradient(ellipse 46% 32% at 24% 18%,rgba(216,204,255,.035),transparent 68%),
    radial-gradient(ellipse 90% 74% at 42% -8%,rgba(255,255,255,.028),transparent 56%),
    linear-gradient(115deg,#050506 0%,#08070d 42%,#0a0712 67%,#050506 100%);
}
.hero::after{
  background-image:
    radial-gradient(ellipse 94% 82% at 58% 48%,transparent 0%,transparent 52%,rgba(0,0,0,.26) 78%,rgba(0,0,0,.72) 100%),
    linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.14) 40%,rgba(0,0,0,.08) 64%,rgba(0,0,0,.38) 100%),
    linear-gradient(180deg,rgba(0,0,0,.38) 0%,transparent 24%,transparent 72%,rgba(0,0,0,.58) 100%),
    radial-gradient(circle at 14% 18%,rgba(255,255,255,.05) 0 .26px,transparent .54px),
    radial-gradient(circle at 72% 30%,rgba(198,255,0,.045) 0 .24px,transparent .5px),
    radial-gradient(circle at 83% 64%,rgba(31,214,201,.04) 0 .24px,transparent .5px);
  background-size:100% 100%,100% 100%,100% 100%,3px 3px,5px 5px,4px 4px;
}
.hero-grain{
  opacity:.24;
}
.hero-kicker{
  color:#e4dcff;
  opacity:.94;
  text-shadow:0 0 20px rgba(124,58,237,.22);
}
.hero-kicker::before{
  opacity:.95;
  box-shadow:0 0 16px rgba(198,255,0,.22);
}
.hero h1{
  text-shadow:0 18px 58px rgba(0,0,0,.64),0 0 30px rgba(216,204,255,.035);
}
.hero .lead{
  color:#d3d0da;
}
.hero .btn{
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s cubic-bezier(.22,1,.36,1),background .32s cubic-bezier(.22,1,.36,1),border-color .32s cubic-bezier(.22,1,.36,1),color .32s cubic-bezier(.22,1,.36,1);
}
.hero .btn-lime{
  box-shadow:0 20px 48px rgba(198,255,0,.24),0 9px 28px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.48);
}
.hero .btn-lime:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 66px rgba(198,255,0,.32),0 12px 30px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.54);
}
.hero .btn-ghost{
  background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(124,58,237,.055));
  border-color:rgba(216,204,255,.28);
}
.hero .btn-ghost:hover{
  transform:translateY(-3px);
  border-color:rgba(216,204,255,.42);
  color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(124,58,237,.13));
  box-shadow:0 22px 48px rgba(0,0,0,.3),0 0 34px rgba(124,58,237,.18),inset 0 1px 0 rgba(255,255,255,.14);
}
.product-scene{
  width:min(800px,110%);
}
.product-scene::after{
  width:min(780px,116%);
  height:min(560px,90%);
  background:
    radial-gradient(ellipse at 52% 48%,rgba(124,58,237,.38),rgba(50,25,105,.16) 43%,transparent 75%),
    radial-gradient(ellipse at 70% 30%,rgba(31,214,201,.12),transparent 48%),
    radial-gradient(ellipse at 44% 70%,rgba(198,255,0,.055),transparent 42%);
  opacity:.88;
}
.product-glow{
  width:min(820px,122%);
  height:min(590px,94%);
  background:
    radial-gradient(ellipse at 50% 52%,rgba(124,58,237,.62),rgba(79,37,168,.3) 35%,rgba(28,18,66,.14) 60%,transparent 82%),
    radial-gradient(ellipse at 71% 31%,rgba(31,214,201,.13),transparent 56%),
    radial-gradient(ellipse at 38% 68%,rgba(198,255,0,.06),transparent 52%);
  opacity:.86;
}
.product-pack.is-front{
  filter:brightness(1.12) saturate(1.14);
  box-shadow:0 56px 136px rgba(0,0,0,.76),0 0 98px rgba(124,58,237,.44),0 0 34px rgba(31,214,201,.08),0 0 0 1px rgba(198,255,0,.3);
}
.product-pack.is-right,
.product-pack.is-left{
  filter:brightness(.88) saturate(1.04);
}
.product-pack.is-back{
  filter:brightness(.72) saturate(.98);
}
.product-platform{
  bottom:9.5%;
  height:142px;
  background:
    radial-gradient(ellipse at 50% 48%,rgba(124,58,237,.42),rgba(55,25,119,.2) 42%,rgba(6,6,10,.74) 68%,transparent 82%),
    linear-gradient(90deg,transparent 0%,rgba(31,214,201,.08) 32%,rgba(198,255,0,.08) 46%,rgba(124,58,237,.18) 58%,transparent 100%);
  filter:blur(5px);
}
.product-shadow{
  bottom:15.5%;
  height:84px;
  background:radial-gradient(ellipse,rgba(0,0,0,.72),rgba(24,13,58,.34) 48%,transparent 76%);
  filter:blur(20px);
}
.product-label{
  bottom:10.7%;
  border-color:rgba(198,255,0,.18);
  box-shadow:0 16px 38px rgba(0,0,0,.36),0 0 26px rgba(124,58,237,.2),0 0 18px rgba(31,214,201,.055),inset 0 1px 0 rgba(255,255,255,.11);
}
.hero-proof{
  align-items:center;
  border-color:rgba(216,204,255,.12);
  background:linear-gradient(135deg,rgba(8,8,13,.7),rgba(18,15,30,.38));
}
.hero-proof-item{
  align-items:center;
  padding:10px 20px;
}
.hero-proof-icon{
  flex:none;
  color:#e8dcff;
  box-shadow:0 0 18px rgba(124,58,237,.13),inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-proof-compat .daw-badge{
  background:
    radial-gradient(circle at 34% 16%,rgba(255,255,255,.15),transparent 34%),
    linear-gradient(145deg,rgba(216,204,255,.16),rgba(124,58,237,.09) 48%,rgba(8,8,13,.66));
  border-color:rgba(216,204,255,.23);
}
@media(max-width:1040px){
  .product-scene{
    width:min(730px,100%);
  }
}
@media(max-width:780px){
  .hero{
    background:
      radial-gradient(ellipse 92% 52% at 70% 45%,rgba(95,46,190,.18),transparent 70%),
      linear-gradient(180deg,#050506 0%,#07060b 48%,#050506 100%);
  }
  .product-scene{
    width:100%;
  }
  .hero-proof{
    grid-template-columns:1fr;
  }
  .hero-proof-item{
    min-height:52px;
    padding:11px 15px;
  }
}
@media(max-width:520px){
  .hero-kicker{
    letter-spacing:.17em;
  }
  .hero h1{
    font-size:clamp(2rem,9vw,2.26rem);
  }
  .hero .lead{
    font-size:.98rem;
  }
  .product-glow{
    filter:blur(58px);
    opacity:.78;
  }
  .product-platform{
    bottom:7%;
    height:104px;
  }
  .product-shadow{
    bottom:13%;
    height:58px;
  }
  .product-label{
    bottom:4%;
  }
  .hero-proof{
    margin-top:-2px;
  }
}

/* ---------- hero final balance ---------- */
.hero{
  padding-top:54px;
  row-gap:clamp(16px,2.3vw,30px);
}
.hero-copy{
  transform:translateY(-18px);
}
.hero-proof{
  margin-top:-22px;
}
.hero-proof-item{
  min-height:56px;
}
.hero-proof-compat .daw-line{
  gap:10px;
}
.hero-proof-compat .daw-badge{
  width:36px;
  height:30px;
}
.hero-proof-compat .daw-ableton{
  width:54px;
}
.hero-proof-compat .daw-badge::before{
  width:20px;
  height:24px;
}
.hero-proof-compat .daw-ableton::before{
  width:40px;
  height:16px;
}
.hero + .divider{
  z-index:3;
  height:38px;
  margin:-20px auto 0;
  background:linear-gradient(90deg,transparent,rgba(216,204,255,.09) 26%,rgba(198,255,0,.1) 50%,rgba(216,204,255,.09) 74%,transparent);
}
.hero + .divider span{
  padding:8px 17px 7px;
  border:1px solid rgba(216,204,255,.12);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(8,8,13,.82),rgba(23,17,42,.68));
  color:#dcd5ec;
  box-shadow:0 14px 34px rgba(0,0,0,.32),0 0 20px rgba(124,58,237,.12),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
}
.hero + .divider span::before{
  width:5px;
  height:5px;
  background:var(--lime);
  box-shadow:0 0 12px rgba(198,255,0,.45);
}
.hero + .divider span::after{
  width:14px;
  height:14px;
  border-radius:50%;
  background:transparent;
  border:1px solid rgba(198,255,0,.28);
  box-shadow:inset 0 -3px 0 -2px rgba(198,255,0,.62),0 0 12px rgba(198,255,0,.12);
}
.hero + .divider{
  display:none;
}
@media(min-width:1281px){
  .product-scene{
    width:min(850px,116%);
    margin-left:clamp(-48px,-3vw,-24px);
  }
  .product-pack{
    width:min(392px,66%);
  }
  .product-pack.is-front{
    transform:translate(-50%,-53%) translateZ(132px) scale(1.12) rotateY(-2deg) rotateZ(-1.5deg);
  }
  .product-pack.is-right{
    transform:translate(calc(-50% + 166px),calc(-50% + 4px)) translateZ(-26px) scale(.88) rotateY(-25deg) rotateZ(6deg);
  }
  .product-pack.is-left{
    transform:translate(calc(-50% - 168px),calc(-50% + 16px)) translateZ(-40px) scale(.87) rotateY(27deg) rotateZ(-6deg);
  }
  .product-pack.is-back{
    transform:translate(calc(-50% + 8px),calc(-50% - 62px)) translateZ(-112px) scale(.74) rotateY(5deg) rotateZ(2deg);
  }
}
@media(min-width:1041px) and (max-width:1280px){
  .product-scene{
    width:min(800px,108%);
    margin-left:clamp(-26px,-2vw,-14px);
  }
  .product-pack{
    width:min(374px,62%);
  }
  .product-pack.is-front{
    transform:translate(-50%,-53%) translateZ(126px) scale(1.1) rotateY(-2deg) rotateZ(-1.5deg);
  }
}
@media(max-width:1040px){
  .hero{
    padding-top:70px;
  }
  .hero-copy{
    transform:none;
  }
  .hero-proof{
    margin-top:-8px;
  }
}
@media(max-width:780px){
  .hero + .divider{
    margin-top:-8px;
    height:28px;
  }
  .hero + .divider span{
    padding:6px 13px 5px;
    font-size:.52rem;
    letter-spacing:.2em;
  }
}
@media(max-width:520px){
  .hero{
    padding-top:66px;
  }
  .hero-proof{
    margin-top:0;
  }
  .hero-proof-compat .daw-badge{
    display:none;
  }
  .hero + .divider{
    display:none;
  }
}

/* ---------- hero micro final polish ---------- */
.hero .lead{
  color:#dfdce6;
  text-shadow:0 10px 34px rgba(0,0,0,.3);
}
.hero .btn-ghost{
  border-color:rgba(216,204,255,.34);
  background:linear-gradient(135deg,rgba(255,255,255,.095),rgba(124,58,237,.07));
  box-shadow:0 16px 40px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.1);
}
.hero .btn-ghost:hover{
  transform:translateY(-4px);
  border-color:rgba(232,224,255,.56);
  color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(124,58,237,.17));
  box-shadow:0 24px 54px rgba(0,0,0,.34),0 0 36px rgba(124,58,237,.22),inset 0 1px 0 rgba(255,255,255,.17);
}
.hero-proof-compat .daw-line{
  gap:11px;
  align-items:center;
}
.hero-proof-compat .daw-badge{
  width:38px;
  height:31px;
  border-radius:9px;
  border-color:rgba(216,204,255,.28);
  transform:translateY(-.5px);
  box-shadow:0 10px 24px rgba(0,0,0,.28),0 0 18px rgba(124,58,237,.12),inset 0 1px 0 rgba(255,255,255,.12);
}
.hero-proof-compat .daw-ableton{
  width:58px;
}
.hero-proof-compat .daw-badge::before{
  width:21px;
  height:25px;
  filter:drop-shadow(0 0 7px rgba(216,204,255,.2));
}
.hero-proof-compat .daw-ableton::before{
  width:43px;
  height:17px;
}
.hero-proof-compat .daw-and{
  margin:0 -2px;
  color:#c7bfd6;
}
@media(min-width:1041px){
  .hero{
    column-gap:clamp(52px,6.4vw,96px);
  }
  .hero-copy{
    max-width:660px;
  }
}
@media(min-width:1281px){
  .product-scene{
    margin-left:clamp(-24px,-1.6vw,-14px);
  }
}
@media(min-width:1041px) and (max-width:1280px){
  .product-scene{
    margin-left:clamp(-14px,-1vw,-6px);
  }
}
@media(max-width:780px){
  .hero-proof-compat .daw-line{
    gap:9px;
  }
  .hero-proof-compat .daw-badge{
    width:35px;
    height:29px;
  }
  .hero-proof-compat .daw-ableton{
    width:52px;
  }
}
@media(max-width:520px){
  .hero .lead{
    color:#d8d5df;
    text-shadow:none;
  }
  .hero-proof-compat .daw-line{
    flex:1;
    width:auto;
    min-width:0;
    gap:0;
    white-space:normal;
  }
  .hero-proof-compat .daw-label{
    flex:1;
    min-width:0;
    max-width:100%;
    font-size:.6rem;
    line-height:1.22;
    letter-spacing:0;
  }
}

/* ---------- free kit premium polish ---------- */
#free-kit{
  padding-top:clamp(44px,5vw,70px);
  padding-bottom:clamp(76px,7vw,110px);
}
#free-kit .glow-bg{
  inset:-8% 0 -14%;
  overflow:hidden;
}
#free-kit .glow-bg::before{
  left:16%;
  top:7%;
  width:min(44vw,620px);
  height:min(44vw,620px);
  filter:blur(118px);
  opacity:.24;
}
#free-kit .module{
  --accent:var(--roa);
  position:relative;
  grid-template-columns:minmax(360px,.92fr) minmax(470px,1.08fr);
  gap:clamp(28px,3.3vw,48px);
  align-items:center;
  padding:clamp(30px,3.8vw,50px);
  overflow:hidden;
  border-radius:26px;
  border-color:rgba(156,92,255,.24);
  background:
    radial-gradient(ellipse 48% 42% at 27% 50%,rgba(156,92,255,.18),transparent 68%),
    radial-gradient(ellipse 42% 34% at 83% 16%,rgba(216,204,255,.07),transparent 68%),
    linear-gradient(135deg,rgba(7,7,11,.92) 0%,rgba(11,8,18,.9) 48%,rgba(20,15,33,.76) 100%);
  box-shadow:0 30px 100px rgba(0,0,0,.46),0 0 80px rgba(124,58,237,.13),inset 0 1px 0 rgba(255,255,255,.075);
  backdrop-filter:blur(20px);
}
#free-kit .module::before{
  content:"";
  position:absolute;
  inset:1px;
  z-index:0;
  pointer-events:none;
  border-radius:25px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.045),transparent 34%,rgba(156,92,255,.045) 76%,transparent),
    radial-gradient(circle at 20% 18%,rgba(198,255,0,.035),transparent 24%);
}
#free-kit .module::after{
  content:"";
  position:absolute;
  left:clamp(28px,4vw,58px);
  right:clamp(28px,4vw,58px);
  bottom:clamp(18px,2vw,28px);
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(216,204,255,.13),rgba(156,92,255,.2),transparent);
  opacity:.72;
}
#free-kit .module-media,
#free-kit .module-body{
  position:relative;
  z-index:1;
}
#free-kit .module-media{
  min-height:clamp(410px,36vw,520px);
  padding:0;
  overflow:visible;
  background:transparent;
}
#free-kit .module-media::before{
  inset:4% -3% 9%;
  border-radius:36%;
  background:
    radial-gradient(ellipse at 53% 48%,rgba(156,92,255,.34),rgba(78,37,160,.17) 44%,transparent 74%),
    radial-gradient(ellipse at 68% 35%,rgba(31,214,201,.08),transparent 48%);
  filter:blur(30px);
  opacity:.78;
}
#free-kit .module-media::after{
  inset:auto 8% 4%;
  z-index:0;
  height:26%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.64),rgba(90,48,170,.22) 46%,transparent 74%);
  filter:blur(20px);
  opacity:.9;
}
#free-kit .module-media img{
  width:min(100%,610px);
  border-radius:20px;
  box-shadow:0 40px 112px rgba(0,0,0,.74),0 0 90px rgba(156,92,255,.32),0 0 0 1px rgba(216,204,255,.15);
  transform:translateY(0);
  transition:transform .42s cubic-bezier(.22,1,.36,1),box-shadow .42s cubic-bezier(.22,1,.36,1),filter .42s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
#free-kit .module:hover .module-media img{
  transform:translateY(-9px) scale(1.015);
  filter:saturate(1.08) brightness(1.05);
  box-shadow:0 48px 132px rgba(0,0,0,.8),0 0 112px rgba(156,92,255,.4),0 0 0 1px rgba(216,204,255,.2);
}
#free-kit .module-body{
  padding:clamp(8px,1vw,12px) clamp(10px,1vw,18px);
}
#free-kit .module-body .free-flag{
  margin:0 13px 18px 0;
  padding:7px 12px 6px;
  border:1px solid rgba(156,92,255,.24);
  background:linear-gradient(135deg,rgba(156,92,255,.17),rgba(255,255,255,.035));
  color:#b991ff;
  box-shadow:0 0 24px rgba(156,92,255,.08),inset 0 1px 0 rgba(255,255,255,.08);
}
#free-kit .module-body .kicker{
  margin-bottom:18px;
  color:#c9b4ff;
  opacity:.96;
  vertical-align:middle;
}
#free-kit .module-body .kicker::before{
  width:28px;
  opacity:.45;
  background:rgba(201,180,255,.6);
}
#free-kit .module-body h2{
  max-width:560px;
  margin:2px 0 16px;
  font-size:clamp(2.6rem,3.75vw,4.15rem);
  line-height:.97;
  letter-spacing:-.03em;
  text-shadow:0 22px 64px rgba(0,0,0,.58);
}
#free-kit .module-body h2 .accent{
  color:#9c5cff;
  text-shadow:0 0 32px rgba(156,92,255,.26);
}
#free-kit .module-body>p{
  max-width:560px;
  margin:0 0 20px;
  color:#d7d2df;
  font-size:clamp(.98rem,1.02vw,1.08rem);
  line-height:1.62;
}
#free-kit .spec-list{
  max-width:580px;
  margin:18px 0 20px;
  border-top:1px solid rgba(216,204,255,.1);
}
#free-kit .spec-list li{
  padding:12px 2px 12px 32px;
  border-bottom:1px solid rgba(216,204,255,.1);
  color:#ece8f4;
  font-size:.95rem;
  line-height:1.42;
}
#free-kit .spec-list li::before{
  content:"";
  top:18px;
  left:2px;
  width:7px;
  height:7px;
  border-radius:999px;
  background:linear-gradient(135deg,#c8a8ff,#8f58ff);
  box-shadow:0 0 14px rgba(156,92,255,.42);
}
#free-kit .price-row{
  gap:14px;
  margin:22px 0 20px;
  align-items:baseline;
}
#free-kit .price-row strong{
  color:#fff;
  font-size:2.05rem;
  letter-spacing:-.02em;
  text-shadow:0 16px 42px rgba(0,0,0,.48),0 0 24px rgba(156,92,255,.18);
}
#free-kit .price-row .note{
  padding:6px 12px;
  border:1px solid rgba(216,204,255,.16);
  border-radius:999px;
  color:#f1ecff;
  background:rgba(156,92,255,.1);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.09em;
}
#free-kit .module-body>.btn-accent{
  position:relative;
  width:min(100%,470px);
  min-height:60px;
  border-width:1.5px;
  border-color:rgba(216,204,255,.16);
  color:#09080d;
  background:linear-gradient(135deg,#a96cff 0%,#9157f7 58%,#7d45df 100%);
  box-shadow:0 22px 58px rgba(156,92,255,.3),inset 0 1px 0 rgba(255,255,255,.36);
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s cubic-bezier(.22,1,.36,1),border-color .32s ease,filter .32s ease;
}
#free-kit .module-body>.btn-accent:hover{
  transform:translateY(-5px);
  filter:brightness(1.05) saturate(1.06);
  border-color:rgba(198,255,0,.4);
  box-shadow:0 32px 80px rgba(156,92,255,.42),0 0 40px rgba(198,255,0,.16),inset 0 1px 0 rgba(255,255,255,.5);
}
#free-kit .module-body>.btn-accent:hover span{
  color:#c6ff00;
  text-shadow:0 0 12px rgba(198,255,0,.7);
}
#free-kit .module-body>.btn-accent span{
  display:inline-block;
  transition:color .32s ease,text-shadow .32s ease;
}
@media(max-width:1040px){
  #free-kit .module{
    grid-template-columns:1fr;
    gap:26px;
    padding:clamp(24px,5vw,42px);
  }
  #free-kit .module-media{
    min-height:auto;
  }
  #free-kit .module-media img{
    width:min(100%,520px);
  }
  #free-kit .module-body{
    padding:0;
  }
  #free-kit .module-body h2{
    font-size:clamp(2.6rem,7.8vw,4.05rem);
    line-height:.98;
  }
}
@media(max-width:700px){
  #free-kit{
    padding-top:40px;
    padding-bottom:76px;
  }
  #free-kit .module{
    border-radius:22px;
    gap:22px;
    padding:18px;
  }
  #free-kit .module-media img{
    width:100%;
    border-radius:16px;
  }
  #free-kit .module-body{
    padding:4px 4px 8px;
  }
  #free-kit .module-body .free-flag,
  #free-kit .module-body .kicker{
    margin-bottom:13px;
  }
  #free-kit .module-body h2{
    margin-top:0;
    font-size:clamp(2.3rem,10vw,3.2rem);
    line-height:1;
  }
  #free-kit .module-body>p{
    font-size:1rem;
    line-height:1.62;
  }
  #free-kit .spec-list{
    margin:20px 0;
  }
  #free-kit .spec-list li{
    padding:12px 0 12px 27px;
    font-size:.9rem;
  }
  #free-kit .price-row{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    margin:20px 0;
  }
  #free-kit .module-body>.btn-accent{
    width:100%;
    min-height:58px;
  }
}
@media(max-width:520px){
  #free-kit .module-body h2{
    font-size:clamp(1.8rem,9vw,2.8rem);
    line-height:1.06;
  }
}

/* ── #bundle: ajuste fino premium ── */
#bundle .bundle{
  border-color:color-mix(in srgb,var(--lime) 22%,rgba(156,92,255,.16));
  background:
    radial-gradient(ellipse 60% 46% at 84% 0%,rgba(198,255,46,.055),transparent 62%),
    radial-gradient(ellipse 46% 40% at 6% 100%,rgba(156,92,255,.06),transparent 68%),
    linear-gradient(165deg,rgba(11,13,9,.94) 0%,rgba(9,10,9,.95) 46%,rgba(6,7,6,.97) 100%);
  box-shadow:
    0 40px 120px rgba(0,0,0,.55),
    0 0 90px rgba(198,255,46,.08),
    inset 0 1px 0 rgba(255,255,255,.06);
}
#bundle .bundle-banner{
  margin:26px 36px 0;
  border:1px solid color-mix(in srgb,var(--lime) 22%,var(--line));
  border-radius:18px;
  overflow:hidden;
  background:#050506;
  box-shadow:0 26px 70px rgba(0,0,0,.5),0 0 40px color-mix(in srgb,var(--lime) 9%,transparent);
}
#bundle .bundle-banner img{
  object-fit:contain;
  border-radius:0;
}
#bundle .bundle-banner .bundle-image-desktop{
  aspect-ratio:16/9;
}
#bundle .bundle-banner .bundle-image-mobile{
  display:none;
  aspect-ratio:1/1;
}
@media(max-width:768px){
  #bundle .bundle-banner .bundle-image-desktop{
    display:none;
  }
  #bundle .bundle-banner .bundle-image-mobile{
    display:block;
  }
}
#bundle .bundle-banner::after{
  height:14%;
  background:linear-gradient(to top,rgba(6,7,5,.5) 0%,transparent 100%);
}
#bundle .bundle-banner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(198,255,46,.05);
}
#bundle .bundle-grid{
  padding:56px 58px 58px;
  gap:70px;
}

/* bloque izquierdo */
#bundle .bundle-top{
  gap:12px 14px;
  margin-bottom:10px;
}
#bundle .pill{
  padding:7px 13px;
  border-color:color-mix(in srgb,var(--lime) 34%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--lime) 12%,transparent),color-mix(in srgb,var(--lime) 3%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 18px color-mix(in srgb,var(--lime) 9%,transparent);
  font-weight:800;
  letter-spacing:.12em;
}
#bundle .bundle-info h2{
  max-width:560px;
  margin:6px 0 20px;
  font-size:clamp(2.35rem,4vw,3.85rem);
  line-height:.98;
  letter-spacing:-.03em;
  text-shadow:0 20px 60px rgba(0,0,0,.5);
}
#bundle .bundle-info h2 .accent{
  text-shadow:0 0 30px color-mix(in srgb,var(--lime) 30%,transparent);
}
#bundle .bundle-artists{
  gap:8px 10px;
  margin:22px 0 4px;
}
#bundle .bundle-artists span{
  padding:7px 14px;
  border-radius:999px;
  font-size:.7rem;
  letter-spacing:.1em;
  border:1px solid color-mix(in srgb,currentColor 34%,transparent);
  background:color-mix(in srgb,currentColor 8%,transparent);
}
#bundle .bundle-list{
  margin:26px 0 0;
}
#bundle .bundle-list li{
  padding:12px 2px 12px 30px;
  border-bottom:1px solid rgba(255,255,255,.07);
  color:#ece9e2;
  font-size:.93rem;
  line-height:1.4;
}
#bundle .bundle-list li:last-child{
  border-bottom:none;
}
#bundle .bundle-list li::before{
  content:"";
  top:16px;
  left:2px;
  width:7px;
  height:7px;
  border-radius:999px;
  background:linear-gradient(135deg,#e4ff8f,var(--lime));
  box-shadow:0 0 14px color-mix(in srgb,var(--lime) 55%,transparent);
}

/* card de precio */
#bundle .buy-box{
  padding:34px 32px;
  border-radius:20px;
  border-width:1.5px;
  border-color:color-mix(in srgb,var(--lime) 34%,rgba(156,92,255,.14));
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,color-mix(in srgb,var(--lime) 9%,transparent),transparent 68%),
    linear-gradient(165deg,rgba(15,17,12,.88) 0%,rgba(8,9,8,.94) 100%);
  box-shadow:
    0 34px 100px rgba(0,0,0,.55),
    0 0 74px color-mix(in srgb,var(--lime) 13%,transparent),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
}
#bundle .buy-flag{
  padding:7px 12px;
  border-radius:7px;
  box-shadow:0 8px 22px color-mix(in srgb,var(--lime) 30%,transparent);
}
#bundle .price-cmp{
  margin:30px 0 20px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#bundle .price-cmp .now{
  text-shadow:0 16px 40px rgba(0,0,0,.5);
}
#bundle .save{
  margin-bottom:28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 24px color-mix(in srgb,var(--lime) 6%,transparent);
}
#bundle .save span{
  color:#c8c5bd;
}
#bundle .buy-box .btn-lime{
  min-height:60px;
  border-width:1.5px;
  border-color:color-mix(in srgb,var(--lime) 40%,transparent);
  background:linear-gradient(135deg,#daff6e 0%,var(--lime) 55%,#a7e01c 100%);
  box-shadow:0 22px 56px color-mix(in srgb,var(--lime) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s cubic-bezier(.22,1,.36,1),filter .32s ease;
}
#bundle .buy-box .btn-lime:hover{
  transform:translateY(-4px) scale(1.01);
  filter:brightness(1.05);
  box-shadow:0 30px 74px color-mix(in srgb,var(--lime) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.5);
}
#bundle .buy-note{
  margin-top:16px;
  opacity:.92;
}
#bundle .buy-box .fine{
  margin-top:15px;
  color:#a8a59f;
  line-height:1.5;
}

@media(max-width:1040px){
  #bundle .bundle-banner{
    margin:20px 24px 0;
  }
  #bundle .bundle-grid{
    padding:36px 40px 46px;
    gap:40px;
  }
  #bundle .bundle-info h2{
    font-size:clamp(2.4rem,6vw,3.6rem);
  }
}
@media(max-width:780px){
  #bundle .bundle-banner{
    margin:16px 16px 0;
    border-radius:15px;
  }
  #bundle .bundle-grid{
    padding:26px 22px 32px;
    gap:32px;
  }
  #bundle .bundle-info h2{
    font-size:clamp(2.2rem,8vw,3.2rem);
    margin:4px 0 16px;
  }
  #bundle .buy-box{
    padding:26px 22px;
  }
  #bundle .price-cmp .now{
    font-size:clamp(2rem,9vw,2.8rem);
  }
  #bundle .buy-box .btn-lime{
    width:100%;
  }
}
@media(max-width:520px){
  #bundle .bundle-banner{
    margin:12px 12px 0;
    border-radius:13px;
  }
  #bundle .bundle-info h2{
    font-size:clamp(1.7rem,8vw,2.4rem);
    line-height:1.05;
  }
  #bundle .bundle-artists span{
    font-size:.66rem;
    padding:6px 11px;
  }
  #bundle .price-cmp{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  #bundle .price-cmp .now{
    font-size:clamp(2.1rem,11vw,2.6rem);
  }
}

/* ── #reviews: reseñas / prueba social ── */
#reviews{padding-top:16px}
#reviews .glow-bg::before{
  left:10%;top:6%;width:min(36vw,440px);
  filter:blur(110px);opacity:.16;
  background:radial-gradient(circle,color-mix(in srgb,var(--lime) 46%,transparent),transparent 72%);
}
#reviews .glow-bg::after{
  right:8%;bottom:10%;width:min(30vw,380px);
  filter:blur(100px);opacity:.14;
  background:radial-gradient(circle,color-mix(in srgb,var(--roa) 42%,transparent),transparent 72%);
}
#reviews .section-head h2{
  max-width:720px;
  font-size:clamp(2.1rem,3.3vw,3.4rem);
  line-height:1.02;
  letter-spacing:-.025em;
}

.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:56px;
}
.review-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:26px 24px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:linear-gradient(155deg,rgba(255,255,255,.025),rgba(255,255,255,.005) 60%,rgba(198,255,46,.01));
  box-shadow:0 16px 40px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.03);
  transition:transform .34s cubic-bezier(.22,1,.36,1),border-color .34s ease,box-shadow .34s cubic-bezier(.22,1,.36,1);
}
.review-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--lime) 22%,rgba(255,255,255,.08));
  box-shadow:0 24px 54px rgba(0,0,0,.32),0 0 26px color-mix(in srgb,var(--lime) 6%,transparent),inset 0 1px 0 rgba(255,255,255,.05);
}
.review-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.review-stars{
  color:color-mix(in srgb,var(--lime) 55%,var(--muted));
  font-size:.7rem;
  letter-spacing:.1em;
  opacity:.85;
}
.review-product{
  padding:5px 11px;
  border:1px solid color-mix(in srgb,var(--lime) 30%,transparent);
  border-radius:999px;
  color:var(--lime);
  background:color-mix(in srgb,var(--lime) 6%,transparent);
  font-family:"Space Mono",monospace;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.review-quote{
  flex:1;
  margin:0;
  color:#d8d5cf;
  font-size:.92rem;
  line-height:1.62;
}
.review-person{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.07);
}
.review-avatar{
  flex:none;
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:50%;
  color:#08080a;
  background:var(--rc,var(--lime));
  font-family:"Space Mono",monospace;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 0 12px color-mix(in srgb,var(--rc,var(--lime)) 28%,transparent);
}
.review-who{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.review-who strong{color:#f4f3f0;font-size:.84rem;font-weight:800}
.review-who span{color:var(--muted);font-size:.72rem}

.reviews-trust{
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(12,12,18,.6),rgba(18,18,28,.32));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 50px rgba(0,0,0,.22);
  backdrop-filter:blur(16px);
  overflow:hidden;
}
.reviews-trust-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:64px;
  padding:14px 18px;
  color:#eae7e0;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-align:center;
  border-left:1px solid rgba(255,255,255,.08);
}
.reviews-trust-item:first-child{border-left:0}
.reviews-trust-icon{
  flex:none;
  width:26px;height:26px;
  display:grid;place-items:center;
  border-radius:9px;
  color:var(--lime);
  border:1px solid color-mix(in srgb,var(--lime) 30%,transparent);
  background:color-mix(in srgb,var(--lime) 8%,transparent);
}

@media(max-width:1040px){
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .reviews-grid{grid-template-columns:1fr;gap:16px;margin-top:40px}
  .review-card{padding:22px 20px}
  .reviews-trust{grid-template-columns:1fr;margin-top:36px}
  .reviews-trust-item{border-left:0;border-top:1px solid rgba(255,255,255,.08);justify-content:flex-start}
  .reviews-trust-item:first-child{border-top:0}
}
@media(max-width:520px){
  .review-quote{font-size:.9rem}
  .reviews-trust-item{font-size:.68rem;padding:13px 16px}
}