/* FRB7 aiOS — tema do site: papel, azul-marinho e ouro.
   Toda cor passa pelas variáveis abaixo. Branco puro é vedado pelo manual de
   marca: o claro mais forte é o papel (#FAF7F1). Texto de ouro sobre papel não
   atinge contraste de leitura; o ouro entra em fios, números e fundo de botão
   (com texto azul-marinho escuro), e o texto corrido fica em azul-marinho. */
/* As fontes vêm de /assets/fonts/fonts.css, ligado em cada página. */

:root {
  --ink: #1a3d5c;
  --ink-deep: #0f2a40;
  --ink-soft: #2e5577;
  --gold: #b08d4a;
  --gold-soft: #d4b57a;
  --gold-deep: #7d6128;
  --bone: #f5f0e8;
  --paper: #faf7f1;
  --cream: #ede6d6;
  --ash: #665f54;
  --campo: #6f8495;
  /* Ação e seleção (estudo de cor 2026-10-20, opção 6 "contorno que se preenche",
     escolhida pelo controlador): botão com contorno azul-marinho que se preenche
     no hover, no foco e no toque; seleção em azul-marinho sobre osso. Fios,
     filetes e rótulos seguem no --gold. */
  --botao-fg: #1a3d5c;
  --botao-borda: #1a3d5c;
  --botao-cheio-bg: #1a3d5c;
  --botao-cheio-fg: #faf7f1;
  --botao-escuro-fg: #f5f0e8;
  --botao-escuro-borda: #f5f0e8;
  --botao-escuro-cheio-bg: #f5f0e8;
  --botao-escuro-cheio-fg: #0f2a40;
  --sel-borda: #1a3d5c;
  --sel-fundo: #f5f0e8;
  --hair: rgba(26, 61, 92, 0.18);
  --hair-strong: rgba(26, 61, 92, 0.32);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 120ms;
  --t-ui: 160ms;
  --t-enter: 220ms;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--ink-deep); text-wrap: balance; line-height: 1.08; }
a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--gold-soft); color: var(--ink-deep); }

.grade { max-width: 1080px; margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px)); }
.estreito { max-width: 760px; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.rotulo { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: 12px; }
.rotulo::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
.t1 { font-size: clamp(32px, 6vw, 66px); letter-spacing: -0.012em; }
.t2 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.008em; }
.t3 { font-size: 24px; }
.lede { font-size: 19px; max-width: 62ch; color: var(--ink); }
.suave { color: var(--ash); }
.nota { font-size: 14px; color: var(--ash); }

/* topo */
.topo { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--hair); }
.topo .grade { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
.marca { display: flex; flex: none; align-items: center; gap: 10px; white-space: nowrap; text-decoration: none; font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--ink-deep); }
.marca img { height: 34px; width: 34px; }
.marca em { font-style: italic; color: var(--gold-deep); }
.topo nav { display: flex; align-items: center; gap: 18px; }
.topo nav a.mono { color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
@media (max-width: 960px) { .topo nav a.mono { display: none; } }
@media (max-width: 680px) { .topo nav a.mono { display: none; } }

/* botões: um só estilo de ação por página */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--sans); font-weight: 700; font-size: 16px; padding: 14px 24px; text-decoration: none; border: 1px solid var(--botao-borda); cursor: pointer; background: transparent; color: var(--botao-fg); transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out), transform var(--t-press) var(--ease-out); }
.botao:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.botao[disabled] { opacity: 0.6; cursor: wait; }
.topo .botao { padding: 0 16px; min-height: 44px; font-size: 14px; white-space: nowrap; }
/* celular: cabeçalho de uma linha só, botão compacto */
@media (max-width: 680px) {
  .topo .grade { padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); gap: 10px; }
  .marca { font-size: 22px; gap: 8px; }
  .marca img { width: 28px; height: 28px; }
  .topo .botao { padding: 0 12px; font-size: 13px; }
}
@media (max-width: 359px) {
  .marca img { display: none; }
  .marca { font-size: 20px; }
  .topo .grade { gap: 8px; }
  .topo .botao { padding: 0 10px; font-size: 12px; }
}
.link { font-weight: 600; text-underline-offset: 4px; }
.acoes { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }

