/* ============================================================
   PRÓXIMO NÍVEL ADS — site institucional
   Componentes copiados de design-system/design-system.html v2.0
   Tokens em design-tokens.css (carregar antes deste arquivo)
   PERFORMANCE. FROM CLICK TO CASH.
   ============================================================ */

/* ---------- FONTES SELF-HOSTED (variable, subset latin) ---------- */
@font-face{
  font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/Sora-latin-var.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/Inter-latin-var.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/JetBrainsMono-latin-var.woff2') format('woff2');
}

/* Fontes de reserva com métrica corrigida, uma por faixa de peso.
   Enquanto a Sora e a Inter não chegam, o texto é desenhado com a Arial local
   ESTICADA para a largura exata da fonte real naquele peso: a linha quebra no
   mesmo lugar, o bloco tem a mesma altura, e a troca não empurra nada. Foi o
   que zerou o CLS que a troca de fonte estava produzindo.

   A face de reserva NÃO sintetiza negrito, então a base de todas as faixas é a
   Arial regular e cada faixa carrega o seu próprio fator. Um fator só, medido
   no peso 400, deixava a H1 (peso 800) 1,1% estreita, e 1,1% numa H1 de quatro
   linhas é uma linha a mais quando a fonte real entra. */
@font-face{
  font-family:'Sora reserva';font-style:normal;font-weight:400 500;
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');
  size-adjust:112.3%;ascent-override:86.4%;descent-override:25.8%;line-gap-override:0%;
}
@font-face{
  font-family:'Sora reserva';font-style:normal;font-weight:600 700;
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');
  size-adjust:113.6%;ascent-override:85.4%;descent-override:25.5%;line-gap-override:0%;
}
@font-face{
  font-family:'Sora reserva';font-style:normal;font-weight:800 900;
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');
  size-adjust:114.5%;ascent-override:84.7%;descent-override:25.3%;line-gap-override:0%;
}
@font-face{
  font-family:'Inter reserva';font-style:normal;font-weight:400 500;
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');
  size-adjust:106.2%;ascent-override:91.2%;descent-override:22.7%;line-gap-override:0%;
}
@font-face{
  font-family:'Inter reserva';font-style:normal;font-weight:600 700;
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');
  size-adjust:108.6%;ascent-override:89.2%;descent-override:22.2%;line-gap-override:0%;
}

/* ---------- 1. RESET E BASE ---------- */
*{box-sizing:border-box}
/* Altura medida do header. Constante de layout, não token de design: como o
   header é fixo e não ocupa espaço no fluxo, é este valor que reserva o lugar
   do conteúdo e alinha o salto das âncoras. */
:root{--header-h:61px}
@media(max-width:900px){:root{--header-h:69px}}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);
  overflow-x:hidden;scrollbar-gutter:stable}
body{margin:0;font-family:var(--font-body);color:var(--ink-800);background:var(--white);
  -webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--pn-orange-600);outline-offset:2px;border-radius:2px}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--ink-900);margin:0;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0}
code,.mono{font-family:var(--font-mono)}
main{display:block}

.skip-link{position:absolute;left:-9999px;top:0;z-index:var(--z-toast);background:var(--pn-blue-900);
  color:#fff;padding:14px 22px;border-radius:0 0 var(--r-md) 0;font-weight:600;font-size:14px;text-decoration:none}
.skip-link:focus{left:0}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;padding:0;margin:-1px}

/* ---------- 2. LAYOUT ---------- */
.container{width:100%;min-width:0;max-width:var(--container);margin:0 auto;padding:0 var(--sp-5)}
.container-wide{max-width:var(--container-wide);margin:0 auto;padding:0 var(--sp-5)}
.section{padding:var(--sp-9) 0}
.section.tinted{background:var(--pn-blue-50)}
.section.dark{background:var(--ink-900);color:#fff}
.section.dark h2,.section.dark h3,.section.dark h4{color:#fff}
.section.dark .section-desc{color:rgba(255,255,255,.66)}
.section:is(.blue-deep,.steel,.royal,.ember){background:var(--grad-brand-deep);color:#fff}
.section.steel{background:var(--grad-sec-steel)}
.section.royal{background:var(--grad-sec-royal)}
.section.ember{background:var(--grad-sec-ember)}
/* Seções claras com cor: mesma paleta, sem custo de contraste. */
.section.azure{background:var(--grad-sec-azure)}
.section.warm{background:var(--grad-sec-warm)}
/* Fio de acento no topo da seção: assinatura discreta, um por seção. */
.section.fio-acento{position:relative}
.section.fio-acento::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-accent)}
.section:is(.blue-deep,.steel,.royal,.ember) h2,.section:is(.blue-deep,.steel,.royal,.ember) h3,.section:is(.blue-deep,.steel,.royal,.ember) h4{color:#fff}
.section:is(.blue-deep,.steel,.royal,.ember) .card h2,.section:is(.blue-deep,.steel,.royal,.ember) .card h3,.section:is(.blue-deep,.steel,.royal,.ember) .card h4{color:var(--ink-900)}
.section:is(.blue-deep,.steel,.royal,.ember) .card>p,.section:is(.blue-deep,.steel,.royal,.ember) .quote-card p{color:var(--ink-600)}
.section:is(.blue-deep,.steel,.royal,.ember) .quote-card .person b{color:var(--ink-900)}
.section:is(.blue-deep,.steel,.royal,.ember) .section-desc{color:rgba(255,255,255,.7)}
.section:is(.blue-deep,.steel,.royal,.ember) .stat-card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.section:is(.blue-deep,.steel,.royal,.ember) .stat-card:hover{border-color:var(--pn-orange-300);background:rgba(255,255,255,.11)}
.section:is(.blue-deep,.steel,.royal,.ember) .stat-value{color:#fff}
.section:is(.blue-deep,.steel,.royal,.ember) .counter{color:#fff}
.section:is(.blue-deep,.steel,.royal,.ember) .stat-label{color:rgba(255,255,255,.68)}
/* Timeline e tabela dentro de seção escura: o corpo default é ink-500 e sumiria no fundo azul */
.section:is(.blue-deep,.steel,.royal,.ember) .tl-body p{color:rgba(255,255,255,.78)}
.section:is(.blue-deep,.steel,.royal,.ember) .tl-dot{background:rgba(255,255,255,.1);border-color:var(--pn-orange-500);color:#fff}
.section:is(.blue-deep,.steel,.royal,.ember) .table-wrap{border-color:rgba(255,255,255,.18)}
.section:is(.blue-deep,.steel,.royal,.ember) .table th{background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);border-bottom-color:rgba(255,255,255,.25)}
.section:is(.blue-deep,.steel,.royal,.ember) .table td{color:rgba(255,255,255,.85);border-bottom-color:rgba(255,255,255,.14)}
.section:is(.blue-deep,.steel,.royal,.ember) .table tbody tr:hover{background:rgba(255,255,255,.06)}
.section:is(.blue-deep,.steel,.royal,.ember) .table-comparativo tbody th{color:#fff;border-bottom-color:rgba(255,255,255,.14)}
.section-head{max-width:760px;margin-bottom:var(--sp-7)}
.section-head.centered{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pn-orange-800);margin:0 0 var(--sp-3)}
/* orange-700 dá 3,5:1 sobre a seção azure, abaixo do piso de 4,5:1 para texto
   de 12px. O eyebrow é pequeno e em caixa alta, então usa o tom seguinte da
   própria paleta. Sobre fundo escuro a relação se inverte e o claro é que vale. */
.section:is(.blue-deep,.steel,.royal,.ember) .eyebrow,.hero-full .eyebrow{color:var(--pn-orange-500)}
/* steel e royal terminam em azul MÉDIO (steel-600 e blue-600), não em blue-900:
   ali o orange-500 cai para 3,9:1 e reprova o piso de 4,5:1 para 12px. Sobe um
   tom na própria paleta. Sobre blue-900 o orange-500 dá 7:1 e continua valendo. */
.section:is(.steel,.royal) .eyebrow{color:var(--pn-orange-300)}
.section-title{font-size:clamp(23px,2.6vw,28px);font-weight:700;margin-bottom:var(--sp-3);line-height:1.15}
.section-desc{font-size:16px;color:var(--ink-500);line-height:1.65;margin:0}
.sub-title{font-size:18px;font-weight:600;margin:0 0 var(--sp-4);
  padding-bottom:var(--sp-2);border-bottom:2px solid var(--pn-orange-600);display:inline-block}

/* ---------- TIPOGRAFIA DE PÁGINA (escala calibrada, não aumentar) ---------- */
.h1-hero{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4vw,46px);
  /* em, e não ch: ch é a largura do glifo "0" da fonte em uso, então a caixa
     encolhe enquanto a Sora não chega e a H1 ganha duas linhas. 12,63em é o
     mesmo 18ch da Sora, medido, e não muda com a fonte. */
  line-height:1.08;letter-spacing:-.02em;max-width:12.63em}
.h1-page{font-family:var(--font-display);font-weight:700;font-size:34px;line-height:1.15;letter-spacing:-.01em}
.h4{font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1.3}
.body-l{font-size:18px;line-height:1.6}
.body-m{font-size:16px;line-height:1.6}
/* ---------- Print real do produto ----------
   width/height no HTML + height:auto aqui = proporção travada e CLS zero.
   A moldura escura evita o print do dashboard "flutuar" solto sobre a seção. */
.print-produto{margin:var(--sp-7) 0 0;max-width:960px}
.print-produto img{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px -24px rgba(4,0,128,.55)}
.section .print-produto img{border-color:var(--ink-100)}
@media(max-width:760px){.print-produto{margin-top:var(--sp-6)}}

/* Âncora nomeada dentro de seção que já tem id obrigatório de tracking.
   O deslocamento do header vem do scroll-padding-top declarado no <html>. */
.anchor-alvo{display:block;height:0;overflow:hidden}
/* Rótulo só para leitor de tela (campo de busca com placeholder visível) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Busca da Central de Ajuda ---------- */
.busca-resultados{margin-top:var(--sp-4);max-width:620px;background:#fff;border-radius:var(--r-lg);
  border:1px solid var(--ink-100);box-shadow:var(--shadow-xl);overflow:hidden}
.busca-item{display:block;padding:14px 18px;text-decoration:none;border-bottom:1px solid var(--ink-100);
  transition:background var(--dur-base)}
.busca-item:last-child{border-bottom:none}
.busca-item:hover,.busca-item:focus-visible{background:var(--pn-blue-50)}
.busca-item b{display:block;font-size:14.5px;font-weight:600;color:var(--pn-blue-900);margin-bottom:3px}
.busca-item span{display:block;font-size:13px;color:var(--ink-500);line-height:1.5}
.busca-item em{display:block;margin-top:6px;font-family:var(--font-mono);font-style:normal;
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--pn-orange-700)}
.busca-vazio{padding:18px;font-size:13.5px;color:var(--ink-600);margin:0}
.busca-vazio a{color:var(--pn-blue-900);font-weight:600}
/* Ressalva / letra menor: usada nas garantias, condições comerciais e notas de honestidade */
.fine-print{font-size:13px;line-height:1.6;color:var(--ink-500);margin-top:var(--sp-5);max-width:820px}
.section:is(.blue-deep,.steel,.royal,.ember) .fine-print,.section.dark .fine-print{color:rgba(255,255,255,.7)}
.data-l{font-family:var(--font-mono);font-size:32px;font-weight:700;color:var(--pn-blue-900);line-height:1.1}
.data-m{font-family:var(--font-mono);font-size:16px;font-weight:500}
@media(max-width:640px){.h1-hero{font-size:clamp(26px,7vw,34px)}}

.grid{display:grid;gap:var(--sp-5)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
/* Item que ocupa duas colunas. Precisa voltar a uma quando a grade colapsa,
   senão o span cria uma coluna implícita de 0px na grade de coluna única. */
.span-2{grid-column:span 2}
@media(max-width:640px){.span-2{grid-column:auto}}
/* Mosaico estilo "bento": primeiro item em destaque, mais largo */
.grid-mosaic-3{grid-template-columns:1.4fr 1fr 1fr}

/* ---------- 3. BOTÕES ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);
  font-weight:600;font-size:15px;border-radius:var(--r-md);padding:12px 22px;border:none;cursor:pointer;
  text-decoration:none;line-height:1;position:relative;overflow:hidden;min-height:44px;
  transition:background var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-primary{background:var(--pn-blue-900);color:#fff}
.btn-primary:hover{background:var(--pn-blue-800);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-primary:active{transform:translateY(0);box-shadow:var(--shadow-sm)}
.btn-accent{background:var(--pn-orange-600);color:#fff}
.btn-accent:hover{background:var(--pn-orange-700);transform:translateY(-2px);box-shadow:var(--shadow-accent)}
.btn-accent:active{transform:translateY(0)}
.btn-outline{background:transparent;color:var(--pn-blue-900);box-shadow:inset 0 0 0 1.5px var(--pn-blue-900)}
.btn-outline:hover{background:var(--pn-blue-900);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--ink-700);padding:12px 10px}
.btn-ghost:hover{color:var(--pn-blue-900);background:var(--pn-blue-50)}
.btn-on-dark{background:#fff;color:var(--pn-blue-900)}
.btn-on-dark:hover{background:var(--pn-orange-600);color:#fff;transform:translateY(-2px)}
.btn-sm{padding:8px 16px;font-size:13px;min-height:36px}
.btn-sm svg{width:15px;height:15px}
.btn-lg{padding:16px 30px;font-size:16px}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-arrow svg{transition:transform var(--dur-base) var(--ease-out)}
.btn-arrow:hover svg{transform:translateX(4px)}
.btn-shine::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transition:left var(--dur-slow) var(--ease-out)}
.btn-shine:hover::after{left:140%}
.btn-row{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center}
.icon-btn{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--ink-150);background:#fff;cursor:pointer;color:var(--ink-700);
  transition:all var(--dur-base) var(--ease-out)}
.icon-btn:hover{border-color:var(--pn-blue-900);color:var(--pn-blue-900);background:var(--pn-blue-50);transform:scale(1.08)}
.icon-btn svg{width:18px;height:18px}

/* ---------- 4. FORMULÁRIOS ---------- */
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-700);margin-bottom:6px}
.field .hint{font-size:12px;color:var(--ink-400);margin-top:4px}
.input,.select,.textarea{width:100%;padding:11px 14px;border-radius:var(--r-sm);border:1.5px solid var(--ink-150);
  font-family:var(--font-body);font-size:15px;color:var(--ink-900);background:#fff;
  transition:border-color var(--dur-base),box-shadow var(--dur-base)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-300)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--pn-blue-600);outline:none;
  box-shadow:0 0 0 3px var(--pn-blue-100)}
.textarea{min-height:96px;resize:vertical}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2363637D' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.field.is-error .input{border-color:var(--error)}
.field.is-error .msg{color:var(--error);font-size:12px;margin-top:4px;display:flex;gap:5px;align-items:center}
.field.is-success .input{border-color:var(--success)}
.field.is-success .select,.field.is-success .textarea{border-color:var(--success)}
.field.is-error .select,.field.is-error .textarea{border-color:var(--error)}
/* O aviso nasce vazio e só ocupa altura quando tem texto: campo que reserva
   espaço para um erro que ainda não existe deixa o formulário esburacado. */
.campo-aviso{font-size:12.5px;line-height:1.45;margin:6px 0 0;color:var(--error);min-height:0}
.campo-aviso:empty{display:none}
.field.is-success .campo-aviso{color:var(--success)}
/* Botão trancado: continua visível e legível, para a pessoa saber que ele
   existe e o que falta — desaparecer seria pior do que estar desabilitado. */
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;filter:saturate(.6)}
.btn[disabled]:hover,.btn[aria-disabled="true"]:hover{transform:none;box-shadow:none}
/* Bloco, não flex: dentro do rótulo há texto solto e um link, e em flex cada
   pedaço vira um item com gap entre eles — a frase se parte em blocos assim
   que a linha quebra. Com o checkbox posicionado, a frase continua uma frase
   e o link continua inline. */
.check{display:block;position:relative;padding-left:28px;font-size:14px;line-height:1.55;
  color:var(--ink-700);cursor:pointer;margin-bottom:10px}
.check input{position:absolute;left:0;top:3px;width:18px;height:18px;
  accent-color:var(--pn-blue-900);margin:0;cursor:pointer}

/* ---------- 5. CARDS ---------- */
/* Coluna flex para que o .card-link encoste no rodapé do card e as grades fiquem alinhadas */
.card{border:1px solid var(--ink-100);border-radius:var(--r-lg);background:#fff;padding:var(--sp-6);
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out),
  box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base)}
.card-hover:hover{transform:translateY(-6px);border-color:var(--pn-blue-200);
  box-shadow:var(--shadow-lg),inset -46px -54px 90px -64px rgba(239,122,1,.4)}
.card-accent{position:relative;overflow:hidden}
.card-accent::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;
  background:var(--grad-accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-slow) var(--ease-out)}
.card-accent:hover::before{transform:scaleX(1)}
.tag{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:4px 10px;border-radius:var(--r-pill)}
.tag-orange{color:var(--pn-orange-700);background:var(--pn-orange-50)}
.tag-blue{color:var(--pn-blue-700);background:var(--pn-blue-100)}
.tag-green{color:var(--success);background:var(--success-bg)}
.tag-solid{color:#fff;background:var(--pn-orange-600)}
.card h3,.card .card-titulo{font-size:19px;margin-bottom:var(--sp-2)}
.card p{font-size:14px;color:var(--ink-500);line-height:1.6;margin:0 0 var(--sp-4)}
.card-link{font-size:14px;font-weight:600;color:var(--pn-blue-900);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;position:relative;width:fit-content;
  margin-top:auto;padding-top:var(--sp-4)}
.card-link svg{width:15px;height:15px;transition:transform var(--dur-base) var(--ease-out)}
.card-link::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;
  background:var(--pn-orange-600);transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur-base) var(--ease-out)}
.card-link:hover{color:var(--pn-orange-600)}
.card-link:hover::after{transform:scaleX(1);transform-origin:left}
.card-link:hover svg{transform:translateX(4px)}
.card-icon{width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  background:var(--pn-blue-100);color:var(--pn-blue-900);margin-bottom:var(--sp-4);
  transition:all var(--dur-base) var(--ease-spring)}
.card-icon svg{width:24px;height:24px}
.card-hover:hover .card-icon{background:var(--pn-orange-600);color:#fff;transform:rotate(-6deg) scale(1.08);
  box-shadow:0 0 0 8px rgba(239,122,1,.16)}

.stat-card{border-radius:var(--r-lg);padding:var(--sp-5);background:#fff;border:1px solid var(--ink-100);
  transition:all var(--dur-base) var(--ease-out);text-align:center}
.stat-card:hover{border-color:var(--pn-orange-300);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.stat-value{font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--pn-blue-900);line-height:1.1}
.stat-label{font-size:13px;color:var(--ink-500);margin-top:6px;line-height:1.4}

.quote-card{border-radius:var(--r-lg);padding:var(--sp-6);background:var(--pn-blue-50);
  border:1px solid var(--pn-blue-100);position:relative;transition:all var(--dur-base) var(--ease-out);height:100%}
.quote-card:hover{background:#fff;box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.quote-mark{font-family:var(--font-display);font-size:44px;line-height:.6;color:var(--pn-orange-300);
  display:block;margin-bottom:8px}
.quote-card p{font-size:15px;color:var(--ink-800);line-height:1.65;margin:0 0 var(--sp-4)}
.quote-provisorio{display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--warning);background:var(--warning-bg);
  padding:3px 9px;border-radius:var(--r-pill);margin-bottom:10px}
.person{display:flex;align-items:center;gap:12px}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--grad-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-weight:700;font-size:14px;flex-shrink:0}
.person b{display:block;font-size:13.5px;color:var(--ink-900)}
.person span{font-size:12px;color:var(--ink-500)}

/* ---------- 6. LOGOS / MARQUEE ---------- */
.logo-strip{display:flex;align-items:center;gap:var(--sp-7);flex-wrap:wrap;justify-content:center}
.logo-chip{height:38px;padding:0 22px;border-radius:var(--r-sm);background:var(--ink-50);
  display:flex;align-items:center;font-family:var(--font-display);font-weight:700;font-size:14px;
  color:var(--ink-300);filter:grayscale(1);opacity:.88;transition:all var(--dur-base) var(--ease-out)}
.logo-chip:hover{filter:grayscale(0);opacity:1;color:var(--pn-blue-900);background:var(--pn-blue-100);transform:translateY(-3px)}
/* Logo real dentro do chip: a altura manda, a largura acompanha o arquivo.
   height:auto junto com width/height no HTML mantém a proporção sem gerar CLS. */
.logo-chip img{height:22px;width:auto;max-width:100%;display:block}

/* ---- Marca de cliente no mural ----
   Sem caixa: só o logotipo sobre o fundo da seção.
   Tamanho por ÁREA, não por altura. Igualar altura deixa um logotipo largo
   (Santa Cruz, 8:1) legível e transforma um compacto (Raceville, 1,3:1) num
   selo de 29px que ninguém lê — o olho compara a área ocupada. O gerador
   calcula --f a partir da razão de cada arquivo, tomando a Santa Cruz como 1. */
