/* ── FUENTES AUTOALOJADAS (T46) ──────────────────────────────
   Antes: <link> a fonts.googleapis.com/fonts.gstatic.com en las 16 páginas —
   una petición a un tercero, con la IP del visitante, en CADA carga de
   página, antes de que nadie pudiera aceptar o rechazar nada (el criterio
   de la AEPD y de varios tribunales de la UE es que eso exige consentimiento
   salvo que se autoaloje). Mismos 5 ficheros que servía Google (subconjunto
   "latin", cubre español con tildes/ñ/ü — U+0000-00FF), descargados una vez
   y versionados en el propio repositorio: nunca cambian sin que alguien lo
   note. `font-display: swap` en los cinco, igual que antes. */
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:400 900; font-display:swap; src:url('/fonts/playfair-display-normal.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:italic; font-weight:400; font-display:swap; src:url('/fonts/playfair-display-italic-400.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 400; font-display:swap; src:url('/fonts/cormorant-garamond-normal.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:300 400; font-display:swap; src:url('/fonts/cormorant-garamond-italic.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:300 500; font-display:swap; src:url('/fonts/inter-normal.woff2') format('woff2'); }

/* ── 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;
  min-width:44px; min-height:44px; /* T30: el icono no crece, solo el área táctil real */
}
.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:44px; height:44px; /* T30: era 34px, por debajo del tamaño táctil mínimo */
  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:44px; height:44px; border-radius:50%; /* T30: eran 38px */
  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 — franja de nombres del hero.
   T43: tercera queja del mismo usuario, con captura — la seguía viendo
   oscura y transparente en su Chrome real tras Ctrl+Shift+R, con un
   viewport de ~860px CSS. T35 ya había puesto un fondo sólido con blur SOLO
   por debajo de 960px; por encima de esa anchura seguía esta regla de aquí,
   semi-transparente (`rgba(0,0,0,.5)`) CON `backdrop-filter` — y
   `backdrop-filter` se pinta de forma distinta según GPU/driver/extensión
   del navegador de cada visitante, así que "se ve bien en Chromium de
   pruebas" no garantiza nada. Decisión deliberada, pedida tres veces: fondo
   SÓLIDO, sin `backdrop-filter` en absoluto, en TODOS los anchos — el vídeo
   deja de verse detrás de la franja a cambio de legibilidad garantizada
   siempre, sin depender del renderizado de nadie. */
.marquee-strip {
  background:var(--black);
  border-top:1px solid rgba(196,160,74,.35);
  padding:.85rem 0; overflow:hidden;
}
.marquee-track {
  display:flex; width:max-content;
  animation:marquee 40s linear infinite;
  will-change:transform;
}
/* T78 — coherencia con la cinta de más vendidos (.bs-track), que ya pausaba
   al pasar el ratón: esta franja no lo hacía. */
.marquee-strip:hover .marquee-track { animation-play-state:paused; }
.marquee-item {
  font-family:var(--serif); font-style:italic;
  font-size:1rem; color:var(--text); padding:0 2.2rem;
  white-space:nowrap; letter-spacing:.06em; opacity:1;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.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:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.feature-img-wrap img {
  width:100%; height:100%; object-fit:contain; object-position:center;
}
/* T55: el `transform:scale(1.05)` al pasar el ratón se quitó por completo —
   queja directa del usuario. La foto no se mueve en hover; un clic/toque
   sigue abriendo el visor a pantalla completa (ver app.js). */
.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);
}
/* T78 (hallazgo real, captura del usuario en móvil): estas cuatro reglas
   vivían como `.ft-item` a secas — sin `.feature-trust` delante — así que
   se aplicaban TAMBIÉN a la tira de confianza del pie (`.footer-trust
   .ft-item`, cuatro sellos, estructura de texto distinta), aunque la
   intención (comentario de arriba, "3 iconos bajo el botón de compra") era
   siempre solo esta franja de la ficha de producto. Nunca se notó en
   escritorio porque estas cuatro no cambian layout ahí; el problema real
   vivía en la versión de `@media (max-width:960px)` de más abajo, ahora
   también acotada. Ámbito explícito con `.feature-trust` delante.
*/
.feature-trust .ft-item { display:flex; align-items:center; gap:.6rem; }
.feature-trust .ft-item svg { width:20px; height:20px; stroke:var(--gold); fill:none; stroke-width:1.4; flex-shrink:0; }
.feature-trust .ft-item div { display:flex; flex-direction:column; gap:.1rem; }
.feature-trust .ft-item strong { font-size:.7rem; font-weight:600; color:var(--text); letter-spacing:.02em; }
.feature-trust .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;
}
/* T55: miniaturas de verdad (antes solo decorativas) — cada una es un
   <button> real: cambia la foto grande de la destacada al pulsarla. Sin
   ningún efecto de escala/zoom en hover (queja directa del usuario sobre la
   lupa de T47) — solo un aro dorado sutil para indicar cuál está activa. */
