/* =========================================================
   Clínica Aurium — Landing Page
   Paleta (fonte de verdade):
   --azul   #174758  (Azul calmaria)
   --nude   #ffecd6  (Nude cuidado)
   --dourado#cd8036  (Dourado valor)
   ========================================================= */

:root {
  /* Paleta */
  --azul: #304a59;          /* azul do logo — cor ÚNICA do site */
  --azul-logo: #304a59;     /* alias da cor do logo (fundo predominante) */
  --azul-800: #0f333f;      /* azul profundo (reservado p/ sombras/realces) */
  --nude: #ffecd6;
  --nude-soft: #fff6ea;     /* nude clareado para superfícies claras */
  /* Dourado brilhante (substitui o laranja #cd8036) — tons verificados em WCAG AA.
     Em fundo claro o dourado vivo não alcança AA como texto, por isso ele aparece
     sobre pílulas (dourada com texto escuro, ou azul com texto dourado). */
  --dourado: #d4af37;       /* dourado metálico: fundo de botões/pílulas (texto --on-gold = 8.0:1) */
  --dourado-claro: #f0d080; /* dourado vivo p/ texto sobre azul (6.2:1) */
  --dourado-linha: #ffdf9e; /* dourado p/ a linha translúcida da categoria (6.1:1 · hover 5.2:1) */
  --dourado-700: #7a6212;   /* dourado escuro: único tom que passa AA como texto sobre claro (5.9:1) */
  --on-gold: #06202a;       /* texto escuro sobre dourado (8.0:1) */

  /* Papéis semânticos — cor ÚNICA #304a59 em todo o site */
  --bg: var(--azul-logo);   /* fundo predominante = cor do logo */
  --surface: #ffffff;       /* cartões claros que "flutuam" sobre o azul */
  --text: var(--nude);      /* texto claro sobre o azul (8.1:1) */
  --text-soft: #e9eff1;     /* corpo de texto claro sobre o azul (8.0:1) */
  --ink: #174758;           /* texto escuro sobre superfícies claras (cartões) */
  --ink-soft: #3c5b66;      /* corpo de texto escuro sobre superfícies claras */
  --on-dark: var(--nude);
  --on-dark-soft: #e3eaec;  /* texto claro secundário sobre o azul (7.5:1) */

  /* Tipografia */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Mulish", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Espaçamento / layout */
  --container: 1160px;
  --container-narrow: 760px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 18px 40px -24px rgba(15, 51, 63, 0.45);
  --shadow-soft: 0 10px 30px -20px rgba(15, 51, 63, 0.4);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --gutter: clamp(1.15rem, 4vw, 2rem);
  --header-h: 93px;         /* altura real do header fixo — usada no scroll-margin */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.1; color: var(--text); }
:focus-visible { outline: 3px solid var(--dourado); outline-offset: 3px; border-radius: 4px; }

/* O header é sticky (93px): sem esta folga, o topo das seções alvo de âncora
   (#sobre, #servicos) para debaixo dele ao navegar pelo menu. */
section[id], [id="topo"] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* ---------- Utilitários ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
/* Seções claras (alternadas): fundo branco com texto escuro */
.section-alt { background: var(--surface); color: var(--ink); }
.section-alt h2, .section-alt h3 { color: var(--ink); }
.section-alt .eyebrow { color: var(--dourado-700); }
.section-alt .section-lead,
.section-alt .sobre-text p,
.section-alt .diferenciais p,
.section-alt .endereco-info p { color: var(--ink-soft); }
.section-lead { color: var(--text-soft); max-width: 46ch; margin-top: .5rem; }
/* Serviços e Aparelhos auditivos: texto de abertura mais longo — deixa ocupar todo
   o bloco em vez de quebrar numa coluna estreita como os outros leads (46ch). */
#servicos .section-lead,
#aparelhos .section-lead { max-width: none; }

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--dourado-claro);
  margin-bottom: .6rem;
}
.eyebrow-gold { color: var(--dourado-claro); }

.section-head { margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-head h2 { font-size: clamp(2rem, 5vw, 3rem); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--azul); color: var(--nude); padding: .7rem 1.1rem; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-sans); font-weight: 700; font-size: 1rem;
  padding: .85rem 1.6rem; border-radius: 999px; cursor: pointer;
  border: 2px solid transparent; transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  text-align: center; line-height: 1.2;
  min-height: 44px; justify-content: center;   /* alvo de toque confortável */
}
.btn-sm { padding: .65rem 1.25rem; font-size: .95rem; }
.btn:hover { transform: translateY(-2px); }

