@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=Inter:wght@300;400;500&display=swap');

/* ============================================================
   PALETA
   El fondo es blanco puro a propósito: las fotos de producto
   vienen con fondo blanco, así que la imagen se funde con la
   página en vez de verse como un recuadro pegado encima.
   El calor lo ponen el coral y la tipografía, no el fondo.
   ============================================================ */
:root {
  --white:     #FFFFFF;   /* fondo de página y de las fotos */
  --paper:     #FAF7F3;   /* bloques secundarios, muy sutil */
  --paper-deep:#F2EDE6;   /* hover / placeholder de imagen */

  --ink:       #16130F;
  --ink-soft:  #4C443C;
  --ink-mute:  #948A7E;

  --coral:     #E97562;
  --coral-deep:#C55744;

  --line:      #E9E2D8;
  --line-soft: #F1ECE5;

  --shell:     1380px;
  --pad:       clamp(20px, 5vw, 64px);
  --header-h:  77px;   /* script.js lo actualiza con el alto real */

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* El atributo `hidden` trae `display:none` de la hoja del navegador,
   pero cualquier `display` nuestro le gana. Sin esto, el menú móvil
   (que es display:flex) se dibuja también en desktop. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--white);
  color: var(--ink);
  font-weight: 300;
  line-height: 1.55;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input { font: inherit; }

::selection { background: var(--coral); color: #fff; }

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff;
  padding: 12px 20px; z-index: 500; font-size: 13px;
}
.skip-link:focus { left: 16px; top: 16px; }

/* Micro-tipografía compartida: el "eyebrow" en versalitas */
.eyebrow,
.nav-link,
.header-tag,
.breadcrumb,
.gate-card-arrow,
.card-price-label,
.footer-col-title,
.footer-bottom,
.chip,
.wa-cta,
.ghost-btn {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--pad); }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.header.scrolled {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, 0.94);
}
.header-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 16px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.brand-mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-deep);
  flex-shrink: 0;
}
.brand-word {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-align: left;
}
.brand-word em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-word-sub {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 5px;
}

.header-nav { display: flex; align-items: center; gap: 30px; }
.nav-link {
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
  transition: color 0.3s;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav-link:hover { color: var(--coral); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--coral); }

.header-side { display: flex; align-items: center; gap: 16px; }

.header-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: 9px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: border-color 0.3s, color 0.3s;
}
.header-search-toggle:hover { border-color: var(--ink); color: var(--ink); }
.header-search-toggle svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
}

/* El área táctil mide 44px aunque las barras midan 26×8.
   El margen negativo se come el aire extra para que ópticamente
   siga alineado con el borde del header. */
.header-menu {
  display: none;
  width: 44px; height: 44px;
  position: relative;
  margin-right: -11px;
}
.header-menu span {
  position: absolute; left: 9px;
  width: 26px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.4s var(--ease), opacity 0.3s;
}
.header-menu span:first-child { top: 17px; }
.header-menu span:last-child  { top: 25px; }
.header-menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.header-menu[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* Buscador global */
.searchbar {
  border-top: 1px solid var(--line-soft);
  background: var(--white);
  animation: dropIn 0.45s var(--ease);
}
/* Declaramos los dos extremos: con solo `from`, el estado final
   quedaba retenido y el menú se dibujaba 8px encima del header. */
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.searchbar-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 22px var(--pad);
  display: flex;
  align-items: center;
  gap: 20px;
}
.searchbar input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-family: 'Fraunces', serif;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 300;
  color: var(--ink);
}
.searchbar input::placeholder { color: var(--ink-mute); font-style: italic; }
.searchbar-close {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 0.3s;
}
.searchbar-close:hover { color: var(--coral); }

/* Menú móvil */
.mobile-nav {
  position: fixed;
  top: var(--header-h); left: 0; right: 0;
  z-index: 99;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 8px var(--pad) 24px;
  display: flex;
  flex-direction: column;
  animation: dropIn 0.4s var(--ease);
}
.mobile-nav button {
  text-align: left;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
}
.mobile-nav button:last-child { border-bottom: none; }
.mobile-nav button span {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  margin-left: 10px;
}

/* Breadcrumb */
.breadcrumb {
  max-width: var(--shell);
  margin: 0 auto;
  padding: calc(var(--header-h) + 30px) var(--pad) 0;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
}
.breadcrumb button {
  color: var(--ink-mute);
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: 7px 0;            /* llega a 28px de alto sin mover el texto */
  transition: color 0.3s;
}
.breadcrumb button:hover { color: var(--coral); }
.breadcrumb .sep { opacity: 0.35; }
.breadcrumb .current { color: var(--ink); }

/* ============================================================
   GATES (landing y decants)
   ============================================================ */
.gate {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 56px var(--pad) 120px;
}
.gate.is-root { padding-top: calc(var(--header-h) + 62px); }

