/* ============================================================
   ÂNIMA CLINIC
   CSS artesanal, sem framework e sem build.

   CONVENÇÕES FIXAS DO PROJETO
   1. text-wrap: balance em títulos e textos curtos de composição.
      text-wrap: pretty como padrão dos parágrafos.
   2. Nenhum travessão como pontuação na copy. Hífen ortográfico
      e de registro permanecem (pós-graduação, CRM-SP).
   3. Toda imagem entra como bloco de cor sólida da paleta, com
      proporção e enquadramento definitivos. Sem banco de imagem,
      sem geração e sem ícone de placeholder.
   ============================================================ */

/* ---------- reset curto ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

/* ---------- tokens ---------- */
:root {
  /* Paleta da Ânima. Os dois verdes sustentam as áreas grandes, o
     papel resolve o contraste sobre elas, e o par âmbar existe para
     marcar pontos, nunca para preencher superfície.

     O âmbar não é enfeite: é a mesma cor com que a resposta do corpo
     aparece destacada no filme do simulador. Ele entra só onde a
     página aponta alguma coisa. */
  --fundo:       #FFFFFF;  /* fundo da primeira área, branco puro */
  --papel:       #F7F2E9;  /* branco quente, apoio e texto sobre escuro */
  --papel-menu:  #EDE7DA;  /* superfície sólida e discreta da navegação */
  --tinta:       #122B1B;  /* verde quase preto, o texto */
  --verde:       #243E27;  /* verde institucional */
  --salvia:      #3C5C40;  /* verde intermediário, painel de acompanhamento */
  --verde-claro: #FFFFFF;  /* contraste sobre os fundos verdes */
  --branco:      #FFFFFF;

  /* Acentos. O âmbar é o tom de marcação; o amarelo é a versão que
     acende, reservada a estado ativo e a hover. */
  --ambar:       #E8A600;
  --amarelo:     #FEC637;

  --pad: clamp(1.25rem, 3.2vw, 3.5rem);
  --gap: clamp(2rem, 4.5vw, 4.5rem);
  --max: 1520px;
  --raio: 22px;
}


/* ---------- revelação tipográfica ----------
   Cada frase de headline vive numa janela de overflow próprio e o
   GSAP a levanta uma vez, frase a frase. O estado escrito aqui é o
   final: sem JavaScript nada fica escondido. */
.rev__l { display: block; overflow: hidden; }
.rev__t { display: block; }

/* ---------- base ---------- */
body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-optical-sizing: auto;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.55;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   PALCO
   Header e hero na mesma caixa insetada, sem faixa de topo
   separada e sem borda horizontal.
   ============================================================ */
.palco {
  position: relative;
  max-width: var(--max);
  /* Distância entre a borda interna do palco e a borda real da
     viewport. No hero ela permite que só a fotografia sangre para
     a direita, enquanto texto e navegação continuam no grid. */
  --hero-bleed-right: max(
    var(--pad),
    calc((100vw - var(--max)) / 2 + var(--pad))
  );
  /* Altura fixada em 750px no desktop, no lugar de 100svh: o palco
     deixa de acompanhar a tela e a faixa ticker aparece logo abaixo,
     em qualquer altura de monitor. É min-height e não height para
     que um texto maior empurre o bloco em vez de ser cortado. */
  min-height: 750px;
  margin-inline: auto;
  /* Sem respiro inferior: assim o bloco da imagem encosta na faixa
     ticker. O respiro que a coluna de texto precisava foi devolvido
     a ela em .hero__conteudo, e não ao palco inteiro. */
  padding: clamp(1.25rem, 2.4vw, 2rem) var(--pad) 0;
  display: flex;
  flex-direction: column;
}

/* ---------- botões ---------- */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--solido { background: var(--tinta); color: var(--papel); }
.btn--solido:hover { background: var(--verde); }

.btn--claro {
  background: rgba(18, 43, 27, 0.05);
  color: var(--tinta);
  border-color: rgba(18, 43, 27, 0.10);
}
.btn--claro:hover { background: rgba(18, 43, 27, 0.09); }

/* Sobre o fundo verde escuro: papel cheio com texto verde, e no
   hover a inversão, sem sombra e sem sair do lugar. */
.btn--papel {
  background: var(--papel);
  color: var(--verde);
  border-color: var(--papel);
}
.btn--papel:hover,
.btn--papel:focus-visible {
  background: transparent;
  color: var(--papel);
  border-color: rgba(255, 255, 255, 0.55);
}

.btn:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.btn--papel:focus-visible { outline-color: rgba(255, 255, 255, 0.85); }

/* ------------------------------------------------------------
   INTERAÇÃO DOS CTAs PRINCIPAIS
   Dois gestos emprestados da referência e traduzidos para a
   paleta Ânima: o brilho que atravessa o botão e a seta circular
   que percorre da esquerda para a direita.

   O que foi deliberadamente descartado da referência:
   o verde-limão, o gradiente radial, as duas sombras externas e
   a troca de padding no hover, que fazia o rótulo saltar. Aqui o
   espaço da seta é reservado desde o estado base, então o texto
   nunca muda de lugar.

   Vale só para .btn--solido e .btn--papel. O .btn--claro é o
   secundário e continua sem brilho e sem seta.
   ------------------------------------------------------------ */
.btn--solido,
.btn--papel {
  /* Diâmetro da seta e folga até a borda direita. Ficam em
     custom properties para o CTA menor do header reduzir os dois
     de uma vez, sem repetir a geometria. */
  --seta: 1.5rem;
  --seta-folga: 0.5rem;
  --brilho: rgba(255, 255, 255, 0.28);
  /* Espaço permanente da seta. Reservado no repouso e no hover. */
  padding-right: calc(var(--seta) + var(--seta-folga) + 0.8rem);
}

/* ---- brilho ---- */
.btn--solido::before,
.btn--papel::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, var(--brilho), transparent);
  transform: skewX(-20deg) translateX(-160%);
  opacity: 0;
  pointer-events: none;
}

@keyframes anima-brilho {
  0%   { opacity: 0; transform: skewX(-20deg) translateX(-160%); }
  20%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: skewX(-20deg) translateX(330%); }
}

/* ---- seta circular ---- */
.btn--solido::after,
.btn--papel::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--seta-folga);
  width: var(--seta);
  height: var(--seta);
  border-radius: 50%;
  background-color: var(--papel);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  opacity: 0;
  /* Sai de trás do rótulo, pequena e girada, e chega inteira na
     direita. Só transform e opacity: nada de animar left. */
  transform: translate(-260%, -50%) scale(0.35) rotate(-180deg);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.28s ease;
  pointer-events: none;
}

/* Seta escura sobre o círculo claro do botão sólido. */
.btn--solido::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122B1B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
/* Seta verde no botão que vive sobre o fundo verde escuro. */
.btn--papel::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243E27' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* Estado ativo. O teclado recebe exatamente o mesmo gesto do
   ponteiro, e não só o contorno. */
.btn--solido:hover::after,
.btn--solido:focus-visible::after,
.btn--papel:hover::after,
.btn--papel:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%) scale(1) rotate(0deg);
}
.btn--solido:hover::before,
.btn--solido:focus-visible::before,
.btn--papel:hover::before,
.btn--papel:focus-visible::before {
  animation: anima-brilho 0.85s ease-out;
}

/* ------------------------------------------------------------
   Sem ponteiro fino não existe hover, então o gesto não pode ser
   a única pista: no toque a seta já nasce no lugar, visível e
   estática, e o brilho sai de cena.
   ------------------------------------------------------------ */
@media (hover: none), (pointer: coarse) {
  .btn--solido::after,
  .btn--papel::after {
    opacity: 1;
    transform: translate(0, -50%);
    transition: none;
  }
  .btn--solido::before,
  .btn--papel::before { display: none; }
}

