/* Keeps the new project shell isolated from imported WordPress/Elementor page CSS. */

/* Matches legacy Elementor page sections to the site's .container: width:80%, max-width:1536px. */
.e-parent.e-con-boxed > .e-con-inner {
  width: 80% !important;
  max-width: 1536px !important;
  margin: 0 auto !important;
}

/* The site's generic `p { max-width: 65ch }` readability rule was clamping Elementor widget text too. */
.elementor-widget-text-editor p {
  max-width: none !important;
}

/* Defensive fallback: on pages whose per-post CSS on bitsafeti.com.br has drifted/404s since
   scraping, Elementor containers lose the --display custom property. frontend.min.css consumes
   it via `display:var(--display)` with no fallback, collapsing every section to display:inline
   and breaking all layout. This supplies a default; any per-post CSS that still loads sets
   --display on the specific element with higher specificity and wins normally. No !important,
   since this must yield to working upstream rules, not override them. */
.e-con {
  --display: flex;
}

:where(.site-header, .mega-menu, .cta-banner, .site-footer, .back-to-top),
:where(.site-header, .mega-menu, .cta-banner, .site-footer, .back-to-top) *,
:where(.site-header, .mega-menu, .cta-banner, .site-footer, .back-to-top) *::before,
:where(.site-header, .mega-menu, .cta-banner, .site-footer, .back-to-top) *::after {
  box-sizing: border-box !important;
}

:where(.site-header, .mega-menu, .cta-banner, .site-footer) {
  font-family: "Heebo", sans-serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
}

:where(.site-header, .mega-menu, .cta-banner, .site-footer) a {
  color: inherit !important;
  text-decoration: none !important;
}

:where(.site-header, .mega-menu, .cta-banner, .site-footer) img {
  display: block !important;
  max-width: 100% !important;
}

.back-to-top {
  position: fixed !important;
  left: 24px !important;
  bottom: 24px !important;
  z-index: 40 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: #780000 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(12px) !important;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease !important;
}

.back-to-top.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.back-to-top:hover {
  background: #5a0000 !important;
}

.site-header .container,
.mega-menu .container,
.cta-banner .container,
.site-footer .container {
  width: 80% !important;
  max-width: 1536px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: rgba(255, 255, 255, 0.97) !important;
  color: #555555 !important;
  backdrop-filter: blur(6px) !important;
  border-bottom: 1px solid #ededed !important;
  transition: transform 0.3s ease !important;
}

.site-header.header-hidden {
  transform: translateY(-100%) !important;
}

.site-header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 84px !important;
}

.site-logo img {
  height: 64px !important;
  width: auto !important;
}

.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

.nav-toggle {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 64px !important;
  height: 64px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 12px !important;
  position: relative !important;
  z-index: 210 !important;
}

.nav-toggle span {
  width: 38px !important;
  height: 3px !important;
  background: #780000 !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}

body.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(12px) rotate(45deg) !important;
}

body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0 !important;
}

body.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg) !important;
}

