/* ==========================================================================
   Sinapsi: site institucional
   --------------------------------------------------------------------------
   Tokens tirados do material de design (artboards .dc.html de 04/09/2026).
   Os artboards referenciam um design system externo (_ds/organic-.../styles.css)
   que NAO veio no handoff: as classes .btn/.card/.tag abaixo sao a reconstrucao
   dele a partir do README do handoff (raios, sombras e estados descritos la).

   Uma decisao consciente de desvio do artboard: onde o design usa
   `color-mix(... 56%, transparent)` em texto de 13px, o contraste medido cai
   para ~3,6:1 sobre o fundo #f6f7f6 e reprova WCAG AA. Os tons de texto viraram
   tokens SOLIDOS calculados para passar. A aparencia e praticamente a mesma; a
   diferenca e que da para ler.
   ========================================================================== */

/* Fontes servidas pelo proprio site, e nao pelo Google Fonts.

   Ate 24/09/2026 cada pagina pedia um CSS a fonts.googleapis.com antes de
   desenhar qualquer coisa. Medido no Lighthouse no mesmo dia: era o maior item
   bloqueando a renderizacao, cerca de 0,8 s no celular e 0,3 s no desktop,
   porque o navegador precisava abrir conexao com dois dominios a mais antes de
   saber qual arquivo de fonte baixar.

   Os arquivos em assets/fontes/ sao os mesmos que o Google entregava (Figtree
   v9 e Newsreader v26, fontes variaveis: um arquivo cobre todos os pesos). Cada
   familia tem dois recortes; o navegador so baixa o latin-ext se a pagina usar
   um caractere dele. O recorte vietnamita da Newsreader ficou de fora: o site e
   todo em portugues.

   A CSP do vercel.json libera fonte so de 'self'. Trocar um endereco daqui por
   um externo faz a fonte ser bloqueada EM PRODUCAO, e o teste 5 de
   scripts/testar-interacao.mjs reprova (ele aplica a mesma CSP no servidor
   local). Licencas: assets/fontes/*-OFL.txt. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fontes/figtree-v9-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fontes/figtree-v9-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fontes/newsreader-v26-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fontes/newsreader-v26-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Marca. O acento e #ff6a00 - o mesmo que o produto adotou em 03/09/2026
     ("o acento da marca vira #ff6a00 de verdade"). O README do handoff cita
     um #c2612f terracota para o site; ele foi DESCARTADO para que site e
     produto tenham um acento so. */
  /* #ff6a00 e a cor da marca e continua sendo ela em tudo que e GRAFICO:
     bolhas, bordas, o "psi" do logotipo, o realce da agenda na ilustracao.
     Ela nao serve para TEXTO, e isso foi medido, nao suposto:
       branco sobre #ff6a00 ....... 2,87:1  (WCAG AA pede 4,5)
       #ff6a00 sobre #f6f7f6 ...... 2,67:1
     Por isso existem os dois tokens abaixo. Trocar um deles de volta para
     --accent reprova a checagem de contraste. */
  --accent: #ff6a00;
  /* fundo de botao e de tag, com texto branco por cima: 4,73:1 */
  --accent-forte: #c25000;
  --accent-forte-hover: #a84500;
  /* Texto laranja sobre fundo claro. O valor foi escolhido pelo PIOR fundo
     claro em uso (#e8eae8, o trilho do alternador de planos), nao pelo fundo
     da pagina: em #f6f7f6 um tom mais aceso passava, e reprovava dentro da
     caixa azul e do alternador. Aqui: 5,60 no branco, 5,22 na pagina, 5,06 no
     laranja claro, 4,86 no azul claro, 4,63 no neutro. */
  --accent-texto: #b04700;
  --accent-600: #e85f00;
  --accent-700: #cc5400;
  --accent-100: #fff1e6;
  --accent-200: #ffdcc2;
  --accent-300: #ffb987;
  --accent-400: #ff8c3d;
  --accent-900: #5c2600;

  --azul-100: #eceff2;
  --azul-800: #33414d;

  --bg: #f6f7f6;
  --surface: #ffffff;
  --texto: #1e2725;
  /* Tons solidos de texto, com contraste medido sobre --bg (#f6f7f6):
     forte 11,2:1 · medio 7,4:1 · suave 5,3:1. Nenhum abaixo de 4,5:1. */
  --texto-medio: #444d4a;
  --texto-suave: #5f6764;

  --neutro-200: #e8eae8;
  --neutro-300: #d5d8d4;
  --neutro-900: #1f2523;
  --divisor: #dfe2df;

  --raio-sm: 10px;
  --raio-md: 14px;
  --raio-lg: 18px;
  --raio-xl: 24px;
  --sombra-sm: 0 1px 2px rgba(30, 39, 37, .06), 0 2px 8px rgba(30, 39, 37, .05);
  --sombra-md: 0 6px 20px rgba(30, 39, 37, .08);
  --sombra-lg: 0 18px 48px rgba(30, 39, 37, .13);
  --sombra-accent: 0 8px 22px rgba(255, 106, 0, .34);

  --fonte: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-prosa: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* 1480, e nao 1180: em tela de 1920px a coluna de 1180 deixava 442px vazios
     de cada lado e o titulo do topo em quatro linhas (medido em 16/09/2026,
     "o site esta estreito no meio"). Texto corrido continua limitado em ch. */
  --largura: 1480px;
  --respiro: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }

/* O .nav e grudado e tem 67px (12 + botao de 42 + 12 + borda de 1). Sem o
   scroll-padding, o link do menu parava com o titulo da secao atras dele.
   Se o .nav mudar de altura, o teste 6 de scripts/testar-interacao.mjs reprova. */
