/* ═══════════════════════════════════════════════════════════════════════
   LEAD'S ANATOMY — landing page
   Mobile-first. O bloco base é o celular; cada media query só adiciona.
   Tokens vindos de design-system/leads-anatomy/MASTER.md — todo contraste
   aqui foi calculado (WCAG 2.1), não estimado.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ═══════════════════════════════════════════════════════════════════
     TROCA DE COR DA MARCA: mexer SÓ nestas duas linhas.
     Todo o resto do arquivo é derivado delas e acompanha sozinho.

       --brand-teal        a cor turquesa da marca, como está no manual
       --brand-teal-text   a mesma cor escurecida até passar 4,5:1 de
                           contraste em fundo claro. NÃO dá para derivar
                           por fórmula: tem que ser recalculada quando a
                           turquesa mudar, senão texto turquesa reprova
                           em acessibilidade.

     Paleta em vigor desde a entrega de 13/08/2026. A anterior era
     #00C7B1 / #007E71.
     ═══════════════════════════════════════════════════════════════════ */
  --brand-teal:       #5CE1E6;
  --brand-teal-text:  #147C80;

  /* Laranja de destaque. NÃO é segunda cor de identidade: é cor de função,
     e tem um trabalho só, marcar a expressão operante de cada título.
     Se algum dia ela aparecer com outro significado, o sistema quebra.
     Existe porque ciano não vira texto em fundo claro: o olho é muito
     sensível ao verde, então ciano saturado lê como quase branco (1,43:1),
     enquanto vermelho-laranja continua lendo escuro (4,21:1 no branco). */
  --brand-orange:     #DE4526;

  /* ---- demais primitivas da marca ---- */
  --brand-navy:       #00205B;
  --brand-offwhite:   #F4F4F4;

  /* ---- cor: tokens semânticos, todos derivados das primitivas ---- */
  --color-primary:       var(--brand-navy);
  --color-on-primary:    #FFFFFF;
  --color-accent:        var(--brand-teal);       /* só como fundo ou sobre navy */
  --color-on-accent:     var(--brand-navy);       /* texto dentro do botão turquesa */
  --color-accent-text:   var(--brand-teal-text);  /* turquesa legível em fundo claro */
  --color-background:    var(--brand-offwhite);
  --color-surface:       #FFFFFF;
  --color-foreground:    var(--brand-navy);       /* 14,06:1 sobre background */
  --color-muted-fg:      #5A6B8C;  /* 4,88:1 bg, 5,36:1 surface, 4,53:1 muted */
  --color-muted-on-dark: #758BB5;  /* 4,51:1 sobre navy */
  --color-muted:         #E8ECF4;
  --color-border:        #D3DAE8;
  --color-border-strong: #7F8EAA;  /* 3,01:1, borda de campo */
  --color-destructive:   #B3261E;
  --color-ring:          var(--brand-navy);

  /* Estados do botão, escurecidos a partir da própria turquesa.
     Assim o hover acompanha a troca de cor sem edição manual. */
  --color-accent-hover:  color-mix(in srgb, var(--brand-teal) 92%, #000);
  --color-accent-active: color-mix(in srgb, var(--brand-teal) 84%, #000);

  /* ---- tipografia ---- */
  --font-display: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- espaçamento (densidade 3/10 — espaçoso) ---- */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* ---- raio e sombra ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 32, 91, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 32, 91, 0.08);
  --shadow-lg: 0 10px 24px rgba(0, 32, 91, 0.12);

  /* ---- layout ---- */
  --container: 75rem;   /* 1200px */
  --gutter:    1.25rem;
}


