/* ==========================================================================
   Bencke's Tile, home v2. BASE.
   Dono: agente BASE. Quem cuida de secao NAO edita este arquivo: escreve o proprio s-<nome>.css.
   Ordem de carga: base.css primeiro, depois s-<nome>.css na ordem das secoes (montar.py).
   Tudo aqui usa os tokens de :root; leia o CONTRATO.md antes de criar classe nova.
   ========================================================================== */

@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-standard.woff2") format("woff2");
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}

/* ------------------------------------------------------------------ tokens */
:root{
  /* marca */
  --lima:#C5D301;        /* preenchimento de botao (texto grafite). Texto lima so sobre grafite/profundo */
  --grafite:#262626;
  --profundo:#1C1C1B;    /* secoes escuras alternadas, fita, rodape */
  --papel:#F4F2EC;       /* fundo padrao de pagina */
  --branco:#FFFFFF;
  --pedra:#DDDBD4;       /* secao alternada; texto secundario sobre grafite */
  --rejunte:#8F8E87;     /* SO fio e detalhe, nunca texto */
  --texto2:#5C5B55;      /* texto secundario sobre papel/branco */

  /* forma */
  --r-lg:20px;           /* cartao grande e foto */
  --r-md:14px;           /* cartao pequeno */
  --r-sm:12px;           /* campo */
  --r-pill:999px;        /* botao */
  --sombra:0 40px 70px -34px rgba(28,28,27,.5);
  --sombra-sm:0 20px 40px -26px rgba(28,28,27,.4);

  /* movimento */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);

  /* layout */
  --wrap-w:1248px;                              /* largura util: no 1440 a margem lateral e 96px */
  --gutter:clamp(20px,5vw,60px);
  --edge:max(var(--gutter),calc((100% - var(--wrap-w)) / 2)); /* margem esquerda do conteudo (use dentro de bloco de largura total) */
  --sec-y:clamp(72px,9vw,128px);                /* respiro vertical de secao */
  --h2:clamp(32px,3.7vw,52px);                  /* UM tamanho para todo H2 */
  --hd-h:88px;                                  /* altura do cabecalho (muda para 68 ao rolar) */
  --hd-solid:68px;
  --pull:clamp(60px,6.5vw,96px);                /* quanto a fita invade o hero e a secao seguinte */
}
@media (max-width:1099px){ :root{ --hd-h:72px; --hd-solid:60px } }

