/* Chroma Odontologia Avancada — Rio Grande, RS
   Paleta amostrada no pixel do logo da propria clinica (arte vetorial do feed
   e o logo fisico do balcao da recepcao). Contraste conferido em WCAG — a
   tabela esta no ENTREGA.md. */

:root {
  --ambar:        #f4ae35;  /* losango externo do logo — exato */
  --ambar-texto:  #8a5a10;  /* ambar escurecido, para ambar COMO TEXTO — 5,72:1 */
  --turquesa:     #0eaca4;  /* centro do logo — exato, so sobre escuro */
  --turquesa-tx:  #0a6f6a;  /* turquesa como texto sobre creme — 5,81:1 */
  --turquesa-cl:  #4fd3cb;  /* turquesa clareado, sobre fundo escuro — 9,18:1 */
  --espresso:     #523824;  /* anel escuro do logo */
  --carvao:       #46362f;  /* o wordmark "chroma" */
  --escuro:       #241c17;  /* hero, secao da equipe, rodape */
  --escuro-2:     #2e241e;  /* cartoes sobre o escuro */
  --texto:        #3a2f28;
  --texto-suave:  #5d5048;  /* texto corrido sobre creme — 7,50:1 */
  --creme:        #fdfbf5;
  --creme-fundo:  #f6f1e6;
  --creme-borda:  #e6dcc9;
  --nogueira:     #513d2e;  /* madeira do balcao */
  --borda:        rgba(58, 47, 40, 0.13);
  --largura:      1140px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--texto);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto e obrigatorio. Os atributos width/height do <img> entram no
   navegador como dica de apresentacao; sem esta linha a altura do atributo
   vence o aspect-ratio do CSS e a foto sai ampliada e cortada no celular.
   Bug encontrado na Sabrina e que existia tambem na Josiane. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0;
}

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

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--escuro);
  color: var(--creme);
  padding: 12px 20px;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.pular:focus { left: 0; }

/* ————— o simbolo da marca, desenhado em CSS ————— */
/* Losango arredondado de aneis concentricos: ambar, espresso, creme, turquesa. */

.marca-simbolo {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: var(--ambar);
  border-radius: 38%;
  transform: rotate(45deg);
  display: grid;
  place-items: center;
}
.marca-simbolo i {
  width: 66%;
  height: 66%;
  background: var(--espresso);
  border-radius: 34%;
  display: grid;
  place-items: center;
}
.marca-simbolo i::after {
  content: "";
  width: 52%;
  height: 52%;
  background: var(--turquesa);
  border-radius: 30%;
  box-shadow: 0 0 0 3px #f4f0e2;
}

/* ————— topo ————— */

.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 20px 0;
  transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.topo.fixado {
  background: rgba(253, 251, 245, 0.94);
  backdrop-filter: saturate(160%) blur(12px);
  padding: 11px 0;
  box-shadow: 0 1px 0 var(--borda), 0 10px 30px -22px rgba(36, 28, 23, .5);
}

.topo-interno {
  display: flex;
  align-items: center;
  gap: 26px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-right: auto;
  padding: 4px 0;
}
.marca-texto {
  font-family: "Outfit", sans-serif;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--creme);
  transition: color .35s ease;
}
.marca-texto small {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: .72;
}
.topo.fixado .marca-texto { color: var(--carvao); }

.menu { display: flex; gap: 28px; }
.menu a {
  font-size: 14.5px;
  font-weight: 400;
  text-decoration: none;
  color: rgba(253, 251, 245, .88);
  padding: 4px 0;
  position: relative;
  transition: color .35s ease;
}
.menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--ambar);
  transition: right .3s ease;
}
.menu a:hover::after, .menu a:focus-visible::after { right: 0; }
.topo.fixado .menu a { color: var(--texto-suave); }
.topo.fixado .menu a:hover { color: var(--carvao); }

/* ————— botoes ————— */

.btn {
  display: inline-block;
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: 999px;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
  white-space: nowrap;
}

/* O ambar dela fica intacto. Quem escurece e o TEXTO em cima — 8,20:1.
   Ambar com texto branco daria 1,92:1 e reprovaria. */
