/* ============================================================================
   PROPOSTA B — a construção do dperrone.com na marca da Lead2You.
   Copiada a CONSTRUÇÃO (ritmo, densidade, razão tipográfica, ordem narrativa).
   Não copiada a aparência: paleta e tipografia vêm do manual de marca v3.0.
   Zero biblioteca, como a referência: nada de GSAP, Lenis, Three ou canvas.
   ============================================================================ */
:root{
  --ground:#03080E; --surface:#081017; --surface-2:#0E1720; --surface-3:#141F2A;
  --line:#18232D; --line-2:#243240;
  --fg:#E8EDF2; --fg-2:#A4ACB4; --fg-3:#848F9B; --fg-4:#5C6672;
  --cyan:#1DE6E8; --cyan-2:#5BF0F1; --cyan-deep:#0B7E80; --cyan-field:#04262B;
  --amber:#F1AF57;
  --l2y-pad:clamp(20px,5vw,80px);
  --l2y-gap:clamp(72px,10.42vw,150px);         /* 150px em 1440, como a referência */
  --ease:cubic-bezier(.16,1,.3,1);
  --r:18px; --r-lg:26px;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--fg);
  font-family:Geist,system-ui,sans-serif;font-weight:300;
  font-size:clamp(.95rem,1.05vw,1.02rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--cyan);color:var(--ground)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--ground)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--cyan-deep)}
*{scrollbar-color:var(--line-2) var(--ground);scrollbar-width:thin}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* --- razão tipográfica 12x, igual à referência (132px / 11px) --- */
.wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--l2y-pad)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.d1{font-size:clamp(2.9rem,7.6vw,6rem)}          /* hero */
.d2{font-size:clamp(2.3rem,5.6vw,4.75rem)}       /* cabeça de seção */
.d3{font-size:clamp(3.1rem,9vw,8.25rem)}         /* o fechamento: o maior da página */
.h-card{font-size:clamp(1.3rem,2.1vw,1.75rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.lede{font-size:clamp(1rem,1.25vw,1.15rem);color:var(--fg-2);line-height:1.6;max-width:46ch}
.lede b{color:var(--fg);font-weight:600}
.small{font-size:.9rem;color:var(--fg-3);line-height:1.6}
.mono{font-family:"Geist Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.kick{display:inline-flex;align-items:center;gap:14px;font-family:"Geist Mono",ui-monospace,monospace;
  font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);margin-bottom:22px}
.kick::before{content:"";width:34px;height:1px;background:var(--cyan);flex:none}
.ac{color:var(--cyan)}

/* --- botões pill, o vocabulário da referência --- */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:15px 28px;
  font-size:.95rem;font-weight:500;letter-spacing:-.01em;min-height:48px;
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),transform .22s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--cyan);color:var(--ground)}
.btn-solid:hover{background:var(--cyan-2)}
.btn-ghost{border:1px solid var(--line-2);color:var(--fg)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn svg{width:16px;height:16px}

/* --- nav fixa --- */
.nav{position:fixed;inset:0 0 auto;z-index:60;background:rgba(3,8,14,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:24px;height:76px}
.nav-mark{display:flex;align-items:center;gap:11px;margin-right:auto;min-height:44px}
.nav-mark img{height:26px;width:auto}
.nav-mark span{font-size:1.05rem;font-weight:600;letter-spacing:-.03em}
.nav-links{display:none;gap:30px}
.nav-links a{display:flex;align-items:center;min-height:44px;font-size:.95rem;color:var(--fg-2);transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--fg)}
.nav .btn{padding:11px 22px;font-size:.88rem;min-height:44px}
@media(min-width:1000px){.nav-links{display:flex}}

/* --- hero --- */
.hero{position:relative;padding-top:clamp(140px,19vh,214px);padding-bottom:clamp(72px,8vw,116px);overflow:clip}
.hero .d1 span{display:block}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}
.hero .lede{margin-top:26px}

/* --- faixa de número: 0,24 tela na referência --- */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-in{display:grid;gap:24px;padding-block:clamp(44px,5.2vw,72px);align-items:center}
@media(min-width:900px){.band-in{grid-template-columns:auto minmax(0,1fr) auto;gap:56px}}
.band-num{display:flex;align-items:baseline;gap:6px;line-height:.82}
.band-num b{font-size:clamp(3.6rem,7vw,5.6rem);font-weight:600;color:var(--cyan);letter-spacing:-.05em}
.band-num i{font-style:normal;font-size:clamp(1.2rem,2vw,1.7rem);color:var(--fg-3)}

/* --- marquee: 0,15 tela --- */
.mq{border-bottom:1px solid var(--line);padding-block:22px;overflow:clip;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:0;width:max-content;animation:slide 42s linear infinite}
.mq-track span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;
  font-family:"Geist Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.mq-track span::after{content:"";width:4px;height:4px;background:var(--cyan);flex:none;border-radius:50%}
@keyframes slide{to{transform:translateX(-50%)}}
.mq:hover .mq-track{animation-play-state:paused}

/* --- seções --- */
section{padding-block:var(--l2y-gap)}
.sec-head{max-width:min(920px,100%);margin-bottom:clamp(52px,6.2vw,90px)}
.sec-head .lede{margin-top:20px;max-width:52ch}
.step{background:var(--surface-3)}

