/* ============================================================================
   carreiras.css — vagas.alpino.com.br

   A vitrine é pública e anônima: tom mais claro e arejado que o portal de
   admissão, mas com a mesma marca (azul Alpino, mesmos raios, mesmas pills).
   Reaproveita alpino-ui.css e alpino-patterns.css; aqui só o que é da vitrine.
   ========================================================================== */

/* --- Cabeçalho de sub-seção ----------------------------------------------
   O core do Alpino só estiliza `.section-title` dentro de `.glass-card` e não
   estiliza `.ti-ico` — soltos, o ícone cai numa linha acima do título. */
.section-title{ display:flex; align-items:center; gap:9px; margin-bottom:10px;
  min-width:0; }
.section-title .t{ font-weight:700; font-size:.95rem; line-height:1.2; }
.section-title .s{ font-size:.74rem; color:var(--bs-secondary-color); line-height:1.35; }

.ti-ico{ width:34px; height:34px; border-radius:10px; display:grid;
  place-items:center; flex:0 0 34px;
  background:linear-gradient(135deg,rgba(9,92,244,.16),rgba(9,92,244,.06));
  color:#095cf4; }
.ti-ico.tone-green { background:linear-gradient(135deg,rgba(34,197,94,.2),rgba(34,197,94,.06));   color:#15803d; }
.ti-ico.tone-amber { background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(245,158,11,.07)); color:#b45309; }
.ti-ico.tone-red   { background:linear-gradient(135deg,rgba(239,68,68,.22),rgba(239,68,68,.07));   color:#b91c1c; }
.ti-ico.tone-cyan  { background:linear-gradient(135deg,rgba(14,165,233,.22),rgba(14,165,233,.07)); color:#0369a1; }
.ti-ico.tone-purple{ background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(168,85,247,.07)); color:#6b21a8; }
body.dark-mode .ti-ico{ color:#7aa8ff; }
body.dark-mode .ti-ico.tone-green { color:#4ade80; }
body.dark-mode .ti-ico.tone-amber { color:#fbbf24; }
body.dark-mode .ti-ico.tone-red   { color:#f87171; }
body.dark-mode .ti-ico.tone-cyan  { color:#38bdf8; }
body.dark-mode .ti-ico.tone-purple{ color:#c084fc; }

/* --- Casca ---------------------------------------------------------------- */
.vg-topo{ position:sticky; top:0; z-index:30; background:#fff;
  border-bottom:1px solid rgba(15,23,42,.08); }
body.dark-mode .vg-topo{ background:var(--ti-dark-2,#1f2430);
  border-bottom-color:rgba(255,255,255,.10); }
.vg-topo-in{ max-width:1160px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:16px; min-width:0; }
.vg-marca{ display:flex; align-items:center; gap:10px; text-decoration:none;
  color:inherit; flex:0 0 auto; }
.vg-marca img{ height:30px; }
.vg-nav{ display:flex; align-items:center; gap:4px; margin-left:auto;
  min-width:0; }
.vg-nav a{ text-decoration:none; color:var(--bs-secondary-color); font-size:.86rem;
  font-weight:600; padding:8px 12px; border-radius:9px; white-space:nowrap; }
.vg-nav a:hover{ color:var(--bs-body-color); background:rgba(15,23,42,.04); }
body.dark-mode .vg-nav a:hover{ background:rgba(255,255,255,.07); }
.vg-nav a.is-ativo{ color:#095cf4; }
@media (max-width:575.98px){
  .vg-nav a{ padding:8px; font-size:.8rem; }
  .vg-nav a .rot{ display:none; }
}

.vg-corpo{ max-width:1160px; margin:0 auto; padding:18px 16px 48px; }
.vg-corpo.estreito{ max-width:820px; }

/* --- Hero com foto -------------------------------------------------------- */
.vg-hero{ position:relative; min-height:230px; display:flex; align-items:center;
  background:linear-gradient(112deg,#0b3e9e 0%,#091430 55%,#05070e 100%);
  background-size:cover; background-position:center; overflow:hidden; }
.vg-hero::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(4,8,20,.72), rgba(4,8,20,.30)); }
.vg-hero-in{ position:relative; z-index:1; max-width:1160px; margin:0 auto;
  padding:34px 16px; width:100%; }
.vg-hero .frase{ display:inline-block; color:#fff; font-weight:800;
  font-size:clamp(1.15rem, 3.4vw, 1.9rem); line-height:1.25;
  background:rgba(8,14,30,.55); padding:10px 16px; border-radius:12px;
  backdrop-filter:blur(3px); max-width:100%; }
@media (max-width:575.98px){ .vg-hero{ min-height:170px; } }

/* --- Caixa de busca (sobrepõe o hero) ------------------------------------- */
.vg-busca{ max-width:1160px; margin:-34px auto 26px; padding:0 16px;
  position:relative; z-index:2; }
.vg-busca-card{ background:#fff; border-radius:16px; padding:16px;
  border:1px solid rgba(15,23,42,.08); box-shadow:0 16px 34px rgba(3,10,40,.12);
  display:grid; gap:12px; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;
  align-items:end; }
body.dark-mode .vg-busca-card{ background:var(--ti-dark-2,#1f2430);
  border-color:rgba(255,255,255,.10); }
@media (max-width:767.98px){
  .vg-busca{ margin-top:-22px; }
  .vg-busca-card{ grid-template-columns:1fr; }
}
.vg-busca-card label{ font-size:.78rem; font-weight:700; margin-bottom:4px;
  display:block; }

/* --- Cartão de vaga ------------------------------------------------------- */
.vg-cards{ display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(min(300px,100%), 1fr)); }
.vg-card{ display:flex; flex-direction:column; gap:9px; min-width:0;
  background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:16px;
  padding:16px 18px; box-shadow:var(--ti-shadow);
  transition:transform .15s ease, box-shadow .15s ease; }
body.dark-mode .vg-card{ background:var(--ti-dark-2,#1f2430);
  border-color:rgba(255,255,255,.09); }
.vg-card:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(3,10,40,.14); }
.vg-card .tit{ font-weight:800; font-size:1rem; line-height:1.3;
  overflow-wrap:anywhere; }
.vg-card .loc{ font-size:.84rem; color:var(--bs-secondary-color);
  display:flex; align-items:center; gap:6px; min-width:0; }
.vg-card .quando{ font-size:.78rem; color:var(--bs-secondary-color); }
.vg-card .cta{ margin-top:auto; }

/* --- Detalhe da vaga ------------------------------------------------------ */
.vg-vaga-topo{ display:flex; align-items:flex-start; gap:12px; min-width:0;
  margin-bottom:14px; }
.vg-vaga-topo .tit{ font-weight:800; font-size:clamp(1.1rem,2.6vw,1.45rem);
  line-height:1.25; overflow-wrap:anywhere; }
.vg-vaga-topo .sub{ font-size:.84rem; color:var(--bs-secondary-color); }
.vg-fatos{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:12px; }
.vg-fato{ display:flex; align-items:center; gap:7px; font-size:.86rem;
  min-width:0; }
.vg-fato i{ color:#095cf4; font-size:1rem; }
body.dark-mode .vg-fato i{ color:#7aa8ff; }
.vg-descricao{ font-size:.92rem; line-height:1.75; white-space:pre-wrap;
  overflow-wrap:anywhere; }
.vg-lista{ margin:0; padding-left:1.15rem; font-size:.9rem; line-height:1.9; }

/* Barra fixa de candidatura */
.vg-barra{ position:sticky; bottom:0; z-index:20; margin:22px -16px -48px;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid rgba(15,23,42,.10);
  box-shadow:0 -8px 24px rgba(3,10,40,.08);
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  justify-content:center; }
body.dark-mode .vg-barra{ background:var(--ti-dark-2,#1f2430);
  border-top-color:rgba(255,255,255,.12); }
.vg-barra .btn-alpino-cta{ min-width:min(320px,100%); justify-content:center;
  display:inline-flex; align-items:center; gap:8px; }

/* Compartilhar */
.vg-share{ display:flex; gap:6px; flex-wrap:wrap; }
/* O "copiar link" é <button> e o resto é <a> — os dois precisam do mesmo
   tratamento, senão o botão sai como um quadrado preto sem ícone. */
.vg-share a, .vg-share button{ width:30px; height:30px; border-radius:7px;
  display:grid; place-items:center; color:#fff; text-decoration:none;
  font-size:.82rem; border:0; padding:0; line-height:1; cursor:pointer; }
.vg-share .s-fb{ background:#1877f2; }
.vg-share .s-wa{ background:#25d366; }
.vg-share .s-tg{ background:#2aabee; }
.vg-share .s-x { background:#000; }
.vg-share .s-in{ background:#0a66c2; }
.vg-share .s-ml{ background:#64748b; }

/* --- Currículo: barra de progresso e blocos ------------------------------- */
.vg-prog{ height:9px; border-radius:99px; background:rgba(15,23,42,.10);
  overflow:hidden; }
body.dark-mode .vg-prog{ background:rgba(255,255,255,.14); }
.vg-prog span{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#22c55e,#15803d); transition:width .35s ease; }
.vg-check{ display:flex; align-items:center; gap:7px; font-size:.82rem;
  padding:3px 0; }
.vg-check i{ font-size:.95rem; }
.vg-check.is-ok{ color:#15803d; }
body.dark-mode .vg-check.is-ok{ color:#4ade80; }
.vg-check.is-falta{ color:var(--bs-secondary-color); }

.vg-item{ display:flex; align-items:flex-start; gap:10px; min-width:0;
  padding:11px 13px; border-radius:12px; border:1px solid rgba(15,23,42,.08);
  background:rgba(15,23,42,.02); }
body.dark-mode .vg-item{ border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.04); }
.vg-item .nm{ font-weight:700; font-size:.88rem; overflow-wrap:anywhere; }
.vg-item .sub{ font-size:.78rem; color:var(--bs-secondary-color);
  overflow-wrap:anywhere; }
.vg-item .desc{ font-size:.8rem; line-height:1.55; margin-top:5px;
  white-space:pre-wrap; overflow-wrap:anywhere; }

/* --- Rodapé --------------------------------------------------------------- */
.vg-rodape{ border-top:1px solid rgba(15,23,42,.08); margin-top:36px;
  background:rgba(15,23,42,.02); }
body.dark-mode .vg-rodape{ border-top-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.03); }
.vg-rodape-in{ max-width:1160px; margin:0 auto; padding:22px 16px;
  font-size:.8rem; color:var(--bs-secondary-color); line-height:1.7; }
.vg-rodape a{ color:inherit; }

/* --- Piso de acessibilidade e mobile -------------------------------------- */
@media (max-width:767.98px){
  body{ font-size:16px; }
  .form-control, .form-select{ font-size:16px; }
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid #095cf4; outline-offset:2px; border-radius:6px;
}
body.dark-mode :where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline-color:#7aa8ff;
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important;
    transition-duration:.001ms !important; }
}
/* Filho de flex é min-width:auto por padrão — um e-mail longo empurraria o
   irmão para fora do card no celular. */
.vg-card, .vg-item, .vg-fato, .vg-vaga-topo, .vg-topo-in{ min-width:0; }