html { scroll-behavior: smooth; scroll-padding-top: 67px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Pagina branca e cartao em --bg, como no modelo de 16/09/2026. Os tons de
   texto foram calculados sobre --bg, que e o fundo MAIS escuro dos dois: no
   branco o contraste so aumenta. */
body {
  margin: 0;
  background: var(--surface);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* O atributo `hidden` precisa vencer qualquer `display` de classe. Sem isto o
   `.post { display: flex }` ganhava do estilo do navegador e o filtro do blog
   marcava os cards como escondidos sem esconder nenhum (medido em 16/09/2026:
   4 cards com hidden=true continuavam na tela). As abas da home dependem da
   mesma coisa. */
[hidden] { display: none !important; }

a { color: var(--accent-texto); text-underline-offset: 3px; }
a:hover { color: var(--accent-600); }

/* Foco visivel em tudo que recebe teclado. O design so descrevia o foco dos
   inputs; sem esta regra, navegar de Tab pelo site seria um passeio as cegas. */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Pular para o conteudo: primeiro Tab da pagina. */
.pular {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--surface);
  color: var(--texto);
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: var(--sombra-lg);
  font-weight: 700;
  text-decoration: none;
}
.pular:focus { left: 16px; }

.envelope {
  max-width: var(--largura);
  margin: 0 auto;
  padding-inline: var(--respiro);
}

/* ---------------------------------------------------------------- marca -- */
.marca {
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--texto);
  text-decoration: none;
  font-size: 24px;
  line-height: 1;
}
.marca span { color: var(--accent); }
.marca--claro { color: #fff; }
.marca--claro span { color: var(--accent-300); }

/* -------------------------------------------------------------- botoes --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 11px 22px;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent-forte); color: #fff; }
.btn-primary:hover { background: var(--accent-forte-hover); color: #fff; }
.btn svg { flex-shrink: 0; transition: transform .15s ease; }
.btn:hover svg { transform: translateX(2px); }

.btn-secondary { background: var(--surface); color: var(--texto); border-color: var(--divisor); }
/* Botao escuro do topo, como o "Get Started" do modelo: a acao principal da
   pagina continua laranja, e o topo nao compete com ela. */
.btn-escuro { background: var(--neutro-900); color: #fff; }
.btn-escuro:hover { background: var(--texto); color: #fff; }
.btn-secondary:hover { background: var(--bg); color: var(--texto); border-color: var(--neutro-300); }

.btn-ghost { background: transparent; color: var(--texto-medio); }
.btn-ghost:hover { background: var(--neutro-200); color: var(--texto); }

.btn-bloco { width: 100%; padding: 13px 22px; }
.btn-grande { padding: 15px 30px; font-size: 16px; }

/* --------------------------------------------------------------- cards --- */
.card {
  background: var(--bg);
  border: 1px solid var(--neutro-200);
  border-radius: var(--raio-lg);
}

/* ---------------------------------------------------------------- tags --- */
.tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
  white-space: nowrap;
}
.tag-accent { background: var(--accent-forte); color: #fff; }
.tag-neutral { background: var(--neutro-200); color: var(--texto-medio); }
.tag-outline { background: transparent; color: var(--texto-medio); border: 1px solid var(--divisor); }
.tag-suave { background: var(--accent-100); color: var(--accent-900); }

/* ------------------------------------------------------------ tipografia - */
/* O olho deixou de ser caixa alta laranja: no modelo o rotulo acima do titulo
   e uma linha pequena e discreta, e quem chama a atencao e o titulo. */
.olho {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto-medio);
  margin: 0 0 16px;
}
.olho::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.faq__cabeca .olho { justify-content: center; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; }
.h-secao { font-size: clamp(30px, 3.5vw, 46px); line-height: 1.05; font-weight: 500; letter-spacing: -0.04em; margin: 0; }
.sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--texto-medio);
  margin: 18px 0 0;
  max-width: 56ch;
}

/* ------------------------------------------------------------------ nav -- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* O conteudo do nav acompanha a largura das secoes sem precisar de um
     envelope a mais no molde: a folga lateral cresce junto com a tela. */
  padding: 12px max(var(--respiro), calc((100% - var(--largura)) / 2 + var(--respiro)));
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--neutro-200);
}
.nav__links { display: flex; align-items: center; gap: 2px; font-size: 14.5px; }
.nav__links a {
  color: var(--texto-medio);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.nav__links a:hover { color: var(--texto); background: var(--bg); }
.nav__links a[aria-current="page"] { color: var(--texto); font-weight: 700; }
.nav__acoes { display: flex; align-items: center; gap: 10px; }
/* Em 320px (reflow da WCAG 1.4.10) o "Criar conta" quebrava em duas linhas
   e ainda passava 2px da borda, cortado pelo overflow do body. Abaixo de
   360px a seta sai, o texto nao quebra e os espacos encolhem.
   Guard: teste 3b em 320px (nada vaza e botao de uma linha). */
@media (max-width: 359px) {
  .nav { gap: 12px; }
  .nav__acoes { gap: 4px; }
  .nav__acoes .btn { padding-inline: 14px; white-space: nowrap; }
  .nav__acoes .btn svg { display: none; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
}

/* ---------------------------------------------------------------- rodape - */
.rodape { border-top: 1px solid var(--neutro-200); background: var(--bg); }
.rodape__grade {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 72px) var(--respiro) 32px;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px 32px;
}
.rodape__col p:first-child { font-weight: 700; font-size: 14px; margin: 0 0 14px; }
.rodape__col div { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.rodape__col a { color: var(--texto-medio); text-decoration: none; }
.rodape__col a:hover { color: var(--accent-forte-hover); text-decoration: underline; }
.rodape__barra { border-top: 1px solid var(--divisor); }
.rodape__barra > div {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 20px var(--respiro);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--texto-suave);
}
@media (max-width: 860px) {
  .rodape__grade { grid-template-columns: repeat(2, 1fr); }
  .rodape__grade > *:first-child { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------- faixa --- */
.faixa-cta {
  background: var(--neutro-900);
  border-radius: var(--raio-xl);
  padding: clamp(36px, 5vw, 72px);
  text-align: center;
  position: relative;
  overflow: hidden;
  color: var(--bg);
}
.faixa-cta::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 106, 0, .22);
  pointer-events: none;
}
.faixa-cta > * { position: relative; z-index: 1; }
.faixa-cta h2 { font-size: clamp(28px, 3.8vw, 50px); line-height: 1.05; font-weight: 500; letter-spacing: -0.04em; margin: 0 auto; max-width: 22ch; text-wrap: balance; color: #fff; }
.faixa-cta .hero__ctas { justify-content: center; }
.faixa-cta p.faixa-cta__nota { font-size: 13.5px; margin-top: 18px; color: rgba(245, 234, 216, .74); }
.faixa-cta p { font-size: 16.5px; line-height: 1.6; max-width: 50ch; margin: 16px auto 0; color: rgba(245, 234, 216, .86); }
.faixa-cta a:not(.btn) { color: var(--accent-300); }

/* ==========================================================================
   Landing
   --------------------------------------------------------------------------
   Desenho de 16/09/2026, a partir de dois modelos apontados pelo dono no
   Dribbble: primeiro o SalesMark ("About us") e depois o DotTime, que e o que
   vale agora. O que veio de la e a FORMA: topo em bento, cabecalhos
   centralizados com uma parte do titulo realcada, faixas cinza alternando com
   o branco, abas sobre a foto, cartao de plano com caixa. O que NAO veio: a
   cor (a paleta e a do Sinapsi, nenhum token novo de cor), os numeros de
   vaidade, o mural de logotipos de cliente e o depoimento. O produto tem
   poucos usuarios e nenhum depoimento, e a checagem 3 do portao existe para
   isso nao voltar.

   Contraste: o realce dos titulos e --accent-texto, e nao o #ff6a00 (2,67:1
   no fundo claro, reprova ate como texto grande). Todo texto aqui e medido
   pelo testar-interacao.mjs, que percorre o texto renderizado contra o fundo
   herdado.
   ========================================================================== */

/* Destaque dentro do titulo, no lugar do roxo do modelo de 16/09/2026. E o
   token de TEXTO laranja, e nao o #ff6a00: este passa AA no branco e no cinza
   das faixas (ver o comentario dos tokens). */
.realce { color: var(--accent-texto); }

/* Cabecalho de secao centralizado, como todas as secoes do modelo. */
.cabeca-centro { text-align: center; max-width: 900px; margin: 0 auto clamp(30px, 4vw, 48px); }
.cabeca-centro .h-secao { text-wrap: balance; }
.cabeca-centro .olho { justify-content: center; }
.cabeca-centro .sub { margin: 16px auto 0; font-size: 16px; max-width: 62ch; }

/* Faixa cinza de ponta a ponta, alternando com o branco. Dentro dela o cartao
   vira branco, senao some no fundo. */
.banda { background: var(--bg); }
.banda .card { background: var(--surface); }

/* ----------------------------------------------------------------- hero -- */
.hero {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(14px, 2vw, 22px) var(--respiro) clamp(20px, 3vw, 36px);
}
.hero__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.hero__painel {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: var(--raio-xl);
  padding: clamp(26px, 4vw, 52px) clamp(22px, 3.4vw, 44px) clamp(20px, 2.6vw, 30px);
}
.hero h1 {
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.045em;
  margin: 0;
  text-wrap: balance;
}
.hero__sub { font-size: 16px; line-height: 1.6; max-width: 46ch; margin: 20px 0 0; color: var(--texto-medio); }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero__nota { font-size: 13.5px; margin: 12px 0 0; color: var(--texto-suave); }

.selo {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-texto);
}
.selo__ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* A barra de acao ocupa o lugar do campo de e-mail do modelo. Nao e campo:
   e texto e botao, e o botao leva ao cadastro. */
.hero__acao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding: 6px 6px 6px 18px;
  background: var(--surface);
  border: 1px solid var(--neutro-200);
  border-radius: 999px;
  max-width: 480px;
}
.hero__acao > span { font-size: 14px; color: var(--texto-medio); }
.hero__acao .btn { white-space: nowrap; flex-shrink: 0; }
.hero__nota a { color: var(--accent-texto); font-weight: 600; }

