/* =====================================================================
   Order-Boxes · BRAND UPLIFT
   Fine layer that retargets legacy selectors (style.css / planos-custom.css)
   to the new Order-Boxes brand tokens defined in brand-ob.css.
   Loaded AFTER style.css on every page so it overrides the old theme.
   ===================================================================== */

/* -------- Tokens (fallbacks, independent of .ob-modern scope) --------- */
:root {
  --c-brand-500: #2563EB;
  --c-brand-600: #1D4ED8;
  --c-brand-700: #1E40AF;
  --c-brand-900: #0F2558;
  --c-accent:    #22D3EE;
  --c-success:   #10B981;
  --c-ink:       #0A1628;
  --c-ink-2:     #1F2A3D;
  --c-muted:     #5B6A82;
  --c-border:    #E4E9F2;
  --c-bg:        #FAFBFC;
  --c-surface:   #FFFFFF;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(10,22,40,.06);
  --shadow-md: 0 4px 12px rgba(10,22,40,.08), 0 1px 3px rgba(10,22,40,.05);
  --shadow-lg: 0 12px 32px rgba(10,22,40,.10), 0 4px 8px rgba(10,22,40,.05);
  --shadow-xl: 0 24px 60px rgba(10,22,40,.14), 0 8px 16px rgba(10,22,40,.06);
}

/* -------- Typography refresh ------------------------------------------ */
body,
html {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif !important;
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4 {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.015em;
  color: var(--c-ink);
}

.display-4 { font-weight: 800 !important; letter-spacing: -0.025em; line-height: 1.08; }
.display-3 { font-weight: 800 !important; letter-spacing: -0.025em; line-height: 1.08; }

/* -------- Color retargeting (legacy theme -> new brand) --------------- */
.theme-bg        { background-color: var(--c-brand-500) !important; }
.theme-bg-alt    { background-color: rgba(37, 99, 235, 0.08) !important; }
.theme-color     { color: var(--c-brand-500) !important; }
.theme-color-alt { color: rgba(37, 99, 235, 0.72) !important; }
.theme-after:after   { background-color: var(--c-brand-500) !important; }
.theme-before:before { background-color: var(--c-brand-500) !important; }

.theme2nd-bg        { background-color: var(--c-success) !important; }
.theme2nd-bg-alt    { background-color: rgba(16, 185, 129, 0.10) !important; }
.theme2nd-color     { color: var(--c-success) !important; }
.theme2nd-color-alt { color: rgba(16, 185, 129, 0.75) !important; }

.theme3rd-bg    { background-color: var(--c-brand-900) !important; }
.theme3rd-color { color: var(--c-brand-900) !important; }

.yellow-color     { color: var(--c-accent) !important; }
.yellow-color-alt { color: rgba(34, 211, 238, 0.72) !important; }

/* -------- Buttons ----------------------------------------------------- */
.btn {
  font-family: inherit;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  border-radius: var(--r-md) !important;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out) !important;
  padding: 12px 22px !important;
  line-height: 1.2 !important;
}
.btn:hover { transform: translateY(-2px); }

