/* ============================================================
   NEW Intercambio, custom theme (on top of Bootstrap 5)
   ============================================================ */

:root {
    /* Brand palette */
    --ni-red: #862029;
    --ni-red-bright: #B22234;
    --ni-slate: #535353;
    --ni-ink: #232323;
    --ni-paper: #FAFAFA;
    --ni-paper-alt: #F0EFED;
    --ni-border: rgba(0, 0, 0, 0.08);

    /* O Bootstrap usa essa variavel para o aro azul que desenha em volta
       de nav-link/dropdown-item/etc ao tocar ou dar foco (Renato viu isso
       como uma linha azul feia ao abrir o sub menu no celular,
       07/09/2026). Sobrescrevendo aqui, todo esse aro passa a usar o
       vermelho da marca em vez do azul padrao do Bootstrap. */
    --bs-focus-ring-color: rgba(178, 34, 52, 0.25);

    /* Shared sizing tokens, so every card/button reads as one system */
    --ni-radius: 18px;
    --ni-radius-pill: 50px;
    --ni-shadow-sm: 0 6px 18px rgba(35, 21, 12, 0.06);
    --ni-shadow: 0 20px 42px rgba(35, 21, 12, 0.12);

    /* Real height of the fixed banner + navbar, measured live by main.js.
       These starting guesses just avoid a layout jump before JS runs on
       first paint — they get overwritten immediately after. */
    --banner-h: 40px;
    --nav-h: 76px;

    /* Override Bootstrap variables to use the brand palette */
    --bs-primary: var(--ni-red);
    --bs-primary-rgb: 134, 32, 41;
    --bs-body-font-family: 'Montserrat', sans-serif;
    --bs-body-color: var(--ni-ink);
    --bs-link-color: var(--ni-red);
    --bs-link-hover-color: var(--ni-red-bright);
    --bs-body-bg: var(--ni-paper);
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--ni-ink);
    background: var(--ni-paper);
    /* Space for the fixed banner + navbar, kept in sync with their real
       rendered height (see --banner-h / --nav-h above and main.js) */
    padding-top: calc(var(--banner-h) + var(--nav-h));
    /* Safety net: Bootstrap's .row uses negative side margins (its gutter
       trick), normally invisible because .container's own padding absorbs
       it exactly. A few px of mismatch anywhere (rounding, a nested .row
       inside another padded element) is enough to force a horizontal
       scrollbar on the whole page on narrow phones — found via a real
       21px case (see .footer-links a below) plus a residual ~12px from
       the grid gutters themselves. This doesn't hide a real layout bug,
       it just stops small ones from ever becoming a page-wide horizontal
       scroll; inner elements with their own overflow-x:auto (like
       .fp-reels-row) are unaffected. */
    overflow-x: hidden;
}

h1, h2, h3, .display-font {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

a { transition: color 0.2s; }

/* Tira a caixa azul que o Chrome/Android desenha por padrao ao tocar num
   link ou botao (tap highlight), bem visivel ao abrir o sub menu no
   celular. Achado pelo Renato 07/09/2026. O :focus-visible abaixo
   continua garantindo o indicador de foco para quem navega pelo teclado. */
a, button, .nav-link, .dropdown-toggle, .navbar-toggler {
    -webkit-tap-highlight-color: transparent;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--ni-red-bright);
    outline-offset: 2px;
}

/* A "linha azul" que o Renato viu no menu mobile do iPhone (07/09/2026) na
   verdade era esse aro azul do proprio Bootstrap, escrito com a cor fixa
   dele (nao pega o --bs-focus-ring-color redefinido acima), aparecendo
   ao tocar em SOBRE/INTERCAMBIOS/etc. Repoe com a cor da marca. */
.nav-link:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(178, 34, 52, 0.25);
}

.container { max-width: 1140px; }

/* ---------- Stamp badge (brand signature element) ---------- */
.stamp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--ni-red);
    color: var(--ni-red);
    background: #fff;
    border-radius: 50%;
    width: 96px;
    height: 96px;
    padding: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    transform: rotate(-7deg);
    box-shadow: var(--ni-shadow-sm);
}
.stamp-badge-sm {
    /* Big enough that a single ~10-letter word (e.g. "COMUNIDADE") still
       fits on one line instead of breaking mid-word — the old 56px was
       too tight for real Portuguese words, not just edge cases. */
    width: 82px;
    height: 82px;
    font-size: 0.5rem;
    font-weight: 700;
}
.stamp-badge-light {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}
/* Alternate tilt direction on some sections so the badges read as
   individually hand-stamped rather than one copy-pasted graphic. */
.stamp-badge-alt { transform: rotate(6deg); }
/* Green "all clear" variant — report.php status stamps */
.stamp-badge-ok { border-color: #2f6b4f; color: #2f6b4f; }

/* Accent word inside a headline (e.g. one word of the hero title) */
.text-accent { color: var(--ni-red-bright); }

/* ---------- "Site under construction" banner ----------
   #mainNav sits right below it via --banner-h, which main.js keeps in
   sync with the banner's real rendered height — instead of a guessed
   pixel value that breaks the moment the text wraps to another line
   on a narrow phone. */
.growing-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: var(--ni-ink);
    color: #fff;
}
#mainNav { top: var(--banner-h); }
@media (max-width: 767.98px) {
    .growing-banner span { display: block; }
}

/* ---------- Navbar ----------
   Solid and calm on top of the banner, instead of repeating the
   brand gradient a third time — the gradient is reserved for the
   community "boarding pass" card as a signature accent. */
.navbar {
    background: #fff;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    box-shadow: 0 1px 0 var(--ni-border);
    transition: padding 0.2s, box-shadow 0.2s;
}
.navbar-scrolled {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    box-shadow: 0 10px 24px rgba(35, 21, 12, 0.08);
}
.navbar-brand img { display: block; }
/* Preenche o vão vazio entre a logo e o menu (que voltou a existir
   quando o Renato pediu pra desfazer o ajuste de espaçamento anterior
   e manter a distribuição antiga). Mesmo brilho do NEW is always
   better de sempre. margin-right:auto empurra o menu (que já tem seu
   próprio ms-auto) pra ponta direita, então o slogan fica coladinho
   na logo em vez de flutuar solto no meio do vão. Só aparece em telas
   BEM largas (xxl, 1400px+): testado a 1280px e o slogan espremia o
   resto do menu, chegando a sobrepor o botão de CTA com o ícone de
   chat. A 1600px sobra espaço de sobra pra ele existir sem apertar
   nada. */
/* Virou um selinho (pill) em vez de texto solto com uma linha do lado:
   o Renato achou "muito simples" a primeira versão. Ícone + fundo
   lavado + borda + sombra dão o mesmo peso visual de um badge de
   verdade, do mesmo jeito que o resto do site usa (stamp-badge,
   fp-chip). O brilho fica só no texto (span de dentro), não no fundo
   do selinho. */
