/*--------------------------------------------------------------
# Tema Dracar
# Mesma paleta e tipografia do site da Dracar Consultoria.
# Carregado depois do style.css; só muda o visual.
--------------------------------------------------------------*/
:root {
  --teal: #1A8C8C;
  --teal-dark: #12666A;
  --teal-deeper: #0D4A4D;
  --teal-light: #E8F5F5;
  --teal-mid: #C2E6E6;
  --teal-glow: #7EEAEA;
  --accent: #0FB8B8;
  --dark: #111827;
  --gray-700: #374151;
  --gray-500: #6B7280;
  --gray-300: #D1D5DB;
  --gray-100: #F3F4F6;
  --font-sans: 'Inter', 'Open Sans', sans-serif;
  --font-serif: 'Merriweather', Georgia, serif;
}

/* Geral */
body {
  font-family: var(--font-sans);
  color: var(--gray-700);
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--dark);
}

a { color: var(--teal); }
a:hover { color: var(--teal-dark); }

.back-to-top i {
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(13, 74, 77, .3);
}
.back-to-top i:hover { background: var(--teal-dark); }

#preloader:before {
  border-color: var(--teal);
  border-top-color: var(--teal-light);
}

/* Barra superior e cabeçalho */
#topbar {
  background: var(--teal-deeper);
  font-size: 13px;
}
#topbar .contact-info i,
#topbar .contact-info a,
#topbar .social-links a { color: rgba(255, 255, 255, .85); }
#topbar .contact-info a:hover,
#topbar .social-links a:hover { color: var(--teal-glow); }
#topbar .social-links a { border-color: rgba(255, 255, 255, .15); }

#header {
  background: transparent;
  padding: 6px 0;
}
#header.header-scrolled {
  background: rgba(13, 74, 77, .97);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
}
#header .logo {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .08em;
}
#header .logo,
#header .logo a,
#header a.logo:hover { color: #fff; }

.nav-menu a {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .85);
}
.nav-menu > ul > li { padding: 18px 12px; }
.nav-menu > ul > li:hover,
.nav-menu .active { background: transparent; }
.nav-menu > ul > li > a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--teal-glow);
  transform: scaleX(0);
  transition: transform .3s;
}
.nav-menu > ul > li:hover > a:after,
.nav-menu > ul > li.active > a:after { transform: scaleX(1); }
.nav-menu .drop-down ul a:hover,
.nav-menu .drop-down ul .active > a,
.nav-menu .drop-down ul li:hover > a { color: var(--teal); }
.nav-menu a:hover,
.nav-menu .active > a,
.nav-menu li:hover > a { color: var(--teal-glow); }

.mobile-nav-toggle i { color: #fff; }
.mobile-nav a:hover,
.mobile-nav .active > a,
.mobile-nav li:hover > a { color: var(--teal); }
.mobile-nav-overly { background: rgba(13, 74, 77, .6); }

@media (max-width: 992px) {
  #header { background: var(--teal-deeper); }
}

/* Hero */
#hero {
  background: linear-gradient(135deg, var(--teal-deeper) 0%, var(--teal-dark) 50%, var(--teal) 100%);
  height: auto;
  min-height: 100vh;
  padding: 150px 0 90px;
}
#hero:before {
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
#hero:after {
  content: "";
  position: absolute;
  right: -4%;
  top: 50%;
  width: 560px;
  height: 560px;
  transform: translateY(-50%);
  background: url("../img/dracar1.png") center / contain no-repeat;
  opacity: .05;
  pointer-events: none;
}
#hero .container { padding-top: 0; z-index: 2; }
#hero h1 { margin-bottom: 24px; }
#hero h1 .logo img {
  max-width: 120px;
  filter: drop-shadow(0 0 20px rgba(126, 234, 234, .45));
}
#hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 20px;
  padding: .35rem 1rem;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 1.4rem;
}
#hero .hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  line-height: 1.25;
  color: #fff;
  max-width: 760px;
  margin-bottom: 1.4rem;
}
#hero .hero-title strong { font-weight: 400; color: var(--teal-glow); }
#hero h2 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(255, 255, 255, .78);
  max-width: 760px;
  margin-bottom: 2.2rem;
}
#hero .btn-get-started {
  font-family: var(--font-sans);
  text-transform: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .03em;
  padding: 13px 30px;
  border-radius: 4px;
  margin: 0 10px 10px 0;
  background: #fff;
  border: 1.5px solid #fff;
  color: var(--teal-dark);
}
#hero .btn-get-started:hover {
  background: var(--teal-light);
  border-color: var(--teal-light);
  color: var(--teal-deeper);
  transform: translateY(-2px);
}
#hero .btn-get-started + .btn-get-started {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  font-weight: 400;
}
#hero .btn-get-started + .btn-get-started:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .08);
}
@media (max-width: 768px) {
  #hero { padding: 120px 0 70px; }
  #hero:after { width: 320px; height: 320px; }
}

