/* ==========================================================================
   Fabiola Magalhães — Psicóloga Clínica e Psicanalista
   Folha de estilo principal

   Fundo creme com acentos em terracota. Cada seção abre com um chapéu em
   caixa alta e um título em cinza-escuro; as fotos usam o mesmo recorte de
   canto (--raio-foto).

   Ordem: 1. Reset · 2. Tokens · 3. Base · 4. Layout
          5. Componentes · 6. Seções · 7. Utilitários · 8. Media queries
   Mobile-first: o estado padrão é o do celular; telas maiores ficam nos
   blocos @media do final do arquivo.
   ========================================================================== */


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

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

html,
body,
h1, h2, h3, h4,
p, ul, ol, li,
figure, blockquote {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

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

img {
  height: auto;
}

/* padding: 0 é essencial — o navegador dá um recuo próprio ao <button>, e sem
   zerá-lo qualquer botão usado ao lado de links sai desalinhado. Os botões que
   precisam de recuo definem o seu. */
button {
  font: inherit;
  color: inherit;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

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

/* text-size-adjust: sem isso o iOS aumenta o corpo do texto por conta própria
   ao girar para paisagem, quebrando a escala tipográfica. */
html,
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Rede de segurança contra estouro horizontal, SÓ no body.
   No <html> isso quebrava o drawer: overflow-x: clip cria um contexto de
   recorte preso ao documento, e o menu (position: fixed) era cortado conforme
   a página rolava — sobrava só o topo dele na tela. */
body {
  overflow-x: clip;
}


/* ==========================================================================
   2. TOKENS (design system)
   ========================================================================== */

:root {

  /* --- Cores ---
     Os tons claros (--rosa-suave, --blush) são DECORATIVOS: servem de
     preenchimento e realce. Nenhum deles carrega texto nem ícone — para isso
     existem --terracota e --rosa-forte, os únicos acentos aprovados em
     contraste. */

  /* Fundos */
  --creme:        #FDF3EC;   /* fundo geral da página */
  --fundo-suave:  #FEF7F2;   /* Sobre, Contato e os cards de Modalidades */
  --fundo-claro:  #FFF9F8;   /* itens do acordeão */
  --blush:        #FBE7E0;   /* superfícies claras e realces */
  --branco:       #FFFFFF;   /* seções alternadas */

  /* Rosa remanescente: hover dos links e contorno de foco do teclado. */
  --rosa-suave:   #F7D4D0;   /* fundo da seleção de texto */
  --rosa-forte:   #A0474F;   /* 5,98:1 no branco · 5,47:1 no creme */

  /* Laranja queimado — cor de acento do site: botões, ícones e chapéus.
     5,84:1 sobre o fundo da seção · branco sobre ele: 6,08:1 */
  --terracota:       #994D2C;
  --terracota-hover: #7D3E23;

  --vinho:        #6B2737;   /* seleção de texto, link de pular e menu hambúrguer */

  --rodape-fundo: #011715;   /* verde profundo — fundo do rodapé (branco 18,51:1) */
  --faixa-fundo:  #011715;   /* filtro sobre a foto da faixa intermediária */

  --titulo-neutro: #333333;  /* cor padrão de todos os títulos */

  --texto:        #4A3239;   /* 11,62:1 no branco · 10,63:1 no creme */
  --texto-suave:  #75595E;   /*  6,27:1 no branco ·  5,74:1 no creme */

  --whatsapp:       #128C7E;
  --whatsapp-hover: #0E6F64;

  /* --- Tipografia --- */
  --fonte-titulo: 'Lato', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fonte-corpo:  'Inter', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* A Lato tem altura-x normal, ao contrário da serifada que estava aqui
     antes: a escala volta ao patamar usual, senão os títulos pareceriam
     grandes demais no mesmo corpo. */
  --fs-h1:       clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  --fs-h2:       clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --fs-h3:       clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-destaque: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --fs-corpo:    clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --fs-pequeno:  0.9375rem;
  --fs-micro:    0.8125rem;

  --lh-titulo: 1.2;
  --lh-corpo:  1.7;

  /* --- Espaçamento --- */
  --espaco-secao: clamp(4rem, 9vw, 7.5rem);   /* >= 96px a partir de ~1070px */
  --espaco-xs: 0.5rem;
  --espaco-sm: 1rem;
  --espaco-md: 1.5rem;
  --espaco-lg: 2.5rem;
  --espaco-xl: 4rem;

  --largura-container: 1200px;
  --padding-container: clamp(1.25rem, 4vw, 2rem);

  /* --- Formas --- */
  --raio-sm:   12px;
  --raio-md:   18px;
  --raio-lg:   28px;
  --raio-pill: 999px;

  /* Pétala: cantos opostos arredondados. Usado nas fotos do hero, da Sobre
     e de Benefícios. */
  --raio-foto:   50px 150px 50px 150px;
  --raio-curva:  50% 50% 50% 50% / 3.5rem 3.5rem 3.5rem 3.5rem;

  --sombra-sutil: 0 1px 2px rgba(107, 39, 55, 0.04), 0 6px 20px rgba(107, 39, 55, 0.06);
  --sombra-media: 0 2px 6px rgba(107, 39, 55, 0.06), 0 16px 38px rgba(107, 39, 55, 0.10);
  --sombra-forte: 0 8px 20px rgba(107, 39, 55, 0.10), 0 24px 60px rgba(107, 39, 55, 0.16);

  /* --- Movimento --- */
  --transicao-rapida: 200ms ease-out;
  --transicao-media:  300ms ease-out;

  /* --- Estrutura --- */
  --altura-header: 72px;
  --z-header: 100;
  --z-overlay: 90;
  --z-drawer: 95;
  --z-flutuante: 80;
}


/* ==========================================================================
   3. BASE
   ========================================================================== */

body {
  font-family: var(--fonte-corpo);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto);
  background-color: var(--creme);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Peso 700: a Lato não tem 500 nem 600 no Google Fonts, e pedir um peso
   inexistente faria o navegador sintetizá-lo, com resultado sujo. */
h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: var(--lh-titulo);
  color: var(--titulo-neutro);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
  text-wrap: pretty;
}

p + p {
  margin-top: var(--espaco-sm);
}

/* Compensa a altura do header fixo em qualquer salto de âncora — inclusive
   os nativos. O JS reaproveita isso via scrollIntoView, então não existe
   cálculo de offset duplicado em lugar nenhum. */
[id] {
  scroll-margin-top: calc(var(--altura-header) + 1rem);
}

/* Foco visível — 5,98:1 sobre branco e 5,47:1 sobre creme.
   Sobre a faixa verde e o rodapé o contorno vira claro (seção 6). */
:focus-visible {
  outline: 2px solid var(--rosa-forte);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background-color: var(--rosa-suave);
  color: var(--vinho);
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

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

.secao {
  position: relative;
  padding-block: var(--espaco-secao);
}

/* As seções creme não pintam fundo: quem aparece é o body. */
.secao--branco {
  background-color: var(--branco);
}

.secao--curva {
  border-radius: var(--raio-curva);
  padding-block: calc(var(--espaco-secao) + 1.5rem);
}

/* Anula só o arco de baixo: a seção mantém o topo curvo, mas termina reta —
   e com isso a seção seguinte começa com a borda superior reta também. */
.secao--base-reta {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

/* Um degrau acima do creme do body. */
.secao--suave {
  background-color: var(--fundo-suave);
}

.secao__cabecalho {
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: var(--espaco-lg);
  text-align: center;
}

.secao__chapeu {
  position: relative;
  z-index: 1;
  margin-bottom: var(--espaco-xs);
  font-size: var(--fs-pequeno);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rosa-forte);
}

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

/* Títulos de seção: um corpo maior que o --fs-h2 padrão. A cor já vem do
   h1/h2/h3. */
.secao__titulo--grande {
  font-size: clamp(2.25rem, 1.7rem + 2.1vw, 3rem);
}

/* Variante em laranja queimado — usada em Dúvidas e Contato. */
.secao__chapeu--terracota {
  color: var(--terracota);
}

/* 15px em todas as seções que usam texto de apoio — hoje Modalidades e Contato. */
.secao__intro {
  position: relative;
  z-index: 1;
  margin-top: var(--espaco-sm);
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.secao__acao {
  margin-top: var(--espaco-lg);
  text-align: center;
}



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

/* --- 5.1 Link de pular conteúdo ------------------------------------------- */

.pular-conteudo {
  position: absolute;
  top: var(--espaco-sm);
  left: var(--espaco-sm);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  font-size: var(--fs-pequeno);
  font-weight: 600;
  color: var(--branco);
  background-color: var(--vinho);
  border-radius: var(--raio-sm);
  transform: translateY(-200%);
  transition: transform var(--transicao-rapida);
}

.pular-conteudo:focus-visible {
  transform: translateY(0);
  outline-color: var(--blush);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-xs);
  min-height: 44px;
  padding: 0.75rem 1.75rem;
  font-family: var(--fonte-corpo);
  font-size: var(--fs-pequeno);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  border-radius: var(--raio-pill);
  transition: background-color var(--transicao-rapida),
              color var(--transicao-rapida),
              transform var(--transicao-rapida);
}



/* CTA de fechamento — compartilhado pelo "Fale comigo" e pela faixa
   intermediária. Mais largo e mais alto que o --grande, com texto menor. */
.btn--destaque {
  min-width: 17rem;
  min-height: 60px;
  padding: 1.15rem 3rem;
  font-size: 0.9375rem;
  color: var(--branco);
  background-color: var(--terracota);
}

.btn--destaque:hover {
  background-color: var(--terracota-hover);
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

/* --- 5.3 Logo ------------------------------------------------------------- */

/* 8rem (128px) deixa o logo com 54px de altura, folgado no header de 72px do
   celular. Cresce para 9,5rem no desktop, na seção 8.2. */
.logo {
  display: block;
  max-width: 8rem;
}

.logo img,
.rodape__logo img {
  width: 100%;
  height: auto;
}

.rodape__logo {
  display: block;
  max-width: 12rem;
}

/* --- 5.4 Header ----------------------------------------------------------- */

.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background-color: transparent;
  transition: background-color var(--transicao-media),
              box-shadow var(--transicao-media);
}

/* Aplicado pelo JS depois de 50px de rolagem.
   SEM backdrop-filter, e isso é essencial: o drawer do menu é um <nav>
   position: fixed dentro deste header. backdrop-filter (como transform e
   filter) faz o elemento virar bloco de contenção para descendentes fixos —
   o drawer passava a medir a altura do header em vez da tela, e depois de
   rolar 50px aparecia só a faixa de cima dele. Fundo sólido resolve. */
.cabecalho--rolado {
  background-color: var(--creme);
  box-shadow: 0 1px 0 rgba(107, 39, 55, 0.06), 0 8px 24px rgba(107, 39, 55, 0.07);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-sm);
  min-height: var(--altura-header);
}

/* --- 5.5 Botão hambúrguer ------------------------------------------------- */

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--raio-sm);
}

