/* Header LoopHost (mega-menu inspirado em EVEO/Hostinger).
   Mantém o mecanismo do tema: hover por CSS no desktop (.dropdown-animate[data-toggle=hover])
   e dropdown do Bootstrap (classe .show) para clique/teclado e no mobile. */

.lh-header { padding-top: .85rem; padding-bottom: .85rem; }
.lh-header .navbar-brand img { height: 34px; width: auto; }

/* Itens de topo (botões, para leitores de tela não anunciarem link para "#") */
.lh-header .lh-top {
  position: relative; background: none; border: 0; cursor: pointer;
  font-weight: 600; font-size: .95rem; color: #2d2a4a; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .35rem;
}
.lh-header .lh-top .fa-angle-down { font-size: .85rem; opacity: .6; transition: transform .2s; }
.lh-header .lh-top:focus { outline: none; }
.lh-header .lh-top:focus-visible { outline: 2px solid #481FA0; outline-offset: 2px; border-radius: 6px; }

/* Badge "Novo" */
.lh-badge { background: #481FA0; color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .03em;
  padding: .22em .55em; vertical-align: middle; text-transform: uppercase; }

/* Caixa do dropdown */
.lh-dropdown { border: 1px solid rgba(23,19,71,.08); box-shadow: 0 18px 40px rgba(23,19,71,.14) !important; border-radius: .75rem !important; overflow: hidden; }
.lh-groups { padding: .5rem; }
.lh-group { padding: .75rem; }
.lh-group-alt { background: #f8f6fd; border-radius: .6rem; }
.lh-group-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a86a6; padding: 0 .75rem .4rem; }

.lh-item { display: flex; align-items: flex-start; gap: .8rem; padding: .65rem .75rem; border-radius: .55rem;
  color: inherit !important; text-decoration: none !important; transition: background .15s; }
.lh-item:hover, .lh-item:focus-visible { background: #f2eefc; }
.lh-item:focus-visible { outline: 2px solid #481FA0; outline-offset: -2px; }
.lh-item[aria-current="page"] { background: #f2eefc; }
.lh-icon { flex: 0 0 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(72,31,160,.09); color: #481FA0; font-size: 1rem; transition: background .15s, color .15s; }
.lh-item:hover .lh-icon { background: #481FA0; color: #fff; }
.lh-item-text { display: flex; flex-direction: column; min-width: 0; }
.lh-item-title { font-weight: 700; font-size: .92rem; color: #171347; line-height: 1.3; }
.lh-item-title .lh-badge { margin-left: .35rem; }
.lh-ext { font-size: .7rem; margin-left: .3rem; opacity: .5; }
.lh-item-desc { font-size: .8rem; color: #718096; line-height: 1.4; margin-top: .1rem; }

.lh-menu-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1.25rem;
  border-top: 1px solid rgba(23,19,71,.07); font-size: .85rem; color: #718096 !important; text-decoration: none !important; }
.lh-menu-footer strong { color: #481FA0; white-space: nowrap; }
.lh-menu-footer:hover strong .fa { transform: translateX(3px); }
.lh-menu-footer .fa { transition: transform .15s; }

/* Ações à direita */
.lh-actions { display: flex; align-items: center; gap: .5rem; }
.lh-icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: .2rem;
  border-radius: 50%; border: 1px solid rgba(31,45,61,.15); background: transparent; color: #2d2a4a; cursor: pointer;
  text-decoration: none !important; transition: background .15s; }
.lh-icon-btn:hover { background: rgba(72,31,160,.08); }
.lh-icon-btn .fa-whatsapp { color: #25D366; font-size: 1.15rem; }
.lh-lang-btn { width: auto; padding: 0 .55rem; border-radius: 18px; }
.lh-lang-btn .fa { font-size: .8rem; opacity: .6; }
.lh-btn { font-weight: 700; white-space: nowrap; border-radius: 999px; padding: .45rem 1rem; }

/* ---------- Desktop ---------- */
@media (min-width: 992px) {
  .lh-header .lh-nav { gap: .15rem; }
  .lh-header .lh-top { padding: .55rem .8rem; }
  .lh-header .lh-top::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .2rem; height: 2px;
    background: #481FA0; border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .2s; }
  .lh-header .nav-item:hover > .lh-top, .lh-header .nav-item.show > .lh-top, .lh-header .lh-top[aria-current] { color: #481FA0; }
  .lh-header .nav-item:hover > .lh-top::after, .lh-header .nav-item.show > .lh-top::after, .lh-header .lh-top[aria-current]::after { transform: scaleX(1); }
  .lh-header .nav-item:hover > .lh-top .fa-angle-down, .lh-header .nav-item.show > .lh-top .fa-angle-down { transform: rotate(180deg); }

  /* Abre também via teclado/clique (Bootstrap adiciona .show) */
  .lh-header .dropdown-animate[data-toggle='hover'] > .dropdown-menu.show {
    visibility: visible; pointer-events: auto; opacity: 1; transform: translateX(-50%) translateY(-3px) scale(1);
  }
  .lh-header .lh-actions { margin-left: 1rem; }
  .lh-header .lh-dropdown { min-width: 22rem !important; }
  .lh-header .lh-wide { min-width: 38rem !important; }
  .lh-header .dropdown-menu-xl.lh-dropdown { min-width: 40rem !important; }
  .lh-groups-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }

  /* Mega-menu alinhado à esquerda do item (centralizado ele sairia da tela em 992px) */
  .lh-header .lh-mega.dropdown-animate[data-toggle='hover'] > .dropdown-menu { left: 0; transform: translateY(-3px) scale(.97); }
  .lh-header .lh-mega.dropdown-animate[data-toggle='hover']:hover > .dropdown-menu,
  .lh-header .lh-mega.dropdown-animate[data-toggle='hover'] > .dropdown-menu.show { transform: translateY(-3px) scale(1); }
  /* Último menu alinhado à direita */
  .lh-header .lh-align-right.dropdown-animate[data-toggle='hover'] > .dropdown-menu { left: auto; right: 0; transform: translateY(-3px) scale(.97); }
  .lh-header .lh-align-right.dropdown-animate[data-toggle='hover']:hover > .dropdown-menu,
  .lh-header .lh-align-right.dropdown-animate[data-toggle='hover'] > .dropdown-menu.show { transform: translateY(-3px) scale(1); }
}

/* Entre 992 e 1199: sem o botão "Fale com especialista" (o WhatsApp flutuante e o rodapé do mega-menu cobrem) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .lh-header .lh-btn-cta { display: none; }
  .lh-header .navbar-brand img { height: 28px; }
  .lh-header .lh-top { padding: .55rem .6rem; font-size: .9rem; }
  .lh-header .lh-top::after { left: .6rem; right: .6rem; }
}

/* ---------- Mobile / tablet (< 992): menu em acordeão ---------- */
@media (max-width: 991.98px) {
  .lh-header .navbar-collapse { max-height: calc(100vh - 80px); overflow-y: auto; padding-bottom: 1rem; }
  .lh-header .lh-nav .nav-item { border-bottom: 1px solid rgba(23,19,71,.07); }
  .lh-header .lh-top { width: 100%; justify-content: space-between; min-height: 48px; padding: .75rem 0; font-size: 1rem; }
  .lh-header .nav-item.show > .lh-top .fa-angle-down { transform: rotate(180deg); }
  .lh-header .lh-dropdown { border: 0; box-shadow: none !important; margin: 0 0 .75rem; }
  .lh-groups { padding: 0; }
  .lh-group { padding: .25rem 0; }
  .lh-group-alt { background: transparent; }
  .lh-group-label { padding: .5rem 0 .25rem; }
  .lh-item { padding: .6rem .25rem; min-height: 44px; }
  .lh-menu-footer { padding: .75rem .25rem; }
  .lh-actions { flex-wrap: wrap; margin-top: 1rem; }
  .lh-actions .lh-btn { flex: 1 1 100%; text-align: center; padding: .7rem 1rem; }
  .lh-actions .navbar-lang { margin-top: .25rem; }
}

/* Mobile: o tema pinta os itens do menu recolhido de cinza 60% (.navbar-expand-lg .navbar-collapse .navbar-nav
   .nav-item .nav-link), ruim de ler. Seletor mais específico para cor sólida. */
@media (max-width: 991.98px) {
  .lh-header.navbar-expand-lg .navbar-collapse .navbar-nav .nav-item .nav-link.lh-top { color: #171347; font-weight: 700; }
  .lh-header.navbar-expand-lg .navbar-collapse .navbar-nav .nav-item.show > .nav-link.lh-top { color: #481FA0; }
}