/* Air Devices MX · Capa de efectos (FX)
   Ciencia ficción con la paleta de marca: grafito, blanco y Azul Air.
   Todo se desactiva con "reducir movimiento" del sistema. */

:root{ --fx-blue:76,92,255; --fx-blue2:174,182,255; --fx-ease:cubic-bezier(.22,.8,.2,1) }

/* ---------- Secuencia de arranque ---------- */
.fx-boot{position:fixed;inset:0;z-index:200;background:#0A0A0C;display:grid;place-items:center;color:#fff;transition:opacity .6s var(--fx-ease),visibility .6s}
.fx-boot.out{opacity:0;visibility:hidden}
.fx-boot__in{display:flex;flex-direction:column;align-items:center;gap:22px;width:min(320px,80vw)}
.fx-boot__iso{width:64px;height:auto}
.fx-boot__iso rect{transform-origin:left center;transform:scaleX(0);animation:fxBar .6s var(--fx-ease) forwards}
.fx-boot__iso rect:nth-child(2){animation-delay:.12s}
.fx-boot__iso rect:nth-child(3){animation-delay:.24s}
@keyframes fxBar{to{transform:scaleX(1)}}
.fx-boot__txt{font-size:11px;font-weight:600;letter-spacing:.32em;color:#8B8D94;text-transform:uppercase;font-variant-numeric:tabular-nums}
.fx-boot__bar{width:100%;height:2px;background:#1E1F25;border-radius:2px;overflow:hidden}
.fx-boot__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,rgb(var(--fx-blue)),rgb(var(--fx-blue2)));box-shadow:0 0 12px rgba(var(--fx-blue),.8);animation:fxLoad 1.05s var(--fx-ease) .15s forwards}
@keyframes fxLoad{to{width:100%}}
.fx-boot::after{content:"";position:absolute;left:0;right:0;height:120px;top:-120px;background:linear-gradient(180deg,transparent,rgba(var(--fx-blue),.08),transparent);animation:fxScan 1.4s linear}
@keyframes fxScan{to{top:100%}}

/* ---------- Barra de progreso y navegación ---------- */
.fx-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,rgb(var(--fx-blue)),rgb(var(--fx-blue2)));box-shadow:0 0 10px rgba(var(--fx-blue),.7);pointer-events:none}
.nav{transition:border-color .3s,background .3s,box-shadow .3s}
.nav.scrolled{box-shadow:0 1px 0 rgba(var(--fx-blue),.18),0 10px 30px rgba(17,17,19,.06)}
.nav__links a{position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:rgb(var(--fx-blue));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--fx-ease)}
.nav__links a:hover::after{transform:scaleX(1)}

/* ---------- Hero ---------- */
.hero{isolation:isolate}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.fx-grid{position:absolute;left:-50%;right:-50%;bottom:0;height:46%;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(var(--fx-blue),.28) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--fx-blue),.28) 1px,transparent 1px);
  background-size:64px 64px;transform:perspective(420px) rotateX(62deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);mask-image:linear-gradient(to top,#000 10%,transparent 85%);
  animation:fxGrid 3.2s linear infinite}
@keyframes fxGrid{to{background-position:0 64px,0 0}}
.hero__in{z-index:2}
.hero .eyebrow{position:relative;padding:0 18px}
.hero .eyebrow::before,.hero .eyebrow::after{content:"";position:absolute;top:50%;width:10px;height:1px;background:rgb(var(--fx-blue))}
.hero .eyebrow::before{left:0}.hero .eyebrow::after{right:0}
.fx-glitch{position:relative}
.grad.fx-shimmer{background-size:220% 100%;animation:fxShimmer 6s ease-in-out infinite}
@keyframes fxShimmer{0%,100%{background-position:0 0}50%{background-position:100% 0}}

