/* ==========================================================================
   Recuperação BH

   Sistema herdado do atlasys.com.br e do d2un.com.br, que sao a referencia do
   Lucio: Sora, container unico de 1160px, escala de tipo em clamp, raios
   10/16/28, botao em pilula. As CORES continuam sendo as da casa (musgo).

   A regra que estava sendo violada e que causava o "tudo torto": TODO bloco
   comeca na MESMA linha da esquerda. O paragrafo e estreito porque a medida de
   leitura e estreita, mas ele COMECA onde comecam os cartoes, a galeria e o
   titulo. A versao anterior centrava uma coluna de texto e centrava os
   componentes largos em cima dela, entao cada bloco comecava num lugar.

   Outras regras duras:
   - tinta escura em todo texto; nunca verde claro sobre branco
   - medida de leitura no paragrafo (ch), nunca no container
   - movimento so em transform/opacity, a partir do estado visivel
   - H1, chamada principal e botao de WhatsApp nunca animam
   ========================================================================== */

/* --------------------------------------------------------------- 1. fonte */
@font-face {
  font-family: Sora;
  src: url("/fonts/sora-latin.woff2") format("woff2");
  font-weight: 100 800;      /* arquivo variavel: um download cobre todos */
  font-display: swap;
  font-style: normal;
}

/* --------------------------------------------------------------- 2. tokens */
:root {
  /* cor da casa */
  --musgo: #2A430A;          /* assinatura. 11,02:1 no branco */
  --musgo-fundo: #1F3207;    /* estado pressionado */
  --musgo-vivo: #4F6B23;     /* palavra destacada. 4,6:1 no papel */
  --musgo-claro: #A8C46A;    /* so sobre fundo escuro */
  --tinta: #1B2411;          /* corpo de texto. 15,49:1 no papel */
  --tinta-suave: #46503C;    /* texto secundario. 8,19:1 no papel */
  --papel: #FFFFFF;
  --papel-2: #F6F8F1;        /* secao tingida */
  --papel-3: #EEF2E6;        /* superficie dentro da tingida */
  --branco: #FFFFFF;
  --traco: #E3E7DA;
  --traco-forte: #C3CDB2;

  --fonte: Sora, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* escala de tipo */
  --passo--1: clamp(.83rem, .8rem + .15vw, .9rem);
  --passo-0:  clamp(1rem, .96rem + .2vw, 1.08rem);
  --passo-1:  clamp(1.2rem, 1.1rem + .5vw, 1.4rem);
  --passo-2:  clamp(1.5rem, 1.3rem + 1vw, 1.95rem);
  --passo-3:  clamp(1.95rem, 1.6rem + 1.8vw, 2.9rem);
  --passo-4:  clamp(2.5rem, 1.9rem + 3vw, 4rem);

  --maxw: 1160px;
  --gap: clamp(1rem, .6rem + 1.5vw, 2rem);
  --respiro: clamp(3.5rem, 2rem + 6vw, 7rem);
  --raio-sm: 10px;
  --raio: 16px;
  --raio-lg: 28px;
  --sombra: 0 1px 2px rgba(27, 36, 17, .04), 0 8px 24px -16px rgba(27, 36, 17, .18);
  --curva: cubic-bezier(.2, .7, .3, 1);
}

/* ----------------------------------------------------------------- 3. base */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--passo-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

a { color: var(--musgo); }

:focus-visible {
  outline: 3px solid var(--musgo);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--papel-3); color: var(--tinta); }

/* O container. UM so, e todo bloco da pagina nasce dele. */
.topo__interno,
.secao__interno,
.migalha,
.rodape {
  width: min(100% - 2.5rem, var(--maxw));
  margin-inline: auto;
}

/* ----------------------------------------------------------- 4. tipografia */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--tinta);
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h1 { font-size: var(--passo-4); font-weight: 700; }
h2 { font-size: var(--passo-3); font-weight: 700; }
h3 { font-size: var(--passo-1); font-weight: 600; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

/* A palavra que carrega o sentido da frase, na cor da casa. Uma por titulo. */
.destaque { color: var(--musgo-vivo); }

/* Medida de leitura no PARAGRAFO. O bloco continua comecando na borda do
   container; e o texto que para antes, nao que comeca depois. */
.texto p,
.texto li { max-width: 62ch; }

.texto ul,
.texto ol { margin: 0 0 1.2rem; padding-left: 1.15rem; }
.texto li { margin-bottom: .45rem; }

/* Link de texto SEM sublinhado: cor e peso distinguem, e o sublinhado só
   aparece ao passar o mouse ou ao focar. Sublinhado permanente num texto
   longo picota a leitura e é o que deixa a página com cara de documento.
   `:not([class])` é obrigatório: sem ele esta regra ganha de `.cta` por
   especificidade e pinta o rótulo do botão de verde sobre verde, que some. */
.texto a:not([class]) {
  color: var(--musgo);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s var(--curva);
}
.texto a:not([class]):hover,
.texto a:not([class]):focus-visible { border-bottom-color: var(--musgo); }

/* Sobrancelha: fio curto + rotulo tracked. Igual em toda secao. */
.secao__rotulo,
.topo__nota,
.rotulo,
.resposta__rotulo,
.faixa__rotulo,
.slides__conta {
  display: block;
  font-size: var(--passo--1);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 .9rem;
}

.secao__rotulo::before,
.topo__nota::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 2px;
  vertical-align: middle;
  margin-right: .7rem;
  background: var(--musgo-vivo);
}

