/* ============================================================
   CONCEITO — Lentes Dentais RS / VM Odontologia
   Paleta: #0C0B09 (near-black) · #C9A155 (ouro) · #F5F0E8 (marfim)
   Fontes: Playfair Display (display) · Inter (corpo)
   Derivada da identidade editorial da Dra. Verônica Zanella
   João VP Ops · 2026-07-31
   ============================================================ */

/* ── TOKENS ── */
:root {
  --cor-bg:        #0C0B09;
  --cor-bg-alt:    #141210;
  --cor-ouro:      #C9A155;
  --cor-ouro-escuro: #8B6F32;
  --cor-texto:     #F5F0E8;
  --cor-texto-soft:#B8B0A4;
  --cor-scrim:     rgba(12,11,9,.52);
  --r-card:        12px;
  --max-w:         1120px;
}

/* ── TIPOGRAFIA ── */
body {
  background: var(--cor-bg);
  color: var(--cor-texto);
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.8vw, 17px);
}
.display { font-family: 'Playfair Display', serif; }

/* ── NAV ── */
.nav { background: rgba(12,11,9,.0); backdrop-filter: blur(0px); transition: background .4s, backdrop-filter .4s; }
.nav.scrolled { background: rgba(12,11,9,.82); backdrop-filter: blur(14px); }
.nav-logo-text { font-family:'Playfair Display',serif; font-size:1.25rem; color:var(--cor-ouro); letter-spacing:.04em; font-weight:600; }
.nav-cta {
  background: var(--cor-ouro);
  color: #0C0B09;
  font-weight:700;
  border-radius:6px;
  padding:.55rem 1.4rem;
  font-size:.82rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition: background .2s, transform .15s;
}
.nav-cta:hover { background: #e0b865; transform: translateY(-1px); }

/* ── HERO ── */
.panel-hero {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}

/* Ken Burns — CSS puro, scroll-independent */
.hero-kenburns {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/hero-marcio-real.webp');
  background-size: cover;
  background-position: center 18%;
  animation: kbHero 9s ease-in-out infinite alternate;
  transform-origin: center 20%;
}
@media (max-width: 480px) {
  .hero-kenburns {
    background-image: url('assets/hero-marcio-mobile.webp');
    background-position: center top;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-kenburns { animation: none; }
}
@keyframes kbHero {
  0%   { transform: scale(1.02); }
  100% { transform: scale(1.19) translateY(-2%); }
}

/* Scrim do hero */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(12,11,9,.88) 0%,
    rgba(12,11,9,.45) 40%,
    rgba(12,11,9,.12) 70%,
    rgba(12,11,9,.05) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.5rem,5vw,3rem) clamp(3rem,7vh,5rem);
  width: 100%;
}
.hero-kicker {
  display: block;
  color: var(--cor-ouro);
  font-size: clamp(.68rem,.9vw,.8rem);
  letter-spacing:.18em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  font-weight: 500;
}
.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  line-height: 1.08;
  font-weight: 600;
  margin: 0 0 1.4rem;
  max-width: 780px;
}
.hero-sub {
  font-size: clamp(.95rem,1.5vw,1.15rem);
  color: var(--cor-texto-soft);
  max-width: 560px;
  line-height: 1.65;
  margin: 0 0 2.4rem;
}
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.hero-micro {
  font-size: .78rem;
  color: var(--cor-texto-soft);
  letter-spacing: .02em;
}

/* ── BOTÕES ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82rem;
  padding: .85rem 2rem;
  transition: background .2s, transform .15s, box-shadow .2s;
  text-decoration: none;
}
.btn-primary {
  background: var(--cor-ouro);
  color: #0C0B09;
}
.btn-primary:hover {
  background: #e0b865;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,161,85,.3);
}
.btn-ghost {
  border: 1.5px solid var(--cor-ouro);
  color: var(--cor-ouro);
  background: transparent;
}
.btn-ghost:hover { background: rgba(201,161,85,.08); transform: translateY(-2px); }

/* ── SEÇÕES ── */
.sec {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,3rem);
}
.sec-eyebrow {
  display: block;
  color: var(--cor-ouro);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1rem;
}
.sec-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem,4vw,3.2rem);
  line-height: 1.12;
  margin: 0 0 1.6rem;
  font-weight: 600;
}
.sec-body {
  font-size: clamp(.95rem,1.4vw,1.1rem);
  color: var(--cor-texto-soft);
  line-height: 1.75;
  max-width: 640px;
}

