/* ==========================================================================
   STYLE.CSS — Identidade visual, utilitários e estilos base
   Site institucional — Yasmim dos Santos Pinho (Psicóloga Clínica)
   ========================================================================== */

:root {
  /* --- Cores (seção 8 do PROJETO.md) --- */
  --creme: #FDF7EC;
  --areia: #F7EBD8;
  --bege-rosado: #FAEEE4;
  --mostarda: #E3C57F;
  --mostarda-escuro: #C9A85C;
  --marrom: #7A4A24;
  --marrom-escuro: #4A2E18; /* usar sempre no lugar de preto puro */
  --marrom-suave: #82644A; /* ajustado de #8A6A4F: original ficava em 4,19:1 sobre
     --areia (abaixo do AA 4.5:1) — mesma tonalidade, um pouco mais escura */
  --terracota: #A85426;
  --terracota-hover: #8C4220;
  --branco: #FFFFFF;

  /* Cores funcionais — fora da paleta de marca, necessárias para estados
     de interface (erro de formulário e o verde reconhecível do WhatsApp) */
  --erro: #B3261E;
  --whatsapp-verde: #25D366;

  /* --- Tipografia --- */
  --fonte-titulo: 'Cormorant Garamond', serif;
  --fonte-corpo: 'Inter', sans-serif;

  /* Escala de tamanhos: 14 / 16 / 18 / 20 / 26 / 34 / 46 / 60px */
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-26: 1.625rem;
  --fs-34: 2.125rem;
  --fs-46: 2.875rem;
  --fs-60: 3.75rem;

  /* --- Espaçamento: escala de 8px --- */
  --esp-8: 0.5rem;
  --esp-16: 1rem;
  --esp-24: 1.5rem;
  --esp-32: 2rem;
  --esp-48: 3rem;
  --esp-64: 4rem;
  --esp-96: 6rem;
  --esp-120: 7.5rem;

  /* Padding vertical de seção */
  --secao-padding-desktop: var(--esp-120);
  --secao-padding-mobile: 4.5rem; /* 72px */

  /* --- Estilo geral --- */
  --raio-borda: 16px;
  --sombra-suave: 0 8px 24px rgba(74, 46, 24, 0.08);
  --largura-maxima: 1140px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
  /* Compensa a altura do header fixo no scroll por âncoras (JS atualiza o valor real) */
  scroll-padding-top: var(--altura-header, 96px);
}

body {
  font-family: var(--fonte-corpo);
  font-size: var(--fs-16);
  color: var(--marrom-suave);
  background-color: var(--creme);
}

/* position:fixed + "top" negativo (definido via JS com o scrollY no
   momento da abertura) trava o scroll sem que a página pule ao fechar */
body.menu-aberto {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

body.lightbox-aberto {
  overflow: hidden;
}

main {
  /* Compensa o header fixo para o conteúdo não nascer coberto por ele */
  padding-top: var(--altura-header, 96px);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-titulo);
  color: var(--marrom);
  font-weight: 500;
  line-height: 1.2;
}

/* Escala de títulos (item 1.3 da rodada de ajustes): mobile-first, com
   override em desktop (>=768px) — não duas regras concorrentes para o
   mesmo alvo. */
h1 { font-size: clamp(1.875rem, 1.7rem + 0.8vw, 2.125rem); }      /* 30–34px mobile */
h2 { font-size: clamp(1.5625rem, 1.45rem + 0.5vw, 1.75rem); }     /* 25–28px mobile */
h3 { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem); }       /* 17–18px mobile */
h4 { font-size: var(--fs-20); }

@media (min-width: 768px) {
  h1 { font-size: clamp(2.875rem, 2.5rem + 1.2vw, 3.25rem); }     /* 46–52px desktop */
  h2 { font-size: clamp(2.125rem, 1.9rem + 0.9vw, 2.375rem); }    /* 34–38px desktop */
  h3 { font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.3125rem); } /* 19–21px desktop */
}

p {
  font-family: var(--fonte-corpo);
  line-height: 1.65;
  max-width: 65ch;
  color: var(--marrom-suave);
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);   /* 15–16px mobile */
}

@media (min-width: 768px) {
  p {
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); /* 16–17px desktop */
  }
}

a {
  /* terracota puro já passa em AA (5,30:1 sobre --branco), mas usamos o tom
     mais escuro como cor de repouso dos links para reservar contraste ao
     estado de hover */
  color: var(--terracota-hover);
  transition: color 0.2s ease;
}

a:hover,
a:focus-visible {
  color: var(--marrom);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 2px;
}

ul, ol {
  color: var(--marrom-suave);
}

/* --------------------------------------------------------------------------
   Skip link (acessibilidade)
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--esp-16);
  z-index: 2000;
  background-color: var(--branco);
  color: var(--marrom-escuro);
  padding: var(--esp-16) var(--esp-24);
  border-radius: 8px;
  box-shadow: var(--sombra-suave);
  font-weight: 500;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: var(--esp-16);
  outline: 2px solid var(--terracota);
  outline-offset: 2px;
}

main:focus-visible {
  outline: none;
}

/* --------------------------------------------------------------------------
   Utilitários de layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--largura-maxima);
  margin-inline: auto;
  padding-inline: var(--esp-24);
}

.section {
  padding-block: var(--secao-padding-mobile);
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--secao-padding-desktop);
  }
}

.section--areia {
  background-color: var(--areia);
}

.section--bege-rosado {
  background-color: var(--bege-rosado);
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--esp-16) var(--esp-32);
  border-radius: var(--raio-borda);
  background-color: var(--terracota);
  color: var(--branco);
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: var(--fs-16);
  border: 2px solid var(--terracota);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
  background-color: var(--terracota-hover);
  border-color: var(--terracota-hover);
  color: var(--branco);
}

.btn--outline {
  background-color: transparent;
  color: var(--terracota);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--bege-rosado);
  color: var(--terracota);
}

/* --------------------------------------------------------------------------
   Títulos de seção
   -------------------------------------------------------------------------- */