/* seções */
section { padding: 96px 0 88px; border-top: 1px solid var(--hair); }
section.hero { border-top: 0; padding: 72px 0 64px; }
section.escura { background: var(--ink-deep); color: var(--bone); border-top: 0; }
section.escura h2, section.escura h3 { color: var(--bone); }
section.escura .rotulo { color: var(--gold-soft); }
section.escura .lede { color: var(--bone); }
/* Três tons, nunca dois iguais em seguida: papel, papel mais escuro (osso) e azul-marinho. */
section.osso { background: var(--cream); }
section.osso .antes-depois .cartao:first-child { background: var(--bone); }
.bloco { display: grid; gap: 28px; }
/* o formulário de acesso não pode alargar a coluna além da tela no celular:
   a opção mais longa do select definia a largura mínima da coluna */
#acesso.bloco, .form, .form label:not(.consent) { grid-template-columns: minmax(0, 1fr); }
.form select { min-width: 0; max-width: 100%; }
.cabeca { display: grid; gap: 14px; max-width: 760px; margin-bottom: 8px; }
/* título de seção: escala própria, mais ar acima (padding da seção) do que abaixo */
.cabeca .t2, section > .grade > .t2 { font-size: clamp(34px, 4.6vw, 52px); }
/* sub-bloco dentro da seção: divisória e respiro próprios */
.sub { display: grid; gap: 20px; border-top: 1px solid var(--hair-strong); padding-top: 36px; margin-top: 16px; }
.sub > .t3 { font-size: 28px; }
.garantias { border-top: 1px solid var(--hair-strong); padding-top: 36px; margin-top: 16px; }
.pronto-duas { display: grid; gap: 28px; align-items: start; }
@media (min-width: 800px) { .pronto-duas { grid-template-columns: 1.2fr 1fr; gap: 64px; } }

/* fluxos */
.duas { display: grid; gap: 24px; }
@media (min-width: 800px) { .duas { grid-template-columns: 1fr 1fr; } }
.tres { display: grid; gap: 20px; }
@media (min-width: 800px) { .tres { grid-template-columns: repeat(3, 1fr); } }
.cartao { background: var(--bone); border: 1px solid var(--hair); padding: 24px; display: grid; gap: 10px; align-content: start; }
section.osso .cartao { background: var(--paper); }
.cartao h3 { font-size: 26px; }
.cartao .num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--gold-deep); }
.antes-depois { display: grid; gap: 16px; }
@media (min-width: 800px) { .antes-depois { grid-template-columns: 1fr 1fr; } }
.antes-depois .cartao:first-child { background: var(--cream); }

/* fluxo do coordenador */
.cadeia { display: grid; gap: 0; border: 1px solid var(--hair-strong); }
@media (min-width: 800px) { .cadeia { grid-template-columns: repeat(3, 1fr); } }
.cadeia > div { padding: 22px; border-bottom: 1px solid var(--hair); display: grid; gap: 6px; align-content: start; background: var(--bone); }
@media (min-width: 800px) { .cadeia > div { border-bottom: 0; border-right: 1px solid var(--hair); } .cadeia > div:nth-child(3n) { border-right: 0; } .cadeia > div:nth-child(-n+3) { border-bottom: 1px solid var(--hair); } }
.cadeia b { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink-deep); line-height: 1.1; }
.cadeia i { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); }

/* as seis partes */
.seis { display: grid; gap: 0; border-top: 1px solid var(--hair-strong); }
.seis > div { display: grid; grid-template-columns: 14px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.seis > div::before { content: ""; width: 6px; height: 6px; margin-top: 12px; background: var(--gold); }
@media (min-width: 800px) { .seis { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.seis .num { font-family: var(--mono); font-size: 14px; color: var(--gold-deep); padding-top: 4px; }
.seis b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink-deep); line-height: 1.15; }
.seis span { font-size: 16px; }

/* arquivos de exemplo */
.arquivo { font-family: var(--mono); font-size: 13px; background: var(--ink-deep); color: var(--bone); padding: 12px 14px; overflow-wrap: anywhere; }
.arquivo em { font-style: normal; color: var(--gold-soft); }

/* áreas */
.area { display: grid; gap: 12px; align-content: start; }
.area ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.area li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; font-size: 16px; }
.area li::before { content: ""; width: 6px; height: 6px; margin-top: 10px; background: var(--gold); }

