/* ========================================
   GOOGLE FONTS
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&family=Inter:wght@400;500;600&family=DM+Sans:wght@400;500;700&family=Google+Sans+Flex:wght@400;500&family=Montserrat:wght@500&display=swap');

/* ========================================
   DESIGN TOKENS
   ======================================== */
:root {
    /* --- Typography: families --- */
    --font-display: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --font-label: 'DM Sans', sans-serif;
    --font-system: 'Google Sans Flex', sans-serif;
    --font-footer: 'Montserrat', sans-serif;

    /* --- Typography: sizes --- */
    --font-size-label-xs: 10px;
    --font-size-xs: 12px;
    --font-size-sm: 16px;
    --font-size-md: 18px;

    /* --- Typography: weights --- */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --weight-black: 900;

    /* --- Typography: line heights --- */
    --line-height-tight: 120%;
    --line-height-base: 150%;
    --line-height-button: 27px;
    --line-height-label: 15px;

    /* --- Typography: letter spacing --- */
    --tracking-button: 0.54px;
    --tracking-link: 0.42px;
    --tracking-label: 4px;

    /* --- Colors: brand --- */
    --primary-lightest: #7F7FD3;
    --primary-light: #4D4DB9;
    --primary-pure: #282879;
    --primary-medium: #141448;
    --primary-dark: #0B0B32;

    /* --- Colors: neutral scale --- */
    --neutral-50: #F8FAFC;
    --neutral-100: #F1F5F9;
    --neutral-200: #E2E8F0;
    --neutral-300: #CBD5E1;
    --neutral-400: #94A3B8;
    --neutral-500: #64748B;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1E293B;
    --neutral-900: #0F172A;
    --neutral-950: #020617;
    --neutral-static-white: #FDFDFD;

    /* --- Colors: semantic text --- */
    --text-on-dark: var(--neutral-50);
    --text-muted: var(--neutral-400);
    --text-soft: var(--neutral-500);
    --text-strong: var(--neutral-600);
    --text-body: var(--neutral-700);
    --text-heading: var(--neutral-800);

    /* --- Colors: feedback --- */
    --feedback-success-light: #2D7D5A;
    --feedback-warning-light: #D4860A;
    --feedback-info-light: #2E86C1;
    --feedback-error-light: #C0392B;
    --feedback-success-dark: #4DBF8A;
    --feedback-warning-dark: #F5A623;
    --feedback-info-dark: #5AB4E8;
    --feedback-error-dark: #E8604F;

    /* --- Colors: surfaces (light / dark) --- */
    --bg-page-light: var(--neutral-50);
    --bg-surface-light: #FFFFFF;
    --text-primary-light: var(--neutral-900);
    --border-light: var(--neutral-200);
    --bg-page-dark: var(--neutral-950);
    --bg-surface-dark: var(--neutral-800);
    --text-primary-dark: var(--neutral-50);
    --border-dark: var(--neutral-700);

    /* --- Spacing --- */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;
    --space-20: 20px;
    --space-22: 22px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;

    /* --- Border --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;
    --radius-pill: 15000px;
    --border-width-thick: 2px;

    /* --- Shadows & focus --- */
    --shadow-sm: 0px 1px 4px rgba(16, 24, 40, 0.05);
    --shadow-md: 0px 2px 4px rgba(71, 84, 103, 0.16);
    --shadow-lg: 0px 0px 0px 8px rgba(71, 84, 103, 0.03), 0px 2px 4px rgba(71, 84, 103, 0.16);
    --focus-ring: 0 0 0 0.25rem rgba(77, 77, 185, 0.25);

    /* --- Motion --- */
    --transition-base: all 0.3s ease;
    --transition-transform: transform 0.3s ease;

    /* --- Stats section --- */
    --stat-head-min: 160px;
    --stat-body-min: 300px;
}


.site-header {
    background: var(--neutral-950);
    position: sticky;
    top: 0;
    z-index: 99;
}
.fs-strume {
    font-size: 12px!important;
}

header ul {
    margin-bottom: 0;
    list-style: none;
}

