/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --marrom:#442309;
  --escuro:#2C1A0E;
  --dourado:#D9A05B;
  --creme:#F5F1E1;

  --ff-display:'Anton',Impact,sans-serif;
  --ff-body:'Poppins',system-ui,-apple-system,sans-serif;

  --fs-eyebrow:.72rem;
  --fs-corpo:1.02rem;
  --fs-corpo-s:.92rem;
  --fs-h2:clamp(1.8rem,4vw,3rem);
  --fs-h1:clamp(2.4rem,6vw,4.6rem);
  --fs-quote:clamp(1.6rem,4.4vw,3.4rem);
  --ls-eyebrow:.24em;

  --gap-secao:clamp(5.5rem,12vh,10rem);
  --gap-secao-quote:clamp(6.5rem,15vh,12rem);
  --pad-lateral:clamp(1.5rem,6vw,5.5rem);
  --largura:1180px;
  --largura-texto:62ch;
}

.t-escuro{
  --bg:var(--escuro);--tinta:var(--creme);
  --tinta-suave:rgba(245,241,225,.72);--risco:rgba(245,241,225,.2);
  --realce:var(--dourado);--botao-bg:var(--dourado);--botao-tinta:var(--escuro);
}
.t-marrom{
  --bg:var(--marrom);--tinta:var(--creme);
  --tinta-suave:rgba(245,241,225,.76);--risco:rgba(245,241,225,.2);
  --realce:var(--dourado);--botao-bg:var(--dourado);--botao-tinta:var(--escuro);
}
.t-dourado{
  --bg:var(--dourado);--tinta:var(--escuro);
  --tinta-suave:rgba(44,26,14,.8);--risco:rgba(44,26,14,.3);
  --realce:var(--marrom);--botao-bg:var(--escuro);--botao-tinta:var(--creme);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--escuro);color:var(--creme);
  font-family:var(--ff-body);font-weight:300;font-size:var(--fs-corpo);
  line-height:1.75;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--realce,var(--dourado));outline-offset:3px}

.faixa{background:var(--bg);color:var(--tinta)}
.envelope{max-width:var(--largura);margin-inline:auto;padding-inline:var(--pad-lateral)}

.eyebrow{font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--realce)}
.titulo{font-family:var(--ff-display);font-weight:400;font-size:var(--fs-h2);line-height:1.04;text-transform:uppercase}
.corpo{max-width:var(--largura-texto)}
.corpo p + p{margin-top:1.15rem}

.botao{display:inline-block;background:var(--botao-bg);color:var(--botao-tinta);text-decoration:none;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:1rem 2rem;transition:opacity .2s ease}
.botao:hover{opacity:.86}
.link-texto{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--tinta);border-bottom:1px solid var(--realce);padding-bottom:.25rem;transition:border-color .2s ease}
.link-texto:hover{border-bottom-color:var(--tinta)}
.retrato{aspect-ratio:3/4;width:100%;object-fit:cover;background:rgba(0,0,0,.2);filter:saturate(.94)}

/* ============================================================
   NAVEGACAO
   ============================================================ */
.nav{position:fixed;inset:0 0 auto 0;z-index:80;background:var(--escuro);border-bottom:1px solid rgba(245,241,225,.16)}
.nav__interior{max-width:var(--largura);margin-inline:auto;padding:1rem var(--pad-lateral);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.nav__nome{font-family:var(--ff-display);font-size:1.05rem;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;color:var(--dourado)}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,2.6vw,2.4rem);list-style:none}
.nav__links a{font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:rgba(245,241,225,.75);padding-block:.35rem;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.nav__links a:hover{color:var(--creme);border-bottom-color:var(--dourado)}
.nav :focus-visible{outline-color:var(--dourado)}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:clamp(7.5rem,16vh,11rem);padding-bottom:var(--gap-secao)}
.hero__grade{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,6vw,5rem);align-items:end}
.hero__titulo{font-family:var(--ff-display);font-weight:400;font-size:var(--fs-h1);line-height:1;text-transform:uppercase;margin:1.3rem 0 1.6rem;max-width:15ch}
.hero__texto{max-width:46ch;margin-bottom:2.2rem;color:var(--tinta-suave)}
.hero__acoes{display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap}

