/* ==========================================================================
   VITÓRIA COMIN HOMA — PSICÓLOGA
   style.css: design system, componentes e seções
   --------------------------------------------------------------------------
   Ordem deste arquivo:
     1. Reset leve
     2. Variáveis (cores, fontes, espaços)
     3. Base e tipografia
     4. Utilitários (.container, .rotulo, .botao, .chip, .sr-only, .ruido…)
     5. Componentes (cabeçalho, menu, pílula, cursor, título de seção…)
     6. Seções da página (.inicio, .sobre, .tcc, .ajuda, .funciona, .frase,
        .duvidas, .contato, .rodape) e 6.10 páginas internas (.privacidade)
     7. Responsivo (celular primeiro; telas maiores no fim: 640/768/1024/1280)
   As animações ficam em movimento.css.
   ========================================================================== */


/* ==========================================================================
   1. RESET LEVE
   ========================================================================== */

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

* {
  margin: 0;
}

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

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

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}


/* ==========================================================================
   2. VARIÁVEIS
   ========================================================================== */

:root {
  /* Cores do manual */
  --creme:       #FEF2E5;  /* fundo principal */
  --ardosia:     #707A91;  /* cor da marca: títulos grandes, faixas de destaque, ícones, linhas */
  --ouro-claro:  #F2E8CB;  /* início do gradiente dourado (medido no manual) */
  --ouro-escuro: #CBAE8B;  /* fim do gradiente dourado (medido no manual) */
  --ouro: linear-gradient(90deg, var(--ouro-claro), var(--ouro-escuro));
  --branco:      #FFFFFF;  /* fundos alternados (as peças do manual usam branco) */
  --creme-logo:  #F5F0EF;  /* tom claro do nome no logo sobre ardósia (medido nos vetores) */

  /* Derivadas para acessibilidade: MESMO matiz (222°) e saturação (13%) da ardósia, só mais escuras */
  --ardosia-600: #5D6679;  /* fundos azuis que têm texto pequeno; botões; rótulos */
  --texto:       #4E5565;  /* corpo de texto */
  --ardosia-900: #2C303A;  /* sombras e sobreposições */

  /* Curvas de movimento (usadas em movimento.css) */
  --ease-revela: cubic-bezier(0.4, 0.5, 0, 1);
  --ease-suave:  cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Linhas finas (ardósia a 35 %) e sombra mínima */
  --linha: rgb(112 122 145 / 0.35);
  --sombra: 0 20px 60px rgb(44 48 58 / 0.08);

  /* Fontes
     Títulos: a marca usa Quiche Sans. Enquanto não houver licença, a Belleza
     (gratuita) entra no lugar. Ver README.md > "Ativar a Quiche Sans". */
  --fonte-titulos: "Quiche Sans", "quiche-sans", "Belleza", "Optima", "Candara", sans-serif;
  --peso-titulos: 400;  /* com a Quiche Sans, trocar para 300 (Light), como no manual */
  --fonte-texto: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Espaços */
  --pad: clamp(1.25rem, 4vw, 3rem);                /* margem lateral do conteúdo */
  --gap: clamp(1rem, 2vw, 2rem);                   /* espaço entre colunas */
  --espaco-secao: clamp(6rem, 13vw, 13.75rem);     /* espaço vertical das seções */
  --altura-header: 76px;                           /* 96px a partir de 1024px */

  /* Cantos */
  --raio-botao: 12px;
  --raio-cartao: 24px;

  color-scheme: light;
}


/* ==========================================================================
   3. BASE E TIPOGRAFIA
   ========================================================================== */

html {
  /* Fundo do html = cor do rodapé: evita um "flash" de outra cor no fim da
     rolagem (efeito elástico do Mac/iPhone). */
  background-color: var(--ardosia-600);
  /* Reserva a altura do header fixo no topo (e a da pílula embaixo): as
     âncoras (#sobre…), o Lenis e o foco do teclado param fora dessas faixas.
     Faz o papel do "scroll-margin-top: 96px" das seções, sem somar duas vezes. */
  scroll-padding-top: var(--altura-header);
  scroll-padding-bottom: 96px;
}

body {
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* A página inteira (main + rodapé) fica dentro de .pagina */
main {
  display: block;
  background-color: var(--creme);
}

h1,
h2,
h3,
.destaque {
  font-family: var(--fonte-titulos);
  font-weight: var(--peso-titulos);
  font-synthesis: none;           /* nunca "inventar" negrito na fonte de títulos */
  color: var(--ardosia);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 5.2vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(2.2rem, 4.8vw, 4.5rem);
  line-height: 1.05;
}

h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.15;
}

/* Frase grande de destaque (fonte de títulos, tamanho intermediário) */
.destaque {
  font-size: clamp(1.6rem, 3.3vw, 3rem);
  line-height: 1.18;
  max-width: 24em;
}

p {
  max-width: 62ch;
  text-wrap: pretty;
}

strong {
  font-weight: 600;
}

/* Links dentro de textos corridos */
.texto-link {
  color: var(--ardosia-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.25s ease;
}

.texto-link:hover {
  color: var(--texto);
}

/* Foco do teclado: sempre visível. Nunca dourado (contraste insuficiente). */
:focus-visible {
  outline: 2px solid var(--ardosia-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.fundo-escuro :focus-visible,
.fundo-escuro:focus-visible,
.cabecalho.menu-aberto :focus-visible {
  outline-color: var(--creme);
}

/* Destinos de âncoras recebem foco pelo JavaScript; não precisam de contorno */
[tabindex="-1"]:focus {
  outline: none;
}

::selection {
  background-color: var(--ardosia-600);
  color: var(--creme);
}


/* ==========================================================================
   4. UTILITÁRIOS
   ========================================================================== */

/* --- Container: largura máxima e margens laterais --- */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* --- Grade de 12 colunas (no celular, cada filho ocupa a linha inteira) --- */
.grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}

.grade > * {
  grid-column: 1 / -1;
}

/* --- Texto só para leitores de tela --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Link "Pular para o conteúdo" (aparece ao apertar Tab) --- */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.85rem 1.25rem;
  border-radius: var(--raio-botao);
  background-color: var(--ardosia-600);
  color: var(--creme);
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.25s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  outline-color: var(--ardosia-600);
}

/* --- Rótulo / sobretítulo: caixa alta bem espaçada, como "P S I C Ó L O G A" do logo --- */
.rotulo {
  font-family: var(--fonte-texto);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ardosia-600);
}

