/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  /* Fondos — capas de profundidad cálida: carbón, grafito, cuero */
  --black:   #0C0A07;   /* carbón profundo — nunca negro puro */
  --dark:    #13110D;   /* grafito cálido */
  --panel:   #1A1712;   /* superficie cuero oscuro */
  --panel2:  #211E17;   /* elevado */
  --panel3:  #2A261E;   /* aún más elevado */

  /* Bordes — casi imperceptibles, cálidos */
  --border:  rgba(255,240,200,.048);
  --border2: rgba(255,240,200,.10);

  /* Marca */
  --burg:    #9E1C2C;
  --burg-hi: #B52233;
  --burg-lo: rgba(158,28,44,.08);
  --gold:    #C4A04A;   /* bronce editorial — más sobrio */
  --gold-lo: rgba(196,160,74,.10);
  --teal:    #183838;

  /* Tipografía — crema editorial, nunca blanco */
  --text:    #EDE5D4;
  --text2:   #A89880;
  --muted:   #6B5D4F;

  --serif:   'Playfair Display', Georgia, serif;
  --italic:  'Cormorant Garamond', Georgia, serif;
  --sans:    'Inter', system-ui, sans-serif;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:   cubic-bezier(0.77, 0, 0.175, 1);
  --ease-draw: cubic-bezier(0.32, 0.72, 0, 1);

  --z-nav: 100;
  --z-mob: 99;
  --z-pop: 1000;
  --z-wa:  500;
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background-color:#0C0A07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.016'/%3E%3C/svg%3E");
  background-size:400px 400px;
  color:var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display:block; max-width:100%; }
a { color:inherit; }
button { font-family:inherit; }

/* film grain overlay */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.022;
  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:180px;
}

/* CONTACTO */
.contact {
  position:relative;
  overflow:hidden;
  padding:7rem 6vw;
  background:
    radial-gradient(ellipse 55% 90% at 100% 50%, rgba(158,28,44,.13), transparent 68%),
    linear-gradient(135deg, #100d09, var(--black));
  border-top:1px solid var(--border);
}
.contact::before {
  content:'ENCAMISADA'; position:absolute; right:-.07em; bottom:-.26em;
  font-family:var(--serif); font-weight:900; font-size:clamp(5rem,15vw,14rem);
  letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1px rgba(255,240,200,.035);
  pointer-events:none; user-select:none;
}
.contact-inner { position:relative; max-width:1120px; margin:0 auto; }
.contact-intro { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:3rem; }
.contact-title { max-width:590px; margin:0; }
.contact-lede { max-width:310px; color:var(--text2); font-family:var(--italic); font-size:1.08rem; font-style:italic; line-height:1.55; }
.contact-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:1rem; }
.contact-primary {
  min-height:286px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  padding:2rem; text-decoration:none; color:var(--text); position:relative; overflow:hidden;
  background:linear-gradient(145deg, rgba(158,28,44,.95), #64121d);
  border:1px solid rgba(255,255,255,.12); transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.contact-primary::after { content:'→'; position:absolute; right:1.7rem; top:1.4rem; font-family:var(--serif); font-size:2.1rem; font-weight:400; transition:transform .3s var(--ease-out); }
.contact-primary::before { content:''; position:absolute; width:280px; height:280px; right:-100px; top:-120px; border:1px solid rgba(255,255,255,.16); border-radius:50%; box-shadow:0 0 0 42px rgba(255,255,255,.045), 0 0 0 84px rgba(255,255,255,.025); }
.contact-primary > * { position:relative; }
.contact-kicker { display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; font-size:.66rem; font-weight:500; letter-spacing:.19em; text-transform:uppercase; opacity:.82; }
.contact-kicker svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.6; }
.contact-primary strong { font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.05; }
.contact-primary span:last-child { margin-top:.7rem; font-size:.85rem; opacity:.82; }
.contact-secondary { display:grid; gap:1rem; }
.contact-card {
  display:flex; align-items:center; gap:1.1rem; min-height:135px; padding:1.45rem;
  background:rgba(255,255,255,.025); border:1px solid var(--border2); color:var(--text); text-decoration:none;
  transition:border-color .25s, background .25s, transform .25s var(--ease-out);
}
.contact-icon { flex:none; width:45px; height:45px; display:grid; place-items:center; color:var(--gold); border:1px solid rgba(196,160,74,.35); border-radius:50%; }
.contact-icon svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; }
.contact-card-copy { min-width:0; }
.contact-card-label { display:block; margin-bottom:.2rem; color:var(--gold); font-size:.63rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; }
.contact-card-value { display:block; overflow-wrap:anywhere; font-family:var(--serif); font-size:1.04rem; font-weight:700; }
.contact-card-note { display:block; margin-top:.2rem; color:var(--muted); font-size:.76rem; }
@media (hover:hover) and (pointer:fine) {
  .contact-primary:hover { transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.32); }
  .contact-primary:hover::after { transform:translateX(6px); }
  .contact-card:hover { transform:translateX(5px); background:rgba(255,255,255,.055); border-color:rgba(196,160,74,.42); }
}
@media (max-width:760px) {
  .contact { padding:5rem 1.5rem; }
  .contact-intro { display:block; margin-bottom:2.2rem; }
  .contact-lede { margin-top:1rem; }
  .contact-grid { grid-template-columns:1fr; }
  .contact-primary { min-height:250px; }
}

/* ── ANNOUNCEMENT BAR ─────────────────────────────────────── */
.announce {
  background: var(--burg);
  padding:.45rem 0;
  overflow:hidden;
  position:relative;
  z-index:200;
}
.announce-track {
  display:flex;
  white-space:nowrap;
  animation:marquee 30s linear infinite;
  width:max-content;
  will-change:transform;
}
.announce-track span {
  font-size:.63rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.88);
  padding:0 2.8rem;
}
.announce-track span::before { content:'✦'; margin-right:2.8rem; opacity:.55; }
@media (prefers-reduced-motion:reduce) { .announce-track { animation:none; } }

/* ── HEADER ───────────────────────────────────────────────── */
header {
  position:sticky;
  top:0;
  z-index:var(--z-nav);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:1rem 3.5rem;
  background:rgba(12,10,7,.97);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:.5px solid var(--border2);
  transition:padding .3s var(--ease-out), background .3s;
}
header.scrolled { padding:.7rem 3.5rem; }

.header-logo {
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; justify-self:start;
}
.header-logo img {
  height:36px; width:36px; object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(139,26,42,.45));
  transition:filter .3s;
}
.header-logo-name {
  font-family:var(--serif); font-size:.68rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--text2);
  transition:color .25s;
}
@media (hover:hover) and (pointer:fine) {
  .header-logo:hover .header-logo-name { color:var(--text); }
  .header-logo:hover img { filter:drop-shadow(0 0 18px rgba(139,26,42,.7)); }
}

nav {
  display:flex; gap:2.2rem; align-items:center;
  justify-self:center;
}
nav a {
  font-size:.67rem; font-weight:400; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
  position:relative;
  transition:color .22s var(--ease-out);
}
/* underline que aparece desde la izquierda y desaparece hacia la derecha */
nav a::after {
  content:''; position:absolute; bottom:-3px; left:0;
  width:100%; height:1px; background:var(--burg);
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  nav a:hover { color:var(--text); }
  nav a:hover::after { transform:scaleX(1); transform-origin:left; }
}

.header-actions {
  display:flex; align-items:center; gap:1.2rem;
  justify-self:end;
}
.hdr-btn {
  display:flex; align-items:center; gap:.4rem;
  font-size:.67rem; font-weight:400; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); cursor:pointer; background:none; border:none;
  transition:color .2s, transform 160ms ease-out;
}
.hdr-btn:active { transform:scale(0.97); }
@media (hover:hover) and (pointer:fine) { .hdr-btn:hover { color:var(--text); } }
.hdr-btn svg { width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.5; }
.cart-count {
  min-width:17px; height:17px; background:var(--burg);
  border-radius:50%; font-size:.55rem; font-weight:600;
  display:grid; place-items:center; color:#fff; padding:0 2px;
}

.hamburger {
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:.25rem;
}
.hamburger span {
  display:block; width:22px; height:1.5px; background:var(--text);
  transition:transform .3s var(--ease-out), opacity .2s;
}
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ── MOBILE NAV — panel lateral desde la derecha ─────────── */
.mobile-nav {
  display:none;
  position:fixed;
  top:0; right:0; bottom:0; left:auto;
  width:82%;
  max-width:380px;
  /* Fondo 100% opaco (sin transparencia en ningún canal) — con el "backdrop-filter"
     que llevaba antes, el panel no se pintaba bien en algunos navegadores y se veía
     el contenido de fondo a través, incluida la zona del logo. */
  background:rgb(11,9,7);
  z-index:200; /* por encima del header (100) — al abrirse, el header se oculta entero */
  flex-direction:column;
  padding:1.5rem 1.6rem 1.6rem;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  box-shadow:-24px 0 60px rgba(0,0,0,.5);
  transform:translateX(100%);
  transition:transform .45s var(--ease-out);
}
.mobile-nav.open { transform:translateX(0); }

/* El header original (logo, buscar, cesta, hamburguesa) y el botón flotante de
   WhatsApp se ocultan mientras el panel está abierto — si no, con su z-index tan alto
   el botón de WhatsApp queda tapando los iconos sociales de abajo del panel. */
body.nav-open header,
body.nav-open .wa-wrap { visibility:hidden; }

.mobnav-close {
  position:absolute;
  top:1.3rem; right:1.4rem;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--gold);
  padding:0;
}
.mobnav-close svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6; }

.mobnav-brand {
  display:flex; justify-content:center;
  padding-bottom:.6rem; margin-bottom:.2rem;
  border-bottom:.5px solid var(--border);
}
/* El propio archivo ya lleva el escudo Y el texto "ENCAMISADA" dentro de la imagen
   — no se le pone ningún texto aparte al lado, para no repetir el nombre dos veces. */
.mobnav-brand img { width:150px; height:auto; object-fit:contain; }

.mobnav-list { display:flex; flex-direction:column; }
.mobnav-list a {
  display:flex; align-items:center; gap:.9rem;
  width:100%; padding:1rem 0;
  border-bottom:.5px solid var(--border);
  text-decoration:none; color:var(--text);
  /* Empiezan invisibles a propósito — el stagger de abajo los va revelando uno a
     uno; los iconos sociales (fuera de .mobnav-list) no llevan esta animación, así
     que no necesitan este opacity:0 de partida. */
  opacity:0; transform:translateX(16px);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.mobnav-ico {
  flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color:var(--gold);
}
.mobnav-ico svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.5; }
.mobnav-txt { flex:1; display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.mobnav-txt strong {
  font-family:var(--serif); font-size:1rem; font-weight:600; letter-spacing:.03em; color:var(--text);
}
.mobnav-txt small { font-size:.74rem; color:var(--gold); opacity:.85; line-height:1.3; }
.mobnav-chev { flex:none; width:16px; height:16px; stroke:var(--gold); fill:none; stroke-width:2; }

/* Stagger de entrada */
.mobile-nav.open .mobnav-list a:nth-child(1) { opacity:1; transform:translateX(0); transition-delay:.06s; }
.mobile-nav.open .mobnav-list a:nth-child(2) { opacity:1; transform:translateX(0); transition-delay:.11s; }
.mobile-nav.open .mobnav-list a:nth-child(3) { opacity:1; transform:translateX(0); transition-delay:.16s; }
.mobile-nav.open .mobnav-list a:nth-child(4) { opacity:1; transform:translateX(0); transition-delay:.21s; }
.mobile-nav.open .mobnav-list a:nth-child(5) { opacity:1; transform:translateX(0); transition-delay:.26s; }
.mobile-nav.open .mobnav-list a:nth-child(6) { opacity:1; transform:translateX(0); transition-delay:.31s; }

.mobnav-socials {
  display:flex; justify-content:center; gap:1rem;
  margin-top:1.4rem; padding-top:1.2rem;
  border-top:.5px solid var(--border);
}
.mobnav-socials a {
  width:38px; height:38px; border-radius:50%;
  border:.5px solid var(--gold); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.mobnav-socials svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.5; }

/* Hover */
@media (hover:hover) and (pointer:fine) {
  .mobile-nav a:hover .mobnav-txt strong { color:var(--gold); }
  .mobnav-socials a:hover { background:var(--gold-lo); }
}

/* ── HERO — centrado (estilo editorial) ───────────────────── */
.hero {
  height:var(--hero-h, 100vh); display:flex; flex-direction:column;
  align-items:center;
  position:relative; overflow:hidden;
  padding:clamp(5rem,8vh,7rem) 3.5rem 0;
}
.hero-bottom {
  width:100%; margin-top:auto;
  position:relative; z-index:2;
}
.hero-bg {
  position:absolute; inset:0;
  background-image:url('img/hero-bg.jpg');
  background-size:110%; background-position:center 40%;
  filter:saturate(.38) brightness(.38) sepia(.2);
  transition:background-position 1.8s cubic-bezier(0.23,1,0.32,1);
  will-change:background-position;
}
.hero-bg::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,8,8,.6) 0%, rgba(10,8,8,.05) 28%, rgba(10,8,8,.05) 58%, rgba(10,8,8,.92) 100%),
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(10,8,8,.45) 100%);
}
.hero-grid { display:none; }
.hero-ghost {
  position:absolute; bottom:-4rem; left:50%; transform:translateX(-50%);
  font-family:var(--serif); font-size:clamp(7rem,20vw,24rem); font-weight:900;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.04);
  white-space:nowrap; pointer-events:none; user-select:none;
  letter-spacing:-.02em; will-change:transform;
}
.hero-content {
  position:relative; z-index:2; text-align:center; max-width:840px;
  width:100%; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-bottom:1.5rem;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:1rem;
  font-family:var(--italic); font-style:italic; font-size:.95rem;
  color:var(--burg); letter-spacing:.1em; margin-bottom:.8rem;
  opacity:0; animation:fadeUp .9s .15s var(--ease-out) forwards;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content:''; display:block; width:36px; height:1px; background:var(--burg); opacity:.65;
}
.hero-title {
  font-family:var(--serif); font-size:clamp(3.2rem,6.5vw,7rem);
  font-weight:900; line-height:.93; letter-spacing:-.03em; margin-bottom:1.2rem;
  text-shadow:0 2px 48px rgba(0,0,0,.7);
  /* no animation en el root — animan los .hl-i */
}
.hero-title em { font-style:italic; font-weight:400; color:var(--burg); text-shadow:0 0 60px rgba(139,26,42,.4); }
/* per-line reveal — clip desde abajo */
.hl  { display:inline-block; overflow:hidden; vertical-align:bottom; }
.hl-i { display:inline-block; animation:hlReveal 1s var(--ease-out) both; }
.hl-1 .hl-i { animation-delay:.2s; }
.hl-2 .hl-i { animation-delay:.36s; }
.hero-sub {
  font-family:var(--italic); font-style:italic; font-size:1.15rem;
  font-weight:300; color:rgba(240,232,222,.85); max-width:480px; margin:0 auto 1.6rem;
  text-shadow:0 1px 16px rgba(0,0,0,.7);
  opacity:0; animation:fadeUp .9s .48s var(--ease-out) forwards;
}
.hero-actions {
  display:inline-flex; align-items:center; gap:1.6rem; flex-wrap:wrap; justify-content:center;
  opacity:0; animation:fadeUp .8s .65s var(--ease-out) forwards;
}

/* marquee strip — dentro del hero: semi-transparente sobre la pintura */
.marquee-strip {
  background:rgba(0,0,0,.5);
  border-top:1px solid rgba(255,255,255,.12);
  padding:.85rem 0; overflow:hidden;
  backdrop-filter:blur(6px);
}
.marquee-track {
  display:flex; width:max-content;
  animation:marquee 22s linear infinite;
  will-change:transform;
}
.marquee-item {
  font-family:var(--serif); font-style:italic;
  font-size:.88rem; color:var(--text); padding:0 2.2rem;  /* --text para contraste */
  white-space:nowrap; letter-spacing:.06em; opacity:.82;
}
.marquee-dot { color:var(--burg); margin:0 .5rem; }
@media (prefers-reduced-motion:reduce) { .marquee-track { animation:none; } }

/* shared button styles */
.btn-primary {
  display:inline-flex; align-items:center; gap:.75rem;
  padding:1rem 2.8rem; background:var(--burg); color:#fff;
  font-size:.67rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--burg);
  box-shadow:0 4px 24px rgba(139,26,42,.35);
  position:relative; overflow:hidden;
  transition:background .3s var(--ease-out), gap .35s var(--ease-out), transform 160ms ease-out, box-shadow .3s var(--ease-out);
  cursor:pointer;
}
/* sweep de brillo */
.btn-primary::before {
  content:''; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transition:left .55s var(--ease-out);
  pointer-events:none;
}
.btn-primary:active { transform:scale(0.97); }
@media (hover:hover) and (pointer:fine) {
  .btn-primary:hover { background:var(--burg-hi); gap:1.1rem; box-shadow:0 8px 36px rgba(139,26,42,.52); }
  .btn-primary:hover::before { left:125%; }
  .btn-primary:hover .btn-arrow { transform:translateX(5px); }
}
.btn-arrow { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .3s var(--ease-out); }

.btn-ghost {
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.67rem; font-weight:400; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(240,232,222,.72); text-decoration:none; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.22);
  padding:.95rem 2rem; cursor:pointer;
  transition:color .25s, gap .3s var(--ease-out), border-color .25s, background .25s;
}
@media (hover:hover) and (pointer:fine) {
  .btn-ghost:hover { color:var(--text); gap:.85rem; border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.08); }
  }
.btn-ghost svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .3s var(--ease-out); }
@media (hover:hover) and (pointer:fine) { .btn-ghost:hover svg { transform:translateX(4px); } }

/* ── GRAIN TEXTURE (añade profundidad sin imagen) ─────────── */
.hero::before, .products::before, .story::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.035;
  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='0.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:180px 180px;
}

/* ── TRUST DENTRO DEL HERO ────────────────────────────────── */
.hero-trust {
  position:relative; z-index:2;
  width:100%;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.2rem;
  padding:.9rem 2rem;
  background:rgba(0,0,0,.38);
  border-top:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(6px);
}
.trust-sep { color:rgba(255,255,255,.2); font-size:.7rem; padding:0 .4rem; }

/* ── TRUST BAR (legacy, mantener estilos de .trust-item) ──── */
.trust {
  background:var(--panel);
  border-top:1px solid rgba(139,26,42,.25);
  border-bottom:1px solid var(--border);
  padding:1.2rem 3.5rem;
  display:flex; align-items:center; justify-content:center;
  gap:0; flex-wrap:wrap;
}
.trust-item {
  display:flex; align-items:center; gap:.55rem;
  font-size:.58rem; font-weight:400; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(240,232,222,.75); padding:.3rem 1.4rem;
}
.trust-item svg {
  width:14px; height:14px; stroke:var(--gold); fill:none; stroke-width:1.5; flex-shrink:0;
}

/* ── SECTION COMMON ───────────────────────────────────────── */
.section-label {
  font-size:.6rem; font-weight:500; letter-spacing:.32em; text-transform:uppercase;
  color:var(--burg); margin-bottom:.8rem;
  display:flex; align-items:center; gap:.8rem;
}
.section-label::before { content:''; display:block; width:18px; height:1px; background:var(--burg); }
.section-title {
  font-family:var(--serif);
  font-size:clamp(2.2rem,4vw,4rem);
  font-weight:700; line-height:1.1; letter-spacing:-.02em;
}
.section-title em { font-style:italic; font-weight:400; color:var(--burg); }

/* ── FEATURE PRODUCT (1 GRANDE) ───────────────────────────── */
.feature {
  padding:5rem 3.5rem;
  background:#13110D;
  border-bottom:.5px solid var(--border2);
}
.feature-inner {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.1fr; gap:4rem; align-items:center;
}
.feature-img-wrap {
  position:relative; overflow:hidden;
  aspect-ratio:3/4;
  background:#0c0a07;
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}
.feature-img-wrap img {
  width:100%; height:100%; object-fit:contain; object-position:center;
  transition:transform .8s var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .feature-img-wrap:hover img { transform:scale(1.05); }
}
.feature-badge {
  position:absolute; top:1.2rem; left:1.2rem;
  background:var(--burg); color:#fff;
  font-size:.55rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  padding:.3rem .8rem;
}
.feature-content { padding:1rem 0; }
.feature-category {
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.6rem;
}
.feature-name {
  font-family:var(--serif); font-size:clamp(2rem,3vw,3.2rem);
  font-weight:900; line-height:1.05; letter-spacing:-.02em; margin-bottom:1rem;
}
.feature-name em { font-style:italic; font-weight:400; color:var(--burg); }
.feature-desc {
  font-family:var(--italic); font-style:italic;
  font-size:1.05rem; color:var(--text2); line-height:1.9; margin-bottom:2rem;
}
.feature-price {
  font-family:var(--serif); font-size:2rem; font-weight:700; color:var(--text);
  margin-bottom:1.8rem;
}
.feature-price span { font-family:var(--italic); font-style:italic; color:var(--burg); margin-left:.3rem; }
.feature-sizes {
  display:flex; gap:.5rem; margin-bottom:2rem; flex-wrap:wrap;
}
.size-btn {
  min-width:44px; height:44px; padding:0 .8rem;
  border:1px solid var(--border2); background:transparent;
  color:var(--text2); font-size:.72rem; font-weight:400; letter-spacing:.06em;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, transform 100ms ease-out;
}
.size-btn:active { transform:scale(0.97); }
@media (hover:hover) and (pointer:fine) {
  .size-btn:hover { border-color:var(--burg); color:var(--text); background:var(--burg-lo); }
}
.size-btn.sel { background:var(--burg); border-color:var(--burg); color:#fff; }
.feature-cta {
  display:flex; gap:1rem; flex-wrap:wrap;
}

/* Divisor con escudo — separa el precio del texto histórico */
.feature-divider {
  display:flex; align-items:center; gap:.9rem;
  margin:0 0 1.6rem; max-width:340px;
}
.feature-divider .fd-line { flex:1; height:1px; background:var(--border2); }
.feature-divider svg {
  width:18px; height:18px; stroke:var(--gold); fill:none; stroke-width:1.4;
  flex-shrink:0;
}

.fs-label {
  display:block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text2); margin-bottom:.6rem;
}

/* Franja de confianza — 3 iconos bajo el botón de compra */
.feature-trust {
  display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:2rem;
  padding-top:1.6rem; border-top:.5px solid var(--border2);
}
.ft-item { display:flex; align-items:center; gap:.6rem; }
.ft-item svg { width:20px; height:20px; stroke:var(--gold); fill:none; stroke-width:1.4; flex-shrink:0; }
.ft-item div { display:flex; flex-direction:column; gap:.1rem; }
.ft-item strong { font-size:.7rem; font-weight:600; color:var(--text); letter-spacing:.02em; }
.ft-item span { font-size:.62rem; color:var(--muted); }

/* Divisor con el escudo dorado en medio — separa la ficha de la galería de fotos */
.fgr-divider {
  display:flex; align-items:center; gap:1.4rem;
  max-width:1400px; margin:4rem auto 0;
}
.fgr-divider-line {
  flex:1; height:1px;
  background:linear-gradient(to right, transparent, rgba(196,160,74,.45) 15%, rgba(196,160,74,.45) 85%, transparent);
}
.fgr-divider-line:first-child { background:linear-gradient(to right, transparent, rgba(196,160,74,.45) 30%, rgba(196,160,74,.45)); }
.fgr-divider-line:last-child { background:linear-gradient(to left, transparent, rgba(196,160,74,.45) 30%, rgba(196,160,74,.45)); }
.fgr-divider svg {
  width:26px; height:26px; flex-shrink:0;
  stroke:var(--gold); fill:none; stroke-width:1.4;
}

