@font-face{
  font-family:'Quicksand fallback';
  src:local('Arial'), local('Helvetica'), local('Liberation Sans'), local('DejaVu Sans');
  size-adjust:90.5%;
  ascent-override:96%;
  descent-override:24%;
  line-gap-override:0%;
}
/* Quicksand — display arredondada (variação de hero V2/V3) */
@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/quicksand-500-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/quicksand-500-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/quicksand-600-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/quicksand-600-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/quicksand-700-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/quicksand-700-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

@font-face{
  font-family:'Cormorant fallback';
  src:local('Georgia'), local('Times New Roman'), local('Liberation Serif'), local('DejaVu Serif');
  size-adjust:96.8%;
  ascent-override:90%;
  descent-override:22%;
  line-gap-override:0%;
}
/* Fontes da marca — self-hosted (sem round-trip para o Google) */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-500-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-500-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-600-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-600-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* =========================================================
   A ROTINA IDEAL — Pâmela Pissutti
   Direção: Editorial Materno (Brand-First)
   Paleta e tipografia extraídas da identidade real da marca.
   ========================================================= */

:root{
  /* === PALETA REAL, extraída dos traços da logo "a rotina ideal" === */
  --terra:      #BD9477;   /* terracota — "a rotina" + ilustração mãe/bebê */
  --azul:       #919BA6;   /* azul-acinzentado — "ideal" + bebê dormindo */
  --logo-cream: #ECEBE7;   /* creme do lockup */

  /* derivados com contraste AA sobre creme */
  --terra-ink:  #755139;   /* 5.55:1 no pior fundo real */   /* AA em todos os fundos claros */
  --terra-lg:   #AE7C59;   /* texto grande (3:1) */
  --azul-txt:   #515A64;   /* 5.54:1 no pior fundo real */   /* AA em todos os fundos claros */

  /* === neutros === */
  --ink:        #2E2119;   /* texto principal */
  --muted:      #6B5A4C;   /* texto secundário */
  --cream:      #FBF6F0;
  --sand:       #F2EAE1;
  --blush:      #F8F0E9;
  --line:       #E2D6C8;
  --white:      #FFFFFF;

  /* === a noite, derivada da terracota === */
  --night:      #1B120B;
  --night-2:    #241811;
  --night-line: rgba(236,235,231,.15);
  --night-txt:  #E6DCD1;
  --dawn:       #F7EFE5;

  /* compatibilidade com regras já existentes */
  --ink-deep:   #140D08;
  --taupe:      #9D897C;
  --gold:       #BD9477;
  --gold-ink:   #755139;
  --gold-lt:    #C9A382;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s8:48px; --s10:64px; --s12:80px; --s16:120px;

  --container: 1200px;
  --narrow: 760px;

  --serif: 'Cormorant Garamond', 'Cormorant fallback', Georgia, 'Times New Roman', serif;
  --round: 'Quicksand', 'Quicksand fallback', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-cine: cubic-bezier(.76,0,.24,1);
  --ease-rev:  cubic-bezier(.2,.7,.2,1);
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.012em;
  text-wrap:balance;
  margin:0;
}
h1 i,h2 i,h3 i{ font-style:italic; color:var(--gold-ink); }
p{ margin:0; text-wrap:pretty; }

a{ color:inherit; }

.container{ width:min(90vw, var(--container)); margin-inline:auto; }

/* ---------- acessibilidade ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream);
  padding:var(--s3) var(--s5); font-size:14px; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--gold-ink); outline-offset:3px; border-radius:2px; }

/* ---------- textura + progresso ---------- */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; background:transparent; }
.progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--ink)); transition:width .1s linear; }

/* ---------- reveal ---------- */
.reveal{
  /* Só transform — nada de opacidade.
     Texto em opacidade parcial se mistura com o fundo e cai abaixo de 4.5:1
     durante a animação; auditoria pega isso e reprova de forma intermitente.
     O deslizar sozinho entrega o mesmo efeito, com contraste cheio o tempo todo. */
  transform:translateY(20px);
  transition:transform .8s var(--ease);
  transition-delay:var(--delay,0ms);
  will-change:transform;
}
.reveal.is-in{ transform:none; will-change:auto; }
.no-js .reveal{ transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transform:none !important; transition:none !important; }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
}

/* ---------- tipografia utilitária ---------- */
.eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-ink); margin-bottom:var(--s5);
  display:flex; align-items:center; gap:var(--s3);
}
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--gold); flex:none; }

.sec__head{ max-width:720px; margin-bottom:var(--s12); }
.sec__head h2{ font-size:clamp(34px,5.2vw,58px); }
.sec__sub{ margin-top:var(--s5); color:var(--muted); font-size:17px; }

section{ position:relative; z-index:2; padding-block:clamp(72px,10vw,var(--s16)); }