.hero__numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: auto;
  padding-top: clamp(28px, 4vw, 56px);
}
.numero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px;
  min-height: 118px;
  background: var(--surface);
  border-radius: var(--raio-lg);
}
/* O numero nao quebra ("AES-" numa linha e "256" na outra) e encolhe com a
   largura do PROPRIO cartao (cqi), e nao da tela: entre 900 e 1100px o cartao e
   estreito e, com tamanho pela tela, "AES-256" vazava para fora dele (medido
   por scrollWidth em 16/09/2026). */
.numero { container-type: inline-size; }
.numero strong { font-size: clamp(18px, 21cqi, 34px); line-height: 1; font-weight: 500; letter-spacing: -0.04em; color: var(--texto); white-space: nowrap; }
.numero span { font-size: 12.5px; line-height: 1.4; color: var(--texto-medio); }
/* O cartao cheio do modelo era coral em degrade. Aqui o degrade fica entre os
   dois laranjas de botao, e a background-color e o mais claro deles: e ela que
   o guard de contraste mede, entao ele mede o pior ponto. */
.numero--forte {
  background-color: var(--accent-forte);
  background-image: linear-gradient(160deg, var(--accent-forte) 0%, var(--accent-forte-hover) 100%);
}
.numero--forte strong, .numero--forte span { color: #fff; }

.hero__lado { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-width: 0; }
.hero__cartao { position: relative; border-radius: var(--raio-xl); overflow: hidden; min-width: 0; }
.hero__cartao--sessoes { background: var(--accent-100); padding: clamp(18px, 2.4vw, 30px); }
/* As formas do modelo eram 3D roxas. Aqui sao circulos desfocados nos laranjas
   da paleta, so decoracao: nenhum texto fica sobre elas, so a janela branca. */
.hero__cartao--app {
  min-height: 300px;
  background-color: var(--accent-200);
  background-image:
    radial-gradient(circle at 12% 88%, var(--accent-900) 0 16%, transparent 34%),
    radial-gradient(circle at 22% 30%, var(--accent) 0 14%, transparent 36%),
    radial-gradient(circle at 88% 12%, var(--accent-300) 0 18%, transparent 42%),
    linear-gradient(140deg, var(--accent-200), var(--accent-400));
}

/* Ilustracao das sessoes */
.mock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: start; }
.mock__coluna { display: grid; gap: 12px; }
.mock__cartao { background: var(--surface); border-radius: var(--raio-md); padding: 12px; box-shadow: var(--sombra-sm); min-width: 0; }
.mock__cabeca { display: flex; align-items: center; gap: 10px; }
.mock__icone { display: grid; place-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-100); color: var(--accent-texto); flex-shrink: 0; }
.mock__titulo { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.25; }
.mock__meta { margin: 2px 0 0; font-size: 11.5px; color: var(--texto-suave); }
.mock__abas { display: flex; gap: 4px; margin: 12px 0 8px; padding: 3px; background: var(--bg); border-radius: 8px; }
.mock__abas span { flex: 1; text-align: center; font-size: 11.5px; padding: 4px; border-radius: 6px; color: var(--texto-medio); }
.mock__abas .ativa { background: var(--surface); color: var(--texto); font-weight: 600; box-shadow: var(--sombra-sm); }
.mock__texto { margin: 0; font-size: 12px; line-height: 1.45; color: var(--texto-medio); }
.mock__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mock__lista li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12.5px; }
.mock__lista .tag { font-size: 11px; padding: 2px 8px; }
.mock__avatar { display: grid; place-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--azul-100); color: var(--azul-800); font-size: 10.5px; font-weight: 700; }
.mock__avatar--b { background: var(--accent-100); color: var(--accent-900); }
.mock__avatar--c { background: var(--neutro-200); color: var(--texto-medio); }
.mock__botao { display: block; margin-top: 12px; text-align: center; padding: 8px; border-radius: 999px; background: var(--accent-forte); color: #fff; font-size: 12.5px; font-weight: 700; }

/* Ilustracao da janela do produto, cortada pela borda do cartao como no
   modelo. O corte e do proprio cartao (overflow hidden): nada vaza a pagina. */
.app {
  position: absolute;
  left: 18%;
  top: 14%;
  width: 640px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  background: var(--surface);
  border-radius: var(--raio-lg) 0 0 0;
  box-shadow: var(--sombra-lg);
}
.app__lateral { padding: 16px 12px; border-right: 1px solid var(--neutro-200); }
.app__lateral .marca { font-size: 16px; margin: 0 0 12px 6px; }
.app__busca { display: block; font-size: 11.5px; color: var(--texto-suave); background: var(--bg); border-radius: 8px; padding: 6px 8px; margin-bottom: 10px; }
.app__lateral ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.app__lateral li { font-size: 12.5px; color: var(--texto-medio); padding: 6px 8px; border-radius: 8px; }
.app__lateral li.ativo { background: var(--accent-100); color: var(--accent-900); font-weight: 700; }
.app__principal { padding: 16px; }
.app__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.app__topo p { margin: 0; font-size: 14px; font-weight: 600; }
.app__topo span { font-size: 11.5px; color: var(--texto-medio); background: var(--bg); border-radius: 999px; padding: 3px 10px; }
.app__mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.app__mes span { font-size: 12px; text-align: center; padding: 6px 0; color: var(--texto); border-radius: 8px; }
.app__mes .app__dsem { font-size: 11px; color: var(--texto-suave); padding: 0 0 4px; }
.app__mes .app__hoje { background: var(--accent-forte); color: #fff; font-weight: 700; }

@media (max-width: 900px) {
  .hero__grade { grid-template-columns: 1fr; }
  .hero__cartao--app { min-height: 260px; }
}
@media (max-width: 560px) {
  .hero__acao { flex-direction: column; align-items: stretch; border-radius: var(--raio-lg); padding: 14px; text-align: center; }
  .hero__numeros { grid-template-columns: 1fr; }
  .numero { min-height: 0; }
  .mock { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- secoes -- */
.secao { max-width: var(--largura); margin: 0 auto; padding: clamp(44px, 6vw, 96px) var(--respiro); }
.secao--curta { padding-block: clamp(24px, 3vw, 44px); }

.grade-auto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .grade-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grade-auto { grid-template-columns: 1fr; } }
/* A ultima linha divide a largura toda quando a conta nao fecha, como na
   grade de garantias (.seg__cards), so que nos cortes desta grade (1000/640).
   Medido em 07/10/2026: com 9 cartoes o tablet ficava 2+2+2+2+1, e o 10o
   cartao (agendamento publico) abriria o mesmo buraco no desktop.
   Guard: teste 8 de scripts/testar-interacao.mjs, que simula 8, 9 e 11. */
@media (min-width: 1001px) {
  .grade-auto { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grade-auto > * { grid-column: span 2; }
  .grade-auto > :nth-child(3n+1):nth-last-child(2),
  .grade-auto > :nth-child(3n+2):last-child { grid-column: span 3; }
  .grade-auto > :nth-child(3n+1):last-child { grid-column: span 6; }
}
@media (min-width: 641px) and (max-width: 1000px) {
  .grade-auto > :nth-child(2n+1):last-child { grid-column: span 2; }
}
.grade-tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }

.cartao-texto { padding: 26px; }
.cartao-texto h3 { font-size: 19px; line-height: 1.25; margin: 0 0 8px; }
.cartao-texto p { font-size: 14.5px; line-height: 1.6; margin: 0; color: var(--texto-medio); }

/* ------------------------------------------------------ normas da profissao */
/* No lugar do mural de logotipos do modelo. As bordas se apagam por mascara e
   a segunda fileira anda um pouco para o lado; o recorte e do proprio mural
   (overflow hidden), entao nada empurra a pagina no celular. */
.normas { padding-bottom: clamp(24px, 3vw, 44px); }
.normas__mural {
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 18px 0;
  background: var(--bg);
  border-radius: var(--raio-xl);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.normas__fileira { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 12px; }
.normas__fileira--b { transform: translateX(-60px); }
.normas__fileira li {
  flex-shrink: 0;
  padding: 14px 22px;
  background: var(--surface);
  border-radius: var(--raio-md);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--texto-medio);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .normas__fileira { justify-content: flex-start; }
  .normas__fileira--b { transform: translateX(-120px); }
}

/* ------------------------------------------------- para quem e, com a foto */
/* Composicao da secao de resultados do cflow-website (pedida pelo dono em
   16/09/2026): moldura escura grande com a imagem, e o cartao branco entrando
   pela borda direita, saindo um pouco para fora e para baixo.

   A REGRA DO CARTAO: ele so pode cobrir o quarto direito da foto. A psicologa
   esta entre 40% e 72% da largura da imagem; a foto e cortada pela esquerda
   (object-position 100%), o que a empurra ainda mais para a esquerda, e o
   cartao comeca depois de 75%. O testar-interacao.mjs mede a sobreposicao. */
.quem__palco { position: relative; max-width: 1180px; margin: 0 auto; padding-bottom: 56px; }
.quem__moldura {
  width: 76%;
  padding: 22px;
  border-radius: 34px;
  background-color: var(--neutro-900);
  background-image: radial-gradient(circle at 0% 100%, var(--accent-900) 0%, transparent 46%);
  box-shadow: var(--sombra-lg);
}
.quem__foto { position: relative; aspect-ratio: 11 / 10; border-radius: var(--raio-lg); overflow: hidden; background: var(--accent-100); }
.quem__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 40%; }

.quem__cartao {
  position: absolute;
  top: 56px;
  right: 0;
  /* 43%, e nao 44%: a borda da moldura tem largura fixa, entao a fracao da foto
     coberta cresce quando a secao alarga. Com 44% o cartao entrava em 74,9% da
     foto na largura maxima (1180px), e o teste reprovou. 43% da 76% ou mais de
     900 a 1180px. */
  width: 43%;
  padding: 28px 30px 12px;
  background: var(--surface);
  border-radius: var(--raio-xl);
  box-shadow: 0 24px 60px rgba(30, 39, 37, .16);
}
.selo--borda { background: var(--surface); border: 1px solid var(--neutro-300); color: var(--texto); margin-bottom: 18px; }
.quem__titulo { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.08; font-weight: 700; letter-spacing: -0.035em; margin: 0 0 8px; }

.perfis { list-style: none; margin: 0; padding: 0; }
.perfil { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
.perfil + .perfil { border-top: 1px solid var(--neutro-200); }
.perfil__marca {
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-100);
  color: var(--accent-texto);
}
.perfil h3 { font-size: 17px; line-height: 1.3; font-weight: 700; margin: 0 0 6px; }
.perfil p { font-size: 14.5px; line-height: 1.6; margin: 0; color: var(--texto-medio); }

/* Abaixo de 900px nao ha largura para sobrepor sem cobrir a psicologa: a foto
   ocupa a linha inteira e o cartao vem depois dela, sem encostar. */
@media (max-width: 900px) {
  .quem__palco { padding-bottom: 0; }
  .quem__moldura { width: 100%; padding: 12px; border-radius: var(--raio-xl); }
  .quem__foto { aspect-ratio: 3 / 2; }
  .quem__foto img { object-position: 60% 40%; }
  .quem__cartao { position: static; width: auto; margin-top: 16px; padding: 24px 22px 8px; box-shadow: var(--sombra-md); }
}

/* ------------------------------------------------------ o problema (dores) */
.dores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(300px, calc((100% - 32px) / 3)), 1fr));
  gap: 16px;
}
.dores li {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--neutro-200);
  border-radius: var(--raio-lg);
  padding: 64px 24px 24px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--texto);
}
/* O "x" e desenhado em CSS, e nao com um caractere: assim ele nao e lido em
   voz alta como "letra x" por leitor de tela no meio da frase. */
