@font-face{font-family:"Clash Display";src:url("../fonts/clash-display-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../fonts/clash-display-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../fonts/clash-display-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-italic-300-500.woff2") format("woff2");font-weight:300 500;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-normal-400.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}

.obs-page {
  --obs-bg: #0F0D0C;
  --obs-choco: #2A1710;
  --obs-choco-2: #1C110C;
  --obs-red: #8E2B1E;
  --obs-gold: #C9933F;
  --obs-gold-2: #E0B266;
  --obs-cream: #F3EBDD;
  --obs-muted: #CDBFA9;
  --obs-line: rgba(243, 235, 221, 0.14);
  --obs-display: "Clash Display", "Arial Narrow", system-ui, sans-serif;
  --obs-serif: "Fraunces", Georgia, serif;
  --obs-mono: "JetBrains Mono", ui-monospace, monospace;
  --obs-cut: 10px;
  --obs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --obs-gutter: clamp(1rem, 4vw, 3.5rem);
}

.obs-page { position: relative; background: var(--obs-bg); color: var(--obs-cream); font-family: var(--obs-display); font-size: 16px; line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased; }
.obs-page *, .obs-page *::before, .obs-page *::after { box-sizing: border-box; }
.obs-drawer-root { background: transparent; overflow: visible; }
.obs-page :where(h1, h2, h3, h4, p, ul, ol, dl, dt, dd, figure, fieldset, legend) { margin: 0; padding: 0; }
.obs-page :where(h1, h2, h3, h4) { color: inherit; font-family: inherit; line-height: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; }
.obs-page :where(button, input, select) { font-family: inherit; }
.obs-page :where(button) { letter-spacing: normal; text-transform: none; box-shadow: none; }
.obs-page :where(ul, ol) { line-height: inherit; }
.obs-page :where(ul, ol) { list-style: none; }
.obs-page :where(fieldset) { border: 0; min-width: 0; }
.obs-page :where(a) { color: inherit; text-decoration: none; }
.obs-page img { display: block; max-width: 100%; height: auto; }
.obs-page [hidden] { display: none !important; }
.obs-page :focus-visible { outline: 2px solid var(--obs-gold); outline-offset: 3px; }
.obs-page svg { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- header ---------- */
.obs-header { position: fixed; z-index: 40; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 72px; padding: 0 var(--obs-gutter); pointer-events: none; transition: background 0.4s var(--obs-ease), backdrop-filter 0.4s; }
.obs-header > * { pointer-events: auto; }
html[data-obs-scrolled] .obs-header { background: rgba(15, 13, 12, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--obs-line); }
.obs-header__brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.95rem; }
.obs-header__brand img { width: 14px; height: 28px; object-fit: contain; }
.obs-header__nav { display: flex; gap: 2rem; font-family: var(--obs-mono); font-size: 0.78rem; color: var(--obs-muted); }
.obs-header__nav a { position: relative; padding: 0.4rem 0; transition: color 0.3s; }
.obs-header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--obs-gold); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--obs-ease); }
.obs-header__nav a:hover { color: var(--obs-cream); }
.obs-header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.obs-header__cart { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; height: 44px; padding: 0 1rem; border: 1px solid var(--obs-line); background: rgba(15, 13, 12, 0.5); color: var(--obs-cream); font: 500 0.85rem var(--obs-mono); cursor: pointer; clip-path: polygon(var(--obs-cut) 0, 100% 0, 100% calc(100% - var(--obs-cut)), calc(100% - var(--obs-cut)) 100%, 0 100%, 0 var(--obs-cut)); transition: border-color 0.3s, background 0.3s; }
.obs-header__cart:hover { border-color: var(--obs-gold); background: var(--obs-choco); }
.obs-header__count { min-width: 1.4em; text-align: center; color: var(--obs-gold); }
.obs-header__cart[data-bump="true"] { animation: obs-bump 0.65s var(--obs-ease); }
@keyframes obs-bump { 30% { transform: scale(1.12); } 60% { transform: scale(0.96); } }

