/* ═══ TEMA V2 — visual novo do site inteiro (20/09/2026) ═══

   Nasceu como bloco <style id="visual-v2"> dentro da home (19/09/2026, a partir da referência que o dono enviou).

   Em 20/09/2026 o dono pediu o mesmo visual em todas as páginas e uma home menos cansativa no celular:

   o bloco virou este arquivo, ganhou o vocabulário das páginas internas e uma camada compacta.

   Carrega DEPOIS de /assets/tema-estrutura.css, por isso repete o !important dele onde precisa vencer.

   Cor só por token (color-mix sobre /assets/tokens.css); tamanho de fonte só por var(--fs-*).

   Tudo dentro de @supports color-mix: sem suporte (iOS até 16.1, Chrome/WebView até 110), vale o tema anterior.

   Undo: tirar o <link> deste arquivo das 10 páginas. */

/* ═══ HOME · VISUAL V2 (17/09/2026) ═══

   Linguagem visual a partir da referência que o dono enviou em 17/09/2026: títulos em caixa normal com a 2ª linha

   num tom apagado, rótulos pequenos em caixa normal, botões em pílula (o principal claro, o secundário escuro com

   fio), cards arredondados, faixas sem fio duro e brilho de horizonte na hero e no chamado final.

   Só CSS e só nesta página: nenhum texto, número, link ou ordem de bloco mudou.

   Vem DEPOIS do tema (/assets/tema-estrutura.css), por isso repete o !important dele onde precisa vencer.

   Cor só por token (color-mix sobre /assets/tokens.css); tamanho de fonte só por var(--fs-*).

   Tudo fica dentro de @supports color-mix: sem suporte (iOS até 16.1, Chrome/WebView até 110), a declaração com

   color-mix(var()) passa na leitura, vence a cascata e vira "unset" na hora do cálculo; os botões principais ficavam

   com texto escuro sobre fundo transparente. Com o @supports, esses navegadores mostram o visual anterior do tema, inteiro.

   Undo: apagar este bloco de estilo inteiro, id visual-v2 (ou restaurar index.html.bak-visual-v2). */

@supports (color:color-mix(in srgb,red,blue)){



/* ---------- tipografia: caixa normal, largura normal, peso médio, espaçamento negativo ---------- */

html :is(h1,h2,.cta-h){font-stretch:100%!important;font-weight:540!important;text-transform:none!important;letter-spacing:-.045em!important;line-height:1.05!important}

html h1.hx-h{font-weight:560!important;line-height:1.02!important;max-width:14.5em}

/* 2ª linha do título em linha própria, num tom apagado; na hero, um verde claro */

html body :is(.sh2,.cta-h) em{display:block;color:color-mix(in srgb,var(--t3) 88%,var(--g2))!important}

html body .hx-h em{color:color-mix(in srgb,var(--g2) 62%,var(--t1))!important}

html :is(h3,.eco-h,.vit-name,.form-card-title,.dep-name){font-weight:600!important;letter-spacing:-.02em!important}



/* ---------- rótulos: pequenos, caixa normal, tom apagado ---------- */

html :is(.stag,.cta-tag,.overline){font-size:var(--fs-sm)!important;font-weight:500!important;letter-spacing:.01em!important;text-transform:none!important;color:color-mix(in srgb,var(--t4) 85%,var(--g2))!important}

html .foot-col-title{font-size:var(--fs-sm)!important;letter-spacing:.01em!important;text-transform:none!important;color:var(--t3)!important}



/* ---------- navegação: translúcida com desfoque, sem fio até rolar, menu em caixa normal ---------- */

html #nav{background:color-mix(in srgb,var(--n1) 55%,transparent)!important;border-bottom:1px solid transparent!important;

  -webkit-backdrop-filter:blur(16px) saturate(140%)!important;backdrop-filter:blur(16px) saturate(140%)!important}

html #nav.scrolled{background:color-mix(in srgb,var(--n1) 82%,transparent)!important;border-bottom-color:color-mix(in srgb,var(--t1) 8%,transparent)!important}

html .nav-menu a{font-size:var(--fs-md);font-weight:500!important;letter-spacing:-.005em!important;text-transform:none}

