/* ══════════════════════════════════════════════════════════════
   shared.css — CSS unificado para index.html e elevare.html
   Fonte base: index.css (estrutura) + melhorias de elevare.css
   ══════════════════════════════════════════════════════════════ */

/* ══════ PERFORMANCE ══════ */
/* Seções fora da viewport são renderizadas sob demanda */
.ozonio-info,
.video-sec,
.indicado-sec,
.resultados-sec,
.insta-sec,
.servicos-sec,
.porque-sec,
.sobre-sec,
.localizacao-sec,
.cta-final-sec {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px
}

/* Respeita preferência do usuário por menos animação */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-l, .reveal-r {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important
  }
  .marquee-track, .insta-track {
    animation: none !important
  }
}

/* ══════ CUSTOM PROPERTIES ══════ */
:root {
  --roxo: #2D0A3E;
  --roxo-mid: #4A1060;
  --ouro: #C9A84C;
  --ouro-light: #E4C97A;
  --branco: #FDFBFE;
  --preto: #080510;
  --escuro: #110818;
  --cinza: #9A8FA8;
  --linha: rgba(201, 168, 76, .14);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Raleway', sans-serif;
}

/* ══════ RESET ══════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  background: var(--preto);
  color: var(--branco);
  -webkit-font-smoothing: antialiased
}

img {
  display: block;
  max-width: 100%;
  height: auto
}

/* ══════ KEYFRAMES ══════ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes fadeIn {
  from { opacity: 0 }
  to   { opacity: 1 }
}

@keyframes marquee {
  from { transform: translateX(0) }
  to   { transform: translateX(-50%) }
}

@keyframes waPulse {
  0% {
    transform: scale(.92);
    opacity: .7
  }
  70% {
    transform: scale(1.28);
    opacity: 0
  }
  100% {
    transform: scale(1.28);
    opacity: 0
  }
}

@keyframes insta-scroll {
  from { transform: translateX(0) }
  to   { transform: translateX(-50%) }
}

/* ══════ REVEAL ANIMATIONS ══════ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1)
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0)
}

.reveal-l {
  opacity: 0;
  transform: translateX(-26px);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1)
}

.reveal-l.visible {
  opacity: 1;
  transform: translateX(0)
}

.reveal-r {
  opacity: 0;
  transform: translateX(26px);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1)
}

.reveal-r.visible {
  opacity: 1;
  transform: translateX(0)
}

.d1 { transition-delay: .12s }
.d2 { transition-delay: .24s }
.d3 { transition-delay: .36s }
.d4 { transition-delay: .48s }

/* ══════ TIPOGRAFIA ══════ */
.sec-tag {
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ouro);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px
}

.sec-tag::before {
  content: '';
  width: 24px;
  height: 1px;
  background: linear-gradient(to right, var(--ouro), rgba(201, 168, 76, .3))
}

.sec-h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 300;
  line-height: 1.08
}

.sec-h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--ouro), var(--ouro-light), rgba(196, 127, 212, .85));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.sec-lead {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(253, 251, 254, .68);
  max-width: 520px;
  margin-top: 18px
}

.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, .2), rgba(139, 53, 160, .15), transparent)
}

/* ══════ ÍCONES ══════ */
.icon svg {
  width: 100%;
  height: 100%;
  display: block
}

.icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(201, 168, 76, .12), rgba(201, 168, 76, .06));
  border: 1px solid rgba(201, 168, 76, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ouro);
  transition: background .3s, border-color .3s
}

.icon-circle:hover {
  background: rgba(201, 168, 76, .18);
  border-color: rgba(201, 168, 76, .4)
}

.icon-circle svg {
  width: 18px;
  height: 18px
}

.icon-circle-sm {
  width: 36px;
  height: 36px
}

.icon-circle-sm svg {
  width: 15px;
  height: 15px
}

.icon-circle-lg {
  width: 52px;
  height: 52px
}

.icon-circle-lg svg {
  width: 22px;
  height: 22px
}

/* ══════ BOTÕES ══════ */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 36px;
  background: linear-gradient(135deg, var(--ouro), var(--ouro-light));
  color: var(--preto);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(201, 168, 76, .15);
  transition: all .3s cubic-bezier(.25, .8, .25, 1)
}

.btn-gold:hover {
  opacity: .95;
  letter-spacing: .19em;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201, 168, 76, .3)
}

.btn-gold .arr {
  transition: transform .3s
}

.btn-gold:hover .arr {
  transform: translateX(4px)
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: transparent;
  border: 1px solid rgba(201, 168, 76, .4);
  border-radius: 30px;
  color: var(--ouro-light);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all .3s cubic-bezier(.25, .8, .25, 1)
}

.btn-outline:hover {
  border-color: rgba(201, 168, 76, .8);
  background: rgba(201, 168, 76, .08);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(201, 168, 76, .12)
}

.btn-maps {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  margin-top: 8px;
  background: linear-gradient(135deg, rgba(201, 168, 76, .08), rgba(139, 53, 160, .06));
  border: 1px solid rgba(201, 168, 76, .25);
  border-radius: 30px;
  color: var(--ouro-light);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all .3s cubic-bezier(.25, .8, .25, 1)
}

.btn-maps:hover {
  background: linear-gradient(135deg, rgba(201, 168, 76, .14), rgba(139, 53, 160, .1));
  border-color: rgba(201, 168, 76, .45);
  letter-spacing: .16em;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(201, 168, 76, .1)
}

.btn-maps svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0
}