.fundo-escuro .rotulo {
  color: var(--creme);
}

/* --- Numeração "(01)" --- */
.num {
  font-family: var(--fonte-texto);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--ardosia-600);
  font-variant-numeric: tabular-nums;
}

/* --- Botões: iguais aos do cartão digital do manual --- */
.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 1.05rem 1.6rem;
  border: 1.5px solid currentColor;
  border-radius: var(--raio-botao);
  background-color: transparent;
  color: var(--ardosia-600);
  font-family: var(--fonte-texto);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  overflow: hidden;              /* esconde o letreiro (marquee) fora do botão */
  isolation: isolate;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Compensa o espaçamento extra depois da última letra (centraliza o texto) */
.botao__rotulo {
  margin-right: -0.22em;
  transition: opacity 0.25s ease;
}

.botao svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

/* Cheio: fundo ardósia escura, texto creme (5,23:1) */
.botao--cheio {
  background-color: var(--ardosia-600);
  border-color: var(--ardosia-600);
  color: var(--creme);
}

.botao--cheio:hover {
  background-color: var(--texto);
  border-color: var(--texto);
}

/* Contorno: texto e borda ardósia escura sobre creme */
.botao--contorno {
  color: var(--ardosia-600);
}

.botao--contorno:hover {
  background-color: rgb(93 102 121 / 0.08);
}

/* Contorno sobre fundo escuro: creme */
.fundo-escuro .botao--contorno {
  color: var(--creme);
}

.fundo-escuro .botao--contorno:hover {
  background-color: rgb(254 242 229 / 0.1);
}

/* Botão pequeno (cabeçalho) */
.botao--pequeno {
  min-height: 44px;
  padding: 0.8rem 1.25rem;
  font-size: 0.75rem;
}

/* Botão da largura toda (cartão de contato) */
.botao--bloco {
  display: flex;
  width: 100%;
}

/* Letreiro (marquee) montado pelo movimento.js — ver movimento.css */
.botao__marquee {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* --- Chips (pílulas com ícone) --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgb(93 102 121 / 0.35);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ardosia-600);
}

.chip svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
}

.lista-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* --- Ícones de linha fina (SVG inline, cor do texto) --- */
.icone {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Textura de ruído sobre as faixas azuis --- */
.ruido {
  position: relative;
  isolation: isolate;
}

.ruido::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/marca/textura-ruido.png");
  background-size: 256px 256px;
  mix-blend-mode: overlay;
  opacity: 0.2;
  pointer-events: none;
  border-radius: inherit;
}

/* O conteúdo das faixas fica acima do ruído */
.ruido > .acima-ruido {
  position: relative;
  z-index: 1;
}

/* --- Filete dourado (como sob o cabeçalho do timbrado) --- */
.filete-ouro {
  display: block;
  height: 2px;
  border: 0;
  background: var(--ouro);
}

/* --- Símbolo da marca (via <use href="#simbolo">) --- */
.simbolo {
  display: block;
  width: auto;
  fill: currentColor;
  overflow: visible;
}

/* Marca d'água: símbolo gigante e muito claro, como no verso do cartão */
.marca-dagua {
  position: absolute;
  z-index: 0;
  color: var(--ardosia);
  opacity: 0.06;
  pointer-events: none;
}

.marca-dagua svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Símbolo dourado que se desenha (hero, frase, 404), feito com #simbolo-traco
   (o símbolo como uma linha contínua; a espessura já vem no próprio símbolo).
   Estado final (sem movimento): linha e ponto dourados. */
.simbolo-desenho {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.simbolo-desenho use {
  fill: url(#ouro);
  fill-opacity: 1;
  stroke: url(#ouro);
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* --- Linhas finas que se desenham (ver movimento.css) --- */
.linha-h {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--linha);
}

/* Linha extra embaixo do último item de uma lista (usada em .ajuda e .duvidas) */
.linha-h--base {
  top: auto;
  bottom: 0;
}

.linha-v {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1px;
  height: 100%;
  background-color: var(--linha);
}


/* ==========================================================================
   5. COMPONENTES
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 Cabeçalho (header)
   -------------------------------------------------------------------------- */
.cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--altura-header);
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s ease, border-color 0.5s ease, transform 0.5s ease;
}

/* Sem JavaScript não há o fundo creme ao rolar: o cabeçalho rola com a página */
.no-js .cabecalho {
  position: absolute;
}

/* Depois de rolar 50 px: fundo creme translúcido com desfoque */
.cabecalho.rolado {
  background-color: rgb(254 242 229 / 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: rgb(78 85 101 / 0.08);
}

/* Some ao rolar para baixo e volta ao rolar para cima */
.cabecalho.escondido {
  transform: translateY(-100%);
}

/* Com o menu do celular aberto, o cabeçalho fica por cima do painel azul */
.cabecalho.menu-aberto {
  background-color: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}

.cabecalho__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}

.cabecalho__logo {
  position: relative;
  display: block;
  flex: none;
  width: 150px;
  padding-block: 5px;            /* área de toque de pelo menos 44 px de altura */
  border-radius: 6px;
}

.cabecalho__logo img {
  width: 100%;
  transition: opacity 0.25s ease;
}

/* Logo claro (para o menu aberto) fica sobreposto e invisível */
.cabecalho__logo .logo-claro {
  position: absolute;
  top: 5px;
  left: 0;
  opacity: 0;
}

.cabecalho.menu-aberto .logo-escuro {
  opacity: 0;
}

.cabecalho.menu-aberto .logo-claro {
  opacity: 1;
}

/* Navegação do computador (escondida no celular) */
.nav-principal {
  display: none;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
}

.nav-principal__lista {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.nav-principal__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ardosia-600);
  white-space: nowrap;
}

