/* =====================================================================
   CONCEITO.CSS — Maria Tabarez · Harmonização Facial · Vexyon
   Paleta: grafite profundo (cool) + champagne suave + creme. Tom: natural-luxe.
   Tipografia: system serif editorial elegante + system sans.
   Carrega DEPOIS de base.css — tokens sobrescrevem os vazios do kit.
   ===================================================================== */

/* =====================================================================
   1. TOKENS (sobrescrevem base.css :root vazio)
   ===================================================================== */
:root {
  --cor-fundo-1:    #0e1213;   /* grafite profundo — cool neutral */
  --cor-fundo-2:    #181e20;   /* grafite médio — cool */
  --cor-fundo-3:    #ede8e0;   /* creme */
  --cor-destaque:   #c0a07a;   /* champagne suave */
  --cor-texto:      #ede8e0;   /* creme */
  --cor-texto-soft: rgba(237, 232, 224, 0.68);

  --font-display: "Palatino Linotype", Palatino, "Book Antiqua",
                  Georgia, "Times New Roman", serif;
  --font-body:    "Helvetica Neue", Helvetica, Arial,
                  "Liberation Sans", sans-serif;

  --nav-h: 72px;
  --section-pad: clamp(56px, 9vh, 120px);

  /* Componentes específicos do filme */
  /* --glass-bg e --glass-blur REMOVIDOS: .glass usa vidro-fumê fake (FIX A) */
  --glass-border: rgba(192, 160, 122, 0.20);
  --card-radius:  18px;
  --champagne:    #c0a07a;
  --carvao:       #1e2325;   /* grafite escuro — botão WA, avatares */
}

/* =====================================================================
   2. GRADIENTE DE FUNDO — grafite profundo cool (viaja com a página)
   ===================================================================== */
body {
  background: linear-gradient(180deg,
    var(--cor-fundo-1)  0%,
    var(--cor-fundo-2) 55%,
    var(--cor-fundo-1) 100%);
  font-family: var(--font-body);
  color: var(--cor-texto);
}

/* =====================================================================
   3. TIPOGRAFIA — classes utilitárias
   ===================================================================== */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.serif { font-family: var(--font-display); }

.eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 12px;
}

/* =====================================================================
   4. NAV
   ===================================================================== */
.nav {
  background: transparent;
}
.nav.scrolled {
  background: rgba(14, 18, 19, 0.88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(192, 160, 122, 0.14);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.nav-logo-img {
  height: 34px;
  width: auto;
  display: block;
  flex-shrink: 0;
  /* logo floral escuro sobre fundo grafite — inverte para ficar visível */
  filter: invert(1) brightness(0.9) sepia(0.15) hue-rotate(0deg);
  opacity: 0.88;
}
.nav-logo-text {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--cor-texto);
}
.nav-links a {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--cor-texto-soft);
}
.nav-links a:hover { color: var(--cor-texto); }
.nav-cta {
  background: var(--champagne);
  color: var(--cor-fundo-1);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 10px 20px;
}
.nav-cta:hover { opacity: 0.88; }

/* =====================================================================
   5. BOTÃO WHATSAPP FLUTUANTE
   ===================================================================== */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 600;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366; /* WhatsApp verde oficial */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.5),
              0 0 0 2px rgba(37, 211, 102, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float:hover {
  background: #1EBE5D;
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.6),
              0 0 0 2px rgba(37, 211, 102, 0.55);
}

/* =====================================================================
   6. JORNADA FILM — wrapper + sticky
   ===================================================================== */
#filmJornada {
  height: 1400vh;
  position: relative;
  z-index: 2;
}
#filmSticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

/* =====================================================================
   7. FILM-CARD — base (alto / medio)
   ===================================================================== */
.film-card {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
  will-change: opacity, transform;
  padding-top: var(--nav-h);
}
.film-card.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* =====================================================================
   8. COMPONENTE GLASS — vidro-fumê FAKE (sem backdrop-filter — FIX A)
   ===================================================================== */