/* ═══ FONTES ══════════════════════════════════════════════════════════════
   Auto-hospedadas. Antes vinham do CDN do Google, o que trazia três
   incômodos: dependência de um serviço de fora para o site renderizar certo,
   uma conexão a mais antes do texto aparecer, e o IP de cada visitante
   passando pelo Google, que é ponto de atenção de LGPD num site que atende
   profissionais de saúde.

   Só os subconjuntos latin e latin-ext. Cirílico, grego e devanágari vinham
   junto no pacote do Google e esta página nunca vai usar.

   font-display: swap — o texto aparece na hora com a fonte do sistema e
   troca quando a da marca carrega, em vez de deixar a tela em branco.

   Para trocar de fonte um dia: baixar os .woff2, jogar em assets/fontes e
   ajustar os blocos abaixo. Nada mais no arquivo precisa mudar.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fontes/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fontes/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fontes/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fontes/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fontes/ubuntu-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fontes/ubuntu-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fontes/ubuntu-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fontes/ubuntu-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ═══ RESET ══════════════════════════════════════════════════════════════ */

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

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

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: 1rem;          /* 16px — abaixo disso o iOS dá zoom no foco */
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;       /* trava definitiva contra scroll lateral */
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}

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

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

a { color: inherit; text-decoration: none; }

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

strong { font-weight: 500; }

/* Foco visível em tudo que recebe foco — nunca remover */
:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: 2px;
}
.surface-inverse :focus-visible,
.site-header__bar :focus-visible,
.site-footer :focus-visible {
  outline-color: #FFFFFF;   /* o ring navy sumiria sobre navy */
}
.site-header__top :focus-visible {
  outline-color: var(--color-primary);  /* sobre turquesa, o branco é que sumiria */
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: top 160ms ease;
}
.skip-link:focus { top: var(--space-sm); }


/* ═══ UTILITÁRIOS ════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.center { text-align: center; }

/* Empilhamento vertical com respiro, para blocos de texto + lista */
.stack { display: grid; gap: var(--space-lg); }

/* Turquesa puro só sobre navy. Em fundo claro, a variante escura. */
.accent-on-dark  { color: var(--color-accent); }
/* UM sistema de destaque para a página inteira: a expressão operante do
   título fica em laranja, em fundo claro e em fundo escuro, no hero e nas
   seções. Antes eram dois sistemas competindo, laranja no hero e marcador
   turquesa nas demais, o que é a mesma função dita de duas formas.

   O marcador turquesa foi descartado por ser um device gráfico: ele chama
   atenção para si em vez de para a palavra, e destoa de uma página que é
   deliberadamente sóbria. */
/* A REGRA: o destaque é sempre a mesma função, marcar a expressão operante
   do título. A cor não é fixa, é a que lê melhor naquele fundo. Laranja no
   claro (4,21:1), turquesa no escuro (9,85:1). Não são dois sistemas: é um
   sistema com regra de contexto, como faz a Dasa.

   A pontuação final fica FORA do span. Ponto e interrogação pertencem à
   frase, não à expressão destacada. */
.accent-on-light { color: var(--brand-orange); }
.accent-on-dark  { color: var(--brand-teal); }

/* A expressão destacada não parte no meio. Partida em duas linhas ela deixa
   de ler como unidade e o destaque perde a função. Testado a 375px: a maior
   delas ocupa 227px dos 335px disponíveis. */
.accent-on-light,
.accent-on-dark { white-space: nowrap; }

/* Ícone de CONCEITO (escudo, pessoa, gráfico, selo): o desenho não tem
   círculo próprio, então a pastilha turquesa funciona como moldura.
   Navy dentro do turquesa dá 9,85:1. */
.pillar .icon,
.bento__text .icon {
  color: var(--color-on-accent);
  background: var(--brand-teal);
  border-radius: 50%;
  padding: 0.34rem;
  box-sizing: content-box;
  overflow: visible;
}

/* Ícone de LISTA em fundo claro: mesma pastilha, só que menor, porque ele
   fica na linha do texto e não no topo de um card. O tique perdeu o círculo
   do desenho justamente para caber aqui dentro. */
