/* ============================================================
   BROTA WEB — Design System
   Tema claro · branco + verde + preto
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* marca */
  --green:#16A34A;
  --green-d:#15803D;
  --green-l:#22C55E;
  --green-neon:#3DFF99;   /* so para os numeros grandes sobre o preto */
  --mint:#F0FDF4;
  --mint-2:#DCFCE7;

  /* neutros */
  --ink:#0A0A0A;
  --text:#111827;
  --muted:#4B5563;
  --faint:#6B7280;
  --line:#E5E7EB;
  --line-2:#F3F4F6;
  --surf:#F9FAFB;
  --white:#FFFFFF;
  --wa:#25D366;

  /* tipografia */
  --dsp:'Plus Jakarta Sans',-apple-system,sans-serif;
  --bdy:'DM Sans',-apple-system,sans-serif;

  /* forma */
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-full:999px;

  /* sombra */
  --sh-sm:0 1px 2px rgba(16,24,40,.05);
  --sh:0 4px 16px rgba(16,24,40,.06);
  --sh-lg:0 18px 44px rgba(16,24,40,.10);
  --sh-green:0 10px 30px rgba(22,163,74,.24);

  /* z-index */
  --z-nav:50;
  --z-float:40;
  --z-modal:60;

  /* layout */
  --nav-h:78px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:100px;overflow-x:hidden;max-width:100%}
@supports (overflow-x:clip){
  /* clip corta sem virar area de rolagem, entao menu e botão fixos continuam presos na tela */
  html{overflow-x:clip}
}
body{
  font-family:var(--bdy);
  background:var(--white);
  color:var(--text);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;            /* reserva para navegador sem suporte a clip */
}
/* "hidden" transforma o body numa area de rolagem propria, e alguns
   navegadores desenham uma barra extra por causa disso. "clip" corta a sobra
   horizontal do mesmo jeito, mas sem criar essa segunda area de rolagem. */
@supports (overflow-x:clip){
  body{overflow-x:clip}
}
/* barra de rolagem da pagina fina e discreta, no lugar da barra grossa padrao */
html{scrollbar-width:thin;scrollbar-color:#D8DBE0 transparent}
html::-webkit-scrollbar{width:9px;height:9px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:#D8DBE0;border-radius:999px}
html::-webkit-scrollbar-thumb:hover{background:#BFC4CB}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none}
::selection{background:var(--mint-2);color:var(--green-d)}

.wrap{width:min(1200px,92vw);margin-inline:auto}
.wrap-sm{width:min(880px,92vw);margin-inline:auto}

/* foco acessível */
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

/* ============ TIPOGRAFIA ============ */
h1,h2,h3,h4{font-family:var(--dsp);font-weight:800;letter-spacing:-.03em;line-height:1.08;color:var(--ink)}
h1{font-size:clamp(38px,6vw,72px)}
h2{font-size:clamp(30px,4.2vw,50px)}
h3{font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.02em;line-height:1.3}
p{color:var(--muted)}
.g{color:var(--green)}
.lead{font-size:clamp(16px,1.9vw,19px);color:var(--muted);line-height:1.7;max-width:62ch}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--dsp);font-weight:700;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--green-d);
  background:var(--mint);border:1px solid var(--mint-2);
  padding:7px 15px;border-radius:var(--r-full);
}
.eyebrow svg{width:14px;height:14px}

.sec-head{max-width:720px;margin-bottom:52px}
.sec-head h2{margin-top:18px}
.sec-head p{margin-top:16px;font-size:clamp(15px,1.8vw,18px);line-height:1.7}
.sec-head--c{margin-inline:auto;text-align:center}

/* ============ BOTÕES ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--dsp);font-weight:700;font-size:15.5px;line-height:1;
  padding:15px 26px;border-radius:var(--r-full);
  min-height:48px;
  transition:background .28s cubic-bezier(.4,0,.2,1),color .28s cubic-bezier(.4,0,.2,1),
             border-color .28s cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1),
             transform .28s cubic-bezier(.4,0,.2,1);
  cursor:pointer;text-align:center;
}
.btn svg{width:18px;height:18px;flex-shrink:0}
/* o clique afunda um pouco: devolve resposta ao toque */
.btn:active{transform:translateY(0) scale(.985);transition-duration:.08s}

.btn--primary{background:var(--green);color:#fff;box-shadow:var(--sh-green)}
.btn--primary:hover{background:var(--green-d);transform:translateY(-2px);box-shadow:0 14px 34px rgba(22,163,74,.3)}

/* o preto vira verde da marca ao passar o mouse. O cinza azulado que estava
   aqui antes nao existia na paleta. O tom escolhido e o mesmo verde escuro do
   texto principal: 5,02:1 com o texto branco, contra 2,28:1 do verde claro. */
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:var(--green-d);transform:translateY(-2px);box-shadow:0 14px 34px rgba(21,128,61,.32)}