.olho {
  display: inline-block;
  font-family: var(--fonte-corpo);
  font-size: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem); /* 12–13px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* --terracota: entre 4,50:1 (sobre --areia, margem mínima) e 5,30:1
     (sobre --branco) — passa no AA em todos os fundos claros do site */
  color: var(--terracota);
  margin-bottom: var(--esp-8);
}

.titulo-secao {
  color: var(--marrom);
  margin-bottom: var(--esp-16);
}

/* Trecho em destaque dentro de um título (h1/h2), criando duas cores no
   mesmo título: o restante fica em --marrom (ou --branco, na faixa de
   decisão), o trecho em <em class="destaque"> fica em --terracota e
   itálico. */
.destaque {
  color: var(--terracota);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Header / navegação
   -------------------------------------------------------------------------- */

.cabecalho {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.cabecalho.scrolled {
  background-color: rgba(255, 255, 255, 0.97);
  box-shadow: var(--sombra-suave);
}

.cabecalho__conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-16);
  min-height: 72px;
}

/* Logo / identificação */

.cabecalho__logo {
  display: flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 0;
}

/* Logo reduzido nesta rodada (antes: 52px mobile / 62px desktop) — largura
   automática, o logo é uma composição quadrada (brasão + nome empilhados),
   não uma faixa horizontal. */
.cabecalho__logo-moldura {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 42px;
  /* Só um piso: se a imagem falhar e sumir (display:none), o placeholder
     ainda tem onde aparecer. Com a imagem carregando normalmente, o
     conteúdo é quem define a largura real (inline-flex). */
  min-width: 42px;
}

@media (min-width: 1200px) {
  .cabecalho__logo-moldura {
    height: 48px;
    min-width: 48px;
  }
}

.cabecalho__logo-img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.cabecalho__logo-moldura .placeholder-imagem {
  font-size: var(--fs-14);
  padding: 0;
}

/* Enquanto assets/logo.svg (ou outra imagem placeholder do site) não
   existir, o JS (main.js) esconde o <img> quebrado via evento "error"
   e o conteúdo/fundo por trás passa a ser a identificação visual. */
.imagem-indisponivel {
  display: none;
}

/* Aviso "Sua imagem" nos espaços de foto ainda sem arquivo definitivo.
   Fica escondido por padrão; o seletor de irmão abaixo só o mostra quando
   o <img> correspondente ganha .imagem-indisponivel (main.js) — ou seja,
   some sozinho assim que a cliente enviar a foto real e o src funcionar. */
.placeholder-imagem {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: var(--esp-16);
  text-align: center;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-18);
  font-weight: 500;
  color: var(--marrom);
  pointer-events: none;
}

img.imagem-indisponivel ~ .placeholder-imagem {
  display: flex;
}

/* Logo repetido no topo do drawer mobile (item 7.5) — some no desktop,
   onde a navegação já é a barra horizontal e o logo do header já basta */
.cabecalho__nav-logo {
  display: none;
}

/* Navegação (desktop) */

.cabecalho__nav {
  display: flex;
  align-items: center;
  gap: var(--esp-32);
  flex-shrink: 0;
}

.cabecalho__lista {
  display: flex;
  align-items: center;
  gap: var(--esp-24);
}

.cabecalho__link {
  position: relative;
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: var(--fs-16);
  color: var(--marrom-escuro);
  padding-block: var(--esp-8);
}

.cabecalho__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--terracota);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.cabecalho__link:hover,
.cabecalho__link:focus-visible {
  color: var(--marrom);
}

.cabecalho__link.ativo {
  color: var(--marrom);
}

.cabecalho__link:hover::after,
.cabecalho__link:focus-visible::after,
.cabecalho__link.ativo::after {
  transform: scaleX(1);
}