.mural-marcas{--marca-base:22px}
.logo-marca{height:56px;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;filter:grayscale(1);
  transition:filter var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.logo-marca:hover{filter:grayscale(0);transform:translateY(-3px)}
.logo-marca img{height:calc(var(--f,1) * var(--marca-base));width:auto;max-width:none;display:block}
/* ---- Selo de parceria no mural ----
   "Sem fundo" aqui é o fim da NOSSA caixa branca. O fundo que cada selo
   carrega — placa branca da Meta e da Amazon, preta do Google, verde do
   Pipedrive — faz parte da arte oficial do parceiro: recortar quebraria o
   lockup da marca deles. Sem grayscale, porque selo é prova verificável.
   Tamanho por ÁREA, mesma regra do logo de cliente. */
.mural-selos{--selo-base:58px}
/* Os selos deixaram de ser marquee. Com 6 arquivos, a faixa duplicada não
   chegava a cobrir 1400px e sobrava um vão branco girando junto. Agora é o
   mesmo carrossel dos depoimentos: 3 por vez, avançando de 1 em 1, sem vão. */
.mural-selos .marquee-track{animation-duration:72s;gap:0}
.logo-selo{height:76px;display:flex;align-items:center;justify-content:center;flex:0 0 232px;
  transition:transform var(--dur-base) var(--ease-out)}
@media(max-width:900px){.logo-selo{flex-basis:196px}}
@media(max-width:640px){.logo-selo{flex-basis:150px}}
.logo-selo:hover{transform:translateY(-3px)}
.logo-selo img{height:calc(var(--f,1) * var(--selo-base));width:auto;max-width:none;display:block}
@media(max-width:900px){
  .mural-marcas{--marca-base:19px}
  .logo-marca{height:48px}
}
@media(max-width:900px){.mural-selos{--selo-base:50px}.logo-selo{height:66px}}
@media(max-width:640px){
  .logo-chip{height:34px;padding:0 16px}
  .logo-chip img{height:19px}
  .mural-marcas{--marca-base:17px}
  .logo-marca{height:44px}
  .mural-selos{--selo-base:44px}
  .logo-selo{height:58px}
}

/* ---------- 6b. CENAS (ilustração vetorial) ----------
   Painel que ocupa a coluna da direita da primeira seção nas páginas sem
   imagem real, e as miniaturas dos cartões de cenário. Toda a tinta sai de
   quatro custom properties, então a mesma cena serve fundo escuro e claro
   sem um segundo arquivo. */
.cena{position:relative;border-radius:var(--r-lg);overflow:hidden;
  --cena-forte:#fff; --cena-linha:rgba(255,255,255,.30); --cena-fraco:rgba(255,255,255,.11);
  --cena-acento:var(--pn-orange-500); --cena-ok:#3FD6A0; --cena-painel:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.045);
  backdrop-filter:blur(3px);padding:var(--sp-5)}
.cena svg{display:block;width:100%;height:auto}
/* Em seção clara a cena inverte a paleta em vez de ganhar uma segunda versão. */
.section:not(.blue-deep):not(.steel):not(.royal):not(.ember):not(.dark) .cena{
  --cena-forte:var(--ink-900); --cena-linha:rgba(10,10,24,.26); --cena-fraco:rgba(10,10,24,.08);
  --cena-acento:var(--pn-orange-700); --cena-ok:#0E8A5F; --cena-painel:rgba(4,0,128,.045);
  border-color:var(--ink-100);background:var(--white);backdrop-filter:none}

/* Vocabulário compartilhado: cada cena é quase só geometria. */
.cena .cn-painel{fill:var(--cena-painel)}
.cena .cn-fraco{fill:var(--cena-fraco)}
.cena .cn-forte{fill:var(--cena-forte)}
.cena .cn-acento{fill:var(--cena-acento)}
.cena .cn-ok{fill:var(--cena-ok)}
.cena .cn-borda{fill:none;stroke:var(--cena-linha);stroke-width:1.5}
.cena .cn-traco{fill:none;stroke:var(--cena-linha);stroke-width:2;stroke-linecap:round}
.cena .cn-traco-acento{fill:none;stroke:var(--cena-acento);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.cena .cn-traco-ok{fill:none;stroke:var(--cena-ok);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.cena .cn-pontilhado{fill:none;stroke:var(--cena-linha);stroke-width:1.5;stroke-dasharray:4 5;stroke-linecap:round}
.cena text{font-family:var(--font-body);fill:var(--cena-forte)}
.cena .cn-num{font-family:var(--font-mono);font-weight:700}
.cena .cn-rot{font-size:11px;fill:var(--cena-forte);opacity:.72}
.cena .cn-mini{font-size:9.5px;fill:var(--cena-forte);opacity:.55}

/* Cena na primeira seção: mesma proporção do espaço reservado que ela
   substitui, para o layout do hero não mudar de altura. */
.hero-visual .cena{aspect-ratio:4/3;display:flex;align-items:center}
@media(max-width:860px){.hero-visual .cena{aspect-ratio:16/10}}

/* Miniatura dentro do cartão de cenário. */
.cena-mini{padding:0;border:none;background:none;backdrop-filter:none;
  border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--sp-4)}
.section:not(.blue-deep):not(.steel):not(.royal):not(.ember):not(.dark) .cena-mini{
  border:none;background:none}

@media(prefers-reduced-motion:no-preference){
  .cena .cn-pulsa{animation:cenaPulsa 2.6s var(--ease-out) infinite}
  .cena .cn-corre{stroke-dasharray:6 8;animation:cenaCorre 1.8s linear infinite}
}
@keyframes cenaPulsa{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes cenaCorre{to{stroke-dashoffset:-28}}
.marquee{overflow:hidden;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-track{display:flex;gap:var(--sp-7);width:max-content;animation:marquee 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}


/* ---- Grade de integrações (Vision) ----
   Logo em ladrilho claro com borda, e não solto sobre o fundo da seção: aqui
   convivem marcas escuras e marcas de amarelo quase branco (Mercado Livre,
   Mercado Pago), que sumiriam sem uma base própria. É o oposto do mural de
   cliente, onde a caixa saiu — lá são nove marcas de tinta comparável, aqui
   são 26 de contraste que varia muito.
   Tamanho por ÁREA, mesma regra dos demais logos do site. */
/* Quatro ladrilhos por linha: com o teto de oito marcas, todo card fecha em
   duas linhas exatas e a grade de nove para de misturar card curto com longo. */
.conexao-grupo{display:flex;flex-direction:column}
.conexao-lista{list-style:none;margin:var(--sp-4) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
.conexao{--conexao-base:26px;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 6px 10px;border:1px solid var(--ink-100);border-radius:var(--r-md);
  background:var(--white);transition:border-color var(--dur-base) var(--ease-out),
  transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.conexao:hover{border-color:var(--pn-blue-200);transform:translateY(-2px);
  box-shadow:0 6px 16px -10px rgba(4,0,128,.28)}
.conexao-marca{height:30px;display:flex;align-items:center;justify-content:center}
.conexao-marca img{height:calc(var(--f,1) * var(--conexao-base));width:auto;max-width:74px;display:block}
.conexao-nome{font-size:11px;line-height:1.25;text-align:center;color:var(--ink-600);
  font-weight:500;overflow-wrap:anywhere}
/* Marca citada no texto que ainda não tem arquivo de logo: entra com o nome,
   nunca com um ladrilho vazio. */
.conexao-sem-logo{justify-content:center;border-style:dashed;background:var(--ink-50)}
.conexao-sem-logo .conexao-nome{color:var(--ink-500)}
.conexao-grupo h3{margin-bottom:0}
/* O Próximo Nível Flow não é marca de terceiro: entra com o foguete do sprite,
   no laranja da marca, e o ladrilho ganha a borda azul para se distinguir. */
.conexao-propria{border-color:var(--pn-blue-200);background:var(--pn-blue-50)}
.conexao-foguete{width:26px;height:26px;color:var(--pn-orange-600)}
.conexao-propria .conexao-nome{color:var(--pn-blue-900);font-weight:600}
/* "e muito mais": são +600 conexões, e o card mostra sempre um recorte. */
.conexao-mais{display:inline-flex;align-items:center;gap:7px;margin:auto 0 0;padding-top:var(--sp-4);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--pn-orange-800)}
.conexao-mais svg{width:14px;height:14px;color:var(--pn-orange-600);flex:0 0 auto}
@media(max-width:640px){
  .conexao-lista{grid-template-columns:repeat(3,1fr);gap:10px}
  .conexao{--conexao-base:23px;padding:10px 4px 8px}
  .conexao-marca{height:26px}
  .conexao-nome{font-size:12px}
}
/* ---------- 7. SEÇÕES DE DESTAQUE ---------- */
/* Primeira seção de cada página ocupa a tela inteira */
#main-content>section:first-child{min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--header-h) + var(--sp-6))}
#main-content>section:first-child>.container{width:100%}
.hero-full{position:relative;min-height:340px;display:flex;align-items:center;
  background:var(--grad-brand-deep);color:#fff;padding:var(--sp-8) 0;overflow:hidden}
.hero-full .mesh{position:absolute;inset:0;opacity:.5;
  background:radial-gradient(600px 300px at 15% 20%,rgba(239,122,1,.32),transparent 60%),
             radial-gradient(500px 320px at 85% 80%,rgba(79,79,224,.45),transparent 60%)}
/* Feixe de luz vertical, inspirado no "aurora beam" do Huly — predominantemente azul, sem concorrer com o laranja do .mesh */
.hero-full::before{content:'';position:absolute;left:6%;top:-30%;bottom:-30%;width:20%;
  background:linear-gradient(180deg,rgba(79,79,224,.42) 0%,rgba(79,79,224,.16) 65%,transparent 100%);
  filter:blur(70px);opacity:.55;pointer-events:none;z-index:0}
.hero-full>.container{position:relative;z-index:2}
.hero-full h1{color:#fff}
.hero-full p{color:rgba(255,255,255,.78)}
/* Primeira seção de toda página: duas colunas fixas — o texto sempre à
   esquerda, a imagem sempre à direita. A proporção dá folga ao texto porque
   é ele que carrega H1 + parágrafo + botões; a imagem acompanha centralizada. */
.hero-split-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:var(--sp-8);align-items:center;position:relative;z-index:2}
.hero-copy{min-width:0}
.hero-visual{min-width:0}
/* Dentro do hero o print perde a margem e o teto de 960px do uso em seção: */
.hero-visual .print-produto{margin:0;max-width:none}

/* Espaço reservado da imagem que ainda não chegou do cliente. Tem proporção
   declarada por aspect-ratio, então já ocupa o lugar definitivo e o CLS
   continua zero quando a imagem real entrar. */
.hero-ph{aspect-ratio:4/3;border-radius:var(--r-lg);border:1.5px dashed rgba(255,255,255,.3);
  background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;
  padding:var(--sp-6);text-align:center;font-family:var(--font-mono);font-size:12px;
  line-height:1.7;color:rgba(255,255,255,.62)}
/* Barra de prova do hero: os seis parceiros da v5.1, agora como selo passando
   em loop. Fica abaixo das duas colunas, atravessando o container. */
.barra-prova{margin:var(--sp-8) 0 0;padding:var(--sp-6) 0 0;border-top:1px solid rgba(255,255,255,.16)}
.barra-prova .marquee-track{animation-duration:34s}
@media(max-width:640px){.barra-prova{margin-top:var(--sp-6);padding-top:var(--sp-5)}}

/* Faixa de marcas de cliente: um respiro fino logo abaixo da primeira seção,
   não uma seção cheia. O padding vertical de .section afogaria a faixa. */
.faixa-marcas{padding:var(--sp-7) 0;background:var(--white)}
.faixa-marcas .marquee-track{animation-duration:30s}
@media(max-width:640px){.faixa-marcas{padding:var(--sp-6) 0}}

/* A equação que organiza o site inteiro. Número e operador em mono, que é o
   "modo dado" da marca; o sinal de multiplicação é decorativo para o leitor
   de tela, que recebe a palavra "vezes" no lugar. */
.equacao{font-family:var(--font-mono);font-size:clamp(14px,1.7vw,19px);line-height:1.7;
  color:var(--pn-blue-900);background:var(--pn-blue-50);border-left:3px solid var(--pn-orange-600);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--sp-5) var(--sp-6);margin:var(--sp-6) 0 0;max-width:none}
.equacao span[aria-hidden]{color:var(--pn-orange-700);padding:0 2px}
.section:is(.blue-deep,.steel,.royal,.ember) .equacao{background:rgba(255,255,255,.07);color:#fff}
.section:is(.azure,.tinted,.warm) .equacao{background:var(--white);
  box-shadow:0 2px 12px -6px rgba(4,0,128,.16)}
.section:is(.blue-deep,.steel,.royal,.ember) .equacao span[aria-hidden]{color:var(--pn-orange-500)}

.hero-centered{text-align:center;padding:var(--sp-9) var(--sp-6);background:var(--pn-blue-50)}
.hero-centered h2{font-size:clamp(25px,3vw,32px);max-width:680px;margin:0 auto var(--sp-4);line-height:1.12}
.hero-centered p{max-width:540px;margin:0 auto var(--sp-6);color:var(--ink-500);font-size:16px}
/* Fechamento centralizado na página: título, texto, botões e a caixa inteira.
   Pedido do cliente (2026-08-24) — era duas colunas, texto à esquerda. */
.cta-banner{background:var(--grad-brand);border-radius:var(--r-xl);padding:var(--sp-8) var(--sp-7);color:#fff;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  gap:var(--sp-6);max-width:860px;margin:0 auto;position:relative;overflow:hidden}
.cta-banner .cta-texto{max-width:62ch}
.cta-banner .btn-row{justify-content:center}
.cta-banner>*{min-width:0}
.header-bar,.hero-full{min-width:0}
.header-nav{flex-wrap:wrap}
.cta-banner::after{content:'';position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(239,122,1,.36),transparent 70%)}
.cta-banner h2,.cta-banner h3{color:#fff;font-size:clamp(20px,2.2vw,25px);margin-bottom:6px;position:relative;z-index:2}
.cta-banner p{color:rgba(255,255,255,.76);font-size:14px;margin:0;position:relative;z-index:2}
.cta-banner .btn-row{position:relative;z-index:2}
.section.ember .cta-banner{background:transparent;border:1px solid rgba(255,255,255,.22)}
.section.ember .cta-banner::after{display:none}

/* ---- Bloco azul: "A prova" + fechamento ----
   O cliente pediu o mesmo degradê nas duas seções, em azul, de cima para
   baixo. Pintar cada uma criaria uma emenda no meio (o fim do gradiente
   encostando no começo do seguinte), então o degradê mora no envelope e as
   duas seções ficam transparentes. As classes .steel/.ember continuam nelas
   porque é delas que descendem as regras de texto sobre fundo escuro. */
.faixa-azul{background:var(--grad-sec-prova)}
.faixa-azul>.section{background:none}
.faixa-azul>.section:first-child{padding-bottom:var(--sp-6)}
.faixa-azul>.section+.section{padding-top:0}

/* ---- "O risco é nosso" ----
   Fundo laranja-700 (#C96501), a pedido do cliente. Texto direto sobre ele é
   ink-900: branco dá 3,9:1 e reprova em texto pequeno, enquanto o quase-preto
   dá 4,8:1 e passa. Os dois cards continuam brancos. */
.section.risco{background:var(--pn-orange-700)}
/* 2026-08-25: fundo azul. O texto vira branco (sobre o laranja anterior ele
   era ink-900, porque branco ali dava 3,9:1 e reprovava). */
.section.risco{color:#fff}
.section.risco .section-title,.section.risco .eyebrow,.section.risco .fine-print,
.section.risco .fine-print a{color:#fff}
.section.risco .eyebrow{color:var(--pn-orange-300)}
.section.risco .fine-print{color:rgba(255,255,255,.7)}
.section.risco .fine-print a{color:var(--pn-orange-300);text-decoration:underline;font-weight:600}

/* ---- Números da operação ----
   Faixa própria logo abaixo do mural de marcas, e não mais um pedaço da seção
   de prova. Fundo claro para o verde da legenda continuar legível. */
.faixa-numeros{padding:var(--sp-7) 0 var(--sp-8);background:var(--white)}
.faixa-numeros .stat-card{text-align:left}

/* ---------- 8. NAVEGAÇÃO: HEADER, MEGA MENU, DRAWER ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:var(--z-sticky);background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--ink-100);
  transition:transform .3s var(--ease-out),background .3s var(--ease-out),border-color .3s var(--ease-out)}
.site-header.header-hidden{transform:translateY(-100%)}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  padding:12px 0;max-width:var(--container-wide);margin:0 auto;padding-left:var(--sp-5);padding-right:var(--sp-5)}
.header-logo{display:flex;align-items:center;position:relative}
.header-logo img{height:32px;width:auto}
.header-logo .logo-light{display:none;position:absolute;left:0;top:50%;transform:translateY(-50%)}

/* Header sobre a 1ª seção (hero escuro): funde com a cor da seção, logo/texto/botões em branco */
.site-header.on-hero{background:var(--grad-brand-deep);border-bottom-color:transparent;backdrop-filter:none}
/* Parado no topo da 1ª seção o header não tem fundo nenhum: o gradiente, o
   feixe de luz e o mesh da seção passam por baixo dele. O fundo só entra no
   primeiro scroll — é o que separa "menu deitado sobre a arte" de "menu
   flutuando por cima do conteúdo". */
.site-header.on-hero.at-top{background:transparent}
/* Com o mega-menu aberto o fundo volta na hora: o painel do menu é claro e
   precisa de uma barra sólida acima dele, senão a emenda fica solta. */
.site-header.on-hero.menu-aberto{background:var(--grad-brand-deep)}
.site-header.on-hero .header-logo .logo-dark{display:none}
.site-header.on-hero .header-logo .logo-light{display:block;position:static;transform:none}
.site-header.on-hero .header-nav{color:rgba(255,255,255,.86)}
.site-header.on-hero .header-nav button.nav-toggle:hover,
.site-header.on-hero .header-nav a.nav-link:hover,
.site-header.on-hero .header-nav button.nav-toggle[aria-expanded="true"]{color:#fff;border-bottom-color:var(--pn-orange-600)}
.site-header.on-hero .header-cta .text-link{color:rgba(255,255,255,.85)}
.site-header.on-hero .header-cta .text-link:hover{color:#fff}
.site-header.on-hero .btn-outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.site-header.on-hero .btn-outline:hover{background:#fff;color:var(--pn-blue-900);box-shadow:inset 0 0 0 1.5px #fff}
.site-header.on-hero .mobile-toggle{border-color:rgba(255,255,255,.5);color:#fff}
.header-nav{display:flex;gap:26px;font-size:14px;font-weight:600;color:var(--ink-700);list-style:none;margin:0;padding:0}
.header-nav button.nav-toggle{background:none;border:none;cursor:pointer;font:inherit;color:inherit;
  padding:6px 0;border-bottom:2px solid transparent;transition:all var(--dur-base);display:inline-flex;align-items:center;gap:5px}
.header-nav a.nav-link{text-decoration:none;color:inherit;padding:6px 0;border-bottom:2px solid transparent;
  transition:all var(--dur-base);display:inline-flex;align-items:center;gap:5px}
.header-nav button.nav-toggle:hover,.header-nav a.nav-link:hover,
.header-nav button.nav-toggle[aria-expanded="true"]{color:var(--pn-blue-900);border-bottom-color:var(--pn-orange-600)}
.header-nav svg{width:13px;height:13px;transition:transform var(--dur-base) var(--ease-out)}
.header-nav button[aria-expanded="true"] svg{transform:rotate(180deg)}
.header-cta{display:flex;align-items:center;gap:14px}
/* .text-link é sempre link solto (o "Entrar" do header, o "Ver comparativo"
   das páginas de produto), nunca link no meio de frase: por isso ele leva
   respiro vertical e cumpre o piso de 30px de alvo em qualquer largura. */
.text-link{font-size:14px;font-weight:600;color:var(--ink-700);text-decoration:none;
  display:inline-flex;align-items:center;min-height:30px}
.text-link:hover{color:var(--pn-blue-900)}

.megamenu{position:absolute;left:0;right:0;top:100%;padding:0;background:var(--ink-50);
  border-bottom:1px solid var(--ink-100);border-top:1px solid var(--ink-100);box-shadow:var(--shadow-lg);
  max-width:100%;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility 0s var(--dur-base)}
.megamenu.is-open{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.megamenu-inner{max-width:var(--container-wide);margin:0 auto;padding:26px var(--sp-5);width:100%}
.mm-list{display:flex;flex-direction:column;gap:2px}
.mm-item{font-size:13.5px;font-weight:600;color:var(--ink-600);padding:9px 12px;border-radius:var(--r-sm);
  cursor:pointer;transition:all var(--dur-base);display:flex;align-items:center;gap:9px;border:none;background:none;
  width:100%;text-align:left;font-family:inherit;text-decoration:none}
.mm-item:hover{background:#fff;color:var(--pn-blue-900)}
.mm-item.on{background:#fff;color:var(--pn-blue-900);box-shadow:var(--shadow-sm)}
.mm-item svg{width:16px;height:16px;flex-shrink:0}
.mm-link{padding:9px 12px;border-radius:var(--r-sm);transition:background var(--dur-base);text-decoration:none;display:block;font-size:13px;color:var(--ink-600)}
.mm-link:hover{background:#fff;color:var(--pn-blue-900)}
.mm-link b{display:block;font-size:13.5px;color:var(--ink-900);margin-bottom:2px}
.mm-link span{font-size:12px;color:var(--ink-500);line-height:1.45;display:block}
.mm-feature{background:var(--grad-brand);border-radius:var(--r-md);padding:18px;color:#fff}
.mm-feature svg{width:22px;height:22px;color:#fff}
.mm-feature h5{color:#fff;font-size:15px;margin:8px 0 6px}
.mm-feature p{font-size:12.5px;color:rgba(255,255,255,.72);margin:0 0 12px;line-height:1.5}

/* ---------- 25b. SUBMENUS EM BOXES (Segmentos, Planos, Recursos) ---------- */
.mm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mm-box{display:flex;align-items:center;gap:11px;padding:15px 16px;border-radius:var(--r-md);
  border:1px solid var(--ink-100);background:#fff;text-decoration:none;line-height:1.35;
  font-size:13.5px;font-weight:600;color:var(--ink-700);min-height:58px;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base),
             border-color var(--dur-base),color var(--dur-base)}
.mm-box svg{width:18px;height:18px;flex-shrink:0;color:var(--pn-blue-900);transition:color var(--dur-base)}
.mm-box:hover{border-color:var(--pn-blue-200);color:var(--pn-blue-900);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.mm-box:hover svg{color:var(--pn-orange-600)}
.mm-box.is-soon:hover{transform:none;box-shadow:none;border-color:var(--ink-100);color:var(--ink-700)}
.mm-box.is-soon:hover svg{color:var(--pn-blue-900)}
@media(max-width:1100px){.mm-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.mm-grid{grid-template-columns:1fr}}

/* ---------- 25. MEGA MENU DE PRODUTOS: ABAS (design-system.css §9) ---------- */
.megamenu-tabs{display:grid;grid-template-columns:200px 1fr 260px;gap:24px;align-items:start}
.mm-links-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;align-content:start}
.mm-links-grid[hidden]{display:none}
@media(max-width:1100px){
  .megamenu-tabs{grid-template-columns:1fr}
  .mm-links-grid{grid-template-columns:1fr}
}
.is-soon{opacity:.55;cursor:not-allowed}

.mobile-toggle{display:none;background:none;border:1.5px solid var(--ink-150);border-radius:var(--r-sm);
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-800)}
.mobile-toggle svg{width:20px;height:20px}

.drawer-scrim{position:fixed;inset:0;background:rgba(10,10,24,.5);z-index:var(--z-drawer);
  opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-out),visibility 0s var(--dur-base)}
.drawer-scrim.is-open{opacity:1;visibility:visible;transition-delay:0s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,88vw);background:#fff;z-index:calc(var(--z-drawer) + 1);
  box-shadow:var(--shadow-xl);display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform var(--dur-slow) var(--ease-out)}
.drawer.is-open{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;
  border-bottom:1px solid var(--ink-100)}
.drawer-head img{height:26px}
.drawer-body{padding:10px 0;overflow-y:auto;flex:1}
.drawer-group{border-bottom:1px solid var(--ink-100)}
.drawer-item{padding:15px 18px;font-size:15px;font-weight:600;color:var(--ink-800);
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;width:100%;
  background:none;border:none;font-family:inherit;text-align:left;text-decoration:none;min-height:44px}
.drawer-item:hover{background:var(--pn-blue-50);color:var(--pn-blue-900)}
.drawer-item svg{width:16px;height:16px;transition:transform var(--dur-base)}
.drawer-item[aria-expanded="true"] svg{transform:rotate(180deg)}
.drawer-sub{max-height:0;overflow:hidden;transition:max-height var(--dur-base) var(--ease-out);background:var(--ink-50)}
.drawer-sub.is-open{max-height:400px}
.drawer-sub a{display:block;padding:11px 18px 11px 32px;font-size:13.5px;color:var(--ink-600);text-decoration:none;min-height:44px;display:flex;align-items:center}
.drawer-sub a:hover{color:var(--pn-blue-900)}
.drawer-foot{padding:16px 18px;border-top:1px solid var(--ink-100);display:flex;flex-direction:column;gap:10px}

.crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-500);flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--ink-500)}
.crumbs a:hover{color:var(--pn-blue-900)}
.crumbs span.sep{color:var(--ink-300)}
.crumbs b{color:var(--ink-900);font-weight:600}

.pill-row{display:flex;gap:10px;flex-wrap:wrap}
.pill{padding:9px 18px;border-radius:var(--r-pill);border:1.5px solid var(--ink-150);font-size:13.5px;
  font-weight:600;color:var(--ink-700);cursor:pointer;background:#fff;transition:all var(--dur-base) var(--ease-out);
  min-height:44px;font-family:inherit}
.pill:hover{border-color:var(--pn-blue-600);color:var(--pn-blue-900);transform:translateY(-2px)}
.pill.on{background:var(--pn-blue-900);border-color:var(--pn-blue-900);color:#fff}

/* ---------- 9. FOOTER ---------- */
/* Ordem fixada pelo cliente: marca centralizada, slogan, texto institucional,
   as seis colunas de menu e só então os ícones. */
.site-footer{background:var(--pn-blue-900);color:rgba(255,255,255,.85)}
.footer-inner{max-width:var(--container-wide);margin:0 auto;padding:var(--sp-8) var(--sp-5) var(--sp-5)}
/* O texto institucional ocupa a largura inteira da seção (1400px), a pedido do
   cliente. Como linha muito longa cansa de ler, o tamanho sobe junto: a medida
   de leitura confortável vem do corpo maior, não de uma coluna estreita. */
.footer-marca{text-align:center;margin:0 0 var(--sp-8)}
.footer-logo{display:inline-block}
.footer-marca img{height:40px;width:auto;display:block;margin:0 auto}
.footer-slogan{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.12em;
  color:var(--pn-orange-500);margin:var(--sp-5) 0 0;text-transform:uppercase}
.footer-sobre{font-size:clamp(14px,1.15vw,16px);line-height:1.8;color:rgba(255,255,255,.7);margin:var(--sp-5) 0 0}
/* Seis colunas de largura igual: nenhuma delas é a coluna de marca agora. */
.footer-cols{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-5);
  padding-top:var(--sp-7);border-top:1px solid rgba(255,255,255,.15)}
.footer-social{display:flex;gap:10px;justify-content:center;
  margin-top:var(--sp-7);padding-top:var(--sp-7);border-top:1px solid rgba(255,255,255,.15)}
.footer-social .icon-btn{width:36px;height:36px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.footer-social .icon-btn:hover{background:var(--pn-orange-600);border-color:var(--pn-orange-600);color:#fff}
.footer-col h6,.footer-col-titulo{font-size:11.5px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px}
.footer-col a{display:flex;align-items:center;min-height:32px;font-size:12.5px;color:rgba(255,255,255,.62);text-decoration:none}
.footer-col a:hover{color:#fff}
.footer-col a.is-soon{color:rgba(255,255,255,.34);cursor:not-allowed}
.footer-col a.is-soon:hover{color:rgba(255,255,255,.34)}
.footer-base{margin-top:var(--sp-7);padding-top:18px;border-top:1px solid rgba(255,255,255,.15);
  display:flex;justify-content:center;align-items:center;text-align:center;
  /* .5 dava 4,37:1 sobre o azul do rodapé, logo abaixo do piso de 4,5. */
  font-size:12px;color:rgba(255,255,255,.68);flex-wrap:wrap;gap:6px var(--sp-5)}
.footer-legais{display:flex;gap:var(--sp-5)}
.footer-legais a{color:rgba(255,255,255,.6);text-decoration:none}
.footer-legais a:hover{color:#fff}


/* ---- Botão flutuante do WhatsApp ----
   Fica acima do rodapé e abaixo do modal e do aviso de cookies, para nunca
   cobrir uma decisão que o visitante precisa tomar. No telefone ele encolhe
   para o ícone, mas mantém 56px de alvo — o piso do manual é 30px. */
.wa-flutuante{position:fixed;right:var(--sp-5);bottom:var(--sp-5);z-index:calc(var(--z-sticky) - 1);
  display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 22px 0 18px;
  border:none;border-radius:28px;cursor:pointer;
  background:#25D366;color:#0A0A18;font-family:var(--font-body);font-weight:700;font-size:14.5px;
  box-shadow:0 12px 30px -10px rgba(4,0,128,.45);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.wa-flutuante svg{width:26px;height:26px;fill:currentColor;flex:0 0 auto}
.wa-flutuante:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(4,0,128,.55)}
.wa-flutuante:focus-visible{outline:3px solid var(--pn-orange-500);outline-offset:3px}
/* Neon correndo na borda, para o botão puxar o olho sem piscar nem pular.
   É um anel em gradiente cônico girando atrás do botão, recortado por uma
   máscara: o miolo continua opaco e o rótulo permanece legível. */
.wa-flutuante::before{content:'';position:absolute;inset:-3px;border-radius:inherit;padding:3px;
  background:conic-gradient(from var(--neon-ang,0deg),transparent 0deg,var(--pn-orange-500) 40deg,
    #fff 70deg,var(--pn-orange-500) 100deg,transparent 150deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;opacity:.95}
@property --neon-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@media(prefers-reduced-motion:no-preference){
  .wa-flutuante::before{animation:neonGira 3.4s linear infinite}
}
@keyframes neonGira{to{--neon-ang:360deg}}
/* Enquanto a barra de cookies está na tela, o botão sobe para não brigar com ela. */
body.cookies-abertos .wa-flutuante{transform:translateY(-96px)}
@media(max-width:760px){
  .wa-flutuante{padding:0;width:56px;justify-content:center;right:16px;bottom:16px}
  .wa-flutuante-rotulo{display:none}
}
@media print{.wa-flutuante{display:none}}

/* O rodapé do modal ganhou uma linha de estado à esquerda do botão. */
.modal-foot{flex-wrap:wrap;gap:var(--sp-4)}
/* ---------- 10. FEEDBACK: FAQ, ALERTAS, COOKIE ---------- */
.faq-item{border-bottom:1px solid var(--ink-100)}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:18px 4px;font-size:15px;font-weight:600;
  color:var(--ink-900);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:inherit;min-height:44px}
.faq-q:hover{color:var(--pn-blue-900)}
.faq-q .plus{font-family:var(--font-mono);color:var(--pn-orange-600);font-size:20px;
  transition:transform var(--dur-base) var(--ease-out);flex-shrink:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--dur-base) var(--ease-out);
  font-size:14px;color:var(--ink-500);line-height:1.65}
.faq-a p{padding:0 4px 18px;margin:0}
.faq-item.open .faq-a{max-height:640px}
.faq-item.open .plus{transform:rotate(45deg)}

.alert{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-md);font-size:14px;line-height:1.5;
  align-items:flex-start;border-left:3px solid}
.alert svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.alert-warning{background:var(--warning-bg);color:#8c5d13;border-color:var(--warning)}
.alert-info{background:var(--info-bg);color:var(--pn-blue-800);border-color:var(--pn-blue-600)}

/* Discreto de propósito: no telefone ele divide a tela com o botão do
   WhatsApp e com o primeiro parágrafo da página, e barra grande ali rouba a
   cena. Uma linha de texto, dois botões, sem painel de preferências. */
.cookie-box{position:fixed;left:var(--sp-5);right:auto;bottom:var(--sp-5);z-index:var(--z-toast);
  max-width:560px;background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-pill);
  padding:10px 12px 10px var(--sp-5);box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  transform:translateY(180%);transition:transform var(--dur-slow) var(--ease-out)}
.cookie-box.is-open{transform:translateY(0)}
.cookie-box p{font-size:12.5px;color:var(--ink-600);line-height:1.45;margin:0;flex:1;min-width:210px}
.cookie-box .btn-row{gap:8px;flex-wrap:nowrap}
.cookie-box .btn{white-space:nowrap;padding:0 14px;height:34px;font-size:12.5px}
@media(max-width:760px){
  .cookie-box{left:12px;right:12px;bottom:12px;border-radius:var(--r-lg);padding:12px var(--sp-4);
    gap:10px}
  .cookie-box p{min-width:100%;font-size:12px}
  .cookie-box .btn-row{width:100%}
  .cookie-box .btn{flex:1}
}

.modal-scrim{position:fixed;inset:0;background:rgba(10,10,24,.55);z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-5);
  opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-out),visibility 0s var(--dur-base)}
.modal-scrim.is-open{opacity:1;visibility:visible;transition-delay:0s}
.modal{border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-xl);max-width:440px;width:100%;
  overflow:hidden;max-height:90vh;overflow-y:auto}
.modal-head{padding:var(--sp-5) var(--sp-5) 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.modal-body{padding:var(--sp-4) var(--sp-5) var(--sp-5)}
.modal-foot{padding:0 var(--sp-5) var(--sp-5);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ---------- 11. DADOS: TABELA ---------- */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-500);padding:12px 14px;border-bottom:2px solid var(--ink-150);
  background:var(--ink-50)}
.table td{padding:14px;border-bottom:1px solid var(--ink-100);color:var(--ink-700);vertical-align:top}
.table tbody tr:hover{background:var(--pn-blue-50)}
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--ink-100)}
.table-wrap .table{min-width:560px}

/* Comparativo de planos: coluna de recurso à esquerda, sim/não centralizado, plano recomendado destacado */
.table-wrap .table-comparativo{min-width:720px}
.table-comparativo tbody th{font-family:var(--font-display);font-size:13.5px;font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--ink-700);background:transparent;
  border-bottom:1px solid var(--ink-100);white-space:normal}
.table-comparativo td{text-align:center}
.table-comparativo .col-destaque{background:var(--pn-blue-50)}
.table-comparativo thead .col-destaque{background:var(--pn-blue-100);color:var(--pn-blue-900)}
.tbl-sim{width:17px;height:17px;color:var(--pn-orange-600)}
.tbl-nao{color:var(--ink-300)}
/* Coluna do cenário COM o produto: destacada de ponta a ponta, e não só no
   cabeçalho — é ela que o leitor precisa achar de relance. */
.table .col-com{background:var(--pn-blue-50);border-left:2px solid var(--pn-blue-200);
  border-right:2px solid var(--pn-blue-200);color:var(--ink-900);font-weight:500}
.table thead .col-com{background:var(--pn-blue-900);color:#fff;border-color:var(--pn-blue-900)}
.table tbody tr:last-child .col-com{border-bottom:2px solid var(--pn-blue-200)}
.section:is(.blue-deep,.steel,.royal,.ember) .table .col-com{background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.34);color:#fff}
.section:is(.blue-deep,.steel,.royal,.ember) .table thead .col-com{background:var(--pn-orange-700);
  border-color:var(--pn-orange-700)}
.tbl-badge{display:inline-block;font-size:9.5px;background:var(--pn-orange-600);color:#fff;
  padding:2px 6px;border-radius:var(--r-sm);margin-left:4px;letter-spacing:.04em}
/* No mobile a comparação vira card empilhado: tabela de preço nunca rola na horizontal.
   Os dois blocos saem do mesmo precos.json; só um fica no DOM visível (e na árvore de acessibilidade). */
.planos-cards{display:none}
@media(max-width:900px){
  .planos-tabela{display:none}
  .planos-cards{display:grid;gap:var(--sp-5)}
}

/* ---------- 12. MOVIMENTO ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.counter{font-family:var(--font-mono);font-weight:700;color:var(--pn-blue-900)}
.reveal-word{display:inline-block;opacity:0;transform:translateY(18px) rotate(1deg);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal-word.in{opacity:1;transform:none}
.float{animation:float 5s var(--ease-inout) infinite}
.float-slow{animation:float 7.5s var(--ease-inout) infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.orbit-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--pn-orange-500);
  box-shadow:0 0 12px 2px rgba(255,154,51,.7);pointer-events:none}
.glow-ring{position:relative}
.glow-ring::after{content:'';position:absolute;inset:-6px;border-radius:inherit;
  background:var(--grad-accent);opacity:0;filter:blur(16px);z-index:-1;transition:opacity var(--dur-base)}
.glow-ring:hover::after{opacity:.55}
.tilt{transition:transform var(--dur-base) var(--ease-out)}
.tilt:hover{transform:perspective(700px) rotateX(3deg) rotateY(-5deg) translateY(-4px)}
.spotlight{position:relative;--mx:50%;--my:50%}
.spotlight::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity var(--dur-base);
  border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(220px circle at var(--mx) var(--my),rgba(239,122,1,.16),transparent 65%)}
.spotlight:hover::before{opacity:1}
.glass-card{position:relative;background:rgba(255,255,255,.10);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.20);border-radius:var(--r-md);padding:20px}
.grad-border{background:var(--grad-accent);padding:1.5px;border-radius:var(--r-md)}
.grad-border-in{background:#fff;border-radius:calc(var(--r-md) - 1px);padding:16px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .float,.float-slow{animation:none}
}

/* ---------- 13. ASSINATURA: TRAÇO CLIQUE→CAIXA ---------- */
.flow-trace{display:flex;align-items:center;flex-wrap:wrap}
.flow-node{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;min-width:96px}
.flow-dot{width:13px;height:13px;border-radius:50%;background:var(--pn-orange-600);
  box-shadow:0 0 0 6px rgba(239,122,1,.18)}
.flow-label{font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.06em}
.flow-line{flex:1;min-width:30px;height:2px;position:relative;overflow:hidden;
  background-image:linear-gradient(90deg,currentColor 0 6px,transparent 6px 12px);background-size:12px 2px}
.flow-line::after{content:'';position:absolute;top:-3px;left:-10px;width:8px;height:8px;border-radius:50%;
  background:var(--pn-orange-500);box-shadow:0 0 9px 2px rgba(255,154,51,.85);animation:travel 3.2s linear infinite}
@keyframes travel{to{left:104%}}
.on-dark-flow{color:rgba(255,255,255,.4)}
.on-dark-flow .flow-label{color:rgba(255,255,255,.86)}
.on-light-flow{color:var(--ink-150)}
.on-light-flow .flow-label{color:var(--ink-700)}

/* ---------- 14. PREÇOS ---------- */
.pricing-card{border:1.5px solid var(--ink-100);border-radius:var(--r-lg);padding:var(--sp-6);background:#fff;
  display:flex;flex-direction:column;gap:var(--sp-4);position:relative;height:100%;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base),border-color var(--dur-base)}
.pricing-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl);border-color:var(--pn-blue-200)}
.pricing-card.featured{border:2px solid transparent;box-shadow:var(--shadow-lg);
  background-image:linear-gradient(#fff,#fff),linear-gradient(135deg,var(--pn-blue-900),var(--pn-orange-600));
  background-origin:border-box;background-clip:padding-box,border-box}
.pricing-badge{position:absolute;top:-13px;left:24px;background:var(--pn-orange-600);color:#fff;
  font-size:11px;font-weight:700;padding:5px 13px;border-radius:var(--r-pill);letter-spacing:.03em}
.pricing-name{font-size:15px;font-weight:700;color:var(--ink-900);font-family:var(--font-display)}
.pricing-value{font-family:var(--font-mono);font-size:30px;font-weight:700;color:var(--pn-blue-900);line-height:1}
.pricing-value span{font-size:14px;color:var(--ink-500);font-weight:500}
.pricing-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;flex:1}
.pricing-list li{font-size:13.5px;color:var(--ink-700);display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.pricing-list li svg{width:16px;height:16px;color:var(--pn-orange-600);flex-shrink:0;margin-top:1px}
.pricing-anchor{font-size:12.5px;color:var(--ink-500);font-style:italic;margin-top:var(--sp-2)}

/* ---------- 15. LINHA DO TEMPO ---------- */
.timeline{position:relative;padding-left:6px}
.tl-item{display:flex;gap:20px;padding-bottom:var(--sp-7);position:relative}
.tl-item:last-child{padding-bottom:0}
.tl-item:not(:last-child)::before{content:'';position:absolute;left:15px;top:36px;bottom:0;width:2px;
  background-image:linear-gradient(180deg,var(--ink-150) 0 6px,transparent 6px 12px);background-size:2px 12px}
.tl-dot{width:32px;height:32px;border-radius:50%;background:#fff;border:2.5px solid var(--pn-blue-600);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);
  font-weight:700;font-size:13px;color:var(--pn-blue-700);z-index:2}
.tl-dot.on{background:var(--pn-orange-600);border-color:var(--pn-orange-600);color:#fff;
  box-shadow:0 0 0 6px rgba(239,122,1,.16)}
.tl-when{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pn-orange-600);margin-bottom:5px}
.tl-body h3,.tl-body h4{font-size:18px;margin-bottom:6px}
.tl-body p{font-size:14.5px;color:var(--ink-500);margin:0;line-height:1.6}

/* ---------- 16. MÍDIA / MOCKUP DE PRODUTO ---------- */
.ratio{position:relative;width:100%;overflow:hidden;border-radius:var(--r-lg);background:var(--ink-100)}
.ratio>.ph{position:absolute;inset:0;width:100%;height:100%}
.r-16x9{padding-top:56.25%}
.r-4x3{padding-top:75%}
.ph{display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;
  color:rgba(255,255,255,.85);text-align:center;padding:16px;background:var(--grad-brand)}
.device{border-radius:var(--r-lg);background:var(--ink-900);padding:8px 8px 0;box-shadow:var(--shadow-xl)}
.device .bar{display:flex;gap:6px;padding:8px 6px 10px}
.device .bar i{width:9px;height:9px;border-radius:50%;background:#3a3a58;display:block}
.device .screen{border-radius:8px 8px 0 0;overflow:hidden;background:#fff}
.mock-panel{background:#fff;padding:var(--sp-5)}
.mock-panel .stat-card{border-color:var(--ink-100)}

/* ---------- 17. DADOS: GRÁFICOS ---------- */
.bar-chart{display:flex;align-items:flex-end;gap:14px;height:130px;padding-top:24px}
.bar-chart .bar{flex:1;background:var(--grad-brand);border-radius:6px 6px 0 0;position:relative;
  transition:all var(--dur-base) var(--ease-out)}
.bar-chart .bar:hover{background:var(--grad-accent);transform:scaleY(1.04);transform-origin:bottom}
.bar-chart .bar b{position:absolute;top:-22px;left:0;right:0;text-align:center;font-family:var(--font-mono);
  font-size:11px;color:var(--ink-700);font-weight:600}
.bar-chart .bar i{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:11px;
  color:var(--ink-400);font-style:normal}
.donut{width:112px;height:112px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--pn-orange-600) 0 68%,var(--pn-blue-100) 68% 100%);
  display:flex;align-items:center;justify-content:center;position:relative}
.donut::after{content:'';position:absolute;width:74px;height:74px;border-radius:50%;background:#fff}
.donut b{position:relative;z-index:2;font-family:var(--font-mono);font-size:19px;color:var(--pn-blue-900)}

/* ---------- 18. FORMULÁRIO MULTI-ETAPA ---------- */
.stepper{display:flex;align-items:center;gap:0;margin-bottom:var(--sp-6);flex-wrap:wrap}
.step{display:flex;align-items:center;gap:10px}
.step-num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:13px;font-weight:600;background:var(--ink-100);color:var(--ink-400);
  transition:all var(--dur-base) var(--ease-out);flex-shrink:0}
.step.active .step-num{background:var(--pn-blue-900);color:#fff;box-shadow:0 0 0 5px var(--pn-blue-100)}
.step.done .step-num{background:var(--success);color:#fff}
/* ink-400 sobre o azul-50 do stepper dá 3,31:1, abaixo do piso de 4,5. */
.step-label{font-size:13px;font-weight:600;color:var(--ink-500);white-space:nowrap}
.step.active .step-label{color:var(--ink-900)}
.step-bar{flex:1;height:2px;background:var(--ink-100);margin:0 12px;min-width:24px}
.step-bar.done{background:var(--success)}
.form-step{display:none}
.form-step.active{display:block}
.range{width:100%;appearance:none;height:6px;border-radius:3px;background:var(--ink-100);outline:none;margin:12px 0}
.range::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:var(--pn-orange-600);
  cursor:pointer;border:3px solid #fff;box-shadow:var(--shadow-md)}
.range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--pn-orange-600);
  cursor:pointer;border:3px solid #fff;box-shadow:var(--shadow-md)}

/* ---------- 18b. CALCULADORA: PAINEL ESCURO (design-system.css §08) ---------- */
/* A calculadora era cinza-chumbo, fora da paleta. Passa a azul da marca com
   detalhe laranja, a pedido do cliente. As cores saem dos tokens. */
.calc-panel{background:var(--grad-brand-deep);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg);padding:var(--sp-6)}
.calc-panel h2,.calc-panel h3{color:#fff}
.calc-panel>p{color:rgba(255,255,255,.6)}
.calc-panel .field label{color:rgba(255,255,255,.75);display:flex;justify-content:space-between;
  align-items:baseline;gap:12px;flex-wrap:wrap}
.calc-val{color:var(--pn-orange-500);font-weight:700;font-size:15px;white-space:nowrap}
.calc-panel .range{background:rgba(255,255,255,.16)}
.calc-panel .hint{color:rgba(255,255,255,.5)}
.calc-panel .select{background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A6A6BE' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.calc-panel .select:hover{border-color:rgba(255,255,255,.4)}
.calc-panel .select:focus{border-color:var(--pn-orange-500);box-shadow:0 0 0 3px rgba(239,122,1,.25)}
.calc-premissas{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.18)}
.calc-premissas .mono{font-size:11px;color:rgba(255,255,255,.45);line-height:1.7;letter-spacing:.02em}

/* ---------- 18c. BARRA DE PROGRESSO (design-system.css §10) ---------- */
.progress{height:8px;border-radius:4px;background:var(--ink-100);overflow:hidden}
.progress i{display:block;height:100%;background:var(--grad-accent);border-radius:4px;
  transition:width var(--dur-slow) var(--ease-out)}
.step-caption{font-family:var(--font-mono);font-size:11px;color:var(--ink-400);margin-top:8px}

/* ---------- 19. DOCUMENTO LEGAL ---------- */
.legal-layout{display:grid;grid-template-columns:260px 1fr;gap:var(--sp-8);align-items:start}
.legal-nav{position:sticky;top:calc(var(--header-h) + var(--sp-4));border-right:1px solid var(--ink-100);padding-right:var(--sp-5)}
/* ink-400 sobre branco dá 3,59:1 em 12px. */
.legal-nav b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-600);margin-bottom:var(--sp-3)}
.legal-nav a{display:block;font-size:13.5px;color:var(--ink-600);text-decoration:none;padding:7px 0;border-left:2px solid transparent;padding-left:12px;margin-left:-14px}
.legal-nav a:hover{color:var(--pn-blue-900)}
.legal-content{max-width:70ch}
.legal-content h2{font-size:22px;margin:var(--sp-7) 0 var(--sp-3)}
.legal-content h2:first-child{margin-top:0}
.legal-content p{font-size:15px;color:var(--ink-700);line-height:1.7;margin-bottom:var(--sp-4)}
.legal-content ul{padding-left:20px;margin-bottom:var(--sp-4)}
.legal-content li{font-size:15px;color:var(--ink-700);line-height:1.7;margin-bottom:6px}

/* ---------- 20. BADGE DE GARANTIA ---------- */
.guarantee-badge{display:inline-flex;align-items:center;gap:8px;background:var(--pn-blue-50);
  border:1px solid var(--pn-blue-100);border-radius:var(--r-pill);padding:8px 16px;font-size:12.5px;
  font-weight:600;color:var(--pn-blue-800)}
.guarantee-badge svg{width:16px;height:16px;color:var(--pn-orange-600)}

/* ---------- 21. FORMULÁRIO — EXTRAS (design-system.css §4) ---------- */
/* ---- Formulário largo ----
   O formulário passa a ocupar a largura da seção (1400px) em vez de uma
   coluna de 760px. Campo largo demais também é ruim de ler, então a largura
   extra vira mais COLUNAS, não campos gigantes: grade de 12, cada campo
   declarando quantas ocupa. */
.form-largo{max-width:none;padding:var(--sp-8)}
.form-grade{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-5) var(--sp-6);
  align-items:start}
.form-grade .field{margin-bottom:0;grid-column:span 12;min-width:0}
.form-grade .col-3{grid-column:span 3}
.form-grade .col-4{grid-column:span 4}
.form-grade .col-6{grid-column:span 6}
.form-grade .col-8{grid-column:span 8}
.form-grade .col-12{grid-column:span 12}
/* Separador de assunto dentro do formulário, para a grade não virar um mural
   de campos sem hierarquia. */
.form-faixa{grid-column:span 12;display:flex;align-items:center;gap:var(--sp-4);
  margin-top:var(--sp-3);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pn-orange-800)}
.form-faixa::after{content:"";flex:1;height:1px;background:var(--ink-100)}
.form-rodape{grid-column:span 12;display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-3);padding-top:var(--sp-5);
  border-top:1px solid var(--ink-100)}
.form-rodape .btn{min-width:min(230px,100%)}
/* Escada: 12 -> 6 -> 12. Em tablet dois campos por linha, no telefone um. */
@media(max-width:1100px){
  .form-grade .col-3,.form-grade .col-4{grid-column:span 6}
}
@media(max-width:760px){
  .form-grade{gap:var(--sp-4)}
  .form-grade .col-3,.form-grade .col-4,.form-grade .col-6,.form-grade .col-8{grid-column:span 12}
  .form-largo{padding:var(--sp-6) var(--sp-5)}
  .form-rodape{flex-direction:column;align-items:stretch}
  .form-rodape .btn{width:100%}
}

.input-icon{position:relative}
.input-icon svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink-400);pointer-events:none}
.input-icon .input{padding-left:40px}
.float-field{position:relative;margin-bottom:var(--sp-4)}
.float-field .input{padding:20px 14px 8px}
.float-field label{position:absolute;left:14px;top:14px;font-size:15px;color:var(--ink-400);
  pointer-events:none;transition:all var(--dur-base) var(--ease-out);margin:0}
.float-field .input:focus+label,.float-field .input:not(:placeholder-shown)+label{
  top:6px;font-size:11px;font-weight:600;color:var(--pn-blue-700);letter-spacing:.04em;text-transform:uppercase}
.toggle{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--ink-700)}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle .track{width:46px;height:26px;border-radius:var(--r-pill);background:var(--ink-150);
  position:relative;transition:background var(--dur-base) var(--ease-out);flex-shrink:0}
.toggle .track::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-spring)}
.toggle input:checked+.track{background:var(--pn-orange-600)}
.toggle input:checked+.track::after{transform:translateX(20px)}

