/* ==========================================================================
   index2 · Guia de 7 dias (produto pago)
   Sistema visual herdado da v1: branco, verde-lima, cinza, preto.
   Dials: VARIANCE 7 · MOTION 5 · DENSITY 3
   ========================================================================== */

:root{
  /* ---- superfícies (modo claro) ---- */
  --bg:        #FFFFFF;
  --surface:   #F4F4F2;
  --surface-2: #EEEEEE;
  --line:      rgba(0,0,0,.12);

  /* ---- tinta ---- */
  --ink:       #000000;   /* "Pure Black" da paleta de referência */
  --ink-70:    rgba(0,0,0,.68);
  --ink-45:    rgba(0,0,0,.46);

  /* ---- acento único da página (travado) ---- */
  --lime:      #E3EEB3;
  --lime-deep: #D4E294;
  --accent-ink:#5F6E2A;   /* lima escurecido: texto sobre claro, AA */

  /* superfície lima: usada no hero, na faixa de óleos e no card do Dia 1.
     No escuro vira oliva profundo para a página não piscar branco à noite. */
  --lime-surface:  #E3EEB3;
  --on-lime:       #000000;
  --on-lime-70:    rgba(0,0,0,.66);
  --on-lime-label: #5F6E2A;

  /* ---- botão ---- */
  --btn-bg:    #000000;
  --btn-fg:    #FFFFFF;
  --btn-hover: #E3EEB3;
  --btn-hover-fg:#000000;

  /* ---- tipografia ---- */
  --f-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --t-h1:  clamp(4rem, 15.5vw, 12.5rem);
  --t-h1b: clamp(1.45rem, 3.3vw, 2.9rem);
  --t-h2:  clamp(1.95rem, 4vw, 3.35rem);
  --t-h3:  clamp(1.3rem, 1.9vw, 1.65rem);

  /* ---- ritmo ---- */
  --wrap:   1280px;
  --gut:    clamp(20px, 4vw, 44px);
  --sec:    clamp(60px, 11vw, 168px);

  /* uma única escala de raio para toda a página */
  --r:      20px;
  --r-pill: 999px;

  --ease: cubic-bezier(.16,1,.3,1);
}

/* Modo escuro: mesma identidade, superfícies invertidas.
   O lima passa a ser a cor de ação, porque sobre preto ele tem
   contraste muito maior do que o branco puro. */
@media (prefers-color-scheme: dark){
  :root{
    --bg:        #0C0C0C;
    --surface:   #151515;
    --surface-2: #1C1C1C;
    --line:      rgba(255,255,255,.14);

    --ink:       #F3F3F1;
    --ink-70:    rgba(243,243,241,.70);
    --ink-45:    rgba(243,243,241,.48);

    --accent-ink:#CBDC8E;

    --lime-surface:  #2A3116;
    --on-lime:       #F3F3F1;
    --on-lime-70:    rgba(243,243,241,.72);
    --on-lime-label: #CBDC8E;

    --btn-bg:    #E3EEB3;
    --btn-fg:    #0C0C0C;
    --btn-hover: #FFFFFF;
    --btn-hover-fg:#0C0C0C;
  }
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1rem,.35vw + .93rem,1.09rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3,p,ul,ol,figure{ margin:0; padding:0; }
ul,ol{ list-style:none; }
a{ color:inherit; }

.wrap{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:
    max(var(--gut), env(safe-area-inset-left))
    max(var(--gut), env(safe-area-inset-right));
}
.up{ text-transform:uppercase; }

.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:0; top:0; z-index:99; background:var(--ink); color:var(--bg); padding:12px 20px; }
:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; border-radius:4px; }

.sep::before{ content:"/"; color:var(--ink-45); padding-inline:.45em; }

/* ---------- display ---------- */
.h1,.h2,.day__t,.author__name,.final__price{
  font-family:var(--f-display);
  font-weight:300;
  letter-spacing:-.025em;
  line-height:1.08;      /* folga para acentos em maiúsculas */
  text-wrap:balance;
}
.h2{ font-size:var(--t-h2); }
.h2 em, .h1 em{ font-style:normal; color:var(--accent-ink); }