.cabecalho__cta {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Com o menu horizontal visível (>=1200px), tudo fica colado à borda
   esquerda real da janela — não só reagrupado dentro do container
   centralizado (que em telas largas ainda deixava uma folga grande antes
   do logo), mas sem o limite de largura/centralização do .container */
@media (min-width: 1200px) {
  .cabecalho__conteudo {
    max-width: none;
    margin-inline: 0;
    /* Pequena folga a mais que o padding padrão de 24px do .container,
       pra não ficar colado bem na borda da janela */
    padding-left: var(--esp-48);
    justify-content: flex-start;
    gap: var(--esp-64);
  }
}

/* Botão hambúrguer (mobile) */

.cabecalho__hamburguer {
  display: none;
  position: relative;
  /* Acima do overlay (1000) e do drawer (1001): precisa continuar clicável
     (ele vira o "X" que fecha o menu) mesmo com os dois abertos por cima do resto do header */
  z-index: 1002;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.cabecalho__hamburguer span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--marrom-escuro);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.cabecalho__hamburguer[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.cabecalho__hamburguer[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.cabecalho__hamburguer[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Overlay do menu mobile */

.cabecalho__overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(74, 46, 24, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.cabecalho__overlay.ativo {
  opacity: 1;
  pointer-events: auto;
}

/* Menu em drawer lateral abaixo de 1200px — breakpoint elevado nesta
   rodada (era 900px): com a 7ª âncora do menu ("Como funciona") e o botão
   "Agende sua sessão", a barra horizontal não cabia com folga entre 900 e
   1199px (botão chegava a estourar a largura do header). Agora o menu só
   vira barra horizontal quando há espaço confortável de verdade. */

@media (max-width: 1199px) {
  .cabecalho__hamburguer {
    display: flex;
  }

  .cabecalho__nav {
    position: fixed;
    top: 0;
    right: 0;
    /* 100vh como fallback para navegadores sem suporte a dvh; 100dvh evita
       que a barra de endereço do navegador mobile "corte" a base do drawer */
    height: 100vh;
    height: 100dvh;
    width: min(320px, 85vw);
    background-color: var(--areia);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--esp-32);
    padding: var(--esp-96) var(--esp-24) var(--esp-24);
    box-shadow: var(--sombra-suave);
    transform: translateX(100%);
    /* visibility (não só opacity/transform) garante que o drawer fechado
       não fique clicável nem alcançável por Tab, e some de vez da tela */
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.35s ease, visibility 0s linear 0.35s;
    overflow-y: auto;
    /* Acima do overlay (1000): o conteúdo do drawer precisa aparecer por
       cima da camada escura, não por baixo dela */
    z-index: 1001;
  }

  .cabecalho__nav.aberto {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.35s ease;
  }

  .cabecalho__nav-logo {
    display: flex;
  }

  .cabecalho__lista {
    flex-direction: column;
    align-items: center;
    gap: var(--esp-8);
    width: 100%;
  }

  .cabecalho__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    text-align: center;
    font-size: var(--fs-18);
  }

  .cabecalho__cta {
    width: 100%;
    text-align: center;
    margin-top: var(--esp-16);
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

@keyframes hero-entrada {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--areia);
  /* .section aplica padding-block (topo e base). O <main> já compensa a
     altura do header fixo via padding-top (--altura-header), então manter
     o padding-top cheio do .section (72/120px) duplicava o espaço entre o
     menu e o hero. Aqui fica só um respiro pequeno — não zero (título
     colado no header) nem o valor cheio do .section. O padding-bottom do
     .section continua valendo normalmente. */
  padding-top: var(--esp-32);
}

.hero__conteudo {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--esp-32);
}

/* Mobile: título → imagem → corpo (texto + botões), via order nos 3
   containers irmãos. Desktop reposiciona com grid-column/grid-row abaixo,
   mantendo o layout original de duas colunas. */
.hero__titulo {
  order: 1;
}

.hero__imagem {
  order: 2;
}

.hero__corpo {
  order: 3;
}

@media (min-width: 900px) {
  .hero__conteudo {
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-rows: auto auto;
    /* row-gap bem menor que column-gap: aproxima o título do corpo de
       texto (título → corpo) sem mexer no espaço horizontal até a imagem */
    row-gap: 0;
    column-gap: var(--esp-64);
    align-items: start;
  }

  .hero__titulo {
    order: initial;
    grid-column: 1;
    grid-row: 1;
  }

  .hero__corpo {
    order: initial;
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
  }

  .hero__imagem {
    order: initial;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }
}

.hero__titulo,
.hero__corpo {
  max-width: 640px;
  animation: hero-entrada 0.8s ease both;
}

.hero__titulo {
  font-size: 1.375rem; /* 22px mobile — cabe nas duas linhas do <br> (375px+) */
  line-height: 1.05;
  /* Sem margin-bottom: o espaço até o próximo bloco já vem do gap do grid
     (.hero__conteudo) — somar os dois abria um vão grande demais */
  margin-bottom: 0;
}

/* Item 1.1: a 2ª linha do H1 só fica centralizada no mobile — ali ela
   herda o text-align:center do .hero__titulo (regra no media query
   abaixo). No desktop não há override aqui, então herda o alinhamento
   padrão do título (à esquerda). */
.hero__titulo-linha2 {
  display: block;
}

/* Item 1.2: negrito só em "cuidar de si", mantendo o itálico e a cor de
   --destaque já existentes no <em> — peso 700 carregado via Google Fonts
   (ital,wght@1,700) especialmente para este trecho */
.hero__titulo .destaque strong {
  font-weight: 700;
}

@media (min-width: 768px) {
  .hero__titulo {
    font-size: clamp(2.875rem, 2.5rem + 1.2vw, 3.25rem); /* 46–52px desktop */
  }
}

/* Item 1.5: ~15% menor que os 16px originais (var(--fs-16)). Uma redução
   literal de 15% chegaria a 13,6px, abaixo do piso de 15px definido para o
   mobile — por isso o valor final fica no próprio piso (15px, 0.9375rem),
   a maior redução possível sem violar o mínimo pedido. */
.hero__apoio {
  font-family: var(--fonte-corpo);
  font-size: 0.9375rem; /* 15px — piso mínimo definido no item 1.5 */
  font-weight: 500;
  color: var(--marrom-suave);
  margin-bottom: var(--esp-32);
}

@media (min-width: 900px) {
  .hero__apoio {
    /* Largura ajustada para o texto quebrar em ~3 linhas no desktop,
       com balance distribuindo o texto de forma mais uniforme entre elas */
    max-width: 48ch;
    text-wrap: balance;
  }
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-16);
}

/* Item 1.7: informações rápidas abaixo dos CTAs, com ícones Lucide inline
   no mesmo padrão visual dos outros ícones de linha do site (ex.: .contato__icone) */
.hero__info-lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-8);
  margin-top: var(--esp-24);
}

.hero__info-lista li {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-14);
  color: var(--marrom-suave);
}

.hero__info-icone {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--terracota);
}

.hero__info-icone svg {
  width: 100%;
  height: 100%;
}

/* Item 1.8: nome e CRP da profissional, discretos, logo abaixo das
   informações rápidas — primeira dobra é onde a exigência do CFP de
   exibir nome completo + CRP fica mais visível sem competir com o CTA
   principal, que continua sendo o elemento de maior destaque do hero. */
.hero__assinatura {
  margin-top: var(--esp-16);
  margin-bottom: 0;
  font-family: var(--fonte-corpo);
  font-size: var(--fs-14);
  color: var(--marrom-suave);
}

.hero__imagem {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 400px;
  animation: hero-entrada 0.8s ease 0.15s both;
}

.hero__moldura {
  position: absolute;
  inset: 0;
  background-color: var(--mostarda);
  /* Mesmo formato de moldura da seção "Sobre mim" (cantos assimétricos) */
  border-radius: 24px 96px 24px 96px;
  transform: translate(18px, 18px);
  z-index: 0;
}

.hero__foto-moldura {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 24px 96px 24px 96px;
  background: linear-gradient(160deg, var(--bege-rosado), var(--areia));
  box-shadow: var(--sombra-suave);
}

/* Item 1.3: leve zoom no conteúdo da foto (~12%), mantendo moldura e
   formato do container intactos — object-position ajustado para o
   enquadramento continuar centrado no rosto após o zoom */
.hero__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transform: scale(1.12);
}

