/* =========================================================
   Camila Torres Ribeiro - Psicóloga Clínica
   Sistema visual.

   Paleta derivada de uma decisão, não do off-white morno
   padrão: papel com pigmento real, verde-tinta como âncora
   estrutural (não só rodapé) e argila queimada como única
   cor de ação. Todos os pares de texto verificados em AA.
   ========================================================= */

:root {
  /* --- cor ---
     Três famílias: papel quente, verde-sálvia e argila queimada.
     Superfícies escuras são verde profundo, não quase-preto:
     mais quentes na tela e menos duras contra o papel. */
  --ink:          #1F332C;
  --ink-2:        #2A423A;

  /* Papel em três temperaturas, todas quentes. Uma quarta
     superfície esverdeada foi testada e removida: ao lado do
     creme ela lia como cinza-azulado e quebrava a temperatura
     da página. O verde da marca vive nas tags e nas superfícies
     escuras, onde é intencional. */
  --paper:        #F3EEE4;
  --paper-2:      #EAE2D4;
  --paper-3:      #FCFAF5;

  --clay:         #96522C;
  --clay-forte:   #7A3F1E;
  --clay-luz:     #C4956B;

  --sage:         #5C7466;
  --sage-forte:   #47594E;
  --sage-luz:     #A8BAAC;

  /* Texto suavizado de propósito. Título em quase-preto marca
     8.6:1 e cansa numa página que pede calma; o alvo aqui é
     confortável e ainda bem acima do mínimo. */
  --titulo-cor:   #35493F;
  --texto:        #3F4C46;
  --texto-suave:  #5A6660;
  --texto-fraco:  #8A948E;

  --linha:        #DBD2C1;
  --linha-forte:  #C7BCA7;
  --linha-escura: rgba(243, 238, 228, 0.18);

  /* --- tipografia --- */
  --fonte-titulo: 'Schibsted Grotesk', 'Segoe UI', sans-serif;
  --fonte-texto:  'Manrope', system-ui, sans-serif;

  /* Escala com degraus reais. Seis tamanhos entre 13px e 21px
     não é hierarquia, é papel de parede: cada passo abaixo
     guarda pelo menos 1.25x do anterior. */
  --display:   clamp(3rem, 6.2vw + 0.6rem, 6rem);
  --titulo:    clamp(2rem, 3vw + 1rem, 3.25rem);
  --subtitulo: 1.625rem;
  --corpo-lg:  1.25rem;
  --corpo:     1rem;
  --meta:      0.8125rem;

  --medida: 62ch;

  /* --- espaço --- */
  --secao:  clamp(5rem, 12vw, 10rem);
  --bloco:  clamp(2.5rem, 5vw, 4rem);
  --e1: 0.5rem;
  --e2: 1rem;
  --e3: 1.5rem;
  --e4: 2rem;
  --e5: 3rem;
  --e6: 4rem;

  /* --- forma ---
     Um raio só, aplicado com intenção. Sombra e borda nunca
     no mesmo elemento: borda define aresta, sombra define
     elevação. Os dois juntos é assinatura de UI gerada. */
  --raio:    0.875rem;
  --raio-lg: 1.375rem;

  /* --- movimento ---
     UI abaixo de 300ms, ease-out exponencial, nunca ease-in. */
  --ease:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-suave:cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 130ms;
  --t-ui:    190ms;
  --t-painel:280ms;
}

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background-color: var(--paper);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--corpo);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--titulo-cor);
}
p { text-wrap: pretty; }

/* --- superfícies do navegador ---
   Seleção, cursor, barra de rolagem e foco saem do navegador
   sem pertencer a design system nenhum. Vestir isso é o sinal
   mais barato de página construída em vez de montada. --- */
::selection { background: var(--clay); color: var(--paper-3); }
html { caret-color: var(--clay); }

* { scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; }
*::-webkit-scrollbar { width: 0.6875rem; height: 0.6875rem; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--linha-forte);
  border-radius: 6.1875rem;
  border: 0.1875rem solid var(--paper);
}
*::-webkit-scrollbar-thumb:hover { background: var(--texto-fraco); }

