/* =====================================================================
   CONCEITO.CSS — Ortero Implantes · Porto Alegre
   Grande Ideia: "Uma cirurgia que parece uma visita."
   Paleta: rosa #C4738A + ouro #B5923E sobre fundo claro/creme #FAF8F5
   Extraída do letreiro real: "Ortero. Implantes" em rosa/dourado
   sobre recepção clara — site CLARO e acolhedor (clima escuro
   contradiz "aconchego de um lar", que é a tese).
   Fontes: Cormorant Garamond (display, cálida e elegante) + Inter (corpo).
   ===================================================================== */

/* ── TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* Contrato base.css */
  --cor-fundo-1:    #FAF8F5;   /* creme quente — toda a página */
  --cor-fundo-2:    #F5EDE9;   /* toque rose para transição */
  --cor-fundo-3:    #FAF8F5;   /* mesmo creme no rodapé */
  --cor-destaque:   #C4738A;   /* rosa principal — extraído do letreiro */
  --cor-texto:      #2C1A1E;   /* quase-preto quente — máximo legível no claro */
  --cor-texto-soft: rgba(44,26,30,.62);

  --font-display:   'Cormorant Garamond', Georgia, serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nav-h:          72px;

  /* Tokens próprios */
  --rosa:       #C4738A;
  --rosa-deep:  #A85C74;
  --rosa-soft:  rgba(196,115,138,.14);
  --rosa-line:  rgba(196,115,138,.28);
  --ouro:       #B5923E;
  --ouro-soft:  rgba(181,146,62,.14);
  --ouro-line:  rgba(181,146,62,.28);
  --creme:      #FAF8F5;
  --creme-rose: #F5EDE9;
  --charcoal:   #2C1A1E;
  --charcoal-soft: rgba(44,26,30,.62);
  --charcoal-faint: rgba(44,26,30,.30);
  --hover-dur:  .2s;
}

/* ── RESET / BASE ────────────────────────────────────────────────────── */
html { background: var(--creme); }
body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: linear-gradient(180deg, var(--creme) 0%, var(--creme-rose) 50%, var(--creme) 100%);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* Tipografia */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.015em;
  font-optical-sizing: auto;
  line-height: 1.12;
}
.display em {
  font-style: italic;
  font-weight: 500;
  color: var(--rosa-deep);
}
.serif { font-family: var(--font-display); font-weight: 600; }

.eyebrow {
  display: inline-block;
  font-size: .70rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rosa-deep);
}

.grain { opacity: .032; }

/* ── CENÁRIO SCRIM — véu muito leve; o site é claro, fotos são claras ─ */
.cenario-scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  /* Quase invisível — mantém o ambiente quente das fotos sem escurecer */
  background: linear-gradient(180deg,
    rgba(250,248,245,.10) 0%,
    rgba(245,237,233,.08) 50%,
    rgba(250,248,245,.14) 100%);
}

/* ── NAV ─────────────────────────────────────────────────────────────── */
.nav {
  /* Transparente no hero (foto clara → nav com texto escuro) */
  background: transparent;
  color: var(--charcoal);
}
.nav.scrolled {
  background:      rgba(250,248,245,.94) !important;
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow:      0 4px 24px -10px rgba(44,26,30,.12);
  color: var(--charcoal);
}

/* Logo textual (Ortero não tem logotipo em arquivo — usa texto) */
.nav-logo-link {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -.01em;
}
.nav-logo-img { display: none; } /* sem arquivo de logo */
.nav-logo-text { display: inline; font-family: var(--font-display); }

/* Nav links */
.nav-links a { color: var(--charcoal); }

/* CTA da nav */
.nav-cta {
  background: var(--rosa);
  color: #FFFFFF;
  font-family: var(--font-body);
  letter-spacing: .01em;
}
.nav-cta:hover { background: var(--rosa-deep); }

/* ── BOTÃO WHATSAPP FLUTUANTE ─────────────────────────────────────────── */
.wa-float {
  position: fixed;
  bottom: clamp(20px, 4vh, 32px);
  right: clamp(20px, 4vw, 32px);
  z-index: 600;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px -8px rgba(37,211,102,.52);
  transition: transform var(--hover-dur), box-shadow var(--hover-dur);
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(37,211,102,.56); }