.menu-toggle__barra {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--vinho);
  border-radius: 2px;
  transition: transform var(--transicao-media),
              opacity var(--transicao-rapida);
}

/* Com o menu aberto, quem fecha é o X de dentro do drawer. O hambúrguer sai
   de cena para não ficarem dois controles fazendo a mesma coisa.
   visibility (e não display) preserva o espaço e evita o layout pular. */
.menu-toggle[aria-expanded="true"] {
  visibility: hidden;
}

/* --- 5.6 Navegação (drawer no mobile) ------------------------------------- */

.navegacao {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  /* Espaçamentos enxutos: o menu inteiro precisa caber sem rolagem, até em
     tela de 640px. Os 44px de área de toque dos links ficam intactos — o que
     encolheu foi o espaço entre eles, não o alvo. */
  gap: var(--espaco-sm);
  width: min(85vw, 20rem);
  padding: var(--espaco-sm) var(--espaco-md);
  overflow-y: auto;
  background-color: var(--creme);
  box-shadow: var(--sombra-forte);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transicao-media), visibility var(--transicao-media);
}

.navegacao--aberto {
  transform: translateX(0);
  visibility: visible;
}

/* Cabeçalho do drawer: logo e botão de fechar. O hambúrguer some enquanto o
   menu está aberto (regra abaixo), então este X é o único jeito de fechar
   pelo toque — junto com o overlay e a tecla Esc. */