:focus-visible {
  outline: 0.125rem solid var(--clay);
  outline-offset: 0.1875rem;
  border-radius: 0.1875rem;
}

/* =========================================================
   MOVIMENTO - suporte
   Estado inicial só existe com .js-anim (inline no <head>).
   Sem JS, tudo nasce visível.
   ========================================================= */
.linha_mascara { display: block; overflow: hidden; }
.linha_mascara > span { display: block; will-change: transform; }

/* Palavras do display do hero. inline-block para aceitarem
   transform sem virar bloco e quebrar a linha; a quebra natural
   da frase continua funcionando entre elas. */
.palavra_hero { display: inline-block; will-change: transform; }

/* Filete das listas editoriais. Registrado para o GSAP poder
   interpolar; nasce em 1 (desenhado) para a lista existir
   inteira quando o script não roda. */
@property --filete {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}
.filete { position: relative; }
.filete::before,
.filete::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 0.0625rem;
  background-color: var(--linha);
  transform: scaleX(var(--filete, 1));
  transform-origin: left center;
}
.filete::before { top: 0; }
.filete::after { bottom: 0; display: none; }
.filete:last-child::after { display: block; }

/* Esconde só na janela entre o CSS carregar e o script assumir,
   para não haver flash. Assim que o JS registra os gatilhos ele
   marca .js-pronto e devolve o estado visível: a partir daí quem
   esconde é o GSAP, e só no elemento que vai mesmo animar. Quem
   já passou pela viewport nunca chega a ser escondido. */
.js-anim [data-anim="entra"] { opacity: 0; }
.js-anim.js-pronto [data-anim="entra"] { opacity: 1; }

.midia { position: relative; overflow: hidden; }
.midia img, .midia video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

[data-anim="acende"] .palavra { color: var(--texto-fraco); transition: none; }

.rola_unidade { display: inline-block; overflow: hidden; vertical-align: top; height: 1.35em; line-height: 1.35; }
.rola_trilho { display: block; will-change: transform; }
.rola_trilho > span { display: block; line-height: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim [data-anim] { opacity: 1 !important; transform: none !important; }
  [data-anim="acende"] .palavra { color: inherit !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .botao:hover, .botao:active,
  .formato:hover, .cabecalho_menu_botao:active { transform: none !important; }
}

/* =========================================================
   ESTRUTURA
   ========================================================= */
.container {
  width: min(100% - 2.5rem, 78rem);
  margin-inline: auto;
}
.container_estreito {
  width: min(100% - 2.5rem, 54rem);
  margin-inline: auto;
}

.secao_titulo { font-size: var(--titulo); max-width: 20ch; }
.secao_titulo_centro { max-width: 24ch; margin-inline: auto; text-align: center; }

/* =========================================================
   BOTÕES
   Borda OU sombra, nunca os dois. O primário carrega peso
   com cor sólida; o secundário com aresta definida.
   ========================================================= */
.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.9rem;
  min-height: 3rem;
  background-color: var(--clay);
  color: var(--paper-3);
  border-radius: 6.1875rem;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--corpo);
  letter-spacing: -0.01em;
  /* Camada de toque: sem o flash azul do sistema, sem seleção
     acidental no toque duplo e sem os 300ms de espera que o
     navegador guarda para decidir se foi zoom. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color var(--t-ui) var(--ease),
              box-shadow var(--t-ui) var(--ease),
              transform var(--t-ui) var(--ease),
              color var(--t-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .botao:hover { background-color: var(--clay-forte); }
}
/* No touch não existe hover: o :active é a única confirmação de
   que o toque foi registrado, então ele carrega a cor também e
   não só a escala. Vale para mouse, caneta e dedo. */
.botao:active {
  background-color: var(--clay-forte);
  transform: scale(0.975);
  transition-duration: var(--t-press);
}

.botao_icone { width: 1.0625rem; height: 1.0625rem; flex-shrink: 0; }

