/* ============================================================================
   LUMIGRAF — styles.css (v8 · identidade da APRESENTAÇÃO COMERCIAL)
   Paleta e linguagem gráfica extraídas dos 13 slides oficiais:
   verde-floresta + creme, círculos como assinatura, alternância escuro/claro.
   Sem libs. Só transform/opacity. reduced-motion respeitado.
   ============================================================================ */

/* ============================ TOKENS ============================ */
:root{
  /* Paleta oficial (amostrada dos slides) */
  --verde:#1D2B25;          /* verde-floresta, fundo escuro dominante */
  --verde-2:#16211C;        /* mais escuro, rodapé/hero */
  --verde-3:#0C3F1B;        /* verde profundo, blocos */
  --sage:#526F5C;           /* verde acinzentado, secundário */
  --vivo:#4B8F36;           /* VERDE VIVO — acento e CTA */
  --vivo-2:#3E7A2C;         /* hover do CTA */
  --navy:#0F4E8B;           /* azul-marinho, títulos sobre claro */
  --creme:#E9E3DE;          /* fundo claro principal */
  --bege:#E1D5CB;           /* fundo claro alternativo */
  --ciano:#29A2D9;          /* círculos decorativos */
  --logo-navy:#283282;
  --logo-verde:#00823C;

  /* Texto */
  --sobre-escuro:#F2F1ED;
  --sobre-escuro-2:#AFBCB0;
  --sobre-escuro-3:#7C8B80;
  --sobre-claro:#1B2620;
  --sobre-claro-2:#4C5A50;
  --sobre-claro-3:#7A857D;

  --linha-escura:rgba(255,255,255,.12);
  --linha-clara:rgba(29,43,37,.14);

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:140px;
  --r:16px; --r-lg:24px;
  --maxw:1320px; --gutter:24px;

  --out:cubic-bezier(.23,1,.32,1);
  --inout:cubic-bezier(.77,0,.175,1);

  --display:"Poppins","Segoe UI",system-ui,sans-serif;
  --corpo:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--verde)}
body{margin:0; background:var(--verde); color:var(--sobre-escuro); font-family:var(--corpo);
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3{margin:0; line-height:1.02}
p{margin:0}
a{color:inherit}
img{max-width:100%; display:block}
ul,ol{margin:0}
section[id]{scroll-margin-top:78px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); position:relative; z-index:2}
/* seções de eixo central (FAQ e Contato): o cabeçalho alinhava à esquerda
   enquanto o bloco abaixo já era centralizado, e no desktop isso ficava torto. */
.centro{text-align:center}
.centro .dots{justify-content:center}
.centro .lead{margin-left:auto; margin-right:auto}
/* o cabeçalho centraliza, mas formulário, FAQ e lista de contato continuam
   alinhados à esquerda: campo de formulário centralizado é ilegível */
.centro .faq{margin-left:auto; margin-right:auto; text-align:left}
.centro .info,.centro .form{text-align:left}
.centro .form .nota{text-align:center}
.section{padding:var(--s6) 0; position:relative; overflow:hidden}
@media(min-width:900px){ .section{padding:var(--s7) 0} }

/* ---- ALTERNÂNCIA ESCURO / CLARO (como os slides) ---- */
.section--escura{background:var(--verde); color:var(--sobre-escuro)}
.section--clara{background:var(--creme); color:var(--sobre-claro)}
.section--bege{background:var(--bege); color:var(--sobre-claro)}

/* ============================ CÍRCULOS: a assinatura da marca ============================ */
/* marcador de 4 círculos sobrepostos acima dos títulos.
   Menor e mais leve que a versão da apresentação: aqui é assinatura, não decoração. */
.dots{display:flex; align-items:center; margin-bottom:var(--s2)}
.dots i{display:block; width:18px; height:18px; border-radius:50%; margin-right:-6px;
  transition:transform .6s var(--out)}
.dots i:nth-child(1){background:var(--vivo)}
.dots i:nth-child(2){background:var(--sage)}
.dots i:nth-child(3){background:var(--ciano); opacity:.9}
.dots i:nth-child(4){background:var(--navy); opacity:.9}
/* ao entrar na tela os círculos se abrem levemente */
.dots i:nth-child(2){transition-delay:.05s}
.dots i:nth-child(3){transition-delay:.1s}
.dots i:nth-child(4){transition-delay:.15s}
.reveal .dots i, .reveal.in .dots i{transform:none}
.reveal:not(.in) .dots i{transform:translateX(-14px) scale(.5)}

/* círculo grande translúcido sangrando pela borda da seção */
.orb{position:absolute; border-radius:50%; pointer-events:none; z-index:0}
.orb--vivo{background:var(--vivo); opacity:.14}
.orb--ciano{background:var(--ciano); opacity:.13}
.orb--navy{background:var(--navy); opacity:.16}
.orb--sage{background:var(--sage); opacity:.18}
.orb--tl{top:-14vw; left:-10vw; width:34vw; height:34vw}
.orb--tr{top:-12vw; right:-12vw; width:30vw; height:30vw}
.orb--br{bottom:-16vw; right:-10vw; width:36vw; height:36vw}
.orb--bl{bottom:-14vw; left:-12vw; width:30vw; height:30vw}

/* foto em máscara circular */
.circulo{border-radius:50%; overflow:hidden; aspect-ratio:1; position:relative}
.circulo img{width:100%; height:100%; object-fit:cover}

/* faixa verde vivo separando seções */
.faixa{height:14px; background:var(--vivo); position:relative; z-index:3}