.navbar-gap-slogan {
    align-items: center;
    gap: 7px;
    margin-left: 18px;
    margin-right: auto;
    padding: 7px 16px 7px 13px;
    border-radius: var(--ni-radius-pill);
    background: var(--ni-wash);
    border: 1px solid rgba(134, 32, 41, 0.18);
    box-shadow: var(--ni-shadow-sm);
}
.navbar-gap-slogan i { color: var(--ni-red); font-size: 0.82rem; }
.navbar-gap-slogan > span {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    background: linear-gradient(90deg, var(--ni-red) 0%, var(--ni-red) 42%, #ffe3a3 50%, var(--ni-red) 58%, var(--ni-red) 100%);
    background-size: 250% auto;
    color: var(--ni-red);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: footer-slogan-shine 4s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
    .navbar-gap-slogan > span { animation: none; background-position: 50% center; }
}
.nav-link {
    color: var(--ni-ink) !important;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.85rem !important;
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.2rem;
    height: 2px;
    background: var(--ni-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s;
}
.nav-link:hover { color: var(--ni-red) !important; }
.nav-link:hover::after { transform: scaleX(1); }
/* No mobile o nav-link vira um bloco 100% de largura (menu colapsado
   empilhado), então esse sublinhado de hover, pensado pra cobrir só a
   largura do texto no desktop, virava uma barra vermelha esticando a
   tela inteira ao tocar num item (achado do Renato: "SOBRE" com uma
   barra enorme embaixo). Mobile não tem hover de verdade mesmo (é
   toque), então essa decoração some abaixo do breakpoint lg. */
@media (max-width: 991.98px) {
    .nav-link::after { display: none; }
    /* No desktop o :focus-visible quase nunca aparece (o clique do mouse
       nao conta como foco visivel). No touch do celular ele aparece toda
       hora ao tocar em SOBRE/INTERCAMBIOS/etc, e o anel nao combinava
       com o resto do menu (Renato, 07/09/2026). O menu mobile ja mostra
       claramente qual item esta aberto (fica vermelho), entao o anel de
       foco some aqui e o desktop fica intacto. */
    .nav-link:focus-visible {
        outline: none;
        box-shadow: none;
    }
    /* #mainNav inteiro é fixed-top, e o menu colapsado (#navMenu) vive
       dentro dele sem limite de altura próprio. Um dropdown grande
       aberto (Intercâmbios, Serviços) podia crescer mais alto que a
       tela, e como o elemento é fixed (não rola com a página), o que
       passava da borda de baixo simplesmente não existia em lugar
       nenhum pra rolar até (achado do NEWZinho: "Trabalho Voluntário"
       sumia por completo num Android comum de 360x800). Rolagem
       própria aqui resolve, sem depender do menu caber inteiro.

       IMPORTANTE: não dá pra usar var(--nav-h) aqui. Ela é o
       offsetHeight do #mainNav inteiro (main.js), e quando o menu está
       aberto isso JÁ INCLUI a altura do menu expandido — um cálculo que
       se auto-referencia. No primeiro teste isso zerava o max-height
       assim que o menu abria (medido: collapseMaxH virava "0px" na
       hora H). 76px é a altura real da barra (logo + hamburguer),
       medida direto (--nav-h antes do JS rodar já usava esse mesmo
       número como palpite inicial, ver :root). */
    .navbar-collapse.show {
        max-height: calc(100vh - var(--banner-h) - 76px);
        overflow-y: auto;
    }
}
.btn-nav-cta {
    background: var(--ni-red);
    color: #fff !important;
    font-weight: 700;
    border-radius: var(--ni-radius-pill);
    padding: 0.55rem 1.3rem;
    font-size: 0.88rem;
    text-decoration: none;
    box-shadow: var(--ni-shadow-sm);
    transition: background 0.2s;
    /* Sem isso o texto quebra linha (virava "Falar / com / a / gente"
       empilhado) sempre que o navbar ficava um pouco apertado, mesmo
       sobrando espaço de verdade na tela (achado do Renato em 07/09). Um
       botão de CTA nunca deveria quebrar assim. */
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-nav-cta:hover { background: var(--ni-red-bright); }

/* "Sobre" dropdown — restyled from Bootstrap's default plain white menu.
   The chevron is a manual icon (not Bootstrap's ::after caret), since
   .nav-link already uses ::after for its own underline animation. */
.nav-link.dropdown-toggle .bi-chevron-down {
    font-size: 0.65em;
    margin-left: 4px;
    transition: transform 0.2s;
}
.nav-link.dropdown-toggle.show .bi-chevron-down { transform: rotate(180deg); }
.navbar .dropdown-menu {
    /* A sombra sozinha (--ni-shadow, bem difusa) some contra o próprio
       navbar branco: o topo do menu encosta no navbar e os dois viram um
       branco só, sem separação visível (achado do Renato em 07/09). A
       borda fina é o que realmente demarca onde o menu começa. Mesmo com
       a borda, ainda ficou apagado (achado do Renato em seguida): o topo
       vinho é o toque de cor que faz o menu parecer aberto de verdade,
       não só uma sombra fraca. */
    border: 1px solid var(--ni-border);
    border-top: 3px solid var(--ni-red);
    border-radius: var(--ni-radius);
    box-shadow: var(--ni-shadow);
    /* Cada submenu tem uma largura diferente e nasce embaixo de um botão
       num lugar diferente do navbar: um abria "no meio" da tela, outro
       "encostado" na esquerda, o de Serviços na direita (achado do
       Renato: "vamos padronizar"). Centralizar no próprio botão ainda
       deixava cada um num x diferente da tela; o pedido era sempre o
       mesmo lugar, o centro da tela. position:fixed tira o menu do
       fluxo do botão e centraliza direto no viewport, igual para
       qualquer item clicado. Só funciona com data-bs-display="static"
       no toggle. Mas mesmo com o Popper desligado, o próprio Bootstrap
       ainda escreve position/left/transform inline no elemento via JS
       (confirmado medindo o computed style: position virava "absolute"
       de novo, com um left/transform diferente por botão). Estilo
       inline sempre vence CSS externo, então só !important consegue
       sobrescrever isso de verdade. */
    position: fixed !important;
    top: calc(var(--banner-h) + var(--nav-h)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    padding: 8px;
}
.navbar .dropdown-item {
    font-weight: 700;
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ni-ink);
    border-radius: 10px;
    padding: 8px 14px;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: var(--ni-paper-alt);
    color: var(--ni-red);
}
.navbar .dropdown-item i {
    width: 1.1em;
    text-align: center;
    color: var(--ni-red);
    font-size: 0.95em;
}

/* ---------- NEW Serviços mega-menu (nav.php) ----------
   10 services in one flat alphabetical list read as cluttered, so this
   groups them into labeled columns instead. NEW Games and NEW POV moved
   out to the new Comunidade dropdown (07/09/2026), so this is down to 3
   columns. Wider than a normal dropdown, so it's right-aligned to the
   toggle (dropdown-menu-end) to avoid spilling past the right edge of
   the viewport. */
.dropdown-menu-mega {
    padding: 20px 22px;
    border-radius: var(--ni-radius);
}
.dropdown-menu-mega.show {
    display: grid;
    grid-template-columns: repeat(3, minmax(168px, 1fr));
    gap: 4px 24px;
    min-width: 540px;
    max-width: min(620px, 92vw);
}
/* Comunidade só tem 2 categorias de verdade (Grupos, Interação): forçar
   a mesma grade de 3 colunas do Serviços deixava uma terceira coluna
   vazia do lado. Um carimbo decorativo já tentou preencher esse buraco,
   mas o Renato achou confuso sem necessidade nenhuma ali. Mais simples:
   essa dropdown só pede 2 colunas mesmo, do tamanho do que ela tem. */
.dropdown-menu-mega-2col.show {
    grid-template-columns: repeat(2, minmax(190px, 1fr));
    /* "Grupo no WhatsApp" quase encostava na coluna vizinha com o gap
       padrão de 24px (achado do Renato): aqui precisa de mais respiro. */
    column-gap: 40px;
    min-width: 420px;
    max-width: min(480px, 92vw);
}
/* Intercâmbios com 4 categorias: empilhar 2 categorias por coluna (o
   -2col acima) ficou com pouca separação entre elas e alturas
   desiguais nas duas colunas (achado do Renato: "tá feio"). Uma
   categoria por coluna, lado a lado, é mais limpo. */
.dropdown-menu-mega-4col.show {
    /* Alargar sozinho não resolvia "profissionalizantes": mesmo com a
       coluna mais larga o rótulo (descontado ícone+gap) nunca ia caber
       a palavra inteira numa linha só. O hifens:auto do .dropdown-item-
       label é quem resolve de verdade agora; a largura aqui só precisa
       dar um respiro razoável, não caçar a palavra mais longa. */
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 4px 28px;
    min-width: 780px;
    max-width: min(900px, 94vw);
}
/* Sem min-width:0 um item de grid não encolhe além do "min-content" do
   que tem dentro (mesma regra do flexbox). Com uma palavra longa tipo
   "profissionalizantes" isso empurrava a coluna inteira pra fora do
   menu em vez de quebrar linha (achado do Renato: "Faculdade e
   Profissionaliza" cortado). */
.dropdown-mega-col { min-width: 0; }
/* Cinza discreto demais depois que o topo vinho entrou do lado (achado do
   Renato em seguida): a categoria some perto de tanta cor. Agora usa o
   vinho da marca também, com sublinhado na mesma cor em vez de cinza. */
.dropdown-mega-heading {
    font-size: 0.74rem;
    /* 800 não existe de verdade: o Google Fonts só carrega a Montserrat em
       400/500/700 (ver header.php), então esse peso caía num 400 comum em
       vez de negrito de verdade, achado do Renato ("perde a notoriedade"). */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(134, 32, 41, 0.25);
    /* Mesmo brilho do NEW is always better, pedido do Renato pro título
       também. */
    background: linear-gradient(90deg, var(--ni-red) 0%, var(--ni-red) 42%, #ffe3a3 50%, var(--ni-red) 58%, var(--ni-red) 100%);
    background-size: 250% auto;
    color: var(--ni-red);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: footer-slogan-shine 4s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
    .dropdown-mega-heading { animation: none; background-position: 50% center; }
}
.dropdown-mega-col .dropdown-item {
    /* nowrap ficava bom com rótulos curtos (NEW Vistos, NEW Tour...), mas
       "Faculdade e Profissionalizantes" e "Pós-graduação e Mestrado"
       (Intercâmbios) estouravam o menu pra fora, cortados. align-items
       flex-start em vez de center porque agora o texto pode quebrar em 2
       linhas, e o ícone precisa ficar alinhado com a primeira linha, não
       centralizado no bloco inteiro. */
    display: flex;
    align-items: flex-start;
    gap: 8px;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.25;
}
/* overflow-wrap sozinho não bastou: um item de flex, por padrão, não
   encolhe abaixo do "min-content" do texto (mesma regra do min-width:0
   do grid, mas dentro do próprio link). "Profissionalizantes" inteiro
   forçava o link mais largo que a coluna e estourava para fora, mesmo
   com quebra de linha ligada. O rótulo precisa ser um item de flex
   próprio (não só texto solto) para o min-width:0 valer de verdade. */
/* flex-basis auto (não 0%) para não quebrar linha à toa: com base 0% o
   rótulo começava sem largura nenhuma e podia quebrar antes de precisar
   de verdade (achado: "NEW Referral" quebrando mesmo cabendo numa linha
   só). Com auto ele parte do tamanho natural do texto, só encolhe e
   quebra quando realmente não cabe. */
/* "Profissionalizantes" ainda quebrava feio no meio mesmo com a coluna
   mais larga (achado do Renato: virava "PROFISSIONALIZANT/ES" sem
   hífen, parecia erro). hyphens:auto deixa o navegador quebrar num
   ponto de sílaba de verdade, com hífen visível, só quando precisa
   (html lang="pt-br" já existe em header.php, o idioma certo pra
   isso funcionar). */
.dropdown-item-label {
    min-width: 0;
    flex: 1 1 auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
.dropdown-mega-col .dropdown-item i { margin-top: 0.15em; }
/* O slogan mora aqui dentro do submenu, não no navbar: colado na logo ele
   "populava" o menu principal e ficou feio (achado do Renato em 07/09).
   Virou rodapé do cartão a princípio, mas com 5 categorias (Experiência
   Profissional e Suporte Especializado entraram depois) a segunda linha
   do grid ficava com uma coluna vazia do lado, um buraco visível (achado
   do Renato em seguida). Agora o slogan mora dentro desse próprio buraco,
   como uma sexta "categoria" que preenche o espaço em vez de sobrar. */
.dropdown-mega-slogan {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Carimbo de verdade, igual ao .stamp-badge usado no resto do site, só que
   invertido (fundo vinho, letra branca) para se destacar dentro do
   submenu claro, em vez do cartão cinza apagado de antes (achado do
   Renato). */
.mega-stamp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: var(--ni-red);
    border: 2px dashed rgba(255, 255, 255, 0.55);
    box-shadow: var(--ni-shadow-sm);
    padding: 12px;
    text-align: center;
    animation: mega-stamp-pulse 2.4s ease-in-out infinite;
}
@keyframes mega-stamp-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .mega-stamp { animation: none; }
}
.nav-slogan-mega {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.25;
    /* Mesmo brilho de sempre, só que branco/dourado em vez de vinho/dourado,
       porque agora o fundo é vinho e não dá pra usar vinho no texto também. */
    background: linear-gradient(90deg, #fff 0%, #fff 42%, #ffe3a3 50%, #fff 58%, #fff 100%);
    background-size: 250% auto;
    color: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: footer-slogan-shine 4s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
    .nav-slogan-mega { animation: none; background-position: 50% center; }
}
@media (max-width: 991.98px) {
    .dropdown-menu-mega.show {
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-width: 0;
        max-width: none;
        /* O !important aqui é pra vencer o !important da versão desktop
           (position:fixed lá), não o Bootstrap desta vez. transform
           sobrevive a position:static (só left/top são ignorados), então
           sem resetar os dois o translateX(-50%) da centralização de
           desktop empurrava o menu pra fora da tela no celular. */
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        box-shadow: none;
        border: 1px solid var(--ni-border);
    }
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    background: var(--ni-ink);
    color: #fff;
    padding: 108px 0 96px;
    text-align: center;
    overflow: hidden;
}
.hero::before {
    /* Soft brand-red glow + a faint diagonal weave, instead of a flat gradient block */
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(760px 460px at 50% -12%, rgba(178, 34, 52, 0.4), transparent 70%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 20px);
    pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-title {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    color: #fff;
    margin: 28px 0 20px;
}
.hero-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.82);
    max-width: 46rem;
    margin: 0 auto;
}
.btn-hero-primary {
    background: #fff;
    color: var(--ni-red);
    font-weight: 700;
    border-radius: var(--ni-radius-pill);
    padding: 0.75rem 1.75rem;
    border: none;
}
.btn-hero-primary:hover { background: var(--ni-paper-alt); color: var(--ni-red-bright); }
.btn-hero-secondary {
    background: transparent;
    color: #fff;
    font-weight: 700;
    border-radius: var(--ni-radius-pill);
    padding: 0.75rem 1.75rem;
    border: 2px solid rgba(255, 255, 255, 0.6);
}
.btn-hero-secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

/* Same idea as .btn-hero-secondary, but for a light-background section
   instead of a dark hero — white-on-white would be invisible there. */
.btn-hero-secondary-alt {
    background: transparent;
    color: var(--ni-ink);
    font-weight: 700;
    border-radius: var(--ni-radius-pill);
    padding: 0.75rem 1.75rem;
    border: 2px solid var(--ni-border);
}
.btn-hero-secondary-alt:hover { background: var(--ni-ink); border-color: var(--ni-ink); color: #fff; }

/* Quick-fact chips under the hero CTAs — a fast preview of the value props below */
.hero-facts { margin-top: 12px; }
.hero-fact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--ni-radius-pill);
}
.hero-fact i { color: var(--ni-red-bright); }

/* Small brand-slogan signature under every slide's content */
.hero-tagline {
    margin: 18px 0 0;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}
.hero-tagline-em { color: var(--ni-red-bright); font-weight: 800; }

/* ---------- Hero carousel ----------
   Plain Bootstrap 5 carousel (data-bs-ride="carousel") — no custom JS.
   Only the text card rotates; the dark background/glow from .hero stays
   put behind every slide, so slides feel like one continuous scene. */
.hero-carousel { position: relative; z-index: 1; }
.hero-carousel .carousel-item {
    min-height: 360px;
    display: flex;
    align-items: center;
}
.hero-carousel .carousel-item > .container { width: 100%; }

/* Photo panel for slides that carry an 'image' — a polaroid-style frame,
   tying into the stamp/scrapbook motif already used across the site
   (community's boarding pass, the dashed stamp badges). */
.hero-photo-frame {
    display: inline-block;
    background: #fff;
    padding: 10px 10px 34px;
    border-radius: 10px;
    box-shadow: var(--ni-shadow);
    transform: rotate(-3deg);
    max-width: 380px;
}
.hero-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Scrapbook-style stack of 2-3 photos (for 'images'), instead of one lone
   frame — reads as a handful of real moments rather than a single stock shot. */
.hero-photo-stack {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 340px;
    margin: 0 auto;
}
.hero-photo-stack .hero-photo-frame {
    position: absolute;
    margin: 0;
    max-width: none;
    /* smooth shuffle when JS rotates which photo sits in which slot */
    transition: left 0.7s ease, top 0.7s ease, transform 0.7s ease, opacity 0.5s ease, width 0.7s ease;
}
/* The stack's frames sit at fixed positions inside a fixed-height container
   (.hero-photo-stack below) — height:auto (the default .hero-photo rule)
   only looks right for roughly-landscape source photos. A portrait phone
   photo (interacaoschool.php's vancouver-2025 picks, colegiofundamentum's
   group-toronto-* photos — both are 3:4/9:16-ish) renders much taller than
   the frame budget and overflows past the hero, cutting into the section
   below on mobile. Scoped to the stack only (not the single-photo
   .hero-photo-frame used elsewhere) so this doesn't change anything outside
   the stack context. */
.hero-photo-stack .hero-photo {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.hero-photo-frame-1 { top: 6px; left: 0; width: 210px; transform: rotate(-9deg); z-index: 1; }
.hero-photo-frame-2 { top: 22px; left: calc(100% - 210px); width: 210px; transform: rotate(8deg); z-index: 2; }
.hero-photo-frame-3 { top: 46px; left: 50%; width: 250px; transform: translateX(-50%) rotate(-2deg); z-index: 3; }
/* photos beyond the 3 visible slots (or mid-rotation) wait here, invisible */
.hero-photo-frame-hidden { opacity: 0; z-index: 0; pointer-events: none; }
@media (max-width: 575.98px) {
    .hero-photo-stack { max-width: 300px; height: 290px; }
    .hero-photo-frame-1 { width: 170px; }
    .hero-photo-frame-2 { width: 170px; left: calc(100% - 170px); }
    .hero-photo-frame-3 { width: 210px; }
}

/* Discord "chat preview" mockup card (slide 2) — stands in for a photo,
   giving a peek at the community in action instead of a plain icon. */
.discord-preview-card {
    display: inline-block;
    background: #fff;
    border-radius: var(--ni-radius);
    box-shadow: var(--ni-shadow);
    padding: 26px;
    width: 100%;
    max-width: 380px;
    text-align: left;
    transform: rotate(1.5deg);
}
.discord-preview-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ni-border);
}
.discord-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #5865F2;
    color: #fff;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.discord-preview-header strong { font-size: 0.95rem; color: var(--ni-ink); }
.discord-preview-status {
    font-size: 0.78rem;
    color: var(--ni-slate);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #43b581; display: inline-block; flex-shrink: 0; }

.discord-message { display: flex; gap: 12px; margin-bottom: 16px; }
.discord-message:last-child { margin-bottom: 0; }
.discord-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ni-paper-alt);
    color: var(--ni-slate);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.discord-avatar-brand { background: var(--ni-red); color: #fff; }
.discord-message strong { font-size: 0.82rem; color: var(--ni-ink); display: block; }
.discord-message p { font-size: 0.88rem; color: var(--ni-slate); margin: 3px 0 0; line-height: 1.4; }
.discord-message-reply p { color: var(--ni-ink); }
@media (max-width: 575.98px) {
    .discord-preview-card { padding: 20px; transform: none; }
}

/* NEW Referral "reward + ranking" mockup card (slide 3) */
.referral-preview-card {
    display: inline-block;
    background: #fff;
    border-radius: var(--ni-radius);
    box-shadow: var(--ni-shadow);
    padding: 30px;
    width: 100%;
    max-width: 380px;
    text-align: left;
    transform: rotate(-1.5deg);
}
.referral-section-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ni-slate);
    font-weight: 700;
    margin-bottom: 10px;
}
.referral-ranking { margin-bottom: 4px; }
.referral-rank {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.88rem;
    color: var(--ni-ink);
    padding: 7px 0;
}
.referral-rank strong { color: var(--ni-red); white-space: nowrap; }
.referral-divider { height: 1px; background: var(--ni-border); margin: 18px 0 16px; }
.referral-bonus-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.referral-amount-value {
    font-family: 'Fraunces', serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--ni-red);
    line-height: 1;
}
.referral-bonus-note { font-size: 0.76rem; color: var(--ni-slate); }
@media (max-width: 575.98px) {
    .referral-preview-card { padding: 22px; transform: none; }
    .referral-amount-value { font-size: 1.6rem; }
}
.referral-lead { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 700; color: var(--ni-ink); margin-bottom: 6px; }
.referral-note-text { font-size: 0.82rem; color: var(--ni-slate); margin-bottom: 16px; }