/* Dourado como botão: texto AZUL sobre dourado — par com contraste adequado */
.btn-primary { background: var(--dourado); color: var(--on-gold); box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: #e0bf55; }

.btn-ghost { background: transparent; color: var(--nude); border-color: rgba(255,236,214,.4); }
.btn-ghost:hover { border-color: var(--nude); background: rgba(255,236,214,.1); }

.btn-whatsapp { background: #25d366; color: #06331b; box-shadow: var(--shadow-soft); font-size: 1.05rem; padding: 1rem 1.9rem; }
.btn-whatsapp:hover { background: #20c65c; }
.btn-whatsapp .wa-icon { width: 1.4em; height: 1.4em; }

/* =========================================================
   HEADER
   ========================================================= */
/* Sem backdrop-filter: o background é 100% opaco, então o blur não produzia
   efeito algum — só criava uma camada de composição na GPU. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--azul-logo);
  border-bottom: 1px solid rgba(255,236,214,.12);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 92px; }
.brand-logo { height: 72px; width: auto; }
.nav { display: flex; align-items: center; }

.nav-toggle {
  display: inline-flex; flex-direction: column; gap: 5px; justify-content: center;
  width: 44px; height: 44px; padding: 0 9px; background: transparent; border: 0; cursor: pointer;
}
.nav-toggle-bar { height: 2px; background: var(--nude); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* `transform` sozinho só move o menu visualmente: os links continuariam na ordem
   de tabulação e na árvore de acessibilidade, criando 6 paradas de foco invisíveis
   fora da tela. `visibility` os remove das duas; o delay preserva a animação de saída. */
.nav-menu {
  position: fixed; inset: 92px 0 auto 0;
  background: var(--azul); display: grid; gap: .25rem; padding: 1rem var(--gutter) 1.5rem;
  transform: translateY(-140%); box-shadow: var(--shadow);
  visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}
.nav-menu.open {
  transform: translateY(0);
  visibility: visible;
  transition: transform .3s ease, visibility 0s;
}
.nav-menu a { display: block; color: var(--on-dark); padding: .7rem .25rem; font-weight: 600; border-radius: 8px; }
.nav-menu a:hover { color: #fff; }
.nav-cta { color: var(--dourado-claro) !important; }

/* =========================================================
   HERO
   ========================================================= */
/* Fundo na mesma cor do vídeo (#244056, medido no arquivo): antes de o vídeo carregar
   não há "salto" de cor, e onde ele não alcança a emenda é invisível. */
.hero {
  position: relative; overflow: hidden; background: #244056;
  padding-block: clamp(3rem, 8vw, 5rem) clamp(5rem, 12vw, 8rem);
  min-height: min(88vh, 620px); display: flex; align-items: center;
}
/* Vídeo cobrindo o hero. object-position aproxima o mascote no mobile (retrato corta as laterais) */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center;
  z-index: 0; pointer-events: none;
}
/* Véu para garantir legibilidade do texto sobre o vídeo */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* 1ª camada: funde o topo do vídeo (#244056) com a cor do header (#304a59), evitando emenda visível
     2ª camada: véu de legibilidade sobre o texto */
  background:
    linear-gradient(180deg, var(--azul-logo) 0, rgba(48,74,89,0) 96px),
    linear-gradient(180deg, rgba(35,63,84,.70) 0%, rgba(35,63,84,.55) 42%, rgba(35,63,84,.30) 72%, rgba(35,63,84,.15) 100%);
}
/* No mobile o texto passa por cima do mascote e o contraste varia quadro a quadro
   (o pior caso é a barriga amarela sob o botão fantasma). Véu mais denso e fundo
   próprio no botão garantem legibilidade em qualquer quadro do vídeo. */
@media (max-width: 899px) {
  .hero-scrim {
    background:
      linear-gradient(180deg, var(--azul-logo) 0, rgba(48,74,89,0) 96px),
      linear-gradient(180deg, rgba(35,63,84,.78) 0%, rgba(35,63,84,.72) 55%, rgba(35,63,84,.45) 100%);
  }
  .hero .btn-ghost { background: rgba(23,71,88,.55); border-color: rgba(255,236,214,.65); }
}
.hero-inner { position: relative; z-index: 2; display: grid; gap: clamp(2rem, 6vw, 3rem); align-items: center; }
.hero-copy { max-width: 34rem; }
.hero-eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; font-weight: 700; color: var(--dourado-claro); margin-bottom: 1rem; }
.hero h1 { font-size: clamp(2.4rem, 8vw, 4rem); font-weight: 600; }
.hero-sub { color: var(--text-soft); font-size: 1.15rem; max-width: 48ch; margin-top: 1.25rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

/* A curva precisa ter a cor da seção logo abaixo do hero (Sobre, que é clara) */
.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; height: 60px; z-index: 3;
  background: var(--surface);
  -webkit-mask: radial-gradient(120% 100% at 50% 0%, transparent 68%, #000 70%);
  mask: radial-gradient(120% 100% at 50% 0%, transparent 68%, #000 70%);
}

/* =========================================================
   SOBRE
   ========================================================= */
.sobre-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.sobre-text p + p { margin-top: 1rem; }
.sobre-text p { color: var(--text-soft); font-size: 1.1rem; }
.diferenciais { display: grid; gap: 1.5rem; }
.diferenciais li { display: flex; gap: 1rem; align-items: flex-start; }
.dif-icon { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--nude); color: var(--dourado-700); }
.section-alt .dif-icon { background: var(--nude-soft); }
.dif-icon svg { width: 24px; height: 24px; }
.diferenciais h3 { font-size: 1.3rem; margin-bottom: .15rem; }
.diferenciais p { color: var(--text-soft); font-size: 1rem; }

/* =========================================================
   CARDS / SERVIÇOS
   ========================================================= */
/* Cards mais estreitos e de largura idêntica (colunas 1fr, ~250px cada).
   Sem align-items:start, os cards de uma linha esticam para a mesma altura. */
.cards-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.card {
  position: relative; background: var(--surface); border-radius: var(--radius);
  padding: 1.75rem; box-shadow: var(--shadow-soft); border: 1px solid rgba(23,71,88,.08);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(212,175,55,.6); }
.card h3 { font-size: 1.4rem; margin-bottom: .4rem; color: var(--ink); }
.card p { color: var(--ink-soft); font-size: 1rem; }
.card em { color: var(--dourado-700); font-style: italic; }

/* ---------- Serviços: grupos por categoria ---------- */
.servicos-grupo + .servicos-grupo { margin-top: 1rem; }

/* Categoria colapsável: começa minimizada, abre revelando os serviços */
.grupo > summary.grupo-head {
  display: flex; align-items: center; gap: .85rem; cursor: pointer; list-style: none;
  padding: .95rem 1.15rem; border-radius: 16px;
  background: rgba(255, 236, 214, .07);
  border: 1px solid rgba(255, 236, 214, .18);
  transition: background .2s ease, border-color .2s ease;
}
.grupo > summary.grupo-head::-webkit-details-marker { display: none; }
.grupo > summary.grupo-head:hover { background: rgba(255, 236, 214, .13); border-color: rgba(255, 236, 214, .3); }
.grupo[open] > summary.grupo-head { margin-bottom: 1.25rem; }
/* O fundo translúcido da linha clareia o azul, então usa-se um dourado mais claro
   para manter AA em repouso (5.5:1) e no hover (4.7:1). */
.grupo > summary .card-toggle { color: var(--dourado-linha); }
.grupo[open] > summary .card-toggle-plus { transform: rotate(45deg); }
.grupo[open] > summary .card-toggle-label::after { content: "Ver menos"; }
.grupo-count { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--text-soft); white-space: nowrap; }

/* Variante em seção clara (caso Serviços passe a fundo branco) */
.section-alt .grupo > summary.grupo-head { background: var(--nude-soft); border-color: rgba(23, 71, 88, .12); }
.section-alt .grupo > summary.grupo-head:hover { background: var(--nude); }
.section-alt .grupo-count { color: var(--ink-soft); }
.section-alt .grupo > summary .card-toggle { color: var(--dourado-700); }
.grupo-icon {
  flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255, 236, 214, .12); color: var(--dourado-claro);
}
.section-alt .grupo-icon { background: var(--nude); color: var(--dourado-700); }
.grupo-icon svg { width: 24px; height: 24px; }
.grupo-title { font-size: clamp(1.25rem, 3vw, 1.55rem); }

/* ---------- Card de serviço ----------
   Mesmo visual dos cards de depoimento: fundo creme, borda e respiro idênticos.
   Estático (sem expandir) — título, frase e duração, só isso. */
.card-servico {
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--nude-soft); border-color: rgba(23,71,88,.1);
}
.card-servico h4 { font-family: var(--font-serif); font-weight: 600; font-size: 1.1rem; line-height: 1.25; color: var(--ink); }
.card-sub { color: var(--ink-soft); font-size: .86rem; line-height: 1.45; }
.card-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
/* Pílula azul com dourado vivo — permite o dourado brilhante mantendo AA (6.2:1) */
.card-meta li {
  font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--azul-logo); color: var(--dourado-claro); padding: .2rem .55rem; border-radius: 999px;
}
/* Usado só pelo acordeão de categoria agora (grupo-head) */
.card-toggle { flex: none; display: inline-flex; align-items: center; gap: .45rem; color: var(--dourado-700); font-weight: 700; font-size: .8rem; }
.card-toggle-plus {
  width: 27px; height: 27px; flex: none; border-radius: 50%; border: 2px solid currentColor;
  display: grid; place-items: center; font-size: 1.05rem; line-height: 1; transition: transform .2s ease;
}
.card-toggle-label::after { content: "Saiba mais"; }
/* Na linha da categoria (layout horizontal) o rótulo sai em telas estreitas para dar espaço ao título */
@media (max-width: 599px) {
  .grupo > summary .card-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* =========================================================
   APARELHOS AUDITIVOS / MARCAS PARCEIRAS
   ========================================================= */
.marcas-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.marca-card {
  background: var(--surface); border-radius: var(--radius); padding: 1.5rem;
  box-shadow: var(--shadow-soft); border: 1px solid rgba(23,71,88,.1);
  display: flex; flex-direction: column; gap: 1rem;
}
/* O fundo do ladrilho usa a mesma cor de fundo dos arquivos de logo (#f7f7f7),
   para que a área do JPEG/PNG não apareça como um retângulo destacado no card. */
.marca-logo {
  background: #f7f7f7; border-radius: 12px; height: 104px;
  display: flex; align-items: center; justify-content: center; padding: 1rem 1.5rem;
}
/* Limite de altura em px (e não em %): dentro de um container flex/grid o percentual
   resolve contra a linha dimensionada pelo conteúdo e o logo estoura o ladrilho. */
.marca-logo img { max-width: 100%; max-height: 72px; width: auto; height: auto; }
.marca-card h3 { font-size: 1.4rem; color: var(--ink); }
.marca-card p { color: var(--ink-soft); font-size: .98rem; }
.marcas-nota {
  margin-top: 1.5rem; text-align: center; color: var(--ink-soft);
  font-size: .95rem; font-style: italic;
}

/* =========================================================
   MASCOTE / BOAS-VINDAS
   ========================================================= */
/* Fundo na mesma cor do vídeo (#2a4259, medido no arquivo — chapado, variação de ±4
   que é só ruído de compressão). Onde o vídeo não alcança, a seção continua a cor dele. */
.mascot-section {
  position: relative; overflow: hidden;
  background: #2a4259; color: var(--on-dark);
  border-block: 1px solid rgba(255,236,214,.1);
  min-height: min(80vh, 560px); display: flex; align-items: center;
}
/* width:auto + height:100% faz a CAIXA do elemento ter exatamente o quadro do vídeo
   (16:9), então as porcentagens da máscara mapeiam 1:1 nas coordenadas do arquivo, em
   qualquer largura de tela — ao contrário de object-fit, que deixa faixas vazias de
   largura variável e faria as paradas escorregarem.
   O mascote ocupa x=25,8%..72,0% do quadro ao longo dos 7,6s, então a dissolução em
   18% e 78% passa longe dele. Com o fundo chapado ela nem seria estritamente
   necessária, mas custa nada e dilui o ruído de compressão da borda. */
.mascot-video {
  position: absolute; top: 0; left: 50%; transform: translateX(-49%);
  width: auto; height: 100%; max-width: none;
  z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 78%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 78%, transparent 100%);
}
/* No mobile o texto passa POR CIMA do mascote. O véu é leve para focar na animação. */
.mascot-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(40,64,86,.30) 0%, rgba(40,64,86,.55) 35%, rgba(40,64,86,.65) 100%);
}
.mascot-section > .container { position: relative; z-index: 2; }
.mascot-section h2, .mascot-section h3 { color: var(--nude); }
.mascot-inner { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: center; }
.mascot-copy p { color: var(--on-dark-soft); font-size: 1.1rem; }
.mascot-copy h2 { font-size: clamp(1.9rem, 4.5vw, 2.75rem); margin-bottom: 1rem; }
.mascot-tagline { font-family: var(--font-serif); font-size: 1.6rem; font-style: italic; color: var(--dourado-claro) !important; margin-top: 1.25rem; }

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
/* Selo com a nota do Google */
.google-rating {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  background: var(--nude-soft); border: 1px solid rgba(23,71,88,.12);
  border-radius: 999px; padding: .85rem 1.4rem; margin-bottom: 1.75rem;
  width: fit-content; max-width: 100%;
}
.google-rating-nota { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 700; color: var(--ink); line-height: 1; }
.google-rating .stars { margin-bottom: 0; }
.google-rating-texto { color: var(--ink-soft); font-size: .95rem; }
.google-rating-texto strong { color: var(--ink); }
.google-rating-link {
  font-weight: 700; font-size: .9rem; color: var(--dourado-700);
  border-bottom: 2px solid var(--dourado);
}
.google-rating-link:hover { color: var(--ink); }