/* ============================ TIPOGRAFIA ============================ */
.h2{font-family:var(--display); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(2.1rem,5.4vw,4rem); line-height:1.02; text-wrap:balance}
.section--escura .h2{color:#fff}
.section--clara .h2,.section--bege .h2{color:var(--navy)}
.h2 .leve{font-weight:400}
.rotulo{font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; display:block; margin-bottom:var(--s2)}
.section--escura .rotulo{color:var(--vivo)}
.section--clara .rotulo,.section--bege .rotulo{color:var(--navy)}
.lead{font-size:1.06rem; max-width:56ch; text-wrap:pretty; margin-top:var(--s3)}
.section--escura .lead{color:var(--sobre-escuro-2)}
.section--clara .lead,.section--bege .lead{color:var(--sobre-claro-2)}
/* subtítulo com ponto-médio: "EM ACM • LONA • PVC" */
.pontos{font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.95rem; margin-top:var(--s2)}
.section--escura .pontos{color:#fff}
.section--clara .pontos{color:var(--sobre-claro)}

:focus-visible{outline:3px solid var(--vivo); outline-offset:3px; border-radius:4px}
.pular{position:absolute; left:-9999px; top:0; background:var(--creme); color:var(--sobre-claro); padding:12px 16px; z-index:300}
.pular:focus{left:12px; top:12px}

/* ============================ BOTÕES ============================ */
.btn{display:inline-flex; align-items:center; gap:12px; justify-content:center; font-family:var(--corpo);
  font-weight:700; font-size:1rem; line-height:1; padding:16px 18px 16px 28px; border-radius:999px;
  border:2px solid transparent; text-decoration:none; cursor:pointer; min-height:56px;
  transition:transform .16s var(--out), background .3s var(--out), border-color .3s var(--out), box-shadow .4s var(--out)}
.btn .bola{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  background:rgba(255,255,255,.22); transition:transform .5s var(--out)}
.btn .bola svg{width:17px;height:17px}
.btn:active{transform:scale(.97)}
.btn--cta{background:var(--vivo); color:#fff; box-shadow:0 12px 30px rgba(75,143,54,.34)}
.btn--claro{background:transparent; color:var(--sobre-claro); border-color:var(--linha-clara); padding:16px 26px}
.btn--escuro{background:transparent; color:#fff; border-color:rgba(255,255,255,.34); padding:16px 26px}
.btn--lg{min-height:62px; font-size:1.05rem; padding:18px 20px 18px 32px}
.btn--full{width:100%}
@media (hover:hover) and (pointer:fine){
  .btn--cta:hover{background:var(--vivo-2); transform:translateY(-3px); box-shadow:0 18px 40px rgba(75,143,54,.44)}
  .btn:hover .bola{transform:translateX(4px)}
  .btn--claro:hover{border-color:var(--navy); color:var(--navy)}
  .btn--escuro:hover{border-color:#fff; background:rgba(255,255,255,.1)}
}

/* ============================ MOTION ============================ */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--out), transform .9s var(--out)}
.reveal.in{opacity:1; transform:none}
.stagger>*{opacity:0; transform:translateY(28px); transition:opacity .85s var(--out), transform .85s var(--out)}
.stagger.in>*{opacity:1; transform:none}
.stagger.in>*:nth-child(2){transition-delay:.08s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.24s}
.stagger.in>*:nth-child(5){transition-delay:.32s}
.mask{display:block; overflow:hidden; padding-bottom:.1em}
.mask > span{display:block; transform:translateY(105%); transition:transform 1.05s var(--out)}
.mask.in > span{transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.stagger>*{opacity:1!important; transform:none!important; transition:none!important}
  .mask>span{transform:none!important}
  /* enfeite sai: zoom da foto e parallax */
  .hero-foto img,.banner-slide.ativo img{animation:none!important}
  /* ⚠️ os carrosséis NÃO param aqui.
     Antes esta regra desligava .mq-row e .faixa-obras, e num Windows com
     "efeitos de animação" desativado a faixa de clientes e o portfólio ficavam
     congelados — foi exatamente o que o Ryan viu nos prints 2 e 5.
     Eles são conteúdo pedido pelo cliente, não decoração; então continuam
     passando, só que bem mais devagar. */
  .mq-row{animation-duration:80s}
  .faixa-obras--ida{animation-duration:110s}
  .faixa-obras--volta{animation-duration:125s}
}

/* ============================ BARRA DE PROGRESSO ============================
   Preferência: animação guiada por scroll no próprio CSS (roda na thread de
   composição, não depende de evento e não trava a rolagem).
   O JS em app.js é só fallback para navegador sem suporte. */
.progresso{position:fixed; top:0; left:0; height:2px; z-index:200; width:100%;
  background:linear-gradient(90deg, var(--vivo), var(--ciano));
  transform:scaleX(var(--p,0)); transform-origin:0 50%; will-change:transform}
@supports (animation-timeline: scroll()){
  .progresso{transform:scaleX(0); animation:cresce-progresso linear both;
    animation-timeline:scroll(root block)}
  @keyframes cresce-progresso{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion:reduce){ .progresso{display:none} }

/* ============================ HEADER ============================ */
.topo{position:fixed; top:0; left:0; right:0; z-index:150;
  transition:background .5s var(--out), box-shadow .5s var(--out)}
.topo.solido{background:rgba(22,33,28,.96); backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 8px 28px rgba(0,0,0,.28)}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:18px}
.marca img{height:34px; width:auto; filter:brightness(0) invert(1)}
.nav-links{display:none; gap:30px; align-items:center}
.nav-links a{text-decoration:none; color:rgba(255,255,255,.86); font-weight:600; font-size:.92rem; position:relative; padding:4px 0}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--vivo);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .45s var(--out)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:none}
.menu-btn{display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:50%; cursor:pointer; color:#fff}
.menu-btn svg{width:22px;height:22px}
.menu-btn .l{transition:transform .5s var(--inout), opacity .3s var(--out); transform-origin:center}
.menu-btn[aria-expanded="true"] .l1{transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .l2{opacity:0}
.menu-btn[aria-expanded="true"] .l3{transform:translateY(-5px) rotate(-45deg)}
.menu-mob{display:none; background:var(--verde-2); border-top:1px solid var(--linha-escura); padding:var(--s1) 0 var(--s3)}
.menu-mob.aberto{display:block}
.menu-mob a{display:block; padding:14px 24px; text-decoration:none; color:#fff; font-weight:700; font-size:1.15rem;
  opacity:0; transform:translateY(12px); transition:opacity .5s var(--out), transform .5s var(--out)}
.menu-mob.aberto a{opacity:1; transform:none}
.menu-mob.aberto a:nth-child(2){transition-delay:.06s}
.menu-mob.aberto a:nth-child(3){transition-delay:.12s}
.menu-mob.aberto a:nth-child(4){transition-delay:.18s}
.menu-mob.aberto a:nth-child(5){transition-delay:.24s}
.menu-mob .btn{margin:var(--s2) 24px 0}
@media(min-width:1000px){ .nav-links{display:flex} .nav-cta{display:inline-flex} .menu-btn{display:none} }

/* ============================ HERO ============================ */
/* ============================================================================
   HERO = BANNER DE IMAGENS PASSANDO
   Pedido literal dos donos: "um banner que vai passando, e logo quando a pessoa
   abre o site, pra ter imagens". Estrutura inspirada no artepro.com.br:
   foto grande ocupando tudo + título gigante + dois botões.
   ============================================================================ */
.banner{position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--verde-2)}
/* troca a cada 3s (app.js): a transição encurtou junto, senão a foto passa
   metade do tempo em fade e nunca é vista limpa */
.banner-slide{position:absolute; inset:0; opacity:0; transition:opacity .9s var(--out)}
.banner-slide.ativo{opacity:1}
.banner-slide picture{display:block; width:100%; height:100%}
.banner-slide img{width:100%; height:100%; object-fit:cover; object-position:center 50%}
/* leve zoom enquanto o slide está visível, dá vida sem distrair */
.banner-slide.ativo img{animation:respira 4s ease-out forwards}
@keyframes respira{from{transform:scale(1.03)}to{transform:scale(1.09)}}
/* indicadores */
.banner-dots{position:absolute; z-index:3; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:8px}
.banner-dots button{width:30px; height:3px; padding:0; border:none; border-radius:2px;
  background:rgba(255,255,255,.34); cursor:pointer; transition:background .4s var(--out)}
/* barra de progresso: a ativa enche em 3s, o mesmo tempo da troca (app.js).
   Trocar o aria-current reinicia a animação sozinho. */
.banner-dots button{position:relative; overflow:hidden}
.banner-dots button::after{content:""; position:absolute; inset:0; background:var(--vivo);
  transform:scaleX(0); transform-origin:0 50%}
.banner-dots button[aria-current="true"]::after{animation:enche-barra 3s linear forwards}
@keyframes enche-barra{to{transform:scaleX(1)}}

@media(min-width:760px){
  /* barras de progresso no canto da foto (aprovado pelo Ryan em 17/09) */
  .banner-dots{left:auto; right:120px; transform:none; bottom:30px}
}
@media(max-width:700px){ .banner-dots{bottom:12px} .banner-dots button{width:20px} }
/* ---- DESKTOP: foto à direita, texto sobre o verde ----
   Antes a foto ocupava a tela toda e o véu escurecia a metade esquerda — onde
   quase sempre fica o letreiro. O Moto Chefe sumia atrás do título e o logo da
   Blausen ficava embaixo do "Nós fazemos". Agora o banner começa em 30% da
   largura e entra no verde por um degradê (mask), então a marca aparece inteira
   e o texto fica sobre fundo liso. */
@media(min-width:760px){
  .banner{left:30%;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 26%);
            mask-image:linear-gradient(90deg, transparent 0, #000 26%)}
  /* sem object-position por marca: os recortes -d já vêm enquadrados */
}
.veu{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(18,28,22,.55) 0%, rgba(18,28,22,.35) 38%, rgba(18,28,22,.05) 70%, transparent 100%),
    linear-gradient(180deg, rgba(18,28,22,.5) 0%, transparent 20%, transparent 72%, var(--verde) 100%)}


.hero{position:relative; min-height:100svh; display:grid; align-items:end; overflow:hidden; background:var(--verde-2)}
.hero-foto{position:absolute; inset:0; z-index:0}
.hero-foto picture{display:block; width:100%; height:100%}
.hero-foto img{width:100%; height:100%; object-fit:cover; object-position:center 38%; opacity:.42;
  animation:zoom 24s var(--inout) infinite alternate;
  /* parallax leve ligado ao scroll (JS escreve --hy) */
  translate:0 var(--hy,0px)}
@keyframes zoom{from{transform:scale(1.03)}to{transform:scale(1.12)}}
.hero-foto::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,33,28,.72) 0%, rgba(22,33,28,.4) 30%, rgba(22,33,28,.82) 70%, var(--verde) 100%)}
/* padding-top reserva o header fixo (74px): sem isso o H1 gigante subia por baixo
   do logo e do menu. Era o bug nº1 apontado no vídeo. */
