/* ════════════════════════════════════════════════════════════════
   DULKITTA — design system
   Manual de marca v1.0 · Agosto 2026
   Crema manda (60%) · Cacao texto · Caramelo apetito · Dorado filete
   Besley (marca/títulos) · Jost (descriptores/badges/UI)
   ════════════════════════════════════════════════════════════════ */

/* ─── Fonts ─── */
@font-face { font-family: 'Besley'; src: url('../fonts/besley-v22-latin-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Besley'; src: url('../fonts/besley-v22-latin-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Besley'; src: url('../fonts/besley-v22-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Besley'; src: url('../fonts/besley-v22-latin-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-v20-latin-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-v20-latin-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

/* ─── Tokens ─── */
:root {
  --crema: #F4EADB;
  --crema-warm: #EFE3CD;
  --line: #E2D5BE;
  --caramelo: #B3712E;
  --dorado: #D9AE63;
  --cacao: #35210F;
  --cacao-soft: #4A3A28;
  --verde: #1D423A;
  --rojo: #B33A2B;
  --coffee: #6B4423;
  --muted: #6E5D47;              /* texto secundario sobre crema — AA 5.3:1 */
  --caramelo-text: #8F5A24;      /* caramelo oscurecido para TEXTO sobre crema — AA 4.8:1 */
  --dark-muted: #A5906E;         /* texto terciario sobre cacao — AA 4.9:1 */
  --serif: 'Besley', Georgia, serif;
  --sans: 'Jost', 'Century Gothic', Verdana, sans-serif;
  --flavor-bg: #F4EADB;
}

/* ─── Reset & base ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto !important; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-family: var(--serif);
  font-weight: 400;
  background: var(--crema);
  color: var(--cacao);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--dorado); color: var(--cacao); }

/* Hidden pre-animation states: ONLY when JS is on AND motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero__eyebrow, html.js .hero__descriptor, html.js .hero__lead,
  html.js .hero__pron, html.js .hero__cue { opacity: 0; }
  html.js .hero__title span, html.js .hero__title sup { opacity: 0; transform: translateY(0.55em); display: inline-block; }
  html.js .hero__jar { opacity: 0; }
  html.js .reveal { opacity: 0; transform: translateY(36px); }
  /* dimming driven by JS scroll progress — only when JS will actually light them */
  html.js .step { opacity: 0.28; }
  html.js .uses li { opacity: 0.3; }
}

/* skip link + focus */
.skip {
  position: fixed; top: -100px; left: 1rem; z-index: 3000;
  background: var(--cacao); color: var(--crema);
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.1em;
  padding: 0.7em 1.4em; border-radius: 0 0 8px 8px;
  transition: top 0.2s;
}
.skip:focus { top: 0; }
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--caramelo); outline-offset: 3px; border-radius: 4px;
}

/* ─── Grain overlay ─── */
.grain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.045;
  mix-blend-mode: overlay;
}

/* ─── Scroll progress ─── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200;
  background: transparent;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--caramelo), var(--dorado));
  transform: scaleX(0); transform-origin: left center;
}

/* ─── Typography helpers ─── */
.eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--caramelo-text);
  display: flex; align-items: center; gap: 0.6em;
}
.eyebrow--gold { color: var(--dorado); }
h1, h2, h3 { font-weight: 500; line-height: 1.15; }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.flag { width: 18px; height: 12px; flex: none; border-radius: 1px; box-shadow: 0 0 0 1px rgba(53,33,15,0.12); }

/* ─── Buttons ─── */
.btn {
  display: inline-block; font-family: var(--sans); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 1.05em 2.4em; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s, background 0.35s, color 0.35s;
  cursor: pointer;
}
.btn--gold { background: var(--dorado); color: var(--cacao); }
.btn--gold:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(217,174,99,0.55); }
.btn--outline { border-color: var(--crema); color: var(--crema); }
.btn--outline:hover { background: var(--crema); color: var(--cacao); transform: translateY(-3px); }
.btn--small { padding: 0.7em 1.7em; font-size: 0.68rem; background: var(--cacao); color: var(--crema); }
.btn--small:hover { background: var(--caramelo); }