/* ------------------------------------------------------------------ base */
*,*::before,*::after{ box-sizing:border-box }
/* consultor, 13/10: sem scroll-behavior:smooth; ele quebrava o ScrollTrigger.refresh() da cena das camadas, e o base.js ja suaviza roda e ancora */
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--papel); color:var(--grafite);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; font-weight:400; font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
html{ overflow-x:clip }
img,svg{ display:block; max-width:100% }
a{ color:inherit }
button,input,textarea,select{ font:inherit; color:inherit }
button{ cursor:pointer }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0 }
ul,ol{ padding:0; list-style:none }
[id]{ scroll-margin-top:calc(var(--hd-solid) + 16px) }
:focus-visible{ outline:2px solid var(--grafite); outline-offset:3px }
.sec--dark :focus-visible,.hero :focus-visible,.hd :focus-visible,.ft :focus-visible{ outline-color:#fff }
.sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.sprite{ position:absolute; width:0; height:0; overflow:hidden }
.skip{ position:fixed; top:-80px; left:16px; z-index:400; padding:12px 18px; border-radius:var(--r-pill); background:#fff; color:var(--grafite); font-weight:600; text-decoration:none }
.skip:focus{ top:16px }

/* icones: <svg class="i"><use href="#i-phone"/></svg> (sprite no 01-header.html) */
.i{ width:22px; height:22px; flex:0 0 auto }

/* pendente de confirmacao do dono: so sublinhado pontilhado */
.pend{ border-bottom:1px dotted var(--rejunte); cursor:help }
.sec--dark .pend,.hero .pend,.ft .pend{ border-bottom-color:rgba(221,219,212,.6) }

/* ------------------------------------------------------------------ tipografia */
.h2{
  font-size:var(--h2); font-weight:600; line-height:1.06; letter-spacing:-.045em; text-wrap:balance;
}
.h3{ font-size:clamp(20px,1.7vw,24px); font-weight:600; line-height:1.2; letter-spacing:-.03em }
.kick{
  display:block; margin:0 0 14px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--texto2);
}
.sec--dark .kick{ color:var(--pedra) }
.lead{ font-size:clamp(17px,1.35vw,19px); line-height:1.55; color:var(--texto2); max-width:56ch }
.sec--dark .lead{ color:var(--pedra) }
.lnk{
  display:inline-flex; align-items:center; gap:9px; min-height:44px; font-size:15.5px; font-weight:600; text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat; padding-bottom:2px;
  transition:background-size .35s var(--ease-out);
}
.lnk:hover{ background-size:0 1px; background-position:100% 100% }
.lnk svg{ width:16px; height:16px; transition:transform .3s var(--ease-out) }
.lnk:hover svg{ transform:translateX(4px) }

/* ------------------------------------------------------------------ layout */
.wrap{ width:min(var(--wrap-w),100% - 2 * var(--gutter)); margin-inline:auto }
.sec{ position:relative; padding-block:var(--sec-y) }
.sec--paper{ background:var(--papel); color:var(--grafite) }
.sec--white{ background:var(--branco); color:var(--grafite) }
.sec--stone{ background:var(--pedra); color:var(--grafite) }
.sec--dark{ background:var(--profundo); color:#fff }
.sec__head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px 32px; margin-bottom:clamp(28px,3.6vw,52px) }

/* ------------------------------------------------------------------ botao pilula
   <a class="btn btn--lima" href="#estimate"><span class="btn__t">Get My Free Estimate</span>
     <span class="btn__ic" aria-hidden="true"><svg><use href="#i-arrow"/></svg><svg><use href="#i-arrow"/></svg></span></a>
   Variantes: --lima (principal), --dark, --light, --ghost (contorno claro, sobre escuro). Tamanho: --sm. Largura total: --block.
   A seta e uma so desenhada duas vezes: no hover a primeira sai e a segunda entra. */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:16px; height:56px; padding:0 8px 0 26px;
  border:0; border-radius:var(--r-pill); font-size:16px; font-weight:600; line-height:1; text-decoration:none; white-space:nowrap;
  transform:translate3d(var(--mx,0px),var(--my,0px),0);
  transition:background-color .3s, color .3s, box-shadow .3s, border-color .3s, transform .45s var(--ease-out);
}
.btn.is-mag{ transition:background-color .3s, color .3s, box-shadow .3s, border-color .3s, transform .12s linear }
.btn::after{ /* brilho que varre no hover */
  content:""; position:absolute; z-index:-1; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent); transform:skewX(-14deg); transition:left .8s var(--ease-out); pointer-events:none;
}
.btn:hover::after{ left:130% }
.btn__t{ position:relative }
.btn__ic{
  position:relative; display:grid; place-items:center; flex:0 0 auto; width:40px; height:40px; border-radius:50%; overflow:hidden;
  background:var(--grafite); color:#fff;
}
.btn__ic svg{ grid-area:1/1; width:18px; height:18px; transition:transform .5s var(--ease-out) }
.btn__ic svg:last-child{ transform:translateX(-190%) }
.btn:hover .btn__ic svg:first-child{ transform:translateX(190%) }
.btn:hover .btn__ic svg:last-child{ transform:none }
.btn--lima{ background:var(--lima); color:var(--grafite) }
.btn--dark{ background:var(--grafite); color:#fff }
.btn--dark .btn__ic{ background:#fff; color:var(--grafite) }
.btn--light{ background:#fff; color:var(--grafite) }
.btn--ghost{ background:rgba(255,255,255,.06); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5) }
.btn--ghost .btn__ic{ background:rgba(255,255,255,.16) }
.btn--ghost:hover{ background:rgba(255,255,255,.16) }
.btn--sm{ height:48px; padding:0 5px 0 22px; gap:14px; font-size:14.5px }
.btn--sm .btn__ic{ width:38px; height:38px }
.btn--sm .btn__ic svg{ width:16px; height:16px }
.btn--block{ display:flex; width:100%; justify-content:space-between }

/* ------------------------------------------------------------------ cartoes, foto, campo
   <article class="card"> ... </article>   <figure class="photo"><img ...></figure> */
.card{ background:var(--branco); color:var(--grafite); border-radius:var(--r-lg); box-shadow:var(--sombra) }
.card--sm{ border-radius:var(--r-md); box-shadow:var(--sombra-sm) }
.card--paper{ background:var(--papel) }
.card--dark{ background:var(--profundo); color:#fff; box-shadow:none }
.photo{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--pedra) }
.photo>img{ width:100%; height:100%; object-fit:cover }
.field{ display:grid; gap:7px }
.field__l{ font-size:13px; font-weight:600; color:var(--texto2) }
.field input,.field select,.field textarea{
  width:100%; min-height:54px; padding:12px 18px; border:1px solid var(--rejunte); border-radius:var(--r-sm); background:#fff; color:var(--grafite);
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--grafite); box-shadow:0 0 0 3px rgba(38,38,38,.12) }

/* ------------------------------------------------------------------ movimento (base.js)
   Estado sem JS = tudo visivel: nada abaixo esconde sem o <html class="js">. */
.js [data-rv]{
  opacity:0; transition:opacity .85s var(--ease-out), transform .95s var(--ease-out), clip-path 1s var(--ease-out);
  transition-delay:var(--rv-d,0ms);
}
.js [data-rv="up"]{ transform:translateY(32px) }
.js [data-rv="scale"]{ transform:scale(.94) }
.js [data-rv="mask"]{ opacity:1; clip-path:inset(100% 0 0 0) }
.js [data-rv="mask"]>img,.js [data-rv="mask"]>picture img{ transform:scale(1.14); transition:transform 1.3s var(--ease-out); transition-delay:var(--rv-d,0ms) }
/* consultor, 13/10: so a variante mask usa clip-path; nas outras ele cortava a sombra dos cartoes */
.js [data-rv].is-in{ opacity:1; transform:none }
.js [data-rv="mask"].is-in{ clip-path:inset(0 0 0 0) }
.js [data-rv="mask"].is-in>img,.js [data-rv="mask"].is-in>picture img{ transform:none }

/* data-words: o titulo sobe palavra por palavra (base.js embrulha cada palavra) */
.wd{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.16em; margin-bottom:-.16em }
.wd>i{ display:inline-block; font-style:normal }
.words-ready:not(.is-in) .wd>i{ transform:translateY(115%) }
.words-ready .wd>i{ transition:transform .7s var(--ease-out); transition-delay:calc(var(--wi,0) * 80ms) }

/* data-light: frase que acende palavra por palavra com a rolagem (sem JS fica acesa) */
.lw{ display:inline; opacity:calc(.18 + .82 * var(--w,1)); transition:opacity .12s linear }

/* data-parallax: so liga quando o JS poe .px-on (>= 760px, sem movimento reduzido) */
.px-on [data-parallax]{ transform:translate3d(0,var(--py,0px),0); will-change:transform }

/* ------------------------------------------------------------------ cabecalho */
.hd{
  position:fixed; inset:0 0 auto; z-index:300; height:var(--hd-h); color:#fff;
  transition:height .3s var(--ease-out), background-color .3s, box-shadow .3s;
}
.hd::before{ /* veu de leitura enquanto o cabecalho e transparente */
  content:""; position:absolute; inset:0 0 -24px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(28,28,27,.55),rgba(28,28,27,0)); transition:opacity .3s;
}
.hd.is-solid,.hd.is-open{ --hd-h:var(--hd-solid); background:var(--grafite); box-shadow:0 14px 34px -18px rgba(0,0,0,.65) }
.hd.is-solid::before,.hd.is-open::before{ opacity:0 }
.hd.is-open{ box-shadow:none }
.hd__bar{
  position:relative; z-index:2; height:100%; width:min(var(--wrap-w),100% - 2 * var(--gutter)); margin-inline:auto;
  display:flex; align-items:center; gap:clamp(18px,2.6vw,40px);
}
.hd__logo{ flex:0 0 auto; display:flex; align-items:center; min-height:44px }
.hd__logo img{ height:52px; width:auto; transition:height .3s var(--ease-out) }
.hd.is-solid .hd__logo img,.hd.is-open .hd__logo img{ height:44px }
.hd__nav{
  display:flex; align-items:center; gap:clamp(18px,2.2vw,32px); margin-left:auto; height:52px; padding:0 clamp(20px,2vw,30px); border-radius:var(--r-pill);
  background:rgba(28,28,27,.58); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
/* auditoria 13/10/2026: vidro escuro, nao claro. Sobre azulejo branco do hero o texto branco ficava em 3,1 a 3,7:1; o telefone ganha o mesmo vidro enquanto o cabecalho e transparente */
.hd:not(.is-solid):not(.is-open) .hd__tel{ padding:0 16px; border-radius:var(--r-pill); background:rgba(28,28,27,.58); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px) }
.hd__nav a{ position:relative; display:flex; align-items:center; min-height:44px; font-size:15px; font-weight:500; text-decoration:none; white-space:nowrap }
.hd__nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:9px; height:1px; background:currentColor; transition:right .4s var(--ease-out) }
.hd__nav a:hover::after,.hd__nav a:focus-visible::after{ right:0 }
.hd__tel{ display:inline-flex; align-items:center; gap:9px; min-height:44px; font-size:15px; font-weight:600; text-decoration:none; white-space:nowrap }
.hd__tel .i{ width:18px; height:18px }
.hd__cta .btn__t{ transition:none }
.hd.cta-lima .hd__cta{ background:var(--lima); color:var(--grafite); box-shadow:inset 0 0 0 1px var(--lima) }
.hd.cta-lima .hd__cta .btn__ic{ background:var(--grafite); color:#fff }
.hd__mob{ display:none; margin-left:auto; gap:10px }
.hd__ib{
  width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.4); border-radius:50%; background:rgba(255,255,255,.06);
  color:#fff; text-decoration:none; padding:0;
}
.hd__ib .i{ width:19px; height:19px }
.hd__burger{ align-content:center; gap:6px }
.hd__burger span{ display:block; width:20px; height:1.6px; background:#fff; transition:transform .35s var(--ease-out) }
.hd__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.8px) rotate(45deg) }
.hd__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.8px) rotate(-45deg) }