/* ============================================================
   TRIO - blocos curtos empilhados
   ============================================================ */
.trio{padding-block:var(--gap-secao)}
.bloco{
  display:grid;grid-template-columns:.5fr 1fr auto;
  gap:clamp(1.2rem,4vw,3.5rem);align-items:start;
  border-top:1px solid var(--risco);padding-block:clamp(2rem,4vh,3rem);
}
.bloco:last-of-type{border-bottom:1px solid var(--risco)}
.bloco__titulo{font-family:var(--ff-display);font-weight:400;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.05;text-transform:uppercase}
.bloco__texto{font-size:var(--fs-corpo-s);max-width:54ch;color:var(--tinta-suave)}
.bloco__link{white-space:nowrap}

/* ============================================================
   CITACOES
   ============================================================ */
.citacao{padding-block:var(--gap-secao-quote);text-align:center}
.citacao__frase{font-family:var(--ff-display);font-weight:400;font-size:var(--fs-quote);line-height:1.12;text-transform:uppercase;max-width:19ch;margin-inline:auto}
.citacao__autoria{margin-top:2.2rem;font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--tinta-suave)}

/* ============================================================
   BLOCOS COM IMAGEM AO LADO
   ============================================================ */
.dupla{padding-block:var(--gap-secao)}
.dupla__grade{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.dupla--invertida .dupla__grade{grid-template-columns:1.1fr .9fr}
.dupla--invertida .dupla__imagem{order:2}
.dupla__titulo{margin:1rem 0 1.4rem}
.dupla__texto{color:var(--tinta-suave);margin-bottom:2rem}

.oferta{display:grid;grid-template-columns:auto 1fr;gap:1.2rem 1.6rem;align-items:baseline;border-top:1px solid var(--risco);padding-block:1.5rem}
.oferta:last-of-type{border-bottom:1px solid var(--risco);margin-bottom:2rem}
.oferta__num{font-family:var(--ff-display);font-size:1.1rem;color:var(--realce);line-height:1.4}
.oferta__nome{font-family:var(--ff-body);font-weight:700;font-size:1rem;margin-bottom:.35rem}
.oferta__texto{font-size:var(--fs-corpo-s);color:var(--tinta-suave);max-width:52ch}

/* ============================================================
   CHAMADA FINAL
   ============================================================ */
.chamada{padding-block:var(--gap-secao);text-align:center}
.chamada__titulo{font-family:var(--ff-display);font-weight:400;font-size:clamp(2.2rem,5.5vw,4rem);line-height:1.04;text-transform:uppercase;max-width:16ch;margin:0 auto 1.5rem}
.chamada__texto{max-width:48ch;margin:0 auto 2.6rem;color:var(--tinta-suave)}

/* ============================================================
   RODAPE
   ============================================================ */
.rodape{padding-block:2.2rem;border-top:1px solid rgba(245,241,225,.16);font-size:.78rem;letter-spacing:.06em;color:rgba(245,241,225,.6);background:var(--escuro)}

/* ============================================================
   ENTRADA AO ROLAR
   ============================================================ */
.entra{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.entra.visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .entra{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:880px){
  .hero__grade,.dupla__grade,.dupla--invertida .dupla__grade{grid-template-columns:1fr}
  .dupla--invertida .dupla__imagem{order:0}
  .retrato{max-width:420px}
  .bloco{grid-template-columns:1fr;row-gap:.9rem}
  .bloco__link{justify-self:start}
}
@media (max-width:560px){
  .nav__interior{flex-direction:column;align-items:flex-start;gap:.7rem}
  .nav__links{flex-wrap:wrap;gap:.9rem 1.2rem}
  .hero{padding-top:clamp(9.5rem,22vh,12rem)}
  .botao{width:100%;text-align:center}
  .oferta{grid-template-columns:1fr;gap:.5rem}
}