.dores li::before,
.dores li::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 34px;
  width: 15px;
  height: 2.4px;
  background: var(--accent-forte);
  border-radius: 2px;
}
.dores li::before { transform: rotate(45deg); }
.dores li::after { transform: rotate(-45deg); }

.dores__fecho {
  max-width: 66ch;
  margin: 30px auto 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--texto);
}
.dores__fecho a { color: var(--accent-texto); }
.dores__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: center;
  margin: 34px 0 0;
  font-size: 15px;
  font-weight: 600;
}
.dores__links span { color: var(--texto-medio); font-weight: 500; }

/* O botao no meio da pagina, logo depois da conta da falta: quem se convenceu
   no numero nao precisa rolar ate o fim para achar onde clicar. */
.acao-meio { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 26px; }

/* A conta da falta. Os numeros ja saem prontos no HTML: com o JavaScript
   desligado a conta continua verdadeira, so nao recalcula. */
.conta {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 10px;
  margin-top: 40px;
  padding: 10px;
  border: 1px solid var(--neutro-200);
  border-radius: var(--raio-xl);
  background: var(--bg);
}
.conta__campos {
  padding: clamp(24px, 3vw, 34px);
  background: var(--surface);
  border: 1px solid var(--neutro-200);
  border-radius: var(--raio-lg);
}
.conta__titulo { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--texto); margin: 0 0 20px; }
.conta__campo + .conta__campo { margin-top: 18px; }
.conta__campo label {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 8px;
}
.conta__entrada { position: relative; }
.conta__entrada span {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 600;
  color: var(--texto-medio);
}
.conta input {
  width: 100%;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--texto);
  padding: 13px 16px;
  border: 1px solid var(--neutro-300);
  border-radius: var(--raio-sm);
  background: var(--bg);
}
/* Depois do shorthand acima, e nao antes: `padding: 13px 16px` sobrescreve um
   `padding-left` declarado mais cedo, e o "R$" ficava por cima do numero. */
.conta__entrada input { padding-left: 44px; }
.conta input:focus { outline: 2px solid var(--accent-forte); outline-offset: 1px; }

