/* =====================================================================
   CONCEITO.CSS — Dra. Raquel Lourenço | Harmonização Facial · Porto Alegre
   Direção: LUXO EDITORIAL DE BELEZA (PADRAO-LUXO-ESTETICA.md) — NÃO o
   odonto repintado. Paleta NEW NATURE real da marca (bio/posts + emojis
   🌿✨🤎): creme/off-white + nude + mocha profundo + acento verde-sálvia
   + dourado fino + coral pontual (blazer). Mármore claro nos separadores.
   Composição: blocos full-height com FOTO DOMINANTE + respiro editorial.
   PROIBIDO anel-3D-de-cards (cara de odonto) — motor-anel-3d.js NEM é
   carregado neste site. Motor (base.css/cenario.css/motor-*.js) genérico,
   nada de cor/imagem daqui vive nele.
   Fontes: Fraunces (display, serif alto-contraste editorial) + Jost
   (corpo, sans clean fina, geométrica humanista).
   ===================================================================== */
:root {
  /* PALETA — NEW NATURE (real da marca: bio/posts + logo RL) */
  --cor-fundo-1:    #F8F2E7; /* creme/off-white — topo (hero por trás do scrim) */
  --cor-fundo-2:    #F1E4D0; /* nude — meio */
  --cor-fundo-3:    #E9DAC0; /* nude profundo — base/CTA */
  --cor-destaque:   #5B6647; /* verde-sálvia ESCURO — funcional (texto/link/ícone), 5.5:1 em creme */
  --cor-destaque-2: #B08B4F; /* dourado fino — DECORATIVO (divisores, badges, ícones), nunca texto pequeno */
  --cor-destaque-2-texto: #8A6A34; /* dourado escurecido — versão que PASSA contraste como texto (4.5:1) */
  --cor-texto:      #2C2019; /* mocha profundo quase-preto — texto principal, 14:1 em creme */
  --cor-texto-soft: rgba(44,32,25,.68);
  --cor-coral:      #C1573B; /* coral do blazer — acento pontual (aspas, numerais grandes) */
  --cor-marfim:     #FFFDF8;

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

  --anel-counter-ink: #2C2019; /* não usado (sem anel-3d), mantido por compatibilidade do kit */
}

.serif   { font-family: var(--font-display); }
.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -.008em; }
.eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cor-destaque); font-family: var(--font-body);
}

/* =====================================================================
   NAV — transparente sobre o hero, creme translúcido ao rolar
   ===================================================================== */
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo-badge {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  border: 1.4px solid var(--cor-destaque-2);
  display: grid; place-items: center;
  background: rgba(255,253,248,.5);
}
.nav-logo-badge span {
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: 1.02rem; color: var(--cor-texto); letter-spacing: -.01em;
}
/* Wordmark: CLARO por padrão (nav transparente sobre a foto escura do
   hero) — só vira mocha escuro quando .scrolled (fundo creme opaco).
   Sem isso o texto "Raquel Lourenço" some contra a foto (baixo contraste). */
