/* =========================================================
   JOHN FRAGANCE — Hoja de estilos de la tienda
   Lenguaje: maison de lujo (referencia Louis Vuitton / Chanel) con la
   identidad de John Fragance: negro + dorado del logo (ver 21).
   - Fondo blanco y piedra para que las fotos de producto se vean limpias.
   - Header y footer negros con el logo en su dorado original.
   - Un solo dorado de acento: líneas, estados activos, marca del producto.
   - Una sola familia (Jost, geométrica de linaje Futura).
   F6 "Joya con aire" (dirección C2, sección 28): negro con grano y brillo
   dorado donde se vende ambiente (hero, Selección, promos, casas, marca) y
   claro donde se compara y se lee (grillas, ficha, carrito). Tarjetas
   redondeadas, botones en píldora, degradado real del logo, profundidad al
   pasar el mouse. Pensado primero a 375 px. Mismos textos, logo, colores y
   tipografías: cambia cómo se siente, no la marca.

   Índice
   01. Tokens            08. Grilla de producto   15. Carrito
   02. Base              09. Filtros catálogo     16. Checkout
   03. Tipografía        10. Ficha de producto    17. Páginas de texto
   04. Botones/enlaces   11. Categorías (home)    18. Footer
   05. Formularios       12. Editorial / split    19. Toast + WhatsApp
   06. Header + menú     13. Casas                20. Utilidades / a11y
   07. Hero              14. Contacto             21. Marca (negro + dorado)
   ========================================================= */

/* ---------- 00. Tipografía (Jost, autoalojada; licencia OFL en assets/fonts) ---------- */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); }
/* Cormorant Garamond: serif de titulares (hero y franja de marca). Licencia OFL en assets/fonts. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }

/* ---------- 01. Tokens ---------- */
:root {
  --ink: #000000;
  --paper: #ffffff;
  --stone: #f6f5f3;      /* escenario de producto */
  --mist: #eceae6;       /* hover de escenario / bandas */
  --graphite: #5e5e5e;   /* texto secundario (AA sobre blanco y piedra) */
  --hairline: #dcdad6;
  --error: #a4262c;
  /* Dorado John Fragance (del logo: #894720 / #E59A42 / #F1DB83) */
  --gold: #c8933f;       /* acento sobre negro (contraste 7.9:1) */
  --gold-ink: #8a5a1f;   /* dorado para texto y líneas sobre blanco (AA) */
  --gold-soft: rgba(200, 147, 63, 0.28); /* líneas finas sobre negro */

  --font: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;

  --fs-micro: 0.6875rem;  /* 11 */
  --fs-label: 0.75rem;    /* 12 */
  --fs-body: 0.875rem;    /* 14 */
  --fs-lead: 1rem;        /* 16 */
  --fs-h3: 1.25rem;       /* 20 */
  --fs-h2: clamp(1.5rem, 2.2vw, 1.875rem);
  --fs-h1: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-hero: clamp(1.625rem, 3.2vw, 2.75rem);

  --track-label: 0.16em;
  --track-title: 0.12em;

  --header-h: 64px;
  --gutter: clamp(20px, 4vw, 64px);
  --section: clamp(64px, 9vw, 128px);
  --max: 1440px;
  --measure: 34rem;

  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);

  /* F6 · Joya con aire: lenguaje de formas, profundidad y movimiento. */
  --gold-gradient: linear-gradient(120deg, #894720 0%, #e59a42 48%, #f1db83 100%);
  --night: #0a0908;          /* negro de las secciones de ambiente */
  --night-2: #121010;
  --night-card: linear-gradient(180deg, #161311, #0d0c0b);
  --night-text: #f4eee5;
  --night-muted: #a8a093;
  --night-line: rgba(200, 147, 63, 0.2);
  --glow: radial-gradient(60% 55% at 50% 58%, rgba(229, 154, 66, 0.22), transparent 70%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(60, 35, 10, 0.06), 0 0 0 1px rgba(60, 35, 10, 0.05);
  --shadow-lift: 0 24px 48px -22px rgba(137, 71, 32, 0.45), 0 0 0 1px rgba(229, 154, 66, 0.35);
  --shadow-night: 0 0 0 1px rgba(200, 147, 63, 0.16);
  --shadow-night-lift: 0 0 0 1px rgba(241, 219, 131, 0.5), 0 24px 60px -24px rgba(229, 154, 66, 0.45);
  --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;
}

@media (max-width: 767px) {
  :root { --header-h: 56px; }
}

/* ---------- 02. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Fondo de la raíz negro: si el navegador deja ver el borde (rebote de iPhone,
   1 px de más), se ve negro y no una línea blanca. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); background: var(--ink); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Nada se sale de lado en celular. "clip" (no "hidden") para no romper los
   encabezados fijos (sticky); Safari de iPhone ignora el overflow solo en body. */
@supports (overflow: clip) { html, body { overflow-x: clip; } }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
::selection { background: var(--ink); color: var(--paper); }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: calc(var(--measure) + 2 * var(--gutter)); }
main { display: block; min-height: 50vh; }
.page { padding-top: var(--header-h); }

/* ---------- 03. Tipografía ---------- */
.t-label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.t-title {
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  line-height: 1.2;
}
.t-muted { color: var(--graphite); }
.lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.7; color: var(--ink); }

.page-head {
  padding: calc(var(--header-h) + clamp(40px, 6vw, 88px)) var(--gutter) clamp(32px, 4vw, 56px);
  text-align: center;
}
.page-head h1 {
  font-size: var(--fs-h1);
  font-weight: 300;
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  line-height: 1.15;
}
.page-head p { max-width: var(--measure); margin: 1.1rem auto 0; color: var(--graphite); font-weight: 300; font-size: var(--fs-lead); }
.page-head .breadcrumbs { margin-bottom: 1.4rem; }

.breadcrumbs { font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--graphite); }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs span[aria-hidden] { margin: 0 0.5em; }

.section { padding: var(--section) 0; }
.section--stone { background: var(--stone); }
.section-head { text-align: center; margin-bottom: clamp(32px, 4vw, 56px); padding: 0 var(--gutter); }
.section-head h2 { font-size: var(--fs-h2); font-weight: 400; letter-spacing: var(--track-title); text-transform: uppercase; line-height: 1.2; }
.section-head p { max-width: var(--measure); margin: 0.9rem auto 0; color: var(--graphite); font-weight: 300; }

/* ---------- 04. Botones y enlaces ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0 2.25rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: #2b2b2b; border-color: #2b2b2b; }
.btn--outline { background: transparent; color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: transparent; color: var(--paper); }
.btn--outline-light { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn--outline-light:hover { background: var(--paper); color: var(--ink); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* Enlace subrayado (CTA editorial) */
.link {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size 0.35s var(--ease);
}
.link:hover { background-size: 0% 1px; background-position: right bottom; }
.text-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.text-link:hover { text-decoration-color: transparent; }

/* ---------- 05. Formularios ---------- */
.field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.field label, .field .field__label { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; }
.field .optional { color: var(--graphite); font-weight: 400; letter-spacing: 0.04em; text-transform: none; }
.field input, .field select, .field textarea, .select, .input {
  width: 100%;
  height: 48px;
  padding: 0 1rem;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { height: auto; min-height: 140px; padding: 0.85rem 1rem; resize: vertical; line-height: 1.6; }
.field select, .select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}
.field input:hover, .field select:hover, .field textarea:hover, .select:hover { border-color: #b9b6b0; }
.field input:focus, .field select:focus, .field textarea:focus, .select:focus { border-color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: #9a9893; }
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid { border-color: var(--error); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 599px) { .field-row { grid-template-columns: 1fr; } }

.check { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--fs-body); color: var(--graphite); line-height: 1.5; cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.form-error { display: none; color: var(--error); font-size: var(--fs-body); margin: 0 0 1rem; }
.form-error.is-visible { display: block; }

/* ---------- 06. Header + menú ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.site-header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
}
.header-left, .header-right { display: flex; align-items: center; gap: 1.75rem; }
.header-right { justify-content: flex-end; }
.header-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  min-height: 44px;
}
.header-link svg { width: 20px; height: 20px; flex: none; }
.header-link .cart-count { min-width: 1ch; }
.header-link .cart-count:empty, .header-link .cart-count[data-zero] { display: none; }
.brand { display: block; line-height: 0; }
.brand__img { height: 37px; width: auto; filter: brightness(0); transition: filter 0.35s var(--ease); }
@media (max-width: 767px) {
  .brand__img { height: 29px; }
  .hide-sm { display: none !important; }
  .header-left, .header-right { gap: 1rem; }
}

/* Header transparente sobre el hero */
.site-header.is-overlay { background: transparent; color: var(--paper); border-bottom-color: transparent; }
.site-header.is-overlay .brand__img { filter: brightness(0) invert(1); }

/* Menú lateral */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.nav-backdrop.is-visible { opacity: 1; visibility: visible; }
.nav-drawer {
  position: fixed; inset: 0 auto 0 0; z-index: 70;
  width: min(440px, 100vw);
  background: var(--paper);
  color: var(--ink);
  display: flex; flex-direction: column;
  padding: 0 clamp(24px, 4vw, 48px) 32px;
  transform: translateX(-100%);
  transition: transform 0.45s var(--ease);
  overflow-y: auto;
}
.nav-drawer.is-open { transform: none; }
.nav-drawer__head { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; flex: none; }
.nav-drawer__list { margin-top: clamp(16px, 4vh, 48px); }
.nav-drawer__list a {
  display: block;
  padding: 0.85rem 0;
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: var(--track-title);
  text-transform: uppercase;
}
.nav-drawer__list a:hover, .nav-drawer__list a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav-drawer__sub { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); }
.nav-drawer__sub a { display: block; padding: 0.45rem 0; font-size: var(--fs-body); color: var(--graphite); }
.nav-drawer__sub a:hover { color: var(--ink); }
.nav-drawer__foot { margin-top: auto; padding-top: 2rem; font-size: var(--fs-label); color: var(--graphite); line-height: 1.8; }

/* Búsqueda simple (lupa). Solo nombre y marca (Essential): sin sugerencias,
   por eso el botón "Buscar" y la ayuda dejan claro que hay que enviarla.
   Escritorio: franja negra bajo el header. Celular: tapa el header mientras está abierta. */
.search-panel {
  position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 49;
  background: var(--ink); color: var(--paper);
  border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft);
}
.search-panel[hidden], .search-backdrop[hidden] { display: none; }
.search-panel__form { max-width: 760px; margin: 0 auto; padding: 16px var(--gutter) 14px; }
.search-panel__row { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.35); transition: border-color 0.25s var(--ease); }
.search-panel__row:focus-within { border-bottom-color: var(--gold); }
.search-panel__icon { width: 18px; height: 18px; flex: none; color: var(--gold); }
.search-panel__input {
  flex: 1; min-width: 0;
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; color: var(--paper);
  background: transparent; border: 0; border-radius: 0;
  padding: 0.3rem 0; min-height: 44px;
  -webkit-appearance: none; appearance: none;
}
.search-panel__input::placeholder { color: rgba(255, 255, 255, 0.45); font-style: italic; }
.search-panel__input:focus { outline: none; }
.search-panel__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-panel__submit {
  flex: none; min-height: 34px; padding: 0 1.1rem;
  background: var(--gold); color: var(--ink); border: 1px solid var(--gold);
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  transition: background-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.search-panel__submit:hover { background: var(--paper); border-color: var(--paper); }
.search-panel__form:not(.has-text) .search-panel__submit { opacity: 0.55; }
.search-panel__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; color: var(--paper); margin-right: -10px; }
.search-panel__close svg { width: 18px; height: 18px; }
.search-panel__hint { margin-top: 0.5rem; font-size: var(--fs-micro); color: #b4afa6; letter-spacing: 0.02em; }
.search-panel__hint strong { color: var(--gold); font-weight: 500; }
.search-backdrop { position: fixed; inset: 0; z-index: 48; background: rgba(0, 0, 0, 0.5); }
body.search-open { overflow: hidden; }
@media (max-width: 767px) {
  .search-panel { top: 0; z-index: 56; border-top: 0; padding-top: env(safe-area-inset-top); }
  .search-panel__form { padding: 6px 16px 10px; }
  .search-panel__row { gap: 8px; }
  .search-panel__icon { width: 16px; height: 16px; }
  .search-panel__input { font-size: 1.1875rem; min-height: 42px; }
  .search-panel__submit { min-height: 32px; padding: 0 0.85rem; }
  .search-panel__close { margin-right: -12px; }
  .search-panel__hint { margin-top: 0.4rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .search-panel:not([hidden]) { animation: search-in 0.32s var(--ease) both; }
  .search-backdrop:not([hidden]) { animation: search-fade 0.32s var(--ease) both; }
  @keyframes search-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
  @keyframes search-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- 07. Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  max-height: 1100px;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: center 40%; animation: hero-settle 2.4s var(--ease) both; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.78) 100%);
  pointer-events: none;
}
.hero__content {
  position: absolute; z-index: 1;
  left: 0; right: 0; bottom: clamp(48px, 9vh, 104px);
  text-align: center;
  padding: 0 var(--gutter);
}
.hero__title {
  font-size: var(--fs-hero);
  font-weight: 300;
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  line-height: 1.08;
  max-width: 24ch;
  margin: 0 auto;
}
@media (max-width: 767px) { .hero__content { bottom: 40px; } .hero__lead { font-size: var(--fs-body); } .hero__ctas { gap: 1.75rem; } }
.hero__lead { margin: 1.25rem auto 0; max-width: 30rem; font-weight: 300; font-size: var(--fs-lead); opacity: 0.92; }
.hero__ctas { display: flex; gap: 2.5rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
@keyframes hero-settle { from { transform: scale(1.06); opacity: 0.6; } to { transform: scale(1); opacity: 1; } }

/* ---------- 08. Grilla de producto ---------- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}
@media (max-width: 1023px) { .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tile { position: relative; background: var(--paper); }
.tile__link { display: block; }
.tile__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--stone);
  overflow: hidden;
  transition: background-color 0.4s var(--ease);
}
.tile__link:hover .tile__stage { background: var(--mist); }
.tile__stage > svg, .tile__stage .tile__slide > svg {
  position: absolute; left: 50%; top: 50%;
  width: 44%; height: auto;
  transform: translate(-50%, -50%);
  transition: transform 0.6s var(--ease);
}
.tile__link:hover .tile__stage > svg { transform: translate(-50%, -52%); }
.tile__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; }
.tile__slides { position: absolute; inset: 0; display: flex; transition: transform 0.6s var(--ease); }
.tile__slide { position: relative; flex: 0 0 100%; height: 100%; }
.tile__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 6px; justify-content: center; }
.tile__dot { width: 16px; height: 1px; background: rgba(0,0,0,0.25); }
.tile__dot.is-active { background: var(--ink); }
.tile__tag {
  position: absolute; left: 14px; top: 14px;
  font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 500;
}
.tile__fav {
  position: absolute; right: 6px; top: 6px; z-index: 2;
  width: 44px; height: 44px;
  display: grid; place-items: center;
}
.tile__fav svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.2; transition: fill 0.2s ease; }
.tile__fav.is-active svg, .tile__fav[aria-pressed="true"] svg { fill: var(--ink); }
.tile__info { padding: 14px 16px 28px; }
.tile__brand { font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--graphite); }
.tile__name { font-size: var(--fs-body); font-weight: 400; line-height: 1.4; margin-top: 4px; }
.tile__price { font-size: var(--fs-body); margin-top: 2px; }
.tile__name a::after { content: ""; position: absolute; inset: 0; } /* toda la tarjeta clicable */
@media (max-width: 767px) { .tile__info { padding: 10px 10px 22px; } }

.grid-empty { text-align: center; padding: 72px var(--gutter); }
.grid-empty p { color: var(--graphite); margin-bottom: 1.5rem; }
.grid-more { text-align: center; padding: clamp(40px, 5vw, 64px) var(--gutter) 0; }
.skeleton { background: var(--stone); aspect-ratio: 4 / 5; }

/* Paginado del catálogo */
.pager { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: clamp(40px, 5vw, 64px) var(--gutter) 0; }
.pager__nums { display: flex; align-items: center; gap: 0.25rem; }
.pager__btn { min-width: 40px; height: 40px; padding: 0 0.5rem; background: none; border: 1px solid transparent; color: var(--ink); font: inherit; font-size: var(--fs-label); letter-spacing: 0.08em; cursor: pointer; }
.pager__btn:hover { border-color: var(--hairline); }
.pager__btn[aria-current="page"] { border-color: var(--ink); }
.pager__btn--step { text-transform: uppercase; letter-spacing: var(--track-label); padding: 0 0.75rem; }
.pager__gap { min-width: 24px; text-align: center; color: var(--graphite); }
@media (max-width: 600px) {
  .pager { gap: 0.5rem; flex-wrap: wrap; }
  .pager__btn { min-width: 36px; }
  .pager__btn--step { padding: 0 0.5rem; }
}

/* ---------- 09. Filtros del catálogo ---------- */
.filters {
  position: sticky; top: var(--header-h); z-index: 20;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.filters__inner {
  display: flex; align-items: center; gap: 1.5rem 2rem; flex-wrap: wrap;
  padding: 10px var(--gutter);
  max-width: var(--max); margin: 0 auto;
}
.tabs { display: flex; gap: 1.75rem; }
.tab {
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--graphite);
  min-height: 44px;
  border-bottom: 1px solid transparent;
}
.tab:hover { color: var(--ink); }
.tab.is-active, .tab[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.filters__selects { display: flex; gap: 0.75rem; margin-left: auto; flex-wrap: wrap; }
.filters .select { height: 40px; width: auto; min-width: 170px; font-size: var(--fs-label); letter-spacing: 0.04em; border-color: transparent; padding-left: 0.75rem; }
.filters .select:hover, .filters .select:focus { border-color: var(--hairline); }
.filters__count { font-size: var(--fs-label); color: var(--graphite); letter-spacing: 0.04em; }
@media (max-width: 899px) {
  .filters { position: static; }
  .filters__inner { padding-top: 6px; padding-bottom: 14px; }
  .tabs { width: 100%; justify-content: space-between; gap: 0.5rem; }
  .filters__selects { margin-left: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .filters__selects .select { width: 100%; min-width: 0; border-color: var(--hairline); }
  .filters__selects .select:last-child { grid-column: 1 / -1; }
}

/* ---------- 10. Ficha de producto ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; border-bottom: 1px solid var(--hairline); }
.pdp__gallery { background: var(--stone); position: relative; }
.pdp__hero { position: relative; aspect-ratio: 4 / 5; max-height: calc(100vh - var(--header-h)); width: 100%; margin: 0 auto; }
.pdp__hero > svg { position: absolute; left: 50%; top: 50%; height: 62%; width: auto; transform: translate(-50%, -50%); }
.pdp__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.pdp__thumbs { display: flex; gap: 8px; justify-content: center; padding: 0 0 24px; }
.pdp__thumb { width: 56px; height: 70px; background: var(--paper); border: 1px solid transparent; padding: 4px; }
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp__thumb.is-active { border-color: var(--ink); }
.pdp__panel { padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 64px); }
.pdp__panel-inner { position: sticky; top: calc(var(--header-h) + 32px); max-width: 26rem; }
.pdp__brand { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--graphite); }
.pdp__brand a:hover { color: var(--ink); }
.pdp__name { font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 400; line-height: 1.2; margin-top: 0.6rem; letter-spacing: 0.02em; }
.pdp__price { font-size: var(--fs-lead); margin-top: 1rem; }
.pdp__meta { font-size: var(--fs-body); color: var(--graphite); margin-top: 0.25rem; }
.pdp__size { margin-top: 1.75rem; }
.pdp__size-label { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: 0.6rem; }
.size-options { display: flex; gap: 8px; flex-wrap: wrap; }
.size-option { display: inline-flex; align-items: center; justify-content: center; min-width: 88px; height: 44px; padding: 0 1rem; border: 1px solid var(--hairline); font-size: var(--fs-body); }
.size-option.is-selected { border-color: var(--ink); }
.pdp__notes { margin-top: 1.5rem; font-weight: 300; font-size: var(--fs-lead); line-height: 1.6; }
.pdp__actions { display: grid; gap: 10px; margin-top: 2rem; }
.pdp__assurance { margin-top: 1.25rem; font-size: var(--fs-label); color: var(--graphite); line-height: 1.7; }
.pdp__details { margin-top: 2.5rem; border-top: 1px solid var(--hairline); }
.acc { border-bottom: 1px solid var(--hairline); }
.acc summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  min-height: 56px;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 1.1rem; font-weight: 300; }
.acc[open] summary::after { content: "−"; }
.acc__body { padding: 0 0 1.5rem; color: var(--graphite); font-weight: 300; font-size: var(--fs-body); line-height: 1.7; }
.acc__body p + p { margin-top: 0.75rem; }
.spec { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.35rem 1rem; }
.spec dt { color: var(--graphite); }
.spec dd { margin: 0; color: var(--ink); font-weight: 400; }
.pyramid { display: grid; gap: 1rem; }
.pyramid__row span { display: block; font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--graphite); }
.pyramid__row strong { display: block; font-weight: 400; color: var(--ink); margin-top: 2px; }
.pdp-crumbs { padding: calc(var(--header-h) + 18px) var(--gutter) 18px; }
@media (max-width: 899px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__hero { max-height: 70vh; }
  .pdp__panel-inner { position: static; max-width: none; }
}

/* ---------- 11. Categorías (home) ---------- */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.cat {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: clamp(220px, 24vw, 340px);
  padding: clamp(24px, 3vw, 40px);
  border-right: 1px solid var(--hairline);
  transition: background-color 0.4s var(--ease);
}
.cat:last-child { border-right: 0; }
.cat:hover { background: var(--stone); }
.cat__name { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 300; letter-spacing: var(--track-title); text-transform: uppercase; }
.cat__copy { margin-top: 0.75rem; color: var(--graphite); font-weight: 300; max-width: 22rem; }
.cat__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 2rem; font-size: var(--fs-label); }
.cat__count { color: var(--graphite); }
.cat__cta { font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
@media (max-width: 1023px) {
  .cats { grid-template-columns: 1fr 1fr; }
  .cat:nth-child(2) { border-right: 0; }
  .cat:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
}
@media (max-width: 559px) {
  .cats { grid-template-columns: 1fr; }
  .cat { border-right: 0; border-bottom: 1px solid var(--hairline); min-height: 0; }
  .cat:last-child { border-bottom: 0; }
}

/* ---------- 12. Editorial / split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(480px, 60vw, 760px); }
.split__media { position: relative; background: var(--ink); overflow: hidden; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 7vw, 120px); background: var(--stone); }
.split__body h2 { font-size: var(--fs-h2); font-weight: 400; letter-spacing: var(--track-title); text-transform: uppercase; line-height: 1.25; }
.split__body p { margin-top: 1.25rem; color: var(--graphite); font-weight: 300; font-size: var(--fs-lead); max-width: 28rem; }
.split__body .btn-row { margin-top: 2.25rem; }
@media (max-width: 899px) {
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split__media { aspect-ratio: 4 / 5; }
}
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px); text-align: center; }
.service h3 { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; }
.service p { margin: 0.75rem auto 0; color: var(--graphite); font-weight: 300; max-width: 20rem; }
@media (max-width: 767px) { .services { grid-template-columns: 1fr; } }

/* ---------- 13. Casas ---------- */
.house { padding: clamp(56px, 7vw, 104px) 0; border-top: 1px solid var(--hairline); }
.house:first-of-type { border-top: 0; padding-top: 0; }
.house__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; padding: 0 var(--gutter); max-width: var(--max); margin: 0 auto clamp(24px, 3vw, 40px); }
.house__title { font-size: var(--fs-h2); font-weight: 400; letter-spacing: var(--track-title); text-transform: uppercase; }
.house__copy { margin-top: 0.75rem; color: var(--graphite); font-weight: 300; max-width: 36rem; }
.house__brands { margin-top: 0.75rem; font-size: var(--fs-label); color: var(--graphite); max-width: 44rem; }

/* ---------- 14. Contacto ---------- */
.contact { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 120px); padding-bottom: var(--section); }
.contact__list { border-top: 1px solid var(--hairline); }
.contact__item { padding: 1.25rem 0; border-bottom: 1px solid var(--hairline); }
.contact__item dt { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--graphite); }
.contact__item dd { margin: 0.35rem 0 0; font-size: var(--fs-lead); font-weight: 300; }
.contact__item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact__form h2 { font-size: var(--fs-h3); font-weight: 400; letter-spacing: var(--track-title); text-transform: uppercase; }
.contact__form > p { color: var(--graphite); margin: 0.5rem 0 2rem; font-weight: 300; }
.contact__note { margin-top: 1rem; font-size: var(--fs-label); color: var(--graphite); }
@media (max-width: 899px) { .contact { grid-template-columns: 1fr; } }

