/* =============================================================
   AROMAS EDEN — Jabones Artesanales
   Hoja de estilos única, organizada por secciones.
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg: #f6f1e7;
  --bg-2: #efe6d5;
  --paper: #fffdf8;
  --ink: #2c2620;
  --ink-soft: #4a4038;
  --ink-mute: #857a6d;
  --line: rgba(44, 38, 32, 0.12);
  --line-soft: rgba(44, 38, 32, 0.07);

  --lavender: #a89bc4;
  --lavender-deep: #82709f;
  --lavender-pale: #e9e3f1;
  --sage: #8a9573;
  --sage-deep: #69745a;
  --gold: #c6a565;
  --gold-deep: #a3813f;

  --accent: var(--lavender-deep);
  --accent-contrast: #fffdf8;

  --shadow-soft: 0 30px 60px -30px rgba(44, 38, 32, 0.28);
  --shadow-card: 0 20px 40px -24px rgba(44, 38, 32, 0.22);

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Fraunces: display con más carácter gráfico, reservada a precios y cifras —
     el acento "caro" que separa la tienda del resto de la web, editorial. */
  --price-font: "Fraunces", "Cormorant Garamond", serif;

  --glass-bg: rgba(255, 253, 248, 0.6);
  --glass-bg-strong: rgba(255, 253, 248, 0.82);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur: blur(20px) saturate(180%);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-glass: cubic-bezier(0.22, 1, 0.36, 1);

  --nav-h: 116px;
  --nav-h-solid: 88px;
  --nav-inset: 12px;
  --container: 1280px;
}
@media (min-width: 720px) {
  :root { --nav-h: 126px; --nav-h-solid: 92px; --nav-inset: 20px; }
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
::selection { background: var(--lavender-pale); color: var(--ink); }

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

/* =============================================================
   3. Utilities
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 720px) { .container { padding-inline: 2.5rem; } }
@media (min-width: 1280px) { .container { padding-inline: 3rem; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: 0.7rem 1.2rem; background: var(--ink); color: var(--paper);
  border-radius: var(--radius-sm); font-size: 0.9rem; letter-spacing: 0.02em;
  transition: top 0.3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.kicker {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--lavender-deep);
}
.kicker::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.6;
}

.eyebrow-quiet { color: var(--sage-deep); }

.section-head {
  max-width: 46rem;
  margin-bottom: 3rem;
}
.section-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin-top: 0.6rem; }
/* :not(.kicker) evita que este selector (más específico) pise el color y el
   tamaño del eyebrow cuando va dentro de un .section-head */
.section-head p:not(.kicker) { margin-top: 1rem; font-size: 1.05rem; color: var(--ink-mute); max-width: 38rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center p:not(.kicker) { margin-inline: auto; }

section { position: relative; }
.section-pad { padding-block: clamp(4.5rem, 9vw, 8rem); }
.bg-alt { background: var(--bg-2); }

em { font-style: italic; color: var(--lavender-deep); }

/* Reveal-on-scroll: visible by default (JS off), hidden only once JS confirms it booted */
.reveal {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
html.js-ready .reveal { opacity: 0; transform: translateY(28px); }
html.js-ready .reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* =============================================================
   4. Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: 0.95rem 1.9rem;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 999px;
  transition: transform 0.45s var(--ease-out), background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink); color: var(--paper);
  box-shadow: 0 14px 30px -14px rgba(44,38,32,0.45);
}
.btn-primary:hover { background: var(--lavender-deep); transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(130,112,159,0.55); }
.btn-ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-outline-light {
  background: rgba(255,253,248,0.6); color: var(--ink); border: 1px solid rgba(44,38,32,0.22);
  backdrop-filter: blur(6px);
}
@supports not (backdrop-filter: blur(6px)) { .btn-outline-light { background: rgba(255,253,248,0.92); } }
.btn-outline-light:hover { background: rgba(255,253,248,0.95); transform: translateY(-2px); }
.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.72rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

.btn.is-added {
  background: var(--sage-deep); color: var(--paper);
}

.text-link {
  font-size: 0.85rem; letter-spacing: 0.04em; color: var(--ink-mute);
  border-bottom: 1px solid var(--line);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.text-link:hover { color: var(--accent); border-color: var(--accent); }

.icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  transition: background-color 0.3s var(--ease-out);
}
.icon-btn:hover { background: rgba(44,38,32,0.06); }
.icon-btn svg { width: 20px; height: 20px; }

/* =============================================================
   5. Nav — cabecera flotante translúcida
   ============================================================= */
/* La cápsula es visible desde el primer viewport: así el logo y los cuatro
   enlaces se leen siempre, incluso sobre la fotografía. Al hacer scroll gana
   transparencia (y más desenfoque, que compensa el contraste). */
.nav {
  position: fixed;
  top: var(--nav-inset); left: var(--nav-inset); right: var(--nav-inset);
  z-index: 500;
  height: var(--nav-h);
  display: flex; align-items: center;
  border-radius: 28px;
  background: rgba(255, 253, 248, 0.78);
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 26px 50px -30px rgba(44, 38, 32, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition:
    height 0.55s var(--ease-glass), border-radius 0.55s var(--ease-glass),
    background-color 0.65s var(--ease-glass), backdrop-filter 0.65s var(--ease-glass),
    box-shadow 0.65s var(--ease-glass), border-color 0.65s var(--ease-glass);
}
.nav.is-solid {
  height: var(--nav-h-solid);
  border-radius: 22px;
  background: rgba(255, 253, 248, 0.46);
  backdrop-filter: blur(26px) saturate(190%);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    0 18px 40px -30px rgba(44, 38, 32, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
@supports not (backdrop-filter: blur(18px)) {
  .nav { background: rgba(255, 253, 248, 0.95); }
  .nav.is-solid { background: rgba(255, 253, 248, 0.88); }
}

.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.nav-brand { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.nav-logo {
  height: clamp(58px, 7.6vw, 86px); width: auto;
  transition: height 0.55s var(--ease-glass);
}
.nav.is-solid .nav-logo { height: clamp(46px, 5.6vw, 62px); }
.nav-wordmark { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.nav-wordmark strong {
  font-family: var(--serif); font-size: clamp(1.45rem, 2.7vw, 2.05rem);
  letter-spacing: 0.06em; color: var(--ink); white-space: nowrap;
  transition: font-size 0.55s var(--ease-glass);
}
.nav.is-solid .nav-wordmark strong { font-size: clamp(1.3rem, 2.1vw, 1.6rem); }
.nav-wordmark span {
  font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 4px; white-space: nowrap;
}
/* En móvil se conserva el nombre de marca (lo más reconocible) y se retira
   la línea secundaria, que es la más ancha por su tracking. */
@media (max-width: 479px) {
  .nav-wordmark span { display: none; }
  .nav-wordmark strong { font-size: 1.32rem; letter-spacing: 0.04em; }
  .nav-brand { gap: 0.6rem; }
}
@media (max-width: 339px) { .nav-wordmark { display: none; } }

.nav-links {
  display: none; align-items: center; gap: 2.3rem;
  list-style: none; padding: 0;
}
@media (min-width: 960px) { .nav-links { display: flex; } }
.nav-links a {
  position: relative;
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
  padding-block: 0.4rem;
  transition: color 0.3s var(--ease-out);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--accent); transition: right 0.4s var(--ease-out), opacity 0.3s var(--ease-out);
  opacity: 0.7;
}
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a.is-active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a.is-active::after { right: 0; }
.nav-links a.is-active::after { opacity: 1; background: var(--lavender-deep); }
.nav-links a:focus-visible { outline-offset: 6px; }

.nav-actions { display: flex; align-items: center; gap: 0.4rem; }

.cart-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--lavender-deep); color: var(--accent-contrast);
  font-size: 0.62rem; font-weight: 600; border-radius: 999px;
  transform: scale(0); transition: transform 0.35s var(--ease-bounce, var(--ease-out));
}
.cart-badge.is-visible { transform: scale(1); }
.cart-badge.is-pulsing { animation: badgePulse 0.5s var(--ease-out); }
@keyframes badgePulse { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }

.nav-burger {
  display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center;
  border-radius: 50%;
}
@media (min-width: 960px) { .nav-burger { display: none; } }
.burger-lines { position: relative; display: block; width: 22px; height: 14px; flex: none; }
.burger-lines span {
  display: block; position: absolute; left: 0; width: 100%; height: 2px;
  border-radius: 1px; background: var(--ink);
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out), top 0.35s var(--ease-out);
}
.burger-lines span:nth-child(1) { top: 0; }
.burger-lines span:nth-child(2) { top: 6px; }
.burger-lines span:nth-child(3) { top: 12px; }
html.menu-open .burger-lines span:nth-child(1) { top: 6px; transform: rotate(45deg); }
html.menu-open .burger-lines span:nth-child(2) { opacity: 0; }
html.menu-open .burger-lines span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 480;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 1rem) 1.5rem 3rem;
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease-out);
}
html.menu-open .mobile-menu { transform: translateY(0); }
.mobile-menu ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.mobile-menu a {
  font-family: var(--serif); font-size: 2.1rem; color: var(--ink);
  transition: color 0.3s var(--ease-out);
}
.mobile-menu a:hover, .mobile-menu a:focus-visible, .mobile-menu a.is-active { color: var(--lavender-deep); }