/* ---------- botões ---------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:var(--cream); --btn-bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd);
  padding:14px 26px; border-radius:var(--r-md);
  font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.03em;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -14px rgba(65,30,6,.55); }
.btn:active{ transform:translateY(0); }
.btn--lg{ padding:17px 34px; font-size:15px; min-height:56px; }
.btn--sm{ padding:10px 18px; font-size:12.5px; }
.btn--block{ display:flex; width:100%; }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line); }
.btn--ghost:hover{ --btn-bg:var(--ink); --btn-fg:var(--cream); --btn-bd:var(--ink); }
.btn--light{ --btn-bg:var(--cream); --btn-fg:var(--ink); --btn-bd:var(--cream); }
.btn--light:hover{ --btn-bg:var(--white); --btn-bd:var(--white); }

.link-arrow{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-ink); text-decoration:none;
  border-bottom:1px solid var(--gold); padding-bottom:3px;
  transition:gap .3s var(--ease), color .3s var(--ease);
}
.link-arrow::after{ content:'→'; }
.link-arrow:hover{ gap:var(--s4); color:var(--ink); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding-block:var(--s4);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(251,246,240,.9);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line);
  padding-block:var(--s3);
}
.nav__in{ display:flex; align-items:center; gap:var(--s6); }

.brand{ display:flex; align-items:center; gap:var(--s3); text-decoration:none; margin-right:auto; }
.brand__mark{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink); color:var(--cream);
  font-family:var(--serif); font-size:21px; line-height:1; padding-bottom:3px;
}
.brand__txt{ display:flex; flex-direction:column; line-height:1.25; }
.brand__txt b{ font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.04em; }
.brand__txt i{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--muted); }

.nav__links{ display:flex; gap:var(--s6); }
.nav__links a{
  font-size:13px; font-weight:500; letter-spacing:.03em; text-decoration:none; color:var(--muted);
  position:relative; padding-block:4px; transition:color .3s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }

.burger{ display:none; background:none; border:0; padding:10px; cursor:pointer; }
.burger span{ display:block; width:22px; height:1.5px; background:var(--ink); transition:transform .35s var(--ease), opacity .3s; }
.burger span+span{ margin-top:6px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span+span{ transform:translateY(-3.75px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding-top:clamp(132px,13vw,168px); padding-bottom:clamp(56px,7vw,88px); }
.hero__in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,88px); align-items:center; }
.hero h1{ font-size:clamp(40px,7vw,80px); margin-bottom:var(--s6); }
.lede{ font-size:clamp(16px,1.6vw,19px); color:var(--muted); max-width:52ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s8); }
.hero__micro{
  margin-top:var(--s6); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3);
  font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:500;
}
.hero__micro i{ color:var(--gold); font-style:normal; }

.hero__media{ margin:0; position:relative; }
.hero__media picture{ display:block; overflow:hidden; border-radius:200px 200px var(--r-lg) var(--r-lg); }
.hero__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; animation:kb 22s var(--ease) infinite alternate; }
@keyframes kb{ from{ transform:scale(1.005); } to{ transform:scale(1.075); } }

.hero__badge{
  position:absolute; left:-8px; bottom:26px;
  background:var(--cream); border:1px solid var(--line); border-left:3px solid var(--gold);
  padding:var(--s4) var(--s5); border-radius:var(--r-md);
  box-shadow:0 18px 40px -26px rgba(65,30,6,.5);
  display:flex; flex-direction:column; gap:2px; max-width:230px;
}
.hero__badge b{ font-family:var(--serif); font-style:italic; font-size:20px; font-weight:400; }
.hero__badge span{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); line-height:1.5; }

/* =========================================================
   STATS
   ========================================================= */
.stats{ padding-block:0; }
.stats__in{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:var(--s8);
}
.stat{ text-align:center; padding-inline:var(--s3); border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat__num{ display:block; font-family:var(--serif); font-size:clamp(38px,5vw,58px); line-height:1; color:var(--ink); }
.stat__lbl{ display:block; margin-top:var(--s3); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }

/* =========================================================
   DOR
   ========================================================= */
.pain{ background:var(--sand); }
.pain__head{ max-width:760px; margin-bottom:var(--s10); }
.pain__head h2{ font-size:clamp(32px,5vw,56px); }
.pain__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.pain__list li{ background:var(--sand); padding:var(--s8) var(--s6); display:flex; gap:var(--s5); align-items:flex-start; }
.pain__list span{ font-family:var(--serif); font-size:26px; color:var(--gold-ink); line-height:1; flex:none; }
.pain__list p{ color:var(--muted); font-size:16px; }
.pain__list i{ font-style:italic; color:var(--ink); }
.pain__bridge{
  margin-top:var(--s10); max-width:var(--narrow);
  font-family:var(--serif); font-size:clamp(21px,2.8vw,30px); line-height:1.42; color:var(--ink);
}

/* =========================================================
   METODOLOGIA
   ========================================================= */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s8) var(--s6);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -34px rgba(65,30,6,.55); border-color:var(--gold); }
.card__tag{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); font-weight:600; margin-bottom:var(--s5); }
.card h3{ font-size:26px; margin-bottom:var(--s4); }
.card p{ color:var(--muted); font-size:15.5px; }

/* =========================================================
   SOBRE
   ========================================================= */
.about{ background:var(--sand); }
.about__in{ display:grid; grid-template-columns:.85fr 1fr; gap:clamp(32px,6vw,80px); align-items:center; }
.about__media{ margin:0; }
.about__media picture{ display:block; overflow:hidden; border-radius:var(--r-lg) var(--r-lg) 200px 200px; border:1px solid var(--line); }
.about__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.about__copy h2{ font-size:clamp(36px,5.4vw,62px); margin-bottom:var(--s6); }
.about__copy p{ color:var(--muted); margin-bottom:var(--s4); max-width:54ch; }
.creds{ list-style:none; margin:var(--s8) 0 0; padding:0; display:grid; gap:var(--s3); }
.creds li{ position:relative; padding-left:var(--s6); font-size:14px; color:var(--ink); }
.creds li::before{ content:''; position:absolute; left:0; top:11px; width:16px; height:1px; background:var(--gold); }

/* =========================================================
   COMO FUNCIONA
   ========================================================= */
.steps__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s6); counter-reset:s; }
.steps__list li{ border-top:1px solid var(--line); padding-top:var(--s5); }
.steps__n{ display:block; font-family:var(--serif); font-size:46px; line-height:.9; color:var(--gold); margin-bottom:var(--s5); }
.steps__list h3{ font-size:24px; margin-bottom:var(--s3); }
.steps__list p{ color:var(--muted); font-size:15px; }

/* =========================================================
   PLANOS
   ========================================================= */
