/* ══════════════════════════════════════════════════════════════════════════
   presenca.sagazlab.io — landing v3
   Identidade Visual v2.0 (ADR-032): tinta + vermelhão, Archivo + IBM Plex Mono.
   Folha AUTOSSUFICIENTE — o index.html da raiz não carrega global.css/home.css/
   style.css. Os 12 templates de segmento continuam no design system antigo.
   Contraste conferido para WCAG 2.1 AA (ADR-016).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* superfícies */
  --papel:        #F4F1EC;
  --branco:       #FFFFFF;
  --tinta:        #0F1417;
  --tinta-alta:   #151A1E;   /* cartão sobre tinta */
  --linha:        #DDD8CF;   /* borda no claro */
  --linha-escura: #2B3236;   /* borda no escuro */

  /* marca — três variantes, porque uma cor só não passa em AA nos dois fundos */
  --vermelhao:       #E8431F;  /* só como FUNDO (texto tinta em cima: 4,64:1) */
  --vermelhao-texto: #C0341A;  /* texto sobre papel/branco: 4,98:1 / 5,60:1 */
  --vermelhao-claro: #FF5A33;  /* texto sobre tinta: 6,04:1 — token escuro do ADR-032 */
  --vermelhao-hover: #A32B14;  /* hover de link no claro: 6,40:1 */

  /* texto */
  --ardosia:      #4A525B;   /* 7,04:1 sobre papel */
  --claro-forte:  #C9D0D6;
  --claro-medio:  #9AA3AA;   /* 7,23:1 sobre tinta */
  --claro-fraco:  #8A939B;   /* 5,94:1 sobre tinta — rótulos mono */
  --claro-borda:  #7C868E;   /* 4,72:1 sobre tinta-alta */

  /* Borda de controle de formulário — WCAG 1.4.11 exige 3:1 no contorno.
     O fundo do input (#0F1417) contra o cartão (#151A1E) dá 1,06:1, então
     quem carrega a distinção é a borda. #626B73 = 3,24:1 sobre tinta-alta. */
  --borda-controle: #626B73;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gutter: clamp(28px, 5vw, 48px);
  --sombra-card: 0 10px 28px rgba(15, 20, 23, .06);
  --sombra-alta: 0 20px 50px rgba(15, 20, 23, .2);
}

* { box-sizing: border-box; }

/* Regras de display abaixo (flex/grid) vencem o [hidden] do agente de usuário.
   O script.js esconde .field/.form-note e revela #form-success com [hidden] —
   sem esta linha a caixa de sucesso nasce visível. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* WCAG 1.4.1 (Uso de Cor): link dentro de texto corrido não pode ser
   distinguível só pela cor. Por isso o padrão é SUBLINHADO, e quem tira o
   sublinhado é a lista abaixo — links que já se identificam pela forma
   (botão, cartão, item de menu). Regra invertida de propósito: assim um link
   novo em parágrafo nasce acessível, em vez de nascer quebrado. */
a { color: var(--vermelhao-texto); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--vermelhao-hover); }

.btn, .skip-link, .brand-mark, .footer-brand,
.desktop-nav a, .menu-panel nav a, .footer-links a,
.segmento-card, .case-link, .case-status, .form-alt, .wpp-alt {
  text-decoration: none;
}
.desktop-nav a:hover, .menu-panel nav a:hover, .footer-links a:hover,
.case-link:hover, .form-alt:hover, .wpp-alt:hover { text-decoration: underline; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--vermelhao); outline-offset: 2px; }

.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;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tinta); color: var(--papel);
  padding: 12px 20px; font-weight: 600; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; text-decoration: none; color: var(--papel); }

.container { width: min(1240px, 100% - var(--gutter)); margin-inline: auto; }

/* ── Botões ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 15px 28px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-align: center;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { text-decoration: none; }

/* vermelhão sempre com texto tinta — #F4F1EC sobre vermelhão dá 3,55:1 e reprova */
.btn-primary { background: var(--vermelhao); border-color: var(--vermelhao); color: var(--tinta); }
.btn-primary:hover { background: var(--vermelhao-texto); border-color: var(--vermelhao-texto); color: var(--papel); }

.btn-outline { background: transparent; border-color: var(--tinta); color: var(--tinta); }
.btn-outline:hover { background: var(--tinta); color: var(--papel); }

.btn-ghost-dark { background: transparent; border-color: var(--borda-controle); color: var(--papel); }
.btn-ghost-dark:hover { border-color: var(--papel); background: rgba(244, 241, 236, .08); color: var(--papel); }

