/* ═══════════════════════════════════════════════════════════════════════════
   Esencia Viva — Velas aromáticas artesanales
   Design direction: warm, artisanal, golden-earthy palette
   Typography: Cormorant Garamond (headings) + Lato (body)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Palette ────────────────────── */
  --terracotta: #8B5E3C;
  --terracotta-dk: #5C3826;
  --terracotta-lt: #C49A6C;
  --gold: #C8914A;
  --gold-dk: #9B6E2E;
  --gold-lt: #E8C97A;
  --cream: #FDF8F0;
  --cream-dk: #F0E6D8;
  --warm-white: #FFFAF5;
  --ink: #2C1E14;
  --ink-lt: #5C4A3A;
  --sage: #8B9A7E;
  --rose: #C97B84;
  --rose-dk: #A85D66;
  --burgundy: #6B2D3B;

  /* ── Typography ────────────────── */
  --ff-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ff-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Spacing ───────────────────── */
  --wrap: 1200px;
  --pad: clamp(1rem, 4vw, 2.5rem);

  /* ── Shadows ───────────────────── */
  --sh-sm: 0 2px 8px rgba(44, 30, 20, .08);
  --sh-md: 0 4px 20px rgba(44, 30, 20, .12);
  --sh-lg: 0 8px 40px rgba(44, 30, 20, .16);

  /* ── Transitions ───────────────── */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--terracotta); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--terracotta-dk); }

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

/* ── Skip link ─────────────────────────────────────────────────────────── */
.skip {
  position: absolute; top: -100px; left: 1rem; z-index: 1000;
  background: var(--ink); color: var(--cream); padding: .5rem 1rem;
  border-radius: 0 0 6px 6px; font-weight: 700;
}
.skip:focus { top: 0; }

/* ── Typography ────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--ff-heading); font-weight: 600; line-height: 1.2; color: var(--ink); }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.1rem; font-weight: 500; }

.hl { color: var(--gold); font-style: italic; }

.eyebrow {
  font-family: var(--ff-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin-bottom: .5rem;
}
.eyebrow--ink { color: var(--terracotta); }

.lede {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--ink-lt);
  max-width: 32em;
}

.sh {
  text-align: center;
  margin-bottom: 2.5rem;
}
.sh__p {
  color: var(--ink-lt);
  max-width: 36em;
  margin: .75rem auto 0;
}
.sh__note {
  color: var(--terracotta);
  font-style: italic;
  font-size: .95rem;
  margin-top: .5rem;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .65rem 1.4rem;
  font-family: var(--ff-body);
  font-size: .9rem; font-weight: 700;
  border: none; border-radius: 50px;
  cursor: pointer;
  transition: all .25s var(--ease);
  white-space: nowrap;
}
.btn--big { padding: .85rem 2rem; font-size: 1rem; }

.btn--gold {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 2px 12px rgba(200, 145, 74, .35);
}
.btn--gold:hover { background: var(--gold-dk); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(200, 145, 74, .45); }

.btn--wa {
  background: #25D366;
  color: #fff;
}
.btn--wa:hover { background: #1da851; color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink-lt);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.btn--ghost-d {
  color: var(--terracotta);
  border-color: var(--terracotta);
}
.btn--ghost-d:hover { background: var(--terracotta); color: var(--cream); border-color: var(--terracotta); }

.btn--full { width: 100%; justify-content: center; }

.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn--wa svg { fill: currentColor; }

/* ── Navigation ────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 250, 245, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cream-dk);
}
.nav__in {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.nav__logo {
  flex-shrink: 0;
}
.nav__logo img {
  width: auto; height: 48px;
  transition: opacity .2s;
}
.nav__logo:hover img { opacity: .8; }

.nav__links {
  display: flex; align-items: center; gap: 1.5rem;
  list-style: none;
}
.nav__links a:not(.btn) {
  font-size: .9rem; font-weight: 600;
  color: var(--ink-lt);
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav__links a:not(.btn):hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

/* ── Burger ────────────────────────────────────────────────────────────── */
.burger {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: none;
  padding: 4px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 26px; height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex; align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dk) 40%, #E8D5C0 100%);
}

.hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 75% 50%, rgba(200, 145, 74, .15) 0%, transparent 60%),
    radial-gradient(ellipse at 25% 70%, rgba(139, 94, 60, .08) 0%, transparent 50%);
}

.hero__in {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.hero__copy {
  max-width: 32em;
}
.hero__copy h1 { margin: .25rem 0 1rem; }
.hero__copy .lede { margin-bottom: 2rem; }

.hero__cta {
  display: flex; flex-wrap: wrap; gap: 1rem;
}

/* ── Hero Art ──────────────────────────────────────────────────────────── */
.hero__art {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 400px;
}

/* The hero is the 3D candle render Carlos made (assets/hero-candle.webp, from
   _originals/hero-candle-source.png via build_hero.py — the yellow-bouquet
   piece of the catalog). No frame, no disc: the candle sits directly on the
   hero gradient, so what makes it read as a solid object is its own
   drop-shadow, cast through the alpha silhouette, plus the light it throws.
   Everything scales off --candle, so the mobile breakpoint changes one value.
   --wick-x/--wick-y are the wick tip measured on the exported asset. The wick
   is the topmost thing in the render, so --wick-y is ~0 and the flame lives
   ABOVE the image box — nothing in the hero may clip it. */
.hero__candle {
  --candle: 300px;
  --wick-x: 47.9%;
  --wick-y: .4%;
  position: relative;
  width: var(--candle);
  margin-top: calc(var(--candle) * .16);   /* headroom for the flame */
}

.hero__candle img {
  position: relative; z-index: 1;
  display: block;
  width: 100%; height: auto;
  /* Two shadows: a tight contact one and a wide soft one. Warm, not grey —
     a grey shadow under warm wax is the thing that makes a cut-out look
     pasted on. */
  filter:
    drop-shadow(0 6px 8px rgba(92, 56, 38, .2))
    drop-shadow(0 24px 36px rgba(92, 56, 38, .16));
}

/* Ambient warm light thrown into the air around the wick — this sits BEHIND
   the candle, so it reads as the room lighting up, not as a sticker glow. */
.hero__aura {
  position: absolute; z-index: 0;
  left: var(--wick-x); top: var(--wick-y);
  width: calc(var(--candle) * 2.1); height: calc(var(--candle) * 2.1);
  transform: translate(-50%, -34%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 216, 138, .5) 0%,
    rgba(255, 195, 100, .22) 24%,
    rgba(220, 160, 80, .1) 46%,
    transparent 70%);
  animation: auraBreathe 5s var(--ease) infinite alternate;
  pointer-events: none;
}

/* Contact shadow on the ground, under the plate. The drop-shadow above tracks
   the silhouette; this one gives it somewhere to stand. */
.hero__shadow {
  position: absolute; z-index: 0;
  left: 50%; bottom: calc(var(--candle) * -.02);
  width: calc(var(--candle) * .66); height: calc(var(--candle) * .07);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(92, 56, 38, .3) 0%, rgba(92, 56, 38, .12) 45%, transparent 72%);
  filter: blur(5px);
  pointer-events: none;
}

/* Warm light spilling from the wick onto the wax itself — this is what sells
   "lit" more than the flame shape does. screen keeps the highlight additive. */
.hero__halo {
  position: absolute; z-index: 2;
  left: var(--wick-x); top: var(--wick-y);
  width: calc(var(--candle) * .95); height: calc(var(--candle) * .95);
  transform: translate(-50%, -14%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 240, 190, .82) 0%,
    rgba(255, 210, 120, .34) 24%,
    rgba(255, 192, 92, .12) 48%,
    transparent 72%);
  mix-blend-mode: screen;
  animation: haloBreathe 3.6s var(--ease) infinite alternate;
  pointer-events: none;
}