/* ─── Nav ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  transition: background 0.45s, box-shadow 0.45s, padding 0.45s;
}
.nav--solid {
  background: rgba(244,234,219,0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.nav__logo { display: flex; flex-direction: column; line-height: 1.1; }
.nav__wordmark { font-family: var(--serif); font-weight: 700; font-size: 1.18rem; letter-spacing: 0.05em; }
.nav__wordmark sup { font-size: 0.5em; font-weight: 400; }
.nav__descriptor { font-family: var(--sans); font-weight: 400; font-size: 0.52rem; letter-spacing: 0.44em; text-transform: uppercase; color: var(--caramelo-text); }
.nav__links { display: flex; gap: clamp(1rem, 3vw, 2.4rem); }
.nav__links a {
  font-family: var(--sans); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase; position: relative; padding: 0.3em 0;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: var(--caramelo); transform: scaleX(0); transform-origin: right center;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left center; }

/* ════════════════ HERO ════════════════ */
.hero { position: relative; }
.hero__pin {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  overflow: hidden;
  padding-top: clamp(4.6rem, 9vh, 7rem);
  padding-top: clamp(4.6rem, 9svh, 7rem);
}
.hero__drizzle { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.9; }
.hero__copy { position: relative; z-index: 3; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.hero__eyebrow { justify-content: center; }
.hero__title {
  font-weight: 700; font-size: clamp(3.4rem, 13.5vw, 11.5rem);
  letter-spacing: 0.05em; line-height: 0.95; white-space: nowrap;
  margin-top: 0.6rem;
}
.hero__title sup { font-size: 0.16em; font-weight: 400; vertical-align: 2.2em; letter-spacing: 0; }
.hero__descriptor {
  font-family: var(--sans); font-weight: 400; font-size: clamp(0.66rem, 1.4vw, 0.86rem);
  letter-spacing: 0.44em; text-transform: uppercase; color: var(--cacao-soft);
  margin-top: 0.6rem;
}
.hero__descriptor i { font-style: normal; color: var(--dorado); }
.hero__lead { font-size: clamp(0.95rem, 1.6vw, 1.12rem); color: var(--muted); margin-top: 0.8rem; line-height: 1.6; }
.hero__pron { font-family: var(--sans); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--caramelo-text); margin-top: 0.7rem; text-transform: uppercase; }
.hero__pron b { font-weight: 500; border-bottom: 1.5px solid var(--dorado); }
.hero__jar {
  position: relative; z-index: 4; width: clamp(230px, 26vw, 330px);
  margin-top: clamp(-2.4rem, -3vw, -1rem);
  filter: drop-shadow(0 30px 40px rgba(53,33,15,0.18));
}
.hero__cue {
  position: absolute; z-index: 5; bottom: clamp(1rem, 3.5svh, 2.2rem); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  font-family: var(--sans); font-weight: 500; font-size: 0.62rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--caramelo-text);
  background: rgba(244,234,219,0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 0.55em 1.4em 0.4em; border-radius: 999px;
}
.hero__cue svg { animation: cueDrop 1.8s ease-in-out infinite; }
@keyframes cueDrop { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(7px); opacity: 0.5; } }