/* ── BOTÕES ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .88rem;
  padding: 14px 26px;
  min-height: 50px;
  transition: transform var(--hover-dur), background var(--hover-dur), box-shadow var(--hover-dur);
  cursor: pointer;
  border: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }

.btn-cta {
  background: var(--rosa);
  color: #FFFFFF;
  box-shadow: 0 8px 22px -8px rgba(196,115,138,.50);
}
.btn-cta:hover { background: var(--rosa-deep); box-shadow: 0 12px 28px -8px rgba(196,115,138,.58); }

.btn-outline {
  background: transparent;
  color: var(--charcoal);
  box-shadow: inset 0 0 0 1.5px var(--rosa-line);
}
.btn-outline:hover { background: var(--rosa-soft); }

.arrow { font-size: .9em; opacity: .75; }

/* ── HERO ────────────────────────────────────────────────────────────── */
.panel-hero {
  position: relative;
  overflow: hidden;
}

/* Ken Burns — CSS puro, NÃO scroll-linked */
@keyframes kb-ortero {
  from { transform: scale(1.02); }
  to   { transform: scale(1.19); }
}
.hero-kenburns {
  animation: kb-ortero 9s ease-in-out infinite alternate;
  background-position: 80% 30%; /* âncora à direita: letreiro inteiro em 375–390px */
}
@media (prefers-reduced-motion: reduce) {
  .hero-kenburns { animation: none !important; }
}

/* Scrim do hero — luz vem de BAIXO (onde o copy está), texto é escuro */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(250,248,245,.92) 0%,
    rgba(250,248,245,.65) 22%,
    rgba(250,248,245,.28) 48%,
    transparent 72%
  );
}

.hero-inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end;
  padding-bottom: clamp(48px, 8vh, 80px);
  padding-left: clamp(22px, 6vw, 72px);
  padding-right: clamp(22px, 6vw, 72px);
  padding-top: var(--nav-h);
}

.hero-copy { max-width: 700px; }

.hero-copy .eyebrow { margin-bottom: 14px; }

.hero-title {
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  color: var(--charcoal);
  margin-bottom: 20px;
}

.hero-sub {
  font-size: clamp(.96rem, 1.4vw, 1.15rem);
  color: var(--charcoal-soft);
  line-height: 1.65;
  max-width: 52ch;
  margin-bottom: 28px;
}

.hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center;
}

/* Seta de scroll down */
.hero-scrolldown {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 3;
}
.hero-scrolldown span {
  display: block; width: 22px; height: 22px;
  border-right: 2px solid var(--charcoal-faint);
  border-bottom: 2px solid var(--charcoal-faint);
  transform: rotate(45deg);
  animation: sd-bounce 1.8s ease-in-out infinite;
}
@keyframes sd-bounce {
  0%, 100% { opacity: .35; transform: rotate(45deg) translateY(-4px); }
  50%       { opacity: .70; transform: rotate(45deg) translateY(2px); }
}

/* ── SEÇÃO: A CENA QUE TU IMAGINAS ──────────────────────────────────── */
.cena-imaginada {
  position: relative; z-index: 2;
  padding: var(--section-pad) clamp(22px, 6vw, 72px);
  /* Translúcido sobre o cenário-âncora */
  background: rgba(250,248,245,.42);
}
.cena-imaginada-inner {
  max-width: 840px;
  margin: 0 auto;
}
.cena-imaginada .eyebrow { margin-bottom: 16px; }
.cena-imaginada-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--charcoal);
  margin-bottom: 22px;
}
.cena-imaginada-body {
  font-size: clamp(.94rem, 1.3vw, 1.05rem);
  color: var(--charcoal-soft);
  line-height: 1.72;
  margin-bottom: 28px;
  max-width: 62ch;
}
.cena-quote {
  position: relative;
  padding: 24px 28px 24px 40px;
  background: rgba(196,115,138,.08);
  border-left: 3px solid var(--rosa-line);
  border-radius: 0 12px 12px 0;
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.32rem);
  font-style: italic;
  color: var(--charcoal);
  line-height: 1.55;
}
.cena-quote footer {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: .78rem;
  font-style: normal;
  color: var(--charcoal-faint);
  letter-spacing: .04em;
}

