/* ============================================================================
   Dra. Camila Moura — CSS complementar.

   O Tailwind (via CDN) só processa classes utilitárias presentes no HTML e o
   bloco <style type="text/tailwindcss"> dentro do próprio index.html — uma
   folha externa como esta NÃO passa pelo compilador dele, então @apply aqui
   simplesmente não funcionaria. Por isso este arquivo contém apenas CSS
   comum: o padrão da placa fotográfica (anéis concêntricos, referência ao
   motivo do "foco/atenção" do projeto) e pequenos ajustes que não têm
   utilitário Tailwind direto.
   ============================================================================ */

/* O header é sticky (fica sobre o topo ao rolar). Sem isto, um clique em
   qualquer link do menu ("Sobre", "Atendimento" etc.) rola a seção exata para
   debaixo do header, escondendo o eyebrow/título logo abaixo dele. */
html { scroll-padding-top: 6rem; }

/* ---------- Placa fotográfica: anéis concêntricos (câmera/foco) ---------- */
.ph-photo {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .5rem;
  padding: 2rem;
  text-align: center;
  background-color: #EDE6DB;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(150, 99, 90, .14) 0%, transparent 30%),
    radial-gradient(circle at 50% 42%, rgba(150, 99, 90, .10) 0%, transparent 42%),
    radial-gradient(circle at 50% 42%, rgba(150, 99, 90, .07) 0%, transparent 54%);
}
.ph-photo::after {
  /* Moldura tipo passe-partout: linha externa fina + linha interna recuada. */
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(122, 78, 70, .28);
  pointer-events: none;
}
.ph-photo__ring {
  /* Anel decorativo grande, ecoando o motivo do favicon/eyebrow. */
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1px solid rgba(122, 78, 70, .35);
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

/* ---------- Placa do mapa (mesma família visual, mais quieta) ---------- */
.ph-map {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .375rem;
  padding: 1.5rem;
  text-align: center;
  background-color: #E9E2D6;
  background-image:
    linear-gradient(rgba(122, 78, 70, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 78, 70, .08) 1px, transparent 1px);
  background-size: 26px 26px;
}
.ph-map::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(122, 78, 70, .22);
  pointer-events: none;
}

/* ---------- Revelação de entrada ----------
   As classes são aplicadas por JS (ver main.js): sem script, nada permanece
   invisível — os elementos [data-rv] começam visíveis por padrão. */
[data-rv].rv-armed {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
}
[data-rv].rv-armed.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * , *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-rv].rv-armed { opacity: 1; transform: none; }
}

/* ---------- Impressão ---------- */
@media print {
  #demo-note, #hd .lg\:hidden, #nav, .fixed { display: none !important; }
  body { background: #fff; color: #000; }
}