.btn-principal {
  background: var(--ambar);
  color: #2b211b;
  box-shadow: 0 12px 26px -14px rgba(244, 174, 53, .85);
}
.btn-principal:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -14px rgba(244, 174, 53, .95);
}

.btn-vazado {
  border: 1px solid rgba(253, 251, 245, .42);
  color: var(--creme);
}
.btn-vazado:hover {
  background: rgba(253, 251, 245, .1);
  border-color: rgba(253, 251, 245, .7);
}

.btn-topo {
  background: var(--ambar);
  color: #2b211b;
  padding: 11px 20px;
  font-size: 14.5px;
}
.btn-topo:hover { transform: translateY(-1px); }

.btn-grande { padding: 16px 34px; font-size: 16.5px; }

.abrir-menu {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  width: 44px;
  height: 44px;
}
.abrir-menu span {
  display: block;
  width: 22px;
  height: 1.6px;
  background: var(--creme);
  margin: 5px auto;
  transition: background .35s ease;
}
.topo.fixado .abrir-menu span { background: var(--carvao); }

/* ————— hero ————— */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--escuro);
}
.hero-fundo {
  position: absolute;
  inset: -8% 0 0 0;
  background: url("../imagens/equipe.jpg") center 32% / cover no-repeat;
  will-change: transform;
}
.hero-veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(28, 21, 17, .93) 0%, rgba(28, 21, 17, .82) 42%, rgba(28, 21, 17, .42) 72%, rgba(28, 21, 17, .5) 100%),
    linear-gradient(to bottom, rgba(28, 21, 17, .72) 0%, rgba(28, 21, 17, .18) 34%, rgba(28, 21, 17, .78) 100%);
}
.hero-conteudo {
  position: relative;
  z-index: 2;
  padding-top: 116px;
  padding-bottom: 112px;
}

.sobretitulo {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ambar);
  margin: 0 0 22px;
}

.hero h1 {
  font-size: clamp(38px, 6.4vw, 74px);
  color: var(--creme);
  max-width: 17ch;
  font-weight: 300;
}
.hero h1 em {
  font-style: italic;
  color: var(--turquesa-cl);
}

.hero-linha {
  max-width: 52ch;
  margin: 26px 0 0;
  font-size: 17.5px;
  font-weight: 300;
  color: rgba(253, 251, 245, .84);
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.role {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(253, 251, 245, .6);
  text-decoration: none;
  padding-bottom: 26px;
}
.role::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 18px;
  background: linear-gradient(to bottom, rgba(253, 251, 245, .55), transparent);
  animation: desce 2.2s ease-in-out infinite;
}
@keyframes desce {
  0%, 100% { transform: translateY(0); opacity: .3; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* ————— faixa de numeros ————— */

.faixa {
  background: var(--escuro);
  border-top: 1px solid rgba(253, 251, 245, .08);
}
.faixa-interna {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding-top: 48px;
  padding-bottom: 48px;
}
.faixa-item { text-align: center; }
.faixa-item strong {
  display: block;
  font-family: "Newsreader", Georgia, serif;
  font-size: 46px;
  font-weight: 300;
  line-height: 1;
  color: var(--ambar);
}
.faixa-item span {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(253, 251, 245, .68);
}

/* ————— secoes ————— */

.secao { padding: 116px 0; }
.secao-creme { background: var(--creme-fundo); }
.secao-escura { background: var(--escuro); color: rgba(253, 251, 245, .84); }

.cabecalho { max-width: 62ch; margin-bottom: 56px; }

.rotulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--turquesa-tx);
  margin: 0 0 16px;
}
.rotulo-claro { color: var(--turquesa-cl); }

.secao h2 {
  font-size: clamp(28px, 3.9vw, 45px);
  color: var(--carvao);
  font-weight: 300;
  max-width: 20ch;
}
.secao-escura h2 { color: var(--creme); }

.intro {
  max-width: 58ch;
  margin: 20px 0 0;
  color: var(--texto-suave);
  font-weight: 300;
}
.intro-clara { color: rgba(253, 251, 245, .74); }