.testimonials { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.testimonial { background: var(--surface); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-soft);
  border: 1px solid rgba(23,71,88,.08); }
.section-alt .testimonial { background: var(--nude-soft); border-color: rgba(23,71,88,.1); }
/* Estrelas em dourado escuro: sobre o card claro o dourado médio ficaria em 2.4:1 */
.stars { color: var(--dourado-700); letter-spacing: .12em; margin-bottom: .75rem; font-size: 1.05rem; }
.testimonial blockquote { font-size: 1.08rem; color: var(--ink); }
.testimonial-author { margin-top: 1rem; font-weight: 700; color: var(--ink-soft); }

/* =========================================================
   FAQ
   ========================================================= */
.faq { display: grid; gap: .85rem; }
.faq details { background: var(--surface); color: var(--ink); border-radius: 14px; border: 1px solid rgba(23,71,88,.1); overflow: hidden; }
.faq summary { cursor: pointer; padding: 1.1rem 1.35rem; font-weight: 700; font-size: 1.08rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--dourado-700); transition: transform .2s ease; line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-body { padding: 0 1.35rem 1.2rem; color: var(--ink-soft); }
.faq-body em { color: var(--dourado-700); }

/* =========================================================
   ENDEREÇO
   ========================================================= */
.unidade + .unidade { margin-top: clamp(2rem, 5vw, 3rem); }
.unidade-nome { font-size: clamp(1.4rem, 3.5vw, 1.8rem); margin-bottom: .75rem; }
.unidade-acoes { margin-top: 1rem; }
.unidade-breve { max-width: 44ch; }
.endereco-tel a { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--dourado); }
.endereco-tel a:hover { color: var(--dourado-700); }
.contato-tel { color: var(--dourado-claro); font-weight: 700; border-bottom: 1px solid currentColor; }
.footer-tel { font-weight: 700; color: var(--nude); }
/* Alvos de toque: os links de telefone ficavam com 20–23px de altura. WCAG 2.5.8
   pede 24px; 44px é o mínimo confortável no celular — e é onde o paciente toca. */