.checklist .icon {
  color: var(--color-on-accent);
  background: var(--brand-teal);
  border-radius: 50%;
  padding: 0.28rem;
  box-sizing: content-box;
  overflow: visible;
  margin-top: 0.1rem;
}

/* Sobre navy o turquesa já lê em 9,85:1, então ali o tique continua sendo
   traço, sem pastilha. */
.surface-inverse .icon {
  color: var(--color-accent);
  background: none;
  padding: 0;
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--color-accent-text);
}
.icon--lg { width: 2rem; height: 2rem; }

.surface-inverse {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.surface-inverse .icon { color: var(--color-accent); }


/* ═══ PLACEHOLDER DE IMAGEM ══════════════════════════════════════════════
   aspect-ratio declarado via --ratio: reserva o espaço exato antes de a
   imagem existir, então trocar o placeholder pela <img> real não causa
   salto de layout (CLS = 0).
   ═══════════════════════════════════════════════════════════════════════ */

.ph {
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 16 / 9);
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.ph__label {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-muted-fg);   /* 4,53:1 sobre #E8ECF4 */
  text-align: center;
}


/* ═══ BOTÕES ═════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;            /* 44px — alvo de toque */
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);  /* 7,22:1 — AAA */
}
.btn--primary:hover  { background: var(--color-accent-hover); }
.btn--primary:active { background: var(--color-accent-active); }

.btn--block { width: 100%; }

/* Botão navy: usado sobre a faixa turquesa, onde o botão turquesa sumiria.
   Branco sobre navy dá 15,47:1. */
.btn--dark {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn--dark:hover  { background: #002F85; }
.btn--dark:active { background: #003AA3; }


/* ═══ CARD ═══════════════════════════════════════════════════════════════
   Sem cursor:pointer — nenhum destes cards leva a lugar nenhum. Prometer
   clique onde não há é pior do que não ter hover.
   ═══════════════════════════════════════════════════════════════════════ */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}


/* ═══ SEÇÃO ══════════════════════════════════════════════════════════════ */

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-lg); }
.section--muted { background: var(--color-background); }
.section:not(.surface-inverse):not(.section--muted) { background: var(--color-surface); }

.section__title {
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem);
  margin-bottom: var(--space-md);
}
.section__title--center {
  text-align: center;
  margin-inline: auto;
  max-width: 34ch;
  margin-bottom: var(--space-xl);
}


/* ═══ DOBRA 0 — CABEÇALHO ════════════════════════════════════════════════ */

/* Duas faixas: turquesa em cima com logo e CTA, navy embaixo com a navegação
   centralizada. A faixa turquesa é o que tira o peso morto do cabeçalho antigo,
   que era um bloco navy único emendando direto no hero, também navy. */

.site-header__top {
  background: var(--color-accent);
  padding-block: var(--space-md);
}
.site-header__top-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;        /* alvo de toque, mesmo com a logo baixa */
}
/* Assinatura só com o nome, sem o símbolo: sem ele o nome deixa de dividir
   espaço e ganha corpo. Referência medida no site do Alta, onde a logo ocupa
   42% da altura da faixa e 6,2% da largura da tela. */
.site-header__logo img { width: clamp(13rem, 46vw, 19rem); height: auto; }

.site-header__bar {
  background: var(--color-primary);
  /* Separa a faixa do hero, que também é navy, sem inventar um terceiro tom */
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.14);
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  font-size: 0.9375rem;
  color: var(--color-on-primary);
}
.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;        /* 44px de alvo de toque, sem mexer no visual */
  border-bottom: 2px solid transparent;
  transition: border-color 200ms ease, color 200ms ease;
}
.site-nav__list a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* No celular a faixa de navegação inteira some: sobra a faixa turquesa com logo
   e CTA, e a navegação acontece pela rolagem. Evita hambúrguer com JS numa
   landing de página única. Volta em ≥64em (1024px). */
.site-header__bar { display: none; }

@media (min-width: 64em) {
  .site-header__bar { display: block; }
  .site-header__top-inner { flex-wrap: nowrap; }
}