/* Escenario del producto: anillos, escaneo y HUD */
.hero__stage{position:relative;perspective:900px}
.fx-stage{position:relative;transform-style:preserve-3d;transition:transform .5s var(--fx-ease)}
.fx-ring{position:absolute;left:50%;top:54%;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) rotateX(74deg)}
.fx-ring--a{width:118%;aspect-ratio:1;border:1px solid rgba(var(--fx-blue2),.35);box-shadow:0 0 30px rgba(var(--fx-blue),.25),inset 0 0 30px rgba(var(--fx-blue),.2)}
.fx-ring--b{width:96%;aspect-ratio:1;background:conic-gradient(from 0deg,transparent 0 70%,rgba(var(--fx-blue),.9) 80%,transparent 90%);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));animation:fxSpin 5s linear infinite}
.fx-ring--c{width:140%;aspect-ratio:1;border:1px dashed rgba(var(--fx-blue2),.18);animation:fxSpin 40s linear infinite reverse}
@keyframes fxSpin{to{transform:translate(-50%,-50%) rotateX(74deg) rotateZ(360deg)}}
.fx-scan{position:absolute;left:8%;right:8%;top:0;height:2px;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(var(--fx-blue2),.95),transparent);box-shadow:0 0 18px 2px rgba(var(--fx-blue),.6);opacity:0;animation:fxScanY 4.5s var(--fx-ease) 1.6s infinite}
@keyframes fxScanY{0%{top:8%;opacity:0}10%{opacity:1}55%{top:88%;opacity:1}65%,100%{top:88%;opacity:0}}
.fx-hud{position:absolute;inset:-4% -10%;pointer-events:none;z-index:3}
.fx-hud i{position:absolute;width:22px;height:22px;border-color:rgba(var(--fx-blue2),.7);border-style:solid;border-width:0;opacity:0;animation:fxIn .6s var(--fx-ease) 1.4s forwards}
.fx-hud i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.fx-hud i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.fx-hud i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.fx-hud i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.fx-hud b{position:absolute;font-size:10px;font-weight:600;letter-spacing:.2em;color:rgba(var(--fx-blue2),.8);text-transform:uppercase;opacity:0;animation:fxIn .6s var(--fx-ease) 1.7s forwards;font-variant-numeric:tabular-nums;white-space:nowrap}
.fx-hud b:nth-of-type(1){left:30px;top:4px}
.fx-hud b:nth-of-type(2){right:30px;bottom:4px}
@keyframes fxIn{to{opacity:1}}
.hero__img{animation:fxFloat 7s ease-in-out infinite}
@keyframes fxFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-1.2deg)}}

/* ---------- Aparición de secciones ---------- */
.reveal{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity .9s var(--fx-ease),transform .9s var(--fx-ease),filter .9s var(--fx-ease)}
.reveal.in{opacity:1;transform:none;filter:none}
.fx-d1{transition-delay:.08s}.fx-d2{transition-delay:.16s}.fx-d3{transition-delay:.24s}

/* Íconos que se dibujan */
.value svg path{stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);transition:stroke-dashoffset 1.4s var(--fx-ease) .2s}
.value.in svg path{stroke-dashoffset:0}
.value svg{transition:filter .4s}
.value:hover svg{filter:drop-shadow(0 0 6px rgba(var(--fx-blue),.55));stroke:rgb(var(--fx-blue))}

/* ---------- Colecciones ---------- */
.tile::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(var(--fx-blue),.22),transparent 60%)}
.tile:hover::before{opacity:1}
.tile img{will-change:transform}

/* ---------- Tarjetas de producto ---------- */
.card{position:relative}
.card.fx-pre{opacity:0;transform:translateY(24px) scale(.98)}
.card.fx-show{opacity:1;transition:opacity .7s var(--fx-ease),transform .7s var(--fx-ease)}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .4s;
  background:conic-gradient(from var(--fx-a,0deg),transparent 0 60%,rgb(var(--fx-blue)) 75%,rgb(var(--fx-blue2)) 82%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:fxBorder 3s linear infinite}