/* níveis */
.linha-nivel { display: grid; gap: 14px; padding: 34px 0; border-top: 1px solid var(--hair-strong); }
.linha-nivel:first-of-type { border-top: 0; padding-top: 6px; }
.linha-nivel header { display: grid; gap: 4px; }
.linha-nivel header h3 { font-size: 30px; }
.degraus { display: grid; gap: 16px; }
@media (min-width: 900px) { .degraus[data-n="2"] { grid-template-columns: repeat(2, 1fr); } .degraus[data-n="3"] { grid-template-columns: repeat(3, 1fr); } .degraus[data-n="4"] { grid-template-columns: repeat(4, 1fr); } }
.degrau { background: var(--bone); border: 1px solid var(--hair); padding: 22px; display: grid; gap: 10px; align-content: start; position: relative; }
section.osso .degrau { background: var(--paper); }
.degrau[data-soma="sim"]::before { content: "+ " attr(data-anterior); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
.degrau h4 { margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--ink-deep); line-height: 1; }
.degrau .porte { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.degrau .preco { font-family: var(--serif); font-size: 38px; font-weight: 600; color: var(--ink-deep); line-height: 1; }
.degrau .preco small { display: block; font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--ash); margin-top: 6px; }
.degrau .nums { font-size: 15px; color: var(--ink); border-top: 1px solid var(--hair); padding-top: 10px; }
.degrau .entrega { font-size: 14px; color: var(--ink-soft); }
.degrau .acoes { margin-top: 6px; }
.plat { font-size: 14px; color: var(--ink-soft); }

/* perguntas */
details { border-top: 1px solid var(--hair-strong); padding: 18px 0; }
details:last-of-type { border-bottom: 1px solid var(--hair-strong); }
summary { cursor: pointer; font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--ink-deep); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--gold-deep); font-family: var(--mono); }
details[open] summary::after { content: "–"; }
details p { margin-top: 10px; max-width: 62ch; }

/* passos e listas */
.passos { display: grid; gap: 20px; counter-reset: p; }
@media (min-width: 800px) { .passos { grid-template-columns: repeat(4, 1fr); } .passos.tres-p { grid-template-columns: repeat(3, 1fr); } }
.passos > div { counter-increment: p; border-top: 2px solid var(--gold); padding-top: 14px; display: grid; gap: 6px; align-content: start; }
.passos > div::before { content: "0" counter(p); font-family: var(--mono); font-size: 13px; color: var(--gold-deep); }
.passos b { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--ink-deep); line-height: 1.1; }
.lista { list-style: none; padding: 0; display: grid; gap: 10px; }
.lista li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.lista li::before { content: ""; width: 6px; height: 6px; margin-top: 11px; background: var(--gold); }
.garantias { display: grid; gap: 16px; }
@media (min-width: 800px) { .garantias { grid-template-columns: 1fr 1fr; } }

/* formulário */
.form { display: grid; gap: 14px; max-width: 560px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.form input[type="email"], .form input[type="text"], .form select { font: inherit; padding: 13px 14px; border: 1px solid var(--hair-strong); background: var(--paper); color: var(--ink-deep); border-radius: 0; }
.form .consent { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-weight: 400; font-size: 14px; align-items: start; }
.form .consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); }
.form .estado { min-height: 1.4em; font-size: 15px; color: var(--ink-soft); }
.form .ok { display: none; background: var(--bone); border: 1px solid var(--hair); padding: 12px 16px; font-weight: 600; }
.form .armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

footer { padding: 48px 0 calc(110px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hair); font-size: 14px; color: var(--ink-soft); }
footer .grade { display: grid; gap: 12px; }

.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--ink-deep); color: var(--bone); padding: 12px max(24px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); display: flex; justify-content: space-between; align-items: center; gap: 14px; transform: translateY(110%); transition: transform var(--t-enter) var(--ease-out); }
.barra[data-visivel="sim"] { transform: none; }
.barra p { font-size: 14px; display: none; }
@media (min-width: 680px) { .barra p { display: block; } }
.barra .botao { padding: 11px 18px; font-size: 15px; }
section.escura .botao, .barra .botao { background: transparent; color: var(--botao-escuro-fg); border-color: var(--botao-escuro-borda); }
/* contorno que se preenche: foco por teclado e toque também preenchem (no celular não há hover) */
.botao:focus-visible, .botao:active { background: var(--botao-cheio-bg); color: var(--botao-cheio-fg); }
section.escura .botao:focus-visible, section.escura .botao:active, .barra .botao:focus-visible, .barra .botao:active { background: var(--botao-escuro-cheio-bg); color: var(--botao-escuro-cheio-fg); }


