:root{
  /* Altura base do navbar (usado para compensar o fixed-top) */
  --navbar-height: 48px;
  --jobel-blue:#0B4EA2;
  --jobel-blue-2:#083A78;
  --jobel-yellow:#0EA5E9;
  --ink:#0F172A;
  --muted:#475569;
  --bg:#F6F8FC;
  --card:#FFFFFF;
  --border:rgba(15,23,42,.10);
  --shadow:0 12px 30px rgba(2,8,23,.10);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
}

/* Compensa o fixed-top para o conteúdo não ficar "por baixo" do menu */
.site-main{ padding-top: var(--navbar-height) !important; }

/* Header wrapper */
.site-header{ height: auto; }

/* Navbar */
.navbar{
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
  transition: all .2s ease;
  overflow: visible;
}
.navbar .container{overflow: visible;}

/* Navbar height fix: logo larger without increasing bar height */
.navbar{min-height:72px;padding-top:0;padding-bottom:0;overflow:visible;}
.navbar .container{min-height:72px;}
.navbar-brand{padding:0;display:flex;align-items:center;position:relative;z-index:9999;}
@media (max-width: 768px){.navbar{min-height:68px;}.navbar .container{min-height:68px;}}

.navbar.scrolled{
  box-shadow: 0 10px 25px rgba(2,8,23,.18);

  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
}
.brand-logo{height:190px;width:auto;transform:translateY(8px);filter: drop-shadow(0 12px 22px rgba(0,0,0,.35));}
@media (max-width: 768px){.brand-logo{height:190px;width:auto;transform:translateY(8px);filter: drop-shadow(0 12px 22px rgba(0,0,0,.35));}}
.brand-name{
  font-weight: 700;
  letter-spacing: .2px;
}
.navbar .nav-link{
  color: #1f2937;
  font-weight: 600;
  text-shadow: none;
}
.navbar .nav-link:hover{ color:#0f172a; }
.navbar .nav-link.active{ color:#0f172a; }

/* Mobile toggler visibility */
.navbar .navbar-toggler{border-color: rgba(15,23,42,.25);}
.navbar .navbar-toggler-icon{filter: invert(0);}
.navbar.scrolled .navbar-toggler{border-color: rgba(255,255,255,.35);}
.navbar.scrolled .navbar-toggler-icon{filter: invert(1);}


/* Navbar scrolled: keep transparent but make links readable on hero */
.navbar.scrolled .nav-link{ color: rgba(255,255,255,.92); text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.navbar.scrolled .nav-link:hover{ color:#fff; }
.navbar.scrolled .nav-link.active{ color:#fff; }
.dropdown-menu{
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 14px;
  padding: 10px;
}

/* Buttons */
.btn-jobel{
  background: var(--jobel-yellow);
  color: #111827;
  border: none;
  font-weight: 800;
  border-radius: 999px;
  box-shadow: 0 10px 18px rgba(255,196,0,.22);
}
.btn-jobel:hover{
  filter: brightness(.96);
  transform: translateY(-1px);
}
.btn-outline-jobel{
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  border-radius:999px;
  font-weight:700;
}
.btn-outline-jobel:hover{
  background: rgba(255,255,255,.10);
  color:#fff;
}

/* Sections */
.section{
  padding: 64px 0;
}
.section-title{
  font-weight: 900;
  letter-spacing: -.4px;
  margin-bottom: 12px;
}
.section-subtitle{
  color: var(--muted);
  max-width: 720px;
}

/* Hero */
.hero{
  margin-top: 0;

  background: radial-gradient(1200px 600px at 20% 10%, rgba(255,196,0,.18), transparent 60%),
              radial-gradient(900px 500px at 80% 0%, rgba(255,255,255,.14), transparent 60%),
              linear-gradient(135deg, var(--jobel-blue), var(--jobel-blue-2));
  color:#fff;
  padding: 88px 0 64px;
  position: relative;
  overflow:hidden;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
}
.hero h1{
  font-weight: 950;
  letter-spacing: -.8px;
  line-height: 1.05;
  margin: 14px 0 12px;
}
.hero p{
  color: rgba(255,255,255,.86);
  font-size: 1.05rem;
  max-width: 60ch;
}
.hero-card{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 18px;
}
.hero-card .kpi{
  font-weight: 900;
  font-size: 1.3rem;
}
.hero-card .lbl{
  color: rgba(255,255,255,.80);
  font-weight: 600;
  font-size: .9rem;
}

/* Cards */
.card-pro{
  border:1px solid var(--border);
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(2,8,23,.06);
  overflow:hidden;
}
.card-pro{position:relative;}
.hero-seal{
  position:absolute;
  top:-18px;
  right:-18px;
  width:120px;
  height:auto;
  z-index:3;
  transform: rotate(10deg);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.28));
}
@media (max-width: 992px){
  .hero-seal{ width:96px; top:-14px; right:-14px; }
}

.card-pro .icon{
  width: 48px; height:48px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(11,78,162,.08);
  color: var(--jobel-blue);
  font-size: 1.2rem;
}
.card-pro .card-title{
  font-weight: 900;
  margin-bottom: 6px;
}
.card-pro p{ color: var(--muted); margin:0; }

/* Feature strip */
.strip{
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.strip .item{
  display:flex; gap:12px; align-items:flex-start;
}
.strip .item i{ color: var(--jobel-blue); margin-top: 3px; }

/* Gallery */
.gallery img{
  width:100%;
  height: 210px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--border);
}

/* Footer */
.site-footer{
  background: linear-gradient(180deg, #071B3D, #051430);
}
.site-footer a{ color: rgba(255,255,255,.85); text-decoration:none; }
.site-footer a:hover{ color: #fff; text-decoration: underline; }
.footer-title{
  font-weight: 900;
  color:#fff;
  margin-bottom: 10px;
}
.footer-list li{ margin-bottom: 8px; color: rgba(255,255,255,.75); }
.footer-hr{ border-color: rgba(255,255,255,.12); }
.footer-logo{ width: 36px; height:36px; }

/* Floating buttons */
.float-whatsapp{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  z-index: 1050;
}
.float-whatsapp i{ font-size: 1.4rem; }

.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 80px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(15,23,42,.92);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .2s ease;
  z-index: 1050;
}

/* Footer contact form */
.contact-form .form-control{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
}
.contact-form .form-control::placeholder{ color: rgba(255,255,255,.55); }
.contact-form .form-control:focus{
  box-shadow: 0 0 0 .25rem rgba(255,196,0,.18);
  border-color: rgba(255,196,0,.55);
}

/* Premium micro-interactions */
.card-pro, .btn, .dropdown-menu{ transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.card-pro:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(2,8,23,.10); }

/* Reveal animations */
.reveal{ opacity: 0; transform: translateY(14px); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }

/* KPI row */
.kpi-row .kpi-box{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(2,8,23,.06);
}
.kpi-row .kpi-num{ font-weight: 950; font-size: 1.6rem; letter-spacing: -.6px; }
.kpi-row .kpi-lbl{ color: var(--muted); font-weight: 650; }
.back-to-top.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover{ color:#fff; filter: brightness(1.05); }

/* Utilities */
.small-muted{ color: var(--muted); }


/* 50 anos badge (institucional) */
.badge-50img{height:46px;width:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));}
@media (max-width: 992px){.badge-50img{height:40px;}}
.badge-50 small{
  font-weight:700;
  opacity:.95;
  letter-spacing:2px;
  font-size:.72em;
}
.navbar .navbar-brand{gap:12px;}
.navbar{padding-top:14px;padding-bottom:14px;}


/* Dropdown on hover (desktop) */
@media (min-width: 992px){
  .navbar .nav-item.dropdown:hover > .dropdown-menu{display:block;margin-top:0;}
  .navbar .dropdown-menu{border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.18);}
}


/* Selo 50 anos (hero) */
.selo-50-hero{
  position:absolute;
  right:26px;
  top:120px;
  width:118px;
  height:118px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,.06) 55%, rgba(0,0,0,.08));
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  display:grid;
  place-items:center;
  z-index:20;
}
.selo-50-hero__inner{text-align:center;color:#fff;font-weight:900;line-height:1;}
.selo-50-hero__num{font-size:42px;}
.selo-50-hero__txt{font-size:13px;letter-spacing:3px;opacity:.95;margin-top:2px;}
@media (max-width: 768px){
  .selo-50-hero{right:14px;top:96px;width:92px;height:92px;}
  .selo-50-hero__num{font-size:34px;}
}

/* Footer logo fix (clean, readable, not stretched) */
.site-footer .footer-logo{height:46px;width:auto;max-width:180px;object-fit:contain;opacity:.95;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)) saturate(1.05);}
@media (max-width:576px){.site-footer .footer-logo{height:40px;max-width:150px;}}


