.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS *//* =========================
   HEADER MOBILE DINÂMICO
========================= */
.mhd{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 9999;

  background: transparent;
  box-shadow: none;
  padding: 14px 16px;

  transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}

/* ===== ROW (pai do brand + slot) ===== */
.mhd .mhd__row{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important; /* topo */
  width: 100% !important;
  gap: 12px;
}

/* >>>> MUITO IMPORTANTE: Elementor costuma setar width:100% nos filhos
   Aqui a gente neutraliza isso pros filhos diretos da row. */
.mhd .mhd__row > *{
  width: auto !important;
  max-width: none !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

/* ===== BRAND (coluna/container da logo) ===== */
.mhd .mhd__brand{
  width: 50% !important;         /* topo: 50% */
  flex: 0 0 50% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative;
  min-width: 0 !important;
  transition: width .35s ease, justify-content .35s ease;
}

/* Logos */
.mhd .mhd__logo{
  display: block;
  height: auto;
  max-width: 100%;
  max-height: 48px;              /* controla altura (não fica gigante) */
  width: auto;
  transition: opacity .3s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}

.mhd .mhd__logo--top{ opacity: 1; transform: translateY(0); }
.mhd .mhd__logo--scrolled{
  opacity: 0;
  transform: translateY(-8px);
  position: absolute;
  left: 0;
}

/* ===== SLOT (coluna/container do menu) ===== */
.mhd .mhd__slot{
  width: 0 !important;           /* topo: não ocupa espaço */
  flex: 0 0 0 !important;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;

  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  min-width: 0 !important;

  transition: width .35s ease, opacity .25s ease;
}

/* =========================
   SCROLLED
========================= */
.mhd.is-scrolled{
  background-color: #14213D !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  padding: 10px 14px;
  backdrop-filter: blur(10px);
}

/* scrolled: row vira space-between */
.mhd.is-scrolled .mhd__row{
  justify-content: space-between !important;
}

/* scrolled: logo 60% à esquerda */
.mhd.is-scrolled .mhd__brand{
  width: 70% !important;
  flex: 0 0 60% !important;
  justify-content: flex-start !important;
}

/* scrolled: some TOTAL a top */
.mhd.is-scrolled .mhd__logo--top{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  transform: translateY(10px) scale(.92);
}

/* scrolled: aparece a scrolled */
.mhd.is-scrolled .mhd__logo--scrolled{
  opacity: 1;
  transform: translateY(0);
  position: static;
}

/* scrolled: menu 40% à direita (lado a lado) */
.mhd.is-scrolled .mhd__slot{
  width: 20% !important;
  flex: 0 0 20% !important;

  opacity: 1;
  pointer-events: auto;
  overflow: visible;
}

/* ===== Mobile only ===== */
@media (min-width: 768px){
  .mhd{ display:none; }
}
/* HEADER DESKTOP BASE */
.dhd{
  position: sticky;
  top: 0;
  z-index: 9998;

  background: transparent;
  transition: background-color .45s cubic-bezier(.22,.61,.36,1),
              box-shadow .45s cubic-bezier(.22,.61,.36,1);

  backdrop-filter: blur(0px);
}

/* ESTADO SCROLLED */
.dhd.is-scrolled{
  background: #0b2c66; /* azul — troque se quiser */
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}

/* opcional: só desktop */
@media (max-width:767px){
  .dhd{ display:none; }
}/* End custom CSS */