.endereco-tel a,
.footer-tel,
.google-rating-link { display: inline-flex; align-items: center; min-height: 44px; }
.footer-tel:hover { color: var(--dourado-claro); }
.footer-col p + p { margin-top: .85rem; }
.footer-col strong { color: var(--nude); }

.endereco-grid { display: grid; gap: 1.5rem; align-items: stretch; }
.endereco-info { display: flex; flex-direction: column; gap: .5rem; }
.endereco-info p { color: var(--text-soft); }
.endereco-info .btn { align-self: flex-start; margin-top: .75rem; }
.endereco-map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); min-height: 300px; }
.endereco-map iframe { width: 100%; height: 100%; min-height: 300px; border: 0; }

/* =========================================================
   CONTATO
   ========================================================= */
.contato { background: var(--bg); color: var(--on-dark); text-align: center; border-top: 1px solid rgba(255,236,214,.1); }
.contato h2 { color: var(--nude); font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; }
.contato p { color: var(--on-dark-soft); max-width: 48ch; margin: 0 auto 2rem; font-size: 1.12rem; }
.contato-inner { display: flex; flex-direction: column; align-items: center; }

/* =========================================================
   RODAPÉ
   ========================================================= */
.site-footer { background: var(--azul-logo); color: var(--on-dark-soft); border-top: 1px solid rgba(255,236,214,.1); }
.footer-inner { display: grid; gap: 2rem; padding-block: clamp(2.5rem, 6vw, 4rem); grid-template-columns: 1fr; }
.footer-brand img { height: 78px; width: auto; margin-bottom: .75rem; }
.footer-tagline { font-family: var(--font-serif); font-style: italic; color: var(--dourado-claro); font-size: 1.15rem; }
.footer-col h3 { color: var(--nude); font-size: 1.2rem; margin-bottom: .75rem; }
.footer-col p { font-size: .98rem; }
.social a { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem 0; min-height: 44px; color: var(--on-dark-soft); }
.social a:hover { color: var(--dourado-claro); }
.social svg { width: 22px; height: 22px; }
.footer-legal { border-top: 1px solid rgba(255,236,214,.14); }
.footer-legal .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-block: 1.25rem; }
.footer-legal p { font-size: .85rem; color: var(--on-dark-soft); }
.footer-legal-sub em { color: rgba(215,224,227,.75); }

