/* ════════════════════════════════════════════════════════════════════
   PERFUMERÍA — "MAISON" · LUJO CLARO / EDITORIAL
   Boutique premium: crema/blanco hueso, serif elegante en títulos,
   dorado + rosa empolvado, mucho aire, líneas finas, pills con borde
   dorado, sombras casi imperceptibles. Fuerza superficies CLARAS sobre
   el storefront (dark por defecto) redefiniendo las CSS vars y
   reestilando .sf-*, topbar y footer. Único CSS activo del rubro.
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

/* ── (a) IDENTITY — mode-independent, same in both light & dark ── */
:root,
html[data-theme-family="perfumeria"] {
  /* Brand / accent palette (gold stays in both modes) */
  --brand:       #B08A4F;   /* oro viejo */
  --brand-dark:  #8C6A38;   /* bronce */
  --brand-soft:  #C6A56B;   /* champagne */
  --cta:         #C98B8B;   /* rosa empolvado */
  --cta-hover:   #B97676;
  --cta-soft:    rgba(201, 139, 139, 0.16);
  --accent:      #B08A4F;
  --whatsapp:    #25D366;

  /* Editorial typography */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', 'Inter', system-ui, sans-serif;

  /* Generous radius — signature for the family */
  --r:           12px;
  --r-sm:        6px;
  --r-full:      999px;
}

