/* ============================================================
   Darlei Cordeiro - sistema visual "Spectrum"
   Conceito: a trajetória de crescimento do cliente, traçada pelo
   gradiente verde-lima → roxo da logo. Base violeta-noturna (não
   preto neutro); o feixe e os números reais são a assinatura.
   Editar conteúdo: /sections/  •  Layout: /layout/
   ============================================================ */

/* ---- Fontes ---- */
/* Corpo/UI: Inter (auto-hospedada, subset latin PT-BR) */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/inter-800.woff2) format('woff2')}
/* Display/títulos: Inter (a mesma do corpo, auto-hospedada) */

/* ---- Tokens ---- */
:root{
  /* superfícies - violeta-noturno, nunca preto neutro */
  --ink:#0A0711; --ink-1:#0D0918; --surface:#150E28; --surface-2:#1E1640;
  --line:rgba(176,150,232,.13); --line-2:rgba(176,150,232,.28);
  /* marca */
  --lime:#C2F23C; --lime-2:#aee01f;
  --violet:#7C2BFF; --violet-2:#9B5BFF; --violet-deep:#4A0FB0;
  /* texto - neutros com leve matiz violácea */
  --text:#F2EEFB; --muted:#B3A8CE; --muted-2:#7C7298;
  /* assinatura */
  --grad: linear-gradient(100deg, var(--lime) 0%, var(--violet-2) 60%, var(--violet) 100%);
  --grad-line: linear-gradient(90deg, var(--lime), var(--violet));
  /* sistema */
  --r:14px; --r-lg:22px; --r-xl:30px; --maxw:1180px;
  --stack:clamp(52px,6vw,76px); /* respiro padrão entre título da seção e o conteúdo */
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --display:var(--font);
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font);background:var(--ink);color:var(--text);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip;font-synthesis:none}
img,svg{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--lime);color:#0a0a0a}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}

/* ---- Layout ---- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.section{padding-block:clamp(34px,4.25vw,56px)}   /* ~metade do espaçamento antigo entre seções */
.center{text-align:center}
.section-head{max-width:720px}
.section-head.center{margin-inline:auto}
.section-head .lead{margin-top:16px}

/* ---- Tipografia ---- */
.display{font-family:var(--display);font-weight:800;line-height:.96;letter-spacing:-.035em}
h1,h2,h3{font-family:var(--display);line-height:1.05;font-weight:800;letter-spacing:-.025em}
.h1{font-size:clamp(2.6rem,6.8vw,6rem);line-height:.93;letter-spacing:-.045em}
.h2{font-size:clamp(2.1rem,4.7vw,3.6rem);letter-spacing:-.03em}
.h2-line{display:block;text-wrap:balance}
.h3{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:600;letter-spacing:-.02em}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font);
  font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--grad-line)}
.eyebrow.center{justify-content:center}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--muted);line-height:1.6}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.text-lime{color:var(--lime)}
.num{font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
p{color:var(--muted)}
strong{color:var(--text)}

/* ---- Botões ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-weight:600;
  font-size:.95rem;letter-spacing:.01em;padding:.92em 1.7em;border-radius:999px;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,background .22s ease,border-color .22s ease;
  white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.1s}
@media (prefers-reduced-motion:reduce){.btn:hover,.btn:active{transform:none}}
.btn svg{width:18px;height:18px}
.btn--lime{background:linear-gradient(155deg,#dcff6b 0%,var(--lime) 52%,#a9e024 100%);color:#0a0a0a;
  box-shadow:0 10px 28px -12px rgba(194,242,60,.45),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -7px 16px -9px rgba(70,100,0,.55)}
.btn--lime:hover{background:linear-gradient(155deg,#e6ff86 0%,#cbf94e 52%,#b3ea2e 100%);
  box-shadow:0 16px 38px -14px rgba(194,242,60,.6),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -7px 16px -9px rgba(70,100,0,.45)}
.btn--ghost{border:1px solid var(--line-2);color:var(--text);background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn--lg{padding:1.05em 2.1em;font-size:1rem}
/* mobile: rótulos longos quebram em 2 linhas em vez de estourar a largura (evita corte + scroll horizontal) */
@media (max-width:560px){.btn{white-space:normal;text-align:center}}
/* CTA: ícone do WhatsApp sempre visível ao lado do texto */
.btn--lime::after{content:"";flex:none;width:1.15em;height:1.15em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a0a0a'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") no-repeat center/contain}

/* ---- Pílula / tag ---- */
.pill{display:inline-flex;align-items:center;gap:.5em;font-size:.8rem;font-weight:600;color:var(--muted);
  padding:.4em .9em;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}

/* ---- Cards ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}

/* ---- Divisor de assinatura (linha em gradiente) ---- */
.rule{height:1px;border:0;background:var(--grad-line);opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}

/* ---- Reveal (gated por .js: sem JS, conteúdo sempre visível) ---- */
/* só fade + slide (opacity/transform = compostos na GPU). SEM filter:blur animado:
   blur animado repinta cada frame e trava o scroll, principalmente no celular. */
.js .reveal{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.09s}.js .reveal[data-d="2"]{transition-delay:.18s}
.js .reveal[data-d="3"]{transition-delay:.27s}.js .reveal[data-d="4"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;filter:none;transition:none}}
/* LP de anúncio: sem animação de entrada (conteúdo estático, zero risco de travar no scroll) */
html.lp-page .reveal{opacity:1;transform:none;filter:none;transition:none}
/* Perf no celular: backdrop-filter em superfície fixa (cabeçalho) ou em movimento (cards do
   carrossel de depoimentos) reprocessa o blur a cada frame e trava o scroll → vira sólido. */
@media (max-width:760px){
  .site-header .container::before{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,7,17,.95)}
  .tcard--quote{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(165deg,rgba(38,44,18,.97),rgba(22,15,40,.97))}
}

/* ============================================================
   HEADER  (layout/header.php)
   ============================================================ */