/* ---------- CTAs (each its own garment) ---------- */
.obs-page a.obs-cta-hero, .obs-cta-hero { display: inline-flex; align-items: center; gap: 0.9rem; padding: 1.05rem 1.6rem; background: var(--obs-gold); color: var(--obs-bg); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); transition: background 0.35s, gap 0.35s var(--obs-ease); }
.obs-page a.obs-cta-hero:hover { background: var(--obs-gold-2); gap: 1.3rem; }
.obs-cta-hero:active { transform: scale(0.98); }
.obs-page a.obs-cta-trail { display: inline-flex; padding: 0.4rem 0; font-family: var(--obs-mono); font-size: 0.82rem; color: var(--obs-muted); border-bottom: 1px solid var(--obs-line); transition: color 0.3s, border-color 0.3s; }
.obs-page a.obs-cta-trail:hover { color: var(--obs-cream); border-color: var(--obs-gold); }
.obs-page a.obs-cta-chapter { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.2rem; border: 1px solid var(--obs-gold); color: var(--obs-gold); font-family: var(--obs-mono); font-size: 0.85rem; background: rgba(15, 13, 12, 0.55); transition: background 0.35s, color 0.35s; }
.obs-page a.obs-cta-chapter:hover { background: var(--obs-gold); color: var(--obs-bg); }
.obs-cta-add { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 58px; padding: 0 1.4rem; border: 0; cursor: pointer; background: linear-gradient(100deg, var(--obs-gold) 0%, var(--obs-gold-2) 50%, var(--obs-gold) 100%); background-size: 220% 100%; background-position: 100% 0; color: var(--obs-bg); font: 600 1rem var(--obs-display); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); transition: background-position 0.7s var(--obs-ease); }
.obs-cta-add:hover { background-position: 0 0; }
.obs-cta-add:active { transform: translateY(1px); }
.obs-cta-add__price { font-family: var(--obs-mono); font-weight: 500; font-size: 0.92rem; }
.obs-cta-checkout { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.7rem; height: 56px; border: 0; cursor: pointer; background: var(--obs-cream); color: var(--obs-bg); font: 600 1rem var(--obs-display); transition: background 0.3s; }
.obs-cta-checkout:hover:not(:disabled) { background: var(--obs-gold); }
.obs-cta-checkout:disabled { opacity: 0.4; cursor: not-allowed; }
.obs-cta-checkout__gem { color: var(--obs-red); }
.obs-page a.obs-cta-final { display: inline-flex; align-items: center; gap: 1rem; padding: 1.15rem 2rem; border: 1.5px solid var(--obs-cream); color: var(--obs-cream); font-weight: 600; font-size: 1.05rem; border-radius: 999px; transition: background 0.35s, color 0.35s; }
.obs-page a.obs-cta-final:hover { background: var(--obs-cream); color: var(--obs-red); }

/* ---------- hero ---------- */
.obs-hero { position: relative; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; padding: 7rem var(--obs-gutter) 2.5rem; overflow: hidden; isolation: isolate; }
.obs-hero__glow { position: absolute; z-index: -2; inset: auto -10% -30% 30%; height: 90%; background: radial-gradient(closest-side, rgba(142, 43, 30, 0.42), transparent 70%); filter: blur(10px); }
.obs-hero__visual { position: absolute; z-index: -1; top: 6%; right: -6%; width: min(64vw, 980px); will-change: transform; }
.obs-hero__visual img { width: 100%; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
.obs-hero__copy { position: relative; max-width: 100%; }
.obs-hero__word { display: flex; font-weight: 600; font-size: clamp(3.4rem, 13.4vw, 13.5rem); line-height: 0.86; letter-spacing: -0.035em; text-transform: uppercase; }
.obs-hero__mask { display: inline-block; overflow: hidden; padding-bottom: 0.04em; }
.obs-hero__mask > span { display: inline-block; will-change: transform; }
.obs-hero__line { margin-top: 1.4rem; max-width: 30ch; font-family: var(--obs-serif); font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 2.3vw, 2rem); line-height: 1.2; color: var(--obs-cream); }
.obs-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin-top: 2rem; }
.obs-hero__facts { display: flex; gap: clamp(1.5rem, 4vw, 4rem); margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--obs-line); font-family: var(--obs-mono); font-size: 0.78rem; }
.obs-hero__facts dt { color: var(--obs-gold); margin-bottom: 0.3rem; }
.obs-hero__facts dd { color: var(--obs-muted); }

