/* ==========================================================================
   ZUPY SITES — folha de estilo única
   --------------------------------------------------------------------------
   DIREÇÃO: a mesma da landing da Zupy (staging.adonaimidias.com.br/site).

   Fui medir a referência em vez de reconstruir de memória. Ela tem 18
   seções: 14 CLARAS e 4 escuras. O escuro é pontuação, não base — entra
   no herói, no bloco de estrutura, no CTA final e no rodapé.

   O vocabulário é este, e ele é curto de propósito:
     · fundo off-white quente, alternando com branco puro
     · cartão branco, borda de 1px, canto de 14px, SEM sombra
     · ícone num quadradinho verde-claro
     · abertura de seção CENTRALIZADA: eyebrow, título grande, apoio
     · barra superior sempre verde-escura, mesmo sobre conteúdo claro

   MOBILE FIRST DE VERDADE. Tudo fora de @media é o layout do celular.
   Larguras conferidas: 320, 360, 375, 390, 414, 430, 768, 1024, 1440.
   ========================================================================== */

:root{
  --v-100:#d2f8cc;
  --v-200:#a9f1a0;
  --v-400:#2be10f;
  --v-500:#24bf0f;
  --v-700:#1a7111;

  --escuro:#042723;
  --escuro-alto:#0a3630;
  --offwhite:#fdffe9;
  --tx-esc:#a9bcb2;
  --linha-esc:rgba(253,255,233,.10);

  /*
    PARADOXO DO VERDE — duas variáveis que não se trocam.
    O verde elétrico só tem contraste como PREENCHIMENTO, com texto escuro
    por cima (9:1). Como cor de texto sobre branco dá 1.7:1 e some.
    Trocar um pelo outro quebra a leitura sem quebrar o layout, que é o
    pior tipo de erro: parece que está tudo certo.
  */
  --primaria:#2be10f;
  --primaria-hover:#24bf0f;
  --primaria-texto:#042723;
  --acento:#1a7111;
  --acento-suave:#e0f8dc;

  --sup:#fcfcf6;        /* fundo da página */
  --sup-alta:#ffffff;   /* cartões e seções brancas */
  --sup-creme:#fdffe9;  /* faixa alternada */
  --tx:#18201c;
  --tx-fraco:#5e6763;
  --borda-fina:#e3e8e5;
  --borda:#cad1ce;

  --r-sm:10px;
  --r:14px;
  --r-g:20px;

  --t-h1:clamp(2.125rem,8.6vw,3rem);
  --t-h2:clamp(1.625rem,6.4vw,2.375rem);
  --t-h3:1.0625rem;

  --gut:20px;
  --sec-y:clamp(64px,12vw,112px);
  --cab-h:60px;
}

/* --------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--cab-h) + 16px)}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:1rem;line-height:1.6;color:var(--tx);background:var(--sup);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:6px}

.pular{position:absolute;left:-9999px;top:0;z-index:200;background:var(--v-400);color:var(--primaria-texto);padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:700}
.pular:focus{left:0}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--gut)}
.wrap--estreito{max-width:760px}

/* --------------------------------------------------------- seções */
.sec{position:relative;padding-block:var(--sec-y);background:var(--sup);color:var(--tx)}
.sec--branco{background:var(--sup-alta)}
.sec--creme{background:var(--sup-creme)}
.sec--escuro{background:var(--escuro);color:var(--offwhite);overflow:hidden}

/*
  ABERTURA DE SEÇÃO CENTRALIZADA — é o gesto que mais define a
  referência. Eyebrow curto, título grande, uma linha de apoio. Tudo no
  eixo, com bastante ar em volta.
*/
.sec__cab{max-width:660px;margin:0 auto 40px;text-align:center}
.sec__cab h2{font-size:var(--t-h2);line-height:1.14;letter-spacing:-.03em;font-weight:800}
.sec__sub{margin-top:14px;color:var(--tx-fraco);font-size:1.0625rem;line-height:1.6}
.sec--escuro .sec__sub{color:var(--tx-esc)}
.sec__cta{margin-top:40px;text-align:center}

.eyebrow{
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acento);margin-bottom:14px;
}
.sec--escuro .eyebrow,.eyebrow--luz{color:var(--v-400)}
.destaque{color:var(--v-400)}