.mega-menu {
  position: fixed !important;
  inset: 0 !important;
  z-index: 200 !important;
  background: linear-gradient(150deg, #2a2a2a 0%, #1f1f1f 55%, #2b1010 100%) !important;
  color: #dedede !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-16px) !important;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s !important;
  overflow-y: auto !important;
  padding: 110px 0 56px !important;
}

body.nav-open .mega-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

body.nav-open {
  overflow: hidden !important;
}

.mega-menu-close {
  position: fixed !important;
  top: 20px !important;
  right: 24px !important;
  z-index: 211 !important;
  background: none !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 34px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 8px !important;
}

.mega-menu-grid {
  display: grid !important;
  grid-template-columns: 1.3fr 1.3fr 1fr 1fr !important;
  gap: 48px !important;
}

.mega-menu-col h3 {
  color: #ffffff !important;
  font-family: "Inter", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 20px !important;
}

.mega-menu-col h3:first-child {
  margin-top: 0 !important;
}

.mega-menu-col ul {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 11px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mega-menu-col a {
  font-family: "Heebo", sans-serif !important;
  font-size: 15px !important;
}

.mega-menu-col a:hover {
  color: #780000 !important;
}

.mega-menu-col ul a.active {
  color: #780000 !important;
  font-weight: 600 !important;
}

.mega-menu-group {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-top: 12px !important;
}

.mega-menu-text,
.mega-menu-desc,
.mega-menu-contact p {
  font-family: "Heebo", sans-serif !important;
  font-size: 14px !important;
  color: #9a9a9a !important;
}

.mega-menu-desc {
  margin: 0 0 20px !important;
}

.mega-menu-contact p {
  margin: 0 0 8px !important;
}

.cta-banner {
  background: #780000 !important;
  color: #ffffff !important;
  padding: 64px 0 !important;
  text-align: center !important;
}

.cta-banner h2,
.cta-banner h3 {
  color: #ffffff !important;
}

.cta-banner h2 {
  font-family: "Inter", sans-serif !important;
  font-size: clamp(26px, 3.4vw, 40px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.cta-banner p {
  margin: 16px auto 28px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  max-width: 65ch !important;
}

.cta-banner-split {
  text-align: left !important;
  padding: 88px 0 !important;
}

.cta-split-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 56px !important;
  align-items: start !important;
}

.cta-split-text p {
  margin: 12px 0 0 !important;
  max-width: 46ch !important;
}

.cta-benefits,
.cta-contact-list {
  list-style: none !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  font-size: 15px !important;
}

.cta-contact-list {
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.cta-form {
  background: #ffffff !important;
  color: #555555 !important;
  border-radius: 10px !important;
  padding: 32px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.cta-form h3 {
  color: #000000 !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

.cta-form > p {
  color: #555555 !important;
  margin: 8px 0 20px !important;
}

.cta-form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.cta-form input,
.cta-form textarea {
  width: 100% !important;
  padding: 13px 14px !important;
  border: 1px solid #ededed !important;
  border-radius: 10px !important;
  font-family: "Heebo", sans-serif !important;
  font-size: 15px !important;
  line-height: 22px !important;
  color: #000000 !important;
  background: #ffffff !important;
}

.cta-form textarea {
  display: inline-block !important;
  height: 116px !important;
  resize: vertical !important;
  margin-bottom: 16px !important;
}

.cta-form .btn,
.site-footer .btn,
.mega-menu .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  padding: 14px 28px !important;
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  line-height: 20px !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease !important;
}

.cta-form .btn-primary,
.site-footer .btn-primary,
.mega-menu .btn-primary {
  background: #780000 !important;
  color: #ffffff !important;
}

.cta-form .btn-primary:hover,
.site-footer .btn-primary:hover,
.mega-menu .btn-primary:hover {
  background: #5a0000 !important;
  transform: translateY(-2px) !important;
}

.mega-menu .btn-outline {
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.mega-menu .btn-outline:hover {
  background: #ffffff !important;
  color: #780000 !important;
}

.cta-form-feedback {
  margin-top: 14px !important;
  color: #780000 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.site-footer {
  background: #000000 !important;
  color: #dedede !important;
  padding: 72px 0 24px !important;
}

.site-footer p {
  max-width: 65ch !important;
}

.footer-newsletter {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  flex-wrap: wrap !important;
  padding-bottom: 48px !important;
  margin-bottom: 48px !important;
  border-bottom: 1px solid #424242 !important;
}

.footer-newsletter h2 {
  color: #ffffff !important;
  font-size: clamp(20px, 2.4vw, 28px) !important;
  max-width: 480px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.footer-newsletter-note {
  font-size: 12px !important;
  color: #dedede !important;
  max-width: 480px !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

.footer-newsletter .newsletter-form {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.footer-newsletter .newsletter-form input {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 14px 16px !important;
  border: 1px solid #424242 !important;
  border-radius: 10px !important;
  background: #424242 !important;
  color: #ffffff !important;
  font-family: "Heebo", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  min-width: 180px !important;
}

.footer-newsletter .newsletter-form .btn {
  flex: 0 0 auto !important;
}

.footer-newsletter .newsletter-form input::placeholder {
  color: #dedede !important;
}

.footer-newsletter .newsletter-feedback {
  flex-basis: 100% !important;
  margin-top: 12px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 2fr !important;
  gap: 32px !important;
}

.footer-secondary-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 28px 32px !important;
}

.footer-col-infra {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.footer-col-bitgroup {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.footer-col-outsourcing {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.footer-col-legal {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.footer-col h4 {
  color: #ffffff !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 16px !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
}

.footer-col ul {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  font-size: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer-col li {
  margin: 0 !important;
  padding: 0 !important;
}

.footer-col a:hover {
  color: #780000 !important;
}

.footer-about img {
  height: 56px !important;
  width: auto !important;
  margin-bottom: 16px !important;
}

.footer-about p {
  font-size: 14px !important;
  color: #dedede !important;
  margin: 0 !important;
}

.footer-certs {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 16px 0 !important;
}

.footer-certs img {
  height: 72px !important;
  width: auto !important;
  margin: 0 !important;
}

.footer-certs img.footer-certs-sm {
  height: 52px !important;
}

.footer-social {
  display: flex !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.footer-social a {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 1px solid #424242 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
}

.footer-social svg {
  width: 22px !important;
  height: 22px !important;
}

.footer-social a:hover {
  border-color: #780000 !important;
  background: #780000 !important;
}

.footer-bottom {
  margin-top: 56px !important;
  padding-top: 24px !important;
  border-top: 1px solid #424242 !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  font-size: 13px !important;
}

@media (max-width: 900px) {
  .mega-menu-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px !important;
  }

  .cta-split-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 720px) {
  .site-header .container,
  .mega-menu .container,
  .cta-banner .container,
  .site-footer .container {
    width: calc(100% - 48px) !important;
  }

  .footer-newsletter {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .footer-grid,
  .footer-secondary-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-col-infra,
  .footer-col-bitgroup,
  .footer-col-outsourcing,
  .footer-col-legal {
    grid-column: 1 !important;
  }

  .footer-col-bitgroup {
    grid-row: 2 !important;
  }

  .footer-col-outsourcing {
    grid-row: 3 !important;
  }

  .footer-col-legal {
    grid-row: 4 !important;
  }
}

@media (max-width: 600px) {
  .mega-menu-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .mega-menu {
    padding-top: 92px !important;
  }
}

@media (max-width: 480px) {
  .cta-form-grid {
    grid-template-columns: 1fr !important;
  }
}