/* ==========================================================================
   BEET & BLOOM — styles
   ========================================================================== */

:root {
  /* Paleta */
  --bordo:        #5A112E;
  --marron:       #2C201A;   /* marrón oscuro — texto del header sólido / monograma */
  --crema:        #E8E9E3;
  --blanco:       #FFFFFF;
  --rosa:         #BA3E76;
  --naranja:      #EB753F;
  --negro:        #121212;
  --gris-textura: #B8B4A8;
  --gris-ui:      #8E8E93;
  --cream-2:      #F5F3EE;

  /* Tipografía */
  --serif: 'Tenor Sans', serif;
  --sans:  'DM Sans', sans-serif;

  /* Escala */
  --t-hero:       clamp(28px, 6vw, 48px);
  --t-seccion:    clamp(32px, 5vw, 56px);
  --t-destacados: clamp(28px, 4vw, 40px);

  --pad-x: 8vw;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--negro);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

a { color: inherit; text-decoration: none; cursor: pointer; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--bordo);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Átomos tipográficos
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 0;
}
.eyebrow--gris  { color: var(--gris-ui); }
.eyebrow--crema { color: var(--crema); letter-spacing: 0.15em; }

/* Link con border-bottom que crece 0 → 100% (manifiesto) */
.link-underline {
  position: relative;
  display: inline-block;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--bordo);
  padding-bottom: 4px;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width 0.5s var(--ease);
}
.link-underline:hover::after,
.link-underline:focus-visible::after { width: 100%; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* Pantalla completa: la sección de la frase recién asoma al scrollear.
     svh evita que la barra del navegador mobile deje una franja abajo. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 0 var(--pad-x);
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__inner { position: relative; max-width: 640px; }
.hero__title {
  font-size: var(--t-hero);
  color: var(--crema);
  letter-spacing: 0.02em;
}
.hero__title { text-shadow: 0 2px 20px rgba(0,0,0,0.4); }
.hero__copy {
  font-style: italic;
  color: var(--crema);
  margin: 16px 0 0;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

/* Entrada: stagger palabra por palabra + fade del micro-copy */
.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}
.hero__title .word.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.hero__copy { opacity: 0.85; }
.hero__copy[data-fade] { opacity: 0; }
.hero__copy.is-in { opacity: 0.85; transition: opacity 0.8s var(--ease); }

.hero__chevron {
  position: absolute;
  left: 50%;
  bottom: 32px;
  margin-left: -14px;
  color: var(--crema);
  animation: chevron-bounce 2s ease-in-out infinite;
}
.hero__chevron svg { width: 28px; height: 28px; }

@keyframes chevron-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* --------------------------------------------------------------------------
   Patrón de rombos — SVG inline animado con GSAP/ScrollTrigger
   -------------------------------------------------------------------------- */

.pattern-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   MANIFIESTO
   -------------------------------------------------------------------------- */

.manifiesto {
  position: relative;
  overflow: hidden;
  padding: 140px var(--pad-x);
  text-align: center;
  background: var(--crema);
}
/* Variante con el patrón de rombos en movimiento de fondo: bloque compacto,
   apenas más que la frase + el link. El crema es la base sobre la que se lee
   la retícula gris. */
.manifiesto--patron {
  background: var(--crema);
  padding: 128px var(--pad-x);
}
/* Variante plana — sin parallax de rombos, con el patrón B&B como textura muy
   sutil de fondo (marca de agua). El pseudo-elemento aísla la opacidad para no
   afectar la legibilidad del copy y el CTA. */
.manifiesto--plain {
  position: relative;
  background: var(--crema);
  padding: 128px var(--pad-x);
  isolation: isolate;
}
.manifiesto--plain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/patterns/PATRONNUEVOBEET.png');
  background-repeat: repeat;
  background-size: 220px auto;
  background-position: center;
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
}

/* Patrón B&B reusable — misma textura que el manifiesto de Home, para reemplazar
   la retícula de rombos animada en cualquier sección que la usaba. Se coloca como
   div hijo con position:absolute inset 0; requiere que el contenedor sea relative
   + overflow:hidden y que el contenido interno tenga z-index > 0. */
.bb-pattern {
  position: absolute;
  inset: 0;
  background-image: url('assets/patterns/PATRONNUEVOBEET.png');
  background-repeat: repeat;
  background-size: 220px auto;
  background-position: center;
  opacity: 0.028;
  pointer-events: none;
  z-index: 0;
}
/* Sobre fondos oscuros (bordó) invertimos para que el patrón se lea en cream. */
.bb-pattern--dark {
  filter: invert(1);
  opacity: 0.05;
}
.manifiesto--plain .manifiesto__copy {
  font-size: clamp(18px, 1.8vw, 22px);
  max-width: 660px;
}
.manifiesto--plain .manifiesto__cta {
  display: block;
  width: fit-content;
  margin: 28px auto 0;
  color: var(--marron);
}
.manifiesto__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}
.manifiesto__copy {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--negro);
  max-width: 720px;
  margin: 0 auto;
}
/* Un escalón menos que el resto de los manifiestos */
.manifiesto--patron .manifiesto__copy {
  font-size: clamp(18px, 1.8vw, 22px);
  max-width: 660px;
}

.manifiesto__cta {
  display: inline-block;
  margin-top: 40px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bordo);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--bordo);
  transition: border-color 0.3s var(--ease);
}
.manifiesto__cta-arrow {
  display: inline-block;
  margin-left: 10px;
  transition: transform 0.3s var(--ease);
}
.manifiesto__cta:hover .manifiesto__cta-arrow { transform: translateX(6px); }

/* Sobre el patrón el link va en marrón oscuro (no bordó): más contraste contra
   el crema + la retícula gris. Queda debajo del texto, más pegado que en las
   otras variantes porque el bloque es compacto. */
/* El CTA además entra recién cuando la frase terminó de armarse. */
.manifiesto--patron .manifiesto__cta {
  display: block;
  width: fit-content;
  margin: 28px auto 0;
  color: var(--marron);
  opacity: 0;
  transform: translateY(14px);
}
.manifiesto--patron.is-in .manifiesto__cta {
  opacity: 1;
  transform: none;
  transition: opacity 1.2s var(--ease-soft) 1.9s, transform 1.2s var(--ease-soft) 1.9s;
}

/* --------------------------------------------------------------------------
   BANNERS DE CATEGORÍA
   Imagen 100% estática. El hover vive solo en el texto.
   -------------------------------------------------------------------------- */

.banner {
  position: relative;
  display: block;
  overflow: hidden;
}
.banner--hero    { height: 90vh; }
.banner--md      { height: 72vh; }
.banner--perfume { height: 65vh; }

.banner__media { position: absolute; inset: 0; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; }
.banner--perfume .banner__media img { object-position: center 30%; }

/* Overlay direccional: se difumina desde el borde inferior y desaparece a la mitad */
.banner__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.banner--dark .banner__media::after {
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 30%, transparent 60%);
}
.banner--light .banner__media::after {
  background: linear-gradient(to top, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.2) 25%, transparent 55%);
}

/* Texto reducido a título + CTA, anclado abajo y centrado */
.banner__text {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  padding: 0 24px;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.banner--dark  .banner__title,
.banner--dark  .link-cta { color: var(--crema); }
.banner--light .banner__title,
.banner--light .link-cta { color: var(--negro); }

.banner__title {
  position: relative;
  display: block;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0;
}
/* Línea que se traza bajo el título en hover (sin afectar el layout) */
.banner__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 0;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.banner:hover .banner__title::after { width: 60px; }

.link-cta {
  display: inline-block;
  margin-top: 24px;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 70%, transparent);
  transition: border-color 0.3s var(--ease);
}

.link-cta__arrow {
  display: inline-block;
  margin-left: 12px;
  transition: transform 0.3s var(--ease);
}
.banner:hover .link-cta__arrow { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   Banner editorial "Conocé tu aroma" (Scent Advisor) — tratamiento distinto:
   overlay oscuro arriba, texto arriba-izquierda, línea que se extiende en hover
   -------------------------------------------------------------------------- */

/* Imagen editorial limpia (sin texto encima) + banda crema con el titular debajo */
.qbanner { display: block; }
.qbanner__media { height: 68vh; overflow: hidden; }
.qbanner__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }

.qbanner__band {
  background: var(--crema);
  padding: 64px 8vw;
  text-align: center;
}
.qbanner__title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.15;
  color: var(--negro);
  margin: 0;
}
.qbanner__rule {
  display: block;
  width: 40px;
  height: 1px;
  margin: 20px auto 0;
  background: var(--bordo);
  opacity: 0.5;
  transition: width 0.5s var(--ease);
}
.qbanner:hover .qbanner__rule { width: 80px; opacity: 1; }
.qbanner__cta {
  display: inline-block;
  margin-top: 20px;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bordo);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.qbanner__arrow { display: inline-block; margin-left: 10px; transition: transform 0.3s var(--ease); }
.qbanner:hover .qbanner__arrow { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   Banner REFILL — full-width, continuo a Vela + Lámpara
   -------------------------------------------------------------------------- */
.refillb {
  position: relative;
  display: block;
  height: 82vh;
  margin: 24px calc(-1 * var(--pad-x)) 0;
  overflow: hidden;
}
.refillb__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Sombra negra en la parte inferior para que el titular centrado se lea */
.refillb::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.12) 28%, transparent 52%);
}

.refillb__text {
  position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%);
  max-width: 560px; z-index: 2; text-align: center;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.refillb__title {
  font-family: var(--serif); font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1; color: var(--crema); margin: 12px 0 0;
}
.refillb__micro { font-style: italic; font-size: 15px; color: var(--crema); opacity: 0.9; margin: 14px 0 0; }
.refillb__cta {
  display: inline-block; margin-top: 22px;
  font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--crema); padding-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--crema) 70%, transparent);
  transition: border-color 0.3s var(--ease);
}
.refillb:hover .qbanner__arrow { transform: translateX(6px); }

/* Anotación chica: sello circular + una línea (sin flecha) */
.refillb__note {
  position: absolute; top: 40px; right: 8vw; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  color: var(--crema);
}
.refillb__seal {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  border: 1px solid rgba(232, 233, 227, 0.55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.refillb__drop { width: 15px; height: 15px; }
.refillb__sealtxt { font-weight: 500; font-size: 8px; letter-spacing: 0.12em; }
.refillb__cap {
  font-family: var(--serif); font-style: italic; font-size: 13px; line-height: 1.3;
  margin: 0; max-width: 120px; text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* Fila de 2 banners sobre fondo blanco liso */
.franja {
  background: var(--blanco);
  padding: 120px 8vw 0;
}
.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  /* Mismo aire que el padding-top de .franja: la franja blanca queda simétrica
     arriba y abajo de la fila. */
  margin: 0 0 120px;
}

/* Tira crema con patrón animado: se ve el fondo en movimiento antes del perfume */
.aire {
  position: relative;
  overflow: hidden;
  height: 220px;
  background: var(--crema);
}

/* Divisor entre dos banners que si no quedarían pegados (refill / flor).
   Es un respiro, no una sección: alto acotado y nada de contenido adentro. */
.aire--divisor { height: clamp(120px, 13vw, 170px); }

/* --------------------------------------------------------------------------
   PRODUCTOS DESTACADOS
   -------------------------------------------------------------------------- */

.destacados {
  position: relative;
  overflow: hidden;
  background: var(--crema);
  padding: 120px var(--pad-x);
}

.destacados__head {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 56px;
}
.destacados__title {
  font-size: var(--t-destacados);
  color: var(--negro);
  margin-top: 14px;
}

.destacados__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1120px;
  margin: 0 auto;
}

/* La card crema contiene imagen (~65%) + texto (~35%) */
.prod {
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  padding: 40px 32px;
  background: var(--cream-2);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.03);
  text-align: center;
}
.prod__media {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.prod__media img {
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  transition: transform 0.5s var(--ease);
}
.prod:hover .prod__media img { transform: scale(1.03); }

.prod__info { margin-top: 32px; }
.prod__name {
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--negro);
}
.prod__micro {
  font-size: 13px;
  color: var(--gris-ui);
  margin: 8px 0 0;
}

