/* ==========================================================================
   GZS WEAR BRANDS — Sistema de diseño
   Estética: editorial urbana, tierra + tinta, tipografía display con carácter
   ========================================================================== */

/* ---------- Fuentes (locales, sin CDN) ---------- */
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-normal-400-900.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-italic-400-900.woff2') format('woff2');font-weight:400 900;font-style:italic;font-display:swap;}
@font-face{font-family:'Inter';src:url('../fonts/inter-normal-300-700.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Mono';src:url('../fonts/spacemono-normal-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Mono';src:url('../fonts/spacemono-normal-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  /* GRIS — base/fondo de toda la web */
  --bone:#E3E0DA;          /* fondo de página */
  /* BLANCO ROTO — tarjetas, bandas y paneles */
  --paper:#F7F4EE;         /* superficie clara */
  --white:#F7F4EE;
  /* MARRÓN — color de marca (cartel URBAN) */
  --ink:#302114;           /* fondo del cartel URBAN */
  --ink-80:rgba(48,33,20,.86);
  --brown:#7A4E27;         /* marrón de acento visible */
  /* GRIS — textos secundarios, bordes y superficies */
  --ink-60:#7B7771;        /* gris neutro */
  --ink-40:#A5A19B;        /* gris claro */
  --grey:#7B7771;
  --grey-50:#F7F4EE;       /* bandas (marquee, newsletter, resumen) */
  --grey-100:#E2DFDA;      /* superficie gris */
  --line:rgba(123,119,113,.38);
  --line-strong:rgba(123,119,113,.58);
  --camel:#7A4E27;
  --clay:#7A4E27;
  --sage:#7B7771;
  --sand:#D9D4CB;          /* claro neutro sobre fondo marrón */
  --stone:#F7F4EE;         /* fondo de tarjetas/miniaturas — BLANCO ROTO */
  --on-dark:#F7F4EE;       /* texto sobre fondos marrones */
  --ok:#3E6B4F;
  --bad:#A3392F;

  --f-display:'Fraunces', Georgia, serif;
  --f-body:'Inter', system-ui, sans-serif;
  --f-mono:'Space Mono', ui-monospace, monospace;

  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(48,33,20,.06), 0 2px 10px rgba(48,33,20,.05);
  --shadow-md:0 6px 30px rgba(48,33,20,.10);
  --shadow-lg:0 24px 60px rgba(48,33,20,.16);
  --ease:cubic-bezier(.22,.61,.24,1);
  --header-h:72px;
  --pad-x:clamp(18px,4.4vw,64px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  font-family:var(--f-body);font-weight:400;font-size:15.5px;line-height:1.62;
  color:var(--ink);background:var(--bone);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;}
ul,ol{list-style:none;}
::selection{background:var(--ink);color:var(--on-dark);}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:3px;}

/* ---------- Grano film ---------- */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

/* ---------- Tipografía ---------- */
.display{font-family:var(--f-display);font-weight:600;line-height:.92;letter-spacing:-.02em;}
.display i,.display em{font-style:italic;font-weight:500;}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;}
.eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-60);}
.lead{font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--ink-80);}
.muted{color:var(--ink-60);}
.small{font-size:13px;}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.02;letter-spacing:-.02em;}

/* ---------- Layout ---------- */
.wrap{width:min(1440px,100%);margin-inline:auto;padding-inline:var(--pad-x);}
.wrap--narrow{width:min(880px,100%);}
.section{padding-block:clamp(64px,9vw,132px);}
.section--tight{padding-block:clamp(40px,5vw,72px);}
.grid{display:grid;gap:clamp(16px,2.4vw,32px);}
.hr{border:0;border-top:1px solid var(--line);}

/* ---------- Header ---------- */
.announce{
  background:var(--ink);color:var(--on-dark);text-align:center;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:8px var(--pad-x);
}
.announce b{color:var(--sand);font-weight:400;}

.site-header{
  position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bone) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--line);}