/* ══════ NAV ══════ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 64px;
  transition: all .4s
}

nav.scrolled {
  background: rgba(8, 5, 16, .94);
  backdrop-filter: blur(20px);
  padding: 14px 64px;
  border-bottom: 1px solid var(--linha)
}

.nav-logo img {
  height: 60px;
  width: auto
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none
}

.nav-links a {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cinza);
  text-decoration: none;
  transition: color .2s
}

.nav-links a:hover {
  color: var(--ouro-light)
}

/* ══════ MENU HAMBÚRGUER ══════ */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 1001;
  position: relative
}

.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--branco);
  border-radius: 2px;
  transition: transform .3s, opacity .3s, width .3s
}

.nav-toggle span:nth-child(1) { width: 22px }
.nav-toggle span:nth-child(2) { width: 16px }
.nav-toggle span:nth-child(3) { width: 22px }

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  width: 20px;
  transform: translateY(6.5px) rotate(45deg)
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0)
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  width: 20px;
  transform: translateY(-6.5px) rotate(-45deg)
}

.nav-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background: rgba(8, 5, 16, .97);
  backdrop-filter: blur(20px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s
}

.nav-overlay.open {
  opacity: 1;
  pointer-events: all
}

.nav-mob-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 40px
}

.nav-mob-links li {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid rgba(201, 168, 76, .08)
}

.nav-mob-links li:first-child {
  border-top: 1px solid rgba(201, 168, 76, .08)
}

.nav-mob-links a {
  display: block;
  padding: 20px 48px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(253, 251, 254, .7);
  text-decoration: none;
  transition: color .2s, background .2s
}

.nav-mob-links a:hover,
.nav-mob-links a:active {
  color: var(--ouro-light);
  background: rgba(201, 168, 76, .04)
}

.nav-mob-cta {
  font-size: 11px !important;
  padding: 13px 32px !important
}

/* ══════ HERO ══════ */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 55% 70% at 68% 35%, rgba(107, 32, 128, .3) 0%, transparent 62%),
    radial-gradient(ellipse 30% 50% at 12% 72%, rgba(61, 13, 87, .2) 0%, transparent 55%), var(--preto)
}

.hero-left {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 56px 80px 80px
}

.eyebrow {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ouro);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  animation: fadeIn .9s ease both .3s
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(to right, var(--ouro), transparent)
}

.hero-h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 4.8vw, 64px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.01em;
  margin-bottom: 18px;
  animation: fadeUp .9s cubic-bezier(.22, 1, .36, 1) both .42s
}

.hero-h1 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--ouro), var(--ouro-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.hero-sub {
  font-size: 15px;
  line-height: 1.85;
  color: rgba(253, 251, 254, .72);
  max-width: 400px;
  margin-bottom: 14px;
  animation: fadeUp .9s cubic-bezier(.22, 1, .36, 1) both .54s
}

.hero-reforco {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ouro-light);
  margin-bottom: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeIn .9s ease both .62s
}

.hero-reforco::before {
  content: '—';
  color: var(--ouro);
  opacity: .5
}

.hero-desc {
  font-size: 14px;
  line-height: 1.95;
  color: rgba(253, 251, 254, .68);
  max-width: 420px;
  margin-bottom: 44px
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  animation: fadeUp .9s cubic-bezier(.22, 1, .36, 1) both .7s
}

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

.hero-note {
  font-size: 11px;
  color: rgba(253, 251, 254, .42);
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 8px
}

.hero-note::before {
  content: '';
  width: 14px;
  height: 1px;
  background: rgba(201, 168, 76, .3)
}

.hero-stats {
  display: flex;
  gap: 44px;
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid var(--linha);
  animation: fadeIn 1s ease both .9s
}

.stat-n {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  background: linear-gradient(135deg, var(--branco), rgba(196, 127, 212, .7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.stat-n em {
  font-size: 20px;
  font-style: normal;
  -webkit-text-fill-color: var(--ouro)
}

.stat-l {
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #B5A8BD;
  margin-top: 6px
}

.hero-right {
  position: relative;
  z-index: 2;
  overflow: hidden;
  animation: fadeIn 1.2s ease both .2s
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--preto) 0%, rgba(8, 5, 16, .08) 22%, transparent 44%),
    linear-gradient(to top, rgba(8, 5, 16, .6) 0%, transparent 40%)
}

.hero-badge {
  position: absolute;
  bottom: 48px;
  right: 44px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(8, 5, 16, .82), rgba(29, 5, 44, .7));
  border: 1px solid rgba(201, 168, 76, .35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(201, 168, 76, .1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute
}

.hero-badge::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, .1);
  pointer-events: none
}

.hero-badge-icon {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ouro);
  line-height: 1
}

.hero-badge-l {
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ouro-light);
  margin-top: 4px;
  text-align: center;
  line-height: 1.4
}

/* ══════ BARRA DE CONFIANÇA ══════ */
.confianca-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(135deg, rgba(45, 10, 62, .4), var(--escuro));
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha)
}

.confianca-item {
  padding: 26px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-right: 1px solid var(--linha)
}

.confianca-item:last-child {
  border-right: none
}

.confianca-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(201, 168, 76, .12);
  border: 1px solid rgba(201, 168, 76, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ouro)
}

.confianca-check svg {
  width: 13px;
  height: 13px
}

.confianca-text {
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(253, 251, 254, .82);
  font-weight: 400
}

/* ══════ MARQUEE ══════ */
.marquee-strip {
  padding: 13px 0;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(29, 5, 44, .95), rgba(45, 10, 62, .9));
  border-bottom: 1px solid var(--linha)
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite
}

.marquee-track:hover {
  animation-play-state: paused
}

.marquee-set {
  display: flex;
  align-items: center
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 36px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(253, 251, 254, .6);
  border-right: 1px solid rgba(201, 168, 76, .1)
}