/* ── MANIFESTO ── */
.panel-manifesto {
  background: var(--cor-bg-alt);
  border-top: 1px solid rgba(201,161,85,.12);
  border-bottom: 1px solid rgba(201,161,85,.12);
  text-align: center;
}
.manifesto-frase {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem,4vw,2.8rem);
  line-height: 1.3;
  font-style: italic;
  font-weight: 500;
  max-width: 780px;
  margin: 0 auto;
  color: var(--cor-texto);
}
.manifesto-frase em { color: var(--cor-ouro); font-style: normal; }
.marquee-wrap {
  margin-top: 2.4rem;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #fff 15%, #fff 85%, transparent);
}
.marquee-track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
}
.marquee-track span {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cor-ouro);
  white-space: nowrap;
  font-weight: 600;
}

/* ── ANEL 3D / TRATAMENTOS ── */
.panel-tratamentos {
  background: var(--cor-bg);
}
.panel-tratamentos .sec { padding-bottom: 0; }
.anel-wrapper {
  margin-top: 3rem;
  padding-bottom: clamp(4rem,8vw,7rem);
}
.anel-card {
  background: var(--cor-bg-alt);
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid rgba(201,161,85,.1);
  transition: border-color .3s, transform .3s;
}
.anel-card:hover { border-color: rgba(201,161,85,.4); transform: translateY(-4px); }
.anel-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.anel-card-body { padding: 1.2rem 1.4rem 1.5rem; }
.anel-card-nome {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.anel-card-desc {
  font-size: .82rem;
  color: var(--cor-texto-soft);
  line-height: 1.55;
}

/* ── QUEM CUIDA ── */
.panel-quemcuida {
  background: var(--cor-bg-alt);
}
.quemcuida-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 3rem;
}
@media (max-width: 768px) {
  .quemcuida-grid { grid-template-columns: 1fr; gap: 3rem; }
}
.qc-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.qc-foto {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--r-card);
  object-position: center top;
  display: block;
}
.qc-jaleco { object-position: center 20%; aspect-ratio: 4/3; }
.qc-corpo { padding: 1.8rem 0 0; }
.qc-eyebrow {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cor-ouro);
  font-weight: 600;
  margin-bottom: .5rem;
}
.qc-nome {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 600;
  margin-bottom: .4rem;
  line-height: 1.2;
}
.qc-titulo {
  font-size: .85rem;
  color: var(--cor-ouro);
  font-weight: 500;
  margin-bottom: 1rem;
}
.qc-bio {
  font-size: .9rem;
  color: var(--cor-texto-soft);
  line-height: 1.7;
}
.qc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.1rem;
}
.chip {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid rgba(201,161,85,.3);
  border-radius: 20px;
  padding: .3rem .85rem;
  color: var(--cor-ouro-escuro);
  font-weight: 600;
  color: var(--cor-ouro);
}