.site-header{position:sticky;top:0;z-index:60;margin-bottom:-76px;background:transparent}
.site-header .container{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
/* Ao rolar: fundo em pílula só na área do conteúdo, arredondado e afastado do topo */
.site-header .container::before{content:"";position:absolute;inset:9px 0;z-index:-1;border-radius:999px;
  background:rgba(10,7,17,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:0 14px 34px -16px rgba(0,0,0,.55);
  opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease}
.site-header.scrolled .container::before{opacity:1;transform:none;
  animation:header-drop .5s cubic-bezier(.22,1.15,.36,1)}
@keyframes header-drop{from{opacity:0;transform:translateY(-16px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.site-header.scrolled .container::before{animation:none}}
.logo{display:flex;align-items:center;gap:11px}
.logo img{width:60px;height:42px;border-radius:999px;object-fit:cover;object-position:center 22%;
  border:1px solid var(--line-2)}
.logo-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.logo-name{font-family:var(--display);font-weight:800;font-size:1.42rem;letter-spacing:-.025em;color:var(--text)}
/* tag: menor e mais grossa. o letter-spacing é calculado no JS p/ preencher exatamente
   a largura do nome acima (.14em é só fallback sem-JS). */
.logo-tag{margin-top:4px;font-size:.55rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);white-space:nowrap}

/* Intro + transição de páginas: uma cortina cujas duas pontas são arcos abaulados pra baixo
   (embaixo via border-radius, em cima via mask que recorta o mesmo arco).
   ponytail: só CSS + 1 handler de clique. 1º load da sessão = logo + cortina SOBE (logo vai junto);
   navegações = a cortina COBRE descendo ao sair (.pt-leaving) e DESCE revelando ao entrar (pt-fast).
   sessionStorage marca 'pt-fast'. O arco fica fora da tela quando a cortina está parada. */
html:not(.js) .intro-splash{display:none}          /* sem JS: nada de splash, página aparece direto */
.intro-splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;
  pointer-events:none}
.intro-veil{position:absolute;left:0;top:-7vh;width:100%;height:calc(100% + 14vh);
  --dur:.6s;--delay:1.1s;
  background:var(--ink);
  background-image:
    radial-gradient(38% 46% at 12% 88%,rgba(194,242,60,.16),transparent 70%),
    radial-gradient(46% 56% at 86% 8%,rgba(124,43,255,.30),transparent 72%),
    radial-gradient(rgba(176,150,232,.12) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,34px 34px;
  border-radius:0 0 50% 50% / 0 0 7vh 7vh;
  -webkit-mask:linear-gradient(#000 0 0),radial-gradient(52% 7vh at 50% 0,#000 98%,#0000 100%);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0),radial-gradient(52% 7vh at 50% 0,#000 98%,#0000 100%);
  mask-composite:exclude;
  will-change:transform;
  animation:intro-veil-up var(--dur) cubic-bezier(.7,0,.28,1) var(--delay) forwards}
.pt-fast .intro-veil{--dur:.45s;--delay:0s;animation-name:intro-veil-down}   /* revela assim que a página nova pinta */
/* navegações: só a cortina desliza, sem logo */
.pt-fast .intro-splash .logo,.pt-leaving .intro-splash .logo{display:none}
/* saindo da página (JS): a cortina desce do topo e cobre (começa acima da tela, via 'both') */
.pt-leaving .intro-veil{animation:intro-veil-cover .3s cubic-bezier(.4,0,.4,1) both}
.intro-splash .logo{position:relative;z-index:1;gap:15px;opacity:0;
  animation:intro-logo-in .5s cubic-bezier(.2,.75,.25,1) .1s both,
            intro-logo-out .6s cubic-bezier(.7,0,.28,1) 1.1s forwards}
.intro-splash .logo img{width:84px;height:60px}
.intro-splash .logo-name{font-size:2rem}
.intro-splash .logo-tag{font-size:.76rem}
@keyframes intro-logo-in{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}
/* a logo sobe a mesma distância/tempo da cortina, como se estivesse presa nela */
@keyframes intro-logo-out{to{transform:translateY(-116vh)}}
@keyframes intro-veil-up{to{transform:translateY(-101%)}}
@keyframes intro-veil-down{to{transform:translateY(101%)}}
@keyframes intro-veil-cover{from{transform:translateY(-101%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.intro-splash{display:none}}
.nav{display:flex;align-items:center;gap:8px}
/* só os links de topo do menu (não os do megamenu, que têm estilo próprio) */
.nav>a:not(.btn),.nav-item>a:not(.btn){font-size:.95rem;font-weight:600;color:var(--muted);padding:.5em .85em;border-radius:8px;
  transition:color .15s,background .15s}
.nav>a:not(.btn):hover,.nav-item>a:not(.btn):hover{color:var(--text);background:rgba(255,255,255,.04)}
.nav .btn{margin-left:8px}
.nav-toggle{display:none}
@media (max-width:880px){
  .nav{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;
    background:rgba(13,9,24,.92);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
    padding:18px 22px 26px;gap:6px;border-bottom:1px solid var(--glass-edge);box-shadow:0 20px 44px -20px rgba(0,0,0,.7);
    transform:translateY(-130%);transition:transform .32s cubic-bezier(.2,.7,.2,1)}
  .nav.open{transform:none}
  .nav>a:not(.btn),.nav-item>a:not(.btn){padding:.8em .85em;font-size:1.05rem}
  .nav .btn{margin:10px 0 0}
  .nav-toggle{display:flex;flex-direction:column;gap:5px;padding:10px 6px;z-index:1}
  .nav-toggle span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s,opacity .25s}
  .nav-toggle.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.x span:nth-child(2){opacity:0}
  .nav-toggle.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ============================================================
   MEGAMENU (Serviços)  (layout/header.php)
   ============================================================ */
.nav-item{display:flex;align-items:center}   /* estático de propósito: o .mega ancora no .container */
.nav-item.has-mega>a{display:inline-flex;align-items:center}  /* caret ao lado do texto (svg é display:block no reset) */
.nav-caret{width:14px;height:14px;margin-left:.3em;transition:transform .25s}
.nav-item.has-mega:hover .nav-caret,.nav-item.has-mega:focus-within .nav-caret{transform:rotate(180deg)}
/* painel centralizado no container (nunca corta nas bordas); top ~ base do item p/ a ponte de hover não quebrar */
/* abre desdobrando pra baixo: o clip-path revela o painel do topo pra base (as margens
   negativas do inset deixam a sombra do .mega-inner fora do recorte) */
.mega{position:absolute;top:52px;left:0;right:0;margin-inline:auto;width:min(1000px,calc(100vw - 24px));
  padding-top:16px;z-index:5;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);
  clip-path:inset(0 -100px 100% -100px);
  transition:opacity .18s ease,transform .28s cubic-bezier(.2,.75,.25,1),
    clip-path .28s cubic-bezier(.2,.75,.25,1),visibility 0s .28s}
.nav-item.has-mega:hover .mega,.nav-item.has-mega:focus-within .mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  clip-path:inset(0 -100px -140px -100px);
  transition:opacity .18s ease,transform .28s cubic-bezier(.2,.75,.25,1),
    clip-path .28s cubic-bezier(.2,.75,.25,1)}
.mega-inner{display:grid;grid-template-columns:2fr 1fr;gap:14px;padding:16px;border-radius:var(--r-lg);
  background:rgba(13,9,24,.98);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--glass-edge);box-shadow:0 30px 70px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.08)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:center}
.mega-link{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;transition:background .18s}
.mega-tt strong{white-space:nowrap}  /* nome do serviço numa linha só (o painel tem largura pra isso) */
.mega-link:hover{background:rgba(255,255,255,.05)}
.mega-ico{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(124,43,255,.14);border:1px solid rgba(124,43,255,.28);color:var(--violet-2);transition:.2s}
.mega-ico svg{width:20px;height:20px}
.mega-link:hover .mega-ico{background:var(--lime);border-color:var(--lime);color:#0a0a0a}
.mega-tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega-tt strong{color:var(--text);font-size:.92rem;font-weight:600;line-height:1.25}
.mega-tt span{color:var(--muted-2);font-size:.78rem;line-height:1.35}
.mega-aside{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px;padding-bottom:0;border-radius:16px;
  background:linear-gradient(155deg,rgba(124,43,255,.18),rgba(194,242,60,.05));border:1px solid var(--line)}
.mega-aside__body{display:flex;flex-direction:column;gap:7px}
.mega-aside__media{width:76%;margin-left:auto;margin-right:-16px;border-radius:0 0 16px 0;overflow:hidden} /* recorta a foto no raio do card (o botão absoluto ancora no .mega-aside, não é cortado) */
.mega-aside__shot{display:block;width:100%;height:auto;border-radius:10px 10px 0 0}
.mega-aside__eyebrow{color:var(--text);font-weight:800;font-size:.98rem;line-height:1.3}
.mega-aside__txt{color:var(--muted);font-size:.82rem;line-height:1.5}
.mega-aside__media .btn{position:absolute;left:0;right:0;bottom:16px;margin:0 auto;width:-moz-fit-content;width:fit-content;
  font-size:.85rem;padding:.72em 1.1em;box-shadow:0 12px 30px -8px rgba(0,0,0,.65),0 8px 22px -10px rgba(194,242,60,.55)}
@media (max-width:880px){
  /* no menu mobile o megamenu vira lista simples, sempre aberta, logo abaixo de "Serviços" */
  .nav-item{display:block}
  .nav-caret{display:none}
  .mega{position:static;width:auto;padding-top:0;opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:none;clip-path:none}
  .mega-inner{display:block;padding:0 0 6px;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .mega-grid{grid-template-columns:1fr 1fr;gap:4px 8px}
  .mega-link{padding:10px 8px;gap:10px}.mega-tt strong{white-space:normal}.mega-tt span{display:none}
  .mega-ico{width:32px;height:32px;border-radius:9px}.mega-ico svg{width:18px;height:18px}
  .mega-aside{display:none}
}

/* ============================================================
   HERO  (sections/home/hero.php + sections/servico/hero.php)
   ============================================================ */
.hero{position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
/* atmosfera: glows + grade de pontos + feixe diagonal de "decolagem" */
.hero::before{content:"";position:absolute;inset:-30% -15% auto -15%;height:160%;z-index:-2;
  background:
    radial-gradient(38% 46% at 12% 88%, rgba(194,242,60,.16), transparent 70%),
    radial-gradient(46% 56% at 86% 8%, rgba(124,43,255,.30), transparent 72%);
  animation:hero-breathe 16s ease-in-out infinite alternate}
/* os glows "respiram" devagar: o hero nunca fica parado, mas sem chamar atenção */
@keyframes hero-breathe{
  from{transform:translate3d(0,0,0) scale(1);opacity:1}
  to{transform:translate3d(1.5%,1.2%,0) scale(1.05);opacity:.85}}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none}}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;
  background-image:radial-gradient(rgba(176,150,232,.12) 1px,transparent 1px);background-size:34px 34px;
  -webkit-mask-image:radial-gradient(72% 64% at 50% 26%,#000,transparent 78%);
  mask-image:radial-gradient(72% 64% at 50% 26%,#000,transparent 78%)}
.hero-beam{position:absolute;left:-12%;right:-12%;top:46%;height:260px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(194,242,60,.45),rgba(124,43,255,.55),transparent);
  filter:blur(64px);transform:rotate(-11deg);opacity:.55}
.hero .container{position:relative;z-index:1;width:100%;min-width:0}

/* Hero da HOME */
.hero-home{min-height:100vh;min-height:100dvh;display:grid;align-content:center;grid-template-columns:minmax(0,1fr);
  padding-block:clamp(96px,13vh,150px) clamp(48px,7vh,88px)}
.hero-home .h1{font-size:clamp(2.3rem,5.2vw,4.4rem);line-height:1.03;max-width:24ch;margin-top:22px;
  text-shadow:0 2px 36px rgba(10,7,17,.6)}
.hero-sub{margin-top:24px;font-size:clamp(1rem,1.4vw,1.15rem);color:#d9d2ee;max-width:46ch;line-height:1.6}
.hero-actions{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.hero-actions .hero-proof{margin-top:0}

/* Prova social: avatares + estrelas */
.hero-proof{margin-top:30px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.proof-avatars{display:flex}
.proof-avatars img{width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:2px solid var(--ink);margin-left:-12px;box-shadow:0 6px 16px -4px rgba(0,0,0,.6);
  transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.proof-avatars:hover img{transform:translateX(-2px)}
.proof-avatars img:hover{transform:translateY(-3px) scale(1.08);z-index:2;position:relative}
.proof-avatars img:first-child{margin-left:0}
.proof-rating{display:flex;align-items:center;gap:6px;font-size:.9rem;color:var(--muted);font-weight:600}
.proof-rating strong{color:var(--text)}
.proof-stars{color:#ffce34;font-size:1.05rem;letter-spacing:3px;line-height:1}
.proof-label{margin-top:2px;font-size:.9rem;color:var(--muted);font-weight:600}
.proof-label strong{color:var(--text)}

/* Placar de resultados (a assinatura "números são o herói") */
.scoreboard{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(180deg,rgba(30,22,64,.55),rgba(21,14,40,.35));backdrop-filter:blur(6px)}
.score{display:flex;align-items:center;gap:14px;padding:26px 22px;position:relative}
.score + .score{border-left:1px solid var(--line)}
.score-num{font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;
  font-size:clamp(2.3rem,3.3vw,3.5rem);line-height:1;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.score-label{min-width:0;font-size:.92rem;font-weight:600;color:var(--muted);line-height:1.35}
.score-label strong{display:block;color:var(--text);font-weight:600}
@media (max-width:760px){
  .scoreboard{grid-template-columns:1fr 1fr}
  .score:nth-child(odd){border-left:0}
  .score:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:560px){.score{flex-direction:column;align-items:flex-start;text-align:left;gap:6px;padding:24px 22px}.score-num{font-size:2rem}.score-label{font-size:.84rem}}  /* mobile: número em cima do rótulo, sem encavalar */

/* Hero das landing /servico (com placar próprio) */
.hero-servico{min-height:100vh;min-height:100dvh;display:grid;align-content:center;
  padding-block:clamp(96px,13vh,150px) clamp(48px,7vh,88px)}
.hero-servico .h1{font-size:clamp(2.3rem,5.2vw,4.4rem);line-height:1.03;max-width:18ch;margin-top:20px}
.hero-tags{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}

/* ---- Hero de serviço com ilustração (2 colunas): e-mail, apps, IA, consultoria.
   Sem .hero-servico--art o .hero-lead fica em fluxo normal (coluna única, igual antes). ---- */
.hero-servico--art .hero-lead{display:grid;align-items:center;gap:clamp(4px,1vw,20px);
  grid-template-columns:minmax(0,1.42fr) minmax(0,1fr)}
.hero-servico--art .h1{max-width:none;line-height:1.12}
.hero-art{position:relative;margin:0;justify-self:start;width:100%;max-width:clamp(340px,42vw,520px)}
.hero-art img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.55));
  animation:hero-float 6s ease-in-out infinite alternate}
/* halo na paleta (roxo→lima) atrás da arte */
.hero-art::before{content:"";position:absolute;inset:8% 4% 12%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(124,43,255,.5),rgba(194,242,60,.14) 58%,transparent 74%);
  filter:blur(50px)}
@keyframes hero-float{from{transform:translateY(-9px)}to{transform:translateY(9px)}}
@media (prefers-reduced-motion:reduce){.hero-art img{animation:none}}
@media (max-width:900px){
  .hero-servico--art .hero-lead{grid-template-columns:1fr;gap:8px}
  .hero-servico--art .h1{max-width:18ch}
  .hero-art{display:none}  /* mobile: hero só com texto */
}

/* ---- Parede de sites reais rolando (fundo do hero: à direita e inclinada) ---- */
/* Fade da borda esquerda por mask de UM gradiente só (sem mask-composite, que era o
   que re-rasterizava a cada frame e travava): revela o fundo do hero atrás da parede,
   sem a divisão dura. Topo/base do fade ficam no ::after (overlay estático, não repinta).
   contain:paint isola a parede do resto. */
.hero-wall{position:absolute;top:0;bottom:0;right:0;width:min(64%,1040px);z-index:0;overflow:hidden;pointer-events:none;
  contain:layout paint;perspective:840px;perspective-origin:72% 28%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%);
  mask-image:linear-gradient(90deg,transparent,#000 24%)}
/* miolo com profundidade tipo crawl (maior embaixo, menor em cima) + tilt à direita.
   ordem importa: rotateX recua o topo; rotate(8deg) inclina a projeção já em perspectiva. */
.hero-wall-inner{position:absolute;inset:-58% -12% -58% -24%;display:flex;justify-content:center;
  gap:clamp(10px,1vw,16px);transform:rotate(8deg) rotateX(37deg) scale(1.3);transform-origin:50% 50%}
.hw-col{flex:0 0 clamp(140px,12.5vw,210px);display:flex;flex-direction:column;
  will-change:transform;animation:hw-scroll var(--dur,72s) linear infinite}
.hw-col--down{animation-direction:reverse}
/* -50% cai exatamente num ciclo porque o espaçamento vertical é margin (uniforme),
   não gap (que deixaria meia-fresta na emenda e faria o loop "pular") */
@keyframes hw-scroll{to{transform:translate3d(0,-50%,0)}}
/* flex:none é essencial - sem ele a coluna (esticada pela inner) encolhe os cards
   em faixas achatadas; com ele o card mantém a altura 3:4 da imagem e transborda
   (é o transbordo vertical que o marquee rola). */
.hw-card{flex:none;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 52px -28px rgba(0,0,0,.9);background:var(--surface);
  margin-bottom:clamp(12px,1.3vw,20px)}
/* aspect-ratio vai na imagem (não no card): no flex-column o card colapsaria a altura.
   3:4 retrato, mostrando o topo do print. */
.hw-card img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top;display:block;opacity:0;transition:opacity .7s ease}
.hw-card img.is-loaded{opacity:1}
/* véu p/ integrar ao tema violeta e ceder contraste ao texto (esq.);
   a 1ª camada é uniforme e tira o brilho dos prints claros na parede toda */
.hero-wall::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(rgba(10,7,17,.36),rgba(10,7,17,.36)),
    linear-gradient(90deg,var(--ink) 0%,rgba(10,7,17,.68) 22%,rgba(10,7,17,.28) 46%,rgba(124,43,255,.06) 72%,transparent 92%),
    linear-gradient(0deg,rgba(10,7,17,.5),transparent 24%),
    linear-gradient(180deg,var(--ink),transparent 10%)}
@media (prefers-reduced-motion:reduce){.hw-col{animation:none}.hw-card img{opacity:1;transition:none}}
@media (max-width:1024px){.hero-wall{width:62%}}
@media (max-width:760px){.hw-col:nth-child(3){display:none}.hero-wall{width:76%}}
/* mobile: parede POR TRÁS na metade de baixo da hero (home + sites/landing/cidades), fumê do CTA ao fim.
   Sem máscara e com 2 colunas mais lentas: máscara sobre transform animado re-rasteriza no scroll (iOS). */
@media (max-width:560px){
  .hero-wall{display:block;position:absolute;inset:auto 0 0 0;width:100%;height:56%;
    -webkit-mask-image:none;mask-image:none;contain:layout paint;perspective-origin:50% 30%}
  .hero-wall .hw-col{animation-duration:73s}  /* 1,5x mais rápido */
  .hero-wall .hw-col:nth-child(3){display:flex}  /* 3 colunas como no desktop */
  .hero-wall-inner{inset:-40% -18%;transform:rotate(8deg) rotateX(37deg) scale(1.15)}
  .hero-wall::after{background:linear-gradient(180deg,var(--ink) 0,var(--ink) 7%,rgba(10,7,17,.5) 34%,rgba(10,7,17,.12) 72%,rgba(10,7,17,.35))}
}

/* ============================================================
   CLIENTES (logos)  - sections/shared/clients.php
   ============================================================ */
.clients{padding-block:clamp(40px,5vw,64px)}
.clients-eyebrow{text-align:center;color:var(--muted-2);font-size:.8rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:30px}
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;align-items:center}
.logo-item{position:relative;height:86px;display:grid;place-items:center;padding:10px;border-radius:var(--r);
  border:1px solid var(--line);background:rgba(255,255,255,.015);
  transition:border-color .38s cubic-bezier(.2,.7,.2,1),background .38s cubic-bezier(.2,.7,.2,1),transform .38s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.logo-item:hover{border-color:var(--line-2);background:rgba(255,255,255,.04);transform:scale(1.5);z-index:2}.logo-item:hover img{filter:none;opacity:1}}  /* só com mouse: no touch o hover gruda */
.logo-item img{max-height:58px;width:auto;object-fit:contain;
  filter:grayscale(1) brightness(0) invert(.82);opacity:.7;
  transition:opacity .38s cubic-bezier(.2,.7,.2,1),filter .38s cubic-bezier(.2,.7,.2,1)}
.clients-head{text-align:center;margin-bottom:36px}
@media (max-width:900px){.logos{grid-template-columns:repeat(4,1fr)}}
@media (max-width:540px){.logos{grid-template-columns:repeat(3,1fr)}.logo-item{height:74px}}
/* MacBook centralizado: prints correm por trás, aparecendo pela tela (transparente no PNG).
   insets da tela medidos direto no PNG (1800x1045). */
.macbook{position:relative;max-width:min(1000px,94%);margin:clamp(32px,3.8vw,52px) auto}
.macbook-frame{display:block;width:100%;height:auto;position:relative;z-index:2;pointer-events:none;
  filter:drop-shadow(0 42px 60px rgba(0,0,0,.55))}
.macbook-screen{position:absolute;z-index:1;overflow:hidden;background:#0a0711;
  top:2.2%;left:10.72%;right:10.78%;bottom:11.67%}
/* carrossel coverflow: MacBook central + prévia menor de cada lado + setas (JS em site.js) */
.mac-carousel{position:relative;margin:clamp(32px,3.8vw,52px) auto 0;max-width:1600px;
  padding-inline:22px;box-sizing:border-box}
.mac-viewport{min-width:0;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.6vw,40px)}
.mac-viewport .macbook{margin:0;flex:0 1 1140px;max-width:1140px;min-width:0}
.mac-preview{flex:0 1 clamp(92px,12.5vw,188px);min-width:0;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 22px 44px -26px rgba(0,0,0,.85);
  opacity:.5;transition:opacity .3s cubic-bezier(.2,.7,.2,1)}
.mac-preview:hover{opacity:.85}
.mac-preview img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top;display:block}
/* tela: 2 camadas — a nova entra (por trás do frame) enquanto a atual sai pro lado oposto */
.macbook-screen .mac-layer{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top;display:block;
  transition:transform .55s cubic-bezier(.45,0,.2,1)}
/* setas coladas nas laterais do MacBook, por cima das prévias */
.macbook .mac-nav{position:absolute;top:50%;z-index:3;padding:0;
  width:clamp(40px,3.2vw,52px);height:clamp(40px,3.2vw,52px);
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  border:1px solid var(--line-2);background:rgba(21,14,40,.72);backdrop-filter:blur(6px);
  color:var(--text);font-size:1.5rem;line-height:1;
  transition:background .25s cubic-bezier(.2,.7,.2,1),border-color .25s,transform .25s}
.macbook .mac-nav--prev{left:0;transform:translate(-18%,-50%)}
.macbook .mac-nav--next{right:0;transform:translate(18%,-50%)}
.macbook .mac-nav:hover{background:rgba(30,22,64,.9);border-color:var(--muted-2)}
.macbook .mac-nav--prev:hover{transform:translate(-18%,-50%) scale(1.09)}
.macbook .mac-nav--next:hover{transform:translate(18%,-50%) scale(1.09)}
@media (max-width:760px){.mac-preview{display:none}.mac-viewport .macbook{flex:0 1 min(780px,95vw)}}
@media (prefers-reduced-motion:reduce){.macbook-screen .mac-layer{transition:none}}

/* ============================================================
   INTRO  - sections/home/intro.php + servico/intro.php
   ============================================================ */
.intro .container{max-width:880px;text-align:center}
.intro .lead{margin-top:18px}
.intro .btn{margin-top:34px}

/* Intro em 2 colunas (serviços não-visuais): texto/CTA à esquerda + cards do "inclui" à direita */
.intro--split .container{max-width:var(--maxw);text-align:left}
.intro-split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,64px);align-items:start}
.intro-split .eyebrow{justify-content:flex-start}
.intro-split .lead{margin-top:18px}
.intro-split .btn{margin-top:28px}
.intro-split__cards .services-grid{margin-top:0;grid-template-columns:1fr 1fr}
.intro-split__cards .services-grid .service-slot{grid-column:auto}
@media (max-width:900px){.intro-split{grid-template-columns:1fr;gap:34px}}
@media (max-width:520px){.intro-split__cards .services-grid{grid-template-columns:1fr;grid-auto-rows:auto}}