/* --------------------------------------------------------- botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:13px 24px;border-radius:var(--r);font-weight:700;font-size:.9375rem;line-height:1.2;text-align:center;transition:transform .16s ease,background .16s ease,border-color .16s ease}
.btn--g{width:100%}
.btn--pri{background:var(--primaria);color:var(--primaria-texto)}
.btn--pri:hover{background:var(--primaria-hover);transform:translateY(-1px)}
.btn--fan{background:var(--sup-alta);color:var(--tx);border:1px solid var(--borda)}
.btn--fan:hover{border-color:var(--acento);color:var(--acento)}
.sec--escuro .btn--fan,.hero .btn--fan{background:rgba(253,255,233,.06);color:var(--offwhite);border-color:rgba(253,255,233,.22)}
.sec--escuro .btn--fan:hover,.hero .btn--fan:hover{background:rgba(253,255,233,.12);border-color:rgba(253,255,233,.45);color:var(--offwhite)}
.btn:active{transform:translateY(0)}

/* --------------------------------------------------------- logo */
.logo{display:inline-flex;align-items:center;gap:9px}
.logo__mark{width:30px;height:30px;flex:0 0 auto;border-radius:8px}
.logo__nome{font-size:1.0625rem;font-weight:800;letter-spacing:.03em}
.logo__badge{font-size:.6875rem;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:999px;background:rgba(43,225,15,.14);color:var(--v-400);border:1px solid rgba(43,225,15,.28)}

/* --------------------------------------------------------- header */
/* Barra sempre verde-escura, inclusive sobre conteúdo claro. É o que
   ancora a marca no topo e evita o cabeçalho branco genérico. */
