/* Danny Skulls · galería que gira con el scroll */
.sg{background:var(--sg-bg,#0E0D0F);transition:background-color .7s ease;color:#EDE6DA}
.sg-head{max-width:1240px;margin:0 auto;padding:120px 32px 24px;display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px}
.sg-head h2{margin:0;font-family:'Bodoni Moda',serif;font-weight:400;font-size:44px;line-height:1.1}
.sg-head a{font-size:16px;padding:12px 0}
.sg-stage{position:relative}
.sg-item{max-width:1240px;margin:0 auto;padding:40px 32px 72px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:48px 72px}
.sg-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.sg-copy h3{margin:0;font-family:'Bodoni Moda',serif;font-weight:400;font-size:clamp(40px,5.4vw,80px);line-height:1;letter-spacing:-.02em}
.sg-mat{margin:0;font-size:19px;color:#EDE6DA}
.sg-desc{margin:0;font-size:17px;color:#C4BCB0;max-width:440px}
.sg-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:8px}
.sg-buy{display:inline-flex;align-items:center;gap:10px;background:#EDE6DA;color:#0E0D0F !important;text-decoration:none;padding:14px 22px;font-size:16px;font-weight:600}
.sg-buy:hover{background:#FFFFFF}
.sg-more{font-size:16px;font-weight:600;text-underline-offset:6px;padding:14px 0}
.sg-media{justify-self:end;width:100%;max-width:560px;aspect-ratio:4/5;overflow:hidden;background:#151318}
.sg-media img,.sg-media video{width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 55%}
.sg-rail{display:none}

/* Con JavaScript: escenario fijo y el scroll mueve el vídeo */
.sg-on .sg-track{height:calc(var(--sg-n,6) * 110svh)}
.sg-on .sg-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.sg-on .sg-item{position:absolute;left:0;right:0;top:0;bottom:0;padding:24px 32px 96px;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.sg-on .sg-item.is-on{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
.sg-on .sg-copy>*{transform:translateY(24px);opacity:0;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s ease}
.sg-on .is-on .sg-copy>*{transform:none;opacity:1}
.sg-on .is-on .sg-copy>*:nth-child(2){transition-delay:.07s}
.sg-on .is-on .sg-copy>*:nth-child(3){transition-delay:.14s}
.sg-on .is-on .sg-copy>*:nth-child(4){transition-delay:.21s}
.sg-on .sg-media{max-width:none;height:min(78svh,720px);width:auto;justify-self:end}
.sg-on .sg-rail{display:flex;position:absolute;left:0;right:0;bottom:24px;max-width:1240px;margin:0 auto;padding:0 32px;gap:22px;flex-wrap:wrap}
.sg-rail button{background:none;border:0;color:#7E7880;font:inherit;font-size:15px;padding:10px 0;cursor:pointer}
.sg-rail button:hover{color:#EDE6DA}
.sg-rail button[aria-current="true"]{color:#EDE6DA;font-weight:600}
.sg-rail button:focus-visible{outline:2px solid #EDE6DA;outline-offset:3px}

@media (max-width:760px){
  .sg-head{padding:88px 20px 16px}
  .sg-head h2{font-size:34px}
  .sg-item{grid-template-columns:1fr;gap:20px;padding:24px 20px 56px}
  .sg-media{order:-1;justify-self:center;max-width:420px}
  .sg-on .sg-item{padding:12px 20px 32px;align-content:start}
  .sg-on .sg-media{height:52svh;width:auto;aspect-ratio:4/5}
  .sg-on .sg-rail{display:none}
  .sg-copy h3{font-size:40px}
  .sg-desc{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .sg,.sg-on .sg-item,.sg-on .sg-copy>*{transition:none !important}
}