/* NEW Referral page (newreferral.php) — intro checklist, ranking update
   callout, and the CAD $150 bonus highlight. */
.referral-check-list { display: flex; flex-direction: column; gap: 22px; }
.referral-check-item { display: flex; align-items: flex-start; gap: 14px; }
.referral-check-item i { color: var(--ni-red); font-size: 1.3rem; margin-top: 2px; flex-shrink: 0; }
.referral-check-item strong { display: block; color: var(--ni-ink); margin-bottom: 2px; }
.referral-check-item span { color: var(--ni-slate); font-size: 0.92rem; }

.referral-update-note {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--ni-border);
    border-radius: var(--ni-radius);
    box-shadow: var(--ni-shadow-sm);
    padding: 18px 22px;
}
.referral-update-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.referral-update-text { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.referral-update-text strong { color: var(--ni-ink); font-size: 0.92rem; }
.referral-update-text span { color: var(--ni-slate); font-size: 0.8rem; }
.referral-update-link { font-weight: 700; color: var(--ni-red); text-decoration: none; white-space: nowrap; }
.referral-update-link:hover { text-decoration: underline; }

.referral-bonus-highlight {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 14px 28px;
    background: var(--ni-ink);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: var(--ni-radius-pill);
}
.referral-bonus-highlight i { color: #35d07f; }

/* Warning variant of .fp-trust-note — amber instead of red, for legal/rules notices */
.fp-trust-note-warning { background: #fff8e8; border-color: #f0d999; align-items: flex-start; }
.fp-trust-note-warning i { color: #b8860b; }
.fp-trust-note-warning strong { color: var(--ni-ink); display: block; margin-bottom: 4px; }
.fp-trust-note-warning p { color: var(--ni-slate); font-size: 0.88rem; }

/* Dot indicators, restyled from Bootstrap's default bars */
.hero-carousel .carousel-indicators { margin-bottom: 0; }
.hero-carousel .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
    border: none;
    opacity: 1;
    transition: background-color 0.2s, transform 0.2s;
}
.hero-carousel .carousel-indicators .active {
    background-color: var(--ni-red-bright);
    transform: scale(1.3);
}

/* Arrow controls — a small circular chip instead of Bootstrap's default glyph */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
    width: 64px;
    opacity: 1;
}
.hero-carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 1.1rem;
    transition: background 0.2s, border-color 0.2s;
}
.hero-carousel .carousel-control-prev:hover .hero-carousel-arrow,
.hero-carousel .carousel-control-next:hover .hero-carousel-arrow {
    background: var(--ni-red);
    border-color: var(--ni-red);
}
@media (max-width: 767.98px) {
    /* Dots + swipe are enough on mobile; the side arrows crowd a narrow screen */
    .hero-carousel .carousel-control-prev,
    .hero-carousel .carousel-control-next { display: none; }
}

/* ---------- General sections ---------- */
/* Keeps anchor links (menu items like #sobre, #comunidade) from landing
   partially under the fixed banner + navbar, on any screen size */
section, header.hero { scroll-margin-top: calc(var(--banner-h) + var(--nav-h) + 16px); }
.section-title {
    font-size: clamp(1.7rem, 3vw, 2.35rem);
}
/* Alternating white / light-grey backgrounds so each section reads as
   its own block, instead of blending into one undifferentiated pale area
   between the two dark bookends (hero and the Instagram CTA). */
.section-about { padding: 100px 0; background: var(--ni-paper-alt); }
.section-value-props { padding: 100px 0; background: var(--ni-paper); }
.section-offices { padding: 100px 0; background: var(--ni-paper); }
.section-blog-preview { padding: 100px 0; background: var(--ni-paper-alt); }

/* ---------- About ---------- */
.about-text { color: var(--ni-slate); margin-bottom: 18px; }
.about-text:last-of-type { margin-bottom: 20px; }

.about-more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--ni-red);
    margin-bottom: 20px;
}
.about-more-link:hover { color: var(--ni-red-bright); }
.about-more-link i { font-size: 0.85em; transition: transform 0.15s ease; }
.about-more-link:hover i { transform: translateX(3px); }

.about-programs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.about-tag {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--ni-border);
    border-radius: var(--ni-radius-pill);
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ni-ink);
}

.about-stats { border-top: 1px solid var(--ni-border); padding-top: 24px; }
.about-stat-value {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--ni-red);
    line-height: 1.1;
}
.about-stat-label {
    display: block;
    font-size: 0.78rem;
    color: var(--ni-slate);
    margin-top: 4px;
}

/* "Company passport" card — the stamp/travel motif applied to the
   founding facts, instead of a plain bulleted list. */
.about-passport-card {
    position: relative;
    display: inline-block;
    text-align: left;
    background: #fff;
    border-radius: var(--ni-radius);
    box-shadow: var(--ni-shadow);
    padding: 32px;
    width: 100%;
    max-width: 420px;
}
.about-passport-seal {
    position: absolute;
    top: -20px;
    right: 20px;
    z-index: 1;
    /* Bigger than the standard small badge — "Canadense" needs the room */
    width: 84px;
    height: 84px;
    font-size: 0.58rem;
}
.about-passport-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    margin-bottom: 6px;
    border-bottom: 2px dashed var(--ni-border);
}
.about-passport-eyebrow {
    font-family: 'Fraunces', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ni-ink);
}
.about-passport-icon { color: var(--ni-red); font-size: 1.4rem; }
.about-passport-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ni-border);
}
.about-passport-row:last-child { border-bottom: none; padding-bottom: 0; }
.about-passport-label {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ni-slate);
    font-weight: 700;
    white-space: nowrap;
}
.about-passport-value {
    font-size: 0.92rem;
    color: var(--ni-ink);
    font-weight: 600;
    text-align: right;
}
@media (max-width: 575.98px) {
    .about-passport-card { padding: 26px; }
    .about-passport-seal { top: -16px; right: 16px; }
}

