:root{
  --bg:#f4f1eb;
  --ink:#3a1f0f;
  --ink-body:#542c16;
  --ink-mid:#816341;
  --ink-soft:#a58666;
  --ink-dark:#2a160a;    /* mais escuro para o lado esquerdo do hero */
  --accent:#c19e8b;
  --accent-soft:#e7d9cc;
  --wa:#25D366;          /* verde WhatsApp oficial */
  --wa-dark:#128C7E;
  --hairline:rgba(58,31,15,.16);
  --hairline-strong:rgba(58,31,15,.28);
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --font-sans:"Inter",system-ui,sans-serif;
  --font-serif:"Fraunces",Georgia,serif;
  --easing:cubic-bezier(.2,.6,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink-body);
  font-family:var(--font-sans);
  font-size:16.5px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{background:none;border:0;font:inherit;color:inherit;cursor:pointer}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
ul{list-style:none}

/* ============ HEADER ============ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding-block:1.05rem;
  transition:background .35s var(--easing), backdrop-filter .35s var(--easing), border-color .35s var(--easing);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:color-mix(in oklab, var(--bg) 90%, transparent);
  backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom-color:var(--hairline);
}
.site-header .inner{
  max-width:1400px;margin:0 auto;
  padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.brand{
  font-family:var(--font-serif);
  font-weight:400;
  font-variation-settings:"opsz" 24;
  font-size:1.05rem;
  color:#f4f1eb;
  letter-spacing:-0.01em;
  transition:color .35s var(--easing);
}
.brand em{font-style:italic;font-weight:340;color:rgba(244,241,235,.75);transition:color .35s var(--easing)}
.site-header.scrolled .brand{color:var(--ink)}
.site-header.scrolled .brand em{color:var(--ink-mid)}
.nav{display:flex;gap:1.85rem;font-size:.87rem;color:rgba(244,241,235,.85);transition:color .35s var(--easing)}
.site-header.scrolled .nav{color:var(--ink-mid)}
.nav a{transition:color .2s}
.nav a:hover{color:#fff}
.site-header.scrolled .nav a:hover{color:var(--ink)}
.nav-toggle{display:none;padding:.5rem;color:#f4f1eb;transition:color .35s}
.site-header.scrolled .nav-toggle{color:var(--ink)}
.nav-toggle span{display:block;width:22px;height:1px;background:currentColor;margin:5px 0}

section{padding-block:clamp(5rem,10vw,9rem);position:relative}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--gutter)}

.section-eyebrow{
  font-size:.78rem;color:var(--ink-mid);
  margin-bottom:1.5rem;font-style:italic;
  font-family:var(--font-serif);font-weight:400;
}
.section-h{
  font-family:var(--font-serif);font-weight:340;
  font-variation-settings:"opsz" 96, "SOFT" 80;
  font-size:clamp(2rem,4.6vw,3.1rem);
  line-height:1.06;letter-spacing:-0.025em;
  color:var(--ink);margin-bottom:2rem;max-width:28rem;
}

/* ============ CTA — cor da marca + ícone + hover discreto ============ */
.cta{
  display:inline-flex;align-items:center;gap:.65rem;
  padding:.95rem 1.6rem;
  background:var(--ink);color:var(--bg);
  font-family:var(--font-sans);
  font-weight:500;font-size:.94rem;
  border-radius:999px;
  transition:background .25s var(--easing),
             transform .25s var(--easing),
             box-shadow .3s var(--easing);
  box-shadow:0 0 0 rgba(58,31,15,0);
}
.cta:hover{
  background:var(--ink-body);
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(58,31,15,.18);
}
.cta:active{transform:translateY(0);box-shadow:0 3px 8px rgba(58,31,15,.15)}
.cta .wa-icon{
  width:18px;height:18px;
  display:inline-block;
  fill:currentColor;
  flex-shrink:0;
  transition:transform .25s var(--easing);
}
.cta:hover .wa-icon{transform:scale(1.08)}

/* Variante clara para uso sobre fundo escuro (Hero) */
.cta.light{
  background:var(--bg);
  color:var(--ink);
}
.cta.light:hover{
  background:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}
.cta.light:active{box-shadow:0 3px 8px rgba(0,0,0,.2)}

/* ============ HERO — split screen ============ */
.hero{
  padding:0;
  height:100vh;
  min-height:640px;
  max-height:1000px;
  position:relative;
  overflow:hidden;
  background:var(--ink-dark);
}
.hero-photo-side{
  position:absolute;
  right:0;top:0;bottom:0;
  width:58%;
  background-image:url("img/hero.webp");
  background-size:cover;
  background-position:center 30%;
  filter:saturate(.95) contrast(.98);
}
/* Gradiente que funde a foto com o fundo escuro à esquerda */
.hero-photo-side::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    var(--ink-dark) 0%,
    rgba(42,22,10,.85) 12%,
    rgba(42,22,10,.4) 30%,
    rgba(42,22,10,0) 55%);
}
/* Sombra suave em cima e embaixo para dar profundidade */
.hero-photo-side::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(42,22,10,.35) 0%,
    rgba(42,22,10,0) 20%,
    rgba(42,22,10,0) 75%,
    rgba(42,22,10,.4) 100%);
  pointer-events:none;
}
.hero-inner{
  position:relative;z-index:2;
  max-width:1400px;margin:0 auto;
  padding:0 var(--gutter);
  height:100%;
  display:flex;flex-direction:column;justify-content:center;
  color:#f4f1eb;
}
.hero-meta{
  font-size:.82rem;letter-spacing:.02em;
  color:rgba(244,241,235,.85);
  margin-bottom:2rem;
  display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;
}
.hero-meta .dot{width:3px;height:3px;border-radius:50%;background:rgba(244,241,235,.55)}
.hero h1{
  font-family:var(--font-serif);
  font-weight:300;
  font-variation-settings:"opsz" 144, "SOFT" 100;
  font-size:clamp(3.5rem, 8vw, 6.8rem);
  line-height:.98;letter-spacing:-0.03em;
  color:#f4f1eb;
  margin-bottom:2rem;
  max-width:14ch;
}
.hero h1 .quiet{
  font-style:italic;font-weight:300;
  color:var(--accent);
  font-variation-settings:"opsz" 144, "SOFT" 100;
}
.hero-lede{
  font-size:1.1rem;line-height:1.55;max-width:32rem;
  color:rgba(244,241,235,.88);
  margin-bottom:2.5rem;
}
.scroll-hint{
  position:absolute;bottom:2rem;left:2.5rem;
  z-index:2;
  font-family:var(--font-serif);font-style:italic;font-size:.78rem;
  color:rgba(244,241,235,.55);
  display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  animation:hint 2.4s var(--easing) infinite;
}
.scroll-hint::after{
  content:"";width:1px;height:38px;
  background:linear-gradient(180deg, rgba(244,241,235,.5), transparent);
  margin-left:14px;
}
@keyframes hint{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}