/* ── (b) LIGHT surfaces — cream / ivory / gold hairlines (VERBATIM palette) ── */
html[data-theme-family="perfumeria"]:not(.dark) {
  --bg:          #F7F2EC;   /* crema cálido de fondo */
  --bg-1:        #FFFDFA;   /* tarjeta marfil */
  --bg-2:        #F1E9DF;   /* arena suave */
  --bg-3:        #EADFD2;   /* arena más profunda */
  --line:        rgba(58, 42, 38, 0.10);

  --text:        #3A2A26;   /* café espresso, no negro puro */
  --muted:       #927F76;   /* taupe */

  --hero-grad:
    radial-gradient(ellipse 64% 58% at 74% 30%, rgba(201, 139, 139, 0.16) 0%, transparent 62%),
    radial-gradient(ellipse 56% 64% at 12% 78%, rgba(176, 138, 79, 0.13) 0%, transparent 66%),
    linear-gradient(180deg, #FBF7F1 0%, #F5EEE5 100%);
  --hero-wallpaper:
    radial-gradient(ellipse at 50% 40%, rgba(176, 138, 79, 0.05) 0%, transparent 60%);

  --shadow-card: 0 2px 4px rgba(58, 42, 38, 0.04), 0 18px 40px rgba(58, 42, 38, 0.07);
  --shadow-pop:  0 24px 50px rgba(58, 42, 38, 0.12);
}

/* ── (c) DARK surfaces — boudoir profundo: ciruela / carbón, oro conservado ── */
html[data-theme-family="perfumeria"].dark {
  --bg:          #161013;   /* near-black wine-charcoal */
  --bg-1:        #1F1519;   /* tarjeta ciruela oscura */
  --bg-2:        #251A1E;   /* arena profunda ciruela */
  --bg-3:        #2D2028;   /* tono aún más cálido */
  --line:        rgba(176, 138, 79, 0.12);

  --text:        #F0E6DC;   /* crema cálida — alto contraste sobre oscuro */
  --muted:       #9E8C84;   /* taupe desaturado, legible */

  --hero-grad:
    radial-gradient(ellipse 64% 58% at 74% 30%, rgba(201, 139, 139, 0.10) 0%, transparent 62%),
    radial-gradient(ellipse 56% 64% at 12% 78%, rgba(176, 138, 79, 0.10) 0%, transparent 66%),
    linear-gradient(180deg, #1A1217 0%, #161013 100%);
  --hero-wallpaper:
    radial-gradient(ellipse at 50% 40%, rgba(176, 138, 79, 0.07) 0%, transparent 60%);

  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.30), 0 18px 40px rgba(0, 0, 0, 0.40);
  --shadow-pop:  0 24px 50px rgba(0, 0, 0, 0.50);
}

/* ════════════════════════════════════════════════════════════════════
   BODY
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="perfumeria"] body {
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: .012em;
  background: var(--bg);
  color: var(--text);
}

/* Títulos en serif fino — la firma del rubro */
html[data-theme-family="perfumeria"] h1,
html[data-theme-family="perfumeria"] h2,
html[data-theme-family="perfumeria"] h3,
html[data-theme-family="perfumeria"] .sf-title,
html[data-theme-family="perfumeria"] .sf-section-head h2,
html[data-theme-family="perfumeria"] .brand-name {
  font-family: var(--font-display);
}

/* ════════════════════════════════════════════════════════════════════
   TOPBAR — barra clara frosted, hairline dorado, logo en dorado→rosa
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="perfumeria"] .topbar {
  background: color-mix(in oklab, var(--bg-1) 78%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 18%, transparent);
  box-shadow: 0 8px 30px color-mix(in oklab, var(--text) 6%, transparent);
}
html[data-theme-family="perfumeria"] .topbar.scrolled {
  background: color-mix(in oklab, var(--bg-1) 94%, transparent);
  border-color: color-mix(in oklab, var(--brand) 30%, transparent);
  box-shadow: 0 10px 36px color-mix(in oklab, var(--text) 10%, transparent);
}
html[data-theme-family="perfumeria"] .brand-badge {
  background: linear-gradient(135deg, var(--brand-soft), var(--cta));
  box-shadow: 0 2px 10px color-mix(in oklab, var(--brand) 28%, transparent);
}
html[data-theme-family="perfumeria"] .brand-name {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: .01em;
}
html[data-theme-family="perfumeria"] .nav-link {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .68rem;
  color: var(--muted);
}
html[data-theme-family="perfumeria"] .nav-link:hover {
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  color: var(--text);
}
html[data-theme-family="perfumeria"] .nav-link-active {
  background: transparent;
  color: var(--brand-dark);
  border: 1px solid color-mix(in oklab, var(--brand) 45%, transparent);
  box-shadow: none;
}
html[data-theme-family="perfumeria"] .nav-link-active:hover {
  background: color-mix(in oklab, var(--brand) 10%, transparent);
}
html[data-theme-family="perfumeria"] .topbar-mode-btn {
  background: color-mix(in oklab, var(--brand) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 20%, transparent);
  color: var(--muted);
}
html[data-theme-family="perfumeria"] .topbar-mode-btn:hover {
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  color: var(--text);
}

/* ════════════════════════════════════════════════════════════════════
   HERO — aire amplio, kicker fino, título serif gigante en peso ligero
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="perfumeria"] .sf-hero { padding: 56px 0 60px; }

html[data-theme-family="perfumeria"] .sf-panel,
html[data-theme-family="perfumeria"] .sf-card,
html[data-theme-family="perfumeria"] .sf-quick-card,
html[data-theme-family="perfumeria"] .sf-benefit,
html[data-theme-family="perfumeria"] .sf-metric,
html[data-theme-family="perfumeria"] .sf-proof {
  background: var(--bg-1);
  border: 1px solid color-mix(in oklab, var(--brand) 16%, transparent);
  box-shadow: var(--shadow-card);
}

html[data-theme-family="perfumeria"] .sf-panel { border-radius: 4px; padding: 40px; }

html[data-theme-family="perfumeria"] .sf-kicker,
html[data-theme-family="perfumeria"] .sf-section-kicker {
  font-family: var(--font-body);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--brand-dark);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-size: .68rem;
}
html[data-theme-family="perfumeria"] .sf-kicker { padding: 0 0 4px; }
html[data-theme-family="perfumeria"] .sf-kicker-dot {
  width: 6px; height: 6px;
  background: var(--brand);
  box-shadow: none;
}

html[data-theme-family="perfumeria"] .sf-title {
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: .005em;
  color: var(--text);
}
html[data-theme-family="perfumeria"] .sf-title .accent {
  color: var(--brand);
  font-style: italic;
  font-weight: 500;
}

html[data-theme-family="perfumeria"] .sf-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.06rem;
  line-height: 1.85;
  color: var(--muted);
  max-width: 52ch;
}

/* ── Botones: pills finas con borde dorado, sin sombras pesadas ── */
html[data-theme-family="perfumeria"] .sf-btn-primary,
html[data-theme-family="perfumeria"] .sf-btn-secondary,
html[data-theme-family="perfumeria"] .sf-chip-link {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .72rem;
  border-radius: 999px;
  min-height: 50px;
}
html[data-theme-family="perfumeria"] .sf-btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: var(--on-brand, #fff);
  border: 1px solid transparent;
  box-shadow: 0 8px 22px color-mix(in oklab, var(--brand) 30%, transparent);
  padding: 0 30px;
}
html[data-theme-family="perfumeria"] .sf-btn-primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in oklab, var(--brand-dark) 22%, transparent);
}
html[data-theme-family="perfumeria"] .sf-btn-secondary {
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  color: var(--brand-dark);
  border: 1px solid color-mix(in oklab, var(--brand) 58%, transparent);
  padding: 0 26px;
}
html[data-theme-family="perfumeria"] .sf-btn-secondary:hover {
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  border-color: var(--brand);
  transform: translateY(-2px);
}

