@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   JOB IMMIGRATION CANADA — sistema "Passage"
   Cores da marca do cliente: AZUL-MARINHO + VERMELHO + branco (paleta da
   bandeira canadense, adequada a uma firma de imigração). Azul-marinho é a
   cor estrutural (títulos, cabeçalho, rodapé, hero interno); vermelho é a
   cor única de ação (botões, links, marcas de destaque); fundo claro e
   arejado, sem blocos escuros alternados no corpo. Motivo assinatura: a
   "linha de rota" pontilhada com nós circulares (waypoints), usada no
   passo-a-passo e como divisor. Libre Franklin (títulos, ar cívico de
   documento) + IBM Plex Sans (texto) + IBM Plex Mono (rótulos, códigos de
   programa). Distinto do teal/Outfit da Clínica do Pulmão, do vinho da
   Dra. Sara, do aço/laranja da FD Industrial.
   ========================================================================== */
:root {
    /* Identidade do cliente: AZUL-MARINHO como cor dominante (estrutura + quase
       todos os acentos) e VERMELHO reservado só para o botão de ação principal
       e o ponto do kicker. Os nomes --spruce* / --gold* apontam para o azul —
       o vermelho fica isolado em --red / --red-deep. */
    --atlantic: #032C59;       /* azul-marinho da marca — títulos, cabeçalho, rodapé, acentos */
    --atlantic-deep: #021F3F;  /* azul mais escuro — rodapé, gradientes, faixas CTA */
    --red: #C8102E;            /* vermelho — só CTA principal + ponto do kicker */
    --red-deep: #A00C24;       /* vermelho hover/pressionado */

    --spruce: var(--atlantic);      /* compat: acentos antes vermelhos agora são azuis */
    --spruce-deep: var(--atlantic-deep);
    --spruce-bright: #0B4A8C;
    --gold: var(--atlantic);        /* compat: estrelas / divisores agora azuis */
    --gold-soft: #FBE1E4;           /* halo suave do ponto vermelho do kicker */

    --paper: #F4F6FA;
    --paper-2: #E8EDF4;
    --surface: #FFFFFF;
    --mist: #E6EDF6;

    --ink: #1B2A40;
    --ink-muted: #566476;
    --heading: var(--atlantic);
    --hairline: #D6DDE8;
    --hairline-on-dark: rgba(255, 255, 255, 0.16);

    --ok: #1E7A4A;
    --warn: #B4791C;
    --danger: var(--red);

    --card-shadow: 0 4px 16px -6px rgba(3, 44, 89, 0.12), 0 2px 6px -2px rgba(3, 44, 89, 0.07);
    --card-shadow-hover: 0 24px 40px -14px rgba(3, 44, 89, 0.22), 0 8px 16px -8px rgba(3, 44, 89, 0.12);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);

    /* Tokens semânticos consumidos pelo layout do admin (sidebar compartilhada) */
    --brand-dark: var(--spruce-deep);
    --brand-accent: var(--spruce);
    --brand-accent-hover: var(--spruce-deep);
    --accent-soft: var(--mist);
    --text-main: var(--ink);
    --text-muted: var(--ink-muted);
    --bg-light: var(--paper);
    --bg-white: #ffffff;
}

* { box-sizing: border-box; }
* { scroll-behavior: smooth; }
/* overflow-x: clip evita rolagem horizontal SEM criar contexto de rolagem
   (usar `hidden` aqui quebra o `position: sticky` do cabeçalho). */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }

body {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background-color: var(--paper);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
    word-break: break-word;
}

img { max-width: 100%; height: auto; }

/* Bootstrap: colunas flex não encolhem abaixo do conteúdo sem isto (overflow no mobile). */
.row > [class*="col-"] { min-width: 0; }
@media (max-width: 767.98px) {
    .row > [class^="col-md-"], .row > [class*=" col-md-"],
    .row > [class^="col-lg-"], .row > [class*=" col-lg-"] {
        flex: 0 0 100%; max-width: 100%; width: 100%;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .row > [class^="col-lg-"]:not([class*="col-md-"]),
    .row > [class*=" col-lg-"]:not([class*="col-md-"]) {
        flex: 0 0 100%; max-width: 100%; width: 100%;
    }
}

h1, h2, h3, h4, h5, .display-heading {
    font-family: 'Libre Franklin', 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--heading);
    text-wrap: balance;
}

h1, .h1 { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 800; }
h2, .h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
h3, .h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--atlantic); text-decoration: none; transition: var(--transition-smooth); }
a:hover { color: var(--red); }

