/* ============================================================
   Dr. Thiago Vieira Moraes — Landing Page
   Biomedicina Estética · Copacabana, Rio de Janeiro
   ============================================================ */

:root {
  /* Paleta — calibrada a partir da logo real (verde-sálvia) e das
     fotos de estúdio (terno escuro, fundo neutro). Vermelho removido:
     não há justificativa na identidade visual real do cliente. */
  --color-bg:         #F5F6F2;
  --color-bg-alt:     #EEF0E9;
  --color-surface:    #FFFFFF;
  --color-ink:        #12181A;
  --color-ink-soft:   #5A6360;
  --color-line:       rgba(14, 20, 18, 0.10);

  --color-dark:       #0D1412;
  --color-dark-alt:   #171F1D;

  --color-sage:       #8FB9B5;   /* tom exato da logo */
  --color-sage-soft:  rgba(143, 185, 181, 0.16);
  --color-green:      #24504C;   /* verde profundo derivado da logo — acento principal */
  --color-green-dark: #163330;

  /* Tipografia */
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --max-width: 1180px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-soft: 0 20px 60px -25px rgba(13, 20, 18, 0.28);
  --shadow-card: 0 10px 30px -15px rgba(13, 20, 18, 0.16);

  --transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1);

  /* Alturas de referência dos elementos flutuantes de WhatsApp,
     usadas para reservar espaço e não cobrir conteúdo/footer */
  --sticky-bar-height: 68px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; max-width: 100%; }
body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; line-height: 1.15; margin: 0 0 20px; color: var(--color-dark); overflow-wrap: break-word; }
p { margin: 0 0 16px; color: var(--color-ink-soft); }

/* Skip link */
.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 300;
  background: var(--color-dark);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

/* Estados de foco acessíveis */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Segurança contra overflow horizontal em qualquer grid/flex */
.about-grid > *,
.location-grid > *,
.footer-grid > * {
  min-width: 0;
}

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

