/* saas-20260907b.css (era 20260907a; renomeado em 07/09 à noite ao revogar a regra do herói mobile — cache immutable) — regras do site SaaS compartilhadas pelas páginas (home, /plataforma, …): header e rodapé definitivos, piso de toque 44px, gramática Modal (transições 300ms, ritmo 88px, chips, ícone isométrico, marquee, partículas + botão de pausa), passos, janela do painel, cards de produto, fecho em card claro, foto de porta no hover. Extraída do <style> da home em 07/09/2026. Cache immutable: mudou, nome novo. */
/* casca SaaS (07/09/2026): só o que o herói ainda precisa + header definitivo. Cada dobra acrescenta o seu bloco abaixo. */
.hero-scroll svg{width:14px;height:14px;animation:hero-dip 2.2s cubic-bezier(0.16,1,0.3,1) infinite;}
@keyframes hero-dip{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (max-width:820px){
  .hero-cta-col{align-items:stretch;width:100%;}
  .hero-foot{display:none;}
  .hero-stage .eyebrow{font-size:12px!important;letter-spacing:.08em;}
}
@media (prefers-reduced-motion: reduce){.hero-scroll svg{animation:none;}}
/* linha de preço mono junto ao CTA (ADR-012/013: preço público do BASIC na home) */
.hero-note.hero-preco{font-family:var(--mono2);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:14px;}
/* header definitivo: "Começar" outline fora do nav-links, visível ao lado do burger no mobile */
.nav-cta{margin-left:6px;}
@media (max-width:760px){
  .nav-cta{margin-left:auto;font-size:11px;padding:8px 12px;min-height:44px;}
  .nav-burger{margin-left:8px;}
  .nav-links a{padding:14px 13px;}
}
/* alvo de toque ≥ 44px nos links do menu e do rodapé (WCAG 2.5.8; override local da folha compartilhada) */
.nav-links a:not(.btn){padding:14px 13px;}
.foot-grid a{display:inline-block;padding:13px 0;}
.btn{min-height:44px;}
.nav-burger{min-width:44px;min-height:44px;}
.foot-grid ul{gap:2px;}
.foot-grid .foot-h{font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;}
/* bloco 5 · fecho: card claro sobre o chão escuro (inversão de seção da Sala de Controle) */
.cf-fecho{background:var(--text);color:var(--bg-0);border-radius:16px;padding:44px 48px;display:grid;grid-template-columns:1.25fr .75fr;gap:32px;align-items:center;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 18px 40px -24px rgba(0,0,0,.8);}
.cf-fecho h2{color:var(--bg-0);font-size:clamp(26px,3.2vw,38px);letter-spacing:-.02em;line-height:1.12;margin:0;max-width:20ch;}
.cf-fecho .cf-fecho-sub{font-family:var(--body);font-size:15.5px;color:var(--bg-3,#23272E);margin:14px 0 0;max-width:44ch;}
.cf-fecho-ctas{display:flex;flex-direction:column;gap:14px;align-items:flex-start;justify-self:end;}
.btn.cf-outline-dark{background:transparent;border:1px solid var(--bg-0);color:var(--bg-0);padding:13px 22px;}
.btn.cf-outline-dark:hover{background:var(--bg-0);color:var(--text);transform:translateY(-2px);}
.cf-ghost-dark{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono2);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--bg-3,#23272E);padding:10px 0;min-height:44px;}
.cf-ghost-dark svg{width:16px;height:16px;transition:transform .4s var(--ease);}
.cf-ghost-dark:hover{color:var(--bg-0);} .cf-ghost-dark:hover svg{transform:translateX(4px);}
@media (max-width:820px){.cf-fecho{grid-template-columns:1fr;padding:30px 24px;} .cf-fecho-ctas{justify-self:start;}}
  /* Bloco 4 · VIGIL BASIC e VIGIL PRO — regras novas desta dobra.
     Nenhuma classe existente (card, card-product, card-price, prod-panel, grid2,
     section-head, sec-index, eyebrow, caption, muted, btn) é redefinida aqui:
     só extensões de layout (flex/altura) e as três classes novas cf-*. */

  /* cards com a mesma altura e botão preso ao rodapé */
  #produtos .card-product{display:flex;flex-direction:column}
  #produtos .card-product .btn.cf-outline{margin-top:auto}

  /* linha "para quem" — corpo pequeno, abaixo do rótulo mono .caption */
  #produtos .cf-forwhom{font-family:var(--body);font-size:13.5px;line-height:1.55;color:var(--muted);margin:0 0 14px}

  /* Nota e Delimitação do card BASIC — corpo pequeno, 12.5px */
  #produtos .cf-fine{font-family:var(--body);font-size:12.5px;line-height:1.55;color:var(--muted);margin:0 0 10px}
  #produtos .cf-fine b{color:var(--muted)}
  #produtos .cf-fine:last-of-type{margin-bottom:18px}

  /* botão outline azul — o único registro de cor desta dobra, igual nos dois cards */
  .btn.cf-outline{background:transparent;border:1px solid var(--brand);color:var(--brand-2)}
  .btn.cf-outline:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-2)}
/* card de produto: preço em Rajdhani, lista em corpo, h3 — regras que viviam no <style> antigo com hex fora da paleta, agora por token */
#produtos .card-product h3{font-family:var(--disp);font-size:22px;letter-spacing:-.01em;margin:4px 0 10px;}
#produtos .card-product ul{font-family:var(--body);font-size:14px;color:var(--muted);line-height:1.8;margin:0 0 16px;padding-left:18px;}
#produtos .card .card-price{font-family:var(--ui);font-weight:700;font-size:30px;line-height:1.05;letter-spacing:-.01em;color:var(--text);margin:6px 0 14px;}
#produtos .card .card-price small{display:block;font-family:var(--body);font-weight:400;font-size:13px;line-height:1.5;letter-spacing:0;color:var(--muted);margin-top:7px;}
/* ===================== bloco 3 · como funciona (regras NOVAS desta dobra) =====================
   Reaproveita do DS Sala de Controle v3 (assets/css/site-20260828a.css e heroi-produto-20260905a.css):
   .section/.container, .section-head/.sec-index/.eyebrow/h2, .etapas/.ed-item/.n,
   .gfx.frame/.frame-bar/.frame-body, .pbar (track+i, já usado em maturidade.html e nos /segmentos/*),
   .chip-illu, .refs/.refs-row/.refs-note, .animate-on-scroll. Nada disso é redefinido aqui —
   só o que não existe no DS ganha classe cf-. */

/* grade 2 colunas ≈ 5/7: passos à esquerda, painel à direita */
.cf-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start;}