.header-in{display:flex;align-items:center;gap:24px;height:var(--header-h);}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:21px;letter-spacing:-.03em;}
.brand .dot{width:8px;height:8px;background:var(--clay);border-radius:50%;display:inline-block;transform:translateY(-6px);}
.brand small{font-family:var(--f-mono);font-size:9px;letter-spacing:.26em;font-weight:400;color:var(--ink-60);align-self:flex-end;margin-bottom:2px;}
.nav{display:flex;gap:4px;margin-inline:auto;}
.nav a{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 13px;border-radius:var(--r-pill);position:relative;transition:background .25s var(--ease);
}
.nav a:hover{background:rgba(48,33,20,.06);}
.nav a[aria-current="page"]{background:var(--ink);color:var(--on-dark);}
.header-actions{display:flex;align-items:center;gap:6px;}
.icon-btn{
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  transition:background .25s var(--ease);position:relative;
}
.icon-btn:hover{background:rgba(48,33,20,.07);}
.icon-btn svg{width:19px;height:19px;}
.cart-count{
  position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;
  background:var(--clay);color:var(--white);border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:9.5px;display:grid;place-items:center;
  transform:scale(0);transition:transform .3s var(--ease);
}
.cart-count.is-on{transform:scale(1);}
.burger{display:none;}

/* menú móvil */
.mobile-nav{
  position:fixed;inset:0;z-index:90;background:var(--bone);
  display:flex;flex-direction:column;padding:20px var(--pad-x) 40px;
  transform:translateY(-102%);transition:transform .5s var(--ease);
}
.mobile-nav.is-open{transform:none;}
.mobile-nav .top{display:flex;justify-content:space-between;align-items:center;height:var(--header-h);}
.mobile-nav a.mlink{
  font-family:var(--f-display);font-size:clamp(34px,9vw,54px);font-weight:600;letter-spacing:-.03em;
  padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;
}
.mobile-nav a.mlink span{font-family:var(--f-mono);font-size:11px;color:var(--ink-40);}

/* ---------- Botones ---------- */
.btn{
  --bg:var(--ink);--fg:var(--on-dark);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--bg);color:var(--fg);border:1px solid var(--bg);
  padding:15px 28px;border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  position:relative;overflow:hidden;transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn:active{transform:translateY(0);}
.btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line-strong);}
.btn--ghost:hover{border-color:var(--ink);}
.btn--light{--bg:var(--bone);--fg:var(--ink);}
.btn--wide{width:100%;}
.btn--sm{padding:11px 18px;font-size:10px;}
.btn[disabled]{opacity:.45;pointer-events:none;}
.btn .arrow{transition:transform .3s var(--ease);}
.btn:hover .arrow{transform:translateX(4px);}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--grey-50);}
.marquee--ink{background:var(--ink);color:var(--on-dark);border-color:rgba(246,241,232,.16);}
.marquee-track{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{
  font-family:var(--f-display);font-size:clamp(18px,2.4vw,30px);font-weight:500;font-style:italic;
  padding:16px 26px;white-space:nowrap;display:flex;align-items:center;gap:26px;
}
.marquee-track span::after{content:"✳";font-style:normal;font-size:.7em;color:var(--camel);}
@keyframes slide{to{transform:translateX(-50%);}}

/* ---------- Banner de marca (bajo el menú) ---------- */
.brandbanner{
  display:block;position:relative;width:100%;background:var(--ink);
  overflow:hidden;line-height:0;
}
.brandbanner img{
  width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;object-position:center 52%;
  transition:transform 1.6s var(--ease);
}
.brandbanner:hover img{transform:scale(1.025);}
@media (max-width:820px){
  .brandbanner img{aspect-ratio:2.5/1;object-position:center 55%;}
}
@media (max-width:480px){
  .brandbanner img{aspect-ratio:2.2/1;object-position:center 58%;}
}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:clamp(26px,4vw,54px);}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,3vw,48px);
  align-items:end;position:relative;
}
.hero-title{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.035em;line-height:.86;
  font-size:clamp(58px,11.6vw,178px);
}
.hero-title .l{display:block;overflow:hidden;}
.hero-title .l > span{display:block;transform:translateY(105%);animation:rise 1s var(--ease) forwards;}
.hero-title .l:nth-child(2) > span{animation-delay:.12s;}
.hero-title .l:nth-child(3) > span{animation-delay:.24s;}
.hero-title em{font-style:italic;font-weight:500;color:var(--clay);}
@keyframes rise{to{transform:none;}}
.hero-meta{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;margin-top:26px;}
.hero-media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.hero-media img{width:100%;aspect-ratio:4/5;object-fit:cover;transform:scale(1.02);transition:transform 1.4s var(--ease);}
.hero-media:hover img{transform:scale(1.06);}
.hero-sticker{
  position:absolute;right:-18px;bottom:-18px;width:118px;height:118px;border-radius:50%;
  background:var(--ink);color:var(--on-dark);display:grid;place-items:center;text-align:center;
  font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;line-height:1.7;text-transform:uppercase;
  box-shadow:var(--shadow-md);z-index:2;
}
.hero-sticker i{position:absolute;inset:6px;border:1px dashed rgba(246,241,232,.38);border-radius:50%;animation:spin 26s linear infinite;}
.hero-sticker b{font-weight:400;padding:10px;}
@keyframes spin{to{transform:rotate(360deg);}}
.hero-caption{
  position:absolute;left:16px;top:16px;background:color-mix(in srgb,var(--bone) 86%,transparent);
  backdrop-filter:blur(8px);border-radius:var(--r-pill);padding:8px 14px;
}