/* calculadora de investimento */
.calc-n { font: inherit; font-size: 24px; width: 8ch; padding: 10px 12px; border: 1px solid var(--hair-strong); background: var(--paper); color: var(--ink-deep); border-radius: 0; }
#calc { max-width: 640px; margin-bottom: 10px; }
#calc-saida { display: grid; gap: 10px; margin-top: 6px; }

/* páginas de nível: promessa de abertura e fecho de venda */
.t1.promessa { max-width: 20ch; font-size: clamp(32px, 5.6vw, 62px); }
.hero .degrau h4 { font-size: 30px; }
section.escura .nota, section.escura .entrega { color: var(--gold-soft); }
section.escura .link { color: var(--bone); }
section.escura .lede + .lede { font-size: 17px; color: var(--gold-soft); }
.antes-depois .cartao h3 { font-size: 24px; }
.antes-depois .cartao .lista { margin-top: 4px; }
.seis p { display: grid; gap: 4px; }

/* ============ duas frentes de venda (2026-10-20) ============ */
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.migalhas { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; width: fit-content; }
.credito-regra { font-size: 14px; color: var(--ink-soft); background: var(--bone); border: 1px solid var(--hair); padding: 12px 16px; max-width: 62ch; }
.topo nav a.mono[aria-current="page"] { color: var(--ink-deep); border-bottom: 1px solid var(--ink); }

/* porta de duas entradas */
.porta { display: grid; gap: 28px; margin-top: 8px; }
@media (min-width: 800px) { .porta { grid-template-columns: 1fr 1fr; gap: 40px; } }
.entrada { position: relative; display: grid; gap: 12px; align-content: start; background: var(--paper); border: 1px solid var(--hair-strong); padding: 32px 30px 30px; transition: transform var(--t-enter) var(--ease-out), border-color var(--t-ui) var(--ease-out); isolation: isolate; }
.entrada:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.entrada .porta-rotulo { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }
.entrada h3 { font-size: clamp(34px, 4vw, 44px); }
.entrada .quem { font-size: 15px; color: var(--ink-soft); }
.entrada .promessa-porta { font-family: var(--serif); font-size: 24px; line-height: 1.2; color: var(--ink-deep); }
.entrada .lista { font-size: 16px; }
.entrada .a-partir { font-size: 14px; color: var(--ash); border-top: 1px solid var(--hair); padding-top: 12px; }
.entrada .a-partir b { font-family: var(--serif); font-size: 26px; color: var(--ink-deep); font-weight: 600; }
.entrada .entrar { justify-self: start; margin-top: 6px; }
.entrada .entrar::after { content: ""; position: absolute; inset: 0; }
.entrada .entrar span { display: inline-block; transition: transform var(--t-ui) var(--ease-out); }
.entrada .entrar:focus-visible { outline: none; }
/* a porta de Equipes e empresas é a versão escura: as duas entradas nunca parecem a mesma coisa */
.entrada[data-entrada="empresas"] { background: var(--ink-deep); border-color: var(--ink-deep); color: var(--bone); }
.entrada[data-entrada="empresas"] .porta-rotulo { color: var(--gold-soft); }
.entrada[data-entrada="empresas"] h3, .entrada[data-entrada="empresas"] .promessa-porta, .entrada[data-entrada="empresas"] .a-partir b { color: var(--bone); }
.entrada[data-entrada="empresas"] .quem, .entrada[data-entrada="empresas"] .lista, .entrada[data-entrada="empresas"] .a-partir { color: var(--bone); }
.entrada[data-entrada="empresas"] .a-partir { border-top-color: rgba(245, 240, 232, 0.25); }
.entrada[data-entrada="empresas"] .botao { color: var(--botao-escuro-fg); border-color: var(--botao-escuro-borda); }
.entrada[data-entrada="empresas"] .botao:focus-visible, .entrada[data-entrada="empresas"] .botao:active { background: var(--botao-escuro-cheio-bg); color: var(--botao-escuro-cheio-fg); }
.entrada[data-entrada="empresas"]:focus-within { outline-color: var(--gold-soft); }