/* =============================================================
   6. Hero
   ============================================================= */
.hero { padding-top: calc(var(--nav-h) + var(--nav-inset) + 0.75rem); }
.hero-media {
  position: relative;
  height: 62svh; min-height: 420px;
  background: var(--bg-2);
}
.hero-media img {
  /* En móvil el texto va debajo de la foto, así que encuadramos a la modelo
     (ocupa del 36% al 100% del original) y no el aire de la izquierda. */
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 74% 28%;
}
.hero-content {
  padding: 3rem 1.5rem 3.5rem;
  max-width: 34rem;
}
.hero-content .kicker { margin-bottom: 1.1rem; }
.hero-title {
  font-size: clamp(2.3rem, 8vw, 3.4rem);
  max-width: 15ch;
}
.hero-sub {
  margin-top: 1.3rem; font-size: 1.05rem; color: var(--ink-mute); max-width: 34ch;
}
.hero-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }

@media (min-width: 960px) {
  .hero {
    position: relative; padding-top: 0;
    min-height: 100svh; display: flex; align-items: center;
    overflow: hidden;
  }
  .hero-media { position: absolute; inset: 0; height: 100%; min-height: 0; }
  /* El recorte (solo un 9% del ancho) se reparte hacia la derecha, sobre los
     bodegones del borde, para conservar el aire de la izquierda donde se
     apoya el titular. La modelo queda íntegra. */
  .hero-media img { object-position: 25% center; }
  .hero-media::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg,
      var(--bg) 0%,
      rgba(246, 241, 231, 0.92) 26%,
      rgba(246, 241, 231, 0.62) 40%,
      rgba(246, 241, 231, 0.14) 56%,
      transparent 70%);
  }
  .hero-content {
    position: relative; z-index: 2;
    padding: 0 3rem; max-width: 40rem;
  }
  .hero-title { max-width: 13ch; }
}
@media (min-width: 1280px) { .hero-content { padding-left: 4.5rem; } }