/* Títulos de seção */
section { padding: 80px 0; }
.section-title h2 {
  font-family: var(--font-serif);
  font-weight: 300;
  text-transform: none;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--dark);
}
.section-title span {
  position: static;
  display: block;
  line-height: 1.4;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--teal);
  margin-bottom: .8rem;
}
.section-title h2:after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
  margin: 1.2rem auto 0;
}
.section-title p { color: var(--gray-500); }

/* Sobre */
.about { background: #fff; }
.about img.img-fluid {
  border-radius: 16px;
  box-shadow: 0 20px 56px rgba(0, 0, 0, .14);
}
.about .content h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.7rem;
  line-height: 1.4;
  color: var(--dark);
}
.about .content .font-italic { color: var(--gray-500); }
.about .content ul i { color: var(--teal); }

/* Disclaimer com foto do analista */
.disclaimer { background: var(--gray-100); }
.disclaimer .photo-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 56px rgba(0, 0, 0, .18);
  position: relative;
  max-width: 420px;
  margin: 0 auto;
}
.disclaimer .photo-card img { display: block; width: 100%; height: auto; }
.disclaimer .photo-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(13, 74, 77, .9) 100%);
  pointer-events: none;
}
.disclaimer .photo-card .photo-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.6rem 1.4rem 1.2rem;
}
.disclaimer .photo-card .badge-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 300;
  color: #fff;
}
.disclaimer .photo-card .badge-role {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-glow);
  margin-top: .2rem;
}
.disclaimer .eyebrow {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 500;
  margin-bottom: .8rem;
}
.disclaimer h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.35;
}
.disclaimer h3 strong { font-weight: 400; color: var(--teal-dark); }
.disclaimer .divider {
  width: 48px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
  margin: 1.4rem 0;
}
.disclaimer .disclaimer-box {
  background: #fff;
  border: 1px solid var(--gray-300);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.2rem;
}
.disclaimer .disclaimer-box p { margin-bottom: 0; }
.disclaimer p { font-size: .92rem; color: var(--gray-700); }
.disclaimer .small-print p {
  font-size: .82rem;
  color: var(--gray-500);
  margin-bottom: .6rem;
}
@media (max-width: 991px) {
  .disclaimer .photo-card { margin-bottom: 2.5rem; }
}