/* menu em tela cheia (celular e tablet) */
.menu{
  position:fixed; inset:0; z-index:1; background:var(--grafite);
  padding:calc(var(--hd-solid) + 24px) var(--gutter) max(28px,env(safe-area-inset-bottom));
  display:flex; flex-direction:column; justify-content:space-between; gap:28px; overflow-y:auto;
  opacity:0; visibility:hidden; transition:opacity .3s, visibility 0s .3s;
}
.menu.is-open{ opacity:1; visibility:visible; transition:opacity .3s, visibility 0s }
.menu__list li,.menu__foot{ opacity:0; transform:translateY(20px); transition:opacity .35s, transform .35s }
.menu.is-open .menu__list li,.menu.is-open .menu__foot{
  opacity:1; transform:none; transition:opacity .6s var(--ease-out), transform .7s var(--ease-out); transition-delay:calc(var(--i,0) * 60ms + 140ms);
}
.menu__list a{
  display:block; padding:15px 0; font-size:clamp(34px,10vw,48px); font-weight:600; letter-spacing:-.04em; line-height:1.05; text-decoration:none;
  border-bottom:1px solid rgba(143,142,135,.3);
}
.menu__foot{ display:grid; gap:16px }
.menu__tel{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; font-weight:600; text-decoration:none; color:var(--pedra) }
.menu__tel .i{ width:18px; height:18px }
html.menu-open{ overflow:hidden }