/* =============================================================
   7. Marquee ticker
   ============================================================= */
.marquee {
  position: relative;
  border-block: 1px solid var(--line);
  overflow: hidden;
  padding-block: 1.2rem;
  background: var(--paper);
}
.marquee-track {
  display: flex; width: max-content;
  animation: marqueeScroll 42s linear infinite;
}
.marquee-track span {
  position: relative;
  font-family: var(--sans); font-weight: 500; font-size: 0.92rem;
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
  color: var(--ink-mute); padding-inline: 1.4rem;
  display: inline-flex; align-items: center; gap: 1.4rem;
  white-space: nowrap;
  transition: color 0.35s var(--ease-out), transform 0.35s var(--ease-out), text-shadow 0.35s var(--ease-out);
}
.marquee-track span::after { content: "·"; color: var(--lavender-deep); letter-spacing: 0; }
html.has-hover .marquee-track span:hover {
  color: var(--lavender-deep);
  transform: translateY(-3px);
  text-shadow: 0 6px 18px rgba(130, 112, 159, 0.35);
}
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =============================================================
   8. Esencia (brand story)
   ============================================================= */
.esencia-grid {
  display: grid; gap: 3rem;
  align-items: center;
}
@media (min-width: 960px) {
  .esencia-grid { grid-template-columns: 1.05fr 0.95fr; gap: 4.5rem; }
  .esencia-grid.is-reverse { grid-template-columns: 0.95fr 1.05fr; }
  .esencia-grid.is-reverse .esencia-visual { order: 2; }
}