.glass {
  background: linear-gradient(
    to bottom,
    rgba(14, 18, 19, 0.87) 0%,
    rgba(14, 18, 19, 0.81) 100%
  );
  border: 1px solid rgba(192, 160, 122, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(192, 160, 122, 0.10),
    0 16px 40px -8px rgba(0, 0, 0, 0.55);
  border-radius: var(--card-radius);
  padding: clamp(22px, 4vw, 42px);
}
.glass-divider {
  width: 36px; height: 1px;
  background: var(--champagne);
  opacity: 0.5;
  margin: 16px 0;
}

/* =====================================================================
   9. SEÇÃO 1 — HERO (â1 fachada)
   ===================================================================== */
.sec-hero {
  align-items: center;
  justify-content: center;
}
.hero-card {
  position: relative;
  width: fit-content;
  max-width: min(720px, 92vw);
  display: flex;
  align-items: flex-start;
  gap: clamp(22px, 2.6vw, 32px);
  overflow: hidden; /* retrato e glow ficam CONTIDOS no card — nada sangra pra fora */
}
/* Scrim de fundo (SÓ usado no mobile, onde a foto vira camada de fundo
   atrás do texto) — invisível/inerte no desktop. */
.hero-card-scrim {
  display: none;
}
.hero-card-text {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: clamp(250px, 30vw, 360px);
  min-width: 0;
}
.hero-brand {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--cor-texto);
  margin-bottom: 6px;
}
.hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: var(--champagne);
  margin-bottom: 14px;
}
.hero-sub {
  font-size: clamp(0.88rem, 1.5vw, 1rem);
  color: var(--cor-texto-soft);
  line-height: 1.55;
  max-width: 40ch;
  margin-bottom: 28px;
  font-style: italic;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-micro {
  font-size: 0.74rem;
  color: var(--cor-texto-soft);
  letter-spacing: 0.04em;
}

/* =====================================================================
   10. SEÇÃO 2 — ESPECIALIDADES (â2 recepção)
   ===================================================================== */
.sec-servicos {
  align-items: center;
  justify-content: center;
}
.servicos-wrap {
  width: min(96vw, 880px);
}
.servicos-head { margin-bottom: 20px; }
.servicos-head h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); }
.servicos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.servico-card {
  background: rgba(14, 18, 19, 0.76);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 16px 14px;
  transition: border-color 0.25s;
}
.servico-card:hover { border-color: rgba(192, 160, 122, 0.5); }
.servico-icon {
  width: 28px; height: 28px;
  stroke: var(--champagne);
  fill: none;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.servico-card h3 {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--cor-texto);
  margin-bottom: 4px;
  line-height: 1.25;
}
.servico-card p {
  font-size: 0.72rem;
  color: var(--cor-texto-soft);
  line-height: 1.45;
}

/* =====================================================================
   11. SEÇÃO 3 — MÉTODO (â3 corredor)
   ===================================================================== */
.sec-experiencia {
  align-items: center;
  justify-content: center;
}
.experiencia-card {
  max-width: 400px;
  width: calc(100% - 40px);
}
.experiencia-card h2 {
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  margin-bottom: 24px;
}
.pilar {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}
.pilar:last-child { margin-bottom: 0; }
.pilar-num {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--champagne);
  padding-top: 3px;
  flex-shrink: 0;
}
.pilar-body h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cor-texto);
  margin-bottom: 4px;
}
.pilar-body p {
  font-size: 0.78rem;
  color: var(--cor-texto-soft);
  line-height: 1.5;
}
.pilar-line {
  width: 1px;
  background: linear-gradient(to bottom, var(--champagne) 0%, transparent 100%);
  opacity: 0.3;
  margin: 4px 0;
}

/* =====================================================================
   12. SEÇÃO 4 — RESULTADOS (â4 porta da sala)
   6 composições INTEIRAS da Dra. Maria — NUNCA fatiar.
   object-fit:contain preserva 100% de cada composição.
   Footprint idêntico (mesma altura) em todos os slots.
   ===================================================================== */