/* ============================================================
   WIZARD DE INICIO
   Los usuarios se quedaban en el inicio sin saber cómo entrar.
   El wizard ocupa la pantalla, centra la pregunta y las opciones,
   y no requiere scroll: elegir es lo único que se puede hacer.
   ============================================================ */
/* Portal a pantalla completa: tapa TODO (header y footer incluidos)
   y bloquea el scroll de fondo. Es lo primero y lo único que ve el
   cliente hasta que elige un camino. */
.wizard-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;               /* por encima de header (100) y del chat (300/400) */
  background: var(--white);
  display: flex;
  overflow-y: auto;
  animation: wizard-overlay-in 0.55s var(--ease) both;
}
@keyframes wizard-overlay-in { from { opacity: 0; } }
body.wizard-open { overflow: hidden; }

.wizard-overlay-inner {
  margin: auto;
  width: 100%;
  max-width: var(--shell);
  padding: clamp(28px, 5vw, 56px) var(--pad);
  text-align: center;
}

/* Marca arriba del portal, para que se vea intencional */
.wizard-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(28px, 5vw, 52px);
  animation: fadeUp 0.8s ease both;
}
.wizard-brand-mark {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-deep);
}
.wizard-brand-word {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.wizard-brand-word em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin-right: 4px;
}

.wizard-head { text-align: center; }
.wizard-head .gate-eyebrow { margin-bottom: 0; }
.wizard-step {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--coral);
  animation: fadeUp 0.9s ease 0.1s both;
}
.wizard-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-top: 16px;
  animation: fadeUp 1s var(--ease) 0.2s both;
}
.wizard-title em { font-style: italic; font-weight: 300; color: var(--coral); }
.wizard-lead {
  margin: 18px auto 0;
  max-width: 46ch;
  font-family: 'Fraunces', serif;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-soft);
  animation: fadeUp 1s ease 0.35s both;
}
.wizard-back {
  align-self: center;
  margin-bottom: 24px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
  background: none; border: none; cursor: pointer;
  padding: 8px 14px;
  transition: color 0.3s;
  animation: fadeUp 0.8s ease both;
}
.wizard-back:hover { color: var(--coral); }

.is-wizard .gate-grid {
  margin-top: clamp(28px, 3.5vw, 48px);
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.is-wizard .gate-grid-2 { max-width: 660px; }
/* Alto acotado por viewport: el wizard entra sin scroll en
   pantallas de laptop (720px) sin dejar de verse premium. */
.is-wizard .gate-card {
  aspect-ratio: auto;
  height: clamp(240px, 42vh, 360px);
}
/* El icono vive en la mitad superior y más chico, para que NO se
   encime con las etiquetas ni el nombre (que van abajo). */
.is-wizard .gate-card-media {
  inset: 4% 0 66%;
}
.is-wizard .gate-card-media svg {
  width: clamp(42px, 4.4vw, 58px);
}

.eyebrow { color: var(--coral); }

.gate-eyebrow {
  color: var(--coral);
  margin-bottom: 28px;
  animation: fadeUp 0.9s ease 0.1s both;
}
.gate-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(42px, 6.4vw, 88px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 15ch;
  animation: fadeUp 1.2s var(--ease) 0.22s both;
}
.gate-title em { font-style: italic; font-weight: 300; color: var(--coral); }
.gate-lead {
  margin-top: 34px;
  max-width: 56ch;
  font-family: 'Fraunces', serif;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-soft);
  animation: fadeUp 1s ease 0.4s both;
}

.gate-grid {
  margin-top: clamp(56px, 8vw, 96px);
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  animation: fadeUp 1.2s var(--ease) 0.55s both;
}
.gate-card {
  aspect-ratio: 4 / 5;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(26px, 3vw, 38px);
  text-align: left;
  isolation: isolate;
}

/* El flacon de la colección, dibujado a línea.
   Va por encima de la ola coral (z-index 2) para que al pasar el
   mouse se vuelva blanco sobre el coral, en vez de quedar tapado. */
.gate-card-media {
  position: absolute;
  inset: 0 0 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: var(--ink);
  pointer-events: none;
  transition: color 0.5s ease, transform 0.7s var(--ease);
}
.gate-card-media svg {
  width: clamp(76px, 8.5vw, 116px);
  height: auto;
  overflow: visible;
}
.gate-card:hover .gate-card-media,
.gate-card:focus-visible .gate-card-media {
  color: #fff;
  transform: translateY(-10px);
}

/* La ola coral que sube al pasar el mouse */
.gate-card::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--coral);
  transform: translateY(101%);
  transition: transform 0.7s var(--ease);
  z-index: 1;
}
.gate-card:hover::before, .gate-card:focus-visible::before { transform: translateY(0); }