p {
    color: var(--Neutral-text-black, #334155);
    font-family: var(--Font-family-body, "DM Sans");
    font-size: var(--Font-size-body-lg, 16px);
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    /* 24px */
}

.p-bold {
    color: var(--Neutral-text-black, #334155);
    font-family: var(--Font-family-body, "DM Sans");
    font-size: var(--Font-size-body-lg, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

header ul li a {
    color: var(--text-soft);
    text-align: center;
    font-family: var(--font-label);
    font-size: 14px;
    font-style: normal;
    text-decoration: none;
    font-weight: 400;
    line-height: 18px;
    /* 128.571% */
    letter-spacing: 1.44px;
    text-transform: uppercase;
    transition: 0.35s;
    position: relative;
    padding: .5rem 1rem;
}


/* ---- Animated nav links (Sobre / Serviços / Portfólio) ---- */
@media (min-width: 992px) {
    header ul li a.nav-anim {
        overflow: visible;
        /* deixa a bolinha "escapar" do canto */
    }

    /* máscara que recorta o texto verticalmente */
    .nav-anim__mask {
        position: relative;
        display: inline-block;
        overflow: hidden;
        vertical-align: bottom;
        text-align: center;
    }

    /* texto original: peso normal, cor suave */
    .nav-anim__text {
        display: inline-block;
        padding: 0 .15em;
        /* folga p/ acomodar a largura do peso bold */
        transition: transform 0.35s ease, opacity 0.35s ease;
        letter-spacing: 2px;
    }

    /* texto de hover (vem de baixo): bold + branco */
    .nav-anim__mask::before {
        content: attr(data-text);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        color: var(--text-on-dark);
        font-weight: 200;
        transform: translateY(100%);
        opacity: 0;
        transition: transform 0.35s ease, opacity 0.35s ease;
    }

    /* original sobe e some */
    .nav-anim:hover .nav-anim__text {
        transform: translateY(-100%);
        opacity: 0;
    }

    /* hover entra de baixo até o lugar */
    .nav-anim:hover .nav-anim__mask::before {
        transform: translateY(0);
        opacity: 1;
    }

    /* bolinha: vem da diagonal superior-direita e para no canto */
    .nav-anim::after {
        position: absolute;
        content: "";
        top: 6px;
        right: 10px;
        width: 6px;
        height: 6px;
        border-radius: 100%;
        background-color: var(--primary-light);
        transform: translate(16px, -16px);
        opacity: 0;
        transition: transform 0.35s ease, opacity 0.35s ease;
    }

    .nav-anim:hover::after {
        transform: translate(0, 0);
        opacity: 1;
    }

    /* ---- Submenu de Serviços (desktop, no hover) ---- */
    .has-submenu {
        position: relative;
    }

    .submenu-servicos {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1030;
        width: 329px;
        margin-top: 19px;
        padding: 0;
        list-style: none;
        overflow: hidden;
        background-color: var(--neutral-900);
        border-radius: 0 0 8px 8px;
        box-shadow: 0 12px 32px rgba(2, 6, 23, 0.45);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    }

    /* ponte invisível para não perder o hover no espaço entre link e submenu */
    .submenu-servicos::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 0;
        right: 0;
        height: 8px;
    }

    .has-submenu:hover .submenu-servicos,
    .has-submenu:focus-within .submenu-servicos {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .submenu-servicos a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        height: 56px;
        padding: 16px;
        border-bottom: 1px solid var(--neutral-700);
        color: var(--text-soft);
        font-family: var(--font-label);
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: 0.42px;
        text-align: left;
        text-transform: none;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .submenu-servicos a .bi {
        font-size: 14px;
        color: var(--neutral-500) !important;
        transition: color 0.2s ease;
    }

    /* hover: linha vira clara, com borda superior em destaque (variante "Light") */
    .submenu-servicos a:hover {
        background-color: var(--primary-dark);
    }

    .submenu-servicos a:hover .bi {
        color: var(--neutral-300);
    }
}

.bg-white {
    background-color: #F8FAFC;
}

/* ---- Botão hambúrguer (mobile) ---- */
.site-header__toggler {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 8px;
    color: var(--neutral-100);
    width: 46px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.site-header__toggler:hover {
    border-color: var(--primary-lightest);
    color: var(--neutral-50);
}

/* ---- Offcanvas (mobile) ---- */
@media (max-width: 991.98px) {
    .mv-offcanvas {
        width: min(86vw, 360px);
        color: var(--neutral-300);
        background: linear-gradient(180deg, rgba(127, 127, 211, 0) 50%, rgba(127, 127, 211, 0.25) 100%), #020617;
        border-left: 1px solid rgba(127, 127, 211, 0.25);
    }

    .mv-offcanvas .offcanvas-header {
        padding: 20px 24px;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    .btn-close-custom {
        background: transparent !important;
        border: none !important;
        color: #F8FAFC !important;
        font-size: 24px;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: none !important;
        outline: none !important;
    }

    .mv-offcanvas .offcanvas-body {
        padding: 8px 24px 48px;
    }

    .offcanvas-nav>li {
        border-top: 1px solid #1E293B;
    }

    .offcanvas-nav>li:last-child {
        border-bottom: 1px solid #1E293B;
    }

    .offcanvas-nav a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px 4px;
        color: #F8FAFC;
        font-family: var(--font-label);
        font-size: 18px;
        letter-spacing: 0.54px;
        text-align: left;
        text-transform: none;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .offcanvas-nav a:hover {
        color: var(--neutral-50);
    }

    .offcanvas-nav a .bi {
        font-size: 14px;
        color: #F8FAFC;
    }

    /* Accordion do menu mobile (Serviços / Portfólio) */
    .offcanvas-nav__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 24px 4px;
        background: none;
        border: 0;
        color: #F8FAFC;
        font-family: var(--font-label);
        font-size: 18px;
        letter-spacing: 0.54px;
        text-align: left;
        text-transform: none;
        cursor: pointer;
        transition: color 0.2s ease;
    }

    .offcanvas-nav__toggle:hover,
    .offcanvas-nav__toggle[aria-expanded="true"] {
        color: var(--neutral-50);
    }

    .offcanvas-nav__toggle .bi {
        font-size: 14px;
        color: #F8FAFC;
        transition: transform 0.25s ease, color 0.2s ease;
    }

    .offcanvas-nav__toggle[aria-expanded="true"] .bi {
        transform: rotate(180deg);
        color: var(--primary-lightest);
    }

    .offcanvas-subnav {
        margin: 0 0 8px;
        padding-left: 8px;
        border-left: 1px solid rgba(127, 127, 211, 0.35);
    }

    .offcanvas-subnav a {
        display: block;
        padding: 12px 4px;
        color: var(--neutral-300);
        font-family: var(--font-label);
        font-size: 14px;
        letter-spacing: 0.3px;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .offcanvas-subnav a:hover {
        color: var(--neutral-50);
    }

    /* CTA no rodapé do offcanvas */
    .offcanvas-cta {
        padding-top: 24px;
    }

    .offcanvas-cta__title {
        color: var(--primary-lightest);
        font-family: var(--font-display);
        font-size: 18px;
        line-height: 1.25;
        margin-bottom: 24px;
        font-weight: 700;
    }

    .offcanvas-cta__accent {
        display: block;
        color: #F8FAFC;
        font-style: italic;
        font-weight: 900;
        font-size: 18px;
        margin-top: 4px;
    }

    .offcanvas-cta__or {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 24px 0;
        color: #64748B;
        font-family: var(--font-label);
        font-weight: 300;
        font-size: 16px;
        text-transform: lowercase;
        letter-spacing: 0px;
    }

    .offcanvas-cta__or::before,
    .offcanvas-cta__or::after {
        content: "";
        flex: 1;
        height: 1px;
        background-color: #334155;
    }
}

.cta-section-01~section>div:not(.not-here) {
    margin-top: 5rem;
}

h1,
h2,
h3 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

/* ========================================
   FONT FAMILY UTILITIES
   ======================================== */
.font-display {
    font-family: var(--font-display);
}

.font-body {
    font-family: var(--font-body);
}

.font-label {
    font-family: var(--font-label);
}

.font-system {
    font-family: var(--font-system);
}

/* ========================================
   FONT WEIGHT UTILITIES
   ======================================== */
.fw-light {
    font-weight: var(--weight-regular);
}

.fw-medium {
    font-weight: var(--weight-medium);
}

.fw-semibold {
    font-weight: var(--weight-semibold);
}

.fw-bold {
    font-weight: var(--weight-bold);
}

.fw-extrabold {
    font-weight: var(--weight-black);
}

.fw-extrabold-italic {
    font-weight: var(--weight-black);
    font-style: italic;
}

/* ========================================
   COLOR UTILITIES
   ======================================== */
.text-brand {
    color: var(--primary-pure);
}


.text-slate {
    color: var(--text-body);
}

/* ========================================
   BUTTONS — padrão Multivision
   Variações: primary (sólido) · outline (contorno) · whatsapp (claro)
   Todas compartilham o mesmo espaçamento/tipografia.
   ======================================== */
.btn.btn-primary-multivision,
.btn.btn-outline-multivision,
.btn.btn-whatsapp-multivision {
    font-family: var(--Font-family-body, "DM Sans");
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 27px */
    letter-spacing: 0.54px;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    padding: 10px 24px;
    text-transform: capitalize !important;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    text-decoration: none;
    border: var(--border-width-thick) solid transparent;
    transition: var(--transition-base);
}

/* --- Primary: fundo roxo (botão de referência) --- */
.btn.btn-primary-multivision {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--neutral-50);
}

.btn.btn-primary-multivision:hover {
    background-color: var(--primary-pure);
    border-color: var(--primary-pure);
    color: var(--neutral-50);
}

.btn.btn-primary-multivision:active,
.btn.btn-primary-multivision:focus {
    background-color: var(--primary-medium);
    border-color: var(--primary-medium);
    color: var(--neutral-50);
    box-shadow: var(--focus-ring);
}

.btn.btn-primary-multivision:disabled {
    background-color: var(--neutral-200);
    border-color: var(--neutral-200);
    color: var(--neutral-400);
    cursor: not-allowed;
}

/* --- Outline: contorno roxo, fundo transparente --- */
.btn.btn-outline-multivision {
    background-color: transparent;
    border-color: var(--bg-surface-light);
    color: var(--bg-surface-light);
}

.btn.btn-outline-multivision .btn-arrow {
    width: 24px;
    height: 24px;
    font-size: 14px;
    background-color: white;
    color: #0F172A !important;
    border-radius: 50%;
}

.btn.btn-outline-multivision:hover {
    background-color: var(--bg-surface-light);
    border-color: var(--bg-surface-light);
    color: var(--primary-light)
}

.btn.btn-outline-multivision:hover .btn-arrow {
    background-color: white;
    color: #0F172A !important;
}

.btn.btn-outline-multivision:active,
.btn.btn-outline-multivision:focus {
    background-color: var(--bg-surface-light);
    border-color: var(--bg-surface-light);
    color: var(--neutral-50);
    box-shadow: var(--focus-ring);
}

/* --- WhatsApp: fundo claro, ícone verde --- */
.btn.btn-whatsapp-multivision {
    background-color: var(--neutral-50);
    border-color: var(--neutral-50);
    color: var(--primary-dark);
}

.btn.btn-whatsapp-multivision:hover {
    background-color: var(--neutral-200);
    border-color: var(--neutral-200);
    color: var(--primary-dark);
}

.btn.btn-whatsapp-multivision .bi-whatsapp {
    color: #25D366;
    font-size: 18px;
}

.btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-transform);
    color: var(--primary-light);
}

.btn-arrow::before {
    content: "" !important;
    display: inline-block;
    width: .8em;
    height: .8em;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M2 8h12M9 3l5 5-5 5"/%3E%3C/svg%3E') no-repeat center;
    mask: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M2 8h12M9 3l5 5-5 5"/%3E%3C/svg%3E') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.btn-arrow {
    width: 12px;
    height: 12px;
}

.btn-arrow.rounded-circle {
    width: 18px !important;
    height: 18px !important;
    font-size: 14px !important;
}

.btn:hover .btn-arrow {
    transform: rotate(-45deg);
}

.solucao-card__link:hover .btn-arrow {
    border-color: var(--primary-medium);
}

@media (min-width: 992px) {
    .site-header .site-header__nav .btn.btn-primary-multivision {
        font-size: 14px !important;
        padding: 6px 16px !important;
        line-height: 20px !important;
    }
}

/* --- Container-specific button variations --- */

/* botão branco do CTA: texto/ícone escuros, 18px (variação do whatsapp) */
.cta-card .btn.btn-whatsapp-multivision {
    color: var(--neutral-800);
}

.cta-card .btn.btn-whatsapp-multivision .bi-whatsapp {
    color: var(--neutral-800);
    font-size: 24px;
}

/* botão "Limpar filtro": branco com ícone escuro (variação do whatsapp) */
.filtros-offcanvas .btn.btn-whatsapp-multivision {
    color: var(--neutral-800);
}

.filtros-offcanvas .btn.btn-whatsapp-multivision .bi {
    font-size: 16px;
    color: var(--neutral-800);
}

/* solucao-card link: button-arrow inherits color */
.solucao-card__link .btn-arrow {
    color: inherit;
    width: 24px;
    height: 24px;
    font-size: 14px;
    border: 1px solid transparent;
    border-radius: 50%;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.acc-produtos .btn {
    padding: 4px 18px;
}

/* ========================================
   SECTION LAYOUT
   ======================================== */
.section-label {
    color: var(--text-strong);
    font-family: var(--font-label);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-extrabold);
    line-height: var(--line-height-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    margin-bottom: 0;
}

.section-meta {
    color: var(--text-muted);
    font-family: var(--font-label);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-extrabold);
    line-height: var(--line-height-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* ========================================
   HERO
   ======================================== */
.hero-title-emphasis {
    color: var(--text-on-dark);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--weight-black);
    line-height: var(--line-height-tight);
}

.hero-lead {
    color: var(--text-muted);
    font-family: var(--font-system);
    font-size: var(--font-size-md);
    font-weight: var(--weight-light);
    line-height: var(--line-height-base);
    font-style: normal;
}

/* ========================================
   ABOUT SECTION ("Quem Somos")
   ======================================== */
.section-title {
    color: var(--primary-pure);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--weight-black);
    line-height: var(--line-height-tight);
}

.section-title-muted {
    color: var(--text-soft);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
    font-style: normal !important;
}

.section-body {
    color: var(--text-body);
    font-family: var(--font-label);
    font-weight: var(--weight-light);
    line-height: var(--line-height-base);
}

.link-underline {
    color: var(--text-heading);
    font-family: var(--font-label);
    font-weight: var(--weight-regular);
    line-height: var(--line-height-base);
    letter-spacing: var(--tracking-link);
    text-decoration-line: none;
    text-decoration-style: solid;
    text-underline-offset: auto;
    transition: var(--transition-base);
}

.link-underline:hover {
    text-decoration-line: underline;
}

.bg-atuacao {
    background:
        linear-gradient(180deg, rgba(226, 232, 240, 0) 33.63%, var(--neutral-300) 100%),
        var(--neutral-50);
}

/* ========================================
   PORTFOLIO SECTION
   ======================================== */
.section-title-light {
    color: var(--text-on-dark);
    font-family: var(--font-display) !important;
    font-style: italic;
    font-weight: var(--weight-black);
    line-height: var(--line-height-tight);
}

.section-title-accent {
    color: var(--primary-lightest);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
    font-style: normal !important;
}

.section-caption {
    color: var(--text-muted);
    font-family: var(--font-label);
    font-weight: var(--weight-light);
    line-height: var(--line-height-base);
}

/* ========================================
   STATS CARDS
   ======================================== */
.stat-card {
    background: var(--neutral-50);
    border: 1px solid var(--neutral-300);
}

.stat-card--head {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-card--body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.stat-card--body:nth-child(1),
.bg-map-2 {
    min-height: 250px;
}

.stat-card--media {
    position: relative;
    overflow: hidden;
}

.stat-label {
    font-size: var(--font-size-label-xs);
    line-height: var(--font-size-label-xs);
    letter-spacing: var(--tracking-label);
}

.stat-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
}

.stat-decor--dots {
    background-image: radial-gradient(var(--primary-lightest) 1.2px, transparent 1.6px);
    background-size: 9px 9px;
    opacity: 0.55;
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, #000 0%, transparent 72%);
}

.stat-decor--linear {
    width: 272px;
    height: 259px;
    left: 8px;
    top: 36px;
    inset: auto;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, var(--neutral-50) 100%),
        linear-gradient(180deg, var(--primary-lightest) 0%, rgba(127, 127, 211, 0.25) 100%);
}

.stat-decor--radial {
    width: 353px;
    height: 251px;
    left: -40px;
    top: -29px;
    inset: auto;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, var(--neutral-50) 100%),
        radial-gradient(ellipse 51% 51% at 50% 29.88%, var(--primary-lightest) 0%, rgba(127, 127, 211, 0.25) 100%);
}

.stat-decor--img {
    background-image: var(--stat-decor-img, none);
    background-size: contain;
    opacity: 0.9;
}

.strong-portfolio {
    color: var(--text-on-dark);
    font-family: var(--font-label);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: 15px;
    /* 150% */
    letter-spacing: 4px;
    text-transform: uppercase;
    border-radius: 1000px;
    border: 1px solid var(--primary-lightest);
}

.bg-portfolio {
    background: linear-gradient(180deg, rgba(5, 7, 13, 0.00) 0%, rgba(127, 127, 211, 0.15) 100%), var(--neutral-950);
}

.bg-portfolio .section-label {
    color: var(--neutral-50);
}

.bg-banner {
    background-image: url('/images/bg-hero.webp');
    background-size: cover;
    background-position: end;
}

.tabs-servicos button.nav-link {
    background-color: transparent !important;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    color: var(--neutral-500);
    text-align: center;
    font-family: var(--font-label);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 0px;
    border-bottom: 2px solid var(--neutral-700);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.tabs-servicos button.nav-link svg {
    width: 24px;
    height: 24px;
    fill: var(--neutral-400);
    transition: fill 0.3s ease;
}

.tabs-servicos button.nav-link svg path {
    fill: inherit;
    transition: fill 0.3s ease;
}

/* Hover state */
.tabs-servicos button.nav-link:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-lightest);
    color: var(--neutral-50);
}