.btn--ghost{background:var(--white);color:var(--text);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.btn--ghost:hover{border-color:var(--green);color:var(--green-d);background:var(--mint);transform:translateY(-2px);box-shadow:0 12px 26px rgba(22,163,74,.16)}

.btn--wa{background:var(--wa);color:#04140A;box-shadow:0 8px 24px rgba(37,211,102,.26)}
.btn--wa:hover{background:#1FBE5C;transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,211,102,.34)}
.btn--lg{padding:17px 32px;font-size:16.5px;min-height:56px}
.btn--block{width:100%}

/* ============ NAV (pílula flutuante) ============ */
.nav{position:fixed;top:16px;left:0;right:0;z-index:var(--z-nav);transition:top .3s}
/* barra de vidro: translúcida, com desfoque, saturação e brilho de borda */
.nav__in{
  width:min(1200px,94vw);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.62));
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--r-full);
  padding:10px 16px;            /* folga igual dos dois lados */
  box-shadow:
    0 8px 30px rgba(16,24,40,.13),
    inset 0 1px 0 rgba(255,255,255,.9),      /* reflexo na aresta de cima */
    inset 0 -1px 0 rgba(255,255,255,.28);    /* leve retorno embaixo */
  transition:background .3s,box-shadow .3s,border-color .3s;
}
.nav.on .nav__in{
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.74));
  border-color:rgba(255,255,255,.7);
  box-shadow:
    0 12px 40px rgba(16,24,40,.16),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.3);
}
/* sem suporte a backdrop-filter, volta ao fundo sólido para não perder leitura */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav__in{background:rgba(255,255,255,.96)}
}
/* laterais com o mesmo peso: deixa o bloco de links exatamente no centro */
.brand{flex:1;display:flex;align-items:center;gap:10px;font-family:var(--dsp);font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.brand img{width:30px;height:30px;object-fit:contain}
.nav__links{display:flex;align-items:center;gap:4px}
.nav__links a{
  font-size:14.5px;font-weight:500;
  color:#374151;                 /* um tom mais escuro: mantém leitura sobre o vidro */
  padding:9px 14px;border-radius:var(--r-full);
  transition:color .2s,background .2s;
}
.nav__links a:hover{color:var(--ink);background:var(--line-2)}
.nav__links a.act{color:var(--green-d);background:var(--mint);font-weight:600}
.nav__cta{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.nav .btn{padding:12px 20px;font-size:14.5px;min-height:44px}
.nav-tg{display:none;width:44px;height:44px;border-radius:var(--r-full);align-items:center;justify-content:center;flex-direction:column;gap:5px;background:var(--line-2)}
.nav-tg i{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s,opacity .2s}
.nav-tg.x i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-tg.x i:nth-child(2){opacity:0}
.nav-tg.x i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ SEÇÕES ============ */
section{padding:clamp(48px,5.6vw,74px) 0;position:relative}
/* Dois blocos seguidos somavam o respiro de baixo de um com o de cima do outro:
   davam 220px de vazio no computador. Quando o fundo e o mesmo, os dois se leem
   como um bloco so, entao a parte de cima cede. */
.sec--surf + .sec--surf,
.sec--ink + .sec--ink,
main > section:not([class]) + section:not([class]){padding-top:clamp(20px,2.4vw,32px)}
.sec--surf{background:var(--surf)}
.sec--mint{background:var(--mint)}
.sec--ink{background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
/* grade técnica sutil, some nas bordas */
.sec--ink::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 42%,#000 10%,transparent 78%);
  mask-image:radial-gradient(72% 62% at 50% 42%,#000 10%,transparent 78%);
}
/* rastros de luz correndo pelas linhas da grade (desenhados em canvas) */
.ink-grid{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 42%,#000 10%,transparent 78%);
  mask-image:radial-gradient(72% 62% at 50% 42%,#000 10%,transparent 78%);
}
.sec--ink > .wrap{position:relative;z-index:1}
.sec--ink h2,.sec--ink h3{color:#fff}
.sec--ink p{color:rgba(255,255,255,.66)}
.sec--ink .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--green-l)}
/* cards dentro de seção escura */
.sec--ink .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.sec--ink .card:hover{background:rgba(255,255,255,.08);border-color:rgba(163,230,53,.42)}
.sec--ink .card p{color:rgba(255,255,255,.62)}
.sec--ink .card__ico{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.28)}
.sec--ink .card__ico svg{stroke:var(--green-l)}
.sec--ink .card__tags li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.6)}
/* o verde escuro do link fica em 3,6:1 no fundo preto; o claro sobe para 7,9:1 */
.sec--ink .card__lnk{color:var(--green-l)}
.sec--ink .checks li{color:rgba(255,255,255,.72)}
.sec--ink .checks li b{color:#fff}
.sec--ink .checks svg{stroke:var(--green-l)}

/* ============ HERO ============ */
.hero{padding-top:calc(var(--nav-h) + clamp(40px,7vw,80px));padding-bottom:clamp(50px,7vw,80px);text-align:center;position:relative;overflow:hidden}
.hero::before{
  content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:min(1100px,120vw);height:600px;pointer-events:none;
  background:radial-gradient(45% 50% at 50% 50%,rgba(22,163,74,.10),transparent 70%);
}
.hero__in{position:relative}
.hero h1{margin:22px auto 0;max-width:16ch}
.hero .lead{margin:22px auto 0;text-align:center}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:34px}
.hero__note{margin-top:18px;font-size:13.5px;color:var(--faint)}

/* ---- hero com fundo animado (ref: 21st.dev Shader Builder "Mesh drift") ---- */
.hero--shader{background:#031210;color:#fff}
.hero--shader::before{display:none}          /* o shader substitui o glow do CSS */
.hero__gl{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:0;pointer-events:none;opacity:0;transition:opacity 1.1s ease;
}
.hero__gl.on{opacity:1}
/* véu que garante leitura do texto sobre as áreas claras da malha */
.hero--shader::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 62% at 50% 46%,rgba(3,12,8,.72),rgba(3,12,8,.30) 62%,transparent 88%),
    linear-gradient(to bottom,rgba(3,12,8,.34),transparent 26%,transparent 72%,rgba(3,12,8,.42));
}
.hero--shader .hero__in{position:relative;z-index:1}
.hero--shader h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero--shader .lead{color:rgba(255,255,255,.86);text-shadow:0 1px 14px rgba(0,0,0,.45)}
.hero--shader .hero__note{color:rgba(255,255,255,.62)}
/* selo: mesmo verde do título, sobre pastilha clara para manter a leitura */
.hero--shader .eyebrow{
  background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.6);
  color:var(--green-d);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.hero--shader .rot>span{color:var(--green)}   /* mesmo verde do restante do site */