/* ---------- Shared card system ----------
   value-card, office-card and blog-preview-card all carry this class
   so hovering across the site feels like one consistent surface,
   with a red hairline accent that draws in on hover. */
.card-surface {
    position: relative;
    background: #fff;
    border: 1px solid var(--ni-border);
    border-radius: var(--ni-radius);
    box-shadow: var(--ni-shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.card-surface::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    background: var(--ni-red);
    border-radius: 0 0 3px 3px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.card-surface:hover {
    transform: translateY(-4px);
    box-shadow: var(--ni-shadow);
    border-color: rgba(134, 32, 41, 0.18);
}
.card-surface:hover::before { transform: scaleX(1); }

/* Faint diagonal texture behind the section, echoing the hero's weave
   at a much lower key so it works on a light background */
.section-value-props { position: relative; overflow: hidden; }
.section-value-props::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, rgba(35, 21, 12, 0.025) 0 2px, transparent 2px 22px);
    pointer-events: none;
}
.section-value-props .container { position: relative; z-index: 1; }

/* ---------- Value cards ----------
   Each reason gets its own stamp badge (the site's signature element)
   as an icon holder, plus a giant faint numeral watermark behind the
   text — instead of a plain icon tile, so the cards read as "certified
   reasons" rather than a generic feature grid. */
.value-card { position: relative; height: 100%; text-align: left; padding: 40px 32px 32px; overflow: hidden; }
.value-index-watermark {
    position: absolute;
    top: -10px;
    right: 8px;
    font-family: 'Fraunces', serif;
    font-size: 5.5rem;
    font-weight: 700;
    color: rgba(134, 32, 41, 0.07);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}
.value-stamp {
    position: relative;
    z-index: 1;
    width: 76px;
    height: 76px;
    font-size: 1.6rem;
    margin-bottom: 22px;
}
/* Os cartoes numerados das paginas internas (netgame, quemsomos, newlink,
   philanthropy e outras) usam .value-index e .value-icon-chip, que nunca
   tiveram estilo nenhum: o numero saia como um texto solto e o icone como um
   glifo preto pequeno. Recebem aqui o mesmo tratamento dos cartoes da pagina
   inicial (.value-index-watermark + .value-stamp): numeral gigante e apagado
   no canto, e o icone dentro do selo pontilhado da marca. Achado do NEWZinho
   em 20/09/2026. */
.value-index {
    position: absolute;
    top: -10px;
    right: 8px;
    font-family: 'Fraunces', serif;
    font-size: 5.5rem;
    font-weight: 700;
    color: rgba(134, 32, 41, 0.07);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}
.value-icon-chip {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 22px;
    border: 2px dashed var(--ni-red);
    border-radius: 50%;
    background: #fff;
    color: var(--ni-red);
    font-size: 1.6rem;
    transform: rotate(-7deg);
    box-shadow: var(--ni-shadow-sm);
}
.value-title { position: relative; z-index: 1; font-size: 1.25rem; margin-bottom: 10px; }
.value-text { position: relative; z-index: 1; color: var(--ni-slate); font-size: 0.96rem; margin-bottom: 0; }

/* ---------- Community (Discord) ----------
   A single, centered "widget" card instead of the old boarding-pass
   motif — Discord's own "blurple" is used here (and only here) as an
   accent, since this card is explicitly about that integration. */
.section-community { padding: 100px 0; background: var(--ni-paper-alt); }
.community-card {
    position: relative;
    max-width: 480px;
    width: 100%;
    background: #fff;
    border-radius: var(--ni-radius);
    box-shadow: var(--ni-shadow);
    padding: 56px 40px;
    overflow: hidden;
}
.community-card::before {
    /* Soft Discord-blurple glow in the corner — decorative only */
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(88, 101, 242, 0.16), transparent 70%);
    pointer-events: none;
}
/* Same card, WhatsApp-green glow instead of Discord-blurple — same
   brand-borrowing pattern used throughout the site (each platform's own
   color only inside its own dedicated card). */
.community-card-whatsapp::before {
    background: radial-gradient(circle, rgba(37, 211, 102, 0.16), transparent 70%);
}
.community-card > * { position: relative; z-index: 1; }
.community-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}
.discord-mark { width: 34px; height: auto; flex-shrink: 0; }
.community-live-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ni-ink);
    margin-bottom: 20px;
}
.community-avatars {
    display: flex;
    justify-content: center;
    min-height: 40px;
    margin-bottom: 8px;
}
.community-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid #fff;
    margin-left: -12px;
    object-fit: cover;
    background: var(--ni-paper-alt);
    box-shadow: var(--ni-shadow-sm);
}
.community-avatar:first-child { margin-left: 0; }
.community-text { color: var(--ni-slate); margin: 0 auto 8px; max-width: 34rem; }
.community-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 20px 0 30px;
}
.community-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ni-paper-alt);
    border: 1px solid var(--ni-border);
    border-radius: var(--ni-radius-pill);
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ni-ink);
}
.btn-discord-cta {
    display: inline-flex;
    align-items: center;
    background: #5865f2;
    color: #fff;
    font-weight: 700;
    border-radius: var(--ni-radius-pill);
    padding: 0.75rem 1.75rem;
    border: none;
    text-decoration: none;
}
.btn-discord-cta:hover { background: #4752c4; color: #fff; }
.btn-whatsapp-cta {
    display: inline-flex;
    align-items: center;
    background: #25d366;
    color: #fff;
    font-weight: 700;
    border-radius: var(--ni-radius-pill);
    padding: 0.75rem 1.75rem;
    border: none;
    text-decoration: none;
}
.btn-whatsapp-cta:hover { background: #1da851; color: #fff; }
.community-note { margin-top: 14px; font-size: 0.8rem; color: var(--ni-slate); }

.status-dot-live {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #6b7280;
    display: inline-block;
    flex-shrink: 0;
    transition: background 0.3s;
}
.status-dot-live.is-live {
    background: #3ba55c;
    animation: status-dot-pulse 2s infinite;
}
@keyframes status-dot-pulse {
    0% { box-shadow: 0 0 0 0 rgba(59, 165, 92, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(59, 165, 92, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 165, 92, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .status-dot-live.is-live { animation: none; }
}
@media (max-width: 767.98px) {
    .community-card { padding: 40px 28px; }
}

/* ---------- Offices ----------
   Each office reads as its own "visa stamp" — a stamp-badge holding the
   flag, plus a big faint map-pin watermark, tying the section into the
   same passport/stamp language as the rest of the site. */
.section-offices { position: relative; overflow: hidden; }
.section-offices::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, rgba(35, 21, 12, 0.02) 0 2px, transparent 2px 22px);
    pointer-events: none;
}
.section-offices .container { position: relative; z-index: 1; }

.office-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 24px 24px;
    overflow: hidden;
}
.office-watermark-pin {
    position: absolute;
    top: 20px;
    right: 18px;
    font-size: 2rem;
    color: rgba(134, 32, 41, 0.08);
    pointer-events: none;
    z-index: 0;
}
.office-stamp { position: relative; z-index: 1; width: 54px; height: 54px; font-size: 1.25rem; margin-bottom: 14px; }
.office-name { position: relative; z-index: 1; font-size: 1.02rem; margin-bottom: 8px; }
.office-address { position: relative; z-index: 1; font-size: 0.84rem; color: var(--ni-slate); margin-bottom: 14px; }
.office-contacts { position: relative; z-index: 1; font-size: 0.84rem; margin-bottom: 4px; }
.office-contacts li { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.office-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(134, 32, 41, 0.08);
    color: var(--ni-red);
    font-size: 0.72rem;
    flex-shrink: 0;
}
.office-contacts a {
    color: var(--ni-ink);
    text-decoration: none;
    /* The email has no spaces to wrap at — without min-width:0 a flex
       item won't shrink below its unwrapped width, pushing it flush
       against the card's edge instead of wrapping cleanly. */
    min-width: 0;
    overflow-wrap: break-word;
}
.office-contacts a:hover { color: var(--ni-red); }
.office-map-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ni-red);
    text-decoration: none;
}
.office-map-link:hover { color: var(--ni-red-bright); }
.office-map-link i { font-size: 0.8rem; transition: transform 0.2s; }
.office-map-link:hover i { transform: translateX(3px); }

/* ---------- Blog preview ---------- */
.link-see-all { font-weight: 700; color: var(--ni-red); text-decoration: none; white-space: nowrap; }
.link-see-all:hover { color: var(--ni-red-bright); }
.blog-preview-card {
    display: block;
    padding: 32px;
    height: 100%;
    text-decoration: none;
    color: var(--ni-ink);
}
.blog-preview-card:hover { color: var(--ni-ink); }
.blog-preview-category {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ni-red);
    margin-bottom: 12px;
}
.blog-preview-title { font-size: 1.15rem; margin-bottom: 10px; }
.blog-preview-excerpt { font-size: 0.9rem; color: var(--ni-slate); margin-bottom: 16px; }
.blog-preview-link { font-weight: 700; font-size: 0.88rem; color: var(--ni-red); }

/* ---------- Instagram CTA ----------
   Instagram's own gradient is used here (and only here) as an accent —
   same logic as Discord's blurple in the community section: borrow the
   platform's real brand color for its dedicated card. */
.section-instagram {
    padding: 96px 0;
    background: var(--ni-ink);
    color: #fff;
    overflow: hidden;
}
.instagram-text { color: rgba(255, 255, 255, 0.75); max-width: 34rem; margin: 18px 0 30px; }
.btn-instagram-cta {
    display: inline-flex;
    align-items: center;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    color: #fff;
    font-weight: 700;
    border-radius: var(--ni-radius-pill);
    padding: 0.75rem 1.75rem;
    border: none;
    text-decoration: none;
}
.btn-instagram-cta:hover { filter: brightness(1.08); color: #fff; }

/* "Instagram profile" preview card */
.instagram-embed-card {
    display: inline-block;
    background: #fff;
    border-radius: var(--ni-radius);
    box-shadow: var(--ni-shadow);
    padding: 24px;
    width: 100%;
    max-width: 380px;
    text-align: left;
}
.instagram-embed-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.instagram-avatar-ring {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    padding: 3px;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.instagram-avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--ni-ink);
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
}
.instagram-embed-meta strong { display: block; color: var(--ni-ink); font-size: 0.95rem; }
.instagram-embed-meta span { display: block; color: var(--ni-slate); font-size: 0.78rem; margin-top: 2px; }
.instagram-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.instagram-grid-item { aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--ni-paper-alt); }
.instagram-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Footer ----------
   Light background — deliberately the opposite of the dark Instagram
   section right above it, so the two never blend into one long dark
   block. Headings/hovers still borrow the navbar's own vocabulary
   (uppercase tracked labels, red on hover) so it reads as a continuation
   of the nav, just switched to the light side of the palette. */