.tabs-servicos button.nav-link:hover svg {
    fill: var(--primary-lightest);
}

/* Active state */
.tabs-servicos button.nav-link.active {
    background-color: transparent !important;
    border-bottom: 2px solid var(--primary-lightest) !important;
    color: var(--neutral-50);
}

.tabs-servicos button.nav-link.active svg {
    fill: var(--primary-lightest);
}

.svg-tabs {
    color: var(--neutral-50);
    border-radius: 4px;
    border: 1px solid var(--primary-lightest);
    box-shadow: 0 0 8px 0 rgba(127, 127, 211, 0.25);
}

.tabs-servicos h3 {
    color: var(--text-on-dark);
    font-family: var(--font-system);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 33.8px;
    margin-bottom: 0px;
}

.grid-title-tabs-servico {
    border-bottom: 1px dashed var(--primary-lightest);
    padding-bottom: 16px;
}

.tabs-servicos p {
    color: var(--text-muted);
    font-family: var(--font-label);
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 23.4px;

}

.tabs-servicos ul li,
.tabs-servicos ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    color: var(--text-on-dark);
    font-family: var(--font-label);
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 18px;
    /* 112.5% */
}


.links-bonadio {
    color: var(--neutral-50);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: var(--font-label);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    /* 21px */
    letter-spacing: 0.42px;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    transition: var(--transition-base);
}

.links-bonadio:hover {
    text-decoration-line: underline;
}

/* ----------------------------------------
   Portfolio em página clara (.servicos-main)
   O componente foi desenhado para o fundo escuro da home.
   Aqui adaptamos as cores para a página clara de serviços,
   sem afetar os outros lugares onde o componente é usado.
   ---------------------------------------- */
.servicos-main .bg-portfolio {
    background: unset;
}

.servicos-main .bg-portfolio .section-label {
    color: var(--text-strong);
}

.servicos-main .strong-portfolio {
    color: var(--primary-pure);
}

.servicos-main .tabs-servicos button.nav-link {
    border-bottom: 2px solid var(--neutral-300);
    color: var(--neutral-500);
}

.servicos-main .tabs-servicos button.nav-link svg,
.servicos-main .tabs-servicos button.nav-link svg path {
    fill: var(--neutral-400) !important;
}

/* Hover state */
.servicos-main .tabs-servicos button.nav-link:hover {
    background-color: var(--neutral-100) !important;
    border-color: var(--primary-light);
    color: var(--primary-pure);
}

.servicos-main .tabs-servicos button.nav-link:hover svg,
.servicos-main .tabs-servicos button.nav-link:hover svg path {
    fill: var(--primary-light) !important;
}

/* Active state */
.servicos-main .tabs-servicos button.nav-link.active {
    background-color: transparent !important;
    border-bottom: 2px solid var(--primary-light) !important;
    color: var(--primary-pure);
}

.servicos-main .tabs-servicos button.nav-link.active svg,
.servicos-main .tabs-servicos button.nav-link.active svg path {
    fill: var(--primary-light) !important;
}

.servicos-main .tabs-servicos h3 {
    color: var(--text-heading);
}

.servicos-main .tabs-servicos p {
    color: var(--text-body);
}

.servicos-main .tabs-servicos ul li {
    color: var(--text-body);
}

.servicos-main .svg-tabs {
    color: var(--primary-pure);
}

.servicos-main .links-bonadio {
    color: var(--primary-pure);
}

/* Título do portfolio: mesmas cores do título claro/escuro da página
   (texto base em cinza, palavras de destaque em azul). */
.servicos-main .bg-portfolio .section-title-light {
    color: var(--text-soft);
}

.servicos-main .bg-portfolio .section-title-accent {
    color: var(--primary-pure);
}

/* ----------------------------------------
   Card "Segmentos atendidos" (letreiros e luminosos)
   ---------------------------------------- */
.segmentos-card {
    width: 100%;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(2, 6, 23, 0.05) 0%, rgba(2, 6, 23, 0.50) 100%),
        linear-gradient(180deg, rgba(127, 127, 211, 0) 0%, rgba(127, 127, 211, 0.25) 100%),
        var(--neutral-950);
    border-radius: var(--radius-md);
}

@media (min-width: 992px) {
    .segmentos-card {
        width: 604px;
        max-width: 100%;
        padding: 24px 104px 24px 40px;
        border-radius: var(--radius-md) 0 0 var(--radius-md);
        position: relative;
        z-index: 2;
    }
}

.segmento-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    color: var(--neutral-50);
    border: var(--border-width-thick) solid var(--primary-lightest);
    box-shadow: 0 0 8px rgba(127, 127, 211, 0.25);
}

.segmento-icon .bi {
    font-size: 22px;
    line-height: 1;
}

.segmento-label {
    color: var(--neutral-50);
    font-family: var(--font-system);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-bold);
    line-height: 18px;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* ----------------------------------------
   Acordeão de produtos com barra de progresso (autoplay)
   ---------------------------------------- */
.acc-produtos {
    width: 100%;
    max-width: 496px;
}

.acc-header {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--neutral-200);
    text-align: left;
    cursor: pointer;
}