/* ── SEÇÃO: A CENA QUE ACONTECE ─────────────────────────────────────── */
.cena-real {
  position: relative; z-index: 2;
  padding: var(--section-pad) clamp(22px, 6vw, 72px);
  background: rgba(245,237,233,.42);
}
.cena-real-inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 720px) {
  .cena-real-inner { grid-template-columns: 1fr; }
}
.cena-real-lead .eyebrow { margin-bottom: 16px; }
.cena-real-title {
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  color: var(--charcoal);
  margin-bottom: 18px;
}
.cena-real-body {
  font-size: clamp(.92rem, 1.25vw, 1.02rem);
  color: var(--charcoal-soft);
  line-height: 1.72;
}

/* Jornada visual: lista de passos */
.jornada { list-style: none; margin-top: 8px; }
.jornada li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--charcoal-faint);
  font-size: clamp(.90rem, 1.2vw, 1rem);
  color: var(--charcoal);
  line-height: 1.55;
}
.jornada li:last-child { border-bottom: none; }
.jornada-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--rosa-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  color: var(--rosa-deep);
}

/* ── SEÇÃO: QUEM TE RECEBE ───────────────────────────────────────────── */
.quemrecebe {
  position: relative; z-index: 2;
  padding: var(--section-pad) clamp(22px, 6vw, 72px);
  background: rgba(250,248,245,.45);
}
.quemrecebe-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.quemrecebe-head {
  margin-bottom: clamp(32px, 5vh, 56px);
}
.quemrecebe-head .eyebrow { margin-bottom: 14px; }
.quemrecebe-head h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  color: var(--charcoal);
}
.quemrecebe-lead {
  font-size: clamp(.93rem, 1.3vw, 1.06rem);
  color: var(--charcoal-soft);
  line-height: 1.68;
  max-width: 60ch;
  margin-top: 12px;
}

/* Grid de nomes — 5 cards, sem foto */
.equipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: clamp(16px, 3vw, 28px);
}
.equipe-card {
  background: rgba(250,248,245,.82);
  border: 1px solid var(--rosa-line);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 28px);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.equipe-initial {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rosa-soft), var(--ouro-soft));
  border: 1.5px solid var(--rosa-line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--rosa-deep);
  margin-bottom: 4px;
}
.equipe-nome {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.2;
}
.equipe-role {
  font-size: .72rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--rosa-deep);
  font-weight: 600;
}
.equipe-quote {
  font-size: .86rem;
  color: var(--charcoal-soft);
  line-height: 1.58;
  font-style: italic;
  border-top: 1px solid var(--rosa-line);
  padding-top: 10px;
  margin-top: 4px;
}

/* ── TRATAMENTOS — cabeçalho da seção [data-anel-3d] ────────────────── */
.tratamentos { position: relative; z-index: 2; }
.tratamentos-head {
  padding: var(--section-pad) clamp(22px, 6vw, 72px) clamp(24px, 4vh, 48px);
  max-width: 1080px;
  margin: 0 auto;
}
.tratamentos-head .eyebrow { margin-bottom: 14px; }
.tratamentos-head h2 {
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  color: var(--charcoal);
}

/* Cards do anel (fallback grid) — tema claro */
.trat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(14px, 2.5vw, 22px);
  padding: 0 clamp(22px, 6vw, 72px) var(--section-pad);
  max-width: 1320px;
  margin: 0 auto;
}
.trat-cell {
  position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 3/4; background: var(--creme-rose);
}
.trat-cell-destaque { grid-column: span 2; aspect-ratio: 2/1; }
@media (max-width: 620px) { .trat-cell-destaque { grid-column: span 1; aspect-ratio: 3/4; } }

.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(44,26,30,0) 40%, rgba(44,26,30,.72) 100%);
}
.trat-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(16px, 2.5vw, 24px);
  color: #FFFFFF;
}
.trat-label {
  display: block;
  font-size: .66rem; letter-spacing: .10em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin-bottom: 6px; font-weight: 600;
}
.trat-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700; color: #FFFFFF; line-height: 1.18; margin-bottom: 6px;
}
.trat-body p { font-size: .85rem; color: rgba(255,255,255,.82); line-height: 1.5; }