.sec-resultados {
  align-items: center;
  justify-content: center;
}
.resultados-card {
  max-width: 820px;
  width: calc(100% - 40px);
  text-align: center;
}
.resultados-card h2 {
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  margin-bottom: 16px;
}

/* Grid 3×2 — 6 composições em 2 linhas de 3 */
.resultados-composicoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.composicao-slot {
  height: 220px;
  background: var(--carvao);
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  overflow: hidden;
  transition: transform 0.25s ease;
}
.composicao-slot:hover { transform: scale(1.025); }
.composicao-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* composição íntegra, sem crop */
  display: block;
}
.resultados-caption {
  font-size: 0.72rem;
  color: var(--cor-texto-soft);
  font-style: italic;
}

/* =====================================================================
   13. SEÇÃO 5 — QUEM CUIDA (â5 procedimento)
   ===================================================================== */
.sec-autoridade {
  align-items: center;
  justify-content: center;
}
.autoridade-card {
  max-width: 500px;
  width: calc(100% - 40px);
}
.autoridade-card h2 {
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  margin-bottom: 18px;
}
.clinico-placeholder {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-border);
}
.clinico-foto {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(192, 160, 122, 0.4);
  overflow: hidden;
  flex-shrink: 0;
}
.clinico-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.clinico-info h3 {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--cor-texto);
  margin-bottom: 2px;
}
.clinico-info p {
  font-size: 0.72rem;
  color: var(--cor-texto-soft);
  line-height: 1.45;
}

/* Missão verbatim — citação em itálico com borda champagne */
.missao-text {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--cor-texto-soft);
  line-height: 1.55;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-left: 2px solid rgba(192, 160, 122, 0.38);
  background: rgba(14, 18, 19, 0.35);
  border-radius: 0 8px 8px 0;
}

/* Stats de autoridade */
.autoridade-creds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.cred-item {
  background: rgba(20, 18, 16, 0.50);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.cred-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  font-weight: 400;
  color: var(--champagne);
  margin-bottom: 3px;
  line-height: 1.2;
}
.cred-label {
  display: block;
  font-size: 0.62rem;
  color: var(--cor-texto-soft);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* Vídeo autoral da Dra. — emoldurado, legenda neutra */
.dra-video-wrap {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  position: relative;
}
.dra-video-wrap video {
  width: 100%;
  aspect-ratio: 1 / 1;        /* vídeo é 720×720 — mostrar quadrado, rosto inteiro */
  height: auto;
  object-fit: cover;
  object-position: center 30%; /* foco no rosto, não na testa */
  display: block;
  background: var(--carvao);
}
.dra-video-legenda {
  display: block;
  font-size: 0.62rem;
  color: var(--cor-texto-soft);
  letter-spacing: 0.03em;
  padding: 6px 12px;
  background: rgba(14, 18, 19, 0.70);
  font-style: italic;
}

/* =====================================================================
   14. AVALIAÇÕES NO GOOGLE — film-card â5 (dentro da jornada, filme atrás)
   Cards creme flutuando; glass estreito → filme visível nas bordas.
   ===================================================================== */
.sec-avaliacoes {
  align-items: center;
  justify-content: center;
}
.avaliacoes-card {
  max-width: 840px;
  width: calc(100% - 40px);
}
.reviews-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.google-g-badge {
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.30));
}
.reviews-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reviews-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-soft);
}
.reviews-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reviews-rating-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--cor-texto);
  line-height: 1;
}
.reviews-stars-hdr {
  display: flex;
  gap: 2px;
  align-items: center;
}
.reviews-count {
  font-size: 0.76rem;
  color: var(--cor-texto-soft);
}
/* Grid de 3 cards — creme claro contrastando com site escuro */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.review-card {
  background: #f8f5ef;
  border-radius: 14px;
  padding: 20px 18px;
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.30);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.reviewer-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--av-color, #c0a07a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 700;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.reviewer-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.reviewer-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #202124;
  line-height: 1.3;
}
.review-date {
  font-size: 0.70rem;
  color: #70757a;
}
.review-stars {
  display: flex;
  gap: 2px;
}
.review-text {
  font-size: 0.78rem;
  color: #3c4043;
  line-height: 1.58;
  font-style: italic;
}
.ver-todas-link {
  display: block;
  text-align: center;
  font-size: 0.76rem;
  color: #4285F4;
  text-decoration: none;
  letter-spacing: 0.02em;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.ver-todas-link:hover { opacity: 1; text-decoration: underline; }

/* =====================================================================
   15. BOTÕES
   ===================================================================== */
.btn-primary {
  background: var(--champagne);
  color: var(--cor-fundo-1);
  box-shadow: 0 6px 18px -6px rgba(192, 160, 122, 0.5);
  font-weight: 700;
}
.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -6px rgba(192, 160, 122, 0.65);
}
.btn-lg {
  padding: 16px 36px;
  font-size: 1rem;
}