/* Fila de galería + materiales, debajo de la ficha */
.feature-gallery-row {
  position:relative;
  display:grid; grid-template-columns:repeat(3, 1fr) 1.2fr;
  gap:1.6rem; max-width:1400px; margin:2.2rem auto 0;
  align-items:stretch;
}
.fgr-photo { position:relative; aspect-ratio:3/4; }
.fgr-photo img { width:100%; height:100%; object-fit:cover; display:block; border-radius:2px; }
/* Líneas doradas finas separando las 3 fotos entre sí */
.fgr-photo:not(:last-of-type)::after {
  content:'';
  position:absolute; top:0; bottom:0; right:-.8rem;
  width:1px;
  background:linear-gradient(to bottom, transparent, rgba(196,160,74,.45) 15%, rgba(196,160,74,.45) 85%, transparent);
}
.fgr-text { display:flex; flex-direction:column; justify-content:center; }
.fgr-label {
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1rem;
}
.fgr-text p { color:var(--text2); font-size:.85rem; line-height:1.75; margin:0 0 1.6rem; }
.fgr-marks { display:flex; flex-direction:column; gap:.9rem; padding-top:1.2rem; border-top:.5px solid var(--border2); }
.fgr-mark { display:flex; align-items:center; gap:.7rem; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text2); }
.fgr-mark svg { width:16px; height:16px; stroke:var(--gold); fill:none; stroke-width:1.5; flex-shrink:0; }

@media (max-width:1024px) {
  .feature-gallery-row { grid-template-columns:1fr 1fr; }
  .fgr-text { grid-column:1 / -1; }
}
@media (max-width:640px) {
  .feature-gallery-row { grid-template-columns:1fr 1fr; gap:1rem; margin-top:3rem; }
}

/* ── PRODUCTS GRID ────────────────────────────────────────── */
.products {
  padding:6rem 3.5rem 7rem;
  background:#0C0A07;
  position:relative; overflow:hidden;
  border-bottom:.5px solid var(--border2);
}
.products-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:3.5rem; gap:2rem; flex-wrap:wrap;
}
.see-all {
  font-size:.67rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
  display:flex; align-items:center; gap:.5rem;
  transition:color .25s var(--ease-out), gap .35s var(--ease-out);
}
.see-all svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .35s var(--ease-out); }
@media (hover:hover) and (pointer:fine) {
  .see-all:hover { color:var(--text); gap:.85rem; }
  .see-all:hover svg { transform:translateX(5px); }
}

/* ── Editorial grid: featured wide left + 2×2 right ───────── */
.products-grid {
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:1.3rem;
}
/* tarjeta destacada: ocupa 2 filas en columna 1 */
.pc-wide {
  grid-row:span 2;
  display:flex; flex-direction:column;
}
.pc-wide .product-img {
  flex:1; aspect-ratio:unset; min-height:320px;
}

/* ── PRODUCT CARD ─────────────────────────────────────────── */
.product-card:target .product-img {
  outline:2px solid var(--gold);
  outline-offset:4px;
  border-radius:14px;
  animation:prodTargetPulse 1.8s ease-out 1;
}
@keyframes prodTargetPulse {
  0% { box-shadow:0 0 0 6px rgba(196,160,74,.35); }
  100% { box-shadow:0 0 0 0 rgba(196,160,74,0); }
}
.product-card {
  background:transparent;
  border:none;
  box-shadow:none;
  overflow:hidden; cursor:pointer; position:relative;
  transition:transform .8s var(--ease-out), opacity .6s var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .product-card:hover {
    transform:translateY(-6px);
  }
}
.product-card:active { transform:scale(0.985); transition:transform 100ms ease-out; }

/* ── Product meta (categoria + rating) ───────────────────── */
.product-meta {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.28rem;
}
.product-rating {
  display:flex; align-items:center; gap:.25rem;
  font-size:.6rem; color:var(--gold); letter-spacing:.02em;
}
.product-rating svg { width:9px; height:9px; fill:var(--gold); flex-shrink:0; }
.product-material {
  font-size:.58rem; letter-spacing:.1em; color:var(--muted);
  margin-top:.28rem; text-transform:uppercase;
}
.product-swatches { display:flex; gap:.35rem; margin-top:.5rem; }
.pswatch {
  width:14px; height:14px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}

.product-img {
  aspect-ratio:3/4; position:relative; overflow:hidden;
}
.product-img img {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  transition:transform .7s var(--ease-out), filter .5s var(--ease-out);
  will-change:transform;
}
/* Catálogo: cajas menos alargadas (más parecidas a una foto de estudio) y un fondo
   neutro detrás — así todas las fotos se ven uniformes aunque cada una tenga su
   propio fondo (blanco, gris…) en el archivo original. */
.cat-grid .product-img { aspect-ratio:4/5; background:#e9e4da; }
/* La tipografía del nombre/precio se deja igual que en el resto de la web
   (serif para el nombre, itálica para el precio) — no una fuente propia solo
   para el catálogo, que hacía que la web se viera con letras distintas según
   la página. */

/* warm tint overlay on hover */
.product-img::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:rgba(139,26,42,.0);
  transition:background .5s var(--ease-out);
  mix-blend-mode:multiply;
}
@media (hover:hover) and (pointer:fine) {
  .product-card:hover .product-img img { transform:scale(1.07); filter:contrast(1.04); }
  .product-card:hover .product-img::after { background:rgba(139,26,42,.1); }
}

/* placeholder patterns for cards without image */
.p-bg-1 .product-img { background:
  radial-gradient(ellipse at 40% 40%, rgba(139,26,42,.22) 0%, transparent 55%),
  radial-gradient(ellipse at 80% 80%, rgba(28,58,58,.15) 0%, transparent 50%),
  #191919; }
.p-bg-2 .product-img { background:
  radial-gradient(ellipse at 60% 30%, rgba(139,26,42,.18) 0%, transparent 55%),
  radial-gradient(ellipse at 20% 80%, rgba(201,168,76,.06) 0%, transparent 50%),
  #181818; }
.p-bg-3 .product-img { background:
  radial-gradient(ellipse at 50% 55%, rgba(28,58,58,.32) 0%, transparent 60%),
  radial-gradient(ellipse at 85% 15%, rgba(139,26,42,.14) 0%, transparent 50%),
  #141a1a; }
.p-bg-4 .product-img { background:
  radial-gradient(ellipse at 30% 50%, rgba(201,168,76,.08) 0%, transparent 55%),
  radial-gradient(ellipse at 75% 25%, rgba(139,26,42,.2) 0%, transparent 50%),
  #171414; }

.product-badge {
  position:absolute; top:.75rem; left:.75rem; z-index:2;
  background:var(--burg); color:#fff;
  font-size:.53rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding:.25rem .65rem; pointer-events:none;
}
.product-badge.new   { background:var(--teal); }
.product-badge.sale  { background:#173d22; }

/* Modal galería (fotos de cerca de una prenda) — se abre al hacer clic en la
   propia foto de la tarjeta (antes había una lupa aparte, quitada). */
@media (hover:hover) and (pointer:fine) {
  .product-img { cursor:zoom-in; }
}
.gallery-modal-inner { max-width:480px; padding:1.2rem; }
.gallery-viewer { position:relative; display:flex; align-items:center; justify-content:center; }
.gallery-viewer img { width:100%; max-height:70vh; object-fit:contain; border-radius:4px; }
.gallery-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25);
  color:#fff; font-size:1.3rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.gallery-nav:hover { background:rgba(0,0,0,.8); }
.gallery-prev { left:8px; }
.gallery-next { right:8px; }
.gallery-counter { text-align:center; margin-top:.8rem; font-size:.78rem; color:var(--text2); letter-spacing:.05em; }

/* quick add — slides up from bottom */
.product-quickadd {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  background:rgba(139,26,42,.96); backdrop-filter:blur(6px);
  padding:.55rem .9rem;
  transform:translateY(100%);
  transition:transform .28s var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .product-card:hover .product-quickadd { transform:translateY(0); }
}
/* En pantallas táctiles no hay :hover — la foto se ve entera al entrar; el primer toque
   revela tallas + añadir (clase .qa-open, puesta por JS al tocar la imagen) */
@media (hover:none), (pointer:coarse), (max-width:960px) {
  .product-card.qa-open .product-quickadd { transform:translateY(0) !important; }
}
.quickadd-colors { display:flex; gap:.4rem; margin-bottom:.4rem; }
.qa-color {
  width:22px; height:22px; border-radius:50%; flex:none; padding:0;
  border:2px solid rgba(255,255,255,.35); cursor:pointer;
  transition:border-color .12s, transform 100ms ease-out;
}
.qa-color:hover  { border-color:rgba(255,255,255,.7); }
.qa-color:active { transform:scale(0.92); }
.qa-color.sel    { border-color:#fff; box-shadow:0 0 0 1px #fff; }
.quickadd-sizes { display:flex; gap:.3rem; margin-bottom:.4rem; }
.qa-size {
  flex:1; min-height:36px; padding:.3rem 0; text-align:center;
  border:1px solid rgba(255,255,255,.22); background:transparent;
  color:rgba(255,255,255,.75); font-size:.6rem; font-weight:400;
  cursor:pointer;
  transition:background .12s, border-color .12s, transform 100ms ease-out;
}
.qa-size:hover  { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.45); }
.qa-size:active { transform:scale(0.96); }
.qa-size.sel    { background:#fff; color:var(--burg); border-color:#fff; }
.qa-btn {
  width:100%; min-height:38px; padding:.45rem;
  background:transparent; border:1px solid rgba(255,255,255,.3);
  color:#fff; font-size:.6rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.45rem;
  transition:background .18s, transform 160ms ease-out;
}
.qa-btn:active { transform:scale(0.97); }
@media (hover:hover) and (pointer:fine) { .qa-btn:hover { background:rgba(255,255,255,.14); } }
.qa-btn svg { width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2; }

.product-info {
  padding:1rem 1.1rem 1.2rem;
  border-top:.5px solid var(--border2);
}
.product-category {
  font-size:.57rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text2); /* sube de --muted a --text2 para más contraste */
}
.product-name {
  font-family:var(--serif); font-size:1rem; font-weight:700;
  display:flex; align-items:baseline; justify-content:space-between; gap:.5rem;
  white-space:nowrap; overflow:hidden;
  margin:.2rem 0 .1rem;
}
.product-name-text { overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.product-price {
  color:var(--burg); font-family:var(--italic); font-style:italic;
  font-size:1rem; white-space:nowrap; flex-shrink:0; font-weight:400;
}
.product-price-old { text-decoration:line-through; color:var(--muted); font-size:.78rem; font-style:normal; margin-right:.3rem; }

/* ── CATEGORIES STRIP ─────────────────────────────────────── */
.cat-strip {
  background:#13110D; border-bottom:.5px solid var(--border2);
  padding:.8rem 3.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.cat-strip::-webkit-scrollbar { display:none; }
.cat-inner { display:flex; gap:.5rem; width:100%; min-width:max-content; }
.cat-pill {
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  flex:1 1 0; min-width:150px;
  min-height:38px; padding:.45rem 1.3rem;
  border:1px solid var(--border2); background:transparent; color:var(--text2);
  font-family:var(--sans); font-size:.6rem; font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap; cursor:pointer; text-decoration:none;
  transition:background .2s var(--ease-out), border-color .2s, color .2s, transform 140ms ease-out, box-shadow .2s;
}
.cat-pill:active { transform:scale(0.97); }
@media (hover:hover) and (pointer:fine) {
  .cat-pill:hover {
    background:var(--panel2); border-color:rgba(158,28,44,.35);
    color:var(--text); box-shadow:0 0 0 1px rgba(158,28,44,.10) inset;
  }
}
.cat-pill.active {
  background:var(--burg); border-color:var(--burg); color:#fff;
  box-shadow:0 4px 16px rgba(139,26,42,.3);
}
.cat-pill.active::after {
  content:''; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background:var(--gold);
}

/* ── Filtrar / Ordenar ───────────────────────────────────── */
.cat-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 3.5rem; background:#0f0d0a; border-bottom:.5px solid var(--border2);
}
.ct-filter {
  display:flex; align-items:center; gap:.55rem;
  background:none; border:none; color:var(--text2); cursor:pointer;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:0; transition:color .2s;
}
.ct-filter:hover { color:var(--text); }
.ct-filter svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.6; }
.ct-filter .ct-chev { width:11px; height:11px; }
.ct-filter.has-filters { color:var(--gold); }
.ct-filter-wrap { position:relative; }
.ct-filter-count {
  background:var(--gold); color:#141210; font-size:.62rem; font-weight:700;
  min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  padding:0 .2rem;
}
.ct-filter-panel {
  position:absolute; top:calc(100% + 1rem); left:0; z-index:20;
  width:280px; background:var(--panel); border:.5px solid var(--border2);
  box-shadow:0 20px 50px rgba(0,0,0,.5); border-radius:4px; padding:1.4rem;
  opacity:0; pointer-events:none; transform:translateY(-8px);
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.ct-filter-panel.show { opacity:1; pointer-events:all; transform:translateY(0); }
.ctf-group { margin-bottom:1.2rem; }
.ctf-label {
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text2); margin-bottom:.7rem;
}
.ctf-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.ctf-chip {
  background:var(--panel2); border:1px solid var(--border2); color:var(--text2);
  font-size:.72rem; padding:.4rem .8rem; border-radius:100px; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.ctf-chip.sel { background:var(--burg); border-color:var(--burg); color:#fff; }
.ctf-check {
  display:flex; align-items:center; gap:.6rem; font-size:.78rem; color:var(--text2);
  cursor:pointer; margin-bottom:1.2rem;
}
.ctf-check input { width:auto; accent-color:var(--burg); cursor:pointer; }
.ctf-actions { display:flex; justify-content:flex-end; border-top:.5px solid var(--border2); padding-top:1rem; }
.ctf-clear {
  background:none; border:none; color:var(--gold); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer; text-decoration:underline;
}
.cat-filtered-empty {
  text-align:center; color:var(--muted);
  font-size:.85rem; padding:3rem 1rem;
}
@media (max-width:640px) {
  .ct-filter-panel { width:calc(100vw - 2.4rem); left:-1.2rem; }
}
.ct-sort { display:flex; align-items:center; gap:.7rem; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text2); }
.ct-sort select {
  background:transparent; border:none; color:var(--text);
  font-family:var(--sans); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; outline:none;
}
.ct-sort select option { background:var(--panel); color:var(--text); }
@media (max-width:960px) {
  .cat-toolbar { padding:.5rem 1.4rem; margin-top:.3rem; }
  .ct-sort span { display:none; }
  .ct-filter, .ct-sort select { font-size:.66rem; }
}
.cat-pill svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.5; flex-shrink:0; opacity:.75; }
.cat-pill-icon { display:flex; align-items:center; font-size:.85rem; line-height:1; }

/* ── BESTSELLERS (HORIZONTAL SCROLL) ─────────────────────── */
.bestsellers {
  padding:5.5rem 0 5.5rem;
  background:#0C0A07;
  border-top:.5px solid rgba(158,28,44,.2);
}
.bestsellers-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:2.5rem; gap:2rem; padding:0 3.5rem;
}
.bs-scroll-wrap {
  overflow:hidden;
  padding:0 0 2rem;
  cursor:default;
}
.bs-track {
  display:flex; gap:1.1rem; width:max-content;
  animation:bsAutoScroll 36s linear infinite;
  will-change:transform;
}
.bs-scroll-wrap:hover .bs-track { animation-play-state:paused; }
@keyframes bsAutoScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
.bs-track .product-card { width:260px; flex-shrink:0; }
.bs-track .product-img { aspect-ratio:4/5; }

/* ── STATS ROW ────────────────────────────────────────────── */
.stats {
  background:var(--burg);
  padding:2.5rem 3.5rem;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:.5px solid rgba(255,240,200,.06);
  border-bottom:.5px solid rgba(0,0,0,.2);
}
.stat-item { text-align:center; padding:0 1.5rem; position:relative; }
.stat-item + .stat-item::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:44px; background:rgba(255,255,255,.18);
}
.stat-num {
  font-family:var(--serif); font-size:2.8rem; font-weight:900;
  color:#fff; line-height:1;
}
.stat-label {
  font-size:.6rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.58); margin-top:.4rem;
}

/* ── STORY ────────────────────────────────────────────────── */
.story {
  padding:8rem 3.5rem;
  background:#13110D;
  border-top:.5px solid var(--border2);
  position:relative; overflow:hidden;
}
.story-inner {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:8rem; align-items:center;
}
/* deco: escudo + anillos giratorios */
.story-deco { position:relative; height:480px; }
.story-shield {
  position:absolute; inset:0; display:grid; place-items:center; z-index:2;
}
.story-shield img {
  width:200px; opacity:.94;
  filter:drop-shadow(0 0 60px rgba(139,26,42,.38));
  animation:breathe 7s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce) { .story-shield img { animation:none; } }
.story-ring {
  position:absolute; inset:0; margin:auto;
  width:290px; height:290px;
  border:1px solid rgba(139,26,42,.14); border-radius:50%;
  animation:spin 45s linear infinite;
}
.story-ring::before {
  content:''; position:absolute; top:-3px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; background:var(--burg); border-radius:50%;
}
.story-ring-2 {
  width:400px; height:400px;
  border-color:rgba(255,255,255,.038);
  animation-duration:65s; animation-direction:reverse;
}
.story-ring-2::before { background:rgba(255,255,255,.25); }
@media (prefers-reduced-motion:reduce) { .story-ring, .story-ring-2 { animation:none; } }
.story-text .section-label { margin-bottom:1.2rem; }
.story-text .section-title { margin-bottom:2rem; }
.story-quote {
  border-left:1.5px solid var(--burg); padding-left:1.5rem;
  font-family:var(--italic); font-style:italic; font-size:1.18rem;
  color:var(--text); line-height:1.65; margin-bottom:2rem;
}
.story-body {
  font-family:var(--italic); font-style:italic; font-size:1.02rem;
  color:var(--text2); line-height:1.95; margin-bottom:1.2rem;
}
.story-body strong { color:var(--text); font-weight:400; font-style:normal; }
.story-link {
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.8rem;
  font-size:.67rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--burg); text-decoration:none;
  transition:gap .3s var(--ease-out);
}
.story-link svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .3s var(--ease-out); }
@media (hover:hover) and (pointer:fine) {
  .story-link:hover { gap:.85rem; }
  .story-link:hover svg { transform:translateX(4px); }
}

/* ── NEWSLETTER ───────────────────────────────────────────── */
.newsletter {
  padding:7rem 3.5rem;
  background:linear-gradient(135deg,#111009 0%,#1A1712 100%);
  border-top:.5px solid rgba(158,28,44,.15);
  position:relative; overflow:hidden;
}
.newsletter::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 80% at 50% 50%, rgba(139,26,42,.06) 0%, transparent 65%);
  pointer-events:none;
}
.nl-inner { position:relative; max-width:600px; margin:0 auto; text-align:center; }
.nl-ornament {
  display:flex; align-items:center; justify-content:center;
  gap:1rem; margin-bottom:2rem;
}
.nl-line { width:45px; height:1px; }
.nl-line:first-child { background:linear-gradient(to right, transparent, var(--burg)); }
.nl-line:last-child  { background:linear-gradient(to left, transparent, var(--burg)); }
.nl-diamond { width:6px; height:6px; background:var(--burg); transform:rotate(45deg); flex-shrink:0; }
.newsletter h2 {
  font-family:var(--serif); font-size:clamp(1.9rem,3.5vw,3.2rem);
  font-weight:700; margin-bottom:.8rem;
}
.newsletter p {
  font-family:var(--italic); font-style:italic;
  color:var(--text2); font-size:1rem; margin-bottom:2.5rem; line-height:1.8;
}
.nl-form { display:flex; max-width:460px; margin:0 auto; }
.nl-form input {
  flex:1; padding:.9rem 1.2rem;
  background:rgba(255,255,255,.04); border:1px solid var(--border); border-right:none;
  color:var(--text); font-family:var(--sans); font-size:.82rem; font-weight:300; outline:none;
  transition:border-color .25s;
  min-height:44px;
}
.nl-form input::placeholder { color:var(--muted); }
.nl-form input:focus { border-color:rgba(139,26,42,.45); }
.nl-form button {
  padding:.9rem 1.8rem; background:var(--burg); border:1px solid var(--burg);
  color:#fff; font-size:.65rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap; min-height:44px;
  transition:background .22s, transform 160ms ease-out;
}
.nl-form button:active { transform:scale(0.97); }
@media (hover:hover) and (pointer:fine) { .nl-form button:hover { background:var(--burg-hi); } }