/* ---------- 15. Carrito ---------- */
.cart { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(32px, 5vw, 80px); align-items: start; padding-bottom: var(--section); }
.cart-list { border-top: 1px solid var(--hairline); }
.cart-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 0 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--hairline);
}
.cart-row__media { position: relative; width: 112px; aspect-ratio: 4 / 5; background: var(--stone); grid-row: span 2; }
.cart-row__media > svg { position: absolute; left: 50%; top: 50%; width: 48%; transform: translate(-50%, -50%); }
.cart-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.cart-row__info .tile__brand { display: block; }
.cart-row__info h3 { font-size: var(--fs-body); font-weight: 400; margin-top: 4px; }
.cart-row__info .cart-row__meta { color: var(--graphite); font-size: var(--fs-label); margin-top: 2px; }
.cart-row__price { font-size: var(--fs-body); text-align: right; white-space: nowrap; }
.cart-row__controls { grid-column: 2 / 4; display: flex; align-items: center; justify-content: space-between; gap: 1rem; align-self: end; margin-top: 1rem; }
.cart-row__remove { font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.cart-row__remove:hover { color: var(--ink); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--hairline); height: 40px; }
.qty button { width: 40px; height: 100%; font-size: 1rem; font-weight: 300; }
.qty button:hover { background: var(--stone); }
.qty input { width: 40px; height: 100%; border: 0; text-align: center; font: inherit; font-size: var(--fs-body); -moz-appearance: textfield; appearance: textfield; background: transparent; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-empty { text-align: center; padding: 72px 0; border-top: 1px solid var(--hairline); }
.cart-empty h2 { font-size: var(--fs-h3); font-weight: 400; letter-spacing: var(--track-title); text-transform: uppercase; }
.cart-empty p { color: var(--graphite); margin: 0.75rem 0 2rem; font-weight: 300; }
.cart-back { display: inline-block; margin-top: 1.5rem; }

.summary { position: sticky; top: calc(var(--header-h) + 24px); background: var(--stone); padding: 32px; }
.summary h2 { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: 1.25rem; }
.summary-line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; font-size: var(--fs-body); }
.summary-line span:first-child { color: var(--graphite); }
.summary-line--total { margin-top: 0.9rem; padding-top: 1.1rem; border-top: 1px solid var(--hairline); font-size: var(--fs-lead); }
.summary-line--total span:first-child { color: var(--ink); }
.summary .btn { margin-top: 1.5rem; }
.summary__note { margin-top: 1rem; font-size: var(--fs-label); color: var(--graphite); line-height: 1.6; }
.summary-items { margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--hairline); max-height: 340px; overflow-y: auto; }
.summary-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 0.9rem; align-items: center; padding: 0.6rem 0; }
.summary-item__media { position: relative; width: 56px; aspect-ratio: 4 / 5; background: var(--paper); }
.summary-item__media > svg { position: absolute; left: 50%; top: 50%; width: 48%; transform: translate(-50%, -50%); }
.summary-item__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.summary-item__info strong { display: block; font-weight: 400; font-size: var(--fs-body); line-height: 1.35; }
.summary-item__info span { font-size: var(--fs-label); color: var(--graphite); }
.summary-item__price { font-size: var(--fs-body); white-space: nowrap; }
@media (max-width: 959px) {
  .cart { grid-template-columns: 1fr; }
  .summary { position: static; }
}
@media (max-width: 559px) {
  .cart-row { grid-template-columns: 88px minmax(0, 1fr); }
  .cart-row__media { width: 88px; }
  .cart-row__price { grid-column: 2; text-align: left; margin-top: 4px; }
  .cart-row__controls { grid-column: 1 / -1; }
}

