/* =====================================================================
   CONCEITO.CSS — Clínica Blanche · Dra. Júlia Viero & Dra. Juliana Lima
   Porto Alegre · saúde • bem-estar • beleza

   Grande Ideia: "A clínica onde os outros profissionais vêm aprender."

   PALETA (extraída por conta-gotas dos pixels reais da recepção e do
   letreiro dourado — FASE 3.-1 do playbook; nunca de posts Canva):
     Creme:        #F5EFE6  (fundo da recepção / fundo geral)
     Preto:        #1A1A1A  (traje das doutoras / tipografia)
     Dourado:      #C9A84C  (letreiro "CLÍNICA BLANCHE" na parede)
     Dourado deep: #A37A20  (CTAs — contraste WCAG ≥3:1 sobre #FBF7F2)
     Carvão warm:  #2E2018  (texto corrido sobre fundo claro)

   TIPOGRAFIA (ui-ux-pro-max Result 2 "Luxury Serif" + brief "serifada
   clássica de traço fino"):
     Títulos: Cormorant Garamond — traço finíssimo, clássica, elegante
     Corpo:   Jost              — geométrica neutra, legível

   CLIMA: CLARO E LUXUOSO (proibido dark — contradiz "saúde•bem-estar•beleza")
   SCRIM: alpha global ≤.55; seções translúcidas .30–.45; halo local p/ texto.
   ===================================================================== */

/* ── TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* Contrato base.css */
  --cor-fundo-1:    #F5EFE6;  /* creme / recepção — topo da página */
  --cor-fundo-2:    #EDE3D5;  /* creme médio — transição */
  --cor-fundo-3:    #FAF7F3;  /* marfim — CTA/rodapé */
  --cor-destaque:   #C9A84C;  /* dourado do letreiro */
  --cor-texto:      #2E2018;  /* carvão warm para texto */
  --cor-texto-soft: rgba(46,32,24,.72);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Tokens próprios da marca */
  --dourado:        #C9A84C;
  --dourado-deep:   #A37A20;  /* CTAs — WCAG AA sobre branco */
  --dourado-soft:   rgba(201,168,76,.15);
  --dourado-line:   rgba(201,168,76,.35);
  --creme:          #F5EFE6;
  --creme-soft:     rgba(245,239,230,.38);
  --marfim:         #FBF7F2;
  --preto:          #1A1A1A;
  --carvao:         #2E2018;
  --carvao-soft:    rgba(46,32,24,.68);
  --carvao-faint:   rgba(46,32,24,.42);

  --hover-dur: .2s;
  --press-scale: .97;
}

/* ── BODY ────────────────────────────────────────────────────────────── */
html { background: var(--creme); }
body {
  font-family: var(--font-body);
  color: var(--carvao);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
a { color: inherit; text-decoration: none; }

/* ── UTILITÁRIOS ─────────────────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.012em;
  font-optical-sizing: auto;
}
.display em { font-style: italic; font-weight: 500; color: var(--dourado-deep); }
.serif   { font-family: var(--font-display); font-weight: 600; }
.eyebrow {
  display: inline-block; font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 600; color: var(--dourado-deep);
  font-family: var(--font-body);
}
.grain { opacity: .025; }

/* ── ORNAMENTO DOURADO — ícone-âncora entre seções (FASE 5 · F1.3) ─── */
.ornamento {
  display: block; text-align: center; margin: 0 auto;
  font-size: 1rem; color: var(--dourado); letter-spacing: .18em;
  opacity: .65;
  user-select: none; aria-hidden: true;
}

/* ── CENÁRIO SCRIM — véu creme/quente sobre frames da costura ──────────
   Alpha .38: scrim global abaixo de .55; a cena aparece através.
   Legibilidade nas seções translúcidas vem do HALO LOCAL (não daqui).
   ──────────────────────────────────────────────────────────────────── */
.cenario-scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(245,239,230,.42) 0%,
    rgba(245,239,230,.36) 50%,
    rgba(245,239,230,.40) 100%);
}