/* --- grade de serviços: card grande + grade de 3 separada por fio --- */
.feat{border:1px solid var(--line);border-radius:var(--r-lg);overflow:clip;background:
  radial-gradient(120% 130% at 88% 12%, rgba(29,230,232,.10), transparent 58%), var(--surface)}
.feat-in{display:grid;gap:34px;padding:clamp(28px,3.4vw,52px)}
@media(min-width:1000px){.feat-in{grid-template-columns:minmax(0,.92fr) minmax(0,1fr);align-items:center;gap:52px}}
.tile-ico{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line-2);
  border-radius:13px;color:var(--cyan)}
.tile-ico svg{width:21px;height:21px}
.feat-tags{display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:26px}
.feat-tags li{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--fg-2);list-style:none}
.feat-tags li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);flex:none}
.feat-tags{padding:0;margin-inline:0}
.curve{width:100%;height:auto}
.curve-cap{display:block;text-align:right;margin-top:12px;font-family:"Geist Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}

.grid3{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:clip;margin-top:1px}
@media(min-width:760px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid3{grid-template-columns:repeat(3,1fr)}}
.cell{background:var(--ground);padding:clamp(26px,2.6vw,38px);display:flex;flex-direction:column;
  transition:background .3s var(--ease)}
.cell:hover{background:var(--surface)}
.cell-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:40px}
.cell-n{font-family:"Geist Mono",ui-monospace,monospace;font-size:.72rem;color:var(--fg-3);letter-spacing:.1em}
.cell h3{margin-bottom:12px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding:22px 0 0}
.tag{border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;font-size:.8rem;color:var(--fg-2)}

/* --- método: a seção que troca de fundo (uma em oito) --- */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:clip}
@media(min-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.steps{grid-template-columns:repeat(4,1fr)}}
.step-cell{background:var(--surface-3);padding:clamp(26px,2.6vw,36px)}
.step-cell .cell-n{color:var(--cyan)}
.step-cell h3{margin:26px 0 12px}

/* --- cases --- */
.cases{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:clip}
@media(min-width:900px){.cases{grid-template-columns:repeat(3,1fr)}}
.case{background:var(--ground);padding:clamp(26px,2.6vw,38px);display:flex;flex-direction:column}
.case dl{margin:26px 0;padding:22px 0;border-block:1px solid var(--line);display:grid;gap:13px}
.case .row{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.case dt{font-size:.88rem;color:var(--fg-3)}
.case dd{margin:0;font-family:"Geist Mono",ui-monospace,monospace;font-size:.95rem;color:var(--cyan);white-space:nowrap}

/* --- pareceres --- */
.quotes{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:clip;margin-top:1px}
@media(min-width:700px){.quotes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.quotes{grid-template-columns:repeat(4,1fr)}}
.quote{background:var(--ground);padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column}
.quote blockquote{margin:0;flex:1;font-size:.92rem;color:var(--fg-2);line-height:1.62}
.quote figcaption{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.quote b{display:block;font-size:.92rem;font-weight:500;color:var(--fg)}
.quote em{font-style:normal;display:block;margin-top:5px;font-family:"Geist Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)}

/* --- contato: o maior tipo da página --- */
.contact{text-align:center}
.contact .d3 span{color:var(--cyan)}
.contact .lede{margin:34px auto 0;text-align:center;max-width:52ch}
.form{margin-top:clamp(44px,5vw,68px);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);padding:clamp(24px,3vw,44px);text-align:left;max-width:900px;margin-inline:auto}
.f-grid{display:grid;gap:18px}
@media(min-width:760px){.f-grid{grid-template-columns:1fr 1fr}}
.f-full{grid-column:1/-1}
label{display:block;font-size:.85rem;color:var(--fg-2);margin-bottom:9px}
label i{font-style:normal;color:var(--cyan)}
input,select,textarea{width:100%;background:var(--ground);border:1px solid var(--line-2);border-radius:12px;
  padding:14px 16px;color:var(--fg);font:inherit;font-size:.95rem;min-height:50px;
  transition:border-color .2s var(--ease)}
input::placeholder,textarea::placeholder{color:var(--fg-3)}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);outline:none}
textarea{min-height:118px;resize:vertical}
.f-note{margin-top:20px;font-size:.82rem;color:var(--fg-3)}
.f-ok{display:none;margin-top:18px;border:1px solid var(--cyan-deep);background:var(--cyan-field);
  border-radius:12px;padding:14px 18px;font-size:.9rem;color:var(--cyan)}

/* --- notas --- */
.notes{border-top:1px solid var(--line)}
.note{border-bottom:1px solid var(--line)}
.note summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:22px;
  padding:26px 0;font-size:clamp(1rem,1.35vw,1.2rem);color:var(--fg);transition:color .2s var(--ease)}
.note summary::-webkit-details-marker{display:none}
.note summary:hover{color:var(--cyan)}
.note summary .cell-n{padding-top:6px;flex:none}
.note summary .plus{margin-left:auto;flex:none;position:relative;width:13px;height:13px;margin-top:8px}
.note summary .plus::before,.note summary .plus::after{content:"";position:absolute;background:var(--fg-3);transition:transform .3s var(--ease)}
.note summary .plus::before{inset:6px 0 auto;height:1px}
.note summary .plus::after{inset:0 6px;width:1px}
.note[open] summary .plus::after{transform:scaleY(0)}
.note[open] summary{color:var(--cyan)}
.note p{margin:0 0 26px;padding-left:44px;max-width:70ch;color:var(--fg-2);font-size:.95rem}