/* ---------- película por scroll ---------- */
.obs-ss { position: relative; isolation: isolate; background: var(--obs-bg); }
.obs-ss__stage { position: sticky; top: 0; z-index: 0; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: var(--obs-bg); }
.obs-ss__media, .obs-ss__layer, .obs-ss__poster, .obs-ss__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.obs-ss__layer { opacity: 0; will-change: opacity; }
.obs-ss__layer:first-child { opacity: 1; }
.obs-ss__poster, .obs-ss__video { display: block; object-fit: cover; object-position: 50% 50%; max-width: none; }
.obs-ss__video { opacity: 0; }
.obs-ss__layer[data-painted="1"] .obs-ss__video { opacity: 1; }
.obs-ss__progress { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 2px; background: rgba(243, 235, 221, 0.14); pointer-events: none; }
.obs-ss__progress span { display: block; height: 100%; background: var(--obs-gold); transform: scaleX(0); transform-origin: left center; }
.obs-ss__route { position: absolute; z-index: 6; top: 84px; right: var(--obs-gutter); display: flex; gap: 0.25rem; }
.obs-page .obs-ss__route button { min-height: 2.5rem; padding: 0.55rem 0.8rem; border: 0; border-radius: 0; background: rgba(15, 13, 12, 0.45); color: var(--obs-muted); font: 500 0.72rem var(--obs-mono); cursor: pointer; transition: color 0.3s, background 0.3s; }
.obs-page .obs-ss__route button:hover, .obs-page .obs-ss__route button[aria-current="step"] { color: var(--obs-cream); }
.obs-page .obs-ss__route button[aria-current="step"] { text-decoration: underline; text-decoration-color: var(--obs-gold); text-decoration-thickness: 0.15em; text-underline-offset: 0.3em; }
.obs-ss__story { position: relative; z-index: 3; margin-top: -100vh; margin-top: -100dvh; pointer-events: none; }
.obs-ss__chapter { position: relative; }
.obs-ss__pin { position: sticky; top: 0; display: flex; align-items: center; min-height: 100vh; min-height: 100dvh; padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 6vw, 6rem); pointer-events: none; }
.obs-ss__chapter[data-align="right"] .obs-ss__pin { justify-content: flex-end; }
.obs-ss__copy { position: relative; width: min(40rem, 48vw); pointer-events: auto; }
.obs-ss__copy::before { content: ""; position: absolute; z-index: -1; inset: -3rem -5rem; background: radial-gradient(ellipse at center, rgba(15, 13, 12, 0.88) 0%, rgba(15, 13, 12, 0.58) 52%, transparent 76%); pointer-events: none; }
.obs-ss__kicker { margin: 0 0 1rem; font-family: var(--obs-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--obs-gold); }
.obs-ss__title { max-width: 13ch; font-family: var(--obs-display); font-weight: 600; font-size: clamp(2.75rem, 6vw, 6.75rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--obs-cream); text-wrap: balance; }
.obs-ss__body { max-width: 42ch; margin-top: 1.5rem; font-family: var(--obs-serif); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.4; color: var(--obs-cream); }
.obs-ss__tags { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.5rem; }
.obs-ss__tags li { padding: 0.45rem 0.7rem; border: 1px solid rgba(201, 147, 63, 0.45); font-family: var(--obs-mono); font-size: 0.82rem; color: var(--obs-muted); background: rgba(15, 13, 12, 0.5); }
.obs-ss__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.obs-ss__copy .obs-plate { margin-top: 2rem; }
.obs-plate { width: min(220px, 46vw); margin-top: 0.4rem; border: 1px solid var(--obs-line); padding: 6px; background: rgba(15, 13, 12, 0.6); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.obs-plate img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- marquee ---------- */
.obs-marquee { position: relative; padding: clamp(2.5rem, 6vw, 4.5rem) 0; background: var(--obs-choco); border-block: 1px solid rgba(201, 147, 63, 0.25); overflow: hidden; }
.obs-marquee__row { display: flex; overflow: hidden; }
.obs-marquee__row + .obs-marquee__row { margin-top: 0.6rem; opacity: 0.55; }
.obs-marquee__track { display: flex; flex: none; will-change: transform; }
.obs-marquee__list { display: flex; flex: none; }
.obs-marquee__list li { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem); padding-right: clamp(1.2rem, 3vw, 2.4rem); white-space: nowrap; font-family: var(--obs-serif); font-style: italic; font-weight: 300; font-size: clamp(2.2rem, 6vw, 5.4rem); line-height: 1.1; }
.obs-marquee__row + .obs-marquee__row .obs-marquee__list li { font-family: var(--obs-display); font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(1.4rem, 3.4vw, 3rem); color: var(--obs-gold); }
.obs-marquee__gem { color: var(--obs-gold); width: 0.42em !important; height: 0.42em !important; }

