.ax-section { position:relative; isolation:isolate; overflow:hidden; min-height:720px; height:100svh; max-height:1200px; background:#e91a24; color:white; scroll-margin-top:74px; }
.ax-backgrounds,.ax-backgrounds>img,.ax-stage,.ax-scene { position:absolute; inset:0; width:100%; height:100%; }
.ax-backgrounds { z-index:-1; }
.ax-backgrounds>img { object-fit:cover; }
.ax-stage { pointer-events:none; }
.ax-scene { visibility:hidden; }
.ax-scene:first-child { visibility:visible; }
.ax-layer { position:absolute; display:block; overflow:visible; left:var(--ax-x); top:var(--ax-y); width:var(--ax-w); height:var(--ax-h); }
.ax-lines { z-index:0; transform-origin:center top; }
/* Only the Tu equipo → Accessories boundary: extend its existing background
   blend, and dissolve the stripe tips that otherwise expose the straight seam. */
#coleccion > .section-atmosphere {
  height:clamp(140px,18vh,200px);
  mask-image:linear-gradient(to bottom,transparent,#0001 20%,#0006 48%,#000c 72%,#000 96%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#0001 20%,#0006 48%,#000c 72%,#000 96%);
}
@media(min-width:761px) {
  .ax-lines {
    mask-image:linear-gradient(to bottom,transparent,#0003 35px,#000a 85px,#000 clamp(110px,14vh,150px));
    -webkit-mask-image:linear-gradient(to bottom,transparent,#0003 35px,#000a 85px,#000 clamp(110px,14vh,150px));
  }
}
.ax-product { z-index:2; transform-origin:center center; }
.ax-shadow { z-index:1; }
.ax-text { z-index:3; }
.ax-selector { position:absolute; right:11%; top:51%; transform:translateY(-50%); display:grid; grid-template-columns:repeat(2,1fr); gap:18px 20px; z-index:4; }
.ax-thumb { width:clamp(60px,6.7vw,108px); aspect-ratio:1; padding:0; background:transparent; border:1px solid transparent; border-radius:50%; cursor:pointer; transition:transform .3s,border-color .3s,background .3s; }
.ax-thumb img { display:block; width:100%; height:100%; object-fit:contain; }
.ax-thumb[aria-pressed="true"] { background:#ffffff18; transform:scale(1.035); }
.ax-thumb:hover { background:#ffffff20; transform:scale(1.035); }
.ax-arrows { position:absolute; bottom:11%; left:52%; transform:translateX(-50%); display:flex; gap:26px; z-index:4; }
.ax-arrow { display:grid; place-items:center; width:48px; height:44px; padding:8px; border:0; background:transparent; cursor:pointer; transition:opacity .2s,transform .2s; }
.ax-arrow svg { width:30px; height:20px; }
.ax-arrow:hover { opacity:.78; transform:translateY(2px); }
.ax-arrow:last-child:hover { transform:translateY(-2px); }
.ax-section button:focus-visible { outline:2px solid white; outline-offset:5px; }
.ax-section button:disabled { cursor:wait; }
.ax-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:760px) {
 .ax-section { min-height:780px; height:100svh; max-height:none; }
 .ax-text { left:8%; top:9%; width:42%; height:20%; }
 .ax-product { left:15%; top:33%; width:66%; height:37%; }
 .ax-shadow { left:19%; top:70%; width:58%; height:6%; }
 .ax-lines { left:36%; top:30%; width:27%; height:25%; mask-image:linear-gradient(transparent,#000 24%); }
 .ax-selector { top:22%; bottom:auto; right:5%; left:auto; transform:translateY(-50%); display:grid; gap:8px; }
 .ax-thumb { width:46px; }
 .ax-arrows { left:50%; bottom:10%; gap:24px; }
 .ax-arrow { width:44px; height:44px; }
}
@media(prefers-reduced-motion:reduce) { .ax-section button { transition:none; } }
