/* Bruma — café de altura. Demo de diseño de oddfox.app */

/* ---------- Tokens ---------- */
:root {
  --crema: #efe9df;
  --crema-2: #e6ded0;
  --verde: #1f2b26;
  --verde-2: #2a3832;
  --cobre: #b5714a;          /* adornos y texto grande */
  --cobre-hondo: #8e5230;    /* texto sobre crema (5,1:1) */
  --cobre-claro: #c8875f;    /* texto sobre verde/tinta (4,9:1) */
  --tinta: #1a1a18;
  --gris: #5e5a52;

  --bg: var(--crema);
  --surface: var(--crema-2);
  --fg: var(--tinta);
  --muted: var(--gris);
  --accent: var(--cobre-hondo);
  --line: rgba(26, 26, 24, 0.14);
  --line-strong: rgba(26, 26, 24, 0.42);
  --band: var(--verde);
  --band-fg: var(--crema);
  --band-accent: var(--cobre-claro);
  --foot: var(--tinta);
  --focus: var(--cobre-hondo);

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-text: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.3125rem;
  --t-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --t-2xl: clamp(2.125rem, 1.4rem + 2.8vw, 3.5rem);
  --t-3xl: clamp(2.75rem, 1.5rem + 5.2vw, 6.25rem);

  --gutter: clamp(16px, 4.2vw, 64px);
  --max: 1320px;
  --header-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #18201c;
    --surface: #212b26;
    --fg: var(--crema);
    --muted: #b9b2a5;
    --accent: var(--cobre-claro);
    --line: rgba(239, 233, 223, 0.14);
    --line-strong: rgba(239, 233, 223, 0.45);
    --band: #111614;
    --foot: #111211;
    --focus: var(--cobre-claro);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-text);
  font-size: var(--t-md);
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 340; font-variation-settings: "opsz" 144, "SOFT" 40; line-height: 1.05; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--cobre); color: var(--crema); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--verde); color: var(--crema); padding: 10px 16px; border-radius: 999px; text-decoration: none; transition: transform 0.2s; }
.skip:focus { transform: translateY(76px); }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  background: none; border: 0; padding: 0;
}
.link:hover { text-decoration-thickness: 2px; }