.fgr-photo {
  position:relative; aspect-ratio:3/4;
  display:block; width:100%; padding:0; margin:0; border:none; background:none;
  font:inherit; cursor:pointer; border-radius:2px;
}
.fgr-photo img { width:100%; height:100%; object-fit:cover; display:block; border-radius:2px; }
.fgr-photo:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.fgr-photo.is-active img { box-shadow:0 0 0 2px var(--gold); }
/* 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; }
}

/* ══════════════════════════════════════════════════════════
   T47 — PRENDA DESTACADA: compacta y vendedora
   Medido antes de tocar nada: 1637px de alto en 1440px para UNA prenda (el
   propio ".feature-inner" ya eran 884px, con la descripción del admin sola
   ocupando 351px sin límite de líneas). Objetivo: ≤760px en escritorio,
   foto protagonista, CTA y talla visibles sin desplazar dentro de la
   sección. La proporción de foto (3:4) NO cambia — es la que fija
   `image-specs.js` de verdad para "featured" (T47.md decía 4:5 por error).
   ══════════════════════════════════════════════════════════ */
.feature {
  padding:clamp(3rem,5vw,4.5rem) clamp(2rem,5vw,4rem) !important;
}
.feature-inner {
  max-width:960px; gap:3rem;
  grid-template-columns:45% 55%;
}
.feature-content { padding:0; }
.feature-category { margin-bottom:.4rem; }
.feature-name { margin-bottom:.6rem; }
.feature-divider { margin-bottom:1rem; }
.feature-price { margin-bottom:1.1rem; }
.feature-sizes-container { margin:1rem 0; }
.feature-trust { margin-top:1.4rem; padding-top:1.2rem; }

/* La descripción del admin puede ser larga (es texto editorial libre) — se
   recorta a 2 líneas por defecto ("una frase de gancho", pide T47.md) con un
   "Leer más" que la despliega entera sin recargar nada. `line-clamp` es
   compatible en todos los navegadores actuales con el prefijo `-webkit-`
   (incluido Firefox 68+); sin soporte, cae a texto completo — degradación
   aceptable, nunca contenido oculto sin forma de leerlo. */
.feature-desc {
  margin-bottom:.9rem;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}
.feature-desc.is-expanded {
  display:block; -webkit-line-clamp:unset; overflow:visible;
}
.feature-desc-toggle {
  display:none; /* JS lo muestra solo si el texto realmente desborda 2 líneas */
  background:none; border:none; padding:0; margin:-.4rem 0 .9rem;
  font-family:var(--sans); font-size:.7rem; font-weight:500; letter-spacing:.04em;
  color:var(--gold); text-decoration:underline; cursor:pointer;
}
.feature-desc-toggle:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

@media (max-width:960px) {
  .feature { padding:3rem 1.5rem !important; }
  .feature-inner { grid-template-columns:1fr; gap:1.4rem; max-width:520px; }
}

/* ── 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; }
}
/* T47: "a pantalla completa" — antes 480px era más un popup mediano que un
   lightbox; ahora ocupa la mayor parte del viewport en escritorio (con la
   imagen a resolución original, `object-fit:contain` para no recortarla). */
.gallery-modal-inner { max-width:min(1100px,94vw); padding:1.2rem; }
.gallery-viewer { position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
/* T55 (hallazgo de Codex): dentro del visor ya no hay ninguna acción de zoom
   con el ratón (la lupa se retiró) — `cursor:zoom-in` en escritorio prometía
   una acción que ya no existe. El doble toque de zoom en móvil no depende
   del cursor (no se ve en pantallas táctiles). */
.gallery-viewer img { width:100%; max-height:82vh; object-fit:contain; border-radius:4px; }
.gallery-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; /* T30: era 36px */
  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; }
/* T58: pie de foto opcional (ferias, puntos de venta, personas conocidas) y
   enlace a la prenda etiquetada — ninguno de los dos aparece si no hay dato. */
.gallery-caption { text-align:center; margin-top:.5rem; font-size:.82rem; color:var(--text); line-height:1.5; max-width:640px; margin-left:auto; margin-right:auto; }
.gallery-product-link {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:.8rem; color:var(--gold); font-size:.68rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
}
.gallery-product-link svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
.gallery-product-link:hover { text-decoration:underline; }

/* 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; }
/* T30: en la rejilla de 2 columnas de móvil, las 6 tallas en una sola fila
   quedaban en ~16-20px de ancho — imposibles de pulsar con precisión en la
   compra más frecuente del sitio (elegir talla desde la propia rejilla). Se
   reparten en dos filas de tres: cada botón gana el triple de ancho táctil
   sin tocar ni el número de tallas ni el resto del diseño de la tarjeta. */