@media (max-width: 640px) {
  .container { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 360px) {
  .container { padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Transições/animações praticamente instantâneas: o reveal ainda
     ocorre ao entrar em cena (via IntersectionObserver), só sem o
     movimento perceptível. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Compensa o header fixo ao rolar até uma seção via âncora (clique no
   menu ou link direto com #hash na URL), para o topo da seção não
   ficar escondido atrás do header. */
section[id] { scroll-margin-top: 100px; }
@media (max-width: 900px) { section[id] { scroll-margin-top: 88px; } }
@media (max-width: 640px) { section[id] { scroll-margin-top: 80px; } }

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-green);
  font-weight: 700;
  margin-bottom: 14px;
}

section { padding: 120px 0; }
@media (max-width: 900px) { section { padding: 84px 0; } }
@media (max-width: 640px) { section { padding: 72px 0; } }

/* Ritmo vertical: nem toda seção carrega o mesmo peso de conteúdo, então
   nem toda seção precisa do mesmo respiro vertical. A regra genérica
   acima continua valendo como base — estas apenas afinam por grupo. */
.about, .procedures, .results, .location {
  padding-top: 112px;
  padding-bottom: 112px;
}
.journey, .differentials, .social, .faq {
  padding-top: 88px;
  padding-bottom: 88px;
}
.final-cta {
  padding-top: 88px;
  padding-bottom: 88px;
}

@media (max-width: 640px) {
  .about, .procedures, .results, .location {
    padding-top: 68px;
    padding-bottom: 68px;
  }
  .journey, .differentials, .social, .faq {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .final-cta {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
  padding: 16px 34px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn .icon-whatsapp { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }
.icon-instagram { width: 15px; height: 15px; fill: none; flex-shrink: 0; vertical-align: -2.5px; }

@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; }
}

@media (max-width: 360px) {
  .btn { padding-left: 22px; padding-right: 22px; }
}
.btn-primary {
  background: var(--color-dark);
  color: #fff;
  box-shadow: var(--shadow-card);
}
.btn-primary:hover { background: var(--color-green); transform: translateY(-2px); box-shadow: var(--shadow-soft); }

/* Verde = conversar/agendar pelo WhatsApp. Preto/ghost/outline = navegar
   ou conhecer conteúdo. Use .btn-whatsapp em todo CTA que leva ao
   WhatsApp para essa hierarquia ficar visualmente inequívoca. */
.btn-whatsapp {
  background: var(--color-green);
  color: #fff;
  box-shadow: var(--shadow-card);
}
.btn-whatsapp:hover {
  background: var(--color-green-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.btn-ghost {
  background: transparent;
  color: var(--color-dark);
  border-color: var(--color-line);
}
.btn-ghost:hover { border-color: var(--color-green); color: var(--color-green); transform: translateY(-2px); }

.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}
.btn-outline-light:hover { background: #fff; color: var(--color-dark); transform: translateY(-2px); }

.btn-small { padding: 11px 18px; font-size: 13.5px; }
.btn-small .icon-whatsapp { width: 15px; height: 15px; }
.btn-large { padding: 18px 40px; font-size: 16px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 0;
  transition: background var(--transition), padding var(--transition), box-shadow var(--transition);
}
.site-header.is-scrolled {
  background: rgba(245, 246, 242, 0.9);
  backdrop-filter: blur(14px);
  padding: 13px 0;
  box-shadow: 0 1px 0 var(--color-line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.brand-mark { width: 34px; height: auto; flex-shrink: 0; }
.brand-name {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.main-nav { display: flex; gap: 22px; flex-shrink: 0; }
.main-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink-soft);
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
  transition: color var(--transition);
}
.main-nav a:hover { color: var(--color-dark); }
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--color-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.main-nav a:hover::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  width: 100%; height: 1.5px;
  background: var(--color-dark);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 32px 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 100%; }
.mobile-menu nav a {
  font-family: var(--font-serif);
  font-size: 23px;
  color: var(--color-dark);
  text-align: center;
}
.mobile-menu nav a.btn { font-family: var(--font-sans); font-size: 15px; margin-top: 10px; color: #fff; }

@media (max-height: 640px) {
  .mobile-menu nav { gap: 14px; }
  .mobile-menu nav a { font-size: 19px; }
}

@media (max-width: 1100px) {
  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 360px) {
  .header-inner { gap: 14px; }
  .brand { gap: 8px; }
  .brand-name { font-size: 15px; }
  .brand-mark { width: 30px; }
}

/* ============================================================
   HERO — split premium, foto integrada ao fundo
   ============================================================ */
.hero {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: clamp(560px, 92vh, 760px);
  padding-top: 88px;
  background: var(--color-bg);
  overflow: hidden;
}
.hero-copy-wrap {
  width: 46%;
  display: flex;
  align-items: center;
  padding: 40px clamp(24px, 4vw, 56px) 40px max(28px, calc((100vw - var(--max-width)) / 2 + 28px));
}
.hero-copy { max-width: 480px; }
.hero .eyebrow { margin-bottom: 18px; }
.hero h1 {
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.01em;
}
.hero h1 em { color: var(--color-green); font-style: italic; }
.hero .lead { font-size: 16.5px; max-width: 420px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 22px; }
.hero-meta { font-size: 13.5px; color: var(--color-ink-soft); letter-spacing: 0.01em; margin: 0; }

.hero-visual {
  position: relative;
  width: 54%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.hero-visual picture,
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-photo { object-fit: cover; object-position: 60% 15%; }
.hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-bg) 0%, rgba(245,246,242,0) 16%, rgba(245,246,242,0) 100%);
  pointer-events: none;
}

/* Entrada leve e independente de scroll/observer: roda automaticamente
   no carregamento via CSS puro. Sem JS, sem IntersectionObserver, sem
   opacity:0 permanente — se a animação não puder rodar por algum
   motivo, o estado de base (fora do keyframe) já é opacity:1. O bloco
   global de prefers-reduced-motion (topo do arquivo) já reduz a
   duração para ~0 quando aplicável. */
.hero-copy, .hero-visual {
  animation: hero-fade-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-visual { animation-delay: 0.08s; }
@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .hero-copy-wrap { padding-left: 28px; }
}

@media (max-width: 940px) {
  .hero {
    flex-direction: column;
    min-height: 0;
    padding-top: 96px;
  }
  .hero-copy-wrap {
    width: 100%;
    padding: 0 24px 32px;
    justify-content: center;
  }
  .hero-copy { max-width: 560px; text-align: center; margin: 0 auto; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  /* A foto vem antes do texto no mobile (ordem visual apenas — o DOM
     mantém o texto primeiro, então leitura/SEO/ordem de foco por
     teclado não mudam, já que a foto não tem nenhum elemento focável). */
  .hero-visual {
    order: -1;
    width: 100%;
    height: 42vh;
    height: 42svh;
    min-height: 320px;
    max-height: 460px;
  }
  .hero-gradient {
    background: linear-gradient(180deg, var(--color-bg) 0%, rgba(245,246,242,0) 14%, rgba(245,246,242,0) 100%);
  }
  /* Recorte mobile já enquadra cabeça + torso; sem o deslocamento
     usado no recorte vertical do desktop. */
  .hero-photo { object-position: 50% 18%; }
  /* CTA único dominante na primeira dobra: "Conhecer procedimentos"
     vira link textual discreto em vez de segundo botão. */
  .hero-secondary-action {
    background: none;
    border-color: transparent;
    box-shadow: none;
    padding: 6px 0;
    color: var(--color-ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .hero-secondary-action:hover {
    background: none;
    border-color: transparent;
    color: var(--color-green);
  }
}

@media (max-width: 640px) {
  .hero { padding-top: 84px; }
  .hero-copy-wrap { padding: 0 20px 28px; }
  .hero h1 { font-size: clamp(28px, 8vw, 36px); }
  .hero-visual { height: 38vh; height: 38svh; min-height: 290px; max-height: 400px; }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 340px;
    width: 100%;
    gap: 10px;
    margin: 22px auto 18px;
  }
  .hero-actions .btn { width: 100%; }
  .hero-actions .hero-secondary-action { width: auto; margin: 0 auto; }
}

@media (max-width: 360px) {
  .hero-visual { height: 36vh; height: 36svh; min-height: 260px; max-height: 340px; }
}

/* ============================================================
   PROVA DE AUTORIDADE — faixa escura de largura total
   ============================================================ */
.authority {
  padding: 34px 0;
  background: var(--color-dark);
}
.authority-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
}
.authority-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex: 1 1 220px;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,0.14);
}
.authority-item:first-child { padding-left: 0; border-left: none; }
.authority-index {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--color-sage);
  flex-shrink: 0;
}
.authority-item strong { display: block; font-size: 14px; color: #fff; font-weight: 700; }
.authority-item small { display: block; font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 2px; }

@media (max-width: 900px) {
  .authority-row { gap: 18px 24px; }
  .authority-item { flex: 1 1 44%; border-left: none; padding-left: 0; }
}
@media (max-width: 480px) {
  .authority-item { flex: 1 1 100%; }
}

/* ============================================================
   ABOUT
   ============================================================ */
/* Início mais próximo da faixa de autoridade: o respiro padrão da
   seção (112px) vira sobreposição da foto (ver .about-visual acima). */
.about { padding-top: 40px; }

.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 76px;
  align-items: center;
}
/* Composição assimétrica: a foto sobe e sobrepõe a faixa escura de
   autoridade logo acima, criando continuidade editorial entre as duas
   seções em vez de um corte seco. Um bloco sage deslocado atrás do
   quadro (não centralizado com ele) reforça a assimetria. */
.about-visual {
  position: relative;
  z-index: 2;
  margin-top: -120px;
}
.about-visual::before {
  content: '';
  position: absolute;
  top: 26px; left: -20px; right: -20px; bottom: -20px;
  background: var(--color-sage);
  border-radius: var(--radius-lg);
  z-index: -1;
}
.about-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  max-width: 440px;
}
.about-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
  background: var(--color-bg-alt);
}
.about-copy h2 { font-size: clamp(28px, 3.2vw, 38px); }
.about-highlights { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.about-highlights li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--color-ink); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-green); flex-shrink: 0; }