/* ---- botão de menu (só abaixo de 1024px) --------------------------------
   Os três riscos são um span com ::before e ::after. Aberto, o do meio some
   e os outros dois giram formando o X. Sem imagem, sem fonte de ícone. */
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;          /* 44px de alvo de toque */
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 1px solid rgba(0, 32, 91, 0.35);
  border-radius: var(--radius-sm);
  color: var(--color-primary);   /* navy sobre a faixa turquesa */
  cursor: pointer;
}
.menu-btn__texto { font-size: 0.9375rem; font-weight: 500; }

.menu-btn__risco,
.menu-btn__risco::before,
.menu-btn__risco::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.menu-btn__risco { position: relative; }
.menu-btn__risco::before,
.menu-btn__risco::after { content: ""; position: absolute; left: 0; }
.menu-btn__risco::before { top: -6px; }
.menu-btn__risco::after  { top:  6px; }

/* Estado aberto: o risco do meio some, os das pontas viram X */
.menu-btn[aria-expanded="true"] .menu-btn__risco { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__risco::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__risco::after  { transform: translateY(-6px) rotate(-45deg); }

/* No celular a faixa navy é o painel: fechada por padrão, aberta pelo botão.
   É o MESMO <nav> do desktop, então não há duas listas para manter em dia. */
.site-header__bar[data-aberto="true"] { display: block; }

@media (prefers-reduced-motion: reduce) {
  .menu-btn__risco,
  .menu-btn__risco::before,
  .menu-btn__risco::after { transition: none; }
}

/* Painel vertical, só abaixo do corte. Acima, o menu volta a ser a faixa
   horizontal de sempre e o botão desaparece. */
@media (max-width: 63.999em) {
  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    text-align: left;
  }
  .site-nav__list li + li { border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .site-nav__list a {
    display: flex;
    padding-block: 0.25rem;
    border-bottom: none;
  }
}

@media (min-width: 64em) {
  .menu-btn { display: none; }
}


/* ═══ DOBRA 1 — HERO ═════════════════════════════════════════════════════ */

/* Hero claro, tingido com o turquesa da marca. Era navy até 13/08 e mudou
   por um motivo estrutural: com o hero escuro, a barra de navegação (também
   navy) não tinha nada claro abaixo dela e sumia dentro do bloco. É o mesmo
   mecanismo que faz o cabeçalho do Alta funcionar. */
.hero {
  position: relative;
  background: #EAF7F9;
  color: var(--color-foreground);
  padding-block: var(--space-2xl);
  overflow: hidden;
}
/* Marca d'água: o símbolo ampliado, virado para branco pelo filtro, sangrando
   pelo canto inferior esquerdo. */
.hero::before {
  content: "";
  position: absolute;
  left: -8%;
  bottom: -22%;
  width: 66%;
  height: 135%;
  background: url("assets/simbolo-mono.svg") left bottom / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}
.hero__title {
  font-size: clamp(2rem, 1.35rem + 3vw, 3.25rem);
  margin-bottom: var(--space-md);
  max-width: 20ch;
}
.hero__lead {
  color: var(--color-muted-fg);
  max-width: 46ch;
  margin-bottom: var(--space-lg);
}
/* Sobre fundo claro o anel de foco branco sumiria */
.hero :focus-visible { outline-color: var(--color-ring); }

.hero__media {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #E3F0F2;
  box-shadow: 0 18px 40px rgba(0, 32, 91, 0.10);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 64em) {
  .hero { padding-block: var(--space-3xl); }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2xl);
  }
}


/* ═══ DOBRA 2 — O PROBLEMA ═══════════════════════════════════════════════
   A frase fecha o hero numa faixa navy cheia, no mesmo espírito da barra de
   navegação, e os dois parágrafos seguem abaixo em fundo claro.
   ═══════════════════════════════════════════════════════════════════════ */

#visibilidade { padding-block: 0; background: var(--color-surface); }