.navegacao__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-sm);
  padding-bottom: var(--espaco-sm);
  border-bottom: 1px solid var(--blush);
}

/* alt="" no HTML: o logo do header já anuncia o nome, este é repetição visual. */
.navegacao__logo {
  width: 100%;
  max-width: 6rem;
  height: auto;
}

.navegacao__fechar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--terracota);
  border-radius: 50%;
  transition: background-color var(--transicao-rapida);
}

.navegacao__fechar:hover {
  background-color: var(--blush);
}

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

.navegacao__lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navegacao__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--texto);
  border-radius: var(--raio-sm);
  transition: color var(--transicao-rapida), background-color var(--transicao-rapida);
}

.navegacao__link:hover {
  color: var(--rosa-forte);
  background-color: var(--blush);
}

/* Marcado pelo scroll spy do JS. */
.navegacao__link--ativo {
  color: var(--rosa-forte);
  font-weight: 600;
}

/* Herda a cor do --destaque, mas não o corpo: os 272x60px daquele CTA são
   para fechar seção, não para caber num header de 92px. */
.navegacao__cta {
  align-self: flex-start;
  min-width: 0;
  min-height: 44px;
  padding: 0.6rem 1.4rem;
  font-size: 0.875rem;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: rgba(107, 39, 55, 0.4);
  opacity: 0;
  transition: opacity var(--transicao-media);
}

.menu-overlay--visivel {
  opacity: 1;
}

/* Trava a rolagem do fundo enquanto o drawer está aberto. A classe vai no
   <html> E no <body>: no celular, quem rola varia entre os dois, e travar só
   um deixava a página deslizar por baixo do menu. */
.menu-aberto {
  overflow: hidden;
}

/* --- 5.7 Cards ------------------------------------------------------------ */

.cards {
  display: grid;
  gap: var(--espaco-md);
}

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-sm);
  padding: var(--espaco-md);
  background-color: var(--creme);
  border: 1px solid var(--blush);
  border-radius: var(--raio-lg);
  transition: transform var(--transicao-media), box-shadow var(--transicao-media);
}

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