.marquee-diamond {
  width: 4px;
  height: 4px;
  background: var(--ouro);
  transform: rotate(45deg);
  flex-shrink: 0
}

/* ══════ VOCÊ SE IDENTIFICA (DOR) ══════ */
.dor-sec {
  padding: 100px 80px;
  background: linear-gradient(158deg, rgba(29, 5, 44, .85) 0%, var(--escuro) 55%, var(--preto) 100%)
}

.dor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  margin-top: 52px;
  align-items: start
}

.dor-quote {
  font-family: var(--serif);
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: rgba(253, 251, 254, .72);
  padding-left: 24px;
  border-left: 2px solid var(--ouro);
  margin-bottom: 24px
}

.dor-lista {
  display: flex;
  flex-direction: column;
  gap: 0
}

.dor-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(201, 168, 76, .07);
  font-size: 13px;
  line-height: 1.65;
  color: rgba(253, 251, 254, .72);
  transition: color .3s, padding-left .3s
}

.dor-item:last-child {
  border-bottom: none
}

.dor-item:hover {
  color: rgba(253, 251, 254, .75);
  padding-left: 6px
}

.dor-item::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  background: rgba(201, 168, 76, .4);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-top: 5px
}

.dor-item .icon {
  color: var(--ouro);
  opacity: .6;
  margin-top: 2px
}

.dor-item:hover .icon {
  opacity: 1
}

/* ══════ OZÔNIO / ELEVARE INFO ══════ */
.ozonio-info {
  padding: 88px 80px;
  background: var(--preto)
}

.ozonio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 68px;
  margin-top: 48px;
  align-items: start
}

.ozonio-frase {
  font-family: var(--serif);
  font-size: clamp(19px, 2.3vw, 30px);
  font-weight: 300;
  line-height: 1.45;
  margin-bottom: 20px
}

.ozonio-frase strong {
  font-weight: 400;
  color: var(--ouro-light)
}

.ozonio-desc {
  font-size: 14px;
  line-height: 1.85;
  color: rgba(253, 251, 254, .7);
  margin-bottom: 20px
}

.ozonio-cite {
  padding: 16px 20px;
  border-left: 2px solid var(--ouro);
  background: rgba(201, 168, 76, .05);
  margin-top: 22px
}

.ozonio-cite p {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  line-height: 1.65;
  color: rgba(253, 251, 254, .7)
}

.ozonio-cite span {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-top: 7px;
  display: block
}

.ozonio-usos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--linha)
}

.ozonio-uso {
  background: rgba(15, 6, 22, .92);
  padding: 15px 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: background .25s
}

.ozonio-uso:hover {
  background: rgba(45, 10, 62, .6)
}

.ozonio-uso-dot {
  width: 5px;
  height: 5px;
  background: var(--ouro);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
  opacity: .7
}

.ozonio-uso-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(253, 251, 254, .75)
}

.ozonio-uso-text strong {
  font-weight: 500;
  color: rgba(253, 251, 254, .92);
  display: block;
  margin-bottom: 2px;
  font-size: 13.5px
}

/* ══════ ELEVARE INFO (elevare.html específico) ══════ */
.elevare-info {
  padding: 100px 80px;
  background: var(--preto)
}

.elevare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  margin-top: 56px;
  align-items: start
}

.elevare-desc {
  font-size: 15px;
  line-height: 1.95;
  color: rgba(253, 251, 254, .68);
  margin-top: 20px
}

.elevare-features {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 32px
}

.el-feat {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(201, 168, 76, .08)
}

.el-feat:last-child {
  border-bottom: none
}

.el-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(201, 168, 76, .08);
  border: 1px solid rgba(201, 168, 76, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ouro)
}

.el-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  color: rgba(253, 251, 254, .85);
  margin-bottom: 4px
}

.el-desc {
  font-size: 12px;
  line-height: 1.65;
  color: rgba(253, 251, 254, .66)
}

.cta-elevare-box {
  margin-top: 40px;
  padding: 28px 32px;
  border: 1px solid var(--linha);
  position: relative
}

.cta-elevare-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--ouro), transparent)
}

.cta-elevare-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 6px
}

.cta-elevare-title em {
  font-style: italic;
  color: var(--ouro-light)
}

.cta-elevare-sub {
  font-size: 12px;
  line-height: 1.65;
  color: rgba(253, 251, 254, .6);
  margin-bottom: 20px
}

.elevare-para-quem {
  padding: 0 80px 100px
}

.pq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--linha);
  margin-top: 48px
}

.pq-card {
  background: var(--escuro);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: background .3s;
  cursor: default
}

.pq-card:hover {
  background: rgba(45, 10, 62, .6)
}

.pq-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--ouro), rgba(139, 53, 160, .5))
}

.pq-card-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--branco);
  margin-bottom: 12px
}

.pq-card-title em {
  font-style: italic;
  color: var(--ouro-light)
}

.pq-card-desc {
  font-size: 13px;
  line-height: 1.75;
  color: rgba(253, 251, 254, .45)
}

/* ══════ NÚMEROS ══════ */
.numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(135deg, rgba(29, 5, 44, .5), var(--escuro));
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha)
}

.num-item {
  padding: 44px 36px;
  border-right: 1px solid var(--linha);
  position: relative;
  overflow: hidden;
  transition: background .3s
}

.num-item:last-child {
  border-right: none
}

.num-item:hover {
  background: rgba(201, 168, 76, .03)
}

.num-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--ouro), rgba(139, 53, 160, .6));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1)
}

.num-item:hover::before {
  transform: scaleX(1)
}