/* ── FOOTER ───────────────────────────────────────────────── */
footer { padding:4.5rem 3.5rem 2rem; background:#080604; border-top:.5px solid var(--border2); }
.footer-top {
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;
  gap:2.8rem; padding:3rem 0 3.5rem;
  border-bottom:1px solid var(--border); margin-bottom:2rem;
}
/* tira de confianza sobre el footer */
.footer-trust {
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:0; padding:1.6rem 3.5rem;
  border-bottom:1px solid var(--border);
}
.footer-trust .ft-item {
  display:flex; align-items:center; gap:.6rem; padding:.4rem 1.6rem;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text2);
}
.footer-trust .ft-item svg { width:16px; height:16px; stroke:var(--gold); fill:none; stroke-width:1.5; flex-shrink:0; }
.footer-trust .ft-sep { width:1px; height:24px; background:var(--border); }
@media (max-width:960px) { .footer-trust .ft-sep { display:none; } }
.footer-brand .fb-mini {
  display:flex; align-items:center; gap:.5rem; margin-top:1.2rem;
  font-size:.62rem; letter-spacing:.06em; color:var(--muted);
}
.footer-brand .fb-mini svg { width:13px; height:13px; fill:var(--gold); }
.footer-brand img { height:42px; margin-bottom:1rem; filter:brightness(.65); }
.footer-brand p { font-size:.78rem; color:var(--muted); line-height:1.9; max-width:220px; }
.footer-point { display:flex; flex-direction:column; gap:.18rem; margin-top:1.15rem; color:var(--muted); text-decoration:none; font-size:.64rem; line-height:1.35; letter-spacing:.04em; }
.footer-point span { color:var(--gold); text-transform:uppercase; letter-spacing:.15em; font-size:.55rem; }
.footer-point strong { color:var(--text2); font-family:var(--serif); font-size:.88rem; font-weight:700; }
.footer-point small { font-size:.64rem; }
.footer-point:hover strong { color:var(--gold); }
.footer-col h4 {
  font-size:.6rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--text2); margin-bottom:1.2rem;
}
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:.6rem; }
.footer-col a { font-size:.78rem; color:var(--muted); text-decoration:none; transition:color .2s; }
@media (hover:hover) and (pointer:fine) { .footer-col a:hover { color:var(--text); } }
.footer-bottom { display:flex; align-items:center; justify-content:center; }
.footer-copy { font-size:.67rem; color:var(--muted); letter-spacing:.07em; text-align:center; }
.footer-social-bar {
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin-top:1.6rem; padding-top:1.45rem;
  border-top:1px solid rgba(201,165,89,.5);
}
.footer-social-label {
  color:var(--gold); font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.footer-socials { display:flex; gap:.7rem; align-items:center; }
.social-link {
  width:35px; height:35px; border-radius:50%; display:grid; place-items:center;
  color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.14);
  transition:transform 160ms ease-out, filter .2s, box-shadow .2s;
}
.social-link:active { transform:scale(.95); }
@media (hover:hover) and (pointer:fine) { .social-link:hover { transform:translateY(-2px); filter:brightness(1.12); box-shadow:0 6px 16px rgba(0,0,0,.32); } }
.social-link svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.9; }
.social-instagram { background:radial-gradient(circle at 28% 105%,#ffd776 0 15%,#f75b45 35%,#c13584 63%,#5851db 100%); }
.social-facebook { background:#1877f2; }
.social-youtube { background:#ff0000; }
.social-tiktok { background:#101010; box-shadow:inset 2px 0 #25f4ee,inset -2px 0 #fe2c55; }
.social-x { background:#000; border-color:#737373; }

/* divider */
.divider { display:flex; align-items:center; gap:1.2rem; padding:0 3.5rem; }
.div-line { flex:1; height:.5px; background:var(--border2); }
.div-dot { width:5px; height:5px; background:var(--burg); transform:rotate(45deg); flex-shrink:0; }

/* ── WHATSAPP ─────────────────────────────────────────────── */
.wa-wrap { position:fixed; bottom:2rem; right:2rem; z-index:var(--z-wa); }
.wa-float {
  display:flex; align-items:center; gap:0;
  background:#111; color:#fff; border:1px solid rgba(255,255,255,.08);
  border-radius:50px; text-decoration:none; overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(37,211,102,.12);
  transition:box-shadow .35s var(--ease-out), border-color .35s, transform 160ms ease-out;
}
.wa-float:active { transform:scale(0.97); }
@media (hover:hover) and (pointer:fine) {
  .wa-float:hover { box-shadow:0 12px 50px rgba(0,0,0,.65), 0 0 0 1px rgba(37,211,102,.35); border-color:rgba(37,211,102,.25); }
}
.wa-icon-wrap {
  width:50px; height:50px; display:grid; place-items:center; flex-shrink:0;
  background:#25D366; position:relative;
}
.wa-pulse {
  position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(37,211,102,.45);
  animation:waPulse 2.5s ease-out infinite;
}
.wa-pulse-2 { animation-delay:.85s; }
@media (prefers-reduced-motion:reduce) { .wa-pulse, .wa-pulse-2 { animation:none; } }
.wa-icon-wrap svg { width:21px; height:21px; fill:white; position:relative; z-index:1; }
.wa-text {
  max-width:0; overflow:hidden; white-space:nowrap;
  transition:max-width .38s var(--ease-out), padding .38s var(--ease-out);
  padding:0;
}
@media (hover:hover) and (pointer:fine) {
  .wa-float:hover .wa-text { max-width:180px; padding:0 1.2rem 0 .8rem; }
}
.wa-text strong { display:block; font-size:.73rem; font-weight:500; letter-spacing:.06em; color:#fff; line-height:1.3; }
.wa-text small  { display:block; font-size:.6rem; font-weight:300; color:rgba(255,255,255,.48); letter-spacing:.04em; }

/* ── POPUP ────────────────────────────────────────────────── */
.popup-backdrop {
  position:fixed; inset:0; z-index:var(--z-pop);
  background:rgba(0,0,0,.72); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
  opacity:0; transition:opacity .4s var(--ease-out);
  pointer-events:none;
}
.popup-backdrop.show { opacity:1; pointer-events:all; }
.popup {
  position:relative; width:100%; max-width:500px;
  background:var(--panel);
  border:1px solid rgba(139,26,42,.25);
  box-shadow:0 40px 100px rgba(0,0,0,.75), 0 0 0 1px rgba(139,26,42,.12);
  overflow:hidden;
  transform:scale(.94) translateY(18px);
  transition:transform .45s var(--ease-out);
}
.popup-backdrop.show .popup { transform:scale(1) translateY(0); }
.popup-stripe {
  height:3px;
  background:linear-gradient(to right, var(--teal), var(--burg), var(--gold), var(--burg), var(--teal));
}
.popup-ribbon {
  position:absolute; top:20px; right:-26px;
  background:var(--gold); color:var(--black);
  font-size:.5rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:.3rem 2.5rem; transform:rotate(35deg);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.popup-inner { padding:2.5rem 2.8rem 2.2rem; }
.popup-logo {
  display:flex; align-items:center; justify-content:center; gap:.65rem; margin-bottom:1.8rem;
}
.popup-logo img { height:34px; object-fit:contain; }
.popup-logo span {
  font-family:var(--serif); font-size:.67rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--muted);
}
.popup-ornament {
  display:flex; align-items:center; gap:.9rem; margin-bottom:1.6rem;
}
.pop-line { flex:1; height:1px; }
.pop-line:first-child { background:linear-gradient(to right, transparent, rgba(139,26,42,.38)); }
.pop-line:last-child  { background:linear-gradient(to left, transparent, rgba(139,26,42,.38)); }
.pop-diamond { width:5px; height:5px; background:var(--burg); transform:rotate(45deg); flex-shrink:0; }
.popup-discount { text-align:center; margin-bottom:1.5rem; }
.popup-number {
  font-family:var(--serif); font-size:clamp(4.5rem,12vw,6.5rem); font-weight:900;
  line-height:.9; letter-spacing:-.03em;
  background:linear-gradient(135deg, var(--burg) 0%, #c4374a 50%, var(--gold) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.popup-pct {
  font-family:var(--serif); font-size:2.6rem; font-weight:700;
  background:linear-gradient(135deg, var(--burg), var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.popup-tagline {
  font-family:var(--italic); font-style:italic; font-size:1.05rem;
  color:var(--text2); margin-top:.5rem; letter-spacing:.04em;
}
.popup-code-wrap {
  display:flex; align-items:center; justify-content:center;
  gap:.7rem; margin:1.3rem 0;
}
.popup-code-label { font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.popup-code {
  font-family:var(--serif); font-size:1.05rem; font-weight:700; letter-spacing:.2em;
  color:var(--gold); background:var(--gold-lo); border:1px dashed rgba(201,168,76,.28);
  padding:.38rem 1rem; cursor:pointer; user-select:all;
  transition:background .18s, transform 120ms ease-out;
}
.popup-code:active { transform:scale(0.97); }
@media (hover:hover) and (pointer:fine) { .popup-code:hover { background:rgba(201,168,76,.16); } }
.popup-copy-hint { font-size:.58rem; color:var(--muted); letter-spacing:.08em; }
.popup-form { display:flex; margin:1.1rem 0 .7rem; }
.popup-form input {
  flex:1; padding:.82rem 1rem; min-height:44px;
  background:rgba(255,255,255,.04); border:1px solid var(--border); border-right:none;
  color:var(--text); font-family:var(--sans); font-size:.82rem; font-weight:300; outline:none;
  transition:border-color .25s;
}
.popup-form input::placeholder { color:var(--muted); }
.popup-form input:focus { border-color:rgba(139,26,42,.45); }
.popup-form button {
  padding:.82rem 1.4rem; min-height:44px;
  background:var(--burg); border:1px solid var(--burg); color:#fff;
  font-size:.63rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap;
  transition:background .2s, transform 160ms ease-out;
}
.popup-form button:active { transform:scale(0.97); }
@media (hover:hover) and (pointer:fine) { .popup-form button:hover { background:var(--burg-hi); } }
.popup-small { text-align:center; font-size:.6rem; color:var(--muted); letter-spacing:.08em; }
.popup-close {
  position:absolute; top:.85rem; right:.85rem;
  width:34px; height:34px; display:grid; place-items:center;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  cursor:pointer; color:var(--muted);
  transition:background .2s, color .2s, transform 160ms ease-out;
}
.popup-close:active { transform:scale(0.93); }
@media (hover:hover) and (pointer:fine) { .popup-close:hover { background:rgba(255,255,255,.1); color:var(--text); } }
.popup-close svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }

/* ── KEYFRAMES ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
/* per-line hero reveal — sube desde bajo el clip */
@keyframes hlReveal {
  from { transform:translateY(106%); }
  to   { transform:translateY(0); }
}
/* label / section label */
@keyframes lineGrow {
  from { transform:scaleX(0); transform-origin:left; }
  to   { transform:scaleX(1); transform-origin:left; }
}
@keyframes marquee {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
@keyframes breathe {
  0%, 100% { transform:scale(1);     filter:drop-shadow(0 0 40px rgba(139,26,42,.22)); }
  50%       { transform:scale(1.04); filter:drop-shadow(0 0 72px rgba(139,26,42,.42)); }
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes waPulse {
  0%   { transform:scale(1);   opacity:.65; }
  70%  { transform:scale(1.7); opacity:0; }
  100% { transform:scale(1.7); opacity:0; }
}
/* count-up pulse al llegar */
@keyframes numPop {
  0%   { transform:scale(1); }
  50%  { transform:scale(1.06); }
  100% { transform:scale(1); }
}
.stat-num.popped { animation:numPop .4s var(--ease-out); }
@media (prefers-reduced-motion:reduce) {
  .hl-i, .hero-eyebrow, .hero-sub, .hero-actions { animation:none !important; opacity:1 !important; transform:none !important; }
  .reveal, .reveal-title, .reveal-card, .reveal-label { opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
  .btn-primary::before { display:none; }
}

/* ── SCROLL REVEAL ────────────────────────────────────────── */

/* base: fade + slide */
.reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity .72s var(--ease-out), transform .72s var(--ease-out);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* Títulos: antes usaba clip-path para el efecto de "emerger desde abajo", pero eso
   hacía que el navegador calculara mal si el título estaba en pantalla — el
   IntersectionObserver nunca lo detectaba y el título se quedaba invisible para
   siempre (bug real, confirmado: "Vestir la memoria" y varios títulos más nunca
   aparecían). Mismo efecto (fundido + subida) que el resto de .reveal, sin clip-path. */
.reveal-title {
  opacity:0;
  transform:translateY(10px);
  transition:
    opacity .75s var(--ease-out),
    transform .75s var(--ease-out);
}
.reveal-title.visible { opacity:1; transform:translateY(0); }

/* tarjetas: scale + translate, easing Emil */
.reveal-card {
  opacity:0;
  transform:translateY(28px) scale(0.96);
  transition:
    opacity .7s var(--ease-out),
    transform .7s var(--ease-out);
}
.reveal-card.visible { opacity:1; transform:translateY(0) scale(1); }

/* stagger de grid: featured + 2 cols derecha */
.products-grid .reveal-card:nth-child(2) { transition-delay:.07s; }
.products-grid .reveal-card:nth-child(3) { transition-delay:.14s; }
.products-grid .reveal-card:nth-child(4) { transition-delay:.12s; }
.products-grid .reveal-card:nth-child(5) { transition-delay:.19s; }
.products-grid .reveal-card:nth-child(6) { transition-delay:.24s; }

/* label: línea crece + texto aparece */
.reveal-label {
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.reveal-label.visible { opacity:1; transform:translateY(0); }
.reveal-label.visible::before {
  animation:lineGrow .55s var(--ease-out) both;
}

/* stagger manual */
.d1 { transition-delay:.06s; }
.d2 { transition-delay:.12s; }
.d3 { transition-delay:.18s; }
.d4 { transition-delay:.24s; }
.d5 { transition-delay:.30s; }

@media (prefers-reduced-motion:reduce) {
  .reveal, .reveal-title, .reveal-card, .reveal-label {
    opacity:1; transform:none; clip-path:none;
    transition:none;
  }
  .hero-eyebrow, .hero-title, .hero-sub, .hero-actions { animation:none; opacity:1; }
}

/* ══════════════════════════════════════════════════════════
   CRO — NUEVOS COMPONENTES (mismo lenguaje visual)
   ══════════════════════════════════════════════════════════ */

/* ── ANNOUNCE SLIDER (barra superior con crossfade) ──────── */
.announce-slider {
  position:relative; height:1.05rem; overflow:hidden;
  max-width:560px; margin:0 auto;
}
.announce-slide {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  font-size:.63rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.92); white-space:nowrap;
  opacity:0; transform:translateY(7px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
  pointer-events:none;
}
.announce-slide.active { opacity:1; transform:translateY(0); }
.announce-slide .as-ico { font-size:.78rem; letter-spacing:0; }
.announce-slide .as-stars { color:var(--gold); letter-spacing:.08em; }
@media (prefers-reduced-motion:reduce) {
  .announce-slide { transition:opacity .2s linear; transform:none; }
}

/* ── HERO RATING (★ 4.9/5 bajo los botones) ──────────────── */
.hero-rating {
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:1.6rem;
  font-size:.72rem; letter-spacing:.06em; color:rgba(240,232,222,.78);
  opacity:0; animation:fadeUp .8s .8s var(--ease-out) forwards;
}
.hero-rating .hr-stars { display:inline-flex; gap:.12rem; }
.hero-rating .hr-stars svg { width:13px; height:13px; fill:var(--gold); }
.hero-rating strong { font-weight:500; color:var(--text); }

/* ── SECCIÓN "POR QUÉ ELEGIRNOS" ─────────────────────────── */
.why {
  padding:5.5rem 3.5rem;
  background:#0C0A07;
  border-top:.5px solid var(--border2);
  border-bottom:.5px solid var(--border2);
}
.why-inner { max-width:1200px; margin:0 auto; }
.why-head { text-align:center; margin-bottom:3.5rem; }
.why-head .section-label { justify-content:center; }
.why-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.why-block {
  text-align:center; padding:2.2rem 1.4rem;
  border:.5px solid var(--border2); background:transparent;
  transition:border-color .5s var(--ease-out), transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .why-block:hover {
    border-color:rgba(212,170,64,.45);
    transform:translateY(-6px);
    box-shadow:0 20px 50px rgba(0,0,0,.4);
  }
  }
.why-icon {
  width:52px; height:52px; margin:0 auto 1.3rem;
  display:grid; place-items:center;
  border:1px solid var(--burg); border-radius:50%;
  color:var(--burg); position:relative;
  transition:background .4s var(--ease-out), color .4s;
}
.why-icon svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.4; }
@media (hover:hover) and (pointer:fine) {
  .why-block:hover .why-icon { background:var(--burg); color:#fff; }
}
.why-title {
  font-family:var(--serif); font-size:1.05rem; font-weight:700;
  color:var(--text); margin-bottom:.5rem; letter-spacing:.01em;
}
.why-desc {
  font-size:.78rem; line-height:1.7; color:var(--text2);
}

/* ── SHOP THE LOOK (foto lifestyle + hotspots) ───────────── */
.shoplook {
  padding:6rem 3.5rem;
  background:#0C0A07;
  position:relative; overflow:hidden;
}
.shoplook-head { max-width:1280px; margin:0 auto 3rem; text-align:center; }
.shoplook-head .section-label { justify-content:center; }
.sl-stage {
  position:relative; max-width:1280px; margin:0 auto;
  aspect-ratio:16/9; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px var(--border);
}
.sl-stage img {
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  transition:transform 1.2s var(--ease-out);
  will-change:transform;
}
@media (hover:hover) and (pointer:fine) {
  .sl-stage:hover img { transform:scale(1.04); }
}
.sl-stage::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,4,4,.15) 0%, transparent 30%, transparent 60%, rgba(6,4,4,.5) 100%);
}
/* hotspot pulsante */
.sl-hotspot {
  position:absolute; z-index:3;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.9); border:none; cursor:pointer;
  display:grid; place-items:center;
  box-shadow:0 2px 12px rgba(0,0,0,.4);
  transition:transform .3s var(--ease-out), background .3s;
}
.sl-hotspot::before {
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  animation:slPulse 2.4s ease-out infinite;
}
@media (prefers-reduced-motion:reduce) { .sl-hotspot::before { animation:none; } }
.sl-hotspot span {
  width:11px; height:1.5px; background:var(--burg); position:relative;
}
.sl-hotspot span::after {
  content:''; position:absolute; inset:0; margin:auto;
  width:1.5px; height:11px; background:var(--burg);
  transition:opacity .3s;
}
.sl-hotspot:active { transform:scale(0.9); }
@media (hover:hover) and (pointer:fine) {
  .sl-hotspot:hover { background:#fff; transform:scale(1.12); }
}
.sl-hotspot.open { background:var(--burg); }
.sl-hotspot.open span, .sl-hotspot.open span::after { background:#fff; }
.sl-hotspot.open span::after { opacity:0; }
.sl-hotspot.open::before { animation:none; opacity:0; }
@keyframes slPulse {
  0%   { transform:scale(1);   opacity:.7; }
  70%  { transform:scale(2);   opacity:0; }
  100% { transform:scale(2);   opacity:0; }
}
/* tarjeta del hotspot */
.sl-card {
  position:absolute; z-index:4; width:210px;
  background:var(--panel); border:1px solid var(--border2);
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  padding:0; overflow:hidden;
  opacity:0; transform:translateY(8px) scale(.96); pointer-events:none;
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.sl-card.show { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.sl-card-img { aspect-ratio:4/5; overflow:hidden; }
.sl-card-img img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.sl-card-body { padding:.8rem .9rem 1rem; }
.sl-card-cat {
  font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text2);
}
.sl-card-name {
  font-family:var(--serif); font-size:.95rem; font-weight:700; color:var(--text);
  margin:.2rem 0 .55rem; display:flex; justify-content:space-between; align-items:baseline; gap:.5rem;
}
.sl-card-name .sl-price { color:var(--burg); font-family:var(--italic); font-style:italic; }
.sl-card-btn {
  width:100%; min-height:38px; padding:.5rem; cursor:pointer;
  background:var(--burg); border:1px solid var(--burg); color:#fff;
  font-size:.58rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  transition:background .22s, gap .3s var(--ease-out), transform 160ms ease-out;
}
.sl-card-btn:active { transform:scale(0.97); }
@media (hover:hover) and (pointer:fine) { .sl-card-btn:hover { background:var(--burg-hi); gap:.7rem; } }
.sl-card-btn svg { width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2; }
.sl-hint {
  text-align:center; margin-top:1.3rem;
  font-family:var(--italic); font-style:italic; font-size:.85rem; color:var(--muted);
}

/* ── REVIEWS / PRUEBA SOCIAL ─────────────────────────────── */
.reviews {
  padding:6rem 3.5rem;
  background:#13110D;
  border-top:.5px solid var(--border2);
  position:relative; overflow:hidden;
}
.reviews-inner { max-width:1200px; margin:0 auto; }
.reviews-top {
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  text-align:center; margin-bottom:3.5rem;
}
.reviews-bignum {
  font-family:var(--serif); font-weight:900; line-height:1;
  font-size:clamp(3.5rem,7vw,5.5rem); color:var(--text);
  letter-spacing:-.03em;
}
.reviews-bignum em { font-style:italic; font-weight:400; color:var(--burg); }
.reviews-stars { display:inline-flex; gap:.25rem; margin:.9rem 0 .5rem; }
.reviews-stars svg { width:20px; height:20px; fill:var(--gold); }
.reviews-sub {
  font-size:.65rem; letter-spacing:.24em; text-transform:uppercase; color:var(--text2);
}
.reviews-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
.review-card {
  padding:2rem 1.8rem;
  background:transparent; border:.5px solid var(--border2);
  display:flex; flex-direction:column; gap:1rem;
  transition:border-color .5s var(--ease-out), transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .review-card:hover {
    border-color:rgba(212,170,64,.35); transform:translateY(-5px);
    box-shadow:0 18px 46px rgba(0,0,0,.38);
  }
  }
.review-stars { display:inline-flex; gap:.18rem; }
.review-stars svg { width:13px; height:13px; fill:var(--gold); }
.review-text {
  font-family:var(--italic); font-style:italic; font-size:1.05rem;
  line-height:1.7; color:var(--text);
}
.review-author {
  display:flex; align-items:center; gap:.7rem; margin-top:auto;
}
.review-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--burg); color:#fff; display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:.9rem;
}
.review-meta { display:flex; flex-direction:column; }
.review-name { font-size:.78rem; font-weight:500; color:var(--text); letter-spacing:.02em; }
.review-verified {
  font-size:.58rem; letter-spacing:.08em; color:var(--muted);
  display:flex; align-items:center; gap:.3rem;
}
.review-verified svg { width:11px; height:11px; stroke:#3a9d5d; fill:none; stroke-width:2.4; }

/* ── MANIFESTO (lifestyle ancho completo + emoción) ──────── */
.manifesto {
  position:relative; min-height:70vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:6rem 2rem; overflow:hidden;
}
.manifesto-bg {
  position:absolute; inset:-20% 0; z-index:0;
  background-image:url('https://images.unsplash.com/photo-1711523645098-838ccc182d80?w=1800&q=88&auto=format&fit=crop');
  background-size:cover; background-position:center 20%;
  filter:saturate(.3) brightness(.25);
  will-change:transform;
}
.manifesto-bg::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,6,3,.7) 0%, rgba(8,6,3,.3) 45%, rgba(8,6,3,.82) 100%),
    radial-gradient(ellipse 70% 70% at 50% 50%, transparent 35%, rgba(8,6,3,.5) 100%);
}
.manifesto-content { position:relative; z-index:2; max-width:760px; }
.manifesto-content .section-label { justify-content:center; color:var(--gold); }
.manifesto-content .section-label::before { background:var(--gold); }
.manifesto-title {
  font-family:var(--serif); font-weight:900; line-height:1.04;
  font-size:clamp(2.2rem,5vw,4.2rem); letter-spacing:-.02em;
  color:#F4EBE0; text-shadow:0 2px 40px rgba(0,0,0,.6); margin-bottom:1.6rem;
}
.manifesto-title em { font-style:italic; font-weight:400; color:var(--gold); }
.manifesto-text {
  font-family:var(--italic); font-style:italic; font-size:1.2rem;
  color:rgba(244,235,224,.82); line-height:1.8; margin-bottom:2.2rem;
  max-width:560px; margin-left:auto; margin-right:auto;
}
/* botón claro sobre la foto (ambos temas) */
.manifesto .btn-ghost {
  color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.06);
}
@media (hover:hover) and (pointer:fine) {
  .manifesto .btn-ghost:hover { color:#fff; border-color:#fff; background:rgba(255,255,255,.14); }
}

/* ── COMMUNITY / INSTAGRAM ───────────────────────────────── */
.community {
  padding:6rem 3.5rem;
  background:#0C0A07;
  border-top:.5px solid var(--border2);
}
.community-head { text-align:center; margin-bottom:3rem; }
.community-head .section-label { justify-content:center; }
.community-handle {
  font-family:var(--italic); font-style:italic; font-size:1.1rem;
  color:var(--burg); margin-top:.6rem;
}
.ig-grid {
  display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem;
  max-width:1280px; margin:0 auto 2.5rem;
}
.ig-item {
  position:relative; aspect-ratio:1; overflow:hidden; cursor:pointer;
  background:var(--panel2);
}
.ig-item img {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  transition:transform .8s var(--ease-out), filter .5s var(--ease-out);
}
.ig-overlay {
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  opacity:0; transition:opacity .4s var(--ease-out); pointer-events:none;
}
.ig-overlay svg { width:26px; height:26px; stroke:#fff; fill:none; stroke-width:1.6; }
@media (hover:hover) and (pointer:fine) {
  .ig-item:hover img { transform:scale(1.08); filter:brightness(.6); }
  .ig-item:hover .ig-overlay { opacity:1; }
}
.community-cta { text-align:center; }
.btn-ig {
  display:inline-flex; align-items:center; gap:.7rem;
  padding:1rem 2.4rem; cursor:pointer; text-decoration:none;
  background:transparent; border:1px solid var(--border2); color:var(--text);
  font-size:.67rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  transition:border-color .3s var(--ease-out), gap .3s var(--ease-out), background .3s, transform 160ms ease-out;
}
.btn-ig:active { transform:scale(0.97); }
@media (hover:hover) and (pointer:fine) {
  .btn-ig:hover { border-color:var(--burg); gap:1rem; background:var(--burg-lo); }
}
.btn-ig svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; }

/* ── PRODUCT STOCK (escasez discreta) ────────────────────── */
.product-stock {
  display:flex; align-items:center; gap:.45rem;
  margin-top:.5rem; font-size:.58rem; letter-spacing:.08em;
  color:var(--gold);
}
.product-stock::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 0 rgba(212,170,64,.5);
  animation:stockPulse 2s ease-out infinite; flex-shrink:0;
}
@media (prefers-reduced-motion:reduce) { .product-stock::before { animation:none; } }
.product-stock.out { color:#c23a4d; }
.product-stock.out::before { background:#c23a4d; box-shadow:0 0 0 0 rgba(194,58,77,.5); animation:none; }

.feature-stock-msg:empty { display:none; }
.feature-stock-msg {
  display:flex; align-items:center; gap:.5rem;
  margin-top:.6rem; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold);
}
.feature-stock-msg::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 0 rgba(212,170,64,.5);
  animation:stockPulse 2s ease-out infinite; flex-shrink:0;
}
.feature-stock-msg.out { color:#c23a4d; }
.feature-stock-msg.out::before { background:#c23a4d; box-shadow:0 0 0 0 rgba(194,58,77,.5); animation:none; }
@media (prefers-reduced-motion:reduce) { .feature-stock-msg::before { animation:none; } }

#featureAddBtn.is-soldout { opacity:.5; cursor:not-allowed; filter:grayscale(.4); }
.product-card.is-soldout .product-img img { filter:grayscale(.55) brightness(.62); }
.product-soldout-badge {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  background:rgba(10,10,10,.82); color:#fff; font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; padding:.5rem 1.1rem;
  border:1px solid rgba(255,255,255,.25); border-radius:100px; pointer-events:none;
}
@keyframes stockPulse {
  0%   { box-shadow:0 0 0 0 rgba(212,170,64,.5); }
  70%  { box-shadow:0 0 0 6px rgba(212,170,64,0); }
  100% { box-shadow:0 0 0 0 rgba(212,170,64,0); }
}
.product-trust {
  font-size:.55rem; letter-spacing:.08em; color:var(--muted);
  margin-top:.3rem; display:flex; align-items:center; gap:.35rem;
}
.product-trust svg { width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }

/* badge variantes de exclusividad */
.product-badge.ltd  { background:#1a1a1a; color:var(--gold); border:1px solid rgba(212,170,64,.4); }
.product-badge.excl { background:var(--teal); }

/* ── FOCUS VISIBLE (accesibilidad) ───────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible,
.cat-pill:focus-visible, .sl-hotspot:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--gold); outline-offset:2px;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:1024px) {
  .feature-inner { gap:2.5rem; }
  .story-inner { gap:4rem; }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .reviews-grid { grid-template-columns:1fr; max-width:560px; margin:0 auto; }
  .ig-grid { grid-template-columns:repeat(4,1fr); }
}

@media (max-width:960px) {
  header {
    grid-template-columns:auto auto 1fr;
    padding:.9rem 1.4rem;
  }
  header.scrolled { padding:.7rem 1.4rem; }
  nav { display:none; }
  /* Hamburguesa primero, a la izquierda del todo */
  .hamburger { grid-column:1; justify-self:start; }
  /* Logo justo después de la hamburguesa */
  .header-logo { grid-column:2; justify-self:start; margin-left:.9rem; }
  /* Acciones: columna derecha */
  .header-actions { grid-column:3; justify-self:end; gap:.5rem; }
  /* Ocultar búsqueda en móvil */
  .header-actions .hdr-btn[aria-label="Buscar"] { display:none; }
  .hamburger { display:flex; }
  .mobile-nav { display:flex; }

  .hero { padding:6rem 1.5rem 0; }

  .feature { padding:4rem 1.5rem; }
  .feature-inner { grid-template-columns:1fr; gap:2rem; }
  .feature-img-wrap { max-width:420px; }

  .products { padding:4rem 1.5rem; }
  .products-grid { grid-template-columns:1fr 1fr; }
  .pc-wide { grid-row:auto; display:block; }
  .pc-wide .product-img { min-height:0; aspect-ratio:3/4; }

  .cat-strip { padding:.45rem 1.5rem; margin-top:.4rem; }
  .cat-pill { min-height:19px; padding:.08rem 1rem; }
  .bestsellers { padding:4rem 0; }
  .bestsellers-header { padding:0 1.5rem; }
  .bs-scroll-wrap { padding:0 1.5rem; }

  .stats { grid-template-columns:1fr 1fr 1fr; padding:2rem 1.5rem; }
  .stat-num { font-size:2rem; }

  .story { padding:5rem 1.5rem; }
  .story-inner { grid-template-columns:1fr; gap:2.5rem; }
  .story-deco { height:300px; }

  .newsletter { padding:4.5rem 1.5rem; }
  .nl-form { flex-direction:column; }
  .nl-form input { border-right:1px solid var(--border); border-bottom:none; }

  footer { padding:3.5rem 1.5rem 2rem; }
  .footer-top { grid-template-columns:1fr 1fr; gap:2rem; padding-bottom:2rem; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:.7rem; }
  .divider { padding:0 1.5rem; }
  .trust { gap:0; padding:1rem 1.5rem; flex-wrap:wrap; }
  .trust-item { padding:.35rem 1.2rem; }

  /* nuevas secciones */
  .why { padding:4rem 1.5rem; }
  .why-grid { gap:1rem; }
  .shoplook { padding:4rem 1.5rem; }
  .sl-stage { aspect-ratio:4/5; }
  .sl-card { width:170px; }
  .reviews { padding:4rem 1.5rem; }
  .manifesto { min-height:60vh; padding:4.5rem 1.5rem; }
  .community { padding:4rem 1.5rem; }
  .ig-grid { grid-template-columns:repeat(3,1fr); gap:.4rem; }
}

@media (max-width:600px) {
  .products-grid { grid-template-columns:1fr 1fr; }
  .footer-top { grid-template-columns:1fr; }
  .footer-right { flex-wrap:wrap; gap:.8rem; }
  .hero-title { font-size:clamp(2.8rem,11vw,4.5rem); }
  .stats { grid-template-columns:1fr; gap:1.5rem; }
  .stat-item + .stat-item::before { display:none; }
  .stat-item { padding:.8rem 0; border-top:1px solid rgba(255,255,255,.1); }
  .stat-item:first-child { border-top:none; }

  /* nuevas secciones */
  .why-grid { grid-template-columns:1fr; }
  .ig-grid { grid-template-columns:repeat(3,1fr); }
  .sl-card { width:150px; }
  .sl-card-body { padding:.6rem .7rem .8rem; }
  .reviews-bignum { font-size:clamp(3rem,12vw,4rem); }
}

/* ══════════════════════════════════════════════════════════
   DEMO 4 — OVERRIDES + NUEVAS SECCIONES
   Hero editorial split, Collections, Lifestyle, Lookbook
   ══════════════════════════════════════════════════════════ */

/* ── Hero: editorial split 46/54 ─────────────────────────── */
.hero {
  height:var(--hero-h,100vh) !important;
  display:grid !important;
  grid-template-columns:46% 54% !important;
  grid-template-rows:1fr auto !important;
  grid-template-areas:"left right" "bottom bottom" !important;
  padding:0 !important;
  align-items:unset !important;
  flex-direction:unset !important;
}
.hero-bg, .hero-grid { display:none !important; }
.hero-ghost {
  position:absolute !important;
  bottom:-1.5rem !important;
  right:-.5rem !important;
  left:auto !important;
  top:auto !important;
  transform:none;   /* sin !important — JS lo sobreescribe para parallax */
  font-size:clamp(5rem,13vw,15rem) !important;
  z-index:0;
}
.hero-bottom { grid-area:bottom !important; width:100% !important; margin-top:0 !important; }

/* panel izquierdo */
.hero-left {
  grid-area:left;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.5rem,4vw,4.5rem) clamp(2.5rem,4.5vw,5rem);
  background:var(--black);
  position:relative; z-index:2; overflow:hidden;
}
.hero-left::after {
  content:''; position:absolute;
  right:0; top:12%; bottom:12%; width:1px;
  background:linear-gradient(to bottom, transparent, var(--border2) 38%, var(--border2) 62%, transparent);
  pointer-events:none; z-index:3;
}

/* panel derecho */
.hero-right {
  grid-area:right;
  position:relative; overflow:hidden;
}
.hero-photo {
  width:100%; height:100%;
  object-fit:cover; object-position:center 20%;
  animation:heroPan 7s ease-out forwards;
  display:block;
}
@keyframes heroPan {
  from { transform:scale(1.06); }
  to   { transform:scale(1); }
}
@media (prefers-reduced-motion:reduce) { .hero-photo { animation:none; } }
.hero-photo-tag {
  position:absolute; bottom:2.2rem; left:1.8rem;
  display:inline-flex; align-items:center; gap:.75rem;
  background:rgba(6,4,4,.75); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
  padding:.48rem .95rem;
  color:rgba(244,235,224,.9); font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.hero-photo-tag .hpt-price {
  color:var(--gold); font-family:var(--italic); font-style:italic;
  font-size:.88rem; letter-spacing:0;
}
.hero-photo-tag::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--gold); animation:stockPulse 2s ease-out infinite; flex-shrink:0;
}

/* hero-content: alineado a la izquierda */
.hero-content {
  position:relative !important; z-index:2 !important;
  text-align:left !important;
  max-width:none !important; width:100% !important;
  flex:none !important; padding-bottom:0 !important;
  align-items:flex-start !important;
  display:flex; flex-direction:column;
}
.hero .hero-eyebrow { justify-content:flex-start !important; }
.hero .hero-title {
  font-size:clamp(2.1rem,3.2vw,4.4rem) !important;
  text-shadow:none !important;
  text-align:left !important;
}
.hero .hero-sub {
  text-align:left !important;
  text-shadow:none !important;
  margin:0 0 1.1rem !important;
  max-width:400px !important;
  margin-left:0 !important;
}
.hero .hero-actions { justify-content:flex-start !important; }

/* ── Hero checklist ✓ ────────────────────────────────────── */
.hero-checklist {
  list-style:none; margin:0 0 1.4rem;
  display:flex; flex-direction:column; gap:.4rem;
}
.hero-checklist li {
  display:flex; align-items:center; gap:.5rem;
  font-size:.66rem; letter-spacing:.05em; color:var(--text2);
  opacity:0; animation:fadeUp .7s var(--ease-out) both;
}
.hero-checklist li:nth-child(1) { animation-delay:.50s; }
.hero-checklist li:nth-child(2) { animation-delay:.58s; }
.hero-checklist li:nth-child(3) { animation-delay:.66s; }
.hero-checklist li:nth-child(4) { animation-delay:.74s; }
.hero-checklist svg { width:13px; height:13px; stroke:var(--gold); fill:none; stroke-width:2.2; flex-shrink:0; }
@media (prefers-reduced-motion:reduce) { .hero-checklist li { animation:none; opacity:1; } }

/* rating en split layout */
.hero-rating {
  margin-top:1.4rem !important;
  font-size:.69rem !important;
  color:var(--text2) !important;
  animation:fadeUp .8s .85s var(--ease-out) forwards !important;
  opacity:0 !important;
}
.hero-rating .hr-stars svg { width:12px !important; height:12px !important; }

/* ── Products grid uniforme (solo escritorio — en móvil/tablet mandan los breakpoints de 960px y 600px) ── */
@media (min-width:961px) {
  .products-grid { grid-template-columns:repeat(3,1fr) !important; }
  .pc-wide { grid-row:auto !important; display:block !important; }
  .pc-wide .product-img { min-height:0 !important; aspect-ratio:3/4 !important; }
}

/* ── COLLECTIONS ─────────────────────────────────────────── */
.collections {
  padding:5.5rem 3.5rem;
  background:#13110D;
  border-top:.5px solid var(--border2);
  border-bottom:.5px solid var(--border2);
}
.collections-head { text-align:center; margin-bottom:3rem; }
.collections-head .section-label { justify-content:center; }
.col-grid {
  display:grid;
  grid-template-columns:1.15fr 1fr 1.15fr;
  gap:.7rem;
  max-width:1280px; margin:0 auto;
  height:clamp(440px,52vw,600px);
}
.col-card {
  position:relative; overflow:hidden;
  text-decoration:none; display:block;
  background:var(--panel2);
  transition:transform .45s var(--ease-out);
}
.col-card:active { transform:scale(0.99); }
.col-photo { position:absolute; inset:0; }
.col-photo img {
  width:100%; height:100%; object-fit:cover; object-position:center 20%;
  transition:transform .9s var(--ease-out), filter .6s var(--ease-out);
  filter:brightness(.74) saturate(.88);
  display:block;
}
/* object-position por card */
.col-card:nth-child(1) .col-photo img { object-position:center 15%; }
.col-card:nth-child(2) .col-photo img { object-position:center 10%; }
.col-card:nth-child(3) .col-photo img { object-position:center 20%; }
.col-card:nth-child(4) .col-photo img { object-position:center 40%; }
.col-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,4,4,.86) 0%, rgba(6,4,4,.2) 44%, transparent 68%);
}
.col-info {
  position:absolute; bottom:0; left:0; right:0;
  padding:1.5rem 1.2rem 1.3rem; z-index:2;
}
.col-label {
  display:block;
  font-family:var(--serif); font-size:clamp(.9rem,1.45vw,1.35rem);
  font-weight:700; color:#F4EBE0; line-height:1.1; margin-bottom:.2rem;
}
.col-count {
  display:block;
  font-size:.57rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,235,224,.5);
}
.col-arrow {
  display:inline-flex; align-items:center; gap:.35rem;
  margin-top:.55rem;
  font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold);
  transform:translateY(7px); opacity:0;
  transition:transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.col-arrow svg { width:9px; height:9px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .3s var(--ease-out); }
@media (hover:hover) and (pointer:fine) {
  .col-card:hover .col-photo img { transform:scale(1.06); filter:brightness(.86) saturate(1); }
  .col-card:hover .col-arrow { transform:translateY(0); opacity:1; }
  .col-card:hover .col-arrow svg { transform:translateX(3px); }
}

/* ── LIFESTYLE ────────────────────────────────────────────── */
.lifestyle {
  position:relative;
  height:88vh; min-height:520px;
  overflow:hidden; display:flex; align-items:flex-end;
  border-top:.5px solid var(--border2);
}
.lifestyle-photo { position:absolute; inset:0; }
.lifestyle-photo img {
  width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
  filter:brightness(.68) saturate(.82);
  display:block;
}
.lifestyle-photo::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(6,4,4,.8) 0%, rgba(6,4,4,.44) 42%, transparent 72%),
    linear-gradient(to top, rgba(6,4,4,.45) 0%, transparent 52%);
}
.lifestyle-content {
  position:relative; z-index:2;
  padding:4rem 3.5rem 5.5rem;
  max-width:640px;
}
.lifestyle-content .section-label { color:var(--gold); }
.lifestyle-content .section-label::before { background:var(--gold); }
.lifestyle-title {
  font-family:var(--serif); font-weight:900;
  font-size:clamp(2.4rem,5.5vw,5rem);
  letter-spacing:-.03em; line-height:.95;
  color:#F4EBE0; text-shadow:0 2px 32px rgba(0,0,0,.5);
  margin:1rem 0 1.4rem;
}
.lifestyle-title em { font-style:italic; font-weight:400; color:var(--gold); }
.lifestyle-sub {
  font-family:var(--italic); font-style:italic;
  font-size:1.08rem; color:rgba(244,235,224,.78);
  line-height:1.8; margin-bottom:2rem;
}

/* ── LOOKBOOK ─────────────────────────────────────────────── */
.lookbook {
  padding:7rem 3.5rem;
  background:#1A1712;
  border-top:.5px solid var(--border2);
  border-bottom:.5px solid var(--border2);
}
.lookbook-head { text-align:center; margin-bottom:4.5rem; }
.lookbook-head .section-label { justify-content:center; }
.lb-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:3rem; max-width:1160px; margin:0 auto;
}
.lb-photo {
  position:relative; overflow:hidden; aspect-ratio:3/4;
}
.lb-photo img {
  width:100%; height:100%; object-fit:cover; object-position:center 20%;
  transition:transform .9s var(--ease-out); display:block;
}
@media (hover:hover) and (pointer:fine) { .lb-photo:hover img { transform:scale(1.04); } }
.lb-tag {
  position:absolute; top:1.1rem; left:1.1rem;
  font-size:.57rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(244,235,224,.9);
  background:rgba(6,4,4,.52); backdrop-filter:blur(8px);
  padding:.26rem .62rem; border:1px solid rgba(255,255,255,.08);
}
.lb-details {
  padding:1.4rem 0 0;
  border-top:.5px solid var(--border2);
}
.lb-look-title {
  font-family:var(--serif); font-size:1.3rem; font-weight:700;
  letter-spacing:-.01em; margin-bottom:1rem; color:var(--text);
}
.lb-pieces { list-style:none; margin:0 0 1.3rem; }
.lb-pieces li {
  display:flex; align-items:center; justify-content:space-between;
  font-size:.8rem; color:var(--text2);
  padding:.3rem 0; border-bottom:.5px solid var(--border2);
}
.lb-pieces li:last-child { border-bottom:none; }
.lb-piece-price {
  color:var(--burg); font-family:var(--italic); font-style:italic;
  font-size:.9rem; white-space:nowrap;
}
.lb-cta {
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--burg); text-decoration:none;
  transition:gap .3s var(--ease-out);
}
.lb-cta svg { width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .3s var(--ease-out); }
@media (hover:hover) and (pointer:fine) {
  .lb-cta:hover { gap:.75rem; }
  .lb-cta:hover svg { transform:translateX(4px); }
}