/* =========================================================
   WHATSAPP FAB
   ========================================================= */
/* O ícone usa o mesmo verde escuro do .btn-whatsapp (7,07:1). Branco sobre #25d366
   dá 1,98:1 e reprova em WCAG 1.4.11, que pede 3:1 para conteúdo não textual. */
.wa-fab {
  position: fixed; right: clamp(1rem, 4vw, 1.75rem); bottom: clamp(1rem, 4vw, 1.75rem); z-index: 90;
  width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #06331b;
  display: grid; place-items: center; box-shadow: 0 10px 25px -8px rgba(0,0,0,.4);
  transition: transform .18s ease, box-shadow .2s ease;
}
.wa-fab svg { width: 32px; height: 32px; }
.wa-fab:hover { transform: scale(1.08); box-shadow: 0 14px 30px -8px rgba(0,0,0,.5); }

/* =========================================================
   PÁGINA 404
   ========================================================= */
/* Fica aqui (e não num <style> inline no 404.html) porque a CSP não libera
   estilos inline — ver style-src em public/_headers. */
.erro-404 {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.erro-404 .brand-logo { margin-bottom: 2rem; }
.erro-404 h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 1rem; }
.erro-404 .section-lead { margin-inline: auto; margin-bottom: 2rem; }
.erro-404 .hero-actions { justify-content: center; margin-top: 0; }