@media (max-width: 767px) {
  .hero__titulo,
  .hero__corpo {
    text-align: center;
  }

  .hero__apoio {
    max-width: 34ch;
    margin-inline: auto;
  }

  /* Removido só no mobile — botão secundário continua visível no desktop */
  .hero__ctas .btn--outline {
    display: none;
  }

  .hero__apoio {
    font-size: 0.875rem; /* 14px no mobile — 15px continua no desktop */
    margin-bottom: var(--esp-16);
  }

  .hero__imagem {
    /* ~10% menor que os 320px anteriores */
    max-width: 288px;
  }

  .hero__ctas {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.75rem; /* 12px pedido — fora da escala de 8px do projeto */
  }

  .hero__ctas .btn {
    width: 100%;
    max-width: 320px;
    min-height: 48px;
  }

  .hero__info-lista {
    display: none;
  }

  /* Quebra em duas linhas só no mobile: "Yasmim dos Santos Pinho" e,
     embaixo, "Psicóloga Clínica · CRP 06/162942" — some o separador do
     meio (ele reaparece no desktop, onde tudo fica numa linha só) */
  .hero__assinatura-separador {
    display: none;
  }

  .hero__assinatura-linha2 {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Faixa de credenciais
   -------------------------------------------------------------------------- */

.faixa-credenciais {
  /* Mesmo --terracota do rodapé */
  background-color: var(--terracota);
  border-top: 1px solid var(--mostarda-escuro);
  border-bottom: 1px solid var(--mostarda-escuro);
  padding-block: var(--esp-32);
}

@media (min-width: 1024px) {
  .faixa-credenciais {
    padding-block: var(--esp-48);
  }
}

/* Mobile-first: grid de 2 colunas até 767px */
.faixa-credenciais__lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--esp-16);
  row-gap: var(--esp-24);
}

.faixa-credenciais__item {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  /* --areia sobre --marrom: ~5,1:1 (AA) */
  color: var(--areia);
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: var(--fs-14);
}

.faixa-credenciais__item:last-child {
  grid-column: 1 / -1;
  justify-content: center;
  text-align: center;
}

.faixa-credenciais__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--areia);
}

.faixa-credenciais__check svg {
  width: 100%;
  height: 100%;
}

/* 768px a 1023px: quebra em até 2 linhas, centralizado */
@media (min-width: 768px) {
  .faixa-credenciais__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: var(--esp-32);
    row-gap: var(--esp-16);
  }

  .faixa-credenciais__item:last-child {
    grid-column: auto;
  }
}

/* Acima de 1024px: tudo em uma única linha horizontal */
@media (min-width: 1024px) {
  .faixa-credenciais__lista {
    flex-wrap: nowrap;
    column-gap: 0;
  }

  .faixa-credenciais__item {
    font-size: clamp(0.78rem, 0.6rem + 0.4vw, 0.95rem);
    white-space: nowrap;
    padding-left: clamp(1rem, 0.6rem + 1vw, 1.5rem);
  }

  .faixa-credenciais__item:first-child {
    padding-left: 0;
  }
}

/* Ocultada no mobile a pedido da cliente. O CRP (obrigatório pelo CFP)
   segue visível no rodapé em qualquer largura — só oculta visualmente
   (display:none), a faixa continua ativa e completa no desktop. */
@media (max-width: 767px) {
  .faixa-credenciais {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Animação de entrada ao rolar (usada em várias seções)
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.reveal--visivel {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Ícones de card — Lucide inline (usado em Identificação e Como posso ajudar)
   -------------------------------------------------------------------------- */

.icone {
  display: block;
  width: 40px;
  height: 40px;
  color: var(--terracota);
  margin-bottom: var(--esp-16);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .icone {
    width: 36px;
    height: 36px;
    /* Auto-margin num filho de flex centraliza no eixo cruzado,
       independente do align-items do card pai */
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   Identificação — "Talvez a terapia faça sentido para você se…"
   -------------------------------------------------------------------------- */

.identificacao__cabecalho {
  max-width: 1000px;
  margin-inline: auto;
  margin-bottom: var(--esp-48);
  text-align: center;
}

@media (min-width: 1024px) {
  .identificacao__cabecalho {
    margin-bottom: var(--esp-64);
  }
}

.identificacao__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-24);
}

@media (min-width: 640px) {
  .identificacao__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .identificacao__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--esp-32);
  }
}

.identificacao__card {
  display: flex;
  flex-direction: column;
  /* Sem gap: o espaçamento vem da margin-bottom do próprio ícone (.icone),
     evitando somar gap + margem e abrir espaço demais */
  background-color: var(--areia);
  border: 1px solid rgba(201, 168, 92, 0.5); /* --mostarda-escuro, opacidade reduzida */
  border-radius: var(--raio-borda);
  padding: var(--esp-32) var(--esp-24);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.identificacao__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-suave);
}

.identificacao__card p {
  margin: 0;
}

/* Item 2.3: no mobile, lista vertical em coluna única — ícone à esquerda,
   texto à direita, com divisor sutil entre os itens (sem o "cartão" do
   desktop). No desktop (min-width:1024px, regra já existente acima) o
   grid de 3 colunas x 2 linhas dos 6 cards permanece intacto. */
@media (max-width: 767px) {
  .identificacao__grid {
    gap: 0;
  }

  .identificacao__card {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid rgba(201, 168, 92, 0.35); /* --mostarda-escuro, opacidade reduzida */
    border-radius: 0;
    padding: var(--esp-16) 0;
    gap: var(--esp-16);
  }

  .identificacao__card:first-child {
    border-top: 1px solid rgba(201, 168, 92, 0.35);
  }

  .identificacao__card:hover {
    transform: none;
    box-shadow: none;
  }

  .identificacao__card .icone {
    margin-bottom: 0;
    margin-inline: 0;
  }
}

/* Atraso escalonado entre os 6 cards ao entrarem na tela */
.identificacao__grid .reveal:nth-child(1) { transition-delay: 0s; }
.identificacao__grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.identificacao__grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.identificacao__grid .reveal:nth-child(4) { transition-delay: 0.24s; }
.identificacao__grid .reveal:nth-child(5) { transition-delay: 0.32s; }
.identificacao__grid .reveal:nth-child(6) { transition-delay: 0.4s; }

/* Item 2.4: frase de transição em duas linhas — destaque maior (título) e
   apoio menor (corpo), usando tokens já existentes na escala (--fs-26/--fs-16) */