.num-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(201, 168, 76, .1), rgba(201, 168, 76, .04));
  border: 1px solid rgba(201, 168, 76, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ouro);
  margin-bottom: 16px
}

.num-icon svg {
  width: 18px;
  height: 18px
}

.num-n {
  font-family: var(--serif);
  font-size: clamp(42px, 4.5vw, 62px);
  font-weight: 300;
  line-height: 1;
  color: var(--branco);
  margin-bottom: 8px
}

.num-n em {
  font-size: .42em;
  font-style: normal;
  color: var(--ouro)
}

.num-l {
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cinza);
  line-height: 1.5
}

/* ══════ POR QUE ESCOLHER ══════ */
.porque-sec {
  padding: 100px 80px
}

.porque-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linha);
  margin-top: 56px
}

.porque-item {
  background: var(--escuro);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background .3s
}

.porque-item:hover {
  background: rgba(45, 10, 62, .55)
}

.porque-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(201, 168, 76, .12), rgba(139, 53, 160, .08));
  border: 1px solid rgba(201, 168, 76, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ouro)
}

.porque-icon svg {
  width: 21px;
  height: 21px
}

.porque-title {
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(253, 251, 254, .92);
  line-height: 1.4
}

.porque-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(253, 251, 254, .6)
}

/* ══════ PARA QUEM É INDICADO ══════ */
.indicado-sec {
  padding: 100px 80px;
  background: linear-gradient(158deg, rgba(29, 5, 44, .7) 0%, var(--escuro) 100%)
}

.indicado-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linha);
  margin-top: 56px
}

.indicado-card {
  background: var(--escuro);
  padding: 34px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: background .3s
}

.indicado-card:hover {
  background: rgba(45, 10, 62, .55)
}

.indicado-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(201, 168, 76, .1), rgba(139, 53, 160, .07));
  border: 1px solid rgba(201, 168, 76, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ouro)
}

.indicado-icon svg {
  width: 23px;
  height: 23px
}

.indicado-title {
  font-size: 14px;
  font-weight: 500;
  color: rgba(253, 251, 254, .9)
}

/* ══════ SERVIÇOS ══════ */
.servicos-sec {
  padding: 88px 0;
  background: var(--preto)
}

.servicos-header {
  padding: 0 80px;
  margin-bottom: 52px
}

.servicos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr)
}

.card {
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(201, 168, 76, .08);
  border-top: 1px solid rgba(201, 168, 76, .08);
  transition: background .3s
}

.card:last-child {
  border-right: none
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--ouro), rgba(139, 53, 160, .7));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1)
}

.card:hover {
  background: rgba(201, 168, 76, .025)
}

.card:hover::before {
  transform: scaleX(1)
}

.card-num {
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, .5);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px
}

.card-num::before {
  content: '';
  width: 20px;
  height: 1px;
  background: rgba(201, 168, 76, .3)
}

.card-badge {
  display: inline-flex;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 20px;
  border: 1px solid rgba(201, 168, 76, .22);
  color: var(--ouro)
}

.card-badge.gold {
  background: linear-gradient(135deg, var(--ouro), var(--ouro-light));
  border: none;
  color: var(--preto);
  font-weight: 600
}

.card-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(201, 168, 76, .1), rgba(139, 53, 160, .08));
  border: 1px solid rgba(201, 168, 76, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: var(--ouro);
  transition: background .35s, border-color .35s
}

.card-icon-wrap svg {
  width: 22px;
  height: 22px
}

.card:hover .card-icon-wrap {
  background: linear-gradient(135deg, rgba(201, 168, 76, .18), rgba(139, 53, 160, .12));
  border-color: rgba(201, 168, 76, .35)
}

.card-title {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 12px
}

.card-title em {
  font-style: italic;
  color: var(--ouro-light)
}

.card-desc {
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(253, 251, 254, .72)
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ouro);
  text-decoration: none;
  font-weight: 500;
  transition: gap .25s, color .25s
}

.card-link::after {
  content: '→'
}

.card-link:hover {
  gap: 13px;
  color: var(--ouro-light)
}

/* ══════ VÍDEO ══════ */
.video-sec {
  padding: 60px 80px;
  background: var(--escuro)
}

.video-sec-inner {
  max-width: 1100px;
  margin: 0 auto
}

.video-sec-header {
  text-align: center;
  margin-bottom: 36px
}

.video-sec-header .sec-tag {
  justify-content: center
}

.video-sec-header p {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(253, 251, 254, .68);
  max-width: 520px;
  margin: 12px auto 0
}

.video-player-wrap {
  width: auto;
  max-width: 360px;
  margin: 0 auto;
  aspect-ratio: 9/16;
  max-height: calc(100vh - 280px);
  overflow: hidden;
  border: 1px solid var(--linha);
  background: #000
}

.video-player-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover
}

.video-cta {
  display: flex;
  justify-content: center;
  margin-top: 28px
}

/* vídeo 2 colunas (elevare) */
.video-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center
}

.video-wrapper {
  position: relative;
  width: 100%;
  border: 1px solid var(--linha)
}

.video-wrapper video {
  width: 100%;
  display: block;
  max-height: 320px;
  object-fit: cover
}

/* ══════ RESULTADOS ══════ */
.resultados-sec {
  padding: 88px 80px;
  background: linear-gradient(158deg, rgba(29, 5, 44, .7) 0%, var(--escuro) 50%, var(--preto) 100%)
}

.resultados-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linha);
  margin-top: 44px
}

.res-card {
  background: rgba(15, 5, 22, .96);
  padding: 30px 26px;
  position: relative;
  overflow: hidden;
  transition: background .3s
}