/* seletor de níveis */
.seletor { display: grid; gap: 22px; }
.modo { border: 0; padding: 0; margin: 0; display: inline-grid; grid-auto-flow: column; gap: 0; width: fit-content; max-width: 100%; border: 1px solid var(--hair-strong); background: var(--paper); }
.modo[hidden] { display: none; }
.modo label { position: relative; display: block; }
.modo input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.modo span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 8px 20px; font-weight: 700; font-size: 15px; color: var(--ink-soft); transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out); }
.modo input:checked + span { background: var(--ink-deep); color: var(--bone); }
.modo input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: -4px; box-shadow: inset 0 0 0 4px var(--gold-soft); }
section.osso .modo { background: var(--paper); }
.painel { display: grid; gap: 20px; }
.painel[hidden] { display: none; }
.escolha { display: grid; gap: 12px; background: var(--paper); border: 1px solid var(--hair); padding: 20px 22px; }
section.osso .escolha { background: var(--bone); }
.escolha[hidden] { display: none; }
.escolha legend, .escolha .escolha-t { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink-deep); padding: 0; }
fieldset.escolha { margin: 0; min-width: 0; }
.momentos { display: grid; gap: 8px; }
@media (min-width: 800px) { .momentos { grid-template-columns: 1fr 1fr; } }
.momentos label { position: relative; display: block; }
.momentos input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.momentos span { display: flex; align-items: center; min-height: 52px; padding: 10px 16px 10px 44px; border: 1px solid var(--hair-strong); background: var(--paper); font-weight: 600; font-size: 15px; position: relative; transition: border-color var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out), transform var(--t-press) var(--ease-out); }
.momentos span::before { content: ""; position: absolute; left: 16px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid var(--ink-soft); border-radius: 50%; transition: background-color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out); }
.momentos input:checked + span { border-color: var(--sel-borda); background: var(--sel-fundo); box-shadow: inset 0 0 0 1px var(--sel-borda); }
.momentos input:checked + span::before { background: var(--sel-borda); border-color: var(--sel-borda); }
.momentos input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.pessoas-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.pessoas-linha label { font-weight: 600; font-size: 15px; }
.faixa-pessoas { flex: 1 1 240px; min-width: 200px; min-height: 44px; accent-color: var(--ink); cursor: pointer; }
.faixa-pessoas:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-weight: 600; font-size: 14px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--hair-strong); background: var(--paper); color: var(--ink-deep); cursor: pointer; transition: background-color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out), transform var(--t-press) var(--ease-out); }
.chip[aria-pressed="true"] { background: var(--ink-deep); color: var(--bone); border-color: var(--ink-deep); }
.chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.resultado { font-weight: 600; color: var(--ink-deep); min-height: 1.6em; }