/* ---------- Botones ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 52px; padding: 0 1.75em;
  border-radius: 999px; border: 1px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--f-text); font-weight: 500; font-size: var(--t-md); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: transform 0.35s var(--ease), background-color 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn--primary { --btn-bg: var(--verde); --btn-fg: var(--crema); --btn-bd: var(--verde); }
.btn--primary:hover { --btn-bg: var(--verde-2); }
.btn--light { --btn-bg: var(--crema); --btn-fg: var(--verde); --btn-bd: var(--crema); }
.btn--light:hover { --btn-bg: #fff8ee; }
.btn--light:focus-visible { outline-color: var(--crema); }
.btn--ghost { --btn-bg: transparent; }
.btn--ghost:hover { --btn-bd: var(--fg); }
.btn--outline-light { --btn-fg: var(--crema); --btn-bd: rgba(239, 233, 223, 0.55); }
.btn--outline-light:hover { --btn-bd: var(--crema); }
.btn--outline-light:focus-visible { outline-color: var(--crema); }
.btn--sm { min-height: 44px; padding: 0 1.2em; font-size: var(--t-sm); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
@media (prefers-color-scheme: dark) {
  .btn--primary { --btn-bg: var(--crema); --btn-fg: var(--verde); --btn-bd: var(--crema); }
  .btn--primary:hover { --btn-bg: #fff8ee; }
}

.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; background: none; border-radius: 999px; }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.icon-btn:hover { background: var(--line); }

/* ---------- Cabecera ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: var(--safe-t);
  color: var(--fg);
  transition: background-color 0.4s, color 0.4s, box-shadow 0.4s;
}
.header__in { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.header--solid, .header.is-solid { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.header--over { color: var(--crema); }
.header--over.is-solid { color: var(--fg); }
.header--over:not(.is-solid) :focus-visible { outline-color: var(--crema); }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { width: 34px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.brand span { font-family: var(--f-display); font-variation-settings: "opsz" 24; font-weight: 450; font-size: 1.125rem; letter-spacing: 0.32em; margin-right: -0.32em; }

.nav { display: flex; align-items: center; gap: clamp(8px, 2.4vw, 32px); }
.nav a { text-decoration: none; font-size: var(--t-sm); padding: 10px 2px; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.cart-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid currentColor; background: none; font-size: var(--t-sm); }
.cart-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cart-count { min-width: 1.5em; font-variant-numeric: tabular-nums; text-align: center; }
@media (max-width: 560px) {
  .nav .nav__hide-sm { display: none; }
}

/* ---------- Ornamentos de grabado ---------- */
.engrave { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  background: var(--crema); color: var(--verde);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease);
}
.preloader.is-done { opacity: 0; transform: translateY(-3%); pointer-events: none; }
.preloader__in { display: grid; justify-items: center; gap: 22px; text-align: center; padding: 24px; }
.preloader__art { width: min(280px, 70vw); color: var(--cobre); }
.preloader__pct { font-family: var(--f-display); font-weight: 300; font-variation-settings: "opsz" 144, "SOFT" 60; font-size: clamp(3.5rem, 10vw, 6rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.preloader__bar { width: 180px; height: 1px; background: rgba(31, 43, 38, 0.18); overflow: hidden; }
.preloader__bar span { display: block; height: 100%; background: var(--verde); transform: scaleX(0); transform-origin: left; transition: transform 0.3s linear; }
.preloader__label { font-size: var(--t-sm); color: var(--gris); }

/* ---------- Escena con scroll ---------- */
.scene { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--tinta); color: var(--crema); }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(18, 18, 16, 0.55) 0%, rgba(18, 18, 16, 0) 18%),
    linear-gradient(to top, rgba(18, 18, 16, 0.86) 0%, rgba(18, 18, 16, 0.55) 26%, rgba(18, 18, 16, 0) 58%),
    linear-gradient(to right, rgba(18, 18, 16, 0.5) 0%, rgba(18, 18, 16, 0) 52%),
    radial-gradient(ellipse 85% 75% at 55% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.42) 100%);
}
.scene__grain {
  position: absolute; inset: 0; pointer-events: none;
  background: url("/img/grano.png") repeat;
  opacity: 0.07; mix-blend-mode: overlay;
}

.chapters { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(112px + var(--safe-b)); pointer-events: none; }
.chapter { position: absolute; left: 0; bottom: 0; width: min(100%, 40rem); opacity: 0; }
.chapter.is-active { pointer-events: auto; }
.chapter__title { font-size: var(--t-3xl); font-weight: 300; line-height: 0.98; letter-spacing: -0.025em; font-variation-settings: "opsz" 144, "SOFT" 70; }
.chapter__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.chapter__title .w > span { display: inline-block; will-change: transform; }
.chapter__text { margin-top: 18px; max-width: 30ch; font-size: var(--t-lg); line-height: 1.45; color: rgba(239, 233, 223, 0.92); }
.chapter__cta { margin-top: 32px; opacity: 0; transform: translateY(16px); }
.chapter__cta.is-on { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }

