/* Overrides e utilitários que não valem a pena rodar via Tailwind CDN */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Nav — estado transparente no topo, sólido ao rolar */
[data-nav] {
  background: transparent;
}
[data-nav][data-scrolled="true"] {
  background: rgba(247, 245, 241, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226, 222, 214, 0.6);
}
[data-nav][data-scrolled="true"] [data-nav-text] { color: #0a0a0a; }
[data-nav][data-scrolled="true"] [data-nav-cta] { color: #0a0a0a; border-color: #0a0a0a; }

/* Páginas internas marcadas com data-nav-solid: o header já nasce sólido.
   Sem isso, a regra [data-nav]{background:transparent} acima anula o bg-paper
   do markup e o logo escuro fica ilegível sobre o hero escuro. */
[data-nav][data-nav-solid],
[data-nav][data-nav-solid][data-scrolled="true"] {
  background: rgba(247, 245, 241, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226, 222, 214, 0.6);
}
[data-nav][data-nav-solid] [data-nav-text] { color: #0a0a0a; }
[data-nav][data-nav-solid] [data-nav-cta]  { color: #0a0a0a; border-color: #0a0a0a; }

/* No topo (hero escuro), texto claro */
[data-nav]:not([data-scrolled="true"]):not([data-nav-solid]) [data-nav-text] { color: #f7f5f1; }
[data-nav]:not([data-scrolled="true"]) [data-nav-cta] { color: #f7f5f1; border-color: #f7f5f1; }
[data-nav]:not([data-scrolled="true"]) [data-nav-cta]:hover { background: #f7f5f1; color: #0a0a0a; }

/* Cormorant Garamond troca o "Q" por um alternativo de perna longa (Q.long)
   sempre que vem seguido de minúsculas — é o recurso OpenType 'calt', ligado
   por padrão. Desligado aqui, volta o Q normal, de perna curta. */
.font-serif {
  font-variant-ligatures: no-contextual;
  -webkit-font-feature-settings: "calt" 0;
  font-feature-settings: "calt" 0;
}

/* Dropdown "Procedimentos" — ponte invisível sobre o vão entre o botão e o
   menu, para o mouse não sair do bloco ao descer (senão o menu fecha). */
[data-dropdown-menu]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

/* Menu mobile aberto */
[data-menu].open { display: block; }

/* Remove seta padrão dos <details> */
details > summary::-webkit-details-marker { display: none; }
details > summary { list-style: none; }

/* Inputs autofill */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #f7f5f1;
  -webkit-box-shadow: 0 0 0 30px #0a0a0a inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* ===== EFEITO DE ENTRADA (scroll reveal) ===== */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-left  { transform: translateX(-42px); }
.reveal-right { transform: translateX(42px); }
.reveal-zoom  { transform: scale(.92); }
.reveal.visible { opacity: 1; transform: none; }

/* Delays escalonados para orquestrar entradas */
.d-1 { transition-delay: .12s }
.d-2 { transition-delay: .24s }
.d-3 { transition-delay: .36s }
.d-4 { transition-delay: .48s }
.d-5 { transition-delay: .60s }
.d-6 { transition-delay: .72s }

/* Mandamentos (home) — cascata mais lenta que a d-1/d-2 padrão, para cada linha
   "pular" sozinha na tela em vez de os três entrarem praticamente juntos.
   Especificidade (0,2,0) e (0,2,1) vence as .d-* (0,1,0). */
.mandamentos > li:nth-child(1) { transition-delay: .10s }
.mandamentos > li:nth-child(2) { transition-delay: .50s }
.mandamentos > li:nth-child(3) { transition-delay: .90s }
.mandamentos + p.reveal        { transition-delay: 1.3s }

/* Respeita preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .reveal { opacity: 1; transform: none; transition: none }
}

/* =====================================================================
   PÁGINAS DE PROCEDIMENTO
   ===================================================================== */

/* Âncora não fica escondida atrás do header fixo + subnav */
[id] { scroll-margin-top: 140px; }

/* --- Subnav da página (âncoras internas) --- */
.subnav {
  position: sticky;
  top: 76px;
  z-index: 30;
  background: rgba(247, 245, 241, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #e2ded6;
}
.subnav a {
  position: relative;
  white-space: nowrap;
  padding: 1rem .25rem;
  color: rgba(10, 10, 10, .55);
  transition: color .25s;
}
.subnav a:hover { color: #3f7d70; }
.subnav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: #3f7d70;
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.subnav a[data-active]::after { transform: scaleX(1); }
.subnav a[data-active] { color: #0a0a0a; }

/* --- Linha do tempo (etapas / recuperação) --- */
.timeline { position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: 19px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, #a9cdc5, #e2ded6);
}
.timeline > li { position: relative; padding-left: 60px; }
.timeline .marker {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: #eef5f3;
  border: 1px solid #a9cdc5;
  color: #3f7d70;
  font-size: 13px;
}
/* Variante em fundo escuro */
.timeline--dark::before { background: linear-gradient(to bottom, rgba(169,205,197,.6), rgba(122,117,104,.25)); }
.timeline--dark .marker {
  background: rgba(169,205,197,.1);
  border-color: rgba(169,205,197,.4);
  color: #a9cdc5;
}

/* --- Espaço reservado para foto do Dr. (a inserir depois) --- */
.foto-pendente {
  background-color: #f0eee9;
  background-image: repeating-linear-gradient(45deg,
    transparent, transparent 12px,
    rgba(169, 205, 197, .22) 12px, rgba(169, 205, 197, .22) 24px);
  border: 1px dashed #c9c4b9;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}

/* --- Barra de CTA fixa no mobile --- */
.cta-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: flex;
  gap: .5rem;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(10, 10, 10, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(122, 117, 104, .3);
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.cta-mobile[data-visible] { transform: translateY(0); }
@media (min-width: 768px) { .cta-mobile { display: none; } }

/* =====================================================================
   ANTES E DEPOIS — página Resultados
   Desktop (>=1024px): trilho horizontal, 3 casos por vez, com scroll-snap.
   A legenda do Dr. entra no hover (e no foco por teclado).
   Mobile/tablet: pilha vertical, 1 por vez. A legenda entra sozinha
   quando o card passa pelo miolo da tela — classe .ba-visivel, posta e
   removida pelo IntersectionObserver em main.js.
   ===================================================================== */

.ba-trilho {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.ba-item { min-width: 0; }

.ba-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2ded6;
}
/* object-fit: contain garante que nenhum rosto seja cortado — as imagens
   já vêm normalizadas em 16/9 com margem branca quando necessário. */
.ba-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #fff;
}

/* Marcadores: sem eles o visitante não sabe qual lado é o antes */
.ba-marca {
  position: absolute;
  top: .8rem;
  z-index: 2;
  padding: .32rem .6rem;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(10, 10, 10, .10);
}
.ba-marca--antes  { left: .8rem; }
.ba-marca--depois { right: .8rem; }

/* A legenda escurece só o rodapé da foto — os rostos seguem legíveis */
.ba-legenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 3.5rem 1.4rem 1.3rem;
  background: linear-gradient(to top,
    rgba(10, 10, 10, .95) 0%,
    rgba(10, 10, 10, .86) 42%,
    rgba(10, 10, 10, 0) 100%);
  color: #f7f5f1;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
              transform .55s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
.ba-proc  { margin: 0 0 .35rem; font-size: 1.25rem; line-height: 1.2; color: #a9cdc5; }
.ba-texto { margin: 0; font-size: .875rem; line-height: 1.6; font-weight: 300; color: rgba(247, 245, 241, .92); }

/* --- Empilhado: revela no scroll --- */
@media (max-width: 1023px) {
  .ba-card.ba-visivel .ba-legenda { opacity: 1; transform: none; }
  .ba-item[data-oculto] { display: none; }
}

/* --- Trilho: 3 por vez, legenda no hover --- */
@media (min-width: 1024px) {
  .ba-trilho {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
  }
  .ba-trilho::-webkit-scrollbar { display: none; }
  .ba-item {
    flex: 0 0 calc((100% - 3rem) / 3);   /* 3 cards + 2 vãos de 1.5rem */
    scroll-snap-align: start;
  }
  .ba-card:hover      .ba-legenda,
  .ba-card:focus-within .ba-legenda { opacity: 1; transform: none; }
  .ba-card:focus-visible { outline: 2px solid #3f7d70; outline-offset: 3px; }
}

/* Setas — só existem onde há trilho */
.ba-setas { display: none; gap: .5rem; }
@media (min-width: 1024px) { .ba-setas { display: flex; } }
.ba-seta {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #0a0a0a;
  background: transparent;
  color: #0a0a0a;
  cursor: pointer;
  transition: background .3s, color .3s, opacity .3s;
}
.ba-seta:hover:not(:disabled) { background: #0a0a0a; color: #f7f5f1; }
.ba-seta:disabled { opacity: .25; cursor: default; }

/* "Ver mais casos" — só faz sentido na pilha vertical */
.ba-mais { display: none; }
@media (max-width: 1023px) { .ba-mais[data-ativo] { display: inline-flex; } }

@media (prefers-reduced-motion: reduce) {
  .ba-legenda { transition: none; }
  .ba-trilho  { scroll-behavior: auto; }
}

/* Com a barra visível, o botão flutuante do WhatsApp sobe para não colidir */
@media (max-width: 767px) {
  body:has(.cta-mobile[data-visible]) .wpp-flutuante { bottom: 5.75rem; }
}