/* ------------------------------------------------------------
   Movimento reduzido: a seta continua informando a direção, mas
   parada e sem percurso. O brilho não roda.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .btn--solido::after,
  .btn--papel::after {
    opacity: 1;
    transform: translate(0, -50%);
    transition: none;
  }
  .btn--solido::before,
  .btn--papel::before { display: none; }
  .btn--solido:hover::before,
  .btn--solido:focus-visible::before,
  .btn--papel:hover::before,
  .btn--papel:focus-visible::before { animation: none; }
}

/* ============================================================
   HEADER integrado
   ============================================================ */
/* ============================================================
   BARRA FIXA
   A barra em si não tem fundo nenhum, em nenhum momento: ela é só
   o trilho que segura duas peças flutuando sobre a página.

   Quem resolve a leitura é a cápsula de vidro. Ela é papel
   translúcido com desfoque, então clareia o que estiver atrás e o
   texto escuro de dentro continua legível tanto sobre o branco do
   hero quanto sobre os cortes verdes que passam por baixo no
   scroll. É por isso que a logo mora dentro dela junto com os
   links, e não solta ao lado: solta, ela sumiria no verde.

   Sem estado grudado e sem listener de scroll: a mesma cápsula
   serve a página inteira.
   ============================================================ */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: transparent;
  pointer-events: none;
}

.topo__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(0.75rem, 1.5vw, 1.125rem) var(--pad);
  display: flex;
  align-items: center;
  /* Logo e cápsula andam colados à esquerda; só o Instagram é
     empurrado para a outra ponta. */
  justify-content: flex-start;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.topo__insta { margin-left: auto; }

/* A barra não recebe ponteiro, senão a faixa invisível de largura
   total bloquearia cliques no topo da página. As peças devolvem. */
.topo__capsula,
.topo__insta { pointer-events: auto; }

/* ---------- a cápsula ----------
   Envolve só os links. A barra continua sem fundo, e a logo vive
   solta do lado de fora. */
.topo__capsula {
  padding: 0.625rem clamp(1.25rem, 2vw, 1.75rem);
  border-radius: 999px;
  background: rgba(247, 242, 233, 0.78);
  /* O fio escuro é o que define a cápsula sobre o branco do hero,
     onde o papel translúcido sozinho quase não apareceria. */
  border: 1px solid rgba(18, 43, 27, 0.10);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  backdrop-filter: saturate(170%) blur(16px);
}

/* ---------- logo ----------
   Máscara e não <img>: a cor vem do CSS e o mesmo arquivo serve
   qualquer paleta. */
.topo__logo {
  display: block;
  flex: none;
  color: var(--tinta);
  transition: color 0.35s ease;
}
/* Solta, a logo não tem mais o vidro da cápsula por baixo, então
   ela precisa clarear sozinha quando um corte escuro passa embaixo
   da barra. Quem liga a classe é o js/motion.js. */
.topo--claro .topo__logo { color: var(--papel); }
.topo__marca {
  display: block;
  width: clamp(5rem, 7vw, 6.5rem);
  aspect-ratio: 1429 / 638;
  background-color: currentColor;
  -webkit-mask: url('../assets/samara/logo.svg') no-repeat center / contain;
  mask: url('../assets/samara/logo.svg') no-repeat center / contain;
}
.topo__logo:focus-visible { outline: 2px solid var(--tinta); outline-offset: 5px; border-radius: 4px; }

/* ---------- links ---------- */
.nav {
  display: flex;
  align-items: center;
  flex: none;
  gap: clamp(0.875rem, 1.6vw, 1.75rem);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.012em;
  color: rgba(18, 43, 27, 0.74);
}
.nav a { transition: color 0.2s ease; }
.nav a:hover,
.nav a:focus-visible { color: var(--tinta); }

/* ---------- caixa do Instagram ----------
   Mesmo vidro da cápsula, para as duas peças lerem como um par. */