html .nav-btn{padding:10px 18px}

html .nav-ham{border-radius:999px!important}



/* ---------- botões em pílula: o principal claro, o secundário escuro com fio ---------- */

html :is(.cta-btn-g,.nav-btn,.form-submit,.ck-ok){background:color-mix(in srgb,var(--t1) 92%,var(--g1))!important;color:var(--n1)!important;

  border:1px solid transparent!important;border-radius:999px!important;font-weight:600!important;letter-spacing:-.005em!important}

html :is(.cta-btn-g,.nav-btn,.form-submit,.ck-ok):hover{background:var(--t1)!important;color:var(--n1)!important;

  box-shadow:0 10px 30px -14px color-mix(in srgb,var(--t1) 55%,transparent)!important}

html :is(.cta-btn-o,.ck-rec){background:color-mix(in srgb,var(--n3) 70%,transparent)!important;color:var(--t1)!important;

  border:1px solid color-mix(in srgb,var(--t1) 20%,transparent)!important;border-radius:999px!important}

html :is(.cta-btn-o,.ck-rec):hover{background:color-mix(in srgb,var(--n4) 90%,transparent)!important;border-color:color-mix(in srgb,var(--t1) 38%,transparent)!important}

html :is(.cta-btn-g,.cta-btn-o){padding:15px 26px}

html :is(.cta-btn-g,.cta-btn-o):focus-visible{border-radius:999px!important}

@media (max-width:960px){

  html .nav-cta-mobile a{background:color-mix(in srgb,var(--t1) 92%,var(--g1))!important;color:var(--n1)!important;border-radius:999px!important}

  html .nav-cta-mobile a:hover{background:var(--t1)!important;color:var(--n1)!important}

}



/* ---------- hero: mais ar, horizonte verde embaixo, números numa fileira com fio em cima de cada um ---------- */

html .hx{position:relative;padding:clamp(40px,8.5vw,112px) 0 clamp(48px,6vw,80px);border-bottom:0;

  background:radial-gradient(90% 60% at 50% 120%,color-mix(in srgb,var(--g1) 15%,transparent),transparent 62%)}

html .hx::after{content:'';position:absolute;left:8%;right:8%;bottom:0;height:1px;pointer-events:none;

  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--g2) 40%,transparent),transparent)}

html .hx-k{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;font-size:var(--fs-body);font-weight:450;

  letter-spacing:-.005em;text-transform:none;color:color-mix(in srgb,var(--t1) 82%,var(--g2))}

html .hx-k::before{width:7px;height:7px;margin:0;border-radius:50%;background:var(--g1);box-shadow:0 0 0 4px color-mix(in srgb,var(--g1) 18%,transparent)}

html .hx-h{margin:0 auto 26px}

html .hx-cta{margin-top:34px}

html .hx-fatos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;width:min(100%,760px);

  margin:clamp(44px,6vw,72px) auto 0;padding-top:0;border-top:0}

html .hx-fatos li{align-items:flex-start;gap:4px;padding-top:16px;text-align:left;border-top:1px solid color-mix(in srgb,var(--t1) 16%,transparent)}

html .hx-fatos b{font-stretch:100%;font-weight:560;letter-spacing:-.04em;font-size:var(--fs-h2)}



/* ---------- seções: mais respiro; a faixa alternada vira um degradê suave, sem fio duro ---------- */

html .sec{padding:clamp(80px,10vw,128px) 0}

html body :is(section,div)[style*="background:var(--n2)"]{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--n2) 75%,transparent) 14%,

  color-mix(in srgb,var(--n2) 75%,transparent) 86%,transparent)!important}

html .sh2{margin-bottom:22px}

html .mt-cta{margin-top:48px;padding-top:36px;border-top:1px solid color-mix(in srgb,var(--t1) 7%,transparent)}



/* linha de Ganho: pílula centralizada; o rótulo vira uma etiqueta verde discreta */

html .sec p.ganho{width:fit-content;max-width:min(840px,100%);flex-wrap:nowrap;justify-content:flex-start;gap:12px;padding:8px 18px 8px 8px;

  text-align:left!important;font-size:var(--fs-md)!important;background:color-mix(in srgb,var(--n3) 60%,transparent);

  border:1px solid color-mix(in srgb,var(--t1) 10%,transparent);border-radius:24px}