/* ── NAV ────────────────────────────────────────────────────────────── */
.nav {
  background: linear-gradient(180deg,
    rgba(245,239,230,.92) 0%, rgba(245,239,230,.60) 100%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(245,239,230,.97);
  border-color: var(--dourado-line);
  box-shadow: 0 4px 18px -10px rgba(46,32,24,.18);
}
.nav-logo-link { display: flex; align-items: center; }
.nav-logo-text {
  color: var(--preto); font-size: clamp(.9rem,2vw,1.05rem);
  letter-spacing: .04em;
}
.nav-cta {
  margin-left: auto; min-height: 40px; padding: 9px 20px; border-radius: 100px;
  font-size: .8rem; font-weight: 700;
  background: var(--dourado-deep); color: #FFFFFF;
  transition: transform var(--hover-dur), box-shadow var(--hover-dur);
}
.nav-cta:hover  { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(163,122,32,.5); }
.nav-cta:active { transform: scale(var(--press-scale)); }

/* ── BOTÕES ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 14px 26px; border-radius: 100px;
  font-weight: 700; font-size: .92rem; font-family: var(--font-body);
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  touch-action: manipulation;
}
.btn .arrow { font-size: .95em; }
.btn:active { transform: scale(var(--press-scale)) !important; }
.btn-cta {
  background: var(--dourado-deep); color: #FFFFFF;
  border: 1px solid var(--dourado-deep);
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(163,122,32,.5); }
.btn-outline-link {
  color: #FFFFFF; border: 1.5px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.10); backdrop-filter: blur(6px);
}
.btn-outline-link:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.9); transform: translateY(-1px); }

/* ── WHATSAPP FLUTUANTE ──────────────────────────────────────────────── */
.wa-float {
  position: fixed; z-index: 45;
  right: clamp(14px,3vw,22px); bottom: clamp(14px,3vw,22px);
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px -6px rgba(37,211,102,.55), 0 2px 8px rgba(0,0,0,.18);
  transition: transform .25s ease;
  animation: waPulse 3.2s ease-in-out infinite;
}
.wa-float:hover  { transform: translateY(-3px) scale(1.06); }
.wa-float:active { transform: scale(.94); }
@keyframes waPulse {
  0%,100% { box-shadow: 0 10px 28px -6px rgba(37,211,102,.55), 0 0 0 0 rgba(37,211,102,.35); }
  50%     { box-shadow: 0 10px 28px -6px rgba(37,211,102,.55), 0 0 0 10px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) { .wa-float { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════
   SEÇÃO 1 · HERO — FULL BLEED (regra FASE 3.7: NUNCA card flutuante).
   Foto 2240×3660 retrato = cover natural em qualquer viewport.
   Ken Burns CSS PURO: scale 1.02→1.19, 9s, prefers-reduced-motion.
   Copy sobreposta ao fundo, ancorada na base.
   Logo "CLÍNICA BLANCHE" na parede fica visível no topo do foto.
   ══════════════════════════════════════════════════════════════════════ */
.panel-hero {
  position: relative; z-index: 2;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: stretch;
}
/* inset: -4% 0 — sem extensão lateral (logo vai até x=99% da imagem; inset -4% lateral
   inflava o stage p/ 829px e o logo saía 22px do viewport). Desktop é irrelevante:
   display:none !important no breakpoint ≥1024px. */
.hero-camera-stage { position: absolute; inset: -4% 0; overflow: hidden; }

/* Ken Burns CSS PURO — nunca scroll-linked no hero (FASE 3.2a) */
@keyframes hero-kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.19); }
}
.hero-kenburns {
  position: absolute; inset: 0;
  /* OBRIGATÓRIO: .camera-layer define width:120% height:120%. Sem esse override,
     o kenburns teria 921px (120%×768) → background render em 921px → logo em
     x=425-912, câmera clipa em x=768 → 144px de logo cortado. */
  width: 100%; height: 100%;
  background-image: url('assets/hero-blanche-real.webp');
  background-size: cover;
  background-position: 52% 12%;  /* mantém logo no topo + ambas as doutoras */
  animation: hero-kenburns 9s ease-in-out infinite alternate;
  /* 96%: logo right a x=761 de 768px → a scale=1.19 fica em x=765 (dentro do viewport).
     camera-layer:width:120% + scale:1.19 empurraria logo right a x=1085 → cortado. */
  transform-origin: 96% 12%;
}
/* Mobile: âncora mais alta para preservar faces + logo no zoom (FASE 2b) */
@media (max-width: 500px) {
  .hero-kenburns {
    background-image: url('assets/hero-blanche-mobile.webp');
    transform-origin: 50% 18%;  /* regra cenario.css + brief */
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-kenburns { animation: none; transform: scale(1.05); }
}
html.no-webgl .hero-kenburns { animation: none; }

/* Scrim no hero: concentrado na base (onde fica o texto) */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(26,14,6,.05) 0%,
    rgba(26,14,6,.00) 28%,
    rgba(26,14,6,.08) 52%,
    rgba(26,14,6,.58) 76%,
    rgba(26,14,6,.88) 100%);
}
@media (max-width: 560px) {
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(26,14,6,.06) 0%,
      rgba(26,14,6,.00) 30%,
      rgba(26,14,6,.10) 54%,
      rgba(26,14,6,.64) 78%,
      rgba(26,14,6,.92) 100%);
  }
}