.topo__insta {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(2.375rem, 2.9vw, 2.75rem);
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(247, 242, 233, 0.78);
  border: 1px solid rgba(18, 43, 27, 0.10);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  backdrop-filter: saturate(170%) blur(16px);
  color: var(--tinta);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.topo__insta svg { width: 52%; height: auto; }
.topo__insta:hover,
.topo__insta:focus-visible {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}
.topo__insta:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.topo--claro .topo__insta:focus-visible { outline-color: var(--papel); }

/* Onde não há desfoque o vidro vira papel cheio, senão o texto de
   baixo atravessa a cápsula. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topo__capsula,
  .topo__insta { background: var(--papel); }
}

/* ============================================================
   HERO
   Split 48/52, texto à esquerda e caixa de fotografia à direita.
   ============================================================ */
.hero {
  /* Ocupa o que sobra do palco depois dos paddings, sem altura
     própria: quem manda na altura agora é o palco. */
  flex: 1;
  display: grid;
  grid-template-columns: 48fr 52fr;
  gap: var(--gap);
  align-items: stretch;
}

.hero__conteudo {
  display: flex;
  flex-direction: column;
  /* Com a headline em voz de manchete, o topo cede espaço para o
     vão entre título e lead continuar existindo. */
  padding-top: clamp(6.5rem, 15vh, 8.5rem);
  padding-bottom: clamp(1.75rem, 4.5vh, 3.5rem);
}

.hero__titulo {
  /* Voz maior por decisão de projeto: a headline é a tese da
     página e ocupa a coluna com presença de manchete. */
  font-size: clamp(2.375rem, 4.4vw, 4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* O vão entre o título e a explicação é o silêncio da composição:
   um só, num ponto só, e é ele que faz o título soar mais alto. */
.hero__lead {
  margin-top: auto;
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.05vw, 1.1875rem);
  line-height: 1.6;
  color: rgba(18, 43, 27, 0.78);
  text-wrap: balance;
}

.hero__acoes {
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- caixa da fotografia ----------
   Bloco de cor sólida no lugar da foto. Enquadramento definitivo:
   retrato suave 5:6, altura cheia da coluna, alinhado à direita e
   com cantos arredondados. Quando a foto real entrar, ela ocupa
   exatamente esta caixa. */
.hero__midia {
  position: relative;
  /* Sem aspect-ratio no desktop. Desde que a largura passou a ser
     explícita, a proporção governaria a altura e o bloco crescia
     para além do palco. Aqui a altura vem do palco e a largura vem
     da coluna mais a sangria. As faixas abaixo de 900px continuam
     definindo a própria proporção, porque lá a altura é auto. */
  height: 100%;
  /* A fotografia ocupa toda a coluna e continua até a borda direita
     da viewport. O início da mídia permanece preso ao grid do hero. */
  width: calc(100% + var(--hero-bleed-right));
  max-width: none;
  margin-left: auto;
  margin-right: calc(-1 * var(--hero-bleed-right));
  /* Só os cantos de cima arredondados: embaixo a caixa termina reta
     e se apoia na faixa ticker, sem deixar vazios nas quinas. */
  border-radius: 14px 14px 0 0;
  background: var(--verde);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

/* Tablet: a composição deixa de dividir a tela e passa a se
   suceder. O texto vem primeiro, a imagem em seguida. */
@media (max-width: 900px) {
  .palco { min-height: 0; gap: clamp(1.75rem, 4vh, 2.5rem); }

  /* No celular a barra continua, mas sem a lista de links: ficam a
     logo e o atalho do Instagram, que é o que cabe sem apertar. Um
     menu completo pediria hambúrguer e painel, e isso não foi
     pedido. */
  .topo__inner { padding-inline: var(--pad); }
  .nav { display: none; }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vh, 2.75rem);
  }
  /* A barra é fixa e não ocupa espaço no fluxo. No desktop o
     recuo grande do hero já dava conta; aqui ele precisa ser
     reposto, senão a cápsula pousa em cima do título. */
  .hero__conteudo { padding-block: clamp(4.5rem, 11vh, 5.75rem) 0; }
  .hero__lead {
    margin-top: clamp(1.75rem, 5vh, 3rem);
    max-width: 54ch;
  }

  .hero__midia {
    aspect-ratio: 4 / 3;
    height: auto;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 620px) {
  .hero__titulo { letter-spacing: -0.028em; }
  .hero__acoes { gap: 0.625rem; }
  .hero__acoes .btn { width: 100%; }

  .hero__midia { aspect-ratio: 1 / 1; }
}

/* ---------- preferências do sistema ----------
   O hero não tem animação de entrada por decisão de projeto: ele
   já está inteiro no primeiro quadro. Aqui fica só a supressão de
   transições para quem pede menos movimento. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}

/* ============================================================
   TICKER DE DIFERENCIAIS
   Faixa escura full bleed em movimento contínuo para a direita.
   A pista guarda a sequência duas vezes e a animação percorre
   exatamente metade dela, então o laço fecha sem salto.
   ============================================================ */
.ticker {
  background: var(--tinta);
  color: var(--papel);
  overflow-x: clip;        /* recorta só na horizontal, nunca corta em altura */
}

.ticker__pista {
  width: max-content;
  display: flex;
  animation: ticker-direita 29s linear infinite;
  will-change: transform;
}

/* A sequência aparece três vezes, então um terço da pista equivale
   a exatamente uma cópia: a animação anda esse terço da esquerda
   para a direita e reinicia no mesmo desenho, sem salto. Três e não
   duas porque com duas a pista ficava mais estreita que telas
   largas e abria um vão no fim do ciclo. */
@keyframes ticker-direita {
  from { transform: translate3d(-33.3333%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.ticker__grupo {
  flex: none;
  display: flex;
  align-items: center;
}

.ticker__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: clamp(84px, 9vh, 100px);
  padding-inline: clamp(1.75rem, 3.2vw, 3rem);
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* Separador discreto entre itens: um fio vertical, sem moldura. */
.ticker__item::after {
  content: '';
  position: relative;
  right: calc(clamp(1.75rem, 3.2vw, 3rem) * -1);
  width: 1px;
  height: 1.125rem;
  background: rgba(244, 241, 234, 0.20);
}

.ticker__ico {
  flex: none;
  width: clamp(20px, 1.5vw, 22px);
  height: clamp(20px, 1.5vw, 22px);
  color: var(--verde-claro);
}

/* Mobile: mesmo movimento, peças menores e um pouco mais lento,
   sem nunca reduzir a altura a ponto de cortar o conteúdo. */
@media (max-width: 620px) {
  .ticker__pista { animation-duration: 32s; }
  .ticker__item {
    min-height: 68px;
    gap: 0.625rem;
    padding-inline: 1.25rem;
    font-size: 0.9375rem;
  }
  .ticker__item::after { right: -1.25rem; height: 1rem; }
  .ticker__ico { width: 18px; height: 18px; }
}

/* Quem pede menos movimento recebe a faixa parada, na posição
   inicial da sequência, e pode percorrer o restante arrastando. */
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  .ticker__pista {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

/* ============================================================
   SEÇÃO 02 · MÉTODO
   Papel quente depois do corte escuro do ticker. Composição
   editorial em duas colunas, sem card e sem moldura: o que separa
   as partes é o espaço e o fio, nunca uma caixa.
   ============================================================ */
.metodo {
  background: var(--fundo);
  padding-block: clamp(4rem, 9vh, 7rem);
}

.metodo__inner,
.mesa {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* A afirmação e a explicação dividem a largura da seção. */
.metodo__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: start;
}

/* ---------- argumento ---------- */
/* Dois níveis de voz na coluna da direita. A chamada tem presença
   tipográfica, mas fica bem abaixo do supergráfico em tamanho, para
   não disputar a atenção com ele. Larguras escolhidas para o balance
   distribuir as linhas sem deixar a última órfã. */
/* Os dois blocos dividem a largura e começam pelo mesmo eixo. */
.metodo__chamada {
  margin: 0;
  padding-top: 0;
  max-width: 26ch;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: var(--tinta);
  text-wrap: balance;
}
.metodo__apoio {
  margin: 0;
  padding-top: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.65;
  color: rgba(18, 43, 27, 0.72);
  text-wrap: balance;
}

/* ---------- a mesa da consulta ----------
   Cinco fichas lado a lado, cada uma pousada com a própria
   rotação e altura, como papéis espalhados à mão sobre a mesa. O
   desalinhamento é a assinatura: meia dúzia de graus somados
   separam esta fileira de uma grade de máquina. No hover a ficha
   se endireita, o gesto de pegá-la para ler.

   A rotação de repouso mora no <li>; a entrada em baralho do
   js/motion.js anima só o corpo interno, então os dois transforms
   nunca disputam o mesmo elemento. */
.mesa {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: flex;
  /* Estica: os cards têm textos de alturas diferentes e precisam
     terminar na mesma linha de base. */
  align-items: stretch;
  gap: clamp(0.875rem, 1.4vw, 1.5rem);
  list-style: none;
  padding-block: 0.75rem;
}

.ficha-consulta {
  flex: 1 1 0;
  min-width: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* O pouso de cada ficha: rotações e alturas pequenas e díspares,
   escolhidas a olho para a fileira parecer arrumada por alguém. */
.ficha-consulta:nth-child(1) { transform: rotate(-1.3deg) translateY(0.4rem); }
.ficha-consulta:nth-child(2) { transform: rotate(0.9deg) translateY(-0.2rem); }
.ficha-consulta:nth-child(3) { transform: rotate(-0.45deg) translateY(0.25rem); }
.ficha-consulta:nth-child(4) { transform: rotate(1.2deg) translateY(-0.3rem); }
.ficha-consulta:nth-child(5) { transform: rotate(-0.95deg) translateY(0.3rem); }

/* Pegar a ficha: ela se endireita e sobe de leve. */
@media (hover: hover) and (pointer: fine) {
  .ficha-consulta:hover { transform: rotate(0deg) translateY(-0.2rem); }
}

.ficha-consulta__corpo {
  display: flex;
  flex-direction: column;
}

/* ---------- o card ----------
   A ficha deixou de ser reserva de fotografia e virou card de
   verdade: superfície de papel, fio fino em vez de moldura pesada,
   e dentro dele marca, número, título e descrição nessa ordem.
   Card claro de propósito: com cinco superfícies cheias de cor a
   descrição precisaria de texto invertido em todas, e a faixa
   ficaria pesada demais para um texto que existe para ser lido. */
.ficha-consulta__corpo {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1vw, 1rem);
  padding: clamp(1rem, 1.4vw, 1.375rem);
  border: 1px solid rgba(18, 43, 27, 0.14);
  border-radius: 10px;
  background: var(--papel);
}

/* A marca ganhou uma placa própria, e é ela que carrega o ritmo de
   cor que antes vinha da ficha inteira. */
.ficha-consulta__marca {
  display: grid;
  place-items: center;
  width: clamp(2.75rem, 3.7vw, 3.5rem);
  aspect-ratio: 1;
  border-radius: 8px;
}
.ficha-consulta__marca--verde  { background: var(--verde);  color: var(--papel); }
.ficha-consulta__marca--salvia { background: var(--salvia); color: var(--papel); }
.ficha-consulta__marca--tinta  { background: var(--tinta);  color: var(--papel); }

/* Traço fino igual ao do ticker e dos marcadores de integração. */
.ficha-consulta__ico {
  width: 64%;
  height: auto;
}

.ficha-consulta__pe {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  padding: 0;
}

.ficha-consulta__n {
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.ficha-consulta__t {
  font-size: clamp(0.875rem, 0.95vw, 1rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Descrição curta. Empurrada para a base do card com o auto, então
   as cinco terminam no mesmo eixo mesmo com alturas de título
   diferentes. */
.ficha-consulta__d {
  margin: auto 0 0;
  font-size: clamp(0.8125rem, 0.85vw, 0.875rem);
  line-height: 1.5;
  color: rgba(18, 43, 27, 0.7);
  text-wrap: pretty;
}

/* ---------- movimento reduzido ----------
   As rotações de repouso ficam, porque são composição e não
   movimento; o que sai é o gesto de endireitar. */
@media (prefers-reduced-motion: reduce) {
  .ficha-consulta { transition: none; }
  .ficha-consulta:hover { transform: none; }
  .ficha-consulta:nth-child(1):hover { transform: rotate(-1.3deg) translateY(0.4rem); }
  .ficha-consulta:nth-child(2):hover { transform: rotate(0.9deg) translateY(-0.2rem); }
  .ficha-consulta:nth-child(3):hover { transform: rotate(-0.45deg) translateY(0.25rem); }
  .ficha-consulta:nth-child(4):hover { transform: rotate(1.2deg) translateY(-0.3rem); }
  .ficha-consulta:nth-child(5):hover { transform: rotate(-0.95deg) translateY(0.3rem); }
}

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .metodo { padding-block: clamp(3rem, 7vh, 4.5rem); }

  .metodo__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 3vh, 1.75rem);
  }
  /* Empilhado, o deslocamento perde a função e vira só um vão. */
  .metodo__chamada {
    padding-top: 0;
    max-width: 26ch;
    font-size: clamp(1.375rem, 3.4vw, 1.75rem);
  }
  .metodo__apoio { padding-top: 0; max-width: 44ch; }

  /* Trilho horizontal: a mesa vira uma fileira que se percorre com
     o dedo, e a próxima ficha aparece pela borda. */
  .mesa {
    margin-top: clamp(2.25rem, 5vh, 3rem);
    margin-inline: 0;
    padding-inline: var(--pad);
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mesa::-webkit-scrollbar { display: none; }

  .ficha-consulta {
    flex: 0 0 62vw;
    max-width: 19rem;
    scroll-snap-align: start;
  }
}

/* ============================================================
   SEÇÃO 03 · QUANDO VALE INVESTIGAR
   Corte escuro de borda a borda, de reconhecimento. Composição
   assimétrica: o argumento à esquerda, as situações à direita,
   separadas apenas por fios. Nenhum card, ícone ou imagem.
   ============================================================ */
.quando {
  background: var(--verde);
  color: var(--branco);
  padding-block: clamp(4.5rem, 10vh, 7.5rem);
}

.quando__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  /* A lista precisa caber em uma linha por situação nas telas
     largas, e a coluna do argumento precisa dos 467px que a headline
     ocupa em três linhas. 38/62 atende os dois. */
  grid-template-columns: 38fr 62fr;
  gap: var(--gap);
  align-items: start;
}

/* ---------- argumento ---------- */
/* Sem etiqueta: a headline abre a coluna, sem margem herdada de um
   elemento que não existe mais. */
.quando__titulo {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.quando__cta {
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  align-self: start;
}

/* ---------- situações ----------
   Cada linha abre com um fio. O último fecha a série com o seu
   próprio fio embaixo, para a lista ter começo e fim. */
.sinais {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sinal {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: baseline;
  padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
  transition: opacity 0.4s ease;
}
.sinal:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 4px; }

/* Fio apenas entre um item e outro: a lista não abre nem fecha
   com traço, só se divide por dentro. */
.sinal + .sinal::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  transform-origin: left center;
  transition: background-color 0.4s ease;
}
/* Pulso: um segmento curto de luz que atravessa o fio uma vez.
   Fica invisível e fora da linha em repouso. Existe apenas onde
   existe fio, então o primeiro item não tenta animar nada. */
.sinal + .sinal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 26%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}
@keyframes sinal-pulso {
  0%   { opacity: 0;   transform: translateX(-100%); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0;   transform: translateX(385%); }
}

.sinal__n {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  /* Âmbar aqui e em nenhum lugar claro: sobre o verde ele dá 5,5:1,
     sobre o papel daria 1,9:1 e sumiria. */
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
  transition: color 0.4s ease;
}

.sinal__f {
  margin: 0;
  font-size: clamp(1.0625rem, 2vw, 2rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.014em;
  color: rgba(255, 255, 255, 0.88);
  text-wrap: balance;
  transition: color 0.4s ease;
}

.sinal__conteudo { min-width: 0; }

.sinal__desc {
  margin: 0;
  max-width: 62ch;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-0.35rem);
  font-size: clamp(0.875rem, 0.95vw, 1rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
  text-wrap: balance;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease,
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.sinal:hover .sinal__desc,
.sinal:focus-visible .sinal__desc,
.sinal:focus-within .sinal__desc {
  margin-top: 0.625rem;
  max-height: 6rem;
  opacity: 1;
  transform: translateY(0);
}

/* A partir daqui a lista tem folga sobrando para a frase mais longa,
   então cada situação ocupa exatamente uma linha. */
@media (min-width: 1080px) {
  .sinal__f { white-space: nowrap; }
}

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

/* ---------- atenção por ponteiro ou teclado ----------
   O fio clareia, o pulso o atravessa uma vez, o número ganha
   contraste e a frase fica branca. Nada muda de lugar, nada gira,
   nenhuma sombra. */
.sinal + .sinal:hover::before,
.sinal + .sinal:focus-visible::before,
.sinal + .sinal:focus-within::before { background: rgba(255, 255, 255, 0.45); }

.sinal + .sinal:hover::after,
.sinal + .sinal:focus-visible::after,
.sinal + .sinal:focus-within::after { animation: sinal-pulso 0.95s cubic-bezier(0.33, 0, 0.2, 1) 1; }

.sinal:hover .sinal__f,
.sinal:focus-visible .sinal__f,
.sinal:focus-within .sinal__f { color: var(--branco); }

.sinal:hover .sinal__n,
.sinal:focus-visible .sinal__n,
.sinal:focus-within .sinal__n { color: var(--amarelo); }

/* Enquanto uma linha recebe atenção, as demais recuam de leve.
   Onde :has não existir, nada recua e a lista segue legível. */
.sinais:has(.sinal:hover) .sinal:not(:hover),
.sinais:has(.sinal:focus-visible) .sinal:not(:focus-visible) { opacity: 0.72; }

/* ---------- movimento de entrada ----------
   Os fios se estendem da esquerda para a direita, escalonados, e
   as frases ganham presença junto. Os intervalos fecham cedo, então
   nada fica incompleto durante a leitura. Sem suporte a scroll
   timeline ou com movimento reduzido, tudo já está no lugar. */
@keyframes sinal-fio {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes sinal-frase {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sinal + .sinal::before,
    .sinal__f {
      animation: linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 48%;
    }
    .sinal + .sinal::before { animation-name: sinal-fio; }
    .sinal__f { animation-name: sinal-frase; }

    .sinal:nth-child(2)::before, .sinal:nth-child(2) .sinal__f { animation-range: entry 14% entry 54%; }
    .sinal:nth-child(3)::before, .sinal:nth-child(3) .sinal__f { animation-range: entry 20% entry 60%; }
    .sinal:nth-child(4)::before, .sinal:nth-child(4) .sinal__f { animation-range: entry 26% entry 66%; }
    .sinal:nth-child(5)::before, .sinal:nth-child(5) .sinal__f { animation-range: entry 32% entry 72%; }
  }
}

/* Sem percurso para quem pede menos movimento: fica só a mudança
   estática de contraste. */
@media (prefers-reduced-motion: reduce) {
  .sinal + .sinal::after { display: none; }
}

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .quando { padding-block: clamp(3.25rem, 8vh, 5rem); }

  .quando__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vh, 3rem);
  }
  .quando__titulo { max-width: 20ch; }
  .quando__cta { width: 100%; }

  /* Linhas em largura total, com o número acima da frase para
     nenhuma das duas ficar espremida. */
  .sinal {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    padding-block: clamp(1.125rem, 2.6vh, 1.5rem);
  }
  .sinal__n { line-height: 1.6; }
  .sinal__f { max-width: none; }
}


/* ============================================================
   DEPOIMENTOS
   Papel quente entre o corte verde dos sinais e o painel do
   plano. Só tipografia e fios: a voz que conduz fala grande à
   esquerda e as duas de apoio respondem na coluna direita, cada
   uma sob o seu fio. As aspas são da própria fonte, nenhum ícone.
   ============================================================ */
.depo {
  background: var(--papel);
  padding-block: clamp(4rem, 9vh, 7rem);
}

.depo__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.depo__intro {
  margin-bottom: clamp(2rem, 5vh, 3rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.depo__titulo {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--tinta);
  text-wrap: balance;
}

/* O selo de cada avaliação: cinco estrelas no âmbar do próprio
   Google e o G oficial na ponta. São marca de procedência, não
   ornamento: as únicas cores fora da paleta da página. */
.depo__nota {
  margin: 0 0 clamp(0.875rem, 1.8vh, 1.125rem);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.depo__estrela {
  width: 15px;
  height: 15px;
  flex: none;
}
.depo__g {
  width: 14px;
  height: 14px;
  flex: none;
  margin-left: 0.5rem;
}

/* ---------- setas ----------
   Atalho de desktop: quadrados de fio fino, no padrão dos
   marcadores da página. Sem ponteiro fino elas nem aparecem,
   porque o gesto natural é arrastar. */
.depo__setas {
  display: none;
  gap: 0.5rem;
  flex: none;
}
@media (hover: hover) and (pointer: fine) {
  .depo__setas { display: flex; }
}

.depo__seta {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(18, 43, 27, 0.35);
  border-radius: 8px;
  background: none;
  color: var(--tinta);
  cursor: pointer;
  transition: border-color 0.25s ease, opacity 0.25s ease;
}
.depo__seta svg { width: 18px; height: 18px; }
.depo__seta:hover { border-color: var(--tinta); }
.depo__seta:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.depo__seta[disabled] { opacity: 0.35; cursor: default; }
.depo__seta[disabled]:hover { border-color: rgba(18, 43, 27, 0.35); }

/* ---------- a pista ----------
   Rolagem nativa com snap, full bleed, alinhada à mesma borda
   viva das outras seções. A barra some sem tirar a rolagem, e a
   pista é focável para as setas do teclado funcionarem. */
.depo__pista {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  --borda: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  scroll-padding-inline: var(--borda);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.depo__pista::-webkit-scrollbar { display: none; }
.depo__pista:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: -2px;
}

.depo__trilho {
  margin: 0;
  padding: 0 var(--borda);
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: clamp(0.875rem, 1.4vw, 1.25rem);
  width: max-content;
}

.depo__slide {
  flex: 0 0 auto;
  width: clamp(19rem, 27vw, 25rem);
  display: flex;
  scroll-snap-align: start;
}

/* O depoimento: branco sobre o papel, fio fino, raio contido.
   A atribuição assenta na base, então os cartões alinham embaixo
   mesmo com falas de tamanhos diferentes. */
.depo__voz {
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid rgba(18, 43, 27, 0.16);
  border-radius: 10px;
  background: var(--branco);
}

.depo__fala { margin: 0; }
.depo__fala p {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(18, 43, 27, 0.86);
  text-wrap: balance;
}

.depo__quem {
  margin-top: auto;
  padding-top: clamp(1rem, 2.2vh, 1.5rem);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(18, 43, 27, 0.55);
  text-wrap: balance;
}

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .depo { padding-block: clamp(3rem, 7vh, 4.5rem); }

  .depo__titulo { max-width: 20ch; }
  .depo__slide { width: 82vw; max-width: 26rem; }
}

/* ============================================================
   SEÇÃO 04 · ACOMPANHAMENTO
   Painel de canto arredondado dentro da página branca. A montagem
   é assimétrica: uma janela grande, duas menores e os textos ao
   redor. Sem foto ainda, só blocos sólidos no recorte final.
   ============================================================ */
.acomp {
  background: var(--fundo);
  padding-block: clamp(3.5rem, 8vh, 6rem);
  padding-inline: var(--pad);
}

.acomp__painel {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(1.75rem, 3.4vw, 3.25rem);
  border-radius: 14px;
  background: var(--salvia);
  color: var(--branco);
  display: grid;
  gap: clamp(1.5rem, 2.6vw, 2.5rem);
}

/* Desktop: três colunas e o mesmo ritmo da referência, com a faixa
   de cima em três blocos e a de baixo dividida entre título e a
   janela principal. As áreas reposicionam sem mexer no HTML. */
@media (min-width: 901px) {
  .acomp__painel {
    grid-template-columns: 0.95fr 1.1fr 0.95fr;
    grid-template-areas:
      "tit   duo   extra"
      "tit   duo   cta"
      "apoio duo   cta"
      "princ princ princ";
    align-items: start;
  }
  .acomp__titulo   { grid-area: tit; align-self: start; }
  .acomp__janela--principal { grid-area: princ; }
  .acomp__apoio    { grid-area: apoio; align-self: start; }
  /* O duo acompanha a altura das três linhas que atravessa, em vez
     de parar na proporção das janelas. É o stretch que faz as duas
     imagens terminarem no mesmo eixo do texto da esquerda. */
  .acomp__duo      { grid-area: duo; align-self: stretch; }
  .acomp__extra    { grid-area: extra; }
  .acomp__cta      { grid-area: cta; align-self: start; }
}

.acomp__titulo {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.acomp__apoio,
.acomp__extra {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  text-wrap: balance;
}

/* Medida própria para que a quebra equilibrada do texto complementar
   permaneça perceptível dentro da terceira coluna. */
.acomp__extra {
  max-width: 34ch;
  text-wrap: balance;
}

/* ---------- janelas ----------
   Blocos sólidos no recorte definitivo da futura fotografia. */
.acomp__janela {
  position: relative;
  border-radius: 10px;
  background: var(--papel);
}
.acomp__janela--principal { aspect-ratio: 3 / 1; }

.acomp__duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 1.2vw, 1rem);
}
.acomp__janela--a,
.acomp__janela--b { aspect-ratio: 4 / 5; }
/* Piso de altura para o par nunca achatar caso a coluna de texto
   encurte. Só no desktop: empilhado, quem manda é a proporção. */
@media (min-width: 901px) {
  .acomp__duo { min-height: clamp(17rem, 24vw, 24rem); }
  /* Sem proporção fixa aqui: a altura vem do duo esticado, e as duas
     janelas a dividem por igual. */
  .acomp__janela--a,
  .acomp__janela--b { aspect-ratio: auto; height: 100%; }
}

/* ---------- marcadores de integração ----------
   Legenda da futura fotografia principal: três quadrados de
   contorno fino com ícones lineares, nomeando as estratégias que
   o texto complementar cita. Os rótulos ficam sempre visíveis,
   então toque e teclado não dependem de hover; no ponteiro fino o
   marcador só acende e sobe um fio. */
.integra {
  position: absolute;
  left: clamp(1rem, 1.8vw, 1.75rem);
  bottom: clamp(1rem, 1.8vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.integra__item {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
}

.integra__marca {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid rgba(18, 43, 27, 0.4);
  border-radius: 6px;
  color: var(--verde);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.integra__marca svg { width: 18px; height: 18px; }

.integra__nome {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(18, 43, 27, 0.72);
  transition: color 0.3s ease;
  text-wrap: balance;
}

@media (hover: hover) and (pointer: fine) {
  .integra__item:hover .integra__marca {
    border-color: var(--tinta);
    transform: translateY(-2px);
  }
  .integra__item:hover .integra__nome { color: var(--tinta); }
}

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

.acomp__cta { justify-self: start; }

/* Enquanto o GSAP não assume, o painel fica oculto para não piscar.
   Sem JavaScript a regra não existe e tudo aparece normalmente. */
.js-motion #acompanhamento .acomp__painel { visibility: hidden; }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .acomp { padding-block: clamp(2.5rem, 6vh, 3.5rem); }
  .acomp__painel {
    padding: clamp(1.25rem, 4vw, 1.75rem);
    gap: clamp(1.25rem, 4vw, 1.75rem);
  }
  .acomp__titulo { max-width: 18ch; }
  .acomp__apoio,
  .acomp__extra { max-width: 46ch; }

  /* Alturas contidas para a pilha não ficar longa demais. */
  .acomp__janela--principal { aspect-ratio: 4 / 3; }
  .acomp__janela--a,
  .acomp__janela--b { aspect-ratio: 1 / 1; }

  .acomp__cta { width: 100%; justify-self: stretch; }

  .integra { gap: 0.875rem 1.25rem; }
  .integra__marca { width: 30px; height: 30px; }
  .integra__marca svg { width: 16px; height: 16px; }

}

/* ============================================================
   SEÇÃO 04B · SIMULADOR DA RESPOSTA
   Palco de tela inteira: o vídeo é o fundo da seção, e a mulher
   caminha atravessando a página de ponta a ponta enquanto o corpo
   responde. Não há moldura: o palco é a própria folha.

   Coreografia do texto: a caminhada vai da esquerda para a
   direita, então a abertura mora à direita, no lado livre, e a
   ressalva entra à esquerda quando ela chega lá. Quem rege os dois
   tempos é o progresso do scrub, no motion.js; aqui os textos são
   visíveis por padrão, então sem JavaScript nada fica escondido.

   O trecho preso é do CSS (pista de ~230svh, palco sticky de
   100svh); o ScrollTrigger só converte o progresso em currentTime.
   Celular e movimento reduzido: palco menor com o pôster de fundo
   e o texto parado por cima.
   ============================================================ */
.simula {
  background: var(--fundo);
}

.simula__palco {
  position: relative;
  overflow: hidden;
  min-height: clamp(30rem, 92svh, 56rem);
  display: block;
}

/* ---------- o fundo ----------
   Pôster e vídeo cobrem o palco inteiro. O branco do filme é o
   branco da página: sem raio, sem fio, sem borda. */
.simula__poster,
.simula__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.simula__poster--ausente { visibility: hidden; }

.simula__video {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.simula__video--pronto { opacity: 1; }

/* ---------- os dois tempos do texto ---------- */
.simula__abre {
  position: absolute;
  z-index: 2;
  top: clamp(3rem, 12svh, 6rem);
  right: var(--pad);
  width: min(34ch, 44%);
}

.simula__titulo {
  margin: 0;
  font-size: clamp(1.75rem, 2.9vw, 2.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--tinta);
  text-wrap: balance;
}

.simula__apoio {
  margin: clamp(0.875rem, 2.2vh, 1.375rem) 0 0;
  max-width: 38ch;
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(18, 43, 27, 0.74);
  text-wrap: balance;
}

/* O convite acompanha a abertura: mesmo botão padrão da página,
   e some junto com o texto quando a caminhada chega. */
.simula__cta {
  margin-top: clamp(1.25rem, 3vh, 1.75rem);
}

/* A ressalva obrigatória: entra à esquerda, no espaço que a
   caminhada libera. Visível por padrão; quem a esconde no início
   do modo preso é o JavaScript, nunca o CSS. */
.simula__fecho {
  position: absolute;
  z-index: 2;
  left: var(--pad);
  bottom: clamp(2.5rem, 9svh, 4.5rem);
  margin: 0;
  max-width: 30ch;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: rgba(18, 43, 27, 0.6);
  text-wrap: balance;
}

/* ---------- fio de progresso ----------
   Um fio de 1px na base do palco, preenchendo da esquerda para a
   direita no ritmo da caminhada. Só existe no modo preso. */
.simula__fio { display: none; }

/* ---------- modo preso ----------
   Só desktop e só sem movimento reduzido: as mesmas condições que
   o motion.js exige para atribuir o src do vídeo. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .simula__pista {
    /* ESTE É O BOTÃO DE RITMO DA SEÇÃO. Nada mais precisa mudar
       para o filme ficar mais lento ou mais rápido: o end do
       ScrollTrigger é derivado daqui (altura menos dois viewports),
       então o percurso útil do filme é sempre esta altura menos
       200svh.

       Hoje: 1000svh de pista = 800svh de percurso + 100svh finais
       em que a seção seguinte sobe por cima do palco ainda preso.
       O filme tem 12s, então numa tela de 900px são 7200px de
       rolagem, perto de 72 cliques de roda. Para comparar, começou
       em 260svh, que dava 60svh de percurso e uns 16 cliques.

       Mais lento: aumente. Mais rápido: diminua. Abaixo de 200svh
       não existe percurso e o vídeo trava no primeiro quadro. */
    height: 1000svh;
  }

  .simula__palco {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
  }

  .simula__fio {
    display: block;
    position: absolute;
    z-index: 2;
    left: var(--pad);
    right: var(--pad);
    bottom: clamp(1.25rem, 4svh, 2rem);
    height: 1px;
    background: rgba(18, 43, 27, 0.14);
  }
  .simula__fio-nivel {
    position: absolute;
    inset: 0;
    background: var(--ambar);
    transform: scaleX(0);
    transform-origin: left center;
  }
}

/* ---------- a cortina ----------
   No último trecho da pista o palco continua preso e é a seção
   seguinte que sobe por cima dele, como uma folha cobrindo a
   outra. Nada de sombra: o corte é a própria borda do papel. As
   condições são as mesmas do modo preso, então celular e
   movimento reduzido seguem no fluxo normal. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  /* Tudo o que vem depois do simulador pinta acima do palco preso,
     senão o filme vazaria por baixo das seções estáticas seguintes
     enquanto o palco ainda viaja para fora da tela. */
  .simula ~ section,
  .simula ~ footer {
    position: relative;
    z-index: 3;
  }

  #assina { margin-top: -100svh; }
}

/* ---------- responsivo ----------
   Palco menor, pôster de fundo, texto parado. A mulher do pôster
   está à esquerda do quadro, então o recorte a prioriza e os
   textos seguem nos cantos livres. */
@media (max-width: 900px) {
  .simula__palco { min-height: clamp(26rem, 78svh, 40rem); }

  .simula__poster { object-position: 24% center; }

  .simula__abre {
    top: clamp(2rem, 8svh, 3.5rem);
    right: var(--pad);
    width: min(30ch, 60%);
  }

  .simula__fecho {
    bottom: clamp(1.5rem, 6svh, 2.5rem);
    max-width: 26ch;
  }
}

/* ============================================================
   SEÇÃO 05 · QUEM ASSINA
   Split screen de verdade: a tela se parte ao meio e cada metade
   pertence inteira a uma coisa. A esquerda é fotografia de borda a
   borda, encostando no topo, na base e na lateral da seção, sem
   moldura, sem raio e sem faixa de papel em volta. A direita é a
   apresentação, com respiro próprio e centrada na altura.

   Por isso a seção não tem padding e o inner não tem max-width nem
   margem: o corte precisa alcançar a borda real da tela, e não o
   grid de 1520px das outras seções. O respiro que o texto precisa
   voltou para a coluna dele, e não para a seção inteira.
   ============================================================ */
.assina {
  background: var(--papel);
  padding: 0;
}

.assina__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 50% 50%;
  /* stretch é o que faz a fotografia alcançar topo e base. */
  align-items: stretch;
  min-height: clamp(38rem, 82vh, 45rem);
}

/* ---------- área fotográfica ----------
   Ocupa integralmente a metade esquerda. Sem margem, sem padding e
   sem border-radius: nada separa a imagem das bordas da seção.

   Sem aspect-ratio no desktop de propósito: a altura vem do grid,
   então a fotografia acompanha a coluna de texto e as duas metades
   sempre terminam no mesmo eixo. */
.assina__retrato {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: var(--verde);
}

/* Bloco sólido da paleta no lugar da fotografia. Nenhum desenho
   por cima: sem relevo, sem lente, sem máscara e sem contorno. */
.retrato__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* O verde fica por baixo: é ele que aparece enquanto a foto
     carrega e se ela falhar, então a seção nunca mostra um vazio. */
  background-color: var(--verde);
  background-repeat: no-repeat;
  background-size: cover;
  /* A foto é horizontal (1,45:1) e a área é quase quadrada no
     desktop e 4:5 no celular, então com cover quem sobra é a
     largura e não a altura. O rosto está a 52% da largura, e é por
     isso que centro resolve os dois formatos sem recorte próprio. */
  background-position: center;
  /* O url simples fica primeiro de propósito: quem não entende
     image-set ignora a linha seguinte e continua com o JPEG. */
  background-image: url('../assets/samara/sobre-2000.jpg');
  background-image: image-set(
    url('../assets/samara/sobre-2000.webp') type('image/webp'),
    url('../assets/samara/sobre-2000.jpg') type('image/jpeg'));
}

/* No celular a área é bem menor, então não faz sentido baixar a
   versão grande. */
@media (max-width: 900px) {
  .retrato__foto {
    background-image: url('../assets/samara/sobre-1200.jpg');
    background-image: image-set(
      url('../assets/samara/sobre-1200.webp') type('image/webp'),
      url('../assets/samara/sobre-1200.jpg') type('image/jpeg'));
  }
}

/* Quando a fotografia final chegar, ela entra como <img> dentro da
   figura e já nasce no enquadramento certo, sem mexer em layout. */
.assina__retrato img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* O respiro da seção mora aqui, e não no .assina, porque só esta
   metade pode ter margem interna: a outra é imagem sangrada. */
.assina__conteudo {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  padding: clamp(2.5rem, 6vh, 5rem) clamp(2rem, 5vw, 5.5rem);
}

/* A credencial real, em voz baixa, logo abaixo do nome. */
.assina__credencial {
  margin: 0.625rem 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(18, 43, 27, 0.55);
  text-wrap: balance;
}

.assina__carta {
  margin-top: clamp(1.125rem, 2.6vh, 1.625rem);
  max-width: 52ch;
}

.assina__titulo {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.assina__texto {
  margin: clamp(1.125rem, 2.6vh, 1.625rem) 0 0;
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.65;
  color: rgba(18, 43, 27, 0.78);
  text-wrap: pretty;
}
/* O primeiro parágrafo não soma margem ao vão de linha do grid. */
.assina__texto:first-child { margin-top: 0; }

/* O convite fecha a apresentação. Botão padrão do projeto, sem
   sombra e com o mesmo raio de 10px dos demais. */
.assina__cta {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
}

/* ---------- responsivo ----------
   O split desmonta: a fotografia vira a faixa de abertura, em
   largura total e ainda sem raio, e a apresentação vem abaixo com
   o respiro padrão da página. */
@media (max-width: 900px) {
  .assina__inner {
    grid-template-columns: minmax(0, 1fr);
    /* A altura passa a ser a soma do conteúdo, e não uma medida
       de tela. */
    min-height: 0;
  }

  .assina__retrato {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    border-radius: 0;
  }

  .assina__conteudo {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    padding: clamp(2rem, 6vh, 3rem) var(--pad);
  }
  .assina__titulo { max-width: 20ch; }
  .assina__carta { max-width: 46ch; }
}

@media (max-width: 620px) {
  .assina__cta { width: 100%; }
}

/* ============================================================
   SEÇÃO 06 · MEDICAÇÃO
   Duas velocidades na mesma rolagem. A headline fica presa por
   position sticky na coluna estreita e permanece enquanto os três
   painéis passam pela coluna larga, em rolagem normal. Sem pin,
   sem palco de altura inventada e sem distância de scroll criada
   só para segurar o bloco: quem dá o tempo é o próprio conteúdo
   da direita.

   Os painéis são fechados de propósito, e não abertos como os da
   seção 03: aqui a informação é uma ordem de conduta, e a caixa
   ajuda a ler como etapa. Papel quente, fio fino, raio 10px,
   nenhuma sombra.

   O que está escrito aqui é o estado final. Sem JavaScript ou com
   movimento reduzido os três painéis já aparecem inteiros; o
   destaque do ativo é um ganho, nunca um requisito de leitura.
   ============================================================ */
.medica {
  background: var(--fundo);
  padding-block: clamp(4rem, 9vh, 7rem);
}

.medica__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  /* A coluna da esquerda é a menor porque só precisa comportar a
     headline em três linhas. A da direita fica com a folga, que é
     onde a leitura acontece. */
  grid-template-columns: 40fr 60fr;
  gap: var(--gap);
  align-items: start;
}

/* ---------- coluna presa ----------
   O sticky depende de dois detalhes: o item precisa ser alinhado
   ao topo, e não esticado, e o container precisa ser mais alto que
   ele. As duas coisas vêm do align-items: start acima e da altura
   natural da pilha de painéis. */
.medica__coluna {
  position: sticky;
  top: clamp(2.5rem, 10vh, 5rem);
}

.medica__titulo {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.medica__apoio {
  margin: clamp(1.125rem, 2.6vh, 1.625rem) 0 0;
  max-width: 38ch;
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.6;
  color: rgba(18, 43, 27, 0.74);
  text-wrap: balance;
}

/* ---------- painéis ---------- */
.paineis {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(0.75rem, 1.2vw, 1.125rem);
}

.painel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  align-items: start;
  padding: clamp(1.5rem, 2.6vw, 2.5rem);
  border: 1px solid rgba(36, 62, 39, 0.18);
  border-radius: 10px;
  background: var(--papel);
  /* Só superfície e cor mudam no destaque. Nada se desloca, nada
     cresce e nenhuma sombra aparece. */
  transition: background-color 0.5s ease,
              border-color 0.5s ease,
              color 0.5s ease;
}

/* Número grande e fino, ancorado na primeira linha do título. O
   tabular-nums mantém 01, 02 e 03 exatamente com a mesma largura,
   então a coluna de texto começa sempre no mesmo eixo. */
.painel__n {
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 200;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--verde);
  opacity: 0.45;
  font-variant-numeric: tabular-nums;
  transition: color 0.5s ease, opacity 0.5s ease;
}

.painel__corpo { min-width: 0; }

.painel__t {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.painel__d {
  margin: 0.625rem 0 0;
  max-width: 52ch;
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(18, 43, 27, 0.74);
  text-wrap: balance;
  transition: color 0.5s ease;
}

/* ---------- painel ativo ----------
   Enquanto atravessa o meio da tela, o painel vira verde profundo.
   A classe é posta e retirada pelo ScrollTrigger; sem JavaScript
   ela nunca existe e os três seguem em papel, o que também é uma
   composição inteira. */
.painel--ativo {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--branco);
}
.painel--ativo .painel__n { color: var(--papel); opacity: 0.85; }
.painel--ativo .painel__d { color: rgba(255, 255, 255, 0.8); }

/* ---------- responsivo ----------
   Fluxo vertical, sem coluna presa. A headline abre a seção e os
   painéis vêm abaixo, todos visíveis. */
@media (max-width: 900px) {
  .medica { padding-block: clamp(3rem, 7vh, 4.5rem); }

  .medica__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4.5vh, 2.75rem);
  }

  .medica__coluna { position: static; top: auto; }
  .medica__titulo { max-width: 20ch; }
  .medica__apoio { max-width: 46ch; }

  .painel__d { max-width: 46ch; }
}