/* ── Responsive demo4 ─────────────────────────────────────── */
@media (max-width:1024px) {
  .col-grid { grid-template-columns:repeat(3,1fr); height:340px; }
  .lb-grid { gap:2rem; }
  .hero-photo-tag { display:none; }
}
@media (max-width:960px) {
  /* ── Hero: columna única en AMBOS modos.
       /* ── HERO MÓVIL: imagen de fondo a pantalla completa con texto encima ── */

  /* 1. Hero = pantalla completa, flex columna */
  .hero,
  
  /* 2. Imagen: ocupa TODO el hero como fondo */
  .hero-right {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    aspect-ratio:unset !important;
    z-index:0 !important;
    overflow:hidden !important;
  }
  .hero-photo {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 25% !important;
  }

  /* 3. Gradiente oscuro sobre la imagen — contraste para el texto */
  .hero::after {
    content:'' !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    background:linear-gradient(
      to bottom,
      rgba(4,2,2,.08) 0%,
      rgba(4,2,2,.0)  20%,
      rgba(4,2,2,.55) 55%,
      rgba(4,2,2,.96) 100%
    ) !important;
    pointer-events:none !important;
  }

  /* 4. Texto: encima del gradiente, anclado al fondo */
  .hero-left {
    position:relative !important;
    z-index:2 !important;
    background:transparent !important;
    padding:2.5rem 1.5rem 1.2rem !important;
    overflow:visible !important;
    justify-content:flex-end !important;
    margin-top:auto !important;
  }
  
  /* 5. Forzar colores claros siempre (imagen de fondo oscura) */
  .hero-left .hero-eyebrow { color:rgba(212,170,64,.9) !important; }
  .hero-left .hero-title   { color:#F4EBE0 !important; text-shadow:0 2px 20px rgba(0,0,0,.4) !important; }
  .hero-left .hero-title em { color:var(--burg) !important; }
  .hero-left .hero-sub     { color:rgba(244,235,224,.78) !important; }
  .hero-left .hero-checklist li { color:rgba(244,235,224,.7) !important; }
  .hero-left .hero-checklist svg { stroke:var(--burg) !important; }
  .hero-left .hero-rating  { color:rgba(244,235,224,.65) !important; }
  .hero-left .hero-rating strong { color:#F4EBE0 !important; }

  /* 6. Botones apilados, ancho completo */
  .hero-actions {
    flex-direction:column !important;
    width:100% !important;
    gap:.75rem !important;
    margin-top:1.2rem !important;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    width:100% !important;
    justify-content:center !important;
  }

  /* 7. Checklist: un item por línea */
  .hero-checklist {
    flex-direction:column !important;
    gap:.28rem !important;
    flex-wrap:nowrap !important;
  }
  .hero-checklist li { font-size:.66rem; }
  .hero-rating { font-size:.7rem !important; margin-top:.6rem !important; }

  /* 8. Trust bar: visible sobre el gradiente */
  .hero-bottom {
    position:relative !important;
    z-index:2 !important;
    margin-top:0 !important;
  }

  .hero-ghost    { display:none !important; }
  .hero-left::after { display:none !important; }
  .hero .hero-title { font-size:clamp(2.4rem,8vw,3.5rem) !important; }

  .collections { padding:3.5rem 1.5rem; }
  .col-grid { grid-template-columns:1fr 1fr; height:auto; gap:.5rem; }
  .col-card { aspect-ratio:3/4; }

  .lifestyle { height:75vw; min-height:320px; }
  .lifestyle-content { padding:2.5rem 1.5rem 3.5rem; }
  .lifestyle-title { font-size:clamp(1.9rem,5.5vw,3rem); }

  .lookbook { padding:4.5rem 1.5rem; }
  .lb-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; gap:2.5rem; }
}
@media (max-width:600px) {
  .hero-left { padding:3.5rem 1.2rem 1.8rem; }
  .hero .hero-title { font-size:clamp(2.2rem,9vw,3rem) !important; }
  .hero-sub { font-size:.9rem !important; line-height:1.55 !important; }
  .col-grid { grid-template-columns:1fr 1fr; gap:.4rem; }
  .col-card { aspect-ratio:1/1; }
  .lifestyle { height:90vw; min-height:280px; }
  .lifestyle-title { font-size:clamp(1.7rem,6vw,2.5rem); }
}

/* ══════════════════════════════════════════════════════════
   D4 PREMIUM MOTION SYSTEM
   Apple · Aesop · COS · Nike · Studio Freight level
   ══════════════════════════════════════════════════════════ */

/* ── Ken Burns: 100→108%, lento, deriva vertical ───────── */
@keyframes heroPanD4 {
  from { transform:scale(1)    translateY(0); }
  to   { transform:scale(1.08) translateY(-2%); }
}
.hero-photo {
  animation:heroPanD4 18s cubic-bezier(0.25,0.46,0.45,0.94) forwards !important;
}


/* ── Header glass más pronunciado al hacer scroll ──────── */
header {
  transition:padding .35s var(--ease-out), background .35s var(--ease-out),
             box-shadow .35s var(--ease-out) !important;
}
header.scrolled {
  background:rgba(12,10,7,.92) !important;
  box-shadow:0 .5px 0 rgba(255,240,200,.06), 0 12px 40px rgba(0,0,0,.4) !important;
}

/* ── Scroll reveal: blur sutil + translateY ────────────── */
.reveal, .reveal-card, .reveal-label {
  filter:blur(3px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out),
             filter .78s var(--ease-out) !important;
}
.reveal-title {
  filter:blur(2px);
  transition:opacity .9s var(--ease-out), clip-path .9s var(--ease-out),
             transform .9s var(--ease-out), filter .82s var(--ease-out) !important;
}
.reveal.visible, .reveal-card.visible,
.reveal-label.visible, .reveal-title.visible { filter:blur(0) !important; }

/* ── Títulos: clip por línea + blur ───────────────────── */
@keyframes hlRevealD4 {
  from { transform:translateY(108%); filter:blur(6px); }
  to   { transform:translateY(0);    filter:blur(0); }
}
.hl-i { animation:hlRevealD4 1s var(--ease-out) both !important; }
.hl-1 .hl-i { animation-delay:.22s !important; }
.hl-2 .hl-i { animation-delay:.40s !important; }

/* ── Botones: elevación premium ────────────────────────── */
@media (hover:hover) and (pointer:fine) {
  .btn-primary:hover {
    transform:translateY(-2px) !important;
    box-shadow:0 14px 44px rgba(139,26,44,.55), 0 4px 18px rgba(0,0,0,.28) !important;
  }
  .btn-primary:active { transform:translateY(0) scale(0.97) !important; }
  .btn-ghost:hover    { transform:translateY(-1px); }
  .btn-ghost:active   { transform:scale(0.97); }
}
.btn-ghost {
  transition:color .28s, gap .32s var(--ease-out), border-color .28s,
             background .28s, transform .28s var(--ease-out) !important;
}

/* ── Product card: nombre shift + precio vivo ──────────── */
.product-name-text { transition:transform .45s var(--ease-out); }
.product-price     { transition:color .35s var(--ease-out); }
@media (hover:hover) and (pointer:fine) {
  .product-card:hover .product-name-text { transform:translateX(4px); }
  .product-card:hover .product-price     { color:var(--burg-hi); }
}

/* ── Iconos: microanimaciones ──────────────────────────── */
.trust-item svg  { transition:transform .35s var(--ease-out); }
.hdr-btn svg     { transition:transform .3s var(--ease-out); }
.header-logo img { transition:transform .4s var(--ease-out), filter .4s !important; }
.footer-social   { display:flex; gap:1rem; }
.footer-social a { display:inline-flex; transition:transform .3s var(--ease-out), color .25s; }
@media (hover:hover) and (pointer:fine) {
  .trust-item:hover svg { transform:scale(1.2) rotate(-5deg); }
  .hdr-btn:hover svg    { transform:scale(1.12) rotate(6deg); }
  .header-logo:hover img {
    transform:scale(1.06) rotate(-2deg);
    filter:drop-shadow(0 0 18px rgba(139,26,42,.7)) !important;
  }
  .footer-social a:hover { transform:translateY(-3px); color:var(--gold); }
}

/* ── Parallax: will-change en targets ──────────────────── */
.lifestyle-photo img, .feature-img-wrap img,
.lb-photo img, .col-photo img { will-change:transform; }

/* ── Newsletter: entrada especial ──────────────────────── */
.nl-inner {
  opacity:0; transform:translateY(32px) scale(.985); filter:blur(6px);
  transition:opacity 1.15s var(--ease-out), transform 1.15s var(--ease-out),
             filter 1.05s var(--ease-out);
}
.nl-inner.vis { opacity:1; transform:none; filter:blur(0); }

/* ── Footer: deslizamiento al llegar ───────────────────── */
footer {
  opacity:0; transform:translateY(24px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
footer.vis { opacity:1; transform:none; }

/* ── prefers-reduced-motion: desactivar TODO ───────────── */
@media (prefers-reduced-motion:reduce) {
  .hero-photo                                   { animation:none !important; }
  .hl-i                                         { animation:none !important; filter:none !important; opacity:1 !important; transform:none !important; }
  .reveal,.reveal-title,.reveal-card,.reveal-label { filter:none !important; }
  .nl-inner, footer                             { opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
}

/* ══════════════════════════════════════════════════════════
   D4 LUXURY EDITORIAL — COS · Massimo Dutti · Aesop · Totême
   Paleta papel, textura, anti-card, spacing extremo,
   fotografía dominante, microdetalles, animaciones más lentas
   ══════════════════════════════════════════════════════════ */

/* ── 3. ESPACIADO — nivel Aesop / COS ───────────────────── */
.feature      { padding:clamp(5.5rem,8.5vw,10rem) clamp(2rem,5vw,5.5rem) !important; }
.products     { padding:clamp(6rem,9vw,11rem) clamp(2rem,5vw,5.5rem) clamp(7rem,10vw,12rem) !important; }
.collections  { padding:clamp(6rem,8.5vw,10rem) clamp(2rem,5vw,5.5rem) !important; }
.lifestyle    { margin:0 !important; }
.lookbook     { padding:clamp(7rem,10vw,12rem) clamp(2rem,5vw,5.5rem) !important; }
.lookbook-head{ margin-bottom:5rem !important; }
.reviews      { padding:clamp(6.5rem,9vw,11rem) clamp(2rem,5vw,5.5rem) !important; }
.why          { padding:clamp(6rem,9vw,10rem)  clamp(2rem,5vw,5.5rem) !important; }
.newsletter   { padding:clamp(9rem,12vw,15rem) clamp(2rem,5vw,5.5rem) !important; }
.story        { padding:clamp(9rem,12vw,14rem) clamp(2rem,5vw,5.5rem) !important; }
.manifesto    { padding:clamp(9rem,12vw,14rem) clamp(2rem,5vw,5.5rem) !important; }
.community    { padding:clamp(6rem,8.5vw,10rem) clamp(2rem,5vw,5.5rem) !important; }
.products-header { margin-bottom:4.5rem !important; }
.section-label   { margin-bottom:1.6rem !important; }

/* ── 5. TIPOGRAFÍA editorial ─────────────────────────────── */
.section-label {
  font-size:.55rem !important;
  letter-spacing:.36em !important;
  font-weight:500 !important;
}
.section-label::before { width:22px !important; }

.section-title {
  letter-spacing:-.03em !important;
  line-height:1.04 !important;
}

.hero-sub {
  font-size:1.05rem !important;
  line-height:1.9 !important;
  letter-spacing:.006em !important;
}

/* ── 6. FOTOGRAFÍA más protagonista ─────────────────────── */
.feature-img-wrap { aspect-ratio:3/4 !important; }
.lb-photo { aspect-ratio:2/3 !important; }
@media (min-width:961px) {
  .col-grid { min-height:460px !important; }
}

/* ── 7. MICRODETALLES editoriales ─────────────────────────
   Clases de utilidad: añadir via HTML para separadores,
   etiquetas, y numeraciones de colección                  */
.e-sep {
  display:block; width:100%; height:1px;
  background:linear-gradient(to right, transparent, var(--border2) 12%, var(--border2) 88%, transparent);
  border:none; margin:0;
}
.e-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--sans); font-size:.5rem;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted); opacity:.8;
}
.e-num {
  display:block;
  font-family:var(--italic); font-style:italic;
  font-size:.65rem; letter-spacing:.12em;
  color:var(--muted); opacity:.7;
  margin-bottom:.55rem;
}
.product-category {
  font-size:.52rem !important;
  letter-spacing:.24em !important;
}
.feature-category {
  font-size:.54rem !important;
  letter-spacing:.26em !important;
}
.feature-category::before {
  content:'';
  display:inline-block; width:18px; height:0.5px;
  background:currentColor; opacity:.5;
  margin-right:.5rem; vertical-align:middle;
}

/* ── 8. ANIMACIONES más lentas y cinematográficas ────────── */

/* Ken Burns: 22s, curva más suave */
.hero-photo {
  animation-duration:22s !important;
  animation-timing-function:cubic-bezier(0.06,0.2,0.35,1) !important;
}

/* Reveals: 1.3s */
.reveal, .reveal-card, .reveal-label {
  transition:opacity 1.3s var(--ease-out), transform 1.35s var(--ease-out),
             filter 1.1s var(--ease-out) !important;
}
.reveal-title {
  transition:opacity 1.35s var(--ease-out), clip-path 1.35s var(--ease-out),
             transform 1.35s var(--ease-out), filter 1.15s var(--ease-out) !important;
}

/* Product card hover: más elegante */
.product-card {
  transition:border-color .7s var(--ease-out), transform .8s var(--ease-out),
             box-shadow .8s var(--ease-out), background .7s var(--ease-out) !important;
}
.product-img img {
  transition:transform 1.4s var(--ease-out), filter .9s var(--ease-out) !important;
}
@media (hover:hover) and (pointer:fine) {
  .product-card:hover { transform:translateY(-6px) !important; }
  .product-card:hover .product-img img { transform:scale(1.04) !important; }
}

/* Feature img: más lento */
.feature-img-wrap img { transition:transform 1.5s var(--ease-out) !important; }

/* Col photo */
.col-photo img { transition:transform 1.2s var(--ease-out), filter .7s var(--ease-out) !important; }

/* Lb photo */
.lb-photo img { transition:scale 1.3s var(--ease-out) !important; }

/* Botón: más suave */
.btn-primary {
  transition:background .6s var(--ease-out), gap .65s var(--ease-out),
             transform .22s ease-out, box-shadow .6s var(--ease-out) !important;
}
.btn-primary::before { transition:left .9s var(--ease-out) !important; }

/* ── 9. MODO CLARO: lifestyle más atmosférico ────────────── */

/* ── 10. RESPONSIVE: mantener respiro en tablet ──────────── */
@media (max-width:960px) {
  .feature     { padding:4.5rem 1.5rem !important; }
  .products    { padding:5rem 1.5rem 6rem !important; }
  .lookbook    { padding:5rem 1.5rem !important; }
  .reviews     { padding:5rem 1.5rem !important; }
  .story       { padding:5rem 1.5rem !important; }
  .newsletter  { padding:5.5rem 1.5rem !important; }
  .community   { padding:4.5rem 1.5rem !important; }
  .manifesto   { padding:5.5rem 1.5rem !important; }
  .collections { padding:4.5rem 1.5rem !important; }
}

/* ── MOBILE UX ──────────────────────────────────────────────
   Tap targets 44px+, sin tap highlight, scroll suave,
   fuentes legibles en pantallas pequeñas               */
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { -webkit-tap-highlight-color:transparent; }

/* Touch-action: elimina delay de 300ms en todos los botones y links */
a, button, [role="button"], .product-card, .col-card, .lb-cta,
.qa-btn, .btn-primary, .btn-ghost, .hamburger,
.cart-btn, .wishlist-btn { touch-action:manipulation; }

/* Tap targets mínimos 44px */
.btn-primary, .btn-ghost, .hamburger, .nav-link,
.cart-btn { min-height:44px; }
.qa-btn { min-height:42px; }
.lb-cta { min-height:44px; display:inline-flex; align-items:center; }

/* Producto cards en móvil: padding más ajustado */
@media (max-width:600px) {
  .product-info { padding:.7rem .8rem .9rem; }
  .product-name { flex-direction:column; align-items:flex-start; gap:.15rem; }
  .product-price { font-size:.88rem; }
  .product-name-text { font-size:.78rem; }
  .product-material { font-size:.6rem; }
  .product-img { border-radius:2px; }
  .products-grid { gap:.5rem !important; }

  /* Quick-add: más fácil de pulsar */
  .qa-btn { padding:.55rem .5rem; font-size:.58rem; }

  /* Newsletter: input más grande en móvil */
  .nl-input { font-size:1rem; padding:.9rem 1.1rem; }

  /* Section labels: ocultar número de colección en móvil */
  .section-label span[aria-hidden] { display:none; }

  /* Hero checklist: vertical en móviles muy pequeños */
  .hero-checklist { gap:.2rem .6rem; }
  .hero-checklist li { font-size:.6rem; }

  /* Announce: texto más pequeño */
  .announce-track span { font-size:.56rem; padding:0 1.8rem; }

  /* Footer links más grandes */
  .footer-link { padding:.25rem 0; display:inline-block; }

  /* Lifestyle: centrar contenido */
  .lifestyle-content { max-width:100%; }
  .lifestyle-cta { font-size:.55rem; }

  /* Stats en oscuro: separador mobile */
    }

/* iPhone SE y muy pequeños (≤375px) */
@media (max-width:375px) {
  .hero .hero-title { font-size:clamp(2.2rem,10vw,3rem) !important; }
  .products-grid { grid-template-columns:1fr 1fr !important; gap:.4rem !important; }
  .section-title { font-size:clamp(1.8rem,7vw,3rem) !important; }
}

/* ══════════════════════════════════════════════════════════
   IDENTIDAD ÚNICA — WARM DARK EDITORIAL
   Paleta carbón · grafito · cuero · bronce
   Todas las secciones con personalidad propia
   ══════════════════════════════════════════════════════════ */

/* ── Separadores editoriales 0.5px ──────────────────────── */
.hero-trust    { border-top:.5px solid rgba(255,240,200,.07) !important; }
.footer-top    { border-bottom:.5px solid var(--border2) !important; }
.footer-trust  { border-bottom:.5px solid var(--border2) !important; }
.bestsellers   { border-top:.5px solid rgba(158,28,44,.18) !important; }
.e-sep         { background:linear-gradient(to right,transparent,var(--border2) 12%,var(--border2) 88%,transparent) !important; }

/* ── Tipografía: jerarquía editorial más nítida ──────────── */
.section-label {
  font-size:.54rem !important;
  letter-spacing:.38em !important;
  color:var(--gold) !important;
  opacity:.8 !important;
}
.section-label::before {
  background:var(--gold) !important;
  width:22px !important;
  opacity:.7 !important;
}

/* Números editoriales */
.e-num {
  font-style:italic;
  font-size:.62rem !important;
  letter-spacing:.16em !important;
  color:var(--muted) !important;
  opacity:.75 !important;
}

/* ── Section personality — cada sección diferente ───────── */

/* Hero: imagen fondo — ver mobile overrides */

/* Feature: carbon, más profundo */
.feature {
  background:#0F0D0A !important;
  border-bottom:.5px solid var(--border2) !important;
}

/* Collections: ligeramente levantado */
.collections {
  background:#13110D !important;
}

/* Products: base, más oscuro */
.products {
  background:#0C0A07 !important;
}

/* Bestsellers: carbón con toque de calor */
.bestsellers {
  background:#0E0C09 !important;
}

/* Lifestyle: pantalla completa, sin fondo propio */
.lifestyle { background:transparent !important; }

/* Why: neutro entre secciones */
.why {
  background:#0C0A07 !important;
}

/* Shop the look */
.shoplook {
  background:#0C0A07 !important;
}

/* Reviews: ligeramente diferenciado */
.reviews {
  background:#13110D !important;
}

/* Lookbook: levantado, cuero oscuro */
.lookbook {
  background:#1A1712 !important;
}

/* Story: profundo, diferenciado */
.story {
  background:#13110D !important;
  border-top:.5px solid var(--border2) !important;
}

/* Community: base */
.community {
  background:#0C0A07 !important;
}

/* Newsletter: gradiente cálido */
.newsletter {
  background:linear-gradient(135deg, #111009 0%, #1A1712 60%, #0F0D0A 100%) !important;
  border-top:.5px solid rgba(158,28,44,.15) !important;
}

/* Footer: el más oscuro — cierra la pieza */
footer {
  background:#080604 !important;
  border-top:.5px solid rgba(255,240,200,.06) !important;
}

/* ── Tarjetas producto: fotografías que flotan ───────────── */
.product-card {
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.product-info {
  background:transparent !important;
  border-top:.5px solid rgba(255,240,200,.07) !important;
  padding-top:.85rem !important;
}
.product-category {
  color:var(--muted) !important;
  font-size:.5rem !important;
  letter-spacing:.28em !important;
}
.product-name-text { color:var(--text) !important; }
.product-price { color:var(--gold) !important; font-size:.95rem !important; }

/* Quick-add: más suave, menos abrupto */
.product-quickadd { background:rgba(158,28,44,.9) !important; }

/* ── Por qué elegirnos: bloques sin fondo ────────────────── */
.why-block {
  background:transparent !important;
  border:.5px solid var(--border2) !important;
  box-shadow:none !important;
}

/* ── Reviews: cards sin fondo ────────────────────────────── */
.review-card {
  background:transparent !important;
  border:.5px solid var(--border2) !important;
}

/* ── Manifesto: overlay más oscuro y dramático ───────────── */
.manifesto-bg { filter:saturate(.45) brightness(.35) !important; }

/* ── Animaciones: lentas, cinematográficas ───────────────── */
.hero-photo {
  animation-duration:28s !important;
  animation-timing-function:cubic-bezier(0.04,0.14,0.30,1) !important;
}

.reveal, .reveal-card, .reveal-label {
  transition:opacity 1.4s var(--ease-out), transform 1.5s var(--ease-out),
             filter 1.2s var(--ease-out) !important;
}
.reveal-title {
  transition:opacity 1.45s var(--ease-out), clip-path 1.45s var(--ease-out),
             transform 1.45s var(--ease-out), filter 1.25s var(--ease-out) !important;
}

.product-img img {
  transition:transform 1.6s var(--ease-out), filter 1.0s var(--ease-out) !important;
}
@media (hover:hover) and (pointer:fine) {
  .product-card:hover .product-img img { transform:scale(1.04) !important; }
}
.feature-img-wrap img { transition:transform 1.8s var(--ease-out) !important; }
.col-photo img        { transition:transform 1.4s var(--ease-out), filter .8s var(--ease-out) !important; }
.lb-photo img         { transition:transform 1.5s var(--ease-out) !important; }

/* Botones */
.btn-primary {
  transition:background .55s var(--ease-out), gap .6s var(--ease-out),
             transform .22s ease-out, box-shadow .55s var(--ease-out) !important;
}
.btn-ghost {
  transition:color .4s, gap .45s var(--ease-out), border-color .4s,
             background .4s, transform .4s var(--ease-out) !important;
}

/* Links */
nav a { transition:color .4s var(--ease-out) !important; }
.footer-col a { transition:color .4s !important; }
.story-link { transition:gap .45s var(--ease-out) !important; }

/* ── Lifestyle: más atmosférica ──────────────────────────── */
.lifestyle-photo img { filter:brightness(.62) saturate(.78) !important; }

/* ── Colecciones: desaturación cohesiva ──────────────────── */
.col-photo img { filter:brightness(.72) saturate(.82) !important; }
@media (hover:hover) and (pointer:fine) {
  .col-card:hover .col-photo img { filter:brightness(.9) saturate(.95) !important; }
}

/* ── Image cohesion: warm tint sutil ────────────────────────
   Todas las fotos del site con misma temperatura ──────── */
.feature-img-wrap img,
.lb-photo img,
.ig-item img,
.sl-card-img img {
  filter:saturate(.9) !important;
}

/* ── Header: siempre oscuro cálido ──────────────────────── */
header {
  background:rgba(12,10,7,.97) !important;
  border-bottom:.5px solid rgba(255,240,200,.05) !important;
}
header.scrolled {
  background:rgba(12,10,7,.98) !important;
  box-shadow:0 .5px 0 rgba(255,240,200,.05), 0 16px 48px rgba(0,0,0,.5) !important;
}

/* ── Gradient lift en secciones clave ─────────────────────── */
.feature::before,
.story::before,
.lookbook::before {
  content:'';
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 60% 50% at 85% 30%, rgba(158,28,44,.05) 0%, transparent 60%);
}
.feature,.story,.lookbook { position:relative; }

/* ── Popup: warm dark ────────────────────────────────────── */
.popup { background:var(--panel) !important; border-color:rgba(158,28,44,.18) !important; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width:960px) {
  .feature     { padding:4.5rem 1.5rem !important; }
  .products    { padding:5rem 1.5rem 6rem !important; }
  .lookbook    { padding:5rem 1.5rem !important; }
  .reviews     { padding:5rem 1.5rem !important; }
  .story       { padding:5rem 1.5rem !important; }
  .newsletter  { padding:5.5rem 1.5rem !important; }
  .community   { padding:4.5rem 1.5rem !important; }
  .manifesto   { padding:5.5rem 1.5rem !important; }
  .collections { padding:4.5rem 1.5rem !important; }
  .why         { padding:4rem 1.5rem !important; }
}

/* ── SCREEN READER ACCESSIBILITY ─────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ── CART DRAWER & OVERLAY ──────────────────────────────── */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.cart-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  background: var(--dark);
  border-left: 0.5px solid var(--border2);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
}
.cart-drawer.open {
  transform: translateX(0);
}

.cart-header {
  padding: 1.8rem 2rem;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text);
}
.cart-close {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
  padding: 0.2rem;
}
.cart-close:hover {
  color: var(--text);
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 1.35rem 2rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  scrollbar-width: thin;
  scrollbar-color: var(--panel3) transparent;
}
.cart-items::-webkit-scrollbar {
  width: 4px;
}
#cartSuggestions:empty { display: none; }
.cart-suggest-title {
  font-family: var(--sans);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text2); border-top: .5px solid var(--border2);
  padding-top: .8rem; margin-top: 0;
}
.cart-suggest-row { display: flex; gap: .7rem; margin-top: .65rem; }
.cart-suggest-card {
  flex: 1; min-width: 0; background: var(--panel2); border: .5px solid var(--border2);
  border-radius: 10px; padding: .6rem; text-align: center;
}
.cs-view { display:block; position:relative; width:100%; color:var(--text); cursor:pointer; transition:border-color .2s, transform .2s; }
.cs-view:hover { border-color:rgba(196,160,74,.55); transform:translateY(-2px); }
.cart-suggest-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; margin-bottom: .5rem; display:block; }
.cs-view-label { position:absolute; right:.35rem; bottom:2.1rem; padding:.2rem .4rem; border-radius:99px; background:rgba(12,10,8,.82); border:.5px solid rgba(255,255,255,.22); color:#fff; font-size:.55rem; letter-spacing:.04em; opacity:0; transform:translateY(3px); transition:.2s; }
.cs-view:hover .cs-view-label, .cs-view:focus-visible .cs-view-label { opacity:1; transform:none; }
.cs-name { font-size: .7rem; color: var(--text); line-height: 1.3; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cs-price { font-size: .72rem; color: var(--gold); font-weight: 600; margin-bottom: .5rem; }
.cs-add {
  display:block; width: 100%; text-decoration:none; background: transparent; border: .5px solid rgba(255,255,255,.18); color: var(--text2);
  padding: .4rem .3rem; border-radius: 100px; font-size: .62rem; letter-spacing: .03em; cursor: pointer; transition: .2s;
}
.cs-add:hover { border-color: var(--burg); color: var(--text); background: rgba(139,26,42,.15); }
.cart-items::-webkit-scrollbar-thumb {
  background-color: var(--panel3);
  border-radius: 4px;
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text2);
  font-size: 0.9rem;
  text-align: center;
}

.cart-item {
  display: flex;
  gap: 1.2rem;
  padding-bottom: .85rem;
  border-bottom: 0.5px solid var(--border);
}
.cart-item-img {
  width: 75px;
  height: 90px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--panel);
  border: 0.5px solid var(--border);
}
.cart-item-soldout .cart-item-img {
  filter: grayscale(0.6) brightness(0.65);
}
.cart-item-soldout-label {
  font-size: 0.72rem;
  color: #e88b98;
  margin-bottom: 0.4rem;
}
.cart-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cart-item-name {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.2rem;
}
.cart-item-talla {
  font-size: 0.72rem;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}