.nav-logo-word { font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; color: var(--cor-marfim); line-height: 1.1; white-space: nowrap; letter-spacing: .01em; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.nav-logo-word small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,253,248,.82); }
.nav { mix-blend-mode: normal; }
.nav.scrolled {
  background: rgba(248,242,231,.88);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 24px -18px rgba(44,32,25,.35);
}
.nav.scrolled .nav-logo-word { color: var(--cor-texto); text-shadow: none; }
.nav.scrolled .nav-logo-word small { color: var(--cor-texto-soft); }
.nav.scrolled .nav-links a { color: var(--cor-texto); }
.nav-links a { color: var(--cor-marfim); font-weight: 500; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.nav.scrolled .nav-links a { text-shadow: none; }
.nav-cta { background: var(--cor-texto); color: var(--cor-marfim); font-family: var(--font-body); }
.nav-cta:hover { background: var(--cor-destaque); }

/* =====================================================================
   BOTÕES
   ===================================================================== */
.btn { font-family: var(--font-body); letter-spacing: .01em; }
.btn-primary { background: var(--cor-texto); color: var(--cor-marfim); box-shadow: 0 16px 32px -16px rgba(44,32,25,.5); }
.btn-primary:hover { background: var(--cor-destaque); transform: translateY(-1px); box-shadow: 0 20px 38px -14px rgba(91,102,71,.5); }
.btn-lg { padding: 19px 38px; font-size: 1.02rem; }

/* CTA outline com seta ↗ — assinatura do hero (AMRE) */
.btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 100px;
  font-weight: 600; font-size: .92rem; min-height: 50px;
  border: 1.4px solid rgba(255,253,248,.75);
  color: var(--cor-marfim); background: rgba(255,253,248,.06);
  backdrop-filter: blur(6px);
  transition: background .25s ease, transform .2s ease, border-color .25s ease;
}
.btn-outline:hover { background: rgba(255,253,248,.16); border-color: #fff; transform: translateY(-1px); }
.btn-outline .arrow { transition: transform .25s ease; }
.btn-outline:hover .arrow { transform: translate(2px,-2px); }

/* =====================================================================
   1. HERO — retrato de studio da Dra. (maps_owner_00), Ken Burns CSS
   puro 9s. Copy sobreposta com scrim radial, ancorada à esquerda/baixo
   (o rosto ocupa o centro-direita da foto).
   ===================================================================== */
.panel-hero { display: flex; align-items: flex-end; }
.hero-inner {
  position: relative; z-index: 2; width: 100%;
  max-width: 1320px; margin: 0 auto;
  padding: calc(var(--nav-h) + 24px) clamp(20px,5vw,56px) clamp(56px,9vh,96px);
}
.hero-copy { max-width: 620px; position: relative; color: var(--cor-marfim); }
.hero-copy::before {
  content: ''; position: absolute; inset: -32px -40px -28px -44px; z-index: -1;
  background: radial-gradient(120% 110% at 18% 55%,
    rgba(20,15,10,.86) 0%, rgba(20,15,10,.5) 52%, rgba(20,15,10,0) 100%);
  border-radius: 28px; pointer-events: none;
}
.hero-kicker { display: block; margin-bottom: 20px; color: var(--cor-destaque-2); text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.hero-title {
  font-size: clamp(2.5rem, 6.6vw, 4.6rem);
  font-weight: 400; font-style: italic;
  line-height: 1.06;
  color: var(--cor-marfim);
  margin-bottom: 24px;
  text-shadow: 0 2px 24px rgba(0,0,0,.28);
}
.hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(255,253,248,.88);
  max-width: 46ch;
  line-height: 1.62;
  margin-bottom: 32px;
  font-style: normal;
}
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-micro { font-size: .84rem; color: rgba(255,253,248,.82); font-weight: 500; }

/* Câmera do hero: Ken Burns CSS puro — roda em TODO aparelho, sem
   depender de scroll/Lenis/tier (régua CEO 2026-07-16: ~9s, 1.02→1.19). */
.hero-camera-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #2C2019; }
.hero-camera-stage .camera-layer {
  background-position: 58% 26%;
  transform-origin: 58% 30%;
  animation: hero-kenburns 9s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-camera-stage::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,15,10,.08) 0%, rgba(20,15,10,.06) 45%, rgba(20,15,10,.62) 100%);
  pointer-events: none;
}
@keyframes hero-kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.19); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-camera-stage .camera-layer { animation: none; transform: scale(1.04); }
}
/* Em viewport largo (cover recorta a ALTURA, não a largura, na foto
   quadrada) o canto superior-esquerdo com o monograma "RL" original da
   foto fica visível e, ampliado pelo Ken Burns, cria um círculo grande
   colidindo com o badge RL do nav. Empurra o enquadramento pra baixo
   só em telas largas (mobile já recorta esse canto pela largura). */
@media (min-width: 900px) {
  .hero-camera-stage .camera-layer { background-position: 62% 46%; transform-origin: 62% 46%; }
}
.hero-scrolldown {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2;
  width: 22px; height: 34px; border: 2px solid rgba(255,253,248,.7); border-radius: 100px;
}
.hero-scrolldown span { display: block; width: 4px; height: 8px; border-radius: 2px; background: var(--cor-marfim); margin: 6px auto 0; animation: scrolldown 1.8s ease-in-out infinite; }
@keyframes scrolldown { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(9px); opacity: .35; } }

@media (max-width: 600px) {
  .hero-camera-stage .camera-layer { background-position: 62% 22%; }
  .hero-inner { padding-top: calc(var(--nav-h) + 32px); }
  .hero-copy { max-width: 100%; }
}