.hero-conteudo{position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:calc(74px + var(--s4)) var(--gutter) clamp(40px,8vw,104px);
  display:grid; gap:var(--s3); justify-items:start; align-content:end}
/* sombra em vez de véu escuro: o texto fica legível e a foto continua aparecendo */
.hero h1{font-family:var(--display); font-weight:800; letter-spacing:-.03em; color:#fff;
  font-size:clamp(2.4rem,7.4vw,5.8rem); line-height:.98; max-width:15ch;
  text-shadow:0 2px 18px rgba(12,20,15,.9), 0 1px 3px rgba(12,20,15,.8)}
.hero h1 .verde{color:var(--vivo)}
.hero-sub{color:#EAF0EA; font-size:clamp(.98rem,2.1vw,1.18rem); max-width:54ch;
  text-shadow:0 1px 12px rgba(12,20,15,.95)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}
.hero-tag{font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#8FE06B;
  line-height:1.4; text-shadow:0 1px 10px rgba(12,20,15,.95)}

.hero-textos{display:grid; gap:10px}
.hero-sub{text-wrap:pretty}

/* --- MOBILE (até 759px): FOTO EM TELA CHEIA (17/09) ---
   Histórico: foto cheia com texto por cima cortava o letreiro; foto em cima e
   texto embaixo, e depois em card, o Ryan achou sem graça. Solução atual: foto
   ocupando a tela toda, mas com recortes -m feitos para o celular (9:18, letreiro
   na metade de cima). O véu só escurece a partir de ~45% da altura, onde o texto
   começa. Barrinhas de progresso no topo, estilo stories. */