/* ============ SOBRE ============ */
.sobre .grid{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(2.5rem,7vw,6rem);
  align-items:start;
}
.sobre-photo-wrap{position:relative;padding-top:2rem}
.sobre-photo{
  aspect-ratio:3/4.2;
  overflow:hidden;
  border-radius:50% 50% 8px 8px / 42% 42% 8px 8px;
  position:relative;
}
.sobre-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.sobre-photo-wrap::before{
  content:"";
  position:absolute;top:0;right:-1rem;
  width:70%;height:100%;
  border:1px solid var(--hairline-strong);
  border-radius:50% 50% 8px 8px / 42% 42% 8px 8px;
  z-index:-1;
  transform:translate(1rem, 1rem);
  pointer-events:none;
}
.sobre-copy p{margin-bottom:1.2rem;max-width:34rem}
.sobre-copy p:first-of-type{
  font-family:var(--font-serif);font-weight:340;
  font-variation-settings:"opsz" 60;
  font-size:1.35rem;line-height:1.35;letter-spacing:-0.01em;
  color:var(--ink);margin-bottom:1.8rem;
}

/* ============ PARA QUEM ============ */
.paraquem{border-top:1px solid var(--hairline)}
.paraquem .head{max-width:44rem;margin-bottom:4rem}
.paraquem .head p{
  color:var(--ink-mid);font-style:italic;
  font-family:var(--font-serif);
  font-size:1.05rem;line-height:1.5;max-width:30rem;
}
.motivos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap:2.4rem 3rem;max-width:65rem;
}
.motivo{border-top:1px solid var(--hairline);padding-top:1.4rem}
.motivo p{color:var(--ink-body);font-size:1rem;line-height:1.55;max-width:26rem}
.paraquem-tail{
  margin-top:4rem;
  font-family:var(--font-serif);font-weight:340;font-style:italic;
  font-size:1.2rem;color:var(--ink-mid);
  max-width:34rem;line-height:1.4;
  margin-bottom:2.5rem;
}
.paraquem-cta{margin-top:1rem}