.fonte-oficial {
  font-size: var(--passo--1);
  line-height: 1.6;
  color: var(--tinta-suave);
  max-width: 62ch;
  margin: 1.25rem 0 0;
  padding-left: .9rem;
  border-left: 2px solid var(--traco);
}

/* ---------------------------------------------------- 5. pular para o texto */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--musgo);
  color: var(--branco);
  font-size: var(--passo--1);
  font-weight: 600;
  padding: .85rem 1.1rem;
  border-radius: 0 0 var(--raio-sm) 0;
  text-decoration: none;
}
.pular:focus { left: 0; top: 0; }

/* ------------------------------------------------------------ 6. cabeçalho */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--traco);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.5rem;
  padding: .7rem max(1.25rem, calc((100% - var(--maxw)) / 2));
}

html { scroll-padding-top: 5rem; }

.cabecalho__marca {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.cabecalho__marca img { width: 205px; height: 44px; }

.cabecalho__nav {
  order: 3;
  flex: 1 0 100%;
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  padding-top: .5rem;
  border-top: 1px solid var(--traco);
  scrollbar-width: none;
}
.cabecalho__nav::-webkit-scrollbar { display: none; }

.cabecalho__nav a {
  flex: none;
  font-size: var(--passo--1);
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.cabecalho__nav a:hover,
.cabecalho__nav a:focus-visible { border-bottom-color: var(--musgo); }
.cabecalho__nav a[aria-current="page"] {
  color: var(--musgo);
  border-bottom-color: var(--musgo);
}

.cabecalho__tel {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  background: var(--musgo);
  color: var(--branco);
  font-size: var(--passo--1);
  font-weight: 600;
  text-decoration: none;
  padding: .7rem 1.15rem;
  border-radius: 999px;
  white-space: nowrap;
}
.cabecalho__tel:hover { background: var(--musgo-fundo); }
.cabecalho__tel:focus-visible { outline-color: var(--tinta); }

@media (min-width: 62rem) {
  .cabecalho { flex-wrap: nowrap; }
  .cabecalho__nav {
    order: 0;
    flex: 0 1 auto;
    gap: 1.6rem;
    margin-left: auto;
    overflow: visible;
    padding-top: 0;
    border-top: 0;
  }
  .cabecalho__nav a { font-size: var(--passo-0); }
  .cabecalho__tel { margin-left: 0; }
}

.cabecalho--rolado { box-shadow: 0 6px 24px -12px rgba(27, 36, 17, .28); }

/* No celular o lockup inteiro, o telefone e o botao do menu nao cabem na mesma
   linha e o botao quebrava para uma linha so dele. Os tres encolhem juntos, em
   vez de esconder o telefone — que e a conversao principal. */
@media (max-width: 34rem) {
  .cabecalho { gap: .5rem; padding-inline: .9rem; }
  .cabecalho__marca img { width: 152px; height: 33px; }
  .cabecalho__tel { font-size: .75rem; padding: .55rem .8rem; }
}

/* -------------------------------------------------------- 7. menu de celular
   O botao so existe com JavaScript. A classe `js-menu` entra numa linha do
   <head>, antes da primeira pintura: marcada no main.js (que e defer) a tira
   de links pintava e sumia, encolhendo o cabecalho com a pagina ja na tela. */
.menu-botao { display: none; }

@media (max-width: 61.999rem) {
  .js-menu .menu-botao {
    order: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 1px solid var(--traco-forte);
    border-radius: 999px;
    background: transparent;
    color: var(--musgo);
    cursor: pointer;
  }
  .js-menu .menu-botao:focus-visible { outline-color: var(--musgo); }

  .menu-botao__barras,
  .menu-botao__barras::before,
  .menu-botao__barras::after {
    display: block;
    width: 1.15rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
  }
  .menu-botao__barras { position: relative; }
  .menu-botao__barras::before,
  .menu-botao__barras::after {
    content: "";
    position: absolute;
    left: 0;
    transition: transform 200ms var(--curva);
  }
  .menu-botao__barras::before { top: -.38rem; }
  .menu-botao__barras::after  { top: .38rem; }

  .menu-botao[aria-expanded="true"] .menu-botao__barras { background: transparent; }
  .menu-botao[aria-expanded="true"] .menu-botao__barras::before { transform: translateY(.38rem) rotate(45deg); }
  .menu-botao[aria-expanded="true"] .menu-botao__barras::after  { transform: translateY(-.38rem) rotate(-45deg); }

  .js-menu .cabecalho__tel { order: 1; }
  .js-menu .cabecalho__nav { display: none; }
  .js-menu .cabecalho__nav[data-aberto] {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding-top: .25rem;
  }
  .js-menu .cabecalho__nav[data-aberto] a {
    padding: .9rem .25rem;
    border-bottom: 1px solid var(--traco);
    border-top: 0;
  }
  .js-menu .cabecalho__nav[data-aberto] a:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------- 8. migalha */
.migalha { padding-top: 1.5rem; }

.migalha ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
  margin: 0;
  padding: 0;
  font-size: var(--passo--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.migalha a {
  color: var(--musgo);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.migalha a:hover,
.migalha a:focus-visible { border-bottom-color: var(--musgo); }
.migalha li + li::before {
  content: "/";
  margin-right: .35rem;
  color: var(--traco-forte);
}

/* ------------------------------------------------------------------ 9. topo */
.topo { padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0 clamp(2.5rem, 1.5rem + 3vw, 4rem); }

/* o H1 e o LCP: pinta no primeiro quadro, nunca anima */
.topo__titulo {
  font-size: var(--passo-4);
  margin: 0;
  max-width: 14ch;
}

.topo__linha {
  font-size: var(--passo-1);
  line-height: 1.5;
  font-weight: 400;
  color: var(--tinta-suave);
  max-width: 46ch;
  margin: 1.4rem 0 0;
}

.topo__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.topo__foto { margin: 2.25rem 0 0; line-height: 0; }

.topo__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: var(--raio-lg);
}

.topo__legenda {
  font-size: var(--passo--1);
  line-height: 1.5;
  color: var(--tinta-suave);
  margin: .75rem 0 0;
}

/* Duas colunas no desktop, DENTRO do container: o texto continua comecando na
   mesma linha da esquerda de todo o resto da pagina. A sobrancelha e o corpo
   empilham na coluna 1; a foto ocupa a coluna 2 nas duas linhas. */
@media (min-width: 62rem) {
  .topo--foto .topo__interno {
    display: grid;
    /* A coluna do texto e a maior: com as duas quase iguais os dois botoes do
       topo nao cabiam lado a lado e empilhavam. */
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: clamp(2rem, 1rem + 3vw, 4rem);
  }
  .topo--foto .topo__nota { grid-column: 1; grid-row: 1; }
  .topo--foto .topo__corpo { grid-column: 1; grid-row: 2; }
  .topo--foto .topo__foto {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0;
  }

  /* Os selos atravessam as duas colunas, abaixo da foto: espremidos na coluna
     do texto, "todos os dias, inclusive de madrugada" quebrava em quatro
     linhas dentro de uma caixa de dois dedos de largura. */
  .topo--foto .selos {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: clamp(2rem, 1rem + 2vw, 3rem);
  }
  /* Quadrada, nao retrato: em 4/5 a foto ficava bem mais alta que a coluna do
     texto e abria um vao morto entre os botoes e os selos. */
  .topo--foto .topo__foto img { aspect-ratio: 1 / 1; }
}

/* ------------------------------------------------------ 10. selos do topo */
.selos {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 2.25rem 0 0;
  padding: 0;
  background: var(--traco);
  border: 1px solid var(--traco);
  border-radius: var(--raio);
  overflow: hidden;
}

@media (min-width: 34rem) {
  .selos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.selos li { background: var(--papel); padding: 1.05rem 1.2rem; }

.selos strong {
  display: block;
  font-size: var(--passo-1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--musgo);
}

.selos span {
  display: block;
  font-size: var(--passo--1);
  line-height: 1.45;
  color: var(--tinta-suave);
  margin-top: .25rem;
}

/* -------------------------------------- 11. assinatura: resposta em colchete
   Um bloco por pagina: a resposta curta a pergunta que a pessoa digitou.
   Marcado por dois cantos em colchete, o motivo da casa. */
.resposta {
  position: relative;
  margin: 2.25rem 0 0;
  padding: 1.6rem 1.7rem;
  background: var(--papel-2);
  border-radius: var(--raio);
  max-width: 62ch;
}
.resposta::before,
.resposta::after {
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  pointer-events: none;
}
.resposta::before {
  top: 0; left: 0;
  border-top: 2px solid var(--musgo);
  border-left: 2px solid var(--musgo);
  border-radius: var(--raio) 0 0 0;
}
.resposta::after {
  right: 0; bottom: 0;
  border-right: 2px solid var(--musgo);
  border-bottom: 2px solid var(--musgo);
  border-radius: 0 0 var(--raio) 0;
}
.resposta__rotulo { color: var(--musgo); margin-bottom: .6rem; }
.resposta p { font-size: var(--passo-0); line-height: 1.6; }

/* ----------------------------------------------------------------- 12. seção */
.secao { padding: var(--respiro) 0; }
.secao--tinta { background: var(--papel-2); }
.secao--fio { border-top: 1px solid var(--traco); }

.secao__titulo {
  font-size: var(--passo-3);
  margin: 0 0 1.1rem;
  max-width: 20ch;
}

.secao__subtitulo {
  font-size: var(--passo-2);
  font-weight: 600;
  max-width: 24ch;
  margin: 2.5rem 0 .9rem;
}

/* --------------------------------------------------------------- 13. botões */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: inherit;
  font-size: var(--passo-0);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  padding: .9rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--musgo);
  color: var(--branco);
  cursor: pointer;
  transition: transform .15s ease, background .2s ease;
}
.cta:hover { background: var(--musgo-fundo); transform: translateY(-1px); }
.cta:focus-visible { outline-color: var(--tinta); }

.cta--secundaria {
  background: transparent;
  color: var(--musgo);
  border-color: var(--traco-forte);
}
.cta--secundaria:hover { background: var(--papel-2); border-color: var(--musgo); }
.cta--secundaria:focus-visible { outline-color: var(--musgo); }

.cta--larga { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .cta:hover { transform: none; }
}

/* --------------------------------------------------------------- 14. cartão */
.grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  margin: 2rem 0 0;
  align-items: start;
}

@media (min-width: 40rem) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cartao {
  background: var(--papel);
  border: 1px solid var(--traco);
  border-radius: var(--raio);
  padding: 1.6rem;
  box-shadow: var(--sombra);
}

.cartao__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 0 1rem;
  border-radius: var(--raio-sm);
  background: var(--papel-3);
  color: var(--musgo);
}

.cartao__icone svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cartao__titulo { font-size: var(--passo-1); margin: 0 0 .6rem; }

.cartao p {
  font-size: var(--passo-0);
  line-height: 1.6;
  color: var(--tinta-suave);
  margin-bottom: 1rem;
}

/* Seta em vez de sublinhado. O rótulo é a palavra da página de destino, então
   quebra em duas linhas com frequência: a seta marca que é link sem riscar o
   texto inteiro, e ela avança um pouco ao passar o mouse. */
.cartao__link {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  font-size: var(--passo--1);
  font-weight: 600;
  color: var(--musgo);
  text-decoration: none;
}
.cartao__link::after {
  content: "→";
  transition: transform .18s var(--curva);
}
.cartao__link:hover::after,
.cartao__link:focus-visible::after { transform: translateX(3px); }
.cartao__link:hover,
.cartao__link:focus-visible { color: var(--musgo-fundo); }

@media (prefers-reduced-motion: reduce) {
  .cartao__link::after { transition: none; }
  .cartao__link:hover::after { transform: none; }
}

/* --------------------------------------------------------------- 15. slides
   Quem rola e o navegador, com scroll-snap. Sem script a trilha continua sendo
   uma fileira rolavel e as quatro etapas seguem alcancaveis. */
.slides { margin: 2rem 0 0; }

.slides__trilho {
  list-style: none;
  margin: 0;
  padding: 0 0 .35rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  counter-reset: slide;
}
.slides__trilho::-webkit-scrollbar { display: none; }

@media (min-width: 52rem) {
  /* Dois por tela: um slide sozinho em 1160px deixa metade da linha vazia, e a
     etapa seguinte espiando ensina que da para arrastar. */
  .slides__trilho { grid-auto-columns: calc(50% - var(--gap) / 2); }
}

.slide {
  scroll-snap-align: start;
  position: relative;
  background: var(--papel);
  border: 1px solid var(--traco);
  border-radius: var(--raio);
  padding: 3.4rem 1.6rem 1.6rem;
  box-shadow: var(--sombra);
}

.slide::before {
  counter-increment: slide;
  content: "0" counter(slide);
  position: absolute;
  top: 1.5rem;
  left: 1.6rem;
  font-size: var(--passo-1);
  font-weight: 700;
  line-height: 1;
  color: var(--musgo-vivo);
}

.passo__titulo { font-size: var(--passo-1); font-weight: 600; margin: 0 0 .6rem; }
.slide p { font-size: var(--passo-0); line-height: 1.6; color: var(--tinta-suave); }

.slides__controles { display: none; }

.js-slides .slides__controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
}

