/* NuvemCond — site público (apresentação). Folha própria, sem dependências externas.
   Tema claro/escuro pelo mesmo data-theme do sistema. Regra da casa: nenhuma caixa com
   rolagem interna e nada transbordando para o lado. */

:root {
  --fundo: #f5f8fc; --sup: #ffffff; --sup-2: #edf2f8;
  --tinta: #0c1a2e; --suave: #51617a; --linha: #dce4ee;
  --marca: #1f6fd1; --marca-forte: #1658a9; --marca-clara: #e6f0fd;
  --verde: #0e9b84; --verde-clara: #def5f0;
  --noite: #071a33; --noite-2: #0b2748;
  --grad: linear-gradient(135deg, #2f7fe6 0%, #1a9fb0 55%, #14a88c 100%);
  --raio: 18px;
  --sombra: 0 1px 2px rgba(12, 26, 46, .05), 0 8px 24px rgba(12, 26, 46, .06);
  --sombra-forte: 0 24px 60px rgba(4, 16, 36, .28);
  --fonte: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* Faixas de destaque (abertura, capas, segurança, missão, chamada final, rodapé): também seguem o tema. */
  --f-fundo: linear-gradient(180deg, #e4eefb 0%, #f1f6fc 100%);
  --f-tinta: #0c1a2e; --f-suave: #3d5070; --f-realce: #1658a9; --f-verde: #0b8a74;
  --f-vidro: rgba(255, 255, 255, .66); --f-vidro-2: rgba(255, 255, 255, .85); --f-borda: rgba(31, 111, 209, .16);
  --f-ic-fundo: rgba(31, 111, 209, .11); --f-ic: #1f6fd1;
  --f-grade: rgba(12, 26, 46, .05); --f-brilho1: rgba(59, 140, 255, .22); --f-brilho2: rgba(25, 179, 154, .16);
  --f-destaque: linear-gradient(100deg, #1f6fd1 0%, #0e9b84 90%);
  --missao: linear-gradient(135deg, #dce9fb 0%, #d9f1ec 100%);
  --rodape: #e8eef6; --rodape-tinta: #4a5b73; --rodape-forte: #0c1a2e; --rodape-borda: rgba(12, 26, 46, .1);
  /* Nuvem da abertura */
  --forma-gota: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 114'%3E%3Cpath d='M50 0C58 18 98 46 98 72C98 97 76 114 50 114C24 114 2 97 2 72C2 46 42 18 50 0Z'/%3E%3C/svg%3E");
  --nuvem-1: #ffffff; --nuvem-2: #e3eefc; --nuvem-brilho: rgba(255, 255, 255, .9); --nuvem-borda: rgba(31, 111, 209, .18);
  --nuvem-sombra: drop-shadow(0 24px 40px rgba(31, 111, 209, .22));
  color-scheme: light;
}
:root[data-theme="dark"] {
  --fundo: #0a1220; --sup: #121c2d; --sup-2: #0d1727;
  --tinta: #e8eef7; --suave: #9babc1; --linha: #223149;
  --marca: #6ea8ff; --marca-forte: #94c0ff; --marca-clara: #172a47;
  --verde: #3dd6bb; --verde-clara: #10332f;
  --noite: #050f1f; --noite-2: #0a1f3b;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .25);
  --f-fundo: linear-gradient(180deg, #071a33 0%, #0b2748 100%);
  --f-tinta: #ffffff; --f-suave: #c7d8ef; --f-realce: #7db8ff; --f-verde: #7fe6d2;
  --f-vidro: rgba(255, 255, 255, .07); --f-vidro-2: rgba(255, 255, 255, .12); --f-borda: rgba(255, 255, 255, .14);
  --f-ic-fundo: rgba(125, 184, 255, .15); --f-ic: #8fc2ff;
  --f-grade: rgba(255, 255, 255, .05); --f-brilho1: rgba(59, 140, 255, .55); --f-brilho2: rgba(25, 179, 154, .42);
  --f-destaque: linear-gradient(100deg, #7db8ff 0%, #4fe0c4 90%);
  --missao: linear-gradient(135deg, #0d3a78 0%, #0b5b76 55%, #0b6f61 100%);
  --rodape: #050f1f; --rodape-tinta: #9fb2cc; --rodape-forte: #ffffff; --rodape-borda: rgba(255, 255, 255, .09);
  --nuvem-1: rgba(160, 200, 255, .16); --nuvem-2: rgba(80, 140, 230, .07); --nuvem-brilho: rgba(190, 220, 255, .22); --nuvem-borda: rgba(150, 195, 255, .38);
  --nuvem-sombra: drop-shadow(0 0 36px rgba(59, 140, 255, .32));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte); font-size: 16px; line-height: 1.6; background: var(--fundo); color: var(--tinta); overflow-x: hidden; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--marca) 70%, transparent); outline-offset: 2px; border-radius: 6px; }
.ic { flex: none; vertical-align: -3px; }
.nowrap { white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--sup); color: var(--tinta); padding: 10px 16px; border-radius: 10px; box-shadow: var(--sombra); }
.pular:focus { top: 12px; }

.largura { width: min(1180px, 100% - 40px); margin-inline: auto; }
.largura.estreita { width: min(880px, 100% - 40px); }

/* ------------------------------------------------------------------ botões */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 650; font-size: .95rem; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; }
.bt:hover { text-decoration: none; transform: translateY(-1px); }
.bt:active { transform: translateY(0); }
.bt.primario { background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(31, 111, 209, .35); text-shadow: 0 1px 1px rgba(0, 40, 90, .25); }
.bt.primario:hover { box-shadow: 0 10px 26px rgba(31, 111, 209, .45); }
.bt.contorno { background: transparent; border-color: color-mix(in srgb, currentColor 30%, transparent); color: inherit; }
.bt.contorno:hover { border-color: currentColor; }
.bt.vidro { background: var(--f-vidro); border-color: var(--f-borda); color: var(--f-tinta); backdrop-filter: blur(6px); }
.bt.vidro:hover { background: var(--f-vidro-2); }
.bt.grande { padding: 15px 26px; font-size: 1.04rem; border-radius: 14px; }
.bt.largo { width: 100%; }

/* ------------------------------------------------------------------ topo */
/* Troca de página sem piscar (dono, 25/10/2026): o conteúdo esmaece e o topo passa direto (nome só durante a troca,
   html.nc-vt, tema_script). Menos movimento pedido no sistema operacional: troca de sempre. */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
html.nc-vt .topo { view-transition-name: nc-topo; }
::view-transition-group(nc-topo), ::view-transition-new(nc-topo) { animation: none; }
::view-transition-old(nc-topo) { display: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
.topo { position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--f-tinta); transition: background .2s ease, box-shadow .2s ease, color .2s ease; }
.topo.rolou { background: color-mix(in srgb, var(--sup) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); color: var(--tinta);
  box-shadow: 0 1px 0 var(--linha), 0 8px 24px rgba(12, 26, 46, .06); }
.topo-linha { display: flex; align-items: center; gap: 20px; height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: inherit; font-size: 1.28rem; letter-spacing: -.02em; font-weight: 500; }
.marca:hover { text-decoration: none; }
.marca b { font-weight: 800; }
.marca-logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--grad); color: #fff; box-shadow: 0 4px 12px rgba(31, 111, 209, .35); }
.nav { display: flex; gap: 2px; margin-left: 10px; }
.nav a { color: inherit; opacity: .84; padding: 8px 11px; border-radius: 9px; font-size: .93rem; font-weight: 550; }
.nav a:hover, .nav a[aria-current] { opacity: 1; text-decoration: none; background: color-mix(in srgb, currentColor 10%, transparent); }
.nav-so-celular { display: none; }
.nav-gratis { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .03em; vertical-align: 1px;
  background: var(--grad); color: #fff; text-transform: uppercase; }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bt-tema, .bt-menu { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.bt-tema:hover, .bt-menu:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.bt-menu { display: none; }
.so-escuro { display: none; }
:root[data-theme="dark"] .so-claro { display: none; }
:root[data-theme="dark"] .so-escuro { display: inline; }

@keyframes surgir { from { opacity: 0; transform: translateY(-6px); } }

.campo-l { display: grid; gap: 5px; font-size: .86rem; font-weight: 600; color: var(--suave); }
.campo-l small { font-weight: 400; }
.campo-l input, .campo-l select, .campo-l textarea { width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--linha); background: var(--fundo); color: var(--tinta);
  font-size: .98rem; font-weight: 400; transition: border-color .15s ease, box-shadow .15s ease; }
.campo-l textarea { resize: vertical; min-height: 120px; }
.campo-l input:focus, .campo-l select:focus, .campo-l textarea:focus { outline: 0; border-color: var(--marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 18%, transparent); }

/* ------------------------------------------------------------------ faixas de destaque (seguem o tema) */
.abertura, .capa, .final, .secao.escura, .missao-faixa { position: relative; color: var(--f-tinta); background: var(--f-fundo); overflow: hidden; }
.ceu { position: absolute; inset: 0; pointer-events: none; }
.ceu i { position: absolute; border-radius: 50%; filter: blur(70px); }
.ceu i:nth-child(1) { width: 620px; height: 620px; right: -140px; top: -220px; background: radial-gradient(circle, var(--f-brilho1), transparent 65%); }
.ceu i:nth-child(2) { width: 520px; height: 520px; left: -200px; bottom: -260px; background: radial-gradient(circle, var(--f-brilho2), transparent 65%); }
.ceu i:nth-child(3) { inset: 0; width: auto; height: auto; border-radius: 0; filter: none; opacity: .5;
  background-image: linear-gradient(var(--f-grade) 1px, transparent 1px), linear-gradient(90deg, var(--f-grade) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%); }
.abertura > .largura, .capa > .largura, .final > .largura { position: relative; }
.selo-topo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; font-size: .82rem; font-weight: 650; letter-spacing: .02em;
  background: var(--f-vidro); border: 1px solid var(--f-borda); color: var(--f-realce); margin-bottom: 22px; }