/* =====================================================================
   16. CTA LUMINOSO — film-card â6 (clímax do filme, dentro da jornada)
   ===================================================================== */
.sec-cta {
  align-items: center;
  justify-content: center;
}
.cta-card {
  max-width: 560px;
  width: calc(100% - 40px);
  text-align: center;
}
.cta-card .eyebrow { justify-self: center; }
.cta-title {
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  color: var(--cor-texto);
  margin-bottom: 14px;
}
.cta-sub {
  font-size: clamp(0.88rem, 1.5vw, 1.02rem);
  color: var(--cor-texto-soft);
  margin-bottom: 32px;
  line-height: 1.55;
}
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.btn-wa {
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  min-height: 52px;
}
.btn-wa:hover { background: #1EBE5D; transform: translateY(-2px); box-shadow: 0 12px 30px -6px rgba(0,0,0,0.5); }
.btn-wa svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
.cta-disclaimer {
  font-size: 0.68rem;
  color: var(--cor-texto-soft);
  opacity: 0.65;
  margin-top: 16px;
  line-height: 1.6;
}

/* =====================================================================
   17. FOOTER
   ===================================================================== */
.site-footer {
  position: relative;
  z-index: 2;
  padding: 28px clamp(20px, 5vw, 56px);
  border-top: 1px solid rgba(192, 160, 122, 0.10);
  text-align: center;
  background: var(--cor-fundo-1);
}
.site-footer p {
  font-size: 0.72rem;
  color: var(--cor-texto-soft);
  opacity: 0.5;
  letter-spacing: 0.04em;
}

/* =====================================================================
   18. REVEAL ANIMATIONS
   ===================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s ease 0.28s, transform 0.75s ease 0.28s;
}
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}
[data-fade] {
  opacity: 0;
  transition: opacity 0.7s ease 0.45s;
}
[data-fade].revealed {
  opacity: 1;
}
[data-stagger="1"] { transition-delay: 0.55s; }
[data-stagger="2"] { transition-delay: 0.70s; }
[data-stagger="3"] { transition-delay: 0.85s; }
[data-stagger="4"] { transition-delay: 1.00s; }
[data-stagger="5"] { transition-delay: 1.15s; }
[data-stagger="6"] { transition-delay: 1.30s; }

/* =====================================================================
   19. TIER BAIXO — fallback sem canvas
   ===================================================================== */
[data-tier="baixo"] #filmJornada {
  height: auto;
}
[data-tier="baixo"] #filmSticky {
  position: static;
  height: auto;
  overflow: visible;
}
[data-tier="baixo"] .film-card {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  opacity: 1 !important;
  pointer-events: auto;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: visible;
  padding-bottom: clamp(40px, 7vh, 80px);
}
[data-tier="baixo"] .film-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(14, 18, 19, 0.50) 0%,
    rgba(14, 18, 19, 0.78) 100%
  );
  pointer-events: none;
  z-index: 0;
}
[data-tier="baixo"] .glass {
  position: relative;
  z-index: 1;
}
[data-tier="baixo"] .sec-hero      { padding-left: clamp(20px, 6vw, 80px); padding-right: clamp(20px, 6vw, 80px); }
[data-tier="baixo"] .sec-servicos  { padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
[data-tier="baixo"] .sec-experiencia { padding-left: clamp(20px, 6vw, 80px); padding-right: clamp(20px, 6vw, 80px); justify-content: flex-start; }
[data-tier="baixo"] .sec-resultados  { padding-left: clamp(20px, 6vw, 80px); padding-right: clamp(20px, 6vw, 80px); }
[data-tier="baixo"] .sec-autoridade  { padding-left: clamp(20px, 6vw, 80px); padding-right: clamp(20px, 6vw, 80px); }
[data-tier="baixo"] .sec-avaliacoes  { padding-left: clamp(20px, 6vw, 80px); padding-right: clamp(20px, 6vw, 80px); }
[data-tier="baixo"] .sec-cta         { padding-left: clamp(20px, 6vw, 80px); padding-right: clamp(20px, 6vw, 80px); }
[data-tier="baixo"] .experiencia-card,
[data-tier="baixo"] .autoridade-card { max-width: 580px; }
[data-tier="baixo"] [data-reveal],
[data-tier="baixo"] [data-fade] { opacity: 1; transform: none; }

/* =====================================================================
   20. PREFERS-REDUCED-MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .film-card { transition: none; }
  [data-reveal], [data-fade] { transition: none; opacity: 1; transform: none; }
  .wa-float, .btn-primary, .btn-wa { transition: none; }
}

/* =====================================================================
   21. MOBILE 390px
   ===================================================================== */
@media (max-width: 500px) {
  .sec-hero { padding-bottom: 90px; }

  /* MOBILE — foto vira CAMADA DE FUNDO do card (atrás do texto).
     Rosto fica no topo (zona sem texto, sempre visível/nítido);
     texto ancorado embaixo, sobre scrim escuro (torso/blazer dela). */
  .hero-card {
    display: block;
    width: calc(100% - 32px);
    max-width: none;
    height: clamp(460px, 132vw, 560px);
    padding: 0;
  }
  .hero-card-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }
  .hero-portrait-glow,
  .hero-portrait-shadow { display: none; } /* modo fundo usa o scrim, não o glow flutuante */
  .hero-portrait-img {
    opacity: 0.92;
    filter: none;
    object-position: right center; /* doutora deslocada pra direita (CEO 2026-07-21) */
  }
  .hero-card-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    /* escurece o TOPO (onde entra o texto) + lateral esquerda; preserva o rosto dela (direita) nitido */
    /* SÓ gradiente lateral: escurece a ESQUERDA (texto), deixa o rosto (direita) e o TOPO livres (CEO 2026-07-21 — sem camada sobre o rosto) */
    background: linear-gradient(to right,
        rgba(12, 15, 16, 0.74) 0%,
        rgba(12, 15, 16, 0.36) 44%,
        rgba(12, 15, 16, 0.08) 66%,
        rgba(12, 15, 16, 0) 82%);
  }
  .hero-card-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    padding: clamp(24px, 6.5vw, 30px) clamp(20px, 6vw, 28px) 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
  }
  .hero-brand { font-size: 2rem; }

  .servicos-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .servicos-wrap { width: calc(100vw - 32px); }
  .sec-servicos { padding-bottom: 72px; }

  .sec-experiencia { justify-content: center; padding-right: 16px; }
  .experiencia-card { width: calc(100% - 32px); max-width: none; }

  .resultados-card { width: calc(100% - 32px); max-width: none; }
  .resultados-composicoes { grid-template-columns: 1fr; gap: 8px; }
  .composicao-slot { height: 200px; }

  .autoridade-card { width: calc(100% - 32px); max-width: none; }
  .sec-autoridade { padding-left: 16px; }
  .autoridade-creds { grid-template-columns: 1fr; }

  .reviews-grid  { grid-template-columns: 1fr; }
  .review-card   { padding: 16px 14px; }
  .avaliacoes-card { width: calc(100% - 24px); }
  .cta-card      { width: calc(100% - 32px); }
  .cta-title     { font-size: 1.8rem; }

  .wa-float { bottom: 22px; right: 18px; }
}