/* ————— a clinica ————— */

.clinica {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 60px;
  align-items: start;
}
.clinica-texto p { margin: 0 0 20px; color: var(--texto-suave); font-weight: 300; }
.clinica-texto .destaque {
  font-family: "Newsreader", Georgia, serif;
  font-size: 22px;
  line-height: 1.5;
  color: var(--carvao);
  font-weight: 400;
  margin-bottom: 26px;
}
.clinica-texto strong { font-weight: 600; color: var(--carvao); }

.cartao-dados {
  margin-top: 40px;
  background: var(--creme-fundo);
  border: 1px solid var(--creme-borda);
  border-radius: 16px;
  padding: 30px 30px 24px;
}
.assinatura {
  font-family: "Newsreader", Georgia, serif;
  font-size: 21px;
  color: var(--carvao);
  margin: 0;
}
.credencial {
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ambar-texto);
  font-weight: 600;
  margin: 7px 0 0;
}
.cartao-dados dl {
  margin: 24px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--creme-borda);
}
.cartao-dados dt {
  font-size: 10.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--turquesa-tx);
  font-weight: 600;
  margin-top: 18px;
}
.cartao-dados dt:first-child { margin-top: 0; }
.cartao-dados dd {
  margin: 6px 0 0;
  font-size: 15.5px;
  font-weight: 300;
  color: var(--texto-suave);
  line-height: 1.55;
}
.cartao-dados a { color: var(--carvao); text-decoration-color: var(--ambar); text-underline-offset: 3px; }
.cartao-dados a:hover { color: var(--ambar-texto); }

.ambiente { margin: 0; position: sticky; top: 104px; }
.ambiente img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}
.ambiente figcaption {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--texto-suave);
}

/* ————— a equipe ————— */

.equipe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.pessoa {
  background: var(--escuro-2);
  border: 1px solid rgba(253, 251, 245, .09);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease;
}
.pessoa:hover { transform: translateY(-4px); border-color: rgba(244, 174, 53, .38); }

.pessoa-foto { background: #7e7d78; }
.pessoa-foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
}
.pessoa-foto-vazia {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 42%, #3b2e26, #241c17 72%);
}
.marca-simbolo-grande {
  width: 62px;
  height: 62px;
  flex: none;
  opacity: .82;
}

.pessoa-corpo { padding: 22px 22px 26px; }
.pessoa-corpo h3 {
  font-size: 20px;
  color: var(--creme);
  font-weight: 400;
}
.pessoa-area {
  margin: 8px 0 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambar);
  font-weight: 600;
}
.pessoa-cro {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 300;
  color: var(--turquesa-cl);
}
/* .55 e o minimo que passa AA (4,90:1) para este texto de 13px. Com .38,
   como estava, dava 3,39:1 e reprovava. */
.pessoa-cro-vazio { color: rgba(253, 251, 245, .55); font-style: italic; }
.pessoa-texto {
  margin: 14px 0 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.62;
  color: rgba(253, 251, 245, .72);
}

/* ————— tratamentos ————— */

.tratamentos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: 16px;
  overflow: hidden;
}
.tratamento {
  background: var(--creme);
  padding: 34px 30px 36px;
  transition: background .3s ease;
}
.tratamento:hover { background: var(--creme-fundo); }
.tratamento h3 {
  font-size: 21px;
  color: var(--carvao);
  font-weight: 400;
  padding-top: 16px;
  border-top: 2px solid var(--ambar);
  display: inline-block;
}
.tratamento p {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 300;
  color: var(--texto-suave);
}

.nota-tecnica {
  margin: 34px 0 0;
  font-size: 14.5px;
  font-weight: 300;
  color: var(--texto-suave);
  max-width: 68ch;
  padding-left: 18px;
  border-left: 2px solid var(--creme-borda);
}

/* ————— depoimentos ————— */

