/* ============================================================
   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);

    /* 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));
}

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; }

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

.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); }

/* 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; }
.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); }
.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;
}
.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 {
    border: none;
    border-radius: var(--ni-radius);
    box-shadow: var(--ni-shadow);
    padding: 8px;
    margin-top: 10px;
}
.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);
}

/* ---------- 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; }

/* 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;
}
.hero-photo-frame-1 { top: 6px; left: 0; width: 210px; transform: rotate(-9deg); z-index: 1; }
.hero-photo-frame-2 { top: 22px; right: 0; 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; }
@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; }
    .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; }
}

/* 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: 28px; }

.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;
}
.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: 640px;
    background: #fff;
    border-radius: var(--ni-radius);
    box-shadow: var(--ni-shadow);
    padding: 56px;
    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;
}
.community-card > * { position: relative; z-index: 1; }
.community-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    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; }
.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. */
.site-footer {
    background: var(--ni-paper-alt);
    color: var(--ni-ink);
    padding: 72px 0 32px;
    border-top: 1px solid var(--ni-border);
}
.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; }
}
.footer-social { display: flex; gap: 10px; }
.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: var(--ni-ink);
    font-size: 1rem;
    transition: background 0.2s, color 0.2s;
}
.footer-social-icon:hover { background: var(--ni-red); color: #fff; }

.footer-heading {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ni-slate);
    margin-bottom: 18px;
}
.footer-links { font-size: 0.9rem; }
.footer-links li { margin-bottom: 12px; }
.footer-links-caps { text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.82rem; }
.footer-links a { color: var(--ni-ink); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--ni-red); }
.footer-units { color: var(--ni-slate); font-size: 0.9rem; margin: 0; }

.footer-divider { border-color: var(--ni-border); opacity: 1; margin: 40px 0 24px; }
.footer-copyright { color: var(--ni-slate); 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(0, 0, 0, 0.06);
    color: var(--ni-slate);
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: middle;
}

/* ---------- 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; }
.contact-input {
    border: 1px solid var(--ni-border);
    border-radius: 12px;
    padding: 0.65rem 0.9rem;
    font-size: 0.92rem;
}
.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; }
}