@media (max-width: 620px) {
  /* Número acima do texto: em telas estreitas ele roubaria largura
     demais da descrição se continuasse ao lado. */
  .painel {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
  .painel__n { line-height: 1; }
}

/* ============================================================
   ATENDIMENTOS
   Nove cartões de papel sobre o papel quente, separados por fio e
   raio contido, cada um aberto por um ícone autoral de traço fino.
   O desenho dos ícones (dashoffset) e o redesenho no hover vivem
   no js/motion.js; aqui o estado é o final, com o traço completo,
   que é o que vale sem JavaScript e com movimento reduzido.
   ============================================================ */
.atende {
  background: var(--papel);
  padding-block: clamp(4rem, 9vh, 7rem);
}

.atende__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.atende__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}

.atende__titulo {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--tinta);
  text-wrap: balance;
}

.atende__apoio {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(18, 43, 27, 0.72);
  text-wrap: balance;
}

/* ---------- os cartões ---------- */
.cartas-areas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.875rem, 1.2vw, 1.125rem);
}

.carta-area {
  display: flex;
  flex-direction: column;
  padding: clamp(1.375rem, 2vw, 1.875rem);
  border: 1px solid rgba(18, 43, 27, 0.16);
  border-radius: 10px;
  background: var(--branco);
  transition: border-color 0.35s ease;
}
.carta-area:hover { border-color: rgba(18, 43, 27, 0.38); }