/* Copy zona — sobre o scrim */
.hero-inner {
  position: relative; z-index: 2; width: 100%;
  padding: 0 clamp(20px,6vw,56px) clamp(36px,6vh,62px);
  display: flex; flex-direction: column;
  align-items: center; gap: clamp(18px,3vh,26px);
  text-align: center;
}
.hero-copy { max-width: 660px; }
.hero-copy .eyebrow {
  margin-bottom: 14px; color: rgba(245,239,230,.85);
  text-shadow: 0 1px 12px rgba(10,6,2,.8);
}
.hero-title {
  font-size: clamp(1.9rem,6.8vw,3.2rem); line-height: 1.12; color: #FFFFFF;
  text-shadow: 0 2px 22px rgba(0,0,0,.42); margin: 0 0 14px;
}
.hero-title em { color: #EDD98C; }  /* dourado quente no hero escuro */
.hero-sub {
  font-size: clamp(.92rem,2.4vw,1.02rem); line-height: 1.65;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 14px rgba(10,6,2,.7);
  max-width: 54ch; margin: 0 auto 24px;
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}

/* Legenda das doutoras — ordem visual ESQUERDA→DIREITA (regra FASE 3.8) */
.hero-drs {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 18px;
  background: rgba(245,239,230,.14); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(245,239,230,.28);
  border-radius: 100px; padding: 10px 22px;
}
.hero-dr-item {
  font-size: .74rem; font-weight: 600; color: rgba(245,239,230,.95);
  letter-spacing: .04em; font-family: var(--font-body);
  text-shadow: 0 1px 10px rgba(10,6,2,.7);
}
.hero-dr-reg {
  display: inline; font-size: .65rem; font-weight: 500;
  color: rgba(237,217,140,.85); margin-left: 4px;
}
.hero-dr-sep { color: rgba(245,239,230,.45); font-size: .9rem; }
.hero-scrolldown {
  display: none; /* removido para não poluir — hero tem enough visual depth */
}

/* ══════════════════════════════════════════════════════════════════════
   SEÇÃO 2 · DUAS DOUTORAS — sobre cenário (cenário frame 0 — editorial)
   Seção translúcida alpha .38 (FASE 3.1 costura).
   ══════════════════════════════════════════════════════════════════════ */
.doutoras {
  position: relative; z-index: 5;
  padding: var(--section-pad) clamp(20px,6vw,64px);
  background: rgba(245,239,230,.38);
}
.doutoras-inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.doutoras-inner > .eyebrow { display: block; margin-bottom: 16px; }
.doutoras-inner > h2 {
  font-size: clamp(1.55rem,3.8vw,2.3rem); line-height: 1.22; color: var(--carvao);
  margin-bottom: 14px;
  text-shadow: 0 0 28px rgba(245,239,230,.85), 0 0 56px rgba(245,239,230,.6);
}
.doutoras-sub {
  max-width: 56ch; margin: 0 auto clamp(36px,5vh,52px);
  font-size: .96rem; line-height: 1.68; color: var(--carvao-soft);
}
.doutoras-grid {
  display: grid; gap: 24px; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .doutoras-grid { grid-template-columns: 1fr 1fr; } }

.doutora-card {
  background: rgba(251,247,242,.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--dourado-line);
  border-radius: 24px; padding: clamp(28px,3.6vw,40px) clamp(24px,3vw,36px);
  text-align: left; position: relative; overflow: hidden;
}
.doutora-card::before {
  /* ornamento decorativo canto superior */
  content: '✦'; position: absolute; top: 18px; right: 22px;
  font-size: .78rem; color: var(--dourado); opacity: .45;
}
.doutora-pos {
  display: inline-block; margin-bottom: 18px;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--dourado-deep); font-family: var(--font-body);
}
.doutora-nome {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem,2.8vw,1.75rem); color: var(--carvao);
  line-height: 1.15; margin-bottom: 12px;
}
.doutora-crm {
  font-size: .74rem; font-weight: 600; color: var(--dourado-deep);
  margin-bottom: 14px; letter-spacing: .03em;
}
.doutora-desc {
  font-size: .9rem; line-height: 1.62; color: var(--carvao-soft);
}