.conta__saida {
  padding: clamp(24px, 3vw, 34px);
  background: var(--azul-100);
  border-radius: var(--raio-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.conta__rotulo { font-size: 14px; line-height: 1.5; margin: 0; color: var(--azul-800); }
.conta__rotulo strong { font-weight: 700; }
.conta__valor {
  font-size: clamp(44px, 6vw, 68px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: var(--accent-texto);
  margin: 10px 0 8px;
}
.conta__comparacao {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--neutro-300);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
}
.conta__comparacao strong { color: var(--accent-texto); }
.conta__honesta {
  max-width: 74ch;
  margin: 22px auto 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--texto-medio);
  text-align: center;
}
@media (max-width: 760px) {
  .conta { grid-template-columns: 1fr; }
}

/* O cartao grande de agenda, antes da grade de funcionalidades: texto a
   esquerda e a semana desenhada a direita, como o calendario do modelo. */
.vitrine-agenda {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  padding: clamp(22px, 3.4vw, 44px);
  margin-bottom: 16px;
  background: var(--bg);
  border-radius: var(--raio-xl);
}
.vitrine-agenda__icone { display: grid; place-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-forte); color: #fff; margin-bottom: 18px; }
.vitrine-agenda h3 { font-size: clamp(26px, 3vw, 38px); line-height: 1.08; font-weight: 500; letter-spacing: -0.035em; margin: 0 0 14px; }
.vitrine-agenda p { font-size: 15.5px; line-height: 1.6; color: var(--texto-medio); margin: 0 0 24px; }

.semana { background: var(--surface); border-radius: var(--raio-lg); padding: 16px; box-shadow: var(--sombra-sm); min-width: 0; }
.semana__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.semana__topo p { margin: 0; font-size: 14px; font-weight: 600; }
.semana__setas { margin-left: 8px; color: var(--texto-medio); letter-spacing: 4px; }
.semana__modos { display: flex; gap: 2px; padding: 3px; background: var(--bg); border-radius: 999px; }
.semana__modos span { font-size: 12px; padding: 4px 12px; border-radius: 999px; color: var(--texto-medio); }
.semana__modos .ativo { background: var(--surface); color: var(--texto); font-weight: 600; box-shadow: var(--sombra-sm); }
.semana__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--neutro-200); }
.semana__dia { display: grid; align-content: start; gap: 8px; padding: 12px 8px 4px; min-height: 190px; }
.semana__dia + .semana__dia { border-left: 1px solid var(--neutro-200); }
.semana__rotulo { margin: 0 0 4px; text-align: center; font-size: 12px; color: var(--texto-medio); }
.semana__rotulo strong { color: var(--texto); }
.semana__sessao { padding: 10px; border-radius: var(--raio-sm); background: var(--bg); border-left: 3px solid var(--accent); }
.semana__sessao--online { border-left-color: var(--azul-800); }
.semana__sessao p { margin: 0; font-size: 13px; font-weight: 600; }
.semana__sessao span { display: block; margin: 2px 0 6px; font-size: 11.5px; color: var(--texto-medio); }
.semana__sessao em { font-style: normal; font-size: 11px; padding: 2px 8px; }