/* jar SVG label text */
.jl-tagline { font-family: var(--sans); font-weight: 500; font-size: 8px; letter-spacing: 1.7px; fill: var(--caramelo); text-anchor: middle; }
.jl-wordmark { font-family: var(--serif); font-weight: 700; font-size: 31px; letter-spacing: 1.6px; fill: var(--cacao); text-anchor: middle; }
.jl-origin { font-family: var(--sans); font-weight: 500; font-size: 7px; letter-spacing: 1.8px; fill: #3A2410; opacity: 0.75; text-anchor: middle; }
.jl-reg { font-family: var(--serif); font-weight: 400; font-size: 11px; fill: var(--cacao); }
.jl-category { font-family: var(--sans); font-weight: 400; font-size: 12.5px; letter-spacing: 5.5px; fill: var(--cacao); text-anchor: middle; }
.jl-identity { font-family: var(--serif); font-weight: 400; font-size: 11px; fill: var(--muted); text-anchor: middle; }
.jl-claim { font-family: var(--sans); font-weight: 500; font-size: 8.5px; letter-spacing: 2.4px; fill: var(--caramelo); text-anchor: middle; }
.jl-band { font-family: var(--sans); font-weight: 500; font-size: 11.5px; letter-spacing: 3.6px; fill: var(--crema); text-anchor: middle; }
.jl-netwt { font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: 1.6px; fill: #3A2410; opacity: 0.8; text-anchor: middle; }
.jl-monogram { font-family: var(--serif); font-weight: 700; font-size: 17px; fill: var(--caramelo); text-anchor: middle; }

/* swirl overlay (dive into the jar) */
.hero__swirl {
  position: absolute; inset: 0; z-index: 6;
  opacity: 0; visibility: hidden;
  display: grid; place-items: center;
}
.hero__swirl svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__beats { position: relative; z-index: 2; text-align: center; height: 6rem; display: grid; place-items: center; }
.beat {
  grid-area: 1 / 1;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.6rem, 7.5vw, 5.6rem); color: #FBF3E4;
  opacity: 0; text-shadow: 0 4px 40px rgba(53,33,15,0.35);
}
.beat--final { font-size: clamp(1.5rem, 3.6vw, 2.6rem); font-weight: 500; font-style: italic; }

/* ════════════════ COOK ════════════════ */
.cook { position: relative; background: var(--crema); }
.cook__pin {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; overflow: hidden;
  padding: clamp(4.5rem, 8vh, 6rem) clamp(1.2rem, 5vw, 4.5rem) 2rem;
  padding: clamp(4.5rem, 8svh, 6rem) clamp(1.2rem, 5vw, 4.5rem) 2rem;
}
.cook__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem); align-items: center; width: 100%; max-width: 1240px; margin: 0 auto;
}
.cook__visual { position: relative; }
.kettle-svg { width: 100%; max-width: 500px; margin: 0 auto; }
.cook__hours {
  position: absolute; top: 4%; left: 2%;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.cook__hours .cook__slow { font-family: var(--serif); font-weight: 700; font-style: italic; font-size: clamp(1.5rem, 2.8vw, 2.3rem); color: var(--caramelo); text-align: center; line-height: 1.05; }
.cook__hours em { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 0.7em; }
.cook__title { margin: 0.9rem 0 2rem; }
.steps { display: flex; flex-direction: column; gap: 1.15rem; }
.step {
  display: flex; gap: 1.1rem; align-items: flex-start;
  transition: opacity 0.4s;
  border-left: 2px solid var(--line); padding-left: 1.2rem;
}
.step.is-active { opacity: 1; border-left-color: var(--dorado); }
.step__num { font-family: var(--sans); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.18em; color: var(--caramelo-text); padding-top: 0.45em; }
.step h3 { font-size: 1.12rem; font-weight: 700; }
.step p { font-size: 0.92rem; color: var(--muted); line-height: 1.6; margin-top: 0.25em; }
.step strong { color: var(--cacao); }

/* ════════════════ SPREAD (toast) ════════════════ */
.spread { position: relative; background: var(--crema); }
.spread__pin {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; text-align: center;
  padding: clamp(4.5rem, 9vh, 6.5rem) 1.2rem 2.5rem;
  padding: clamp(4.5rem, 9svh, 6.5rem) 1.2rem 2.5rem;
}
.spread__head .eyebrow { justify-content: center; }
.spread__title { margin-top: 0.9rem; }
.spread__sub { color: var(--muted); font-style: italic; margin-top: 0.7rem; font-size: 1rem; }
.spread__stage { width: min(760px, 92vw); margin: 1rem auto 0; }
.toast-svg { width: 100%; }
.uses {
  display: flex; gap: clamp(0.7rem, 2.4vw, 1.6rem); align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 500; font-size: clamp(0.72rem, 1.6vw, 0.95rem);
  letter-spacing: 0.28em; text-transform: uppercase; flex-wrap: wrap;
}
.uses li { transition: opacity 0.4s, color 0.4s; }
.uses li.is-lit { opacity: 1; color: var(--caramelo-text); }
.uses .dot { color: var(--dorado); opacity: 1; font-size: 1.2em; }

/* ════════════════ WAYS TO EAT IT ════════════════ */
.ways { background: var(--crema); border-top: 1px solid var(--line); }
.ways__inner { max-width: 1100px; margin: 0 auto; text-align: center; padding: clamp(4rem, 9vw, 7rem) clamp(1.4rem, 4vw, 3rem); }
.ways__inner .eyebrow { justify-content: center; }
.ways__inner h2 { margin-top: 0.8rem; }
.ways__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(0.8rem, 2vw, 1.4rem); margin-top: 2.6rem; }
.ways__card {
  position: relative; border-radius: 16px; overflow: hidden;
  aspect-ratio: 3 / 4; display: block;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s;
}
.ways__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.ways__card:hover { transform: translateY(-5px); box-shadow: 0 24px 46px -18px rgba(53,33,15,0.3); }
.ways__card:hover img { transform: scale(1.05); }
.ways__card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(53,33,15,0.55), transparent 45%);
}
.ways__label {
  position: absolute; z-index: 1; left: 1rem; right: 1rem; bottom: 0.9rem;
  font-family: var(--serif); font-weight: 700; font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  color: #FBF3E4; text-align: left; line-height: 1.25;
  text-shadow: 0 1px 10px rgba(53,33,15,0.5);
}
.ways__cta { margin-top: 2.4rem; }

