/* EFOR® STUDIO — sistema visual do site (tokens do kit: criativos/2026-10-04-efor-studio-branding-v01/kit/02-sistema). */
@font-face{font-family:Geist;src:url('/assets/geist-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{
  --tinta:#161815;--grafite:#22251F;--papel:#F3F3EF;--branco:#fff;--verde:#B8F36B;
  --cinza:#777B73;--cinza-claro:#A4A89F;--cinza-escuro:#585C55;
  --linha-clara:rgba(243,243,239,.16);--linha-escura:rgba(22,24,21,.16);
  --raio:24px;--pad:clamp(20px,6vw,88px);
  --suave:cubic-bezier(.22,.8,.2,1);--mola:cubic-bezier(.3,1.45,.4,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tinta);color:var(--papel);font-family:Geist,Arial,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body:has(dialog[open]){overflow:hidden}
/* Grão de papel sobre a página inteira: um ladrilho estático, sem custo por quadro. */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--verde);color:var(--tinta)}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure,dl,dd{margin:0}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px;border-radius:6px}
.t-papel :focus-visible,.t-verde :focus-visible,.c-branco :focus-visible,.c-verde :focus-visible{outline-color:var(--tinta)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.defs symbol path,.defs symbol rect{vector-effect:non-scaling-stroke}
.pular{position:absolute;left:16px;top:-80px;z-index:100;background:var(--verde);color:var(--tinta);padding:12px 18px;border-radius:99px;font-weight:600}
.pular:focus{top:16px}
.wrap{width:100%;max-width:1456px;margin-inline:auto;padding-inline:var(--pad)}
.so-js{display:none}.js .so-js{display:inline-flex}

/* Temas de seção */
.t-tinta{background:var(--tinta);color:var(--papel)}
.t-papel{background:var(--papel);color:var(--tinta)}
.t-verde{background:var(--verde);color:var(--tinta)}
.sec{padding-block:clamp(84px,10vw,152px);position:relative}

/* Tipografia */
.olho{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;letter-spacing:-.005em}
.olho::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verde);flex:none}
.t-verde .olho::before{background:var(--tinta)}
h1,h2{font-weight:600;letter-spacing:-.048em;line-height:.97;text-wrap:balance}
h2{font-size:clamp(38px,5.2vw,78px);margin-top:22px}
.h-grande{font-size:clamp(42px,6.5vw,98px)}
.h-enorme{font-size:clamp(50px,8.6vw,136px);line-height:.94}
.h-medio{font-size:clamp(34px,4.6vw,66px)}
h3{font-weight:500;letter-spacing:-.022em;line-height:1.12}
h1 em,h2 em{font-style:normal;color:var(--verde)}
.grifo{background:linear-gradient(var(--verde),var(--verde)) no-repeat 0 78%/100% 46%;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding-inline:.06em;margin-inline:-.06em}
.js [data-entra] .grifo,.js [data-entra].grifo{background-size:0% 46%;transition:background-size 1s var(--suave) .45s}
.js [data-entra].visto .grifo{background-size:100% 46%}
.miudo{font-size:13.5px;line-height:1.5;color:var(--cinza-escuro);max-width:58ch}
.miudo strong{color:var(--tinta)}
.miudo--claro{color:var(--cinza-claro)}
.miudo--forte{color:var(--papel);font-size:14.5px;font-weight:500}
.t-tinta .miudo strong{color:var(--papel)}

