.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cirurgia de Feminização Facial | Dr. Marco Aurélio Linhares</title>
<meta name="description" content="Cirurgia de feminização facial com 30 anos de experiência, centro cirúrgico próprio e credencial americana AAFPRS. Dr. Marco Aurélio Linhares, Governador Valadares-MG.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

<style>
:root {
  /* Paleta híbrida — cartão CMYK + identidade site antigo */
  --navy:      #1A3070;   /* Azul royal médio — mais vivo e quente que o cartão puro */
  --navy-deep: #112058;   /* Fundo profundo — hero, seções escuras */
  --copper:    #B8714E;   /* Cobre-dourado — une terracota do cartão com ouro do site antigo */
  --copper-light: #C8845F;/* Hover — um tom acima */
  --gold:      #C9A96E;   /* Dourado clássico do site antigo — badges, credenciais, acentos */
  --blush:     #F2D5C8;   /* Rose salmão suave — mantido do cartão */
  --blush-mid: #EAC4B4;   /* Rose médio — separadores */
  --blush-soft:#FAF0EB;   /* Rose muito claro — fundos suaves */
  --white:     #FFFFFF;
  --text:      #12192E;
  --text-muted:#5A6080;
  --border:    #E2DDD8;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

/* ─── SIDE LABEL ─────────────────────────────────── */
.side-label {
  position: fixed;
  left: -68px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  z-index: 100;
  pointer-events: none;
  white-space: nowrap;
  transition: color 0.3s;
}
.side-label.light { color: rgba(15,22,91,0.3); }

/* ─── NAV ────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 20px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s, padding 0.4s;
}
nav.scrolled {
  background: rgba(9,14,64,0.97);
  backdrop-filter: blur(12px);
  padding: 14px 48px;
  box-shadow: 0 2px 24px rgba(0,0,0,0.25);
}
.nav-logo {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--white);
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.9;
}
.nav-logo span { color: var(--blush); }
.nav-cta {
  background: var(--copper);
  color: var(--white);
  border: none;
  padding: 10px 24px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  display: inline-block;
}
.nav-cta:hover { background: var(--copper-light); transform: translateY(-1px); }

/* ─── HERO ───────────────────────────────────────── */
#hero {
  min-height: 100vh;
  background: var(--navy);
  background-image: url('/wp-content/uploads/IMG_9512.jpeg');
  background-size: cover;
  background-position: center 30%;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(17, 32, 88, 0.93) 0%,
    rgba(17, 32, 88, 0.80) 55%,
    rgba(17, 32, 88, 0.50) 100%
  );
  z-index: 1;
}
.hero-bg-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(135deg, rgba(184,113,78,0.06) 0%, transparent 50%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 80px,
      rgba(255,255,255,0.015) 80px,
      rgba(255,255,255,0.015) 81px
    );
  pointer-events: none;
}
.hero-accent {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,113,78,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 48px 80px;
  width: 100%;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 28px;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--copper);
}
.hero-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(44px, 7vw, 80px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--white);
  max-width: 720px;
  margin-bottom: 8px;
}
.hero-headline em {
  font-style: italic;
  color: var(--blush);
}
.hero-headline strong {
  font-weight: 600;
  display: block;
}
.hero-sub {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  max-width: 520px;
  line-height: 1.7;
  margin-top: 24px;
  margin-bottom: 44px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--copper);
  color: var(--white);
  padding: 16px 36px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(184,113,78,0.35);
}
.btn-primary:hover {
  background: var(--copper-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(184,113,78,0.45);
}
.btn-primary svg { flex-shrink: 0; }
.btn-ghost {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.btn-ghost:hover { color: var(--blush); }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,204,204,0.25);
  padding: 8px 16px;
  margin-top: 52px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.hero-badge span { color: var(--gold); font-weight: 600; }

/* ─── TRUST BAR ──────────────────────────────────── */
#trust {
  background: var(--navy-deep);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0;
}
.trust-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trust-item {
  padding: 36px 32px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
.trust-item:last-child { border-right: none; }
.trust-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  display: block;
}
.trust-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-top: 8px;
  display: block;
}

/* ─── ANCHOR ─────────────────────────────────────── */
#anchor {
  background: var(--blush-soft);
  padding: 96px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#anchor::before {
  content: '"';
  font-family: 'Cormorant Garamond', serif;
  font-size: 320px;
  color: rgba(184,113,78,0.05);
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
  pointer-events: none;
}
.anchor-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
.anchor-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 300;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 24px;
}
.anchor-headline em { font-style: italic; color: var(--copper); }
.anchor-text {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 620px;
  margin: 0 auto;
}

/* ─── PROCEDURES ─────────────────────────────────── */
#procedures {
  background: var(--white);
  padding: 96px 48px;
}
.section-header {
  max-width: 1200px;
  margin: 0 auto 60px;
}
.section-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--copper);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.section-eyebrow::after {
  content: '';
  flex: 1;
  max-width: 48px;
  height: 1px;
  background: var(--copper);
  opacity: 0.4;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 300;
  color: var(--navy);
  line-height: 1.2;
}
.section-title strong { font-weight: 600; }
.procedures-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
}
.proc-card {
  background: var(--white);
  padding: 40px 36px;
  transition: background 0.25s;
  position: relative;
  overflow: hidden;
}
.proc-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 36px;
  width: 0;
  height: 2px;
  background: var(--copper);
  transition: width 0.3s;
}
.proc-card:hover { background: var(--blush-soft); }
.proc-card:hover::after { width: calc(100% - 72px); }
.proc-icon {
  width: 40px;
  height: 40px;
  color: var(--copper);
  margin-bottom: 20px;
  opacity: 0.85;
}
.proc-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 12px;
  line-height: 1.2;
}
.proc-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.7;
}
.proc-tag {
  display: inline-block;
  margin-top: 16px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201,169,110,0.35);
  padding: 4px 10px;
}