/* Dark closing section, same recipe as .fp-hero (var(--ni-ink) base +
   a red glow + a diagonal hairline texture), instead of the flat
   --ni-paper-alt grey the footer used before: on a page full of light
   sections, a footer that's just another light section reads as an
   afterthought, not a deliberate close. The 3px red top edge marks
   where the page "ends" before the footer starts. content sits on
   ::before via position/z-index so the glow stays behind the text. */
.site-footer {
    position: relative;
    background: var(--ni-ink);
    color: rgba(255, 255, 255, 0.78);
    padding: 80px 0 32px;
    border-top: 3px solid var(--ni-red);
    overflow: hidden;
}
.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(680px 420px at 12% 0%, rgba(178, 34, 52, 0.28), transparent 70%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 20px);
    pointer-events: none;
}
.site-footer > .container { position: relative; z-index: 1; }
/* logo.png's "INTERCAMBIO" wordmark is dark grey, made for a light
   background, and all but disappears on this dark one; brightness(0)
   flattens the whole logo (icon included) to solid black first, then
   invert(1) flips that to solid white, since there's no separate
   light-background logo asset to swap in. */
.footer-logo { filter: brightness(0) invert(1); }
.footer-slogan {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 4px 0 20px;
    /* A bright glint (not just a second shade of red) sweeping across the
       dark base, two close reds side by side barely reads as movement. */
    background: linear-gradient(90deg, var(--ni-red) 0%, var(--ni-red) 42%, #ffe3a3 50%, var(--ni-red) 58%, var(--ni-red) 100%);
    background-size: 250% auto;
    color: var(--ni-red);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: footer-slogan-shine 4s ease-in-out infinite alternate;
}
@keyframes footer-slogan-shine {
    0% { background-position: 0% center; }
    100% { background-position: 100% center; }
}
@media (prefers-reduced-motion: reduce) {
    .footer-slogan { animation: none; background-position: 50% center; }
}
/* flex-wrap: com os nove canais oficiais a fileira nao cabe na coluna do rodape. */
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; max-width: 250px; }
.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1rem;
    transition: background 0.2s, color 0.2s;
}
.footer-social-icon:hover { background: var(--ni-red); color: #fff; }
/* Real ICEF Agency Status credential, a small verified-badge card
   linking out to ICEF's own certificate verifier (see footer.php's
   own comment for why it links out instead of showing a static date). */
.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--ni-radius);
    color: #fff;
    text-decoration: none;
    font-size: 0.78rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: border-color 0.2s, background 0.2s, transform 0.25s ease, box-shadow 0.25s ease;
}
.footer-badge i { color: var(--ni-red-bright); font-size: 1.3rem; display: inline-block; transition: transform 0.3s ease; }
.footer-badge small { color: rgba(255, 255, 255, 0.6); font-weight: 400; }
/* Same lift-and-glow language as .fp-include-item/.bio-link elsewhere
   on the site, plus a little checkmark "nod" on the icon, so a real
   verified credential feels like one, not just another text link. */
.footer-badge:hover {
    border-color: var(--ni-red-bright);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(178, 34, 52, 0.35);
}
.footer-badge:hover i { transform: scale(1.15) rotate(-10deg); }
@media (prefers-reduced-motion: reduce) {
    .footer-badge, .footer-badge i { transition: none; }
    .footer-badge:hover { transform: none; }
    .footer-badge:hover i { transform: none; }
}

/* Small red tick before each category heading: a recurring brand
   accent through the footer that doesn't rely on red-on-dark TEXT
   (poor contrast at this size), just a short decorative bar. */
.footer-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    margin-bottom: 18px;
}
.footer-heading::before {
    content: '';
    width: 14px;
    height: 2px;
    flex-shrink: 0;
    background: var(--ni-red-bright);
}
/* Uppercase everywhere, same treatment as nav.php's own .nav-link
   ("poe tudo maiusculo igual o menu"). Letter-spacing a touch tighter
   than the navbar's 0.03em: these lines wrap more often (narrower
   footer columns), and extra tracking makes wrapped caps text feel
   even more cramped. */
.footer-links { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.02em; }
.footer-links li { margin-bottom: 12px; }
.footer-links a {
    position: relative;
    display: inline-block;
    color: rgba(255, 255, 255, 0.72); text-decoration: none; transition: color 0.2s, transform 0.2s;
    /* Same fix as .office-contacts a: the e-mail address has no spaces to
       wrap at, and its <li> sits inside a Bootstrap column (a flex item),
       which won't shrink below an unwrapped child's width by default,
       without this, the address pushes the whole footer column (and the
       page) wider than the viewport on narrow phones. */
    overflow-wrap: break-word;
}
/* Underline sweeps in from the left and the whole link nudges right,
   same family as .nav-link's own underline (::after, scaleX 0 to 1)
   up in the main menu, so hovering a footer link feels like the same
   brand interaction, not a plain color change ("passa o mouse e nao
   faz mta coisa", Renato's words). Sits below the LAST line on the
   handful of labels that wrap to two lines (e.g. "Intercâmbio em
   Família"), which reads fine since it's anchored to the link's own
   box, not the column's. */
.footer-links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background: var(--ni-red-bright);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.footer-links a:hover { color: #fff; transform: translateX(4px); }
.footer-links a:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .footer-links a { transition: color 0.2s; }
    .footer-links a:hover { transform: none; }
}
.footer-units { color: rgba(255, 255, 255, 0.65); font-size: 0.9rem; margin: 0; text-transform: uppercase; letter-spacing: 0.02em; }

/* Second footer row: the two biggest nav categories (Intercâmbios,
   Serviços), each split into the same sub-groups as the mega-menu
   dropdown. A lighter sub-heading than .footer-heading so the
   hierarchy (category > sub-group > link) stays readable. */
.footer-sitemap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 24px 16px;
}
.footer-sublabel {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* 0.45 measured under WCAG AA's 4.5:1 minimum for small text
       (~4.3:1 against var(--ni-ink)); 0.55 clears it (~5.5:1),
       found by NEWZinho 08/09/2026. */
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 10px;
}

.footer-divider { border-color: rgba(255, 255, 255, 0.12); opacity: 1; margin: 40px 0; }
.footer-copyright { color: rgba(255, 255, 255, 0.55); font-size: 0.82rem; text-align: center; margin: 0; }
.footer-version {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--ni-radius-pill);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: middle;
}
.footer-version:hover { background: var(--ni-red); color: #fff; }

/* ---------- Fundamentum partner landing page (colegiofundamentum.php) ----------
   Not linked from the main nav — reached only via its direct URL — but it
   reuses the same header/nav/footer partials and design tokens as the
   rest of the site, so it still feels like NEW Intercambio. */
.fp-hero {
    position: relative;
    background: var(--ni-ink);
    color: #fff;
    padding: 100px 0 80px;
    text-align: center;
    overflow: hidden;
}
.fp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(760px 460px at 50% -12%, rgba(178, 34, 52, 0.4), transparent 70%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 20px);
    pointer-events: none;
}
.fp-hero .container { position: relative; z-index: 1; }

/* In-page sub-navigation, sticky right under the main navbar */
.fp-subnav {
    position: sticky;
    top: var(--nav-h);
    z-index: 1020;
    background: #fff;
    border-bottom: 1px solid var(--ni-border);
}
.fp-subnav-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 10px 0;
}
.fp-subnav-list a {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--ni-radius-pill);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ni-ink);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.fp-subnav-list a:hover { background: var(--ni-paper-alt); color: var(--ni-red); }

.fp-section {
    padding: 90px 0;
    background: var(--ni-paper);
    scroll-margin-top: calc(var(--nav-h) + 70px);
}
.fp-section-alt { background: var(--ni-paper-alt); }
.fp-text { color: var(--ni-slate); }

.fp-dates-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 20px;
    background: var(--ni-red);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    border-radius: var(--ni-radius-pill);
    box-shadow: var(--ni-shadow-sm);
}

.fp-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.fp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--ni-border);
    border-radius: var(--ni-radius-pill);
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ni-ink);
}
.fp-chip i { color: var(--ni-red); }
/* Chip preenchido, pra destacar uma opcao acima das outras dentro da
   mesma fp-chip-row (ex.: Ingles como o idioma mais procurado em
   intercambio-idiomas.php). */
.fp-chip-highlight {
    background: var(--ni-red);
    border-color: var(--ni-red);
    color: #fff;
    font-weight: 700;
}
.fp-chip-highlight i { color: #fff; }
.fp-chip-highlight small {
    font-weight: 500;
    font-size: 0.7rem;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.fp-visual-card {
    position: relative;
    background: var(--ni-ink);
    color: #fff;
    border-radius: var(--ni-radius);
    box-shadow: var(--ni-shadow);
    padding: 56px 30px 40px;
    text-align: center;
    overflow: hidden;
}
.fp-visual-card::before {
    /* faint dotted "map" texture — a stand-in for a real photo/map image */
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
    pointer-events: none;
}
.fp-visual-pin {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ni-red-bright);
    margin-bottom: 18px;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.08);
}
.fp-visual-pin i { font-size: 1.7rem; color: #fff; }
.fp-visual-city {
    position: relative;
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 1.7rem;
    font-weight: 700;
}
/* NetGame's own wordmark treatment (matches netgame.com.br) — plain white
   "Net" + a violet "Game", instead of one flat color. */
.netgame-wordmark { color: #fff; }
.netgame-wordmark-accent { color: #8c7ae6; }
.fp-visual-country {
    position: relative;
    display: block;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 4px;
}
.fp-visual-stats {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
}
.fp-visual-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--ni-radius-pill);
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 500;
}
.fp-visual-stat i { color: var(--ni-red-bright); font-size: 0.9rem; }

/* Embedded NetGame iframe (netgame.php), own domain, no X-Frame-Options
   set, so a straight embed works; height is fixed since the game can't
   tell us its own content height, so it scrolls internally if needed.
   overflow-anchor:none turns off the browser's scroll anchoring, which
   otherwise kept jumping the whole page's scroll position to this
   iframe every time anything else on the page reflowed (chat widget
   polling, reveal animations), since the iframe is a favorite anchor
   candidate for that heuristic. Found by Renato, 07/09/2026. */
.netgame-embed {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--ni-radius);
    overflow: hidden;
    box-shadow: var(--ni-shadow);
    border: 1px solid var(--ni-border);
    overflow-anchor: none;
}
.netgame-embed iframe { width: 100%; height: 750px; border: 0; display: block; overflow-anchor: none; }
@media (max-width: 767.98px) {
    .netgame-embed iframe { height: 560px; }
}
.netgame-fullscreen-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid var(--ni-border);
    border-radius: var(--ni-radius-pill);
    box-shadow: var(--ni-shadow-sm);
    color: var(--ni-ink);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}
.netgame-fullscreen-link i { color: var(--ni-red); }
.netgame-fullscreen-link:hover { border-color: var(--ni-red); color: var(--ni-red); }

/* Strip of embedded Instagram Reels/posts (e.g. inside #vancouver) —
   horizontal scroll since 5 tall embeds side by side won't fit any one
   screen width. */
