/* ============================================================
   LP.CSS v1 — Landing Pages de Tratamento | Melo Clinic
   Estrutura: Hero / Pain / What / Why / Steps / FAQ / CTA
   ============================================================ */

/* ---- LP HERO ---- */
.lp-hero {
  min-height: 100vh;
  background: var(--grad-hero);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,146,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,146,42,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 30% 50%, black 0%, transparent 100%);
  pointer-events: none;
}
.lp-hero-inner {
  max-width: 1380px;
  margin: 0 auto;
  padding: 120px 48px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: rgba(201,146,42,0.12);
  border: 1px solid rgba(201,146,42,0.28);
  color: var(--gold-light);
  margin-bottom: 20px;
}
.lp-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: lp-pulse 2s infinite;
}
@keyframes lp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
/* movimento infinito para quem pediu menos movimento no sistema (04/08/2026).
   Parar aqui e seguro: o estado base do ponto ja e opacidade 1.
   Esta e a UNICA regra desse tipo no lp.css, que as 9 paginas de tratamento
   carregam. (Redacao proposital: sem repetir o nome da media query no
   comentario, para um grep de contagem nao ler 2 regras onde ha 1.) */
@media (prefers-reduced-motion: reduce) {
  .lp-eyebrow-dot { animation: none; }
}
.lp-h1 {
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: clamp(34px, 4.5vw, 60px);
  font-weight: 700;
  color: var(--cream);
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 20px;
  text-wrap: balance;
}
.lp-h1 em {
  font-style: italic;
  color: var(--gold-light);
}
.lp-hero-sub {
  font-size: 18px;
  color: rgba(245,240,232,0.62);
  line-height: 1.7;
  margin-bottom: 28px;
  text-wrap: pretty;
}
.lp-hero-benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}
.lp-hero-benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(245,240,232,0.78);
}
.lp-hero-benefit-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(201,146,42,0.18);
  border: 1px solid rgba(201,146,42,0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold);
}
.lp-hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.lp-trust {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(201,146,42,0.15);
}
.lp-trust-item {
  font-size: 11px;
  color: rgba(245,240,232,0.40);
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.3px;
}
.lp-trust-item strong {
  display: block;
  font-size: 17px;
  color: var(--gold-light);
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 2px;
}

/* Hero visual */
.lp-hero-visual {
  position: relative;
}
.lp-hero-img {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.lp-hero-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.88) saturate(0.9);
}
.lp-hero-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(52,60,92,0.25) 0%, transparent 60%);
}
.lp-hero-badge {
  position: absolute;
  bottom: -16px;
  left: 24px;
  background: var(--navy);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.lp-hero-badge strong {
  display: block;
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: 2px;
}
.lp-hero-badge span {
  font-size: 11px;
  color: rgba(245,240,232,0.45);
  letter-spacing: 0.5px;
}

/* ---- SECTION BASE ---- */
.lp-section { padding: 96px 0; }
.lp-section-inner {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 48px;
}
.lp-sec-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  display: block;
}
.lp-h2 {
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  text-wrap: balance;
}
.lp-h2 em { font-style: italic; color: var(--gold-light); }
.lp-sec-sub {
  font-size: 17px;
  line-height: 1.75;
  text-wrap: pretty;
  max-width: 560px;
}

/* ---- PAIN SECTION ---- */
.lp-pain { background: #ffffff; color: var(--text-dark); }
.lp-pain-header { text-align: center; margin-bottom: 52px; }
.lp-pain-header .lp-sec-eyebrow { color: var(--gold-dark); }
.lp-pain-header .lp-h2 { color: var(--navy); }
.lp-pain-header .lp-sec-sub { color: var(--text-mid); margin: 0 auto; text-align: center; }
.lp-pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.lp-pain-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border: 1px solid rgba(52,60,92,0.10);
  border-radius: 14px;
  padding: 26px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 26px rgba(52,60,92,0.06);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.lp-pain-card::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s ease;
}
.lp-pain-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201,146,42,0.35);
  box-shadow: 0 20px 50px rgba(52,60,92,0.12);
}
.lp-pain-card:hover::before { transform: scaleX(1); }
.lp-pain-card-icon {
  width: 46px;
  height: 46px;
  background: rgba(201,146,42,0.12);
  border: 1px solid rgba(201,146,42,0.30);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold-dark);
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.lp-pain-card:hover .lp-pain-card-icon {
  background: var(--gold);
  color: #fff;
  transform: scale(1.06);
}
/* --- Secao "Voce se identifica": todos os icones acesos e a linha do topo
       visivel em todos os cards, sem animacao (Bianca 09/09/2026). --- */