/* ============================================================
   BENEFÍCIOS  - sections/shared/benefits.php
   ============================================================ */
.benefits-grid{margin-top:var(--stack);display:grid;grid-template-columns:1fr 1fr;gap:18px}
.benefit{position:relative;display:flex;gap:18px;align-items:flex-start;padding:28px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);transition:border-color .38s cubic-bezier(.2,.7,.2,1),transform .38s cubic-bezier(.2,.7,.2,1),background .38s cubic-bezier(.2,.7,.2,1)}
.benefit:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--surface-2)}
/* luz verde correndo pela borda enquanto o mouse está sobre o card */
@property --bd-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.benefit::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--bd-angle),transparent 0deg 248deg,rgba(194,242,60,.35) 292deg,var(--lime) 318deg,#eaffa0 328deg,var(--lime) 338deg,rgba(194,242,60,.35) 356deg,transparent 360deg);
  -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 .38s ease}
.benefit:hover::before{opacity:1;animation:bd-rotate 2.6s linear infinite}
@keyframes bd-rotate{to{--bd-angle:360deg}}
@media (prefers-reduced-motion:reduce){.benefit:hover::before{animation:none}}
.benefit .ico{flex:none;width:50px;height:50px;border-radius:13px;display:grid;place-items:center;
  background:rgba(194,242,60,.1);border:1px solid rgba(194,242,60,.22);color:var(--lime)}