/* ---------- 22. CARD: REVELAR NO HOVER (design-system.css §5) ---------- */
.card-reveal .reveal-body{max-height:0;opacity:0;overflow:hidden;
  transition:max-height var(--dur-slow) var(--ease-out),opacity var(--dur-base),margin-top var(--dur-slow)}
.card-reveal:hover .reveal-body,.card-reveal:focus-within .reveal-body{max-height:160px;opacity:1;margin-top:var(--sp-4)}
.stat-delta{font-family:var(--font-mono);font-size:12px;font-weight:600;display:inline-flex;
  align-items:center;gap:4px;margin-top:8px}
.stat-delta svg{width:12px;height:12px}
.stat-delta.up{color:var(--success)}
.stat-delta.down{color:var(--error)}

/* ---------- 23. CARROSSEL (design-system.css §7) ---------- */
.carousel{position:relative}
.carousel-viewport{overflow:hidden;border-radius:var(--r-lg)}
.carousel-track{display:flex;transition:transform var(--dur-slow) var(--ease-out)}
.carousel-slide{min-width:100%;padding:0 2px}
.carousel-nav{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:var(--sp-4)}
.carousel-dots{display:flex;gap:22px}
/* O ponto continua com 8px de desenho, mas a área de toque vira 30x32.
   A extensão horizontal é exatamente metade do gap (22px), para a área de um
   ponto encostar na do vizinho sem invadir — senão o clique cai no ponto errado. */