.botao_contorno {
  background-color: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 0.09375rem var(--ink);
  padding: 0.7rem 1.4rem;
  min-height: 2.625rem;
  font-size: var(--meta);
}
@media (hover: hover) and (pointer: fine) {
  .botao_contorno:hover { background-color: var(--ink); color: var(--paper-3); }
}
.botao_contorno:active { background-color: var(--ink); color: var(--paper-3); }

.botao_claro { background-color: var(--paper-3); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .botao_claro:hover { background-color: #fff; }
}
.botao_claro:active { background-color: #fff; color: var(--ink); }

/* =========================================================
   CABEÇALHO
   ========================================================= */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(0.875rem) saturate(1.4);
  -webkit-backdrop-filter: blur(0.875rem) saturate(1.4);
  border-bottom: 0.0625rem solid transparent;
  transition: border-color var(--t-ui) var(--ease);
  will-change: transform;
}
.cabecalho_fixo { border-bottom-color: var(--linha); }

.cabecalho_conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding-block: 1.1rem;
}
/* No celular o cabeçalho é o único elemento fixo na tela, então
   ele não pode roubar altura: sem a linha de apoio e com o nome
   em corpo menor ele cabe em duas linhas em vez de cinco. */
.cabecalho_logo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--corpo);
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--titulo-cor);
}
.cabecalho_logo_sub {
  display: none;
  font-family: var(--fonte-texto);
  font-weight: 500;
  color: var(--texto-suave);
  letter-spacing: 0;
}
.cabecalho_cta { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
/* O botão do topo nunca quebra em duas linhas: quebrado ele
   dobra a altura do cabeçalho inteiro. No celular sobra só a
   palavra que importa. */
.cabecalho_cta .botao { white-space: nowrap; }
/* O rótulo inteiro é um item de flex só. Solto, "WhatsApp" virava
   um segundo item anônimo e ganhava o gap do botão somado ao
   espaço da própria palavra: dois espaços onde devia ter um. */
.cabecalho_cta_rotulo { display: inline; }
.cabecalho_cta_longo { display: none; }
.cabecalho_crp {
  display: none;
  font-size: var(--meta);
  font-weight: 500;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.cabecalho_menu_botao {
  display: grid;
  place-items: center;
  gap: 0.3125rem;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 6.1875rem;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
.cabecalho_menu_botao span {
  display: block;
  width: 1.0625rem;
  height: 0.09375rem;
  background-color: var(--ink);
  transition: transform var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease);
}
.cabecalho_menu_botao span:nth-child(1) { grid-area: 1/1; transform: translateY(-0.3125rem); }
.cabecalho_menu_botao span:nth-child(2) { grid-area: 1/1; }
.cabecalho_menu_botao span:nth-child(3) { grid-area: 1/1; transform: translateY(0.3125rem); }
@media (hover: hover) and (pointer: fine) {
  .cabecalho_menu_botao:hover { background-color: var(--paper-2); }
}
.cabecalho_menu_botao:active {
  background-color: var(--paper-2);
  transform: scale(0.94);
  transition-duration: var(--t-press);
}
.cabecalho_menu_botao[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.cabecalho_menu_botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cabecalho_menu_botao[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

.cabecalho_menu { overflow: hidden; border-top: 0.0625rem solid var(--linha); }
.cabecalho_menu_lista {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-block: 1.25rem;
}
.cabecalho_menu_link {
  padding: 0.7rem 0.5rem;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--corpo-lg);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--titulo-cor);
  border-radius: 0.5rem;
  transition: color var(--t-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .cabecalho_menu_link:hover { color: var(--clay); }
}
.cabecalho_menu_link:active { color: var(--clay); }

/* =========================================================
   HERO
   ========================================================= */
.hero { padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem); }
.hero_conteudo { display: grid; gap: var(--bloco); align-items: center; }

.hero_titulo {
  font-size: var(--display);
  color: var(--clay);
  margin-bottom: var(--e4);
  max-width: 11ch;
}
.hero_subtitulo {
  font-size: var(--corpo-lg);
  line-height: 1.6;
  color: var(--texto-suave);
  max-width: 46ch;
  margin-bottom: var(--e5);
}
.hero_acoes { display: flex; flex-direction: column; gap: var(--e2); align-items: flex-start; }
/* O par só vira linha no desktop. A 30em o botão e a nota já
   disputavam a mesma largura e o rótulo do CTA quebrava em duas
   linhas; empilhados, cada um fica inteiro. */
@media (min-width: 64em) {
  .hero_acoes { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--e3); }
}
/* A frase do CTA não quebra nunca. Quem cede é o respiro lateral,
   e só nas telas estreitas onde 1.9rem de cada lado não caberia:
   a partir de ~553px o botão já usa o padding cheio do sistema. */
.hero_acoes .botao {
  white-space: nowrap;
  padding-inline: clamp(1.1rem, 5.5vw, 1.9rem);
}
/* A nota também é uma frase só. Em linha ela não quebra: se não
   couber ao lado do botão, desce inteira para a linha de baixo -
   o que acontece sozinho em telas de tablet deitado. */
.hero_nota { font-size: var(--corpo); color: var(--texto-suave); white-space: nowrap; }
.hero_imagem {
  border-radius: 11.875rem 1.625rem 1.625rem 1.625rem;
  aspect-ratio: 500 / 570;
}

/* =========================================================
   CREDENCIAIS
   Faixa tipográfica. Sem ícone, sem círculo, sem filete:
   a informação é curta e se sustenta sozinha.
   ========================================================= */
.credenciais {
  padding-block: var(--bloco);
  border-block: 0.0625rem solid var(--linha);
}
.credenciais_lista { display: grid; gap: var(--e4); }
.credenciais_item { display: flex; flex-direction: column; gap: 0.2rem; }
.credenciais_valor {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--corpo-lg);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--titulo-cor);
  font-variant-numeric: tabular-nums;
}
.credenciais_rotulo { font-size: var(--corpo); color: var(--texto-suave); }