/* ════════════════ VERSUS ════════════════ */
.versus { background: var(--cacao); color: var(--crema); position: relative; }
.versus__inner {
  max-width: 880px; margin: 0 auto; text-align: center;
  padding: clamp(5rem, 12vw, 9rem) 1.4rem;
}
.versus__inner .eyebrow { justify-content: center; }
.versus__title { font-size: clamp(3rem, 8.5vw, 6.4rem); font-weight: 700; line-height: 1.02; margin-top: 1.4rem; }
.versus__better { color: var(--dorado); font-style: italic; }
.versus__lead { color: #C9B99C; max-width: 620px; margin: 1.8rem auto 0; font-size: 1.02rem; }
.versus__pron { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dorado); margin-top: 1.1rem; }
.versus__pron em { font-style: normal; border-bottom: 1px solid rgba(217,174,99,0.5); }
.versus__cols {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1.2rem, 4vw, 3rem);
  margin-top: 3.4rem; text-align: left; align-items: stretch;
}
.versus__col h3 {
  font-family: var(--sans); font-weight: 500; font-size: 0.78rem;
  letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.versus__col--them { text-align: right; }
.versus__col--them h3 { color: var(--dark-muted); }
.versus__col--them li { color: var(--dark-muted); font-size: 0.98rem; padding: 0.4em 0; }
.versus__col--us h3 { color: var(--dorado); }
.versus__col--us li { color: var(--crema); font-size: 0.98rem; padding: 0.4em 0; font-weight: 500; }
.versus__divider { width: 1px; background: linear-gradient(to bottom, transparent, var(--dorado), transparent); }

/* ════════════════ MARQUEE ════════════════ */
.marquee {
  background: var(--cacao); color: var(--dorado);
  overflow: hidden; padding: 1.1rem 0 1.4rem;
  border-top: 1px solid rgba(217,174,99,0.25);
  white-space: nowrap;
}
.marquee__track { display: inline-flex; animation: marquee 36s linear infinite; }
.marquee__track span {
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem); padding-right: 0.5em;
}
.marquee__track i { font-style: normal; color: var(--caramelo); padding: 0 0.35em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ════════════════ FLAVORS — carrusel nativo ════════════════ */
.flavors { position: relative; background: var(--crema); }
.flavors__pin { padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.flavors__noscript { color: var(--muted); font-family: var(--sans); letter-spacing: 0.1em; margin-top: 0.8rem; }
.flavors__note { color: var(--muted); margin-top: 0.9rem; font-size: 0.98rem; }
.flavors__head { text-align: center; margin-bottom: clamp(1rem, 3vw, 2.2rem); padding: 0 1.2rem; }
.flavors__head .eyebrow { justify-content: center; }
.flavors__head h2 { margin-top: 0.7rem; }
.flavors__head h2 em { color: var(--caramelo-text); }
.flavors__track {
  display: flex; gap: clamp(1rem, 2.2vw, 1.8rem);
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 1.5rem clamp(1.2rem, 5vw, 4rem) 2rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--dorado) transparent;
}
.flavors__track::-webkit-scrollbar { height: 6px; }
.flavors__track::-webkit-scrollbar-thumb { background: var(--dorado); border-radius: 3px; }
.flavors__track::-webkit-scrollbar-track { background: var(--line); border-radius: 3px; }
.flavor {
  width: clamp(210px, 17.5vw, 260px); flex: none;
  scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 1.1rem; padding: 1.4rem 0.8rem;
}
.flavor__jar { width: clamp(150px, 12vw, 185px); flex: none; filter: drop-shadow(0 20px 28px rgba(53,33,15,0.15)); }
.flavor__meta { max-width: 260px; }
.flavor__chip {
  display: inline-block; font-family: var(--sans); font-weight: 500; font-size: 0.6rem;
  letter-spacing: 0.26em; text-transform: uppercase;
  padding: 0.5em 1.2em; border-radius: 999px; border: 1px solid currentColor;
  color: var(--caramelo-text); margin-bottom: 1rem;
}
.flavor__chip--launch { background: var(--caramelo-text); color: var(--crema); border-color: var(--caramelo-text); }
.flavor__name { font-size: clamp(1.5rem, 2vw, 1.9rem); font-weight: 700; line-height: 1.05; }
.flavor__desc { color: var(--muted); margin-top: 0.6rem; font-size: 0.86rem; line-height: 1.6; }

/* ════════════════ LEARN ════════════════ */
.learn { background: var(--crema); border-top: 1px solid var(--line); }
.learn__inner { max-width: 980px; margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) clamp(1.4rem, 4vw, 3rem); text-align: center; }
.learn__inner .eyebrow { justify-content: center; }
.learn__inner h2 { margin-top: 0.8rem; }
.learn__lead { color: var(--muted); margin-top: 0.9rem; }
.learn__cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); margin-top: 2.6rem; text-align: left; }
.learn__card {
  display: flex; flex-direction: column; gap: 0.7rem;
  background: #FDFAF3; border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s, border-color 0.35s;
}
.learn__card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -18px rgba(53,33,15,0.22); border-color: var(--dorado); }
.learn__card h3 { font-size: 1.35rem; font-weight: 700; }
.learn__card p { color: var(--muted); font-size: 0.95rem; line-height: 1.65; }
.learn__cta {
  font-family: var(--sans); font-weight: 500; font-size: 0.68rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--caramelo-text);
  margin-top: auto; padding-top: 0.6rem;
}
.learn__cta::after { content: ' →'; }