/* Teardrop flame, base parked on the wick tip and rising above it. */
.hero__flame {
  position: absolute; z-index: 3;
  left: var(--wick-x); top: var(--wick-y);
  width: calc(var(--candle) * .055);
  height: calc(var(--candle) * .14);
  transform: translate(-50%, -86%);
  transform-origin: 50% 100%;
  background: radial-gradient(ellipse at 50% 74%,
    #FFFFFF 0%, #FFF6D2 20%, #FFD980 46%, #F5A93C 72%, rgba(214, 126, 32, .55) 90%, rgba(214, 126, 32, 0) 100%);
  border-radius: 50% 50% 46% 46% / 68% 68% 32% 32%;
  filter: blur(1.2px);
  box-shadow: 0 0 18px rgba(255, 196, 88, .8), 0 0 44px rgba(255, 172, 60, .45), 0 0 90px rgba(255, 165, 50, .22);
  animation: flameFlicker 2.4s var(--ease) infinite alternate;
  pointer-events: none;
}
/* Hot core, slightly lower and out of phase so the flame never looks frozen. */
.hero__flame::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 12%;
  width: 46%; height: 42%;
  transform: translateX(-50%);
  border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 70%, #FFFFFF 0%, #FFF6DA 60%, rgba(255, 246, 218, 0) 100%);
  filter: blur(.8px);
  animation: coreFlicker 1.7s var(--ease) infinite alternate;
}

@keyframes auraBreathe {
  0%   { opacity: .72; transform: translate(-50%, -34%) scale(.9); }
  100% { opacity: 1;   transform: translate(-50%, -34%) scale(1.08); }
}
@keyframes haloBreathe {
  0%   { opacity: .75; transform: translate(-50%, -14%) scale(.92); }
  100% { opacity: 1;   transform: translate(-50%, -14%) scale(1.08); }
}
@keyframes flameFlicker {
  0%   { transform: translate(-50%, -86%) scale(1, 1)       rotate(-1.5deg); }
  30%  { transform: translate(-49%, -87%) scale(.94, 1.07)  rotate(1.5deg); }
  55%  { transform: translate(-51%, -85%) scale(1.06, .93)  rotate(-1deg); }
  80%  { transform: translate(-50%, -88%) scale(.97, 1.04)  rotate(.8deg); }
  100% { transform: translate(-50%, -86%) scale(1.02, .98)  rotate(0deg); }
}
@keyframes coreFlicker {
  0%   { opacity: .75; transform: translateX(-50%) scaleY(.9); }
  100% { opacity: 1;   transform: translateX(-50%) scaleY(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__aura, .hero__halo, .hero__flame, .hero__flame::before { animation: none; }
}

/* ── Strip ─────────────────────────────────────────────────────────────── */
.strip {
  background: var(--terracotta);
  color: var(--cream);
  padding: 2rem 0;
}
.strip__in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: center;
}
.strip__i b {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--gold-lt);
  margin-bottom: .2rem;
}
.strip__i span {
  font-size: .85rem;
  opacity: .85;
}

/* ── Sections ──────────────────────────────────────────────────────────── */
.sec { padding: 5rem 0; }
.sec--historia { background: var(--warm-white); }
.sec--fe { background: var(--cream-dk); }
.sec--cat { background: var(--cream); }
.sec--personalizados { background: var(--terracotta-dk); color: var(--cream); }
.sec--contacto { background: var(--warm-white); }

/* ── Historia ──────────────────────────────────────────────────────────── */
.historia__in {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 3rem;
  align-items: start;
}
.historia__text {
  color: var(--ink-lt);
  max-width: 40em;
}
.historia__text p { margin-bottom: 1.2rem; }
.historia__text p:last-child { margin-bottom: 0; }

.historia__firma {
  font-family: var(--ff-heading);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--terracotta);
  margin-top: 1.5rem;
}

.historia__foto {
  text-align: center;
}
.historia__placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  max-width: 280px;
  margin: 0 auto;
  background: var(--cream-dk);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink-lt);
  gap: .5rem;
}
.historia__placeholder svg { width: 80px; height: 80px; }
.historia__placeholder span {
  font-family: var(--ff-heading);
  font-size: 1.1rem;
  font-style: italic;
}
.historia__foto figcaption {
  font-size: .85rem;
  color: var(--ink-lt);
  margin-top: 1rem;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
}