/* Anel counter override — tinta escura para site claro */
.anel-counter { color: var(--charcoal) !important; }

/* ── A CASA — seção camera-scene ─────────────────────────────────────── */
.acasa {
  position: relative; z-index: 2;
  height: 100svh; overflow: hidden;
  display: flex; align-items: flex-end;
}
.acasa .camera-layer {
  background-position: center 40%;
}
.acasa-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(250,248,245,.88) 0%,
    rgba(250,248,245,.45) 30%,
    rgba(250,248,245,.15) 60%,
    transparent 80%
  );
}
.acasa-inner {
  position: relative; z-index: 2;
  padding: clamp(40px, 7vh, 72px) clamp(22px, 6vw, 72px) clamp(56px, 9vh, 100px);
  max-width: 780px;
}
.acasa-inner .eyebrow { margin-bottom: 14px; }
.acasa-inner h2 {
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  color: var(--charcoal);
  margin-bottom: 18px;
}
.acasa-copy {
  font-size: clamp(.93rem, 1.3vw, 1.05rem);
  color: var(--charcoal-soft);
  line-height: 1.70;
  max-width: 58ch;
}

/* ── PROVA SOCIAL ────────────────────────────────────────────────────── */
.prova-social {
  position: relative; z-index: 2;
  background: var(--creme);
  padding: var(--section-pad) clamp(22px, 6vw, 72px);
}
.prova-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.prova-inner .eyebrow { margin-bottom: 14px; }
.prova-title {
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  color: var(--charcoal);
  margin-bottom: clamp(28px, 4vh, 48px);
}

/* Badge Google */
.prova-rating {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: clamp(32px, 5vh, 52px);
  flex-wrap: wrap;
}
.prova-rating-g { width: 24px; height: 24px; flex-shrink: 0; }
.prova-rating-num {
  font-size: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--charcoal);
}
.prova-rating-meta {
  display: flex; flex-direction: column; gap: 2px;
  font-size: .82rem; color: var(--charcoal-soft);
}
.prova-stars { font-size: 1rem; color: #FBBC05; letter-spacing: 2px; }

/* Grid de depoimentos */
.prova-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 2.5vw, 22px);
}
.prova-card {
  background: rgba(196,115,138,.06);
  border: 1px solid var(--rosa-line);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 28px);
}
.prova-card p {
  font-size: clamp(.88rem, 1.2vw, .98rem);
  color: var(--charcoal);
  line-height: 1.68;
  margin-bottom: 14px;
  font-style: italic;
}
.prova-card footer {
  font-size: .78rem;
  font-weight: 600;
  color: var(--rosa-deep);
}
.prova-card footer span { font-weight: 400; color: var(--charcoal-faint); }

/* ── CTA FINAL ───────────────────────────────────────────────────────── */
.cta-final {
  position: relative; z-index: 2;
  background: linear-gradient(135deg, var(--creme-rose) 0%, var(--creme) 100%);
  padding: var(--section-pad) clamp(22px, 6vw, 72px);
  text-align: center;
}
.cta-final-inner { max-width: 640px; margin: 0 auto; }
.cta-final-eyebrow { margin-bottom: 14px; }
.cta-final-title {
  font-size: clamp(1.75rem, 3.2vw, 2.8rem);
  color: var(--charcoal);
  margin-bottom: 18px;
}
.cta-final-sub {
  font-size: clamp(.92rem, 1.3vw, 1.04rem);
  color: var(--charcoal-soft);
  line-height: 1.68;
  margin-bottom: 32px;
}

/* ── RODAPÉ ──────────────────────────────────────────────────────────── */
.site-footer {
  position: relative; z-index: 2;
  background: var(--charcoal);
  padding: clamp(36px, 5vh, 56px) clamp(22px, 6vw, 72px);
}
.site-footer-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
}
.site-footer-logo {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 700;
  color: rgba(250,248,245,.90);
  letter-spacing: -.01em;
}
.site-footer-addr {
  font-size: .80rem;
  color: rgba(250,248,245,.55);
}
.site-footer-disclaimer {
  font-size: .72rem;
  color: rgba(250,248,245,.38);
  letter-spacing: .04em;
}