.statement-band {
  background: var(--color-primary);
  color: var(--color-on-primary);
  /* 1,3rem deixa a faixa em ~79px: entre a barra de menu (44px) e a faixa
     turquesa do topo (101px). Abaixo disso a frase encosta nas bordas. */
  padding-block: 1.3rem;
  padding-inline: var(--gutter);
  text-align: center;
}
.statement-band__title {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
  line-height: 1.25;
  max-width: 40ch;
  margin-inline: auto;
}

/* Respiro menor em cima que embaixo: os parágrafos são continuação da frase
   da faixa, então ficam perto dela. Espaço igual fazia o texto flutuar. */
#visibilidade .container {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.statement {
  display: grid;
  gap: var(--space-md);
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.statement p {
  color: var(--color-muted-fg);
  max-width: 58ch;
  margin-inline: auto;
}
/* Fecho da dobra. Continua na fonte de CORPO de propósito: com fonte de
   display ele virava concorrente dos títulos de seção. A ênfase vem de três
   sinais discretos somados: navy, peso 500 e 20px.

   Precisa de duas classes: `.statement p` (0,1,1) vence `.statement__close`
   (0,1,0) na especificidade, e a cor de texto secundário ganhava da cor de
   destaque. Com `.statement .statement__close` (0,2,0) a ordem se inverte. */
.statement .statement__close {
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.45;
  max-width: 46ch;
  text-wrap: balance;
}


/* ═══ DOBRA 3 — QUEM SOMOS ═══════════════════════════════════════════════ */

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin-bottom: var(--space-xl); }
.split__text { color: var(--color-muted-fg); max-width: 60ch; }

@media (min-width: 64em) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
  .split .section__title { margin-bottom: 0; max-width: 18ch; }
}

.pillars { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.pillar { display: grid; gap: var(--space-md); align-content: start; }
.pillar p { font-size: 0.9375rem; color: var(--color-muted-fg); }

@media (min-width: 40em) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* ═══ DOBRA 3 — MÉTODO ═══════════════════════════════════════════════════ */

.method {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
}
.method__title { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); }

/* O lema. É curto de propósito, então ganha peso em vez de tamanho de corpo.
   O turquesa entra como fio acima do texto, não como cor de letra: frase
   curta e centralizada não comporta marcador sem ficar pesada. */
.method__lead {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 300;
  color: var(--color-foreground);
  margin: var(--space-sm) auto var(--space-xl);
}
/* O fio dissolve nas duas pontas em vez de terminar em corte reto. Como o
   laranja tem quase três vezes o contraste que o turquesa tinha aqui, a
   mesma barra sólida passou a pesar demais para o que é só um separador. */
.method__lead::before {
  content: "";
  display: block;
  width: 4.5rem;
  height: 3px;
  background: linear-gradient(
    to right,
    transparent,
    var(--brand-orange) 30%,
    var(--brand-orange) 70%,
    transparent
  );
  margin: 0 auto var(--space-md);
}
/* Fecho da dobra, no mesmo peso dos títulos das etapas. Fica na fonte de
   display para casar com eles, mas NÃO leva número nem margem de card, para
   não ser lido como uma quinta etapa. */
.method__foot {
  color: var(--color-foreground);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.4;
  max-width: 52ch;
  margin: var(--space-xl) auto 0;
  text-wrap: balance;
}

/* As quatro etapas do protocolo. Ordem importa, então são numeradas e a
   marcação é <ol>, não <ul>: a sequência é informação, não decoração. */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  text-align: left;
}
.steps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
  align-items: start;
}
.steps__num {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
}
.steps__title {
  font-size: 1.0625rem;
  align-self: center;
}
.steps__item p {
  font-size: 0.9375rem;
  color: var(--color-muted-fg);
}