.dot{position:relative}
.dot::after{content:'';position:absolute;inset:-12px -11px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ink-150);border:none;cursor:pointer;padding:0;
  transition:all var(--dur-base) var(--ease-out)}
.dot.active{width:26px;border-radius:4px;background:var(--pn-orange-600)}
.carousel-peek .carousel-slide{min-width:64%}
@media(max-width:760px){.carousel-peek .carousel-slide{min-width:88%}}
/* Multi-item: 3 depoimentos por vez, avançando de 1 em 1, em loop automático */
.carousel-multi .carousel-viewport{border-radius:0}
.carousel-multi .carousel-track{align-items:stretch}
.carousel-multi .carousel-slide{min-width:33.3333%;padding:var(--sp-1) 10px;display:flex}
.carousel-multi .carousel-slide>*{width:100%}
@media(max-width:1100px){.carousel-multi .carousel-slide{min-width:50%}}
@media(max-width:760px){.carousel-multi .carousel-slide{min-width:100%}}

/* ---------- 24. SEÇÃO STICKY (design-system.css §8) ---------- */
.sticky-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);align-items:start}
.sticky-col{position:sticky;top:calc(var(--header-h) + var(--sp-4))}
.sticky-steps>div{padding:var(--sp-6) 0;border-bottom:1px solid var(--ink-100)}
.sticky-steps>div:last-child{border-bottom:none}
.sticky-steps h4{font-size:18px;margin-bottom:6px}
.sticky-steps p{font-size:14px;color:var(--ink-500);margin:0}
@media(max-width:900px){
  .sticky-wrap{grid-template-columns:1fr}
  .sticky-col{position:static}
}

/* ---------- 14. RESPONSIVO ---------- */
/* ---------- Faixa intermediária: laptop pequeno ----------
   Cinco colunas em 1024px dão cartões de 180px. Reduz antes de apertar. */