/* ══════════════════════════════════════════════════════════════════════
   SEÇÃO 3 · PROCEDIMENTOS — [data-anel-3d]. 10 serviços verbatim.
   Imagem onde disponível; CSS gradient brand nos slots sem foto real.
   ══════════════════════════════════════════════════════════════════════ */
.tratamentos {
  position: relative; z-index: 5;
  padding: var(--section-pad) clamp(20px,6vw,64px);
  background: var(--marfim);
}
.tratamentos-head {
  max-width: 780px; margin: 0 auto clamp(36px,5vh,56px);
  text-align: center;
}
.tratamentos-head .eyebrow { display: block; margin-bottom: 14px; }
.tratamentos-head h2 {
  font-size: clamp(1.5rem,3.6vw,2.2rem); line-height: 1.25; color: var(--carvao);
}

/* Fallback grid — o JS ativa o anel e esconde este (cenario.css faz) */
.trat-grid {
  display: grid; gap: 20px; max-width: 1300px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.trat-cell {
  position: relative; border-radius: 22px; overflow: hidden;
  aspect-ratio: 3/4; background: var(--creme);
  box-shadow: 0 8px 28px -14px rgba(46,32,24,.22);
}
.trat-cell-destaque { grid-column: span 2; aspect-ratio: 16/9; }
.trat-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.trat-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(26,14,6,0) 38%, rgba(26,14,6,.78) 100%);
}
.trat-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(16px,2.8vw,26px);
  color: #FFFFFF;
}
.trat-label {
  display: block; font-size: .63rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #EDD98C; margin-bottom: 8px;
}
.trat-body h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem,2.2vw,1.5rem); margin-bottom: 5px;
}
.trat-body p {
  font-size: .83rem; line-height: 1.5;
  color: rgba(255,255,255,.86); max-width: 38ch;
}
@media (max-width: 600px) {
  .trat-cell-destaque { grid-column: span 1; aspect-ratio: 4/3; }
}

/* Imagens de procedimentos (reaproveitadas + overlay de paleta creme/quente) */
.bg-hof     { background-image: url('assets/hero-blanche-real.webp'); background-position: 52% 18%; }
.bg-botox   { background-image: url('assets/botox-real.webp'); background-position: center 30%; background-size: cover; }
.bg-preen   { background-image: url('assets/preen-ia.webp'); background-position: center 30%; background-size: cover; }
.bg-labial  { background-image: url('assets/labial-ia.webp'); background-position: center 35%; background-size: cover; }
.bg-rino    { background-image: url('assets/rino-real.webp'); background-position: center 35%; background-size: cover; }
.bg-bio     { background-image: url('assets/bio-ia.webp'); background-position: center 30%; background-size: cover; }
.bg-ultra   { background-image: url('assets/ultra-ia.webp'); background-position: center; background-size: cover; }
.bg-lavieen { background-image: url('assets/lavieen-ia.webp'); background-position: center; background-size: cover; }
.bg-hipro   { background-image: url('assets/cursos-blanche-real.webp'); background-position: center 25%; }

/* Overlay creme quente — tratamento de paleta para imagens vindas de sites escuros.
   Clinica Living + Cristiane Gavião são dark (#14170F / #241610): sem este overlay
   a imagem fica fria e deslocada do contexto claro/dourado da Blanche.
   Aplica-se em ::before (camada entre background e o degradê escuro do ::after). */
.bg-botox::before,
.bg-rino::before,
.bg-bio::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(245, 239, 230, 0.22); /* creme #F5EFE6 @ 22% */
  z-index: 0;
}
/* Ono Clínica já tem paleta creme quente — overlay leve só por consistência */
.bg-ultra::before,
.bg-lavieen::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(245, 239, 230, 0.10);
  z-index: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   SEÇÃO 4 · RESULTADO NATURAL — depoimentos pacientes. Sobre cenário.
   ══════════════════════════════════════════════════════════════════════ */
