:root{
  --bg:#050507;
  --bg-raised:#0d0d12;
  --ink:#f3f1ec;
  --ink-dim:#adadb5;
  --ink-faint:#8a8a92;
  --accent:#b3122f;
  --accent-rgb:179,18,47;
  --accent-dim:#3a0a12;
  --accent2:#c9a13b;
  --accent2-rgb:201,161,59;
  --accent3:#8a5a2b;
  --line:#241e26;
  --danger:#ff4319;
  --radius:20px;
  --radius-sm:10px;
  --maxw:1200px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{ overflow:hidden; }
h1,h2,h3,.display{
  font-family:'Bebas Neue',sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.01em; line-height:.95;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img{ max-width:100%; display:block; }
input{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--accent2); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; }
  /* Este parpadeo de neón se deja prendido siempre, incluso con
     "reducir movimiento" activado en el celular/compu. */
  .hero h1 em{ animation:neon-flicker-em 4s ease-in-out infinite !important; }
  .logo span{ animation:neon-flicker 4s ease-in-out infinite !important; }
}

/* ---------- fondo ---------- */
@keyframes neon-flicker{
  0%,100%{ opacity:1; }
  7%{ opacity:1; }
  8%{ opacity:.35; }
  9%{ opacity:1; }
  10%{ opacity:.55; }
  11%{ opacity:1; }
  55%{ opacity:1; }
  56%{ opacity:.4; }
  57%{ opacity:1; }
  58%{ opacity:.6; }
  59%{ opacity:1; }
}
@keyframes neon-flicker-em{
  0%,100%{ opacity:1; text-shadow:0 0 2px rgba(0,0,0,.85), 0 0 6px var(--accent); }
  7%{ opacity:1; text-shadow:0 0 2px rgba(0,0,0,.85), 0 0 6px var(--accent); }
  8%{ opacity:.5; text-shadow:none; }
  9%{ opacity:1; text-shadow:0 0 2px rgba(0,0,0,.85), 0 0 6px var(--accent); }
  10%{ opacity:.7; text-shadow:none; }
  11%{ opacity:1; text-shadow:0 0 2px rgba(0,0,0,.85), 0 0 6px var(--accent); }
  12%{ opacity:1; text-shadow:0 0 2px rgba(0,0,0,.85), 0 0 6px var(--accent); }
  55%{ opacity:1; text-shadow:0 0 2px rgba(0,0,0,.85), 0 0 6px var(--accent); }
  56%{ opacity:.6; text-shadow:none; }
  57%{ opacity:1; text-shadow:0 0 2px rgba(0,0,0,.85), 0 0 6px var(--accent); }
  58%{ opacity:.75; text-shadow:none; }
  59%{ opacity:1; text-shadow:0 0 2px rgba(0,0,0,.85), 0 0 6px var(--accent); }
  60%{ opacity:1; text-shadow:0 0 2px rgba(0,0,0,.85), 0 0 6px var(--accent); }
}
.neon-divider{
  height:1px; max-width:var(--maxw); margin:0 auto; border:none;
  background:linear-gradient(90deg, transparent, var(--divider-c, var(--accent)) 50%, transparent);
  box-shadow:0 0 8px 1px var(--divider-c, var(--accent));
  opacity:.4;
}

.glow-blob{ position:absolute; border-radius:50%; filter:blur(110px); pointer-events:none; mix-blend-mode:screen; opacity:.18; z-index:0; }
.blob-a{ width:380px; height:380px; background:var(--accent); top:-80px; right:6%; }
.blob-b{ width:280px; height:280px; background:var(--accent2); bottom:-60px; left:4%; opacity:.10; }
.blob-c{ width:340px; height:340px; background:var(--accent); top:50%; left:50%; transform:translate(-50%,-50%); opacity:.09; }
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999; opacity:.02; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- barra de redes ---------- */
.topbar{
  display:flex; justify-content:flex-end; align-items:center; gap:18px;
  padding:8px 5vw; background:var(--bg); position:relative; z-index:101;
}
.topbar a{
  display:flex; align-items:center; gap:5px; font-size:11px; letter-spacing:.03em;
  color:var(--ink-faint); transition:color .2s, text-shadow .2s;
}
.topbar a:hover{ color:var(--ink); }
.topbar svg{ width:13px; height:13px; flex-shrink:0; }
.topbar span{ white-space:nowrap; }
@media (max-width:640px){
  .topbar span{ display:none; }
  .topbar{ gap:16px; }
}