/* --- rodapé --- */
footer{border-top:1px solid var(--line);padding-block:clamp(72px,9.2vw,132px) 40px}
.foot{display:grid;gap:40px}
@media(min-width:900px){.foot{grid-template-columns:1.6fr 1fr 1fr}}
.foot h4{font-size:.72rem;font-family:"Geist Mono",ui-monospace,monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);font-weight:400;margin-bottom:20px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.foot ul a{display:flex;align-items:center;min-height:44px;font-size:.92rem;color:var(--fg-2);transition:color .2s var(--ease)}
.foot ul a:hover{color:var(--cyan)}
.foot-mark{height:30px;width:auto}
.seals{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:24px}
.seal{display:inline-flex;align-items:center;min-height:44px;gap:8px;font-family:"Geist Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)}
.seal svg{width:15px;height:15px;color:var(--cyan-deep)}
.legal{margin-top:clamp(48px,5.4vw,72px);padding-top:30px;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--fg-3);max-width:78ch}
.legal p{margin:0 0 12px}

/* --- whatsapp flutuante --- */
.wa{position:fixed;right:18px;bottom:18px;z-index:70;display:inline-flex;align-items:center;gap:11px;
  background:var(--cyan);color:var(--ground);border-radius:999px;padding:13px 20px;min-height:52px;
  font-size:.92rem;font-weight:500;box-shadow:0 8px 26px rgba(3,8,14,.6);
  transition:background .22s var(--ease),transform .22s var(--ease)}
.wa:hover{background:var(--cyan-2);transform:translateY(-2px)}
.wa svg{width:20px;height:20px}
@media(max-width:600px){.wa span{display:none}.wa{padding:15px;border-radius:50%}}

/* --- entrada: só translação, nunca opacidade de texto --- */
.js .rise{transform:translateY(24px);transition:transform .75s var(--ease)}
.js .rise.in{transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rise{transform:none}
  .mq-track{animation:none}
}

/* --- o ambiente: duas brumas cianas fixas atrás de tudo. Gradiente radial em
   vez de filter:blur, que custa caro e faz a página engasgar na rolagem. --- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:clip}
/* o conteudo fica acima do objeto; o objeto fica acima do ambiente */
section,.band,.mq{position:relative;z-index:6}
.env b{position:absolute;display:block;border-radius:50%}
.env .b1{width:70vw;height:70vw;max-width:900px;max-height:900px;left:-16vw;top:-14vw;
  background:radial-gradient(circle at 50% 50%, rgba(29,230,232,.14), rgba(29,230,232,.05) 42%, transparent 68%);
  animation:drift1 78s ease-in-out infinite alternate}
.env .b2{width:62vw;height:62vw;max-width:820px;max-height:820px;right:-14vw;top:44vh;
  background:radial-gradient(circle at 50% 50%, rgba(11,126,128,.20), rgba(29,230,232,.05) 46%, transparent 70%);
  animation:drift2 96s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(9vw,7vh,0) scale(1.14)}}
@keyframes drift2{to{transform:translate3d(-8vw,-9vh,0) scale(1.1)}}
body{position:relative}
/* a nav SAIU desta lista em 28/08: ela é `position:fixed` e estava sendo
   devolvida para o fluxo aqui, por regra minha, desde a camada do objeto 3D */
main,footer{position:relative;z-index:6}
.nav{z-index:60}
/* o botao flutuante fica fixo: entrou na lista acima por engano e o
   relative anulava o fixed dele. */
.wa{position:fixed;z-index:70}

/* --- a marca em partículas: fixa, gira com a leitura, se desmancha perto do
   ponteiro. Canvas 2D com projeção própria: nenhuma biblioteca. --- */
/* o objeto ocupa a tela inteira e se posiciona por conta propria: ele atravessa
   a pagina, muda de lugar e de tamanho em cada secao. */
/* o objeto e um elemento 3d na FRENTE da pagina, nao papel de parede.
   pointer-events:none garante que ele nunca rouba clique de nada. */
.mark3d{position:fixed;inset:0;z-index:20;width:100vw;height:100dvh;pointer-events:none}
@media(max-height:520px){.mark3d{display:none}}
.skip{min-height:44px;position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--cyan);color:var(--ground);padding:12px 18px;border-radius:999px}
/* ============================================================================
   BLINDAGEM CONTRA O TEMA DO WORDPRESS
   Medido em 28/08 na página publicada: as regras por CLASSE passaram, mas as
   por ELEMENTO (section, h1, h2, ul) perderam para o tema, que é mais
   específico. Resultado: o respiro das seções virou 0 e a manchete caiu de
   109px para 48px. Aqui as mesmas regras voltam com a especificidade do corpo.
   ============================================================================ */
body.elementor-page{background:var(--ground);color:var(--fg);
  font-family:Geist,system-ui,sans-serif;font-weight:300;line-height:1.62}
body.elementor-page section{padding-block:var(--l2y-gap);margin:0;border:0}
body.elementor-page .hero{padding-top:clamp(140px,19vh,214px);padding-bottom:clamp(72px,8vw,116px)}
body.elementor-page .mq{padding-block:22px}
body.elementor-page .band-in{padding-block:clamp(44px,5.2vw,72px)}
body.elementor-page footer{padding-block:clamp(72px,9.2vw,132px) 40px}