/* Link bajo las cards */
.destacados__more {
  position: relative;
  z-index: 1;
  display: block;
  width: fit-content;
  margin: 48px auto 0;
  padding-bottom: 4px;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--bordo);
  border-bottom: 1px solid var(--bordo);
  transition: border-color 0.3s var(--ease);
}

/* --------------------------------------------------------------------------
   CTA — subrayado que se traza
   Un solo comportamiento para todos los "VER MÁS" / "DESCUBRIR →": el texto no
   cambia de color (nada de naranja), la línea se dibuja de izquierda a derecha
   y la flecha se corre 6px. currentColor deja la línea en bordó sobre fondos
   claros y en crema sobre los banners oscuros.
   -------------------------------------------------------------------------- */

.manifiesto__cta,
.link-cta,
.qbanner__cta,
.refillb__cta,
.destacados__more,
.menu-card__link {
  position: relative;
  padding-bottom: 0;
  border-bottom: 0;
}

.manifiesto__cta::after,
.link-cta::after,
.qbanner__cta::after,
.refillb__cta::after,
.destacados__more::after,
.menu-card__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.manifiesto__cta:hover::after,
.destacados__more:hover::after,
.banner:hover .link-cta::after,
.qbanner:hover .qbanner__cta::after,
.refillb:hover .refillb__cta::after,
.menu-card:hover .menu-card__link::after { width: 100%; }

/* --------------------------------------------------------------------------
   NAVBAR (3 columnas) — top absoluto del sitio.
   Transparente sobre el hero, blanco sólido al scrollear.
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 16px var(--pad-x);
  background: transparent;
  transition: background 0.5s var(--ease-soft),
              box-shadow 0.5s var(--ease-soft);
}

/* Estado sólido: fondo blanco + sombra sutil (fade suave) */
.nav.is-solid {
  background: var(--blanco);
  box-shadow: 0 1px 0 rgba(44, 32, 26, 0.06), 0 8px 26px rgba(44, 32, 26, 0.05);
}

/* Páginas sin hero: el body reserva la altura del header fijo */
.has-fixed-nav { padding-top: 64px; }

.nav__left   { display: flex; align-items: center; gap: 32px; }
.nav__center { justify-self: center; }
.nav__right  { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }

/* Elementos claros sobre el hero */
.nav__burger,
.nav__lang,
.nav__ico {
  border: 0;
  background: none;
  padding: 0;
  color: var(--crema);
  display: inline-flex;
  align-items: center;
  transition: color 0.4s var(--ease-soft);
}
.nav__burger svg,
.nav__ico svg { width: 22px; height: 22px; }
.nav__lang {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  gap: 4px;
}
.nav__ico { position: relative; }

/* Header sólido → elementos en marrón oscuro */
.nav.is-solid .nav__burger,
.nav.is-solid .nav__lang,
.nav.is-solid .nav__ico { color: var(--marron); }
.nav__burger:hover, .nav__lang:hover, .nav__ico:hover,
.nav.is-solid .nav__burger:hover,
.nav.is-solid .nav__lang:hover,
.nav.is-solid .nav__ico:hover { color: var(--bordo); }

/* Logo centrado — cross-fade claro (hero) / oscuro (sólido) */
.nav__logo {
  position: relative;
  display: inline-flex;
  line-height: 0;
  transition: opacity 0.3s var(--ease);
}
.nav__logo:hover { opacity: 0.72; }
.nav__logo img {
  width: clamp(150px, 14vw, 185px);
  height: auto;
  display: block;
  transition: opacity 0.5s var(--ease-soft);
}
.nav__logo-dark { position: absolute; top: 0; left: 0; opacity: 0; }
.nav.is-solid .nav__logo-light { opacity: 0; }
.nav.is-solid .nav__logo-dark  { opacity: 1; }

.nav__badge {
  position: absolute;
  top: -6px; right: -8px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--bordo);
  color: var(--crema);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   MENÚ — sidebar izquierdo, solo texto (referencia: Six Senses)
   -------------------------------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  transition: visibility 0s linear 0.5s;
}
.menu.is-open { visibility: visible; transition: visibility 0s; }

/* Backdrop: oscurece el resto de la página; el contenido sigue visible detrás */
.menu__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(20, 12, 10, 0.55);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.5s var(--ease);
}
.menu.is-open .menu__backdrop { opacity: 1; }

/* Panel: sidebar desde el borde IZQUIERDO, ~1/3 del ancho */
.menu__panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 35%;
  min-width: 320px;
  max-width: 460px;
  background: var(--cream-2);
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease-soft);
  overflow-y: auto;
  box-shadow: 2px 0 24px rgba(0, 0, 0, 0.08);
}
.menu.is-open .menu__panel { transform: translateX(0); }
.menu__inner {
  padding: 32px 40px 40px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Header del panel — solo la X arriba */
.menu__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--marron);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.menu__close:hover { color: var(--bordo); }
.menu__close svg { width: 22px; height: 22px; }

/* Barra de búsqueda — debajo del header, arriba del listado */
.menu__search {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(94, 60, 45, 0.18);
  transition: border-color 0.3s var(--ease);
}
.menu__search:focus-within { border-bottom-color: var(--bordo); }
.menu__search-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--marron);
  opacity: 0.75;
}
.menu__search-input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--negro);
  padding: 2px 0;
}
.menu__search-input::placeholder {
  color: var(--gris-ui);
  font-style: italic;
  opacity: 1;
}
.menu__search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Cuerpo — listado vertical de categorías, texto solo */
.menu__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 32px;
}
.menu__nav { width: 100%; }

.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu__list a {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--marron);
  padding: 6px 0;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease-soft);
}
.menu__list a:hover { color: var(--bordo); transform: translateX(6px); }

/* --------------------------------------------------------------------------
   TRÍO DE CATEGORÍAS (Home) — imagen arriba, bloque de texto blanco debajo
   -------------------------------------------------------------------------- */

.trio {
  padding: 0;
  background: var(--blanco);
}
.trio__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  max-width: none;
  margin: 0;
}
.tcard {
  position: relative;
  display: block;
  height: clamp(480px, 60vh, 620px);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}
.tcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1s var(--ease-soft);
}
.tcard:hover .tcard__img { transform: scale(1.04); }

.tcard__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 8%;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.28) 55%,
    rgba(0, 0, 0, 0.42) 100%);
  transition: background 0.5s var(--ease);
}
.tcard:hover .tcard__overlay {
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.38) 55%,
    rgba(0, 0, 0, 0.5) 100%);
}

.tcard__eyebrow {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
}
.tcard__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15;
}
.tcard__rule {
  display: inline-block;
  width: 46px;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
  margin: 24px 0;
}
.tcard__cta {
  display: inline-block;
  padding: 12px 26px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.tcard:hover .tcard__cta {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* --------------------------------------------------------------------------
   STUB — páginas placeholder (solo título de sección)
   -------------------------------------------------------------------------- */

.stub {
  min-height: 84vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px var(--pad-x);
  background: var(--cream-2);
}
.stub__inner { max-width: 640px; }
.stub__eyebrow { color: var(--gris-ui); margin-bottom: 20px; }
.stub__title {
  font-family: var(--serif);
  font-size: clamp(40px, 7vw, 84px);
  color: var(--marron);
  line-height: 1.05;
}
.stub__soon {
  margin: 22px 0 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gris-ui);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.footer {
  background: var(--cream-2);
  /* Separador: corta el blanco de la sección de arriba a lo ancho. */
  border-top: 1px solid var(--crema);
  padding: 80px var(--pad-x) 40px;
}

/* --- Fila 1: marca + tres columnas de links --- */
.footer__grid {
  display: grid;
  grid-template-columns: 30% 23% 23% 24%;
  gap: 40px;
  align-items: start;
}

.footer__wordmark { margin: 0; line-height: 0; }
.footer__wordmark img { width: 180px; height: auto; display: block; }
.footer__tagline {
  font-style: italic;
  font-size: 13px;
  color: var(--gris-ui);
  margin: 12px 0 0;
}

.footer__head {
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gris-ui);
  margin: 0;
}
.footer__head--wide { letter-spacing: 0.25em; }

.footer__list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  color: var(--negro);
}
.footer__list a {
  position: relative;
  display: inline-block;
  color: inherit;
  transition: color 0.3s var(--ease);
}
.footer__list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--bordo);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer__list a:hover { color: var(--bordo); }
.footer__list a:hover::after { width: 100%; }
.footer__plain { color: var(--negro); }

/* --- Fila 2: legal + redes --- */
.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--crema);
  padding: 36px 0 0;
}
.footer__copy { font-size: 12px; color: var(--gris-ui); margin: 0; }

.footer__social { display: flex; gap: 20px; }
.footer__social a { color: var(--negro); transition: color 0.3s var(--ease); }
.footer__social a:hover { color: var(--bordo); }
.footer__social svg { width: 20px; height: 20px; display: block; }
/* Íconos sociales dentro de la columna CONTACTO, en fila debajo del listado */
.footer__social--col { margin-top: 20px; gap: 16px; }
.footer__social--col a { color: var(--marron); }
.footer__social--col svg { width: 18px; height: 18px; }

/* Link discreto de derecho de arrepentimiento (Ley 24.240) */
.footer__arrepentimiento {
  font-size: 12px;
  color: var(--gris-ui);
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.footer__arrepentimiento:hover {
  color: var(--bordo);
  border-bottom-color: var(--bordo);
}

/* --------------------------------------------------------------------------
   PÁGINAS DE POLÍTICAS — fondo blanco, columna centrada legible
   -------------------------------------------------------------------------- */

.policy {
  background: var(--blanco);
  padding: 160px var(--pad-x) 112px;
}
.policy__inner {
  max-width: 720px;
  margin: 0 auto;
}
.policy__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gris-ui);
  margin: 0 0 20px;
}
.policy__title {
  font-family: var(--serif);
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bordo);
  margin: 0 0 56px;
}
.policy__lead {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  color: var(--negro);
  margin: 0 0 44px;
}
.policy__section { margin: 0 0 44px; }
.policy__section:last-child { margin-bottom: 0; }
.policy__h2 {
  font-family: var(--serif);
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.3;
  color: var(--marron);
  margin: 0 0 18px;
}
.policy p,
.policy ul,
.policy ol {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--negro);
  margin: 0 0 16px;
}
.policy ul,
.policy ol { padding-left: 22px; }
.policy li { margin: 0 0 8px; }
.policy strong { color: var(--bordo); font-weight: 600; }
.policy em { color: var(--marron); font-style: italic; }

@media (max-width: 720px) {
  .policy { padding: 112px var(--pad-x) 72px; }
  .policy__title { margin-bottom: 40px; }
}


/* --------------------------------------------------------------------------
   WIDGET FLOTANTE
   -------------------------------------------------------------------------- */

.widget {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.widget__btn {
  width: 72px; height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(232, 233, 227, 0.3);
  border-radius: 50%;
  background: var(--bordo);
  box-shadow: 0 12px 32px rgba(90, 17, 46, 0.4), 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Entra 2s tras el load (via .is-ready en JS) */
  opacity: 0;
  transform: scale(0.8);
}
.widget.is-ready .widget__btn { opacity: 1; transform: scale(1); }
.widget.is-ready .widget__btn:hover {
  transform: scale(1.08);
  box-shadow: 0 16px 40px rgba(90, 17, 46, 0.5), 0 6px 12px rgba(0,0,0,0.14);
}
.widget__btn img { width: 38px; height: auto; display: block; }

.widget__panel {
  width: 280px;
  padding: 8px 0;
  background: var(--blanco);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.widget__panel[hidden] { display: none; }
.widget.is-open .widget__panel { transform: scale(1); opacity: 1; }

.widget__opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  font-weight: 500;
  font-size: 14px;
  color: var(--negro);
  transition: background-color 0.3s var(--ease);
}
.widget__opt + .widget__opt { border-top: 1px solid var(--cream-2); }
.widget__opt:hover { background: var(--cream-2); }
.widget__ico { width: 20px; height: 20px; flex: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* ==========================================================================
   SUBPÁGINA — NOSOTROS
   ========================================================================== */

.about-hero {
  position: relative;
  height: 52vh;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.about-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.about-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.3) 100%);
}
.about-hero__mono {
  position: relative;
  width: clamp(90px, 13vw, 150px);
  height: auto;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.4));
  margin: 0;
}
.about-hero__tagline {
  position: relative;
  font-style: italic;
  font-size: clamp(14px, 1.6vw, 18px);
  color: var(--crema);
  opacity: 0.85;
  letter-spacing: 0.05em;
  margin-top: 20px;
}

