/* ============================================================================
   EL IMPERIO DEL DESEO — PIEL «INSIGNIA» SOBRE LA ESTRUCTURA DEL BAÚL (30-oct-2026)

   La tienda es la del Baúl (estructura, catálogo, carrito, checkout, panel), pero
   la cara es la del Imperio, la de su sitio anterior: fondo de ónix, un solo metal
   (latón) para la acción y el precio, el rubí para lo que cuesta dinero, capitales
   romanas espaciadas (Marcellus) y la foto de la recámara negra y dorada.

   Se carga la ÚLTIMA en todas las páginas de la tienda, después de editorial.css
   (la piel clara del Baúl), y la pinta encima con la misma especificidad. Para
   volver a la piel del Baúl basta con quitar su <link>.
   ========================================================================== */

@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/marcellus-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fuentes/inter-latin-var.woff2') format('woff2'); }

:root {
  /* Los seis de la paleta Insignia */
  --onix: #0B0A0A; --basalto: #141211; --ceniza: #201D1B; --laton: #C8A24A; --rubi: #8E1F2B; --lino: #F2EEE7;
  --laton-vivo: #E0BC66; --laton-apagado: #8A6E2F; --rubi-vivo: #A82A38;
  --texto-2: #B5ACA0; --texto-3: #857C72;
  --linea-i: rgba(242, 238, 231, .10); --linea-i-fuerte: rgba(242, 238, 231, .18); --linea-metal: rgba(200, 162, 74, .34);
  --f-insignia: 'Marcellus', Georgia, 'Times New Roman', serif;
  --f-cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fichas del Baúl (tokens, boutique, editorial) a la paleta del Imperio */
  --c-lino: var(--onix); --c-papel: var(--basalto); --c-panel: var(--basalto); --c-panel-alto: var(--ceniza);
  --c-tinta: var(--lino); --c-tinta-2: var(--texto-2); --c-tinta-3: var(--texto-3);
  --c-oro: var(--laton); --c-oro-brillo: var(--laton-vivo); --c-oro-hondo: var(--laton-apagado);
  --c-granada: var(--rubi); --c-granada-alt: var(--rubi-vivo); --c-granada-piel: rgba(142, 31, 43, .16);
  --c-vino: var(--rubi); --c-vino-suave: rgba(142, 31, 43, .16);
  --c-lino-hondo: #1A1716; --c-linea: var(--linea-i); --c-linea-fuerte: var(--linea-i-fuerte);
  --c-arena: var(--basalto); --c-rubor: var(--ceniza); --c-velo: rgba(11, 10, 10, .84);
  --e-negro: var(--lino); --e-suave: var(--texto-2); --e-gris: var(--basalto); --e-linea: var(--linea-i);
  --f-display: var(--f-insignia); --f-texto: var(--f-cuerpo);
  --r-sm: 2px; --r-md: 4px; --r-lg: 8px;
}

html { color-scheme: dark; }
html body { background: var(--onix) !important; color: var(--lino) !important; font-family: var(--f-cuerpo) !important; }
body h1, body h2, body h3:not(.product-card h3):not(.catalog-card h3) { font-family: var(--f-insignia) !important; font-weight: 400 !important; letter-spacing: .02em !important; text-transform: none !important; }
body a { color: inherit; }
body p, body li, body dd { color: var(--texto-2); }

/* ----------------------------------------------------------------- aviso y cabecera */
body .announcement, body .catalog-promise { background: var(--onix) !important; border-bottom: 1px solid var(--linea-metal) !important; }
body .announcement span, body .catalog-promise span { color: var(--laton) !important; letter-spacing: .12em !important; text-transform: uppercase; font-size: 11px !important; }
body .site-header, body .catalog-header { background: rgba(11, 10, 10, .94) !important; border-bottom: 1px solid var(--linea-i) !important; backdrop-filter: blur(10px); }
body .main-nav a { color: var(--lino) !important; letter-spacing: .04em; }
body .main-nav a:hover { color: var(--laton) !important; text-decoration: none; }
body .brand__word strong, body .brand-copy strong { color: var(--lino) !important; font-family: var(--f-insignia) !important; letter-spacing: .16em !important; text-transform: uppercase; }
body .brand__word small, body .brand-copy small { color: var(--laton) !important; letter-spacing: .22em !important; text-transform: uppercase; }
body .cart-button, body .catalog-search-toggle, body .catalog-cart, body .icon-button {
  background: transparent !important; color: var(--lino) !important; border: 1px solid var(--linea-metal) !important; border-radius: 2px !important;
}
body .cart-button b, body .catalog-cart b, body .catalog-cart .cart-count, body #cart-count { background: var(--rubi) !important; color: var(--lino) !important; }
body .catalog-home, body .catalog-home * { color: var(--lino) !important; }