/* ---------- Producto ---------- */
.prod-grid{display:grid;gap:clamp(16px,2vw,28px);grid-template-columns:repeat(4,1fr);}
.prod-grid--3{grid-template-columns:repeat(3,1fr);}
.prod-grid--2{grid-template-columns:repeat(2,1fr);}
.card{position:relative;}
.card-media{
  position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--stone);
  aspect-ratio:4/5;display:block;
}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease), transform .9s var(--ease);}
.card-media img.b{opacity:0;}
.card:hover .card-media img.b{opacity:1;}
.card:hover .card-media img.a{transform:scale(1.04);}
.badges{position:absolute;top:12px;left:12px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.badge{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--bone);color:var(--ink);padding:5px 10px;border-radius:var(--r-pill);box-shadow:var(--shadow-sm);
}
.badge--ink{background:var(--ink);color:var(--on-dark);}
.badge--clay{background:var(--clay);color:var(--white);}
.quick-add{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
  transform:translateY(140%);opacity:0;transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.card:hover .quick-add,.card:focus-within .quick-add{transform:none;opacity:1;}
.card-body{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-top:14px;}
.card-name{font-family:var(--f-display);font-weight:600;font-size:17.5px;letter-spacing:-.01em;line-height:1.15;}
.card-cat{color:var(--ink-60);font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:5px;}
.card-price{font-family:var(--f-mono);font-size:13px;white-space:nowrap;}
.card-price s{color:var(--ink-40);margin-right:6px;}

/* ---------- Chips / filtros ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:28px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 15px;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.chip:hover{border-color:var(--ink);}
.chip.is-on{background:var(--ink);color:var(--on-dark);border-color:var(--ink);}
.field{
  display:flex;align-items:center;gap:9px;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  padding:10px 16px;background:var(--paper);min-width:200px;
}
.field svg{width:15px;height:15px;opacity:.5;flex:none;}
.field input{border:0;background:none;outline:none;width:100%;font-size:14px;}
.select{
  appearance:none;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  padding:10px 38px 10px 16px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23302114' fill='none' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 15px center;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
}

/* ---------- Pasarela categorías ---------- */
.cats{display:grid;}
.cat-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(18px,2.6vw,34px) 0;border-bottom:1px solid var(--line);position:relative;
}
.cat-row:first-child{border-top:1px solid var(--line);}
.cat-row .t{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;line-height:1;
  font-size:clamp(38px,7vw,96px);transition:color .35s var(--ease), transform .5s var(--ease);
  display:flex;align-items:baseline;gap:16px;
}
.cat-row .n{font-family:var(--f-mono);font-size:11px;color:var(--ink-40);letter-spacing:.1em;}
.cat-row:hover .t{color:var(--clay);transform:translateX(14px);}
.cat-row .go{
  width:52px;height:52px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;
  transition:background .3s var(--ease),color .3s var(--ease),transform .4s var(--ease);flex:none;
}
.cat-row:hover .go{background:var(--ink);color:var(--on-dark);transform:rotate(-45deg);}

