/* CORE — Back to Basics · hoja de estilos
   Separada de index.html el 2026-09-10. Las rutas de assets/ son
   relativas a este archivo, que vive junto al index. */

:root{
  --bg:    #0A0A0A;
  --bg2:   #111111;
  --surf:  #1A1A1A;
  --wht:   #EFEFEF;
  --g1:    #AAAAAA;
  --g2:    #8A8A8A;   /* 5,7:1 sobre el negro; el #666 no llegaba a 4,5:1 */
  --g3:    #333333;
  --glass: rgba(255,255,255,.03);
  --gb:    rgba(255,255,255,.07);
  --dim:   rgba(239,239,239,.5);
  --dim2:  rgba(239,239,239,.1);
  --dim3:  rgba(239,239,239,.05);
  --hh:    68px;
  --ease:  cubic-bezier(.22,1,.36,1);
  --ease2: cubic-bezier(.76,0,.24,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--wht);font-family:'Montserrat',sans-serif;overflow-x:hidden;cursor:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,select,a{cursor:none;font-family:inherit}
::-webkit-scrollbar{width:1px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--g3)}

/* ── GRAIN ── */
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;animation:grainAnim 0.5s steps(1) infinite}
@keyframes grainAnim{0%{background-position:0 0}25%{background-position:-50px 25px}50%{background-position:25px -50px}75%{background-position:-75px 50px}}

/* ── CURSOR ── */
#cur{position:fixed;top:0;left:0;pointer-events:none;z-index:9999}
#cur-dot{position:fixed;top:-3px;left:-3px;width:6px;height:6px;background:var(--wht);border-radius:50%;will-change:transform}
#cur-ring{position:fixed;top:0;left:0;width:40px;height:40px;border:1px solid rgba(239,239,239,.35);border-radius:50%;will-change:transform;transition:border-color .3s}
#cur.c-hover #cur-ring{border-color:rgba(239,239,239,.75)}

/* ── HEADER ── */
header{position:fixed;top:0;left:0;width:100%;z-index:900;height:var(--hh);display:flex;align-items:center;padding:0 2.5rem;border-bottom:1px solid transparent;transition:background .4s,border-color .4s}
header.op{background:rgba(10,10,10,.9);backdrop-filter:blur(20px);border-bottom-color:var(--dim3)}
header nav{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav-left{display:flex;gap:2rem}
.nav-logo{font-size:.9rem;font-weight:900;letter-spacing:.5em;text-transform:uppercase;justify-self:center}
.nav-logo img{height:28px;filter:brightness(0) invert(1);object-fit:contain}
.nav-right{display:flex;gap:1.8rem;justify-content:flex-end;align-items:center}
.nav-link{font-size:.58rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--g1);transition:color .25s;position:relative}
.nav-link::after{content:'';position:absolute;bottom:-3px;left:0;right:100%;height:1px;background:var(--wht);transition:right .35s var(--ease)}
.nav-link:hover{color:var(--wht)}
.nav-link:hover::after{right:0}
.nav-icon-btn{background:none;border:none;color:var(--g1);display:flex;align-items:center;gap:.4rem;font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;transition:color .25s}
.nav-icon-btn:hover{color:var(--wht)}
.cart-badge{background:var(--wht);color:var(--bg);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:800;transition:transform .2s}
.cart-badge.bump{transform:scale(1.5)}
.hamburger{display:none;background:none;border:none;color:var(--wht);padding:4px}

/* ── PAGES ── */
.page{display:none}.page.active{display:block}

/* ── HERO ── */
.hero{height:100vh;min-height:600px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
#bgCanvas{position:absolute;inset:0;width:100%!important;height:100%!important;pointer-events:none;z-index:0}
.hero-fade{position:absolute;bottom:0;left:0;right:0;height:260px;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,rgba(10,10,10,.6) 55%,rgba(10,10,10,1) 100%)}
.hero-content{position:relative;z-index:5;text-align:center;padding:0 2rem}

/* Eyebrow */

/* Big scramble title */
.hero-title-wrap{position:relative;display:inline-block}
.hero-glow{position:absolute;inset:-60px;background:radial-gradient(ellipse,rgba(255,255,255,.06),transparent 65%);pointer-events:none}
.hero-logo-img{height:clamp(64px,14vw,150px);width:auto;filter:brightness(0) invert(1);position:relative;z-index:1;transition:transform .6s var(--ease)}
.hero-logo-text{display:none;font-size:clamp(4rem,12vw,10rem);font-weight:900;letter-spacing:.06em;line-height:1;position:relative;z-index:1}


/* Tag pill */

/* Hero CTAs — magnetic */
.hero-btns{margin-top:3.5rem;display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
.btn-mag-wrap{position:relative;display:inline-block}
.btn-p{display:inline-flex;align-items:center;gap:.7rem;padding:1rem 2.6rem;background:var(--wht);color:var(--bg);font-size:.62rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;border:none;position:relative;overflow:hidden;transition:color .4s}
.btn-p::before{content:'';position:absolute;inset:0;background:var(--bg);transform:translateY(100%);transition:transform .45s var(--ease2)}
.btn-p:hover{color:var(--wht)}.btn-p:hover::before{transform:translateY(0)}
.btn-p span{position:relative;z-index:1}

/* Scroll hint */
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-hint span{font-size:.48rem;letter-spacing:.35em;text-transform:uppercase;color:var(--g2)}
.scroll-pill{width:22px;height:38px;border:1px solid var(--g3);border-radius:11px;display:flex;align-items:flex-start;justify-content:center;padding-top:5px}
.scroll-ball{width:3px;height:7px;background:var(--wht);border-radius:2px;animation:sb 2s ease infinite}
@keyframes sb{0%{transform:translateY(0);opacity:1}65%{transform:translateY(14px);opacity:0}66%{opacity:0;transform:translateY(0)}100%{opacity:1}}

/* ── MARQUEE ── */
.mq{border-bottom:1px solid var(--dim3);overflow:hidden;background:var(--bg)}
.mq-track{display:flex;flex-shrink:0;animation:mq 32s linear infinite}
.mq-item{display:flex;align-items:center;padding:0 2rem}
.mq-text{font-size:.58rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--g2);white-space:nowrap;padding:1.1rem 0}
.mq-sep{width:3px;height:3px;border-radius:50%;background:var(--g3);flex-shrink:0;margin:0 1.8rem}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SECTIONS ── */
.sec{padding:8rem 2.5rem;max-width:1280px;margin:0 auto}
.sec-cats{padding-bottom:3rem}
.sec-head{margin-bottom:5rem;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.s-tag{display:flex;align-items:center;gap:.7rem;font-size:.52rem;font-weight:700;letter-spacing:.38em;text-transform:uppercase;color:var(--g2);margin-bottom:1.2rem}
.s-tag-line{width:24px;height:1px;background:var(--g3)}

/* Clip reveal title */
.reveal-title{overflow:hidden}
.reveal-title .inner{display:block;transform:translateY(105%);transition:transform .9s var(--ease)}
.reveal-title.in .inner{transform:translateY(0)}
.s-title{font-size:clamp(2.2rem,5vw,4rem);font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.02em}
.s-title em{font-style:normal;-webkit-text-stroke:1px var(--wht);color:transparent}
.s-lnk{font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--g2);display:inline-flex;align-items:center;gap:.6rem;border-bottom:1px solid var(--g3);padding-bottom:3px;transition:color .25s,border-color .25s}
.s-lnk:hover{color:var(--wht);border-color:var(--wht)}

