/* Control superior para guardar o desplegar la navegación izquierda. */
.topbar{position:sticky;top:0;z-index:21;background:#000}
.navigation-toggle{grid-column:1;justify-self:start;display:flex;align-items:center;gap:10px;min-height:42px;padding:10px 13px;border:1px solid #555;border-radius:4px;background:#111;color:#fff;font:600 10px Inter,Arial,sans-serif;letter-spacing:.08em;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.navigation-toggle>span:first-child{font-size:20px;line-height:1}
.navigation-toggle:hover{background:#fff;color:#000;border-color:#fff}
@media(min-width:821px){
  .sidebar{transition:transform .35s ease,visibility 0s}
  .main{transition:margin-left .35s ease,width .35s ease}
  body.navigation-hidden .sidebar{transform:translateX(calc(-100% - var(--scrollbar-size,14px)));visibility:hidden;transition:transform .35s ease,visibility 0s .35s}
  body.navigation-hidden .main{margin-left:0;width:100%}
}
@media(max-width:1080px){.navigation-toggle{padding:9px;gap:7px;font-size:10px}.topbar{padding-inline:20px}}
@media(max-width:820px){.navigation-toggle{width:42px;justify-content:center}.navigation-toggle>span:last-child{display:none}}

/* Movimiento del inicio: entrada por etapas y fotografía en capas. */
.intro{position:relative;isolation:isolate;--hero-x:0px;--hero-y:0px;--hero-scroll:0px}
.hero-line{display:block}
.intro h1{width:100%;font-size:clamp(42px,5.2vw,80px)}
.intro-copy{position:relative;z-index:2}
.intro.is-visible .intro-copy>.eyebrow{animation:hero-enter .8s .1s both}
.intro.is-visible .hero-line:first-child{animation:hero-enter 1s .2s both}
.intro.is-visible .hero-line:nth-child(2){animation:hero-enter 1s .36s both}
.intro.is-visible .intro-copy>p:not(.eyebrow){animation:hero-enter .9s .52s both}
.intro.is-visible #exploreBtn{animation:hero-enter .9s .66s backwards}
.intro-art{background:#151515}
.intro-art:before{z-index:1;pointer-events:none;background:linear-gradient(90deg,#080b0c88,#080b0c11 65%,#080b0c44)}
.hero-photo{position:absolute;inset:-45px;transform:translate3d(var(--hero-x),calc(var(--hero-y) + var(--hero-scroll)),0);transition:transform .65s ease-out;pointer-events:none}
.hero-photo:before{content:"";position:absolute;inset:0;background:url('assets/project-x7-reference.webp') center 48%/cover no-repeat;animation:hero-zoom 12s ease-in-out infinite alternate}
.intro-art>span{transform:translate3d(calc(var(--hero-x) * -0.6),calc(var(--hero-y) * -0.6),0);transition:transform .65s ease-out}
.hero-slogan{display:block;animation:hero-float 6s ease-in-out infinite}
.intro-art strong{z-index:2;font-size:10.5px}
.intro-art .art-stripe{display:block;z-index:1;inset:-50% auto -50% -70%;width:32%;height:auto;background:linear-gradient(90deg,transparent,#ffffff1a,transparent);opacity:1;filter:none;pointer-events:none;animation:hero-light 9s ease-in-out infinite}
#exploreBtn span{display:inline-block;animation:hero-arrow 2.8s 1.5s ease-in-out infinite}
.motion-toggle{position:absolute;top:18px;right:18px;z-index:3;display:flex;align-items:center;gap:12px;min-height:40px;padding:9px 13px;border:1px solid #ffffff55;border-radius:20px;background:#0009;color:#fff;font:600 10px Inter,Arial,sans-serif;letter-spacing:.1em;transition:background .25s,border-color .25s}
.motion-toggle:hover{background:#000d;border-color:#fff}
.motion-toggle:disabled{cursor:default;color:#bbb}
.intro.motion-paused .intro-copy>* ,.intro.motion-paused .hero-line{animation:none}
.intro.motion-paused .hero-photo:before,.intro.motion-paused .hero-slogan,.intro.motion-paused .art-stripe,.intro.motion-paused #exploreBtn span,
.intro.motion-offscreen .hero-photo:before,.intro.motion-offscreen .hero-slogan,.intro.motion-offscreen .art-stripe,.intro.motion-offscreen #exploreBtn span{animation-play-state:paused}

@keyframes hero-enter{from{opacity:0;transform:translateY(32px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes hero-zoom{from{transform:scale(1)}to{transform:scale(1.09) translate3d(-1%,1%,0)}}
@keyframes hero-float{0%,100%{transform:translateY(0) rotate(-9deg)}50%{transform:translateY(-12px) rotate(-7deg)}}
@keyframes hero-light{0%,35%{transform:translateX(0) rotate(22deg)}80%,100%{transform:translateX(650%) rotate(22deg)}}
@keyframes hero-arrow{0%,65%,100%{transform:translate(0,0)}80%{transform:translate(4px,4px)}}
@media(max-width:580px){.intro h1{font-size:clamp(40px,12vw,65px)}.intro-art{min-height:260px}.motion-toggle{top:auto;bottom:218px;right:14px;font-size:10px}.hero-slogan{font-size:32px}}
@media(prefers-reduced-motion:reduce){
  .intro *, .intro *:before{animation:none!important;transition:none!important}
  .hero-photo,.intro-art>span{transform:none}
  .hero-slogan{transform:rotate(-9deg)}
  .art-stripe{display:none!important}
  .navigation-toggle,.sidebar,.main,body.navigation-hidden .sidebar{transition:none}
}

/* Botón del menú: solo tres líneas horizontales que se acomodan al abrir y cerrar. */
.navigation-toggle{width:46px;height:46px;min-height:46px;padding:0;gap:0;justify-content:center;border-radius:6px;transition:background .25s,color .25s,border-color .25s,transform .15s}
.navigation-toggle:active{transform:scale(.93)}
.navigation-toggle>.burger{position:relative;display:block!important;width:22px;height:16px;font-size:0}
.burger i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:width .45s cubic-bezier(.77,0,.18,1),transform .45s cubic-bezier(.77,0,.18,1)}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:7px}
.burger i:nth-child(3){top:14px}
.navigation-toggle[aria-expanded="true"] .burger i:nth-child(2){width:66%}
.navigation-toggle[aria-expanded="true"] .burger i:nth-child(3){width:38%}
.navigation-toggle:hover .burger i:nth-child(1){transform:translateX(3px)}
.navigation-toggle:hover .burger i:nth-child(2){transform:translateX(-2px)}
.navigation-toggle:hover .burger i:nth-child(3){transform:translateX(4px)}

/* Menú lateral: deslizamiento más suave y opciones que entran una tras otra. */
@media(min-width:821px){
  .sidebar{transition:transform .6s cubic-bezier(.77,0,.18,1),visibility 0s}
  .main{transition:margin-left .6s cubic-bezier(.77,0,.18,1),width .6s cubic-bezier(.77,0,.18,1)}
  body.navigation-hidden .sidebar{transition:transform .6s cubic-bezier(.77,0,.18,1),visibility 0s .6s}
}
@media(max-width:820px){.sidebar{transition:transform .55s cubic-bezier(.77,0,.18,1)}}
.sidebar.menu-entering :is(.brand,.brand-caption,.nav>a,.nav-label,.nav-categories>a,.side-bottom){animation:menu-item-in .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 45ms + 150ms)}
@keyframes menu-item-in{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}

/* Aparición al desplazarse por la página. */
.reveal{opacity:0;transform:translateY(42px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.product-card.reveal{animation:none}
footer.reveal{transform:translateY(24px)}
footer.reveal.in{transform:none}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .sidebar.menu-entering *{animation:none!important}
  .burger i{transition:none}
}

/* ---------- Animaciones de los productos ---------- */
#addToCart.added,#addToCart.added:disabled{background:#7dffa8;color:#000;opacity:1;justify-content:center}
/* Carga: tarjetas de esqueleto con brillo mientras llega el catálogo. */
.skeleton-card .sk-img{aspect-ratio:1/1.2;background:#0b0b0b;border:1px solid #111}
.skeleton-card .sk-line{height:12px;margin:16px 2px 0;background:#111;border-radius:6px;width:70%}
.skeleton-card .sk-line.short{width:35%;margin-top:10px}
.skeleton-card>*{position:relative;overflow:hidden}
.skeleton-card>*::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,#ffffff12 50%,transparent 80%);transform:translateX(-100%);animation:sk-shine 1.4s ease-in-out infinite}
@keyframes sk-shine{to{transform:translateX(100%)}}

/* Tarjeta: se eleva, la foto hace zoom con un destello y, si hay segunda foto, aparece. */
.product-image{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),border-color .5s}
.product-card:hover .product-image,.product-card:focus-visible .product-image{transform:translateY(-6px);box-shadow:0 26px 40px -22px #ffffff40;border-color:#2a2a2a}
.product-image::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff26 48%,transparent 66%);transform:translateX(-120%);pointer-events:none}
.product-card:hover .product-image::before{transform:translateX(120%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.product-image .alt-photo{position:absolute;inset:0;opacity:0;transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.product-card:hover .alt-photo{opacity:1}
.product-meta strong{transition:letter-spacing .4s ease}
.product-card:hover .product-meta strong{letter-spacing:.04em}
.badge{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.product-card:hover .badge{transform:translateY(-2px) scale(1.05)}

/* Ficha del producto: entra creciendo, la foto se acomoda y los textos aparecen en cascada. */
@media(prefers-reduced-motion:no-preference){
  .product-dialog[open]{animation:dialog-in .55s cubic-bezier(.16,1,.3,1)}
  .product-dialog[open]::backdrop{animation:backdrop-in .4s ease}
  .product-dialog.closing{animation:dialog-out .26s ease forwards}
  .product-dialog.closing::backdrop{animation:backdrop-out .26s ease forwards}
  .product-dialog[open] #detailImage{animation:photo-in .9s cubic-bezier(.16,1,.3,1)}
  .product-dialog[open] .detail-copy>*{animation:detail-in .6s cubic-bezier(.16,1,.3,1) both}
  .product-dialog[open] .detail-copy>:nth-child(1){animation-delay:.12s}
  .product-dialog[open] .detail-copy>:nth-child(2){animation-delay:.18s}
  .product-dialog[open] .detail-copy>:nth-child(3){animation-delay:.24s}
  .product-dialog[open] .detail-copy>:nth-child(4){animation-delay:.3s}
  .product-dialog[open] .detail-copy>:nth-child(5){animation-delay:.36s}
  .product-dialog[open] .detail-copy>:nth-child(6){animation-delay:.4s}
  .product-dialog[open] .detail-copy>:nth-child(7){animation-delay:.44s}
  .product-dialog[open] .detail-copy>:nth-child(8){animation-delay:.48s}
  .product-dialog[open] .detail-thumbs button{animation:detail-in .5s cubic-bezier(.16,1,.3,1) both}
  .product-dialog[open] .detail-thumbs button:nth-child(2){animation-delay:.08s}
  .product-dialog[open] .detail-thumbs button:nth-child(3){animation-delay:.16s}
  .product-dialog[open] .detail-thumbs button:nth-child(n+4){animation-delay:.24s}
  #detailImage{transition:opacity .18s ease,transform .4s cubic-bezier(.16,1,.3,1)}
  #detailImage.swapping{opacity:0;transform:scale(1.03)}
  .detail-thumbs button{transition:opacity .25s,border-color .25s,transform .25s}
  .detail-thumbs button:hover{transform:translateY(-2px)}

  /* Botón "añadido", foto que vuela al carrito y contador que salta. */
  #addToCart.added{animation:added .45s cubic-bezier(.16,1,.3,1)}
  .fly-ghost{position:fixed;z-index:100;object-fit:cover;pointer-events:none;box-shadow:0 20px 40px #0008}
  #cartCount.pop{animation:count-pop .5s cubic-bezier(.34,1.56,.64,1)}

  /* Carrito: las filas entran una tras otra al abrirlo. */
  .cart-drawer.rows-in .cart-row{animation:row-in .55s cubic-bezier(.16,1,.3,1) both}
  .cart-drawer.rows-in .cart-row:nth-child(2){animation-delay:.07s}
  .cart-drawer.rows-in .cart-row:nth-child(3){animation-delay:.14s}
  .cart-drawer.rows-in .cart-row:nth-child(4){animation-delay:.21s}
  .cart-drawer.rows-in .cart-row:nth-child(n+5){animation-delay:.28s}
}
@keyframes dialog-in{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}
@keyframes dialog-out{to{opacity:0;transform:translateY(16px) scale(.97)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes backdrop-out{to{opacity:0}}
@keyframes photo-in{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes detail-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes added{0%{transform:scale(1)}40%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes count-pop{0%{transform:scale(1)}40%{transform:scale(1.6)}100%{transform:scale(1)}}
@keyframes row-in{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .skeleton-card>*::after{animation:none}
  .product-image,.product-image::before,.product-image .alt-photo,.badge,.product-meta strong{transition:none}
  .product-card:hover .product-image{transform:none}
}

/* Con GSAP activo, el título de la portada lo anima GSAP (no la animación CSS) para no duplicar efectos. */
.gsap-on .intro.is-visible .hero-line{animation:none}
.gsap-on .style-media img{will-change:transform}
@media(prefers-reduced-motion:reduce){.style-media img{transform:none!important;transition:none}}
.gsap-on .style-media{inset:-7% 0}
.gsap-on .style-media img{will-change:auto}

/* Menú lateral superpuesto en todas las pantallas: el contenido no se mueve ni se achica. */
.main{margin-left:0!important;width:100%!important;transition:none!important}
.sidebar{z-index:31;width:min(320px,86vw);transform:translateX(calc(-100% - var(--scrollbar-size,14px)));visibility:hidden;box-shadow:30px 0 80px -30px #000;transition:transform .6s cubic-bezier(.77,0,.18,1),visibility 0s .6s}
.sidebar.open{transform:none;visibility:visible;transition:transform .6s cubic-bezier(.77,0,.18,1),visibility 0s}
.scrim{z-index:30}
.scrim.open{backdrop-filter:blur(6px) saturate(.8)}
.menu-close{display:block!important;position:absolute;top:18px;right:16px;transition:transform .3s ease}
.menu-close:hover{transform:rotate(90deg)}
/* Enlaces del menú: una línea roja crece desde la izquierda al pasar el mouse. */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:#C8102E;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.sidebar,.sidebar.open{transition:none}.nav a::after{transition:none}}

/* Encabezado inteligente: se vuelve translúcido al bajar, se oculta al seguir bajando y reaparece al subir. */
.gsap-on .topbar{transition:transform .5s cubic-bezier(.16,1,.3,1),background-color .4s ease,backdrop-filter .4s ease}
.gsap-on .topbar.is-scrolled{background:rgba(8,8,8,.8);backdrop-filter:blur(14px) saturate(1.15)}
.gsap-on .topbar.is-hidden{transform:translateY(-105%)}
/* Con GSAP, la inclinación 3D de las tarjetas la controla GSAP: sin transición CSS que la frene. */
.gsap-on .product-image{transition:box-shadow .5s cubic-bezier(.16,1,.3,1),border-color .5s;transform-style:preserve-3d}
/* Reserva el espacio de la barra de desplazamiento aunque se oculte (menú o carrito abiertos): nada salta de lugar. */
body{scrollbar-gutter:stable}
/* Lenis usa overflow:clip al detenerse, y con clip no se respeta el espacio reservado para la barra: usamos hidden. */
body.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:hidden}


/* ===== Video de portada =====
   El video (fondo negro, letras al centro) se funde con el negro de la portada: el título queda por encima de su
   parte oscura y las letras del video, a la derecha (o debajo en el celular), quedan a la vista. */
.intro{background:#000}
.intro .intro-video{position:absolute;z-index:0;top:50%;right:0;width:min(66%,128vh);aspect-ratio:1;min-height:0;transform:translateY(-50%);background:#000;overflow:hidden;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 18%),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.intro .intro-video:before{content:none}
.intro-video video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.intro .intro-copy{position:relative;z-index:2}
.intro-copy h1,.intro-copy>p{text-shadow:0 2px 18px #000}
.intro .motion-toggle{z-index:3}
@media(min-width:821px){.intro{min-height:clamp(460px,72vh,720px)}}
@media(max-width:820px){
  .intro{display:block}
  .intro .intro-copy{padding-bottom:0}
  .intro .intro-video{position:relative;top:auto;transform:none;width:100%;margin-top:calc(-1*clamp(56px,20vw,150px));
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 24%,#000 88%,transparent)}
  .intro #exploreBtn{background:#000}
  .intro .motion-toggle{top:auto;bottom:14px;right:14px}
}

/* Posición del texto de la portada (Panel > Portada): hero-x-left|center|right y hero-y-top|middle|bottom.
   En la computadora el video queda del lado contrario al texto (o detrás, más tenue, si el texto va al centro).
   En el celular el texto siempre va arriba del video: solo cambia su alineación. hero-fit-contain = video completo, sin recortar. */
.intro.hero-fit-contain .intro-video video{object-fit:contain}
@media(min-width:821px){
  .intro.hero-y-top .intro-copy{justify-content:flex-start}
  .intro.hero-y-bottom .intro-copy{justify-content:flex-end}
  .intro.hero-x-right{grid-template-columns:44% 56%}
  .intro.hero-x-right .intro-copy{grid-column:2;padding-left:6%;padding-right:9%;align-items:flex-end;text-align:right}
  .intro.hero-x-right .intro-video{right:auto;left:0;
    -webkit-mask-image:linear-gradient(270deg,transparent,#000 18%),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
    mask-image:linear-gradient(270deg,transparent,#000 18%),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
  .intro.hero-x-right .motion-toggle{right:auto;left:18px}
  .intro.hero-x-center{grid-template-columns:minmax(0,1fr)}
  .intro.hero-x-center .intro-copy{padding-left:8%;padding-right:8%;align-items:center;text-align:center}
  .intro.hero-x-center .intro-video{right:50%;transform:translate(50%,-50%);opacity:.6;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
}
@media(max-width:820px){
  .intro.hero-x-center .intro-copy{align-items:center;text-align:center}
  .intro.hero-x-right .intro-copy{align-items:flex-end;text-align:right}
}

/* Botón del sonido del video (bocina): redondo, solo el ícono. */
.intro .sound-toggle{width:44px;height:44px;min-height:0;padding:0;justify-content:center;gap:0;border-radius:50%}
.intro .sound-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.intro .sound-toggle[aria-pressed="true"]{background:#fff;color:#000;border-color:#fff}
.intro .sound-toggle[hidden]{display:none}