.depoimentos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.depoimento {
  margin: 0;
  background: var(--creme);
  border: 1px solid var(--creme-borda);
  border-radius: 16px;
  padding: 32px 30px 28px;
  display: flex;
  flex-direction: column;
}
.depoimento blockquote {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: 18.5px;
  line-height: 1.56;
  color: var(--carvao);
  font-weight: 300;
  position: relative;
  flex: 1;
}
.depoimento blockquote::before {
  content: "\201C";
  display: block;
  font-size: 52px;
  line-height: .5;
  color: var(--ambar);
  margin-bottom: 14px;
}
.depoimento figcaption {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--creme-borda);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--carvao);
}
.depoimento figcaption span {
  display: block;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-top: 3px;
}

/* ————— onde fica ————— */

.onde {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 54px;
  align-items: start;
}
.onde-dados dl { margin: 0; }
.onde-dados dt {
  font-size: 10.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--turquesa-tx);
  font-weight: 600;
  margin-top: 24px;
}
.onde-dados dt:first-child { margin-top: 0; }
.onde-dados dd {
  margin: 7px 0 0;
  font-weight: 300;
  color: var(--texto-suave);
  line-height: 1.6;
}
.onde-dados a { color: var(--carvao); text-decoration-color: var(--ambar); text-underline-offset: 3px; }
.onde-dados a:hover { color: var(--ambar-texto); }

.onde-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.onde-acoes .btn-vazado { border-color: var(--borda); color: var(--carvao); }
.onde-acoes .btn-vazado:hover { background: var(--creme-fundo); border-color: var(--ambar); }

.onde-mapa {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--creme-borda);
  line-height: 0;
}
.onde-mapa iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
  filter: saturate(.82);
}

/* ————— chamada final ————— */

.chamada {
  background: var(--nogueira);
  padding: 92px 0;
}
.chamada-interna { text-align: center; }
.chamada h2 {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(27px, 3.6vw, 41px);
  font-weight: 300;
  color: var(--creme);
  max-width: 22ch;
  margin: 0 auto;
}
.chamada p {
  max-width: 54ch;
  margin: 20px auto 0;
  font-weight: 300;
  color: rgba(253, 251, 245, .8);
}
.chamada .btn { margin-top: 34px; }

/* ————— rodape ————— */

.rodape {
  background: var(--escuro);
  color: rgba(253, 251, 245, .7);
  padding: 72px 0 0;
  font-weight: 300;
}
.rodape-interno {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 44px;
}
.rodape-nome {
  font-family: "Newsreader", Georgia, serif;
  font-size: 21px;
  color: var(--creme);
  margin: 16px 0 0;
  font-weight: 400;
}
.rodape-legal {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.62;
  color: rgba(253, 251, 245, .58);
}
.rodape-titulo {
  font-size: 10.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ambar);
  font-weight: 600;
  margin: 0 0 14px;
}
.rodape-col p { margin: 0; font-size: 15px; line-height: 1.78; }
.rodape a { color: rgba(253, 251, 245, .8); text-decoration: none; }
.rodape a:hover { color: var(--ambar); }

.rodape-fim {
  margin-top: 56px;
  padding-top: 24px;
  padding-bottom: 28px;
  border-top: 1px solid rgba(253, 251, 245, .1);
}
.rodape-fim p { margin: 0; font-size: 13px; color: rgba(253, 251, 245, .56); }

/* ————— botoes flutuantes ————— */

.flutuante {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
}
.flutuante.visivel { opacity: 1; visibility: visible; transform: none; }

.fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px -10px rgba(36, 28, 23, .6);
  transition: transform .22s ease;
}
.fab:hover { transform: scale(1.07); }
.fab svg { width: 26px; height: 26px; }
.fab-zap { background: #25d366; }
.fab-zap svg { fill: #08331a; }
.fab-insta { background: var(--espresso); }
.fab-insta svg { fill: var(--creme); }

/* ————— barra fixa do celular ————— */

.barra-mobile {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 95;
  background: rgba(36, 28, 23, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(253, 251, 245, .12);
}
.barra-mobile a {
  flex: 1;
  text-align: center;
  padding: 15px 6px calc(15px + env(safe-area-inset-bottom));
  font-size: 13.5px;
  font-weight: 500;
  color: var(--creme);
  text-decoration: none;
}
.barra-mobile a:first-child { color: var(--ambar); }

/* Alvo de toque: os links de contato sao inline dentro de <dd> e ficavam com
   ~20px de altura. O inline-block com padding leva todos a >=26px, acima do
   minimo de 24px da WCAG 2.2 (criterio 2.5.8). */
.cartao-dados dd a,
.onde-dados dd a,
.rodape-col a {
  display: inline-block;
  padding: 3px 0;
}

/* ————— revelacao no scroll ————— */

.anim .revelar {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
}
.anim .revelar.visivel { opacity: 1; transform: none; }

.faixa-interna .revelar:nth-child(2),
.equipe .revelar:nth-child(2),
.tratamentos .revelar:nth-child(2),
.depoimentos .revelar:nth-child(2) { transition-delay: .09s; }

.faixa-interna .revelar:nth-child(3),
.equipe .revelar:nth-child(3),
.tratamentos .revelar:nth-child(3),
.depoimentos .revelar:nth-child(3) { transition-delay: .18s; }

.faixa-interna .revelar:nth-child(4),
.equipe .revelar:nth-child(4),
.tratamentos .revelar:nth-child(4) { transition-delay: .27s; }

.tratamentos .revelar:nth-child(5) { transition-delay: .36s; }
.tratamentos .revelar:nth-child(6) { transition-delay: .45s; }

/* ————— responsivo ————— */

@media (max-width: 1040px) {
  .clinica { grid-template-columns: 1fr; gap: 44px; }
  .ambiente { position: static; order: -1; }
  .equipe { grid-template-columns: repeat(2, 1fr); }
  .tratamentos { grid-template-columns: repeat(2, 1fr); }
  .onde { grid-template-columns: 1fr; gap: 36px; }
  .rodape-interno { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(253, 251, 245, .985);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--borda);
    box-shadow: 0 20px 40px -26px rgba(36, 28, 23, .6);
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
  }
  .menu.aberto { max-height: 340px; }
  .menu a {
    color: var(--texto-suave);
    padding: 15px 24px;
    border-bottom: 1px solid var(--borda);
  }
  .menu a::after { display: none; }
  .abrir-menu { display: block; }
  .btn-topo { display: none; }
  .faixa-interna { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
  .depoimentos { grid-template-columns: 1fr; }
  .barra-mobile { display: flex; }
  .flutuante { bottom: 84px; right: 16px; }
  .fab { width: 48px; height: 48px; }
  body { padding-bottom: 0; }
  .rodape-fim { padding-bottom: calc(28px + 58px); }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .secao { padding: 78px 0; }
  .container { padding: 0 20px; }
  .hero { min-height: 92svh; }
  .hero-fundo { background-position: center 26%; }
  .hero-veu {
    background:
      linear-gradient(to bottom, rgba(28, 21, 17, .78) 0%, rgba(28, 21, 17, .55) 30%, rgba(28, 21, 17, .9) 78%, rgba(28, 21, 17, .96) 100%);
  }
  .hero-conteudo { padding-top: 104px; padding-bottom: 96px; }
  .hero h1 { max-width: 100%; }
  .hero-acoes .btn { flex: 1 1 100%; text-align: center; }
  .role { display: none; }
  .equipe { grid-template-columns: 1fr; gap: 18px; }
  .pessoa { display: grid; grid-template-columns: 118px 1fr; align-items: stretch; }
  .pessoa-foto img { height: 100%; aspect-ratio: auto; }
  .pessoa-foto-vazia { aspect-ratio: auto; }
  .marca-simbolo-grande { width: 44px; height: 44px; }
  .pessoa-corpo { padding: 20px 20px 22px; }
  .tratamentos { grid-template-columns: 1fr; }
  .cabecalho { margin-bottom: 40px; }
  .secao h2 { max-width: 100%; }
  .rodape-interno { grid-template-columns: 1fr; gap: 34px; }
  .onde-mapa iframe { height: 330px; }
  .onde-acoes .btn { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim .revelar,
  .anim .revelar.visivel {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .role::after { animation: none; }
  .hero-fundo { transform: none !important; }
}