body.elementor-page h1,body.elementor-page h2,
body.elementor-page h3,body.elementor-page h4{
  margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.02;color:var(--fg);font-family:inherit}
body.elementor-page .d1{font-size:clamp(2.9rem,7.6vw,6rem)}
body.elementor-page .d2{font-size:clamp(2.3rem,5.6vw,4.75rem)}
body.elementor-page .d3{font-size:clamp(3.1rem,9vw,8.25rem)}
body.elementor-page .h-card{font-size:clamp(1.3rem,2.1vw,1.75rem);line-height:1.1}
body.elementor-page .lede{font-size:clamp(1rem,1.25vw,1.15rem);color:var(--fg-2);line-height:1.6}
body.elementor-page .lede b{color:var(--fg);font-weight:600}
body.elementor-page .small{font-size:.9rem;color:var(--fg-3);line-height:1.6}
body.elementor-page .kick{font-size:.69rem;letter-spacing:.18em;color:var(--fg-3)}
body.elementor-page p{margin:0}
body.elementor-page ul,body.elementor-page ol{list-style:none;margin:0;padding:0}
body.elementor-page .foot ul a{display:flex;align-items:center;min-height:44px}
body.elementor-page a{text-decoration:none;box-shadow:none}
body.elementor-page img{display:block;max-width:100%;height:auto;border-radius:0}

/* o tema pinta botao de verde e o formulario de rosa: aqui o acento e o da marca */
body.elementor-page .btn,
body.elementor-page a.btn,
body.elementor-page button.btn{border-radius:999px;font-family:inherit;font-size:.95rem;
  font-weight:500;letter-spacing:-.01em;min-height:48px;text-transform:none;box-shadow:none}
body.elementor-page .btn-solid,
body.elementor-page a.btn-solid,
body.elementor-page button.btn-solid{background:var(--cyan)!important;color:var(--ground)!important;border:0!important}
body.elementor-page .btn-solid:hover,
body.elementor-page button.btn-solid:hover{background:var(--cyan-2)!important}
body.elementor-page .btn-ghost,
body.elementor-page a.btn-ghost{background:transparent!important;border:1px solid var(--line-2)!important;color:var(--fg)!important}
body.elementor-page .btn-ghost:hover{border-color:var(--cyan)!important;color:var(--cyan)!important}
body.elementor-page .wa{background:var(--cyan)!important;color:var(--ground)!important}
body.elementor-page .wa:hover{background:var(--cyan-2)!important}
body.elementor-page .ac,body.elementor-page .contact .d3 span{color:var(--cyan)}

body.elementor-page input,body.elementor-page select,body.elementor-page textarea{
  background:var(--ground)!important;border:1px solid var(--line-2)!important;border-radius:12px!important;
  color:var(--fg)!important;font:inherit!important;font-size:.95rem!important;min-height:50px;box-shadow:none!important}
body.elementor-page input:focus,body.elementor-page select:focus,body.elementor-page textarea:focus{
  border-color:var(--cyan)!important;outline:none}
body.elementor-page label{color:var(--fg-2);font-size:.85rem;font-weight:400;text-transform:none}

/* o balao de WhatsApp do plugin duplicava o botao desenhado desta pagina */
body.elementor-page [class^="l2yq-"],body.elementor-page [class*=" l2yq-"]{display:none!important}

/* medido na página publicada em 28/08: o tema estica toda imagem, e o logo da
   nav saía em 86x100 no lugar de 26x30. O chat do plugin usa ID, não classe. */
body.elementor-page .nav-mark img{height:26px!important;width:auto!important;max-width:none!important}
body.elementor-page .foot-mark{height:30px!important;width:auto!important;max-width:100%!important}
body.elementor-page #l2yq-btn,body.elementor-page #l2yq-chat{display:none!important}

body.elementor-page .wa{position:fixed!important;right:18px;bottom:18px;z-index:70}


/* ============================================================================
   ACABAMENTO PREMIUM
   ============================================================================ */

/* --- barra de leitura --- */
.prog{position:fixed;inset:0 0 auto;height:2px;z-index:80;background:rgba(36,50,64,.5);pointer-events:none}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan-deep),var(--cyan));
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* --- nav ganha peso ao descer --- */
.nav{transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.nav.desceu{background:rgba(3,8,14,.94);border-bottom-color:var(--line-2);
  box-shadow:0 1px 0 rgba(29,230,232,.12),0 10px 34px rgba(0,0,0,.44)}

/* --- entrada de rolagem: viagem maior, para ser vista --- */
.js .rise{transform:translateY(38px) scale(.988);opacity:0;
  transition:transform .82s var(--ease),opacity .62s var(--ease)}
.js .rise.in{transform:none;opacity:1}

/* --- borda de neon que segue o ponteiro --- */
.cell,.step-cell,.case,.quote,.feat,.form,.note,.band{position:relative;isolation:isolate}
.cell::before,.step-cell::before,.case::before,.quote::before,.feat::before,.form::before,.band::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(29,230,232,.13),rgba(29,230,232,.04) 42%,transparent 66%);
  opacity:0;transition:opacity .4s var(--ease)}
.cell:hover::before,.step-cell:hover::before,.case:hover::before,.quote:hover::before,
.feat:hover::before,.form:focus-within::before,.band:hover::before{opacity:1}