/* ---------- origin ---------- */
.obs-origin { padding: clamp(4rem, 10vw, 8rem) var(--obs-gutter); }
.obs-origin__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 8; min-height: 420px; clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px); }
.obs-origin__frame img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.obs-origin__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 13, 12, 0.82) 0%, rgba(15, 13, 12, 0.15) 55%, rgba(15, 13, 12, 0.55) 100%); }
.obs-origin__head { position: absolute; top: clamp(1.5rem, 4vw, 3.2rem); left: clamp(1.25rem, 4vw, 3.2rem); right: 1.25rem; max-width: 34rem; }
.obs-origin__head h2 { font-weight: 600; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 0.95; letter-spacing: -0.03em; }
.obs-origin__sub { margin-top: 1rem; max-width: 38ch; font-family: var(--obs-serif); font-style: italic; font-weight: 300; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--obs-cream); }
.obs-origin__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(2.5rem, 6vw, 5rem); }
.obs-origin__lead { font-size: clamp(1.4rem, 2.6vw, 2.3rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; max-width: 24ch; }
.obs-origin__data { font-family: var(--obs-mono); font-size: 0.86rem; }
.obs-origin__data div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.95rem 0; border-top: 1px solid var(--obs-line); }
.obs-origin__data div:last-child { border-bottom: 1px solid var(--obs-line); }
.obs-origin__data dt { color: var(--obs-gold); }
.obs-origin__data dd { color: var(--obs-cream); text-align: right; }