.section-title {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 44px);
  color: var(--negro);
  text-align: center;
  margin: 0;
}
.about-manifiesto__copy {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.7;
  color: var(--negro);
  max-width: 720px;
  margin: 32px auto 0;
  text-align: center;
}

.valores { background: var(--blanco); padding: 56px var(--pad-x) 120px; }
.valores__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
}
.valores__col .eyebrow { font-size: 11px; color: var(--gris-ui); }
.valores__title { font-family: var(--serif); font-size: 24px; color: var(--negro); margin: 12px 0 0; }
.valores__text { font-size: 15px; line-height: 1.7; color: var(--negro); margin-top: 16px; }

.procesos { position: relative; overflow: hidden; background: var(--bordo); padding: 120px var(--pad-x); }
.procesos__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
  max-width: 1100px; margin: 0 auto;
}
.procesos__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}
.procesos__text .eyebrow { font-size: 11px; color: rgba(232, 233, 227, 0.55); letter-spacing: 0.15em; }
.procesos__title { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 42px); letter-spacing: 0.08em; color: var(--crema); margin: 0; }
.procesos__p { font-size: 16px; line-height: 1.7; color: rgba(232, 233, 227, 0.78); margin-top: 24px; }

/* --- Pullquote editorial ------------------------------------------------ */
/* Padding simétrico arriba/abajo: el bloque queda ópticamente centrado sin
   depender de una altura fija. */
.pullquote {
  background: var(--blanco);
  padding: clamp(112px, 16vh, 176px) var(--pad-x);
}
.pullquote__inner {
  max-width: 860px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* Las reglas crecen desde el centro al entrar en viewport. */
.pullquote__rule {
  display: block; height: 1px; width: 0;
  background: var(--bordo); opacity: 0.3;
  transition: width 1.4s var(--ease-soft);
}
.pullquote.is-in .pullquote__rule { width: 64px; }

.pullquote__eyebrow {
  font-size: 11px; color: var(--gris-ui); letter-spacing: 0.22em;
  margin: 28px 0 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft);
}
.pullquote.is-in .pullquote__eyebrow { opacity: 1; transform: none; }

.pullquote__q {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 4vw, 46px); line-height: 1.32; letter-spacing: -0.01em;
  color: var(--negro);
  margin: 44px 0 0; padding: 0; border: 0;
  text-wrap: balance;
}
/* Reveal palabra por palabra: sube, enfoca y aparece. El delay por palabra
   lo escribe main.js. Sirve para cualquier [data-quote]. */
[data-quote] .word {
  display: inline-block;
  /* Sin desplazamiento: cada palabra se revela en su posición final. Que el
     texto suba desde abajo lo hacía ver barato. */
  opacity: 0; filter: blur(10px);
}
[data-quote] .word.is-in {
  opacity: 1; filter: blur(0);
  transition: opacity 1.4s var(--ease-soft), filter 1.4s var(--ease-soft);
}

.pullquote__attr {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--gris-ui);
  margin: 36px 0 44px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.9s var(--ease-soft) 0.5s, transform 0.9s var(--ease-soft) 0.5s;
}
.pullquote.is-in .pullquote__attr { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-quote] .word { opacity: 1; filter: none; }
  .pullquote__eyebrow,
  .pullquote__attr,
  .manifiesto__cta { opacity: 1; transform: none; }
}

/* ==========================================================================
   SUBPÁGINA — COLECCIONES
   ========================================================================== */

.col-hero {
  position: relative; overflow: hidden;
  background: var(--crema);
  height: 40vh; min-height: 300px;
  padding: clamp(56px, 8vh, 96px) var(--pad-x) clamp(48px, 7vh, 80px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.col-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4vh, 26px);
  margin-top: clamp(24px, 4vh, 44px); /* baja apenas el bloque respecto del centro */
}
.col-hero__title { font-family: var(--serif); font-size: clamp(36px, 5vw, 56px); color: var(--negro); margin: 0; }
.col-hero__sub { font-style: italic; font-size: 18px; color: var(--gris-ui); margin-top: 12px; }
.col-hero__isotype {
  display: block;
  width: clamp(64px, 9vw, 108px);
  height: auto;
}
.col-hero__tagline {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 20px);
  letter-spacing: 0.01em;
  color: var(--blanco);
  text-shadow: 0 1px 16px rgba(38, 8, 20, 0.45);
}

/* Variante con foto de fondo: misma altura, sólo cambia el fondo. */
.col-hero--img { background: var(--bordo); }
.col-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
/* Velo plano (sin degradé) sobre la foto: la textura es rosa pálida y el texto
   va en blanco, así que necesita oscurecerse pareja de punta a punta. Un
   degradé dejaría el titular con contraste distinto según dónde caiga. */
.col-hero--img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(38, 8, 20, 0.34);
}
.col-hero--img .col-hero__title {
  color: var(--blanco);
  text-shadow: 0 2px 24px rgba(38, 8, 20, 0.5);
}
.col-hero--img .col-hero__sub {
  color: var(--blanco);
  opacity: 0.9;
  text-shadow: 0 1px 16px rgba(38, 8, 20, 0.45);
}

.filters {
  position: sticky; top: 73px; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 20px 8vw;
  background: var(--blanco);
  border-bottom: 1px solid var(--crema);
}
/* Filtros editoriales: sin píldoras ni bordes. El serif de la marca, en caja
   baja, y una línea fina que se traza para marcar la categoría activa. */
.filters__chips { display: flex; gap: 36px; flex-wrap: wrap; align-items: baseline; }
.chip {
  position: relative;
  padding: 0 0 6px;
  border: 0; border-radius: 0; background: none;
  font-family: var(--serif); font-weight: 400; font-size: 16px;
  text-transform: none; letter-spacing: 0.02em;
  color: var(--gris-ui); cursor: pointer;
  transition: color .4s var(--ease-soft);
}
.chip::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--bordo);
  transition: width .6s cubic-bezier(0.4, 0, 0.2, 1);
}
.chip:hover { color: var(--negro); }
.chip:hover::after { width: 100%; }
.chip.is-active { color: var(--bordo); }
.chip.is-active::after { width: 100%; }

.sort { position: relative; }
.sort__btn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: none;
  font-family: var(--serif); font-size: 15px; color: var(--negro); cursor: pointer;
}
.sort__eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--gris-ui);
}
.sort__label { font-family: var(--serif); font-size: 15px; color: var(--negro); }
.sort__caret { font-size: 10px; color: var(--gris-ui); transition: transform .3s var(--ease); }
.sort.is-open .sort__caret { transform: rotate(180deg); }

.sort__menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 220px;
  background: var(--blanco); border: 1px solid var(--crema); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08); padding: 6px 0;
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease; z-index: 5;
}
.sort.is-open .sort__menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sort__menu button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 12px 20px; font-family: var(--serif); font-size: 15px; color: var(--negro);
  cursor: pointer; transition: background-color .2s var(--ease);
}
.sort__menu button:hover { background: var(--cream-2); }

.col-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 60px 8vw; }
.col-card { background: var(--cream-2); display: flex; flex-direction: column; cursor: pointer; }
/* La foto va al ras: llena el ancho de la card y llega al borde superior. El
   crema de la card queda sólo en el bloque de textos de abajo. */
.col-card__media { aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.col-card__media img { width: 100%; height: 100%; object-fit: cover; }
.col-card__media--soon { color: var(--gris-ui); font-size: 13px; letter-spacing: 0.05em; }
.col-card__info { padding: 0 20px 24px; text-align: center; }
.col-card__name {
  position: relative; display: inline-block; font-family: var(--serif);
  font-size: 16px; color: var(--negro); margin: 0; padding-bottom: 8px;
}
.col-card__name::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 0; height: 1px; background: var(--bordo); transition: width .5s var(--ease);
}
.col-card:hover .col-card__name::after { width: 30px; }
.col-card__cat { font-size: 12px; color: var(--gris-ui); margin: 4px 0 0; }
.col-card__price { font-weight: 500; font-size: 14px; color: var(--negro); margin: 8px 0 0; }


/* ==========================================================================
   SCENT ADVISOR — fragancias.html (quiz SPA)
   ========================================================================== */

.quiz { position: relative; --qv-min: calc(100dvh - 110px); }

.qv { display: none; }
.qv.is-active { display: flex; animation: qv-in 0.5s ease both; }
@keyframes qv-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: none; }
}
.qv.is-leaving { animation: qv-out 0.4s ease both; }
@keyframes qv-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(-60px); }
}

.q-eyebrow { font-size: 11px; letter-spacing: 0.25em; color: var(--gris-ui); margin: 0; }

/* Botones */
.q-btn {
  display: inline-block;
  margin-top: 40px;
  padding: 18px 40px;
  border: 0;
  border-radius: 2px;
  background: var(--bordo);
  color: var(--crema);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}
.q-btn:hover { background: #7A2246; }
.q-btn--full { width: 100%; }
.q-btn-sec {
  display: inline-block;
  margin-top: 16px;
  padding: 0 0 3px;
  border: 0; border-bottom: 1px solid var(--negro);
  background: none;
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--negro);
  cursor: pointer;
}

/* ---- VISTA 0: INTRO (split) ---- */
.q-intro { min-height: var(--qv-min); }
.q-intro__media { width: 50%; position: relative; overflow: hidden; }
.q-intro__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.q-intro__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 60%, rgba(90,17,46,0.15) 100%);
}
.q-intro__panel {
  width: 50%; position: relative; overflow: hidden;
  background: var(--crema);
  display: flex; align-items: center; justify-content: center;
}
.q-intro__content { position: relative; z-index: 1; max-width: 480px; padding: 8vw; }
.q-intro__title {
  font-family: var(--serif); font-size: clamp(32px, 4vw, 48px);
  line-height: 1.2; color: var(--negro); margin: 20px 0 0;
}
.q-intro__p { font-size: 16px; line-height: 1.7; color: var(--negro); margin: 24px 0 0; }
.q-intro__micro { font-size: 12px; color: var(--gris-ui); margin: 20px 0 0; }

/* ---- VISTAS 1–5: PREGUNTAS ---- */
.q-question {
  position: relative; overflow: hidden;
  flex-direction: column;
  min-height: var(--qv-min);
}
.q-question.q-pattern { background: var(--crema); }
.q-question.q-white { background: var(--blanco); }

.q-head {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 40px 8vw 0;
}
.q-counter { font-size: 12px; letter-spacing: 0.15em; color: var(--gris-ui); }
.q-exit {
  border: 0; background: none; cursor: pointer;
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--negro);
  transition: color 0.3s var(--ease);
}
.q-exit:hover { color: var(--bordo); }

.q-body {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 8vw 60px;
  text-align: center;
}
.q-title {
  font-family: var(--serif); font-size: clamp(28px, 3.5vw, 42px);
  color: var(--negro); margin: 0 0 60px;
}

.q-grid { display: grid; width: 100%; }
.q-grid--2x2 { grid-template-columns: 1fr 1fr; gap: 24px; }
.q-grid--3   { grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; }
.q-grid--palette { max-width: 800px; }
.q-grid--momento { max-width: 720px; }
.q-grid--familia { max-width: 800px; }