.identificacao__fechamento {
  max-width: 640px;
  margin-inline: auto;
  margin-top: var(--esp-48);
  text-align: center;
}

@media (min-width: 1024px) {
  .identificacao__fechamento {
    margin-top: var(--esp-64);
  }
}

.identificacao__fechamento-destaque {
  margin: 0 0 var(--esp-8);
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-26);
  color: var(--marrom);
}

.identificacao__fechamento-apoio {
  margin: 0 auto;
  max-width: 480px;
  font-family: var(--fonte-corpo);
  font-size: var(--fs-16);
  color: var(--marrom-suave);
}

/* --------------------------------------------------------------------------
   Sobre mim
   -------------------------------------------------------------------------- */

.sobre__conteudo {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--esp-48);
}

@media (min-width: 900px) {
  .sobre__conteudo {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--esp-64);
  }
}

/* Atraso escalonado: foto primeiro, texto logo em seguida */
.sobre__conteudo .reveal:nth-child(1) { transition-delay: 0s; }
.sobre__conteudo .reveal:nth-child(2) { transition-delay: 0.15s; }

.sobre__imagem {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 400px;
}

/* Moldura em --bege-rosado, deslocada na direção oposta à do hero, e cantos
   assimétricos para diferenciar visualmente da foto do hero */
.sobre__moldura {
  position: absolute;
  inset: 0;
  background-color: var(--bege-rosado);
  border-radius: 24px 96px 24px 96px;
  transform: translate(-16px, 16px);
  z-index: 0;
}

.sobre__foto-moldura {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 24px 96px 24px 96px;
  background: linear-gradient(160deg, var(--mostarda-escuro), var(--areia));
  box-shadow: var(--sombra-suave);
}

.sobre__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sobre__texto p {
  margin-bottom: var(--esp-16);
}

.sobre__mini-blocos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-24);
  margin-top: var(--esp-24);
  padding-top: var(--esp-24);
  border-top: 1px solid rgba(201, 168, 92, 0.5); /* --mostarda-escuro, opacidade reduzida */
}

.sobre__mini-bloco {
  display: flex;
  flex-direction: column;
  gap: var(--esp-8);
}

.sobre__numero {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-20);
  font-weight: 500;
  /* --terracota: 4,50:1 sobre --areia — passa mesmo pelo limiar de texto
     normal (4.5:1), então não depende da faixa maior liberada a negrito */
  color: var(--terracota);
}

.sobre__legenda {
  font-family: var(--fonte-corpo);
  font-size: var(--fs-14);
  color: var(--marrom-suave);
}

/* Item 5.1: fonte reduzida em ~20% (única alteração autorizada nesta
   seção). 20px * 0.8 = 16px, coincide com o token --fs-16 já existente. */
.sobre__assinatura {
  margin-top: var(--esp-32);
  margin-bottom: 0;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-16);
  line-height: 1.2;
  color: var(--marrom);
}

/* 14px * 0.8 = 11,2px, abaixo do piso de 13px pedido — por isso o valor
   final fica no piso (13px, 0.8125rem) */
.sobre__assinatura-crp {
  /* Negativo: o line-height de 1.65 herdado do <p> base deixa bastante
     espaço abaixo da linha do nome mesmo com line-height:1.2 nela — puxa
     o CRP pra cima desse respiro */
  margin-top: -0.35rem;
  margin-bottom: 0;
  line-height: 1.2;
  font-family: var(--fonte-corpo);
  font-size: 0.8125rem; /* 13px — piso mínimo definido no item 5.1 */
  color: var(--marrom-suave);
}

@media (max-width: 767px) {
  .sobre__texto {
    text-align: center;
  }

  .sobre__texto > p {
    max-width: 34ch;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   Como posso ajudar (temas atendidos)
   -------------------------------------------------------------------------- */

.ajuda__cabecalho {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--esp-48);
  text-align: center;
}

@media (min-width: 1024px) {
  .ajuda__cabecalho {
    margin-bottom: var(--esp-64);
  }
}

/* Item 3.4: 2 colunas x 3 linhas no mobile, 3 colunas x 2 linhas no
   desktop (>=768px) — grid fixo para os 6 temas, cards de mesma altura
   (align-items: stretch), objetivo declarado pela cliente de deixar o
   site menos extenso. */
.ajuda__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: var(--esp-16);
}

@media (min-width: 768px) {
  .ajuda__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--esp-24);
  }
}

.ajuda__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Sem gap: o ícone já tem margin-bottom de 16px (.icone) e o título
     define os 8px até a descrição — gap somaria espaço em dobro */
  /* Sem isso, um item de grid não encolhe além do min-content do seu
     conteúdo — palavras longas nos títulos forçavam a coluna a estourar
     a largura da tela no mobile */
  min-width: 0;
  overflow-wrap: break-word;
  background-color: var(--bege-rosado);
  border-radius: var(--raio-borda);
  padding: var(--esp-24);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (min-width: 768px) {
  .ajuda__card {
    padding: var(--esp-32) var(--esp-24);
  }
}

.ajuda__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-suave);
}

.ajuda__titulo {
  margin: 0 0 var(--esp-8);
}

.ajuda__apoio {
  font-size: var(--fs-14);
  /* --marrom-suave (ajustado): 4,76:1 sobre o fundo --bege-rosado do card */
  color: var(--marrom-suave);
  max-width: none;
  margin: 0;
}

/* Atraso escalonado entre os 6 cards ao entrarem na tela */
.ajuda__grid .reveal:nth-child(1) { transition-delay: 0s; }
.ajuda__grid .reveal:nth-child(2) { transition-delay: 0.06s; }
.ajuda__grid .reveal:nth-child(3) { transition-delay: 0.12s; }
.ajuda__grid .reveal:nth-child(4) { transition-delay: 0.18s; }
.ajuda__grid .reveal:nth-child(5) { transition-delay: 0.24s; }
.ajuda__grid .reveal:nth-child(6) { transition-delay: 0.3s; }

/* --------------------------------------------------------------------------
   Como funciona a terapia (linha do tempo) — nova seção, rodada de ajustes
   -------------------------------------------------------------------------- */