@media (max-width:600px) {
  .quickadd-sizes { flex-wrap:wrap; }
  .qa-size { flex:1 1 calc(33.333% - .2rem); min-height:38px; }
}

/* T31: en iOS Safari, cualquier campo con font-size < 16px hace zoom
   automático al enfocarlo — un salto brusco de la pantalla. Medido con
   Playwright: casi todos los formularios del sitio (newsletter, popup de
   oferta, alta/login de cliente, seguimiento, "solo disponibles" del
   filtro, orden del catálogo) tenían campos entre 9,9px y 14,7px en móvil.
   Un único punto, solo en móvil, sin tocar el tamaño en escritorio. */
@media (max-width:960px) {
  input, select, textarea { font-size:16px !important; }
}

.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;
  min-height:38px; display:inline-flex; align-items:center; /* T30: eran 29px de alto */
}
.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;
  min-height:40px; padding:.5rem 0; display:inline-flex; align-items:center; /* T30: eran 14px de alto */
}
.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;
}
/* T55: T48 había sustituido este carrusel por una rejilla estática — queja
   directa del usuario ("los has puesto detenidos y desordenados: vuelve a
   como era antes"). Restaurado tal y como estaba en 7d1c57b (pre-T48), con
   una única mejora real añadida ahora: respeta `prefers-reduced-motion`
   (la versión original de T46-y-antes no lo hacía — hueco real, cerrado
   aquí de paso, sin que nadie lo pidiera explícitamente). */
.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; }
@media (prefers-reduced-motion:reduce) { .bs-track { animation:none; } }

/* ── CIFRAS, integradas en "Por qué elegirnos" (T48) ─────────
   Antes: banda granate suelta a sangre completa, aparte de la sección de
   arriba — dos bloques con el mismo tema (razones para comprar, prueba de
   que esas razones son ciertas) que se leían como cosas distintas. Ahora
   viven en la misma banda: mismo fondo que `.why`, un divisor fino como
   remate, sin color de fondo propio. */
.why-stats {
  display:flex; justify-content:center; flex-wrap:wrap; gap:0;
  margin-top:3rem; padding-top:2.6rem;
  border-top:.5px solid var(--border2);
}
.stat-item { text-align:center; padding:0 2.4rem; position:relative; }
.stat-item + .stat-item::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:38px; background:var(--border2);
}
.stat-num {
  font-family:var(--serif); font-size:2.4rem; font-weight:900;
  color:var(--gold); line-height:1;
}
.stat-label {
  font-size:.6rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text2); margin-top:.5rem;
}
@media (max-width:640px) {
  .why-stats { gap:1rem 0; }
  .stat-item { padding:0 1.2rem; flex:1 1 33%; }
}

/* ── 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; } }
/* T78 (hallazgo real, captura del usuario a ~375px): en fila los cuatro
   sellos no cabían — se apoyaba solo en `flex-wrap` (sin columnas fijas) y,
   además, una fuga de estilos de `.feature-trust` (ver más arriba) forzaba
   `min-width:0` en cada sello, dejando que el texto desbordara su propio
   hueco y pisara al del vecino. Rejilla 2×2 explícita: icono arriba a la
   izquierda de cada celda, texto en una o dos líneas dentro de su propia
   columna, sin depender de que el contenido decida solo si cabe una fila.
   El padding lateral de 3.5rem del contenedor (pensado para overflow: 5
   columnas de escritorio) también se ajusta — a 375px dejaba solo ~260px
   de ancho útil para los cuatro sellos. */
@media (max-width:768px) {
  .footer-trust {
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
    justify-content:stretch; gap:1.1rem 1rem; padding:1.6rem 1.5rem;
  }
  .footer-trust .ft-item {
    padding:0; align-items:flex-start; gap:.55rem;
    letter-spacing:.03em; line-height:1.35;
  }
  .footer-trust .ft-item svg { width:18px; height:18px; margin-top:.1rem; }
}
.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:44px; height:44px; display:grid; place-items:center; /* T30: era 34px */
  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); }
/* T78 — confirmación visual al añadir al carrito: el icono "late" (mismo
   keyframe que numPop, reutilizado) y el contador da un salto propio antes
   de asentarse — confirma la acción sin esperar a que se abra el cajón. */
@keyframes cartCountJump {
  0%   { transform:scale(1) translateY(0); }
  40%  { transform:scale(1.35) translateY(-3px); }
  100% { transform:scale(1) translateY(0); }
}
.hdr-btn.cart-bump svg { animation:numPop .4s var(--ease-out); }
.cart-count.cart-bump { animation:cartCountJump .4s var(--ease-out); }
@media (prefers-reduced-motion:reduce) {
  .hdr-btn.cart-bump svg, .cart-count.cart-bump { animation:none !important; }
}
@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.
   T30: era .72s — para una animación que se dispara en CADA sección mientras
   el usuario baja por la página (no una entrada de página única), 720ms se
   siente lento y anticuado, no elegante. Recortado a .4s, dentro del rango
   que sigue leyéndose como intencional sin hacer esperar al que solo quiere
   seguir bajando (criterio emil-kowalski-design: una interacción repetida
   tiene que ser rápida siempre, sin excepción). */
.reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity .4s var(--ease-out), transform .4s 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 .4s var(--ease-out),
    transform .4s 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 .4s var(--ease-out),
    transform .4s var(--ease-out);
}
.reveal-card.visible { opacity:1; transform:translateY(0) scale(1); }

/* stagger de grid: featured + 2 cols derecha — recortado en la misma
   proporción que arriba, el orden de aparición se mantiene, solo más ágil */
.products-grid .reveal-card:nth-child(2) { transition-delay:.04s; }
.products-grid .reveal-card:nth-child(3) { transition-delay:.08s; }
.products-grid .reveal-card:nth-child(4) { transition-delay:.07s; }
.products-grid .reveal-card:nth-child(5) { transition-delay:.11s; }
.products-grid .reveal-card:nth-child(6) { transition-delay:.14s; }

/* label: línea crece + texto aparece */
.reveal-label {
  opacity:0; transform:translateY(10px);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.reveal-label.visible { opacity:1; transform:translateY(0); }
.reveal-label.visible::before {
  animation:lineGrow .35s 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);
}
/* T48, hallazgo de Codex: el carrusel de opiniones en móvil (scroll-snap)
   no tenía forma de alcanzarse por teclado — las tarjetas son <figure>, sin
   foco propio. `tabindex="0"` las hace tabulables (el navegador ya las
   desplaza a la vista al enfocarlas dentro de un contenedor con overflow);
   este estilo les da un foco visible real, aquí y en escritorio (donde el
   :hover ya cumplía el mismo papel visualmente). */
.review-card:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
@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);
  /* T58: antes un <a> a Instagram; ahora un <button> real que abre el visor
     — reset de los estilos por defecto del navegador. */
  display:block; width:100%; padding:0; margin:0; border:none; font:inherit;
}
.ig-item:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.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 1fr; max-width:760px; 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-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; }

  .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); }

  /* 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); }

  /* T48: en móvil de verdad, carrusel por scroll horizontal nativo — sin
     librerías, `scroll-snap` — en vez de apilar las 3 tarjetas en columna
     (obligaba a mucho más scroll vertical para las mismas 3 opiniones). */
  .reviews-grid {
    display:flex; grid-template-columns:none; max-width:none; margin:0;
    gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:0 1.5rem .5rem; margin:0 -1.5rem;
    -webkit-overflow-scrolling:touch;
  }
  .review-card { flex:0 0 84%; scroll-snap-align:center; }
}

/* ══════════════════════════════════════════════════════════
   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:2rem; max-width:760px; 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:1rem 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:.6rem; color:var(--text);
}
.lb-pieces { list-style:none; margin:0 0 .8rem; }
.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;
}

/* T30: había AQUÍ una capa de "blur sutil" (.78-.9s + filter:blur) que se
   sumaba encima de la ya larga transición base, y luego dos capas MÁS
   (@media min-width:961px y @media max-width:375px, más abajo) cada una más
   lenta que la anterior — hasta 1.5s con blur en el móvil más pequeño,
   justo donde menos CPU sobra. Retirado: la base (.reveal/.reveal-title/
   .reveal-card, arriba) ya define un fundido+deslizado limpio y rápido
   (.4s), igual en todos los tamaños — una sola decisión de ritmo, no tres
   capas de "más cinematográfico" acumuladas con el tiempo. */

/* ── 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,
.lb-photo img, .col-photo img { will-change:transform; }
/* T55 (hallazgo de Codex): `.feature-img-wrap img` ya no tiene ningún hover
   con `transform` (la lupa se retiró) — su parallax usa la propiedad CSS
   `translate`, no `transform`, así que el `will-change` real es este. */
.feature-img-wrap img { will-change:translate; }

/* ── 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 ───────────────────── */
/* T47: `.feature` (la prenda destacada) sale de este grupo a propósito — es
   la única sección de la página con una decisión de compra real (talla +
   "Añadir a la cesta"), no una sección narrativa como `.story`/`.manifesto`/
   `.lookbook`. El respiro editorial extremo, aquí, competía con la venta
   (medido: 1637px de alto para una sola prenda). Ver su propio bloque de
   espaciado más abajo, en la sección "PRENDA DESTACADA — compacta y vendedora". */
.products     { padding:clamp(6rem,9vw,11rem) clamp(2rem,5vw,5.5rem) clamp(7rem,10vw,12rem) !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; }
/* T48: 1507px en 1440px — la regla del encargo es clara (ninguna sección
   >900px salvo la rejilla de más vendidos) y esta la incumplía de lejos,
   con el mismo padding editorial extremo que ya se corrigió en `.feature`
   en T47. Aquí igual: se recorta el padding, no el contenido. */