.hero--shader .btn--ghost{
  background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:none;
}
.hero--shader .btn--ghost:hover{background:rgba(255,255,255,.2);border-color:#fff;color:#fff}

/* texto rotativo (ref: 21st.dev Text Rotate) */
.rot{display:inline-grid;vertical-align:top;overflow:hidden;text-align:left}
.rot>span{grid-area:1/1;color:var(--green);opacity:0;transform:translateY(100%);animation:rotWord 12s infinite}
.rot>span:nth-child(1){animation-delay:0s}
.rot>span:nth-child(2){animation-delay:3s}
.rot>span:nth-child(3){animation-delay:6s}
.rot>span:nth-child(4){animation-delay:9s}
@keyframes rotWord{
  0%{opacity:0;transform:translateY(70%)}
  3%,24%{opacity:1;transform:translateY(0)}
  27%,100%{opacity:0;transform:translateY(-70%)}
}

@keyframes spin{to{transform:rotate(360deg)}}

/* ============ MARQUEE (ref: 21st.dev Marquee) ============ */
/* Faixa verde com os nomes em branco. O tom e o verde escuro: com o texto em
   16px negrito, o branco no verde claro daria 3,30:1 e reprovaria em leitura;
   no escuro sobe para 5,02:1. A mascara continua aqui, agora opaca de ponta a
   ponta, porque e ela que faz o Safari do iPhone recortar a trilha de 4400px. */
.mq{
  position:relative;overflow:hidden;max-width:100%;isolation:isolate;
  padding:20px 0;background:var(--green-d);
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000);
  mask-image:radial-gradient(#fff,#000);
}
/* as pontas somem dentro do proprio verde, para o nome nao ser cortado no meio */
.mq::before,.mq::after{content:'';position:absolute;top:0;bottom:0;width:54px;z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--green-d),rgba(21,128,61,0))}
.mq::after{right:0;background:linear-gradient(270deg,var(--green-d),rgba(21,128,61,0))}
/* a rolagem não para com o mouse em cima: é enfeite, não conteúdo para ler */
.mq__t{display:flex;gap:46px;width:max-content;animation:mq 32s linear infinite}
@keyframes mq{to{transform:translateX(-33.333%)}}
.mq__t span{
  display:flex;align-items:center;gap:46px;white-space:nowrap;
  font-family:var(--dsp);font-weight:700;font-size:16px;color:#fff;letter-spacing:-.01em;
}
.mq__t span::after{content:'';width:5px;height:5px;border-radius:50%;background:#fff;opacity:.5;flex-shrink:0}

/* ============ CARDS + SPOTLIGHT (ref: 21st.dev Spotlight Card) ============ */
.grid{display:grid;gap:18px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

.card{
  position:relative;overflow:hidden;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:30px;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.card::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgba(22,163,74,.10),transparent 65%);
}
.card:hover{border-color:#C9E9D4;box-shadow:var(--sh);transform:translateY(-3px)}
.card:hover::before{opacity:1}
.card__ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--mint);border:1px solid var(--mint-2);margin-bottom:18px;
}
.card__ico svg{width:22px;height:22px;stroke:var(--green-d);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:9px}
.card p{font-size:14.8px;line-height:1.65}
.card__tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.card__tags li{font-size:12px;color:var(--faint);background:var(--surf);border:1px solid var(--line);padding:4px 10px;border-radius:var(--r-full)}
/* variação do cartão com todo o conteúdo alinhado ao centro.
   O ícone é uma grade de largura fixa e as etiquetas são flex, por isso os
   dois precisam de regra própria: text-align sozinho não os moveria. */
.grid--centro .card{text-align:center}
.grid--centro .card__ico{margin-inline:auto}
.grid--centro .card__tags{justify-content:center}
.card__lnk{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-family:var(--dsp);font-weight:700;font-size:14px;color:var(--green-d)}
.card__lnk svg{width:15px;height:15px;transition:transform .25s}
.card:hover .card__lnk svg{transform:translateX(3px)}

/* lista com check */
.checks{list-style:none;display:flex;flex-direction:column;gap:13px;margin:26px 0}
.checks li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;color:var(--muted)}
.checks svg{width:21px;height:21px;flex-shrink:0;margin-top:1px;stroke:var(--green);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* split (texto + visual) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);align-items:center}
.split--rev .split__txt{order:2}

/* ============ CONTADORES ============ */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
/* seis numeros numa fileira so: a faixa preta continua com a mesma altura */
.kpi--6{grid-template-columns:repeat(6,1fr);gap:14px}
/* numero e legenda centrados no mesmo eixo dentro de cada coluna */
.kpi__i{text-align:center}
.kpi__i b{display:block;font-family:var(--dsp);font-weight:800;font-size:clamp(34px,4.6vw,52px);letter-spacing:-.04em;line-height:1;color:var(--green)}
.kpi--6 .kpi__i b{font-size:clamp(30px,3.4vw,46px)}
/* "R$" e "mil" saem menores para o numero dominar */
.kpi__i b .un{font-size:.46em;font-weight:700;font-style:normal;letter-spacing:-.01em;opacity:.92}
.kpi__i b .un:first-child{margin-right:.12em}
.kpi__i b .un:last-child{margin-left:.14em}
.kpi__i span{display:block;margin-top:9px;font-size:14.5px;color:var(--muted)}
.kpi--6 .kpi__i span{font-size:13.5px;margin-top:8px;text-wrap:balance;max-width:19ch;margin-inline:auto}
/* numero em neon: cor mais eletrica que o verde da marca, com halo em volta.
   So vale sobre o preto; no claro o brilho sumiria e a cor cansaria a vista. */
.sec--ink .kpi__i b{
  color:var(--green-neon);
  text-shadow:
    0 0 10px rgba(61,255,153,.55),
    0 0 30px rgba(61,255,153,.35),
    0 0 70px rgba(61,255,153,.18);
}
.sec--ink .kpi__i b .un{color:var(--green-neon);opacity:.8}
.sec--ink .kpi__i span{color:rgba(255,255,255,.6)}