.benefit .ico svg{width:25px;height:25px}
.benefit h3{margin-bottom:8px;color:var(--text)}
.benefit p{font-size:.94rem;line-height:1.6}
@media (max-width:780px){.benefits-grid{grid-template-columns:1fr}}

/* ============================================================
   CONTADORES (seção dedicada, usada na landing /servico)
   ============================================================ */
.team-stats .lead{margin-top:18px;margin-inline:auto;max-width:760px}
.stats{margin-top:var(--stack);display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{padding:30px 24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.stat-num{font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-label{margin-top:12px;font-size:.92rem;font-weight:600;color:var(--muted)}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}}

/* ============================================================
   PROCESSO  - sections/shared/process.php
   (sequência real → numeração 01–05 sobre a trajetória)
   ============================================================ */
.process .section-head{margin-inline:auto}
.steps{margin-top:var(--stack);display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative}
.steps::before{content:"";position:absolute;left:7%;right:7%;top:38px;height:2px;z-index:0;
  background:var(--grad-line);opacity:.4}
/* facho de luz percorrendo a linha em loop */
.steps::after{content:"";position:absolute;top:38px;height:2px;width:13%;z-index:0;pointer-events:none;border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(194,242,60,.9),transparent);
  box-shadow:0 0 8px 1px rgba(194,242,60,.4);
  animation:steps-beam 8.5s ease-in-out infinite}
@keyframes steps-beam{0%{left:7%;opacity:0}8%{opacity:1}52%{opacity:1}65%{left:78%;opacity:0}100%{left:7%;opacity:0}}
@media (prefers-reduced-motion:reduce){.steps::after{display:none}}
.step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.step .ico{width:76px;height:76px;border-radius:20px;display:grid;place-items:center;
  background:var(--ink-1);border:1px solid var(--line-2);color:var(--lime);position:relative}
.step .ico svg{width:30px;height:30px}
.step-n{position:absolute;top:-10px;right:-10px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--display);font-size:.78rem;font-weight:800;
  color:#0a0a0a;background:var(--lime)}
.step-name{font-weight:600;color:var(--text);font-size:.98rem}
.process-copy{margin-top:48px;max-width:780px;margin-inline:auto;text-align:center}
@media (max-width:820px){
  .steps{grid-template-columns:repeat(2,1fr);gap:28px 16px}
  .steps::before,.steps::after{display:none}
}
/* mobile: 3 ícones em cima, 2 embaixo, centralizados */ @media (max-width:640px){.steps{display:flex;flex-wrap:wrap;justify-content:center;gap:26px 6px}.step{flex:0 0 31%}.step .ico{width:62px;height:62px;border-radius:16px}.step .ico svg{width:26px;height:26px}.step-n{width:24px;height:24px;font-size:.7rem;top:-8px;right:-8px}.step-name{font-size:.88rem}}

/* ============================================================
   SERVIÇOS  - sections/shared/services.php
   ============================================================ */
.services-grid{margin-top:var(--stack);display:grid;grid-template-columns:repeat(6,1fr);gap:16px;grid-auto-rows:1fr}
.services-grid .service-slot{grid-column:span 2}
.service-card{height:100%}
/* slot = card + imagens; as imagens são irmãs ATRÁS do card (não filhas), então o card as cobre */
.service-slot{position:relative}
.service-slot:hover{z-index:3}
.service-card{position:relative;padding:24px 22px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);transition:border-color .38s cubic-bezier(.2,.7,.2,1),transform .38s cubic-bezier(.2,.7,.2,1)}
.service-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:0;
  background:var(--grad-line);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .38s ease}
.service-card:hover{transform:translateY(-4px);z-index:3}
.service-card:hover::before{opacity:.9}
.service-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.service-card .ico{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:rgba(124,43,255,.14);border:1px solid rgba(124,43,255,.28);color:var(--violet-2)}
.service-card .ico svg{width:24px;height:24px}
.service-card h3{margin-bottom:0;color:var(--text);font-size:clamp(1.18rem,1.4vw,1.3rem);font-weight:800}
.service-card{display:flex;flex-direction:column}   /* p/ o "Ver detalhes" descer pro rodapé do card */
.service-card p{font-size:.88rem;line-height:1.55}
/* "Ver detalhes ->" nos cards que são link (home/cidades); ausente nos cards de "o que inclui" */
.service-more{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:.4em;
  font-size:.82rem;font-weight:600;letter-spacing:.01em;color:var(--lime)}