.btn-wpp-green { background: #0E7A40; border-color: #0E7A40; color: #FFFFFF; }
.btn-wpp-green:hover { background: #0B6334; border-color: #0B6334; color: #FFFFFF; }

.btn-lg { padding: 17px 30px; font-size: 16px; }
.btn-block { width: 100%; }

/* ── Tipografia de seção ─────────────────────────────────────────────────── */
.eyebrow {
  display: block; margin: 0;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}
.eyebrow-dark { color: var(--claro-fraco); }

.section { padding: clamp(56px, 8vw, 104px) 0; border-bottom: 1px solid var(--linha); }
.section-dark { background: var(--tinta); color: var(--papel); border-bottom-color: var(--tinta); }

.section-title {
  font-size: clamp(34px, 4.2vw, 56px); font-weight: 700;
  letter-spacing: -.04em; line-height: 1.02; margin: 18px 0 12px;
}
.section-copy { font-size: clamp(16px, 1.5vw, 18px); color: var(--ardosia); margin: 0 0 56px; max-width: 58ch; }
.section-dark .section-copy { color: var(--claro-medio); }

.card {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 18px;
  box-shadow: var(--sombra-card); padding: clamp(26px, 3.5vw, 34px) clamp(22px, 3vw, 30px);
}

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--papel); border-bottom: 1px solid var(--linha);
}
.nav-shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 74px; padding: 12px 0; flex-wrap: wrap;
}
.brand-mark { display: flex; align-items: center; gap: 12px; color: var(--tinta); }
.brand-mark:hover { color: var(--tinta); text-decoration: none; }
.brand-mark svg { flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 19px; font-weight: 700; letter-spacing: -.04em; }
.brand-text span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ardosia);
}

.desktop-nav {
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 28px);
  font-size: clamp(13px, 1.2vw, 14px); font-weight: 500;
  flex: 1 1 auto; justify-content: center; min-width: 0; flex-wrap: wrap;
}
.desktop-nav a { color: var(--tinta); }
.desktop-nav a:hover { color: var(--vermelhao-texto); }

.menu-toggle {
  display: none; align-items: center; gap: 10px; min-height: 44px;
  padding: 10px 16px; border: 1px solid var(--linha); border-radius: 999px;
  background: var(--branco); color: var(--tinta);
  font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer;
}
.menu-lines { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-lines span { display: block; width: 18px; height: 2px; background: currentColor; }

.menu-panel { display: none; padding: 0 0 16px; }
.menu-panel[aria-hidden="false"] { display: block; }
.menu-panel nav { display: flex; flex-direction: column; }
.menu-panel nav a {
  padding: 14px 4px; color: var(--tinta); font-weight: 500;
  border-bottom: 1px solid var(--linha);
}
.menu-panel nav a:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav-shell .header-cta { display: none; }
}
@media (min-width: 901px) { .menu-panel { display: none !important; } }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  background: var(--tinta); color: var(--papel);
  border-bottom: 1px solid var(--tinta); overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px); align-items: center;
  padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px);
}
.hero-flag {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--linha-escura); border-radius: 999px; padding: 9px 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--claro-forte);
}
.hero-flag .dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--vermelhao);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero-title {
  font-size: clamp(44px, 5.4vw, 74px); line-height: .98;
  letter-spacing: -.045em; font-weight: 700; margin: 26px 0 0;
}
.hero-title .mark {
  background: var(--vermelhao); color: var(--tinta);
  border-radius: 12px; padding: 0 12px; box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero-lead { font-size: clamp(17px, 1.6vw, 19px); color: var(--claro-medio); max-width: 52ch; margin: 26px 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-note { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--claro-fraco); margin: 18px 0 0; }

/* painel de exemplo do raio-X */
.raiox-panel {
  border: 1px solid var(--linha-escura); background: var(--tinta-alta);
  border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.raiox-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--linha-escura);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--claro-borda);
}
.raiox-head .vivo { color: var(--vermelhao-claro); }  /* 5,66:1 — o vermelhão puro dava 4,38 aqui */
.raiox-body { padding: 24px 22px 26px; }
.raiox-score {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px; border-bottom: 1px solid var(--linha-escura); padding-bottom: 20px;
}
.raiox-score .rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--claro-borda); margin: 0 0 6px; }
.raiox-score .titulo { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.raiox-nota { display: flex; align-items: baseline; gap: 4px; }
.raiox-nota strong { font-size: clamp(38px, 5vw, 52px); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--vermelhao-claro); }
.raiox-nota span { font-size: 18px; color: var(--claro-borda); }