.about-institutional {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
  font-size: 14px;
  font-style: italic;
  color: var(--color-ink-soft);
}

.about-footer-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.about-registry {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-dark);
  background: var(--color-bg-alt);
  padding: 8px 14px;
  border-radius: 999px;
}
.lattes-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-green);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.lattes-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.lattes-link:hover { border-color: currentColor; }

@media (max-width: 940px) {
  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .about-visual { margin-top: -72px; }
  .about-visual::before { top: 16px; left: -14px; right: -14px; bottom: -14px; }
  .about-frame { max-width: 340px; margin: 0 auto; width: 100%; }
}

@media (max-width: 480px) {
  .about-visual { margin-top: -56px; }
  .about-frame { max-width: 280px; }
  .about-copy h2 { font-size: clamp(26px, 7vw, 32px); }
  .about-footer-row { justify-content: center; text-align: center; }
}

/* ============================================================
   PROCEDIMENTOS — seção escura, cards expansíveis
   ============================================================ */
/* Fundo em camadas: brilho radial sutil (profundidade) + overlay em
   gradiente (garante contraste AA do texto/cards por cima) + textura
   fotográfica abstrata (recorte desfocado/duotone da própria foto do
   hero — nunca a foto "reconhecível", só uma silhueta de fundo). Sem
   assets de terceiros, sem pacientes, sem before/after como pano de
   fundo. */