.service-more svg{width:15px;height:15px;transition:transform .25s}
.service-card:hover .service-more svg{transform:translateX(4px)}
/* 3 imagens que "saltam" ao passar o mouse: surgem pequenas no canto e abrem em leque inclinado */
.service-pop{position:absolute;top:44%;left:50%;width:0;height:0;pointer-events:none;z-index:0}
.service-pop img{position:absolute;bottom:0;left:0;width:auto;height:auto;max-width:clamp(100px,8.5vw,130px);max-height:clamp(78px,6.2vw,92px);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
  opacity:0;transform-origin:bottom center;transform:translate(-50%,15%) scale(.5) rotate(0);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
.service-slot:hover .service-pop img{opacity:1}
.service-slot:hover .service-pop img:nth-child(1){transform:translate(-74%,-86%) scale(1) rotate(-26deg)}
.service-slot:hover .service-pop img:nth-child(2){transform:translate(-50%,-104%) scale(1) rotate(0);transition-delay:.06s}
.service-slot:hover .service-pop img:nth-child(3){transform:translate(-26%,-86%) scale(1) rotate(26deg);transition-delay:.12s}
@media (prefers-reduced-motion:reduce){.service-pop img{transition:opacity .2s ease}}
@media (max-width:1080px){.services-grid{grid-template-columns:repeat(3,1fr)}
  .services-grid .service-slot{grid-column:auto}}
@media (max-width:720px){.services-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.services-grid{grid-template-columns:1fr;grid-auto-rows:auto}}

/* ============================================================
   FAIXA CRUZADA (X)  - sections/shared/ribbon.php
   ============================================================ */
/* ancorada na linha de divisão (topo do .site-footer, que é position:relative); metade p/ cada lado.
   clip só na horizontal (evita scroll lateral dos 160vw); vertical livre p/ não cortar canto. */
.ribbons{position:absolute;top:0;left:0;right:0;height:0;z-index:5;pointer-events:none;overflow-x:clip;overflow-y:visible}
.ribbon{position:absolute;left:50%;top:0;width:160vw;padding:11px 0;
  background:var(--lime);color:#0a0a0a;box-shadow:0 12px 34px -14px rgba(0,0,0,.7)}
.ribbon--a{transform:translate(-50%,-50%) rotate(-3.5deg)}
.ribbon--b{transform:translate(-50%,-50%) rotate(3.5deg);background:var(--lime-2)}
.ribbon-track{display:flex;align-items:center;width:max-content;white-space:nowrap;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.015em;
  font-size:clamp(.98rem,1.7vw,1.3rem);animation:ribbon-move 30s linear infinite}
.ribbon--b .ribbon-track{animation-direction:reverse;animation-duration:34s}
.ribbon-track>span{padding:0 .5em}
.ribbon-star{font-style:normal;color:rgba(10,10,10,.45);font-size:.85em}
@keyframes ribbon-move{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ribbon-track{animation:none}}

/* ============================================================
   DEPOIMENTOS  - sections/shared/testimonials.php
   ============================================================ */
/* carrossel full-width: auto-scroll (JS) + setas + arrastar. pausa no hover/interação */
.testi-viewport{position:relative;margin-top:var(--stack);width:100vw;margin-left:calc(50% - 50vw)}
.testi-marquee{overflow-x:auto;overflow-y:hidden;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.testi-marquee::-webkit-scrollbar{display:none}
.testi-marquee.dragging{cursor:grabbing}
.testi-marquee.dragging .testi-row{user-select:none}
/* espaçamento por margin nos cards; o loop reseta em scrollWidth/2 (JS), fecha exato */
.testi-row{display:flex;width:max-content;padding:6px 0}
/* setas de navegação (fora da máscara, sobre as bordas) */
.testi-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(20,14,32,.72);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s,transform .2s}
.testi-arrow:hover{background:rgba(44,30,66,.95);border-color:var(--lime)}
.testi-arrow:active{transform:translateY(-50%) scale(.94)}
.testi-arrow--prev{left:clamp(8px,2vw,28px)}
.testi-arrow--next{right:clamp(8px,2vw,28px)}
@media (max-width:520px){.testi-arrow{width:42px;height:42px}}
/* par foto+depoimento como bloco único; zoom no par inteiro ao passar o mouse */
.tpair{flex:0 0 auto;display:flex;margin-right:36px;position:relative;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.tpair:hover{transform:scale(1.03);z-index:2}
.tcard{flex:0 0 clamp(238px,23vw,296px);aspect-ratio:4/5;border-radius:20px;overflow:hidden;position:relative;
  border:1px solid var(--line);background:var(--surface)}
/* card-foto: nome sobre a imagem. emendado no card-verde: sem folga, arredonda só a esquerda */
.tcard--photo{border-radius:20px 0 0 20px;border-right:none}
.tcard--photo>img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.tcard--photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:42px 18px 16px;
  display:flex;flex-direction:column;gap:2px;background:linear-gradient(transparent,rgba(8,5,15,.92))}
.tcard--photo figcaption strong{color:#fff;font-weight:600;font-size:1rem;line-height:1.2}
.tcard--photo figcaption span{color:rgba(255,255,255,.72);font-size:.82rem}
/* card-depoimento verde (lima da marca, não oliva) */
.tcard--quote{background:linear-gradient(165deg,rgba(194,242,60,.14),rgba(124,43,255,.07) 78%,rgba(21,14,40,.1));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(194,242,60,.2);border-left:none;
  border-radius:0 20px 20px 0;padding:22px 20px;display:flex;flex-direction:column;color:#f0f6e2}
.tcard--quote .tq-top{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.tcard--quote .stars{color:#ffce34;letter-spacing:2px;font-size:1rem}
.tcard--quote .rating{font-size:.78rem;color:#cfe0ab}
.tcard--quote blockquote{flex:1;display:flex;align-items:center;font-size:1.08rem;line-height:1.5;
  color:#f3f8ec;overflow:hidden}

/* ============================================================
   PORTFÓLIO  - sections/shared/portfolio.php
   ============================================================ */
.portfolio-grid{margin-top:var(--stack);display:block}
.proj-card{margin-bottom:26px;
  display:grid;grid-template-columns:1fr 1.15fr;align-items:stretch;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);overflow:hidden;box-shadow:0 -14px 44px -22px rgba(0,0,0,.7);
  transition:border-color .38s cubic-bezier(.2,.7,.2,1),box-shadow .38s cubic-bezier(.2,.7,.2,1)}
/* efeito gaveta SÓ na home (.portfolio-grid--stack): cada card gruda no topo e o de baixo sobe por cima.
   Na /cases/ o grid vem sem --stack, então os cards ficam em fluxo normal e não se sobrepõem. */
.portfolio-grid--stack .proj-card{position:sticky;top:calc(96px + var(--i,0) * 22px)}
/* reveal controla a transition; reincluo border/shadow p/ o hover animar suave */
.proj-card.reveal{transition:transform .7s cubic-bezier(.16,1,.3,1),border-color .38s cubic-bezier(.2,.7,.2,1),box-shadow .38s cubic-bezier(.2,.7,.2,1),opacity .85s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1)}
.proj-card:hover{border-color:var(--line-2);box-shadow:0 18px 40px -18px rgba(0,0,0,.62)}
/* zoom 1.05x no hover. Seletor com .in p/ vencer o `.reveal.in{transform:none}`; a
   transição de transform (.7s, ease-out forte de .proj-card.reveal) já deixa isso ágil. */
.js .proj-card.in:hover{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.js .proj-card.in:hover{transform:none}}
.proj-media{order:2;position:relative;align-self:stretch;min-height:100%}
.proj-media img{width:100%;height:100%;display:block;object-fit:cover}
.proj-body{padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;justify-content:center}
.proj-card h3{margin-bottom:14px;color:var(--text);font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:800}
.proj-desc{font-size:.95rem;margin-bottom:20px;line-height:1.6}
/* tira de 3 números grandes (sorteados por card) */
.proj-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-bottom:22px;padding:20px 0;border-block:1px solid var(--line)}
.proj-stat b{display:block;font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:clamp(1.55rem,2.5vw,2.3rem);line-height:1;letter-spacing:-.03em;white-space:nowrap;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.proj-stat span{display:block;margin-top:7px;font-size:.76rem;line-height:1.35;color:var(--muted)}
.proj-results{display:flex;flex-direction:column;gap:11px}
.proj-results li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;color:var(--text)}
.proj-results svg{flex:none;width:18px;height:18px;color:var(--lime);margin-top:2px}
@media (max-width:760px){
  .proj-card{grid-template-columns:1fr}
  .portfolio-grid--stack .proj-card{position:static}   /* sem empilhamento sticky no mobile */
  .proj-media{order:0;min-height:0}
  .proj-media img{height:auto;aspect-ratio:16/10}
}

/* card usado como link (listagem de cases + "outros cases" da single) */
.proj-card--link{text-decoration:none;color:inherit;cursor:pointer}
.proj-more{display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:var(--lime);font-weight:600;font-size:.95rem}
.proj-more svg{width:17px;height:17px;transition:transform .25s}
.proj-card--link:hover .proj-more svg{transform:translateX(4px)}

/* cards compactos (home E /cases/): teto de altura, resultados escondidos no card
   (a lista aparece inteira na página do case). Corta a altura ~pela metade. */
.portfolio-grid .proj-card{max-height:360px}
.portfolio-grid .proj-body{padding:clamp(20px,2.4vw,30px)}
.portfolio-grid .proj-card h3{font-size:clamp(1.35rem,2.1vw,1.9rem);margin-bottom:10px}
.portfolio-grid .proj-desc{margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.portfolio-grid .proj-stats{padding:14px 0;margin-bottom:0}
.portfolio-grid .proj-results{display:none}
.portfolio-grid .proj-more{margin-top:14px}
@media (max-width:760px){ .portfolio-grid .proj-card{max-height:none} }

/* galeria de mockups (single do case): grade uniforme, clique abre no lightbox */
.case-gallery{max-width:980px;margin:36px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.case-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);border:1px solid var(--line);
  cursor:zoom-in;display:block;transition:opacity .2s,transform .2s}
.case-gallery img:hover{opacity:.92;transform:translateY(-2px)}
@media (max-width:600px){.case-gallery{grid-template-columns:repeat(2,1fr)}}

/* lightbox (abre a foto/mockup em tela cheia) */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,48px);background:rgba(6,6,12,.93);opacity:0;visibility:hidden;transition:opacity .25s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:100%;border-radius:var(--r);box-shadow:0 30px 90px -20px rgba(0,0,0,.85)}
.lightbox button{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;line-height:1;
  border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .18s}
.lightbox button:hover{background:rgba(255,255,255,.24)}
.lightbox__x{top:16px;right:18px;width:44px;height:44px;font-size:24px}
.lightbox__nav{top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:30px}
.lightbox__nav--prev{left:14px}.lightbox__nav--next{right:14px}
@media (prefers-reduced-motion:reduce){.lightbox{transition:none}.case-gallery img{transition:none}}
@media (max-width:600px){.lightbox__nav{width:42px;height:42px;font-size:24px}}

/* "O resultado" na largura da galeria (alinha com a grade de mockups).
   .prose.prose--wide (2 classes) p/ vencer o .prose{max-width:780px} que vem depois no arquivo. */
.prose.prose--wide{max-width:980px}
/* hero da listagem /cases/ com +50px no topo */
.cases-top{padding-top:calc(clamp(34px,4.25vw,56px) + 50px)}

/* corpo do case em 2 colunas: 70% do texto (desafio/o que fizemos/resultado) + 30% responsável */
.case-body{max-width:980px;margin:36px auto 0;display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
.case-body .prose{margin:0;max-width:none}
@media (min-width:900px){
  .case-body{grid-template-columns:minmax(0,7fr) minmax(0,3fr);align-items:start}
  .case-aside{position:sticky;top:100px}   /* a foto acompanha a leitura */
}

/* card do responsável (foto + feedback), na coluna de 30% — vidro escuro fosco no tom dos
   depoimentos da home (o card branco puro saltava demais no tema escuro), foto quadrada full-width */
.case-depo{background:linear-gradient(165deg,rgba(194,242,60,.10),rgba(124,43,255,.09) 55%,rgba(21,14,40,.92));
  border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;text-align:center}
.case-depo img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border:0;border-radius:0}
.case-depo__body{padding:clamp(20px,2.2vw,28px)}
.case-depo__quote{font-family:var(--display);font-size:1.15rem;color:var(--text);line-height:1.5;margin:0;font-weight:600}
.case-depo__who{margin-top:14px;color:var(--muted);font-size:.9rem}
.case-depo__who strong{color:var(--text);font-weight:800}

/* ============================================================
   SOBRE / AUTORIDADE  - sections/shared/sobre.php
   ============================================================ */
.sobre-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,5vw,60px);align-items:center}
.sobre-portrait{position:relative;aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line-2);background:linear-gradient(160deg,var(--violet-deep),var(--surface-2))}
.sobre-portrait::before{content:"DC";position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:clamp(4.5rem,11vw,7.5rem);letter-spacing:-.05em;
  color:rgba(242,238,251,.12)}