.gate-card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.gate-card-body > * { transition: color 0.5s ease; }
.gate-card:hover .gate-card-body > *,
.gate-card:focus-visible .gate-card-body > * { color: #fff; }

/* Las familias olfativas que más pesan en la colección */
.gate-card-tags {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.gate-card-name {
  font-family: 'Fraunces', serif;
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.gate-card-name em { font-style: italic; }
/* "Explorar" como pastilla con borde.
   En móvil no hay hover, así que la ola coral nunca aparece por
   sí sola: sin una pastilla visible, la tarjeta se lee como un
   adorno y no como un botón. El borde la hace tocable de entrada. */
.gate-card-arrow {
  margin-top: 24px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px;
  border: 1px solid currentColor;
  border-radius: 100px;
  color: var(--ink);
  transition: border-color 0.5s ease;
}
.gate-card-arrow-icon {
  font-size: 13px;
  letter-spacing: 0;
  transition: transform 0.4s var(--ease);
}
.gate-card:hover .gate-card-arrow-icon,
.gate-card:active .gate-card-arrow-icon { transform: translateX(4px); }

/* Empujón al entrar en pantalla (lo activa el observer en JS).
   Dos nudges hacia la derecha, decrecientes: llama la atención
   sin parecer un temblor de error. */
@keyframes gate-cue {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(7px); }
  45%  { transform: translateX(0); }
  62%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
.gate-card-arrow.cue { animation: gate-cue 0.75s var(--ease) both; }
/* La flecha acompaña el empujón, reforzando la dirección. */
.gate-card-arrow.cue .gate-card-arrow-icon { animation: gate-cue 0.75s var(--ease) both; }

/* Feedback al tocar en móvil: la ola coral sube igual que en el
   hover de desktop, confirmando que la tarjeta responde. */
.gate-card:active::before { transform: translateY(0); }
.gate-card:active .gate-card-media { color: #fff; transform: translateY(-6px); }
.gate-card:active .gate-card-body > * { color: #fff; }

/* ============================================================
   SEÑALES DE "TOCÁ ACÁ" EN EL WIZARD
   En el celular no hay hover, así que las tarjetas tienen que
   verse tocables solas. Tres señales combinadas:
     1. Sombra: se ven como fichas levantadas, no como fondo.
     2. Entrada escalonada: aparecen de a una, llamando la atención.
     3. La pastilla "Explorar" late suave, invitando al toque.
   ============================================================ */
.is-wizard .gate-card {
  box-shadow: 0 6px 20px rgba(22, 19, 15, 0.06);
  transition: box-shadow 0.4s var(--ease);
}
.is-wizard .gate-card:hover,
.is-wizard .gate-card:active {
  box-shadow: 0 14px 34px rgba(233, 117, 98, 0.22);
}

/* 2. Entrada escalonada al abrir el portal */
.wizard-open .gate-card { animation: wizard-in 0.6s var(--ease) both; }
.wizard-open .gate-grid > .gate-card:nth-child(1) { animation-delay: 0.15s; }
.wizard-open .gate-grid > .gate-card:nth-child(2) { animation-delay: 0.28s; }
.wizard-open .gate-grid > .gate-card:nth-child(3) { animation-delay: 0.41s; }
@keyframes wizard-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 3. La pastilla late e invita al toque; la flecha va y viene */
.is-wizard .gate-card-arrow {
  animation: wizard-pill-pulse 2.6s ease-in-out infinite;
}
@keyframes wizard-pill-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233, 117, 98, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(233, 117, 98, 0.12); }
}
.is-wizard .gate-card-arrow-icon {
  animation: wizard-beckon 2.6s ease-in-out infinite;
}
@keyframes wizard-beckon {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
/* Al tocar/hover, mandan las señales de interacción, no el latido */
.is-wizard .gate-card:hover .gate-card-arrow,
.is-wizard .gate-card:active .gate-card-arrow { animation: none; }
.is-wizard .gate-card:hover .gate-card-arrow-icon,
.is-wizard .gate-card:active .gate-card-arrow-icon { animation: none; transform: translateX(4px); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   VISTA DE COLECCIÓN
   ============================================================ */
.collection {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 32px var(--pad) 0;
}
.collection-header {
  padding: 28px 0 34px;
  border-bottom: 1px solid var(--line);
}
.collection-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(38px, 5.2vw, 70px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.025em;
}
.collection-title em { font-style: italic; }
.collection-eyebrow { color: var(--coral); margin-bottom: 16px; }

/* Filtros: familia olfativa (de las notas reales) y precio */
.filters {
  display: flex;
  align-items: center;
  gap: 14px 28px;
  flex-wrap: wrap;
  padding: 26px 0 0;
}
.filters-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* El orden por precio se va al extremo opuesto de las familias */
.filters-group.is-orden { margin-left: auto; }
.filters-label {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 42px;          /* área táctil cómoda en móvil */
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-soft);
  letter-spacing: 0.2em;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-count { opacity: 0.5; margin-left: 7px; letter-spacing: 0.1em; }

.results-line {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  font-style: italic;
  color: var(--ink-mute);
  padding: 26px 0 30px;
}

/* ============================================================
   GRID DE PRODUCTOS — vertical, tipo galería
   La foto NO lleva fondo propio: se funde con el blanco.
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(16px, 2.2vw, 32px);
  row-gap: clamp(44px, 5vw, 68px);
  padding-bottom: 40px;
}

.card {
  display: flex;
  flex-direction: column;
  text-align: left;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.card.revealed { opacity: 1; transform: none; }

.card-image {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--white);
  overflow: hidden;
  margin-bottom: 20px;
}
.card-image::after {
  /* Hairline sutil: define el área de la foto sin encajonarla */
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--line-soft);
  pointer-events: none;
  transition: border-color 0.45s ease;
}
.card:hover .card-image::after { border-color: var(--line); }
.card-image img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8%;
  transition: transform 1.1s var(--ease);
}
.card:hover .card-image img { transform: scale(1.05); }

.card-flag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font-size: 8px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: #fff; background: var(--coral);
  padding: 5px 10px;
}
.card-flag.is-set { background: var(--ink); }
.card-flag.is-agotado { background: var(--ink-mute); }

/* Producto agotado: la foto se apaga un poco para que se note
   sin gritar, y el precio queda tachado. */
.card.is-agotado .card-image img { opacity: 0.5; filter: grayscale(0.4); }
.card.is-agotado .card-price { color: var(--ink-mute); text-decoration: line-through; }
.card.is-agotado .card-more { color: var(--ink-mute); }

.card-profile {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 9px;
}
.card-name {
  font-family: 'Fraunces', serif;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.card-scent {
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 16px;
}
.card-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.card-price {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.card-price .currency {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--ink-mute);
  margin-right: 4px;
  letter-spacing: 0.04em;
}
.card-more {
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 0.3s;
}
.card:hover .card-more { color: var(--coral); }

/* Decants: los dos tamaños con su precio, en columna.
   El ml a la izquierda en versalitas, el precio alineado a la
   derecha para que las cifras queden en una misma vertical. */
.card-tallas {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.card-talla {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.card-talla-ml {
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
}
.card-talla .card-price { font-size: 16px; }

/* Cargar más */
.load-more-wrap { padding: 30px 0 110px; text-align: center; }
.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 40px;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.ghost-btn:hover { background: var(--ink); color: #fff; }

/* ============================================================
   FICHA DE PRODUCTO
   Aquí es donde se dispara ViewContent al Pixel.
   ============================================================ */
.detail {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 30px var(--pad) 100px;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 6vw, 90px);
  align-items: start;
}
.detail-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--white);
  border: 1px solid var(--line-soft);
  animation: fadeUp 0.9s var(--ease) both;
}
.detail-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 7%;
}
.detail-info { animation: fadeUp 0.9s var(--ease) 0.12s both; padding-top: 6px; }

.detail-profile { color: var(--coral); margin-bottom: 18px; }
.detail-name {
  font-family: 'Fraunces', serif;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}
.detail-scent {
  font-family: 'Fraunces', serif;
  font-size: clamp(17px, 1.8vw, 21px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 44ch;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.detail-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 30px 0;
}
.detail-price {
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.detail-price .currency {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--ink-mute);
  margin-right: 6px;
  letter-spacing: 0.04em;
}
.detail-price-label {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-bottom: 10px;
}

/* Ficha de decant: los dos tamaños como filas con hairline,
   igual que la pirámide olfativa de más abajo. */
.detail-tallas { padding: 30px 0; }
.detail-talla {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.detail-talla:last-child { border-bottom: none; padding-bottom: 4px; }
.detail-talla-ml {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-style: italic;
  color: var(--ink-soft);
}
.detail-talla .detail-price { font-size: clamp(26px, 2.8vw, 34px); }
.detail-tallas .detail-price-label { margin-bottom: 4px; }

.wa-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 21px 32px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease);
}
.wa-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--coral);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
.wa-cta > * { position: relative; z-index: 1; }
.wa-cta:hover::before { transform: translateY(0); }
.wa-cta-arrow { transition: transform 0.4s var(--ease); }
.wa-cta:hover .wa-cta-arrow { transform: translateX(5px); }