/* ============ DEPOIMENTOS (ref: 21st.dev Testimonials Columns) ============ */
.tst{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tst-dots{display:none}                 /* so aparecem no celular */
.tsc{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:16px;transition:box-shadow .25s,transform .25s,border-color .25s}
.tsc:hover{box-shadow:var(--sh);transform:translateY(-3px);border-color:#C9E9D4}
.stars{display:flex;gap:2px}
.stars svg{width:16px;height:16px;fill:#F5B301}
.tsc p{font-size:15px;line-height:1.7;color:var(--text);flex:1}
.tsw{display:flex;align-items:center;gap:12px;padding-top:15px;border-top:1px solid var(--line-2)}
.av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--dsp);font-weight:800;font-size:14px;color:#fff;flex-shrink:0}
.tsw b{display:block;font-family:var(--dsp);font-weight:700;font-size:15px;color:var(--ink)}
.tsw span{display:block;font-size:12.5px;color:var(--faint)}

/* ============ FAQ ============ */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .25s,box-shadow .25s}
.faq details[open]{border-color:#C9E9D4;box-shadow:var(--sh)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;cursor:pointer;list-style:none;
  font-family:var(--dsp);font-weight:700;font-size:16.5px;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';width:11px;height:11px;flex-shrink:0;
  border-right:2.2px solid var(--green);border-bottom:2.2px solid var(--green);
  transform:rotate(45deg) translateY(-3px);transition:transform .3s;
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq__a{padding:0 24px 22px;font-size:15.2px;line-height:1.7;color:var(--muted)}

/* ============ GALERIA ============ */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal figure{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surf);transition:transform .3s ease,box-shadow .3s ease}
.gal figure:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.gal img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* ============ MURAL ESTILO PINTEREST (estático, sem rolagem) ============
   Usado na página do pilar de conteúdo. Cada arte mantém a proporção
   original: pode ser quadrada, story, retrato ou paisagem, sem corte.
   Para adicionar peça nova, basta duplicar um .pin__c.
   ======================================================================== */
.pin{column-count:3;column-gap:18px}
.pin__c{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 18px;position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surf);
  transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease;
}
.pin__c:hover{box-shadow:var(--sh-lg);transform:translateY(-4px);border-color:#C9E9D4}
.pin__c img{width:100%;height:auto;display:block}   /* proporção natural */
/* legenda aparece ao passar o mouse, como no Pinterest */
.pin__cap{
  position:absolute;inset:auto 0 0 0;padding:34px 16px 14px;
  background:linear-gradient(to top,rgba(6,11,8,.88),transparent);
  color:#fff;font-size:13px;opacity:0;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease;pointer-events:none;
}
.pin__c:hover .pin__cap{opacity:1;transform:none}
.pin__cap b{display:block;font-family:var(--dsp);font-weight:700;font-size:14.5px}
.pin__cap span{color:rgba(255,255,255,.75)}
@media(max-width:900px){.pin{column-count:2;column-gap:14px}.pin__c{margin-bottom:14px}}
/* sem hover (celular): legenda sempre visível, de forma discreta */
@media(hover:none){
  .pin__cap{opacity:1;transform:none;padding:26px 13px 11px;font-size:12px}
  .pin__cap b{font-size:13px}
}

/* ---- filtros por categoria ---- */
.filtros{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:30px}
.filtro{
  font-family:var(--dsp);font-weight:600;font-size:14px;color:var(--muted);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-full);
  padding:10px 19px;min-height:44px;
  transition:background .2s,color .2s,border-color .2s;
}
.filtro:hover{border-color:var(--green);color:var(--green-d)}
.filtro.on{background:var(--green);border-color:var(--green);color:#fff}
.filtro span{opacity:.65;font-weight:500;margin-left:5px}
.pin__c.oculto{display:none}

/* ---- ampliação da arte (lightbox) ---- */
.lb{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:clamp(14px,3vw,40px);
  background:rgba(6,11,8,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .28s ease;
}
.lb.aberta{display:flex}
.lb.on{opacity:1}
.lb__fig{max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.lb__img{
  max-width:100%;max-height:82vh;width:auto;height:auto;display:block;
  border-radius:var(--r);box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:scale(.96);opacity:0;transition:transform .3s ease,opacity .3s ease;
}
.lb.on .lb__img{transform:none;opacity:1}
.lb__cap{color:rgba(255,255,255,.82);font-size:14px;text-align:center}
.lb__cap b{font-family:var(--dsp);font-weight:700;color:#fff;margin-right:7px}
.lb__btn{
  position:absolute;width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .2s,transform .2s;
}
.lb__btn:hover{background:rgba(255,255,255,.24);transform:scale(1.06)}
.lb__btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lb__fechar{top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px)}
.lb__ant{left:clamp(10px,2vw,26px)}
.lb__prox{right:clamp(10px,2vw,26px)}
.lb__conta{
  position:absolute;bottom:clamp(14px,3vw,26px);left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.6);font-size:13px;font-family:var(--dsp);font-weight:600;
}
.pin__c{cursor:zoom-in}
@media(max-width:620px){
  .lb__btn{width:44px;height:44px}
  .lb__ant{left:6px}.lb__prox{right:6px}
  .lb__img{max-height:72vh}
}

/* ============ MURAL DE DESIGNS (ref: 21st.dev Testimonials Columns) ============
   3 colunas em rolagem vertical infinita, com fade nas bordas.
   Para adicionar peças novas: basta duplicar um .dw__c dentro dos DOIS blocos
   (a lista é repetida 2x para o loop ficar contínuo).
   ============================================================================ */
.dw{
  display:flex;justify-content:center;gap:20px;
  max-height:740px;overflow:hidden;max-width:100%;isolation:isolate;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}
.dw__col{flex:1 1 0;max-width:290px;min-width:0}
.dw__t{
  display:flex;flex-direction:column;gap:20px;padding-bottom:20px;
  animation:dwRoll var(--dur,24s) linear infinite;
  will-change:transform;
}
@keyframes dwRoll{to{transform:translateY(-50%)}}
.dw__c{
  display:block;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--white);box-shadow:var(--sh-sm);color:inherit;
  transition:box-shadow .3s ease,border-color .3s ease,transform .3s ease;
}
.dw__c:hover{box-shadow:var(--sh-lg);border-color:#C9E9D4;transform:scale(1.02)}
.dw__c img{width:100%;height:auto;display:block}   /* proporção natural da arte */
.dw__cap{padding:14px 16px;font-size:13px;color:var(--faint);display:flex;align-items:center;gap:7px}
.dw__cap b{font-family:var(--dsp);font-weight:700;font-size:13.5px;color:var(--ink)}
.dw__cap i{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
/* colunas extras entram conforme a largura */
.dw__col--lg{display:none}
/* a segunda coluna vale desde o celular: com uma so, o mural rolava magro
   demais e nao dava ideia de volume de trabalho */
.dw__col--md{display:block}
@media(min-width:1000px){.dw__col--lg{display:block}}
/* no celular a folga entre colunas encolhe, para a arte ganhar tamanho */
@media(max-width:620px){
  .dw{gap:12px}
  .dw__t{gap:12px;padding-bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  .dw{max-height:none;-webkit-mask-image:none;mask-image:none}
  .dw__t{animation:none}
}

/* ============ LEQUE DE VÍDEOS (ref: 21st.dev Card Fan Carousel) ============
   Os cards se abrem em leque. Ao passar o mouse, o card sobe e empurra os vizinhos.
   Para trocar por vídeos reais: ver comentário no bloco .fan do app.js
   ========================================================================= */
.fan{position:relative;width:100%}
/* Rotulo do video em destaque. Fica acima do leque, fora do card.
   No celular acompanha o card do centro; no computador acompanha o card sob
   o mouse, voltando ao do centro quando o mouse sai. */
.fan__rotulo{
  display:flex;
  align-items:center;justify-content:center;gap:8px 12px;
  margin-bottom:20px;min-height:34px;text-align:center;
  /* recorta na borda de baixo: e o que faz o texto parecer sair de dentro do
     video, subindo por tras da linha em vez de so aparecer no lugar */
  overflow:hidden;padding:4px 0;
}
.fan__rotulo span{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--dsp);font-weight:700;font-size:15px;color:var(--green-d);
}
.fan__rotulo span i{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}
/* no computador o rotulo tem espaco de sobra acima do leque, entao cresce */
@media(min-width:621px){
  .fan__rotulo{margin-bottom:26px;min-height:44px}
  .fan__rotulo span{font-size:clamp(17px,1.6vw,22px);gap:11px}
  .fan__rotulo span i{width:9px;height:9px}
}
/* O texto sobe de baixo da linha de recorte, com um desfoque leve que some no
   caminho. A curva desacelera bem no fim, para o movimento chegar macio em vez
   de bater no lugar. */
.fan__rotulo.trocou span{animation:rotuloEntra .62s cubic-bezier(.16,1,.3,1) both}
@keyframes rotuloEntra{
  0%{opacity:0;transform:translateY(130%) scale(.92);filter:blur(4px)}
  40%{opacity:1}
  100%{opacity:1;transform:none;filter:blur(0)}
}
/* quem pediu menos movimento recebe so o aparecer */
@media(prefers-reduced-motion:reduce){
  .fan__rotulo.trocou span{animation:none}
}
/* O nicho sobe para fora do card. Dentro dele sobra so o tempo, no centro.
   font-size:0 apaga o nome do nicho, que e texto solto sem tag propria; o <em>
   do tempo recupera o tamanho logo abaixo. gap:0 porque o espaco entre o texto
   de largura zero e o tempo empurrava o tempo 3,5px para o lado.
   Restrito ao leque: a galeria em grade (.vgrid) usa a mesma classe. */
.fan .fan__meta{font-size:0;justify-content:center;gap:0;padding:30px 12px 12px}
.fan .fan__meta i{display:none}
.fan .fan__meta em{margin-left:0;font-size:12.5px;color:#fff}
.fan__stage{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:clamp(360px,48vw,540px);
}
.fan__card{
  position:absolute;top:50%;left:50%;
  width:clamp(132px,15.5vw,208px);aspect-ratio:9/16;
  margin:calc(-0.5 * clamp(132px,15.5vw,208px) * 16 / 9) 0 0 calc(-0.5 * clamp(132px,15.5vw,208px));
  border-radius:20px;overflow:hidden;
  background:#0d1712;border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 46px rgba(16,24,40,.24);
  opacity:0;
  transition:transform .6s cubic-bezier(.22,1.32,.36,1),opacity .5s ease,box-shadow .35s ease;
  will-change:transform;
}
.fan__card img,.fan__card video{width:100%;height:100%;object-fit:cover;display:block}
/* placeholder enquanto os vídeos não chegam */
.fan__ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;padding:18px;
  background:
    radial-gradient(70% 55% at 50% 30%,rgba(34,197,94,.20),transparent 70%),
    linear-gradient(160deg,#132018,#0a1310 60%);
}
.fan__play{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(6px);
}
.fan__play svg{width:20px;height:20px;fill:#fff;margin-left:2px}
/* ============ GALERIA DE VÍDEOS (página do pilar) ============ */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vgrid__c{
  position:relative;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surf);
  aspect-ratio:9/16;
  transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease;
}
.vgrid__c:hover{box-shadow:var(--sh-lg);transform:translateY(-4px);border-color:#C9E9D4}
.vgrid__c.oculto{display:none}
.vgrid__c img{width:100%;height:100%;object-fit:cover;display:block}
.vgrid__c .fan__meta{padding:30px 14px 13px}
@media(max-width:1000px){.vgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.vgrid{grid-template-columns:repeat(2,1fr);gap:13px}}

/* botão de play sobre a capa do vídeo */
.fan__card[data-video]::after,
.vgrid__c[data-video]::after{
  content:'';position:absolute;top:50%;left:50%;
  width:54px;height:54px;margin:-27px 0 0 -27px;z-index:3;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.55);
  background:rgba(6,11,8,.45)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E")
    no-repeat center/20px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:transform .25s ease,background .25s ease;
  pointer-events:none;
}
.fan__card[data-video]:hover::after,
.vgrid__c[data-video]:hover::after{transform:scale(1.12);background-color:rgba(22,163,74,.72)}

/* etiqueta sobre o vídeo: categoria + duração */
.fan__meta{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:7px;
  padding:26px 14px 12px;
  background:linear-gradient(to top,rgba(6,11,8,.92),transparent);
  font-family:var(--dsp);font-weight:700;font-size:12.5px;color:#fff;
}
.fan__meta i{width:6px;height:6px;border-radius:50%;background:var(--green-l);flex-shrink:0}
.fan__meta em{margin-left:auto;font-style:normal;font-weight:600;color:rgba(255,255,255,.7);font-size:11.5px}
.fan__ph b{font-family:var(--dsp);font-weight:700;font-size:14px;color:#fff;letter-spacing:-.01em}
.fan__ph span{font-size:11.5px;color:rgba(255,255,255,.5);line-height:1.4}
/* controles */
.fan__nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:8px}
.fan__arrow{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--white);border:1px solid var(--line);box-shadow:var(--sh);
  transition:border-color .25s,background .25s,transform .25s;
}
.fan__arrow:hover{border-color:var(--green);background:var(--mint);transform:scale(1.06)}
.fan__arrow svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fan__dots{display:flex;align-items:center;gap:0}
.fan__dots button{width:26px;height:44px;padding:0;background:none;display:grid;place-items:center}
.fan__dots button::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s,width .3s}
.fan__dots button.on::before{background:var(--green);width:22px;border-radius:var(--r-full)}
/* Com exatamente 7 videos nao ha setas. No computador a barra some inteira,
   como antes. No celular ela volta so com as bolinhas, que servem de bussola
   para quem esta arrastando o dedo. */
.fan__nav--sem-setas{display:none}
@media(max-width:900px){
  .fan__nav--sem-setas{display:flex}
  .fan__nav--sem-setas .fan__arrow{display:none}
  /* o gesto horizontal e do leque; o vertical continua rolando a pagina */
  .fan__stage{touch-action:pan-y}

}
.sec--ink .fan__arrow{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.sec--ink .fan__arrow svg{stroke:#fff}
.sec--ink .fan__dots button::before{background:rgba(255,255,255,.22)}
@media(prefers-reduced-motion:reduce){
  .fan__card{transition:opacity .3s ease}
}
@media(max-width:620px){
  /* card maior no celular: 132px ficava pequeno demais para ver o video.
     O leque fecha um pouco (ver abertura() no app.js) para as pontas nao
     saltarem para fora da tela com o card deste tamanho. */
  .fan__card{
    width:clamp(150px,47vw,195px);
    margin:calc(-0.5 * clamp(150px,47vw,195px) * 16 / 9) 0 0 calc(-0.5 * clamp(150px,47vw,195px));
  }
}
/* modal de reprodução */
.fan-modal{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(6,11,8,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.fan-modal.on{display:flex}
.fan-modal__v{
  max-width:min(430px,92vw);max-height:86vh;width:auto;
  border-radius:18px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.fan-modal__x{
  position:absolute;top:18px;right:20px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:26px;line-height:1;
}
.fan-modal__x:hover{background:rgba(255,255,255,.2)}

/* ============ CTA ============ */
/* a seção anterior já dá o respiro de cima... */
.sec--cta{padding-top:0}
/* ...menos quando ela é escura: aí o CTA precisa do próprio espaço em branco */
.sec--ink + .sec--cta{padding-top:clamp(56px,7vw,90px)}
.cta{
  background:var(--ink);border-radius:var(--r-lg);
  padding:clamp(40px,6vw,72px);text-align:center;position:relative;overflow:hidden;
}
/* fallback estático (aparece antes do shader carregar / sem WebGL) */
.cta::before{
  content:'';position:absolute;top:-50%;left:50%;transform:translateX(-50%);
  width:700px;height:500px;pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(34,197,94,.22),transparent 70%);
}
/* shader animado (ref: 21st.dev Velaris) */
.cta__gl{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:0;pointer-events:none;opacity:0;transition:opacity 1s ease;
}
.cta__gl.on{opacity:1}
/* véu que garante contraste do texto branco em qualquer frame do shader */
.cta::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(78% 88% at 50% 50%,rgba(0,0,0,.42),rgba(0,0,0,.14));
}
.cta>*:not(.cta__gl){position:relative;z-index:1}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.86);margin:18px auto 0;max-width:56ch;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.cta h2{text-shadow:0 2px 18px rgba(0,0,0,.45)}
.cta__btns{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:32px}

/* ============ FORMULÁRIO ============ */
.form{display:grid;gap:16px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--dsp);font-weight:600;font-size:14px;color:var(--text)}
.field input,.field select,.field textarea{
  font-family:var(--bdy);font-size:15.5px;color:var(--text);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 15px;width:100%;min-height:50px;
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.12);
}
.field input::placeholder,.field textarea::placeholder{color:#9CA3AF}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tab{
  font-family:var(--dsp);font-weight:600;font-size:14.5px;color:var(--muted);
  padding:11px 20px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--white);
  min-height:44px;transition:background .2s,color .2s,border-color .2s;
}
.tab:hover{border-color:var(--green);color:var(--green-d)}
.tab.on{background:var(--green);border-color:var(--green);color:#fff}

/* ============ VITRINE DE PROJETOS ============ */
.pf{position:relative;max-width:1060px;margin-inline:auto;padding:0 62px}
.pf__item{display:none}
.pf__item.on{display:block;animation:fadeUp .45s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* A mesma vitrine muda de aparelho conforme a tela de quem visita:
   no computador vira um notebook mostrando o site em desktop, no celular vira
   um celular mostrando o site em mobile. É sempre UM iframe só — o que muda é
   a largura lógica dele, e o site responde sozinho. */
.pf__moldura{
  position:relative;width:864px;margin-inline:auto;padding:12px 12px 0;
  border-radius:16px 16px 3px 3px;
  background:linear-gradient(180deg,#33333B,#1A1A20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(0,0,0,.3);
}
/* barra do navegador (só no computador) */
.pf__bar{
  display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;
  background:#26262D;border-radius:8px 8px 0 0;
}
.pf__bar i{width:9px;height:9px;border-radius:50%;background:#4A4A55}
.pf__bar i:first-child{background:#E5695B}
.pf__bar i:nth-child(2){background:#E0B14C}
.pf__bar i:nth-child(3){background:#5CB85C}
.pf__bar span{
  flex:1;margin-left:10px;font-size:11.5px;color:#9A9AA6;background:#15151A;
  padding:5px 13px;border-radius:var(--r-full);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* pé do notebook */
.pf__base{
  width:960px;max-width:100%;height:13px;margin:0 auto;
  border-radius:0 0 13px 13px;
  background:linear-gradient(180deg,#2E2E36,#141419);
  box-shadow:0 18px 34px -14px rgba(10,10,10,.5);
  position:relative;
}
.pf__base::after{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:104px;height:6px;border-radius:0 0 8px 8px;background:#0D0D11;
}
.pf__tela{
  position:relative;width:840px;height:525px;
  border-radius:0 0 4px 4px;overflow:hidden;background:var(--surf);
  /* O Safari do iPhone nao recorta filho que tem transform so com
     overflow:hidden, e a barra de rolagem do site de dentro vazava para fora
     da moldura. Aplicar uma mascara forca o recorte no caminho certo. Ela e
     opaca de ponta a ponta, entao nao muda nada do que se ve. */
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000);
  mask-image:radial-gradient(#fff,#000);
  isolation:isolate;
}
.pf__tela::before{
  content:'';position:absolute;top:50%;left:50%;width:30px;height:30px;
  margin:-15px 0 0 -15px;border:3px solid var(--line);border-top-color:var(--green);
  border-radius:50%;animation:spin .8s linear infinite;z-index:1;
}
.pf__tela.ok::before{display:none}
/* O site é desenhado no tamanho lógico de um monitor (1280x800) e reduzido
   para caber na moldura, senão acharia que está numa tela estreita.
   Os 20px a mais de largura e altura são sobra proposital: é ali que cai a
   barra de rolagem do site de dentro, fora da área visível da moldura. O
   atributo scrolling="no" não resolve, o navegador ignora em site de fora. */
.pf__tela iframe{
  width:1280px;height:800px;border:0;display:block;
  transform:scale(.65625);transform-origin:0 0;
  opacity:0;transition:opacity .45s;position:absolute;top:0;left:0;z-index:2;
}
.pf__tela iframe.ld{opacity:1}
.pf__blk{position:absolute;inset:0;z-index:3}
.pf__lb{text-align:center;margin-top:22px}
.pf__lb b{display:block;font-family:var(--dsp);font-weight:700;font-size:18px;color:var(--ink)}
.pf__lb span{display:block;font-size:13.5px;color:var(--faint);margin-top:2px}
.pf__abrir{
  display:inline-flex;align-items:center;gap:7px;margin-top:13px;
  font-size:13.5px;font-weight:600;color:var(--green-d);
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.pf__abrir:hover{border-bottom-color:var(--green-d)}
.pf__abrir svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf__nav{
  position:absolute;top:42%;width:46px;height:46px;border-radius:50%;
  background:var(--white);border:1px solid var(--line);box-shadow:var(--sh);
  display:grid;place-items:center;z-index:5;transition:border-color .2s,transform .2s,background .2s;
}
.pf__nav:hover{border-color:var(--green);background:var(--mint);transform:scale(1.06)}
.pf__nav svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pf__nav.pv{left:0}
.pf__nav.nx{right:0}
.pf__dots{display:flex;justify-content:center;gap:0;margin-top:14px}
/* alvo de toque de 44px com bolinha visual de 8px (acessibilidade) */
.pf__dots button{
  width:44px;height:44px;padding:0;background:none;border:0;
  display:grid;place-items:center;position:relative;
}
.pf__dots button::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:var(--line);transition:background .3s,width .3s;
}
.pf__dots button.on::before{background:var(--green);width:26px;border-radius:var(--r-full)}
.pf__dots button:hover::before{background:#B8DCC5}

/* ============ RODAPÉ ============ */
footer{background:var(--ink);color:#fff;padding:64px 0 30px;margin-top:0}
.ft{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px}
.ft__b img{width:46px;margin-bottom:16px}
.ft__b p{color:rgba(255,255,255,.6);font-size:14.5px;max-width:32ch;line-height:1.7}
.ft h4{font-family:var(--dsp);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:16px}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.ft ul a{font-size:14.5px;color:rgba(255,255,255,.72);transition:color .2s}
.ft ul a:hover{color:var(--green-l)}
.ft__soc{display:flex;gap:10px;margin-top:20px}
.ft__soc a{width:40px;height:40px;border-radius:var(--r-full);display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:background .2s,border-color .2s}
.ft__soc a:hover{background:rgba(34,197,94,.18);border-color:var(--green-l)}
.ft__soc svg{width:18px;height:18px;fill:#fff}
.ft__bot{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13.5px;color:rgba(255,255,255,.45)}

/* ============ WHATSAPP FLUTUANTE ============ */
.wa-f{
  position:fixed;right:18px;bottom:18px;z-index:var(--z-float);
  display:inline-flex;align-items:center;gap:10px;
  background:var(--wa);color:#04140A;
  font-family:var(--dsp);font-weight:700;font-size:14.5px;
  padding:14px 20px;border-radius:var(--r-full);min-height:52px;
  box-shadow:0 10px 30px rgba(37,211,102,.32);
  transition:transform .25s,box-shadow .25s;
}
.wa-f:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(37,211,102,.4)}
.wa-f svg{width:21px;height:21px;fill:currentColor}

/* ============ AVISO DE CÓPIA ============ */
#cw{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(16px);
  background:var(--ink);color:#fff;border-radius:var(--r-sm);
  padding:12px 22px;font-size:13.5px;white-space:nowrap;
  box-shadow:var(--sh-lg);pointer-events:none;opacity:0;
  transition:opacity .3s,transform .3s;z-index:var(--z-modal);
}
#cw.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============ REVEAL ON SCROLL ============ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ============ RESPONSIVO ============ */
@media(max-width:1020px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .ft{grid-template-columns:1fr 1fr 1fr;gap:32px}
  .ft__b{grid-column:1/-1}
  /* notebook menor, para as setas continuarem cabendo nas laterais */
  .pf__moldura{width:744px}
  .pf__tela{width:720px;height:450px}
  .pf__tela iframe{transform:scale(.5625)}
  .pf__base{width:830px}
}
@media(max-width:900px){
  .nav__links{
    position:fixed;top:0;right:0;height:100dvh;width:min(84%,330px);
    flex-direction:column;justify-content:center;align-items:stretch;gap:6px;
    background:var(--white);border-left:1px solid var(--line);
    padding:80px 22px 30px;box-shadow:-14px 0 40px rgba(16,24,40,.1);
    /* Fechado, o painel fica estacionado fora da tela. Como e position:fixed,
       nenhum overflow o recorta, e no Safari do iPhone ele aparecia como uma
       faixa branca na lateral, do tamanho da pagina inteira. visibility tira
       ele da pintura de vez; o atraso deixa a animacao de sair terminar. */
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s linear .35s;
  }
  .nav__links.open{
    transform:none;
    visibility:visible;
    transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s;
  }
  .nav__links a{font-size:17px;font-family:var(--dsp);font-weight:600;padding:14px 16px;color:var(--ink)}
  .nav-tg{display:flex}
  .nav .btn--primary{display:none}
  .grid--3,.grid--2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:34px}
  .split--rev .split__txt{order:0}
  /* No celular os depoimentos deixam de empilhar e viram carrossel de arrastar.
     Empilhados, os seis viravam uma coluna interminavel. O cartao seguinte
     aparece pela metade de proposito: e o que avisa que tem mais do lado. */
  .tst{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    /* sangra ate a borda da tela, senao o cartao vizinho fica escondido */
    margin-inline:-4vw;
    padding:3px 4vw 8px;
    scrollbar-width:none;              /* a barra ficaria feia embaixo */
    /* so responde a arrasto horizontal: um movimento meio na diagonal nao
       rouba mais o gesto para a rolagem da pagina */
    touch-action:pan-x;
  }
  .tst::-webkit-scrollbar{display:none}
  .tsc{
    flex:0 0 min(84%,360px);
    scroll-snap-align:center;
  }
  /* bolinhas de posicao, no mesmo desenho das da vitrine de projetos */
  .tst-dots{display:flex;justify-content:center;gap:0;margin-top:4px}
  .tst-dots button{
    width:34px;height:34px;padding:0;background:none;border:0;
    display:grid;place-items:center;position:relative;
  }
  .tst-dots button::before{
    content:'';width:8px;height:8px;border-radius:50%;
    background:var(--line);transition:background .3s,width .3s;
  }
  .tst-dots button.on::before{background:var(--green);width:26px;border-radius:var(--r-full)}
  .kpi{grid-template-columns:repeat(2,1fr);gap:28px}
  .kpi--6{grid-template-columns:repeat(3,1fr);gap:26px 16px}
  .gal{grid-template-columns:repeat(2,1fr)}
  .pf{padding:0 46px}
  .pf__nav{width:44px;height:44px}
  .wa-f span{display:none}
  .wa-f{padding:15px;border-radius:50%}
  /* Daqui para baixo a vitrine vira celular: quem visita pelo telefone vê o
     site do cliente exatamente como veria no próprio aparelho. */
  .pf__moldura{
    width:312px;padding:11px;border-radius:46px;
    background:linear-gradient(155deg,#3B3B42,#0C0C0F 38%,#24242A);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.2),
      0 26px 55px -20px rgba(10,10,10,.55),
      0 0 0 1px rgba(0,0,0,.32);
  }
  .pf__moldura::after{                      /* ilha da câmera */
    content:'';position:absolute;top:22px;left:50%;transform:translateX(-50%);
    width:84px;height:23px;border-radius:13px;background:#0A0A0C;z-index:4;
  }
  .pf__bar,.pf__base{display:none}
  .pf__tela{width:290px;height:628px;border-radius:35px}
  .pf__tela iframe{width:390px;height:845px;transform:scale(.7436)}
}
@media(max-width:620px){
  .grid--4{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .ft{grid-template-columns:1fr 1fr}
  .kpi--6{grid-template-columns:repeat(2,1fr)}
  .pf{padding:0 8px}
  /* No celular quem troca de projeto e o dedo, arrastando para o lado.
     As setas saem: ocupavam espaco e nao sao o gesto natural aqui. */
  .pf__nav{display:none}
  .pf__dots{margin-top:22px}
  .pf__item{touch-action:pan-y}
  /* celular um pouco menor para sobrar respiro nas laterais */
  .pf__moldura{width:290px;padding:10px;border-radius:42px}
  .pf__moldura::after{top:20px;width:76px;height:21px}
  .pf__tela{width:270px;height:585px;border-radius:32px}
  .pf__tela iframe{transform:scale(.6923)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .rot>span{opacity:1;transform:none;animation:none}
  .rot>span:not(:first-child){display:none}
}