.progress { position: absolute; left: var(--gutter); right: calc(var(--gutter) + 72px); bottom: calc(40px + var(--safe-b)); height: 34px; }
.progress__track, .progress__fill { position: absolute; left: 0; right: 0; top: 0; height: 1px; }
.progress__track { background: rgba(239, 233, 223, 0.3); }
.progress__fill { background: var(--crema); transform: scaleX(0); transform-origin: left; }
.progress__ticks { position: absolute; inset: 0; }
.progress__tick { position: absolute; top: -4px; transform: translateX(-0.5px); font-size: var(--t-xs); color: rgba(239, 233, 223, 0.72); white-space: nowrap; transition: color 0.4s; }
.progress__tick::before { content: ""; display: block; width: 1px; height: 9px; background: currentColor; margin-bottom: 8px; transition: transform 0.4s var(--ease); transform-origin: top; }
.progress__tick.is-active { color: var(--crema); }
.progress__tick.is-active::before { background: var(--cobre-claro); transform: scaleY(1.8); }
.progress__tick span { display: inline-block; transform: translateX(-2px); }
@media (max-width: 767px) {
  .progress__tick span { display: none; }
  .chapters { bottom: calc(92px + var(--safe-b)); }
  .progress { bottom: calc(30px + var(--safe-b)); right: calc(var(--gutter) + 64px); }
  .scene__shade {
    background:
      linear-gradient(to bottom, rgba(18, 18, 16, 0.55) 0%, rgba(18, 18, 16, 0) 16%),
      linear-gradient(to top, rgba(18, 18, 16, 0.9) 0%, rgba(18, 18, 16, 0.6) 32%, rgba(18, 18, 16, 0) 62%),
      radial-gradient(ellipse 90% 70% at 50% 40%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.4) 100%);
  }
}

.scene :focus-visible { outline-color: var(--crema); }

/* Versión fija para prefers-reduced-motion y sin JavaScript */
.story-static { display: none; }
.story-static__item { display: grid; gap: clamp(20px, 3vw, 48px); align-items: end; padding-block: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); }
.story-static__item:first-child { border-top: 0; padding-top: calc(var(--header-h) + 40px); }
.story-static__item picture img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.story-static__item h2 { font-size: var(--t-2xl); font-weight: 300; }
.story-static__item p { margin-top: 12px; font-size: var(--t-lg); color: var(--muted); max-width: 32ch; }
.story-static__item .btn { margin-top: 28px; }
@media (min-width: 900px) {
  .story-static__item { grid-template-columns: 7fr 5fr; }
  .story-static__item:nth-child(even) picture { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-ok) .scene-wrap, html:not(.motion-ok) .preloader { display: none !important; }
  html:not(.motion-ok) .story-static { display: block; }
  html:not(.motion-ok) .header--over { color: var(--fg); background: color-mix(in srgb, var(--bg) 92%, transparent); box-shadow: 0 1px 0 var(--line); }
}

