:root{
  --green:#132218;
  --green-2:#1a2e21;
  --green-3:#223a2b;
  --brown:#3a2a1e;
  --gold:#c6a24c;
  --gold-soft:#ddc082;
  --cream:#f6f1e6;
  --cream-2:#efe7d6;
  --ink:#21201b;
  --muted:#7a7061;
  --line:#e0d8c6;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Jost", "Segoe UI", system-ui, sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--sans); color:var(--ink); background:var(--cream); line-height:1.65; font-size:16px; font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.display{ font-family:var(--serif); font-weight:500; line-height:1.04; letter-spacing:0; }

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

.index{ display:block; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-soft); font-weight:400; margin-bottom:1.4rem; }
.index.dark{ color:var(--gold); }
.eyebrow{ display:inline-block; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); font-weight:400; margin-bottom:1rem; }

/* buttons + links */
.btn{ display:inline-block; background:var(--gold); color:var(--green); font-family:var(--sans); font-weight:500; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; padding:1.05em 2.1em; border:1px solid var(--gold); border-radius:2px; cursor:pointer; white-space:nowrap; transition:.35s cubic-bezier(.2,.7,.2,1); }
.btn:hover{ background:transparent; color:var(--gold-soft); border-color:var(--gold-soft); }
.btn-sm{ padding:.7em 1.3em; font-size:.72rem; }
.link-arrow{ font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--cream); border-bottom:1px solid rgba(221,192,130,.4); padding-bottom:.35em; transition:.3s; }
.link-arrow:hover{ color:var(--gold-soft); border-color:var(--gold-soft); }
.link-arrow::after{ content:" →"; }

/* NAV */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1.5rem 6vw; color:var(--cream); transition:.5s ease; }
.nav.scrolled{ padding:.85rem 6vw; background:rgba(19,34,24,.9); backdrop-filter:blur(12px); border-bottom:1px solid rgba(221,192,130,.14); }
.brand{ display:flex; align-items:center; gap:.65rem; color:var(--gold-soft); }
.brand .leaf{ width:24px; height:24px; }
.brand-name{ font-family:var(--serif); font-weight:600; font-size:1.35rem; letter-spacing:.03em; color:var(--cream); }
.nav-right{ display:flex; align-items:center; gap:1.8rem; }
.nav-link{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cream); opacity:.8; transition:.3s; }
.nav-link:hover{ opacity:1; color:var(--gold-soft); }
/* Language toggle — segmented pill w/ sliding indicator */
.lang{ position:relative; display:flex; align-items:stretch; padding:3px; border:1px solid rgba(221,192,130,.34);
  border-radius:999px; background:rgba(246,241,230,.06); backdrop-filter:blur(6px); }
.lang-slider{ position:absolute; top:3px; left:3px; width:calc(50% - 3px); height:calc(100% - 6px); border-radius:999px;
  background:var(--gold-soft); box-shadow:0 2px 10px -2px rgba(198,162,76,.55);
  transition:transform .34s cubic-bezier(.65,.05,.36,1); }
.lang.is-en .lang-slider{ transform:translateX(100%); }
.lang button{ position:relative; z-index:1; flex:1 1 50%; display:flex; align-items:center; justify-content:center;
  min-width:52px; min-height:34px; padding:.45em .95em; background:none; border:none; border-radius:999px; cursor:pointer;
  font-family:var(--sans); font-size:.7rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  color:rgba(246,241,230,.72); transition:color .28s ease; }
.lang button:hover{ color:var(--cream); }
.lang button.active{ color:var(--green); }          /* dark ink on the gold pill */
.lang button:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; }
.lang-abbr{ display:none; }
@media (prefers-reduced-motion:reduce){ .lang-slider{ transition:none; } }

/* Proprietary blend name — reads as a trademarked asset, not stray italics */
.products-sub em, .p-body em{ font-family:var(--serif); font-style:italic; font-weight:600;
  color:var(--gold); letter-spacing:.01em; }