/* Alinhamento entre as etapas.

   Cada etapa é um grid independente, então as linhas de uma não conversavam
   com as das outras: título de duas linhas empurrava o texto para baixo só
   naquela coluna, e as quatro ficavam em alturas diferentes.

   `subgrid` resolve na raiz: as etapas passam a herdar as linhas do grid pai,
   então número, título e texto ficam nas MESMAS faixas horizontais nas quatro.
   Em navegador sem subgrid o layout cai no comportamento antigo, que é o
   desalinhamento, e nada quebra. */
@media (min-width: 48em) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto auto auto);
    gap: var(--space-xl);
  }
}
@media (min-width: 64em) {
  .method { padding: var(--space-xl); }
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    gap: var(--space-lg);
  }
}
@media (min-width: 48em) {
  /* Em duas ou quatro colunas o número sobe para cima do título: a coluna fica
     estreita demais para número e texto lado a lado. */
  .steps__item {
    grid-row: span 3;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    row-gap: var(--space-sm);
  }
  .steps__num { grid-row: auto; }
}


/* ═══ DOBRA 5 — COMO CONDUZIMOS A CONTA ══════════════════════════════════ */

.conducao__lead {
  text-align: center;
  max-width: 52ch;
  margin: calc(var(--space-xl) * -1 + var(--space-sm)) auto var(--space-xl);
  color: #DCE4F2;             /* 11,4:1 sobre navy */
}
.conducao {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.conducao li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
}
.conducao p { font-size: 0.9375rem; color: #DCE4F2; }
.conducao strong { color: var(--color-on-primary); font-weight: 500; }

@media (min-width: 48em) {
  .conducao { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
}


/* ═══ DOBRA 4 — SOLUÇÕES ═════════════════════════════════════════════════ */

/* Sobe o subtítulo para junto do título: .section__title--center já reserva
   var(--space-xl) embaixo, que separaria os dois como se fossem blocos. */
.solucoes__lead {
  text-align: center;
  max-width: 52ch;
  margin: calc(var(--space-xl) * -1 + var(--space-sm)) auto var(--space-xl);
  color: var(--color-muted-fg);
}

/* minmax(0, 1fr) em vez de 1fr: o mínimo automático de um item de grid é o
   min/max-content dele, então uma trilha "auto" ou "1fr" pode crescer além do
   container e furar o layout. O 0 no mínimo autoriza a trilha a encolher. */
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.bento__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.bento__text {
  display: grid;
  gap: var(--space-sm);
  align-content: center;
  background: var(--color-background);
}
.bento__text h3 { font-size: 1.25rem; }
.bento__text p { font-size: 1.0625rem; color: var(--color-muted-fg); }
.bento__media { background: var(--color-muted); }

/* Imagem real no lugar do placeholder. O seletor precisa do nome da tag porque
   .ph (0,1,0) vem antes no arquivo e definiria o display; picture.bento__media
   é (0,1,1) e ganha. Enquanto as outras três dobras seguem com .ph, as duas
   regras convivem sem conflito. */
picture.bento__media {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
}
picture.bento__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 48em) {
  .bento__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .bento__text { padding: var(--space-lg); }
  /* Alterna o lado da ilustração. Na marcação o texto vem sempre primeiro,
     para que a ordem de leitura no celular e no leitor de tela fique certa. */
  .bento__pair--reverse .bento__text  { order: 2; }
  .bento__pair--reverse .bento__media { order: 1; }
}


/* ═══ DOBRA 7 — CONTATO ══════════════════════════════════════════════════ */

.contato { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.contato__copy > p {
  color: var(--color-muted-fg);
  max-width: 46ch;
  margin-bottom: var(--space-lg);
}

/* Botão do WhatsApp em navy, e não no verde da marca deles: o verde entraria
   como quinta cor na página e brigaria com o sistema. Navy também o separa do
   turquesa do botão do formulário, deixando claro que são dois caminhos. */
.contato__whats { margin-top: var(--space-lg); }

.checklist { display: grid; gap: var(--space-md); }
.checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.9375rem;
}

@media (min-width: 64em) {
  .contato { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
}

/* ---- formulário ----
   Rótulo flutuante: em repouso parece placeholder (fiel à referência), mas é
   um <label> de verdade, que sobe ao focar. Placeholder sozinho não é rótulo:
   some quando a pessoa digita e o campo fica sem identificação. */

.form { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.form__title { font-size: 1.125rem; margin-bottom: var(--space-xs); }

.field { position: relative; }

.input {
  width: 100%;
  min-height: 3.25rem;
  padding: 1.35rem 1rem 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  transition: border-color 200ms ease;
}
.input:hover { border-color: var(--color-primary); }

.label {
  position: absolute;
  left: 1rem;
  top: 0.95rem;
  color: var(--color-muted-fg);
  pointer-events: none;
  transition: transform 160ms ease, font-size 160ms ease, color 160ms ease;
  transform-origin: left top;
}
.input:focus + .label,
.input:not(:placeholder-shown) + .label {
  transform: translateY(-0.65rem) scale(0.78);
  color: #0F7A80;
}

.input[aria-invalid="true"] { border-color: var(--color-destructive); }

.hint {
  margin-top: var(--space-xs);
  font-size: 0.8125rem;
  color: var(--color-muted-fg);
}

/* Aviso de privacidade abaixo do botão. Menor que o corpo de propósito: ele
   tranquiliza quem procura, sem competir com o campo que precisa ser preenchido. */
.form__privacy {
  margin-top: var(--space-sm);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-muted-fg);   /* 4,53:1 sobre branco */
  text-align: center;
}

/* Armadilha anti-robô. Fora da tela em vez de display:none, porque robô que
   detecta display:none simplesmente pula o campo e o filtro perde a graça.
   O aria-hidden na marcação já tira ela do leitor de tela. */
.gotcha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ═══ DOBRA 7.5 — FAQ ════════════════════════════════════════════════════

   <details> nativo: abre e fecha sem script. O marcador padrão do navegador
   (triangulinho) muda de desenho em cada um, então some e entra um sinal
   desenhado em CSS, igual em todos.
   ------------------------------------------------------------------------ */

.faq {
  max-width: 46rem;
  margin-inline: auto;
  border-top: 1px solid var(--color-border);
}
.faq__item { border-bottom: 1px solid var(--color-border); }

.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--color-foreground);
  list-style: none;                 /* Firefox */
}
.faq__pergunta::-webkit-details-marker { display: none; }   /* Safari e Chrome */
.faq__pergunta:hover { color: var(--brand-orange); }
.faq__item:focus-within .faq__pergunta { outline: 2px solid var(--color-ring); outline-offset: 3px; }

