/* =====================================================================
 * Classificados019 / VAGAS019 — v3.4.4
 * Full-bleed: container chain 100% + plugin width:100%.
 * Sem negative margins (sem bug de scrollbar).
 * ===================================================================== */

/* ─── VARIÁVEIS ────────────────────────────────────────────────────── */
.vagas-page {
	--c-black:  #05070B;
	--c-navy:   #0B1D3A;
	--c-blue:   #0867F2;
	--c-blue2:  #135DEB;
	--c-bg:     #FAFCFF;
	--c-white:  #FFFFFF;
	--c-text:   #061A40;
	--c-muted:  #647089;
	--c-gold:   #C7922B;
	--c-line:   rgba(8,103,242,0.09);
	--r-lg:     32px;
	--r-md:     18px;
	--sh-md:    0 20px 60px rgba(8,35,90,0.14);
	--sh-sm:    0 6px 20px rgba(8,35,90,0.08);

	box-sizing: border-box;
	/* Full-bleed simples: plugin ocupa 100% do seu container.
	   A mágica está em expandir o container Astra (abaixo). */
	width: 100% !important;
	margin: 0 !important;
	padding: 0;
	overflow-x: hidden;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.vagas-page *, .vagas-page *::before, .vagas-page *::after { box-sizing: border-box; }
.vagas-page summary { list-style: none; cursor: pointer; }
.vagas-page summary::-webkit-details-marker { display: none; }
.v019-i { width: 18px; height: 18px; flex: 0 0 auto; }

/* ─── EXPANDIR TODA A CADEIA DE CONTAINERS DO ASTRA ─────────────────
   Quando o plugin está presente, todos os containers pai viram 100%.
   O plugin herda esse espaço naturalmente — sem negative margins,
   sem bug de scrollbar, sem diferença de vw vs viewport visível.
   ─────────────────────────────────────────────────────────────────── */
/* ─── ESTRATÉGIA DO FUNDO PRETO ──────────────────────────────────────
   Body e #page ficam preto quando o plugin está ativo.
   Qualquer gap residual (1-2px de borda, sombra) fica invisível:
   preto sobre preto. O conteúdo do plugin tem bg branco explícito.
   ─────────────────────────────────────────────────────────────────── */
body:has(.vagas-page),
body:has(.vagas-page) #page,
body:has(.vagas-page) .hfeed,
body:has(.vagas-page) #page-container { background-color: #000000 !important; }

body:has(.vagas-page)             { overflow-x: hidden !important; }
body:has(.vagas-page) .ast-single-entry-banner { display: none !important; }
body:has(.vagas-page) .ast-container,
body:has(.vagas-page) #content,
body:has(.vagas-page) .site-content,
body:has(.vagas-page) #primary,
body:has(.vagas-page) .content-area,
body:has(.vagas-page) .site-main,
body:has(.vagas-page) main#main,
body:has(.vagas-page) article,
body:has(.vagas-page) .ast-article-single,
body:has(.vagas-page) .entry-content {
	max-width: 100% !important; width: 100% !important;
	padding: 0 !important; margin: 0 !important;
	overflow: visible !important;
}
/* GAP TOPO: border do header que cria linha divisória */
body:has(.vagas-page) .main-header-bar,
body:has(.vagas-page) .ast-header-break-point,
body:has(.vagas-page) .ast-below-header-wrap { border-bottom: 0 !important; box-shadow: none !important; }
/* GAP RODAPÉ */
body:has(.vagas-page) #primary.content-area,
body:has(.vagas-page) #page,
body:has(.vagas-page) .hfeed { margin-bottom: 0 !important; padding-bottom: 0 !important; }
body:has(.vagas-page) .site-footer,
body:has(.vagas-page) footer.site-footer,
body:has(.vagas-page) #colophon { margin-top: 0 !important; padding-top: 0 !important; }
/* Oculta o bloco fallback que pode criar espaço */
body:has(.vagas-page) #c019-vagas-fb { display: none !important; }

/* Fallback sem :has() */
.v019-active                          { overflow-x: hidden !important; }
.v019-active .ast-single-entry-banner { display: none !important; }
.v019-active .ast-container,.v019-active #content,.v019-active .site-content,
.v019-active #primary,.v019-active .content-area,.v019-active .site-main,
.v019-active main#main,.v019-active article,.v019-active .ast-article-single,
.v019-active .entry-content {
	max-width:100%!important; width:100%!important;
	padding:0!important; margin:0!important; overflow:visible!important;
}
.v019-active .main-header-bar { border-bottom:0!important; box-shadow:none!important; }
.v019-active #primary.content-area,
.v019-active #page,.v019-active .hfeed { margin-bottom:0!important; padding-bottom:0!important; }
.v019-active .site-footer,.v019-active footer,.v019-active #colophon { margin-top:0!important; padding-top:0!important; }
.v019-active #c019-vagas-fb { display:none!important; }

/* ─── SCROLLBAR FINA AZUL GRADIENTE ─────────────────────────────────
   Visível apenas na página de vagas. Fina (6px), gradiente azul.
   ─────────────────────────────────────────────────────────────────── */
body:has(.vagas-page),
.v019-active {
	scrollbar-width: thin;
	scrollbar-color: #0867F2 #e8f0ff;
}
body:has(.vagas-page) ::-webkit-scrollbar,
.v019-active ::-webkit-scrollbar         { width: 6px; }
body:has(.vagas-page) ::-webkit-scrollbar-track,
.v019-active ::-webkit-scrollbar-track   { background: #e8f0ff; }
body:has(.vagas-page) ::-webkit-scrollbar-thumb,
.v019-active ::-webkit-scrollbar-thumb   {
	background: linear-gradient(180deg, #3b8bff 0%, #0867F2 40%, #0B1D3A 100%);
	border-radius: 6px;
}

/* ─── BRIDGE TOPO ────────────────────────────────────────────────────
   Gradiente exato das imagens enviadas: preto → navy → azul royal.
   ─────────────────────────────────────────────────────────────────── */
.vagas-bridge {
	position: relative;
	width: 100%;
	/* Começa em transparent: herda a cor do header sem criar linha */
	background: linear-gradient(180deg,
		rgba(5,9,21,0)    0%,    /* transparente → funde com qualquer header */
		rgba(5,9,21,.80)  6%,
		#091640           14%,
		#0E2D70           30%,
		#1040A8           48%,
		#1550D0           66%,
		#1B5EE8           84%,
		#1B5EE8           100%
	);
	padding: 0 0 140px; /* espaço grande para a onda */
	overflow: visible;
	z-index: 1;
}

/* ─── ONDA SVG TOPO (grande, colorida) ──────────────────────────────
   Posicionada no fundo da bridge, atrás do hero card (z-index:1 < 2).
   Cores graduais: azul royal → azul médio → fundo da página.
   ─────────────────────────────────────────────────────────────────── */
/* ─── MELHORIA 5: onda mais dramática e alta ─ */
.vagas-wave {
	position: absolute;
	bottom: -1px;
	left: 0; right: 0;
	height: clamp(160px, 34vw, 290px); /* mais alta e dramática */
	z-index: 1;
	pointer-events: none;
	line-height: 0;
	/* brilho sutil na crista */
	filter: drop-shadow(0 -4px 12px rgba(255,255,255,.18));
}
.vagas-wave svg {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%; height: 100%;
}

/* ─── HERO WRAP + CARD iOS GLASS ─────────────────────────────────────
   Sobe 100px sobre a onda. Card semi-transparente: as cores da onda
   passam através do backdrop-filter, criando o efeito iOS premium.
   ─────────────────────────────────────────────────────────────────── */
.vagas-hero-wrap {
	position: relative;
	z-index: 2;
	padding: 0 14px;
	margin-top: -100px; /* sobe 100px sobre a onda — onda visível atrás/em volta */
}
.vagas-hero-card {
	/* Glass iOS: fundo muito transparente → backdrop-filter captura a onda atrás */
	background: rgba(10, 20, 60, 0.22);
	-webkit-backdrop-filter: blur(28px) saturate(1.8) brightness(1.15);
	backdrop-filter: blur(28px) saturate(1.8) brightness(1.15);
	border-radius: var(--r-lg);
	/* Borda iOS: linha branca fina com glow azul */
	border: 1px solid rgba(255,255,255,0.22);
	box-shadow:
		0 0 0 1px rgba(59,139,255,0.25),
		0 24px 60px rgba(4,16,64,0.45),
		inset 0 1px 0 rgba(255,255,255,0.22),
		inset 1px 0 0 rgba(255,255,255,0.10);
	padding: 12px 16px 14px;
	max-width: 100%;
	margin: 0 auto;
}
.vagas-hero-img { width:100%; border-radius:18px; display:block; margin-bottom:12px; object-fit:cover; max-height:160px; }

/* Título — branco brilhante (fundo escuro glass) */
.vagas-title {
	margin: 0 0 2px;
	font-size: clamp(20px, 5.5vw, 34px);
	font-weight: 900; letter-spacing: -.3px;
	color: #ffffff;
	text-shadow: 0 2px 14px rgba(0,0,0,0.30);
	line-height: 1;
}
.vagas-subtitle {
	margin: 0 0 10px;
	font-size: clamp(7px, 1.6vw, 9px);
	font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
	color: rgba(255,255,255,0.62);
}

/* Pills glass */
.vagas-pills  { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
/* ─── MELHORIA 4: pills maiores e mais visíveis ─ */
.vagas-pill {
	display:inline-flex; align-items:center; gap:5px;
	padding:5px 11px; border-radius:999px;
	font-size:9.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
	color:rgba(255,255,255,0.90);
	background:rgba(255,255,255,0.12);
	border:1px solid rgba(255,255,255,0.22);
}
.vagas-pill .v019-i { width:9px; height:9px; color:rgba(255,255,255,.78); }

/* ─── BUSCA ──────────────────────────────────────────────────────────── */
.vagas-search-row {
	display: grid;
	grid-template-columns: 1fr 42px 42px;
	gap: 8px;
	column-gap: 14px; /* espaço horizontal maior entre filtro e lupa */
	align-items: center;
}
.vagas-search-input {
	display:flex; align-items:center; gap:10px;
	padding:0 13px; height:42px;
	background:rgba(255,255,255,0.15);
	border:1px solid rgba(255,255,255,0.25);
	border-radius:var(--r-md);
	-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.vagas-search-input .v019-i { color:rgba(255,255,255,.75); flex:0 0 auto; }
.vagas-search-input input {
	flex:1; border:0; background:transparent; outline:none;
	font-size:14px; color:rgba(255,255,255,.95); min-width:0;
}
.vagas-search-input input::placeholder { color:rgba(255,255,255,.50); }
.vagas-filter-btn, .vagas-search-btn {
	height:42px; border:0; border-radius:var(--r-md);
	cursor:pointer; display:flex; align-items:center; justify-content:center;
	flex:0 0 42px;
}
.vagas-filter-btn {
	background:rgba(255,255,255,0.15);
	border:1px solid rgba(255,255,255,0.25);
	color:rgba(255,255,255,.85);
	-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.vagas-filter-btn.is-on { background:rgba(255,255,255,.30); color:#fff; }
.vagas-search-btn {
	background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(200,220,255,.85));
	color:var(--c-blue2);
	box-shadow:0 6px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.80);
}
.vagas-filter-btn .v019-i, .vagas-search-btn .v019-i { width:20px; height:20px; }
.vagas-filter-btn:hover { background:rgba(255,255,255,.22); }
.vagas-search-btn:hover { filter:brightness(1.06); }
.v019-city-filter {
	width:100%; margin-top:8px; height:40px; padding:0 12px;
	font-size:13px; color:var(--c-text);
	background:#fff; border:1px solid var(--c-line); border-radius:12px;
	outline:none;
}
.v019-city-filter[hidden] { display:none; }
.v019-count { margin:6px 2px 0; font-size:12px; font-weight:600; color:rgba(255,255,255,.70); min-height:14px; }

/* ─── CONTEÚDO ───────────────────────────────────────────────────────── */
.vagas-content {
	padding:16px 14px 0; /* zero no bottom — o fade-out cuida da transição */
	margin:0 auto;
	display:flex; flex-direction:column; gap:18px;
}
/* Fade-out suave na base do conteúdo → funde com a bridge inferior */
.vagas-content::after {
	content: "";
	display: block;
	height: 60px;
	background: linear-gradient(to bottom,
		transparent 0%,
		rgba(8,29,90,.06) 40%,
		rgba(8,29,90,.14) 100%
	);
	margin-top: 18px;
	pointer-events: none;
}

/* Seções */
.vagas-section {
	background:#fff;
	border:1px solid var(--c-line);
	border-radius:var(--r-lg);
	box-shadow:var(--sh-sm);
	padding:16px 16px 18px;
}
.vagas-sec-head { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
/* ─── MELHORIA 3: ícone de seção (estrela dourada na seção destaque) ─ */
.vagas-sec-icon {
	width:38px; height:38px; flex:0 0 auto;
	display:flex; align-items:center; justify-content:center;
	color:var(--c-blue); background:rgba(8,103,242,0.08);
	border:1px solid var(--c-line); border-radius:12px;
	transition: transform .18s ease, box-shadow .18s ease;
}
/* Estrela da seção "Vagas em destaque" → dourada preenchida */
.vagas-section[aria-label="Vagas em destaque"] .vagas-sec-icon {
	color:#C7922B;
	background: rgba(199,146,43,.12);
	border-color: rgba(199,146,43,.35);
	box-shadow: 0 4px 14px rgba(199,146,43,.20);
}
.vagas-section[aria-label="Vagas em destaque"] .vagas-sec-icon .v019-i {
	fill: #C7922B;
}
.vagas-sec-title { margin:0; font-size:16px; font-weight:800; color:var(--c-text); }
.vagas-sec-sub   { margin:2px 0 0; font-size:12px; color:var(--c-muted); font-weight:500; }
.vagas-sec-link  {
	margin-left:auto; display:inline-flex; align-items:center; gap:2px;
	font-size:13px; font-weight:700; color:var(--c-blue); text-decoration:none; white-space:nowrap;
}
.vagas-sec-link .v019-i { width:14px; height:14px; }
.v019-empty { padding:22px; text-align:center; color:var(--c-muted); }

/* ─── CARROSSEL DESTAQUE ─────────────────────────────────────────────── */
.v019-carousel {
	display:flex; gap:14px; overflow-x:auto; padding:2px 2px 8px;
	scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.v019-carousel::-webkit-scrollbar { display:none; }
/* ─── MELHORIA 1: cards mais altos e com hover aprimorado ─ */
.v019-fcard {
	position:relative; flex:0 0 230px; scroll-snap-align:start;
	border-radius:20px; overflow:hidden; text-decoration:none;
	box-shadow:0 12px 32px rgba(8,35,90,.20);
	transition:transform .18s ease, box-shadow .18s ease;
	display:flex; flex-direction:column; min-height:200px;
	background:var(--c-navy);
}
.v019-fcard:hover { transform:translateY(-5px) scale(1.015); box-shadow:0 22px 50px rgba(8,35,90,.32); }
.v019-fcard:active { transform:scale(.97); }
.v019-fcard-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-color:var(--c-navy); }
.v019-fcard-bg--ph { background:linear-gradient(135deg,#0B1D3A,#135DEB); }
.v019-fcard-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(6,26,64,.90) 0%,rgba(6,26,64,.40) 55%,transparent 82%); }
.v019-fcard-body { position:relative; z-index:2; margin-top:auto; padding:10px 12px 13px; display:flex; flex-direction:column; gap:6px; }
.v019-fcard-title { font-size:13.5px; font-weight:800; color:#fff; line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.v019-fcard-cta { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); border-radius:9px; padding:5px 10px; width:fit-content; }
.v019-fcard-cta .v019-i { width:13px; height:13px; }
.v019-dots { display:flex; gap:6px; justify-content:center; margin-top:10px; }
.v019-dot { width:6px; height:6px; border-radius:50%; background:rgba(8,103,242,.22); transition:width .2s,background .2s; }
.v019-dot.is-on { width:18px; background:var(--c-blue); border-radius:99px; }

/* ─── CIDADES (acordeão) ─────────────────────────────────────────────── */
.v019-city-list { display:flex; flex-direction:column; }
.v019-city { border-top:1px solid var(--c-line); }
.v019-city:first-child { border-top:0; }
.v019-city-row { display:flex; align-items:center; gap:12px; padding:12px 4px; cursor:pointer; }
.v019-city-row:hover { background:rgba(8,103,242,.04); border-radius:12px; }
.v019-city-ic { width:34px; height:34px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:var(--c-blue); background:rgba(8,103,242,.08); border:1px solid var(--c-line); border-radius:10px; }
.v019-city-info { flex:1 1 auto; min-width:0; }
.v019-city-name { display:block; font-size:15px; font-weight:700; color:var(--c-text); }
.v019-city-sub  { font-size:12px; color:var(--c-muted); }
.v019-city-badge,.c019vs-novo { font-size:10px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,#1473FF,var(--c-blue2)); border-radius:7px; padding:3px 7px; white-space:nowrap; }
.v019-city-arrow { color:var(--c-blue); display:flex; transition:transform .18s; }
.v019-city[open] > .v019-city-row .v019-city-arrow { transform:rotate(90deg); }
.v019-city.is-hidden,.c019vs-job.is-hidden { display:none; }
.v019-city-body { padding:2px 0 10px; display:flex; flex-direction:column; gap:7px; }

/* ─── MELHORIA 6: vaga hover mais expressivo ─ */
.c019vs-job {
	background:#f8fbff; border:1px solid var(--c-line); border-radius:13px; overflow:hidden;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.c019vs-job:hover { transform:translateX(3px); border-color:rgba(8,103,242,.28); }
.c019vs-job[open] { box-shadow:var(--sh-sm); border-color:rgba(8,103,242,.22); }
.c019vs-job-sum { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; }
.c019vs-job-sum:hover { background:rgba(8,103,242,.05); }
.c019vs-job-info { flex:1 1 auto; min-width:0; }
.c019vs-job-title { font-size:14px; font-weight:700; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c019vs-job-sub  { font-size:11.5px; color:var(--c-muted); }
.c019vs-job-meta { display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.c019vs-tag { font-size:11px; font-weight:700; color:var(--c-blue); background:rgba(8,103,242,.09); border:1px solid var(--c-line); border-radius:8px; padding:4px 9px; }
/* Quando aberto: "Ver vaga" vira "↑" indicando que clica para recolher */
.c019vs-job[open] .c019vs-tag {
	background:var(--c-blue); color:#fff;
	font-size: 0; /* esconde o texto "Ver vaga" */
	padding: 4px 10px;
}
.c019vs-job[open] .c019vs-tag::after {
	content: "↑"; /* seta para cima */
	font-size: 14px;
	font-weight: 900;
	display: inline-block;
}
.c019vs-chev { display:none; }

/* ─── CARD COMPLETO ──────────────────────────────────────────────────── */
.c019vs-card { border-top:1px solid var(--c-line); background:#f3f8ff; padding:13px; }
.c019vs-skel { color:var(--c-muted); font-size:13px; }
.c019vs-card-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; margin-bottom:9px; }
.c019vs-card-title { margin:0; font-size:15px; font-weight:800; color:var(--c-text); }
.c019vs-card-code  { font-size:11px; font-weight:700; color:var(--c-muted); }
.c019vs-chips { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 8px; }
/* Chips 30% menores: 11px → 7.5px, padding reduzido */
.c019vs-chip { font-size:7.5px; font-weight:600; color:var(--c-blue2); background:rgba(8,103,242,.07); border:1px solid var(--c-line); border-radius:999px; padding:2px 7px; }
.c019vs-chip b { font-weight:800; color:var(--c-text); }
.c019vs-block { margin:10px 0; }
.c019vs-block h4 { margin:0 0 3px; font-size:11px; font-weight:800; color:var(--c-blue); text-transform:uppercase; letter-spacing:.5px; }
.c019vs-block p  { margin:0; font-size:13.5px; line-height:1.55; color:#36425c; white-space:pre-line; overflow-wrap:anywhere; }

/* ─── AÇÕES ──────────────────────────────────────────────────────────── */
.c019vs-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.c019vs-act { display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:1 1 40%; padding:10px 11px; font-size:12.5px; font-weight:700; border-radius:11px; text-decoration:none; cursor:pointer; border:0; }
.c019vs-act svg { width:16px; height:16px; }
.c019vs-act--wa   { background:#25d366; color:#fff; }
.c019vs-act--mail { background:linear-gradient(135deg,#1473FF,var(--c-blue2)); color:#fff; }
.c019vs-act--copy { background:#fff; color:var(--c-text); border:1px solid var(--c-line); }
.c019vs-act--copy.is-done { background:#16a34a; color:#fff; }
/* "Ver no Vagas019" — presente em todas as vagas, destaque sutil */
.c019vs-act--src {
	background: rgba(8,103,242,.08);
	color: var(--c-blue);
	border: 1px solid rgba(8,103,242,.25);
	font-size: 12px;
}
.c019vs-act--src:hover { background: var(--c-blue); color: #fff; }
.c019vs-act--src svg { width:14px; height:14px; }
/* Linha de compartilhar */
.c019vs-share {
	display:flex; gap:8px; flex:1 1 100%; flex-wrap:wrap;
	align-items:center; margin-top:10px; padding-top:10px;
	border-top:1px solid rgba(8,103,242,.14);
}
/* Label "Compartilhar:" */
.c019vs-share::before {
	content: "Compartilhar:";
	font-size:10.5px; font-weight:700; color:#647089;
	text-transform:uppercase; letter-spacing:.4px;
	flex:0 0 100%; margin-bottom:4px;
}
/* Cada botão de compartilhar */
.c019vs-sh {
	width:38px; height:38px; border-radius:10px; cursor:pointer;
	display:inline-flex; align-items:center; justify-content:center;
	background: #f0f5ff;
	border: 1.5px solid rgba(8,103,242,.25);
	transition: background .15s, border-color .15s, transform .15s;
	flex-shrink:0;
}
/* SVG preserva o inline style — CSS não sobrescreve mais */
.c019vs-sh svg { width:18px; height:18px; display:block; overflow:visible; }
/* Hover elegante */
.c019vs-sh:hover { background:#0866F2; border-color:#0866F2; transform:scale(1.08); }
.c019vs-sh:hover svg path,
.c019vs-sh:hover svg polyline,
.c019vs-sh:hover svg line,
.c019vs-sh:hover svg circle { fill:#fff!important; stroke:#fff!important; }

/* ─── TRUST BAR — vidro suave aprimorado ─ */
.vagas-trust-bar {
	display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
	background: rgba(255,255,255,0.68);
	-webkit-backdrop-filter: blur(22px) saturate(1.6) brightness(1.06);
	backdrop-filter: blur(22px) saturate(1.6) brightness(1.06);
	border: 1px solid rgba(255,255,255,.88);
	border-radius:var(--r-md); padding:18px 20px;
	box-shadow:
		0 12px 36px rgba(8,35,90,.10),
		inset 0 1px 0 rgba(255,255,255,.96),
		inset 0 -1px 0 rgba(8,103,242,.06);
}
.vagas-trust-item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; color:var(--c-blue); }
.vagas-trust-item .v019-i { width:20px; height:20px; }
.vagas-trust-item strong { font-size:11px; font-weight:800; color:var(--c-text); }
.vagas-trust-item span   { font-size:10px; color:var(--c-muted); line-height:1.3; }

/* ─── CTA FINAL — envolvimento suave, sem linha rígida ──────────────── */
.vagas-cta-bar {
	position: relative; overflow: hidden;
	/* Fade gradual — começa transparente, funde com o fundo da página */
	background: linear-gradient(180deg,
		rgba(8,29,90,0)    0%,
		rgba(8,29,90,.55)  18%,
		var(--c-navy)      42%,
		#0D3275            100%
	);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-md);
}
/* Arco suave no topo do CTA — elimina linha reta de entrada */
.vagas-cta-bar::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 52px;
	background: var(--c-bg);
	border-radius: 0 0 55% 55% / 0 0 38px 38px;
	opacity: .22;
	pointer-events: none;
	z-index: 0;
}
.vagas-cta-inner { padding:28px 20px 22px; text-align:center; position:relative; z-index:1; }
.vagas-cta-inner p { margin:0 0 12px; font-size:16px; font-weight:700; color:#fff; }
.vagas-cta-btns { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

/* Botão "Não encontrou a vaga que gostaria?" */
.vagas-not-found-btn {
	display: inline-block;
	margin: 0 auto 18px;
	padding: 13px 28px;
	font-size: 14px;
	font-weight: 800;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	border-radius: 999px;
	/* Gradiente azul royal suave */
	background: linear-gradient(135deg, #1a72ff 0%, #0550d4 55%, #0340aa 100%);
	box-shadow:
		0 8px 24px rgba(5, 80, 212, 0.45),
		inset 0 1px 0 rgba(255,255,255,0.25);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
	letter-spacing: .2px;
}
.vagas-not-found-btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: 0 12px 32px rgba(5, 80, 212, 0.55);
}
.vagas-not-found-btn:active { transform: scale(.97); }

/* Botões CTA */
.v019-trust-cta { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; text-decoration:none; border-radius:11px; padding:10px 16px; white-space:nowrap; transition:transform .15s,filter .15s; }
.v019-trust-cta .v019-i { width:14px; height:14px; }
.v019-trust-cta:active { transform:scale(.97); }
.v019-trust-cta--primary { background:#fff; color:var(--c-blue2); box-shadow:0 4px 14px rgba(0,0,0,.15); }
.v019-trust-cta--primary:hover { filter:brightness(.96); }
.v019-trust-cta--ghost { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28); }
.v019-trust-cta--ghost:hover { background:rgba(255,255,255,.20); }

/* ─── BRIDGE INFERIOR ────────────────────────────────────────────────
   Gradiente INVERSO: azul → navy → preto (casa com o rodapé do site).
   ─────────────────────────────────────────────────────────────────── */
.vagas-footer-bridge {
	position: relative;
	width: 100%;
	/* Emana de baixo para cima: começa em transparente → azul → escuro */
	background: linear-gradient(180deg,
		rgba(15,75,170,0)   0%,   /* transparente — sem linha de divisão */
		rgba(15,75,170,.30) 6%,
		rgba(27,94,232,.72) 16%,
		#1B5EE8             26%,
		#0F4BAA             44%,
		#083580             62%,
		#041D52             80%,
		#050915             100%
	);
	padding-top: 0;
	padding-bottom: 0;
	margin-top: -60px; /* sobe mais para fusão perfeita */
	margin-bottom: 0 !important;
	overflow: visible;
}
.vagas-footer-bridge::after { display: none; }

/* Onda da bridge inferior */
.vagas-wave--bottom {
	position: relative; top:0; bottom:auto;
	height: clamp(80px, 18vw, 150px);
	width:100%; z-index:2; pointer-events:none; line-height:0;
}
.vagas-wave--bottom svg { position:absolute; top:0; bottom:auto; left:0; width:100%; height:100%; }
.vagas-footer-bridge[style] { background-size:cover; background-position:center; }

/* ─── TOAST ──────────────────────────────────────────────────────────── */
.c019vs-toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:var(--c-navy); color:#fff; padding:11px 20px; border-radius:11px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:99999; }
.c019vs-toast.is-show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ─── MOBILE ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.vagas-bridge { padding-bottom: 100px; }
	.vagas-hero-wrap { margin-top: -75px; padding:0 10px; }
	.vagas-hero-card { padding:10px 12px 12px; border-radius:24px; }
	.vagas-title { font-size:clamp(18px,6vw,28px); }
	.vagas-search-row { grid-template-columns:1fr 40px 40px; gap:8px; }
	.vagas-search-input { height:40px; }
	.vagas-filter-btn,.vagas-search-btn { height:40px; flex:0 0 40px; }
	.vagas-content { padding:14px 10px 28px; }
	.vagas-trust-bar { grid-template-columns:repeat(2,1fr); gap:8px; padding:12px; }
	.v019-fcard { flex-basis:185px; }
}

/* ─── DESKTOP ─────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
	.vagas-bridge { padding-bottom: 160px; }
	.vagas-hero-wrap { margin-top:-120px; padding:0 20px; }
	.vagas-hero-card { padding:12px 22px 14px; }
	.vagas-content { padding:20px 24px 44px; }
	.v019-fcard { flex-basis:230px; }
	.vagas-search-row { grid-template-columns:1fr 44px 44px; gap:12px; }
}
@media (min-width: 1100px) {
	.vagas-content { padding:24px 40px 52px; }
}

/* ─── INTERAÇÕES ─────────────────────────────────────────────────────── */
.v019-fcard,.vagas-search-btn,.vagas-filter-btn,.v019-trust-cta,.v019-city-row,.c019vs-act,.c019vs-sh { transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.vagas-search-btn:active,.vagas-filter-btn:active,.c019vs-act:active { transform:scale(.97); }

/* ─── MELHORIA 2: chips de cidade horizontais ─ */
.v019-city-chips {
	display: flex; gap: 8px; overflow-x: auto;
	padding: 2px 0 12px; margin-bottom: 4px;
	scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.v019-city-chips::-webkit-scrollbar { display: none; }
.v019-city-chip {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 7px 14px; border-radius: 999px; border: 1.5px solid rgba(8,103,242,.22);
	background: #f0f5ff; color: var(--c-blue);
	font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
	scroll-snap-align: start;
	transition: all .15s ease;
}
.v019-city-chip .v019-i { width:14px; height:14px; }
.v019-city-chip-n {
	font-size: 11px; font-weight: 800; color: #fff;
	background: rgba(8,103,242,.70); border-radius: 999px;
	padding: 1px 6px; margin-left: 2px;
}
.v019-city-chip:hover { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.v019-city-chip:hover .v019-city-chip-n { background: rgba(255,255,255,.30); }
.v019-city-chip.is-active { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.v019-city-chip.is-active .v019-city-chip-n { background: rgba(255,255,255,.35); }

/* ═══════════════════════════════════════════════════════════════════════
   MELHORIAS DE DESIGN v3.6.1 — 10 refinamentos visuais
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. @VAGAS019 — gradiente branco → ciano premium */
.vagas-title {
	background: linear-gradient(135deg, #ffffff 0%, #e0f0ff 50%, #b8dcff 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	color: transparent !important;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,.28));
}

/* 2. Borda esquerda colorida em cada vaga — ritmo visual */
.c019vs-job {
	border-left: 3px solid rgba(8,103,242,.30) !important;
	transition: border-left-color .18s ease !important;
}
.c019vs-job:hover, .c019vs-job[open] {
	border-left-color: var(--c-blue) !important;
}

/* 3. Overlay do carrossel — gradiente lateral mais cinematográfico */
.v019-fcard-overlay {
	background: linear-gradient(
		135deg,
		rgba(4,20,64,.72) 0%,
		rgba(6,26,64,.20) 50%,
		transparent 70%
	),
	linear-gradient(
		to top,
		rgba(4,16,54,.94) 0%,
		rgba(6,26,64,.55) 45%,
		transparent 80%
	) !important;
}

/* 4. Chip de cidade ativo — gradiente + sombra elevada */
.v019-city-chip.is-active {
	background: linear-gradient(135deg, #1473FF, #0040CC) !important;
	border-color: #0040CC !important;
	box-shadow: 0 4px 14px rgba(8,103,242,.42), inset 0 1px 0 rgba(255,255,255,.18) !important;
	transform: translateY(-1px);
}

/* 5. Trust bar — ícones em dourado âmbar da marca */
.vagas-trust-item { color: #C7922B !important; }
.vagas-trust-item .v019-i { color: #C7922B !important; stroke: #C7922B !important; }
.vagas-trust-item strong { color: var(--c-text) !important; }

/* 6. CTA final — textura de pontos sutil */
.vagas-cta-bar {
	background:
		radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px),
		linear-gradient(135deg, var(--c-navy), #0D3275) !important;
	background-size: 20px 20px, 100% 100% !important;
}

/* 7. Botão "Não encontrou?" — animação de brilho shine */
@keyframes c019shine {
	0%   { background-position: -200% center; }
	100% { background-position: 200% center; }
}
.vagas-not-found-btn {
	background:
		linear-gradient(
			110deg,
			#1a72ff 0%,
			#1a72ff 35%,
			rgba(255,255,255,.28) 50%,
			#1a72ff 65%,
			#0340aa 100%
		) !important;
	background-size: 200% auto !important;
	animation: c019shine 4s linear infinite !important;
}

/* 8. Seção "Explore por cidade" — divisória dourada */
#v019-cidades {
	border-top: 2px solid rgba(199,146,43,.28) !important;
}

/* 9. Pill de status — pulsação "ao vivo" no ícone */
@keyframes c019pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: .65; transform: scale(.88); }
}
.vagas-pills .vagas-pill:first-child .v019-i {
	animation: c019pulse 2s ease-in-out infinite;
}

/* 10. Fundo da página — textura granulada leve (noise SVG inline) */
.vagas-page::before {
	content: "";
	position: fixed; inset: 0; z-index: 0;
	pointer-events: none;
	opacity: .028;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 128px 128px;
}
.vagas-page { position: relative; }
.vagas-shell, .vagas-bridge, .vagas-footer-bridge,
.vagas-hero-wrap, .vagas-content { position: relative; z-index: 1; }

/* ─── REDUZIR MOVIMENTO ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.vagas-page * { animation:none !important; transition:none !important; }
}
.vagas-page :focus-visible { outline:3px solid var(--c-blue); outline-offset:2px; border-radius:8px; }

/* ═══════════════════════════════════════════════════════════════════════
   v3.7.0 — CORREÇÕES MOBILE DA PÁGINA DE VAGAS (escopadas em /vagas/)
   Tudo abaixo só vale quando o plugin está presente: body:has(.vagas-page)
   + fallback .v019-active (classe que o JS adiciona ao <body>).
   Não afeta nenhuma outra página do site.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1+2. CABEÇALHO LIMPO: esconde a logo grande, encolhe o botão ☰ ──── */
/* Esconde a imagem da logo do tema só aqui — o wordmark de texto entra via JS */
body:has(.vagas-page) #masthead .custom-logo-link,
body:has(.vagas-page) #masthead img.custom-logo,
body:has(.vagas-page) #masthead .site-logo-img,
body:has(.vagas-page) #masthead .ast-site-identity .site-branding-img,
.v019-active #masthead .custom-logo-link,
.v019-active #masthead img.custom-logo,
.v019-active #masthead .site-logo-img { display:none !important; }

/* Compacta a altura do cabeçalho */
body:has(.vagas-page) #masthead .ast-primary-header-bar .site-header-section,
body:has(.vagas-page) #masthead .main-header-bar,
.v019-active #masthead .main-header-bar { min-height:0 !important; }
body:has(.vagas-page) #masthead .ast-primary-header-bar,
.v019-active #masthead .ast-primary-header-bar { padding-top:6px !important; padding-bottom:6px !important; }

/* Wordmark de texto injetado pelo JS (.c019vs-wordmark) */
.c019vs-wordmark {
	display:flex !important; flex-direction:column; justify-content:center;
	line-height:1.05; text-decoration:none; gap:1px;
	font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,sans-serif;
}
.c019vs-wordmark strong {
	font-size:clamp(17px,4.6vw,22px); font-weight:900; letter-spacing:-.3px;
	color:#ffffff; text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.c019vs-wordmark span {
	font-size:clamp(10px,2.6vw,12px); font-weight:600; letter-spacing:.2px;
	color:rgba(255,255,255,.82);
}

/* Botão ☰ menor (52px) e arredondado, alinhado à direita, vidro */
body:has(.vagas-page) .menu-toggle,
body:has(.vagas-page) .ast-mobile-menu-buttons .menu-toggle,
body:has(.vagas-page) .main-header-menu-toggle,
.v019-active .menu-toggle,
.v019-active .ast-mobile-menu-buttons .menu-toggle {
	width:52px !important; height:52px !important; min-height:0 !important;
	padding:0 !important; border-radius:16px !important;
	display:inline-flex !important; align-items:center; justify-content:center;
	background:rgba(255,255,255,.12) !important;
	border:1px solid rgba(255,255,255,.22) !important;
	-webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
	box-shadow:0 4px 14px rgba(0,0,0,.18) !important;
}
body:has(.vagas-page) .menu-toggle .ast-icon,
body:has(.vagas-page) .menu-toggle svg,
.v019-active .menu-toggle .ast-icon,
.v019-active .menu-toggle svg { color:#fff !important; fill:#fff !important; font-size:20px !important; width:22px !important; height:22px !important; }

/* ─── 3. MENU ABERTO: lista compacta estilo iOS ──────────────────────── */
body:has(.vagas-page) .ast-mobile-popup-drawer .menu-item > .menu-link,
body:has(.vagas-page) .ast-mobile-popup-drawer .menu-item > a,
body:has(.vagas-page) #ast-hf-mobile-menu .menu-item > a,
body:has(.vagas-page) .ast-mobile-popup-content .menu-item > a,
.v019-active .ast-mobile-popup-drawer .menu-item > a,
.v019-active #ast-hf-mobile-menu .menu-item > a {
	min-height:44px !important;
	display:flex !important; align-items:center; gap:10px;
	padding:12px 16px !important;
	font-size:16px !important; font-weight:600;
	border-radius:12px;
	box-shadow:none !important;
	border-bottom:1px solid rgba(0,0,0,.06) !important;
}
/* tira sombras/cards exagerados dos itens */
body:has(.vagas-page) .ast-mobile-popup-drawer .menu-item,
.v019-active .ast-mobile-popup-drawer .menu-item { box-shadow:none !important; background:transparent !important; }

/* ─── 4+6. CAIXA DE BUSCA PREMIUM + ANTI-ZOOM iOS ────────────────────── */
/* font-size >=16px no input evita o zoom automático do iOS ao focar
   (era 14px → causava o "cursor desalinhado"/salto de layout). */
.vagas-search-input { height:50px; padding:0 15px; border-radius:18px; }
.vagas-search-input input { font-size:16px; }
.vagas-search-input:focus-within {
	border-color:rgba(255,255,255,.55);
	box-shadow:0 0 0 3px rgba(255,255,255,.18);
}

/* ─── 5+7. CONFLITO/ESPAÇO ENTRE BOTÕES: lupa, filtro e busca ─────────── */
.vagas-search-row { grid-template-columns:1fr 50px 50px; gap:10px; column-gap:12px; }
.vagas-filter-btn, .vagas-search-btn { height:50px; flex:0 0 50px; border-radius:16px; }

/* ─── 8. ESPAÇAMENTOS GERAIS ─────────────────────────────────────────── */
.vagas-pills { margin-bottom:12px; }
.vagas-hero-card { padding:14px 16px 16px; }

/* ─── 9. CONTADOR: nunca exibir contagem ao público (regra do projeto) ── */
.v019-count { display:none !important; }

/* ─── 10. RESPONSIVO iPhone (SE/12/13/14/15/16) ──────────────────────── */
@media (max-width: 430px) {
	.vagas-search-row { grid-template-columns:1fr 48px 48px; gap:8px; column-gap:10px; }
	.vagas-search-input { height:48px; }
	.vagas-filter-btn, .vagas-search-btn { height:48px; flex:0 0 48px; }
	.vagas-search-input input { font-size:16px; }   /* mantém anti-zoom no iOS */
	.c019vs-wordmark strong { font-size:18px; }
	body:has(.vagas-page) .menu-toggle,
	.v019-active .menu-toggle { width:48px !important; height:48px !important; }
}
/* iPhone SE / telas estreitas: nada cortado, sem overflow lateral */
@media (max-width: 360px) {
	.vagas-hero-wrap { padding:0 8px; }
	.vagas-search-row { grid-template-columns:1fr 44px 44px; gap:7px; }
	.vagas-filter-btn, .vagas-search-btn { height:44px; flex:0 0 44px; }
}