/* Sobre o creme das seções sem fundo próprio, os cards viram brancos. */
.card--contorno {
  background-color: var(--branco);
  border-color: var(--blush);
}

/* Foto + conteúdo. No celular empilha; a partir de 1024px a foto vai para a
   esquerda e o texto para a direita (ver seção 9.2). */
/* align-items: center alinha o bloco de texto pelo meio da foto — como a foto
   é o item mais alto, é ela que define a altura da linha. */
.card--modalidade {
  display: grid;
  gap: var(--espaco-md);
  align-items: center;
  padding: var(--espaco-md);
  text-align: left;
  background-color: var(--fundo-suave);
}

.card__foto {
  width: 100%;
  max-width: 14rem;
  aspect-ratio: 34 / 37;
  object-fit: cover;
  border-radius: var(--raio-md);
}

.card__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
}


/* O botão ocupa a largura da coluna de texto, como na referência: o
   min-width de 17rem do --destaque estouraria a coluna. */
.card--modalidade .btn {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin-top: var(--espaco-sm);
  padding: 0.7rem var(--espaco-sm);
  font-size: 0.875rem;
}

/* Escala compartilhada por todos os cards da página: 17px no título e 15px
   no texto, o mesmo corpo dos textos de apoio das seções. */
.card__titulo {
  font-size: 1.0625rem;
}

.card__texto {
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

/* --- 5.8 Acordeão --------------------------------------------------------- */

.acordeao {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Mesmo fundo da seção de contato. Como ele fica quase branco sobre a seção
   branca, a borda é o único traço que ainda separa um item do outro. */
.acordeao__item {
  overflow: hidden;
  background-color: var(--fundo-claro);
  border: 1px solid #F5DED8;
  border-radius: var(--raio-md);
}

.acordeao__cabecalho {
  font-size: inherit;
}

.acordeao__gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-sm);
  width: 100%;
  min-height: 60px;
  padding: 1.25rem 2.5rem;
  text-align: left;
  /* A cor mora aqui, e não em .acordeao__pergunta, para que o :hover abaixo
     continue alcançando o texto por herança. */
  color: var(--titulo-neutro);
  transition: color var(--transicao-rapida);
}

.acordeao__gatilho:hover {
  color: var(--rosa-forte);
}

.acordeao__gatilho:focus-visible {
  outline-offset: -3px;
}

.acordeao__pergunta {
  font-family: var(--fonte-titulo);
  font-size: 1.1875rem;   /* 19px */
  font-weight: 700;
  line-height: 1.4;
  color: inherit;
}

.acordeao__seta {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: var(--terracota);
  background-color: var(--blush);
  border-radius: 50%;
  transition: transform var(--transicao-media),
              background-color var(--transicao-rapida),
              color var(--transicao-rapida);
}

.acordeao__seta svg {
  width: 18px;
  height: 18px;
}

/* O estado aberto/fechado vem do próprio aria-expanded do botão: um único
   ponto de verdade, sem classe paralela para o JS sincronizar. */
.acordeao__item:has(.acordeao__gatilho[aria-expanded="true"]) .acordeao__seta {
  color: var(--branco);
  background-color: var(--terracota);
  transform: rotate(180deg);
}

/* Animação de altura via grid: 0fr -> 1fr transiciona suavemente sem
   depender de max-height chutado. */
.acordeao__painel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--transicao-media), visibility var(--transicao-media);
}

.acordeao__item:has(.acordeao__gatilho[aria-expanded="true"]) .acordeao__painel {
  grid-template-rows: 1fr;
  visibility: visible;
}

.acordeao__conteudo {
  overflow: hidden;
}

/* Os itens ocupam a largura toda, mas a linha de texto para em ~72 caracteres:
   acima disso o olho perde o começo da linha seguinte. */
/* Mesma configuração do texto de apoio da seção de contato: 15px, --texto-suave.
   Sem limite de largura: o texto acompanha a largura inteira do item. */
.acordeao__conteudo p {
  padding: 0 2.5rem 1.5rem;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

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

.whatsapp-flutuante {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-flutuante);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--branco);
  background-color: var(--whatsapp);
  border-radius: 50%;
  box-shadow: var(--sombra-forte);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transicao-media),
              visibility var(--transicao-media),
              transform var(--transicao-media),
              background-color var(--transicao-rapida);
}

/* Aplicado pelo JS após 400px de rolagem. */
.whatsapp-flutuante--visivel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.whatsapp-flutuante:hover {
  background-color: var(--whatsapp-hover);
}

.whatsapp-flutuante svg {
  width: 30px;
  height: 30px;
}

/* --- 5.10 Modal (política de privacidade) --------------------------------- */

/* O <dialog> nativo já centraliza, prende o foco e fecha no Esc. Aqui só o
   visual — nenhum comportamento é reimplementado. */
