/* ============================================================
    PREMIUM LUXURY DESIGN SYSTEM
    Dark-first · Editorial · High-end perfume aesthetic
    ============================================================ */
  :root {
    /* Paleta base: crema cálido + marrón chocolate profundo */
    --cream-0:        #ffffff;
    --cream-1:        #FBF7F0;
    --cream-2:        #F2E9DC;
    --cream-3:        #E8DCCC;
    --brown-0:        #1A120B;
    --brown-1:        #221912;
    --brown-2:        #2C2015;
    --brown-3:        #3A2C1E;

    /* Acento: dorado envejecido (lujo cálido) */
    --gold-deep:      #A67C3D;
    --gold:           #C99B5F;
    --gold-light:     #E5C896;
    --gold-pale:      #F6EDE0;
    --gold-glow:      rgba(201,155,95,.12);

    /* Superficies */
    --surface:        #ffffff;
    --surface-warm:   #FBF7F0;
    --surface-alt:    #F2E9DC;

    /* Texto */
    --text-primary:   #1A120B;
    --text-secondary: #5C4B3A;
    --text-muted:     #7A6A57;
    --text-light:     #C9B8A3;

    /* Bordes */
    --border:         rgba(26,18,11,.10);
    --border-light:   rgba(26,18,11,.05);

    /* Sombras — suaves, con tinte cálido */
    --shadow-xs:      0 2px 8px rgba(26,18,11,.06);
    --shadow-sm:      0 4px 18px rgba(26,18,11,.09);
    --shadow-md:      0 12px 40px rgba(26,18,11,.12);
    --shadow-lg:      0 28px 80px rgba(26,18,11,.16);
    --shadow-gold:    0 16px 50px rgba(166,124,61,.16);
    --shadow-gold-lg: 0 24px 70px rgba(166,124,61,.22);

    /* Radios */
    --r-xs:  6px;  --r-sm: 10px; --r-md: 16px;
    --r-lg:  22px; --r-xl: 32px; --r-pill: 9999px;

    /* Ancho de contenido: nunca estuvo definida (bug real, no un valor a
       proposito) -- 14 reglas la referencian (header, hero, secciones,
       footer, reviews, combo, promo-strip) y sin ella "max-width:
       var(--max-w)" es invalido -> el navegador usa max-width:none, la
       seccion queda a lo ancho total del viewport. En la mayoria pasaba
       desapercibido (el contenido igual se ve centrado con su propio
       padding), pero elementos con offset absoluto NEGATIVO respecto a
       ese contenedor (.rev-next { right:-20px }, pensado para "flotar"
       en el margen que deberia existir fuera del contenido) terminaban
       empujados mas alla del borde real del viewport en pantallas anchas
       -- el overflow horizontal real de escritorio (1440px: 20px). */
    --max-w: 1320px;

    /* Tipografía */
    --font-body: 'Manrope', 'Segoe UI', Helvetica, sans-serif;
    --font-display: 'Cormorant Garamond', Georgia, serif;

    /* Easing premium */
    --ease-premium:      cubic-bezier(.16,1,.3,1);
    --t-fast:   .18s var(--ease-premium);
    --t-base:   .32s var(--ease-premium);
    --t-spring: .5s  cubic-bezier(.34,1.56,.64,1);

    /* Tokens semánticos adicionales */
    --color-bg:          #FBF7F0;
    --color-bg-soft:     #F2E9DC;
    --color-surface:     #ffffff;
    --color-text:        #1A120B;
    --color-text-soft:   #5C4B3A;
    --color-text-muted:  #7A6A57;
    --color-black:       #1A120B;
    --color-white:       #ffffff;
    --color-border:      rgba(26,18,11,.10);
    --color-border-strong: rgba(26,18,11,.18);
    --color-accent:      #C99B5F;
    --color-accent-soft: #F6EDE0;

    /* Capas de interfaz: header < backdrop del drawer < drawer. */
    --z-header:           1000;
    --z-drawer-backdrop:  2800;
    --z-drawer:           2801;

    /* Premium spacing scale */
    --space-xs:   0.25rem;
    --space-sm:   0.5rem;
    --space-md:   1rem;
    --space-lg:   1.5rem;
    --space-xl:   2rem;
    --space-2xl:  3rem;
    --space-3xl:  4rem;
    --space-4xl:  6rem;
    --space-5xl:  8rem;
    --space-6xl:  10rem;

    /* Section spacing (luxury = generous) */
    --section-pad: clamp(4rem, 8vw, 8rem);
    --section-pad-lg: clamp(5rem, 10vw, 10rem);
  }

  [data-theme="dark"] {
    --cream-0:        #140E08;
    --cream-1:        #1A120B;
    --cream-2:        #221912;
    --cream-3:        #2C2015;
    --surface:        #1C130C;
    --surface-warm:   #140E08;
    --surface-alt:    #261B10;
    --text-primary:   #F5EFE6;
    --text-secondary: #C9B8A3;
    --text-muted:     #9A8876;
    --text-light:     #3A2C1E;
    --border:         rgba(245,239,230,.10);
    --border-light:   rgba(245,239,230,.05);
    --gold-pale:      #2C2015;
    --gold-deep:      #B88A4E;
    --gold:           #D4A96A;
    --gold-light:     #E8CE9C;
    --gold-glow:      rgba(212,169,106,.12);
    --color-bg:       #1A120B;
    --color-bg-soft:  #221912;
    --color-surface:  #1C130C;
    --color-black:    #140E08;
    --color-text:     #F5EFE6;
    --color-text-soft:#C9B8A3;
    --color-text-muted:#9A8876;
    --color-border:   rgba(245,239,230,.10);
    --color-border-strong: rgba(245,239,230,.16);
    --color-accent:   #D4A96A;
    --color-accent-soft: #261B10;
    --shadow-xs:      0 2px 8px rgba(0,0,0,.5);
    --shadow-sm:      0 4px 18px rgba(0,0,0,.55);
    --shadow-md:      0 12px 40px rgba(0,0,0,.6);
  }
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
  body {
    font-family: var(--font-body);
    background: var(--cream-1);
    color: var(--text-primary);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /* Grain texture overlay for premium feel */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
  }
  [data-theme="dark"] body::after { opacity: 0.04; }

  /* ── LOADING SCREEN ──────────────────────────────────── */
  .loading-screen {
    position: fixed; inset: 0; z-index: 99999;
    background: #0d0a06; display: flex; align-items: center; justify-content: center;
    transition: opacity .6s ease, visibility .6s ease;
  }
  .loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
  .loading-inner { text-align: center; }
  .loading-logo {
    font-family: var(--font-body); font-size: 2.5rem; font-weight: 300;
    letter-spacing: .2em; color: #fff; margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .loading-bar {
    width: 200px; height: 2px; background: rgba(255,255,255,.1);
    border-radius: 2px; overflow: hidden; margin: 0 auto 1rem;
  }
  .loading-bar-fill {
    height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
    border-radius: 2px; animation: loadingFill 1.5s ease forwards;
  }
  .loading-text {
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.4);
  }
  @keyframes loadingFill { 0% { width: 0; } 100% { width: 100%; } }

  /* Degradados fijos en una capa propia */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      radial-gradient(circle at 8% 0%, rgba(201,155,95,.05), transparent 38%),
      radial-gradient(circle at 95% 4%, rgba(201,155,95,.04), transparent 36%);
  }
  [data-theme="dark"] body::before {
    background-image:
      radial-gradient(circle at 8% 0%, rgba(212,169,106,.06), transparent 38%),
      radial-gradient(circle at 95% 4%, rgba(212,169,106,.04), transparent 36%);
  }
  ::selection { background: var(--gold); color: #fff; }
  ::-webkit-scrollbar { width: 7px; }
  ::-webkit-scrollbar-track { background: var(--cream-1); }
  ::-webkit-scrollbar-thumb { background: var(--gold-light); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--gold); }
  img { display: block; max-width: 100%; }
  a  { text-decoration: none; cursor: pointer; }
  button { cursor: pointer; font-family: var(--font-body); }
  :focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
    border-radius: var(--r-xs);
    box-shadow: 0 0 0 5px rgba(201,155,95,.2);
  }
  .filter-pill:focus-visible, .product-card:focus-visible, .promo-card:focus-visible { outline-offset: 3px; }
  /* ── PAGE SYSTEM ───────────────────────────────────────────── */
  .page { display: none; }
  /* Sin "both": ese fill-mode dejaba transform:translateY(0)/filter:blur(0)
     del keyframe final aplicados de forma PERMANENTE tras terminar la
     animacion (matrix identidad, no el literal "none") -- eso crea un
     containing block nuevo para cualquier position:fixed hijo de .page
     (bug real: rompia la barra sticky de Arma tu Pack, que quedaba
     anclada a .page en vez de al viewport). Sin "both" (no hay
     animation-delay, asi que "backwards" no cumplia funcion), al
     terminar los 0.5s transform/filter vuelven a su valor real (none) y
     position:fixed vuelve a fijarse al viewport como corresponde. */
  .page.active { display: block; animation: pageIn .5s cubic-bezier(.22,.7,.3,1); }
  @keyframes pageIn {
    0%   { opacity:0; transform:translateY(28px); filter: blur(2px); }
    60%  { opacity:1; }
    100% { opacity:1; transform:translateY(0); filter: blur(0); }
  }
  /* ══════════════════════════════════════════════════════════════
    HEADER (Dark luxury)
  ══════════════════════════════════════════════════════════════ */
  .header {
    position: sticky; top: 0; z-index: var(--z-header);
    background: #0d0a06;                       /* negro cálido */
    border-bottom: 1px solid rgba(212,169,106,.12);
    transition: box-shadow .35s ease;
  }
  .header.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,.35); }
  /* El padding vive en header-inner (no en .header) para que el
     announcement de arriba tenga su propio padding, mas ajustado. */
  .header-inner {
    max-width: var(--max-w); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: .85rem 2rem;
    transition: padding .35s ease;
  }
  .header.scrolled .header-inner { padding: .55rem 2rem; }
  /* ── Logo ── */
  .logo { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; transition: transform var(--t-spring); }
  .logo:hover { transform: scale(1.02); }
  .logo-img {
    width: 46px; height: 46px; object-fit: contain;
    transition: filter var(--t-base), transform var(--t-base);
  }
  .logo:hover .logo-img { filter: drop-shadow(0 5px 14px rgba(201,155,95,.55)); transform: rotate(-4deg) scale(1.05); }
  .logo-text { display:flex; flex-direction:column; line-height:1.15; }
  .logo-name {
    font-family: var(--font-body); font-size: 1.05rem; font-weight: 300;
    letter-spacing: .14em; color: #fff; text-transform: uppercase; white-space: nowrap;
  }
  .logo-name span { font-weight: 700; color: var(--gold-light); }
  .logo-slogan {
    font-size: .6rem; font-weight: 400; letter-spacing: .12em;
    color: var(--gold-light); text-transform: uppercase; white-space: nowrap; opacity: .8;
  }
  /* ── Nav ── */
  .nav { display: flex; gap: 2.2rem; align-items: center; list-style: none; }
  /* En desktop .nav-links no debe pintar caja propia: sus <a> deben seguir
     siendo hijos flex directos de .nav (mismo layout de siempre). El
     drawer movil le da su propio display:flex/column (ver media query). */
  .nav-links { display: contents; }
  .nav a {
    color: rgba(255,255,255,.72); font-size: .82rem; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase; transition: color var(--t-base);
    position: relative; padding: .4rem 0; background: none; border: none;
  }
  .nav a::after {
    content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1.5px;
    background: var(--gold-light); transition: width var(--t-spring);
  }
  .nav a:hover, .nav a.active { color: #fff; }
  .nav a:hover::after, .nav a.active::after { width: 100%; }
  /* ── Header actions ── */
  .header-actions { display: flex; align-items: center; gap: .4rem; }
  .btn-icon {
    background: none; border: 1.5px solid rgba(255,255,255,.15); color: rgba(255,255,255,.75);
    font-size: 1.1rem; position: relative; padding: .45rem; border-radius: 50%;
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    transition: all var(--t-base);
  }
  .btn-icon:hover {
    color: var(--gold-light);
    background: rgba(201,155,95,.12);
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
  }
  .cart-count {
    position: absolute; top: 0; right: 0; background: var(--gold); color: #fff;
    font-size: .65rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; pointer-events: none;
    border: 2px solid #0d0a06;
  }
  .cart-count.pulse { animation: cartBounce .5s cubic-bezier(.28,.84,.42,1); }
  @keyframes cartBounce {
    0%   { transform: scale(1);   background: var(--gold); }
    30%  { transform: scale(1.55); background: var(--success, #3a9c6e); }
    55%  { transform: scale(.85);  background: var(--success, #3a9c6e); }
    75%  { transform: scale(1.18); background: var(--gold); }
    100% { transform: scale(1);   background: var(--gold); }
  }
  /* ── Hamburger ── */
  .hamburger {
    display: none; background: none; border: 1.5px solid rgba(255,255,255,.25);
    padding: .45rem .55rem; border-radius: var(--r-sm); flex-direction: column; gap: 4px;
    transition: all var(--t-base);
  }
  .hamburger:hover { border-color: var(--gold); background: rgba(201,155,95,.12); }
  .hamburger span { display: block; width: 18px; height: 1.5px; background: rgba(255,255,255,.75); transition: all var(--t-base); border-radius: 2px; }
  /* ══════════════════════════════════════════════════════════════
    HERO
  ══════════════════════════════════════════════════════════════ */
  .hero {
    position: relative; min-height: 100vh; display: flex; align-items: center;
    justify-content: flex-start; text-align: left; padding: 2rem; overflow: hidden; overflow: clip; background: #0d0a06;
  }
  .hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
    filter: brightness(.45) saturate(.9);
    will-change: transform;
    animation: heroKenBurns 26s ease-in-out infinite alternate;
  }
  @keyframes heroKenBurns {
    from { transform: translateY(var(--hero-parallax, 0px)) scale(1.14); }
    to   { transform: translateY(var(--hero-parallax, 0px)) scale(1.24); }
  }
  .hero:hover .hero-video { filter: brightness(.5) saturate(1); }
  /* En móvil el video no se descarga (JS); el <video> muestra su poster.
    Fondo de respaldo por si el navegador no pinta el poster sin src. */
  @media (max-width: 768px) {
    .hero { background: #0d0a06 url("inicio.webp") center/cover no-repeat; }
    /* El .mp4 (3 MB) no se descarga en móvil: el fondo inicio.webp lo reemplaza */
    .hero-video { display: none; }
  }
  .hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(90deg, rgba(5,5,5,.86) 0%, rgba(5,5,5,.5) 48%, rgba(5,5,5,.16) 100%),
      linear-gradient(0deg, rgba(5,5,5,.82) 0%, transparent 42%);
  }
  .hero-content {
    position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto;
    width: 100%; padding-top: 2.5rem;
  }
  .hero-content > * { max-width: 700px; }
  .hero-badge {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .55rem 1.3rem; border-radius: var(--r-pill);
    background: rgba(255,255,255,.04); border: 1px solid rgba(212,169,106,.3);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light);
    margin-bottom: 2rem; animation: heroFade .8s .1s ease both;
  }
  .hero-badge i { color: var(--gold); font-size: .8rem; }
  .hero h1 {
    font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 300;
    color: #fff; line-height: 1.05; letter-spacing: .02em; margin-bottom: 1.4rem;
    text-shadow: 0 2px 20px rgba(0,0,0,.5); animation: heroFade 1s .25s ease both;
  }
  .hero h1 em {
    font-style: italic;
    background: linear-gradient(120deg, #E8CE9C 0%, var(--gold-light) 45%, #B88A4E 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: none;
  }
  .hero p {
    font-size: 1.08rem; color: rgba(255,255,255,.75); max-width: 480px; margin: 0 0 2.8rem;
    line-height: 1.85; font-weight: 300; animation: heroFade 1s .4s ease both;
  }
  .hero-cta-group { display: flex; gap: 1rem; justify-content: flex-start; flex-wrap: wrap; animation: heroFade 1s .55s ease both; }
  @keyframes heroFade { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
  .hero-stats { display: flex; align-items: center; gap: 2.2rem; margin-top: 2.9rem; animation: heroFade 1s .7s ease both; }
  .hero-stat { display: flex; flex-direction: column; gap: .3rem; }
  .hero-stat strong { font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; color: #fff; line-height: 1; }
  .hero-stat span { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
  .hero-stat-divider { width: 1px; height: 30px; background: rgba(212,169,106,.4); }
  .hero-scroll-indicator {
    position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    color: rgba(255,255,255,.45); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase;
    animation: heroFade 1s .8s ease both;
  }
  .hero-scroll-line {
    width: 1px; height: 42px; background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
    animation: scrollPulse 2s 1s ease-in-out infinite;
  }
  @keyframes scrollPulse { 0%,100% { opacity:.4; transform:scaleY(1); } 50% { opacity:.9; transform:scaleY(1.15); } }
  @media (max-width: 768px) {
    .hero { justify-content: center; text-align: center; }
    .hero-overlay { background: linear-gradient(180deg, rgba(5,5,5,.3) 0%, rgba(5,5,5,.55) 55%, rgba(5,5,5,.85) 100%); }
    .hero-content > * { max-width: 100%; }
    .hero-cta-group { justify-content: center; }
    .hero p { margin-left: auto; margin-right: auto; }
    .hero-stats { justify-content: center; gap: 1.4rem; }
  }
  /* ══════════════════════════════════════════════════════════════
    BUTTONS
  ══════════════════════════════════════════════════════════════ */
  .btn {
    display: inline-flex; align-items: center; gap: .55rem; padding: 1rem 2.4rem;
    font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    border: none; border-radius: var(--r-pill); cursor: pointer; transition: all var(--t-spring);
    position: relative; overflow: hidden; font-family: var(--font-body);
  }
  .btn::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.15); opacity:0; transition:opacity var(--t-base); }
  .btn:hover::before { opacity: 1; }
  .btn-gold {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%);
    color: #fff; box-shadow: 0 8px 32px rgba(201,155,95,.4), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .btn-gold:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 48px rgba(201,155,95,.55), inset 0 1px 0 rgba(255,255,255,.2); }
  .btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.45); backdrop-filter: blur(6px); }
  .btn-ghost:hover { background: rgba(255,255,255,.16); border-color: var(--gold-light); color: var(--gold-light); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.22); }
  .btn-outline-dark { background: transparent; color: var(--text-primary); border: 1.5px solid var(--brown-3); }
  .btn-outline-dark:hover { background: var(--text-primary); color: var(--cream-0); border-color: var(--text-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .btn-load-more {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    margin: 2rem auto 0; padding: .85rem 2rem;
    font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    border: 1.5px solid var(--gold); border-radius: var(--r-pill);
    background: transparent; color: var(--gold);
    transition: all var(--t-spring); font-family: var(--font-body);
  }
  .btn-load-more:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border-color: var(--gold);
    color: #fff; transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(201,155,95,.35);
  }
  .btn-load-more:active { transform: scale(.97); }
  [data-theme="dark"] .btn-load-more { border-color: var(--gold-light); color: var(--gold-light); }
  [data-theme="dark"] .btn-load-more:hover { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--brown-0); }
  /* ═══════════════════════════════════════════════════════════════
    STATS BAR
  ══════════════════════════════════════════════════════════════ */
  .stats-bar { background: var(--brown-1); border-bottom: 1px solid rgba(255,255,255,.06); }
  .stats-inner {
    max-width: var(--max-w); margin: 0 auto; padding: 1.4rem 2rem;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  }
  .stat-item { display: flex; flex-direction: column; align-items: center; padding: .4rem 3rem; }
  .stat-number { font-family: var(--font-display); font-size: 1.65rem; font-weight: 500; color: var(--gold-light); line-height: 1.1; }
  .stat-label { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: .25rem; }
  .stat-divider { width: 1px; height: 34px; background: rgba(255,255,255,.12); }
  /* ══════════════════════════════════════════════════════════════
    SECTIONS
  ══════════════════════════════════════════════════════════════ */
  .section { padding: 6rem 2rem; max-width: var(--max-w); margin: 0 auto; }
  .section-header { text-align: center; margin-bottom: 4rem; }
  .section-eyebrow {
    display: inline-flex; align-items: center; gap: .65rem;
    font-size: .65rem; text-transform: uppercase; letter-spacing: .25em; color: var(--gold);
    margin-bottom: 1rem; font-weight: 600;
  }
  .section-eyebrow::before, .section-eyebrow::after { content:''; width: 24px; height: 1px; background: var(--gold-light); }
  .page-hero-content .section-eyebrow::before,
  .page-hero-content .section-eyebrow::after { background: rgba(212,169,106,.55); }
  .section-title {
    font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); color: var(--text-primary);
    font-weight: 300; letter-spacing: .02em; line-height: 1.12; margin-bottom: 1rem;
  }
  .section-subtitle { color: var(--text-muted); max-width: 520px; margin: 0 auto; font-size: .92rem; line-height: 1.8; font-weight: 300; }
  .section-cta { text-align: center; margin-top: 3.2rem; }
  .section-trust { position: relative; overflow: hidden; }
  .trust-bg-pattern {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      radial-gradient(circle at 20% 50%, rgba(201,155,95,.05) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(201,155,95,.04) 0%, transparent 42%);
  }
  /* ══════════════════════════════════════════════════════════════
    PRODUCT CARDS
  ══════════════════════════════════════════════════════════════ */
  .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.7rem; align-items: stretch; grid-auto-rows: 1fr; }
  .product-card {
    background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
    border: 1px solid var(--border-light);
    transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .5s ease;
    cursor: pointer;
    display: flex; flex-direction: column; box-shadow: var(--shadow-xs); position: relative;
    height: 100%; min-width: 0;
  }
  .product-card:hover { transform: translateY(-8px) scale(1.01); border-color: rgba(212,169,106,.3); box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 0 0 1px rgba(212,169,106,.15); }
  .img-wrapper {
    /* 4/5 (vertical) en vez de 1 (cuadrado): la foto pasa de ~40% a ~48%
       de la altura de la card -- la fotografia del perfume gana presencia
       frente al bloque de texto, y encaja mejor con la forma vertical
       natural de un frasco. Cambio medido en catalogo desktop/mobile antes
       de aplicarlo (auditoria UX/UI). */
    position: relative; aspect-ratio: 4 / 5;
    background: radial-gradient(circle at 50% 38%, #fff, var(--cream-0));
    overflow: hidden; display: flex; align-items: center; justify-content: center;
  }
  [data-theme="dark"] .img-wrapper { background: radial-gradient(circle at 50% 38%, #2a1f14, #1a120b); }
  .img-wrapper img {
    width: 100%; height: 100%; object-fit: contain; padding: 1.3rem;
    transition: transform .8s cubic-bezier(.16,1,.3,1);
  }
  .product-card:hover .img-wrapper img { transform: scale(1.08); }
  .product-badge {
    position: absolute; top: .85rem; left: .85rem; background: var(--gold); color: #fff;
    font-size: .64rem; font-weight: 700; padding: .28rem .72rem; border-radius: var(--r-pill);
    letter-spacing: .07em; text-transform: uppercase; z-index: 2; box-shadow: none;
  }
  .product-badge.new { background: var(--success); }
  .product-badge.tester { background: var(--brown-2); }
  .product-badge.nicho { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); }
  .product-info {
    padding: 1.4rem 1.5rem 1.6rem; flex: 1; display: flex; flex-direction: column; gap: .3rem;
    border-top: 1px solid var(--border-light); min-width: 0; overflow: hidden;
  }
  .product-category { font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); font-weight: 600; }
  .product-name { font-family: var(--font-display); font-size: 1.25rem; color: var(--text-primary); font-weight: 400; letter-spacing: .01em; line-height: 1.25; }
  .product-brand { font-size: .75rem; color: var(--text-muted); letter-spacing: .02em; }
  .product-price { font-size: 1.1rem; font-weight: 700; color: var(--gold-deep); margin-top: auto; padding-top: .7rem; letter-spacing: .02em; white-space: nowrap; }
  /* Precio promocional: solo se pinta si productPromoInfo() encontro un
     regularPrice real -- ver script.js. "Antes" pequeno y tachado, %
     discreto, precio final domina. Sin rojo, sin badge grande. */
  .product-price:has(.price-final) {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem;
    white-space: normal;
  }
  .price-regular {
    font-size: .74rem; font-weight: 500; color: var(--text-muted);
    text-decoration: line-through; text-decoration-color: rgba(150,120,90,.55);
    order: 1;
  }
  .price-pct {
    font-size: .68rem; font-weight: 600; color: var(--gold-deep);
    order: 2;
  }
  .price-final {
    font-size: 1.1rem; font-weight: 700; color: var(--gold-deep);
    order: 3; flex-basis: 100%;
  }
  .price-special-label {
    order: 0; flex-basis: 100%; font-size: .62rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  }
  /* ── Decant promo badge ───────────────────────────────────── */
  .price-promo-badge {
    display: inline-block; padding: .15rem .5rem; border-radius: var(--r-pill);
    background: var(--gold-deep); color: #fff; font-size: .58rem;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    line-height: 1.3; white-space: nowrap;
  }
  .price-promo-note {
    display: block; width: 100%; font-size: .55rem; color: var(--text-muted);
    letter-spacing: .03em; line-height: 1.2; margin-top: .1rem;
  }
  .modal-promo-note {
    font-size: .72rem; color: var(--gold-deep); font-weight: 500;
    text-align: center; margin: -.5rem 0 .8rem; letter-spacing: .02em;
  }
  [data-theme="dark"] .price-promo-badge {
    background: var(--gold-light); color: #1a120b;
  }
  [data-theme="dark"] .modal-promo-note {
    color: var(--gold-light);
  }
  .btn-add {
    width: 100%; margin-top: .8rem; padding: .7rem; background: transparent; border: 1.5px solid var(--border);
    color: var(--text-secondary); border-radius: var(--r-pill); font-weight: 600; font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase; transition: all .4s cubic-bezier(.16,1,.3,1); font-family: var(--font-body);
  }
  .btn-add:hover { background: var(--text-primary); border-color: var(--text-primary); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.15); transform: translateY(-2px); }
  .product-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep));
    opacity: 0; transition: opacity var(--t-base); z-index: 3;
  }
  .product-card:hover::before { opacity: 1; }
  /* ══════════════════════════════════════════════════════════════
    TRUST CARDS
  ══════════════════════════════════════════════════════════════ */
  .trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.8rem; }
  .trust-card {
    text-align: center; padding: 2.6rem 1.8rem; background: var(--surface); border-radius: var(--r-lg);
    border: 1px solid var(--border-light); box-shadow: var(--shadow-xs); transition: all var(--t-spring);
    position: relative; overflow: hidden;
  }
  .trust-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
    transform: scaleX(0); transition: transform var(--t-base); transform-origin: left;
  }
  .trust-card:hover::after { transform: scaleX(1); }
  .trust-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-gold); border-color: var(--gold-pale); }
  .trust-icon-wrap {
    width: 70px; height: 70px; background: var(--gold-pale); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1.2rem; transition: all var(--t-spring);
  }
  .trust-card:hover .trust-icon-wrap { background: var(--gold); transform: scale(1.1) rotate(4deg); }
  .trust-icon { font-size: 1.75rem; }
  .trust-card h4 { font-family: var(--font-display); font-weight: 500; margin-bottom: .55rem; font-size: 1.15rem; color: var(--text-primary); }
  .trust-card p { color: var(--text-muted); font-size: .85rem; line-height: 1.68; }
  /* ══════════════════════════════════════════════════════════════
    PAGE HERO (Catálogo / Promos)
  ══════════════════════════════════════════════════════════════ */
  .page-hero { position: relative; min-height: 56vh; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; overflow: clip; background: #0d0a06; }
  .page-hero-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    /* brightness(.4) dejaba la foto casi negra bajo el overlay (ver AUTOCRÃTICA
       v1 más abajo, que oscureció el overlay por separado); .65 deja ver la
       fotografía de producto real (vitrina de perfumes / flat-lay de packs)
       sin sacrificar la legibilidad del texto, que sigue sobre la franja más
       oscura del overlay. */
    filter: brightness(.65) saturate(.95); z-index: 0; transition: filter .6s ease, transform 10s ease; transform: scale(1.05);
  }
  .page-hero:hover .page-hero-img { filter: brightness(.7) saturate(.95); transform: scale(1); }
  .page-hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(5,5,5,.12) 0%, rgba(5,5,5,.7) 80%, rgba(5,5,5,.9) 100%);
  }
  .page-hero-content { position: relative; z-index: 2; max-width: 820px; width: 100%; padding: 3rem 2rem 3.6rem; text-align: center; }
  .page-hero-content .section-eyebrow, .page-hero-content .section-title { margin-bottom: .6rem; }
  /* ══════════════════════════════════════════════════════════════
    SEARCH
  ══════════════════════════════════════════════════════════════ */
  .search-box-wrapper { margin-top: 1.9rem; display: flex; justify-content: center; }
  .search-box { position: relative; width: 100%; max-width: 460px; }
  .search-icon { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.55); font-size: .85rem; pointer-events: none; z-index: 2; }
  .search-box input {
    width: 100%; padding: .9rem 1.4rem .9rem 2.8rem; border-radius: var(--r-pill);
    border: 1.5px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: #fff;
    font-size: .88rem; outline: none; font-family: var(--font-body); transition: all var(--t-base); backdrop-filter: blur(8px);
  }
  .search-box input::placeholder { color: rgba(255,255,255,.5); }
  .search-box input:focus { border-color: var(--gold-light); background: rgba(255,255,255,.16); box-shadow: 0 0 0 5px rgba(212,169,106,.14); }
  .search-suggestions {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    max-height: 300px; overflow-y: auto; z-index: 20; text-align: left; animation: suggestIn .25s ease;
  }
  @keyframes suggestIn { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
  .search-suggestion-item {
    display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem; cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast); border-bottom: 1px solid var(--border-light);
  }
  .search-suggestion-item:last-child { border-bottom: none; }
  .search-suggestion-item:hover { background: var(--cream-1); transform: translateX(4px); }
  .search-suggestion-item img { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: contain; padding: 3px; background: var(--cream-0); flex-shrink: 0; }
  .sug-name  { font-weight: 600; color: var(--text-primary); flex:1; font-size:.85rem; }
  .sug-brand { font-size:.72rem; color: var(--text-muted); }
  .search-no-results { padding: 1.2rem; text-align: center; color: var(--text-muted); font-size: .88rem; }
  /* ══════════════════════════════════════════════════════════════
    FILTERS
  ══════════════════════════════════════════════════════════════ */
  .filters-wrapper {
    margin-bottom: 2.8rem; background: var(--surface); border: 1px solid var(--border-light);
    border-radius: var(--r-lg); padding: 1.6rem 2rem; box-shadow: var(--shadow-xs);
  }
  .filters-row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
  .filter-group { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
  .filter-group-label { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
  .filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
  .filter-separator { width: 1px; height: 54px; background: var(--border); flex-shrink: 0; margin: 0 .5rem; }
  .filter-btn {
    padding: .55rem 1.3rem; border-radius: var(--r-pill); border: 1.5px solid var(--border);
    background: var(--surface-warm); color: var(--text-secondary); font-size: .78rem; font-weight: 500;
    letter-spacing: .03em; transition: all var(--t-spring); font-family: var(--font-body); white-space: nowrap;
  }
  .filter-btn:hover { border-color: var(--gold-light); color: var(--gold); background: var(--gold-pale); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(201,155,95,.16); }
  .filter-btn.active {
    border-color: var(--gold); background: linear-gradient(135deg, var(--gold-pale) 0%, rgba(230,233,236,.5) 100%);
    color: var(--gold-deep); font-weight: 700; box-shadow: 0 4px 14px rgba(201,155,95,.26); transform: translateY(-1px);
  }
  /* ══════════════════════════════════════════════════════════════
    PROMO CARDS
  ══════════════════════════════════════════════════════════════ */
  .promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.9rem;
  }
  .promo-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border-light);
    text-align: center;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
    cursor: pointer;
    position: relative;
    /* Sombra en capas para profundidad sutil */
    box-shadow:
      0 1px 2px rgba(10,10,10,.04),
      0 4px 10px rgba(10,10,10,.05),
      0 12px 26px rgba(10,10,10,.06);
    display: flex;
    flex-direction: column;
  }
  .promo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep));
    opacity: 0;
    transition: opacity var(--t-base);
  }
  .promo-card:hover::before { opacity: 1; }
  .promo-card:hover {
    border-color: var(--gold-light);
    box-shadow:
      0 4px 10px rgba(201,155,95,.12),
      0 14px 30px rgba(201,155,95,.18),
      0 28px 54px rgba(201,155,95,.16);
    transform: translateY(-6px);
  }
  /* Entrada al hacer scroll: fade-up + escala sutil (sobre el reveal existente) */
  .promo-card.reveal-item { transform: translateY(24px) scale(.965); }
  .promo-card.reveal-item.visible { transform: translateY(0) scale(1); }
  /* Banda de imagen (≈40% superior de la tarjeta) */
  .promo-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  /* Placeholder dorado con icono + cantidad (visible mientras no haya foto real) */
  .promo-media-fallback {
    position: absolute; inset: 0; z-index: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    background:
      radial-gradient(circle at 28% 22%, rgba(255,255,255,.55), transparent 52%),
      linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 52%, var(--gold-deep) 100%);
    color: #fff;
  }
  .promo-media-icon { font-size: 2.7rem; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,.2)); }
  .promo-media-count {
    font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255,255,255,.94);
  }
  .promo-img {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    opacity: 0; transition: transform .6s cubic-bezier(.22,.7,.3,1), opacity .5s ease;
  }
  .promo-img.img-loaded { opacity: 1; }
  .promo-card:hover .promo-img { transform: scale(1.03); }
  /* Cuerpo de texto */
  .promo-body {
    display: flex; flex-direction: column; flex: 1;
    padding: 1.3rem 1.5rem 1.5rem;
  }
  .promo-card h3 {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 400;
    margin: 0 0 0.4rem;
    line-height: 1.25;
  }
  .promo-desc {
    color: var(--text-muted);
    font-size: 0.83rem;
    margin-bottom: 0.6rem;
    line-height: 1.55;
    flex-grow: 1;
  }
  .promo-meta {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
  }
  .promo-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold-deep);
    letter-spacing: 0.02em;
    margin: 0.5rem 0 0.8rem;
    font-family: var(--font-display);
  }
  /* Badge */
  .promo-badge {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    background: var(--danger);
    color: #fff;
    font-size: 0.67rem;
    font-weight: 700;
    padding: 0.32rem 0.75rem;
    border-radius: var(--r-pill);
    letter-spacing: 0.05em;
    z-index: 3;
    box-shadow: 0 4px 14px rgba(168, 50, 40, 0.3);
    animation: badgePulse 2.2s infinite;
  }
  @keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
  }
  /* Botón "Seleccionar Perfumes" */
  .promo-card .btn-add {
    margin: 0.7rem 0 0;
    display: inline-block;
    width: 100%;
    padding: 0.7rem 1.5rem;
    background: transparent;
    border: 1.5px solid var(--gold);
    color: var(--gold-deep);
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: all var(--t-base);
    font-family: var(--font-body);
    align-self: center;
  }
  .promo-card .btn-add:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
    box-shadow: var(--shadow-gold);
    transform: translateY(-2px);
  }
  /* ══════════════════════════════════════════════════════════════
    MODAL — SHARED
  ══════════════════════════════════════════════════════════════ */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 2000; background: rgba(5,5,5,.62);
    backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
    display: flex; align-items: center; justify-content: center; padding: 1.2rem;
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-base), backdrop-filter var(--t-base), -webkit-backdrop-filter var(--t-base);
  }
  .modal-overlay.active {
    opacity: 1; pointer-events: all;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    background: rgba(5,5,5,.66);
  }
  .modal {
    background: var(--surface); border-radius: var(--r-xl); max-width: 500px; width: 100%;
    max-height: 92vh; overflow-y: auto; border: 1px solid var(--border-light); position: relative;
    transform: scale(.9); opacity: 0;
    transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s ease;
    box-shadow: 0 44px 90px rgba(5,5,5,.26);
  }
  .modal-overlay.active .modal { transform: scale(1); opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .modal { transition: opacity .2s ease; transform: none; }
  }
  .modal-close {
    position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,.85); border: 1px solid var(--border-light);
    color: var(--text-muted); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 1rem; transition: all var(--t-base); z-index: 6; backdrop-filter: blur(6px);
  }
  .modal-close:hover { background: var(--cream-3); color: var(--text-primary); transform: rotate(90deg); }
  /* ── PRODUCT MODAL — two-column on desktop, balanced image ── */
  .modal:not(.pack-modal) { max-width: 820px; }
  @media (min-width: 760px) {
    .modal:not(.pack-modal) { display: grid; grid-template-columns: 0.92fr 1fr; align-items: stretch; }
  }
  .modal-image {
    background: radial-gradient(circle at 50% 40%, #fff, var(--cream-0));
    overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 260px;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  @media (min-width: 760px) {
    .modal-image { border-radius: var(--r-xl) 0 0 var(--r-xl); height: 100%; }
  }
  .modal-image img {
    width: 100%; height: 100%; max-height: 460px; object-fit: contain; /* contain = no oversize/crop */
    padding: 2rem; transition: transform .5s ease;
  }
  .modal-image:hover img { transform: scale(1.04); }
  .modal-body { padding: 2rem 1.9rem 2.1rem; display: flex; flex-direction: column; }
  @media (min-width: 760px) { .modal-body { justify-content: center; } }
  .modal h2 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; text-align: center; margin-bottom: .15rem; color: var(--text-primary); line-height: 1.18; }
  .modal-brand { text-align: center; color: var(--gold); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: 1.1rem; }
  /* Condición real (Tester / Parcial): pastilla discreta, no una alerta --
     mismo lenguaje editorial que .presentation-chip pero para el fondo
     claro del modal. Visible junto a marca/precio, nunca escondida. */
  .modal-condition {
    display: table; margin: -.6rem auto 1.1rem;
    background: var(--surface-warm, var(--cream-1)); color: var(--text-secondary);
    border: 1px solid var(--border); border-radius: var(--r-pill);
    padding: .3rem .85rem; font-size: .68rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
  }
  .modal-notes { text-align: center; color: var(--text-muted); font-size: .84rem; line-height: 1.7; margin-bottom: 1.5rem; padding: 0 .25rem; white-space: pre-line; }
  .tab-switch {
    display: flex; justify-content: center; margin: 0 auto 1.4rem; background: var(--cream-2);
    border-radius: var(--r-pill); padding: .28rem; width: fit-content;
  }
  .tab-switch button {
    padding: .55rem 1.6rem; border-radius: var(--r-pill); border: none; background: transparent;
    color: var(--text-muted); font-weight: 500; font-size: .8rem; font-family: var(--font-body);
    letter-spacing: .04em; transition: all var(--t-base);
  }
  .tab-switch button.active { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #fff; font-weight: 600; box-shadow: 0 4px 14px rgba(201,155,95,.36); }
  .tab-switch button:not(.active):hover { color: var(--gold); }
  .size-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.4rem; }
  .size-option {
    min-height: 62px; padding: .55rem .8rem; border-radius: var(--r-md); border: 1.5px solid var(--border);
    background: var(--surface-warm); color: var(--text-primary); font-weight: 500;
    transition: all var(--t-base); font-family: var(--font-body);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    position: relative;
  }
  .size-option__label { font-size: .82rem; line-height: 1.2; font-weight: 600; }
  .size-option__price { font-size: .76rem; font-weight: 700; color: var(--gold-deep); letter-spacing: .02em; }
  .size-option:hover { border-color: var(--gold-light); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(201,155,95,.14); }
  .size-option.selected { border-color: var(--gold); background: var(--gold-pale); color: var(--gold-deep); font-weight: 700; box-shadow: 0 4px 16px rgba(201,155,95,.3); animation: sizePop .3s ease; }
  .size-option--premium { border-color: rgba(201,155,95,.55); background: linear-gradient(160deg, rgba(201,155,95,.12), rgba(201,155,95,.02) 68%); }
  .size-option--premium .size-option__label { color: var(--gold-deep); }
  .size-option--premium .size-option__label::before { content: "✦ "; font-size: .8em; }
  .size-option--premium.selected { background: linear-gradient(160deg, var(--gold-pale), rgba(201,155,95,.28)); }
  [data-theme="dark"] .size-option--premium .size-option__label { color: var(--gold-light); }
  [data-theme="dark"] .size-option--premium .size-option__price { color: var(--gold-light); }
  @keyframes sizePop { 0% { transform: scale(1); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }
  .size-options { gap: .55rem; }
  .modal-price-display { text-align: center; font-size: 1.6rem; font-weight: 700; color: var(--gold-deep); margin-bottom: 1.4rem; font-family: var(--font-display); letter-spacing: .02em; display: flex; align-items: center; justify-content: center; gap: .55rem; flex-wrap: wrap; }
  /* Precio promocional en el modal: mismo criterio que la card, con el
     precio final restaurado al tamaño dominante propio del modal. */
  .modal-price-display .price-final { font-size: 1.6rem; }
  .modal-price-display .price-regular { font-family: var(--font-body); }
  .modal-price-display .price-special-label { font-family: var(--font-body); }
  .price-size-badge {
    font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    color: #fff; background: var(--color-black);
    padding: .2rem .6rem; border-radius: var(--r-pill); box-shadow: 0 3px 10px rgba(201,155,95,.34);
  }
  .btn-add-large {
    display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; padding: .95rem;
    background: var(--text-primary); color: #fff; border: none; border-radius: var(--r-pill);
    font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
    transition: all var(--t-spring); font-family: var(--font-body);
  }
  .btn-add-large:hover { background: var(--gold-deep); box-shadow: var(--shadow-gold); transform: translateY(-2px); }
  /* ══════════════════════════════════════════════════════════════
    MODAL — PACK (rediseñado, flujo unificado)
  ══════════════════════════════════════════════════════════════ */
  .pack-modal { max-width: 760px; max-height: 92vh; display: flex; flex-direction: column; }
  .pack-modal .modal-body { padding: 2.2rem 2rem 1.6rem; display: flex; flex-direction: column; }
  .pack-modal h2 {
    position: relative; padding-bottom: 1rem; margin-bottom: .4rem;
  }
  .pack-modal h2::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 56px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-light), var(--gold));
  }
  .pack-modal-desc { text-align: center; color: var(--text-muted); font-size: .88rem; line-height: 1.62; margin-bottom: 1.2rem; }
  /* Selector de tamaño compacto */
  .pack-size-selector {
    display: flex; align-items: center; gap: 1rem; justify-content: center; flex-wrap: wrap;
    background: var(--surface-warm); border: 1px solid var(--border-light);
    border-radius: var(--r-md); padding: .9rem 1.2rem; margin-bottom: .4rem;
  }
  .pack-size-label {
    font-size: .75rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-secondary); white-space: nowrap;
  }
  #packGroupPrice:not(:empty) {
    background: var(--gold-pale); border-radius: var(--r-md); padding: .6rem 1rem;
    font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-deep); font-weight: 700;
    text-align: center;
  }
  /* Product grid */
  .pack-product-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .85rem;
    max-height: 38vh; overflow-y: auto; padding: .3rem; margin-bottom: .5rem;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .pack-product-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .pack-product-item {
    background: var(--surface-warm); border: 1.5px solid var(--border); border-radius: var(--r-md);
    padding: .85rem .7rem; text-align: center; cursor: pointer; transition: all var(--t-base);
    display: flex; flex-direction: column; align-items: center; gap: .4rem; position: relative;
    /* Rendimiento: el navegador solo pinta las tarjetas visibles del grid
       (hasta ~112 items en packs de nicho) sin cambiar el DOM. */
    content-visibility: auto; contain-intrinsic-size: 124px;
  }
  .pack-product-item::after {
    content: '\2713'; position: absolute; top: .5rem; right: .5rem; width: 22px; height: 22px;
    background: var(--gold); color: #fff; border-radius: 50%; font-size: .72rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.4);
    transition: all var(--t-spring); box-shadow: 0 2px 8px rgba(201,155,95,.4);
  }
  .pack-product-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-gold); border-color: var(--gold-light); }
  .pack-product-item.selected { border-color: var(--gold); background: var(--gold-pale); box-shadow: 0 0 0 3px rgba(201,155,95,.22); }
  .pack-product-item.selected::after { opacity: 1; transform: scale(1); }
  .pack-product-item img { width: 66px; height: 66px; object-fit: contain; padding: 3px; border-radius: var(--r-sm); background: #fff; }
  .pack-product-name { font-size: .74rem; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
  .pack-product-brand { font-size: .64rem; color: var(--text-muted); }
  .pack-counter-wrap { text-align: center; margin: 0; }
  .pack-counter { display: inline-block; font-size: .82rem; font-weight: 700; color: var(--gold-deep); background: var(--gold-pale); padding: .42rem 1.3rem; border-radius: var(--r-pill); letter-spacing: .04em; }
  .pack-modal #packConfirmBtn { margin-top: .8rem; flex-shrink: 0; }
  /* ══════════════════════════════════════════════════════════════
    CART SIDEBAR
  ══════════════════════════════════════════════════════════════ */
  .cart-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(5,5,5,.48); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .4s ease; }
  .cart-overlay.active { opacity:1; pointer-events:all; }
  .cart-sidebar {
    position: fixed; top: 0; right: 0; z-index: 3001; width: var(--cart-w, 420px); max-width: 100vw;
    height: 100vh; height: 100dvh; background: var(--surface); border-left: 1px solid var(--border);
    display: none; flex-direction: column; transform: translateX(100%);
    transition: transform .35s cubic-bezier(.16,1,.3,1); box-shadow: -18px 0 55px rgba(5,5,5,.16);
  }
  .cart-sidebar.mounted { display: flex; }
  .cart-sidebar.active { transform: translateX(0); }
  .cart-header { padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; background: var(--surface-warm); }
  .cart-header-left { display: flex; align-items: center; gap: .65rem; }
  .cart-header-icon { font-size: 1.05rem; color: var(--gold); }
  .cart-header h3 { font-family: var(--font-display); color: var(--text-primary); font-weight: 400; font-size: 1.1rem; letter-spacing: .03em; }
  .cart-header-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 .4rem; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #fff; font-size: .7rem; font-weight: 700; }
  .cart-close { background: var(--cream-2); border: none; color: var(--text-muted); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .95rem; transition: all var(--t-base); }
  .cart-close:hover { background: var(--cream-3); color: var(--text-primary); transform: rotate(90deg); }
  .cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
  .cart-empty { text-align: center; color: var(--text-muted); padding: 3rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
  .cart-empty-icon { font-size: 3.4rem; margin-bottom: .6rem; filter: drop-shadow(0 6px 14px rgba(10,10,10,.12)); }
  .cart-empty p { font-size: .92rem; color: var(--text-secondary); font-weight:500; }
  .cart-empty span { font-size: .82rem; }
  .cart-item { display: flex; gap: .8rem; padding: .85rem .9rem; background: var(--surface-warm); border-radius: var(--r-md); border: 1px solid var(--border-light); align-items: center; transition: box-shadow var(--t-fast), border-color var(--t-fast); position: relative; animation: cartItemIn .3s ease both; }
  @keyframes cartItemIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
  .cart-item.removing { animation: cartItemOut .25s ease forwards; }
  @keyframes cartItemOut { to { opacity: 0; transform: translateX(60px); } }
  .cart-item:hover { box-shadow: var(--shadow-sm); border-color: var(--gold-pale); }
  .cart-item > img, .cart-item .cart-gift-wrap > img:not(.cart-gift-thumb) {
    width: 60px; height: 60px; border-radius: var(--r-sm); object-fit: contain; padding: 4px; background: #fff;
    flex-shrink: 0; box-shadow: 0 2px 10px rgba(26,18,11,.08); border: 1px solid var(--border-light);
  }
  .cart-item .cart-gift-wrap { align-self: center; }
  @media (prefers-reduced-motion: reduce) { .cart-item { animation: none; } }
  .cart-item-info { flex:1; min-width:0; display: flex; flex-direction: column; gap: .12rem; }
  .cart-item-name { font-weight: 600; color: var(--text-primary); font-size: .82rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cart-item-meta { font-size: .69rem; color: var(--text-muted); }
  .cart-item-price { font-weight: 700; color: var(--gold-deep); font-size: .86rem; margin-top: .1rem; }
  .cart-item-qty { display: flex; align-items: center; gap: .2rem; flex-shrink: 0; margin-left: .2rem; }
  .cart-item-qty button { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: .88rem; display: flex; align-items: center; justify-content: center; transition: all var(--t-fast); font-weight: 600; }
  .cart-item-qty button:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-pale); }
  .cart-item-qty button:active { transform: scale(.88); }
  .cart-item-qty span { font-size:.86rem; font-weight:700; min-width:20px; text-align:center; transition: transform var(--t-fast); }
  .cart-item-remove { background: none; border: none; color: var(--text-light); font-size: .8rem; padding: .3rem; flex-shrink: 0; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; transition: all var(--t-fast); }
  .cart-item-remove:hover { color: var(--danger); background: rgba(168,50,40,.08); }
  .cart-footer { padding: 1rem 1.1rem 1.2rem; border-top: 1px solid var(--border-light); flex-shrink: 0; background: var(--surface); }
  .cart-total { display: flex; justify-content: space-between; align-items: center; font-size: .86rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .9rem; padding-bottom: .85rem; border-bottom: 1px dashed var(--border); }
  .cart-total span:last-child { font-size: 1.3rem; font-weight: 700; color: var(--gold-deep); font-family: var(--font-display); }
  .cart-breakdown, .checkout-breakdown { margin-bottom: .55rem; padding-bottom: .6rem; border-bottom: 1px dashed var(--border); }
  .bd-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; font-size: .78rem; color: var(--text-secondary); padding: .18rem 0; }
  .bd-row span:last-child { white-space: nowrap; font-weight: 600; }
  .bd-disc { color: #2e7d32; }
  .bd-disc span:last-child { color: #2e7d32; }
  [data-theme="dark"] .bd-disc, [data-theme="dark"] .bd-disc span:last-child { color: #6fbf73; }
  .bd-good { color: var(--gold-deep); }
  .bd-good span:last-child { color: var(--gold-deep); }
  .btn-checkout {
    display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; padding: .95rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #fff; border: none; border-radius: var(--r-pill);
    font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; transition: all var(--t-spring); font-family: var(--font-body);
    box-shadow: 0 6px 18px rgba(201,155,95,.3);
  }
  .btn-checkout:hover { box-shadow: var(--shadow-gold); transform: translateY(-2px); }
  .btn-checkout i { transition: transform var(--t-base); }
  .btn-checkout:hover i { transform: translateX(4px); }
  [data-theme="dark"] .btn-checkout { color: #1a120c; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
  [data-theme="dark"] .btn-checkout:hover { box-shadow: 0 16px 44px rgba(0,0,0,.5); }
  /* ══════════════════════════════════════════════════════════════
    CHECKOUT PAGE
  ══════════════════════════════════════════════════════════════ */
  .checkout-wrapper { min-height: 80vh; padding: 4rem 1.5rem; }
  .checkout-container { max-width: 700px; margin: 0 auto; background: var(--surface); border-radius: var(--r-xl); border: 1px solid var(--border-light); box-shadow: var(--shadow-lg); overflow: hidden; animation: pageIn .5s ease; }
  .checkout-header { background: var(--brown-1); padding: 2.6rem 2rem 2.1rem; text-align: center; }
  .checkout-header .section-eyebrow { color: var(--gold-light); margin-bottom: .5rem; }
  .checkout-header .section-eyebrow::before, .checkout-header .section-eyebrow::after { background: rgba(212,169,106,.5); }
  .checkout-title { font-family: var(--font-display); font-weight: 400; font-size: 2.1rem; color: #fff; letter-spacing: .02em; }
  #checkout-empty-cart, #checkout-form-wrapper { padding: 2.2rem; }
  .form-section-title { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.2rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border-light); }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .form-group { margin-bottom: 1.1rem; }
  .form-group label { display: block; font-size: .73rem; font-weight: 600; color: var(--text-muted); margin-bottom: .35rem; letter-spacing: .06em; text-transform: uppercase; }
  .form-group input { width: 100%; padding: .8rem 1rem; border-radius: var(--r-sm); border: 1.5px solid var(--border); background: var(--surface-warm); color: var(--text-primary); font-size: .9rem; outline: none; font-family: var(--font-body); transition: all var(--t-base); }
  .form-group input::placeholder { color: var(--text-light); }
  .form-group input:focus { border-color: var(--gold); background: var(--surface); box-shadow: 0 0 0 4px rgba(201,155,95,.1); }
  .checkout-summary { background: var(--surface-warm); border-radius: var(--r-md); padding: 1.5rem; margin: 1.6rem 0; border: 1px solid var(--border-light); }
  .checkout-summary-item { display: flex; align-items: center; gap: .9rem; padding: .6rem 0; border-bottom: 1px solid var(--border-light); }
  .checkout-summary-item:last-child { border-bottom: none; }
  .checkout-summary-item img { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: contain; padding: 2px; background: #fff; flex-shrink: 0; }
  .checkout-summary-total { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 1rem; color: var(--text-primary); border-top: 1.5px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
  .checkout-summary-total span:last-child { font-size: 1.35rem; color: var(--gold-deep); font-family: var(--font-display); }
  .btn-whatsapp {
    display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; padding: 1rem;
    background: var(--whatsapp); color: #fff; border: none; border-radius: var(--r-pill);
    font-weight: 700; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; transition: all var(--t-spring); font-family: var(--font-body);
  }
  .btn-whatsapp i { font-size: 1.15rem; }
  .btn-whatsapp:hover { background: #1ebe5b; box-shadow: 0 12px 34px rgba(37,211,102,.42); transform: translateY(-2px); }
  .checkout-note { font-size: .73rem; color: var(--text-muted); text-align: center; margin-top: .9rem; line-height: 1.6; }
  /* ══════════════════════════════════════════════════════════════
    TOAST
  ══════════════════════════════════════════════════════════════ */
  .toast {
    position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(120px);
    background: var(--brown-1); color: #fff; padding: .85rem 1.5rem .85rem 1.15rem; border-radius: var(--r-pill);
    font-weight: 600; font-size: .82rem; z-index: 5000;
    transition: transform var(--t-spring), opacity var(--t-base);
    opacity: 0; pointer-events: none; box-shadow: 0 16px 38px rgba(10,10,10,.28);
    border: 1px solid rgba(212,169,106,.18); letter-spacing: .02em;
    max-width: calc(100vw - 2rem); text-align: left;
    display: inline-flex; align-items: center; gap: .7rem;
  }
  .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
  .toast-icon {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800; color: #fff; line-height: 1;
  }
  .toast-msg { line-height: 1.35; }
  .toast-success { border-color: rgba(58,156,110,.35); }
  .toast-success .toast-icon { background: var(--success, #3a9c6e); }
  .toast-error { border-color: rgba(210,75,75,.35); }
  .toast-error .toast-icon { background: #d24b4b; }
  .toast-info { border-color: rgba(212,169,106,.35); }
  .toast-info .toast-icon { background: var(--gold); color: #1A120B; }
  /* ══════════════════════════════════════════════════════════════
    FOOTER
  ══════════════════════════════════════════════════════════════ */
  .footer { background: var(--brown-0); border-top: 1px solid rgba(255,255,255,.05); padding: 4.5rem 2rem 1.9rem; color: rgba(255,255,255,.6); margin-top: 3rem; }
  .footer-inner { max-width: var(--max-w); margin: 0 auto 2.6rem; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 3rem; }
  .footer-logo { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; }
  .footer-logo-img { width: 38px; height: 38px; object-fit: contain; filter: brightness(.95); }
  .footer-logo-name { font-size: .78rem; font-weight: 700; letter-spacing: .15em; color: rgba(255,255,255,.9); }
  .footer-tagline { font-size: .82rem; line-height: 1.7; margin-bottom: 1.3rem; color: rgba(255,255,255,.48); }
  .footer-col h4 { font-family: var(--font-display); color: rgba(255,255,255,.92); font-weight: 400; margin-bottom: 1.05rem; font-size: 1.05rem; letter-spacing: .03em; }
  .footer-col a, .footer-col p { display: block; color: rgba(255,255,255,.48); text-decoration: none; font-size: .82rem; margin-bottom: .55rem; transition: color var(--t-fast), transform var(--t-fast); line-height: 1.7; cursor: pointer; background: none; border: none; padding: 0; text-align: left; font-family: var(--font-body); }
  .footer-col a:hover { color: var(--gold-light); transform: translateX(4px); }
  .social-links { display: flex; gap: .6rem; margin-top: .9rem; }
  .social-links a { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.65); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: .85rem; transition: all var(--t-base); }
  .social-links a:hover { background: var(--gold); border-color: var(--gold); color: #fff; transform: translateY(-3px); box-shadow: 0 8px 22px rgba(201,155,95,.4); }
  .footer-bottom { max-width: var(--max-w); margin: 0 auto; text-align: center; padding-top: 1.7rem; border-top: 1px solid rgba(255,255,255,.07); font-size: .76rem; color: rgba(255,255,255,.32); line-height: 1.8; }
  .footer-signature { margin-top: .35rem; }
  .footer-signature a { color: var(--gold); font-weight: 600; transition: color var(--t-fast); }
  .footer-signature a:hover { color: var(--gold-light); }
  /* ══════════════════════════════════════════════════════════════
    SCROLL REVEAL
  ══════════════════════════════════════════════════════════════ */
  .reveal-item { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; will-change: opacity, transform; }
  .reveal-item.visible { opacity: 1; transform: translateY(0); will-change: auto; }
  /* ══════════════════════════════════════════════════════════════
    PERFORMANCE — render skipping for offscreen blocks
  ══════════════════════════════════════════════════════════════ */
  .section-trust,
  #contenido,
  .footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
  }
  /* ══════════════════════════════════════════════════════════════
    RESPONSIVE
  ══════════════════════════════════════════════════════════════ */
  @media (max-width: 1024px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; } }
  @media (max-width: 900px) {
    /* Drawer lateral derecho (antes: dropdown debajo del header, sin
       backdrop, con muchisimo espacio vertical vacio entre 3 links y sin
       las utilidades que deberian haber salido del header). Mismo patron
       visual que .cart-sidebar (surface + shadow + slide-in). */
    .nav {
      /* align-items:center venia heredado de la regla desktop (.nav es la
         misma barra horizontal ahi) -- en columna, "center" encoge cada
         seccion a su ancho de contenido y la centra como isla flotante,
         en vez de dejarla ocupar el ancho completo alineada a la
         izquierda. Eso es la causa real del "vacio vertical" y de que el
         selector de tema se sintiera como un widget aparte: no era solo
         espaciado, era que cada bloque quedaba angosto y descolgado. */
      display: flex; flex-direction: column; align-items: stretch;
      position: fixed; top: 0; right: 0; bottom: 0; left: auto;
      width: min(320px, 85vw); background: var(--surface);
      padding: 0 0 calc(1.4rem + env(safe-area-inset-bottom, 0px));
      box-shadow: -12px 0 40px rgba(0,0,0,.25); z-index: var(--z-drawer);
      overflow-y: auto;
      transform: translateX(100%); pointer-events: none;
      transition: transform .32s cubic-bezier(.22,.7,.3,1);
    }
    .nav.open { transform: translateX(0); pointer-events: all; }
    @media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
    .nav-drawer-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: calc(1.1rem + env(safe-area-inset-top, 0px)) 1.4rem 1rem;
      border-bottom: 1px solid var(--border-light);
    }
    .nav-drawer-title {
      font-family: var(--font-display); font-size: 1rem; font-weight: 600;
      letter-spacing: .04em; color: var(--text-primary);
    }
    .nav-close {
      background: none; border: none; color: var(--text-muted); cursor: pointer;
      width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
      border-radius: 50%; transition: background var(--t-fast), color var(--t-fast);
    }
    .nav-close:hover { background: var(--surface-warm); color: var(--gold-deep); }
    .nav-links { display: flex; flex-direction: column; padding: .6rem 1.4rem 0; gap: .1rem; }
    .nav a {
      font-size: 1rem; font-weight: 600; letter-spacing: .02em; text-transform: none;
      padding: .85rem 0; color: var(--text-primary); min-height: 44px;
      display: flex; align-items: center;
    }
    .nav a::after { background: var(--gold); }
    .nav a:hover, .nav a.active { color: var(--gold-deep); }
    .nav-divider { display: block; height: 1px; background: var(--border-light); margin: .8rem 1.4rem; }
    .nav-utilities { display: flex; flex-direction: column; padding: 0 1.4rem; gap: .1rem; }
    .nav-util-link {
      display: flex; align-items: center; gap: .7rem;
      padding: .7rem 0; color: var(--text-secondary); font-size: .88rem; font-weight: 500;
      text-decoration: none;
    }
    .nav-util-link i { width: 18px; text-align: center; color: var(--gold-deep); font-size: 1rem; }
    [data-theme="dark"] .nav-util-link i { color: var(--gold-light); }
    .nav-util-link:hover { color: var(--gold-deep); }
    .nav-theme {
      display: flex; align-items: center; justify-content: space-between;
      padding: .9rem 1.4rem 0; margin-top: .3rem;
    }
    .nav-theme-label { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
    .nav-theme-switch { display: flex; background: var(--surface-warm); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
    .nav-theme-opt {
      border: none; background: none; cursor: pointer;
      padding: .4rem .85rem; border-radius: var(--r-pill); font-size: .74rem; font-weight: 600;
      color: var(--text-muted); transition: all var(--t-fast); min-height: 32px;
    }
    .nav-theme-opt[aria-checked="true"] {
      background: linear-gradient(135deg, var(--gold-light), var(--gold));
      color: #1A120B;
    }
    /* margin-top:auto empujaba esta nota al fondo absoluto del drawer
       (height:100dvh), dejando un vacio enorme entre el selector de tema
       y "Lima, Peru" -- exactamente el "demasiado vacio vertical"
       reportado. Sin auto, sigue el flujo normal justo despues del tema:
       drawer compuesto por grupos relacionados y compactos, sin franjas
       muertas ni la sensacion de que el tema es un widget aislado. */
    .nav-footer-note {
      display: block; padding: 1.1rem 1.4rem 1.4rem;
      font-size: .74rem; color: var(--text-muted); letter-spacing: .04em;
    }
    .hamburger { display: flex; }
    .header-inner { padding: .65rem 1.2rem; gap: .8rem; }
    .logo-img { width: 40px; height: 40px; }
    .section { padding: 3.8rem 1.2rem; }
    .hero { min-height: 74vh; }
    .page-hero { min-height: 46vh; }
    .stat-item { padding: .4rem 1.6rem; }
    .product-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row { grid-template-columns: 1fr; }
    .cart-sidebar { width: 100%; max-width: 100%; }
    .filters-row { flex-direction: column; gap: 1.3rem; }
    .filter-separator { width: 60%; height: 1px; margin: 0; }
  }
  @media (max-width: 560px) {
    :root { --cart-w: 100vw; }
    .cart-item { gap: .7rem; padding: .8rem; }
    .cart-item > img, .cart-item .cart-gift-wrap > img:not(.cart-gift-thumb) { width: 54px; height: 54px; }
    .cart-header { padding: 1rem 1.1rem; }
    .cart-items { padding: .9rem .95rem; gap: .65rem; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
    .img-wrapper img { padding: .9rem; }
    .product-name  { font-size: 1.02rem; }
    .product-price { font-size: .92rem; }
    .product-info { padding: 1rem 1rem 1.2rem; }
    .hero h1 { font-size: 2rem; }
    .hero p  { font-size: .9rem; }
    .hero-cta-group .btn { padding: .72rem 1.3rem; font-size: .74rem; }
    .logo-text { display: none; }
    .filter-btn { padding: .5rem 1rem; font-size: .75rem; }
    .search-bar { border-radius: var(--r-md); }
    .search-bar input { padding: .6rem .65rem; font-size: .85rem; }
    .stats-inner { flex-wrap: wrap; }
    .stat-item { padding: .6rem 1.2rem; }
    .stat-divider { display: none; }
    .footer-inner { grid-template-columns: 1fr; gap: 1.6rem; }
    .filters-wrapper { padding: 1.2rem 1rem; }
    .pack-product-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .pack-product-item img { width: 56px; height: 56px; }
    .checkout-wrapper { padding: 2rem 1rem; }
    #checkout-form-wrapper { padding: 1.6rem 1rem; }
    .modal h2 { font-size: 1.5rem; }
  }
  /* ══════════════════════════════════════════════════════════════
    REDUCED MOTION — respeta preferencias de accesibilidad
  ══════════════════════════════════════════════════════════════ */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
    .reveal-item { opacity: 1 !important; transform: none !important; }
    .hero-video { transform: none !important; }
  }
  /* ══════════════════════════════════════════════════════════════
    EFECTO 3D SUTIL + BRILLO — solo dispositivos con hover real
  ══════════════════════════════════════════════════════════════ */
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    /* Barrido de brillo sutil sobre la imagen, sin deformar la card */
    .img-wrapper::after {
      content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
      transform: translateX(-130%); transition: transform .8s ease;
    }
    .product-card:hover .img-wrapper::after { transform: translateX(130%); }
  }

  /* ══════════════════════════════════════════════════════════════
    SKELETON LOADERS (pulso dorado, fade-out al cargar)
  ══════════════════════════════════════════════════════════════ */
  @keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .img-wrapper::before {
    content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
    background-image: linear-gradient(100deg, var(--cream-1) 28%, rgba(212,169,106,.22) 50%, var(--cream-1) 72%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s ease-in-out infinite;
    transition: opacity .5s ease;
  }
  .img-wrapper.skeleton-done::before { opacity: 0; animation: none; }
  .img-wrapper img {
    position: relative; z-index: 1; opacity: 0;
    transition: transform .7s ease, opacity .5s ease;
  }
  .img-wrapper img.img-loaded { opacity: 1; }

  .promo-img {
    background-image: linear-gradient(100deg, var(--cream-1) 28%, rgba(212,169,106,.22) 50%, var(--cream-1) 72%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s ease-in-out infinite;
  }
  .promo-img.img-loaded { animation: none; background-image: none; background: var(--cream-1); }

  /* ══════════════════════════════════════════════════════════════
    FLY-TO-CART (miniatura que vuela al ícono del carrito)
  ══════════════════════════════════════════════════════════════ */
  .fly-to-cart {
    position: fixed; width: 56px; height: 56px; border-radius: 14px;
    object-fit: cover; z-index: 6000; pointer-events: none; background: #fff;
    border: 2px solid #fff; box-shadow: 0 12px 30px rgba(10,10,10,.35);
    transition: transform .55s cubic-bezier(.55,.06,.32,1), opacity .55s ease;
    will-change: transform, opacity;
  }
  @media (prefers-reduced-motion: reduce) {
    .img-wrapper::before, .promo-img { animation: none !important; }
    .img-wrapper img { opacity: 1 !important; }
  }

  /* ══════════════════════════════════════════════════════════════
    BOTÓN "VOLVER ARRIBA"
  ══════════════════════════════════════════════════════════════ */
  .back-to-top {
    position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px;
    border-radius: 50%; border: none; cursor: pointer; z-index: 4500;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: #fff; font-size: 1rem; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 26px rgba(201,155,95,.42);
    opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
    transition: opacity .3s ease, transform .3s ease, visibility .3s, box-shadow .3s ease;
  }
  .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  .back-to-top:hover { box-shadow: 0 14px 32px rgba(201,155,95,.55); transform: translateY(-2px) scale(1.06); }
  .back-to-top:active { transform: translateY(0) scale(.96); }
  @media (max-width: 560px) { .back-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; } }

  /* ══════════════════════════════════════════════════════════════
    VALIDACIÓN EN TIEMPO REAL — CHECKOUT
  ══════════════════════════════════════════════════════════════ */
  .form-group { position: relative; }
  .form-group input {
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  }
  .form-group .field-status {
    position: absolute; right: .85rem; bottom: .78rem; width: 20px; height: 20px;
    border-radius: 50%; display: none; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 800; color: #fff; pointer-events: none; line-height: 1;
  }
  .form-group.field-valid .field-status,
  .form-group.field-invalid .field-status { display: inline-flex; }
  .form-group.field-valid .field-status { background: var(--success, #3a9c6e); }
  .form-group.field-valid .field-status::before { content: "✓"; }
  .form-group.field-invalid .field-status { background: #d24b4b; }
  .form-group.field-invalid .field-status::before { content: "✗"; }
  .form-group.field-valid input {
    border-color: var(--success, #3a9c6e);
    box-shadow: 0 0 0 3px rgba(201,155,95,.12);
  }
  .form-group.field-invalid input {
    border-color: #d24b4b;
    box-shadow: 0 0 0 3px rgba(210,75,75,.12);
  }
  /* deja espacio para el ícono dentro del input */
  .form-group.field-valid input,
  .form-group.field-invalid input { padding-right: 2.4rem; }

  .btn-whatsapp.is-disabled {
    opacity: .55; filter: grayscale(.25); cursor: not-allowed;
    pointer-events: none;
  }

  /* ══════════════════════════════════════════════════════════════
    CATALOG HINT (género sin categoría)
  ══════════════════════════════════════════════════════════════ */
  .catalog-hint {
    grid-column: 1 / -1; text-align: center; padding: 3rem 1.5rem;
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    animation: pageIn .4s cubic-bezier(.22,.7,.3,1) both;
  }
  .catalog-hint-icon { font-size: 2.4rem; line-height: 1; }
  .catalog-hint-text {
    color: var(--text-muted); font-size: .96rem; max-width: 360px;
    line-height: 1.65; font-style: italic;
  }
  /* Grupo de género en catálogo: transición suave al aparecer */
  #catalogGenderGroup {
    animation: pageIn .35s cubic-bezier(.22,.7,.3,1) both;
  }
  /* ══════════════════════════════════════════════════════════════
    ESTADOS VACÍOS (catálogo / búsqueda)
  ══════════════════════════════════════════════════════════════ */
  .empty-state {
    grid-column: 1 / -1; text-align: center; padding: 3.5rem 1.5rem;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    animation: pageIn .5s cubic-bezier(.22,.7,.3,1) both;
  }
  .empty-state-icon {
    font-size: 3rem; line-height: 1; margin-bottom: .4rem;
    filter: drop-shadow(0 6px 14px rgba(10,10,10,.12));
  }
  .empty-state-title {
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 500;
    color: var(--text-primary);
  }
  .empty-state-text {
    color: var(--text-muted); font-size: .92rem; max-width: 420px; line-height: 1.6;
  }

  /* Botón "Seguir comprando" del carrito vacío */
  .btn-empty-action {
    margin-top: 1.1rem; padding: .65rem 1.4rem; border-radius: var(--r-pill);
    border: 1.5px solid var(--gold); background: transparent; color: var(--gold-deep);
    font-family: var(--font-body); font-weight: 600; font-size: .8rem; cursor: pointer;
    letter-spacing: .03em; transition: all var(--t-base); display: inline-flex; align-items: center; gap: .5rem;
  }
  .btn-empty-action:hover {
    background: var(--gold); color: #fff; box-shadow: var(--shadow-gold); transform: translateY(-2px);
  }

  /* ══════════════════════════════════════════════════════════════
    TOOLTIPS ELEGANTES (CSS puro, dorado con flecha)
  ══════════════════════════════════════════════════════════════ */
  [data-tooltip] { position: relative; }
  [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute; top: calc(100% + 9px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--gold-light); color: #2a1c08;
    font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .02em;
    white-space: nowrap; padding: .34rem .62rem; border-radius: 7px;
    box-shadow: 0 8px 20px rgba(0,0,0,.25); line-height: 1.2;
    opacity: 0; pointer-events: none; z-index: 60;
    transition: opacity .16s ease, transform .16s ease;
  }
  [data-tooltip]::before {
    content: ''; position: absolute; top: calc(100% + 3px); left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent; border-bottom-color: var(--gold-light);
    opacity: 0; pointer-events: none; z-index: 60;
    transition: opacity .16s ease;
  }
  [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
    opacity: 1; transform: translateX(-50%) translateY(0);
  }
  [data-tooltip]:hover::before, [data-tooltip]:focus-visible::before { opacity: 1; }
  /* Los badges viven sobre la imagen; el tooltip cae debajo, dentro de la card.
    IMPORTANTE: el badge debe seguir flotando (absolute); [data-tooltip] no debe
    degradarlo a relative (un elemento absolute ya es contexto para su pseudo). */
  .product-badge[data-tooltip] {
    position: absolute; top: .85rem; left: .85rem;
  }
  .product-badge[data-tooltip]::after { font-size: .64rem; }
  @media (hover: none) {
    /* en táctil no hay hover: evitamos tooltips atascados */
    [data-tooltip]::after, [data-tooltip]::before { display: none; }
  }

  /* ══════════════════════════════════════════════════════════════
    MODO OSCURO — controlado por el toggle vía [data-theme="dark"]
    (el tema inicial lo fija un script inline en <head> según
    localStorage o prefers-color-scheme; el toggle lo sobrescribe)
  ══════════════════════════════════════════════════════════════ */
  /* Transición suave en todo el sitio al cambiar de tema */
  body, .product-card, .promo-card, .trust-card, .modal, .pack-modal,
  .cart-sidebar, .header, .footer, input, textarea, select, .toast {
    transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
  }

  [data-theme="dark"] {
    background: var(--cream-1);
  }
  [data-theme="dark"] body::before {
    background-image:
      radial-gradient(circle at 8% 0%, rgba(201,155,95,.08), transparent 38%),
      radial-gradient(circle at 95% 4%, rgba(201,155,95,.06), transparent 36%);
  }
  /* El recuadro de imagen del producto: fondo oscuro en vez de blanco puro */
  [data-theme="dark"] .img-wrapper { background: radial-gradient(circle at 50% 38%, #2C2015, var(--cream-0)); }
  [data-theme="dark"] .promo-img.img-loaded { background: var(--cream-2); }
  [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--brown-0); }
  [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--surface-warm); color: var(--text-primary); }
  [data-theme="dark"] .toast { background: #2a2218; }

  /* ══════════════════════════════════════════════════════════════
    BOTÓN TOGGLE DE TEMA (header)
  ══════════════════════════════════════════════════════════════ */
  .theme-toggle {
    position: relative; width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 50%; border: 1px solid rgba(212,169,106,.3);
    background: rgba(255,255,255,.06); color: var(--gold-light);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; cursor: pointer; transition: background .25s ease, border-color .25s ease;
  }
  .theme-toggle:hover { background: rgba(212,169,106,.16); border-color: var(--gold-light); }
  .theme-toggle .theme-icon {
    display: inline-block; transition: transform .4s ease;
    line-height: 1;
  }
  .theme-toggle.rotating .theme-icon { transform: rotate(360deg); }
  @keyframes themePulse {
    0% { box-shadow: 0 0 0 0 rgba(212,169,106,.5); }
    100% { box-shadow: 0 0 0 12px rgba(212,169,106,0); }
  }
  .theme-toggle.pulse { animation: themePulse .6s ease-out; }

  /* Badge Deluxe (dorado intenso) */
  .product-badge.deluxe {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
    color: #1A120B; box-shadow: 0 3px 12px rgba(201,155,95,.4);
  }

  /* Animación de escala al activar un chip de filtro de promo */
  @keyframes chipPop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
  .filter-btn.chip-pop { animation: chipPop .3s ease; }

  /* ══════════════════════════════════════════════════════════════
    FILTROS — PASTILLAS VISUALES (catálogo y promos)
    Las imágenes traen el texto incrustado (Canva); el código NO superpone
    texto ni iconos sobre la foto real. El icono/degradado es solo fallback.
  ══════════════════════════════════════════════════════════════ */
  .filter-group:has(.filter-pills) { flex: 1 1 100%; width: 100%; min-width: 0; align-items: stretch; }
  .filter-group:has(.filter-pills) .filter-group-label { text-align: center; }
  .filter-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 176px));
    justify-content: center;
    gap: .9rem;
    width: 100%;
  }
  /* La pastilla redefine por completo el chip base; proporción vertical 3:4 */
  .filter-pill {
    position: relative; overflow: hidden;
    padding: 0; aspect-ratio: 3 / 4; height: auto;
    border: 1.5px solid var(--border-light); border-radius: var(--r-md);
    background: var(--surface); white-space: normal;
    display: block;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
    box-shadow: 0 1px 3px rgba(10,10,10,.05), 0 6px 14px rgba(10,10,10,.05);
  }
  /* Capa de fondo: degradado dorado + icono = placeholder/fallback (z-0) */
  .pill-bg {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background:
      radial-gradient(circle at 30% 22%, rgba(255,255,255,.45), transparent 55%),
      linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%);
    transition: transform .5s cubic-bezier(.22,.7,.3,1);
  }
  /* La imagen real cubre el fallback; fade-in suave al cargar */
  .pill-bg img {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    opacity: 0; transition: opacity .3s ease;
  }
  .pill-bg img.img-loaded { opacity: 1; }
  .pill-icon { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.28)); }
  /* Etiqueta glassmorphism SOLO en la pastilla "Todos / Lo Más Solicitado"
    (las demás llevan el texto incrustado en la propia imagen) */
  .pill-label {
    position: absolute; z-index: 2; left: 50%; bottom: .7rem; transform: translateX(-50%);
    width: max-content; max-width: calc(100% - 1.2rem); text-align: center;
    padding: .32rem .85rem; border-radius: var(--r-pill);
    font-size: .76rem; font-weight: 600; letter-spacing: .03em; color: #2a1c08;
    background: rgba(255,255,255,.74);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 2px 8px rgba(10,10,10,.14);
    transition: color .25s ease, background .25s ease;
  }
  /* Todas las pastillas muestran su label (la imagen ya sirve de contexto visual) */
  .filter-pill:hover {
    transform: translateY(-4px); border-color: var(--gold-light);
    box-shadow: 0 14px 30px rgba(201,155,95,.26);
  }
  .filter-pill:hover .pill-bg { transform: scale(1.03); }
  .filter-pill.active {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold-pale), 0 14px 30px rgba(201,155,95,.34);
    transform: translateY(-2px);
  }
  .filter-pill.active .pill-label { background: var(--gold); color: #fff; border-color: var(--gold-light); }
  /* Shimmer diagonal — solo dispositivos con hover real */
  @media (hover: hover) {
    .filter-pill::after {
      content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
      background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%);
      transform: translateX(-135%); transition: transform .8s ease;
    }
    .filter-pill:hover::after { transform: translateX(135%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .filter-pill, .filter-pill .pill-bg, .filter-pill::after, .pill-bg img { transition: none; }
    .filter-pill:hover { transform: none; }
    .filter-pill:hover .pill-bg { transform: none; }
    .pill-bg img { opacity: 1; }
  }
  /* Tablet */
  @media (max-width: 900px) and (min-width: 601px) {
    .filter-pills { grid-template-columns: repeat(auto-fit, minmax(130px, 150px)); gap: .7rem; }
  }
  /* Móvil: 2 columnas */
  @media (max-width: 600px) {
    .filter-pills { grid-template-columns: repeat(2, 1fr); justify-content: stretch; gap: .7rem; }
    .pill-icon { font-size: 2rem; }
    .pill-label { font-size: .72rem; padding: .28rem .7rem; }
  }
  /* Con filtros de promo en pastillas (full-width), el separador vertical sobra */
  #promoGenderSep { display: none; }
  #promoGenderGroup { width: 100%; justify-content: center; }

  /* ══════════════════════════════════════════════════════════════
    RESEÑAS / TESTIMONIOS
  ══════════════════════════════════════════════════════════════ */
  .section-reviews { background: var(--surface-alt); padding: var(--section-pad-lg) 0; }
  /* Carrusel horizontal con scroll-snap + flechas */
  .reviews-carousel { position: relative; max-width: var(--max-w); margin: 0 auto; }
  .reviews-grid {
    display: flex; gap: 1.5rem; overflow-x: auto; padding: .5rem .25rem 1.2rem;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .reviews-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .review-card {
    flex: 0 0 auto; width: 320px; scroll-snap-align: start;
    background: #fff; border: 1px solid var(--border-light);
    border-radius: var(--r-lg); padding: 1.8rem 1.7rem 1.6rem;
    box-shadow: var(--shadow-xs); display: flex; flex-direction: column; gap: .9rem;
    transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-color .5s ease;
  }
  [data-theme="dark"] .review-card { background: var(--surface); }
  .review-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,.1); border-color: rgba(212,169,106,.2); }
  .review-stars { color: var(--gold); font-size: .95rem; letter-spacing: .14em; }
  .review-text {
    font-family: var(--font-display); font-style: italic; font-size: 1.12rem;
    line-height: 1.5; color: var(--text-secondary); flex: 1;
  }
  .review-author { display: flex; align-items: center; gap: .8rem; margin-top: .3rem; }
  .review-avatar {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem; color: #fff; letter-spacing: .02em;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
    box-shadow: 0 4px 12px rgba(201,155,95,.3);
  }
  .review-meta { display: flex; flex-direction: column; gap: .3rem; line-height: 1.3; align-items: flex-start; }
  .review-meta strong { color: var(--text-primary); font-size: .95rem; font-weight: 700; }
  .review-meta .review-bought {
    font-size: .68rem; color: #fff; font-weight: 600; letter-spacing: .02em;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    padding: .18rem .6rem; border-radius: var(--r-pill);
  }
  .rev-arrow {
    position: absolute; top: 42%; transform: translateY(-50%); z-index: 3;
    width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--gold-light);
    background: #fff; color: var(--gold); cursor: pointer; opacity: .6;
    display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: background .2s ease, color .2s ease, opacity .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  [data-theme="dark"] .rev-arrow { background: var(--surface); }
  .rev-arrow:hover { background: var(--gold); color: #fff; opacity: 1; box-shadow: 0 4px 14px rgba(201,155,95,.3); }
  .rev-arrow[hidden] { display: none; }
  /* -16px (no -20px): a 1366px con --max-w:1320px el margen disponible a
     cada lado es de solo 23px -- -20px dejaba apenas 3px de aire real,
     suficiente para desbordar 1-2px por redondeo de subpixel en algunos
     navegadores. -16px da margen real en todos los anchos de escritorio
     probados (1366/1440/1920) sin perder el efecto de "flotar" fuera de
     la tarjeta. */
  .rev-prev { left: -16px; }
  .rev-next { right: -16px; }
  @media (max-width: 768px) {
    .reviews-carousel { padding-bottom: 3.4rem; }
    .rev-arrow { top: auto; bottom: 0; transform: none; }
    .rev-prev { left: calc(50% - 50px); }
    .rev-next { right: calc(50% - 50px); }
    .review-card { width: 82vw; }
  }

  /* ══════════════════════════════════════════════════════════════
    RECOMENDADOR POR CLIMA / OCASIÓN
  ══════════════════════════════════════════════════════════════ */
  .section-reco {
    background:
      radial-gradient(circle at 50% 35%, rgba(212,169,106,.10), transparent 60%),
      var(--cream-1);
  }
  [data-theme="dark"] .section-reco { background: radial-gradient(circle at 50% 35%, rgba(212,169,106,.08), transparent 60%), var(--cream-1); }
  .reco-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-bottom: 2.4rem; }
  .reco-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .8rem 1.6rem; border-radius: var(--r-pill);
    border: 1.5px solid var(--gold-pale); background: var(--surface-warm);
    color: var(--text-secondary); font-family: var(--font-body); font-weight: 600;
    font-size: .88rem; letter-spacing: .02em; cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .reco-chip:hover { border-color: var(--gold-light); color: var(--gold-deep); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(201,155,95,.16); }
  .reco-chip.active {
    border-color: var(--gold); color: #fff; background: var(--gold);
    box-shadow: 0 8px 20px rgba(201,155,95,.34); transform: scale(1.04);
  }
  .reco-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.1rem; max-width: var(--max-w); margin: 0 auto;
  }
  @keyframes recoCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  .reco-fade-in .reco-card { animation: recoCardIn .4s ease both; }
  .reco-card {
    position: relative; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--r-md);
    overflow: hidden; cursor: pointer; box-shadow: var(--shadow-xs);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    display: flex; flex-direction: column;
  }
  .reco-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-gold); border-color: var(--gold-light); }
  .reco-img { position: relative; aspect-ratio: 1; overflow: hidden; background: radial-gradient(circle at 50% 38%, #fff, var(--cream-1)); display: flex; align-items: center; justify-content: center; }
  [data-theme="dark"] .reco-img, [data-theme="dark"] .ty-img { background: radial-gradient(circle at 50% 38%, #2C2015, var(--cream-0)); }
  .reco-img img { width: 100%; height: 100%; object-fit: contain; padding: .9rem; transition: transform .5s ease; }
  .reco-card:hover .reco-img img { transform: scale(1.05); }
  .reco-info { padding: .7rem .85rem .95rem; display: flex; flex-direction: column; gap: .12rem; }
  .reco-name { font-family: var(--font-display); font-size: 1rem; color: var(--text-primary); line-height: 1.2; }
  .reco-brand { font-size: .72rem; color: var(--text-muted); }
  .reco-price { font-size: .85rem; font-weight: 700; color: var(--gold-deep); margin-top: .25rem; }
  /* Shimmer dorado en hover (solo desktop) */
  @media (hover: hover) {
    .reco-img::after {
      content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
      background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);
      transform: translateX(-130%); transition: transform .8s ease;
    }
    .reco-card:hover .reco-img::after { transform: translateX(130%); }
  }
  @media (max-width: 560px) {
    .reco-grid { grid-template-columns: repeat(2, 1fr); }
    .reco-chips { display: grid; grid-template-columns: repeat(2, 1fr); }
    .reco-chip { font-size: .8rem; padding: .7rem 1rem; justify-content: center; }
  }
  @media (prefers-reduced-motion: reduce) { .reco-fade-in .reco-card { animation: none; } }

  /* Cuestionario */
  .quiz { max-width: 720px; margin: 0 auto; }
  .quiz-progress { display: flex; justify-content: center; gap: .6rem; margin-bottom: 2rem; }
  .quiz-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); transition: background .3s ease, transform .3s ease; }
  .quiz-dot.filled { background: var(--gold); }
  .quiz-dot.current { transform: scale(1.35); box-shadow: 0 0 0 4px var(--gold-pale); }
  .quiz-step { text-align: center; }
  .quiz-in { animation: quizFade .35s ease both; }
  @keyframes quizFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  .quiz-q { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 4vw, 2rem); color: var(--text-primary); margin-bottom: 1.6rem; }
  .quiz-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; max-width: 540px; margin: 0 auto; }
  .quiz-opt {
    position: relative; padding: 1.1rem 1.2rem; border-radius: var(--r-md);
    border: 1.5px solid var(--gold-pale); background: var(--surface-warm);
    color: var(--text-primary); font-family: var(--font-body); font-weight: 600; font-size: .95rem;
    cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .quiz-opt:hover { border-color: var(--gold-light); background: var(--gold-pale); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(201,155,95,.16); }
  .quiz-opt.selected {
    background: var(--gold); border-color: var(--gold); color: #fff;
    box-shadow: 0 8px 20px rgba(201,155,95,.34);
  }
  .quiz-opt.selected::after {
    content: '✓'; position: absolute; top: .5rem; right: .7rem; font-size: .8rem; font-weight: 800;
    animation: quizCheck .3s cubic-bezier(.28,.84,.42,1.4) both;
  }
  @keyframes quizCheck { from { transform: scale(0); } to { transform: scale(1); } }
  .quiz-result-title { margin-bottom: 1.6rem; }
  .quiz-restart { text-align: center; margin-top: 1.8rem; }
  @media (max-width: 480px) { .quiz-opts { grid-template-columns: 1fr; } }
  @media (prefers-reduced-motion: reduce) { .quiz-in, .quiz-opt.selected::after { animation: none; } }

  /* ══════════════════════════════════════════════════════════════
    POLISH MODALES / CARRITO (brillo, micro-check, swipe)
  ══════════════════════════════════════════════════════════════ */
  /* Brillo al hover en botones principales de añadir */
  .btn-add-large::before, .btn-checkout::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.32) 50%, transparent 62%);
    transform: translateX(-130%); transition: transform .7s ease; pointer-events: none; z-index: 1;
  }
  .btn-add-large:hover::before, .btn-checkout:hover::before { transform: translateX(130%); }

  /* Micro-check ✓ tras añadir */
  .btn-add-large.added { background: var(--success, #3a9c6e); }
  .btn-add-large.added > * { opacity: 0; }
  .btn-add-large.added::after {
    content: '✓ ¡Añadido!'; position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; letter-spacing: .04em; font-size: .85rem;
  }

  /* Animación del precio del pack al cambiar tamaño */
  .price-anim { animation: priceFade .35s ease; }
  @keyframes priceFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

  /* Contador del pack: badge pulsante al completar */
  .pack-counter.complete {
    color: #fff; background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    animation: counterPulse 1.1s ease-in-out infinite;
  }
  @keyframes counterPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,155,95,.5); }
    50% { box-shadow: 0 0 0 8px rgba(201,155,95,0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-add-large::before, .btn-checkout::before { display: none; }
    .pack-counter.complete { animation: none; }
  }

  /* Swipe-to-delete (móvil): fondo rojo revelado al deslizar el item */
  @media (max-width: 768px) {
    .cart-item { touch-action: pan-y; }
    .cart-item.swiping { transition: none; }
    .cart-item.swipe-reset { transition: transform .25s ease; transform: translateX(0); }
  }

  /* ══════════════════════════════════════════════════════════════
    EFECTOS 3D Y MICROINTERACCIONES PREMIUM
  ══════════════════════════════════════════════════════════════ */
  /* Ripple dorado en botones */
  .btn, .btn-add, .btn-add-large, .btn-checkout, .btn-whatsapp, .btn-empty-action, .btn-outline-dark {
    position: relative; overflow: hidden;
  }
  .ripple-ink {
    position: absolute; border-radius: 50%; pointer-events: none;
    transform: scale(0); opacity: .55;
    background: radial-gradient(circle, rgba(212,169,106,.75) 0%, rgba(212,169,106,.35) 45%, transparent 70%);
    animation: rippleInk .6s ease-out forwards;
    z-index: 0;
  }
  @keyframes rippleInk {
    to { transform: scale(2.6); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .ripple-ink { display: none; } }

  /* Partículas doradas del hero */
  .hero-particles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
  .hero-particles span {
    position: absolute; bottom: -12px; width: 8px; height: 8px; border-radius: 50%;
    background: radial-gradient(circle, #C99B5F 0%, rgba(212,169,106,.2) 70%, transparent 72%);
    opacity: 0; animation: floatUp linear infinite;
  }
  @keyframes floatUp {
    0%   { transform: translateY(0) scale(.7); opacity: 0; }
    12%  { opacity: .4; }
    85%  { opacity: .28; }
    100% { transform: translateY(-78vh) scale(1.1); opacity: 0; }
  }
  .hero-particles span:nth-child(1){ left: 8%;  width: 6px;  height: 6px;  animation-duration: 13s; animation-delay: 0s; }
  .hero-particles span:nth-child(2){ left: 20%; width: 9px;  height: 9px;  animation-duration: 16s; animation-delay: 2s; }
  .hero-particles span:nth-child(3){ left: 33%; width: 5px;  height: 5px;  animation-duration: 11s; animation-delay: 4s; }
  .hero-particles span:nth-child(4){ left: 46%; width: 10px; height: 10px; animation-duration: 18s; animation-delay: 1s; }
  .hero-particles span:nth-child(5){ left: 58%; width: 6px;  height: 6px;  animation-duration: 14s; animation-delay: 5s; }
  .hero-particles span:nth-child(6){ left: 69%; width: 8px;  height: 8px;  animation-duration: 15s; animation-delay: 3s; }
  .hero-particles span:nth-child(7){ left: 80%; width: 5px;  height: 5px;  animation-duration: 12s; animation-delay: 6s; }
  .hero-particles span:nth-child(8){ left: 90%; width: 9px;  height: 9px;  animation-duration: 17s; animation-delay: 2.5s; }
  .hero-particles span:nth-child(9){ left: 27%; width: 4px;  height: 4px;  animation-duration: 19s; animation-delay: 7s; }
  .hero-particles span:nth-child(10){ left: 64%; width: 7px; height: 7px;  animation-duration: 13.5s; animation-delay: 4.5s; }
  @media (prefers-reduced-motion: reduce) { .hero-particles { display: none; } }

  /* ══════════════════════════════════════════════════════════════
    BLOQUE DE PRECIO RESILIENTE
  ══════════════════════════════════════════════════════════════ */
  .product-price-block {
    display: grid; gap: .2rem; min-width: 0; margin-top: auto; padding-top: .65rem;
  }
  .product-price-block .product-price { margin: 0; padding: 0; min-width: 0; white-space: normal; }
  .product-price-block .price-special-label,
  .product-price-block .price-final { white-space: normal; word-break: break-word; }
  .product-stock { color: var(--text-muted); font-size: .68rem; line-height: 1.3; }

  /* ══════════════════════════════════════════════════════════════
    INSTAGRAM FLOTANTE
  ══════════════════════════════════════════════════════════════ */
  

  /* ══════════════════════════════════════════════════════════════
    TOAST CON ACCIÓN (recordatorio de carrito)
  ══════════════════════════════════════════════════════════════ */
  .toast-emoji { font-size: 1.1rem; line-height: 1; flex: 0 0 auto; }
  .toast-action {
    flex: 0 0 auto; margin-left: .3rem; padding: .35rem .8rem; border-radius: var(--r-pill);
    border: 1px solid var(--gold-light); background: var(--gold); color: #fff;
    font-family: var(--font-body); font-weight: 700; font-size: .74rem; cursor: pointer;
    transition: background .2s ease, transform .2s ease;
  }
  .toast-action:hover { background: var(--gold-deep); transform: translateY(-1px); }

  /* ══════════════════════════════════════════════════════════════
    EXTENDED DESIGN TOKENS
    Variables adicionales para gradientes, glassmorphism y easing.
    Complementan el sistema existente sin reemplazarlo.
  ══════════════════════════════════════════════════════════════ */
  :root {
    /* Easing curves (usa cubic-bezier en lugar de palabras clave) */
    --ease-out-expo:   cubic-bezier(.19,1,.22,1);
    --ease-out-quart:  cubic-bezier(.25,.46,.45,.94);
    --ease-in-out-quart: cubic-bezier(.76,0,.24,1);
    --ease-spring:     cubic-bezier(.34,1.56,.64,1);

    /* Gradientes reutilizables */
    --gradient-gold:   linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%);
    --gradient-gold-h: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep));
    --gradient-dark:   linear-gradient(180deg, var(--brown-0), var(--brown-1));
    --gradient-glass:  linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 100%);

    /* Glassmorphism */
    --glass-bg:        rgba(255,255,255,.09);
    --glass-border:    rgba(255,255,255,.18);
    --glass-blur:      blur(16px);
    --glass-dark-bg:   rgba(20,14,8,.6);
    --glass-dark-border: rgba(212,169,106,.16);

    /* Glow */
    --glow-gold-sm:  0 0 16px rgba(201,155,95,.35);
    --glow-gold-md:  0 0 34px rgba(201,155,95,.45);
    --glow-gold-lg:  0 0 60px rgba(201,155,95,.55);
  }

  /* ══════════════════════════════════════════════════════════════
    GLASSMORPHISM UTILITIES
    .glass → panel translúcido claro
    .glass-dark → panel translúcido oscuro (sobre fondos dark)
  ══════════════════════════════════════════════════════════════ */
  .glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
  }
  .glass-dark {
    background: var(--glass-dark-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-dark-border);
    border-radius: var(--r-lg);
  }

  /* ══════════════════════════════════════════════════════════════
    TEXT UTILITIES
  ══════════════════════════════════════════════════════════════ */
  /* Texto con gradiente dorado — úsalo en <span class="text-gradient-gold"> */
  .text-gradient-gold {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }

  /* text-wrap: balance mejora el salto de línea en títulos */
  .text-balance { text-wrap: balance; }

  /* ══════════════════════════════════════════════════════════════
    INFINITE MARQUEE
    Uso:
    <div class="marquee-wrap">
      <div class="marquee-track">
        <span>Árabe</span><span>·</span><span>Diseñador</span>...
        (duplicar el contenido para el loop seamless)
      </div>
    </div>
  ══════════════════════════════════════════════════════════════ */
  .marquee-wrap {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 28s linear infinite;
    gap: 2.5rem;
  }
  .marquee-track span {
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: .85rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .marquee-track span.dot {
    color: var(--gold-light);
    font-size: 1.1rem;
    line-height: 1;
  }
  @keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .marquee-wrap:hover .marquee-track { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

  /* ══════════════════════════════════════════════════════════════
    BRAND STRIP — Marquee preconfigurado para la home
    Insertar entre .hero y .stats-bar:
    <div class="brand-strip"><div class="marquee-wrap">...</div></div>
  ══════════════════════════════════════════════════════════════ */
  .brand-strip {
    background: var(--brown-1);
    border-bottom: 1px solid rgba(212,169,106,.1);
    padding: .9rem 0;
  }

  /* ══════════════════════════════════════════════════════════════
    SKELETON LOADER MEJORADO
    .skeleton → bloque de carga animado (usable en cualquier el.)
  ══════════════════════════════════════════════════════════════ */
  .skeleton {
    background: linear-gradient(90deg,
      var(--cream-2) 25%,
      var(--cream-1) 50%,
      var(--cream-2) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: var(--r-sm);
  }
  @keyframes skeletonShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
  }
  [data-theme="dark"] .skeleton {
    background: linear-gradient(90deg,
      var(--cream-2) 25%,
      var(--surface) 50%,
      var(--cream-2) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; background: var(--cream-2); } }

  /* ══════════════════════════════════════════════════════════════
    EMPTY STATE — Mejorado
  ══════════════════════════════════════════════════════════════ */
  .empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 5rem 2rem;
    animation: pageIn .4s var(--ease-out-quart) both;
  }
  .empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1.2rem;
    filter: grayscale(.4);
  }
  .empty-state-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: .6rem;
  }
  .empty-state-text {
    color: var(--text-muted);
    font-size: .9rem;
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.75;
  }

  /* ══════════════════════════════════════════════════════════════
    CATALOG HINT — mejorado (cuando hay género sin categoría)
  ══════════════════════════════════════════════════════════════ */
  .catalog-hint {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3.5rem 2rem;
    animation: pageIn .35s var(--ease-out-quart) both;
  }
  .catalog-hint-icon { font-size: 2.2rem; margin-bottom: .85rem; animation: floatUpDown 2.5s ease-in-out infinite; }
  .catalog-hint-text { color: var(--text-muted); font-size: .9rem; }
  @keyframes floatUpDown {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-6px); }
  }
  @media (prefers-reduced-motion: reduce) { .catalog-hint-icon { animation: none; } }

  /* ══════════════════════════════════════════════════════════════
    DARK MODE — mejoras adicionales para filter pills
  ══════════════════════════════════════════════════════════════ */
  [data-theme="dark"] .filters-wrapper {
    background: var(--surface);
    border-color: var(--border);
  }
  [data-theme="dark"] .filter-btn {
    background: var(--surface-warm);
    border-color: var(--border);
    color: var(--text-secondary);
  }
  [data-theme="dark"] .filter-btn:hover {
    background: rgba(201,155,95,.1);
    border-color: var(--gold);
    color: var(--gold-light);
  }
  [data-theme="dark"] .filter-btn.active {
    background: rgba(201,155,95,.15);
    border-color: var(--gold);
    color: var(--gold-light);
  }
  [data-theme="dark"] .brand-explorer { background: var(--surface-warm); border-color: var(--border); }
  [data-theme="dark"] .brand-explorer__head { border-color: var(--border); }
  [data-theme="dark"] .brand-explorer__search { border-color: var(--border); }
  [data-theme="dark"] .brand-explorer__search input { color: var(--text-primary); }
  [data-theme="dark"] .brand-explorer__az { border-color: var(--border); }
  [data-theme="dark"] .brand-az-btn { color: var(--text-secondary); }
  [data-theme="dark"] .brand-az-btn:hover:not(.disabled) { background: rgba(201,155,95,.1); color: var(--gold-light); }
  [data-theme="dark"] .brand-item { color: var(--text-secondary); }
  [data-theme="dark"] .brand-item:hover { background: rgba(201,155,95,.1); color: var(--text-primary); }
  [data-theme="dark"] .brand-group__letter { border-color: var(--border); }
  [data-theme="dark"] .filters-offcanvas__brand-btn { background: var(--surface-warm); border-color: var(--border); color: var(--text-primary); }
  [data-theme="dark"] .filters-offcanvas__brand-clear { border-color: var(--border); color: var(--text-muted); }

  /* ══════════════════════════════════════════════════════════════
    RESPONSIVE — ajustes menores para tokens nuevos
  ══════════════════════════════════════════════════════════════ */
  @media (max-width: 768px) {
    .marquee-track { animation-duration: 18s; }
  }

  /* ╔══════════════════════════════════════════════════════════════╗
    ║  REDESIGN v2 — PALETA BLANCO/NEGRO PREMIUM                  ║
    â•‘  Todos los overrides posteriores al CSS original.            â•‘
    â•‘  Las variables CSS de :root posteriores sobreescriben        â•‘
    â•‘  las anteriores, los selectores de clase mantienen           â•‘
    â•‘  la misma especificidad o la aumentan.                        â•‘
    ╚══════════════════════════════════════════════════════════════╝ */

  /* ── 1. NUEVAS VARIABLES DE DISEÑO ─────────────────────────── */

  /* ── 2. BASE ────────────────────────────────────────────────── */
  body {
    background: var(--color-bg);
    background-image: none; /* elimina radiales dorados anteriores */
  }

  /* ── 3. HEADER — negro refinado, sin tinte marrón ─────────── */
  .header {
    background: var(--color-black);
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .header.scrolled { box-shadow: 0 4px 32px rgba(0,0,0,.4); }
  .logo-slogan { color: rgba(255,255,255,.6); }
  .logo-name span { color: rgba(255,255,255,.9); font-weight: 600; }
  .nav a { color: rgba(255,255,255,.65); font-size: .79rem; letter-spacing: .1em; }
  .nav a:hover, .nav a.active { color: #fff; }
  .nav a::after { background: #fff; }

  /* ── 4. BOTONES ─────────────────────────────────────────────── */
  /* btn-gold: blanco en hero (fondo oscuro) */
  .hero .btn-gold,
  .page-hero .btn-gold {
    background: #ffffff;
    color: #1A120B;
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
  }
  .hero .btn-gold:hover,
  .page-hero .btn-gold:hover {
    background: rgba(255,255,255,.92);
    box-shadow: 0 16px 44px rgba(0,0,0,.26);
    transform: translateY(-3px);
  }
  /* btn-gold en fondo claro */
  .btn-gold {
    background: var(--color-black);
    color: #fff;
    box-shadow: 0 8px 28px rgba(0,0,0,.16);
  }
  .btn-gold:hover { box-shadow: 0 16px 44px rgba(0,0,0,.24); }

  /* btn-outline-dark */
  .btn-outline-dark {
    background: transparent;
    color: var(--color-black);
    border: 1.5px solid rgba(5,5,5,.25);
    font-size: .78rem; font-weight: 600; letter-spacing: .05em;
  }
  .btn-outline-dark:hover {
    background: var(--color-black);
    color: #fff;
    border-color: var(--color-black);
    box-shadow: var(--shadow-md);
  }

  /* ── 5. HERO ────────────────────────────────────────────────── */
  .hero { background: #140E08; }
  .hero h1 em { color: rgba(255,255,255,.78); font-style: italic; }
  .hero-eyebrow { color: rgba(255,255,255,.55); }
  /* Máscara del reveal de línea del título (GSAP anima .hero-line-inner con
     yPercent 100→0); overflow:hidden recorta el deslizamiento, sin fondo
     visible detrás del texto (antes tenía un rgba blanco que parecía texto
     seleccionado). */
  .hero-line { display: block; overflow: hidden; }
  .hero-line-inner { display: inline-block; }

  /* ── 6. PAGE HERO (catálogo/promos) ─────────────────────────── */
  /* Especificidad: .page-hero .selector tiene (0,2,0) > .section-* (0,1,0) */
  .page-hero .section-eyebrow,
  .page-hero-eyebrow {
    color: rgba(255,255,255,.6);
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
    margin-bottom: .6rem;
  }
  .page-hero .section-eyebrow::before, .page-hero .section-eyebrow::after,
  .page-hero-eyebrow::before, .page-hero-eyebrow::after {
    content: ''; width: 16px; height: 1px; background: rgba(255,255,255,.35);
  }
  .page-hero .section-title,
  .page-hero-title { color: #fff; }
  .page-hero .section-subtitle,
  .page-hero-subtitle { color: rgba(255,255,255,.72); }

  /* ── 7. STATS BAR ───────────────────────────────────────────── */
.stats-bar {
  background: #1A120B;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .stat-number {
    font-family: var(--font-display);
    font-size: 1.7rem;
    color: #ffffff;
  }
  .stat-label { color: rgba(255,255,255,.45); letter-spacing: .1em; }
  .stat-divider { background: rgba(255,255,255,.1); }

  /* ── 8. SECCIÓN — tipografía ─────────────────────────────────── */
  .section-eyebrow { color: var(--text-muted); }
  .section-eyebrow::before, .section-eyebrow::after { background: var(--color-accent); }
  .section-title { color: var(--color-text); }

  /* ── 9. PRODUCT CARDS ───────────────────────────────────────── */
  .product-card {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
    background: var(--color-surface);
  }
  .product-card:hover {
    border-color: rgba(5,5,5,.18);
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
  }
  .product-card::before {
    background: linear-gradient(90deg, #1A120B, #7A6A57, #1A120B);
  }
  .product-category { color: var(--text-muted); font-size: .65rem; }
  .product-name { color: var(--color-text); }
  .product-price { color: var(--color-text); font-size: 1rem; font-weight: 700; }
  .product-badge {
    background: var(--color-black);
    color: #fff;
    font-size: .62rem; letter-spacing: .06em;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
  }
  .product-badge.new { background: linear-gradient(135deg, #C99B5F, #A67C3D); color: #1A120B; }
  .product-badge.tester { background: #3A2C1E; }
  .product-badge.nicho { background: #1A120B; }
  .img-wrapper {
    background: radial-gradient(circle at 50% 38%, #fafafa, var(--cream-1));
  }
  .btn-add {
    border-color: rgba(5,5,5,.16);
    color: var(--color-text);
    font-size: .74rem; letter-spacing: .04em;
    padding: .62rem;
  }
  .btn-add:hover {
    background: var(--color-black);
    border-color: var(--color-black);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.16);
  }

  /* ── 10. PROMO CARDS ────────────────────────────────────────── */
  .promo-card {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
  }
  .promo-card:hover {
    border-color: rgba(5,5,5,.18);
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
  }
  .promo-card::before {
    background: linear-gradient(90deg, #1A120B, #8C7A68, #1A120B);
  }
  .promo-price {
    color: var(--color-text);
    font-weight: 700;
  }
  .promo-card .btn-add {
    border-color: rgba(5,5,5,.22);
    color: var(--color-text);
  }
  .promo-card .btn-add:hover {
    background: var(--color-black);
    border-color: var(--color-black);
    color: #fff;
  }
  .promo-media-fallback {
    background:
      radial-gradient(circle at 28% 22%, rgba(255,255,255,.4), transparent 52%),
      linear-gradient(135deg, #3A2C1E 0%, #1A120B 100%);
  }
  .promo-badge { background: #2C2015; }

  /* ── 11. TRUST CARDS ────────────────────────────────────────── */
  .trust-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
  }
  .trust-card::after { background: linear-gradient(90deg, #1A120B, #7A6A57); }
  .trust-card:hover { box-shadow: var(--shadow-md); border-color: rgba(5,5,5,.15); }
  .trust-icon-wrap { background: var(--color-bg-soft); }
  .trust-card:hover .trust-icon-wrap { background: var(--color-black); }

  /* ── 12. REVIEWS ────────────────────────────────────────────── */
  .review-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
  }
  .review-stars { color: var(--color-text); }
  .review-avatar {
    background: var(--color-black);
    color: #fff;
  }

  /* ── 13. FILTROS EXISTENTES — desactivar estilos pill viejos ── */
  /* Los cat-tile reemplazan a .filter-pill; ocultamos estilos legacy */
  .filter-pill { all: unset; } /* reset limpio */
  .pill-bg, .pill-icon, .pill-label { display: none; } /* eliminar pill markup si existe */
  .filters-wrapper { display: none; } /* panel viejo oculto */

  /* ── 14. CAT-SECTION — contenedor general de catálogo/promos ─ */
  .cat-section {
    padding: 3.5rem 0 5rem;
    max-width: var(--max-w);
    margin: 0 auto;
    padding-inline: 2rem;
  }
  @media (max-width: 640px) { .cat-section { padding-inline: 1rem; padding-top: 2.5rem; } }

  /* ── 14.1 BÚSQUEDA RÁPIDA + CHIPS — catálogo ──────────────────
    Busca en todo el catálogo en tiempo real (nombre, marca, notas)
    y filtra al instante con chips horizontales (hombre/mujer/...). */
  .quick-find { display: grid; gap: .9rem; margin-bottom: 1.8rem; }
  .search-bar {
    position: relative; display: flex; align-items: center;
    background: var(--surface); border: 1.5px solid var(--border-light);
    border-radius: var(--r-pill); padding-left: 1.05rem;
    transition: border-color var(--t-base), box-shadow var(--t-base);
  }
  .search-bar:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,155,95,.16); }
  .search-bar__icon { color: var(--gold); font-size: .85rem; flex: 0 0 auto; }
  .search-bar input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    color: var(--text-primary); font-family: var(--font-body); font-size: .9rem;
    padding: .7rem .75rem;
  }
  .search-bar input::placeholder { color: var(--text-muted); }
  .search-bar input::-webkit-search-cancel-button { display: none; }
  .search-bar__clear {
    flex: 0 0 auto; margin-right: .4rem; width: 1.7rem; height: 1.7rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent; color: var(--text-muted);
    font-size: .75rem; cursor: pointer; transition: background var(--t-base), color var(--t-base);
  }
  .search-bar__clear:hover { background: var(--border-light); color: var(--text-primary); }
  .quick-chips {
    display: flex; gap: .55rem; overflow-x: auto; scrollbar-width: none;
    padding: .15rem .1rem .4rem;
  }
  .quick-chips::-webkit-scrollbar { display: none; }
  .quick-chip {
    flex: 0 0 auto; border: 1.5px solid var(--border-light); background: var(--surface);
    color: var(--text-secondary); border-radius: var(--r-pill);
    padding: .5rem 1.1rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; font-family: var(--font-body); cursor: pointer;
    transition: all var(--t-base); white-space: nowrap;
  }
  .quick-chip:hover { border-color: var(--gold-light); color: var(--gold-deep); }
  .quick-chip.active {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
    border-color: transparent; color: #fff;
    box-shadow: 0 5px 14px rgba(201,155,95,.35);
  }
  .catalog-results { text-align: center; color: var(--text-muted); font-size: .8rem; margin: 0 0 1.2rem; }
  .product-grid { transition: opacity .16s ease, transform .16s ease; }
  .product-grid.switching { opacity: 0; transform: translateY(5px); }

  /* ── 14.2 CONFIANZA — modal producto ──────────────────────────
    Tres sellos discretos debajo del botón de compra. */
  .modal-trust {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.15rem;
    margin-top: 1rem; padding-top: .85rem; border-top: 1px dashed var(--border-light);
  }
  .modal-trust__item {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .68rem; color: var(--text-muted); font-weight: 600; letter-spacing: .02em;
  }
  .modal-trust__item i { color: var(--gold); font-size: .78rem; }

  /* ── 14.3 UPSELLING — carrito ─────────────────────────────────
    Franja "agrega una muestra" con sugerencias aleatorias de 2ml. */
  .upsell-strip {
    margin-bottom: .95rem; padding: .85rem .95rem .95rem;
    border: 1px dashed rgba(201,155,95,.45); border-radius: var(--r-md);
    background: linear-gradient(135deg, rgba(201,155,95,.1), rgba(201,155,95,.03));
  }
  .upsell-strip__title {
    margin: 0 0 .7rem; font-size: .74rem; font-weight: 700; letter-spacing: .03em;
    color: var(--gold-deep);
  }
  .upsell-strip__items { display: flex; gap: .6rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; }
  .upsell-strip__items::-webkit-scrollbar { display: none; }
  .upsell-item {
    flex: 0 0 auto; display: flex; align-items: center; gap: .5rem;
    width: min(200px, 62vw); padding: .35rem .5rem .35rem .35rem;
    background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--r-pill);
  }
  .upsell-item img {
    width: 36px; height: 36px; flex: 0 0 auto; object-fit: contain;
    border-radius: 50%; background: var(--cream-0);
  }
  .upsell-item__info { flex: 1; min-width: 0; }
  .upsell-item__name {
    font-size: .68rem; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .upsell-item__meta { font-size: .6rem; color: var(--text-muted); }
  .upsell-item__add {
    flex: 0 0 auto; border: 0; border-radius: var(--r-pill); cursor: pointer;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-deep)); color: #fff;
    font-family: var(--font-body); font-size: .64rem; font-weight: 700;
    padding: .42rem .6rem; letter-spacing: .02em;
    transition: transform var(--t-base), box-shadow var(--t-base);
  }
  .upsell-item__add:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(201,155,95,.4); }

  /* ── 14.4 BADGE BESTSELLER — cards ────────────────────────────
    Dorado brillante con animación sutil; el badge regular (new/top)
    se desplaza a la derecha para no superponerse. */
  .product-badge.bestseller {
    background: linear-gradient(135deg, #E5C896, #C99B5F 45%, #D4A96A);
    background-size: 220% 220%;
    animation: shimmerGold 3s ease infinite;
    color: #1A120B; letter-spacing: .06em;
    box-shadow: none;
  }
  .product-badge.bestseller:hover { transform: translateY(-1px) scale(1.04); }
  @keyframes shimmerGold {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  .product-badge--right { left: auto; right: .85rem; }
  @media (prefers-reduced-motion: reduce) {
    .product-badge.bestseller { animation: none; }
  }

  /* ── 15. CAT-SHOWCASE — grid editorial de categorías ──────────
    Desktop: Fila 1 → Nicho (2/3) + Árabe (1/3)
              Fila 2 → Deluxe + Diseñador + Tester
    Inspiración: editorial de lujo, Louvi Parfums style.
    NO se copian imágenes ni textos. Solo la estructura.
    ─────────────────────────────────────────────────────────── */
  .cat-showcase {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 400px 300px;
    gap: 1rem;
    margin-bottom: 0;
  }
  /* Posición editorial — SOLO el showcase de catálogo (no el de promos) */
  .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
  .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
  .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(4) { grid-column: 3 / 5; grid-row: 2; }
  .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(5) { grid-column: 5 / 7; grid-row: 2; }

  /* Promos: 3 columnas iguales, auto-placement */
  .cat-showcase--promos {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 460px;
  }
  .cat-showcase--promos .cat-tile {
    grid-column: auto;
    grid-row: 1;
    height: 460px;
  }

  /* ── 16. CAT-TILE — tarjeta editorial de categoría ────────── */
  .cat-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    cursor: pointer;
    border: none;
    background: #1A120B;
    padding: 0;
    display: block;
    width: 100%;
    height: 100%;
    text-align: left;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    /* Entrada inicial (para GSAP) */
    opacity: 1;
    transform: none;
  }

  /* Imagen de fondo */
  .cat-tile__img {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .cat-tile__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform .8s var(--ease-premium), filter .6s ease;
    filter: brightness(.62) saturate(.85);
    display: block;
    opacity: 0; /* fade in al cargar */
  }
  .cat-tile__img img.img-loaded { opacity: 1; transition: opacity .4s ease, transform .8s var(--ease-premium), filter .6s ease; }
  .cat-tile__img.img-error { background: #2C2015; }

  /* Overlay gradiente */
  .cat-tile__img::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to top,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.28) 45%,
        rgba(0,0,0,.06) 100%
      );
    transition: opacity .4s ease;
  }

  /* Hover */
  .cat-tile:hover .cat-tile__img img {
    transform: scale(1.06);
    filter: brightness(.72) saturate(1);
  }
  .cat-tile:hover .cat-tile__img::after { opacity: .85; }

  /* Cuerpo de texto (sobre la imagen) */
  .cat-tile__body {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    padding: 1.8rem 1.6rem 1.6rem;
    color: #fff;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    transition: transform .4s var(--ease-premium);
  }
  .cat-tile:hover .cat-tile__body { transform: translateY(-4px); }

  .cat-tile__eyebrow {
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    font-weight: 600;
    font-family: var(--font-body);
    display: block;
  }
  .cat-tile__name {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 400;
    letter-spacing: .015em;
    line-height: 1.05;
    color: #fff;
    display: block;
  }
  .cat-tile__sub {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.48);
    font-weight: 500;
    font-family: var(--font-body);
    display: block;
    transition: color .3s ease;
  }
  .cat-tile:hover .cat-tile__sub { color: rgba(255,255,255,.72); }

  /* Estado activo */
  .cat-tile.active,
  .cat-tile[aria-pressed="true"] {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(255,255,255,.3);
  }
  .cat-tile[aria-pressed="true"] .cat-tile__img::after {
    background:
      linear-gradient(
        to top,
        rgba(5,5,5,.88) 0%,
        rgba(5,5,5,.4) 50%,
        rgba(5,5,5,.1) 100%
      );
  }
  .cat-tile[aria-pressed="true"] .cat-tile__name { color: #fff; }

  /* Focus visible accesible */
  .cat-tile:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }

  /* ── 17. GENDER BAR — chips de género ───────────────────────── */
  .gender-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.4rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin: 1.4rem 0 2rem;
    animation: pageIn .3s var(--ease-premium) both;
  }
  .gender-bar__label {
    font-size: .65rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
  }
  .gender-bar__chips { display: flex; gap: .5rem; flex-wrap: wrap; }
  .gender-chip {
    padding: .45rem 1.1rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--color-border-strong);
    background: transparent;
    color: var(--text-secondary);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .03em;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all .22s var(--ease-premium);
  }
  .gender-chip:hover {
    border-color: var(--color-black);
    background: var(--color-bg-soft);
    color: var(--color-black);
  }
  .gender-chip.active,
  .gender-chip[aria-pressed="true"] {
    background: var(--color-black);
    border-color: var(--color-black);
    color: #fff;
  }
  .gender-chip:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
  }

  /* ── 18. CATALOG HINT — sin categoría + género activo ───────── */
  .catalog-hint {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem 5rem;
    animation: pageIn .35s var(--ease-premium) both;
  }
  .catalog-hint-icon { font-size: 2rem; margin-bottom: 1rem; opacity: .4; animation: floatUpDown 2.8s ease-in-out infinite; }
  .catalog-hint-text { color: var(--text-muted); font-size: .9rem; max-width: 320px; margin: 0 auto; }

  /* ── 19. EMPTY STATE mejorado ─────────────────────────────────── */
  .empty-state {
    grid-column: 1 / -1;
    padding: 5rem 2rem;
    text-align: center;
    animation: pageIn .35s var(--ease-premium) both;
  }
  .empty-state-icon { font-size: 2.4rem; opacity: .28; margin-bottom: 1.2rem; }
  .empty-state-title {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: .55rem;
  }
  .empty-state-text { color: var(--text-muted); font-size: .88rem; max-width: 360px; margin: 0 auto; line-height: 1.75; }

  /* ── 20. FOOTER ─────────────────────────────────────────────── */
  .footer {
    background: var(--color-black);
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .footer-logo-name, .footer-tagline, .footer-col h4, .footer-col p, .footer-bottom p { color: rgba(255,255,255,.7); }
  .footer-col h4 { color: rgba(255,255,255,.9); font-weight: 600; letter-spacing: .04em; margin-bottom: .9rem; }
  .footer-bottom { border-color: rgba(255,255,255,.07); }
  .footer-signature a { color: rgba(255,255,255,.5); }
  .footer-signature a:hover { color: #fff; }
  .social-links a { color: rgba(255,255,255,.45); border-color: rgba(255,255,255,.12); }
  .social-links a:hover { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08); }

  /* ── 21. MODAL — entrada premium ──────────────────────────────── */
  .modal-overlay { background: rgba(5,5,5,.68); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .modal {
    background: var(--color-surface);
    border-radius: var(--r-xl);
    box-shadow: 0 40px 100px rgba(0,0,0,.28);
    border: 1px solid var(--color-border);
  }
  .modal-close {
    background: rgba(5,5,5,.06);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 50%;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s ease;
  }
  .modal-close:hover { background: var(--color-black); color: #fff; border-color: var(--color-black); }
  .btn-add-large {
    background: var(--color-black);
    border: none;
    color: #fff;
    border-radius: var(--r-pill);
    font-weight: 600;
  }
  .btn-add-large:hover { background: #2C2015; box-shadow: var(--shadow-md); }

  /* ── 22. CART SIDEBAR ───────────────────────────────────────── */
  .cart-sidebar {
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: -20px 0 60px rgba(0,0,0,.12);
  }
  .cart-header { border-bottom: 1px solid var(--color-border); }
  .cart-header-icon { color: var(--color-text); }
  .btn-whatsapp {
    background: #25d366;
    border-radius: var(--r-pill);
    font-weight: 700;
    letter-spacing: .03em;
  }

  /* ── 23. SEARCH INPUT ───────────────────────────────────────── */
  .search-box input:focus {
    border-color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.18);
    box-shadow: 0 0 0 5px rgba(255,255,255,.08);
  }
  .search-suggestions {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
  }
  .search-suggestion-item:hover { background: var(--color-bg-soft); }

  /* ── 24. BACK TO TOP ─────────────────────────────────────────── */
  .back-to-top {
    background: var(--color-black);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-md);
  }
  .back-to-top:hover { background: #2C2015; transform: translateY(-4px); box-shadow: var(--shadow-lg); }

  /* ── 25. IG FAB ─────────────────────────────────────────────── */
  

  /* ── 26. DARK MODE — ajustes sobre nueva paleta ─────────────── */
  [data-theme="dark"] body {
    background: var(--color-bg);
    background-image: none;
  }
  [data-theme="dark"] .cat-tile { background: #1C130C; }
  [data-theme="dark"] .gender-chip {
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.7);
  }
  [data-theme="dark"] .gender-chip:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.3);
    color: #fff;
  }
  [data-theme="dark"] .gender-chip.active,
  [data-theme="dark"] .gender-chip[aria-pressed="true"] {
    background: #fff;
    border-color: #fff;
    color: #1A120B;
  }
  [data-theme="dark"] .gender-bar {
    border-color: rgba(255,255,255,.07);
  }
  [data-theme="dark"] .img-wrapper {
    background: radial-gradient(circle at 50% 38%, #2C2015, #1A120B);
  }
  [data-theme="dark"] .filters-wrapper { display: none; }

  /* ── 27. RESPONSIVE — CAT SHOWCASE ───────────────────────────── */
  @media (max-width: 1024px) {
    .cat-showcase {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 360px 280px;
    }
    .cat-showcase .cat-tile:nth-child(1) { grid-column: 1 / 3; }
    .cat-showcase .cat-tile:nth-child(2) { grid-column: 3 / 5; }
    .cat-showcase .cat-tile:nth-child(3) { grid-column: 1 / 2; }
    .cat-showcase .cat-tile:nth-child(4) { grid-column: 2 / 3; }
    .cat-showcase .cat-tile:nth-child(5) { grid-column: 3 / 5; }
    .cat-showcase--promos {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 380px;
    }
  }

  @media (max-width: 768px) {
    .cat-showcase {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      gap: .65rem;
    }
    .cat-showcase .cat-tile { height: 200px; }
    /* Nicho: fila completa (protagonista) */
    .cat-showcase .cat-tile:nth-child(1) { grid-column: 1 / 3; grid-row: auto; height: 230px; }
    .cat-showcase .cat-tile:nth-child(2) { grid-column: 1 / 2; grid-row: auto; }
    .cat-showcase .cat-tile:nth-child(3) { grid-column: 2 / 3; grid-row: auto; }
    .cat-showcase .cat-tile:nth-child(4) { grid-column: 1 / 2; grid-row: auto; }
    .cat-showcase .cat-tile:nth-child(5) { grid-column: 2 / 3; grid-row: auto; }

    .cat-showcase--promos {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }
    .cat-showcase--promos .cat-tile { grid-column: auto; height: 220px; }

    .cat-tile__name { font-size: 1.5rem; }
    .cat-tile__body { padding: 1.2rem 1rem 1rem; }

    .gender-bar { flex-direction: column; align-items: flex-start; padding: 1.2rem 0; gap: .75rem; }
  }

  @media (max-width: 480px) {
    .cat-showcase .cat-tile { height: 170px; }
    .cat-showcase .cat-tile:nth-child(1) { height: 200px; }
  }

  /* ── 28. REVEAL — clases de animación para GSAP ──────────────── */
  .js-reveal { opacity: 0; transform: translateY(30px); }
  .js-reveal.is-visible {
    opacity: 1; transform: translateY(0);
    transition: opacity .7s var(--ease-premium), transform .7s var(--ease-premium);
  }

  /* ── 29. REDUCED MOTION ──────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .cat-tile__img img,
    .cat-tile__body,
    .cat-tile:hover .cat-tile__img img,
    .cat-tile:hover .cat-tile__body { transition: none; transform: none; }
    .js-reveal, .js-reveal.is-visible { opacity: 1; transform: none; transition: none; }
  }

  /* ══════════════════════════════════════════════════════════════
    AUTOCRÍTICA v1 — 20 mejoras visuales/UX post-audit
    Director de diseño senior: refinamiento del resultado.
    ══════════════════════════════════════════════════════════════ */

  /* 1. Page-hero más impactante: altura de 56vh → 65vh */
  .page-hero { min-height: 65vh; }

  /* 2. Page hero overlay más profundo para mejor legibilidad */
  .page-hero-overlay {
    background: linear-gradient(
      to top,
      rgba(0,0,0,.70) 0%,
      rgba(0,0,0,.30) 50%,
      rgba(0,0,0,.08) 100%
    );
  }

  /* 3. Section eyebrows: warmth sutil con champagne en lugar de gris plano */
  .section-eyebrow { color: var(--gold); }          /* #A1A1AA champagne */
  .section-eyebrow::before, .section-eyebrow::after { background: var(--gold); }

  /* 4. Cat-tile: nombre más grande en tiles grandes (fila 1) */
  .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(1) .cat-tile__name,
  .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(2) .cat-tile__name {
    font-size: clamp(2rem, 3.5vw, 3rem);
  }

  /* 5. Cat-tile estado activo: anillo de selección más visible */
  .cat-tile[aria-pressed="true"] {
    box-shadow: 0 0 0 3px rgba(255,255,255,.9),
                0 0 0 6px rgba(255,255,255,.22),
                var(--shadow-lg);
  }

  /* 6. Gender bar: separador superior más elegante */
  .gender-bar {
    border-top: 1px solid var(--color-border);
    margin-top: 2rem;
    padding-top: 1.5rem;
  }

  /* 7. Gender chip seleccionado: transición más visible */
  .gender-chip.active,
  .gender-chip[aria-pressed="true"] {
    background: var(--color-black);
    color: #fff;
    border-color: var(--color-black);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    transform: translateY(-1px);
  }

  /* 8. Product card: hover más dramático */
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 70px rgba(0,0,0,.13);
  }

  /* 9. Btn-add: letra más espaciada, más premium */
  .btn-add {
    letter-spacing: .06em;
    font-weight: 600;
    font-size: .73rem;
    text-transform: uppercase;
  }

  /* 10. Product badge deluxe: color champagne distinguido */
  .product-badge.deluxe {
    background: #A67C3D;
    letter-spacing: .08em;
  }

  /* 11. Cat-showcase: gap un poco más generoso en desktop */
  @media (min-width: 1024px) {
    .cat-showcase { gap: 1.2rem; }
  }

  /* 12. Page-hero content: padding inferior para que el texto no toque el borde */
  .page-hero-content {
    padding-bottom: 3rem;
    width: 100%;
    max-width: 680px;
  }

  /* 13. Promo-card hover consistente con product-card */
  .promo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 70px rgba(0,0,0,.13);
  }

  /* 14. Footer links: espaciado de línea más cómodo */
  .footer-col p { line-height: 1.85; }
  .footer-link, .footer-col a { letter-spacing: .02em; }

  /* 15. Stats bar: números más grandes y elegantes */
  .stat-number { font-size: 2rem; letter-spacing: -.01em; }

  /* 16. Hero principal: padding inferior para evitar q el texto quede muy abajo */
  .hero-content { padding-bottom: 5rem; }

  /* 17. Botón outline-dark en hero: definición más clara */
  .btn-outline-dark {
    border: 1.5px solid rgba(255,255,255,.38);
    color: rgba(255,255,255,.88);
  }
  .btn-outline-dark:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.7);
    color: #fff;
  }

  /* 18. Cat-tile en promos: texto más centrado verticalmente */
  .cat-showcase--promos .cat-tile__body {
    padding: 2.2rem 2rem 2rem;
    justify-content: flex-end;
  }

  /* 19. Catalog/promos section: más aire encima del showcase */
  .cat-section { padding-top: 2.5rem; }

  /* 20. Trust-card icon wrap: hover transition más suave */
  .trust-icon-wrap {
    transition: background .3s var(--ease-premium), transform .3s var(--ease-premium);
  }
  .trust-card:hover .trust-icon-wrap {
    transform: scale(1.08);
  }

  /* ── DARK MODE ajustes para autocrítica ─────────────────────── */
  [data-theme="dark"] .section-eyebrow { color: var(--gold); }
  [data-theme="dark"] .section-eyebrow::before,
  [data-theme="dark"] .section-eyebrow::after { background: var(--gold); }
  [data-theme="dark"] .gender-chip.active,
  [data-theme="dark"] .gender-chip[aria-pressed="true"] {
    background: #fff;
    color: #1A120B;
    border-color: #fff;
  }
  [data-theme="dark"] .btn-outline-dark {
    border-color: rgba(255,255,255,.3);
    color: rgba(255,255,255,.8);
  }

  /* ── RESPONSIVE FIXES adicionales ───────────────────────────── */
  @media (max-width: 768px) {
    .page-hero { min-height: 45vh; }
    .page-hero-content { padding-bottom: 1.5rem; max-width: 100%; }
    .page-hero-title { font-size: 1.6rem; }
    .page-hero-subtitle { font-size: .85rem; }
    .stat-number { font-size: 1.6rem; }
    .cat-section { padding-top: 1rem; padding-inline: .9rem; }
    .cat-showcase--promos .cat-tile__body { padding: 1.5rem 1.2rem 1.2rem; }
  }

  @media (max-width: 480px) {
    .page-hero { min-height: 40vh; }
    .page-hero-title { font-size: 1.4rem; }
    .page-hero-subtitle { font-size: .8rem; }
    .gender-bar { margin-top: 1.2rem; }
  }

  /* ══════════════════════════════════════════════════════════════
    FIXES v10 — Todas las correcciones del ciclo actual
    ══════════════════════════════════════════════════════════════ */

  /* ── A. IMÁGENES POR CATEGORÍA — object-position específico ── */
  /* Ajuste fino de encuadre para que cada fragancia se vea bien */
  .cat-tile--nicho     .cat-tile__img img { object-position: center 15%; }
  .cat-tile--arabe     .cat-tile__img img { object-position: center 10%; }
  .cat-tile--deluxe    .cat-tile__img img { object-position: center 20%; }
  .cat-tile--disenador .cat-tile__img img { object-position: center 12%; }
  .cat-tile--tester    .cat-tile__img img { object-position: center 18%; }

  /* Tiles grandes (fila 1 del catálogo) — más acercamiento vertical */
  .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(1) .cat-tile__img img { object-position: center 8%; }
  .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(2) .cat-tile__img img { object-position: center 12%; }

  /* ── B. SEPARACIÓN ENTRE FILTROS Y GRID DE RESULTADOS ─────── */
  /* Aire profesional entre los filtros de cat-tile/gender y el grid */
  #catalogGrid,
  #promoGrid {
    margin-top: clamp(2rem, 4vw, 3.5rem);
    min-height: 2px; /* evita colapso de margen cuando está vacío */
  }

  /* ── C. RESPONSIVE 1024px — corregir scoping `:not` ──────── */
  @media (max-width: 1024px) {
    .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(1) { grid-column: 1 / 3; }
    .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(2) { grid-column: 3 / 5; }
    .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(3) { grid-column: 1 / 2; }
    .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(4) { grid-column: 2 / 3; }
    .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(5) { grid-column: 3 / 5; }
    /* Override las reglas sin :not que quedaron del bloque anterior */
    .cat-showcase .cat-tile:nth-child(1) { grid-column: unset; }
    .cat-showcase .cat-tile:nth-child(2) { grid-column: unset; }
    .cat-showcase .cat-tile:nth-child(3) { grid-column: unset; }
    .cat-showcase .cat-tile:nth-child(4) { grid-column: unset; }
    .cat-showcase .cat-tile:nth-child(5) { grid-column: unset; }
    .cat-showcase:not(.cat-showcase--promos) { grid-template-columns: repeat(4, 1fr); grid-template-rows: 340px 260px; }
    .cat-showcase--promos { grid-template-columns: repeat(3, 1fr); grid-template-rows: 360px; }
  }

  /* ── E. RESPONSIVE FIJO 768px — cat-showcase ──────────────── */
  @media (max-width: 768px) {
    /* Layout 2 columnas: Nicho full-width, pares en dos columnas */
    .cat-showcase:not(.cat-showcase--promos) { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(1) { grid-column: 1 / 3; grid-row: auto; height: 230px; }
    .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(2) { grid-column: 1 / 2; grid-row: auto; }
    .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(3) { grid-column: 2 / 3; grid-row: auto; }
    .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(4) { grid-column: 1 / 2; grid-row: auto; }
    .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(5) { grid-column: 2 / 3; grid-row: auto; }

    .cat-showcase--promos { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .cat-showcase--promos .cat-tile { grid-column: span 1; grid-row: auto; height: 200px; }
    /* Tercer tile de promos: ancho completo en 768px */
    .cat-showcase--promos .cat-tile:last-child:nth-child(3) { grid-column: 1 / 3; }
  }

  /* ── F. OVERLAY MÁS SUAVE en tiles pequeños (fila 2) ───────── */
  .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(3) .cat-tile__img::after,
  .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(4) .cat-tile__img::after,
  .cat-showcase:not(.cat-showcase--promos) .cat-tile:nth-child(5) .cat-tile__img::after {
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.08) 100%);
  }

  /* ── G. PAGE-HERO texto blanco garantizado ──────────────────── */
  .page-hero .section-eyebrow,
  .page-hero .page-hero-eyebrow {
    color: rgba(255,255,255,.65);
  }
  .page-hero .section-title,
  .page-hero .page-hero-title {
    color: #fff;
  }
  .page-hero .section-subtitle,
  .page-hero .page-hero-subtitle {
    color: rgba(255,255,255,.55);
  }

  /* ── H. CATALOG/PROMO GRID — ancho máximo y centrado ────────── */
  #catalogGrid,
  #promoGrid {
    max-width: 100%;
  }

  /* ── I. PERFORMANCE — reducir blur/shadow en mobile ────────── */
  @media (max-width: 768px) {
    .cat-tile { will-change: auto; }
    .cat-tile__img img { will-change: auto; }
    .hero-video { filter: brightness(.4) saturate(.8); } /* menos filtros = más rápido */
  }

  /* ── K. SEARCH CSS — neutralizado (elementos eliminados del HTML) */
  .search-box-wrapper,
  .search-box,
  .search-suggestions,
  .search-suggestion-item,
  .search-no-results { display: none; }

  /* ── L. PRODUCT/PROMO GRID ENTRY — animación suave ─────────── */
  #catalogGrid .product-card,
  #promoGrid .promo-card {
    animation: cardIn .35s var(--ease-premium) both;
  }
  @keyframes cardIn {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    #catalogGrid .product-card,
    #promoGrid .promo-card { animation: none; }
  }

  /* ── M. RESPONSIVE 480px — promos en columna única ─────────── */
  @media (max-width: 480px) {
    .cat-showcase--promos { grid-template-columns: 1fr; }
    .cat-showcase--promos .cat-tile { grid-column: 1; height: 190px; }
    .cat-showcase--promos .cat-tile:last-child:nth-child(3) { grid-column: 1; }
  }

  /* ══════════════════════════════════════════════════════════════
    FIXES v11 — TikTok embed oficial, separación de promos,
    responsive real y encuadre de imágenes (ciclo 2)
    ══════════════════════════════════════════════════════════════ */

  /* ── O. PROMOS/CATÁLOGO — separación profesional bajo los filtros ──
    Reemplaza la separación corta del bloque B: ahora con aire real,
    línea divisoria sutil y solo cuando el grid tiene contenido. */
  #catalogGrid:not(:empty),
  #promoGrid:not(:empty) {
    margin-top: clamp(3rem, 6vw, 5.5rem);
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid rgba(0,0,0,.08);
  }
  [data-theme="dark"] #catalogGrid:not(:empty),
  [data-theme="dark"] #promoGrid:not(:empty) {
    border-top-color: rgba(255,255,255,.08);
  }
  @media (max-width: 600px) {
    #catalogGrid:not(:empty),
    #promoGrid:not(:empty) {
      margin-top: clamp(2.25rem, 8vw, 3rem);
      padding-top: 1.25rem;
    }
  }

  /* ── P. ENCUADRE DE IMÁGENES — ajuste fino por categoría (ciclo 2) ── */
  .cat-tile--arabe     .cat-tile__img img { object-position: center center; }
  .cat-tile--disenador .cat-tile__img img { object-position: center 45%; }
  .cat-tile--tester    .cat-tile__img img { object-position: center 60%; }
  .cat-tile--deluxe    .cat-tile__img img { object-position: center 25%; }
  .cat-tile--nicho     .cat-tile__img img { object-position: center 15%; }

  /* ── Q. ANTI-OVERFLOW HORIZONTAL — salvaguarda global ──────── */
  /* Solo body (ya lo tenia desde la regla base, arriba): agregar overflow-x
     en html ademas de body rompe position:sticky en TODO el sitio (el
     header deja de pegarse arriba y desaparece al hacer scroll) — bug
     real detectado en auditoria, corregido sin perder la salvaguarda. */
  .cat-tile, .product-card, .promo-card { max-width: 100%; }

  /* ── S. BUG REAL — menú hamburguesa móvil con texto blanco
    sobre fondo blanco (ilegible). La regla ".nav a" del bloque
    "HEADER negro refinado" (color blanco, pensada para el header
    de escritorio con fondo negro) tiene la misma especificidad que
    la regla mobile y, por venir después en el archivo, la pisaba
    en el dropdown ≤900px (fondo claro). Restauramos el color
    correcto del tema para el menú abierto en mobile/tablet. ── */
  @media (max-width: 900px) {
    .nav a { color: var(--text-secondary); }
    .nav a:hover, .nav a.active { color: var(--gold); }
  }

  /* ── T. BUG REAL — FAB de Instagram tapa el botón "Ir al
    Checkout" en mobile cuando el carrito está abierto (mismo
    z-index alto + posición fixed inferior-izquierda). Lo ocultamos
    mientras el carrito está activo para no bloquear el tap-target. */

  /* ══════════════════════════════════════════════════════════════
    PACKS DE DECANTS — sección renovada (arquitectura nueva)
    ══════════════════════════════════════════════════════════════ */


  /* ── A. BENEFICIOS — franja bajo el hero ────────────────────── */
  .packs-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: var(--max-w);
    margin: -3rem auto 0;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
  }
  .packs-benefit {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    padding: 1.15rem 1.35rem;
    box-shadow: var(--shadow-md);
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  }
  .packs-benefit:hover {
    transform: translateY(-4px);
    border-color: var(--gold-light);
    box-shadow: var(--shadow-gold);
  }
  .packs-benefit__icon {
    flex-shrink: 0;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--gold-pale), rgba(230,233,236,.45));
  }
  .packs-benefit strong {
    display: block;
    font-size: .88rem;
    color: var(--text-primary);
    letter-spacing: .01em;
  }
  .packs-benefit span:last-child {
    display: block;
    font-size: .74rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-top: .1rem;
  }

  /* ── B. CÓMO FUNCIONA — 3 pasos editoriales ────────────────── */
  .packs-how {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 4.5rem 1.5rem 1.5rem;
  }
  .packs-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    margin-top: 2.2rem;
  }
  .packs-step {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    padding: 2rem 1.6rem 1.7rem;
    overflow: hidden;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  }
  .packs-step:hover {
    transform: translateY(-5px);
    border-color: var(--gold-light);
    box-shadow: var(--shadow-gold);
  }
  .packs-step__num {
    position: absolute;
    top: -0.45rem;
    right: 0.7rem;
    font-family: var(--font-display);
    font-size: 4.2rem;
    font-weight: 300;
    color: var(--gold-pale);
    line-height: 1;
    pointer-events: none;
    user-select: none;
  }
  [data-theme="dark"] .packs-step__num { color: rgba(255,255,255,.05); }
  .packs-step h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: .55rem;
    position: relative;
  }
  .packs-step h3::after {
    content: '';
    display: block;
    width: 34px; height: 2px;
    background: linear-gradient(90deg, var(--gold-light), var(--gold));
    margin-top: .6rem;
    border-radius: 2px;
  }
  .packs-step p {
    font-size: .84rem;
    color: var(--text-muted);
    line-height: 1.6;
  }

  /* ── C. TOOLBAR — tamaño + orden + contador ─────────────────── */
  .packs-toolbar {
    max-width: var(--max-w);
    margin: 2.4rem auto 0;
    padding: 0 1.5rem;
  }
  .packs-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.15rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  .pack-size-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
  }
  .pack-size-bar__label {
    font-size: .65rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    margin-right: .35rem;
  }
  .pack-size-chip {
    padding: .45rem 1.05rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--color-border-strong);
    background: transparent;
    /* La toolbar es oscura en AMBOS temas: texto claro para contraste AA */
    color: rgba(255,255,255,.85);
    font-size: .76rem;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all .22s var(--ease-premium);
  }
  .pack-size-chip:hover {
    border-color: var(--gold);
    color: var(--gold-light);
    background: rgba(212,169,106,.12);
  }
  .pack-size-chip.active,
  .pack-size-chip[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(201,155,95,.3);
  }
  .packs-toolbar-right {
    display: flex;
    align-items: center;
    gap: 1.1rem;
  }
  .packs-count {
    font-size: .76rem;
    color: var(--text-muted);
    letter-spacing: .02em;
    white-space: nowrap;
  }
  .packs-sort {
    position: relative;
    display: flex;
    align-items: center;
  }
  .packs-sort__button {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background:
      linear-gradient(160deg, rgba(201,155,95,.09), rgba(201,155,95,.02)),
      var(--surface);
    border: 1.5px solid rgba(201,155,95,.4);
    border-radius: var(--r-pill);
    padding: .55rem 1.15rem;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-secondary);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.05);
    transition: border-color .22s var(--ease-premium), box-shadow .22s var(--ease-premium), transform .22s var(--ease-premium);
  }
  .packs-sort__label {
    font-size: .65rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
  }
  .packs-sort__value {
    color: var(--gold-light);
    white-space: nowrap;
  }
  .packs-sort__chevron {
    color: var(--gold);
    transition: transform .25s var(--ease-premium);
  }
  .packs-sort__button:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(201,155,95,.22);
    transform: translateY(-1px);
  }
  .packs-sort__button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-color: var(--gold);
  }
  .packs-sort__menu {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    min-width: 220px;
    margin: 0;
    padding: .4rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid rgba(201,155,95,.35);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.12);
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    pointer-events: none;
    transition: opacity .22s var(--ease-premium), transform .22s var(--ease-premium);
    z-index: 60;
  }
  .packs-sort__menu.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .packs-sort__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .62rem .9rem;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .18s var(--ease-premium), color .18s var(--ease-premium);
  }
  .packs-sort__option:hover,
  .packs-sort__option:focus-visible {
    background: rgba(201,155,95,.12);
    color: var(--gold-light);
    outline: none;
  }
  .packs-sort__option.active {
    color: var(--gold-light);
    font-weight: 600;
  }
  .packs-sort__option.active::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 10px rgba(201,155,95,.7);
  }
  .packs-sort__menu.open .packs-sort__option:nth-child(1) { transition-delay: .02s; }
  .packs-sort__menu.open .packs-sort__option:nth-child(2) { transition-delay: .04s; }
  .packs-sort__menu.open .packs-sort__option:nth-child(3) { transition-delay: .06s; }
  .packs-sort__menu.open .packs-sort__option:nth-child(4) { transition-delay: .08s; }

  /* ── D. CARD — mini-selector de tamaño + precio c/u ─────────── */
  .promo-size-picker {
    display: flex;
    justify-content: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin: .15rem 0 .1rem;
  }
  .promo-size-chip {
    padding: .34rem .85rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--color-border-strong);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s var(--ease-premium);
  }
  .promo-size-chip:hover {
    border-color: var(--gold);
    color: var(--gold-deep);
    background: var(--gold-pale);
  }
  .promo-size-chip.active,
  .promo-size-chip[aria-pressed="true"] {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(201,155,95,.28);
  }
  .promo-per-decant {
    display: block;
    font-size: .68rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: .04em;
    margin-top: -0.3rem;
    margin-bottom: .1rem;
  }

  /* ── E. RESPONSIVE ──────────────────────────────────────────── */
  @media (max-width: 900px) {
    .packs-benefits { grid-template-columns: 1fr; margin-top: -1.5rem; }
    .packs-benefit { padding: 1rem 1.2rem; }
    .packs-steps { grid-template-columns: 1fr; gap: 1rem; }
    .packs-how { padding-top: 3rem; }
    .packs-toolbar-row { flex-direction: column; align-items: flex-start; }
    .packs-toolbar-right { width: 100%; justify-content: space-between; }
  }
  @media (max-width: 480px) {
    .packs-toolbar-right { flex-direction: column; align-items: flex-start; gap: .7rem; }
    .packs-count { order: -1; }
  }

  /* ══════════════════════════════════════════════════════════════
    PREMIUM MOBILE — Fragrance Obsession (ciclo TikTok)
    Fondo oscuro elegante + sticky bar + métodos de pago
    ══════════════════════════════════════════════════════════════ */

  /* ── A. CHIP DE PRESENTACIÓN en cards (Caja Sellada / Tester) ── */
  .presentation-chip {
    position: absolute;
    top: .85rem;
    left: .85rem;
    z-index: 2;
    background: rgba(10,10,10,.82);
    -webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
  color: #E8CE9C;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .3rem .75rem;
    border-radius: var(--r-pill);
    border: 1px solid rgba(255,255,255,.14);
  }

  /* ── B. MÉTODOS DE PAGO (checkout híbrido) ──────────────────── */
  .pay-methods {
    margin: 1.4rem 0 1rem;
  }
  .pay-methods__grid {
    display: grid;
    gap: .7rem;
    margin-top: .8rem;
  }
  .pay-method {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    text-align: left;
    padding: .95rem 1.1rem;
    background: var(--surface);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--r-md);
    cursor: pointer;
    font-family: var(--font-body);
    transition: all var(--t-fast);
  }
  .pay-method:hover {
    border-color: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
  .pay-method.active {
    border-color: var(--gold);
    background: linear-gradient(135deg, var(--gold-pale) 0%, rgba(230,233,236,.35) 100%);
    box-shadow: 0 0 0 3px rgba(201,155,95,.16);
  }
  [data-theme="dark"] .pay-method.active {
    background: rgba(201,155,95,.12);
    border-color: var(--gold-light);
  }
  /* Método de pago no disponible (sin link real de pasarela configurado) */
  .pay-method.is-disabled { opacity: .42; filter: grayscale(.55); pointer-events: none; }
  .pay-method__icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    border-radius: 12px;
    background: var(--surface-alt);
  }
  .pay-method__icon--logos {
    width: auto; min-width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    gap: 8px; max-width: 100%; overflow: hidden; flex-wrap: wrap;
    background: #fff; border: 1px solid rgba(0,0,0,.08);
  }
  .pay-method__icon--logos img {
    width: 32px; height: auto; max-width: 100%; object-fit: contain; flex-shrink: 0;
    display: block;
  }
  .pay-method__body { display: flex; flex-direction: column; gap: .1rem; }
  .pay-method__body strong { font-size: .88rem; color: var(--text-primary); }
  .pay-method__body span { font-size: .74rem; color: var(--text-muted); line-height: 1.45; }
  .pay-method__check {
    margin-left: auto;
    flex-shrink: 0;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--text-light);
    color: transparent;
    font-size: .7rem;
    transition: all var(--t-fast);
  }
  .pay-method.active .pay-method__check {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
  }
  .mp-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0 0 1rem;
    padding: .8rem 1rem;
    border-radius: var(--r-md);
    background: rgba(201,155,95,.08);
    border: 1px dashed rgba(201,155,95,.4);
    font-size: .76rem;
    color: var(--text-secondary);
    line-height: 1.55;
  }
  .mp-note i { color: var(--gold); margin-top: .2rem; }
  .btn-whatsapp {
    background: linear-gradient(135deg, #25d366, #1eb958);
  }
  .btn-whatsapp:hover {
    background: linear-gradient(135deg, #1eb958, #179c49);
    box-shadow: 0 10px 30px rgba(37,211,102,.32);
  }

  /* ── C. STICKY BOTTOM CART (solo móvil ≤768px) ──────────────── */
  .sticky-cart {
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    z-index: 940;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .65rem .65rem .65rem 1rem;
    border-radius: var(--r-lg);
    background: rgba(13,13,13,.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
    transform: translateY(calc(100% + 1.5rem));
    opacity: 0;
    pointer-events: none;
    transition: transform .45s cubic-bezier(.22,.7,.3,1), opacity .3s ease;
  }
  .sticky-cart.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
  .sticky-cart__info { display: flex; align-items: center; gap: .7rem; min-width: 0; }
  .sticky-cart__count {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #1a1005;
    font-weight: 800;
    font-size: .95rem;
  }
  .sticky-cart__texts { display: flex; flex-direction: column; min-width: 0; }
  .sticky-cart__label {
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
  }
  .sticky-cart__total {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
  }
  .sticky-cart__btn {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.3rem;
    border: none;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%);
    color: #1a1005;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .04em;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 10px 26px rgba(201,155,95,.35);
  }
  .sticky-cart__btn:active { transform: scale(.96); }
  /* El sticky bar no tapa contenido: los botones flotantes compiten con él */
  @media (max-width: 768px) {
    body:has(#stickyCart.visible) .back-to-top,
    body:has(#comboSummary.visible) .back-to-top { display: none; }
  }
  @media (min-width: 769px) {
    .sticky-cart { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sticky-cart { transition: none; }
  }

  /* ── D. MÓVIL — tipografía y botones más grandes (tap-friendly) ── */
  @media (max-width: 600px) {
    .btn-add {
      min-height: 44px;
      font-size: .74rem;
    }
    .modal .btn-add-large {
      min-height: 52px;
      font-size: .86rem;
    }
    .size-option { padding: .6rem .9rem; }
  }

  /* ============================================================
    CART ITEMS — clases extraidas (antes estilos inline en JS)
    ============================================================ */
  .cart-item .cart-gift-wrap { position: relative; display: inline-block; }
  .cart-item .cart-gift-thumb {
    position: absolute; bottom: -4px; right: -4px;
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--surface); object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
  }
  .cart-item .cart-gift-note { font-size: .7rem; color: var(--gold); margin-top: 2px; }
  .cart-item .cart-pack-strip {
    display: flex; gap: 6px; overflow-x: auto;
    padding-top: 6px; margin-top: 6px;
    border-top: 1px dashed var(--border-light);
  }
  .cart-item .cart-pack-item { flex: 0 0 auto; text-align: center; width: 55px; }
  .cart-item .cart-pack-thumb {
    width: 36px; height: 36px; border-radius: 6px;
    object-fit: cover; display: block; margin: 0 auto;
  }
  .cart-item .cart-pack-name {
    font-size: .62rem; line-height: 1.2; margin-top: 2px;
    max-width: 55px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: var(--text-muted);
  }
.cart-item .cart-pack-thumb,
  .cart-item .cart-gift-thumb { -webkit-tap-highlight-color: transparent; }
  .cart-pack-item img { width:100%; height:auto; object-fit:contain; margin:0 auto; display:block; }
  .cart-item img[onerror], .cart-item .cart-pack-thumb[onerror], .cart-item .cart-pack-item img[onerror] { background:var(--surface); color:var(--text-muted); font-size:.7rem; }

  /* ============================================================
    PULIDO UX — Fragrance Obsession (ciclo 2026)
    ============================================================ */

  /* Marca: gradiente dorado en el logo */
  .logo-name span,
  .footer-logo-name {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: filter var(--t-base);
  }
  .logo:hover .logo-name span { filter: drop-shadow(0 2px 10px rgba(201,155,95,.5)); }

  /* Feedback táctil en botones */
  .btn-add-large:active, .btn-checkout:active, .btn-add:active,
  .btn-gold:active, .btn-whatsapp:active, .btn-empty-action:active,
  .btn-outline-dark:active { transform: scale(.96); }
  .modal-close:active { transform: rotate(90deg) scale(.9); }

  /* Foco accesible en toda la interfaz */
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  /* Scrollbar personalizada (solo punteros finos) */
  @media (pointer: fine) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background: rgba(201,155,95,.35);
      border-radius: 8px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover { background: rgba(201,155,95,.6); }
    [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(212,169,106,.3); }
    [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(212,169,106,.55); }
  }

  /* Tipografía display: tracking fino en títulos serif */
  .hero h1 { letter-spacing: -.02em; }
  .section-title { letter-spacing: -.015em; }

  /* Precio en cards: suavizado de color */
  .product-price { transition: color var(--t-base); }
  .product-card:hover .product-price { color: var(--gold-deep); }
  [data-theme="dark"] .product-card:hover .product-price { color: var(--gold-light); }

  /* Icono del toggle de tema: reacción al hover */
  .theme-toggle:hover .theme-icon { transform: rotate(-25deg); }
  .theme-toggle.rotating .theme-icon { transform: rotate(360deg); }

  /* ============================================================
    ANNOUNCEMENT + NAV DRAWER + FABS + REDISEÑO DE FILTROS — 2026
    Antes: topbar (beneficio rotativo + redes) + marquee (cinta de
    promos) + header-inner, 3 franjas superpuestas leyendo el mismo
    array. Ahora: 1 announcement estático + 1 fila de navegación. Redes,
    contacto y tema viven en el nav-drawer (móvil) y en el footer.
    ============================================================ */

  /* ---------- Announcement: 1 sola línea estática, sin rotar ---------- */
  .announcement {
    background: linear-gradient(90deg, #1A120B, #261B10 50%, #1A120B);
    border-bottom: 1px solid rgba(212,169,106,.18);
    font-size: .74rem; letter-spacing: .03em; font-weight: 500;
    color: rgba(255,255,255,.82);
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .38rem 1rem;
  }
  .announcement i { color: var(--gold-light); font-size: .85em; }

  /* ---------- Nav drawer: utilidades trasladadas desde el header ---------- */
  .nav-drawer-head, .nav-divider, .nav-utilities, .nav-theme, .nav-footer-note {
    display: none; /* solo existen dentro del drawer móvil, ver media query */
  }
  .nav-backdrop {
    /* El drawer y su velo comparten una escala semántica, por debajo del
       carrito y otros diálogos que ya usan su propia capa. */
    position: fixed; inset: 0; z-index: var(--z-drawer-backdrop);
    background: rgba(10,7,4,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .28s ease, visibility 0s linear .28s;
  }
  .nav-backdrop.active {
    opacity: 1; visibility: visible; pointer-events: all;
    transition: opacity .28s ease;
  }

  /* ---------- Filtros del catálogo: barra de píldoras premium ---------- */
  .cat-filter-bar {
    display: flex; flex-direction: column; gap: .4rem;
    margin: 1.6rem 0 1.2rem;
  }
  .cat-filter-bar__row {
    display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  }
  .cat-filter-pills {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    scroll-snap-type: x proximity; overflow-x: auto; scrollbar-width: none;
    /* Aire vertical para que el hover (translateY + sombra) no se recorte:
       overflow-x:auto fuerza overflow-y:auto, el padding agranda el área
       recortable sin cambiar la altura visual del contenedor. */
    padding: .45rem 0;
  }
  .cat-filter-pills::-webkit-scrollbar { display: none; }
  .cat-filter-divider { width: 1px; height: 24px; background: var(--border); margin: 0 .2rem; flex: 0 0 auto; }
  .cat-filter-gender { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
  /* PENDIENTE decisión del cliente: clasificar perfumes por género (hoy 100% unisex).
    Filtros de género ocultos de forma reversible; reactivar borrando este bloque. */
  #filtersGender, .cat-filter-divider { display: none; }
  .filters-offcanvas__label + .filters-offcanvas__pills:has(.cat-pill--oc-gender),
  .cat-pill--oc-gender { display: none; }
  #promoGenderGroup { display: none !important; }
  .cat-pill {
    border-radius: 999px; flex: 0 0 auto; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: .45rem;
    transition: all var(--t-fast);
  }
  .cat-pill i { font-size: .82em; opacity: .85; }
  .cat-pill--cat { padding: .6rem 1.3rem; font-size: .84rem; font-weight: 600; }
  .cat-pill--gender { padding: .52rem 1.05rem; font-size: .82rem; font-weight: 600; }
  .cat-pill:hover {
    border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px);
  }
  .cat-pill.active, .cat-pill[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #0d0a06; border-color: transparent; font-weight: 700;
    box-shadow: 0 6px 18px rgba(201,155,95,.38);
    transform: translateY(-1px);
  }
  .cat-pill.active i, .cat-pill[aria-pressed="true"] i { opacity: 1; }
  .cat-pill--brand { padding: .52rem 1.05rem; font-size: .82rem; font-weight: 600; }
  .cat-pill--brand.active {
    background: var(--gold-deep); color: #fff; border-color: transparent;
  }
  .cat-pill--brand.active i { opacity: 1; }
  /* ── Brand filter composite control ── */
  .brand-filter-control {
    display: inline-flex; align-items: center; position: relative;
    vertical-align: middle;
  }
  .brand-filter-control .cat-pill--brand {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
    padding-right: .7rem;
  }
  .brand-clear-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.4rem; height: 100%; min-height: 1.8rem; border-radius: 0 var(--r-pill) var(--r-pill) 0;
    border: 1.5px solid var(--border); border-left: none;
    background: var(--gold-deep); color: #fff; font-size: .75rem;
    line-height: 1; padding: 0 .35rem; cursor: pointer;
    transition: background .2s;
  }
  .brand-clear-btn:hover { background: #8a6530; }
  /* Píldoras dentro del offcanvas */
  .cat-pill--oc { padding: .65rem 1.2rem; font-size: .9rem; font-weight: 600; }

  /* Chips de tamaño del modal de packs (no son filtros) */
  .pack-size-chip {
    border-radius: 999px; flex: 0 0 auto; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: .45rem;
    transition: all var(--t-fast);
    padding: .45rem .95rem; font-size: .8rem; font-weight: 600;
  }
  .pack-size-chip:hover {
    border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px);
  }
  .pack-size-chip.active, .pack-size-chip[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #0d0a06; border-color: transparent; font-weight: 700;
    box-shadow: 0 6px 18px rgba(201,155,95,.38);
    transform: translateY(-1px);
  }

  /* Contador de resultados del catálogo */
  #catalogResultsCount {
    font-size: .84rem; color: var(--text-muted); letter-spacing: .02em;
    margin-left: auto;
  }
  #catalogResultsCount strong { color: var(--gold-deep); }
  [data-theme="dark"] #catalogResultsCount strong { color: var(--gold-light); }

  /* ---------- Botón "Filtros" móvil (abre el offcanvas) ---------- */
  .btn-filters-mobile {
    display: none; align-items: center; gap: .5rem;
    padding: .62rem 1.15rem; border-radius: 999px;
    border: 1.5px solid var(--gold); background: rgba(201,155,95,.08);
    color: var(--gold-deep); font-weight: 600; font-size: .84rem;
    cursor: pointer; font-family: var(--font-body);
    transition: all var(--t-fast);
  }
  [data-theme="dark"] .btn-filters-mobile { color: var(--gold-light); }
  .btn-filters-mobile:hover { background: var(--gold); color: #fff; }

  /* ---------- Offcanvas de filtros (móvil) ---------- */
  .filters-offcanvas {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 5200;
    width: min(86vw, 360px);
    background: var(--surface);
    border-left: 1px solid var(--border-light);
    box-shadow: -18px 0 50px rgba(0,0,0,.4);
    display: flex; flex-direction: column;
    transform: translateX(105%);
    transition: transform .35s cubic-bezier(.32,.72,.28,1);
    visibility: hidden;
  }
  .filters-offcanvas.open { transform: translateX(0); visibility: visible; }
  .filters-offcanvas__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--border-light);
  }
  .filters-offcanvas__head h3 {
    font-family: var(--font-display); font-weight: 500; font-size: 1.25rem;
    color: var(--text-primary);
  }
  .filters-offcanvas__body { flex: 1; overflow-y: auto; padding: 1.3rem 1.2rem; }
  .filters-offcanvas__label {
    font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--gold-deep); margin: 0 0 .7rem; font-weight: 600;
  }
  [data-theme="dark"] .filters-offcanvas__label { color: var(--gold-light); }
  .filters-offcanvas__pills { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.6rem; }
  .filters-offcanvas__foot { padding: 1rem 1.2rem; border-top: 1px solid var(--border-light); }
  .filters-offcanvas__foot .btn { width: 100%; }
  .filters-offcanvas__backdrop {
    position: fixed; inset: 0; z-index: 5190; background: rgba(5,5,5,.6);
    opacity: 0; visibility: hidden; transition: opacity .3s ease;
  }
  .filters-offcanvas__backdrop.show { opacity: 1; visibility: visible; }
  body.no-scroll { overflow: hidden; }

  /* ---------- Offcanvas brand button ---------- */
  .filters-offcanvas__brand {
    display: flex; align-items: center; gap: .5rem; margin-bottom: 1.6rem;
  }
  .filters-offcanvas__brand-btn {
    flex: 1; display: flex; align-items: center; justify-content: space-between;
    padding: .65rem 1rem; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); color: var(--text-primary); font-size: .88rem;
    font-weight: 500; cursor: pointer; transition: border-color var(--t-fast);
  }
  .filters-offcanvas__brand-btn:hover { border-color: var(--gold); }
  .filters-offcanvas__brand-btn i { font-size: .7em; opacity: .5; }
  .filters-offcanvas__brand-clear {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border); border-radius: 50%;
    color: var(--text-muted); cursor: pointer; font-size: .75rem;
    transition: all var(--t-fast);
  }
  .filters-offcanvas__brand-clear:hover { border-color: var(--gold); color: var(--gold); }

  /* ---------- Brand explorer modal ---------- */
  .brand-explorer-overlay {
    position: fixed; inset: 0; z-index: 5300;
    background: rgba(5,5,5,.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
  }
  .brand-explorer-overlay.active { opacity: 1; visibility: visible; }
  .brand-explorer {
    background: var(--surface); border: 1px solid var(--border-light);
    border-radius: var(--r-lg); width: min(92vw, 680px); max-height: 80vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.45);
  }
  .brand-explorer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border-light);
  }
  .brand-explorer__head h3 {
    font-family: var(--font-display); font-weight: 500; font-size: 1.2rem;
    color: var(--text-primary); margin: 0;
  }
  .brand-explorer__search {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem 1.5rem; border-bottom: 1px solid var(--border-light);
  }
  .brand-explorer__search i { color: var(--text-muted); font-size: .85rem; }
  .brand-explorer__search input {
    flex: 1; border: none; background: transparent; outline: none;
    font-size: .9rem; color: var(--text-primary);
    font-family: var(--font-body);
  }
  .brand-explorer__search input::placeholder { color: var(--text-muted); }
  .brand-explorer__az {
    display: flex; flex-wrap: wrap; gap: .2rem;
    padding: .6rem 1.5rem; border-bottom: 1px solid var(--border-light);
  }
  .brand-az-btn {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 4px;
    font-size: .72rem; font-weight: 600; color: var(--text-secondary);
    cursor: pointer; transition: all var(--t-fast);
    font-family: var(--font-body);
  }
  .brand-az-btn:hover:not(.disabled) { background: var(--gold-pale); color: var(--gold-deep); }
  .brand-az-btn.disabled { color: var(--text-muted); opacity: .35; cursor: default; }
  .brand-explorer__body {
    flex: 1; overflow-y: auto; padding: 1rem 1.5rem 1.5rem;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .brand-group { margin-bottom: 1.2rem; }
  .brand-group__letter {
    font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
    color: var(--gold-deep); margin-bottom: .5rem; padding-bottom: .3rem;
    border-bottom: 1px solid var(--border-light);
  }
  [data-theme="dark"] .brand-group__letter { color: var(--gold-light); }
  .brand-group__list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .15rem .8rem;
  }
  .brand-item {
    display: block; width: 100%; text-align: left; padding: .45rem .6rem;
    background: transparent; border: none; border-radius: 6px;
    font-size: .85rem; color: var(--text-secondary); cursor: pointer;
    transition: all var(--t-fast); font-family: var(--font-body);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .brand-item:hover { background: var(--gold-pale); color: var(--text-primary); }
  .brand-item.selected {
    color: var(--gold-deep); font-weight: 700;
    background: var(--gold-pale);
  }
  [data-theme="dark"] .brand-item.selected { color: var(--gold-light); }
  .brand-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
  .brand-no-results {
    text-align: center; padding: 2rem 1rem; color: var(--text-muted); font-size: .9rem;
  }
  .brand-no-results__clear {
    display: inline-block; margin-top: .5rem; background: none; border: none;
    color: var(--gold-deep); font-weight: 600; cursor: pointer; text-decoration: underline;
    font-size: .85rem;
  }
  [data-theme="dark"] .brand-no-results__clear { color: var(--gold-light); }

  /* ---------- FABs agrupados (WhatsApp + Instagram, esquina inferior derecha) ---------- */

  /* Cat-tiles: activo con resplandor dorado */
  .cat-tile.active, .cat-tile[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--gold), 0 14px 34px rgba(201,155,95,.3) !important;
    transform: translateY(-4px) scale(1.01) !important;
  }

  /* Toolbar de packs: sticky con blur */
  .packs-toolbar {
    position: sticky; top: 74px; z-index: 950;
    background: rgba(5,5,5,.72);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(212,169,106,.14); border-radius: 16px;
    padding: .7rem .9rem; margin-bottom: 1.4rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }
  [data-theme="dark"] .packs-toolbar {
    background: rgba(10,8,5,.78);
    border-color: rgba(212,169,106,.18);
  }
  .packs-toolbar-row { gap: .8rem; }
  .pack-size-bar { scroll-snap-type: x proximity; }
  .packs-sort__button {
    background: var(--surface); color: var(--text-primary);
    border: 1.5px solid var(--border-light); border-radius: 999px;
    padding: .5rem .9rem; font-size: .8rem; cursor: pointer;
    transition: border-color var(--t-fast);
  }
  .packs-sort__button:hover { border-color: var(--gold); }
  .packs-sort__menu { min-width: 200px; }
  .packs-count {
    font-size: .8rem; color: var(--gold-light); font-weight: 600;
    padding: .45rem .8rem; border-radius: 999px;
    background: rgba(212,169,106,.1); border: 1px dashed rgba(212,169,106,.35);
  }

  /* Contador de resultados del catálogo */
  #catalogResultsCount {
    font-size: .84rem; color: var(--text-muted); margin: .2rem 0 .6rem;
    letter-spacing: .02em;
  }
  #catalogResultsCount strong { color: var(--gold-deep); }
  [data-theme="dark"] #catalogResultsCount strong { color: var(--gold-light); }

  /* ---------- FABs agrupados: píldora glassmorphism (WhatsApp + Instagram) ---------- */
  .fab-group {
    position: fixed; right: 20px; bottom: 20px; z-index: 4500;
    display: flex; flex-direction: column; align-items: center; gap: .65rem;
    padding: 6px;
    border-radius: 40px;
    background: rgba(5,5,5,.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(209, 213, 219, .25);
    box-shadow: 0 12px 32px rgba(10,10,10,.28);
  }
  .wa-fab {
    position: static;
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    background: transparent;
    color: #D4A96A;
    border: none;
    box-shadow: none;
    opacity: 0; transform: translateY(14px) scale(.85); pointer-events: none;
    transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1),
      background .3s ease, color .3s ease;
  }
  .wa-fab.visible { opacity: 1; transform: none; pointer-events: auto; }
  /* Monocromático (plata); en hover cada uno muestra su color de marca */
  .wa-fab:hover {
    transform: translateY(-3px) scale(1.06);
    background: rgba(209, 213, 219, .12);
    color: #fff;
  }
  .wa-fab:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: #fff;
  }
  .wa-fab::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid rgba(46,224,93,.55); animation: waPulse 2.4s ease-out infinite;
    pointer-events: none;
  }
  @keyframes waPulse {
    0%   { transform: scale(.85); opacity: 1; }
    70%  { transform: scale(1.25); opacity: 0; }
    100% { transform: scale(1.25); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .wa-fab::after { animation: none; } }

  /* Volver arriba: sube para no solaparse con la píldora de FABs */
  .back-to-top { bottom: calc(20px + 130px + 14px); }

  /* ---------- Ocultar FABs cuando el carrito está abierto ---------- */
body:has(#cartSidebar.active) #waFab { display: none !important; }
body:has(#cartSidebar.active) .back-to-top,
body:has(#modalOverlay.active) .back-to-top { display: none; }
body:has(#cartSidebar.active) .sticky-cart { display: none; }
  .footer-payments {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem;
    font-size: .8rem; color: rgba(255,255,255,.75); letter-spacing: .03em;
  }
  .pay-logo {
    display: inline-flex; align-items: center; justify-content: center;
    max-width: 100%; overflow: hidden;
    background: #fff; border-radius: 6px; padding: .2rem .45rem;
    border: 1px solid rgba(255,255,255,.14); transition: transform .22s var(--ease-premium), box-shadow .22s var(--ease-premium);
  }
  .pay-logo img { width: 32px; height: auto; max-width: 100%; object-fit: contain; flex-shrink: 0; display: block; }
  .pay-logo:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.3); }
  .pay-logo--cash { background: rgba(255,255,255,.08); color: #fff; padding: .25rem .5rem; }
  .pay-logo--cash svg { width: 20px; height: 20px; }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px) {
    .packs-toolbar { top: 62px; }
  }
  @media (max-width: 767px) {
    /* Filtros: pills scrollables horizontalmente en móvil */
    .btn-filters-mobile { display: none; }
    .cat-filter-bar { margin: 1rem 0 .8rem; }
    /* Bug real: flex-wrap:nowrap obligaba a las pills a compartir la fila
       con el texto de resultados (#catalogResultsCount, que ya pedia
       width:100% mas abajo pero no podia tomarlo por el nowrap), asi que
       las pills quedaban comprimidas a ~170px y "Diseñador"/"Completos"
       se veian cortadas sin scroll visible. Con wrap, las pills ocupan su
       propia fila completa y el conteo cae a la fila siguiente. */
    .cat-filter-bar__row { flex-wrap: wrap; gap: .5rem; }
    .cat-filter-pills {
      flex: 1 1 100%; width: 100%;
      flex-wrap: nowrap; gap: .4rem;
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      padding: .3rem 0; scrollbar-width: none;
      scroll-snap-type: x mandatory;
    }
    .cat-filter-pills::-webkit-scrollbar { display: none; }
    .cat-pill--cat {
      flex: 0 0 auto; scroll-snap-align: start;
      padding: .5rem 1rem; font-size: .78rem;
      white-space: nowrap; min-height: 36px;
    }
    .cat-pill--cat i { display: none; }
    .cat-filter-divider { display: none; }
    .cat-filter-gender { display: none; }
    #catalogResultsCount { margin-left: 0; width: 100%; font-size: .78rem; }
    .cat-pill--brand { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
    .brand-explorer { width: 100%; max-height: 90vh; border-radius: var(--r-lg) var(--r-lg) 0 0; margin-top: auto; }
    .brand-explorer-overlay { align-items: flex-end; }
    .brand-group__list { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 767px) {
    .announcement { padding: .32rem 1rem; font-size: .68rem; }
  }
  @media (max-width: 640px) {
    .packs-toolbar { top: 108px; padding: .6rem .7rem; border-radius: 14px; }
    .pack-size-bar, .gender-bar__chips { scroll-snap-type: x proximity; }
    .fab-group { right: 14px; bottom: calc(5.7rem + 10px); }
    .wa-fab { width: 48px; height: 48px; font-size: 1.25rem; }
    .back-to-top { bottom: calc(5.7rem + 48px + 48px + .65rem + 12px); }
  }

  /* ============================================================
    CATÁLOGO REAL 2026 — 2 colecciones (Nicho + Diseñador)
    ============================================================ */

  /* Mosaico editorial equilibrado con 2 tiles */
  .cat-showcase:not(.cat-showcase--promos) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 460px;
  }
  .cat-showcase:not(.cat-showcase--promos) .cat-tile {
    grid-column: auto; grid-row: 1; height: 460px;
  }
  .cat-showcase--promos {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 460px;
  }

  /* Strip de promociones del catálogo (promos oficiales del negocio).
    Barra horizontal unificada de 4 columnas; en móvil scroll horizontal. */
  .promo-strip {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0 0 1.2rem;
    background: var(--surface);
    border: 1px solid rgba(212,169,106,.16);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
  }
  .promo-strip .packs-benefit {
    flex-direction: column; text-align: center; gap: .45rem;
    padding: 1rem .9rem;
    background: transparent; border: none; border-radius: 0;
    box-shadow: none;
  }
  .promo-strip .packs-benefit + .packs-benefit { border-left: 1px solid var(--border-light); }
  .promo-strip .packs-benefit:hover { transform: none; box-shadow: none; border-left-color: var(--border-light); background: var(--surface-warm); }
  .promo-strip .packs-benefit__icon {
    width: 38px; height: 38px; font-size: 1.05rem;
    color: var(--gold-deep);
  }
  [data-theme="dark"] .promo-strip .packs-benefit__icon { color: var(--gold-light); }
  .promo-strip strong { font-size: .8rem; letter-spacing: .01em; }
  .promo-strip .packs-benefit span:last-child { font-size: .7rem; }
  @media (max-width: 640px) {
    /* Escalera de descuentos: antes 4 tarjetas verticales (icono arriba,
       texto abajo) al 75% del ancho -- cada una ocupaba casi media pantalla
       de alto y habia que hacer swipe 3 veces para ver las 4. Se compacta a
       fila icono+texto en horizontal (mitad de alto) y tarjetas mas
       angostas para que se alcancen a ver ~2 a la vez. */
    .promo-strip {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: 58%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      margin: 0 -.9rem .8rem;
      padding: 0 .4rem;
      border-radius: 0;
      border-left: none; border-right: none;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .promo-strip::-webkit-scrollbar { display: none; }
    .promo-strip .packs-benefit {
      flex-direction: row; text-align: left; align-items: center;
      scroll-snap-align: start;
      border-left: none !important;
      border: 1px solid var(--border-light);
      border-radius: var(--r-sm);
      margin: .4rem .2rem;
      padding: .55rem .6rem;
      gap: .5rem;
    }
    .promo-strip .packs-benefit__icon { width: 26px; height: 26px; font-size: .8rem; flex-shrink: 0; }
    .promo-strip strong { font-size: .68rem; line-height: 1.2; }
    .promo-strip .packs-benefit span:last-child { display: none; }
    }
  .promo-strip .packs-benefit + .packs-benefit { border-left: 1px solid var(--border-light); }



  /* ============================================================
    PROMPT 19 — NOIR & SILVER: catálogo 5 col, modal ordenado, UX
    ============================================================ */

  /* ---- Catálogo: grilla continua uniforme (sin agrupación por marca) ---- */
  #catalogGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.1rem;
    align-items: stretch;
    grid-auto-rows: 1fr;
  }
  #catalogGrid .product-card { height: 100%; min-width: 0; }
  #catalogGrid .brand-group,
  #catalogGrid .brand-heading { display: none; }
  @media (max-width: 767px) {
    #catalogGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    #catalogGrid .product-card { border-radius: var(--r-md); }
    #catalogGrid .img-wrapper { aspect-ratio: 3 / 4; }
    #catalogGrid .img-wrapper img { padding: .8rem; }
    #catalogGrid .product-info { padding: .8rem .9rem 1rem; gap: .2rem; }
    #catalogGrid .product-category { font-size: .56rem; }
    #catalogGrid .product-name { font-size: 1rem; line-height: 1.2; }
    #catalogGrid .product-brand { font-size: .68rem; }
    #catalogGrid .product-price-block { padding-top: .5rem; }
    #catalogGrid .product-price { font-size: .95rem; }
    #catalogGrid .btn-add { padding: .55rem; font-size: .65rem; margin-top: .6rem; }
    #catalogGrid .product-badge { font-size: .56rem; padding: .2rem .5rem; top: .5rem; left: .5rem; }
  }
  @media (max-width: 359px) {
    .product-grid,
    #catalogGrid { grid-template-columns: 1fr; gap: .6rem; }
    #catalogGrid .product-info { padding: 1rem 1.1rem 1.2rem; }
  }

  /* ---- Modal: selector de tamaños en cuadrícula, ordenado y con check ---- */
  .size-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: .55rem;
    width: 100%;
    justify-content: center;
    margin-bottom: 1.2rem;
  }
  .size-option { width: 100%; min-height: 58px; position: relative; }
  .size-option.selected::after {
    content: "✓";
    position: absolute; top: .3rem; right: .55rem;
    font-size: .7rem; font-weight: 700; color: var(--gold-deep);
  }
  [data-theme="dark"] .size-option.selected::after { color: var(--gold); }
  .size-label {
    text-align: center;
    font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: .55rem;
  }

  /* ---- Modal: botón principal siempre visible (sticky al fondo) ---- */
  #modalAddBtn { position: static; margin-top: .2rem; }
  .modal-body { position: relative; }

  /* ---- Announcement: franja noir fija (ambos temas) ---- */
  .announcement {
    background: linear-gradient(90deg, #1A120B, #261B10 50%, #1A120B);
    border-bottom: 1px solid rgba(212,169,106,.14);
    color: rgba(255,255,255,.85);
  }
  .announcement i { color: #D4A96A; }

  /* ---- Transiciones suaves de 200 ms (UX sin estrés) ---- */
  .product-card,
  .promo-card,
  .filter-btn,
  .cat-tile,
  .btn,
  .btn-add,
  .size-option,
  .tab-switch button {
    transition-duration: .2s;
  }

  /* ---- Packs: badge y selección alineados con la paleta ---- */
  .pack-size-chip.active,
  .pack-size-chip[aria-pressed="true"] {
    background: linear-gradient(135deg, #C99B5F, #A67C3D);
    color: #1A120B;
    border-color: transparent;
  }
  @media (prefers-reduced-motion: reduce) {
    #catalogGrid .product-card,
    #promoGrid .promo-card { animation: none; }
  }

  /* ============================================================
    PROMPT 18 — PULIDO VISUAL FINAL
    Iconos SVG minimalistas, topbar rotativa, tema con SVG.
    ============================================================ */

  /* ---- Toggle de tema: luna (dark) / sol (light) ---- */
  .theme-icon { display: inline-flex; align-items: center; justify-content: center; }
  .theme-icon svg { display: none; }
  [data-theme="dark"] .theme-icon .theme-icon-moon { display: block; }
  [data-theme="light"] .theme-icon .theme-icon-sun { display: block; }
  [data-theme="light"] .theme-toggle { color: var(--gold-deep); }
  [data-theme="dark"] .theme-toggle { color: var(--gold-light); }

  /* ---- Iconos SVG: tamaño y alineación unificada (trazo fino, plata/oro) ---- */
  .trust-icon { display: inline-flex; }
  .trust-icon svg { width: 30px; height: 30px; color: var(--gold-deep); }
  [data-theme="dark"] .trust-icon svg { color: var(--gold-light); }

  .stat-number--stars { display: inline-flex; align-items: center; gap: .35rem; }
  .stat-number--stars svg { color: var(--gold); }
  [data-theme="dark"] .stat-number--stars svg { color: var(--gold-light); }

  .packs-benefit__icon svg { width: 22px; height: 22px; color: var(--gold-deep); }
  [data-theme="dark"] .packs-benefit__icon svg { color: var(--gold-light); }

  .pay-method__icon svg { width: 22px; height: 22px; color: var(--gold-deep); }
  [data-theme="dark"] .pay-method__icon svg { color: var(--gold-light); }

  .cart-empty-icon svg { width: 54px; height: 54px; color: var(--gold); opacity: .55; }
  [data-theme="dark"] .cart-empty-icon svg { color: var(--gold-light); }

  .empty-state-icon svg { width: 40px; height: 40px; color: var(--gold); opacity: .5; }

  .promo-meta svg { vertical-align: -2px; color: var(--gold); margin-right: 2px; }
  .cart-gift-note svg { vertical-align: -1px; margin-right: 3px; }
  .cart-item-remove svg { vertical-align: -2px; }
  .toast-emoji { display: inline-flex; }
  .toast-emoji svg { color: var(--gold); }
  [data-theme="dark"] .toast-emoji svg { color: var(--gold-light); }
  .upsell-strip__title svg { vertical-align: -2px; margin-right: 3px; color: var(--gold-deep); }
  [data-theme="dark"] .upsell-strip__title svg { color: var(--gold-light); }
  .footer-bottom p svg { vertical-align: -2px; color: var(--gold); }
  /* ---- Badges mate: sin brillo neón, fondo sólido + borde sutil ---- */
  .product-badge.soon,
  .product-badge.new,
  .product-badge.tester {
    box-shadow: none;
    border: 1px solid rgba(212,169,106,.18);
  }
  [data-theme="dark"] .product-badge.bestseller { box-shadow: none; }
  .product-badge.nicho { box-shadow: none; }

  /* ---- Tarjetas: bloque de precio vertical, independiente del badge ---- */
  .product-price-block { min-width: 0; }
  .product-info { min-width: 0; }

  /* ---- Fotos de producto con fondo blanco: integración con la paleta ---- */
  .img-wrapper img,
  .modal-image img,
  .promo-media img,
  .cart-item img {
    mix-blend-mode: multiply;
    filter: brightness(1.06) contrast(.96);
  }
  /* El blend multiplica también el producto: la tarjeta queda definida por su borde */
  .img-wrapper { border-bottom: 1px solid var(--border-light); }

  /* ---------- Footer: enlaces legales ---------- */
  .footer-legal { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; margin: .1rem 0 .35rem; font-size: .8rem; }
  .footer-legal a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--t-base), border-color var(--t-base); }
  .footer-legal a:hover { color: var(--gold-deep); border-color: rgba(201,155,95,.4); }
  [data-theme="dark"] .footer-legal a:hover { color: var(--gold-light); }
  .footer-legal span { color: var(--text-muted); opacity: .5; }

  /* ============================================================
    V17 — PALETA MARRÓN/DORADO + OVERRIDES (bloque final, siempre
    al final para ganar la cascada sobre bloques anteriores).
    Incluye los overrides de compatibilidad móvil validados en las
    fases 2-6; no consolidar mecánicamente sin regresión visual.
    ============================================================ */

  /* ---------- Fondos con tinte dorado -> verde ---------- */
  body::before {
    background-image:
      radial-gradient(circle at 8% 0%, rgba(201,155,95,.05), transparent 38%),
      radial-gradient(circle at 95% 4%, rgba(201,155,95,.04), transparent 36%);
  }
  :focus-visible { box-shadow: 0 0 0 5px rgba(201,155,95,.2); }
  .trust-bg-pattern {
    background-image:
      radial-gradient(circle at 20% 50%, rgba(201,155,95,.05) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(201,155,95,.04) 0%, transparent 42%);
  }

  /* ---------- Header ---------- */
.header {
  /* Antes solido/opaco (#1A120B plano): el unico bloque grande de la UI
     sin el lenguaje "glass" que ya usa el resto del sitio (modal, carrito,
     sticky-cart) -- se sentia como una plancha dura en vez de flotar sobre
     el contenido. Mismo color, con transparencia + var(--glass-blur) ya
     definido para el resto de superficies elevadas. */
  background: rgba(26,18,11,.86);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid rgba(212,169,106,.14);
  }
  .logo:hover .logo-img { filter: drop-shadow(0 5px 14px rgba(160,168,178,.55)); }
  .btn-icon:hover { background: rgba(201,155,95,.14); }
  .cart-count { border-color: #1A120B; }
  .hamburger:hover { background: rgba(201,155,95,.14); }

  /* ---------- Hero: overlay verde, título plata metálico ---------- */
.hero { background: #140E08; }
  @media (max-width: 768px) {
  .hero { background: #140E08 url("inicio.webp") center/cover no-repeat; }
  }
  .hero-overlay {
    background:
      linear-gradient(90deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.52) 48%, rgba(5,5,5,.18) 100%),
      linear-gradient(0deg, rgba(5,5,5,.84) 0%, transparent 42%);
  }
  @media (max-width: 768px) {
    .hero-overlay { background: linear-gradient(180deg, rgba(5,5,5,.32) 0%, rgba(5,5,5,.56) 55%, rgba(5,5,5,.86) 100%); }
  }
  .hero-badge { border: 1px solid rgba(212,169,106,.35); }
  .hero-badge i { color: #D4A96A; }
  .hero h1 em {
    background: linear-gradient(120deg, #E8CE9C 0%, #C99B5F 45%, #A67C3D 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: none;
  }
  .hero-stat-divider { background: rgba(212,169,106,.4); }
  .page-hero .section-eyebrow::before,
  .page-hero .section-eyebrow::after,
  .page-hero-eyebrow::before,
  .page-hero-eyebrow::after { background: rgba(212,169,106,.55); }

  /* ---------- Filtros / búsqueda ---------- */
  .search-box input:focus { box-shadow: 0 0 0 5px rgba(201,155,95,.14); }
  .filter-btn:hover { box-shadow: 0 6px 18px rgba(201,155,95,.16); }
  .filter-btn.active {
    background: linear-gradient(135deg, var(--gold-pale) 0%, rgba(201,155,95,.12) 100%);
    box-shadow: 0 4px 14px rgba(201,155,95,.26);
  }

  /* ---------- Promo cards ---------- */
  .promo-card:hover {
    box-shadow:
      0 4px 10px rgba(201,155,95,.12),
      0 14px 30px rgba(201,155,95,.18),
      0 28px 54px rgba(201,155,95,.16);
  }
  .promo-media-fallback {
    background:
      radial-gradient(circle at 28% 22%, rgba(255,255,255,.14), transparent 52%),
      linear-gradient(135deg, #2C2015 0%, #1A120B 100%);
  }
  .promo-card::before {
    background: linear-gradient(90deg, #1A120B, #C99B5F, #1A120B);
  }
  .promo-badge { background: #2C2015; }
  .product-card::before {
    background: linear-gradient(90deg, #1A120B, #B88A4E, #1A120B);
  }
  .product-badge.nicho { background: linear-gradient(135deg, #C99B5F, #A67C3D); color: #1A120B; }
  .img-wrapper { background: radial-gradient(circle at 50% 38%, #F4F4F5, var(--cream-0)); }
  .trust-card .trust-icon-wrap { background: var(--gold-pale); }
  .img-wrapper::before,
  .promo-img {
    background-image: linear-gradient(100deg, var(--cream-1) 28%, rgba(201,155,95,.18) 50%, var(--cream-1) 72%);
  }

  /* ---------- Pills / tabs / modal ---------- */
  .tab-switch button.active {
    background: linear-gradient(135deg, #C99B5F, #A67C3D);
    color: #1A120B;
    box-shadow: 0 4px 14px rgba(201,155,95,.35);
  }
  .size-option.selected { box-shadow: 0 2px 10px rgba(201,155,95,.22); }
  .modal::before {
    background: linear-gradient(90deg, transparent, rgba(212,169,106,.55), transparent);
  }
  .modal-close { box-shadow: 0 4px 14px rgba(10,10,10,.16); }
  .modal-close:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: #1A120B; border-color: transparent;
    box-shadow: 0 6px 18px rgba(201,155,95,.45);
  }
  .modal-image::after { border: 1px solid rgba(201,155,95,.32); }
  .stats-bar { background: #1A120B; }
  .btn-add-large:hover { background: #2C2015; }
  .back-to-top:hover { background: #2C2015; }
  
  /* ---------- Modo oscuro: fondo negro profundo + correcciones de contraste ---------- */
  [data-theme="dark"] body { background-image: none; }
  [data-theme="dark"] .hero { background: #140E08; }
  [data-theme="dark"] .cat-tile { background: #1C130C; }
  [data-theme="dark"] .img-wrapper { background: radial-gradient(circle at 50% 38%, #2C2015, #221912); }
  [data-theme="dark"] ::selection { background: #B88A4E; color: #1A120B; }
  [data-theme="dark"] .cart-count { background: #B88A4E; color: #1A120B; }
  [data-theme="dark"] .product-badge { background: #B88A4E; color: #1A120B; }
  [data-theme="dark"] .product-badge.nicho { background: linear-gradient(135deg, #D4A96A, #A67C3D); color: #1A120B; }
  [data-theme="dark"] .tab-switch button.active {
    background: linear-gradient(135deg, #D4A96A, #A67C3D);
    color: #1A120B;
    box-shadow: 0 4px 14px rgba(201,155,95,.4);
  }
  [data-theme="dark"] .modal-close:hover {
    background: linear-gradient(135deg, #D4A96A, #A67C3D);
    color: #1A120B; border-color: transparent;
  }

  /* ---------- Catálogo: grillas niveladas y entrada limpia ---------- */
  .brand-grid { align-items: stretch; }
  .brand-grid .product-card { height: 100%; }
  .product-card.reveal-item, .promo-card.reveal-item { transform: translateY(12px) scale(.985); }
  #catalogGrid .product-card { animation: cardInSoft .4s var(--ease-premium) both; }
  @keyframes cardInSoft {
    from { opacity: 0; transform: translateY(10px) scale(.99); }
    to   { opacity: 1; transform: none; }
  }

  /* ---------- Packs: el filtro de tamaño sobra (se elige en la card) ---------- */
  #packsSizeFilters { display: none; }
  #packsToolbarRow { justify-content: space-between; align-items: center; }

  /* ---------- Productos "Próximamente" ---------- */
  .product-badge.soon { background: linear-gradient(135deg, #C99B5F, #A67C3D); color: #1A120B; }
  .btn-add.btn-soon,
  .btn-add-large.btn-soon {
background: #E8DCCC;
  border-color: #E8DCCC;
    color: #5E6670;
    cursor: not-allowed;
  }
  [data-theme="dark"] .btn-add.btn-soon,
  [data-theme="dark"] .btn-add-large.btn-soon {
    background: #18181B;
    border-color: #18181B;
    color: #A1A1AA;
  }
  #modalSoonNote {
    margin: -0.6rem 0 1.1rem;
    padding: .6rem .9rem;
    border-radius: var(--r-sm);
    background: var(--gold-pale);
    border: 1px dashed var(--gold);
    color: var(--gold-deep);
    font-size: .82rem;
    text-align: center;
  }

  /* ════════════════════════════════════════════════════════════════
    PROMPT 10 — FIX SCROLL MODALES MÓVILES + NUEVAS FUNCIONES
    ════════════════════════════════════════════════════════════════ */

  /* ── 1. Scroll fiable dentro de los modales (móvil y desktop) ──
    El scroll vive en el modal (o su body), nunca en el overlay.
    dvh = altura real del viewport móvil (sin barra del navegador). */
  .modal {
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .modal::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .modal-overlay {
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;
  }
  body.modal-open { overflow: hidden; }
  html.modal-open { overflow: hidden; }
  html { overscroll-behavior-y: none; }
  /* body NO usa overscroll-behavior-y: none: bloquearía el scroll encadenado
     desde contenedores anidados (el .hero con overflow hidden y el video
     kenburns desbordado) y la rueda del ratón moriría sobre la sección visible. */
  @media (max-width: 759px) {
    .modal { display: flex; flex-direction: column; }
    .modal-image { flex: 0 0 auto; min-height: 210px; }
    .modal-body {
      flex: 1 1 auto;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      touch-action: pan-y;
      max-height: none;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .modal-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .modal-body { overflow-y: auto; }
  }

  /* ── 2. Botón "Cotizar Frasco por WhatsApp" (verde AA: >=4.5:1) ── */
  .btn-add-large.btn-add-wa {
    background: linear-gradient(135deg, #12814a, #0d6e3a);
    box-shadow: 0 8px 22px rgba(13, 110, 58, .32);
  }
  .btn-add-large.btn-add-wa:hover {
    background: linear-gradient(135deg, #12914e, #0b6434);
    box-shadow: 0 12px 28px rgba(13, 110, 58, .42);
    transform: translateY(-2px);
  }
  .btn-add-large.btn-add-wa.added { background: linear-gradient(135deg, #12814a, #0d6e3a); }

  /* ── 2b. Enlace "Cotiza el frasco completo" (dorado oscuro AA en claro) ── */
  .modal-quote-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: .85rem;
    font-size: .92rem;
    color: #5E6670;
    text-decoration: none;
    border-bottom: 1px dotted rgba(160,168,178,.55);
    padding-bottom: .15rem;
    transition: opacity .2s ease, color .2s ease;
  }
  [data-theme="dark"] .modal-quote-link { color: var(--gold-light); border-bottom-color: rgba(212,169,106,.55); }
  .modal-quote-link i { color: #0d6e3a; }
  [data-theme="dark"] .modal-quote-link i { color: #25d366; }
  .modal-quote-link:hover { color: #A67C3D; opacity: .92; }
  [data-theme="dark"] .modal-quote-link:hover { color: var(--gold); opacity: .92; }
  .modal-quote-link:focus-visible { outline: 2px solid #5E6670; outline-offset: 3px; border-radius: 2px; }

  /* ── 3. Catálogo agrupado por marca ── */
  .brand-group { margin-bottom: 2.4rem; }
  .brand-group:last-child { margin-bottom: 0; }
  .brand-heading {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.25rem;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
  @media (max-width: 480px) {
    .brand-heading { font-size: 1.28rem; }
  }
  .brand-heading::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--gold-light), transparent);
  }
  [data-theme="dark"] .brand-heading { color: #F5EFE6; }
  .brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.7rem;
    align-items: stretch;
    grid-auto-rows: 1fr;
  }
  @media (max-width: 600px) {
    .brand-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
    .brand-heading { font-size: 1.15rem; margin-bottom: .9rem; gap: .7rem; }
    .brand-group { margin-bottom: 1.6rem; }
  }

  /* ============================================================
    MODALES — REDISEÑO PREMIUM (pulido final, siempre al final)
    ============================================================ */
  .modal {
    border-radius: 20px;
    scrollbar-width: none; -ms-overflow-style: none;
    overscroll-behavior: contain;
  }
  .modal::before {
    content: ''; position: absolute; top: 0; left: 26px; right: 26px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,169,106,.6), transparent);
    z-index: 7; pointer-events: none;
  }
  .modal-close {
    box-shadow: 0 4px 14px rgba(5,5,5,.16);
    background: var(--surface-warm);
    border-color: var(--border);
  }
  .modal-close:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #fff; border-color: transparent;
    box-shadow: 0 6px 18px rgba(201,155,95,.45);
  }
  .modal-image { position: relative; }
  .modal-image::after {
    content: ''; position: absolute; inset: 12px; pointer-events: none;
    border: 1px solid rgba(201,155,95,.32);
    border-radius: 14px;
  }
  .modal-body { scrollbar-width: none; -ms-overflow-style: none; }
  .modal-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .pack-modal { border-radius: 20px; }
  .info-modal { border-radius: 20px; }
  @media (prefers-reduced-motion: reduce) {
    .modal::before { display: none; }
  }
  @media (max-width: 900px) {
    .cat-showcase:not(.cat-showcase--promos),
    .cat-showcase--promos { grid-template-rows: 340px; }
    .cat-showcase:not(.cat-showcase--promos) .cat-tile,
    .cat-showcase--promos .cat-tile { height: 340px; }
    .promo-strip { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .cat-showcase:not(.cat-showcase--promos),
    .cat-showcase--promos { grid-template-columns: 1fr; grid-template-rows: 260px 260px; }
    .cat-showcase:not(.cat-showcase--promos) .cat-tile,
    .cat-showcase--promos .cat-tile { height: 260px; grid-row: auto; }
    .promo-strip { grid-template-columns: 1fr; }
  }

  /* ============================================================
    PROMPT 6 — INSIGNIAS, MODAL INFORMATIVO Y AJUSTES FINALES
    ============================================================ */

  /* ---------- Trust badges (carrito + checkout) ---------- */
  .trust-badges {
    display: flex; align-items: center; justify-content: center;
    gap: .55rem 1.4rem; flex-wrap: wrap;
    margin: .9rem 0 .2rem;
  }
  .trust-badge {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .72rem; color: var(--text-muted);
    letter-spacing: .01em; line-height: 1.35;
    transition: color var(--t-fast), transform var(--t-fast);
  }
  .trust-badge:hover { color: var(--text-secondary); transform: translateY(-1px); }
  .trust-badge i { color: var(--gold-deep); font-size: .95rem; }
  [data-theme="dark"] .trust-badge i { color: var(--gold-light); }
  .trust-badges--cart {
    justify-content: flex-start;
    padding: .7rem .9rem .2rem;
    margin: .4rem 0 0;
    border-top: 1px dashed var(--border-light);
  }
  .checkout-summary + .trust-badges {
    margin-top: .4rem;
    padding-top: .8rem;
    border-top: 1px dashed var(--border-light);
  }

  /* ---------- Modal informativo (footer) ---------- */
  .info-modal { max-width: 640px; max-height: 86vh; }
  .info-modal .modal-body { padding: 2.2rem 2.1rem 2rem; overflow-y: auto; }
  .info-modal h2 {
    position: relative; padding-bottom: 1rem; margin-bottom: .8rem; text-align: center;
  }
  .info-modal h2::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 56px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--gold-light), var(--gold));
  }
  .info-modal__content { color: var(--text-secondary); font-size: .88rem; line-height: 1.75; scrollbar-width: none; -ms-overflow-style: none; }
  .info-modal__content::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .info-modal__content h3 {
    font-family: var(--font-display); color: var(--text-primary);
    font-size: 1.05rem; font-weight: 500; margin: 1.2rem 0 .4rem; letter-spacing: .01em;
  }
  .info-modal__content p { margin: .3rem 0; }
  .info-modal__content ul { margin: .4rem 0 .4rem 1.1rem; padding: 0; }
  .info-modal__content li { margin: .28rem 0; }
  .info-modal__content strong { color: var(--gold-deep); }
  [data-theme="dark"] .info-modal__content strong { color: var(--gold-light); }

  /* ---------- Footer: columna dinámica ---------- */
  .footer-links { display: flex; flex-direction: column; }

  /* ---------- Strip de promos: override final (móvil horizontal) ---------- */
  @media (max-width: 900px) {
    .promo-strip {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-flow: row;
    }
  }
  @media (max-width: 640px) {
    .promo-strip {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: 82%;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      margin: 0 0 1.2rem;
      padding: 0 .5rem;
      border-radius: var(--r-lg);
      border-left: 1px solid rgba(212,169,106,.16);
      border-right: 1px solid rgba(212,169,106,.16);
      scrollbar-width: thin;
    }
    .promo-strip .packs-benefit {
      scroll-snap-align: start;
      border: 1px solid var(--border-light);
      border-radius: var(--r-md);
      margin: .6rem .3rem;
    }
    .promo-strip .packs-benefit + .packs-benefit { border-left: 1px solid var(--border-light); }
  }
  /* ============================================================
    P19.2 — DARK MODE: fotos radiantes (fondo "estudio" plata)
    Las fotos son PNG con fondo blanco y se integran por multiply.
    Con el fondo oscuro #1C1C21 el multiply apagaba el producto.
    Un backdrop claro (foco de estudio) multiplicado devuelve el
    brillo: blanco -> plata, botella -> colores casi originales.
    ============================================================ */
  [data-theme="dark"] .img-wrapper,
  [data-theme="dark"] .modal-image {
    background: radial-gradient(circle at 50% 34%, #FBF7F0 0%, #F2E9DC 52%, #C9B8A3 100%);
  }
  [data-theme="dark"] .img-wrapper img,
  [data-theme="dark"] .modal-image img {
    mix-blend-mode: multiply;
    filter: brightness(1.1) contrast(.97);
  }
  [data-theme="dark"] .cart-item > img {
    background: radial-gradient(circle at 50% 35%, #F6EDE0, #C99B5F);
  }
  [data-theme="dark"] .cart-item .cart-pack-thumb,
  [data-theme="dark"] .cart-item .cart-gift-thumb {
    background: radial-gradient(circle at 50% 35%, #F6EDE0, #C99B5F);
  }
  [data-theme="dark"] .cart-item img,
  [data-theme="dark"] .cart-pack-thumb img,
  [data-theme="dark"] .cart-gift-thumb img {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
  }
  [data-theme="dark"] .promo-media:has(.promo-img) .promo-media-fallback {
    background: radial-gradient(circle at 50% 38%, #F6EDE0 0%, #C99B5F 62%, #A67C3D 100%);
  }
  [data-theme="dark"] .promo-media:has(.promo-img) .promo-media-icon,
  [data-theme="dark"] .promo-media:has(.promo-img) .promo-media-count { color: #1A120B; }
  [data-theme="dark"] .promo-media img {
    mix-blend-mode: multiply;
    filter: brightness(1.08) contrast(.97);
  }
  /* ---------- Sección Contenido — TikTok (galería estática) ----------
     La tarjeta ES un enlace (.tiktok-card, <a target="_blank">) directo
     al video en TikTok. Cero iframes, cero scripts de terceros, cero
     requests a tiktok.com desde esta página en ningún momento — la
     miniatura es 100% local y el clic navega fuera. ---------- */
.tiktok-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  align-items: stretch;
  margin-top: 3rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}
.tiktok-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 9 / 16;
  max-height: 620px;
  background: linear-gradient(175deg, rgba(201,155,95,.08) 0%, rgba(26,18,11,.4) 100%);
  border: 1px solid rgba(201,155,95,.22);
  box-shadow: 0 10px 30px rgba(26,18,11,.12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium), border-color .3s var(--ease-premium);
}
.tiktok-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 54px rgba(201,155,95,.22), 0 8px 20px rgba(0,0,0,.16);
  border-color: rgba(201,155,95,.5);
}
.tiktok-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -4px;
}
.tiktok-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
  transition: opacity .35s ease, transform .5s var(--ease-premium);
}
.tiktok-card:hover .tiktok-card__img { opacity: 1; transform: scale(1.03); }
.tiktok-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15,10,6,.88) 0%, rgba(15,10,6,.15) 45%, rgba(15,10,6,.05) 65%, transparent 100%);
}
.tiktok-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FBF7F0;
  background: linear-gradient(140deg, rgba(201,155,95,.94), rgba(166,124,61,.85));
  border: 1.5px solid rgba(255,255,255,.28);
  box-shadow: 0 10px 34px rgba(201,155,95,.5), 0 3px 10px rgba(0,0,0,.35);
  transition: transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium);
}
.tiktok-card:hover .tiktok-card__play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 16px 42px rgba(201,155,95,.62), 0 4px 14px rgba(0,0,0,.4);
}
.tiktok-card__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.5rem 1.4rem 1.5rem;
  text-align: left;
}
.tiktok-card__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.3;
  color: #FBF7F0;
  margin-bottom: .5rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.tiktok-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.tiktok-card__cta svg { flex-shrink: 0; }
.tiktok-follow { text-align: center; margin-top: 2.5rem; }

/* Responsive: 2 col desktop/tablet, 1 col móvil */
@media (max-width: 640px) {
  .tiktok-grid { grid-template-columns: 1fr; max-width: 380px; gap: 1.2rem; padding: 0 .8rem; }
  .tiktok-card { max-height: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .tiktok-card { transition: none; }
  .tiktok-card:hover { transform: none; box-shadow: 0 10px 30px rgba(26,18,11,.12); border-color: rgba(201,155,95,.22); }
  .tiktok-card__img { transition: none; }
  .tiktok-card:hover .tiktok-card__img { transform: none; opacity: .9; }
  .tiktok-card__play { transition: none; }
  .tiktok-card:hover .tiktok-card__play { transform: translate(-50%, -50%); }
}

/* ============================================================
   ACCESIBILIDAD — TARGETS TÁCTILES ≥ 44px (Fase 4)
   Se expande el área de click de controles pequeños sin cambiar
   el tamaño visual (conserva la estética premium).
   Solo en dispositivos táctiles (pointer: coarse) para no alterar
   el layout de escritorio.
   ============================================================ */
@media (pointer: coarse) {
  .modal-close, .cart-close, .theme-toggle, .social-links a,
  .cart-item-qty button, .cart-item-remove {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* .nav-util-link NO entra en la regla de arriba a proposito: es una fila
     ancha icono+texto ("WhatsApp"/"TikTok"), no un boton-icono cuadrado --
     justify-content:center la centraba entera dentro del drawer en vez de
     alinearla a la izquierda como el resto de la lista. Ya mide >44px de
     alto por su propio padding (.7rem verticales), el target tactil no se
     pierde. */
  .nav-util-link { min-height: 44px; }
  .modal-close { width: 44px; height: 44px; }
  .cart-close { width: 44px; height: 44px; }
  .theme-toggle { width: 44px; height: 44px; }
  .back-to-top { width: 48px; height: 48px; }
  .wa-fab { width: 54px; height: 54px; }
  .hamburger { width: 44px; height: 44px; }
  .hero-cta-group .btn-gold, .hero-cta-group .btn-ghost,
  #tabFull, #tabDecant, .tiktok-follow .btn-gold,
  .btn-add, .btn-empty-action {
    min-height: 44px;
  }
}
@media (pointer: coarse) and (max-width: 767px) {
  .filter-btn, .cat-pill, .pack-size-chip, .packs-sort__button, .btn-filters-mobile {
    min-height: 44px;
  }
}

/* ── SPA page visibility ─────────────────────────────── */
.page { display: none; }
.page.active { display: block; }

/* ── FAQ ACCORDION ──────────────────────────────────── */
.section-faq { max-width: 720px; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: .5rem; }
.faq-item {
  border-radius: 16px; overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
  transition: all .35s cubic-bezier(.16,1,.3,1);
}
.faq-item:hover { border-color: rgba(201,155,95,.25); }
.faq-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border: none; background: transparent;
  cursor: pointer; font-family: var(--font-body); font-size: .95rem;
  font-weight: 500; color: var(--text); letter-spacing: .01em;
  transition: color .3s;
}
.faq-trigger i {
  font-size: .75rem; color: var(--gold); transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.faq-item.open .faq-trigger i { transform: rotate(45deg); }
.faq-trigger:hover { color: var(--gold); }
.faq-answer {
  max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.16,1,.3,1), padding .4s;
}
.faq-item.open .faq-answer { max-height: 300px; }
.faq-answer p {
  padding: 0 1.5rem 1.25rem; font-size: .9rem; line-height: 1.8; color: var(--text-sec);
  font-weight: 300;
}

/* ── CTA GLOBAL "HACER PEDIDO": eliminado a proposito ──────────────
   El pedido ahora termina siempre en Checkout (unico CTA final de
   compra). Ver seccion COMBO/CHECKOUT y regla "1 sola capa fija
   inferior" mas abajo. */
@media (max-width: 767px) {
  /* WhatsApp tampoco persigue al usuario en movil: sigue disponible en
     el menu, el footer y el checkout, sin perder la funcion. */
  .wa-fab { display: none; }
}
/* Desktop: el FAB se conserva (acceso discreto), pero cede paso si hay
   un dock de carrito/combo activo (mismo criterio :has() ya usado para
   back-to-top). */
body:has(#stickyCart.visible) .wa-fab,
body:has(#comboSummary.visible) .wa-fab { display: none; }


/* -- Arma tu Combo: constructor de dos paneles --------------------------
   Izquierda: catalogo elegible (tamano global + busqueda + lista con
   checkbox). Derecha: resumen del combo, sticky en desktop (sidebar
   normal, top offset), fijo al fondo del viewport en movil (mismo patron
   ya probado en #stickyCart -- position:fixed dentro de .page funciona
   una vez la animacion pageIn deja de aplicar transform/filter, ver fix
   de la ronda anterior; se oculta solo al navegar porque .page:not(.active)
   ya es display:none, sin JS extra). */
.combo-builder {
  max-width: var(--max-w); margin: 0 auto; padding: 2.4rem 1.5rem 4rem;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.6rem; align-items: start;
}
.combo-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.3rem; }
.combo-panel--summary { position: sticky; top: 6.5rem; }

/* Selector de tamano (global para todo el combo) */
.combo-size-select { display: flex; gap: .5rem; margin-bottom: 1rem; }
.combo-size-btn {
  flex: 1; padding: .6rem .8rem; min-height: 44px;
  border: 1.5px solid var(--border); border-radius: var(--r-pill);
  background: transparent; color: var(--text-secondary);
  font-family: var(--font-body); font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: all var(--t-base);
}
.combo-size-btn:hover { border-color: var(--gold-light); }
/* .active se declara mas abajo (version final tipo "segmented control",
   junto a .combo-item) -- esta version anterior nunca ganaba la cascada
   (misma especificidad, gana el orden posterior) pero quedaba como
   codigo muerto confuso. Retirada tras confirmar 0 diferencia visual
   (verificado en runtime antes de borrar). */

/* Busqueda */
.combo-search-wrap { position: relative; margin-bottom: .6rem; }
.combo-search-icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .85rem; pointer-events: none; }
.combo-search-input {
  width: 100%; padding: .65rem .8rem .65rem 2.2rem; min-height: 44px;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-warm, var(--surface)); color: var(--text-primary);
  font-family: var(--font-body); font-size: .85rem;
}
.combo-search-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,155,95,.14); outline: none; }
.combo-results { font-size: .74rem; color: var(--text-muted); margin-bottom: .6rem; }

/* Lista de perfumes: filas compactas con checkbox nativo */
.combo-list { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; }
.combo-item {
  display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; min-height: 44px;
  border: 1.5px solid var(--border); border-radius: var(--r-md); cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base);
}
.combo-item:hover { border-color: var(--gold-light); }
/* .selected (version tenue final: borde semitransparente + fondo
   apenas distinto) se declara mas abajo -- esta version anterior con
   borde solido nunca ganaba la cascada, codigo muerto confuso.
   Retirada tras confirmar 0 diferencia visual. */
.combo-item.disabled { opacity: .45; cursor: not-allowed; }
.combo-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold-deep); flex-shrink: 0; cursor: inherit; }
.combo-item__check { display: none; } /* el checkbox nativo ya es visible; reservado por si se quiere reemplazar por un icono a medida */
.combo-item__img {
  width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; padding: 3px;
  border-radius: var(--r-sm); background: #fff; border: 1px solid var(--border-light);
}
.combo-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.combo-item__brand { font-size: .68rem; color: var(--text-muted); }
.combo-item__name { font-size: .85rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-item__price { font-size: .82rem; font-weight: 700; color: var(--gold-deep); flex-shrink: 0; }
[data-theme="dark"] .combo-item__price { color: var(--gold-light); }

/* Panel derecho: resumen */
.combo-summary-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; margin-bottom: .3rem; }
.combo-summary-count { font-size: .8rem; color: var(--text-muted); margin-bottom: .8rem; }
.combo-summary-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; max-height: 140px; overflow-y: auto; }
.combo-chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem;
  background: var(--gold-pale); border-radius: var(--r-pill); font-size: .72rem; color: var(--text-primary);
}
.combo-chip-x { background: none; border: none; color: var(--text-muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; }
.combo-chip-x:hover { color: var(--danger, #e74c3c); }
.combo-summary-hint { font-size: .78rem; color: var(--text-muted); margin-bottom: 1rem; }
.combo-summary-total { display: flex; flex-direction: column; gap: .1rem; margin-bottom: 1rem; }
.combo-summary-total__label { font-size: .74rem; color: var(--gold-deep); font-weight: 600; }
[data-theme="dark"] .combo-summary-total__label { color: var(--gold-light); }
.combo-summary-total__amount { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--text-primary); }
.combo-confirm-btn { width: 100%; }
.combo-confirm-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Responsive: un panel en movil, resumen flotante al fondo del viewport
   -- mismo patron ya probado en .sticky-cart: oculto (fuera de pantalla,
   sin pointer-events) hasta que hay algo que resumir, para no tapar el
   footer ni nada mas cuando el combo esta vacio (bug real reportado:
   antes quedaba position:fixed SIEMPRE visible, incluso sin selección,
   ocultando el pie de pagina permanentemente). */
/* El trigger del dock solo existe para movil (ver media query abajo);
   en desktop el sidebar ya esta siempre expandido, sin dock. */
.combo-dock-trigger { display: none; }

@media (max-width: 767px) {
  /* Bug real: "1fr" solo (== minmax(auto,1fr)) no limita el minimo del
     track al ancho del contenedor -- si el contenido interno (texto sin
     wrap, un input, una fila larga) pide mas min-content del que hay
     espacio, el grid crece para darselo y desborda horizontalmente todo
     el documento (arrastra tambien los overlays position:fixed inset:0,
     que terminan midiendo el viewport ya agrandado). minmax(0,1fr) fuerza
     el minimo a 0 y el contenido interno se ajusta/trunca en vez de
     empujar el grid. */
  .combo-builder { grid-template-columns: minmax(0, 1fr); padding: 1.6rem 1rem 1rem; gap: 1rem; }
  .combo-list { max-height: none; }
  /* Dock compacto (~64px) por defecto; "bottom sheet" solo al tocarlo
     (.expanded) -- antes el panel completo (chips+total+boton) quedaba
     siempre desplegado en movil, ocupando hasta 55vh incluso con la
     seleccion ya hecha. Ahora el usuario decide cuando ver el detalle. */
  .combo-panel--summary {
    position: fixed; left: .75rem; right: .75rem; bottom: .75rem; top: auto; z-index: 900;
    padding: 0; border-radius: var(--r-lg); box-shadow: 0 18px 50px rgba(0,0,0,.35);
    max-height: 64px; overflow: hidden;
    background: var(--surface-elevated, var(--surface));
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transform: translateY(calc(100% + 1.5rem)); opacity: 0; pointer-events: none;
    transition: transform .45s cubic-bezier(.22,.7,.3,1), opacity .3s ease, max-height .3s ease;
  }
  .combo-panel--summary.visible { transform: translateY(0); opacity: 1; pointer-events: all; }
  .combo-panel--summary.expanded { max-height: 65vh; overflow-y: auto; }
  .combo-dock-trigger {
    display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 64px;
    padding: 0 1.1rem; background: none; border: none; cursor: pointer; text-align: left;
    font-family: var(--font-body); color: var(--text-primary);
  }
  .combo-dock-trigger__text { font-size: .85rem; font-weight: 600; }
  .combo-dock-trigger__amount {
    margin-left: auto; font-family: var(--font-display); font-size: 1.05rem;
    font-weight: 600; color: var(--gold-deep);
  }
  [data-theme="dark"] .combo-dock-trigger__amount { color: var(--gold-light); }
  .combo-dock-trigger__icon { font-size: .75rem; color: var(--text-muted); transition: transform .3s ease; }
  .combo-panel--summary.expanded .combo-dock-trigger__icon { transform: rotate(180deg); }
  .combo-sheet-body { padding: 0 1.1rem 1.1rem; }
  .combo-summary-chips { max-height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .combo-panel--summary, .combo-dock-trigger__icon { transition: none; }
}

/* ── Quiet commerce pass: one compact promotion block ─────────── */
.promo-strip { display: block; margin: 1.25rem auto 2.5rem; max-width: var(--max-w); padding: 0 1.5rem; }
.discount-summary { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .9fr) auto; align-items: center; gap: 1rem 1.5rem; padding: 1.15rem 1.35rem; border: 1px solid var(--border-light); background: var(--surface-warm); }
.discount-summary__heading { display: flex; flex-direction: column; gap: .18rem; }
.discount-summary__heading strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--text-primary); }
.discount-summary__heading span:last-child { font-size: .72rem; color: var(--text-muted); }
.discount-summary__eyebrow { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.discount-summary__tiers { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--border-light); }
.discount-summary__tiers div { display: flex; flex-direction: column; gap: .1rem; padding: 0 1rem; border-right: 1px solid var(--border-light); }
.discount-summary__tiers strong { font-size: .75rem; font-weight: 500; color: var(--text-muted); }
.discount-summary__tiers span { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold-deep); }
.discount-summary__extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .72rem; color: var(--text-muted); }
.discount-summary__extra strong { color: var(--text-secondary); font-weight: 600; }
.discount-summary__sep { opacity: .4; }
.discount-summary__threshold { grid-column: 1 / -1; font-size: .75rem; color: var(--gold-deep); font-weight: 600; padding-top: .3rem; border-top: 1px solid var(--border-light); }

/* El combo usa un control segmentado y filas casi editoriales. */
.combo-size-select { position: relative; padding-top: .35rem; gap: 0; }
.combo-size-select::before { content: "Tamaño"; position: absolute; left: 0; top: -.55rem; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.combo-size-btn { border-radius: 0; }
.combo-size-btn:first-of-type { border-radius: var(--r-md) 0 0 var(--r-md); }
.combo-size-btn:last-of-type { border-radius: 0 var(--r-md) var(--r-md) 0; }
.combo-size-btn + .combo-size-btn { margin-left: -1px; }
.combo-item.selected { border-color: rgba(201,155,95,.48); background: color-mix(in srgb, var(--gold-pale) 52%, var(--surface)); }
/* .combo-size-btn.active final (gradiente + texto oscuro, contraste
   verificado en runtime en ambos temas): */
.combo-size-btn.active {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-color: var(--gold-light);
  color: #1A120B;
  box-shadow: 0 4px 14px rgba(201,155,95,.24);
}
.combo-size-btn:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}
/* Mobile: smaller font for 5 size buttons */
@media (max-width: 560px) {
  .combo-size-btn { font-size: .75rem; padding: .5rem .4rem; min-height: 38px; }
}
[data-theme="dark"] .combo-item { border-color: rgba(245,239,230,.08); }
/* Bug real: esta regla es mas especifica que ".combo-item.selected" de
   mas arriba ([data-theme="dark"] le gana por especificidad, no por
   orden), asi que en dark el borde volvia a var(--gold) solido (100%
   opacidad) aunque la version base ya se habia suavizado a un borde
   semitransparente -- justo el "demasiado contorno" reportado en dark.
   Mismo criterio de sutileza que el resto del combo: check + fondo
   apenas distinto + acento tenue, no un borde grueso. */
[data-theme="dark"] .combo-item.selected {
  border-color: rgba(212,169,106,.55);
  background: rgba(212,169,106,.12);
}

@media (max-width: 767px) {
  .promo-strip { padding: 0 1rem; margin-bottom: 1.8rem; }
  .discount-summary { grid-template-columns: 1fr; gap: .9rem; padding: 1rem; }
  .discount-summary__tiers { border-left: 0; border-top: 1px solid var(--border-light); padding-top: .85rem; }
  .discount-summary__tiers div { padding: 0 .75rem; }
  .discount-summary__extra { font-size: .68rem; }
  .discount-summary__threshold { font-size: .72rem; }
}

/* Drawer móvil: se reubica en <body> desde script.js. Así ninguna propiedad
   del header (en especial backdrop-filter) puede convertirlo en un panel
   corto, recortado o anclado a la altura del encabezado. */
@media (max-width: 900px) {
  .header { overflow: visible; }
  .header .theme-toggle { display: none; }
  .nav-backdrop {
    z-index: var(--z-drawer-backdrop);
    /* Velo discreto: conserva contexto detrás del drawer y evita la
       sensación de glassmorphism borroso. */
    background: rgba(10, 7, 4, .44);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: min(86vw, 360px);
    height: 100dvh;
    min-height: 100vh;
    max-height: none;
    z-index: var(--z-drawer);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #221912;
    color: #f8f1e7;
    border-left: 1px solid rgba(229, 200, 150, .16);
    box-shadow: -18px 0 52px rgba(0, 0, 0, .32);
  }
  .nav:not(.mounted) { display: none; }
  /* Estas utilidades se declaran ocultas en desktop más abajo en la hoja.
     Las reactivamos aquí, al final, para que el drawer conserve cabecera,
     canales de contacto, selector de tema y pie en móvil. */
  .nav .nav-drawer-head { display: flex; }
  .nav .nav-divider { display: block; }
  .nav .nav-utilities { display: flex; }
  .nav .nav-theme { display: flex; }
  .nav .nav-footer-note { display: block; }
  .nav .nav-drawer-head,
  .nav .nav-divider { border-color: rgba(248, 241, 231, .13); }
  .nav .nav-drawer-title,
  .nav a { color: #f8f1e7; }
  .nav a:hover,
  .nav a.active { color: var(--gold-light); }
  .nav .nav-close { color: rgba(248, 241, 231, .76); min-width: 44px; min-height: 44px; }
  .nav .nav-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  .nav .nav-util-link,
  .nav .nav-theme-label,
  .nav .nav-footer-note { color: rgba(248, 241, 231, .66); }
  .nav .nav-util-link i { color: var(--gold-light); }
  .nav .nav-theme-switch { background: rgba(255, 255, 255, .08); }
  .nav .nav-theme-opt { color: rgba(248, 241, 231, .72); }
  .nav .nav-theme-opt[aria-checked="true"] { color: #1a120b; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-backdrop { transition: none; }
  .nav { transition: none; }
}