/* Sublinhado fino que cresce no hover (0,25 s) */
.nav-principal__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.16em;
  bottom: 10px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

.nav-principal__link:hover::after,
.nav-principal__link[aria-current]::after {
  transform: scaleX(1);
}

/* Botão do menu (hambúrguer) */
.menu-botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  border-radius: var(--raio-botao);
  color: var(--ardosia-600);
  transition: color 0.25s ease;
}

.menu-botao__linhas {
  position: relative;
  width: 24px;
  height: 10px;
}

.menu-botao__linhas::before,
.menu-botao__linhas::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform 0.35s var(--ease-suave), top 0.35s var(--ease-suave);
}

.menu-botao__linhas::before {
  top: 0;
}

.menu-botao__linhas::after {
  top: calc(100% - 1.5px);
}

/* Aberto: as duas linhas viram um "×" */
.menu-botao[aria-expanded="true"] {
  color: var(--creme);
}

.menu-botao[aria-expanded="true"] .menu-botao__linhas::before {
  top: calc(50% - 0.75px);
  transform: rotate(45deg);
}

.menu-botao[aria-expanded="true"] .menu-botao__linhas::after {
  top: calc(50% - 0.75px);
  transform: rotate(-45deg);
}

/* Sem JavaScript o botão não funciona: a navegação vai para o rodapé */
.no-js .menu-botao {
  display: none;
}

/* --------------------------------------------------------------------------
   5.2 Menu do celular (tela cheia)
   -------------------------------------------------------------------------- */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: calc(var(--altura-header) + 1.5rem) var(--pad) max(2rem, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--ardosia-600);
  color: var(--creme);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.menu-mobile.aberto {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}

.menu-mobile__lista {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.menu-mobile__link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 52px;
  font-family: var(--fonte-titulos);
  font-weight: var(--peso-titulos);
  font-size: 2rem;
  line-height: 1.2;
  color: var(--creme);
  text-decoration: none;
}

.menu-mobile__link .num {
  color: var(--creme);
}

.menu-mobile__link[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.menu-mobile__contato {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 420px;
  margin-top: auto;
}

/* Itens do menu entram em sequência (ver movimento.css) */
.menu-mobile__item {
  --n: 0;
}

/* --------------------------------------------------------------------------
   5.3 Pílula flutuante (navegação rápida + WhatsApp)
   -------------------------------------------------------------------------- */
.pilula {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(100vw - 2rem);
  padding: 8px 4px;
  border-radius: 12px;
  /* --texto a 90 %: mais escura que --ardosia-600 para o creme manter ≥ 4,5:1 */
  background-color: rgb(78 85 101 / 0.9);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  color: var(--creme);
  box-shadow: var(--sombra);
  transform: translateX(-50%);
  transition: transform 0.5s ease;
}

/* Escondida (menu aberto ou rodapé à vista) */
.pilula.escondida {
  transform: translate(-50%, 150%);
}

/* Sem JavaScript a pílula não teria a seção atual: fica escondida */
.no-js .pilula {
  display: none;
}

/* (a) Símbolo dourado: abre de 0 a 44 px quando o hero sai da tela */
.pilula__simbolo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 0;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  visibility: hidden;
  transition: width 0.5s ease, visibility 0s linear 0.5s;
}

.pilula.com-simbolo .pilula__simbolo {
  width: 44px;
  visibility: visible;
  transition: width 0.5s ease, visibility 0s linear 0s;
}

.pilula__simbolo svg {
  width: 18px;
  height: 23px;
  flex: none;
  fill: url(#ouro);
}

/* (b) Nome da seção atual: janela de uma linha, lista desliza por baixo */
.pilula__secoes {
  position: relative;
  flex: none;
  height: 44px;
  overflow: hidden;
  transition: width 0.5s ease;
}

.pilula__lista {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.5s ease;
}

.pilula__link {
  display: flex;
  align-items: center;
  width: max-content;
  height: 44px;
  padding-inline: 14px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--creme);
  white-space: nowrap;
}

/* Separador fino entre a seção e o botão */
.pilula__divisor {
  flex: none;
  width: 1px;
  height: 24px;
  margin-inline: 4px;
  background-color: rgb(254 242 229 / 0.35);
}

/* (c) Botão fixo de WhatsApp */
.pilula__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  height: 44px;
  padding-inline: 14px;
  border-radius: 8px;
  background-color: var(--creme);
  color: var(--ardosia-600);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}

.pilula__cta:hover {
  background-color: #fff;
}

.pilula__cta .icone {
  width: 1.1rem;
  height: 1.1rem;
}

.pilula :focus-visible {
  outline-color: var(--creme);
  outline-offset: -2px;
}