/* HERO */
.hero{ position:relative; min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:3rem; padding:9rem 6vw 4rem; color:var(--cream);
  background:radial-gradient(130% 100% at 88% 12%, rgba(198,162,76,.15), transparent 52%), linear-gradient(155deg,#132218 0%, #1c3325 100%); overflow:hidden; }
.hero-watermark{ position:absolute; right:-4%; top:50%; transform:translateY(-50%); height:120%; color:rgba(221,192,130,.05); pointer-events:none; }
.hero-copy{ position:relative; z-index:2; }
.pill{ display:inline-block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); border:1px solid rgba(221,192,130,.35); padding:.5em 1.1em; border-radius:30px; margin-bottom:1.8rem; }
.hero h1{ font-size:clamp(2.9rem, 6vw, 5.4rem); color:var(--cream); margin-bottom:1.4rem; font-weight:500; }
.hero-sub{ font-size:1.06rem; color:rgba(246,241,230,.78); max-width:44ch; margin-bottom:2.4rem; font-weight:300; }
.hero-cta{ display:flex; gap:2rem; align-items:center; flex-wrap:wrap; }
.hero-art{ position:relative; z-index:2; display:flex; justify-content:center; align-items:center; }
.hero-oval{ position:absolute; width:78%; aspect-ratio:1/1.15; border-radius:50%; background:radial-gradient(circle at 50% 40%, rgba(221,192,130,.22), rgba(221,192,130,.03) 60%, transparent 72%); }
.hero-art img{ position:relative; width:80%; max-width:400px; border-radius:4px; box-shadow:0 40px 80px -35px rgba(0,0,0,.75); }
.scroll-cue{ position:absolute; bottom:2rem; left:6vw; display:flex; align-items:center; gap:.7rem; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(246,241,230,.55); }
.scroll-cue i{ width:34px; height:1px; background:var(--gold-soft); position:relative; overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; left:0; top:0; height:100%; width:12px; background:var(--cream); animation:cue 2.2s infinite; }
@keyframes cue{ 0%{transform:translateX(-14px)} 100%{transform:translateX(40px)} }

/* MARQUEE */
.marquee{ background:var(--gold); color:var(--green); overflow:hidden; padding:.85rem 0; }
.marquee-track{ display:inline-flex; align-items:center; gap:2.2rem; white-space:nowrap; animation:scroll 26s linear infinite; }
.marquee-track span{ font-family:var(--serif); font-style:italic; font-size:1.25rem; font-weight:500; }
.marquee-track b{ font-size:.7rem; opacity:.6; }
@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* STORY */
.story{ display:grid; grid-template-columns:1fr 1.05fr; gap:5rem; align-items:center; padding:8rem 6vw; background:var(--cream); }
.story-art{ position:relative; }
.story-art img{ border-radius:4px; box-shadow:0 30px 60px -35px rgba(0,0,0,.45); aspect-ratio:4/4.4; object-fit:cover; }
.story-badge{ position:absolute; bottom:-1.6rem; right:-1rem; background:var(--green); color:var(--cream); padding:1rem 1.5rem; border-radius:3px; box-shadow:0 20px 40px -20px rgba(0,0,0,.5); }
.story-badge span{ display:block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:.2rem; }
.story-badge strong{ font-family:var(--serif); font-size:1.2rem; font-weight:600; color:var(--cream); }
.story h2{ font-size:clamp(2.2rem,4.2vw,3.4rem); color:var(--green); margin-bottom:1.6rem; }
.story p{ color:var(--muted); margin-bottom:1.1rem; font-size:1.05rem; }
.story .signature{ font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--gold); margin-top:.6rem; }

/* VALORES */
.values{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:0 6vw 8rem; background:var(--cream); }
.value{ padding:0 2rem; text-align:center; border-right:1px solid var(--line); }
.value:last-child{ border-right:none; }
.v-icon{ width:38px; height:38px; color:var(--gold); margin:0 auto 1.1rem; }
.value h3{ font-family:var(--serif); font-size:1.45rem; color:var(--green); font-weight:600; margin-bottom:.6rem; }
.value p{ font-size:.9rem; color:var(--muted); }