.slides__conta { margin: 0; }

.slides__setas { display: flex; gap: .5rem; }

.slides__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--traco-forte);
  border-radius: 999px;
  background: var(--papel);
  color: var(--musgo);
  cursor: pointer;
}
.slides__seta:hover { background: var(--papel-2); }
.slides__seta:focus-visible { outline-color: var(--musgo); }

/* Desabilitada de verdade (o atributo, nao so a cor): botao que nao faz nada
   mas continua clicavel e focavel e ruido para quem navega por teclado. */
.slides__seta[disabled] { opacity: .38; cursor: default; }

.slides__seta svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------- 16. galeria
   role="group" no container e NENHUM role nos filhos: role invalido em
   <figure> reprova o aria-allowed-role da navegacao agentica do PageSpeed. */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin: 2rem 0 0;
}

@media (min-width: 48rem) {
  .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.galeria figure { margin: 0; }

.galeria__quadro {
  overflow: hidden;
  background: var(--papel-3);
  border-radius: var(--raio);
  line-height: 0;
}

.galeria img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 420ms var(--curva);
}
.galeria figure:hover img { transform: scale(1.04); }

.galeria figcaption {
  font-size: var(--passo--1);
  font-weight: 600;
  color: var(--tinta-suave);
  padding-top: .6rem;
}