.procedures {
  position: relative;
  background:
    radial-gradient(760px 420px at 88% 0%, rgba(143,185,181,0.10), transparent 62%),
    linear-gradient(165deg, rgba(13,20,18,0.93) 0%, rgba(22,51,48,0.90) 130%),
    url('../assets/images/procedures-bg.jpg') center 18% / cover no-repeat,
    var(--color-dark);
  color: #fff;
  overflow: hidden;
}
.procedures-watermark {
  position: absolute;
  top: -8%;
  right: -6%;
  width: 46%;
  aspect-ratio: 0.79 / 1;
  background-image: url('../assets/images/logo-mark-white.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.05;
  pointer-events: none;
}
.section-heading { max-width: 640px; margin: 0 auto 48px; text-align: center; }
@media (max-width: 640px) {
  .section-heading { margin-bottom: 34px; }
}
.section-heading h2 { font-size: clamp(30px, 3.4vw, 42px); }
.section-sub { font-size: 16px; margin: 0; }
.section-heading.light .eyebrow { color: var(--color-sage); }
.section-heading.light h2 { color: #fff; }
.section-heading.light .section-sub { color: rgba(255,255,255,0.62); }

.procedures-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.procedure-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 26px 24px 24px;
  transition: background var(--transition), border-color var(--transition);
}
.procedure-card:hover { background: rgba(255,255,255,0.06); }
.procedure-index {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-sage);
}

/* Carrossel de 3 estados (Nome / Como funciona / O que pode
   proporcionar). Sem JS, os três estados aparecem empilhados e
   legíveis (nenhum ".procedure-controls" é exibido, pois não fariam
   nada) — ver a flag "js" adicionada em js/main.js. */
.procedure-slides { min-height: 96px; }
html.js .procedure-slides { display: grid; }
html.js .procedure-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
html.js .procedure-slide.is-active { opacity: 1; visibility: visible; }

.procedure-slide-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin: 0 0 8px;
}
.procedure-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: #fff; margin: 0; }
.procedure-complement { font-size: 13px; color: rgba(255,255,255,0.55); font-style: italic; margin: 4px 0 0; }
.procedure-slide-text { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.75); margin: 0; }