/* =========================================================
   QUEM EU AJUDO
   Lista editorial, não grade de cards iguais. Cada item é
   uma linha com respiro; o filete separa, o card encaixotaria.
   ========================================================= */
.ajudo { padding-block: var(--secao); }
.ajudo_titulo { margin-bottom: var(--bloco); }
.ajudo_lista { display: grid; }
.ajudo_item {
  display: grid;
  gap: var(--e2);
  padding-block: var(--e5);
}
.ajudo_item_titulo {
  font-size: var(--subtitulo);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--titulo-cor);
  transition: color var(--t-ui) var(--ease);
}
/* O título muda de cor quando a linha inteira recebe o cursor.
   É a única reação da lista: sem elevar, sem borda, sem sombra,
   porque o item não é clicável e não deve prometer que é. */
@media (hover: hover) and (pointer: fine) {
  .ajudo_item:hover .ajudo_item_titulo { color: var(--clay); }
}
.ajudo_item_texto {
  font-size: var(--corpo);
  line-height: 1.7;
  color: var(--texto-suave);
  max-width: 58ch;
}

/* =========================================================
   SOBRE
   ========================================================= */
.sobre { padding-block: var(--secao); background-color: var(--paper-2); }
.sobre_conteudo { display: grid; gap: var(--bloco); align-items: center; }
.sobre_foto { border-radius: var(--raio-lg); aspect-ratio: 479 / 600; }
.sobre_titulo { margin-bottom: var(--e4); }
.sobre_texto { max-width: var(--medida); }
.sobre_texto p { font-size: var(--corpo); line-height: 1.75; color: var(--texto-suave); }
/* Ritmo só entre os parágrafos do texto corrido. Como seletor de
   descendente isto também pegava o nome e o CRP da assinatura e
   abria 1.5rem entre as duas linhas de uma coisa só. */
.sobre_texto > p + p,
.sobre_mais > p { margin-top: var(--e3); }
.sobre_destaque { color: var(--clay); font-weight: 600; }

/* Continuação da bio. O corte fica no fim do primeiro parágrafo:
   o leitor decide se entra no resto. Sem JS a página não corta
   nada, por isso o estado fechado só existe dentro de .js-anim -
   quem chega sem script recebe o texto inteiro e nenhum botão. */