/* RITUAL */
.ritual{ position:relative; padding:8rem 6vw; color:var(--cream); background:radial-gradient(120% 100% at 20% 0%, rgba(198,162,76,.1), transparent 55%), var(--green-2); }
.ritual-head{ text-align:center; margin-bottom:4rem; }
.ritual-head h2{ font-size:clamp(2.2rem,4.2vw,3.4rem); color:var(--cream); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; max-width:1000px; margin:0 auto; }
.step{ text-align:center; padding:0 1rem; position:relative; }
.step:not(:last-child)::after{ content:"✻"; position:absolute; right:-1.4rem; top:1.4rem; color:var(--gold); opacity:.4; font-size:.8rem; }
.step-n{ font-family:var(--serif); font-size:2.6rem; color:var(--gold-soft); font-weight:400; display:block; margin-bottom:.4rem; }
.step h3{ font-family:var(--serif); font-size:1.5rem; color:var(--cream); font-weight:600; margin-bottom:.7rem; }
.step p{ font-size:.95rem; color:rgba(246,241,230,.7); max-width:26ch; margin:0 auto; }

/* PRODUCTOS */
.products{ padding:8rem 6vw; background:var(--cream); }
.products-head{ text-align:center; margin-bottom:3.5rem; }
.products-head h2{ font-size:clamp(2.2rem,4.2vw,3.4rem); color:var(--green); }
.products-sub{ text-align:center; color:var(--muted); font-size:1.02rem; font-style:italic; font-family:var(--serif); max-width:46ch; margin:1rem auto 0; }
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; max-width:1150px; margin:0 auto; }
.product{ background:#fff; border:1px solid var(--line); border-radius:4px; overflow:hidden; transition:.4s cubic-bezier(.2,.7,.2,1); }
.product:hover{ transform:translateY(-8px); box-shadow:0 30px 55px -30px rgba(19,34,24,.4); }
.p-img{ position:relative; aspect-ratio:1/1.15; overflow:hidden; background:var(--green); }
.p-img img{ width:100%; height:100%; object-fit:cover; transition:.7s cubic-bezier(.2,.7,.2,1); }
.product:hover .p-img img{ transform:scale(1.05); }
.soon{ position:absolute; top:1rem; right:1rem; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green); background:var(--gold-soft); padding:.4em .8em; border-radius:20px; font-weight:500; }
.p-body{ padding:1.6rem 1.7rem 2rem; }
.p-tag{ display:inline-block; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.7rem; }
.p-body h3{ font-family:var(--serif); font-size:1.7rem; color:var(--green); font-weight:600; line-height:1.1; margin-bottom:.35rem; }
.p-sub{ font-size:.78rem; color:var(--muted); letter-spacing:.02em; margin-bottom:.9rem; text-transform:uppercase; }
.p-body > p{ font-size:.92rem; color:var(--muted); }