.cart-item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-qty-ctrl {
  display: flex;
  align-items: center;
  border: 0.5px solid var(--border2);
  border-radius: 2px;
  background: var(--panel);
}
.cart-qty-btn {
  background: none;
  border: none;
  color: var(--text2);
  width: 28px;
  height: 24px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  transition: color 0.2s, background 0.2s;
}
.cart-qty-btn:hover {
  color: var(--text);
  background: var(--panel2);
}
.cart-qty-val {
  font-size: 0.78rem;
  width: 24px;
  text-align: center;
  font-weight: 400;
  color: var(--text);
}
.cart-item-price {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
}
.cart-item-remove {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.72rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 0.3rem;
  align-self: flex-start;
  transition: color 0.2s;
}
.cart-item-remove:hover {
  color: var(--burg-hi);
}

.cart-footer {
  padding: 1.8rem 2rem;
  background: var(--panel);
  border-top: 0.5px solid var(--border2);
  overflow-y: auto;
  min-height: 0;
  max-height: 62%;
  scrollbar-width: thin;
  scrollbar-color: var(--panel3) transparent;
}
@media (max-width: 720px) {
  .cart-footer { max-height: 56%; }
}

.cart-promo-wrap {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}
.cart-promo-wrap input {
  flex: 1;
  background: var(--dark);
  border: 0.5px solid var(--border2);
  padding: 0.6rem 0.8rem;
  color: var(--text);
  font-size: 0.75rem;
  font-family: var(--sans);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.25s;
}
.cart-promo-wrap input:focus {
  border-color: var(--gold);
}
.cart-promo-wrap button {
  background: var(--panel3);
  border: 0.5px solid var(--border2);
  color: var(--text2);
  padding: 0.6rem 1.2rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s;
}
.cart-promo-wrap button:hover {
  background: var(--panel2);
  color: var(--text);
}