.q-opt {
  position: relative; cursor: pointer;
  border: 2px solid transparent; background: none;
  font-family: inherit; text-align: left;
  transition: transform 0.4s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.q-opt.is-selected { border-color: var(--bordo); }

/* Paleta (2x2) */
.palette {
  aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden;
  display: flex; align-items: flex-end; padding: 20px;
}
.palette--calida    { background: linear-gradient(135deg, #EB753F, #C15A28); }
.palette--sombra    { background: #5A112E; }
.palette--neutra    { background: linear-gradient(135deg, #E8E9E3, #C4C0B4); }
.palette--contraste { background: #121212; }
.palette:hover { transform: scale(1.02); border-color: var(--bordo); }
.palette__name { font-family: var(--serif); font-size: 18px; color: var(--negro); }
.palette__name.crema { color: var(--crema); }

/* Emoción (stack) */
.q-stack { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 640px; }
.emotion {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  background: var(--cream-2); padding: 32px 40px; border-radius: 4px;
  border-left: 3px solid transparent;
}
.emotion:hover { background: var(--crema); border-left-color: var(--bordo); }
.emotion.is-selected { border-color: transparent; border-left-color: var(--bordo); }
.emotion__word { font-family: var(--serif); font-size: 28px; color: var(--negro); }
.emotion__desc { font-size: 14px; line-height: 1.5; color: var(--gris-ui); text-align: right; }

/* Momento (2x2 con ícono) */
.momento {
  display: flex; align-items: center; gap: 20px;
  aspect-ratio: 5 / 2; background: var(--blanco); border: 1px solid var(--crema);
  border-radius: 4px; padding: 0 28px;
}
.momento:hover { border-color: var(--bordo); }
.momento.is-selected { border-color: var(--bordo); }
.q-ic { width: 40px; height: 40px; flex: none; color: var(--negro); }
.momento__t { display: flex; flex-direction: column; }
.momento__title { font-family: var(--serif); font-size: 22px; color: var(--negro); }
.momento__micro { font-size: 13px; color: var(--gris-ui); margin-top: 2px; }

/* Familia (2x2 grande) */
.familia {
  aspect-ratio: 3 / 4; border-radius: 4px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: 28px;
}
.familia--citrica   { background: #F5EDD8; }
.familia--floral    { background: #F5E1E5; }
.familia--amaderada { background: #D4C4A8; }
.familia--especiada { background: #A83A3A; }
.familia:hover { transform: scale(1.02); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
.familia.is-selected { border-color: var(--bordo); }
.familia__name { font-family: var(--serif); font-size: 32px; color: var(--negro); }
.familia__name.crema { color: var(--crema); }
.familia__desc { font-style: italic; font-size: 14px; color: var(--negro); margin-top: 8px; }
.familia__desc.crema { color: var(--crema); }

/* Ritual (3 col) */
.ritual {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  aspect-ratio: 3 / 4; background: var(--blanco); border: 1px solid var(--crema);
  border-radius: 4px; padding: 32px;
}
.ritual:hover { border-color: var(--bordo); }
.ritual.is-selected { border-color: var(--bordo); }
.ritual__media {
  flex: 1; display: flex; align-items: center; justify-content: center;
  width: 100%; overflow: hidden;
}
.ritual__media img { max-height: 200px; max-width: 100%; object-fit: contain; transition: transform 0.4s var(--ease); }
.ritual:hover .ritual__media img { transform: scale(1.05); }
.ritual__media--soon { color: var(--gris-ui); font-size: 13px; letter-spacing: 0.05em; }
.ritual__name { font-family: var(--serif); font-size: 20px; color: var(--negro); margin-top: 16px; }
.ritual__desc { font-size: 13px; color: var(--gris-ui); margin-top: 6px; }

.q-unsure { margin-top: 40px; font-size: 13px; color: var(--gris-ui); }
.q-unsure__link {
  border: 0; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; color: var(--bordo);
}
.q-unsure__link:hover { text-decoration: underline; }

/* ---- VISTA 6: RESULTADO (split) ---- */
.q-result { min-height: var(--qv-min); }
.q-result__media {
  position: relative; width: 50%;
  background: var(--cream-2);
  display: flex; align-items: center; justify-content: center;
  padding: 80px;
}
.q-result__media img { max-width: 100%; max-height: 60vh; object-fit: contain; }
.q-result__badge {
  position: absolute; left: 40px; bottom: 40px;
  font-family: var(--sans); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.25em; color: var(--bordo);
}
.q-result__panel {
  position: relative; overflow: hidden; width: 50%;
  background: var(--crema);
  display: flex; align-items: center;
}
.q-result__content { position: relative; z-index: 1; max-width: 480px; padding: 8vw; }
.q-result__name {
  font-family: var(--serif); font-size: clamp(36px, 4vw, 52px);
  color: var(--negro); margin: 16px 0 0; line-height: 1.15;
}
.q-result__ctx {
  font-family: var(--serif); font-style: italic; font-size: 18px;
  line-height: 1.6; color: var(--negro); margin: 24px 0 0;
}
.q-result__notes { margin-top: 32px; }
.q-notes__eyebrow { font-size: 10px; color: var(--gris-ui); margin: 0 0 10px; }
.q-note { display: flex; gap: 8px; font-size: 14px; color: var(--negro); margin-top: 8px; }
.q-note b { font-weight: 500; min-width: 68px; }
.q-restart { display: inline-block; margin-top: 32px; font-size: 12px; color: var(--gris-ui); }
.q-restart:hover { color: var(--bordo); }

/* ---- MODAL DE SALIDA ---- */
.q-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6);
}
.q-modal[hidden] { display: none; }
.q-modal__card {
  max-width: 400px; width: calc(100% - 40px);
  background: var(--blanco); border-radius: 8px; padding: 40px; text-align: center;
}
.q-modal__title { font-family: var(--serif); font-size: 22px; color: var(--negro); margin: 0; }
.q-modal__text { font-size: 14px; color: var(--negro); margin: 12px 0 0; }
.q-modal__actions { display: flex; gap: 12px; margin-top: 28px; }
.q-modal__cancel, .q-modal__confirm {
  flex: 1; padding: 14px; border-radius: 2px; cursor: pointer;
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.15em;
}
.q-modal__cancel { border: 1px solid var(--negro); background: none; color: var(--negro); }
.q-modal__confirm { border: 0; background: var(--bordo); color: var(--crema); }


/* ==========================================================================
   NOSOTROS — sección "El origen"
   ========================================================================== */

.origen {
  display: grid;
  /* fr y no porcentajes: 60% + 40% suman el 100% del contenido y el gap se
     agregaba encima, así que la columna derecha se desbordaba justo los 60px
     del gap y el margen quedaba desparejo. */
  grid-template-columns: 1.5fr 1fr;
  gap: 88px;
  align-items: center;
  background: var(--blanco);
  padding: 140px var(--pad-x);
  max-width: 1200px;
  margin: 0 auto;
}
.origen__text .eyebrow { font-size: 11px; letter-spacing: 0.25em; color: var(--gris-ui); }
.origen__title {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.2;
  color: var(--negro);
  margin: 16px 0 0;
}
.origen__p {
  font-size: clamp(15px, 1.15vw, 16px);
  line-height: 1.75;
  color: var(--negro);
  margin-top: 20px;
}
.origen__p:first-of-type { margin-top: 32px; }
.origen__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.65;
  color: var(--bordo);
  margin-top: 32px;
}
/* Definición Beet / Bloom — dos líneas cortas con label serif y descripción sans */
.origen__def {
  margin: 28px 0 0;
  padding: 20px 0 4px;
  border-top: 1px solid rgba(90, 17, 46, 0.18);
}
.origen__def dt {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--bordo);
  letter-spacing: 0.01em;
  margin-top: 14px;
}
.origen__def dt:first-of-type { margin-top: 0; }
.origen__def dt em {
  font-style: italic;
  font-weight: 400;
}
.origen__def dd {
  margin: 4px 0 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.15vw, 16px);
  line-height: 1.65;
  color: var(--negro);
}
.origen__media { align-self: stretch; }
.origen__placeholder {
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  background: var(--cream-2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  font-style: italic; font-size: 14px; color: var(--gris-ui); text-align: center; padding: 24px;
}
.origen__media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 4px; box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

/* ==========================================================================
   CARE — care.html
   ========================================================================== */

.care-intro { background: var(--blanco); padding: 120px var(--pad-x); }
.care-intro__inner {
  max-width: 720px; margin: 0 auto; text-align: center;
  font-family: var(--serif); font-size: clamp(18px, 2vw, 22px);
  line-height: 1.7; color: var(--negro);
}

.care-steps { position: relative; overflow: hidden; background: var(--crema); padding: 120px var(--pad-x); }
.care-steps__head { position: relative; z-index: 1; text-align: center; }
.care-steps__head .eyebrow { font-size: 11px; letter-spacing: 0.25em; color: var(--gris-ui); }
.care-steps__title { font-family: var(--serif); font-size: clamp(28px, 3.5vw, 40px); color: var(--negro); margin: 16px 0 0; }
.care-steps__desc { max-width: 640px; margin: 24px auto 0; font-size: 15px; line-height: 1.7; color: var(--negro); }
.care-steps__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 60px;
}
.care-step { background: var(--blanco); border-radius: 4px; overflow: hidden; }
.care-step__media { aspect-ratio: 4 / 5; overflow: hidden; }
.care-step__media img { width: 100%; height: 100%; object-fit: cover; }
.care-step__body { padding: 24px; }
.care-step__num { font-family: var(--serif); font-size: 32px; color: var(--bordo); line-height: 1; }
.care-step__title { font-family: var(--serif); font-size: 18px; color: var(--negro); margin: 8px 0 0; }
.care-step__desc { font-size: 13px; line-height: 1.6; color: var(--gris-ui); margin: 8px 0 0; }

.care-layering { background: var(--blanco); padding: 120px var(--pad-x); }
.care-layering__inner { max-width: 800px; margin: 0 auto; text-align: center; }
.care-layering__inner .eyebrow { font-size: 11px; letter-spacing: 0.25em; color: var(--gris-ui); }
.care-layering__title { font-family: var(--serif); font-size: clamp(28px, 3.5vw, 40px); color: var(--negro); margin: 16px 0 0; }
.care-layering__p { font-size: 16px; line-height: 1.8; color: var(--negro); margin-top: 32px; }
.care-combos { display: grid; gap: 20px; margin-top: 48px; }
.care-combo {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  background: var(--cream-2); border-radius: 4px; padding: 24px 32px;
}
.care-combo__side { display: flex; align-items: center; gap: 14px; }
.care-combo__side:last-child { justify-content: flex-end; text-align: right; }
.care-combo__img {
  width: 56px; height: 70px; flex: none;
  object-fit: contain; background: var(--blanco); border-radius: 3px; padding: 6px;
}
.care-combo__img--soon {
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--gris-ui); text-align: center; line-height: 1.2;
}
.care-combo__name { font-family: var(--serif); font-size: 15px; color: var(--negro); }
.care-combo__plus { font-family: var(--serif); font-size: 24px; color: var(--bordo); }

.care-faq { position: relative; overflow: hidden; background: var(--crema); padding: 120px var(--pad-x); }
.care-faq__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.care-faq__title { font-family: var(--serif); font-size: clamp(28px, 3.5vw, 40px); color: var(--negro); text-align: center; margin: 0 0 40px; }
.faq__item { border-bottom: 1px solid var(--crema); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: 18px; color: var(--negro);
}
.faq__icon {
  flex: none; width: 18px; height: 18px; position: relative;
  transition: transform 0.4s var(--ease);
}
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; background: var(--bordo);
}
.faq__icon::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.faq__icon::after  { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%); }
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height 0.4s ease; }
.faq__item.is-open .faq__a { max-height: 320px; }
.faq__a p { font-size: 15px; line-height: 1.7; color: var(--negro); margin: 0; padding: 0 0 24px; }


/* ==========================================================================
   PRODUCTO — producto.html
   ========================================================================== */

.pd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 60px 6vw 40px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Galería sticky */
.pd__gallery { position: sticky; top: 96px; align-self: start; padding: 0 40px 0 0; }
.pd__main {
  position: relative;
  aspect-ratio: 4 / 5; background: var(--cream-2); border-radius: 4px;
  padding: 60px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: zoom-in;
}
.pd__main img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity 0.4s var(--ease); }
.pd__main.is-fading > img:not(.pd__cap-layer) { opacity: 0; }

/* --------------------------------------------------------------------------
   Cambio de tapa
   Las dos fotos están registradas al píxel (mismo frasco, misma posición), así
   que la tapa entrante se puede revelar con un círculo que se abre desde la
   tapa: la vista lee "cambió la tapa", no "cambió la foto".
   -------------------------------------------------------------------------- */

/* Specificity: .pd__main img (0,1,1) le gana a .pd__cap-layer (0,1,0) y le
   imponía max-width/height 100%, así que la capa se dibujaba más grande que la
   base y la tapa entrante caía corrida. Hay que igualar o superar esa cuenta. */
.pd__main img.pd__cap-layer {
  /* Un <img> es replaced: con width/height auto ignora el inset y se dibuja a
     tamaño intrínseco. Hay que darle la caja explícita. */
  position: absolute;
  top: 60px; left: 60px;
  width: calc(100% - 120px);
  height: calc(100% - 120px);
  max-width: none; max-height: none;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  clip-path: circle(0% at 49.5% 47%);
  transition: none;
}
.pd__cap-layer.is-armed { opacity: 1; }
.pd__cap-layer.is-revealing {
  opacity: 1;
  clip-path: circle(62% at 49.5% 47%);
  transition: clip-path 1.05s var(--ease-soft);
}

/* Bloom de luz sobre la tapa: acompaña la apertura del círculo. */
.pd__cap-glint {
  position: absolute;
  left: 49.5%; top: 47%;
  width: 34%; aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  background: radial-gradient(circle, rgba(255,255,255,0.7), rgba(255,255,255,0) 65%);
  opacity: 0;
  pointer-events: none;
}
.pd__cap-glint.is-on { animation: capGlint 1.05s var(--ease-soft); }
@keyframes capGlint {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.3); }
  30%  { opacity: 1; }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
  .pd__cap-layer.is-revealing { transition: none; }
  .pd__cap-glint.is-on { animation: none; }
}