.acc-item:first-child .acc-header {
    padding-top: 0;
}

.acc-ic {
    flex: 0 0 auto;
    padding: 4px;
    color: var(--primary-lightest);
    /* o restante (raio, borda, fundo, glow) vem da classe .svg-servicos */
}

.acc-ic .bi {
    font-size: 16px;
    line-height: 1;
}

.acc-ic svg {
    width: 16px;
    height: 16px;
    transition: width 0.25s ease, height 0.25s ease;
}

.acc-title {
    color: var(--text-body);
    font-family: var(--font-label);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-medium);
    line-height: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color 0.25s ease;
}

/* corpo colapsável */
.acc-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.45s ease, opacity 0.3s ease;
}

.acc-text {
    color: var(--text-strong);
    font-family: var(--font-label);
    font-size: 14px;
    font-weight: var(--weight-light);
    line-height: 23.4px;
    margin: 8px 0 16px;
}

/* barra de progresso (loader) */
.acc-progress {
    height: 2px;
    width: 100%;
    margin-top: 24px;
    background: var(--neutral-200);
    overflow: hidden;
}

.acc-progress__fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--primary-lightest);
}

/* ----- item ativo (aberto) ----- */
.acc-item.is-active .acc-header {
    border-bottom: 0;
    padding-bottom: 8px;
}

.acc-item:not(.is-active) .acc-ic.svg-servicos {
    box-shadow: none;
}

.acc-item.is-active .acc-ic .bi {
    font-size: 22px;
}

.acc-item.is-active .acc-ic svg {
    width: 22px;
    height: 22px;
}

.acc-item.is-active .acc-title {
    color: var(--primary-pure);
    font-family: var(--font-system);
    font-size: var(--font-size-md);
    font-weight: var(--weight-medium);
    line-height: 27px;
    letter-spacing: 1px;
    text-transform: none;
}

.acc-item.is-active .acc-body {
    max-height: 360px;
    opacity: 1;
}

/* ----------------------------------------
   Case de sucesso (.case-text) — tipografia (fundo escuro)
   ---------------------------------------- */
.case-text .section-label {
    color: var(--text-on-dark);
}

.case-context-label {
    color: var(--text-on-dark);
    font-family: var(--font-label);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-extrabold);
    line-height: var(--line-height-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.case-context {
    color: var(--text-muted);
    font-family: var(--font-label);
    font-size: 13px;
    font-weight: var(--weight-light);
    line-height: 23.4px;
}

.case-stat {
    color: var(--text-on-dark);
    font-family: var(--font-label);
    font-size: 24px;
    font-weight: var(--weight-semibold);
    line-height: 56px;
    margin-bottom: 0;
}

.case-stat-label {
    color: var(--text-soft);
    font-family: var(--font-system);
    font-size: var(--font-size-label-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--line-height-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    margin-bottom: 0;
}

.cta-card {
    padding: 32px 24px;
    gap: 32px;
}

.cta-card__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cta-card__title {
    margin: 0;
}

.cta-card__title-1,
.cta-card__title-2 {
    font-family: var(--font-display);
    font-size: 36px;
    line-height: 1.2;
}

.cta-card__title-1 {
    color: var(--primary-lightest);
    font-weight: var(--weight-bold);
}

.cta-card__title-2 {
    color: var(--text-on-dark);
    font-style: italic;
    font-weight: var(--weight-black);
}

.cta-card__text {
    margin: 0;
    color: var(--text-on-dark);
    font-family: var(--font-label);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-light);
    line-height: 24px;
}

.cta-card__action {
    width: 100%;
}

@media (min-width: 992px) {
    .cta-card {
        padding: 64px 80px;
        gap: 40px;
    }

    .cta-card__content {
        gap: 40px;
    }

    .cta-card__title-1,
    .cta-card__title-2 {
        font-size: 56px;
        line-height: 67.2px;
    }

    .cta-card__text {
        padding-right: 134px;
    }

    .cta-card__action {
        width: 287px;
    }
}

.grid-cases {
    display: grid;
    grid-template-columns: repeat(20, 10fr);
    gap: 8px;
    grid-auto-rows: 200px;
}

.grid-cases>* {
    border-radius: 6px;
}

.grid-cases> :nth-child(1),
.grid-cases> :nth-child(2) {
    grid-row: span 2;
}

.grid-cases> :nth-child(1) {
    grid-column: span 11;
}

.grid-cases> :nth-child(2) {

    grid-column: span 9;
}

.grid-cases> :nth-child(3),
.grid-cases> :nth-child(4) {
    grid-column: span 6;
    grid-row: span 2;
}

.grid-cases> :nth-child(5) {
    grid-column: span 8;
    grid-row: span 2;
}

.grid-cases img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Tablet - 768px */
@media (max-width: 768px) {
    .grid-cases {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-cases> :nth-child(1),
    .grid-cases> :nth-child(2) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .grid-cases> :nth-child(3),
    .grid-cases> :nth-child(4),
    .grid-cases> :nth-child(5) {
        grid-column: span 2;
        grid-row: span 2;
    }
}

/* Mobile - 480px: empilha em coluna unica, cada card com altura propria
   (evita o colapso de altura do item de grid que fazia um card invadir o outro) */
@media (max-width: 480px) {
    .grid-cases {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .grid-cases>* {
        height: 260px;
    }
}

/* ========================================
   DEPOIMENTOS SECTION
   ======================================== */
.bg-gradient-depoimentos {
    background:
        linear-gradient(180deg, rgba(127, 127, 211, 0) 0%, rgba(127, 127, 211, 0.10) 100%),
        var(--neutral-950);
    border-image: linear-gradient(180deg, rgba(127, 127, 211, 0) 0%, #7F7FD3 50%, rgba(127, 127, 211, 0) 100%) 1;
}

.p-coment {

    color: var(--text-muted);
    font-family: var(--font-label);
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 150%;
    /* 24px */
}

.cite-coment {
    color: var(--primary-lightest);
    font-family: var(--font-system);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 21px;
    /* 150% */
    letter-spacing: 0.28px;
}

.card-depoimento {
    border-radius: 8px;
    border: 1px solid rgba(10, 10, 221, 0.3);
    background: linear-gradient(180deg, #0B0B32 0%, #020617 100%);
}

/* FAQ - — substitui o ícone padrão do Bootstrap pelos SVGs custom */
#accordionExample {
    /* estado fechado (.collapsed) → ícone de "+" */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23' fill='none'%3E%3Cg transform='translate(3.3137, 3.3137)'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8.5 4.5C8.5 4.22386 8.27614 4 8 4C7.72386 4 7.5 4.22386 7.5 4.5V7.5H4.5C4.22386 7.5 4 7.72386 4 8C4 8.27614 4.22386 8.5 4.5 8.5H7.5V11.5C7.5 11.7761 7.72386 12 8 12C8.27614 12 8.5 11.7761 8.5 11.5V8.5H11.5C11.7761 8.5 12 8.27614 12 8C12 7.72386 11.7761 7.5 11.5 7.5H8.5V4.5Z' fill='%23282879'/%3E%3C/g%3E%3C/svg%3E");
    /* estado aberto (:not(.collapsed)) → ícone de "x" */
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23' fill='none'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M16.9706 16.9706C13.8464 20.0948 8.78106 20.0948 5.65687 16.9706C2.53267 13.8464 2.53267 8.78105 5.65687 5.65685C8.78106 2.53266 13.8464 2.53266 16.9706 5.65685C20.0948 8.78105 20.0948 13.8464 16.9706 16.9706ZM14.1421 9.19239C14.3374 8.99713 14.3374 8.68054 14.1421 8.48528C13.9469 8.29002 13.6303 8.29002 13.435 8.48528L11.3137 10.6066L9.1924 8.48528C8.99714 8.29002 8.68056 8.29002 8.48529 8.48528C8.29003 8.68054 8.29003 8.99713 8.48529 9.19239L10.6066 11.3137L8.48529 13.435C8.29003 13.6303 8.29003 13.9469 8.48529 14.1421C8.68056 14.3374 8.99714 14.3374 9.1924 14.1421L11.3137 12.0208L13.435 14.1421C13.6303 14.3374 13.9469 14.3374 14.1421 14.1421C14.3374 13.9469 14.3374 13.6303 14.1421 13.435L12.0208 11.3137L14.1421 9.19239Z' fill='%237F7FD3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='16' height='16' fill='white' transform='translate(11.3137) rotate(45)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

/* não gira o ícone ao abrir (são dois SVGs distintos, não uma seta) */
#accordionExample .accordion-button:not(.collapsed)::after {
    transform: none;
}

/* FAQ flat numerado */
#accordionExample {
    counter-reset: faq;
}

#accordionExample .accordion-item {
    border: 0;
    border-bottom: 1px solid rgba(40, 40, 121, 0.15);
    background: transparent;
    counter-increment: faq;
}

#accordionExample .accordion-button {
    padding: 1.25rem 0;
    background: transparent;
    box-shadow: none;
    font-weight: 700;
    color: var(--primary-pure);
    gap: 1rem;
}

/* número 01, 02, 03... gerado por CSS */
#accordionExample .accordion-button::before {
    content: counter(faq, decimal-leading-zero);
    font-size: .8rem;
    font-weight: 700;
    color: var(--primary-pure);
    opacity: .55;
}