.lp-pain-card::before { transform: scaleX(1); }
.lp-pain-card .lp-pain-card-icon {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

.lp-pain-card-icon svg { width: 22px; height: 22px; }
.lp-pain-card-text {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.6;
}
.lp-pain-card-text strong {
  display: block;
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: 22px;
  color: var(--navy);
  margin-bottom: 6px;
  font-weight: 600;
  line-height: 1.2;
}
.lp-pain-closing {
  text-align: center;
  font-size: 17px;
  color: var(--text-mid);
  margin-bottom: 28px;
  line-height: 1.7;
}
.lp-pain-closing strong { color: var(--navy); }
/* fecho em 2 linhas equilibradas, sem viuva na ultima (pedido Bianca 09/09/2026) */
.lp-pain-closing--bal { text-wrap: balance; }
.lp-pain-cta { display: flex; justify-content: center; }

/* ---- WHAT IS SECTION ---- */
.lp-what { background: #0E1A33; color: var(--cream); }
.lp-what-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.lp-what-text .lp-sec-eyebrow { color: var(--gold-light); }
.lp-what-text .lp-h2 { color: var(--cream); margin-bottom: 20px; }
.lp-what-text p {
  font-size: 17px;
  color: rgba(245,240,232,0.62);
  line-height: 1.82;
  margin-bottom: 16px;
}
.lp-what-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 32px;
}
.lp-what-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  color: rgba(245,240,232,0.72);
  line-height: 1.6;
}
.lp-what-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 8px;
  flex-shrink: 0;
}
.lp-what-img {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3/4;
  border: 1px solid var(--border);
}
.lp-what-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.80) saturate(0.85);
}

/* ---- WHY HERE SECTION ---- */
.lp-why { background: #ffffff; color: var(--text-dark); }
.lp-why-header { text-align: center; margin-bottom: 52px; }
.lp-why-header .lp-sec-eyebrow { color: var(--gold-dark); }
.lp-why-header .lp-h2 { color: var(--navy); }
.lp-why-header .lp-sec-sub { color: var(--text-mid); margin: 0 auto; text-align: center; }
.lp-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lp-why-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(52,60,92,0.10);
  border-radius: 14px;
  padding: 32px 28px;
  overflow: hidden;
  box-shadow: 0 6px 26px rgba(52,60,92,0.06);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.lp-why-card::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s ease;
}
.lp-why-card:hover {
  border-color: rgba(201,146,42,0.40);
  transform: translateY(-5px);
  box-shadow: 0 22px 54px rgba(52,60,92,0.13);
}
.lp-why-card:hover::before { transform: scaleX(1); }
.lp-why-icon {
  width: 54px;
  height: 54px;
  background: rgba(201,146,42,0.12);
  border: 1px solid rgba(201,146,42,0.30);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dark);
  margin-bottom: 18px;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.lp-why-card:hover .lp-why-icon {
  background: var(--gold);
  color: #fff;
  transform: scale(1.06);
}
.lp-why-icon svg { width: 24px; height: 24px; }
.lp-why-card h3 {
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 9px;
  line-height: 1.3;
}
.lp-why-card p {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.7;
}

/* ---- STEPS SECTION ---- */
.lp-steps { background: #0E1A33; color: var(--cream); }
.lp-steps-header { text-align: center; margin-bottom: 60px; }
.lp-steps-header .lp-h2 { color: var(--cream); }
.lp-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lp-step {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,146,42,0.18);
  border-radius: 14px;
  padding: 30px 28px 28px;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.lp-step::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s ease;
}
.lp-step:hover {
  transform: translateY(-4px);
  border-color: rgba(201,146,42,0.45);
  background: rgba(255,255,255,0.055);
  box-shadow: 0 22px 50px rgba(0,0,0,0.35);
}
.lp-step:hover::before { transform: scaleX(1); }
.lp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(201,146,42,0.10);
  border: 1px solid rgba(201,146,42,0.35);
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: 20px;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.lp-step:hover .lp-step-num {
  background: var(--gold);
  color: #0E1A33;
  transform: scale(1.06);
}
.lp-step h3 {
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 10px;
  line-height: 1.3;
}
.lp-step p {
  font-size: 16px;
  color: rgba(245,240,232,0.6);
  line-height: 1.72;
}