/* O ícone abre o cartão, grande o bastante para o traço respirar.
   A cor é o verde institucional; o desenho do traço é do GSAP. */
.carta-area__icone {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: clamp(1.25rem, 3vh, 1.75rem);
  color: var(--verde);
}
.carta-area__icone svg {
  width: 100%;
  height: 100%;
}

/* ---------- vida dos ícones ----------
   Cada símbolo respira do jeito do que representa: a balança
   oscila, a chama pulsa, a gota goteja, os anéis se encostam, as
   ondas correm, a lua e o sol giram devagar, o coração bate, a
   seta sobe. Amplitudes mínimas, transform puro, e tudo para sob
   movimento reduzido. */
@keyframes icone-oscilar  { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
@keyframes icone-pulsar   { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes icone-gotejar  { from { transform: translateY(-1.2px); } to { transform: translateY(1.4px); } }
@keyframes icone-encostar { from { transform: scaleX(1); } to { transform: scaleX(0.94); } }
@keyframes icone-correr   { from { transform: translateX(-1.6px); } to { transform: translateX(1.6px); } }
@keyframes icone-girar    { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes icone-bater {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.08); }
  24% { transform: scale(1); }
  36% { transform: scale(1.05); }
  48% { transform: scale(1); }
}
@keyframes icone-subir { from { transform: translate(-1.2px, 1.2px); } to { transform: translate(1.2px, -1.2px); } }

.carta-area__icone svg {
  transform-origin: 50% 50%;
  animation-duration: 3.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.carta-area__icone--balanca svg    { animation-name: icone-oscilar; transform-origin: 50% 22%; }
.carta-area__icone--energia svg    { animation-name: icone-pulsar; }
.carta-area__icone--gota svg       { animation-name: icone-gotejar; }
.carta-area__icone--equilibrio svg { animation-name: icone-encostar; }
.carta-area__icone--ondas svg      { animation-name: icone-correr; }
.carta-area__icone--lua svg        { animation-name: icone-girar; animation-duration: 4.2s; }
.carta-area__icone--coracao svg    { animation-name: icone-bater; animation-direction: normal; animation-duration: 2.6s; }
.carta-area__icone--ascensao svg   { animation-name: icone-subir; }
.carta-area__icone--sol svg        { animation-name: icone-girar; animation-duration: 5s; }

@media (prefers-reduced-motion: reduce) {
  .carta-area__icone svg { animation: none; }
}

.carta-area__t {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-wrap: balance;
}

.carta-area__d {
  margin: 0.625rem 0 0;
  max-width: 40ch;
  font-size: clamp(0.875rem, 0.95vw, 1rem);
  line-height: 1.55;
  color: rgba(18, 43, 27, 0.72);
  text-wrap: balance;
}

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .atende { padding-block: clamp(3rem, 7vh, 4.5rem); }

  .atende__intro {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 3vh, 1.5rem);
    align-items: start;
  }

  .cartas-areas { grid-template-columns: 1fr 1fr; }
  .carta-area__d { max-width: 46ch; }
}

