/* ===== Clínica Aurê — tokens e estilos compartilhados (MPA estático) ===== */

html { scroll-behavior: smooth; }
/* anti-FOUC do Tailwind CDN — cor de fundo da marca e família de fonte
   fallback já aplicadas cedo, antes do CSS do CDN carregar */
html { background: #FBFAF7; font-family: 'Mulish', system-ui, -apple-system, sans-serif; }
/* rede de segurança contra vazamento horizontal no mobile */
html, body { overflow-x: hidden; }
body {
  background: #FBFAF7;
  font-family: 'Mulish', system-ui, -apple-system, sans-serif;
  /* respeita safe-areas em telas com notch */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
/* corpo de texto confortável no mobile */
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  /* TIPOGRAFIA — corpo de leitura (descrições, fichas, FAQ, endereços, passos)
     nunca abaixo de 15px no mobile. text-sm vira 15px; kicker/rótulos usam
     text-xs/[11px] e seguem menores de propósito.
     !important vence o utilitário do Tailwind CDN, injetado após este CSS. */
  .text-sm { font-size: 0.9375rem !important; line-height: 1.5rem !important; }
}

/* gradiente de respiro do hero — verde-água da casa, NÃO mesh roxo/azul */
.hero-grad {
  background:
    radial-gradient(120% 90% at 85% 8%, rgba(111,177,166,0.20) 0%, rgba(111,177,166,0) 55%),
    radial-gradient(90% 70% at 5% 100%, rgba(47,111,102,0.12) 0%, rgba(47,111,102,0) 60%),
    #FBFAF7;
}

/* scrim real sobre foto — garante leitura sempre */
.photo-scrim::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(19,48,46,0.86) 0%, rgba(19,48,46,0.55) 48%, rgba(19,48,46,0.18) 100%);
}
.photo-scrim-soft::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(19,48,46,0.82) 0%, rgba(19,48,46,0.30) 45%, rgba(19,48,46,0.05) 100%);
}

.kicker { letter-spacing: 0.22em; }

/* ===== TELA GRANDE — trilho fluido e generoso =====
   Substitui o antigo max-w-6xl (1152px) que boiava em vazio a partir de ~1440px.
   O conteúdo respira até 1600px com padding lateral que cresce com a viewport.
   Aplicado via .shell em todas as seções (cor/imagem ocupam 100vw como fundo;
   só o texto fica neste trilho interno). */
.shell {
  width: 100%;
  max-width: min(92vw, 1600px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 6rem);
}

/* trilho mais estreito — para colunas de leitura longa (bios da equipe),
   ainda generoso em telas largas mas sem esticar a medida do texto. */
.shell-narrow {
  width: 100%;
  max-width: min(92vw, 1240px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 6rem);
}

/* GUTTER — marca tipográfica vertical que aproveita a margem em telas largas.
   Decorativa: aria-hidden, some abaixo de 2xl, não compete com o conteúdo. */
.rail-mark {
  display: none;
}
@media (min-width: 1536px) {
  .rail-mark {
    display: block;
    position: absolute;
    top: 50%;
    left: clamp(1rem, 2.2vw, 3rem);
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 12px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(47, 111, 102, 0.45);
    pointer-events: none;
    user-select: none;
  }
}

/* reveal — transição de estado com propósito (entrada de seção), respeita reduce */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* foco visível acessível */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #2F6F66;
  outline-offset: 3px;
  border-radius: 4px;
}

.filete { height: 1px; background: linear-gradient(90deg, rgba(47,111,102,0) 0%, rgba(47,111,102,.45) 18%, rgba(47,111,102,.45) 82%, rgba(47,111,102,0) 100%); }

.underline-soft { background-image: linear-gradient(transparent 62%, rgba(201,168,106,.38) 0); }

/* WhatsApp float — respeita safe-area e não cobre conteúdo */
.wa-pulse {
  box-shadow: 0 8px 24px rgba(37,211,102,.35);
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  transition: transform .2s ease, box-shadow .2s ease;
}
/* FAB x CTA — no mobile, garante folga para o FAB não cobrir o último CTA
   (ex.: botão "Enviar pedido de horário" w-full) nem links do rodapé. */
@media (max-width: 767px) {
  /* respiro extra ao fim da página, acima do rodapé */
  main { padding-bottom: 5.5rem; }
  /* recua levemente o FAB para liberar a borda direita dos CTAs */
  .wa-pulse { right: 0.85rem; bottom: calc(0.85rem + env(safe-area-inset-bottom)); }
  /* o submit do formulário não fica sob o FAB: limita a largura e alinha à esquerda */
  #agendaForm button[type="submit"] { width: auto; max-width: calc(100% - 4.5rem); }
}
.wa-pulse:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37,211,102,.45); }
.wa-pulse:active { transform: scale(.94); }

/* ===== MICRO-ANIMAÇÕES — categoria explícita em cada bloco ===== */

/* TRANSIÇÃO — header sticky compacta e ganha sombra ao rolar */
header { transition: box-shadow .25s ease, background-color .25s ease; }
header.is-scrolled {
  box-shadow: 0 6px 24px -12px rgba(19,48,46,.25);
  background-color: rgba(251,250,247,.96);
}
/* compacta a barra ao rolar (vence o utilitário h-16 por especificidade) */
header.is-scrolled nav.h-16 { height: 3.25rem; }
header nav { transition: height .25s ease; }