/* Chips de tapa: mismo pill que las variantes + muestra del material. */
.capchip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border: 1px solid var(--crema); border-radius: 24px; background: none;
  font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--negro); cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.capchip:hover { border-color: var(--bordo); }
.capchip.is-active { border-color: var(--bordo); background: var(--cream-2); }
.capchip__sw {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(18, 18, 18, 0.16);
}
.capchip__sw--cromada  { background: linear-gradient(140deg, #F4F4F6 0%, #9C9CA1 42%, #ECECEF 58%, #6C6C71 100%); }
.capchip__sw--ceramica { background: linear-gradient(140deg, #FFFFFF 0%, #F0EAE6 100%); }

.pd__caps { margin-top: 28px; }
.pd__caps[hidden] { display: none; }
.pd__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.pd__thumb {
  aspect-ratio: 1 / 1; background: var(--cream-2); border: 1px solid transparent;
  border-radius: 4px; padding: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: border-color 0.3s var(--ease);
}
.pd__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd__thumb:hover { border-color: var(--crema); }
.pd__thumb.is-active { border-color: var(--bordo); }
.pd__thumb--soon { font-size: 10px; color: var(--gris-ui); text-align: center; }

/* Info */
.pd__info { padding: 40px 0 40px 60px; }
.pd__eyebrow { font-size: 11px; letter-spacing: 0.25em; color: var(--gris-ui); }
.pd__title { font-family: var(--serif); font-size: clamp(32px, 3.5vw, 44px); line-height: 1.2; color: var(--negro); margin: 12px 0 0; }
.pd__price { font-family: var(--serif); font-size: 24px; color: var(--negro); margin: 20px 0 0; }
.pd__desc { font-size: 16px; line-height: 1.7; color: var(--negro); margin: 24px 0 0; }

.pd__variant { margin-top: 40px; }
.pd__vlabel { font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gris-ui); margin: 0; }
.pd__vname { color: var(--negro); text-transform: none; letter-spacing: normal; margin-left: 8px; font-weight: 400; }
.pd__chips { display: flex; gap: 12px; margin-top: 12px; }
.pchip {
  padding: 10px 20px; border: 1px solid var(--crema); border-radius: 24px; background: none;
  font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--negro); cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.pchip:hover { border-color: var(--bordo); }
.pchip.is-active { border-color: var(--bordo); background: var(--cream-2); }

.pd__buy { margin-top: 40px; }
.pd__cart {
  width: 100%; padding: 20px; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--bordo); color: var(--crema);
  font-family: var(--sans); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.2em;
  transition: background-color 0.3s var(--ease);
}
.pd__cart:hover { background: #7A2246; }
.pd__wish {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px auto 0; padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--negro);
  background: none; cursor: pointer;
  font-family: var(--sans); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--negro);
}

/* Acordeones */
.acc { margin-top: 60px; }
.acc__item { border-top: 1px solid var(--crema); }
.acc__item:last-child { border-bottom: 1px solid var(--crema); }
.acc__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--negro);
}
.acc__icon { flex: none; width: 16px; height: 16px; position: relative; transition: transform 0.4s var(--ease); }
.acc__icon::before, .acc__icon::after { content: ''; position: absolute; background: var(--bordo); }
.acc__icon::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.acc__icon::after { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%); }
.acc__item.is-open .acc__icon { transform: rotate(45deg); }
.acc__a { overflow: hidden; max-height: 0; transition: max-height 0.4s ease; }
.acc__item.is-open .acc__a { max-height: 800px; }
.acc__inner { padding-top: 4px; padding-bottom: 24px; font-size: 15px; line-height: 1.7; color: var(--negro); }
.acc__inner p { margin: 0; }
.acc__link { display: inline-block; margin-top: 16px; font-weight: 500; font-size: 13px; color: var(--bordo); border-bottom: 1px solid var(--bordo); padding-bottom: 2px; }

.pnotes { display: flex; flex-direction: column; gap: 4px; }
.pnote { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; }
.pnote__eb { font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gris-ui); }

/* Cross-sell */
.cross { position: relative; overflow: hidden; background: var(--blanco); padding: 120px 8vw; }
.cross__head { position: relative; z-index: 1; text-align: center; }
.cross__head .eyebrow { font-size: 11px; letter-spacing: 0.25em; color: var(--gris-ui); }
.cross__title { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); color: var(--negro); margin: 0; }
.cross__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1200px; margin: 32px auto 0; }
.cross-card { background: none; padding: 0; display: flex; flex-direction: column; text-align: center; }
/* Altura igual al alto máximo de la foto. Con aspect-ratio 3/4 la caja medía
   ~490px y la imagen tope 260px quedaba centrada, dejando ~115px muertos
   arriba que separaban el titular de las piezas. */
.cross-card__media { height: 260px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cross-card__media img { max-height: 260px; max-width: 100%; object-fit: contain; }
.cross-card__soon { color: var(--gris-ui); font-size: 13px; }
.cross-card__name { position: relative; display: inline-block; font-family: var(--serif); font-size: 18px; color: var(--negro); margin: 16px auto 0; padding-bottom: 8px; }
.cross-card__name::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 0; height: 1px; background: var(--bordo); transition: width 0.5s var(--ease); }
.cross-card:hover .cross-card__name::after { width: 30px; }
.cross-card__cat { font-size: 13px; color: var(--gris-ui); margin: 4px 0 0; }
.cross-card__price { font-weight: 500; font-size: 15px; color: var(--negro); margin: 12px 0 0; }

/* Zoom modal */
.pd-zoom { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.9); padding: 5vw; }
.pd-zoom[hidden] { display: none; }
.pd-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-zoom__close { position: absolute; top: 24px; right: 32px; border: 0; background: none; color: var(--crema); font-size: 40px; line-height: 1; cursor: pointer; }

