.elementor-902 .elementor-element.elementor-element-61764ca{--display:flex;--background-transition:0.3s;}body:not(.rtl) .elementor-902 .elementor-element.elementor-element-fba6e51{left:0px;}body.rtl .elementor-902 .elementor-element.elementor-element-fba6e51{right:0px;}.elementor-902 .elementor-element.elementor-element-fba6e51{top:0px;}/* Start custom CSS for container, class: .elementor-element-61764ca *//* ==============================
   JR - HEADER / FOOTER (GLOBAL)
   (ElementsKit + Elementor)
   ============================== */

/* Segurança geral */
html, body { overflow-x: hidden; }

/* Alguns temas aplicam transform no wrapper e quebram position:fixed */
body, .site, .site-content, .elementor-site, .elementor-page {
  transform: none !important;
}

/* ---------- HEADER (FLUTUANTE) ---------- */
/*
  COMO USAR:
  - No container principal do template HEADER (ElementsKit), adicione classe: jr-header
  - O menu pode ser widget Nav Menu / WP Menu
  - Se você usa a estrutura antiga com .jr-header__bar/.jr-brand/.jr-nav etc, também funciona.
*/

/* Header flutuante sobre o conteúdo */
.jr-header{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;

  /* “transparente” quando está no topo */
  background: rgba(255,255,255,.35);
  border-bottom: 1px solid rgba(230,234,242,.40);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* Quando rolar, fica mais sólido */
.jr-header.jr-header--scrolled{
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(230,234,242,.90);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

/* Altura/padding do header (ajuste fino aqui) */
.jr-header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:78px;
  padding:10px 0;
}

/* Compensa o header fixo para não cobrir o topo das páginas */
body{
  padding-top: 78px; /* igual ao min-height do header */
}

/* Se a sua HOME tem hero com fundo escuro e você quer “header sobre o hero” perfeito: */
#home{
  margin-top: -78px;
  padding-top: 78px;
}

/* ---------- Logo ---------- */
.jr-brand{
  display:flex;
  align-items:center;
}
.jr-brand img{
  width: 220px;     /* desktop */
  max-width: 100%;
  height: auto;
  display:block;
}

/* ---------- MENU (widget do Elementor/ElementsKit) ---------- */
/*
  Se você usa widget Nav Menu do Elementor, ele não cria <ul> igual ao seu .jr-nav.
  Então eu deixo 2 conjuntos: um para .jr-nav (se você estiver usando HTML) e outro
  para .elementor-nav-menu (se estiver usando o widget).
*/

/* Caso você use um container com classe .jr-nav */
.jr-nav{
  display:flex;
  align-items:center;
}
.jr-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.jr-nav li{ margin:0; padding:0; }

.jr-nav a{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  color:#1f2a44;
  opacity:.92;
  transition:.15s ease;
  text-decoration:none;
}
.jr-nav a:hover,
.jr-nav a:focus{
  background:#e9effa;
  opacity:1;
}

/* Widget Nav Menu do Elementor (menu "Principal") */
.jr-header .elementor-nav-menu--main .elementor-item{
  padding: 10px 14px !important;
  border-radius: 12px;
  font-weight: 700 !important;
  color: #1f2a44 !important;
  opacity: .92;
  transition: .15s ease;
}
.jr-header .elementor-nav-menu--main .elementor-item:hover{
  background: #e9effa;
  opacity: 1;
}
.jr-header .elementor-nav-menu--main .elementor-item.elementor-item-active{
  background: #e9effa;
  opacity: 1;
}

/* Compacta um pouco no desktop para caber melhor */
@media (min-width:981px){
  .jr-nav a{ padding:10px 10px; }
  .jr-header .elementor-nav-menu--main .elementor-item{ padding:10px 10px !important; }
}

/* ---------- Direita (telefone + botões) ---------- */
.jr-header__right{
  display:flex;
  align-items:center;
  gap:12px;
}

.jr-phone{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  color:#1f2a44;
  white-space:nowrap;
  text-decoration:none;
}
.jr-phone svg{
  flex:0 0 auto;
  color:#1f2a44;
}

/* Botões */
.jr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:12px;
  font-weight:900;
  text-decoration:none;
  border:1px solid transparent;
  transition:.2s ease;
  white-space:nowrap;
}

.jr-btn--primary{
  background:#5b86c8;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(91,134,200,.25);
}
.jr-btn--primary:hover{
  transform:translateY(-1px);
  filter:brightness(.98);
}

.jr-btn--outline{
  background:transparent;
  border-color:rgba(31,42,68,.25);
  color:#1f2a44;
}
.jr-btn--outline:hover{ background:#eef2ff; }

/* ---------- Responsivo Header ---------- */
@media (max-width:980px){
  /* Se o menu do widget já vira hamburguer sozinho, não force sumir.
     Se você estiver usando .jr-nav manual, ele some aqui. */
  .jr-nav{ display:none; }

  .jr-phone{ display:none; }
  .jr-brand img{ width:170px; }
  .jr-header__bar{ min-height:70px; }
  body{ padding-top:70px; }
  #home{ margin-top:-70px; padding-top:70px; }
}
@media (max-width:560px){
  .jr-brand img{ width:150px; }
}

/* ---------- FOOTER ---------- */
.jr-footer{
  background:#0a234f;
  color:rgba(255,255,255,.9);
  border-top:1px solid rgba(255,255,255,.08);
  padding:46px 0 18px;
}

.jr-footer__grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1.2fr;
  gap:26px;
}

.jr-footer h5{
  margin:8px 0 14px;
  font-size:18px;
  font-weight:900;
  color:#fff;
}

.jr-footer p,
.jr-footer a{
  color:rgba(255,255,255,.82);
  font-size:14.5px;
  line-height:1.5;
  text-decoration:none;
}
.jr-footer a:hover{ color:#fff; }

.jr-footer ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.jr-social{
  display:flex;
  gap:10px;
  margin-top:16px;
}
.jr-social a{
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.jr-footer__bottom{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.65);
  font-size:13px;
}

/* Responsivo Footer */
@media (max-width:980px){
  .jr-footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .jr-footer__grid{ grid-template-columns:1fr; }
}

/* ---------- WhatsApp flutuante (premium/nítido) ---------- */
.jr-wa{
  position:fixed;
  right:18px;
  bottom:18px;
  width:58px;
  height:58px;
  border-radius:999px;
  background:#22c55e;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:999999;
  text-decoration:none;

  border:2px solid rgba(255,255,255,.55);
  box-shadow:0 16px 38px rgba(34,197,94,.30);

  transform: translate3d(0,0,0);
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.jr-wa:hover{
  transform: translate3d(0,-2px,0);
  filter: brightness(1.02);
  box-shadow:0 20px 48px rgba(34,197,94,.34);
}

.jr-wa svg{
  width:28px;
  height:28px;
  color:#fff;
  display:block;
}/* End custom CSS */