/* Vinicios & Cardoso — home (protótipo). Tokens primeiro. */
:root{
  --bg:#0a0a0b; --surface:#111113; --surface2:#17171a;
  --text:#ece7dd; --text2:#aaa498; --text3:#8d8779;
  --gold:#c4a363; --gold-d:#9c7f45; --line:rgba(196,163,99,.26); --line2:rgba(236,231,221,.1);
  --serif:'Cormorant Garamond','Iowan Old Style',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:clamp(20px,5vw,72px); --max:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --hd:76px; --proto:34px;
}
/* seções claras: mesmos papéis, valores invertidos */
.light{--bg:#fbfaf7;--surface:#f0ede6;--surface2:#e7e3da;--text:#131211;--text2:#4b463d;--text3:#6b6558;--gold:#8a6b2e;--gold-d:#8a6b2e;--line:rgba(110,84,36,.3);--line2:rgba(19,18,17,.12);background:var(--bg);color:var(--text)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + var(--proto))}
body{background:#0a0a0b;color:#ece7dd;font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block}
a{color:inherit}
ul{list-style:none;padding:0}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#0a0a0b;padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:44px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wrap{width:100%;max-width:calc(var(--max) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}

/* marcador visível de conteúdo a preencher */
.fill{display:inline-block;font:500 .72em/1.4 var(--sans);color:var(--gold);border:1px dashed var(--gold-d);padding:0 .5em;margin-inline:.15em;white-space:nowrap;vertical-align:.1em}

.proto{position:relative;z-index:60;height:var(--proto);display:flex;align-items:center;justify-content:center;gap:.4em;padding-inline:12px;background:#1c1810;color:#aaa498;font-size:12.5px;line-height:1.2;text-align:center;border-bottom:1px solid rgba(196,163,99,.26)}
.proto .fill{color:#c4a363;border-color:#9c7f45}

/* palco contínuo: luz que acompanha o scroll + fio de progresso */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none}
.stage-glow{position:absolute;inset:-20%;background:radial-gradient(38% 34% at var(--gx,72%) var(--gy,30%),rgba(196,163,99,.16),transparent 70%)}
.stage-rule{position:absolute;left:clamp(8px,1.6vw,26px);top:calc(var(--hd) + var(--proto) + 24px);bottom:24px;width:1px;background:rgba(236,231,221,.1)}
.stage-rule i{display:block;width:100%;height:100%;background:#c4a363;transform-origin:top;transform:scaleY(var(--p,0))}

/* header */
.hd{position:sticky;top:0;z-index:50;height:var(--hd);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--gut);transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.hd.solid{background:rgba(10,10,11,.92);backdrop-filter:blur(10px);border-bottom-color:var(--line2)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.logo{width:56px;height:56px;object-fit:contain;-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 71%);mask-image:radial-gradient(circle,#000 52%,transparent 71%)}
.brand-t{font:600 21px/1 var(--serif);letter-spacing:.01em}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px)}
.nav a:not(.btn){font-size:14.5px;color:var(--text2);text-decoration:none;position:relative;padding:6px 0;transition:color .25s}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:not(.btn):hover{color:var(--text)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.burger{display:none;position:relative;z-index:70;width:44px;height:44px;background:none;border:1px solid var(--line);cursor:pointer}
.burger span{position:absolute;left:12px;right:12px;height:1px;background:var(--text);transition:transform .3s var(--ease),top .3s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.burger[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}

/* botões: retos, sem pílula */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;font:600 15.5px/1 var(--sans);text-decoration:none;border:1px solid var(--gold);cursor:pointer;transition:background .3s,color .3s,transform .3s var(--ease)}
.btn-wa,.btn-gold{background:var(--gold);color:#0a0a0b}
.light .btn-gold{color:#fff}
.btn-wa:hover,.btn-gold:hover{background:var(--text);border-color:var(--text);transform:translateY(-2px)}
.nav-wa{min-height:44px;padding:0 20px;font-size:14.5px}
.link{display:inline-block;color:var(--text);text-decoration:none;font-weight:500;padding:8px 0;border-bottom:1px solid var(--gold);transition:color .25s,border-color .25s}
.link:hover{color:var(--gold)}
.inl{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-d)}

/* hero com foto dos sócios */
main{position:relative;z-index:1}
.hero{position:relative;height:calc(100svh - var(--hd) - var(--proto));min-height:440px;display:flex;flex-direction:column;justify-content:center;padding-block:0;overflow:hidden}
.hero-in{flex:0 1 auto}
.hero-photo{position:absolute;top:0;right:0;bottom:0;width:68%;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 42%),linear-gradient(to top,transparent 0,#000 22%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 42%),linear-gradient(to top,transparent 0,#000 22%);mask-composite:intersect}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:64% 28%;filter:saturate(.85) contrast(1.04) brightness(.92);transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1.08));transform-origin:62% 40%;transition:transform 1.8s var(--ease)}
.hero-in{position:relative;z-index:1;transform:translate3d(0,var(--ty,0px),0)}
.eyebrow{font:500 13.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:clamp(10px,2.2svh,26px)}
h1{font:500 clamp(44px,min(8.2vw,14.5svh),140px)/.92 var(--serif);letter-spacing:-.02em;text-shadow:0 2px 40px rgba(0,0,0,.55)}
.hl{display:block;overflow:hidden;padding-bottom:.08em}
.hl>span{display:block}
.js .hl>span{transform:translateY(105%);transition:transform 1.1s var(--ease)}
.js .hero.in .hl>span{transform:none}
.js .hero.in .hl:nth-child(2)>span{transition-delay:.12s}
.lead{margin-top:clamp(12px,2.6svh,30px);font-size:clamp(16px,min(1.5vw,2.7svh),21px);color:var(--text);max-width:40ch;text-wrap:pretty;text-shadow:0 1px 20px rgba(0,0,0,.7)}
.hero-cta{margin-top:clamp(16px,3.2svh,36px);display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px}
.proof{position:relative;z-index:1;margin-top:clamp(14px,3.6svh,56px);padding-block:clamp(12px,2.4svh,22px);border-top:1px solid var(--line2);font-size:14.5px;color:var(--text2)}
.proof b{font:600 22px/1 var(--serif);color:var(--gold);margin-right:6px}
.proof span{color:var(--text3)}

/* seções */
.sec{position:relative;padding-block:clamp(72px,11vh,140px)}
.sec:not(.light){background:var(--bg)}
h2{font:500 clamp(40px,5.6vw,84px)/1 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:24px 8vw;align-items:end;margin-bottom:clamp(48px,8vh,96px)}
.sec-sub{color:var(--text2);max-width:46ch;text-wrap:pretty}

/* split de palavras no título (máscara por palavra) */
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.sw>i{display:inline-block;font-style:normal}
.js [data-split] .sw>i{transform:translateY(108%);transition:transform 1s var(--ease);transition-delay:calc(var(--i)*70ms)}
.js [data-split].in .sw>i{transform:none}

/* áreas: linhas com imagem, alternadas */
.areas-list{display:grid;gap:clamp(44px,7vh,88px)}
.area{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,6vw,96px);align-items:center}
.area:nth-child(even){grid-template-columns:1fr 1.1fr}
.area:nth-child(even) .area-img{order:2}
.area-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface2)}
.area-img img{position:absolute;inset:-9% 0;width:100%;height:118%;object-fit:cover;filter:grayscale(1) sepia(.28) contrast(1.04);transform:translate3d(0,var(--iy,0px),0) scale(1.04);transition:filter .6s,transform .9s var(--ease)}
.area:hover .area-img img{filter:grayscale(.3) sepia(.2)}
.area-img::after{content:"";position:absolute;inset:0;border:1px solid var(--line);pointer-events:none}
.js .area-img{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--ease)}
.js .area:nth-child(even) .area-img{clip-path:inset(0 0 0 100%)}
.js .area-img.in,.js .area:nth-child(even) .area-img.in{clip-path:inset(0)}
.area-txt h3{font:500 clamp(30px,3.6vw,54px)/1.08 var(--serif);margin-bottom:16px;text-wrap:balance}
.area-txt h3::before{content:"";display:block;width:56px;height:1px;background:var(--gold);margin-bottom:22px}
.area-txt p{color:var(--text2);max-width:40ch;text-wrap:pretty}
.note{margin-top:clamp(48px,8vh,88px);font-size:14px;color:var(--text3);max-width:64ch;text-wrap:pretty}

/* escritório */
.office{background:var(--surface)}
.office-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,7vw,110px);align-items:start}
.office-txt h2{margin-bottom:clamp(24px,4vh,40px)}
.big{font:500 clamp(24px,2.5vw,34px)/1.3 var(--serif);margin-bottom:22px;text-wrap:balance}
.office-txt p:not(.big){color:var(--text2);text-wrap:pretty;margin-bottom:14px}
.partners{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px)}
.ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:#111 url(../assets/socios.jpg) no-repeat;background-size:auto 100%;border:1px solid var(--line);filter:saturate(.85) contrast(1.03)}
.ph-a{background-position:23% 0;background-size:auto 112%}
.ph-b{background-position:79% 0;background-size:auto 112%}
.partner h3{margin-top:18px;font:500 clamp(22px,2vw,28px)/1.2 var(--serif);text-wrap:balance}
.partner p{margin-top:6px;color:var(--text2);font-size:15px}