.lookbook     { padding:clamp(3rem,4.5vw,4rem) clamp(2rem,5vw,5.5rem) !important; }
.lookbook-head{ margin-bottom:2rem !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;
}

/* T30: esta capa (escritorio, min-width:961px) llevaba las apariciones de
   sección a 1.3-1.35s con blur — la más lenta de las tres capas encontradas,
   justo en el tamaño con más contenido y más secciones por página. Retirada:
   la base ya cubre todos los tamaños con el mismo ritmo (.4s). */

/* T34: "Product card hover: más elegante" llevaba estas transiciones a
   .7-1.4s — bajo el mismo epígrafe "más lentas y cinematográficas" que ya
   causó el scroll-reveal de T30. Un hover se repite en cada tarjeta de una
   rejilla de 12+ prendas: a esa duración se siente pegajoso, no elegante
   (mismo criterio emil-kowalski-design que en T30: una interacción repetida
   tiene que sentirse instantánea). Recortado a 200-350ms, con una sombra
   sutil que refuerza el `translateY(-6px)` de la tarjeta al levantarse —
   antes flotaba sin ninguna sombra debajo. */
.product-card {
  transition:border-color .2s var(--ease-out), transform .2s var(--ease-out),
             box-shadow .25s var(--ease-out), background .2s var(--ease-out) !important;
}
@media (hover:hover) and (pointer:fine) {
  .product-card:hover { box-shadow:0 14px 28px rgba(0,0,0,.35) !important; }
}
.product-img img {
  transition:transform .35s var(--ease-out), filter .3s 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; }
}

/* T34: los tres, igual que .product-img img más arriba, estaban bajo el
   mismo epígrafe "más lentas y cinematográficas" (1.2-1.5s) — mismo arreglo,
   misma razón: se repiten en cada tarjeta de una rejilla. */
/* T55: `.feature-img-wrap img` ya no está aquí — sin hover-scale, esta
   transición de `transform` se había quedado sin nada que transicionar. */
.col-photo img { transition:transform .35s var(--ease-out), filter .3s var(--ease-out) !important; }
.lb-photo img { transition:scale .35s 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 (destacada) queda fuera a propósito — T47, ver su bloque propio. */
  /* .lookbook igual, desde T48 — hallazgo de Codex: esta regla, más
     específica en cascada por venir después, anulaba en móvil/tablet la
     compactación de escritorio. Mismo valor reducido en los dos anchos. */
  .products    { padding:5rem 1.5rem 6rem !important; }
  .lookbook    { padding:3rem 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;
}

/* T30: esta era la tercera y más lenta de las capas de reveal encontradas —
   1.4-1.5s con blur, precisamente en el móvil MÁS pequeño (≤375px), donde
   menos CPU/batería sobran. Retirada por la misma razón que las otras dos:
   la base ya da el mismo ritmo rápido (.4s) en cualquier tamaño. */

/* T34: misma corrección que la capa de escritorio — 1.6s/1s de zoom en cada
   tarjeta se sentía lento incluso donde llega a activarse. */
.product-img img {
  transition:transform .35s var(--ease-out), filter .3s var(--ease-out) !important;
}
@media (hover:hover) and (pointer:fine) {
  .product-card:hover .product-img img { transform:scale(1.04) !important; }
}
.col-photo img        { transition:transform .35s var(--ease-out), filter .3s var(--ease-out) !important; }
.lb-photo img         { transition:transform .35s 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 (destacada) queda fuera a propósito — T47, ver su bloque propio. */
  /* .lookbook igual, desde T48 — hallazgo de Codex: esta regla, más
     específica en cascada por venir después, anulaba en móvil/tablet la
     compactación de escritorio. Mismo valor reducido en los dos anchos. */
  .products    { padding:5rem 1.5rem 6rem !important; }
  .lookbook    { padding:3rem 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;
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; /* T30 */
}
.cart-close:hover {
  color: var(--text);
}

/* El hueco venía de aquí: con `flex: 1` (y también con `1 1 auto`) la lista
   se estiraba hasta el fondo y empujaba el resumen, dejando el vacío dentro
   del área de scroll. Con `0 1 auto` la lista mide lo que mide su contenido y
   el resumen queda justo debajo; cuando el contenido es largo, la lista sí
   encoge (shrink 1) y hace scroll, de modo que el resumen vuelve a quedar
   anclado abajo. Sin relleno artificial. */
.cart-items {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.35rem 2rem .4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  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;
}
/* Antes: tres tarjetas comprimidas a un tercio del ancho, ilegibles. Ahora se
   ven ~2 completas y el resto llega con scroll horizontal suave, sin librerías
   ni carrusel: solo overflow con anclaje. */
.cart-suggest-row {
  display: flex;
  gap: .7rem;
  margin-top: .65rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: .35rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cart-suggest-row::-webkit-scrollbar { height: 0; display: none; }
.cart-suggest-card {
  flex: 0 0 47%; min-width: 0; scroll-snap-align: start;
  background: var(--panel2); border: .5px solid var(--border2);
  border-radius: 10px; padding: .65rem; 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; }
/* Nombre a dos líneas exactas: el truncamiento queda igual en todas las
   tarjetas y los precios se alinean entre sí. */
.cs-name { font-size: .76rem; color: var(--text); line-height: 1.35; margin-bottom: 3px; min-height: 2.05em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cs-price { font-size: .8rem; color: var(--gold); font-weight: 600; margin-bottom: .55rem; }
.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;
  min-width: 0; /* sin esto la columna no encoge y el nombre se corta antes */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* Hasta DOS líneas antes de truncar, igual que en las recomendaciones: nombres
   como "En 1492…" se cortaban demasiado pronto. */
.cart-item-name {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.2rem;
  line-height: 1.35;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.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);
}

/* Dock del checkout. El fondo pasa a transparente a propósito: con la lista a
   altura de contenido, el resumen ya no está siempre pegado al fondo, y un
   bloque más claro flotando a media altura con hueco oscuro debajo se leería
   como un error. Con el mismo fondo del drawer y un filete superior, el dock
   se lee como una sección, esté donde esté. Separación con las
   recomendaciones: 1.5rem del padding + .4rem de la lista ≈ 30px. */
.cart-footer {
  flex: 0 0 auto;
  padding: 1.5rem 2rem 1.7rem;
  background: transparent;
  border-top: 0.5px solid var(--border2);
  overflow-y: auto;
  min-height: 0;
  max-height: 68%;
  scrollbar-width: thin;
  scrollbar-color: var(--panel3) transparent;
}

/* El CTA es `display: flex`, que gana al `display: none` del atributo `hidden`
   del navegador: por eso seguía visible con el selector abierto. La regla va
   acotada a los elementos implicados en vez de un `[hidden]` global, que
   afectaría a toda la web sin necesidad. */
.cart-checkout-btn[hidden],
.checkout-choice[hidden],
#checkoutChoiceGoogle[hidden] { display: none !important; }
@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;
}

/* CTA del carrito — sólido y dominante. Antes era una fila con emoji y flecha
   a 0.7rem que competía con los cuatro bloques secundarios que había debajo;
   ahora es lo único que se ve tras el total. */
.cart-checkout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 1.2rem !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.16em !important;
  border-radius: 100px;
  margin-top: 1.4rem;
  transition: transform .3s, filter .3s, box-shadow .3s;
}
.cart-checkout-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow: 0 14px 32px -16px rgba(176, 39, 56, .95);
}
.cart-checkout-btn:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }

/* Única línea bajo el CTA. Sustituye a la enumeración de métodos de pago: no
   se anuncia ninguno que el checkout no garantice. */
.cart-secure {
  margin: .85rem 0 0;
  text-align: center;
  font-size: .68rem;
  letter-spacing: .1em;
  color: rgba(232, 230, 225, .42);
}

/* ── ELECCIÓN PREVIA AL PAGO ─────────────────────────────── */
/* Caja apenas insinuada: dentro del drawer ya hay un contenedor, así que un
   segundo borde marcado produce "caja dentro de caja". Solo un filete arriba. */
.checkout-choice {
  margin-top: 1.1rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid rgba(235, 224, 204, .12);
}
.checkout-choice-title {
  margin: 0 0 .9rem;
  text-align: center;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.checkout-choice-google {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 0 1.2rem;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 100px;
  background: #fff;
  color: #1f1b16;
  font: 600 .88rem var(--sans);
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, background .25s;
}
.checkout-choice-google:hover:not(:disabled) { transform: translateY(-1px); background: #fbfaf8; box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .8); }
.checkout-choice-google:disabled { opacity: .6; cursor: default; transform: none; }
/* El icono va absoluto para que el texto quede ópticamente centrado. */
.checkout-choice-google svg { position: absolute; left: 17px; width: 18px; height: 18px; }
/* Invitado: alternativa real, no una opción apagada. Fondo algo elevado
   respecto al drawer y borde bronce visible. */
.checkout-choice-guest {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(201, 165, 89, .42);
  border-radius: 100px;
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font: 600 .88rem var(--sans);
  letter-spacing: .01em;
  cursor: pointer;
  transition: border-color .25s, color .25s, background .25s, transform .25s;
}
.checkout-choice-guest:hover {
  border-color: var(--gold);
  background: rgba(201, 165, 89, .13);
  color: #f4efe6;
  transform: translateY(-1px);
}
.checkout-choice-sep {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: .95rem 0;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(232, 230, 225, .38);
}
.checkout-choice-sep:before, .checkout-choice-sep:after { content: ''; flex: 1; height: 1px; background: rgba(235, 224, 204, .13); }
.checkout-choice-note {
  margin: .55rem 0 0;
  text-align: center;
  font-size: .73rem;
  line-height: 1.5;
  color: rgba(232, 230, 225, .55);
}
/* Enlace de acceso: mayor y con mejor contraste, cómodo de pulsar con el dedo. */
.checkout-choice-login {
  margin: .9rem 0 0;
  text-align: center;
  font-size: .82rem;
  color: rgba(232, 230, 225, .72);
}
.checkout-choice-login a {
  display: inline-block;
  padding: .35rem .2rem;
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 165, 89, .45);
}
.checkout-choice-login a:hover { border-color: var(--gold); filter: brightness(1.12); }

/* ── CUPÓN PLEGADO ───────────────────────────────────────── */
.cart-promo-toggle {
  display: block;
  width: 100%;
  margin-bottom: .9rem;
  padding: .5rem 0;
  background: none;
  border: 0;
  border-bottom: 1px dashed rgba(235, 224, 204, .22);
  color: var(--text2);
  font: 500 .76rem var(--sans);
  text-align: left;
  cursor: pointer;
  transition: color .25s, border-color .25s;
}
.cart-promo-toggle:hover { color: var(--gold); border-color: rgba(201, 165, 89, .5); }

@media (max-width: 600px) {
  .checkout-choice-google, .checkout-choice-guest { height: 52px; }
  .checkout-choice-login a { padding: .5rem .3rem; }
}

/* ── 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;
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; /* T30 */
}
.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%
      );
  }
}