.sobre_mais { overflow: hidden; }
.js-anim .sobre_mais[data-fechado="true"] { display: none; }

.ler_mais {
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--e2);
  padding-block: 0.35rem;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--corpo);
  letter-spacing: -0.01em;
  color: var(--clay);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color var(--t-ui) var(--ease);
}
.js-anim .ler_mais { display: inline-flex; }
@media (hover: hover) and (pointer: fine) {
  .ler_mais:hover { color: var(--clay-forte); }
}
.ler_mais:active { color: var(--clay-forte); }
.ler_mais_rotulo {
  text-decoration: underline;
  text-decoration-thickness: 0.0625rem;
  text-decoration-color: color-mix(in srgb, var(--clay) 35%, transparent);
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--t-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .ler_mais:hover .ler_mais_rotulo { text-decoration-color: currentColor; }
}
.ler_mais_seta {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  transition: transform var(--t-ui) var(--ease);
}
.ler_mais[aria-expanded="true"] .ler_mais_seta { transform: rotate(180deg); }

.sobre_assinatura {
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 0.0625rem solid var(--linha-forte);
}
/* O nome herdava a entrelinha de 1.65 do corpo e abria meio
   respiro entre ele e o CRP, como se fossem dois blocos. São uma
   assinatura só: entrelinha curta e um fio de espaço abaixo. */
.sobre_assinatura_nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--corpo-lg);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--titulo-cor);
}
.sobre_assinatura_meta {
  margin-top: 0.15rem;
  font-size: var(--corpo);
  line-height: 1.45;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   PROCESSO
   Sequência numerada: aqui o número carrega informação real
   (a ordem), então ele fica e é tratado como elemento gráfico,
   não como rótulo escondido. Em duas colunas a partir do tablet
   para a fileira de quatro passos parar de virar parede.
   ========================================================= */
.processo { padding-block: var(--secao); }
.processo_titulo { margin-bottom: var(--bloco); }
.processo_lista { display: grid; gap: var(--e5); counter-reset: passo; }

.processo_passo {
  display: grid;
  /* Largura explícita para a coluna do número: com `auto`, o
     pseudo-elemento que abrange duas linhas não dimensionava a
     coluna e ela colapsava para zero, jogando o número por cima
     do título. */
  grid-template-columns: 3.5rem 1fr;
  column-gap: var(--e3);
  row-gap: var(--e1);
  counter-increment: passo;
}
/* Posição explícita nas duas dimensões. Sem declarar a coluna,
   o número era colocado automaticamente no mesmo lugar do
   título e os dois se sobrepunham. */
.processo_passo::before {
  content: counter(passo, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 2.75rem;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--clay);
  opacity: 0.28;
  font-variant-numeric: tabular-nums;
}
.processo_passo_titulo {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--subtitulo);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--titulo-cor);
}
.processo_passo_texto {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--corpo);
  line-height: 1.7;
  color: var(--texto-suave);
}

/* =========================================================
   TEMAS
   ========================================================= */