.card:hover::before{opacity:1}
@property --fx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes fxBorder{to{--fx-a:360deg}}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.75),transparent 55%);mix-blend-mode:soft-light}
.card:hover::after{opacity:1}
.card:hover{box-shadow:0 24px 50px rgba(var(--fx-blue),.16)}
.add{position:relative;overflow:hidden}
.add::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s var(--fx-ease)}
.add:not(:disabled):hover::after{left:130%}
.chip{position:relative;overflow:hidden}
.chip[aria-selected="true"]{box-shadow:0 0 0 1px rgba(var(--fx-blue),.4),0 6px 18px rgba(var(--fx-blue),.25)}

/* Vuelo al carrito */
.fx-fly{position:fixed;z-index:120;pointer-events:none;border-radius:14px;background:#F5F5F7;box-shadow:0 0 0 1px rgba(var(--fx-blue),.5),0 0 30px rgba(var(--fx-blue),.6);object-fit:contain;will-change:transform,opacity}
.fx-pulse{position:fixed;z-index:119;width:40px;height:40px;border-radius:50%;pointer-events:none;border:2px solid rgb(var(--fx-blue));animation:fxPulse .7s var(--fx-ease) forwards}
@keyframes fxPulse{from{transform:translate(-50%,-50%) scale(.4);opacity:1}to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}

/* ---------- Botones ---------- */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120px circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.35),transparent 60%);opacity:0;transition:opacity .3s}
.btn--primary:hover::before{opacity:1}
.fx-mag{transition:transform .3s var(--fx-ease),background .2s,box-shadow .2s}

/* ---------- Mayoreo y pasos ---------- */
.wholesale{position:relative;overflow:hidden;isolation:isolate}
.wholesale::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background-image:radial-gradient(rgba(var(--fx-blue2),.25) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(70% 60% at 70% 50%,#000,transparent);mask-image:radial-gradient(70% 60% at 70% 50%,#000,transparent)}
.wholesale::after{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-120px;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,rgba(var(--fx-blue),.35),transparent 65%);filter:blur(10px);animation:fxBreath 6s ease-in-out infinite}
@keyframes fxBreath{50%{transform:translateY(-50%) scale(1.15);opacity:.7}}
.wholesale__list li{position:relative;overflow:hidden;transition:transform .4s var(--fx-ease),background .4s}
.wholesale__list li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(rgb(var(--fx-blue)),rgb(var(--fx-blue2)));transform:scaleY(0);transform-origin:top;transition:transform .5s var(--fx-ease)}
.wholesale__list li:hover{transform:translateX(6px);background:#20212A}
.wholesale__list li:hover::before{transform:scaleY(1)}
.steps__n{display:inline-block;position:relative;font-variant-numeric:tabular-nums}
.steps li.in .steps__n{animation:fxNum .9s steps(6) .2s}
@keyframes fxNum{0%{opacity:.2}20%{opacity:1}40%{opacity:.4}60%{opacity:1}80%{opacity:.6}100%{opacity:1}}
.faq details{transition:background .3s}
.faq details[open]{box-shadow:inset 2px 0 0 rgb(var(--fx-blue))}

/* ---------- Carrito ---------- */
.drawer.on{box-shadow:-1px 0 0 rgba(var(--fx-blue),.35),-20px 0 60px rgba(17,17,19,.15),-30px 0 80px rgba(var(--fx-blue),.12)}
.drawer .line{animation:fxLine .45s var(--fx-ease) both}
@keyframes fxLine{from{opacity:0;transform:translateX(16px)}}
.wafab{transition:transform .3s var(--fx-ease),background .2s}
.wafab::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(var(--fx-blue),.6);animation:fxRing 2.6s ease-out infinite;pointer-events:none}
@keyframes fxRing{from{transform:scale(.85);opacity:1}to{transform:scale(1.35);opacity:0}}