/* ── STATS BAR ── */
.stats-bar{background:var(--bg2);border-top:1px solid var(--dim3);border-bottom:1px solid var(--dim3);padding:3rem 2.5rem}
.stats-inner{max-width:900px;margin:0 auto;display:flex;justify-content:center;align-items:stretch}
.stat-item{text-align:center;padding:0 2.5rem;position:relative;flex:1;max-width:220px}
.stat-item:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;bottom:20%;width:1px;background:var(--dim3)}
.stat-num{font-size:clamp(2rem,4vw,3rem);font-weight:900;line-height:1;color:var(--wht);font-variant-numeric:tabular-nums}
.stat-lbl{font-size:.52rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--g2);margin-top:.5rem}

/* ── CATS ── */
/* ── LINEAS EN FRANJAS ──
   Tres bandas a todo el ancho. La foto va de fondo a sangre, apagada y
   casi en gris; al pasar el cursor la banda se abre, la foto recupera
   color y el nombre se corre. Las curvas solo frenan: el --ease de la
   web se come el recorrido en los primeros milisegundos y da un tiron. */
.cats-bands{border-top:1px solid var(--dim3)}
.band{position:relative;display:block;width:100%;overflow:hidden;
  height:clamp(128px,17vh,182px);border:none;border-bottom:1px solid var(--dim3);
  padding:0;background:var(--surf);color:inherit;font:inherit;text-align:left;
  cursor:none}
/* .rev reescribe la propiedad transition entera, asi que la altura se
   vuelve a declarar aqui, con mas peso, o no llegaria a animarse. */
.band,.band.rev{transition:opacity .85s ease,transform .85s ease,
  height .8s cubic-bezier(.25,.46,.45,.94)}
.band:hover,.band:focus-visible{height:clamp(188px,27vh,286px)}
.band:focus-visible{outline:2px solid var(--wht);outline-offset:-2px}
.band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* El encuadre lo fija cada franja: en una banda ancha, cover se come
     casi toda la foto vertical y por defecto cortaba a la altura de la
     cara. Interesa la prenda. */
  object-position:center var(--bp,34%);pointer-events:none;transform:scale(1.04);
  filter:grayscale(.45) brightness(.5);will-change:transform;
  transition:transform 1.3s cubic-bezier(.25,.46,.45,.94),filter 1s ease}
.band:hover .band-img,.band:focus-visible .band-img{
  transform:scale(1.11);filter:grayscale(0) brightness(.72)}
.band-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,
    rgba(10,10,10,.42) 52%,rgba(10,10,10,.8) 100%)}
.band-row{position:relative;height:100%;max-width:1280px;margin-inline:auto;
  padding:0 2.5rem;display:flex;align-items:center;gap:1.6rem}
.band-num{flex-shrink:0;width:2.2rem;font-size:.52rem;font-weight:700;
  letter-spacing:.28em;color:var(--g2)}
.band-name{font-size:clamp(1.5rem,5vw,3.4rem);font-weight:900;
  text-transform:uppercase;line-height:.95;letter-spacing:-.02em;
  transition:transform .8s cubic-bezier(.25,.46,.45,.94)}
.band:hover .band-name,.band:focus-visible .band-name{transform:translateX(16px)}
.band-go{margin-left:auto;flex-shrink:0;display:flex;align-items:center;
  gap:.7rem;font-size:.55rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--g1);opacity:0;transform:translateX(-16px);
  transition:opacity .55s ease,transform .8s cubic-bezier(.25,.46,.45,.94)}
.band:hover .band-go,.band:focus-visible .band-go{opacity:1;transform:none}
@media(max-width:700px){
  .band{height:clamp(104px,14vh,132px)}
  .band:hover,.band:focus-visible{height:clamp(140px,19vh,176px)}
  .band-row{padding:0 1.2rem;gap:1rem}
  .band-go span{display:none}
}

/* ── PRODUCTS – horizontal drag scroll ── */
.hscroll-section{padding:8rem 2.5rem}
.hscroll-head{max-width:1280px;margin-inline:auto;margin-bottom:3.5rem;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.hscroll-hint{display:flex;align-items:center;gap:.6rem;font-size:.55rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--g2)}
.drag-icon{width:36px;height:36px;border:1px solid var(--g3);border-radius:50%;display:flex;align-items:center;justify-content:center;animation:rotateDrag 4s linear infinite}
@keyframes rotateDrag{to{transform:rotate(360deg)}}

.product-card{cursor:none;background:var(--surf);border:1px solid var(--dim3);transition:border-color .35s;position:relative}
.product-card::after{content:'';position:absolute;inset:0;box-shadow:0 20px 50px rgba(0,0,0,.6);opacity:0;transition:opacity .35s;pointer-events:none}
.product-card:hover{border-color:rgba(239,239,239,.18)}
.product-card:hover::after{opacity:1}
.pci{aspect-ratio:3/4;overflow:hidden;position:relative}
.pci img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);pointer-events:none;will-change:transform}
.product-card:hover .pci img{transform:scale(1.06)}
/* En el carrusel solo crece la del centro, y con una curva que arranca
   despacio: el --ease de la web (.22,1,.36,1) se come casi todo el
   recorrido en los primeros milisegundos y se siente como un salto. */
/* En el carrusel la imagen no crece al pasar el cursor: esto anula la
   regla de .product-card, que es de donde venia el salto. */