/* RESULTADOS */
.results{ display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:4rem; padding:8rem 6vw; background:linear-gradient(160deg,#132218,#1c3325); color:var(--cream); }
.results-img img{ border-radius:4px; box-shadow:0 40px 80px -40px rgba(0,0,0,.7); }
.results-copy h2{ font-size:clamp(2.2rem,4.2vw,3.4rem); color:var(--cream); margin-bottom:1.4rem; }
.results-copy p{ color:rgba(246,241,230,.78); font-size:1.05rem; }

/* WAITLIST */
.waitlist{ position:relative; padding:9rem 6vw; text-align:center; color:var(--cream); overflow:hidden;
  background:radial-gradient(100% 120% at 50% 0%, rgba(198,162,76,.14), transparent 55%), var(--green); }
.waitlist .hero-watermark{ left:50%; right:auto; transform:translate(-50%,-50%); height:130%; opacity:1; }
.wl-inner{ position:relative; z-index:2; max-width:640px; margin:0 auto; }
.waitlist h2{ font-size:clamp(2.4rem,4.6vw,3.6rem); color:var(--cream); margin-bottom:1.2rem; }
.wl-inner > p{ color:rgba(246,241,230,.78); margin-bottom:2.4rem; font-size:1.05rem; max-width:46ch; margin-left:auto; margin-right:auto; }
.wl-form{ display:flex; gap:.6rem; max-width:480px; margin:0 auto; }
.wl-form input{ flex:1; padding:1.05em 1.3em; border-radius:2px; border:1px solid rgba(221,192,130,.35); background:rgba(246,241,230,.05); color:var(--cream); font-family:var(--sans); font-size:.95rem; font-weight:300; }
.wl-form input::placeholder{ color:rgba(246,241,230,.45); }
.wl-form input:focus{ outline:none; border-color:var(--gold-soft); background:rgba(246,241,230,.09); }
.wl-note{ margin-top:1.1rem; font-size:.9rem; color:var(--gold-soft); }
.wl-or{ display:flex; align-items:center; gap:1rem; margin:2.4rem auto 1.3rem; max-width:320px; color:rgba(246,241,230,.45); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.wl-or::before,.wl-or::after{ content:""; flex:1; height:1px; background:rgba(221,192,130,.25); }

/* FOOTER */
.footer{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; padding:3.5rem 6vw; background:#0e1a12; color:var(--cream); border-top:1px solid rgba(221,192,130,.12); }
.foot-brand{ display:flex; flex-direction:column; gap:.15rem; }
.foot-brand .leaf{ width:30px; height:30px; color:var(--gold-soft); margin-bottom:.4rem; }
.foot-brand .brand-name{ font-size:1.2rem; }
.foot-brand .tag{ font-family:var(--serif); font-style:italic; color:var(--gold-soft); font-size:1.05rem; }
.foot-links{ display:flex; gap:1.6rem; justify-content:center; }
.foot-links a{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(246,241,230,.7); transition:.3s; }
.foot-links a:hover{ color:var(--gold-soft); }
.foot-legal{ text-align:right; font-size:.74rem; color:rgba(246,241,230,.45); }
.foot-legal p{ margin-bottom:.2rem; }

/* SCROLL REVEAL */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.visible{ opacity:1; transform:none; }
.product.reveal:nth-child(2){ transition-delay:.12s; }
.product.reveal:nth-child(3){ transition-delay:.24s; }
.step.reveal:nth-child(2){ transition-delay:.12s; }
.step.reveal:nth-child(3){ transition-delay:.24s; }
.value.reveal:nth-child(2){ transition-delay:.1s; }
.value.reveal:nth-child(3){ transition-delay:.2s; }
.value.reveal:nth-child(4){ transition-delay:.3s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } .marquee-track,.scroll-cue i::after{ animation:none; } }

/* RESPONSIVE */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; text-align:center; min-height:auto; padding-top:7rem; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-cta{ justify-content:center; }
  .hero-art{ order:-1; margin-bottom:1rem; }
  .hero-art img{ max-width:260px; }
  .hero-watermark,.scroll-cue{ display:none; }
  .story{ grid-template-columns:1fr; gap:3.5rem; }
  .story-art{ max-width:420px; margin:0 auto; }
  .story-badge{ right:1rem; }
  .values{ grid-template-columns:repeat(2,1fr); gap:2.5rem 0; }
  .value:nth-child(2){ border-right:none; }
  .steps{ grid-template-columns:1fr; gap:2.5rem; }
  .step:not(:last-child)::after{ display:none; }
  .product-grid{ grid-template-columns:1fr; max-width:400px; }
  .results{ grid-template-columns:1fr; gap:2.5rem; text-align:center; }
  .results-img{ max-width:480px; margin:0 auto; }
  .footer{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .foot-legal{ text-align:center; }
  .nav-link{ display:none; }
  /* toggle is one of the last controls left up here — give it a real tap target */
  .lang-full{ display:none; }
  .lang-abbr{ display:inline; }
  .lang button{ min-width:48px; min-height:44px; font-size:.72rem; letter-spacing:.14em; }
}
@media (max-width:560px){
  .values{ grid-template-columns:1fr; } .value{ border-right:none; }
  .wl-form{ flex-direction:column; }
  .nav{ padding:1rem 5vw; } .nav.scrolled{ padding:.8rem 5vw; }
  .nav .btn-sm{ display:none; }
  .brand-name{ font-size:1.1rem; }
}