.modal {
  width: min(92vw, 44rem);
  /* dvh acompanha a barra de endereco do celular, que aparece e some ao
     rolar; com 85vh o modal ficaria maior que a area visivel no iOS. */
  max-height: 85vh;
  max-height: 85dvh;
  padding: 0;
  overflow: hidden;
  color: var(--texto);
  background-color: var(--fundo-suave);
  border: 0;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-forte);
}

.modal::backdrop {
  background-color: rgba(1, 23, 21, 0.55);
  backdrop-filter: blur(3px);
}

.modal__caixa {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  max-height: 85dvh;
}

/* Fica fixo no topo enquanto o texto rola por baixo. */
.modal__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-md);
  padding: var(--espaco-md) var(--espaco-lg);
  background-color: var(--fundo-suave);
  border-bottom: 1px solid var(--blush);
}

.modal__titulo {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}

.modal__fechar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--terracota);
  border-radius: 50%;
  transition: background-color var(--transicao-rapida);
}

.modal__fechar:hover {
  background-color: var(--blush);
}

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

.modal__conteudo {
  overflow-y: auto;
  padding: var(--espaco-md) var(--espaco-lg) var(--espaco-lg);
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.modal__data {
  margin-bottom: var(--espaco-md);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracota);
}

.modal__conteudo h3 {
  margin-top: var(--espaco-md);
  margin-bottom: var(--espaco-xs);
  font-size: 1.0625rem;
}

.modal__conteudo h3:first-of-type {
  margin-top: 0;
}

.modal__conteudo strong {
  color: var(--texto);
}

.modal__lista {
  margin-top: var(--espaco-xs);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
}

/* Marcador próprio: o reset zerou o list-style de todas as <ul>. */
.modal__lista li {
  position: relative;
  padding-left: 1.1rem;
}

.modal__lista li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 5px;
  height: 5px;
  background-color: var(--terracota);
  border-radius: 50%;
}

/* Mesma trava do drawer, aplicada ao <html> e ao <body>. */
.modal-aberto {
  overflow: hidden;
}

/* --- 5.11 Revelação por scroll -------------------------------------------- */

/* A classe .revelar é aplicada pelo JS, nunca pelo HTML: se o script falhar,
   o conteúdo simplesmente permanece visível. */
.revelar {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

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

/* Escalonamento entre irmãos — via CSS para não precisar de style inline. */
.revelar:nth-child(2) { transition-delay: 100ms; }
.revelar:nth-child(3) { transition-delay: 200ms; }
.revelar:nth-child(4) { transition-delay: 300ms; }
.revelar:nth-child(5) { transition-delay: 400ms; }


/* ==========================================================================
   6. SEÇÕES
   ========================================================================== */

/* --- 6.0 Centralização no celular ----------------------------------------- */

/* Empilhado, alinhar à esquerda deixa o texto solto na tela. Tudo é
   centralizado por padrão e volta à esquerda a partir de 1024px (seção 8.2),
   onde cada bloco divide a linha com uma foto. */
.hero__texto,
.beneficios__conteudo,
.sobre__texto,
.contato__info,
.card--modalidade {
  text-align: center;
}

/* Os parágrafos têm max-width própria: sem margem automática ficariam
   encostados à esquerda mesmo com o texto centralizado. */
.hero__paragrafo,
.sobre__texto p,
.contato__info .secao__intro {
  margin-inline: auto;
}

/* Exceções que ficam à esquerda mesmo no celular: a lista de contato (endereço,
   telefone e perfil) e os itens de benefício. Os dois são listas de itens
   paralelos — alinhados, o olho compara linha a linha; centralizados, cada um
   começaria num ponto diferente. */
.contato__lista,
.beneficios__lista {
  text-align: left;
}

.card__foto {
  margin-inline: auto;
}


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

.hero {
  position: relative;
  padding-block: calc(var(--altura-header) + var(--espaco-lg)) var(--espaco-secao);
  background-color: var(--creme);
}

.hero__interno {
  position: relative;
  display: grid;
  gap: var(--espaco-xl);
  align-items: center;
}

/* Terracota, como os chapéus das demais seções — é o papel que essa frase
   cumpre aqui, já que o hero não tem chapéu. */
.hero__destaque {
  margin-top: var(--espaco-md);
  font-family: var(--fonte-titulo);
  font-size: var(--fs-destaque);
  font-style: italic;
  line-height: 1.35;
  color: var(--terracota);
}

/* 15px, o mesmo corpo dos textos de apoio do resto da página. */
.hero__paragrafo {
  max-width: 34rem;
  margin-top: var(--espaco-sm);
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.hero__texto .btn {
  margin-top: var(--espaco-lg);
}

.hero__midia {
  position: relative;
}

/* A foto é 2:3 (2688x4032). Solta, ela renderizaria com quase 950px de altura
   e dominaria o hero inteiro. O recorte 4:5 tira ~17% da altura — sobra o
   excesso de parede e prateleira acima da cabeça, e o enquadramento fecha
   mais no rosto. Mesmo recorte de canto das fotos da Sobre e de Benefícios. */
.hero__foto {
  width: 100%;
  max-width: 30rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
  margin-inline: auto;
  border-radius: var(--raio-foto);
}

/* --- 6.1b Benefícios ------------------------------------------------------ */

/* Duas fotos em arco à esquerda, cabeçalho + lista à direita.
   Empilha até 1024px; a partir daí vira duas colunas (seção 9.2). */
/* No celular a foto vem DEPOIS do texto, invertendo a ordem do HTML: quem
   abre a seção precisa ler o título antes de ver a imagem. A partir de
   1024px a ordem volta ao natural, com a foto à esquerda. */
.beneficios__interno {
  display: grid;
  gap: var(--espaco-lg);
  align-items: center;
}

.beneficios__midia {
  order: 2;
}

.beneficios__conteudo {
  order: 1;
}

/* 3:4 é a proporção original do arquivo (1600x2133): com uma foto só, ela
   ocupa a coluna inteira e o object-fit não precisa recortar nada. */
.beneficios__foto {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--raio-foto);
}

.beneficios__lista {
  display: flex;
  flex-direction: column;
  margin-top: var(--espaco-lg);
}

.beneficio {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espaco-md);
  align-items: start;
  padding-block: var(--espaco-md);
  border-top: 1px solid var(--blush);
}