/* =====================================================================
   22. CLASSES UTILITÁRIAS ESPECÍFICAS DO TEMPLATE
   ===================================================================== */
.pilar-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.servicos-titulo {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  margin-bottom: 14px;
}
/* Linha de método fundida em Especialidades */
.metodo-resumo {
  font-size: 0.72rem;
  color: var(--cor-texto-soft);
  font-style: italic;
  line-height: 1.5;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(192, 160, 122, 0.12);
}
/* Estrelas do cabeçalho de avaliações (≠ .review-stars dos cards) */
.reviews-stars-hdr {
  display: flex;
  gap: 2px;
  align-items: center;
}

/* =====================================================================
   23. ESPECIALIDADES — HIERARQUIA ÂNCORAS vs SECUNDÁRIOS
   ===================================================================== */
.servicos-grid-ancora {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.servico-ancora {
  padding: 20px 16px;
  border-left: 2px solid var(--champagne);
}
.servico-ancora h3 {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--cor-texto);
  margin-bottom: 6px;
  line-height: 1.25;
}
.servico-ancora p {
  font-size: 0.78rem;
  color: var(--cor-texto-soft);
  line-height: 1.5;
}
.servico-ancora .servico-icon { width: 32px; height: 32px; margin-bottom: 10px; }
.servico-tag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--champagne);
  background: rgba(192, 160, 122, 0.12);
  border: 1px solid rgba(192, 160, 122, 0.3);
  border-radius: 100px;
  padding: 2px 8px;
  margin-bottom: 8px;
}
.servicos-sep {
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--glass-border) 20%, var(--glass-border) 80%, transparent 100%);
  margin: 12px 0 10px;
}
.servicos-grid-secundario {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.servico-secundario { padding: 12px 10px; }
.servico-secundario h3 {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--cor-texto);
  margin-bottom: 3px;
  line-height: 1.25;
}
.servico-secundario p { font-size: 0.66rem; color: var(--cor-texto-soft); line-height: 1.4; }
.servico-secundario .servico-icon { width: 22px; height: 22px; margin-bottom: 6px; }

