/* ===== tokens/fontes.css ===== */
/* Fontes da marca — SIL OFL. Licenças em assets/fonts/. */
@font-face{font-family:'Fraunces TB Studio';src:url('../assets/fonts/FrauncesTBStudio-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces TB Studio';src:url('../assets/fonts/FrauncesTBStudio-LightItalic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Fraunces TB Studio';src:url('../assets/fonts/FrauncesTBStudio-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces TB Studio';src:url('../assets/fonts/FrauncesTBStudio-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Fraunces TB Studio';src:url('../assets/fonts/FrauncesTBStudio-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces TB Studio';src:url('../assets/fonts/FrauncesTBStudio-MediumItalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Fraunces TB Studio';src:url('../assets/fonts/FrauncesTBStudio-SemiBoldItalic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Manrope';src:url('../assets/fonts/Manrope-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../assets/fonts/Manrope-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../assets/fonts/Manrope-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../assets/fonts/Manrope-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}


/* ===== tokens/cores.css ===== */
/* Cores — geradas de tokens/tokens.json no repo de origem. Não inventar valor novo. */
:root{
  /* Marca */
  --tb-color-brand-navy:#052C7C;
  --tb-color-brand-sky:#5ECDFE;
  --tb-color-brand-cream:#F4EFE7;
  --tb-color-brand-terracotta:#A35738;

  /* Superfícies */
  --tb-color-surface-raised:#FAF8F4;
  --tb-color-surface-default:#F4EFE7;
  --tb-color-surface-sunken:#E8E5E2;
  --tb-color-surface-inverse:#052C7C;

  /* Texto */
  --tb-color-text-primary:#052C7C;
  --tb-color-text-secondary:#424C63;
  --tb-color-text-disabled:#6B748A;
  --tb-color-text-inverse:#F4EFE7;
  --tb-color-text-inverse-secondary:#C3CBDE;

  /* Bordas */
  --tb-color-border-subtle:#C3CBDE;
  --tb-color-border-input:#636C82;
  --tb-color-border-strong:#052C7C;

  /* Interativo */
  --tb-color-interactive-default:#052C7C;
  --tb-color-interactive-hover:#042568;
  --tb-color-interactive-active:#04215E;
  --tb-color-interactive-subtle-hover:#E8E5E2;
  --tb-color-interactive-disabled-surface:#E2E4E9;
  --tb-color-interactive-disabled-text:#5C6579;

  /* Camada sobre foto e foco */
  --tb-color-overlay-sobre-foto:#04215ECC;
  --tb-color-overlay-sobre-foto-parcial:#04215E99;
  --tb-color-focus-ring:#052C7C;
  --tb-color-focus-ring-contrast:#F4EFE7;

  /* Feedback */
  --tb-color-feedback-error-default:#8A1C26;
  --tb-color-feedback-error-clara:#FCACB1;
  --tb-color-feedback-error-surface:#F0E7DF;
  --tb-color-feedback-error-border:#C94F5D;
  --tb-color-feedback-success-default:#1B5138;
  --tb-color-feedback-success-clara:#82D1A9;
  --tb-color-feedback-success-surface:#EBE9E0;
  --tb-color-feedback-success-border:#3B8964;
  --tb-color-feedback-warning-default:#654310;
  --tb-color-feedback-warning-clara:#D6BE8D;
  --tb-color-feedback-warning-surface:#EEE8DE;
  --tb-color-feedback-warning-border:#97763B;

  /* Meia-lua assinatura dos ícones tb-*: terracota sobre claro.
     Sobre fundo escuro, .sobre-escuro troca para sky. */
  --meia-lua-cor:var(--tb-color-brand-terracotta);

  /* Aliases semânticos */
  --text-body:var(--tb-color-text-secondary);
  --text-title:var(--tb-color-text-primary);
  --surface-page:var(--tb-color-surface-default);
  --surface-card:var(--tb-color-surface-raised);
  --surface-dark:var(--tb-color-surface-inverse);
  --accent-decor:var(--tb-color-brand-terracotta);
  --accent-decor-dark:var(--tb-color-brand-sky);
}


/* ===== tokens/tipografia.css ===== */
/* Tipografia. Corpo nunca abaixo de 18px (1.125rem): público 55+. */
:root{
  --tb-font-display:"Fraunces TB Studio",Georgia,serif;
  --tb-font-body:Manrope,system-ui,sans-serif;

  --tb-text-micro:1rem;      /* 16px — só label caixa alta e microcopy */
  --tb-text-base:1.125rem;   /* 18px — piso do corpo */
  --tb-text-md:1.25rem;
  --tb-text-lg:1.5rem;
  --tb-text-xl:1.75rem;
  --tb-text-2xl:2rem;
  --tb-text-3xl:2.5rem;      /* corte da Fraunces Light: só a partir daqui */
  --tb-text-4xl:3rem;
  --tb-text-5xl:3.75rem;
  --tb-text-6xl:4.75rem;

  --tb-weight-display-light:300;
  --tb-weight-display-regular:400;
  --tb-weight-display-medium:500;
  --tb-weight-display-semibold:600;
  --tb-weight-body-light:300;
  --tb-weight-body-regular:400;
  --tb-weight-body-medium:500;
  --tb-weight-body-semibold:600;

  --tb-leading-tight:1.15;
  --tb-leading-snug:1.25;
  --tb-leading-normal:1.5;
  --tb-leading-relaxed:1.65;
  --tb-leading-loose:1.8;

  --tb-tracking-display-tight:-0.02em;
  --tb-tracking-normal:0;
  --tb-tracking-wide:0.02em;
  --tb-tracking-label:0.09em;
  --tb-tracking-pilates:0.9em;


  /* Aliases semânticos */
  --font-display:var(--tb-font-display);
  --font-body:var(--tb-font-body);
  --text-size-body:var(--tb-text-base);
  --text-size-title:var(--tb-text-3xl);
}


/* ===== tokens/espacamento.css ===== */
/* Espaçamento, tamanhos e grade. */
:root{
  --tb-space-0:0;
  --tb-space-1:0.25rem;
  --tb-space-2:0.5rem;
  --tb-space-3:0.75rem;
  --tb-space-4:1rem;
  --tb-space-5:1.25rem;
  --tb-space-6:1.5rem;
  --tb-space-8:2rem;
  --tb-space-10:2.5rem;
  --tb-space-12:3rem;
  --tb-space-16:4rem;
  --tb-space-20:5rem;
  --tb-space-24:6rem;
  --tb-space-32:8rem;

  --tb-size-touch-target-min:2.75rem; /* 44px */
  --tb-size-icon-min:1.75rem;         /* 28px */
  --tb-size-focus-ring-width:3px;
  --tb-size-focus-ring-contrast-width:2px;
  --tb-size-focus-ring-offset:2px;
  --tb-size-grade-colunas:12;
  --tb-size-grade-goteira:24;
  --tb-size-grade-margem:24;
  --tb-size-grade-largura-max:1200;
  --tb-size-measure-max:34rem;

  --tb-bp-sm:480px;
  --tb-bp-md:768px;
  --tb-bp-lg:1024px;
  --tb-bp-xl:1280px;
  --tb-bp-2xl:1536px;
}


/* ===== tokens/forma.css ===== */
/* Raios e sombras. Sombra é tingida de navy, nunca preta. */
:root{
  --tb-radius-none:0;
  --tb-radius-sm:2px;
  --tb-radius-md:4px;
  --tb-radius-lg:8px;
  --tb-radius-full:9999px;

  --tb-shadow-subtle:0 1px 2px 0 #052C7C14, 0 1px 3px 0 #052C7C0F;
  --tb-shadow-raised:0 4px 12px 0 #052C7C1F, 0 2px 4px 0 #052C7C14;
  --tb-shadow-focus:0 0 0 2px #F4EFE7, 0 0 0 calc(2px + 3px) #052C7C;

  --radius-card:var(--tb-radius-lg);
  --radius-control:var(--tb-radius-md);
  --shadow-card:var(--tb-shadow-raised);
}


/* ===== base.css ===== */
/**
 * TB Studio — camada base do styleguide.
 * Escrito à mão, mas SEM valores literais: tudo vem de tokens.css,
 * que é gerado de tokens/tokens.json.
 */

/* As fontes vivem em fontes.css, embutidas em base64 pelo tokens/fontes.py.
   Isso faz o styleguide funcionar com duplo clique, sem servidor. */

/* ---------- Reset contido ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

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

/* ---------- Fundação tipográfica ---------- */

/* A família vive na raiz, não só no body. Declarada apenas no body, o <html>
   fica no serif padrão do navegador — e qualquer coisa que escape do body
   (diálogo nativo, conteúdo em camada, elemento em tela cheia) aparece em
   Times New Roman no meio de um sistema que não tem Times em lugar nenhum. */
:root {
  font-family: var(--tb-font-body);
  color-scheme: light;
}

body {
  background: var(--tb-color-surface-default);
  color: var(--tb-color-text-primary);
  font-family: var(--tb-font-body);
  font-size: var(--tb-text-base);           /* 18px — piso do público 55+ */
  font-weight: var(--tb-weight-body-regular);
  line-height: var(--tb-leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

p { max-width: var(--tb-size-measure-max); }

/* Fraunces Light só em tamanho grande (>= 2rem). Abaixo disso, Regular/Medium. */
.display {
  font-family: var(--tb-font-display);
  font-weight: var(--tb-weight-display-light);
  line-height: var(--tb-leading-tight);
  letter-spacing: var(--tb-tracking-display-tight);
}
.titulo {
  font-family: var(--tb-font-display);
  font-weight: var(--tb-weight-display-regular);
  line-height: var(--tb-leading-snug);
}
/* "Itálico é a voz da Tu" — uma palavra por título, nunca em texto corrido.
   O destaque é SemiBold: em Light o itálico apenas inclinava, e num título em
   Fraunces Light a palavra sumia em vez de destacar. O peso é o que faz o
   destaque; a inclinação sozinha não faz. */
.voz {
  font-style: italic;
  font-weight: var(--tb-weight-display-semibold);
}

.olho {
  font-family: var(--tb-font-body);
  font-weight: var(--tb-weight-body-light);
  font-size: var(--tb-text-micro);
  letter-spacing: var(--tb-tracking-label);
  text-transform: uppercase;
  color: var(--tb-color-text-secondary);
}

/* ---------- Foco: anel duplo, nunca removido ---------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--tb-shadow-focus);
  border-radius: var(--tb-radius-sm);
}

.pular-para-conteudo {
  position: absolute; left: var(--tb-space-4); top: var(--tb-space-4);
  transform: translateY(-200%);
  background: var(--tb-color-surface-inverse);
  color: var(--tb-color-text-inverse);
  padding: var(--tb-space-3) var(--tb-space-5);
  border-radius: var(--tb-radius-md);
  z-index: 100; text-decoration: none;
}
.pular-para-conteudo:focus { transform: translateY(0); }

/* ---------- Componentes base ---------- */

/* Botões — altura mínima de 44px vem do token de alvo de toque. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--tb-space-2);
  min-height: var(--tb-size-touch-target-min);
  min-width: var(--tb-size-touch-target-min);
  padding: var(--tb-space-3) var(--tb-space-6);
  font-weight: var(--tb-weight-body-semibold);
  font-size: var(--tb-text-base);
  line-height: var(--tb-leading-normal);
  border-radius: var(--tb-radius-md);
  border: 2px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primario { background: var(--tb-color-interactive-default); color: var(--tb-color-text-inverse); }
.btn--primario:hover { background: var(--tb-color-interactive-hover); }
.btn--primario:active { background: var(--tb-color-interactive-active); }

.btn--secundario {
  background: transparent;
  color: var(--tb-color-interactive-default);
  border-color: var(--tb-color-interactive-default);
}
.btn--secundario:hover { background: var(--tb-color-interactive-subtle-hover); }
.btn--secundario:active { background: var(--tb-color-surface-sunken); border-color: var(--tb-color-interactive-active); }

.btn--fantasma { background: transparent; color: var(--tb-color-interactive-default); text-decoration: underline; text-underline-offset: 4px; }
.btn--fantasma:hover { background: var(--tb-color-interactive-subtle-hover); }

/* Botões sobre fundo navy: o primário navy some no fundo. Aqui o primário
   inverte (creme com texto navy, 11.07:1) e o secundário fica de contorno
   creme. Nenhum dos dois usa terracota — botão é papel informacional. */
.sobre-escuro .btn--primario,
.card--escuro .btn--primario {
  background: var(--tb-color-text-inverse);
  color: var(--tb-color-interactive-default);
}
.sobre-escuro .btn--primario:hover,
.card--escuro .btn--primario:hover { background: var(--tb-color-surface-raised); }

.sobre-escuro .btn--secundario,
.card--escuro .btn--secundario {
  color: var(--tb-color-text-inverse);
  border-color: var(--tb-color-text-inverse);
}
.sobre-escuro .btn--secundario:hover,
.card--escuro .btn--secundario:hover { background: var(--tb-color-interactive-hover); }

.btn:disabled, .btn[aria-disabled='true'] {
  background: var(--tb-color-interactive-disabled-surface);
  color: var(--tb-color-interactive-disabled-text);
  border-color: transparent;
  cursor: not-allowed;
}

/* Links: sublinhado permanente. Cor sozinha nunca sinaliza que algo é clicável. */
.link {
  color: var(--tb-color-interactive-default);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.link:hover { color: var(--tb-color-interactive-hover); text-decoration-thickness: 2px; }

/* Link que é a chamada de um componente — e não uma palavra no meio de uma
   frase — é alvo autônomo e obedece o mínimo de 44px do público 55+.
   A lei não vale para link inline em texto corrido: esticar a altura de uma
   palavra dentro do parágrafo quebraria a entrelinha e não daria alvo maior,
   porque a linha vizinha ocupa o mesmo espaço. Essa é a mesma exceção que a
   WCAG 2.5.8 abre para link em sentença. */
.link--alvo,
.card__rodape .link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tb-size-touch-target-min);
}

/* Card — refeito.
   A versão anterior era uma caixa de borda fina com ícone solto no topo: sem
   hierarquia, o olho não sabia onde pousar. Agora tem quatro degraus fixos —
   medalhão, olho, título, texto — e a chamada ancorada no rodapé, separada por
   um filete. Cards lado a lado ficam da mesma altura, com a chamada alinhada. */
.card {
  display: flex;
  flex-direction: column;
  background: var(--tb-color-surface-raised);
  border: 1px solid var(--tb-color-border-subtle);
  border-radius: var(--tb-radius-lg);
  padding: var(--tb-space-8);
  box-shadow: var(--tb-shadow-raised);
}

/* O medalhão dá ao ícone um lugar, em vez de deixá-lo boiando no canto. */
.card__medalhao {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: var(--tb-space-16); height: var(--tb-space-16);
  border-radius: var(--tb-radius-full);
  background: var(--tb-color-surface-sunken);
  margin-bottom: var(--tb-space-5);
}
.card__titulo {
  font-family: var(--tb-font-display);
  font-weight: var(--tb-weight-display-medium);
  font-size: var(--tb-text-xl);
  line-height: var(--tb-leading-snug);
  margin: var(--tb-space-2) 0 var(--tb-space-3);
}
.card__texto { color: var(--tb-color-text-secondary); }
/* margin-top:auto empurra o rodapé para baixo — é o que iguala as alturas. */
.card__rodape {
  margin-top: auto;
  padding-top: var(--tb-space-5);
  border-top: 1px solid var(--tb-color-border-subtle);
}
.card__rodape > * + * { margin-top: var(--tb-space-2); }

/* Destaque: filete decorativo no topo. Não comunica a diferença sozinho —
   quem comunica é o olho e o título. Lei da terracota. */
.card--destaque {
  border-top: 4px solid var(--tb-color-brand-terracotta);
  border-top-left-radius: var(--tb-radius-sm);
  border-top-right-radius: var(--tb-radius-sm);
}

/* Card invertido — mesma estrutura, fundo navy da marca. */
.card--escuro {
  background: var(--tb-color-surface-inverse);
  border-color: var(--tb-color-surface-inverse);
  color: var(--tb-color-text-inverse);
}
.card--escuro .card__medalhao { background: var(--tb-color-interactive-active); }
/* Mesma razão da meia-lua: sobre navy o filete é sky, não terracota.
   A terracota padrão daria 2.40:1 e reprovaria; a clara passaria em número
   (4.60:1) mas continua sendo marrom em cima de azul. O sky dá 7.02:1. */
.card--escuro.card--destaque  { border-top-color: var(--tb-color-brand-sky); }
.card--escuro .card__texto    { color: var(--tb-color-text-inverse-secondary); }
.card--escuro .card__rodape   { border-top-color: var(--tb-color-text-inverse-secondary); }
.card--escuro .olho, .sobre-escuro .olho { color: var(--tb-color-text-inverse-secondary); }
.card--escuro .link, .sobre-escuro .link { color: var(--tb-color-text-inverse); }
.card--escuro .link:hover, .sobre-escuro .link:hover { color: var(--tb-color-brand-sky); }

/* Campos de formulário */
.campo { display: flex; flex-direction: column; gap: var(--tb-space-2); max-width: var(--tb-size-measure-max); }
.campo__rotulo { font-weight: var(--tb-weight-body-medium); font-size: var(--tb-text-base); }
.campo__ajuda { font-size: var(--tb-text-base); color: var(--tb-color-text-secondary); }
.campo__controle {
  min-height: var(--tb-size-touch-target-min);
  padding: var(--tb-space-3) var(--tb-space-4);
  background: var(--tb-color-surface-raised);
  border: 2px solid var(--tb-color-border-input);
  border-radius: var(--tb-radius-sm);
  font-size: var(--tb-text-base);
}
.campo__controle:hover { border-color: var(--tb-color-border-strong); }
.campo__controle::placeholder { color: var(--tb-color-text-secondary); }
.campo__controle:disabled {
  background: var(--tb-color-surface-sunken);
  color: var(--tb-color-text-disabled);
  border-color: var(--tb-color-border-subtle);
  cursor: not-allowed;
}
.campo--erro .campo__controle { border-color: var(--tb-color-feedback-error-border); }

/* Campo sobre fundo navy — o azul da marca como fundo do formulário.
   O campo em si escurece um degrau (interactive-active) para se ler como
   campo, e não como buraco no fundo. Borda e texto em creme. */
.campo--escuro .campo__rotulo { color: var(--tb-color-text-inverse); }
.campo--escuro .campo__ajuda  { color: var(--tb-color-text-inverse-secondary); }
.campo--escuro .campo__controle {
  background: var(--tb-color-interactive-active);
  border-color: var(--tb-color-text-inverse);
  color: var(--tb-color-text-inverse);
}
.campo--escuro .campo__controle::placeholder { color: var(--tb-color-text-inverse-secondary); }
.campo--escuro .campo__controle:hover        { border-color: var(--tb-color-brand-sky); }
.campo--escuro.campo--erro .campo__controle  { border-color: var(--tb-color-feedback-error-clara); }
.campo--escuro .campo__erro                  { color: var(--tb-color-feedback-error-clara); }

/* Anel de foco invertido: sobre navy o anel externo navy some no fundo.
   Aqui as duas camadas trocam de lugar — navy por dentro, creme por fora. */
.sobre-escuro, .card--escuro, .campo--escuro, .caixa-escura {
  --tb-shadow-focus:
    0 0 0 var(--tb-size-focus-ring-contrast-width) var(--tb-color-focus-ring),
    0 0 0 calc(var(--tb-size-focus-ring-contrast-width) + var(--tb-size-focus-ring-width))
      var(--tb-color-focus-ring-contrast);
}
.campo__erro {
  display: flex; align-items: flex-start; gap: var(--tb-space-2);
  color: var(--tb-color-feedback-error-default);
  font-weight: var(--tb-weight-body-medium);
}

/* Caixas de estado — cor + ícone + texto, nunca só cor. */
.aviso-caixa {
  display: flex; gap: var(--tb-space-3);
  padding: var(--tb-space-4) var(--tb-space-5);
  border-radius: var(--tb-radius-md);
  border-left: 4px solid;
  max-width: var(--tb-size-measure-max);
}
.aviso-caixa svg { flex: none; }
.aviso-caixa--erro    { background: var(--tb-color-feedback-error-surface);   border-color: var(--tb-color-feedback-error-border);   color: var(--tb-color-feedback-error-default); }
.aviso-caixa--sucesso { background: var(--tb-color-feedback-success-surface); border-color: var(--tb-color-feedback-success-border); color: var(--tb-color-feedback-success-default); }
.aviso-caixa--aviso   { background: var(--tb-color-feedback-warning-surface); border-color: var(--tb-color-feedback-warning-border); color: var(--tb-color-feedback-warning-default); }

/* Navegação */
.nav-marca { display: flex; align-items: center; gap: var(--tb-space-6); flex-wrap: wrap; }
.nav-marca__lista { display: flex; gap: var(--tb-space-2); flex-wrap: wrap; }
.nav-marca__link {
  display: inline-flex; align-items: center;
  min-height: var(--tb-size-touch-target-min);
  padding: var(--tb-space-2) var(--tb-space-4);
  color: var(--tb-color-text-primary);
  text-decoration: none;
  border-radius: var(--tb-radius-sm);
  border-bottom: 2px solid transparent;
}
.nav-marca__link:hover { background: var(--tb-color-interactive-subtle-hover); }
/* Item ativo: sublinhado E peso. Nunca só a cor. */
.nav-marca__link[aria-current='page'] {
  font-weight: var(--tb-weight-body-semibold);
  border-bottom-color: var(--tb-color-brand-terracotta);
}

/* ---------- Ícones da marca ---------- */

/*
 * O conjunto da marca é construído com círculo e meia-lua, em forma cheia —
 * não há stroke em nenhum deles. Só os ícones de estado (ui-*) usam traço, e
 * são de sistema, não da marca.
 *
 * <use> monta o conteúdo num shadow DOM: seletores de classe do documento NÃO
 * atravessam essa fronteira. O que atravessa é herança. Por isso o estilo dos
 * ícones viaja por currentColor e por --meia-lua-cor, definidas aqui a partir
 * dos tokens e lidas lá dentro pelos atributos do SVG.
 */
.icone {
  width: var(--tb-size-icon-min);        /* 28px — mínimo de renderização */
  height: var(--tb-size-icon-min);
  color: var(--tb-color-text-primary);   /* navy sobre fundo claro */
}
/* Em fundo escuro o traço vira creme e a meia-lua vira SKY, não terracota.
   Marrom encostado em azul-marinho é uma combinação suja: os dois são escuros
   e quentes/frios brigando, e a meia-lua sumia em vez de assinar. O sky é a
   cor da meia-lua de cima da própria logo e tem 7.02:1 sobre o navy — é a
   leitura mais limpa e a mais fiel à marca. A terracota fica sendo a
   assinatura sobre fundo claro; o sky, a assinatura sobre fundo escuro. */
.sobre-escuro { --meia-lua-cor: var(--tb-color-brand-sky); }
.sobre-escuro .icone { color: var(--tb-color-text-inverse); }
/* Sem compensação óptica: o conjunto da marca não tem traço, tem forma, e
   forma cheia aguenta redução sem engrossar nada. */
.icone--min { width: var(--tb-size-icon-min); height: var(--tb-size-icon-min); }
.icone--m   { width: var(--tb-space-12); height: var(--tb-space-12); }
.icone--g   { width: var(--tb-space-16); height: var(--tb-space-16); }


/* ---------- Texto sobre imagem ---------- */

/*
 * LEI ESTRUTURAL: texto sobre foto SEMPRE com camada de escurecimento.
 * A camada não é estética, é o que segura o contraste — uma foto pode ter
 * qualquer luminosidade, inclusive branco estourado, e o texto continua
 * tendo que atingir o alvo do projeto.
 *
 * O valor de 80% foi calculado para o PIOR caso (foto branca): nele o creme
 * em cima atinge 7.28:1, AAA. Numa foto média de estúdio 67% bastaria; os
 * 80% existem para a regra valer sem ninguém precisar medir a foto.
 *
 * Navy escurecido e não preto: preto puro suja o creme e derruba o clima
 * quente da marca, pela mesma razão que as sombras são tingidas de navy.
 */
.sobre-foto {
  position: relative;
  isolation: isolate;
  color: var(--tb-color-text-inverse);
  background-size: cover;
  background-position: center;
  border-radius: var(--tb-radius-lg);
  overflow: hidden;
}
/* z-index 0 e nao -1: com -1 a camada vai para TRAS do proprio background
   do elemento e some. Ela precisa ficar entre o background e o conteudo. */
.sobre-foto::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: var(--tb-color-overlay-sobre-foto);
}
.sobre-foto > * { position: relative; z-index: 1; }
.sobre-foto p { color: var(--tb-color-text-inverse-secondary); }

/* Só para texto grande sobre foto comprovadamente escura. Na dúvida, não use. */
.sobre-foto--leve::before { background: var(--tb-color-overlay-sobre-foto-parcial); }

/* Sem camada é proibido. Esta classe existe só para o styleguide demonstrar
   o erro; não usar em peça real. */
.sobre-foto--sem-camada::before { background: none; }

/* ---------- Grade de colunas ---------- */

/* Doze colunas: divide inteiro por 2, 3, 4 e 6. Colapsa para 4 e depois 2 —
   coluna de 40px não serve para nada, e empilhar cedo é melhor que espremer. */
.grade-sistema {
  display: grid;
  gap: var(--tb-space-6);
  grid-template-columns: repeat(2, 1fr);
  max-width: 75rem;                /* 1200px */
  margin-inline: auto;
  padding-inline: var(--tb-space-6);
}
@media (min-width: 768px)  { .grade-sistema { grid-template-columns: repeat(4, 1fr); padding-inline: var(--tb-space-12); } }
@media (min-width: 1024px) { .grade-sistema { grid-template-columns: repeat(12, 1fr); } }

.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }
@media (max-width: 1023px) { .col-6, .col-8, .col-12 { grid-column: 1 / -1; } .col-3, .col-4 { grid-column: span 2; } }
@media (max-width: 767px)  { [class*="col-"] { grid-column: 1 / -1; } }

.grade-demo > * {
  background: var(--tb-color-surface-sunken);
  border-radius: var(--tb-radius-sm);
  padding: var(--tb-space-3);
  font-family: ui-monospace, monospace;
  font-size: var(--tb-text-micro);
  text-align: center;
}

/* ---------- Formulário: os controles que faltavam ---------- */

/* select, checkbox, radio e textarea seguem o mesmo contrato do campo de
   texto: 44px de alvo, borda de 2px, anel de foco duplo, rótulo visível. */
.campo__controle textarea,
textarea.campo__controle { min-height: calc(var(--tb-size-touch-target-min) * 2.5); resize: vertical; }

select.campo__controle {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tb-color-text-primary) 50%),
                    linear-gradient(135deg, var(--tb-color-text-primary) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--tb-space-12);
  cursor: pointer;
}
.campo--escuro select.campo__controle {
  background-image: linear-gradient(45deg, transparent 50%, var(--tb-color-text-inverse) 50%),
                    linear-gradient(135deg, var(--tb-color-text-inverse) 50%, transparent 50%);
}

/* Checkbox e radio: a caixa nativa tem ~13px e é alvo pequeno demais.
   O rótulo inteiro vira o alvo, com 44px de altura mínima. */
.opcao {
  display: flex; align-items: flex-start; gap: var(--tb-space-3);
  min-height: var(--tb-size-touch-target-min);
  padding: var(--tb-space-2) 0;
  cursor: pointer;
  max-width: var(--tb-size-measure-max);
}
.opcao input {
  appearance: none;
  flex: none;
  width: var(--tb-space-6); height: var(--tb-space-6);
  margin-top: 2px;
  border: 2px solid var(--tb-color-border-input);
  background: var(--tb-color-surface-raised);
  cursor: pointer;
}
.opcao input[type="checkbox"] { border-radius: var(--tb-radius-sm); }
.opcao input[type="radio"]    { border-radius: var(--tb-radius-full); }
.opcao:hover input { border-color: var(--tb-color-border-strong); }

.opcao input:checked { background: var(--tb-color-interactive-default); border-color: var(--tb-color-interactive-default); }
/* A marca é desenhada com gradiente para não depender de fonte de ícone. */
.opcao input[type="checkbox"]:checked {
  background-image: linear-gradient(45deg, transparent 44%, var(--tb-color-text-inverse) 44%, var(--tb-color-text-inverse) 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 44%, var(--tb-color-text-inverse) 44%, var(--tb-color-text-inverse) 56%, transparent 56%);
  background-size: 60% 60%, 60% 60%;
  background-position: 30% 60%, 62% 60%;
  background-repeat: no-repeat;
}
.opcao input[type="radio"]:checked {
  background-image: radial-gradient(circle, var(--tb-color-text-inverse) 34%, transparent 36%);
}
.opcao input:disabled { background: var(--tb-color-surface-sunken); border-color: var(--tb-color-border-subtle); cursor: not-allowed; }
.opcao:has(input:disabled) { color: var(--tb-color-text-disabled); cursor: not-allowed; }

.campo--escuro .opcao input { background: var(--tb-color-interactive-active); border-color: var(--tb-color-text-inverse); }
.campo--escuro .opcao input:checked { background-color: var(--tb-color-text-inverse); border-color: var(--tb-color-text-inverse); }
.campo--escuro .opcao input[type="checkbox"]:checked {
  background-image: linear-gradient(45deg, transparent 44%, var(--tb-color-interactive-default) 44%, var(--tb-color-interactive-default) 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 44%, var(--tb-color-interactive-default) 44%, var(--tb-color-interactive-default) 56%, transparent 56%);
}
.campo--escuro .opcao input[type="radio"]:checked {
  background-image: radial-gradient(circle, var(--tb-color-interactive-default) 34%, transparent 36%);
}

.grupo-opcoes { border: none; padding: 0; margin: 0; }
.grupo-opcoes legend { font-weight: var(--tb-weight-body-medium); margin-bottom: var(--tb-space-2); padding: 0; }

/* ---------- Microlinha de chamada ---------- */

/* A linha de condição que anda colada no botão: "Gratuita, com hora marcada."
   Ela é ressalva, não instrução — por isso vem em texto secundário e menor.
   Fica DENTRO do mesmo bloco do botão para nunca se separar dele numa
   quebra de coluna. */
.chamada { display: inline-flex; flex-direction: column; gap: var(--tb-space-2); align-items: flex-start; }
.chamada__nota {
  font-size: var(--tb-text-micro);
  color: var(--tb-color-text-secondary);
  max-width: 26rem;
}
.sobre-escuro .chamada__nota,
.card--escuro .chamada__nota { color: var(--tb-color-text-inverse-secondary); }

/* ---------- Depoimento ---------- */

/* Aspa em Fraunces, porque é fala de gente e não texto de sistema. A
   assinatura é separada por peso e cor, não por aspas ou itálico: itálico
   aqui brigaria com a lei da voz, que reserva o itálico para título. */
.depoimento {
  border-left: 3px solid var(--tb-color-brand-terracotta);
  padding-left: var(--tb-space-6);
  max-width: var(--tb-size-measure-max);
  margin: 0;
}
.depoimento__fala {
  font-family: var(--tb-font-display);
  font-weight: var(--tb-weight-display-regular);
  font-size: var(--tb-text-lg);
  line-height: var(--tb-leading-snug);
  margin: 0;
}
.depoimento__assinatura {
  display: block;
  margin-top: var(--tb-space-3);
  font-size: var(--tb-text-micro);
  color: var(--tb-color-text-secondary);
  font-style: normal;
}
.depoimento__assinatura strong { color: var(--tb-color-text-primary); font-weight: var(--tb-weight-body-semibold); }
.sobre-escuro .depoimento { border-left-color: var(--tb-color-brand-sky); }
.sobre-escuro .depoimento__assinatura { color: var(--tb-color-text-inverse-secondary); }
.sobre-escuro .depoimento__assinatura strong { color: var(--tb-color-text-inverse); }

/* ---------- Prova social ---------- */

/* Números separados por ponto médio.
   O separador é ::after do dado ANTERIOR, não ::before do seguinte: como
   ::before, quando o segundo dado quebrava para a linha de baixo o ponto
   ia junto e abria a linha nova com um ponto solto. Como ::after ele fica
   colado no fim do texto anterior e nunca inicia linha.
   Layout inline e não flex, pelo mesmo motivo: flex trata cada dado como
   bloco e força a quebra inteira. */
.prova {
  max-width: var(--tb-size-measure-max);
  line-height: var(--tb-leading-relaxed);
}
.prova__dado { font-size: var(--tb-text-base); }
.prova__dado strong { font-weight: var(--tb-weight-body-semibold); }
.prova__dado:not(:last-child)::after {
  content: " · ";
  color: var(--tb-color-brand-terracotta);
  font-weight: var(--tb-weight-body-semibold);
}
/* Em tela estreita cada dado vira uma linha e o separador some por completo. */
@media (max-width: 560px) {
  .prova__dado { display: block; }
  .prova__dado + .prova__dado { margin-top: var(--tb-space-2); }
  .prova__dado:not(:last-child)::after { content: none; }
}
.sobre-escuro .prova__dado:not(:last-child)::after { color: var(--tb-color-brand-sky); }