@media(max-width:759px){
  .hero{display:grid; min-height:100svh; align-items:end}
  .banner{inset:0}
  .veu{background:linear-gradient(180deg, rgba(18,28,22,.5) 0%, rgba(18,28,22,0) 14%,
    rgba(18,28,22,0) 44%, rgba(18,28,22,.86) 64%, var(--verde) 100%)}
  .banner-dots{top:82px; bottom:auto; left:20px; right:20px; transform:none; gap:5px}
  .banner-dots button{flex:1 1 0; width:auto}
  .hero-conteudo{padding:0 20px 30px; gap:14px; justify-items:center; text-align:center}
  .hero h1{font-size:clamp(2rem,9.4vw,2.6rem); max-width:none; line-height:1}
  .hero-textos{gap:8px}
  .hero-sub{font-size:.9rem; line-height:1.45; max-width:none}
  .hero-cta{width:100%; gap:8px; justify-content:center; flex-wrap:nowrap; margin-top:4px}
  .hero-cta .btn{flex:1 1 auto; justify-content:center; white-space:nowrap;
    min-height:48px; font-size:.9rem; padding:10px 8px 10px 16px; gap:6px}
  .hero-cta .btn--escuro{padding:10px 14px}
  .hero-cta .btn .bola{width:26px; height:26px}
  .hero-cta .btn .bola svg{width:14px; height:14px}
}
/* celular estreito (360px): sem a bolinha o "Pedir orçamento" cabe ao lado do outro */
@media(max-width:380px){ .hero-cta .btn .bola{display:none} .hero-cta .btn,.hero-cta .btn--escuro{padding:10px 12px} }
/* espaço vertical mais apertado no mobile: a página estava com 13 telas de rolagem */
@media(max-width:700px){
  .section{padding:var(--s4) 0}
  .card-txt{padding:20px}
  .h2{font-size:clamp(1.9rem,8vw,2.6rem)}
  .lead{font-size:1rem; margin-top:var(--s2)}
  .dots{margin-bottom:var(--s2)}
  .dots i{width:20px;height:20px;margin-right:-7px}
  .sobre{gap:var(--s4)}
  /* como funciona: 3 cards altos viravam uma coluna infinita */
  .numeros{gap:12px}
  .num{padding:var(--s3) 20px}
  .lumidia{gap:var(--s3)}
  /* contato ocupava 2,3 telas sozinho */
  .contato{gap:var(--s3); margin-top:var(--s3)}
  .info li{padding:10px 0; gap:12px}
  .info .ic{width:40px;height:40px}
  .info .ic svg{width:17px;height:17px}
  .mapa{margin-top:var(--s2)}
  .mapa iframe{height:170px}
  .form{padding:var(--s3) 20px}
  .campo{margin-top:12px}
  .campo input,.campo select,.campo textarea{padding:13px 14px; min-height:48px}
}

/* ============================ FAIXA DE CLIENTES ============================ */
.clientes{background:var(--verde-2); padding:var(--s4) 0; overflow:hidden; position:relative; z-index:2}
.clientes-titulo{text-align:center; color:var(--sobre-escuro-3); font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:var(--s3); padding:0 var(--gutter)}
@media(min-width:760px){ .clientes-titulo{font-size:.76rem; letter-spacing:.18em} }
.mq{overflow:hidden}
/* no celular a fonte e o gap grandes deixavam só 2 nomes na tela, parecendo cortado */
/* sem pausa no hover: com o mouse parado em cima a faixa parecia quebrada */
.mq-row{display:flex; width:max-content; align-items:center; gap:var(--s3); animation:desliza 38s linear infinite}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-row span{font-family:var(--display); font-weight:700; font-size:.95rem;
  color:rgba(255,255,255,.5); white-space:nowrap; letter-spacing:.02em; transition:color .4s var(--out);
  display:inline-flex; align-items:center}
/* separador entre nomes, no lugar do gap gigante */
.mq-row span::after{content:"·"; margin-left:var(--s3); color:var(--vivo); font-size:1.2em}
.mq-row span:hover{color:#fff}
@media(min-width:760px){
  .mq-row{gap:var(--s4)}
  .mq-row span{font-size:1.25rem}
  .mq-row span::after{margin-left:var(--s4)}
}

/* ============================ QUEM SOMOS ============================ */
.sobre{display:grid; gap:var(--s5); grid-template-columns:1fr; align-items:center}
@media(min-width:900px){ .sobre{grid-template-columns:.9fr 1.1fr} }
/* foto única dos fundadores, quadrada com canto arredondado */
.foto-quad{margin:0; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; background:var(--sage);
  box-shadow:0 24px 60px rgba(29,43,37,.22)}
.foto-quad img{width:100%; height:100%; object-fit:cover; object-position:center 22%}
/* ⚠️ TETO TEMPORÁRIO DE LARGURA.
   fundadores.jpg tem só 356x469 (era o tamanho embutido no PDF da
   apresentação). Sem o teto, a coluna dava 544px e a foto era esticada
   1,53x — o borrão que o Ryan viu em 09/09. Com 420px a ampliação cai
   para 1,18x, que passa despercebido.
   >>> QUANDO CHEGAR A FOTO ORIGINAL (1200px de largura ou mais),
       APAGAR o max-width e o margin desta regra. */
@media(min-width:900px){ .foto-quad{aspect-ratio:1; max-width:420px; margin-inline:auto} }
.legenda-fund{text-align:center; margin-top:var(--s3); font-size:.86rem; font-weight:700; color:var(--sobre-claro)}
.legenda-fund span{display:block; font-weight:500; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sage); margin-top:4px}