.cart-promo-applied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--burg-lo);
  border: 0.5px solid rgba(158, 28, 44, 0.25);
  padding: 0.5rem 0.8rem;
  border-radius: 2px;
  margin-bottom: 1.2rem;
  font-size: 0.72rem;
  color: var(--text);
}
.cart-promo-applied button {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.2rem;
  transition: color 0.2s;
}
.cart-promo-applied button:hover {
  color: var(--burg-hi);
}

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.cart-summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text2);
}
.cart-discount-line {
  color: var(--gold);
}
.cart-total-line {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--text);
  border-top: 0.5px solid var(--border);
  padding-top: 0.6rem;
  margin-top: 0.3rem;
  font-weight: 700;
}

.cart-checkout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
}

/* ── SIZE GUIDE TRIGGER & CONTAINER ────────────────────── */
.feature-sizes-container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}
.feature-sizes {
  margin: 0 !important; /* override default margin */
}
.size-guide-trigger {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: underline;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0;
  transition: color 0.2s;
}
.size-guide-trigger:hover {
  color: var(--text);
}

/* ── MODALS (SIZE GUIDE) ────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.modal-backdrop.show {
  opacity: 1;
  pointer-events: all;
}

.modal-inner {
  background: var(--dark);
  border: 0.5px solid var(--border2);
  width: 100%;
  max-width: 520px;
  border-radius: 4px;
  padding: 2.2rem;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  transform: translateY(20px);
  transition: transform 0.4s var(--ease-out);
}
.modal-backdrop.show .modal-inner {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
  padding: 0.2rem;
}
.modal-close:hover {
  color: var(--text);
}

.modal-header {
  margin-bottom: 1.8rem;
}
.modal-title {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.modal-subtitle {
  font-size: 0.78rem;
  color: var(--text2);
}

.size-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.82rem;
}
.size-table th, .size-table td {
  padding: 0.8rem 1rem;
  text-align: left;
  border-bottom: 0.5px solid var(--border);
}
.size-table th {
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-lo);
}
.size-table td {
  color: var(--text2);
}
.size-table tr:hover td {
  color: var(--text);
  background: rgba(255, 255, 255, 0.01);
}
.size-help {
  background: var(--panel);
  border-left: 2px solid var(--gold);
  padding: 1rem 1.2rem;
  font-size: 0.72rem;
  color: var(--text2);
  line-height: 1.6;
  border-radius: 0 2px 2px 0;
}

/* ── PRODUCT ACCORDIONS ─────────────────────────────────── */
.feature-accordions {
  margin: 2rem 0;
  border-top: 0.5px solid var(--border);
}
.accordion-item {
  border-bottom: 0.5px solid var(--border);
}
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text);
  cursor: pointer;
  list-style: none; /* remove default triangle */
}
.accordion-header::-webkit-details-marker {
  display: none; /* remove default triangle safari */
}
.accordion-icon {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--gold);
  font-weight: 300;
  transition: transform 0.3s var(--ease-out);
}
.accordion-item[open] .accordion-icon {
  transform: rotate(45deg);
}
.accordion-content {
  padding-bottom: 1.2rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text2);
}
.accordion-content p {
  margin: 0;
}

/* Responsive adjustment for mobile screen guide and drawer */
@media (max-width: 480px) {
  .cart-drawer {
    max-width: 100%;
  }
  .modal-inner {
    padding: 1.5rem;
  }
  .size-table th, .size-table td {
    padding: 0.6rem 0.5rem;
    font-size: 0.75rem;
  }
}

/* ══════════════════════════════════════════════════════════
   HERO LEFT — Video de fondo (oscurecido)
   ══════════════════════════════════════════════════════════ */
.hero-video-container,
.hero-left-bg {
  position:relative;
  overflow:hidden;
}
.hero-left-bg { position:absolute; inset:0; z-index:0; }

.hero-video,
.hero-left-bg video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
}

/* Overlay oscuro sobre el video, tipo Massimo Dutti / Zara / Ralph Lauren.
   Solo escritorio: el texto vive del lado derecho del hero, así que el
   degradado es 270deg (oscuro a la derecha, detrás del texto; claro a la
   izquierda, sobre la escena) — mismos stops/alphas pedidos, en 90deg. En
   móvil el texto va anclado abajo, no a un lado, así que ahí sigue el
   degradado vertical de `.hero::after` (no este). Sin filtros, sin brillo
   reducido por CSS — solo este overlay. */
@media (min-width:961px) {
  .hero-video-container::before,
  .hero-left-bg::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:
      linear-gradient(
        270deg,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.72) 25%,
        rgba(0,0,0,.58) 45%,
        rgba(0,0,0,.35) 70%,
        rgba(0,0,0,.08) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0,0,0,.6) 0%,
        rgba(0,0,0,.15) 8%,
        transparent 16%
      );
  }
}

@media (max-width:960px) {
  .hero-left-bg { display:none; }
}

/* ══════════════════════════════════════════════════════════
   CATÁLOGO — página independiente (catalogo.html)
   ══════════════════════════════════════════════════════════ */
.catalog-hero {
  position:relative; overflow:hidden;
  min-height:510px;
  border-bottom:.5px solid var(--border2);
}
.catalog-hero-media { position:absolute; inset:0; }
.catalog-hero-media img {
  width:100%; height:100%; object-fit:cover; object-position:65% center;
}
/* Todo el degradado vive en UN solo overlay que cubre el hero entero — no hay
   ningún panel ni fondo separado detrás del texto. El texto está escrito
   directamente sobre la foto; este overlay solo baja el brillo donde hace falta
   para que se pueda leer, como en una portada de cine, no como una plantilla con
   una caja gris encima. */
.catalog-hero::before {
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(
      circle at 78% 40%,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.10) 30%,
      rgba(0,0,0,.25) 55%,
      rgba(0,0,0,.45) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.60) 28%,
      rgba(0,0,0,.34) 58%,
      rgba(0,0,0,.16) 78%,
      rgba(0,0,0,.06) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.18) 0%,
      rgba(0,0,0,0) 25%,
      rgba(0,0,0,.10) 100%
    );
}
.catalog-hero-content {
  position:relative; z-index:2;
  max-width:520px;
  padding:2.8rem 3.5rem;
  min-height:510px;
  display:flex; flex-direction:column; justify-content:center;
}
.catalog-crumb {
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text2); margin-bottom:1.4rem;
  display:flex; align-items:center; gap:.5rem;
}
.catalog-crumb a { text-decoration:none; color:var(--text2); transition:color .2s; }
.catalog-crumb a:hover { color:var(--text); }
.catalog-crumb span { opacity:.4; }
.catalog-hero h1 {
  font-family:var(--serif); font-weight:700; color:#fff;
  font-size:clamp(2rem,3.6vw,3rem); line-height:1.1;
  margin-bottom:1.1rem;
}
.catalog-hero h1 em { font-family:var(--italic); font-style:italic; font-weight:400; color:var(--burg-hi); }
.catalog-hero p {
  color:rgba(255,255,255,.82);
  font-size:.95rem; line-height:1.6;
  margin-bottom:1.2rem;
}
.catalog-hero-badges { display:flex; gap:1.8rem; }
.chb {
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem;
  font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.78);
  line-height:1.35;
}
.chb svg { width:20px; height:20px; stroke:var(--gold); fill:none; stroke-width:1.4; flex-shrink:0; }
/* Línea divisoria gris entre insignias, igual que en la portada */
.chb:not(:first-child)::before {
  content:''; position:absolute; left:calc(-.9rem - .5px); top:8%; bottom:8%; width:1px;
  background:rgba(255,255,255,.18);
}
.catalog-hero-scope { position:absolute; bottom:0; left:0; width:1px; height:1px; }

@media (max-width:960px) {
  .catalog-hero { min-height:310px; }
  .catalog-hero-media img { object-position:80% center; }
  /* Antes quedaba centrado dentro del hero, lo que dejaba el título más abajo de
     lo que parecía razonable — ahora arranca pegado arriba. */
  .catalog-hero-content {
    min-height:310px; padding:2.7rem 1.4rem .1rem; max-width:none;
    justify-content:flex-start;
  }
  .catalog-crumb { margin-bottom:.6rem; }
  .catalog-hero h1 { margin-bottom:.5rem; }
  .catalog-hero p { margin-bottom:1rem; }
  /* En una pantalla angosta el texto ocupa casi todo el ancho — hay que oscurecer
     más terreno para que siga leyéndose, sin que se note como una caja. */
  .catalog-hero::before {
    background:
      radial-gradient(circle at 88% 35%, rgba(0,0,0,.05) 0%, rgba(0,0,0,.2) 35%, rgba(0,0,0,.4) 100%),
      linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.68) 45%, rgba(0,0,0,.42) 75%, rgba(0,0,0,.18) 100%),
      linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,.12) 100%);
  }
  .catalog-hero-badges { gap:.9rem; }
  .chb { font-size:.56rem; }
  .chb svg { width:17px; height:17px; }
  /* El separador se calcula a partir de la mitad del gap — en móvil el gap es más
     chico (.9rem) que en escritorio (1.8rem), si no la línea queda descentrada. */
  .chb:not(:first-child)::before { left:calc(-.45rem - .5px); }
  .catalog-hero-badges { justify-content:center; }
  .catalog-hero h1 { font-size:clamp(1.6rem,6vw,2.1rem); }
}

.cat-section { scroll-margin-top:5.2rem; }
.cat-section.is-empty { display:none; }
[data-site-section][hidden] { display:none !important; }
.product-card { scroll-margin-top:6.5rem; }

.cat-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
}
@media (max-width:1024px) {
  .cat-grid { grid-template-columns:repeat(2, 1fr); gap:1.1rem; }
}
@media (max-width:640px) {
  .cat-grid { grid-template-columns:1fr 1fr; gap:.6rem; }
}

.cat-empty-note {
  border:1px dashed var(--border2); border-radius:14px;
  padding:3rem 2rem; text-align:center; color:var(--muted);
  font-size:.85rem;
}

/* ══════════════════════════════════════════════════════════
   HERO — REDISEÑO: video a pantalla completa, texto centrado
   a la derecha (sobrescribe el hero editorial-split anterior,
   solo en escritorio — el móvil sigue con su propio diseño)
   ══════════════════════════════════════════════════════════ */
@media (min-width:961px) {
  .hero {
    display:block !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    grid-template-areas:none !important;
    position:relative !important;
    overflow:hidden !important;
  }
  .hero-left {
    grid-area:unset !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    padding:0 !important;
    background:none !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    z-index:1 !important;
  }
  .hero-left::after { display:none !important; }
  .hero-right { display:none !important; }
  .hero-content {
    text-align:center !important;
    align-items:center !important;
    width:min(540px,42vw) !important;
    margin-right:6vw !important;
    max-width:none !important;
  }
  .hero .hero-eyebrow { justify-content:center !important; }
  .hero .hero-title { text-align:center !important; }
  .hero .hero-sub {
    text-align:center !important;
    margin-left:auto !important; margin-right:auto !important;
    max-width:440px !important;
  }
  .hero .hero-actions { justify-content:center !important; }
  .hero-bottom {
    grid-area:unset !important;
    position:absolute !important; left:0; right:0; bottom:0;
    width:100% !important; margin-top:0 !important;
    z-index:2;
  }
}

.hero-slogan {
  font-family:var(--serif,'Playfair Display',serif);
  font-style:italic;
  font-size:clamp(1.05rem,2vw,1.35rem);
  letter-spacing:.06em;
  font-weight:600;
  margin:6px 0 14px;
  text-align:center;
  background:linear-gradient(100deg,
    #8a6a26 0%, #f3d998 22%, #fff3d6 38%, #C4A04A 52%, #f3d998 68%, #8a6a26 88%, #8a6a26 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 0 22px rgba(196,160,74,.35);
  animation:goldShine 6s linear infinite;
}
@keyframes goldShine {
  0%   { background-position:0% 50%; }
  100% { background-position:-250% 50%; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-slogan { animation:none; background-position:50% 50%; }
}

/* Insignias de confianza (sustituyen al checklist con checks) */
.hero-badges {
  display:flex; gap:2.2rem; justify-content:center; flex-wrap:wrap;
  margin:1.4rem 0 1.8rem;
}
.hero-badge {
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  text-align:center; color:rgba(244,235,224,.8);
  font-size:.64rem; letter-spacing:.05em; text-transform:uppercase; line-height:1.4;
}
.hero-badge svg { width:22px; height:22px; stroke:var(--gold); fill:none; stroke-width:1.5; }
/* Línea divisoria gris entre insignias */
.hero-badge:not(:first-child)::before {
  content:''; position:absolute; left:calc(-1.1rem - .5px); top:8%; bottom:8%; width:1px;
  background:rgba(255,255,255,.18);
}

/* "Nuestra historia" como enlace subrayado, en dorado */
.hero-link-underline {
  display:block; width:100%; margin-top:.9rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; text-align:center;
  color:var(--gold); text-decoration:underline; text-underline-offset:4px;
  transition:color .2s;
}
.hero-link-underline:hover { color:#fff; }

/* "Colección 2026" en dorado vivo, con las rayas a juego, en cualquier pantalla */
.hero-eyebrow {
  color:var(--gold) !important;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  background:var(--gold) !important; opacity:.8 !important;
}

/* Título y subtítulo del hero: a la izquierda en móvil (pedido explícito del
   usuario — sí quiere las insignias como fila centrada de ancho completo). */
@media (max-width:960px) {
  .hero .hero-actions { justify-content:center !important; width:100%; }
  .hero-badges { width:100%; }
}

/* Video del hero a pantalla completa en móvil: se quita la caja negra de
   abajo (icono de envío/pago/etc.) pero se deja el listón de nombres en
   movimiento, ahora transparente sobre el video en vez de con fondo sólido. */
@media (max-width:960px) {
  .hero-trust { display:none !important; }
  .marquee-strip {
    background:transparent !important;
    border-top:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .marquee-item { text-shadow:0 1px 10px rgba(0,0,0,.85); }
}

/* ── Búsqueda (overlay de la lupa) ────────────────────────── */
.search-overlay {
  position:fixed; inset:0; z-index:600;
  background:rgba(6,4,3,.72);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:9vh 1.5rem 0;
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease-out);
}
.search-overlay.show { opacity:1; pointer-events:all; }
.search-box {
  width:100%; max-width:560px;
  background:var(--black); border:1px solid var(--border2); border-radius:12px;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
  overflow:hidden;
}
.search-top {
  display:flex; align-items:center; gap:.8rem;
  padding:1.1rem 1.3rem; border-bottom:1px solid var(--border2);
}
.search-ico { width:18px; height:18px; stroke:var(--gold); fill:none; stroke-width:1.6; flex-shrink:0; }
.search-top input {
  flex:1; background:none; border:none; outline:none;
  color:var(--text); font-family:var(--serif); font-size:1.05rem; letter-spacing:.01em;
}
.search-top input::placeholder { color:rgba(244,235,224,.4); }
.search-close {
  background:none; border:none; color:var(--text2); font-size:1.4rem; line-height:1;
  cursor:pointer; padding:0 .2rem;
}
.search-results { max-height:60vh; overflow-y:auto; padding:.5rem; }
.search-hint {
  padding:1.4rem 1rem; text-align:center; color:var(--text2); font-size:.82rem;
}
.search-result {
  display:flex; align-items:center; gap:.9rem;
  padding:.6rem .7rem; border-radius:8px; text-decoration:none; color:inherit;
  transition:background .18s;
}
.search-result:hover, .search-result:focus { background:rgba(255,255,255,.05); }
.search-result img {
  width:46px; height:46px; object-fit:cover; border-radius:6px; flex-shrink:0;
  background:var(--panel2);
}
.sr-info { display:flex; flex-direction:column; gap:.15rem; }
.sr-name { font-size:.85rem; color:var(--text); }
.sr-price { font-size:.75rem; color:var(--gold); }

/* Lupa de búsqueda visible en móvil también, a la izquierda de la cesta */
@media (max-width:960px) {
  .header-actions .hdr-btn[aria-label="Buscar"] { display:flex !important; }
}

/* Menú móvil: un poco más de peso y contraste — se veía borroso/pobre en itálica fina */
.mobile-nav a {
  font-weight:500 !important;
  color:var(--text) !important;
  letter-spacing:.01em;
}

/* Logo más grande, en escritorio y en móvil, como en la referencia */
.header-logo img { height:44px !important; width:44px !important; }
.header-logo-name { font-size:.8rem !important; letter-spacing:.24em !important; }
@media (min-width:961px) {
  .header-logo img { height:50px !important; width:50px !important; }
  .header-logo-name { font-size:.85rem !important; letter-spacing:.26em !important; }
  .hero .hero-title { font-size:clamp(2.6rem,4.2vw,5.4rem) !important; }
}

/* El header queda transparente y flota ENCIMA del video (no empuja el hero
   hacia abajo) — el hero sube justo lo que mide el header, para que el video
   se vea detrás del logo y el menú, con solo el degradado dándole contraste. */
.hero { margin-top:calc(-1 * var(--hdr-h, 64px)) !important; }

/* Header transparente arriba del hero — se vuelve sólido al hacer scroll */
header { background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-bottom-color:transparent !important; }
header.scrolled {
  background:rgba(12,10,7,.94) !important;
  backdrop-filter:blur(24px) !important; -webkit-backdrop-filter:blur(24px) !important;
  border-bottom-color:var(--border2) !important;
}

/* ── HERO MÓVIL: el video de fondo ahora ocupa toda la pantalla
   (antes usaba la foto del modelo, que ya no existe). El posicionamiento real
   de .hero/.hero-left en móvil lo controla enforceHeroMobile() en app.js con
   estilos en línea !important — esas ganan siempre a cualquier regla de aquí,
   así que este archivo solo se encarga de mostrar el video y su degradado. */
@media (max-width:960px) {
  .hero-left-bg { display:block !important; filter:brightness(.92) contrast(1.05) saturate(1.05); }
  .hero-left-bg::after {
    content:"";
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(8,6,5,.08) 0%, rgba(8,6,5,.5) 55%, rgba(8,6,5,.86) 100%),
      linear-gradient(180deg, rgba(8,6,5,.55) 0%, transparent 20%, transparent 78%, rgba(8,6,5,.6) 100%);
  }
  .hero::after {
    background:linear-gradient(
      to bottom,
      rgba(4,2,2,.4) 0%,
      rgba(4,2,2,.28) 16%,
      rgba(4,2,2,.5) 42%,
      rgba(4,2,2,.72) 68%,
      rgba(4,2,2,.95) 100%
    ) !important;
  }
}

/* En catalogo.html la pestaña activa ya dice de qué colección se trata — el bloque
   "Colección 2026 / Camisetas históricas" repetía lo mismo y dejaba un hueco negro
   enorme entre la barra de filtros y la primera fila de fotos. */
.cat-section { padding-top:1rem !important; padding-bottom:.8rem !important; }
/* Ya pedías varias veces reducir este hueco — la pestaña activa arriba ya dice de
   qué colección se trata, así que quito del todo el título repetido en vez de
   seguir achicándolo. */
.cat-section .products-header { display:none !important; }
/* El boceto trae 5 prendas por fila en escritorio, no 3. */
.cat-grid { grid-template-columns:repeat(5, 1fr) !important; }
@media (max-width:1200px) { .cat-grid { grid-template-columns:repeat(3, 1fr) !important; } }
@media (max-width:1024px) { .cat-grid { grid-template-columns:repeat(2, 1fr) !important; } }
@media (max-width:640px)  { .cat-grid { grid-template-columns:repeat(2, 1fr) !important; gap:.8rem !important; } }
@media (max-width:960px) { .cat-section { padding-top:.6rem !important; } }

/* ── PREGUNTAS FRECUENTES ─────────────────────────────────── */
.faq {
  padding:7rem 3.5rem;
  background:#0C0A07;
  border-top:.5px solid var(--border2);
}
.faq-inner { max-width:820px; margin:0 auto; }
.faq-heading { text-align:center; margin-bottom:3.5rem; }
.faq-heading p { color:var(--text2); font-size:.95rem; margin-top:.8rem; }
.faq-list { display:flex; flex-direction:column; }
.faq-item {
  border-bottom:.5px solid var(--border2);
}
.faq-item summary {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.5rem 0;
  font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--text);
  cursor:pointer; list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:'+';
  flex-shrink:0;
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:1.3rem; font-weight:300; color:var(--gold);
  transition:transform .3s var(--ease-out);
}
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item summary:hover { color:var(--gold); }
.faq-answer {
  color:var(--text2); font-size:.92rem; line-height:1.7;
  padding:0 0 1.6rem;
  max-width:640px;
}
.faq-answer a { color:var(--gold); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:960px) {
  .faq { padding:4.5rem 1.5rem; }
  .faq-heading { margin-bottom:2.2rem; }
  .faq-item summary { font-size:.95rem; padding:1.2rem 0; }
}

/* ══════════════════════════════════════════════════════════
   CATÁLOGO EDITORIAL — SOLO catalogo.html (todo va scopeado a
   .cat-grid, que no existe en ninguna otra página). No toca hero,
   nav, header, breadcrumb, filtros, orden ni footer — mismos
   colores/tipografía de siempre (--burg/--gold/--serif/--italic).
   ══════════════════════════════════════════════════════════ */

/* Más aire entre tarjetas y entre filas — menos "cuadrícula de tienda" */
.cat-grid { grid-template-columns:repeat(4, 1fr) !important; gap:2.6rem 1.8rem !important; }
@media (max-width:1200px) { .cat-grid { grid-template-columns:repeat(3, 1fr) !important; gap:2.2rem 1.3rem !important; } }
@media (max-width:1024px) { .cat-grid { grid-template-columns:repeat(2, 1fr) !important; gap:2rem 1rem !important; } }
@media (max-width:640px)  { .cat-grid { grid-template-columns:repeat(2, 1fr) !important; gap:1.6rem .8rem !important; } }

/* La ficha respira más: sin línea divisoria, precio más presente */
.cat-grid .product-info { padding:1.15rem 0 0 !important; border-top:none !important; }
.cat-grid .product-name { font-size:1.08rem !important; }
.cat-grid .product-price { font-size:1.08rem !important; color:var(--gold) !important; }
.cat-grid .product-material { margin-top:.4rem !important; }

/* Hover: segunda foto (frontal → espalda) si la prenda tiene una — si no, se ve
   igual que siempre (el zoom suave que ya existía, sin tocarlo). */
.cat-grid .product-img-alt {
  position:absolute; inset:0; opacity:0;
  transition:opacity .6s var(--ease-out);
  object-fit:cover; width:100%; height:100%;
}
@media (hover:hover) and (pointer:fine) {
  .cat-grid .product-card:hover .product-img-alt { opacity:1; }
}

/* Bloques editoriales — rompen la cuadrícula cada pocas prendas (ver app.js,
   IIFE "CATÁLOGO DINÁMICO"). Nunca parecen un banner: mismo fondo, misma
   tipografía serif/dorado que el resto de la marca. */
.editorial-break { grid-column:1 / -1; margin:1.4rem 0 2.2rem; }

/* Bloque "capítulo" — 2 columnas: foto a la izquierda, texto a la derecha sobre
   fondo oscuro (nunca el texto directamente encima de la foto). Más bajo que la
   versión anterior a bandera completa, tal como se pidió. */
.editorial-break .eb-chapter-inner {
  display:grid; grid-template-columns:1.3fr 1fr;
  min-height:420px; background:#0c0a07;
  border-radius:2px; overflow:hidden;
  border:1px solid rgba(196,160,74,.45);
}
.editorial-break .eb-photo { position:relative; width:100%; height:100%; overflow:hidden; }
.editorial-break .eb-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.editorial-break .eb-chapter-text {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  text-align:left; padding:3rem 3.2rem;
}
.editorial-break .eb-chapter-eyebrow {
  display:flex; align-items:center; gap:.8rem;
  font-family:var(--sans); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.3rem;
}
.editorial-break .eb-brand-line { width:24px; height:1px; background:rgba(196,160,74,.5); flex-shrink:0; }
.editorial-break .eb-chapter-line {
  font-family:var(--serif); font-size:clamp(1.9rem, 2.6vw, 2.6rem); line-height:1.2;
  color:var(--text); margin:0 0 1.1rem;
}
.editorial-break .eb-chapter-line em { font-style:italic; font-weight:400; color:var(--burg); }
.editorial-break .eb-chapter-sub {
  font-family:var(--italic); font-style:italic; font-size:.95rem; line-height:1.7;
  color:var(--text2); margin:0 0 1.8rem; max-width:340px;
}
.editorial-break .eb-chapter-link {
  display:inline-flex; align-items:center; gap:.6rem;
  background:none; border:none; cursor:pointer; padding:0;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text); border-bottom:1px solid rgba(237,229,212,.35);
  padding-bottom:.4rem; transition:color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.editorial-break .eb-chapter-link svg {
  width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2;
  transform:rotate(-90deg);
}
@media (hover:hover) and (pointer:fine) {
  .editorial-break .eb-chapter-link:hover { color:var(--gold); border-color:var(--gold); }
}
@media (max-width:760px) {
  .editorial-break .eb-chapter-inner { grid-template-columns:1fr; min-height:0; }
  .editorial-break .eb-photo { height:46vh; min-height:280px; }
  .editorial-break .eb-chapter-text { padding:2.2rem 1.6rem; }
}

/* Bloque "plano" — imagen que ya trae su propia composición/texto incrustado
   (campaña generada aparte), se muestra tal cual, sin overlay ni texto encima. */
.editorial-break .eb-flat img {
  width:100%; height:auto; max-height:78vh; object-fit:cover; display:block; border-radius:2px;
}

/* Cita editorial — "mucho espacio, poco texto"; si lleva foto de fondo, se cierra
   con la misma línea dorada que el bloque "capítulo" (imagen + borde dorado). */
.editorial-break.eb-quote {
  position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:5rem 2rem; min-height:260px;
  overflow:hidden; border-radius:2px;
}
.editorial-break.eb-quote.has-img {
  min-height:380px;
  border:1px solid rgba(196,160,74,.45);
}
.editorial-break.eb-quote > img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.eb-quote-scrim {
  position:absolute; inset:0; z-index:1;
  background:rgba(8,6,3,.58);
}
.editorial-break.eb-quote blockquote {
  position:relative; z-index:2;
  max-width:620px; font-family:var(--italic); font-style:italic; font-size:1.9rem;
  line-height:1.4; color:var(--text); margin:0;
}
.editorial-break.eb-quote cite {
  display:block; margin-top:1.1rem; font-style:normal; font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
@media (max-width:640px) {
  .editorial-break .eb-chapter-line { font-size:1.7rem; }
  .editorial-break.eb-quote { padding:3.5rem 1.5rem; }
  .editorial-break.eb-quote blockquote { font-size:1.25rem; }
}

/* ══════════════════════════════════════════════════════════
   CAMPAÑA EDITORIAL — prenda destacada de la portada (demo4.html,
   #coleccion). Sustituye a la antigua ficha de producto incrustada:
   sin tallas, sin acordeones, sin añadir a cesta — la ficha real
   vive en el catálogo. Misma identidad (--burg/--gold/--serif).
   ══════════════════════════════════════════════════════════ */
.feat-campaign {
  padding:7rem 3.5rem 6rem;
  border-top:.5px solid var(--border2);
}
/* La foto ahora es un único fondo a pantalla completa (no una columna aparte) y
   el texto se superpone encima, anclado a la izquierda — igual que la campaña de
   referencia. Un degradado oscuro a la izquierda garantiza que el texto se lea
   bien sin importar qué haya debajo, y deja la prenda despejada a la derecha. */
.fc-inner {
  position:relative; overflow:hidden; border-radius:2px;
  height:82vh; min-height:560px; max-height:840px;
  max-width:1380px; margin:0 auto;
  display:flex; align-items:center;
}
.fc-media { position:absolute; inset:0; }
.fc-media img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.fc-scrim {
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,6,3,.8) 0%, rgba(8,6,3,.45) 38%, rgba(8,6,3,0) 62%);
}
/* La fotografía entra lentamente (más despacio que el reveal normal del sitio) */
.fc-media.reveal { transform:translateY(0) scale(1.035); transition:opacity 1.5s var(--ease-out), transform 1.9s var(--ease-out); }
.fc-media.reveal.visible { transform:scale(1); }