.raiox-barras { display: flex; flex-direction: column; gap: 18px; padding: 22px 0 4px; }
.raiox-barra-topo { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
.raiox-barra-topo span:first-child { color: var(--claro-forte); }
.raiox-barra-topo span:last-child { font-family: var(--mono); color: var(--claro-borda); }
.raiox-trilho { height: 8px; border-radius: 999px; background: #22282D; }
.raiox-preenche { height: 8px; border-radius: 999px; background: var(--vermelhao); }

.raiox-rank { border-top: 1px solid var(--linha-escura); margin-top: 22px; padding-top: 18px; }
.raiox-rank .rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--claro-borda); margin: 0 0 12px; }
.raiox-rank ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.raiox-rank li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--claro-forte); }
.raiox-rank li b { font-family: var(--mono); font-weight: 500; }
.raiox-rank li.voce { color: var(--papel); border-top: 1px dashed var(--linha-escura); padding-top: 10px; }
.raiox-rank li.voce b { color: var(--vermelhao-claro); }

/* ── Carrossel de raios-X ────────────────────────────────────────────────────
   Dois estados, de propósito:

   1. SEM JS (base) — scroller horizontal com scroll-snap. Os três cartões ficam
      no DOM e dá para chegar em todos com o dedo, a roda ou o teclado.
   2. COM JS (.raiox-carrossel--pilha) — os três ocupam a MESMA célula de grid,
      empilhados no mesmo ponto. Só o ativo aparece; a troca é fade cruzado com
      um deslize curto de 40px vindo da direita. Nenhum cartão sai andando pela
      tela: quem está embaixo fica parado e é coberto.

   O grid resolve a altura sozinho (a célula cresce até o cartão mais alto),
   então não precisa de position:absolute nem de altura fixa. */
.raiox-carrossel { min-width: 0; }
.raiox-viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  /* espaço para a sombra do cartão não ser cortada embaixo */
  padding-bottom: 34px;
}
.raiox-viewport::-webkit-scrollbar { display: none; }
.raiox-viewport:focus-visible { outline: 2px solid var(--vermelhao-claro); outline-offset: 6px; border-radius: 22px; }
.raiox-track { list-style: none; margin: 0; padding: 0; display: flex; }
.raiox-slide {
  flex: 0 0 100%; min-width: 0;
  scroll-snap-align: center; scroll-snap-stop: always;
}
.raiox-slide > .raiox-panel { height: 100%; }

/* ── Estado com JS: pilha no mesmo ponto ─────────────────────────────────── */
.raiox-carrossel--pilha .raiox-viewport { overflow: hidden; scroll-snap-type: none; }
.raiox-carrossel--pilha .raiox-track { display: grid; }
.raiox-carrossel--pilha .raiox-slide {
  grid-area: 1 / 1; flex: none; min-width: 0;
  opacity: 0; visibility: hidden; transform: translateX(40px);
  /* a visibilidade só cai DEPOIS do fade, senão o cartão some antes da hora */
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.raiox-carrossel--pilha .raiox-slide[data-ativo] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .5s ease, transform .5s ease, visibility 0s;
}

.raiox-controles { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.raiox-seta, .raiox-pausa {
  font: inherit; cursor: pointer; background: transparent; color: var(--claro-forte);
  border: 1px solid var(--linha-escura); border-radius: 999px;
  min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .18s ease, color .18s ease;
}
.raiox-pausa {
  min-width: auto; padding: 0 16px; margin-left: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.raiox-seta:hover, .raiox-pausa:hover { color: var(--papel); border-color: var(--vermelhao-claro); }
.raiox-seta:focus-visible, .raiox-pausa:focus-visible, .raiox-ponto:focus-visible {
  outline: 2px solid var(--vermelhao-claro); outline-offset: 3px;
}
.raiox-pontos { display: flex; gap: 2px; }
.raiox-ponto {
  cursor: pointer; background: transparent; border: 0; padding: 0;
  width: 28px; height: 40px;              /* alvo de toque ≥ 24px (WCAG 2.5.8) */
  display: inline-flex; align-items: center; justify-content: center;
}
.raiox-ponto::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--claro-borda); transition: background-color .18s ease, transform .18s ease;
}
.raiox-ponto[aria-current="true"]::before { background: var(--vermelhao-claro); transform: scale(1.5); }