/* ════════════════ ORIGIN ════════════════ */
.origin { background: var(--verde); color: var(--crema); position: relative; overflow: hidden; }
.origin__inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
  padding: clamp(5rem, 12vw, 9rem) clamp(1.4rem, 4vw, 3rem);
}
.origin__seal-wrap { position: relative; display: grid; place-items: center; padding-bottom: 3.5rem; }
.origin__photo { border-radius: 16px; box-shadow: 0 26px 50px -20px rgba(0,0,0,0.5); width: 100%; max-width: 460px; }
.seal-svg {
  width: clamp(130px, 12vw, 170px);
  position: absolute; right: clamp(0.4rem, 2vw, 1.6rem); bottom: 0;
  background: var(--verde); border-radius: 50%;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.5);
}
.seal-arc { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: 4.5px; fill: var(--dorado); text-anchor: middle; }
.seal-d { font-family: var(--serif); font-weight: 700; font-size: 74px; fill: var(--dorado); text-anchor: middle; }
.origin__copy h2 { margin-top: 1.2rem; color: #FBF3E4; }
.origin__copy > p { color: #C7D2C4; margin-top: 1.4rem; max-width: 560px; font-size: 1.02rem; }
.origin__copy strong { color: var(--dorado); font-weight: 700; }
.origin__pride { font-style: italic; color: var(--dorado) !important; }
.origin__facts { display: flex; gap: clamp(1.4rem, 4vw, 3rem); margin-top: 2.6rem; flex-wrap: wrap; }
.origin__facts li { display: flex; flex-direction: column; border-top: 2px solid rgba(217,174,99,0.4); padding-top: 0.8rem; min-width: 120px; }
.origin__facts strong { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; color: #FBF3E4; }
.origin__facts span { font-family: var(--sans); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #9DB29A; margin-top: 0.3em; }

/* ════════════════ PRODUCT ════════════════ */
.product { background: var(--crema); }
.product__inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5.5rem); align-items: center;
  padding: clamp(5rem, 12vw, 8.5rem) clamp(1.4rem, 4vw, 3rem);
}
.product__jar { width: clamp(260px, 32vw, 420px); margin: 0 auto; }
.product__jar img { border-radius: 18px; box-shadow: 0 30px 55px -22px rgba(53,33,15,0.35); }
.product__info h2 { margin-top: 1rem; }
.product__lead { color: var(--muted); margin-top: 1.2rem; max-width: 520px; }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.1rem 2rem; margin-top: 2.2rem; max-width: 480px; }
.specs li { border-top: 2px solid var(--line); padding-top: 0.75rem; display: flex; flex-direction: column; }
.specs strong { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; }
.specs span { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-top: 0.25em; }
.product__ingredients { font-size: 0.85rem; color: var(--muted); margin-top: 1.8rem; max-width: 520px; line-height: 1.65; }
.product__ingredients strong { color: var(--cacao); }
.badges { display: flex; gap: clamp(1rem, 3vw, 2rem); margin-top: 2rem; flex-wrap: wrap; }
.badges li { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: var(--caramelo); }
.badges svg { width: 46px; height: 46px; }
.badges span { font-family: var(--sans); font-weight: 500; font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; line-height: 1.5; color: var(--muted); }

/* ════════════════ CTA ════════════════ */
.cta { background: var(--cacao); color: var(--crema); position: relative; }
.cta__drip { width: 100%; height: clamp(50px, 8vw, 110px); display: block; }
.cta__inner { max-width: 760px; margin: 0 auto; text-align: center; padding: clamp(3rem, 8vw, 6rem) 1.4rem clamp(5rem, 10vw, 8rem); }
.cta__inner .eyebrow { justify-content: center; }
.cta__inner h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 700; margin-top: 1.3rem; color: #FBF3E4; }
.cta__lead { color: #C9B99C; margin-top: 1.2rem; font-size: 1.05rem; }
.cta__actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2.6rem; flex-wrap: wrap; }
.cta__note { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark-muted); margin-top: 2.4rem; }
.cta__note a { color: var(--dorado); border-bottom: 1px solid rgba(217,174,99,0.4); }