.fc-content { position:relative; z-index:2; max-width:420px; padding:0 3.5rem; }
.fc-eyebrow {
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.6rem;
}
.fc-title {
  font-family:var(--serif); font-weight:700;
  font-size:clamp(2.8rem, 4.6vw, 4.8rem); line-height:1.05;
  color:var(--text); margin:0 0 1.5rem;
}
.fc-title em { font-family:var(--italic); font-style:italic; font-weight:400; color:var(--gold); }
.fc-desc {
  color:var(--text2); font-size:1.12rem; line-height:1.7;
  margin:0 0 1.8rem;
}
.fc-price {
  font-family:var(--italic); font-style:italic; font-size:1.5rem;
  color:var(--text); margin-bottom:2.4rem;
}
.fc-actions { display:flex; flex-direction:column; align-items:flex-start; gap:1.3rem; }
.fc-link-all {
  color:var(--text2); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:5px; text-decoration-color:rgba(196,160,74,.4);
  transition:color .3s var(--ease-out);
}
.fc-link-all:hover { color:var(--gold); }

/* Cita editorial — muchísimo aire alrededor */
.fc-quote {
  max-width:680px; margin:7rem auto 0; padding:0 1rem;
  text-align:center;
  font-family:var(--italic); font-style:italic;
  font-size:clamp(1.5rem, 2.6vw, 2.2rem); line-height:1.45;
  color:var(--text);
}
.fc-quote em { color:var(--gold); }

/* Tres señas — solo icono + texto, sin tarjetas */
.fc-marks {
  display:flex; justify-content:center; gap:4.5rem;
  margin-top:5rem; flex-wrap:wrap;
}
.fc-mark {
  display:flex; align-items:center; gap:.7rem;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text2);
}
.fc-mark svg {
  width:17px; height:17px; stroke:var(--gold); fill:none;
  stroke-width:1.5; flex-shrink:0;
}

@media (max-width:1024px) {
  .fc-content { max-width:460px; padding:0 2.2rem; }
}
@media (max-width:960px) {
  .feat-campaign { padding:4.5rem 1.5rem 4rem; }
  .fc-inner { height:auto; min-height:70vh; }
  .fc-scrim { background:linear-gradient(90deg, rgba(8,6,3,.88) 0%, rgba(8,6,3,.65) 55%, rgba(8,6,3,.35) 100%); }
  .fc-content { max-width:100%; padding:0 1.6rem; }
  .fc-quote { margin-top:4.5rem; }
  .fc-marks { gap:1.6rem 2.4rem; margin-top:3.2rem; }
}

/* ══════════════════════════════════════════════════════════
   Prenda Destacada en MÓVIL — foto a bandera completa arriba,
   acordeón de detalles (Materiales/Historia/Envíos) y remate
   de marca, siguiendo la maqueta exacta pasada por el usuario.
   Solo aplica en móvil; en escritorio la ficha sigue igual
   (fila de galería con 3 fotos + panel de materiales).
   ══════════════════════════════════════════════════════════ */
.feature-accordions { display:none; }
.feature-signoff {
  display:none;
  flex-direction:column; align-items:center; gap:1rem;
  margin-top:2.2rem; padding-top:2.2rem;
  border-top:.5px solid var(--border2);
  text-align:center;
}
.feature-signoff img { width:30px; opacity:.85; }
.feature-signoff span {
  font-family:var(--italic); font-style:italic;
  font-size:.85rem; color:var(--text2);
}

@media (max-width:960px) {
  /* Foto a bandera completa, por encima del texto */
  .feature-img-wrap {
    order:-1;
    max-width:none; width:calc(100% + 3rem); margin:0 -1.5rem .8rem;
    aspect-ratio:4/5 !important;
    box-shadow:none;
  }
  .feature-img-wrap .feature-badge { display:none; }
  /* La fila de galería (3 fotos + materiales) queda reemplazada por el acordeón de abajo */
  .feature-gallery-row { display:none; }
  .fgr-divider { display:none; }

  /* Reordena el texto para que coincida exactamente con la maqueta:
     categoría → título → divisor → descripción → precio → tallas → cesta → confianza → acordeón → remate */
  .feature-content { display:flex; flex-direction:column; padding-top:0; }
  .feature-category        { order:1; margin-top:0; }
  .feature-name             { order:2; }
  .feature-divider          { order:3; margin-top:.2rem; }
  .feature-desc             { order:4; }
  .feature-price            { order:5; }
  .feature-stock-msg        { order:6; }
  .feature-sizes-container  { order:7; }
  .feature-cta              { order:8; }
  .feature-trust            { order:9; }
  .feature-accordions       { order:10; display:block; }
  .feature-signoff          { order:11; display:flex; }

  .feature-cta .btn-primary { width:100%; justify-content:center; }
}