.processo__cabecalho {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--esp-48);
  text-align: center;
}

@media (min-width: 1024px) {
  .processo__cabecalho {
    margin-bottom: var(--esp-64);
  }
}

.processo__linha-do-tempo {
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin-inline: auto;
}

/* Item 4.5: número e ícone à esquerda, texto à direita — mesma estrutura
   em coluna única no mobile e no desktop */
.processo__etapa {
  display: flex;
  gap: var(--esp-24);
}

.processo__linha-do-tempo .reveal:nth-child(1) { transition-delay: 0s; }
.processo__linha-do-tempo .reveal:nth-child(2) { transition-delay: 0.12s; }
.processo__linha-do-tempo .reveal:nth-child(3) { transition-delay: 0.24s; }
.processo__linha-do-tempo .reveal:nth-child(4) { transition-delay: 0.36s; }

.processo__marcador {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.processo__circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--terracota);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: var(--fs-18);
}

/* Linha vertical que conecta os círculos — some depois do último */
.processo__linha {
  flex: 1;
  width: 2px;
  min-height: var(--esp-24);
  margin-block: var(--esp-8);
  background-color: var(--mostarda-escuro);
}

.processo__etapa:last-child .processo__linha {
  display: none;
}

.processo__conteudo {
  padding-bottom: var(--esp-48);
}

.processo__etapa:last-child .processo__conteudo {
  padding-bottom: 0;
}

.processo__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  margin: 0 0 var(--esp-8);
}

.processo__titulo svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--terracota);
}

.processo__conteudo p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Formas de atendimento
   -------------------------------------------------------------------------- */

.atendimento__cabecalho {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--esp-48);
  text-align: center;
}

@media (min-width: 1024px) {
  .atendimento__cabecalho {
    margin-bottom: var(--esp-64);
  }
}

.atendimento__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-24);
}

@media (min-width: 768px) {
  .atendimento__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-32);
  }
}

.atendimento__grid .reveal:nth-child(1) { transition-delay: 0s; }
.atendimento__grid .reveal:nth-child(2) { transition-delay: 0.12s; }

.atendimento__card {
  display: flex;
  flex-direction: column;
  gap: var(--esp-16);
  background-color: var(--branco);
  border-radius: 20px;
  padding: var(--esp-32);
  box-shadow: var(--sombra-suave);
}

.atendimento__icone {
  display: inline-flex;
  width: 44px;
  height: 44px;
  color: var(--terracota);
}

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

.atendimento__descricao {
  margin: 0;
}

.atendimento__lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-8);
  margin-top: var(--esp-8);
}

.atendimento__lista li {
  position: relative;
  padding-left: var(--esp-24);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-14);
  color: var(--marrom-suave);
}

.atendimento__lista li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--terracota);
  font-weight: 500;
}

.atendimento__botao {
  width: 100%;
  min-height: 48px;
  margin-top: auto;
}

/* Item 6.2: texto sempre alinhado à esquerda dentro dos cards (mobile e
   desktop) — antes ficava centralizado no mobile, corrigido nesta rodada */
@media (max-width: 767px) {
  .atendimento__card {
    padding: var(--esp-24);
  }

  .atendimento__botao {
    /* Em coluna única (1 card por linha) não há mais outro card na mesma
       "fileira" do grid para o margin-top:auto distribuir — por isso um
       valor fixo aqui garante os 24px pedidos entre lista e botão */
    margin-top: var(--esp-24);
  }
}

/* --------------------------------------------------------------------------
   Consultório (galeria)
   -------------------------------------------------------------------------- */

.consultorio__cabecalho {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--esp-48);
  text-align: center;
}

.consultorio__apoio {
  margin-inline: auto;
  margin-top: var(--esp-8);
}

@media (min-width: 1024px) {
  .consultorio__cabecalho {
    margin-bottom: var(--esp-64);
  }
}

.consultorio__carrossel {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
}

.consultorio__viewport {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.consultorio__trilha {
  position: relative;
  width: 100%;
  height: 100%;
}

.consultorio__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68%;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Estado calculado em JS (distância circular até o índice atual) —
   central maior e nítida, vizinhas parciais nas laterais, resto oculto */
.consultorio__item[data-estado="ativo"] {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
}

.consultorio__item[data-estado="anterior"] {
  transform: translate(-138%, -50%) scale(0.85);
  opacity: 0.4;
  z-index: 2;
  pointer-events: auto;
}

.consultorio__item[data-estado="proxima"] {
  transform: translate(38%, -50%) scale(0.85);
  opacity: 0.4;
  z-index: 2;
  pointer-events: auto;
}

.consultorio__item[data-estado="oculto"] {
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 767px) {
  /* Mesma lógica, com as laterais aparecendo menos */
  .consultorio__item[data-estado="anterior"] {
    transform: translate(-160%, -50%) scale(0.8);
  }

  .consultorio__item[data-estado="proxima"] {
    transform: translate(60%, -50%) scale(0.8);
  }
}

.consultorio__foto-moldura {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--raio-borda);
  background: linear-gradient(160deg, var(--bege-rosado), var(--areia));
  box-shadow: var(--sombra-suave);
}

.consultorio__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.consultorio__item[data-estado="ativo"] {
  cursor: zoom-in;
}

/* Setas circulares sobrepostas às bordas da foto central */
.consultorio__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--branco);
  color: var(--terracota);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-suave);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.consultorio__seta svg {
  width: 22px;
  height: 22px;
}

.consultorio__seta:hover,
.consultorio__seta:focus-visible {
  background-color: var(--bege-rosado);
}

.consultorio__seta--anterior {
  left: 4%;
}

.consultorio__seta--proxima {
  right: 4%;
}

@media (max-width: 480px) {
  .consultorio__seta {
    width: 40px;
    height: 40px;
  }

  .consultorio__seta svg {
    width: 20px;
    height: 20px;
  }
}

.consultorio__bullets {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: var(--esp-16);
}

.consultorio__bullet {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.consultorio__bullet::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--mostarda-escuro);
  opacity: 0.6;
  transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.consultorio__bullet[aria-current="true"]::before {
  background-color: var(--terracota);
  opacity: 1;
  transform: scale(1.4);
}

