/* ══════════════════════════════════════════════════════════════
   JUVENTUD REFORMA — TIENDA · Colección Luminares
   Sistema visual calcado de la referencia (Fossil / Framer)
   ══════════════════════════════════════════════════════════════ */

:root {
  --white: #ffffff;
  --ink: #111111;
  --text: #222222;
  --grey: #666666;
  --muted: #aaaaaa;
  --soft: #cccccc;
  --line: #eeeeee;
  --card: #efefef;
  --dark: #1e1e1f;
  --btn: #222222;
  --overlay: rgba(0, 0, 0, 0.48);
  /* ADN tipográfico de la web original (assets/css/global.css): dos familias y nada más.
     Helvetica Neue para todo el texto · JetBrains Mono solo para etiquetas y cifras. */
  --font: 'Helvetica Neue', 'Arial Black', Arial, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  /* escala: micro · cuerpo · enlace · título · sección */
  --fs-micro: 9px; --fs-label: 10px; --fs-small: 11px; --fs-body: 13px; --fs-link: 15px;
  --ls-label: 0.18em; --ls-micro: 0.12em; --ls-tight: -0.02em; --ls-title: -0.04em;
  /* alias heredados */
  --nav-h: 60px;
  --pad: 16px;
  --ease: cubic-bezier(0.44, 0, 0.56, 1);
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  letter-spacing: -0.01em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--ink); color: var(--white); }

/* Cursor personalizado (círculo 24px, como la referencia) */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, input, select, label, [role="button"] { cursor: none; }
  #cursor {
    position: fixed; top: 0; left: 0; width: 24px; height: 24px;
    border: 1px solid #111; border-radius: 50%;
    pointer-events: none; z-index: 10000;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference; border-color: #fff;
    transition: width .25s var(--ease), height .25s var(--ease), background-color .25s var(--ease), opacity .3s;
    opacity: 0;
  }
  body.cursor-on #cursor { opacity: 1; }
  #cursor.is-link { width: 40px; height: 40px; background: rgba(255,255,255,.12); }
  #cursor.is-hidden { opacity: 0; }
}
@media (hover: none), (pointer: coarse) { #cursor { display: none; } }

/* ── Tipografía (presets de la referencia) ── */
.label {              /* = .ml de global.css: JetBrains Mono 10px / .18em */
  font-family: var(--mono); font-size: 10px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5;
}
.body-text {          /* preset 9w10wx */
  font-family: var(--font); font-size: var(--fs-body); font-weight: 400; letter-spacing: -0.01em; line-height: 1.65;
}
.desc {               /* preset 1cblfg8 */
  font-family: var(--font); font-size: var(--fs-body); font-weight: 400; letter-spacing: -0.01em; line-height: 1.65; color: var(--ink);
}
.h-display {          /* preset ha1qz1 */
  font-family: var(--font); font-size: 64px; font-weight: 900; letter-spacing: -0.05em; line-height: 1; color: var(--ink);
}
.h-section {          /* preset yzhyfy */
  font-family: var(--font); font-size: 36px; font-weight: 900; letter-spacing: -0.04em; line-height: 1;
}
.h-small {            /* producto / bloques */
  font-family: var(--font); font-size: 22px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.15; color: #000;
}
.mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0; }
.paren { color: var(--text); }