@media (max-width: 900px) {
  .vitrine-agenda { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .semana__grade { grid-template-columns: 1fr; }
  .semana__dia { min-height: 0; }
  .semana__dia + .semana__dia { border-left: 0; border-top: 1px solid var(--neutro-200); }
}

/* ------------------------------------------------------- funcionalidades -- */
/* Icone em circulo cheio no topo e o texto assentado na base, como no modelo.
   O circulo e --accent (#ff6a00): e grafico, nao texto, e o comentario dos
   tokens reserva essa cor exatamente para isso. */
.func { position: relative; padding: 24px; display: flex; flex-direction: column; min-height: 260px; }
.func__tag { position: absolute; top: 28px; right: 22px; }
.func__marca {
  display: grid;
  place-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  margin-bottom: auto;
}
.func h3 { font-size: 19px; line-height: 1.2; margin: 34px 0 8px; }
.func p { font-size: 14.5px; line-height: 1.55; margin: 0; color: var(--texto-medio); }

/* ---------------------------------------------------------------- numeros */
/* Substitui o bento de numeros de vaidade do material de design: os
   "+2 mil psicologos" e "+R$18mi" de la nao sao verdade. Os numeros daqui sao
   de como o produto foi construido, e moram dentro da secao de seguranca. */
.numeros__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 40px;
  margin-bottom: clamp(30px, 4vw, 48px);
}
.numeros__grade > div { border-top: 1px solid var(--divisor); padding-top: 26px; }
.numeros__grade strong {
  display: block;
  font-size: clamp(46px, 6vw, 84px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--texto);
}
.numeros__grade p {
  position: relative;
  padding-left: 18px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--texto-medio);
  margin: 18px 0 0;
  max-width: 32ch;
}
.numeros__grade p::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
@media (max-width: 760px) {
  .numeros__grade { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- como funciona */
/* O cartao da equipe do modelo, com a foto trocada por uma area de cor com o
   numero do passo. O fundo e --azul-100 em background-color, com o degrade por
   cima: o guard de contraste le a background-color, e assim ele mede o texto
   contra o PIOR ponto do degrade, e nao contra o branco. */
.passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.passo {
  background: var(--bg);
  border: 1px solid var(--neutro-200);
  border-radius: var(--raio-xl);
  padding: 10px 10px 24px;
}
.passo__arte {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  aspect-ratio: 5 / 4;
  padding: 18px;
  margin-bottom: 20px;
  border-radius: var(--raio-lg);
  background-color: var(--azul-100);
  background-image: linear-gradient(200deg, var(--surface) 0%, var(--azul-100) 70%);
}
.passo__n { font-size: clamp(40px, 4vw, 56px); line-height: 1; font-weight: 500; letter-spacing: -0.05em; color: var(--accent-texto); }
.passo__marca {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
}
.passo h3 { font-size: 18.5px; line-height: 1.2; margin: 0 14px 8px; }
.passo p { font-size: 14.5px; line-height: 1.6; margin: 0 14px; color: var(--texto-medio); }
@media (max-width: 1000px) { .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .passos { grid-template-columns: 1fr; }
  .passo__arte { aspect-ratio: auto; min-height: 112px; }
}

/* -------------------------------------------------------------- seguranca */
/* Uma coluna so: cabecalho, os tres numeros grandes e os cartoes em grade. A
   versao de duas colunas deixava meia tela em branco ao lado dos cartoes. */
.seg__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.seg__cards .card { padding: 24px; }
.seg__cards h3 { font-size: 17.5px; margin: 0 0 8px; }
.seg__cards p { font-size: 14.5px; line-height: 1.55; margin: 0; color: var(--texto-medio); }
@media (max-width: 900px) { .seg__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .seg__cards { grid-template-columns: 1fr; } }
/* A ultima linha divide a largura toda quando a conta nao fecha. Medido em
   07/10/2026: com 5 cartoes (saiu o do e-Psi) sobrava uma casa vazia no
   desktop (3 + 2) e no tablet (2 + 2 + 1). No desktop a grade vira 6 colunas
   e cada cartao ocupa 2, para que 2 cartoes de sobra fiquem com 3 cada.
   Guard: teste 8 de scripts/testar-interacao.mjs, que simula de 4 a 7. */
@media (min-width: 901px) {
  .seg__cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .seg__cards .card { grid-column: span 2; }
  .seg__cards .card:nth-child(3n+1):nth-last-child(2),
  .seg__cards .card:nth-child(3n+2):last-child { grid-column: span 3; }
  .seg__cards .card:nth-child(3n+1):last-child { grid-column: span 6; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .seg__cards .card:nth-child(2n+1):last-child { grid-column: span 2; }
}

/* ---------------------------------------------------------------- bio --- */
/* Link da bio do Instagram (/bio), redesenhado em 08/10/2026 pelo briefing do
   Caique. Contraste: a linha de apoio do botao fica branca cheia (com
   opacidade .92 cairia mais) e o link do rodape usa --accent-texto (o #cc5400
   da 4,04:1 sobre o fundo). O botao principal esta no laranja do MODELO
   (--accent -> --accent-700, #ff6a00 -> #cc5400) por decisao do Caique em
   10/10/2026, sabendo que o texto branco fica entre 2,87:1 e 4,34:1, abaixo do
   AA (4,5:1). E a unica excecao do teste 4, presa a este botao. Guards: testes
   4 (contraste) e 10 do testar-interacao. */
.bio {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
  background-image: radial-gradient(520px 360px at 85% -5%, var(--accent-100), transparent 70%);
  background-repeat: no-repeat;
}
.bio__coluna { display: flex; flex-direction: column; gap: 28px; max-width: 440px; margin: 0 auto; padding: 48px 16px 40px; text-align: center; }
.bio__marca { display: inline-flex; align-items: center; align-self: center; min-height: 44px; font-size: 34px; }
.bio__titulo { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.15; text-wrap: balance; }
.bio__texto { max-width: 36ch; margin: 10px auto 0; font-size: 16px; line-height: 1.5; color: var(--texto-medio); text-wrap: balance; }
.bio__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.bio__chip { padding: 6px 12px; border: 1px solid var(--neutro-200); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--texto); }
.bio__chip--suave { border-color: transparent; background: var(--accent-100); color: var(--accent-900); }
.bio__links { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bio__principal {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 68px; margin-bottom: 4px; padding: 12px 20px; border-radius: 20px;
  background-color: var(--accent-700);
  background-image: linear-gradient(135deg, var(--accent), var(--accent-700));
  color: #fff; text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(204, 84, 0, .6);
  transition: transform .15s ease, box-shadow .15s ease;
}
.bio__principal:hover { color: #fff; transform: translateY(-2px); }
.bio__principal-titulo { font-size: 18px; font-weight: 700; }
.bio__principal-apoio { font-size: 13.5px; }
.bio__card {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 10px 16px 10px 10px;
  border: 1px solid var(--neutro-200); border-radius: var(--raio-lg);
  background: var(--surface); color: var(--texto); text-align: left; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bio__card:hover { color: var(--texto); transform: translateY(-2px); box-shadow: 0 8px 20px -12px rgba(30, 39, 37, .35); }
.bio__icone { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--raio-md); background: var(--accent-100); color: var(--accent-700); }
.bio__card-texto { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.bio__card-titulo { font-size: 16px; font-weight: 600; }
.bio__detalhe { font-size: 13.5px; color: var(--texto-suave); }
.bio__seta { display: grid; place-items: center; flex: none; color: #9aa29f; }
.bio__rodape { margin: 4px 0 0; font-size: 13px; color: var(--texto-suave); }
.bio__rodape a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--accent-texto); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .bio__principal:hover, .bio__card:hover { transform: none; }
}

/* ----------------------------------------------------------------- planos */
.planos__controle { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 34px; }
.planos__rodape { text-align: center; margin: 26px auto 0; max-width: 64ch; font-size: 14px; color: var(--texto-suave); }
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; max-width: 1080px; margin: 0 auto; }
/* Desenho do modelo: cartao branco, caixa de cima com nome, preco e botao, e a
   lista de recursos embaixo. O plano em destaque tem a caixa tingida e o
   botao cheio. */
.plano { display: flex; flex-direction: column; padding: 10px 10px 26px; background: var(--surface); border: 1px solid var(--neutro-200); border-radius: var(--raio-xl); }
.plano__topo { padding: 22px 20px 20px; background: var(--bg); border-radius: var(--raio-lg); }
.plano--destaque { box-shadow: var(--sombra-md); border-color: var(--accent-300); }
.plano--destaque .plano__topo { background-color: var(--accent-100); background-image: linear-gradient(180deg, var(--accent-100), var(--surface)); }
.plano__nome { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plano h3 { font-size: 18px; font-weight: 600; margin: 0; }
.plano__preco { font-size: 42px; font-weight: 500; letter-spacing: -0.04em; margin: 14px 0 2px; }
.plano__preco small { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--texto-suave); }
.plano__nota { font-size: 14px; margin: 0 0 18px; color: var(--texto-medio); }
.plano__recursos { margin: 22px 14px 0; font-size: 13.5px; font-weight: 700; color: var(--texto); }
.plano ul { list-style: none; padding: 0 14px; margin: 14px 0 0; display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; }
/* O item e bloco com recuo, e o check em circulo e desenhado nas duas
   pseudo-camadas: nao e caractere, entao o leitor de tela nao le "marca de
   verificacao" antes de cada item. */
.plano li { position: relative; padding-left: 28px; line-height: 1.45; color: var(--texto-medio); }
.plano li em { font-style: normal; color: var(--texto-suave); }
.plano li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-100); }
.plano li::after { content: ""; position: absolute; left: 5px; top: 6px; width: 7px; height: 4px; border-left: 2px solid var(--accent-texto); border-bottom: 2px solid var(--accent-texto); transform: rotate(-45deg); }
.plano--destaque li::before { background: var(--accent-forte); }
.plano--destaque li::after { border-color: #fff; }
.plano li.em-breve { color: var(--texto-suave); }
.plano li.em-breve::before { background: transparent; border: 1.5px solid var(--neutro-300); width: 15px; height: 15px; }
.plano li.em-breve::after { content: none; }

/* O alternador e as abas sao o mesmo componente visual: pilula cinza com o
   escolhido cheio no laranja de botao. */
.alternador { display: inline-flex; gap: 4px; padding: 5px; background: var(--bg); border: 1px solid var(--neutro-200); border-radius: 999px; }
.alternador button {
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-medio);
  transition: background-color .15s ease, color .15s ease;
}
.alternador button[aria-pressed="true"] { background: var(--accent-forte); color: #fff; }
.alternador .desconto { color: var(--accent-texto); }
/* Sem esta linha o "-20%" fica laranja-escuro sobre o botao laranja quando o
   anual esta escolhido. O guard de contraste mede so o estado inicial (mensal),
   entao ele nao pegaria isto sozinho. */
.alternador button[aria-pressed="true"] .desconto { color: #fff; }

/* ------------------------------------------------------------- fechamento */
/* No lugar do depoimento do modelo: a chamada num cartao cheio e, ao lado, o
   que ela leva. Branco sobre --accent-forte da 4,73:1. */
.fechamento__grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.fechamento__chamada {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4.4vw, 56px);
  border-radius: var(--raio-xl);
  background-color: var(--accent-forte);
  background-image: linear-gradient(150deg, var(--accent-forte) 0%, var(--accent-forte-hover) 100%);
  color: #fff;
}
.fechamento__chamada h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.05; font-weight: 500; letter-spacing: -0.04em; margin: 0; max-width: 18ch; color: #fff; }
.fechamento__chamada p { font-size: 16px; line-height: 1.6; margin: 16px 0 0; max-width: 46ch; color: #fff; }
.btn-claro { background: var(--surface); color: var(--accent-texto); }
.btn-claro:hover { background: var(--accent-100); color: var(--accent-900); }
.btn-contorno { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.btn-contorno:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.fechamento__lista { padding: clamp(26px, 3.4vw, 40px); background: var(--bg); border-radius: var(--raio-xl); }
.fechamento__lista h3 { font-size: 20px; margin: 0 0 18px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.5; color: var(--texto); }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--accent-100);
}
.checks li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--accent-texto);
  border-bottom: 2px solid var(--accent-texto);
  transform: rotate(-45deg);
}
.fechamento__nota { margin: 22px 0 0; font-size: 14px; color: var(--texto-medio); }
@media (max-width: 860px) { .fechamento__grade { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------- faq */
.faq { max-width: 860px; margin: 0 auto; padding: clamp(44px, 6vw, 96px) var(--respiro); }
.faq__cabeca { text-align: center; margin-bottom: 36px; }
.faq__lista { display: flex; flex-direction: column; gap: 10px; }
.faq details { padding: 0; overflow: hidden; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  display: grid;
  place-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  font-size: 20px;
  color: var(--accent-texto);
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .2s ease;
}
/* Aberto, o "+" gira e vira "x". Antes era um traco literal no content,
   e traco e justamente o que saiu do site. */
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 24px 22px; margin: 0; font-size: 15px; line-height: 1.65; color: var(--texto-medio); }
.faq details p + p { padding-top: 0; margin-top: -8px; }

/* ==========================================================================
   Pagina /planos: a matriz linha a linha
   --------------------------------------------------------------------------
   O "incluido" e o "nao incluido" sao DESENHADOS, e nao caracteres: um check
   ou um traco longo em <td> e lido em voz alta pelo leitor de tela como o nome
   do simbolo, e o traco longo ainda reprova na checagem 7 do portao. O texto
   de verdade vai em .so-leitor, que so o leitor de tela alcanca.
   ========================================================================== */

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Rolagem propria: sem isto a tabela empurra a pagina de lado no celular, e o
   guard de scroll horizontal so acusaria depois de publicado. */
.matriz-rolavel {
  overflow-x: auto;
  border: 1px solid var(--divisor);
  border-radius: var(--raio-lg);
  background: var(--surface);
  box-shadow: var(--sombra-sm);
}
.matriz { width: 100%; border-collapse: collapse; min-width: 640px; }
.matriz th, .matriz td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--divisor); }
.matriz thead th {
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-medio);
  background: var(--bg);
  white-space: nowrap;
}
.matriz thead th:not(:first-child),
.matriz tbody td { text-align: center; width: 15%; }
.matriz tbody th {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--texto);
}
.matriz__grupo th {
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-texto);
  background: var(--accent-100);
  text-align: left;
}
.matriz tbody:last-child tr:last-child th,
.matriz tbody:last-child tr:last-child td { border-bottom: 0; }
.matriz .planejado { font-size: 13px; color: var(--texto-medio); font-style: italic; }
.matriz td:not(.sim):not(.nao):not(.planejado) { font-size: 14px; color: var(--texto-medio); }