.res-card:hover {
  background: rgba(40, 8, 60, .55)
}

.res-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--ouro), rgba(139, 53, 160, .5));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s
}

.res-card:hover::after {
  transform: scaleX(1)
}

.res-antes {
  font-family: var(--serif);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.65;
  color: rgba(253, 251, 254, .55);
  padding-left: 14px;
  position: relative;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(201, 168, 76, .08)
}

.res-antes::before {
  content: 'ANTES';
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .14em;
  color: rgba(253, 251, 254, .32);
  margin-bottom: 6px
}

.res-antes::after {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 20px;
  width: 1px;
  background: rgba(255, 255, 255, .1)
}

.res-depois {
  font-family: var(--serif);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.65;
  color: rgba(253, 251, 254, .88);
  padding-left: 14px;
  position: relative;
  margin-bottom: 20px
}

.res-depois::before {
  content: 'DEPOIS';
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--ouro);
  margin-bottom: 6px
}

.res-depois::after {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 4px;
  width: 2px;
  background: var(--ouro)
}

.res-pessoa {
  display: flex;
  align-items: center;
  gap: 12px
}

.res-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(201, 168, 76, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ouro);
  border: 1px solid rgba(201, 168, 76, .22)
}

.res-nome {
  font-size: 13px;
  font-weight: 500;
  color: rgba(253, 251, 254, .9)
}

.res-info {
  font-size: 12px;
  color: var(--cinza);
  margin-top: 2px
}

.stars {
  display: flex;
  gap: 3px;
  margin-top: 4px
}

.star {
  width: 9px;
  height: 9px;
  background: var(--ouro);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
}

/* prova social v2 (elevare) */
.res-card-v2 {
  background: var(--escuro);
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: background .3s
}

.res-card-v2-photo {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  filter: grayscale(15%)
}

.res-card-v2-body {
  padding: 28px 28px 32px
}

/* ══════ SOBRE ══════ */
.sobre-sec {
  padding: 88px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  background: linear-gradient(160deg, var(--preto) 0%, rgba(29, 5, 44, .6) 100%)
}

.sobre-img-wrap {
  position: relative
}

.sobre-img {
  width: 100%;
  aspect-ratio: .78/1;
  object-fit: cover;
  object-position: center 12%;
  display: block
}

.sobre-frame {
  position: absolute;
  top: -12px;
  left: -12px;
  right: 12px;
  bottom: 12px;
  border: 1px solid rgba(201, 168, 76, .16);
  pointer-events: none;
  z-index: 2
}

.sobre-corners span {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--ouro);
  border-style: solid
}

.sobre-corners .tl {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px
}

.sobre-corners .tr {
  top: -1px;
  right: -1px;
  border-width: 2px 2px 0 0
}

.sobre-corners .bl {
  bottom: -1px;
  left: -1px;
  border-width: 0 0 2px 2px
}

.sobre-corners .br {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0
}

.sobre-caption {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 3;
  background: rgba(8, 5, 16, .84);
  padding: 12px 18px;
  border-left: 2px solid var(--ouro)
}

.sobre-caption p {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic
}

.sobre-caption span {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-top: 3px;
  display: block
}

.sobre-desc {
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(253, 251, 254, .7);
  margin: 18px 0
}

.sobre-creds {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 28px
}

.cred-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(201, 168, 76, .08);
  transition: padding-left .3s
}

.cred-item:hover {
  padding-left: 6px
}

.cred-item:last-child {
  border-bottom: none
}

.cred-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(201, 168, 76, .08);
  border: 1px solid rgba(201, 168, 76, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px
}

.cred-text {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(253, 251, 254, .72)
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px
}

.tag {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 13px;
  border: 1px solid rgba(201, 168, 76, .18);
  color: var(--ouro-light);
  transition: all .25s;
  cursor: default
}

.tag:hover {
  border-color: rgba(201, 168, 76, .35);
  background: rgba(201, 168, 76, .05)
}

/* ══════ AUTORIDADE ══════ */
.autoridade {
  padding: 88px 80px;
  background: linear-gradient(158deg, var(--preto) 0%, var(--escuro) 50%, rgba(29, 5, 44, .7) 100%)
}

.autoridade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linha);
  margin-top: 44px
}

.aut-card {
  background: var(--escuro);
  overflow: hidden;
  position: relative;
  aspect-ratio: 1/1
}

.aut-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
  filter: grayscale(15%)
}

.aut-card:hover img {
  transform: scale(1.04);
  filter: grayscale(0%)
}

.aut-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(201, 168, 76, .04) 0%, transparent 50%, rgba(139, 53, 160, .06) 100%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none
}

.aut-card:hover::after {
  opacity: 1
}

.aut-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 5, 16, .88) 0%, transparent 52%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px
}

.aut-label {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 4px
}

.aut-desc {
  font-size: 12.5px;
  color: rgba(253, 251, 254, .8);
  line-height: 1.4
}

/* ══════ LOCALIZAÇÃO ══════ */
.localizacao-sec {
  padding: 88px 80px;
  background: var(--preto)
}

.loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  margin-top: 44px;
  align-items: center
}

.loc-predio {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block
}

.loc-mapa {
  width: 100%;
  height: 320px;
  border: 1px solid rgba(201, 168, 76, .18);
  display: block;
  filter: grayscale(20%) contrast(1.05)
}

.loc-info {
  display: flex;
  flex-direction: column
}

.loc-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(201, 168, 76, .07);
  transition: padding-left .3s
}

.loc-item:hover {
  padding-left: 8px
}

.loc-item:last-child {
  border-bottom: none
}

.loc-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(201, 168, 76, .08);
  border: 1px solid rgba(201, 168, 76, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px
}

