/* Home mais compacta sem remover conteúdo */

/* Menu lateral: logo legível + nome da marca sem empurrar a navegação. */
.topo-menu-lateral {
  min-height: 72px !important;
  max-height: 72px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.marca-menu-lateral {
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: hidden !important;
}

.marca-menu-lateral img {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  object-fit: contain !important;
  flex: 0 0 58px !important;
}

.texto-marca-lateral {
  max-width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  white-space: nowrap !important;
  transition: max-width .25s ease, opacity .25s ease !important;
}

.menu-lateral:hover .texto-marca-lateral,
.menu-lateral.aberto .texto-marca-lateral {
  max-width: 160px !important;
  opacity: 1 !important;
}

.texto-marca-lateral strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
}

.texto-marca-lateral small {
  display: block !important;
  margin-top: 4px !important;
  color: #f4d995 !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
}

.navegacao-lateral {
  margin-top: 2px !important;
}

/* Performance: seções abaixo da dobra só são renderizadas quando se aproximam da tela. */
.secao-consultores,
.secao-boas-vindas,
.secao-atendimentos,
.secao-escolher,
.secao-depoimentos {
  content-visibility: auto;
  contain-intrinsic-size: 700px;
}

/* Estabilidade visual: reserva o espaço dos elementos dinâmicos antes do Supabase responder. */
.logo img,
.marca-menu-lateral img {
  aspect-ratio: 1 / 1;
}

.banner .carrossel {
  contain: layout paint;
}

.secao-consultores .janela-consultores {
  min-height: 285px;
}

#listaConsultores {
  min-height: 257px;
}

#areasVidaHome {
  min-height: 350px;
}

/* Estado inicial estável: evita flashes enquanto dados dinâmicos ainda estão chegando. */
#listaConsultores:empty,
#areasVidaHome:empty {
  visibility: hidden !important;
}

.login-cliente,
.banner .carrossel,
.secao-consultores .janela-consultores,
.painel-boas-vindas {
  contain: layout paint;
}