.procedure-controls { display: none; align-items: center; justify-content: center; gap: 14px; }
html.js .procedure-controls { display: flex; }
.procedure-arrow {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.procedure-arrow:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); }
.procedure-arrow .procedure-chevron { width: 15px; height: 15px; transform: rotate(-90deg); }
.procedure-arrow .procedure-chevron-prev { transform: rotate(90deg); }

.procedure-dots { display: flex; align-items: center; gap: 8px; }
.procedure-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.procedure-dot:hover { background: rgba(255,255,255,0.4); }
.procedure-dot.is-active { background: var(--color-sage); transform: scale(1.25); }

.procedure-cta { font-size: 13.5px; font-weight: 700; color: var(--color-sage); margin-top: auto; }
.procedure-cta:hover { text-decoration: underline; }

.procedures-disclaimer {
  max-width: 640px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 12.5px;
  color: rgba(255,255,255,0.5);
}
.results .procedures-disclaimer { color: var(--color-ink-soft); }

.cta-band {
  margin-top: 40px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.cta-band p { color: rgba(255,255,255,0.82); font-size: 17px; margin: 0 0 22px; line-height: 1.5; }

@media (max-width: 1040px) {
  .procedures-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
}

/* Mobile: 1 coluna, lista vertical — sem carrossel horizontal entre
   cards, cada card mantém seu próprio carrossel interno de 3 estados. */
@media (max-width: 640px) {
  .procedures-grid { grid-template-columns: 1fr; max-width: 420px; gap: 16px; }
  .procedure-card { padding: 22px 20px 20px; gap: 16px; }
  .procedure-name { font-size: 17px; }
  .cta-band { margin-top: 32px; padding-top: 28px; }
}

/* ============================================================
   RESULTADOS
   ============================================================ */
.results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.result-item {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--color-bg-alt);
  cursor: zoom-in;
  transition: transform var(--transition), box-shadow var(--transition);
}
.result-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.result-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .results-grid { grid-template-columns: 1fr; gap: 18px; max-width: 420px; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(9, 13, 12, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: min(880px, 92vw);
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}
.lightbox-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--transition);
}
.lightbox-close:hover { background: rgba(255,255,255,0.22); }
.lightbox-close svg { width: 20px; height: 20px; }

/* ============================================================
   JORNADA / EXPERIÊNCIA
   ============================================================ */
.journey { background: var(--color-dark); color: #fff; }
.journey-list {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  padding-left: 46px;
}
.journey-list::before {
  content: '';
  position: absolute;
  left: 16px; top: 6px; bottom: 6px;
  width: 1px;
  background: rgba(255,255,255,0.14);
}
.journey-step {
  position: relative;
  display: flex;
  gap: 22px;
  padding-bottom: 40px;
}
.journey-step:last-child { padding-bottom: 0; }
.journey-number {
  position: absolute;
  left: -46px;
  top: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-dark-alt);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--color-sage);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12.5px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.journey-step h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  font-size: 18px;
  margin-bottom: 6px;
}
.journey-step p { color: rgba(255,255,255,0.62); font-size: 14.5px; margin: 0; }

.journey-cta { margin-top: 52px; text-align: center; }

/* Timeline horizontal no desktop */
@media (min-width: 900px) {
  .journey-list {
    display: flex;
    padding-left: 0;
    gap: 0;
  }
  .journey-list::before {
    left: 0; right: 0; top: 17px; bottom: auto;
    width: auto; height: 1px;
  }
  .journey-step {
    flex: 1 1 0;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 0;
    padding-right: 20px;
  }
  .journey-step:last-child { padding-right: 0; }
  .journey-number { position: static; }
  .journey-step h3 { font-size: 16.5px; }
  .journey-step p { font-size: 13.5px; }
}

@media (max-width: 640px) {
  .journey-list { padding-left: 40px; }
  .journey-list::before { left: 14px; }
  .journey-number { left: -40px; width: 30px; height: 30px; font-size: 11.5px; }
  .journey-step { gap: 16px; padding-bottom: 30px; }
}