@media (max-width: 620px) {
  .cartas-areas { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   SEÇÃO 08 · LOCALIZAÇÃO
   Fechamento prático sobre o branco: o endereço em voz alta à
   esquerda e o mapa amplo à direita, como as duas metades de um
   cartão da clínica. Sem sombra, raio contido, fio fino da paleta
   em volta do mapa.
   ============================================================ */
.local {
  background: var(--fundo);
  padding-block: clamp(4rem, 9vh, 7rem);
}

.local__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: minmax(20rem, 38fr) 62fr;
  gap: var(--gap);
  align-items: center;
}

.local__titulo {
  margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--tinta);
  text-wrap: balance;
}

/* ---------- ficha ----------
   Pares de rótulo e valor separados por fios, a mesma linguagem
   de pauta do resto da página. O endereço completo não se repete
   aqui: ele já está no mapa. */
.ficha {
  margin: 0;
}

.ficha__linha {
  display: grid;
  grid-template-columns: clamp(6.5rem, 9vw, 8.5rem) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: baseline;
  padding-block: clamp(0.875rem, 1.8vh, 1.125rem);
  border-top: 1px solid rgba(18, 43, 27, 0.16);
}
.ficha__linha:last-child { border-bottom: 1px solid rgba(18, 43, 27, 0.16); }