.loc-label {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 5px
}

.loc-text {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(253, 251, 254, .72)
}

.loc-wa-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 168, 76, .35);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s
}

.loc-wa-link:hover {
  color: var(--ouro-light);
  border-color: var(--ouro)
}

/* ══════ URGÊNCIA ══════ */
.urgencia-wrap {
  padding: 0 80px 72px
}

.urgencia-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 44px;
  align-items: center;
  padding: 44px 52px;
  background: linear-gradient(135deg, rgba(45, 10, 62, .6) 0%, rgba(29, 5, 44, .85) 50%, rgba(14, 4, 20, .9) 100%);
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative
}

.urgencia-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--ouro) 30%, rgba(139, 53, 160, .5) 70%, transparent)
}

.urgencia-box::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, .2), transparent)
}

.urgencia-title {
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 300;
  margin-bottom: 10px
}

.urgencia-title em {
  font-style: italic;
  color: var(--ouro-light)
}

.urgencia-desc {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(253, 251, 254, .7)
}

.urgencia-bullets {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 9px
}

.urgencia-bullet {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(253, 251, 254, .72)
}

.urgencia-bullet .icon {
  color: var(--ouro);
  flex-shrink: 0
}

.urgencia-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 200px
}

/* ══════ CTA FINAL ══════ */
.cta-final-sec {
  padding: 100px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(160deg, var(--roxo-mid) 0%, rgba(29, 5, 44, .96) 40%, var(--escuro) 100%);
  position: relative;
  overflow: hidden
}

.cta-final-sec::before {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, .05) 0%, transparent 65%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none
}

.cta-final-sec::after {
  content: '';
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, .04) 0%, rgba(139, 53, 160, .03) 40%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none
}

.cta-final-sec .sec-tag {
  justify-content: center;
  position: relative;
  z-index: 2
}

.cta-final-sec .sec-h2 {
  position: relative;
  z-index: 2;
  margin-bottom: 14px
}

.cta-final-desc {
  font-size: 15px;
  line-height: 1.85;
  color: rgba(253, 251, 254, .7);
  max-width: 420px;
  margin-bottom: 10px;
  position: relative;
  z-index: 2
}

.cta-escassez {
  font-size: 11.5px;
  color: rgba(253, 251, 254, .45);
  margin-bottom: 38px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2
}

.cta-escassez::before,
.cta-escassez::after {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: rgba(201, 168, 76, .25)
}

.cta-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
  justify-content: center
}

.cta-fine {
  margin-top: 28px;
  font-size: 11px;
  color: rgba(253, 251, 254, .28);
  letter-spacing: .05em;
  position: relative;
  z-index: 2;
  text-align: center;
  line-height: 1.7
}

/* ══════ INSTAGRAM CARROSSEL ══════ */
.insta-sec {
  padding: 88px 0;
  background: linear-gradient(158deg, rgba(25, 5, 38, .85) 0%, var(--escuro) 55%, var(--preto) 100%);
  overflow: hidden
}

.insta-header {
  text-align: center;
  padding: 0 80px;
  margin-bottom: 48px
}

.insta-sub {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(253, 251, 254, .55);
  margin-top: 10px
}

.insta-track-wrap {
  overflow: hidden;
  padding: 8px 0 24px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%)
}

.insta-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: insta-scroll 36s linear infinite
}

.insta-track-wrap:hover .insta-track {
  animation-play-state: paused
}

.insta-card {
  flex-shrink: 0;
  width: 240px
}

.insta-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(201, 168, 76, .18);
  background: rgba(20, 8, 30, .9)
}

.insta-frame img,
.insta-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s cubic-bezier(.25, .8, .25, 1)
}

.insta-card:hover .insta-frame img,
.insta-card:hover .insta-frame video {
  transform: scale(1.03)
}

.insta-stamp {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 12px 12px;
  background: linear-gradient(to top, rgba(8, 5, 16, .85) 0%, transparent 100%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(253, 251, 254, .7)
}

.insta-stamp svg {
  width: 13px;
  height: 13px;
  color: var(--ouro);
  flex-shrink: 0
}

.insta-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(8, 5, 16, .65);
  border: 1.5px solid rgba(201, 168, 76, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ouro);
  cursor: pointer;
  transition: background .2s, transform .2s;
  z-index: 4;
  pointer-events: all
}

.insta-play-btn:hover {
  background: rgba(201, 168, 76, .18);
  transform: translate(-50%, -50%) scale(1.1)
}

.insta-play-btn svg {
  width: 16px;
  height: 16px;
  margin-left: 3px
}

.insta-play-btn.hidden {
  display: none
}

.insta-cta {
  display: flex;
  justify-content: center;
  margin-top: 36px;
  padding: 0 80px
}

/* ══════ FOOTER ══════ */
footer {
  background: var(--preto);
  padding: 36px 80px;
  border-top: 1px solid rgba(201, 168, 76, .09);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.footer-logo img {
  height: 34px;
  width: auto
}

.footer-mid {
  font-size: 11px;
  color: rgba(253, 251, 254, .3);
  text-align: center;
  line-height: 1.7
}

.footer-cred {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--ouro), var(--ouro-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.bottom-bar {
  background: var(--preto);
  border-top: 1px solid rgba(201, 168, 76, .07);
  padding: 12px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(253, 251, 254, .22);
  text-align: center
}

.bottom-bar-sep {
  color: rgba(201, 168, 76, .3)
}

/* ══════ WHATSAPP FLUTUANTE ══════ */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
  text-decoration: none;
  color: #fff;
  transition: transform .25s ease, box-shadow .25s ease
}

.wa-float:hover {
  transform: scale(1.07);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45)
}