/* ============ QUEBRA VISUAL ============ */
.pause{
  padding-block:clamp(4rem,8vw,7rem);
  background:linear-gradient(180deg, transparent 0%, var(--accent-soft) 40%, var(--accent-soft) 60%, transparent 100%);
  text-align:center;
}
.pause blockquote{
  font-family:var(--font-serif);
  font-weight:300;font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100;
  font-size:clamp(1.8rem,4.5vw,3.2rem);
  line-height:1.15;letter-spacing:-0.02em;
  color:var(--ink);
  max-width:32ch;margin:0 auto;
  padding-inline:var(--gutter);
  position:relative;
}
.pause blockquote::before{
  content:"“";
  font-family:var(--font-serif);
  font-size:clamp(6rem,14vw,10rem);
  line-height:1;
  color:var(--ink-mid);
  opacity:.35;
  position:absolute;
  top:-.4em;left:50%;transform:translateX(-50%);
  z-index:-1;
  font-style:normal;
  font-weight:400;
}

/* ============ ABORDAGEM ============ */
.abordagem .grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:start;
}
.abordagem-copy p{margin-bottom:1.2rem;max-width:36rem;color:var(--ink-body)}
.abordagem-quote{
  font-family:var(--font-serif);
  font-weight:340;font-style:italic;
  font-variation-settings:"opsz" 60;
  font-size:1.25rem;line-height:1.4;
  color:var(--ink);
  padding-left:1.2rem;
  border-left:1px solid var(--hairline-strong);
  max-width:28rem;
}

/* ============ COMO FUNCIONA ============ */
.como{border-top:1px solid var(--hairline)}
.como .grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:start;
}
.como-facts li{
  display:grid;grid-template-columns:8.5rem 1fr;gap:1.5rem;
  padding:1.15rem 0;border-bottom:1px solid var(--hairline);
  align-items:baseline;
}
.como-facts li:first-child{border-top:1px solid var(--hairline)}
.como-facts .lbl{
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  color:var(--ink-mid);font-size:.95rem;
}
.como-facts .val{color:var(--ink);font-size:1rem}
.como-cta{margin-top:2.5rem}

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--hairline)}
.faq .head{max-width:44rem;margin-bottom:3rem}
.faq-list{max-width:52rem}
.faq details{border-bottom:1px solid var(--hairline);padding:1.5rem 0}
.faq details:first-of-type{border-top:1px solid var(--hairline)}
.faq summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  font-family:var(--font-serif);font-weight:400;
  font-variation-settings:"opsz" 36;
  font-size:1.15rem;color:var(--ink);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{
  font-family:var(--font-sans);font-weight:300;
  color:var(--ink-mid);font-size:1.4rem;line-height:1;
  transition:transform .3s var(--easing);flex-shrink:0;
}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq details p{margin-top:1rem;max-width:44rem;color:var(--ink-body);line-height:1.7}