@media(max-width:1100px){
  .grid-5{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-cols{grid-template-columns:repeat(3,1fr);row-gap:var(--sp-6)}
}

/* ---------- Tablet (iPad retrato e paisagem estreita) ----------
   Aqui é onde o site colapsava direto para uma coluna: um cartão de 786px de
   largura num iPad é desperdício de tela. Duas colunas cabem com folga. */
@media(max-width:900px){
  .grid-3,.grid-5,.grid-mosaic-3{grid-template-columns:repeat(2,1fr)}
  .grid-mosaic-3>*:first-child{grid-column:span 2}
  .footer-cols{grid-template-columns:repeat(3,1fr);row-gap:var(--sp-6)}
  .header-nav,.header-cta .text-link{display:none}
  .header-cta .btn{display:none}
  .mobile-toggle{display:inline-flex}
}

/* ---------- Celular ----------
   Abaixo de 640px, duas colunas de texto já não cabem. Tudo empilha. */
@media(max-width:640px){
  .grid-2,.grid-3,.grid-4,.grid-5,.grid-mosaic-3{grid-template-columns:1fr}
  .grid-mosaic-3>*:first-child{grid-column:auto}
  .footer-cols{grid-template-columns:repeat(2,1fr);row-gap:var(--sp-6)}
  .cookie-box{left:var(--sp-4);right:var(--sp-4);bottom:var(--sp-4);max-width:none}
}
@media(max-width:420px){
  /* Exceção deliberada à escada de colunas: seis listas empilhadas em uma
     coluna só dão um rodapé de ~1.900px em TODA página. A regra da escada
     existe para não colapsar cedo demais e desperdiçar tela de tablet; um
     menu de rodapé em duas colunas no telefone não é uma grade de cards.
     Abaixo de 360px volta a uma, onde duas não cabem sem quebrar rótulo. */
  .footer-cols{grid-template-columns:repeat(2,1fr);row-gap:var(--sp-5)}
  @media(max-width:359px){.footer-cols{grid-template-columns:1fr}}
  .footer-marca{margin-bottom:var(--sp-7)}
  .footer-sobre{font-size:13px}
}
/* Faixa em que o menu e as três ações do header disputam a mesma linha.
   Sem isto a barra quebra em duas linhas e passa de 61px para 121px, o que
   desalinha o offset do conteúdo e esconde o começo da primeira seção. */
@media(min-width:901px) and (max-width:1240px){
  .header-bar{gap:var(--sp-5);padding-left:var(--sp-4);padding-right:var(--sp-4)}
  .header-nav{gap:16px;font-size:13.5px;flex-wrap:nowrap}
  .header-cta{gap:10px}
  .header-cta .btn-sm{padding:0 12px;font-size:12.5px}
  .header-logo img{height:28px!important}
}
@media(max-width:1100px){
  .hero-split-grid{grid-template-columns:1.15fr .85fr;gap:var(--sp-6)}
}
@media(max-width:860px){
  .legal-layout{grid-template-columns:1fr}
  .legal-nav{position:static;border-right:none;padding-right:0;border-bottom:1px solid var(--ink-100);padding-bottom:var(--sp-4);margin-bottom:var(--sp-5)}
  .hero-split-grid{grid-template-columns:1fr!important;gap:var(--sp-6)}
  /* Empilhado, a imagem vai para baixo do texto e encolhe: o hero já tem
     100vh de altura mínima e não pode virar rolagem infinita no celular. */
  .hero-visual{max-width:520px;width:100%}
  .hero-ph{aspect-ratio:16/10}
}

/* ============================================================
   PISO DE LEGIBILIDADE E DE TOQUE NO MOBILE
   Fica no fim do arquivo de propósito: são overrides e precisam vencer as
   regras de componente declaradas acima, que têm a mesma especificidade.
   Nada abaixo de 12px e nenhum alvo clicável abaixo de 32px de altura.
   ============================================================ */
@media(max-width:900px){
  .flow-label{font-size:12px}
  .footer-col h6,.footer-col-titulo{font-size:12px}
  .quote-provisorio{font-size:12px}
  .pricing-badge{font-size:12px}
  /* Piso: a tabela comparativa é a página com mais texto pequeno do site. */
  .table th{font-size:12px}
  .tbl-badge{font-size:12px}
  .modal-consentimento{font-size:12px}
  .conexao-nome{font-size:12px}
  .calc-premissas .mono{font-size:12px}
  .bar-chart .bar b,.bar-chart .bar i{font-size:12px}
  .tl-when{font-size:12px}
  .ph{font-size:12px}
  .busca-item em{font-size:12px}
  .step-caption,.hint{font-size:12px}
  /* Link de coluna do rodapé continua em bloco. Com display:inline-block ele
     corre em linha, e no rodapé de uma coluna só do mobile os itens viram
     texto corrido: "Conheça o serviço Gestor de tráfego Tracking complexo"
     numa linha. O alvo de toque vem da altura mínima, não do padding. */
  .footer-col a{display:flex;min-height:38px;padding:4px 0}
  .footer-base a,.text-link{display:inline-block;padding:7px 0}
  .crumbs a{display:inline-block;padding:7px 0}
  .footer-social .icon-btn{width:42px;height:42px}
}

/* Coluna do cenário COM o produto na tabela comparativa: destacada de ponta a
   ponta, e não só no cabeçalho. Estava presa dentro do @media do piso de
   legibilidade e por isso só existia abaixo de 900px, que é justamente onde a
   tabela vira card e a coluna deixa de existir. */
.table .col-com{background:var(--pn-blue-50);border-left:2px solid var(--pn-blue-200);
  border-right:2px solid var(--pn-blue-200);color:var(--ink-900);font-weight:500}
.table thead .col-com{background:var(--pn-blue-900);color:#fff;border-color:var(--pn-blue-900)}
.table tbody tr:last-child .col-com{border-bottom:2px solid var(--pn-blue-200)}
.section:is(.blue-deep,.steel,.royal,.ember) .table .col-com{background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.34);color:#fff}
.section:is(.blue-deep,.steel,.royal,.ember) .table thead .col-com{background:var(--pn-orange-700);
  border-color:var(--pn-orange-700)}
/* 11px passa no desktop e reprova no telefone: o piso de 12px vem logo abaixo
   e precisa vir DEPOIS desta linha para vencer o desempate. */
.tbl-badge{font-size:11px}
@media(max-width:900px){.tbl-badge{font-size:12px}}

/* ---------- 26. RODADA 2026-08-24 ---------- */
/* Tag do card de produto na Home ("Com IA" / "Especialistas"). Fica entre o
   ícone e o título, e não flutuando no canto: no card estreito do tablet um
   selo absoluto passa por cima do H3. */
/* .card é coluna flex: sem align-self a pílula estica na largura toda do
   card e vira uma faixa. */
.card-tag{margin:var(--sp-3) 0 calc(-1 * var(--sp-2));align-self:flex-start}

/* Consentimento do modal do WhatsApp: discreto, ao lado do botão, e não uma
   caixa de aviso. Ocupa a linha inteira abaixo do par estado + botão. */
.modal-foot{align-items:center}
.modal-consentimento{flex:1 0 100%;order:3;margin:0;font-size:11px;line-height:1.5;
  color:var(--ink-400);border-top:1px solid var(--ink-100);padding-top:var(--sp-3)}
.modal-consentimento a{color:var(--ink-500);text-decoration:underline}

/* ---------- 27. SELEÇÃO POR FICHAS ----------
   Substitui o select longo por botões que se acendem. Alvo de 38px de altura
   e rótulo de 13px: acima do piso de 30px/12px do mobile, e legível de
   relance, que é o ponto de trocar um menu suspenso por isto. */
.fichas{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.ficha{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;
  border-radius:var(--r-pill);border:1.5px solid var(--ink-150);background:var(--white);
  color:var(--ink-700);font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;
  transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast),
  transform var(--dur-fast) var(--ease-out)}
.ficha svg{width:15px;height:15px;flex:0 0 auto;color:var(--ink-400)}
.ficha:hover{border-color:var(--pn-blue-400);color:var(--pn-blue-900)}
.ficha:active{transform:scale(.97)}
.ficha.is-on{background:var(--pn-blue-900);border-color:var(--pn-blue-900);color:#fff;font-weight:600}
.ficha.is-on svg{color:var(--pn-orange-500)}
.ficha:focus-visible{outline:3px solid var(--pn-blue-600);outline-offset:2px}
/* Dentro do painel azul o contraste inverte: a ficha apagada é vidro sobre
   azul e a acesa é laranja da marca. */
.calc-panel .ficha{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.86)}
.calc-panel .ficha svg{color:rgba(255,255,255,.5)}
.calc-panel .ficha:hover{border-color:var(--pn-orange-500);color:#fff}
.calc-panel .ficha.is-on{background:var(--pn-orange-600);border-color:var(--pn-orange-600);color:#fff}
.calc-panel .ficha.is-on svg{color:#fff}
.calc-panel .ficha:focus-visible{outline-color:var(--pn-orange-500)}
/* Campo que só aparece quando a ficha "Outro" é marcada. */
.field[hidden]{display:none}
.campo-extra{margin-top:12px}

/* ---------- 28. CALCULADORA: O NÚMERO ----------
   O total ganha o foguete da marca ao lado, a pedido do cliente. O ícone é o
   mesmo #i-rocket do sprite, então não entra arquivo novo. */
.calc-panel .eyebrow{color:var(--pn-orange-500)}
.calc-panel .hint{display:block;margin-top:8px}
.calc-total{background:var(--grad-brand-deep);color:#fff;border-radius:var(--r-lg);
  padding:var(--sp-8) var(--sp-6);text-align:center;position:relative;overflow:hidden}
.calc-total-brilho{position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(239,122,1,.42),transparent 70%);pointer-events:none}
.calc-total-linha{position:relative;display:flex;align-items:center;justify-content:center;
  gap:var(--sp-4);flex-wrap:wrap}
.calc-total-valor{font-size:clamp(34px,6vw,56px);font-weight:700;color:#fff;line-height:1}
.calc-foguete{width:clamp(34px,5vw,50px);height:clamp(34px,5vw,50px);color:var(--pn-orange-500);flex:0 0 auto}
@media(prefers-reduced-motion:no-preference){
  .calc-foguete{animation:foguetePulsa 3s var(--ease-inout) infinite}
}
@keyframes foguetePulsa{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}


/* ==========================================================
   29. PAINÉIS DE PRODUTO
   A "tela" que ilustra as seções. Vocabulário curto e reaproveitado: o mesmo
   punhado de peças monta métrica, gráfico, conversa, funil e fluxo, então
   quarenta ilustrações não viram quarenta folhas de estilo.

   Feito em HTML, não em SVG, porque texto dentro de SVG escala junto com o
   desenho: um rótulo de 12px vira 24px no monitor e 8px no telefone.
   ========================================================== */
.painel{position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  background:var(--grad-painel);border:1px solid rgba(255,255,255,.16);
  box-shadow:var(--shadow-xl);color:#fff;font-size:13px;line-height:1.45}
/* Halo laranja no canto, o mesmo da barra de fechamento: dá profundidade sem
   inventar gradiente novo. */
.painel::before{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;
  border-radius:50%;background:radial-gradient(circle,rgba(239,122,1,.30),transparent 70%);
  pointer-events:none;z-index:0}
.painel>*{position:relative;z-index:1}

/* Barra de janela: três pontos, título e um chip de estado. */
.painel-barra{display:flex;align-items:center;gap:10px;padding:11px var(--sp-4);
  border-bottom:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.painel-pontos{display:flex;gap:5px;flex:0 0 auto}
.painel-pontos i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.26)}
.painel-pontos i:first-child{background:var(--pn-orange-500)}
.painel-titulo{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.painel-corpo{padding:var(--sp-5)}
.painel-corpo>*+*{margin-top:var(--sp-4)}

/* Chip de estado. Verde só quando o assunto é venda confirmada. */
.pn-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:12px;font-weight:600;white-space:nowrap;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.82)}
.pn-chip svg{width:12px;height:12px}
.pn-chip.laranja{background:rgba(239,122,1,.2);color:var(--pn-orange-300)}
.pn-chip.venda{background:rgba(63,214,160,.16);color:#7FE7C4}
.pn-chip.risco{background:rgba(214,41,62,.2);color:#FF9AA6}
.pn-auto{margin-left:auto}

/* Ladrilho de métrica. */
.pn-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}
.pn-tile{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-md);padding:12px 13px;min-width:0}
.pn-rot{font-size:12px;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-num{font-family:var(--font-mono);font-weight:700;font-size:clamp(17px,2vw,22px);
  color:#fff;line-height:1.15;margin-top:3px;letter-spacing:-.01em}
.pn-num.laranja{color:var(--pn-orange-500)}
.pn-delta{font-family:var(--font-mono);font-size:12px;font-weight:600;margin-top:4px;
  display:flex;align-items:center;gap:4px;color:#7FE7C4}
.pn-delta svg{width:11px;height:11px}
.pn-delta.cai{color:#FF9AA6}
.pn-delta.neutro{color:rgba(255,255,255,.55)}

/* Gráfico de barras. */
.pn-barras{display:flex;align-items:flex-end;gap:8px;height:104px;padding-top:18px}
.pn-barra{flex:1;min-width:0;border-radius:4px 4px 0 0;background:rgba(255,255,255,.22);
  position:relative;transform-origin:bottom;transition:background var(--dur-base)}
.pn-barra.forte{background:var(--grad-accent)}
.pn-barra b{position:absolute;top:-16px;left:0;right:0;text-align:center;font-family:var(--font-mono);
  font-size:12px;color:rgba(255,255,255,.72);font-weight:600}
.pn-eixo{display:flex;gap:8px;margin-top:8px}
.pn-eixo span{flex:1;text-align:center;font-size:12px;color:rgba(255,255,255,.45);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Linhas de tabela. */
.pn-linhas{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.1);
  border-radius:var(--r-sm);overflow:hidden}
.pn-linha{display:flex;align-items:center;gap:10px;padding:9px 12px;background:rgba(4,0,128,.55)}
.pn-linha.cabeca{background:rgba(255,255,255,.09);font-family:var(--font-mono);font-size:12px;
  color:rgba(255,255,255,.62);text-transform:uppercase;letter-spacing:.06em}
.pn-linha span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:rgba(255,255,255,.86)}
.pn-linha span.fim{flex:0 0 auto;text-align:right;font-family:var(--font-mono);font-weight:600;color:#fff}
.pn-linha span.fraco{color:rgba(255,255,255,.5)}

/* Conversa. Balões como na vida real: o cliente à esquerda, nós à direita. */
.pn-conversa{display:flex;flex-direction:column;gap:9px}
.pn-balao{max-width:82%;padding:9px 13px;border-radius:14px 14px 14px 4px;
  background:rgba(255,255,255,.11);color:rgba(255,255,255,.9);align-self:flex-start}
.pn-balao.eu{align-self:flex-end;border-radius:14px 14px 4px 14px;
  background:var(--pn-orange-600);color:#fff;font-weight:500}
.pn-balao small{display:block;margin-top:4px;font-family:var(--font-mono);font-size:12px;opacity:.65}
.pn-digita{display:inline-flex;gap:4px;align-items:center}
.pn-digita i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}

/* Fluxo: nós ligados por uma linha que corre. */
.pn-fluxo{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pn-no{flex:1 1 0;min-width:74px;text-align:center;padding:10px 8px;border-radius:var(--r-md);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);font-size:12px;
  color:rgba(255,255,255,.86)}
.pn-no.forte{background:rgba(239,122,1,.2);border-color:var(--pn-orange-600);color:#fff;font-weight:600}
.pn-no.quebra{border-style:dashed;border-color:#FF9AA6;color:#FF9AA6}
.pn-no svg{width:16px;height:16px;display:block;margin:0 auto 5px}
.pn-seta{flex:0 0 auto;width:16px;height:2px;background:rgba(255,255,255,.3);border-radius:2px}

/* Funil. */
.pn-funil{display:flex;flex-direction:column;gap:6px;align-items:center}
.pn-etapa{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 14px;border-radius:var(--r-sm);background:rgba(255,255,255,.1);font-size:13px}
.pn-etapa b{font-family:var(--font-mono);color:#fff}
.pn-etapa:nth-child(2){width:88%}.pn-etapa:nth-child(3){width:74%}
.pn-etapa:nth-child(4){width:60%}.pn-etapa:nth-child(5){width:46%}
.pn-etapa.venda{background:rgba(63,214,160,.18);color:#BFF3E1}

/* Anel de proporção. */
.pn-anel-linha{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap}
.pn-anel{width:104px;height:104px;border-radius:50%;flex:0 0 auto;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--pn-orange-600) 0 var(--pn-fatia,62%),rgba(255,255,255,.14) var(--pn-fatia,62%) 100%)}
.pn-anel::after{content:"";position:absolute;inset:13px;border-radius:50%;background:#0B0A3A}
.pn-anel b{position:relative;z-index:2;font-family:var(--font-mono);font-size:19px;color:#fff}
.pn-legenda{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1}
.pn-legenda span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.78)}
.pn-legenda i{width:9px;height:9px;border-radius:3px;flex:0 0 auto;background:rgba(255,255,255,.28)}
.pn-legenda span:first-child i{background:var(--pn-orange-600)}

/* Kanban. */
.pn-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pn-col{background:rgba(255,255,255,.06);border-radius:var(--r-sm);padding:9px 8px;min-width:0}
.pn-col>b{display:block;font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.6);
  margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-carta{background:rgba(255,255,255,.13);border-radius:6px;padding:8px 9px;font-size:12px;
  color:rgba(255,255,255,.88);margin-bottom:6px;border-left:2px solid var(--pn-orange-500)}
.pn-carta:last-child{margin-bottom:0}
.pn-carta.venda{border-left-color:#3FD6A0}

/* Alerta dentro do painel: o estado quebrado que a seção descreve. */
.pn-alerta{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:var(--r-sm);
  background:rgba(214,41,62,.16);border-left:2px solid #FF9AA6;color:#FFC9D0;font-size:12.5px}
.pn-alerta svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px}
.pn-alerta.ok{background:rgba(63,214,160,.14);border-left-color:#3FD6A0;color:#BFF3E1}

/* Escada do foguete: o painel do topo da Home. */
.pn-voo{position:relative;height:200px;border-radius:var(--r-md);overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.pn-voo-grade{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:100% 25%,12.5% 100%}
.pn-voo-curva{position:absolute;inset:0}
.pn-voo-curva path{fill:none;stroke:var(--pn-orange-600);stroke-width:2.5;stroke-linecap:round}
.pn-voo-curva .area{fill:url(#pnVooFill);stroke:none}
.pn-voo-rocket{position:absolute;width:34px;height:34px;color:var(--pn-orange-500);
  filter:drop-shadow(0 0 10px rgba(239,122,1,.75));right:7%;top:8%}
.pn-voo-marca{position:absolute;font-family:var(--font-mono);font-size:12px;font-weight:700;
  color:rgba(255,255,255,.85);background:rgba(4,0,128,.72);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-pill);padding:2px 9px}
.pn-voo-marca.inicio{left:10px;bottom:14px}
.pn-voo-marca.fim{right:12px;top:52px;background:var(--pn-orange-600);border-color:transparent;color:#fff}

/* Movimento. Tudo desligado em prefers-reduced-motion. */
@media(prefers-reduced-motion:no-preference){
  .painel::after{content:"";position:absolute;top:0;bottom:0;width:38%;z-index:2;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);
    animation:pnVarre 6.5s var(--ease-inout) infinite}
  .pn-pulsa{animation:pnPulsa 2.4s var(--ease-inout) infinite}
  .pn-barra{animation:pnSobe 1.1s var(--ease-out) both}
  .pn-barra:nth-child(2){animation-delay:.09s}.pn-barra:nth-child(3){animation-delay:.18s}
  .pn-barra:nth-child(4){animation-delay:.27s}.pn-barra:nth-child(5){animation-delay:.36s}
  .pn-barra:nth-child(6){animation-delay:.45s}
  .pn-digita i{animation:pnPula .9s var(--ease-inout) infinite}
  .pn-digita i:nth-child(2){animation-delay:.15s}.pn-digita i:nth-child(3){animation-delay:.3s}
  .pn-voo-rocket{animation:pnVoa 4.6s var(--ease-inout) infinite}
  .pn-voo-curva path{stroke-dasharray:340;stroke-dashoffset:340;animation:pnRisca 2.6s var(--ease-out) .2s forwards}
  .pn-voo-curva .area{animation:none;stroke-dasharray:none}
}
@keyframes pnVarre{0%{transform:translateX(-140%) skewX(-14deg)}55%,100%{transform:translateX(360%) skewX(-14deg)}}
@keyframes pnPulsa{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes pnSobe{from{transform:scaleY(.05)}to{transform:scaleY(1)}}
@keyframes pnPula{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-4px);opacity:1}}
@keyframes pnVoa{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-4px,-7px) rotate(-4deg)}}
@keyframes pnRisca{to{stroke-dashoffset:0}}

/* ---- O painel dentro da página ----
   Na primeira seção ele substitui a cena e usa a mesma proporção. Nas demais
   seções entra numa coluna própria, nunca abaixo do texto. */
.hero-visual .painel{width:100%}
.secao-visual{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--sp-8);align-items:center}
.secao-visual>*{min-width:0}
.secao-visual .secao-texto>p+p{margin-top:var(--sp-4)}
/* Visual à esquerda, quando a seção pede a alternância. */
.secao-visual.invertida .secao-texto{order:2}
@media(max-width:900px){
  .secao-visual{grid-template-columns:1fr;gap:var(--sp-6)}
  .secao-visual.invertida .secao-texto{order:0}
  .painel-corpo{padding:var(--sp-4)}
  .pn-kanban{grid-template-columns:1fr 1fr}
  .pn-kanban .pn-col:nth-child(3){grid-column:span 2}
}
@media(max-width:520px){
  .pn-grade{grid-template-columns:1fr 1fr}
  .pn-fluxo .pn-seta{display:none}
  .pn-no{flex:1 1 44%}
  .pn-voo{height:170px}
}

/* ---- Etapas visuais (Como funciona, do Diagnóstico) ---- */
.etapas-visuais{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);position:relative}
.etapa-cartao{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-5) var(--sp-5)}
.etapa-num{font-family:var(--font-mono);font-size:34px;font-weight:700;line-height:1;
  color:rgba(255,255,255,.22)}
.etapa-icone{width:46px;height:46px;border-radius:var(--r-md);display:flex;align-items:center;
  justify-content:center;background:rgba(239,122,1,.18);margin:var(--sp-4) 0 var(--sp-4)}
.etapa-icone svg{width:22px;height:22px;color:var(--pn-orange-500)}
.etapa-cartao p{color:rgba(255,255,255,.84);font-size:14.5px;margin:0}
.etapa-linha{position:absolute;top:34px;right:calc(-1 * var(--sp-6));width:var(--sp-6);height:2px;
  background:repeating-linear-gradient(90deg,var(--pn-orange-500) 0 5px,transparent 5px 10px)}
@media(max-width:900px){
  .etapas-visuais{grid-template-columns:1fr}
  .etapa-linha{display:none}
}

/* ---- Listas do resultado do Diagnóstico ---- */
.lista-perdas,.lista-plano{margin:var(--sp-4) 0 0;padding-left:0;list-style:none;
  display:flex;flex-direction:column;gap:10px}
.lista-perdas li,.lista-plano li{font-size:13.5px;color:var(--ink-700);line-height:1.55;
  padding-left:24px;position:relative}
.lista-perdas li::before{content:"";position:absolute;left:2px;top:7px;width:8px;height:8px;
  border-radius:2px;background:var(--pn-orange-600)}
.lista-plano{counter-reset:plano}
.lista-plano li{counter-increment:plano;padding-left:30px}
.lista-plano li::before{content:counter(plano);position:absolute;left:0;top:0;
  font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--pn-blue-900);
  background:var(--pn-blue-100);width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center}

/* Miniatura de painel dentro do cartão de cenário: sem barra de janela, que
   num cartão estreito rouba mais altura do que informa. */
.painel.compacto{margin-bottom:var(--sp-4)}
.painel.compacto .painel-corpo{padding:var(--sp-4)}
.painel.compacto .pn-linha{padding:7px 11px}
.painel.compacto .pn-barras{height:88px}
.painel.compacto::before{width:170px;height:170px;right:-50px;top:-50px}

/* Formulário dentro do painel azul: rótulo, faixa, checkbox e link precisam
   de tinta clara — o padrão deles é para fundo branco. */
.calc-panel .form-faixa{color:var(--pn-orange-300)}
.calc-panel .form-faixa::after{background:rgba(255,255,255,.18)}
.calc-panel .form-rodape{border-top-color:rgba(255,255,255,.18)}
.calc-panel .check{color:rgba(255,255,255,.82)}
.calc-panel .check a,.calc-panel .fine-print a{color:var(--pn-orange-300);text-decoration:underline}
.calc-panel .fine-print{color:rgba(255,255,255,.6)}
.calc-panel label{color:rgba(255,255,255,.82)}
.calc-panel .input,.calc-panel .textarea{background-color:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);color:#fff}
.calc-panel .input::placeholder,.calc-panel .textarea::placeholder{color:rgba(255,255,255,.42)}
.calc-panel .input:focus,.calc-panel .textarea:focus{border-color:var(--pn-orange-500);
  box-shadow:0 0 0 3px rgba(239,122,1,.25)}
.calc-panel .input-icon svg{color:rgba(255,255,255,.5)}
.calc-panel .campo-aviso{color:#FF9AA6}
.calc-panel .is-success .input,.calc-panel .is-success .select{border-color:rgba(63,214,160,.6)}

/* ---------- 30. PISO DE ENCOLHIMENTO ----------
   Item de grade e item de flex nascem com min-width:auto, ou seja, nunca
   ficam menores que o próprio min-content. Com painel dentro de card isso
   estourava a página em 320px: a linha "Plataforma de anúncio · R$ 92k" não
   quebra (é ellipsis de propósito), então o min-content dela empurrava a
   coluna inteira. Com min-width:0 a coluna manda, e a linha reticencia — que
   é exatamente o que ela foi feita para fazer. */
.grid>*,.form-grade>*,.form-rodape>*{min-width:0}
.painel,.secao-arte,.hero-visual{min-width:0}
/* O aceite não pode esticar a coluna: o texto tem um link no meio e não pode
   virar ellipsis. Ele quebra em linhas, como parágrafo. */
.check{min-width:0;overflow-wrap:anywhere}

/* Piso de 12px no telefone (CLAUDE.md 2). Estes três nasceram em 11px, que
   passa no desktop e não passa no celular. */
@media(max-width:640px){
  .tag,.ph,.form-faixa,.pn-rot,.pn-chip,.painel-titulo{font-size:12px}
}

/* A tag dentro do cabeçalho laranja da coluna "Com" era laranja sobre laranja:
   legível, mas apagada. Vira vidro sobre a própria faixa. */
.table thead .col-com .tbl-badge{background:rgba(255,255,255,.24);color:#fff}

/* ============================================================
   31. RODADA DE 2026-08-25
   ============================================================ */

/* ---- 31.1 Card de vidro ----
   Padrão 21 do design system: fundo translúcido com desfoque, e a regra que
   vem junto: só sobre imagem ou degradê, nunca sobre branco. Onde a seção já
   é escura (.royal, .risco) o vidro entra direto. Onde a seção é clara, o
   desfoque não teria o que embaçar, e aí entra a VITRINE, o mesmo envelope em
   degradê que o guia usa na demonstração (.glass-demo), com os cards dentro.
   Assim o ritmo claro/escuro da página continua o mesmo. */
.vitrine{position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:var(--sp-7);background:var(--grad-brand-deep)}
.vitrine::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 340px at 78% 10%,rgba(239,122,1,.40),transparent 66%)}
.vitrine>*{position:relative;z-index:2}
@media(max-width:640px){.vitrine{padding:var(--sp-5)}}

.card.vidro{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  box-shadow:none;color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.card.vidro h3,.card.vidro h4,.card.vidro b{color:#fff}
.card.vidro p{color:rgba(255,255,255,.80)}
.card.vidro .card-icon{background:rgba(255,255,255,.14);color:#fff}
.card.vidro.card-hover:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.36);
  box-shadow:0 18px 40px -28px rgba(4,0,128,.9)}
.card.vidro.card-hover:hover .card-icon{background:var(--pn-orange-600);color:#fff}
.card.vidro .card-link{color:#fff}
.card.vidro .card-link:hover{color:var(--pn-orange-300)}
/* Sem backdrop-filter o vidro vira mancha: sem desfoque, 10% de branco some
   sobre o degradê. Nesse caso sobe para 18%, que se sustenta sozinho. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .card.vidro{background:rgba(255,255,255,.18)}
}
/* Seção escura já mandava o card ser branco por dentro: .section:is(...) .card h3
   e .card>p pintam ink-900 e ink-600 para o card BRANCO que era o padrão ali.
   Sobre vidro isso dá 1,0:1. Estas quatro linhas repetem o seletor de seção
   para ganhar o desempate por especificidade, e não por !important. */
.section:is(.blue-deep,.steel,.royal,.ember) .card.vidro h2,
.section:is(.blue-deep,.steel,.royal,.ember) .card.vidro h3,
.section:is(.blue-deep,.steel,.royal,.ember) .card.vidro h4{color:#fff}
.section:is(.blue-deep,.steel,.royal,.ember) .card.vidro>p,.section:is(.blue-deep,.steel,.royal,.ember) .card.vidro p{color:rgba(255,255,255,.80)}
.section:is(.blue-deep,.steel,.royal,.ember) .card.vidro .card-link{color:#fff}

/* ---- 31.2 "O risco é nosso" em vidro ----
   O fundo virou degradê para o vidro ter o que desfocar. O texto solto sobre
   a seção continua ink-900: branco sobre laranja dá 3,9:1 e reprova. Dentro
   do vidro o texto é branco, e aí o fundo do card já é escuro. */
.section.risco{background:var(--grad-sec-risco)}
/* Com o fundo azul o vidro volta a ser branco translúcido, como no guia.
   O tingimento escuro só existia para o vidro se destacar do laranja. */
.section.risco .card.vidro h2,.section.risco .card.vidro h3,
.section.risco .card.vidro h4{color:#fff}
.section.risco .card.vidro p{color:rgba(255,255,255,.80)}

/* ---- 31.3 Tag no lugar do caminho de migalhas ----
   Pedido do cliente: sai "Início / Próximo Nível Experts", entra só o nome da
   página numa pílula laranja. Como o caminho deixou de existir na tela, o
   BreadcrumbList saiu junto do <head>: dado estruturado só descreve o que
   está na página (CLAUDE.md 4). */
.crumb-tag{display:inline-block;margin-bottom:var(--sp-5);padding:6px 15px;
  border-radius:var(--r-pill);background:var(--pn-orange-600);
  /* Branco sobre orange-600 dá 2,81:1 e a tag é rótulo de LEITURA, não botão
     (7.1, regra 1: laranja é cor de ação). O azul da marca sobre o mesmo
     laranja dá 5,66:1 e a pílula continua exatamente da cor aprovada. */
  color:var(--pn-blue-900);
  font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.04em}

/* ---- 31.4 Selo do card de produto ----
   O cliente pediu "Com IA" e "Especialistas" na mesma posição do "Mais
   escolhido" do card de plano: flutuando sobre a borda de cima, à esquerda.
   Sai do fluxo, então o card precisa deixar de recortar o que passa da borda. */
/* O selo flutuante na borda foi testado e desfeito (2026-08-25): para o selo
   passar da borda o card precisa de overflow:visible, e é isso que desliga o
   recorte do canto arredondado e a barra laranja do topo (.card-accent::before,
   que anima no hover). A tag volta ao fluxo, entre o ícone e o título, agora em
   laranja nos três cards. */

/* ---- 31.5 Opção de select ilegível ----
   Dentro do painel azul o .select herda color:#fff. A lista suspensa, porém,
   é desenhada pelo sistema com fundo branco: dava texto branco sobre branco e
   não havia como ler nenhuma opção. O <option> precisa dizer a própria cor. */
.select option,.select optgroup{color:var(--ink-900);background:#fff}

/* ---- 31.6 Botão de voltar dentro do painel escuro ----
   .btn-ghost é ink-700, cinza escuro: sobre o azul do .calc-panel sumia.
   Discreto continua sendo o pedido; discreto e visível. */
.calc-panel .btn-ghost{color:rgba(255,255,255,.72)}
.calc-panel .btn-ghost:hover{color:#fff;background:rgba(255,255,255,.10)}
.calc-panel .btn-ghost:focus-visible{outline-color:var(--pn-orange-500)}

/* ---- 31.7 Harmonia da grade de formulário ----
   O desalinhamento vinha de três lugares: rótulo de uma linha ao lado de
   rótulo de duas, que fazia o campo começar em alturas diferentes; fichas com
   10px de respiro a mais que o select ao lado; e o campo "Outro" abrindo com
   meia largura sozinho numa linha. Altura mínima de duas linhas no rótulo
   resolve o primeiro, e os outros dois são margem e span. */
.form-grade .field{display:flex;flex-direction:column;align-items:stretch}
/* [hidden] do navegador tem uma classe a menos e perderia o desempate para
   a linha acima: o campo 'Outro' voltaria a aparecer sempre. */
.form-grade .field[hidden]{display:none}
.form-grade .field>label:first-child{min-height:2.7em;align-items:flex-start}
.form-grade .field>.fichas{margin-top:0}
.form-grade .campo-extra{margin-top:0}
@media(max-width:900px){.form-grade .field>label:first-child{min-height:0}}

/* ---- 31.8 Imagem sangrando até a borda da tela ----
   A coluna da direita passa do limite do container e vai até o fim da janela.
   overflow-x:clip no envelope, e não overflow:hidden: clip não cria contexto
   de rolagem, então nada disso vira barra horizontal, que é requisito e não
   gosto. 50vw conta a barra de rolagem, e é justamente o clip que segura a
   sobra de meia barra. */
/* NÃO clipar aqui. A grade mora dentro do .container, então o recorte cai na
   borda do CONTEÚDO e come 37px da imagem, medidos. Quem tem a largura da
   janela é a SEÇÃO, e é lá que o clip fica (regra logo abaixo). É a mesma
   armadilha do topo da Home: getBoundingClientRect diz que a imagem termina na
   borda da janela mesmo depois de o pixel ter sido cortado. */
.section:has(> .container > .sangra-direita){overflow-x:clip}
.sangra-direita{
  /* Quanto falta da borda direita do CONTEÚDO até a borda da janela: metade
     do que sobra do container, mais o respiro lateral. Quando a janela é menor
     que o container, é só o respiro, e o max() cuida disso.
     --sbw é a largura da barra de rolagem, medida pelo JS (medirBarra): 100vw
     conta a barra e a área desenhada não. Sem descontar, sobravam 8px e o clip
     comia esse pedaço da imagem. */
  --sangra:max(var(--sp-5),calc((100vw - var(--sbw,0px) - var(--container)) / 2 + var(--sp-5)))}
/* A imagem tem de parecer maior que a área de conteúdo, não encaixada nela:
   a coluna da direita cresce, o vão entre as colunas é comido por uma margem
   negativa à esquerda, e a direita segue até a borda da janela. O resultado é
   uma tela que atravessa o layout em vez de caber dentro dele. */
@media(min-width:901px){
  .sangra-direita{grid-template-columns:.68fr 1.32fr;align-items:center;gap:var(--sp-7)}
  /* A margem negativa come parte do vão entre as colunas, nunca o texto: a
     imagem vem depois no HTML e pintaria por cima da última palavra de cada
     linha. Sobram 16px de respiro entre o texto e a borda da tela. */
  .sangra-direita .secao-arte{margin-left:calc(-1 * var(--sp-5))}
}
.sangra-direita .secao-arte{margin-right:calc(-1 * var(--sangra))}
/* .print-produto limita o print a 960px, que é o certo numa seção comum e
   errado aqui: a coluna que sangra passa de 960 a partir de ~1750px e a
   imagem parava antes da borda. */
.sangra-direita .secao-arte .print-produto{max-width:none;margin:0}
.sangra-direita .secao-arte img{width:100%;height:auto;
  border-radius:var(--r-lg) 0 0 var(--r-lg);box-shadow:-30px 30px 80px -50px rgba(4,0,128,.75)}
@media(max-width:900px){
  .sangra-direita .secao-arte{margin-right:calc(-1 * var(--sp-5))}
  .sangra-direita .secao-arte img{border-radius:var(--r-md) 0 0 var(--r-md)}
}

/* ---- 31.10 Fechamento maior ----
   O cliente pediu mais peso no "Pronto para o próximo nível?". Cresce a caixa,
   o título e o respiro; continua centralizado, como fechado na rodada passada. */
.section.ember{padding-bottom:var(--sp-9)}
.cta-banner{max-width:960px;padding:var(--sp-9) var(--sp-8);gap:var(--sp-7)}
.cta-banner h2,.cta-banner h3{font-size:clamp(26px,3.4vw,40px);line-height:1.1;margin-bottom:var(--sp-3)}
.cta-banner p{font-size:clamp(15px,1.4vw,17px);line-height:1.6}
.section.ember .cta-banner{border-width:1.5px;background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.section.ember .cta-banner::after{display:block;right:-90px;top:-90px;width:340px;height:340px}
.cta-banner .btn-row .btn{font-size:15.5px;padding:16px 30px}
@media(max-width:640px){
  .cta-banner{padding:var(--sp-7) var(--sp-5)}
  .section.ember{padding-bottom:var(--sp-8)}
}

/* ---- 31.11 Prova em campo e Números da operação, centralizados ----
   Pedido do cliente. O título do caso âncora tem de caber em UMA linha: de
   1024px para cima ele não quebra; abaixo disso volta a quebrar, porque em
   telefone não existe linha que caiba 52 caracteres. */
.faixa-numeros .section-head,#sec-global-prova .section-head{
  margin-left:auto;margin-right:auto;text-align:center;max-width:960px}
/* O parágrafo do caso âncora usa a largura da seção e fecha em duas linhas
   (pedido do cliente). Com 78ch ele quebrava em quatro. */
#sec-global-prova>.container>.body-m{max-width:none;text-align:center;font-size:16px;line-height:1.65}
@media(max-width:1100px){#sec-global-prova>.container>.body-m{font-size:15px}}
@media(min-width:1024px){
  #prova-titulo{white-space:nowrap;font-size:clamp(20px,2.05vw,27px)}
}

/* ---- 31.12 Título de seção alinhado ao texto ----
   Regra do cliente: o título acompanha o lado do texto. Nas seções em que o
   texto vai para a direita (.secao-visual.invertida), o cabeçalho vai junto. */
/* O cabeçalho passou a morar DENTRO da coluna de texto (pedido do cliente):
   título e parágrafo viram um bloco só, e é o bloco que a grade centraliza.
   Como está na coluna, ele já nasce do lado certo — .direita saiu do HTML.
   Aqui só encurta o respiro: 40px entre título e parágrafo, que é o padrão de
   cabeçalho de seção, é vão demais quando os dois estão colados. */
.secao-texto .section-head{margin-bottom:var(--sp-4);max-width:none}
.secao-texto .section-head .section-title{margin-bottom:0}

/* ---- 31.13 Anexo no formulário de contato ---- */
.campo-anexo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1.5px dashed rgba(255,255,255,.28);border-radius:var(--r-sm);padding:11px 14px}
.campo-anexo input[type=file]{flex:1;min-width:0;font-size:13px;color:rgba(255,255,255,.8)}
.campo-anexo input[type=file]::file-selector-button{font-family:var(--font-body);font-size:13px;
  font-weight:600;color:#fff;background:rgba(255,255,255,.14);border:0;border-radius:var(--r-pill);
  padding:8px 14px;margin-right:12px;cursor:pointer;min-height:32px}
.campo-anexo input[type=file]::file-selector-button:hover{background:var(--pn-orange-600)}
.campo-anexo>svg{width:18px;height:18px;color:rgba(255,255,255,.55);flex:0 0 auto}

/* ---- 31.14 Botão dentro da coluna de plano, na página Planos ----
   O cliente lembrou que alguém pode cair direto em /planos: cada coluna ganha
   o botão de contratar, e cada produto ganha o caminho para a própria página. */
.table tfoot td,.table tfoot th{border-bottom:0;padding-top:var(--sp-5);vertical-align:top}
.table tfoot .btn{width:100%;justify-content:center;text-align:center;font-size:13px;padding:11px 12px}
.planos-conhecer{display:flex;justify-content:center;margin-top:var(--sp-6)}
.planos-cards .pricing-card .btn{width:100%;justify-content:center;margin-top:auto}

/* ---- 31.17 Leitura do resultado usa a largura da caixa ----
   O parágrafo estava preso a 62ch e centralizado, o que rendia cinco linhas
   estreitas no meio de um painel largo. Sem a trava, o mesmo texto fecha em
   duas ou três. */
#diagnostico-out-resumo{max-width:none;margin-left:0;margin-right:0}
.calc-total .calc-total-linha+p,#diagnostico-out-resumo{font-size:16px;line-height:1.6}

/* ---- 31.15 Grade de integrações: oito lugares por card ----
   Sete marcas mais o aviso de que a lista é recorte, sempre duas fileiras de
   quatro. O aviso ocupa os lugares que sobram, então card com seis marcas e
   card com sete terminam do mesmo tamanho. */
.conexao-nome{hyphens:auto;-webkit-hyphens:auto}
.conexao-vaga{grid-column:span var(--vaga,1);display:flex;align-items:center;justify-content:center;
  gap:8px;border:1px dashed var(--ink-150);border-radius:var(--r-sm);text-align:center;
  font-family:var(--font-mono);font-size:12px;color:var(--ink-500);min-height:74px;padding:8px}
.conexao-vaga svg{width:15px;height:15px;color:var(--pn-orange-600);flex:0 0 auto}

/* ---- 31.16 Modal do WhatsApp ----
   Pedido do cliente: mais largo e mais baixo, campos lado a lado, botão e
   aviso centralizados, e nunca uma barra de rolagem. Os quatro campos em duas
   colunas cortam metade da altura; as consultas por ALTURA de janela apertam
   respiro e corpo quando a tela é baixa, que é onde a barra apareceria. */
.tag-whatsapp{display:inline-flex;align-items:center;gap:6px}
.tag-whatsapp svg{width:13px;height:13px;flex:0 0 auto}
.modal{max-width:620px}
.modal-body{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-5)}
.modal-body .field{margin-bottom:0}
.modal-foot{flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:var(--sp-3)}
.modal-foot .btn{order:1;min-width:240px}
#whatsapp-modal-estado{order:2;flex:0 0 auto;font-size:12px;color:var(--ink-400);margin:0}
/* Duas linhas, não três: a largura do modal comporta, e 52ch cortava antes
   da hora. 12px é o piso do telefone, e o aviso não pode ficar abaixo dele. */
.modal-consentimento{order:3;flex:0 0 auto;border-top:1px solid var(--ink-100);
  padding-top:var(--sp-3);max-width:none;font-size:12px;line-height:1.45}
/* No telefone as duas colunas CONTINUAM: quatro campos empilhados é o que
   estourava a altura em 360x640 e trazia a barra de rolagem de volta.
   Abaixo de 340px não cabe, e aí sim vale empilhar. */
@media(max-width:340px){.modal-body{grid-template-columns:1fr}}
@media(max-width:560px){
  .modal-body{gap:var(--sp-3) var(--sp-4)}
  .modal-body .field label{font-size:12px}
  .modal-foot .btn{min-width:0;width:100%}
}
@media(max-height:720px){
  .modal-head{padding-top:var(--sp-4)}
  .modal-body{padding-top:var(--sp-3);padding-bottom:var(--sp-4);gap:var(--sp-3) var(--sp-4)}
  .modal-foot{padding-bottom:var(--sp-4);gap:var(--sp-2)}
  .modal .input{padding-top:9px;padding-bottom:9px}
  #whatsapp-modal-title{font-size:17px}
}
@media(max-height:700px){
  .modal-head>div>.fine-print{display:none}
  .modal-consentimento{border-top:0;padding-top:0}
}

/* ============================================================
   32. ARTE DA PRIMEIRA SEÇÃO DA HOME  (2026-08-25)
   Pedido do cliente: a ilustração da operação entra à direita da primeira
   seção, grande. Grande aqui não é só uma coluna mais larga: a arte é 2,2:1,
   então numa coluna de 620px ela teria 280px de altura e os rótulos dentro
   dela (Meta Ads, ROAS real, Leads no mês) ficariam ilegíveis. Ela ocupa a
   coluna maior E passa da borda do container até o fim da janela, do mesmo
   jeito que o Painel Único do Vision, reaproveitando a conta de sangria que
   já estava provada em 31.8.
   ============================================================ */
.hero-arte-larga{
  /* Sem overflow:clip aqui. A grade mora dentro do .container, então clipar
     nela corta a arte na borda do CONTEÚDO, 24px antes da janela: a medição
     dizia que a arte chegava à borda (getBoundingClientRect devolve a posição
     de layout) e a foto mostrava o logo cortado. Quem segura a sobra é o
     overflow:hidden que .hero-full já tem, e essa sim é a largura da janela.
     Mesma conta de 31.8: metade do que sobra do container, mais o respiro, com
     a barra de rolagem descontada de um valor medido pelo JS. */
  --sangra:max(var(--sp-5),calc((100vw - var(--sbw,0px) - var(--container)) / 2 + var(--sp-5)))}

@media(min-width:861px){
  /* Duas larguras de coluna, não uma: em 1101px a coluna de 1,15 deixaria o
     texto com 419px e a H1 quebraria em seis linhas. Até 1100 as colunas são
     iguais; a arte só passa a puxar depois disso. */
  .hero-arte-larga{grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:center}
}
@media(min-width:1101px){
  .hero-arte-larga{grid-template-columns:.88fr 1.12fr}
  /* A margem negativa come parte do vão entre as colunas, nunca a coluna do
     texto: a arte vem depois no HTML e pintaria por cima da última palavra de
     cada linha. Do vão de 32px sobram 12px de respiro. */
  .hero-arte-larga .hero-visual{margin-left:calc(-1 * var(--sp-5))}
}
.hero-arte-larga .hero-visual{margin-right:calc(-1 * var(--sangra))}
/* .print-produto trava o print em 960px, o que aqui pararia a arte antes da
   borda a partir de ~1700px. */
.hero-arte-larga .hero-visual .print-produto{max-width:none;margin:0}
/* Sem canto arredondado e sem sombra, ao contrário do print do Vision: esta
   arte tem fundo transparente e recorte irregular, então a sombra seguiria a
   caixa e apareceria como um retângulo solto atrás do desenho. */
.hero-arte-larga .hero-visual img{width:100%;height:auto;border-radius:0;box-shadow:none}

@media(max-width:860px){
  /* Empilhada, o teto de 520px de .hero-visual daria 234px de altura numa arte
     de 2,2:1 e apagaria os rótulos. Aqui ela usa a tela toda e encosta na
     borda direita. */
  /* width:auto é o que faz a margem negativa ALARGAR. Com o width:100% que
     .hero-visual recebe no mobile, a margem só desloca a caixa: a arte ficava
     com a largura do conteúdo e parava 48px antes da borda direita. */
  .hero-arte-larga .hero-visual{max-width:none;width:auto;
    margin-left:calc(-1 * var(--sp-5));margin-right:calc(-1 * var(--sp-5))}
}

/* ============================================================
   33. PRINT TRAVADO EM 750px  (2026-08-25)
   Pedido do cliente para o Painel Único do Vision: a imagem tinha de aparecer
   INTEIRA, sem corte, com 750px de largura e altura proporcional. A sangria de
   31.8 fazia o oposto de propósito — passava da borda do container e o que
   sobrava ficava fora da tela.
   ============================================================ */
@media(min-width:1101px){
  /* .secao-visual é 1.02fr/.98fr, o que dá 631px de coluna em 1440: a imagem
     nunca chegaria aos 750px pedidos. Esta proporção entrega exatamente 749px
     de coluna quando o container trava em 1400, e encolhe junto abaixo disso. */
  .arte-750{grid-template-columns:.72fr 1fr}
}
/* O teto de 960px de .print-produto é o padrão de seção comum; aqui são 750. */
.arte-750 .secao-arte .print-produto{max-width:750px}

/* ============================================================
   34. AS IMAGENS DO PRODUTO  (2026-08-27)
   Entram 23 imagens reais no lugar dos painéis. Três encaixes novos:
   a primeira seção centralizada do Vision e do Flow, a figura centralizada
   dentro de uma seção comum, e a arte única que atravessa duas seções.
   ============================================================ */

/* ---- 34.1 Primeira seção centralizada, imagem embaixo ----
   Pedido do cliente para Vision e Flow. É exceção deliberada à regra de 7.4
   (duas colunas, texto à esquerda), registrada no RELATORIO.md. */
.hero-centro{display:block;text-align:center;position:relative;z-index:2}
/* Pedido do cliente (2026-08-27): H1 e parágrafo na largura TODA do conteúdo,
   1400px de container, centralizados. Sem teto de leitura, portanto.
   .h1-hero tem max-width:18ch e .body-l herda o teto de leitura da coluna:
   sem derrubar os dois, o texto continua numa caixa estreita e "centralizado"
   passa a significar centralizado DENTRO dessa caixa, não na tela. */
.hero-centro .hero-copy{max-width:none;margin:0 auto;min-width:0}
.hero-centro .hero-copy .h1-hero,
.hero-centro .hero-copy p{max-width:none}
/* .btn-row é flex e ficaria encostada à esquerda dentro do bloco centralizado */
.hero-centro .btn-row{justify-content:center}
.hero-centro .hero-visual{max-width:none;margin:var(--sp-8) auto 0;width:100%}
.hero-centro .hero-visual .print-produto{margin:0;max-width:none}
/* sem canto nem sombra próprios: a arte já traz a janela desenhada dentro */
.hero-centro .hero-visual img{width:100%;height:auto;display:block}
@media(max-width:860px){
  .hero-centro .hero-visual{margin-top:var(--sp-6)}
}

/* ---- 34.2 Figura centralizada dentro de uma seção ---- */
.figura-centro{max-width:900px;margin:var(--sp-7) auto 0}
.figura-centro .print-produto{margin:0;max-width:none}
.figura-centro img{width:100%;height:auto;display:block}
/* A grade que vem depois precisa de respiro, senão o card encosta na figura. */
.figura-centro + .grid{margin-top:var(--sp-7)}

/* ---- 34.3 Uma arte para duas seções ----
   Pedido do cliente: "Por que integrar é difícil" e "Painel único" continuam
   sendo duas seções, com o texto de cada uma no lugar, mas dividem UMA imagem.
   Segunda leva (2026-08-27): a imagem cresceu. Ela COMEÇA no topo da primeira
   seção, para dar para ler o que está escrito nela, e desce até passar do fim
   da segunda, entrando por baixo de "Integrações".

   A arte mora na PRIMEIRA seção, ancorada no topo dela. Envelope embrulhando
   as duas foi a primeira tentativa e não serve, porque
   #sec-vision-funcionalidades abre entre elas e as tags se cruzariam.

   Duas coisas fazem funcionar, e nenhuma é óbvia:
   1. z-index na PRIMEIRA seção. Ela vem antes no HTML, então sem isso o fundo
      da segunda pinta por cima da metade de baixo da imagem.
   2. as colunas da direita das duas seções ficam VAZIAS, de espaçador. Sem
      elas o texto correria por baixo da arte. */
.dupla-arte{position:relative;z-index:2}
.dupla-arte-camada .print-produto img{width:100%;height:auto;display:block}
/* O corte é em 1101px, e não em 901. Entre 901 e 1100 as duas seções ficam
   altas (o texto quebra em mais linhas) e a coluna da arte fica estreita: a
   arte deixa de alcançar a divisa, que é justamente o efeito pedido. Ali ela
   volta ao fluxo e aparece entre as duas, que entrega a mesma ideia. */
@media(min-width:1101px){
  /* Ancorada no TOPO da seção, e não na base: é isso que faz a arte começar
     junto com "Por que integrar é difícil" em vez de no meio dela. O topo é o
     do CONTEÚDO, por isso o padding da seção entra na conta. */
  /* A camada cobre a seção inteira e repete o .container por dentro. Ancorar
     em "left:44%" era tentador e errado: o ancestral posicionado é a SEÇÃO, que
     tem a largura da janela, não do container. A arte começava 48px antes do
     fim das linhas de texto e cobria a última palavra de cada uma. */
  .dupla-arte-camada{position:absolute;left:0;right:0;
    top:calc(var(--sp-9) + var(--sp-7));pointer-events:none;margin:0}
  .dupla-arte-camada>.container{width:100%}
  /* Teto calculado para a arte nunca alcançar a coluna do texto: com a grade em
     1fr/1.25fr a coluna do texto acaba em 42,3% do container, e 55% de largura
     deixam a arte começar depois disso, com respiro. */
  .dupla-arte-camada .print-produto{margin:0 0 0 auto;max-width:min(55%,745px)}
  /* As duas seções dividem a mesma proporção de colunas, senão os espaçadores
     vazios não batem e a arte fica alinhada com uma e desalinhada com a outra. */
  .dupla-arte .secao-visual,
  .dupla-par .secao-visual{grid-template-columns:1fr 1.25fr}
  /* A arte passa do fim de "Painel único" e entra POR BAIXO de "Integrações",
     que é o que o cliente pediu. Sem este z-index ela pintaria por cima do
     título da seção, e "Integrações" é texto escuro: deu 1:1 na medição. */
  .cobre-dupla{position:relative;z-index:3}
  /* O card "O Vision resolve os três problemas" ocupa a largura toda da seção
     e correria por baixo da arte. Aqui ele fica na coluna do texto, que é onde
     o texto dele já estava. Só no desktop: empilhado não há colisão. */
  .dupla-arte>.container>.card-accent{max-width:42%}
}
@media(max-width:1100px){
  /* Empilhada, a camada volta ao fluxo e aparece onde está no HTML: entre o
     parágrafo da primeira seção e o card que a fecha. */
  .dupla-arte-camada{margin:var(--sp-6) 0 0}
  .dupla-arte-camada>.container{padding:0}
  .dupla-arte-camada .print-produto{margin:0 auto;max-width:520px}
  /* Com a arte fora da grade, as duas seções voltam a ser uma coluna só: a
     coluna vazia de espaçador deixaria metade da linha em branco. */
  .dupla-arte .secao-visual,
  .dupla-par .secao-visual{grid-template-columns:1fr}
  .secao-visual .secao-arte:empty{display:none}
}

/* ---- 34.4 Print que já vem com a própria moldura ----
   Imagem de fundo transparente que traz a janela do navegador desenhada, ou
   ilustração sem caixa. Borda e canto arredondado do CSS desenhariam um
   retângulo em volta do desenho, e a sombra seguiria a caixa, não a arte. */
.print-solto img,
.section .print-solto img{border:0;border-radius:0;box-shadow:none;background:none}

/* ============================================================
   35. A ARTE DO HERO TRANSBORDA PARA A FAIXA DE MARCAS  (2026-08-27)
   Pedido do cliente para Vision e Flow: a linha azul da primeira seção acaba
   na METADE da imagem. A metade de baixo fica sobre a faixa branca das
   marcas, e o carrossel começa abaixo da imagem.
   ============================================================ */
/* A conta não precisa de JavaScript porque as duas pontas usam a MESMA base de
   largura: a margem negativa da arte resolve contra a coluna do container, e o
   respiro do mural resolve contra o container também. --rz é a proporção
   largura/altura da arte, declarada no <main> de cada uma das duas páginas. */
.hero-transborda{position:relative;z-index:2;overflow:visible;padding-bottom:0}
/* O feixe de luz de .hero-full sai 30% para cima e para baixo contando com o
   overflow:hidden que acabou de sair daqui. Sem isso ele alonga a página. */
.hero-transborda::before{top:0;bottom:0}
.hero-transborda .hero-visual{margin-bottom:calc(-50% / var(--rz))}
/* O mural começa abaixo da arte: mesma metade de altura, mesma base. */
.hero-transborda + .faixa-marcas .marquee{margin-top:calc(50% / var(--rz))}
@media(max-width:860px){
  /* No celular a arte é bem mais baixa e transbordar deixaria o mural colado
     nela. Volta a ficar dentro da seção. */
  .hero-transborda{padding-bottom:var(--sp-7)}
  .hero-transborda .hero-visual{margin-bottom:0}
  .hero-transborda + .faixa-marcas .marquee{margin-top:0}
}

/* ============================================================
   36. SANGRIA PARA A ESQUERDA, ARTE MENOR E ARTE CORTADA  (2026-08-27)
   ============================================================ */

/* ---- 36.1 A arte sangra para a ESQUERDA ----
   Espelho de 31.8. Usada onde o cliente pediu a imagem do lado esquerdo indo
   até a borda: Kanban e Campanhas no Flow, IA Copilot no Vision. Vai junto com
   .invertida, que é quem manda a coluna do texto para o segundo lugar. */
.section:has(> .container > .sangra-esquerda){overflow-x:clip}
.sangra-esquerda{
  --sangra:max(var(--sp-5),calc((100vw - var(--sbw,0px) - var(--container)) / 2 + var(--sp-5)))}
@media(min-width:901px){
  /* a arte é a primeira coluna e é a maior; .invertida põe o texto na segunda */
  .sangra-esquerda{grid-template-columns:1.32fr .68fr;align-items:center;gap:var(--sp-7)}
  .sangra-esquerda.invertida .secao-texto{order:2}
  .sangra-esquerda .secao-arte{order:1;margin-right:calc(-1 * var(--sp-5))}
}
.sangra-esquerda .secao-arte{margin-left:calc(-1 * var(--sangra))}
.sangra-esquerda .secao-arte .print-produto{max-width:none;margin:0}
.sangra-esquerda .secao-arte img{width:100%;height:auto}
@media(max-width:900px){
  .sangra-esquerda .secao-arte{margin-left:calc(-1 * var(--sp-5));margin-right:calc(-1 * var(--sp-5))}
}

/* ---- 36.2 Arte 30% menor dentro da própria coluna ----
   Caixa de entrada do Flow: a ilustração saiu da vitrine (fica só a cor da
   seção) e encolheu. Como ela é transparente e tem halo, sem a vitrine ela
   respira melhor menor. */
.arte-menor .secao-arte .print-produto{max-width:70%;margin-left:auto}
@media(max-width:900px){.arte-menor .secao-arte .print-produto{max-width:100%}}

/* ---- 36.3 Arte 40% menor e cortada pela metade no fim da seção ----
   Feedback Loop: a tela do Meta Ads é altíssima. Ela encolhe e desce até
   metade dela ficar fora da seção, que é o corte pedido. O clip da seção já
   existe (36.1/31.8) e é ele que faz o corte acontecer no fim do bloco. */
@media(min-width:901px){
  .arte-cortada .secao-arte{align-self:start;max-height:none}
  .arte-cortada .secao-arte .print-produto{max-width:60%;margin-left:auto}
  /* meia altura para fora: a seção recorta o resto */
  .arte-cortada{overflow:hidden}
  /* O texto fica centralizado na vertical (pedido do cliente, 2026-09-01).
     A arte não se move junto porque .arte-cortada .secao-arte declara o
     próprio align-self:start, que ganha do align-items do container. */
  .arte-cortada .secao-visual{align-items:center}
  .arte-cortada .secao-arte .print-produto img{margin-bottom:-25%}
}

/* ============================================================
   37. A PRIMEIRA SEÇÃO OCUPA A TELA INTEIRA  (2026-08-27)
   Pedido do cliente: a faixa azul da primeira seção tem de ter exatamente a
   altura da janela em TODAS as páginas, com todo o conteúdo (texto, botões e
   imagem) centralizado dentro dela. O primeiro scroll já entrega a próxima
   seção.

   Isso REVERTE o transbordo pedido antes para Vision e Flow, em que a faixa
   azul acabava na metade da imagem: as duas coisas não convivem, porque uma
   pede a imagem para fora da faixa e a outra pede tudo dentro.
   ============================================================ */
.hero-full{
  /* 100svh e não 100vh: no celular a barra do navegador entra e sai, e com
     100vh a seção fica mais alta que a tela justamente no primeiro quadro.
     No celular fica em min-height: ali o texto é longo e travar a altura
     cortaria palavra, que é pior do que rolar um pouco mais. */
  min-height:100svh;
  padding-top:calc(var(--header-h) + var(--sp-6));
  padding-bottom:var(--sp-6);
  display:flex;align-items:center}
#main-content>section.hero-full:first-child{padding-top:calc(var(--header-h) + var(--sp-6))}
.hero-full>.container{width:100%}

/* O transbordo foi desfeito: a arte volta para dentro da faixa e o mural de
   marcas dispensa o respiro que existia para não ficar por baixo dela. */
.hero-transborda{padding-bottom:var(--sp-6);overflow:hidden}
.hero-transborda .hero-visual{margin-bottom:0}
.hero-transborda + .faixa-marcas .marquee{margin-top:0}

/* Com a altura travada na tela, a imagem é quem cede: ela ocupa a sobra e
   nunca é cortada, porque object-fit:contain só reduz, nunca recorta. */
@media(min-width:861px){
  .hero-centro{display:flex;flex-direction:column;justify-content:center;
    min-height:0}
  .hero-centro .hero-visual{flex:1 1 auto;min-height:0;display:flex;align-items:center}
  .hero-centro .hero-visual .print-produto{width:100%;height:100%;display:flex;align-items:center}
  .hero-centro .hero-visual img{height:100%;width:100%;object-fit:contain;object-position:center}
}

/* Do tablet para cima a altura é TRAVADA na tela, não só mínima: com
   min-height o conteúdo mais alto (Vision e Flow, que têm imagem grande)
   empurrava a seção para 1266px numa janela de 900. Travada, quem cede é a
   imagem, que encolhe por object-fit:contain e nunca é cortada. */
@media(min-width:861px){
  .hero-full{height:100svh}
  /* height, e não max-height: percentual de altura só resolve contra pai de
     altura DEFINIDA. Com max-height o navegador tratava como "none" e a
     imagem do topo do Vision e do Flow estourava 166px numa janela de 800. */
  .hero-full>.container{height:100%;min-height:0;
    display:flex;flex-direction:column;justify-content:center}
  .hero-full>.container>*{min-height:0}
  .hero-centro{height:100%}
}

/* O topo de duas colunas (.hero-arte-larga) precisa do mesmo tratamento do
   centralizado: com a altura travada na tela, a arte quadrada do Experts e do
   C-Level (1:1, 807px de lado) passava 53px do fim da seção. A corrente de
   altura tem de ser DEFINIDA até a <img>, senão max-height percentual não
   resolve e vira "none". */
@media(min-width:861px){
  .hero-arte-larga{height:100%;align-items:stretch}
  .hero-arte-larga .hero-copy{align-self:center}
  .hero-arte-larga .hero-visual{min-height:0;display:flex;align-items:center}
  .hero-arte-larga .hero-visual .print-produto{height:100%;display:flex;align-items:center;width:100%}
  .hero-arte-larga .hero-visual img{max-height:100%;width:100%;height:auto;object-fit:contain}
}

/* ============================================================
   38. LANÇAMENTO: A DECORAÇÃO DA PRIMEIRA SEÇÃO  (2026-08-27)
   Pedido do cliente: um elemento flutuante com luz neon percorrendo a primeira
   seção. São três trajetórias curvas subindo, com um foguete no fim de cada
   uma. Opacidade baixa de propósito: tem de dar para ver sem competir com o
   texto, que é o que a seção existe para dizer.
   ============================================================ */
.hero-lancamento{position:absolute;inset:0;z-index:1;pointer-events:none;
  overflow:hidden;opacity:1}
.hero-lancamento svg{width:100%;height:100%;display:block}
/* O traço é desenhado com o risco todo visível e baixo; a luz é um segundo
   traço pontilhado que corre por cima. */
/* O halo substitui o feGaussianBlur: traço largo, apagado e PARADO. */
.lanc-halo path{opacity:.10}
.lanc-trilhas path{opacity:.42}
.lanc-foguetes g{opacity:.5}
/* A luz corre dentro de uma camada própria: sem isto o repinte de cada quadro
   sobe para a seção inteira, que é o que apareceu como 3,1s de "Other" no
   perfil do Lighthouse. */
.hero-lancamento svg{contain:paint}

@media(prefers-reduced-motion:no-preference){
  /* A luz percorre o risco: um tracejado curto com um vão enorme, empurrado
     por stroke-dashoffset. pathLength não é declarado, então o valor precisa
     ser maior que o comprimento real de qualquer um dos três.
     Só anima com .lanc-liga, que o JS põe depois que a página assenta:
     stroke-dashoffset não é composto na GPU e o movimento desde o primeiro
     quadro custava centenas de milissegundos de bloqueio no celular. */
  .lanc-liga .lanc-trilhas path{stroke-dasharray:110 2400;stroke-dashoffset:2510;
    animation:lanc-luz 9s linear infinite}
  .lanc-t2{animation-delay:-3s!important}
  .lanc-t3{animation-delay:-6s!important}
  /* Mesma flutuação de .float, com tempos diferentes para os três não subirem
     e descerem juntos, que é o que denuncia o laço. */
  .lanc-liga .lanc-foguetes g{animation:float 6s var(--ease-inout) infinite}
  .lanc-f2{animation-duration:7.5s;animation-delay:-2s}
  .lanc-f3{animation-duration:5.2s;animation-delay:-4s}
}
@keyframes lanc-luz{to{stroke-dashoffset:0}}

@media(prefers-reduced-motion:reduce){
  /* Sem movimento a decoração perde a razão de existir e vira ruído atrás do
     texto: some. */
  .hero-lancamento{display:none}
}
@media(max-width:640px){
  /* No telefone a primeira seção já é densa; a decoração fica mais discreta. */
  .hero-lancamento{opacity:.6}
}

/* ============================================================
   39. LINHA DO TEMPO DA HOME  (2026-08-27)
   A equação da receita passa a ser uma linha do tempo: as quatro etapas
   acendem em sequência e a receita entra por último, como um aviso, e tudo
   fica visível. As palavras são as mesmas da equação.
   ============================================================ */
/* Bloco que desceu para dentro da coluna do texto (pedido do cliente) não pode
   manter duas colunas: a coluna do texto tem ~450px numa seção que sangra, e
   os dois cards ficavam com 210px, quebrando a frase a cada três palavras.
   Dentro da coluna eles empilham. */
.secao-texto .grid-2,
.secao-texto .grid-3{grid-template-columns:1fr}
.secao-texto .card{min-width:0}

/* ============================================================
   40. RODADA DE 2026-08-28
   ============================================================ */

/* ---- 40.1 O conteúdo da primeira seção fica centralizado na vertical ----
   Pedido do cliente: a mesma sobra em cima e embaixo do bloco inteiro, não
   importa quanto texto a página tem.

   Isto desfaz a âncora no topo da leva anterior, que existia para igualar a
   distância do menu até a primeira palavra entre as páginas. As duas coisas
   não convivem: centralizado, um H1 de quatro linhas começa mais acima que um
   de três, e é assim que o cliente quer.

   flex-shrink:0 nos filhos é o que impede a barra de selos de ser espremida.
   Ela é item de flex num container de altura travada e encolhia até 62px de
   caixa com selos de 76px, então o overflow:hidden do mural comia 6px da base
   de cada marca. Quem cede altura é a imagem, por object-fit:contain. */
@media(min-width:861px){
  .hero-full>.container{justify-content:center}
  /* Não encolher: a barra de selos e a linha de botões têm altura própria. */
  .hero-full>.container>*{flex-shrink:0}
  /* A grade não cresce para empurrar o resto; ela ocupa o que precisa e o
     conjunto todo é que fica centralizado. */
  .hero-full>.container>.hero-split-grid{flex:0 1 auto;min-height:0;align-items:center}
  .hero-full .hero-split-grid .hero-copy{align-self:center}
  .hero-full .hero-split-grid .hero-visual{align-self:center;min-height:0;
    display:flex;align-items:center;justify-content:center}
  .hero-full .hero-split-grid .hero-visual>*{width:100%}
}

/* ---- 40.1b APOSENTADO pelo 43.5 ----
   O rótulo que quebrava dentro do botão foi desfeito pela regra de 2026-08-28:
   texto de botão nunca fica em duas linhas. A regra nova está no 43.5. */

/* ---- 40.2 O texto do topo encolhe com a ALTURA da janela, não só com a
   largura. Sem isso, em 1280x720 os botões da B2B e da E-commerce ficavam 48px
   abaixo do fim da faixa e o overflow:hidden os cortava sem avisar: a medição
   de largura passava e só a foto pegava. min() entre as duas dimensões é o que
   faz o topo caber em monitor baixo e continuar grande em monitor alto. */
@media(min-width:861px){
  .h1-hero{font-size:clamp(28px,min(4vw,5.6vh),46px)}
  .hero-full .body-l{font-size:clamp(15px,min(1.25vw,1.9vh),19px)}
  .hero-full .btn-lg{padding:clamp(11px,1.5vh,16px) clamp(20px,2.1vw,30px)}
}
/* Janela baixa de verdade: o respiro entre os blocos do topo também cede. */
@media(min-width:861px) and (max-height:760px){
  .hero-full{padding-top:calc(var(--header-h) + var(--sp-5));padding-bottom:var(--sp-5)}
  .hero-copy .btn-row{margin-top:var(--sp-5)}
}

/* ---- 40.3 Vision e Flow: a arte do topo é grande e atravessa ----
   Pedido do cliente: a arte começa na primeira seção e passa para a de baixo.
   A faixa azul acaba na METADE dela e o mural de marcas começa abaixo.

   --meia é metade da ALTURA da arte, e é o mesmo valor nas duas pontas: a
   margem negativa que joga a metade de baixo para fora da faixa, e o respiro
   que empurra o mural para baixo dela. Antes eram duas contas com bases
   diferentes (a coluna do texto de um lado, a janela inteira do outro), e em
   janela baixa a arte cobria o mural.

   A largura útil é calculável: o container trava em --container e o respiro
   lateral é conhecido. --sbw é a barra de rolagem, medida em JS, porque 100vw
   a inclui e a área desenhada não. */
.hero-transborda,
.hero-transborda + .faixa-marcas{
  --arte-larg:calc(min(var(--container), 100vw - var(--sbw,0px)) - 2 * var(--sp-5));
  --meia:calc(var(--arte-larg) / var(--rz) / 2)}

@media(min-width:861px){
  /* height:auto com min-height, e não height travada com min-height:max-content:
     max-content num container flex ignora a margem negativa dos filhos e a
     seção continuava com 700px enquanto o conteúdo pedia 845. Resultado: a
     arte descia 108px a mais e cobria o mural. Assim a faixa tem a altura da
     tela quando o conteúdo cabe, e cresce quando não cabe. */
  .hero-transborda{overflow:visible;padding-bottom:0;height:auto;min-height:100svh}
  /* o feixe de luz de .hero-full contava com o overflow:hidden que saiu daqui */
  .hero-transborda::before{top:0;bottom:0}
  .hero-transborda .hero-centro{justify-content:flex-start}
  /* margin-top:auto encosta a arte na base quando sobra espaço; o padding é o
     respiro que garante que ela nunca encoste nos botões quando NÃO sobra. */
  .hero-transborda .hero-centro .hero-visual{flex:0 0 auto;display:block;
    margin-top:auto;padding-top:var(--sp-7);margin-bottom:calc(-1 * var(--meia))}
  .hero-transborda .hero-centro .hero-visual .print-produto{display:block;height:auto;margin:0}
  /* height:auto: aqui a arte não cede altura, ela manda. object-fit sairia
     sobrando e a imagem voltaria a encolher junto com a janela. */
  .hero-transborda .hero-centro .hero-visual img{height:auto;width:100%;object-fit:fill}
  /* meia altura da arte mais um respiro: sem o respiro o mural encosta na
     base da imagem. */
  .hero-transborda + .faixa-marcas{padding-top:calc(var(--meia) + var(--sp-6))}
  /* o respiro agora é da faixa; o mural volta ao normal */
  .hero-transborda + .faixa-marcas .marquee{margin-top:0}
}

/* ---- 40.4 Colunas iguais (50/50) ----
   Pedido do cliente para a Caixa de entrada do Flow, para "Para quem o Vision
   faz sentido" e para os dois parágrafos citáveis que ganharam arte. */
@media(min-width:901px){
  .secao-visual.par-igual{grid-template-columns:1fr 1fr;align-items:center}
}
.par-igual .secao-arte .print-produto{margin:0;max-width:100%}
.par-igual .secao-arte img{width:100%;height:auto}
/* Dentro da vitrine a arte não leva moldura própria: a vitrine já é a caixa. */
.vitrine .print-produto{margin:0}

/* ---- 40.5 "Por que integrar é difícil": a arte cresce ----
   A coluna do texto encolhe de 42,3% para 40% do container e a arte passa de
   745 para 840px de teto. O vão entre as duas continua existindo: sem ele a
   arte cobre a última palavra de cada linha, que já aconteceu uma vez. */
@media(min-width:1101px){
  .dupla-arte .secao-visual,
  .dupla-par .secao-visual{grid-template-columns:.8fr 1.45fr}
  .dupla-arte-camada .print-produto{max-width:min(62%,900px)}
  .dupla-arte>.container>.card-accent{max-width:36%}
}

/* ---- 40.6 Feedback Loop: a arte cresce e encosta no texto ----
   Era 60% da coluna, encostada na borda direita. Agora ocupa a coluna inteira,
   que já sangra até a janela, e começa junto do texto. O corte na base
   continua: é o que o cliente pediu na leva anterior. */
@media(min-width:901px){
  .arte-cortada .secao-arte .print-produto{max-width:100%;margin-left:0}
  .arte-cortada .secao-arte .print-produto img{margin-bottom:-42%}
}

/* ---- 40.7 A arte que passa por baixo da seção seguinte ----
   Marketing e Growth, pedido do cliente: a arte cresce 50%, a altura da seção
   não muda, e a sobra entra atrás do bloco de baixo.
   overflow-x:clip com overflow-y:visible é combinação válida (clip não cria
   contexto de rolagem), e é ela que segura a sangria lateral sem cortar a
   altura. Sem o z-index na seção de baixo, a sobra pinta por cima do título
   dela e o contraste vai a 1:1, que já custou uma refação. */
.section:has(> .container > .arte-passa-baixo){overflow-x:clip;overflow-y:visible;
  position:relative;z-index:0}
@media(min-width:901px){
  .arte-passa-baixo{align-items:start}
  .arte-passa-baixo .secao-arte{align-self:start}
  /* A margem negativa tira da CONTA da altura o pedaço que vai ficar atrás da
     seção de baixo: sem ela a seção cresce até caber a arte inteira e nada
     passa por baixo de nada, que foi o primeiro resultado. Percentual de
     margem resolve contra a LARGURA, então o número segue a proporção desta
     arte (1600x2028): 45% da largura são 35% da altura dela. */
  .arte-passa-baixo .secao-arte .print-produto img{margin-bottom:-45%}
}
.cobre-arte{position:relative;z-index:2}

/* ---- 40.8 O card de uma frase só, com ícone ----
   "O Vision resolve os três problemas". O ícone fica ao lado, não acima: é uma
   linha de texto, e um ícone empilhado sobre ela dobraria a altura do card. */
.card-frase{flex-direction:row;align-items:center;gap:var(--sp-4)}
.card-frase .card-icon{margin-bottom:0;flex:0 0 auto}
@media(max-width:520px){
  .card-frase{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
}

/* ---- 40.9 Parágrafo citável com arte: a coluna da arte é a maior ----
   A vitrine come 48px de cada lado, e com colunas iguais a ilustração ficava
   em 548px numa seção que tem só três linhas de texto do outro lado. */
@media(min-width:901px){
  .secao-visual.par-arte{grid-template-columns:1fr 1.25fr;align-items:center}
}
.par-arte .secao-arte .print-produto{margin:0;max-width:100%}
.par-arte .secao-arte img{width:100%;height:auto}


/* ============================================================
   41. ESCALA FLUIDA  (2026-08-28)
   Pedido do cliente: título, texto, CTA e botão têm de acompanhar a resolução
   do monitor. Todo clamp abaixo foi calibrado para devolver o valor ATUAL em
   1440px: nada muda no tamanho em que o site foi desenhado e conferido. Acima
   disso cresce até um teto; abaixo, encolhe até o piso de leitura.
   O piso nunca desce de 12px, que é a regra de mobile do projeto.
   ============================================================ */
.section-title{font-size:clamp(23px,1.95vw,34px)}
.section-desc{font-size:clamp(15px,1.11vw,19px)}
.h1-page{font-size:clamp(26px,2.36vw,40px)}
.h4{font-size:clamp(16.5px,1.25vw,21px)}
.body-l{font-size:clamp(16px,1.25vw,21px)}
.body-m{font-size:clamp(15px,1.11vw,19px)}
.fine-print{font-size:clamp(12.5px,.9vw,15px)}
/* Cards: o título e o corpo. Eram 19px e 14px fixos. */
.card h3,.card .card-titulo{font-size:clamp(17px,1.32vw,22px)}
.card p{font-size:clamp(13.5px,.97vw,16.5px)}
.card-link{font-size:clamp(13.5px,.97vw,16.5px)}
/* As duas classes que substituíram os font-size inline dos <h3> de card. */
/* Especificidade: .card h3 vale (0,1,1) e ganharia de uma classe sozinha.
   O style inline que estas classes substituíram ganhava de tudo, então elas
   precisam do mesmo peso para o tamanho não mudar. */
.h3-card,.card h3.h3-card{font-size:clamp(16.5px,1.25vw,21px)}
.h3-card-s,.card h3.h3-card-s{font-size:clamp(15px,1.11vw,19px)}
/* Botões: o alvo de toque continua vindo de min-height, não do tamanho da
   letra, então crescer a fonte não muda a acessibilidade de baixo. */
.btn{font-size:clamp(14px,1.04vw,17px)}
.btn-lg{font-size:clamp(15px,1.11vw,18px)}
.btn-sm{font-size:clamp(12.5px,.9vw,15px)}
/* Ícone do botão acompanha a letra, senão em 2560 a seta vira um ponto. */
.btn svg{width:1.2em;height:1.2em}
.eyebrow{font-size:clamp(12px,.83vw,14px)}
.tag,.pill{font-size:clamp(11px,.76vw,13px)}
@media(max-width:900px){.tag,.pill{font-size:12px}}
/* A tabela comparativa e os dados em mono. */
.table td{font-size:clamp(14px,.97vw,16.5px)}
.data-l{font-size:clamp(26px,2.22vw,38px)}
.data-m{font-size:clamp(15px,1.11vw,19px)}

/* O quadradinho do consentimento tinha 18px. No telefone o alvo sobe para 24 e
   o rótulo inteiro, que é clicável, passa dos 30px de altura exigidos. */
/* O rótulo inteiro é clicável: é ele o alvo, não o quadradinho. 30px de
   altura mínima em QUALQUER largura, e no telefone a caixa também cresce. */
.check{min-height:30px;display:flex;align-items:center}
@media(max-width:900px){
  .check{padding-left:36px;align-items:flex-start}
  .check input{width:24px;height:24px;top:1px}
}

/* WCAG 2.2 AA (2.5.8): alvo de 24px. O "Entrar" do header é texto puro e
   tinha 21px de altura. O respiro vertical resolve sem mexer na altura do
   header, que é ditada pelos botões de 44px. */
.site-header .text-link{min-height:32px}

/* O <picture> que embrulha o print existe só para o telefone escolher a
   variante leve. Ele não pode virar uma caixa no layout: as correntes de
   altura do topo (flex + height:100%) contam com a <img> como filha direta. */
.print-produto picture{display:contents}

/* O logo do header tinha 28px de altura de alvo, 2px abaixo do piso de 30 do
   projeto. A área extra vem de um ::after posicionado, e não de padding:
   padding empurrava a altura do header de 61 para 63px, e --header-h é
   constante de layout que alinha âncora, offset de conteúdo e barra lateral. */
.header-logo{position:relative}
.header-logo::after{content:"";position:absolute;inset:-4px 0}

/* ============================================================
   42. CAIXA AZUL DO EXPERTS E CARDS CONECTADOS  (2026-08-28)
   ============================================================ */

/* ---- 42.1 A caixa azul com texto dentro ----
   Pedido do cliente: a seção fica BRANCA e o conteúdo entra numa caixa azul
   de cantos redondos, que vai do texto até a imagem. A caixa é a .vitrine do
   design system, que já traz o degradê e o halo laranja; o que entra aqui é
   a cor do texto, porque a vitrine nasceu para embrulhar só imagem. */
.vitrine.caixa-texto{color:#fff}
.vitrine.caixa-texto p{color:rgba(255,255,255,.88)}
.vitrine.caixa-texto h2,.vitrine.caixa-texto h3{color:#fff}
@media(min-width:901px){
  .secao-visual.caixa-par{grid-template-columns:1fr 1fr;align-items:center}
}
.caixa-par .secao-arte .print-produto{margin:0;max-width:100%}
.caixa-par .secao-arte img{width:100%;height:auto}
/* O painel é HTML e não tem largura própria: sem isto ele fica do tamanho do
   conteúdo e a metade da caixa aparece vazia. */
.caixa-par .secao-arte>.painel{width:100%}

/* ---- 42.2 Cards conectados ----
   Pedido do cliente: ligação de um card ao outro. Na grade de duas colunas a
   ligação é horizontal entre as colunas e vertical entre as linhas, o que
   liga os quatro entre si. Empilhados no telefone só sobra a vertical.
   Os traços moram no vão da grade (--sp-5), por isso a medida é exata.
   .card comum não tem overflow:hidden (só .card-accent tem), então o
   pseudo-elemento aparece fora da borda. */
.cards-conectados .card{position:relative}
.cards-conectados .card::after,
.cards-conectados .card::before{content:"";position:absolute;pointer-events:none;
  background:linear-gradient(90deg,var(--pn-blue-200),var(--pn-orange-300))}
/* horizontal: sai do card da esquerda e vai até o da direita */
.cards-conectados .card::after{top:50%;right:calc(-1 * var(--sp-5));
  width:var(--sp-5);height:2px;transform:translateY(-1px)}
/* vertical: desce do card de cima para o de baixo */
.cards-conectados .card::before{left:50%;bottom:calc(-1 * var(--sp-5));
  width:2px;height:var(--sp-5);transform:translateX(-1px);
  background:linear-gradient(180deg,var(--pn-blue-200),var(--pn-orange-300))}
/* na grade de duas colunas: horizontal só nos ímpares, vertical só na 1a linha */
@media(min-width:641px){
  .cards-conectados .card:nth-child(even)::after{display:none}
  .cards-conectados .card:nth-child(n+3)::before{display:none}
}
/* empilhado: some a horizontal e a vertical liga todos menos o último */
@media(max-width:640px){
  .cards-conectados .card::after{display:none}
  .cards-conectados .card:last-child::before{display:none}
}


/* ============================================================
   43. COLUNA DE TEXTO EM 50%, PARÁGRAFO CITÁVEL COMO REGRA,
       BOTÃO EM UMA LINHA SÓ  (2026-08-28, quarta leva)
   ============================================================ */

/* ---- 43.1 A coluna do texto vale metade da área de conteúdo ----
   Pedido do cliente para seis seções do Flow e quatro do Vision. Todas usam
   .sangra-direita ou .sangra-esquerda, que nasceram com a coluna da arte
   maior (1.32 contra 0.68). Agora as duas colunas são iguais e quem faz a
   arte continuar grande é a SANGRIA: ela vai da linha do meio até a borda da
   janela, então passa da área de conteúdo em vez de caber dentro dela. */
@media(min-width:901px){
  .sangra-direita{grid-template-columns:1fr 1fr}
  .sangra-esquerda{grid-template-columns:1fr 1fr}
  /* Exceção declarada: em Marketing e Growth o cliente pediu esta arte 50%
     maior na leva anterior, e ela continua com a proporção de lá. O contexto
     de sizes dela é o 'sangra-larga', que é a conta antiga. */
  .sangra-esquerda.arte-passa-baixo{grid-template-columns:1.32fr .68fr}
}

/* ---- 43.2 O parágrafo citável, agora um layout só no site inteiro ----
   Pedido do cliente: o que foi feito no Experts vira regra. Seção BRANCA,
   conteúdo dentro de uma caixa azul de cantos redondos, metade texto e
   metade elemento visual. Vale para os dez parágrafos citáveis.
   A cor do texto e a grade 50/50 estão no bloco 42 (.vitrine.caixa-texto e
   .caixa-par); aqui ficam só os ajustes que a regra trouxe. */
/* Dentro da caixa o parágrafo é o conteúdo principal, não uma legenda: ele
   usa a coluna inteira e não o max-width de leitura do .body-l. */
.caixa-texto .secao-texto>p{max-width:none;margin:0}
/* Sem isto a caixa fica com o respiro de 48px também no telefone, onde ela
   já disputa espaço com o respiro do container. */
@media(max-width:640px){
  .caixa-texto .secao-visual{gap:var(--sp-5)}
}

/* ---- 43.3 A arte que atravessa duas seções passa da área de conteúdo ----
   Pedido do cliente: "que ela ultrapasse a área de conteúdo e vá mais para a
   direita e também entre embaixo da seção Integrações".

   Com o texto em 50%, a arte começa exatamente na linha do meio do container
   e termina na borda da JANELA. --sangra é a mesma conta das outras seções
   que sangram: metade do que sobra do container mais o respiro lateral, com
   a barra de rolagem descontada de um valor medido.

   Ela não pode ir além disso: passar da borda da janela criaria overflow
   horizontal, e aqui não há como clipar. O clip teria de morar na seção, e é
   justamente a seção que a arte precisa atravessar. */
.dupla-arte-camada{
  --sangra:max(var(--sp-5),calc((100vw - var(--sbw,0px) - var(--container)) / 2 + var(--sp-5)))}
@media(min-width:1101px){
  .dupla-arte .secao-visual,
  .dupla-par .secao-visual{grid-template-columns:1fr 1fr}
  /* O card "O Vision resolve os três problemas" fica na coluna do texto. */
  .dupla-arte>.container>.card-accent{max-width:calc(50% - var(--sp-4))}
  /* width em porcentagem resolve contra o container, que é a área de
     conteúdo: 50% dele é a linha do meio. A margem negativa leva a borda
     direita até a janela. max-width:none porque .print-produto trava em
     960px e a arte passa disso a partir de ~1520px de janela. */
  .dupla-arte-camada .print-produto{margin:0 calc(-1 * var(--sangra)) 0 auto;
    max-width:none;width:calc(50% + var(--sangra))}
}

/* ---- 43.4 Texto de botão, link e menu nunca quebra em duas linhas ----
   Regra do cliente (2026-08-28): "NUNCA COLOCAR TEXTO DE BOTÃO, LINK, MENU EM
   DUAS LINHAS". Ela desfaz o rótulo que quebrava dentro do botão do topo,
   criado na leva anterior para os dois botões ficarem sempre lado a lado.

   As duas coisas convivem com wrap na LINHA, não no rótulo: com o texto
   travado em uma linha e o botão sem encolher abaixo do próprio conteúdo, o
   flex mantém os dois lado a lado enquanto couberem e empilha quando não
   couberem mais. O ponto de virada é medido pelo navegador, não chutado. */
.btn,
.card-link,
.text-link,
.nav-link,
.nav-toggle,
.drawer-item,
.drawer-sub a,
.footer-col a,
.footer-legais a,
.mm-link b,
.mm-destaque-link,
.tbl-acao .btn{white-space:nowrap}
/* O <span> do mega-menu é frase de apoio, não rótulo de link: continua
   quebrando, senão a caixa do menu estoura. */
.mm-link span{white-space:normal}

/* ---- 43.5 APOSENTADO pelo 44.1 ----
   O wrap que existia aqui empilhava o par quando ele não cabia, e o flex-grow
   esticava cada botão até a largura da faixa. O cliente desfez as duas coisas
   na leva seguinte: ver 44.1. */

/* ---- 43.6 A equação da Home, centralizada e ligada ----
   Pedido do cliente: melhorar o visual das quatro etapas e centralizar na
   seção, com a mesma ideia de cards ligados usada no Experts.

   A faixa é uma grade de cinco lugares: as quatro etapas e a receita, que é
   o resultado. Em 1100 vira 2 colunas, em 640 vira uma. A ligação é um traço
   no vão da grade, igual ao dos cards conectados: horizontal quando estão
   lado a lado, vertical quando empilham. */
.equacao-faixa{display:grid;gap:var(--sp-5);align-items:stretch;
  grid-template-columns:repeat(4,1fr);max-width:1100px;margin:0 auto}
.eq-passo{position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-4);
  border-radius:var(--r-lg);background:#fff;border:1px solid var(--pn-blue-100);
  box-shadow:0 18px 44px -34px rgba(4,0,128,.55)}
.eq-marco{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--grad-brand-deep);color:#fff;flex:0 0 auto}
.eq-marco svg{width:21px;height:21px}
.eq-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  color:var(--pn-orange-700)}
/* .eq-rot era dos ladrilhos aposentados e continua servindo o resultado. */
.eq-rot{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--pn-orange-800)}
.eq-passo b{font-size:clamp(14px,1.04vw,17px);line-height:1.35;color:var(--ink-900);font-weight:700}
/* O resultado fecha a faixa e é o único em azul cheio: é o número que os
   quatro anteriores produzem. */
.eq-resultado{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;
  gap:var(--sp-3);margin-top:var(--sp-2);padding:var(--sp-4) var(--sp-6);
  border-radius:var(--r-lg);background:var(--grad-brand-deep);color:#fff}
.eq-resultado .eq-marco{background:rgba(255,255,255,.16);width:38px;height:38px}
.eq-resultado .eq-rot{font-family:var(--font-mono);font-size:clamp(15px,1.25vw,20px);
  letter-spacing:.12em;text-transform:uppercase;color:#fff}
/* A ligação entre uma etapa e a seguinte, desenhada no vão da grade. */
.eq-passo::after{content:"";position:absolute;pointer-events:none;
  top:50%;right:calc(-1 * var(--sp-5));width:var(--sp-5);height:2px;
  transform:translateY(-1px);
  background:linear-gradient(90deg,var(--pn-blue-200),var(--pn-orange-300))}
.eq-passo:nth-child(4)::after{display:none}
@media(max-width:1100px){
  .equacao-faixa{grid-template-columns:1fr 1fr}
  /* fim de linha: 2 e 4 não ligam em ninguém à direita */
  .eq-passo:nth-child(2)::after,
  .eq-passo:nth-child(4)::after{display:none}
}
@media(max-width:640px){
  .equacao-faixa{grid-template-columns:1fr;gap:var(--sp-4)}
  .eq-passo{flex-direction:row;text-align:left;gap:var(--sp-4);padding:var(--sp-4)}
  .eq-passo>span.eq-num{order:-1}
  .eq-passo::after{display:none}
  .eq-resultado{margin-top:0}
}
/* O bloco de texto da seção passa a ser centralizado e de leitura confortável:
   a equação deixou de ser uma coluna ao lado dele. */
.eq-intro{max-width:78ch;margin:0 auto;text-align:center}
.eq-intro>p+p{margin-top:var(--sp-4)}

/* ---- 43.7 O botão em janela estreita ----
   Consequência direta do 43.4: com o rótulo travado em uma linha, quem tem de
   caber é a caixa. Abaixo de 430px cede o respiro lateral, depois a seta
   (nessa largura ela é decoração) e por fim a letra, até o piso de 12px do
   projeto. O rótulo não cede: ele é copy. */
@media(max-width:430px){
  .btn{font-size:12px;padding-left:var(--sp-3);padding-right:var(--sp-3);gap:6px}
  .btn-lg{font-size:12.5px;padding-top:13px;padding-bottom:13px}
  .btn-sm{font-size:12px}
  .btn>svg{display:none}
  /* .icon-btn não tem rótulo: ali o ícone É o botão */
  .icon-btn>svg{display:inline-block}
  .text-link{font-size:12.5px}
  .text-link>svg{display:none}
  /* .cta-banner .btn-row .btn tem três classes e ganha da regra acima por
     especificidade, não por ordem: sem repetir o seletor, os botões do
     fechamento continuam em 15,5px com 30px de respiro, e "Ver as outras
     frentes do Experts" mede 300px numa área de conteúdo de 272. */
  .cta-banner .btn-row .btn{font-size:12.5px;padding:13px var(--sp-2)}
  /* A barra de cookies era nowrap na linha dos botões. Com o rótulo em uma
     linha só, o par não cabe em 320: a linha volta a poder quebrar. */
  .cookie-box .btn-row{flex-wrap:wrap}
  .cookie-box .btn-row>.btn{flex:1 1 auto}
  /* "Calcular onde a minha operação está perdendo" tem 43 caracteres: em uma
     linha, no piso de 12px, o rótulo mede 273px e a área de conteúdo em 320
     tem 272. Não é questão de apertar mais, porque a palavra é copy e o piso
     de leitura é regra. Quem cede é o respiro do container: nesta largura, e
     só nela, a chamada usa a linha inteira da janela. */
  .cta-linha-larga{margin-left:calc(-1 * var(--sp-5));margin-right:calc(-1 * var(--sp-5))}
}
/* Rodapé: "E-commerce de Alto Volume" em uma linha não cabe em meia largura
   de 360px. Abaixo de 400 as colunas viram uma só. */
@media(max-width:399px){
  .footer-cols{grid-template-columns:1fr}
}


/* ============================================================
   44. O PAR DE BOTÕES DO TOPO, A CONTA DA HOME E AS ARTES QUE
       CRESCEM  (2026-08-28, quinta leva)
   ============================================================ */

/* ---- 44.1 Os dois botões da primeira seção ----
   Duas queixas do cliente, que são o mesmo defeito visto pelos dois lados:
   no Vision e no Flow os botões enchiam a largura toda e não pareciam
   botões; na Home e nos segmentos eles empilhavam.

   As duas vêm do 43.5: `flex:1 0 auto` mandava crescer e `flex-wrap:wrap`
   mandava empilhar quando não coubesse. Agora é `flex:0 0 auto` (largura do
   rótulo, nunca da faixa) com `nowrap` (nunca um embaixo do outro).

   Isso transfere o problema para a largura: com o rótulo travado em uma
   linha e o botão travado no tamanho do rótulo, o par tem de CABER. Os
   números medidos, com o tipo e o respiro de antes:

     900px   coluna 403, par 505  ->  faltavam 102
     1024px  coluna 465, par 500  ->  faltavam  35
     1280px  coluna 521, par 532  ->  faltavam  11
     1440px  coluna 581, par 566  ->  cabia

   Quem cede é o respiro lateral do botão e o tamanho do tipo, os dois presos
   à largura da janela e calibrados para devolver o valor de hoje em 1440.
   A faixa de aperto é de 861 a 1300: abaixo de 861 a primeira seção empilha
   e a coluna fica larga de novo. */
.hero-copy .btn-row,
.hero-centro .btn-row{flex-wrap:nowrap;align-items:stretch}
.hero-copy .btn-row>.btn,
.hero-centro .btn-row>.btn{flex:0 0 auto;justify-content:center;text-align:center}

@media(min-width:861px){
  /* 1,1vw devolve 15,8px em 1440, que é o tamanho de hoje, e desce até o piso
     de 12,5px na faixa estreita. O respiro acompanha: 30px em 1440, 14 em 900. */
  .hero-full .btn-row>.btn{
    font-size:clamp(12px,1.1vw,16px);
    padding-left:clamp(8px,calc(4.5vw - 30.7px),30px);
    padding-right:clamp(8px,calc(4.5vw - 30.7px),30px)}
  .hero-full .btn-row{gap:var(--sp-2)}
}
@media(min-width:1025px){
  .hero-full .btn-row{gap:var(--sp-3)}
}

/* No telefone a coluna É a área de conteúdo, e o par não cabe nela: em 360px
   ele mede 334 contra 312 de conteúdo. O respiro do container cede, do mesmo
   jeito que na chamada longa do 43.7, e a linha dos botões usa a janela. */
@media(max-width:640px){
  .hero-copy .btn-row,
  .hero-centro .btn-row{gap:var(--sp-2)}
  .hero-copy .btn-row>.btn,
  .hero-centro .btn-row>.btn{padding-left:var(--sp-3);padding-right:var(--sp-3)}
}
@media(max-width:430px){
  .hero-copy .btn-row,
  .hero-centro .btn-row{margin-right:calc(-1 * var(--sp-5))}
  .hero-centro .btn-row{margin-left:calc(-1 * var(--sp-5))}
  .hero-copy .btn-row>.btn,
  .hero-centro .btn-row>.btn{padding-left:var(--sp-1);padding-right:var(--sp-1);font-size:12px}
}
/* 320px é o piso do projeto e é onde a conta fecha no limite: 291px de rótulo,
   16 de respiro e 4 de vão dão 311 contra 320 de janela. Por isso a sangria
   vai dos DOIS lados e o par fica centrado nela: alinhado à esquerda ele
   começaria 24px antes da primeira letra do título. */
@media(max-width:359px){
  .hero-copy .btn-row,
  .hero-centro .btn-row{margin-left:calc(-1 * var(--sp-5));justify-content:center;gap:var(--sp-1)}
  .hero-copy .btn-row>.btn,
  .hero-centro .btn-row>.btn{letter-spacing:-.02em}
}

/* ---- 44.2 A conta da Home ocupa a área de conteúdo inteira ----
   Pedido do cliente: o título e os dois parágrafos usam os 1400px, e não a
   coluna de leitura de 760. */
#sec-home-transformacao .section-head{max-width:none}
.eq-intro{max-width:none;margin:0;text-align:center}

/* ---- 44.3 APOSENTADO pelo 45.7 ----
   As seis barras viraram uma seta de crescimento verde, a mesma dos números
   da operação, a pedido do cliente. A regra nova está no 45.7. */

/* ---- 44.4 A arte da caixa azul cresce ----
   Pedido do cliente para Experts e E-commerce: a imagem dentro da caixa
   estava pequena, servindo a variante de 600px. Ela passa a ir até a BORDA
   da caixa, comendo o respiro de 48px dos três lados que sobram, e a coluna
   dela ganha um pouco da coluna do texto. A metade do texto continua sendo
   metade de leitura confortável; o que muda é onde a arte para. */
@media(min-width:901px){
  .secao-visual.caixa-arte-cresce{grid-template-columns:.9fr 1.1fr}
}
.caixa-arte-cresce .secao-arte{
  margin:calc(-1 * var(--sp-7)) calc(-1 * var(--sp-7)) calc(-1 * var(--sp-7)) 0}
@media(max-width:640px){
  .caixa-arte-cresce .secao-arte{
    margin:0 calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5))}
}

/* ---- 44.5 A arte que corta dentro da caixa ----
   Tracking complexo, pedido do cliente: "essa imagem do flow pode cortar uma
   parte dela dentro da área azul". A arte passa da coluna e a própria caixa
   recorta, porque `.vitrine` já é `overflow:hidden` com canto arredondado.
   Sem o `max-width:none` o teto de `.print-produto` segura a imagem antes. */
.caixa-arte-corta .secao-arte .print-produto{max-width:none}
@media(min-width:901px){
  .caixa-arte-corta .secao-arte img{width:138%;max-width:none}
}

/* ---- 44.6 O eixo redondo no centro dos cards conectados ----
   Pedido do cliente no Experts: um círculo azul com as setas de ida e volta
   no cruzamento das quatro caixas. Ele mora no cruzamento das ligações que já
   existiam, com um anel da cor da seção para não encostar nos traços.
   Empilhado no telefone não há cruzamento, e ele sai. */
.cards-hub{position:relative}
.cards-centro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-brand-deep);color:#fff;pointer-events:none;z-index:2;
  box-shadow:0 0 0 8px var(--pn-orange-50),0 18px 40px -22px rgba(4,0,128,.9)}
.cards-centro svg{width:26px;height:26px}
@media(max-width:640px){.cards-centro{display:none}}

/* ---- 44.7 Título centralizado onde o cliente pediu ----
   "O que é executado" e "Casos típicos" do Tracking, e "Como trabalhamos" do
   Experts. `.section-head.centered` já existe; o que faltava era o
   `max-width` deixar o título respirar na largura da seção. */
.section-head.centered{max-width:900px}


/* ============================================================
   45. RODAPÉ, CABEÇALHO NO TELEFONE, RODAPÉ DE FORMULÁRIO E A
       EQUAÇÃO QUE ACENDE EM SEQUÊNCIA  (2026-08-28, sexta leva)
   ============================================================ */

/* ---- 45.1 O botão do topo aparece no telefone ----
   Pedido do cliente: "Falar com um estrategista" ao lado do hambúrguer. Ele
   NÃO é elemento novo: é o botão que o header já tem, que o CSS escondia
   abaixo de 900px junto com o resto da faixa. Um segundo botão duplicaria id
   e evento de rastreamento. */
@media(max-width:900px){
  .header-cta #cta-global-header-diagnostico{display:inline-flex}
  .header-cta{gap:var(--sp-2)}
  /* O rótulo é longo para a faixa do telefone: cede o respiro e o tipo, com o
     piso de 12px de sempre. */
  .header-cta #cta-global-header-diagnostico{font-size:12px;padding:0 var(--sp-3);white-space:nowrap}
}
@media(max-width:400px){
  .header-cta #cta-global-header-diagnostico{padding:0 var(--sp-2);letter-spacing:-.01em}
}

/* ---- 45.2 O número do WhatsApp embaixo dos ícones do rodapé ---- */
.footer-fone{margin:var(--sp-4) 0 0;text-align:center}
.footer-fone a{display:inline-flex;align-items:center;gap:8px;min-height:32px;
  font-family:var(--font-mono);font-size:13.5px;letter-spacing:.04em;
  color:rgba(255,255,255,.82);text-decoration:none;white-space:nowrap}
.footer-fone a:hover{color:#fff}
.footer-fone svg{width:16px;height:16px;color:var(--pn-orange-300)}

/* ---- 45.3 O rodapé do formulário em duas linhas ----
   Pedido do cliente: o "Voltar" sempre à ESQUERDA do botão laranja, e os dois
   numa linha só de botões. No telefone o rodapé passa a ocupar duas linhas: a
   barra de progresso em cima, os dois botões embaixo.
   min-width:0 é obrigatório aqui: .form-rodape .btn tem piso de 230px, e com
   os dois na mesma linha isso estoura a coluna em 320px. */
/* A barra do rodapé de formulário: largura vem daqui, não de estilo inline.
   Inline venceria a media query abaixo e o rodapé nunca quebraria em duas
   linhas. */
.progress-rodape{flex:1;min-width:160px;max-width:300px}
@media(max-width:900px){
  .form-rodape{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sp-4)}
  .form-rodape>.progress{order:1;flex:1 1 100%;max-width:none;min-width:0}
  .form-rodape>.btn{order:3;width:auto;min-width:0}
  .form-rodape>.btn-ghost{order:2;margin-right:auto;padding-left:0}
}

/* ---- 45.4 Os números da operação em duas colunas no telefone ----
   Pedido do cliente. São cinco cartões: o quinto ocupa a linha inteira, senão
   ele fica sozinho com metade da largura e o bloco lê como quebrado. */
@media(max-width:640px){
  .faixa-numeros .grid-5{grid-template-columns:1fr 1fr;gap:var(--sp-3)}
  .faixa-numeros .grid-5>*:last-child{grid-column:1 / -1}
  .faixa-numeros .stat-card{padding:var(--sp-4)}
}

/* ---- 45.5 Mais respiro nos botões da primeira seção ----
   Pedido do cliente. O piso do 44.1 sobe um degrau em cada faixa; o teto de
   1440 continua o mesmo, que é onde o site foi conferido. */
@media(min-width:861px){
  .hero-full .btn-row>.btn{
    padding-left:clamp(12px,calc(4.5vw - 30.7px),30px);
    padding-right:clamp(12px,calc(4.5vw - 30.7px),30px)}
}
/* O respiro maior que o cliente pediu vai até onde a linha aguenta. Cada
   degrau abaixo foi calibrado contra a medição do par nas 20 larguras. */
@media(max-width:640px){
  .hero-copy .btn-row>.btn,
  .hero-centro .btn-row>.btn{padding-left:var(--sp-3);padding-right:var(--sp-3)}
}
@media(max-width:430px){
  .hero-copy .btn-row>.btn,
  .hero-centro .btn-row>.btn{padding-left:var(--sp-2);padding-right:var(--sp-2)}
}
@media(max-width:400px){
  .hero-copy .btn-row,
  .hero-centro .btn-row{gap:var(--sp-1)}
  .hero-copy .btn-row>.btn,
  .hero-centro .btn-row>.btn{padding-left:var(--sp-1);padding-right:var(--sp-1)}
}

/* ---- 45.6 Respiro entre a tag e o título do card de produto ----
   Pedido do cliente na Home: "Com IA" e "Especialistas" estavam coladas no
   nome do produto. */
.card-tag-solta{margin-bottom:var(--sp-2)}

/* ---- 45.7 A equação acende em sequência ----
   Pedido do cliente: a barra vira uma seta de crescimento verde, a mesma dos
   números da operação; a receita fica verde e acende depois dos quatro
   fatores; e a sequência roda em laço. O verde é a cor de venda no sistema
   (regra 7.9), e receita é venda.

   A sequência é CSS puro, com um laço de 6s e um atraso por ladrilho. Sem
   JavaScript novo, sem temporizador rodando na thread principal e sem custo
   de TBT. prefers-reduced-motion desliga tudo e deixa tudo aceso. */
.eq-seta{display:inline-flex;align-items:center;gap:6px;margin-top:auto;
  padding-top:var(--sp-3);color:var(--success);
  font-family:var(--font-mono);font-size:12px;font-weight:600}
.eq-seta svg{width:22px;height:22px;transition:transform var(--dur-base) var(--ease-out)}

/* o estado aceso, comum ao laço e ao hover */
.eq-passo{transition:transform var(--dur-base) var(--ease-out),
  box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.eq-passo:hover{border-color:var(--success);transform:translateY(-6px);
  box-shadow:0 26px 52px -30px rgba(14,138,95,.75)}
.eq-passo:hover .eq-seta svg{transform:translate(3px,-3px) scale(1.12)}
.eq-passo:hover .eq-marco{background:var(--success)}

/* a receita é verde, e é o quinto tempo da sequência */
.eq-resultado{background:linear-gradient(120deg,#0B6E4C,var(--success));
  transition:box-shadow var(--dur-base) var(--ease-out),filter var(--dur-base) var(--ease-out)}
.eq-resultado .eq-rot{color:#fff}
.eq-resultado .eq-marco{background:rgba(255,255,255,.20)}

@media(prefers-reduced-motion:no-preference){
  .equacao-faixa.in .eq-passo{animation:eq-acende 6s linear infinite both}
  .equacao-faixa.in .eq-passo:nth-child(1){animation-delay:0s}
  .equacao-faixa.in .eq-passo:nth-child(2){animation-delay:1.2s}
  .equacao-faixa.in .eq-passo:nth-child(3){animation-delay:2.4s}
  .equacao-faixa.in .eq-passo:nth-child(4){animation-delay:3.6s}
  .equacao-faixa.in .eq-resultado{animation:eq-acende-receita 6s linear 4.8s infinite both}
  /* o hover manda mais que o laço: quem está com o mouse em cima não vê o
     ladrilho apagar no meio da leitura */
  .equacao-faixa.in .eq-passo:hover{animation-play-state:paused}
}
@keyframes eq-acende{
  0%{border-color:var(--pn-blue-100);transform:none;
     box-shadow:0 18px 44px -34px rgba(4,0,128,.55)}
  3%{border-color:var(--success);transform:translateY(-6px);
     box-shadow:0 26px 52px -30px rgba(14,138,95,.75)}
  18%{border-color:var(--success);transform:translateY(-6px);
     box-shadow:0 26px 52px -30px rgba(14,138,95,.75)}
  24%,100%{border-color:var(--pn-blue-100);transform:none;
     box-shadow:0 18px 44px -34px rgba(4,0,128,.55)}
}
@keyframes eq-acende-receita{
  0%{filter:saturate(.55) brightness(.9);box-shadow:none}
  3%,18%{filter:none;box-shadow:0 26px 60px -28px rgba(14,138,95,.9)}
  24%,100%{filter:saturate(.55) brightness(.9);box-shadow:none}
}


/* ============================================================
   46. O VALOR DIGITÁVEL DA CALCULADORA E O CARTÃO DE PROJEÇÃO
       (2026-08-28, sexta leva)
   ============================================================ */

/* ---- 46.1 O número que se digita ----
   Pedido do cliente: além de arrastar, poder digitar. O campo numérico é a
   LEITURA do valor, e não um segundo controle ao lado: por isso o número em
   mono que ficava no rótulo saiu, senão o mesmo valor apareceria duas vezes.
   O prefixo e o sufixo são aria-hidden porque o campo já tem aria-label com
   a unidade escrita por extenso. */
.calc-linha{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.calc-prefixo,.calc-sufixo{font-family:var(--font-mono);font-size:13px;
  color:var(--pn-orange-300);flex:0 0 auto}
.calc-panel .calc-prefixo,.calc-panel .calc-sufixo{color:var(--pn-orange-300)}
.calc-num{width:100%;max-width:190px;font-family:var(--font-mono);font-weight:600;
  text-align:right;min-width:0}
/* A setinha nativa do campo numérico rouba 20px de um campo que já é estreito
   e não é alvo de toque no telefone. O teclado numérico continua vindo pelo
   type, e o controle deslizante continua ao lado. */
.calc-num::-webkit-outer-spin-button,
.calc-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-num[type=number]{-moz-appearance:textfield}

/* ---- 46.2 O cartão de projeção de retorno ----
   Dois valores lado a lado com uma seta entre eles: hoje e a estimativa. Em
   telefone a seta gira e os dois empilham, senão o par fica com 60px cada. */
.calc-roas{display:flex;align-items:stretch;gap:var(--sp-4);margin-top:var(--sp-4)}
.calc-roas-item{flex:1 1 0;min-width:0;padding:var(--sp-4);border-radius:var(--r-md);
  background:var(--pn-blue-50);border:1px solid var(--pn-blue-100);
  display:flex;flex-direction:column;gap:4px}
.calc-roas-item b{font-size:clamp(24px,2.6vw,34px);line-height:1;color:var(--pn-blue-900)}
.calc-roas-item small{font-size:12px;color:var(--ink-500);line-height:1.4}
/* O alvo é verde porque o assunto é venda, que é a regra de cor do sistema. */
.calc-roas-alvo{background:var(--success-bg);border-color:rgba(14,138,95,.28)}
.calc-roas-alvo b{color:var(--success)}
.calc-roas-seta{align-self:center;flex:0 0 auto;color:var(--pn-orange-600)}
.calc-roas-seta svg{width:22px;height:22px}
@media(max-width:640px){
  .calc-roas{flex-direction:column;gap:var(--sp-3)}
  .calc-roas-seta{transform:rotate(90deg)}
}

/* ---- 46.3 A grade de duas colunas da etapa 2 ----
   .form-grade já existe e já tem a escada 12 -> 6 -> 12. O que falta é o
   contraste dentro do painel azul: rótulo e dica nasceram para fundo claro. */
.calc-panel .form-grade{margin-top:var(--sp-5)}
.calc-panel .calc-linha .input{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);color:#fff}
.calc-panel .calc-linha .input:focus{border-color:var(--pn-orange-300);background:rgba(255,255,255,.16)}