/* ---------- cartel de kit gratis ---------- */
.promo-banner{
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; text-align:center;
  background:linear-gradient(100deg, var(--accent2) 0%, #e0bb5c 50%, var(--accent2) 100%);
  color:var(--bg); padding:11px 44px 11px 16px; font-size:13px; position:sticky; top:0; z-index:110;
}
.promo-banner strong{ font-weight:800; }
.promo-banner-cta{
  background:var(--bg); color:var(--accent2); font-weight:800; font-size:14px;
  letter-spacing:.03em; text-transform:uppercase; padding:11px 24px;
  border-radius:var(--radius-sm); transition:filter .15s, transform .15s;
  flex-shrink:0;
}
.promo-banner-cta:hover{ filter:brightness(1.3); transform:scale(1.04); }
.promo-banner-close{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  color:var(--bg); opacity:.7; border-radius:50%; transition:opacity .15s, background .15s;
}
.promo-banner-close:hover{ opacity:1; background:rgba(0,0,0,.12); }
@media (max-width:560px){
  .promo-banner{ font-size:12.5px; padding:10px 40px 10px 12px; }
}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px 5vw;
  background:rgba(5,5,7,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* en compu: 3 columnas (logo | menú | botón) para que el menú quede centrado en la pantalla
   aunque el logo y el botón tengan anchos distintos */
@media (min-width:761px){
  header{ display:grid; grid-template-columns:1fr auto 1fr; }
  header > .logo{ justify-self:start; }
  header > .cart-btn{ justify-self:end; }
}
.logo{ font-size:22px; letter-spacing:.03em; flex-shrink:0; }
.logo span{ color:var(--accent); text-shadow:0 0 5px currentColor, 0 0 12px rgba(179,18,47,.5); animation:neon-flicker 4s ease-in-out infinite; }
nav{ display:flex; gap:28px; }
nav a{
  position:relative; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .2s; white-space:nowrap; padding-bottom:4px;
}
nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--accent);
  transition:right .25s ease;
}
nav a:hover, nav a.active{ color:var(--ink); }
nav a:hover::after, nav a.active::after{ right:0; }
.cart-btn{
  display:flex; align-items:center; gap:8px; flex-shrink:0;
  border:1px solid var(--line); padding:9px 14px; font-size:13px;
  letter-spacing:.05em; text-transform:uppercase; border-radius:var(--radius-sm);
  transition:border-color .2s, box-shadow .2s;
}
.cart-btn:hover{ border-color:var(--accent); }
.cart-count{
  background:var(--accent); color:var(--ink); font-weight:800; font-size:11px;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- hero ---------- */
.hero{
  display:flex; flex-direction:column; justify-content:flex-start; align-items:center; text-align:center;
  padding:48px 5vw 64px; position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(179,18,47,.06), transparent 60%),
    radial-gradient(ellipse 40% 40% at 10% 90%, rgba(201,161,59,.04), transparent 60%);
}
.hero > *:not(.glow-blob){ position:relative; z-index:1; }
.hero-eyebrow{
  font-size:12px; letter-spacing:.25em; text-transform:uppercase; color:var(--ink-dim);
  margin-bottom:16px; display:flex; align-items:center; justify-content:center; gap:10px;
}
.hero h1{
  font-family:'Unbounded',sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:-.01em; line-height:1.08; font-size:clamp(28px,4.6vw,58px); max-width:16ch;
}
.hero h1 em{
  font-style:normal; color:var(--accent);
  text-shadow:0 0 2px rgba(0,0,0,.85), 0 0 6px var(--accent);
  animation:neon-flicker-em 4s ease-in-out infinite;
}
.hero-sub{ margin:18px auto 0; max-width:480px; font-size:14.5px; line-height:1.55; color:var(--ink-dim); }
.hero-artists{ margin:14px auto 0; max-width:540px; font-size:13px; line-height:1.6; color:var(--ink-dim); }
.hero-artists u{
  color:var(--ink); text-decoration:none; font-weight:700;
  background-image:linear-gradient(rgba(201,161,59,.55), rgba(201,161,59,.55));
  background-repeat:no-repeat; background-size:100% 1px; background-position:0 100%;
  padding-bottom:2px;
}
.hero-cta{ margin-top:26px; display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; }
.hero-stats{
  margin:36px auto 0; display:flex; gap:32px; flex-wrap:wrap; justify-content:center;
  padding-top:18px; border-top:1px solid var(--line); max-width:640px;
}
.hero-stat{ text-align:center; }
.hero-stat strong{
  display:block; font-family:'Bebas Neue',sans-serif; font-size:24px; line-height:1; color:#fff;
}
.hero-stat span{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent2); }

.btn-primary{
  background:var(--accent); color:var(--ink); font-weight:800; padding:14px 30px;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; border-radius:var(--radius-sm);
  transition:transform .15s, box-shadow .3s; display:inline-block;
  box-shadow:none;
}
.btn-primary:hover{ filter:brightness(1.08); }

.hero-cta .btn-primary{
  padding:22px 52px; font-size:16px; letter-spacing:.09em; border-radius:14px;
  box-shadow:0 14px 40px -12px rgba(var(--accent-rgb),.4), 0 0 0 1px rgba(255,255,255,.06) inset;
  animation:heroCtaPulse 2.6s ease-in-out infinite;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, filter .25s ease;
}
.hero-cta .btn-primary:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 20px 50px -12px rgba(var(--accent-rgb),.55), 0 0 0 1px rgba(255,255,255,.1) inset;
  filter:brightness(1.12);
  animation-play-state:paused;
}
@keyframes heroCtaPulse{
  0%,100%{ box-shadow:0 14px 40px -12px rgba(var(--accent-rgb),.32), 0 0 0 1px rgba(255,255,255,.06) inset; }
  50%{ box-shadow:0 14px 46px -8px rgba(var(--accent-rgb),.55), 0 0 0 1px rgba(255,255,255,.06) inset; }
}
@media (prefers-reduced-motion: reduce){
  .hero-cta .btn-primary{ animation:none; }
}
.btn-ghost{
  border:1.5px solid var(--accent2); padding:14px 28px; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent2); border-radius:var(--radius-sm); font-weight:700;
  transition:border-color .2s, color .2s, box-shadow .2s, background .2s; display:inline-block;
  }
.btn-ghost:hover{ background:rgba(201,161,59,.08); }

/* ---------- secciones ---------- */
.category-section{ padding:64px 5vw; position:relative; background:var(--bg-raised); --cat:var(--accent2); }
.category-section::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--cat) 50%, transparent);
  opacity:.5;
}
.category-section::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 60% 40% at 15% 0%, rgba(201,161,59,.06), transparent 60%);
}
.category-section[data-cat="bundles"]::after{
  background:radial-gradient(ellipse 60% 40% at 85% 0%, rgba(138,90,43,.07), transparent 60%);
}
.category-section > *{ position:relative; z-index:1; }
.section-head{ display:flex; flex-direction:column; align-items:center; text-align:center; margin:0 auto 36px; max-width:var(--maxw); gap:8px; }
.eyebrow-line{
  font-size:12px; letter-spacing:.25em; text-transform:uppercase; color:var(--accent2);
  text-shadow:none;
  display:flex; align-items:center; gap:10px;
}
.eyebrow-line::before, .eyebrow-line::after{
  content:''; width:24px; height:1px; background:var(--ink-faint);
}
.section-head h2{
  font-family:'Inter',sans-serif; font-weight:600; text-transform:none;
  letter-spacing:0; line-height:1.1;
  font-size:clamp(24px,3.6vw,38px);
  text-shadow:none;
}
.section-head p{ color:var(--ink); font-size:13px; max-width:52ch; line-height:1.55; }

