:root {
    /* Altura do header fixo: sticky-header.js mede e sobrescreve em runtime; o valor aqui
       é o fallback sem JS (altura real do .site-header no breakpoint padrão). */
    --header-h: 85px;
    --bg:          #F7F5F0;
    --card-bg:     #FFFFFF;
    --text:        #1A1917;
    --text-2:      #55524B;
    --muted:       #8C887E;
    --border:      #E3DFD3;
    --accent:      #1F5C4C;
    --accent-bg:   rgba(31, 92, 76, .09);
    --accent-dark: #143F34;
    --success:     #2F7D5A;
    --amber:       #A6741A;
    --amber-bg:    rgba(166, 116, 26, .1);
    --rust:        #A5502C;
    --rust-bg:     rgba(165, 80, 44, .1);
    --orange:      #C2570C;
    --orange-bg:   rgba(194, 87, 12, .12);
    --sand:        #8C6A2F;
    --sand-bg:     rgba(140, 106, 47, .1);
    --olive:       #6B7231;
    --olive-bg:    rgba(107, 114, 49, .1);
    --clay:        #9C5A46;
    --clay-bg:     rgba(156, 90, 70, .1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
/* Painel de detalhe da vaga aberto em QUALQUER página (ver job-detail-pane.js): a página
   por baixo não rola — o scroll fica só no painel. Antes isso só valia no mobile. */
body.job-pane-open { overflow: hidden; }
/* Árabe: direction:rtl espelha automaticamente a ordem dos flex containers (header, cards,
   sidebar) e o alinhamento de texto — cobre a maior parte do layout sem reescrever cada
   regra. Bordas/paddings direcionais (divisores, ícones) não são espelhados aqui; ajuste
   fino de RTL fica pra uma passada dedicada se o idioma ganhar tração. */
html[dir="rtl"] { direction: rtl; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.6;
}
h1, h2, h3 { font-family: 'Open Sans', sans-serif; font-weight: 600; margin: 0 0 8px; color: var(--text); }
a { color: inherit; text-decoration: none; }
/* SVG local (ver icon-swap.js) troca o conteúdo assim que carrega; até lá fica invisível
   em vez de mostrar o texto cru ("search", "close"...) que aparecia com a webfont do
   Google — 2026-09-05, ícones lentos/piscando vindo do fonts.googleapis.com. */
.material-icons { font-size: 18px; vertical-align: middle; visibility: hidden; }
.material-icons.icon-ready { visibility: visible; }
.material-icons svg { display: block; width: 1em; height: 1em; }

.wrap { max-width: 1128px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 700px; }

/* ── Avatar (círculo de iniciais) ── */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; border-radius: 50%;
    background: var(--accent-bg); color: var(--accent-dark);
    font-family: 'Open Sans', sans-serif; font-weight: 600;
}
.avatar-sm { width: 40px; height: 40px; font-size: 15px; }
.avatar-lg { width: 72px; height: 72px; font-size: 26px; border: 3px solid var(--card-bg); }

/* ── Header (navbar estilo LinkedIn) ── */
/* Fixo de verdade (position: fixed), em TODAS as páginas. Antes era sticky, mas o
   overflow-x: hidden do <html>/<body> transforma o overflow-y em auto e o sticky parava
   de colar assim que a página rolava (ver o comentário em html, body abaixo) — o nav
   sumia no meio da busca de vagas. Com fixed o top nav fica sempre no topo; quem devolve
   o espaço do header no fluxo é o .site-header-spacer logo abaixo dele (gerado por
   public/js/sticky-header.js, que mede a altura real em qualquer viewport/idioma). */
.site-header {
    background: var(--card-bg); border-bottom: 1px solid var(--border);
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
/* Placeholder com a altura do header (--header-h, medida por sticky-header.js). Sem JS,
   cai no default do :root — que é a altura real do header no breakpoint padrão. */
.site-header-spacer { height: var(--header-h, 85px); }
@media (max-width: 900px) { .site-header-spacer { height: var(--header-h, 60px); } }
/* Âncoras internas (ex: #candidatar no detalhe da vaga) param abaixo do header fixo. */
html { scroll-padding-top: calc(var(--header-h, 85px) + 12px); }
.topbar-wrap { display: flex; align-items: center; gap: 16px; padding-top: 10px; padding-bottom: 10px; }

.menu-toggle {
    display: none; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: none; border-radius: 8px;
    background: transparent; color: var(--text-2); cursor: pointer; flex-shrink: 0;
}
.menu-toggle:hover { background: var(--accent-bg); color: var(--accent-dark); }
.menu-toggle .material-icons { font-size: 24px; }

.logo-group { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-badge {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 8px;
}
.logo-badge img { width: 100%; height: 100%; object-fit: contain; }
.site-name { font-family: 'Exo 2', sans-serif; font-style: italic; font-weight: 500; font-size: 22px; color: var(--accent-dark); letter-spacing: -.01em; }

.lang-switch { position: relative; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--border); }
.lang-switch-btn {
    display: flex; align-items: center; gap: 6px; background: transparent; border: none;
    cursor: pointer; padding: 6px 8px; border-radius: 8px; color: var(--text-2);
    font-family: 'Open Sans', sans-serif;
}
.lang-switch-btn:hover { background: var(--accent-bg); color: var(--accent-dark); }
.lang-switch-flag { font-size: 15px; line-height: 1; }
.lang-switch-code { font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.lang-switch-caret { font-size: 18px !important; color: var(--muted); transition: transform .15s ease; }
.lang-switch.open .lang-switch-caret { transform: rotate(180deg); }
.lang-switch-menu {
    display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
    list-style: none; margin: 0; padding: 6px; min-width: 180px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12); max-height: 340px; overflow-y: auto;
}
.lang-switch.open .lang-switch-menu { display: block; }
.lang-switch-menu li { margin: 0; }
.lang-switch-menu a {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
    font-size: 13.5px; font-weight: 500; color: var(--text-2);
}
.lang-switch-menu a:hover { background: var(--accent-bg); color: var(--accent-dark); }
.lang-switch-menu a.active { color: var(--accent-dark); background: var(--accent-bg); font-weight: 700; }
.lang-switch-menu .lang-switch-flag { font-size: 18px; }
.lang-switch-menu .lang-switch-name { font-size: 13.5px; }

.site-nav { display: flex; gap: 4px; margin-left: auto; }
.site-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 11.5px; font-weight: 500; color: var(--text-2);
    padding: 6px 16px; border-radius: 8px; border-bottom: 2px solid transparent;
}
.site-nav a .material-icons { font-size: 22px; }
.site-nav a .icon-bookmark { width: 22px; height: 22px; stroke-width: 1.4; }
.site-nav a:hover { color: var(--accent); background: var(--accent-bg); }
.nav-divider { display: inline-block; width: 1px; align-self: stretch; margin: 6px 4px; background: var(--border); }
.site-nav a.nav-signup-cta { color: var(--accent-dark); }
.site-nav a.nav-signup-cta .material-icons { color: var(--accent); }

/* Logout: no desktop vive fora do .site-nav, depois do seletor de idioma — o canto
   mais à direita possível do cabeçalho. No mobile some daqui e reaparece dentro do
   menu hamburger (.nav-logout-mobile), já que lá o .lang-switch não faz sentido como
   âncora de posição. */
.nav-logout-desktop {
    display: flex; align-items: center; gap: 6px; margin-left: 14px; padding: 7px 12px;
    border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.nav-logout-desktop .material-icons { font-size: 18px; }
.nav-logout-desktop:hover { background: var(--accent-bg); color: var(--accent-dark); }
/* Especificidade alta de propósito: .site-nav a (abaixo) também tem display:flex e
   vencia o display:none do .nav-logout-mobile, fazendo o botão do menu mobile aparecer
   duas vezes no desktop. */
.site-nav .nav-logout-mobile { display: none; }
.nav-profile-link { position: relative; }
.nav-badge-dot {
    position: absolute; top: -2px; right: 10px; background: var(--orange); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1; min-width: 15px; height: 15px;
    border-radius: 999px; display: flex; align-items: center; justify-content: center;
    padding: 0 3px; box-shadow: 0 0 0 2px var(--card-bg, #fff);
}

/* ── Dropdowns da navbar (Feed e Sobre) ── */
.nav-dd { position: relative; }
.site-nav .nav-dd-toggle {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 11.5px; font-weight: 500; color: var(--text-2);
    padding: 6px 16px; border-radius: 8px; border: none; background: transparent; cursor: pointer;
    font-family: 'Open Sans', sans-serif; text-decoration: none;
}
.site-nav .nav-dd-toggle .material-icons { font-size: 22px; }
.site-nav .nav-dd-toggle:hover { color: var(--accent); background: var(--accent-bg); }
.nav-dd .dd-caret { font-size: 14px !important; color: var(--muted); transition: transform .15s ease; }
.nav-dd.open .dd-caret { transform: rotate(180deg); }
.nav-dd-menu {
    display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    z-index: 30; min-width: 190px; padding: 6px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.nav-dd.open .nav-dd-menu { display: block; }
.site-nav .nav-dd-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px;
    font-size: 13.5px; font-weight: 500; color: var(--text-2); text-decoration: none;
}
.site-nav .nav-dd-menu a:hover { color: var(--accent-dark); background: var(--accent-bg); }
.site-nav .nav-dd-menu a .material-icons { font-size: 18px; color: var(--accent); }

.nav-overlay {
    position: fixed; inset: 0; background: rgba(15, 15, 12, .45);
    opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 40;
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }

.site-footer { padding-top: 40px; margin-top: 60px; border-top: 1px solid var(--border); }
.site-footer .muted { color: var(--muted); }

/* ── Filters card (busca + local + remoto + ordenar, coluna direita) ── */
.filters-card .field {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 2px; border-bottom: 2px solid var(--border);
    transition: border-color .15s;
}
.filters-card .field:focus-within { border-bottom-color: var(--accent); }
.filters-card .field .material-icons { color: var(--muted); font-size: 19px; flex-shrink: 0; }
.filters-card .field input, .filters-card .field select {
    border: none; outline: none; background: transparent; font-family: inherit;
    font-size: 14px; color: var(--text); width: 100%; padding: 0;
}
.filters-card { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 10px 0 4px; }
.filters-card .remote-multiselect { margin-bottom: 6px; }
.filters-card .chip-toggle span { padding: 6px 12px; font-size: 12.5px; }

/* ── Filters bar (continente/país/cidade/área/salário, dentro do acordeão "Abrir filtros") ── */
.filters-bar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
    padding: 4px 4px 16px;
}
.fb-field {
    display: flex; align-items: center; gap: 7px; box-sizing: border-box;
    background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
    padding: 8px 10px;
}
.fb-field .material-icons { color: var(--muted); font-size: 18px; flex-shrink: 0; }
.fb-field input, .fb-field select {
    border: none; outline: none; background: transparent; font-family: inherit;
    font-size: 13.5px; color: var(--text); width: 100%; padding: 0;
}
.fb-city { position: relative; }

/* Continente → país → cidade lado a lado (não empilhados) */
.fb-geo-stack { display: flex; gap: 8px; }

.fb-actions { display: flex; gap: 10px; flex-basis: 100%; }
.fb-actions .btn-match-profile { width: auto; flex: 0 0 auto; margin: 0; }

/* Desktop: todo campo/botão da barra tem a MESMA largura e altura (menos o de busca por
   texto, um pouco mais largo de propósito) — antes cada um tinha um tamanho diferente
   dependendo do conteúdo, ficava desalinhado. Isso só faz sentido com espaço horizontal
   de sobra; no mobile cada regra é sobrescrita abaixo para largura cheia/altura livre. */
@media (min-width: 641px) {
    .filters-bar > .fb-field { flex: 0 0 200px; width: 200px; height: 46px; }
    .filters-bar > .fb-field-wide { flex-basis: 260px; width: 260px; }
    .fb-geo-stack { flex: 0 0 auto; }
    .fb-geo-stack .fb-field, .fb-geo-stack .loc-multiselect { flex: 0 0 150px; width: 150px; height: 46px; min-width: 0; }
    /* Continente: nomes como "América do Sul" não cabem em 150px, ficavam cortados
       ("América d..."). Mais largo que país/cidade, que são palavras mais curtas. */
    .fb-geo-stack .fb-field { flex-basis: 190px; width: 190px; }
    /* Cidade: largura maior (acumula chips), mesma altura fixa dos campos vizinhos —
       chip e input ficam lado a lado numa linha só em vez de empilhar e crescer. */
    .fb-geo-stack .loc-multiselect:last-child { flex-basis: 190px; width: 190px; }
    .fb-actions { height: 46px; }
}

/* ── Multi-seleção de cidade (chips + autocomplete) ── */
.loc-multiselect {
    position: relative; display: flex; align-items: center; gap: 6px; flex: 1 1 220px;
    min-width: 200px; height: 46px; overflow: hidden; background: var(--bg);
    border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px;
}
.loc-chips { display: flex; flex-wrap: nowrap; gap: 6px; flex-shrink: 0; }
.loc-chip {
    display: inline-flex; align-items: center; gap: 4px; background: var(--accent-bg);
    color: var(--accent-dark); border-radius: 20px; padding: 4px 6px 4px 12px; font-size: 12.5px; font-weight: 600;
    white-space: nowrap; flex-shrink: 0;
}
.loc-chip button { background: none; border: none; color: inherit; cursor: pointer; padding: 2px; display: flex; }
.loc-chip button .material-icons { font-size: 15px; }
/* Botão-gatilho do dropdown de país/cidade — mesmo papel do <select> de continente,
   mas com dados dinâmicos (depende do continente/país já escolhido). Nunca é editável
   diretamente; a busca só existe DENTRO do painel, depois de abrir. */
.loc-trigger {
    display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0;
    background: none; border: none; padding: 2px 4px; margin: 0; font-family: inherit;
    font-size: 13.5px; color: var(--text); cursor: pointer; text-align: left;
}
.loc-trigger:disabled { cursor: default; color: var(--muted); }
.loc-trigger .material-icons:first-child { color: var(--muted); font-size: 18px; flex-shrink: 0; }
.loc-trigger-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-chevron { font-size: 18px; color: var(--muted); flex-shrink: 0; transition: transform .15s ease; }
.loc-multiselect.open .loc-chevron { transform: rotate(180deg); }
.loc-trigger:disabled .loc-chevron { opacity: .45; }
/* overflow:hidden normal (cantos arredondados) corta o painel de sugestões, que se
   estende abaixo da caixa — libera só enquanto esse campo específico estiver aberto. */
.loc-multiselect.open { overflow: visible; }
.loc-suggestions {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 28px rgba(20,20,15,.14);
    z-index: 30; max-height: 320px; display: flex; flex-direction: column; overflow: hidden;
}
.loc-search-row {
    display: flex; align-items: center; gap: 7px; padding: 9px 12px;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.loc-search-row .material-icons { color: var(--muted); font-size: 18px; flex-shrink: 0; }
.loc-search-input {
    border: none; outline: none; background: transparent; font-family: inherit;
    font-size: 13.5px; color: var(--text); width: 100%; padding: 2px 0; min-width: 0;
}
.loc-suggestions-list { overflow-y: auto; padding: 6px; }
.loc-suggestion-btn {
    display: block; width: 100%; text-align: left; background: none; border: none;
    padding: 9px 12px; border-radius: 7px; font-family: inherit; font-size: 13.5px;
    color: var(--text-2); cursor: pointer; transition: background .1s;
}
.loc-suggestion-btn:hover, .loc-suggestion-btn.active { background: var(--accent-bg); color: var(--accent-dark); }
.loc-suggestion-all { font-weight: 600; border-bottom: 1px solid var(--border); border-radius: 7px 7px 0 0; margin-bottom: 4px; }
.loc-suggestion-loading { padding: 9px 12px; font-size: 13.5px; color: var(--muted); }

/* ── Multi-seleção de remoto/híbrido/presencial (chips com checkbox nativo) ── */
.remote-multiselect { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-toggle { position: relative; cursor: pointer; }
.chip-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-toggle span {
    display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text-2); border-radius: 20px; padding: 8px 14px;
    font-size: 13px; font-weight: 600; transition: background .15s, border-color .15s, color .15s;
}
.chip-toggle span .material-icons { font-size: 16px; }
.chip-toggle input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-toggle input:focus-visible + span { outline: 2px solid var(--accent-dark); outline-offset: 1px; }
@media (max-width: 640px) {
    .filters-bar { flex-direction: column; align-items: stretch; }
    .fb-geo-stack { flex-direction: column; }
    .fb-actions { flex-direction: column; }
    /* flex-basis vira ALTURA quando o eixo principal passa a ser vertical (column) — sem
       isso, um campo com "flex: 0 0 200px" do layout desktop (200px de LARGURA lá) herdava
       200px de ALTURA aqui, criando caixas vazias gigantes. Reset explícito pra largura
       cheia/altura livre em tudo que vive dentro da barra, empilhado ou não. */
    .filters-bar .fb-field, .filters-bar .fb-field-wide, .filters-bar .loc-multiselect,
    .fb-geo-stack, .fb-geo-stack .fb-field, .fb-geo-stack .loc-multiselect,
    .fb-city, .fb-actions {
        flex: 0 1 auto; width: 100%; height: auto; min-height: 0; min-width: 0;
    }
}

/* ── Filtro de continente (botões outlined) ── */
.continent-filter { margin-top: 10px; }
.continent-label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.continent-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.continent-btn {
    padding: 6px 12px; border: 1.5px solid var(--border); border-radius: 20px;
    background: transparent; font-family: inherit; font-size: 12.5px; color: var(--text-2);
    cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.continent-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.continent-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Autocomplete de cidade (reaproveita o painel do custom-select) ── */
.city-field { position: relative; }
.city-ac-panel { max-height: 220px; overflow-y: auto; }
.city-ac-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* ── Custom select (substitui o <select> nativo por um painel elegante) ── */
.custom-select-native { display: none; }
.custom-select { position: relative; flex: 1; min-width: 0; }
.custom-select-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; background: transparent; border: none; outline: none;
    font-family: inherit; font-size: 14px; color: var(--text); cursor: pointer; padding: 0;
}
.custom-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.custom-select-chevron { font-size: 18px; color: var(--muted); transition: transform .15s ease; flex-shrink: 0; }
.custom-select.open .custom-select-chevron { transform: rotate(180deg); }

.custom-select-panel {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; min-width: 180px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 12px 28px rgba(20, 20, 15, .14); padding: 6px; z-index: 30;
    opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
    transform-origin: top left;
    transition: opacity .15s ease, transform .15s ease;
}
.custom-select.open .custom-select-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.custom-select-option {
    display: block; width: 100%; text-align: left; background: none; border: none;
    padding: 9px 12px; border-radius: 7px; font-family: inherit;
    font-size: 13.5px; color: var(--text-2); cursor: pointer; transition: background .1s;
}
.custom-select-option:hover { background: var(--accent-bg); color: var(--accent-dark); }
.custom-select-option.active { background: var(--accent-bg); color: var(--accent-dark); font-weight: 600; }

/* ── Dropdown com checkbox (remoto/híbrido/presencial) — mesmo painel do custom-select ── */
.custom-select-checkbox-option {
    display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 7px;
    font-family: inherit; font-size: 13.5px; color: var(--text-2); cursor: pointer; transition: background .1s;
}
.custom-select-checkbox-option:hover { background: var(--accent-bg); }
.custom-select-checkbox-option .material-icons { font-size: 16px; color: var(--muted); flex-shrink: 0; }
.custom-select-checkbox-option input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }

.btn-search {
    background: var(--accent); color: #fff; border: none; border-radius: 7px;
    width: 100%; padding: 12px; margin-top: 14px;
    font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 15px;
    cursor: pointer; transition: background .15s;
}
.btn-search:hover { background: var(--accent-dark); }
.saved-search-banner {
    display: flex; align-items: center; gap: 8px; background: var(--accent-bg); color: var(--accent-dark);
    border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 500; margin-bottom: 14px;
}
.saved-search-banner .material-icons { font-size: 17px; }
.saved-search-banner button {
    margin-left: auto; background: transparent; border: none; color: var(--accent-dark);
    text-decoration: underline; font-size: 12.5px; cursor: pointer; font-family: inherit; padding: 0;
}

/* ── Consoles colapsáveis no topo de /vagas (vagas salvas, alertas de vaga) ── */
.job-console {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
    margin-bottom: 16px; overflow: hidden;
}
.job-console-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%; background: transparent;
    border: none; padding: 13px 16px; cursor: pointer; font-family: inherit; color: var(--text);
}
.job-console-toggle .icon-bookmark { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; color: var(--accent); }
.job-console-toggle .material-icons { font-size: 19px; color: var(--accent); }
.job-console-title { flex: 1; text-align: left; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.job-console-count {
    background: var(--accent-bg); color: var(--accent-dark); font-size: 11.5px; font-weight: 700;
    padding: 2px 8px; border-radius: 20px; min-width: 20px; text-align: center;
}
.job-console-chevron { font-size: 20px; color: var(--muted); transition: transform .25s ease; margin-left: auto; }
.job-console-toggle[aria-expanded="true"] .job-console-chevron { transform: rotate(180deg); }
.job-console-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.job-console-body.is-open { overflow: visible; }
/* .job-console tem overflow:hidden só pra cantos arredondados (border-radius) não
   vazarem fundo quadrado atrás — mas isso também cortava o painel do custom-select
   (continente/categoria/salário/ordenar) E o painel de sugestões do autocomplete de
   país/cidade (.loc-suggestions, componente diferente do custom-select) quando
   qualquer um deles se estende abaixo da altura natural da barra de filtros. Libera
   só nesse momento específico (algum dropdown aberto dentro do console de filtros),
   sem mexer nos outros consoles (vagas salvas, alertas). */
.filters-console:has(.custom-select.open),
.filters-console:has(.loc-suggestions:not([hidden])) { overflow: visible; }
.job-console-empty { padding: 0 16px 16px; }
.job-console-inner { padding: 0 16px 18px; }
.job-console-subhead {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); margin: 0 0 10px;
}
.job-console-subhead-spaced { margin-top: 20px; }
.job-console-table-wrap { overflow-x: auto; padding: 0 4px 4px; }
.job-console-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.job-console-table th {
    text-align: left; padding: 8px 12px; color: var(--muted); font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.job-console-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.job-console-table tr:last-child td { border-bottom: none; }
.job-console-table td a { color: var(--text); font-weight: 600; text-decoration: none; }
.job-console-table td a:hover { color: var(--accent); }
.job-console-status { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.job-console-status-open { background: var(--accent-bg); color: var(--accent-dark); }
.job-console-status-closed { background: var(--border); color: var(--muted); }
.job-console-action-cell { text-align: right; }
.saved-console-remove { margin: 0; padding: 4px; color: var(--accent); }
.saved-console-remove .icon-bookmark { width: 17px; height: 17px; }
.job-console .apply-form { margin: 0; }
.job-console .alerts-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }

.btn-match-profile {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto;
    background: var(--accent); border: none; border-radius: 7px; color: #fff;
    padding: 10px 18px; font-family: 'Open Sans', sans-serif;
    font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: background .15s;
}
.btn-match-profile:hover, .btn-match-profile.active { background: var(--accent-dark); }
.btn-match-profile .material-icons { font-size: 16px; }

/* ── Results ── */
.results { padding: 20px 0 60px; }
.results-count { color: var(--muted); font-size: 13px; margin: 0 0 14px; text-transform: uppercase; letter-spacing: .04em; }

.geo-breadcrumb { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.geo-breadcrumb a { color: var(--muted); text-decoration: none; }
.geo-breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.geo-breadcrumb-sep { margin: 0 6px; }
.geo-breadcrumb-current { color: var(--text); }
.geo-heading { font-family: 'Open Sans', sans-serif; font-size: 24px; font-weight: 600; margin: 0 0 12px; }
.geo-subtitle { color: var(--muted); font-size: 14px; margin: -6px 0 14px; }
/* Overlay "vidro fosco" sobre os cards de vaga enquanto a busca ao vivo roda (pedido
   2026-10-07: trocar filtro ficava sem indicativo nenhum de carregamento) — os cards
   antigos ficam visíveis por baixo, meio apagados/borrados, com um spinner no topo. */
#jobList { position: relative; }
#jobList[aria-busy="true"] { pointer-events: none; }
#jobList[aria-busy="true"] > * { opacity: .35; filter: blur(1.5px); transition: opacity .2s, filter .2s; }
#jobList[aria-busy="true"]::before {
    content: ''; position: absolute; inset: 0; z-index: 5; border-radius: 14px;
    background: rgba(247, 245, 240, .5);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
#jobList[aria-busy="true"]::after {
    content: ''; position: absolute; top: 56px; left: 50%; z-index: 6;
    width: 32px; height: 32px; margin-left: -16px;
    border: 3px solid var(--border); border-top-color: var(--accent);
    border-radius: 50%; animation: jobListSpin .7s linear infinite;
}
@keyframes jobListSpin { to { transform: rotate(360deg); } }

/* container-type: a lista de vagas às vezes vive numa coluna mais estreita que a
   viewport (ex: página de empresa com sidebar) — o card quebrado (título
   espremido, tag partida ao meio, botões flutuando) acontecia mesmo em telas
   largas porque a regra usava @media (largura da JANELA) em vez da largura real
   da coluna. Com @container, o layout em grid do .job-card-wrap reage à largura
   de ONDE ele realmente está, não da janela — resolve em qualquer contexto. */
.job-list { display: flex; flex-direction: column; gap: 12px; container-type: inline-size; container-name: joblist; }
.job-card-wrap { position: relative; }
.job-card-save.feed-like-btn {
    position: absolute; top: 14px; right: 16px; z-index: 1; margin: 0;
    display: flex; align-items: center; gap: 5px; padding: 6px 11px;
    background: #EAF2FA; color: #2E4A66; border: 1px solid #2E4A66; border-radius: 7px;
    font-size: 12px; font-weight: 600; transition: background .15s, color .15s;
}
.job-card-save.feed-like-btn .icon-bookmark { width: 14px; height: 14px; }
.job-card-save.feed-like-btn.is-liked { background: #2E4A66; color: #fff; }
.job-card-save-label { white-space: nowrap; }
.job-card-date { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.job-applied-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--accent); background: var(--accent-bg); padding: 3px 9px; border-radius: 20px; margin-bottom: 6px; }
.job-applied-badge .material-icons { font-size: 14px; }

.icon-bookmark {
    width: 18px; height: 18px; display: block;
    fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round;
}
.is-liked .icon-bookmark { fill: currentColor; stroke: currentColor; }
.job-card {
    display: flex; align-items: flex-start; gap: 16px;
    background: var(--card-bg); border: 1px solid var(--border); border-left: 3px solid var(--border);
    border-radius: 7px; border-top-left-radius: 0; border-bottom-left-radius: 0;
    padding: 20px 24px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: box-shadow .15s, transform .15s;
}
.job-card-icon {
    width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0;
    background-size: cover; background-position: center; background-color: var(--accent-bg);
}

/* ── Ícone + cor de destaque por setor (job-sector.js escolhe a chave) ── */
.job-card[data-sector="tech"] { border-left-color: var(--accent); }
.job-card[data-sector="saude"] { border-left-color: var(--clay); }
.job-card[data-sector="atendimento"] { border-left-color: var(--orange); }
.job-card[data-sector="alimentacao"] { border-left-color: var(--rust); }
.job-card[data-sector="logistica"] { border-left-color: var(--amber); }
.job-card[data-sector="construcao"] { border-left-color: var(--sand); }
.job-card[data-sector="transporte"] { border-left-color: var(--olive); }
.job-card[data-sector="limpeza"] { border-left-color: var(--amber); }
.job-card[data-sector="retail"] { border-left-color: var(--orange); }
.job-card[data-sector="escritorio"] { border-left-color: var(--accent); }
.job-card-main { flex: 1; min-width: 0; }
.job-card h2 { font-size: 17px; margin-bottom: 3px; }
.job-company { color: var(--text-2); font-size: 14px; margin: 0 0 10px; }

.job-card-corner-category {
    display: inline-block; font-size: 11px; font-weight: 600; color: var(--accent-dark); background: var(--accent-bg);
    padding: 3px 8px; border-radius: 10px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 160px; margin-bottom: 10px;
}

.job-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    background: var(--accent-bg); color: var(--accent-dark);
    font-size: 12.5px; font-weight: 500; padding: 5px 10px; border-radius: 20px;
    /* Localização às vezes vem bem longa (ex: "Cologne, North Rhine-Westphalia,
       Germany") — em telas bem estreitas isso não cabe nem sozinho na linha;
       trunca com reticências em vez de vazar pra fora do card. */
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.tag .material-icons { font-size: 15px; }
.job-freshness {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    color: var(--muted); font-size: 13px; margin: 10px 0 0;
}
.job-freshness .material-icons { font-size: 15px; vertical-align: middle; }
.tag-removed { background: #fbe9e7; color: #b3452b; }
.job-card-removed { opacity: .82; align-items: center; }
.job-card-removed:hover { opacity: 1; }
.job-card-removed-link {
    display: flex; align-items: flex-start; gap: 16px; flex: 1; min-width: 0;
    color: inherit; text-decoration: none;
}
.verify-external-btn {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    background: var(--accent-bg); color: var(--accent-dark); text-decoration: none;
    font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 20px;
    white-space: nowrap; transition: background .15s;
}
.verify-external-btn:hover { background: var(--accent); color: #fff; }
.verify-external-btn .material-icons { font-size: 16px; }

.removed-jobs-search { margin: 18px 0 22px; }
.removed-jobs-search .field {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border: 2px solid var(--border); border-radius: 10px;
    background: var(--card-bg, #fff); max-width: 420px;
    transition: border-color .15s;
}
.removed-jobs-search .field:focus-within { border-color: var(--accent); }
.removed-jobs-search .field .material-icons { color: var(--muted); font-size: 19px; flex-shrink: 0; }
.removed-jobs-search .field input {
    border: none; outline: none; background: transparent; font-family: inherit;
    font-size: 14px; color: var(--text); width: 100%; padding: 0;
}

.job-card-side { text-align: right; flex-shrink: 0; margin-top: 38px; }
.job-salary { font-family: 'Open Sans', sans-serif; font-weight: 600; color: var(--text); margin: 0 0 8px; font-size: 15px; }
.job-cta { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 500; font-size: 13.5px; }
.job-cta .material-icons { font-size: 16px; }
.job-cta-btn {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
    background: var(--accent); color: #fff; font-weight: 600; font-size: 13px;
    padding: 7px 14px; border-radius: 7px;
}
.job-cta-btn .material-icons { font-size: 15px; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state .material-icons { font-size: 40px; margin-bottom: 12px; display: block; }

/* ── Paginação ── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 28px; }
.page-btn {
    display: flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 6px; border-radius: 8px;
    font-size: 13.5px; font-weight: 500; color: var(--text-2);
    transition: background .15s, color .15s;
}
.page-btn:hover { background: var(--accent-bg); color: var(--accent-dark); }
.page-btn.active { background: var(--accent); color: #fff; }
.page-btn.disabled { opacity: .35; pointer-events: none; }
.page-btn .material-icons { font-size: 19px; }
.page-ellipsis { color: var(--muted); font-size: 13px; padding: 0 2px; }

/* ── Feed (cards estilo post) ── */
.feed-list { display: flex; flex-direction: column; gap: 12px; }
.feed-item {
    display: flex; gap: 14px; background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 7px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: box-shadow .15s;
}
a.feed-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }

/* ── Cor pastel por post (lib/text.js:feedColorClass), só pra diferenciar
   visualmente os cards no scroll — não tem significado de categoria. ── */
.feed-pastel-0 { background: var(--accent-bg); }
.feed-pastel-1 { background: var(--amber-bg); }
.feed-pastel-2 { background: var(--rust-bg); }
.feed-pastel-3 { background: var(--orange-bg); }
.feed-pastel-4 { background: var(--sand-bg); }
.feed-pastel-5 { background: var(--olive-bg); }
.feed-pastel-6 { background: var(--clay-bg); }
.feed-item-wrap { position: relative; }
.feed-like-btn-corner {
    position: absolute; bottom: 14px; right: 16px; margin-top: 0; background: var(--card-bg);
    border-radius: 20px; padding: 4px 10px 4px 8px;
}
.feed-like-btn-corner[data-item-type="job"].is-liked { color: var(--accent); }
.feed-body { flex: 1; min-width: 0; }
.feed-post-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.feed-company { font-weight: 600; color: var(--text); font-size: 14.5px; }
.feed-date { color: var(--muted); font-size: 12.5px; }
.feed-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.feed-tag .material-icons { font-size: 14px; }
.feed-title { margin: 0; color: var(--text); }
.feed-source-note, .feed-source-link {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
    color: var(--muted); font-size: 12px;
}
.feed-source-link { text-decoration: none; }
.feed-source-link:hover { color: var(--accent); }
.feed-source-note .material-icons, .feed-source-link .material-icons { font-size: 14px; }
.feed-meta { display: none; }

/* ── Feed: composer + posts da comunidade ── */
.feed-composer {
    display: flex; align-items: flex-start; gap: 12px; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: 7px; padding: 16px 18px; margin-bottom: 16px;
}
.feed-composer-input {
    flex: 1; border: none; background: transparent; resize: none; font-family: inherit;
    font-size: 14px; color: var(--text); padding: 6px 0; min-height: 22px; max-height: 220px;
}
.feed-composer-input:focus { outline: none; }
.feed-composer-btn {
    align-self: flex-end; background: var(--accent); color: #fff; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.feed-composer-login {
    display: block; text-align: center; background: var(--card-bg); border: 1px dashed var(--border);
    border-radius: 7px; padding: 14px; margin-bottom: 16px; color: var(--text-2); font-size: 13.5px;
}
.feed-community-body { white-space: pre-wrap; }
.feed-community-img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 8px; margin-top: 10px; display: block; }
.feed-read-article-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--accent-bg); color: var(--accent-dark); font-size: 12.5px; font-weight: 600;
    padding: 7px 13px; border-radius: 20px; text-decoration: none; margin-top: 12px;
    transition: background .15s;
}
.feed-read-article-btn .material-icons { font-size: 14px; }
.feed-read-article-btn:hover { background: var(--accent); color: #fff; }
.feed-like-btn {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; border: none;
    background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0;
}
.feed-like-btn .material-icons { font-size: 18px; }
.feed-like-btn.is-liked { color: #C2385B; }
.avatar-anon { background: var(--border); color: var(--text-2); }
.avatar-anon .material-icons { font-size: 18px; }
.avatar-pseudo { background: var(--card-bg); overflow: hidden; }
.avatar-pseudo svg { width: 100%; height: 100%; display: block; }

/* ── Identidade pseudônima do feed (perfil) ── */
.feed-identity-box { display: flex; flex-direction: column; gap: 16px; }
.feed-identity-preview { display: flex; align-items: center; gap: 16px; }
.feed-identity-avatar { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--card-bg); border: 1px solid var(--border); flex-shrink: 0; }
.feed-identity-avatar svg { width: 100%; height: 100%; display: block; }
.feed-identity-nickname-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feed-identity-nickname-row input { flex: 1; min-width: 160px; }
.feed-identity-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.feed-identity-mode-btn { padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--card-bg); font-size: 13px; cursor: pointer; font-family: inherit; }
.feed-identity-mode-btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.feed-identity-cycle-row { display: flex; gap: 8px; flex-wrap: wrap; }
.feed-identity-cycle-btn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg); font-size: 12.5px; cursor: pointer; font-family: inherit; }
.feed-identity-cycle-btn .material-icons { font-size: 16px; }
.feed-identity-shuffle-btn { display: flex; align-items: center; gap: 6px; }
.feed-identity-status { font-size: 12.5px; color: var(--text-2); }
.feed-identity-status.is-on { color: var(--accent); font-weight: 600; }
.feed-identity-cycle-btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.feed-identity-grid-panel { border: 1px solid var(--border); border-radius: 10px; background: var(--bg); padding: 12px; }
.feed-identity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.feed-identity-grid-loading { grid-column: 1 / -1; text-align: center; color: var(--text-2); font-size: 13px; margin: 20px 0; }
.feed-identity-grid-item { width: 56px; height: 56px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg); cursor: pointer; padding: 2px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.feed-identity-grid-item:hover { border-color: var(--accent); }
.feed-identity-grid-item svg { width: 100%; height: 100%; }
.feed-identity-grid-item.is-color { padding: 0; }
.feed-identity-grid-item.is-none { color: var(--muted); }
.feed-identity-grid-item.is-none .material-icons { font-size: 22px; }
.feed-sort { display: flex; gap: 8px; margin-bottom: 14px; }
.feed-sort-btn {
    border: 1px solid var(--border); background: var(--card-bg); color: var(--text-2);
    border-radius: 20px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
    text-decoration: none;
}
.feed-sort-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Job detail ── */
.job-detail { padding: 32px 0 60px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13.5px; margin-bottom: 24px; }
.back-link:hover { color: var(--accent); }