.fp-reels-label {
    font-family: 'Fraunces', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ni-ink);
    text-align: center;
    margin-bottom: 18px;
}
.fp-reels-row {
    display: flex;
    justify-content: center;
    gap: 18px;
    overflow-x: auto;
    padding: 4px 4px 14px;
    scroll-snap-type: x proximity;
}
.fp-reel-embed {
    flex: 0 0 auto;
    width: 328px;
    max-width: 85vw;
    scroll-snap-align: start;
}
.fp-reel-embed .instagram-media { margin: 0 !important; }

.fp-trust-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--ni-paper);
    border: 1px solid var(--ni-border);
    border-radius: var(--ni-radius);
    padding: 14px 18px;
    margin-top: 22px;
    font-size: 0.85rem;
    color: var(--ni-slate);
    text-align: left;
}
.fp-trust-note i { color: var(--ni-red); font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }

.fp-passport-card {
    background: #fff;
    border-radius: var(--ni-radius);
    box-shadow: var(--ni-shadow);
    padding: 32px;
    text-align: left;
}
.fp-passport-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    margin-bottom: 6px;
    border-bottom: 2px dashed var(--ni-border);
}
.fp-passport-eyebrow { font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 600; color: var(--ni-ink); }
.fp-passport-header i { color: var(--ni-red); font-size: 1.4rem; }
.fp-passport-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ni-border);
}
.fp-passport-row:last-child { border-bottom: none; padding-bottom: 0; }
.fp-passport-label {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ni-slate);
    font-weight: 700;
    white-space: nowrap;
}
.fp-passport-value { font-size: 0.92rem; color: var(--ni-ink); font-weight: 600; text-align: right; }

/* Photo strip + "Incluso no Pacote" checklist grid, above the price card */
.fp-includes-photos {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.fp-includes-photos img {
    flex: 1 1 220px;
    height: 200px;
    object-fit: cover;
    border-radius: var(--ni-radius);
    box-shadow: var(--ni-shadow-sm);
}
/* Opt-in per photo (see newtour.php): anchors the crop to the top at
   every breakpoint, not just mobile like fp-photo-crop-top-mobile
   below, for tall/portrait source photos where the center crop cuts
   heads off even on desktop. */
.fp-photo-crop-top { object-position: top; }
/* Same idea, but for a portrait photo with a lot of empty sky/background
   above the subjects (see toronto-2026-10.jpg in newtour.php): true
   "top" shows mostly that empty space, so this nudges the crop down a
   bit from the top instead of centering it, keeping heads in frame
   without cutting them the way object-position:center does. */
.fp-photo-crop-upper { object-position: center 30%; }
.fp-includes-label {
    font-family: 'Fraunces', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ni-ink);
    margin-bottom: 24px;
}
.fp-includes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 56px;
    text-align: center;
}
.fp-include-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: var(--ni-radius);
    box-shadow: var(--ni-shadow-sm);
    padding: 30px 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fp-include-item:hover { transform: translateY(-4px); box-shadow: var(--ni-shadow); }
.fp-include-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ni-red);
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 16px;
    flex-shrink: 0;
}
.fp-include-text { font-size: 0.92rem; font-weight: 600; color: var(--ni-ink); line-height: 1.4; }
@media (max-width: 575.98px) {
    .fp-includes-photos img { height: 150px; }
    /* At the shorter mobile box height, a centered crop cuts heads off on
       some photos that look fine at the taller desktop height — this class
       (opt-in per photo, see grupotoronto.php/interacaoschool.php) anchors
       the crop to the top only here, so desktop keeps the normal center
       crop instead of showing too much empty ceiling/background above. */
    .fp-photo-crop-top-mobile { object-position: top; }
}


.fp-visit-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 28px 0 32px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ni-slate);
}
.fp-visit-counter i { color: var(--ni-red); font-size: 0.8rem; }

.fp-price-card {
    background: #fff;
    border-radius: var(--ni-radius);
    box-shadow: var(--ni-shadow);
    padding: 48px;
    max-width: 440px;
}
/* Featured/recommended tier in a multi-card price row (grupotoronto.php's
   2/3/4-week comparison): a small ribbon pill floats above the card's
   top edge instead of an oversized .stamp-badge circle (that component
   is sized for a single ~10-letter word, "Mais Completo" wraps badly
   inside it), so all three cards keep the same internal height and the
   ribbon reads as an intentional highlight, not a layout accident.
   2px border + a slight lift are the only other differences from a
   plain .fp-price-card, the price's own font size stays identical
   across every tier so the three numbers stay visually comparable. */
.fp-price-card-featured {
    position: relative;
    border: 2px solid var(--ni-red);
    transform: translateY(-10px);
}
.fp-price-card-ribbon {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ni-red);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 7px 20px;
    border-radius: var(--ni-radius-pill);
    white-space: nowrap;
    box-shadow: var(--ni-shadow-sm);
}
@media (max-width: 767.98px) {
    .fp-price-card-featured { transform: none; margin-top: 14px; }
}
.fp-price-label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ni-slate); font-weight: 700; }
.fp-price-value { display: block; font-family: 'Fraunces', serif; font-size: 2.4rem; font-weight: 700; color: var(--ni-red); margin: 6px 0 4px; }
/* When there's no price to show (grupotoronto.php), .fp-price-value doubles
   as a link instead — needs its own affordance (underline + hover + arrow
   shift) or it just reads as flat, un-clickable text sitting where a price
   number usually goes. */
.fp-price-value-link {
    color: var(--ni-red);
    text-decoration: underline;
    text-decoration-color: var(--ni-border);
    text-underline-offset: 4px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.fp-price-value-link i { display: inline-block; transition: transform 0.15s ease; font-size: 0.85em; }
.fp-price-value-link:hover { color: var(--ni-red-bright); text-decoration-color: var(--ni-red-bright); }
.fp-price-value-link:hover i { transform: translateX(4px); }

/* Solid dark button for a price card's WhatsApp CTA (grupotoronto.php) —
   deliberately not red like .fp-price-value-link above it, so the two
   actions in the same card read as visually distinct, not duplicated.
   WhatsApp green (#25d366 / hover #1da851) — same colors already used by
   .btn-whatsapp-cta in community.php, kept consistent site-wide. */
.fp-price-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 30px;
    background: #25d366;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: var(--ni-radius-pill);
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
}
.fp-price-cta-btn i { color: #fff; }
.fp-price-cta-btn:hover { background: #1da851; transform: translateY(-2px); }
.fp-price-note { display: block; font-size: 0.78rem; color: var(--ni-slate); font-style: italic; }
.fp-price-divider { border-color: var(--ni-border); margin: 24px 0; }
.fp-price-includes { text-align: left; margin-bottom: 28px; }
.fp-price-includes li { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.92rem; color: var(--ni-ink); }
.fp-price-includes i { color: var(--ni-red); }
.fp-price-pdf-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ni-slate);
    text-decoration: none;
    transition: color 0.2s;
}
.fp-price-pdf-link:hover { color: var(--ni-red); }
.fp-price-pdf-link i { color: var(--ni-red); font-size: 1rem; }
@media (max-width: 767.98px) {
    .fp-passport-card, .fp-price-card { padding: 28px; }
}

/* ---------- Changelog page (atualizacoes.php) ---------- */
.changelog-hero {
    position: relative;
    background: var(--ni-ink);
    color: #fff;
    padding: 100px 0 70px;
    overflow: hidden;
}
.changelog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(760px 460px at 50% -12%, rgba(178, 34, 52, 0.4), transparent 70%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 20px);
    pointer-events: none;
}
.changelog-hero .container { position: relative; z-index: 1; }
.changelog-hero .hero-subtitle { max-width: 42rem; }

.changelog-timeline {
    max-width: 42rem;
    margin: 0 auto;
    position: relative;
}
.changelog-timeline::before {
    /* the connecting vertical line running through every marker */
    content: '';
    position: absolute;
    left: 27px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--ni-border);
}
.changelog-entry {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
}
.changelog-entry:last-child { margin-bottom: 0; }
.changelog-marker {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 56px;
}
.changelog-date {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ni-slate);
    white-space: nowrap;
}
.changelog-card { flex: 1; padding: 28px 32px; }
.changelog-list { margin: 0; padding-left: 1.1em; }
.changelog-list li { color: var(--ni-slate); margin-bottom: 10px; }
.changelog-list li:last-child { margin-bottom: 0; }
.changelog-footnote { color: var(--ni-slate); font-size: 0.9rem; margin-top: 48px; }
.changelog-footnote a { color: var(--ni-red); font-weight: 600; text-decoration: none; }
.changelog-footnote a:hover { text-decoration: underline; }
@media (max-width: 575.98px) {
    .changelog-card { padding: 22px 20px; }
    .changelog-entry { gap: 14px; }
    .changelog-marker { width: 44px; }
    .changelog-timeline::before { left: 21px; }
}

/* ---------- NEWZinho report (report.php) — reuses .changelog-* above ---------- */
.report-meta { font-size: 0.78rem; color: var(--ni-slate); margin-bottom: 18px; }
.report-section-title { font-size: 0.95rem; font-weight: 700; margin: 20px 0 8px; }
.report-section-title:first-of-type { margin-top: 0; }
.report-clean { display: flex; align-items: center; gap: 8px; color: #2f6b4f; font-size: 0.9rem; margin: 0; }
.report-fix { display: inline-block; margin-top: 4px; font-size: 0.86rem; color: var(--ni-slate); }

/* ---------- Contact page (contato.php) ---------- */
.contact-hero {
    position: relative;
    background: var(--ni-ink);
    color: #fff;
    padding: 100px 0 80px;
    text-align: center;
    overflow: hidden;
}
.contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(760px 460px at 50% -12%, rgba(178, 34, 52, 0.4), transparent 70%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 20px);
    pointer-events: none;
}
.contact-hero .container { position: relative; z-index: 1; }

.section-contact { padding: 90px 0; background: var(--ni-paper); }

.contact-form-card { padding: 44px; }
.contact-form-title { font-size: 1.3rem; margin-bottom: 24px; }
.contact-label { font-size: 0.82rem; font-weight: 700; color: var(--ni-ink); margin-bottom: 6px; display: block; }
/* Two side-by-side fields whose labels wrap to a different number of
   lines otherwise leave the inputs at different heights. This keeps
   every input flush to the bottom of its row regardless of label length. */
.contact-form .row > [class*="col-"] { display: flex; flex-direction: column; justify-content: flex-end; }
/* ...but that same bottom-alignment breaks a pair where one side has real
   extra content below the input (like aupair.php's "Idade" hint text,
   "O programa atende de 18 a 26 anos.") instead of just a taller label:
   the shorter sibling (Nível de inglês) then gets pushed down to match,
   leaving its label floating well below the other one. Real bug, found by
   Renato 06/09/2026. Opt a field pair out of the bottom-align with this
   class when one side has trailing helper text the other doesn't. */
.contact-form .row > [class*="col-"].align-top { justify-content: flex-start; }
.contact-input {
    border: 1px solid var(--ni-border);
    border-radius: 12px;
    padding: 0.65rem 0.9rem;
    /* 16px e nao menos: campo de formulario com fonte menor que isso faz o
       iOS Safari dar zoom automatico ao tocar no campo. Achado pelo
       NEWZinho em 06/09/2026. */
    font-size: 16px;
}
.contact-input:focus {
    border-color: var(--ni-red);
    box-shadow: 0 0 0 3px rgba(134, 32, 41, 0.12);
}