.cf-card:hover .pci img{transform:none}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.img-ph{width:100%;height:100%;min-height:320px;display:flex;align-items:center;justify-content:center;font-size:0;background:linear-gradient(90deg,var(--surf) 25%,rgba(255,255,255,.05) 50%,var(--surf) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}
#mainImg{transition:opacity .3s}
.plb{position:absolute;top:.8rem;left:.8rem;background:rgba(10,10,10,.82);backdrop-filter:blur(8px);border:1px solid var(--dim3);padding:.3rem .7rem;font-size:.45rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--g2)}
/* Quick add reveal */
.qa-wrap{position:absolute;inset:0;display:flex;align-items:flex-end;padding:1rem;background:linear-gradient(to top,rgba(10,10,10,.92) 0%,transparent 55%);opacity:0;transition:opacity .35s}
.product-card:hover .qa-wrap{opacity:1}
.quick-add{width:100%;background:var(--wht);color:var(--bg);border:none;padding:.75rem;font-size:.58rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;transform:translateY(8px);transition:transform .4s var(--ease);cursor:none}
.product-card:hover .quick-add{transform:translateY(0)}
.p-info{padding:1.2rem}
.p-line{font-size:.48rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--g2);margin-bottom:.4rem}
.p-name{font-size:.9rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.6rem;line-height:1.15}
.p-price-row{display:flex;align-items:center;justify-content:space-between}
.p-price{font-size:1rem;font-weight:700}
.p-dots{display:flex;gap:4px}
.p-dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(239,239,239,.2)}


/* ── COVERFLOW · SELECTOR DE PRENDAS ── */
.cf{--cf-card:clamp(196px,25vw,312px);--cf-h:calc(var(--cf-card) * 4 / 3);
  --cf-round:18px;--cf-spot:340px;width:100%}
.cf-rel{position:relative}
.cf-frame{overflow:hidden;padding:2.6rem 0;outline:none;cursor:grab;touch-action:pan-y;
  perspective:calc(var(--cf-card) * 3)}
.cf-frame:active{cursor:grabbing}
.cf-frame:focus-visible{outline:2px solid var(--wht);outline-offset:-2px}
.cf-stage{position:relative;height:var(--cf-h);transform-style:preserve-3d;
  user-select:none;-webkit-user-select:none}
.cf-card{position:absolute;left:50%;top:0;flex:none;width:var(--cf-card);
  aspect-ratio:3/4;scroll-snap-align:none;border-radius:var(--cf-round);
  will-change:transform,opacity;backface-visibility:hidden}
/* El recorte vive aqui, no en la tarjeta: si la tarjeta recorta, se lleva
   por delante el halo, que tiene que salirse por fuera del borde. */
.cf-inner{position:absolute;inset:0;border-radius:var(--cf-round);
  overflow:hidden}
.cf-card .pci{width:100%;height:100%;border-radius:var(--cf-round);
  will-change:filter,transform}
.cf-card img{pointer-events:none}
/* ── HALO DE LA TARJETA CENTRAL ──
   El spotlight-card de 21st.dev entero, pero en blanco. Cae toda la
   maquinaria de tono (--base, --spread, --hue), que alli sacaba el color
   de la posicion del raton en la ventana. Quedan sus cuatro piezas:
     · velo tenue sobre el fondo de la tarjeta, con su lavado de luz
     · ::before  anillo ancho, con brightness(2) como el original
     · ::after   anillo mas estrecho y blanco puro, el nucleo
     · .cf-bloom hijo difuminado que reparte el resplandor por fuera
   El original situaba los degradados con background-attachment:fixed,
   en coordenadas de ventana; dentro de una tarjeta con rotateY eso se
   comporta distinto segun el navegador, asi que el puntero se le pasa ya
   convertido a coordenadas de la tarjeta (--gx,--gy) y cada capa suma su
   propio desplazamiento.
   La mascara usa exclude y no el intersect del original: intersect con
   una primera capa transparente da cero y no se veria nada. */
/* El original usa un borde de 3px sobre una tarjeta pequena. Aqui la
   tarjeta mide 312px y 3px se pierden: medido, el anillo salia a 242 de
   blanco pero con la foto detras a 208, o sea invisible. A 7px si se
   lee. El resplandor tambien crece en proporcion. */