html[data-theme-family="perfumeria"] .sf-proof {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent);
  box-shadow: none;
  color: var(--muted);
  font-weight: 400;
}
html[data-theme-family="perfumeria"] .sf-proof i { color: var(--brand); }

/* ── Escenario del hero (imagen del rubro) ── */
html[data-theme-family="perfumeria"] .sf-stage {
  border-radius: 4px;
  border: 1px solid color-mix(in oklab, var(--brand) 18%, transparent);
  box-shadow: 0 30px 70px color-mix(in oklab, var(--text) 12%, transparent);
  background: var(--bg-2);
}
html[data-theme-family="perfumeria"] .sf-stage-overlay {
  border-radius: 2px;
  background: color-mix(in oklab, var(--bg-1) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent);
}
html[data-theme-family="perfumeria"] .sf-stage-overlay strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--text);
}
html[data-theme-family="perfumeria"] .sf-metric { border-radius: 4px; }
html[data-theme-family="perfumeria"] .sf-metric strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--brand-dark);
}

/* ════════════════════════════════════════════════════════════════════
   SECCIONES — encabezados editoriales con regla fina dorada
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="perfumeria"] .sf-section { padding: 36px 0 76px; }

html[data-theme-family="perfumeria"] .sf-section-head {
  align-items: flex-end;
  border-bottom: 1px solid color-mix(in oklab, var(--brand) 22%, transparent);
  padding-bottom: 18px;
  margin-bottom: 34px;
}
html[data-theme-family="perfumeria"] .sf-section-head h2 {
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3rem);
  letter-spacing: .01em;
  color: var(--text);
}
html[data-theme-family="perfumeria"] .sf-section-head p {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--muted);
}

html[data-theme-family="perfumeria"] .sf-chip-link {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  color: var(--brand-dark);
}
html[data-theme-family="perfumeria"] .sf-chip-link:hover {
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  transform: translateY(-1px);
}

/* ── Más aire entre productos ── */
html[data-theme-family="perfumeria"] .sf-grid-products { gap: 28px; }