.marca-sim {
  display: inline-block;
  width: 13px;
  height: 8px;
  border-left: 2.4px solid var(--accent-texto);
  border-bottom: 2.4px solid var(--accent-texto);
  transform: rotate(-45deg) translate(1px, -2px);
}
.marca-nao {
  display: inline-block;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--neutro-300);
  vertical-align: middle;
}

/* ==========================================================================
   Paginas /vs: comparativos
   --------------------------------------------------------------------------
   A tabela reaproveita .matriz, mas aqui a celula e FRASE, e nao sinal: por
   isso volta a alinhar a esquerda e as duas colunas ficam largas. A coluna do
   Sinapsi e destacada com fundo, e nao com cor de texto, para nao criar mais
   um par cor-sobre-cor que o guard de contraste tenha que perdoar.
   ========================================================================== */

.grade-dois { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

.escolha { padding: 28px; }
.escolha h3 { font-size: 20px; line-height: 1.2; margin: 0 0 14px; }
.escolha ul { list-style: none; margin: 0; padding: 0; }
.escolha li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texto-medio);
}
.escolha li + li { margin-top: 12px; }
.escolha li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutro-300);
}
.escolha--nos { border-color: var(--accent-300); background: var(--accent-100); }
.escolha--nos li::before { background: var(--accent-forte); }
.escolha--nos li { color: var(--texto); }

.matriz.vs td, .matriz.vs th { text-align: left; vertical-align: top; }
.matriz.vs thead th:not(:first-child) { width: 34%; }
.matriz.vs tbody td { width: 34%; font-size: 14px; line-height: 1.5; color: var(--texto-medio); }
.matriz.vs tbody th { width: 32%; font-weight: 600; }
.matriz.vs .vs__nos { background: var(--accent-100); color: var(--texto); }
.matriz.vs thead th:nth-child(2) { background: var(--accent-100); color: var(--accent-texto); }

.vs__medicao {
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-medio);
  max-width: 70ch;
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--accent-300);
}

.vs__diferenca { max-width: 68ch; }
.vs__diferenca p { font-size: 16.5px; line-height: 1.7; color: var(--texto-medio); margin: 0 0 16px; }
.vs__diferenca p:last-child { margin-bottom: 0; }

/* formulario do CTA final */
.form-cta { display: flex; gap: 10px; max-width: 470px; margin: 30px auto 0; flex-wrap: wrap; justify-content: center; }
.form-cta input {
  flex: 1;
  min-width: 220px;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font: inherit;
  font-size: 15px;
}
.form-cta input::placeholder { color: rgba(255, 255, 255, .6); }
.form-cta input:focus { outline: 2px solid var(--accent-300); outline-offset: 2px; }

/* ==========================================================================
   Blog
   ========================================================================== */

.blog-cabeca { max-width: var(--largura); margin: 0 auto; padding: clamp(40px, 6vw, 76px) var(--respiro) clamp(20px, 3vw, 32px); }
.blog-cabeca h1 { font-size: clamp(36px, 5.4vw, 66px); line-height: 1.02; font-weight: 500; letter-spacing: -0.045em; margin: 0; max-width: 18ch; }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; }
.filtros button {
  border: 1px solid var(--divisor);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--texto-medio);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.filtros button:hover { border-color: var(--neutro-300); color: var(--texto); }
.filtros button[aria-pressed="true"] { background: var(--accent-forte); color: #fff; border-color: var(--accent-forte); }

.destaque {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: var(--texto);
  transition: box-shadow .2s ease, transform .2s ease;
}
.destaque:hover, .post:hover { box-shadow: var(--sombra-md); transform: translateY(-2px); color: var(--texto); }
.destaque figure { margin: 0; min-height: 300px; background: var(--accent-100); }
.destaque figure img, .post figure img { width: 100%; height: 100%; object-fit: cover; }
.destaque__texto { padding: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.destaque__texto h2 { font-size: clamp(23px, 2.6vw, 33px); line-height: 1.13; margin: 0; }
.destaque__texto p { font-size: 16px; line-height: 1.6; margin: 16px 0 0; color: var(--texto-medio); }
@media (max-width: 860px) {
  .destaque { grid-template-columns: 1fr; }
  .destaque figure { min-height: 200px; aspect-ratio: 16 / 9; }
}

.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(290px, calc((100% - 44px) / 3)), 1fr)); gap: 22px; }
.post {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: var(--texto);
  transition: box-shadow .2s ease, transform .2s ease;
}
.post figure { margin: 0; aspect-ratio: 16 / 10; background: var(--accent-100); }
.post__texto { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.post__meta span:last-child { font-size: 12.5px; color: var(--texto-suave); }
.post h3 { font-size: 19px; line-height: 1.2; margin: 0 0 10px; }
.post p { font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; color: var(--texto-medio); flex: 1; }
.post time { font-size: 13px; color: var(--texto-suave); }

.vazio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  color: var(--texto-suave);
  font-size: 15px;
}