@media (max-width: 600px) {
  .servicos-grid-secundario { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   24. SCRIM — Avaliações + Quem Cuida + CTA (filme atravessa, opacidade reduzida)
   ADENDO: NUNCA aumentar opacidade no portrait — compensar com text-shadow.
   ===================================================================== */
.sec-avaliacoes .glass {
  /* Mais leve que o .glass base (0.87) → filme visível nas bordas e atrás dos cards */
  background: linear-gradient(to bottom, rgba(14, 18, 19, 0.58) 0%, rgba(14, 18, 19, 0.52) 100%);
}
.sec-avaliacoes .reviews-label,
.sec-avaliacoes .reviews-rating-num,
.sec-avaliacoes .reviews-count {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.60);
}
.sec-autoridade .glass {
  background: linear-gradient(to bottom, rgba(14, 18, 19, 0.62) 0%, rgba(14, 18, 19, 0.58) 100%);
}
.sec-autoridade .glass h2,
.sec-autoridade .glass h3,
.sec-autoridade .glass p,
.sec-autoridade .glass .cred-num {
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}
.sec-cta .glass {
  background: linear-gradient(to bottom, rgba(14, 18, 19, 0.62) 0%, rgba(14, 18, 19, 0.58) 100%);
}
.sec-cta .glass h2,
.sec-cta .glass p { text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55); }
/* Dots do carrossel portrait — ocultos por padrão */
.resultados-dots { display: none; }

/* =====================================================================
   25. PORTRAIT MOBILE — compactação de cards + carrossel resultados
   ===================================================================== */