.sobre-portrait::after{content:"";position:absolute;left:-20%;right:-20%;top:48%;height:60%;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(194,242,60,.16),transparent 70%);filter:blur(30px)}
.sobre-portrait img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.sobre-copy .eyebrow::before{background:var(--grad-line)}
.sobre-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.sobre-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
@media (max-width:820px){.sobre-grid{grid-template-columns:1fr;gap:34px}
  .sobre-portrait{max-width:340px;margin-inline:auto}}

/* ============================================================
   FAQ  - sections/shared/faq.php
   ============================================================ */
.faq-list{max-width:820px;margin:var(--stack) auto 0;display:flex;flex-direction:column;gap:14px}
.faq-item{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  transition:border-color .38s cubic-bezier(.2,.7,.2,1),background .38s cubic-bezier(.2,.7,.2,1)}
.faq-item[open]{border-color:var(--line-2);background:var(--surface-2)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:22px 26px;font-weight:600;color:var(--text);font-size:1.05rem}
.faq-item:not([open]):hover{border-color:var(--line-2)}
.faq-item:not([open]) summary:hover .faq-chevron{color:var(--lime);transform:translateY(2px)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-chevron{flex:none;width:20px;height:20px;color:var(--muted);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),color .3s ease}
.faq-item[open] .faq-chevron{transform:rotate(180deg);color:var(--lime)}
.faq-a{padding:0 26px 24px;color:var(--muted);line-height:1.65;max-width:66ch;
  overflow:hidden;transition:height .35s cubic-bezier(.2,.7,.2,1)}

/* ============================================================
   FAIXA CTA  - sections/shared/cta-banner.php
   ============================================================ */
.cta-banner-sec{padding-block:clamp(48px,6vw,72px) clamp(20px,4vw,40px)}
.cta-banner{position:relative}
.cta-banner-panel{position:relative;overflow:visible;border-radius:var(--r-xl);
  background:linear-gradient(115deg,var(--violet-deep),var(--violet) 54%,var(--violet-2));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 30px 70px -30px rgba(74,15,176,.55);
  padding:clamp(30px,4vw,48px);min-height:clamp(300px,30vw,400px);display:flex;align-items:center}
.cta-banner-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(60% 90% at 12% 12%,rgba(194,242,60,.18),transparent 60%)}
.cb-monogram{position:absolute;left:clamp(6px,2vw,30px);bottom:0;z-index:0;pointer-events:none;
  font-family:var(--display);font-weight:800;font-size:clamp(11rem,26vw,20rem);line-height:.8;
  letter-spacing:-.06em;color:rgba(255,255,255,.09)}
.cb-copy{position:relative;z-index:1;margin-left:auto;max-width:min(560px,54%)}
.cb-copy .h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.6rem)}
.cb-copy p{color:rgba(255,255,255,.82);margin-top:14px;font-size:1.05rem;line-height:1.55}
.cb-actions{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.cb-link{display:inline-flex;align-items:center;gap:.45em;font-weight:600;color:#fff;font-size:.98rem;
  transition:gap .2s}
.cb-link svg{width:16px;height:16px}
.cb-link:hover{gap:.75em}
.cb-photo-col{position:absolute;left:clamp(10px,2.5vw,44px);bottom:0;z-index:1;pointer-events:none;
  display:flex;align-items:flex-end}
.cb-photo{height:clamp(340px,36vw,480px);width:auto;max-width:100%;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
@media (max-width:760px){
  .cta-banner-panel{min-height:0;text-align:center}
  .cb-copy{max-width:none;margin-left:0}
  .cb-actions{justify-content:center}
  .cb-photo-col{display:none}
  .cb-monogram{opacity:.6}
}

/* ============================================================
   CTA + FORMULÁRIO  - sections/shared/cta-form.php
   (o clímax: único bloco de cor cheia da página)
   ============================================================ */
.cta-form{position:relative}
.cta-panel{position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(120deg,var(--violet-deep),var(--violet) 48%,#0c0a14 100%);
  border:1px solid var(--line-2)}
.cta-panel::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(50% 80% at 90% 10%,rgba(194,242,60,.2),transparent 60%)}
.cta-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;
  padding:clamp(32px,5vw,60px)}
.cta-copy .eyebrow{color:#e8e0ff}
.cta-copy .eyebrow::before{background:var(--lime)}
.cta-copy h2{color:#fff;margin:16px 0 14px}
.cta-copy .lead{color:#e3dbf5}
.cta-trust{margin-top:22px;display:flex;align-items:center;gap:10px;font-size:.9rem;color:#e3dbf5}
.cta-trust svg{width:18px;height:18px;color:var(--lime);flex:none}
.js-form{background:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;display:flex;flex-direction:column;gap:13px;position:relative}
.form-title{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--text);margin-bottom:4px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.field input,.field select,.field textarea{width:100%;background:var(--ink-1);border:1px solid var(--line-2);
  border-radius:11px;padding:14px 15px;color:var(--text);font-family:inherit;font-size:.95rem;
  transition:border-color .15s,box-shadow .15s}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--lime);
  box-shadow:0 0 0 3px rgba(194,242,60,.15)}
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{border-color:#ff8a8a;box-shadow:0 0 0 3px rgba(255,138,138,.14)}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C7298' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.form-msg{margin:0;font-size:.9rem;min-height:1.2em}
.form-msg.is-ok{color:var(--lime)}.form-msg.is-err{color:#ff8a8a}
@media (max-width:880px){.cta-grid{grid-template-columns:1fr;gap:30px}.field-row{grid-template-columns:1fr}}

/* ============================================================
   FOOTER  (layout/footer.php)
   ============================================================ */
.site-footer{position:relative;background:var(--ink-1);
  padding-block:clamp(96px,11vw,140px) 30px;margin-top:clamp(48px,8vw,96px)}
.footer-brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.footer-brand .logo{margin-bottom:18px}
.footer-brand p{font-size:.92rem;max-width:52ch;line-height:1.6}
.footer-social{margin-top:20px;display:flex;justify-content:center;gap:10px}
.footer-social a{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--muted);transition:color .18s,border-color .18s,transform .18s}
.footer-social a:hover{color:var(--lime);border-color:var(--lime);transform:translateY(-2px)}
.footer-social svg{width:19px;height:19px}
.footer-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;font-size:.86rem;color:var(--muted-2)}

/* ============================================================
   VIDRO LÍQUIDO (liquid glass)
   Superfícies translúcidas e refrativas. A aurora fixa atrás dá
   "conteúdo" para o blur refratar; o realce interno no topo (borda
   de luz) + o brilho especular são a assinatura do vidro.
   ============================================================ */
:root{
  --glass-bg:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.014) 48%,rgba(124,43,255,.055));
  --glass-blur:blur(16px) saturate(160%);
  --glass-edge:rgba(255,255,255,.10);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -14px 26px -20px rgba(0,0,0,.55);
  --glass-shadow:0 16px 44px -20px rgba(0,0,0,.72);
}
/* aurora ambiente (fixa) - aparece onde a seção é transparente e o vidro a refrata */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42% 42% at 10% 14%,rgba(124,43,255,.16),transparent 70%),
    radial-gradient(36% 40% at 90% 28%,rgba(194,242,60,.07),transparent 70%),
    radial-gradient(48% 48% at 74% 92%,rgba(124,43,255,.13),transparent 72%)}

/* superfícies de vidro (só com suporte a backdrop-filter; senão mantêm o sólido original) */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,
  .card,.benefit,.service-card,.proj-card,.testi-card,.stat,
  .js-form,.scoreboard,.logo-item,.pill{
    background:var(--glass-bg);
    -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-edge);
    box-shadow:var(--glass-shadow),var(--glass-hi)}

  /* brilho especular (gloss) no topo - o toque "líquido" */
  .glass,.benefit,.service-card,.testi-card,.stat,.js-form,.scoreboard{position:relative}
  .benefit::after,.testi-card::after,.stat::after,.js-form::after,.scoreboard::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:radial-gradient(130% 68% at 22% -8%,rgba(255,255,255,.07),transparent 52%)}
  .benefit>*,.testi-card>*,.stat>*,.js-form>*,.scoreboard>*{position:relative;z-index:1}
  /* service/proj usam ::before próprio p/ borda em gradiente; gloss vai no ::after também */
  .service-card::after,.proj-card::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:radial-gradient(130% 68% at 22% -8%,rgba(255,255,255,.065),transparent 52%)}
  .service-card>*,.proj-card>*{position:relative;z-index:1}

  /* botão fantasma em vidro mais fino */
  .btn--ghost{background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.03));
    -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
  .btn--ghost:hover{background:linear-gradient(160deg,rgba(194,242,60,.12),rgba(255,255,255,.04))}

  /* header e placar: vidro mais forte (têm conteúdo/parede atrás) */
  .site-header.scrolled .container::before{background:rgba(10,7,17,.42);
    -webkit-backdrop-filter:blur(22px) saturate(165%);backdrop-filter:blur(22px) saturate(165%)}
  /* placar sobre a parede de sites: base mais escura p/ os números em gradiente saltarem */
  .scoreboard{background:linear-gradient(170deg,rgba(21,14,40,.62),rgba(10,7,17,.44));
    -webkit-backdrop-filter:blur(20px) saturate(165%);backdrop-filter:blur(20px) saturate(165%)}
}

/* ============================================================
   WhatsApp flutuante
   ============================================================ */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:70;height:56px;border-radius:999px;
  display:flex;align-items:center;background:#25D366;color:#fff;box-shadow:0 12px 30px -8px rgba(37,211,102,.6)}
.wa-float svg{width:30px;height:30px;flex:none;margin:13px}
.wa-float__label{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;font-weight:600;font-size:.9rem;line-height:1;
  transition:max-width .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease,padding .45s cubic-bezier(.2,.8,.2,1)}
