/* Home v2 · hero/carrusel. Se carga al final (después de brand-light.css) solo en la home y vale igual para
   visitantes (tema claro-oscuro de marca) y para admin (sin bonoks-global/brand-light, tema Normal o Halloween).
   Todo va bajo #sw-hero para ganarle a las capas anteriores sin tocar otras páginas. Solo presentación. */
#sw-hero{--hx-a:#8b5cf6;--hx-b:#22d3ee;--hx-ring:rgba(167,139,250,.38);--hx-bg:#0a1022;
  position:relative;min-height:0!important;overflow:hidden;isolation:isolate;border-bottom:1px solid rgba(255,255,255,.07)}
body.theme-halloween #sw-hero{--hx-a:#fb923c;--hx-b:#facc15;--hx-ring:rgba(251,191,36,.42);--hx-bg:#120a1f}
#sw-hero::after{background:radial-gradient(ellipse 50% 60% at 78% 40%,color-mix(in srgb,var(--hx-a) 22%,transparent),transparent 70%),radial-gradient(ellipse 40% 50% at 0% 100%,color-mix(in srgb,var(--hx-b) 10%,transparent),transparent 70%)!important}
#sw-hero .hero-inner{padding-top:clamp(40px,6vw,76px)!important;padding-bottom:clamp(28px,4vw,48px)!important;display:flex;flex-direction:column}
#sw-hero .hero-slide{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important;gap:clamp(32px,5vw,72px)!important;align-items:center!important;min-height:440px}
#sw-hero .hero-slide[hidden]{display:none!important}
#sw-hero .hero-copy{max-width:600px!important;min-width:0}
#sw-hero .hero-title{font-size:clamp(38px,4.6vw,62px)!important;line-height:1.04!important;letter-spacing:-.035em!important;margin:18px 0 16px!important;text-wrap:balance}
#sw-hero .lead{font-size:clamp(16px,1.35vw,19px)!important;line-height:1.6!important;max-width:520px;margin:0 0 4px!important}
#sw-hero .cta{display:flex!important;flex-wrap:wrap;gap:12px!important;margin-top:28px!important}
#sw-hero .btn.lg{padding:15px 26px!important;font-size:16.5px!important;border-radius:14px!important}

/* Composición de bienvenida: dos marcos (gaming + streaming) con profundidad, sin robot ni etiqueta. */
#sw-hero .sw-universe{position:relative!important;display:block;width:100%!important;max-width:560px!important;height:auto!important;aspect-ratio:7/5;justify-self:end;margin:0!important;perspective:1400px;isolation:isolate}
#sw-hero .sw-universe::before{content:"";position:absolute;inset:auto -4% -6% auto;width:46%;aspect-ratio:1;border-radius:24px;z-index:0;opacity:.45;
  background:radial-gradient(circle,rgba(255,255,255,.35) 1.2px,transparent 1.6px) 0 0/16px 16px;-webkit-mask:linear-gradient(135deg,transparent 10%,#000 70%);mask:linear-gradient(135deg,transparent 10%,#000 70%);border:0!important;box-shadow:none!important}
#sw-hero .sw-glow{position:absolute;inset:12% 6% 6% 14%;z-index:0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--hx-a) 55%,transparent),color-mix(in srgb,var(--hx-b) 18%,transparent) 60%,transparent);filter:blur(38px);opacity:.75;pointer-events:none}
#sw-hero .sw-scene{position:absolute!important;display:block;height:auto!important;aspect-ratio:16/10;object-fit:cover;border-radius:22px!important;filter:none!important;
  border:1px solid rgba(255,255,255,.16)!important;background:var(--hx-bg);transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s}
#sw-hero .sw-scene.game{top:0!important;right:0!important;left:auto!important;bottom:auto!important;width:82%!important;z-index:1;
  transform:rotateY(-9deg) rotateX(3deg)!important;transform-origin:right center;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.9),0 0 0 6px rgba(255,255,255,.035),0 0 60px -20px var(--hx-ring)!important}
#sw-hero .sw-scene.cinema{left:0!important;bottom:0!important;top:auto!important;right:auto!important;width:56%!important;z-index:2;object-position:center 30%;
  transform:rotateY(7deg) translateZ(40px)!important;transform-origin:left center;
  box-shadow:0 40px 70px -24px rgba(0,0,0,.95),0 0 0 5px var(--hx-bg),0 0 0 6px var(--hx-ring)!important}
#sw-hero .hero-slide.is-on .sw-universe{animation:hx-stage .8s .08s cubic-bezier(.2,.7,.2,1) both}
@keyframes hx-stage{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (hover:hover){#sw-hero .sw-universe:hover .sw-scene.game{transform:rotateY(-5deg) rotateX(2deg) translateY(-6px)!important}
  #sw-hero .sw-universe:hover .sw-scene.cinema{transform:rotateY(4deg) translateZ(60px) translateY(-4px)!important}}

/* Diapositivas de producto: el póster con el mismo marco y alineado al collage. */
#sw-hero .hero-poster{justify-self:center;width:min(300px,100%)!important}
#sw-hero .hero-poster .poster-media{border-radius:22px!important}

/* Controles: en el flujo, alineados a la columna de texto; nunca encima de los botones. */
#sw-hero .hero-ctrl{position:relative!important;left:auto!important;bottom:auto!important;margin-top:clamp(24px,3vw,36px)!important;align-self:flex-start;display:flex;align-items:center;gap:12px!important}
#sw-hero .hero-arrow,#sw-hero .hero-pause{width:44px!important;height:44px!important;font-size:22px!important;border-radius:50%!important;backdrop-filter:blur(8px)}
#sw-hero .hero-pause{font-size:12px!important}
#sw-hero .hero-dots{gap:8px!important;padding:0 4px}
#sw-hero .hero-dot{width:22px!important;height:6px!important;border-radius:6px!important}
#sw-hero .hero-dot.on{width:40px!important;background:linear-gradient(90deg,var(--hx-a),var(--hx-b))!important;box-shadow:0 0 12px -2px var(--hx-a)!important}

@media (max-width:1100px){#sw-hero .hero-slide{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;min-height:400px}}
@media (max-width:820px){
  #sw-hero .hero-slide{grid-template-columns:minmax(0,1fr)!important;gap:36px!important;min-height:0}
  #sw-hero .hero-copy{max-width:none!important}
  #sw-hero .sw-universe{justify-self:center;max-width:460px!important;width:94%!important}
  #sw-hero .hero-poster{display:none!important}
}
@media (max-width:620px){
  #sw-hero .hero-title{font-size:clamp(32px,9vw,42px)!important}
  #sw-hero .cta .btn.lg{flex:1 1 100%;text-align:center;justify-content:center}
  #sw-hero .sw-universe{width:100%!important}
  #sw-hero .sw-scene{border-radius:16px!important}
  #sw-hero .sw-scene.game{width:84%!important}
  #sw-hero .sw-scene.cinema{width:58%!important}
  #sw-hero .hero-ctrl{gap:8px!important}
}
@media (prefers-reduced-motion:reduce){#sw-hero .hero-slide.is-on .sw-universe{animation:none}#sw-hero .sw-scene{transition:none}}