/* ---------- grid de packs ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,300px)); justify-content:center; gap:20px; max-width:var(--maxw); margin:0 auto; }

.coming-soon{
  max-width:var(--maxw); margin:0 auto; padding:56px 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  border:1.5px dashed var(--line); border-radius:var(--radius);
}
.coming-soon svg{ color:var(--cat, var(--accent2)); opacity:.85; margin-bottom:4px; }
.coming-soon-title{
  font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cat, var(--accent2));
}
.coming-soon p{ color:var(--ink-dim); font-size:13px; max-width:44ch; line-height:1.6; }

.card{
  background:var(--bg); display:flex; flex-direction:column; position:relative; overflow:hidden;
  cursor:pointer; border:1px solid var(--line); border-radius:var(--radius); text-align:left;
  box-shadow:0 0 0 0 rgba(0,0,0,0);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .5s ease;
}
.card.reveal:hover{
  transform:translateY(-14px) scale(1.06);
  box-shadow:0 32px 46px -14px rgba(0,0,0,.65), 0 16px 46px -16px rgba(var(--accent-rgb),.28);
  z-index:2;
}
.card.is-free.reveal:hover{
  box-shadow:0 32px 46px -14px rgba(0,0,0,.65), 0 16px 46px -16px rgba(var(--accent2-rgb),.28);
}
.card-art{
  aspect-ratio:1/1; position:relative; display:flex; align-items:flex-end; justify-content:space-between;
  padding:18px; background:linear-gradient(160deg, var(--bg-raised), #050507); overflow:hidden;
}
.card-art::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, var(--flame-a,var(--accent)) 0%, transparent 45%),
             radial-gradient(circle at 80% 85%, var(--flame-b,var(--accent2)) 0%, transparent 40%);
  opacity:.35; filter:blur(2px); transition:opacity .4s, transform .4s;
}
.card:hover .card-art::before{ opacity:.6; transform:scale(1.08); }
.card-art.has-image::before{ display:none; }
.card-art.has-image{
  background-color:var(--bg-raised);
}
.card-art.has-image::after{
  content:''; position:absolute; left:0; right:0; top:0; height:45%;
  background:linear-gradient(180deg, rgba(5,5,7,.85), transparent); pointer-events:none;
}
.card-art.has-image .card-tag{
  position:absolute; top:14px; right:14px; left:auto; bottom:auto;
}
.card-art .wave{ position:absolute; left:0; right:0; bottom:0; height:60px; opacity:.28; }
.preview-btn{
  position:relative; z-index:2; width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,5,7,.55); border:1px solid rgba(243,241,236,.25); backdrop-filter:blur(4px);
  color:var(--ink); cursor:pointer; transition:background .2s, transform .15s, border-color .2s, color .2s;
}
.preview-btn:hover{ transform:scale(1.08); }
.card:not(.is-free) .preview-btn:hover{ border-color:var(--accent); }
.card.is-free .preview-btn:hover{ border-color:var(--accent2); }
.preview-btn .icon-play{ margin-left:2px; }
.preview-btn .icon-pause{ display:none; }
.preview-btn.is-playing{ border-color:var(--accent2); color:var(--accent2); }
.preview-btn.is-playing .icon-play{ display:none; }
.preview-btn.is-playing .icon-pause{ display:block; }
.preview-btn.is-playing::after{
  content:''; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--accent2);
  animation:previewPulse 1.4s ease-out infinite;
}
@keyframes previewPulse{
  0%{ opacity:.7; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.4); }
}
@media (prefers-reduced-motion: reduce){
  .preview-btn.is-playing::after{ animation:none; }
}
.card-tag{
  position:relative; z-index:1; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border:1px solid rgba(243,241,236,.25); background:rgba(5,5,7,.45);
  backdrop-filter:blur(4px); border-radius:20px;
}
.card-tag.free{ border-color:var(--accent2); color:var(--accent2); }
.card-tag.bundle{ border-color:var(--accent); color:var(--accent); }
.card-body{ padding:18px; flex:1; display:flex; flex-direction:column; box-shadow:inset 0 1px 0 var(--line); position:relative; }
.card-body h3{
  font-family:'Inter',sans-serif; font-weight:600; text-transform:none;
  letter-spacing:0; line-height:1.2; font-size:18px; margin-bottom:9px;
}
.card-features{ list-style:none; display:flex; flex-direction:column; gap:5px; margin-bottom:14px; flex:1; }
.card-features li{ font-size:12px; color:var(--ink-dim); display:flex; gap:6px; align-items:flex-start; line-height:1.35; }
.card-features li::before{ content:'▸'; color:var(--accent); flex-shrink:0; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.price{ font-family:'Bebas Neue',sans-serif; font-size:23px; letter-spacing:.02em; text-shadow:none; }
.price.free{
  text-shadow:none;
  color:var(--accent2); /* respaldo sólido: si el navegador no soporta el degradé de abajo, se ve este color en vez de quedar invisible */
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .price.free{
    background:linear-gradient(100deg, var(--accent2) 40%, #fff 50%, var(--accent2) 60%);
    background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
    animation:freeShine 2.6s linear infinite;
  }
}
@keyframes freeShine{
  0%{ background-position:200% 0; }
  100%{ background-position:-100% 0; }
}
@media (prefers-reduced-motion: reduce){
  /* Este brillo se deja prendido siempre, igual que el parpadeo del título. */
  .price.free, .detail-price.free{ animation:freeShine 2.6s linear infinite !important; }
}
.price s{ font-family:'Inter',sans-serif; font-size:12px; color:var(--ink-faint); margin-right:5px; font-weight:500; text-shadow:none; }
.card-cta{
  background:var(--accent); color:var(--ink); font-weight:800; font-size:11.5px; letter-spacing:.05em;
  text-transform:uppercase; padding:9px 15px; border-radius:var(--radius-sm);
  transition:filter .2s, transform .15s, box-shadow .2s; white-space:nowrap;
  }
.card-cta:hover{ filter:brightness(1.12); transform:scale(1.06); }
.card-cta.free{ background:var(--accent2); }
.card-cta.free:hover{ filter:brightness(1.12); transform:scale(1.06); }
.card-cta.in-cart{ background:transparent; border:1px solid var(--line); color:var(--ink-dim); }
/* contenido del detalle de cada producto: está en el HTML pero solo se muestra dentro del modal */
.card-detail{ display:none; }