.job-card-unified {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 7px;
    overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.job-banner {
    padding: 32px 28px; background-size: cover; background-position: center;
    display: flex; align-items: flex-end; position: relative;
}
/* O painel de detalhe da vaga (usado em /vagas) está definido lá embaixo, na seção
   "Painel de detalhe da vaga (estilo LinkedIn)" — evita regra duplicada aqui. */

.job-banner-save-btn {
    position: absolute; top: 16px; right: 16px; margin: 0; padding: 7px;
    background: rgba(15, 35, 29, .5); border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%; color: #fff; backdrop-filter: blur(6px);
}
.job-banner-save-btn.is-liked { color: var(--accent); background: rgba(255,255,255,.92); }
.job-banner-save-btn .icon-bookmark { width: 19px; height: 19px; }
.job-banner-glass {
    display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 7px;
    background: rgba(15, 35, 29, .38); border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.job-banner-glass .avatar-lg { background: rgba(255,255,255,.92); box-shadow: 0 1px 3px rgba(0,0,0,.2); flex-shrink: 0; text-decoration: none; transition: box-shadow .15s; }
.job-banner-glass a.avatar-lg:hover { box-shadow: 0 0 0 3px rgba(255,255,255,.5); }
.job-banner-glass h1 { font-size: 24px; margin-bottom: 2px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.3); }
.job-banner-glass .job-company-name { color: rgba(255,255,255,.85); font-size: 15px; margin: 0; }
.job-banner-glass .job-company-name a { color: #FFA35C; text-decoration: none; font-weight: 700; }
.job-banner-glass .job-company-name a:hover { color: #FFC28A; }
.job-card-body { padding: 22px 28px 28px; }
.job-salary-big { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 18px; color: var(--success); margin: 16px 0 0; }

.job-section { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--border); }
.job-section:first-of-type { padding-top: 0; margin-top: 0; border-top: none; }
.job-section h3 { font-size: 16px; margin-top: 0; }
.job-section h3 ~ h3 { margin-top: 24px; }
/* Some depois de avaliar a candidatura (ver script no fim de job.ejs): encolhe e some pra
   dar lugar às vagas relacionadas, em vez de só sumir de repente. */
#jobDescriptionSection.is-collapsing {
    max-height: 600px; opacity: 1; overflow: hidden;
    transition: max-height .5s cubic-bezier(.4, 0, .2, 1), opacity .35s ease, margin .5s ease, padding .5s ease;
}
#jobDescriptionSection.is-collapsed {
    max-height: 0; opacity: 0; margin: 0; padding: 0; border-top: none;
}
/* Destaque breve nas vagas relacionadas quando o scroll chega nelas nesse fluxo. */
#relatedJobsSlot.is-highlighted .related-jobs { animation: related-jobs-pulse 1.4s ease; }
@keyframes related-jobs-pulse {
    0% { box-shadow: 0 0 0 0 var(--accent-bg); border-radius: 10px; }
    35% { box-shadow: 0 0 0 10px var(--accent-bg); border-radius: 10px; }
    100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); border-radius: 10px; }
}
.job-text { color: var(--text-2); white-space: pre-line; }
.job-text.muted { color: var(--muted); }