/* Botón cuando el producto está agotado: apagado, con la ola gris */
.wa-cta.is-ghost { background: var(--ink-mute); }
.wa-cta.is-ghost::before { background: var(--ink); }

/* Sello de agotado en la ficha */
.detail-agotado {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 16px;
}
.detail-agotado::before { content: "● "; color: #c0392b; font-size: 9px; }
/* En la ficha, el precio del agotado se tacha */
.detail.is-agotado .detail-price { color: var(--ink-mute); text-decoration: line-through; }

.detail-reassure {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  padding-top: 22px;
  font-size: 12px;
  color: var(--ink-mute);
}
.detail-reassure span::before { content: "— "; color: var(--coral); }

/* Pirámide olfativa */
.pyramid { margin-top: 40px; border-top: 1px solid var(--line); }
.pyramid-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 22px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.pyramid-label {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-mute);
}
.pyramid-notes {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.55;
}
.pyramid-hint {
  font-size: 11.5px;
  color: var(--ink-mute);
  padding-top: 16px;
  line-height: 1.6;
}

.detail-includes { margin-top: 34px; }
.detail-includes-title {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.detail-includes ul { list-style: none; }
.detail-includes li {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  font-style: italic;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.detail-includes li::before { content: "· "; color: var(--coral); }

/* Relacionados */
.related { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad) 110px; }
.related-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
  padding-bottom: 30px;
  border-top: 1px solid var(--line);
  padding-top: 50px;
  margin-bottom: 10px;
}