.beneficio:first-child {
  padding-top: 0;
  border-top: 0;
}

/* Ilustrações em WebP, não SVG inline: já vêm na cor terracota e com fundo
   transparente. alt="" no HTML porque são decorativas — o título ao lado já
   diz o que o ícone ilustra. 44px porque têm mais detalhe que um ícone de
   traço simples e ficariam ilegíveis menores. */
.beneficio__icone {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.beneficio__titulo {
  font-size: 1.0625rem;
}

.beneficio__descricao {
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.beneficios__cta {
  margin-top: var(--espaco-lg);
}

/* --- 6.2 Sobre ------------------------------------------------------------ */

.sobre__interno {
  display: grid;
  gap: var(--espaco-xl);
  align-items: center;
}

.sobre__midia {
  position: relative;
}

/* Sem moldura, sem recorte: a foto sai nas proporções originais do arquivo
   (500x600) e nunca passa disso — só encolhe em telas estreitas.
   Raio na ordem do CSS: superior-esq · superior-dir · inferior-dir · inferior-esq. */
.sobre__foto {
  width: 100%;
  max-width: 500px;
  height: auto;
  margin-inline: auto;
  border-radius: var(--raio-foto);
}

.sobre__texto {
  position: relative;
}

/* Mesma configuração do texto de apoio do contato: 15px, --texto-suave.
   O :not() preserva o chapéu, que tem corpo e cor próprios. */
.sobre__texto p:not(.secao__chapeu) {
  position: relative;
  z-index: 1;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

/* Corpo calibrado para a frase caber em uma linha só. A coluna de texto tem
   ~493px a 1024px e ~590px a partir de 1280px; a frase ocupa 14,42em, então
   o teto de 40px é o maior valor que ainda cabe sem quebrar. */
.sobre__texto .secao__titulo {
  margin-bottom: var(--espaco-md);
  font-size: clamp(2rem, 0.65rem + 2.3vw, 2.5rem);
}

.sobre__texto .btn {
  position: relative;
  z-index: 1;
  margin-top: var(--espaco-lg);
}

/* --- 6.3 Chamada intermediária -------------------------------------------- */

/* Foto do consultório sob um filtro sólido de #011715 a 90%.
   O texto branco fica entre 14,6:1 e 18,2:1, conforme a região da foto. */
.chamada {
  position: relative;
  overflow: hidden;
  padding-block: var(--espaco-secao);
  background-color: var(--faixa-fundo);
  background-image:
    linear-gradient(rgba(1, 23, 21, 0.90), rgba(1, 23, 21, 0.90)),
    url("../assets/img/banner-atendimento.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 62rem (992px) porque a primeira linha do título ocupa ~865px a 52px.
   Nos 48rem anteriores ela quebrava sozinha e a frase saía em três linhas,
   ignorando o <br> manual. */
.chamada__interno {
  position: relative;
  z-index: 1;
  max-width: 62rem;
  text-align: center;
}

/* O parágrafo não acompanha essa largura: em 992px a linha ficaria longa
   demais para leitura corrida. */
.chamada__texto {
  max-width: 46rem;
  margin-inline: auto;
}

/* Maior que o --fs-h2 padrão: é a frase de virada da página, e a faixa
   ocupa a largura toda, o que comporta um corpo mais generoso. */
.chamada__titulo {
  font-size: clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem);
  color: var(--branco);
  /* A quebra é manual aqui: o balanceamento automático disputaria com ela. */
  text-wrap: normal;
}

/* Branco puro: o rosa-claro que estava aqui dá só 3,29:1 sobre o filtro
   terracota. Nenhum tom intermediário passa — a hierarquia em relação ao
   título fica por conta do corpo e do peso, não da cor. */
.chamada__texto {
  margin-top: var(--espaco-md);
  color: var(--branco);
}

.chamada__interno .btn {
  margin-top: var(--espaco-lg);
}

/* Contorno de foco claro — o rosa-forte não alcança 3:1 sobre o vinho. */
.chamada :focus-visible,
.rodape :focus-visible {
  outline-color: var(--blush);
}

/* --- 6.4 Contato ---------------------------------------------------------- */

.contato__interno {
  display: grid;
  gap: var(--espaco-lg);
  align-items: start;
}

.contato__info {
  position: relative;
}

/* Só a largura: o corpo de 15px agora vem do próprio .secao__intro. */
.contato__info .secao__intro {
  max-width: 34rem;
}

.contato__lista {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  margin-top: var(--espaco-lg);
}

.contato__item {
  display: flex;
  align-items: center;
  gap: var(--espaco-sm);
}

.contato__icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: var(--terracota);
  background-color: var(--blush);
  border-radius: var(--raio-sm);
}

.contato__icone svg {
  width: 16px;
  height: 16px;
}

.contato__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;   /* 15px, acompanhando o texto de apoio da seção */
  color: var(--texto);
  transition: color var(--transicao-rapida);
}

/* Sem sublinhado no hover: o retorno visual fica por conta da cor. */
.contato__link:hover {
  color: var(--rosa-forte);
}

/* O "Fale comigo" é o CTA final da página: ganha um corpo maior que o
   --grande padrão para fechar a seção com peso. */
.contato__info .btn {
  position: relative;
  z-index: 1;
  margin-top: var(--espaco-lg);
}

.contato__mapa {
  overflow: hidden;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sutil);
}

.contato__mapa iframe {
  width: 100%;
  height: 100%;
  min-height: clamp(380px, 38vw, 470px);
  border: 0;
}

/* --- 6.5 Página 404 ------------------------------------------------------- */

.erro {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: calc(var(--altura-header) + var(--espaco-xl)) var(--espaco-xl);
  background-color: var(--creme);
}

.erro__interno {
  max-width: 40rem;
  text-align: center;
}

/* Decorativo: quem lê por leitor de tela recebe o título, não o número. */
.erro__codigo {
  font-family: var(--fonte-titulo);
  font-size: clamp(5rem, 4rem + 8vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blush);
}

.erro__titulo {
  margin-top: calc(var(--espaco-md) * -1);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
}

.erro__texto {
  max-width: 32rem;
  margin-inline: auto;
  margin-top: var(--espaco-md);
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.erro__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-sm);
  justify-content: center;
  margin-top: var(--espaco-lg);
}