.abertura h1, .capa h1 { font-size: clamp(2.3rem, 4.7vw, 3.9rem); line-height: 1.04; letter-spacing: -.038em; font-weight: 800; text-wrap: balance; }
.abertura h1 em, .capa h1 em { font-style: normal; background: var(--f-destaque); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin-top: 22px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--f-suave); max-width: 580px; }
.abertura-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ------------------------------------------------------------------ abertura */
.abertura { padding: 132px 0 0; }
.abertura-grade { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.abertura-pontos { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; color: var(--f-suave); font-size: .92rem; }
.abertura-pontos .ic { color: var(--f-verde); margin-right: 4px; }
/* YouTube e Instagram: nome sempre escrito (a busca do navegador só acha texto visível); na abertura e no rodapé */
.redes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.redes a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid transparent; font-size: .92rem; font-weight: 650; }
.abertura .redes { margin: 20px 0 28px; }
.abertura .redes-titulo { color: var(--f-suave); font-size: .92rem; }
.abertura .redes a { color: var(--f-tinta); background: var(--f-vidro); border-color: var(--f-borda); }
.abertura .redes a:hover { background: var(--f-vidro-2); }

/* Nuvem cheia de gotas (cada gota, uma funcionalidade). A gota é uma "trilha" da altura da nuvem que desce
   (translateY em % da própria altura = da nuvem); a forma de gota fica no topo da trilha. Só transform e opacity. */