/* Botões, links e pílulas */
.btn{display:inline-flex;align-items:center;gap:16px;min-height:56px;padding:10px 10px 10px 26px;border:0;border-radius:99px;background:var(--verde);color:var(--tinta);font-size:16.5px;font-weight:600;letter-spacing:-.01em;transition:transform .25s var(--suave),background-color .25s}
.btn-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--tinta);color:var(--verde);flex:none;overflow:hidden}
.btn-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--mola)}
.btn--tinta{background:var(--tinta);color:var(--papel)}
.btn--tinta .btn-ico{background:var(--verde);color:var(--tinta)}
.btn--cheio{width:100%;justify-content:space-between}
.btn--grande{min-height:66px;padding-left:30px;font-size:clamp(17px,1.5vw,21px)}
.btn--grande .btn-ico{width:44px;height:44px}
.btn:active{transform:scale(.97)}
@media(hover:hover){.btn:hover .btn-ico svg{transform:translateX(3px)}.btn:hover{background:#c7f888}.btn--tinta:hover{background:#2a2d27}}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:16px;padding-block:6px;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1px;transition:background-size .4s var(--suave)}
@media(hover:hover){.link:hover{background-size:0% 1px;background-position:100% 100%}}
.pilula{display:inline-flex;align-items:center;padding:6px 14px;border-radius:99px;font-size:13.5px;font-weight:600;line-height:1.25;letter-spacing:-.005em}
.p-tinta{background:var(--tinta);color:var(--papel)}.p-papel{background:var(--papel);color:var(--tinta)}.p-verde{background:var(--verde);color:var(--tinta)}

/* Cartões */
.cartao{position:relative;border-radius:var(--raio);padding:clamp(22px,2.1vw,30px)}
.c-branco{background:var(--branco);color:var(--tinta)}
.c-tinta{background:var(--tinta);color:var(--papel)}
.c-verde{background:var(--verde);color:var(--tinta)}
.c-grafite{background:var(--grafite);color:var(--papel)}
.selo-novo{position:absolute;top:20px;right:20px;padding:5px 12px;border-radius:99px;background:var(--tinta);color:var(--verde);font-size:12.5px;font-weight:600;line-height:1.2}
.selo-novo--verde{background:var(--verde);color:var(--tinta)}

/* Lista com ✓ */
.checks{display:grid;gap:13px;margin-top:34px;font-size:clamp(16px,1.25vw,18px);line-height:1.35}
.checks li{display:flex;gap:13px;align-items:flex-start}
.checks li::before{content:"";flex:none;width:22px;height:22px;margin-top:.06em;border-radius:50%;background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161815' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.4 3.4 3.4L17 9'/%3E%3C/svg%3E") center/100% no-repeat}
.t-verde .checks li::before,.c-verde .checks li::before{background-color:var(--tinta);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8F36B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.4 3.4 3.4L17 9'/%3E%3C/svg%3E")}
.checks--p{font-size:15.5px;gap:11px;margin-top:26px}
.checks--p li::before{width:20px;height:20px}
.js [data-lista] li{opacity:0;transform:translateX(-14px);transition:opacity .6s var(--suave),transform .8s var(--suave)}
.js [data-lista] li::before{transform:scale(0);transition:transform .6s var(--mola)}
.js [data-lista].visto li{opacity:1;transform:none}
.js [data-lista].visto li::before{transform:none}
[data-lista] li:nth-child(1),[data-lista] li:nth-child(1)::before{transition-delay:.05s}[data-lista] li:nth-child(2),[data-lista] li:nth-child(2)::before{transition-delay:.13s}[data-lista] li:nth-child(3),[data-lista] li:nth-child(3)::before{transition-delay:.21s}[data-lista] li:nth-child(4),[data-lista] li:nth-child(4)::before{transition-delay:.29s}[data-lista] li:nth-child(5),[data-lista] li:nth-child(5)::before{transition-delay:.37s}[data-lista] li:nth-child(6),[data-lista] li:nth-child(6)::before{transition-delay:.45s}[data-lista] li:nth-child(7),[data-lista] li:nth-child(7)::before{transition-delay:.53s}[data-lista] li:nth-child(8),[data-lista] li:nth-child(8)::before{transition-delay:.61s}

/* Entradas: sobem de leve; títulos saem do borrão e ganham foco (o gesto da marca). */
.js [data-entra]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--suave),transform 1s var(--suave);transition-delay:calc(var(--i,0)*85ms)}
.js [data-entra="foco"]{filter:blur(14px);transform:translateY(16px) scale(.985);transform-origin:0 60%;transition:opacity .9s var(--suave),transform 1.25s var(--suave),filter 1.1s var(--suave)}
.js [data-entra].visto{opacity:1;transform:none;filter:none}

/* Cursor do Luca (personagem da marca): quem "faz" as coisas no hero e nos palcos. */
.cursor-luca{position:absolute;left:0;top:0;z-index:9;display:flex;align-items:flex-start;pointer-events:none;will-change:transform}
.cursor-luca svg{width:22px;height:22px;fill:var(--tinta);stroke:var(--papel);stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 2px 4px rgba(0,0,0,.28))}
.cursor-luca span{margin:16px 0 0 -4px;padding:3px 10px;border-radius:99px;background:var(--tinta);color:var(--verde);font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;box-shadow:0 0 0 1.5px var(--papel)}

/* Preço grande e hodômetro */
.preco{display:flex;align-items:flex-start;font-size:clamp(84px,11.5vw,180px);font-weight:600;letter-spacing:-.06em;line-height:1}
.preco small{font-size:.27em;font-weight:600;letter-spacing:-.03em;margin:.1em .1em 0 0}
.preco i{align-self:flex-end;margin:0 0 .16em .18em;font-style:normal;font-size:.2em;font-weight:500;letter-spacing:-.02em;color:var(--cinza)}
.preco--medio{font-size:clamp(68px,8.4vw,124px)}
[data-conta]{font-weight:inherit;font-variant-numeric:tabular-nums;white-space:nowrap}
.dg{display:inline-block;height:1em;line-height:1em;overflow:hidden;vertical-align:top}
.dg-col{display:block;transform:translateY(calc(var(--d,0)*-1em));transition:transform 1.5s var(--suave);transition-delay:calc(var(--k,0)*90ms)}
.dg-col span{display:block;height:1em}
.det-preco{display:flex;align-items:flex-end;flex-wrap:wrap;gap:14px 30px;margin:clamp(30px,3.4vw,46px) 0 28px}
.preco-nota{font-size:clamp(16px,1.3vw,19px);line-height:1.35;padding-bottom:.9em}
.preco-nota span{color:var(--cinza-claro)}
.t-papel .preco-nota span,.t-verde .preco-nota span{color:var(--cinza-escuro)}
.preco-nota mark{background:none;color:var(--verde);font-weight:600}
.t-papel .preco-nota mark{color:var(--tinta);background:linear-gradient(var(--verde),var(--verde)) no-repeat 0 92%/100% 34%}

/* Topo: só existe sobre o hero claro (position absolute), então é sempre a versão de texto escuro.
   A margem lateral é a mesma do texto do hero (--margem): proporcional nas telas largas; abaixo de 1200 px, a grade da página. */
.topo,.hero{--margem:clamp(56px,4vw,104px)}
.topo{position:absolute;inset:0 0 auto;z-index:30;padding-top:clamp(18px,2.4vw,34px);color:var(--tinta)}
.topo :focus-visible{outline-color:var(--tinta)}
.topo-linha{display:flex;align-items:center;gap:28px;max-width:none;padding-inline:var(--margem)}
.marca{display:block;width:clamp(92px,8vw,118px);color:var(--tinta);margin-right:auto}
.marca svg{width:100%;height:auto;aspect-ratio:432/118;fill:currentColor;transform-origin:20% 60%}
.js .marca svg{animation:geleia 1.3s var(--suave) .15s both}
@keyframes geleia{0%{opacity:0;transform:scale(.7,.5)}45%{opacity:1;transform:scale(1.06,.94)}70%{transform:scale(.98,1.03)}100%{transform:none}}
.nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px);font-size:15px;font-weight:500}
.nav a{padding-block:8px;opacity:.82;white-space:nowrap;transition:opacity .2s}
.nav a:hover{opacity:1}
.pausa{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid rgba(22,24,21,.3);border-radius:50%;background:none}
.pausa svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.pausa-play{display:none;fill:currentColor;stroke:none}
.pausa[aria-pressed="true"] .pausa-barras{display:none}.pausa[aria-pressed="true"] .pausa-play{display:block}
.pausa-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.topo-cta{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 18px;border:1px solid rgba(22,24,21,.3);border-radius:99px;font-size:15px;font-weight:600;transition:background-color .25s,color .25s,border-color .25s}
.topo-cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.topo-cta:hover{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}.pausa:hover{background:rgba(22,24,21,.07)}}
.menu{display:none;width:44px;height:44px;padding:0;border:1px solid rgba(22,24,21,.3);border-radius:50%;background:none;position:relative}
.menu span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--suave),top .35s var(--suave)}
.menu span:first-child{top:17px}.menu span:last-child{top:25px}
.menu[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}.menu[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
@media(max-width:1199px){.topo,.hero{--margem:var(--pad)}}
/* Entre 900 e 1023 px a linha fica justa: links mais juntos, para "Como funciona" não quebrar em duas linhas. */
@media(max-width:1023px){.topo-linha{gap:20px}.nav{gap:14px;font-size:14px}}
@media(max-width:899px){
  .menu{display:block}.topo-cta{display:none}
  .nav{position:absolute;top:calc(100% + 12px);left:var(--margem);right:var(--margem);flex-direction:column;align-items:stretch;gap:0;padding:10px 22px 14px;border-radius:22px;background:var(--branco);color:var(--tinta);font-size:19px;box-shadow:0 0 0 1px var(--linha-escura),0 24px 60px rgba(22,24,21,.22);opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top right;transition:opacity .25s,transform .35s var(--suave),visibility 0s .35s}
  .nav.aberta{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav a{padding-block:14px;border-bottom:1px solid var(--linha-escura);opacity:1}
  .pausa{width:auto;height:auto;border:0;border-radius:0;display:flex;gap:10px;padding-block:14px;justify-content:flex-start;background:none}
  .pausa-texto{position:static;width:auto;height:auto;clip-path:none}
}

/* Hero: o H01 "Digitou, tá no ar" inteiro (texto, janela e cursores) está em css/hero.css; a margem lateral (--margem) vem do bloco do topo. */

/* Faixa */
.faixa{background:var(--verde);color:var(--tinta);overflow:hidden;padding-block:clamp(14px,1.5vw,22px)}
.faixa-trilho{display:flex;width:max-content}
.js .faixa-trilho{animation:faixa 44s linear infinite}
.faixa ul{display:flex;align-items:center;gap:clamp(22px,2.6vw,40px);padding-right:clamp(22px,2.6vw,40px);font-size:clamp(20px,2.3vw,34px);font-weight:600;letter-spacing:-.035em;white-space:nowrap}
.faixa svg{width:.78em;height:.78em;fill:var(--tinta)}
@keyframes faixa{to{transform:translateX(-50%)}}
.pausado .faixa-trilho{animation-play-state:paused}

/* O que a gente faz */
.vitrine{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(24px,3vw,52px);margin-top:clamp(48px,6vw,92px)}
.vitrine-rotulo{font-size:14.5px;color:var(--cinza-escuro);margin-bottom:16px}
.vitrine-rotulo strong{color:var(--tinta);font-weight:600}
.t-tinta .vitrine-rotulo{color:var(--cinza-claro)}.t-tinta .vitrine-rotulo strong{color:var(--papel)}
/* Serviços e a seção do site são escuras e vizinhas: um fio separa e o respiro entre elas diminui. */
#servicos{padding-bottom:clamp(64px,7vw,104px)}
#servicos+.det--carro{border-top:1px solid var(--linha-clara);padding-top:clamp(64px,7vw,104px)}
.vitrine-cartoes{display:grid;gap:14px;height:calc(100% - 38px)}
.vitrine-grupo--3 .vitrine-cartoes{grid-template-columns:repeat(3,minmax(0,1fr))}
.vitrine-grupo--2 .vitrine-cartoes{grid-template-columns:repeat(2,minmax(0,1fr))}
.vitrine-cartoes li{display:flex}
.svc{display:flex;flex-direction:column;width:100%;min-height:clamp(300px,25vw,350px);transition:transform .5s var(--suave)}
.svc-num{font-size:13px;color:var(--cinza)}
.svc h3{margin-top:18px;font-size:clamp(21px,1.75vw,25px);text-wrap:balance}
.svc p{margin-top:10px;font-size:14.5px;line-height:1.45;color:var(--cinza-escuro);max-width:24ch}
.c-tinta.svc p,.c-grafite.svc p{color:var(--cinza-claro)}.c-verde.svc p{color:#3c4a25}.c-verde .svc-num{color:#4d5f2f}
.svc-preco{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1em .16em;margin-top:auto;padding-top:28px;font-size:clamp(28px,2.35vw,37px);font-weight:600;letter-spacing:-.045em;line-height:1}
.svc-preco small{font-size:.9em;font-weight:600;letter-spacing:-.03em}
.svc-preco i{font-style:normal;font-size:.44em;font-weight:500;letter-spacing:-.01em;color:var(--cinza)}
.c-verde .svc-preco i{color:#4d5f2f}
.svc-ir{position:absolute;right:20px;bottom:22px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--verde);color:var(--tinta);opacity:0;transform:scale(.5) rotate(-30deg);transition:opacity .3s,transform .5s var(--mola)}
.c-verde .svc-ir{background:var(--tinta);color:var(--verde)}
.svc-ir svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.svc:hover{transform:translateY(-6px)}.svc:hover .svc-ir{opacity:1;transform:none}}
@media(max-width:1179px){.vitrine{grid-template-columns:1fr}.vitrine-cartoes{height:auto}}
@media(max-width:699px){.vitrine-grupo--3 .vitrine-cartoes,.vitrine-grupo--2 .vitrine-cartoes{grid-template-columns:1fr}.svc{min-height:0}.svc p{max-width:34ch}.svc-preco{padding-top:34px;font-size:40px}}

/* Detalhe de cada serviço */
.det h2{font-size:clamp(34px,4.5vw,66px)}
.det-chamada{margin-top:18px;font-size:clamp(19px,1.75vw,25px);font-weight:500;letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.t-tinta .det-chamada{color:var(--papel)}
.t-verde h2 em{color:inherit;background:linear-gradient(var(--tinta),var(--tinta)) no-repeat 0 96%/100% .07em}
.det-prazo{margin:clamp(26px,3vw,38px) 0 26px;font-size:clamp(16px,1.3vw,19px);line-height:1.35}
.det-prazo span{color:var(--cinza-claro)}
.t-papel .det-prazo span,.t-verde .det-prazo span{color:var(--cinza-escuro)}
.det-prazo mark{background:none;color:var(--verde);font-weight:600}
.t-papel .det-prazo mark{color:var(--tinta);background:linear-gradient(var(--verde),var(--verde)) no-repeat 0 92%/100% 34%}
.t-verde .det-prazo mark{color:var(--tinta)}
.det--carro .det-grade{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
/* Galeria de inspiração (o carro-chefe): cabeçalho aqui; cartões e diálogo em css/galeria.css. */
.gal{margin-top:clamp(84px,10vw,150px)}
.gal-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:28px 48px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.gal-topo h3{margin-top:18px;font-weight:600;letter-spacing:-.045em;line-height:.98}
.gal-intro{max-width:30ch;font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:var(--cinza-claro)}
.gal-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gal-cartao{display:block}
.gal-janela{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--raio);background:var(--grafite)}
.gal-janela img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.gal-legenda{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:12px;font-size:15.5px}
.gal-legenda strong{font-weight:500;letter-spacing:-.015em}
.gal-legenda small{font-size:12.5px;color:var(--cinza-claro);white-space:nowrap}
@media(max-width:1099px){.gal-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:699px){.gal-grade{grid-template-columns:1fr}}
.det-grade{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(36px,5.4vw,96px);align-items:center}
.det-grade--topo{align-items:start}
.det--inv .det-copy{order:2}
.det-texto{margin-top:26px;max-width:46ch;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--cinza-claro)}
.t-papel .det-texto{color:var(--cinza-escuro)}.t-verde .det-texto{color:var(--tinta)}
.plataformas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px;font-size:14px;color:var(--cinza-escuro)}
.plataformas span{margin-right:4px}
.det-copy .miudo{margin-top:22px}
.palco{position:relative;aspect-ratio:4/3;border-radius:var(--raio);overflow:hidden;container-type:inline-size;background:var(--grafite)}
.t-papel .palco{background:#e7e7e1}
.palco--livre{aspect-ratio:auto;overflow:visible;background:none!important;border-radius:0}
.palco-estatico{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.palco-legenda{margin-top:12px;font-size:12.5px;color:var(--cinza)}
.t-verde .palco-legenda{color:#4d5f2f}
.fotos-tipos,.formatos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:22px;font-size:14px;line-height:1.35}
.fotos-tipos span,.formatos span{display:block;margin-bottom:5px;font-size:12px;font-weight:600;letter-spacing:.01em;opacity:.62}
.etapas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.etapas .cartao{min-height:clamp(170px,14vw,200px)}
.etapas span{font-size:12.5px;color:var(--cinza-claro)}
.etapas .c-verde span{color:#4d5f2f}
.etapas h3{margin-top:14px;font-size:clamp(19px,1.6vw,23px)}
.etapas p{margin-top:9px;font-size:14px;line-height:1.48;color:var(--cinza-claro)}
.etapas .c-verde p{color:#2c3817}
.det-palco .miudo{margin-top:22px}
@media(max-width:899px){
  .det-grade{grid-template-columns:1fr;gap:44px}
  .det--inv .det-copy{order:0}
  .det--carro .det-grade{grid-template-columns:1fr}
  .fotos-tipos,.formatos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:559px){.etapas{grid-template-columns:1fr}.etapas .cartao{min-height:0}}

/* Combo */
.combo-grade{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,5vw,90px);align-items:end}
.combo-cartao{padding:clamp(26px,2.6vw,36px)}
.combo-cartao dl{display:grid;gap:12px;font-size:15.5px;color:var(--cinza-claro)}
.combo-cartao dl div{display:flex;justify-content:space-between;gap:20px}
.combo-de{margin-top:clamp(40px,5vw,70px);font-size:15px;color:var(--cinza)}
.combo-por{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin-bottom:26px}
.combo-por .pilula{margin-bottom:1.3em}
@media(max-width:899px){.combo-grade{grid-template-columns:1fr}}

/* Planos e pós-lançamento */
.planos-chamada{max-width:44ch;color:var(--cinza-escuro);font-weight:400;font-size:clamp(17px,1.4vw,20px);letter-spacing:0;line-height:1.5}
.planos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(44px,5vw,76px)}
.plano{display:flex;flex-direction:column;padding:clamp(24px,2.3vw,34px)}
.plano-olho{font-size:13px;color:var(--cinza)}
.c-verde .plano-olho{color:#4d5f2f}
/* O terceiro combo fala com quem já tem site ou loja: a frase de abertura é a chamada do cartão. */
.plano-olho--fala{font-size:15.5px;font-weight:500;color:var(--tinta)}
.plano h3{margin-top:14px;font-size:clamp(24px,2.1vw,30px);text-wrap:balance}
.plano-base{margin-top:auto;padding-top:clamp(40px,5vw,72px)}
/* A conta do combo em duas linhas, para ninguém achar que paga o site todo mês: o que é uma vez só e o que é por mês. */
.plano-conta{display:grid;margin-top:auto;padding-top:clamp(30px,3.6vw,48px)}
.conta-linha{display:grid;justify-items:start;gap:7px;padding-block:16px;border-top:1px solid var(--linha-escura)}
.c-tinta .conta-linha{border-color:var(--linha-clara)}
.conta-quando{padding:4px 11px;border:1px solid currentColor;border-radius:99px;font-size:12px;font-weight:600;line-height:1.2;opacity:.78}
.conta-linha--mes .conta-quando{border-color:var(--tinta);background:var(--tinta);color:var(--papel);opacity:1}
.c-tinta .conta-linha--mes .conta-quando{border-color:var(--verde);background:var(--verde);color:var(--tinta)}
.conta-valor{font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.025em;line-height:1.15}
.conta-valor strong{font-weight:600;white-space:nowrap}
.conta-valor s{margin-left:.2em;font-size:.72em;font-weight:400;opacity:.62;white-space:nowrap}
.conta-nota{font-size:13.5px;line-height:1.45;color:var(--cinza-escuro);max-width:34ch}
.c-tinta .conta-nota{color:var(--cinza-claro)}.c-verde .conta-nota{color:#2c3817}
.conta-linha .plano-preco{margin-top:0}
.plano-de{font-size:13.5px;color:var(--cinza)}
.c-verde .plano-de{color:#3c4a25}
.plano-de strong{color:var(--tinta)}.c-tinta .plano-de strong{color:var(--papel)}
.plano-preco{display:flex;align-items:baseline;gap:.14em;margin-top:6px;font-size:clamp(40px,3.5vw,52px);font-weight:600;letter-spacing:-.05em;line-height:1}
.plano-preco i{font-style:normal;font-size:.36em;font-weight:500;letter-spacing:-.01em;color:var(--cinza)}
.c-verde .plano-preco i{color:#4d5f2f}
.plano-nota{margin-top:12px;font-size:13.5px;color:var(--cinza)}
.c-verde .plano-nota{color:#3c4a25}
.plano .btn{margin-top:24px}
.planos-nota{margin-top:22px;max-width:none}
.depois{margin-top:clamp(90px,10vw,150px)}
.depois-cartoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(40px,4.6vw,68px)}
.depois-cartoes .cartao{display:flex;flex-direction:column;min-height:clamp(280px,23vw,340px);padding:clamp(24px,2.3vw,34px)}
.depois-cartoes h3{font-size:clamp(22px,1.8vw,26px)}
.depois-cartoes p{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--cinza-escuro);max-width:42ch}
.depois-cartoes .c-tinta p{color:var(--cinza-claro)}.depois-cartoes .c-verde p{color:#2c3817}.depois-cartoes .c-verde strong{color:var(--tinta)}
.depois-base{margin-top:auto;padding-top:36px}
.depois-cartoes .cartao .depois-preco{margin:0;font-size:clamp(36px,3.2vw,46px);font-weight:600;letter-spacing:-.045em;line-height:1;color:inherit;max-width:none}
.depois-preco i{font-style:normal;font-size:.4em;font-weight:500;letter-spacing:-.01em;color:var(--cinza)}
.c-verde .depois-preco i{color:#4d5f2f}
.depois-cartoes .depois-nota{margin-top:10px;font-size:13px;color:var(--cinza)}
.depois-cartoes .c-verde .depois-nota{color:#3c4a25}
@media(max-width:999px){.planos,.depois-cartoes{grid-template-columns:1fr}.depois-cartoes .cartao{min-height:0}.plano-base{padding-top:40px}}

/* Como funciona */
.processo-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.luca{display:flex;align-items:center;gap:18px}
.luca-moldura{width:clamp(108px,10vw,148px);aspect-ratio:4/5;overflow:hidden;border-radius:47% 53% 51% 49%/42% 45% 55% 58%;background:var(--grafite);flex:none}
.luca-video{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.luca figcaption{display:grid;gap:4px;font-size:14px;line-height:1.35;color:var(--cinza-claro);max-width:19ch}
.luca figcaption strong{color:var(--papel);font-size:16px;font-weight:600}
.passos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(56px,7vw,104px);counter-reset:p}
.passos li{position:relative;padding-top:22px;border-top:1px solid var(--linha-clara)}
.passo-num{font-size:13.5px;font-weight:600;color:var(--verde)}
.passo-demo{position:relative;aspect-ratio:16/10;margin-top:18px;border-radius:18px;background:var(--grafite);overflow:hidden;container-type:inline-size}
.passos h3{margin-top:22px;font-size:clamp(21px,1.8vw,26px)}
.passos p{margin-top:12px;font-size:15px;line-height:1.5;color:var(--cinza-claro);max-width:40ch}
@media(max-width:899px){.processo-topo{flex-direction:column;align-items:flex-start}.passos{grid-template-columns:1fr;gap:36px}}

/* Dúvidas */
.duvidas-grade{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,90px);align-items:start}
.duvidas-lista{border-top:1px solid var(--linha-escura)}
.duvidas details{border-bottom:1px solid var(--linha-escura)}
.duvidas summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;font-size:clamp(18px,1.55vw,22px);font-weight:500;letter-spacing:-.018em;line-height:1.25;cursor:pointer;list-style:none}
.duvidas summary::-webkit-details-marker{display:none}
.mais{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:var(--tinta);transition:background-color .3s,transform .5s var(--mola)}
.mais::before,.mais::after{content:"";position:absolute;left:11px;right:11px;top:16px;height:2px;border-radius:2px;background:var(--verde);transition:transform .45s var(--suave),background-color .3s}
.mais::after{transform:rotate(90deg)}
details[open] .mais{background:var(--verde);transform:rotate(180deg)}
details[open] .mais::before,details[open] .mais::after{background:var(--tinta)}
details[open] .mais::after{transform:rotate(0)}
.duvidas details p{padding:0 58px 26px 0;font-size:16px;line-height:1.55;color:var(--cinza-escuro);max-width:62ch}
@media(max-width:899px){.duvidas-grade{grid-template-columns:1fr}.duvidas details p{padding-right:0}}

/* Contato */
.contato{position:relative;padding-top:clamp(90px,10vw,150px);overflow:hidden}
.contato-grade{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,5vw,90px);align-items:start}
.contato-olho{display:flex;align-items:center;gap:14px;font-size:15.5px}
.contato-olho svg{width:42px;height:42px;padding:10px;border:2px solid var(--verde);border-radius:50%;fill:var(--verde);flex:none}
.contato-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:clamp(28px,3vw,44px)}
.contato-acoes .miudo{max-width:34ch}
.formulario{padding:clamp(24px,2.4vw,34px)}
.form-topo{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--linha-clara)}
.form-topo h3{font-size:24px}
.form-topo span{font-size:12.5px;color:var(--cinza-claro)}
.form-campos{display:grid;gap:20px;margin-top:22px}
.campo label,.formulario legend{display:block;margin-bottom:8px;padding:0;font-size:14px;font-weight:500;color:var(--cinza-claro)}
.campo input{width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--linha-clara);border-radius:14px;background:rgba(243,243,239,.04);color:var(--papel);font:inherit;font-size:16px;transition:border-color .25s,background-color .25s}
.campo input::placeholder{color:var(--cinza)}
.campo input:focus{outline:none;border-color:var(--verde);background:rgba(184,243,107,.06)}
.campo input[aria-invalid="true"]{border-color:#ffb199}
.campo-erro{margin-top:7px;font-size:13px;color:#ffb199}
.formulario fieldset{margin:0;padding:0;border:0;min-width:0}
.opcoes{display:flex;flex-wrap:wrap;gap:8px}
.opcoes label{position:relative;cursor:pointer}
.opcoes input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opcoes span{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border:1px solid var(--linha-clara);border-radius:99px;font-size:14.5px;font-weight:500;transition:background-color .25s,color .25s,border-color .25s,transform .35s var(--mola)}
.opcoes input:checked+span{background:var(--verde);border-color:var(--verde);color:var(--tinta);transform:scale(1.04)}
.opcoes input:focus-visible+span{outline:2px solid var(--verde);outline-offset:3px}
.form-nota{font-size:13px;color:var(--cinza-claro)}
.form-status{font-size:14px;color:var(--verde);min-height:0}
.form-status:empty{display:none}
.form-reserva{font-size:15px;font-weight:600;color:var(--verde);text-decoration:underline;text-underline-offset:4px}
/* Lettering gigante: nasce borrado, como uma ideia, e ganha foco. Sem JS, fica o borrão do material da marca. */
.foco{position:relative;z-index:1;height:clamp(120px,22.5vw,360px);margin-top:clamp(56px,7vw,110px);pointer-events:none}
.foco svg{position:absolute;left:50%;top:0;width:min(1640px,108vw);height:auto;aspect-ratio:432/118;margin-left:calc(min(1640px,108vw)/-2);fill:var(--papel);color:var(--papel)}
.foco-borrado{filter:blur(clamp(12px,2.3vw,34px));opacity:.92}
.foco-nitido{opacity:0}
@media(max-width:899px){.contato-grade{grid-template-columns:1fr}}

/* Rodapé */
.rodape{padding-block:clamp(48px,5vw,76px) 34px;border-top:1px solid var(--linha-clara)}
.rodape-topo{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(28px,5vw,90px);align-items:start}
.rodape-marca{display:grid;gap:6px;width:clamp(150px,15vw,214px);color:var(--papel)}
.rodape-marca svg{width:100%;height:auto;fill:currentColor}
.rm-efor{aspect-ratio:432/118}.rm-studio{aspect-ratio:416/96;width:96.3%!important}
.rodape-texto{display:grid;gap:14px;font-size:14.5px;line-height:1.5;color:var(--cinza-claro)}
.rodape-conceito{font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.035em;line-height:1.05;color:var(--papel)}
.rodape-nav{display:grid;gap:10px;font-size:15px;font-weight:500}
.rodape-nav a{opacity:.82}.rodape-nav a:hover{opacity:1}
.rodape-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;margin-top:clamp(44px,5vw,72px);padding-top:22px;border-top:1px solid var(--linha-clara);font-size:13px;color:var(--cinza)}
.rodape-base p:nth-child(2){flex:1;min-width:260px}
.rodape-base a{color:var(--cinza-claro);text-decoration:underline;text-underline-offset:3px}
@media(max-width:799px){.rodape-topo{grid-template-columns:1fr}.rodape{padding-bottom:104px}}

/* Atalho fixo no celular */
.cta-movel{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 20px;border-radius:99px;background:var(--papel);color:var(--tinta);box-shadow:0 18px 50px rgba(0,0,0,.45);font-size:14.5px;transition:transform .5s var(--suave),opacity .3s}
.cta-movel[hidden]{display:flex;transform:translateY(140%);opacity:0;pointer-events:none}
.cta-movel a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:99px;background:var(--tinta);color:var(--verde);font-weight:600}
.cta-movel svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:900px){.cta-movel{display:none!important}}

/* Diálogo de privacidade */
.dialogo{width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:clamp(24px,3vw,38px);border:0;border-radius:28px;background:var(--papel);color:var(--tinta)}
.dialogo::backdrop{background:rgba(22,24,21,.72);backdrop-filter:blur(6px)}
.dialogo-topo{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.dialogo h2{margin:0;font-size:32px}
.dialogo p{margin-top:14px;font-size:15.5px;line-height:1.55;color:var(--cinza-escuro)}
.dialogo-fechar{display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:var(--tinta);color:var(--verde)}
.dialogo-fechar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* ?captura (scripts de conferência): sem transições, para a foto sair no estado final. */
.captura *,.captura *::before,.captura *::after{transition:none!important;animation:none!important}

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