.erro__btn-secundario {
  color: var(--terracota);
  background-color: var(--blush);
}

.erro__btn-secundario:hover {
  background-color: var(--branco);
  transform: translateY(-2px);
}

.erro__atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-xs) var(--espaco-md);
  justify-content: center;
  margin-top: var(--espaco-xl);
  padding-top: var(--espaco-md);
  font-size: var(--fs-pequeno);
  border-top: 1px solid var(--blush);
}

.erro__atalhos a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto-suave);
  transition: color var(--transicao-rapida);
}

.erro__atalhos a:hover {
  color: var(--terracota);
}

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

.rodape {
  padding-top: var(--espaco-xl);
  color: var(--branco);
  background-color: var(--rodape-fundo);
}

.rodape__interno {
  display: grid;
  gap: var(--espaco-lg);
}

.rodape__descricao {
  max-width: 26rem;
  margin-top: var(--espaco-md);
  font-size: var(--fs-pequeno);
}

.rodape__titulo {
  margin-bottom: var(--espaco-sm);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--branco);
}

.rodape__lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-pequeno);
}

/* Sem estado de hover, por decisão de design: os links do rodapé ficam sempre
   em branco puro. O contorno de :focus-visible continua valendo — é ele que
   guia quem navega por teclado, e não depende do mouse. */
/* O item da política é um <button>, não um link — ele abre um diálogo, não
   navega. Herda a mesma aparência dos vizinhos. */
.rodape__lista a,
.rodape__politica {
  display: flex;
  align-items: center;
  min-height: 44px;
  font: inherit;
  color: inherit;
  text-align: left;
}

