/* ==========================================================================
   Clínica Elos — estilos compartilhados (todas as páginas)
   Medidas de referência: PSD de 1920 px. Fontes em rem (16 px base), espaços em rem/px.
   ========================================================================== */

/* Sofia Pro (Adobe Fonts): no Adobe Fonts, abra Sofia Pro → "Adicionar ao projeto Web", escolha Regular, Bold
   e Bold Italic, cadastre os domínios do site e cole abaixo a linha @import do projeto, sem o comentário em volta.
   A linha precisa ficar antes de qualquer outra regra deste arquivo.
@import url("https://use.typekit.net/XXXXXXX.css");
*/

/* ---------- Tokens (cores e fontes extraídas do PSD) ---------- */
:root {
  --cor-primaria: #854115;        /* marrom da marca: faixas, botões, títulos, rodapé */
  --cor-primaria-clara: #8B4D26;  /* marrom secundário (só onde o PSD usa) */
  --cor-primaria-quente: #A65B32; /* só o título "EXCELÊNCIA EM SAÚDE E ESTÉTICA" da página Clínica ELOS */
  --cor-fundo: #F5F5F5;           /* fundo de página */
  --cor-bege: #E5E1D6;            /* cabeçalho e faixas bege */
  --cor-escura: #363028;          /* faixas escuras */
  --cor-texto: #777167;           /* texto corrido */
  --cor-texto-escuro: #3C3830;    /* texto do hero de Tecnologias */
  --cor-titulo-escuro: #32302D;   /* título "cuidado 360º" */
  --cor-menu: #514E49;            /* menu e logo do cabeçalho */
  --cor-sublinhado-menu: #9C938B;
  --cor-icone: #4B4035;           /* indicador de rolagem */
  --cor-etiqueta: #C2BBB0;        /* etiqueta e divisórias suaves */
  --cor-branca: #FFFFFF;
  --cor-clara: #F5F5F5;           /* texto sobre marrom/escuro, botões claros */
  --cor-whatsapp: #25D366;

  /* Branch (títulos) e Franie (menu, rodapé, botões): arquivos em fonts/ (licença Envato Elements do projeto).
     Sofia Pro (texto): licença Adobe Fonts, que não permite hospedar os arquivos no próprio servidor; ela entra
     pelo projeto Web do Adobe Fonts (família 'sofia-pro', ver @import no topo). Até lá, o texto usa a Outfit. */
  --fonte-titulo: 'Branch', Georgia, 'Times New Roman', serif;
  --fonte-texto: 'sofia-pro', 'Outfit', Arial, Helvetica, sans-serif;
  --fonte-ui: 'Franie', Arial, Helvetica, sans-serif;

  /* Tipografia (valores do PSD → rem). Acima de 992 px os tamanhos escalam proporcionalmente
     à largura (px do PSD ÷ 1920 = vw), com teto no valor do PSD e piso de leitura — assim as
     quebras de linha do PSD se mantêm em 1440/1366/1280. Abaixo de 992 px (empilhado) ver @media. */
  --tam-texto: clamp(1.0625rem, 1.406vw, 1.6875rem);        /* 27 px */
  --tam-texto-p: clamp(1rem, 1.198vw, 1.4375rem);            /* 23 px */
  --tam-texto-g: clamp(1.125rem, 1.62vw, 1.94375rem);        /* 31.1 px */
  --tam-titulo-hero: clamp(2.6rem, 4.917vw, 5.9rem);         /* 94.4 px */
  --tam-titulo-g: clamp(2.2rem, 3.96vw, 4.75rem);            /* 76 px */
  --tam-titulo-m: clamp(2.1rem, 3.75vw, 4.5rem);             /* 72 px */
  --tam-titulo: clamp(2rem, 3.51vw, 4.2125rem);              /* 67.4 px */
  --tam-titulo-p: clamp(1.8rem, 3.02vw, 3.625rem);           /* 58 px */
  --tam-sobretitulo: clamp(1.25rem, 1.594vw, 1.9125rem);     /* 30.6 px */
  --tam-etiqueta: clamp(0.95rem, 1.344vw, 1.6125rem);        /* 25.8 px */
  --tam-menu: 1.0125rem;                                      /* 16.2 px */
  --tam-rodape: 1.08125rem;                                           /* 17.3 px */
  --tam-botao: 1.25rem;                                               /* 20 px */
  --lh-texto: 1.2;
  --lh-titulo: 1.08;
  --lh-titulo-justo: 0.92;
  --ls-padrao: -0.03em;

  /* Layout */
  --largura-container: 1540px;
  --margem-lateral: clamp(16px, 4vw, 190px);
  --altura-cabecalho: 96px;
  --gap-menu: 66px;
  --altura-botao: 50px;
  --raio-botao: 999px;

  /* Espaços verticais (arredondamento dos respiros do PSD) */
  --espaco-p: clamp(56px, 6vw, 112px);
  --espaco-m: clamp(72px, 8.5vw, 160px);
  --espaco-g: clamp(88px, 11vw, 215px);
  --espaco-xg: clamp(100px, 15vw, 300px);
  --espaco-titulo-texto: clamp(24px, 2.5vw, 48px);
  --espaco-texto-botao: clamp(24px, 2vw, 40px);

  /* Animações */
  --anim-duracao: 0.75s;
  --anim-curva: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fontes hospedadas no site (geradas por scripts/converter_fontes.py a partir de fontes/TIPOGRAFIA) */
@font-face { font-family: 'Branch'; src: url('../fonts/branch-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Franie'; src: url('../fonts/franie-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Franie'; src: url('../fonts/franie-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Franie'; src: url('../fonts/franie-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--tam-texto);
  line-height: var(--lh-texto);
  letter-spacing: var(--ls-padrao);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 4px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Container e grids ---------- */
.container {
  width: 100%;
  max-width: calc(var(--largura-container) + 2 * var(--margem-lateral));
  margin-inline: auto;
  padding-inline: var(--margem-lateral);
}
.container--estreito { max-width: calc(1200px + 2 * var(--margem-lateral)); }
.duas-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 120px);
  align-items: center;
}
.duas-colunas--topo { align-items: start; }
.duas-colunas--base { align-items: end; }
.alinha-dir { text-align: right; }
.alinha-centro { text-align: center; }
.coluna-texto { max-width: 46ch; }
.alinha-dir .coluna-texto, .coluna-texto--dir { margin-left: auto; }
.alinha-centro .coluna-texto { margin-inline: auto; }

/* ---------- Tipografia ---------- */
.titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: var(--tam-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-padrao);
  color: var(--cor-primaria);
}
.titulo--hero { font-size: var(--tam-titulo-hero); line-height: 1; }
.titulo--g { font-size: var(--tam-titulo-g); }
.titulo--m { font-size: var(--tam-titulo-m); }
.titulo--p { font-size: var(--tam-titulo-p); }
.titulo--justo { line-height: var(--lh-titulo-justo); }
.titulo--caixa-alta { text-transform: uppercase; }
.titulo--branco { color: var(--cor-branca); }
.titulo--claro { color: var(--cor-clara); }
.titulo--escuro { color: var(--cor-titulo-escuro); }
.titulo--quente { color: var(--cor-primaria-quente); }
.ordinal { font-size: 0.64em; line-height: 0; vertical-align: 0.55em; }   /* "º" feito com "o" menor, como no PSD (a Branch não tem o glifo º) */

.texto { color: var(--cor-texto); }
.texto p + p { margin-top: 1.2em; }
.texto--branco, .texto--branco p { color: var(--cor-branca); }
.texto--claro, .texto--claro p { color: var(--cor-clara); }
.texto--escuro, .texto--escuro p { color: var(--cor-texto-escuro); }
.texto--primaria, .texto--primaria p { color: var(--cor-primaria); }
.texto--p { font-size: var(--tam-texto-p); }
.texto--g { font-size: var(--tam-texto-g); }
.texto--medio { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem); }

.titulo + .texto { margin-top: var(--espaco-titulo-texto); }
.texto + .botao, .texto + .botao-linha { margin-top: var(--espaco-texto-botao); }

.sobretitulo {
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-style: italic;
  font-size: var(--tam-sobretitulo);
  line-height: 1.1;
  color: var(--cor-primaria);
}
.sobretitulo--branco { color: var(--cor-branca); }
.sobretitulo--regular { font-weight: 400; font-style: normal; font-size: var(--tam-texto); color: var(--cor-texto); }
.sobretitulo + .titulo { margin-top: 0.6rem; }

.etiqueta {
  font-family: var(--fonte-ui);
  font-weight: 600;
  font-size: var(--tam-etiqueta);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--cor-etiqueta);
}
.etiqueta + .titulo { margin-top: 1.5rem; }

.pre-titulo { margin-bottom: 0.75rem; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--altura-botao);
  padding: 0.55em 1.6em;
  border-radius: var(--raio-botao);
  background: var(--cor-primaria);
  color: var(--cor-clara);
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: var(--tam-botao);
  line-height: 1;
  letter-spacing: var(--ls-padrao);
  text-align: center;
  white-space: nowrap;
  transition: transform 0.35s var(--anim-curva), background-color 0.35s, box-shadow 0.35s, color 0.35s;
}
.botao:hover, .botao:focus-visible {
  transform: translateY(-2px);
  background: #6F350F;
  box-shadow: 0 10px 24px rgba(133, 65, 21, 0.28);
}
.botao--caixa-alta { text-transform: uppercase; }
.botao--sofia { font-family: var(--fonte-texto); font-weight: 400; font-size: var(--tam-texto); }
.botao--sofia-bold { font-family: var(--fonte-texto); font-weight: 700; font-size: var(--tam-texto); }
.botao--g { min-height: 58px; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.44rem); padding: 0.55em 1.5em; }
.botao--p { min-height: 49px; font-size: 1.22rem; }
.botao--claro { background: var(--cor-clara); color: var(--cor-escura); }
.botao--claro:hover, .botao--claro:focus-visible { background: var(--cor-branca); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.botao--claro-primaria { background: var(--cor-clara); color: var(--cor-primaria); }
.botao--claro-primaria:hover, .botao--claro-primaria:focus-visible { background: var(--cor-branca); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.botao--secundaria { background: var(--cor-primaria-clara); }
.botao--secundaria:hover, .botao--secundaria:focus-visible { background: #73401F; }
.botao--branco-texto { color: var(--cor-branca); }
/* Pulso contínuo para o CTA em destaque: batida dupla + anel que se expande (pausa ao passar o mouse) */
.botao--pulsar { animation: pulsar-botao 2.4s ease-out infinite; }
.botao--pulsar:hover, .botao--pulsar:focus-visible { animation: none; }
@keyframes pulsar-botao {
  0%   { box-shadow: 0 0 0 0 rgba(133, 65, 21, 0.45); scale: 1; }
  10%  { scale: 1.045; }
  22%  { scale: 1; }
  32%  { scale: 1.03; }
  44%  { scale: 1; }
  75%  { box-shadow: 0 0 0 20px rgba(133, 65, 21, 0); }
  100% { box-shadow: 0 0 0 0 rgba(133, 65, 21, 0); scale: 1; }
}
@media (max-width: 576px) { .botao { white-space: normal; } }

/* ---------- Faixas de cor (full-bleed) ---------- */
.faixa { background: var(--cor-primaria); color: var(--cor-branca); }
.faixa--escura { background: var(--cor-escura); color: var(--cor-clara); }
.faixa--bege { background: var(--cor-bege); }
.faixa .titulo, .faixa--escura .titulo { color: inherit; }
.faixa .texto, .faixa .texto p, .faixa--escura .texto, .faixa--escura .texto p { color: inherit; }
.faixa--bege { color: var(--cor-texto); }
.faixa--bege .titulo { color: var(--cor-primaria); }

/* ---------- Fotos ---------- */
.foto { position: relative; overflow: hidden; background: var(--cor-bege); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--pb img { filter: grayscale(1); }

/* ---------- Divisórias ---------- */
.divisoria { border: 0; border-top: 1px solid var(--cor-primaria); margin: 0; }
.divisoria--suave { border-top-color: var(--cor-etiqueta); }
.divisoria--clara { border-top-color: var(--cor-clara); }

/* ---------- Indicador de rolagem (círculo + seta) ---------- */
.indicador-rolagem {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border: 1px solid var(--cor-icone);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--cor-icone);
  animation: flutuar 2.4s ease-in-out infinite;
}
.indicador-rolagem svg { width: 13px; height: 12px; }
/* A seta flutua para CIMA da posição de repouso: o ponto mais baixo da animação é o lugar dela no layout,
   então nunca ultrapassa a borda da seção (antes era cortada no fim da descida, no celular). */
@keyframes flutuar {
  0%, 100% { transform: translateY(-7px); }
  50% { transform: translateY(0); }
}

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: relative;
  z-index: 50;
  background: var(--cor-bege);
  height: var(--altura-cabecalho);
}
.cabecalho__inner {
  height: 100%;
  padding: 0 78px 0 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cabecalho__logo { flex: 0 0 auto; }
.cabecalho__logo img { width: 145px; height: 43px; }
.menu__lista { display: flex; align-items: center; gap: var(--gap-menu); }
.menu__link {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-family: var(--fonte-ui);
  font-size: var(--tam-menu);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--cor-menu);
  letter-spacing: 0;
  white-space: nowrap;
}
.menu__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--cor-sublinhado-menu);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--anim-curva);
}
.menu__link:hover::after, .menu__link:focus-visible::after { transform: scaleX(1); }
.menu__link--ativo { font-weight: 700; }
.menu__link--cta { font-weight: 700; }                 /* destaque do "Agende uma consulta" (Franie Bold) — pedido de 15/09 */
.menu__link--cta::after { transform: scaleX(1); }
.menu__link--cta:hover::after { transform-origin: right; transform: scaleX(0); }
.cabecalho__menu-botao {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  flex-direction: column;
  justify-content: space-between;
}
.cabecalho__menu-botao span {
  display: block;
  height: 2px;
  background: var(--cor-menu);
  transition: transform 0.35s, opacity 0.35s;
}

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--cor-primaria);
  color: var(--cor-branca);
  font-family: var(--fonte-ui);
  font-size: var(--tam-rodape);
  line-height: 32px;
  letter-spacing: var(--ls-padrao);
}
.rodape__inner {
  display: grid;
  grid-template-columns: minmax(286px, 1fr) repeat(3, max-content);   /* logo absorve a sobra; colunas de texto com a largura do conteúdo */
  column-gap: clamp(48px, calc(18.81vw - 241px), 120px);             /* 120 px em 1920 → colunas em x ≈ 689 / 1066 / 1502, como no PSD */
  padding: 50px 4.6% 56px 6.8%;
  min-height: 285px;
  align-items: start;
}
.rodape__coluna { white-space: nowrap; }                             /* cada linha do rodapé inteira (só quebra no celular) */
.rodape__logo img { width: 286px; height: 85px; margin-top: 5px; }
.rodape__titulo {
  font-size: inherit;
  font-weight: 700;
  text-transform: uppercase;
  color: inherit;
}
.rodape__link { display: inline-flex; align-items: center; gap: 6px; transition: opacity 0.3s; }
.rodape__link:hover { opacity: 0.75; }
.rodape__icone { width: 19px; height: 19px; flex: 0 0 auto; }
.rodape address { font-style: normal; }
.rodape__recuo { padding-left: 25px; }                 /* número alinhado ao texto "Falar no WhatsApp" (ícone 19 px + 6 px) */
.rodape__linha { display: flex; align-items: flex-start; gap: 6px; }   /* ícone + textos; se quebrar, a 2ª linha alinha com o texto */
.rodape__linha .rodape__icone { margin-top: 6.5px; }                    /* centraliza o ícone na 1ª linha (entrelinha 32 px) */
.rodape__endereco { display: inline-block; }           /* o <br> do endereço precisa de caixa em linha, não flex */