.cell::after,.step-cell::after,.case::after,.quote::after,.feat::after,.form::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;padding:1px;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    rgba(29,230,232,.85),rgba(29,230,232,.22) 40%,transparent 68%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:0;transition:opacity .4s var(--ease)}
.cell:hover::after,.step-cell:hover::after,.case:hover::after,.quote:hover::after,
.feat:hover::after,.form:focus-within::after{opacity:1}

/* o cartao sobe um fio ao ser tocado */
.cell,.step-cell,.case,.quote{transition:background .34s var(--ease),transform .34s var(--ease)}
.cell:hover,.step-cell:hover,.case:hover,.quote:hover{transform:translateY(-3px)}

/* --- botoes --- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-solid{background:linear-gradient(135deg,var(--cyan-2),var(--cyan) 46%,#12c9cb);
  box-shadow:0 0 0 0 rgba(29,230,232,0);transition:box-shadow .3s var(--ease),transform .3s var(--ease),filter .3s var(--ease)}
.btn-solid:hover{box-shadow:0 0 0 1px rgba(29,230,232,.5),0 10px 34px -8px rgba(29,230,232,.55);filter:brightness(1.05)}
.btn-solid::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .72s var(--ease)}
.btn-solid:hover::after{transform:translateX(130%)}
.btn-ghost{transition:border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);
  box-shadow:0 0 0 1px rgba(29,230,232,.28),0 0 26px -6px rgba(29,230,232,.45)}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.wa{transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.wa:hover{box-shadow:0 10px 34px -8px rgba(29,230,232,.6)}

/* --- a folha respira ao lado do objeto: o conteudo nao briga com ele --- */
@media(min-width:1180px){
  .hero .wrap>*{max-width:min(60%,720px)}
  #servicos .sec-head,#cases .sec-head{margin-left:auto;max-width:min(76%,900px)}
  #metodo .sec-head{max-width:min(70%,820px)}
}

@media(prefers-reduced-motion:reduce){
  .js .rise{transform:none;opacity:1}
  .cell:hover,.step-cell:hover,.case:hover,.quote:hover{transform:none}
  .btn-solid::after{display:none}
}

/* --- credenciais: selo verificavel e certificado que se abre --- */
.selos{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:clamp(30px,3.4vw,44px)}
.selo-img{display:flex;align-items:center;gap:0;background:#fff;border-radius:14px;
  padding:14px 20px;min-height:76px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.selo-img img{height:38px;width:auto}
.selo-img:hover{transform:translateY(-3px);box-shadow:0 12px 34px -12px rgba(29,230,232,.5)}
.certs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:clip}
@media(min-width:900px){.certs{grid-template-columns:repeat(3,1fr)}}
.cert{background:var(--ground);padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;
  position:relative;isolation:isolate;transition:background .34s var(--ease)}
.cert:hover{background:var(--surface)}
.cert figure{margin:0 0 22px;border:1px solid var(--line-2);border-radius:10px;overflow:clip;
  background:var(--surface-2);aspect-ratio:16/11;display:block}