/* O botão creme recebe o contorno por fora, sobre o fundo escuro da pílula */
.pilula .pilula__cta:focus-visible {
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5.4 Cursor com rótulo (só em computadores com mouse; ver movimento.css)
   -------------------------------------------------------------------------- */
.cursor-rotulo {
  display: none;
}

/* --------------------------------------------------------------------------
   5.5 Cabeçalho de seção: símbolo + (01) + rótulo | título + linha longa
   -------------------------------------------------------------------------- */
.titulo-secao {
  margin-bottom: clamp(3rem, 7vw, 6rem);
}

.titulo-secao__h2 {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.2;
}

.titulo-secao__marca {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.titulo-secao__simbolo {
  width: 28px;
  height: 35.5px;
  flex: none;
  color: var(--ardosia);
  fill: currentColor;
}

.titulo-secao__marca .rotulo {
  display: block;
}

.titulo-secao__titulo {
  display: block;
  font-family: var(--fonte-titulos);
  font-weight: var(--peso-titulos);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.15;
  color: var(--ardosia);
  text-wrap: balance;
}

.titulo-secao__filete {
  display: block;
  height: 1px;
  background-color: var(--linha);
}

/* --------------------------------------------------------------------------
   5.6 Lista com filetes (Sobre mim, TCC)
   -------------------------------------------------------------------------- */
.lista-filetes__item {
  position: relative;
  padding-block: 1.05rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ardosia-600);
}

.lista-filetes__item .linha-h {
  position: absolute;
  top: 0;
  left: 0;
}

/* --------------------------------------------------------------------------
   5.7 Capa de destaque (círculo ardósia com recorte do símbolo em dourado)
   -------------------------------------------------------------------------- */
.capa {
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--ardosia);
  box-shadow: var(--sombra);
}

.capa svg {
  width: 100%;
  height: 100%;
}

.capa use {
  fill: url(#ouro);
}

/* --------------------------------------------------------------------------
   5.8 Blocos em colunas com linha vertical (pilares da TCC, passos)
   -------------------------------------------------------------------------- */
.colunas-linha {
  display: grid;
  gap: 3rem var(--gap);
}

.coluna-linha {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0.25rem 0 0.5rem clamp(1.25rem, 2.5vw, 2rem);
}

.coluna-linha h3 {
  margin-top: 0.5rem;
}

.coluna-linha p {
  max-width: 34ch;
}


/* ==========================================================================
   6. SEÇÕES DA PÁGINA
   ========================================================================== */

/* Espaço entre seções (a folga do header para as âncoras está no html) */
.secao {
  position: relative;
  padding-block: var(--espaco-secao);
  overflow: hidden;              /* navegadores antigos */
  overflow: clip;                /* corta a marca d'água e o parallax sem criar rolagem */
}

.fundo-creme {
  background-color: var(--creme);
}

.fundo-branco {
  background-color: var(--branco);
}

/* --------------------------------------------------------------------------
   6.1 INÍCIO (hero)
   -------------------------------------------------------------------------- */
.inicio {
  position: relative;
  background-color: var(--creme);
  /* container-type permite medir a largura do hero com a unidade cqw */
  container-type: inline-size;
}

.inicio__conteudo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding-top: calc(var(--altura-header) + clamp(2rem, 7vw, 3.5rem));
  padding-bottom: 3rem;
}

.inicio__texto {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Rótulo com nome + CRP, seguido de uma linha que cresce */
.inicio__rotulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
}

.inicio__rotulo-linha {
  display: block;
  width: 48px;
  height: 1px;
  background-color: var(--ardosia);
}

/* Título em 3 versos; o 2º verso recuado, como no hero da Ampere */
.inicio__titulo {
  max-width: none;
}

.quebra {
  display: block;
}

.quebra--recuo {
  padding-left: 7vw;
}

.inicio__lead {
  max-width: 44ch;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
}

.inicio__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Faixa inferior: chips + "Role para conhecer" */
.inicio__faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.inicio__rolar {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 44px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ardosia-600);
}

.inicio__rolar-circulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid rgb(93 102 121 / 0.45);
  border-radius: 50%;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.inicio__rolar:hover .inicio__rolar-circulo {
  background-color: var(--ardosia-600);
  border-color: var(--ardosia-600);
  color: var(--creme);
}

.inicio__rolar .icone {
  width: 1.1rem;
  height: 1.1rem;
}

/* Painel ardósia com a foto (no celular: quadrado, largura total, embaixo do texto) */
.inicio__painel {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--ardosia);
  /* Corte diagonal final (a animação parte de um triângulo, ver movimento.css) */
  clip-path: polygon(20% 0, 100% 0, 100% 88%, 86% 100%, 0 100%);
}

.inicio__ruido {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/marca/textura-ruido.png");
  background-size: 256px 256px;
  mix-blend-mode: overlay;
  opacity: 0.2;
}

/* Elipse escura e desfocada: dá profundidade ao painel */
.inicio__elipse {
  position: absolute;
  top: -12%;
  left: -18%;
  z-index: 0;
  width: 75%;
  height: 45%;
  border-radius: 50%;
  background-color: rgb(44 48 58 / 0.3);
  filter: blur(55px);
  transform: rotate(-15deg);
}

/* Símbolo dourado gigante atrás da Vitória */
.inicio__simbolo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  height: 75%;
  aspect-ratio: 118.6 / 150.5;
  transform: translate(-50%, -50%);
  opacity: 0.45;
}

.inicio__simbolo-parallax {
  width: 100%;
  height: 100%;
}

/* Foto com fundo removido (proporção 4:5). Dimensionada pela ALTURA, com a
   base encostada na base do painel e centralizada: o cabelo nunca é cortado
   e sobra respiro acima dele; dos lados aparece o ardósia do painel. */
.inicio__foto {
  position: absolute;
  inset: 0;
  z-index: 2;
  container-type: size;         /* permite medir o painel com cqh/cqw */
}