.esencia-visual { position: relative; }
.esencia-figure {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-soft);
}
.esencia-figure img { width: 100%; height: 100%; object-fit: cover; }
.esencia-deco {
  position: absolute; z-index: -1; pointer-events: none;
  opacity: 0.9;
}
.esencia-deco-1 { width: 190px; top: -8%; right: -10%; }
.esencia-deco-2 { width: 130px; bottom: -6%; left: -8%; opacity: 0.7; }

.esencia-text .section-head { margin-bottom: 1.6rem; }
.esencia-statement { font-size: 1.08rem; max-width: 42ch; }

.pillars {
  margin-top: 3rem;
  display: grid; gap: 1.8rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 719px) { .pillars { grid-template-columns: 1fr; gap: 2rem; } }
.pillar-num {
  font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--lavender-deep);
}
.pillar h3 { font-size: 1.25rem; margin-top: 0.5rem; }
.pillar p { margin-top: 0.5rem; font-size: 0.92rem; color: var(--ink-mute); }

.pull-quote {
  margin-top: 4.5rem;
  padding-top: 3rem; border-top: 1px solid var(--line);
  text-align: center;
}
.pull-quote p {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); color: var(--ink);
  max-width: 34ch; margin-inline: auto;
}
.pull-quote cite {
  display: block; margin-top: 1.1rem; font-style: normal;
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute);
}

/* =============================================================
   9. Tienda (shop)
   ============================================================= */
.shop-section {
  overflow: hidden; /* recorta el fondo interactivo y la espuma a los límites de la sección */
  isolation: isolate;
}
.shop-section .container { position: relative; z-index: 3; }

/* Fondo con vida propia, siempre presente (no solo al pasar el cursor):
   sin esto, el cristal de las tarjetas no tiene nada con variación real
   que desenfocar — un color liso desenfocado sigue siendo el mismo color
   liso, así que el efecto "cristal" quedaba invisible. */
.shop-mesh {
  position: absolute; inset: -15%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 48% at 14% 18%, rgba(154, 138, 189, 0.85) 0%, transparent 72%),
    radial-gradient(38% 44% at 88% 10%, rgba(198, 160, 88, 0.62) 0%, transparent 74%),
    radial-gradient(44% 50% at 82% 88%, rgba(120, 134, 96, 0.65) 0%, transparent 72%),
    radial-gradient(40% 46% at 12% 90%, rgba(154, 138, 189, 0.62) 0%, transparent 74%),
    radial-gradient(36% 40% at 50% 48%, rgba(198, 160, 88, 0.34) 0%, transparent 70%);
  filter: blur(6px);
  animation: shopMeshDrift 28s ease-in-out infinite alternate;
}
@keyframes shopMeshDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-2.5%, 2%) scale(1.08); }
  100% { transform: translate(2%, -1.5%) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .shop-mesh { animation: none; } }

.shop-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.6s var(--ease-out);
  background:
    radial-gradient(560px circle at var(--mx, 50%) var(--my, 20%), rgba(168, 155, 196, 0.32), transparent 62%),
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 20%), rgba(198, 165, 101, 0.2), transparent 68%);
}
html.has-hover .shop-section.is-glowing .shop-glow { opacity: 1; }

.shop-foam {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
}

/* Móvil: una sola columna a todo el ancho — mismo aire que en escritorio,
   sin apretar precio + selector + botón en ~160px. A partir de 540px ya
   caben dos columnas con holgura real. */