.cert figure img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .5s var(--ease),filter .4s var(--ease);filter:saturate(.85) contrast(1.02)}
.cert:hover figure img{transform:scale(1.035);filter:none}
.cert h3{font-size:1.02rem;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-bottom:10px}
.cert .quem{font-size:.86rem;color:var(--fg-3);margin-bottom:18px}
.cert .cod{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cert .cod b{font-family:"Geist Mono",ui-monospace,monospace;font-size:.72rem;font-weight:400;
  letter-spacing:.08em;color:var(--cyan)}
.cert .cod a{font-size:.78rem;color:var(--fg-3);text-decoration:underline;
  text-decoration-color:var(--line-2);text-underline-offset:4px;transition:color .2s var(--ease)}
.cert .cod a:hover{color:var(--cyan);text-decoration-color:var(--cyan)}

/* ============================================================================
   A MONTAGEM — 28/08/2026
   A folha não aparece: ela se monta. Três mecanismos, e só três:
   1) manchete palavra a palavra atrás de máscara (posição, nunca contraste);
   2) cabeçalho e cartão que se preenchem em ordem, cascata local por seção;
   3) duas cenas que SEGURAM enquanto a rolagem constrói o que está dentro.
   Régua site-10k: pino curto (o júri reprova cena travada longa), zero
   biblioteca, e versão estática completa em prefers-reduced-motion.
   ============================================================================ */

/* --- os spans injetados não podem herdar as regras dos spans autorais --- */
.hero .d1 span:not(.wd){display:block}
.contact .d3 span:not(.wd),
body.elementor-page .contact .d3 span:not(.wd){color:var(--cyan)}
.contact .d3 .wd,body.elementor-page .contact .d3 .wd{color:inherit}

/* --- palavra mascarada: some por baixo da própria linha, não por opacidade --- */
.js .wd{display:inline-block;overflow:clip;vertical-align:bottom;
  padding-bottom:.16em;margin-bottom:-.16em}
.js .wd>i{display:inline-block;font-style:normal;transform:translateY(112%);
  transition:transform .92s var(--ease)}
.js .palco.in .wd>i{transform:none}

/* --- o resto do bloco entra por posição, na ordem em que se lê --- */
.js .palco .mv{transform:translateY(22px);transition:transform .78s var(--ease)}
.js .palco.in .mv{transform:none}
.js .palco .kick::before{transform:scaleX(0);transform-origin:0 50%;
  transition:transform .7s var(--ease) .05s}
.js .palco.in .kick::before{transform:none}

/* --- respiro entre os painéis: eles eram colados por um fio de 1px --- */
.grid3{margin-top:clamp(52px,5.6vw,92px)}
.quotes{margin-top:clamp(52px,5.6vw,92px)}

/* ============================================================================
   CENA A — a curva sobe com a rolagem e a tela segura
   ============================================================================ */
.hold{position:relative}
.js .hold-a{min-height:178vh}
.js .hold-a>.feat{position:sticky;top:clamp(92px,13vh,146px)}
.curve>path{stroke-linecap:round}
.js .curve g path{opacity:.16;transition:opacity .7s var(--ease)}
.js .viva .curve g path{opacity:1}
.js .cur-pt{opacity:0;transition:opacity .45s var(--ease)}
.js .cur-pt.on{opacity:1}
.js .feat-tags li{transform:translateY(14px);opacity:.3;
  transition:transform .6s var(--ease),opacity .5s var(--ease)}
.js .feat-tags li.on{transform:none;opacity:1}
/* legenda que conta o que a linha está fazendo enquanto ela sobe */
.curve-cap{transition:color .4s var(--ease)}
.js .viva .curve-cap{color:var(--cyan)}

/* ============================================================================
   CENA B — o método: a cabeça segura à esquerda, os quatro passos passam
   à direita e o trilho mostra em qual você está. Era aqui o vazio.
   ============================================================================ */
.rail{display:none}
@media(min-width:1180px){
  #metodo .wrap{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    gap:clamp(44px,4.6vw,86px);align-items:start}
  #metodo .sec-head{position:sticky;top:clamp(96px,12vh,132px);
    margin-bottom:0;max-width:none}
  #metodo .steps{grid-template-columns:1fr;border-radius:var(--r-lg)}
  /* empilhado, cada passo ganha corpo: era aqui que a seção parecia vazia */
  #metodo .step-cell{padding:clamp(40px,3.6vw,54px) clamp(34px,3vw,46px)
    clamp(40px,3.6vw,54px) clamp(58px,4.6vw,78px);
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:clamp(24px,2.4vw,44px);align-items:start;align-content:space-between;
    min-height:clamp(272px,31vh,326px)}
  /* o numeral vira âncora visual: grande, mono, e acende no passo em que
     a leitura está. É o que enche o espaço com intenção em vez de vazio. */
  #metodo .step-cell .cell-n{grid-column:1;grid-row:1;line-height:.9;
    font-size:clamp(3.2rem,4.6vw,4.4rem);letter-spacing:-.02em;color:var(--fg-3)}
  #metodo .step-cell.on .cell-n{color:var(--cyan)}
  #metodo .step-cell h3{grid-column:1;grid-row:2;align-self:end;margin:0;
    font-size:clamp(1.35rem,1.9vw,1.85rem)}
  #metodo .step-cell .small{grid-column:2;grid-row:1/span 2;align-self:start;
    margin-top:6px;font-size:.98rem;line-height:1.66;max-width:42ch}
  /* o trilho: uma linha que desce junto com a leitura */
  .rail{display:block;position:absolute;left:clamp(26px,2.1vw,32px);
    top:clamp(30px,2.8vw,42px);bottom:clamp(30px,2.8vw,42px);width:1px;
    background:var(--line-2);z-index:2;pointer-events:none}
  .rail i{position:absolute;inset:0 auto 0 0;width:1px;transform-origin:50% 0;
    transform:scaleY(var(--p,0));
    background:linear-gradient(180deg,var(--cyan),var(--cyan-deep))}
  .rail b{position:absolute;left:50%;width:9px;height:9px;border-radius:50%;
    margin-left:-4.5px;margin-top:-4.5px;background:var(--surface-3);
    border:1px solid var(--line-2);transition:background .35s var(--ease),
    border-color .35s var(--ease),box-shadow .35s var(--ease)}
  .rail b.on{background:var(--cyan);border-color:var(--cyan);
    box-shadow:0 0 0 4px rgba(29,230,232,.16),0 0 18px rgba(29,230,232,.55)}
  #metodo .steps{position:relative}
}
/* o passo em que a leitura está, em qualquer largura */
.js .step-cell .cell-n{color:var(--fg-3);transition:color .4s var(--ease)}
.js .step-cell.on .cell-n{color:var(--cyan)}
.js .step-cell{transition:background .45s var(--ease),box-shadow .45s var(--ease)}
.js .step-cell.on{background:var(--surface-2);
  box-shadow:inset 0 0 0 1px rgba(29,230,232,.10)}

/* ============================================================================
   AS SEÇÕES SOBEM COM A ROLAGEM (scrub leve, sem pino)
   Só onde não há cena que segura, para não empilhar dois movimentos.
   ============================================================================ */
.js .sobe{transform:translate3d(0,var(--sobe,0px),0);will-change:transform}