/* ============================ SERVIÇOS ============================ */
/* MOBILE: trilho deslizável (4 cards empilhados custavam 1000px de rolagem).
   DESKTOP: grade de 4. */
.serv{display:flex; gap:var(--s2); margin-top:var(--s4); overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:var(--s2);
  margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1);
  padding-left:var(--gutter); padding-right:var(--gutter); scroll-padding-left:var(--gutter)}
.serv::-webkit-scrollbar{display:none}

/* ---- Dica de arraste ----
   Um trilho horizontal não se anuncia sozinho: sem barra de rolagem, quem olha
   acha que aqueles são todos os cards. Esta linha só aparece quando o trilho
   de fato transborda (classe escrita pelo app.js) e some no primeiro arrasto. */
.dica-trilho{display:none; align-items:center; gap:8px; margin-top:14px;
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sobre-escuro-3); transition:opacity .6s var(--out), transform .6s var(--out)}
.section--clara .dica-trilho,.section--bege .dica-trilho{color:var(--sage)}
.dica-trilho.mostra{display:inline-flex}
.dica-trilho{cursor:pointer; -webkit-user-select:none; user-select:none}
/* arraste com mouse (app.js) */
.serv.rola,.led-cards.rola{cursor:grab}
.serv.arrastando,.led-cards.arrastando{cursor:grabbing; scroll-snap-type:none; -webkit-user-select:none; user-select:none}
.arrastando .card,.arrastando .led-card{pointer-events:none}
.dica-trilho.some{opacity:0; transform:translateX(10px); pointer-events:none}
.dica-trilho svg{width:17px; height:17px; color:var(--vivo);
  animation:cutuca 2.6s var(--inout) infinite}
@keyframes cutuca{0%,62%,100%{transform:translateX(0)}80%{transform:translateX(5px)}}
/* a seta é dica de uso, não enfeite: sob reduced-motion ela desacelera em vez
   de parar, senão a única pista de que dá para arrastar fica estática */
@media (prefers-reduced-motion:reduce){ .dica-trilho svg{animation-duration:6s} }
.serv > .card{flex:0 0 82%; scroll-snap-align:start}
@media(min-width:700px){ .serv > .card{flex-basis:46%} }
@media(min-width:1060px){
  .serv{display:grid; grid-template-columns:repeat(4,1fr); overflow:visible; margin-top:var(--s5);
    margin-left:0; margin-right:0; padding-left:0; padding-right:0}
  .serv > .card{flex:none}
}
/* A IMAGEM é o card. Só o nome do serviço fica visível; o detalhe abre no
   hover (desktop) ou no card centralizado do trilho (celular, .ativo). */
.card{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; display:block;
  text-decoration:none; color:#fff; background:var(--verde-3);
  transition:transform .6s var(--out), box-shadow .6s var(--out)}
.card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.94;
  transition:transform 1.1s var(--out), opacity .5s var(--out)}
/* escurece só o pé, onde entra o texto: a foto continua aparecendo inteira */
.card::after{content:""; position:absolute; inset:0; transition:opacity .5s var(--out);
  background:linear-gradient(180deg, rgba(22,33,28,0) 38%, rgba(22,33,28,.5) 64%, rgba(10,17,12,.95) 100%)}
.card-txt{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--s3)}
.card h3{font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.06;
  font-size:clamp(1.3rem,4.4vw,1.6rem); text-shadow:0 2px 14px rgba(10,17,12,.7)}

/* gaveta: grid 0fr→1fr anima a altura sem precisar saber quanto ela mede */
.card-det{display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .6s var(--out), opacity .35s var(--out)}
.card-det > span{overflow:hidden; display:block; min-height:0}
.card-p{display:block; color:rgba(255,255,255,.86); font-size:.9rem; line-height:1.5; padding-top:10px}
.card .mais{display:inline-flex; align-items:center; gap:7px; margin-top:var(--s2); color:#9BE47B;
  font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase}
.card .mais svg{width:15px;height:15px; transition:transform .5s var(--out)}
.card.ativo .card-det,
.card:focus-visible .card-det{grid-template-rows:1fr; opacity:1}

/* borda que acende, em vez de sombra genérica */
.card::before{content:""; position:absolute; inset:0; z-index:3; border-radius:var(--r-lg);
  border:1.5px solid transparent; transition:border-color .5s var(--out); pointer-events:none}
.card.ativo::before{border-color:rgba(75,143,54,.7)}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-7px); box-shadow:0 26px 54px rgba(8,14,10,.45)}
  .card:hover::before{border-color:var(--vivo)}
  .card:hover::after{opacity:1}
  .card:hover img{transform:scale(1.07)}
  .card:hover .card-det{grid-template-rows:1fr; opacity:1}
  .card:hover .mais svg{transform:translateX(5px)}
}
.card:active{transform:translateY(-3px) scale(.995)}

/* ============================ AUTORIDADE / FRANQUIAS ============================ */
.franquias{display:grid; gap:var(--s4); grid-template-columns:1fr; align-items:center}
@media(min-width:900px){ .franquias{grid-template-columns:1fr 1fr} }
.numeros{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
.num{position:relative; background:rgba(255,255,255,.06); border:1px solid var(--linha-escura); border-radius:var(--r-lg);
  padding:var(--s4) var(--s3); text-align:center; overflow:hidden;
  transition:transform .5s var(--out), background .4s var(--out), border-color .4s var(--out)}
/* traço verde que cresce quando o número entra na tela */
.num::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--vivo);
  transform:scaleX(0); transform-origin:0 50%; transition:transform 1s var(--out)}