.cab{position:sticky;top:0;z-index:100;background:var(--escuro);color:var(--offwhite);border-bottom:1px solid rgba(253,255,233,.06)}
.cab__in{display:flex;align-items:center;justify-content:space-between;height:var(--cab-h)}
.burger{width:44px;height:44px;display:grid;place-content:center;gap:5px;margin-right:-8px}
.burger span{display:block;width:22px;height:2px;background:var(--offwhite);border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav{position:fixed;inset:var(--cab-h) 0 auto 0;background:var(--escuro);border-bottom:1px solid var(--linha-esc);padding:8px var(--gut) 20px;display:flex;flex-direction:column;transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s;max-height:calc(100dvh - var(--cab-h));overflow-y:auto}
.nav.is-open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
.nav a{padding:14px 4px;font-weight:600;border-bottom:1px solid var(--linha-esc);color:var(--offwhite)}
.nav a:last-of-type{border-bottom:0}
.nav__cta{margin-top:14px;border-bottom:0!important;padding:13px 22px!important;color:var(--primaria-texto)!important}
.veu{position:fixed;inset:0;background:rgba(4,39,35,.5);z-index:90;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* --------------------------------------------------------- malha */
/* Grade discreta, só nas seções escuras. Sutil de propósito: quando ela
   aparece demais, a seção deixa de ser fundo e vira ilustração. */
.malha{
  position:absolute;inset:0;pointer-events:none;opacity:.9;
  background-image:linear-gradient(rgba(43,225,15,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(43,225,15,.05) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(115% 78% at 50% 0%,#000 28%,transparent 78%);
  mask-image:radial-gradient(115% 78% at 50% 0%,#000 28%,transparent 78%);
}
.malha--centro{
  -webkit-mask-image:radial-gradient(75% 100% at 50% 50%,#000 12%,transparent 72%);
  mask-image:radial-gradient(75% 100% at 50% 50%,#000 12%,transparent 72%);
}
.brilho{display:none}

/* --------------------------------------------------------- hero */
/* Centralizado, como o da Zupy. */
.hero{position:relative;overflow:hidden;background:var(--escuro);color:var(--offwhite);padding-block:56px 64px;text-align:center}
.hero__in{position:relative}
.hero__txt{max-width:760px;margin-inline:auto}
.badge{display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--v-400);margin-bottom:20px}
.hero h1{font-size:var(--t-h1);line-height:1.1;letter-spacing:-.035em;font-weight:800;margin-bottom:20px}
.lead{color:var(--tx-esc);font-size:1.0625rem;line-height:1.62;margin:0 auto 26px;max-width:52ch}

.preco-hero{font-size:1.0625rem;color:#cfe0d5}
.preco-hero strong{font-size:2.125rem;font-weight:800;color:var(--offwhite);letter-spacing:-.035em}
.preco-hero span{color:#8ba09a}
.preco-hero__nota{font-size:.875rem;color:#8ba09a;margin-top:4px}

.hero__ctas{display:flex;flex-direction:column;gap:10px;margin:28px 0 24px}
/* Chips com check, como os do herói da referência. */
.micro{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.micro li{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;color:#cfe0d5;padding:8px 14px;border-radius:999px;background:rgba(253,255,233,.05);border:1px solid rgba(253,255,233,.12)}
.micro li::before{content:"";width:11px;height:6px;border-left:2px solid var(--v-400);border-bottom:2px solid var(--v-400);transform:rotate(-45deg) translateY(-2px);flex:0 0 auto}

/* mockup */
.hero__art{position:relative;margin:44px auto 0;max-width:520px}
.brw{background:var(--sup-alta);border:1px solid rgba(253,255,233,.14);border-radius:var(--r);overflow:hidden;box-shadow:0 24px 60px rgba(2,20,18,.45);text-align:left}
.brw__bar{display:flex;align-items:center;gap:5px;padding:10px 13px;background:var(--sup-creme);border-bottom:1px solid var(--borda-fina)}
.brw__bar i{width:8px;height:8px;border-radius:50%;background:var(--borda)}
.brw__url{margin-left:8px;font-size:.6875rem;color:var(--tx-fraco);background:var(--sup-alta);padding:3px 10px;border-radius:999px;border:1px solid var(--borda-fina)}
.brw__body{padding:16px;background:var(--sup-alta)}
.sk{border-radius:6px;background:#eef1ed}
.sk--nav{display:flex;align-items:center;gap:8px;background:none;margin-bottom:16px}
.sk--nav b{width:26px;height:9px;border-radius:4px;background:var(--v-400)}
.sk--nav u{width:24px;height:6px;border-radius:3px;background:#e3e8e5}
.sk--h1{height:15px;width:80%;margin-bottom:8px;background:#dfe4e0}
.sk--h1b{width:56%;margin-bottom:12px}
.sk--h2{height:8px;width:62%;margin-bottom:8px}
.sk--h2b{width:44%;margin-bottom:14px}
.sk--btn{height:26px;width:104px;border-radius:999px;background:var(--v-400);margin-bottom:16px}
.sk--grid{display:flex;gap:8px;background:none}
.sk--grid i{flex:1;height:44px;border-radius:8px;background:var(--sup-creme);border:1px solid var(--borda-fina)}
.sk--linhas{display:grid;gap:7px;background:none;margin-top:14px}
.sk--linhas u{height:6px;border-radius:3px;background:#eef1ed}
.sk--linhas u:nth-child(1){width:92%}
.sk--linhas u:nth-child(2){width:78%}
.sk--linhas u:nth-child(3){width:86%}
.sk--card{height:40px;border-radius:8px;background:var(--sup-creme);margin-top:10px}
.sk.sm{height:9px}
.sk--h1.sm{width:76%;height:11px}
.sk--btn.sm{height:20px;width:70px}
.fone{position:absolute;right:-6px;bottom:-14px;width:104px;background:var(--sup-alta);border:1px solid var(--borda-fina);border-radius:16px;padding:7px;box-shadow:0 18px 40px rgba(2,20,18,.42)}
.fone__tela{background:var(--sup-creme);border-radius:11px;padding:10px}
.fone__tela .sk{margin-bottom:7px;background:#e6eae4}
.pil{position:absolute;font-size:.6875rem;font-weight:600;color:var(--escuro);background:var(--offwhite);border:1px solid var(--borda-fina);padding:7px 12px;border-radius:999px;box-shadow:0 8px 20px rgba(2,20,18,.28);white-space:nowrap}
.pil::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--v-500);margin-right:7px;vertical-align:middle}
.pil--1{top:-12px;left:-6px}
.pil--2{display:none}
.pil--3{bottom:26px;left:-16px}

/* --------------------------------------------------------- faixa */
.faixa{background:var(--sup-creme);color:var(--tx);padding-block:32px;border-block:1px solid var(--borda-fina);overflow:hidden}
.faixa__t{font-size:1rem;font-weight:700;text-align:center;margin-bottom:22px;padding-inline:var(--gut)}

/* A fita rola sozinha. As máscaras laterais evitam que uma logo apareça
   ou desapareça cortada na borda da tela — sem elas o movimento parece
   um defeito de renderização em vez de uma escolha. */
.marquee{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__fita{
  --gap:38px;
  display:flex;align-items:center;gap:var(--gap);width:max-content;
  animation:desliza 46s linear infinite;
}
.marquee:hover .marquee__fita{animation-play-state:paused}
.marquee__fita li{flex:0 0 auto;display:grid;place-items:center;height:40px}
.marquee__fita img{
  height:100%;width:auto;max-width:150px;object-fit:contain;
  /* Cinza por padrão: onze logos coloridas lado a lado viram uma parede
     que disputa atenção com o texto da página. A cor volta no hover. */
  filter:grayscale(1);opacity:.55;transition:filter .25s,opacity .25s;
}
.marquee__fita img:hover{filter:none;opacity:1}
/* Não é -50% puro. A fita tem 22 itens com espaço UNIFORME entre eles,
   então metade da largura cai no meio de um espaço — e a cada volta o
   conjunto pulava meio vão para trás. Descontar --gap/2 faz o item 12
   parar exatamente onde o item 1 começou. */
@keyframes desliza{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - (var(--gap) / 2)))}
}

/* Movimento contínuo é exatamente o que dispara enjoo em quem tem
   sensibilidade vestibular. Aqui a fita para e vira lista rolável. */
@media (prefers-reduced-motion:reduce){
  .marquee__fita{animation:none;width:auto;overflow-x:auto;padding-inline:var(--gut)}
  .marquee{-webkit-mask-image:none;mask-image:none}
}
@media (min-width:768px){
  .faixa{padding-block:40px}
  .marquee__fita{--gap:56px}
  .marquee__fita li{height:46px}
}

.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) 20px;justify-content:flex-start}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:44px;padding:10px 17px;border-radius:999px;font-size:.8125rem;font-weight:600;color:var(--tx-fraco);background:var(--sup-alta);border:1px solid var(--borda-fina);transition:.16s}
.chip:hover{border-color:var(--acento);color:var(--acento)}
.chip.is-on{background:var(--escuro);border-color:var(--escuro);color:var(--offwhite)}

.modelos{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding:4px var(--gut) 8px}
.modelos::-webkit-scrollbar{display:none}
.mod{scroll-snap-align:center;background:var(--sup-alta);border:1px solid var(--borda-fina);border-radius:var(--r);overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.mod:hover{border-color:var(--v-200);transform:translateY(-2px)}
.mod[hidden]{display:none}
.mod__prev{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--escuro-alto);border-bottom:1px solid var(--borda-fina)}
.mod__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:2;transition:transform .35s}
.mod:hover .mod__foto{transform:scale(1.03)}
.mod__pe{padding:16px 16px 4px}
.mod__pe h3{font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em}
.mod__pe p{font-size:.8125rem;color:var(--tx-fraco);margin-top:3px}
/* Ocupa a largura do cartão e centraliza de verdade: `inline-flex`
   dentro de um bloco alinhava o texto à esquerda. O `justify-content`
   centra o conjunto "texto + seta" como uma coisa só. */
.mod__btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  text-decoration:none;margin:14px 16px 16px;min-height:46px;padding:0 16px;
  border-radius:var(--r-sm);font-size:.875rem;font-weight:700;letter-spacing:-.01em;
  color:var(--acento);border:1px solid var(--borda);background:var(--sup-alta);
  transition:background .18s,color .18s,border-color .18s;
}
.mod__seta{display:inline-block;transition:transform .18s}
.mod__btn:hover,.mod__btn:focus-visible{background:var(--escuro);color:var(--offwhite);border-color:var(--escuro)}
/* A seta avança no hover: diz "isto sai do site" antes do clique. */
.mod__btn:hover .mod__seta{transform:translate(2px,-2px)}
.modelos__vazio{margin-top:16px;color:var(--tx-fraco);font-size:.9375rem;text-align:center}

/* --------------------------------------------------------- clientes */
.clientes__lista{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:center}
.cliente{display:grid;place-items:center;min-height:82px;padding:16px;background:var(--sup-alta);border:1px solid var(--borda-fina);border-radius:var(--r)}
.cliente img{max-height:38px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .2s,opacity .2s}
.cliente:hover img{filter:none;opacity:1}

/* --------------------------------------------------------- segmentos */
.segs{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.segs li{padding:11px 16px;border-radius:999px;font-size:.875rem;font-weight:600;background:var(--sup-alta);border:1px solid var(--borda-fina)}
.segs__nota{margin:26px auto 0;color:var(--tx-fraco);font-size:.9375rem;max-width:560px;text-align:center}

/* --------------------------------------------------------- cartões */
/*
  O CARTÃO DA ZUPY: branco, borda de 1px, canto de 14px, SEM SOMBRA.
  A hierarquia vem do espaço e da borda. Sombra aqui deixaria a página
  com aquele aspecto de template flutuante que a referência não tem.
*/
.bens,.passos,.ints,.deps{display:grid;gap:14px}
.ben,.passo,.dep{background:var(--sup-alta);border:1px solid var(--borda-fina);border-radius:var(--r);padding:24px}

/* Quadradinho de ícone verde-claro — a marca visual dos cards da Zupy. */
.passo__n,.ints__ic{
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);
  background:var(--acento-suave);color:var(--acento);
  font-weight:800;font-size:.875rem;margin-bottom:14px;
}
.ben h3,.passo h3{font-size:var(--t-h3);font-weight:700;margin-bottom:6px;letter-spacing:-.02em}
.ben p,.passo p{color:var(--tx-fraco);font-size:.9375rem}
.ben{border-top:2px solid var(--v-400)}

/* --------------------------------------------------------- bloco escuro */
.tech{position:relative;overflow:hidden;color:var(--offwhite);background:var(--escuro);padding-block:var(--sec-y)}
.tech__in{position:relative}
.tech h2{font-size:var(--t-h2);line-height:1.14;letter-spacing:-.03em;font-weight:800;margin-bottom:30px}
.tech__itens{display:grid;gap:12px}
.tcard{background:rgba(253,255,233,.04);border:1px solid var(--linha-esc);border-radius:var(--r);padding:20px}
.tcard h3{font-size:var(--t-h3);font-weight:700;margin-bottom:6px}
.tcard p{color:var(--tx-esc);font-size:.9375rem;line-height:1.6}
/* Ícone de traço em verde elétrico. Aqui o elétrico PODE ser usado como
   cor de traço porque o fundo é escuro — é sobre branco que ele some. */
.tcard__ic{display:block;width:34px;height:34px;color:var(--v-400);margin-bottom:12px}
.tcard__ic svg{width:100%;height:100%}
.tech__cta{margin-top:26px}
.destaque-luz{color:var(--v-400)}
.so-desk{display:none}

/* Quadro da esquerda: órbitas ao fundo, pessoa recortada na frente. */
.tech__quadro{
  position:relative;display:grid;place-items:center;margin-bottom:38px;
  min-height:280px;border-radius:var(--r-g);
  background:radial-gradient(120% 90% at 50% 40%,var(--escuro-alto),var(--escuro));
  border:1px solid var(--linha-esc);overflow:hidden;
}
.tech__orb{width:min(270px,78%);height:auto}
.tech__pessoa{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  z-index:2;width:min(300px,86%);height:auto;
  filter:drop-shadow(0 18px 38px rgba(0,0,0,.5));
}

/* --------------------------------------------------------- números */
.nums{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.num{background:var(--sup-alta);border:1px solid var(--borda-fina);border-radius:var(--r);padding:24px 16px;text-align:center}
.num strong{display:block;font-size:clamp(1.75rem,8vw,2.25rem);font-weight:800;letter-spacing:-.04em;color:var(--acento);margin-bottom:8px;line-height:1}
.num p{font-size:.8125rem;color:var(--tx-fraco);line-height:1.5}

/* --------------------------------------------------------- planos */
.sec--planos{background:var(--sup-creme)}
.toggle{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--sup-alta);border:1px solid var(--borda-fina);width:100%;max-width:340px;margin:0 auto 12px}
.toggle__b{flex:1;min-height:44px;border-radius:999px;font-size:.875rem;font-weight:700;color:var(--tx-fraco);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;transition:.16s}
.toggle__b em{font-style:normal;font-size:.5625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.toggle__b.is-on{background:var(--escuro);color:var(--offwhite)}
.toggle__nota{font-size:.8125rem;color:var(--tx-fraco);margin-bottom:30px;text-align:center}

.planos{display:grid;gap:16px}
.plano{position:relative;background:var(--sup-alta);border:1px solid var(--borda-fina);border-radius:var(--r-g);padding:26px 22px;display:flex;flex-direction:column}
.plano--top{border:1.5px solid var(--v-400);padding-top:34px}
.plano__selo{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--primaria);color:var(--primaria-texto);font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 16px;border-radius:999px;white-space:nowrap}
.plano__tag{font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acento);margin-bottom:10px}
.plano__nome{font-size:1.625rem;font-weight:800;letter-spacing:-.03em;margin-bottom:8px}
.plano__desc{font-size:.9375rem;color:var(--tx-fraco);margin-bottom:22px}
.plano__preco{display:flex;align-items:baseline;gap:3px;margin-bottom:2px}
.cifra{font-size:1.125rem;font-weight:700;color:var(--tx-fraco)}
.valor{font-size:2.875rem;font-weight:800;letter-spacing:-.045em;line-height:1}
.mes{font-size:1rem;color:var(--tx-fraco);font-weight:600}
.plano__ciclo{font-size:.8125rem;color:var(--tx-fraco);margin-bottom:12px}
.plano__impl{font-size:.8125rem;color:var(--tx-fraco);background:var(--sup-creme);border:1px solid var(--borda-fina);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:20px}
.plano__cta{margin-bottom:22px}
.plano__lista{display:grid;gap:10px;border-top:1px solid var(--borda-fina);padding-top:20px}
.plano__lista li{position:relative;padding-left:26px;font-size:.9375rem;color:#39433d;line-height:1.45}
.plano__lista li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:5px;background:var(--acento-suave)}
.plano__lista li::after{content:"";position:absolute;left:5px;top:10px;width:4px;height:8px;border-right:2px solid var(--acento);border-bottom:2px solid var(--acento);transform:rotate(42deg)}
.plano__lista .tudo{font-weight:700;color:var(--tx)}
.planos__rodape{margin-top:26px;font-size:.8125rem;color:var(--tx-fraco);text-align:center}

/* --------------------------------------------------------- personalizado */
.perso{background:var(--escuro);color:var(--offwhite);border-radius:var(--r-g);padding:30px 24px;position:relative;overflow:hidden}
.perso h2{font-size:clamp(1.5rem,5.6vw,1.875rem);line-height:1.16;font-weight:800;letter-spacing:-.03em;margin-bottom:14px}
.perso__txt p{color:var(--tx-esc);font-size:.9375rem;margin-bottom:22px}
.perso__lista{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.perso__lista li{font-size:.8125rem;font-weight:600;color:#cfe0d5;padding:9px 14px;border-radius:999px;background:rgba(253,255,233,.05);border:1px solid var(--linha-esc)}

/* --------------------------------------------------------- depoimentos */
.dep__txt{font-size:.9375rem;color:#39433d;margin-bottom:18px;line-height:1.66}
.dep__quem{display:flex;align-items:center;gap:12px}
.dep__foto{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--acento-suave)}
.dep__nome strong{display:block;font-size:.9375rem}
.dep__nome span{font-size:.8125rem;color:var(--tx-fraco)}

/* --------------------------------------------------------- sobre */
.sobre__txt h2{font-size:var(--t-h2);line-height:1.14;letter-spacing:-.03em;font-weight:800;margin-bottom:18px}
.sobre__txt p{color:var(--tx-fraco);margin-bottom:16px}
.sobre__txt .btn{margin-top:10px}
.sobre__box{margin-top:36px;display:grid;gap:12px}
.sobre__linha{display:flex;align-items:center;gap:14px;background:var(--sup-alta);border:1px solid var(--borda-fina);border-radius:var(--r);padding:18px 20px}
.sobre__linha span{width:10px;height:10px;border-radius:50%;background:var(--v-400);flex:0 0 auto;box-shadow:0 0 0 4px var(--acento-suave)}
.sobre__linha p{font-weight:600;font-size:.9375rem}

/* --------------------------------------------------------- faq */
.faq{display:grid;gap:10px}
.fq{background:var(--sup-alta);border:1px solid var(--borda-fina);border-radius:var(--r);overflow:hidden;transition:border-color .16s}
.fq[open]{border-color:var(--v-200)}
.fq summary{list-style:none;cursor:pointer;padding:18px 46px 18px 20px;position:relative;font-weight:600;font-size:.9375rem;line-height:1.45}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2px solid var(--acento);border-bottom:2px solid var(--acento);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.fq[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.fq__c{padding:0 20px 20px}
.fq__c p{color:var(--tx-fraco);font-size:.9375rem}

/* --------------------------------------------------------- cta final */
.final{position:relative;overflow:hidden;text-align:center;color:var(--offwhite);background:var(--escuro);padding-block:var(--sec-y)}
.final__in{position:relative;max-width:560px;margin-inline:auto}
.final h2{font-size:var(--t-h2);font-weight:800;letter-spacing:-.03em;margin-bottom:14px;line-height:1.14}
.final p{color:var(--tx-esc);margin-bottom:30px}

/* --------------------------------------------------------- integrações */
.ints li{display:flex;flex-direction:column;background:var(--sup-alta);border:1px solid var(--borda-fina);border-radius:var(--r);padding:22px;font-weight:700;font-size:.9375rem}
.ints__ic{margin-bottom:14px}
.ints__ic svg{width:19px;height:19px}
.ints__nota{margin-top:20px;font-size:.75rem;color:var(--tx-fraco);line-height:1.6;text-align:center}

/* --------------------------------------------------------- cross-sell */
.cross{background:var(--sup-creme);color:var(--tx);padding-block:48px;border-top:1px solid var(--borda-fina)}
.cross__in{display:grid;gap:22px}
.cross h2{font-size:clamp(1.25rem,4.8vw,1.625rem);font-weight:800;letter-spacing:-.03em;line-height:1.22;margin-bottom:10px}
.cross p{color:var(--tx-fraco);font-size:.9375rem}

/* --------------------------------------------------------- footer */
.pe{background:var(--escuro);color:var(--tx-esc);padding-block:52px 0}
.pe__in{display:grid;gap:34px}
.pe .logo{color:var(--offwhite);margin-bottom:16px}
.pe__marca p{font-size:.875rem;line-height:1.6;max-width:340px;margin-bottom:16px}
.pe__zap{display:inline-block;font-weight:700;color:var(--offwhite);font-size:1.0625rem}
.pe__zap:hover{color:var(--v-400)}
.pe__nav{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pe__nav h3{font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--v-400);margin-bottom:14px}
.pe__nav li{margin-bottom:10px}
.pe__nav a{font-size:.875rem}
.pe__nav a:hover{color:var(--offwhite)}
.pe__base{display:grid;gap:6px;margin-top:40px;padding-block:22px;border-top:1px solid var(--linha-esc);font-size:.8125rem}

/* --------------------------------------------------------- flutuantes */
.zap{position:fixed;right:14px;z-index:80;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#25D366;box-shadow:0 8px 24px rgba(37,211,102,.34);transition:transform .18s,bottom .24s ease}
.zap:hover{transform:scale(1.06)}
.zap svg{width:29px;height:29px}
body.tem-barra .zap{bottom:calc(84px + env(safe-area-inset-bottom,0px))}

.barra{position:fixed;left:0;right:0;bottom:0;z-index:75;display:flex;align-items:center;gap:12px;padding:11px var(--gut) calc(11px + env(safe-area-inset-bottom,0px));background:rgba(252,252,246,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--borda-fina);transform:translateY(110%);transition:transform .26s ease}
.barra.is-on{transform:translateY(0)}
.barra__txt{font-size:.8125rem;line-height:1.3;color:var(--tx-fraco);flex:1;min-width:0}
.barra__txt strong{display:block;color:var(--tx);font-size:.9375rem}
.barra__btn{min-height:44px;padding:11px 22px;flex:0 0 auto;font-size:.875rem}

/* --------------------------------------------------------- animação */
.rev{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.rev.is-vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rev{opacity:1;transform:none}
}

/* ==========================================================================
   TABLET E DESKTOP — só adiciona
   ========================================================================== */
@media (min-width:600px){
  .hero__ctas{flex-direction:row;justify-content:center}
  .hero__ctas .btn{width:auto;min-width:210px}
  .btn--g{width:auto}
  .plano__cta{width:100%}
  .bens,.deps,.passos,.ints{grid-template-columns:repeat(2,1fr)}
  .nums{grid-template-columns:repeat(4,1fr)}
  .modelos{grid-auto-columns:46%}
  .clientes__lista{grid-template-columns:repeat(3,1fr)}
  .pil--2{display:block;top:96px;right:-18px}
}

@media (min-width:768px){
  :root{--gut:32px;--cab-h:68px}
  .burger{display:none}
  .nav{position:static;flex-direction:row;align-items:center;gap:28px;transform:none;opacity:1;visibility:visible;pointer-events:auto;background:none;border:0;padding:0;max-height:none;overflow:visible}
  .nav a{padding:0;border:0;font-size:.9375rem;font-weight:500;color:#cfe0d5}
  .nav a:hover{color:var(--offwhite)}
  .nav__cta{margin-top:0;padding:11px 20px!important;font-size:.875rem;font-weight:700}
  .veu{display:none}
  .hero{padding-block:84px 92px}
  .barra{display:none}
  body.tem-barra .zap{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .zap{right:22px;bottom:22px;width:58px;height:58px}
  .sec__cab{margin-bottom:52px}
  .modelos{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin-inline:0;padding-inline:0}
  .chips{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0;justify-content:center}
  .clientes__lista{grid-template-columns:repeat(5,1fr)}
  .planos{grid-template-columns:repeat(3,1fr);align-items:start;gap:20px}
  .plano--top{transform:scale(1.03);z-index:2}
  .perso{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:44px}
  .perso__lista{margin-top:0}
  .sobre{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  .sobre__box{margin-top:0}
  .cross__in{grid-template-columns:1.4fr auto;align-items:center;gap:32px}
  .pe__in{grid-template-columns:1.3fr 1fr}
  .pe__base{display:flex;justify-content:space-between;align-items:center}
  /* Foto à esquerda, texto à direita — como na referência. A ordem no HTML
     já é essa, então o celular empilha na sequência certa sem `order`. */
  .tech__in{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center}
  .tech__itens{grid-template-columns:repeat(2,1fr)}
   /* Sem `stretch`: a coluna de texto é bem mais alta que o desenho, e esticar
     o quadro até ela criaria um retângulo escuro quase vazio. Proporção fixa
     mantém o bloco com cara de foto — que é o que ele vai virar. */
  .tech__quadro{margin-bottom:0;min-height:0;aspect-ratio:4/5;align-self:center}
  .so-desk{display:inline}
  .hero__art{max-width:600px}
}

@media (min-width:1024px){
  :root{--gut:40px}
  .hero h1{font-size:clamp(2.75rem,4.4vw,3.5rem)}
  .hero__art{max-width:720px;margin-top:56px}
  .fone{width:132px;right:-18px;bottom:-20px}
  .pil--1{top:-16px;left:-18px}
  .pil--2{top:110px;right:-34px}
  .pil--3{bottom:24px;left:-34px}
  .bens,.ints,.passos{grid-template-columns:repeat(4,1fr)}
  .deps{grid-template-columns:repeat(3,1fr)}
  .modelos{grid-template-columns:repeat(4,1fr)}
  .sec__cab h2{font-size:clamp(2rem,2.8vw,2.5rem)}
}

@media (min-width:1440px){
  :root{--sec-y:120px}
  .wrap{max-width:1240px}
}

@media (max-width:359px){
  :root{--gut:16px}
  .valor{font-size:2.5rem}
  .modelos{grid-auto-columns:86%}
  .toggle__b{font-size:.8125rem}
  .barra__txt{font-size:.75rem}
  .barra__btn{padding:11px 16px}
}

/* ==========================================================================
   PÁGINAS LEGAIS
   ========================================================================== */
body.pagina-legal{background:var(--sup);color:var(--tx)}
.legal{padding-block:40px 72px}
.legal__volta{margin-bottom:22px}
.legal__volta a{font-size:.875rem;font-weight:600;color:var(--acento)}
.legal__volta a:hover{text-decoration:underline}
.legal h1{font-size:clamp(1.875rem,6.8vw,2.5rem);font-weight:800;letter-spacing:-.035em;line-height:1.14;margin-bottom:10px}
.legal__data{font-size:.875rem;color:var(--tx-fraco);margin-bottom:38px;padding-bottom:26px;border-bottom:1px solid var(--borda-fina)}
.legal section{margin-bottom:34px}
.legal h2{font-size:1.125rem;font-weight:700;letter-spacing:-.02em;margin-bottom:12px;padding-top:4px}
.legal p{color:#39433d;margin-bottom:12px;line-height:1.74;font-size:.9375rem}
.legal p:last-child{margin-bottom:0}
.legal strong{color:var(--tx)}
.legal em{color:var(--tx-fraco);font-size:.875rem}
.legal a{color:var(--acento);font-weight:600}
.legal a:hover{text-decoration:underline}
.legal__lista{display:grid;gap:9px;margin-bottom:14px;padding-left:2px}
.legal__lista li{position:relative;padding-left:20px;color:#39433d;line-height:1.68;font-size:.9375rem}
.legal__lista li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--v-500)}
@media (min-width:768px){
  .legal{padding-block:60px 96px}
  .legal h2{font-size:1.25rem}
}

/* ==========================================================================
   VANTAGENS — lista com ícone à esquerda, foto à direita
   --------------------------------------------------------------------------
   Formato pedido pelo proprietário, a partir de uma referência.

   Três decisões que fazem esse bloco funcionar:

   · O ÍCONE É DE TRAÇO, não preenchido. Ícone sólido em cinco itens
     seguidos vira uma coluna de manchas; o contorno deixa a lista leve e
     mantém o olho no texto, que é onde está o argumento.

   · OS ITENS SÃO SEPARADOS POR FIO, não por cartão. Cinco cartões
     empilhados dentro de outra coluna criam caixa dentro de caixa. O fio
     organiza sem acrescentar moldura.

   · A PESSOA FICA NA FRENTE DA FORMA e transborda por cima dela. É isso
     que dá profundidade — e é por isso que o arquivo precisa ser PNG
     recortado, não uma foto retangular.
   ========================================================================== */
.van__grade{display:grid;gap:44px}

.van__t{
  font-size:clamp(1.625rem,6.4vw,2.375rem);line-height:1.16;letter-spacing:-.03em;
  font-weight:800;margin-bottom:28px;
}
/* Verde escuro, não o elétrico: sobre branco o elétrico some. */
.destaque-txt{color:var(--acento)}

.vans{display:grid;gap:0;border-top:1px solid var(--borda-fina)}
.van{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--borda-fina);
}
.van__ic{
  width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:12px;background:var(--acento-suave);color:var(--acento);
}
.van__ic svg{width:26px;height:26px}
.van__txt h3{font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.van__txt p{color:var(--tx-fraco);font-size:.9375rem;line-height:1.6}
.van__txt strong{color:var(--tx);font-weight:700}
.van__cta{margin-top:28px}

/* ---- a foto e a forma verde ---- */
.van__foto{position:relative;order:-1;margin-bottom:14px;padding:14px 14px 0 0}
/* A forma fica atrás e deslocada: aparece só por duas bordas, como uma
   sombra colorida. Cobrindo os quatro lados ela vira moldura, e moldura
   verde em volta de foto puxa a atenção para a borda em vez da pessoa. */
.van__forma{
  position:absolute;top:0;right:0;width:82%;height:88%;border-radius:var(--r-g);
  background:linear-gradient(155deg,var(--v-400),var(--v-700));
  box-shadow:0 18px 60px rgba(43,225,15,.28);
}
.van__pessoa{
  position:relative;z-index:2;display:block;width:100%;height:auto;
  aspect-ratio:3/4;object-fit:cover;object-position:center top;
  border-radius:var(--r-g);
  box-shadow:0 20px 46px rgba(4,39,35,.22);
}

@media (min-width:768px){
  .van__grade{grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .van__foto{order:0;margin-bottom:0;padding:20px 20px 0 0}
  .van__forma{width:86%;height:90%}
}
@media (min-width:1024px){
  .van__grade{grid-template-columns:1fr 1fr;gap:72px}
  .van__foto{padding:26px 26px 0 0}
}

@media (min-width:1024px){
  .tech__in{gap:64px}
  .tech__quadro{min-height:520px}
  .tech__orb{width:min(380px,86%)}
}

.pe__cnpj{font-size:.75rem;color:var(--tx-esc);margin-top:6px;opacity:.85}

/* --------------------------------------------- integrações no rodapé */
.pe__ints{
  padding-block:26px;margin-bottom:6px;
  border-top:1px solid var(--linha-esc);border-bottom:1px solid var(--linha-esc);
  display:grid;gap:16px;justify-items:center;text-align:center;
}
.pe__ints-t{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--v-400)}
.pe__ints ul{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 10px}
.pe__ints li{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;
  border:1px solid var(--linha-esc);background:rgba(253,255,233,.04);
  font-size:.8125rem;font-weight:600;color:var(--offwhite);
  transition:border-color .18s,background .18s;
}
.pe__ints li:hover{border-color:rgba(43,225,15,.4);background:rgba(43,225,15,.08)}
.pe__ints svg{width:17px;height:17px;flex:0 0 auto;color:var(--v-400)}
.pe__ints-n{font-size:.6875rem;color:var(--tx-esc);max-width:62ch;line-height:1.5;opacity:.9}
/* No celular o nome sai e fica só o símbolo: cinco pastilhas com texto
   empilham em quatro linhas e o rodapé vira uma parede. */
@media (max-width:479px){
  .pe__ints li span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pe__ints li{padding:11px}
  .pe__ints svg{width:20px;height:20px}
}