html .sec p.ganho b{padding:5px 10px;border-radius:999px;letter-spacing:.1em;color:var(--g2);background:color-mix(in srgb,var(--g1) 16%,transparent)}



/* ---------- cards: arredondados, superfície um pouco mais clara, fio fino e brilho de 1px no topo ---------- */

html :is(.mt,.mt-col,.vit-card,.eco-card,.dep-card,.form-card,.faq-item){border-radius:22px!important;

  border:1px solid color-mix(in srgb,var(--t1) 8%,transparent)!important;background-color:color-mix(in srgb,var(--n3) 78%,transparent)!important;

  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--t1) 5%,transparent)!important}

html :is(.mt,.vit-card,.eco-card,.dep-card,.faq-item):hover{border-color:color-mix(in srgb,var(--t1) 16%,transparent)!important}

html .mt{padding:30px 28px}

html .mt-col{padding:28px}

html .mt-band{justify-content:center;padding:18px 24px;text-align:center;background:color-mix(in srgb,var(--n3) 78%,transparent);

  border:1px solid color-mix(in srgb,var(--t1) 8%,transparent);border-radius:18px}



/* Motor: rótulos com espaçamento de letra menor */

html :is(.mt-n,.mt-t){letter-spacing:.08em}



/* marcas: pílulas */

html #clientes{padding:40px 0 48px;border-top:0;border-bottom:0}

html .chip{border-radius:999px!important;background:color-mix(in srgb,var(--n3) 70%,transparent)!important;border-color:color-mix(in srgb,var(--t1) 9%,transparent)!important}

html .mq-pause{border-radius:999px;padding:6px 14px}



/* vitrine: a arte aproxima de leve no hover */

html .vit-img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}

html .vit-card:hover .vit-img{transform:scale(1.04)}

html .vit-tag{font-weight:500!important;letter-spacing:.02em!important;text-transform:none!important}



/* soluções: ícone numa caixa arredondada, etiquetas em pílula */

html .eco-card{padding:32px}

html .eco-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;

  background:color-mix(in srgb,var(--n4) 90%,transparent);border:1px solid color-mix(in srgb,var(--t1) 9%,transparent)}

html .eco-ic svg{width:22px;height:22px}

html .eco-n{letter-spacing:.04em!important}

html .eco-tag{padding:4px 11px;border-radius:999px!important}



/* depoimentos: sem a barra lateral, avatar redondo */

html .dep-card{padding:28px}

html .dep-card::before{display:none}

html .dep-av{border-radius:50%}



/* formulário: campos e opções arredondados */

html .form-card{padding:clamp(24px,4vw,40px)}

html :is(.fg input,.fg select,.ro){border-radius:12px!important}

html .form-submit{padding:16px}



/* chamado final: brilho no alto e fio de horizonte, sem a borda dura */

html #cta{padding:clamp(96px,12vw,160px) 0;border-top:0!important;

  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--g2) 32%,transparent),transparent) 50% 0/84% 1px no-repeat,

    radial-gradient(70% 55% at 50% 0%,color-mix(in srgb,var(--g1) 11%,transparent),transparent 70%)!important}

html .cta-h{max-width:18em;margin-left:auto;margin-right:auto}



/* rodapé e aviso de cookies */

html footer{background:transparent!important;border-top:1px solid color-mix(in srgb,var(--t1) 7%,transparent)!important}

/* card flutuante da largura do conteúdo (1180 - 2x24), fundo sólido; no celular volta à largura total, colado no pé,

   para não ficar mais alto que o aviso antigo e cobrir o botão principal da hero */

html #cookies{left:12px;right:12px;bottom:12px;max-width:1132px;margin:0 auto;border-radius:20px;

  border:1px solid color-mix(in srgb,var(--t1) 12%,transparent)!important;background:var(--n2)!important;

  box-shadow:0 24px 60px -20px color-mix(in srgb,var(--n1) 80%,transparent)}