/* ─── WHY DR. MARCO ──────────────────────────────── */
#why {
  background: var(--navy);
  padding: 96px 48px;
}
#why .section-eyebrow { color: var(--gold); }
#why .section-eyebrow::after { background: var(--gold); opacity: 0.6; }
#why .section-title { color: var(--white); }
.why-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 60px;
}
.why-card {
  display: flex;
  gap: 24px;
  padding: 36px;
  border: 1px solid rgba(255,255,255,0.07);
  transition: border-color 0.25s, background 0.25s;
}
.why-card:hover {
  border-color: rgba(201,169,110,0.45);
  background: rgba(201,169,110,0.04);
}
.why-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: var(--copper);
}
.why-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.3;
}
.why-text {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
}

/* ─── TESTIMONIALS ───────────────────────────────── */
#testimonials {
  background: var(--blush-soft);
  padding: 96px 48px;
}
.testimonials-grid {
  max-width: 1200px;
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testi-card {
  background: var(--white);
  padding: 36px;
  border-bottom: 3px solid var(--copper);
  position: relative;
}
.testi-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}
.testi-stars svg { color: #F5A623; }
.testi-google {
  position: absolute;
  top: 32px;
  right: 32px;
  opacity: 0.3;
}
.testi-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 24px;
}
.testi-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.05em;
}
.testi-origin {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
}
.google-badge {
  max-width: 1200px;
  margin: 40px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
}
.google-badge strong { color: var(--navy); }

/* ─── GALLERY ────────────────────────────────────── */
#gallery {
  background: var(--white);
  padding: 96px 48px;
}
.gallery-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 60px;
}
.gallery-item {
  aspect-ratio: 4/3;
  background: var(--blush-mid);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
}
.gallery-placeholder svg { opacity: 0.3; }
.gallery-placeholder span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5; }
.gallery-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(9,14,64,0.8));
  padding: 32px 24px 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.gallery-note {
  max-width: 1200px;
  margin: 24px auto 0;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* ─── ABOUT ──────────────────────────────────────── */
#about {
  background: var(--navy-deep);
  padding: 96px 48px;
}
.about-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 80px;
  align-items: start;
}
.about-photo {
  position: relative;
}
.about-photo-frame {
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, rgba(184,113,78,0.15), rgba(26,48,112,0.5));
  border: 1px solid rgba(255,204,204,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.about-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: rgba(255,255,255,0.2);
  text-align: center;
  padding: 32px;
}
.photo-placeholder svg { opacity: 0.3; }
.photo-placeholder p { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.about-copper-line {
  position: absolute;
  bottom: -16px; right: -16px;
  width: 80%;
  height: 3px;
  background: var(--copper);
}
.about-content { padding-top: 8px; }
#about .section-eyebrow { color: var(--gold); }
#about .section-eyebrow::after { background: var(--gold); opacity: 0.6; }
#about .section-title { color: var(--white); margin-bottom: 28px; }
.about-text {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
  margin-bottom: 20px;
}
.credentials-list {
  list-style: none;
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.credentials-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}
.cred-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--copper);
  flex-shrink: 0;
  margin-top: 6px;
}
.cred-highlight {
  font-weight: 600;
  color: var(--gold);
}

/* ─── HOW IT WORKS ───────────────────────────────── */
#how {
  background: var(--white);
  padding: 96px 48px;
}
.steps-grid {
  max-width: 1200px;
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
.steps-grid::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, var(--copper), var(--blush), var(--copper));
  opacity: 0.3;
  z-index: 0;
}
.step {
  text-align: center;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}
.step-num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--blush-soft);
  border: 2px solid var(--blush-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--copper);
  transition: background 0.25s, border-color 0.25s;
}
.step:hover .step-num {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--white);
}
.step-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}
.step-desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ─── FINAL CTA ──────────────────────────────────── */
#cta-final {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  padding: 96px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#cta-final::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,113,78,0.08) 0%, transparent 65%);
  pointer-events: none;
}
.cta-final-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.cta-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 24px;
}
.cta-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 16px;
}
.cta-headline em { font-style: italic; color: var(--blush); }
.cta-sub {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  margin-bottom: 48px;
}
.cta-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.btn-lg {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--copper);
  color: var(--white);
  padding: 20px 48px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(184,113,78,0.4);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-lg:hover {
  background: var(--copper-light);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(184,113,78,0.5);
}
.cta-phone {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.05em;
}
.cta-phone a { color: rgba(255,255,255,0.65); text-decoration: none; }