.ficha__rotulo {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(18, 43, 27, 0.55);
  text-wrap: balance;
}

.ficha__valor {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--tinta);
  text-wrap: balance;
}

.local__acoes {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- mapa ----------
   Fio fino e raio de 10px, como as áreas de fotografia. O iframe
   preenche a moldura e a altura acompanha a coluna de texto, com
   um mínimo generoso. */
.local__mapa {
  position: relative;
  min-height: clamp(22rem, 48vh, 30rem);
  border: 1px solid rgba(18, 43, 27, 0.16);
  border-radius: 10px;
  overflow: hidden;
}

.local__mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .local { padding-block: clamp(3rem, 7vh, 4.5rem); }

  .local__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4.5vh, 2.5rem);
    align-items: start;
  }

  .local__mapa {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 620px) {
  .local__acoes { flex-direction: column; }
  .local__acoes .btn { width: 100%; }
}

/* ============================================================
   RODAPÉ
   O mesmo verde quase preto da faixa ticker fecha a página como a
   abriu. Assimétrico: lema grande à esquerda, contato à direita,
   e a linha de base com navegação e copyright depois de um fio.

   O sublinhado dos links nasce com escala zero e se desenha no
   hover e no foco: microinteração funcional, sem sombra, sem
   caixa e sem nada que persista durante o scroll.
   ============================================================ */