.btn.theme-bg,
.btn-primary,
.m-btn.theme-bg {
  background: linear-gradient(180deg, var(--c-brand-500), var(--c-brand-600)) !important;
  border-color: var(--c-brand-600) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(37,99,235,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn.theme-bg:hover,
.btn-primary:hover {
  box-shadow: 0 12px 28px rgba(37,99,235,.38), inset 0 1px 0 rgba(255,255,255,.22) !important;
  background: linear-gradient(180deg, #2F6BF0, var(--c-brand-600)) !important;
}

.btn.theme2nd-bg {
  background: linear-gradient(180deg, #22D3EE, #06B6D4) !important;
  border-color: #06B6D4 !important;
  color: #0A1628 !important;
  box-shadow: 0 6px 18px rgba(34,211,238,.28) !important;
  font-weight: 700 !important;
}
.btn.theme2nd-bg:hover {
  box-shadow: 0 12px 28px rgba(34,211,238,.42) !important;
}

.btn-outline-primary,
.btn.border-theme,
.btn[class*="border-"] {
  border: 1.5px solid var(--c-brand-500) !important;
  color: var(--c-brand-500) !important;
  background: transparent !important;
}
.btn-outline-primary:hover { background: var(--c-brand-500) !important; color: #fff !important; }

/* -------- Cards / generic surfaces ------------------------------------ */
.card {
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
  background: var(--c-surface);
}
.card.hover-top:hover,
.card.box-shadow-only-hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(37,99,235,.25);
}
.border-radius-15 { border-radius: var(--r-lg) !important; }

/* Legacy white-bg blocks get soft elevation */
.white-bg {
  background: var(--c-surface) !important;
  border-radius: var(--r-lg);
}

/* -------- Sections ---------------------------------------------------- */
.effect-section {
  position: relative;
  overflow: hidden;
}

/* Light alt section — subtle gradient wash */
.theme-bg-alt.section,
section.theme-bg-alt,
.bg-gray-light,
.gray-bg {
  background: linear-gradient(180deg, #F7F9FC 0%, #EEF2F9 100%) !important;
}

/* Blue hero sections (.theme-bg) — uniform base + radial accents -------- */
.effect-section.theme-bg {
  background:
    radial-gradient(900px 500px at 85% 0%, rgba(34,211,238,.20), transparent 55%),
    radial-gradient(700px 450px at 0% 100%, rgba(15,37,88,.50), transparent 55%),
    var(--c-brand-500) !important;
}
.effect-section.theme-bg h1,
.effect-section.theme-bg h2,
.effect-section.theme-bg h3,
.effect-section.theme-bg h4,
.effect-section.theme-bg .display-1,
.effect-section.theme-bg .display-2,
.effect-section.theme-bg .display-3,
.effect-section.theme-bg .display-4,
.effect-section.theme-bg p,
.effect-section.theme-bg .lead,
.effect-section.theme-bg li {
  color: #fff !important;
}
/* Spans de texto — excluir badges e spans dentro de botões */
.effect-section.theme-bg span:not(.badge):not(.btn-inner--text):not(.navbar-toggler-icon) {
  color: #fff !important;
}
.effect-section.theme-bg .theme-color { color: var(--c-accent) !important; }
.effect-section.theme-bg .theme2nd-color { color: #A7F3D0 !important; }
/* Links genéricos dentro do hero ficam brancos — excluindo botões */
.effect-section.theme-bg a:not([class*="btn"]):not([class*="m-btn"]) { color: rgba(255,255,255,.85); }
.effect-section.theme-bg a:not([class*="btn"]):not([class*="m-btn"]):hover { color: #fff; }
/* Restaurar cores dos botões legados dentro do hero */
.effect-section.theme-bg .m-btn { color: inherit; }
.effect-section.theme-bg .m-btn.m-btn-white        { color: #152c5b !important; background: #ffffff !important; }
.effect-section.theme-bg .m-btn.m-btn-white:hover  { color: #ffffff !important; background: transparent !important; }
.effect-section.theme-bg .m-btn.m-btn-theme        { color: #ffffff !important; }
.effect-section.theme-bg .m-btn.m-btn-theme2nd     { color: #0A1628 !important; }
.effect-section.theme-bg .m-btn.m-btn-dark         { color: #ffffff !important; }

/* Dark hero sections that used theme3rd-bg get a richer navy */
.theme3rd-bg,
section.theme3rd-bg {
  background:
    radial-gradient(1000px 600px at 15% 0%, rgba(37,99,235,.35), transparent 55%),
    radial-gradient(900px 600px at 100% 100%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(180deg, #0A1628 0%, #0F2558 60%, #0A1F4D 100%) !important;
  color: #E6ECF5 !important;
}
.theme3rd-bg h1,
.theme3rd-bg h2,
.theme3rd-bg h3,
.theme3rd-bg h4,
.theme3rd-bg .display-4 { color: #fff !important; }
.theme3rd-bg .theme-color { color: var(--c-accent) !important; }

/* -------- Plans (planos-custom) refresh ------------------------------- */
.plan-card,
.pricing-card,
.plan-box,
.planos-card {
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}
.plan-card:hover,
.pricing-card:hover,
.plan-box:hover,
.planos-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(37,99,235,.28);
}

.plan-featured,
.plan-highlight,
.pricing-featured {
  border: 2px solid var(--c-brand-500) !important;
  box-shadow: var(--shadow-md), 0 0 0 4px rgba(37,99,235,.06) !important;
  transform: translateY(-6px);
}

/* -------- Icons / badges --------------------------------------------- */
.benefit-item .fa-check,
.fas.fa-check.theme-color,
.fas.fa-check-circle.theme-color {
  color: var(--c-success) !important;
}
.badge.badge-success {
  background: rgba(16,185,129,.12) !important;
  color: #047857 !important;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 600;
  letter-spacing: 0;
}

/* =====================================================================
   NAVBAR — redesign completo
   ===================================================================== */

/* --- Barra base: sem backdrop-filter (evita mismatch de cor sobre hero) */
.navbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* --- Altura reduzida: 92px → 68px desktop ------------------------------ */
@media (min-width: 992px) {
  .navbar-main .navbar-nav > .nav-item > .nav-link {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    position: relative;
  }
  /* Underline animado no hover */
  .navbar-main .navbar-nav > .nav-item > .nav-link::after {
    content: "";
    position: absolute;
    bottom: 14px;
    left: 16px;
    right: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--c-brand-500);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s var(--ease-out);
  }
  .navbar-main .navbar-nav > .nav-item:hover > .nav-link::after,
  .navbar-main .navbar-nav > .nav-item > .nav-link.active::after { transform: scaleX(1); }
  .navbar-main .navbar-nav > .nav-item:hover > .nav-link { color: var(--c-brand-500) !important; }
  .navbar-main .navbar-nav > .nav-item > .nav-link.active { color: var(--c-brand-500) !important; }
}

/* --- Estado scrollado: frosted glass ----------------------------------- */
.fixed-header .fixed-header-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(16px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.8) !important;
  box-shadow: 0 1px 0 rgba(10,22,40,.07), 0 6px 24px rgba(10,22,40,.07) !important;
}
.fixed-header .navbar-main .navbar-nav > .nav-item > .nav-link { color: var(--c-ink) !important; }
.fixed-header .navbar-main .navbar-nav > .nav-item:hover > .nav-link { color: var(--c-brand-500) !important; }

/* --- Botão "Entrar" — brand blue (substituir verde) -------------------- */
.m-btn.m-btn-theme2nd.m-btn-sm,
.dropdown > .m-btn.m-btn-theme2nd {
  background: linear-gradient(180deg, var(--c-brand-500), var(--c-brand-600)) !important;
  border-color: var(--c-brand-600) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.28), inset 0 1px 0 rgba(255,255,255,.16) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  border-radius: var(--r-md) !important;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out) !important;
}
.m-btn.m-btn-theme2nd.m-btn-sm:hover,
.dropdown > .m-btn.m-btn-theme2nd:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(37,99,235,.36), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* --- Dropdown "Entrar" (login menu) ------------------------------------ */
.dropdown-menu {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 12px 40px rgba(10,22,40,.12), 0 2px 8px rgba(10,22,40,.06) !important;
  padding: 6px !important;
  margin-top: 6px !important;
}
.dropdown-item {
  border-radius: var(--r-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--c-ink) !important;
  padding: 8px 12px !important;
  transition: background .15s ease, color .15s ease !important;
}
.dropdown-item:hover {
  background: rgba(37,99,235,.07) !important;
  color: var(--c-brand-500) !important;
}

/* --- Mega menu "Serviços" ----------------------------------------------- */
@media (min-width: 992px) {
  .px-mega .px-mega-menu {
    border-top: none !important;
    border-radius: 0 0 var(--r-xl) var(--r-xl) !important;
    box-shadow: 0 20px 60px rgba(10,22,40,.12), 0 4px 12px rgba(10,22,40,.06) !important;
    padding: 0 !important;
    overflow: hidden;
    top: 108% !important;
  }
  .px-mega:hover .px-mega-menu { top: 100% !important; }
  .px-mega .px-mm-right {
    padding: 28px 28px 24px !important;
    gap: 8px;
  }
  /* Cabeçalhos de categoria */
  .px-mega .mm-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: var(--c-brand-500) !important;
    padding: 0 0 10px !important;
    margin: 0 0 4px !important;
    border-bottom: 1px solid var(--c-border) !important;
  }
  /* Links do mega menu */
  .px-mega .mm-link { padding: 0 0 8px !important; margin: 0 !important; }
  .px-mega .mm-link li { padding: 2px 0 !important; }
  .px-mega .mm-link li > a {
    color: var(--c-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 5px 8px !important;
    border-radius: var(--r-sm) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    transition: background .15s ease, color .15s ease, padding-left .15s ease !important;
  }
  .px-mega .mm-link li > a i {
    width: 16px !important;
    font-size: 12px !important;
    color: var(--c-brand-500) !important;
    opacity: .75;
    flex-shrink: 0;
  }
  .px-mega .mm-link li:hover > a {
    color: var(--c-brand-500) !important;
    background: rgba(37,99,235,.06) !important;
    padding-left: 12px !important;
  }
  .px-mega .mm-link li:hover > a i { opacity: 1; }

  /* Dropdown simples "Domínios" */
  .px-dropdown .px-dropdown-menu {
    border-top: none !important;
    border-radius: var(--r-lg) !important;
    box-shadow: 0 16px 48px rgba(10,22,40,.12), 0 2px 8px rgba(10,22,40,.06) !important;
    padding: 6px !important;
    width: 210px !important;
    top: 108% !important;
  }
  .px-dropdown:hover .px-dropdown-menu { top: 100% !important; }
  .px-dropdown .px-dropdown-menu > li > a {
    border-radius: var(--r-sm) !important;
    color: var(--c-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    transition: background .15s ease, color .15s ease !important;
  }
  .px-dropdown .px-dropdown-menu > li > a i {
    width: 16px !important;
    font-size: 12px !important;
    color: var(--c-brand-500) !important;
    opacity: .75;
    flex-shrink: 0;
  }
  .px-dropdown .px-dropdown-menu > li:hover > a {
    color: var(--c-brand-500) !important;
    background: rgba(37,99,235,.06) !important;
  }
  .px-dropdown .px-dropdown-menu > li:hover > a i { opacity: 1; }
}

/* --- Hamburger: animação × ao abrir ------------------------------------ */
.navbar-toggler {
  background: var(--c-brand-500) !important;
  border-radius: var(--r-sm) !important;
  width: 42px !important;
  height: 42px !important;
  position: relative !important;
  transition: background .2s ease !important;
}
.navbar-toggler:hover { background: var(--c-brand-600) !important; }
/* As três barras via box-shadow */
.navbar-toggler span {
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 2px;
  background: #fff !important;
  color: #fff !important;
  margin: -1px 0 0 -10px;
  transition: transform .3s var(--ease-out), opacity .2s ease !important;
  box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff !important;
}
/* Quando aberto (collapsed → aria-expanded=true) — ícone × */
.navbar-toggler[aria-expanded="true"] {
  background: #07112a !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.navbar-toggler[aria-expanded="true"] span {
  box-shadow: none !important;
  transform: rotate(45deg) !important;
}
.navbar-toggler[aria-expanded="true"] span::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 20px; height: 2px;
  background: #fff;
  transform: rotate(-90deg);
}

/* --- Mobile collapse: dark navy ---------------------------------------- */
@media (max-width: 991px) {
  .navbar-main .navbar-collapse {
    background: #07112a !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 72px 0 40px !important;
  }
  .navbar-main .navbar-nav > li {
    border-top: 1px solid rgba(255,255,255,.07) !important;
  }
  .navbar-main .navbar-nav > li > a {
    color: rgba(255,255,255,.85) !important;
    text-transform: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 0 20px !important;
    line-height: 46px !important;
  }
  .navbar-main .navbar-nav > li > a:hover { color: #fff !important; }
  /* Manter branco no sticky/fixed-header em mobile (fundo navy não muda) */
  .fixed-header .navbar-main .navbar-nav > .nav-item > .nav-link { color: #ffffff !important; }
  .fixed-header .navbar-main .navbar-nav > .nav-item:hover > .nav-link { color: var(--c-accent) !important; }
  /* Submenu mobile (mega/dropdown aberto) */
  .mm-in .mm-dorp-in {
    background: rgba(0,0,0,.2) !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
  }
  .mm-in .mm-dorp-in > li { border-bottom: 1px solid rgba(255,255,255,.06) !important; }
  .mm-in .mm-dorp-in > li > a,
  .mm-in .mm-dorp-in .mm-link li > a,
  .mm-in .mm-dorp-in .mm-title {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }
  .mm-in .mm-dorp-in > li > a:hover,
  .mm-in .mm-dorp-in .mm-link li > a:hover { color: #fff !important; }
  .mm-in .mm-dorp-in .mm-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--c-accent) !important;
    padding: 14px 20px 4px !important;
  }
  /* Toggle arrow */
  .px-nav-toggle { color: rgba(255,255,255,.6) !important; border-left-color: rgba(255,255,255,.1) !important; }
}

/* -------- Footer polish ---------------------------------------------- */
footer,
.footer {
  background: linear-gradient(180deg, #0A1628, #0F2558) !important;
  color: #B8C4D6 !important;
}
footer a, .footer a { color: #E6ECF5 !important; }
footer a:hover, .footer a:hover { color: var(--c-accent) !important; }
footer .footer-title, .footer .footer-title { color: #ccd4e0 !important; }

/* -------- Forms ------------------------------------------------------ */
.form-control, .form-select {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--c-border) !important;
  padding: 12px 14px !important;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.form-control:focus, .form-select:focus {
  border-color: var(--c-brand-500) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.12) !important;
  outline: none !important;
}

/* -------- Focus-visible (a11y) --------------------------------------- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--c-brand-500) !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* -------- Selection -------------------------------------------------- */
::selection { background: rgba(37,99,235,.22); color: var(--c-ink); }

/* -------- Utility: section dividers --------------------------------- */
.effect-section + .effect-section::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-border), transparent);
}