/* Frente que zerou: barra vazia não desenha nada, então marca com traço. */
.raiox-trilho--zero { background: transparent; border: 1px dashed var(--linha-escura); }

.hero-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hero-list li { display: flex; gap: 10px; font-size: 16px; color: var(--claro-forte); }
.hero-list li::before { content: "→"; color: var(--vermelhao-claro); flex: none; }

/* ── Marquee de sites no ar ──────────────────────────────────────────────── */
.marquee-section {
  background: var(--tinta); color: var(--papel);
  padding: 34px 0; border-top: 1px solid #22282D; overflow: hidden;
}
.marquee-section .rotulo {
  width: min(1240px, 100% - var(--gutter)); margin: 0 auto 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--claro-fraco);
}
.marquee-prova {
  margin: 22px auto 0; font-size: 14px; line-height: 1.7; color: var(--claro-medio);
}
.marquee-prova a { color: var(--vermelhao-claro); }
.marquee { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee-run {
  display: flex; align-items: center; gap: clamp(32px, 5vw, 64px); padding-right: 64px;
  font-size: clamp(20px, 3vw, 26px); font-weight: 600; letter-spacing: -.03em;
  color: var(--claro-borda); white-space: nowrap;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }

/* ── Faixa de números ────────────────────────────────────────────────────── */
.stats-strip { border-bottom: 1px solid var(--linha); }
.stats-lead {
  font-size: clamp(17px, 1.7vw, 20px); color: var(--ardosia);
  margin: 0; padding: 48px 0 0; max-width: 62ch;
}
.stats-lead strong { color: var(--tinta); }
.stats-lead + .stats-grid { padding-top: 28px; }
.stats-grid {
  display: grid; gap: 20px; padding: 48px 0;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.stat-num { font-size: clamp(38px, 5vw, 52px); font-weight: 700; letter-spacing: -.05em; line-height: 1; display: block; }
.stat-num.destaque { color: var(--vermelhao-texto); }
.stat-rotulo { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ardosia); margin: 12px 0 0; }
.stat-desc { font-size: 14px; color: var(--ardosia); margin: 8px 0 0; }

/* ── Grades genéricas ────────────────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }

.header-split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px); align-items: end; margin-bottom: 56px;
}
.header-split h2 { margin-bottom: 0; }
.header-split p { margin: 0; max-width: 46ch; font-size: clamp(16px, 1.5vw, 18px); color: var(--ardosia); }

.num-card { font-family: var(--mono); font-size: 12px; color: var(--vermelhao-texto); }
.card h3 { font-size: 24px; font-weight: 600; letter-spacing: -.03em; margin: 16px 0 10px; }
.card p { font-size: 16px; color: var(--ardosia); margin: 0; }

.icon-box {
  width: 48px; height: 48px; border-radius: 14px; background: var(--tinta); color: var(--papel);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}

/* ── DMAIC ───────────────────────────────────────────────────────────────── */
.dmaic-letra {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--vermelhao); color: var(--tinta); font-size: 22px; font-weight: 700;
}
.dmaic-card h3 { font-size: 20px; margin: 18px 0 8px; }
.dmaic-card p { font-size: 15px; }

.entregavel {
  background: var(--tinta); color: var(--papel); border-radius: 22px;
  box-shadow: var(--sombra-alta); margin-top: 28px;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 40px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 4vw, 48px); align-items: start;
}
.entregavel h3 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; margin: 0; }
.entregavel ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px 32px;
}
.entregavel li { display: flex; gap: 10px; font-size: 15px; color: var(--claro-forte); }
.entregavel li::before { content: "→"; color: var(--vermelhao-claro); flex: none; }

/* ── Antes e depois ──────────────────────────────────────────────────────── */
.ad-col { padding: clamp(30px, 4vw, 40px) clamp(24px, 3vw, 34px); }
.ad-col .rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 22px; }
.ad-antes .rotulo { color: var(--ardosia); }
.ad-depois { border-left: 4px solid var(--vermelhao); }
.ad-depois .rotulo { color: var(--vermelhao-texto); }
.ad-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ad-col li { display: flex; gap: 12px; font-size: 16px; }
.ad-antes li { color: var(--ardosia); }
.ad-depois li { color: var(--tinta); }
.ad-depois li .mark { color: var(--vermelhao-texto); }