/* ════════════════════════════════════════════════════════════════════
   PRODUCT CARDS — minimal marfil, foto limpia, precio serif, hover sutil
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="perfumeria"] .sf-card {
  border-radius: 4px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease;
}
html[data-theme-family="perfumeria"] .sf-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--brand) 45%, transparent);
  box-shadow: var(--shadow-pop);
}
html[data-theme-family="perfumeria"] .sf-card-image { background: var(--bg-2); }
html[data-theme-family="perfumeria"] .sf-card-image img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
html[data-theme-family="perfumeria"] .sf-card:hover .sf-card-image img { transform: scale(1.05); }

html[data-theme-family="perfumeria"] .sf-badge {
  background: color-mix(in oklab, var(--bg-1) 92%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent);
  color: var(--brand-dark);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 500;
  font-size: .62rem;
}
html[data-theme-family="perfumeria"] .sf-card-tag {
  background: var(--brand);
  color: var(--bg);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 500;
  font-size: .62rem;
}
html[data-theme-family="perfumeria"] .sf-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: .01em;
}
html[data-theme-family="perfumeria"] .sf-card p {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--muted);
}
html[data-theme-family="perfumeria"] .sf-price-side small {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .6rem;
  color: var(--muted);
}
html[data-theme-family="perfumeria"] .sf-card .price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--brand-dark);
}

/* ════════════════════════════════════════════════════════════════════
   QUICK / BENEFIT CARDS — íconos en círculo dorado fino
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="perfumeria"] .sf-quick-card,
html[data-theme-family="perfumeria"] .sf-benefit { border-radius: 4px; padding: 28px; }
html[data-theme-family="perfumeria"] .sf-quick-icon,
html[data-theme-family="perfumeria"] .sf-benefit-icon {
  border-radius: 50%;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  color: var(--brand);
}
html[data-theme-family="perfumeria"] .sf-quick-card h3,
html[data-theme-family="perfumeria"] .sf-benefit h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
}
html[data-theme-family="perfumeria"] .sf-quick-card p,
html[data-theme-family="perfumeria"] .sf-benefit p {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════════
   PERFILES SECUNDARIOS — editorial (moda / regalería), lista, promo
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="perfumeria"] .sf-editorial { padding: 48px 0 58px; }
html[data-theme-family="perfumeria"] .sf-editorial-inner { gap: 50px; align-items: center; }
html[data-theme-family="perfumeria"] .sf-editorial-meta {
  display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0 6px;
  font-family: var(--font-body); font-weight: 300; font-size: .82rem;
  color: var(--muted); letter-spacing: .04em;
}
html[data-theme-family="perfumeria"] .sf-editorial-meta i { color: var(--brand); }
html[data-theme-family="perfumeria"] .sf-editorial-img {
  border-radius: 4px;
  border: 1px solid color-mix(in oklab, var(--brand) 18%, transparent);
  box-shadow: 0 30px 70px color-mix(in oklab, var(--text) 12%, transparent);
}
html[data-theme-family="perfumeria"] .sf-list-row {
  background: var(--bg-1);
  border: 1px solid color-mix(in oklab, var(--brand) 16%, transparent);
  border-radius: 4px;
}
html[data-theme-family="perfumeria"] .sf-list-row:hover { border-color: var(--brand); }
html[data-theme-family="perfumeria"] .sf-list-price {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-dark);
}
html[data-theme-family="perfumeria"] .sf-process-step {
  background: var(--bg-1);
  border: 1px solid color-mix(in oklab, var(--brand) 16%, transparent);
  border-radius: 4px;
}
html[data-theme-family="perfumeria"] .sf-process-ic {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  color: var(--brand);
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER — sobre superficie, hairlines doradas, socials en dorado tenue
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="perfumeria"] footer {
  background: var(--bg-2) !important;
  border-top: 1px solid color-mix(in oklab, var(--brand) 22%, transparent) !important;
}
html[data-theme-family="perfumeria"] footer h4 {
  font-family: var(--font-body);
  letter-spacing: .16em !important;
  color: var(--brand-dark) !important;
}

/* ════════════════════════════════════════════════════════════════════
   CATALOG PAGE — personalidad "Maison": radio generoso, bordes hairline
   dorado, serif en títulos de producto, precio en oro, hover lift suave
   ════════════════════════════════════════════════════════════════════ */

/* Wrapper y encabezado */
html[data-theme-family="perfumeria"] .cat-wrap {
  background: var(--bg);
}
html[data-theme-family="perfumeria"] .cat-head {
  border-bottom: 1px solid color-mix(in oklab, var(--brand) 20%, transparent);
  padding-bottom: 20px;
  margin-bottom: 28px;
}
html[data-theme-family="perfumeria"] .cat-eyebrow {
  font-family: var(--font-body);
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brand-dark);
  font-weight: 500;
}
html[data-theme-family="perfumeria"] .cat-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: .01em;
  color: var(--text);
}
html[data-theme-family="perfumeria"] .cat-sub {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--muted);
  font-size: .95rem;
}