/* ---------- reveal al hacer scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.visible{ opacity:1; transform:none; }

/* ---------- franja ---------- */
.strip{
  padding:64px 5vw; text-align:center; position:relative; overflow:hidden;
  border-bottom:1px solid var(--line); background:var(--bg-raised);
}
.strip::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent3) 50%, transparent);
  opacity:.5;
}
.strip > *:not(.glow-blob){ position:relative; z-index:1; }
.strip h2{ font-size:clamp(22px,3.2vw,32px); max-width:20ch; margin:0 auto 14px; }
.strip p{ color:var(--ink-dim); max-width:60ch; margin:0 auto; line-height:1.6; font-size:13.5px; }
.strip p + p{ margin-top:12px; }
.strip p strong{ color:var(--ink); }
.strip p a{ color:var(--ink); border-bottom:1px solid rgba(201,161,59,.55); transition:color .2s; }
.strip p a:hover{ color:var(--accent2); }

/* ---------- captura de email ---------- */
.free-band{ padding:64px 5vw; }
.free-box{
  max-width:980px; margin:0 auto; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(22px,4vw,40px); background:
    radial-gradient(ellipse 70% 100% at 100% 0%, rgba(201,161,59,.10), transparent 60%), var(--bg-raised);
  display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:center;
}
.free-art{
  aspect-ratio:1/1; border-radius:16px; background-size:cover; background-position:center;
  background-color:var(--bg-raised); position:relative; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 20px 45px -22px rgba(0,0,0,.7);
}
.free-art::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(5,5,7,.6));
}
.free-art::before{
  content:'GRATIS'; position:absolute; top:10px; left:10px; z-index:1;
  background:var(--accent2); color:#050507; font-weight:800; font-size:10px;
  letter-spacing:.08em; padding:5px 10px; border-radius:999px;
}
.free-content{ display:grid; grid-template-columns:1.15fr 1fr; gap:30px; align-items:center; }
.free-box h2{ font-size:clamp(22px,3vw,32px); margin-bottom:10px; }
.free-box p{ color:var(--ink-dim); line-height:1.55; font-size:13px; }
.inline-form{ display:flex; flex-direction:column; gap:10px; }
.inline-form input{
  width:100%; padding:12px 14px; background:var(--bg); border:1px solid var(--line);
  color:var(--ink); font-size:13.5px; border-radius:var(--radius-sm);
}
.inline-form input:focus{ outline:none; border-color:var(--accent2); }
.inline-form button{
  background:var(--accent2); color:#050507; font-weight:800; padding:12px; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; border-radius:var(--radius-sm); transition:filter .2s;
}
.inline-form button:hover{ filter:brightness(1.1); }
.form-note{ font-size:11px; color:var(--ink-faint); }

/* ---------- footer ---------- */
footer{
  padding:36px 5vw; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  font-size:13px; color:var(--ink-faint);
}
.foot-links{ display:flex; gap:24px; }
.foot-links a{ transition:color .2s; }
.foot-links a:hover{ color:var(--ink); }

/* ---------- overlay ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; z-index:200;
}
.overlay.open{ opacity:1; visibility:visible; }

/* ---------- carrito ---------- */
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); background:var(--bg-raised);
  border-left:1px solid var(--line); z-index:300; transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column;
}
.drawer.open{ transform:none; }
.drawer-head{ padding:24px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.drawer-head h3{ font-size:24px; }
.drawer-close, .modal-close{
  font-size:22px; line-height:1; color:var(--ink); transition:background .2s, transform .15s;
  background:rgba(5,5,7,.55); border:1px solid rgba(255,255,255,.12);
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.drawer-close:hover, .modal-close:hover{ background:rgba(5,5,7,.8); transform:scale(1.06); }
.drawer-items{ flex:1; overflow-y:auto; padding:16px 24px; }
.drawer-empty{ color:var(--ink-faint); text-align:center; padding:60px 0; font-size:14px; }
.drawer-item{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.drawer-item-name{ font-weight:600; font-size:14px; margin-bottom:4px; }
.drawer-item-meta{ font-size:12px; color:var(--ink-faint); }
.drawer-item-price{ color:var(--accent); font-size:14px; font-weight:700; }
.remove-btn{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--line); padding:6px 10px; border-radius:6px; transition:color .2s, border-color .2s; }
.remove-btn:hover{ color:var(--danger); border-color:var(--danger); }
.drawer-foot{ padding:24px; border-top:1px solid var(--line); }
.drawer-total{ display:flex; justify-content:space-between; margin-bottom:18px; font-size:14px; text-transform:uppercase; letter-spacing:.06em; }
.drawer-total strong{ font-family:'Bebas Neue',sans-serif; font-size:28px; color:var(--accent); }
.checkout-btn{ width:100%; background:var(--accent); color:var(--ink); font-weight:800; padding:16px; font-size:14px; letter-spacing:.06em; text-transform:uppercase; border-radius:var(--radius-sm); transition:filter .2s; }
.checkout-btn:hover{ filter:brightness(1.12); }
.checkout-note{ margin-top:12px; font-size:11px; color:var(--ink-faint); text-align:center; }

/* ---------- modales ---------- */
.modal{
  position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
  background:rgba(0,0,0,.78); backdrop-filter:blur(4px); overflow-y:auto;
}
.modal.open{ opacity:1; visibility:visible; }
.modal-box{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:40px; max-width:460px; width:100%; position:relative;
  transform:translateY(16px); transition:transform .3s;
}
.modal.open .modal-box, .modal.open .detail-box{ transform:none; }
.modal-close{ position:absolute; top:14px; right:14px; z-index:5; }
.modal-box h3{ font-size:28px; margin-bottom:12px; }
.modal-box p{ color:var(--ink-dim); font-size:14px; line-height:1.6; margin-bottom:22px; }
.modal-box input{ width:100%; padding:15px 16px; background:var(--bg); border:1px solid var(--line); color:var(--ink); font-size:15px; border-radius:var(--radius-sm); margin-bottom:14px; }
.modal-box input:focus{ outline:none; border-color:var(--accent2); }
.modal-submit{ width:100%; background:var(--accent2); color:#050507; font-weight:800; padding:15px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; border-radius:var(--radius-sm); transition:filter .2s; }
.modal-submit:hover{ filter:brightness(1.1); }
.modal-success{ display:none; text-align:center; }
.modal-success.show{ display:block; }

/* ---------- detalle de producto ---------- */
.detail-box{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius);
  max-width:880px; width:100%; max-height:88vh; max-height:88dvh; position:relative; overflow:hidden;
  transform:translateY(16px); transition:transform .3s; margin:auto;
}
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; max-height:88vh; max-height:88dvh; }
.detail-art{
  position:relative; height:100%; min-height:340px; max-height:88vh; max-height:88dvh;
  background:linear-gradient(160deg,var(--bg-raised),#050507); overflow:hidden;
}
.detail-art::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, var(--flame-a,var(--accent)) 0%, transparent 45%),
             radial-gradient(circle at 80% 85%, var(--flame-b,var(--accent2)) 0%, transparent 40%);
  opacity:.5; filter:blur(2px);
}
.detail-art.has-image{ background-color:var(--bg-raised); }
.detail-art.has-image::before{ display:none; }
.detail-art .wave{ position:absolute; left:0; right:0; bottom:0; height:90px; opacity:.3; }
.detail-info{ padding:36px; display:flex; flex-direction:column; min-height:0; max-height:88vh; max-height:88dvh; }
.detail-scroll{
  display:flex; flex-direction:column;
  overflow-y:auto; flex:1 1 auto; min-height:0; -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  padding-bottom:14px; margin-bottom:-14px;
}
.detail-tag{ align-self:flex-start; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border:1px solid rgba(243,241,236,.25); border-radius:20px; margin-bottom:14px; }
.detail-tag.free{ border-color:var(--accent2); color:var(--accent2); }
.detail-tag.bundle{ border-color:var(--accent); color:var(--accent); }
.detail-info h3{
  font-family:'Inter',sans-serif; font-weight:600; text-transform:none;
  letter-spacing:0; line-height:1.2; font-size:36px; margin-bottom:12px;
}
.detail-desc{ color:var(--ink-dim); font-size:14px; line-height:1.65; margin-bottom:22px; }
.detail-block{ margin-bottom:22px; }
.detail-block h4{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent2); margin-bottom:10px; font-weight:700; }
.detail-specs{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 18px; }
.spec{ border-top:1px solid var(--line); padding-top:8px; }
.spec dt{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent2); margin-bottom:3px; }
.spec dd{ font-size:13px; font-weight:600; }
.detail-foot{ flex-shrink:0; padding-top:22px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:var(--bg-raised); position:relative; z-index:1; }

