.elementor-13 .elementor-element.elementor-element-8eb13f7{--display:flex;}.elementor-13 .elementor-element.elementor-element-8eb13f7.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-13 .elementor-element.elementor-element-7af5935{width:100%;max-width:100%;}@media(min-width:768px){.elementor-13 .elementor-element.elementor-element-8eb13f7{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-8eb13f7 *//* ========================================
   COLLD AGENCY — CSS PREMIUM MAX
======================================== */

html {
  scroll-behavior: smooth;
}

body {
  background: #050505;
  color: #fff;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
}

/* fundo com profundidade */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(124, 58, 237, 0.14), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(255, 255, 255, 0.05), transparent 18%),
    radial-gradient(circle at 50% 80%, rgba(124, 58, 237, 0.08), transparent 30%);
  z-index: 0;
}

/* garante que conteúdo fique acima */
.elementor,
.elementor-section,
.elementor-container,
.elementor-widget,
.elementor-column,
.e-con,
.e-con-inner {
  position: relative;
  z-index: 1;
}

/* largura elegante */
.elementor-container,
.e-con-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* títulos */
h1, h2, h3, h4 {
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

h1 {
  font-weight: 800;
  text-wrap: balance;
}

h2 {
  font-weight: 750;
  text-wrap: balance;
}

p,
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  color: #b8b8c2;
  line-height: 1.7;
}

/* seleção */
::selection {
  background: rgba(124, 58, 237, 0.35);
  color: #fff;
}

/* scrollbar */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: #080808;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7c3aed, #4f46e5);
  border-radius: 999px;
}

/* ========================================
   HERO
   aplique classe hero na seção principal
======================================== */

.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  left: -180px;
  top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,0.22), transparent 62%);
  filter: blur(10px);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  right: -120px;
  top: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.07), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}

/* ========================================
   BOTÕES
======================================== */

.elementor-button,
.btn-premium .elementor-button {
  border-radius: 16px !important;
  padding: 16px 28px !important;
  font-weight: 700 !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease !important;
  position: relative;
  overflow: hidden;
}

.elementor-button:hover,
.btn-premium .elementor-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(124,58,237,0.20);
}

.elementor-button::before,
.btn-premium .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(110deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: transform .7s ease;
}

.elementor-button:hover::before,
.btn-premium .elementor-button:hover::before {
  transform: translateX(120%);
}

/* ========================================
   CARDS
   aplique classe card-premium nos cards
======================================== */

.card-premium,
.card-premium > .e-con-inner,
.card-premium .elementor-widget-wrap {
  position: relative;
}

.card-premium {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.028));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 35px rgba(0,0,0,0.28);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow: hidden;
}

.card-premium::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(124,58,237,0.12), rgba(255,255,255,0.05));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.card-premium:hover {
  transform: translateY(-8px);
  border-color: rgba(124,58,237,0.35);
  box-shadow: 0 18px 50px rgba(124,58,237,0.16);
}

/* ========================================
   BADGES / PILLS
   classe pill-glow
======================================== */

.pill-glow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  backdrop-filter: blur(10px);
}

.pill-glow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px rgba(255,255,255,0.7);
}

/* ========================================
   DIVISÃO DE SEÇÕES
======================================== */

.section-line {
  position: relative;
}

.section-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
}

/* ========================================
   ANIMAÇÃO DE ENTRADA
   classe reveal
======================================== */

.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: transform, opacity;
}

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

/* variações */
.reveal-left {
  opacity: 0;
  transform: translateX(-42px);
  transition: opacity .85s ease, transform .85s ease;
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(42px);
  transition: opacity .85s ease, transform .85s ease;
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ========================================
   IMAGENS / MOCKUPS
======================================== */

.mockup-glow img,
.mockup-glow .elementor-image img {
  border-radius: 24px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.40),
    0 0 0 1px rgba(255,255,255,0.08);
}

/* ========================================
   SOCIAL FIXO
======================================== */

.social-fixed a,
.whatsapp-fixed,
.instagram-fixed {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}

.social-fixed a:hover,
.whatsapp-fixed:hover,
.instagram-fixed:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 28px rgba(124,58,237,0.18);
}

/* ========================================
   CTA FINAL
   classe cta-glow
======================================== */

.cta-glow {
  position: relative;
  overflow: hidden;
}

.cta-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(124,58,237,0.15), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.06), transparent 24%);
  pointer-events: none;
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 1024px) {
  .hero::before {
    width: 420px;
    height: 420px;
    left: -120px;
    top: -80px;
  }

  .hero::after {
    width: 320px;
    height: 320px;
    right: -100px;
    top: 60px;
  }
}

@media (max-width: 767px) {
  body {
    overflow-x: hidden !important;
  }

  h1 {
    font-size: 42px !important;
    line-height: 1.02 !important;
  }

  h2 {
    font-size: 30px !important;
    line-height: 1.05 !important;
  }

  p,
  .elementor-widget-text-editor,
  .elementor-widget-text-editor p {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  .elementor-button,
  .btn-premium .elementor-button {
    width: 100%;
    justify-content: center;
    padding: 15px 20px !important;
  }

  .card-premium {
    border-radius: 20px;
  }

  .hero::before {
    width: 300px;
    height: 300px;
    left: -120px;
    top: -50px;
  }

  .hero::after {
    width: 220px;
    height: 220px;
    right: -90px;
    top: 120px;
  }

  .social-fixed {
    right: 12px !important;
    bottom: 12px !important;
    gap: 10px !important;
  }

  .social-fixed a {
    padding: 11px 14px !important;
    font-size: 13px !important;
  }
}/* End custom CSS */