.h1{ display:flex; flex-direction:column; gap:.28em; }
.h1__lead{ font-size:var(--t-h1); line-height:.84; letter-spacing:-.05em; }
.h1__rest{ font-size:var(--t-h1b); line-height:1.1; letter-spacing:-.02em; max-width:19ch; }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--btn-bg); color:var(--btn-fg);
  border:0; border-radius:var(--r-pill);
  padding:1.05em 2.2em;
  font-family:var(--f-body); font-size:.9rem; font-weight:500;
  letter-spacing:.01em; text-decoration:none; white-space:nowrap;
  min-height:44px;                 /* alvo de toque minimo */
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease),
             transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn:hover{
  background:var(--btn-hover); color:var(--btn-hover-fg);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.16);
}
.btn:active{ transform:translateY(0) scale(.985); }
.btn--sm{ padding:.7em 1.35em; font-size:.8rem; }
.btn--lg{ padding:1.2em 2.6em; font-size:.95rem; }
/* usado sobre a faixa preta final */
.btn--invert{ background:var(--lime); color:#000; }
.btn--invert:hover{ background:#fff; color:#000; }

/* ---------- preço ---------- */
.price{ font-size:1rem; color:var(--ink-70); }
.hero .price{ color:var(--on-lime-70); }
.hero .price strong{ color:var(--on-lime); }
.price strong{
  font-family:var(--f-display); font-weight:400;
  font-size:1.32em; letter-spacing:-.02em; color:var(--ink);
}
.price--inline{ margin-block:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,30px); }

/* ---------- cabeçalho ---------- */
.hdr{
  position:sticky; top:0; z-index:40;
  /* o cabeçalho é sticky e ocupa espaço no fluxo ANTES do hero, então
     transparente revelaria o branco do body. Ele acompanha a cor do hero
     para o lima correr do topo da tela até o fim da seção. */
  background:var(--lime-surface);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease),
             backdrop-filter .3s var(--ease);
}
.hdr.stuck{
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom-color:var(--line);
}
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:70px; }
.mark{
  font-family:var(--f-display); font-weight:400; font-size:.9rem;
  text-transform:uppercase; letter-spacing:.11em; text-decoration:none; white-space:nowrap;
}
/* o cabeçalho tem altura fixa de 70px, então esse padding só amplia a
   área de toque do link (23px passa a 45px) sem mexer no layout */
.hdr .mark{ display:inline-flex; align-items:center; padding-block:11px; }

/* ---------- 1 · hero ----------
   Sem foto: o próprio lockup tipográfico é o elemento visual.
   Hero editorial, alinhado à esquerda, ocupando a largura toda. */
.hero{
  position:relative;
  background:var(--lime-surface);
  color:var(--on-lime);
  padding-block:clamp(30px,5vw,60px) var(--sec);
}
.hero__in{
  display:flex; flex-direction:column;
  justify-content:center;
  gap:clamp(34px,5vw,64px);
  min-height:calc(100dvh - 70px);
}
.hero__sub{ color:var(--on-lime-70); max-width:38ch; }

.hero__foot{
  display:grid; grid-template-columns:1fr; gap:clamp(24px,3vw,44px);
  padding-top:clamp(24px,3vw,38px);
  border-top:1px solid color-mix(in srgb, var(--on-lime) 20%, transparent);
}
.hero__act{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(16px,2vw,22px); }

/* ---------- 2 · princípios ---------- */
.principles{ border-block:1px solid var(--line); padding-block:clamp(30px,4vw,46px); }
.principles__in{ display:grid; grid-template-columns:1fr; gap:clamp(14px,2vw,24px); }
.principle{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.1rem,1.7vw,1.45rem);
  letter-spacing:-.015em; line-height:1.2;
}
.principle::first-letter{ color:var(--accent-ink); }

/* ---------- 3 · os 7 dias ---------- */
.days{ padding-block:var(--sec); }
.days__head{ margin-bottom:clamp(34px,4.5vw,58px); max-width:56ch; }
.days__head .h2{ max-width:18ch; }
.days__intro{ margin-top:18px; color:var(--ink-70); max-width:46ch; }