/* Toolbar / barra de búsqueda y filtros */
html[data-theme-family="perfumeria"] .cat-toolbar {
  background: var(--bg-1);
  border: 1px solid color-mix(in oklab, var(--brand) 14%, transparent);
  border-radius: var(--r);
  padding: 14px 18px;
  gap: 14px;
}
html[data-theme-family="perfumeria"] .cat-search input {
  background: var(--bg-2);
  border: 1px solid color-mix(in oklab, var(--brand) 18%, transparent);
  border-radius: var(--r-full);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  padding: 9px 18px;
  font-size: .9rem;
  outline: none;
  transition: border-color .25s;
}
html[data-theme-family="perfumeria"] .cat-search input::placeholder { color: var(--muted); }
html[data-theme-family="perfumeria"] .cat-search input:focus {
  border-color: color-mix(in oklab, var(--brand) 50%, transparent);
}

/* Botones de vista (grid/list) */
html[data-theme-family="perfumeria"] .cat-view button {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--brand) 20%, transparent);
  border-radius: var(--r-sm);
  color: var(--muted);
  padding: 7px 12px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
html[data-theme-family="perfumeria"] .cat-view button.active,
html[data-theme-family="perfumeria"] .cat-view button:hover {
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  color: var(--brand-dark);
  border-color: color-mix(in oklab, var(--brand) 40%, transparent);
}

/* Chips / filtros de categoría */
html[data-theme-family="perfumeria"] .cat-chip {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent);
  border-radius: var(--r-full);
  color: var(--muted);
  background: transparent;
  padding: 6px 16px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
html[data-theme-family="perfumeria"] .cat-chip.active,
html[data-theme-family="perfumeria"] .cat-chip:hover {
  background: var(--brand);
  color: var(--bg);
  border-color: var(--brand);
}

/* Contador de resultados */
html[data-theme-family="perfumeria"] .cat-count {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .85rem;
  color: var(--muted);
}

/* Grid de productos */
html[data-theme-family="perfumeria"] .cat-grid {
  gap: 24px;
}

/* Tarjeta de producto en catálogo */
html[data-theme-family="perfumeria"] .pcard {
  background: var(--bg-1);
  border: 1px solid color-mix(in oklab, var(--brand) 14%, transparent);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .35s ease;
  overflow: hidden;
}
html[data-theme-family="perfumeria"] .pcard:hover {
  transform: translateY(-7px);
  border-color: color-mix(in oklab, var(--brand) 48%, transparent);
  box-shadow: var(--shadow-pop);
}

/* Imagen */
html[data-theme-family="perfumeria"] .pcard-img {
  background: var(--bg-2);
  overflow: hidden;
}
html[data-theme-family="perfumeria"] .pcard-img img {
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
html[data-theme-family="perfumeria"] .pcard:hover .pcard-img img {
  transform: scale(1.06);
}

/* Badge de categoría — override del hardcoded rgba(8,11,20,.82) */
html[data-theme-family="perfumeria"] .pcard-cat {
  background: color-mix(in oklab, var(--bg-1) 88%, transparent);
  color: var(--brand-dark);
  font-family: var(--font-body);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent);
  padding: 4px 12px;
  backdrop-filter: blur(6px);
}