.stagger.in .num::after{transform:scaleX(1)}
.stagger.in .num:nth-child(2)::after{transition-delay:.1s}
.stagger.in .num:nth-child(3)::after{transition-delay:.2s}
.stagger.in .num:nth-child(4)::after{transition-delay:.3s}
.section--clara .num,.section--bege .num{background:#fff; border-color:var(--linha-clara)}
@media (hover:hover){ .num:hover{transform:translateY(-5px)} }
/* ⚠️ BUG CORRIGIDO (print 4): o rótulo era `.num span`, que também pegava o
   <span data-count> DENTRO do <b>. Resultado: "5", "28" e "10" saíam com .84rem
   enquanto o "100" (texto puro) saía com 7rem, e o "+" sozinho virava um gigante.
   Agora o rótulo é <em>, o sufixo é .suf, e os quatro números têm o mesmo corpo. */
.num b{display:flex; align-items:baseline; justify-content:center; gap:2px;
  font-family:var(--display); font-weight:800; font-size:clamp(3rem,7.4vw,4.6rem);
  line-height:.92; color:var(--vivo); font-variant-numeric:tabular-nums; letter-spacing:-.035em}
.num b > span{font:inherit; color:inherit; letter-spacing:inherit}
.num .suf{font-style:normal; font-size:.52em; font-weight:700; letter-spacing:-.01em; line-height:1}
.section--clara .num b,.section--bege .num b{color:var(--navy)}
.num em{display:block; font-style:normal; font-size:.84rem; margin-top:12px; line-height:1.4; text-wrap:balance}
.section--escura .num em{color:var(--sobre-escuro-2)}
.section--clara .num em,.section--bege .num em{color:var(--sobre-claro-2)}

/* ============================ PORTFÓLIO 3x3 ============================ */
/* PORTFÓLIO = duas faixas passando em direções opostas.
   Inspirado na "faixa passante" do artepro, mas em duas linhas e sem parar.
   Mostra muito trabalho ocupando pouca altura, que era o problema da grade 3x3. */
.faixas{margin-top:var(--s4); display:grid; gap:14px;
  margin-left:calc(var(--gutter)*-1); margin-right:calc(var(--gutter)*-1); overflow:hidden}
.faixa-obras{display:flex; gap:14px; width:max-content}
.faixa-obras--ida{animation:corre-esq 52s linear infinite}
.faixa-obras--volta{animation:corre-dir 60s linear infinite}
@keyframes corre-esq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes corre-dir{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.obra{position:relative; flex:0 0 auto; width:clamp(230px,44vw,340px); aspect-ratio:4/3;
  border-radius:var(--r); overflow:hidden; background:var(--verde-3); margin:0}
.obra img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--out)}
.obra figcaption{position:absolute; left:0; right:0; bottom:0; padding:var(--s4) 14px 13px;
  background:linear-gradient(transparent, rgba(12,20,15,.92)); color:#fff}
.obra figcaption b{display:block; font-family:var(--display); font-weight:700; font-size:.95rem}
.obra figcaption span{display:block; font-size:.76rem; color:rgba(255,255,255,.72); margin-top:2px}
@media (hover:hover) and (pointer:fine){ .obra:hover img{transform:scale(1.08)} }
@media(min-width:900px){ .obra{width:360px} }
.obra{position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; background:var(--verde-3)}
.obra img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--out)}
.obra figcaption{position:absolute; left:0; right:0; bottom:0; padding:var(--s5) var(--s3) var(--s3);
  background:linear-gradient(transparent, rgba(22,33,28,.94)); color:#fff}
.obra figcaption b{display:block; font-family:var(--display); font-weight:700; font-size:1.02rem}
.obra figcaption span{display:block; font-size:.8rem; color:rgba(255,255,255,.72); margin-top:3px}
@media (hover:hover) and (pointer:fine){ .obra:hover img{transform:scale(1.07)} }

/* ============================ LUMÍDIA ============================ */
/* a coluna das imagens ganhou peso: o cliente pediu foto maior */
.lumidia{display:grid; gap:var(--s4); grid-template-columns:1fr; align-items:center}
@media(min-width:900px){ .lumidia{grid-template-columns:.72fr 1.28fr; gap:var(--s5)} }
.lumidia-marca{font-family:var(--display); font-weight:800; font-size:clamp(2rem,5vw,3.2rem); letter-spacing:-.02em; line-height:1}
.lumidia-marca .lu{color:var(--navy)}
.lumidia-marca .mi{color:var(--vivo)}
.lumidia-marca small{display:block; font-size:.34em; font-weight:600; letter-spacing:.2em; color:var(--sage); margin-top:6px}
.lumidia-lista{list-style:none; padding:0; margin-top:var(--s3); display:grid; gap:12px}
.lumidia-lista li{display:flex; gap:12px; align-items:flex-start; font-size:.98rem; color:var(--sobre-claro-2)}
.lumidia-lista i{flex:none; width:20px; height:20px; border-radius:50%; background:var(--vivo); margin-top:3px}

/* 3 cards no lugar dos 2 círculos escuros reprovados no vídeo.
   Sempre lado a lado: empilhados no celular custavam 1,5 tela de rolagem. */
/* Mesmo tratamento dos serviços: imagem grande, só o nome por cima.
   O subtítulo abre no hover / no card ativo do trilho. */
/* CELULAR: trilho deslizável. Em grade de 3 a foto ficava com 93px de largura,
   o oposto do "imagens maiores" que o cliente pediu. DESKTOP: grade de 3. */
.led-cards{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:6px;
  margin-left:calc(var(--gutter)*-1); margin-right:calc(var(--gutter)*-1);
  padding-left:var(--gutter); padding-right:var(--gutter); scroll-padding-left:var(--gutter)}
.led-cards::-webkit-scrollbar{display:none}
.led-cards > .led-card{flex:0 0 74%; scroll-snap-align:start}
@media(min-width:620px){
  .led-cards{display:grid; gap:16px; grid-template-columns:repeat(3,1fr); overflow:visible;
    align-items:start; margin-left:0; margin-right:0; padding-left:0; padding-right:0}
  .led-cards > .led-card{flex:none}
  /* card do meio descido: quebra a régua de três fotos idênticas lado a lado */
  .led-cards > .led-card:nth-child(2){margin-top:36px}
}
.led-card{position:relative; margin:0; border-radius:var(--r); overflow:hidden; aspect-ratio:3/4;
  background:var(--verde-3); transition:transform .6s var(--out), box-shadow .6s var(--out)}
.led-card img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--out)}
.led-card figcaption{position:absolute; left:0; right:0; bottom:0; padding:var(--s5) 14px 14px; color:#fff;
  background:linear-gradient(transparent, rgba(10,17,12,.94))}