/* ---------- product ---------- */
.obs-product { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(4rem, 9vw, 8rem) var(--obs-gutter); background: linear-gradient(180deg, var(--obs-bg) 0%, var(--obs-choco-2) 40%, var(--obs-bg) 100%); }
.obs-product__stage { position: relative; display: grid; place-items: center; min-height: min(78vh, 760px); perspective: 1400px; }
.obs-product__halo { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 147, 63, 0.32), transparent 72%); transition: background 0.6s; }
.obs-product[data-intensity="85"] .obs-product__halo { background: radial-gradient(closest-side, rgba(142, 43, 30, 0.4), transparent 72%); }
.obs-product__float, .obs-product__tilt, .obs-product__spin { transform-style: preserve-3d; will-change: transform; }
.obs-bar { position: relative; width: clamp(150px, 19vw, 260px); transform-style: preserve-3d; }
.obs-bar__img { width: 100%; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, 0.55)); }
.obs-bar__label { position: absolute; left: 2%; right: 2%; top: 35.5%; height: 32%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--obs-choco); transform: translateZ(1px); }
.obs-bar__brand { font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; font-size: clamp(0.62rem, 0.95vw, 0.85rem); }
.obs-bar__pct { font-weight: 600; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1; letter-spacing: -0.04em; color: var(--obs-red); animation: obs-pct 0.6s var(--obs-ease); }
@keyframes obs-pct { from { transform: translateY(40%); opacity: 0; } }
.obs-bar__nick { font-family: var(--obs-serif); font-style: italic; font-size: clamp(0.8rem, 1.1vw, 1rem); }
.obs-bar__weight { margin-top: 0.35rem; font-family: var(--obs-mono); font-size: clamp(0.45rem, 0.6vw, 0.58rem); letter-spacing: 0.04em; opacity: 0.75; }
.obs-bar__sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(243, 235, 221, 0.18) 48%, transparent 60%); mix-blend-mode: screen; -webkit-mask: url("/assets/img/tableta-empaque.webp") center / 100% 100%; mask: url("/assets/img/tableta-empaque.webp") center / 100% 100%; }
.obs-product__shadow { position: absolute; bottom: 6%; width: 34%; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent); }
.obs-product__panel { max-width: 36rem; }
.obs-product__title { font-weight: 600; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 0.95; letter-spacing: -0.035em; }
.obs-product__title span { color: var(--obs-gold); }
.obs-product__tagline { margin-top: 0.9rem; font-family: var(--obs-serif); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--obs-muted); max-width: 34ch; }
.obs-gauge, .obs-packs { margin-top: 2rem; }
.obs-gauge legend, .obs-packs legend { margin-bottom: 0.75rem; font-family: var(--obs-mono); font-size: 0.78rem; color: var(--obs-gold); }
.obs-gauge__track { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--obs-line); }
.obs-gauge__opt { position: relative; display: grid; gap: 0.2rem; padding: 1rem 0.9rem; cursor: pointer; transition: background 0.35s; }
.obs-gauge__opt + .obs-gauge__opt { border-left: 1px solid var(--obs-line); }
.obs-gauge__opt input, .obs-pack input { position: absolute; opacity: 0; pointer-events: none; }
.obs-gauge__opt:has(input:focus-visible), .obs-pack:has(input:focus-visible) { outline: 2px solid var(--obs-gold); outline-offset: -2px; }
.obs-gauge__swatch { width: 100%; height: 6px; margin-bottom: 0.5rem; box-shadow: inset 0 0 0 1px rgba(243, 235, 221, 0.22); }
.obs-gauge__pct { font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em; }
.obs-gauge__nick { font-family: var(--obs-serif); font-style: italic; color: var(--obs-muted); font-size: 0.95rem; }
.obs-gauge__opt[data-active="true"] { background: rgba(201, 147, 63, 0.12); box-shadow: inset 0 -2px 0 var(--obs-gold); }
.obs-gauge__opt:hover { background: rgba(243, 235, 221, 0.05); }
.obs-notes { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.4rem; }
.obs-notes__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.obs-notes__list li { padding: 0.4rem 0.7rem; border: 1px solid rgba(201, 147, 63, 0.4); font-family: var(--obs-mono); font-size: 0.78rem; color: var(--obs-cream); }
.obs-notes__profile { display: grid; gap: 0.35rem; font-family: var(--obs-mono); font-size: 0.74rem; color: var(--obs-muted); }
.obs-notes__profile div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.obs-notes__profile dd { display: flex; gap: 3px; }
.obs-notes__profile i { width: 14px; height: 6px; background: var(--obs-line); transition: background 0.4s; }
.obs-notes__profile i[data-on="true"] { background: var(--obs-gold); }
.obs-packs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.obs-pack { position: relative; display: grid; gap: 0.15rem; padding: 0.95rem 0.9rem; border: 1px solid var(--obs-line); cursor: pointer; transition: border-color 0.3s, background 0.3s; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.obs-pack:hover { border-color: rgba(201, 147, 63, 0.6); }
.obs-pack[data-active="true"] { border-color: var(--obs-gold); background: rgba(201, 147, 63, 0.1); }
.obs-pack__label { font-weight: 600; font-size: 1.02rem; }
.obs-pack__detail { font-family: var(--obs-mono); font-size: 0.72rem; color: var(--obs-muted); }
.obs-pack__price { margin-top: 0.4rem; font-family: var(--obs-mono); font-size: 0.95rem; color: var(--obs-cream); }
.obs-pack__save { font-family: var(--obs-mono); font-size: 0.68rem; color: var(--obs-gold); }
.obs-buy { display: flex; gap: 0.75rem; margin-top: 1.6rem; }
.obs-buy__hint { margin-top: 0.8rem; font-family: var(--obs-serif); font-style: italic; color: var(--obs-muted); }
.obs-stepper { display: inline-flex; align-items: center; border: 1px solid var(--obs-line); }
.obs-stepper button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: transparent; color: var(--obs-cream); cursor: pointer; transition: color 0.3s, background 0.3s; }
.obs-stepper button:hover { color: var(--obs-gold); background: rgba(243, 235, 221, 0.05); }
.obs-stepper output { min-width: 2rem; text-align: center; font-family: var(--obs-mono); font-size: 0.9rem; }
.obs-stepper--lg button { width: 48px; height: 56px; }
.obs-ship { margin-top: 1.2rem; font-family: var(--obs-mono); font-size: 0.76rem; color: var(--obs-muted); }
.obs-ship strong { color: var(--obs-gold); font-weight: 500; }
.obs-ship__bar { display: block; height: 3px; margin-top: 0.55rem; background: var(--obs-line); overflow: hidden; }
.obs-ship__bar span { display: block; height: 100%; background: var(--obs-gold); transform-origin: left; transition: transform 0.7s var(--obs-ease); }