.cf-card{--gb:7px;--gbloom:16px}
/* La mascara del anillo, compartida por las tres capas. */
.cf-card::before,.cf-card::after,.cf-bloom::before{
  /* El area del fondo es la caja del borde y ocupa justo eso: asi la
     coordenada del foco es directa, sin el desfase que metia centrar un
     fondo mas grande que el elemento. */
  background-repeat:no-repeat;background-origin:border-box;
  background-position:0 0;background-size:100% 100%;
  -webkit-mask:linear-gradient(#000,#000),linear-gradient(#000,#000);
  mask:linear-gradient(#000,#000),linear-gradient(#000,#000);
  -webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;
  -webkit-mask-composite:xor;mask-composite:exclude}
.cf-card::before,.cf-card::after{
  content:'';position:absolute;inset:calc(var(--gb) * -1);z-index:6;
  pointer-events:none;box-shadow:none;opacity:0;
  border:var(--gb) solid transparent;
  border-radius:calc(var(--cf-round) + var(--gb));
  transition:opacity .5s var(--ease)}
.cf-card::before{filter:brightness(2);
  background-image:radial-gradient(calc(var(--cf-spot) * .75) calc(var(--cf-spot) * .75) at
    calc(var(--gx,-400) * 1px + var(--gb)) calc(var(--gy,-400) * 1px + var(--gb)),
    rgba(255,255,255,.8),rgba(255,255,255,.25) 55%,transparent 100%)}
.cf-card::after{
  background-image:radial-gradient(calc(var(--cf-spot) * .5) calc(var(--cf-spot) * .5) at
    calc(var(--gx,-400) * 1px + var(--gb)) calc(var(--gy,-400) * 1px + var(--gb)),
    #fff,transparent 100%)}
/* El resplandor de fuera: el mismo anillo, mucho mas ancho y difuminado. */
.cf-bloom{position:absolute;inset:0;pointer-events:none;z-index:5;
  opacity:0;will-change:filter;filter:blur(calc(var(--gb) * 4));
  transition:opacity .5s var(--ease)}
.cf-bloom::before{content:'';position:absolute;
  inset:calc(var(--gbloom) * -1);border:var(--gbloom) solid transparent;
  border-radius:calc(var(--cf-round) + var(--gbloom));
  background-image:radial-gradient(calc(var(--cf-spot) * .75) calc(var(--cf-spot) * .75) at
    calc(var(--gx,-400) * 1px + var(--gbloom)) calc(var(--gy,-400) * 1px + var(--gbloom)),
    #fff,transparent 100%)}
/* Velo del fondo, como el --backdrop del original, con su lavado. */
.cf-card.is-center{
  background-color:hsl(0 0% 60% / .12);
  background-image:radial-gradient(var(--cf-spot) var(--cf-spot) at
    calc(var(--gx,-400) * 1px) calc(var(--gy,-400) * 1px),
    hsl(0 0% 100% / .10),transparent)}
.cf-card.is-center::before,.cf-card.is-center::after,
.cf-card.is-center .cf-bloom{opacity:1}
.cf-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:200;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,10,.72);backdrop-filter:blur(8px);border:1px solid var(--dim3);
  color:var(--wht);cursor:none;transition:background .3s var(--ease),border-color .3s,color .3s}
.cf-nav:hover{background:var(--wht);color:var(--bg);border-color:var(--wht)}
.cf-prev{left:1.6rem}
.cf-next{right:1.6rem}
.cf-cap{padding:0 1.5rem;text-align:center;min-height:150px}
.cf-cap-in{animation:cfIn .45s var(--ease) both}
@keyframes cfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cf-cap-line{font-size:.48rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--g2);margin-bottom:.5rem}
.cf-cap-name{font-size:1.05rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  line-height:1.15;margin-bottom:.7rem}
.cf-cap-row{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.2rem}
.cf-cap-price{font-size:1.05rem;font-weight:700}
.cf-cap-before{font-size:.8rem;font-weight:500;color:var(--g2);text-decoration:line-through}
.cf-cap-btns{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap}
.cf-sold{padding:.72rem 1.5rem;font-size:.55rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--g2);border:1px solid var(--dim3)}
.cf-dots{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.6rem}
.cf-dot{width:7px;height:7px;border-radius:50%;background:var(--wht);border:none;padding:0;
  opacity:.28;cursor:none;transition:opacity .3s,transform .3s}
.cf-dot.on{opacity:1;transform:scale(1.25)}
.cf-empty{text-align:center;color:var(--g2);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;padding:4rem 0}
@media(max-width:600px){
  .cf-nav{display:none}
  .cf-cap{min-height:158px}
}


/* ── BOTÓN LIQUID METAL ──
   Portado del componente de johuniq (21st.dev). El metal es el shader real
   de @paper-design/shaders, embebido: la CSP de esta web no admite scripts
   de CDN. Cuatro capas en 3D: rótulo, píldora negra, anillo con el shader,
   y encima un botón transparente que recoge el clic. */
.lmb{position:relative;display:inline-block;perspective:1000px;perspective-origin:50% 50%}
.lmb-3d{position:relative;display:inline-flex;transform-style:preserve-3d}
.lmb-label{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:6px;height:46px;padding:0 28px;transform:translateZ(20px);z-index:30;pointer-events:none;
  font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:#8a8a8a;
  text-shadow:0 1px 2px rgba(0,0,0,.5);white-space:nowrap;
  transition:color .8s cubic-bezier(.34,1.56,.64,1)}
.lmb:hover .lmb-label{color:#c8c8c8}
.lmb-inner-wrap{position:absolute;inset:0;z-index:20;transform-style:preserve-3d;
  transform:translateZ(10px);
  transition:transform .15s cubic-bezier(.4,0,.2,1)}
.lmb-inner{position:absolute;inset:2px;border-radius:100px;
  background:linear-gradient(180deg,#202020 0%,#000 100%);
  transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}
.lmb-shell-wrap{position:absolute;inset:0;z-index:10;transform-style:preserve-3d;
  transform:translateZ(0);
  transition:transform .15s cubic-bezier(.4,0,.2,1)}
.lmb-shell{position:absolute;inset:0;border-radius:100px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.3),0 36px 14px rgba(0,0,0,.02),0 20px 12px rgba(0,0,0,.08),
             0 9px 9px rgba(0,0,0,.12),0 2px 5px rgba(0,0,0,.15);
  transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}
.lmb:hover .lmb-shell{box-shadow:0 0 0 1px rgba(0,0,0,.4),0 12px 6px rgba(0,0,0,.05),
  0 8px 5px rgba(0,0,0,.1),0 4px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.2)}
.lmb-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:100px}
.lmb-hit{position:absolute;inset:0;z-index:40;background:transparent;border:none;outline:none;
  cursor:none;overflow:hidden;border-radius:100px;transform:translateZ(25px);padding:0}
.lmb.is-pressed .lmb-inner-wrap{transform:translateZ(10px) translateY(1px) scale(.98)}
.lmb.is-pressed .lmb-shell-wrap{transform:translateZ(0) translateY(1px) scale(.98)}
.lmb.is-pressed .lmb-inner{box-shadow:inset 0 2px 4px rgba(0,0,0,.4),inset 0 1px 2px rgba(0,0,0,.3)}
.lmb.is-pressed .lmb-shell{box-shadow:0 0 0 1px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.3)}
.lmb-ripple{position:absolute;width:20px;height:20px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 70%);
  animation:lmb-ripple .6s ease-out forwards}
@keyframes lmb-ripple{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.6}
  100%{transform:translate(-50%,-50%) scale(4);opacity:0}}