/* Sinal de mais que vira menos quando abre. Dois traços cruzados: o vertical
   encolhe para zero no estado aberto, o que dá a transição sem depender de
   fonte de ícone nem de imagem. */
.faq__sinal {
  position: relative;
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
}
.faq__sinal::before,
.faq__sinal::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--brand-orange);
  transition: transform .18s ease;
}
.faq__sinal::before { width: 100%; height: 2px; }
.faq__sinal::after  { width: 2px; height: 100%; }
.faq__item[open] .faq__sinal::after { transform: scaleY(0); }

.faq__resposta { padding-bottom: var(--space-md); }
.faq__resposta p {
  color: var(--color-muted-fg);
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: 62ch;
}
.faq__resposta p + p { margin-top: var(--space-sm); }

@media (prefers-reduced-motion: reduce) {
  .faq__sinal::before, .faq__sinal::after { transition: none; }
}


/* Duas faixas com pesos diferentes. Antes era uma pilha de três linhas do
   mesmo tamanho, e o "direitos reservados" competia com a marca. Agora: em
   cima o que alguém pode usar (marca e contato), embaixo o que é obrigação
   legal, menor e mais apagado. */
.site-footer__topo {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
  text-align: center;
}
.site-footer__email {
  color: #FFFFFF;                /* 15,9:1 sobre o navy */
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.site-footer__email:hover { color: var(--color-accent); }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.8125rem;
}
.site-footer__legal a,
.site-footer__prefs { color: #C3D0E6; text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer__legal a:hover,
.site-footer__prefs:hover { color: var(--color-accent); }

/* É <button> porque abre um painel, não navega. Vestido de link para ficar
   igual ao vizinho. */
.site-footer__prefs { padding: 0; background: none; border: 0; font: inherit; cursor: pointer; }
.site-footer__prefs[hidden] { display: none; }

/* O mais apagado da página: obrigação que ninguém lê por vontade */
.site-footer__copy { color: #8FA3C4; }

@media (min-width: 48em) {
  .site-footer__topo {
    grid-auto-flow: column;
    justify-content: space-between;
    justify-items: start;
    align-items: center;
    text-align: left;
  }
  .site-footer__legal { justify-content: flex-start; }
}


/* ═══ AVISO DE COOKIES ═══════════════════════════════════════════════════
   Fica no rodapé da tela, não no meio: barra inferior é o padrão que menos
   atrapalha a leitura, e não exige prender o foco como um modal exigiria.
   Enquanto não houver rastreador configurado, ele nunca é exibido. */

.aviso-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 -6px 24px rgba(0, 32, 91, 0.28);
  /* respeita a faixa do iPhone com barra de gestos */
  padding-block: var(--space-md);
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
}
.aviso-cookies[hidden] { display: none; }

.aviso-cookies__inner {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}
.aviso-cookies__texto {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #DCE4F2;              /* 11,4:1 sobre o navy */
  max-width: 68ch;
}
.aviso-cookies__texto a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 0.2em; }