@media(prefers-reduced-motion:reduce){
  .js .wd>i,.js .palco .mv{transform:none}
  .js .palco .kick::before{transform:none}
  .js .hold-a{min-height:0}
  .js .hold-a>.feat{position:static;transform:none}
  .js .feat-tags li{transform:none;opacity:1}
  .js .cur-pt{opacity:1}
  .js .sobe{transform:none}
  #metodo .sec-head{position:static}
  .rail i{transform:scaleY(1)}
  /* sem o laço de rolagem nada acende: o passo não pode ficar apagado */
  #metodo .step-cell .cell-n{color:var(--cyan)}
}

/* --- o objeto passa NA FRENTE sem apagar o que está escrito.
   `screen` só soma luz: sobre o fundo escuro ele aparece inteiro, e sobre a
   letra clara o resultado continua claro. Assim ele é primeiro plano de
   verdade e nenhum texto perde contraste quando ele cruza por cima. --- */
.mark3d{mix-blend-mode:screen}

/* ============================================================================
   BLINDAGEM 2 — o ritmo, as imagens e a nav · 28/08/2026
   Diagnóstico medido no ar: o tema do WordPress vence QUALQUER regra escrita
   como `.classe elemento` (0,1,1). Sobrevive só o que tem duas classes ou o
   prefixo `body.elementor-page`. Consequências que estavam no ar sem eu ver:
   todo título colado no próprio parágrafo, a nav nunca grudou no topo, o corpo
   caiu para 14px no celular e os selos de parceiro apareceram esticados a
   299x150 no lugar de 38px de altura.
   ============================================================================ */

/* --- a nav volta a grudar no topo, e a âncora não esconde o título atrás dela --- */
body.elementor-page .nav{position:fixed;inset:0 0 auto;z-index:60}
section[id],div[id]{scroll-margin-top:92px}

/* --- ritmo vertical: título nunca encostado no que ele apresenta --- */
body.elementor-page .cell h3,
body.elementor-page .case h3,
body.elementor-page .cert h3,
body.elementor-page .feat h3{margin:0 0 14px}
body.elementor-page .step-cell h3{margin:20px 0 12px}
body.elementor-page .cell .small,
body.elementor-page .case .small,
body.elementor-page .step-cell .small,
body.elementor-page .quote blockquote{margin:0}
body.elementor-page .case .small{margin-top:2px}
body.elementor-page .note p{margin:12px 0 0}
body.elementor-page .cert h3{margin:0 0 10px}

/* --- imagens: o tema estica tudo que não for travado por classe dupla --- */
body.elementor-page .selo-img img{height:38px!important;width:auto!important;
  max-width:none!important;object-fit:contain}
body.elementor-page .cert figure img{width:100%!important;height:100%!important;
  object-fit:cover;object-position:top center}
body.elementor-page .foot-mark{height:30px!important;width:auto!important}

/* --- alvo de toque: o link de verificar tinha 20px de altura --- */
.cert .cod{align-items:center}
.cert .cod a{display:inline-flex;align-items:center;min-height:46px;padding-inline:6px}

/* ============================================================================
   CELULAR — o que muda abaixo de 900px
   ============================================================================ */
@media(max-width:900px){
  /* corpo em 16px: o tema tinha derrubado para 14 */
  body.elementor-page,body{font-size:1rem}
  body.elementor-page .small,.small{font-size:.95rem;line-height:1.62}
  body.elementor-page .tag,.tag{font-size:.84rem;padding:8px 14px}

  /* a barra do topo fica só com a marca e o menu: o botão não cabe com os dois */
  .nav .btn-solid{display:none}
  .nav-in{height:64px;gap:14px}

  /* os selos de parceiro deixam de ser dois blocos gigantes */
  .selos{gap:10px}
  .selo-img{flex:1 1 148px;min-height:64px;padding:12px 16px;justify-content:center}
  body.elementor-page .selo-img img{height:30px!important}

  /* cartão respira mais no alto e menos nos lados */
  .cell-top{margin-bottom:26px}
  .cell,.case,.quote,.step-cell,.cert{padding:26px 22px}
  .feat-in{padding:26px 22px}
}

/* --- o menu do celular: uma folha inteira, não um sanduíche apertado --- */
.nav-abre{display:grid;place-content:center;gap:5px;width:46px;height:46px;
  margin-left:auto;border:1px solid var(--line-2);border-radius:13px;
  background:transparent;cursor:pointer;padding:0}
.nav-abre i{display:block;width:18px;height:1.5px;background:var(--fg);
  border-radius:2px;transition:transform .34s var(--ease),opacity .2s var(--ease)}
.nav-abre[aria-expanded="true"] i:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav-abre[aria-expanded="true"] i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.sheet{position:fixed;inset:0;z-index:59;background:rgba(3,8,14,.97);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:96px var(--l2y-pad) calc(var(--l2y-pad) + 20px);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .34s var(--ease),transform .44s var(--ease),visibility .34s}
.sheet.aberta{opacity:1;visibility:visible;transform:none}
.sheet a.item{display:flex;align-items:baseline;gap:16px;min-height:60px;
  padding-block:10px;border-bottom:1px solid var(--line);
  font-size:1.55rem;font-weight:500;letter-spacing:-.03em;color:var(--fg);
  transform:translateY(14px);opacity:0;
  transition:transform .5s var(--ease),opacity .4s var(--ease),color .2s var(--ease)}
.sheet.aberta a.item{transform:none;opacity:1}
.sheet a.item b{font-family:"Geist Mono",ui-monospace,monospace;font-size:.68rem;
  font-weight:400;letter-spacing:.14em;color:var(--fg-3)}