.inicio__foto img {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;            /* centraliza (a animação usa "scale", não briga) */
  width: auto;
  max-width: none;
  /* 90 % da altura do painel, mas nunca mais larga que ~1,08 × a largura dele
     (em telas quase quadradas o cabelo seria cortado pelas laterais) */
  height: min(90cqh, 135cqw);
  transform-origin: 50% 100%;
}

/* --------------------------------------------------------------------------
   6.2 SOBRE MIM
   -------------------------------------------------------------------------- */
.sobre__visual,
.sobre__visual > [data-parallax] {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Selo circular girando devagar, com o retrato no centro */
.sobre__selo {
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 1 / 1;
}

.sobre__anel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sobre__retrato {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 50%;
  /* Fundo ardósia + fino anel dourado de 2 px (gradiente da marca) */
  background:
    linear-gradient(var(--ardosia), var(--ardosia)) padding-box,
    var(--ouro) border-box;
  overflow: hidden;
  transform: translate(-50%, -50%);
  box-shadow: var(--sombra);
}

.sobre__retrato img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 50%;
}

.sobre__texto {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sobre__texto .destaque {
  margin-bottom: 0.5rem;
}

.sobre__lista {
  margin-top: 1.5rem;
}

.sobre .marca-dagua {
  right: -8%;
  bottom: -6%;
  width: min(62vw, 720px);
  aspect-ratio: 118.6 / 150.5;
}

/* --------------------------------------------------------------------------
   6.3 A TCC
   -------------------------------------------------------------------------- */
.tcc__destaque {
  margin-bottom: clamp(3.5rem, 8vw, 7rem);
}

.tcc__pilares {
  margin-bottom: clamp(4rem, 9vw, 8rem);
}

.tcc__caracteristicas {
  display: grid;
  gap: 0 var(--gap);
}

.tcc__caracteristica {
  position: relative;
  padding: 1.25rem 0 1.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ardosia-600);
}

.tcc__caracteristica .linha-h {
  position: absolute;
  top: 0;
  left: 0;
}

.tcc__caracteristica .num {
  display: block;
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   6.4 COMO POSSO TE AJUDAR (lista no formato "Proven Partnerships")
   -------------------------------------------------------------------------- */
.ajuda__intro {
  margin-top: -1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.ajuda__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.5rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.ajuda__item .linha-h {
  position: absolute;
  top: 0;
  left: 0;
}

.ajuda__item .linha-h--base {
  top: auto;
  bottom: 0;
}

.ajuda__titulo {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.1;
  transition: color 0.35s ease;
}

.ajuda__tema {
  display: inline-block;
  transition: transform 0.35s var(--ease-suave);
}

.ajuda__titulo a {
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
}

/* "Link esticado": a linha inteira é clicável */
.ajuda__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ajuda__titulo a:focus-visible {
  outline: none;
}

.ajuda__item:has(a:focus-visible) {
  outline: 2px solid var(--ardosia-600);
  outline-offset: 4px;
  border-radius: 6px;
}

.ajuda__seta {
  display: inline-flex;
  width: 0.7em;
  height: 0.7em;
  flex: none;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.35s ease, transform 0.35s var(--ease-suave);
}

.ajuda__seta .icone {
  width: 100%;
  height: 100%;
  stroke-width: 1.25;
}

.ajuda__num {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding-top: 0.6rem;
}

/* Descrição: sempre visível em telas de toque; no computador abre no hover/foco */
.ajuda__desc {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s ease;
}

.ajuda__desc > div {
  min-height: 0;
  overflow: hidden;
}

.ajuda__desc p {
  padding-top: 0.75rem;
}

.ajuda__fecho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}

.ajuda__chamada {
  font-family: var(--fonte-titulos);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.25;
  color: var(--ardosia);
  max-width: 30ch;
}

.ajuda__nota {
  margin-top: 1rem;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   6.5 COMO FUNCIONA
   -------------------------------------------------------------------------- */
.funciona__passos {
  margin-bottom: clamp(4rem, 8vw, 7rem);
}

.funciona__sessao {
  display: grid;
  gap: 1.5rem;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linha);
}

.funciona__sessao h3 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}


/* --------------------------------------------------------------------------
   6.6 FRASE EM DESTAQUE (faixa ardósia)
   -------------------------------------------------------------------------- */
.frase {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(6rem, 12vw, 11rem);
  background-color: var(--ardosia);
  color: var(--creme);
}

.frase__conteudo {
  position: relative;
  z-index: 1;
}

/* Só texto grande nesta faixa (contraste 3,9:1) */
.frase__texto {
  max-width: 15em;
  font-family: var(--fonte-titulos);
  font-weight: var(--peso-titulos);
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  line-height: 1.08;
  color: var(--creme);
  text-wrap: balance;
}

.frase__simbolo {
  position: absolute;
  top: 50%;
  right: max(-10vw, -140px);
  z-index: 0;
  width: min(70vw, 520px);
  aspect-ratio: 118.6 / 150.5;
  transform: translateY(-50%);
  opacity: 0.15;                  /* no celular ele passa atrás do texto: bem sutil */
  pointer-events: none;
}

.frase__simbolo-parallax {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   6.7 DÚVIDAS (acordeão)
   -------------------------------------------------------------------------- */
.duvida {
  position: relative;
}

.duvida .linha-h {
  position: absolute;
  top: 0;
  left: 0;
}

.duvida .linha-h--base {
  top: auto;
  bottom: 0;
}

.duvida__pergunta {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.3;
  color: var(--ardosia-600);  /* texto menor que 24 px: ardósia escura */
}

.duvida__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  min-height: 48px;
  padding-block: clamp(1.4rem, 2.5vw, 1.9rem);
  font-family: inherit;
  font-weight: inherit;
  text-align: left;
  color: inherit;
  border-radius: 4px;
}