/* Estado vacío */
.empty-state { padding: 100px 0 130px; max-width: 46ch; }
.empty-state h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.empty-state p { font-size: 14px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 26px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--line);
  padding: 76px var(--pad) 36px;
  max-width: var(--shell);
  margin: 0 auto;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  margin-bottom: 56px;
}
.footer-brand {
  font-family: 'Fraunces', serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.footer-brand em { color: var(--coral); }
.footer-col-title { color: var(--ink-mute); margin-bottom: 15px; }
.footer-col p, .footer-col a {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.9;
  text-decoration: none;
  display: block;
  transition: color 0.3s;
}
.footer-col a:hover { color: var(--coral); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  color: var(--ink-mute);
  flex-wrap: wrap;
}
/* El crédito va pegado al copyright, separado por un punto medio.
   En móvil se apila y el punto desaparece: si no, la línea se
   partía en cualquier lado. */
.footer-legal { display: flex; align-items: center; gap: 10px; }
.footer-credit::before { content: "·"; margin-right: 10px; opacity: 0.5; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* El menú desplegable es exclusivo de móvil. Lo apagamos por
   ancho y no por estado, así no puede quedar abierto si alguien
   agranda la ventana con el menú desplegado. */
@media (min-width: 901px) {
  .mobile-nav { display: none !important; }
}

@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .header-inner { padding: 12px var(--pad); }
  .header-nav { display: none; }
  .header-menu { display: block; }
  .header-search-toggle span { display: none; }
  .header-search-toggle { padding: 10px; border-radius: 50%; }

  .brand-word em { font-size: 19px; }
  .brand-mark { width: 38px; height: 38px; }

  .gate-grid { grid-template-columns: 1fr; }
  /* Cuadrada en móvil: en formato banner el frasco quedaba
     aplastado y no se leía. */
  .gate-card { aspect-ratio: 1 / 1; }

  /* En el wizard, las opciones son filas compactas: así las 3
     entran en pantalla sin scroll, que es todo el punto. */
  .gate.is-wizard { min-height: auto; justify-content: flex-start; padding-top: calc(var(--header-h) + 26px); }
  .is-wizard .gate-grid { gap: 10px; margin-top: 30px; }
  .is-wizard .gate-card {
    aspect-ratio: auto;
    height: auto;           /* anula el clamp de desktop en móvil */
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    min-height: 88px;
  }
  .is-wizard .gate-card-media {
    position: static;
    inset: auto;
    width: 48px;
    flex-shrink: 0;
    transform: none !important;
  }
  .is-wizard .gate-card-media svg { width: 38px; }
  .is-wizard .gate-card-body { flex: 1; }
  .is-wizard .gate-card-tags { margin-bottom: 6px; }
  .is-wizard .gate-card-name { font-size: 26px; }
  .is-wizard .gate-card-arrow { margin-top: 10px; }

  .detail-grid { grid-template-columns: 1fr; gap: 32px; }
  .pyramid-row { grid-template-columns: 92px 1fr; gap: 16px; }

  /* Con 4 columnas el footer se aprieta antes que el resto */
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 14px;
    row-gap: 38px;
  }
  .card-scent { display: none; }
  .card-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .card-more { display: none; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { flex-direction: column; gap: 8px; }
  .footer-credit::before { content: none; }
  .filters { gap: 12px 6px; }
  /* En móvil el orden va debajo de las familias, no al costado */
  .filters-group.is-orden { margin-left: 0; width: 100%; }
  /* En móvil achicamos el aire y el interletrado, nunca el
     cuerpo de la letra: a 9px deja de leerse cómodo. */
  .chip { padding: 0 14px; letter-spacing: 0.14em; }
}

/* ============================================================
   WHATSAPP FLOTANTE
   Verde WhatsApp de marca a propósito: el botón tiene que
   reconocerse al instante. El resto del sitio queda editorial;
   este es el único elemento que rompe la paleta, y está bien.
   ============================================================ */
.wa-widget {
  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: clamp(16px, 4vw, 28px);
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;   /* solo los hijos reciben clics */
}

.wa-fab {
  pointer-events: auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  position: relative;
}
.wa-fab svg { width: 34px; height: 34px; }
.wa-fab:hover {
  transform: scale(1.06);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5), 0 3px 10px rgba(0,0,0,0.16);
}
.wa-fab:active { transform: scale(0.97); }