.wa-float.wa-open .wa-label--auto,
.wa-float:hover .wa-label--hover{max-width:340px;opacity:1;padding-left:18px}
.wa-float:hover .wa-label--auto{max-width:0;opacity:0;padding-left:0}
@media (max-width:520px){.wa-float{right:16px;bottom:16px;height:52px}.wa-float svg{margin:11px}
  .wa-float__label{font-size:.82rem;white-space:normal;line-height:1.25}
  .wa-float.wa-open .wa-label--auto,.wa-float:hover .wa-label--hover{max-width:calc(100vw - 104px)}}

/* ============================================================
   MODAL DE CAPTAÇÃO (lead) -> WhatsApp
   ============================================================ */
.lead-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.lead-modal.open{display:flex}
.lead-modal__backdrop{position:absolute;inset:0;background:rgba(6,4,12,.74);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.lead-modal__card{position:relative;width:100%;max-width:460px;
  background:linear-gradient(180deg,var(--surface),var(--ink-1));
  border:1px solid var(--line-2);border-radius:var(--r-xl);padding:34px 30px 26px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);animation:lm-in .3s cubic-bezier(.2,.8,.2,1)}
@keyframes lm-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.lead-modal__card .h2{font-size:clamp(1.5rem,3.4vw,1.9rem)}
.lead-modal__x{position:absolute;top:15px;right:15px;width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);
  color:var(--muted);cursor:pointer;transition:.2s}
.lead-modal__x:hover{color:var(--text);border-color:var(--line-2)}
.lead-modal__x svg{width:18px;height:18px}
.lead-modal__form{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.lead-modal__form input,.lead-modal__form select{width:100%;font-family:var(--font);font-size:1rem;
  color:var(--text);background:rgba(255,255,255,.03);border:1px solid var(--line-2);
  border-radius:var(--r);padding:14px 16px;outline:none;transition:border-color .2s}
.lead-modal__form input::placeholder{color:var(--muted-2)}
.lead-modal__form input:focus,.lead-modal__form select:focus{border-color:var(--lime)}
.lead-modal__form select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B3A8CE' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.lead-modal__form option{color:#141018;background:#fff}
.lead-modal__form button{margin-top:6px;width:100%}
.lead-modal__note{margin-top:2px;font-size:.8rem;color:var(--muted-2);text-align:center}
body.lm-lock{overflow:hidden}

/* ============================================================
   LP ANÁLISE GRATUITA - sections/lp/ (case sóbrio + passos em card)
   ============================================================ */
.lp-case{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(28px,5vw,56px);max-width:860px;margin-inline:auto}
.lp-hl{color:var(--lime)}
.lp-case-author{display:flex;gap:14px;align-items:center;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.lp-case-author img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.lp-case-author p{color:var(--muted);font-size:.95rem;line-height:1.5}
.lp-case-author strong{color:var(--text)}
.lp-steps{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px}
.lp-step-n{font-weight:800;font-size:.85rem;letter-spacing:.06em;color:var(--lime)}
.lp-step .h3{margin:12px 0 8px}
.lp-step p{color:var(--muted);font-size:.95rem}
@media (max-width:760px){.lp-steps{grid-template-columns:1fr}}

/* ============================================================
   BLOG / GUIAS - /blog/ e /blog/{slug}/ (sections/blog/)
   ============================================================ */
.artigo-head{max-width:780px;margin-inline:auto;padding-top:clamp(120px,16vw,164px)}
.artigo-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px;color:var(--muted-2);font-size:.85rem}
.prose{max-width:780px;margin:36px auto 0;font-size:1.06rem;color:var(--muted)}
.prose h2{color:var(--text);font-size:clamp(1.35rem,2.6vw,1.7rem);margin:44px 0 14px}
.prose h3{color:var(--text);font-size:1.12rem;margin:30px 0 10px}
.prose p{margin:14px 0}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{margin:14px 0 14px 22px;color:var(--muted)}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin:7px 0}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.95rem}
.prose th{text-align:left;color:var(--text);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line-2)}
.prose td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose blockquote{border-left:3px solid var(--lime);padding:4px 0 4px 18px;margin:20px 0;color:var(--text)}
.prose .destaque{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:20px 0}
.blog-grid{margin-top:var(--stack);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.blog-card{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px 24px;transition:border-color .2s,transform .2s}
.blog-card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.blog-card .cat{font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--lime)}
.blog-card h2{font-size:1.15rem;line-height:1.25}
.blog-card p{color:var(--muted);font-size:.93rem;flex:1}
.blog-card time{color:var(--muted-2);font-size:.8rem}
@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.blog-grid{grid-template-columns:1fr}}

/* ============================================================
   404 - sections/erro/404.php
   ============================================================ */
.err{min-height:calc(100svh - 220px);display:grid;place-items:center;text-align:center;
  padding-block:clamp(110px,16vw,170px) clamp(60px,8vw,100px)}
.err-code{font-weight:800;font-size:clamp(6.5rem,22vw,13rem);line-height:.92;letter-spacing:-.045em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin:18px 0 10px;user-select:none}
.err-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
@media (max-width:560px){.err-actions{flex-direction:column;align-items:stretch}}

/* ---- Artigo: breadcrumb, sumário, autor, relacionados ---- */
.artigo-crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:.85rem;color:var(--muted-2)}
.artigo-crumbs a{color:var(--muted);transition:color .15s}
.artigo-crumbs a:hover{color:var(--text)}
.artigo-meta img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.artigo-meta{align-items:center}
@media (max-width:560px){
  /* byline: no mobile some com os · (pra não sobrar separador pendurado ao quebrar linha) */
  .artigo-meta{gap:5px 12px}
  .artigo-meta .sep{display:none}
}
.artigo-toc{max-width:780px;margin:32px auto 0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px 26px}
.artigo-toc>p{font-weight:800;color:var(--text);font-size:.9rem;letter-spacing:.02em;margin-bottom:10px}
.artigo-toc ol{list-style:none;margin:0;display:grid;gap:7px}
.artigo-toc li{counter-increment:toc}
.artigo-toc a{color:var(--muted);font-size:.95rem;transition:color .15s}
.artigo-toc a::before{content:counter(toc,decimal-leading-zero) "\00a0-\00a0";color:var(--lime);font-weight:800;font-size:.8rem}
.artigo-toc a:hover{color:var(--text)}
.prose h2{scroll-margin-top:96px}
.prose>p:first-child{font-size:1.14rem;color:var(--text)}
.artigo-autor{max-width:780px;margin:48px auto 0;display:flex;gap:20px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px}
.artigo-autor img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.artigo-autor .quem{font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--lime);margin-bottom:6px}
.artigo-autor p{color:var(--muted);font-size:.95rem}
.artigo-autor strong{color:var(--text)}
.artigo-autor .btn{margin-top:14px}
@media (max-width:560px){.artigo-autor{flex-direction:column}}
.artigo-relacionados{max-width:1180px;margin:56px auto 0}
.artigo-relacionados .h3{color:var(--text)}

/* ---- Artigo: imagem de capa + imagens no corpo + thumb dos cards ---- */
.artigo-cover{max-width:980px;margin:36px auto 0;position:relative}
.artigo-cover img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:top;border-radius:var(--r-lg);border:1px solid var(--line)}
.artigo-cover figcaption,.prose figure.foto figcaption{position:absolute;right:12px;bottom:12px;margin:0;
  font-size:.7rem;letter-spacing:.01em;color:rgba(255,255,255,.92);background:rgba(10,7,17,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:5px 11px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14)}
.prose figure.foto{position:relative;margin:26px 0}
.prose figure.foto img{width:100%;aspect-ratio:16/9;object-fit:cover;margin:0}
.prose img{border-radius:var(--r);border:1px solid var(--line);margin:20px 0}
.prose figure{margin:24px 0}
.prose figure img{margin:0}
.prose figcaption{margin-top:8px;font-size:.8rem;color:var(--muted-2)}
.blog-card .thumb{width:calc(100% + 48px);max-width:none;margin:-26px -24px 8px;aspect-ratio:16/9;object-fit:contain;
  border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:1px solid var(--line);padding:14px 20px 6px}
/* Números do projeto num card de vidro ÚNICO dentro da imagem de destaque (rodapé da capa) */
.cover-stats{position:absolute;z-index:2;left:clamp(14px,3.5vw,52px);right:clamp(14px,3.5vw,52px);bottom:clamp(12px,1.6vw,18px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);
  background:linear-gradient(170deg,rgba(21,14,40,.55),rgba(10,7,17,.62));
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);border-radius:16px;
  padding:clamp(14px,1.8vw,20px) clamp(18px,2.4vw,28px);box-shadow:0 24px 60px -26px rgba(0,0,0,.7)}