/* ── Planos ──────────────────────────────────────────────────────────────── */
.plano {
  display: flex; flex-direction: column; gap: 18px; border-radius: 20px;
  padding: clamp(30px, 4vw, 40px) clamp(24px, 3vw, 32px);
}
.plano .rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ardosia); margin: 0; }
.plano h3 { font-size: 24px; font-weight: 600; letter-spacing: -.03em; margin: 0; }
.plano .preco { font-size: clamp(36px, 4.6vw, 46px); font-weight: 700; letter-spacing: -.05em; line-height: 1; margin: 0; }
.plano .preco small { font-size: 18px; font-weight: 500; letter-spacing: 0; }
/* "a partir de" precisa vir ANTES do número e menor que ele — sem isso o R$ 149
   do pacote lê como preço fechado, quando é piso de uma faixa até R$ 499. */
.plano .preco .preco-prefixo {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ardosia); margin-bottom: 10px;
}
/* Letra miúda do preço: o que mais entra na conta (implantação, "uma vez",
   abatimento). Fica colada ao número, não no rodapé da seção. */
.plano .preco-nota { font-size: 13px; line-height: 1.5; color: var(--ardosia); margin: -8px 0 0; }
.plano .resumo { font-size: 15px; color: var(--ardosia); margin: 0; }
.plano ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--ardosia); }
.plano li { display: flex; gap: 10px; }
.plano li::before { content: "→"; color: var(--vermelhao-texto); flex: none; }
.plano .btn { margin-top: auto; }

.plano-destaque {
  background: var(--tinta); color: var(--papel); border: 1px solid var(--tinta);
  box-shadow: 0 18px 40px rgba(15, 20, 23, .22);
}
.plano-destaque .rotulo { color: var(--claro-borda); }
/* Sem esta linha o preço herda a ardósia de `.card p` (que vence, porque
   `.plano .preco` não declara cor) e o R$ 149 do plano principal sai a
   2,34:1 sobre a tinta — quase invisível. Pego no navegador, não na
   matriz estática: é cascata, não par de cor previsto. */
.plano-destaque .preco { color: var(--papel); }
.plano-destaque .preco-nota,
.plano-destaque .preco .preco-prefixo { color: var(--claro-medio); }
.plano-destaque .resumo { color: var(--claro-medio); }
.plano-destaque ul { color: var(--claro-forte); }
.plano-destaque li::before { color: var(--vermelhao-claro); }
.plano-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.selo {
  border-radius: 999px; background: var(--vermelhao); color: var(--tinta);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; padding: 7px 14px; white-space: nowrap;
}
.planos-nota { font-family: var(--mono); font-size: 12px; color: var(--ardosia); margin: 20px 0 0; }

/* ── Segmentos e cases ───────────────────────────────────────────────────── */
.segmento-card {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 20px 22px; color: var(--tinta); min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 16px; font-weight: 500;
  transition: background-color .18s ease, color .18s ease;
}
.segmento-card:hover { background: var(--tinta); color: var(--papel); text-decoration: none; }
.segmento-card .seta { font-family: var(--mono); font-size: 12px; flex: none; }
.segmentos-nota { font-size: 15px; color: var(--ardosia); margin: 20px 0 76px; }