/* ---- PASSO A PASSO, VARIANTE CLARA (31/08/2026, pedido da clinica) ----
   Usada so onde a section tem a classe lp-steps--claro (hoje: implantes.html).
   Inverte o esquema: fundo da SECAO branco e os BLOCOS em azul navy.
   As regras vem depois das originais e sao mais especificas, entao vencem
   sem precisar de !important. Nao mexer nas regras de .lp-steps acima:
   as outras 9 paginas de tratamento continuam com o fundo escuro. */
.lp-steps--claro { background: #fff; color: var(--text-dark); }
.lp-steps--claro .lp-steps-header .lp-h2 { color: var(--navy); }
.lp-steps--claro .lp-sec-eyebrow { color: var(--gold-dark); }
.lp-steps--claro .lp-step {
  background: var(--navy);
  border-color: rgba(201,146,42,0.28);
}
.lp-steps--claro .lp-step:hover {
  background: #12213F;
  border-color: rgba(201,146,42,0.55);
  box-shadow: 0 22px 50px rgba(14,26,51,0.28);
}
.lp-steps--claro .lp-step h3 { color: var(--cream); }
.lp-steps--claro .lp-step p  { color: rgba(245,240,232,0.72); }
.lp-steps--claro .lp-step-num {
  background: rgba(201,146,42,0.14);
  border-color: rgba(201,146,42,0.42);
  color: var(--gold-light);
}
.lp-steps--claro .lp-step:hover .lp-step-num { background: var(--gold); color: var(--navy); }

/* ---- FAQ SECTION ---- */
.lp-faq { background: #F5F0E8; color: var(--text-dark); }   /* creme, pedido da clinica 31/08/2026 */
.lp-faq-header { text-align: center; margin-bottom: 48px; }
.lp-faq-header .lp-sec-eyebrow { color: var(--gold-dark); }
.lp-faq-header .lp-h2 { color: var(--navy); }
.lp-faq-list {
  max-width: 780px;
  margin: 0 auto;
}
.lp-faq-item { border-bottom: 1px solid rgba(52,60,92,0.10); }
.lp-faq-item:first-child { border-top: 1px solid rgba(52,60,92,0.10); }
.lp-faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 20px 0;
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color 0.2s;
}
.lp-faq-q:hover { color: var(--gold-dark); }
.lp-faq-q svg { flex-shrink: 0; transition: transform 0.3s; color: var(--gold); }
.lp-faq-item.open .lp-faq-q svg { transform: rotate(45deg); }
.lp-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.lp-faq-item.open .lp-faq-a { max-height: 500px; }
.lp-faq-a p {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.82;
  padding-bottom: 20px;
}

/* ---- FINAL CTA ---- */
.lp-cta-final {
  background: #0E1A33;
  padding: 96px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lp-cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,146,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,146,42,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.lp-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;   /* 580 quebrava o H2 numa linha a mais (31/08/2026) */
  margin: 0 auto;
  padding: 0 24px;
}
.lp-cta-inner h2 {
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 700;
  color: var(--cream);
  margin: 0 auto 16px;
  text-wrap: wrap;
  line-height: 1.15;
}
/* no mobile a quebra manual do CTA some (deixa fluir) */
@media (max-width: 600px) { .lp-cta-inner h2 br { display: none; } }
.lp-cta-inner h2 em { font-style: italic; color: var(--gold-light); }
.lp-cta-inner p {
  font-size: 17px;
  color: rgba(245,240,232,0.58);
  margin-bottom: 36px;
  line-height: 1.8;
}

/* ---- FADE IN ---- */
.lp-fade { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.lp-fade.visible { opacity: 1; transform: translateY(0); }

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .lp-why-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-pain-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .lp-hero-inner {
    grid-template-columns: 1fr;
    padding: 110px 20px 60px;
    gap: 44px;
  }
  .lp-hero-img { aspect-ratio: 16/9; }
  .lp-hero-badge { bottom: -12px; }
  .lp-section { padding: 64px 0; }
  .lp-section-inner { padding: 0 20px; }
  .lp-pain-grid { grid-template-columns: 1fr; }
  .lp-what-grid { grid-template-columns: 1fr; gap: 40px; }
  .lp-what-img { aspect-ratio: 16/9; }
  /* foto de paciente (retrato): 16/9 cortaria testa e queixo. Nao reduzir sem reconferir em 390px. */
  .lp-what-img--retrato { aspect-ratio: 4/5; }
  .lp-why-grid { grid-template-columns: 1fr; }
  .lp-steps-grid { grid-template-columns: 1fr; gap: 28px; }
  .lp-hero-ctas { flex-direction: column; align-items: stretch; }
  .lp-hero-ctas .btn-primary,
  .lp-hero-ctas .btn-ghost { width: 100%; justify-content: center; }
  .lp-trust { gap: 18px; }
  .lp-faq-q { font-size: 20px; }
}
@media (max-width: 480px) {
  .lp-h1 { font-size: clamp(28px, 7vw, 40px); }
  .lp-h2 { font-size: clamp(24px, 5.5vw, 34px); }
  .lp-hero-inner { padding: 100px 16px 56px; }
  .lp-section-inner { padding: 0 16px; }
}

/* ====== PROTESE: hero em celular estreito (01/08/2026) ======
   O parágrafo do hero da prótese tem 351 caracteres contra 153 das outras
   páginas de tratamento, o que empurrava o CTA para fora da primeira tela:
   em 375x667 (iPhone SE) faltavam 140px e em 360x780 faltavam 58px.
   Aqui o texto da cliente fica INTEIRO. Só muda corpo e espaçamento, e só
   abaixo de 400px. Escopado em .pg-protese para não afetar as outras 8
   páginas que carregam este arquivo e já estavam corretas.
   O padding-top de 104px é proposital: mantém 31px de respiro sob a navbar
   fixa (73px), conforme o checklist de mobile. Não reduzir. */
@media (max-width: 400px) {
  .pg-protese .lp-hero-inner    { padding-top: 104px; }
  .pg-protese .lp-hero h1       { margin-bottom: 14px; }
  .pg-protese .lp-hero-sub      { font-size: 16px; line-height: 1.5; margin-bottom: 16px; }
  .pg-protese .lp-hero-benefits { margin-bottom: 14px; gap: 8px; }
}

/* ====== GRADES DE CARD: última fileira centralizada (01/08/2026) ======
   Quatro grades ficaram com 5 cards depois das remoções pedidas pela cliente
   (itens 46, 60, 74 e 78), e 5 numa grade de 3 colunas deixa a última fileira
   encostada à esquerda com um vão na 3ª coluna. Em 2 colunas o mesmo acontece
   com o card órfão.

   Trocar grid por flex com justify-content:center resolve as duas faixas.
   MEDIDO em página de 6 cards (facetas, 12 cards nas 2 grades): posição,
   largura e altura ficaram IDÊNTICAS. Ou seja, isto só age onde sobra buraco,
   por isso não precisa de classe por página.

   As larguras repetem os mesmos pontos de quebra das regras acima
   (1024px e 768px). Se aqueles mudarem, estes precisam mudar junto. */
.lp-why-grid,
.lp-pain-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.lp-why-grid > *,
.lp-pain-grid > * { flex: 0 1 calc((100% - 40px) / 3); }

@media (max-width: 1024px) {
  .lp-why-grid > *,
  .lp-pain-grid > * { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 768px) {
  .lp-why-grid > *,
  .lp-pain-grid > * { flex-basis: 100%; }
}

/* ====== HERO COM PAR ANTES/DEPOIS (02/09/2026) ======
   A clínica mandou os pares de Prótese e de Facetas montados em PÉ
   (antes em cima, depois embaixo, 1080x1354 com a costura de 4px que a gente
   remonta). O slot padrão do hero é deitado (4/3 no desktop, 16/9 no celular)
   e cortaria uma das duas fotos, que é exatamente a dúvida levantada com a
   cliente em 21/08. Aqui o par entra INTEIRO: proporção igual à do arquivo,
   sem corte, com largura máxima para não dominar a coluna no desktop.
   O filtro de escurecer e o degradê do hero saem: foto clínica de antes e
   depois não pode sair mais escura do que é. */
.lp-hero-img--par {
  aspect-ratio: 1080 / 1354;
  max-width: 430px;
  margin: 0 auto;
  border: 1px solid rgba(201,146,42,0.22);
}
.lp-hero-img--par img { filter: none; }
.lp-hero-img--par .lp-hero-img-overlay { display: none; }
.lp-ad-tag {
  position: absolute;
  left: 14px;
  z-index: 2;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--cream);
  background: rgba(24,28,44,0.72);
  border: 1px solid rgba(201,146,42,0.45);
  backdrop-filter: blur(4px);
}
.lp-ad-tag--antes  { top: 14px; }
.lp-ad-tag--depois { top: calc(50% + 14px); color: var(--gold-light); }
@media (max-width: 768px) {
  /* vence o `.lp-hero-img { aspect-ratio: 16/9 }` do bloco de 768px */
  .lp-hero-img--par { aspect-ratio: 1080 / 1354; max-width: 340px; }
}

/* ====== HERO EM VIDEO E HERO QUADRADO (02/09/2026) ======
   remocao-facetas: video do procedimento em 9/16 (o arquivo da clinica e
   1080x1920). Sem som, em laco, sem controles. A guarda de movimento fica no
   fim do proprio HTML da pagina: quem pede menos movimento no sistema recebe
   o poster parado com os controles.
   laser: foto do equipamento LiteTouch, quadrada (a arte vinha 1414x2000 com
   faixa branca; a caixa de conteudo foi medida e recortada). */
.lp-hero-img--video {
  aspect-ratio: 9 / 16;
  max-width: 330px;
  margin: 0 auto;
  border: 1px solid rgba(201,146,42,0.22);
  background: #10121c;
}
.lp-hero-img--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lp-hero-img--quadrado {
  aspect-ratio: 1 / 1;
  max-width: 480px;
  margin: 0 auto;
}
.lp-hero-img--quadrado img { filter: none; }
.lp-hero-img--quadrado .lp-hero-img-overlay { display: none; }
@media (max-width: 768px) {
  /* vencem o `.lp-hero-img { aspect-ratio: 16/9 }` do bloco de 768px */
  .lp-hero-img--video    { aspect-ratio: 9 / 16; max-width: 280px; }
  .lp-hero-img--quadrado { aspect-ratio: 1 / 1;  max-width: 340px; }
}

/* Foto de paisagem na secao "O que e" (02/09/2026). A caixa padrao e 3/4
   (retrato) e cortava a foto do clareamento num close exagerado depois da
   troca com o hero. Aqui a caixa acompanha a foto. */
.lp-what-img--paisagem { aspect-ratio: 4/3; }
@media (max-width: 768px) {
  .lp-what-img--paisagem { aspect-ratio: 4/3; }
}

/* ====== LASER: headline do hero menor (16/09/2026, pedido da Bianca) ======
   O H1 do laser tem 84 caracteres, o mais longo das 9 paginas de tratamento
   (implantes 62, ortodontia 66). No corpo padrao ele ocupava linha demais na
   primeira dobra. O texto fica INTEIRO: so o corpo diminui, e so nesta pagina,
   escopado em .pg-laser para nao encolher as outras 8 que carregam este arquivo.
   Ordem maior -> menor, como o resto do arquivo. */
.pg-laser .lp-h1 { font-size: clamp(30px, 3.6vw, 46px); }
@media (max-width: 480px) {
  .pg-laser .lp-h1 { font-size: clamp(25px, 6.2vw, 34px); }
}

/* ====== REMOCAO DE FACETAS: CTA final em fundo claro (16/09/2026, pedido da Bianca)
   A pagina ficou com a secao 'Para dentistas' (navy) seguida do CTA final (navy), duas
   dobras escuras coladas. Aqui so o CTA final vira creme, escopado na classe do body
   para nao mexer nas outras 8 paginas que carregam este arquivo.
   Contraste medido sobre #F5F0E8: titulo navy 15,25:1 · destaque dourado escuro 3,99:1
   (o titulo tem 30px ou mais, onde o minimo e 3:1) · paragrafo em text-mid. */
.pg-remocao-facetas .lp-cta-final { background: #F5F0E8; }
.pg-remocao-facetas .lp-cta-final::before {
  background-image:
    linear-gradient(rgba(14,26,51,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,26,51,0.022) 1px, transparent 1px);
}
.pg-remocao-facetas .lp-cta-inner h2 { color: var(--navy); }
.pg-remocao-facetas .lp-cta-inner h2 em { color: var(--gold-dark); }
.pg-remocao-facetas .lp-cta-inner p { color: var(--text-mid); }

/* ====== ANTES E DEPOIS LADO A LADO no hero (16/09/2026, pedido da Bianca) ======
   Antes as duas fotos vinham numa imagem unica, empilhada na vertical, e as
   etiquetas eram posicionadas por CSS (uma no topo, outra em 50%). Aqui sao duas
   imagens de verdade, cada uma com a sua etiqueta dentro do proprio quadro. */
.lp-hero-img--parh {
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.lp-hero-img--parh figure {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(201,146,42,0.22);
}
.lp-hero-img--parh img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1080 / 675;
  object-fit: cover;
  display: block;
  filter: none;
}
.lp-hero-img--parh .lp-ad-tag { top: 12px; left: 12px; }

/* ====== DOIS VIDEOS lado a lado no hero (16/09/2026, pedido da Bianca) ======
   Os dois sao verticais (720x1280), entao cada um fica numa coluna e o bloco
   deixa de ter aspect-ratio proprio: quem manda e a proporcao do video. */
.lp-hero-img--videos {
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.lp-hero-img--videos figure {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(201,146,42,0.22);
}
.lp-hero-img--videos video {
  width: 100%;
  /* sem height:auto o ATRIBUTO height="1280" do <video> vence o aspect-ratio
     e o bloco fica com 1280px de altura (medido no ar em 16/09/2026). */
  height: auto;
  aspect-ratio: 720 / 1280;
  object-fit: cover;
  display: block;
}

/* ====== FOTO DO LASER: aparece INTEIRA, sem corte (16/09/2026, pedido da Bianca) ======
   O container corta por 'cover': medido, tirava 80px de largura (40 de cada lado) da foto
   de 960x660. Com 'contain' + fundo navy a imagem aparece inteira e ainda sobra uma faixa
   de respiro acima e abaixo do aparelho. Escopado na pagina para nao mexer nas outras LPs.
   O brilho tambem volta ao normal: o filtro de 0.80 escurecia foto de produto branco. */
/* ====== FOTO DE EQUIPAMENTO: INTEIRA EM QUALQUER LARGURA (Bianca, 16/09/2026) ======
   No celular a caixa do hero e a do "O que e" viram 16/9, e isso cortava o aparelho
   pela metade (medido: 696px de 1200 no laser, 617px de 1064 no estojo do OralBalance).
   Aqui a caixa acompanha a proporcao do arquivo, entao o cover preenche sem cortar.
   No desktop nao muda nada: la a caixa ja bate com a foto. */
@media (max-width: 768px) {
  .lp-hero-img--equipamento { aspect-ratio: 4 / 3; }
  .lp-what-img--equipamento { aspect-ratio: 3 / 4; }
}
.pg-remocao-facetas .lp-what-img { background: var(--navy); }
.pg-remocao-facetas .lp-what-img img { object-fit: contain; filter: none; }

/* ====== PROTESE: duas fotos da boca empilhadas no "O que e" (Bianca, 25/09/2026) ======
   Recorte so na boca, sem mostrar o rosto do paciente. Arquivos 1200x900 (4/3). No celular a caixa
   e 4/3 (sem corte); no desktop 3/2, que tira so ~5% em cima e embaixo. */
.lp-what-duo { display: flex; flex-direction: column; gap: 16px; }
.lp-what-img--boca { aspect-ratio: 3 / 2; }  /* desktop: coluna fica na altura da foto antiga */
@media (max-width: 768px) {
  .lp-what-img--boca { aspect-ratio: 4 / 3; }
}

/* ====== IMPLANTES: antes em cima, depois embaixo no hero (Bianca, 16/10/2026) ======
   Mesmo par de fotos do --parh, empilhado numa coluna, na largura dos heros
   de antes e depois das outras paginas (430px). */
.lp-hero-img--parv { grid-template-columns: 1fr; max-width: 430px; margin: 0 auto; }

/* ====== REMOCAO DE FACETAS: laser inteiro no "Para dentistas" (Bianca, 16/10/2026) ======
   A foto antiga (960x660) ja vinha com o topo do aparelho cortado no arquivo.
   Entra a mesma foto inteira, 1200x1200, numa caixa quadrada. */
.lp-what-img--quadrado { aspect-ratio: 1 / 1; }
@media (max-width: 768px) {
  .lp-what-img--quadrado { aspect-ratio: 1 / 1; max-width: 480px; margin-left: auto; margin-right: auto; }
}