/* ── Aparición (equivalente a los efectos "appear" de Framer) ── */
.fx { opacity: 0.001; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); will-change: transform; }
.fx.in { opacity: 1; transform: none; }
.fx-up { opacity: 0.001; transform: translateY(24px); transition: opacity .5s var(--spring), transform .5s var(--spring); }
.fx-up.in { opacity: 1; transform: none; }
.fx-d1 { transition-delay: .08s; } .fx-d2 { transition-delay: .16s; } .fx-d3 { transition-delay: .24s; }
.fx-d4 { transition-delay: .32s; } .fx-d5 { transition-delay: .40s; } .fx-d6 { transition-delay: .48s; }
/* letras: opacity 0 · blur 3px · y 64px → nítido (stagger por JS) */
.split .ch {
  display: inline-block; opacity: 0.001; filter: blur(3px); transform: translateY(64px);
  transition: opacity .7s var(--spring), filter .7s var(--spring), transform .7s var(--spring);
  will-change: transform, filter;
}
.split .w { white-space: nowrap; display: inline-block; }
.split.in .ch { opacity: 1; filter: blur(0); transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fx, .fx-up, .split .ch { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ── Texto con "roll" (dos capas apiladas, hover sube) ── */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.roll > span { display: block; transition: transform .45s var(--spring); }
.roll > span + span { position: absolute; left: 0; top: 100%; width: 100%; }
.roll:hover > span, a:hover > .roll > span, button:hover > .roll > span, .roll.hover > span { transform: translateY(-100%); }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 24px; border-radius: 4px; background: var(--btn); color: var(--white);
  font-family: var(--mono); font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.18em; line-height: 1.5;
  transition: background .3s, color .3s, opacity .3s;
}
.btn:hover { background: var(--ink); }
.btn-lg { height: 48px; width: 100%; background: var(--ink); }
.btn-ghost { background: var(--line); color: var(--ink); height: 40px; width: 100%; }
.btn-ghost:hover { background: #e4e4e4; }
.btn[disabled] { background: var(--line); color: rgba(0,0,0,.48); pointer-events: none; }

/* ══════════════ NAVBAR ══════════════ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 8;
  height: var(--nav-h); background: var(--white); border-bottom: 1px solid var(--line);
}
.nav-in { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); }
.nav-links { display: flex; align-items: center; gap: 16px; }
.nav-link { position: relative; display: block; padding: 2px; font-size: var(--fs-body); font-weight: 800; letter-spacing: var(--ls-tight); line-height: 1.4; color: var(--text); }
.nav-link::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 0; height: 1px; background: var(--grey); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--spring); }
.nav-link:hover::after, .nav-link.current::after { transform: scaleX(1); }
.nav-link.current::after { background: var(--ink); }
.nav-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; height: 20px; }
/* Logo del home de Reforma (mismo markup/estilo que index.html): círculo 24px con ◉ + REFORMA® */
/* Logo .REFORMA del frontend (wordmark con el isotipo circular en la O) */
.logo-img { height: 18px; width: auto; display: block; }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-icon { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #000; margin-right: -6px; }
.nav-icon svg { width: 20px; height: 20px; }
.nav-currency { position: relative; width: 18px; height: 14px; border-radius: 2px; overflow: hidden; display: inline-block; }
.nav-currency img { width: 100%; height: 100%; object-fit: cover; }
.nav-currency select { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.nav-cart { display: inline-flex; align-items: center; gap: 6px; color: #000; }
.nav-cart .label { line-height: 1; }
.nav-cart .paren-wrap { display: inline-flex; align-items: center; font-family: var(--mono); font-size: var(--fs-small); letter-spacing: 0; }
.nav-cart .count { font-family: var(--mono); font-size: var(--fs-small); line-height: 1; min-width: 8px; text-align: center; display: inline-block; transform: translateY(24px); opacity: 0; transition: transform .5s var(--spring) .3s, opacity .3s ease-in-out .3s; }
.nav-cart .count.in { transform: none; opacity: 1; }
.nav-cart .count.bump { animation: bump .45s var(--spring); }
@keyframes bump { 0% { transform: translateY(14px); opacity: .2; } 100% { transform: none; opacity: 1; } }
.nav-burger { display: none; width: 24px; height: 24px; position: relative; }
.nav-burger span { position: absolute; left: 2px; right: 2px; height: 1.5px; background: #000; transition: transform .35s var(--spring), top .35s var(--spring), opacity .2s; }
.nav-burger span:nth-child(1) { top: 7px; } .nav-burger span:nth-child(2) { top: 16px; }
body.menu-open .nav-burger span:nth-child(1) { top: 11.5px; transform: rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { top: 11.5px; transform: rotate(-45deg); }

/* Menú móvil (panel blanco a pantalla completa) */
#menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 7; background: var(--white);
  padding: 20px var(--pad) 32px; transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease), transform .45s var(--spring); overflow-y: auto;
}
body.menu-open #menu { opacity: 1; transform: none; pointer-events: auto; }
#menu .label { color: var(--ink); margin-bottom: 14px; }
.menu-main a, .menu-main button { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; font-family: var(--font); font-size: 28px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.5; color: var(--ink); padding: 0 0 2px; }
.menu-main svg { width: 16px; height: 16px; transition: transform .35s var(--spring); }
.menu-main .open svg { transform: rotate(180deg); }
.menu-sub { max-height: 0; overflow: hidden; transition: max-height .45s var(--spring); }
.menu-sub.open { max-height: 300px; }
.menu-sub a { font-size: var(--fs-link); font-weight: 700; letter-spacing: var(--ls-tight); line-height: 2; padding-left: 12px; color: var(--grey); }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; }
.menu-cols a { display: block; font-size: var(--fs-link); font-weight: 800; letter-spacing: var(--ls-tight); line-height: 1.4; padding: 5px 0; color: var(--ink); }
#menu > * { opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .5s var(--spring); }
body.menu-open #menu > * { opacity: 1; transform: none; }
body.menu-open #menu > *:nth-child(2) { transition-delay: .05s; }
body.menu-open #menu > *:nth-child(3) { transition-delay: .10s; }

/* ══════════════ PÁGINA ══════════════ */
main { padding-top: var(--nav-h); }
.page-head { padding: 60px var(--pad) 0; display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 0 var(--pad); align-items: start; }
.page-head .desc { max-width: 340px; margin-top: 13px; }

/* Tabs / categorías */
.tabs { display: flex; justify-content: flex-end; gap: 20px; padding: 86px var(--pad) 24px; flex-wrap: wrap; }
.tab { position: relative; display: block; height: 20px; overflow: hidden; font-family: var(--font); font-size: var(--fs-link); font-weight: 800; letter-spacing: var(--ls-tight); line-height: 1.2; color: var(--muted); }
.tab span { display: block; transition: transform .45s var(--spring); }
.tab span + span { color: var(--dark); }
.tab:hover span { transform: translateY(-100%); }
.tab.active { color: var(--ink); }
.tab.active span { transform: none; }

/* Grid de productos */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 94px 8px; padding: 0 var(--pad); }
.card { display: block; position: relative; }
.card-media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--card); }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s var(--ease), transform .8s var(--spring); }
.card-media .img-b { opacity: 0; }
.card:hover .card-media .img-b { opacity: 1; }
.card:hover .card-media .img-a { opacity: 0; }
.card .badge { position: absolute; top: 13px; left: 18px; z-index: 2; color: #000; }
.quick { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; height: 40px; border-radius: 4px; background: var(--btn); color: var(--white); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); transition: opacity .35s var(--ease), transform .45s var(--spring), background .3s; }
.quick .label { line-height: 1; }
.quick svg { position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); transition: transform .35s var(--spring); }
.card:hover .quick { opacity: 1; transform: none; }
.quick:hover { background: var(--ink); }
.quick:hover svg { transform: translateY(-50%) rotate(90deg); }
.quick.sizes { justify-content: space-around; padding: 0 8px; }
.quick.sizes .label { display: none; }
.quick.sizes svg { display: none; }
.quick .size { display: none; height: 100%; padding: 0 12px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.7); transition: color .2s; }
.quick.sizes .size { display: inline-flex; align-items: center; }
.quick .size:hover { color: #fff; }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; color: #000; }
.card-meta h3 { font-family: var(--mono); font-size: 10px; font-weight: 400; text-transform: uppercase; line-height: 1.5; letter-spacing: 0.14em; }
.card-meta .price { font-family: var(--mono); font-size: 10px; font-weight: 400; line-height: 1.5; letter-spacing: 0.06em; }
.grid-empty { grid-column: 1 / -1; padding: 40px 0 120px; color: var(--grey); }

/* ══════════════ NEWSLETTER ══════════════ */
.news { position: relative; height: 600px; margin-top: 78px; display: grid; grid-template-columns: 3fr 2fr; align-items: center; padding: 0 var(--pad); color: var(--white); overflow: hidden; isolation: isolate; }
.news::before { content: ""; position: absolute; inset: 0; background: var(--news-img, url("../assets/img/newsletter-bg.jpg")) center / cover no-repeat; z-index: -2; }
.news::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); z-index: -1; }
.news .h-section { color: var(--white); }
.form-news { display: flex; flex-direction: column; gap: 24px; }
.form-news .row { display: flex; gap: 8px; }
.form-news input { flex: 0 1 217px; width: 217px; height: 38px; padding: 0 12px; border: 0; background: var(--white); color: var(--ink); font-family: var(--mono); font-size: var(--fs-small); letter-spacing: 0.06em; outline: none; }
.form-news input::placeholder { color: var(--grey); }
.form-news .btn { height: 38px; padding: 0 24px; flex: 0 0 auto; }
.form-news .ok { font-family: var(--mono); font-size: var(--fs-label); color: var(--soft); letter-spacing: var(--ls-micro); text-transform: uppercase; }