.sheet a.item:active{color:var(--cyan)}
.sheet .sheet-pe{margin-top:26px;display:grid;gap:14px}
.sheet .sheet-pe .btn{justify-content:center;min-height:54px}
.sheet .sheet-tel{text-align:center;font-size:1.02rem;color:var(--cyan);min-height:44px;
  display:flex;align-items:center;justify-content:center}
body.menu-aberto{overflow:hidden}

/* a partir de 901px o menu volta a ser a fila de links da barra */
@media(min-width:901px){.nav-abre,.sheet{display:none}}

/* --- o método no desktop: reafirmado depois da blindagem, senão ela vence --- */
@media(min-width:1180px){
  body.elementor-page #metodo .step-cell h3{margin:0}
  body.elementor-page #metodo .step-cell .small{margin-top:6px}
}

@media(prefers-reduced-motion:reduce){
  .sheet,.sheet a.item{transition:none}
  .nav-abre i{transition:none}
}

/* ============================================================================
   BLINDAGEM 3 — os 19 pontos que o tema ainda vencia · 28/08/2026
   Achados varrendo a folha inteira no ar: reapliquei cada regra minha com
   especificidade maior e comparei o computado de 900 elementos. Só estes
   mudaram — e cada mudança é um defeito que estava visível na página.
   Para repetir a varredura: ver `docs/DECISIONS.md`, decisão 007.
   ============================================================================ */

/* o rótulo da seção estava colado na manchete (margem zerada pelo tema) */
body.elementor-page .kick{margin-bottom:22px}

/* a marca na barra do topo saía roxa, cor de link do tema */
body.elementor-page .nav-mark{color:inherit}

/* o botão da barra vinha maior do que o desenhado */
body.elementor-page .nav .btn{padding:11px 22px;font-size:.88rem;min-height:44px}

/* o rodapé perdia o título de coluna e o espaço entre parágrafos */
body.elementor-page .foot h4{font-size:.72rem;font-family:"Geist Mono",ui-monospace,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);font-weight:400;margin-bottom:20px}
body.elementor-page .legal p{margin:0 0 12px}

/* a lista de canais do cartão grande encostava no parágrafo */
body.elementor-page .feat-tags{margin-top:26px}

/* o aviso e a confirmação do formulário grudavam no botão */
body.elementor-page .f-note{margin-top:20px}
body.elementor-page .f-ok{margin-top:18px}

/* a faixa de dúvidas perdia o fio que a separa do que vem antes */
body.elementor-page .notes{border-top:1px solid var(--line)}

/* Os três certificados ficavam com alturas diferentes: cada imagem impunha a
   sua. `aspect-ratio` sozinho não resolve — a caixa cresce para caber a imagem
   que está no fluxo. Tirando a imagem do fluxo, a proporção passa a mandar.
   Medido: 227px (proporção 1,29) virou 201px (1,45), igual nos três. */
.cert figure,body.elementor-page .cert figure{position:relative;display:block;aspect-ratio:16/11}
.cert figure img,body.elementor-page .cert figure img{position:absolute;inset:0;
  width:100%!important;height:100%!important;object-fit:cover;object-position:top center}

/* --- a luz do objeto vive DENTRO do canvas (ctx.globalAlpha, bloco 5 do
   l2y.js), não na opacidade do elemento: trocar a opacidade a cada quadro
   obrigava o navegador a recompor a camada e dava salto de cor. --- */
.mark3d{opacity:1}

/* --- o numeral do cartão era o texto de menor folga da página: 11,5px em
   cinza fraco. Sobe para o cinza médio. Não é gosto: era ele que reprovava a
   medição de contraste quando o objeto passava perto. --- */
.cell-n,body.elementor-page .cell-n{color:var(--fg-2)}
.js .step-cell .cell-n,body.elementor-page .js .step-cell .cell-n{color:var(--fg-2)}
.js .step-cell.on .cell-n,body.elementor-page .js .step-cell.on .cell-n{color:var(--cyan)}

/* --- o botão do menu estava vestido pelo tema: borda roxa (#8711FF), sombra
   laranja por dentro, raio de 30px e o meu contorno zerado. Botão é elemento
   que o tema pinta com força, então aqui vai tudo travado. --- */
.nav-abre,body.elementor-page .nav-abre,body.elementor-page button.nav-abre{
  -webkit-appearance:none;appearance:none;
  background:transparent;background-image:none;
  border:1px solid var(--line-2);border-radius:13px;
  box-shadow:none;color:var(--fg);
  padding:0;margin:0 0 0 auto;width:46px;height:46px;
  display:grid;place-content:center;gap:5px;cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
body.elementor-page .nav-abre:hover,body.elementor-page .nav-abre:focus-visible{
  border-color:var(--cyan);background:rgba(29,230,232,.07);box-shadow:none}
body.elementor-page .nav-abre i{display:block;width:18px;height:1.5px;
  background:var(--fg);border-radius:2px}
body.elementor-page .nav-abre[aria-expanded="true"]{border-color:var(--cyan)}
/* fora do celular o botão não existe. Regra sem prefixo E com prefixo, e por
   último no arquivo, senão a declaração de `display:grid` acima ganha dela. */
@media(min-width:901px){
  .nav-abre,body.elementor-page .nav-abre,body.elementor-page button.nav-abre,
  .sheet,body.elementor-page .sheet{display:none}
}