/* ---------- Editorial / split ---------- */
.split{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,4vw,64px);align-items:center;}
.split--asym{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
.media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.media:hover img{transform:scale(1.045);}
.media--tall img{aspect-ratio:4/5;}
.media--wide img{aspect-ratio:16/10;}
.media--sq img{aspect-ratio:1;}
.tag-rot{
  position:absolute;top:18px;left:18px;background:var(--bone);color:var(--ink);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 12px;border-radius:var(--r-pill);transform:rotate(-4deg);box-shadow:var(--shadow-sm);
}
.stat-list{display:grid;gap:0;margin-top:28px;}
.stat{display:flex;gap:18px;padding:16px 0;border-top:1px solid var(--line);align-items:baseline;}
.stat .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;color:var(--ink-40);width:44px;flex:none;}
.stat .v strong{display:block;font-family:var(--f-display);font-size:19px;font-weight:600;}
.stat .v span{color:var(--ink-60);font-size:14.5px;}

/* ---------- Manifesto ---------- */
.manifesto{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden;}
.manifesto .big{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;line-height:.95;
  font-size:clamp(34px,6.4vw,96px);
}
.manifesto .big em{font-style:italic;color:var(--sand);}
.manifesto .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);margin-top:clamp(36px,5vw,64px);}
.manifesto .cols h4{font-size:19px;margin-bottom:8px;}
.manifesto .cols p{color:rgba(246,241,232,.66);font-size:14.5px;}
.manifesto .cols .n{font-family:var(--f-mono);font-size:10px;color:var(--sand);letter-spacing:.2em;display:block;margin-bottom:14px;}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--grey-50);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(28px,4vw,56px);}
.nl-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.nl-form .field{flex:1;min-width:240px;}
.form-msg{font-family:var(--f-mono);font-size:11px;margin-top:12px;letter-spacing:.06em;}
.form-msg.ok{color:var(--ok);}
.form-msg.err{color:var(--bad);}

/* ---------- Producto (detalle) ---------- */
.pdp{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,72px);align-items:start;}
.pdp-gallery{position:sticky;top:calc(var(--header-h) + 20px);}
.pdp-main{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--stone);aspect-ratio:4/5;}
.pdp-main img{width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease);}
.pdp-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px;}
.pdp-thumb{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1;background:var(--stone);opacity:.62;transition:opacity .25s var(--ease),outline-color .25s;}
.pdp-thumb img{width:100%;height:100%;object-fit:cover;}
.pdp-thumb.is-on{opacity:1;outline:2px solid var(--ink);outline-offset:2px;}
.pdp-info h1{font-size:clamp(34px,4.6vw,58px);margin:10px 0 14px;}
.price-row{display:flex;align-items:baseline;gap:14px;margin:6px 0 20px;}
.price-row .p{font-family:var(--f-mono);font-size:19px;}
.price-row .note{color:var(--ink-60);font-size:13px;}
.opt-block{margin-top:22px;}
.opt-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px;}
.opt-head .lab{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;}
.opt-head .val{font-size:13px;color:var(--ink-60);}
.swatches{display:flex;gap:9px;flex-wrap:wrap;}
.swatch{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);position:relative;
  transition:transform .25s var(--ease);
}
.swatch:hover{transform:scale(1.08);}
.swatch.is-on{box-shadow:0 0 0 2px var(--bone),0 0 0 3.5px var(--ink);}
.sizes{display:flex;gap:8px;flex-wrap:wrap;}
.size{
  min-width:52px;padding:11px 14px;text-align:center;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font-family:var(--f-mono);font-size:11.5px;transition:all .2s var(--ease);
}
.size:hover{border-color:var(--ink);}
.size.is-on{background:var(--ink);color:var(--on-dark);border-color:var(--ink);}
.size--disabled{opacity:.35;text-decoration:line-through;pointer-events:none;}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r-pill);overflow:hidden;}
.qty button{width:44px;height:46px;font-size:16px;display:grid;place-items:center;transition:background .2s;}
.qty button:hover{background:rgba(48,33,20,.06);}
.qty span{width:38px;text-align:center;font-family:var(--f-mono);font-size:13px;}
.buy-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px;}
.buy-row .btn{flex:1;min-width:220px;padding-block:18px;}
.perks{display:grid;gap:9px;margin-top:24px;}
.perk{display:flex;gap:10px;align-items:center;color:var(--ink-60);font-size:13.5px;}
.perk svg{width:16px;height:16px;flex:none;opacity:.7;}
.acc{border-top:1px solid var(--line);margin-top:30px;}
.acc details{border-bottom:1px solid var(--line);}
.acc summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;cursor:pointer;
  padding:17px 0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
}
.acc summary::-webkit-details-marker{display:none;}
.acc summary .ind{transition:transform .3s var(--ease);flex:none;}
.acc details[open] summary .ind{transform:rotate(45deg);}
.acc .body{padding:0 0 20px;color:var(--ink-60);font-size:14.5px;max-width:62ch;}
.acc .body ul{display:grid;gap:7px;}
.acc .body li{display:flex;gap:9px;}
.acc .body li::before{content:"—";color:var(--camel);}