/* ---------------------------------------------------------------- 17. faixa
   Quem manda na altura e o TEXTO, nao a foto: com a foto no fluxo a altura
   virava a proporcao dela, e recortar isso cortava justamente a frase. */
.faixa {
  position: relative;
  display: grid;
  overflow: hidden;
}

.faixa img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 68%;
  display: block;
}

.faixa__texto {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .5rem;
  min-height: 20rem;
  padding: clamp(3rem, 2rem + 3vw, 5rem) 1.25rem;
  text-align: center;
  /* Veu na cor da casa, forte o bastante para o branco passar em AA sem
     depender do que estiver na foto embaixo. */
  background: linear-gradient(180deg, rgba(42, 67, 10, .80), rgba(31, 50, 7, .91));
}

.faixa__rotulo { color: var(--musgo-claro); margin: 0; }

.faixa__frase {
  font-size: var(--passo-3);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.02em;
  max-width: 20ch;
  color: var(--branco);
  margin: 0;
}

/* ------------------------------------------------------- 18. canais e listas */
.canais {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  margin: 2rem 0 0;
  padding: 0;
}
@media (min-width: 44rem) {
  .canais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.canal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  background: var(--papel);
  border: 1px solid var(--traco);
  border-radius: var(--raio);
  padding: 1.6rem;
  box-shadow: var(--sombra);
}