/* ════════════════ FOOTER ════════════════ */
.footer { background: var(--cacao); color: var(--crema); border-top: 1px solid rgba(217,174,99,0.2); }
.footer__inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.4rem, 4vw, 3rem) 3rem;
}
.footer__tagline { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dorado); }
.footer__wordmark { font-family: var(--serif); font-weight: 800; font-size: clamp(2.2rem, 4.5vw, 3.2rem); letter-spacing: 0.05em; color: #FBF3E4; margin-top: 0.6rem; line-height: 1; }
.footer__wordmark sup { font-size: 0.3em; font-weight: 400; }
.footer__descriptor { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.44em; text-transform: uppercase; color: #C9B99C; margin-top: 0.7rem; }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.5rem; }
.footer__cols h3 { font-family: var(--sans); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dorado); margin-bottom: 1rem; }
.footer__cols li { font-size: 0.88rem; color: #C9B99C; padding: 0.22em 0; line-height: 1.5; overflow-wrap: anywhere; }
.footer__cols a:hover { color: var(--crema); }
.footer__base {
  max-width: 1100px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.4rem clamp(1.4rem, 4vw, 3rem) 2.2rem;
  border-top: 1px solid rgba(217,174,99,0.15);
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--dark-muted);
}
.footer__kicker { font-family: var(--serif); font-style: italic; color: var(--dorado); }

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .cook__inner { grid-template-columns: 1fr; gap: 1.4rem; }
  .kettle-svg { max-width: 330px; }
  .cook__pin { padding-top: 4.6rem; align-items: flex-start; }
  .cook__title { font-size: 1.7rem; margin-bottom: 1.1rem; }
  .step p { font-size: 0.84rem; }
  .steps { gap: 0.8rem; }
  .origin__inner { grid-template-columns: 1fr; text-align: center; }
  .origin__copy .eyebrow { justify-content: center; }
  .origin__copy > p { margin-left: auto; margin-right: auto; }
  .origin__facts { justify-content: center; }
  .product__inner { grid-template-columns: 1fr; text-align: center; }
  .product__info .eyebrow { justify-content: center; }
  .product__lead, .product__ingredients { margin-left: auto; margin-right: auto; }
  .specs { margin-left: auto; margin-right: auto; text-align: left; }
  .badges { justify-content: center; }
  .flavor { width: clamp(200px, 60vw, 240px); }
  .flavor__jar { width: clamp(140px, 38vw, 175px); }
  .learn__cards { grid-template-columns: 1fr; }
  .ways__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; gap: 2rem; }
  .versus__cols { grid-template-columns: 1fr; text-align: center; }
  .versus__col--them { text-align: center; }
  .versus__divider { width: 60%; height: 1px; margin: 0 auto; background: linear-gradient(to right, transparent, var(--dorado), transparent); }
}

@media (max-width: 900px) {
  /* SVG goo filter is CPU-heavy on mobile: plain ribbons still read as drizzle */
  .hero__drizzle g { filter: none; }
  /* mix-blend readback is expensive on mobile GPUs */
  .grain { mix-blend-mode: normal; opacity: 0.03; }
}

@media (max-width: 560px) {
  .hero__copy { padding: 0 1rem; }
  .hero__title { font-size: 12vw; letter-spacing: 0.05em; }
  .hero__jar { width: clamp(190px, 52vw, 240px); margin-top: -0.4rem; }
  .hero__lead br { display: none; }
  .specs { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: 1fr; gap: 2rem; }
}

/* ════════════════ REDUCED MOTION ════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero__cue svg, .marquee__track { animation: none; }
  .hero__swirl { display: none; }
  .step, .uses li { opacity: 1; }
  .scroll-progress { display: none; }
}