/* ----------------------------------------------------------------- botones */
body .button, body .add-button, body .filter-chip, body .text-button { border-radius: 2px !important; }
body .button--primary, body .hero .button--primary, body .add-button-catalog {
  background: var(--rubi) !important; color: var(--lino) !important; border: 1px solid var(--rubi) !important; letter-spacing: .12em !important;
}
body .button--primary:hover, body .hero .button--primary:hover, body .add-button-catalog:hover { background: var(--rubi-vivo) !important; border-color: var(--rubi-vivo) !important; color: var(--lino) !important; }
body .button--ghost, body .button--secondary, body .hero .button--ghost, body .quick-button, body .button--light, body .button--outline-light {
  background: transparent !important; color: var(--laton) !important; border: 1px solid var(--linea-metal) !important;
}
body .button--ghost:hover, body .button--secondary:hover, body .hero .button--ghost:hover, body .quick-button:hover { border-color: var(--laton) !important; color: var(--laton-vivo) !important; }
body .add-button { background: var(--laton) !important; color: var(--onix) !important; border-radius: 2px !important; }
body .add-button:hover { background: var(--laton-vivo) !important; }
body button[disabled], body .button[disabled] { opacity: .45; }

/* ----------------------------------------------------------------- hero: la recámara del Imperio */
body .hero { background: var(--onix) !important; position: relative; min-height: min(78vh, 640px); }
body .hero__media {
  display: block !important; position: absolute; inset: 0; z-index: 0;
  background-image: url('/img/hero.webp') !important; background-size: cover !important; background-position: center top !important; filter: none !important;
}
body .hero__veil {
  display: block !important; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(11, 10, 10, .30) 0%, rgba(11, 10, 10, .55) 55%, var(--onix) 100%),
    linear-gradient(to right, rgba(11, 10, 10, .92) 0%, rgba(11, 10, 10, .72) 42%, rgba(11, 10, 10, .12) 78%) !important;
}
body .hero__content { position: relative; z-index: 2; }
body .hero h1 {
  color: var(--lino) !important; font-family: var(--f-insignia) !important; font-weight: 400 !important; text-transform: none !important;
  font-size: clamp(36px, 4.6vw, 64px) !important; line-height: 1.08 !important; letter-spacing: .02em !important;
}
body .hero h1 strong, body .hero h1 em {
  font-weight: 400 !important; font-style: italic; display: block;
  background: linear-gradient(100deg, var(--laton-apagado), var(--laton-vivo) 45%, var(--laton) 70%, var(--laton-apagado));
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
body .hero__lead { color: var(--texto-2) !important; }
body .hero__tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 4px 12px; border: 1px solid var(--linea-metal);
  border-radius: 999px; background: rgba(200, 162, 74, .12); color: var(--laton); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
body .hero__item { background: var(--basalto) !important; border: 1px solid var(--linea-metal) !important; border-radius: 2px !important; }
body .hero__item span { background: rgba(11, 10, 10, .86) !important; color: var(--laton) !important; font-family: var(--f-insignia); letter-spacing: .12em !important; }

/* ----------------------------------------------------------------- la insignia: filete con rombo bajo los títulos */
body .section-heading h2::after, body .faq__intro h2::after, body .catalog-products__heading h2::after {
  content: ""; display: block; width: 84px; height: 9px; margin-top: 12px;
  background:
    linear-gradient(var(--laton), var(--laton)) left center / 34px 1px no-repeat,
    linear-gradient(var(--laton), var(--laton)) right center / 34px 1px no-repeat,
    linear-gradient(45deg, transparent 40%, var(--laton) 41%, var(--laton) 59%, transparent 60%) center / 9px 9px no-repeat;
}

/* ----------------------------------------------------------------- franjas y bloques */
body .benefit-strip { background: var(--basalto) !important; color: var(--lino) !important; border-block: 1px solid var(--linea-i) !important; }
body .benefit-strip strong { color: var(--laton) !important; letter-spacing: .12em !important; font-family: var(--f-cuerpo); }
body .benefit-strip p { color: var(--texto-2) !important; }
body .section-heading h2, body .faq__intro h2, body .experience h2, body .assistant-cta h2, body .catalog-products__heading h2 { color: var(--lino) !important; font-weight: 400 !important; }
body .experience { background: var(--basalto) !important; }
body .experience__image { background-image: url('/img/hero.webp') !important; background-size: cover !important; background-position: 30% center !important; }
body .steps li > span { background: transparent !important; color: var(--laton) !important; border: 1px solid var(--linea-metal) !important; font-family: var(--f-insignia); }
body .steps strong { color: var(--lino) !important; }
body .assistant-cta__card { background: var(--ceniza) !important; border: 1px solid var(--linea-metal) !important; }
body .assistant-cta__card h2, body .assistant-cta__card p { color: var(--lino) !important; }
body .faq-list details { background: transparent !important; border-bottom: 1px solid var(--linea-i) !important; }
body .faq-list summary { color: var(--lino) !important; }
body .faq-list summary i { color: var(--laton) !important; }
body .eyebrow { color: var(--laton) !important; letter-spacing: .16em !important; }

/* ----------------------------------------------------------------- filtros y búsqueda */
body .filter-chip, body .category-orb small {
  background: transparent !important; color: var(--texto-2) !important; border: 1px solid var(--linea-i-fuerte) !important; border-radius: 999px !important;
}
body .filter-chip.is-active, body .filter-chip[aria-pressed="true"],
body .category-orb.is-active small, body .category-orb[aria-pressed="true"] small {
  background: var(--laton) !important; color: var(--onix) !important; border-color: var(--laton) !important;
}
body .catalog-search, body .catalog-search input { background: var(--basalto) !important; color: var(--lino) !important; border: 1px solid var(--linea-i-fuerte) !important; }
body .catalog-search input::placeholder { color: var(--texto-3); }

/* ----------------------------------------------------------------- tarjetas de producto */
body .product-card, body .catalog-card { background: var(--basalto) !important; border: 1px solid var(--linea-i) !important; border-radius: 4px !important; overflow: hidden !important; }
body .product-card:hover, body .catalog-card:hover { border-color: var(--linea-metal) !important; }
body .product-card__media, body .catalog-card__image { background: var(--ceniza) !important; border-radius: 0 !important; }
body .product-card__body, body .catalog-card__body { padding: 12px 14px 14px !important; }
body .product-card h3, body .product-card__title, body .product-card__body h3, body .catalog-card h3, body .catalog-card__body h3 { color: var(--lino) !important; }
body .product-price strong, body .catalog-card__price { color: var(--laton) !important; }
body .product-price small, body .catalog-card__price-old { color: var(--texto-3) !important; }
body .product-badge, body .catalog-badge { background: var(--onix) !important; color: var(--laton) !important; border: 1px solid var(--linea-metal) !important; border-radius: 2px !important; }

/* ----------------------------------------------------------------- catálogo, ficha, categoría y páginas legales */
body .catalog-intro h1 { color: var(--lino) !important; font-family: var(--f-insignia) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: .02em !important; }
body .catalog-intro h1 em { color: var(--laton) !important; font-weight: 400 !important; }
body .catalog-intro aside, body .catalog-assistance { background: var(--basalto) !important; border: 1px solid var(--linea-metal) !important; }
body .catalog-intro aside strong { color: var(--laton) !important; }
body .catalog-footer, body .site-footer { background: var(--basalto) !important; border-top: 1px solid var(--linea-metal) !important; }
body .site-footer a, body .site-footer p, body .site-footer strong, body .site-footer span, body .site-footer small { color: var(--texto-2) !important; }
body .site-footer h3, body .site-footer h4 { color: var(--laton) !important; font-family: var(--f-cuerpo) !important; letter-spacing: .14em !important; text-transform: uppercase; font-size: 12px !important; }
body .site-footer a:hover { color: var(--laton) !important; }
body .legal-container, body .legal-page main { color: var(--texto-2); }
body .legal-box { background: var(--basalto) !important; border: 1px solid var(--linea-metal) !important; color: var(--texto-2) !important; }
body .legal-container h1, body .legal-container h2 { color: var(--lino) !important; }
body .legal-volver { color: var(--laton) !important; }

/* ----------------------------------------------------------------- carrito, modales, formularios y portón de edad */
body .cart-drawer, body .product-modal__panel, body .age-gate__panel, body .age-gate__card, body .age-gate > div {
  background: var(--basalto) !important; color: var(--lino) !important; border: 1px solid var(--linea-metal) !important;
}
body input, body select, body textarea { background: var(--ceniza); color: var(--lino); border-color: var(--linea-i-fuerte); }
body .age-gate h2 { color: var(--lino) !important; }
body .age-gate .eyebrow, body .age-gate__exit { color: var(--laton) !important; }

@media (max-width: 720px) {
  body .hero h1 { font-size: 36px !important; }
  body .hero__veil { background: linear-gradient(to bottom, rgba(11, 10, 10, .55), rgba(11, 10, 10, .80) 60%, var(--onix)) !important; }
}

/* Inter es más ancha que la letra del Baúl: el menú y el carrito no se parten en dos líneas. */
body .main-nav a, body .cart-button span { white-space: nowrap; }
@media (min-width: 981px) { body .main-nav { gap: clamp(12px, 1.6vw, 26px) !important; } body .main-nav a { font-size: 13px !important; } }
/* Checkout y «gracias»: la marca es el escudo del Imperio, no la letra del Baúl. */
body .brand-mark { background: var(--onix) !important; border: 1px solid var(--linea-metal) !important; padding: 0 !important; overflow: hidden; color: transparent !important; }
body .brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fotos de producto: la piel clara del Baúl las mezcla con «multiply» para fundirlas con el blanco.
   Sobre ónix eso las oscurece (lo vio William en el dominio el 30-oct): aquí se ven tal cual. */
body .product-card__media img, body .catalog-card__image img, body .hero__item img, body .product-gallery img, body .producto-galeria img { mix-blend-mode: normal !important; filter: none !important; }
body .product-card__media, body .catalog-card__image { background: #1A1716 !important; }
/* «Ver detalles» sobre la foto: latón con texto ónix (venía blanco sobre blanco). */
body .quick-view { background: var(--laton) !important; color: var(--onix) !important; border: 0 !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase; font-size: 12px !important; }
body .quick-view:hover { background: var(--laton-vivo) !important; }
/* Restos de la piel clara que salieron en el dominio (30-oct, segunda revisión) */
body .steps li { background: var(--basalto) !important; border: 1px solid var(--linea-i) !important; box-shadow: none !important; }
body .steps li p { color: var(--texto-2) !important; }
body .inline-link, body .text-button { color: var(--laton) !important; }
body .text-button--muted { color: var(--texto-3) !important; }
body .button--light, body .assistant-cta .button--light { background: var(--laton) !important; color: var(--onix) !important; border: 1px solid var(--laton) !important; }
body .button--light:hover, body .assistant-cta .button--light:hover { background: var(--laton-vivo) !important; }
body .brand__logo--footer { width: 150px !important; max-width: 150px !important; height: auto !important; }
body .cart-shipping-progress { background: var(--ceniza) !important; color: var(--texto-2) !important; border: 1px solid var(--linea-i) !important; }
body .thumb-btn { background: var(--ceniza) !important; border: 1px solid var(--linea-i) !important; }
body .thumb-btn.is-active { border-color: var(--laton) !important; }
/* producto.php pinta en línea la galería y las tarjetas de relacionados con fondo blanco */
body [style*="background: #FFFFFF"], body [style*="background:#FFFFFF"], body [style*="background: #fff;"], body [style*="background:#fff;"] { background: #1A1716 !important; }