.plans{ background:var(--sand); }
.plans__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s6); align-items:stretch; }
.plan{
  position:relative; background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s10) var(--s8) var(--s8);
  display:flex; flex-direction:column; height:100%;
}
.plan--hero{ background:var(--ink); color:var(--cream); border-color:var(--ink); box-shadow:0 40px 80px -50px rgba(65,30,6,.9); }
.plan__ribbon{
  position:absolute; top:0; right:var(--s8); transform:translateY(-50%);
  background:var(--gold); color:var(--ink-deep);
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:7px 16px; border-radius:100px;
}
.plan__tag{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); font-weight:600; margin-bottom:var(--s4); }
.plan--hero .plan__tag{ color:var(--gold-lt); }
.plan__name{ font-size:30px; margin-bottom:var(--s3); }
.plan__for{ color:var(--muted); font-size:15px; margin-bottom:var(--s6); min-height:3em; }
.plan--hero .plan__for{ color:#D8C4AE; }
.plan__price{ font-family:var(--serif); font-size:clamp(48px,6vw,66px); line-height:1; }
.plan__cur{ font-size:.4em; vertical-align:super; margin-right:.15em; color:var(--muted); }
.plan--hero .plan__cur{ color:var(--gold-lt); }
.plan__cents{ font-size:.42em; vertical-align:super; }
.plan__inst{ font-size:13px; color:var(--muted); margin-top:var(--s2); }
.plan--hero .plan__inst{ color:#D8C4AE; }
.plan__seal{
  margin-top:var(--s5); padding:var(--s4);
  border:1px solid rgba(199,154,92,.55); border-radius:var(--r-sm);
  background:rgba(199,154,92,.08);
  font-size:13.5px; line-height:1.6; color:var(--gold-lt); font-weight:500;
}
.plan__feats{ list-style:none; margin:var(--s6) 0 0; padding:var(--s6) 0 0; border-top:1px solid var(--line); display:grid; gap:var(--s4); flex:1; }
.plan--hero .plan__feats{ border-top-color:rgba(228,213,197,.22); }
.plan__feats li{ position:relative; padding-left:var(--s6); font-size:14.5px; line-height:1.6; color:var(--muted); }
.plan--hero .plan__feats li{ color:#E7DACB; }
.plan__feats li::before{ content:'+'; position:absolute; left:0; top:0; color:var(--gold); font-size:15px; }
.plan--hero .plan__feats li::before{ content:'✦'; font-size:11px; top:3px; }
.plan__note{ margin-top:var(--s5); font-size:12.5px; color:var(--muted); font-style:italic; }
.plan .btn{ margin-top:var(--s8); }
.plans__fine{ margin-top:var(--s6); font-size:12.5px; color:var(--muted); max-width:var(--narrow); }

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
.quotes__grid{ columns:3; column-gap:var(--s5); }
.quote{
  break-inside:avoid; margin:0 0 var(--s5);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s6);
}
.quote__ctx{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); font-weight:600; margin-bottom:var(--s4); line-height:1.6; }
.quote blockquote{
  margin:0; font-family:var(--serif); font-size:19px; line-height:1.5; color:var(--ink);
}
.quote blockquote::before{ content:'“'; color:var(--gold); font-size:32px; line-height:0; vertical-align:-.18em; margin-right:2px; }
.quote figcaption{ margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.quote--tall{ background:var(--blush); }
.quotes__fine{ margin-top:var(--s6); font-size:12.5px; color:var(--muted); max-width:var(--narrow); }

/* =========================================================
   GARANTIA
   ========================================================= */
.warranty{ background:var(--ink); color:var(--cream); }
.warranty .eyebrow{ color:var(--gold-lt); }
.warranty .eyebrow::before{ background:var(--gold); }
.warranty__in{ max-width:900px; }
.warranty h2{ font-size:clamp(30px,4.6vw,50px); margin-bottom:var(--s10); }
.warranty h2 i{ color:var(--gold-lt); }
.warranty__body{ display:grid; gap:var(--s5); max-width:70ch; }
.warranty__body p{ color:#DCCBB8; font-size:16px; }
.warranty__cond{ font-size:13.5px !important; color:#B3A08C !important; border-left:2px solid var(--gold); padding-left:var(--s5); }
.warranty .link-arrow{ color:var(--gold-lt); border-color:rgba(199,154,92,.6); justify-self:start; margin-top:var(--s3); }
.warranty .link-arrow:hover{ color:var(--cream); }

/* =========================================================
   FAQ
   ========================================================= */
.faq__in{ max-width:900px; }
.faq__list{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:var(--s6) var(--s10) var(--s6) 0; position:relative;
  font-family:var(--serif); font-size:clamp(20px,2.4vw,25px); line-height:1.35; color:var(--ink);
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; position:absolute; right:6px; top:50%; width:13px; height:13px;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:translateY(-70%) rotate(45deg); transition:transform .35s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.faq summary:hover{ color:var(--gold-ink); }
.faq__a{ padding:0 var(--s10) var(--s6) 0; display:grid; gap:var(--s4); }
.faq__a p{ color:var(--muted); font-size:15.5px; }

/* =========================================================
   CTA FINAL
   ========================================================= */
.final{ background:var(--sand); text-align:center; }
.final__in{ max-width:820px; display:flex; flex-direction:column; align-items:center; }
.final .eyebrow{ justify-content:center; }
.final h2{ font-size:clamp(32px,5.4vw,58px); margin-bottom:var(--s8); }
.final .btn--light{ --btn-bg:var(--ink); --btn-fg:var(--cream); --btn-bd:var(--ink); }
.final .btn--light:hover{ --btn-bg:var(--ink-deep); --btn-bd:var(--ink-deep); }
.final__micro{ margin-top:var(--s5); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* =========================================================
   RODAPÉ
   ========================================================= */
.foot{ background:var(--ink); color:#C9B49B; padding-block:var(--s12) var(--s10); position:relative; z-index:2; }
.foot__in{ display:grid; grid-template-columns:1.1fr 1fr 1.1fr; gap:var(--s8); align-items:start; }
.foot__brand{ display:flex; align-items:center; gap:var(--s4); }
.foot__brand .brand__mark{ background:var(--gold); color:var(--ink-deep); }
.foot__brand > div b{ display:block; font-size:14px; color:var(--cream); letter-spacing:.04em; }
.foot__brand > div span{ display:block; font-family:var(--serif); font-style:italic; font-size:15px; }
.foot__nav{ display:grid; gap:var(--s3); }
.foot__nav a{ font-size:13.5px; text-decoration:none; color:#C9B49B; width:fit-content; border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease); }
.foot__nav a:hover{ color:var(--cream); border-bottom-color:var(--gold); }
.foot__legal p{ font-size:12px; line-height:1.9; }
.foot__cr{ margin-top:var(--s4) !important; color:#AE9985; }
.foot__imp{ margin-top:var(--s2) !important; }
.foot__imp a{ color:var(--gold-lt); text-decoration:none; border-bottom:1px solid rgba(199,154,92,.55); }
.foot__imp a:hover{ color:var(--cream); }

/* =========================================================
   DOCK MOBILE
   ========================================================= */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:110;
  display:none; gap:var(--s3); align-items:center;
  padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background:rgba(251,246,240,.94);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.dock.is-on{ transform:none; }
.dock__cta{
  flex:1; display:flex; align-items:center; justify-content:center; min-height:52px;
  background:var(--ink); color:var(--cream); border-radius:var(--r-md);
  font-size:14px; font-weight:600; letter-spacing:.03em; text-decoration:none;
}
.dock__ig{
  width:52px; height:52px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--r-md); color:var(--ink); background:var(--white);
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1080px){
  .quotes__grid{ columns:2; }
  .steps__list{ grid-template-columns:repeat(2,1fr); gap:var(--s8) var(--s6); }
}

@media (max-width:900px){
  body{ font-size:16px; }
  .nav__links{
    position:fixed; inset:0 0 auto; top:0; padding:96px var(--s6) var(--s8);
    background:var(--cream); flex-direction:column; gap:var(--s5);
    transform:translateY(-102%); transition:transform .45s var(--ease);
    box-shadow:0 20px 40px -30px rgba(65,30,6,.6); z-index:-1;
  }
  .nav__links.is-open{ transform:none; }
  .nav__links a{ font-size:19px; font-family:var(--serif); color:var(--ink); }
  .nav__cta{ display:none; }
  .burger{ display:block; }

  .hero__in{ grid-template-columns:1fr; }
  .hero__media{ order:-1; }
  .hero__media picture{ border-radius:160px 160px var(--r-lg) var(--r-lg); }
  .hero__media img{ aspect-ratio:1/1; }
  .hero__badge{ left:var(--s4); right:auto; bottom:var(--s4); padding:var(--s3) var(--s4); }
  .hero h1{ font-size:clamp(34px,8.4vw,50px); }

  .stats__in{ grid-template-columns:repeat(2,1fr); gap:var(--s8) 0; padding-block:var(--s8); }
  .stat:nth-child(2n){ border-right:0; }

  .pain__list{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .about__in{ grid-template-columns:1fr; }
  .about__media{ max-width:420px; }
  .plans__grid{ grid-template-columns:1fr; }
  .plan__for{ min-height:0; }
  .quotes__grid{ columns:1; }
  .foot__in{ grid-template-columns:1fr; gap:var(--s6); }
  .dock{ display:flex; }
  body{ padding-bottom:0; }
}

@media (max-width:560px){
  .container{ width:min(92vw, var(--container)); }
  .plan{ padding:var(--s10) var(--s5) var(--s6); }
  .pain__list li{ padding:var(--s6) var(--s5); }
  .hero__cta .btn{ width:100%; }
  .steps__list{ grid-template-columns:1fr; gap:var(--s6); }
  .brand__txt b{ font-size:12px; }
}

/* impressão */
@media print{
  .nav,.dock,.progress,.grain{ display:none !important; }
  body{ background:#fff; }
}


/* =========================================================
   CAMADA VISUAL
   Reusa os mesmos tokens do resto da página: o arco do hero,
   a proporção 4:5, o split do container e o cartão sobreposto.
   ========================================================= */

/* --- ícones dos cards de metodologia --- */
.card__icon{ display:block; color:var(--gold); margin-bottom:var(--s5); }
.card__icon svg{ display:block; }
.card:hover .card__icon{ color:var(--gold-ink); }

/* --- O PONTO DE VIRADA: fecha a seção de dor, no idioma do hero --- */
.turn{
  margin-top:clamp(56px,8vw,var(--s12));
  display:grid; grid-template-columns:1fr .78fr;
  gap:clamp(32px,6vw,88px); align-items:center;
}
.turn__text{
  font-family:var(--serif); font-size:clamp(24px,3.2vw,38px);
  line-height:1.3; color:var(--ink); max-width:22ch; text-wrap:balance;
}
.turn__text i{ font-style:italic; color:var(--gold-ink); }

.turn__media{ margin:0; position:relative; }
/* mesmo arco do hero */
.turn__media picture{
  display:block; overflow:hidden;
  border-radius:200px 200px var(--r-lg) var(--r-lg);
  border:1px solid var(--line);
}
/* mesma proporção das outras duas fotos da página */
.turn__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }

/* mesmo cartão sobreposto do hero */
.turn__cap{
  position:absolute; left:-8px; bottom:26px;
  background:var(--cream); border:1px solid var(--line); border-left:3px solid var(--gold);
  padding:var(--s4) var(--s5); border-radius:var(--r-md);
  box-shadow:0 18px 40px -26px rgba(65,30,6,.5);
  display:flex; flex-direction:column; gap:2px; max-width:230px;
}
.turn__cap b{ font-family:var(--serif); font-style:italic; font-size:20px; font-weight:400; }
.turn__cap span{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); line-height:1.5;
}

@media (max-width:900px){
  .turn{ grid-template-columns:1fr; gap:var(--s8); }
  .turn__media{ order:-1; max-width:420px; }
  .turn__media picture{ border-radius:160px 160px var(--r-lg) var(--r-lg); }
  .turn__cap{ left:var(--s4); right:auto; bottom:var(--s4); max-width:none; }
  .turn__text{ max-width:none; }
}


/* =========================================================
   CAMADA UAU — "A noite inteira"
   A página é uma noite que passa: abre no escuro morno da
   madrugada e amanhece exatamente quando a oferta aparece.
   ========================================================= */

body{ background:var(--night); }

/* ---------- 1. AS SEÇÕES DA NOITE ---------- */
.hero, .stats, .pain{ background:var(--night); color:var(--night-txt); }
.pain{ background:var(--night-2); }

.hero h1, .pain h2, .stat__num, .turn__text{ color:var(--dawn); }
.hero .lede, .pain__list p, .turn__text{ color:var(--night-txt); }
.eyebrow--on-night, .pain .eyebrow{ color:var(--gold-lt); }
.eyebrow--on-night::before, .pain .eyebrow::before{ background:var(--gold-lt); }

.stats__in{ border-color:var(--night-line); }
.stat{ border-right-color:var(--night-line); }
.stat__lbl{ color:#A8937C; }

.pain__list{ background:var(--night-line); border-color:var(--night-line); }
.pain__list li{ background:var(--night-2); }
.pain__list span{ color:var(--gold-lt); }
.pain__list i{ color:var(--dawn); }
.turn__text i{ color:var(--gold-lt); }

/* botão fantasma sobre a noite */
.hero .btn--ghost{ --btn-fg:var(--dawn); --btn-bd:rgba(233,220,203,.4); }
.hero .btn--ghost:hover{ --btn-bg:var(--dawn); --btn-fg:var(--night); --btn-bd:var(--dawn); }
.hero .btn:not(.btn--ghost){ --btn-bg:var(--gold); --btn-fg:#1A0C02; --btn-bd:var(--gold); }
.hero .btn:not(.btn--ghost):hover{ --btn-bg:#C79A5C; --btn-bd:#C79A5C; }
.hero__micro{ color:#A8937C; }
.hero__micro i{ color:var(--gold); }

/* ---------- 2. NAV SOBRE A NOITE ---------- */
.nav:not(.is-stuck) .brand__txt b{ color:var(--dawn); }
.nav:not(.is-stuck) .brand__txt i{ color:#A8937C; }
.nav:not(.is-stuck) .brand__mark{ background:var(--gold); color:#1A0C02; }
.nav:not(.is-stuck) .nav__links a{ color:#C4B29C; }
.nav:not(.is-stuck) .nav__links a:hover{ color:var(--dawn); }
.nav:not(.is-stuck) .nav__cta{ --btn-bg:var(--gold); --btn-fg:#1A0C02; --btn-bd:var(--gold); }
.nav:not(.is-stuck) .burger span{ background:var(--dawn); }

/* ---------- 3. TIPOGRAFIA COLOSSAL ---------- */
/* headline em largura total: é o que permite o tamanho colossal */
.hero h1{
  font-size:clamp(40px,6.9vw,96px);
  line-height:1.0; letter-spacing:-.024em;
  margin:var(--s5) 0 clamp(36px,4vw,var(--s10));
}
.hero__in{ grid-template-columns:1fr .58fr; align-items:start; }
.hero__media{ margin-top:calc(var(--s6) * -1); }

/* ---------- 4. REVEAL EM MÁSCARA (as linhas do título) ---------- */
.lines .ln{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; }
.lines .ln > span{
  display:block;
  transform:translateY(112%);
  transition:transform 1.05s var(--ease-cine);
}
.ready .lines .ln > span{ transform:translateY(0); }
.ready .lines .ln:nth-child(2) > span{ transition-delay:.09s; }
.ready .lines .ln:nth-child(3) > span{ transition-delay:.18s; }
.no-js .lines .ln > span{ transform:none; }

/* ---------- 5. CLIP-REVEAL DE IMAGENS ---------- */
.clip picture{ clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--ease-rev); }
.clip.is-in picture{ clip-path:inset(0 0 0 0); }
.no-js .clip picture{ clip-path:none; }

/* ---------- 6. NUMERAÇÃO DE SEÇÃO (mono técnica) ---------- */
.eyebrow em{
  font-family:var(--mono); font-style:normal;
  font-size:10px; letter-spacing:.08em;
  opacity:.62; margin-right:var(--s2);
}

/* ---------- 7. PROFUNDIDADE: parallax + ken burns ---------- */
.hero__media{ will-change:transform; }
.hero__media img{ animation-duration:30s; }

/* vinheta sobre a foto do hero, para o creme do título respirar */
.hero__media picture{ position:relative; }
.hero__media picture::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 120px 24px rgba(21,10,2,.42);
}

/* ---------- 8. O AMANHECER: da metodologia em diante ---------- */
.method{ background:var(--sand); }
.plans{ background:var(--cream); }
.final{ background:var(--dawn); }

/* ---------- 9. WORDMARK SANGRADO NO RODAPÉ ---------- */
.foot{ background:var(--night); overflow:hidden; }
.wordmark{
  display:block; margin:var(--s12) 0 calc(var(--s10) * -.55);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(64px,15.5vw,232px); line-height:.8;
  letter-spacing:-.03em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(233,220,203,.19);
  user-select:none; pointer-events:none;
}

/* ---------- 10. CURSOR CINEMATOGRÁFICO (só ponteiro fino) ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:9000; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:1px solid rgba(176,131,71,.85);
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease),
             background .3s var(--ease), opacity .3s var(--ease);
  opacity:0;
}
.cursor.on{ opacity:1; }
.cursor.grow{
  width:64px; height:64px; margin:-32px 0 0 -32px;
  background:rgba(176,131,71,.14);
}
@media (pointer:coarse), (max-width:900px){ .cursor{ display:none !important; } }

/* ---------- respeito ao reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .lines .ln > span{ transform:none !important; transition:none !important; }
  .clip picture{ clip-path:none !important; transition:none !important; }
  .hero__media img{ animation:none !important; }
  .hero__media{ transform:none !important; }
  .cursor{ display:none !important; }
}

/* ---------- mobile: mantém o impacto ---------- */
@media (max-width:900px){
  .hero__in{ grid-template-columns:1fr; }
  .hero h1{ font-size:clamp(34px,9vw,56px); line-height:1.05; margin:var(--s3) 0 var(--s5); }
  .hero{ padding-top:clamp(108px,27vw,124px); }
  .hero__media{ margin-top:0; }
  .hero__media img{ aspect-ratio:5/4; object-position:50% 32%; }
  .hero__cta{ margin-top:var(--s5); }
  .hero .lede{ font-size:15.5px; }
  .wordmark{ margin-bottom:calc(var(--s8) * -.5); }
  .pain__list li{ background:var(--night-2); }
}


/* ---------- correções do arco: nenhuma seção herda o fundo do body ---------- */
.method, .steps, .quotes, .faq{ background:var(--cream); color:var(--ink); }
.about{ background:var(--sand); color:var(--ink); }
.method{ background:var(--sand); }
.plans{ background:var(--cream); color:var(--ink); }
.final{ background:var(--dawn); color:var(--ink); }

/* cartões creme sobre a noite precisam declarar a própria cor de texto */
.hero__badge, .turn__cap{ color:var(--ink); }
.hero__badge b, .turn__cap b{ color:var(--ink); }
.hero__badge span, .turn__cap span{ color:var(--muted); }

/* numeração mono: cor sólida em vez de opacidade (opacidade derruba o contraste) */
.eyebrow em{ opacity:1; color:var(--gold-ink); }
.eyebrow--on-night em, .pain .eyebrow em, .warranty .eyebrow em{ color:var(--gold-lt); }


/* =========================================================
   MARCA REAL + 3 VARIAÇÕES DE HERO
   Paleta e logo extraídas do lockup oficial "a rotina ideal".
   Variação escolhida por ?v=1|2|3 (classe no <body>).
   ========================================================= */

/* ---------- logo ---------- */
.brand{ gap:var(--s4); }
.brand__logo{ width:126px; height:auto; display:block; }
.brand__who{
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  padding-left:var(--s4); border-left:1px solid var(--line); line-height:1.4;
}
.nav:not(.is-stuck) .brand__who{ color:#B9A895; border-left-color:var(--night-line); }
.foot__logo{ width:172px; height:auto; }
.foot__brand{ align-items:center; gap:var(--s5); }

/* ---------- camadas de fundo do hero ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; }
.hero__glow{ position:absolute; inset:0; z-index:-2; pointer-events:none; }
.hero__motifs{
  position:absolute; inset:0; z-index:-1; width:100%; height:100%;
  pointer-events:none; opacity:0; transition:opacity .8s var(--ease);
}

/* =========================================================
   V1 — "NOITE"  (serifada, escuro, luz de abajur)
   ========================================================= */
.v1 .hero{ background:var(--night); }
.v1 .hero__glow{
  background:
    radial-gradient(58% 46% at 78% 16%, rgba(189,148,119,.30) 0%, rgba(189,148,119,.10) 42%, transparent 72%),
    radial-gradient(70% 60% at 12% 96%, rgba(145,155,166,.16) 0%, transparent 66%),
    linear-gradient(168deg, #241811 0%, #1B120B 48%, #140D08 100%);
}
.v1 .hero__motifs{ color:var(--terra); opacity:.5; }
.v1 .hero h1{ font-family:var(--serif); color:var(--dawn); }
.v1 .hero h1 i{ color:var(--terra); }

/* =========================================================
   V2 — "AMANHECER"  (arredondada, claro, é de dia)
   ========================================================= */
.v2 .hero{ background:var(--dawn); color:var(--ink); }
.v2 .hero__glow{
  background:
    radial-gradient(52% 44% at 82% 10%, rgba(189,148,119,.34) 0%, rgba(189,148,119,.12) 45%, transparent 74%),
    radial-gradient(60% 50% at 6% 90%, rgba(145,155,166,.20) 0%, transparent 68%),
    linear-gradient(170deg, #FCF7F1 0%, #F5EDE3 55%, #EFE4D7 100%);
}
.v2 .hero__motifs{ color:var(--terra); opacity:.34; }
.v2 .hero h1{
  font-family:var(--round); font-weight:600; color:var(--ink);
  letter-spacing:-.018em; line-height:1.06;
  font-size:clamp(36px,6.1vw,84px);
}
.v2 .hero h1 i{ font-style:normal; color:var(--terra-ink); }
.v2 .hero .lede{ color:var(--muted); }
.v2 .eyebrow--on-night{ color:var(--terra-ink); }
.v2 .eyebrow--on-night::before{ background:var(--terra); }
.v2 .eyebrow--on-night em{ color:var(--terra-ink); }
.v2 .hero__micro{ color:var(--muted); }
.v2 .hero__micro i{ color:var(--terra); }
.v2 .hero .btn:not(.btn--ghost){ --btn-bg:var(--ink); --btn-fg:var(--dawn); --btn-bd:var(--ink); }
.v2 .hero .btn--ghost{ --btn-fg:var(--ink); --btn-bd:var(--line); }
.v2 .hero .btn--ghost:hover{ --btn-bg:var(--ink); --btn-fg:var(--dawn); }
.v2 .nav:not(.is-stuck) .brand__who{ color:var(--muted); border-left-color:var(--line); }
.v2 .nav:not(.is-stuck) .nav__links a{ color:var(--muted); }
.v2 .nav:not(.is-stuck) .nav__links a:hover{ color:var(--ink); }
.v2 .nav:not(.is-stuck) .nav__cta{ --btn-bg:var(--ink); --btn-fg:var(--dawn); --btn-bd:var(--ink); }
.v2 .nav:not(.is-stuck) .burger span{ background:var(--ink); }
.v2 .hero__media picture::after{ box-shadow:inset 0 0 90px 18px rgba(46,33,25,.16); }

/* =========================================================
   V3 — "BERÇO"  (arredondada, centrado, motivos de sono fortes)
   ========================================================= */
.v3 .hero{ background:var(--sand); color:var(--ink); text-align:center; }
.v3 .hero__glow{
  background:
    radial-gradient(46% 38% at 50% -4%, rgba(145,155,166,.26) 0%, transparent 70%),
    radial-gradient(80% 62% at 50% 104%, rgba(189,148,119,.26) 0%, transparent 68%),
    linear-gradient(180deg, #F6EFE6 0%, #F2EAE1 60%, #EDE2D5 100%);
}
.v3 .hero__motifs{ color:var(--azul); opacity:.85; }
.v3 .eyebrow{ justify-content:center; }
.v3 .hero h1{
  font-family:var(--round); font-weight:600; color:var(--ink);
  font-size:clamp(34px,5.6vw,76px); line-height:1.08; letter-spacing:-.016em;
  margin-inline:auto; max-width:20ch;
}
.v3 .hero h1 i{ font-style:normal; color:var(--azul-txt); }
.v3 .hero__in{ grid-template-columns:1fr; justify-items:center; }
.v3 .hero__copy{ max-width:62ch; }
.v3 .hero .lede{ margin-inline:auto; color:var(--muted); }
.v3 .hero__cta{ justify-content:center; }
.v3 .hero__micro{ justify-content:center; color:var(--muted); }
.v3 .hero__micro i{ color:var(--terra); }
.v3 .hero__media{ order:2; width:min(100%,880px); margin-top:var(--s10); }
.v3 .hero__media picture{ border-radius:220px 220px var(--r-lg) var(--r-lg); }
.v3 .hero__media img{ aspect-ratio:16/9; }
.v3 .hero__badge{ left:auto; right:var(--s6); bottom:var(--s6); text-align:left; }
.v3 .eyebrow--on-night{ color:var(--terra-ink); }
.v3 .eyebrow--on-night::before{ background:var(--terra); }
.v3 .eyebrow--on-night em{ color:var(--terra-ink); }
.v3 .hero .btn:not(.btn--ghost){ --btn-bg:var(--ink); --btn-fg:var(--dawn); --btn-bd:var(--ink); }
.v3 .hero .btn--ghost{ --btn-fg:var(--ink); --btn-bd:var(--line); }
.v3 .hero .btn--ghost:hover{ --btn-bg:var(--ink); --btn-fg:var(--dawn); }
.v3 .nav:not(.is-stuck) .brand__who{ color:var(--muted); border-left-color:var(--line); }
.v3 .nav:not(.is-stuck) .nav__links a{ color:var(--muted); }
.v3 .nav:not(.is-stuck) .nav__links a:hover{ color:var(--ink); }
.v3 .nav:not(.is-stuck) .nav__cta{ --btn-bg:var(--ink); --btn-fg:var(--dawn); --btn-bd:var(--ink); }
.v3 .nav:not(.is-stuck) .burger span{ background:var(--ink); }

@media (max-width:900px){
  .brand__logo{ width:104px; }
  .brand__who{ display:none; }
  .foot__logo{ width:150px; }
  .v3 .hero__media{ margin-top:var(--s8); }
  .v3 .hero__media img{ aspect-ratio:4/3; }
  .v3 .hero__badge{ right:var(--s4); bottom:var(--s4); }
}

@media (prefers-reduced-motion:reduce){ .hero__motifs{ transition:none; } }

/* ---------- correções de contraste após a troca de paleta ---------- */
.steps__n{ color:var(--terra-lg); }          /* 46px, exige 3:1 */
.pain__list span{ color:var(--terra-lg); }
.quote__ctx{ color:var(--terra-ink); }
.card__tag, .plan__tag{ color:var(--terra-ink); }
.eyebrow em{ color:var(--terra-ink); }

/* nav sobre hero claro (V2/V3) — vence a regra da camada da noite */
.v2 .nav:not(.is-stuck) .nav__links a,
.v3 .nav:not(.is-stuck) .nav__links a,
.v2 .nav:not(.is-stuck) .brand__who,
.v3 .nav:not(.is-stuck) .brand__who{ color:var(--muted); }
.v2 .nav:not(.is-stuck) .nav__links a:hover,
.v3 .nav:not(.is-stuck) .nav__links a:hover{ color:var(--ink); }
.v2 .eyebrow--on-night, .v2 .eyebrow--on-night em,
.v3 .eyebrow--on-night, .v3 .eyebrow--on-night em{ color:var(--terra-ink); }

/* o numeral sobre fundo escuro precisa vencer a regra genérica acima */
body .eyebrow--on-night em,
body .pain .eyebrow em,
body .warranty .eyebrow em{ color:var(--gold-lt); }
.v2 .eyebrow--on-night em,
.v3 .eyebrow--on-night em{ color:var(--terra-ink); }

/* ---------- "Como funciona": imagem + passos 2x2 (quebra a monotonia) ---------- */
.steps__in{
  display:grid; grid-template-columns:.68fr 1fr;
  gap:clamp(32px,5vw,72px); align-items:center;
}
.steps__media{ margin:0; }
.steps__media picture{
  display:block; overflow:hidden; border:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 180px 180px;
}
.steps__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.steps .steps__list{ grid-template-columns:repeat(2,1fr); gap:var(--s8) var(--s6); }

@media (max-width:900px){
  .steps__in{ grid-template-columns:1fr; gap:var(--s8); }
  .steps__media{ max-width:420px; }
  .steps .steps__list{ grid-template-columns:1fr; gap:var(--s6); }
}

/* mobile: a Quicksand é mais larga que a serifada — compensa para o CTA caber na dobra */
@media (max-width:900px){
  .v2 .hero h1{ font-size:clamp(30px,7.8vw,48px); line-height:1.12; margin:var(--s3) 0 var(--s5); }
  .v3 .hero h1{ font-size:clamp(30px,7.8vw,48px); line-height:1.12; }
  .hero .lede{ font-size:15px; }
}

/* o CTA final é a manhã: sol, posicionado por CSS (viewBox com slice corta) */
.final{ position:relative; isolation:isolate; overflow:hidden; }
.final__sun, .final__stars{
  position:absolute; z-index:-1; pointer-events:none; display:block; color:var(--terra);
}
.final__sun{ left:clamp(16px,6vw,110px); top:clamp(24px,7vw,82px); }
.final__stars{ right:clamp(16px,5vw,90px); top:clamp(20px,5vw,60px); color:var(--azul); }
@media (max-width:900px){
  .final__sun svg{ width:78px; height:78px; }
  .final__stars{ display:none; }
}

/* ---------- garantia: texto + imagem (metade de baixo com mais peso visual) ---------- */
.warranty__grid{
  display:grid; grid-template-columns:1fr .62fr;
  gap:clamp(32px,5vw,76px); align-items:center;
}
.warranty__media{ margin:0; }
.warranty__media picture{
  display:block; overflow:hidden;
  border-radius:200px 200px var(--r-lg) var(--r-lg);
  border:1px solid rgba(236,235,231,.18);
}
.warranty__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.warranty__in{ max-width:none; }

@media (max-width:900px){
  .warranty__grid{ grid-template-columns:1fr; gap:var(--s8); }
  .warranty__media{ max-width:400px; }
  .warranty__media picture{ border-radius:160px 160px var(--r-lg) var(--r-lg); }
}

/* ---------- o motivo segue a luz da seção ----------
   noite -> lua + estrelas | dia -> sol. O CTA final é sempre a manhã. */
.m-sun{ display:none; }
.v2 .m-moon, .v3 .m-moon{ display:none; }
.v2 .m-sun,  .v3 .m-sun { display:block; }
.v2 .m-stars,.v3 .m-stars{ display:none; }   /* estrela de dia não existe */


/* itálico de destaque sobre fundo escuro precisa do dourado claro,
   não do --gold-ink (que foi calibrado para fundos claros) */
body .pain h2 i, body .warranty h2 i, body .hero h1 i,
body .pain h3 i, body .turn__text i{ color:var(--gold-lt); }
.v2 .hero h1 i, .v3 .hero h1 i{ color:var(--terra-ink); }
.v3 .hero h1 i{ color:var(--azul-txt); }
.v2 .pain h2 i, .v3 .pain h2 i{ color:var(--gold-lt); }

/* =========================================================
   HERO: imagem alinhada ao topo, dentro da primeira tela
   O chefe pediu "sobe um pouquinho" — antes a foto começava
   depois do título e ficava 27% a 51% fora da dobra.
   ========================================================= */
.hero__in{ grid-template-columns:1fr .60fr; align-items:start; }
.hero__media{ margin-top:0; }

/* título volta para dentro da coluna: menor, mas a foto entra na tela */
.hero h1{
  font-size:clamp(38px,5.4vw,76px);
  line-height:1.02; letter-spacing:-.02em;
  margin:var(--s5) 0 var(--s6);
}
.v2 .hero h1{ font-size:clamp(34px,4.8vw,66px); line-height:1.08; }
.v3 .hero h1{ font-size:clamp(32px,4.6vw,62px); line-height:1.1; }

/* V3 é centrado: comprime o vertical para a foto aparecer na dobra */
.v3 .hero{ padding-top:clamp(120px,12vw,150px); }
.v3 .hero h1{ margin:var(--s4) auto var(--s5); }
.v3 .hero__media{ margin-top:var(--s6); width:min(100%,780px); }
.v3 .hero__media img{ aspect-ratio:2/1; }
.v3 .hero .lede{ margin-bottom:var(--s5); }
.v3 .hero__cta{ margin-top:var(--s5); }
.v3 .hero__micro{ margin-top:var(--s4); }

@media (max-width:900px){
  .hero__in{ grid-template-columns:1fr; }
  .v3 .hero__media img{ aspect-ratio:4/3; }
}

/* V3: composição centrada — comprime o vertical até a faixa entrar na dobra */
.v3 .hero{ padding-top:clamp(112px,11vw,132px); padding-bottom:clamp(40px,5vw,64px); }
.v3 .hero h1{ font-size:clamp(30px,3.9vw,52px); line-height:1.12; margin:var(--s3) auto var(--s4); }
.v3 .hero .lede{ font-size:16px; margin-bottom:var(--s4); }
.v3 .hero__cta{ margin-top:var(--s4); }
.v3 .hero__micro{ margin-top:var(--s3); }
.v3 .hero__media{ margin-top:var(--s5); width:min(100%,840px); }
.v3 .hero__media img{ aspect-ratio:2.6/1; }
.v3 .hero__media picture{ border-radius:140px 140px var(--r-lg) var(--r-lg); }
.v3 .hero__badge{ right:var(--s5); bottom:var(--s5); }
.v3 .hero{ padding-top:clamp(104px,10vw,116px); }
.v3 .hero .lede{ max-width:54ch; }
.v3 .hero__media{ margin-top:var(--s4); }

/* Calibragem: título em 3 linhas dentro da coluna estreita.
   Coluna ~750px; Cormorant ~0.42em/char, Quicksand ~0.52em/char.
   24 caracteres na maior linha -> serifada <=74px, arredondada <=60px. */
.hero h1{ font-size:clamp(36px,4.6vw,64px); margin:var(--s4) 0 var(--s5); }
.v2 .hero h1{ font-size:clamp(31px,3.9vw,54px); line-height:1.1; }
.hero .lede{ max-width:46ch; }
.hero__cta{ margin-top:var(--s6); }
.hero{ padding-top:clamp(124px,12vw,156px); }

@media (max-width:900px){
  .hero{ padding-top:clamp(104px,25vw,118px); }
  .hero h1{ font-size:clamp(31px,8.2vw,46px); line-height:1.08; margin:var(--s3) 0 var(--s4); }
  .v2 .hero h1{ font-size:clamp(28px,7.4vw,42px); }
  .hero .lede{ font-size:14.5px; max-width:none; }
  .hero__cta{ margin-top:var(--s4); }
}

/* =========================================================
   MOTIVOS DO HERO posicionados por CSS
   viewBox + slice reescalava e jogava lua/sol atrás da nav
   no desktop e para fora da tela no celular.
   ========================================================= */
.hero__moon, .hero__sun, .hero__zz, .hero__stars{
  position:absolute; z-index:-1; pointer-events:none; display:block; color:var(--terra);
}
.hero__sun{ display:none; }
.v2 .hero__moon, .v3 .hero__moon{ display:none; }
.v2 .hero__sun,  .v3 .hero__sun { display:block; }
.v2 .hero__stars,.v3 .hero__stars{ display:none; }
.v3 .hero__sun{ color:var(--azul); }

/* Na margem, onde há folga real: a coluna direita é toda da foto
   (o motivo ficava 57% a 84% escondido atrás dela). */
.hero__moon, .hero__sun{ left:clamp(6px,1.2vw,20px); top:clamp(150px,20vw,236px); }
.hero__zz{ left:clamp(10px,2vw,34px); top:clamp(96px,13vw,150px); }
.hero__stars{ right:clamp(4px,1vw,16px); top:clamp(420px,48vw,520px); }

@media (max-width:900px){
  .hero__moon svg, .hero__sun svg{ width:76px; height:76px; }
  .hero__zz svg{ width:46px; height:46px; }
  .hero__moon, .hero__sun{ left:auto; right:10px; top:112px; }
  .hero__zz{ left:auto; right:86px; top:86px; }
  .hero__stars{ display:none; }
}

/* O motivo mora no canto do arco: aquele recorte é vazio por causa do
   raio de 200px, e assim ele acompanha a foto em qualquer breakpoint. */
.hero__media{ position:relative; overflow:visible; }
.hero__media .hero__moon,
.hero__media .hero__sun{
  position:absolute; left:auto; right:-14px; top:-18px; z-index:2;
}
.hero__media .hero__zz{
  position:absolute; left:auto; right:78px; top:-44px; z-index:2;
}
.hero__media .hero__moon svg,
.hero__media .hero__sun svg{ width:104px; height:104px; }
.hero__media .hero__zz svg{ width:58px; height:58px; }

@media (max-width:900px){
  .hero__media .hero__moon, .hero__media .hero__sun{ right:-8px; top:2px; }
  .hero__media .hero__moon svg, .hero__media .hero__sun svg{ width:76px; height:76px; }
  .hero__media .hero__zz{ right:58px; top:-26px; }
  .hero__media .hero__zz svg{ width:44px; height:44px; }
}
/* sobre a noite o traço precisa de mais corpo para ler */
.v1 .hero__media .hero__moon{ color:var(--gold-lt); }
.v1 .hero__media .hero__moon svg{ opacity:1.15; }
.v1 .hero__media .hero__zz{ color:var(--gold-lt); }