@media (max-width:600px){ html #cookies{left:0;right:0;bottom:0;border-width:1px 0 0!important;border-radius:20px 20px 0 0} }



/* ---------- telas menores ---------- */

@media (max-width:960px){ html .hx-fatos b{font-size:var(--fs-h1-sm)} }

@media (max-width:600px){

  html h1.hx-h{font-size:var(--fs-h2)!important}

  /* o título de 40px deixa a hero mais alta que a antiga; 10px a menos de respiro para o aviso de cookies não cobrir o rótulo do botão */

  html .hx-k{margin-bottom:22px} html .hx-h{margin-bottom:22px} html .hx-cta{margin-top:28px}

  html body :is(h2,.cta-h){font-size:var(--fs-h1-sm)!important}

  html .hx-fatos{gap:0 14px}

  html .mt{padding:24px 20px}

  html .mt-col{padding:22px 18px}

  html .eco-card,html .dep-card{padding:24px}

}

/* abaixo de 375px: o mesmo respiro menor da hero de antes (o aviso de cookies não pode cobrir os botões) */

@media (max-width:374px){ html .hx{padding-top:24px} html .hx-k{margin-bottom:10px} html .hx-h{margin-bottom:12px} html .hx-cta{margin-top:16px} }



/* ---------- páginas internas: o mesmo tratamento para o vocabulário que só existe fora da home ---------- */

/* cards */

html :is(.card,.ccard,.pl,.cond,.st-b,.pr-i,.cat,.step,.tool,.p-card,.pq-card,.dv,.pn,.rvm-box,.term,.gate-box,.price-card,.leg-aviso,.faq details){

  border-radius:22px!important;border:1px solid color-mix(in srgb,var(--t1) 8%,transparent)!important;

  background-color:color-mix(in srgb,var(--n3) 78%,transparent)!important;

  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--t1) 5%,transparent)!important}

html :is(.card,.ccard,.pl,.st-b,.pr-i,.cat,.step,.tool,.p-card,.pq-card,.dv):hover{border-color:color-mix(in srgb,var(--t1) 16%,transparent)!important}

html .cond{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}

html .cond>div{border-bottom-color:color-mix(in srgb,var(--t1) 8%,transparent)!important}

/* etiquetas e filtros viram pílula */

html :is(.fbtn,.e-chip,.c-tag,.c-st,.micro li,.tags li,.eco-tag,.sv-p b){border-radius:999px!important}

html :is(.fbtn,.e-chip){padding:8px 14px!important}

html .fbtn.on{background:color-mix(in srgb,var(--t1) 92%,var(--g1))!important;border-color:transparent!important;color:var(--n1)!important}

/* botões das páginas internas seguem os da home */

html :is(.btn-g,.btn-h,.form-submit){background:color-mix(in srgb,var(--t1) 92%,var(--g1))!important;color:var(--n1)!important;

  border:1px solid transparent!important;border-radius:999px!important;font-weight:600!important}

html :is(.btn-g,.btn-h,.form-submit):hover{background:var(--t1)!important;color:var(--n1)!important}

html :is(.btn-o,.p-copy,.have-code){background:color-mix(in srgb,var(--n3) 70%,transparent)!important;color:var(--t1)!important;

  border:1px solid color-mix(in srgb,var(--t1) 20%,transparent)!important;border-radius:999px!important}

/* títulos de página e rótulos das internas */

html :is(.sh1,.e-h){font-stretch:100%!important;font-weight:560!important;text-transform:none!important;letter-spacing:-.045em!important;line-height:1.05!important}

html body :is(.sh1,.e-h) em{color:color-mix(in srgb,var(--g2) 62%,var(--t1))!important}

html :is(.eyebrow,.cat-t,.sv-t,.st-t,.lbl,.c-st){text-transform:none!important;letter-spacing:.02em!important}

html :is(.c-name,.pr-h,.met-h,.tool-nm,.pq-h,.eco-h,.dv-n){font-weight:600!important;letter-spacing:-.02em!important}

/* páginas legais e FAQ */

html .faq details{padding:0 22px!important}

html .faq summary{padding:18px 0!important}

html .leg-topo{border-bottom-color:color-mix(in srgb,var(--t1) 8%,transparent)!important}