.canal__titulo { font-size: var(--passo-1); margin: 0; }
.canal p { font-size: var(--passo-0); line-height: 1.55; color: var(--tinta-suave); margin: 0; }
.canal .cta { margin-top: .6rem; }

.lista-marcada {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}

.lista-marcada li {
  position: relative;
  padding-left: 2.1rem;
  max-width: 62ch;
}

.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--papel-3);
  box-shadow: inset 0 0 0 1.5px var(--musgo-vivo);
}

/* O tique dentro do circulo, com duas bordas de uma caixa girada. */
.lista-marcada li::after {
  content: "";
  position: absolute;
  left: .38rem;
  top: .72em;
  width: .3rem;
  height: .58rem;
  border-right: 2px solid var(--musgo);
  border-bottom: 2px solid var(--musgo);
  transform: rotate(42deg);
}

/* -------------------------------------------------------------- 19. chamada */
.chamada {
  margin: 2.5rem 0 0;
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  background: var(--papel-2);
  border: 1px solid var(--traco);
  border-radius: var(--raio-lg);
}
.secao--tinta .chamada { background: var(--papel); }

.chamada__titulo {
  font-size: var(--passo-2);
  margin: 0 0 .8rem;
  max-width: 24ch;
}

.chamada__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}

/* ------------------------------------------------------------------ 20. FAQ */
.faq { margin: 2rem 0 0; }

.faq__item { border-bottom: 1px solid var(--traco); }

.faq__pergunta {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: var(--passo-1);
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta);
  background: none;
  border: 0;
  padding: 1.25rem 2.75rem 1.25rem 0;
  cursor: pointer;
}

.faq__pergunta::after {
  content: "";
  position: absolute;
  right: .5rem;
  top: 1.7rem;
  width: .6rem;
  height: .6rem;
  border-right: 2px solid var(--musgo);
  border-bottom: 2px solid var(--musgo);
  transform: rotate(45deg);
}
.faq__pergunta[aria-expanded="true"]::after { transform: rotate(-135deg); }