/* ESTADO — botões e CTAs: lift sutil + feedback de toque (pressed) */
.btn-press { transition: transform .18s ease, box-shadow .25s ease, background-color .25s ease; }
.btn-press:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(19,48,46,.4); }
.btn-press:active { transform: translateY(0) scale(.98); }

/* ESTADO — cards (perfis, especialidades) sobem levemente no hover/focus */
.lift { transition: transform .3s ease, box-shadow .3s ease; }
@media (hover: hover) {
  .lift:hover { transform: translateY(-4px); }
}

/* FEEDBACK — sublinhado animado nos links de navegação (desktop) */
.nav-underline { position: relative; }
.nav-underline::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; border-radius: 2px;
  background: #C9A86A;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav-underline:hover::after,
.nav-underline:focus-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  header nav, .btn-press, .lift, .wa-pulse, .nav-underline::after { transition: none !important; }
  .btn-press:hover, .lift:hover, .wa-pulse:hover { transform: none !important; }
}

/* ===== DETALHE-ASSINATURA — o "Mapa do Sorriso" (odontograma editorial) =====
   Cada dente é um botão/marca de estado. Quando "cuidado" recebe o halo dourado da marca. */
.tooth {
  fill: #FBFAF7;
  stroke: rgba(47,111,102,.45);
  stroke-width: 1.4;
  transition: fill .35s ease, stroke .35s ease, transform .35s ease;
  transform-origin: center;
}
.tooth-row:hover .tooth,
.tooth:hover,
.tooth.is-active,
.tooth.is-care {
  fill: #6FB1A6;
  stroke: #2F6F66;
}
/* BRAND — dente sobe levemente ao interagir, reforçando "estado de cuidado" */
.tooth:hover, .tooth.is-active { transform: translateY(-3px); }
.tooth { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .tooth { transition: none !important; }
  .tooth:hover, .tooth.is-active { transform: none !important; }
}
.tooth.is-aura {
  fill: #C9A86A;
  stroke: #C9A86A;
}

/* halo/aura — o grafismo da marca (anel de luz), usado em selos e no logo */
.aura-ring { filter: drop-shadow(0 0 6px rgba(201,168,106,.35)); }

/* FALLBACK DE IMAGEM — se a foto (Unsplash) não carregar, o contêiner mostra
   um fundo da marca com o monograma, em vez de um ícone de imagem quebrada.
   O scrim e a legenda existentes continuam legíveis por cima. */
.img-failed {
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(111,177,166,.30), rgba(47,111,102,0) 60%),
    #13302E;
}
.img-failed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/favicon.svg");
  background-repeat: no-repeat;
  background-position: center 42%;
  background-size: 30%;
  opacity: .5;
}

/* linha do tempo do método */
.step-dot { box-shadow: 0 0 0 4px #F5F1EA; }

/* ===== MENU MOBILE — anima de verdade (sem display:none cortando a transição) =====
   Fechado: visibility:hidden + max-height:0 → fora da ordem de foco do teclado/leitor.
   Aberto: classe .open libera altura, opacidade e visibilidade. */
#mobileMenu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height .3s ease, opacity .25s ease, visibility .3s ease;
}
#mobileMenu.open {
  max-height: 70vh;
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  #mobileMenu { transition: none !important; }
}

/* ===== TAP TARGETS — alvos e links de nav (header + rodapé) >= 44px no mobile ===== */
@media (max-width: 767px) {
  /* hamburguer 44x44 */
  #menuBtn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  /* links do painel mobile já têm py-2.5; reforça altura efetiva */
  #mobileMenu a { min-height: 44px; display: flex; align-items: center; }
  #mobileMenu a.inline-flex { justify-content: center; }
  /* links de texto/nav do rodapé com área de toque confortável */
  footer nav a,
  footer ul a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ===== CONTRASTE — texto de conteúdo passa WCAG AA (>=4.5:1) =====
   Os alfas baixos do ink (40–60%) ficavam abaixo de 4.5:1 sobre paper/shell.
   Reforçados para o piso AA preservando a hierarquia visual (mais claro = secundário).
   Rótulos/kicker e marca d'água decorativa não dependem destes níveis. */
.text-ink\/40 { color: rgba(19,48,46,.70) !important; }
.text-ink\/45 { color: rgba(19,48,46,.70) !important; }
.text-ink\/50 { color: rgba(19,48,46,.70) !important; }
.text-ink\/55 { color: rgba(19,48,46,.74) !important; }
.text-ink\/60 { color: rgba(19,48,46,.76) !important; }

/* CONTRASTE — texto claro sobre o ink escuro.
   shell/60 ficava abaixo de AA sobre #13302E; sobe para ~80% (piso AA 4.5:1).
   shell/75 também é reforçado por margem de segurança. */
.text-shell\/60 { color: rgba(245,241,234,.82) !important; }
.text-shell\/75 { color: rgba(245,241,234,.86) !important; }

/* link de nav ativo */
.nav-active { color: #2F6F66; }
.nav-active::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 2px;
  background: #C9A86A;
  border-radius: 2px;
}