.contact-success { text-align: center; padding: 24px 12px; }
.contact-success-icon { font-size: 3rem; color: var(--ni-red); display: block; margin-bottom: 16px; }
.contact-success-icon-error { color: #b8860b; }
.contact-success-title { margin-bottom: 10px; }
.contact-success-text { color: var(--ni-slate); margin-bottom: 24px; }

.contact-info-card {
    position: relative;
    background: var(--ni-ink);
    color: #fff;
    border-radius: var(--ni-radius);
    box-shadow: var(--ni-shadow);
    padding: 40px;
    height: 100%;
}
.contact-info-heading { color: #fff; font-size: 1.2rem; margin: 4px 0 24px; }
.contact-info-list { margin: 0; }
.contact-info-list li { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.contact-info-list li:last-child { margin-bottom: 0; }
.contact-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ni-red-bright);
    font-size: 1.2rem;
    flex-shrink: 0;
}
.contact-info-list strong {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 2px;
}
.contact-info-list a { color: #fff; text-decoration: none; font-weight: 600; }
.contact-info-list a:hover { color: var(--ni-red-bright); }
.contact-info-divider { border-color: rgba(255, 255, 255, 0.15); margin: 28px 0; }
.contact-info-note { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; margin: 0; }
@media (max-width: 767.98px) {
    .contact-form-card { padding: 28px; }
    .contact-info-card { padding: 28px; }
}

/* ---------- Scroll reveal ----------
   Sections fade up into view once as the visitor scrolls to them.
   Scoped inside prefers-reduced-motion: no-preference, so anyone who
   asked their OS for less motion — or if main.js fails to run — simply
   sees the content in its final state with no animation at all. */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .card-surface, a { transition: none; }
    .bio-link-icon, .bio-link-chevron { transition: none; }
}

/* ---------- Link-in-bio page (bio.php) ---------- */
/* No nav.php on this page, so remove the space body{padding-top} normally
   reserves for the fixed navbar (see header.php's $body_class docblock). */
.page-bio { padding-top: 0; }

.bio-page {
    max-width: 460px;
    margin: 0 auto;
    padding: 48px 20px 64px;
}
.bio-hero { text-align: center; margin-bottom: 36px; }
.bio-logo { width: 200px; height: auto; margin-bottom: 22px; }
.bio-tagline {
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--ni-ink);
    max-width: 34ch;
    margin: 0 auto 14px;
}
.bio-trust {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--ni-slate);
}

.bio-links { display: flex; flex-direction: column; gap: 12px; }
.bio-link {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: var(--ni-radius);
    padding: 14px 16px;
    box-shadow: var(--ni-shadow-sm);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bio-link:hover, .bio-link:active { transform: translateY(-2px); box-shadow: var(--ni-shadow); }
.bio-link-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ni-paper-alt);
    color: var(--ni-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.bio-link-text { display: flex; flex-direction: column; min-width: 0; }
.bio-link-text strong { font-size: 0.96rem; color: var(--ni-ink); line-height: 1.3; }
.bio-link-text small { font-size: 0.78rem; color: var(--ni-slate); margin-top: 2px; line-height: 1.35; }
.bio-link-chevron {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--ni-border);
    font-size: 0.9rem;
    transition: transform 0.2s ease, color 0.2s ease;
}
/* on hover: card lifts (already set on .bio-link), icon fills in solid red
   and grows a touch, chevron slides right and darkens — small, layered
   motion reads as more polished than a single flat state change */
.bio-link:hover .bio-link-icon { background: var(--ni-red); color: #fff; transform: scale(1.08); }
.bio-link:hover .bio-link-chevron { color: var(--ni-red); transform: translateX(4px); }

.bio-link-primary { background: var(--ni-red); }
.bio-link-primary .bio-link-icon { background: rgba(255,255,255,0.18); color: #fff; }
.bio-link-primary .bio-link-text strong { color: #fff; }
.bio-link-primary .bio-link-text small { color: rgba(255,255,255,0.78); }
.bio-link-primary .bio-link-chevron { color: rgba(255,255,255,0.6); }
.bio-link-primary:hover { background: var(--ni-red-bright); }
.bio-link-primary:hover .bio-link-icon { background: #fff; color: var(--ni-red-bright); transform: scale(1.08); }
.bio-link-primary:hover .bio-link-chevron { color: #fff; }

.bio-social {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}
.bio-social-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--ni-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ni-ink);
    font-size: 1.2rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.bio-social-icon:hover { border-color: var(--ni-red); color: var(--ni-red); }

/* ---------- NEW Store (newstore.php) ---------- */
/* Own hero instead of reusing .fp-hero: a clothing line reads better with
   a bold, editorial treatment (huge wordmark, ticker tape) than the same
   layout every lead-capture page already uses. Built for the "coming soon"
   phase and kept when the store opened (14/09/2026). Scoped under
   .store-hero/.store-marquee so nothing here touches .fp-hero elsewhere. */
.store-hero {
    background: linear-gradient(160deg, #150e0f 0%, var(--ni-ink) 55%, var(--ni-red) 180%);
    color: #fff;
    padding: 100px 0 0;
    text-align: center;
    overflow: hidden;
}
.store-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 18px;
}
.store-hero-title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: clamp(3.4rem, 11vw, 8rem);
    line-height: 0.94;
    letter-spacing: -0.01em;
    margin: 0;
    text-wrap: balance;
}
.store-hero-title-alt { color: var(--ni-red-bright); }
/* "Uma loja NEW Wear Co.": a compra acontece em outro domínio, então a
   marca da loja aparece logo embaixo do título (pedido do Renato, 14/09/2026). */
.store-hero-by {
    margin: 18px 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.store-hero-by span { color: #fff; }
.store-hero-sub {
    max-width: 40rem;
    margin: 24px auto 0;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.78);
    text-wrap: balance;
}
.store-hero-cta { margin-top: 34px; padding-bottom: 56px; }

.store-marquee {
    background: var(--ni-red);
    color: #fff;
    padding: 14px 0;
    overflow: hidden;
    white-space: nowrap;
}
.store-marquee-track {
    display: inline-flex;
    width: max-content;
    /* Runs a handful of times then stops (not infinite), enough to catch
       the eye on load without animating forever in the background. */
    animation: store-marquee-scroll 24s linear 4 forwards;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.92rem;
}
.store-marquee-track span { display: inline-flex; align-items: center; gap: 14px; padding-right: 14px; }
.store-marquee-track i { font-size: 0.6rem; opacity: 0.7; }
@keyframes store-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .store-marquee-track { animation: none; }
}

/* Vitrine da linha NEW Intercambio (14/09/2026). A compra acontece na loja
   da NEW Wear Co. (Reserva INK): o card inteiro é um link para a página da
   camiseta, então hover, foco e o botão falso "Ver camiseta" são do card,
   não de um <button>. Mesma receita dos .game-card (borda leve, sombra
   pequena que cresce no hover, pílula vermelha no rodapé), com a foto
   quadrada no lugar do banner. */
.store-intro { max-width: 42rem; margin: 0 auto; }
.store-perks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 24px auto 44px;
    max-width: 52rem;
}
.store-perk {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--ni-radius-pill);
    background: #fff;
    border: 1px solid var(--ni-border);
    color: var(--ni-slate);
}
.store-perk i { color: var(--ni-red); font-size: 0.95rem; }

.store-product {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--ni-border);
    border-radius: var(--ni-radius);
    overflow: hidden;
    box-shadow: var(--ni-shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.store-product:hover,
.store-product:focus-visible { transform: translateY(-3px); box-shadow: var(--ni-shadow); color: inherit; }
.store-product:focus-visible { outline: 3px solid var(--ni-red-bright); outline-offset: 3px; }
.store-product-photo {
    aspect-ratio: 1 / 1;
    background: var(--ni-paper-alt);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.store-product-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.store-product-photo > i { font-size: 2.6rem; color: var(--ni-slate); opacity: 0.4; }
.store-product:hover .store-product-photo img { transform: scale(1.04); }
.store-product-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 4px;
    padding: 14px 16px 16px;
}
.store-product-name {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ni-ink);
    margin: 0;
    flex-grow: 1;
    text-wrap: balance;
}
.store-product-price { font-weight: 700; font-size: 0.95rem; color: var(--ni-red); margin: 2px 0 0; }
.store-product-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: var(--ni-radius-pill);
    background: var(--ni-red);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    transition: background 0.15s;
}
.store-product:hover .store-product-cta { background: var(--ni-red-bright); }
.store-count { text-align: center; font-size: 0.85rem; color: var(--ni-slate); margin: 28px 0 0; }
.store-empty { max-width: 34rem; margin: 0 auto; padding: 36px 28px; text-align: center; }

.store-more {
    background: linear-gradient(160deg, #150e0f 0%, var(--ni-ink) 55%, var(--ni-red) 180%);
    color: #fff;
    border-radius: var(--ni-radius);
    padding: 52px 28px;
    text-align: center;
}
.store-more .store-hero-eyebrow { margin-bottom: 6px; }
.store-more-title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4.2vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 12px;
    text-wrap: balance;
}
.store-more-text { color: rgba(255, 255, 255, 0.78); max-width: 36rem; margin: 0 auto 28px; text-wrap: balance; }

@media (max-width: 575.98px) {
    .store-perks { margin-bottom: 32px; }
    /* O botao "Conhecer a NEW Wear Co." quebrava em duas linhas em 375px. */
    .store-more { padding: 44px 20px; }
    .store-more .btn { font-size: 1rem; padding: 12px 22px; }
    .store-product-body { padding: 12px 12px 14px; }
    .store-product-name { font-size: 0.92rem; }
    .store-product-cta { font-size: 0.78rem; padding: 8px 8px; }
}
/* Abaixo de 360px o card fica com ~130px de largura: sem a seta e com a
   fonte um pouco menor, "Ver camiseta" cabe numa linha so. */
@media (max-width: 359.98px) {
    .store-product-body { padding: 10px 10px 12px; }
    .store-product-cta { font-size: 0.74rem; padding: 8px 4px; }
    .store-product-cta i { display: none; }
    .store-more .btn { font-size: 0.92rem; padding: 11px 18px; }
    .store-more .btn i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .store-product,
    .store-product-photo img { transition: none; }
    .store-product:hover,
    .store-product:focus-visible { transform: none; }
    .store-product:hover .store-product-photo img { transform: none; }
}

/* ---------- NEW Tour (newtour.php) ---------- */
/* Same dark gradient family as .store-hero (brand consistency across the
   "custom hero" pages) with its own travel-flavored touch: a dashed
   flight line with a plane icon that flies across a few times, then
   stops (not infinite — same lesson as the store marquee). */