/* estado ativo dos 3 passos: nasce no passo 1 (.cf-ativo); no desktop o hover troca quem parece ativo.
   :has() já é técnica aceita no site (.hero:has(.hero-vivo) — ver ds/v3/stack.md, linha do parallax). */
.cf-etapas .ed-item{border-left:2px solid transparent;margin-left:-18px;padding-left:16px;border-radius:8px;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);}
.cf-etapas .ed-item.cf-ativo{border-left-color:var(--brand);background:var(--brand-soft);}
@media (hover:hover) and (pointer:fine){
  .cf-etapas:has(.ed-item:hover) .ed-item.cf-ativo{border-left-color:transparent;background:none;}
  .cf-etapas .ed-item:hover{border-left-color:var(--brand);background:var(--brand-soft);}
}
@media (prefers-reduced-motion:reduce){.cf-etapas .ed-item{transition:none;}}

/* painel ilustrativo: 3 linhas rótulo mono + .pbar + número; rodapé com chip e nota na mesma linha */
.cf-frame-body{display:flex;flex-direction:column;gap:14px;}

.cf-frame-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:2px;padding-top:12px;border-top:1px solid var(--border-subtle);}
.cf-frame-foot-text{font-family:var(--mono2);font-size:10.5px;letter-spacing:.04em;color:var(--muted);
  text-align:right;white-space:nowrap;}

/* linha de delimitação legal, corpo pequeno, logo abaixo da grade (reaproveita .refs-note) */
.cf-delim{margin-top:34px;}