/* Toast */
.toast {
  position: fixed; top: 88px; right: 24px; z-index: 1300;
  background: var(--negro); color: var(--crema);
  padding: 14px 22px; border-radius: 4px; font-size: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
  transform: translateX(20px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease;
}
.toast[hidden] { display: none; }
.toast.is-show { transform: none; opacity: 1; }


/* ==========================================================================
   Responsive — tablet / mobile
   ========================================================================== */

@media (max-width: 768px) {
  /* Menos padding vertical en las secciones */
  .manifiesto { padding: 80px var(--pad-x); }
  .manifiesto--patron { padding: 84px var(--pad-x); }
  .manifiesto--plain  { padding: 84px var(--pad-x); }
  .aire--divisor { height: 120px; }
  .destacados { padding: 72px var(--pad-x); }
  .franja     { padding: 72px 8vw; }
  .footer     { padding: 56px var(--pad-x) 32px; }

  /* Banners apilados */
  .row2 { grid-template-columns: 1fr; }
  .banner--md      { height: 62vh; }
  .banner--hero    { height: 66vh; }
  .banner--perfume { height: 58vh; }

  /* Destacados: una columna centrada */
  .destacados__grid { grid-template-columns: 1fr; max-width: 420px; }

  /* Row editorial: cards apiladas en mobile */
  .trio__grid { grid-template-columns: 1fr; max-width: none; gap: 0; }
  .tcard { height: clamp(360px, 62vh, 480px); }

  /* Navbar más compacto */
  .nav { padding: 12px var(--pad-x); gap: 12px; }
  .nav__left  { gap: 16px; }
  .nav__right { gap: 16px; }
  .nav__logo img { width: 132px; }

  /* Menú: sidebar toma casi todo el ancho en mobile */
  .menu__panel { width: 82%; min-width: 0; max-width: 380px; }
  .menu__inner { padding: 24px 28px 32px; }
  .menu__body { padding-top: 32px; }

  /* Footer apilado */
  .footer__grid   { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer__legal  { flex-direction: column; align-items: flex-start; gap: 18px; }

  /* Widget */
  .widget { bottom: 20px; right: 20px; }
  .widget__btn { width: 60px; height: 60px; }
  .widget__btn img { width: 32px; }
  .widget__panel { width: min(280px, calc(100vw - 40px)); }
}

@media (max-width: 480px) {
  /* Banners un toque más bajos */
  .banner--md      { height: 56vh; }
  .banner--hero    { height: 60vh; }
  .banner--perfume { height: 54vh; }
}

/* Grid de productos (colecciones) — 4 / 3 / 2 / 1 */
@media (max-width: 1200px) { .col-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .col-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .col-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } }

@media (max-width: 768px) {
  /* Nosotros */
  .about-hero { height: 44vh; min-height: 340px; }
  .valores    { padding: 40px var(--pad-x) 72px; }
  .valores__grid { grid-template-columns: 1fr; gap: 40px; max-width: 440px; }
  .procesos   { padding: 72px var(--pad-x); }
  .procesos__inner { grid-template-columns: 1fr; gap: 32px; }
  .pullquote  { padding: 88px var(--pad-x); }
  .pullquote__q    { margin-top: 30px; }
  .pullquote__attr { margin: 26px 0 30px; }

  /* Colecciones */
  .filters { top: 57px; padding: 16px 8vw; }
  /* En mobile la fila de filtros se desliza en horizontal en vez de envolverse. */
  .filters__chips {
    gap: 24px; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filters__chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; font-size: 15px; }
  .col-grid { padding: 40px 8vw; }

  /* Banner editorial quiz */
  .qbanner__media { height: 48vh; }
  .qbanner__band { padding: 48px 8vw; }

  /* Banner refill */
  .refillb { height: 56vh; }
  .refillb__note { display: none; }

  /* El origen */
  .origen { grid-template-columns: 1fr; gap: 40px; padding: 72px var(--pad-x); }

  /* Care */
  .care-intro, .care-layering { padding: 72px var(--pad-x); }
  .care-steps, .care-faq { padding: 72px var(--pad-x); }
  .care-steps__grid { grid-template-columns: repeat(2, 1fr); }
  .care-combo { grid-template-columns: 1fr; gap: 12px; text-align: center; }
  .care-combo__side, .care-combo__side:last-child { justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
  .care-steps__grid { grid-template-columns: 1fr; max-width: 360px; margin: 60px auto 0; }
}

/* Producto */
@media (max-width: 1024px) {
  .pd__gallery { position: static; }
}
@media (max-width: 768px) {
  .pd { grid-template-columns: 1fr; padding: 40px 6vw; }
  .pd__gallery { padding: 0; }
  .pd__main { aspect-ratio: 1 / 1; padding: 40px; }
  .pd__main img.pd__cap-layer { top: 40px; left: 40px; width: calc(100% - 80px); height: calc(100% - 80px); }
  .pd__info { padding: 40px 0 0; }
  .cross { padding: 72px 8vw; }
  .cross__grid { grid-template-columns: 1fr; max-width: 380px; }
  .toast { top: 76px; right: 16px; left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__chevron { animation: none; }
  .hero__title .word { opacity: 1; transform: none; }
  .hero__copy[data-fade] { opacity: 1; }
}

/* --------------------------------------------------------------------------
   TUS ELEGIDOS — gallery horizontal scrolleable con flechas
   -------------------------------------------------------------------------- */

.picks {
  padding: clamp(64px, 8vw, 104px) 0 clamp(64px, 8vw, 96px);
  background: var(--blanco);
}
.picks__head {
  padding: 0 var(--pad-x);
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.picks__title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--marron);
  margin: 0;
}

.picks__viewport {
  position: relative;
  padding: 0 clamp(48px, 6vw, 88px);
}

.picks__track {
  display: flex;
  gap: clamp(18px, 2vw, 28px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0 4px;
  cursor: grab;
}
.picks__track::-webkit-scrollbar { display: none; }
.picks__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.picks__track.is-dragging a { pointer-events: none; }

.pick {
  flex: 0 0 auto;
  width: clamp(200px, 22vw, 280px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  color: var(--marron);
  text-decoration: none;
  cursor: pointer;
}
.pick__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-2);
}
.pick__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.9s var(--ease-soft);
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.pick:hover .pick__media img { transform: scale(1.045); }

.pick__name {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.3;
  color: var(--marron);
  text-align: center;
  transition: color 0.3s var(--ease);
}
.pick:hover .pick__name { color: var(--bordo); }

.picks__nav {
  position: absolute;
  top: calc(50% - 34px);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(44, 32, 26, 0.22);
  background: var(--blanco);
  color: var(--marron);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), opacity 0.3s var(--ease);
}
.picks__nav svg { width: 20px; height: 20px; }
.picks__nav:hover { color: var(--bordo); border-color: var(--bordo); }
.picks__nav--prev { left: clamp(8px, 1.5vw, 24px); }
.picks__nav--next { right: clamp(8px, 1.5vw, 24px); }
.picks__nav[disabled] { opacity: 0.35; cursor: default; }
.picks__nav[disabled]:hover { color: var(--marron); border-color: rgba(44, 32, 26, 0.22); }

@media (max-width: 768px) {
  .picks__viewport { padding: 0 6vw; }
  .picks__nav { display: none; }
  .pick { width: 62vw; max-width: 260px; }
}

/* --------------------------------------------------------------------------
   SCENT ADVISOR — quiz interactivo (una pregunta por pantalla)
   -------------------------------------------------------------------------- */

.sa {
  position: relative;
  min-height: 100vh;
  background: var(--blanco);
  isolation: isolate;
}

.sa__stage {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: clamp(96px, 12vh, 140px) var(--pad-x) clamp(48px, 8vh, 88px);
  gap: clamp(28px, 5vh, 56px);
}

/* Tagline arriba del todo, fija durante todo el quiz (se desvanece en el reveal) */
.sa-tagline {
  align-self: center;
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bordo);
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}
.sa-tagline.is-hidden {
  opacity: 0;
  visibility: hidden;
}

/* Slots: contenedor donde steps y result se superponen. El contenido se ancla
   arriba (cerca del tagline) — no queda flotando en el medio del viewport. */
.sa-slots {
  flex: 1;
  display: grid;
  place-items: start center;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  position: relative;
}

/* Todos los steps y el result comparten posición: se superponen y sólo el
   activo se ve. Transición: fade + slight rise. */
.sa-step,
.sa-result {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity 0.55s var(--ease-soft),
              transform 0.55s var(--ease-soft),
              visibility 0s linear 0.55s;
  pointer-events: none;
  text-align: center;
}
.sa-step.is-active,
.sa-result.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.55s var(--ease-soft),
              transform 0.55s var(--ease-soft),
              visibility 0s;
}

.sa-step__q {
  margin: 0 auto clamp(28px, 4vh, 48px);
  max-width: 20ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 54px);
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--marron);
}

/* Barra de progreso hairline: debajo de las opciones */
.sa-bar {
  width: min(320px, 42vw);
  height: 1px;
  margin: clamp(36px, 5vh, 56px) auto 0;
  background: rgba(44, 32, 26, 0.1);
  overflow: hidden;
}
.sa-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--bordo);
  transition: width 0.45s var(--ease-soft);
}

.sa-opts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 820px;
  margin: 0 auto;
}
.sa-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: clamp(120px, 15vh, 160px);
  padding: 22px 18px;
  background: var(--blanco);
  border: 1px solid rgba(90, 17, 46, 0.25);
  color: var(--marron);
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color 0.25s var(--ease),
              color 0.25s var(--ease),
              transform 0.4s var(--ease-soft);
}
.sa-opt__title {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.25;
  color: var(--marron);
  transition: color 0.25s var(--ease);
}
.sa-opt__hint {
  font-size: clamp(12px, 0.9vw, 13px);
  color: rgba(44, 32, 26, 0.55);
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.sa-opt:hover {
  border-color: var(--bordo);
  color: var(--bordo);
}
.sa-opt:hover .sa-opt__title { color: var(--bordo); }
.sa-opt:focus-visible {
  outline: none;
  border-color: var(--bordo);
  box-shadow: 0 0 0 3px rgba(90, 17, 46, 0.16);
}
.sa-opt.is-chosen {
  background: var(--bordo);
  border-color: var(--bordo);
  color: #fff;
  transform: translateY(-2px);
}
.sa-opt.is-chosen .sa-opt__title,
.sa-opt.is-chosen .sa-opt__hint { color: #fff; }

/* --- Reveal del producto recomendado --- */
.sa-result__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 620px;
  margin: 0 auto;
}
.sa-result__media {
  width: clamp(180px, 22vw, 260px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  margin-bottom: 32px;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.7s 0.05s var(--ease-soft), transform 0.7s 0.05s var(--ease-soft);
}
.sa-result__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sa-result__eb {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gris-ui, #8a8378);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s 0.2s var(--ease-soft), transform 0.6s 0.2s var(--ease-soft);
}
.sa-result__name {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.15;
  color: var(--marron);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.65s 0.3s var(--ease-soft), transform 0.65s 0.3s var(--ease-soft);
}
.sa-result__desc {
  margin: 0 0 32px;
  max-width: 46ch;
  font-family: var(--sans);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  color: var(--gris-ui, #6b6560);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.65s 0.4s var(--ease-soft), transform 0.65s 0.4s var(--ease-soft);
}
.sa-result__cta {
  margin-bottom: 22px;
  color: var(--marron);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.65s 0.5s var(--ease-soft), transform 0.65s 0.5s var(--ease-soft);
}
.sa-result__cta:hover { color: var(--bordo); }
.sa-result__reset {
  border: 0;
  background: none;
  padding: 4px 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-ui, #8a8378);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
  opacity: 0;
  transition: opacity 0.6s 0.6s var(--ease-soft), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.sa-result__reset:hover { color: var(--bordo); border-bottom-color: var(--bordo); }

.sa-result.is-active .sa-result__media,
.sa-result.is-active .sa-result__eb,
.sa-result.is-active .sa-result__name,
.sa-result.is-active .sa-result__desc,
.sa-result.is-active .sa-result__cta,
.sa-result.is-active .sa-result__reset {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 768px) {
  .sa__stage { padding: 96px 6vw 56px; gap: 28px; }
  .sa-step__q { font-size: clamp(24px, 7vw, 34px); margin-bottom: 28px; }
  .sa-bar { margin-top: 32px; margin-bottom: 0; width: min(220px, 60vw); }
  .sa-opts { grid-template-columns: 1fr; max-width: 340px; }
  .sa-opt { min-height: 92px; }
  .sa-result__media { width: 60vw; max-width: 220px; margin-bottom: 24px; }
}

/* --------------------------------------------------------------------------
   TAILORED COLLECTION — hero editorial + concepto + showcase de materiales
   -------------------------------------------------------------------------- */

/* Hero 100vh, imagen full-bleed con overlay oscuro sutil y frase editorial */
.tc-hero {
  position: relative;
  height: 72vh;
  min-height: 460px;
  max-height: 720px;
  overflow: hidden;
  color: #fff;
}
.tc-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.tc-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(20, 12, 10, 0.35) 0%,
    rgba(20, 12, 10, 0.25) 45%,
    rgba(20, 12, 10, 0.5) 100%);
  pointer-events: none;
}
.tc-hero__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 8vw 120px;
  text-align: center;
}
.tc-hero__eyebrow {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.tc-hero__title {
  margin: 0;
  max-width: none;
  white-space: nowrap;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: #fff;
}
@media (max-width: 640px) {
  .tc-hero__title { white-space: normal; max-width: 22ch; }
}
.tc-hero__chevron {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 2;
  color: #fff;
  animation: hero-chevron 2.4s ease-in-out infinite;
}
.tc-hero__chevron svg { width: 28px; height: 28px; }

/* El concepto — bloque editorial sobre blanco */
.tc-concept {
  padding: clamp(64px, 8vw, 108px) var(--pad-x);
  background: var(--blanco);
}
.tc-concept__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tc-concept__title {
  margin: 0 0 clamp(28px, 4vw, 44px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.1;
  color: var(--marron);
}
.tc-concept__quote {
  color: var(--marron);
  margin: 0 auto clamp(24px, 3vw, 36px);
}
.tc-concept__cta {
  color: var(--marron);
  font-size: 13px;
  letter-spacing: 0.24em;
  display: inline-block;
  margin: 0 0 clamp(32px, 4vw, 48px);
}
.tc-concept__copy {
  margin: 0 auto;
  font-family: var(--sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: rgba(44, 32, 26, 0.78);
  max-width: 58ch;
}

/* Piezas hechas a mano — banner editorial con hotspots interactivos estilo
   Acqua di Parma. Título eyebrow a la izquierda + banner full-width con
   puntitos que abren popovers al click con detalles de tapa y frasco. */
.tc-craft {
  padding: clamp(48px, 6vw, 80px) var(--pad-x) clamp(56px, 7vw, 88px);
  background: var(--blanco);
}
.tc-craft__eyebrow {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--marron);
  text-align: left;
}

/* Banner container — la imagen respeta aspect ratio y todos los hotspots
   se posicionan en % relativos a su area. */
.tc-craft__banner {
  position: relative;
  width: 100%;
  overflow: visible;   /* popover puede desbordar levemente */
}
.tc-craft__img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
}

/* Hotspot — botón absolutamente posicionado. Círculo translúcido con dot
   dorado al centro. Área clickeable ≥44px vía padding invisible. */
.tc-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.tc-hotspot__dot {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 250, 240, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 4px 14px rgba(20, 12, 10, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease);
}
.tc-hotspot__dot::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--rosa);
  box-shadow: 0 0 0 2px rgba(186, 62, 118, 0.32);
}
/* Pulse suave que llama la atención sin gritar */
.tc-hotspot__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(186, 62, 118, 0.55);
  animation: tc-hotspot-pulse 2.4s ease-out infinite;
}
@keyframes tc-hotspot-pulse {
  0%   { transform: scale(0.85); opacity: 0.9; }
  70%  { transform: scale(1.6);  opacity: 0;   }
  100% { transform: scale(1.6);  opacity: 0;   }
}
.tc-hotspot:hover .tc-hotspot__dot { transform: scale(1.08); }
.tc-hotspot.is-active .tc-hotspot__dot { background: rgba(255, 250, 240, 0.85); }
.tc-hotspot.is-active .tc-hotspot__dot::after { animation-play-state: paused; opacity: 0; }