/* ---------- pairings ---------- */
.obs-pair { padding: clamp(4rem, 9vw, 8rem) var(--obs-gutter); }
.obs-pair__title { font-weight: 600; font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: 0.95; letter-spacing: -0.035em; max-width: 14ch; }
.obs-pair__title em { display: block; font-family: var(--obs-serif); font-weight: 300; color: var(--obs-gold); letter-spacing: -0.01em; padding-bottom: 0.08em; }
.obs-pair__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.obs-pair__item--0 { grid-row: span 2; }
.obs-pair__item--1, .obs-pair__item--2 { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 1.2rem; align-items: end; }
.obs-pair__img { overflow: hidden; }
.obs-pair__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transform: scale(1.12); will-change: transform; }
.obs-pair__item--0 .obs-pair__img img { aspect-ratio: 4 / 4.4; }
.obs-pair__item figcaption { display: grid; gap: 0.4rem; margin-top: 1rem; }
.obs-pair__label { font-family: var(--obs-mono); font-size: 0.78rem; color: var(--obs-gold); }
.obs-pair__line { font-family: var(--obs-serif); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.3; max-width: 30ch; }
.obs-ritual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--obs-line); }
.obs-ritual li { display: grid; gap: 0.5rem; padding: 1.6rem 1.6rem 0 0; }
.obs-ritual li + li { padding-left: 1.6rem; border-left: 1px solid var(--obs-line); }
.obs-ritual__n { font-family: var(--obs-mono); font-size: 0.75rem; color: var(--obs-gold); }
.obs-ritual__k { font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -0.02em; }
.obs-ritual__v { color: var(--obs-muted); line-height: 1.5; max-width: 32ch; font-size: 0.98rem; }

/* ---------- final ---------- */
.obs-final { position: relative; overflow: hidden; display: grid; justify-items: center; text-align: center; padding: clamp(5rem, 12vw, 10rem) var(--obs-gutter); background: var(--obs-red); isolation: isolate; }
.obs-final__bar { position: absolute; z-index: -1; width: min(80vw, 980px); left: 50%; top: 50%; translate: -50% -50%; opacity: 0.5; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); will-change: transform; }
.obs-final__title { font-weight: 700; font-size: clamp(3.2rem, 12vw, 11.5rem); line-height: 0.88; letter-spacing: -0.045em; color: var(--obs-cream); will-change: transform; }
.obs-final__line { margin-top: 1.4rem; font-family: var(--obs-serif); font-style: italic; font-weight: 300; font-size: clamp(1.2rem, 2.2vw, 1.8rem); color: var(--obs-cream); }
.obs-final .obs-cta-final { margin-top: 2.4rem; }

/* ---------- footer ---------- */
.obs-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; padding: 2.4rem var(--obs-gutter) 3rem; border-top: 1px solid var(--obs-line); font-family: var(--obs-mono); font-size: 0.76rem; color: var(--obs-muted); }
.obs-footer__brand { display: flex; align-items: center; gap: 0.7rem; font-family: var(--obs-display); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--obs-cream); font-size: 0.9rem; }
.obs-footer__brand img { width: 18px; height: 36px; object-fit: contain; }
.obs-footer__nav { display: flex; gap: 1.6rem; justify-content: center; }
.obs-footer__nav a:hover { color: var(--obs-gold); }