.resultado-natural {
  position: relative; z-index: 5;
  padding: var(--section-pad) clamp(20px,6vw,64px);
  background: rgba(245,239,230,.35);
}
.resultado-inner { max-width: 1020px; margin: 0 auto; text-align: center; }
.resultado-inner > .eyebrow { display: block; margin-bottom: 14px; }
.resultado-inner > h2 {
  font-size: clamp(1.55rem,3.8vw,2.3rem); color: var(--carvao);
  margin-bottom: 14px; line-height: 1.22;
  text-shadow: 0 0 28px rgba(245,239,230,.9);
}
.resultado-sub {
  max-width: 54ch; margin: 0 auto clamp(32px,4vh,50px);
  font-size: .95rem; line-height: 1.68; color: var(--carvao-soft);
}
.resultado-grid {
  display: grid; gap: 20px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .resultado-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .resultado-grid { grid-template-columns: repeat(4, 1fr); } }

.dep-card {
  background: rgba(251,247,242,.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--dourado-line);
  border-radius: 20px; padding: 24px 22px; text-align: left;
}
.dep-card p {
  font-size: .88rem; line-height: 1.6; color: var(--carvao-soft);
  margin-bottom: 14px;
}
.dep-card footer {
  font-size: .8rem; font-weight: 700; color: var(--carvao);
}
.dep-card footer span { font-weight: 400; color: var(--carvao-faint); margin-left: 4px; }

/* ══════════════════════════════════════════════════════════════════════
   SEÇÃO 5 · A CASA — ambiente real com logo CLÍNICA BLANCHE visível.
   Background sólido (não translúcido) com fotos do interior.
   ══════════════════════════════════════════════════════════════════════ */
.a-casa {
  position: relative; z-index: 5;
  padding: var(--section-pad) clamp(20px,6vw,64px);
  background: var(--marfim);
}
.a-casa-inner { max-width: 1180px; margin: 0 auto; }
.a-casa-head { text-align: center; margin-bottom: clamp(32px,5vh,52px); }
.a-casa-head .eyebrow { display: block; margin-bottom: 14px; }
.a-casa-head h2 {
  font-size: clamp(1.5rem,3.6vw,2.2rem); color: var(--carvao);
  margin-bottom: 10px;
}
.a-casa-head p {
  max-width: 52ch; margin: 0 auto;
  font-size: .92rem; line-height: 1.65; color: var(--carvao-soft);
}
.a-casa-grid {
  display: grid; gap: 16px; grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .a-casa-grid { grid-template-columns: 2fr 1fr; } }
@media (min-width: 900px)  { .a-casa-grid { grid-template-columns: 2fr 1fr 1fr; } }

.casa-img {
  border-radius: 18px; overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 16px 40px -20px rgba(46,32,24,.22);
}
.casa-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.casa-nota {
  margin-top: 20px; text-align: center;
  font-size: .8rem; color: var(--carvao-faint); letter-spacing: .03em;
}

/* ══════════════════════════════════════════════════════════════════════
   SEÇÃO 6 · AQUI TAMBÉM SE ENSINA — eixo formação profissional.
   A seção que nenhum concorrente tem. Sobre cenário frame 1.
   ══════════════════════════════════════════════════════════════════════ */
.ensina {
  position: relative; z-index: 5;
  padding: var(--section-pad) clamp(20px,6vw,64px);
  background: rgba(245,239,230,.38);
}
.ensina-inner { max-width: 1180px; margin: 0 auto; }
.ensina-head { text-align: center; margin-bottom: clamp(36px,5vh,56px); }
.ensina-head .eyebrow { display: block; margin-bottom: 14px; }
.ensina-head h2 {
  font-size: clamp(1.55rem,3.8vw,2.3rem); color: var(--carvao);
  margin-bottom: 14px; line-height: 1.22;
  text-shadow: 0 0 28px rgba(245,239,230,.9);
}
.ensina-head > p {
  max-width: 62ch; margin: 0 auto;
  font-size: .96rem; line-height: 1.68; color: var(--carvao-soft);
}
.ensina-grid {
  display: grid; gap: clamp(24px,4vw,48px);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 780px) { .ensina-grid { grid-template-columns: 1fr 1fr; } }