.case-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.case-thumb { width: 100%; height: 210px; object-fit: cover; border-bottom: 1px solid var(--linha); }
.case-body { padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.case-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ardosia); margin: 0; }
.case-body h3 { font-size: 22px; font-weight: 600; letter-spacing: -.03em; margin: 0; }
.case-body p { font-size: 15px; color: var(--ardosia); margin: 0; }
.case-tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.case-tags li { display: flex; gap: 8px; font-size: 14px; color: var(--ardosia); }
.case-tags li::before { content: "→"; color: var(--vermelhao-texto); flex: none; }
.case-link { margin-top: auto; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.case-status { margin-top: auto; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ardosia); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 16px;
  box-shadow: 0 8px 22px rgba(15, 20, 23, .05); padding: 24px 26px;
}
.faq-item summary {
  display: flex; justify-content: space-between; gap: 24px; align-items: center;
  font-size: clamp(17px, 1.7vw, 19px); font-weight: 600; letter-spacing: -.02em;
  list-style: none; cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { font-size: 22px; color: var(--vermelhao-texto); transition: transform .2s ease; flex: none; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-item p { font-size: 16px; color: var(--ardosia); margin: 14px 0 0; max-width: 62ch; }

/* ── CTA de meio (recuperado da landing v2 — converte, e a v3 do artefato
      ia do FAQ direto ao formulário sem nenhum ponto de saída no caminho) ── */
.mid-cta-section { padding: clamp(40px, 5vw, 64px) 0; border-bottom: 1px solid var(--linha); }
.mid-cta {
  background: var(--vermelhao); border-radius: 20px;
  padding: clamp(30px, 4vw, 44px) clamp(24px, 3.5vw, 40px);
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
}
.mid-cta-copy { margin: 0; font-size: clamp(17px, 1.8vw, 21px); color: var(--tinta); max-width: 60ch; }
.mid-cta-copy strong { font-weight: 700; }
.mid-cta .btn { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.mid-cta .btn:hover { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.mid-cta-note { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--tinta); }

/* ── Formulário ──────────────────────────────────────────────────────────── */
.contato-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.contato-title {
  font-size: clamp(36px, 4.4vw, 58px); font-weight: 700;
  letter-spacing: -.04em; line-height: 1; margin: 20px 0 0;
}
.contato-lead { font-size: clamp(16px, 1.5vw, 18px); color: var(--claro-medio); margin: 24px 0 0; max-width: 50ch; }
.contato-lead a { color: var(--vermelhao-claro); }
.contato-lista { display: grid; gap: 12px; margin-top: 36px; }
.contato-item { background: var(--tinta-alta); border: 1px solid var(--linha-escura); border-radius: 16px; padding: 22px 24px; }
.contato-item strong { font-size: 17px; font-weight: 600; }
.contato-item p { margin: 6px 0 0; font-size: 15px; color: var(--claro-medio); }

.form-card {
  background: var(--tinta-alta); border: 1px solid var(--linha-escura); border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  padding: clamp(26px, 4vw, 36px) clamp(22px, 3vw, 32px);
}
.form-card .form-titulo { margin: 0 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.form-card .form-sub { margin: 0 0 26px; font-size: 14px; color: var(--claro-medio); }

.form-shell { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 18px; }
.field label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--claro-medio);
}
.field input, .field select {
  background: var(--tinta); border: 1px solid var(--borda-controle); color: var(--papel);
  border-radius: 12px; padding: 14px 16px; min-height: 44px;
  font-family: var(--sans); font-size: 15px; width: 100%;
}
.field input::placeholder { color: var(--claro-fraco); }
.field input:focus-visible, .field select:focus-visible { border-color: var(--vermelhao); }
.field input.invalid, .field select.invalid { border-color: var(--vermelhao); }

.field-check { flex-direction: row; gap: 12px; align-items: flex-start; }
.field-check input { width: 18px; height: 18px; min-height: 0; flex: none; margin-top: 3px; accent-color: var(--vermelhao); }
.field-check label { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--claro-medio); line-height: 1.5; }
.field-check label a { color: var(--vermelhao-claro); }

.error-msg { font-size: 12.5px; color: #FF9C86; min-height: 1em; }
.form-note { font-size: 12.5px; color: var(--claro-fraco); text-align: center; margin: 0; }
.form-alt {
  display: block; text-align: center; font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--claro-medio);
}

.form-success, .form-error { display: flex; flex-direction: column; gap: 12px; }
.form-success h3, .form-error h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.form-success p, .form-error p { margin: 0; font-size: 14px; color: var(--claro-medio); }
.pay-hint { font-size: 12.5px !important; color: var(--claro-fraco) !important; }
.wpp-alt { display: block; text-align: center; font-size: 14px; color: var(--vermelhao-claro); }

/* ── Rodapé ──────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--tinta); color: var(--papel);
  border-top: 1px solid var(--linha-escura);
  padding: clamp(44px, 6vw, 64px) 0 40px;
}
.footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(32px, 5vw, 48px); border-bottom: 1px solid var(--linha-escura);
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand strong { font-size: 20px; letter-spacing: -.04em; }
.footer-tagline { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--claro-borda); margin: 14px 0 0; }
.footer-desc { font-size: 15px; color: var(--claro-medio); margin: 10px 0 0; max-width: 38ch; }
.footer-title { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--claro-fraco); margin: 0 0 16px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-links a { color: var(--claro-forte); }
.footer-links a:hover { color: var(--papel); }
.footer-social-link { display: inline-flex; align-items: center; gap: 8px; }
.footer-legal { font-family: var(--mono); font-size: 12px; color: var(--claro-fraco); margin: 24px 0 0; }

/* ── WhatsApp flutuante ──────────────────────────────────────────────────── */
.whatsapp-float {
  position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px;
  background: #128C4A; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(18, 140, 74, .45); z-index: 1000;
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgba(18, 140, 74, .6); }
@media (max-width: 768px) { .whatsapp-float { bottom: 20px; right: 20px; width: 56px; height: 56px; } }