/* ---------- Cursor de luz (solo con mouse) ---------- */
.fx-cursor{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(var(--fx-blue),.10),transparent 60%);mix-blend-mode:screen;opacity:0;transition:opacity .4s;will-change:transform}
.fx-cursor.on{opacity:1}

/* ---------- Accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-boot,.fx-canvas,.fx-scan,.fx-cursor,.fx-progress{display:none!important}
  .reveal,.card.fx-pre{opacity:1!important;transform:none!important;filter:none!important}
  .value svg path{stroke-dashoffset:0!important}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}
@media (max-width:720px){
  .fx-ring--c{display:none}
  .fx-hud b{display:none}
  .fx-grid{height:38%;background-size:48px 48px}
}

/* ---------- Secuencia del producto ligada al scroll ---------- */
.hero.fx-pin{overflow:clip}
.hero.fx-pin .hero__in{min-height:175vh;justify-content:flex-start}
.hero.fx-pin .hero__stage{position:sticky;top:max(72px,calc(50vh - min(220px,39vw)));align-self:center;z-index:2}
.hero .eyebrow,.hero .display,.hero .lead,.hero__cta{will-change:transform,opacity}
.fx-svg{width:100%;height:auto;overflow:visible;display:block;filter:drop-shadow(0 30px 60px rgba(76,92,255,.35));animation:fxFloat 7s ease-in-out infinite;transform-origin:50% 60%}
.fx-svg .fx-p,.fx-svg .fx-led{transform-box:fill-box;transform-origin:center;will-change:transform}
.fx-led{filter:drop-shadow(0 0 4px #4C5CFF) drop-shadow(0 0 10px rgba(76,92,255,.8))}
.fx-ring{transition:opacity .3s}

.fx-tag{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;white-space:nowrap;pointer-events:none;opacity:0;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#E6E8FF;
  padding:7px 12px;border-radius:980px;background:rgba(17,17,19,.55);border:1px solid rgba(var(--fx-blue2),.35);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 24px rgba(var(--fx-blue),.25);
  transform:translateY(calc((1 - var(--k,0)) * 14px))}
.fx-tag b{font-size:10px;color:rgb(var(--fx-blue2));letter-spacing:.14em}
.fx-tag i{position:absolute;top:50%;height:1px;width:calc(var(--k,0) * 70px);background:linear-gradient(90deg,rgba(var(--fx-blue2),.9),rgba(var(--fx-blue2),0))}
.fx-tag i::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:rgb(var(--fx-blue2));box-shadow:0 0 10px rgb(var(--fx-blue))}
.fx-tag--l{right:calc(100% + 0px);margin-right:4%;top:4%}
.fx-tag--l i{left:100%}.fx-tag--l i::after{right:-3px}
.fx-tag--r{left:calc(100% + 0px);margin-left:-6%;top:20%}
.fx-tag--r i{right:100%;transform:scaleX(-1);transform-origin:right}.fx-tag--r i::after{right:-3px}
.fx-tag--c{left:calc(100% + 0px);margin-left:-18%;bottom:12%}
.fx-tag--c i{right:100%;transform:scaleX(-1);transform-origin:right}.fx-tag--c i::after{right:-3px}

/* Sin movimiento: escena abierta y quieta */
.fx-still .fx-svg{animation:none}
.fx-still .fx-tag{opacity:1;--k:1}
.fx-still .fx-scan,.fx-still .fx-ring--b{display:none}
.fx-still .fx-hud i,.fx-still .fx-hud b{opacity:1}

@media (max-width:720px){
  .hero.fx-pin .hero__in{min-height:150vh}
  .fx-tag{font-size:10px;padding:5px 9px;gap:6px}
  .fx-tag i{display:none}
  .fx-tag--l{right:auto;left:0;margin:0;top:-17%}
  .fx-tag--r{left:auto;right:0;margin:0;top:-7%}
  .fx-tag--c{left:50%;margin:0;bottom:-6%;transform:translate(-50%,calc((1 - var(--k,0)) * 14px))}
}