.job-text-rich { color: var(--text-2); line-height: 1.65; }
.job-text-rich p { margin: 0 0 14px; }
.job-text-rich h4 { color: var(--text); font-size: 15px; margin: 22px 0 10px; }
.job-text-rich h4:first-child { margin-top: 0; }
.job-text-rich ul { margin: 0 0 14px; padding-left: 20px; }
.job-text-rich li { margin-bottom: 6px; }

.job-description-fade { position: relative; max-height: 230px; overflow: hidden; }
.job-description-fade::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--card-bg));
    pointer-events: none;
}

.job-gate-inline { text-align: center; padding-top: 4px; }
.job-gate-inline h3 { margin-bottom: 6px; }
.job-gate-inline > p { color: var(--text-2); font-size: 13.5px; margin: 0 0 16px; }
.apply-sub { color: var(--muted); font-size: 13.5px; margin: -4px 0 20px; }
.apply-form { display: flex; flex-direction: column; gap: 16px; }
.apply-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.apply-form .optional { font-weight: 400; color: var(--muted); }
.apply-form input, .apply-form textarea, .apply-form select {
    background: transparent; -webkit-appearance: none; appearance: none;
    border: none; border-bottom: 2px solid var(--border); border-radius: 0; padding: 9px 2px;
    font-family: inherit; font-size: 14.5px; color: var(--text); outline: none; resize: vertical;
    transition: border-color .15s;
}
.apply-form input:focus, .apply-form textarea:focus, .apply-form select:focus { border-bottom-color: var(--accent); }
.apply-form .alerts-remote-label { margin: -6px 0 -6px; }
.apply-form .form-row { display: flex; gap: 16px; }
.apply-form .form-row label { flex: 1; }
.apply-form .checkbox-label { flex-direction: row !important; align-items: center; gap: 8px !important; }
.apply-form .checkbox-label input { width: auto; }

.manage-jobs-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.manage-jobs-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.manage-jobs-list .job-status { font-size: 12.5px; padding: 3px 9px; border-radius: 20px; background: var(--bg); color: var(--muted); }
.manage-jobs-list .job-status.open { background: var(--accent-bg); color: var(--accent); }
.manage-jobs-list form { display: inline; }
.manage-jobs-list .link-btn { background: none; border: none; padding: 0; font: inherit; color: var(--muted); cursor: pointer; text-decoration: underline; }

/* ── Atividades pendentes (perfil) ── */
.pending-activities-box h3 { display: flex; align-items: center; gap: 8px; }
.pending-activities-box h3 .material-icons { color: var(--orange); }
.pending-activities-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pending-activity-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); flex-wrap: wrap; }
.pending-activity-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pending-activity-info a { font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; }
.pending-activity-info a:hover { text-decoration: underline; }
.pending-activity-company { font-size: 12.5px; color: var(--text-2); }
.pending-activity-actions { display: flex; gap: 8px; flex-shrink: 0; }
.pending-activity-actions button { padding: 7px 14px; font-size: 13px; }
.pending-activity-row.is-done { opacity: .45; pointer-events: none; }

.cv-autofill { margin-bottom: 24px; }
.cv-autofill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cv-autofill-btn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: var(--accent-bg); border: 2px solid var(--accent); border-radius: 7px;
    padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--accent-dark);
    transition: background .15s;
}
.cv-autofill-btn:hover { background: var(--accent-bg-hover, var(--accent-bg)); }
.cv-autofill-btn .material-icons { font-size: 18px; }
.cv-autofill-btn.disabled { pointer-events: none; opacity: .6; }
.cv-autofill #cvAutofillError { margin-top: 10px; margin-bottom: 0; }

.apply-box { position: relative; }
.cv-loading-overlay {
    position: absolute; inset: 0; z-index: 5; border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: rgba(247, 245, 240, .92); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.cv-loading-overlay.show { opacity: 1; pointer-events: auto; }
.cv-loading-overlay p { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.cv-spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--border); border-top-color: var(--accent);
    animation: cv-spin .7s linear infinite;
}
@keyframes cv-spin { to { transform: rotate(360deg); } }

/* ── Candidatura em destaque (vaga própria) ── */
.apply-hero-btn {
    display: inline-flex; align-items: center; gap: 10px; margin: 4px 0 20px;
    background: linear-gradient(120deg, var(--accent), var(--accent-dark)); color: #fff;
    border: none; border-radius: 999px; padding: 14px 28px; font-family: inherit;
    font-weight: 700; font-size: 15.5px; cursor: pointer;
    box-shadow: 0 6px 18px rgba(31, 92, 76, .32); transition: transform .15s, box-shadow .15s;
}
.apply-hero-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(31, 92, 76, .4); }
.apply-hero-btn .material-icons { font-size: 20px; }

.apply-choice { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 4px; }
.apply-cv-btn, .apply-manual-btn {
    flex: 1; min-width: 220px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 8px; border-radius: 12px; padding: 24px 18px; text-align: center;
    cursor: pointer; font-family: inherit; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.apply-cv-btn {
    background: linear-gradient(135deg, var(--accent-bg), var(--card-bg));
    border: 2px solid var(--accent); color: var(--accent-dark);
}
.apply-cv-btn .material-icons { font-size: 30px; color: var(--accent); }
.apply-manual-btn {
    background: var(--card-bg); border: 2px solid var(--border); color: var(--text-2);
}
.apply-manual-btn .material-icons { font-size: 30px; color: var(--muted); }
.apply-cv-btn:hover, .apply-manual-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.apply-manual-btn:hover { border-color: var(--accent); }
.apply-cv-btn strong, .apply-manual-btn strong { font-size: 15px; }
.apply-cv-btn span.apply-choice-sub, .apply-manual-btn span.apply-choice-sub { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.apply-cv-btn.disabled { pointer-events: none; opacity: .6; }

.apply-manual-slide { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .35s ease, opacity .3s ease; }
.apply-manual-slide.open { max-height: 1100px; opacity: 1; margin-top: 18px; }

.post-apply-promo {
    margin-top: 22px; padding: 20px 22px; border-radius: 12px;
    background: var(--accent-bg); border: 1px solid var(--accent);
}
.post-apply-promo h4 { margin: 0 0 6px; font-size: 15.5px; color: var(--accent-dark); }
.post-apply-promo p { margin: 0 0 14px; font-size: 13.5px; color: var(--text-2); line-height: 1.6; }

/* ── Compartilhar vaga (reaproveita .share-btn de public/css já usado nas notícias) ── */
.job-share-buttons { display: flex; align-items: center; gap: 6px; margin: 4px 0 18px; }
.job-share-label { font-size: 12.5px; color: var(--muted); margin-right: 2px; }
.share-btn.is-copied { color: var(--success); border-color: var(--success); }

/* ── Tracking de candidatura em vaga agregada ── */
.external-track-box { margin-top: 16px; padding: 18px 20px; border-radius: 10px; background: var(--card-bg); border: 1px solid var(--border); }
.external-track-box h4 { margin: 0 0 10px; font-size: 14.5px; }
.track-yesno-row { display: flex; gap: 10px; flex-wrap: wrap; }
.track-yesno-row button { font-family: inherit; }
.experience-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.experience-summary .review-stars-static { display: inline-flex; }

.portfolio-preview-btn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: var(--orange-bg); border: 2px solid var(--orange); border-radius: 7px;
    padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--orange);
    font-family: inherit; transition: background .15s;
}
.portfolio-preview-btn:hover { background: rgba(194, 87, 12, .2); }
.portfolio-preview-btn .material-icons { font-size: 18px; }