.led-card figcaption b{display:block; font-family:var(--display); font-weight:700; font-size:1.02rem;
  text-shadow:0 2px 12px rgba(10,17,12,.6)}
.led-card .card-det > span{font-size:.78rem; color:rgba(255,255,255,.8); line-height:1.35; padding-top:5px}
.led-card.ativo .card-det{grid-template-rows:1fr; opacity:1}
@media (hover:hover) and (pointer:fine){
  .led-card:hover{transform:translateY(-6px); box-shadow:0 24px 50px rgba(29,43,37,.28)}
  .led-card:hover img{transform:scale(1.07)}
  .led-card:hover .card-det{grid-template-rows:1fr; opacity:1}
}

/* ============================ REPUTAÇÃO: avaliações + depoimentos ============================ */
.rep-grid{display:grid; gap:var(--s3); grid-template-columns:1fr; margin-top:var(--s5); align-items:start}
@media(min-width:940px){ .rep-grid{grid-template-columns:.66fr 1.34fr; gap:var(--s4)} }
.score{background:rgba(255,255,255,.06); border:1px solid var(--linha-escura); border-radius:var(--r-lg); padding:7px}
.score-core{padding:var(--s4) var(--s3); text-align:center}
.score .big{font-family:var(--display); font-weight:800; font-size:clamp(3.6rem,10vw,5.4rem);
  line-height:1; color:var(--vivo); font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.score .stars{display:flex; justify-content:center; gap:3px; color:#FFC53D; margin:var(--s1) 0 12px}
.score .stars svg{width:21px;height:21px}
.score .src{display:inline-flex; align-items:center; gap:8px; color:var(--sobre-escuro-2); font-size:.85rem; font-weight:600}
.quotes{display:grid; gap:var(--s2)}
@media(min-width:700px){ .quotes{grid-template-columns:repeat(3,1fr)} }
.quote{margin:0; background:rgba(255,255,255,.05); border:1px solid var(--linha-escura);
  border-left:3px solid var(--vivo); border-radius:var(--r); padding:var(--s3);
  transition:transform .5s var(--out), background .4s var(--out)}
@media (hover:hover){ .quote:hover{transform:translateY(-4px); background:rgba(255,255,255,.09)} }
/* estrelas do card: as 5 avaliações usadas são 5 estrelas de verdade */
.q-estrelas{display:flex; gap:2px; color:#FFC53D; margin-bottom:12px}
.q-estrelas svg{width:15px; height:15px}
.quote p{color:var(--sobre-escuro-2); font-size:.95rem; line-height:1.6}
/* os textos têm tamanhos bem diferentes; o cite gruda no rodapé do card
   para os três ficarem alinhados por baixo */
.quote{display:flex; flex-direction:column}
/* margin-top:auto empurra o cite para o rodape do card: os tres textos tem
   tamanhos bem diferentes e as assinaturas precisam alinhar por baixo.
   O respiro virou padding porque o margin agora e o empurrao. */
.quote cite{display:block; font-style:normal; margin-top:auto; padding-top:var(--s3);
  font-weight:700; font-size:.92rem; color:#fff}
.quote cite span{display:block; font-weight:500; color:var(--sobre-escuro-3); font-size:.78rem; margin-top:3px}

/* ============================ FAQ ============================ */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--linha-clara)}
.faq summary{cursor:pointer; list-style:none; padding:24px 0; font-weight:700; font-size:1.05rem;
  display:flex; justify-content:space-between; align-items:center; gap:20px; color:var(--sobre-claro);
  transition:color .3s var(--out)}
.faq summary:hover{color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{flex:none; width:30px;height:30px;border-radius:50%; background:var(--vivo); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:transform .5s var(--out)}
.faq details[open] summary .ic{transform:rotate(135deg)}
.faq .resp{padding:0 0 24px; color:var(--sobre-claro-2); font-size:.97rem; max-width:68ch}
.todo{color:var(--vivo); font-style:italic; font-size:.85em}

/* ============================ CONTATO ============================ */
.contato{display:grid; gap:var(--s4); grid-template-columns:1fr; margin-top:var(--s5)}
@media(min-width:940px){ .contato{grid-template-columns:1fr 1fr} }
.info{list-style:none; padding:0; display:grid; gap:4px}
.info li{display:flex; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--linha-escura)}
.info .ic{flex:none; width:48px;height:48px;border-radius:50%; background:rgba(75,143,54,.18);
  color:var(--vivo); display:flex;align-items:center;justify-content:center}
.info .ic svg{width:20px;height:20px}
.info b{display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--sobre-escuro-3); margin-bottom:3px}
.info a,.info span{color:#fff; text-decoration:none}
.info a:hover{color:var(--vivo)}
/* 3 passos compactos: substituíram a seção inteira de "Como funciona" */
.passos{list-style:none; padding:0; margin:var(--s4) auto 0; max-width:880px;
  display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:620px){ .passos{grid-template-columns:repeat(3,1fr); gap:var(--s2)} }
.passos li{display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:rgba(255,255,255,.05); border:1px solid var(--linha-escura); border-radius:999px}
.passos b{flex:none; width:26px; height:26px; border-radius:50%; background:var(--vivo); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800}
.passos span{font-size:.88rem; color:var(--sobre-escuro-2); line-height:1.3}

/* formulário em destaque, centralizado e largo (não mais coluna lateral) */
.form{background:var(--creme); border-radius:var(--r-lg); padding:var(--s5) var(--s4); color:var(--sobre-claro);
  max-width:880px; margin:var(--s5) auto 0}
@media(max-width:700px){ .form{padding:var(--s3) 20px; margin-top:var(--s4)} }
.form-linha{display:grid; gap:var(--s2); grid-template-columns:1fr}
@media(min-width:620px){ .form-linha{grid-template-columns:1fr 1fr; gap:var(--s3)} }
.form h3{font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--navy)}
.form .sub{color:var(--sobre-claro-2); font-size:.93rem; margin-top:8px}
.campo{margin-top:var(--s2)}
.campo label{display:block; font-size:.82rem; font-weight:700; margin-bottom:8px; color:var(--sobre-claro-2)}
.campo .req{color:var(--vivo)}
.campo input,.campo select,.campo textarea{width:100%; font:inherit; font-size:1rem; padding:15px 16px; border:1px solid rgba(29,43,37,.2);
  border-radius:12px; background:#fff; color:var(--sobre-claro); min-height:52px;
  transition:border-color .3s var(--out), box-shadow .3s var(--out)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--vivo); box-shadow:0 0 0 4px rgba(75,143,54,.16); outline:none}