/* ---------- 16. Checkout ---------- */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(32px, 6vw, 96px); align-items: start; padding-bottom: var(--section); }
.checkout__block { padding: 2rem 0; border-top: 1px solid var(--hairline); }
.checkout__block:first-child { padding-top: 0; border-top: 0; }
.checkout__block h2 { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: 1.5rem; }
.pay-methods { display: grid; gap: 10px; }
.pay-method { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.25rem; border: 1px solid var(--hairline); cursor: pointer; transition: border-color 0.2s ease; }
.pay-method:hover { border-color: #b9b6b0; }
.pay-method.is-active { border-color: var(--ink); }
.pay-method input { margin: 3px 0 0; accent-color: var(--ink); width: 16px; height: 16px; flex: none; }
.pay-method strong { display: block; font-weight: 500; font-size: var(--fs-body); }
.pay-method.is-disabled { opacity: .45; cursor: not-allowed; }
.pay-method[hidden] { display: none; }
.pay-method strong .pay-tag { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.45rem; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.04em; vertical-align: 1px; background: var(--ink); color: #fff; }
.pay-method strong .pay-tag--soft { background: none; color: var(--ink); border: 1px solid var(--hairline); }
.pay-note { margin-top: 0.8rem; padding: 0.8rem 1rem; border-left: 2px solid var(--gold-ink); background: var(--stone, #f6f5f3); font-size: var(--fs-label); line-height: 1.5; }
.summary-line[hidden] { display: none; }
.pay-method small { display: block; color: var(--graphite); font-size: var(--fs-label); margin-top: 2px; line-height: 1.5; }
.checkout .check { margin: 0.5rem 0 1.5rem; }
.order-confirmation { grid-column: 1 / -1; max-width: 36rem; margin: 0 auto; text-align: center; padding: 24px 0 var(--section); }
.order-confirmation h2 { font-size: var(--fs-h1); font-weight: 300; letter-spacing: var(--track-title); text-transform: uppercase; line-height: 1.15; }
.order-confirmation .order-code { display: inline-block; margin: 1.75rem 0 1.25rem; padding: 0.9rem 1.5rem; border: 1px solid var(--ink); font-size: var(--fs-lead); letter-spacing: 0.14em; }
.order-confirmation p { color: var(--graphite); font-weight: 300; font-size: var(--fs-lead); }
.order-confirmation .btn-row { justify-content: center; margin-top: 2.25rem; }
@media (max-width: 959px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout .summary { order: -1; }
}

/* ---------- 17. Páginas de texto (nosotros, legales) ---------- */
.prose { max-width: 40rem; margin: 0 auto; padding: 0 var(--gutter) var(--section); }
.prose h2 { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; margin: 3rem 0 1rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: var(--fs-lead); font-weight: 300; line-height: 1.8; color: #262626; }
.prose p + p { margin-top: 1rem; }
.prose ul { margin: 1rem 0; padding-left: 1.1rem; list-style: disc; }
.prose li + li { margin-top: 0.4rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose .updated { font-size: var(--fs-label); color: var(--graphite); margin-bottom: 2.5rem; }

.manifesto { max-width: 46rem; margin: 0 auto; text-align: center; padding: 0 var(--gutter); }
.manifesto p { font-size: clamp(1.125rem, 1.8vw, 1.5rem); font-weight: 300; line-height: 1.6; }
.manifesto p + p { margin-top: 1.5rem; font-size: var(--fs-lead); color: var(--graphite); }

.band { position: relative; height: clamp(320px, 52vw, 720px); background: var(--ink); overflow: hidden; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); }
.step { padding: clamp(28px, 3vw, 48px) clamp(20px, 3vw, 40px) 0 0; }
.step + .step { padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid var(--hairline); }
.step__num { font-size: var(--fs-label); color: var(--graphite); letter-spacing: 0.1em; }
.step h3 { margin-top: 1rem; font-size: var(--fs-h3); font-weight: 400; letter-spacing: var(--track-title); text-transform: uppercase; }
.step p { margin-top: 0.75rem; color: var(--graphite); font-weight: 300; }
@media (max-width: 767px) {
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--hairline); }
}

.faq { max-width: 46rem; margin: 0 auto; border-top: 1px solid var(--hairline); }

/* ---------- 18. Footer ---------- */
.footer { border-top: 1px solid var(--hairline); background: var(--paper); }
.footer__news { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 2rem 4rem; align-items: end; padding: clamp(48px, 6vw, 80px) 0; border-bottom: 1px solid var(--hairline); }
.footer__news h2 { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; }
.footer__news p { color: var(--graphite); margin-top: 0.6rem; font-weight: 300; max-width: 30rem; }
.footer__news-form { display: flex; border-bottom: 1px solid var(--ink); }
.footer__news-form input { flex: 1; min-width: 0; height: 48px; border: 0; outline: none; font: inherit; font-size: var(--fs-body); background: transparent; }
.footer__news-form button { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; padding-left: 1rem; min-height: 48px; }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: clamp(40px, 5vw, 64px) 0; }
.footer__cols h2 { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: 1.1rem; }
.footer__cols li { font-size: var(--fs-body); color: var(--graphite); line-height: 1.6; padding: 0.2rem 0; }
.footer__cols a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__brand { display: flex; justify-content: center; padding: clamp(24px, 4vw, 48px) 0; border-top: 1px solid var(--hairline); }
.footer__brand img { height: clamp(40px, 6vw, 72px); width: auto; filter: brightness(0); }
.footer__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.25rem 0 2rem; font-size: var(--fs-label); color: var(--graphite); }
.footer__bottom a:hover { color: var(--ink); }
@media (max-width: 899px) {
  .footer__news { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

/* ---------- 19. Toast + WhatsApp ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 90;
  transform: translate(-50%, 16px);
  max-width: calc(100vw - 32px);
  background: var(--ink); color: var(--paper);
  padding: 14px 24px;
  font-size: var(--fs-body);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  border-radius: 50%;
  transition: transform 0.3s var(--ease);
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 24px; height: 24px; }

/* ---------- 20. Utilidades / accesibilidad ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 18px; font-size: var(--fs-label); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.tile__link:focus-visible { outline-offset: -4px; }
.tac { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mt-section { margin-top: var(--section); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .footer, .wa-float, .nav-drawer, .nav-backdrop, .filters { display: none !important; }
  .page { padding-top: 0; }
}

/* Home: muestra de colección (8 perfumes; en 3 columnas se ven 6 para no dejar huecos) */
@media (min-width: 768px) and (max-width: 1023px) { .products-grid--home > :nth-child(n+7) { display: none; } }

/* ---------- 21. Marca: negro + dorado ---------- */
/* Header negro con logo dorado (sin filtro: el logo ya es dorado). */
.site-header { background: var(--ink); color: var(--paper); border-bottom-color: var(--gold-soft); }
.brand__img, .site-header.is-overlay .brand__img { filter: none; }
.site-header.is-overlay { background: transparent; border-bottom-color: transparent; }

/* Acentos dorados sobre blanco */
.tile__brand { color: var(--gold-ink); }
.tab.is-active, .tab[aria-pressed="true"] { border-bottom-color: var(--gold-ink); }
.pager__btn[aria-current="page"] { border-color: var(--gold-ink); color: var(--gold-ink); }
.pdp__thumb.is-active, .pay-method.is-active { border-color: var(--gold-ink); }
.pdp__brand { color: var(--gold-ink); }
.link { background-image: linear-gradient(var(--gold), var(--gold)); }
.btn:hover { background: var(--gold-ink); border-color: var(--gold-ink); }
.btn--outline:hover { background: var(--ink); border-color: var(--ink); }
.section-head h2::after { content: ""; display: block; width: 40px; height: 1px; margin: 1rem auto 0; background: var(--gold); }

/* Footer negro */
.footer { background: var(--ink); color: var(--paper); border-top-color: var(--gold-soft); }
.footer__news, .footer__brand { border-color: var(--gold-soft); }
.footer__news p, .footer__cols li, .footer__bottom { color: #b4afa6; }
.footer__news h2, .footer__cols h2 { color: var(--gold); }
.footer__cols a:hover, .footer__bottom a:hover { color: var(--paper); }
.footer__brand img { filter: none; }
.footer .btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.footer .btn:hover { background: var(--paper); border-color: var(--paper); }
.footer .btn--outline { background: transparent; color: var(--paper); border-color: var(--paper); }
.footer .btn--outline:hover { background: var(--paper); color: var(--ink); }

/* WhatsApp flotante: aro dorado para que no se pierda sobre el footer negro */
.wa-float { box-shadow: 0 0 0 1px var(--gold); }

/* ---------- 22. Home: franja de marca, categorías y casas ---------- */
.section--tight { padding-bottom: 0; }

/* Franja de marca (negro + dorado) */
.brand-band { background: var(--ink); color: var(--paper); text-align: center; padding: clamp(64px, 9vw, 120px) var(--gutter); border-bottom: 1px solid var(--gold-soft); }
.brand-band__inner { max-width: 760px; margin: 0 auto; }
.brand-band__badge { width: clamp(96px, 11vw, 132px); height: auto; margin: 0 auto 1.75rem; border-radius: 50%; }
.brand-band__title { font-size: var(--fs-h1); font-weight: 300; letter-spacing: var(--track-title); text-transform: uppercase; line-height: 1.2; color: var(--gold); }
.brand-band__lead { margin: 1.25rem auto 0; max-width: 34rem; color: #c9c4ba; font-weight: 300; font-size: var(--fs-lead); }
.brand-band__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--gold-soft); }
.brand-band__stats > div { padding: 1.5rem 0.5rem 0; }
.brand-band__stats > div + div { border-left: 1px solid var(--gold-soft); }
.brand-band__stats dt { font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: #9d978c; }
.brand-band__stats dd { margin-top: 0.4rem; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 300; letter-spacing: 0.04em; }

/* Tarjetas de categoría: perfume recortado sobre negro con halo dorado */
.cat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.cat-tile { position: relative; display: flex; flex-direction: column; background: var(--ink); color: var(--paper); overflow: hidden; }
.cat-tile__media { position: relative; aspect-ratio: 4 / 5; background: radial-gradient(60% 50% at 50% 55%, rgba(200, 147, 63, 0.32), rgba(200, 147, 63, 0) 70%), var(--ink); }
.cat-tile__media img { position: absolute; inset: 14% 12% 10%; width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.55)); transition: transform 0.6s var(--ease); }
.cat-tile:hover .cat-tile__media img { transform: scale(1.05) translateY(-2%); }
.cat-tile__body { padding: 0 clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 36px); margin-top: -8%; position: relative; }
.cat-tile__name { font-size: clamp(1.125rem, 1.6vw, 1.5rem); font-weight: 300; letter-spacing: var(--track-title); text-transform: uppercase; color: var(--gold); }
.cat-tile__copy { margin-top: 0.6rem; color: #b4afa6; font-weight: 300; font-size: var(--fs-body); line-height: 1.55; min-height: 3.1em; }
.cat-tile__cta { display: inline-block; margin-top: 1.25rem; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid var(--gold); }
.cat-tile:hover .cat-tile__cta { color: var(--gold); }
@media (max-width: 1023px) { .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .cat-tile__copy { display: none; }
  .cat-tile__body { padding: 0 14px 20px; }
  .cat-tile__name { font-size: 1rem; }
  .cat-tile__cta { font-size: var(--fs-micro); margin-top: 0.75rem; }
}

/* Franja de casas en movimiento */
.houses-band { background: var(--ink); color: var(--paper); padding: clamp(40px, 5vw, 64px) 0; overflow: hidden; border-top: 1px solid var(--gold-soft); }
.houses-band__title { text-align: center; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); margin-bottom: 1.75rem; }
.houses-band__track { display: flex; width: max-content; animation: jf-marquee 60s linear infinite; }
.houses-band:hover .houses-band__track { animation-play-state: paused; }
.houses-band__row { display: flex; flex: none; }
.houses-band__item { padding: 0 clamp(20px, 2.6vw, 36px); font-size: clamp(1rem, 1.6vw, 1.375rem); font-weight: 300; letter-spacing: var(--track-title); text-transform: uppercase; white-space: nowrap; position: relative; }
.houses-band__item::after { content: ""; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; background: var(--gold); transform: translateY(-50%) rotate(45deg); }
@keyframes jf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .houses-band__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .houses-band__row[aria-hidden="true"] { display: none; }
  .houses-band__row { flex-wrap: wrap; justify-content: center; row-gap: 0.75rem; }
}
.cat-tiles { background: #1c1a17; }
.cat-tile__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.cat-tile__cta { margin-top: auto; }
.cat-tile__copy { margin-bottom: 1.25rem; }

/* ---------- 23. Conversión (Essential): anuncios, aviso de carrito, confianza ---------- */
/* Barra de anuncios dentro del header (todas las páginas) */
:root { --announce-h: 0px; }
:root.has-announce { --announce-h: 32px; --header-h: calc(64px + var(--announce-h)); }
@media (max-width: 767px) { :root.has-announce { --header-h: calc(56px + var(--announce-h)); } }
.site-header__inner { height: calc(100% - var(--announce-h)); }
.announce { height: var(--announce-h); display: flex; align-items: center; justify-content: center; background: var(--ink); border-bottom: 1px solid var(--gold-soft); overflow: hidden; }
.announce__msg { font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); white-space: nowrap; }
.announce__msg.is-out { opacity: 0; transform: translateY(-6px); }
.site-header.is-overlay .announce { background: rgba(0, 0, 0, 0.55); }

/* Hero: CTA principal dorado */
.hero__ctas { align-items: center; }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* Barra de progreso hacia el envío gratis */
.ship-progress { margin: 1rem 0; }
.ship-progress__text { font-size: var(--fs-label); color: var(--graphite); }
.ship-progress__text strong { color: var(--ink); font-weight: 500; }
.ship-progress__bar { height: 3px; margin-top: 0.6rem; background: var(--hairline); overflow: hidden; }
.ship-progress__bar span { display: block; height: 100%; background: var(--gold); transition: width 0.6s var(--ease); }

/* Carrito lateral: se abre con la bolsa del header, encima de la página */
.cart-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s; }
.cart-backdrop.is-visible { opacity: 1; visibility: visible; }
.cart-drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 70;
  width: min(440px, 100vw);
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  border-left: 1px solid var(--gold-soft);
  transform: translateX(100%);
  transition: transform 0.45s var(--ease);
}
.cart-drawer.is-open { transform: none; }
.cart-drawer__head { flex: none; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 3vw, 32px); background: var(--ink); color: var(--paper); border-bottom: 1px solid var(--gold-soft); }
.cart-drawer__title { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; }
.cart-drawer__title span { color: var(--gold); }
.cart-drawer__close { width: 44px; height: 44px; margin-right: -12px; display: grid; place-items: center; color: var(--paper); }
.cart-drawer__close svg { width: 20px; height: 20px; }
.cart-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 clamp(20px, 3vw, 32px); }
.cart-drawer__list li + li { border-top: 1px solid var(--hairline); }
.cart-drawer__empty { padding: 64px 0; text-align: center; }
.cart-drawer__empty p { color: var(--graphite); margin-bottom: 1.5rem; }
.cd-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 14px; padding: 18px 0; align-items: start; }
.cd-row__media { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--stone); overflow: hidden; }
.cd-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.cd-row__media svg { position: absolute; left: 50%; top: 50%; width: 50%; height: auto; transform: translate(-50%, -50%); }
.cd-row__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-row__name { font-size: var(--fs-body); line-height: 1.35; }
.cd-row__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.cd-row__meta { font-size: var(--fs-label); color: var(--graphite); }
.cd-row__controls { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.qty--sm { height: 34px; }
.qty--sm button { width: 34px; }
.qty--sm button:disabled { opacity: 0.35; cursor: default; background: none; }
.qty--sm span { min-width: 28px; text-align: center; font-size: var(--fs-body); }
.cd-row__remove { font-size: var(--fs-label); color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; min-height: 34px; }
.cd-row__remove:hover { color: var(--ink); }
.cd-row__price { font-size: var(--fs-body); text-align: right; white-space: nowrap; }
.cd-row__price .price-was { display: block; font-size: var(--fs-label); }
.cart-drawer__foot { flex: none; padding: 4px clamp(20px, 3vw, 32px) calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); background: var(--paper); }
.cart-drawer__foot[hidden] { display: none; }
.cart-drawer__line { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-body); margin-top: 6px; }
.cart-drawer__line strong { font-size: 1.125rem; font-weight: 500; }
.cart-drawer__line--save span:last-child { color: #2f7a3d; }
.cart-drawer__note { margin: 4px 0 14px; font-size: var(--fs-label); color: var(--graphite); }
.cart-drawer__full { display: block; margin-top: 12px; text-align: center; font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; }
.cart-drawer__full:hover { color: var(--ink); }

/* La bolsa del header salta un poco al añadir */
.header-link.is-bump svg { animation: jf-bump 0.5s var(--ease); }
@keyframes jf-bump { 30% { transform: scale(1.25); } 60% { transform: scale(0.95); } }

/* Barrita "Añadido · Ver carrito" (celular) */
.added-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 16px;
  background: var(--ink); color: var(--paper); border: 1px solid var(--gold-soft);
  font-size: var(--fs-body);
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.added-bar.is-visible { opacity: 1; visibility: visible; transform: none; }
.added-bar__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.added-bar__link { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; background: var(--gold); color: var(--ink); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; }
@media (min-width: 768px) { .added-bar { left: auto; right: 24px; bottom: 24px; width: 420px; } }
@media (prefers-reduced-motion: reduce) { .header-link.is-bump svg { animation: none; } }

/* Ficha: razones para comprar */
.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 1.5rem; padding: 18px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.trust li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-label); color: var(--graphite); line-height: 1.45; }
.trust svg { width: 22px; height: 22px; flex: none; color: var(--gold-ink); }
.trust strong { display: block; color: var(--ink); font-weight: 500; }

/* Ficha: barra fija de compra en celular */
.buybar { display: none; }
@media (max-width: 767px) {
  .buybar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--hairline); transform: translateY(110%); transition: transform 0.3s var(--ease); }
  .buybar.is-visible { transform: none; }
  .buybar__info { flex: 1; min-width: 0; }
  .buybar__name { font-size: var(--fs-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buybar__price { font-size: var(--fs-body); font-weight: 500; }
  .buybar .btn { min-height: 44px; padding: 0 1.5rem; }
  body:has(.buybar.is-visible) .wa-float { bottom: 84px; }
}

/* Checkout: tranquilidad junto al botón */
.assure { margin-top: 14px; display: grid; gap: 6px; }
.assure li { position: relative; padding-left: 18px; font-size: var(--fs-label); color: var(--graphite); }
.assure li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }

/* Tarjetas de categoría: precio de entrada */
.cat-tile__from { font-size: var(--fs-label); color: #b4afa6; margin-bottom: 1rem; letter-spacing: 0.04em; }
.cat-tile__from strong { color: var(--paper); font-weight: 500; }

/* ---------- 24. Home: hero serif, beneficios y franja de marca al final ---------- */
/* Hero: serif grande en minúsculas, acento dorado en cursiva y velo oscuro
   detrás del texto para que no se pierda sobre la foto. */
.hero::after {
  background:
    radial-gradient(ellipse 75% 55% at 50% 78%, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.88) 100%);
}
.hero__kicker {
  display: inline-flex; align-items: center; gap: 0.9rem;
  margin: 0 0 1.1rem;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
}
.hero__kicker::before, .hero__kicker::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.7; }
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  line-height: 1;
  max-width: 18ch;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
  text-wrap: balance;
}
.hero__title em { display: block; font-style: italic; color: var(--gold); }
.hero__lead { font-weight: 400; opacity: 1; color: #ece7de; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }
@media (max-width: 767px) {
  .hero__title { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .hero__kicker { font-size: 0.625rem; letter-spacing: 0.18em; }
  .hero__kicker::before, .hero__kicker::after { width: 18px; }
}

/* Beneficios bajo el hero */
.perks { background: var(--paper); border-bottom: 1px solid var(--hairline); padding: clamp(28px, 3.5vw, 44px) var(--gutter); }
.perks__list { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px clamp(20px, 3vw, 48px); }
.perk { display: flex; align-items: flex-start; gap: 14px; }
.perk svg { width: 30px; height: 30px; flex: none; color: var(--gold-ink); }
.perk .perk__title { display: block; margin: 0; color: inherit; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.4; }
.perk p { margin-top: 4px; font-size: var(--fs-label); color: var(--graphite); line-height: 1.5; }
@media (max-width: 1023px) { .perks__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .perks__list { gap: 22px 14px; }
  .perk { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .perk svg { width: 26px; height: 26px; }
  .perk .perk__title { font-size: var(--fs-micro); }
}

/* Franja de marca (antes del footer): serif dorada y cifras centradas */
.brand-band { border-bottom: 0; border-top: 1px solid var(--gold-soft); }
.brand-band__title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: 0; text-transform: none; line-height: 1.05; }
.brand-band__stats > div { padding: 1.5rem 0.5rem 0; text-align: center; min-width: 0; }
.brand-band__stats dd { margin: 0.4rem 0 0; font-family: var(--font-display); font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 500; letter-spacing: 0; line-height: 1.1; color: var(--paper); }
.brand-band__stats dd.is-text { font-size: clamp(1.125rem, 2.4vw, 1.625rem); }
/* Misma altura para cifras y texto: quedan en la misma línea */
.brand-band__stats dd { min-height: clamp(3.25rem, 5vw, 3.5rem); display: flex; align-items: center; justify-content: center; }
@media (max-width: 480px) {
  .brand-band__stats > div { padding: 1.25rem 0.25rem 0; }
  .brand-band__stats dt { font-size: 0.625rem; letter-spacing: 0.12em; }
}

/* Catálogo: enlace "Quitar búsqueda" */
.page-head .page-head__clear { margin-top: 0.9rem; font-size: var(--fs-label); letter-spacing: 0.06em; }

/* ---------- 25. Home: frasco 3D "tres tiempos", aparición al bajar y celular ---------- */
/* Sección negra con halo dorado. En escritorio el frasco queda fijo mientras
   bajan las tres notas; el giro del frasco sigue el scroll (bottle3d.js). */
.ritual {
  position: relative;
  background: var(--ink); /* negro puro: el lienzo 3D es negro opaco y no debe notarse su borde */
  color: var(--paper);
  border-bottom: 1px solid var(--gold-soft);
  overflow: clip;
}
.ritual__inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  padding: 0 var(--gutter);
}
.ritual__stage {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h));
  max-height: 860px; min-height: 520px;
  display: grid; place-items: center;
}
.ritual__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y;
  /* Bordes del lienzo difuminados: el arco y el piso se funden con el negro. */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}