/* ── Línea de Fe ───────────────────────────────────────────────────────── */
.fe__in {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  max-width: 960px;
}
.fe__foto {
  position: relative;
  margin: 0;
}
.fe__foto::before {
  content: '';
  position: absolute;
  inset: 1rem -1rem -1rem 1rem;
  border: 1px solid var(--gold);
  pointer-events: none;
}
.fe__foto img {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: var(--sh-md);
}
.fe__copy h2 { margin-bottom: 1rem; }
.fe__copy > p:not(.eyebrow) {
  max-width: 34em;
  color: var(--ink-lt);
  margin-bottom: 1.5rem;
}

/* ── Collection Chips ──────────────────────────────────────────────────── */
.chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.chip {
  font-family: var(--ff-body);
  font-size: .85rem; font-weight: 600;
  padding: .5rem 1.2rem;
  border: 1.5px solid var(--terracotta);
  border-radius: 50px;
  background: transparent;
  color: var(--terracotta);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.chip:hover { background: var(--terracotta-lt); border-color: var(--terracotta-lt); color: #fff; }
.chip.active { background: var(--terracotta); color: var(--cream); border-color: var(--terracotta); }

/* ── Product Grid ──────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* ── Product Card ──────────────────────────────────────────────────────── */
.card {
  background: var(--warm-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }

.card__pic {
  position: relative;
  background: var(--cream-dk);
  aspect-ratio: 672/800;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.card__pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.card:hover .card__pic img { transform: scale(1.05); }

.card__body {
  padding: 1rem 1.2rem;
  display: flex; flex-direction: column;
  gap: .6rem;
  flex: 1;
}
.card__body h4 {
  font-family: var(--ff-heading);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  min-height: 2.6em;
}

.card__unconfirmed {
  font-size: .72rem;
  color: var(--rose);
  font-style: italic;
  margin-top: -.3rem;
}

.card .add {
  margin-top: auto;
  font-family: var(--ff-body);
  font-size: .82rem; font-weight: 700;
  padding: .55rem 1rem;
  border: 1.5px solid var(--terracotta);
  border-radius: 50px;
  background: transparent;
  color: var(--terracotta);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.card .add:hover { background: var(--terracotta-lt); border-color: var(--terracotta-lt); color: #fff; }
.card .add.is-in { background: var(--terracotta); color: var(--cream); border-color: var(--terracotta); }

/* ── Catálogo footnote ─────────────────────────────────────────────────── */
.cat__footnote {
  text-align: center;
  color: var(--ink-lt);
  font-size: .9rem;
  margin-top: 3rem;
}
.cat__footnote a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Pedidos Personalizados ────────────────────────────────────────────── */
.personalizados__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.personalizados__copy h2, .personalizados__copy .eyebrow { color: var(--gold-lt); }
.personalizados__copy .sh__p { color: var(--cream-dk); margin: .75rem 0 1.5rem; }

.personalizados__lista {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none;
  margin-bottom: 2rem;
}
.personalizados__lista li {
  font-size: .82rem; font-weight: 600;
  padding: .35rem 1rem;
  border: 1px solid var(--cream-dk);
  border-radius: 50px;
  color: var(--cream-dk);
}

.personalizados__art {
  display: flex; align-items: center; justify-content: center;
}
.personalizados__card {
  text-align: center;
  padding: 3rem 2rem;
  background: rgba(255, 250, 245, .08);
  border: 1px solid rgba(255, 250, 245, .15);
  border-radius: 16px;
  max-width: 280px;
}
.personalizados__icon { font-size: 2.5rem; display: block; margin-bottom: 1rem; }
.personalizados__card p { color: var(--cream-dk); font-size: 1rem; line-height: 1.5; }

/* ── Contacto ──────────────────────────────────────────────────────────── */
.contacto__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.cinfo {
  list-style: none;
  margin-top: 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.cinfo li {
  display: flex; flex-direction: column; gap: .15rem;
}
.cinfo__k {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--terracotta);
}

.cta-card {
  background: var(--cream);
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  box-shadow: var(--sh-md);
}
.cta-card h3 {
  font-family: var(--ff-heading);
  font-size: 1.5rem;
  margin-bottom: .5rem;
}
.cta-card p {
  color: var(--ink-lt);
  margin-bottom: 1.5rem;
  font-size: .95rem;
}
.cta-card .btn { margin: .3rem; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.pie {
  background: var(--ink);
  color: var(--cream-dk);
  padding: 3rem 0;
  text-align: center;
}
.pie__in { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.pie__logo { width: auto; height: 56px; opacity: .9; }
.pie__tagline {
  font-family: var(--ff-heading);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--gold-lt);
}
.pie__c { font-size: .85rem; opacity: .7; }
.pie__l {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem;
  font-size: .85rem; font-weight: 600;
}
.pie__l a { color: var(--gold-lt); }
.pie__l a:hover { color: var(--gold); }
.pie__m { font-size: .75rem; opacity: .5; margin-top: .5rem; }

/* ── Bar (fixed bottom) ────────────────────────────────────────────────── */
.bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: var(--ink);
  color: var(--cream);
  padding: .8rem 0;
  transform: translateY(100%);
  transition: transform .35s var(--ease-bounce);
  box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}
.bar.is-up { transform: translateY(0); }

.bar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.bar__t { font-size: .9rem; }
.bar__t b { color: var(--gold-lt); font-size: 1.1rem; }

/* ── Scrim ─────────────────────────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(44, 30, 20, .5);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.scrim.is-on { opacity: 1; pointer-events: auto; }

/* ── Drawer ────────────────────────────────────────────────────────────── */
.drawer {
  position: fixed; top: 0; right: 0; z-index: 200;
  width: min(420px, 90vw); height: 100dvh;
  background: var(--warm-white);
  box-shadow: -8px 0 40px rgba(0,0,0,.15);
  transform: translateX(100%);
  transition: transform .35s var(--ease-bounce);
  display: flex; flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }

.drawer__h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--cream-dk);
  flex-shrink: 0;
}
.drawer__h h2 {
  font-family: var(--ff-heading);
  font-size: 1.3rem;
}
.drawer__x {
  font-size: 1.8rem; line-height: 1;
  background: none; border: none;
  color: var(--ink-lt);
  cursor: pointer;
  padding: 0 .3rem;
  transition: color .2s;
}
.drawer__x:hover { color: var(--ink); }

.drawer__b {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

/* ── Picked List ───────────────────────────────────────────────────────── */
.picked {
  list-style: none;
  display: flex; flex-direction: column; gap: .6rem;
  margin-bottom: 1.5rem;
}
.picked li {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem .8rem;
  background: var(--cream);
  border-radius: 10px;
  font-size: .9rem;
}
.picked li img {
  width: 40px; height: 40px;
  border-radius: 6px;
  object-fit: cover;
}
.picked li .nm { flex: 1; color: var(--ink); }
.picked li button {
  background: none; border: none;
  font-size: 1.3rem; color: var(--ink-lt);
  cursor: pointer;
  padding: 0 .2rem;
  line-height: 1;
  transition: color .2s;
}
.picked li button:hover { color: var(--rose); }

.picked__e {
  color: var(--ink-lt);
  font-size: .9rem;
  margin-bottom: 1.5rem;
}

/* ── Form ──────────────────────────────────────────────────────────────── */
.field {
  margin-bottom: 1rem;
}
.field label {
  display: block;
  font-size: .82rem; font-weight: 700;
  color: var(--ink);
  margin-bottom: .35rem;
}
.field label small { font-weight: 400; color: var(--ink-lt); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .65rem .9rem;
  font-family: var(--ff-body);
  font-size: .9rem;
  border: 1.5px solid var(--cream-dk);
  border-radius: 10px;
  background: var(--warm-white);
  color: var(--ink);
  transition: border-color .2s;
  -webkit-appearance: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(139, 94, 60, .1);
}
.field input.err,
.field select.err,
.field textarea.err { border-color: var(--rose); }

.shipping {
  border: 0;
  padding: 1rem 0 0;
  margin: .5rem 0 1.25rem;
  border-top: 1px solid var(--cream-dk);
}
.shipping legend {
  padding: 0;
  font-family: var(--ff-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1rem;
}
.shipping legend small {
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 400;
  color: var(--ink-lt);
}
.shipping .field { margin-bottom: .85rem; }
.shipping-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

/* Payment buttons are a clearly labeled, inert checkout preview. */
.payment-preview {
  border-top: 1px solid var(--cream-dk);
  padding-top: 1rem;
  margin: .25rem 0 1.25rem;
}
.payment-preview__eyebrow {
  color: var(--gold-dk);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .15rem;
}
.payment-preview h3 {
  font-family: var(--ff-heading);
  font-size: 1.25rem;
  margin-bottom: .8rem;
}
.payment-preview__buttons {
  display: grid;
  gap: .6rem;
}
.payment-btn {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .65rem .8rem;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #fff;
  font-family: var(--ff-body);
  font-size: .86rem;
  font-weight: 700;
  text-align: left;
  cursor: default;
}
.payment-btn--paypal { background: #003087; border-color: #003087; }
.payment-btn--ath { background: #151515; border-color: #151515; }
.payment-btn__mark {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  font-family: var(--ff-heading);
  font-size: 1.1rem;
  line-height: 1;
}
.payment-preview__note {
  color: var(--ink-lt);
  font-size: .76rem;
  line-height: 1.5;
  margin-top: .75rem;
}

.fnote {
  font-size: .78rem;
  color: var(--ink-lt);
  margin-bottom: 1rem;
}
.fnote--c { text-align: center; margin-top: .8rem; margin-bottom: 0; }

.err {
  font-size: .85rem; font-weight: 600;
  color: var(--rose-dk);
  background: rgba(201, 123, 132, .1);
  padding: .6rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* ── Empty state for products ──────────────────────────────────────────── */
.grid-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ink-lt);
  grid-column: 1 / -1;
}
.grid-empty p {
  font-size: 1rem;
  margin-top: .5rem;
}

/* ── Loading state ─────────────────────────────────────────────────────── */
.skeleton {
  background: var(--cream-dk);
  border-radius: 12px;
  aspect-ratio: 672/800;
  animation: shimmer 1.5s infinite;
  background: linear-gradient(90deg, var(--cream-dk) 25%, var(--cream) 50%, var(--cream-dk) 75%);
  background-size: 200% 100%;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .burger { display: flex; }

  .nav__links {
    position: fixed; top: 72px; left: 0; right: 0;
    flex-direction: column;
    background: var(--warm-white);
    padding: 1.5rem var(--pad);
    border-bottom: 1px solid var(--cream-dk);
    box-shadow: var(--sh-md);
    transform: translateY(-120%);
    transition: transform .35s var(--ease);
    opacity: 0;
    pointer-events: none;
  }
  .nav__links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav__links a:not(.btn) { font-size: 1.05rem; padding: .5rem 0; }

  .hero__in {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  .hero__copy { margin: 0 auto; }
  .hero__copy .lede { max-width: none; }
  .hero__cta { justify-content: center; }
  .hero__art { height: 250px; }
  .hero__candle { --candle: 195px; }

  .strip__in { grid-template-columns: repeat(2, 1fr); }

  .historia__in {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .historia__text { max-width: none; }

  .fe__in { grid-template-columns: minmax(180px, 280px) 1fr; }

  .personalizados__in {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .personalizados__lista { justify-content: center; }

  .contacto__in { grid-template-columns: 1fr; }

  .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (max-width: 500px) {
  .hero { min-height: 70vh; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; justify-content: center; }

  .grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .card__body { padding: .7rem .8rem; }
  .card__body h4 { font-size: .9rem; min-height: 2em; }
  .card .add { font-size: .75rem; padding: .45rem .7rem; }

  .strip__i b { font-size: 1.2rem; }
  .strip__i span { font-size: .75rem; }

  .shipping-grid { grid-template-columns: 1fr; gap: 0; }

  .fe__in { grid-template-columns: 1fr; gap: 2.5rem; }
  .fe__foto { max-width: 280px; margin: 0 auto; }
  .fe__copy { text-align: center; }
  .fe__copy > p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
}