/* ══════════════ FOOTER ══════════════ */
footer { background: var(--ink); color: var(--white); padding: 44px var(--pad) 8px; }
.foot-top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.foot-form .label { display: block; margin-bottom: 30px; }
.foot-cols { display: grid; grid-template-columns: 166px 125px 1fr; gap: 24px; justify-content: end; }
.foot-cols .label { display: block; color: var(--soft); margin-bottom: 25px; }
.foot-cols a { display: block; font-size: var(--fs-body); font-weight: 800; letter-spacing: var(--ls-tight); line-height: 1.4; padding: 4px 0; transition: color .3s; }
.foot-cols a:hover { color: var(--soft); }
.foot-bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 88px; gap: 24px; }
.foot-word { display: block; line-height: 0; }
.foot-logo { display: block; width: clamp(260px, 52vw, 620px); height: auto; }
.foot-credit { display: flex; gap: 16px; align-items: baseline; }
.foot-credit a { transition: color .3s; } .foot-credit a:hover { color: var(--soft); }
.foot-soc { display: flex; gap: 16px; }

/* ══════════════ CARRITO (drawer lateral) ══════════════ */
#cart-overlay { position: fixed; inset: 0; z-index: 10; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity .3s ease-in-out; }
#cart { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100%; z-index: 11; background: var(--white); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s var(--spring); }
body.cart-open #cart-overlay { opacity: 1; pointer-events: auto; }
body.cart-open #cart { transform: none; }
.cart-head { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); border-bottom: 1px solid var(--line); }
.cart-head .title { display: flex; align-items: center; gap: 6px; color: #000; }
.cart-close { width: 24px; height: 24px; position: relative; margin-right: -6px; }
.cart-close::before, .cart-close::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1.5px; background: #000; transform: rotate(45deg); }
.cart-close::after { transform: rotate(-45deg); }
.cart-items { flex: 1; overflow-y: auto; padding: 16px var(--pad); display: flex; flex-direction: column; gap: 24px; }
.cart-item { display: grid; grid-template-columns: 140px 1fr; gap: 16px; opacity: 0; transform: translateY(12px); animation: itemIn .45s var(--spring) forwards; }
@keyframes itemIn { to { opacity: 1; transform: none; } }
.cart-item .thumb { width: 140px; height: 175px; background: #f2f2f2; overflow: hidden; }
.cart-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item .info { display: flex; flex-direction: column; }
.cart-item .top { display: flex; justify-content: space-between; gap: 8px; }
.cart-item .name { font-family: var(--mono); font-size: 10px; font-weight: 400; text-transform: uppercase; color: var(--ink); line-height: 1.5; letter-spacing: 0.12em; }
.cart-item .price { font-family: var(--mono); font-size: var(--fs-small); color: #000; white-space: nowrap; }
.cart-item .variant { margin-top: 7px; font-family: var(--mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--muted); }
.cart-item .variant b { font-weight: 400; color: var(--ink); margin-left: 6px; }
.cart-item .bottom { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.qty { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 4px; border: 1px solid #e2e2e2; border-radius: 4px; }
.qty button { width: 18px; height: 18px; background: #f0f0f0; display: inline-flex; align-items: center; justify-content: center; color: #444; }
.qty button svg { width: 10px; height: 10px; }
.qty span { font-family: var(--mono); font-size: var(--fs-small); min-width: 7px; text-align: center; letter-spacing: 0; color: #000; }
.rm { width: 24px; height: 24px; background: #f5f5f5; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.rm svg { width: 10px; height: 10px; }
.cart-empty { padding: 40px 0; color: var(--grey); font-size: var(--fs-body); letter-spacing: -0.01em; line-height: 1.65; }
.cart-foot { padding: 16px var(--pad) 12px; border-top: 1px solid var(--line); }
.cart-sub { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.cart-sub .t { font-size: var(--fs-link); font-weight: 800; letter-spacing: var(--ls-tight); color: var(--ink); }
.cart-sub .v { font-family: var(--mono); font-size: var(--fs-body); color: #000; }
.cart-foot .btn + .btn { margin-top: 8px; }
.pay-icons { display: flex; justify-content: center; gap: 16px; margin-top: 16px; }
.pay-icons img { width: 38px; height: 24px; object-fit: contain; border-radius: 2px; }
.btn .roll { display: inline-block; height: 15px; line-height: 15px; }

/* ══════════════ BUSCADOR ══════════════ */
#search { position: fixed; inset: 0; z-index: 12; display: flex; align-items: flex-start; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s ease-in-out; }
body.search-open #search { opacity: 1; pointer-events: auto; }
#search .bg { position: absolute; inset: 0; background: rgba(234, 234, 232, 0.8); }
.search-box { position: relative; width: 100%; background: var(--white); color: #333; box-shadow: 0 20px 40px rgba(0,0,0,.2); display: flex; flex-direction: column; max-height: 80dvh; overflow: hidden; transform: translateY(-16px); transition: transform .4s var(--spring); }
body.search-open .search-box { transform: none; }
.search-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; flex-shrink: 0; font-family: var(--font); }
.search-row svg { width: 18px; height: 18px; color: rgba(0,0,0,.45); flex-shrink: 0; }
.search-row input { flex: 1; border: 0; outline: none; background: transparent; font-size: 16px; /* no bajar: iOS hace zoom por debajo de 16px */ font-weight: 400; height: 2em; line-height: 2em; color: #333; letter-spacing: -0.01em; }
.search-row input::placeholder { color: rgba(0,0,0,.4); }
.search-list { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.search-list a { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 20px; border-top: 1px solid var(--line); transition: background .2s; }
.search-list a:hover { background: #f5f5f4; }
.search-list a > span:nth-child(2) { display: flex; flex-direction: column; }
.search-list img { width: 44px; height: 56px; object-fit: cover; background: var(--card); }
.search-list .name { font-family: var(--mono); font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); }
.search-list .cat { font-family: var(--mono); font-size: var(--fs-micro); color: var(--grey); letter-spacing: var(--ls-micro); text-transform: uppercase; margin-top: 4px; }
.search-list .price { font-family: var(--mono); font-size: var(--fs-small); color: #000; }
.search-none { padding: 12px 20px 16px; font-family: var(--mono); font-size: var(--fs-label); color: var(--grey); border-top: 1px solid var(--line); letter-spacing: var(--ls-micro); }

/* ══════════════ POPUP DE BIENVENIDA ══════════════ */
#popup { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .4s ease-in-out; }
body.popup-open #popup { opacity: 1; pointer-events: auto; }
.pop { display: grid; grid-template-columns: 268px 332px; height: 400px; transform: translateY(24px) scale(.98); opacity: 0; transition: transform .6s var(--spring), opacity .5s var(--ease); }
body.popup-open .pop { transform: none; opacity: 1; }
.pop .img { overflow: hidden; background: #222; }
.pop .img img { width: 100%; height: 100%; object-fit: cover; }
.pop .modal { position: relative; background: var(--white); padding: 107px 64px 0; backdrop-filter: blur(10px); }
.pop .close { position: absolute; top: 16px; right: 16px; width: 14px; height: 14px; color: var(--ink); }
.pop .close svg { width: 100%; height: 100%; fill: currentColor; }
.pop .label { display: block; color: var(--text); margin-bottom: 10px; }
.pop h2 { font-family: var(--font); font-size: 22px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; color: var(--ink); }
.pop form { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.pop input[type="email"] { width: 100%; height: 41px; padding: 12px 16px; border: 0; border-radius: 8px; background: var(--line); color: var(--ink); font-family: var(--mono); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0.06em; line-height: 1; outline: none; }
.pop input::placeholder { color: var(--grey); }
.pop button[type="submit"] { width: 100%; height: 40px; border-radius: 8px; background: var(--dark); color: var(--white); font-family: var(--mono); font-size: var(--fs-label); font-weight: 400; text-transform: uppercase; letter-spacing: var(--ls-label); transition: background .3s; }
.pop button[type="submit"]:hover { background: #000; }
.pop .ok { font-family: var(--mono); font-size: var(--fs-label); color: var(--grey); letter-spacing: var(--ls-micro); text-transform: uppercase; margin-top: 12px; }

/* ══════════════ HOME (hero vídeo) ══════════════ */
body.home main { padding-top: 0; }
.hero { position: relative; height: 100vh; height: 100dvh; min-height: 560px; overflow: hidden; background: #1e2021; color: var(--white); }
.hero video, .hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero .shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.34) 34%, rgba(0,0,0,.40) 62%, rgba(0,0,0,.62) 100%); }
.hero-center { position: absolute; left: 0; right: 0; top: 30.5%; display: flex; flex-direction: column; align-items: center; }
.hero-logo { display: block; height: 26px; }
.hero-logo .logo-img { height: 26px; }
.hero-links { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero-link { display: block; height: 20px; overflow: hidden; text-align: center; }
.hero-link span { display: block; font-size: var(--fs-body); font-weight: 800; letter-spacing: var(--ls-tight); line-height: 1.4; transition: transform .45s var(--spring); }
.hero-link span + span { font-family: var(--mono); font-weight: 400; font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; line-height: 20px; }
.hero-link:hover span { transform: translateY(-100%); }
.hero-clock { position: absolute; left: 0; right: 0; bottom: 33px; display: flex; justify-content: center; align-items: center; gap: 4px; }
.hero-clock .mono { font-size: var(--fs-small); letter-spacing: 0.06em; line-height: 1; }
.hero .fx-hero { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .9s var(--spring); }
.hero.in .fx-hero { opacity: 1; transform: none; }
.hero.in .hero-links { transition-delay: .15s; }
.hero.in .hero-clock { transition-delay: .3s; }

/* ══════════════ PRODUCTO ══════════════ */
.crumbs { display: flex; gap: 10px; padding: 100px var(--pad) 11px; color: var(--grey); }
.crumbs a { transition: color .3s; } .crumbs a:hover { color: var(--ink); }
.product { display: grid; grid-template-columns: 1fr 365px; gap: 16px; padding: 0 var(--pad); align-items: start; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.gallery figure { margin: 0; aspect-ratio: 3 / 4; background: var(--card); overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--spring); }
.gallery figure:hover img { transform: scale(1.03); }
.pinfo { position: sticky; top: calc(var(--nav-h) + 24px); }
.pinfo h1 { font-family: var(--font); font-size: 22px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.15; color: #000; }
.pinfo .price { display: block; margin-top: 9px; color: #000; padding-left: 7px; }
.pinfo .sizes { margin-top: 63px; }
.pinfo .sizes label { display: block; font-family: var(--mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1; color: var(--muted); margin-bottom: 10px; }
.size-row { display: flex; gap: 4px; flex-wrap: wrap; }
.size-btn { height: 47px; padding: 0 16px; border-radius: 2px; background: #f2f2f2; border: 1px solid rgba(0,0,0,.08); font-family: var(--mono); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0.1em; color: var(--ink); transition: background .25s, color .25s, border-color .25s; }
.size-btn:hover { border-color: rgba(0,0,0,.4); }
.size-btn.on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pinfo .cta { margin-top: 48px; display: flex; flex-direction: column; gap: 4px; }
.add-btn { height: 56px; width: 100%; border-radius: 4px; background: var(--line); color: rgba(0,0,0,.48); font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; transition: background .3s, color .3s; }
.add-btn.ready { background: var(--ink); color: var(--white); }
.add-btn.ready:hover { background: #000; }
.wa-btn { height: 48px; width: 100%; border-radius: 4px; background: var(--dark); color: var(--white); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; transition: background .3s; }
.wa-btn:hover { background: #000; }
.wa-btn svg { width: 16px; height: 16px; }
.acc { margin-top: 44px; border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; height: 50px; color: #000; }
.acc-btn svg { width: 12px; height: 12px; transition: transform .35s var(--spring); }
.acc-item.open .acc-btn svg { transform: rotate(180deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .45s var(--spring); }
.acc-item.open .acc-body { max-height: 400px; }
.acc-body p { padding: 0 0 20px; color: var(--muted); font-size: var(--fs-body); letter-spacing: -0.01em; line-height: 1.65; max-width: 343px; }

.related { padding: 0 var(--pad); margin-top: 120px; }
.related .h-small { margin-bottom: 24px; }
.related .grid { padding: 0; }
.color-dots { display: flex; gap: 6px; margin-top: 16px; }
.color-dots a { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); display: block; transition: transform .25s var(--spring); }
.color-dots a:hover { transform: scale(1.12); }
.color-dots a.on { box-shadow: 0 0 0 1px var(--white), 0 0 0 2px var(--ink); }

/* ══════════════ COLECCIÓN ("Brand") ══════════════ */
.brand-hero { display: flex; align-items: flex-end; padding: 60px var(--pad) 40px; }
.brand-intro { display: grid; grid-template-columns: 701fr 548fr; gap: 32px; padding: 0 var(--pad); align-items: end; }
.brand-intro figure { margin: 0; aspect-ratio: 701 / 807; background: var(--card); overflow: hidden; }
.brand-intro img { width: 100%; height: 100%; object-fit: cover; }
.brand-intro .copy { max-width: 500px; padding-bottom: 32px; }
.brand-intro .copy h3 { font-family: var(--mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1.5; color: var(--muted); margin-bottom: 24px; }
.lead { font-family: var(--font); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.4; color: var(--ink); }
.brand-based { height: 562px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 0 var(--pad); text-align: center; }
.brand-based .big { font-family: var(--font); font-size: 96px; font-weight: 900; letter-spacing: -0.05em; line-height: 1; color: var(--ink); }
.brand-mat { display: grid; grid-template-columns: 360px 583fr 250fr; gap: 0 32px; padding: 160px var(--pad) 0; align-items: start; }
.brand-mat .txt h3 { margin-bottom: 32px; }
.brand-mat .cols { display: grid; grid-template-columns: 164px 164px; gap: 32px; }
.brand-mat figure { margin: 0; }
.brand-mat figure img { width: 100%; height: auto; background: var(--card); }
.brand-mat figure .fig-a { aspect-ratio: 583 / 744; object-fit: cover; }
.brand-mat figure .fig-b { aspect-ratio: 250 / 312; object-fit: cover; }
.brand-mat figcaption { margin-top: 10px; font-family: var(--mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.brand-mat .news-space { height: 189px; }

/* ══════════════ BOTÓN FLOTANTE ══════════════
   Calcado del badge de la referencia: la capa «Comprar ahora» entra desde la
   izquierda tapando el badge, con muelle de ~0.55s; la miniatura va rotando. */
#fbadge { position: fixed; right: 20px; bottom: var(--fb-bottom, 34px); z-index: 6; opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .7s var(--spring); }
body.ready #fbadge { opacity: 1; transform: none; transition-delay: 1.1s; }
body.cart-open #fbadge, body.search-open #fbadge, body.popup-open #fbadge, body.menu-open #fbadge { opacity: 0; pointer-events: none; transition-delay: 0s; }
#fbadge.is-hidden { display: none; }

#fbadge .fb-main { position: relative; display: flex; align-items: stretch; gap: 14px; height: 46px; padding: 5px 22px 5px 5px; border-radius: 10px; background: #212121; color: var(--white); overflow: hidden; text-decoration: none; box-sizing: border-box;
  box-shadow: 0 .64px 1.15px -1.13px rgba(0,0,0,.26), 0 1.93px 3.48px -2.25px rgba(0,0,0,.24), 0 5.11px 9.19px -3.38px rgba(0,0,0,.19), 0 16px 28.8px -4.5px rgba(0,0,0,.03); }

#fbadge .fb-thumbs { position: relative; width: 54px; flex-shrink: 0; border-radius: 5px; overflow: hidden; background: #efefef; }
#fbadge .fb-thumbs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: 0; transition: opacity .6s var(--ease); }
#fbadge .fb-thumbs img.on { opacity: 1; }

#fbadge .fb-txt { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; }
#fbadge .fb-t { display: block; font-family: var(--font); font-size: var(--fs-body); font-weight: 800; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
#fbadge .fb-p { display: block; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--ls-micro); text-transform: uppercase; color: rgba(255,255,255,.45); line-height: 1; white-space: nowrap; }
#fbadge .fb-p b { color: var(--white); font-weight: 400; margin-left: 8px; letter-spacing: 0.06em; }

#fbadge .fb-cta { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 5px; border-radius: 10px; background: #212121; color: var(--white);
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1; white-space: nowrap; pointer-events: none;
  transform: translateX(-100%); transition: transform .55s var(--spring); }
#fbadge .fb-cta svg { width: 15px; height: 15px; flex-shrink: 0; transform: translateX(-6px); transition: transform .55s var(--spring); }
#fbadge:hover .fb-cta, #fbadge:focus-within .fb-cta { transform: none; }
#fbadge:hover .fb-cta svg, #fbadge:focus-within .fb-cta svg { transform: none; }

#fbadge .fb-close { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); color: var(--ink); border: 1px solid var(--line); font-size: 11px; line-height: 1; display: grid; place-items: center; opacity: 0; transition: opacity .25s; z-index: 4; }
#fbadge:hover .fb-close { opacity: 1; }

@media (max-width: 809px) {
  #fbadge { left: 50%; right: auto; bottom: var(--fb-bottom-m, 20px); transform: translateX(-50%) translateY(24px); }
  body.ready #fbadge { transform: translateX(-50%); }
  #fbadge .fb-close { opacity: 1; right: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  #fbadge .fb-cta, #fbadge .fb-cta svg, #fbadge .fb-thumbs img { transition: none; }
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 1199px) {
  .foot-cols { grid-template-columns: repeat(3, auto); }
}
@media (max-width: 809px) {
  :root { --pad: 12px; }
  .nav-links { display: none; }
  .nav-logo { position: static; transform: none; }
  .nav-right { gap: 16px; }
  .nav-right .nav-account { display: none; }
  .nav-burger { display: block; }
  .page-head { grid-template-columns: 1fr; padding-top: 60px; }
  .h-display { font-size: 51px; letter-spacing: -0.04em; line-height: 1.1; }
  .page-head .desc { font-size: var(--fs-link); line-height: 1.6; max-width: 280px; margin-top: 28px; }
  .tabs { justify-content: flex-start; gap: 12px; padding: 74px var(--pad) 24px; }
  .grid { grid-template-columns: 1fr; gap: 63px 0; }
  .quick { opacity: 1; transform: none; }
  .card-meta { margin-top: 17px; }
  .news { grid-template-columns: 1fr; height: 600px; align-content: center; gap: 22px; padding: 0 var(--pad); margin-top: 63px; }
  .news .h-section { font-size: 28px; margin-top: 0; text-align: center; }
  .form-news { align-items: center; text-align: center; gap: 24px; }
  .form-news .row { justify-content: center; }
  .form-news input { width: 151px; flex-basis: 151px; }
  footer { padding: 44px 16px 12px; }
  .foot-top { grid-template-columns: 1fr; gap: 60px; }
  .foot-cols { grid-template-columns: 1fr; gap: 48px; justify-content: start; }
  .foot-cols a { font-size: 15px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; margin-top: 60px; gap: 12px; }
  .foot-logo { width: min(100%, 340px); }
  #cart { width: 100%; }
  .pop { grid-template-columns: 1fr; grid-template-rows: 180px auto; height: auto; width: 100%; max-width: 360px; }
  .pop .modal { padding: 48px 32px 32px; }
  .hero-center { top: 30.8%; }
  .hero-link span { font-size: 15px; }
  .hero-link span + span { font-size: var(--fs-label); }
  .hero-clock { bottom: 20px; }
  .crumbs { padding-top: 40px; }
  .product { grid-template-columns: 1fr; gap: 32px; }
  .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 4px; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery figure { flex: 0 0 85%; scroll-snap-align: start; }
  .pinfo { position: static; }
  .pinfo .sizes { margin-top: 40px; }
  .pinfo .cta { margin-top: 32px; }
  .related { margin-top: 80px; }
  .brand-intro { grid-template-columns: 1fr; gap: 24px; }
  .brand-based .big { font-size: 56px; }
  .brand-based { height: 380px; }
  .brand-mat { grid-template-columns: 1fr; gap: 32px; padding-top: 80px; }
  .brand-mat .cols { grid-template-columns: 1fr 1fr; gap: 16px; }
  .brand-mat .news-space { display: none; }
}
@media (min-width: 810px) and (max-width: 1199px) {
  .foot-cols { grid-template-columns: repeat(3, minmax(110px, auto)); }
}