.scroll-hint{
  display:none; position:absolute; left:50%; margin-left:-15px; bottom:90px;
  width:30px; height:30px; border-radius:50%; align-items:center; justify-content:center;
  background:var(--bg-raised); border:1px solid var(--line); color:var(--ink-dim);
  pointer-events:none; opacity:0; transition:opacity .25s ease, bottom .2s ease, transform .15s ease;
  animation:scrollHintBounce 1.6s ease-in-out infinite; cursor:pointer;
}
.scroll-hint.show{ opacity:1; pointer-events:auto; }
.scroll-hint:hover{ border-color:var(--accent2); color:var(--accent2); }
.scroll-hint:active{ transform:scale(.92); }
@keyframes scrollHintBounce{
  0%,100%{ transform:translateY(-4px); }
  50%{ transform:translateY(3px); }
}
@media (prefers-reduced-motion: reduce){
  .scroll-hint{ animation:none; }
}
.detail-price{ font-family:'Bebas Neue',sans-serif; font-size:40px; }
.detail-price.free{
  color:var(--accent2); /* respaldo sólido, igual que .price.free */
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .detail-price.free{
    background:linear-gradient(100deg, var(--accent2) 40%, #fff 50%, var(--accent2) 60%);
    background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
    animation:freeShine 2.6s linear infinite;
  }
}
.detail-price s{ font-family:'Inter',sans-serif; font-size:14px; color:var(--ink-faint); margin-right:10px; font-weight:500; }
/* con descuento: el precio tachado va chiquito arriba, así precio y botón siguen entrando en una sola fila */
.detail-price.has-compare{ display:flex; flex-direction:column; line-height:1; }
.detail-price.has-compare s{ font-size:13px; margin:0 0 3px; }
.detail-cta{ background:var(--accent); color:var(--ink); font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:15px 26px; border-radius:var(--radius-sm); transition:filter .2s; }
.detail-cta:hover{ filter:brightness(1.12); }
.detail-cta.free{ background:var(--accent2); }
.detail-preview-btn{
  display:flex; align-items:center; gap:12px; width:100%; margin-bottom:22px;
  padding:12px 16px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--bg); color:var(--ink); cursor:pointer;
  transition:border-color .2s, background .2s, transform .15s;
}
.detail-preview-btn:hover{ border-color:var(--accent); background:var(--bg-raised); transform:translateY(-1px); }
.detail-preview-btn.is-free:hover{ border-color:var(--accent2); }
.detail-preview-icon{
  width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--ink); transition:background .2s;
}
.detail-preview-btn.is-free .detail-preview-icon{ background:var(--accent2); color:#050507; }
.detail-preview-label{ font-size:12.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.detail-preview-btn .icon-play{ margin-left:2px; }
.detail-preview-btn .icon-pause{ display:none; }
.detail-preview-btn.is-playing .icon-play{ display:none; }
.detail-preview-btn.is-playing .icon-pause{ display:block; }
.detail-preview-btn.is-playing .detail-preview-icon{ background:var(--accent2); color:#050507; }

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translate(-50%,120%);
  background:var(--accent); color:var(--ink); padding:14px 26px; font-size:13px; font-weight:700;
  border-radius:var(--radius-sm); z-index:500; transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;
  max-width:90vw; text-align:center; opacity:0; pointer-events:none; visibility:hidden;
}
.toast.show{ transform:translate(-50%,0); opacity:1; pointer-events:auto; visibility:visible; }

/* ---------- barra de preview ---------- */
.preview-bar{
  position:fixed; left:50%; bottom:20px; z-index:500;
  width:min(460px, calc(100% - 28px));
  display:flex; align-items:center; gap:14px;
  padding:12px 18px 12px 12px;
  background:linear-gradient(180deg, rgba(23,23,27,.94), rgba(10,10,13,.96));
  border:1px solid rgba(255,255,255,.08); border-radius:18px;
  box-shadow:0 24px 60px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter:blur(18px) saturate(160%);
  transform:translate(-50%,150%) scale(.96); opacity:0;
  transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
.preview-bar.is-visible{ transform:translate(-50%,0) scale(1); opacity:1; }
.preview-bar-close{
  position:absolute; top:-9px; right:-9px; font-size:15px; line-height:1;
  color:var(--ink-dim); cursor:pointer; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-raised); border:1px solid var(--line);
  box-shadow:0 4px 10px rgba(0,0,0,.5);
  transition:background .2s, color .2s, transform .15s, border-color .2s;
}
.preview-bar-close:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); transform:scale(1.08); }
.preview-bar-btn{
  position:relative; width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent2); color:#0c0c0e; cursor:pointer;
  box-shadow:0 0 0 0 rgba(201,161,59,0);
  transition:filter .2s, transform .15s, box-shadow .3s;
}
.preview-bar-btn:hover{ filter:brightness(1.1); transform:scale(1.06); }
.preview-bar-btn.is-playing{ box-shadow:0 0 0 6px rgba(201,161,59,.16); }
.preview-bar-btn .icon-play{ margin-left:2px; }
.preview-bar-btn .icon-pause{ display:none; }
.preview-bar-btn.is-playing .icon-play{ display:none; }
.preview-bar-btn.is-playing .icon-pause{ display:block; }
.preview-bar-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.preview-bar-toprow{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.preview-bar-name{ font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.preview-bar-time{ font-size:10.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; flex-shrink:0; }
.preview-bar-track{ position:relative; height:4px; border-radius:2px; background:var(--line); overflow:hidden; }
.preview-bar-fill{
  position:absolute; inset:0 auto 0 0; width:0%; border-radius:2px;
  background:linear-gradient(90deg, var(--accent2), var(--accent));
  transition:width .15s linear;
}
.preview-bar-vol{ display:flex; align-items:center; gap:7px; flex-shrink:0; }
.preview-bar-mute{
  width:26px; height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  color:var(--ink-dim); cursor:pointer; transition:color .2s;
}
.preview-bar-mute:hover{ color:var(--ink); }
.preview-bar-mute .icon-vol-off{ display:none; }
.preview-bar-mute.is-muted .icon-vol-on{ display:none; }
.preview-bar-mute.is-muted .icon-vol-off{ display:block; }
.preview-bar-vol input[type="range"]{
  -webkit-appearance:none; appearance:none; width:72px; height:12px; margin:0; padding:0;
  background:transparent; border:none; outline:none; cursor:pointer; vertical-align:middle;
}
.preview-bar-vol input[type="range"]::-webkit-slider-runnable-track{
  width:100%; height:4px; border-radius:2px;
  background:linear-gradient(to right, var(--accent2) 0%, var(--accent2) var(--vol-pct,80%), var(--line) var(--vol-pct,80%), var(--line) 100%);
}
.preview-bar-vol input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:12px; height:12px; border-radius:50%;
  background:#fff; cursor:pointer; margin-top:-4px; border:none;
  box-shadow:0 0 0 3px rgba(201,161,59,.28); transition:box-shadow .2s;
}
.preview-bar-vol input[type="range"]:hover::-webkit-slider-thumb,
.preview-bar-vol input[type="range"]:focus::-webkit-slider-thumb{ box-shadow:0 0 0 5px rgba(201,161,59,.32); }
.preview-bar-vol input[type="range"]::-moz-range-track{
  width:100%; height:4px; border-radius:2px; background:var(--line);
}
.preview-bar-vol input[type="range"]::-moz-range-progress{
  height:4px; border-radius:2px; background:var(--accent2);
}
.preview-bar-vol input[type="range"]::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%; background:#fff; border:none; cursor:pointer;
  box-shadow:0 0 0 3px rgba(201,161,59,.28);
}
@media (max-width:640px){
  .preview-bar{ width:calc(100% - 20px); bottom:12px; padding:10px 14px 10px 10px; gap:10px; }
  .preview-bar-vol input[type="range"]{ width:52px; }
  .preview-bar-time{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .preview-bar{ transition:opacity .2s ease; }
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .detail-grid{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); max-height:88vh; max-height:88dvh; }
  .detail-art{ height:auto; min-height:0; max-height:34vh; aspect-ratio:16/9; }
  .detail-info{ max-height:none; min-height:0; }
  .free-box{ grid-template-columns:1fr; gap:22px; }
  .free-art{ max-width:220px; margin:0 auto; }
  .free-content{ grid-template-columns:1fr; gap:22px; }
  .detail-foot{
    margin:0 -36px calc(-1 * env(safe-area-inset-bottom,0px));
    padding:16px 36px calc(16px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -12px 20px -14px rgba(0,0,0,.5);
  }
  .scroll-hint{ display:flex; }
}
@media (max-width:760px){
  header{ flex-wrap:wrap; padding:14px 5vw; }
  nav{ order:3; width:100%; gap:18px; overflow-x:auto; padding-bottom:2px; justify-content:center; }
  nav a{ font-size:12px; }
  .section{ padding:72px 5vw; }
  .hero{ min-height:auto; padding:70px 5vw 60px; }
  .hero-stats{ gap:26px; margin-top:40px; }
  .detail-info{ padding:26px; }
  .modal-box{ padding:30px 24px; }
  .drawer-close, .modal-close{ width:42px; height:42px; font-size:24px; }
  #detailShare{ right:66px; }
  .detail-foot{ margin:0 -26px calc(-1 * env(safe-area-inset-bottom,0px)); padding:16px 26px calc(16px + env(safe-area-inset-bottom,0px)); }
}

/* ---------- páginas de kit (/kits/...) ---------- */
/* overflow:clip (no hidden) para no romper el position:sticky de la imagen */
.kit-page{ padding:40px 5vw 72px; position:relative; overflow:clip; background:var(--bg-raised); }
.kit-page::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent2) 50%, transparent); opacity:.5;
}
.kit-page > *:not(.glow-blob){ position:relative; z-index:1; }
.breadcrumb{
  max-width:980px; margin:0 auto 22px; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:8px;
}
.breadcrumb a{ color:var(--ink-dim); transition:color .2s; }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb span[aria-current]{ color:var(--accent2); }
/* tres piezas sueltas: imagen redondeada a la izquierda, tarjeta de info a la derecha
   y abajo una tarjeta aparte con "Qué incluye" y la ficha técnica */
