@font-face{font-family:Jost;src:url(assets/fonts/jost-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Jost;src:url(assets/fonts/jost-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Jost;src:url(assets/fonts/jost-500.woff2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:Newsreader;src:url(assets/fonts/newsreader.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Newsreader;src:url(assets/fonts/newsreader-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --ink:#0c0c0e;--bone:#ebe5d9;--gold:#c9a15a;--gold-dk:#8b6a2c;--mute:#8d887e;
  --txt-dk:#b7b1a5;--line:rgba(235,229,217,.16);--line-dk:rgba(12,12,14,.14);
  --pad:56px;--side:260px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--bone);font-family:Jost,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.cap{text-transform:uppercase;letter-spacing:.22em;font-size:11px;font-weight:500}

/* BOTÕES */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:58px;padding:0 26px;border-radius:2px;font-weight:500;font-size:17px;letter-spacing:.01em;transition:transform .2s,background .2s}
.btn span{font-size:19px;font-weight:300;transition:transform .2s}
.btn:hover{transform:translateY(-1px)}
.btn:hover span{transform:translateX(4px)}
.btn--gold{background:var(--gold);color:#16130d}
.btn--gold:hover{background:#d4ae68}
.btn--ink{background:var(--ink);color:var(--bone)}

/* NAV */
.nav{position:fixed;inset:0 0 auto;z-index:20;height:92px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;transition:background .3s,height .3s,border-color .3s;border-bottom:1px solid transparent}
.nav--solid{background:rgba(12,12,14,.92);backdrop-filter:blur(10px);height:74px;border-color:var(--line)}
.nav__logo img{height:36px;width:auto}
.nav__links{display:flex;gap:44px;align-items:center}
.nav__links a{color:#d3cdc1;transition:color .2s}
.nav__links a:hover{color:#fff}
.nav__cta{display:inline-flex;align-items:center;height:42px;padding:0 22px;background:var(--gold);color:#16130d!important;border-radius:2px;transition:background .2s,transform .2s}
.nav__cta:hover{background:#d4ae68;transform:translateY(-1px)}
.nav__mobile{display:none}

/* 1. CAPA */
.hero{--h:max(680px,100svh);position:relative;height:var(--h);display:flex;flex-direction:column;background:#0b0a09;overflow:hidden}
/* a foto fica numa camada própria para o zoom e a paralaxe usarem transform */
.hero__bg{position:absolute;inset:0;background:url(assets/hero-wide.jpg) center bottom/auto 100% no-repeat;transform-origin:50% 100%;will-change:transform}
.hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,8,9,.55) 0,rgba(8,8,9,0) 42%),linear-gradient(0deg,rgba(8,8,9,.8) 0,rgba(8,8,9,0) 20%)}
.hero__inner{position:relative;z-index:2;text-align:center;padding:calc(var(--h)*.125) var(--pad) 0;display:flex;flex-direction:column;align-items:center}
.hero__eyebrow{color:var(--gold);letter-spacing:.32em;margin:0 0 calc(var(--h)*.024)}
.hero__title{margin:0;font-weight:300;font-size:clamp(44px,min(5.4vw,calc(var(--h)*.08)),96px);line-height:1.04;letter-spacing:-.015em;color:#f5f0e6}
.hero__title span{color:var(--gold)}
/* quebra de linha só no desktop; um <br> escondido por CSS ainda quebraria a linha no SplitText */
.hero__title .quebra{display:block}
.hero__sub{margin:calc(var(--h)*.024) 0 calc(var(--h)*.03);font-size:clamp(15px,calc(var(--h)*.018),18px);line-height:1.55;letter-spacing:.03em;color:#e1dbcf}
.hero__strip{position:relative;z-index:2;margin:auto var(--pad) 0;padding:34px 0 38px;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);color:#e1dbcf;letter-spacing:.24em;font-size:12px}
.hero__strip li{text-align:center;padding:4px 16px}
.hero__strip li+li{border-left:1px solid rgba(235,229,217,.28)}

/* rótulo lateral das seções */
.side{color:var(--gold)}
.side--dark{color:var(--gold-dk)}
.side em{display:block;margin-top:14px;font-family:Newsreader,serif;font-style:italic;font-size:20px;line-height:1.35;letter-spacing:0;text-transform:none;color:#77736a}
.side--dark em{color:var(--mute)}

/* 2. A CONTA */
.sim{background:var(--bone);color:var(--ink);padding:120px var(--pad) 110px;display:grid;grid-template-columns:var(--side) 1fr;column-gap:40px;align-content:center}
.madlib{margin:0;font-weight:300;font-size:clamp(34px,4.3vw,62px);line-height:1.3;letter-spacing:-.015em}
.field{display:inline-flex;align-items:baseline;gap:12px;border-bottom:3px solid var(--ink);padding:0 6px 2px 8px;margin:0 6px;cursor:text;transition:border-color .2s}
.field:focus-within{border-color:var(--gold-dk)}
.field input{width:2.4ch;border:0;background:none;padding:0;font:inherit;font-weight:500;color:inherit;letter-spacing:-.02em;-moz-appearance:textfield;appearance:textfield}
.field input:focus{outline:none}
.field input::-webkit-outer-spin-button,.field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field small{font-size:.29em;color:var(--mute);font-weight:400;letter-spacing:0}
.result{margin-top:80px;padding-top:36px;border-top:1px solid var(--line-dk);display:grid;grid-template-columns:auto 1fr;column-gap:64px;align-items:end}
.big{font-weight:300;font-size:clamp(96px,12.5vw,180px);line-height:.8;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.big sup{font-size:.22em;letter-spacing:-.02em;vertical-align:top;position:relative;top:.45em;margin-right:10px;font-weight:400}
.per{margin:0;font-size:17px;line-height:1.6;color:#4b4840}
.per b{color:var(--ink);font-weight:600}
.formula{margin:14px 0 28px;font-family:Newsreader,serif;font-style:italic;font-size:18px;color:var(--mute)}
.result .btn{width:320px}
.note{margin:34px 0 0;color:var(--mute);font-size:10px}

/* 3. QUEM FAZ O QUÊ */
.who{padding:130px var(--pad) 120px;display:grid;grid-template-columns:var(--side) 1fr;column-gap:40px;align-content:center}
.h2{margin:0 0 64px;font-weight:300;font-size:clamp(40px,5.3vw,76px);line-height:1.02;letter-spacing:-.015em;max-width:900px}
.h2 span+span{color:var(--mute)}
table{width:100%;border-collapse:collapse;font-size:20px}
th{text-align:left;font-weight:500;padding:0 0 18px;color:var(--txt-dk)}
th:not(:first-child),td:not(:first-child){width:180px;text-align:center}
td{padding:22px 0;border-top:1px solid var(--line);color:#d8d2c6}
tr.hi td{color:#f3eee4}
tbody tr:last-child td{border-bottom:1px solid var(--line)}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--bone)}
.dot--gold{background:var(--gold);box-shadow:0 0 0 6px rgba(201,161,90,.16)}
.dash{display:inline-block;width:14px;height:1px;background:#4a4740;vertical-align:middle}

/* 4. A PERGUNTA */
/* a seção segue a proporção da foto (1850×850) para o carro nunca ficar atrás do texto */
.band{position:relative;aspect-ratio:1850/850;display:flex;align-items:center;background:var(--bone) url(assets/pergunta.jpg) 100% 50%/cover no-repeat;color:var(--ink)}
.band__q{position:relative;padding:0 var(--pad) 3vw 4.6vw;max-width:47vw}
.band__q .cap{margin:0;color:var(--gold-dk);font-size:13px}
.band blockquote{margin:2.4vw 0 0;font-weight:300;font-size:clamp(48px,6.5vw,128px);line-height:1.02;letter-spacing:-.015em}
.band blockquote i{font-style:normal;color:var(--gold-dk)}
.band__txt{margin:2.6vw 0 0;font-size:clamp(17px,1.25vw,22px);line-height:1.6;color:#4b4840;max-width:29em}

/* 5. SOLUÇÕES */
.prod{padding:120px var(--pad);display:grid;grid-template-columns:var(--side) 1fr 1fr;column-gap:40px;align-content:center}
.pc{position:relative;padding-top:28px}
/* a linha dourada é um elemento à parte para poder "desenhar" da esquerda para a direita */
.pc:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--gold);transform:scaleX(var(--linha,1));transform-origin:0 50%}
.pc__n{margin:0;color:var(--gold)}
.pc h3{margin:26px 0 18px;font-weight:300;font-size:clamp(40px,3.8vw,54px);letter-spacing:-.015em;line-height:1}
.pc p{font-size:17px;line-height:1.6;color:var(--txt-dk);max-width:470px;margin:0}
.pc .pc__tag{margin-top:26px;color:var(--mute);font-size:11px}

/* 6. FECHAMENTO */
.final{margin:0 var(--pad);border-top:1px solid var(--line);padding:120px 0 110px;display:grid;grid-template-columns:1fr 440px;column-gap:80px;align-items:end;align-content:center}
.final h2{margin:0;font-weight:300;font-size:clamp(56px,7.2vw,104px);line-height:.98;letter-spacing:-.015em}
.final h2 span{color:var(--gold)}
.final__side p{margin:0 0 26px;font-size:17px;line-height:1.55;color:var(--txt-dk)}
.final__side .btn{width:100%;min-height:68px;padding:0 30px;font-size:18px}

.final__wa{display:block;margin-top:22px;text-align:center;color:#d3cdc1;border-bottom:1px solid var(--line);padding:8px 0 18px;font-size:14px;letter-spacing:.18em}
.final__wa:hover{color:#fff}

.footer{margin:0 var(--pad);border-top:1px solid var(--line);padding:64px 0 36px;color:var(--txt-dk);font-size:14px;line-height:1.65}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1.5fr 1fr auto;gap:40px}
.footer__brand img{height:30px;width:auto}
.footer__brand p{margin:22px 0 0;max-width:30em}
.footer__h{margin:0 0 18px;color:var(--gold)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.footer address{font-style:normal}
.footer a{transition:color .2s,border-color .2s}
.footer a:hover{color:#fff}
.footer__ico{display:flex;align-items:flex-start;gap:10px}
.footer__ico svg{flex:none;width:17px;height:17px;margin-top:3px;color:var(--gold)}
.footer__social{display:flex;gap:10px}
.footer__social a{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(201,161,90,.45);border-radius:2px;color:var(--gold)}
.footer__social a:hover{border-color:var(--gold)}
.footer__social svg{width:19px;height:19px}
/* três colunas: copyright à esquerda, assinatura no centro, aviso à direita */
.footer__base{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;gap:32px;color:#6f6b63;font-size:12px;line-height:1.6}
.footer__base p{margin:0;max-width:560px}
.footer__credito{text-align:center;white-space:nowrap}
.footer__aviso{justify-self:end;text-align:right}
.footer__credito a{color:var(--txt-dk);border-bottom:1px solid var(--line);padding-bottom:1px}
.footer__credito a:hover{border-color:var(--gold)}

/* RESPONSIVO */
/* cada seção ocupa a tela inteira no desktop */
section[id]{scroll-margin-top:0}
@media (min-width:761px){
  .sim,.who,.prod{min-height:100svh}
  .final{min-height:calc(100svh - 104px)}
}
@media (max-width:1100px){
  :root{--pad:40px;--side:1fr}
  .nav__links{gap:28px}
  .sim,.who{grid-template-columns:1fr;row-gap:40px}
  .prod{grid-template-columns:1fr 1fr;row-gap:40px}
  .prod .side{grid-column:1/-1}
  .final{grid-template-columns:1fr;row-gap:48px}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
  /* telas menores: texto em cima sobre o creme, foto inteira embaixo */
  .band{aspect-ratio:auto;display:block;background-position:100% 100%;background-size:100% auto}
  .band__q{max-width:none;padding:96px var(--pad) calc(46vw + 64px)}
  .band blockquote,.band__txt{margin-top:28px}
}
@media (max-width:760px){
  :root{--pad:20px}
  .nav{height:68px}
  .nav--solid{height:62px}
  .nav__logo img{height:28px}
  .nav__links{display:none}
  .nav__mobile{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--gold);color:#16130d;border-radius:2px}
  .hero{height:auto;min-height:100svh}
  .hero__bg{background-size:auto 56%;background-position:50% 100%}
  .hero__eyebrow{letter-spacing:.2em;font-size:10px}
  .hero:before{background:linear-gradient(180deg,#0b0a09 0,#0b0a09 36%,rgba(11,10,9,0) 58%),linear-gradient(0deg,rgba(8,8,9,.85) 0,rgba(8,8,9,0) 22%)}
  .hero__inner{padding-top:112px}
  .hero__sub br{display:none}
  .hero__title .quebra{display:inline}
  .hero__sub{font-size:16px}
  .hero .btn{width:100%}
  .hero__strip{grid-template-columns:1fr;padding:18px 0 22px;font-size:10px;letter-spacing:.18em}
  .hero__strip li{padding:6px 0}
  .hero__strip li+li{border-left:0}
  .sim,.who,.prod{padding-top:80px;padding-bottom:80px}
  .madlib{line-height:1.45}
  .result{grid-template-columns:1fr;row-gap:24px;margin-top:48px}
  .result .btn{width:100%}
  table{font-size:16px}
  th:not(:first-child),td:not(:first-child){width:72px}
  /* celular: texto no topo sobre o creme, foto ancorada embaixo mostrando o carro */
  .band{background-size:auto 380px}
  .band__q{padding:80px var(--pad) 436px}
  .band__q .cap{font-size:11px}
  .prod{grid-template-columns:1fr}
  .final{padding:80px 0}
  .final__side .btn{padding:0 20px;gap:16px;font-size:clamp(16px,4.4vw,18px)}
  .footer{padding-top:56px}
  .footer__grid{grid-template-columns:1fr;gap:36px}
  .footer__base{grid-template-columns:1fr;gap:12px;margin-top:44px}
  .footer__aviso{justify-self:start;text-align:left}
  .footer__credito{order:1;margin-top:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ANIMAÇÕES (animacoes.js) */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* capa escondida até a entrada começar; o script do <head> tira a classe em 3 s se algo falhar */
.anim .hero__inner>*,.anim .hero__strip li{visibility:hidden}
.anim .hero__bg{opacity:0}
/* a máscara das linhas cortaria as descendentes (g, q, p); a folga compensa sem mudar o espaçamento */
.ln-mask{padding-bottom:.14em;margin-bottom:-.14em}
/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}