/* Aro que late para atraer la mirada. Lo activa/desactiva el JS. */
.wa-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: 0;
}
.wa-widget.pulse .wa-fab::before {
  animation: wa-pulse 1.8s var(--ease) 3;
}
@keyframes wa-pulse {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.7); }
}

/* Avatar (foto real o iniciales de respaldo) */
.wa-avatar {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--coral);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 17px;
  line-height: 1;
}
.wa-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 12%;   /* enfoca la cara en una foto de cuerpo */
  display: block;
}
.wa-avatar-lg { width: 64px; height: 64px; font-size: 26px; }

/* Tarjeta de chat (esquina) */
.wa-card {
  pointer-events: auto;
  position: relative;
  width: 290px;
  max-width: calc(100vw - 40px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px 18px 4px 18px;
  box-shadow: 0 16px 40px rgba(22, 19, 15, 0.16);
  overflow: hidden;
  animation: wa-card-in 0.45s var(--ease) both;
}
@keyframes wa-card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.wa-card.closing { animation: wa-card-out 0.3s var(--ease) both; }
@keyframes wa-card-out { to { opacity: 0; transform: translateY(10px) scale(0.96); } }

.wa-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: #075E54;   /* verde WhatsApp oscuro, como el encabezado del chat */
  color: #fff;
}
.wa-card-id { display: flex; flex-direction: column; gap: 3px; }
.wa-card-name { font-size: 13px; font-weight: 500; letter-spacing: 0.01em; }
.wa-card-status {
  font-size: 10.5px;
  color: #a7e8c4;
  display: flex; align-items: center; gap: 6px;
}
.wa-card-status i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ee06e; display: inline-block;
}

.wa-card-body {
  padding: 16px 16px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background:
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)),
    var(--paper);
  min-height: 60px;
}
.wa-msg {
  align-self: flex-start;
  max-width: 88%;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 4px 14px 14px 14px;
  padding: 9px 13px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  animation: wa-msg-in 0.35s var(--ease) both;
}
.wa-msg em { font-style: italic; color: var(--coral-deep); }
@keyframes wa-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* "escribiendo…" */
.wa-typing {
  align-self: flex-start;
  display: inline-flex; gap: 4px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 4px 14px 14px 14px;
  padding: 11px 13px;
}
.wa-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-mute);
  animation: wa-typing 1.2s infinite ease-in-out;
}
.wa-typing i:nth-child(2) { animation-delay: 0.2s; }
.wa-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes wa-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.wa-card-cta {
  display: block;
  padding: 13px 16px;
  background: #25D366;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}
.wa-card:hover .wa-card-cta { background: #1fbe5b; }

.wa-card-close {
  position: absolute;
  top: 11px; right: 12px;
  z-index: 2;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  color: rgba(255,255,255,0.85);
  background: none; border: none; cursor: pointer;
  transition: color 0.3s;
}
.wa-card-close:hover { color: #fff; }

/* ============================================================
   MODAL DE SALIDA (exit-intent)
   Este SÍ va al centro, pero solo cuando el cliente está por
   irse — ahí ya no está comprando, así que interrumpir es válido.
   ============================================================ */
.wa-exit {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.wa-exit-backdrop {
  position: absolute; inset: 0;
  background: rgba(22, 19, 15, 0.5);
  backdrop-filter: blur(2px);
  animation: wa-fade 0.3s ease both;
}
@keyframes wa-fade { from { opacity: 0; } }
.wa-exit-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 20px;
  padding: 34px 30px 26px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  animation: wa-exit-in 0.4s var(--ease) both;
}
@keyframes wa-exit-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.wa-exit-box .wa-avatar { margin: 0 auto 16px; }
.wa-exit-title {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 12px;
}
.wa-exit-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 30ch;
  margin: 0 auto 24px;
}
.wa-exit-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.3s;
}
.wa-exit-cta:hover { background: #1fbe5b; }
.wa-exit-dismiss {
  margin-top: 14px;
  background: none; border: none; cursor: pointer;
  font-size: 12px;
  color: var(--ink-mute);
  transition: color 0.3s;
}
.wa-exit-dismiss:hover { color: var(--ink); }
.wa-exit-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  color: var(--ink-mute);
  background: none; border: none; cursor: pointer;
}
.wa-exit-close:hover { color: var(--ink); }

@media (max-width: 480px) {
  .wa-fab { width: 54px; height: 54px; }
  .wa-fab svg { width: 30px; height: 30px; }
  .wa-card { width: 270px; }
}

/* ============================================================
   CARRITO
   ============================================================ */
.header-cart {
  position: relative;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  transition: color 0.3s;
}
.header-cart:hover { color: var(--coral); }
.header-cart svg { width: 22px; height: 22px; }
.header-cart-count {
  position: absolute;
  top: 2px; right: 0;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 100px;
  background: var(--coral);
  color: #fff;
  font-size: 10px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

body.cart-open { overflow: hidden; }

.cart-drawer { position: fixed; inset: 0; z-index: 420; }
.cart-backdrop {
  position: absolute; inset: 0;
  background: rgba(22, 19, 15, 0.45);
  animation: wa-fade 0.3s ease both;
}
.cart-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 400px; max-width: 92vw;
  background: var(--white);
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 40px rgba(22, 19, 15, 0.18);
  animation: cart-in 0.4s var(--ease) both;
}
@keyframes cart-in { from { transform: translateX(100%); } }

.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad);
  border-bottom: 1px solid var(--line);
}
.cart-title {
  font-family: 'Fraunces', serif;
  font-size: 22px; font-weight: 300; font-style: italic;
  letter-spacing: -0.01em;
}
.cart-close {
  width: 32px; height: 32px;
  font-size: 26px; line-height: 1;
  color: var(--ink-mute);
  transition: color 0.3s;
}
.cart-close:hover { color: var(--ink); }

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px var(--pad);
}
.cart-empty { padding: 60px 0; text-align: center; }
.cart-empty-title {
  font-family: 'Fraunces', serif;
  font-size: 20px; font-style: italic; color: var(--ink);
  margin-bottom: 10px;
}
.cart-empty-sub { font-size: 13px; color: var(--ink-mute); }