.wa-float svg {
  width: 28px;
  height: 28px
}

.wa-float-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .4);
  animation: waPulse 2.4s ease-out infinite
}

/* ══════════════════════════════════════
   TABLET 769–1024px
══════════════════════════════════════ */
@media(min-width:769px) and (max-width:1024px) {
  nav {
    padding: 18px 36px
  }

  nav.scrolled {
    padding: 13px 36px
  }

  .nav-links {
    gap: 22px
  }

  .nav-links a {
    font-size: 9.5px;
    letter-spacing: .14em
  }

  .hero-left {
    padding: 120px 36px 60px 48px
  }

  .hero-h1 {
    font-size: clamp(38px, 5.2vw, 52px)
  }

  .dor-sec,
  .ozonio-info,
  .elevare-info,
  .porque-sec,
  .indicado-sec,
  .resultados-sec,
  .sobre-sec,
  .autoridade,
  .localizacao-sec,
  .cta-final-sec {
    padding: 72px 48px
  }

  .servicos-sec {
    padding: 72px 0
  }

  .servicos-header {
    padding: 0 48px;
    margin-bottom: 44px
  }

  .card {
    padding: 40px 30px
  }

  .dor-grid,
  .ozonio-grid,
  .elevare-grid,
  .sobre-sec,
  .loc-grid {
    gap: 52px
  }

  .video-2col {
    gap: 40px
  }

  .autoridade-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .resultados-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .num-item {
    padding: 36px 24px
  }

  .urgencia-wrap {
    padding: 0 48px 72px
  }

  .urgencia-box {
    padding: 40px 44px;
    grid-template-columns: 1fr auto
  }

  footer {
    padding: 32px 48px
  }

  .marquee-item {
    padding: 0 28px
  }

  .video-sec {
    padding: 60px 48px
  }

  .video-player-wrap {
    max-width: 300px
  }

  .porque-sec {
    padding: 72px 48px
  }

  .indicado-sec {
    padding: 72px 48px
  }

  .confianca-item {
    padding: 22px 18px
  }

  .confianca-text {
    font-size: 11.5px
  }

  .insta-header,
  .insta-cta {
    padding: 0 48px
  }

  .insta-card {
    width: 200px
  }
}