/* =====================================================================
   2. MANIFESTO NEW NATURE — bloco full-height, foto editorial (ig_05,
   close "new nature") como fundo, quote grande sobreposta. É o
   DIFERENCIAL (ela não "enche rosto" — trata a estrutura).
   ===================================================================== */
.panel-manifesto {
  position: relative; min-height: 92svh; height: auto;
  display: flex; align-items: center;
  overflow: hidden;
}
.manifesto-camera-stage { position: absolute; inset: 0; z-index: 0; }
/* blur(): a fonte (ig_05) é a capa de um carrossel educativo com TEXTO
   embutido ("a região da área dos olhos…") — sem desfoque ele compete
   com a tipografia real da seção. Borrado vira textura/atmosfera pura
   (cor + luz), nunca um retrato/legenda — mantém a foto real como
   FUNDO, sem fingir que é outra coisa. */
.manifesto-camera-stage .camera-layer { background-position: center 55%; filter: blur(26px) saturate(1.05); }
.panel-manifesto::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(24,20,14,.8) 0%, rgba(24,20,14,.66) 45%, rgba(24,20,14,.86) 100%);
}
.manifesto-inner {
  position: relative; z-index: 2; max-width: 880px; margin: 0 auto;
  padding: var(--section-pad) clamp(20px,5vw,56px); text-align: center; color: var(--cor-marfim);
}
.manifesto-kicker { display: block; margin-bottom: 20px; color: var(--cor-destaque-2); }
.manifesto-pre { font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255,253,248,.92); margin-bottom: 28px; line-height: 1.5; font-weight: 400; }
.manifesto-quote {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.32; color: var(--cor-marfim);
  margin-bottom: 28px;
}
.manifesto-quote .quotemark { color: var(--cor-coral); font-style: normal; }
.manifesto-attr { display: block; font-size: .86rem; color: rgba(255,253,248,.78); font-weight: 600; letter-spacing: .03em; margin-bottom: 40px; }
.manifesto-bullets { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.manifesto-bullets span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 100px; font-size: .88rem; font-weight: 500;
  background: rgba(255,253,248,.1); border: 1px solid rgba(255,253,248,.3); color: var(--cor-marfim);
  backdrop-filter: blur(6px);
}
.manifesto-bullets svg { width: 14px; height: 14px; flex: none; color: var(--cor-destaque-2); }

/* =====================================================================
   3. TRANSFORMAÇÕES — 3 composições REAIS do autor (ig_00/ig_02/ig_11),
   INTEIRAS, sem slider — cada foto já é um antes|depois lado a lado
   num único retrato ~4:5 (PADRAO-LUXO-ESTETICA.md §7-8: composição do
   autor usada INTEIRA, nunca fatiada; card respeita o aspect-ratio
   REAL da foto). O <img> não recebe aspect-ratio forçado — width:100%
   + height:auto preserva a proporção NATIVA exata de cada arquivo
   (960×1200 / 1043×1300 / 962×1200), garantindo ZERO crop que corte
   rosto ou amplie o watermark da marca. Rótulo "Antes · Depois"
   discreto, FORA da foto.
   ===================================================================== */
.transf-head { max-width: 700px; margin: 0 auto 56px; text-align: center; }
.transf-head .sec-sub { margin-top: 14px; }
.transf-list { display: flex; flex-direction: column; gap: clamp(56px, 8vh, 96px); }
.transf-case { display: grid; gap: 32px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 940px) { .transf-case { grid-template-columns: .9fr 1.1fr; gap: 56px; } }
@media (min-width: 940px) { .transf-case.transf-rev { grid-template-columns: 1.1fr .9fr; } .transf-case.transf-rev .transf-photo-col { order: 1; } .transf-case.transf-rev .transf-copy { order: 2; } }

.transf-photo-col { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.transf-photo-frame {
  margin: 0; width: 100%; max-width: 460px;
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 40px 90px -32px rgba(44,32,25,.42);
  background: var(--cor-fundo-2);
  opacity: 1; /* estado default: sempre visível, mesmo sem GSAP/JS */
}
.transf-photo-frame img {
  display: block; width: 100%; height: auto; /* aspect-ratio nativo — sem crop */
}
.transf-label {
  display: flex; align-items: center; gap: 10px;
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cor-texto-soft);
}
.transf-label-depois { color: var(--cor-destaque); }
.transf-label-sep { width: 22px; height: 1px; background: rgba(91,102,71,.35); }