/* ============================================================
   RODAPÉ
   Enxuto de propósito: quem assina, o registro, a política e o
   Instagram. Nada de repetir o menu nem os contatos, que já vivem
   na seção de localização logo acima.
   ============================================================ */
.rodape {
  background: var(--tinta);
  color: var(--papel);
  padding-block: clamp(2.5rem, 6vh, 3.5rem) clamp(2rem, 5vh, 3rem);
}

.rodape__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.rodape__medica {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.rodape__crm {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: rgba(247, 242, 233, 0.62);
  text-wrap: balance;
}

.rodape__fim {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  font-size: 0.8125rem;
}

/* O sublinhado é permanente: assim o link lê como link mesmo em
   corpo pequeno sobre fundo escuro. */
.rodape__link {
  color: rgba(247, 242, 233, 0.72);
  text-decoration: underline;
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(247, 242, 233, 0.32);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.rodape__link:hover,
.rodape__link:focus-visible {
  color: var(--papel);
  text-decoration-color: var(--papel);
}

.rodape__insta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(247, 242, 233, 0.72);
  transition: color 0.2s ease;
}
.rodape__insta svg { width: 1.125rem; height: 1.125rem; flex: none; }
.rodape__insta:hover,
.rodape__insta:focus-visible { color: var(--ambar); }

.rodape__link:focus-visible,
.rodape__insta:focus-visible {
  outline: 2px solid rgba(247, 242, 233, 0.85);
  outline-offset: 4px;
  border-radius: 3px;
}

@media (max-width: 620px) {
  .rodape__inner { align-items: start; }
  .rodape__fim { width: 100%; }
}
.rodape__link:hover::after,
.rodape__link:focus-visible::after { transform: scaleX(1); }

.rodape__link:focus-visible {
  outline: 2px solid rgba(247, 242, 233, 0.85);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Movimento reduzido: o sublinhado aparece sem percurso. */
@media (prefers-reduced-motion: reduce) {
  .rodape__link::after { transition: none; }
}