/* Brillo cinematográfico de la portada */
.hero-light-sweep {
  position:absolute; inset:-45% -80%; z-index:1; pointer-events:none;
  background:linear-gradient(108deg, transparent 43%, rgba(218,181,98,.04) 47%, rgba(255,229,162,.22) 50%, rgba(218,181,98,.04) 53%, transparent 57%);
  transform:translateX(-58%) skewX(-14deg);
  mix-blend-mode:screen;
  animation:heroLightSweep 10s cubic-bezier(.55,.05,.25,1) infinite;
}
@keyframes heroLightSweep {
  0%,18% { transform:translateX(-58%) skewX(-14deg); opacity:0; }
  27% { opacity:1; }
  53% { transform:translateX(58%) skewX(-14deg); opacity:.85; }
  62%,100% { transform:translateX(58%) skewX(-14deg); opacity:0; }
}
@media (prefers-reduced-motion:reduce), (max-width:700px) {
  .hero-light-sweep { display:none; }
}
/* Llegada desde el CTA de la portada */
.feature { scroll-margin-top:5.5rem; }
.feature:target .feature-inner {
  animation:featureArrivalGlow 1.5s ease-out 1;
}
@keyframes featureArrivalGlow {
  0% { filter:drop-shadow(0 0 0 rgba(201,165,89,0)); transform:translateY(10px); }
  35% { filter:drop-shadow(0 0 28px rgba(201,165,89,.22)); transform:translateY(0); }
  100% { filter:drop-shadow(0 0 0 rgba(201,165,89,0)); transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
  .feature:target .feature-inner { animation:none; }
}
.review-avatar-photo{object-fit:cover;display:block}

.gallery-product-actions { margin:1rem 0 .2rem; padding-top:1rem; border-top:.5px solid var(--border2); text-align:center; }
.gallery-product-name { color:var(--text); font-family:var(--serif); font-size:1.05rem; margin-bottom:.85rem; }
.gallery-size-label { color:var(--text2); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.5rem; }
.gallery-sizes { display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; }
.gallery-size { min-width:42px; min-height:36px; padding:.35rem .55rem; border:.5px solid var(--border2); background:var(--panel2); color:var(--text); cursor:pointer; font-size:.72rem; }
.gallery-size.sel { background:var(--burg); border-color:var(--burg); color:#fff; }
.gallery-add { width:100%; margin-top:.8rem; min-height:42px; border:0; background:var(--burg); color:#fff; cursor:pointer; font-weight:600; letter-spacing:.07em; text-transform:uppercase; font-size:.68rem; transition:opacity .2s, transform .2s; }
.gallery-add:disabled { opacity:.45; cursor:not-allowed; }
.gallery-add:not(:disabled):hover { transform:translateY(-1px); }

.cart-shipping-old { color:var(--muted); font-size:.76rem; margin-right:.35rem; }
.cart-shipping-free { color:#69bf95; font-weight:600; }


/* Navegaci?n de tienda: categor?as reales, sin enlaces vac?os. */
.shop-nav{position:relative;display:flex;align-items:center;gap:.2rem}.shop-nav-toggle{appearance:none;border:0;background:transparent;color:var(--muted);font-size:1rem;line-height:1;cursor:pointer;padding:.2rem}.shop-nav-popover{position:absolute;top:calc(100% + 1rem);left:-1.2rem;width:270px;padding:.75rem;background:#15120e;border:1px solid var(--border2);box-shadow:0 18px 42px rgba(0,0,0,.38);z-index:150}.shop-nav-popover[hidden]{display:none}.shop-nav-popover a{display:flex;justify-content:space-between;padding:.62rem .75rem;font-size:.61rem;letter-spacing:.12em}.shop-nav-popover a::after{display:none}.shop-menu-all{color:var(--gold)!important;border-bottom:1px solid var(--border)}.shop-menu-group{padding:.65rem .75rem .35rem}.shop-menu-group>span{display:block;margin-bottom:.26rem;color:var(--gold);font-size:.55rem;text-transform:uppercase;letter-spacing:.16em}.shop-menu-group a{padding:.36rem 0;color:var(--text2)!important;text-transform:none;letter-spacing:.05em}.mobnav-shop{border-bottom:.5px solid var(--border);opacity:0;transform:translateX(16px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}.mobile-nav.open .mobnav-shop{opacity:1;transform:translateX(0);transition-delay:.06s}.mobnav-shop summary{display:flex;align-items:center;gap:.9rem;padding:1rem 0;cursor:pointer;list-style:none}.mobnav-shop summary::-webkit-details-marker{display:none}.mobnav-shop[open] .mobnav-chev{transform:rotate(90deg)}.mobnav-shop-links{padding:0 0 .75rem 2.7rem}.mobnav-shop-links a{opacity:1!important;transform:none!important;padding:.42rem 0;border:0;font-size:.77rem;color:var(--text2)}.mobnav-shop-links .shop-menu-group{padding:.65rem 0 .15rem}.mobnav-shop-links .shop-menu-group>span{font-size:.62rem;color:var(--gold);letter-spacing:.12em}.mobnav-shop-links .shop-menu-group a{font-size:.76rem;padding:.32rem 0;color:var(--muted)}
.nl-consent{display:block;max-width:460px;margin:1rem auto 0;text-align:left;color:var(--muted);font-size:.68rem;line-height:1.5}.nl-consent input{accent-color:var(--burg);margin-right:.45rem}.nl-consent a,.nl-unsubscribe{color:var(--gold)}.nl-status{min-height:1.4em;margin:1rem 0 0!important;font-family:var(--sans)!important;font-size:.76rem!important;color:var(--text2)!important}.nl-status.error{color:#e88b96!important}.nl-unsubscribe{border:0;background:none;font:inherit;font-size:.68rem;text-decoration:underline;cursor:pointer;margin-top:.4rem}.nl-unsubscribe-form{display:flex;gap:.5rem;max-width:460px;margin:1rem auto 0}.nl-unsubscribe-form input{flex:1;min-width:0;padding:.75rem 1rem;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text)}.nl-unsubscribe-form button{padding:.75rem 1rem;border:1px solid var(--gold);background:transparent;color:var(--gold);cursor:pointer;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase}@media(max-width:960px){.shop-nav{display:none}.nl-unsubscribe-form{flex-direction:column}}


/* Pagina Quienes somos */
.about-page{padding-top:72px}.about-hero{min-height:clamp(390px,52vw,620px);display:flex;align-items:flex-end;padding:5rem clamp(1.5rem,8vw,10rem);background:radial-gradient(circle at 78% 28%,rgba(196,160,74,.18),transparent 23%),linear-gradient(115deg,rgba(8,6,4,.98) 14%,rgba(14,11,8,.88) 55%,rgba(48,27,18,.62)),url('img/camisa-ymperium.jpg') center/cover;border-bottom:1px solid var(--border)}.about-hero-inner{max-width:780px}.about-crumb{display:flex;gap:.65rem;color:var(--muted);font-size:.61rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3.2rem}.about-crumb a{color:var(--gold);text-decoration:none}.about-hero h1,.about-intro h2,.about-lines h2,.about-purpose h2,.about-cta h2{font-family:var(--serif);font-weight:400;line-height:.98}.about-hero h1{font-size:clamp(3.1rem,7vw,6.5rem);letter-spacing:-.055em;max-width:760px}.about-hero h1 em,.about-intro h2 em,.about-lines h2 em,.about-purpose h2 em,.about-cta h2 em{color:var(--burg-hi);font-family:var(--italic);font-weight:300}.about-lead{max-width:585px;margin-top:2rem;color:var(--text2);font-family:var(--italic);font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.5}.about-intro{position:relative;display:grid;grid-template-columns:minmax(90px,.48fr) minmax(0,1.2fr);gap:clamp(2rem,8vw,9rem);max-width:1160px;margin:0 auto;padding:clamp(5rem,10vw,10rem) 2rem}.about-intro-mark{font-family:var(--serif);font-size:clamp(8rem,18vw,16rem);line-height:.7;color:transparent;-webkit-text-stroke:1px rgba(196,160,74,.35)}.about-intro h2,.about-lines h2,.about-purpose h2,.about-cta h2{font-size:clamp(2.3rem,4.2vw,4.3rem);letter-spacing:-.045em;margin:.8rem 0 2rem}.about-intro p{max-width:630px;color:var(--text2);font-size:1rem;margin-top:1.15rem}.about-lines{padding:clamp(5rem,9vw,9rem) max(1.5rem,calc((100vw - 1160px)/2));background:linear-gradient(135deg,#15110d,#0d0a07);border-block:1px solid var(--border)}.about-lines-head{max-width:750px;margin-bottom:3rem}.about-line-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--border2)}.about-line-card{min-height:310px;padding:clamp(2rem,4vw,4rem);display:flex;flex-direction:column;background:rgba(255,255,255,.012)}.about-line-card+ .about-line-card{border-left:1px solid var(--border2)}.about-line-card span{color:var(--gold);font-size:.62rem;letter-spacing:.18em}.about-line-card h3{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.6rem);font-weight:400;margin:1.4rem 0 .8rem}.about-line-card p{max-width:410px;color:var(--text2);font-size:.92rem}.about-line-card a{margin-top:auto;padding-top:2rem;color:var(--gold);font-size:.67rem;font-weight:500;letter-spacing:.14em;text-decoration:none;text-transform:uppercase}.about-line-card b{margin-left:.35rem;font-size:1rem}.about-purpose{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(3rem,9vw,10rem);max-width:1160px;margin:0 auto;padding:clamp(5rem,10vw,10rem) 2rem}.about-purpose-copy p{max-width:590px;color:var(--text2);font-family:var(--italic);font-size:1.28rem;line-height:1.58}.about-purpose-list{border-top:1px solid var(--border2);align-self:end}.about-purpose-list div{padding:1.5rem 0;border-bottom:1px solid var(--border);display:grid;gap:.35rem}.about-purpose-list strong{font-family:var(--serif);font-weight:400;font-size:1.35rem}.about-purpose-list span{color:var(--muted);font-size:.82rem}.about-cta{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:clamp(4rem,8vw,7rem) max(1.5rem,calc((100vw - 1160px)/2));background:linear-gradient(110deg,#6c101d,#9e1c2c 62%,#3b1016)}.about-cta h2{margin:.7rem 0 0;font-size:clamp(2rem,4vw,4rem)}.about-cta h2 em{color:#f0d9d6}.about-cta .btn-primary{display:inline-flex;align-items:center;gap:1.6rem;padding:1.1rem 1.5rem;background:#f0e7d8;color:#221611;text-decoration:none;text-transform:uppercase;letter-spacing:.16em;font-size:.66rem;font-weight:600;white-space:nowrap}.about-cta .btn-primary span{font-size:1rem}.about-footer{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;padding:3rem max(1.5rem,calc((100vw - 1160px)/2)) 1.6rem;background:#080604}.about-footer img{width:50px}.about-footer p{max-width:330px;margin-top:.8rem;color:var(--muted);font-size:.78rem}.about-footer nav{display:flex;flex-wrap:wrap;align-content:start;justify-content:flex-end;gap:1rem 1.5rem}.about-footer nav a{color:var(--text2);font-size:.68rem;text-decoration:none}.about-footer small{grid-column:1/-1;padding-top:1.4rem;border-top:1px solid var(--border);color:var(--muted);font-size:.62rem}@media(max-width:760px){.about-page{padding-top:62px}.about-hero{padding:4rem 1.5rem;min-height:470px;background-position:65% center}.about-crumb{margin-bottom:2.1rem}.about-intro,.about-purpose{grid-template-columns:1fr;padding:4.5rem 1.5rem;gap:2rem}.about-intro-mark{font-size:7rem}.about-line-grid{grid-template-columns:1fr}.about-line-card+.about-line-card{border-left:0;border-top:1px solid var(--border2)}.about-lines{padding:4.5rem 1.5rem}.about-line-card{min-height:270px}.about-cta{flex-direction:column;align-items:flex-start;padding:4rem 1.5rem}.about-footer{grid-template-columns:1fr;padding:2.5rem 1.5rem 1.4rem}.about-footer nav{justify-content:flex-start}.about-footer small{grid-column:auto}.about-hero h1{font-size:3.1rem}}


/* Boletin editorial: escritorio a la izquierda, imagen limpia a la derecha. */
#boletin.newsletter{min-height:630px!important;padding:clamp(4.5rem,7vw,7.5rem) clamp(1.5rem,8vw,10rem)!important;display:flex;align-items:center;background:linear-gradient(90deg,rgba(8,7,5,.98) 0%,rgba(8,7,5,.93) 33%,rgba(8,7,5,.48) 61%,rgba(8,7,5,.12) 100%),url('img/newsletter-editorial.png') center/cover no-repeat!important;border-top:1px solid rgba(196,160,74,.35)!important;border-bottom:1px solid rgba(196,160,74,.35)!important}.newsletter::before{display:none!important}#boletin .nl-inner{width:min(100%,510px);max-width:510px;margin:0;text-align:left}#boletin .nl-ornament{justify-content:flex-start;margin:0 0 1.1rem;gap:.8rem}#boletin .nl-line{width:72px;background:linear-gradient(to right,transparent,var(--gold))!important}#boletin .nl-line:last-child{background:linear-gradient(to left,transparent,var(--gold))!important}#boletin .nl-diamond{width:18px;height:18px;background:transparent;border:1px solid var(--gold);transform:rotate(45deg)}#boletin .section-label{margin-bottom:1rem!important;color:var(--gold);font-size:.6rem!important;letter-spacing:.27em!important}#boletin .section-label::before{display:none}#boletin h2{max-width:480px;margin:0 0 1.5rem!important;font-size:clamp(3.3rem,5vw,5.25rem)!important;line-height:.84!important;letter-spacing:-.055em;font-weight:400}#boletin h2 em{display:block;color:var(--burg-hi);font-family:var(--italic);font-weight:300}#boletin p#newsletterText{max-width:450px;margin:0 0 1.55rem!important;color:#c2af93;font-family:var(--italic)!important;font-size:1.18rem!important;line-height:1.45!important}#boletin .nl-form{max-width:500px;margin:0}#boletin .nl-form input{min-height:54px;padding:1rem 1.2rem;background:rgba(6,5,4,.45);border-color:rgba(196,160,74,.35);border-right:0;color:var(--text)}#boletin .nl-form button{min-height:54px;min-width:145px;background:linear-gradient(135deg,#9e1c2c,#7e101d);border-color:#a32a39;font-size:.66rem}#boletin .nl-consent{max-width:500px;margin:.9rem 0 0;padding-left:.1rem;color:#a9987d;text-align:left;font-size:.67rem}#boletin .nl-status{margin:.7rem 0 0!important}#boletin .nl-unsubscribe{display:block;width:100%;margin:1.55rem 0 0;padding-top:1rem;border-top:1px solid rgba(196,160,74,.34);color:var(--gold);text-align:center;font-size:.62rem;letter-spacing:.15em;text-decoration:none;text-transform:uppercase}#boletin .nl-unsubscribe::before,#boletin .nl-unsubscribe::after{content:'-';margin:0 .8rem;color:var(--gold)}#boletin .nl-unsubscribe-form{max-width:500px;margin:1rem 0 0}#boletin .nl-unsubscribe-form input{background:rgba(6,5,4,.5);border-color:rgba(196,160,74,.3)}#boletin .nl-unsubscribe-form button{border-color:var(--gold)}
@media(max-width:760px){#boletin.newsletter{min-height:0!important;padding:4.75rem 1.5rem 4rem!important;justify-content:center;background:linear-gradient(90deg,rgba(8,7,5,.9),rgba(8,7,5,.66)),url('img/newsletter-editorial.png') 62% center/cover no-repeat!important}#boletin .nl-inner{margin:0 auto;text-align:center}#boletin .nl-ornament{justify-content:center}#boletin .nl-line{width:48px}#boletin .section-label{text-align:center}#boletin h2{font-size:clamp(3rem,13vw,4.2rem)!important;line-height:.9!important}#boletin p#newsletterText{margin-left:auto!important;margin-right:auto!important;font-size:1.08rem!important}#boletin .nl-form{width:100%;flex-direction:column}#boletin .nl-form input{width:100%;border-right:1px solid rgba(196,160,74,.35);border-bottom:0;min-height:56px}#boletin .nl-form button{width:100%;min-height:56px}#boletin .nl-consent{margin:.95rem auto 0;text-align:left}#boletin .nl-unsubscribe-form{flex-direction:column;margin-left:auto;margin-right:auto}}


/* Asistente flotante de WhatsApp */
.wa-widget{position:fixed;right:1.65rem;bottom:1.65rem;z-index:var(--z-wa);font-family:var(--sans)}.wa-launch{position:relative;width:56px;height:56px;display:grid;place-items:center;border:1px solid rgba(196,160,74,.42);border-radius:50%;background:#14110d;color:#25d366;box-shadow:0 14px 38px rgba(0,0,0,.55),inset 0 0 0 4px rgba(196,160,74,.05);cursor:pointer;transition:transform .25s var(--ease-out),border-color .25s,background .25s}.wa-launch:hover,.wa-launch:focus-visible{transform:translateY(-2px);border-color:rgba(196,160,74,.8);background:#1b1610;outline:none}.wa-launch:focus-visible,.wa-panel button:focus-visible,.wa-panel a:focus-visible,.wa-invite button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.wa-launch svg{position:relative;width:23px;height:23px;fill:currentColor;z-index:1}.wa-launch-ring{position:absolute;inset:-5px;border:1px solid rgba(37,211,102,.18);border-radius:50%;animation:waAssistantPulse 3.2s ease-out infinite}@keyframes waAssistantPulse{0%,100%{transform:scale(.95);opacity:.35}50%{transform:scale(1.08);opacity:0}}.wa-invite{position:absolute;right:68px;bottom:3px;width:252px;display:flex;align-items:stretch;opacity:0;transform:translateX(8px);pointer-events:none;transition:opacity .28s var(--ease-out),transform .28s var(--ease-out)}.wa-invite.is-visible{opacity:1;transform:none;pointer-events:auto}.wa-invite-open{flex:1;border:1px solid rgba(196,160,74,.2);border-right:0;border-radius:8px 0 0 8px;background:#17130f;color:var(--text);padding:.78rem .9rem;text-align:left;cursor:pointer;box-shadow:0 12px 32px rgba(0,0,0,.34)}.wa-invite-open strong{display:block;font-family:var(--serif);font-weight:400;font-size:.92rem}.wa-invite-open span{display:block;margin-top:.18rem;color:var(--muted);font-size:.61rem}.wa-invite-close{width:31px;border:1px solid rgba(196,160,74,.2);border-radius:0 8px 8px 0;background:#17130f;color:var(--muted);font-size:1.15rem;cursor:pointer}.wa-invite-close:hover{color:var(--text);background:#211911}.wa-panel{position:absolute;right:0;bottom:70px;width:min(370px,calc(100vw - 28px));overflow:hidden;border:1px solid rgba(196,160,74,.25);border-radius:12px;background:#15120e;background-image:radial-gradient(circle at 82% 0,rgba(158,28,44,.12),transparent 34%),radial-gradient(circle at 0 100%,rgba(196,160,74,.07),transparent 32%);box-shadow:0 26px 70px rgba(0,0,0,.68);opacity:0;transform:translateY(12px) scale(.98);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}.wa-panel[hidden]{display:none}.wa-panel.is-open{opacity:1;transform:none}.wa-panel-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem .8rem;border-bottom:1px solid rgba(196,160,74,.16);background:rgba(0,0,0,.2)}.wa-brand{display:flex;align-items:center;gap:.65rem}.wa-brand img{width:31px;height:31px;object-fit:contain}.wa-brand strong{display:block;color:var(--text);font-size:.68rem;letter-spacing:.16em}.wa-brand span{display:block;margin-top:.12rem;color:var(--muted);font-size:.6rem}.wa-panel-close{width:30px;height:30px;border:0;background:transparent;color:var(--text2);font-size:1.45rem;line-height:1;cursor:pointer}.wa-panel-close:hover{color:var(--gold)}.wa-panel-status{padding:.48rem 1rem;color:var(--muted);font-size:.59rem;letter-spacing:.12em;text-transform:uppercase}.wa-panel-status i{display:inline-block;width:6px;height:6px;margin-right:.35rem;border-radius:50%;background:#25d366;box-shadow:0 0 0 3px rgba(37,211,102,.08)}.wa-panel-body{padding:.75rem 1rem 1rem}.wa-greeting{margin:0 0 .22rem;color:var(--gold);font-family:var(--italic);font-size:1.1rem}.wa-panel h2{margin:0 0 1rem;color:var(--text);font-family:var(--serif);font-size:1.55rem;font-weight:400;line-height:1.08}.wa-options{display:grid;gap:.5rem}.wa-options button,.wa-options a{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;border:1px solid rgba(196,160,74,.18);border-radius:6px;background:rgba(255,255,255,.018);color:var(--text2);padding:.7rem .78rem;text-align:left;text-decoration:none;font:400 .72rem/1.3 var(--sans);cursor:pointer;transition:background .22s,border-color .22s,color .22s}.wa-options button span,.wa-options a span{color:var(--gold);font-size:.95rem;transition:transform .22s var(--ease-out)}.wa-options button:hover,.wa-options a:hover{border-color:rgba(196,160,74,.55);background:rgba(158,28,44,.16);color:var(--text)}.wa-options button:hover span,.wa-options a:hover span{transform:translateX(3px)}.wa-result p{margin:0 0 1rem;color:var(--text2);font-family:var(--italic);font-size:1.05rem;line-height:1.45}.wa-continue{width:100%;min-height:49px;border:1px solid #a32a39;border-radius:5px;background:linear-gradient(120deg,#7d121f,#a31d30);color:#fff;font-size:.64rem;font-weight:600;letter-spacing:.15em;cursor:pointer}.wa-continue:hover{background:#b32638}.wa-back{display:block;margin:1rem auto 0;border:0;background:transparent;color:var(--gold);font-size:.62rem;text-decoration:underline;cursor:pointer}.wa-options[hidden],.wa-result[hidden]{display:none}@media(max-width:760px){.wa-widget{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:var(--z-pop)}.wa-launch{width:54px;height:54px}.wa-invite{display:none!important}.wa-panel{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:calc(100vw - 24px);max-width:none;border-radius:13px;transform:translateY(20px) scale(.99);box-shadow:0 24px 70px rgba(0,0,0,.7)}.wa-panel-head{padding:1.05rem 1.05rem .9rem}.wa-panel-body{padding:.9rem 1.05rem 1.1rem}.wa-panel h2{font-size:1.7rem}.wa-options{gap:.6rem}.wa-options button,.wa-options a{min-height:56px;padding:.8rem .9rem;font-size:.78rem}.wa-continue{min-height:56px;font-size:.68rem}}@media(prefers-reduced-motion:reduce){.wa-panel,.wa-invite,.wa-launch,.wa-launch-ring,.wa-options button span,.wa-options a span{animation:none;transition:none}}


/* Catalog controls and WhatsApp assistant refinements (2026-08-11). */
.shop-nav-toggle{display:grid;place-items:center;width:22px;height:22px;padding:0;color:var(--muted)}
.shop-nav-toggle svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .18s var(--ease-out)}
.shop-nav-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.cat-toolbar{gap:1.5rem;min-height:68px;padding:1rem 3.5rem}
.ct-filter{min-height:40px;padding:.5rem .2rem}
.ct-sort{gap:.8rem;white-space:nowrap}
.ct-sort select{min-height:40px;padding:.55rem 2.25rem .55rem .85rem;border:1px solid var(--border2);border-radius:3px;background:var(--panel);color:var(--text);font-size:.66rem}
.ct-sort select:hover,.ct-sort select:focus-visible{border-color:rgba(196,160,74,.58);outline:none}
.product-card[hidden],.cat-filtered-empty[hidden]{display:none!important}
@media(max-width:960px){.cat-toolbar{padding:.75rem 1.4rem;min-height:58px}.ct-sort{margin-left:auto}.ct-sort select{min-height:36px;padding:.45rem .5rem;font-size:.62rem}}
@media(max-width:480px){.cat-toolbar{gap:.65rem;padding:.65rem 1rem}.ct-filter{font-size:.64rem}.ct-sort select{max-width:152px}}

@media(min-width:761px){
  .wa-widget{right:3rem;bottom:2.4rem}
  .wa-launch{width:98px;height:98px;border-color:rgba(205,162,70,.88);background:#17231e;color:#d5aa50;box-shadow:0 16px 38px rgba(0,0,0,.58),0 0 26px rgba(205,162,70,.18),inset 0 0 0 6px rgba(205,162,70,.035)}
  .wa-launch:hover,.wa-launch:focus-visible{background:#1d2a23;border-color:#edc56b;transform:translateY(-2px)}
  .wa-launch svg{width:43px;height:43px}
  .wa-launch-ring{inset:-8px;border-color:rgba(205,162,70,.24);animation:none}
  .wa-invite{right:calc(100% + 28px);bottom:18px;width:min(690px,calc(100vw - 235px));min-height:132px;display:block;overflow:visible;transform:translateX(14px)}
  .wa-invite::after{content:'';position:absolute;right:-18px;bottom:25px;width:34px;height:34px;background:#17130f;border-top:1px solid rgba(205,162,70,.76);border-right:1px solid rgba(205,162,70,.76);transform:rotate(45deg);z-index:-1}
  .wa-invite-open{display:flex;align-items:center;gap:1.8rem;min-height:132px;width:100%;border:1px solid rgba(205,162,70,.76);border-radius:44px;background:#17130f;background-image:radial-gradient(circle at 83% 20%,rgba(196,160,74,.09),transparent 31%);padding:1.4rem 4.7rem 1.4rem 2.6rem;box-shadow:0 18px 45px rgba(0,0,0,.48);text-align:left}
  .wa-invite-open:hover{background-color:#1c1711;border-color:#e1b85f}
  .wa-invite-crest{width:66px;height:66px;object-fit:contain;flex:0 0 auto;filter:sepia(.38) saturate(1.2) brightness(1.25)}
  .wa-invite-divider{display:block!important;width:1px!important;height:62px!important;margin:0!important;background:rgba(205,162,70,.72);flex:0 0 1px}
  .wa-invite-copy{display:block!important;margin:0!important;color:var(--text)!important}
  .wa-invite-copy strong{display:block;font-family:var(--serif);font-size:1.8rem;line-height:1.18;font-weight:400;letter-spacing:0}
  .wa-invite-copy strong em{font-family:var(--italic);font-style:italic;color:#d4a64a}
  .wa-invite-copy small{display:block;margin-top:.52rem;color:var(--muted);font:400 .67rem var(--sans);letter-spacing:.1em}
  .wa-invite-close{position:absolute;right:20px;top:14px;z-index:2;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#d6b16b;font-size:2rem;line-height:1;cursor:pointer}
  .wa-invite-close:hover{background:rgba(196,160,74,.1);color:#f0d08a}
  .wa-panel{bottom:120px}
}
@media(max-width:760px){.wa-launch{background:#17231e;color:#d5aa50;border-color:rgba(205,162,70,.7)}.wa-launch-ring{border-color:rgba(205,162,70,.2);animation:none}}


/* Compact WhatsApp invitation and direct-message composer. */
.wa-compose{display:block;margin:0 0 .85rem}.wa-compose span{display:block;margin:0 0 .42rem;color:var(--gold);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase}.wa-compose textarea{display:block;width:100%;min-height:92px;resize:vertical;border:1px solid rgba(196,160,74,.26);border-radius:5px;background:rgba(255,255,255,.025);color:var(--text);padding:.72rem .78rem;font:400 .8rem/1.45 var(--sans)}.wa-compose textarea::placeholder{color:var(--muted)}.wa-compose textarea:focus{outline:none;border-color:rgba(196,160,74,.68);background:rgba(255,255,255,.04)}.wa-continue:disabled{cursor:not-allowed;opacity:.48}
@media(min-width:761px){.wa-widget{right:1.65rem;bottom:1.65rem}.wa-launch{width:64px;height:64px;box-shadow:0 12px 28px rgba(0,0,0,.52),0 0 16px rgba(205,162,70,.13),inset 0 0 0 4px rgba(205,162,70,.035)}.wa-launch svg{width:29px;height:29px}.wa-launch-ring{inset:-5px}.wa-invite{right:calc(100% + 16px);bottom:0;width:min(390px,calc(100vw - 130px));min-height:80px}.wa-invite::after{right:-11px;bottom:21px;width:22px;height:22px}.wa-invite-open{gap:.9rem;min-height:80px;padding:.9rem 3.2rem .9rem 1.25rem;border-radius:22px}.wa-invite-crest{width:38px;height:38px}.wa-invite-divider{height:38px!important}.wa-invite-copy strong{font-size:1.05rem;line-height:1.2}.wa-invite-copy small{margin-top:.22rem;font-size:.55rem}.wa-invite-close{right:9px;top:7px;width:28px;height:28px;font-size:1.45rem}.wa-panel{bottom:82px}}

.wa-compose[hidden]{display:none!important}


/* One clear product-results view for catalog filtering and sorting. */
.cat-toolbar{position:relative;z-index:60}.ct-filter-panel{z-index:70}.cat-section.is-control-view{display:none!important}.catalog-control-results{padding:2.6rem 3.5rem 4.5rem;background:#0f0d0a}.catalog-control-results-head{display:flex;align-items:baseline;gap:1rem;margin:0 0 2.2rem;padding-bottom:1.1rem;border-bottom:1px solid var(--border2)}.catalog-control-results-head .section-label{margin:0}.catalog-control-results h2{margin:0;color:var(--text);font:400 clamp(1.75rem,3vw,2.6rem)/1 var(--serif)}.catalog-control-results h2 em{color:var(--burg-hi);font-family:var(--italic)}.catalog-control-results p{margin-left:auto;color:var(--text2);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}.catalog-control-empty{display:block!important;width:100%;margin:0!important;padding:3rem 1rem;text-align:center;color:var(--muted)!important}.catalog-control-empty[hidden]{display:none!important}@media(max-width:960px){.catalog-control-results{padding:2rem 1.4rem 3rem}.catalog-control-results-head{align-items:flex-start;flex-wrap:wrap;gap:.65rem}.catalog-control-results p{width:100%;margin:0;font-size:.62rem}}

/* Historia: composicion editorial independiente, basada en las texturas de marca. */
.about-hero{background:linear-gradient(90deg,rgba(7,5,3,.98) 0%,rgba(10,7,4,.91) 47%,rgba(12,8,5,.38) 100%),url('img/about-history-hero.jpg') center/cover}.about-lines{background:linear-gradient(90deg,rgba(12,9,6,.97),rgba(14,10,7,.88)),url('img/about-history-purpose.jpg') center/cover}.about-line-grid{gap:12px;border:0}.about-line-card{min-height:300px;padding:0;display:grid;grid-template-columns:44% 56%;background:rgba(8,6,4,.72);border:1px solid var(--border2);overflow:hidden;transition:border-color .25s ease,transform .25s ease}.about-line-card+.about-line-card{border-left:1px solid var(--border2)}.about-line-card:hover{border-color:rgba(196,160,74,.48);transform:translateY(-2px)}.about-line-visual{min-height:100%;background:center/cover no-repeat;filter:brightness(.74) saturate(.82);transition:filter .3s ease,transform .5s ease}.about-line-card:hover .about-line-visual{filter:brightness(.92) saturate(1);transform:scale(1.025)}.about-line-visual--encamisada{background-image:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.42)),url('img/about-history-collection-a.jpg')}.about-line-visual--ymperium{background-image:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.44)),url('img/about-history-collection-b.jpg')}.about-line-copy{padding:clamp(1.8rem,3.6vw,3.6rem);display:flex;flex-direction:column}.about-line-copy span{color:var(--gold);font-size:.62rem;letter-spacing:.18em}.about-line-copy h3{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.6rem);font-weight:400;margin:1.4rem 0 .8rem}.about-line-copy p{max-width:410px;color:var(--text2);font-size:.92rem}.about-line-copy a{margin-top:auto;padding-top:2rem;color:var(--gold);font-size:.67rem;font-weight:500;letter-spacing:.14em;text-decoration:none;text-transform:uppercase}.about-line-copy b{margin-left:.35rem;font-size:1rem}.about-purpose{background:linear-gradient(90deg,rgba(11,8,5,.94),rgba(11,8,5,.78)),url('img/about-history-purpose.jpg') center/cover}@media(max-width:760px){.about-hero{background-position:66% center}.about-line-grid{gap:14px}.about-line-card{grid-template-columns:1fr;min-height:0}.about-line-visual{min-height:190px}.about-line-card+.about-line-card{border-left:1px solid var(--border2);border-top:1px solid var(--border2)}.about-line-copy{min-height:270px;padding:2rem}}


/* Historia independiente: narrativa editorial seg?n la estructura de marca de ?lvaro. */
.about-origin{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);max-width:1280px;margin:0 auto;padding:clamp(5rem,9vw,9rem) 2rem;gap:clamp(3rem,8vw,8rem);align-items:stretch}.about-origin-visual{min-height:520px;background:linear-gradient(180deg,rgba(8,6,4,.04),rgba(8,6,4,.25)),url('img/about-history-purpose.jpg') center/cover;border:1px solid var(--border2)}.about-origin-copy{align-self:center;max-width:570px}.about-origin h2{font-family:var(--serif);font-size:clamp(2.4rem,4.5vw,4.6rem);font-weight:400;line-height:.98;letter-spacing:-.045em;margin:.8rem 0 2rem}.about-origin h2 em{color:var(--burg-hi);font-family:var(--italic);font-weight:300}.about-origin p{color:var(--text2);font-size:1rem;line-height:1.8;margin-top:1.25rem}.about-origin blockquote{margin-top:2rem;padding:1.3rem 0 1.3rem 1.5rem;border-left:1px solid var(--gold);color:var(--gold);font-family:var(--italic);font-size:1.2rem;line-height:1.5}.about-lines-head p{max-width:650px;color:var(--text2);margin-top:-.8rem}.about-purpose-list div{grid-template-columns:44px 1fr;column-gap:1rem}.about-purpose-list div>span{grid-row:1/3;color:var(--gold);font-size:.62rem;letter-spacing:.14em;padding-top:.35rem}.about-purpose-list small{color:var(--muted);font-size:.82rem}.about-purpose{max-width:none;padding-left:max(2rem,calc((100vw - 1160px)/2));padding-right:max(2rem,calc((100vw - 1160px)/2));border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
@media(max-width:760px){.about-origin{grid-template-columns:1fr;padding:4.5rem 1.5rem;gap:2.5rem}.about-origin-visual{min-height:360px}.about-origin-copy{max-width:none}.about-origin h2{font-size:2.7rem}.about-purpose-list div{grid-template-columns:36px 1fr}}


/* Historia: ritmo final aprobado, sin repetir un bloque introductorio entre portada y colecciones. */
.about-hero{min-height:clamp(470px,58vw,700px);align-items:center;padding-top:clamp(6.5rem,10vw,9rem);background-position:center}
.about-hero-inner{max-width:710px}
.about-lines{padding-top:clamp(4.75rem,7vw,7rem);padding-bottom:clamp(4.75rem,7vw,7rem)}
.about-lines-head{margin-bottom:2.5rem}
.about-purpose{padding-top:clamp(5rem,8vw,7.5rem);padding-bottom:clamp(5rem,8vw,7.5rem);background-position:center}
@media(max-width:760px){.about-hero{min-height:520px;padding-top:6rem;align-items:flex-end}.about-lines{padding-top:4rem;padding-bottom:4rem}.about-purpose{padding-top:4.5rem;padding-bottom:4.5rem}}