/* A seta so ganha transicao depois que o JavaScript fechou as respostas na
   largada; sem isso ela gira 200ms em todo carregamento. */
.js-pronto .faq__pergunta::after { transition: transform 200ms var(--curva); }

.faq__resposta { padding: 0 0 1.35rem; }
.faq__resposta p { max-width: 62ch; color: var(--tinta-suave); }

/* ------------------------------------------------ 21. WhatsApp flutuante
   Casca so para dar um landmark ao botao, que fica entre <main> e <footer>.
   O <nav> nao tem altura porque o unico filho e position:fixed. */
.zap-fixo { margin: 0; padding: 0; line-height: 0; }

.zap {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--musgo);
  color: var(--branco);
  font-size: var(--passo--1);
  font-weight: 600;
  text-decoration: none;
  padding: .8rem 1.15rem;
  border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(27, 36, 17, .5);
}
.zap:hover { background: var(--musgo-fundo); }
.zap:focus-visible { outline-color: var(--tinta); }
.zap svg { flex: none; width: 20px; height: 20px; fill: currentColor; }

@media (min-width: 62rem) {
  .zap { right: 1.5rem; bottom: 1.5rem; }
}

/* --------------------------------------------------------------- 22. rodapé */
.rodape {
  padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 5.5rem;
  border-top: 1px solid var(--traco);
}

.rodape__nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
@media (min-width: 44rem) {
  .rodape__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
}
@media (min-width: 62rem) {
  .rodape__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rodape__nav a {
  display: block;
  font-size: var(--passo--1);
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  padding: .6rem 0;
  border-bottom: 1px solid var(--traco);
}
.rodape__nav a:hover,
.rodape__nav a:focus-visible { color: var(--musgo); }

.rodape__contato {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.75rem 0 0;
}

.rodape__contato a {
  display: inline-flex;
  align-items: center;
  font-size: var(--passo--1);
  font-weight: 600;
  color: var(--musgo);
  text-decoration: none;
  padding: .65rem 1.1rem;
  border: 1px solid var(--traco-forte);
  border-radius: 999px;
}
.rodape__contato a:hover { background: var(--musgo); color: var(--branco); border-color: var(--musgo); }

/* Revogar tem de ser tao facil quanto consentir (LGPD art. 8 §5). */
.rodape__medicao { margin: 1.25rem 0 0; }

.rodape__revogar {
  display: none;
  font-family: inherit;
  font-size: var(--passo--1);
  color: var(--tinta-suave);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.consentimento-ativo .rodape__revogar { display: inline; }
.rodape__revogar:hover { color: var(--musgo); }
.rodape__revogar:focus-visible { outline-color: var(--musgo); }

.rodape__aviso {
  font-size: var(--passo--1);
  line-height: 1.6;
  color: var(--tinta-suave);
  max-width: 62ch;
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--traco);
}

/* ------------------------------------------------------------ 23. formulário */
.formulario {
  max-width: 38rem;
  margin: 2rem 0 0;
  display: grid;
  gap: 1.1rem;
}

.formulario__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
}
@media (min-width: 34rem) {
  .formulario__linha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.formulario__campo label {
  display: block;
  font-size: var(--passo--1);
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: .45rem;
}

.formulario__campo input,
.formulario__campo textarea {
  width: 100%;
  font: inherit;
  font-size: var(--passo-0);
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--traco-forte);
  border-radius: var(--raio-sm);
  padding: .85rem 1rem;
}
.formulario__campo textarea { resize: vertical; min-height: 8rem; }

.formulario__campo input:focus-visible,
.formulario__campo textarea:focus-visible {
  outline: 3px solid var(--musgo);
  outline-offset: 1px;
}
.formulario__campo ::placeholder { color: #8A9382; }

.formulario__dica {
  font-size: var(--passo--1);
  line-height: 1.5;
  color: var(--tinta-suave);
  margin: .45rem 0 0;
}

/* -------------------------------------------------- 24. aviso de medição
   Barra fixa, nunca modal: quem chega aqui as tres da manha nao pode ser
   barrado por um aviso de cookie. */
.consentimento { display: none; }

.consentimento-aberto .consentimento {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--papel);
  border-top: 1px solid var(--traco-forte);
  box-shadow: 0 -10px 30px -18px rgba(27, 36, 17, .5);
}

.consentimento__interno {
  width: min(100% - 2.5rem, var(--maxw));
  margin-inline: auto;
  padding: 1rem 0;
  display: grid;
  gap: .9rem;
}

.consentimento__texto {
  font-size: var(--passo--1);
  line-height: 1.55;
  color: var(--tinta-suave);
  margin: 0;
  max-width: 70ch;
}
.consentimento__texto a { color: var(--musgo); }