/* Diferenciais */
.why-us { padding-top: 80px; }
.why-us .box {
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  box-shadow: none;
  transition: all .3s;
  height: 100%;
}
.why-us .box span {
  color: var(--teal);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
}
.why-us .box h4 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--dark);
}
.why-us .box:hover {
  background: var(--teal-deeper);
  border-color: var(--teal-deeper);
  box-shadow: 0 16px 40px rgba(13, 74, 77, .25);
  transform: translateY(-4px);
}
.why-us .box:hover span { color: var(--teal-glow); }
.why-us .box:hover h4 { color: #fff; }
.why-us .box:hover p { color: rgba(255, 255, 255, .75); }

/* Serviços */
.services { background: var(--gray-100); }
.services .icon-box {
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  box-shadow: none;
  transition: all .3s;
}
.services .icon-box .icon {
  background: var(--teal);
  border-radius: 10px;
}
.services .icon-box .icon i { color: #fff; }
.services .icon-box .icon::before { background: var(--teal-light); border-radius: 10px; }
.services .icon-box h4 { color: var(--dark); font-weight: 600; font-size: 1.3rem; }
.services .icon-box:hover {
  background: #fff;
  border-color: var(--teal-mid);
  box-shadow: 0 12px 32px rgba(26, 140, 140, .12);
}
.services .icon-box:hover .icon { background: var(--teal-deeper); }
.services .icon-box:hover .icon i { color: #fff; }
.services .icon-box:hover .icon::before { background: var(--teal-mid); }
.services .icon-box:hover h4,
.services .icon-box:hover h4 a { color: var(--dark); }
.services .icon-box:hover p { color: var(--gray-700); }

/* Chamada para ação */
.cta {
  background: linear-gradient(135deg, var(--teal-deeper) 0%, var(--teal-dark) 60%, var(--teal) 100%);
  padding: 90px 0;
}
.cta h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: #fff;
}
.cta p { color: rgba(255, 255, 255, .78); }
.cta .cta-btn {
  font-family: var(--font-sans);
  text-transform: none;
  font-weight: 600;
  background: #fff;
  border: 1.5px solid #fff;
  color: var(--teal-dark);
  border-radius: 4px;
  padding: 13px 34px;
}
.cta .cta-btn:hover {
  background: var(--teal-light);
  border-color: var(--teal-light);
  color: var(--teal-deeper);
}

/* Assinaturas */
.pricing .box {
  border: 1px solid var(--gray-300);
  border-radius: 12px;
  box-shadow: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all .3s;
}
.pricing .box:hover {
  box-shadow: 0 16px 40px rgba(13, 74, 77, .12);
  transform: translateY(-4px);
}
.pricing .box h3 {
  font-family: var(--font-sans);
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
}
.pricing .box h4 {
  font-family: var(--font-serif);
  font-weight: 300;
  color: var(--dark);
  font-size: 2rem;
}
.pricing .box ul { flex-grow: 1; color: var(--gray-700); }
.pricing .box ul li { font-size: .9rem; border-bottom: 1px solid var(--gray-100); }
.pricing .box .btn-buy {
  background: var(--teal);
  border: none;
  color: #fff;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-weight: 500;
  padding: 10px 32px;
}
.pricing .box .btn-buy:hover { background: var(--teal-dark); color: #fff; }
.pricing .featured {
  background: var(--teal-deeper);
  border-color: var(--teal-deeper);
  box-shadow: 0 20px 48px rgba(13, 74, 77, .3);
}
.pricing .featured h3 { color: var(--teal-glow); }
.pricing .featured h4 { color: #fff; }
.pricing .featured ul li { color: rgba(255, 255, 255, .85); border-bottom-color: rgba(255, 255, 255, .08); }
.pricing .featured .btn-buy { background: #fff; color: var(--teal-dark); }
.pricing .featured .btn-buy:hover { background: var(--teal-light); color: var(--teal-deeper); }

/* Contato */
.contact .info-box {
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  box-shadow: none;
  background: #fff;
}
.contact .info-box i {
  color: var(--teal);
  border-color: var(--teal-mid);
  background: var(--teal-light);
}
.contact .info-box h3 { color: var(--dark); }

/* Rodapé */
#footer { background: #0A3A3C; color: rgba(255, 255, 255, .75); }
#footer .footer-top { background: var(--teal-deeper); border-bottom: 1px solid rgba(255, 255, 255, .08); }
#footer .footer-top .footer-info h3 { font-family: var(--font-serif); font-weight: 300; color: #fff; }
#footer .footer-top h4 { color: #fff; }
#footer .footer-top .footer-links ul i { color: var(--teal-glow); }
#footer .footer-top .footer-links ul a { color: rgba(255, 255, 255, .75); }
#footer .footer-top .footer-links ul a:hover { color: var(--teal-glow); }
#footer .footer-top .social-links a { background: rgba(255, 255, 255, .1); border-radius: 50%; }
#footer .footer-top .social-links a:hover { background: var(--teal); }
#footer .credits,
#footer .credits a { color: rgba(255, 255, 255, .45); }
#footer .footer-top .footer-info { background: rgba(255, 255, 255, .05); border-top: 3px solid var(--teal-glow); border-radius: 10px; }
#footer .footer-top .footer-info p { font-family: var(--font-sans); }
#footer .footer-top .footer-info,
#footer .footer-top .footer-info p { color: rgba(255, 255, 255, .8); }
#footer .copyright { color: rgba(255, 255, 255, .7); }

/* Botão flutuante do WhatsApp */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99998;
  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, .45);
  transition: transform .2s;
}
.whatsapp-float:hover { transform: scale(1.1); }
.whatsapp-float svg { width: 30px; height: 30px; fill: #fff; }
.back-to-top { bottom: 92px; right: 32px; }