.kit-box{
  max-width:980px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px; align-items:stretch;
}
.kit-card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); }
.kit-art{
  align-self:start; aspect-ratio:1/1; width:100%;
  background-color:var(--bg-raised); background-size:cover; background-position:center;
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.75);
  position:relative;
}
/* botón de preview sobre la imagen (arriba a la izquierda, así no tapa el título de la portada),
   mismo vidrio que el ▶ de las tarjetas */
.kit-preview{
  position:absolute; left:18px; top:18px; z-index:2;
  display:flex; align-items:center; gap:10px; padding:6px 18px 6px 6px;
  background:rgba(5,5,7,.6); border:1px solid rgba(243,241,236,.25); border-radius:999px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--ink); transition:transform .15s, border-color .2s, background .2s;
}
.kit-preview:hover{ transform:scale(1.04); border-color:var(--accent); background:rgba(5,5,7,.75); }
.kit-preview.is-free:hover{ border-color:var(--accent2); }
.kit-preview-icon{
  position:relative; width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--ink);
}
.kit-preview.is-free .kit-preview-icon{ background:var(--accent2); color:#050507; }
.kit-preview-label{ font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.kit-preview .icon-play{ margin-left:2px; }
.kit-preview .icon-pause{ display:none; }
.kit-preview.is-playing .icon-play{ display:none; }
.kit-preview.is-playing .icon-pause{ display:block; }
.kit-preview.is-playing{ border-color:var(--accent2); }
.kit-preview.is-playing .kit-preview-icon{ background:var(--accent2); color:#050507; }
.kit-preview.is-playing .kit-preview-icon::after{
  content:''; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--accent2);
  animation:previewPulse 1.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .kit-preview.is-playing .kit-preview-icon::after{ animation:none; }
}
/* contenido centrado en vertical: la tarjeta toma el alto de la imagen */
.kit-info{ padding:32px; display:flex; flex-direction:column; justify-content:center; }
.kit-info .kit-buy, .kit-info .kit-free-form{ margin-top:4px; }
.kit-info h1{
  font-family:'Inter',sans-serif; font-weight:600; text-transform:none;
  letter-spacing:0; line-height:1.2; font-size:36px; margin-bottom:12px;
}
.kit-details{ grid-column:1 / -1; display:flex; flex-direction:column; gap:30px; padding:32px 36px; }
.kit-details .detail-block{ margin-bottom:0; }
.kit-details .detail-block h2.kit-h4{ margin-bottom:14px; }
/* Ficha técnica: tarjetas de la misma familia que "Qué incluye", pero con ícono,
   el nombre del dato arriba y el valor grande abajo, en dorado en vez de rojo→dorado */
.kit-specs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; }
.kit-specs .spec{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:10px;
  padding:16px 16px 16px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:radial-gradient(ellipse 90% 70% at 100% 0%, rgba(var(--accent2-rgb),.08), transparent 70%), var(--bg-raised);
  transition:border-color .25s, transform .25s cubic-bezier(.16,1,.3,1);
}
.kit-specs .spec:hover{ border-color:rgba(var(--accent2-rgb),.45); transform:translateY(-3px); }
.kit-specs dt{
  display:flex; align-items:center; gap:8px; margin:0;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2);
}
.kit-specs dt svg{
  flex-shrink:0; width:30px; height:30px; padding:6px; border-radius:8px;
  background:rgba(var(--accent2-rgb),.12); color:var(--accent2);
}
.kit-specs dd{
  font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:28px; line-height:1;
  color:#fff; letter-spacing:.02em;
}
.kit-details .kit-more{ margin-top:0; padding-top:18px; border-top:1px solid var(--line); }
/* "Qué incluye": una tarjeta por categoría, número grande (como las cifras de la home) + categoría */
.kit-contents{
  list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(118px,1fr)); gap:12px;
}
.kit-contents li{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:8px;
  padding:20px 16px 16px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:radial-gradient(ellipse 90% 70% at 0% 0%, rgba(var(--accent-rgb),.10), transparent 70%), var(--bg-raised);
  transition:border-color .25s, transform .25s cubic-bezier(.16,1,.3,1);
}
.kit-contents li::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  opacity:.85;
}
.kit-contents li:hover{ border-color:rgba(var(--accent2-rgb),.45); transform:translateY(-3px); }
.kit-contents strong{
  font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:42px; line-height:.9;
  color:#fff; letter-spacing:.01em;
}
.kit-contents span{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2);
}
/* "Qué incluye" y "Ficha técnica": h2 por jerarquía, con el mismo look que el h4 del modal */
.detail-block h2.kit-h4{
  font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent2); margin-bottom:10px; font-weight:700; line-height:normal;
}
.kit-buy{
  padding-top:22px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.kit-buy .detail-cta{ display:inline-block; }
/* descarga gratis: resaltada con el mismo brillo dorado de la sección "Gratis" de la home */
.kit-free-form{
  padding:22px; border:1px solid rgba(var(--accent2-rgb),.35); border-radius:var(--radius-sm);
  background:radial-gradient(ellipse 80% 100% at 100% 0%, rgba(var(--accent2-rgb),.12), transparent 65%), var(--bg-raised);
}
.kit-free-form .detail-price{ display:block; margin-bottom:12px; }
.kit-free-form p{ color:var(--ink-dim); font-size:13px; line-height:1.55; margin-bottom:12px; }
.kit-free-row{ display:flex; gap:10px; }
.kit-free-row input{ flex:1; min-width:0; }
.kit-free-row button{ flex-shrink:0; padding:12px 18px; }
.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; }
.kit-free-done{ display:none; }
.kit-free-done.show{ display:block; }
.kit-free-done .card-cta{ display:inline-block; }
/* oferta de Inferno Deluxe que aparece después de la descarga gratis (home, /kits/inferno y la guía) */
.upsell{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:14px; text-align:left;
}
.upsell-img{ width:64px; height:64px; border-radius:var(--radius-sm); object-fit:cover; display:block; }
.upsell-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.upsell-eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent2); }
.upsell-name{ font-size:15px; font-weight:800; color:var(--ink); }
.upsell-name:hover{ color:var(--accent2); }
.upsell-desc{ font-size:12px; line-height:1.45; color:var(--ink-dim); }
.upsell-buy{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.upsell-buy .card-cta{ display:inline-block; }
@media (max-width:420px){
  .upsell{ flex-wrap:wrap; }
  .upsell-buy{ width:100%; flex-direction:row; align-items:center; justify-content:space-between; }
}
.kit-more{ margin-top:22px; font-size:13px; color:var(--ink-dim); line-height:1.6; }
.kit-more a{ color:var(--ink); border-bottom:1px solid rgba(201,161,59,.55); transition:color .2s; }
.kit-more a:hover{ color:var(--accent2); }
.card-body h3 a{ color:inherit; }
@media (max-width:900px){
  .kit-box{ grid-template-columns:1fr; gap:18px; }
  .kit-art{ max-width:440px; justify-self:center; }
}
@media (max-width:760px){
  .kit-info{ padding:26px; }
  .kit-details{ padding:26px; gap:24px; }
  .kit-contents{ grid-template-columns:repeat(auto-fit, minmax(100px,1fr)); gap:10px; }
  .kit-contents li{ padding:16px 12px 12px; }
  .kit-contents strong{ font-size:36px; }
  .kit-contents span{ font-size:10px; letter-spacing:.1em; }
  .kit-specs{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .kit-specs .spec{ padding:14px 12px; }
  .kit-specs dt{ font-size:10px; letter-spacing:.1em; }
  .kit-specs dt svg{ width:26px; height:26px; padding:5px; }
  .kit-specs dd{ font-size:24px; }
  .kit-free-form{ padding:18px; }
  .kit-free-row{ flex-direction:column; }
  .kit-info h1{ font-size:30px; }
}

/* ---------- guías (/guias/...) ---------- */
.guide{ max-width:780px; margin:0 auto; padding:40px 48px 44px; }
.guide-head{ margin-bottom:22px; }
.guide h1{
  font-family:'Inter',sans-serif; font-weight:600; text-transform:none; letter-spacing:-.01em;
  line-height:1.15; font-size:clamp(30px,4.2vw,42px); margin:14px 0 12px;
}
.guide-meta{ font-size:12.5px; color:var(--ink-faint); letter-spacing:.02em; }
.guide-meta a{ color:var(--ink-dim); border-bottom:1px solid rgba(var(--accent2-rgb),.45); }
.guide-meta a:hover{ color:var(--accent2); }
.guide p{ color:var(--ink-dim); font-size:16px; line-height:1.75; margin-bottom:16px; }
.guide p strong{ color:var(--ink); }
.guide .guide-lead{ font-size:18px; color:var(--ink); line-height:1.65; margin-bottom:28px; }
.guide h2{
  font-family:'Inter',sans-serif; font-weight:600; text-transform:none; letter-spacing:-.005em;
  line-height:1.25; font-size:24px; color:var(--ink); margin:40px 0 14px;
  display:flex; align-items:center; gap:12px;
}
.guide h2::before{
  content:''; width:18px; height:2px; flex-shrink:0; border-radius:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
}
/* video vertical (Short de YouTube) */
.guide-video{ margin:8px auto 8px; max-width:320px; }
.guide-video-frame{
  position:relative; aspect-ratio:9/16; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--bg-raised);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.75);
}
.guide-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.guide-video figcaption{ margin-top:10px; text-align:center; font-size:12px; color:var(--ink-faint); }
.guide-video figcaption a{ color:var(--ink-dim); border-bottom:1px solid rgba(var(--accent2-rgb),.45); }
/* preguntas frecuentes */
.guide-faq{ display:flex; flex-direction:column; gap:12px; }
.guide-faq-item{
  padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:radial-gradient(ellipse 90% 70% at 0% 0%, rgba(var(--accent-rgb),.08), transparent 70%), var(--bg-raised);
}
.guide-faq-item h3{
  font-family:'Inter',sans-serif; font-weight:700; text-transform:none; letter-spacing:0;
  line-height:1.35; font-size:16px; color:var(--ink); margin-bottom:6px;
}
.guide-faq-item p{ margin:0; font-size:15px; }
/* captura de email al final */
.guide-cta{ margin-top:44px; display:grid; grid-template-columns:150px minmax(0,1fr); gap:20px; align-items:center; }
.guide-cta-art{
  aspect-ratio:1/1; border-radius:var(--radius-sm); border:1px solid var(--line);
  background-size:cover; background-position:center; box-shadow:0 18px 40px -20px rgba(0,0,0,.75);
}
.guide-cta .kit-free-form h2{ margin:0 0 10px; font-size:22px; }
.guide-cta .kit-free-form h2::before{ display:none; }
.guide-cta .kit-free-form p{ font-size:14px; line-height:1.6; margin-bottom:14px; }
.guide-cta .kit-free-form p a{ color:var(--ink); border-bottom:1px solid rgba(var(--accent2-rgb),.55); }
.guide-cta .form-note{ margin-top:2px; }
@media (max-width:760px){
  .guide{ padding:28px 22px 30px; }
  .guide p{ font-size:15.5px; }
  .guide .guide-lead{ font-size:17px; }
  .guide h2{ font-size:21px; margin-top:34px; }
  .guide-cta{ grid-template-columns:1fr; }
  .guide-cta-art{ max-width:160px; }
}