.consentimento__acoes { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Os dois botoes sao IDENTICOS: mesma caixa, mesma cor, mesma borda. Recusar
   nao pode ser mais dificil de achar do que aceitar. */
.consentimento__botao {
  flex: 1 1 8rem;
  font-family: inherit;
  font-size: var(--passo--1);
  font-weight: 600;
  color: var(--musgo);
  background: var(--papel);
  border: 1px solid var(--musgo);
  border-radius: 999px;
  padding: .7rem 1.2rem;
  cursor: pointer;
}
.consentimento__botao:hover { background: var(--musgo); color: var(--branco); }
.consentimento__botao:focus-visible { outline-color: var(--musgo); }

@media (min-width: 48rem) {
  .consentimento__interno {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.5rem;
  }
  .consentimento__botao { flex: 0 0 auto; }
}

/* O espaco que a barra ocupa e RESERVADO no CSS, nao medido em JavaScript:
   medir depois de pintar empurraria a pagina com ela ja na tela. Alturas
   conferidas de 320px a 1920px, com folga. */
.consentimento-aberto { --aviso-altura: 13rem; }
@media (min-width: 30rem) { .consentimento-aberto { --aviso-altura: 11rem; } }
@media (min-width: 48rem) { .consentimento-aberto { --aviso-altura: 7rem; } }
@media (min-width: 62rem) { .consentimento-aberto { --aviso-altura: 6rem; } }

.consentimento-aberto body { padding-bottom: var(--aviso-altura); }
.consentimento-aberto .zap { bottom: calc(1rem + var(--aviso-altura)); }
@media (min-width: 62rem) {
  .consentimento-aberto .zap { bottom: calc(1.5rem + var(--aviso-altura)); }
}

/* ------------------------------------------------------------ 25. movimento
   A secao nasce VISIVEL: nao existe classe marcando esse estado, opacity 1 e
   transform none ja sao o padrao. `.secao--visivel` so acrescenta a entrada no
   que chega rolando. Sem JavaScript, nada some. */
@keyframes entradaSecao {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes entradaItem {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

.secao--visivel { animation: entradaSecao 320ms var(--curva) both; }

.secao--visivel .cartao,
.secao--visivel .canal,
.secao--visivel .slide,
.secao--visivel .galeria figure {
  animation: entradaItem 360ms var(--curva) both;
}
.secao--visivel :is(.cartao, .canal, .slide, .galeria figure):nth-child(2) { animation-delay: 50ms; }
.secao--visivel :is(.cartao, .canal, .slide, .galeria figure):nth-child(3) { animation-delay: 100ms; }
.secao--visivel :is(.cartao, .canal, .slide, .galeria figure):nth-child(4) { animation-delay: 150ms; }
.secao--visivel :is(.cartao, .canal, .slide, .galeria figure):nth-child(5) { animation-delay: 200ms; }
.secao--visivel :is(.cartao, .canal, .slide, .galeria figure):nth-child(n+6) { animation-delay: 250ms; }

/* O fio da sobrancelha desenha a si mesmo quando a secao chega rolando. E o
   unico movimento que nao e "aparecer": ele acontece na direcao da leitura. */
@keyframes traçoEntra {
  from { transform: scaleX(0); }
  to   { transform: none; }
}
.secao--visivel .secao__rotulo::before {
  transform-origin: left center;
  animation: traçoEntra 420ms var(--curva) both;
}

/* Estados de ponteiro. Nada disso depende de JavaScript e nada disso mexe em
   altura: so transform, sombra e cor, que o compositor resolve sozinho. */
.cartao,
.canal,
.slide {
  transition: transform .22s var(--curva), box-shadow .22s var(--curva),
              border-color .22s var(--curva);
}
.cartao:hover,
.canal:hover,
.slide:hover {
  transform: translateY(-3px);
  border-color: var(--traco-forte);
  box-shadow: 0 2px 4px rgba(27, 36, 17, .05), 0 18px 40px -22px rgba(27, 36, 17, .35);
}

/* O sublinhado do menu cresce do centro em vez de piscar inteiro. */
.cabecalho__nav a {
  position: relative;
  border-bottom-color: transparent;
}
.cabecalho__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--musgo);
  transform: scaleX(0);
  transition: transform .2s var(--curva);
}
.cabecalho__nav a:hover::after,
.cabecalho__nav a:focus-visible::after,
.cabecalho__nav a[aria-current="page"]::after { transform: none; }

.selos li { transition: background .22s var(--curva); }
.selos li:hover { background: var(--papel-2); }

.cartao__icone { transition: transform .22s var(--curva), background .22s var(--curva); }
.cartao:hover .cartao__icone,
.canal:hover .cartao__icone { transform: scale(1.06); background: var(--papel-2); }

/* A foto do topo respira ao passar o mouse. NAO anima na carga: ela divide o
   primeiro quadro com o H1 e e candidata a LCP. */
.topo__foto img { transition: transform .5s var(--curva); }
.topo__foto:hover img { transform: scale(1.015); }

@media (prefers-reduced-motion: reduce) {
  .secao--visivel .secao__rotulo::before { animation: none; }
  .cartao, .canal, .slide, .selos li, .cartao__icone, .topo__foto img,
  .cabecalho__nav a::after { transition: none; }
  .cartao:hover, .canal:hover, .slide:hover,
  .topo__foto:hover img, .cartao:hover .cartao__icone { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slides__trilho { scroll-behavior: auto; }
  .secao--visivel,
  .secao--visivel .cartao,
  .secao--visivel .canal,
  .secao--visivel .slide,
  .secao--visivel .galeria figure { animation: none; }
  .galeria img { transition: none; }
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ------------------------------------------- 27. resumo de tres pontos
   Vai logo depois do topo das paginas de tratamento. E o bloco que a pessoa
   le em tres segundos antes de decidir se continua descendo: pagina longa sem
   isso vira artigo, e artigo ninguem liga no fim. */
.resumo {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  margin: 0;
  padding: 0;
}
@media (min-width: 48rem) {
  .resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.resumo li {
  background: var(--papel);
  border: 1px solid var(--traco);
  border-radius: var(--raio);
  padding: 1.5rem;
  box-shadow: var(--sombra);
  transition: transform .22s var(--curva), box-shadow .22s var(--curva);
}
.secao--tinta .resumo li { border-color: var(--traco-forte); }
.resumo li:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(27, 36, 17, .05), 0 18px 40px -22px rgba(27, 36, 17, .35);
}

.resumo strong {
  display: block;
  font-size: var(--passo-1);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--tinta);
  margin: .9rem 0 .4rem;
}

.resumo span {
  display: block;
  font-size: var(--passo-0);
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* ------------------------------------------ 28. foto larga no meio do texto
   Respiro entre dois blocos densos. Sem veu e sem texto por cima: aqui ela e
   a pausa, nao o suporte de uma frase. */
.faixa-foto { margin: 0; }

.faixa-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  object-fit: cover;
}

.faixa-foto figcaption {
  width: min(100% - 2.5rem, var(--maxw));
  margin: .8rem auto 0;
  font-size: var(--passo--1);
  color: var(--tinta-suave);
}

/* ------------------------------------------------ 29. bloco de foto e texto
   Duas colunas dentro do container: a foto ancora o argumento em vez de
   ilustrar a pagina inteira de longe. */
.bloco-foto {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  align-items: center;
  margin: 2.25rem 0 0;
}

/* Sem variante invertida: as cinco paginas de tratamento seguem o MESMO
   layout, e so a copy e as fotos mudam. Alternar o lado entre paginas fazia
   cada uma parecer um modelo diferente. */
@media (min-width: 52rem) {
  .bloco-foto { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

/* A sobrancelha desta secao mora DENTRO da coluna de texto, encostada no
   titulo. Solta no topo da secao ela ficava do outro lado da foto, longe do
   titulo que ela nomeia. */
.bloco-foto__texto .secao__rotulo { margin-bottom: .7rem; }

.bloco-foto__foto { margin: 0; line-height: 0; }

.bloco-foto__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio);
}

.bloco-foto__foto figcaption {
  font-size: var(--passo--1);
  line-height: 1.5;
  color: var(--tinta-suave);
  padding-top: .6rem;
}

.bloco-foto__texto h3 {
  font-size: var(--passo-2);
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 .8rem;
  max-width: 18ch;
}

.bloco-foto__texto p { color: var(--tinta-suave); max-width: 52ch; }

.secao--visivel .bloco-foto__foto,
.secao--visivel .resumo li { animation: entradaItem 360ms var(--curva) both; }

@media (prefers-reduced-motion: reduce) {
  .resumo li { transition: none; }
  .resumo li:hover { transform: none; }
  .secao--visivel .bloco-foto__foto,
  .secao--visivel .resumo li { animation: none; }
}

/* ------------------------------------------------------------ 26. impressão */
@media print {
  /* O seletor do aviso repete a classe do <html> porque a regra que o mostra
     tambem repete: sem isso, `display: block` de la venceria por
     especificidade e o aviso sairia impresso. */
  .cabecalho, .zap, .zap-fixo, .migalha, .menu-botao,
  .slides__controles,
  .consentimento-ativo .rodape__revogar,
  .consentimento-aberto .consentimento { display: none; }
  .consentimento-aberto body { padding-bottom: 0; }
  body { background: #fff; font-size: 11pt; }
  .secao, .topo { padding: 0 0 1.5rem; }
  .rodape { background: #fff; }
  .slides__trilho { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
}