/* ---------- drawer ---------- */
.obs-drawer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.obs-drawer[data-open="true"] { pointer-events: auto; }
.obs-drawer__scrim { position: absolute; inset: 0; border: 0; background: rgba(8, 6, 5, 0.62); opacity: 0; transition: opacity 0.45s; cursor: pointer; }
.obs-drawer[data-open="true"] .obs-drawer__scrim { opacity: 1; }
.obs-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--obs-choco); color: var(--obs-cream); border-left: 1px solid rgba(201, 147, 63, 0.3); transform: translateX(102%); transition: transform 0.6s var(--obs-ease); font-family: var(--obs-display); }
.obs-drawer[data-open="true"] .obs-drawer__panel { transform: none; }
.obs-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.3rem 1.4rem; border-bottom: 1px solid var(--obs-line); }
.obs-drawer__title { font-weight: 600; font-size: 1.3rem; }
.obs-drawer__title span { font-family: var(--obs-mono); font-size: 0.85rem; color: var(--obs-gold); margin-left: 0.4rem; }
.obs-drawer__close { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--obs-line); background: transparent; color: var(--obs-cream); cursor: pointer; }
.obs-drawer__close:hover { border-color: var(--obs-gold); color: var(--obs-gold); }
.obs-drawer .obs-ship { margin: 0; padding: 1rem 1.4rem; border-bottom: 1px solid var(--obs-line); }
.obs-drawer__list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0.4rem 1.4rem; }
.obs-line { display: grid; grid-template-columns: 80px 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--obs-line); }
.obs-line__img { width: 80px; height: 80px; object-fit: cover; }
.obs-line__name { font-weight: 600; }
.obs-line__meta { margin-top: 0.2rem; font-family: var(--obs-mono); font-size: 0.74rem; color: var(--obs-muted); }
.obs-line__row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.7rem; }
.obs-line__price { font-family: var(--obs-mono); font-size: 0.9rem; }
.obs-line__remove { margin-top: 0.5rem; padding: 0; border: 0; background: none; color: var(--obs-muted); font-family: var(--obs-mono); font-size: 0.7rem; text-decoration: underline; cursor: pointer; }
.obs-line__remove:hover { color: var(--obs-gold-2); }
.obs-drawer__empty { flex: 1; display: grid; align-content: center; justify-items: center; gap: 0.6rem; padding: 2rem; text-align: center; color: var(--obs-muted); }
.obs-drawer__empty img { width: 44px; height: 88px; object-fit: contain; margin-bottom: 0.6rem; }
.obs-drawer__empty-title { font-weight: 600; font-size: 1.2rem; color: var(--obs-cream); }
.obs-drawer__empty .obs-cta-trail { margin-top: 0.8rem; color: var(--obs-cream); }
.obs-drawer__foot { padding: 1.2rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--obs-line); background: var(--obs-choco-2); }
.obs-drawer__totals { display: grid; gap: 0.45rem; margin-bottom: 1rem; font-family: var(--obs-mono); font-size: 0.86rem; }
.obs-drawer__totals div { display: flex; justify-content: space-between; }
.obs-drawer__totals dt { color: var(--obs-muted); }
.obs-drawer__note { margin-top: 0.8rem; font-family: var(--obs-mono); font-size: 0.7rem; line-height: 1.5; color: var(--obs-muted); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .obs-ss__poster, .obs-ss__video { object-position: var(--obs-pos-m, 50% 50%); }
  .obs-ss__route { top: 70px; left: 0.75rem; right: 0.75rem; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .obs-ss__route::-webkit-scrollbar { display: none; }
  .obs-page .obs-ss__route button { flex: 0 0 auto; }
  .obs-ss__pin, .obs-ss__chapter[data-align="right"] .obs-ss__pin { align-items: flex-end; justify-content: flex-start; padding: 6.5rem max(1.25rem, env(safe-area-inset-right)) calc(4rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); }
  .obs-ss__copy { width: min(100%, 36rem); }
  .obs-ss__copy::before { inset: -3rem -2rem; background: linear-gradient(to top, var(--obs-bg) 0%, rgba(15, 13, 12, 0.82) 58%, transparent 100%); }
  .obs-ss__title { max-width: 14ch; font-size: clamp(2.3rem, 11vw, 4.5rem); }
  .obs-ss__copy .obs-plate { margin-top: 1.2rem; }
  .obs-header { height: 64px; }
  .obs-header__nav { display: none; }
  .obs-hero { padding-top: 6rem; padding-bottom: 2rem; }
  .obs-hero__visual { top: 12%; right: -22%; width: 120vw; opacity: 0.9; }
  .obs-hero__word { font-size: clamp(2.6rem, 14.2vw, 5rem); }
  .obs-hero__facts { flex-wrap: wrap; gap: 1rem 1.6rem; margin-top: 2rem; }
  .obs-origin__frame { aspect-ratio: 4 / 5; min-height: 0; }
  .obs-origin__body { grid-template-columns: minmax(0, 1fr); }
  .obs-product { grid-template-columns: minmax(0, 1fr); padding-top: 3rem; }
  .obs-product__stage { min-height: 56vh; }
  .obs-bar { width: clamp(130px, 38vw, 200px); }
  .obs-bar__pct { font-size: clamp(1.7rem, 9vw, 2.6rem); }
  .obs-bar__brand { font-size: 0.6rem; }
  .obs-bar__nick { font-size: 0.8rem; }
  .obs-bar__weight { font-size: 0.45rem; }
  .obs-gauge__opt { padding: 0.85rem 0.6rem; }
  .obs-gauge__pct { font-size: 1.15rem; }
  .obs-packs__grid { gap: 0.4rem; }
  .obs-pack { padding: 0.8rem 0.6rem; }
  .obs-pack__label { font-size: 0.92rem; }
  .obs-buy { flex-direction: column; }
  .obs-stepper--lg { align-self: flex-start; }
  .obs-cta-add { min-height: 56px; }
  .obs-pair__grid { grid-template-columns: minmax(0, 1fr); }
  .obs-pair__item--0 { grid-row: auto; }
  .obs-pair__item--1, .obs-pair__item--2 { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  .obs-ritual { grid-template-columns: minmax(0, 1fr); }
  .obs-ritual li, .obs-ritual li + li { padding: 1.3rem 0; border-left: 0; border-bottom: 1px solid var(--obs-line); }
  .obs-footer { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 1.2rem; }
  .obs-footer__nav { justify-content: flex-start; flex-wrap: wrap; }
  .obs-plate { width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .obs-ss__chapter { min-height: 100dvh !important; }
  .obs-page *, .obs-drawer * { animation: none !important; transition-duration: 0.01ms !important; }
}

/* ---------- WordPress / Divi ---------- */
.obs-block { display: block; width: 100%; max-width: none !important; margin: 0 !important; padding: 0; }
.et_pb_code_inner > p:empty, .et_pb_code_inner > br, .obs-block + p:empty, .obs-block + br { display: none; }
.et_pb_code_inner > p:has(> .obs-block) { margin: 0; padding: 0; }
body.obs-active #page-container, body.obs-active #et-main-area, body.obs-active #main-content,
body.obs-active .et-l, body.obs-active .et_builder_inner_content, body.obs-active .et_pb_section,
body.obs-active .et_pb_row, body.obs-active .et_pb_column, body.obs-active .et_pb_module,
body.obs-active .et_pb_code_inner,
.et_pb_section:has(.obs-ss), .et_pb_row:has(.obs-ss), .et_pb_column:has(.obs-ss), .et_pb_module:has(.obs-ss) { overflow: visible !important; }
body.obs-active { overflow-x: clip; }
body.admin-bar .obs-header, body.admin-bar .obs-drawer__panel { top: 32px; }
@media (max-width: 782px) { body.admin-bar .obs-header, body.admin-bar .obs-drawer__panel { top: 46px; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html[data-obs-cart-open] { overflow: hidden; }