.transf-copy p { color: var(--cor-texto-soft); line-height: 1.68; font-size: 1rem; margin-bottom: 14px; }
.transf-quote {
  margin-top: 18px; padding: 18px 20px; border-left: 3px solid var(--cor-destaque-2);
  background: rgba(176,139,79,.08); border-radius: 0 14px 14px 0;
}
.transf-quote p { color: var(--cor-texto); font-style: italic; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.55; margin-bottom: 8px; }
.transf-quote span { font-size: .78rem; color: var(--cor-texto-soft); font-weight: 600; }
.transf-case-title { font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: var(--cor-texto); margin-bottom: 14px; line-height: 1.25; }

/* =====================================================================
   4. MÉTODO / ESPECIALIDADES — painel com textura de mármore + sombra
   botânica (IA dirigida, sem pessoas/texto, prompt do CONCEITO). Lista
   editorial numerada — as especialidades que ela CRAVA, verbatim.
   ===================================================================== */
.metodo-panel {
  position: relative; border-radius: 32px; overflow: hidden;
  max-width: 1180px; margin: 0 auto;
  background-image: url('assets/metodo-marmore-ia.webp');
  background-size: cover; background-position: center;
  box-shadow: 0 50px 100px -40px rgba(44,32,25,.35);
}
.metodo-panel::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(248,242,231,.86) 0%, rgba(248,242,231,.93) 100%);
}
.metodo-inner { position: relative; z-index: 2; padding: clamp(40px,6vw,80px) clamp(24px,5vw,64px); }
.metodo-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.metodo-list { display: flex; flex-direction: column; max-width: 820px; margin: 0 auto; }
.metodo-item {
  display: grid; grid-template-columns: auto 1fr; gap: 24px;
  padding: 26px 0; border-bottom: 1px solid rgba(91,102,71,.18);
}
.metodo-item:last-child { border-bottom: none; }
.metodo-num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.6rem,3vw,2.2rem); color: var(--cor-destaque-2-texto); line-height: 1; }
.metodo-item h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem,2vw,1.34rem); color: var(--cor-texto); margin-bottom: 8px; }
.metodo-item p { color: var(--cor-texto-soft); font-size: .95rem; line-height: 1.6; }

/* =====================================================================
   5. QUEM CUIDA — retrato real na clínica (ig_10, com diploma/estante —
   cobre a lacuna de "ambiente" sem seção própria) + card secundário da
   maratona (traço humano/disciplina).
   ===================================================================== */
.cuida-wrap { display: grid; gap: 44px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 940px) { .cuida-wrap { grid-template-columns: .92fr 1.08fr; gap: 60px; } }
.cuida-photo-frame {
  position: relative; border-radius: 26px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(44,32,25,.4);
  aspect-ratio: 3/4;
}
.cuida-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.cuida-card { padding: clamp(4px,1vw,10px) 0; }
.cuida-card p { color: var(--cor-texto-soft); line-height: 1.7; font-size: 1.02rem; margin-bottom: 16px; }
.cuida-quote {
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem,2.6vw,1.7rem);
  color: var(--cor-texto); line-height: 1.4; margin-bottom: 22px;
}
.cuida-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.cuida-stat { font-size: .78rem; font-weight: 600; padding: 8px 15px; border-radius: 100px; background: rgba(91,102,71,.09); color: var(--cor-destaque); border: 1px solid rgba(91,102,71,.24); }
.cuida-marathon {
  display: flex; align-items: center; gap: 16px; margin-top: 26px;
  padding: 16px 18px 16px 12px; border-radius: 20px;
  background: rgba(176,139,79,.08); border: 1px solid rgba(176,139,79,.26);
}
.cuida-marathon img { width: 66px; height: 82px; border-radius: 14px; object-fit: cover; flex: none; object-position: center 20%; }
.cuida-marathon p { font-size: .84rem; color: var(--cor-texto-soft); line-height: 1.5; margin: 0; }
.cuida-marathon strong { color: var(--cor-texto); }