.ensina-foto {
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 32px 64px -28px rgba(46,32,24,.35);
}
.ensina-foto img { width: 100%; display: block; }

.ensina-deps { display: flex; flex-direction: column; gap: 20px; }
.ensina-dep {
  background: rgba(251,247,242,.80);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--dourado-line); border-radius: 18px; padding: 22px 20px;
}
.ensina-dep p { font-size: .88rem; line-height: 1.62; color: var(--carvao-soft); margin-bottom: 10px; }
.ensina-dep footer { font-size: .8rem; font-weight: 700; color: var(--carvao); }
.ensina-dep footer span { font-weight: 400; color: var(--carvao-faint); }

/* ══════════════════════════════════════════════════════════════════════
   SEÇÃO 7 · PROVA SOCIAL — badge Google 5,0★/106 UMA vez. Depoimentos.
   ══════════════════════════════════════════════════════════════════════ */
.prova-social {
  position: relative; z-index: 5;
  padding: var(--section-pad) clamp(20px,6vw,64px);
  background: var(--creme);
}
.prova-inner { max-width: 1060px; margin: 0 auto; text-align: center; }
.prova-inner > .eyebrow { display: block; margin-bottom: 14px; }
.prova-title { font-size: clamp(1.5rem,3.6vw,2.15rem); color: var(--carvao); margin-bottom: 30px; }

/* Badge Google — aparece UMA VEZ (grep -c "5,0" = 1) */
.prova-rating {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 auto clamp(36px,5vh,52px);
  background: rgba(251,247,242,.92); border: 1px solid var(--dourado-line);
  border-radius: 100px; padding: 14px 28px;
  box-shadow: 0 8px 22px -12px rgba(46,32,24,.16);
}
.prova-rating-g { width: 26px; height: 26px; flex: 0 0 auto; }
.prova-rating-num { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; color: var(--carvao); }
.prova-rating-meta { display: flex; flex-direction: column; align-items: flex-start; font-size: .77rem; color: var(--carvao-soft); }
.prova-stars { color: var(--dourado-deep); letter-spacing: 2px; margin-bottom: 2px; }

.prova-grid { display: grid; gap: 20px; grid-template-columns: 1fr; text-align: left; }
@media (min-width: 720px) { .prova-grid { grid-template-columns: repeat(3, 1fr); } }

.prova-card {
  background: var(--marfim); border: 1px solid rgba(46,32,24,.08);
  border-radius: 20px; padding: 26px 24px;
}
.prova-card p { font-size: .9rem; line-height: 1.6; color: var(--carvao-soft); margin-bottom: 14px; }
.prova-card footer { font-size: .82rem; font-weight: 700; color: var(--carvao); }
.prova-card footer span { font-weight: 400; color: var(--carvao-faint); margin-left: 4px; }

/* ══════════════════════════════════════════════════════════════════════
   SEÇÃO 8 · CTA FINAL
   ══════════════════════════════════════════════════════════════════════ */
.cta-final {
  position: relative; z-index: 5;
  padding: var(--section-pad) clamp(20px,6vw,64px);
  background: linear-gradient(180deg, var(--creme) 0%, rgba(201,168,76,.12) 100%);
  text-align: center;
}
.cta-final-inner { max-width: 640px; margin: 0 auto; }
.cta-final-eyebrow { display: block; margin-bottom: 16px; }
.cta-final-title {
  font-size: clamp(1.6rem,4vw,2.5rem); line-height: 1.22;
  color: var(--carvao); margin-bottom: 16px;
}
.cta-final-sub {
  font-size: .96rem; line-height: 1.65; color: var(--carvao-soft); margin-bottom: 32px;
}