.cart-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
}
.cart-item-img {
  width: 56px; height: 68px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.cart-item-img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.cart-item-name {
  font-family: 'Fraunces', serif;
  font-size: 15px; line-height: 1.2; color: var(--ink);
  margin-bottom: 4px;
}
.cart-item-precio { font-size: 11px; color: var(--ink-mute); margin-bottom: 12px; }
.cart-item-ctrl { display: flex; align-items: center; gap: 14px; }
.cart-item-quitar {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 0.3s;
}
.cart-item-quitar:hover { color: var(--coral-deep); }
.cart-item-sub {
  font-family: 'Fraunces', serif;
  font-size: 15px; color: var(--ink);
  white-space: nowrap;
}

.cart-foot { padding: 20px var(--pad); border-top: 1px solid var(--line); }
.cart-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
}
.cart-total span:first-child {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-mute);
}
.cart-total-val {
  font-family: 'Fraunces', serif;
  font-size: 26px; font-weight: 400; letter-spacing: -0.01em;
}
.cart-foot .wa-cta { background: #25D366; }
.cart-foot .wa-cta::before { background: #1fbe5b; }
.cart-seguir {
  display: block; width: 100%;
  margin-top: 12px;
  font-size: 12px; color: var(--ink-mute);
  transition: color 0.3s;
}
.cart-seguir:hover { color: var(--ink); }

/* Selector de cantidad (ficha y carrito) */
.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line);
  border-radius: 100px;
}
.qty-btn {
  width: 40px; height: 40px;
  font-size: 18px; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: color 0.3s;
}
.qty-btn:hover { color: var(--coral); }
.qty-val { min-width: 26px; text-align: center; font-size: 14px; }
.qty-sm .qty-btn { width: 30px; height: 30px; font-size: 15px; }

/* Ficha: selector de tamaño (decants) + botón agregar */
.talla-opts { display: flex; gap: 10px; margin-top: 10px; }
.talla-opt {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
  transition: border-color 0.3s, background 0.3s;
}
.talla-opt:hover { border-color: var(--ink-mute); }
.talla-opt.active { border-color: var(--ink); background: var(--paper); }
.talla-opt-ml {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
}
.talla-opt-precio {
  font-family: 'Fraunces', serif;
  font-size: 18px; color: var(--ink);
}
.talla-opt.active .talla-opt-precio { color: var(--coral-deep); }

.detail-buy {
  display: flex; align-items: stretch; gap: 12px;
  margin: 8px 0 4px;
}
.detail-buy .qty { flex-shrink: 0; }
.detail-buy .wa-cta { flex: 1; width: auto; }

/* ============================================================
   TEST — "¿Cuál es tu perfume ideal?"
   ============================================================ */
/* CTA en el header (desktop) */
.nav-test {
  margin-left: 6px;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--coral);
  color: #fff !important;
  font-size: 12px;
  white-space: nowrap;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.nav-test::after { display: none; }        /* sin la barrita del nav-link */