.ritual__stage { margin: 0; }
.ritual__fallback { position: absolute; left: 0; right: 0; top: 10%; width: 100%; height: 72%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6)); }
.ritual__caption { position: absolute; left: 50%; bottom: clamp(16px, 4vh, 40px); transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; white-space: nowrap; }
.ritual__hint { display: none; align-items: center; gap: 0.5rem; font-size: 0.625rem; letter-spacing: var(--track-label); text-transform: uppercase; color: #8f897f; }
.ritual__hint::before, .ritual__hint::after { content: ""; width: 14px; height: 1px; background: var(--gold-soft); }
.ritual__stage.is-3d .ritual__hint { display: inline-flex; }
.ritual__hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .ritual__hint-touch { display: none; } .ritual__hint-mouse { display: inline; } }
.ritual__caption a { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); padding-bottom: 3px; border-bottom: 1px solid var(--gold-soft); transition: border-color 0.3s var(--ease); }
.ritual__caption a:hover { border-bottom-color: var(--gold); }
.ritual__stage.is-3d .ritual__fallback { display: none; }
.ritual__stage.is-3d .ritual__canvas { cursor: grab; }
.ritual__stage.is-3d .ritual__canvas:active { cursor: grabbing; }
.ritual__copy { padding: clamp(96px, 14vh, 160px) 0; }
.ritual__kicker {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
}
.ritual__kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.7; }
.ritual__title {
  margin-top: 1.25rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: 0;
  text-wrap: balance;
}
.ritual__title em { display: block; font-style: italic; color: var(--gold); }
.ritual__lead { margin-top: 1.25rem; max-width: 28rem; color: #c9c4ba; font-weight: 300; font-size: var(--fs-lead); }
.ritual__notes { margin-top: clamp(40px, 6vh, 64px); counter-reset: none; }
.ritual__note {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem;
  padding: 1.6rem 0 1.6rem 1.25rem;
  border-left: 1px solid var(--gold-soft);
  transition: opacity 0.6s var(--ease), border-color 0.6s var(--ease);
}
.ritual__num { font-family: var(--font-display); font-style: italic; font-size: 1.75rem; line-height: 1; color: var(--gold); }
.ritual__note h3 { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; }
.ritual__note p { margin-top: 0.5rem; color: #b4afa6; font-weight: 300; max-width: 24rem; }
.ritual__ctas { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: clamp(40px, 6vh, 64px); }
/* Con JS en escritorio: notas espaciadas y la activa resaltada mientras se baja. */
@media (min-width: 900px) {
  .ritual.is-stepped .ritual__note { min-height: 26vh; align-content: center; opacity: 0.35; }
  .ritual.is-stepped .ritual__note.is-active { opacity: 1; border-left-color: var(--gold); }
}
@media (max-width: 899px) {
  .ritual__inner { grid-template-columns: 1fr; gap: 0; }
  /* Celular: el frasco de borde a borde y alto (es el protagonista). */
  .ritual__stage { position: relative; top: 0; height: auto; min-height: 0; aspect-ratio: 4 / 5; max-height: 78vh; max-height: 78svh; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); }
  .ritual__caption { bottom: 14px; }
  .ritual__copy { padding-top: 8px; }
  .ritual__lead { font-size: var(--fs-body); }
  .ritual__notes { margin-top: 32px; }
  .ritual__copy { padding: 0 0 clamp(56px, 12vw, 80px); text-align: left; }
  .ritual__title { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .ritual__note { grid-template-columns: 2.5rem 1fr; padding: 1.1rem 0 1.1rem 1rem; }
  .ritual__note.is-active { border-left-color: var(--gold); }
  .ritual__num { font-size: 1.4rem; }
  .ritual__ctas { gap: 1.5rem; }
  .ritual__ctas .btn { width: 100%; }
}

/* Aparición suave al bajar (solo con JS y sin "reducir movimiento"). */
.has-reveal .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--reveal-delay, 0s); }
.has-reveal .reveal.is-in { opacity: 1; transform: none; }

/* Hero: la foto se mueve un poco más lento que la página (main.js). */
.hero__media { will-change: transform; }

/* Celular: la muestra de colección se desliza de lado en vez de apilar 8 tarjetas. */
@media (max-width: 767px) {
  .products-grid--home {
    display: grid; grid-auto-flow: column; grid-template-columns: none;
    grid-auto-columns: 64%; gap: 10px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
    padding: 0 var(--gutter) 4px;
    scrollbar-width: none;
  }
  .products-grid--home::-webkit-scrollbar { display: none; }
  .products-grid--home > * { scroll-snap-align: start; }
  .grid-swipe-hint { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 1.25rem; font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--graphite); }
  .grid-swipe-hint::after { content: ""; width: 28px; height: 1px; background: var(--gold-ink); animation: jf-swipe 1.8s var(--ease) infinite; }
  .split__media { aspect-ratio: 4 / 3; }
}
@media (min-width: 768px) { .grid-swipe-hint { display: none; } }
@keyframes jf-swipe { 0%, 100% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(8px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .grid-swipe-hint::after { animation: none; } }

/* Celular: el texto del hero nunca se mete bajo el header en pantallas bajas.
   El hero crece si hace falta en vez de recortar el texto. */
@media (max-width: 767px) {
  .hero { height: auto; min-height: 100vh; min-height: 100svh; max-height: none; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero__content { position: relative; bottom: auto; padding-top: calc(var(--header-h) + 56px); padding-bottom: 40px; }
  .hero__title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
}

/* =========================================================
   Promociones (plan Premium): precio de oferta, cuenta regresiva,
   combos y cupón. Diseño tomado de demo-premium.css.
   ========================================================= */
.price-was { color: var(--graphite); font-weight: 400; text-decoration: line-through; margin-right: 2px; }
.price-now { color: var(--ink); font-weight: 500; }
.tile__tag--offer { z-index: 2; padding: 5px 9px; background: var(--ink); color: var(--gold); }
.tile__tag--second { top: 46px; }
.pdp__price .price-was { font-size: 0.8em; }
.pdp__offer { margin-top: 0.5rem; font-size: var(--fs-label); color: var(--gold-ink); letter-spacing: 0.02em; }
.pdp__offer strong { font-weight: 500; }
.pdp__offer [data-countdown-to] { font-variant-numeric: tabular-nums; font-weight: 500; }
.buybar__price .price-was { display: none; }

/* Barra de anuncios con la promo vigente */
.announce--promo { background: linear-gradient(90deg, #2a1d0c, #000 45%, #000 55%, #2a1d0c); }
.announce--promo .announce__msg a { color: var(--gold); }
.announce--promo .announce__msg a:hover { color: var(--paper); }
.announce--promo [data-countdown-to] { font-variant-numeric: tabular-nums; color: var(--paper); }
@media (max-width: 767px) { .announce--promo .announce__msg { font-size: 0.625rem; letter-spacing: 0.08em; } }

/* Home: promo + combos */
.promo-home { background: var(--ink); color: var(--paper); padding: var(--section) 0; }
.promo-home__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.promo-home__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; margin-bottom: clamp(24px, 3vw, 40px); background: linear-gradient(90deg, #2a1d0c, #111 60%); border-left: 3px solid var(--gold); }
.promo-home__kicker { font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); }
.promo-home__title { margin-top: 6px; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; letter-spacing: 0.02em; }
.promo-home__text { margin-top: 4px; color: #e9e2d6; font-size: var(--fs-body); }
.countdown { display: flex; gap: 8px; }
.countdown span { min-width: 58px; padding: 8px 6px; background: #000; border: 1px solid var(--gold-soft); text-align: center; }
.countdown b { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; line-height: 1; color: var(--paper); font-variant-numeric: tabular-nums; }
.countdown small { display: block; margin-top: 4px; font-size: 0.625rem; letter-spacing: var(--track-label); text-transform: uppercase; color: #9d978c; }
.promo-home .tile { background: #111; }
.promo-home .tile__stage { background: #f6f5f3; }
.promo-home .tile__name a, .promo-home .price-now { color: var(--paper); }
.promo-home .tile__brand, .promo-home .price-was { color: #9d978c; }
.combos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2px; margin-top: 2px; }
.combo { background: #111; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; }
.combo__name { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); }
.combo__items { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0; }
.combo__item { flex: 1; max-width: 200px; text-align: center; color: #e9e2d6; }
.combo__media { position: relative; display: block; aspect-ratio: 1; background: #1c1a17; }
.combo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.combo__media svg { position: absolute; left: 50%; top: 50%; height: 80%; transform: translate(-50%, -50%); }
.combo__label { display: block; margin-top: 8px; font-size: var(--fs-label); }
.combo__label small { display: block; font-size: 0.625rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); }
.combo__plus { font-family: var(--font-display); font-size: 2rem; color: var(--gold); }
.combo__price { margin: auto 0 16px; font-size: var(--fs-body); }
.combo__price strong { font-size: 1.25rem; font-weight: 500; color: var(--paper); margin: 0 6px; }
.combo__price em { font-style: normal; font-size: var(--fs-label); color: #7fbf8a; }
.combo .btn { align-self: flex-start; }
@media (max-width: 767px) {
  .promo-home__bar { padding: 18px; }
  .countdown span { min-width: 52px; }
  .combos { grid-template-columns: 1fr; }
}

/* Carrito y checkout: descuentos y cupón */
.summary-line--discount span:last-child { color: #2f7a3d; }
.coupon { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); }
.coupon__label { display: block; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--graphite); }
.coupon__row { display: flex; gap: 8px; margin-top: 0.6rem; }
.coupon__row input { flex: 1; min-width: 0; width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--hairline); background: var(--paper); font: inherit; letter-spacing: 0.1em; text-transform: uppercase; }
.coupon__row input:focus { outline: none; border-color: var(--ink); }
.coupon__row .btn { flex: none; height: 48px; min-height: 0; padding-top: 0; padding-bottom: 0; }
.coupon__msg { min-height: 1.4em; margin-top: 0.5rem; font-size: var(--fs-label); color: var(--graphite); }
.coupon__msg.is-ok { color: #2f7a3d; }
.coupon__msg.is-bad { color: #b3261e; }

/* ---------- 22. Encontrar y comprar rápido (plan Premium) ---------- */
/* Tarjeta: corazón (favoritos) y "+ Añadir" sobre la foto. */
.tile__media { position: relative; }
.tile__fav { color: var(--ink); }
.tile__fav svg { stroke: currentColor; }
.tile__fav[aria-pressed="true"] svg { fill: var(--gold); stroke: var(--gold-ink); }
.tile__fav:focus-visible, .tile__quick:focus-visible { outline: 1px solid var(--gold-ink); outline-offset: -4px; }
.tile__quick {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  min-height: 40px; padding: 0 10px;
  background: var(--ink); color: var(--paper);
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), background-color 0.2s ease;
}
.tile:hover .tile__quick, .tile__quick:focus-visible, .tile__quick:disabled { opacity: 1; transform: none; }
.tile__quick:hover { background: var(--gold-ink); }
.tile__quick:disabled { cursor: default; background: var(--gold-ink); }
@media (hover: none) {
  .tile__quick { opacity: 1; transform: none; min-height: 34px; left: 8px; right: 8px; bottom: 8px; font-size: var(--fs-micro); }
  .tile__media .tile__dots { bottom: 50px; }
}

/* Header: corazón con contador y "Favoritos (N)" en el menú */
.nav-drawer__count:empty { display: none; }
.nav-drawer__count::before { content: "("; }
.nav-drawer__count::after { content: ")"; }

/* Búsqueda predictiva: desplegable claro (catálogo) y oscuro (lupa del header) */
.suggest-wrap { position: relative; }
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  max-height: min(70vh, 460px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--hairline); border-top: 2px solid var(--gold);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
  padding: 8px; text-align: left;
}
.suggest[hidden] { display: none; }
.suggest__label { padding: 8px 8px 4px; font-size: 0.625rem; font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-ink); }
.suggest__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 8px 6px; }
.suggest__chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--hairline); font-size: var(--fs-label); }
.suggest__chips a small { color: var(--graphite); font-size: 0.625rem; }
.suggest__chips a:hover, .suggest__chips a:focus-visible { border-color: var(--gold-ink); outline: none; }
.suggest__item { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 6px 8px; font-size: var(--fs-body); }
.suggest__item:hover, .suggest__item:focus-visible { background: var(--stone); outline: none; }
.suggest__img { position: relative; width: 44px; height: 52px; background: var(--stone); }
.suggest__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.suggest__txt { min-width: 0; line-height: 1.35; }
.suggest__txt small { display: block; font-size: 0.625rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--graphite); }
.suggest__txt em { display: block; font-style: normal; font-size: var(--fs-label); color: var(--graphite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__item b { font-weight: 500; font-size: var(--fs-label); white-space: nowrap; }
.suggest mark { background: rgba(200, 147, 63, 0.3); color: inherit; }
.suggest__all { display: block; margin-top: 4px; padding: 12px 8px 6px; border-top: 1px solid var(--hairline); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-ink); }
.suggest__all:hover, .suggest__all:focus-visible { color: var(--ink); outline: none; }
.suggest__empty { padding: 12px 8px; font-size: var(--fs-body); color: var(--graphite); }
.suggest__empty a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* En la lupa del header: dentro de la franja negra, debajo del campo. */
.suggest--dark {
  position: static; margin-top: 10px; padding: 4px 0 0;
  max-height: min(60vh, 440px);
  background: transparent; color: var(--paper);
  border: 0; border-top: 1px solid var(--gold-soft); box-shadow: none;
}
.suggest--dark .suggest__label { color: var(--gold); padding-left: 0; }
.suggest--dark .suggest__chips { padding-left: 0; }
.suggest--dark .suggest__chips a { border-color: rgba(255, 255, 255, 0.25); }
.suggest--dark .suggest__chips a small, .suggest--dark .suggest__txt small, .suggest--dark .suggest__txt em, .suggest--dark .suggest__empty { color: #b4afa6; }
.suggest--dark .suggest__chips a:hover, .suggest--dark .suggest__chips a:focus-visible { border-color: var(--gold); }
.suggest--dark .suggest__item { padding-left: 0; padding-right: 0; }
.suggest--dark .suggest__item:hover, .suggest--dark .suggest__item:focus-visible { background: rgba(255, 255, 255, 0.06); }
.suggest--dark .suggest__all { color: var(--gold); border-top-color: var(--gold-soft); padding-left: 0; }
.suggest--dark .suggest__all:hover, .suggest--dark .suggest__all:focus-visible { color: var(--paper); }
.suggest--dark .suggest__empty a { color: var(--gold); }
.suggest--dark mark { background: rgba(200, 147, 63, 0.35); }

/* Catálogo: barra de filtros (búsqueda, género, marca, aroma, precio, orden, favoritos) */
.filters__inner--bar { gap: 0.75rem 1rem; border-top: 1px solid var(--hairline); }
.filters__search { flex: 1 1 260px; min-width: 0; }
.filters__search > svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--gold-ink); pointer-events: none; }
.filters__search .input { height: 40px; padding-left: 36px; font-size: var(--fs-body); }
.filters__search .input:focus { border-color: var(--ink); }
.filters__inner--bar .filters__selects { gap: 0.5rem; }
.filters__inner--bar .select { min-width: 0; border-color: var(--hairline); }
.filters__fav { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid var(--hairline); font-size: var(--fs-label); letter-spacing: 0.04em; }
.filters__fav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.filters__fav [data-fav-count]:empty { display: none; }
.filters__fav[aria-pressed="true"] { border-color: var(--gold-ink); color: var(--gold-ink); }
.filters__fav[aria-pressed="true"] svg { fill: var(--gold); stroke: var(--gold-ink); }
.filters__clear { font-size: var(--fs-label); letter-spacing: 0.04em; }
.filters__clear[hidden] { display: none; }
@media (max-width: 899px) {
  .filters__inner--bar { padding-top: 12px; }
  .filters__search { flex-basis: 100%; }
  /* 16 px: el iPhone no hace zoom al tocar el campo. */
  .filters__search .input, .filters__inner--bar .select { font-size: 16px; }
  .filters__fav { width: 100%; }
}

/* Home: La selección de John (carrusel) */
.picks { padding: var(--section) 0; background: var(--paper); }
.picks[hidden] { display: none; }
.section-head .picks__kicker { margin: 0 auto 0.75rem; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-ink); }
.picks__body { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.picks__nav { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 12px; }
.picks__nav[hidden] { display: none; }
.picks__arrow { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--hairline); transition: border-color 0.2s ease, opacity 0.2s ease; }
.picks__arrow svg { width: 18px; height: 18px; }
.picks__arrow:hover:not(:disabled) { border-color: var(--gold-ink); color: var(--gold-ink); }
.picks__arrow:disabled { opacity: 0.35; cursor: default; }
.picks__rail {
  display: grid; grid-auto-flow: column; grid-template-columns: none;
  grid-auto-columns: calc((100% - 6px) / 4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.picks__rail::-webkit-scrollbar { display: none; }
.picks__rail > * { scroll-snap-align: start; }
@media (max-width: 1023px) { .picks__rail { grid-auto-columns: calc((100% - 4px) / 3); } }
@media (max-width: 767px) {
  .picks__body { padding: 0; }
  .picks__nav { display: none; }
  .picks__rail { grid-auto-columns: 64%; gap: 10px; scroll-padding: 0 var(--gutter); padding: 0 var(--gutter) 4px; }
}

/* ---------- 23. Ayudar a decidir (plan Premium) ---------- */
/* Quiz, comparador, combos y similares en la ficha. Diseño tomado de
   demo-premium.css (renderQuiz, renderCompare, similarTo). */

/* Ventana para el quiz y el comparador (pantalla completa en celular). */
html.has-modal, html.has-modal body { overflow: hidden; }
.jfm { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 24px; }
.jfm[hidden] { display: none; }
.jfm__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); opacity: 0; transition: opacity 0.3s var(--ease); }
.jfm__box {
  position: relative; display: flex; flex-direction: column;
  width: min(980px, 100%); max-height: min(880px, calc(100vh - 48px)); max-height: min(880px, calc(100dvh - 48px));
  background: var(--paper); border-top: 2px solid var(--gold);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateY(14px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.jfm__box:focus { outline: none; }
.jfm__box--compare { width: min(1100px, 100%); }
.jfm.is-open .jfm__backdrop { opacity: 1; }
.jfm.is-open .jfm__box { opacity: 1; transform: none; }
.jfm__close { position: absolute; right: 6px; top: 6px; z-index: 6; width: 44px; height: 44px; display: grid; place-items: center; background: var(--paper); }
.jfm__close svg { width: 20px; height: 20px; }
.jfm__close:hover { color: var(--gold-ink); }
.jfm__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 52px); }
@media (max-width: 767px) {
  .jfm { padding: 0; }
  /* Franja de arriba solo para la X: lo fijo del comparador queda debajo. */
  .jfm__box, .jfm__box--compare { position: absolute; inset: 0; width: auto; max-height: none; padding-top: 52px; border-top: 0; box-shadow: none; }
  .jfm__close { top: 4px; right: 4px; }
  .jfm__body { padding: 8px 16px calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); }
}

/* Hero: botón destacado del quiz */
.hero__quiz {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: 1.5rem; padding: 12px 26px; color: var(--paper);
  border: 1px solid var(--gold); background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  overflow: hidden; transition: background-color 0.25s ease, color 0.25s ease;
}
.hero__quiz::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(241, 219, 131, 0.35), transparent);
  animation: quiz-shine 3.6s var(--ease) infinite; pointer-events: none;
}
.hero__quiz-k { font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); }
.hero__quiz-t { font-size: var(--fs-body); font-weight: 500; letter-spacing: 0.06em; }
.hero__quiz:hover { background: var(--gold); color: var(--ink); }
.hero__quiz:hover .hero__quiz-k { color: var(--ink); }
.hero__quiz:focus-visible { outline: 1px solid var(--paper); outline-offset: 3px; }
@keyframes quiz-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .hero__quiz::before { display: none; } }
@media (max-width: 767px) { .hero__quiz { margin-top: 1.25rem; padding: 10px 18px; } }

