/* ============================================================================
   TOUCHPEACE — Camada de marca
   Implementa a identidade do MANUAL DE IDENTIDADE VISUAL TOUCHPEACE sobre os
   tokens do design system. Compartilhada por todas as páginas.

   Elementos de assinatura reproduzidos do manual:
   · régua-espectro no topo da página        (.tp-rule)
   · marca = anel de 12 pontos + wordmark    (.tp-logo)
   · fileira de 12 pontos                    (.tp-dots)
   · títulos BOLD / CAIXA ALTA / condensados (.tp-h1 … .tp-h3)
   · faixas de gradiente por público         (.tp-band--usuario / --conselheiro)
   ========================================================================== */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-condensed);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }

a { color: var(--text-link); }
:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 2px;
}

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

/* --------------------------------------------------------------- layout -- */
.tp-wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 32px;
}
.tp-wrap--narrow { max-width: 760px; }

.tp-section { padding-block: clamp(64px, 9vw, 116px); }
.tp-section--muted { background: var(--surface-muted); }

/* ================================================================
   RÉGUA-ESPECTRO — assinatura de página do manual
   ============================================================== */
.tp-rule {
  height: var(--rule-espectro);
  background: var(--grad-espectro);
}
.tp-rule--fixed {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
}

/* Régua curta, usada acima de rótulos de seção */
.tp-rule--short {
  width: 56px;
  height: 2px;
  border-radius: 2px;
}

/* ================================================================
   MARCA — lockup horizontal e vertical
   Proporções medidas no manual, com D = diâmetro do anel:
     respiro anel→texto  0.16 D
     TOUCHPEACE          font-size 0.401 D  (largura resultante 2.318 D)
     GLOBAL MISSION      font-size 0.203 D  (largura alvo      1.779 D)
   ============================================================== */
.tp-logo {
  --d: 42px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--d) * 0.16);
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}
.tp-logo__mark {
  width: var(--d);
  height: var(--d);
  flex-shrink: 0;
}
.tp-logo__text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--d) * 0.055);
  /* compensação óptica: o bloco de texto assenta levemente acima do centro */
  margin-top: calc(var(--d) * -0.015);
}
.tp-logo__word {
  font-size: calc(var(--d) * 0.401);
  line-height: 0.84;
  /* O Roboto Condensed atual do Google Fonts é ~3,7% mais estreito que o
     estático usado no manual; a entreletra recompõe a largura de 2.318 D. */
  letter-spacing: 0.021em;
  color: var(--tp-wordmark);
  white-space: nowrap;
}
.tp-logo__word b { font-weight: var(--fw-bold); }   /* TOUCH  */
.tp-logo__word i { font-weight: var(--fw-regular); font-style: normal; } /* PEACE */

.tp-logo__signature {
  font-size: calc(var(--d) * 0.203);
  font-weight: var(--fw-regular);
  letter-spacing: 0.128em;   /* calibrada para a largura de 1.779 D do manual */
  color: var(--tp-wordmark);
  white-space: nowrap;
  padding-left: calc(var(--d) * 0.067);
}