/* ---------- Carrito (drawer) ---------- */
.scrim{position:fixed;inset:0;background:rgba(48,33,20,.45);opacity:0;pointer-events:none;transition:opacity .4s var(--ease);z-index:80;}
.scrim.is-on{opacity:1;pointer-events:auto;}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);z-index:85;background:var(--bone);
  transform:translateX(102%);transition:transform .5s var(--ease);display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);
}
.drawer.is-open{transform:none;}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line);}
.drawer-top h3{font-size:22px;}
.drawer-items{flex:1;overflow-y:auto;padding:6px 22px;}
.ci{display:grid;grid-template-columns:74px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);}
.ci-img{width:74px;height:92px;border-radius:var(--r-sm);overflow:hidden;background:var(--stone);}
.ci-img img{width:100%;height:100%;object-fit:cover;}
.ci-name{font-family:var(--f-display);font-weight:600;font-size:15.5px;line-height:1.2;}
.ci-meta{color:var(--ink-60);font-size:12.5px;margin-top:3px;}
.ci-qty{display:inline-flex;align-items:center;gap:10px;margin-top:10px;border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:3px;}
.ci-qty button{width:26px;height:24px;display:grid;place-items:center;font-size:14px;border-radius:var(--r-pill);}
.ci-qty button:hover{background:rgba(48,33,20,.07);}
.ci-qty span{font-family:var(--f-mono);font-size:12px;min-width:16px;text-align:center;}
.ci-rm{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);margin-top:10px;}
.ci-rm:hover{color:var(--bad);}
.ci-price{font-family:var(--f-mono);font-size:13px;white-space:nowrap;}
.drawer-foot{border-top:1px solid var(--line);padding:20px 22px 26px;background:var(--grey-50);}
.freebar{height:4px;background:rgba(48,33,20,.1);border-radius:99px;overflow:hidden;margin:9px 0 6px;}
.freebar i{display:block;height:100%;background:var(--clay);width:0;transition:width .5s var(--ease);}
.totline{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:14.5px;}
.totline.grand{font-size:17px;padding-top:12px;border-top:1px solid var(--line);margin-top:8px;}
.totline .v{font-family:var(--f-mono);}
.empty{padding:52px 22px;text-align:center;color:var(--ink-60);}
.empty .big{font-family:var(--f-display);font-size:28px;color:var(--ink);margin-bottom:8px;}

/* ---------- Carrito (página) ---------- */
.cart-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.5fr);gap:clamp(24px,4vw,64px);align-items:start;}
.cart-line{display:grid;grid-template-columns:104px 1fr auto;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);}
.cart-line .im{width:104px;height:130px;border-radius:var(--r-md);overflow:hidden;background:var(--stone);}
.cart-line .im img{width:100%;height:100%;object-fit:cover;}
.summary{background:var(--grey-50);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;position:sticky;top:calc(var(--header-h) + 20px);}
.summary h3{font-size:24px;margin-bottom:16px;}
.promo{display:flex;gap:8px;margin:16px 0;}
.promo input{flex:1;border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:12px 16px;background:var(--bone);outline:none;}
.promo input:focus{border-color:var(--ink);}