.preview-modal-overlay {
    position: fixed; inset: 0; z-index: 10002; background: rgba(15,20,18,.6);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.preview-modal-overlay.show { opacity: 1; pointer-events: auto; }
.preview-modal {
    background: var(--card-bg); border-radius: 14px; width: 100%; max-width: 760px; height: 85vh;
    display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.3);
    transform: translateY(16px) scale(.98); transition: transform .25s ease;
}
.preview-modal-overlay.show .preview-modal { transform: translateY(0) scale(1); }
.preview-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px; color: var(--text);
}
.preview-modal-close { background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px; display: flex; }
.preview-modal-close:hover { color: var(--text); }
.preview-modal-body { position: relative; flex: 1; overflow: hidden; }
.preview-modal-body iframe { width: 100%; height: 100%; border: none; }
.preview-modal-loading {
    position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
    background: var(--card-bg);
}
.preview-modal-loading:not([hidden]) { display: flex; }
@media (max-width: 640px) {
    .preview-modal { height: 90vh; }
}
.btn-apply {
    background: var(--accent); color: #fff; border: none; border-radius: 7px;
    padding: 14px; font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 15px;
    cursor: pointer; transition: background .15s; margin-top: 6px;
}
.btn-apply:hover { background: var(--accent-dark); }
.btn-apply-link { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.btn-apply-link .material-icons { font-size: 18px; }
.btn-apply-sm { display: inline-block; padding: 9px 16px; font-size: 13.5px; margin-top: 0; text-decoration: none; }
.job-detail-divider { border: none; border-top: 1px solid var(--border); margin: 32px 0 20px; }
.manage-jobs-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.manage-jobs-header h2 { font-size: 17px; margin: 0; }
.form-error { background: #FBEAEA; color: #9C3B3B; padding: 10px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; }

/* ── Privacidade e conta (perfil) ── */
.privacy-account-box { margin-top: 20px; }
.privacy-account-sub { font-size: 13.5px; color: var(--text-2); margin: 4px 0 16px; }
.privacy-account-sub a { color: var(--accent-dark); }
.privacy-account-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-secondary, .btn-danger-outline, .btn-danger {
    display: inline-flex; align-items: center; gap: 6px; border-radius: 7px; padding: 10px 16px;
    font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 13.5px; cursor: pointer;
    text-decoration: none; border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
}
.btn-secondary:hover { background: var(--accent-bg); }
.btn-danger-outline { color: #9C3B3B; border-color: #E3B8B8; }
.btn-danger-outline:hover { background: #FBEAEA; }
.btn-danger { background: #9C3B3B; color: #fff; border-color: #9C3B3B; }
.btn-danger:hover { background: #7E2E2E; }
.privacy-account-actions .material-icons { font-size: 17px; }

.delete-account-modal-overlay {
    position: fixed; inset: 0; z-index: 10003; background: rgba(15,20,18,.6);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.delete-account-modal-overlay.open { opacity: 1; pointer-events: auto; }
.delete-account-modal {
    background: var(--card-bg); border-radius: 14px; width: 100%; max-width: 440px;
    padding: 24px; box-shadow: 0 24px 64px rgba(0,0,0,.3);
}
.delete-account-modal h3 { margin: 0 0 10px; font-size: 17px; }
.delete-account-modal p { font-size: 14px; color: var(--text-2); line-height: 1.6; margin: 0 0 14px; }
.delete-account-modal label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.delete-account-modal input { width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; font-size: 14px; }
.delete-account-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* ── Avaliações de empresa ── */
.review-avg { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); margin: 0 0 16px; }
.review-stars-static { display: inline-flex; }
.review-stars-static .material-icons { font-size: 18px; color: #D9A429; }
.review-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.review-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; }
.review-item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.review-author { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.review-comment { margin: 0; }
.review-report-btn {
    background: transparent; border: none; color: var(--muted); font-size: 11.5px; text-decoration: underline;
    cursor: pointer; padding: 0; margin-top: 8px; font-family: inherit;
}
.review-report-btn.is-reported { text-decoration: none; cursor: default; }
.review-form-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 22px; }
.review-form-box h4 { margin: 0 0 12px; font-size: 15px; }
.review-form-note { font-size: 12.5px; color: var(--accent); margin: 0 0 10px; }
.review-disclaimer { font-size: 12px; color: var(--muted); line-height: 1.6; background: var(--bg); border-radius: 8px; padding: 12px 14px; margin: 0 0 16px; }
.review-field-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.review-star-picker { display: flex; gap: 4px; margin-bottom: 18px; }
.review-star-btn { background: transparent; border: none; cursor: pointer; padding: 2px; color: var(--muted); }
.review-star-btn .material-icons { font-size: 26px; }
.review-star-btn.is-active { color: #D9A429; }
.review-comment-input {
    width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
    font-family: inherit; font-size: 13.5px; min-height: 70px; margin-bottom: 14px; resize: vertical;
    box-sizing: border-box;
}
.review-submit-btn { padding: 10px 22px; }

/* ── Modal de "você se candidatou?" (pergunta pós-clique externo) ── */
.link-btn { background: none; border: none; padding: 0; font: inherit; font-size: 13px; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover { color: var(--accent-dark); }
.track-modal-overlay {
    position: fixed; inset: 0; z-index: 10004; background: rgba(15,20,18,.6);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.track-modal-overlay.open { opacity: 1; pointer-events: auto; }
.track-modal {
    background: var(--card-bg); border-radius: 16px; width: 100%; max-width: 420px;
    padding: 34px 28px 26px; position: relative; box-shadow: 0 24px 64px rgba(0,0,0,.3);
    overflow: hidden; transform: translateY(8px) scale(.98); transition: transform .2s ease;
}
.track-modal-overlay.open .track-modal { transform: translateY(0) scale(1); }
.track-modal-close {
    position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer;
    color: var(--muted); padding: 6px; border-radius: 50%; display: flex;
}
.track-modal-close:hover { background: rgba(0,0,0,.06); color: var(--text); }
.track-modal-icon { font-size: 34px; color: var(--accent); display: block; text-align: center; margin: 0 auto 12px; }
.track-modal-viewport { overflow: hidden; transition: height .28s ease; }
/* 3 passos agora (pergunta → avaliação → obrigado): largura e slide em terços. */
.track-modal-slider { display: flex; width: 300%; transition: transform .28s ease; align-items: flex-start; }
.track-modal-slider.to-experience { transform: translateX(-33.3333%); }
.track-modal-slider.to-thanks { transform: translateX(-66.6667%); }
.track-modal-step { width: 33.3333%; flex-shrink: 0; box-sizing: border-box; padding: 0 1px; text-align: center; }
.track-modal-step h4 { margin: 0 0 20px; font-size: 17.5px; }
.track-modal-step .review-star-picker { justify-content: center; }
.track-modal-step .review-comment-input { text-align: left; }
.track-autosave-note { font-size: 12px; color: var(--text-2); margin: 8px 0 0; min-height: 16px; transition: opacity .3s ease; }
#experienceSaveBtn { width: 100%; }

/* ── Modal de CV + Cover Letter com IA — reusa .track-modal(-overlay), passos próprios (não é slider de 3 telas) ── */
.cv-cover-step { text-align: center; }
.cv-cover-step .review-comment-input { text-align: left; }
.cv-cover-step .btn-apply, .cv-cover-step .btn-outline { width: 100%; margin-top: 8px; }
.cv-cover-step .content-gate-benefits { text-align: left; margin: 14px 0; }
.cv-cover-trigger-btn { margin-top: 10px; }
#sumupCardContainer { margin-top: 14px; }
body.modal-open { overflow: hidden; }
.external-track-box.is-compact { padding: 14px 18px; }
.track-inline-cta { font-size: 13.5px; color: var(--text-2); margin: 0; }

/* ── Pra empresas (page) ── */
.fc-hero { padding: 12px 0 28px; text-align: center; }
.fc-hero h1 { font-size: 30px; margin: 0 0 8px; }
.fc-hero-subtitle { color: var(--accent); font-weight: 600; font-size: 15px; margin: 0 0 18px; }
.fc-hero-intro { color: var(--text-2); font-size: 15px; line-height: 1.7; max-width: 560px; margin: 0 auto; }
.fc-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.fc-point {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
    padding: 22px 18px; text-align: center;
}
.fc-point .material-icons { font-size: 26px; color: var(--accent); margin-bottom: 10px; }
.fc-point h3 { font-size: 15px; margin: 0 0 8px; }
.fc-point p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin: 0; }
.fc-how {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
    padding: 26px; text-align: center;
}
.fc-how h3 { margin: 0 0 10px; }
.fc-how p { color: var(--text-2); font-size: 14px; line-height: 1.7; max-width: 520px; margin: 0 auto 20px; }
.fc-how-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fc-how-actions .btn-apply { padding: 12px 26px; display: inline-flex; }
.fc-email-link { color: var(--text-2); font-size: 13px; text-decoration: underline; }
@media (max-width: 700px) { .fc-points { grid-template-columns: 1fr; } }

/* ── Reivindicar empresa: distribuição + planos (company-claim.ejs) ── */
.claim-distribution {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
    padding: 28px; text-align: center; margin: 32px 0;
}
.claim-distribution .material-icons { font-size: 30px; color: var(--accent); margin-bottom: 10px; }
.claim-distribution h3 { font-size: 18px; margin: 0 0 10px; }
.claim-distribution p { color: var(--text-2); font-size: 14px; line-height: 1.7; max-width: 640px; margin: 0 auto; }
.claim-plans-title { text-align: center; font-size: 26px; margin: 0 0 6px; }
.claim-plans-sub { text-align: center; color: var(--text-2); font-size: 14.5px; margin: 0 0 32px; }
.claim-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 24px; align-items: stretch; }
.claim-plan-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
    padding: 34px 28px 28px; text-align: center; display: flex; flex-direction: column;
    box-shadow: 0 1px 3px rgba(26,25,23,.05); transition: transform .15s ease, box-shadow .15s ease;
}
.claim-plan-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(26,25,23,.08); }
.claim-plan-card.is-featured { border-color: var(--accent); border-width: 2px; position: relative; box-shadow: 0 6px 24px rgba(31,92,76,.14); }
.claim-plan-icon { font-size: 26px; color: var(--accent); margin-bottom: 12px; }
.claim-plan-card.is-featured .claim-plan-icon { color: var(--orange); }
.claim-plan-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--orange); color: #fff; font-size: 11px; font-weight: 700;
    padding: 4px 14px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em;
}
.claim-plan-name { font-size: 14px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.claim-plan-price { font-size: 38px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.claim-plan-period { font-size: 13px; color: var(--text-2); margin-bottom: 20px; }
.claim-plan-divider { border: 0; border-top: 1px solid var(--border); margin: 0 0 14px; width: 100%; }
.claim-plan-includes { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 14px; }
.claim-plan-card.is-featured .claim-plan-includes { color: var(--orange); }
.claim-plan-features { list-style: none; margin: 0 0 24px; padding: 0; text-align: left; flex-grow: 1; display: flex; flex-direction: column; gap: 12px; }
.claim-plan-features li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.claim-plan-features li .material-icons { font-size: 16px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.claim-plan-card.is-featured .claim-plan-features li .material-icons { color: var(--orange); }
.claim-plans-cta-row { text-align: center; }
.claim-plans-note { text-align: center; color: var(--text-2); font-size: 12.5px; margin-top: 10px; }
@media (max-width: 700px) {
    .claim-plans { grid-template-columns: 1fr; gap: 16px; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
    .claim-plan-card { border-radius: 0; }
}

/* ── Footer ── */
.footer-companies-banner {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
    padding: 22px 24px; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 28px;
}
.footer-companies-banner p { margin: 0; font-weight: 600; font-size: 15px; color: var(--text); }
.footer-companies-banner .btn-apply { padding: 10px 20px; white-space: nowrap; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 24px; padding-top: 8px; padding-bottom: 32px; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-brand-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.footer-brand-logo .logo-badge { width: 34px; height: 34px; }
.footer-brand-name { font-family: 'Exo 2', sans-serif; font-style: italic; font-weight: 500; font-size: 21px; color: var(--accent-dark); margin: 0; }
.footer-brand-links { display: flex; flex-direction: column; gap: 8px; }
.footer-brand-links a { color: var(--text-2); font-size: 13.5px; text-decoration: none; }
.footer-brand-links a:hover { color: var(--accent); }
.footer-col h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 12px; }
.footer-col a { display: block; color: var(--text-2); font-size: 13.5px; margin-bottom: 9px; text-decoration: none; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom-bar { background: var(--accent); padding: 14px 0; }
.footer-bottom-bar .wrap { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.footer-bottom-bar a { color: #fff; font-size: 13px; text-decoration: none; }
.footer-bottom-bar a:hover { text-decoration: underline; }
.footer-bottom-bar p { margin: 0; font-size: 13px; color: rgba(255,255,255,.85); }
.footer-bottom-bar p a { color: #fff; text-decoration: underline; }
.footer-bottom-sep { color: rgba(255,255,255,.5); }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ── Games ── */
.games-launcher-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.game-launcher-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
    padding: 24px 18px; text-align: center; cursor: pointer; font-family: inherit;
    transition: box-shadow .15s, border-color .15s;
}
.game-launcher-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); border-color: var(--accent); }
.game-launcher-card .material-icons { font-size: 30px; color: var(--accent); margin-bottom: 10px; }
.game-launcher-card h3 { font-size: 15px; margin: 0 0 6px; }
.game-launcher-card p { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 0; }
@media (max-width: 760px) { .games-launcher-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .games-launcher-grid { grid-template-columns: 1fr; } }

.game-modal {
    position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
    padding: 20px; visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity .22s ease, visibility 0s linear .22s;
}
.game-modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .22s ease; }
.game-modal-backdrop { position: absolute; inset: 0; background: rgba(15,35,29,.55); }
.game-modal-box {
    position: relative; background: var(--bg); border-radius: 14px; padding: 26px;
    max-width: 460px; width: 100%; max-height: 90vh; overflow-y: auto;
    transform: translateY(16px) scale(.97); transition: transform .22s ease;
}
.game-modal.is-open .game-modal-box { transform: translateY(0) scale(1); }
.game-modal-close {
    position: absolute; top: 12px; right: 12px; background: transparent; border: none;
    color: var(--text-2); cursor: pointer; padding: 4px;
}
body.game-modal-open { overflow: hidden; }

.game-card { padding: 6px 0 0; }
.game-title { margin: 0 0 16px; font-size: 17px; }
.game-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 6px; }
.game-card-head h3 { margin: 0; font-size: 17px; }
.game-stat { font-size: 12.5px; color: var(--muted); font-weight: 600; }

.game-intro { text-align: center; padding: 8px 0 4px; }
.game-intro-desc { color: var(--text-2); font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.game-diff { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.diff-btn {
    border: 1px solid var(--border); background: var(--card-bg); color: var(--text-2);
    border-radius: 20px; padding: 7px 16px; font-size: 12.5px; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: background .15s, border-color .15s, color .15s;
}
.diff-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.game-intro-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.game-start-btn { padding: 11px 30px; }

.game-play-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 6px; }
.game-back-link { background: transparent; border: none; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; font-family: inherit; padding: 0; }
.game-btn, .game-btn-secondary {
    border-radius: 7px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer;
    font-family: inherit;
}
.game-btn { background: var(--accent); color: #fff; border: none; }
.game-btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text-2); margin-top: 12px; }
.game-win-msg { color: var(--accent); font-weight: 700; font-size: 14px; text-align: center; margin: 12px 0 0; }
.game-best { font-size: 12px; color: var(--muted); text-align: center; margin: 8px 0 0; }

.memory-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.memory-board.is-hard { grid-template-columns: repeat(6, 1fr); }
.memory-board.is-hard .memory-card .material-icons { font-size: 17px; }
.memory-card {
    aspect-ratio: 1; min-width: 0; border-radius: 8px; border: 1px solid var(--border); background: var(--bg);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.memory-card .material-icons { visibility: hidden; font-size: 22px; color: var(--accent); }
.memory-card.is-flipped, .memory-card.is-matched { background: var(--card-bg); border-color: var(--accent); }
.memory-card.is-flipped .material-icons, .memory-card.is-matched .material-icons { visibility: visible; }
.memory-card.is-matched { opacity: .5; cursor: default; }

.game-hint { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.scramble-word {
    font-size: 26px; font-weight: 700; letter-spacing: .1em; text-align: center;
    margin: 0 0 18px; color: var(--text);
}
.scramble-input-row { display: flex; gap: 8px; }
.scramble-input {
    flex: 1; border: 1px solid var(--border); border-radius: 7px; padding: 10px 12px;
    font-size: 14px; font-family: inherit; text-transform: uppercase;
}
.game-msg { font-size: 13.5px; font-weight: 600; margin: 12px 0 0; }
.game-msg.is-correct { color: var(--accent); }
.game-msg.is-wrong { color: #9C3B3B; }

.g2048-board {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: var(--border);
    border-radius: 8px; padding: 8px; touch-action: none; user-select: none;
}
.g2048-cell {
    aspect-ratio: 1; min-width: 0; border-radius: 6px; background: var(--bg); display: flex; align-items: center;
    justify-content: center; font-weight: 700; font-size: 18px; color: var(--text);
}
.g2048-cell.g2048-v2 { background: #EFEAE0; }
.g2048-cell.g2048-v4 { background: #ECE4D2; }
.g2048-cell.g2048-v8 { background: var(--accent); color: #fff; }
.g2048-cell.g2048-v16 { background: var(--accent-dark); color: #fff; }
.g2048-cell.g2048-v32,.g2048-cell.g2048-v64 { background: #C2570C; color: #fff; }
.g2048-cell.g2048-v128,.g2048-cell.g2048-v256,.g2048-cell.g2048-v512 { background: #9C3B3B; color: #fff; font-size: 16px; }
.g2048-cell.g2048-v1024,.g2048-cell.g2048-v2048 { background: #1A1917; color: #fff; font-size: 15px; }
.hide-on-touch { display: block; }

.sudoku-board {
    display: grid; grid-template-columns: repeat(9, 1fr); gap: 1px; background: var(--border);
    border: 2px solid var(--text); max-width: 360px; margin: 0 auto;
}
.sudoku-cell {
    aspect-ratio: 1; width: 100%; min-width: 0; box-sizing: border-box;
    text-align: center; border: none; background: var(--bg); font-size: 15px;
    font-family: inherit; font-weight: 600; color: var(--accent); padding: 0;
}
.sudoku-cell.is-given { color: var(--text); background: var(--card-bg); }
.sudoku-cell.border-r { border-right: 2px solid var(--text); }
.sudoku-cell.border-b { border-bottom: 2px solid var(--text); }
.sudoku-actions { display: flex; gap: 10px; justify-content: center; }
.sudoku-actions .game-btn-secondary { margin-top: 0; }

.apply-success { text-align: center; padding: 20px 0; }
.apply-success .material-icons { font-size: 44px; color: var(--success); margin-bottom: 10px; }
.apply-success p { color: var(--text-2); max-width: 420px; margin: 8px auto 0; }

/* ── Auth / account ── */
.auth-section { padding: 48px 0 60px; }
.auth-card {
    display: grid; grid-template-columns: 1fr 1fr; max-width: 880px; margin: 0 auto;
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--card-bg);
    box-shadow: 0 12px 32px rgba(20, 63, 52, .08);
}
.auth-panel-brand {
    position: relative; color: #fff; padding: 44px 36px; display: flex; flex-direction: column; justify-content: center; gap: 22px;
    background-image: linear-gradient(160deg, rgba(20,63,52,.88) 0%, rgba(15,40,33,.93) 100%), url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=900&q=70');
    background-size: cover; background-position: center;
}
.auth-panel-brand .logo-badge { width: 64px; height: 64px; border-radius: 7px; overflow: hidden; background: transparent; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.auth-panel-brand .logo-badge img { width: 100%; height: 100%; object-fit: contain; }
.auth-panel-brand h2 { font-family: 'Open Sans', sans-serif; font-size: 24px; font-weight: 600; margin: 0; line-height: 1.3; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.auth-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.auth-benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.88); line-height: 1.4; }
.auth-benefits .material-icons { font-size: 19px; color: #fff; flex-shrink: 0; }
.auth-panel-form { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.auth-panel-form h1 { font-family: 'Open Sans', sans-serif; font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.auth-panel-form .apply-sub { margin-bottom: 22px; }
.auth-panel-form .apply-form { gap: 14px; }

.google-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 11px 16px; border: 2px solid var(--border); border-radius: 7px;
    background: #fff; color: var(--text); font-family: 'Open Sans', sans-serif; font-weight: 500; font-size: 14.5px;
    cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s;
}
.google-btn:hover { background: var(--bg); border-color: var(--muted); }
.google-btn svg { flex-shrink: 0; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.auth-switch { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 18px; }
.auth-switch a { color: var(--accent); font-weight: 500; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

@media (max-width: 720px) {
    .auth-card { grid-template-columns: 1fr; max-width: 440px; }
    .auth-panel-brand { padding: 32px 28px; }
    .auth-panel-form { padding: 32px 28px; }
}
.apply-success-inline { display: flex; align-items: center; gap: 6px; color: var(--success); font-size: 13.5px; font-weight: 500; margin: -4px 0 16px; }
.apply-success-inline .material-icons { font-size: 18px; }
.profile-portfolio-link { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.profile-portfolio-link a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 500; text-decoration: none; font-size: 13.5px; }
.profile-portfolio-link a .material-icons { font-size: 16px; }

.alerts-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.alert-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 7px; }
.alert-item-info { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.alert-remove-btn { background: none; border: none; color: var(--muted); font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 6px 10px; border-radius: 6px; }
.alert-remove-btn:hover { color: #9C3B3B; background: #FBEAEA; }
.alerts-add-title { margin-top: 8px; }

/* ── Gate de conteúdo (vaga agregada, sem login) ── */
.content-gate-benefits { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0 0 20px; padding: 0; font-size: 13.5px; color: var(--text-2); }
.content-gate-benefits li { display: flex; align-items: center; justify-content: center; gap: 6px; }
.content-gate-benefits .material-icons { font-size: 16px; color: var(--accent); }
.content-gate-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Company profile ── */
.company-banner {
    height: 120px; border-radius: 7px 7px 0 0;
    background: linear-gradient(120deg, var(--accent), var(--accent-dark));
}
.company-header {
    background: var(--card-bg); border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 7px 7px; padding: 0 28px 24px; margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.company-header .avatar-lg { margin-top: -36px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
img.avatar { object-fit: cover; background: var(--card-bg); }

/* ── Editor visual do perfil da empresa (capa/logo com upload direto, tipo LinkedIn) ── */
.company-banner-editable, .avatar-editable { background-size: cover; background-position: center; position: relative; }
.photo-edit-btn {
    position: absolute; display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; background: var(--card-bg); color: var(--text);
    border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,.18); cursor: pointer;
    transition: background .15s, transform .1s;
}
.photo-edit-btn:hover { background: var(--bg); transform: scale(1.05); }
.photo-edit-btn .material-icons { font-size: 16px; }
.photo-edit-btn-cover { top: 10px; right: 10px; }
.photo-edit-btn-logo { bottom: -2px; right: -2px; width: 26px; height: 26px; }
.photo-edit-btn-logo .material-icons { font-size: 14px; }
.avatar-fallback-text { font-size: 26px; font-weight: 600; color: var(--muted); }
.company-name-field { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; font-weight: 500; color: var(--text-2); max-width: 320px; }
.company-name-field input {
    background: transparent; -webkit-appearance: none; appearance: none; border: none;
    border-bottom: 2px solid var(--border); border-radius: 0; padding: 6px 2px;
    font-family: inherit; font-size: 19px; font-weight: 700; color: var(--text); outline: none;
}
.company-name-field input:focus { border-bottom-color: var(--accent); }
.company-contact-list {
    list-style: none; margin: 10px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.company-contact-list li {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: var(--muted);
}
.company-contact-list .material-icons { font-size: 17px; flex-shrink: 0; }
.company-contact-list .brand-icon { width: 17px; height: 17px; flex-shrink: 0; }
.company-contact-list a { color: var(--accent-dark); text-decoration: none; }
.company-contact-list a:hover { text-decoration: underline; }
.company-map { border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }

/* ── Like + compartilhar social na página de notícia ── */
.news-social-row {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    padding: 14px 0; margin: 8px 0 18px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.news-like-btn { margin: 0; padding: 6px 10px; border-radius: 20px; }
.news-like-btn:hover { background: var(--card-bg); }
.news-share-buttons { display: flex; align-items: center; gap: 6px; }
.share-btn {
    display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border-radius: 50%; border: 1px solid var(--border); background: var(--card-bg); color: var(--muted);
    cursor: pointer; transition: color .15s, border-color .15s, transform .15s;
}
.share-btn .brand-icon { width: 15px; height: 15px; }
.share-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.news-share-count { display: flex; align-items: center; gap: 3px; font-size: 12.5px; color: var(--muted); margin-left: 4px; }
.news-share-count .material-icons { font-size: 15px; }
.company-map iframe { width: 100%; height: 260px; border: 0; display: block; }
.company-claim-cta {
    display: inline-block; margin-top: 12px; padding: 8px 16px; border-radius: 7px;
    background: var(--orange-bg); color: var(--orange); font-size: 13.5px; font-weight: 700;
    text-decoration: none;
}
.company-claim-cta:hover { background: var(--orange); color: #fff; }
.company-claim-dispute-link {
    display: inline-block; margin-top: 12px; font-size: 12.5px; color: var(--muted);
    text-decoration: underline; text-underline-offset: 2px;
}
.company-claim-dispute-link:hover { color: var(--text-2); }
.company-claimed-badge {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    color: var(--accent-dark); font-size: 13px; font-weight: 600;
}
.company-claimed-badge .material-icons { font-size: 17px; }
.form-success { background: #EAF6EE; color: #2E7D4F; padding: 10px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; }

.company-list { display: flex; flex-direction: column; gap: 12px; }
.company-card {
    display: flex; align-items: center; gap: 16px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 7px;
    padding: 20px 24px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: box-shadow .15s, transform .15s;
}
.company-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-1px); }
.company-card-main { flex: 1; min-width: 0; }
.company-card h2 { font-size: 17px; margin-bottom: 3px; }

/* ── Inspiração (capas geradas via IA, ligadas aos posts no Instagram) — seção fixa (sem
   colapso) no topo do feed, cards em miniatura pra caber muitos de uma vez ── */
.inspiration-section { margin-bottom: 22px; }
.inspiration-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.inspiration-section-head .material-icons { color: var(--accent); font-size: 20px; }
.inspiration-section-head h2 { font-size: 16px; margin: 0; }
.inspiration-intro { max-width: 640px; margin-bottom: 24px; color: var(--muted); }
.inspiration-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 10px; }
.inspiration-card {
    display: block; border-radius: 8px; overflow: hidden; background: var(--card-bg);
    border: 1px solid var(--border); border-top: 3px solid var(--card-accent, var(--accent));
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: box-shadow .15s, transform .15s; text-decoration: none; color: inherit;
}
.inspiration-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.1); transform: translateY(-2px); }
.inspiration-card.feed-pastel-0 { --card-accent: var(--accent); }
.inspiration-card.feed-pastel-1 { --card-accent: var(--amber); }
.inspiration-card.feed-pastel-2 { --card-accent: var(--rust); }
.inspiration-card.feed-pastel-3 { --card-accent: var(--orange); }
.inspiration-card.feed-pastel-4 { --card-accent: var(--sand); }
.inspiration-card.feed-pastel-5 { --card-accent: var(--olive); }
.inspiration-card.feed-pastel-6 { --card-accent: var(--clay); }
.inspiration-cover { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: #111; }
.inspiration-card-body { padding: 8px 9px; }
.inspiration-theme {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: var(--card-accent, var(--accent)); margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inspiration-caption { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inspiration-ig-link { display: flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.inspiration-ig-link .material-icons { font-size: 12px; }

/* ── Landing (prévia de vagas + feed + empresas) ── */
.landing { padding: 32px 0 60px; }
.landing-section { margin-bottom: 40px; }
.landing-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.landing-section-head h2 { font-size: 19px; margin: 0; }
.landing-section-head a { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--accent); flex-shrink: 0; }
.landing-section-head a .material-icons { font-size: 15px; }
.landing-section-head a:hover { color: var(--accent-dark); }

/* ── Skeleton (mask loading) pro que carrega à parte via JS, tipo "vagas perto de você" ── */
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.skeleton-section .job-list { display: flex; flex-direction: column; gap: 12px; }
.skeleton-line, .skeleton-card {
    background: var(--border); border-radius: 7px; animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-title { width: 220px; height: 19px; margin-bottom: 16px; }
.skeleton-card { height: 92px; }
.landing-cta { text-align: center; margin-top: 18px; }

.btn-outline {
    display: inline-block; border: 2px solid var(--accent); color: var(--accent-dark);
    background: var(--accent-bg); border-radius: 7px; padding: 11px 28px; font-family: 'Open Sans', sans-serif;
    font-weight: 600; font-size: 14px; transition: background .15s, color .15s;
}
.btn-outline:hover { background: var(--accent); color: #fff; }

/* ── Notícias de empregabilidade ── */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.news-card {
    display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 7px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: box-shadow .15s, transform .15s;
}
.news-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-1px); }
.news-card-img { height: 130px; background-size: cover; background-position: center; background-color: var(--accent-bg); }
.news-card-img-placeholder { display: flex; align-items: center; justify-content: center; color: var(--accent); }
.news-card-img-placeholder .material-icons { font-size: 32px; }
.news-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.news-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.news-card-body h3 { font-size: 15px; margin: 0 0 8px; line-height: 1.35; }
.news-card-summary { color: var(--text-2); font-size: 13.5px; margin: 0 0 10px; flex: 1; }
.news-card-source { color: var(--muted); font-size: 12px; }
.news-card-source-link {
    display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
    position: relative; z-index: 1; width: fit-content;
}
.news-card-source-link .material-icons { font-size: 13px; }
.news-card-source-link:hover { color: var(--accent); text-decoration: underline; }

.news-detail-img {
    height: 200px; border-radius: 9px; background-size: contain; background-repeat: no-repeat;
    background-position: center; background-color: var(--accent-bg); margin-bottom: 16px;
    border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,.06); transition: height .18s ease;
}
.news-detail-img.is-portrait { height: 400px; }
.news-image-credit { color: var(--muted); font-size: 11.5px; margin: -10px 0 16px; text-align: right; }
.news-ai-badge {
    display: inline-block; background: var(--accent-bg);
    color: var(--accent-dark); font-size: 11px; font-weight: 600; padding: 4px 11px;
    border-radius: 20px; margin: 0 0 10px;
}

/* Link discreto pra fonte original — nada de botão grande de CTA, é só uma atribuição */
.news-source-link {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 28px;
    color: var(--muted); font-size: 12.5px; text-decoration: none; border-bottom: 1px dotted var(--border);
    padding-bottom: 1px; transition: color .15s, border-color .15s;
}
.news-source-link .material-icons { font-size: 14px; }
.news-source-link:hover { color: var(--accent-dark); border-color: var(--accent); }

/* ── Notícias, cartão compacto horizontal (sidebar + mobile) ── */
.news-feed-list { display: flex; flex-direction: column; margin-bottom: 4px; }
.news-card-compact {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--border);
}
.news-card-compact:last-child { border-bottom: none; padding-bottom: 0; }
.news-card-compact:first-child { padding-top: 0; }
.news-card-compact-img {
    width: 64px; height: 64px; border-radius: 7px; flex-shrink: 0;
    background-size: cover; background-position: center; background-color: var(--accent-bg);
}
.news-card-compact-img-placeholder { display: flex; align-items: center; justify-content: center; color: var(--accent); }
.news-card-compact-img-placeholder .material-icons { font-size: 22px; }
.news-card-compact-body { min-width: 0; }
.news-card-compact-body h4 {
    font-size: 13.5px; font-weight: 600; margin: 0 0 4px; color: var(--text); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card-compact-meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }

/* ── Jogos & ferramentas (widget estilo "today's puzzles") ── */
.games-list { display: flex; flex-direction: column; gap: 2px; }
.game-item {
    display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-radius: 8px;
    text-decoration: none; transition: background .15s;
}
.game-item:hover { background: var(--bg); }
.game-icon {
    width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
    background: var(--accent-bg); color: var(--accent-dark);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.game-item-body { min-width: 0; flex: 1; }
.game-item-body h4 { font-size: 13.5px; margin: 0 0 2px; color: var(--text); }
.game-item-body span { font-size: 11.5px; color: var(--muted); }
.game-play { font-size: 10.5px; font-weight: 700; color: var(--accent); background: var(--accent-bg); padding: 3px 10px; border-radius: 10px; flex-shrink: 0; }

/* ── Layout de 2 colunas (conteúdo largo + coluna direita) ── */
/* Hero do topo da home — a antiga faixa de 1 linha virou um bloco maior com imagem de
   fundo, título, sublinha e CTA. */
.landing-hero {
    position: relative; color: #fff; overflow: hidden; background: var(--accent-dark);
}
.landing-hero-bg {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35;
}
.landing-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20, 63, 52, .88) 0%, rgba(31, 92, 76, .84) 100%);
}
.landing-hero-inner {
    position: relative; z-index: 1;
    max-width: 900px; margin: 0 auto; padding: 46px 20px 50px; text-align: center;
}
.landing-hero-kicker {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
    padding: 5px 14px; border-radius: 999px; margin-bottom: 18px;
}
.landing-hero-kicker .material-icons { font-size: 15px; }
.landing-hero-title {
    font-size: 30px; line-height: 1.2; font-weight: 800; color: #fff;
    margin: 0 0 12px; letter-spacing: -.02em;
}
.landing-hero-sub {
    font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, .93);
    max-width: 620px; margin: 0 auto 10px;
}
.landing-hero-more {
    display: inline-block; color: #fff; font-weight: 600; font-size: 14.5px;
    text-decoration: underline; text-underline-offset: 3px; margin-bottom: 24px;
}
.landing-hero-more:hover { color: rgba(255, 255, 255, .8); }
.landing-hero-cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--accent-dark); font-weight: 700; font-size: 15px;
    padding: 12px 26px; border-radius: 7px; text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    transition: transform .15s ease, box-shadow .15s ease;
}
.landing-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
.landing-hero-cta .material-icons { font-size: 19px; }
@media (max-width: 640px) {
    .landing-hero-title { font-size: 24px; }
    .landing-hero-sub { font-size: 15px; }
    .landing-hero-inner { padding: 38px 18px 42px; }
}

/* ── Nossos números (logo abaixo do hero, tirado do side-card pra ganhar destaque) ── */
.landing-stats { background: var(--card-bg); border-bottom: 1px solid var(--border); }
.landing-stats-inner {
    max-width: 900px; margin: 0 auto; padding: 28px 20px; text-align: center;
}
.landing-stats-title {
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); margin: 0 0 4px;
}
.landing-stats-intro { font-size: 14px; color: var(--text-2); margin: 0 0 18px; }
.landing-stats-grid {
    display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;
}
.landing-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.landing-stat .material-icons { color: var(--accent); font-size: 22px; margin-bottom: 2px; }
.landing-stat strong { font-size: 24px; font-weight: 800; color: var(--accent-dark); line-height: 1; }
.landing-stat span { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
    .landing-stats-grid { gap: 24px; }
}

.landing-category-group { margin-bottom: 20px; }
.landing-category-title { margin: 0 0 10px; font-size: 15px; }
.landing-category-title a {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--accent-dark); text-decoration: none;
}
.landing-category-title .material-icons { font-size: 16px; }

.layout-2col { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.side-col-main { min-width: 0; }
.side-col { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 16px; }

.side-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 7px;
    padding: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.side-card-title { font-size: 14.5px; margin-bottom: 14px; }
.side-empty { color: var(--muted); font-size: 13px; }

.side-stats { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.side-stat { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.side-stat .material-icons { color: var(--accent); font-size: 19px; }
.side-stat strong { color: var(--text); }

.jobs-country-banner {
    display: flex; align-items: center; gap: 10px;
    background: var(--accent-bg); color: var(--accent-dark);
    border-radius: 7px; padding: 12px 16px; margin-bottom: 16px;
    font-size: 14.5px;
}
.jobs-country-banner .material-icons { font-size: 20px; }
.jobs-country-banner strong { font-weight: 700; }

.near-you-change-btn {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 13px; font-weight: 500; color: var(--accent); text-decoration: underline;
}
.near-you-change-btn:hover { color: var(--accent-dark); }
.near-you-change-select {
    font-size: 13px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--card-bg); color: var(--text);
}

.company-mini-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.company-mini { display: flex; align-items: center; gap: 10px; }
.company-mini-info { display: flex; flex-direction: column; min-width: 0; }
.company-mini-name { font-size: 13.5px; font-weight: 500; color: var(--text); }
.company-mini-jobs { font-size: 12px; color: var(--muted); }
.side-card-footer-link { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--accent); padding-top: 12px; border-top: 1px solid var(--border); }
.side-card-footer-link .material-icons { font-size: 15px; }

.ad-slot {
    display: block; text-decoration: none; overflow: hidden; padding: 0; position: relative;
    transition: transform .15s, box-shadow .15s;
}
.ad-slot:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.ad-slot-img { width: 100%; height: 90px; object-fit: cover; display: block; }
.ad-slot-tag {
    position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.55); color: #fff;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 7px; border-radius: 4px;
}
.ad-slot-label { display: block; padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--text); }

@media (max-width: 900px) {
    .layout-2col { grid-template-columns: 1fr; }
    .side-col { position: static; }
    .side-col-right { order: 1; }
    .side-col-main { order: 2; }
    /* Na home, "vagas perto de você" tem que continuar em cima no mobile — só a busca de
       vagas (filtros) e o feed se beneficiam de mostrar a coluna lateral primeiro. */
    .landing .side-col-main { order: 1; }
    .landing .side-col-right { order: 2; }

    .menu-toggle { display: flex; }
    .site-name { font-size: 17px; }

    .site-nav {
        position: fixed; top: 0; left: 0; height: 100vh; width: 80%; max-width: 300px;
        margin-left: 0; background: var(--card-bg); flex-direction: column; align-items: stretch; gap: 2px;
        padding: 84px 16px 24px; box-shadow: 4px 0 24px rgba(0,0,0,.15);
        transform: translateX(-100%); transition: transform .25s ease; z-index: 50;
    }
    .site-nav.open { transform: translateX(0); }
    .site-nav a {
        flex-direction: row; justify-content: flex-start; gap: 12px;
        padding: 12px 10px; font-size: 14.5px; border-radius: 8px; border-bottom: none;
    }
    .site-nav a .material-icons { font-size: 20px; }
    .site-nav a .icon-bookmark { width: 20px; height: 20px; }
    .nav-label { display: inline; }
    .nav-divider { width: auto; height: 1px; align-self: stretch; margin: 6px 0; }
    /* No mobile o logout mora dentro do menu hamburger, não isolado no topo do cabeçalho. */
    .nav-logout-desktop { display: none; }
    .site-nav .nav-logout-mobile { display: flex; }

    /* Dropdowns viram itens de menu: Feed vira link puro (Notícias fica logo abaixo) e
       Sobre vira acordeão que revela as 3 opções quando aberto. */
    .nav-dd { width: 100%; }
    .site-nav .nav-dd-toggle {
        flex-direction: row; justify-content: flex-start; gap: 12px;
        padding: 12px 10px; font-size: 14.5px; border-radius: 8px; width: 100%;
    }
    .site-nav .nav-dd-toggle .material-icons { font-size: 20px; }
    .nav-dd-menu {
        position: static; transform: none; box-shadow: none; border: none; background: transparent;
        padding: 0; margin: 0 0 4px 30px; min-width: 0; display: none;
    }
    .nav-dd.open .nav-dd-menu { display: block; }
    .site-nav .nav-dd-menu a { padding: 10px 12px; font-size: 14px; }
    /* Feed e Work: no mobile o caret some e os itens do menu (Notícias / Freelance)
       ficam sempre visíveis como itens separados (o link duplicado é escondido). */
    .nav-dd-feed .dd-caret, .nav-dd-work .dd-caret { display: none; }
    .nav-dd-feed .nav-dd-menu, .nav-dd-work .nav-dd-menu { display: block; }
    .site-nav .nav-dd-menu .dd-hide-mobile { display: none; }
}

/* Card de vaga em grid organizado. Usa @container (largura real da coluna
   .job-list, ver container-type acima) em vez de @media (largura da JANELA)
   porque o card quebra (palavra partida na tag, botões flutuando sobre o
   título) sempre que a COLUNA fica estreita — o que acontece tanto em telas
   pequenas quanto em layouts com sidebar numa tela grande. Achata
   job-card/job-card-main/job-card-side em grid items diretos do wrap, pra
   poder colocar a data ao lado do save e o CTA (só seta) na mesma linha das
   tags, sem depender da ordem no DOM. */
@container joblist (max-width: 780px) {
    .job-card-wrap {
        display: grid;
        /* minmax(0, 1fr), não só 1fr: sem o mínimo travado em 0, uma tag longa
           (ex: "Dusseldorf, North Rhine-Westphalia, Germany") força a coluna a
           crescer pro tamanho do conteúdo, empurrando a coluna dos botões
           (save/arrow) pra fora do card. */
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas:
            "icon   date     save"
            "icon   title    title"
            "icon   company  company"
            "icon   extra    extra"
            "icon   tags     arrow";
        column-gap: 12px; row-gap: 4px; align-items: center;
        background: var(--card-bg); border: 1px solid var(--border); border-left: 3px solid var(--border);
        border-radius: 7px; border-top-left-radius: 0; border-bottom-left-radius: 0;
        padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
    }
    /* .job-card (o <a> clicável) vira um subgrid cobrindo TODA a área do wrap.
       Antes era display:contents, que tira o elemento da árvore de renderização
       por completo (Puppeteer confirmou: "Node is either not clickable or not
       an Element") — cliques em qualquer espaço "vazio" do card (linha de
       categoria/salário quando o job não tem, gaps entre linhas, etc.) caíam
       direto no .job-card-wrap (uma div sem link nenhum) e o painel de detalhe
       simplesmente não reagia, mantendo a vaga aberta anteriormente. Com
       subgrid o <a> ocupa fisicamente a área inteira, então qualquer clique
       dentro do card acerta ele ou um filho seu. */
    /* O .job-card continua com o padding/borda/sombra da regra base (pensada pro
       card desktop antigo, não resetada aqui) — isso empurrava o conteúdo do
       subgrid pra dentro do próprio .job-card (que já é o subgrid inteiro,
       cobrindo o wrap 1/-1), deslocando cada item por uma quantia diferente
       dependendo de que borda da caixa do subgrid ele tocava. É isso que
       desalinhava a data ("Sep 24") por cima do ícone. Quem desenha o cartão
       visualmente agora é o .job-card-wrap; o <a> vira só uma camada
       transparente por cima, então zera tudo isso aqui. */
    .job-card {
        display: grid; grid-column: 1 / -1; grid-row: 1 / -1;
        grid-template-columns: subgrid; grid-template-rows: subgrid;
        padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none;
    }
    .job-card-main, .job-card-side { display: contents; }

    .job-card-icon { grid-area: icon; align-self: start; width: 44px; height: 44px; }
    .job-card-date { grid-area: date; margin: 0; justify-self: start; }
    .job-card-save.feed-like-btn { grid-area: save; position: static; justify-self: end; align-self: center; }
    .job-card h2 { grid-area: title; margin: 0; min-width: 0; }
    .job-company { grid-area: company; margin: 0; min-width: 0; }
    .job-card-corner-category, .job-card-side .job-salary { grid-area: extra; margin: 0; justify-self: start; }
    .job-card-side .job-salary { justify-self: end; }
    .job-tags { grid-area: tags; align-items: center; min-width: 0; }
    .job-cta-btn {
        grid-area: arrow; justify-self: end; align-self: center; margin: 0;
        padding: 6px; border-radius: 50%; gap: 0;
    }
    .job-cta-btn .job-cta-label { display: none; }
    .job-cta-btn .material-icons { font-size: 17px; }
}

@media (max-width: 640px) {
    .topbar-wrap { gap: 8px; }
    .lang-switch { margin-left: 8px; padding-left: 8px; }
}

/* ── Cookie policy modal (footer) ── */
.cookie-modal-overlay {
    position: fixed; inset: 0; background: rgba(15, 20, 18, .6);
    z-index: 10001; display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.cookie-modal-overlay.cm-open { opacity: 1; pointer-events: auto; }
.cookie-modal {
    background: var(--card-bg); border-radius: 14px; max-width: 560px; width: 100%;
    max-height: 84vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.28);
    transform: translateY(28px) scale(.97); opacity: 0;
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
.cookie-modal-overlay.cm-open .cookie-modal { transform: translateY(0) scale(1); opacity: 1; }
.cookie-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    padding: 20px 22px; color: #fff; flex-shrink: 0;
}
.cookie-modal-header h2 { margin: 0; font-size: 19px; color: #fff; }
.cookie-modal-close {
    background: rgba(255,255,255,.15); border: none; color: #fff; border-radius: 50%;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; transition: background .15s;
}
.cookie-modal-close:hover { background: rgba(255,255,255,.28); }
.cookie-modal-body { padding: 22px; overflow-y: auto; }
.cookie-modal-body > p { font-size: 14px; color: var(--text-2); line-height: 1.7; margin: 0 0 16px; }
.cookie-modal-terms-btn {
    display: flex; align-items: center; gap: 8px; background: var(--accent-bg); color: var(--accent-dark);
    border: none; border-radius: 8px; padding: 10px 16px; font-family: inherit; font-size: 13.5px;
    font-weight: 600; cursor: pointer; transition: background .15s;
}
.cookie-modal-terms-btn:hover, .cookie-modal-terms-btn.active { background: var(--accent); color: #fff; }
.cookie-modal-terms {
    margin-top: 16px; font-size: 12.5px; color: var(--text-2); line-height: 1.75;
    max-height: 320px; overflow-y: auto;
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 14px 16px;
}
.cookie-modal-terms h4 { margin: 12px 0 5px; font-size: 11.5px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; }
.cookie-modal-terms h4:first-child { margin-top: 0; }
.cookie-modal-terms p { margin: 0 0 10px; }

/* ── Onboarding modal (papel de conta + boas-vindas + Termos) ── */
#onboardingOverlay {
    position: fixed; inset: 0; background: rgba(15, 20, 18, .6);
    z-index: 10001; display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
#onboardingOverlay.ob-open { opacity: 1; pointer-events: auto; }
.ob-modal {
    background: var(--card-bg); border-radius: 14px; max-width: 540px; width: 100%;
    box-shadow: 0 24px 64px rgba(0,0,0,.28); overflow: hidden;
    transform: translateY(28px) scale(.97); opacity: 0;
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
#onboardingOverlay.ob-open .ob-modal { transform: translateY(0) scale(1); opacity: 1; }
.ob-slides-wrapper { overflow: hidden; }
.ob-slides { display: flex; transition: transform .42s cubic-bezier(.4,0,.2,1); }
.ob-slides.at-2 { transform: translateX(-100%); }
.ob-slides.at-3 { transform: translateX(-200%); }
.ob-slides.at-4 { transform: translateX(-300%); }
.ob-slides.at-5 { transform: translateX(-400%); }
.ob-slide { flex: 0 0 100%; min-width: 0; }
.ob-header { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); padding: 28px 28px 22px; color: #fff; }
.ob-header h2 { margin: 0 0 6px; font-size: 21px; color: #fff; }
.ob-header p { margin: 0; font-size: 13px; opacity: .9; }
.ob-body { padding: 22px 28px 4px; }
.ob-footer { padding: 16px 28px 22px; display: flex; align-items: center; gap: 10px; }
.ob-dots { display: flex; gap: 6px; align-items: center; flex: 1; }
.ob-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: background .25s; }
.ob-dot.active { background: var(--accent); }

.ob-role-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.ob-role-btn {
    position: relative;
    display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
    background: var(--bg); border: 2px solid var(--border); border-radius: 10px;
    padding: 16px 44px 16px 18px; font-family: inherit; transition: border-color .15s, background .15s;
}
.ob-role-btn strong { display: block; font-size: 14.5px; color: var(--text); margin-bottom: 2px; }
.ob-role-btn div { display: flex; flex-direction: column; }
.ob-role-btn div span { font-size: 12.5px; color: var(--muted); }
.ob-role-check { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 20px !important; color: transparent !important; transition: color .15s; }
.ob-role-btn.selected .ob-role-check { color: var(--role-color, var(--accent)) !important; }

.ob-role-btn-seeker { --role-color: var(--accent); --role-bg: var(--accent-bg); }
.ob-role-btn-company { --role-color: var(--amber); --role-bg: var(--amber-bg); }
.ob-role-btn-recruiter { --role-color: var(--rust); --role-bg: var(--rust-bg); }
.ob-role-btn .material-icons:first-child { font-size: 26px; color: var(--role-color); flex-shrink: 0; }
.ob-role-btn:hover { border-color: var(--role-color); background: var(--role-bg); }
.ob-role-btn.selected { border-color: var(--role-color); background: var(--role-bg); }

.ob-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ob-step { display: flex; align-items: flex-start; gap: 14px; }
.ob-step-num {
    width: 26px; height: 26px; border-radius: 50%; background: var(--accent-bg); color: var(--accent);
    font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
}
.ob-step-text strong { font-size: 13.5px; color: var(--text); display: block; margin-bottom: 2px; }
.ob-step-text span { font-size: 12px; color: var(--muted); line-height: 1.5; }

.ob-gdpr-text {
    font-size: 12.5px; color: var(--text-2); line-height: 1.75;
    max-height: 260px; overflow-y: auto;
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 14px 16px; margin-bottom: 14px; scroll-behavior: smooth;
}
.ob-gdpr-text h4 { margin: 12px 0 5px; font-size: 11.5px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; }
.ob-gdpr-text h4:first-child { margin-top: 0; }
.ob-gdpr-text p { margin: 0 0 10px; }
.ob-scroll-hint {
    display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); font-weight: 600;
    background: #FBF3D8; border: 1px solid #E9D98A; border-radius: 6px;
    padding: 7px 12px; margin-bottom: 10px; transition: opacity .4s ease;
}
.ob-scroll-hint.hidden { opacity: 0; pointer-events: none; }
.ob-check-row {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    background: var(--accent-bg); border: 1px solid var(--accent); border-radius: 8px; padding: 12px 14px;
}
.ob-check-row.disabled-row { opacity: .45; cursor: default; }
.ob-check-row input[type=checkbox] { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); }
.ob-check-row label { font-size: 12.5px; font-weight: 600; color: var(--accent-dark); cursor: pointer; line-height: 1.5; }

.ob-btn-primary {
    background: var(--accent); color: #fff; border: none; border-radius: 7px;
    padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
    font-family: 'Open Sans', sans-serif; transition: background .15s, opacity .15s;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.ob-btn-primary:hover:not(:disabled) { background: var(--accent-dark); }
.ob-btn-primary:disabled { background: var(--muted); cursor: not-allowed; }
.ob-btn-back {
    background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 500;
    cursor: pointer; font-family: 'Open Sans', sans-serif; padding: 6px 0;
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.ob-btn-back:hover { color: var(--text-2); }

/* ── Onboarding slide 4: upload de CV — botão grande e colorido de propósito (é o caminho
   "fácil"/recomendado), "pular" fica bem apagado abaixo pra não competir visualmente. ── */
.ob-footer-cv { justify-content: flex-end; }
.ob-slide-flex { display: flex; flex-direction: column; }
.ob-body-center { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 220px; }
.ob-body-relative { position: relative; }
.ob-cv-idle { width: 100%; }
.ob-cv-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
    width: 100%; padding: 16px 20px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff; font-size: 15px; font-weight: 700; font-family: 'Open Sans', sans-serif;
    box-shadow: 0 6px 18px var(--accent-bg); transition: transform .15s, box-shadow .15s;
}
.ob-cv-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(31,92,76,.28); }
.ob-cv-btn .material-icons { font-size: 20px; }
.ob-cv-error { margin: 10px 0 0; font-size: 12.5px; color: var(--rust); text-align: center; }
.ob-cv-skip {
    display: block; margin: 14px auto 0; background: none; border: none; cursor: pointer;
    font-size: 12.5px; font-weight: 500; color: var(--muted); font-family: 'Open Sans', sans-serif;
    text-decoration: underline; text-underline-offset: 2px;
}
.ob-cv-skip:hover { color: var(--text-2); }
.ob-cv-mask {
    position: absolute; inset: 0; background: var(--card-bg);
    display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    padding: 20px; z-index: 5;
}
.ob-cv-mask:not([hidden]) { display: flex; }
.ob-cv-mask p { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-2); text-align: center; }
.ob-cv-success { flex-direction: column; align-items: center; gap: 8px; padding: 24px 0; text-align: center; }
.ob-cv-success:not([hidden]) { display: flex; }
.ob-cv-success .material-icons { font-size: 40px; color: var(--success); }
.ob-cv-success p { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.ob-cv-manual { flex-direction: column; gap: 12px; }
.ob-cv-manual:not([hidden]) { display: flex; }
.ob-cv-manual-title { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.ob-cv-manual label { display: flex; flex-direction: column; gap: 4px; }
.ob-cv-manual input, .ob-cv-manual textarea {
    border: 1.5px solid var(--border); border-radius: 7px; padding: 9px 11px;
    font-size: 13.5px; font-family: 'Open Sans', sans-serif; resize: vertical;
}
.ob-cv-manual input:focus, .ob-cv-manual textarea:focus { outline: none; border-color: var(--accent); }

/* ── Perfil: fonte Ubuntu escopada, labels em badge, checkboxes, blocos repetíveis ── */
.profile-box { font-family: 'Ubuntu', sans-serif; }
.profile-box .btn-apply,
.profile-box .cv-autofill-btn,
.profile-box .portfolio-preview-btn,
.profile-box .repeat-add-btn { font-family: 'Ubuntu', sans-serif; }

.field-badge {
    display: block; font-size: 11.5px; font-weight: 700; color: var(--accent);
    text-transform: uppercase; letter-spacing: .6px;
}
.repeat-header .field-badge { font-size: 13px; }

.apply-form textarea.auto-grow { resize: none; overflow: hidden; }

.checkbox-row { display: flex; flex-wrap: wrap; gap: 20px; margin: -6px 0 2px; }
.styled-checkbox {
    position: relative; display: flex; align-items: center; gap: 9px; cursor: pointer;
    font-size: 13.5px; font-weight: 500; color: var(--text-2);
}
.styled-checkbox .sr-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox-box {
    width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 5px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: border-color .15s, background .15s;
}
.checkbox-box .material-icons { font-size: 14px; color: #fff; opacity: 0; transition: opacity .1s; }
.sr-checkbox:checked + .checkbox-box { background: var(--accent); border-color: var(--accent); }
.sr-checkbox:checked + .checkbox-box .material-icons { opacity: 1; }
.sr-checkbox:focus-visible + .checkbox-box { outline: 2px solid var(--accent); outline-offset: 2px; }

.repeat-section { display: flex; flex-direction: column; gap: 12px; }
.repeat-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.repeat-add-btn {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    background: var(--accent-bg); border: 2px solid var(--accent); border-radius: 7px;
    padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--accent-dark);
}
.repeat-add-btn:hover { background: rgba(31, 92, 76, .16); }
.repeat-add-btn .material-icons { font-size: 16px; }
.repeat-row {
    position: relative; display: flex; flex-direction: column; gap: 8px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 14px 40px 14px 14px;
}
.repeat-row-grid { display: grid; grid-template-columns: 1.4fr 1.4fr 1fr; gap: 8px; }
.repeat-row-grid-edu { grid-template-columns: 1.4fr 1.4fr .7fr; }
.repeat-row input {
    background: transparent; border: none; border-bottom: 2px solid var(--border);
    border-radius: 0; padding: 6px 2px; font-family: inherit; font-size: 13.5px;
    color: var(--text); outline: none;
}
.repeat-row input:focus { border-bottom-color: var(--accent); }
.repeat-row textarea {
    background: transparent; border: none; border-bottom: 2px solid var(--border);
    border-radius: 0; padding: 6px 2px; font-family: inherit; font-size: 13.5px;
    color: var(--text); outline: none; resize: none; overflow: hidden;
}
.repeat-row textarea:focus { border-bottom-color: var(--accent); }
.repeat-remove-btn {
    position: absolute; top: 10px; right: 10px; background: none; border: none;
    cursor: pointer; color: var(--muted); padding: 3px; display: flex; border-radius: 4px;
}
.repeat-remove-btn:hover { color: var(--text); background: var(--border); }
.repeat-remove-btn .material-icons { font-size: 16px; }
@media (max-width: 640px) {
    .repeat-row-grid, .repeat-row-grid-edu { grid-template-columns: 1fr; }
}

.portfolio-entry { margin-bottom: 16px; }
.portfolio-entry:last-child { margin-bottom: 0; }
.portfolio-entry-title { margin: 0 0 4px; font-size: 14px; color: var(--text); }

/* ── Vagas relacionadas (embaixo do detalhe da vaga, e na página de vaga expirada) ──
   Agora são cards de partials/job-cards em modo compacto (grid + noImage + hideSave +
   hideDate): assim herdam o clique que abre o painel de detalhe ao lado em vez de navegar.
   Os estilos .related-job-* abaixo continuam valendo pras páginas onde o card antigo
   ainda é gerado por JS (ver server.js / partials/company.ejs). */
.related-jobs { margin-top: 36px; }
.related-jobs h3 { margin-bottom: 4px; }
.related-jobs-sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.related-jobs h3 ~ .related-jobs-grid { margin-top: 16px; }
.related-jobs-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px;
}
/* Modo compacto do .job-card (related-jobs, rodapé do detalhe): sem a capa do setor, sem
   a data do topo e sem o botão de salvar — o card fica na altura de 2 linhas de texto. */
.job-card-wrap.is-compact .job-card { padding: 14px; border-left-width: 3px; }
.job-card-wrap.is-compact .job-card .job-card-main { flex: none; width: 100%; }
.job-card-wrap.is-compact .job-card h2 {
    font-size: 14px; line-height: 1.3; margin-bottom: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.job-card-wrap.is-compact .job-card .job-company { font-size: 12.5px; margin-bottom: 8px; }
.job-card-wrap.is-compact .job-card .job-card-side { margin-top: 0; text-align: left; }
.job-card-wrap.is-compact .job-card .job-cta-btn { display: none; }
.related-job-card {
    display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .15s, transform .15s;
}
.related-job-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.1); transform: translateY(-2px); }
.related-job-cover {
    display: block; width: 100%; aspect-ratio: 16 / 10; background-size: cover;
    background-position: center; background-color: var(--accent-bg);
}
.related-job-body { padding: 12px 14px 14px; }
.related-job-body h4 {
    font-size: 14px; font-weight: 600; margin: 0 0 4px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.related-job-company { font-size: 12.5px; color: var(--text-2); margin: 0 0 8px; }
.related-job-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.related-job-tag {
    display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.related-job-tag .material-icons { font-size: 13px; flex-shrink: 0; }
.related-job-date { font-size: 11px; color: var(--muted); flex-shrink: 0; }

.empty-state-notfound { padding: 40px 20px 24px; }

/* ── Páginas institucionais (sobre, termos, contato) ── */
.institutional-hero { position: relative; color: #fff; overflow: hidden; background: var(--accent-dark); }
.institutional-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.institutional-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20, 63, 52, .9) 0%, rgba(31, 92, 76, .84) 100%);
}
.institutional-hero-inner {
    position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 66px 20px 62px; text-align: center;
}
.institutional-hero-kicker {
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255, 255, 255, .85); margin-bottom: 12px; display: block;
}
.institutional-hero h1 {
    font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 40px; line-height: 1.15; color: #fff; margin: 0 0 12px;
}
.institutional-hero-sub {
    font-size: 17px; color: rgba(255, 255, 255, .93); max-width: 640px; margin: 0 auto; line-height: 1.55;
}
.institutional-hero--short .institutional-hero-inner { padding: 56px 20px 52px; }
.institutional-hero--short h1 { font-size: 34px; }

.article-wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.article-lede {
    font-size: 19px; line-height: 1.72; color: var(--text); text-align: center;
    margin: 46px auto 6px; padding: 0 6px;
}

.about-section {
    display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: center; margin: 56px 0;
}
.about-section--reverse .about-section-media { order: 2; }
.about-section-media img {
    width: 100%; border-radius: 16px; display: block;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .12);
}
.about-section-kicker {
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 10px;
}
.about-section h2 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 28px; margin: 0 0 14px; }
.about-section p { font-size: 16px; line-height: 1.75; color: var(--text-2); margin: 0; }

.about-quote { max-width: 760px; margin: 58px auto; padding: 0 20px; position: relative; }
.about-quote blockquote { margin: 0; padding: 0 48px; }
.about-quote .quote-mark {
    font-family: 'Lora', Georgia, serif; font-weight: 700; font-size: 110px; line-height: 0;
    color: var(--accent); opacity: .22; display: block; height: 34px;
}
.about-quote blockquote p {
    font-family: 'Lora', Georgia, serif; font-style: italic; font-weight: 500;
    font-size: 25px; line-height: 1.45; color: var(--text); margin: 0 0 10px;
}
.about-quote cite { font-style: normal; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.about-values { max-width: 960px; margin: 58px auto 0; padding: 0 20px; }
.about-values-title {
    font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 30px; text-align: center; margin: 0 0 30px;
}
.about-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.about-value {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 24px 20px;
}
.about-value .material-icons { font-size: 26px; color: var(--accent); margin-bottom: 10px; }
.about-value h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; }
.about-value p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0; }

.about-cta { background: var(--accent-dark); color: #fff; text-align: center; margin-top: 68px; padding: 54px 20px; }
.about-cta .wrap { max-width: 640px; }
.about-cta h2 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 30px; color: #fff; margin: 0 0 12px; }
.about-cta p { font-size: 16.5px; color: rgba(255, 255, 255, .9); max-width: 560px; margin: 0 auto 26px; line-height: 1.6; }
.about-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--accent-dark); font-weight: 700; font-size: 15px;
    padding: 12px 28px; border-radius: 999px; text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18); transition: transform .15s ease, box-shadow .15s ease;
}
.about-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .24); }
.about-cta-btn .material-icons { font-size: 19px; }

/* ── Página /history (linha do tempo pública, 2026-10-07) — reusa .article-wrap +
   tokens de cor já existentes (sem inventar paleta nova); as 6 categorias de mudança
   (feature/fix/perf/security/infra/content) usam as cores de setor que já existem
   pros cards de vaga, só reaproveitadas aqui com outro significado. */
.history-wrap { padding-top: 40px; padding-bottom: 60px; }
.history-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px; background: var(--border); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden; margin-bottom: 44px;
}
.history-stat { background: var(--card-bg); padding: 18px 20px; }
.history-stat-num { font-family: 'Lora', Georgia, serif; font-size: 22px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.history-stat-label { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.history-milestones {
    background: var(--accent-bg); border-radius: 14px; padding: 28px 30px; margin-bottom: 52px;
}
.history-milestones h2 { font-family: 'Lora', Georgia, serif; font-size: 21px; font-weight: 600; margin: 0 0 6px; color: var(--accent-dark); }
.history-milestones-note { font-size: 13.5px; color: var(--text-2); margin: 0 0 20px; }
.history-milestones-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.history-milestone-col h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin: 0 0 12px; }
.history-milestone-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.history-milestone-list li { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; }
.history-milestone-n { font-family: 'Lora', Georgia, serif; font-weight: 700; color: var(--accent-dark); min-width: 68px; flex-shrink: 0; }
.history-milestone-date { color: var(--text-2); }
.history-milestone-live { padding-top: 7px; margin-top: 2px; border-top: 1px dashed var(--border); }
.history-milestone-live .history-milestone-n { color: var(--accent); }
@media (max-width: 640px) { .history-milestones-grid { grid-template-columns: 1fr; } }

.history-month { margin-bottom: 46px; }
.history-month-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.history-month-head h2 { font-family: 'Lora', Georgia, serif; font-size: 22px; font-weight: 600; margin: 0; }
.history-month-sub { font-size: 13px; color: var(--muted); }

.history-timeline { position: relative; padding-left: 24px; }
.history-timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1.5px; background: var(--border); }
.history-entry { position: relative; padding-bottom: 20px; }
.history-entry:last-child { padding-bottom: 0; }
.history-entry::before {
    content: ''; position: absolute; left: -24px; top: 5px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 0 0 1.5px var(--border);
}
.history-entry-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 5px; }
.history-entry-date { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.history-entry-body { font-size: 15px; color: var(--text-2); line-height: 1.6; max-width: 64ch; }
.history-entry-body strong { color: var(--text); }

.history-tag {
    display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
    letter-spacing: .02em; padding: 2px 9px; border-radius: 20px; white-space: nowrap;
}
.history-tag--feature  { color: var(--accent-dark); background: var(--accent-bg); }
.history-tag--fix      { color: var(--rust); background: var(--rust-bg); }
.history-tag--perf     { color: var(--olive); background: var(--olive-bg); }
.history-tag--security { color: var(--clay); background: var(--clay-bg); }
.history-tag--infra    { color: var(--sand); background: var(--sand-bg); }
.history-tag--content  { color: var(--amber); background: var(--amber-bg); }

@media (max-width: 480px) {
    .history-timeline { padding-left: 18px; }
    .history-entry::before { left: -18px; }
}

.terms-wrap { max-width: 780px; margin: 0 auto; padding: 46px 20px 8px; }
.copyright-box {
    background: var(--accent-bg); border: 1px solid var(--border); border-left: 4px solid var(--accent);
    border-radius: 12px; padding: 20px 24px; margin-bottom: 34px;
}
.copyright-box h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 8px; color: var(--accent-dark); display: flex; align-items: center; gap: 6px; }
.copyright-box h3 .material-icons { font-size: 18px; }
.copyright-box p { font-size: 14px; color: var(--text-2); line-height: 1.7; margin: 0; }
.terms-body h4 {
    font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 17px;
    margin: 30px 0 8px; color: var(--accent-dark);
}
.terms-body p { font-size: 15px; line-height: 1.78; color: var(--text-2); margin: 0 0 14px; }
.terms-body ul { margin: 0 0 14px; padding-left: 20px; }
.terms-body li { font-size: 15px; line-height: 1.7; color: var(--text-2); margin-bottom: 8px; }
.terms-body .cookie-table { width: 100%; border-collapse: collapse; margin: 4px 0 18px; font-size: 14px; }
.terms-body .cookie-table th, .terms-body .cookie-table td { text-align: left; padding: 10px 12px; border: 1px solid var(--border); vertical-align: top; }
.terms-body .cookie-table th { background: var(--accent-bg); color: var(--accent-dark); font-weight: 700; }
.terms-body .cookie-table code { background: var(--accent-bg); padding: 2px 6px; border-radius: 4px; font-size: 13px; }

.contact-wrap { max-width: 640px; margin: 0 auto; padding: 54px 20px 20px; text-align: center; }
.contact-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
    padding: 38px 30px; box-shadow: 0 10px 26px rgba(0, 0, 0, .06);
}
.contact-card > .material-icons { font-size: 40px; color: var(--accent); }
.contact-card h2 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 26px; margin: 14px 0 8px; }
.contact-card p { color: var(--text-2); font-size: 15px; line-height: 1.7; margin: 0 0 20px; }
.contact-email {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 18px; font-weight: 700; color: var(--accent-dark); text-decoration: none;
    padding: 11px 24px; border: 1px solid var(--border); border-radius: 999px; background: var(--accent-bg);
}
.contact-email:hover { background: var(--accent); color: #fff; }
.contact-note { font-size: 13px; color: var(--muted); margin: 18px 0 0 !important; }
.contact-note a { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.contact-note a:hover { text-decoration: underline; }
.contact-note a .material-icons { font-size: 16px; }

@media (max-width: 700px) {
    .institutional-hero h1 { font-size: 30px; }
    .institutional-hero-sub { font-size: 15.5px; }
    .about-section { grid-template-columns: 1fr; gap: 20px; margin: 44px 0; }
    .about-section--reverse .about-section-media { order: 0; }
    .about-section-media { margin-bottom: 6px; }
    .about-section h2 { font-size: 24px; }
    .about-values-grid { grid-template-columns: 1fr 1fr; }
    .about-values-title { font-size: 26px; }
    .about-quote blockquote { padding: 0 12px; }
    .about-quote blockquote p { font-size: 20px; }
    .article-lede { font-size: 17px; margin-top: 36px; }
}

/* Prep: cursos gratuitos, bolsas, fomento de pesquisa (ver db/sync-opportunities.js) */
.prep-hero { margin-bottom: 20px; }
.prep-hero h1 { margin: 0 0 4px; font-size: 24px; }
.prep-hero-sub { color: var(--text-2); font-size: 14.5px; margin: 0; }
.prep-filters-bar { margin: 0 0 16px; padding: 4px 4px 4px; }
.prep-type-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.prep-type-tab {
    display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px;
    border: 1px solid var(--border); font-size: 13.5px; font-weight: 500; color: var(--text-2);
    background: var(--card-bg);
}
.prep-type-tab:hover { background: var(--accent-bg); color: var(--accent-dark); }
.prep-type-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.prep-type-count {
    font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 10px;
    background: rgba(0,0,0,.08);
}
.prep-type-tab.active .prep-type-count { background: rgba(255,255,255,.25); }
.prep-card-icon {
    display: flex; align-items: center; justify-content: center; background: var(--accent-bg); color: var(--accent);
}
.prep-card-icon .material-icons { font-size: 26px; }
.prep-card-icon-course { background: var(--accent-bg); color: var(--accent); }
.prep-card-icon-scholarship { background: var(--sand-bg); color: var(--sand); }
.prep-card-icon-grant { background: rgba(47,125,90,.1); color: var(--success); }
.prep-card-icon-research { background: var(--rust-bg); color: var(--rust); }
.prep-card-summary {
    color: var(--text-2); font-size: 13.5px; margin: 0 0 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prep-tag-deadline { background: var(--amber-bg); color: var(--amber); }
.prep-deadline {
    display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
    color: var(--amber); background: var(--amber-bg); padding: 2px 8px; border-radius: 6px;
}
.prep-deadline .material-icons { font-size: 14px; }
.prep-deadline-big { font-size: 13.5px; padding: 5px 12px; }
.prep-deadline-free { color: var(--success); background: rgba(47,125,90,.1); }
.prep-item-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.prep-actions-row { display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.prep-apply-btn { margin-top: 0; }
.prep-share-buttons { margin-top: 14px; }
.prep-source-note { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.prep-related-cover {
    display: flex; align-items: center; justify-content: center; background: var(--accent-bg);
    color: var(--accent);
}
.prep-related-cover .material-icons { font-size: 26px; }

/* ── Vagas da empresa: busca ao vivo + paginação (evita renderizar centenas de cards) ── */
.company-jobs-count {
    display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 20px;
    background: var(--accent-bg); color: var(--accent-dark); font-size: 13px; font-weight: 700;
    vertical-align: middle;
}
.company-jobs-search {
    display: flex; align-items: center; gap: 8px; margin: 12px 0 18px; padding: 10px 14px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
}
.company-jobs-search .material-icons { color: var(--accent); font-size: 20px; }
.company-jobs-search input {
    flex: 1; border: none; outline: none; background: transparent; font-family: 'Open Sans', sans-serif;
    font-size: 14.5px; color: inherit;
}
.company-jobs-pagination {
    display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px;
}
.company-jobs-pagination .btn-outline {
    padding: 8px 16px; font-size: 13.5px; display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer;
}
.company-jobs-pagination .btn-outline .material-icons { font-size: 18px; }
.company-jobs-pagination .btn-outline:disabled {
    opacity: .4; cursor: default; background: var(--accent-bg); color: var(--accent-dark);
}
.company-jobs-page-info { font-size: 13.5px; color: var(--muted); white-space: nowrap; }

/* ── Check-in "como está indo sua busca?" — card discreto, nunca modal automático ── */
.job-checkin-card {
    display: flex; align-items: center; gap: 12px; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 20px;
}
.job-checkin-card > .material-icons { color: var(--accent); font-size: 22px; flex-shrink: 0; }
.job-checkin-card p { flex: 1; margin: 0; font-size: 14px; color: var(--text); }
.job-checkin-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.job-checkin-card-actions .btn-outline { padding: 8px 16px; font-size: 13px; cursor: pointer; }
.job-checkin-dismiss {
    background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px;
    border-radius: 50%; display: flex;
}
.job-checkin-dismiss:hover { background: rgba(0,0,0,.06); color: var(--text); }
.track-yesno-row button.is-active { outline: 2px solid var(--accent); outline-offset: 2px; }
#jobCheckinFeedbackBox { margin-top: 16px; text-align: left; }
#jobCheckinFeedbackBox .review-comment-input { margin-bottom: 12px; }
#jobCheckinSubmitBtn { width: 100%; }
#jobCheckinThanksView .btn-outline { display: inline-block; margin-top: 6px; text-decoration: none; }
@media (max-width: 640px) {
    .job-checkin-card { flex-wrap: wrap; }
}

/* ── Overlay do painel: só no mobile (no desktop o detalhe ocupa a 2ª coluna). ── */
.job-detail-overlay { display: none; }

/* ── Painel de detalhe da vaga (estilo LinkedIn) — lista à esquerda, vaga à direita ──
   Preenchido por public/js/job-detail-pane.js com o fragmento ?embed=1 de views/job.ejs.
   Desktop: 2ª coluna ao lado da lista (com o painel aberto a sidebar some), entrando
   deslizando da direita (mesma animação do mobile). Mobile: entra deslizando da direita
   por cima do conteúdo, abaixo do top nav (que continua visível), com a barra de voltar
   no topo do painel.
   O marcador (id="jobDetailPane") vive no partial job-detail-pane.ejs; nas páginas que
   não o incluem o próprio JS cria o painel na hora (ver ensurePane). */
.job-detail-pane { display: none; }

.job-detail-loading { display: flex; align-items: center; justify-content: center; padding: 64px 0; }

/* O fragmento (?embed=1) vem sem header/rodapé: some com o respiro de página, com a sidebar
   de anúncios (que só faz sentido no layout cheio) e com a borda do card (o painel já tem a
   sua). O back-link some porque o painel usa a própria seta de voltar na barra do topo. */
.job-detail-embed { padding: 0; }
.job-detail-embed .layout-2col { display: block; max-width: none; padding: 0; margin: 0; }
.job-detail-embed .side-col-right { display: none; }
.job-detail-embed .job-card-unified { border: none; border-radius: 0; box-shadow: none; }
.job-detail-embed .back-link { display: none; }

/* Dentro do painel o detalhe é só o miolo: sem a sidebar do site, sem repetir o wrap. */
.job-detail-pane .side-col-right { display: none; }
.job-detail-pane .layout-2col { grid-template-columns: 1fr; gap: 0; }
.job-detail-pane .job-detail { padding: 0; }
.job-detail-pane .wrap { max-width: none; padding: 0; }

/* Barra do topo do painel (título + voltar) — visível nos dois layouts. */
.job-detail-pane-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}
.job-detail-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0; padding: 0;
    background: transparent; border: none; border-radius: 50%;
    color: var(--text); cursor: pointer;
}
.job-detail-back:hover { background: var(--accent-bg); color: var(--accent); }
.job-detail-pane-bar-title {
    font-weight: 600; font-size: 14px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Vagas relacionadas também dentro do painel: card menor e em 2 colunas, já que o painel
   é estreito (é a última seção do detalhe, então ajuda a fechar o painel). */
.job-detail-pane .related-jobs { margin-top: 26px; }
.job-detail-pane .related-jobs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .job-detail-pane .related-jobs-grid { grid-template-columns: 1fr; } }

/* Card selecionado na lista (o que está aberto no painel). --accent-bg é translúcido
   (rgba, 9% de opacidade) — por isso o fundo de verdade mora só no .job-card-wrap (a
   caixa de fora, ver comentário abaixo): o .job-card em si fica TRANSPARENTE quando
   selecionado, deixando a cor do wrap aparecer por trás. Sem isso, as duas caixas
   (wrap + card, ambas pintadas da mesma rgba translúcida) empilhavam a mesma camada
   duas vezes onde coincidem — ficava um verde mais escuro "por dentro" (onde as duas
   se sobrepõem) e mais claro "por fora" (onde só o wrap aparece, ex: o padding extra
   do layout compacto) — 2026-10-07. */
.job-card.is-selected { background: transparent; border-color: var(--accent-bg); }
/* No layout em grid (coluna estreita, ver @container joblist), quem tem o padding/borda
   arredondada é o .job-card-wrap, não o .job-card (que aí é um subgrid cobrindo só a
   área de conteúdo) — sem isso a cor de seleção não chegava até as bordas do card. */
.job-card-wrap:has(.job-card.is-selected) {
    background: var(--accent-bg);
    /* border cinza + a faixa colorida por setor (border-left) ficavam com um tom
       diferente do preenchimento pastel — uniformiza tudo numa cor só. */
    border-color: var(--accent-bg);
}

/* No painel, o scroll fica por conta da própria página (o painel tem a altura toda do
   conteúdo, "aberto inteiro") — a barra de rolagem interna sai de cena. A regra fica fora
   dos @media porque vale nos dois layouts (desktop e mobile). */
.job-detail-pane-body { scrollbar-width: none; -ms-overflow-style: none; }
.job-detail-pane-body::-webkit-scrollbar { width: 0; height: 0; }

@media (min-width: 901px) {
    /* Painel aberto: 2 colunas (lista + detalhe) e a sidebar dá lugar ao detalhe. */
    .layout-2col.pane-open { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.3fr); }
    .layout-2col.pane-open > .side-col-right { display: none; }
    .job-detail-pane.is-open {
        display: flex; flex-direction: column;
        /* Fixo na tela (sticky) com altura travada e rolagem própria: ao clicar num
           card mais embaixo da lista, o painel mostra a vaga do topo sem que a
           página inteira precise rolar pra acompanhar uma descrição longa — só a
           lista à esquerda rola livre. A barra de rolagem interna fica invisível
           (ver .job-detail-pane-body mais acima), então parece "sem scroll". */
        position: sticky; top: calc(var(--header-h, 85px) + 12px);
        max-height: calc(100vh - var(--header-h, 85px) - 24px);
        background: var(--card-bg); border: 1px solid var(--border); border-radius: 7px;
        box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow: hidden;
        animation: job-pane-slide-in .3s cubic-bezier(.4, 0, .2, 1) both;
        /* 2026-09-29: sem z-index nenhum aqui, um elemento qualquer da página com z-index
           explícito (ex: .landing-hero-inner, z-index:1, na home) ganhava da regra de
           empilhamento mesmo com o painel virando position:fixed via JS (job-detail-pane.js
           trava a posição real pra contornar o mesmo bug de overflow do body/sticky já
           documentado nesta folha) — o texto do hero "vazava" por cima do painel aberto.
           Mesmo valor da gaveta mobile (.job-detail-pane, abaixo), que já usa 45. */
        z-index: 45;
    }
    .job-detail-pane.is-open .job-detail-pane-body {
        flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    }
    /* Mesma animação, espelhada no RTL (onde o painel entra pela esquerda). */
    html[dir="rtl"] .job-detail-pane.is-open { animation-name: job-pane-slide-in-rtl; }

    /* Fechar (clicar no X): mesma caixa do .is-open (posição/tamanho já travados por JS
       nesse momento, ver lockPanePosition em job-detail-pane.js), só troca a entrada
       (keyframe) por uma TRANSIÇÃO de saída — opacidade + leve deslizamento — em vez do
       display:none instantâneo que a regra base (.job-detail-pane, lá em cima) aplicaria
       na hora se a classe simplesmente sumisse. O JS segura essa classe por ~260ms antes
       de soltar a trava de posição e esconder de vez (cleanup() em job-detail-pane.js) —
       2026-10-08, pedido do usuário: fechar "com animação slide fade out, não hide simples". */
    .job-detail-pane.is-closing {
        display: flex; flex-direction: column;
        background: var(--card-bg); border: 1px solid var(--border); border-radius: 7px;
        box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow: hidden; z-index: 45;
        opacity: 0; transform: translateX(18px);
        transition: opacity .26s ease, transform .26s cubic-bezier(.4, 0, .2, 1);
    }
    html[dir="rtl"] .job-detail-pane.is-closing { transform: translateX(-18px); }
    .job-detail-pane .job-card-body { padding: 20px 22px 26px; }
    .job-detail-pane .job-banner { padding: 24px 20px; }
    .job-detail-pane .job-banner-glass h1 { font-size: 19px; }
}

/* Animação de entrada do painel no desktop: desliza da direita (antes só aparecia). */
@keyframes job-pane-slide-in {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes job-pane-slide-in-rtl {
    from { opacity: 0; transform: translateX(-32px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 900px) {
    /* Trava o scroll da lista por baixo enquanto o painel ocupa a tela. */
    body.job-pane-open { overflow: hidden; }
    .job-detail-overlay {
        display: block; position: fixed;
        top: var(--header-h, 60px); right: 0; bottom: 0; left: 0;
        background: rgba(15, 15, 12, .35); z-index: 44;
        opacity: 0; pointer-events: none; transition: opacity .3s ease;
    }
    .job-detail-overlay.open { opacity: 1; pointer-events: auto; }
    .job-detail-pane {
        display: block; position: fixed;
        top: var(--header-h, 60px); right: 0; bottom: 0; left: auto;
        width: min(560px, 100vw); z-index: 45;
        background: var(--bg);
        box-shadow: -14px 0 34px rgba(0,0,0,.18);
        transform: translateX(100%); visibility: hidden;
        /* Ao fechar, a visibilidade só muda depois do slide pra animação aparecer. */
        transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .32s;
        will-change: transform;
    }
    .job-detail-pane.is-open {
        transform: translateX(0); visibility: visible;
        transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
    }
    .job-detail-pane-bar { position: sticky; top: 0; z-index: 3; }
    .job-detail-pane-body { position: absolute; top: 55px; right: 0; bottom: 0; left: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .job-detail-pane .wrap { padding: 14px 16px 44px; }
    .job-detail-pane .job-banner { padding: 20px 16px; }
    .job-detail-pane .job-banner-glass h1 { font-size: 19px; }
    /* O rodapé do site fica embaixo do painel — esconde pra não rolar junto. */
    body.job-pane-open .site-footer { display: none; }
}

/* ── Painel em páginas sem o markup do partial (home, empresa, etc.) ──
   O job-detail-pane.js cria o painel em runtime nessas páginas; sem .layout-2col pra
   virar 2ª coluna, ele vira uma gaveta fixa que desliza da direita em qualquer largura
   (mesma UX do mobile). As regras são declaradas por último de propósito: empatadas em
   especificidade, são estas que valem no desktop. */
.job-detail-pane-floating { display: block; }
@media (min-width: 901px) {
    /* Mesma filosofia do painel inline (.job-detail-pane.is-open acima): sem altura fixa
       nem scroll interno — cresce com o conteúdo e quem rola é a página, "aberto inteiro",
       sem barra de rolagem própria. position:absolute (não fixed) pra sair do fluxo mas
       acompanhar o scroll do documento; a barra título+voltar (sticky) fica presa no topo
       da viewport enquanto o painel estiver na tela, do mesmo jeito que no inline.
       Anima com transform+opacity ao abrir/fechar — mesma mecânica do slide do mobile,
       não um simples show/hide. */
    /* Seletor composto (.job-detail-pane + .job-detail-pane-floating) de propósito: precisa
       empatar em especificidade com ".job-detail-pane.is-open" (regra inline acima) pra
       vencer no desempate por ordem — com um seletor de 1 classe só, o position:sticky do
       inline vencia mesmo aqui declarado depois. */
    /* 2026-09-29: era position:absolute pra "acompanhar o scroll do documento" — mas
       body{overflow-x:hidden} (lá em cima) faz o navegador ativar overflow-y:auto no body
       por baixo do pano (mesma pegadinha já documentada pro header e pro painel inline
       nesta mesma folha). Isso faz o body virar um scroll container PRÓPRIO, e um
       position:absolute sem ancestral posicionado passa a se referenciar ao documento raiz,
       não ao scroll interno do body — o painel "grudava" perto do topo da página (por cima
       do hero) em vez de acompanhar o card clicado mais embaixo. Fixed resolve do mesmo
       jeito que já resolve pro header e pra gaveta mobile: sempre relativo à viewport, com
       altura e rolagem próprias (igual à gaveta mobile, só mais larga). */
    .job-detail-pane.job-detail-pane-floating {
        display: flex; flex-direction: column;
        position: fixed; top: calc(var(--header-h, 85px) + 12px); right: 0; left: auto;
        width: min(760px, 62vw); max-height: calc(100vh - var(--header-h, 85px) - 24px);
        border-radius: 7px; border: 1px solid var(--border);
        background: var(--card-bg); box-shadow: 0 1px 2px rgba(0,0,0,.04);
        overflow: hidden; z-index: 45;
        transform: translateX(32px); opacity: 0; visibility: hidden;
        transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .3s;
    }
    .job-detail-pane.job-detail-pane-floating.is-open {
        transform: translateX(0); opacity: 1; visibility: visible;
        transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
    }
    html[dir="rtl"] .job-detail-pane.job-detail-pane-floating { right: auto; left: 0; transform: translateX(-32px); }
    html[dir="rtl"] .job-detail-pane.job-detail-pane-floating.is-open { transform: translateX(0); }
    /* Com o painel fixed e altura travada, quem rola é só o corpo (igual ao inline acima) —
       a barra título+voltar gruda no topo DO PRÓPRIO painel (top:0), não mais da viewport. */
    .job-detail-pane.job-detail-pane-floating .job-detail-pane-body {
        flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    }
    .job-detail-pane-floating .job-detail-pane-bar { position: sticky; top: 0; z-index: 3; border-radius: 6px 6px 0 0; }
    /* Escurece o fundo atrás da gaveta também no desktop (antes só existia no mobile —
       .job-detail-overlay tinha display:none aqui, então clicar fora não fechava nada e não
       havia contraste nenhum com o conteúdo por trás). */
    .job-detail-overlay.job-detail-overlay-floating {
        display: block; position: fixed;
        top: var(--header-h, 85px); right: 0; bottom: 0; left: 0;
        background: rgba(15, 15, 12, .35); z-index: 44;
        opacity: 0; pointer-events: none; transition: opacity .3s ease;
    }
    .job-detail-overlay.job-detail-overlay-floating.open { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .job-detail-pane, .job-detail-pane.is-open { transition: none; animation: none; }
    .job-detail-overlay { transition: none; }
}


/* Learning Center: guia gratuito de carreira (getajob e futuras páginas) */
.lc-kicker { display: inline-block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin-bottom: 8px; }
.lc-sections { margin-top: 40px; }
.lc-section { margin: 0 0 40px; padding-bottom: 32px; border-bottom: 1px solid var(--border, #e6e2d8); }
.lc-section:last-child { border-bottom: none; }
.lc-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.lc-section-icon { font-size: 22px; color: var(--accent); }
.lc-section-head h2 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 21px; margin: 0; }
.lc-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lc-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.lc-checklist li .material-icons { font-size: 18px; color: var(--accent); margin-top: 2px; flex-shrink: 0; }

/* Learning Center: módulo de diagnóstico interativo (quiz) */
.lc-quiz { padding: 24px 0 60px; min-height: 320px; }
.lc-welcome { text-align: center; max-width: 520px; margin: 40px auto; }
.lc-welcome h1 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 30px; margin: 10px 0 12px; }
.lc-welcome-sub { color: var(--text-2); font-size: 16px; line-height: 1.6; margin: 0 0 28px; }
.lc-question-screen { max-width: 620px; margin: 0 auto; }
.lc-question-screen h2 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 24px; margin: 0 0 8px; }
.lc-question-sub { color: var(--text-2); font-size: 14.5px; margin: 0 0 24px; }
.lc-back-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--text-2); font-size: 13.5px; cursor: pointer; padding: 0; margin-bottom: 18px; }
.lc-back-btn .material-icons { font-size: 16px; }
.lc-options { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.lc-option-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; width: 100%; padding: 16px 18px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-size: 15.5px; color: var(--text-1, #22201b); cursor: pointer; transition: border-color .15s, background .15s; }
.lc-option-btn:hover { border-color: var(--accent); background: #FBFAF6; }
.lc-option-btn .material-icons { font-size: 18px; color: var(--accent); flex-shrink: 0; }
.lc-processing { text-align: center; padding: 60px 0; color: var(--text-2); }
.lc-spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; margin: 0 auto 16px; animation: lc-spin .8s linear infinite; }
@keyframes lc-spin { to { transform: rotate(360deg); } }
.lc-result { max-width: 620px; margin: 0 auto; }
.lc-result h2 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 26px; margin: 10px 0 12px; }
.lc-result-body { font-size: 16px; line-height: 1.7; color: var(--text-2); margin: 0 0 26px; }
.lc-tips-label { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); margin: 0 0 12px; }
.lc-locked-cta { margin-top: 34px; padding: 22px 24px; border: 1px dashed var(--border); border-radius: 12px; background: #FBFAF6; }
.lc-locked-cta h3 { font-size: 16px; margin: 0 0 6px; }
.lc-locked-cta p { font-size: 14px; color: var(--text-2); line-height: 1.55; margin: 0 0 14px; }
.lc-btn-locked { padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--text-2); font-size: 13.5px; cursor: not-allowed; }
.lc-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.lc-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.lc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.lc-btn-secondary { background: none; border: none; color: var(--text-2); font-size: 14px; text-decoration: underline; cursor: pointer; padding: 0; }
@media (max-width: 640px) {
  .lc-welcome h1 { font-size: 24px; }
  .lc-question-screen h2 { font-size: 20px; }
  .lc-option-btn { padding: 14px; font-size: 14.5px; }
  .lc-result h2 { font-size: 21px; }
}

/* Learning Center: v2 (2026-09-24) — imagem, transições e botões menos arredondados */
.lc-quiz { padding: 8px 0 60px; min-height: 420px; }
.lc-stage { position: relative; overflow: hidden; }
.lc-panel { width: 100%; opacity: 0; transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .32s ease; }
.lc-panel:not(.lc-panel-active) { position: absolute; top: 0; left: 0; }
.lc-panel-enter-forward { transform: translateX(36px); }
.lc-panel-enter-back { transform: translateX(-36px); }
.lc-panel-active { transform: translateX(0); opacity: 1; position: relative; }
.lc-panel-exit-forward { transform: translateX(-36px); opacity: 0; }
.lc-panel-exit-back { transform: translateX(36px); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .lc-panel { transition: opacity .2s ease; }
  .lc-panel-enter-forward, .lc-panel-enter-back { transform: none; }
}

.lc-hero-image {
  width: 100%; max-width: 420px; height: 220px; margin: 0 auto 26px;
  border-radius: 20px; background-size: cover; background-position: center;
  background-color: #E7E2D3;
  background-image: linear-gradient(135deg, #E7E2D3 0%, #DCE7DF 100%);
}
.lc-welcome { text-align: center; max-width: 520px; margin: 20px auto 40px; }
.lc-welcome h1 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 30px; margin: 10px 0 12px; }
.lc-welcome-sub { color: var(--text-2); font-size: 16px; line-height: 1.6; margin: 0 0 28px; }

/* Progresso */
.lc-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.lc-progress-track { flex: 1; height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; }
.lc-progress-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s ease; }
.lc-progress-label { font-size: 12.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }

.lc-question-screen { max-width: 620px; margin: 0 auto; }
.lc-question-screen h2 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 24px; margin: 0 0 8px; }
.lc-question-sub { color: var(--text-2); font-size: 14.5px; margin: 0 0 24px; }
.lc-back-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--text-2); font-size: 13.5px; cursor: pointer; padding: 0; margin-bottom: 18px; }
.lc-back-btn .material-icons { font-size: 16px; }

/* Opções: cartão com marcador redondo pequeno (não é o botão inteiro que é pill) */
.lc-options { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.lc-option-btn {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px 18px; border: 1.5px solid var(--border); border-radius: 12px;
  background: #fff; font-size: 15.5px; color: var(--text-1, #22201b); cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.lc-option-btn:hover { border-color: var(--accent); background: #FBFAF6; transform: translateX(2px); }
.lc-option-btn:active { transform: translateX(2px) scale(.99); }
.lc-option-bullet { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; transition: border-color .15s, background .15s; }
.lc-option-btn:hover .lc-option-bullet { border-color: var(--accent); background: var(--accent); }
.lc-option-label { flex: 1; line-height: 1.4; }
.lc-option-arrow { font-size: 18px; color: var(--border); flex-shrink: 0; transition: color .15s, transform .15s; }
.lc-option-btn:hover .lc-option-arrow { color: var(--accent); transform: translateX(2px); }

.lc-processing { text-align: center; padding: 60px 0; color: var(--text-2); }
.lc-spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; margin: 0 auto 16px; animation: lc-spin .8s linear infinite; }
@keyframes lc-spin { to { transform: rotate(360deg); } }

.lc-result { max-width: 620px; margin: 0 auto; }
.lc-result h2 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 26px; margin: 10px 0 12px; }
.lc-result-body { font-size: 16px; line-height: 1.7; color: var(--text-2); margin: 0 0 26px; }
.lc-tips-label { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); margin: 0 0 12px; }
.lc-locked-cta { margin-top: 34px; padding: 22px 24px; border: 1px dashed var(--border); border-radius: 14px; background: #FBFAF6; }
.lc-locked-cta h3 { font-size: 16px; margin: 0 0 6px; }
.lc-locked-cta p { font-size: 14px; color: var(--text-2); line-height: 1.55; margin: 0 0 14px; }
.lc-btn-locked { padding: 10px 18px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text-2); font-size: 13.5px; cursor: not-allowed; }
.lc-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }

/* Botão primário: quadrado com cantos suaves, não mais pill (pedido 2026-09-24) */
.lc-btn-primary {
  display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: #fff;
  padding: 14px 24px; border-radius: 12px; font-size: 15.5px; font-weight: 600; text-decoration: none;
  border: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s;
}
.lc-btn-primary .material-icons { font-size: 18px; transition: transform .15s; }
.lc-btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(31, 92, 76, .28); }
.lc-btn-primary:hover .material-icons { transform: translateX(3px); }
.lc-btn-secondary { background: none; border: none; color: var(--text-2); font-size: 14px; text-decoration: underline; cursor: pointer; padding: 0; }

@media (max-width: 640px) {
  .lc-hero-image { height: 160px; border-radius: 16px; }
  .lc-welcome h1 { font-size: 24px; }
  .lc-question-screen h2 { font-size: 20px; }
  .lc-option-btn { padding: 14px; font-size: 14.5px; }
  .lc-result h2 { font-size: 21px; }
}

/* Learning Center: v2 (2026-09-24) — imagem, transições e botões menos arredondados */
.lc-quiz { padding: 8px 0 60px; min-height: 420px; }
.lc-stage { position: relative; overflow: hidden; }
.lc-panel { width: 100%; opacity: 0; transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .32s ease; }
.lc-panel:not(.lc-panel-active) { position: absolute; top: 0; left: 0; }
.lc-panel-enter-forward { transform: translateX(36px); }
.lc-panel-enter-back { transform: translateX(-36px); }
.lc-panel-active { transform: translateX(0); opacity: 1; position: relative; }
.lc-panel-exit-forward { transform: translateX(-36px); opacity: 0; }
.lc-panel-exit-back { transform: translateX(36px); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .lc-panel { transition: opacity .2s ease; }
  .lc-panel-enter-forward, .lc-panel-enter-back { transform: none; }
}