.product-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 540px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } }
@media (min-width: 720px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
@media (min-width: 1280px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

/* Misma cápsula de cristal que la barra de navegación y el carrito: fondo
   translúcido + desenfoque, así se ve (y se mueve) el fondo de la sección
   a través de la tarjeta en vez de una caja de papel opaca. */
.product-card {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0; /* evita que el contenido no compresible (precio + stepper) fuerce el carril del grid */
  background: rgba(255, 253, 248, 0.3); /* más transparente que el resto del cristal: aquí es donde más debe notarse */
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.2rem 1.5rem;
  box-shadow: 0 10px 30px -20px rgba(44, 38, 32, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.55s var(--ease-glass), box-shadow 0.55s var(--ease-glass), border-color 0.55s var(--ease-glass), background-color 0.55s var(--ease-glass);
}
@supports not (backdrop-filter: blur(20px)) { .product-card { background: var(--glass-bg-strong); } }
@media (prefers-reduced-transparency: reduce) { .product-card { background: rgba(255, 253, 248, 0.96); backdrop-filter: none; } }
@media (max-width: 539px) {
  /* Tarjeta ancha en móvil: la imagen no necesita ser tan alta como el 1:1 de escritorio */
  .product-card { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0 1.1rem; }
  .product-media { width: 132px; aspect-ratio: 1 / 1; margin-bottom: 0; flex: none; }
  .product-name, .product-benefits, .product-footer, .product-add { width: calc(100% - 132px - 1.1rem); }
  .product-add { width: 100%; margin-top: 1.1rem; }
}
html.has-hover .product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 54px -26px rgba(130, 112, 159, 0.4), 0 8px 18px -10px rgba(44, 38, 32, 0.14);
  border-color: rgba(168, 155, 196, 0.4);
}
.product-media {
  /* Antes era un bloque sólido (var(--bg-2)/var(--bg) opacos) que ocupaba la
     mayor parte de la tarjeta — por mucho que el resto fuera cristal, esta
     era la zona que dominaba la vista y la que seguía leyéndose como "hoja
     crema". Ahora es translúcida también, sobre el desenfoque que ya aplica
     la tarjeta, con solo el toque justo para que el jabón se apoye en algo. */
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: radial-gradient(120% 120% at 50% 22%, rgba(239, 230, 213, 0.32) 0%, rgba(246, 241, 231, 0.08) 78%);
  box-shadow: inset 0 0 0 1px rgba(44, 38, 32, 0.04);
  overflow: hidden;
  margin-bottom: 1.2rem;
}
.product-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  padding: 8%;
  transition: transform 0.7s var(--ease-glass);
}
html.has-hover .product-card:hover .product-media img { transform: scale(1.06); }

.product-quickview {
  position: absolute; right: 0.7rem; bottom: 0.7rem;
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.5rem 0.85rem; border-radius: 999px;
  background: rgba(255,253,248,0.9); color: var(--ink);
  border: 1px solid rgba(44,38,32,0.14);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), background-color 0.3s var(--ease-out);
}
html.has-hover .product-card:hover .product-quickview { opacity: 1; transform: none; }
.product-quickview:hover { background: var(--paper); }
.product-quickview:focus-visible { opacity: 1; transform: none; }

.product-name { font-size: 1.3rem; }
.product-benefits {
  margin-top: 0.4rem; font-size: 0.8rem; color: var(--ink-mute); letter-spacing: 0.01em;
  min-height: 2.4em;
}
.product-footer {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.product-price {
  font-family: var(--price-font); font-optical-sizing: auto;
  font-weight: 560; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--ink);
  white-space: nowrap;
}

/* Chip de cristal — mismo lenguaje visual que la cápsula de navegación
   (fondo translúcido + desenfoque + borde luminoso). */