.lead { font-size: 1.12rem; color: var(--ink-muted); }
.text-muted { color: var(--ink-muted) !important; }
.text-spruce { color: var(--spruce) !important; }
.text-gold { color: var(--gold) !important; }
.bg-paper-2 { background-color: var(--paper-2) !important; }
.bg-mist { background-color: var(--mist) !important; }
.bg-surface { background-color: var(--surface) !important; }
.measure { max-width: 62ch; }
.measure-tight { max-width: 46ch; }

.section-pad { padding: 92px 0; }
.section-pad-sm { padding: 64px 0; }
@media (max-width: 767.98px) {
    .section-pad { padding: 58px 0; }
    .section-pad-sm { padding: 44px 0; }
}

.rule { border: none; border-top: 1px solid var(--hairline); margin: 0; }
.container { max-width: 1140px; }

/* --- Rótulo de seção: código mono com waypoint ---------------------------- */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--spruce);
    margin-bottom: 18px;
}
.kicker::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 4px var(--gold-soft);
    flex-shrink: 0;
}
.kicker.on-dark { color: #a9c0dd; }
.kicker.on-dark::before { box-shadow: 0 0 0 4px rgba(200, 16, 46, .22); }

/* --- Botões -------------------------------------------------------------- */
.btn { font-weight: 600; border-radius: var(--radius-sm); padding: 12px 22px; transition: var(--transition-smooth); border: 1.5px solid transparent; }
.btn:focus-visible { outline: 3px solid rgba(200, 16, 46, .35); outline-offset: 2px; }

.btn-brand { background: var(--red); color: #fff; }
.btn-brand:hover { background: var(--red-deep); color: #fff; transform: translateY(-1px); box-shadow: var(--card-shadow); }

.btn-outline-brand { border-color: var(--atlantic); color: var(--atlantic); background: transparent; }
.btn-outline-brand:hover { background: var(--atlantic); color: #fff; }

.btn-gold { background: var(--red); color: #fff; }
.btn-gold:hover { background: var(--red-deep); color: #fff; transform: translateY(-1px); box-shadow: var(--card-shadow); }

.btn-on-dark { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.btn-on-dark:hover { background: #fff; color: var(--atlantic); }

.btn-lg { padding: 15px 30px; font-size: 1.02rem; }

/* --- Header ------------------------------------------------------------- */
.top-strip {
    background: var(--atlantic);
    color: #cdd6e2;
    font-size: 0.82rem;
    padding: 8px 0;
}
.top-strip a { color: #cdd6e2; }
.top-strip a:hover { color: #fff; }
.top-strip .divider { color: rgba(255,255,255,.3); }

.site-header {
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    position: sticky; top: 0; z-index: 1030;
    transition: box-shadow .25s ease, background-color .25s ease;
}
.site-header.is-stuck {
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 8px 24px -12px rgba(3, 44, 89, .38);
    backdrop-filter: saturate(180%) blur(8px);
}
.site-header .navbar-brand { display: flex; align-items: center; padding-top: 2px; padding-bottom: 2px; }
.site-header .navbar-brand img { height: 68px; width: auto; transition: height .25s ease; }
.site-header.is-stuck .navbar-brand img { height: 52px; }
.site-header .navbar-brand .brand-fallback { font-family: 'Libre Franklin', sans-serif; font-weight: 800; color: var(--atlantic); font-size: 1.15rem; }
@media (max-width: 991.98px) { .site-header .navbar-brand img { height: 58px; } }
@media (max-width: 575.98px) { .site-header .navbar-brand img { height: 50px; } }
.footer-logo { height: 76px; width: auto; }
.site-header .nav-link {
    color: var(--ink) !important;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 8px 12px !important;
}
.site-header .nav-link:hover,
.site-header .nav-link.active { color: var(--spruce) !important; }
.site-header .dropdown-menu {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
    padding: 8px;
}
.site-header .dropdown-item { border-radius: var(--radius-sm); font-size: 0.92rem; padding: 8px 12px; }
.site-header .dropdown-item:hover { background: var(--mist); color: var(--spruce-deep); }
/* usamos só o chevron custom (.nav-caret); esconde o caret padrão do Bootstrap */
.site-header .dropdown-toggle::after { display: none; }
.nav-caret { font-size: .7rem; opacity: .7; margin-left: 2px; }
.nav-phone { color: var(--atlantic); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.nav-phone i { color: var(--spruce); }

/* seletor de idioma */
.lang-switch { display: inline-flex; gap: 6px; align-items: center; }
.lang-switch a { display: inline-flex; line-height: 0; border-radius: 4px; opacity: .7; transition: opacity .15s, transform .15s; }
.lang-switch a img { width: 24px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.lang-switch a:hover { opacity: 1; transform: translateY(-1px); }
.lang-switch a.active { opacity: 1; }
.lang-switch a.active img { box-shadow: 0 0 0 2px #fff; }

/* --- Hero -------------------------------------------------------------- */
.hero {
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
    padding: 84px 0 76px;
    position: relative;
    overflow: hidden;
}
.hero .eyebrow { color: var(--spruce); }
.hero h1 { margin-bottom: 20px; }
.hero p.lead { max-width: 40ch; }

/* Hero com imagem de fundo + texto por cima */
.hero--bg {
    background-color: var(--atlantic-deep);
    background-image:
        linear-gradient(92deg, rgba(2, 24, 51, .93) 0%, rgba(2, 24, 51, .78) 42%, rgba(2, 24, 51, .38) 100%),
        var(--hero-img, none);
    background-size: cover, cover;
    background-position: center, center;
    color: #e8eef6;
    padding: clamp(84px, 12vw, 152px) 0;
}
.hero--bg .hero-inner { max-width: 640px; }
.hero--bg h1 { color: #fff; }
.hero--bg p.lead { color: #cfdbea; max-width: 46ch; }
.hero--bg .btn-outline-brand { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.hero--bg .btn-outline-brand:hover { background: #fff; border-color: #fff; color: var(--atlantic); }
@media (max-width: 575.98px) {
    .hero--bg { background-image: linear-gradient(180deg, rgba(2, 24, 51, .86), rgba(2, 24, 51, .92)), var(--hero-img, none); }
}
.page-hero {
    background: var(--atlantic);
    color: #eaeef4;
    padding: 64px 0 58px;
}
.page-hero h1 { color: #fff; }
.page-hero .crumbs { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; color: #9fb0c4; letter-spacing: .04em; }
.page-hero .crumbs a { color: #9fb0c4; }
.page-hero .crumbs a:hover { color: #fff; }
.page-hero p { color: #c6d0dd; max-width: 62ch; }

/* --- Cards ------------------------------------------------------------- */
.card-plain {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: 28px;
    height: 100%;
    transition: var(--transition-smooth);
}
.card-plain:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-3px); }
.card-plain .ico {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--mist); color: var(--spruce);
    font-size: 1.35rem; margin-bottom: 16px;
}
.card-plain h3 { font-size: 1.12rem; margin-bottom: 8px; }
.card-plain p { color: var(--ink-muted); font-size: .96rem; }

/* --- Moldura de imagem das seções (placeholder de marca até virem fotos) --- */
.media-frame {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--hairline);
    background: var(--atlantic);
    box-shadow: var(--card-shadow);
    aspect-ratio: 4 / 3;
}
.media-frame--tall { aspect-ratio: 5 / 6; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.media-frame:hover img { transform: scale(1.045); }
/* fallback caso a imagem não exista/carregue: plano navy com o motivo de rota */
.media-frame.is-empty {
    background:
        radial-gradient(circle at 78% 22%, rgba(255, 255, 255, .10) 0 3px, transparent 4px) 0 0 / 46px 46px,
        linear-gradient(150deg, var(--atlantic) 0%, var(--atlantic-deep) 100%);
}
/* --fill: no desktop a imagem acompanha exatamente a altura da coluna de texto
   (a linha precisa estar em align-items: stretch). No mobile volta a ter proporção fixa. */
@media (min-width: 992px) {
    .media-frame--fill { aspect-ratio: auto; height: 100%; min-height: 380px; }
}
@media (max-width: 991.98px) {
    .media-frame, .media-frame--tall, .media-frame--fill { aspect-ratio: 16 / 10; }
}

/* --- Card de família de ocupações (imagem + lista) — página Employment --- */
.trade-card {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}
.trade-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.trade-card__media {
    position: relative; margin: 0;
    aspect-ratio: 16 / 10;
    background: linear-gradient(160deg, var(--paper-2) 0%, var(--mist) 100%);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.trade-card__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.trade-card:hover .trade-card__media img { transform: scale(1.05); }
/* ícone: selo branco no canto quando há foto; grande e suave quando é placeholder */
.trade-card__media > .bi {
    position: absolute; left: 12px; top: 12px;
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .93); color: var(--atlantic);
    font-size: 1.05rem; box-shadow: 0 6px 16px -6px rgba(3, 44, 89, .45);
}
.trade-card__media.is-empty { background: linear-gradient(160deg, var(--paper-2) 0%, var(--mist) 100%); }
.trade-card__media.is-empty > .bi {
    position: static; width: auto; height: auto;
    background: none; box-shadow: none;
    font-size: 2.9rem; color: var(--atlantic); opacity: .3;
}
.trade-card__body { flex: 1 1 auto; padding: 20px 22px 22px; }
.trade-card__body h3 { margin: 0 0 10px; }
.trade-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.trade-list li {
    position: relative; padding-left: 16px;
    font-size: .875rem; color: var(--ink-muted); line-height: 1.35;
}
.trade-list li::before {
    content: ""; position: absolute; left: 0; top: .5em;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--atlantic); opacity: .5;
}
/* grade 4-up (Employment): reserva 2 linhas no título p/ as listas alinharem */
@media (min-width: 1200px) {
    .occ-grid .trade-card__body h3 { min-height: 2.6em; }
}
/* faixa de imagem mais baixa (Career Coaching) */
.trade-card--banner .trade-card__media { aspect-ratio: 5 / 2; }

/* --- Página Pathways: fato-chave em destaque + banner nos cards --------- */
.key-fact {
    display: flex; gap: 20px; align-items: flex-start;
    background: linear-gradient(160deg, var(--paper-2) 0%, var(--mist) 100%);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    box-shadow: var(--card-shadow);
}
.key-fact .kf-ico {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--atlantic); color: #fff; font-size: 1.5rem;
}
.key-fact .kicker { margin-bottom: 6px; }
.key-fact h2 { font-size: 1.35rem; color: var(--atlantic); margin: 0 0 8px; }
.key-fact p { margin: 0; color: var(--ink-muted); }

/* banner de imagem sangrando p/ as bordas de um .card-plain (padding 28px) */
.card-plain--media { overflow: hidden; }
.card-media {
    margin: -28px -28px 22px;
    aspect-ratio: 21 / 8;
    overflow: hidden;
    background: linear-gradient(160deg, var(--paper-2) 0%, var(--mist) 100%);
    border-bottom: 1px solid var(--hairline);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.prov-flag {
    width: 56px; height: 37px; object-fit: cover; display: block;
    border-radius: 4px; border: 1px solid var(--hairline);
    margin-bottom: 14px;
}
@media (max-width: 575.98px) {
    .key-fact { flex-direction: column; gap: 14px; padding: 22px; }
    .card-media { aspect-ratio: 5 / 2; }
}

/* --- Linha de recurso (ícone + texto) usada em For employers / Canadian workplace --- */
.feature-row {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--radius-md); padding: 20px 22px;
    transition: var(--transition-smooth);
}
.feature-row:hover { box-shadow: var(--card-shadow); transform: translateY(-2px); }
.feature-row .ico {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--mist); color: var(--spruce); font-size: 1.25rem;
}
.feature-row h3 { font-size: 1.04rem; margin: 0 0 4px; }
.feature-row p { color: var(--ink-muted); font-size: .93rem; margin: 0; }

/* --- Cards Missão / Visão / Lema ---------------------------------------- */
.mv-card .ico { margin-bottom: 14px; }
.mv-card .mv-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .78rem; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--atlantic);
    margin-bottom: 8px;
}

/* --- Painel de credenciais / "totalmente regulados" ------------------- */
.trust-panel {
    position: relative; overflow: hidden;
    background: linear-gradient(158deg, var(--atlantic) 0%, var(--atlantic-deep) 100%);
    color: #d7e3f2;
    border-radius: var(--radius-lg);
    padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 68px);
    box-shadow: 0 30px 60px -24px rgba(3, 44, 89, .45);
}
/* selo discreto ao fundo */
.trust-panel .trust-seal {
    position: absolute; right: -18px; bottom: -40px;
    font-size: 210px; line-height: 1; color: rgba(255, 255, 255, .05);
    pointer-events: none; z-index: 0;
}
.trust-panel > *:not(.trust-seal) { position: relative; z-index: 1; }
.trust-panel h2 { color: #fff; }
.trust-panel .lead { color: #c3d3e6; }
.trust-panel .kicker.on-dark { color: #a9c0dd; }

.trust-cred { text-align: center; padding: 6px 8px; }
.trust-cred .ico {
    width: 58px; height: 58px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff; font-size: 1.5rem; margin-bottom: 14px;
}
.trust-cred p {
    color: #e6eefa; font-weight: 600; font-size: .98rem;
    line-height: 1.45; margin: 0; max-width: 22ch; margin-inline: auto;
}
.trust-cred + .trust-cred { }
@media (min-width: 992px) {
    /* separadores verticais sutis entre as credenciais */
    .trust-panel .row > [class*="col-"]:not(:first-child) .trust-cred::before {
        content: ""; position: absolute; left: 0; top: 12%; bottom: 12%;
        border-left: 1px solid rgba(255, 255, 255, .14);
    }
    .trust-panel .row > [class*="col-"] { position: relative; }
}

.tag {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .72rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 5px;
    background: var(--mist); color: var(--atlantic);
}

/* --- Motivo "linha de rota" (waypoints) ------------------------------- */
.pathway { list-style: none; padding: 0; margin: 0; counter-reset: wp; }
.pathway > li {
    position: relative;
    padding-left: 56px;
    padding-bottom: 34px;
    counter-increment: wp;
}
.pathway > li:last-child { padding-bottom: 0; }
.pathway > li::before {
    content: counter(wp, decimal-leading-zero);
    position: absolute; left: 0; top: 0;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--spruce);
    color: var(--spruce); font-family: 'IBM Plex Mono', monospace;
    font-size: .8rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.pathway > li::after {
    content: ""; position: absolute; left: 18px; top: 42px; bottom: 4px;
    border-left: 2px dotted var(--hairline);
}
.pathway > li:last-child::after { display: none; }
.pathway h4 { font-size: 1.05rem; margin-bottom: 4px; }
.pathway p { color: var(--ink-muted); font-size: .95rem; margin: 0; }

/* divisor com waypoints */
.wp-divider { display: flex; align-items: center; gap: 10px; color: var(--hairline); }
.wp-divider::before, .wp-divider::after { content: ""; flex: 1; border-top: 2px dotted var(--hairline); }
.wp-divider i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* --- Listas com check ------------------------------------------------- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--ink); }
.check-list li::before {
    content: "\F26E"; font-family: "bootstrap-icons";
    position: absolute; left: 0; top: 1px; color: var(--spruce); font-size: 1.05rem;
}
/* rótulo de grupo dentro de card de pacote */
.pkg-group-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .72rem; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-muted);
    margin-bottom: 10px;
}
/* cards de preço lado a lado (Packages) */
.pkg-card .stat-num { font-size: clamp(1.7rem, 3.2vw, 2.1rem); }
.pkg-card--featured { border-color: var(--atlantic); box-shadow: var(--card-shadow); }
.tag.pkg-card__flag {
    align-self: flex-start; margin-bottom: 14px;
    background: var(--atlantic); color: #fff;
}

/* --- Equipe --------------------------------------------------------------- */
.member-card { text-align: center; }
.member-card .photo {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 22%;
    border-radius: var(--radius-md); background: var(--mist);
    border: 1px solid var(--hairline);
}
.member-card .photo-fallback {
    width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-md);
    background: var(--mist); border: 1px solid var(--hairline);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Libre Franklin', sans-serif; font-weight: 700;
    font-size: 2rem; color: var(--atlantic);
}
.member-card h3 { font-size: 1.05rem; margin: 14px 0 2px; }
.member-card .role { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.member-card .member-social { margin-top: 12px; display: flex; justify-content: center; gap: 8px; }
.member-card .member-social a,
.member-card .member-social span {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mist); color: var(--atlantic); font-size: .95rem;
    transition: var(--transition-smooth);
}
.member-card .member-social a:hover { background: var(--atlantic); color: #fff; transform: translateY(-1px); }
.member-card .member-social .is-off { opacity: .32; }

/* Carrossel da equipe: trilha com rolagem por toque + setas no desktop. */
.team-slider { position: relative; }
.team-nav { display: inline-flex; gap: 10px; flex: 0 0 auto; }
.team-nav-btn {
    width: 42px; height: 42px; flex: 0 0 auto; padding: 0;
    border-radius: 50%; border: 1px solid var(--hairline);
    background: var(--surface); color: var(--atlantic);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem; line-height: 1; cursor: pointer;
    transition: var(--transition-smooth);
}
.team-nav-btn:hover:not(:disabled) {
    background: var(--atlantic); color: #fff;
    border-color: var(--atlantic); transform: translateY(-1px);
}
.team-nav-btn:disabled { opacity: .32; cursor: default; }

.team-track {
    display: flex; gap: 24px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-behavior: smooth;
    margin: 0 -4px; padding: 4px 4px 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.team-track::-webkit-scrollbar { display: none; }
.team-track.is-centered { justify-content: center; }
.team-slide { flex: 0 0 auto; scroll-snap-align: start; width: 80%; }
.team-slide .member-card { display: flex; flex-direction: column; height: 100%; }
.team-slide .member-card .member-social { margin-top: auto; padding-top: 12px; }
@media (min-width: 576px) { .team-slide { width: 46%; } }
@media (min-width: 768px) { .team-slide { width: 30.5%; } }
@media (min-width: 992px) { .team-slide { width: calc((100% - 3 * 24px) / 4); } }
@media (prefers-reduced-motion: reduce) { .team-track { scroll-behavior: auto; } }

/* --- "Como funciona" / How it works — trilha horizontal com waypoints ----- */
.flow {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 30px 22px;
    position: relative;
}
.flow-step { position: relative; text-align: center; }
.flow-dot {
    width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 1.05rem;
    color: #fff; background: var(--atlantic);
    box-shadow: 0 0 0 7px var(--paper-2);
    position: relative; z-index: 2;
}
.flow-step h3 { font-size: 1.02rem; margin: 0 0 6px; }
.flow-step p { color: var(--ink-muted); font-size: .92rem; margin: 0; }
@media (min-width: 768px) {
    .flow::before {
        content: ""; position: absolute; top: 28px;
        left: calc(50% / var(--cols, 4)); right: calc(50% / var(--cols, 4));
        border-top: 2px dotted var(--spruce); opacity: .5; z-index: 0;
    }
    /* ponto vermelho que "conecta" um waypoint ao outro — passa POR TRÁS das bolas azuis */
    .flow--connect::after {
        content: ""; position: absolute; top: 29px; left: calc(50% / var(--cols, 4));
        width: 12px; height: 12px; border-radius: 50%;
        background: var(--red); transform: translate(-50%, -50%);
        box-shadow: 0 0 0 4px rgba(200, 16, 46, .16), 0 0 12px 2px rgba(200, 16, 46, .5);
        opacity: 0; z-index: 0; pointer-events: none;
    }
    .flow--connect.flow-live::after { animation: flowConnect 5s ease-in-out infinite; }
    .flow--connect.flow-live[style*="--cols:3"]::after { animation-name: flowConnect3; }
    .flow--connect.flow-live[style*="--cols:5"]::after { animation-name: flowConnect5; }
}
/* waypoints de 4 colunas: centros em 12.5 / 37.5 / 62.5 / 87.5% */
@keyframes flowConnect {
    0%   { left: 12.5%; opacity: 0; }
    6%   { opacity: 1; }
    27%  { left: 37.5%; }
    33%  { left: 37.5%; }
    54%  { left: 62.5%; }
    60%  { left: 62.5%; }
    90%  { left: 87.5%; opacity: 1; }
    96%  { left: 87.5%; opacity: 1; }
    100% { left: 87.5%; opacity: 0; }
}
/* 3 colunas: centros em 16.667 / 50 / 83.333% */
@keyframes flowConnect3 {
    0%   { left: 16.667%; opacity: 0; }
    7%   { opacity: 1; }
    40%  { left: 50%; }
    48%  { left: 50%; }
    90%  { left: 83.333%; opacity: 1; }
    96%  { left: 83.333%; opacity: 1; }
    100% { left: 83.333%; opacity: 0; }
}
/* 5 colunas: centros em 10 / 30 / 50 / 70 / 90% */
@keyframes flowConnect5 {
    0%   { left: 10%; opacity: 0; }
    5%   { opacity: 1; }
    20%  { left: 30%; }
    25%  { left: 30%; }
    42%  { left: 50%; }
    47%  { left: 50%; }
    64%  { left: 70%; }
    69%  { left: 70%; }
    91%  { left: 90%; opacity: 1; }
    96%  { left: 90%; opacity: 1; }
    100% { left: 90%; opacity: 0; }
}
@media (max-width: 767.98px) {
    .flow { grid-template-columns: 1fr; gap: 0; }
    .flow-step { text-align: left; padding-left: 78px; padding-bottom: 30px; }
    .flow-dot { position: absolute; left: 0; top: 0; margin: 0; box-shadow: 0 0 0 6px var(--paper-2); }
    .flow-step::after {
        content: ""; position: absolute; left: 28px; top: 62px; bottom: 2px;
        border-left: 2px dotted var(--spruce); opacity: .5;
    }
    .flow-step:last-child::after { display: none; }
}

/* --- Províncias com bandeira ----------------------------------------- */
.prov-tile {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--radius-md); padding: 12px 14px; height: 100%;
    transition: var(--transition-smooth);
}
.prov-tile:hover { box-shadow: var(--card-shadow); transform: translateY(-2px); }
.prov-tile img {
    width: 46px; height: 31px; object-fit: cover; flex-shrink: 0;
    border-radius: 3px; border: 1px solid var(--hairline);
}
.prov-tile span { font-weight: 600; font-size: .92rem; color: var(--ink); line-height: 1.25; }

/* --- Bloco de aviso legal (mais forte) ------------------------------ */
.disclaimer {
    display: flex; gap: 18px; align-items: flex-start;
    max-width: 860px; margin-inline: auto;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    box-shadow: var(--card-shadow);
}
/* --block: ocupa a largura toda do container (alinha com os cards acima) */
.disclaimer--block { max-width: none; margin-inline: 0; }
.disclaimer .disclaimer-ico {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--mist); color: var(--atlantic); font-size: 1.15rem; line-height: 1;
}
.disclaimer h3 { color: var(--atlantic); font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; font-family: 'IBM Plex Mono', monospace; margin: 2px 0 6px; }
.disclaimer p { color: var(--ink-muted); font-size: .92rem; margin: 0; }

/* --- Vagas -------------------------------------------------------------- */
.job-row {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--radius-md); padding: 22px 24px;
    display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center;
    transition: var(--transition-smooth);
}
.job-row:hover { box-shadow: var(--card-shadow); border-color: var(--spruce); }
.job-row h3 { font-size: 1.1rem; margin: 0 0 4px; }
.job-meta { font-size: .84rem; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.job-meta span { display: inline-flex; align-items: center; gap: 5px; }
.job-meta i { color: var(--spruce); }
.job-meta--head { padding-bottom: 16px; border-bottom: 1px solid var(--hairline); margin-bottom: 22px; }
@media (min-width: 992px) { .job-side { position: sticky; top: 100px; } }

/* --- Depoimentos ------------------------------------------------------- */
.quote-card {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--radius-md); padding: 26px; height: 100%;
}
.quote-card .stars { color: var(--gold); font-size: .9rem; letter-spacing: 2px; margin-bottom: 10px; }
.quote-card blockquote { font-size: 1rem; color: var(--ink); margin: 0 0 16px; }
.quote-card .who { font-weight: 600; font-size: .92rem; }
.quote-card .who small { display: block; color: var(--ink-muted); font-weight: 400; }

/* --- FAQ ------------------------------------------------------------- */
@media (min-width: 992px) {
    .faq-aside { position: sticky; top: 100px; }
}
.faq-aside .kicker { margin-bottom: 10px; }
.faq-aside > h2 { font-size: 1.35rem; color: var(--atlantic); margin-bottom: 12px; }
.faq-help {
    background: linear-gradient(160deg, var(--paper-2), var(--mist));
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg); padding: 24px; margin-top: 22px;
}
.faq-help__ico {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--atlantic); color: #fff; font-size: 1.2rem; margin-bottom: 14px;
}
.faq-help h3 { font-size: 1.08rem; color: var(--atlantic); margin: 0 0 6px; }
.faq-help p { color: var(--ink-muted); font-size: .92rem; margin: 0 0 16px; }
.faq .accordion-item { border: 1px solid var(--hairline); border-radius: var(--radius-md) !important; margin-bottom: 12px; overflow: hidden; background: var(--surface); }
.faq .accordion-button { font-family: 'Libre Franklin', sans-serif; font-weight: 600; color: var(--atlantic); background: var(--surface); box-shadow: none; padding: 18px 20px; }
.faq .accordion-button:not(.collapsed) { color: var(--spruce-deep); background: var(--mist); }
.faq .accordion-button:focus { box-shadow: 0 0 0 3px rgba(13,51,107,.18); }
.faq .accordion-body { color: var(--ink-muted); padding: 4px 20px 20px; }

/* --- Blog ---------------------------------------------------------------- */
.post-card {
    display: flex; flex-direction: column; height: 100%;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    color: inherit; text-decoration: none;
    transition: var(--transition-smooth);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); color: inherit; }
.post-card__media {
    position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden;
    background: linear-gradient(160deg, var(--paper-2), var(--mist));
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--hairline);
}
.post-card__media img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__media .bi { font-size: 2.4rem; color: var(--atlantic); opacity: .26; }
.post-card__body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 22px 24px 24px; }
.post-card__body h3 { font-size: 1.12rem; color: var(--atlantic); margin: 0 0 8px; }
.post-card__body p { color: var(--ink-muted); font-size: .92rem; line-height: 1.5; margin: 0; }
.post-card__more {
    margin-top: auto; padding-top: 16px;
    font-family: 'IBM Plex Mono', monospace; font-size: .72rem;
    letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
    color: var(--red); display: inline-flex; align-items: center; gap: 7px;
}
.post-card__more .bi { transition: transform .25s ease; }
.post-card:hover .post-card__more .bi { transform: translateX(4px); }

.blog-empty {
    text-align: center; padding: 64px 24px;
    background: linear-gradient(160deg, var(--paper-2), var(--mist));
    border: 1px solid var(--hairline); border-radius: var(--radius-lg);
}
.blog-empty .bi { font-size: 2.6rem; color: var(--atlantic); opacity: .35; margin-bottom: 14px; display: block; }
.blog-empty p { color: var(--ink-muted); margin: 0; }

.article-back {
    font-family: 'IBM Plex Mono', monospace; font-size: .78rem;
    letter-spacing: .04em; color: var(--ink-muted);
    align-items: center; gap: 7px; text-decoration: none;
}
.article-back:hover { color: var(--atlantic); }
.article-frame {
    margin: 28px 0 34px; border-radius: var(--radius-lg); overflow: hidden;
    aspect-ratio: 16 / 9; border: 1px solid var(--hairline);
    background: linear-gradient(160deg, var(--paper-2), var(--mist));
}
.article-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* corpo do artigo: HTML simples vindo do painel */
.article-body { font-size: 1.05rem; line-height: 1.75; color: var(--ink); max-width: 68ch; }
.article-body > *:first-child { margin-top: 0; }
.article-body > *:last-child { margin-bottom: 0; }
.article-body h2 { font-size: 1.5rem; color: var(--atlantic); margin: 1.9em 0 .55em; }
.article-body h3 { font-size: 1.2rem; color: var(--atlantic); margin: 1.7em 0 .5em; }
.article-body p { margin: 0 0 1.15em; }
.article-body ul, .article-body ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.article-body li { margin-bottom: .4em; }
.article-body a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--red-deep); }
.article-body img { border-radius: var(--radius-md); margin: 1.5em 0; }
.article-body blockquote {
    margin: 1.5em 0; padding: 6px 0 6px 22px;
    border-left: 4px solid var(--atlantic);
    color: var(--ink-muted); font-style: italic;
}
.article-body hr { border: 0; border-top: 1px solid var(--hairline); margin: 2em 0; }

/* --- Formulários ----------------------------------------------------- */
.form-control, .form-select {
    padding: 12px 14px; border-radius: var(--radius-sm);
    border: 1px solid #d6d2c6; background: #fbfaf7; font-size: .96rem;
}
.form-control:focus, .form-select:focus {
    background: #fff; border-color: var(--atlantic);
    box-shadow: 0 0 0 3px rgba(13, 51, 107, .16);
}
.form-label { font-weight: 600; font-size: .86rem; margin-bottom: 6px; color: var(--atlantic); }

/* --- Faixa CTA ------------------------------------------------------- */
.cta-band { background: var(--atlantic-deep); color: #dbe4f2; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #c3d0e6; }
/* fundo com o mapa do Canadá tingido de navy */
.cta-band--map {
    position: relative;
    background-color: var(--atlantic-deep);
    background-image:
        linear-gradient(rgba(3, 44, 89, .90), rgba(2, 24, 51, .95)),
        url("../img/fundo-comece-hoje.jpg");
    background-size: cover, cover;
    background-position: center, center;
    background-blend-mode: multiply, normal;
}
.cta-band--map > .container { position: relative; z-index: 1; }

/* --- Footer -------------------------------------------------------- */
.site-footer { background: var(--atlantic-deep); color: #b9c4d2; padding: 64px 0 26px; font-size: .92rem; }
.site-footer h5 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; font-family: 'IBM Plex Mono', monospace; margin-bottom: 16px; }
.site-footer a { color: #b9c4d2; }
.site-footer a:hover { color: #fff; }
.site-footer .brand-blurb { max-width: 34ch; color: #93a1b3; }
.site-footer .creds { font-size: .82rem; color: #8593a6; }
.site-footer .socials a { font-size: 1.1rem; margin-right: 14px; }
.footer-bottom { border-top: 1px solid var(--hairline-on-dark); margin-top: 40px; padding-top: 20px; font-size: .82rem; color: #7b8a9d; }

/* --- WhatsApp flutuante ------------------------------------------- */
.whatsapp-float-btn {
    position: fixed; bottom: 22px; right: 22px; z-index: 1040;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
}
.whatsapp-float-btn:hover { color: #fff; transform: scale(1.06); }

/* Botão de WhatsApp "inline" (ex.: alerta de pagamento indisponível) */
.btn-whatsapp {
    background: #25D366; color: #fff; border: none;
    transition: var(--transition-smooth);
}
.btn-whatsapp:hover { background: #1EBE5A; color: #fff; }

/* --- Disclaimer / nota legal ----------------------------------- */
.legal-note {
    background: var(--paper-2); border: 1px solid var(--hairline);
    border-radius: var(--radius-md); padding: 16px 18px;
    font-size: .9rem; color: var(--ink-muted);
}

/* --- Utilidades ------------------------------------------------- */
.stat-num { font-family: 'Libre Franklin', sans-serif; font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--spruce); line-height: 1; }
.stat-cap { font-size: .88rem; color: var(--ink-muted); }
[hidden] { display: none !important; }

/* --- Animações leves ------------------------------------------------- */
/* Revelação suave ao entrar na viewport (classe .reveal adicionada via JS). */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.4, 0, .2, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* leve escalonamento em grades */
.row > [class*="col-"]:nth-child(2) > .reveal { transition-delay: .06s; }
.row > [class*="col-"]:nth-child(3) > .reveal { transition-delay: .12s; }
.row > [class*="col-"]:nth-child(4) > .reveal { transition-delay: .18s; }

/* Entrada do hero ao carregar */
.hero--bg .hero-inner > * { animation: heroIn .7s both cubic-bezier(.4, 0, .2, 1); }
.hero--bg .hero-inner > *:nth-child(2) { animation-delay: .08s; }
.hero--bg .hero-inner > *:nth-child(3) { animation-delay: .16s; }
.hero--bg .hero-inner > *:nth-child(4) { animation-delay: .24s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; animation: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
}