/* --------------------------------------------------------------------------
   Lightbox da galeria do consultório
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-24);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.lightbox--aberto {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(74, 46, 24, 0.85);
}

.lightbox__conteudo {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-16);
}

.lightbox__fechar {
  position: absolute;
  top: -56px;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--branco);
  font-size: 1.75rem;
  line-height: 1;
}

.lightbox__anterior,
.lightbox__proximo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* Sem z-index, a seta "anterior" (que vem antes da foto no HTML e, no
     mobile, tem seu box sobrepondo a borda da foto) ficava pintada por
     baixo de .lightbox__foto-wrapper — coberta e sem receber clique. */
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--branco);
  font-size: 1.75rem;
  background-color: rgba(74, 46, 24, 0.5);
  border-radius: 50%;
}

.lightbox__anterior {
  left: -8px;
}

.lightbox__proximo {
  right: -8px;
}

@media (min-width: 768px) {
  .lightbox__anterior {
    left: -60px;
  }

  .lightbox__proximo {
    right: -60px;
  }
}

.lightbox__foto-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--raio-borda);
  overflow: hidden;
  background: linear-gradient(160deg, var(--mostarda-escuro), var(--areia));
  box-shadow: var(--sombra-suave);
}

.lightbox__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Instagram
   -------------------------------------------------------------------------- */

.instagram__cabecalho {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--esp-48);
  text-align: center;
}

@media (min-width: 1024px) {
  .instagram__cabecalho {
    margin-bottom: var(--esp-64);
  }
}

.instagram__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-16);
}

@media (min-width: 700px) {
  .instagram__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--esp-16);
  }
}

.instagram__item {
  display: block;
  border-radius: var(--raio-borda);
}

.instagram__foto-moldura {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--raio-borda);
  background: linear-gradient(160deg, var(--bege-rosado), var(--branco));
}

.instagram__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.instagram__item:hover .instagram__foto,
.instagram__item:focus-visible .instagram__foto {
  transform: scale(1.05);
}

.instagram__grid .reveal:nth-child(1) { transition-delay: 0s; }
.instagram__grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.instagram__grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.instagram__grid .reveal:nth-child(4) { transition-delay: 0.24s; }

.instagram__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--esp-48);
}

/* --------------------------------------------------------------------------
   FAQ (accordion)
   -------------------------------------------------------------------------- */

.faq__cabecalho {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--esp-48);
  text-align: center;
}

@media (min-width: 1024px) {
  .faq__cabecalho {
    margin-bottom: var(--esp-64);
  }
}

.faq__lista {
  max-width: 800px;
  margin-inline: auto;
}

.faq__item {
  border-bottom: 1px solid rgba(201, 168, 92, 0.5); /* --mostarda-escuro, opacidade reduzida */
}

.faq__item:first-child {
  border-top: 1px solid rgba(201, 168, 92, 0.5); /* --mostarda-escuro, opacidade reduzida */
}

.faq__pergunta-titulo {
  margin: 0;
  font-size: inherit;
}

.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-16);
  width: 100%;
  min-height: 44px;
  padding-block: var(--esp-24);
  text-align: left;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: var(--fs-18);
  color: var(--marrom-escuro);
}

.faq__pergunta:hover span:first-child,
.faq__pergunta:focus-visible span:first-child {
  color: var(--marrom);
}

/* Ícone +/− : duas barras que, ao abrir, o traço vertical rotaciona 90°
   e se alinha ao horizontal, formando visualmente um "−" */
.faq__icone {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.faq__icone::before,
.faq__icone::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--terracota);
  transform: translate(-50%, -50%);
}

.faq__icone::before {
  width: 14px;
  height: 2px;
}

.faq__icone::after {
  width: 2px;
  height: 14px;
  transition: transform 0.25s ease;
}

.faq__item.aberto .faq__icone::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Altura animada com CSS puro (grid-template-rows 0fr → 1fr) */
.faq__resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq__item.aberto .faq__resposta {
  grid-template-rows: 1fr;
}

.faq__resposta-interno {
  overflow: hidden;
}

.faq__resposta-interno p {
  padding-bottom: var(--esp-24);
  color: var(--marrom-suave);
}

/* --------------------------------------------------------------------------
   Faixa de decisão
   -------------------------------------------------------------------------- */

.decisao {
  /* --terracota (não --mostarda): o texto da faixa é claro (--branco/
     --bege-rosado) e só passa no AA sobre --terracota (5,30:1 e 4,65:1);
     sobre --mostarda ficaria em 1,67:1 */
  background-color: var(--terracota);
  padding-block: var(--esp-96);
}

@media (min-width: 1024px) {
  .decisao {
    padding-block: 10rem;
  }
}

.decisao__conteudo {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-24);
  text-align: center;
}

.decisao__conteudo .reveal:nth-child(1) { transition-delay: 0s; }
.decisao__conteudo .reveal:nth-child(2) { transition-delay: 0.12s; }
.decisao__conteudo .reveal:nth-child(3) { transition-delay: 0.24s; }

.decisao__frase {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.875rem);
  line-height: 1.2;
  color: var(--branco);
}

/* Quebra fixa só no desktop: "Mudanças importantes" numa linha e
   "começam com uma decisão." na linha debaixo. No mobile a quebra fica
   a cargo do text-wrap:balance (regra no media query abaixo). */
.decisao__quebra-desktop {
  display: none;
}

@media (min-width: 768px) {
  .decisao__quebra-desktop {
    display: initial;
  }
}

/* --terracota (usado no resto do site) ficaria invisível em cima do
   próprio fundo --terracota desta faixa. --mostarda no lugar: 3,17:1,
   suficiente para o texto grande desta frase (>=24px), mas abaixo do
   4.5:1 de texto normal — por isso só aqui, não é o token padrão do
   destaque. */
.decisao__frase .destaque {
  color: var(--mostarda);
}

.decisao__apoio {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: var(--fs-18);
  color: var(--bege-rosado);
}

/* .btn padrão (fundo --terracota) ficaria invisível sobre o fundo
   --terracota desta faixa — inverte para --branco aqui */