/* ─── FOOTER ─────────────────────────────────────── */
footer {
  background: #0C1840;
  padding: 48px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.footer-brand {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  margin-top: 12px;
  line-height: 1.8;
}
.footer-col-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 16px;
}
.footer-text {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.4);
  line-height: 1.8;
}
.footer-text a { color: rgba(255,255,255,0.5); text-decoration: none; }
.footer-text a:hover { color: var(--blush); }
.footer-bottom {
  max-width: 1200px;
  margin: 36px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: rgba(255,255,255,0.2);
}

/* ─── FLOATING WHATSAPP ──────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 300;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: pulse-wa 3s infinite;
}
.wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 30px rgba(37,211,102,0.5);
}
@keyframes pulse-wa {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
  50% { box-shadow: 0 4px 32px rgba(37,211,102,0.65); }
}

/* ─── SCROLL ANIMATIONS ──────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-up.delay-1 { transition-delay: 0.1s; }
.fade-up.delay-2 { transition-delay: 0.2s; }
.fade-up.delay-3 { transition-delay: 0.3s; }
.fade-up.delay-4 { transition-delay: 0.4s; }
.fade-up.delay-5 { transition-delay: 0.5s; }

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 900px) {
  nav { padding: 16px 24px; }
  nav.scrolled { padding: 12px 24px; }
  .hero-content { padding: 100px 24px 60px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2) { border-right: none; }
  .procedures-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .about-inner { grid-template-columns: 1fr; gap: 48px; }
  .about-photo-frame { aspect-ratio: 4/3; max-width: 360px; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .steps-grid::before { display: none; }
  .footer-inner { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  #procedures, #why, #testimonials, #gallery, #about, #how, #cta-final, #anchor { padding: 64px 24px; }
  .side-label { display: none; }
}
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  .btn-primary, .btn-lg, .wa-float { transition: none; }
  @keyframes pulse-wa { from {} to {} }
}
</style>
</head>

<body>

<!-- SIDE LABEL -->
<div class="side-label" id="sideLabel">Cirurgia Facial &bull; Governador Valadares &bull; Brasil</div>

<!-- FLOATING WHATSAPP -->
<a href="https://wa.me/5533999575835?text=Olá,%20vim%20da%20página%20de%20Feminização%20Facial%20e%20gostaria%20de%20agendar%20uma%20avaliação." class="wa-float" target="_blank" rel="noopener" aria-label="Fale pelo WhatsApp">
  <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
  </svg>
</a>

<!-- NAV -->
<nav id="navbar">
  <a href="#hero" class="nav-logo">Clínica Facial <span>Dr. Marco Aurélio</span></a>
  <a href="https://wa.me/5533999575835?text=Olá,%20vim%20da%20página%20de%20Feminização%20Facial%20e%20gostaria%20de%20agendar%20uma%20avaliação." class="nav-cta" target="_blank" rel="noopener">Agendar Avaliação</a>
</nav>

<!-- ═══════════════════════════════════════════════ -->
<!-- HERO                                           -->
<!-- ═══════════════════════════════════════════════ -->
<section id="hero">
  <div class="hero-bg-lines"></div>
  <div class="hero-accent"></div>
  <div class="hero-content">

    <div class="hero-eyebrow fade-up">Feminização Facial Cirúrgica</div>

    <h1 class="hero-headline fade-up delay-1">
      Você sempre soube<br>
      quem você <em>realmente</em> é.<br>
      <strong>Agora o mundo vai saber também.</strong>
    </h1>

    <p class="hero-sub fade-up delay-2">
      Cirurgia de feminização facial completa, com a precisão de quem dedicou 30 anos exclusivamente à anatomia da face — e a sensibilidade de quem entende que esse é o procedimento mais importante da sua vida.
    </p>

    <div class="hero-actions fade-up delay-3">
      <a href="https://wa.me/5533999575835?text=Olá,%20vim%20da%20página%20de%20Feminização%20Facial%20e%20gostaria%20de%20agendar%20uma%20avaliação." class="btn-primary" target="_blank" rel="noopener">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
        Agendar minha avaliação
      </a>
      <a href="#procedures" class="btn-ghost">
        Conhecer os procedimentos
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
      </a>
    </div>

    <div class="hero-badge fade-up delay-4">
      <span>AAFPRS</span> Membro Internacional da Academia Americana de Cirurgia Plástica Facial &nbsp;&bull;&nbsp; CRM-MG 26110 &nbsp;&bull;&nbsp; CRM-ES 21172
    </div>

  </div>
</section>

<!-- ═══════════════════════════════════════════════ -->
<!-- TRUST BAR                                      -->
<!-- ═══════════════════════════════════════════════ -->
<section id="trust">
  <div class="trust-grid">
    <div class="trust-item fade-up">
      <span class="trust-number">30+</span>
      <span class="trust-label">Anos de experiência</span>
    </div>
    <div class="trust-item fade-up delay-1">
      <span class="trust-number">5.869</span>
      <span class="trust-label">Cirurgias realizadas</span>
    </div>
    <div class="trust-item fade-up delay-2">
      <span class="trust-number">52.347</span>
      <span class="trust-label">Pacientes atendidos</span>
    </div>
    <div class="trust-item fade-up delay-3">
      <span class="trust-number">🌎</span>
      <span class="trust-label">Pacientes internacionais</span>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════════ -->
<!-- EMOTIONAL ANCHOR                               -->
<!-- ═══════════════════════════════════════════════ -->
<section id="anchor">
  <div class="anchor-inner">
    <h2 class="anchor-headline fade-up">
      A feminização facial não é<br>
      uma mudança. É um <em>reencontro.</em>
    </h2>
    <p class="anchor-text fade-up delay-1">
      Cada procedimento é planejado para revelar quem você sempre foi — com harmonia, naturalidade e resultados que respeitam a estrutura única do seu rosto. Aqui, sua jornada é tratada com a seriedade técnica e o acolhimento humano que ela merece.
    </p>
  </div>
</section>

<!-- ═══════════════════════════════════════════════ -->
<!-- PROCEDURES                                     -->
<!-- ═══════════════════════════════════════════════ -->
<section id="procedures">
  <div class="section-header">
    <div class="section-eyebrow">Procedimentos</div>
    <h2 class="section-title">Feminização <strong>completa da face</strong></h2>
  </div>

  <div class="procedures-grid">

    <div class="proc-card fade-up">
      <svg class="proc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <path d="M12 2C8 2 5 5.5 5 9c0 2.5 1 4.5 2.5 6L12 22l4.5-7C18 13.5 19 11.5 19 9c0-3.5-3-7-7-7z"/>
        <circle cx="12" cy="9" r="2.5"/>
      </svg>
      <div class="proc-name">Frontoplastia Óssea Tipo III</div>
      <p class="proc-desc">Remodelação da testa e da região supraorbital — eliminando o volume masculino da fronte e criando contornos suaves e femininos. É frequentemente o procedimento de maior impacto na feminização.</p>
      <span class="proc-tag">Alto impacto visual</span>
    </div>

    <div class="proc-card fade-up delay-1">
      <svg class="proc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <path d="M3 9c3-3 6-4 9-4s6 1 9 4"/>
        <path d="M3 15c3 3 6 4 9 4s6-1 9-4"/>
        <ellipse cx="12" cy="12" rx="3" ry="4"/>
      </svg>
      <div class="proc-name">Rinoplastia de Feminização</div>
      <p class="proc-desc">Refinamento do nariz com técnicas estruturadas, de preservação ou ultrassônica (Piezo), adaptando forma, projeção e giro nasal para a harmonia do rosto feminino.</p>
      <span class="proc-tag">Técnica Piezo disponível</span>
    </div>

    <div class="proc-card fade-up delay-2">
      <svg class="proc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <path d="M4 8s2-3 8-3 8 3 8 3"/>
        <path d="M12 5v14"/>
        <path d="M4 16s2 3 8 3 8-3 8-3"/>
      </svg>
      <div class="proc-name">Suspensão de Sobrancelhas</div>
      <p class="proc-desc">Reposicionamento cirúrgico das sobrancelhas para uma curvatura mais feminina e elevada, rejuvenescendo o olhar e abrindo a expressão de forma natural e duradoura.</p>
      <span class="proc-tag">Resultado definitivo</span>
    </div>

    <div class="proc-card fade-up">
      <svg class="proc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <circle cx="12" cy="18" r="4"/>
        <path d="M12 14V8"/>
        <path d="M9 8h6"/>
        <path d="M8 11h8"/>
      </svg>
      <div class="proc-name">Mentoplastia & Genioplastia</div>
      <p class="proc-desc">Refinamento do queixo com prótese de mento ou genioplastia de avanço, suavizando o contorno inferior do rosto e equilibrando as proporções faciais no perfil.</p>
      <span class="proc-tag">Com ou sem prótese</span>
    </div>

    <div class="proc-card fade-up delay-1">
      <svg class="proc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <path d="M12 3c-1.5 0-3 1-4 2.5L7 8h10l-1-2.5C15 4 13.5 3 12 3z"/>
        <path d="M8 8v2a4 4 0 008 0V8"/>
        <path d="M7 14s1 4 5 4 5-4 5-4"/>
      </svg>
      <div class="proc-name">Redução do Pomo de Adão</div>
      <p class="proc-desc">Condroplastia da tireoide para redução da cartilagem laríngea proeminente — um dos procedimentos mais procurados e com recuperação rápida, realizado com sedação.</p>
      <span class="proc-tag">Recuperação rápida</span>
    </div>

    <div class="proc-card fade-up delay-2">
      <svg class="proc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <path d="M12 4C9 4 7 6 7 9c0 2 1 3.5 2 4.5"/>
        <path d="M12 4c3 0 5 2 5 5 0 2-1 3.5-2 4.5"/>
        <path d="M9 13.5C9 16 10.5 19 12 20c1.5-1 3-4 3-6.5"/>
        <path d="M8 17s1 3 4 3 4-3 4-3"/>
      </svg>
      <div class="proc-name">Glotoplastia de Wendler</div>
      <p class="proc-desc">Procedimento cirúrgico vocal que eleva o tom da voz para uma frequência feminina — o único médico na região que realiza esta técnica. Complementa a transformação além do rosto.</p>
      <span class="proc-tag">Diferencial exclusivo</span>
    </div>

  </div>
</section>

<!-- ═══════════════════════════════════════════════ -->
<!-- WHY DR. MARCO                                  -->
<!-- ═══════════════════════════════════════════════ -->
<section id="why">
  <div class="section-header">
    <div class="section-eyebrow">Por que o Dr. Marco</div>
    <h2 class="section-title">Diferenciais que <strong>importam de verdade</strong></h2>
  </div>

  <div class="why-grid">

    <div class="why-card fade-up">
      <svg class="why-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
      </svg>
      <div>
        <div class="why-title">30 Anos exclusivamente em Cirurgia Facial</div>
        <p class="why-text">Não é um cirurgião plástico geral que também faz face. É um especialista em Otorrinolaringologia e Cirurgia Plástica Facial que opera exclusivamente a região da cabeça e pescoço desde 1995. São mais de 6.000 cirurgias faciais realizadas.</p>
      </div>
    </div>

    <div class="why-card fade-up delay-1">
      <svg class="why-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <rect x="3" y="3" width="18" height="18" rx="2"/>
        <path d="M9 9h6M9 12h6M9 15h4"/>
        <path d="M3 9h2M3 12h2M3 15h2"/>
      </svg>
      <div>
        <div class="why-title">Credencial Internacional AAFPRS</div>
        <p class="why-text">Membro Internacional da American Academy of Facial Plastic and Reconstructive Surgery (AAFPRS) — a principal academia de cirurgia plástica facial do mundo. Uma credencial de excelência que posicionam o Dr. Marco entre os especialistas faciais mais qualificados do Brasil.</p>
      </div>
    </div>

    <div class="why-card fade-up delay-2">
      <svg class="why-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
        <path d="M9 22V12h6v10"/>
      </svg>
      <div>
        <div class="why-title">Centro Cirúrgico Próprio</div>
        <p class="why-text">Clínica na Rua Oswaldo Cruz, 125, com centro cirúrgico próprio e completo. Isso significa controle total sobre cada etapa — do ambiente ao protocolo. Nenhuma dependência de hospital ou agenda de terceiros para sua cirurgia.</p>
      </div>
    </div>

    <div class="why-card fade-up delay-3">
      <svg class="why-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <circle cx="12" cy="12" r="10"/>
        <path d="M2 12h20M12 2a15.3 15.3 0 010 20M12 2a15.3 15.3 0 000 20"/>
      </svg>
      <div>
        <div class="why-title">Atende Pacientes Internacionais</div>
        <p class="why-text">Pacientes de outros estados e países já realizaram a transformação em Governador Valadares. A maioria das cirurgias é feita com sedação e anestesia local — sem anestesia geral — o que reduz riscos e acelera a recuperação.</p>
      </div>
    </div>

  </div>
</section>

<!-- ═══════════════════════════════════════════════ -->
<!-- TESTIMONIALS                                   -->
<!-- ═══════════════════════════════════════════════ -->
<section id="testimonials">
  <div class="section-header">
    <div class="section-eyebrow">Depoimentos</div>
    <h2 class="section-title">Quem passou por aqui <strong>conta a própria história</strong></h2>
  </div>

  <div class="testimonials-grid">

    <div class="testi-card fade-up">
      <div class="testi-stars">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
      </div>
      <svg class="testi-google" width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
      </svg>
      <p class="testi-text">"Fiz a frontoplastia e a rinoplastia com o Dr. Marco. Vim de São Paulo especialmente para isso, depois de pesquisar muito. O resultado superou tudo que eu esperava. Me olho no espelho e finalmente me reconheço."</p>
      <div class="testi-author">A. R.</div>
      <div class="testi-origin">São Paulo — SP &nbsp;·&nbsp; Google Reviews</div>
    </div>

    <div class="testi-card fade-up delay-1">
      <div class="testi-stars">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
      </div>
      <svg class="testi-google" width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
      </svg>
      <p class="testi-text">"Realizei a glotoplastia e o pomo de Adão. A equipe me acolheu de um jeito que eu não esperava encontrar numa clínica cirúrgica. O Dr. Marco explicou tudo com calma, sem julgamento. É um médico que respeita quem você é."</p>
      <div class="testi-author">L. C.</div>
      <div class="testi-origin">Belo Horizonte — MG &nbsp;·&nbsp; Google Reviews</div>
    </div>

    <div class="testi-card fade-up delay-2">
      <div class="testi-stars">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
      </div>
      <svg class="testi-google" width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
      </svg>
      <p class="testi-text">"Vim da Europa para realizar minha feminização com o Dr. Marco. A credencial na academia americana pesou muito na minha decisão. Resultado excelente, comunicação clara durante todo o processo, e pós-operatório sem complicações."</p>
      <div class="testi-author">V. M.</div>
      <div class="testi-origin">Portugal &nbsp;·&nbsp; Google Reviews</div>
    </div>

  </div>

  <div class="google-badge fade-up">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
      <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
      <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
      <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
      <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
    </svg>
    <span>Avaliações reais de pacientes &mdash; <strong>substitua pelos seus reviews do Google</strong> para máxima credibilidade</span>
  </div>
</section>

<!-- ═══════════════════════════════════════════════ -->
<!-- GALLERY                                        -->
<!-- ═══════════════════════════════════════════════ -->
<section id="gallery">
  <div class="gallery-inner">
    <div class="section-header" style="margin-bottom:0">
      <div class="section-eyebrow">Resultados</div>
      <h2 class="section-title">Transformações <strong>reais</strong></h2>
    </div>

    <div class="gallery-grid" style="margin-top:60px">
      <div class="gallery-item">
        <img src="/wp-content/uploads/A4905368-B1F9-462E-813D-6FA7ABD001B6.jpeg"
             alt="Frontoplastia — avanço capilar antes e depois"
             loading="lazy">
        <div class="gallery-label">Frontoplastia — Avanço Capilar</div>
      </div>
      <div class="gallery-item">
        <img src="/wp-content/uploads/F3B9CF27-2058-4AC2-BD9A-47C40957AB69.jpeg"
             alt="Frontoplastia — evolução pré, intra e pós-operatório"
             loading="lazy">
        <div class="gallery-label">Frontoplastia — Evolução Pós-Op</div>
      </div>
      <div class="gallery-item">
        <img src="/wp-content/uploads/IMG_9668.jpeg"
             alt="Frontoplastia de feminização facial — antes e depois"
             loading="lazy">
        <div class="gallery-label">Frontoplastia — Feminização Facial</div>
      </div>
      <div class="gallery-item">
        <img src="/wp-content/uploads/Design_sem_nome.jpeg"
             alt="Rinoplastia — perfil antes e depois"
             loading="lazy">
        <div class="gallery-label">Rinoplastia — Perfil</div>
      </div>
      <div class="gallery-item">
        <img src="/wp-content/uploads/Design_sem_nome_3.jpeg"
             alt="Rinoplastia — vista inferior antes e depois"
             loading="lazy">
        <div class="gallery-label">Rinoplastia — Vista Inferior</div>
      </div>
      <div class="gallery-item">
        <img src="/wp-content/uploads/IMG_9600.jpeg"
             alt="Dr. Marco em cirurgia — centro cirúrgico próprio"
             loading="lazy">
        <div class="gallery-label">Centro Cirúrgico Próprio</div>
      </div>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════════ -->
<!-- ABOUT                                          -->
<!-- ═══════════════════════════════════════════════ -->
<section id="about">
  <div class="about-inner">

    <div class="about-photo fade-up">
      <div class="about-photo-frame">
        <img src="/wp-content/uploads/4ADB0F4E-D076-4697-BD64-1C452FA47BF1.png"
             alt="Dr. Marco Aurélio Linhares — Cirurgião Plástico Facial"
             loading="lazy">
      </div>
      <div class="about-copper-line"></div>
    </div>

    <div class="about-content">
      <div class="section-eyebrow">Sobre o médico</div>
      <h2 class="section-title">Dr. Marco Aurélio <strong>Linhares</strong></h2>

      <p class="about-text">
        Otorrinolaringologista e Cirurgião Plástico Facial com especialização desde 1995, o Dr. Marco Aurélio Linhares construiu sua carreira com um único foco: a face humana. São mais de 140 congressos e cursos internacionais frequentados, e um portfólio de 6.000 cirurgias que traduzem décadas de aprimoramento técnico.
      </p>
      <p class="about-text">
        Sua formação dupla — otorrinolaringologia e cirurgia plástica facial — é rara e estratégica: permite dominar tanto a estrutura óssea quanto os tecidos moles do rosto, o que é especialmente crítico na feminização facial, onde milímetros definem o resultado.
      </p>

      <ul class="credentials-list">
        <li><span class="cred-dot"></span><span>Médico formado em 1992, com título de especialista desde <span class="cred-highlight">1994</span></span></li>
        <li><span class="cred-dot"></span><span>Membro Internacional da <span class="cred-highlight">American Academy of Facial Plastic and Reconstructive Surgery — AAFPRS</span></span></li>
        <li><span class="cred-dot"></span><span>Membro Titular da <span class="cred-highlight">Academia Brasileira de Cirurgia Plástica da Face — ABCPF</span></span></li>
        <li><span class="cred-dot"></span><span>Membro da <span class="cred-highlight">Academia Brasileira de Rinoplastia — ABR</span></span></li>
        <li><span class="cred-dot"></span><span>Membro da <span class="cred-highlight">Associação Brasileira de Otorrinolaringologia e Cirurgia Cérvico-Facial — ABORL-CCF</span></span></li>
        <li><span class="cred-dot"></span><span><span class="cred-highlight">CRM-MG 26110</span> · RQE 9088 — Governador Valadares (MG)</span></li><li><span class="cred-dot"></span><span><span class="cred-highlight">CRM-ES 21172</span> · RQE 14802 — Vitória (ES)</span></li>
        <li><span class="cred-dot"></span><span>Mais de <span class="cred-highlight">140 congressos internacionais</span> e cursos de atualização</span></li>
        <li><span class="cred-dot"></span><span>Mais de <span class="cred-highlight">52.347 pacientes atendidos</span> ao longo da carreira</span></li>
      </ul>

      <!-- ACADEMIAS -->
      <div style="margin-top:44px;">
        <div style="font-size:10px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--copper);margin-bottom:20px;">Membros & Afiliações</div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">

          <!-- AAFPRS -->
          <div style="border:1px solid rgba(255,255,255,0.08);padding:18px 20px;transition:border-color 0.2s;" onmouseover="this.style.borderColor='rgba(181,97,74,0.4)'" onmouseout="this.style.borderColor='rgba(255,255,255,0.08)'">
            <div style="font-size:22px;font-weight:700;font-family:'Cormorant Garamond',serif;color:var(--gold);letter-spacing:0.05em;line-height:1;">AAFPRS</div>
            <div style="font-size:10px;font-weight:500;color:rgba(255,255,255,0.35);letter-spacing:0.08em;text-transform:uppercase;margin-top:6px;line-height:1.5;">American Academy of<br>Facial Plastic &amp; Reconstructive Surgery</div>
            <div style="margin-top:10px;display:inline-block;font-size:9px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--blush);border:1px solid rgba(242,213,200,0.25);padding:3px 8px;">Membro Internacional</div>
          </div>

          <!-- ABCPF -->
          <div style="border:1px solid rgba(255,255,255,0.08);padding:18px 20px;transition:border-color 0.2s;" onmouseover="this.style.borderColor='rgba(181,97,74,0.4)'" onmouseout="this.style.borderColor='rgba(255,255,255,0.08)'">
            <div style="font-size:22px;font-weight:700;font-family:'Cormorant Garamond',serif;color:var(--gold);letter-spacing:0.05em;line-height:1;">ABCPF</div>
            <div style="font-size:10px;font-weight:500;color:rgba(255,255,255,0.35);letter-spacing:0.08em;text-transform:uppercase;margin-top:6px;line-height:1.5;">Academia Brasileira de<br>Cirurgia Plástica da Face</div>
            <div style="margin-top:10px;display:inline-block;font-size:9px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--blush);border:1px solid rgba(242,213,200,0.25);padding:3px 8px;">Membro Titular</div>
          </div>

          <!-- ABR -->
          <div style="border:1px solid rgba(255,255,255,0.08);padding:18px 20px;transition:border-color 0.2s;" onmouseover="this.style.borderColor='rgba(181,97,74,0.4)'" onmouseout="this.style.borderColor='rgba(255,255,255,0.08)'">
            <div style="font-size:22px;font-weight:700;font-family:'Cormorant Garamond',serif;color:var(--gold);letter-spacing:0.05em;line-height:1;">ABR</div>
            <div style="font-size:10px;font-weight:500;color:rgba(255,255,255,0.35);letter-spacing:0.08em;text-transform:uppercase;margin-top:6px;line-height:1.5;">Academia Brasileira<br>de Rinoplastia</div>
            <div style="margin-top:10px;display:inline-block;font-size:9px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--blush);border:1px solid rgba(242,213,200,0.25);padding:3px 8px;">Membro</div>
          </div>

          <!-- ABORL-CCF -->
          <div style="border:1px solid rgba(255,255,255,0.08);padding:18px 20px;transition:border-color 0.2s;" onmouseover="this.style.borderColor='rgba(181,97,74,0.4)'" onmouseout="this.style.borderColor='rgba(255,255,255,0.08)'">
            <div style="font-size:22px;font-weight:700;font-family:'Cormorant Garamond',serif;color:var(--gold);letter-spacing:0.05em;line-height:1;">ABORL</div>
            <div style="font-size:10px;font-weight:500;color:rgba(255,255,255,0.35);letter-spacing:0.08em;text-transform:uppercase;margin-top:6px;line-height:1.5;">Associação Brasileira de<br>Otorrinolaringologia e Cirurgia Cérvico-Facial</div>
            <div style="margin-top:10px;display:inline-block;font-size:9px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--blush);border:1px solid rgba(242,213,200,0.25);padding:3px 8px;">Membro</div>
          </div>

        </div>
      </div>
    </div>

  </div>
</section>

<!-- ═══════════════════════════════════════════════ -->
<!-- HOW IT WORKS                                   -->
<!-- ═══════════════════════════════════════════════ -->
<section id="how">
  <div class="section-header">
    <div class="section-eyebrow">Sua jornada</div>
    <h2 class="section-title">Como funciona <strong>o processo</strong></h2>
  </div>

  <div class="steps-grid">
    <div class="step fade-up">
      <div class="step-num">1</div>
      <div class="step-title">Avaliação</div>
      <p class="step-desc">Consulta médica presencial ou por videoconferência para entender suas queixas, seus objetivos e a estrutura facial.</p>
    </div>
    <div class="step fade-up delay-1">
      <div class="step-num">2</div>
      <div class="step-title">Planejamento</div>
      <p class="step-desc">Análise facial individualizada e definição do protocolo cirúrgico — quais procedimentos, em qual ordem e com qual técnica.</p>
      <div style="margin-top:20px;overflow:hidden;border-radius:4px;">
        <img src="/wp-content/uploads/IMG_9034.jpeg"
             alt="Dr. Marco realizando análise facial pré-operatória"
             loading="lazy"
             style="width:100%;height:160px;object-fit:cover;object-position:center top;">
      </div>
    </div>
    <div class="step fade-up delay-2">
      <div class="step-num">3</div>
      <div class="step-title">Cirurgia</div>
      <p class="step-desc">Realizada no centro cirúrgico próprio da clínica, com sedação e anestesia local. Sem anestesia geral na maioria dos procedimentos.</p>
    </div>
    <div class="step fade-up delay-3">
      <div class="step-num">4</div>
      <div class="step-title">Acompanhamento</div>
      <p class="step-desc">Consultas pós-operatórias programadas, com suporte da equipe durante toda a recuperação até o resultado final consolidado.</p>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════════ -->
<!-- FINAL CTA                                      -->
<!-- ═══════════════════════════════════════════════ -->
<section id="cta-final">
  <div class="cta-final-inner">
    <div class="cta-eyebrow fade-up">Dê o primeiro passo</div>
    <h2 class="cta-headline fade-up delay-1">
      A consulta de avaliação<br>é onde tudo <em>começa.</em>
    </h2>
    <p class="cta-sub fade-up delay-2">
      Sem compromisso, sem pressão. Venha conversar sobre seus objetivos e entender o que é possível para o seu rosto — com quem tem 30 anos de experiência para orientar cada decisão.
    </p>
    <div class="cta-action fade-up delay-3">
      <a href="https://wa.me/5533999575835?text=Olá,%20vim%20da%20página%20de%20Feminização%20Facial%20e%20gostaria%20de%20agendar%20minha%20avaliação." class="btn-lg" target="_blank" rel="noopener">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
        Agendar minha avaliação agora
      </a>
      <div class="cta-phone">Prefere ligar? <a href="tel:+553332253344">(33) 3225-3344</a></div>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════════ -->
<!-- FOOTER                                         -->
<!-- ═══════════════════════════════════════════════ -->
<footer>
  <div class="footer-inner">
    <div>
      <!-- Logo SVG inline simplificado — substitua pela imagem PNG em branco -->
      <svg width="160" height="40" viewBox="0 0 160 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <text x="0" y="14" font-family="Inter" font-size="9" fill="#C9A96E" letter-spacing="3" font-weight="500">CLÍNICA FACIAL</text>
        <text x="0" y="28" font-family="Inter" font-size="13" fill="white" font-weight="600">DR. MARCO AURÉLIO</text>
        <text x="0" y="40" font-family="Inter" font-size="13" fill="white" font-weight="600">LINHARES</text>
      </svg>
      <div class="footer-brand" style="margin-top:16px">
        CRM-MG 26110 · RQE 9088<br>
        CRM-ES 21172 · RQE 14802<br>
        AAFPRS · ABCPF · ABR · ABORL-CCF<br>
        Especialista desde 1995
      </div>
    </div>

    <div>
      <div class="footer-col-title">Contato</div>
      <div class="footer-text">
        <a href="https://wa.me/5533999575835">WhatsApp: (33) 99957-5835</a><br>
        <a href="tel:+553332253344">Telefone: (33) 3225-3344</a><br><br>
        Seg – Sex, 8h às 18h<br>
        Sab, 8h às 12h
      </div>
    </div>

    <div>
      <div class="footer-col-title">Endereço</div>
      <div class="footer-text">
        Rua Oswaldo Cruz, 125<br>
        Centro — Governador Valadares, MG<br>
        CEP 35010-210<br><br>
        <a href="https://www.instagram.com/drmarcoaureliolinhares" target="_blank" rel="noopener">
          @drmarcoaureliolinhares
        </a><br>
        <a href="https://www.instagram.com/cirurgiadefeminizacaofacial" target="_blank" rel="noopener">
          @cirurgiadefeminizacaofacial
        </a>
      </div>
    </div>
  </div>

  <div class="footer-bottom">
    <span>© 2025 Clínica Facial Dr. Marco Aurélio Linhares. Todos os direitos reservados.</span>
    <span>CRM-MG 26110 · RQE 9088 &nbsp;|&nbsp; CRM-ES 21172 · RQE 14802</span>
  </div>
</footer>

<!-- ═══════════════════════════════════════════════ -->
<!-- SCRIPTS                                        -->
<!-- ═══════════════════════════════════════════════ -->
<script>
// Nav scroll
const navbar = document.getElementById('navbar');
const sideLabel = document.getElementById('sideLabel');
window.addEventListener('scroll', () => {
  if (window.scrollY > 60) {
    navbar.classList.add('scrolled');
    sideLabel.classList.add('light');
  } else {
    navbar.classList.remove('scrolled');
    sideLabel.classList.remove('light');
  }
}, { passive: true });

// Intersection Observer for fade-up
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });

document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));

// Counter animation for trust bar
function animateCounter(el, target, suffix = '') {
  const duration = 1800;
  const start = performance.now();
  const update = (time) => {
    const progress = Math.min((time - start) / duration, 1);
    const eased = 1 - Math.pow(1 - progress, 3);
    const value = Math.floor(eased * target);
    el.textContent = value.toLocaleString('pt-BR') + suffix;
    if (progress < 1) requestAnimationFrame(update);
    else el.textContent = target.toLocaleString('pt-BR') + suffix;
  };
  requestAnimationFrame(update);
}

const trustObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const nums = entry.target.querySelectorAll('.trust-number');
      const data = [
        { val: 30, suffix: '+' },
        { val: 5869, suffix: '' },
        { val: 52347, suffix: '' },
        { val: null, suffix: '' },
      ];
      nums.forEach((el, i) => {
        if (data[i].val !== null) animateCounter(el, data[i].val, data[i].suffix);
      });
      trustObserver.unobserve(entry.target);
    }
  });
}, { threshold: 0.3 });

const trustSection = document.querySelector('#trust');
if (trustSection) trustObserver.observe(trustSection);
</script>

</body>
</html>/* End custom CSS */