/* ── CASOS REAIS ── */
.panel-casos { background: var(--cor-bg); }
.casos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 640px) { .casos-grid { grid-template-columns: 1fr; } }
.caso-item {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid rgba(201,161,85,.1);
}
.caso-item img {
  width: 100%;
  display: block;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform .5s ease;
}
.caso-item:hover img { transform: scale(1.04); }
.caso-label {
  padding: .9rem 1.2rem;
  background: var(--cor-bg-alt);
  font-size: .78rem;
  color: var(--cor-texto-soft);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── PROVA SOCIAL ── */
.panel-prova {
  background: var(--cor-bg-alt);
  border-top: 1px solid rgba(201,161,85,.1);
}
.prova-badge {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background: rgba(201,161,85,.08);
  border: 1px solid rgba(201,161,85,.25);
  border-radius: 40px;
  padding: .7rem 1.6rem;
  margin-bottom: 3rem;
}
.prova-badge-stars { color: var(--cor-ouro); font-size: 1.1rem; letter-spacing: .1em; }
.prova-badge-txt { font-size: .88rem; font-weight: 600; color: var(--cor-texto-soft); }
.prova-badge-txt strong { color: var(--cor-texto); }
.depoimentos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
@media (max-width: 860px) { .depoimentos-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .depoimentos-grid { grid-template-columns: 1fr; } }
.dep-card {
  background: var(--cor-bg);
  border: 1px solid rgba(201,161,85,.1);
  border-radius: var(--r-card);
  padding: 1.5rem;
}
.dep-stars { color: var(--cor-ouro); font-size: .9rem; margin-bottom: .8rem; letter-spacing:.1em; }
.dep-texto {
  font-size: .88rem;
  line-height: 1.7;
  color: var(--cor-texto-soft);
  margin-bottom: 1rem;
  font-style: italic;
}
.dep-autor {
  font-size: .78rem;
  font-weight: 700;
  color: var(--cor-ouro);
  letter-spacing: .04em;
}

/* ── AMBIENTE ── */
.panel-ambiente { background: var(--cor-bg); }
.ambiente-img {
  width: 100%;
  border-radius: var(--r-card);
  display: block;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: center;
  margin-top: 2.5rem;
}
@media (max-width: 640px) { .ambiente-img { aspect-ratio: 4/3; } }

/* ── CTA FINAL ── */
.panel-cta {
  background: var(--cor-bg);
  text-align: center;
  border-top: 1px solid rgba(201,161,85,.1);
}
.cta-pre { color: var(--cor-ouro); font-size: .78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; margin-bottom: 1.2rem; }
.cta-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem,4.5vw,3.4rem);
  line-height: 1.12;
  margin-bottom: 1.4rem;
  font-weight: 600;
}
.cta-sub { color: var(--cor-texto-soft); font-size:1rem; line-height:1.65; max-width:520px; margin: 0 auto 2.5rem; }
.cta-actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:1.2rem; margin-bottom:3rem; }
.cta-info {
  font-size: .82rem;
  color: var(--cor-texto-soft);
  line-height: 1.9;
}
.cta-info a { color: var(--cor-ouro); text-decoration: none; }
.cta-info a:hover { text-decoration: underline; }

/* ── RODAPÉ ── */
.site-footer {
  background: var(--cor-bg-alt);
  border-top: 1px solid rgba(201,161,85,.08);
  padding: 2rem clamp(1.5rem,5vw,3rem);
  text-align: center;
}
.footer-disclaimer {
  font-size: .72rem;
  color: rgba(245,240,232,.3);
  letter-spacing: .06em;
}

/* ── WA FLOAT ── */
.wa-float {
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  z-index: 900;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.4);
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(37,211,102,.55); }

/* ── PARALLAX retrato ── */
[data-parallax] { will-change: transform; }

/* ── GRAIN ── */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px;
}

/* ── FADE REVEALS ── */
[data-fade] { opacity: 0; transform: translateY(20px); }
[data-fade].is-visible { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
.split-line { overflow: hidden; }
.split-line .line-inner { transform: translateY(100%); transition: transform .7s cubic-bezier(.22,1,.36,1); }
.split-line.is-visible .line-inner { transform: none; }

/* ── TELA BAIXA ── */
@media (max-height: 850px) and (orientation: portrait) {
  .panel-hero { min-height: 100svh; align-items: flex-end; }
}

/* ── MOBILE ── */
@media (max-width: 480px) {
  .hero-title { font-size: clamp(2rem, 9vw, 3rem); }
}