.cartoes-nivel { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 700px) { .cartoes-nivel[data-n="4"] { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cartoes-nivel[data-n="2"] { grid-template-columns: repeat(2, 1fr); } .cartoes-nivel[data-n="3"] { grid-template-columns: repeat(3, 1fr); } .cartoes-nivel[data-n="4"] { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) and (max-width: 999px) { .cartoes-nivel[data-n="3"] { grid-template-columns: 1fr 1fr; } }
.nivel-card { position: relative; display: grid; gap: 12px; align-content: start; grid-template-rows: auto; background: var(--bone); border: 1px solid var(--hair); padding: 24px 22px 22px; transition: transform var(--t-enter) var(--ease-out), border-color var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out); isolation: isolate; }
section.osso .nivel-card { background: var(--paper); }
.nivel-card[data-recomendado="sim"] { border-color: var(--sel-borda); background: var(--sel-fundo); box-shadow: inset 0 0 0 1px var(--sel-borda); }
@media (min-width: 1000px) { .com-js .nivel-card[data-recomendado="sim"] { transform: translateY(-6px); } }
.nivel-card .selo { margin: -24px -22px 4px; padding: 8px 22px; background: var(--ink-deep); color: var(--bone); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.nivel-card .selo[hidden] { display: none; }
.nivel-card h4 { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--ink-deep); line-height: 1; }
.nivel-card .porte { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.nivel-card .frase { font-size: 16px; }
.nivel-card .preco { font-family: var(--serif); font-size: 46px; font-weight: 600; color: var(--ink-deep); line-height: 1; letter-spacing: -0.01em; }
.nivel-card .preco small { display: block; font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ash); margin-top: 8px; line-height: 1.45; }
.nivel-card .soma { border-top: 1px solid var(--hair-strong); padding-top: 12px; display: grid; gap: 8px; }
.nivel-card .soma-t { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
.nivel-card .soma .lista { font-size: 15px; gap: 6px; }
.nivel-card .nums { font-size: 13px; color: var(--ash); }
.nivel-card .acoes { margin-top: 4px; }
.nivel-card .botao { width: 100%; }
.nivel-card .entrega { font-size: 14px; color: var(--ink-soft); }

/* comparativo expansível */
details.compara { border: 1px solid var(--hair-strong); background: var(--paper); padding: 0; }
section.osso details.compara { background: var(--bone); }
details.compara:last-of-type { border-bottom: 1px solid var(--hair-strong); }
details.compara summary { padding: 18px 20px; min-height: 56px; font-size: 22px; align-items: center; }
details.compara[open] summary { border-bottom: 1px solid var(--hair-strong); }
.tabela-rolavel { overflow-x: auto; }
.tabela-rolavel:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.tabela-compara { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
.tabela-compara th, .tabela-compara td { padding: 14px 16px; border-bottom: 1px solid var(--hair); text-align: center; vertical-align: top; }
.tabela-compara thead th { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink-deep); background: var(--cream); position: sticky; top: 0; }
.tabela-compara tbody th { text-align: left; font-weight: 500; position: sticky; left: 0; background: var(--paper); min-width: 220px; }
section.osso .tabela-compara tbody th { background: var(--bone); }
.tabela-compara tbody th b { display: block; font-weight: 700; color: var(--ink-deep); }
.tabela-compara tbody th span { font-size: 13px; color: var(--ash); }
.tabela-compara td .sim { color: var(--gold-deep); font-size: 18px; }
.tabela-compara td .nao { color: var(--ash); }
.tabela-compara td.recomendado-col, .tabela-compara th.recomendado-col { background: var(--cream); }

/* páginas de venda das frentes */
.dores { display: grid; gap: 16px; }
@media (min-width: 700px) { .dores { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .dores { grid-template-columns: repeat(3, 1fr); } }
.dores .cartao { transition: border-color var(--t-ui) var(--ease-out), transform var(--t-enter) var(--ease-out); }
.dores .cartao h3 { font-size: 24px; }
.ponte { display: grid; gap: 8px; background: var(--bone); border: 1px solid var(--hair); padding: 16px 18px; max-width: 62ch; }

.tabela-compara thead th[data-recomendado="sim"] { background: var(--sel-fundo); }
.sistema { display: grid; gap: 10px; max-width: 62ch; }
.sistema .lista { font-size: 17px; }

/* ============ celular e toque (régua mobile-native, 2026-10-20) ============ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* âncoras e foco nunca ficam sob o topo fixo nem sob a barra de ação */
  scroll-padding-top: 76px;
  scroll-padding-bottom: 96px;
}
/* campo com menos de 16px faz o iPhone ampliar a página ao focar */
input, select, textarea,
.form input[type="email"], .form input[type="text"], .form select { font-size: 16px; }
.form input::placeholder, input::placeholder { color: var(--ash); opacity: 1; }
/* sem espera de duplo toque; controle não seleciona o próprio rótulo */
a, button, summary, label, select, input[type="range"] { touch-action: manipulation; }
.botao, .chip, .modo label, .momentos label, summary, .entrada .entrar, .pular {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* alvos de toque de 44px nos links soltos */
a.link, .entrada .entrar, .marca { display: inline-flex; align-items: center; min-height: 44px; }
details summary { min-height: 48px; align-items: center; }
.rodape-nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.rodape-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.tabela-rolavel { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
/* a barra recolhida sai da ordem de tabulação e do leitor de tela */
.barra[data-visivel="nao"] { visibility: hidden; transition: transform var(--t-enter) var(--ease-out), visibility 0s linear var(--t-enter); }
.barra[data-visivel="sim"] { transition: transform var(--t-enter) var(--ease-out); }
/* pular para o conteúdo (WCAG 2.4.1) */
.pular { position: absolute; left: 12px; top: -80px; z-index: 70; background: var(--ink-deep); color: var(--bone); padding: 12px 16px; min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; text-decoration: none; }
.pular:focus { top: 8px; }

/* ============ contraste e foco (WCAG 2.2 AA) ============ */
/* borda de campo de formulário: 3:1 contra o papel (1.4.11) */
.form input[type="email"], .form input[type="text"], .form select, .calc-n { border-color: var(--campo); }
/* anel de foco legível sobre fundo escuro: o azul-marinho some no azul-marinho */
section.escura a:focus-visible, section.escura summary:focus-visible, .barra a:focus-visible, .barra .botao:focus-visible, .pular:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.entrada:focus-within { outline-color: var(--ink); }

/* ============ movimento (régua review-animations / animation-performance) ============
   Só transform e opacity se movem; cor e borda trocam em 120–220ms com ease-out forte.
   Hover só onde existe mouse; toque recebe retorno no :active. */
.entrada::before, .nivel-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity var(--t-enter) var(--ease-out); }
.entrada::before { box-shadow: 0 14px 30px -18px rgba(15, 42, 64, 0.45); }
.nivel-card::before { box-shadow: 0 12px 26px -20px rgba(15, 42, 64, 0.5); }
.nivel-card[data-recomendado="sim"]::before { box-shadow: 0 18px 36px -22px rgba(15, 42, 64, 0.55); opacity: 1; }
.botao:active, .chip:active { transform: scale(0.97); }
.momentos label:active span, .modo label:active span { transform: scale(0.98); }
.entrada:active { transform: scale(0.985); }
.tabela-compara tbody tr td, .tabela-compara tbody tr th, details.compara summary { transition: background-color 120ms var(--ease-out); }
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes painel-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes so-opacidade { from { opacity: 0; } to { opacity: 1; } }
/* abrir é decisão do leitor: entra com ease-out; fechar é resposta do sistema e some na hora */
details[open] > :not(summary) { animation: abre var(--t-ui) var(--ease-out); }
.painel.entra { animation: painel-entra var(--t-enter) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .botao:hover { background: var(--botao-cheio-bg); color: var(--botao-cheio-fg); }
  section.escura .botao:hover, .barra .botao:hover { background: var(--botao-escuro-cheio-bg); color: var(--botao-escuro-cheio-fg); }
  .migalhas:hover { color: var(--ink-deep); text-decoration: underline; text-underline-offset: 4px; }
  .topo nav a.mono:hover { color: var(--ink-deep); }
  .entrada:hover { transform: translateY(-3px); border-color: var(--ink-soft); }
  .entrada:hover .entrar span { transform: translateX(5px); }
  .entrada[data-entrada="empresas"]:hover { border-color: var(--ink-deep); }
  .entrada[data-entrada="empresas"]:hover .botao { background: var(--botao-escuro-cheio-bg); color: var(--botao-escuro-cheio-fg); }
  .modo input:not(:checked):hover + span { background: var(--cream); color: var(--ink-deep); }
  .momentos input:not(:checked):hover + span { border-color: var(--ink-soft); }
  .chip:hover { border-color: var(--ink-soft); background: var(--cream); }
  .nivel-card:not([data-recomendado="sim"]):hover { border-color: var(--ink-soft); }
  details.compara summary:hover { background: var(--cream); }
  .tabela-compara tbody tr:hover td, .tabela-compara tbody tr:hover th { background: var(--cream); }
  .dores .cartao:hover { border-color: var(--gold-deep); transform: translateY(-2px); }
  .entrada:hover::before, .nivel-card:hover::before { opacity: 1; }
  .entrada:hover:active { transform: scale(0.985); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* mais suave, não zero: sai o deslocamento, fica a troca de cor e a opacidade */
  *, *::before, *::after { transition-property: background-color, border-color, color, opacity !important; transition-duration: 80ms !important; }
  details[open] > :not(summary), .painel.entra { animation-name: so-opacidade !important; animation-duration: 120ms !important; }
  .botao:active, .chip:active, .entrada:active, .momentos label:active span, .modo label:active span { transform: none; }
  .barra { transition: visibility 0s !important; }
  .com-js .nivel-card[data-recomendado="sim"] { transform: none !important; }
}

/* campo de pessoas com valor ilegível: o aviso vem em texto; a borda reforça */
.calc-n[aria-invalid="true"] { border-color: var(--ink-deep); box-shadow: inset 0 0 0 1px var(--ink-deep); }

.nota-tabela { padding: 14px 20px; }
/* celular: menos ar entre blocos e entrada visível já na primeira tela */
@media (max-width: 680px) {
  section { padding: 64px 0 56px; }
  section.hero { padding: 36px 0 32px; }
  section.portas { padding-top: 40px; }
  .bloco { gap: 22px; }
  .entrada { padding: 24px 20px 22px; gap: 10px; }
  .porta { gap: 24px; }
  .sub { padding-top: 28px; }
}

/* Turnstile: sem desafio visível não ocupa espaço no formulário. */
.turnstile:empty { display: none; }