/* ══════════════════════════════════════════════════════════
   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.). El listón de nombres ya no necesita
   ningún ajuste de fondo aquí — desde T43 la franja es sólida (`--black`,
   sin `backdrop-filter`) en TODOS los anchos, así que este bloque solo
   reduce el tamaño del texto en pantallas pequeñas.
   Historial: T35 verificó en píxeles reales (no solo en CSS) que un fondo
   translúcido + blur fallaba según el fotograma del vídeo detrás; T43 lo
   sustituyó por sólido en la regla base de `.marquee-strip`, en vez de
   seguir parcheando esta única anchura. Evidencia en
   test/marquee-pixels.test.js y scratchpad/diseno/marquee/. */
@media (max-width:960px) {
  .hero-trust { display:none !important; }
  .marquee-item { font-size:.95rem; }
  .marquee-track { animation-duration:48s; } /* T43: recorrido más corto en móvil, misma velocidad percibida */
}

/* ── 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) {
  /* applySettings() controla si se muestra el video o el carrusel de imagenes. */
  .hero-left-bg { 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-desc-toggle      { order:4; margin-bottom:1rem; }
  .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; }

  /* T47: las 3 señales de confianza envolvían en varias filas (icono + 2
     líneas de texto × 3 no cabe en un ancho de 375px con el tamaño de
     escritorio) — en una sola fila, compactas, sigue leyéndose todo. */
  .feature-trust { flex-wrap:nowrap; gap:.5rem; margin-top:1rem; padding-top:1rem; }
  .feature-trust .ft-item { flex:1 1 0; min-width:0; gap:.4rem; }
  .feature-trust .ft-item svg { width:16px; height:16px; }
  .feature-trust .ft-item strong { font-size:.6rem; line-height:1.25; }
  .feature-trust .ft-item span { font-size:.54rem; }

  /* Acordeones y remate: información real (no se quita), pero más ajustada. */
  .feature-accordions { margin:1.2rem 0 0; }
  .accordion-header { padding:.85rem 0; }
  .feature-signoff { margin-top:1.6rem; padding-top:1.6rem; gap:.7rem; }
}

/* 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);transition:opacity .2s var(--ease-out)}.wa-widget-suspended{opacity:0;pointer-events:none}.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 .6rem;color:var(--text);font-family:var(--serif);font-size:1.55rem;font-weight:400;line-height:1.08}.wa-hours-note{margin:0 0 1rem;color:var(--text2);font-size:.72rem;line-height:1.4}.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:225px}} /* T32: era 152px — a 16px real (fix de zoom de iOS) "Precio: menor a mayor" quedaba cortado; 225px es el máximo real sin desbordar el toolbar (medido: 236px libres a 375px de ancho) */