.cover-stat + .cover-stat{position:relative;padding-left:clamp(14px,2vw,28px)}
.cover-stat + .cover-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line-2)}
.cover-stat b{display:block;font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:clamp(1.55rem,2.7vw,2.5rem);line-height:1;letter-spacing:-.03em;white-space:nowrap;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cover-stat span{display:block;margin-top:6px;font-size:clamp(.68rem,.9vw,.76rem);line-height:1.3;color:var(--text);opacity:.85}
/* 4ª coluna: botão "Ver site" (quando o case tem link) */
.cover-stats--cta{grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:stretch}
.cover-cta.btn{font-size:.9rem;padding:1.05em 1.5em;border-radius:16px}
.cover-cta::after{content:none}   /* botão "Ver site" não é CTA de WhatsApp: sem o ícone */
@media (max-width:560px){
  /* mobile: card sai de dentro da imagem, vira bloco abaixo, e os numeros empilham (sem encavalar) */
  .cover-stats{position:static;margin-top:16px;grid-template-columns:auto 1fr;gap:0;padding:2px 18px}
  .cover-stats--cta{grid-template-columns:auto 1fr}
  .cover-stat{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:baseline;column-gap:14px;padding:14px 0}
  .cover-stat + .cover-stat{padding-left:0;border-top:1px solid var(--line-2)}
  .cover-stat + .cover-stat::before{content:none}
  .cover-stat span{font-size:.9rem;margin-top:0}
  .cover-cta{grid-column:1/-1;justify-self:stretch;margin:16px 0 6px}
}

/* Ilustrações com fundo transparente (AVIF alpha): flutuam na página, sem moldura nem corte */
.artigo-cover--alpha img{aspect-ratio:auto;object-fit:contain;border:0;border-radius:0}
.prose figure.foto--alpha img{aspect-ratio:auto;object-fit:contain;border:0;border-radius:0}

/* ============================================================
   LINK NA BIO  (/links -> sections/links/page.php, modo bare)
   ============================================================ */
.linktree{min-height:100vh;display:flex;justify-content:center;padding:clamp(40px,7vh,72px) 20px 56px}
.lt-inner{width:100%;max-width:480px;display:flex;flex-direction:column;gap:11px}
.lt-head{text-align:center;margin-bottom:12px}
.lt-avatar{width:112px;height:112px;border-radius:50%;object-fit:cover;margin:0 auto 16px;
  border:2px solid var(--line-2);box-shadow:0 0 0 6px rgba(124,43,255,.12),0 20px 44px -20px rgba(0,0,0,.85)}
.lt-name{font-size:clamp(1.7rem,6vw,2.1rem);line-height:1.05}
.lt-tag{color:var(--muted);margin-top:8px;font-size:1rem;line-height:1.5}
.lt-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.lt-section{text-align:center;color:var(--muted-2);font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;margin:16px 0 3px}
.lt-btn{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line-2);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),border-color .18s,background .18s,box-shadow .18s}
.lt-btn:hover{transform:translateY(-2px);border-color:var(--lime);background:var(--surface-2);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.7)}
.lt-ico{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(124,43,255,.14);border:1px solid rgba(124,43,255,.28);color:var(--violet-2);transition:.2s}
.lt-ico svg{width:22px;height:22px}
.lt-btn:hover .lt-ico{background:var(--lime);border-color:var(--lime);color:#0a0a0a}
.lt-label{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lt-label strong{color:var(--text);font-weight:600;font-size:1rem;line-height:1.2}
.lt-label span{color:var(--muted-2);font-size:.84rem;line-height:1.3}
.lt-arrow{flex:none;width:18px;height:18px;color:var(--muted-2);transition:transform .2s,color .2s}
.lt-btn:hover .lt-arrow{color:var(--lime);transform:translateX(3px)}
/* WhatsApp em destaque (verde) */
.lt-btn--wa{background:linear-gradient(150deg,rgba(37,211,102,.16),rgba(37,211,102,.03));border-color:rgba(37,211,102,.42)}
.lt-btn--wa .lt-ico{background:#25D366;border-color:#25D366;color:#fff}
.lt-btn--wa:hover{border-color:#25D366}
.lt-btn--wa:hover .lt-ico{background:#25D366;color:#fff}
.lt-btn--wa:hover .lt-arrow{color:#25D366}
/* análise gratuita em destaque (lima) */
.lt-btn--hot{background:linear-gradient(150deg,rgba(194,242,60,.12),rgba(124,43,255,.05));border-color:rgba(194,242,60,.36)}
.lt-social{display:flex;justify-content:center;gap:12px;margin-top:22px}
.lt-social a{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:var(--muted);
  border:1px solid var(--line-2);background:rgba(255,255,255,.02);transition:.2s}
.lt-social a:hover{color:var(--lime);border-color:var(--lime);transform:translateY(-2px)}
.lt-social svg{width:20px;height:20px}
.lt-foot{text-align:center;color:var(--muted-2);font-size:.8rem;margin-top:18px}

/* reCAPTCHA v3: badge escondido (usamos o aviso no rodapé) p/ não colidir com o WhatsApp flutuante */
.grecaptcha-badge{visibility:hidden}
.form-recaptcha,.footer-legal,.footer-recaptcha{font-size:.76rem;color:var(--muted-2);margin-top:2px}
.form-recaptcha a,.footer-legal a,.footer-recaptcha a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.form-recaptcha a:hover,.footer-legal a:hover,.footer-recaptcha a:hover{color:var(--lime)}
.form-recaptcha{margin-top:10px;text-align:center}

/* Links: card de trabalho em destaque (imagem) + serviços em 2 colunas */
.lt-feature{display:flex;align-items:stretch;gap:0;padding:0;border-radius:16px;overflow:hidden;min-height:142px;
  border:1px solid var(--line-2);background:linear-gradient(120deg,var(--surface-2),var(--violet-deep));
  transition:transform .2s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .2s}
.lt-feature:hover{transform:translateY(-2px);border-color:var(--lime);box-shadow:0 16px 34px -20px rgba(0,0,0,.7)}
.lt-feature-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:left;padding:16px 8px 16px 18px}
.lt-feature-body strong{color:var(--text);font-size:1.05rem;font-weight:800;line-height:1.2}
.lt-feature-body span{color:var(--muted);font-size:.85rem;line-height:1.35}
/* imagem colada nas bordas do card: preenche a lateral inteira (topo/direita/baixo) */
.lt-feature-media{flex:none;width:50%;max-width:250px;position:relative;overflow:hidden}
.lt-feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.lt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lt-svc{display:flex;flex-direction:row;align-items:center;gap:12px;padding:14px 15px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line-2);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),border-color .18s,background .18s}
.lt-svc:hover{transform:translateY(-2px);border-color:var(--lime);background:var(--surface-2)}
.lt-svc .lt-ico{width:40px;height:40px}
.lt-svc strong{color:var(--text);font-size:.92rem;font-weight:600;line-height:1.25}
.lt-svc:hover .lt-ico{background:var(--lime);border-color:var(--lime);color:#0a0a0a}

/* ============================================================
   PÁGINA DE CONTATO compacta (sem hero)  (sections/contato/main.php)
   ============================================================ */
.contato-page{padding-top:clamp(116px,15vw,150px)}   /* limpa o header fixo (não tem hero) */
.contato-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px);align-items:stretch}
.contato-info{display:flex;flex-direction:column}
.contato-info .h1{font-size:clamp(2rem,4vw,3rem);line-height:1}
.contato-canais{margin-top:28px;flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}   /* flex:1 estica os cards p/ a base alinhar com o form */
.canal-row{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:11px;padding:16px 15px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line-2);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),border-color .18s,background .18s}
a.canal-row:hover{transform:translateY(-2px);border-color:var(--lime);background:var(--surface-2)}
.canal-ico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(124,43,255,.14);border:1px solid rgba(124,43,255,.28);color:var(--violet-2)}
.canal-ico svg{width:21px;height:21px}
.canal--wa .canal-ico{background:#25D366;border-color:#25D366;color:#fff}
.canal-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.canal-tt strong{color:var(--text);font-size:.95rem;font-weight:600}
.canal-tt span{color:var(--muted-2);font-size:.83rem}
@media (max-width:820px){.contato-grid{grid-template-columns:1fr;gap:30px}}
@media (max-width:560px){
  /* 2 canais em cima, o 3º (Atendimento) full-width embaixo */
  .contato-canais{grid-template-columns:1fr 1fr;gap:8px}
  .canal-row{padding:12px 11px;gap:9px}
  .canal-row:last-child{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px}
  .canal-ico{width:36px;height:36px}.canal-ico svg{width:18px;height:18px}
  .canal-tt strong{font-size:.85rem}
  .canal-tt span{font-size:.74rem}
}








/* ============================================================
   AJUSTES MOBILE (jul/2026)
   ============================================================ */
@media (max-width:640px){
  .eyebrow::before{display:none}   /* sem o tracinho nos subtítulos */
  /* formulário: menos moldura, campos mais largos */
  .cta-grid{padding:30px 22px;gap:26px}
  .js-form{padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.js-form::after{content:none}  /* uma camada só: campos direto no painel roxo */
  /* contato: o form ganha painel de volta no mobile, pra destacar da página */
  .contato-form.js-form{padding:22px 18px 20px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 22px 55px -22px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.05)}
  /* depoimentos: um por vez, foto em cima e o texto inteiro embaixo; arrastar dá snap 1 a 1 */
  .testi-marquee{scroll-snap-type:x mandatory}
  .testi-row{padding-block:12px}   /* folga p/ o card em destaque não cortar no topo/base */
  .tpair{flex-direction:column;margin-right:16px;scroll-snap-align:center}
  .tpair--active{transform:scale(1.03);z-index:2}   /* card no centro cresce, como um hover */
  .tcard{flex:0 0 auto;width:min(80vw,330px)}
  .tcard--photo{aspect-ratio:4/3.2;border-radius:20px 20px 0 0;border-right:1px solid var(--line);border-bottom:0}
  .tcard--quote{flex:1 1 auto;aspect-ratio:auto;border-radius:0 0 20px 20px;border-left:1px solid rgba(194,242,60,.2);border-top:0;padding:18px 16px}
  .tcard--quote blockquote{font-size:.98rem}
}
@media (max-width:540px){
  /* logos dos clientes: bloco único fundido, cantos arredondados só no grupo */
  .logos{gap:0;border:1px solid var(--glass-edge);border-radius:var(--r-lg);overflow:hidden;background:var(--glass-bg)}
  .logo-item{height:78px;padding:12px 20px;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .logo-item img{filter:none;opacity:1;max-height:46px}  /* mobile: logos coloridos e menores */
}
@media (max-width:640px){
  /* modal: cabe na tela mesmo com teclado aberto (rola por dentro) */
  .lead-modal{padding:10px}
  .lead-modal__card{padding:24px 18px 20px}
}
@media (max-width:640px){
  /* depoimento: estrelas e texto centralizados */
  .tcard--quote .tq-top{justify-content:center}
  .tcard--quote blockquote{justify-content:center;text-align:center;align-items:flex-start;margin-top:12px}  /* texto logo abaixo das estrelas */
}