/* Popover — card blanca con sombra, aparece cerca del hotspot */
.tc-popover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.94);
  width: min(320px, 82vw);
  padding: 22px 24px 24px;
  background: var(--blanco);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(20, 12, 10, 0.22),
              0 2px 6px rgba(20, 12, 10, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s var(--ease), transform 0.28s var(--ease-soft);
  z-index: 5;
  text-align: left;
}
.tc-popover:not([hidden]).is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.tc-popover__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: rgba(44, 32, 26, 0.65);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s var(--ease);
}
.tc-popover__close:hover { color: var(--bordo); }
.tc-popover__close svg { width: 18px; height: 18px; }
.tc-popover__media {
  display: flex;
  justify-content: center;
  padding: 6px 0 14px;
}
.tc-popover__media img {
  max-width: 130px;
  max-height: 130px;
  height: auto;
  object-fit: contain;
}

/* Variante grande — popover con imagen protagonista (la tapa) */
.tc-popover--lg { width: min(280px, 82vw); padding: 20px 22px 22px; }
.tc-popover--lg .tc-popover__title { font-size: 20px; margin-top: 4px; }
.tc-popover__media--lg { padding: 4px 0 14px; }
.tc-popover__media--lg img {
  max-width: 100%;
  max-height: 160px;
  width: auto;
}
.tc-popover__title {
  margin: 4px 0 6px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: var(--marron);
}
.tc-popover__meta {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bordo);
}
.tc-popover__desc {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(44, 32, 26, 0.78);
}

/* Backdrop invisible para capturar clicks afuera del popover */
.tc-craft__backdrop {
  position: fixed;
  inset: 0;
  z-index: 4;
  background: transparent;
  display: none;
}
.tc-craft__backdrop.is-visible { display: block; }

@media (max-width: 768px) {
  .tc-popover { width: min(280px, calc(100vw - 40px)); padding: 20px 22px 22px; }
  .tc-hotspot__dot { width: 28px; height: 28px; }
  .tc-hotspot__dot::before { width: 9px; height: 9px; }
}

/* Los materiales — 4 paneles horizontales expandibles */
.tc-materials {
  padding: clamp(56px, 7vw, 88px) 0 clamp(88px, 10vw, 128px);
  background: var(--cream-2);
}
.tc-materials__title {
  margin: 0 0 clamp(48px, 6vw, 72px);
  padding: 0 var(--pad-x);
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 48px);
  color: var(--marron);
}

.tc-panels {
  display: flex;
  align-items: stretch;
  height: clamp(440px, 62vh, 620px);
  overflow: hidden;
}
.tc-panel {
  position: relative;
  flex: 1 1 25%;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  transition: flex-basis 0.55s var(--ease-soft),
              flex-grow 0.55s var(--ease-soft);
  isolation: isolate;
}
/* Cuando algún panel está expandido, los otros se comprimen */
.tc-panels.has-expanded .tc-panel { flex: 0 0 13.33%; }
.tc-panels.has-expanded .tc-panel.is-expanded { flex: 0 0 60%; }

.tc-panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.1s var(--ease-soft), filter 0.55s var(--ease);
}
.tc-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20,12,10,0.25) 0%, rgba(20,12,10,0.6) 100%);
  transition: opacity 0.55s var(--ease);
  z-index: 1;
  pointer-events: none;
}
.tc-panel:hover .tc-panel__img { transform: scale(1.03); }
.tc-panel.is-expanded .tc-panel__img { filter: brightness(0.9); }

/* Label del material (visible cuando está colapsado) */
.tc-panel__label {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(24px, 4vh, 40px);
  z-index: 2;
  text-align: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
  padding: 0 8px;
  transition: opacity 0.35s var(--ease);
}
.tc-panel.is-expanded .tc-panel__label { opacity: 0; }

/* Botón invisible que cubre todo el panel para el click */
.tc-panel__toggle {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

/* Contenido expandido (nombre grande + desc + CTA) */
.tc-panel__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px clamp(24px, 4vw, 48px);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease-soft),
              transform 0.55s var(--ease-soft),
              visibility 0s linear 0.5s;
  pointer-events: none;
}
.tc-panel.is-expanded .tc-panel__body {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.6s 0.25s var(--ease-soft),
              transform 0.6s 0.25s var(--ease-soft),
              visibility 0s;
}
.tc-panel__body .tc-panel__cta { pointer-events: auto; }
.tc-panel__name {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
  color: #fff;
  letter-spacing: 0.01em;
}
.tc-panel__desc {
  margin: 0 0 32px;
  font-family: var(--sans);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  max-width: 30ch;
}
.tc-panel__cta {
  color: #fff;
}
.tc-panel__cta:hover { color: #fff; }
.tc-panel__cta::after,
.tc-panel__cta .link-cta__arrow { color: #fff; }

/* Outro: frase editorial artesanal + CTA final, poco aire entre ambos */
.tc-outro {
  padding: clamp(96px, 13vw, 160px) var(--pad-x) clamp(96px, 13vw, 160px);
  background: var(--blanco);
  text-align: center;
}
.tc-outro__inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tc-outro__quote {
  color: var(--marron);
  margin: 0 0 clamp(28px, 3vw, 40px);
}
.tc-outro__cta {
  color: var(--marron);
  font-size: 13px;
  letter-spacing: 0.24em;
}

/* Mobile: paneles apilados verticalmente, expansión hacia abajo */
@media (max-width: 900px) {
  .tc-panels {
    flex-direction: column;
    height: auto;
  }
  .tc-panel {
    flex: 0 0 auto;
    height: 140px;
  }
  .tc-panels.has-expanded .tc-panel { flex: 0 0 auto; height: 110px; }
  .tc-panels.has-expanded .tc-panel.is-expanded { flex: 0 0 auto; height: 440px; }
  .tc-panel__label { bottom: auto; top: 50%; transform: translateY(-50%); }
  .tc-panel.is-expanded .tc-panel__label { opacity: 0; }
  .tc-panel__body { padding: 32px 24px; }
}
@media (max-width: 560px) {
  .tc-hero__title { font-size: clamp(28px, 8vw, 40px); }
  .tc-concept { padding: 80px 6vw; }
  .tc-materials { padding: 72px 0 64px; }
}

/* --------------------------------------------------------------------------
   QBANNER · "Conocé tu aroma ideal" — override sobre fondo blanco,
   con misma tipografía que el banner Difusores y CTA DESCUBRIR
   -------------------------------------------------------------------------- */

.qbanner--plain {
  display: block;
  background: var(--blanco);
  padding: clamp(96px, 14vw, 160px) var(--pad-x) clamp(88px, 12vw, 140px);
  text-align: center;
  color: var(--marron);
}
.qbanner--plain .qbanner__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--marron);
  margin: 0 0 28px;
}
.qbanner--plain .qbanner__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--marron);
}
.qbanner--plain .qbanner__cta:hover { color: var(--bordo); }
.qbanner__divider {
  display: block;
  width: min(1320px, calc(100% - 2 * var(--pad-x)));
  margin: 0 auto;
  height: 1px;
  border: 0;
  background: rgba(44, 32, 26, 0.12);
}

/* --------------------------------------------------------------------------
   FRAGANCIAS — subpágina landing (hero banner + conceptos + grid + CTA)
   -------------------------------------------------------------------------- */

/* Hero override: usa .col-hero pero achica la altura */
.fr-hero-banner.col-hero {
  height: 44vh;
  min-height: 340px;
  max-height: 480px;
}
.fr-hero-banner .col-hero__inner {
  margin-top: 0;
  gap: 0;
}
.fr-hero-banner .col-hero__title {
  color: var(--blanco);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-shadow: 0 2px 24px rgba(38, 8, 20, 0.5);
  margin: 0;
}

/* Sección helpers reusables */
.fr-section__title {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
  color: var(--marron);
  text-align: center;
}
.fr-section__intro {
  margin: 0 auto clamp(40px, 5vw, 64px);
  max-width: 56ch;
  font-family: var(--sans);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  color: rgba(44, 32, 26, 0.68);
  text-align: center;
}

/* --- Sección unificada: Conceptos + Layering --- */
.fr-conceptual {
  padding: clamp(64px, 8vw, 104px) var(--pad-x);
  background: var(--blanco);
}
.fr-conceptual__inner {
  max-width: 1180px;
  margin: 0 auto;
}
.fr-conceptual__row + .fr-conceptual__row {
  margin-top: clamp(36px, 4.5vw, 56px);
  padding-top: clamp(36px, 4.5vw, 56px);
  border-top: 1px solid rgba(44, 32, 26, 0.1);
}

/* Grid Conceptos A/B/C — cards con fondo cream, jerarquía y aire */
.fr-concept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.fr-concept {
  position: relative;
  padding: clamp(24px, 2.8vw, 38px) clamp(20px, 2.4vw, 32px);
  text-align: center;
  background: var(--cream-2);
  transition: background 0.4s var(--ease);
  cursor: default;
}
.fr-concept:hover {
  background: #EDE8DE; /* un pelín más cálido/marcado al hover */
}
.fr-concept__letter {
  display: block;
  margin: 0 0 clamp(10px, 1.2vw, 16px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 4.6vw, 62px);
  line-height: 1;
  color: var(--bordo);
  letter-spacing: 0.02em;
  transition: color 0.4s var(--ease);
}
.fr-concept:hover .fr-concept__letter {
  color: #40081F; /* un tono más oscuro que --bordo */
}
.fr-concept__name {
  margin: 0 0 clamp(10px, 1.2vw, 14px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--marron);
  letter-spacing: 0.005em;
}
.fr-concept__inspo {
  margin: 0 auto clamp(8px, 1vw, 12px);
  max-width: none;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(44, 32, 26, 0.55);
  white-space: nowrap;
}
.fr-concept__feel {
  margin: 0 auto;
  max-width: 30ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(44, 32, 26, 0.7);
}

/* Grid Layering — Salida / Corazón / Fondo (compacto) */
.fr-layer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  max-width: 1080px;
  margin: 0 auto;
}
.fr-layer {
  padding: 4px clamp(8px, 1vw, 18px);
  text-align: center;
}
.fr-layer__title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 22px);
  color: var(--marron);
}
.fr-layer__desc {
  margin: 0 auto;
  max-width: 32ch;
  font-family: var(--sans);
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.55;
  color: rgba(44, 32, 26, 0.68);
}

/* Párrafo lead debajo de las 3 notas — materias primas / concentración */
.fr-conceptual__lead {
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 68ch;
  font-family: var(--sans);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: rgba(44, 32, 26, 0.82);
  text-align: center;
}

/* Bloque Layering — separador arriba, subtítulo y párrafo centrados */
.fr-conceptual__block {
  margin-top: clamp(52px, 6.5vw, 80px);
  padding-top: clamp(40px, 5vw, 60px);
  border-top: 1px solid rgba(44, 32, 26, 0.1);
  text-align: center;
}
.fr-conceptual__subtitle {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  color: var(--marron);
}
.fr-conceptual__p {
  margin: 0 auto;
  max-width: 68ch;
  font-family: var(--sans);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: rgba(44, 32, 26, 0.78);
}

/* Cierre editorial — italic bordó */
.fr-conceptual__closing {
  margin: clamp(48px, 6vw, 72px) auto 0;
  max-width: 56ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--bordo);
  text-align: center;
}