.duvida__icone {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid rgb(93 102 121 / 0.45);
  border-radius: 50%;
  transition: transform 0.5s ease, background-color 0.25s ease, color 0.25s ease;
}

/* "+" desenhado com duas linhas; gira 45° e vira "×" */
.duvida__icone::before,
.duvida__icone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  margin: -0.75px 0 0 -7px;
  background-color: currentColor;
}

.duvida__icone::after {
  transform: rotate(90deg);
}

.duvida__botao[aria-expanded="true"] .duvida__icone {
  transform: rotate(45deg);
}

.duvida__botao:hover .duvida__icone {
  background-color: var(--ardosia-600);
  color: var(--creme);
}

/* Sem JavaScript todas as respostas ficam abertas; com JS, o acordeão controla */
.duvida__resposta {
  overflow: hidden;
}

.js .duvida__resposta {
  max-height: 0;
  visibility: hidden;
  transition: max-height 0.5s ease, visibility 0s linear 0.5s;
}

.js .duvida.aberta .duvida__resposta {
  visibility: visible;
  transition: max-height 0.5s ease, visibility 0s linear 0s;
}

/* A primeira dúvida já vem aberta no HTML */
.js .duvida.aberta.inicial .duvida__resposta {
  max-height: none;
}

.no-js .duvida__icone {
  display: none;
}

.duvida__conteudo {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding-right: clamp(0rem, 6vw, 5rem);
}

.duvida__conteudo p + p {
  margin-top: 0.85rem;
}

/* --------------------------------------------------------------------------
   6.8 CONTATO (cartão ardósia)
   -------------------------------------------------------------------------- */
.contato {
  padding-bottom: calc(var(--espaco-secao) + 4rem);  /* espaço para a pílula */
}

.contato__cartao {
  display: grid;
  gap: 2.5rem;
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: var(--raio-cartao);
  background-color: var(--ardosia-600);
  color: var(--creme);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.contato__texto {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.contato__titulo {
  color: var(--creme);
}

.contato__texto > p:not(.rotulo) {
  color: var(--creme);
}

.contato__escolha {
  margin-top: 0.75rem;
}

.contato__botoes {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  max-width: 420px;
}

.contato__aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  max-width: 46ch;
  font-size: 0.875rem;
  line-height: 1.6;
}

.contato__aviso .icone {
  margin-top: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
}

/* Área decorativa: padrão da marca (opacidade total, sem texto) + símbolo */
.contato__deco {
  position: relative;
  z-index: 1;
  min-height: 320px;
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--ardosia);
  background-image: url("../img/marca/padrao-simbolos.svg");
  background-size: 53.4px 133.4px;
  background-position: center;
}

/* Cortina (painel da cor do cartão que sobe; ver movimento.css) */
.cortina::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--ardosia-600);
  transform: translateY(-100%);
}

.contato__capa {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(62%, 260px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--ardosia-600);
  box-shadow: 0 20px 60px rgb(44 48 58 / 0.25);
  transform: translate(-50%, -50%);
}

.contato__capa svg {
  width: 46%;
  height: auto;
  aspect-ratio: 118.6 / 150.5;
  fill: url(#ouro);
}

/* --------------------------------------------------------------------------
   6.9 RODAPÉ
   -------------------------------------------------------------------------- */
.rodape {
  position: relative;
  overflow: hidden;
  background-color: var(--ardosia-600);
  color: var(--creme);
}

/* Padrão da marca a no máximo 6 % (acima disso o texto perde contraste) */
.rodape__padrao {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/marca/padrao-simbolos.svg");
  background-size: 53.4px 133.4px;
  opacity: 0.06;
  pointer-events: none;
}

/* Símbolo gigante só em contorno, a 12 %, no canto direito */
.rodape__simbolo {
  display: none;                 /* no celular não há espaço livre de texto */
  position: absolute;
  right: -60px;
  bottom: 124px;
  z-index: 0;
  width: 280px;
  aspect-ratio: 118.6 / 150.5;
  color: var(--creme);
  opacity: 0.12;
  pointer-events: none;
}

.rodape__simbolo use {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.35;
}

.rodape__conteudo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
  padding-top: clamp(4rem, 9vw, 7rem);
  padding-bottom: calc(2rem + 76px);  /* espaço para a pílula no celular */
}

.rodape__topo {
  display: grid;
  gap: 2.5rem;
}

.rodape__logo {
  display: block;
  width: min(280px, 100%);
  border-radius: 6px;
}

.rodape__logo img {
  width: 100%;
}

.rodape__coluna {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rodape__lista {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.rodape__link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  font-size: 0.9375rem;
  color: var(--creme);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.rodape__link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.rodape__aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  max-width: 70ch;
  padding: 1.25rem 1.4rem;
  border: 1px solid rgb(254 242 229 / 0.35);
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--creme);
}

.rodape__aviso .icone {
  margin-top: 0.2rem;
}

.rodape__aviso a {
  color: inherit;
  font-weight: 600;
}

.rodape__filete {
  width: 100%;
}

.rodape__barra {
  display: flex;
  flex-direction: column;
  gap: 0.5rem 2rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--creme);
}

.rodape__barra p {
  max-width: none;
}

.rodape__barra-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
}