.temas { padding-block: var(--secao); background-color: var(--paper-2); }
.temas_titulo { margin-bottom: var(--bloco); }
.temas_lista { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.temas_tag {
  padding: 0.7rem 1.3rem;
  border-radius: 6.1875rem;
  box-shadow: inset 0 0 0 0.0625rem var(--sage-luz);
  font-size: var(--corpo);
  font-weight: 600;
  color: var(--sage-forte);
  transition: box-shadow var(--t-ui) var(--ease),
              color var(--t-ui) var(--ease),
              background-color var(--t-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .temas_tag:hover {
    background-color: var(--sage);
    box-shadow: inset 0 0 0 0.0625rem var(--sage);
    color: var(--paper-3);
  }
}

/* =========================================================
   FORMATOS
   Duas modalidades, tratadas como par assimétrico e não como
   cards gêmeos: a presencial herda a superfície escura.
   ========================================================= */
.formatos { padding-block: var(--secao); }
.formatos_titulo { margin-bottom: var(--bloco); }
.formatos_lista { display: grid; gap: var(--e3); }
.formato {
  display: flex;
  flex-direction: column;
  padding: var(--e5) var(--e4);
  border-radius: var(--raio-lg);
  background-color: var(--paper-3);
  transition: transform var(--t-ui) var(--ease);
}
.formato_escuro { background-color: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .formato:hover { transform: translateY(-0.25rem); }
}
.formato_titulo {
  font-size: var(--subtitulo);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.2rem;
  color: var(--titulo-cor);
}
.formato_escuro .formato_titulo { color: var(--paper-3); }
.formato_local { font-size: var(--corpo); color: var(--texto-suave); margin-bottom: var(--e3); }
.formato_escuro .formato_local { color: var(--clay-luz); }
.formato_texto { font-size: var(--corpo); line-height: 1.7; color: var(--texto-suave); margin-bottom: var(--e3); }
.formato_escuro .formato_texto { color: color-mix(in srgb, var(--paper) 80%, transparent); }
.formato_lista { display: grid; gap: 0.7rem; margin-bottom: var(--e4); }
.formato_lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--corpo);
  color: var(--texto);
}
.formato_escuro .formato_lista li { color: color-mix(in srgb, var(--paper) 90%, transparent); }
.formato_lista svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.25rem; color: var(--clay); }
.formato_escuro .formato_lista svg { color: var(--clay-luz); }
.formato .botao { align-self: flex-start; margin-top: auto; }

/* =========================================================
   CONVITE (faixa escura)
   ========================================================= */
.convite { padding-block: var(--secao); background-color: var(--ink); color: var(--paper); }
.convite_conteudo { text-align: center; }
.convite_titulo { font-size: var(--titulo); color: var(--paper-3); margin-bottom: var(--e3); max-width: 22ch; margin-inline: auto; }
.convite_texto {
  max-width: 44ch;
  margin-inline: auto;
  margin-bottom: var(--e4);
  font-size: var(--corpo-lg);
  line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

/* =========================================================
   LOCALIZAÇÃO
   ========================================================= */
.local { padding-block: var(--secao); }
.local_conteudo { display: grid; gap: var(--bloco); align-items: center; }
.local_mapa { width: 100%; border-radius: var(--raio-lg); aspect-ratio: 500 / 400; }
.local_mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Estado anterior ao mapa. Ocupa a mesma caixa do iframe para a
   seção não pular de altura quando a pessoa carrega. */
.mapa_convite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  width: 100%;
  height: 100%;
  padding: var(--e4);
  text-align: center;
  background-color: var(--paper-2);
  border: 0.0625rem solid var(--linha);
  border-radius: var(--raio-lg);
}
.mapa_convite_texto {
  max-width: 34ch;
  font-size: var(--meta);
  color: var(--texto-suave);
}
.mapa_convite_alt { font-size: var(--meta); }
.mapa_convite_alt a { color: var(--texto-suave); text-decoration: underline; text-underline-offset: 0.25em; }
@media (hover: hover) and (pointer: fine) {
  .mapa_convite_alt a:hover { color: var(--clay); }
}
.mapa_convite_alt a:active { color: var(--clay); }
.local_titulo { margin-bottom: var(--e4); }
.local_endereco {
  font-size: var(--corpo-lg);
  font-weight: 600;
  color: var(--titulo-cor);
  margin-bottom: 0.4rem;
}
.local_endereco_extra { display: block; margin-top: 0.4rem; font-size: var(--corpo); font-weight: 400; color: var(--texto-suave); }
.local_texto { max-width: var(--medida); }
.local_texto p { font-size: var(--corpo); line-height: 1.7; color: var(--texto-suave); margin-top: var(--e3); }

/* =========================================================
   FAQ
   Lista com filete, não caixas empilhadas.
   ========================================================= */