/* =========================================================
   ABERTURA SUAVE DOS BLOCOS EXPANSÍVEIS
   (categorias e FAQ)
   ========================================================= */

/* Base: animação com ::details-content (suporta transição de altura fluida).
   interpolate-size é herdada — declarada em `details` (e não em :root) para que
   nenhuma outra transição de altura/largura da página passe a animar sem querer. */
details {
  interpolate-size: allow-keywords;
}

details::details-content {
  opacity: 0;
  block-size: 0;
  overflow-y: clip;
  transition: content-visibility .4s allow-discrete, block-size .4s cubic-bezier(0.25, 1, 0.5, 1), opacity .4s ease-out;
}

details[open]::details-content {
  opacity: 1;
  block-size: auto;
}
/* Dentro da categoria o conteúdo é uma grade de cards que sobem 4px no hover e
   ganham anel de foco 3px com 3px de afastamento. Sem esta folga, o overflow:clip
   acima corta os dois no topo e na base da área revelada. */
.grupo::details-content { overflow-clip-margin: 10px; }

@keyframes revelarConteudo {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}

/* Fallback para quem não tem ::details-content OU não tem interpolate-size — as duas
   coisas chegaram em versões diferentes, então testar só uma deixava um navegador
   (Chrome 129–130) sem animação nenhuma. */