/* =====================================================================
   6. PROVA SOCIAL — badge Google + reviews verbatim (ANTES do CTA)
   ===================================================================== */
.avaliacoes-section { text-align: center; }
.avaliacoes-badge {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 auto 14px;
  padding: 10px 20px; border-radius: 100px; background: rgba(255,253,248,.7);
  border: 1px solid rgba(91,102,71,.24); box-shadow: 0 14px 30px -22px rgba(44,32,25,.4);
}
.avaliacoes-badge svg { width: 22px; height: 22px; flex: none; }
.avaliacoes-number { font-size: clamp(2.6rem, 7vw, 4rem); color: var(--cor-texto); line-height: 1; margin: 6px 0 8px; font-weight: 400; font-family: var(--font-display); font-style: italic; }
.avaliacoes-stars { font-size: 1.15rem; color: var(--cor-destaque-2-texto); letter-spacing: .08em; margin-bottom: 44px; }
.avaliacoes-stars span { font-size: .92rem; color: var(--cor-texto-soft); font-weight: 500; margin-left: 8px; letter-spacing: normal; }
.depoimentos-grid { display: grid; gap: 18px; max-width: 1020px; margin: 0 auto; grid-template-columns: 1fr; text-align: left; }
@media (min-width: 700px) { .depoimentos-grid { grid-template-columns: repeat(2, 1fr); } }
.depoimento-card {
  background: var(--cor-marfim);
  border: 1px solid rgba(91,102,71,.16);
  border-radius: 20px; padding: 26px 26px;
  box-shadow: 0 20px 44px -32px rgba(44,32,25,.4);
}
.depoimento-card p { color: var(--cor-texto); font-size: .95rem; line-height: 1.62; margin-bottom: 14px; font-style: italic; }
.depoimento-card span { font-size: .8rem; color: var(--cor-destaque); font-weight: 600; }

/* =====================================================================
   7. CTA FINAL
   ===================================================================== */
.panel-cta {
  height: auto; min-height: 86svh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--section-pad) clamp(20px,5vw,56px);
  background: linear-gradient(180deg, var(--cor-fundo-2) 0%, var(--cor-fundo-3) 100%);
}
.cta-inner { position: relative; z-index: 2; max-width: 660px; margin: 0 auto; text-align: center; }
.cta-eyebrow { display: block; font-size: 1.15rem; color: var(--cor-texto); font-style: italic; margin-bottom: 18px; font-family: var(--font-display); font-weight: 400; }
.cta-title { font-size: clamp(2rem, 4.4vw, 2.9rem); color: var(--cor-texto); margin-bottom: 32px; line-height: 1.16; font-weight: 400; font-style: italic; }
.cta-micro { display: block; margin-top: 18px; font-size: .88rem; color: var(--cor-texto-soft); font-weight: 500; }
.cta-footer {
  margin-top: 52px; padding-top: 30px; border-top: 1px solid rgba(91,102,71,.2);
  display: flex; flex-direction: column; gap: 8px;
  font-size: .85rem; color: var(--cor-texto-soft);
}
.cta-footer .disclaimer { margin-top: 12px; font-size: .74rem; opacity: .75; }

/* =====================================================================
   Botão WhatsApp flutuante (canal de fechamento Vexyon)
   ===================================================================== */
.wa-float {
  position: fixed; z-index: 60; right: 20px; bottom: max(20px, env(safe-area-inset-bottom) + 14px);
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 12px 28px -8px rgba(37,211,102,.7), 0 4px 10px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wa-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 18px 34px -8px rgba(37,211,102,.85); }
@media (max-width: 600px) { .wa-float { right: 16px; bottom: max(16px, env(safe-area-inset-bottom) + 10px); width: 54px; height: 54px; } }

/* =====================================================================
   AURA — parallax nas fotos-retrato
   ===================================================================== */
.cuida-photo-frame img[data-parallax] { transform: scale(1.1); }

/* =====================================================================
   RESPONSIVO — ajustes finos
   ===================================================================== */
@media (max-width: 600px) {
  .transf-photo-frame { max-width: 320px; }
  .metodo-item { grid-template-columns: 1fr; gap: 8px; }
  .metodo-num { font-size: 1.3rem; }
  .cuida-marathon { flex-direction: column; align-items: flex-start; text-align: left; }
}