@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}
/* T45 — asistente de preguntas frecuentes (Cloudflare Workers AI): burbujas mínimas, mismo lenguaje visual que el resto del panel. */
.wa-chat[hidden]{display:none}
.wa-chat-messages{display:flex;flex-direction:column;gap:.5rem;max-height:260px;overflow-y:auto;margin:0 0 .8rem;padding-right:.2rem}
.wa-chat-bubble{max-width:85%;padding:.55rem .75rem;border-radius:10px;font-size:.78rem;line-height:1.45;word-wrap:break-word}
.wa-chat-bubble-bot{align-self:flex-start;background:rgba(255,255,255,.045);border:1px solid rgba(196,160,74,.18);color:var(--text2)}
.wa-chat-bubble-user{align-self:flex-end;background:rgba(158,28,44,.22);border:1px solid rgba(158,28,44,.4);color:var(--text)}
.wa-chat-form{display:flex;gap:.5rem;margin:0 0 .6rem}
.wa-chat-form input{flex:1;border:1px solid rgba(196,160,74,.26);border-radius:5px;background:rgba(255,255,255,.025);color:var(--text);padding:.65rem .78rem;font:400 .8rem/1.4 var(--sans)}
.wa-chat-form input::placeholder{color:var(--muted)}
.wa-chat-form input:focus{outline:none;border-color:rgba(196,160,74,.68);background:rgba(255,255,255,.04)}
.wa-chat-form input:disabled{opacity:.55;cursor:not-allowed}
.wa-chat-form button{flex:0 0 auto;width:44px;min-height:44px;border:1px solid #a32a39;border-radius:5px;background:linear-gradient(120deg,#7d121f,#a31d30);color:#fff;font-size:1rem;cursor:pointer}
.wa-chat-form button:hover{background:#b32638}
.wa-chat-form button:disabled{cursor:not-allowed;opacity:.48}
.wa-chat-disclaimer{margin:0 0 .7rem;color:var(--muted);font-size:.6rem;letter-spacing:.02em;text-align:center}
.wa-chat-whatsapp{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;border:1px solid rgba(196,160,74,.18);border-radius:6px;background:rgba(255,255,255,.018);color:var(--text2);padding:.6rem .78rem;text-decoration:none;font:400 .72rem/1.3 var(--sans);transition:background .22s,border-color .22s,color .22s}
.wa-chat-whatsapp:hover{border-color:rgba(196,160,74,.55);background:rgba(158,28,44,.16);color:var(--text)}
.wa-chat-whatsapp span{color:var(--gold);font-size:.95rem}
@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)),var(--about-purpose-bg,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}}
.visual-loading-placeholder {
  min-height: 28rem;
  background: linear-gradient(110deg, rgba(255,255,255,.06) 8%, rgba(255,255,255,.13) 18%, rgba(255,255,255,.06) 33%);
  background-size: 200% 100%;
  /* T34: el degradado existía pero nunca se movía — una banda fija se lee
     más como un fallo de carga que como un esqueleto. Un barrido lento y
     sutil (2s) comunica "esto está cargando" sin llamar la atención. */
  animation: visualLoadingShimmer 2s ease-in-out infinite;
}
@keyframes visualLoadingShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .visual-loading-placeholder { animation: none; }
}
.visual-loading-placeholder > * { visibility: hidden; }

/* T49: el hero es un cascarón neutro hasta que llegan los ajustes — pero
   TEXTO y MEDIO (vídeo/imagen) ya no comparten el mismo interruptor. Antes,
   los dos esperaban a que el VÍDEO disparara `loadeddata` (medido en T32:
   LCP ≈15s, el visitante veía un hueco oscuro varios segundos) — el texto no
   depende de ningún archivo pesado, solo del JSON de ajustes (rápido), así
   que se revela solo (`hero-ready`) en cuanto llega. El medio tiene su
   propio interruptor (`media-pending`): se quita en cuanto hay un póster
   real que pintar (una imagen, rápida) o, si no hay póster configurado, de
   inmediato (mejor un fondo neutro visible ya que un hueco invisible más
   tiempo) — nunca esperando el vídeo entero. */
.hero.hero-pending {
  background: #171717;
}
.hero.hero-pending .hero-left,
.hero.hero-pending .hero-left-bg {
  background: #171717 !important;
}
.hero.hero-pending .hero-content,
.hero.hero-pending .hero-bottom {
  visibility: hidden;
}
.hero.media-pending .hero-left-bg video,
.hero.media-pending #heroSlideImg {
  visibility: hidden;
}
.hero.hero-ready .hero-content,
.hero.hero-ready .hero-bottom {
  visibility: visible;
}
.hero:not(.media-pending) .hero-left-bg video,
.hero:not(.media-pending) #heroSlideImg {
  visibility: visible;
}

/* T32: cinco campos (newsletter, popup de oferta, cupón del carrito,
   buscador, orden del catálogo) quitaban `outline:none` y dependían solo de
   un cambio sutil de `border-color` al enfocar — casi invisible navegando
   por teclado. Se añade un foco real y visible SOLO para `:focus-visible`
   (nunca se activa con un clic de ratón), al final del fichero para que
   gane sin necesitar `!important`: `.ct-sort select` ya tenía su propio
   `outline:none` en `:focus-visible` más arriba. */
.nl-form input:focus-visible,
.popup-form input:focus-visible,
.cart-promo-wrap input:focus-visible,
.search-top input:focus-visible,
.ct-sort select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}