/* Stock badges — override de colores fijos en catalog.html */
html[data-theme-family="perfumeria"] .pcard .s-ok {
  background: color-mix(in oklab, #3dba6e 15%, var(--bg-1));
  color: #2a8a4e;
  border: 1px solid color-mix(in oklab, #3dba6e 30%, transparent);
}
html[data-theme-family="perfumeria"] .pcard .s-warn {
  background: color-mix(in oklab, var(--brand) 16%, var(--bg-1));
  color: var(--brand-dark);
  border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent);
}
html[data-theme-family="perfumeria"] .pcard .s-bad {
  background: color-mix(in oklab, var(--cta) 16%, var(--bg-1));
  color: var(--cta-hover);
  border: 1px solid color-mix(in oklab, var(--cta) 28%, transparent);
}

/* Título del producto — serif */
html[data-theme-family="perfumeria"] .pcard h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: .01em;
  color: var(--text);
  line-height: 1.25;
}

/* Descripción corta */
html[data-theme-family="perfumeria"] .pcard-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Precio — serif, oro */
html[data-theme-family="perfumeria"] .pcard-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--brand-dark);
}

/* Botón "ver más" */
html[data-theme-family="perfumeria"] .pcard-more {
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  color: var(--brand-dark);
  background: transparent;
  padding: 8px 20px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .25s;
}
html[data-theme-family="perfumeria"] .pcard-more:hover {
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  border-color: var(--brand);
  transform: translateY(-2px);
}

/* Estado vacío */
html[data-theme-family="perfumeria"] .cat-empty {
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 300;
  text-align: center;
  padding: 60px 20px;
}

/* Modal de producto */
html[data-theme-family="perfumeria"] .product-modal-card {
  background: var(--bg-1);
  border: 1px solid color-mix(in oklab, var(--brand) 18%, transparent);
  border-radius: var(--r);
  box-shadow: var(--shadow-pop);
}
html[data-theme-family="perfumeria"] .product-modal-media {
  background: var(--bg-2);
  border-radius: var(--r-sm);
}
html[data-theme-family="perfumeria"] .product-modal-cat {
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-dark);
  font-weight: 500;
}
html[data-theme-family="perfumeria"] .product-modal-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: .01em;
  color: var(--text);
}
html[data-theme-family="perfumeria"] .product-modal-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  color: var(--brand-dark);
}
html[data-theme-family="perfumeria"] .product-modal-cart {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .72rem;
  border-radius: var(--r-full);
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
  padding: 12px 28px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .25s;
}
html[data-theme-family="perfumeria"] .product-modal-cart:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-2px);
}
html[data-theme-family="perfumeria"] .product-modal-close {
  background: color-mix(in oklab, var(--bg-2) 80%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 16%, transparent);
  color: var(--muted);
  border-radius: 50%;
  width: 36px; height: 36px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
html[data-theme-family="perfumeria"] .product-modal-close:hover {
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  color: var(--text);
}

/* ════════════════════════════════════════════════════════════════════
   MENU PAGE — misma identidad Maison aplicada al menú
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="perfumeria"] .menu-wrap {
  background: var(--bg);
}
html[data-theme-family="perfumeria"] .menu-copy {
  background: var(--bg-1);
  border-radius: var(--r);
  border: 1px solid color-mix(in oklab, var(--brand) 14%, transparent);
  box-shadow: var(--shadow-card);
  padding: 32px 36px;
}
html[data-theme-family="perfumeria"] .menu-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  letter-spacing: .01em;
  color: var(--text);
}
html[data-theme-family="perfumeria"] .menu-kicker {
  font-family: var(--font-body);
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brand-dark);
  font-weight: 500;
}
html[data-theme-family="perfumeria"] .menu-side {
  background: var(--bg-2);
  border-radius: var(--r);
  border: 1px solid color-mix(in oklab, var(--brand) 12%, transparent);
  padding: 20px;
}

/* Pill activo de sección */
html[data-theme-family="perfumeria"] .menu-pill {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--bg);
  padding: 6px 18px;
  border: none;
}

/* Nav links de sección */
html[data-theme-family="perfumeria"] .menu-nav a {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 400;
  color: var(--muted);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  text-decoration: none;
  display: block;
  transition: background .2s, color .2s;
}
html[data-theme-family="perfumeria"] .menu-nav a:hover {
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  color: var(--brand-dark);
}