.days__grid{ display:grid; grid-template-columns:1fr; gap:clamp(12px,1.3vw,16px); }
.day{
  background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(24px,2.8vw,36px);
  display:flex; flex-direction:column; gap:10px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.day--tint{ background:var(--surface); border-color:transparent; }
.day--feature{
  background:var(--lime-surface); border-color:transparent; color:var(--on-lime);
  gap:14px;
}
.day:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); }
.day__n{
  font-family:var(--f-display); font-size:.8rem; font-weight:400;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-45);
}
.day--feature .day__n{ color:var(--on-lime-label); }
.day__t{ font-size:var(--t-h3); }
.day--feature .day__t{ font-size:clamp(1.8rem,3.4vw,2.6rem); }
.day p{ color:var(--ink-70); max-width:46ch; }
.day--feature p{ color:var(--on-lime-70); font-size:1.06rem; max-width:38ch; }

/* ---------- 4 · óleos essenciais ---------- */
.oils{ background:var(--lime-surface); color:var(--on-lime); padding-block:clamp(64px,9vw,120px); }
.oils__in{ display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,48px); }
.oils .h2{ color:var(--on-lime); max-width:8ch; }
.oils__lead{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.35rem,2.5vw,2rem); line-height:1.24;
  letter-spacing:-.018em; max-width:26ch;
}
.oils__body > p + p{ margin-top:1.1em; color:var(--on-lime-70); max-width:44ch; }

/* ---------- 5 · para você ---------- */
.fit{ padding-block:var(--sec); }
.fit .h2{ max-width:16ch; margin-bottom:clamp(34px,4vw,52px); }
.fit__list{ display:grid; grid-template-columns:1fr; gap:clamp(18px,2.2vw,28px); }
.fit__list li{
  display:grid; grid-template-columns:auto 1fr; gap:14px;
  align-items:start; color:var(--ink-70); max-width:44ch;
}
.tick{
  color:var(--accent-ink); font-size:1.05rem; line-height:1.5;
  font-weight:500; flex:none;
}
.fit__close{
  margin-top:clamp(38px,4.5vw,60px);
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.4rem,2.5vw,2.05rem); line-height:1.24;
  letter-spacing:-.02em;
}
.fit__close strong{ font-weight:400; color:var(--accent-ink); }

/* ---------- 6 · por que 7 dias ---------- */
.why{ background:var(--surface); padding-block:var(--sec); }
.why__in{ display:grid; grid-template-columns:1fr; gap:clamp(26px,3.4vw,56px); }
.why .h2{ max-width:9ch; }
.why__lead{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.24;
  letter-spacing:-.02em; max-width:24ch;
}
.why__body > p{ color:var(--ink-70); max-width:44ch; }
.why__body > p + p{ margin-top:1.1em; }
.why__chant{
  color:var(--ink) !important;
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.25rem,2.1vw,1.7rem); line-height:1.36;
  letter-spacing:-.018em;
  padding-left:clamp(16px,1.8vw,24px);
  border-left:3px solid var(--lime-deep);
  margin-block:1.5em !important;
}
.why .price{ margin-bottom:clamp(20px,2.4vw,28px); }

/* ---------- 7 · autora ---------- */
.author{ padding-block:var(--sec); }
.author__in{ display:grid; grid-template-columns:1fr; gap:clamp(32px,4.5vw,64px); align-items:center; }
.author__fig img{
  /* height:auto é obrigatório: sem ele o atributo height="1600" do HTML
     entra como presentational hint e anula o aspect-ratio. */
  width:100%; height:auto; border-radius:var(--r);
  aspect-ratio:4/5; object-fit:cover; object-position:50% 20%;
  box-shadow:0 24px 56px color-mix(in srgb, var(--ink) 13%, transparent);
}
.author .h2{ font-size:clamp(1.5rem,2.2vw,2rem); margin-bottom:clamp(20px,2.4vw,30px); }
.author__name{ font-size:clamp(1.7rem,2.8vw,2.4rem); }
.author__role{ color:var(--accent-ink); font-size:.92rem; margin-block:8px clamp(20px,2.4vw,28px); }
.author__body > p{ color:var(--ink-70); max-width:48ch; }
.author__body > p + p{ margin-top:1em; }
.author__punch{
  color:var(--ink) !important;
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.28;
  letter-spacing:-.018em; margin-top:1.4em !important;
}