.no-scene .scene-wrap, .no-scene .preloader { display: none !important; }
.no-scene .story-static { display: block; }
.no-scene .header--over { color: var(--fg); background: color-mix(in srgb, var(--bg) 92%, transparent); box-shadow: 0 1px 0 var(--line); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Secciones de inicio ---------- */
.section { padding-block: clamp(88px, 12vw, 176px); }
.section__head { max-width: 34rem; }
.section__title { font-size: var(--t-2xl); }
.section__lead { margin-top: 20px; font-size: var(--t-lg); color: var(--muted); max-width: 36ch; }

.how { position: relative; overflow: hidden; }
.how__grid { display: grid; gap: clamp(48px, 7vw, 120px); }
.how__art { position: absolute; right: -6%; bottom: -24px; width: min(760px, 90vw); color: var(--cobre); opacity: 0.22; pointer-events: none; }
.facts { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.fact { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.fact svg { width: 48px; height: 48px; color: var(--accent); }
.fact h3 { font-size: var(--t-xl); font-weight: 360; }
.fact p { margin-top: 6px; color: var(--muted); max-width: 40ch; }
.fact__big { font-family: var(--f-display); font-variation-settings: "opsz" 144; font-weight: 300; }
@media (min-width: 900px) {
  .how__grid { grid-template-columns: 5fr 7fr; align-items: start; }
  .how .section__head { position: sticky; top: calc(var(--header-h) + 48px); }
  .facts { grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 0; }
  .fact { border-top: 1px solid var(--line-strong); border-bottom: 0; padding: 32px 0 40px; grid-template-columns: 1fr; }
}

.subscribe { background: var(--band); color: var(--band-fg); position: relative; overflow: hidden; }
.subscribe .wrap { display: grid; gap: 40px; align-items: center; }
.subscribe__title { font-size: var(--t-3xl); font-weight: 300; max-width: 13ch; }
.subscribe__text { margin-top: 24px; font-size: var(--t-lg); max-width: 34ch; color: rgba(239, 233, 223, 0.86); }
.subscribe__perks { margin-top: 28px; display: grid; gap: 10px; }
.subscribe__perks li { display: flex; gap: 12px; align-items: baseline; }
.subscribe__perks li::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--band-accent); transform: translateY(-4px); }
.subscribe .btn { margin-top: 36px; }
.subscribe__art { color: var(--band-accent); width: min(460px, 100%); justify-self: center; }
.subscribe :focus-visible { outline-color: var(--crema); }
@media (min-width: 900px) {
  .subscribe .wrap { grid-template-columns: 7fr 5fr; }
}

/* ---------- Pie ---------- */
.footer { background: var(--foot); color: var(--crema); padding: clamp(64px, 8vw, 112px) 0 calc(40px + var(--safe-b)); }
.footer :focus-visible { outline-color: var(--crema); }
.footer__top { display: grid; gap: 40px; }
.footer__brand p { margin-top: 16px; color: #b9b2a5; max-width: 30ch; }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.footer__cols h2 { font-family: var(--f-text); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0; color: #b9b2a5; margin-bottom: 12px; }
.footer__cols ul { list-style: none; display: grid; gap: 6px; }
.footer__cols a { text-decoration: none; display: inline-block; padding: 4px 0; }
.footer__cols a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.footer__demo { margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(239, 233, 223, 0.16); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-size: var(--t-sm); color: #b9b2a5; }
.footer__demo a { color: var(--cobre-claro); }
.footer__mark { margin-top: 56px; width: min(100%, 560px); color: var(--cobre); opacity: 0.6; }
@media (min-width: 900px) {
  .footer__top { grid-template-columns: 1.2fr 1fr; }
}

/* ---------- WhatsApp ---------- */
.wa {
  position: fixed; z-index: 60;
  right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + var(--safe-b));
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--verde); color: var(--crema);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(239, 233, 223, 0.18);
  transition: transform 0.35s var(--ease);
}
.wa:hover { transform: translateY(-2px) scale(1.04); }
.wa svg { width: 26px; height: 26px; fill: currentColor; }
.wa:focus-visible { outline: 2px solid var(--cobre-claro); outline-offset: 3px; }
html.has-drawer .wa { opacity: 0; pointer-events: none; }

/* ---------- Aviso de cookies ---------- */
.notice {
  position: fixed; z-index: 70; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + var(--safe-b));
  width: min(560px, calc(100% - 104px));
  display: grid; gap: 10px; padding: 12px 14px 12px 18px; align-items: center;
  background: var(--bg); color: var(--fg); border: 1px solid var(--line-strong); border-radius: 10px;
  font-size: var(--t-sm); line-height: 1.5;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.5);
  animation: notice-in 0.7s var(--ease) 1.2s both;
}
.notice .btn { justify-self: start; }
@media (min-width: 700px) { .notice { grid-template-columns: 1fr auto; gap: 18px; } }
.notice.is-gone { opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s; }
@keyframes notice-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Carrito lateral ---------- */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(18, 18, 16, 0.5); opacity: 0; transition: opacity 0.45s var(--ease); }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
  transform: translateX(100%); transition: transform 0.55s var(--ease);
  padding-top: var(--safe-t); padding-bottom: var(--safe-b);
}
.drawer__panel:focus { outline: none; }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--line); }
.drawer__title { font-size: var(--t-xl); font-weight: 360; }
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px; }
.drawer__empty { display: none; padding: 48px 0; }
.drawer__empty p { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 300; margin-bottom: 12px; }
.drawer.is-empty .drawer__empty { display: block; }
.drawer__foot { padding: 20px 24px 24px; border-top: 1px solid var(--line); display: grid; gap: 16px; background: var(--surface); }