.tour-hero {
    background: linear-gradient(160deg, #150e0f 0%, var(--ni-ink) 55%, var(--ni-red) 180%);
    color: #fff;
    padding: 100px 0 90px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.tour-hero-path {
    position: absolute;
    left: 0;
    right: 0;
    top: 38%;
    height: 1px;
    border-top: 2px dashed rgba(255, 255, 255, 0.22);
}
.tour-hero-plane {
    position: absolute;
    top: -10px;
    left: -10%;
    color: var(--ni-red-bright);
    font-size: 1.3rem;
    transform: rotate(90deg);
    animation: tour-plane-fly 7s ease-in-out 3 both;
}
@keyframes tour-plane-fly {
    0% { left: -10%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 108%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .tour-hero-plane { animation: none; opacity: 0; }
}

/* ---------- NEW Link (newlink.php) ---------- */
/* Same dark gradient family as .store-hero/.tour-hero (brand consistency
   across the "custom hero" pages), themed around the product itself: a
   phone mockup of an actual partner page, since "here's what your page
   looks like" sells the idea better than any abstract decoration. Two
   small motion touches, both tasteful/subtle rather than attention-grabbing:
   a ring that pulses outward from the link badge a few times then stops
   (same "not infinite" lesson as the store marquee/tour plane), and a tiny
   "ao vivo" dot that pulses forever — the one continuous animation here,
   kept deliberately small/quiet since it's just signaling "this is real
   and live", the same way a chat app's online-status dot never stops. */
.link-hero {
    background: linear-gradient(160deg, #150e0f 0%, var(--ni-ink) 55%, var(--ni-red) 180%);
    color: #fff;
    padding: 100px 0 90px;
    position: relative;
    overflow: hidden;
}
.link-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 18px;
}
.link-hero .hero-title,
.link-hero .hero-subtitle { color: #fff; }
.link-hero .hero-subtitle { color: rgba(255, 255, 255, 0.78); }

.link-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ni-red-bright);
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 20px;
}
.link-badge-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--ni-red-bright);
    animation: link-ring-pulse 2.6s ease-out 3;
}
.link-badge-ring:nth-child(2) { animation-delay: 0.5s; }
@keyframes link-ring-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .link-badge-ring { animation: none; opacity: 0; }
}

/* Phone mockup — a believable little "screen" showing a sample partner
   page (avatar, name, link buttons), floating with a soft glow behind it. */
.link-phone-mockup {
    position: relative;
    width: 240px;
    margin: 0 auto;
    padding: 14px 14px 22px;
    background: #1b1414;
    border-radius: 34px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    animation: link-phone-float 5s ease-in-out infinite;
}
.link-phone-notch {
    width: 64px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    margin: 0 auto 12px;
}
.link-phone-screen {
    background: var(--ni-paper, #FAFAFA);
    border-radius: 22px;
    padding: 28px 16px 20px;
    text-align: center;
}
.link-phone-avatar {
    width: 64px;
    height: 64px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--ni-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.link-phone-name {
    display: block;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--ni-ink);
    margin-bottom: 3px;
}
.link-phone-handle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    color: #1e9e52;
    font-weight: 600;
    margin-bottom: 16px;
}
.link-phone-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1e9e52;
    animation: link-live-pulse 1.8s ease-in-out infinite;
}
@keyframes link-live-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(30, 158, 82, 0.5); }
    50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(30, 158, 82, 0); }
}
.link-phone-buttons { display: flex; flex-direction: column; gap: 8px; }
.link-phone-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    background: #fff;
    color: var(--ni-ink);
    border: 1px solid var(--ni-border, rgba(0,0,0,0.1));
}
.link-phone-btn-primary { background: var(--ni-red); color: #fff; border-color: var(--ni-red); }
.link-phone-glow {
    position: absolute;
    inset: -30px;
    z-index: -1;
    background: radial-gradient(circle, rgba(224, 47, 68, 0.35) 0%, transparent 70%);
    filter: blur(20px);
}
@keyframes link-phone-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
    .link-phone-mockup { animation: none; }
    .link-phone-live-dot { animation: none; }
}

/* ---------- NEW POV (newpov.php) ---------- */
/* Same dark gradient hero family as Store/Tour/Link, themed around the
   product itself: a small post card showing a sample entry and a team
   reply, since that explains the concept faster than any paragraph could.
   Only one motion touch, and it's a single one-shot fade — the reply
   appears a beat after the post, like someone just answered. Deliberately
   calmer than Link's page (no continuous "look, it's alive" animation):
   this product is about being heard, not about looking busy. */
.pov-hero {
    background: linear-gradient(160deg, #150e0f 0%, var(--ni-ink) 55%, var(--ni-red) 180%);
    color: #fff;
    padding: 100px 0 90px;
    position: relative;
    overflow: hidden;
}
.pov-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 18px;
}
.pov-hero .hero-title,
.pov-hero .hero-subtitle { color: #fff; }
.pov-hero .hero-subtitle { color: rgba(255, 255, 255, 0.78); }

.pov-post-mockup {
    max-width: 340px;
    margin: 0 auto;
    background: var(--ni-paper, #FAFAFA);
    border-radius: 20px;
    padding: 20px;
    text-align: left;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.pov-post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pov-post-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ddd;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.pov-post-tag { font-size: 0.78rem; font-weight: 700; color: var(--ni-ink); }
.pov-post-text {
    font-size: 0.86rem;
    color: #444;
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 16px;
}
.pov-reply {
    display: flex;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--ni-border, rgba(0, 0, 0, 0.08));
    opacity: 0;
    animation: pov-reply-in 0.6s ease 1.4s forwards;
}
.pov-reply-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--ni-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
.pov-reply-body { font-size: 0.82rem; }
.pov-reply-name { font-weight: 700; color: var(--ni-ink); display: inline-flex; align-items: center; gap: 4px; }
.pov-reply-badge { color: #1e9e52; font-size: 0.78rem; }
.pov-reply-text { color: #555; margin-top: 2px; }
@keyframes pov-reply-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .pov-reply { animation: none; opacity: 1; }
}

/* ---------- Depoimentos (aupair.php e qualquer outra página que precise) ---------- */
/* Avaliações reais do Google, copiadas palavra por palavra (Renato mandou
   print de cada uma em 07/09/2026). Nenhuma é sobre o Au Pair especificamente
   (o programa é novo demais, ainda sem aluno formado), mas são avaliações
   reais sobre a NEW Intercambio como empresa, e Renato confirmou usar assim
   mesmo enquanto não há depoimento específico de Au Pair. */
.testimonial-card {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}
.testimonial-stars { color: #f5a623; font-size: 0.9rem; letter-spacing: 2px; }
.testimonial-quote {
    font-size: 0.92rem;
    color: var(--ni-slate);
    line-height: 1.6;
    flex: 1 1 auto;
}
.testimonial-quote::before { content: '\201C'; }
.testimonial-quote::after { content: '\201D'; }
.testimonial-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ni-border);
}
.testimonial-name { font-weight: 700; color: var(--ni-ink); font-size: 0.86rem; }
.testimonial-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--ni-slate);
    white-space: nowrap;
}
.testimonial-source i { color: #4285F4; }

/* FAQ accordion (faq.php), reskin do accordion padrão do Bootstrap para
   usar a paleta da marca em vez do azul/cinza padrão. */
.faq-accordion .accordion-item {
    border: 1px solid var(--ni-border);
    border-radius: var(--ni-radius);
    overflow: hidden;
    margin-bottom: 12px;
}
.faq-accordion .accordion-item:last-child { margin-bottom: 0; }
.faq-accordion .accordion-button {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--ni-ink);
    background: #fff;
    box-shadow: none;
}
.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--ni-red);
    background: var(--ni-paper-alt);
    box-shadow: none;
}
.faq-accordion .accordion-button:focus { box-shadow: 0 0 0 3px rgba(134, 32, 41, 0.15); }
.faq-accordion .accordion-button::after {
    filter: invert(20%) sepia(50%) saturate(2000%) hue-rotate(325deg);
}
.faq-accordion .accordion-body {
    color: var(--ni-slate);
    line-height: 1.7;
    font-size: 0.95rem;
}
.faq-accordion .accordion-body a { font-weight: 600; }

/* ---------- Game cards (newgames.php) ----------
   Same card recipe Renato liked on the Games/ project's own hub page
   ("Eu gostei muito como ele montou os cards", 08/09/2026): colored
   sunburst banner with a big emoji, body with real tags, full-width
   pill "Jogar" button. Built with this site's own brand tokens (that
   page already used the same --ni-red/--ni-ink values), not copied
   wholesale, so it fits the rest of NEW-WEBSITE's design language. */
.game-card {
    position: relative;
    background: #fff;
    border-radius: var(--ni-radius);
    overflow: hidden;
    box-shadow: var(--ni-shadow-sm);
    border: 1px solid var(--ni-border);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.game-card:hover { transform: translateY(-3px); box-shadow: var(--ni-shadow); }
.game-card-art {
    position: relative;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.6rem;
}
.game-card-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.08) 0deg 10deg, transparent 10deg 20deg);
}
.game-card-art span { position: relative; z-index: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25)); }
.game-card-art-red { background: linear-gradient(135deg, var(--ni-red-bright), #5e141b); }
.game-card-art-navy { background: linear-gradient(135deg, #2f4270, #10182c); }
.game-card-body { padding: 20px 22px 22px; gap: 8px; }
.game-card-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    color: var(--ni-ink);
    margin: 0;
}
.game-card-text { font-size: 0.9rem; line-height: 1.5; color: var(--ni-slate); margin: 0; }
.game-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.game-card-tag {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--ni-radius-pill);
    background: var(--ni-paper-alt);
    color: var(--ni-slate);
}
.game-card-tag-new { background: var(--ni-red); color: #fff; }
.game-card-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--ni-red);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 12px 16px;
    border: none;
    border-radius: var(--ni-radius-pill);
    transition: background 0.15s;
}
.game-card:hover .game-card-play { background: var(--ni-red-bright); }
.game-card-count { text-align: center; font-size: 0.85rem; color: var(--ni-slate); margin: 28px 0 0; }

/* Fullscreen game modal's own header (newgames.php): first pass was
   still too flat/thin to read as "profissional" (Renato, 2nd round of
   feedback). Full .fp-hero/.site-footer treatment this time: the same
   red glow + diagonal hairline texture (not just a flat dark fill),
   more room to breathe, and the tagline reusing .footer-slogan's own
   shine animation instead of a static color.

   The brand icon (img/logo-icon-white.png) is a one-off asset, not
   logo-icon.png itself: that file is the animal on a solid red tile,
   which all but disappeared against this same red glow ("a onca
   pintada nao aparece", Renato). Extracted from favicon.png (same
   silhouette, no tile) by mapping each pixel's luminance to alpha
   (white becomes opaque white, the red background fades to fully
   transparent) via a one-off PowerShell/System.Drawing script, so
   it's just the animal, no box/border around it. */
.game-modal-header {
    position: relative;
    overflow: hidden;
    background: var(--ni-ink);
    border-bottom: 3px solid var(--ni-red);
    padding: 20px 28px;
}
.game-modal-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(480px 200px at 10% 0%, rgba(178, 34, 52, 0.4), transparent 70%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 20px);
    pointer-events: none;
}
.game-modal-header > * { position: relative; z-index: 1; }
.game-modal-brand-mark { display: flex; align-items: center; gap: 16px; }
.game-modal-icon { width: 52px; height: 52px; flex-shrink: 0; object-fit: contain; }
.game-modal-title-group { display: flex; flex-direction: column; gap: 2px; }
.game-modal-title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.45rem;
    color: #fff;
    margin: 0;
}
.game-modal-brand {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
/* Reuses .footer-slogan's exact shine keyframes/gradient (see that
   rule) instead of redefining the animation, just resets the block
   spacing/size that rule assumes for its usual standalone-line context. */
.game-modal-shine.footer-slogan { margin: 0; font-size: inherit; letter-spacing: 0.03em; }