/* ============================================================
   DIFERENCIAIS — fundo escuro, 4 pilares
   ============================================================ */
.differentials { background: var(--color-bg-alt); }
.differentials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 28px;
}
.differential { border-top: 1px solid var(--color-line); padding-top: 24px; }
.differential-number {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-green);
  margin-bottom: 14px;
}
.differential h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 17px;
  color: var(--color-dark);
}
.differential p { font-size: 14px; margin: 0; color: var(--color-ink-soft); }

@media (max-width: 940px) {
  .differentials-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 26px; }
}

@media (max-width: 480px) {
  .differentials-grid { grid-template-columns: 1fr; gap: 26px; }
  .differential { padding-top: 20px; }
  .differential h3 { font-size: 16.5px; }
}

/* ============================================================
   CTA QUOTE
   ============================================================ */
.cta-quote {
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(143,185,181,0.14), transparent 60%),
    var(--color-dark);
  text-align: center;
  padding: 96px 0;
  position: relative;
}
.quote {
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.4vw, 38px);
  color: #fff;
  max-width: 780px;
  margin: 0 auto 42px;
  line-height: 1.35;
}
.quote::before {
  content: '\201C';
  display: block;
  font-family: var(--font-serif);
  font-size: 110px;
  line-height: 1;
  color: var(--color-sage);
  opacity: 0.35;
  margin-bottom: -30px;
}
.quote em { font-style: italic; color: var(--color-sage); }

@media (max-width: 640px) {
  .cta-quote { padding: 64px 0; }
  .quote { font-size: clamp(24px, 8vw, 32px); }
}

/* ============================================================
   REDES SOCIAIS
   ============================================================ */
.social { background: var(--color-bg-alt); }
.social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 40px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.social-card {
  margin: 0;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  box-shadow: var(--shadow-card);
  min-height: 180px;
  display: flex;
  align-items: center;
}
.social-card p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-dark);
  margin: 0;
}
.social-cta { display: flex; width: max-content; margin: 0 auto; }

@media (max-width: 780px) {
  .social-grid { grid-template-columns: 1fr; max-width: 480px; }
  .social-card { min-height: 0; }
}

/* ============================================================
   LOCALIZAÇÃO
   ============================================================ */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 60px;
  align-items: center;
}
.location-info h2 { font-size: clamp(28px, 3.2vw, 38px); }
.location-details { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.location-details li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 14px;
  font-size: 15px;
}
.location-details strong { display: inline-flex; align-items: center; gap: 6px; color: var(--color-dark); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.location-details span { color: var(--color-ink-soft); overflow-wrap: anywhere; }
.location-details a { color: var(--color-ink-soft); transition: color var(--transition); }
.location-details a:hover { color: var(--color-green); }
.location-actions { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }

.map-frame {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-line);
}
.map-frame iframe { width: 100%; height: 100%; display: block; filter: grayscale(0.15) contrast(1.02); }

@media (max-width: 940px) {
  .location-grid { grid-template-columns: 1fr; gap: 44px; }
  .map-frame { aspect-ratio: 16 / 10; }
}

@media (max-width: 640px) {
  .location-actions { flex-direction: column; align-items: stretch; }
  .location-actions .btn { width: 100%; }
}

@media (max-width: 420px) {
  .map-frame { aspect-ratio: 1 / 1.05; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--color-line);
}
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--color-dark);
  transition: color var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-green); }
.faq-item .procedure-chevron { flex-shrink: 0; width: 18px; height: 18px; color: var(--color-ink-soft); }
.faq-item[open] summary { color: var(--color-green); }
.faq-item[open] .procedure-chevron { transform: rotate(180deg); }
.faq-body { padding: 0 2px 24px; }
.faq-body p { margin: 0; max-width: 62ch; font-size: 15px; }