.qty-stepper {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--glass-border); border-radius: 999px; padding: 0.22rem 0.3rem;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 8px 20px -14px rgba(44, 38, 32, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  flex: none;
}
@supports not (backdrop-filter: blur(20px)) { .qty-stepper { background: var(--glass-bg-strong); } }
.qty-stepper button {
  width: 25px; height: 25px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1rem; line-height: 1; color: var(--ink-soft); flex: none;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.qty-stepper button:hover { background: rgba(168, 155, 196, 0.28); color: var(--lavender-deep); }
.qty-stepper output { min-width: 1.3em; text-align: center; font-size: 0.85rem; }

.product-add {
  margin-top: 0.9rem; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  padding: 0.85rem 1rem;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border-radius: 999px;
  transition: background-color 0.35s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.product-add:hover { background: var(--lavender-deep); transform: translateY(-1px); box-shadow: 0 12px 24px -14px rgba(130, 112, 159, 0.55); }
.product-add svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease-out); }
.product-add:hover svg { transform: translateY(-1px); }
.product-add.is-added { background: var(--sage-deep); }

.shop-note {
  margin-top: 3rem; text-align: center; font-size: 0.85rem; color: var(--ink-mute);
}

/* =============================================================
   10. Cart drawer
   ============================================================= */
.cart-backdrop {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(44, 38, 32, 0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
html.cart-open .cart-backdrop { opacity: 1; pointer-events: auto; }

/* El panel de cristal reutiliza el mismo lenguaje que la cápsula de
   navegación: fondo translúcido + desenfoque + borde luminoso, en vez del
   panel de papel opaco anterior. */
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 610;
  width: min(440px, 100vw);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(28px) saturate(180%);
  border-left: 1px solid var(--glass-border);
  border-radius: 26px 0 0 26px;
  box-shadow: -40px 0 70px -30px rgba(44, 38, 32, 0.4), inset 1px 0 0 rgba(255, 255, 255, 0.4);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.55s var(--ease-glass);
}
@supports not (backdrop-filter: blur(28px)) { .cart-drawer { background: rgba(255, 253, 248, 0.97); } }
html.cart-open .cart-drawer { transform: translateX(0); }
@media (max-width: 539px) { .cart-drawer { border-radius: 22px 0 0 22px; } }

.cart-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem 1.6rem 1.2rem; border-bottom: 1px solid var(--glass-border);
}
.cart-header h2 { font-size: 1.5rem; }

.cart-body { flex: 1; overflow-y: auto; padding: 1.1rem 1.2rem; }

.cart-empty { padding-block: 3rem; text-align: center; color: var(--ink-mute); }
.cart-empty svg { margin-inline: auto; opacity: 0.5; }
.cart-empty p { margin-top: 1rem; }
.cart-empty .btn { margin-top: 1.4rem; }

/* Cada línea es su propia tarjeta de cristal, no una fila con simple regla
   inferior — refuerza la sensación de boutique en vez de lista de tabla. */
.cart-item {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 0.85rem;
  padding: 0.85rem; margin-block: 0.55rem;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  transition: background-color 0.3s var(--ease-out);
}
.cart-item:hover { background: rgba(255, 255, 255, 0.6); }
.cart-item-media {
  width: 64px; height: 64px; border-radius: 12px;
  background: var(--bg-2); overflow: hidden;
}
.cart-item-media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.cart-item-name { font-size: 1rem; }
.cart-item-unit { font-size: 0.76rem; color: var(--ink-mute); margin-top: 0.15rem; }
.cart-item-row { display: flex; align-items: center; justify-content: space-between; margin-top: 0.65rem; gap: 0.6rem; }
.cart-item-remove { font-size: 0.72rem; color: var(--ink-mute); text-decoration: underline; text-underline-offset: 3px; }
.cart-item-remove:hover { color: var(--accent); }
.cart-item-total {
  font-family: var(--price-font); font-optical-sizing: auto; font-weight: 560;
  font-size: 1.1rem; text-align: right; white-space: nowrap;
}

.cart-footer { padding: 1.3rem 1.6rem 1.7rem; border-top: 1px solid var(--glass-border); }
.cart-subtotal { display: flex; align-items: baseline; justify-content: space-between; font-size: 1rem; }
.cart-subtotal strong { font-family: var(--price-font); font-optical-sizing: auto; font-weight: 600; font-size: 1.65rem; }
.cart-disclaimer { margin-top: 0.7rem; font-size: 0.74rem; color: var(--ink-mute); line-height: 1.5; }
.cart-footer .btn { margin-top: 1.1rem; }

/* =============================================================
   11. Modals (quick view / checkout / legal)
   ============================================================= */