.decisao .btn {
  background-color: var(--branco);
  border-color: var(--branco);
  color: var(--terracota);
}

.decisao .btn:hover,
.decisao .btn:focus-visible {
  background-color: var(--bege-rosado);
  border-color: var(--bege-rosado);
  color: var(--terracota-hover);
}

/* --------------------------------------------------------------------------
   Contato (formulário + mapa)
   -------------------------------------------------------------------------- */

/* Item 10.2: duas colunas no desktop (texto+WhatsApp / mapa), empilhado
   no mobile. A ordem no HTML já resolve o item 10.3 (texto+botão antes do
   mapa no mobile), sem precisar de order/grid-row para reposicionar nada. */
.contato__conteudo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-48);
}

@media (min-width: 900px) {
  .contato__conteudo {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-64);
    align-items: start;
  }
}

.contato__conteudo .reveal:nth-child(1) { transition-delay: 0s; }
.contato__conteudo .reveal:nth-child(2) { transition-delay: 0.12s; }

@media (max-width: 767px) {
  .contato__info {
    text-align: center;
  }

  .contato__info > p {
    max-width: 34ch;
    margin-inline: auto;
  }
}

/* Item 10.2 (coluna esquerda): botão de WhatsApp com ícone */
.contato__whatsapp-botao {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-8);
  margin-top: var(--esp-24);
}

.contato__whatsapp-icone {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.contato__whatsapp-icone svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .contato__whatsapp-botao {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}

/* Item 10.2 (coluna direita): mapa incorporado + link para o Google Maps */
.contato__mapa-bloco {
  display: flex;
  flex-direction: column;
}

@media (max-width: 767px) {
  .contato__mapa-bloco {
    text-align: center;
  }
}

.contato__mapa {
  width: 100%;
  height: clamp(220px, 40vw, 260px);
  margin-top: var(--esp-8);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sombra-suave);
}

.contato__mapa-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.contato__mapa-link {
  display: inline-block;
  margin-top: var(--esp-16);
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: var(--fs-14);
}

/* --------------------------------------------------------------------------
   Botão flutuante de WhatsApp
   -------------------------------------------------------------------------- */

.botao-flutuante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 50%;
  background-color: var(--whatsapp-verde);
  box-shadow: 0 4px 14px rgba(74, 46, 24, 0.22);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
  z-index: 900;
}

.botao-flutuante.visivel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.botao-flutuante:hover,
.botao-flutuante:focus-visible {
  box-shadow: 0 6px 18px rgba(74, 46, 24, 0.28);
}

.botao-flutuante__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  line-height: 0;
  color: var(--branco);
}

.botao-flutuante__icone svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .botao-flutuante {
    right: var(--esp-16);
    bottom: var(--esp-16);
    width: 52px;
    height: 52px;
  }

  .botao-flutuante__icone {
    width: 26px;
    height: 26px;
  }
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */

.rodape {
  /* Mesmo --terracota da faixa "Mudanças importantes..." (.decisao) */
  background-color: var(--terracota);
}

.rodape__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-8);
  padding-block: var(--esp-48);
  text-align: center;
}

/* Logo do rodapé: mesma lógica de largura/altura automática do header e
   da seção Sobre (itens 7/8), com a versão clara do arquivo (logo-rodape.png)
   pensada para o fundo escuro. min-height é só o piso do placeholder. */
.rodape__logo-moldura {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 160px;
  min-height: 28px;
}

.rodape__logo {
  width: 100%;
  height: auto;
}

.rodape__logo-moldura .placeholder-imagem {
  color: var(--bege-rosado);
  font-size: var(--fs-14);
  padding: 0;
}

.rodape__barra {
  /* --bege-rosado a 40% de opacidade: divisor sutil, porém visível,
     sobre o fundo --terracota */
  border-top: 1px solid rgba(250, 238, 228, 0.4);
}

.rodape__barra-conteudo {
  display: flex;
  justify-content: center;
  padding-block: var(--esp-16);
  /* Reserva espaço para o botão flutuante do WhatsApp (56px + 20px de
     offset no desktop; 52px + 16px no mobile) não cobrir o copyright */
  padding-bottom: 5.5rem;
  text-align: center;
  font-family: var(--fonte-corpo);
  font-size: var(--fs-14);
}

/* Especificidade "p" precisa vencer o seletor global `p { color: ... }`
   (style.css, base): sem isso o texto herdava --marrom-suave do elemento
   <p> em vez do --bege-rosado do copyright, ficando quase ilegível sobre
   o fundo --terracota do rodapé. --mostarda (usado antes, quando o fundo
   era --marrom-escuro) ficaria em 3,17:1 aqui — abaixo do AA de texto
   normal (4.5:1); --bege-rosado passa em 4,65:1. */
.rodape__barra-conteudo p {
  margin: 0;
  color: var(--bege-rosado);
}

.rodape__barra-conteudo a {
  color: var(--bege-rosado);
  text-decoration: none;
}

.rodape__barra-conteudo a:hover,
.rodape__barra-conteudo a:focus-visible {
  color: var(--branco);
}

@media (max-width: 767px) {
  .rodape__conteudo {
    padding-block: var(--esp-32);
  }
}

/* --------------------------------------------------------------------------
   Ajustes mobile — redução dos títulos (abaixo de 768px)
   Desktop inalterado: os valores base de cada título continuam os mesmos,
   estas regras só entram em vigor dentro do media query.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .hero__titulo {
    text-wrap: balance;
  }

  .titulo-secao {
    margin-bottom: var(--esp-8);
    text-wrap: balance;
  }

  .decisao__frase {
    font-size: clamp(1.375rem, 1.1rem + 2vw, 1.75rem);
    line-height: 1.3;
    text-wrap: balance;
  }
}

/* --------------------------------------------------------------------------
   Acessibilidade — movimento reduzido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .cabecalho,
  .cabecalho__nav,
  .cabecalho__overlay,
  .cabecalho__hamburguer span,
  .cabecalho__link::after,
  .identificacao__card,
  .ajuda__card,
  .consultorio__item,
  .instagram__foto,
  .lightbox,
  .faq__icone::after,
  .faq__resposta,
  .botao-flutuante {
    transition: none;
  }
}