/* avaliações */
.rate-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(32px,8vw,120px);align-items:center}
.rate-n{font:500 clamp(140px,22vw,360px)/.8 var(--serif);color:var(--gold);letter-spacing:-.04em;padding-bottom:.06em}
.rate-t h2{margin-bottom:22px;font-size:clamp(34px,4.2vw,60px)}
.rate-t p{color:var(--text2);max-width:42ch;margin-bottom:26px;text-wrap:pretty}
.rate-t b{color:var(--text);font-weight:600}

/* faixa contínua de avaliações (autônoma, não depende do scroll) */
.quotes{margin-top:clamp(56px,9vh,110px);padding-block:8px;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.q-track{display:flex;width:max-content;animation:qmove 110s linear infinite}
.q-set{display:flex;flex:none;align-items:stretch}
@keyframes qmove{to{transform:translateX(-50%)}}

/* contato */
.contact{border-top:1px solid var(--line2)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:start}
.ct-info h2{margin-bottom:clamp(28px,5vh,48px)}
dl{display:grid;gap:0;border-top:1px solid var(--line2)}
dl>div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding-block:16px;border-bottom:1px solid var(--line2)}
dt{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);padding-top:3px}
dd a{text-decoration:none;font-weight:500;font-size:19px;border-bottom:1px solid var(--gold)}
.map{margin-top:28px;height:260px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(.95)}
.form{display:grid;gap:18px;padding:clamp(22px,3.4vw,44px);background:var(--surface);border:1px solid var(--line)}
.form h3{font:500 clamp(26px,2.6vw,34px)/1.1 var(--serif)}
.form label{display:grid;gap:8px;font-size:14px;color:var(--text2)}
.form input:not([type=checkbox]),.form textarea{width:100%;font:400 16px/1.4 var(--sans);color:var(--text);background:var(--bg);border:1px solid var(--line2);padding:14px 14px;border-radius:0;transition:border-color .25s}
.form textarea{resize:vertical;min-height:120px}
.form input:focus,.form textarea:focus{border-color:var(--gold);outline:none}
.warn{font-size:13.5px;color:var(--text3)}
.chk{grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:13.5px;line-height:1.5}
.chk input{width:18px;height:18px;margin-top:2px;accent-color:var(--gold)}
.form .btn{justify-self:start}
.form-msg{min-height:1.4em;font-size:14px;color:var(--gold)}