.faq { padding-block: var(--secao); background-color: var(--paper-2); }
.faq_titulo { margin-bottom: var(--bloco); }
.faq_lista { display: grid; }
.faq_pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  width: 100%;
  padding-block: var(--e3);
  text-align: left;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--corpo-lg);
  letter-spacing: -0.025em;
  color: var(--titulo-cor);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color var(--t-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .faq_pergunta:hover { color: var(--clay); }
}
.faq_pergunta:active { color: var(--clay); }
.faq_icone {
  position: relative;
  flex-shrink: 0;
  width: 0.8125rem;
  height: 0.8125rem;
}
.faq_icone::before,
.faq_icone::after {
  content: '';
  position: absolute;
  background-color: currentColor;
  transition: transform var(--t-painel) var(--ease), opacity var(--t-painel) var(--ease);
}
.faq_icone::before { top: 50%; left: 0; width: 100%; height: 0.09375rem; margin-top: -0.046875rem; }
.faq_icone::after  { left: 50%; top: 0; height: 100%; width: 0.09375rem; margin-left: -0.046875rem; }
.faq_pergunta[aria-expanded="true"] .faq_icone::after { transform: scaleY(0); opacity: 0; }
.faq_resposta { overflow: hidden; }
.faq_resposta p {
  padding-bottom: var(--e3);
  font-size: var(--corpo);
  line-height: 1.7;
  color: var(--texto-suave);
  max-width: var(--medida);
}

/* =========================================================
   CONTATO
   ========================================================= */
.contato { padding-block: var(--secao); }
.contato_conteudo { text-align: center; }
.contato_titulo { margin-bottom: var(--e3); }
.contato_texto {
  max-width: 44ch;
  margin-inline: auto;
  margin-bottom: var(--e5);
  font-size: var(--corpo-lg);
  line-height: 1.6;
  color: var(--texto-suave);
}
.contato_acoes { display: flex; flex-direction: column; align-items: center; gap: var(--e3); }
.contato_email { font-size: var(--corpo); color: var(--texto-suave); }
.contato_email a {
  color: var(--clay);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.25em;
  transition: color var(--t-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .contato_email a:hover { color: var(--clay-forte); }
}
.contato_email a:active { color: var(--clay-forte); }

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape { padding-block: var(--bloco) var(--e5); background-color: var(--ink); color: var(--paper); }
.rodape_marca {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--paper-3);
  padding-bottom: var(--e5);
  border-bottom: 0.0625rem solid var(--linha-escura);
  margin-bottom: var(--e5);
}
.rodape_conteudo { display: grid; gap: var(--e4); padding-bottom: var(--e5); }
.rodape_bloco { display: grid; gap: 0.4rem; font-size: var(--corpo); line-height: 1.6; color: color-mix(in srgb, var(--paper) 72%, transparent); }
.rodape_bloco_titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--meta);
  letter-spacing: 0.02em;
  color: var(--paper-3);
  margin-bottom: 0.2rem;
}
.rodape_bloco a { color: var(--paper-3); text-decoration: underline; text-underline-offset: 0.25em; }
.rodape_creditos {
  display: grid;
  gap: 0.4rem 1.5rem;
  padding-top: var(--e4);
  border-top: 0.0625rem solid var(--linha-escura);
  font-size: var(--meta);
  color: color-mix(in srgb, var(--paper) 55%, transparent);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   TABLET
   ========================================================= */
/* =========================================================
   PÁGINAS DE TEXTO - legais e 404
   Uma coluna estreita, medida de leitura curta, hierarquia por
   tamanho e espaço. Reaproveita os mesmos tokens da home.
   ========================================================= */
/* Páginas de texto são curtas: sem isto o rodapé para no meio
   da tela e sobra papel morto embaixo. */
body:has(.legal) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body:has(.legal) .legal { flex: 1; }
.legal { padding-block: var(--e6) var(--e6); }
.legal_conteudo { max-width: 68ch; }
.legal_data {
  font-size: var(--meta);
  color: var(--texto-suave);
  margin-bottom: var(--e2);
}
.legal_titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--titulo);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--titulo-cor);
  margin-bottom: var(--e3);
}
.legal_intro {
  font-size: var(--corpo-lg);
  color: var(--texto-suave);
  margin-bottom: var(--e5);
}
.legal_conteudo h2 {
  font-family: var(--fonte-titulo);
  font-size: var(--subtitulo);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--titulo-cor);
  margin-top: var(--e5);
  margin-bottom: var(--e2);
  padding-top: var(--e3);
  border-top: 0.0625rem solid var(--linha);
}
.legal_conteudo h3 {
  font-size: var(--corpo-lg);
  font-weight: 600;
  color: var(--titulo-cor);
  margin-top: var(--e3);
  margin-bottom: 0.5rem;
}
.legal_conteudo p,
.legal_conteudo li { color: var(--texto); }
.legal_conteudo p { margin-bottom: var(--e2); }
/* A home não usa marcador em lista nenhuma, por isso o reset
   zera. Aqui o marcador volta: em texto legal ele separa item
   de parágrafo e é o que faz a enumeração ser lida como
   enumeração. */