/* ---------- compacto: menos respiro, primeiro no celular (decisão do dono em 20/09/2026) ---------- */

html .sec{padding:clamp(56px,7vw,104px) 0}

html #cta{padding:clamp(64px,9vw,124px) 0}

html .sh2{margin-bottom:18px}

html .sp{margin-bottom:34px}

@media (max-width:900px){

  html .sec{padding:56px 0}

  html #clientes{padding:32px 0 36px}

  html .sp{font-size:var(--fs-md);margin-bottom:26px;line-height:1.6}

  html .sec p.ganho{padding:6px 14px 6px 6px;font-size:var(--fs-sm)!important;margin:14px auto 24px!important}

  html :is(.eco-card,.dep-card,.mt,.mt-col,.ccard,.pl,.st-b,.pr-i,.cat,.step,.tool,.p-card,.pq-card){padding:20px!important}

  html :is(.eco-grid,.mtd-grid,.plh-grid,.vit-grid,.cases-grid,.dep-grid8,.mt-grid,.mt-ent){gap:12px}

  html .eco-card{gap:10px}

  html .eco-ic{width:40px;height:40px;border-radius:12px}

  html .eco-ic svg{width:20px;height:20px}

  html .faq-item summary{padding:14px 0}

  html .faq-item p{padding-bottom:16px}

  html .mt-cta{margin-top:28px;padding-top:24px}

  html .hx-fatos{margin-top:32px}

}

/* até 700px os cards curtos viram linha (ícone à esquerda, texto à direita): mesma informação, metade da altura */
@media (max-width:700px){
  html .eco-card{display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 12px;padding:14px 16px!important}
  html .eco-card .eco-ic{grid-column:1;grid-row:1/span 2;width:36px;height:36px;border-radius:10px;margin-top:2px}
  html .eco-card .eco-ic svg{width:18px;height:18px}
  html .eco-card :is(.eco-n,.eco-h,.eco-p,.eco-tags,.eco-cta){grid-column:2}
  html .eco-card .eco-n{font-size:var(--fs-2xs)}
  html .eco-card .eco-h{font-size:var(--fs-body)}
  html .eco-card .eco-p{font-size:var(--fs-sm);line-height:1.45;margin-top:0}
  html .eco-card .eco-tags{gap:4px}
  html .eco-card .eco-tag{font-size:var(--fs-2xs);padding:3px 8px}
  html :is(.mtd-grid,.plh-grid) .mt{padding:14px 16px!important}
  html :is(.mtd-grid,.plh-grid) .mt h3{font-size:var(--fs-body);margin-bottom:4px}
  html :is(.mtd-grid,.plh-grid) .mt p{font-size:var(--fs-sm);line-height:1.45}
  html :is(.mtd-grid,.plh-grid) .mt .mt-n{margin-bottom:6px}
  html .plh-grid .plh-v{margin-bottom:2px}
}
/* até 560px o card de produto vira linha com miniatura: a mesma informação ocupa um terço da altura */

@media (max-width:560px){

  html :is(#vitrine,.cases-grid) .vit-card{display:grid!important;grid-template-columns:92px minmax(0,1fr);

    grid-auto-rows:min-content;align-items:start;gap:4px 14px;padding:14px!important}

  html :is(#vitrine,.cases-grid) .vit-img{grid-row:1/5;width:92px;height:92px;max-width:none;margin:0;

    border-radius:14px;border:1px solid color-mix(in srgb,var(--t1) 8%,transparent);aspect-ratio:1/1;object-fit:cover}

  html :is(#vitrine,.cases-grid) :is(.vit-tag,.vit-name,.vit-p,.vit-cta){grid-column:2}

  html :is(#vitrine,.cases-grid) .vit-p{font-size:var(--fs-sm);line-height:1.5}

  html .vit-mais-card{padding:16px!important}

  html .vit-mais-card .vit-p{grid-column:1/-1}

}

@media (max-width:480px){

  html body :is(h2,.cta-h){font-size:var(--fs-h2-sm)!important}

  html .sec{padding:48px 0}

}

} /* fim do @supports color-mix */