.line { display: grid; grid-template-columns: 64px 1fr auto; grid-template-areas: "img info side" "img qty side"; gap: 6px 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.line picture { grid-area: img; background: var(--crema-2); border-radius: 8px; overflow: hidden; }
.line picture img { width: 64px; height: 64px; object-fit: contain; }
.line__info { grid-area: info; }
.line__name { font-weight: 500; }
.line__meta { font-size: var(--t-sm); color: var(--muted); line-height: 1.4; }
.line .qty { grid-area: qty; justify-self: start; }
.line__side { grid-area: side; display: grid; justify-items: end; align-content: space-between; }
.line__price { font-variant-numeric: tabular-nums; }
.line__remove { font-size: var(--t-sm); min-height: 32px; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; }
.qty__btn { width: 44px; height: 44px; border: 0; background: none; border-radius: 999px; font-size: 1.125rem; }
.qty__btn:hover:not([disabled]) { background: var(--line); }
.qty__btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.qty__val { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.qty--sm .qty__btn { width: 36px; height: 36px; }
.qty--sm { position: relative; }
.qty--sm .qty__btn::after { content: ""; position: absolute; inset: -4px 0; }

.coupon__label { font-size: var(--t-sm); font-weight: 500; }
.coupon__row { display: flex; gap: 8px; margin-top: 6px; }
.coupon input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); text-transform: uppercase; letter-spacing: 0.06em; }
.coupon input::placeholder { color: var(--muted); opacity: 0.8; }
.coupon__msg { font-size: var(--t-sm); margin-top: 6px; min-height: 1.4em; }
.coupon__msg[data-state="ok"] { color: var(--accent); }
.coupon__msg[data-state="error"] { color: #9b2f1f; }
@media (prefers-color-scheme: dark) { .coupon__msg[data-state="error"] { color: #f0a08f; } }

.sums { display: grid; gap: 6px; font-size: var(--t-sm); }
.sums > div { display: flex; justify-content: space-between; gap: 16px; }
.sums dt { color: var(--muted); }
.sums dd { font-variant-numeric: tabular-nums; }
.sums__total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--t-lg); }
.sums__total dt { color: var(--fg); }
.demo-note { font-size: var(--t-xs); color: var(--muted); text-align: center; }

/* ---------- Reveal ---------- */
.can-reveal [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.can-reveal [data-reveal].is-in { opacity: 1; transform: none; }
.can-reveal [data-reveal="2"] { transition-delay: 0.12s; }
.can-reveal [data-reveal="3"] { transition-delay: 0.24s; }

/* ---------- Página interior ---------- */
.page { padding-top: calc(var(--header-h) + var(--safe-t)); }
.page-in { animation: page-in 0.9s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Producto ---------- */
.pdp { display: grid; gap: clamp(32px, 5vw, 80px); padding-block: clamp(16px, 3vw, 40px) clamp(64px, 8vw, 120px); }
.stage { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 16px; }
.stage__box {
  position: relative; overflow: hidden; border-radius: 4px;
  background: var(--crema); color: var(--cobre);
  aspect-ratio: 1 / 1.02; display: grid; place-items: center;
  perspective: 1600px; perspective-origin: 50% 40%;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.stage__box.is-dragging { cursor: grabbing; }
.stage__box:focus-visible { outline: 2px solid var(--cobre-hondo); outline-offset: 4px; }
.stage__art { position: absolute; inset: auto 0 18% 0; width: 100%; opacity: 0.5; pointer-events: none; }
.stage__hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: var(--t-xs); color: var(--gris); transition: opacity 0.6s; pointer-events: none; }
.stage__box.is-touched .stage__hint { opacity: 0; }

/* Bolsa en 3D: dos caras (fotos) y fuelles laterales en cuña */
.bag-float { position: relative; width: var(--w, 300px); height: var(--h, 410px); transform-style: preserve-3d; animation: float 4s ease-in-out infinite; margin-top: -4%; }
.bag3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-18deg); will-change: transform; }
.bag3d__face { position: absolute; left: 0; top: 0; width: var(--w); height: var(--h); backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-origin: 50% 100%; }
.bag3d__face img { width: 100%; height: 100%; pointer-events: none; }
.bag3d__front { transform: translateZ(calc(var(--d) / 2)) rotateX(var(--a)); }
.bag3d__back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)) rotateX(var(--a)); }
.bag3d__side {
  width: var(--d); left: calc((var(--w) - var(--d)) / 2); transform-origin: 50% 50%;
  clip-path: polygon(50% 9%, 100% 98%, 0 98%);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.08) 30%, rgba(0, 0, 0, 0.12) 50%, rgba(255, 255, 255, 0.08) 70%, rgba(0, 0, 0, 0.3)),
    linear-gradient(#2a3a32 0%, #22312a 40%, #1a2620 100%);
}
.bag3d__right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.bag3d__left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.bag3d__shade, .bag3d__shine { position: absolute; inset: 0; pointer-events: none; }
.bag3d__shade { background: #0b120e; opacity: 0; }
.bag3d__front .bag3d__shade, .bag3d__front .bag3d__shine { -webkit-mask: url("/img/producto/cara-frente-480.webp") center / 100% 100% no-repeat; mask: url("/img/producto/cara-frente-480.webp") center / 100% 100% no-repeat; }
.bag3d__back .bag3d__shade { -webkit-mask: url("/img/producto/cara-reverso-480.webp") center / 100% 100% no-repeat; mask: url("/img/producto/cara-reverso-480.webp") center / 100% 100% no-repeat; }
.bag3d__shine { overflow: hidden; mix-blend-mode: screen; }
.bag3d__shine i { position: absolute; top: 0; bottom: 0; left: -100%; width: 300%; background: linear-gradient(100deg, transparent 40%, rgba(255, 246, 230, 0.2) 48%, rgba(255, 246, 230, 0.06) 54%, transparent 62%); }
.bag-shadow {
  position: absolute; left: 50%; bottom: 7%; width: 44%; height: 5%;
  margin-left: -22%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(26, 26, 24, 0.42), rgba(26, 26, 24, 0));
  animation: shadow 4s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shadow { 0%, 100% { transform: scaleX(1); opacity: 0.9; } 50% { transform: scaleX(0.84); opacity: 0.6; } }

.views { display: flex; gap: 8px; justify-content: center; }
.view-btn { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: none; font-size: var(--t-sm); transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.view-btn:hover { border-color: var(--fg); }
.view-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.buy { max-width: 560px; }
.buy__title { font-size: clamp(2.75rem, 1.6rem + 3.4vw, 4.75rem); font-weight: 300; }
.buy__sub { margin-top: 10px; font-size: var(--t-md); color: var(--muted); }
.rating { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: var(--t-sm); }
.stars { display: inline-flex; gap: 2px; color: var(--accent); }
.stars svg { width: 16px; height: 16px; fill: currentColor; }
.rating strong { font-weight: 600; }
.rating span { color: var(--muted); text-decoration: underline; text-underline-offset: 0.2em; }
.price { margin-top: 20px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.price__now { font-family: var(--f-display); font-weight: 340; font-size: var(--t-2xl); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.price__was { color: var(--muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.price__save { font-size: var(--t-sm); color: var(--accent); }
.price__note { font-size: var(--t-sm); color: var(--muted); flex-basis: 100%; }

.opts { margin-top: 22px; display: grid; gap: 22px; }
.opt { border: 0; padding: 0; margin: 0; min-width: 0; }
.opt legend, .opt__label { padding: 0; font-weight: 500; font-size: var(--t-sm); margin-bottom: 10px; }
.opt legend span { color: var(--muted); font-weight: 400; }
.choice-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.size { display: grid; gap: 2px; padding: 14px 14px 12px; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.size b { font-family: var(--f-display); font-weight: 400; font-size: var(--t-lg); font-variation-settings: "opsz" 48; }
.size small { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.choice-input:checked + .size { border-color: var(--fg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--fg); }
.choice-input:focus-visible + .size, .choice-input:focus-visible + .chip { outline: 2px solid var(--focus); outline-offset: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); cursor: pointer; font-size: var(--t-sm); transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.choice-input:checked + .chip { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.sub-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; }
.sub-toggle__text { display: grid; }
.sub-toggle__text b { font-weight: 500; }
.sub-toggle__text small { color: var(--muted); font-size: var(--t-sm); }
.switch { position: relative; flex: none; width: 48px; height: 28px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch__track { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background-color 0.3s; }
.switch__thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); transition: transform 0.35s var(--ease); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.switch input:checked ~ .switch__track { background: var(--cobre-hondo); }
.switch input:checked ~ .switch__thumb { transform: translateX(20px); }
.switch input:focus-visible ~ .switch__track { outline: 2px solid var(--focus); outline-offset: 3px; }

.buy__row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.buy__row .btn { flex: 1; min-width: 220px; min-height: 56px; }
.buy__ship { margin-top: 14px; font-size: var(--t-sm); color: var(--muted); }
.added { margin-top: 10px; font-size: var(--t-sm); color: var(--accent); min-height: 1.5em; }

.tabs { margin-top: 56px; }
.tabs__list { display: flex; gap: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tab { position: relative; padding: 14px 0; border: 0; background: none; font-size: var(--t-sm); color: var(--muted); white-space: nowrap; }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
.tab[aria-selected="true"] { color: var(--fg); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tabpanel { padding-top: 22px; }
.tabpanel:focus-visible { outline-offset: 6px; }
.tabpanel p + p, .tabpanel p + ul, .tabpanel ul + p { margin-top: 12px; }
.spec { display: grid; gap: 0; }
.spec > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--muted); }
.notes { display: flex; flex-wrap: wrap; gap: 10px; }
.notes li { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--t-sm); }
.recipe { display: grid; gap: 14px; counter-reset: paso; }
.recipe li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.recipe li::before { counter-increment: paso; content: counter(paso); font-family: var(--f-display); color: var(--accent); font-size: var(--t-lg); line-height: 1.3; }

@media (min-width: 960px) {
  .pdp { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: start; }
  .stage { position: sticky; top: calc(var(--header-h) + 20px); }
  .stage__box { aspect-ratio: auto; height: calc(100svh - var(--header-h) - 160px); min-height: 520px; }
  .buy { padding-top: 8px; }
  .pdp { padding-top: 24px; }
}
@media (max-width: 480px) {
  .sizes { gap: 8px; }
  .size { padding: 12px 10px 10px; }
}

.reviews { border-top: 1px solid var(--line); }
.reviews__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.reviews__score { display: flex; align-items: baseline; gap: 12px; }
.reviews__score b { font-family: var(--f-display); font-weight: 300; font-size: var(--t-3xl); line-height: 1; }
.reviews__score span { color: var(--muted); }
.review-list { margin-top: 48px; display: grid; gap: 40px; }
.review { display: grid; gap: 16px; align-content: start; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.review blockquote { margin: 0; font-family: var(--f-display); font-variation-settings: "opsz" 36; font-weight: 340; font-size: var(--t-lg); line-height: 1.45; }
.review figcaption { font-size: var(--t-sm); color: var(--muted); }
.review figcaption b { color: var(--fg); font-weight: 500; display: block; }
@media (min-width: 900px) { .review-list { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Checkout ---------- */
.co { display: grid; gap: clamp(32px, 5vw, 72px); padding-block: clamp(24px, 4vw, 56px) clamp(64px, 8vw, 120px); }
.co__title { font-size: var(--t-2xl); font-weight: 300; }
.demo-banner { margin-top: 20px; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--cobre); border-radius: 8px; background: color-mix(in srgb, var(--cobre) 10%, var(--bg)); }
.demo-banner svg { flex: none; width: 22px; height: 22px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.5; margin-top: 2px; }
.demo-banner strong { font-weight: 600; }
.demo-banner p { font-size: var(--t-sm); }
.form-block { border: 0; padding: 0; margin: 40px 0 0; min-width: 0; }
.form-block legend { padding: 0; font-family: var(--f-display); font-size: var(--t-xl); font-weight: 340; margin-bottom: 18px; }
.fields { display: grid; gap: 16px; }
.fields--2 { grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: var(--t-sm); font-weight: 500; }
.field label span { color: var(--muted); font-weight: 400; }
.field input, .field select {
  height: 50px; padding: 0 14px; width: 100%;
  border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus-visible, .field select:focus-visible { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 45%, transparent); }
.field input[aria-invalid="true"] { border-color: #9b2f1f; }
.field__err { font-size: var(--t-sm); color: #9b2f1f; min-height: 0; }
@media (prefers-color-scheme: dark) {
  .field input[aria-invalid="true"] { border-color: #f0a08f; }
  .field__err { color: #f0a08f; }
}
.field__hint { font-size: var(--t-xs); color: var(--muted); }
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.pay { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; font-weight: 500; }
.pay svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.choice-input:checked + .pay { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); background: var(--surface); }
.choice-input:focus-visible + .pay { outline: 2px solid var(--focus); outline-offset: 3px; }
.transfer-info { padding: 16px 18px; background: var(--surface); border-radius: 8px; font-size: var(--t-sm); }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.co__submit { margin-top: 36px; display: grid; gap: 12px; }
.form-error { color: #9b2f1f; font-size: var(--t-sm); }
@media (prefers-color-scheme: dark) { .form-error { color: #f0a08f; } }

.summary { background: var(--surface); border-radius: 6px; padding: 24px; display: grid; gap: 18px; align-self: start; }
.summary h2 { font-size: var(--t-xl); font-weight: 340; }
.summary .line { grid-template-columns: 56px 1fr auto; grid-template-areas: "img info side"; padding: 12px 0; }
.summary .line picture img { width: 56px; height: 56px; }
.summary__empty { color: var(--muted); }
@media (min-width: 960px) {
  .co { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .summary { position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (max-width: 480px) { .fields--2 { grid-template-columns: 1fr; } .fields--2.keep { grid-template-columns: 1fr 1fr; } }

/* ---------- Confirmación / páginas simples ---------- */
.confirm { padding-block: clamp(40px, 8vw, 120px); display: grid; gap: 48px; }
.confirm__art { width: 120px; color: var(--cobre); }
.confirm__title { font-size: var(--t-3xl); font-weight: 300; margin-top: 24px; }
.confirm__num { margin-top: 20px; font-size: var(--t-lg); }
.confirm__num b { font-family: var(--f-display); font-weight: 400; letter-spacing: 0.04em; }
.confirm__text { margin-top: 12px; color: var(--muted); max-width: 46ch; }
.confirm .btn { margin-top: 32px; }
@media (min-width: 960px) { .confirm { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }

.prose { max-width: 68ch; padding-block: clamp(40px, 6vw, 96px); }
.prose h1 { font-size: var(--t-2xl); font-weight: 300; }
.prose h2 { font-size: var(--t-xl); font-weight: 360; margin-top: 48px; }
.prose p, .prose ul { margin-top: 14px; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 6px; }
.prose .updated { color: var(--muted); font-size: var(--t-sm); margin-top: 12px; }

.notfound { min-height: 78svh; display: grid; align-content: center; gap: 20px; padding-block: 64px; }
.notfound__art { width: min(420px, 90%); color: var(--cobre); }
.notfound h1 { font-size: var(--t-3xl); font-weight: 300; max-width: 14ch; }
.notfound p { color: var(--muted); font-size: var(--t-lg); max-width: 36ch; }

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-ok) *, html:not(.motion-ok) *::before, html:not(.motion-ok) *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  html:not(.motion-ok) .scene__grain { display: none; }
}

/* Opción para ver la historia animada aunque el sistema pida menos movimiento */
.motion-note { display: none; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-ok) .motion-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: calc(var(--header-h) + var(--safe-t) + 24px); padding: 16px 20px; border: 1px solid var(--line-strong); border-radius: 10px; font-size: var(--t-sm); color: var(--muted); }
  html:not(.motion-ok) .story-static__item:first-of-type { padding-top: 40px; }
}

.reviews__note { margin-top: 40px; text-align: left; }
.confirm__demo { margin-top: 16px; text-align: left; }
.confirm .summary { gap: 14px; }