@media (max-width:760px){
  .cf-grid{grid-template-columns:1fr;gap:32px;}
  .cf-etapas .ed-item{margin-left:0;padding-left:14px;}
}
/* ajustes pós-render do bloco 3: chip no rodapé do painel (a regra do DS só cobre o chip dentro da barra), texto do rodapé quebrando no mobile, fundo do frame por token (o #080D18 da folha compartilhada é hex fora da paleta v2) */
.cf-frame-foot .chip-illu{font-family:var(--mono2);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);border:1px solid var(--border-subtle);border-radius:999px;padding:2px 7px;white-space:nowrap;flex-shrink:0;}
#como-funciona .frame{background:var(--bg-2);}
@media (max-width:760px){.cf-frame-foot{flex-wrap:wrap;} .cf-frame-foot-text{white-space:normal;text-align:left;}}
/* rodada 2 de UI (07/09) escondia laptop e tablet no mobile (esqueleto §Mobile). REVOGADO pelo Gui em 07/09 à noite: a composição inteira entra no mobile — os três aparelhos. Superfícies de cor nos blocos 2 e 4 (piso de riqueza, ADR-017) seguem abaixo. */
#produtos .card .card-price{background:var(--brand-soft);border-left:3px solid var(--brand);border-radius:0 10px 10px 0;padding:12px 16px;margin:6px 0 16px;}
#produtos .card .card-price small{margin-top:6px;}
/* ===== Gramática Modal sobre a identidade VIGIL (decisão Gui 07/09; referência modal.com via Refero 68c15685) =====
   Vem da Modal: transições de 300ms em toda cor, ritmo de 88px, chips-pílula, ícone isométrico emissivo, janela de produto
   com vídeo, marquee de referenciais, campo de partículas. Fica nosso: azul, Archivo, herói dividido, botões com raio do DS. */
:root{--ease-m:cubic-bezier(.215,.61,.355,1);}
/* UI r1 da home (07/09 à noite): a curva do transform volta ao easing único do site (mandamento 5); os 300 ms da Modal ficam */
a,.btn,.porta,.card,.ed-item,.chip-illu{transition:color .3s ease-out,background-color .3s ease-out,border-color .3s ease-out,fill .3s ease-out,stroke .3s ease-out,transform .3s var(--ease),box-shadow .3s ease-out;}
.section{padding:88px 0;}
.section-head{margin-bottom:44px;}
.hero{position:relative;}
.mg-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.55;}
.hero .hero-stage{position:relative;z-index:1;}
.mg-toggle{position:absolute;right:16px;bottom:14px;z-index:2;min-height:44px;padding:10px 14px;border:1px solid var(--border-subtle);border-radius:10px;background:rgba(11,12,14,.6);color:var(--muted);font-family:var(--mono2);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;}
.mg-toggle:hover,.mg-toggle:focus-visible{color:var(--text);border-color:var(--brand);outline:none;}
.mg-toggle[aria-pressed="true"]{color:var(--text);}
.porta .pn{display:inline-block;border:1px solid var(--border-subtle);border-radius:999px;padding:4px 10px;font-size:10px;letter-spacing:.14em;width:max-content;}
.porta:hover .pn{border-color:var(--brand);color:var(--text);}
#portas .porta .pf.ill{background:none;box-shadow:none;width:64px;height:64px;top:10px;right:14px;}
.porta .pf.ill::after{display:none;}
.porta .pf.ill .iso{position:absolute;inset:0;width:64px;height:64px;}
.porta .pf.ill svg.glyph{position:relative;z-index:1;width:20px;height:20px;transform:translateY(-4px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));}
.porta:hover .pf.ill{transform:translateY(-3px);}
.cf-frame-body{display:flex;flex-direction:column;gap:14px;}
.cf-bar-row{display:flex;align-items:center;gap:12px;}
.cf-bar-label{font-family:var(--mono2);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);flex:0 0 78px;}
.cf-pbar{flex:1 1 auto;}
.cf-pbar i{width:var(--cf-w);transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--ease);}
.cf-grid.active .cf-pbar i{transform:scaleX(1);}
.cf-bar-num{font-family:var(--mono2);font-size:11px;color:var(--muted);flex:0 0 34px;text-align:right;
  font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion:reduce){.cf-pbar i{transition:none;}}