/* Catálogo: botón que abre el quiz */
.page-head__quiz { margin-top: 1rem; }
.quiz-cta { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 10px 16px; border: 1px solid var(--gold-ink); font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--ink); transition: background-color 0.2s ease, color 0.2s ease; }
.quiz-cta b { font-weight: 500; color: var(--gold-ink); }
.quiz-cta:hover { background: var(--ink); color: var(--paper); }
.quiz-cta:hover b { color: var(--gold); }

/* Quiz: preguntas */
.quiz { max-width: 760px; margin: 0 auto; text-align: center; }
.quiz__kicker { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-ink); }
.quiz__bar { height: 2px; max-width: 240px; margin: 14px auto 0; background: var(--hairline); }
.quiz__bar span { display: block; width: 0; height: 100%; background: var(--gold); transition: width 0.4s var(--ease); }
.quiz__q { margin-top: 1.25rem; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 500; letter-spacing: 0.01em; line-height: 1.15; }
.quiz__sub { margin-top: 0.5rem; color: var(--graphite); font-size: var(--fs-body); }
.quiz__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 2rem; }
.quiz__opts--5 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.quiz__opt { min-height: 84px; padding: 16px 14px; border: 1px solid var(--hairline); background: var(--paper); text-align: center; transition: border-color 0.2s ease, background-color 0.2s ease; }
.quiz__opt strong { display: block; font-weight: 500; font-size: var(--fs-body); letter-spacing: 0.04em; }
.quiz__opt small { display: block; margin-top: 4px; color: var(--graphite); font-size: var(--fs-label); }
.quiz__opt:hover { border-color: var(--gold-ink); background: #fbf7ef; }
.quiz__opt:focus-visible { outline: 1px solid var(--gold-ink); outline-offset: 2px; }
.quiz__opt[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.quiz__opt[aria-pressed="true"] small { color: var(--gold); }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; margin-top: 1.75rem; }
.quiz__back { padding: 10px 0; font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--graphite); }
.quiz__back:hover { color: var(--ink); }
.quiz--loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 280px; color: var(--graphite); }
.quiz__spin { width: 38px; height: 38px; border: 2px solid var(--hairline); border-top-color: var(--gold); border-radius: 50%; animation: quiz-spin 0.9s linear infinite; }
@keyframes quiz-spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) {
  .quiz__opts, .quiz__opts--5 { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 1.5rem; }
  .quiz__opts--5 > :last-child { grid-column: 1 / -1; }
  .quiz__opt { min-height: 74px; padding: 12px 10px; }
}