.rodape__base {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  align-items: center;
  margin-top: var(--espaco-xl);
  padding-block: var(--espaco-md);
  font-size: var(--fs-micro);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* Sem sublinhado: o peso 600 é o que separa o link do texto ao redor, já que
   tudo no rodapé é branco. */
.rodape__credito a {
  font-weight: 600;
}



/* ==========================================================================
   7. UTILITÁRIOS
   ========================================================================== */

/* Quebra de linha manual que só vale a partir de 768px. No celular a frase
   já quebra sozinha pela largura da tela, e forçar o corte deixaria uma
   linha órfã muito curta. Reativada na seção 9.1. */
.quebra-lg {
  display: none;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   8. MEDIA QUERIES
   ========================================================================== */

/* --- 8.1 Tablet (>= 768px) ------------------------------------------------ */

@media (min-width: 768px) {

  :root {
    --altura-header: 84px;
    --raio-curva: 50% 50% 50% 50% / 5rem 5rem 5rem 5rem;
  }


  .cards--2,
  .cards--3 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espaco-lg);
  }

  .card {
    padding: var(--espaco-lg);
  }

  .contato__interno {
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-xl);
  }

  .rodape__interno {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--espaco-xl);
  }

  /* Copyright de um lado, crédito do outro. No celular seguem empilhados e
     centralizados: lado a lado ali as duas frases ficariam espremidas. */
  .rodape__base {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--espaco-md);
    text-align: left;
  }
}

/* --- 8.2 Desktop (>= 1024px) ---------------------------------------------- */

@media (min-width: 1024px) {

  :root {
    --altura-header: 92px;
  }

  /* Só a partir daqui há largura para a primeira linha do título da faixa
     caber inteira. Abaixo disso a frase quebra sozinha, e forçar o corte
     produziria uma terceira linha órfã. */
  .quebra-lg {
    display: inline;
  }

  /* Header de 92px aqui: o logo pode crescer sem encostar nas bordas. */
  .logo {
    max-width: 9.5rem;
  }

  /* O drawer volta a ser uma barra horizontal: logo e X internos saem. */
  .navegacao__topo {
    display: none;
  }

  .menu-toggle {
    display: none;
  }

  /* flex: 1 faz a navegação ocupar todo o espaço entre o logo e a borda; a
     lista então se centraliza nele com margin auto, e o botão fica na ponta. */
  .navegacao {
    position: static;
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: var(--espaco-md);
    width: auto;
    padding: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
    transform: none;
    visibility: visible;
  }

  .navegacao__lista {
    flex-direction: row;
    gap: var(--espaco-xs);
    margin-inline: auto;
  }

  .navegacao__link {
    font-size: var(--fs-pequeno);
  }

  .navegacao__cta {
    align-self: center;
  }

  .menu-overlay {
    display: none;
  }

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

  /* Só aqui há largura para a foto ao lado do texto: com dois cards lado a
     lado a 768px, a coluna de texto ficaria estreita demais. */
  .card--modalidade {
    grid-template-columns: 10.5rem 1fr;
    padding: var(--espaco-lg);
  }

  .card__foto {
    max-width: none;
  }

  /* Colunas iguais, com respiro de 64px entre a foto e o texto. */
  .beneficios__interno {
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-xl);
    align-items: center;
  }

  /* Ordem natural do HTML: foto à esquerda, texto à direita. */
  .beneficios__midia,
  .beneficios__conteudo {
    order: initial;
  }

  /* Volta tudo ao alinhamento à esquerda: aqui cada bloco divide a linha com
     uma foto, e o texto centralizado brigaria com ela. */
  .hero__texto,
  .beneficios__conteudo,
  .sobre__texto,
  .contato__info,
  .card--modalidade {
    text-align: left;
  }

  .hero__paragrafo,
  .sobre__texto p,
  .contato__info .secao__intro {
    margin-inline: 0;
  }

  .card__foto {
    margin-inline: 0;
  }

  .hero__interno {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .sobre__interno {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .contato__interno {
    grid-template-columns: 1fr 1fr;
  }

  .rodape__interno {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }
}

/* --- 8.3 Desktop grande (>= 1280px) --------------------------------------- */

@media (min-width: 1280px) {

  .navegacao__lista {
    gap: var(--espaco-sm);
  }

  .card--modalidade {
    grid-template-columns: 12rem 1fr;
  }
}

/* --- 8.4 Ponteiro preciso (mouse) ----------------------------------------- */

/* Os 44px de altura mínima existem por causa do toque no celular. Onde o
   apontador é preciso, eles viram só espaço morto entre os links — aqui a
   lista fecha. Os ~33px resultantes seguem acima do piso de 24px que o
   WCAG 2.2 (2.5.8) exige para qualquer alvo, em qualquer dispositivo. */
@media (pointer: fine) {

  .rodape__lista a {
    min-height: 0;
    padding-block: 4px;
  }
}

/* --- 8.5 Movimento reduzido ----------------------------------------------- */

/* Desliga toda animação e transição, e garante que nada fique invisível. */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    transition-delay: 0ms;
    scroll-behavior: auto;
  }

  .revelar,
  .revelar--visivel {
    opacity: 1;
    transform: none;
  }

  .whatsapp-flutuante--visivel {
    transform: none;
  }

  .card:hover,
  .btn:hover {
    transform: none;
  }
}