@media (max-width:1099px){
  .hd__nav,.hd__tel,.hd__cta{ display:none }
  .hd__mob{ display:flex }
  .hd__logo img{ height:36px }
  .hd.is-solid .hd__logo img,.hd.is-open .hd__logo img{ height:34px }
}
html:not(.js) .hd__burger{ display:none }
html:not(.js) .menu{ display:none }
@media (min-width:1100px){ .menu{ display:none } }

/* ------------------------------------------------------------------ hero
   Estrutura aprovada pelo Vitor (v3b): H1 + sub + telefone + prova a esquerda, cartao do formulario
   como protagonista sobre a emenda, foto (mostruario) a direita ocupando ~45%. */
.hero{
  --copy-w:clamp(340px,29vw,430px);
  --card-w:clamp(430px,34vw,500px);
  --gap:clamp(32px,3.9vw,56px);
  --pt:calc(var(--hd-h) + 60px);
  --pb:112px;
  --tile:96px;
  position:relative; z-index:1; background:var(--grafite); color:#fff;
  display:grid; grid-template-columns:var(--copy-w) var(--card-w) minmax(0,1fr);
  grid-template-areas:"copy side photo" "proofs side photo"; grid-template-rows:auto 1fr; column-gap:var(--gap);
  min-height:clamp(660px,94svh,860px);
  padding:var(--pt) 0 var(--pb) var(--edge);
  /* 13/10, Vitor: a fileira de azulejos da base saiu (puxava o olho para longe dos CTAs) */
}
.hero__copy{ grid-area:copy; min-width:0; padding-top:28px }
.hero__h1{
  font-size:clamp(34px,3.25vw,48px); font-weight:600; line-height:1.04; letter-spacing:-.045em; text-wrap:balance;
}
.hero__h1 .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.16em; margin-bottom:-.16em }
.hero__h1 .w>i{ display:inline-block; font-style:normal; animation:wordUp .75s var(--ease-out) both; animation-delay:calc(160ms + var(--i,0) * 80ms) }
.hero__sub{ margin-top:20px; max-width:46ch; color:var(--pedra); font-size:clamp(16px,1.2vw,18px); line-height:1.55; animation:riseIn .9s var(--ease-soft) both .75s }
.hero__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:26px; animation:riseIn .9s var(--ease-soft) both .9s }
.hero__btn{ display:none }
.hero__tel{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:17px; font-weight:600; text-decoration:none }
.hero__tel .i{ width:18px; height:18px; color:var(--pedra) }
.hero__proofs{
  grid-area:proofs; align-self:end; margin-top:34px; padding-top:22px; border-top:1px solid rgba(143,142,135,.45);
  display:flex; flex-wrap:wrap; gap:14px 26px; font-size:14.5px; font-weight:500; animation:riseIn .9s var(--ease-soft) both 1.05s;
}
.hero__proofs li{ display:flex; align-items:center; gap:9px; line-height:1.35 }
.hero__proofs .i{ width:19px; height:19px; color:var(--pedra) }
.hero__rate{ flex-basis:100% }
.hero__rate b{ font-size:21px; font-weight:600; letter-spacing:-.03em }
.stars{ display:inline-flex; gap:2px; color:#fff }
.stars svg{ width:16px; height:16px }

.hero__side{ grid-area:side; align-self:center; position:relative; z-index:3; min-width:0; scroll-margin-top:calc(var(--hd-solid) + 24px); animation:riseIn 1s var(--ease-soft) both .45s }
.hero__photo{
  grid-area:photo; position:relative; z-index:1; min-width:0; overflow:hidden; background:var(--profundo);
  margin:calc(-1 * var(--pt)) 0 calc(-1 * var(--pb)) calc(-1 * (var(--gap) + var(--card-w) / 2));
}
.hero__photo::after{ /* veu: legenda legivel embaixo, cabecalho legivel em cima */
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(0deg,rgba(28,28,27,.78) 0,rgba(28,28,27,0) 34%),linear-gradient(180deg,rgba(28,28,27,.35) 0,rgba(28,28,27,0) 22%);
}
.hero__slides{ position:absolute; inset:0; animation:zoomOut 1.8s var(--ease-soft) both }
.hero__slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:42% 50%;
  clip-path:inset(0 100% 0 0); transform:scale(1.06);
  transition:clip-path 1.05s var(--ease-soft), transform 1.5s var(--ease-out);
}
.hero__slide.is-active{ clip-path:inset(0 0 0 0); transform:none; z-index:2 }
.hero__slide.is-prev{ clip-path:inset(0 0 0 0); transform:none; z-index:1; transition:none }
.hero__show{
  position:absolute; z-index:4; left:0; right:0; bottom:calc(var(--pull-ui,150px)); padding:0 clamp(20px,2.6vw,40px) 0 calc(var(--card-w) / 2 + 30px);
  display:grid; gap:14px;
}
.hero__cap{ font-size:15px; font-weight:500; line-height:1.35; max-width:38ch; text-shadow:0 1px 12px rgba(0,0,0,.4); transition:opacity .35s }
.hero__cap.is-out{ opacity:0 }
.hero__prog{ display:flex; align-items:center; gap:10px; height:44px }
.hero__num{ min-width:34px; height:44px; padding:0; border:0; background:none; color:var(--pedra); font-size:15px; font-weight:600; opacity:.6; transition:opacity .3s }
.hero__num.is-active,.hero__num:hover{ opacity:1; color:#fff }
.hero__bar{ flex:1; height:2px; border-radius:2px; overflow:hidden; background:rgba(255,255,255,.28) }
.hero__bar i{ display:block; height:100%; background:#fff; transform:scaleX(0); transform-origin:left }

/* cartao do formulario (2 passos) */
.fcard{ background:#fff; color:var(--grafite); border-radius:var(--r-lg); padding:32px 32px 30px; box-shadow:0 44px 80px -34px rgba(0,0,0,.7) }
.fcard__h{ font-size:clamp(23px,2vw,29px); font-weight:600; letter-spacing:-.04em; line-height:1.1 }
.fcard__nodes{ position:relative; height:10px; margin:20px 0 24px }
.fcard__nodes::before,.fcard__nodes::after{ content:""; position:absolute; left:4px; right:4px; top:4px; height:2px; border-radius:2px }
.fcard__nodes::before{ background:var(--pedra) }
.fcard__nodes::after{ background:var(--grafite); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out) }
.fcard[data-at="2"] .fcard__nodes::after{ transform:scaleX(1) }
.fcard__nodes i{ position:absolute; top:0; width:10px; height:10px; border-radius:50%; background:var(--grafite) }
.fcard__nodes i:first-child{ left:0 }
.fcard__nodes i:last-child{ right:0; background:#fff; box-shadow:inset 0 0 0 2px var(--pedra); transition:background-color .4s .25s, box-shadow .4s .25s }
.fcard[data-at="2"] .fcard__nodes i:last-child{ background:var(--grafite); box-shadow:none }
.fstep[hidden]{ display:none }
.fstep.is-in{ animation:stepIn .5s var(--ease-out) both }
.fstep fieldset{ border:0; margin:0; padding:0; min-width:0 }
.fstep__head{ display:flex; align-items:center; gap:11px; margin:0 0 18px; padding:0; font-size:16px; font-weight:600; letter-spacing:-.01em; float:left; width:100% }
.fstep__head+*{ clear:both }
.badge{ width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--grafite); color:#fff; font-size:13px; font-weight:600 }
.opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px }
.opt{ position:relative; display:block }
.opt input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1 }
.opt--wide{ grid-column:1 / -1 }
.opt__box{
  display:flex; align-items:center; gap:9px; min-height:58px; padding:8px 12px 8px 15px; border:1px solid var(--rejunte); border-radius:var(--r-pill); background:#fff;
  font-size:14.4px; font-weight:500; line-height:1.22; transition:border-color .2s, background-color .2s, box-shadow .2s, transform .3s var(--ease-out);
}
.opt__ic{ width:22px; height:22px; color:var(--texto2) }
.opt__t{ flex:1; min-width:0 }
.opt__tick{ flex:0 0 auto; width:18px; height:18px; display:grid; place-items:center; border:1px solid var(--rejunte); border-radius:50%; background:#fff; transition:background-color .2s, border-color .2s }
.opt__tick svg{ width:11px; height:11px; color:#fff; opacity:0; transform:scale(.4); transition:opacity .2s, transform .3s var(--ease-out) }
.opt:hover .opt__box{ border-color:var(--grafite) }
.opt input:checked+.opt__box{ border-color:var(--grafite); box-shadow:inset 0 0 0 1px var(--grafite); background:var(--papel) }
.opt input:checked+.opt__box .opt__ic{ color:var(--grafite) }
.opt input:checked+.opt__box .opt__tick{ background:var(--grafite); border-color:var(--grafite) }
.opt input:checked+.opt__box .opt__tick svg{ opacity:1; transform:none }
.opt input:focus-visible+.opt__box{ outline:2px solid var(--grafite); outline-offset:2px }
.fields{ display:grid; gap:14px }
.fcard__row{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:24px }
.fcard__note{ font-size:13px; line-height:1.4; color:var(--texto2); max-width:26ch }
.fcard__back{ min-height:44px; padding:0 4px; border:0; background:none; font-weight:600; font-size:15px; text-decoration:underline; text-underline-offset:5px }
.fcard__done{ padding:6px 0 2px; font-size:16px; font-weight:500 }

@keyframes wordUp{ from{ transform:translateY(115%) } to{ transform:none } }
@keyframes riseIn{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
@keyframes stepIn{ from{ opacity:0; transform:translateX(18px) } to{ opacity:1; transform:none } }
@keyframes zoomOut{ from{ transform:scale(1.08) } to{ transform:none } }

/* tablet e celular: a foto vem antes do texto (regra do Matheus) */
@media (max-width:1099px){
  .hero{
    --tile:64px; --pt:0px; --pb:72px; display:flex; flex-direction:column; min-height:0; padding:0 0 var(--pb);
  }
  .hero__photo{ order:0; margin:0; height:clamp(320px,82vw,480px) }
  .hero__copy{ order:1; padding-top:26px }
  .hero__proofs{ order:2; margin-top:26px }
  .hero__side{ order:3; margin-top:30px; max-width:640px }
  .hero__copy,.hero__proofs,.hero__side{ margin-inline:var(--gutter); max-width:none; align-self:stretch }
  .hero__side{ max-width:640px; width:auto }
  .hero__h1{ font-size:clamp(34px,9vw,52px) }
  .hero__btn{ display:inline-flex }
  .hero__show{ padding:0 var(--gutter); --pull-ui:22px }
  .hero__photo::after{ background:linear-gradient(0deg,rgba(28,28,27,.78) 0,rgba(28,28,27,0) 40%),linear-gradient(180deg,rgba(28,28,27,.5) 0,rgba(28,28,27,0) 26%) }
  .fcard{ padding:26px 20px 24px }
}
@media (max-width:520px){
  .opts{ grid-template-columns:1fr }
  .fcard__row{ flex-direction:column-reverse; align-items:stretch; gap:10px }
  .fcard__row .btn{ width:100%; justify-content:space-between }
  .fcard__note{ max-width:none }
  .fcard__back{ align-self:center }
}

/* ------------------------------------------------------------------ fita da Broud, RETA (13/10: o João preferiu sem a diagonal)
   <div class="ribbon" data-ribbon aria-hidden="true"><div class="ribbon__band"><div class="ribbon__track"><span>texto&nbsp;</span></div></div></div> */
.ribbon{ position:relative; z-index:4; overflow:hidden; pointer-events:none }
.ribbon__band{
  height:clamp(56px,5.6vw,76px); display:flex; align-items:center; overflow:hidden;
  background:var(--profundo); color:var(--pedra);
}
.ribbon__track{ display:flex; flex:none; white-space:nowrap; will-change:transform; font-size:clamp(20px,2.3vw,32px); font-weight:500; letter-spacing:-.03em }

/* ------------------------------------------------------------------ rodape (padrao Maid) */
.ft{ background:var(--profundo); color:var(--pedra); font-size:15px }
.ft__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px clamp(24px,4vw,64px); padding-block:clamp(56px,6vw,88px) clamp(40px,4vw,64px) }
.ft__logo img{ height:60px; width:auto }
.ft__nap{ margin-top:20px; max-width:34ch; line-height:1.55 }
.ft__nap strong{ color:#fff; font-weight:600 }
.ft__big{ display:inline-flex; align-items:center; gap:12px; margin-top:22px; min-height:48px; font-size:clamp(24px,2.4vw,32px); font-weight:600; letter-spacing:-.035em; color:#fff; text-decoration:none }
.ft__big .i{ width:22px; height:22px }
.ft__ct{ display:flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; color:var(--pedra) }
.ft__ct .i{ width:18px; height:18px }
.ft__ct:hover,.ft__col a:hover{ color:#fff }
.ft__soc{ display:grid; place-items:center; width:46px; height:46px; margin-top:12px; border:1px solid rgba(143,142,135,.5); border-radius:50%; color:#fff; transition:background-color .3s }
.ft__soc:hover{ background:rgba(255,255,255,.1) }
.ft__col h3{ margin-bottom:16px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#fff }
.ft__col li a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:var(--pedra); transition:color .2s }
.ft__bar{ border-top:1px solid rgba(143,142,135,.3) }
.ft__barin{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:22px; font-size:13.5px }
@media (max-width:1099px){ .ft__top{ grid-template-columns:1fr 1fr } .ft__brand{ grid-column:1 / -1 } }
@media (max-width:520px){ .ft__top{ grid-template-columns:1fr 1fr; gap:36px 20px } }

/* barra fixa do celular */
.bc{ display:none }
@media (max-width:760px){
  body{ padding-bottom:78px }
  .bc{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:250; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96); border-top:1px solid var(--pedra);
  }
  .bc a{ display:flex; align-items:center; justify-content:center; gap:9px; min-height:52px; border-radius:var(--r-pill); font-size:15px; font-weight:600; text-decoration:none }
  .bc .i{ width:18px; height:18px }
  .bc__call{ flex:1 1 0; border:1px solid var(--grafite); color:var(--grafite); background:#fff }
  .bc__est{ flex:2 1 0; background:var(--lima); color:var(--grafite) } /* 13/10, Vitor: CTA sempre em destaque */
}

/* ------------------------------------------------------------------ movimento reduzido */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; transition-delay:0ms !important }
  .hero__h1 .w>i{ transform:none }
  .hero__slide{ transition:none !important }
  .ribbon__track{ transform:none !important }
  .words-ready:not(.is-in) .wd>i{ transform:none }
  .js [data-rv]{ opacity:1; transform:none; clip-path:none }
  .js [data-rv="mask"]>img{ transform:none }
  .lw{ opacity:1 }
}


/* ================= hero, ajustes do Vitor (audio de 13/10 a noite)
   1. sem legenda e sem barra 01/02/03 sobre a foto (as obras continuam trocando);
   2. cidade do H1 em lima; 3. parte do subtitulo em negrito branco; 4. icone do telefone em lima;
   5. desktop: o formulario encosta a direita, alinhado com o fim do header, e o bloco da esquerda
      (texto + provas) fica centralizado na altura do formulario. "Texto, formulario basico, funciona." */
.hero__show{ display:none }
.hero__h1 .hl{ color:var(--lima) }
.hero__sub b{ color:#fff; font-weight:600 }
.hero__tel .i{ color:var(--lima) }
@media (min-width:1100px){
  .hero{
    grid-template-columns:minmax(0,1fr) var(--card-w);
    grid-template-areas:". side" "copy side" "proofs side" ". side";
    grid-template-rows:1fr auto auto 1fr;
    column-gap:clamp(48px,6vw,110px);
    padding:var(--pt) var(--edge) var(--pb) var(--edge);
  }
  .hero__copy{ padding-top:0; position:relative; z-index:3; max-width:560px }
  .hero__proofs{ align-self:start; position:relative; z-index:3; max-width:560px }
  .hero__photo{
    position:absolute; top:0; right:0; bottom:0; width:48%; margin:0; grid-area:auto;
  }
}


/* ================= hero, terceira rodada do Vitor e do Joao (13/10 a noite)
   faixa de texto removida; ligacao grande abaixo do H1 ("quanto mais feio, mais $$"); estrelas e G do Google em destaque */
.hero__call{ display:block; margin-top:22px; text-decoration:none; color:#fff; animation:riseIn .9s var(--ease-soft) both .6s }
.hero__call-l{ display:block; font-size:clamp(18px,1.55vw,22px); font-weight:700; color:var(--lima); letter-spacing:-.01em }
.hero__call-n{ display:flex; align-items:center; gap:.28em; margin-top:2px; font-size:clamp(40px,4.2vw,62px); font-weight:800; line-height:1.05; letter-spacing:-.035em; font-variant-numeric:tabular-nums }
.hero__call-n .i{ width:.62em; height:.62em; color:var(--lima); flex:none }
.hero__call:hover .hero__call-n{ text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:6px }
.hero__rate{ gap:10px }
.hero__g{ width:24px; height:24px; flex:none }
.hero__rate b{ font-size:24px }
.hero__rate .stars{ display:inline-flex; gap:3px }
.hero__rate .stars svg{ width:21px; height:21px; color:#FBBC05; fill:#FBBC05 }
@media (max-width:1099px){
  .hero__call-n{ font-size:clamp(36px,10.5vw,52px) }
}


/* ================= Vitor, 13/10 14:32: rotulo branco e o numero dentro de um container no verde dos CTAs */
.hero__call-l{ color:#fff }
.hero__call-n{
  display:inline-flex; margin-top:10px; padding:.16em .62em .16em .5em; border-radius:999px;
  background:var(--lima); color:var(--grafite); font-size:clamp(34px,3.5vw,52px);
  box-shadow:0 18px 40px -22px rgba(197,211,1,.55); transition:transform .25s var(--ease-out), filter .25s
}
.hero__call-n .i{ color:var(--grafite) }
.hero__call:hover .hero__call-n{ text-decoration:none; transform:translateY(-2px); filter:brightness(1.05) }
@media (max-width:1099px){
  .hero__call-n{ font-size:clamp(30px,9vw,44px) }
}