/* ============ CONTATO ============ */
.contato{
  border-top:1px solid var(--hairline);
  position:relative;overflow:hidden;
}
.contato .watermark{
  position:absolute;
  right:-.15em;bottom:-.55em;
  font-family:var(--font-serif);
  font-weight:300;font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100;
  font-size:clamp(20rem, 45vw, 45rem);
  line-height:.85;
  color:var(--ink);
  opacity:.05;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.contato .wrap{max-width:900px;position:relative;z-index:1}
.contato h2{
  font-family:var(--font-serif);font-weight:300;
  font-variation-settings:"opsz" 144, "SOFT" 100;
  font-size:clamp(2.4rem, 6vw, 4.2rem);
  line-height:1.02;letter-spacing:-0.025em;
  color:var(--ink);margin-bottom:2rem;max-width:22ch;
}
.contato h2 em{font-style:italic;color:var(--ink-mid);font-weight:300}
.contato p{max-width:34rem;margin-bottom:2.5rem;font-size:1.05rem}

/* ============ FOOTER ============ */
.footer{
  border-top:1px solid var(--hairline);
  padding-block:3rem 2.5rem;
  font-size:.85rem;color:var(--ink-mid);
}
.footer .grid{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end}
.footer .who{color:var(--ink-body);margin-bottom:.35rem;font-weight:500}
.footer .who span{color:var(--ink-mid);font-weight:400;font-style:italic;font-family:var(--font-serif)}
.footer .crp{margin-bottom:1rem}
.footer .disclaim{max-width:32rem;line-height:1.55}
.footer .right{text-align:right;font-size:.8rem}
.footer .right a{color:var(--ink-body)}

/* ============ FLOAT WhatsApp ============ */
.wa-float{
  position:fixed;
  bottom:1.5rem;right:1.5rem;
  z-index:40;
  width:56px;height:56px;
  border-radius:50%;
  background:var(--wa);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(37,211,102,.35);
  transition:transform .3s var(--easing), background .25s var(--easing), opacity .3s var(--easing);
  opacity:0;
  transform:translateY(20px) scale(.9);
  pointer-events:none;
}
.wa-float.visible{opacity:1;transform:none;pointer-events:auto}
.wa-float:hover{background:var(--wa-dark);transform:translateY(-3px) scale(1.05)}
.wa-float svg{width:26px;height:26px;fill:currentColor}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s var(--easing), transform .8s var(--easing)}
.reveal.is-visible{opacity:1;transform:none}

/* ============ MOBILE ============ */
@media (max-width: 820px){
  body{font-size:16px}
  .nav{display:none}
  .nav-toggle{display:block}
  .site-header{padding-block:.9rem}

  .hero{height:auto;min-height:100vh;padding-block:5rem 3rem}
  /* Mobile: foto vira topo, texto abaixo */
  .hero-photo-side{
    position:relative;
    width:100%;
    height:45vh;
    right:auto;
  }
  .hero-photo-side::before{
    background:linear-gradient(180deg,
      rgba(42,22,10,.15) 0%,
      rgba(42,22,10,0) 25%,
      rgba(42,22,10,0) 60%,
      var(--ink-dark) 100%);
  }
  .hero-inner{
    position:absolute;inset:0;
    justify-content:flex-end;
    padding-bottom:3rem;
    padding-top:0;
  }
  .hero h1{font-size:clamp(2.8rem, 11vw, 4.2rem)}
  .hero-lede{font-size:1.02rem}
  .scroll-hint{display:none}

  .sobre .grid,
  .abordagem .grid,
  .como .grid{grid-template-columns:1fr;gap:2.5rem}
  .sobre-photo-wrap{max-width:80%;margin-inline:auto 0}
  .sobre-photo-wrap::before{display:none}
  .sobre-copy p:first-of-type{font-size:1.2rem}

  .motivos{grid-template-columns:1fr;gap:1.8rem}
  .como-facts li{grid-template-columns:6.5rem 1fr;gap:1rem}
  .faq summary{font-size:1.02rem}

  .footer .grid{grid-template-columns:1fr}
  .footer .right{text-align:left}

  .wa-float{bottom:1rem;right:1rem;width:52px;height:52px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .scroll-hint{display:none}
}