/* ---------- Checkout ---------- */
.co-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:clamp(24px,4vw,64px);align-items:start;}
.co-step{border-top:1px solid var(--line);padding:26px 0;}
.co-step h3{font-size:21px;margin-bottom:4px;display:flex;gap:12px;align-items:baseline;}
.co-step h3 .n{font-family:var(--f-mono);font-size:11px;color:var(--clay);}
.co-step .sub{color:var(--ink-60);font-size:13.5px;margin-bottom:18px;}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.fgrid--3{grid-template-columns:repeat(3,1fr);}
.fw{grid-column:1/-1;}
.f label{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60);margin-bottom:6px;}
.f input,.f select,.f textarea{
  width:100%;border:1px solid var(--line-strong);background:var(--paper);border-radius:var(--r-sm);
  padding:13px 14px;outline:none;transition:border-color .2s;
}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--ink);}
.f input[aria-invalid="true"]{border-color:var(--bad);}
.payopt{
  display:flex;gap:14px;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r-md);
  padding:16px;cursor:pointer;transition:border-color .2s, background .2s;
}
.payopt.is-on{border-color:var(--ink);background:var(--paper);}
.payopt .radio{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-strong);flex:none;display:grid;place-items:center;}
.payopt.is-on .radio{border-color:var(--ink);}
.payopt .radio i{width:9px;height:9px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .2s var(--ease);}
.payopt.is-on .radio i{transform:scale(1);}
.co-note{background:var(--grey-50);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:14px 16px;font-size:13px;margin-top:14px;}
.co-note code{font-family:var(--f-mono);font-size:11.5px;background:rgba(48,33,20,.07);padding:2px 6px;border-radius:5px;}

/* ---------- Toasts ---------- */
.toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:120;display:grid;gap:10px;width:min(420px,calc(100% - 32px));}
.toast{
  background:var(--ink);color:var(--on-dark);border-radius:var(--r-md);padding:14px 18px;
  display:flex;gap:12px;align-items:center;box-shadow:var(--shadow-lg);
  animation:toast-in .45s var(--ease);
}
.toast .ico{width:26px;height:26px;border-radius:50%;background:rgba(246,241,232,.14);display:grid;place-items:center;flex:none;}
.toast .t{font-size:14px;line-height:1.35;}
.toast .t b{display:block;font-family:var(--f-display);font-weight:600;font-size:15px;}
.toast .undo{margin-left:auto;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);flex:none;}
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.97);}}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease);}
.modal.is-on{opacity:1;pointer-events:auto;}
.modal-card{
  background:var(--bone);border-radius:var(--r-lg);max-width:560px;width:100%;padding:30px;
  box-shadow:var(--shadow-lg);transform:translateY(12px) scale(.98);transition:transform .35s var(--ease);
  max-height:86vh;overflow:auto;
}
.modal.is-on .modal-card{transform:none;}
.modal h3{font-size:26px;margin-bottom:12px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden;}
.footer-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.55fr));gap:clamp(24px,3vw,48px);padding:clamp(48px,6vw,88px) 0 clamp(30px,4vw,48px);}
.footer-top h4{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,241,232,.5);margin-bottom:16px;font-weight:400;}
.footer-top a{color:rgba(246,241,232,.82);display:block;padding:5px 0;font-size:14.5px;transition:color .2s,transform .2s;width:fit-content;}
.footer-top a:hover{color:var(--sand);transform:translateX(3px);}
.footer-brand p{color:rgba(246,241,232,.6);max-width:34ch;margin-top:14px;font-size:14.5px;}
.footer-social{display:flex;gap:10px;margin-top:20px;}
.footer-social a{width:40px;height:40px;border:1px solid rgba(246,241,232,.22);border-radius:50%;display:grid;place-items:center;transition:background .25s,transform .25s;}
.footer-social a:hover{background:rgba(246,241,232,.1);transform:translateY(-3px);}
.footer-social svg{width:17px;height:17px;}
.footer-giant{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.04em;line-height:.8;text-align:center;
  font-size:clamp(56px,16.5vw,252px);color:transparent;-webkit-text-stroke:1px rgba(246,241,232,.26);
  padding:10px 0 0;white-space:nowrap;user-select:none;
}
.footer-bottom{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center;padding:26px 0 34px;border-top:1px solid rgba(246,241,232,.14);color:rgba(246,241,232,.5);}
.pays{display:flex;gap:8px;align-items:center;}
.pays span{border:1px solid rgba(246,241,232,.2);border-radius:6px;padding:4px 8px;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.1em;}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.is-in{opacity:1;transform:none;}
.reveal-d1{transition-delay:.08s;}.reveal-d2{transition-delay:.16s;}.reveal-d3{transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .marquee-track{animation:none;}
  .hero-sticker{animation:none;}
  .hero-title .l>span{animation:none;transform:none;}
}