.rodape__barra a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--creme);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.rodape__barra a:hover {
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   6.10 PÁGINAS INTERNAS (política de privacidade)
   Cabeçalho simples (logo + "Voltar ao início"), texto numa coluna de
   leitura e rodapé estático. O rodapé revelado da página inicial é
   desligado pelas classes .pagina--simples e .rodape--estatico (as regras
   que vencem a media query do rodapé revelado estão no fim deste arquivo).
   -------------------------------------------------------------------------- */

/* Cabeçalho simples: botão "Voltar ao início" à direita */
.cabecalho__voltar {
  flex: none;
}

/* No celular só cabe "Voltar": o resto sai da tela, mas o leitor de tela
   continua lendo "Voltar ao início" (mesma técnica do .sr-only) */
@media (max-width: 639px) {
  .cabecalho__voltar-resto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* Área do texto: começa abaixo do cabeçalho fixo */
.privacidade {
  position: relative;
  padding-top: calc(var(--altura-header) + clamp(3rem, 8vw, 6.5rem));
  padding-bottom: var(--espaco-secao);
  background-color: var(--creme);
  overflow: hidden;              /* navegadores antigos */
  overflow: clip;                /* corta a marca d'água sem criar rolagem */
}

/* O conteúdo fica acima da marca d'água */
.privacidade__conteudo {
  position: relative;
  z-index: 1;
}

/* Marca d'água: símbolo gigante a 6 % à direita, como no timbrado do manual */
.privacidade .marca-dagua {
  top: clamp(7rem, 16vw, 12rem);
  right: -14%;
  width: min(72vw, 760px);
  aspect-ratio: 118.6 / 150.5;
}

/* Título, data de atualização e filete dourado */
.privacidade__topo {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.privacidade__data {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ardosia-600);
}

.privacidade__filete {
  width: 100%;
  margin-top: 0.5rem;
}

/* Coluna de leitura confortável (a mesma medida dos parágrafos do site) */
.privacidade__texto {
  max-width: 62ch;
  overflow-wrap: break-word;     /* e-mails e endereços longos quebram no celular */
}

.privacidade__texto p {
  max-width: none;
}

.privacidade__intro {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
}

/* "Em resumo": lista com filetes (mesmo componente do "Sobre mim") */
.privacidade__resumo {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.privacidade__resumo .rotulo {
  margin-bottom: 1rem;
}

/* Cada tópico: filete no topo (que se desenha), título numerado e texto */
.privacidade__topico {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.privacidade__topico .linha-h {
  position: absolute;
  top: 0;
  left: 0;
}

/* Títulos dos tópicos no tamanho do h3 (≥ 24 px, por isso podem ser ardósia) */
.privacidade__topico h2 {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 0.4rem;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.15;
}

.privacidade__topico h2 .num {
  flex: none;
}

/* Listas do texto, com um traço fino no lugar da bolinha */
.privacidade__lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.privacidade__lista li {
  position: relative;
  padding-left: 1.5rem;
}

.privacidade__lista li::before {
  content: "";
  position: absolute;
  top: 0.85em;                   /* meio da primeira linha */
  left: 0;
  width: 0.75rem;
  height: 1px;
  background-color: var(--ardosia);
}

/* Ficha da responsável (cartão branco) */
.privacidade__ficha {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: 20px;
  background-color: var(--branco);
  box-shadow: var(--sombra);
}

.privacidade__ficha dd {
  margin-top: 0.3rem;
  overflow-wrap: anywhere;
}

/* Aviso em destaque (dados de saúde) */
.privacidade__aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background-color: rgb(255 255 255 / 0.6);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.privacidade__aviso .icone {
  margin-top: 0.2rem;
  color: var(--ardosia-600);
}

/* Rodapé estático: sem o espaço extra da pílula (estas páginas não têm pílula) */
.rodape--estatico .rodape__conteudo {
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}


/* ==========================================================================
   7. RESPONSIVO (celular primeiro: estas regras valem de uma largura para cima)
   ========================================================================== */

/* --- Telas muito estreitas (até 374 px): título um pouco menor --- */
@media (max-width: 374px) {
  h1 {
    font-size: 2.25rem;
  }

  .botao {
    letter-spacing: 0.16em;
    padding-inline: 1.2rem;
  }

  .pilula__link,
  .pilula__cta {
    padding-inline: 10px;
    letter-spacing: 0.1em;
  }
}

/* --- Celulares estreitos (até 419 px): o botão da pílula mostra só o ícone,
       para o nome da seção caber inteiro. O leitor de tela continua lendo "WhatsApp". --- */
@media (max-width: 419px) {
  .pilula__cta {
    padding-inline: 13px;
  }

  .pilula__cta-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* ---------------------------------- 640 px ---------------------------------- */
@media (min-width: 640px) {
  .tcc__caracteristicas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .funciona__passos,
  .tcc__pilares {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rodape__topo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rodape__topo .rodape__marca {
    grid-column: 1 / -1;
  }

  .sobre__selo {
    width: min(420px, 100%);
  }
}

/* ---------------------------------- 768 px ---------------------------------- */
@media (min-width: 768px) {
  .titulo-secao__h2 {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }

  .titulo-secao__titulo {
    max-width: 60%;
    text-align: right;
  }

  .contato__cartao {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(2rem, 4vw, 4rem);
  }

  .contato__deco {
    min-height: 100%;
  }

  .rodape__barra {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .rodape__conteudo {
    padding-bottom: 1.5rem;
  }

  .funciona__sessao {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
    gap: 2rem var(--gap);
  }
}

/* ------------------------ 1024 px (computador/tablet deitado) ------------------------ */
@media (min-width: 1024px) {
  :root {
    --altura-header: 96px;
  }

  .cabecalho__logo {
    width: 190px;
  }

  .nav-principal {
    display: flex;
  }

  .menu-botao,
  .menu-mobile {
    display: none;
  }

  .sobre .grade {
    align-items: center;
  }

  .sobre__visual {
    grid-column: 1 / span 6;
  }

  .sobre__texto {
    grid-column: 7 / -1;
  }

  .sobre__selo {
    width: min(560px, 100%);
  }

  .tcc__pilares {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tcc__caracteristicas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .funciona__passos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .rodape__topo {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: start;
  }

  .rodape__topo .rodape__marca {
    grid-column: auto;
  }

  .rodape__simbolo {
    display: block;
  }

  /* Frase: texto à esquerda e símbolo à direita, sem se cruzarem */
  .frase__texto {
    max-width: 11em;
  }

  .frase__simbolo {
    width: min(45vw, 520px);
    opacity: 0.35;
  }

  /* Ajuda: no computador, a descrição fica recolhida e abre no hover/foco */
  @media (hover: hover) and (pointer: fine) {
    .ajuda__desc {
      grid-template-rows: 0fr;
    }

    .ajuda__item:hover .ajuda__desc,
    .ajuda__item:focus-within .ajuda__desc {
      grid-template-rows: 1fr;
    }

    .ajuda__item:hover .ajuda__titulo,
    .ajuda__item:focus-within .ajuda__titulo {
      color: var(--texto);
    }

    .ajuda__item:hover .ajuda__tema,
    .ajuda__item:focus-within .ajuda__tema {
      transform: translateX(8px);
    }

    .ajuda__item:hover .ajuda__seta,
    .ajuda__item:focus-within .ajuda__seta {
      opacity: 1;
      transform: none;
    }
  }
}

/* Hero lado a lado: computador ou tablet deitado (largura ≥ 1024 e mais largo que alto) */
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .inicio {
    min-height: max(640px, 100svh);
  }

  .inicio__conteudo {
    /* Medidas usadas abaixo (cqw = % da largura do hero):
       --m: margem entre a borda da tela e o texto (igual à do .container)
       --painel-w: largura do painel da foto, nunca maior que a altura dele */
    --m: max(var(--pad), calc((100cqw - 1280px) / 2 + var(--pad)));
    --painel-w: min(44cqw, calc(max(640px, 100svh) - var(--altura-header)));
    min-height: inherit;
    padding-top: calc(var(--altura-header) + 2.5rem);
    padding-bottom: 6.5rem;       /* deixa a faixa inferior acima da pílula */
  }

  /* Coluna de texto: vai da margem até o painel, menos um respiro */
  .inicio__texto,
  .inicio__faixa {
    width: calc(100cqw - var(--painel-w) - var(--m) - clamp(2rem, 4cqw, 4.5rem));
  }

  /* O texto fica centralizado na altura; a faixa, no pé do hero */
  .inicio__texto {
    margin-block: auto;
  }

  .inicio__faixa {
    align-items: flex-end;
  }

  .inicio__faixa .lista-chips {
    flex-direction: column;
    align-items: flex-start;
  }

  .quebra--recuo {
    padding-left: min(7cqw, 6rem);  /* limitado para o verso caber em telas largas */
  }

  .inicio__painel {
    position: absolute;
    top: var(--altura-header);
    right: 0;
    bottom: 0;
    width: min(44cqw, calc(max(640px, 100svh) - var(--altura-header)));
    aspect-ratio: auto;
  }

}

/* Entre 1024 e 1279 px a coluna do hero é estreita: botões mais compactos cabem lado a lado */
@media (min-width: 1024px) and (max-width: 1279px) {
  .inicio__botoes .botao {
    padding-inline: 1.2rem;
    letter-spacing: 0.16em;
  }
}

/* ---------------------------------- 1280 px ---------------------------------- */
@media (min-width: 1280px) {
  .coluna-linha p {
    max-width: 30ch;
  }
}

/* --- Rodapé revelado por baixo (efeito cortina): só em telas grandes e altas --- */
@media (min-width: 768px) and (min-height: 700px) {
  .pagina {
    padding-bottom: 100svh;
  }

  main {
    position: relative;
    z-index: 1;
  }

  .rodape {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .rodape__conteudo {
    justify-content: flex-end;
    min-height: 100%;
    padding-top: calc(var(--altura-header) + 2rem);
  }
}

/* --- Exceções ao rodapé revelado ---
   a) Sem JavaScript: quem navega com Tab focaria links escondidos atrás da página.
   b) Tablets baixos (768–1023 px de largura e menos de 920 px de altura): o
      conteúdo do rodapé não cabe numa tela e seria cortado.
   Nos dois casos ele volta a ser um rodapé normal, no fim da página. */
@media (min-width: 768px) and (min-height: 700px) {
  .no-js .pagina {
    padding-bottom: 0;
  }

  .no-js .rodape {
    position: relative;
    height: auto;
  }

  .no-js .rodape__conteudo {
    min-height: 0;
    padding-top: clamp(4rem, 9vw, 7rem);
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (min-height: 700px) and (max-height: 919px) {
  .pagina {
    padding-bottom: 0;
  }

  .rodape {
    position: relative;
    height: auto;
  }

  .rodape__conteudo {
    min-height: 0;
    padding-top: clamp(4rem, 9vw, 7rem);
  }
}

/* --- Páginas internas (6.10): rodapé estático, sem o efeito cortina ---
   Mesma condição do bloco acima, repetida aqui para desfazê-lo nas páginas
   com .pagina--simples e .rodape--estatico. Por virem depois no arquivo,
   estas regras vencem as de cima sem nenhum truque de prioridade. */
@media (min-width: 768px) and (min-height: 700px) {
  .pagina--simples {
    padding-bottom: 0;
  }

  .rodape--estatico {
    position: relative;
    height: auto;
  }

  .rodape--estatico .rodape__conteudo {
    min-height: 0;
    padding-top: clamp(4rem, 9vw, 7rem);
  }
}


/* ==========================================================================
   Elementos escondidos pelo JavaScript (ex.: contato vazio no config.js)
   Fica no fim para vencer regras como .botao { display: inline-flex }.
   ========================================================================== */
[hidden] {
  display: none;
}