.form .btn{margin-top:var(--s3)}
.nota{font-size:.79rem; color:var(--sobre-claro-3); margin-top:14px; text-align:center}
/* contato e localização abaixo do formulário, sem competir com o CTA.
   Mapa removido a pedido: o iframe do Google era o elemento mais pesado da página
   e o endereço em texto já resolve. */
.contato-baixo{margin-top:var(--s5); max-width:880px; margin-left:auto; margin-right:auto}
@media(max-width:700px){ .contato-baixo{margin-top:var(--s4)} }
.contato-baixo .info{grid-template-columns:1fr}
@media(min-width:700px){
  .contato-baixo .info{grid-template-columns:1fr 1fr; gap:0 var(--s4)}
}

/* ============================ RODAPÉ ============================ */
.rodape{background:var(--verde-2); border-top:1px solid var(--linha-escura); padding:var(--s5) 0 var(--s4); position:relative; z-index:2}
.rodape-top{display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between; align-items:flex-start}
/* width:auto é obrigatório: o img tem width="300" no HTML e sem isso o logo estica */
.rodape img{height:32px; width:auto; filter:brightness(0) invert(1); margin-bottom:14px}
.rodape p{color:var(--sobre-escuro-3); max-width:36ch; font-size:.9rem}
.sociais{display:flex; gap:12px}
.sociais a{width:48px;height:48px;border:1px solid var(--linha-escura);border-radius:50%;display:flex;
  align-items:center;justify-content:center; color:var(--sobre-escuro-2); transition:transform .5s var(--out), color .3s var(--out), background .3s var(--out)}
.sociais a:hover{color:#fff; background:var(--vivo); border-color:var(--vivo); transform:translateY(-3px)}
.sociais svg{width:20px;height:20px}
.rodape hr{border:none; border-top:1px solid var(--linha-escura); margin:var(--s4) 0 var(--s2)}
.legal{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; color:var(--sobre-escuro-3); font-size:.84rem}

/* ============================ WHATSAPP FLUTUANTE — único CTA persistente ============================
   Decisão do cliente (vídeo 06:00): sem barra fixa e sem botão de ligar.
   "Já tem um monte de botão, não precisa ficar encaixando mais coisa.
    Deixa só um ícone de WhatsApp no canto." */
.zap{position:fixed; right:18px; bottom:18px; z-index:170; width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.34); text-decoration:none;
  transition:transform .4s var(--out), box-shadow .4s var(--out)}
.zap svg{width:32px;height:32px}
.zap:hover{transform:scale(1.08); box-shadow:0 14px 38px rgba(37,211,102,.45)}
.zap{transition:transform .4s var(--out), box-shadow .4s var(--out), opacity .3s var(--out)}
@media(max-width:700px){ .zap.no-hero{opacity:0; transform:scale(.6); pointer-events:none} }
@media(min-width:1000px){ .zap{right:26px; bottom:26px; width:64px; height:64px} }
@media(max-width:400px){ .zap{width:54px; height:54px; right:14px; bottom:14px} .zap svg{width:28px;height:28px} }

/* Barrinhas de progresso do banner removidas a pedido do Ryan (17/09).
   O elemento continua no HTML porque o app.js monta o carrossel a partir dele. */
.banner-dots{display:none}

/* formulário (16/09): serviço ocupa a linha toda; descrição em textarea */
.form-linha--uma{grid-template-columns:1fr !important}
.campo textarea{resize:vertical; min-height:96px; line-height:1.5}
.legal a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.legal a:hover{color:#fff}

/* espaçamento vertical do formulário (16/09): o gap da .form-linha somava com o
   margin-top de cada campo. Empilhado no celular, a 1ª linha ficava com vão duplo
   (nome → cidade) e as outras não. Agora o vertical vem só do margin do campo. */
.form-linha{row-gap:0}