.legal_conteudo ul { list-style: disc; margin: 0 0 var(--e2) 1.15rem; }
.legal_conteudo li { margin-bottom: 0.5rem; }
.legal_conteudo a:not(.botao) { color: var(--clay); text-decoration: underline; text-underline-offset: 0.25em; }
@media (hover: hover) and (pointer: fine) {
  .legal_conteudo a:not(.botao):hover { color: var(--clay-forte); }
}
.legal_conteudo a:not(.botao):active { color: var(--clay-forte); }
.legal_acoes { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }
.legal_aviso {
  margin-top: var(--e5);
  padding: var(--e3);
  background-color: var(--paper-2);
  border-radius: var(--raio-lg);
  font-size: var(--meta);
  color: var(--texto-suave);
}

.rodape_legal { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rodape_legal a { color: inherit; text-decoration: underline; text-underline-offset: 0.25em; }
@media (hover: hover) and (pointer: fine) {
  .rodape_legal a:hover { color: var(--paper-3); }
}
.rodape_legal a:active { color: var(--paper-3); }

@media (min-width: 48em) {
  .cabecalho_crp { display: inline; }
  .cabecalho_logo { font-size: var(--corpo-lg); }
  .cabecalho_logo_sub { display: inline; }
  .cabecalho_cta_longo { display: inline; }
  .cabecalho_cta { gap: 0.75rem; }
  .cabecalho_menu_lista { flex-direction: row; flex-wrap: wrap; gap: var(--e4); padding-block: 1.5rem; }
  .credenciais_lista { grid-template-columns: repeat(2, 1fr); gap: var(--e5) var(--e4); }
  .ajudo_item { grid-template-columns: 0.9fr 1.1fr; gap: var(--e5); align-items: start; }
  /* Dois a dois: quebra a coluna única de quatro passos e usa a
     largura que sobrava vazia à direita. */
  /* Sem filete separando, quem organiza é o espaço. Os quatro
     passos são uma sequência contínua e não dois pares, então o
     respiro é igual nos dois eixos: nada sugere agrupamento que
     a ordem não tem. */
  .processo_lista { grid-template-columns: repeat(2, 1fr); gap: var(--e6); }
  .formatos_lista { grid-template-columns: repeat(2, 1fr); gap: var(--e4); }
  .rodape_conteudo { grid-template-columns: 1.4fr 1fr 0.8fr; gap: var(--e5); }
  .contato_acoes { flex-direction: row; justify-content: center; gap: var(--e5); }
}

/* =========================================================
   DESKTOP
   ========================================================= */
@media (min-width: 64em) {
  .hero_conteudo { grid-template-columns: 1.15fr 0.85fr; gap: var(--e6); }
  .credenciais_lista { grid-template-columns: repeat(4, 1fr); gap: var(--e4); }
  .sobre_conteudo { grid-template-columns: 0.78fr 1.22fr; gap: var(--e6); }
  .local_conteudo { grid-template-columns: 0.92fr 1.08fr; gap: var(--e6); }
  .faq_lista { max-width: 56rem; }
  .rodape_creditos { grid-template-columns: auto 1fr auto; align-items: center; }
  .rodape_legal { justify-self: center; }
  .rodape_creditos > :last-child { text-align: right; }
}