.nav-test:hover { background: var(--coral-deep); color: #fff !important; transform: translateY(-1px); }
.nav-test.active { background: var(--coral-deep); }

/* CTA en el menú móvil */
.mobile-test {
  margin-top: 10px;
  justify-content: center !important;
  background: var(--coral);
  color: #fff !important;
  border-radius: 12px;
  font-weight: 600;
}
.mobile-test span { display: none; }
.mobile-test.active { background: var(--coral-deep); }

.quiz {
  padding-top: calc(var(--header-h) + 20px);
  padding-bottom: 110px;
  overflow: hidden;
}

/* Carrusel de fotos que corre de fondo mientras responde */
.quiz-marquee {
  position: relative;
  margin-bottom: clamp(24px, 5vw, 48px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.quiz-marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: quiz-marq 55s linear infinite;
}
.quiz-marquee:hover .quiz-marquee-track { animation-play-state: paused; }
.quiz-marquee img {
  height: clamp(84px, 12vw, 120px);
  width: auto;
  object-fit: contain;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 8px 14px;
  flex-shrink: 0;
}
@keyframes quiz-marq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.quiz-stage {
  max-width: 620px;
  margin: 0 auto;
  padding-inline: var(--pad);
}

@keyframes quiz-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.quiz-anim { animation: quiz-in 0.5s var(--ease) both; }

.quiz-card { text-align: center; }

.quiz-progress { margin-bottom: 30px; }
.quiz-progress-bar {
  height: 4px;
  border-radius: 100px;
  background: var(--line);
  overflow: hidden;
}
.quiz-progress-bar span {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--coral);
  transition: width 0.5s var(--ease);
}
.quiz-progress-txt {
  display: inline-block;
  margin-top: 12px;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-mute);
}

.quiz-question {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(26px, 5vw, 40px);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 28px;
}

.quiz-options { display: flex; flex-direction: column; gap: 12px; }
.quiz-option {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 22px;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.quiz-option:hover {
  border-color: var(--coral);
  background: var(--paper);
  transform: translateY(-2px);
}
.quiz-option-emoji { font-size: 26px; line-height: 1; flex-shrink: 0; }
.quiz-option-label {
  flex: 1;
  font-size: 16px; font-weight: 500;
  color: var(--ink);
}
.quiz-option-go {
  color: var(--ink-mute);
  transition: transform 0.3s var(--ease), color 0.3s;
}
.quiz-option:hover .quiz-option-go { color: var(--coral); transform: translateX(4px); }

.quiz-back {
  margin-top: 26px;
  font-size: 12px; letter-spacing: 0.1em;
  color: var(--ink-mute);
  transition: color 0.3s;
}
.quiz-back:hover { color: var(--ink); }

/* Resultado */
.quiz-result { text-align: center; }
.quiz-result-eyebrow { margin-bottom: 10px; }
.quiz-result-badge {
  display: inline-block;
  margin-bottom: 22px;
  padding: 7px 18px;
  border-radius: 100px;
  background: var(--coral);
  color: #fff;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.25em; text-transform: uppercase;
}

.quiz-hero {
  display: flex;
  gap: clamp(20px, 4vw, 36px);
  align-items: center;
  text-align: left;
  padding: clamp(20px, 4vw, 32px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
}
.quiz-hero-img {
  flex-shrink: 0;
  width: clamp(120px, 34%, 190px);
  aspect-ratio: 3 / 4;
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.quiz-hero-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.quiz-hero-info { flex: 1; min-width: 0; }
.quiz-hero-profile {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--coral);
}
.quiz-hero-name {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(24px, 4.5vw, 34px);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 10px;
}
.quiz-hero-scent {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.quiz-hero-price {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 18px;
}
.quiz-hero-actions { display: flex; flex-direction: column; gap: 10px; }
.quiz-hero-actions .wa-cta { width: 100%; padding: 16px 24px; border-radius: 12px; }
.wa-cta.is-wa { background: #25D366; }
.wa-cta.is-wa::before { background: #1fbe5b; }

.quiz-ficha-link {
  margin-top: 14px;
  font-size: 12px; letter-spacing: 0.05em;
  color: var(--ink-mute);
  transition: color 0.3s;
}
.quiz-ficha-link:hover { color: var(--coral); }

.quiz-alts { margin-top: 46px; }
.quiz-alts-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 22px;
}
.quiz-alts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.quiz-repeat {
  margin-top: 44px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 0.3s;
}
.quiz-repeat:hover { color: var(--ink); }

@media (max-width: 560px) {
  .quiz-hero { flex-direction: column; text-align: center; align-items: stretch; }
  .quiz-hero-img { width: 62%; margin: 0 auto; }
  .quiz-hero-profile { margin-inline: auto; }
}

@media (max-width: 480px) {
  .cart-panel { width: 100%; max-width: 100%; }
}

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