/* ── HERO FOTO COL — escondido no mobile, visível no desktop split ───── */
.hero-foto-col { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   HERO · DESKTOP SPLIT (≥1024px)
   Coluna esquerda: foto real com Ken Burns via <img> — logo e doutoras
   100% visíveis (sem camera-layer overflow que cortava "CLÍNICA BLANCHE").
   Coluna direita: copy sobre fundo creme, texto alinhado à esquerda.
   NOTA: 768px usa full-bleed (logo 634px não cabe em coluna de 354px).
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .panel-hero {
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
  }
  .hero-foto-col {
    display: block;
    position: relative;
    width: 46%;
    flex-shrink: 0;
    overflow: hidden;
  }
  .hero-foto-kenburns {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    animation: hero-kenburns 9s ease-in-out infinite alternate;
    transform-origin: center 38%;
  }
  .hero-foto-kenburns img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 38%;
    display: block;
  }
  /* Oculta o camera-stage do mobile — substituído pela coluna foto */
  .hero-camera-stage { display: none !important; }
  /* Scrim desnecessário: coluna copy tem fundo creme sólido */
  .hero-scrim { display: none; }
  /* Coluna copy */
  .hero-inner {
    flex: 1;
    background: var(--creme);
    padding: clamp(48px,7vh,80px) clamp(36px,5vw,72px);
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    width: auto;
  }
  .hero-copy { max-width: 500px; }
  .hero-copy .eyebrow { color: var(--dourado-deep); text-shadow: none; }
  .hero-title { color: var(--carvao); text-shadow: none; }
  .hero-title em { color: var(--dourado-deep); }
  .hero-sub {
    color: var(--carvao-soft); text-shadow: none; max-width: 46ch; display: block;
  }
  .hero-actions { justify-content: flex-start; }
  .btn-outline-link {
    color: var(--carvao);
    border-color: rgba(46,32,24,.28);
    background: rgba(245,239,230,.50);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .btn-outline-link:hover {
    background: rgba(46,32,24,.07);
    border-color: rgba(46,32,24,.50);
    color: var(--carvao);
  }
  .hero-drs {
    justify-content: flex-start;
    background: rgba(245,239,230,.72);
    border-color: var(--dourado-line);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    display: flex;
  }
  .hero-dr-item { color: var(--carvao); text-shadow: none; }
  .hero-dr-reg  { color: var(--dourado-deep); }
  .hero-dr-sep  { color: rgba(46,32,24,.28); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .hero-foto-kenburns { animation: none; transform: scale(1.04); }
}
html.no-webgl .hero-foto-kenburns { animation: none; }

/* ══════════════════════════════════════════════════════════════════════
   HERO · MOBILE + TABLET (≤1023px) — full-bleed
   Copy no TOPO (parede limpa) — rostos das doutoras ficam livres embaixo.
   Tablet (768px): WIDTH-constrained → logo x=355-761 dentro de 768px.
   Mobile (390px): bg-pos 100% mostra logo completo (x=295-1200 original).
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Remove inset lateral: camera-stage não extende além do viewport.
     Sem isso, o stage teria 829px → logo cortado 21px à direita no tablet. */
  .hero-camera-stage { inset: -4% 0; }
  .panel-hero { justify-content: flex-start; }
  .hero-inner {
    padding-top: clamp(68px, 9vh, 86px);
    padding-bottom: clamp(20px, 3vh, 30px);
    gap: 10px;
  }
  /* Subheadline e badge ocultos: texto curto no topo libera os rostos */
  .hero-sub  { display: none; }
  .hero-drs  { display: none; }
  /* Scrim pesado no TOPO (legibilidade), claro no meio (rostos visíveis) */
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(26,14,6,.72) 0%,
      rgba(26,14,6,.52) 22%,
      rgba(26,14,6,.14) 40%,
      rgba(26,14,6,.00) 56%,
      rgba(26,14,6,.00) 70%,
      rgba(26,14,6,.22) 86%,
      rgba(26,14,6,.42) 100%);
  }
  /* Ancoragem à direita: logo right em x=760 de 768px — bg-pos 100% mostra a borda direita.
     transform-origin definido na regra base (96% 12%); mobile ≤500px usa 50% 18% próprio. */
  .hero-kenburns { background-position: 100% 0%; }
}

/* ── RODAPÉ ─────────────────────────────────────────────────────────── */
.site-footer {
  position: relative; z-index: 5;
  background: var(--preto); padding: 34px clamp(20px,6vw,64px);
}
.site-footer-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px;
}
.site-footer-logo { color: #FFFFFF; font-size: .95rem; letter-spacing: .04em; }
.site-footer-addr { color: rgba(255,255,255,.55); font-size: .76rem; }
.site-footer-disclaimer { color: rgba(255,255,255,.38); font-size: .72rem; }