#accordionExample .accordion-button:not(.collapsed) {
    color: var(--primary-pure);
    background: transparent;
    box-shadow: none;
}

#accordionExample .accordion-body {
    padding: 0 0 1.25rem 2.4rem;
    /* alinha texto com a pergunta */
    color: #6b7280;
}

#accordionExample .accordion-header>button {
    color: var(--text-soft);
    font-family: var(--font-system);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 22.5px;
    /* 150% */
    letter-spacing: 0.3px;
    /* 21px */
}

.bg-footer {
    background-image: url(/images/footer.webp);
    background-size: cover;
    background-position: top;
}

.bg-contato-footer {
    border-radius: 8px;
    border: 1px solid #D8D8E8;
    background: #FFF;
}

.bg-contato-footer-02 {
    border-radius: 8px;
    background: var(--neutral-100);
}

.bg-footer-03,
.bg-cta {
    border: 1px solid #7f7fd394;
    background:
        linear-gradient(rgba(20, 20, 50, 0.25), rgba(20, 20, 50, 0.25)) padding-box,
        linear-gradient(135deg, #7f7fd355 0%, rgba(127, 127, 211, 0) 35%, rgba(127, 127, 211, 0) 65%, #7f7fd358 100%) border-box;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px 0 rgba(127, 127, 211, 0.20);
}

.text-footer-contact,
ul li {
    color: var(--text-on-dark);
    font-family: var(--font-label);
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
}

.title-project-footer {
    color: var(--text-soft);
    font-family: var(--font-system);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 36px;
    /* 90% */
}

.text-endereco {
    color: var(--text-soft);
    font-family: var(--font-label);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.5px;
    /* 121.875% */
}

footer strong {
    color: var(--primary-lightest);
    font-family: var(--font-system);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 13.5px;
    /* 96.429% */
    letter-spacing: 3px;
    text-transform: uppercase;
}

footer ul li,
footer ul li a,
footer p {
    list-style: none;
    color: var(--text-muted);
    font-family: var(--font-label);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.5px;
    /* 121.875% */
    margin-top: 1rem;
    text-decoration: none;
}

footer ul li a {
    display: flex;
    gap: 6px;
    align-items: center;
}

footer ul li a i {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 8px;
    border: 1px solid var(--primary-lightest);
}

footer ul li a {
    transition: 0.35s;
}

footer ul li:hover a i {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 8px;
    border: 1px solid var(--primary-lightest);
    outline: 2px solid var(--primary-lightest);
}

footer ul {
    padding: 0;
}

.bg-map {
    background-image: url(/images/bg-map-1.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.bg-map-2 {
    background-image: url(/images/bg-map-2.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
}

/* ========================================
   CARROSSEL INFINITO DE CLIENTES (marquee)
   ======================================== */
.clientes-marquee {
    overflow: hidden;
    width: 100%;
    /* esmaece as bordas esquerda/direita */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.clientes-track {
    display: flex;
    width: max-content;
    align-items: center;
    /* o track tem 2 cópias do conjunto -> deslocar 50% reinicia sem emenda */
    animation: clientes-scroll 40s linear infinite;
}

.clientes-marquee:hover .clientes-track {
    animation-play-state: paused;
}

.clientes-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2.5rem;
}

.clientes-item img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

@keyframes clientes-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .clientes-track {
        animation: none;
    }
}

/* ========================================
   CARROSSEL DE DEPOIMENTOS (Swiper)
   ======================================== */
.depoimentos-swiper {
    padding-bottom: 3.5rem;
    /* espaço p/ as bolinhas abaixo dos cards */
}

/* slides com altura uniforme + card preenchendo */
.depoimentos-swiper .swiper-slide {
    height: auto;
}

.depoimentos-swiper .card-depoimento {
    height: 100%;
}

/* destaque do card central (ativo): laterais desfocadas, mesmo tamanho */
.depoimentos-swiper .swiper-slide {
    opacity: .45;
    filter: blur(2px);
    transition: opacity .4s ease, filter .4s ease;
}

.depoimentos-swiper .swiper-slide-active {
    opacity: 1;
    filter: blur(0);
}

/* estrelinhas */
.estrelas svg {
    display: block;
}

/* bolinhas (pagination) */
.depoimentos-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: var(--text-soft);
    opacity: .4;
    transition: opacity .3s ease, background-color .3s ease, transform .3s ease;
}

.depoimentos-swiper .swiper-pagination-bullet-active {
    background-color: var(--primary-light);
    opacity: 1;
    transform: scale(1.15);
}

.copy {
    position: relative;
    transform: translateY(-20px);
    z-index: 99;
}

.copy::after {
    content: '';
    position: absolute;
    width: 100%;
    border-top: 1px solid var(--Neutrals-Neutral-900, #0F172A);
    height: 2px;
    top: 10%;
    right: 0%;
}

.copy p {
    color: var(--text-soft);
    font-family: var(--font-label);
    font-size: 10px !important;
    font-style: normal;
    font-weight: 600;
    line-height: 15px;
    /* 150% */
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Footer no mobile: aproxima os tamanhos de fonte do layout do Figma */
@media (max-width: 991.98px) {
    footer .fs-4 {
        font-size: 18px;
    }

    footer .text-endereco {
        font-size: 13px;
        line-height: 1.4;
    }

    footer ul li a {
        font-size: 15px;
        margin-top: 0.75rem;
    }
}


.breadcrumb-item+.breadcrumb-item:not(.active)::before {
    transform: translateY(-1px);
    font-size: .5rem;
}

.breadcrumb-item+.breadcrumb-item:is(.active)::before {
    font-size: .5rem;
}

.breadcrumb-item {
    position: relative;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: ">";
    color: var(--primary-lightest);
}


.breadcrumb a {
    text-decoration: none;
    letter-spacing: 4px;
}

.breadcrumb a:not(.active) {
    color: var(--Neutral-text-soft, #64748B);
    font-family: var(--Font-family-body, "DM Sans");
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    line-height: 15px;
    /* 187.5% */
    letter-spacing: 4px;
    text-transform: uppercase;
}

.breadcrumb li:is(.active) {
    color: var(--Neutral-text-light, #94A3B8);
    font-family: var(--Font-family-body, "DM Sans");
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    line-height: 15px;
    /* 187.5% */
    letter-spacing: 4px;
    text-transform: uppercase;
}

.breadcrumb li,
.breadcrumb a {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bg-bread {
    background-image: url(/images/bg-bread.webp);
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
    background-color: #03071A;
}

@media screen and (max-width: 768px) {
    .bg-bread {
        background-size: 100% 100%;
    }
}

.text-bread-p {
    color: var(--Neutral-text-light, #94A3B8);
    font-family: "Google Sans Flex";
    font-size: var(--Font-size-body-xl, 18px);
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
}

.breadcrumb {
    padding: 3rem 0;
}

.bg-bread>.container {
    padding: 0px;
}



header.container-fluid {
    max-width: 1320px;
}

.text-bread-p span {
    color: var(--Neutral-text-white, #F8FAFC);
    font-family: "Google Sans Flex";
    font-size: var(--Font-size-body-xl, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.bg-sobre-nos {
    background: linear-gradient(180deg, rgba(226, 232, 240, 0.00) 33.63%, #CBD5E1 100%), var(--Neutrals-Neutral-50, #F8FAFC);
}

.sobre-nos-main .bg-gradient-depoimentos {
    background: unset;
}


.section-nossa-essencia .valores-sobre h2,
.section-nossa-essencia .card-mmv h2,
.section-nossa-essencia .valores-sobre strong,
.section-nossa-essencia .card-mmv strong {
    color: var(--Neutral-text-white, #F8FAFC);
    font-family: var(--Font-family-body, "DM Sans");
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: 15px;
    /* 125% */
    letter-spacing: 3px;
    text-transform: uppercase;
}

.section-nossa-essencia .card-mmv p,
.section-nossa-essencia .valores-sobre p {
    color: var(--Neutral-text-light, #94A3B8);
    font-family: var(--Font-family-body, "DM Sans");
    font-size: var(--Font-size-body-md, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.border-mmv {
    border: 1px solid var(--primary-lightest, #7F7FD3);
}

.card-mmv {
    border-radius: 8px;
    background: var(--Neutrals-Neutral-950, #020617);
    background-image: url(/images/card-mmv.webp);
    background-position: center;
    background-size: 100% 100%;
    min-height: 400px;
}

.card-clientes-sobre {
    aspect-ratio: 1/1;
}

.overflow-hidden-v {
    overflow-y: clip;
}

.container {
    padding: 0rem;
}


@media screen and (max-width: 1200px) {

    section,
    .breadcrumb {
        padding: 1rem;
    }

    .display-3 {
        font-size: min(56px, 14vw);
    }

    .fs-2,
    .display-5,
    .display-4 {
        font-size: 40px !important;
    }
}

@media screen and (min-width: 1200px) {
    .container:not(.copy, .bg-bread > .container, nav, .hero-banner, .bread-contato > .container, .bread-contato~section>.container, .carrossel-clientes .container,.not-here) {
        padding: 0rem 0 !important;
    }

    section:not(.bg-bread > :nth-child(2), .bread-contato~section, .not-pt-top,.not-here) {
        padding: 5rem 0 !important;
    }

    .stat-card--body {
        min-height: 250px;
    }

    /* aqui começa mobile  */
    .segmentos-atendidos {
        position: relative;
    }

    .segmentos-atendidos::after {
        position: absolute;
        content: "aosjdoijsadoijasdoij";
        top: 0;
        left: 20%;
        width: 100vw;
        height: 100%;
        z-index: 0;
        background: linear-gradient(180deg, rgba(2, 6, 23, 0.05) 0%, rgba(2, 6, 23, 0.50) 100%), linear-gradient(180deg, rgba(127, 127, 211, 0) 0%, rgba(127, 127, 211, 0.25) 100%), var(--neutral-950);
    }

    .services-atendidos {
        position: absolute;
        left: 0;
        top: 10%;
        height: 80%;
        object-fit: cover;
        overflow: clip;
    }

    .services-atendidos>img {
        width: 90%;
        border-radius: 8px;
    }
}

.svg-servicos {
    border-radius: 4px;
    border: 1px solid var(--Neutrals-Neutral-300, #CBD5E1);
    background: var(--Neutrals-Neutral-50, #F8FAFC);
    box-shadow: 0 0 8px 0 rgba(127, 127, 211, 0.25);
}

.card-entrega {
    border-radius: 8px;
    border: 1px solid var(--primary-lightest, #7F7FD3);
    background: var(--Neutrals-Neutral-50, #F8FAFC);
}

.section-etapas p {
    color: var(--Neutral-text-soft, #64748B);
    font-family: var(--Font-family-body, "DM Sans");
    font-size: var(--Font-size-body-md, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 0;
}

.section-etapas strong {
    color: var(--primary-primary-pure, #282879);
    font-family: var(--Font-family-subheading, "Google Sans Flex");
    font-size: var(--Font-size-body-md, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* ========================================
   RESPONSIVE STEPPER / TIMELINE
   ======================================== */
.etapa-item {
    position: relative;
    z-index: 1;
}

.etapa-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.etapa-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2.5px solid var(--primary-lightest, #7F7FD3);
    background: #FFF;
    color: var(--primary-primary-pure, #282879);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.etapa-icon-filled {
    border: none;
    background: var(--primary-primary-pure, #282879);
    color: #FFF;
}

.etapa-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Connective dashed lines */
/* Mobile (vertical layout) */
@media (max-width: 991.98px) {
    .section-etapas {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .etapa-item {
        display: flex;
        flex-direction: row;
        align-items: start;
        width: 100%;
        padding: 1rem;
        gap: 1.25rem !important;
    }

    .etapa-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: calc(1rem + 28px);
        /* padding-top + half icon height */
        left: calc(1rem + 28px);
        /* padding-left + half icon width */
        width: 0;
        height: calc(100% + 1.5rem);
        /* Stretch to next item's center, accounting for gap */
        border-left: 2px dashed var(--primary-lightest, #7F7FD3);
        z-index: 0;
        pointer-events: none;
    }
}

/* Desktop (horizontal layout) */
@media (min-width: 992px) {
    .section-etapas {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .etapa-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        padding: 1rem;
        gap: 1.25rem !important;
    }

    .etapa-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: calc(1rem + 28px);
        /* padding-top + half icon height */
        left: calc(1rem + 28px);
        /* padding-left + half icon width */
        width: 100%;
        /* Stretch to next item's center */
        height: 0;
        border-top: 2px dashed var(--primary-lightest, #7F7FD3);
        z-index: 0;
        pointer-events: none;
    }
}

.metrics-servicos>span {
    color: #FFF;
    font-family: var(--Font-family-body, "DM Sans");
    font-size: var(--Font-size-body-lg, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.metrics-servicos {
    color: #94A3B8;
    text-align: center;
    font-family: var(--Font-family-subheading, "Google Sans Flex");
    font-size: var(--Font-size-body-sm, 12px);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* ========================================
   OUTRAS SOLUÇÕES (.solucao-card)
   ======================================== */
.solucao-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-40);
    height: 100%;
    padding: var(--space-24);
    background: var(--neutral-50);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    transition: var(--transition-base);
}

.solucao-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.00) 50%, #E2E8F0 100%);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.solucao-card:hover::before {
    opacity: 1;
}

.solucao-card:hover {
    border-color: var(--primary-lightest);
    box-shadow: 0 0 8px rgba(127, 127, 211, 0.25);
}

.solucao-card__top {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.solucao-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: var(--space-4);
    background: var(--neutral-50);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 8px rgba(127, 127, 211, 0.25);
    color: var(--primary-light);
    font-size: 22px;
}

.solucao-card__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.solucao-card__title {
    margin: 0;
    color: var(--primary-pure);
    font-family: var(--font-label);
    font-size: 14px;
    font-weight: var(--weight-bold);
    line-height: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.solucao-card__text {
    margin: 0;
    color: #4A4A72;
    font-family: var(--font-label);
    font-size: 14px;
    font-weight: var(--weight-light);
    line-height: 21px;
}

.solucao-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--neutral-800);
    font-family: var(--font-label);
    font-size: 14px;
    font-weight: var(--weight-regular);
    line-height: 21px;
    letter-spacing: var(--tracking-link);
    text-decoration: none;
    transition: var(--transition-base);
}

.solucao-card__link:hover {
    color: var(--primary-pure);
}

.logo-header {
    min-height: 200px;
}

iframe {
    width: 100%;
}

@media screen and (min-width: 1200px) {
    .bg-cta {
        min-height: 323px;
        border-radius: 24px;
        position: relative;
        transform: translateY(50%);
        z-index: 9;
        background-image: url(/images/cta-background.webp);
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 2rem;
    }

    .top-cta .container>div {
        padding-top: 2rem;
    }
}

.bg-portfolio {
    background: var(--Neutral-background-bg-950, #020617);
    position: relative;
}

.top-15 {
    top: 15%;
    z-index: 2;
}

.border-top-gradient,
.bg-portfolio::after {
    position: absolute;
    content: "";
    width: 70%;
    height: 1px;
    background: linear-gradient(90deg, rgba(127, 127, 211, 0.00) 0%, var(--primary-lightest) 50%, rgba(127, 127, 211, 0.00) 100%);
    top: 0;
    transform: translateX(17%);
}

/* ========================================
   PORTFÓLIO — FILTROS + GALERIA
   ======================================== */

/* ---- Filtros (serviços / segmentos) ---- */
.filtro-pill {
    padding: var(--space-4) var(--space-12);
    padding-top: 6px;
    padding-bottom: 6px;
    background: var(--neutral-950);
    border: 1px solid var(--primary-pure);
    border-radius: var(--radius-full);
    color: var(--text-soft);
    font-family: var(--font-label);
    font-size: var(--font-size-label-xs);
    font-weight: var(--weight-extrabold);
    line-height: var(--line-height-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-base);
}

.filtro-pill:hover {
    border-color: var(--primary-lightest);
    color: var(--text-on-dark);
}

.filtro-pill.is-active {
    border-color: var(--primary-lightest);
    color: var(--text-on-dark);
}

.filtro-pill:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.filtro-pill--light {
    background: transparent;
    border-color: var(--primary-pure);
    color: var(--primary-pure);
}

.filtro-pill--light:hover {
    background: var(--primary-pure);
    color: var(--neutral-50);
}

/* Variante: botão "Limpar filtros" (aparece quando há filtro ativo) */
.filtro-pill--clear {
    border-color: var(--primary-lightest);
    color: var(--text-on-dark);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.85;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.filtro-pill--clear:hover {
    opacity: 1;
    border-color: #ef4444;
    color: #fca5a5;
}

.filtro-pill--clear .bi {
    font-size: 11px;
}

/* divisória entre as duas colunas de filtro (só no desktop) */
@media (min-width: 992px) {
    .portfolio-filtros__col--seg {
        padding-left: var(--space-40);
        border-left: 1px solid var(--neutral-800);
    }
}

/* botão "Filtrar cases" (mobile) — herda o visual de .filtro-pill */
.filtro-pill .bi {
    font-size: 12px;
    line-height: 1;
}

/* ---- Offcanvas de filtros (mobile) ---- */
.filtros-offcanvas__title {
    margin: 0;
    color: var(--text-on-dark);
    font-family: var(--font-label);
    font-size: 22px;
    font-weight: var(--weight-semibold);
    line-height: 33px;
}

.filtros-offcanvas .offcanvas-body {
    padding: 24px 16px;
}

/* ---- Galeria de cases ---- */
.portfolio-galeria {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.portfolio-galeria__row {
    display: flex;
    align-items: stretch;
    gap: var(--space-8);
}

/* linha do meio: par de cards à esquerda + destaque à direita */
.portfolio-galeria__pair {
    flex: 1 1 0;
    display: flex;
    gap: var(--space-8);
}

.portfolio-galeria__pair .portfolio-card {
    flex: 1 1 0;
}

.portfolio-galeria__row--feature .portfolio-card--feature {
    flex: 1 1 0;
}

/* linha de baixo: 3 colunas iguais */
.portfolio-galeria__row--trio .portfolio-card {
    flex: 1 1 0;
}

/* cards */
.mais-portfolio .portfolio-card {
    aspect-ratio: 16/6;
    max-width: 100%;
    height: 300px !important;
}

.portfolio-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--neutral-800);
    outline: 1px solid transparent;
    outline-offset: -1px;
    text-decoration: none;
    transition: var(--transition-base);
}

.portfolio-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: var(--transition-transform);
}

/* overlay com gradiente + título/descrição (sempre visível) */
.portfolio-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--space-16);
    padding: var(--space-24);
    border-radius: var(--radius-sm);
    overflow: hidden;
    /* base: gradiente inferior sempre visível */
    background: linear-gradient(180deg, rgba(2, 6, 23, 0) 0%, rgba(2, 6, 23, 0.95) 100%);
}

/* camada extra que sobe de baixo p/ cima no hover (transform anima de verdade) */
.portfolio-card__overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.80) 0%, var(--neutral-950) 100%);
    transform: translateY(100%);
    transition: transform 0.45s ease;
}

/* textos acima da camada animada */
.portfolio-card__title,
.portfolio-card__desc {
    position: relative;
    z-index: 1;
}

.portfolio-card__title {
    margin: 0;
    color: var(--text-on-dark);
    font-family: var(--font-label);
    font-size: 22px;
    font-weight: var(--weight-semibold);
    line-height: 33px;
}

.portfolio-card__desc {
    margin: 0;
    color: var(--text-muted);
    font-family: var(--font-label);
    font-size: 14px;
    font-weight: var(--weight-regular);
    line-height: 21px;
    transition: color 0.3s ease;
}

/* tags no topo — reveladas no hover */
.portfolio-card__tags {
    position: absolute;
    top: 14px;
    left: var(--space-24);
    right: var(--space-24);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-tag {
    padding: 6px var(--space-12);
    background: var(--neutral-950);
    border: 1.5px solid var(--primary-lightest);
    border-radius: var(--radius-full);
    color: var(--text-on-dark);
    font-family: var(--font-label);
    font-size: var(--font-size-label-xs);
    font-weight: var(--weight-extrabold);
    line-height: var(--line-height-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
}

/* botão "Ver case" — centralizado, revelado no hover */
.portfolio-card__cta {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 25px rgba(127, 127, 211, 0.5);
    transition: opacity 0.3s ease;
}

/* ---- estado hover ---- */
.portfolio-card:hover {
    outline-color: var(--primary-lightest);
    /* box-shadow: 0 0 20px 5px rgba(127, 127, 211, 0.25); */
}

.portfolio-card:hover img {
    transform: scale(1.04);
}

/* gradiente sobe de baixo p/ cima e cobre o card inteiro */
.portfolio-card:hover .portfolio-card__overlay::before {
    transform: translateY(0);
}

.portfolio-card:hover .portfolio-card__desc {
    color: var(--text-on-dark);
}

.portfolio-card:hover .portfolio-card__tags,
.portfolio-card:hover .portfolio-card__cta {
    opacity: 1;
}

/* alturas conforme o layout do design */
.portfolio-card--hero {
    height: 588px;
}

.portfolio-galeria__row--feature {
    height: 377px;
}

.portfolio-galeria__row--trio {
    height: 291px;
}

/* Tablet */
@media (max-width: 991.98px) {
    .portfolio-card--hero {
        height: 420px;
    }

    .portfolio-galeria__row--feature {
        height: 300px;
    }

    .portfolio-galeria__row--trio {
        height: 220px;
    }
}

/* Mobile: empilha todos os cards em 1 coluna, um embaixo do outro */
@media (max-width: 767.98px) {

    .portfolio-galeria__row,
    .portfolio-galeria__pair {
        flex-direction: column;
        height: auto;
    }

    /* zera o flex-basis:0 que colapsava os cards quando a linha vira coluna */
    .portfolio-card,
    .portfolio-galeria__pair .portfolio-card,
    .portfolio-galeria__row--feature .portfolio-card--feature,
    .portfolio-galeria__row--trio .portfolio-card {
        flex: 1 1 auto;
        width: 100%;
        height: 280px;
    }

    .portfolio-card--hero {
        height: 280px;
    }
}

.bg-dark-site {
    background-color: #020617;
}

.case-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--text-on-dark);
    font-family: var(--font-label);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-extrabold);
    line-height: var(--line-height-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.case-badge .bi {
    font-size: 16px;
    line-height: 1;
    color: var(--primary-lightest);
}

.case-paragraph {
    margin: 0;
    color: var(--text-on-dark);
    font-family: var(--font-label);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-regular);
    line-height: 24px;
}

.ficha-row {
    display: flex;
    gap: var(--space-24);
    padding-block: var(--space-8);
    border-bottom: 1px solid var(--neutral-900);
}

.ficha-row dt {
    flex: 0 0 90px;
    margin: 0;
    color: var(--neutral-400);
    font-family: var(--font-label);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-semibold);
    line-height: 24px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ficha-row dd {
    flex: 1 1 0;
    margin: 0;
    text-align: right;
    color: var(--text-on-dark);
    font-family: var(--font-label);
    font-size: 14px;
    font-weight: var(--weight-regular);
    line-height: 24px;
}

.portfolio-case-main .acc-produtos {
    max-width: 100%;
}

.portfolio-case-main .acc-header {
    gap: var(--space-8);
    border-bottom-color: var(--neutral-900);
}

.portfolio-case-main .acc-ic {
    padding: 0;
    color: var(--neutral-500);
    font-family: var(--font-label);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-black);
    line-height: 13.5px;
}

.portfolio-case-main .acc-title {
    color: var(--text-on-dark);
    font-family: var(--font-label);
    font-size: 14px;
    font-weight: var(--weight-bold);
    line-height: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.portfolio-case-main .acc-text {
    color: var(--neutral-400);
    font-size: var(--font-size-sm);
    margin: var(--space-16) 0 var(--space-24);
}

.portfolio-case-main .acc-progress {
    background: var(--neutral-900);
}

.portfolio-case-main .acc-item.is-active .acc-ic {
    color: var(--primary-lightest);
}

.portfolio-case-main .acc-item.is-active .acc-title {
    color: var(--text-on-dark);
    font-family: var(--font-label);
    font-size: 14px;
    font-weight: var(--weight-bold);
    line-height: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.case-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    max-width: 100%;
}

.case-grid__img {
    width: 100%;
    min-width: 0;
    display: block;
    border-radius: var(--radius-md);
    object-fit: cover;
    object-position: center;
    aspect-ratio: 16 / 10;
}

.case-grid__right,
.case-grid__stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    min-width: 0;
}

@media (min-width: 992px) {
    .case-grid {
        flex-direction: row;
        align-items: stretch;
        height: 485px;
    }

    .case-grid__img {
        aspect-ratio: auto;
        height: 100%;
    }

    .case-grid__img--big {
        flex: 0 0 auto;
        width: 58%;
    }

    .case-grid__right {
        flex: 1 1 0;
        flex-direction: row;
    }

    .case-grid__img--tall {
        flex: 1 1 0;
        min-width: 0;
        max-width: 200px;
    }

    .case-grid__stack {
        flex: 0 0 auto;
        width: 246px;
    }

    .case-grid__stack .case-grid__img {
        flex: 1 1 0;
        min-height: 0;
        height: auto;
    }
}

@media (max-width: 991.98px) {
    /* Mobile: mesmo mosaico da referência — imagem grande no topo e,
       embaixo, a imagem alta à esquerda + as 2 empilhadas à direita. */
    .case-grid {
        gap: 10px;
    }

    .case-grid__img--big {
        aspect-ratio: 4 / 3;
    }

    .case-grid__right {
        flex-direction: row;
        gap: 10px;
        align-items: start;
    }

    .case-grid__img--tall,
    .case-grid__stack {
        flex: 1 1 0;
        min-width: 0;
    }

    .case-grid__img--tall {
        aspect-ratio: 3 / 4;
        height: auto;
    }

    .case-grid__stack {
        gap: 10px;
    }
}

.case-paragraph--soft {
    color: var(--neutral-300);
}

.fluxo-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    height: 100%;
}

@media screen and (max-width: 768px) {
    .fluxo-step {
        flex-direction: row;
    }
}

.top-25 {
    top: 14%;
}

.fluxo-step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: var(--radius-full);
    border: 1px solid var(--primary-lightest);
    color: var(--primary-lightest);
    font-size: 20px;
}

.fluxo-step.is-active .fluxo-step__icon {
    background: var(--primary-lightest);
    color: var(--neutral-50);
    box-shadow: 0 0 10px rgba(127, 127, 211, 0.15);
}

.fluxo-step__title {
    margin: 0;
    color: var(--text-on-dark);
    font-family: var(--font-system);
    font-size: 14px;
    font-weight: var(--weight-bold);
    line-height: 21px;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.fluxo-step__text {
    color: var(--neutral-400);
    font-family: var(--font-label);
    font-size: 14px;
    font-weight: var(--weight-regular);
    line-height: 21px;
}

.case-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: 6px var(--space-16) 6px var(--space-12);
    border: 1px solid var(--primary-lightest);
    border-radius: var(--radius-full);
    color: var(--neutral-50);
    font-family: var(--font-label);
    font-size: var(--font-size-label-xs);
    font-weight: var(--weight-extrabold);
    line-height: var(--line-height-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.case-pill .bi {
    font-size: 20px;
    color: var(--primary-lightest);
}

.case-lead {
    margin: 0;
    color: var(--neutral-50);
    font-family: var(--font-label);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-light);
    line-height: 23.4px;
}

.case-lead__muted {
    color: var(--neutral-400);
}

.case-divider {
    height: 1px;
    border: 0;
    border-top: 1px solid var(--primary-lightest);
    opacity: 1;
}

.case-subtitle {
    color: var(--neutral-50);
    font-family: var(--font-system);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-medium);
    line-height: 23.4px;
}

.servico-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.servico-list li {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--neutral-50);
    font-family: var(--font-label);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-light);
    line-height: 18px;
}

.servico-list .bi {
    flex: 0 0 auto;
    font-size: 16px;
    color: var(--primary-lightest);
}

.com-visual__media img {
    width: 100%;
    display: block;
    aspect-ratio: 599 / 402;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-md);
}

@media (max-width: 991.98px) {
    /* No mobile as imagens viram um carrossel horizontal com swipe
       (estilo Instagram), contido no próprio bloco para não quebrar
       o scroll vertical da página. */
    .com-visual__media {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .com-visual__media::-webkit-scrollbar {
        display: none;
    }

    .com-visual__media img {
        flex: 0 0 85%;
        width: 85%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* Sem sticky no mobile: o texto acompanha o fluxo normal */
    .com-visual__text {
        position: static !important;
    }
}

.case-galeria {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.case-galeria__row {
    display: flex;
    gap: var(--space-8);
    height: 183px;
}

.case-galeria__row--sm {
    height: 158px;
}

.case-galeria__row img {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-sm);
}

.case-galeria__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius-sm);
    pointer-events: none;
    background: linear-gradient(180deg,
            rgba(2, 6, 23, 0.70) 0%,
            rgba(2, 6, 23, 0.85) 32%,
            var(--neutral-950) 100%);
}

.case-galeria__cta {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 575.98px) {
    /* No mobile vira um mosaico "quadrado": a 1ª imagem ocupa a largura
       toda (12) e as duas seguintes ficam pela metade (6/6). As demais
       imagens e a segunda fileira ficam ocultas. */
    .case-galeria {
        overflow: hidden;
    }

    .case-galeria__row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        height: auto;
    }

    .case-galeria__row--sm {
        display: none;
    }

    .case-galeria__row img {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .case-galeria__row img:first-child {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 9;
    }

    .case-galeria__row img:nth-child(n + 4) {
        display: none;
    }
}

.galeria-lightbox .modal-content {
    background: rgba(2, 6, 23, 0.96);
    border: 0;
}

.galeria-lightbox__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

.galeria-swiper {
    width: 100%;
    height: 100%;
    --swiper-navigation-color: var(--neutral-50);
    --swiper-pagination-color: var(--neutral-50);
}

.galeria-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
}

.galeria-swiper .swiper-slide img {
    max-width: min(92vw, 1100px);
    max-height: 82vh;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.galeria-swiper .swiper-pagination {
    color: var(--neutral-50);
    font-family: var(--font-label);
    font-size: 14px;
    letter-spacing: 1px;
}

.metric-card {
    padding: var(--space-24);
    background: var(--neutral-950);
    border: 1px solid var(--primary-lightest);
    border-radius: var(--radius-md);
}

.metric-card__num {
    color: var(--text-on-dark);
    font-family: var(--font-label);
    font-size: 40px;
    font-weight: var(--weight-semibold);
    line-height: 1.1;
}

.metric-card__label {
    margin: 0;
    color: var(--neutral-400);
    font-family: var(--font-system);
    font-size: var(--font-size-label-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--line-height-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.metric-card--text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 160px;
}

.metric-card__text {
    margin: 0;
    color: var(--neutral-400);
    font-family: var(--font-system);
    font-size: 14px;
    font-weight: var(--weight-regular);
    line-height: 21px;
}

/* brilho radial em um dos cards de texto */
.metric-card--glow {
    position: relative;
    overflow: hidden;
    background-image: url(/images/bg-map-3.webp);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;

}

.metric-card--glow>* {
    position: relative;
    z-index: 1;
}

/* card de imagem */
.metric-card--media {
    padding: 0;
    overflow: hidden;
}

.metric-card--media img {
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media screen and (min-width: 768px) {

    .metric-row> :nth-child(1),
    .metric-row> :nth-child(3) {
        height: 445px;
    }
}

.mais-portfolio .portfolio-card {
    height: 420px;
}

@media (max-width: 767.98px) {
    .mais-portfolio .portfolio-card {
        height: 320px;
    }
}

.contato-page header {
    background: var(--Neutrals-Neutral-50, #F8FAFC);
}

/* logo escuro no header claro (recolore só o wordmark; os pontos coloridos ficam) */
.contato-page .site-header__brand svg path[fill="#F8FAFC"] {
    fill: #0B0B32;
}

/* hover dos links de navegação na cor primária (em vez de branco) */
.contato-page .nav-anim__mask::before {
    color: var(--primary-pure);
}

/* lista com check (fundo claro) */
.check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.check-list li {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--text-body);
    font-family: var(--font-label);
    font-size: 14px;
    font-weight: var(--weight-semibold);
    line-height: 21px;
}

.check-list .bi {
    flex: 0 0 auto;
    font-size: 16px;
    color: var(--primary-pure);
}

/* ---- Formulário de contato ---- */
.contato-form {
    max-width: 496px;
    padding: var(--space-24);
    background: var(--neutral-100);
    border: 1px solid #D8D8E8;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
}

.contato-form__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.contato-form .form-label {
    margin-bottom: var(--space-12);
    color: var(--text-body);
    font-family: var(--font-label);
    font-size: 14px;
    font-weight: var(--weight-regular);
}

.contato-form .form-control,
.contato-form .form-select {
    padding: 14px var(--space-16);
    background: var(--neutral-50);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    color: var(--text-body);
    font-family: var(--font-label);
    font-size: 12px;
    font-weight: var(--weight-regular);
}

.contato-form .form-control::placeholder {
    color: var(--text-strong);
}

.contato-form .form-control:focus,
.contato-form .form-select:focus {
    border-color: var(--primary-lightest);
    box-shadow: var(--focus-ring);
}

.contato-form__note em {
    color: var(--text-soft);
    font-family: var(--font-label);
    font-size: 14px;
    font-style: italic;
}

.contato-form__note em:first-child {
    font-weight: var(--weight-semibold);
}

iframe {
    margin-top: 3rem;
    border-radius: 8px;
    min-height: 500px;
}

/* --- Floating WhatsApp Button --- */
.whatsapp-float-btn {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 24px;
    right: 24px;
    background-color: #25D366;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.whatsapp-float-btn:hover {
    background-color: #20ba5a;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.whatsapp-float-btn i {
    line-height: 1;
}

/* Adjust position if on mobile to avoid covering other elements */
@media (max-width: 768px) {
    .whatsapp-float-btn {
        width: 50px;
        height: 50px;
        bottom: 16px;
        right: 16px;
        font-size: 26px;
    }
}

/* --- Hide Google reCAPTCHA Badge --- */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* --- Custom Hamburger Menu --- */
.site-header__toggler {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: 32px;
    height: 18px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    cursor: pointer;
    box-shadow: none !important;
    outline: none !important;
}

.site-header__toggler .hamburger-line {
    display: block;
    height: 2px;
    background-color: #fff !important;
    /* White lines */
    border-radius: 2px;
    transition: all 0.3s ease;
}

.site-header__toggler .hamburger-line:nth-child(1) {
    width: 24px;
    /* Top line is long */
}

.site-header__toggler .hamburger-line:nth-child(2) {
    width: 24px;
    /* Middle line is medium */
}

.site-header__toggler .hamburger-line:nth-child(3) {
    width: 16px;
    /* Bottom line is short */
}

/* Contato page: header is white, so hamburger lines must be dark */
.contato-page .site-header__toggler .hamburger-line {
    background-color: #020617 !important;
}

.contato-page .site-header__toggler {
    border-color: rgba(2, 6, 23, 0.2) !important;
}

/* Mobile: categories offcanvas slides from bottom, half-screen */
@media (max-width: 991.98px) {
    .mv-offcanvas.offcanvas-bottom {
        width: 100vw;
        max-width: 100vw;
        left: 0 !important;
        right: 0 !important;
        height: auto;
        max-height: 50vh;
        border-radius: 16px 16px 0 0;
        border-left: none;
        border-top: 1px solid rgba(127, 127, 211, 0.25);
        box-sizing: border-box;
    }

    .mv-offcanvas.offcanvas-bottom .offcanvas-body {
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Mobile tab content: icon + title side by side */
    .grid-title-tabs-servico {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    .grid-title-tabs-servico .svg-tabs {
        flex-shrink: 0;
    }

    /* Mobile list items: icon stays pinned left, text wraps beside it */
    .tabs-servicos ul li.d-flex {
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    .tabs-servicos ul li.d-flex > svg {
        flex-shrink: 0;
        margin-top: 2px;
    }
}