/* --- Colección en zigzag — 4 fragancias, panes pegados edge-to-edge --- */
.fr-collection {
  padding: clamp(64px, 8vw, 104px) 0 clamp(80px, 10vw, 128px);
  background: var(--blanco);
  border-top: 1px solid rgba(44, 32, 26, 0.06);
}
.fr-item {
  margin: 0 auto;
  max-width: none;
}

.fr-item__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  column-gap: 0;
  row-gap: 0;
}
.fr-item__pane {
  position: relative;
  height: clamp(400px, 56vh, 540px);
  overflow: hidden;
  display: block;
  margin: 0;
}
.fr-item__pane--notes {
  background: var(--marron);
}
.fr-item__pane--notes img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --- Bottle pane = card de producto tipo Colección --- */
.fr-item__pane--bottle {
  display: flex;
  flex-direction: column;
  background: var(--cream-2);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.fr-bottle__media {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 1.4vw, 20px) clamp(14px, 1.6vw, 24px) clamp(6px, 0.6vw, 10px);
  background: var(--cream-2);
}
/* Cuadrado 1:1 tipo IG — SIN fondo blanco, el cream de la card se ve alrededor */
.fr-bottle__square {
  aspect-ratio: 1 / 1;
  height: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}
.fr-bottle__square img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.9s var(--ease-soft);
}
.fr-item__pane--bottle:hover .fr-bottle__square img {
  transform: scale(1.03);
}
.fr-bottle__info {
  flex: 0 0 auto;
  padding: clamp(16px, 1.8vw, 22px) 20px clamp(20px, 2vw, 28px);
  text-align: center;
  background: var(--cream-2);
}
.fr-bottle__name {
  position: relative;
  display: inline-block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--negro);
  margin: 0;
  padding-bottom: 8px;
  letter-spacing: 0.02em;
}
.fr-bottle__name::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: var(--bordo);
  transition: width 0.5s var(--ease);
}
.fr-item__pane--bottle:hover .fr-bottle__name::after { width: 30px; }
.fr-bottle__cat {
  font-size: 12px;
  color: var(--gris-ui);
  margin: 4px 0 0;
  font-family: var(--sans);
}
.fr-bottle__price {
  font-weight: 500;
  font-size: 14px;
  color: var(--negro);
  margin: 8px 0 0;
  font-family: var(--sans);
}

/* Overlay sobre la pane de notas con gradient sutil + text-shadow para legibilidad */
.fr-item__overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: clamp(24px, 4vh, 40px) clamp(24px, 4vw, 40px) clamp(48px, 8vh, 84px);
  z-index: 2;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.12) 60%, rgba(0, 0, 0, 0) 100%);
}
.fr-item__name {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.fr-item__concept {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(10px, 0.85vw, 12px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* --- CTA final --- */
.fr-outro {
  padding: clamp(72px, 10vw, 120px) var(--pad-x) 0;
  background: var(--blanco);
  border-top: 1px solid rgba(44, 32, 26, 0.06);
  text-align: center;
}
.fr-outro__inner {
  max-width: 720px;
  margin: 0 auto clamp(72px, 10vw, 120px);
}
.fr-outro__title {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.15;
  color: var(--marron);
}
.fr-outro__copy {
  margin: 0 auto 28px;
  max-width: 54ch;
  font-family: var(--sans);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  color: rgba(44, 32, 26, 0.72);
}
.fr-outro__cta {
  color: var(--marron);
  font-size: 13px;
  letter-spacing: 0.24em;
}
.fr-outro__divider {
  display: block;
  width: min(1320px, calc(100% - 2 * var(--pad-x)));
  margin: 0 auto;
  height: 1px;
  border: 0;
  background: rgba(44, 32, 26, 0.12);
}

/* Responsive */
@media (max-width: 900px) {
  .fr-concept-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .fr-layer-grid { grid-template-columns: 1fr; max-width: 460px; }
  .fr-hero-banner.col-hero { height: 44vh; min-height: 320px; }
}
@media (max-width: 640px) {
  .fr-conceptual { padding: 56px 6vw; }
  .fr-hero-banner .col-hero__title { font-size: clamp(30px, 8vw, 40px); }
  .fr-collection { padding: 48px 0 64px; }
  .fr-item { margin-bottom: 0; }
  .fr-item__row { grid-template-columns: 1fr; }
  .fr-item__pane { height: clamp(320px, 60vh, 440px); }
  .fr-item__name { font-size: clamp(26px, 8vw, 34px); }
  .fr-bottle__info { padding: 14px 16px 20px; }
}

/* ==========================================================================
   MOBILE PASS INTEGRAL — patches por debajo de 768px
   Cubre los gaps que las media queries anteriores no resolvían: footer stack,
   zigzag orden fijo (frasco arriba), tap targets ≥44px, quiz sizes, sidebar
   más ancho, banner heights, layer conceptual apilado, policy pages, etc.
   No toca layouts ≥1024px.
   ========================================================================== */

@media (max-width: 767px) {

  /* ---------- Header — tap targets amplios ---------- */
  .nav__burger,
  .nav__ico {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .nav__lang { min-height: 44px; padding: 0 6px; }

  /* ---------- Sidebar — más ancho + items tap-friendly ---------- */
  .menu__panel { width: 88%; max-width: 420px; }
  .menu__list a {
    padding: 14px 0;
    min-height: 56px;
    display: flex;
    align-items: center;
    font-size: 17px;
  }
  .menu__search { margin-top: 24px; padding: 12px 4px; }
  .menu__search-input { font-size: 15px; }

  /* ---------- Footer — stack completo, alineado a la izquierda ---------- */
  .footer { padding: 56px 6vw 32px; text-align: left; }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: left;
  }
  .footer__brand { display: block; }
  .footer__wordmark img { width: 160px; margin: 0; }
  .footer__tagline { text-align: left; margin-top: 10px; }
  .footer__col { display: block; text-align: left; }
  .footer__head { text-align: left; }
  .footer__list { align-items: flex-start; margin-top: 14px; gap: 4px; }
  .footer__list a,
  .footer__list li { min-height: 44px; display: inline-flex; align-items: center; }
  .footer__social--col { justify-content: flex-start; margin-top: 12px; }
  .footer__social a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-start; }
  .footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 0 0;
    margin-top: 32px;
    text-align: left;
  }
  .footer__copy { text-align: left; }
  .footer__arrepentimiento {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ---------- Home · hero ---------- */
  .hero__title { font-size: clamp(30px, 8vw, 44px); line-height: 1.1; }
  .hero__copy { font-size: clamp(13px, 3.6vw, 16px); }

  /* ---------- Home · trío cards (altura tighter cuando se apilan) ---------- */
  .tcard { height: clamp(340px, 58vh, 440px); }
  .tcard__title { font-size: clamp(24px, 7vw, 32px); }

  /* ---------- Home · Los favoritos (peek del siguiente tile) ---------- */
  .picks { padding: 56px 0 56px; }
  .picks__viewport { padding: 0 6vw; }
  .picks__nav { display: none; }
  .pick { width: 72vw; max-width: 300px; }
  .pick__media { aspect-ratio: 4 / 5; }

  /* ---------- Home · banners hero (Difusores / Descubrí tu fragancia) ---------- */
  .banner--hero { height: 62vh; min-height: 380px; }
  .banner__title { font-size: clamp(28px, 7vw, 40px); }

  /* ---------- Manifiesto (Home) ---------- */
  .manifiesto__copy { font-size: clamp(17px, 4.4vw, 20px); }
  .manifiesto__cta { min-height: 44px; display: inline-flex; align-items: center; }

  /* ---------- Universo · hero + valores ---------- */
  .about-hero { height: 40vh; min-height: 300px; }
  .about-hero__mono { width: clamp(80px, 22vw, 120px); }
  .about-hero__tagline { font-size: 13px; padding: 0 20px; }
  .about-manifiesto__copy { font-size: clamp(17px, 4.4vw, 20px); padding: 0 6vw; }
  .origen__title { font-size: clamp(28px, 7vw, 38px); }
  .origen__quote { font-size: 15px; }
  .valores__title { font-size: 22px; }
  .procesos__title { font-size: clamp(26px, 7vw, 34px); letter-spacing: 0.06em; }
  .procesos__p { font-size: 15px; }

  /* ---------- Colección · hero + filtros ---------- */
  .col-hero { height: 36vh; min-height: 260px; }
  .col-hero__title { font-size: clamp(30px, 8vw, 44px); }
  /* Los filtros ya usan overflow-x auto en @768 (línea 2237). Sólo tap size. */
  .chip { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; }
  .sort__btn { min-height: 44px; }

  /* ---------- Fragancias · sección "Una historia en 3 notas" apilada ---------- */
  .fr-layer-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; gap: 28px; }
  .fr-conceptual__lead,
  .fr-conceptual__p { font-size: 15px; }
  .fr-conceptual__block { margin-top: 44px; padding-top: 32px; }
  .fr-conceptual__subtitle { font-size: 22px; }
  .fr-conceptual__closing { font-size: 17px; }

  /* ---------- Fragancias · zigzag: SIEMPRE frasco arriba, notas abajo ---------- */
  .fr-item__pane--bottle { order: 0; }
  .fr-item__pane--notes  { order: 1; }
  .fr-item__pane--bottle { height: auto; min-height: 400px; }
  .fr-item__pane--notes  { height: clamp(280px, 52vh, 380px); }
  .fr-bottle__square { max-width: 320px; }

  /* ---------- Fragancias · CTA outro ---------- */
  .fr-outro__title { font-size: clamp(26px, 7vw, 34px); }

  /* ---------- Tailored · hero ---------- */
  .tc-hero { height: 62vh; min-height: 420px; }
  .tc-hero__eyebrow { font-size: 11px; letter-spacing: 0.28em; }

  /* ---------- Tailored · concepto + CTA ---------- */
  .tc-concept__title { font-size: clamp(30px, 8vw, 44px); }
  .tc-concept__quote { font-size: clamp(17px, 4.4vw, 20px); }
  .tc-concept__cta { min-height: 44px; display: inline-flex; align-items: center; }

  /* ---------- Tailored · demo Piezas hechas a mano ---------- */
  .tc-craft { padding: 56px 6vw 40px; }
  .tc-craft__title { font-size: clamp(30px, 8vw, 44px); }
  .tc-craft__sub { font-size: 14px; }
  .tc-craft__stack { width: min(300px, 78vw); }

  /* ---------- Tailored · materiales (paneles ya se apilan en 900px) ---------- */
  .tc-panel__toggle { min-height: 44px; min-width: 44px; }

  /* ---------- Scent Advisor · quiz options full-width ---------- */
  .sa-opt { min-height: 76px; padding: 18px 20px; }
  .sa-opt__title { font-size: 18px; }
  .sa-result__cta,
  .sa-result__reset { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* ---------- Producto (PDP) — botón CTA tap-friendly ---------- */
  .pd__add { min-height: 56px; }
  .pd__cap-chip,
  .pd__color-chip { min-width: 44px; min-height: 44px; }

  /* ---------- Policies pages ---------- */
  .policy { padding: 96px 6vw 64px; }
  .policy__title { font-size: clamp(30px, 8vw, 42px); margin-bottom: 32px; }
  .policy__lead { font-size: 16px; }
  .policy__h2 { font-size: 20px; }
  .policy p, .policy ul, .policy ol { font-size: 15px; }

  /* ---------- Global · sin scroll horizontal accidental ---------- */
  html, body { overflow-x: hidden; }
}

@media (max-width: 480px) {
  /* iPhone SE y equivalentes: apretamos un poco más lo grande */
  .hero__title { font-size: clamp(26px, 8.5vw, 36px); }
  .col-hero { height: 32vh; min-height: 240px; }
  .col-hero__title { font-size: clamp(28px, 8.5vw, 38px); }
  .about-hero { height: 36vh; min-height: 260px; }
  .tc-hero { height: 58vh; min-height: 380px; }
  .banner--hero { height: 56vh; min-height: 340px; }
  .fr-item__pane--bottle { min-height: 360px; }
  .fr-item__pane--notes  { height: clamp(240px, 46vh, 320px); }
  .fr-bottle__square { max-width: 280px; }
}