.lc-hero-image {
  width: 100%; max-width: 420px; height: 220px; margin: 0 auto 26px;
  border-radius: 20px; background-size: cover; background-position: center;
  background-color: #E7E2D3;
  background-image: linear-gradient(135deg, #E7E2D3 0%, #DCE7DF 100%);
}
.lc-welcome { text-align: center; max-width: 520px; margin: 20px auto 40px; }
.lc-welcome h1 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 30px; margin: 10px 0 12px; }
.lc-welcome-sub { color: var(--text-2); font-size: 16px; line-height: 1.6; margin: 0 0 28px; }

/* Progresso */
.lc-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.lc-progress-track { flex: 1; height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; }
.lc-progress-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s ease; }
.lc-progress-label { font-size: 12.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }

.lc-question-screen { max-width: 620px; margin: 0 auto; }
.lc-question-screen h2 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 24px; margin: 0 0 8px; }
.lc-question-sub { color: var(--text-2); font-size: 14.5px; margin: 0 0 24px; }
.lc-back-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--text-2); font-size: 13.5px; cursor: pointer; padding: 0; margin-bottom: 18px; }
.lc-back-btn .material-icons { font-size: 16px; }

/* Opções: cartão com marcador redondo pequeno (não é o botão inteiro que é pill) */
.lc-options { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.lc-option-btn {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px 18px; border: 1.5px solid var(--border); border-radius: 12px;
  background: #fff; font-size: 15.5px; color: var(--text-1, #22201b); cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.lc-option-btn:hover { border-color: var(--accent); background: #FBFAF6; transform: translateX(2px); }
.lc-option-btn:active { transform: translateX(2px) scale(.99); }
.lc-option-bullet { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; transition: border-color .15s, background .15s; }
.lc-option-btn:hover .lc-option-bullet { border-color: var(--accent); background: var(--accent); }
.lc-option-label { flex: 1; line-height: 1.4; }
.lc-option-arrow { font-size: 18px; color: var(--border); flex-shrink: 0; transition: color .15s, transform .15s; }
.lc-option-btn:hover .lc-option-arrow { color: var(--accent); transform: translateX(2px); }

.lc-processing { text-align: center; padding: 60px 0; color: var(--text-2); }
.lc-spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; margin: 0 auto 16px; animation: lc-spin .8s linear infinite; }
@keyframes lc-spin { to { transform: rotate(360deg); } }

.lc-result { max-width: 620px; margin: 0 auto; }
.lc-result h2 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 26px; margin: 10px 0 12px; }
.lc-result-body { font-size: 16px; line-height: 1.7; color: var(--text-2); margin: 0 0 26px; }
.lc-tips-label { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); margin: 0 0 12px; }
.lc-locked-cta { margin-top: 34px; padding: 22px 24px; border: 1px dashed var(--border); border-radius: 14px; background: #FBFAF6; }
.lc-locked-cta h3 { font-size: 16px; margin: 0 0 6px; }
.lc-locked-cta p { font-size: 14px; color: var(--text-2); line-height: 1.55; margin: 0 0 14px; }
.lc-btn-locked { padding: 10px 18px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text-2); font-size: 13.5px; cursor: not-allowed; }
.lc-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }

/* Botão primário: quadrado com cantos suaves, não mais pill (pedido 2026-09-24) */
.lc-btn-primary {
  display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: #fff;
  padding: 14px 24px; border-radius: 12px; font-size: 15.5px; font-weight: 600; text-decoration: none;
  border: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s;
}
.lc-btn-primary .material-icons { font-size: 18px; transition: transform .15s; }
.lc-btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(31, 92, 76, .28); }
.lc-btn-primary:hover .material-icons { transform: translateX(3px); }
.lc-btn-secondary { background: none; border: none; color: var(--text-2); font-size: 14px; text-decoration: underline; cursor: pointer; padding: 0; }

@media (max-width: 640px) {
  .lc-hero-image { height: 160px; border-radius: 16px; }
  .lc-welcome h1 { font-size: 24px; }
  .lc-question-screen h2 { font-size: 20px; }
  .lc-option-btn { padding: 14px; font-size: 14.5px; }
  .lc-result h2 { font-size: 21px; }
}

/* Learning Center: biblioteca de guias (grade de botões + modal) — 2026-09-24 */
.lc-guides-section { max-width: 760px; margin: 20px auto 60px; padding: 0 20px; }
.lc-guides-title { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 24px; margin: 0 0 6px; text-align: center; }
.lc-guides-sub { text-align: center; color: var(--text-2); font-size: 14.5px; margin: 0 0 28px; }
.lc-guides-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lc-guide-btn {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
  cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
}
.lc-guide-btn:hover { border-color: var(--accent); background: #FBFAF6; transform: translateY(-1px); }
.lc-guide-icon { font-size: 22px; color: var(--accent); flex-shrink: 0; }
.lc-guide-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lc-guide-title { font-size: 14.5px; font-weight: 700; color: var(--text-1, #22201b); }
.lc-guide-teaser { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.lc-guide-arrow { font-size: 18px; color: var(--border); flex-shrink: 0; }

/* Modal */
.lc-modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 24, 20, .45); z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .2s ease; padding: 0;
}
.lc-modal-overlay.lc-modal-visible { opacity: 1; }
.lc-modal {
  background: #fff; width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto;
  border-radius: 20px 20px 0 0; padding: 32px 28px 40px; position: relative;
  transform: translateY(24px); transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.lc-modal-overlay.lc-modal-visible .lc-modal { transform: translateY(0); }
.lc-modal-close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; display: flex; align-items: center;
  justify-content: center; cursor: pointer; color: var(--text-2);
}
.lc-modal-close:hover { border-color: var(--accent); color: var(--accent); }
.lc-modal-head { display: flex; align-items: center; gap: 12px; margin: 0 32px 20px 0; }
.lc-modal-icon { font-size: 26px; color: var(--accent); }
.lc-modal-head h2 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 22px; margin: 0; }
.lc-modal-section { margin-bottom: 20px; }
.lc-modal-section h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.lc-modal-section p { font-size: 14.5px; line-height: 1.65; color: var(--text-2); margin: 0; }
.lc-example-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.lc-example-card { padding: 14px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; }
.lc-example-bad { background: #FBEEEC; }
.lc-example-good { background: #EAF3EE; }
.lc-example-label { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.lc-example-bad .lc-example-label { color: #A23E33; }
.lc-example-good .lc-example-label { color: var(--accent-dark); }
.lc-example-label .material-icons { font-size: 14px; }
.lc-example-card p { margin: 0; color: var(--text-1, #22201b); }

@media (min-width: 640px) {
  .lc-modal-overlay { align-items: center; }
  .lc-modal { border-radius: 20px; }
}
@media (max-width: 640px) {
  .lc-guides-grid { grid-template-columns: 1fr; }
  .lc-example-compare { grid-template-columns: 1fr; }
}


/* Learning Center: cartão de estatísticas de candidatura no perfil (2026-09-24) */
.stats-box .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 16px; }
.stat-tile { text-align: center; padding: 14px 8px; border: 1px solid var(--border); border-radius: 10px; background: #FBFAF6; }
.stat-value { display: block; font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 24px; color: var(--accent-dark); }
.stat-label { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 4px; line-height: 1.3; }
.stats-tip { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 12px; }
.stats-guide-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.stats-guide-link:hover { text-decoration: underline; }
.stats-guide-link .material-icons { font-size: 16px; }
@media (max-width: 480px) {
  .stats-box .stats-grid { grid-template-columns: 1fr; }
}


/* Learning Center: CTA de resultado do diagnóstico agora abre o guia certo
   direto (substitui o antigo bloco "Em breve" travado, 2026-09-24) */
.lc-guide-cta {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px 18px; margin-top: 24px; border: 1.5px solid var(--accent);
  border-radius: 12px; background: #EAF3EE; cursor: pointer;
  transition: background .15s, transform .1s;
}
.lc-guide-cta:hover { background: #DDEEE4; transform: translateY(-1px); }
.lc-guide-cta > .material-icons:first-child { font-size: 22px; color: var(--accent-dark); flex-shrink: 0; }
.lc-guide-cta-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lc-guide-cta-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent-dark); }
.lc-guide-cta-title { font-size: 15px; font-weight: 700; color: var(--text-1, #22201b); }
.lc-guide-cta-arrow { color: var(--accent-dark); flex-shrink: 0; }

/* Learning Center: página de guias práticos (índice + conteúdo + checkbox) — 2026-09-24 */
.lc-guides-page { padding: 32px 0 80px; }
.lc-guides-layout { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }

.lc-guides-toc { position: sticky; top: calc(var(--header-h, 85px) + 12px); }
.lc-guides-toc-spacer { display: none; }
.lc-guides-progress { margin-bottom: 18px; }
.lc-guides-progress .lc-progress-track { height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; }
.lc-guides-progress .lc-progress-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width .25s ease; }
.lc-guides-progress .lc-progress-label { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.lc-toc-nav { display: flex; flex-direction: column; gap: 2px; }
.lc-toc-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  text-decoration: none; color: var(--text-2); font-size: 13.5px; font-weight: 600;
  transition: background .15s, color .15s;
}
.lc-toc-link:hover { background: #FBFAF6; }
.lc-toc-link-active { background: #EAF3EE; color: var(--accent-dark); }
.lc-toc-icon { font-size: 17px; flex-shrink: 0; }
.lc-toc-title { flex: 1; line-height: 1.3; }
.lc-toc-check { font-size: 16px; color: var(--border); opacity: 0; flex-shrink: 0; transition: opacity .15s, color .15s; }
.lc-toc-check-visible { opacity: 1; color: var(--accent); }

.lc-guides-header { max-width: 640px; margin-bottom: 36px; }
.lc-guides-header h1 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 30px; margin: 0 0 8px; }
.lc-guides-header p { color: var(--text-2); font-size: 15.5px; margin: 0; }

.lc-guide-block {
  max-width: 640px; padding: 32px 0; border-bottom: 1px solid var(--border);
  scroll-margin-top: 24px; transition: opacity .2s;
}
.lc-guide-block:last-child { border-bottom: none; }
.lc-guide-block-banner {
  width: 100%; height: 180px; border-radius: 14px; margin-bottom: 22px;
  background-size: cover; background-position: center; background-color: #EAF3EE;
}
.lc-guide-block-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.lc-guide-block-head > .material-icons { font-size: 26px; color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.lc-guide-block-head h2 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 23px; margin: 0 0 4px; }
.lc-guide-block-teaser { font-size: 14px; color: var(--text-2); margin: 0; }
.lc-guide-block-sections { margin-bottom: 8px; }
.lc-guide-block.lc-guide-block-done .lc-guide-block-head > .material-icons { color: var(--accent-dark); }

.lc-guide-done { margin-top: 22px; font-size: 14px; }

/* Modo "1 guia por vez", ligado via JS (learningcenter-guides-page.js) — clicar um
   tópico no índice mostra só o conteúdo dele à direita, igual ao painel de detalhe
   das vagas. Sem JS a classe nunca é adicionada e a página cai pro fallback (todos
   os guias empilhados, navegação por âncora), que continua funcionando. */
.lc-guides-layout.js-single-view .lc-guide-block { display: none; }
.lc-guides-layout.js-single-view .lc-guide-block.is-active { display: block; }
.lc-guides-layout.js-single-view .lc-guides-quote { display: none; }
.lc-guides-layout.js-single-view .lc-guide-block { border-bottom: none; padding-top: 0; }

@media (max-width: 860px) {
  .lc-guides-layout { grid-template-columns: 1fr; gap: 0; }
  /* position: fixed (não sticky) — o índice tem altura própria maior que o vão que
     sobra até o próximo guia rolar pra debaixo do header, então sticky "solta" ele
     assim que a rolagem passa da própria altura do índice (é a mesma armadilha que
     o .site-header já resolveu, ver o comentário lá em cima). Fixed prende de vez;
     quem devolve o espaço no fluxo é o .lc-guides-toc-spacer, com a altura medida
     em runtime por learningcenter-guides-page.js (mesma ideia do sticky-header.js). */
  .lc-guides-toc {
    position: fixed; top: var(--header-h, 60px); left: 0; right: 0; z-index: 5;
    background: var(--bg, #FBFAF6); padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
  }
  .lc-guides-toc-spacer { display: block; height: var(--lc-toc-h, 210px); }
  /* Índice em chips que QUEBRAM linha — todos os tópicos visíveis de cara, sem
     precisar arrastar pros lados nem esconder nenhum atrás de scroll horizontal.
     max-height + scroll vertical é só uma rede de segurança (títulos compridos
     tipo "After applying — what to do while you wait" ainda ocupam bastante
     largura mesmo truncados) — o pedido era sem scroll LATERAL, vertical tudo bem. */
  .lc-toc-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; max-height: 132px; overflow-y: auto; padding-right: 2px; }
  .lc-toc-link { flex-shrink: 0; padding: 7px 10px; border: 1px solid var(--border); font-size: 12.5px; gap: 6px; max-width: 100%; }
  .lc-toc-link .lc-icon-badge-sm { width: 20px; height: 20px; flex-shrink: 0; }
  .lc-toc-link .lc-icon-badge-sm .material-icons { font-size: 13px; }
  .lc-toc-link .lc-toc-title { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lc-toc-check { display: none; }
  .lc-guides-progress { margin-bottom: 10px; }
  /* O índice virou fixed (não fica mais no fluxo), então scroll-padding-top do
     <html> (que só conta a altura do header do site) não é suficiente — o guia
     abria escondido atrás da barra de tópicos. Soma a altura real do índice
     (--lc-toc-h, medida em JS) por cima. */
  .lc-guide-block { scroll-margin-top: calc(var(--header-h, 60px) + var(--lc-toc-h, 210px) + 12px); }
}
@media (max-width: 480px) {
  .lc-guides-header h1 { font-size: 24px; }
  .lc-guide-block-head h2 { font-size: 19px; }
  .lc-guide-block-banner { height: 130px; }
}

/* Learning Center: página inicial /learningcenter (dois cartões de entrada) — 2026-09-24 */
.lc-hub { padding: 48px 0 80px; text-align: center; }
.lc-hub h1 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 32px; margin: 10px 0 12px; }
.lc-hub-sub { color: var(--text-2); font-size: 16px; margin: 0 auto 40px; max-width: 480px; }
.lc-hub-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; }
.lc-hub-card {
  display: flex; flex-direction: column; padding: 32px 28px; border: 1px solid var(--border);
  border-radius: 16px; background: #fff; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.lc-hub-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .08); }
.lc-hub-card-icon { font-size: 30px; color: var(--accent); margin-bottom: 14px; }
.lc-hub-card h2 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 20px; margin: 0 0 10px; }
.lc-hub-card p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin: 0 0 20px; flex: 1; }
.lc-hub-card-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--accent-dark); }
.lc-hub-card-cta .material-icons { font-size: 17px; }
@media (max-width: 640px) {
  .lc-hub-cards { grid-template-columns: 1fr; }
  .lc-hub h1 { font-size: 25px; }
}

/* Learning Center: reforço visual — badges de ícone, banners e citações — 2026-09-24 */
.lc-icon-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%; background: #EAF3EE;
}
.lc-icon-badge .material-icons { font-size: 24px; color: var(--accent-dark); }
.lc-icon-badge-sm { width: 34px; height: 34px; }
.lc-icon-badge-sm .material-icons { font-size: 18px; }

.lc-kicker-light { color: #fff !important; opacity: .92; }

.lc-hub-banner {
  background-image: var(--lc-banner-img), linear-gradient(135deg, #1F5C4C 0%, #143F34 100%);
  background-size: cover; background-position: center;
  position: relative; padding: 76px 20px 64px; text-align: center;
}
.lc-hub-banner::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .5);
}
.lc-hub-banner-inner { position: relative; max-width: 560px; margin: 0 auto; }
.lc-hub-banner-inner h1 { color: #fff; font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 32px; margin: 10px 0 12px; }
.lc-hub-banner-inner .lc-hub-sub { color: rgba(255,255,255,.88); font-size: 16px; margin: 0; }

.lc-guides-banner {
  height: 190px; background-image: var(--lc-banner-img), linear-gradient(135deg, #E7E2D3 0%, #DCE7DF 100%);
  background-size: cover; background-position: center;
}

.lc-guides-quote { margin: 44px 0 8px; max-width: 640px; }
.lc-guides-quote blockquote { margin: 0; }

@media (max-width: 640px) {
  .lc-hub-banner { padding: 56px 20px 48px; }
  .lc-hub-banner-inner h1 { font-size: 24px; }
  .lc-guides-banner { height: 130px; }
  .lc-icon-badge { width: 40px; height: 40px; }
  .lc-icon-badge .material-icons { font-size: 20px; }
}

/* Learning Center: cards do hub agora com imagem no topo (2026-09-24) */
.lc-hub-card { padding: 0; overflow: hidden; }
.lc-hub-card-img { display: block; width: 100%; height: 160px; background-size: cover; background-position: center; background-color: #EAF3EE; }
.lc-hub-card-body { display: flex; flex-direction: column; padding: 24px 26px 28px; flex: 1; }