@media (orientation: portrait) and (max-width: 820px) {

  .sec-hero        { padding-left: 0; padding-bottom: 0; }
  .sec-servicos    { padding-bottom: 0; }
  .sec-experiencia { padding-right: 0; }
  .sec-autoridade  { padding-left: 0; }

  /* HERO — foto como camada de fundo do card (mesma regra do breakpoint 500px) */
  .hero-card {
    display: block;
    max-width: none;
    width: calc(100% - 32px);
    height: clamp(460px, 62vh, 620px);
    padding: 0;
  }
  .hero-card-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }
  .hero-portrait-glow,
  .hero-portrait-shadow { display: none; }
  .hero-portrait-img { opacity: 0.92; filter: none; object-position: right center; /* doutora pra direita (CEO 2026-07-21) */ }
  .hero-card-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    /* escurece TOPO (texto) + lateral esquerda; preserva o rosto dela (direita) */
    /* SÓ gradiente lateral: escurece a ESQUERDA (texto), deixa o rosto (direita) e o TOPO livres (CEO 2026-07-21 — sem camada sobre o rosto) */
    background: linear-gradient(to right,
        rgba(12, 15, 16, 0.74) 0%,
        rgba(12, 15, 16, 0.36) 44%,
        rgba(12, 15, 16, 0.08) 66%,
        rgba(12, 15, 16, 0) 82%);
  }
  .hero-card-text {
    position: absolute;
    left: 0; right: 0; top: 0;
    z-index: 2;
    width: 100%;
    padding: clamp(24px, 5vw, 32px) clamp(20px, 5vw, 30px) 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
  }

  /* Cota de altura: glass não pode exceder 84vh; scroll interno se precisar */
  .film-card .glass {
    max-height: 84vh;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .film-card .glass::-webkit-scrollbar { display: none; }

  /* B. ESPECIALIDADES compact */
  .servicos-grid-ancora { gap: 7px; margin-bottom: 7px; }
  .servico-ancora { padding: 12px 10px; }
  .servico-ancora .servico-icon { width: 24px; height: 24px; margin-bottom: 6px; }
  .servico-ancora .servico-tag  { font-size: 0.54rem; padding: 1px 6px; margin-bottom: 5px; }
  .servico-ancora h3 { font-size: 0.86rem; margin-bottom: 3px; }
  .servico-ancora p  {
    font-size: 0.7rem; line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .servicos-sep { margin: 7px 0; }
  .servicos-grid-secundario { grid-template-columns: 1fr 1fr; gap: 6px; }
  .servico-secundario {
    padding: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
  }
  .servico-secundario .servico-icon { width: 18px; height: 18px; margin-bottom: 0; flex-shrink: 0; }
  .servico-secundario h3 { font-size: 0.74rem; margin-bottom: 0; }
  .servico-secundario p  { display: none; }

  /* C. MÉTODO compact */
  .experiencia-card { width: calc(100% - 32px); }
  .experiencia-card h2 { font-size: 1.25rem; margin-bottom: 14px; }
  .pilar { gap: 10px; margin-bottom: 12px; }
  .pilar-body p {
    font-size: 0.73rem; line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* D. RESULTADOS — carrossel horizontal scroll-snap (6 composições) */
  .resultados-card { width: calc(100% - 24px); }
  .resultados-card h2 { font-size: 1.2rem; margin-bottom: 10px; }
  .resultados-composicoes {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    scrollbar-width: none;
    grid-template-columns: unset;
    margin-bottom: 10px;
  }
  .resultados-composicoes::-webkit-scrollbar { display: none; }
  .composicao-slot {
    flex-shrink: 0;
    width: 78vw;
    height: 52vh;
    scroll-snap-align: start;
  }
  .resultados-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-bottom: 8px;
  }
  .resultados-dots .dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(192, 160, 122, 0.28);
    transition: background 0.2s ease;
  }
  .resultados-dots .dot.ativo { background: rgba(192, 160, 122, 0.85); }
  .resultados-caption { font-size: 0.65rem; }

  /* E. QUEM CUIDA compact */
  .autoridade-card { width: calc(100% - 32px); }
  .autoridade-card h2 { font-size: 1.25rem; margin-bottom: 10px; }
  .clinico-placeholder { margin-bottom: 10px; padding-bottom: 10px; gap: 10px; }
  .clinico-foto { width: 52px; height: 52px; }
  .clinico-info h3 { font-size: 0.84rem; }
  .clinico-info p  { font-size: 0.69rem; line-height: 1.3; }
  .missao-text {
    font-size: 0.70rem; line-height: 1.4; margin: 0 0 10px; padding: 7px 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .autoridade-creds { grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 10px; }
  .cred-item { padding: 8px 6px; }
  .cred-num  { font-size: 0.88rem; }
  .cred-label { font-size: 0.56rem; line-height: 1.2; }
  .dra-video-legenda { font-size: 0.57rem; padding: 4px 8px; }

  /* F. AVALIAÇÕES GOOGLE compact (portrait) — glass leve, filme visível */
  .sec-avaliacoes { padding-left: 0; }
  .avaliacoes-card { width: calc(100% - 24px); }
  .reviews-header { gap: 10px; margin-bottom: 16px; }
  .reviews-grid { grid-template-columns: 1fr; gap: 8px; }
  .review-card { padding: 14px 12px; }
  .review-text {
    font-size: 0.72rem; line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* G. CTA LUMINOSO compact (portrait) */
  .sec-cta { padding-left: 0; }
  .cta-title { font-size: 1.6rem; margin-bottom: 10px; }
  .cta-sub { font-size: 0.84rem; margin-bottom: 20px; }

}

/* =====================================================================
   26. SCROLLDOWN INDICADOR NO HERO
   ===================================================================== */
.hero-scrolldown {
  position: absolute;
  bottom: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.45;
}
.hero-scrolldown span {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--champagne), transparent);
  animation: scrollline 2s ease-in-out infinite;
}
@keyframes scrollline {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scrolldown { display: none; }
}