/* rodapé */
.ft{position:relative;z-index:1;background:#070708;border-top:1px solid var(--line);padding-block:clamp(40px,7vh,72px);font-size:14.5px;color:var(--text2)}
.ft-in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px clamp(28px,5vw,72px);align-items:start}
.ft-n{font:500 26px/1.2 var(--serif);color:var(--text);margin-bottom:8px}
.ft a{color:var(--text2)}
.ft-aviso{grid-column:1/-1;padding-top:28px;border-top:1px solid var(--line2);font-size:13.5px;color:var(--text3);text-wrap:pretty;max-width:80ch}

.ft-h{font:500 13.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.hours{border-top:1px solid var(--line2)}
.hours>div{display:grid;grid-template-columns:1fr auto;gap:12px;padding-block:10px;border-bottom:1px solid var(--line2)}
.hours dt{font:400 14.5px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--text2);padding:0}
.hours dd{font-size:14.5px}
.ft-small{margin-top:12px;font-size:13px;color:var(--text3)}
.g-badge{display:flex;align-items:center;gap:14px;text-decoration:none;padding:16px 18px;background:#fff;color:#202124;border-radius:10px;max-width:340px}
.g-badge b{font:600 22px/1 var(--sans)}
.g-badge small{display:block;margin-top:4px;font-size:12.5px;color:#5f6368}
.g-badge .stars{display:inline-flex;vertical-align:middle;margin-left:4px}

/* estrelas e logotipo G (padrão visual do Google) */
.stars{display:flex;gap:2px;color:#fbbc04}
.stars svg{width:18px;height:18px;fill:currentColor}
.stars.big{gap:6px;margin:0 0 20px}
.rate-t .stars{color:#fbbc04}
.stars.big svg{width:30px;height:30px}
.g-logo{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid #dadce0;font:700 16px/1 'Hanken Grotesk',Arial,sans-serif;color:#4285f4}

/* atendimento: etapas (ordem real do processo) */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);counter-reset:s}
.steps li{position:relative;padding-top:28px;border-top:1px solid var(--line);counter-increment:s}
.steps li::before{content:counter(s);position:absolute;top:-17px;left:0;display:grid;place-items:center;width:34px;height:34px;background:var(--bg);border:1px solid var(--gold);color:var(--gold);font:600 16px/1 var(--serif)}
.steps h3{font:500 clamp(24px,2.2vw,32px)/1.15 var(--serif);margin-bottom:12px;text-wrap:balance}
.steps p{color:var(--text2);font-size:16px;text-wrap:pretty}

/* cartões de avaliação no estilo Google */
.gcard{flex:none;width:clamp(290px,31vw,400px);display:flex;flex-direction:column;gap:12px;padding:20px 22px 24px;margin:0 10px;background:#fff;color:#202124;border:1px solid #dadce0;border-radius:12px}
.g-top{display:flex;align-items:center;gap:12px}
.g-top>div{flex:1;min-width:0}
.g-top b{display:block;font:600 15px/1.3 'Hanken Grotesk',Arial,sans-serif}
.g-top small{font:400 13px/1.3 'Hanken Grotesk',Arial,sans-serif;color:#5f6368}
.g-av{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff;font:600 18px/1 'Hanken Grotesk',Arial,sans-serif}
.gcard blockquote{font:400 15.5px/1.55 'Hanken Grotesk',Arial,sans-serif;color:#202124;text-wrap:pretty}
.gcard .stars svg{width:17px;height:17px}

/* WhatsApp fixo */
.wa-fixed{position:fixed;z-index:40;right:clamp(16px,2vw,32px);bottom:clamp(16px,2vw,32px);display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 24px;background:#c4a363;color:#0a0a0b;font:600 15px/1 var(--sans);text-decoration:none;border:1px solid #c4a363;box-shadow:0 10px 30px rgba(0,0,0,.45);opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .4s,transform .4s var(--ease),background .3s}
.wa-fixed.on{opacity:1;transform:none;pointer-events:auto}
.wa-fixed:hover{background:#ece7dd;border-color:#ece7dd}

/* reveal */
.js [data-r]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-r].in{opacity:1;transform:none}

/* celular */
@media (max-width:860px){
  :root{--hd:68px;--proto:44px}
  body{font-size:16.5px}
  .proto{font-size:12px}
  .logo{width:48px;height:48px}
  .brand-t{font-size:19px}
  .burger{display:block}
  .nav{position:fixed;inset:0;z-index:60;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:var(--gut);background:#0a0a0b;transform:translateY(-100%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s}
  .nav.open{transform:none;visibility:visible;transition:transform .5s var(--ease)}
  .nav a:not(.btn){font:500 clamp(32px,9vw,46px)/1.2 var(--serif);color:var(--text);padding:8px 0}
  .nav a:not(.btn)::after{display:none}
  .nav-wa{margin-top:24px;min-height:52px;font-size:15.5px}
  .hd{z-index:70}
  .stage-rule{display:none}
  .hero{height:auto;min-height:calc(100svh - var(--hd) - var(--proto));justify-content:flex-end;padding-block:0}
  .hero-photo{width:100%;height:42svh;bottom:auto;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 38%);mask-image:linear-gradient(to top,transparent 0,#000 38%);-webkit-mask-composite:source-over;mask-composite:add}
  .hero-photo img{object-position:70% 22%;transform-origin:70% 30%}
  .hero-in{padding-top:calc(42svh - 52px)}
  h1{font-size:clamp(52px,17vw,92px)}
  .hero-cta{flex-direction:column;align-items:stretch;gap:18px}
  .hero-cta .btn{width:100%}
  .hero-cta .link{align-self:flex-start}
  .proof{margin-top:28px}
  .sec-head,.office-grid,.contact-grid,.ft-in,.rate-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:36px}
  .gcard{width:min(80vw,320px)}
  .sec-head{align-items:start}
  .area,.area:nth-child(even){grid-template-columns:1fr;gap:22px}
  .area:nth-child(even) .area-img{order:0}
  .area-img{aspect-ratio:16/11}
  .partners{grid-template-columns:1fr 1fr;gap:14px}
  .rate-n{font-size:clamp(150px,52vw,260px)}
  dl>div{grid-template-columns:1fr;gap:4px}
  .wa-fixed{left:0;right:0;bottom:0;justify-content:center;min-height:58px;box-shadow:none;border-left:0;border-right:0;border-bottom:0;opacity:1;transform:none;pointer-events:auto}
  .hero-cta .btn{display:none}
  .ft{padding-bottom:calc(58px + 40px)}
}
@media (max-width:420px){
  .partners{grid-template-columns:1fr}
  .ph{aspect-ratio:16/11}
  .ph-a{background-position:24% 26%;background-size:auto 215%}
  .ph-b{background-position:80% 26%;background-size:auto 215%}
}
@media (max-height:560px) and (min-width:861px){
  .btn{min-height:44px}
  .eyebrow{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .hl>span,.js [data-r],.js [data-split] .sw>i{transform:none;opacity:1;transition:none}
  .js .area-img{clip-path:none;transition:none}
  .q-track{animation:none}
  .quotes{overflow-x:auto}
  .stage-glow,.hero-photo img,.hero-in{transform:none}
}