/* Sin WebGL2 el anillo se queda en un degradado metálico fijo. */
.lmb-shell.no-gl{background:linear-gradient(120deg,#4a4a4a 0%,#f0f0f0 22%,#3a3a3a 45%,
  #d8d8d8 68%,#2a2a2a 100%)}
@media(prefers-reduced-motion:reduce){.lmb-ripple{animation:none;display:none}}

/* ── Variantes del liquid metal para los CTA de la tienda ──
   El componente es el mismo del hero. Solo cambian el ancho, el alto del
   rotulo y el estado inhabilitado, que aqui si hace falta: carrito vacio,
   talla sin elegir o pedido en curso. El rotulo lleva la tipografia CORE
   (versalitas espaciadas) en vez de la del componente original. */
.lmb--core .lmb-label{font-size:.62rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#a6a6a6}
.lmb--core:hover .lmb-label{color:var(--wht)}
.lmb--block{display:block;width:100%}
.lmb--block .lmb-3d{display:flex;width:100%}
.lmb--block .lmb-label{width:100%;height:54px}
.lmb:has(.lmb-hit:disabled){opacity:.36}
.lmb:has(.lmb-hit:disabled) .lmb-label{color:#7c7c7c}
.lmb:has(.lmb-hit:disabled) .lmb-canvas{filter:saturate(.15)}

/* ── Chips metalicos ──
   El mismo metal para los botones pequenos, sin WebGL: el filo es un
   degradado enmascarado y el barrido solo corre al pasar el cursor o
   cuando el chip esta activo. Un contexto WebGL por boton reventaria el
   limite del navegador, y a este tamano el shader no se leeria. */
.metal-chip{position:relative;isolation:isolate;display:inline-flex;align-items:center;
  justify-content:center;gap:.4rem;padding:.55rem 1.15rem;border:none;border-radius:100px;
  background:transparent;color:var(--g1);font-family:inherit;font-size:.52rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;cursor:none;
  transition:color .35s var(--ease)}
.metal-chip::before,.metal-chip::after{content:'';position:absolute;border-radius:100px}
.metal-chip::before{inset:0;z-index:-2;padding:1px;
  background:linear-gradient(115deg,#2c2c2c 0%,#eaeaea 16%,#303030 34%,#c9c9c9 54%,
    #242424 72%,#8f8f8f 88%,#2c2c2c 100%);
  background-size:300% 100%;background-position:0 50%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.metal-chip::after{inset:1px;z-index:-1;
  background:linear-gradient(180deg,#1b1b1b 0%,#0b0b0b 100%);
  transition:background .35s var(--ease)}
.metal-chip:hover{color:var(--wht)}
.metal-chip:hover::before,
.metal-chip.is-active::before,
.metal-chip.is-solid::before{animation:metal-sweep 3.2s linear infinite}
.metal-chip.is-active,.metal-chip.is-solid{color:#0A0A0A}
.metal-chip.is-active::after,.metal-chip.is-solid::after{
  background:linear-gradient(180deg,#f4f4f4 0%,#c2c2c2 52%,#e8e8e8 100%)}
.metal-chip--md{padding:.72rem 1.5rem;font-size:.55rem;font-weight:800}
@keyframes metal-sweep{from{background-position:0 50%}to{background-position:300% 50%}}
@media(prefers-reduced-motion:reduce){
  .metal-chip::before{animation:none!important}}


/* ── PARALAJE DE SCROLL ──
   Mecanismo del componente de Osmo (21st.dev): cuatro capas que se
   desplazan a 70/55/40/10 por ciento de su propia altura, atadas al
   avance del scroll sobre el bloque. Sin GSAP ni Lenis: son 20 lineas
   de transform y la CSP de esta web no admite scripts de fuera. */
.px{position:relative;background:var(--bg);border-top:1px solid var(--dim3)}
/* Sin overflow:hidden aqui a proposito: en un antecesor anula el sticky
   del escenario, que se quedaba arriba del carril y dejaba el resto en
   negro vacio. Quien recorta las capas es el propio escenario. */
/* El carril alto solo aporta recorrido de scroll; lo que se ve es el
   escenario, que queda clavado mientras el carril pasa. Sin esto las
   capas solo se mueven cuando el bloque ya ha salido de la pantalla. */
.px-track{position:relative;height:220vh}
.px-stage{position:sticky;top:0;height:100vh;min-height:600px;overflow:hidden}
.px-layer{position:absolute;will-change:transform}
.px-img{display:block;object-fit:cover;border-radius:18px}
/* Las fotos se apartan a los lados para dejar respirar al titulo: si se
   apilan centradas, la capa de delante lo tapa. Arrancan abajo porque
   todas suben, y la de atras sube mas que ninguna. */
.px-l1{top:26vh;left:0;right:0;margin-inline:auto;z-index:1;
  width:min(84vw,1040px);aspect-ratio:16/9;opacity:.3}
.px-l2{top:34vh;left:6vw;z-index:2;
  width:min(24vw,280px);aspect-ratio:2/3;opacity:.74}
.px-l3{top:52vh;left:0;right:0;z-index:4;text-align:center;pointer-events:none}
.px-l4{top:44vh;right:6vw;z-index:3;
  width:min(21vw,250px);aspect-ratio:2/3}
.px-tag{font-size:.55rem;font-weight:700;letter-spacing:.4em;
  text-transform:uppercase;color:var(--g2);margin-bottom:1.2rem}
.px-title{font-size:clamp(2.6rem,8vw,7rem);font-weight:900;
  text-transform:uppercase;line-height:.88;letter-spacing:-.03em;
  text-shadow:0 2px 40px rgba(10,10,10,.9)}
.px-title em{font-style:italic;font-weight:100;
  -webkit-text-stroke:1px var(--wht);color:transparent}
.px-fade{position:absolute;bottom:0;left:0;right:0;height:280px;
  pointer-events:none;background:linear-gradient(to bottom,
  transparent 0%,rgba(10,10,10,.75) 55%,var(--bg) 100%)}
@media(max-width:700px){
  .px-track{height:200vh}
  .px-l1{width:94vw;top:28vh}
  .px-l2{width:38vw;left:3vw;top:36vh}
  .px-l4{width:34vw;right:3vw;top:46vh}
  .px-l3{top:56vh}
}
/* Quien pide menos movimiento ve las capas quietas, en su sitio. */
@media(prefers-reduced-motion:reduce){.px-layer{transform:none!important}}

/* ── BRAND STATEMENT ── */
.brand-stmt{padding:10rem 2.5rem;text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--dim3);border-bottom:1px solid var(--dim3)}
.brand-stmt-bg{position:absolute;inset:0;background:var(--bg2)}
.brand-stmt-inner{position:relative;z-index:1;max-width:1000px;margin:0 auto}
.bs-label{font-size:.55rem;font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:var(--g2);margin-bottom:2rem;display:flex;align-items:center;justify-content:center;gap:1rem}
.bs-label::before,.bs-label::after{content:'';width:28px;height:1px;background:var(--g3)}
.bs-big{font-size:clamp(3rem,9vw,8rem);font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.03em;overflow:hidden}
.bs-big-line{display:block;overflow:hidden}
.bs-big-line .inner{display:block;transform:translateY(110%);transition:transform 1s var(--ease)}
.bs-big-line.in .inner{transform:translateY(0)}
.bs-big-line:nth-child(2) .inner{transition-delay:.12s}
.bs-big-line:nth-child(3) .inner{transition-delay:.24s}
.bs-big em{font-style:italic;font-weight:100;-webkit-text-stroke:1px var(--wht);color:transparent}
.bs-sub{margin-top:2.5rem;font-size:.92rem;line-height:1.9;color:var(--g1);max-width:460px;margin-left:auto;margin-right:auto}

/* ── HIGHLIGHT (B&W inverse) ── */
.hl{background:var(--wht);color:var(--bg);padding:5rem 2.5rem}
.hl-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:4rem;flex-wrap:wrap}
.hl-text{flex:1;min-width:280px}
.hl-label{font-size:.55rem;font-weight:700;letter-spacing:.38em;text-transform:uppercase;color:rgba(10,10,10,.72);margin-bottom:1.2rem}
.hl-title{font-size:clamp(2rem,4.5vw,3.8rem);font-weight:900;text-transform:uppercase;line-height:.92;color:var(--bg);letter-spacing:-.02em}
.hl-sub{margin-top:1.5rem;font-size:.95rem;line-height:1.9;color:rgba(10,10,10,.78);max-width:400px}
.hl-stats{display:flex;gap:3.5rem;flex-wrap:wrap}
.hl-stat-num{font-size:3rem;font-weight:900;color:var(--bg);line-height:1}
.hl-stat-lbl{font-size:.52rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(10,10,10,.72);margin-top:.4rem}

/* ── CONTACT ── */
.contact-sec{padding:8rem 2.5rem;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start}
.ci-blocks{margin-top:3rem;display:flex;flex-direction:column;gap:2.5rem}
.ci-lbl{font-size:.5rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--g2);margin-bottom:.5rem}
.ci-val{font-size:.9rem;line-height:2.1;color:var(--g1)}.ci-val a{color:var(--g1);transition:color .2s}.ci-val a:hover{color:var(--wht)}
.ig-lnk{display:inline-flex;align-items:center;gap:.7rem;margin-top:2.2rem;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--g2);padding-bottom:3px;border-bottom:1px solid var(--g3);transition:color .2s,border-color .2s}
.ig-lnk:hover{color:var(--wht);border-color:var(--wht)}
.form-wrap{background:var(--glass);border:1px solid var(--gb);backdrop-filter:blur(16px);padding:2.8rem}
.form-ttl{font-size:.6rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--g2);margin-bottom:2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--dim3)}
.fg{margin-bottom:1.8rem}
.fg label{display:block;font-size:.5rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--g2);margin-bottom:.5rem}
.fg input,.fg select,.fg textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--dim3);padding:.7rem 0;color:var(--wht);font-family:'Montserrat',sans-serif;font-size:.9rem;outline:none;transition:border-color .3s}
.fg input:focus,.fg textarea:focus{border-bottom-color:var(--wht)}
.fg select{background:var(--bg)}.fg textarea{resize:none;height:80px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* ── PRODUCT PAGE ── */
#product-page{padding-top:var(--hh)}
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:5rem;max-width:1200px;margin:0 auto;padding:4rem 2.5rem 6rem}
.pimgs{position:sticky;top:calc(var(--hh) + 2rem);align-self:start}
.pmain{width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--surf);border:1px solid var(--dim3);margin-bottom:.8rem;position:relative}
.pmain img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);pointer-events:none;will-change:transform}
.pmain:hover img{transform:scale(1.04)}
.thumbs{display:flex;gap:.6rem}
.thumb{width:78px;height:98px;overflow:hidden;background:var(--surf);cursor:none;border:1px solid transparent;opacity:.5;transition:opacity .2s,border-color .2s}
.thumb.act{opacity:1;border-color:var(--wht)}.thumb img{width:100%;height:100%;object-fit:cover}
.pinfo{padding-top:.5rem}
.breadcrumb{font-size:.52rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--g2);margin-bottom:2rem;display:flex;gap:.75rem;align-items:center}
.breadcrumb button{background:none;border:none;color:var(--g2);font-size:.52rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;transition:color .2s;cursor:none}
.breadcrumb button:hover{color:var(--wht)}
.pi-tag{display:inline-flex;align-items:center;background:var(--dim3);border:1px solid var(--dim2);padding:.3rem .8rem;font-size:.5rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--g1);margin-bottom:1.2rem}
.pi-name{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;text-transform:uppercase;line-height:.92;margin-bottom:1.5rem;letter-spacing:-.02em}
.pi-price{font-size:1.6rem;font-weight:900;margin-bottom:2.5rem}
.pi-price s{font-size:.9rem;font-weight:500;color:var(--g2);text-decoration:line-through;vertical-align:middle;margin-left:.5rem}
.pi-off{display:inline-block;background:var(--wht);color:var(--bg);font-size:.55rem;font-weight:800;letter-spacing:.16em;padding:.28rem .55rem;vertical-align:middle;margin-left:.5rem}
.pi-price sub{font-size:.68rem;font-weight:400;color:var(--g2);vertical-align:middle;margin-left:.4rem}
.slbl{font-size:.55rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--g2);display:flex;justify-content:space-between;margin-bottom:1rem}
.color-section{margin-bottom:2rem}
.color-grid{display:flex;gap:.75rem;flex-wrap:wrap}
.color-swatch{width:34px;height:34px;border-radius:50%;border:2px solid transparent;outline:2px solid transparent;transition:outline-color .2s,transform .2s;cursor:none;position:relative;overflow:hidden}
.color-swatch:hover{transform:scale(1.1)}.color-swatch.sel{outline-color:var(--wht);outline-offset:3px}
.color-swatch.light{border:2px solid rgba(239,239,239,.2)}
.cnl{font-size:.55rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--g1);margin-top:.5rem;height:1em}
.size-grid{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.size-btn{width:50px;height:50px;background:none;border:1px solid var(--dim3);color:var(--wht);font-size:.68rem;font-weight:700;transition:border-color .2s,background .2s,color .2s;cursor:none}
.size-btn:hover{border-color:var(--wht)}.size-btn.sel{background:var(--wht);color:var(--bg);border-color:var(--wht)}
.size-btn:disabled,.size-btn.agotado{opacity:.45;text-decoration:line-through;cursor:not-allowed;pointer-events:none}
.color-swatch:disabled,.color-swatch.agotado{opacity:.5;cursor:not-allowed;pointer-events:none}
.color-swatch.agotado::after{content:'';position:absolute;inset:0;background:linear-gradient(to top right,transparent 46%,rgba(255,255,255,.65) 46%,rgba(255,255,255,.65) 54%,transparent 54%);border-radius:50%}
.off-badge{position:absolute;top:.8rem;right:.8rem;background:var(--wht);color:var(--bg);padding:.3rem .7rem;font-size:.45rem;font-weight:800;letter-spacing:.18em;pointer-events:none;z-index:2}
.sold-out-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(10,10,10,.88);color:var(--wht);font-size:.5rem;font-weight:800;letter-spacing:.2em;padding:.4rem .9rem;pointer-events:none;white-space:nowrap;z-index:2}
.stock-count{min-height:1.2rem;font-size:.55rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--g2);margin-top:.75rem;margin-bottom:.6rem;transition:color .25s}
.stock-count.low{color:#c97b3a}
.stock-count.last{color:#b85a3a}
.slim-notice{display:none;margin-bottom:1.4rem;padding:.75rem 1rem;border:1px solid rgba(239,239,239,.12);background:rgba(239,239,239,.04);gap:.65rem;align-items:flex-start}
.slim-notice.show{display:flex}
.slim-notice-icon{flex-shrink:0;width:14px;height:14px;margin-top:1px;opacity:.6}
.slim-notice-text{font-size:.56rem;line-height:1.7;color:var(--g1);letter-spacing:.04em}
.slim-notice-text strong{color:var(--wht);font-weight:700;display:block;margin-bottom:.15rem;letter-spacing:.1em;text-transform:uppercase;font-size:.5rem}
.pi-rule{width:30px;height:1px;background:var(--dim3);margin:2rem 0}
.accordion{border-top:1px solid var(--dim3)}
.accordion-item{border-bottom:1px solid var(--dim3)}
.accordion-trigger{width:100%;background:none;border:none;color:var(--wht);display:flex;justify-content:space-between;align-items:center;padding:1.2rem 0;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;transition:color .2s;cursor:none}
.accordion-trigger:hover{color:var(--g1)}
.acc-icon{font-size:1.1rem;transition:transform .3s;font-weight:200}
.accordion-trigger[aria-expanded="true"] .acc-icon{transform:rotate(45deg)}
.accordion-body{display:none;padding-bottom:1.4rem}
.accordion-trigger[aria-expanded="true"]+.accordion-body{display:block}
.accordion-body p{font-size:.88rem;line-height:1.9;color:var(--g1)}
.size-guide-table{width:100%;border-collapse:collapse;margin-top:.4rem}
.size-guide-table th,.size-guide-table td{padding:.55rem .7rem;text-align:center;border:1px solid var(--dim3);font-size:.72rem}
.size-guide-table th{color:var(--wht);font-weight:700;letter-spacing:.15em;text-transform:uppercase;font-size:.56rem}
.size-guide-table td{color:var(--g1)}
.size-guide-note{font-size:.7rem;color:var(--g2);margin-bottom:.75rem;line-height:1.6}

/* ── CART ── */
.cart-overlay{position:fixed;inset:0;z-index:980;background:rgba(10,10,10,0);pointer-events:none;transition:background .35s}
.cart-overlay.open{background:rgba(10,10,10,.8);pointer-events:auto}
.cart-sidebar{position:fixed;top:0;right:0;bottom:0;z-index:990;width:min(420px,100vw);background:rgba(14,14,14,.97);backdrop-filter:blur(30px);border-left:1px solid var(--dim3);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .5s var(--ease)}
.cart-sidebar.open{transform:translateX(0)}
.cart-header{display:flex;justify-content:space-between;align-items:center;padding:1.6rem 1.8rem;border-bottom:1px solid var(--dim3)}
.cart-header h2{font-size:.66rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase}
.close-cart{background:none;border:1px solid var(--dim3);color:var(--wht);width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:.9rem;opacity:.7;transition:opacity .2s,background .2s,color .2s;cursor:none}
.close-cart:hover{opacity:1;background:var(--wht);color:var(--bg)}
.cart-items{flex:1;overflow-y:auto;padding:1.4rem 1.8rem}
.cart-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g2)}
.cart-item{display:grid;grid-template-columns:76px 1fr auto;gap:1rem;align-items:start;padding:1.2rem 0;border-bottom:1px solid var(--dim3)}
.cart-item-img{width:76px;height:95px;object-fit:cover;background:var(--surf);border:1px solid var(--dim3)}
.ci-name{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.3rem}
.ci-meta{font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--g2);margin-bottom:.8rem}
.ci-qty{display:flex;align-items:center;gap:.6rem}
.qty-btn{background:none;border:1px solid var(--dim3);color:var(--wht);width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:background .2s,color .2s,border-color .2s;cursor:none}
.qty-btn:hover{border-color:var(--wht);background:var(--wht);color:var(--bg)}
.qty-num{font-size:.72rem;font-weight:700;min-width:1.2ch;text-align:center}
.ci-price{font-size:.8rem;font-weight:800;white-space:nowrap;padding-top:.2rem}
.cart-footer{padding:1.5rem 1.8rem;border-top:1px solid var(--dim3);background:rgba(10,10,10,.5)}
.cart-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
.cart-total-label{font-size:.55rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--g2)}
.cart-total-amount{font-size:1.2rem;font-weight:900}
/* Discount code */
.discount-row{display:flex;gap:.5rem;margin-bottom:.75rem}
.discount-input{flex:1;background:var(--surf);border:1px solid var(--g3);color:var(--wht);padding:.6rem .75rem;font-family:inherit;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;outline:none;transition:border-color .25s}
.discount-input:focus{border-color:var(--g1)}
.discount-msg{font-size:.56rem;letter-spacing:.06em;margin-bottom:.6rem;padding:.35rem .65rem;display:none}
.discount-msg.ok{color:#6fcf97;border-left:2px solid #6fcf97;background:rgba(111,207,151,.06)}
.discount-msg.err{color:#eb5757;border-left:2px solid #eb5757;background:rgba(235,87,87,.06)}
.cart-discount-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.cart-discount-label{font-size:.52rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#6fcf97}
.cart-discount-amount{font-size:.85rem;font-weight:700;color:#6fcf97}

/* ── CHECKOUT ── */
#checkout{padding-top:var(--hh)}
.checkout-wrap{display:grid;grid-template-columns:1fr 380px;gap:5rem;max-width:1100px;margin:0 auto;padding:4rem 2.5rem 6rem}
.checkout-form fieldset{border:none;margin-bottom:2.5rem}
.checkout-form legend{font-size:.58rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--g2);margin-bottom:1.5rem;padding-bottom:.8rem;border-bottom:1px solid var(--dim3);width:100%}
.order-summary{position:sticky;top:calc(var(--hh)+2rem);align-self:start;background:var(--glass);border:1px solid var(--gb);backdrop-filter:blur(16px);padding:2rem}
.os-title{font-size:.58rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--g2);margin-bottom:1.5rem;padding-bottom:.8rem;border-bottom:1px solid var(--dim3)}
.os-item{display:grid;grid-template-columns:60px 1fr auto;gap:.8rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--dim3)}
.os-img{width:60px;height:75px;object-fit:cover;background:var(--surf);border:1px solid var(--dim3)}
.os-name{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.os-meta{font-size:.52rem;color:var(--g2);margin-top:.25rem}
.os-price{font-size:.78rem;font-weight:800}
.os-total-row{display:flex;justify-content:space-between;margin-top:1.2rem;padding-top:1rem}
.os-total-label{font-size:.56rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--g2)}
.os-total-val{font-size:1.1rem;font-weight:900}
.success-screen{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;text-align:center;padding:2rem}
.success-screen.show{display:flex}
.suc-icon{width:80px;height:80px;border:1px solid var(--dim2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:2rem;font-size:2rem}
.suc-title{font-size:2.2rem;font-weight:900;text-transform:uppercase;margin-bottom:.8rem;line-height:1}
.suc-sub{color:var(--g1);margin-bottom:2.5rem;font-size:.95rem;line-height:1.9}
.back-home{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 2.4rem;border:1px solid var(--g3);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s}
.back-home:hover{background:var(--wht);color:var(--bg);border-color:var(--wht)}

/* ── FOOTER ── */
footer{border-top:1px solid var(--dim3);background:var(--bg2);padding:4.5rem 2.5rem 3rem}
.footer-inner{max-width:1280px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3.5rem;border-bottom:1px solid var(--dim3);margin-bottom:2rem}
.footer-brand-name{font-size:1rem;font-weight:900;letter-spacing:.5em;text-transform:uppercase;margin-bottom:1rem}
.footer-logo-img{height:20px;filter:brightness(0) invert(1);object-fit:contain;margin-bottom:1rem}
.footer-desc{font-size:.82rem;line-height:1.9;color:var(--g2);max-width:260px}
.footer-col-title{font-size:.52rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--g2);margin-bottom:1.6rem}
.footer-nav{display:flex;flex-direction:column;gap:.9rem}
.footer-nav a{font-size:.8rem;font-weight:500;color:var(--g1);transition:color .2s}.footer-nav a:hover{color:var(--wht)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-copy{font-size:.52rem;letter-spacing:.12em;color:var(--g2)}
.footer-ig{font-size:.56rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--g2);display:flex;align-items:center;gap:.5rem;transition:color .2s}
.footer-ig:hover{color:var(--wht)}

/* ── REVEAL ── */
.rev{opacity:0;transform:translateY(32px);transition:opacity .85s ease,transform .85s ease}
.rev-l{opacity:0;transform:translateX(-32px);transition:opacity .85s ease,transform .85s ease}
.rev-r{opacity:0;transform:translateX(32px);transition:opacity .85s ease,transform .85s ease}
.rev.in,.rev-l.in,.rev-r.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ── TOAST ── */
.toast{position:fixed;bottom:2.5rem;left:50%;transform:translateX(-50%) translateY(20px);background:var(--wht);color:var(--bg);padding:.85rem 2rem;z-index:9999;font-size:.58rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;opacity:0;transition:opacity .35s,transform .35s;pointer-events:none;white-space:nowrap;border-left:2px solid var(--g2)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── NAV DRAWER ── */
.nav-drawer{display:none;position:fixed;inset:0;z-index:970;background:rgba(10,10,10,.97);backdrop-filter:blur(24px);flex-direction:column;align-items:center;justify-content:center;gap:2.5rem}
.nav-drawer.open{display:flex}
.nav-drawer a,.nav-drawer button.drawer-link{color:var(--wht);background:none;border:none;font-size:1.4rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;cursor:none}
.drawer-close{position:absolute;top:1.6rem;right:1.6rem;background:none;border:1px solid var(--g3);color:var(--wht);width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;cursor:none;transition:background .2s,color .2s}
.drawer-close:hover{background:var(--wht);color:var(--bg)}

/* ── POLICIES PAGE ── */
.policies-wrap{max-width:760px;margin:0 auto;padding:calc(var(--hh) + 4rem) 2.5rem 6rem}
.pol-back{display:inline-flex;align-items:center;gap:.5rem;font-size:.55rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--g1);margin-bottom:3rem;transition:color .25s;background:none;border:none}
.pol-back:hover{color:var(--wht)}
.pol-hero{margin-bottom:3.5rem}
.pol-hero h1{font-size:clamp(1.4rem,4vw,2.2rem);font-weight:900;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem}
.pol-hero p{font-size:.65rem;color:var(--g2);letter-spacing:.12em}
.pol-toc{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--dim3)}
.pol-toc a{font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--g1);border:1px solid var(--g3);padding:.45rem 1rem;transition:border-color .25s,color .25s}
.pol-toc a:hover{border-color:var(--wht);color:var(--wht)}
.pol-section{margin-bottom:2.5rem;scroll-margin-top:calc(var(--hh) + 2rem)}
.pol-section-title{font-size:.7rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--wht);padding-bottom:.8rem;border-bottom:1px solid var(--dim3);margin-bottom:1.8rem}
.pol-article{margin-bottom:1.4rem}
.pol-article h3{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--g1);margin-bottom:.6rem}
.pol-article p,.pol-article li{font-size:.72rem;color:#999;line-height:1.9;margin-bottom:.4rem}
.pol-article ul,.pol-article ol{padding-left:1.3rem}
.pol-article strong{color:var(--wht);font-weight:700}
.pol-article a{color:var(--g1);text-decoration:underline;text-underline-offset:3px}
.pol-divider{height:1px;background:var(--dim3);margin:3rem 0}
.pol-highlight{background:var(--surf);border:1px solid var(--dim3);border-left:2px solid rgba(239,239,239,.25);padding:1rem 1.2rem;margin-bottom:1.4rem}
.pol-highlight p{margin:0;font-size:.7rem}

/* ── TERMS CHECKBOX ── */
.terms-check-wrap{margin:.4rem 0 1.4rem}
.terms-check{display:flex;align-items:flex-start;gap:.75rem;cursor:pointer}
.terms-check input[type="checkbox"]{width:16px;height:16px;flex-shrink:0;margin-top:3px;accent-color:var(--wht);cursor:pointer}
.terms-check span{font-size:.62rem;color:var(--g1);line-height:1.65}
.terms-check span a{color:var(--wht);text-decoration:underline;text-underline-offset:3px}

/* ── RESPONSIVE ── */
@media(max-width:1200px){.products-grid{grid-template-columns:repeat(3,1fr)}.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  header{padding:0 1.2rem}.nav-left,.nav-right .nav-link{display:none}.hamburger{display:block}
  header nav{grid-template-columns:auto 1fr auto}.nav-logo{justify-self:start}.nav-right{gap:1rem}

  .hscroll-section{padding:5rem 1.2rem}
  .sec{padding:5rem 1.2rem}
  .product-detail{grid-template-columns:1fr;gap:2.5rem;padding:2rem 1.2rem 4rem}.pimgs{position:static}
  .checkout-wrap{grid-template-columns:1fr;gap:3rem;padding:2rem 1.2rem 4rem}.order-summary{position:static}
  .fg2{grid-template-columns:1fr}.contact-sec{grid-template-columns:1fr;gap:3rem;padding:5rem 1.2rem}
  .hl{padding:3.5rem 1.2rem}.stat-item{padding:0 1.2rem}
  .footer-top{grid-template-columns:1fr;gap:2rem}
  body{cursor:auto}#cur{display:none}
}

@media(prefers-reduced-motion:reduce){.rev,.rev-l,.rev-r{opacity:1;transform:none}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ══════ ACCESIBILIDAD ══════
   Foco visible para quien navega con teclado. Solo aparece con el tabulador
   (:focus-visible), así que el clic con el ratón no cambia nada. */
:focus-visible{outline:2px solid var(--wht);outline-offset:3px}
.lmb-hit:focus-visible{outline:2px solid var(--wht);outline-offset:4px;border-radius:100px}
.fg input:focus-visible,.fg textarea:focus-visible,.fg select:focus-visible,.discount-input:focus-visible{outline:none}
/* Campo trampa contra bots: fuera de la vista y del tabulador */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.62rem;line-height:1.6;color:var(--g1);margin:.2rem 0 1.4rem}
.form-note a{color:var(--wht);text-decoration:underline;text-underline-offset:3px}