dialog.modal {
  position: fixed; inset: 0; margin: auto; z-index: 700;
  width: min(880px, 92vw); max-height: 88svh;
  overflow-y: auto;
  border: 0; background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 2.4rem;
  opacity: 0; transform: translateY(18px) scale(0.98);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), overlay 0.35s allow-discrete, display 0.35s allow-discrete;
}
dialog.modal[open] { opacity: 1; transform: none; }
@starting-style { dialog.modal[open] { opacity: 0; transform: translateY(18px) scale(0.98); } }
dialog.modal::backdrop { background: rgba(44, 38, 32, 0.4); }
dialog.modal.is-narrow { width: min(560px, 92vw); }
.modal-close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2);
}
.modal-close:hover { background: var(--lavender-pale); }

.quickview-grid { display: grid; gap: 2rem; }
@media (min-width: 720px) { .quickview-grid { grid-template-columns: 1fr 1fr; gap: 2.6rem; } }
.quickview-media {
  aspect-ratio: 1 / 1; border-radius: var(--radius-md);
  background: radial-gradient(120% 120% at 50% 24%, var(--bg-2) 0%, var(--bg) 78%);
  position: relative; overflow: hidden;
}
.quickview-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.quickview-info .kicker { margin-bottom: 0.8rem; }
.quickview-info h3 { font-size: 2rem; }
.quickview-benefits { margin-top: 0.6rem; color: var(--lavender-deep); font-size: 0.85rem; letter-spacing: 0.02em; }
.quickview-desc { margin-top: 1.1rem; font-size: 0.98rem; color: var(--ink-mute); }
.quickview-price {
  margin-top: 1.4rem; font-family: var(--price-font); font-optical-sizing: auto;
  font-weight: 560; font-size: 1.9rem; color: var(--ink);
}
.quickview-actions { margin-top: 1.6rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.demo-badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.5rem 0.9rem; border-radius: 999px;
  background: var(--lavender-pale); color: var(--lavender-deep);
  margin-bottom: 1.6rem;
}
.demo-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.checkout-summary { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.2rem 1.4rem; margin-bottom: 1.6rem; }
.checkout-row { display: flex; justify-content: space-between; font-size: 0.92rem; padding-block: 0.4rem; }
.checkout-row.total {
  border-top: 1px solid var(--line); margin-top: 0.4rem; padding-top: 0.8rem;
  font-family: var(--price-font); font-optical-sizing: auto; font-weight: 560; font-size: 1.3rem;
}

.checkout-success { text-align: center; padding-block: 1rem; }
.checkout-success svg { margin-inline: auto; color: var(--sage-deep); }
.checkout-success h3 { margin-top: 1.2rem; font-size: 1.6rem; }
.checkout-success p { margin-top: 0.6rem; color: var(--ink-mute); }
.checkout-success .btn { margin-top: 1.6rem; }

.legal-body { margin-top: 1rem; font-size: 0.95rem; color: var(--ink-mute); }

/* =============================================================
   12. Forms
   ============================================================= */
.field { margin-bottom: 1.3rem; }
.field label {
  display: block; margin-bottom: 0.5rem;
  font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute);
}
.field input, .field textarea {
  width: 100%; padding: 0.85rem 1rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 0.95rem; color: var(--ink);
  transition: border-color 0.3s var(--ease-out);
}
.field input:focus, .field textarea:focus { border-color: var(--lavender-deep); outline: none; }
.field textarea { resize: vertical; min-height: 120px; }
.field-hint { margin-top: 0.4rem; font-size: 0.76rem; color: var(--ink-mute); }

.form-success {
  display: none; align-items: center; gap: 0.7rem;
  padding: 0.9rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--lavender-pale); color: var(--lavender-deep); font-size: 0.88rem;
  margin-top: 1.2rem;
}
.form-success.is-visible { display: flex; }

/* =============================================================
   13. Contacto
   ============================================================= */
/* Cierre en espejo del hero: allí la modelo está a la derecha y el texto a la
   izquierda; aquí la fotografía ocupa todo el fondo con la modelo a la
   izquierda y el contenido a la derecha, sobre el degradado marfil. */