/* =====================================================================
   27. HERO CARD PHOTO — retrato real da Dra. Maria Tabarez, DENTRO do card
   Coluna direita do hero-card (composição única, como o site próprio dela).
   Integração (LEI PADRAO-LUXO §103): glow quente + sombra de contato —
   tudo contido no card (.hero-card tem overflow:hidden), nada sangra pra fora.
   ===================================================================== */
.hero-card-photo {
  position: relative;
  flex: 0 0 auto;
  width: clamp(210px, 26vw, 290px);
  height: clamp(320px, 32vw, 400px);
  align-self: flex-start; /* topo casa com o eyebrow/título do texto ao lado */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero-portrait-glow {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 190%;
  height: 78%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(192, 160, 122, 0.40) 0%,
    rgba(192, 160, 122, 0.16) 44%,
    rgba(192, 160, 122, 0) 74%);
  filter: blur(26px);
  pointer-events: none;
}
.hero-portrait-shadow {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 78%;
  height: 10%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 78%);
  filter: blur(8px);
  pointer-events: none;
}
.hero-portrait-img {
  position: relative;
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,0.35));
}

/* =====================================================================
   FIX 2026-07-21 — chips secundários: garantir visíveis (a transição
   data-fade com delay longo ficava presa em opacity:0 quando o reveal
   disparava com o card-pai ainda invisível). Aparecem com o card.
   ===================================================================== */
.servico-secundario[data-fade] { opacity: 1 !important; transition: none !important; }

/* =====================================================================
   MOBILE HERO OVERRIDE (CEO 2026-07-21) — DEPOIS do bloco 27 (base
   desktop da foto) pra vencer a cascata. No mobile: foto = FUNDO do card,
   doutora deslocada pra DIREITA, rosto visível; texto no topo (scrim já
   ajustado nas media queries acima). Desktop NÃO afetado.
   ===================================================================== */
@media (max-width: 500px), (orientation: portrait) and (max-width: 820px) {
  .hero-card-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    align-self: stretch;
  }
  .hero-portrait-glow,
  .hero-portrait-shadow { display: none; }
  .hero-portrait-img {
    height: 88%;
    width: 66%;
    margin-left: auto; /* empurra a figura pra DIREITA */
    display: block;
    object-fit: contain;
    object-position: bottom right; /* doutora inteira, ancorada embaixo-direita, rosto visível */
    opacity: 1;
    filter: none;
    align-self: flex-end;
  }
}