.faq-footer-note {
  text-align: center;
  margin: 36px auto 0;
  font-size: 15px;
}
.faq-footer-note a { color: var(--color-green); font-weight: 700; }
.faq-footer-note a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .faq-item summary { font-size: 15.5px; padding: 18px 2px; }
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.final-cta { background: var(--color-bg-alt); }
.final-cta-inner { text-align: center; max-width: 760px; margin: 0 auto; }
.final-cta-inner h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 16px; }
.final-cta-copy {
  max-width: 600px;
  margin: 0 auto 28px;
  color: var(--color-ink-soft);
  font-size: 16px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--color-dark-alt); color: rgba(255,255,255,0.75); padding-top: 64px; }
.footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand .brand-mark { width: 30px; }
.footer-brand strong { display: block; color: #fff; font-family: var(--font-serif); font-size: 17px; }
.footer-brand small { color: rgba(255,255,255,0.5); font-size: 12.5px; }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a, .footer-social a { font-size: 14px; color: rgba(255,255,255,0.7); transition: color var(--transition); }
.footer-links a:hover, .footer-social a:hover { color: var(--color-sage); }
.footer-social { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-social a { display: inline-flex; align-items: center; gap: 6px; }

.footer-bottom {
  padding: 26px 0 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}
.footer-bottom p { color: rgba(255,255,255,0.62); margin: 0; }
.footer-credit a { color: rgba(255,255,255,0.8); text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--color-sage); }

@media (max-width: 720px) {
  .footer-grid { flex-direction: column; text-align: center; }
  .footer-brand { flex-direction: column; align-items: center; text-align: center; }
  .footer-brand small { overflow-wrap: anywhere; }
  .footer-links, .footer-social { flex-wrap: wrap; justify-content: center; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* Quando a barra fixa mobile de WhatsApp está presente, reserva
   espaço no fim da página para não cobrir o rodapé. */
@media (max-width: 1100px) {
  .site-footer { padding-bottom: calc(var(--sticky-bar-height) + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   WHATSAPP — botão flutuante (desktop) / barra fixa (mobile)
   Nunca exibidos no mesmo breakpoint.
   ============================================================ */
.whatsapp-float {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sem "gap" fixo: com o label recolhido (max-width:0), um gap>0
     ainda reservaria espaço entre os itens do flex e distorceria o
     botão de círculo para oval. O respiro só entra quando o label
     expande (hover/focus), via margin-right no próprio label. */
  gap: 0;
  width: 54px;
  height: 54px;
  background: var(--color-green);
  color: #fff;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), background var(--transition), width var(--transition), border-radius var(--transition);
}
.whatsapp-float .icon-whatsapp { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; }
.whatsapp-float-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  transition: max-width var(--transition), margin var(--transition);
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  background: var(--color-green-dark);
  transform: translateY(-3px);
  width: auto;
  padding: 0 20px;
  border-radius: 999px;
}
.whatsapp-float:hover .whatsapp-float-label,
.whatsapp-float:focus-visible .whatsapp-float-label {
  max-width: 200px;
  margin-left: 10px;
}
.whatsapp-float.is-hidden { transform: translateY(120%); opacity: 0; pointer-events: none; }

.whatsapp-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  display: none;
  background: var(--color-green);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px -12px rgba(13,20,18,0.4);
  transition: transform var(--transition);
}
.whatsapp-sticky a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.whatsapp-sticky .icon-whatsapp { width: 20px; height: 20px; fill: currentColor; }
.whatsapp-sticky.is-hidden { transform: translateY(120%); }

@media (min-width: 1101px) {
  .whatsapp-sticky { display: none !important; }
}
@media (max-width: 1100px) {
  .whatsapp-float { display: none !important; }
  .whatsapp-sticky { display: block; }
}

/* ============================================================
   SCROLL REVEAL
   Visível por padrão: só fica oculto até a entrada em cena quando o
   JS confirma suporte a IntersectionObserver (classe "js-reveal" no
   <html>). Assim, conteúdo essencial nunca depende de JS para aparecer.
   ============================================================ */
.reveal { opacity: 1; transform: none; }
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
html.js-reveal .reveal.is-visible { opacity: 1; transform: none; }