/* === NAVBAR PREMIUM CLEAN (sem efeito colorido) === */
.navbar{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 0 !important;
  overflow: visible;
  transition: box-shadow .25s ease;
}
.navbar .container{overflow: visible;}
.navbar.scrolled{
  background: rgba(105, 115, 130, 0.96) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

/* Logo (apenas) */
.navbar .navbar-brand{padding: 0; margin-right: 14px;}
.navbar .navbar-brand img{
  height: 70px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.28));
}

@media (max-width: 768px){
  .navbar .navbar-brand img{ height: 56px; }
}


/* Links: sem pílula/colorido; underline discreto + opacidade */
.navbar .nav-link{
  color: rgba(255,255,255,.88) !important;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 10px 0 !important;
  margin: 0 10px;
  position: relative;
  opacity: .90;
  transition: opacity .18s ease, transform .18s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
  opacity: 1;
  transform: translateY(-1px);
}
.navbar .nav-link::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  width: 0;
  margin: 0 auto;
  background: rgba(255,255,255,.95);
  border-radius: 999px;
  transition: width .22s ease;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after{
  width: 100%;
}

/* Dropdown (clean) */
.navbar .dropdown-menu{
  background: rgba(35, 40, 50, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px 8px;
  margin-top: 14px;
  min-width: 240px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.dropdown-menu .dropdown-item{
  color:#fff;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 10px;
  transition: background .18s ease, padding-left .18s ease;
}
.dropdown-menu .dropdown-item:hover{
  background: rgba(255,255,255,.10);
  padding-left: 18px;
}
.dropdown-menu .dropdown-divider{
  border-color: rgba(255,255,255,.12);
  margin: 8px 0;
}

/* give top padding so content doesn't go under fixed navbar */
body{ padding-top: 86px; }
@media (max-width: 768px){
  body{ padding-top: 74px; }
  .navbar .nav-link{ margin: 0; padding: 10px 8px !important; }
  .navbar .nav-link::after{ display:none; }
}



/* === Galeria Carousel === */
.galeria-carousel{ position: relative; }
.galeria-carousel .carousel-inner{ border-radius: 18px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.18); }
.galeria-carousel .gal-img{ object-fit: cover; height: 100%; }
.galeria-carousel .carousel-indicators{ bottom: -34px; }
.galeria-carousel .carousel-indicators [data-bs-target]{ width: 10px; height: 10px; border-radius: 999px; }
@media (max-width: 768px){
  .galeria-carousel .carousel-indicators{ display:none; }
}


/* (clean-up) removed redundant navbar override blocks */



@media (max-width: 576px){
  .brand-logo{height:190px;width:auto;transform:translateY(8px);filter: drop-shadow(0 12px 22px rgba(0,0,0,.35));}
}


/* ===== Navbar definitivo: transparente sempre + legível no topo e no hero ===== */
.navbar-jobel{background: transparent !important; backdrop-filter:none !important; border-bottom:0 !important; overflow: visible;}
.navbar-jobel .container{overflow: visible;}
/* Estado inicial (topo): menu escuro sobre fundo claro */
.navbar-jobel .nav-link{color:#111827 !important; opacity:1; text-shadow:none;}
.navbar-jobel .nav-link:hover{color:#0b1220 !important;}
.navbar-jobel .nav-link::after{background:#111827;}
/* Estado scrolled: menu claro sobre hero azul */
.navbar-jobel.scrolled .nav-link{color: rgba(255,255,255,.95) !important; text-shadow:0 2px 10px rgba(0,0,0,.45);}
.navbar-jobel.scrolled .nav-link:hover{color:#fff !important;}
.navbar-jobel.scrolled .nav-link::after{background:#fff;}
/* Toggler (hamburger) */
.navbar-jobel .navbar-toggler{border-color: rgba(17,24,39,.25);}
.navbar-jobel .navbar-toggler-icon{filter: invert(0);}
.navbar-jobel.scrolled .navbar-toggler{border-color: rgba(255,255,255,.35);}
.navbar-jobel.scrolled .navbar-toggler-icon{filter: invert(1);}
/* Logo overlay sem cortar a tela */
.navbar-jobel .jobel-logo{position:relative; z-index:9999;}


/* Logo responsivo (overlay sem cortar) */
@media (max-width: 768px){
  .brand-logo{height:120px;transform:translateY(6px);}
}


/* ===== NAVBAR TECH CLEAN + PULSO ELÉTRICO (FINAL) ===== */
:root{
  --jobel-blue:#0b4fa2;
  --jobel-blue-dark:#083a78;
  --jobel-blue-light:#1e6fd9;
  --jobel-electric:#00c2ff;
}

.navbar-jobel{
  background: rgba(11,79,162,.88) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0,0,0,.20);
  border-bottom: 0;
  }

.navbar-jobel .nav-link{
  color: rgba(255,255,255,.92) !important;
  position: relative;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Indicação clara de submenus (seta como no site antigo) */
.navbar-jobel .dropdown-toggle::after{ display:none !important; }
.navbar-jobel .nav-dd-icon{
  font-size: .75rem;
  margin-left: .35rem;
  opacity: .95;
  transition: transform .25s ease, opacity .25s ease;
}
.navbar-jobel .nav-item.dropdown.show .nav-dd-icon{
  transform: rotate(180deg);
}

.navbar-jobel .nav-link:hover,
.navbar-jobel .nav-link.active{
  color: #fff !important;
}

.navbar-jobel .nav-link::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-10px;
  width:0;
  height:6px;
  background: radial-gradient(ellipse at center,
    rgba(0,194,255,.95) 0%,
    rgba(0,194,255,.55) 35%,
    rgba(0,194,255,0) 75%);
  border-radius: 50%;
  transform: translateX(-50%);
  filter: blur(1.5px);
  opacity: 0;
  transition: width .35s ease, opacity .35s ease;
  pointer-events:none;
}

.navbar-jobel .nav-link:hover::after,
.navbar-jobel .nav-link.active::after{
  width: 120%;
  opacity: 1;
}

@keyframes electricPulse{
  0%{opacity:.45; filter: blur(2px);}
  50%{opacity:.95; filter: blur(1px);}
  100%{opacity:.45; filter: blur(2px);}
}

.navbar-jobel .nav-link:hover::after{
  animation: electricPulse 1.4s ease-in-out infinite;
}

/* CTA */
.navbar-jobel .btn-cta{
  background: linear-gradient(135deg, var(--jobel-blue-light), var(--jobel-electric));
  color:#fff !important;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  box-shadow: 0 0 0 rgba(0,194,255,0);
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}

.navbar-jobel .btn-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(0,194,255,.45);
  filter: brightness(1.03);
}


/* ===== Dropdown (Submenu) alinhado com o visual Jobel ===== */
.navbar-jobel .dropdown-menu{
  background: rgba(8,58,120,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.navbar-jobel .dropdown-item{
  color: rgba(255,255,255,.92);
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .18s ease, transform .18s ease, color .18s ease;
}

.navbar-jobel .dropdown-item i{
  color: var(--jobel-electric);
  filter: drop-shadow(0 0 10px rgba(0,194,255,.25));
}

.navbar-jobel .dropdown-item:hover,
.navbar-jobel .dropdown-item:focus{
  background: linear-gradient(90deg, rgba(0,194,255,.18), rgba(255,255,255,0));
  color: #fff;
  transform: translateX(2px);
}

.navbar-jobel .dropdown-divider{
  border-top: 1px solid rgba(255,255,255,.12);
}


/* Navbar height responsive */
@media (max-width: 991.98px){
  :root{ --navbar-height: 48px; }
}

/* ==========================================================
   Responsividade (fix final)
   - Logo com tamanho fluido (evita estourar no mobile)
   - Vídeo do hero 100% responsivo
   ========================================================== */

/* Logo fluido (sobrescreve blocos antigos duplicados) */
.brand-logo{
  height: clamp(64px, 7vw, 130px) !important;
  width: auto !important;
  max-width: 100% !important;
  transform: translateY(6px) !important;
}

@media (max-width: 576px){
  .brand-logo{ height: clamp(56px, 14vw, 96px) !important; }
}

/* Hero media (vídeo) */
.hero-media{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  max-height: 520px;
}

@media (max-width: 991.98px){
  .hero-media{ max-height: 420px; }
}


/* ==========================================================
   MENU EM TABS COM ÍCONES (igual referência enviada)
   - Fundo escuro
   - Itens em "blocos" com separadores
   - Item ativo/hover com azul destaque
   ========================================================== */

.navbar.navbar-jobel{
  background: #243b52 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.navbar-jobel .jobel-mega-nav{ gap: 0 !important; }

.navbar-jobel .navbar-nav .nav-item{
  border-right: 1px solid rgba(255,255,255,.12);
}

.navbar-jobel .navbar-nav .nav-item:last-child{
  border-right: 0;
}

.navbar-jobel .nav-link,
.navbar-jobel .btn-cta{
  padding: 18px 18px !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,.95) !important;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}

.navbar-jobel .nav-link::after{ display:none !important; content:none !important; }

.navbar-jobel .nav-ico{ font-size: 1.05rem; opacity: .95; }

/* Hover/ativo e dropdown aberto */
.navbar-jobel .nav-link:hover,
.navbar-jobel .nav-link:focus,
.navbar-jobel .nav-link.active,
.navbar-jobel .nav-item.dropdown.show > .nav-link,
.navbar-jobel .btn-cta:hover,
.navbar-jobel .btn-cta:focus{
  background: #00a6d6 !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Indicador de submenu */
.navbar-jobel .nav-dd-icon{
  font-size: .75rem;
  margin-left: 6px;
  opacity: .9;
  transition: transform .2s ease;
}
.navbar-jobel .nav-item.dropdown.show .nav-dd-icon{ transform: rotate(180deg); }

/* Dropdown estilo "lista" */
.navbar-jobel .dropdown-menu{
  background: #2f4b63;
  border: 0;
  border-radius: 0 0 6px 6px;
  padding: 0;
  margin-top: 0;
  min-width: 240px;
  box-shadow: 0 14px 35px rgba(0,0,0,.25);
}

.navbar-jobel .dropdown-item{
  color: rgba(255,255,255,.95);
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  border-radius: 0;
  font-weight: 700;
  gap: 10px;
}

.navbar-jobel .dropdown-item i{ color: rgba(255,255,255,.92); filter: none; }

.navbar-jobel .dropdown-item:hover,
.navbar-jobel .dropdown-item:focus{
  background: #00a6d6;
  color: #fff;
  transform: none;
}

/* Mobile: menu em coluna (mantém click do Bootstrap) */
@media (max-width: 991.98px){
  .navbar-jobel .navbar-nav .nav-item{ border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .navbar-jobel .navbar-nav .nav-item:last-child{ border-bottom: 0; }
  .navbar-jobel .nav-link,
  .navbar-jobel .btn-cta{ width: 100%; justify-content: flex-start; }
  .navbar-jobel .dropdown-menu{ box-shadow: none; border-radius: 0; }
}

@media (max-width: 576px){
  .hero-media{ aspect-ratio: 16 / 12; max-height: 360px; }
}

/* ==========================================================
   Trabalhe conosco (visual premium)
   ========================================================== */

.hero-career{
  padding-top: calc(var(--navbar-height, 92px) + 24px);
  padding-bottom: 48px;
}

.career-card{
  border-radius: 24px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.career-side{
  border-radius: 24px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
}

.career-tip{
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.career-badge{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,194,255,.16);
  border: 1px solid rgba(0,194,255,.28);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 0 24px rgba(0,194,255,.18);
}

.career-divider{ border-top: 1px solid rgba(255,255,255,.12); }
.text-soft{ color: rgba(255,255,255,.78); }

.hero-career .form-control,
.hero-career textarea{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,20,30,.32);
  color: #fff;
}

.hero-career .form-control::placeholder,
.hero-career textarea::placeholder{ color: rgba(255,255,255,.55); }

.hero-career .form-control:focus,
.hero-career textarea:focus{
  border-color: rgba(0,194,255,.55);
  box-shadow: 0 0 0 .25rem rgba(0,194,255,.14);
  background: rgba(10,20,30,.40);
  color: #fff;
}

/* Dropzone */
.dropzone{
  position: relative;
  border-radius: 18px;
  border: 1.5px dashed rgba(255,255,255,.22);
  background: rgba(10,20,30,.22);
  overflow: hidden;
}

.dropzone-input{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.dropzone-ui{
  padding: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.dz-left{
  display: flex;
  align-items: center;
  gap: 14px;
}

.dz-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,194,255,.14);
  border: 1px solid rgba(0,194,255,.24);
  color: #fff;
  font-size: 20px;
}

.dz-title{ font-weight: 800; }
.dz-sub{ color: rgba(255,255,255,.75); font-size: .95rem; }
.dz-hint{ color: rgba(255,255,255,.65); font-size: .85rem; }

.dropzone.is-dragover{
  border-color: rgba(0,194,255,.75);
  background: rgba(0,194,255,.08);
}

.file-info{
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}

/* Steps */
.mini-steps .step{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mini-steps .step span{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,194,255,.18);
  border: 1px solid rgba(0,194,255,.28);
  font-weight: 800;
}

@media (max-width: 576px){
  .hero-career{ padding-bottom: 36px; }
  .dropzone-ui{ padding: 16px; }
}

/* ==========================================================
   AJUSTE FINO DO MENU (Jobel) — menos "áspero" e sem overflow
   - Tipografia Roboto
   - Reduz padding/altura e peso
   - Permite wrap e evita extrapolar a página
   ========================================================== */

html, body{
  font-family: 'Roboto', sans-serif;
}

/* evita overflow horizontal geral */
body{
  overflow-x: hidden;
}

/* barra */
.navbar.navbar-jobel{
  background: #243b52 !important;
  box-shadow: none !important;
}

/* permite quebrar linha se faltar espaço (desktop) */
.navbar-jobel .navbar-nav{
  flex-wrap: wrap;
}

/* itens */
.navbar-jobel .navbar-nav .nav-item{
  border-right: 1px solid rgba(255,255,255,.10);
}
.navbar-jobel .navbar-nav .nav-item:last-child{ border-right: 0; }

/* links / tabs */
.navbar-jobel .nav-link,
.navbar-jobel .btn-cta{
  padding: 12px 14px !important;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .28px;
  text-transform: uppercase;
  line-height: 1.05;
  gap: 8px;
}

/* ícones */
.navbar-jobel .nav-ico{
  font-size: .95rem;
  opacity: .92;
}
.navbar-jobel .nav-dd-icon{
  font-size: .80rem;
  opacity: .85;
}

/* hover/ativo: azul suave */
.navbar-jobel .nav-link:hover,
.navbar-jobel .nav-link:focus,
.navbar-jobel .nav-link.active,
.navbar-jobel .nav-item.dropdown.show > .nav-link{
  background: rgba(0,159,225,.18);
  color: #ffffff !important;
}

/* dropdown */
.navbar-jobel .dropdown-menu{
  border-radius: 10px;
  overflow: hidden;
  min-width: 220px;
}
.navbar-jobel .dropdown-item{
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.navbar-jobel .dropdown-item:last-child{ border-bottom: 0; }

/* melhora comportamento em larguras menores */
@media (max-width: 1200px){
  .navbar-jobel .nav-link,
  .navbar-jobel .btn-cta{
    padding: 10px 10px !important;
    font-size: 12.5px;
  }
}
@media (max-width: 992px){
  /* no mobile o collapse do Bootstrap vira coluna, então removemos wrap e separadores laterais */
  .navbar-jobel .navbar-nav{ flex-wrap: nowrap; }
  .navbar-jobel .navbar-nav .nav-item{ border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .navbar-jobel .navbar-nav .nav-item:last-child{ border-bottom: 0; }
}

/* ============================
   NAVBAR: 1 linha no desktop
   ============================ */
@media (min-width: 992px){

  /* fonte mais compacta só no menu */
  .navbar-jobel{
    font-family: "Roboto Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  }

  /* NÃO deixar quebrar linha */
  .navbar-jobel .navbar-nav{
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }

  /* itens mais “finos” */
  .navbar-jobel .nav-link,
  .navbar-jobel .btn-cta{
    padding: 10px 10px !important;   /* ↓ era 12/14 ou 18/18 */
    font-size: 12px !important;      /* ↓ reduz no desktop */
    font-weight: 500 !important;     /* ↓ tira o “negrito” forte */
    letter-spacing: .18px !important;
    gap: 6px !important;
  }

  /* ícones menores */
  .navbar-jobel .nav-ico{
    font-size: .95rem !important;
  }

  /* separadores (opcional: deixa mais leve) */
  .navbar-jobel .navbar-nav .nav-item{
    border-right: 1px solid rgba(255,255,255,.08);
  }

  /* CTA não virar “tijolo” */
  .navbar-jobel .btn-cta{
    padding: 10px 12px !important;
  }
}


/* ===== FIX LOGO (não distorce + não encolhe no menu) ===== */
@media (min-width: 992px){

  .navbar-jobel .navbar-brand,
  .navbar-jobel .jobel-logo{
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  .navbar-jobel .navbar-brand img,
  .navbar-jobel .brand-logo{
    height: 100px !important;     /* ajuste aqui (60~72 fica bom) */
    width: auto !important;      /* mantém proporção */
    max-height: 100px !important;
    object-fit: contain !important;
    transform: none !important;  /* tira translateY antigo que bagunça */
    filter: none !important;     /* opcional: remove sombras antigas */
    display: block !important;
  }

}

@media (min-width: 992px){

  .navbar.navbar-jobel{
    background: rgba(36, 59, 82, 0.62) !important;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
  }

}






/* WhatsApp flutuante */
.float-whatsapp{
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #25D366;
  color: #fff;
  text-decoration: none;

  z-index: 9999;
  box-shadow: 0 10px 25px rgba(0,0,0,.22);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  will-change: transform;
}

/* Ícone */
.float-whatsapp i{
  font-size: 30px;
  line-height: 1;
  transition: transform .22s ease;
}

/* Hover (desktop) */
.float-whatsapp:hover{
  transform: translateY(-3px) scale(1.10);
  box-shadow: 0 16px 35px rgba(37, 211, 102, .45);
  filter: brightness(1.03);
}

.float-whatsapp:hover i{
  transform: rotate(-10deg) scale(1.08);
}

/* Acessibilidade: foco via teclado */
.float-whatsapp:focus-visible{
  outline: 3px solid rgba(255,255,255,.85);
  outline-offset: 3px;
}

/* Opcional: pulse suave contínuo */
@keyframes waPulse{
  0%   { box-shadow: 0 10px 25px rgba(0,0,0,.22), 0 0 0 0 rgba(37,211,102,.45); }
  70%  { box-shadow: 0 10px 25px rgba(0,0,0,.22), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 10px 25px rgba(0,0,0,.22), 0 0 0 0 rgba(37,211,102,0); }
}

.float-whatsapp{
  animation: waPulse 2.6s infinite;
}

/* Respeitar quem prefere menos animação */
@media (prefers-reduced-motion: reduce){
  .float-whatsapp{ animation: none; transition: none; }
  .float-whatsapp i{ transition: none; }
}

.text-justified {
  text-align: justify;
  text-justify: inter-word;
}