/* O login só aparece depois que a sessão for resolvida. */
.topo .login-cliente:not(.login-resolvido) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.topo .login-cliente.login-resolvido {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Visual dos cards: nenhuma regra de disponibilidade fica no CSS. */
.secao-consultores {
  padding-top: 44px !important;
  padding-bottom: 52px !important;
}

.secao-consultores .titulo-secao {
  margin-bottom: 24px !important;
}

.secao-consultores .janela-consultores {
  overflow: hidden !important;
  padding: 8px 2px 14px !important;
}

.secao-consultores .grade-consultores {
  align-items: stretch !important;
  gap: 16px !important;
  transition: transform .55s ease !important;
}

.secao-consultores .grade-consultores:empty {
  transition: none !important;
}

.secao-consultores .card.home-consultor-card,
.secao-consultores .card.home-consultor-online {
  width: 178px !important;
  min-width: 178px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 10px 25px rgba(38,16,44,.11) !important;
  border: 1px solid rgba(88,49,111,.12) !important;
  transform: none !important;
}

.secao-consultores .card.home-consultor-card:hover,
.secao-consultores .card.home-consultor-online:hover {
  transform: translateY(-4px) !important;
}

.secao-consultores .home-consultor-card .foto-consultor,
.secao-consultores .home-consultor-online .foto-consultor {
  height: 175px !important;
}

.secao-consultores .home-consultor-card .card-conteudo,
.secao-consultores .home-consultor-online .card-conteudo {
  min-height: 82px !important;
  padding: 13px 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 7px !important;
}

.secao-consultores .home-consultor-card h3,
.secao-consultores .home-consultor-online h3 {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
}

.secao-consultores .status-home {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.secao-consultores .status-home::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
}

.secao-consultores .status-home.online {
  color: #287a48 !important;
}

.secao-consultores .status-home.online::before {
  background: #2f9d62;
  box-shadow: 0 0 0 4px rgba(47,157,98,.12);
}

.secao-consultores .status-home.ocupado {
  color: #8a6515 !important;
}

.secao-consultores .status-home.ocupado::before {
  background: #e0ad38;
  box-shadow: 0 0 0 4px rgba(224,173,56,.14);
}

.secao-consultores .status-home.offline {
  color: #8b4a56 !important;
}

.secao-consultores .status-home.offline::before {
  background: #c85b6f;
  box-shadow: 0 0 0 4px rgba(200,91,111,.12);
}

.secao-consultores .seta-consultor {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
}

@media (min-width: 701px) {
  .topo { min-height: 138px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  .logo img { width: 112px !important; height: 112px !important; }
  .secao-consultores,.secao-boas-vindas,.secao-atendimentos,.secao-escolher,.secao-depoimentos { padding-top: 38px !important; padding-bottom: 38px !important; }
  .titulo-secao { margin-bottom: 22px !important; }
  .titulo-secao h2 { margin-top: 2px !important; margin-bottom: 8px !important; }
  .titulo-secao p { margin-top: 0 !important; }
  .carrossel-consultores { margin-bottom: 18px !important; }
  .area-ver-consultores { margin-top: 18px !important; }
  .painel-boas-vindas { padding-top: 34px !important; padding-bottom: 34px !important; }
  .painel-boas-vindas h2 { margin-top: 10px !important; margin-bottom: 12px !important; }
  .painel-boas-vindas > p { margin-bottom: 18px !important; }
  .lista-beneficios { gap: 10px !important; }
  .lista-beneficios span { min-height: 44px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  .grade-atendimentos { gap: 18px !important; }
  .painel-escolher { padding-top: 28px !important; padding-bottom: 28px !important; }
  .lista-motivos { gap: 10px !important; }
  .grade-depoimentos { gap: 18px !important; }
  .cartao-depoimento { padding: 22px !important; min-height: 0 !important; }
  .site-footer { padding-top: 34px !important; }
}

@media (min-width: 621px) and (max-width: 980px) {
  #areasVidaHome { min-height: 700px; }
}

@media (max-width: 700px) {
  .topo .login-cliente { display: block !important; position: relative !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 14px !important; transform: none !important; }
  .topo .login-cliente.usuario-autenticado { padding: 12px 14px !important; text-align: center !important; }
  .topo .login-cabecalho { display: flex !important; justify-content: center !important; margin-bottom: 10px !important; }
  .topo .login-cliente.usuario-autenticado .login-cabecalho { margin-bottom: 4px !important; }
  .topo .login-cliente.usuario-autenticado .login-cabecalho .login-icone { display: none !important; }
  .topo .login-cliente.usuario-autenticado .login-cabecalho small { display: block !important; font-size: 14px !important; font-weight: 900 !important; letter-spacing: .3px !important; color: #5b3268 !important; }
  .topo .formulario-login-topo,.topo .login-campos,.topo .campo-senha-topo,.topo .links-login { display: grid !important; width: 100% !important; }
  .topo .login-cliente.usuario-autenticado .formulario-login-topo,.topo .login-cliente.usuario-autenticado .links-login { display: none !important; }
  .topo .login-campos { grid-template-columns: 1fr !important; gap: 8px !important; }
  .topo .login-campos input,.topo .botao-login { display: block !important; width: 100% !important; min-width: 0 !important; height: 44px !important; }
  .topo .links-login { grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 10px !important; text-align: center !important; }
  .topo .links-login a { display: block !important; font-size: 11px !important; }
  .secao-consultores,.secao-boas-vindas,.secao-atendimentos,.secao-escolher,.secao-depoimentos { padding-top: 34px !important; padding-bottom: 34px !important; }
  .secao-consultores .janela-consultores { min-height: 255px; }
  #listaConsultores { min-height: 227px; }
  #areasVidaHome { min-height: 1200px; }
  .titulo-secao { margin-bottom: 24px !important; }
  .area-ver-consultores { margin-top: 18px !important; }
  .painel-boas-vindas { padding-top: 28px !important; padding-bottom: 28px !important; overflow: hidden !important; }
  .painel-boas-vindas h2 { white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; max-width: 100% !important; text-align: center !important; line-height: 1.18 !important; font-size: clamp(20px, 6.2vw, 27px) !important; letter-spacing: -0.2px !important; }
  .lista-beneficios { gap: 9px !important; }
  .grade-atendimentos,.grade-depoimentos { gap: 16px !important; }
  .secao-consultores .card.home-consultor-card,.secao-consultores .card.home-consultor-online { width: 148px !important; min-width: 148px !important; }
  .secao-consultores .home-consultor-card .foto-consultor,.secao-consultores .home-consultor-online .foto-consultor { height: 145px !important; }
  .secao-consultores .home-consultor-card h3,.secao-consultores .home-consultor-online h3 { font-size: 16px !important; }
  .secao-consultores .carrossel-consultores { gap: 7px !important; }
  .secao-consultores .seta-consultor { width: 36px !important; min-width: 36px !important; height: 36px !important; }
}