/* ══════════════════════════════════════
   MOBILE ≤767px
══════════════════════════════════════ */
@media(max-width:767px) {
  nav {
    padding: 16px 20px
  }

  nav.scrolled {
    padding: 12px 20px
  }

  .nav-links {
    display: none
  }

  .nav-cta {
    display: none !important
  }

  .nav-toggle {
    display: flex
  }

  nav .btn-gold {
    font-size: 10px;
    padding: 10px 16px;
    letter-spacing: .1em
  }

  .nav-logo img {
    height: 46px
  }

  .hero {
    grid-template-columns: 1fr
  }

  .hero-right {
    order: 1;
    height: 108vw;
    min-height: 340px;
    max-height: 580px
  }

  .hero-img {
    object-position: center 5%
  }

  .hero-left {
    order: 2;
    padding: 28px 22px 52px
  }

  .hero-h1 {
    font-size: clamp(34px, 10vw, 48px);
    margin-bottom: 14px
  }

  .hero-sub {
    font-size: 15px
  }

  .hero-desc {
    font-size: 13px;
    margin-bottom: 28px
  }

  .hero-reforco {
    margin-top: -18px;
    margin-bottom: 28px;
    font-size: 13px
  }

  .hero-actions-row {
    flex-direction: column;
    width: 100%
  }

  .hero-actions-row .btn-gold,
  .hero-actions-row .btn-outline {
    width: 100%;
    justify-content: center
  }

  .hero-stats {
    gap: 20px;
    margin-top: 32px;
    padding-top: 24px
  }

  .stat-n {
    font-size: 32px
  }

  .hero-badge {
    width: 74px;
    height: 74px;
    bottom: 12px;
    right: 12px
  }

  .eyebrow {
    font-size: 10px;
    letter-spacing: .14em;
    margin-bottom: 20px
  }

  .confianca-bar {
    grid-template-columns: 1fr 1fr
  }

  .confianca-item {
    padding: 18px 16px;
    border-bottom: 1px solid var(--linha)
  }

  .confianca-item:nth-child(2n) {
    border-right: none
  }

  .confianca-item:nth-child(3),
  .confianca-item:nth-child(4) {
    border-bottom: none
  }

  .confianca-text {
    font-size: 11px
  }

  .confianca-check {
    width: 24px;
    height: 24px
  }

  .confianca-check svg {
    width: 11px;
    height: 11px
  }

  .dor-sec {
    padding: 64px 22px
  }

  .dor-grid {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .dor-quote {
    font-size: 18px
  }

  .ozonio-info {
    padding: 64px 22px
  }

  .ozonio-grid {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .ozonio-usos {
    grid-template-columns: 1fr
  }

  .elevare-info {
    padding: 64px 22px
  }

  .elevare-grid {
    grid-template-columns: 1fr;
    gap: 44px
  }

  .elevare-para-quem {
    padding: 0 22px 64px
  }

  .pq-grid {
    grid-template-columns: 1fr
  }

  .numeros {
    grid-template-columns: 1fr 1fr
  }

  .num-item {
    padding: 30px 20px;
    border-bottom: 1px solid var(--linha)
  }

  .num-item:nth-child(2n) {
    border-right: none
  }

  .num-item:nth-child(3),
  .num-item:nth-child(4) {
    border-bottom: none
  }

  .num-n {
    font-size: 38px
  }

  .porque-sec {
    padding: 64px 22px
  }

  .porque-grid {
    grid-template-columns: 1fr
  }

  .indicado-sec {
    padding: 64px 22px
  }

  .indicado-grid {
    grid-template-columns: 1fr 1fr
  }

  .indicado-card {
    padding: 26px 18px
  }

  .autoridade {
    padding: 64px 22px
  }

  .autoridade-grid {
    grid-template-columns: 1fr
  }

  .aut-card {
    aspect-ratio: 4/3
  }

  .servicos-sec {
    padding: 64px 0
  }

  .servicos-header {
    padding: 0 22px;
    margin-bottom: 36px
  }

  .servicos-grid {
    grid-template-columns: 1fr
  }

  .card {
    border-right: none;
    border-top: 1px solid rgba(201, 168, 76, .07);
    padding: 38px 22px
  }

  .card:first-child {
    border-top: none
  }

  .video-sec {
    padding: 52px 22px
  }

  .video-player-wrap {
    max-width: 100%;
    max-height: calc(100vh - 180px)
  }

  .video-2col {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .video-wrapper video {
    max-height: 240px
  }

  .resultados-sec {
    padding: 64px 22px
  }

  .resultados-grid {
    grid-template-columns: 1fr
  }

  .sobre-sec {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 64px 22px
  }

  .sobre-img-wrap {
    order: 1
  }

  .sobre-sec > div:last-child {
    order: 2
  }

  .sobre-img {
    aspect-ratio: 4/3;
    object-position: center 15%
  }

  .sobre-caption {
    padding: 8px 12px;
    bottom: 12px;
    right: 12px
  }

  .sobre-caption p {
    font-size: 10px
  }

  .sobre-caption span {
    font-size: 8px;
    letter-spacing: .08em
  }

  .sobre-frame {
    top: -8px;
    left: -8px;
    right: 8px;
    bottom: 8px
  }

  .localizacao-sec {
    padding: 64px 22px
  }

  .loc-grid {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .loc-predio {
    height: 220px
  }

  .urgencia-wrap {
    padding: 0 22px 56px
  }

  .urgencia-box {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 28px 20px
  }

  .urgencia-btns {
    min-width: unset;
    width: 100%
  }

  .urgencia-btns .btn-gold,
  .urgencia-btns .btn-outline {
    width: 100%;
    justify-content: center
  }

  .cta-final-sec {
    padding: 80px 22px
  }

  .cta-actions {
    flex-direction: column;
    width: 100%
  }

  .cta-actions .btn-gold,
  .cta-actions .btn-outline {
    width: 100%;
    justify-content: center;
    padding: 15px 20px
  }

  .cta-final-desc {
    font-size: 14px;
    max-width: 100%
  }

  .cta-escassez {
    font-size: 11px;
    text-align: center
  }

  footer {
    flex-direction: column;
    gap: 14px;
    padding: 26px 22px;
    text-align: center
  }

  .wa-float {
    width: 52px;
    height: 52px;
    bottom: 18px;
    right: 18px
  }

  .wa-float svg {
    width: 25px;
    height: 25px
  }

  .sec-h2 {
    font-size: clamp(24px, 7.5vw, 36px)
  }

  .insta-header,
  .insta-cta {
    padding: 0 22px
  }

  .insta-card {
    width: 165px
  }

  .insta-sec {
    padding: 60px 0
  }

  .insta-track {
    animation-duration: 28s
  }
}

/* ══════ MOBILE PEQUENO ≤480px ══════ */
@media(max-width:480px) {
  .hero-h1 {
    font-size: clamp(30px, 9.5vw, 42px)
  }

  .hero-stats {
    gap: 18px
  }

  .stat-n {
    font-size: 30px
  }

  .numeros {
    grid-template-columns: 1fr 1fr
  }

  .card {
    padding: 32px 18px
  }

  .urgencia-box {
    padding: 28px 18px
  }

  .cta-final-sec {
    padding: 72px 18px
  }

  footer {
    padding: 28px 18px
  }
}

/* ══ Telas muito pequenas (≤ 360px — Galaxy A, iPhones antigos) ══ */
@media(max-width:360px) {
  .hero-h1 {
    font-size: clamp(26px, 8.5vw, 34px)
  }

  .hero-sub {
    font-size: 13.5px
  }

  .hero-reforco {
    font-size: 12px
  }

  .hero-right {
    height: 108vw;
    min-height: 300px;
    max-height: 480px
  }

  .btn-gold,
  .btn-outline {
    font-size: 11px;
    padding: 14px 20px
  }

  .stat-n {
    font-size: 26px
  }

  .stat-l {
    font-size: 9px
  }

  nav {
    padding: 14px 16px
  }

  .nav-logo img {
    height: 40px
  }

  .indicado-grid {
    grid-template-columns: 1fr
  }

  .card {
    padding: 28px 16px
  }
}

/* ══ Landscape no celular — reduz imagem hero para não dominar a tela ══ */
@media(max-height:500px) and (orientation:landscape) {
  .hero {
    grid-template-columns: 1fr 1fr;
    min-height: auto
  }

  .hero-right {
    order: 2;
    height: 100vh;
    max-height: none;
    min-height: 0
  }

  .hero-left {
    order: 1;
    padding: 16px 24px 24px
  }

  .hero-h1 {
    font-size: clamp(22px, 3.5vw, 32px);
    margin-bottom: 10px
  }

  .hero-sub {
    font-size: 13px;
    margin-bottom: 12px
  }

  .hero-reforco {
    font-size: 12px;
    margin-bottom: 16px
  }

  .hero-stats {
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px
  }

  .stat-n {
    font-size: 24px
  }
}