/* Aplicação NEGATIVA — obrigatória sobre fundo >50% preto ou colorido */
.tp-logo--negativa .tp-logo__word,
.tp-logo--negativa .tp-logo__signature { color: #fff; }
.tp-logo--negativa .tp-logo__mark circle { fill: #fff; }

/* Versão vertical */
.tp-logo--vertical {
  flex-direction: column;
  gap: calc(var(--d) * 0.22);
}
.tp-logo--vertical .tp-logo__text { align-items: center; margin-top: 0; }
.tp-logo--vertical .tp-logo__signature { padding-left: 0; }

/* ================================================================
   FILEIRA DE PONTOS — elemento da capa do manual
   ============================================================== */
.tp-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.tp-dots li {
  width: 11px;
  height: 11px;
  border-radius: 999px;
}
.tp-dots li:nth-child(1)  { background: var(--tp-teal); }
.tp-dots li:nth-child(2)  { background: var(--tp-cyan); }
.tp-dots li:nth-child(3)  { background: var(--tp-light-blue); }
.tp-dots li:nth-child(4)  { background: var(--tp-blue); }
.tp-dots li:nth-child(5)  { background: var(--tp-indigo); }
.tp-dots li:nth-child(6)  { background: var(--tp-purple); }
.tp-dots li:nth-child(7)  { background: var(--tp-pink); }
.tp-dots li:nth-child(8)  { background: var(--tp-red); }
.tp-dots li:nth-child(9)  { background: var(--tp-deep-orange); }
.tp-dots li:nth-child(10) { background: var(--tp-orange); }
.tp-dots li:nth-child(11) { background: var(--tp-amber); }
.tp-dots li:nth-child(12) { background: var(--tp-yellow); }
.tp-dots--center { justify-content: center; }
/* Sobre faixa colorida a fileira vira negativa, como a marca */
.tp-dots--on-brand li:nth-child(n) { background: rgba(255, 255, 255, 0.92); }

/* ================================================================
   TIPOGRAFIA — títulos do manual: BOLD, CAIXA ALTA, condensados
   ============================================================== */
.tp-overline {
  display: block;
  font-size: var(--t-overline);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.tp-overline--on-brand { color: rgba(255, 255, 255, 0.85); }

.tp-label {           /* rótulo com régua curta acima, como no manual */
  margin-bottom: 20px;
}
.tp-label .tp-rule--short { margin-bottom: 14px; }
.tp-label .tp-overline { margin-bottom: 0; }
.tp-label--center { display: flex; flex-direction: column; align-items: center; }

.tp-h1, .tp-h2, .tp-h3 {
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--text-heading);
}
.tp-h1 { font-size: clamp(40px, 8vw, 78px); line-height: var(--lh-display); }
.tp-h2 { font-size: clamp(30px, 5vw, 48px); line-height: var(--lh-h2); }
.tp-h3 { font-size: clamp(21px, 2.6vw, 27px); line-height: var(--lh-h3); }
.tp-h1--on-brand, .tp-h2--on-brand, .tp-h3--on-brand { color: #fff; }

/* Realces dentro dos títulos — sempre dentro do espectro da marca */
.tp-h1 em, .tp-h2 em, .tp-h3 em { font-style: normal; }
.tp-tint-cyan   { color: var(--tp-cyan); }
.tp-tint-teal   { color: var(--tp-teal); }
.tp-tint-blue   { color: var(--tp-light-blue); }
.tp-tint-indigo { color: var(--tp-indigo); }
.tp-tint-red    { color: var(--tp-red); }
.tp-tint-orange { color: var(--tp-orange); }
.tp-tint-amber  { color: var(--tp-amber); }

.tp-lead {
  font-size: clamp(18px, 2.1vw, var(--t-lead));
  line-height: var(--lh-lead);
  font-weight: var(--fw-light);
  color: var(--text-body);
  max-width: 62ch;
}
.tp-lead--on-brand { color: rgba(255, 255, 255, 0.92); }
.tp-body { font-size: var(--t-body); line-height: var(--lh-body); font-weight: var(--fw-light); }
.tp-body strong, strong { font-weight: var(--fw-bold); color: var(--text-strong); }
.tp-lead--on-brand strong, .tp-body--on-brand strong { color: #fff; }

/* ================================================================
   BOTÕES — pílula (eco do vocabulário circular da marca)
   ============================================================== */
.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 15px 34px;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-soft),
              color var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft);
}
.tp-btn:active { transform: translateY(1px); }
.tp-btn--sm { font-size: 14px; padding: 10px 22px; }
.tp-btn--lg { font-size: 17px; padding: 18px 42px; }
.tp-btn--block { display: flex; width: 100%; }

/* Quente institucional (#F44336) — ação principal */
.tp-btn--warm {
  background: var(--tp-red-deep);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.tp-btn--warm:hover { background: #C62828; box-shadow: 0 10px 26px rgba(244, 67, 54, 0.34); }

/* Frio institucional (#00BCD4) — ação do público usuário */
.tp-btn--cold {
  background: var(--tp-cyan-deep);   /* #00BCD4 puro dá 2,30:1 com texto branco */
  color: #fff;
  box-shadow: var(--shadow-cta-cold);
}
.tp-btn--cold:hover { background: #016576; }

/* Sobre faixa de gradiente: pílula branca sólida */
.tp-btn--on-brand { background: #fff; color: var(--tp-black); }
.tp-btn--on-brand:hover { background: rgba(255, 255, 255, 0.88); }

/* Contorno */
.tp-btn--ghost { background: transparent; color: var(--text-heading); border-color: var(--border-strong); }
.tp-btn--ghost:hover { border-color: var(--tp-cyan-deep); color: var(--tp-cyan-deep); }
.tp-btn--ghost-on-brand { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.tp-btn--ghost-on-brand:hover { background: rgba(255,255,255,0.14); border-color: #fff; }

/* ================================================================
   FAIXAS DE GRADIENTE POR PÚBLICO
   "A aplicação deve ser feita no fundo com a marca negativa sobreposta."
   ============================================================== */
/* Faixas na orientação do manual (90deg, como nas pranchas CONSELHEIRO/USUÁRIO) */
.tp-band { position: relative; overflow: hidden; color: #fff; }
.tp-band--usuario { background: var(--grad-usuario); }
.tp-band--conselheiro { background: var(--grad-conselheiro); }
.tp-band--dark { background: var(--surface-dark); }

/* Véu de legibilidade.
   O manual manda aplicar marca e texto em NEGATIVO sobre estes espectros, mas
   branco puro sobre #03A9F4 dá 2,63:1 e sobre #FF9800, 2,16:1 — reprova em
   WCAG AA (4,5:1 para texto corrido). O véu é o mínimo necessário, e nenhuma
   cor da marca é trocada: o espectro e a transição seguem íntegros.

   FRIO  0.32 → cobre a faixa inteira (o conteúdo ocupa toda a largura).
                Pior ponto #03A9F4 = 4,59:1.
   QUENTE 0.21 → o conteúdo é limitado à metade púrpura→vermelha (.tp-band__half),
                deixando o laranja livre e vibrante. Pior ponto = 4,58:1. */
.tp-band--usuario::after,
.tp-band--conselheiro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #231F20;
}
.tp-band--usuario::after { opacity: 0.32; }
.tp-band--conselheiro::after { opacity: 0.21; }

/* Coluna de conteúdo da faixa quente: só até ~58% da largura da faixa. */
.tp-band__half { max-width: 60%; }
@media (max-width: 900px) {
  /* Empilhado, o conteúdo atravessa o espectro inteiro — o véu volta ao valor
     que cobre também o extremo laranja. */
  .tp-band__half { max-width: none; }
  .tp-band--conselheiro::after { opacity: 0.42; }
}

/* Marca d'água: anel de pontos gigante, muito discreto */
.tp-band__ring {
  position: absolute;
  pointer-events: none;
  opacity: 0.13;
  width: min(460px, 38vw);
  aspect-ratio: 1;
  right: -13%;
  top: 50%;
  transform: translateY(-50%);
}
.tp-band__ring circle { fill: #fff; }

.tp-band > .tp-wrap { position: relative; z-index: 2; }

/* Ícone de público (pomba / pessoas), como no manual */
.tp-audience {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
}
.tp-audience svg { width: 38px; height: 38px; }
.tp-audience span {
  font-size: 12px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ================================================================
   CARDS / SUPERFÍCIES
   ============================================================== */
.tp-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 34px;
}
/* Régua-espectro no topo do card (pseudo-elemento: border-image pintaria os 4 lados) */
.tp-card--rule { position: relative; padding-top: 37px; }
.tp-card--rule::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  background: var(--grad-espectro);
}

/* ================================================================
   FORMULÁRIO
   ============================================================== */
.tp-field { display: flex; flex-direction: column; gap: 7px; }
.tp-field__label {
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tp-field input {
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--fw-light);
  color: var(--text-strong);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  width: 100%;
  transition: border-color var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft);
}
.tp-field input::placeholder { color: #A7A9AA; }
.tp-field input:hover { border-color: #B9BABB; }
.tp-field input:focus {
  outline: none;
  border-color: var(--tp-cyan-deep);
  box-shadow: 0 0 0 3px rgba(1, 122, 145, 0.22);
}
.tp-field input:user-invalid { border-color: var(--tp-red); }

.tp-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  cursor: pointer;
}
.tp-consent input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--tp-cyan-deep);
}

/* ================================================================
   LISTA DE ATRIBUTOS — marcador é um ponto do espectro
   ============================================================== */
.tp-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.tp-checks li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: var(--fw-light);
  color: var(--text-body);
}
.tp-checks li::before {
  content: "";
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  margin-top: 7px;
  background: var(--tp-cyan);
}
.tp-checks--cold li:nth-child(1)::before { background: var(--tp-teal); }
.tp-checks--cold li:nth-child(2)::before { background: var(--tp-cyan); }
.tp-checks--cold li:nth-child(3)::before { background: var(--tp-light-blue); }
.tp-checks--cold li:nth-child(4)::before { background: var(--tp-indigo); }
.tp-checks--warm li:nth-child(1)::before { background: var(--tp-purple); }
.tp-checks--warm li:nth-child(2)::before { background: var(--tp-pink); }
.tp-checks--warm li:nth-child(3)::before { background: var(--tp-red); }
.tp-checks--warm li:nth-child(4)::before { background: var(--tp-orange); }
.tp-checks--on-brand li { color: rgba(255, 255, 255, 0.92); }
.tp-checks--on-brand li::before { background: #fff !important; }

/* ================================================================
   NOTA RESPONSÁVEL
   ============================================================== */
.tp-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}
.tp-note__i {
  flex-shrink: 0;
  width: 19px; height: 19px;
  margin-top: 2px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: var(--fw-bold);
}
.tp-note--on-dark { color: rgba(255, 255, 255, 0.7); }
.tp-note--on-dark .tp-note__i { border-color: rgba(255, 255, 255, 0.4); }

/* ================================================================
   CABEÇALHO / RODAPÉ
   ============================================================== */
.tp-header {
  position: sticky;
  top: var(--rule-espectro);
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.tp-header__in {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 32px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.tp-header__nav { display: flex; align-items: center; gap: 26px; }
.tp-header__link {
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-heading);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-soft);
}
.tp-header__link:hover { color: var(--tp-cyan-deep); }

.tp-footer { background: var(--surface-dark); color: rgba(255, 255, 255, 0.72); }
.tp-footer a { color: #fff; }

/* Co-branding do cabeçalho: marca TouchPeace + logo do Grupo Bolsa Mais Brasil */
.tp-cobrand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.tp-cobrand__sep { width: 1px; height: 38px; background: var(--border-strong); flex-shrink: 0; }
.tp-cobrand__gbmb { display: flex; flex-shrink: 0; }
.tp-cobrand__gbmb img { height: 38px; width: auto; }

/* Dropdown "Mais informações" — <details> nativo (funciona sem JS; o script
   só acrescenta fechar-ao-clicar-fora/Esc/apos-navegar). */
.tp-menu { position: relative; }
.tp-menu__btn {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-heading);
  padding: 10px 2px;
  transition: color var(--dur-base) var(--ease-soft);
}
.tp-menu__btn::-webkit-details-marker { display: none; }
.tp-menu__btn:hover { color: var(--tp-cyan-deep); }
.tp-menu__caret { width: 11px; height: 8px; flex-shrink: 0; transition: transform var(--dur-base) var(--ease-soft); }
.tp-menu[open] .tp-menu__caret { transform: rotate(180deg); }
.tp-menu__txt--short { display: none; }
.tp-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 236px;
  margin: 0;
  padding: 10px 0 8px;
  list-style: none;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
/* Filete-espectro no topo do painel, como no .tp-card--rule */
.tp-menu__list::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  background: var(--grad-espectro);
}
.tp-menu__list a {
  display: block;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-heading);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-soft), background var(--dur-base) var(--ease-soft);
}
.tp-menu__list a:hover { color: var(--tp-cyan-deep); background: var(--surface-muted); }

/* Mini-selos com ícone circular (hero, quem-somos, formulário) */
.tp-seals { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.tp-seal { display: flex; align-items: center; gap: 11px; font-size: 14px; line-height: 1.35; color: var(--text-muted); }
.tp-seal__ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1.5px solid var(--tp-cyan-deep);
  color: var(--tp-cyan-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tp-seal__ico svg { width: 18px; height: 18px; }
.tp-seal b { display: block; font-weight: var(--fw-bold); color: var(--text-strong); }
.tp-seals--on-brand .tp-seal { color: rgba(255, 255, 255, 0.85); }
.tp-seals--on-brand .tp-seal__ico { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.tp-seals--on-brand .tp-seal b { color: #fff; }

/* Badges de loja de aplicativo (neutras — TODO trocar por badges oficiais
   quando existirem as URLs reais das lojas) */
.tp-stores { display: flex; flex-wrap: wrap; gap: 12px; }
.tp-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--tp-black);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  padding: 8px 16px 8px 12px;
  line-height: 1.15;
  transition: background var(--dur-base) var(--ease-soft);
}
.tp-store:hover { background: #3B3637; }
.tp-store svg { width: 21px; height: 21px; flex-shrink: 0; }
.tp-store span { display: flex; flex-direction: column; }
.tp-store small { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.tp-store b { font-size: 15px; font-weight: var(--fw-bold); }

/* Rodapé em 2 andares: Grupo Bolsa Mais Brasil em cima, TouchPeace embaixo */
.tp-footer__tier--gbmb { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.tp-footer__gbmb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
  padding-block: 38px;
}
.tp-footer__gbmb img { height: 46px; width: auto; }
.tp-footer__channels { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.tp-footer__channel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-soft);
}
.tp-footer__channel svg { width: 18px; height: 18px; flex-shrink: 0; }
.tp-footer__channel:hover { color: #fff; }
.tp-footer__in { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: center; padding-block: 44px 0; }
.tp-footer__links { display: flex; gap: 24px; flex-wrap: wrap; }
.tp-footer__links a {
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
.tp-footer__links a:hover { color: #fff; }
/* Redes e contato sobem para junto da marca, sem filete entre os dois
   (pedido do cliente, 10/09/2026). */
.tp-footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  padding-block: 24px 40px;
}
.tp-footer__social-label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.tp-social { display: inline-flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.tp-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  transition: border-color var(--dur-base) var(--ease-soft), background var(--dur-base) var(--ease-soft);
}
.tp-social a:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.tp-social svg { width: 15px; height: 15px; }
.tp-footer__contact {
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.tp-footer__contact a { color: #fff; text-decoration: none; }
.tp-footer__contact a:hover { text-decoration: underline; }
.tp-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-block: 24px; }
.tp-footer__bottom-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.tp-footer__legal { margin: 0; font-size: 13px; line-height: 1.6; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.6); }
.tp-footer__legal span { white-space: nowrap; } /* o CNPJ não quebra no hífen */

/* Âncoras internas param abaixo do cabeçalho sticky */
#topo, #quem, #como-funciona, #comecar, #formulario, #faq { scroll-margin-top: 96px; }

/* ================================================================
   REVEAL
   ============================================================== */
.tp-js .tp-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .tp-js .tp-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s var(--ease-soft), transform 0.6s var(--ease-soft);
  }
  .tp-js .tp-reveal.is-visible { opacity: 1; transform: none; }
  .tp-js .tp-reveal[data-delay="1"] { transition-delay: 0.08s; }
  .tp-js .tp-reveal[data-delay="2"] { transition-delay: 0.16s; }
  .tp-js .tp-reveal[data-delay="3"] { transition-delay: 0.24s; }
  .tp-js .tp-reveal[data-delay="4"] { transition-delay: 0.32s; }
}

/* ================================================================
   RESPONSIVO
   ============================================================== */
/* Com as 3 logos (TouchPeace, GBMB e Acolhe, 469px com --d 42px), o rótulo
   longo "Mais informações" só cabe na linha a partir de ~940px; abaixo disso o
   CTA cobriria a logo. */
@media (max-width: 960px) {
  .tp-menu__txt--full { display: none; }
  .tp-menu__txt--short { display: inline; }
}
/* Mesmo com "Menu", as 3 logos em tamanho cheio + CTA pedem ~840px. De 741 a
   860px o cabeçalho usa as medidas do tablet (logos com 31px, 379px no total). */
@media (max-width: 860px) {
  .tp-header__in { padding-inline: 22px; height: 68px; }
  .tp-header__nav { gap: 16px; }
  .tp-logo { --d: 34px; }   /* o do rodapé fixa --d inline e não muda */
  .tp-cobrand { gap: 14px; }
  .tp-cobrand__sep, .tp-cobrand__gbmb img { height: 31px; }
}
@media (max-width: 720px) {
  .tp-wrap { padding-inline: 22px; }
  .tp-header__in { padding-inline: 22px; height: 68px; }
  .tp-header__nav { gap: 16px; }
  .tp-card { padding: 26px 22px; }
  .tp-logo { --d: 34px; }
  /* O co-branding fica em todas as larguras, em escala com a marca: a GBMB
     mantém a proporção do desktop (38px de altura para --d 42px) e o
     separador acompanha a altura dela. */
  .tp-cobrand { gap: 14px; }
  .tp-cobrand__sep, .tp-cobrand__gbmb img { height: 31px; }
  .tp-footer__gbmb { padding-block: 30px; }
  .tp-footer__gbmb img { height: 40px; }
  /* Links do rodapé com área de toque de pelo menos 32px de altura */
  .tp-footer__links { gap: 4px 24px; }
  .tp-footer__links a { display: inline-block; padding-block: 9px; }
  .tp-footer__contact a { display: inline-block; padding-block: 6px; }
  /* Telefone, e-mail do Grupo e ícones das redes com alvo de toque de 44px
     (tinham 25px e 34px). O padding dos canais já faz o respiro entre eles. */
  .tp-footer__gbmb { padding-block: 30px 21px; row-gap: 16px; }
  .tp-footer__channels { row-gap: 0; }
  .tp-footer__channel { padding-block: 9px; }
  .tp-social { gap: 12px; }
  .tp-social a { width: 44px; height: 44px; }
  .tp-social svg { width: 17px; height: 17px; }
  /* Sem espaço para rótulo + ícones numa linha, os ícones descem juntos
     (em 320px o rótulo quebrava em "NOSSAS REDES / SOCIAIS") */
  .tp-footer__social-label { flex-wrap: wrap; row-gap: 12px; }
  .tp-footer__social-label > span { white-space: nowrap; }
  /* Andar TouchPeace no mesmo ritmo do andar do Grupo */
  .tp-footer__in { padding-top: 32px; row-gap: 20px; }
  .tp-footer__social { padding-block: 22px 32px; row-gap: 18px; }
}
/* Até 480px os 4 links do rodapé não cabem numa linha e sobrava um sozinho
   embaixo: viram 2 colunas. */
@media (max-width: 480px) {
  .tp-footer__links { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 40px; row-gap: 0; }
}
/* Numa linha só, as 3 logos + CTA + "Menu" somam ~700px (com --d 34px): até
   740px o cabeçalho passa a 2 linhas, com folga para a diferença de fonte
   entre navegadores. (Antes da logo Acolhe, com 2 logos, isso era 600px.) */
@media (max-width: 740px) {
  /* Cabeçalho em 2 linhas: marca em cima, CTA + menu embaixo */
  .tp-header__in { flex-wrap: wrap; height: auto; padding-block: 12px; row-gap: 10px; }
  .tp-header__nav { width: 100%; justify-content: space-between; gap: 10px; }
  /* Cabeçalho de 2 linhas: 116px com --d 34px (106px com --d 30px) + a régua
     de 3px. A âncora para ~15px abaixo dele, como no desktop. */
  #topo, #quem, #como-funciona, #comecar, #formulario, #faq { scroll-margin-top: 134px; }
}
@media (max-width: 460px) {
  .tp-logo { --d: 30px; }
  .tp-cobrand { gap: 12px; }
  .tp-cobrand__sep, .tp-cobrand__gbmb img { height: 27px; }
  .tp-btn { padding: 14px 24px; font-size: 15px; }
  .tp-btn--lg { padding: 16px 28px; font-size: 16px; }
  .tp-btn--sm { padding: 10px 16px; font-size: 13px; letter-spacing: 0.04em; }
  /* Rótulos longos ("Fale com um Conselheiro da Paz", "Iniciar minha sessão
     gratuitamente") estouravam a coluna em 320–375px com nowrap. Em tela
     estreita o rótulo quebra em 2 linhas, centralizado. */
  .tp-btn { white-space: normal; text-align: center; line-height: 1.25; text-wrap: balance; max-width: 100%; }
  .tp-btn--sm { white-space: nowrap; }
}
/* Abaixo de ~375px as 3 logos a 27px (331px) passam da borda: a altura
   delas (--hl) acompanha a largura da tela. A fileira mede ~12,2 × --hl
   (TouchPeace 3,86 + GBMB 2,86 + Acolhe 3,69 + 4 vãos de 0,44), mais os
   2 separadores de 1px; sobra o respiro lateral de 22px de cada lado. */
@media (max-width: 400px) {
  .tp-cobrand { --hl: min(27px, calc((100vw - 48px) / 12.3)); gap: calc(var(--hl) * 0.44); }
  .tp-header .tp-logo { --d: calc(var(--hl) * 1.11); }
  .tp-cobrand__sep, .tp-cobrand__gbmb img { height: var(--hl); }
}
@media (max-width: 400px) {
  /* Menos respiro lateral: "Começar agora, sem custo" volta a caber numa linha */
  .tp-btn:not(.tp-btn--sm) { padding-inline: 18px; letter-spacing: 0.04em; }
}