/* Quiz: resultado */
.quiz--result { max-width: none; }
.quiz-best { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: 2rem; padding: clamp(16px, 2.4vw, 28px); border: 1px solid var(--gold-soft); background: #fdfaf4; text-align: left; }
.quiz-best__media { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--stone); }
.quiz-best__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; }
.quiz-best__media svg { position: absolute; left: 50%; top: 50%; width: 44%; height: auto; transform: translate(-50%, -50%); }
.quiz-best__match { display: inline-flex; align-items: baseline; gap: 6px; margin-bottom: 14px; padding: 6px 12px; background: var(--ink); color: var(--paper); font-size: var(--fs-label); letter-spacing: 0.06em; }
.quiz-best__match b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--gold); }
.quiz-best__name { margin-top: 4px; font-family: var(--font-display); font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 500; line-height: 1.1; }
.quiz-best__meta { margin-top: 6px; color: var(--graphite); font-size: var(--fs-label); letter-spacing: 0.04em; }
.quiz-best__why { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.quiz-best__why li { padding: 4px 10px; border: 1px solid var(--gold-soft); background: var(--paper); font-size: var(--fs-label); color: var(--gold-ink); }
.quiz-best__price { margin-top: 16px; font-size: var(--fs-lead); }
.quiz-best__actions { display: flex; gap: 8px; margin-top: 16px; }
.quiz-best__actions .btn { flex: 1; }
.quiz-best__fav { flex: none; width: 52px; display: grid; place-items: center; border: 1px solid var(--hairline); }
.quiz-best__fav svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.2; }
.quiz-best__fav[aria-pressed="true"] svg { fill: var(--gold); stroke: var(--gold-ink); }
.quiz-best .cmp-check { margin-top: 12px; }
.quiz__subhead { margin: clamp(32px, 4vw, 48px) 0 16px; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; }
.quiz__grid { text-align: left; }
.quiz__grid .tile__info { padding-bottom: 18px; }
.quiz__more { margin-top: 18px; }
.quiz__more .btn[hidden] { display: none; }
.quiz-treat { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center; margin-top: clamp(28px, 3vw, 40px); padding: 14px; background: var(--ink); color: var(--paper); text-align: left; }
.quiz-treat__media { position: relative; display: block; aspect-ratio: 1; background: var(--stone); }
.quiz-treat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.quiz-treat__media svg { position: absolute; left: 50%; top: 50%; height: 80%; transform: translate(-50%, -50%); }
.quiz-treat .quiz__kicker { color: var(--gold); }
.quiz-treat__name { margin-top: 4px; font-size: var(--fs-lead); }
.quiz-treat__name small { display: block; font-size: 0.625rem; letter-spacing: var(--track-label); text-transform: uppercase; color: #b4afa6; }
.quiz-treat__txt { margin-top: 2px; font-size: var(--fs-label); color: #b4afa6; }
.quiz-treat__price { margin-top: 4px; }
.quiz-treat .price-now { color: var(--paper); }
.quiz-treat .price-was { color: #9d978c; }
.quiz-treat .btn--outline { color: var(--paper); border-color: var(--paper); }
.quiz-treat .btn--outline:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.quiz__end { display: flex; justify-content: center; align-items: center; gap: 20px 28px; flex-wrap: wrap; margin-top: clamp(28px, 3vw, 40px); }
@media (max-width: 767px) {
  .quiz-best { grid-template-columns: 1fr; margin-top: 1.5rem; padding: 12px; }
  .quiz-best__media { aspect-ratio: 1; }
  .quiz-treat { grid-template-columns: 72px 1fr; }
  .quiz-treat .btn { grid-column: 1 / -1; }
}

/* Casilla "Comparar" (tarjeta, ficha y quiz) */
.cmp-check { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 7px; min-height: 32px; font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--graphite); cursor: pointer; }
.cmp-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.cmp-check:hover, .cmp-check:has(input:checked) { color: var(--ink); }
.cmp-check input:focus-visible { outline: 1px solid var(--gold-ink); outline-offset: 2px; }
.tile__cmp { margin-top: 6px; }
.promo-home .cmp-check, .promo-home .cmp-check:has(input:checked) { color: #b4afa6; }
.promo-home .cmp-check input { accent-color: var(--gold); }
.cmp-check--pdp { margin-top: 12px; }
@media (max-width: 767px) { .tile__cmp { margin-top: 4px; font-size: var(--fs-micro); } }

/* Barra flotante del comparador */
.cmpbar {
  position: fixed; left: 20px; bottom: 20px; z-index: 44;
  display: flex; align-items: center; gap: 16px;
  max-width: calc(100vw - 112px); padding: 10px 12px 10px 10px;
  background: var(--paper); border: 1px solid var(--hairline); border-top: 2px solid var(--gold);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
  animation: cmpbar-in 0.3s var(--ease);
}
@keyframes cmpbar-in { from { opacity: 0; transform: translateY(12px); } }
html.has-modal .cmpbar { display: none; }
.cmpbar__items { display: flex; gap: 8px; min-width: 0; }
.cmpbar__item { position: relative; display: flex; align-items: center; gap: 8px; width: 170px; min-width: 0; }
.cmpbar__img { position: relative; flex: none; width: 44px; height: 52px; display: grid; place-items: center; background: var(--stone); color: var(--graphite); font-size: 1.1rem; }
.cmpbar__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.cmpbar__item--empty { width: 44px; }
.cmpbar__item--empty .cmpbar__img { background: transparent; border: 1px dashed var(--hairline); }
.cmpbar__name { min-width: 0; font-size: var(--fs-label); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cmpbar__name small { display: block; font-size: 0.5625rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmpbar__remove { position: absolute; left: 30px; top: -6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 14px; line-height: 1; }
.cmpbar__remove:hover { background: var(--gold-ink); }
.cmpbar__actions { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.cmpbar__actions .btn { min-height: 44px; padding: 0 18px; white-space: nowrap; }
.cmpbar__actions .btn:disabled { opacity: 0.5; cursor: default; }
.cmpbar__clear { font-size: 0.625rem; letter-spacing: 0.06em; color: var(--graphite); text-decoration: underline; text-underline-offset: 2px; }
.cmpbar__clear:hover { color: var(--ink); }
html.has-cmpbar .wa-float { bottom: 96px; }
@media (max-width: 1023px) { .cmpbar__item { width: 130px; } }
@media (max-width: 767px) {
  .cmpbar { left: 0; right: 0; bottom: 0; max-width: none; gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-left: 0; border-right: 0; justify-content: space-between; }
  .cmpbar__item, .cmpbar__item--empty { width: 40px; }
  .cmpbar__img { width: 40px; height: 46px; }
  .cmpbar__name { display: none; }
  .cmpbar__remove { left: auto; right: -6px; }
  .cmpbar__actions { flex-direction: row; gap: 10px; }
  .cmpbar__actions .btn { min-height: 42px; padding: 0 14px; font-size: var(--fs-micro); }
  html.has-cmpbar .wa-float { bottom: 84px; }
  /* Ficha: encima de la barra fija de compra cuando aparece. */
  body:has(.buybar.is-visible) .cmpbar { bottom: calc(64px + env(safe-area-inset-bottom)); }
  html.has-cmpbar body:has(.buybar.is-visible) .wa-float { bottom: 148px; }
}

/* Comparador (escritorio: columnas; celular: perfumes arriba fijos y filas alineadas) */
.cmp { text-align: center; }
.cmp__title { margin-top: 0.75rem; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 500; }
.cmp__sub { margin-top: 0.4rem; color: var(--graphite); font-size: var(--fs-label); }
.cmp__cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 1px; margin-top: 1.75rem; background: var(--hairline); border: 1px solid var(--hairline); text-align: left; }
.cmp__col { display: flex; flex-direction: column; padding: 16px 16px 20px; background: var(--paper); }
.cmp__tools { display: flex; gap: 6px; }
.cmp__swap { flex: 1; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--hairline); background: var(--paper); font: inherit; font-size: var(--fs-label); }
.cmp__remove { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--hairline); font-size: 18px; line-height: 1; }
.cmp__remove:hover { border-color: var(--ink); }
.cmp__media { position: relative; display: block; margin-top: 12px; aspect-ratio: 1; background: var(--stone); }
.cmp__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.cmp__media svg, .cmpm__img svg { position: absolute; left: 50%; top: 50%; height: 80%; transform: translate(-50%, -50%); }
.cmp__col .tile__brand { margin-top: 14px; }
.cmp__name { margin-top: 4px; font-size: var(--fs-lead); font-weight: 400; }
.cmp__col dl { margin: 14px 0 18px; }
.cmp__col dl > div { display: grid; grid-template-columns: 104px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hairline); font-size: var(--fs-label); }
.cmp__col dt { color: var(--graphite); letter-spacing: 0.04em; }
.cmp__col dd { margin: 0; }
.cmp__col .btn { margin-top: auto; }
.cmp__price { font-size: var(--fs-body); }
.cmp__best { display: inline-block; margin-left: 8px; padding: 2px 6px; font-style: normal; font-size: 0.625rem; font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); background: var(--gold); vertical-align: middle; }
.cmp__notes { display: flex; flex-wrap: wrap; gap: 4px; }
.cmp__notes span { padding: 3px 8px; border: 1px solid var(--hairline); font-size: 0.6875rem; }
.cmp__notes span.is-shared { border-color: var(--gold); background: #faf3e4; color: var(--gold-ink); font-weight: 500; }
.cmpm { display: none; }
@media (max-width: 767px) {
  .cmp__cols { display: none; }
  .cmpm { display: block; margin: 1.25rem -16px 0; }
  .cmpm__head, .cmpm__vals { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
  .cmpm__head { position: sticky; top: -8px; z-index: 5; gap: 6px; padding: 10px 12px 12px; background: var(--paper); border-bottom: 1px solid var(--gold-soft); box-shadow: 0 10px 18px -14px rgba(0, 0, 0, 0.35); }
  .cmpm__pick { position: relative; min-width: 0; text-align: center; }
  .cmpm__pick .cmp__remove { position: absolute; right: 0; top: 0; z-index: 1; width: 28px; height: 28px; border: 0; background: rgba(255, 255, 255, 0.85); font-size: 16px; }
  .cmpm__img { position: relative; display: block; aspect-ratio: 1; background: var(--stone); }
  .cmpm__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
  .cmpm__brand { margin-top: 6px; font-size: 0.5625rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cmpm__name { margin-top: 2px; font-size: var(--fs-label); line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cmpm__swap { position: relative; display: block; margin-top: 6px; padding: 5px 0; border: 1px solid var(--hairline); font-size: 0.625rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--graphite); }
  .cmpm__swap::after { content: " ▾"; }
  .cmpm__swap select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; }
  .cmpm__row { padding: 12px; border-bottom: 1px solid var(--hairline); }
  .cmpm__label { margin-bottom: 8px; font-size: 0.625rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--graphite); text-align: center; }
  .cmpm__vals { gap: 6px; }
  .cmpm__vals > div { min-width: 0; text-align: center; font-size: var(--fs-label); line-height: 1.35; overflow-wrap: anywhere; }
  .cmpm__vals .price-was { display: block; margin: 0; font-size: 0.6875rem; }
  .cmpm__vals .cmp__best { display: block; width: fit-content; margin: 4px auto 0; }
  .cmpm__vals .cmp__notes { flex-direction: column; align-items: center; gap: 4px; }
  .cmpm__vals .cmp__notes span { font-size: 0.625rem; padding: 2px 6px; }
  .cmpm__add { padding: 12px 12px 4px; gap: 6px; }
  .cmpm__add .btn { min-height: 40px; padding: 0 4px; font-size: 0.625rem; }
}

/* Ficha: combos ("Llévalo con X y ahorra $Y") y "También te puede gustar" */
.pdp-combos { background: var(--ink); color: var(--paper); padding: var(--section) 0; }
.pdp-combos__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.pdp-combos .section-head h2 { color: var(--paper); }
.pdp-combos .section-head .picks__kicker { color: var(--gold); }
.combo__pitch { margin-top: 8px; font-size: var(--fs-lead); color: #e9e2d6; }
.combo__pitch strong { font-weight: 500; color: var(--gold); }
.pdp-combos .combos { grid-template-columns: repeat(auto-fit, minmax(300px, 520px)); justify-content: center; }
.pdp-similar { border-top: 1px solid var(--hairline); }
@media (max-width: 767px) { .pdp-combos .combos { grid-template-columns: 1fr; } }

/* ---------- 24. Scroll de la marca (negro y dorado) ---------- */
/* Pulgar con el dorado del logo (#F1DB83 / #E59A42 / #894720), sin radios.
   La página va sobre canal negro; las cajas claras (ventanas, sugerencias,
   menú, resumen) sobre piedra. Los carruseles siguen sin barra: su propia
   regla (.picks__rail, .products-grid--home) gana. Chrome, Edge y Safari usan
   ::-webkit-scrollbar (permite el degradado); Firefox, scrollbar-color. */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--stone); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #f1db83, #e59a42 45%, #894720); }
::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(90deg, #f1db83, #e59a42 45%, #894720); }
::-webkit-scrollbar-thumb:hover { background: #e59a42; }
::-webkit-scrollbar-corner { background: transparent; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #0b0b0b; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { border: 2px solid #0b0b0b; }
.suggest--dark::-webkit-scrollbar-track { background: #000; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--gold) var(--stone); }
  html { scrollbar-width: auto; scrollbar-color: var(--gold) #0b0b0b; }
  .suggest--dark { scrollbar-color: var(--gold) #000; }
}

/* ---------- 25. Modo regalo en el checkout (plan Premium) ---------- */
/* Base visual de la demo (renderGift): tarjeta negra con marco dorado. */
.gift__toggle { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid var(--hairline); cursor: pointer; transition: border-color 0.2s; }
.gift__toggle:hover { border-color: #b9b6b0; }
.gift__toggle:has(input:checked) { border-color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold-ink); }
.gift__toggle input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold-ink); }
.gift__toggle strong { display: block; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; }
.gift__toggle small { display: block; margin-top: 0.3rem; font-size: var(--fs-label); color: var(--graphite); line-height: 1.5; }
.gift__body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 1.5rem; align-items: start; }
.gift__body[hidden] { display: none; }
.gift__step { margin: 0 0 0.9rem; font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-ink); }
.gift__form .gift__step:not(:first-child) { margin-top: 0.5rem; }
.gift__step .pay-tag, .gift__price { margin-left: 0.4rem; padding: 0.1rem 0.45rem; font-size: var(--fs-micro); letter-spacing: 0.04em; text-transform: none; color: var(--ink); border: 1px solid var(--hairline); }
.gift__price:empty { display: none; }
.gift__form .field textarea { min-height: 96px; }
.gift__wrap { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.gift__wrap small { font-size: var(--fs-label); color: var(--graphite); }
.gift__check { margin-bottom: 0.8rem; color: var(--ink); }
.gift__check input { accent-color: var(--gold-ink); }
.gift [data-gift-recipient] { margin-top: 0.6rem; }
.gift__preview { position: sticky; top: 90px; }
.giftcard { position: relative; padding: 32px 26px 28px; background: radial-gradient(80% 60% at 50% 0%, rgba(200, 147, 63, 0.22), rgba(0, 0, 0, 0) 70%), var(--ink); color: var(--paper); text-align: center; border: 1px solid var(--gold-soft); outline: 1px solid var(--gold-soft); outline-offset: -10px; }
.giftcard__badge { display: block; width: 56px; height: auto; margin: 0 auto 12px; border-radius: 50%; }
.giftcard__to { font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); overflow-wrap: anywhere; }
.giftcard__msg { margin: 14px auto 0; max-width: 22rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.3; overflow-wrap: anywhere; }
.giftcard__from { margin-top: 14px; font-size: var(--fs-label); color: #c9c4ba; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .gift__body { grid-template-columns: 1fr; }
  .gift__preview { position: static; }
}

/* ---------- 26. Descripción comercial en la ficha (F1) ---------- */
/* Entrada en serif cursiva, tres filas con rótulo dorado y cierre con la voz de John. */
.pdesc { color: var(--ink); }
.pdesc__lead { margin: 0.25rem 0 1.4rem; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.3; color: var(--ink); }
.pdesc__lead::after { content: ""; display: block; width: 44px; height: 1px; margin-top: 1.1rem; background: linear-gradient(90deg, #894720, #e59a42, #f1db83); }
.pdesc > p:not([class]) { color: var(--graphite); }
.pdesc__rows { margin: 0; }
.pdesc__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--hairline); }
.pdesc__row:last-child { border-bottom: 1px solid var(--hairline); }
.pdesc__row dt { padding-top: 0.2rem; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-ink); }
.pdesc__row dd { margin: 0; color: #2f2f2f; font-weight: 400; }
.pdesc__close { margin-top: 1.3rem; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.4; color: var(--ink); }
.pdesc__mark { color: var(--gold-ink); font-style: italic; }
@media (max-width: 560px) {
  .pdesc__row { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* ---------- 27. Recomendaciones (F3) ---------- */
/* "Para ti", "Vistos recientemente" y "Complétalo con": mismos carruseles
   (.picks) y tarjeta de combo (.combo) que la Selección y los combos. */
.picks:not([hidden]) + .reco--home { border-top: 1px solid var(--hairline); }
.reco__clear {
  margin-top: 0.9rem; padding: 4px 0;
  font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--graphite); border-bottom: 1px solid var(--hairline);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.reco__clear:hover, .reco__clear:focus-visible { color: var(--gold-ink); border-color: var(--gold-ink); }
.combo__price .combo__note { color: #c9c4ba; }
/* Carrito vacío: el carrusel va debajo del mensaje, a lo ancho de la columna. */
.cart-seen .picks { padding: 48px 0 8px; border-top: 1px solid var(--hairline); }
.cart-seen .picks__body { padding: 0; }
.cart-seen .section-head h2 { font-size: var(--fs-h3); }
.cart-seen .picks__rail { grid-auto-columns: calc((100% - 4px) / 3); }
@media (max-width: 767px) {
  .cart-seen .picks__rail { grid-auto-columns: 64%; padding: 0 0 4px; scroll-padding: 0; }
}

/* ---------- 28. F6 · Joya con aire (C2) ---------- */
/* Muestra aprobada: /demo-diseno.html?d=c2. Se aplica por zonas: 28.1 base y
   tarjetas (todas las páginas), 28.2 Home. Solo estilos: textos, logo, colores
   y tipografías de la marca no cambian. Se anima solo transform y opacity. */

/* 28.1 Botones en píldora con el degradado real del logo */
.btn {
  border-radius: var(--radius-pill);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease),
    transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-position var(--dur-slow) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn--gold, .btn--gold:hover {
  background: var(--gold-gradient); background-size: 200% 100%;
  border-color: transparent; color: #1d1206;
}
@media (hover: hover) {
  .btn--gold:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(229, 154, 66, 0.6); }
}
.picks__arrow { border-radius: 50%; }

/* 28.1 Tarjeta de producto: tarjeta blanca redondeada, escenario con halo
   dorado y "+" redondo siempre a mano en celular. */
.products-grid { gap: 20px 16px; }
.products-grid:not(.picks__rail) { padding: 0 var(--gutter); }
.products-grid[data-catalog-root] { padding-top: clamp(16px, 2.4vw, 32px); }
.tile {
  padding: 8px; border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.tile__stage, .tile__link:hover .tile__stage { border-radius: var(--radius-sm); background: var(--glow), var(--stone); }
.tile__stage img { transition: transform var(--dur-slow) var(--ease-out); }
.tile__info { padding: 12px 8px 10px; }
.tile__tag { padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.88); left: 10px; top: 10px; }
.tile__tag--offer { background: var(--ink); color: var(--gold); }
.tile__tag--second { top: 42px; }
.tile__fav { top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.82); transition: transform var(--dur-fast) var(--ease-spring); }
.tile__fav[aria-pressed="true"] svg { animation: jf-pop 420ms var(--ease-spring); }
.tile__quick { left: 14px; right: 14px; bottom: 14px; border-radius: var(--radius-pill); }
.tile__quick:hover { background: var(--gold-gradient); color: #1d1206; }
@media (hover: hover) {
  .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  .tile:hover .tile__stage img { transform: scale(1.06); }
  .tile__fav:hover { transform: scale(1.12); }
}
@media (hover: none) {
  .tile__quick {
    left: auto; right: 8px; bottom: 8px; width: 44px; min-height: 44px; padding: 0;
    font-size: 0; letter-spacing: 0; border-radius: 50%;
    background: var(--gold-gradient); color: #1d1206;
    box-shadow: 0 6px 16px -6px rgba(137, 71, 32, 0.6);
  }
  .tile__quick::before { content: "+"; font-size: 1.5rem; font-weight: 300; line-height: 1; }
  .tile__quick:disabled { background: var(--gold-gradient); }
  .tile__quick:disabled::before { content: "✓"; font-size: 1.1rem; }
  .tile__media .tile__dots { bottom: 14px; }
}
@media (max-width: 767px) {
  .products-grid { gap: 10px; }
  .tile { padding: 6px; border-radius: 14px; }
  .tile__info { padding: 10px 6px 8px; }
  .tile__tag { left: 8px; top: 8px; font-size: 0.625rem; padding: 3px 8px; }
  .tile__tag--second { top: 36px; }
  .tile__fav { top: 6px; right: 6px; }
}
@keyframes jf-pop { 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Carruseles: el gap entra en el ancho de cada columna y queda aire abajo
   para la sombra de la tarjeta al subir. */
.picks__rail { gap: 16px; grid-auto-columns: calc((100% - 48px) / 4); padding-bottom: 28px; margin-bottom: -20px; }
@media (max-width: 1023px) { .picks__rail { grid-auto-columns: calc((100% - 32px) / 3); } }
@media (max-width: 767px) {
  .picks__rail, .products-grid--home { grid-auto-columns: 70%; gap: 10px; padding-top: 4px; padding-bottom: 20px; margin-bottom: -16px; }
}
.cart-seen .picks__rail { grid-auto-columns: calc((100% - 32px) / 3); margin-bottom: 0; }
@media (max-width: 767px) { .cart-seen .picks__rail { grid-auto-columns: 70%; margin-bottom: 0; } }

/* Tarjeta sobre negro (Selección, "Para ti" y promos del Home). */
.hero ~ .picks .tile, .promo-home .tile { background: var(--night-card); box-shadow: var(--shadow-night); }
.hero ~ .picks .tile__stage, .promo-home .tile__stage { background: var(--glow), linear-gradient(180deg, #171412, #0c0b0a); }
.hero ~ .picks .tile__stage img, .promo-home .tile__stage img { mix-blend-mode: normal; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55)); }
.hero ~ .picks .tile__name a, .hero ~ .picks .price-now, .promo-home .tile__name a, .promo-home .price-now { color: var(--night-text); }
.hero ~ .picks .tile__brand, .promo-home .tile__brand { color: var(--gold); }
.hero ~ .picks .price-was, .promo-home .price-was, .hero ~ .picks .tile__price { color: var(--night-muted); }
.hero ~ .picks .tile__fav, .promo-home .tile__fav { background: rgba(10, 9, 8, 0.6); color: var(--night-text); }
.hero ~ .picks .tile__tag, .promo-home .tile__tag { background: rgba(244, 238, 229, 0.12); color: var(--night-text); }
.hero ~ .picks .tile__tag--offer, .promo-home .tile__tag--offer { background: var(--gold-gradient); color: #160e04; }
.hero ~ .picks .tile__quick:not(:hover), .promo-home .tile__quick:not(:hover) { background: rgba(244, 238, 229, 0.12); color: var(--night-text); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (hover: none) {
  .hero ~ .picks .tile__quick:not(:hover), .promo-home .tile__quick:not(:hover) { background: var(--gold-gradient); color: #1d1206; }
}
@media (hover: hover) {
  .hero ~ .picks .tile:hover, .promo-home .tile:hover { box-shadow: var(--shadow-night-lift); }
}

/* 28.2 Home ------------------------------------------------------------- */
/* Encabezados: serif en cursiva y el kicker entre dos líneas doradas. */
.hero ~ section .section-head h2 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2.1rem, 4.4vw, 3.5rem); letter-spacing: 0; text-transform: none; line-height: 1.02; }
.hero ~ section .section-head h2::after { width: 56px; height: 2px; border-radius: 2px; margin-top: 1.1rem; background: var(--gold-gradient); }
.hero ~ section .section-head .picks__kicker { display: flex; align-items: center; justify-content: center; gap: 14px; }
.hero ~ section .section-head .picks__kicker::before, .hero ~ section .section-head .picks__kicker::after { content: ""; width: 32px; height: 1px; background: var(--gold-gradient); }

/* Hero: acento con brillo dorado; en celular, botones a lo ancho para el pulgar. */
.hero__title em { background: linear-gradient(100deg, #b5762f 0%, #e59a42 30%, #f1db83 50%, #e59a42 70%, #b5762f 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.08em; text-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .hero__title em { animation: jf-shimmer 6s linear infinite; } }
@keyframes jf-shimmer { to { background-position: -200% 0; } }
.hero__quiz { border-radius: var(--radius-pill); border-color: rgba(229, 154, 66, 0.7); background: rgba(10, 9, 8, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 767px) {
  .hero__content { padding-bottom: 32px; }
  .hero__ctas { flex-direction: column; align-items: center; gap: 14px; }
  .hero__ctas .btn { min-height: 52px; min-width: 15rem; padding: 0 2rem; } /* angosto (pedido de Santiago), cómodo para el pulgar */
  .hero__ctas .link { align-self: center; }
  .hero__quiz { padding: 12px 22px; } /* no a lo ancho: el botón de WhatsApp queda a la derecha */
}

/* Secciones de ambiente: negro cálido con grano fino. */
.perks, .hero ~ .picks, .promo-home { background: var(--grain), var(--night); color: var(--night-text); }
.hero ~ .picks .section-head p:not(.picks__kicker), .hero ~ .picks .reco__clear { color: var(--night-muted); }
.hero ~ .picks .section-head .picks__kicker { color: var(--gold); }
.hero ~ .picks .picks__arrow { border-color: var(--night-line); color: var(--night-text); }
.hero ~ .picks .picks__arrow:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.hero ~ .picks .grid-swipe-hint { color: var(--night-muted); }
.picks:not([hidden]) + .reco--home { border-top-color: var(--night-line); }

/* Beneficios: siguen al hero en negro, con el ícono en un aro dorado. */
.perks { border-bottom: 1px solid var(--night-line); }
.perk svg { box-sizing: content-box; padding: 11px; border-radius: 50%; color: var(--gold); box-shadow: inset 0 0 0 1px rgba(229, 154, 66, 0.45); background: radial-gradient(circle, rgba(229, 154, 66, 0.14), transparent 70%); }
.perk p { color: var(--night-muted); }
@media (max-width: 767px) {
  .perks { padding: 28px 16px 32px; }
  .perk svg { width: 22px; height: 22px; padding: 10px; }
}

/* Promos: barra y cuenta regresiva redondeadas. */
.promo-home__bar { border-radius: var(--radius); border-left: 0; box-shadow: inset 3px 0 0 #e59a42, var(--shadow-night); background: radial-gradient(80% 140% at 0% 50%, rgba(229, 154, 66, 0.22), transparent 60%), #141110; }
.countdown span { border-radius: var(--radius-sm); background: var(--night); }
.promo-home .products-grid--home { padding-left: 0; padding-right: 0; }
.combos { gap: 12px; margin-top: 12px; }
.combo { border-radius: var(--radius); background: var(--night-card); box-shadow: var(--shadow-night); }
.combo__media { border-radius: var(--radius-sm); background: var(--glow), #1c1a17; }

/* Colección (árabe): sección clara en piedra para que las fotos se vean limpias. */
.hero ~ .section:not(.section--tight) { background: var(--stone); }

/* Categorías: tarjetas negras redondeadas sobre blanco, con halo y elevación. */
.cat-tiles { background: transparent; gap: 16px; padding: 0 var(--gutter) var(--section); }
.cat-tile { border-radius: var(--radius-lg); box-shadow: var(--shadow-night); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.cat-tile__media { background: var(--glow), var(--ink); }
@media (hover: hover) { .cat-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-night-lift); } }
.cat-tile__cta { border-bottom: 0; padding: 8px 16px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px rgba(229, 154, 66, 0.6); }
.cat-tile:hover .cat-tile__cta { background: var(--gold-gradient); color: #1d1206; box-shadow: none; }
@media (max-width: 767px) {
  .cat-tiles { gap: 10px; }
  .cat-tile { border-radius: var(--radius); }
}
/* Celular: la píldora no cabe en dos columnas; vuelve el subrayado dorado. */
@media (max-width: 600px) {
  .cat-tile__cta, .cat-tile:hover .cat-tile__cta { padding: 0 0 4px; border-radius: 0; background: none; color: inherit; box-shadow: inset 0 -1px 0 var(--gold); }
}

/* Casas: nombres en serif, más grandes y con el grano. */
.houses-band { background: var(--grain), var(--ink); }
.houses-band__item { font-family: var(--font-display); font-size: clamp(1.375rem, 2.6vw, 2.125rem); font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: #e9dcc0; transition: color var(--dur) var(--ease-out); }
.houses-band__item:hover { color: var(--gold); }
.houses-band__item::after { width: 5px; height: 5px; background: var(--gold-gradient); }

/* Asesoría: foto redondeada dentro de la sección clara. */
.split { background: var(--stone); gap: clamp(16px, 3vw, 40px); padding: clamp(16px, 3vw, 40px); }
.split__media { border-radius: var(--radius-lg); }
.split__body { background: transparent; }
@media (max-width: 899px) { .split { padding: 12px 12px 0; gap: 0; } .split__body { padding: 40px 12px 56px; } }

/* Franja de marca al final: halo, grano y cifras con el degradado. */
.brand-band { background: var(--glow), var(--grain), var(--ink); }
.brand-band__stats dd { background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* "Comparar" sobre las tarjetas negras del Home */
.hero ~ .picks .cmp-check, .hero ~ .picks .cmp-check:has(input:checked) { color: var(--night-muted); }
.hero ~ .picks .cmp-check input { accent-color: var(--gold); }

/* 28.3 Catálogo ---------------------------------------------------------
   Celular primero: el encabezado y los filtros caben en media pantalla
   (antes empujaban el primer perfume casi fuera de la vista). Pestañas y
   filtros en píldoras que se deslizan de lado. */
main:has([data-catalog-root]) .page-head { padding-bottom: clamp(24px, 3vw, 40px); }
main:has([data-catalog-root]) .page-head h1 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: 0; text-transform: none; line-height: 1; }
main:has([data-catalog-root]) .page-head h1::after { content: ""; display: block; width: 56px; height: 2px; margin: 1rem auto 0; border-radius: 2px; background: var(--gold-gradient); }
.quiz-cta { border-radius: var(--radius-pill); border-color: rgba(138, 90, 31, 0.55); padding: 10px 20px; background: radial-gradient(120% 140% at 50% 0%, rgba(229, 154, 66, 0.12), transparent 70%); }
.quiz-cta:hover { border-color: var(--ink); }

.filters { border-top: 0; }
.tab { padding: 0 16px; min-height: 40px; border-radius: var(--radius-pill); border-bottom: 0; transition: background-color var(--dur-fast), color var(--dur-fast); }
.tab:hover { background: var(--stone); }
.tab.is-active, .tab[aria-pressed="true"] { background: var(--ink); color: var(--gold); border-bottom: 0; }
.tabs { gap: 6px; }
.filters .select, .filters__inner--bar .select, .filters__fav { border-radius: var(--radius-pill); border-color: var(--hairline); padding-left: 1rem; }
.filters__fav { padding: 0 16px; }
.filters__search .input { border-radius: var(--radius-pill); padding-left: 40px; }
.filters__search > svg { left: 15px; }
.filters__inner--bar { border-top-color: transparent; }
.suggest { border-radius: var(--radius); border-top-width: 1px; overflow: hidden auto; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.25); }

@media (max-width: 899px) {
  .page-head__quiz { margin-top: 0.85rem; }
  .quiz-cta { display: inline-block; max-width: 22rem; padding: 9px 18px; font-size: var(--fs-micro); line-height: 1.5; text-wrap: balance; }
  .filters__inner { padding-top: 4px; padding-bottom: 8px; gap: 6px 12px; }
  /* Pestañas: fila que se desliza, de borde a borde. */
  .tabs {
    width: auto; flex: 1 1 100%; justify-content: flex-start; gap: 6px;
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; min-height: 38px; padding: 0 16px; border: 1px solid var(--hairline); }
  .tab.is-active, .tab[aria-pressed="true"] { border-color: var(--ink); }
  .filters__count { font-size: var(--fs-micro); letter-spacing: 0.06em; }
  /* Búsqueda arriba y los cinco filtros + favoritos en una fila que se desliza. */
  .filters__inner--bar { padding-top: 0; padding-bottom: 12px; gap: 10px; }
  .filters__search .input { height: 44px; }
  .filters__inner--bar .filters__selects {
    display: flex; flex-wrap: nowrap; gap: 8px; width: auto; flex: 1 1 100%;
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
  }
  .filters__inner--bar .filters__selects::-webkit-scrollbar { display: none; }
  .filters__inner--bar .filters__selects .select { flex: none; width: auto; min-width: 0; max-width: 11rem; text-overflow: ellipsis; height: 40px; padding: 0 2.25rem 0 0.95rem; background-position: right 0.85rem center; }
  .filters__inner--bar .filters__selects .select:last-child { grid-column: auto; }
  .filters__fav { flex: none; width: auto; height: 40px; }
  .filters__clear { padding: 4px 0; }
}

/* Paginado: círculos, el actual en negro y dorado. */
.pager__btn { border-radius: var(--radius-pill); transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.pager__btn:hover { border-color: var(--hairline); background: var(--stone); }
.pager__btn[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--gold); }

/* Barra del comparador: flota redondeada en escritorio. */
.cmpbar { border-radius: var(--radius); border: 0; box-shadow: inset 0 2px 0 #e59a42, 0 0 0 1px rgba(60, 35, 10, 0.08), 0 24px 48px -16px rgba(0, 0, 0, 0.3); }
.cmpbar__img { border-radius: var(--radius-sm); }
@media (max-width: 767px) { .cmpbar { border-radius: var(--radius) var(--radius) 0 0; } }

/* 28.4 Ficha de producto ----------------------------------------------
   La descripción comercial (.pdesc, F1) no se toca. Celular primero: foto en
   tarjeta con halo, nombre grande, compra en dorado y barra fija siempre a
   mano mientras el botón principal no está en pantalla. */
.pdp { border-bottom: 0; }
.pdp__gallery { background: var(--paper); padding: clamp(8px, 1.6vw, 24px); }
.pdp__hero { border-radius: var(--radius-lg); background: var(--glow), var(--stone); overflow: hidden; }
.pdp__hero img { transition: transform var(--dur-slow) var(--ease-out); }
@media (hover: hover) { .pdp__hero:hover img { transform: scale(1.04); } }
.pdp__thumbs { padding: 12px 0 4px; }
.pdp__thumb { border-radius: var(--radius-sm); background: var(--stone); overflow: hidden; }
.pdp__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 4vw, 3.5rem); line-height: 1; letter-spacing: 0; }
.pdp__price { font-size: 1.375rem; font-weight: 500; margin-top: 0.85rem; }
.pdp__price .price-now { font-weight: 500; }
.pdp__offer { display: inline-block; margin-top: 0.6rem; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--ink); color: var(--gold); }
.size-option { border-radius: var(--radius-pill); }
.size-option.is-selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pdp__actions [data-add-to-cart] { background: var(--gold-gradient); background-size: 200% 100%; border-color: transparent; color: #1d1206; min-height: 52px; }
@media (hover: hover) {
  .pdp__actions [data-add-to-cart]:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(229, 154, 66, 0.6); }
}
.pdp__actions .btn--outline { min-height: 48px; }
.trust { gap: 8px; padding: 0; border: 0; }
.trust li { padding: 12px; border-radius: var(--radius-sm); background: var(--stone); }

/* Notas como chips con el color de su familia (mismas palabras). */
.pdp__notes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.25rem; font-size: var(--fs-label); font-weight: 400; }
.pdp__notes li { --note: var(--gold); display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--note) 12%, #fff); color: color-mix(in srgb, var(--note) 62%, #000); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--note) 30%, transparent); }
.pdp__notes li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--note); }
.pdp__notes [data-note="gourmand"] { --note: #c27c3e; }
.pdp__notes [data-note="dulce"] { --note: #d47f9c; }
.pdp__notes [data-note="avainillado"], .pdp__notes [data-note="cremoso"] { --note: #cfa95a; }
.pdp__notes [data-note="chocolate"], .pdp__notes [data-note="cafe"] { --note: #6b4a33; }
.pdp__notes [data-note="caramelizado"], .pdp__notes [data-note="caramelo"] { --note: #c58a3a; }
.pdp__notes [data-note="citrico"] { --note: #b7a222; }
.pdp__notes [data-note="frutal"], .pdp__notes [data-note="afrutado"] { --note: #e0715a; }
.pdp__notes [data-note="tropical"] { --note: #e3a33b; }
.pdp__notes [data-note="almizclado"] { --note: #9a8bb0; }
.pdp__notes [data-note="floral"] { --note: #c9698f; }
.pdp__notes [data-note="empolvado"] { --note: #c18aa5; }
.pdp__notes [data-note="ambarado"] { --note: #d18a2c; }
.pdp__notes [data-note="especiado"], .pdp__notes [data-note="oriental"] { --note: #b5532f; }
.pdp__notes [data-note="ahumado"] { --note: #7a7470; }
.pdp__notes [data-note="amaderado"], .pdp__notes [data-note="cuero"], .pdp__notes [data-note="oud"] { --note: #8c5d3b; }
.pdp__notes [data-note="aromatico"], .pdp__notes [data-note="verde"], .pdp__notes [data-note="chipre"] { --note: #5d9a52; }
.pdp__notes [data-note="fresco"], .pdp__notes [data-note="acuatico"], .pdp__notes [data-note="aldehidico"] { --note: #3f8fb0; }

/* Pirámide olfativa: un recorrido en el tiempo sobre negro. Un hilo dorado
   baja de champaña (lo que se evapora) a cobre (lo que queda); en él, tres
   puntos que se van haciendo densos: anillo, punto y joya con brillo. Los
   números romanos, grandes y tenues, marcan el momento. */
.pyr {
  position: relative; overflow: hidden; margin-top: 1.75rem; max-width: 32rem;
  padding: 26px 22px 28px; border-radius: var(--radius-md, 14px);
  background: radial-gradient(90% 60% at 0% 100%, rgba(229, 154, 66, 0.16), transparent 70%), var(--grain), var(--night);
  color: var(--night-text);
}
.pyr__title { display: flex; align-items: center; gap: 12px; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); }
.pyr__title::before { content: ""; width: 24px; height: 1px; background: var(--gold-gradient); }
.pyr__lede { margin: 6px 0 24px; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.625rem; line-height: 1.15; color: var(--night-text); }
.pyr__levels { position: relative; list-style: none; margin: 0; padding: 0 0 0 30px; }
.pyr__levels::before {
  content: ""; position: absolute; left: 6px; top: 7px; bottom: 10px; width: 1px;
  background: linear-gradient(180deg, rgba(241, 219, 131, 0.15), #f1db83 12%, #e59a42 55%, #894720);
  transform-origin: top;
}
.pyr__lvl { position: relative; padding: 0 3.25rem 26px 0; }
.pyr__lvl:last-child { padding-bottom: 0; }
.pyr__lvl::before { content: ""; position: absolute; top: 4px; left: -24px; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; }
.pyr__lvl--0::before { left: -23px; background: var(--night); box-shadow: inset 0 0 0 1px #f1db83; }
.pyr__lvl--1::before { left: -24px; width: 9px; height: 9px; top: 3px; background: #e59a42; box-shadow: 0 0 0 4px var(--night); }
.pyr__lvl--2::before { left: -25px; width: 13px; height: 13px; top: 1px; background: var(--gold-gradient); box-shadow: 0 0 0 4px var(--night), 0 0 22px 2px rgba(229, 154, 66, 0.55); }
.pyr__num {
  position: absolute; top: -10px; right: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 3.25rem; line-height: 1; letter-spacing: 0.02em; color: transparent;
  -webkit-text-stroke: 1px rgba(200, 147, 63, 0.38);
}
.pyr__name { margin: 0 0 8px; font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); line-height: 1.3; }
.pyr__name small { margin-left: 4px; font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--night-muted); }
.pyr__notes { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; list-style: none; margin: 0; padding: 0; }
.pyr__notes li { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.25rem; line-height: 1.3; color: var(--night-text); }
/* El punto separador va pegado a la nota anterior: si la línea corta, queda al
   final y nunca abre el renglón siguiente. */
.pyr__notes li:not(:last-child)::after { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 9px 0 10px; border-radius: 50%; background: var(--gold); vertical-align: middle; opacity: 0.8; }
/* El hilo se dibuja hacia abajo y cada momento aparece a su tiempo. */
.pyr.is-armed .pyr__levels::before { transform: scaleY(0); transition: transform 1.3s var(--ease-out); }
.pyr.is-armed .pyr__lvl { opacity: 0; transform: translateY(10px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: calc(200ms + var(--i, 0) * 260ms); }
.pyr.is-armed.is-in .pyr__levels::before { transform: none; }
.pyr.is-armed.is-in .pyr__lvl { opacity: 1; transform: none; }
@media (max-width: 767px) {
  .pyr { margin-left: -4px; margin-right: -4px; padding: 24px 18px 26px; }
  .pyr__lede { font-size: 1.5rem; }
  .pyr__notes li { font-size: 1.1875rem; }
  .pyr__num { font-size: 2.75rem; }
  .pyr__lvl { padding-right: 2.5rem; }
}

/* Acordeones: el signo gira en un círculo. */
.acc summary::after { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hairline); transition: transform var(--dur) var(--ease-out); }
.acc[open] summary::after { transform: rotate(180deg); }

/* Barra fija de compra (celular): vidrio claro, borde redondo arriba y botón dorado. */
@media (max-width: 767px) {
  .pdp-crumbs { padding-bottom: 10px; }
  .pdp__gallery { padding: 0 8px; }
  .pdp__hero { aspect-ratio: 1 / 1; max-height: 56svh; border-radius: 20px; }
  .pdp__panel { padding: 22px var(--gutter) 40px; }
  .pdp__name { font-size: 2.6rem; margin-top: 0.4rem; }
  .pdp__size { margin-top: 1.25rem; }
  .pdp__actions { margin-top: 1.4rem; }
  .trust { grid-template-columns: 1fr 1fr; }
  .trust li { flex-direction: column; gap: 6px; }
  .buybar { border-radius: 20px 20px 0 0; border-top: 0; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -12px 32px -16px rgba(0, 0, 0, 0.25); }
  .buybar .btn { min-height: 48px; background: var(--gold-gradient); border-color: transparent; color: #1d1206; }
  .buybar__price { font-size: 1rem; }
}

/* Debajo de la ficha: combos en negro con grano; carruseles en claro. */
.pdp-combos { background: var(--grain), var(--night); }
.pdp-combos .section-head h2, .pdp-similar .section-head h2 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: 0; text-transform: none; line-height: 1.02; }
.pdp-combos .section-head h2::after, .pdp-similar .section-head h2::after { width: 56px; height: 2px; border-radius: 2px; background: var(--gold-gradient); }
.pdp-similar { background: var(--stone); border-top: 0; }

/* 28.5 Carrito, checkout y ventanas -------------------------------------
   Mismo lenguaje: tarjetas redondeadas, el paso principal en dorado
   (Finalizar / Confirmar), campos y opciones con radio suave. */
main:has(.cart) .page-head h1, main:has(.checkout) .page-head h1 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2.4rem, 5vw, 3.75rem); letter-spacing: 0; text-transform: none; line-height: 1; }
@media (max-width: 767px) {
  main:has(.cart) .page-head, main:has(.checkout) .page-head { padding-top: calc(var(--header-h) + 28px); padding-bottom: 20px; }
}

/* Botón principal de cada paso en dorado. */
[data-checkout-btn], .checkout__form button[type="submit"], .cart-drawer__foot .btn:not(.btn--outline) {
  background: var(--gold-gradient); background-size: 200% 100%; border-color: transparent; color: #1d1206; min-height: 52px;
}
@media (hover: hover) {
  [data-checkout-btn]:hover, .checkout__form button[type="submit"]:hover, .cart-drawer__foot .btn:not(.btn--outline):hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(229, 154, 66, 0.6); }
}

/* Campos: radio suave (las píldoras quedan para botones y filtros). */
.field input, .field select, .field textarea { border-radius: 12px; }
.qty { border-radius: var(--radius-pill); overflow: hidden; }
.coupon__row input { border-radius: var(--radius-pill); padding: 0 18px; }
.summary .coupon__row .btn { margin-top: 0; } /* .summary .btn lo bajaba 24 px */

/* Carrito: filas como tarjetas y resumen redondeado. */
.cart-list { border-top: 0; display: grid; gap: 10px; }
.cart-row { padding: 12px; border: 0; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-card); }
.cart-row__media { border-radius: var(--radius-sm); overflow: hidden; background: var(--glow), var(--stone); }
.cart-empty { border-top: 0; border-radius: var(--radius-lg); background: var(--stone); padding: 56px 24px; }
.summary { border-radius: var(--radius-lg); background: var(--stone); }
.summary-item__media { border-radius: 8px; overflow: hidden; }
.ship-progress__bar { height: 4px; border-radius: 4px; }
.ship-progress__bar span { background: var(--gold-gradient); border-radius: 4px; }
@media (max-width: 767px) {
  .summary { padding: 22px 18px; border-radius: 20px; }
  .cart-row { gap: 0 14px; }
}

/* Carrito lateral: cabecera negra con grano, filas suaves y pie en vidrio. */
.cart-drawer { border-left: 0; }
.cart-drawer__head { background: var(--grain), var(--night); }
.cd-row__media { border-radius: var(--radius-sm); background: var(--glow), var(--stone); }
.cart-drawer__foot { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--hairline); }
@media (min-width: 768px) {
  .cart-drawer { border-radius: var(--radius-lg) 0 0 var(--radius-lg); overflow: hidden; }
  .cart-drawer.is-open { box-shadow: -24px 0 60px -30px rgba(0, 0, 0, 0.5); }
}

/* Barrita "Añadido · Ver carrito": píldora flotante. */
.added-bar { border-radius: var(--radius-pill); border: 0; padding: 8px 8px 8px 20px; background: var(--grain), var(--night); box-shadow: 0 0 0 1px var(--night-line), 0 18px 40px -16px rgba(0, 0, 0, 0.55); }
.added-bar__link { border-radius: var(--radius-pill); background: var(--gold-gradient); color: #1d1206; }

/* Checkout: formas de pago como tarjetas con anillo dorado al elegir. */
.checkout__block { border-top-color: var(--hairline); }
.pay-method { border-radius: var(--radius); transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast); }
.pay-method.is-active { border-color: transparent; box-shadow: inset 0 0 0 1.5px #c8933f, 0 10px 24px -16px rgba(137, 71, 32, 0.5); background: color-mix(in srgb, var(--gold) 6%, #fff); }
.pay-method input { accent-color: var(--gold-ink); }
.pay-method strong .pay-tag { border-radius: var(--radius-pill); padding: 0.1rem 0.55rem; }
.pay-note { border-left: 0; border-radius: 12px; box-shadow: inset 3px 0 0 #e59a42; }
.gift__toggle { border-radius: var(--radius); }
.gift__toggle:has(input:checked) { border-color: transparent; box-shadow: inset 0 0 0 1.5px #c8933f; }
.gift__step .pay-tag, .gift__price { border-radius: var(--radius-pill); }
.giftcard { border-radius: var(--radius-lg); outline: 0; box-shadow: inset 0 0 0 9px var(--ink), inset 0 0 0 10px var(--gold-soft); background: var(--glow), var(--grain), var(--ink); }
.order-confirmation h2 { font-family: var(--font-display); font-style: italic; font-weight: 500; letter-spacing: 0; text-transform: none; }
.order-confirmation .order-code { border-radius: var(--radius-pill); border-color: #c8933f; }

/* Ventanas (quiz y comparador): caja redondeada que sube; en celular, hoja completa. */
.jfm__backdrop { background: rgba(10, 9, 8, 0.66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.jfm__box { border-top: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: inset 0 3px 0 #e59a42, 0 40px 100px -30px rgba(0, 0, 0, 0.6); transform: translateY(24px) scale(0.985); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.jfm__close { border-radius: 50%; top: 10px; right: 10px; background: var(--stone); }
@media (max-width: 767px) {
  .jfm__box, .jfm__box--compare { border-radius: 0; box-shadow: inset 0 3px 0 #e59a42; transform: translateY(40px); }
  .jfm__close { top: 6px; right: 8px; }
}

/* Quiz: barra dorada, opciones como tarjetas que responden al toque. */
.quiz__bar { height: 4px; border-radius: 4px; overflow: hidden; }
.quiz__bar span { background: var(--gold-gradient); border-radius: 4px; }
.quiz__q { font-style: italic; }
.quiz__opt { border-radius: var(--radius); transition: border-color var(--dur-fast), background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.quiz__opt:active { transform: scale(0.97); }
@media (hover: hover) { .quiz__opt:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); background: #fbf7ef; } }
.quiz__opt[aria-pressed="true"] { border-color: transparent; background: var(--grain), var(--night); box-shadow: inset 0 0 0 1px #c8933f; }
.quiz-best { border-radius: var(--radius-lg); border-color: transparent; box-shadow: inset 0 0 0 1px rgba(200, 147, 63, 0.35); background: var(--glow), #fdfaf4; }
.quiz-best__media { border-radius: var(--radius); overflow: hidden; background: var(--glow), var(--stone); }
.quiz-best__match { border-radius: var(--radius-pill); padding: 6px 14px; }
.quiz-best__why li { border-radius: var(--radius-pill); }
.quiz-best__fav { border-radius: 50%; }
.quiz-best__actions .btn { background: var(--gold-gradient); background-size: 200% 100%; border-color: transparent; color: #1d1206; }
.quiz-treat { border-radius: var(--radius); background: var(--glow), var(--grain), var(--night); }
.quiz-treat__media { border-radius: var(--radius-sm); overflow: hidden; }

/* Comparador: columnas en tarjetas, notas compartidas en píldora dorada. */
.cmp__title { font-style: italic; }
.cmp__cols { gap: 12px; background: transparent; border: 0; }
.cmp__col { border-radius: var(--radius); box-shadow: var(--shadow-card); }
.cmp__media { border-radius: var(--radius-sm); overflow: hidden; background: var(--glow), var(--stone); }
.cmp__swap, .cmp__remove { border-radius: var(--radius-pill); }
.cmp__remove { border-radius: 50%; }
.cmp__best { border-radius: var(--radius-pill); padding: 2px 8px; background: var(--gold-gradient); }
.cmp__notes span { border-radius: var(--radius-pill); }
@media (max-width: 767px) {
  .cmpm__img { border-radius: var(--radius-sm); overflow: hidden; background: var(--glow), var(--stone); }
  .cmpm__swap { border-radius: var(--radius-pill); }
  .cmpm__pick .cmp__remove { border-radius: 50%; }
}

/* 28.6 Páginas de texto, menú lateral y footer -------------------------
   Nosotros, envíos, contacto, legales y 404 con el mismo título en serif
   cursiva; cajas suaves para pasos, datos de contacto y la foto. */
.page-head h1 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2.4rem, 5vw, 3.75rem); letter-spacing: 0; text-transform: none; line-height: 1; }
.page-head h1::after { content: ""; display: block; width: 56px; height: 2px; margin: 1rem auto 0; border-radius: 2px; background: var(--gold-gradient); }
main:has(.cart) .page-head h1::after, main:has(.checkout) .page-head h1::after { display: none; }
@media (max-width: 767px) {
  .page-head { padding-top: calc(var(--header-h) + 32px); padding-bottom: 24px; }
  .page-head p { font-size: var(--fs-body); }
}

/* Títulos de sección en todo el sitio, como en el Home. */
.section-head h2 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: 0; text-transform: none; line-height: 1.02; }
.section-head h2::after { width: 56px; height: 2px; border-radius: 2px; background: var(--gold-gradient); }

/* Nosotros */
.manifesto p:first-child { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.3; }
/* Solo márgenes laterales: el de arriba lo da .mt-section. */
.band { margin-left: var(--gutter); margin-right: var(--gutter); border-radius: var(--radius-lg); }
@media (max-width: 767px) { .band { margin-left: 8px; margin-right: 8px; border-radius: 20px; } }
.steps { border-top: 0; gap: 12px; }
.step, .step + .step { padding: clamp(24px, 3vw, 36px); border: 0; border-radius: var(--radius); background: var(--glow), var(--stone); }
.step__num { font-family: var(--font-display); font-style: italic; font-size: 2.25rem; line-height: 1; letter-spacing: 0; color: var(--gold-ink); }
@media (max-width: 767px) { .step, .step + .step { padding: 24px; border-bottom: 0; } }

/* Envíos y legales */
.prose h2 { display: flex; align-items: center; gap: 12px; }
.prose h2::before { content: ""; flex: none; width: 24px; height: 2px; border-radius: 2px; background: var(--gold-gradient); }
.prose ul li::marker { color: var(--gold); }
.prose a { text-decoration-color: var(--gold); }
.faq { border-top: 0; }
@media (max-width: 767px) { .prose p, .prose li { font-size: 0.9375rem; line-height: 1.75; } }

/* Contacto: los datos en una tarjeta clara junto al formulario. */
.contact__list { align-self: start; border-top: 0; padding: 8px 24px; border-radius: var(--radius-lg); background: var(--glow), var(--stone); }
.contact__item:last-child { border-bottom: 0; }
.contact__item dt { color: var(--gold-ink); }
.contact__form h2 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: 0; text-transform: none; }
.contact__form .btn--block { background: var(--gold-gradient); background-size: 200% 100%; border-color: transparent; color: #1d1206; min-height: 52px; }
@media (max-width: 767px) { .contact__list { padding: 4px 18px; border-radius: 20px; } }

/* Menú lateral: negro con grano, enlaces grandes en serif y acento dorado. */
.nav-drawer { background: var(--grain), var(--night); color: var(--night-text); }
.nav-drawer.is-open { box-shadow: 24px 0 60px -30px rgba(0, 0, 0, 0.6); } /* cerrado no debe asomar sombra */
.nav-drawer__list a { font-family: var(--font-display); font-size: 2rem; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 0.5rem 0; transition: color var(--dur-fast), transform var(--dur) var(--ease-out); }
.nav-drawer__list a:hover, .nav-drawer__list a[aria-current="page"] { text-decoration: none; color: var(--gold); }
.nav-drawer__list a[aria-current="page"] { font-style: italic; }
@media (hover: hover) { .nav-drawer__list a:hover { transform: translateX(6px); } }
.nav-drawer__sub { border-top-color: var(--night-line); }
.nav-drawer__sub a, .nav-drawer__foot { color: var(--night-muted); }
.nav-drawer__sub a:hover, .nav-drawer__foot a:hover { color: var(--gold); }
.nav-drawer__foot a { color: var(--night-text); }
@media (min-width: 768px) { .nav-drawer { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } }

/* Footer: negro con grano y halo detrás del logo. */
.footer { background: var(--grain), var(--ink); }
.footer__brand { background: radial-gradient(40% 80% at 50% 50%, rgba(229, 154, 66, 0.16), transparent 70%); }
.footer .btn { background: var(--gold-gradient); background-size: 200% 100%; border-color: transparent; color: #1d1206; }
.footer .btn:hover { background: var(--gold-gradient); background-position: 100% 0; color: #1d1206; }
.footer .btn--outline, .footer .btn--outline:hover { background: transparent; color: var(--paper); border-color: rgba(244, 238, 229, 0.6); }
.footer__cols a { transition: color var(--dur-fast); }
.footer__cols a:hover { color: var(--gold); text-decoration: none; }
@media (max-width: 767px) {
  .footer__news { padding: 40px 0 32px; gap: 1.25rem; }
  .footer__cols { gap: 1.75rem 1rem; padding: 32px 0; }
  .footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* Toast y WhatsApp: píldora negra y aro dorado. */
.toast { border-radius: var(--radius-pill); box-shadow: 0 0 0 1px var(--night-line), 0 18px 40px -16px rgba(0, 0, 0, 0.5); }
.wa-float { box-shadow: 0 0 0 1px #c8933f, 0 12px 28px -10px rgba(0, 0, 0, 0.55); }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer__list a { transition: none; }
  .jfm__box, .quiz__opt, .pay-method { transition: none; }
  .tile, .tile__stage img, .cat-tile, .btn, .pdp__hero img, .acc summary::after { transition: none; }
  .tile__fav[aria-pressed="true"] svg { animation: none; }
}

/* =========================================================
   29. Compra fácil (para todo tipo de clientes, celular primero)
   Errores claros debajo de cada campo, botones de 48 px, texto del
   pago junto al botón, barra fija del carrito en celular y la
   confirmación con resumen y pasos.
   ========================================================= */
.field__hint { font-size: var(--fs-label); color: var(--graphite); line-height: 1.5; margin-top: -2px; }
.field__error { display: flex; gap: 0.45rem; align-items: flex-start; margin: 0; color: var(--error); font-size: var(--fs-body); font-weight: 500; line-height: 1.45; }
.field__error[hidden] { display: none; }
.field__error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--error); color: #fff; font-size: 0.75rem; font-weight: 700; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.field.has-error .field__hint { display: none; } /* el error dice lo mismo, más claro */
.checkout .check + .field__error { margin: -0.75rem 0 1.25rem; }
.pay-methods + .pay-note + .field__error, [data-error-for="pay"] { margin-top: 0.8rem; }
.check input { width: 22px; height: 22px; margin-top: 0; }
.pay-method input { width: 20px; height: 20px; margin-top: 1px; }
.checkout__form button[type="submit"] { min-height: 56px; font-size: var(--fs-body); }
.checkout__form button[type="submit"]:disabled { opacity: 0.7; cursor: progress; }
.checkout__after { margin: 0.85rem 0 0; font-size: var(--fs-body); color: var(--ink); line-height: 1.5; text-align: center; }
.form-error.is-visible { padding: 0.8rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--error) 8%, #fff); font-weight: 500; }

/* Cantidades, "Quitar" y "Ver carrito": fáciles de tocar con el dedo. */
.cart-row .qty, .gift__wrap .qty { height: 48px; }
.cart-row .qty button, .gift__wrap .qty button { width: 48px; }
.qty button:disabled { opacity: 0.35; cursor: default; background: none; }
.qty--sm { height: 44px; }
.qty--sm button { width: 44px; }
.cd-row__remove, .cart-row__remove { min-height: 44px; padding: 0 6px; }
.added-bar__link { min-height: 44px; }
.cart-drawer__full { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 4px; }
/* El botón de WhatsApp no tapa "Ver carrito" ni la barra fija del carrito. */
@media (max-width: 767px) {
  body:has(.added-bar.is-visible) .wa-float, body:has(.cart-sticky.is-visible) .wa-float { bottom: 96px; }
}

/* Carrito en celular: total y "Finalizar pedido" siempre a la vista. */
.cart-sticky { display: none; }
@media (max-width: 767px) {
  .cart-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 14px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--hairline); box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.35);
    transform: translateY(110%); transition: transform var(--dur-fast, 0.2s) ease;
  }
  .cart-sticky.is-visible { transform: none; }
  .cart-sticky[hidden] { display: none; }
  .cart-sticky__total { display: flex; flex-direction: column; line-height: 1.2; }
  .cart-sticky__total span { font-size: var(--fs-label); color: var(--graphite); }
  .cart-sticky__total strong { font-size: 1.125rem; font-weight: 500; }
  .cart-sticky .btn { flex: 1; min-height: 52px; margin: 0; }
}

/* Confirmación: número de pedido, pasos 1-2-3, una acción principal y el resumen. */
.order-confirmation { max-width: 34rem; min-width: 0; padding-top: 8px; }
.order-confirmation h2 { overflow-wrap: break-word; }
.order-confirmation .order-code { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 1.25rem auto 1rem; padding: 0.7rem 1.5rem; width: fit-content; font-size: var(--fs-lead); }
.order-confirmation .order-code span { font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--graphite); }
.order-confirmation__text { color: var(--ink) !important; font-weight: 400 !important; }
.order-steps { counter-reset: paso; list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.order-steps li { counter-increment: paso; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius, 14px); background: var(--stone); font-size: var(--fs-body); line-height: 1.5; }
.order-steps li::before { content: counter(paso); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-gradient, var(--gold)); color: #1d1206; font-weight: 600; }
.order-confirmation__actions { display: grid; gap: 10px; margin-top: 1.75rem; }
.order-confirmation__actions .btn { min-height: 52px; white-space: normal; text-align: center; line-height: 1.35; padding-top: 10px; padding-bottom: 10px; }
.order-confirmation__actions .btn:first-child { background: var(--gold-gradient); border-color: transparent; color: #1d1206; }
.order-summary { margin-top: 2rem; padding: 20px 18px; border-radius: var(--radius-lg, 20px); background: var(--stone); text-align: left; }
.order-summary h3 { margin: 0 0 0.75rem; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; }
.order-summary__lines { list-style: none; margin: 0; padding: 0; }
.order-summary__lines li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: var(--fs-body); }
.order-summary__lines li span:last-child { white-space: nowrap; }
.order-summary__lines li.is-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 1rem; font-weight: 500; }
.order-summary__facts { margin: 1rem 0 0; display: grid; gap: 10px; }
.order-summary__facts dt { font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--graphite); }
.order-summary__facts dd { margin: 2px 0 0; font-size: var(--fs-body); line-height: 1.5; }
.order-confirmation.is-busy .order-confirmation__text::after { content: ""; display: block; width: 28px; height: 28px; margin: 1.25rem auto 0; border: 2px solid var(--hairline); border-top-color: var(--gold-ink); border-radius: 50%; animation: quiz-spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .order-confirmation.is-busy .order-confirmation__text::after { animation: none; } .cart-sticky { transition: none; } }
/* Aviso con botón ("Quitaste … · Deshacer"). */
.toast.has-action { display: flex; align-items: center; gap: 14px; width: max-content; padding: 8px 8px 8px 22px; line-height: 1.4; }
.toast.has-action.is-visible { pointer-events: auto; }
.toast__action { flex: none; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--gold-gradient, var(--gold)); color: #1d1206; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; }
@media (max-width: 767px) { body:has(.cart-sticky.is-visible) .toast { bottom: 96px; } }