/* ---------- Botão flutuante de WhatsApp ---------- */
.whatsapp-flutuante {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--cor-whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.35s var(--anim-curva), box-shadow 0.35s;
}
.whatsapp-flutuante img { width: 32px; height: 32px; }
.whatsapp-flutuante:hover { transform: scale(1.08); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); }

/* ---------- Animações de entrada (JS adiciona .revelar--visivel e escalona o atraso entre vizinhos) ---------- */
.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--anim-duracao) var(--anim-curva), transform var(--anim-duracao) var(--anim-curva);
  transition-delay: var(--atraso, 0s);
  will-change: opacity, transform;
}
.revelar--esq { transform: translateX(-24px); }
.revelar--dir { transform: translateX(24px); }
.revelar--zoom { transform: scale(1.03); }
.revelar--visivel { opacity: 1; transform: none; }
.foto.revelar img { transform: scale(1.03); transition-delay: inherit; }
.foto.revelar--visivel img { transform: scale(1); }
/* Depois que a entrada termina (JS adiciona .revelar--pronto), o atraso some para o hover responder na hora */
.revelar--pronto { transition-delay: 0s !important; }
.foto.revelar--pronto img { transition-delay: 0s; }

/* ---------- Interações ao passar o mouse ---------- */
/* Fotos de seção: zoom suave da imagem dentro da moldura */
.foto img { transition: transform 0.9s var(--anim-curva); }
.foto:hover img, .foto:focus-within img, .foto.revelar--visivel:hover img { transform: scale(1.05); }