.contact-section { position: relative; overflow: hidden; padding-block: 0; }

.contact-photo {
  position: relative; width: 100%;
  /* La modelo ocupa el 50% izquierdo del encuadre y arranca justo en el borde,
     así que el recorte se hace siempre por la derecha (aire marfil). En móvil
     un formato cuadrado la muestra entera y con mucha más presencia que la
     proporción original 16:9. */
  aspect-ratio: 1 / 1;
  background: var(--bg-2);
}
.contact-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: left center;
}
@media (min-width: 540px) { .contact-photo { aspect-ratio: 5 / 4; } }
@media (min-width: 720px) { .contact-photo { aspect-ratio: 16 / 9; } }

.contact-inner { padding-block: clamp(2.5rem, 7vw, 4rem) clamp(3.5rem, 9vw, 6rem); }

@media (min-width: 960px) {
  .contact-section {
    display: flex; align-items: center;
    min-height: 92svh;
    padding-block: clamp(4rem, 7vw, 7rem);
  }
  .contact-photo {
    position: absolute; inset: 0; aspect-ratio: auto; width: auto;
  }
  .contact-photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to left,
      var(--bg) 0%,
      rgba(246, 241, 231, 0.97) 34%,
      rgba(246, 241, 231, 0.84) 46%,
      rgba(246, 241, 231, 0.32) 62%,
      transparent 78%);
  }
  .contact-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
    padding-block: 0;
  }
  .contact-panel { grid-column: 2; }
}
@media (min-width: 1280px) {
  .contact-inner { grid-template-columns: 1.08fr 0.92fr; }
}

.contact-details { margin-top: 2.2rem; display: grid; gap: 1rem; }
.contact-detail { display: flex; gap: 0.9rem; align-items: baseline; font-size: 0.95rem; }
.contact-detail dt { color: var(--ink-mute); min-width: 5.5rem; letter-spacing: 0.04em; font-size: 0.78rem; text-transform: uppercase; }
.contact-detail dd a:hover { color: var(--accent); }

/* =============================================================
   14. Footer
   ============================================================= */
.site-footer { background: var(--ink); color: rgba(255,253,248,0.72); padding-block: 4rem 2.2rem; }
.footer-grid {
  display: grid; gap: 2.6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.footer-brand { display: flex; align-items: center; gap: 0.8rem; }
.footer-logo { height: 58px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.footer-brand-text strong { font-family: var(--serif); font-size: 1.4rem; color: var(--paper); }
.footer-brand-text span { display: block; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 2px; }
.footer-desc { margin-top: 1.2rem; font-size: 0.9rem; max-width: 28rem; color: rgba(255,253,248,0.6); }

.footer-col h4 {
  font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,253,248,0.55); margin-bottom: 1.1rem; font-weight: 500;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.footer-col a { font-size: 0.92rem; }
.footer-col a:hover { color: var(--paper); }

.footer-bottom {
  margin-top: 3.2rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,253,248,0.14);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.footer-tagline { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,253,248,0.55); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer-legal a { font-size: 0.78rem; color: rgba(255,253,248,0.55); }
.footer-legal a:hover { color: var(--paper); }
.footer-social { display: flex; gap: 0.7rem; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,253,248,0.2);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.footer-social a:hover { border-color: var(--lavender); background: rgba(168,155,196,0.12); }
.footer-social svg { width: 17px; height: 17px; }

/* =============================================================
   15. Reduced motion / transparencia / contraste
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .cart-badge.is-pulsing { animation: none; }
  .shop-glow, .shop-foam { display: none; } /* fondo interactivo y espuma son puramente ambientales */
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-solid {
    background: rgba(255, 253, 248, 0.98);
    backdrop-filter: none;
  }
  .cart-drawer { background: rgba(255, 253, 248, 0.98); backdrop-filter: none; }
  .cart-item, .qty-stepper { background: rgba(255, 253, 248, 0.9); backdrop-filter: none; }
}
@media (hover: none), (pointer: coarse) {
  .shop-glow, .shop-foam { display: none; } /* táctil: efecto ambiental desactivado, no aporta valor */
}