/* Secciones del menú */
html[data-theme-family="perfumeria"] .menu-section {
  border-bottom: 1px solid color-mix(in oklab, var(--brand) 16%, transparent);
  padding-bottom: 28px;
  margin-bottom: 28px;
}
html[data-theme-family="perfumeria"] .menu-section h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: .01em;
  color: var(--text);
}

/* Item de menú */
html[data-theme-family="perfumeria"] .menu-item {
  background: var(--bg-1);
  border: 1px solid color-mix(in oklab, var(--brand) 12%, transparent);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .3s ease;
  overflow: hidden;
}
html[data-theme-family="perfumeria"] .menu-item:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--brand) 42%, transparent);
  box-shadow: var(--shadow-pop);
}
html[data-theme-family="perfumeria"] .menu-img {
  background: var(--bg-2);
}
html[data-theme-family="perfumeria"] .menu-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: .01em;
  color: var(--text);
}
html[data-theme-family="perfumeria"] .menu-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--brand-dark);
}
html[data-theme-family="perfumeria"] .menu-empty {
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 300;
  text-align: center;
  padding: 60px 20px;
}

/* ════════════════════════════════════════════════════════════════════
   SCROLLBAR + SELECCIÓN
   ════════════════════════════════════════════════════════════════════ */
html[data-theme-family="perfumeria"] ::-webkit-scrollbar { width: 9px; height: 9px; }
html[data-theme-family="perfumeria"] ::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--brand) 45%, transparent);
  border-radius: 999px;
}
html[data-theme-family="perfumeria"] ::-webkit-scrollbar-track { background: var(--bg-2); }

html[data-theme-family="perfumeria"] ::selection {
  background: color-mix(in oklab, var(--cta) 30%, transparent);
  color: var(--text);
}

/* ════════════════════════════════════════════════════════════════════
   MOTION / RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html[data-theme-family="perfumeria"] .sf-card,
  html[data-theme-family="perfumeria"] .sf-card-image img,
  html[data-theme-family="perfumeria"] .pcard,
  html[data-theme-family="perfumeria"] .pcard-img img,
  html[data-theme-family="perfumeria"] .menu-item {
    transition: none;
  }
  html[data-theme-family="perfumeria"] .sf-card:hover,
  html[data-theme-family="perfumeria"] .pcard:hover,
  html[data-theme-family="perfumeria"] .menu-item:hover {
    transform: none;
  }
}

@media (max-width: 720px) {
  html[data-theme-family="perfumeria"] .sf-panel { padding: 26px; }
  html[data-theme-family="perfumeria"] .sf-title { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  html[data-theme-family="perfumeria"] .menu-copy { padding: 22px 20px; }
}

/* ── Ficha de producto (.pd-*) — elegante, aire, retrato suave (perfil perfumería) ── */
html[data-theme-family="perfumeria"] .pd-grid { gap: 3rem; }
html[data-theme-family="perfumeria"] .pd-media { aspect-ratio: 3 / 4; border-radius: 22px; border: 1px solid var(--line); }
html[data-theme-family="perfumeria"] .pd-info { padding-top: .5rem; }
html[data-theme-family="perfumeria"] .pd-title { font-family: var(--font-display); font-weight: 700; }
html[data-theme-family="perfumeria"] .pd-spec { border-radius: 16px; }
html[data-theme-family="perfumeria"] .pd-price { color: var(--brand); }
html[data-theme-family="perfumeria"] .sf-variant-btn { border-radius: 9999px; }
html[data-theme-family="perfumeria"] .sf-variant-btn.active { background: var(--brand); color: #fff; }

/* === Contraste/legibilidad por perfil (WCAG, auto) === */
html[data-theme-family="perfumeria"]:not(.dark) { --on-brand:#191919; --price:#916464; --muted:#7F6F67; --brand-soft:#A38858; }
html[data-theme-family="perfumeria"].dark { --on-brand:#191919; --price:#C98B8B; }
html[data-theme-family="perfumeria"] .sf-variant-btn.active { color: var(--on-brand, #fff); }
html[data-theme-family="perfumeria"] .pd-price { color: var(--price, var(--cta, var(--brand))); }