/* números do painel contam até o valor uma vez, na entrada (sem indicador de "ao vivo": o painel é ilustrativo) */
.mg-marquee{overflow:hidden;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);margin-top:26px;padding:16px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.mg-marquee-track{display:flex;width:max-content;gap:48px;animation:mg-scroll 46s linear infinite;}
.mg-marquee:hover .mg-marquee-track,.mg-marquee:focus-within .mg-marquee-track,.mg-marquee:focus .mg-marquee-track,.mg-marquee.is-paused .mg-marquee-track{animation-play-state:paused;}
.mg-marquee:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.mg-track-a,.mg-track-b{display:inline-flex;gap:48px;}
.mg-marquee-track span{font-family:var(--mono2);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:14px;}
.mg-marquee-track span em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--text-dim);}
.mg-marquee-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);opacity:.7;}
@keyframes mg-scroll{to{transform:translateX(-50%);}}
.cf-etapas .ed-item .n{border-radius:999px;width:40px;height:40px;font-size:11px;}
@media (prefers-reduced-motion:reduce){.mg-marquee-track{animation:none;} .mg-particles{display:none;}}
/* foto de fundo da porta (pedido do Gui 07/09): só aparece no hover/foco no desktop e ao entrar em vista no mobile; véu escuro mantém o texto legível */
.porta.has-foto{overflow:hidden;isolation:isolate;}
.porta.has-foto::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--foto) 68% 42%/cover no-repeat;opacity:0;transform:scale(1.06);transition:opacity .5s ease-out,transform 1.2s var(--ease);}
.porta.has-foto::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(11,12,14,.86) 0%,rgba(11,12,14,.62) 48%,rgba(11,12,14,.22) 100%);opacity:0;transition:opacity .5s ease-out;}
.porta.has-foto:hover::before,.porta.has-foto:focus-visible::before,.porta.has-foto.is-in::before{opacity:1;transform:scale(1);}
.porta.has-foto:hover::after,.porta.has-foto:focus-visible::after,.porta.has-foto.is-in::after{opacity:1;}
.porta.has-foto:hover,.porta.has-foto.is-in{background:var(--bg-2);}
@media (prefers-reduced-motion:reduce){.porta.has-foto::before{transition:none;transform:none;} .porta.has-foto::after{transition:none;}}
/* mobile: o chip do rótulo não pode colidir com o ícone isométrico */
@media (max-width:760px){.porta{padding-right:56px;} .porta .pn{white-space:normal;width:auto;max-width:100%;line-height:1.35;} #portas .porta .pf.ill{width:42px;height:42px;top:8px;right:8px;} .porta .pf.ill .iso{width:42px;height:42px;} .porta .pf.ill svg.glyph{width:15px;height:15px;transform:translateY(-3px);}}

/* UI r3 da /plataforma (07/09): o header sticky (62px) cobria o topo da seção ao ancorar (#perguntas, #quem-revisa, #valor…); WCAG 2.4.11 */
main section[id],main [id].anchor{scroll-margin-top:72px;}

/* UI r3 da /plataforma (07/09): os três pontos da barra de janela (.frame-bar .dots i) pintavam #1E293B na folha compartilhada — hex fora da paleta v2; por token, vale para a home e para as páginas de produto */
.frame-bar .dots i{background:var(--bg-3,#23272E);}

/* a11y r1 do /vigil-pro (07/09): legenda e chip da barra de janela em --text-dim davam 4,27:1 sobre a barra (WCAG 1.4.3) — sobem para --muted; a logo do rodapé media 42px (o .foot-grid a de 13px de padding vencia o .brand) — piso de 44px explícito */
.frame-bar b,.frame-bar .chip-illu{color:var(--muted);}
.site-footer .brand{min-height:44px;align-items:center;}

/* a11y r1 da /metodo (07/09): seção cuja sobrelinha é o único título ganha o h2 na própria sobrelinha (h2.eyebrow), com a aparência do .eyebrow — o .section h2 da folha de herói não pode inflar */
.section h2.eyebrow{font-family:var(--mono2);font-size:10.5px;font-weight:500;letter-spacing:.18em;line-height:1.4;text-transform:uppercase;color:var(--brand);margin:14px 0 0;}

/* /comecar r1 (07/09): chevron do select era #8A97A8 (hex v1) na folha base — por hex v2 (#9AA3AE = --muted); texto da mensagem de erro em --text sobre o fundo vermelho translúcido (o #EF4444 dava ≈4,1:1); estado inválido persistente no campo (WCAG 3.3.1) */
.form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239AA3AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");}
.form-msg.err{color:var(--text);}
.form input[aria-invalid="true"],.form select[aria-invalid="true"]{border-color:var(--sev5);box-shadow:0 0 0 1px rgba(239,68,68,.45) inset;}
.form .cm-erro{display:none;font-family:var(--body);font-size:12.5px;color:var(--text);margin:6px 0 0;padding-left:14px;border-left:2px solid var(--sev5);}
.form input[aria-invalid="true"]~.cm-erro,.form select[aria-invalid="true"]~.cm-erro{display:block;}

/* a11y r2 da /metodo (07/09): a logomarca do header media 190×16 — piso de 44px explícito, como no rodapé */
.site-header .brand{min-height:44px;align-items:center;}