.aviso-cookies__acoes { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.aviso-cookies__acoes .btn { flex: 1 1 auto; }

/* Sobre o navy, o botão escuro precisa de contorno para não sumir no fundo */
.aviso-cookies .btn--dark { border-color: rgba(255, 255, 255, 0.45); }

@media (min-width: 48em) {
  .aviso-cookies__inner { grid-auto-flow: column; justify-content: space-between; }
  .aviso-cookies__acoes .btn { flex: 0 0 auto; }
}

/* Botão de rever a escolha, no rodapé. Some quando não há o que consentir. */
/* Mesma cor e mesmo sublinhado do link da Política ao lado: os dois são
   link, e antes este ficava na cor do texto legal, parecendo parte da frase. */


/* ═══ PÁGINA DE TEXTO (política de privacidade) ══════════════════════════
   Coluna estreita de propósito: 68 caracteres por linha é a faixa em que o
   olho não se perde ao voltar para a linha seguinte. Documento legal já é
   chato o bastante sem linha longa. */

.doc { max-width: 44rem; margin-inline: auto; }

.doc__titulo { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
.doc__data {
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-muted-fg);
}
.doc__abertura {
  margin-top: var(--space-lg);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.doc h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  font-size: 1.25rem;
}
.doc p { color: var(--color-muted-fg); line-height: 1.7; }
.doc p + p { margin-top: var(--space-sm); }
.doc strong { color: var(--color-foreground); font-weight: 500; }
.doc a {
  color: var(--color-accent-text);   /* turquesa escurecida, 4,6:1 no branco */
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.doc__volta {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}


/* ═══ RODAPÉ ═════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding-block: var(--space-lg);
}
.site-footer__logo { width: 13rem; height: auto; }

/* Endereço e linha legal andam juntos, para o rodapé continuar com dois blocos
   e não virar três colunas espalhadas no desktop. */

@media (min-width: 48em) {
    }


/* ═══ MOVIMENTO REDUZIDO ═════════════════════════════════════════════════
   Respeita quem configurou o sistema para menos animação — vestibular,
   enxaqueca, epilepsia fotossensível.
   ═══════════════════════════════════════════════════════════════════════ */

@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;
  }
}