/* Cartões (cards de Protocolos, galeria da Home): o bloco inteiro sobe, cresce e ganha sombra */
.cartao {
  position: relative;
  transition: transform 0.55s var(--anim-curva), box-shadow 0.55s var(--anim-curva);
  will-change: transform;
}
.cartao.revelar {
  transition: opacity var(--anim-duracao) var(--anim-curva), transform var(--anim-duracao) var(--anim-curva), box-shadow 0.55s var(--anim-curva);
}
.cartao.revelar--pronto { transition: transform 0.55s var(--anim-curva), box-shadow 0.55s var(--anim-curva); }
.cartao:hover, .cartao:focus-within {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 30px 50px -18px rgba(54, 48, 40, 0.45);
  z-index: 2;
}
.foto.cartao:hover img, .foto.cartao:focus-within img { transform: scale(1.07); }

/* Logos e ícones clicáveis/decorativos: leve crescimento */
.logo-interativo img { transition: transform 0.5s var(--anim-curva); }
.logo-interativo:hover img { transform: scale(1.06); }

/* Botão flutuante de WhatsApp: pulso discreto para chamar atenção */
.whatsapp-flutuante::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--cor-whatsapp);
  opacity: 0.45;
  z-index: -1;
  animation: pulso-whatsapp 2.6s ease-out infinite;
}
@keyframes pulso-whatsapp {
  0% { transform: scale(1); opacity: 0.45; }
  70% { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  .foto.revelar img { transform: none; }
  .indicador-rolagem { animation: none; }
  .botao--pulsar { animation: none; }
  .whatsapp-flutuante::before { animation: none; display: none; }
  .cartao:hover, .cartao:focus-within { transform: none; }
  .foto:hover img, .foto.cartao:hover img { transform: none; }
  html { scroll-behavior: auto; }
}
@media (hover: none) {
  .whatsapp-flutuante::before { animation-duration: 3.2s; }
}

/* ---------- Responsivo ---------- */
/* Menu em linha (fonte Franie): cabe inteiro a partir de 1801 px; entre 1281 e 1800 fonte e vão encolhem
   proporcionalmente à largura; até 1280 vira hambúrguer. No rodapé, o logo sobe para uma linha própria abaixo de 1761 px. */
@media (max-width: 1800px) {
  .cabecalho__inner { padding: 0 40px; }
  .menu__lista { gap: clamp(16px, calc(10.438vw - 117.7px), 66px); }                /* 16 px em 1281 → 66 px em 1760 */
  .menu__link { font-size: clamp(13.5px, calc(6.28px + 0.5637vw), 1.0125rem); }     /* 13,5 px em 1281 → 16,2 px em 1760 */
}
@media (max-width: 1760px) {
  .rodape__inner { grid-template-columns: repeat(3, max-content); justify-content: space-between; row-gap: 32px; padding: 48px 40px; }
  .rodape__logo { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .rodape__inner { grid-template-columns: repeat(2, max-content); justify-content: start; column-gap: 48px; }
}
@media (max-width: 860px) {
  .rodape__inner { grid-template-columns: 1fr; }                    /* duas colunas de texto (≈ 730 px) já não cabem */
}
@media (max-width: 1280px) {
  .cabecalho__inner { padding: 0 24px; }
  .cabecalho__menu-botao { display: flex; }
  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cor-bege);
    padding: 12px 24px 28px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, transform 0.35s var(--anim-curva), visibility 0s 0.35s;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.12);
  }
  .menu--aberto { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s, transform 0.35s var(--anim-curva); }
  .menu__lista { flex-direction: column; align-items: flex-start; gap: 4px; }
  .menu__link { padding: 10px 0; font-size: 1.1rem; }
  .menu__link--cta::after { display: none; }
  .menu__link--cta { color: var(--cor-primaria); font-weight: 700; }
  .cabecalho__menu-botao[aria-expanded="true"] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
  .cabecalho__menu-botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .cabecalho__menu-botao[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }
}
@media (max-width: 992px) {
  :root {
    --tam-texto: clamp(1.0625rem, 0.95rem + 0.6vw, 1.25rem);
    --tam-titulo-hero: clamp(2.6rem, 1.8rem + 4vw, 4rem);
    --tam-titulo-g: clamp(2.2rem, 1.6rem + 3.2vw, 3.4rem);
    --tam-titulo-m: clamp(2.1rem, 1.5rem + 3vw, 3.2rem);
    --tam-titulo: clamp(2rem, 1.4rem + 3vw, 3rem);
    --tam-titulo-p: clamp(1.8rem, 1.3rem + 2.6vw, 2.6rem);
  }
  .duas-colunas { grid-template-columns: 1fr; }
  .duas-colunas > .foto { order: -1; }
  .alinha-dir { text-align: left; }
  .alinha-dir .coluna-texto, .coluna-texto--dir { margin-left: 0; }
  .coluna-texto { max-width: 100%; }
}
@media (max-width: 768px) {
  :root { --altura-cabecalho: 72px; }
  .cabecalho__logo img { width: 120px; height: auto; }
  .rodape__inner { grid-template-columns: 1fr; padding: 40px 24px; }
  .rodape__logo img { width: 220px; height: auto; }
  .whatsapp-flutuante { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}
@media (max-width: 576px) {
  .titulo br { display: none; }
  .rodape__coluna { white-space: normal; }
}