/* ---------- 8 · fechamento ---------- */
.final{
  background:#0C0C0C; color:#F3F3F1;
  border-radius:var(--r) var(--r) 0 0;
  padding-block:var(--sec);
}
.final__in{ display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,60px); align-items:center; }
.final .h2{ max-width:15ch; }
.final .h2 em{ color:var(--lime); }
.final__sub{ color:rgba(243,243,241,.68); max-width:40ch; }
.final__buy{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);
  padding:clamp(28px,3.4vw,44px);
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.final__label{ font-size:.88rem; color:rgba(243,243,241,.62); }
.final__price{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(3rem,6vw,4.6rem); line-height:1;
  letter-spacing:-.04em; color:var(--lime);
  margin-bottom:clamp(18px,2.2vw,26px);
}
.final__note{ margin-top:14px; font-size:.82rem; color:rgba(243,243,241,.52); }

/* ---------- rodapé ---------- */
.ftr{ background:#0C0C0C; color:rgba(243,243,241,.6); padding-block:34px; }
.ftr__in{ display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:space-between; }
.ftr .mark{ color:#F3F3F1; }
.ftr__meta{ font-size:.82rem; }

/* ---------- movimento ---------- */
.rv{ opacity:0; transform:translateY(20px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.day.rv{ transition-delay:calc(var(--i,0) * 60ms); }
.principle.rv{ transition-delay:calc(var(--i,0) * 90ms); }
.fit__list li.rv{ transition-delay:calc(var(--i,0) * 55ms); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn,.day{ transition:none !important; }
}

/* ---------- barra de compra fixa (mobile) ---------- */
.buybar{
  position:fixed; inset:auto 0 0 0; z-index:45;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  transform:translateY(115%);
  visibility:hidden;               /* tira do foco enquanto escondida */
  transition:transform .4s var(--ease), visibility .4s var(--ease);
}
.buybar.on{ transform:none; visibility:visible; }
.buybar__in{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  max-width:var(--wrap); margin-inline:auto;
}
.buybar__price{ line-height:1.12; flex:none; }
.buybar__price span{
  display:block; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-45);
}
.buybar__price strong{
  font-family:var(--f-display); font-weight:400;
  font-size:1.3rem; letter-spacing:-.025em;
}
.buybar .btn{ padding:.85em 1.3em; font-size:.85rem; }

/* ---------- mobile ---------- */
@media (max-width:639px){
  /* CTAs de largura total: resolve o estouro em telas de 320px e
     aumenta muito a area de toque */
  .btn--lg{ width:100%; padding-inline:1.2em; }
  /* o botao do cabecalho tinha 39px de altura e some aqui:
     quem carrega a compra no mobile e a barra fixa */
  .hdr .btn{ display:none; }
  .hero__act{ align-self:stretch; width:100%; }
}

@media (min-width:900px){
  .buybar{ display:none; }
}

/* ---------- responsivo ---------- */
@media (min-width:640px){
  .principles__in{ grid-template-columns:repeat(3,1fr); }
  .fit__list{ grid-template-columns:repeat(2,1fr); column-gap:clamp(28px,4vw,64px); }
}

@media (min-width:900px){
  .hero__foot{ grid-template-columns:1.15fr .85fr; align-items:start; }
  .hero__act{ align-items:flex-end; text-align:right; }

  .days__grid{ grid-template-columns:repeat(2,1fr); }
  .day--feature{ grid-column:1 / -1; }

  .oils__in{ grid-template-columns:.7fr 1.3fr; align-items:start; }

  .why__in{ grid-template-columns:.7fr 1.3fr; align-items:start; }

  .author__in{ grid-template-columns:.72fr 1.28fr; gap:clamp(44px,5vw,76px); }

  .final__in{ grid-template-columns:1.1fr .9fr; }
}