.nuvem-palco { position: relative; width: 100%; max-width: 580px; justify-self: end; aspect-ratio: 530 / 345; container: nuvem / inline-size;
  animation: flutuar 8s ease-in-out infinite; }
@keyframes flutuar { 50% { transform: translateY(-10px); } }
.nuvem-forma, .nuvem-gotas { position: absolute; inset: 0; width: 100%; height: 100%; }
.nuvem-forma { overflow: visible; filter: var(--nuvem-sombra); }
.nuvem-forma .c-n1 { stop-color: var(--nuvem-1); } .nuvem-forma .c-n2 { stop-color: var(--nuvem-2); }
.nuvem-forma .c-brilho { stop-color: var(--nuvem-brilho); }
.nuvem-corpo { fill: url(#g-nuvem); stroke: var(--nuvem-borda); stroke-width: 2; }
.nuvem-gotas { clip-path: url(#clip-nuvem); }
.gota { position: absolute; top: 0; left: var(--x); width: calc(6.8% * var(--s, 1)); height: 100%; opacity: 0; will-change: transform;
  animation: cair var(--d) linear var(--a) infinite; }
@keyframes cair {
  0% { transform: translateY(var(--inicio, -14%)); opacity: 0; }
  9% { opacity: 1; }
  86% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
.gota-forma { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; aspect-ratio: 100 / 114;
  padding: 30% 4% 0; color: #fff; text-align: center; line-height: 1.05; hyphens: manual;
  animation: zumbir 2.8s ease-in-out infinite;
  -webkit-mask: var(--forma-gota) center / 100% 100% no-repeat; mask: var(--forma-gota) center / 100% 100% no-repeat;
  background: radial-gradient(circle at 38% 40%, rgba(255, 255, 255, .45) 0 5%, transparent 15%),
              linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 55%), var(--gota-cor); }
.gota.cor-0 .gota-forma { --gota-cor: linear-gradient(160deg, #4b9cf5 0%, #1a5fbf 100%); }
.gota.cor-1 .gota-forma { --gota-cor: linear-gradient(160deg, #2cc6ad 0%, #0b7f6c 100%); }
.gota.cor-2 .gota-forma { --gota-cor: linear-gradient(160deg, #62b4ff 0%, #2a74d6 60%, #1597a0 100%); }
/* zumbido de enxame: cada gota balança de leve para os lados, cada uma no seu ritmo */
@keyframes zumbir { 25% { transform: translateX(3px) rotate(2deg); } 75% { transform: translateX(-3px) rotate(-2deg); } }
.gota:nth-child(4n+1) .gota-forma { animation-duration: 2.3s; } .gota:nth-child(4n+2) .gota-forma { animation-duration: 3.1s; animation-delay: -.9s; }
.gota:nth-child(4n+3) .gota-forma { animation-duration: 2.6s; animation-delay: -1.7s; } .gota:nth-child(4n) .gota-forma { animation-duration: 3.4s; animation-delay: -.4s; }
.gota-forma b { font-size: calc(clamp(5px, 1cqi, 6.6px) * var(--s, 1)); font-weight: 700; letter-spacing: -.01em; text-shadow: 0 1px 2px rgba(0, 40, 90, .35); }
.chuva { position: absolute; left: 22%; right: 22%; top: 99%; height: 60px; pointer-events: none; }
.chuva i { position: absolute; top: 0; width: 7px; height: 10px; background: var(--f-realce); opacity: 0; -webkit-mask: var(--forma-gota) center / 100% 100% no-repeat; mask: var(--forma-gota) center / 100% 100% no-repeat;
  animation: pingar 2.6s ease-in infinite; }
.chuva i:nth-child(1) { left: 6%; } .chuva i:nth-child(2) { left: 24%; animation-delay: -1.1s; } .chuva i:nth-child(3) { left: 41%; animation-delay: -.4s; }
.chuva i:nth-child(4) { left: 58%; animation-delay: -1.9s; } .chuva i:nth-child(5) { left: 76%; animation-delay: -.8s; } .chuva i:nth-child(6) { left: 93%; animation-delay: -1.5s; }
@keyframes pingar { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .7; } 100% { transform: translateY(52px); opacity: 0; } }
.nuvem-palco.parado, .nuvem-palco.parado .gota, .nuvem-palco.parado .gota-forma, .nuvem-palco.parado .chuva i { animation-play-state: paused; }
/* Nuvem estreita (celular): as mesmas 96 gotas (tudo é proporcional à nuvem), só a letra no mínimo */
@container nuvem (max-width: 470px) {
  .gota-forma b { font-size: 5px; letter-spacing: -.02em; }
}

.fatos { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; border-top: 1px solid var(--f-borda); }
.fatos div { padding: 26px 20px 30px; border-left: 1px solid var(--f-borda); }
.fatos div:first-child { border-left: 0; padding-left: 0; }
.fatos dt { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.fatos dd { color: var(--f-suave); font-size: .92rem; margin-top: 4px; }

/* ------------------------------------------------------------------ seções */
.secao { padding: 96px 0; }
.secao.tom { background: var(--sup-2); }
.cabecalho { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.sobretitulo { font-size: .8rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--marca); margin-bottom: 12px; }
.secao h2, .final h2 { font-size: clamp(1.7rem, 3.1vw, 2.55rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 780; text-wrap: balance; }
.secao h3 { font-size: 1.06rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
.texto { margin-top: 16px; color: var(--suave); font-size: 1.08rem; }
.escura .sobretitulo, .missao-faixa .sobretitulo { color: var(--f-realce); }
.escura .texto, .missao-faixa .texto { color: var(--f-suave); }
.escura > .largura, .missao-faixa > .largura { position: relative; }

.duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.lista-ok { display: grid; gap: 14px; margin-top: 26px; }
.lista-ok li { display: flex; gap: 12px; align-items: flex-start; }
.lista-ok .ic { color: var(--verde); margin-top: 3px; }
.lista-ok.colunas { grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-bottom: 30px; }
.app-baixar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.selo-loja { display: inline-flex; border-radius: 10px; transition: transform .15s ease; }
.selo-loja:hover { transform: translateY(-2px); }
.selo-loja img { display: block; width: 207px; height: auto; }
.selo-marca { margin-top: 10px; color: var(--suave); font-size: .74rem; }

/* antes × depois */
.antes-depois { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center; }
.antes, .depois { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); text-align: center; }
.depois { border-color: color-mix(in srgb, var(--verde) 55%, var(--linha)); box-shadow: 0 16px 40px color-mix(in srgb, var(--verde) 16%, transparent); }
.antes p, .depois p { color: var(--suave); font-size: .88rem; margin-top: 14px; }
.rotulo-ad { display: inline-block; font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; color: var(--suave); margin-bottom: 14px; }
.depois .rotulo-ad { color: var(--verde); }
.pilha { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pilha i { font-style: normal; font-size: .74rem; padding: 9px 4px; border-radius: 9px; background: var(--sup-2); border: 1px dashed var(--linha); color: var(--suave); }
.pilha i:nth-child(odd) { transform: rotate(-2deg); } .pilha i:nth-child(3n) { transform: rotate(2.5deg) translateY(2px); }
.seta-ad { color: var(--verde); }
.uma-tela { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: var(--sup-2); text-align: left; }
.uma-tela b { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: .86rem; padding: 6px 10px; border-radius: 8px; background: var(--sup); border: 1.5px solid var(--marca); width: fit-content; }
.uma-tela span { height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--marca) 22%, transparent); }
.uma-tela span:nth-of-type(2) { width: 78%; background: color-mix(in srgb, var(--verde) 28%, transparent); } .uma-tela span:nth-of-type(3) { width: 58%; }
.uma-tela em { font-style: normal; font-size: .76rem; font-weight: 700; color: var(--marca); margin-top: 4px; }

/* cartões */
.cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cartoes.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cartao { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px 22px; box-shadow: var(--sombra);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cartao:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--marca) 45%, var(--linha)); box-shadow: 0 18px 40px rgba(12, 26, 46, .12); }
.cartao p, .publicos p, .trio p, .fluxo p, .etapas p { color: var(--suave); font-size: .93rem; margin-top: 8px; }
.cartao-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--marca-clara); color: var(--marca); margin-bottom: 16px; }
.cartao:nth-child(3n+2) .cartao-ic { background: var(--verde-clara); color: var(--verde); }
.nota-recursos { max-width: 820px; margin: 34px auto 0; text-align: center; color: var(--suave); }
.escura .cartao { background: var(--f-vidro); border-color: var(--f-borda); box-shadow: none; }
.escura .cartao:hover { border-color: color-mix(in srgb, var(--f-ic) 50%, transparent); background: var(--f-vidro-2); }
.escura .cartao p { color: var(--f-suave); }
.escura .cartao-ic, .escura .cartao:nth-child(3n+2) .cartao-ic { background: var(--f-ic-fundo); color: var(--f-ic); }
.lgpd { display: flex; gap: 12px; align-items: flex-start; justify-content: center; margin-top: 38px; color: var(--f-suave); }
.lgpd a { color: var(--f-realce); text-decoration: underline; }

/* fluxo da cobrança */
.fluxo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; counter-reset: passo; }
.fluxo li { position: relative; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px 16px 20px; box-shadow: var(--sombra); }
.fluxo li + li::before { content: ""; position: absolute; left: -15px; top: 44px; width: 16px; height: 2px; background: var(--grad); }
.fluxo-n { position: absolute; right: 14px; top: 12px; font-size: .78rem; font-weight: 800; color: var(--suave); opacity: .7; }
.fluxo-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--grad); color: #fff; margin-bottom: 14px; }
.fluxo p { font-size: .86rem; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; margin-top: 48px; }
.trio h3 { display: flex; align-items: center; gap: 9px; }
.trio h3 .ic { color: var(--verde); }

/* celular */
.celular-palco { display: grid; place-items: center; }
.celular { width: 290px; border-radius: 40px; padding: 16px 14px 22px; background: #f2f5f9; color: #15202e; border: 9px solid #0b1626; box-shadow: var(--sombra-forte); font-size: .82rem; display: grid; gap: 12px; }
.celular-topo { display: flex; align-items: center; gap: 9px; font-weight: 700; padding: 6px 4px 0; }
.celular-topo .marca-logo { width: 26px; height: 26px; border-radius: 8px; box-shadow: none; }
.celular-cartao { background: linear-gradient(135deg, #1b62c0, #13917c); color: #fff; border-radius: 18px; padding: 16px; display: grid; gap: 4px; }
.celular-cartao b { font-size: 1.7rem; letter-spacing: -.02em; line-height: 1.2; }
.celular-cartao small { opacity: .88; }
.celular-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.celular-botoes span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; border-radius: 10px; background: rgba(255, 255, 255, .18); font-weight: 650; font-size: .74rem; white-space: nowrap; }
.celular-botoes span:first-child { background: #fff; color: #135fbb; }
.celular-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.celular-grade span { display: grid; justify-items: center; gap: 6px; padding: 12px 2px; background: #fff; border-radius: 14px; font-size: .7rem; font-weight: 600; color: #3c4a5e; }
.celular-grade .ic { color: #1f6fd1; }
.celular-aviso { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 14px; padding: 11px 12px; border-left: 4px solid #19b39a; }
.celular-aviso span { display: grid; line-height: 1.3; } .celular-aviso small { color: #5d6b7e; } .celular-aviso .ic { color: #0d7f6c; }

/* cartão em destaque (IA e app): moldura em degradê */
.cartao.destaque { border: 1.5px solid transparent; background: linear-gradient(var(--sup), var(--sup)) padding-box, var(--grad) border-box;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--marca) 18%, transparent); }
.cartao.destaque .cartao-ic { background: var(--grad); color: #fff; }

/* IA: os três fornecedores, do modelo mais inteligente ao mais econômico */
.ias-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ia-cartao { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px; box-shadow: var(--sombra); }
.ia-cartao header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ia-cartao h3 { font-size: 1.2rem; }
.ia-cartao small { color: var(--suave); font-size: .85rem; }
.ia-marca { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; color: #fff; font-weight: 800; font-size: 1.3rem; }
.ia-marca.claude { background: linear-gradient(135deg, #e08a63, #c05a36); }
.ia-marca.chatgpt { background: linear-gradient(135deg, #19b38a, #0b7a5e); }
.ia-marca.gemini { background: linear-gradient(135deg, #5b8cff, #8a5cf6); }
.ia-niveis { display: grid; gap: 8px; }
.ia-niveis li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "modelo forca" "perfil forca"; align-items: center; column-gap: 12px;
  padding: 10px 12px; border-radius: 12px; background: var(--sup-2); border: 1px solid var(--linha); }
.ia-niveis b { grid-area: modelo; font-size: .97rem; }
.ia-niveis li > span:not(.forca) { grid-area: perfil; color: var(--suave); font-size: .84rem; }
.forca { grid-area: forca; display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; }
.forca i { width: 6px; border-radius: 3px; background: var(--linha); }
.forca i:nth-child(1) { height: 8px; } .forca i:nth-child(2) { height: 14px; } .forca i:nth-child(3) { height: 20px; }
.forca i.cheio { background: var(--grad); }
.ias-escala { display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 26px auto 0; color: var(--suave); font-size: .9rem; font-weight: 600; }
.ias-escala span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ias-escala i { flex: 1; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #8a5cf6, var(--marca), var(--verde)); }
.ia-uso { margin-top: 64px; }
.ia-titulo { font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important; letter-spacing: -.02em; }

/* conversa com a IA */
.conversa { display: grid; gap: 12px; background: var(--sup); border: 1px solid var(--linha); border-radius: 22px; padding: 22px; box-shadow: var(--sombra); }
.fala { max-width: 88%; padding: 12px 16px; border-radius: 16px; font-size: .95rem; }
.fala.eu { justify-self: end; background: var(--grad); color: #fff; border-bottom-right-radius: 5px; }
.fala.ia { justify-self: start; background: var(--sup-2); border: 1px solid var(--linha); border-bottom-left-radius: 5px; display: grid; gap: 8px; }
.fala.ia small { color: var(--suave); font-size: .76rem; display: flex; gap: 5px; align-items: center; }
.fala.curta { padding: 14px 18px; }
.digitando { display: inline-flex; gap: 5px; }
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--suave); animation: digitar 1.2s ease-in-out infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; } .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes digitar { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* públicos, comparativo, etapas */
.publicos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.publicos article { padding: 26px 22px; border-radius: var(--raio); background: var(--sup); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.compara { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.compara-cab, .compara-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; padding: 15px 22px; align-items: center; }
.compara-cab { font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); background: var(--sup-2); }
.compara-cab span:last-child { color: var(--marca); display: flex; gap: 7px; align-items: center; }
.compara-linha { border-top: 1px solid var(--linha); font-size: .95rem; }
.compara-linha > span:nth-child(2) { color: var(--suave); }
.compara-linha .melhor { font-weight: 600; }
.compara-linha .melhor .ic { color: var(--verde); margin-right: 3px; }
.etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.etapas li { padding-top: 22px; border-top: 2px solid var(--linha); position: relative; }
.etapas li::before { content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: 2px; background: var(--grad); }
.etapas li > span { display: block; font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: 12px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* missão */
.missao-faixa { background: var(--missao); }
.missao-faixa .bt { margin-top: 28px; }
.valores-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.valores-mini li { display: flex; gap: 14px; padding: 18px; border-radius: 16px; background: var(--f-vidro); border: 1px solid var(--f-borda); }
.valores-mini .ic { color: var(--f-verde); margin-top: 3px; }
.valores-mini span { display: grid; font-size: .9rem; color: var(--f-suave); line-height: 1.4; }
.valores-mini b { color: var(--f-tinta); font-size: 1rem; }

/* chegando, perguntas, final */
.chegando { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.chegando li { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; background: var(--sup); border: 1px solid color-mix(in srgb, var(--marca) 40%, var(--linha)); font-weight: 600; font-size: .93rem; }
.chegando .ic { color: var(--marca); }
.faq { display: grid; gap: 12px; }
.faq details { background: var(--sup); border: 1px solid var(--linha); border-radius: 16px; box-shadow: var(--sombra); }
.faq details[open] { border-color: color-mix(in srgb, var(--marca) 45%, var(--linha)); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; font-weight: 700; font-size: 1.03rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq-mais { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--marca-clara); }
.faq-mais::before, .faq-mais::after { content: ""; position: absolute; left: 6px; right: 6px; top: 10px; height: 2px; border-radius: 2px; background: var(--marca); transition: transform .2s ease; }
.faq-mais::after { transform: rotate(90deg); }
.faq details[open] .faq-mais::after { transform: rotate(0); }
.faq details p { padding: 0 22px 20px; color: var(--suave); }
.final { padding: 96px 0; text-align: center; }
.final-caixa { max-width: 780px; }
.final p { color: var(--f-suave); font-size: 1.1rem; margin-top: 16px; }
.final .abertura-acoes { justify-content: center; }
.final-nota { font-size: .92rem !important; margin-top: 26px !important; }
.final-nota a { color: var(--f-realce); text-decoration: underline; }

/* ------------------------------------------------------------------ páginas internas */
.capa { padding: 150px 0 72px; }
.capa h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
.capa .lead { max-width: 720px; }
.doc-versao { margin-top: 20px; font-size: .88rem; color: var(--f-suave); }
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mv-cartao { background: var(--sup); border: 1px solid var(--linha); border-radius: 22px; padding: 34px 30px; box-shadow: var(--sombra); }
.mv-cartao h2 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); }
.objetivos { display: grid; gap: 14px; }
.objetivos li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px; border-radius: var(--raio); background: var(--sup); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.objetivos li > span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--grad); color: #fff; font-weight: 800; font-size: 1.25rem; }
.objetivos p { color: var(--suave); margin-top: 6px; }

.doc { font-size: 1.02rem; }
.doc h2 { font-size: 1.4rem; letter-spacing: -.02em; margin: 44px 0 12px; scroll-margin-top: 90px; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 1.05rem; margin: 22px 0 8px; }
.doc p { margin: 12px 0; color: color-mix(in srgb, var(--tinta) 88%, var(--suave)); }
.doc ul { list-style: disc; padding-left: 22px; display: grid; gap: 7px; margin: 12px 0; color: color-mix(in srgb, var(--tinta) 88%, var(--suave)); }
.doc code { font-family: var(--mono); font-size: .9em; padding: 2px 7px; border-radius: 6px; background: var(--sup-2); border: 1px solid var(--linha); }
.doc-resumo { background: var(--marca-clara); border: 1px solid color-mix(in srgb, var(--marca) 30%, transparent); border-radius: var(--raio); padding: 22px 24px; margin-bottom: 40px; }
.doc-resumo strong { font-size: 1.05rem; }
.doc-tabela { border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; margin: 16px 0; background: var(--sup); }
.doc-linha { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; padding: 13px 18px; border-top: 1px solid var(--linha); font-size: .94rem; }
.doc-tabela.tres-col .doc-linha { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr) minmax(0, .6fr); }
.doc-linha:first-child { border-top: 0; }
.doc-cab { background: var(--sup-2); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.doc-fim { margin-top: 44px !important; padding-top: 22px; border-top: 1px solid var(--linha); font-size: .95rem; }

.contato { align-items: start; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; }
.contato-form { background: var(--sup); border: 1px solid var(--linha); border-radius: 22px; padding: 30px; box-shadow: var(--sombra); display: grid; gap: 20px; }
.contato-form h2 { font-size: 1.5rem; }
.contato-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contato-grade .largo { grid-column: 1 / -1; }
.contato-nota { font-size: .86rem; color: var(--suave); }
.contato-erro { color: #b3261e; font-weight: 600; font-size: .92rem; }
:root[data-theme="dark"] .contato-erro { color: #ff8a80; }
.contato-lado { display: grid; gap: 18px; }
.contato-cartao { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px; box-shadow: var(--sombra); }
.contato-cartao p { color: var(--suave); font-size: .93rem; margin-top: 8px; }
.contato-email { display: inline-block; margin-top: 8px; font-size: 1.08rem; font-weight: 700; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ rodapé */
.rodape { background: var(--rodape); color: var(--rodape-tinta); padding: 64px 0 0; font-size: .93rem; }
.rodape-grade { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.rodape .marca { color: var(--rodape-forte); }
.rodape-marca p { margin: 16px 0 22px; max-width: 320px; }
.rodape strong { display: block; color: var(--rodape-forte); margin-bottom: 12px; font-size: .95rem; }
.rodape nav { display: grid; gap: 10px; align-content: start; }
.rodape a { color: var(--rodape-tinta); overflow-wrap: anywhere; }
.rodape a:hover { color: var(--rodape-forte); }
.rodape-email { display: inline-flex; gap: 8px; align-items: center; }
.rodape .redes { margin-top: 20px; }
.rodape .redes-titulo { flex-basis: 100%; color: var(--rodape-forte); font-weight: 700; font-size: .95rem; }
.rodape .redes a { border-color: var(--rodape-borda); }
.rodape .redes a:hover { border-color: currentColor; }
.rodape-fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding: 22px 0 28px; border-top: 1px solid var(--rodape-borda); font-size: .84rem; color: var(--rodape-tinta); }

/* ------------------------------------------------------------------ ferramentas gratuitas (calculadoras; dono, 25/10/2026 v2)
   Aqui só o que é do site (trilha e capa, chamada e cartões da página inicial, folha do modelo de documento); as telas das
   ferramentas estão em ferramentas.css, que o sistema também usa (dono, 28/10/2026). */
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .86rem; color: var(--f-suave); margin-bottom: 18px; }
.trilha a { color: var(--f-realce); }
.trilha .ic { opacity: .6; }
.capa-ferr { padding-bottom: 56px; }
.capa-ferr h1 { max-width: 900px; }
/* página inicial: as ferramentas logo depois da abertura e a porta do sistema */
.ferr-home-grupo { margin: 30px 0 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .07em; font-size: .82rem; }
.ferr-home { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ferr-home-item { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 22px 20px 20px; border-radius: var(--raio); background: var(--sup);
  border: 1px solid var(--linha); box-shadow: var(--sombra); color: var(--tinta); transition: transform .2s ease, box-shadow .2s ease; }
.ferr-home-item:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(12, 26, 46, .13); }
.ferr-home-item .cartao-ic { margin: 0; flex: none; background: var(--grad); color: #fff; }
.ferr-home-txt { display: grid; gap: 4px; min-width: 0; }
.ferr-home-txt b { font-size: 1rem; line-height: 1.3; }
.ferr-home-txt small { color: var(--suave); font-size: .86rem; line-height: 1.45; }
.ferr-home-selo { position: absolute; top: -10px; right: 14px; font-size: .7rem; font-weight: 750; padding: 2px 9px; border-radius: 999px; background: var(--verde-clara); color: var(--verde);
  border: 1px solid color-mix(in srgb, var(--verde) 25%, transparent); }
.ferr-home-todas { text-align: center; margin-top: 28px; }
.sistema-porta { position: relative; overflow: hidden; }
.sistema-porta .largura { position: relative; }
.sistema-porta .cabecalho { margin-bottom: 0; }
.sistema-porta .abertura-acoes { justify-content: center; margin-top: 24px; }
.sistema-porta .fatos { margin-top: 44px; }
.doc-folha { padding: 56px 60px; background: #fff; color: #111; border-radius: 6px; box-shadow: 0 10px 40px rgba(12, 26, 46, .14);
  font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.doc-folha p { margin: 0 0 12px; text-align: justify; }
/* Título em destaque e afastado do texto; assinatura com uns 3 cm livres em cima (GOV.BR, certificado digital; dono, 28/10/2026). */
.doc-folha .doc-titulo { text-align: center; font-size: 23px; font-weight: 800; letter-spacing: .05em; text-decoration: underline; text-underline-offset: 5px; margin: 0 0 34px; color: #111; }
.doc-folha .doc-subtitulo { font-size: 15px; margin: 18px 0 8px; color: #111; }
.doc-folha .doc-centro { text-align: center; }
.doc-folha .doc-direita { text-align: right; }
.doc-folha .doc-esquerda { text-align: left; }
.doc-folha p.doc-assina { margin-top: 3cm; break-inside: avoid; }
.doc-folha ul { margin: 0 0 12px 22px; list-style: disc; }
.doc-folha hr.doc-linha { display: block; padding: 0; border: 0; border-top: 1px solid #bbb; margin: 18px 0; }
.doc-folha .doc-lacuna { color: #888; }
@media (max-width: 1100px) { .ferr-home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ferr-home { grid-template-columns: minmax(0, 1fr); }
  .doc-folha { padding: 28px 20px; font-size: 13px; }
}
@media print {
  body:has(.doc-folha) .capa { display: none !important; }
  .doc-folha { box-shadow: none; padding: 0; }
}

/* ------------------------------------------------------------------ planos e preços (/planos, 10/11/2026) */
.pl-g { --pl: var(--verde); --pl-claro: var(--verde-clara); }
.pl-ga { --pl: var(--marca); --pl-claro: var(--marca-clara); }
.pl-i { --pl: #6b4fc8; --pl-claro: #efeafb; }
:root[data-theme="dark"] .pl-i { --pl: #b9a3f0; --pl-claro: #2a2340; }
.pl-sim { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.pl-sim-campo { display: grid; gap: 8px; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px; box-shadow: var(--sombra); }
.pl-sim-campo span { font-weight: 700; }
.pl-sim-campo input { width: 100%; font-size: 1.6rem; font-weight: 700; padding: 10px 14px; border: 1px solid var(--linha); border-radius: 12px; background: var(--fundo); }
.pl-sim-campo small { color: var(--suave); font-size: .88rem; }
.pl-sim-niveis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pl-nivel { background: var(--sup); border: 1px solid var(--linha); border-top: 5px solid var(--pl); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); }
.pl-nivel.pl-ga { background: linear-gradient(var(--pl-claro), var(--sup) 70%); }
.pl-nivel h3 { color: var(--pl); font-size: 1.15rem; }
.pl-valor { margin-top: 8px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pl-valor small { font-size: .9rem; font-weight: 600; color: var(--suave); margin-left: 4px; }
.pl-frase { margin-top: 12px; font-size: .93rem; color: var(--suave); }
.pl-quadro, .pl-faixas { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--sup); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; font-size: .95rem; }
.pl-quadro th, .pl-quadro td, .pl-faixas th, .pl-faixas td { padding: 11px 16px; border-bottom: 1px solid var(--linha); text-align: center; }
.pl-quadro th:first-child, .pl-quadro td:first-child, .pl-faixas th:first-child, .pl-faixas td:first-child { text-align: left; }
.pl-quadro tr:last-child td, .pl-faixas tr:last-child td { border-bottom: 0; }
.pl-quadro thead th, .pl-faixas thead th { background: var(--sup-2); font-weight: 750; color: var(--pl, var(--tinta)); }
.pl-quadro td:not(:first-child), .pl-quadro th:not(:first-child) { width: 16%; }
.pl-quadro td.pl-ga, .pl-faixas td.pl-ga { background: var(--marca-clara); }
.pl-faixas td.pl-ga { font-weight: 750; color: var(--marca-forte); }
.pl-grupo td { background: var(--sup-2); font-size: .74rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); padding-block: 8px; }
.pl-grupo td.pl-ga { background: var(--sup-2); }
.pl-sim-marca { color: var(--pl); display: inline-grid; }
.pl-nao { color: var(--suave); opacity: .5; }
.pl-consumo { font-size: .8rem; font-weight: 650; color: #a8670b; }
:root[data-theme="dark"] .pl-consumo { color: #f0c46a; }
.pl-acima td { font-weight: 700; }
.pl-acima small { display: block; font-size: .76rem; font-weight: 500; color: var(--suave); }
.pl-nota { margin-top: 14px; color: var(--suave); font-size: .9rem; text-align: center; }
@media (max-width: 980px) {
  .pl-sim { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pl-sim-niveis { grid-template-columns: minmax(0, 1fr); }
  .pl-quadro, .pl-faixas { font-size: .82rem; }
  .pl-quadro th, .pl-quadro td, .pl-faixas th, .pl-faixas td { padding: 9px 6px; }
  .pl-quadro th:first-child, .pl-quadro td:first-child, .pl-faixas th:first-child, .pl-faixas td:first-child { padding-left: 12px; }
  .pl-quadro td:not(:first-child), .pl-quadro th:not(:first-child) { width: 19%; }
  .pl-quadro thead th { font-size: .74rem; }
}

/* ------------------------------------------------------------------ entrada suave (só com JavaScript) */
.com-revela .revela { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.com-revela .revela.visivel { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ telas menores */
/* Com a aba Ferramentas (25/10/2026) o menu nunca quebra a linha: um pouco mais justo sempre e o botão ☰ até 1180 px. */
.nav a { white-space: nowrap; padding-inline: 8px; }
.nav .nav-gratis { margin-left: 4px; padding: 1px 6px; }
@media (min-width: 1181px) { .topo-linha { gap: 14px; } }
@media (max-width: 1180px) and (min-width: 981px) {
  .bt-menu { display: grid; }
  .nav { display: none; position: absolute; left: 12px; right: 12px; top: 72px; margin: 0; flex-direction: column; gap: 2px; padding: 10px; border-radius: var(--raio);
    background: var(--sup); color: var(--tinta); border: 1px solid var(--linha); box-shadow: var(--sombra-forte); }
  .nav.aberto { display: flex; animation: surgir .16s ease; }
  .nav a { padding: 12px 14px; font-size: 1rem; }
  .nav-so-celular { display: block; }
}
@media (max-width: 1100px) {
  .nav a { padding: 8px 8px; font-size: .9rem; }
  .cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fluxo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fluxo li:nth-child(4)::before { display: none; }
  .topo-cta { display: none; }
}
@media (max-width: 980px) {
  .bt-menu { display: grid; }
  .nav { display: none; position: absolute; left: 12px; right: 12px; top: 72px; margin: 0; flex-direction: column; gap: 2px; padding: 10px; border-radius: var(--raio);
    background: var(--sup); color: var(--tinta); border: 1px solid var(--linha); box-shadow: var(--sombra-forte); }
  .nav.aberto { display: flex; animation: surgir .16s ease; }
  .nav a { padding: 12px 14px; font-size: 1rem; }
  .nav-so-celular { display: block; }
  .abertura { padding-top: 108px; }
  .nuvem-palco { justify-self: center; max-width: 540px; }
  .ias-grade { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .ia-uso { margin-top: 48px; }
  .abertura-grade, .duas, .contato { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .duas.inverte > :first-child { order: 2; }
  .publicos, .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartoes, .cartoes.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .rodape-marca { grid-column: 1 / -1; }
  .secao, .final { padding: 72px 0; }
  .capa { padding: 124px 0 56px; }
}
@media (max-width: 640px) {
  .largura, .largura.estreita { width: calc(100% - 32px); }
  .topo-linha { gap: 8px; }
  .topo-acoes { gap: 4px; }
  .abertura-acoes .bt { width: 100%; }
  .abertura .redes-titulo { flex-basis: 100%; }
  .ias-escala { font-size: .8rem; gap: 8px; }
  .fatos { grid-template-columns: 1fr 1fr; margin-top: 44px; }
  .fatos div { padding: 20px 14px; } .fatos div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fatos div:nth-child(n+3) { border-top: 1px solid var(--f-borda); }
  .antes-depois { grid-template-columns: minmax(0, 1fr); }
  .seta-ad { justify-self: center; transform: rotate(90deg); }
  .cartoes, .cartoes.tres, .publicos, .etapas, .fluxo, .mv, .valores-mini, .lista-ok.colunas, .contato-grade { grid-template-columns: minmax(0, 1fr); }
  .fluxo li + li::before { display: none; }
  .compara-cab { display: none; }
  .compara-linha { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 18px; }
  .compara-linha > span::before { content: attr(data-rotulo) ": "; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); display: block; }
  .doc-linha, .doc-tabela.tres-col .doc-linha { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .doc-cab { display: none; }
  .doc-linha span:first-child { font-weight: 650; }
  .rodape-grade { grid-template-columns: 1fr; gap: 30px; }
  .contato-form { padding: 22px; }
  .objetivos li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .objetivos li > span { width: 44px; height: 44px; border-radius: 13px; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* a nuvem vira imagem parada: cada gota fica no ponto em que estaria */
  .gota { animation: cair var(--d) linear var(--a) infinite paused !important; }
}
@media print {
  .topo, .rodape, .ceu, .final { display: none; }
  .capa { background: none; color: #000; padding: 0 0 20px; }
  .capa .lead, .doc-versao { color: #333; }
}