/* ---------- Páginas legales / prosa ---------- */
.prose h2{font-size:clamp(26px,3.4vw,40px);margin:44px 0 14px;}
.prose h3{font-size:20px;margin:28px 0 10px;}
.prose p,.prose li{color:var(--ink-80);font-size:15.5px;margin-bottom:12px;}
.prose ul{list-style:disc;padding-left:22px;}
.prose a{text-decoration:underline;text-underline-offset:3px;}

/* ---------- 404 ---------- */
.err-page{min-height:78vh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;}
.err-page .code{
  font-family:var(--f-display);font-weight:700;font-size:clamp(120px,30vw,360px);line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px var(--ink);
}

/* ---------- Utilidades ---------- */
.center{text-align:center;}
.mt-1{margin-top:8px;}.mt-2{margin-top:16px;}.mt-3{margin-top:24px;}.mt-4{margin-top:36px;}.mt-5{margin-top:52px;}
.mb-2{margin-bottom:16px;}.mb-3{margin-bottom:24px;}.mb-4{margin-bottom:36px;}
.flex{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.between{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;flex-wrap:wrap;}
.hide{display:none!important;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:absolute;left:-999px;top:10px;background:var(--ink);color:var(--on-dark);padding:10px 16px;border-radius:8px;z-index:200;}
.skip:focus{left:20px;}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .prod-grid{grid-template-columns:repeat(3,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;}
  .cart-layout,.co-layout{grid-template-columns:1fr;}
  .summary{position:static;}
}
@media (max-width:900px){
  .nav{display:none;}
  .burger{display:grid;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-media img{aspect-ratio:4/5;}
  /* Orden móvil: 1) botones  2) foto  3) todo el texto */
  .hero-copy{display:contents;}
  .hero-actions{order:1;margin-top:0;}
  .hero-media{order:2;}
  .hero-text{order:3;}
  .hero-trust{order:4;}
  .split,.split--asym{grid-template-columns:1fr;}
  .pdp{grid-template-columns:1fr;}
  .pdp-gallery{position:static;}
  .manifesto .cols{grid-template-columns:1fr;}
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .prod-grid--3{grid-template-columns:repeat(2,1fr);}
  .header-in{gap:12px;}
}
@media (max-width:560px){
  .prod-grid,.prod-grid--3{grid-template-columns:1fr 1fr;gap:12px;}
  .card-name{font-size:15px;}
  .footer-top{grid-template-columns:1fr;}
  .fgrid,.fgrid--3{grid-template-columns:1fr;}
  .buy-row .btn{min-width:0;}
  :root{--header-h:64px;}
  .cart-line{grid-template-columns:84px 1fr;gap:14px;}
  .cart-line .im{width:84px;height:106px;}
}

/* ------------------------------------------------------------------
   FICHA DEL TITULAR + realces de las páginas legales
   ------------------------------------------------------------------ */
.card-titular{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r,14px);
  padding:clamp(18px,2.4vw,26px);
  margin:22px 0 34px;
  position:relative;
  overflow:hidden;
}
.card-titular::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--clay),transparent 85%);
}
.ct-head{
  font-family:var(--mono,ui-monospace,monospace);
  text-transform:uppercase;letter-spacing:.16em;
  font-size:9.5px;color:var(--clay);margin-bottom:14px;
}
.ct-row{
  display:grid;grid-template-columns:118px 1fr;gap:14px;
  padding:10px 0;border-top:1px solid var(--line);
  align-items:baseline;
}
.ct-row:first-of-type{border-top:0;}
.ct-row span{
  font-family:var(--mono,ui-monospace,monospace);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);
}
.ct-row b{font-weight:500;font-size:14px;line-height:1.5;color:var(--ink);}
.ct-row b a{text-decoration:underline;text-underline-offset:3px;}

.prose .note-brand{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin:18px 0;
  font-size:14px;line-height:1.7;color:var(--ink-80);
}
.prose .note-brand b{color:var(--ink);}
.prose .steps{counter-reset:s;list-style:none;padding:0;margin:16px 0;display:grid;gap:10px;}
.prose .steps li{
  counter-increment:s;position:relative;padding-left:38px;font-size:14px;line-height:1.6;
}
.prose .steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--mono,ui-monospace,monospace);font-size:9.5px;letter-spacing:.1em;
  color:var(--clay);border:1px solid var(--line);border-radius:999px;
  width:24px;height:24px;display:grid;place-items:center;
}
@media(max-width:560px){
  .ct-row{grid-template-columns:1fr;gap:3px;}
}