/* ------------------------------------------------------------- artigo ---- */
.artigo-cabeca { max-width: 760px; margin: 0 auto; padding: clamp(32px, 5vw, 60px) var(--respiro) clamp(20px, 3vw, 30px); }
.artigo-cabeca h1 { font-size: clamp(29px, 4.4vw, 48px); line-height: 1.08; margin: 0; }
.artigo-cabeca .resumo { font-family: var(--fonte-prosa); font-size: 20px; line-height: 1.55; margin: 22px 0 0; color: var(--texto-medio); }
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  text-decoration: none;
  color: var(--texto-medio);
  margin-bottom: 22px;
  font-weight: 500;
}
.voltar:hover { color: var(--accent-forte-hover); }
.assinatura {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--divisor);
}
.assinatura__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-200);
  display: grid;
  place-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-900);
  flex-shrink: 0;
}
.assinatura b { display: block; font-size: 15px; }
.assinatura small { font-size: 13.5px; color: var(--texto-suave); }

.capa-artigo { max-width: 940px; margin: 0 auto clamp(24px, 4vw, 44px); padding-inline: var(--respiro); }
.capa-artigo div { border-radius: var(--raio-lg); overflow: hidden; aspect-ratio: 16 / 8; background: var(--accent-100); }

.prosa { max-width: 700px; margin: 0 auto; padding: 0 var(--respiro) clamp(44px, 6vw, 76px); }
.prosa p { font-family: var(--fonte-prosa); font-size: 19px; line-height: 1.72; margin: 0 0 24px; color: #2b3431; }
.prosa h2 { font-size: clamp(22px, 2.4vw, 29px); line-height: 1.2; margin: 44px 0 16px; }
.prosa h3 { font-size: 20px; line-height: 1.25; margin: 32px 0 12px; }
.prosa ul, .prosa ol { margin: 0 0 24px; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.prosa li {
  font-family: var(--fonte-prosa);
  font-size: 18px;
  line-height: 1.6;
  padding-left: 30px;
  position: relative;
  color: #2b3431;
}
/* Marcador desenhado, nao digitado. O travessao original saiu junto com os
   outros tracos do site; o ponto medio que entrou no lugar ficou minusculo na
   Figtree e alto demais na linha. Um circulo em CSS nao depende de como a
   fonte desenha o caractere e alinha pela altura da linha. */
.prosa li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.prosa blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--accent-forte);
  font-family: var(--fonte-prosa);
  font-size: 22px;
  line-height: 1.5;
  font-style: italic;
  color: var(--texto);
}
.prosa strong { font-weight: 700; color: var(--texto); }
.prosa a { font-weight: 500; }

/* Sumario do artigo. Fica no comeco da prosa, e some quando o artigo tem menos
   de tres secoes: indice de duas linhas nao ajuda ninguem. */
.sumario {
  background: var(--bg);
  border: 1px solid var(--divisor);
  border-radius: var(--raio-md);
  padding: 20px 24px;
  margin: 0 0 32px;
}
.sumario p {
  font-family: var(--fonte) !important;
  font-size: 12.5px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--texto-suave);
  margin: 0 0 12px !important;
}
.sumario ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.sumario li { font-family: var(--fonte); font-size: 15px; line-height: 1.45; padding-left: 4px; color: var(--texto-medio); }
.sumario li::before { content: none; }
.sumario a { color: var(--texto-medio); text-decoration: none; }
.sumario a:hover { color: var(--accent-texto); text-decoration: underline; }

/* Tabela dentro do artigo.
   O <table> fica dentro de um contentor com rolagem propria (o gerador
   embrulha): tabela de 4 colunas em tela de 390px ou rola dentro de si, ou
   empurra a pagina inteira de lado. */
.tabela-rolavel {
  overflow-x: auto;
  margin: 0 0 28px;
  border: 1px solid var(--divisor);
  border-radius: var(--raio-md);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.prosa table { border-collapse: collapse; width: 100%; min-width: 620px; font-family: var(--fonte); }
.prosa th, .prosa td {
  text-align: left;
  padding: 13px 16px;
  font-size: 14.5px;
  line-height: 1.4;
  border-bottom: 1px solid var(--divisor);
  vertical-align: top;
}
.prosa thead th { font-size: 13px; font-weight: 700; background: var(--bg); white-space: nowrap; }
.prosa thead th:nth-child(2) { color: var(--accent-texto); }
.prosa tbody td:first-child { font-weight: 600; color: var(--texto); }
.prosa tbody tr:last-child td { border-bottom: 0; }
.prosa tbody td strong { color: var(--accent-texto); }

/* Caixa de transparencia: onde um artigo fala de recurso que o produto ainda
   nao tem, o artigo diz isso na propria pagina. */
.nota-honesta {
  background: var(--azul-100);
  border-left: 3px solid var(--azul-800);
  border-radius: 0 var(--raio-md) var(--raio-md) 0;
  padding: 18px 22px;
  margin: 32px 0;
}
.nota-honesta p { font-family: var(--fonte); font-size: 15px; line-height: 1.6; margin: 0; color: var(--azul-800); }

.relacionados { max-width: var(--largura); margin: 0 auto; padding: clamp(36px, 5vw, 60px) var(--respiro) clamp(44px, 6vw, 80px); border-top: 1px solid var(--divisor); }
.relacionados h2 { font-size: clamp(21px, 2.4vw, 29px); margin: 0 0 26px; }
.relacionados .posts { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ------------------------------------------------------------------ 404 -- */
.erro { max-width: 620px; margin: 0 auto; padding: clamp(60px, 10vw, 130px) var(--respiro); text-align: center; }
.erro h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; margin: 0 0 16px; }
.erro p { font-size: 17px; color: var(--texto-medio); margin: 0 0 30px; }

/* ==========================================================================
   Formulario de contato (/contato). Campo de 16px no celular: abaixo disso o
   Safari do iPhone da zoom na pagina ao focar. O erro vem da API pela URL
   (?erro=) e o script.js poe a frase em .formulario__erro.
   ========================================================================== */

.formulario {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.formulario__campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--texto); border: 0; padding: 0; margin: 0; }
.formulario__campo legend { padding: 0; margin-bottom: 6px; }
.formulario__dupla { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.formulario input:not([type=radio]):not([type=checkbox]),
.formulario textarea {
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--texto);
  background: var(--surface);
  border: 1px solid var(--neutro-300);
  border-radius: var(--raio-sm);
  padding: 11px 13px;
}
.formulario textarea { resize: vertical; }
.formulario__opcao { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 15px; color: var(--texto-medio); min-height: 32px; }
.formulario__aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--texto-medio); }
.formulario__aceite input { margin-top: 3px; flex-shrink: 0; }
.formulario__aceite a { color: var(--accent-texto); }
.formulario__erro { margin: 0; padding: 12px 14px; border-radius: var(--raio-sm); background: var(--accent-100); color: var(--accent-900); font-size: 14.5px; }
.formulario .btn { align-self: flex-start; }