@supports not (selector(details::details-content) and (interpolate-size: allow-keywords)) {
  .faq details[open] .faq-body,
  .grupo[open] > .cards-grid {
    animation: revelarConteudo .5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

/* Nota: a técnica de ::details-content permite uma abertura fluida como sanfona em
   navegadores modernos. O fallback via @keyframes cuida da suavidade nos antigos. */

/* O "+" já gira ao abrir; suaviza também a cor de fundo da pílula e do sumário */
.faq summary, .grupo > summary.grupo-head { transition: background .2s ease, border-color .2s ease; }

/* =========================================================
   REVEAL (scroll)
   ========================================================= */
/* Sem JS, o conteúdo aparece normalmente. O estado oculto só vale quando .js está presente. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   BREAKPOINTS (mobile-first)
   ========================================================= */
@media (min-width: 640px) {
  .testimonials { grid-template-columns: repeat(2, 1fr); }
  .marcas-grid { grid-template-columns: repeat(2, 1fr); }
  .marca-logo { height: 120px; }
  .marca-logo img { max-height: 88px; }
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav-menu {
    position: static; inset: auto; transform: none; background: transparent; box-shadow: none;
    display: flex; align-items: center; gap: .35rem; padding: 0;
    visibility: visible; transition: none;   /* menu sempre visível no desktop */
  }
  .nav-menu a { color: var(--on-dark); padding: .5rem .85rem; font-size: .98rem; }
  .nav-cta { border: 2px solid var(--dourado); border-radius: 999px; padding: .5rem 1.1rem !important; }
  .nav-cta:hover { background: var(--dourado); color: var(--on-gold) !important; }

  /* Desktop: "contain" mostra o quadro inteiro (o mascote não é cortado). As faixas que
     sobram não aparecem, pois o fundo do vídeo (#244056) é igual ao fundo do hero.
     A caixa é limitada à largura do container (e não à da tela), de modo que o mascote
     fique encostado na coluna de texto mesmo em monitores largos. */
  .hero-video {
    right: auto; left: 50%; transform: translateX(-50%);
    width: min(100%, var(--container));
    object-fit: contain; object-position: right center;
  }
  .hero-scrim {
    background:
      linear-gradient(180deg, var(--azul-logo) 0, rgba(48,74,89,0) 110px),
      linear-gradient(90deg, rgba(35,63,84,.60) 0%, rgba(35,63,84,.45) 32%, rgba(35,63,84,.15) 55%, rgba(35,63,84,0) 78%);
  }
  .sobre-grid { grid-template-columns: 1fr 1fr; }
  .testimonials { grid-template-columns: repeat(3, 1fr); }
  /* Desktop: só muda o deslocamento horizontal — a caixa continua sendo o próprio
     quadro do vídeo, e a máscara da regra base segue valendo.
     Com -74%, a borda direita do mascote (72% do quadro) cai em 50vw - 20px, ou seja,
     encosta na linha central em QUALQUER largura de tela; a coluna de texto começa em
     50vw + metade do gap, então nunca há sobreposição. */
  .mascot-video { transform: translateX(-74%); }
  /* Véu leve reduzido: no desktop o mascote termina antes da coluna de texto,
     então podemos reduzir bem a opacidade atrás do texto para destacar mais o dino. */
  .mascot-scrim {
    background: linear-gradient(90deg, rgba(40,64,86,0) 10%, rgba(40,64,86,.10) 30%, rgba(40,64,86,.20) 48%, rgba(40,64,86,.30) 100%);
  }
  .mascot-inner { grid-template-columns: 1fr 1fr; }
  .mascot-copy { grid-column: 2; }
  .endereco-grid { grid-template-columns: 1fr 1.2fr; }
  .footer-inner { grid-template-columns: 1.2fr 1.1fr .8fr .9fr; }
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* ::backdrop precisa ser citado à parte — o seletor universal não alcança
     pseudo-elementos, e o véu do modal ficaria esmaecendo sozinho */
  *, *::backdrop { animation: none !important; transition: none !important; }
  /* Precisa vencer `.js .reveal` (0,2,0) em especificidade, não só `.reveal` */
  .js .reveal { opacity: 1; transform: none; }
}