:root {
    /* ==========================================================================
       1. TOKENS DO SISTEMA DE DESIGN PRINCIPAL (SEMANTICO E COMPONENTE)
       ========================================================================== */

    /* ========= BRAND COLORS ========= */
    --color-brand-primary: rgb(106, 80, 157);
    --color-brand-secondary: rgb(126, 97, 167);
    --color-brand-pink: rgb(207, 71, 147);
    --color-brand-teal: rgb(49, 180, 166);
    --color-brand-teal-light: rgb(139, 245, 233);

    /* ========= NEUTROS ========= */
    --color-neutral-white: rgb(255, 255, 255);
    --color-neutral-black: rgb(17, 17, 17);

    /* ========= VARIAVEIS DERIVADAS + DE SUPORTE ========= */
    --color-surface-primary: var(--color-neutral-white);
    --color-surface-dark: rgb(21, 20, 25);
    --color-surface-dark-elevated: rgb(29, 26, 39);

    /* Cores de Texto e Tipografia */
    --color-text-primary: var(--color-neutral-black);
    --color-text-secondary: rgba(17, 17, 17, 0.78);

    /* Bordas */
    --color-border-default: rgba(8, 8, 8, 0.1);
    --color-border-light: rgba(255, 255, 255, 0.12);

    /* Feedbacks e Status */
    --color-feedback-success: rgb(42, 154, 142);
    --color-feedback-warning: rgb(255, 189, 46);
    --color-feedback-error: rgb(181, 59, 129);

    /* ========= TOKENS DE SUPORTE CONSOLIDADOS E SEMANTICOS ========= */
    /* Paleta de Cinzas */
    --color-gray-50: rgb(241, 245, 249);
    --color-gray-100: rgb(237, 242, 247);
    --color-gray-200: rgb(226, 232, 240);
    --color-gray-300: rgb(203, 213, 225);
    --color-gray-700: rgb(51, 65, 85);
    --color-gray-900: rgb(15, 23, 42);

    /* Tons de Alerta de Feedback */
    --color-feedback-success-light: rgb(220, 252, 231);
    --color-feedback-error-light: rgb(254, 226, 226);
    --color-feedback-info-light: rgb(219, 234, 254);
    --color-feedback-warning-light: rgb(254, 240, 138);

    /* Marcas Parceiras (Empresas Brasileiras) */
    --color-brand-nubank: rgb(130, 10, 209);
    --color-brand-ifood: rgb(234, 29, 44);
    --color-brand-totvs: rgb(0, 92, 138);
    --color-brand-itau: rgb(236, 112, 0);
    --color-brand-magalu: rgb(0, 134, 255);
    --color-brand-stone: rgb(0, 168, 104);
    --color-brand-quintoandar: rgb(0, 30, 98);
    --color-brand-fiap: rgb(237, 20, 91);
    --color-brand-ambev: rgb(0, 45, 98);
    --color-brand-natura: rgb(243, 112, 33);

    /* Sobreposicoes Brancas Translucidas */
    --color-white-translucent-5: rgba(255, 255, 255, 0.05);
    --color-white-translucent-6: rgba(255, 255, 255, 0.06);
    --color-white-translucent-7: rgba(255, 255, 255, 0.07);
    --color-white-translucent-8: rgba(255, 255, 255, 0.08);
    --color-white-translucent-15: rgba(255, 255, 255, 0.15);
    --color-white-translucent-22: rgba(255, 255, 255, 0.22);
    --color-white-translucent-70: rgba(255, 255, 255, 0.7);

    /* Opacidades de Gradientes Radiais das Estrelas */
    --color-white-translucent-20: rgba(255, 255, 255, 0.2);
    --color-white-translucent-30: rgba(255, 255, 255, 0.3);
    --color-white-translucent-40: rgba(255, 255, 255, 0.4);
    --color-white-translucent-50: rgba(255, 255, 255, 0.5);
    --color-white-translucent-60: rgba(255, 255, 255, 0.6);

    /* Sobreposicoes Negras Translucidas e Sombras */
    --color-black-translucent-5: rgba(0, 0, 0, 0.05);
    --color-black-translucent-10: rgba(0, 0, 0, 0.1);
    --color-black-translucent-15: rgba(0, 0, 0, 0.15);
    --color-black-translucent-20: rgba(0, 0, 0, 0.2);
    --color-black-translucent-40: rgba(0, 0, 0, 0.4);
    --color-black-translucent-60: rgba(0, 0, 0, 0.6);
    --color-black-translucent-80: rgba(0, 0, 0, 0.8);

    /* Elementos de Brilho da Aurora no Hero */
    --color-aurora-teal-glow: rgba(49, 180, 166, 0.18);
    --color-aurora-pink-glow: rgba(207, 71, 147, 0.12);
    --color-aurora-purple-glow-1: rgba(126, 97, 167, 0.35);
    --color-aurora-purple-glow-2: rgba(106, 80, 157, 0.20);
    --color-aurora-bg-start: rgb(44, 35, 63);
    --color-aurora-bg-middle: rgb(36, 28, 53);
    --color-aurora-bg-end: rgb(28, 22, 40);

    /* ========= DEGRADES ========= */
    --gradient-aurora: linear-gradient(135deg,
            var(--color-brand-primary) 0%,
            var(--color-brand-pink) 50%,
            var(--color-brand-teal) 100%);

    /* ========= TIPOGRAFIA, ESPAÇAMENTO, SOMBRAS, LAYOUT, TRANSIÇÕES ========= */
    --font-primary: "Outfit", sans-serif;
    --font-size-small: 0.975rem;
    --font-size-base: 1rem;
    --font-size-medium: 1.25rem;
    --font-size-large: 2rem;
    --font-size-destaque: 4rem;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --spacing-small: 8px;
    --spacing-medium: 16px;
    --spacing-large: 32px;
    --spacing-xl: 48px;
    --spacing-xlarge: 64px;
    --spacing-xxlarge: 80px;
    --border-radius-small: 10px;
    --border-radius-medium: 18px;
    --border-radius-large: 54px;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-dropdown: 0 10px 15px rgba(0, 0, 0, 0.05);
    --recipiente-max-width: 1200px;
    --z-index-header: 9999;
    --transition-default: 0.3s ease;
    --transition-bounce: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* A12 — scroll-behavior suave apenas para quem não prefere redução de movimento (WCAG 2.3.3) */
    scroll-behavior: auto;
    /* Estilização da barra de rolagem (elimina fundo branco do navegador) */
    scrollbar-width: thin;
    scrollbar-color: var(--color-brand-primary) var(--color-surface-dark);
}

/* Customização da Barra de Rolagem (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface-dark);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-brand-primary), var(--color-brand-teal));
    border-radius: 5px;
    border: 2px solid var(--color-surface-dark);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--color-brand-pink), var(--color-brand-teal));
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    line-height: 1.6;
    background-color: var(--color-surface-primary);
    padding-top: 64px;
}

.recipiente {
    max-width: var(--recipiente-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-medium);
}

/* Design do Focus */
*:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 4px;
}

/* Botao de Pular para Conteudo - Link de Salto Acessível */
.link-salto {
    position: absolute;
    top: var(--spacing-medium);
    left: var(--spacing-medium);
    background: var(--color-brand-primary);
    color: var(--color-neutral-white);
    padding: 10px 20px;
    z-index: 100000;
    border-radius: var(--border-radius-small);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition-default), opacity var(--transition-default);
}

.links-salto {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100000;
}

.link-salto:not(:focus-visible) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.link-salto:focus-visible {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100000;
    padding: 10px 18px;
    background-color: var(--color-surface-dark-elevated);
    color: var(--color-neutral-white);
    border: 2px solid var(--color-brand-teal);
    border-radius: var(--border-radius-small);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    outline: none;
}

/* ======================================== CLASSES DESENHADAS (MINI PAINEL) ======================================== */
.mini-painel__celula--azul {
    background-color: var(--color-feedback-info-light);
}

.mini-painel__celula--amarelo {
    background-color: var(--color-feedback-warning-light);
}

.mini-painel__celula--verde {
    background-color: var(--color-feedback-success-light);
}

.mini-painel__celula--vermelho {
    background-color: var(--color-feedback-error-light);
}

.computador__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color-brand-pink);
    margin: 0 auto 8px auto;
}

.computador__linha {
    height: 6px;
    margin: 4px auto;
    border-radius: 2px;
}

.computador__linha--longa {
    width: 80%;
    background-color: var(--color-gray-200);
}

.computador__linha--curta {
    width: 60%;
    background-color: var(--color-gray-300);
}

/* ======================================== COMPONENTES GLOBAIS (BANNER & BOTAO) ======================================== */
.banner-cookies {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-neutral-white);
    box-shadow: 0 -4px 10px var(--color-black-translucent-10);
    padding: var(--spacing-medium) var(--spacing-large);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99999 !important;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}

.banner-cookies.is-visible {
    transform: translateY(0);
}

.banner-cookies__texto {
    font-size: var(--font-size-small);
    color: var(--color-neutral-black);
    margin: 0;
    flex: 1;
}

.banner-cookies__link {
    color: var(--color-brand-primary);
    text-decoration: underline;
}

.banner-cookies__botao {
    margin-left: var(--spacing-large);
    padding: 10px 20px;
    font-size: var(--font-size-small);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    background-color: var(--color-brand-primary);
    color: var(--color-neutral-white);
    border: none;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    transition: background-color var(--transition-default), transform 0.2s ease;
}

.banner-cookies__botao:hover,
.banner-cookies__botao:focus-visible {
    background-color: var(--color-brand-secondary);
    transform: translateY(-1px);
}


@media (max-width: 768px) {
    .banner-cookies {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-medium);
    }

    .banner-cookies__botao {
        margin-left: 0;
        margin-top: var(--spacing-small);
        width: 100%;
    }

    .botao-topo {
        bottom: 80px;
        /* Evita que fique escondido atrás do banner de cookies no mobile */
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: var(--font-size-base);
    }
}

section {
    scroll-margin-top: 80px;
}

/* ======================================== CABEÇALHO/NAVEGAÇÃO - 0 ======================================== */
.cabecalho {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--color-neutral-white);
    z-index: var(--z-index-header);
    padding: var(--spacing-medium) 0;
    box-shadow: var(--shadow-medium);
}

.cabecalho__recipiente {
    display: flex;
    max-width: var(--recipiente-max-width);
    width: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-medium);
}

.cabecalho__logo {
    display: flex;
    align-items: center;
    margin: 0;
}

.cabecalho__logo-link {
    display: flex;
    align-items: center;
}

.cabecalho__logo-imagem {
    max-width: 100%;
    height: auto;
    display: block;
}

.cabecalho__botao-menu {
    display: none;
    background: none;
    border: none;
    color: var(--color-brand-primary);
    cursor: pointer;
    padding: var(--spacing-small);
}

.cabecalho__botao-menu i {
    font-size: var(--font-size-large);
}

.cabecalho__navegacao {
    display: flex;
    align-items: center;
}

.cabecalho__lista-navegacao {
    display: flex;
    list-style: none;
    gap: var(--spacing-large);
    margin: 0;
    padding: 0;
    align-items: center;
}

.cabecalho__lista-navegacao a:not(.botao-cta) {
    text-decoration: none;
    color: var(--color-neutral-black);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    transition: color var(--transition-default);
}

.cabecalho__lista-navegacao a:not(.botao-cta):hover,
.cabecalho__lista-navegacao a:not(.botao-cta):focus-visible {
    color: var(--color-brand-primary);
}

@media (max-width: 992px) {
    .cabecalho__botao-menu {
        display: block;
    }

    .cabecalho__lista-navegacao {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-neutral-white);
        flex-direction: column;
        padding: var(--spacing-medium) 0;
        box-shadow: var(--shadow-dropdown);
        gap: 0;
    }

    .cabecalho__lista-navegacao.is-ativo {
        display: flex;
    }

    .cabecalho__lista-navegacao li {
        width: 100%;
    }

    .cabecalho__lista-navegacao a:not(.botao-cta) {
        display: block;
        padding: var(--spacing-medium);
        text-align: center;
        border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-black) 5%, transparent);
    }

    .cabecalho__lista-navegacao li:last-child a:not(.botao-cta) {
        border-bottom: none;
    }

    .cabecalho__lista-navegacao .botao-cta {
        margin: var(--spacing-medium);
        width: calc(100% - calc(var(--spacing-medium) * 2));
    }
}

/* ======================================== HERO - SEÇÃO 1 ======================================== */
/* ─── FUNDO AURORA ─────────────────────────────────────── */
.destaque {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    font-family: var(--font-primary);
    padding-bottom: 140px;
    background-color: var(--color-aurora-bg-start);
}

.destaque__aurora-fundo {
    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        linear-gradient(180deg, rgba(15, 10, 26, 0.45) 0%, rgba(15, 10, 26, 0.15) 35%, transparent 65%),
        radial-gradient(ellipse 80% 45% at 20% 0%,
            var(--color-aurora-teal-glow) 0%,
            transparent 60%),
        radial-gradient(ellipse 70% 40% at 80% 5%,
            var(--color-aurora-pink-glow) 0%,
            transparent 65%),
        radial-gradient(ellipse 150% 80% at 50% -10%,
            var(--color-aurora-purple-glow-1) 0%,
            var(--color-aurora-purple-glow-2) 45%,
            transparent 80%),
        linear-gradient(180deg,
            var(--color-aurora-bg-start) 0%,
            var(--color-aurora-bg-middle) 50%,
            var(--color-aurora-bg-end) 100%);
}

.destaque__estrelas {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 1px at 30% 12%, var(--color-white-translucent-60) 0%, transparent 100%),
        radial-gradient(1px 1px at 32% 8%, var(--color-white-translucent-40) 0%, transparent 100%),
        radial-gradient(1px 1px at 55% 18%, var(--color-white-translucent-50) 0%, transparent 100%),
        radial-gradient(1px 1px at 72% 5%, var(--color-white-translucent-30) 0%, transparent 100%),
        radial-gradient(1px 1px at 88% 14%, var(--color-white-translucent-60) 0%, transparent 100%),
        radial-gradient(1px 1px at 25% 25%, var(--color-white-translucent-20) 0%, transparent 100%),
        radial-gradient(1px 1px at 65% 9%, var(--color-white-translucent-40) 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 22%, var(--color-white-translucent-30) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 42% 3%, var(--color-white-translucent-70) 0%, transparent 100%),
        radial-gradient(1px 1px at 92% 30%, var(--color-white-translucent-20) 0%, transparent 100%);
}

.destaque__aurora-camada {
    position: absolute;
    width: 200%;
    height: 70%;
    top: -10%;
    left: -50%;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.75;
    mix-blend-mode: screen;
}

.destaque__aurora-camada--1 {
    background:
        radial-gradient(ellipse 70% 60% at 40% 50%, color-mix(in srgb, var(--color-brand-teal) 80%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 90% 80% at 90% 60%, color-mix(in srgb, var(--color-brand-primary) 70%, transparent) 0%, transparent 60%);
}

.destaque__aurora-camada--2 {
    background:
        radial-gradient(ellipse 70% 50% at 60% 60%, color-mix(in srgb, var(--color-brand-pink) 100%, transparent) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 30% 50%, color-mix(in srgb, var(--color-brand-teal) 80%, transparent) 0%, transparent 60%);
}

.destaque__aurora-camada--3 {
    background: radial-gradient(ellipse 90% 45% at 50% 45%, color-mix(in srgb, var(--color-brand-secondary) 10%, transparent) 0%, transparent 70%);
}

.destaque__aurora-faixas {
    position: absolute;
    width: 180%;
    height: 80%;
    top: -5%;
    left: -40%;
    opacity: 1;
}

.destaque__aurora-faixas::before,
.destaque__aurora-faixas::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.destaque__aurora-faixas::before {
    width: 60%;
    height: 100%;
    left: 10%;
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--color-brand-teal) 18%, transparent) 0%,
            color-mix(in srgb, var(--color-brand-primary) 30%, transparent) 50%,
            transparent 100%);
}

.destaque__aurora-faixas::after {
    width: 50%;
    height: 90%;
    left: 40%;
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--color-brand-pink) 15%, transparent) 0%,
            color-mix(in srgb, var(--color-brand-teal) 18%, transparent) 50%,
            transparent 100%);
}

@keyframes destaque-aurora-fade {
    to {
        opacity: 1;
    }
}

@keyframes destaque-aurora-drift-1 {

    0%,
    100% {
        opacity: .7;
        transform: translate(0, 0) scaleX(1);
    }

    33% {
        opacity: 1;
        transform: translate(4%, 2%) scaleX(1.06);
    }

    66% {
        opacity: .8;
        transform: translate(-3%, -1%) scaleX(.96);
    }
}

@keyframes destaque-aurora-drift-2 {

    0%,
    100% {
        opacity: .5;
        transform: translate(0, 0) scaleX(1);
    }

    40% {
        opacity: .9;
        transform: translate(-5%, 3%) scaleX(1.08);
    }

    70% {
        opacity: .6;
        transform: translate(4%, -2%) scaleX(.94);
    }
}

@keyframes destaque-aurora-drift-3 {

    0%,
    100% {
        opacity: .4;
        transform: translate(0, 0);
    }

    50% {
        opacity: .7;
        transform: translate(2%, 4%);
    }
}

@keyframes destaque-streak-sway {

    0%,
    100% {
        transform: rotate(-2deg) translateY(0);
    }

    50% {
        transform: rotate(2deg) translateY(-3%);
    }
}



/* ─── TEXTOS (COPY) ───────────────────────────────────────────── */

.destaque__conteudo {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-large) 0;
    max-width: 960px;
    margin: 0 auto;
}

.destaque__pre-titulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-white-translucent-7);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-small);
    padding: 5px var(--spacing-medium);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-teal-light);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: var(--spacing-medium) 0;
}

.destaque__pre-titulo::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-brand-teal-light);
    flex-shrink: 0;
}

.destaque__titulo {
    font-size: clamp(2rem, 6vw, var(--font-size-destaque));
    font-weight: var(--font-weight-black);
    color: var(--color-neutral-white);
    line-height: 1.12;
    letter-spacing: -1.5px;
    margin-bottom: var(--spacing-medium);
}

.destaque__titulo-destaque {
    color: var(--color-neutral-white)
}

.avaliacoes__title-accent,
.fluxo__title-accent {
    background: var(--gradient-aurora);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.destaque__subtitulo {
    font-size: var(--font-size-medium);
    line-height: 1.65;
    color: var(--color-neutral-white);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    max-width: 560px;
    margin: 0 auto var(--spacing-xl);
    font-weight: var(--font-weight-regular);
}

/* ─── DASHBOARD MOCKUP IMAGE ──────────────────────────── */
.destaque__dashboard {
    position: relative;
    z-index: 5;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto var(--spacing-xlarge) auto;
    padding: 0 var(--spacing-medium);
}

.destaque__dashboard-mockup {
    max-width: 1140px;
    width: 100%;
    display: grid;
    margin: 0 auto;
}

.destaque__dashboard-imagem {
    grid-area: 1 / 1;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    display: block;
    border-radius: var(--border-radius-medium);
    box-shadow:
        0 0 0 1px var(--color-border-light),
        0 40px 100px var(--color-black-translucent-60),
        var(--shadow-soft);
    animation: destaque-card-float 6s ease-in-out infinite;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.destaque__dashboard-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: inherit;
    display: block;
}

.destaque__dashboard-imagem.ativo {
    opacity: 1;
    z-index: 2;
}

/* ─── ANIMAÇÃO DO CARD DE DESTAQUE ────────────────────── */
@keyframes destaque-card-float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}

/* ─── TRANSIÇÃO DE NUVENS ─────────────────────────────────────── */

.destaque__transicao-nuvens {
    position: absolute;
    bottom: -2px;
    left: 0;
    z-index: 6;
    width: 100%;
    height: 140px;
    pointer-events: none;
    overflow: hidden;
}

.destaque__transicao-nuvens svg {
    width: 100%;
    height: 100%;
    display: block;
}

.destaque__nuvenzinha {
    display: none;
}

.destaque__nuvenzinha--1 {
    width: 180px;
    height: 90px;
    left: 5%;
    animation-delay: 0s;
    animation-duration: 12s;
}

.destaque__nuvenzinha--2 {
    width: 250px;
    height: 110px;
    left: 20%;
    animation-delay: 2s;
    animation-duration: 14s;
}

.destaque__nuvenzinha--3 {
    width: 200px;
    height: 80px;
    left: 42%;
    animation-delay: 4s;
    animation-duration: 11s;
}

.destaque__nuvenzinha--4 {
    width: 280px;
    height: 120px;
    left: 58%;
    animation-delay: 1s;
    animation-duration: 15s;
}

.destaque__nuvenzinha--5 {
    width: 160px;
    height: 70px;
    left: 78%;
    animation-delay: 3s;
    animation-duration: 13s;
}

@keyframes destaque-puff-rise {
    0% {
        opacity: 0;
        transform: translateY(0) scale(.95);
    }

    15% {
        opacity: .7;
    }

    50% {
        opacity: .9;
        transform: translateY(-20px) scale(1.03);
    }

    85% {
        opacity: .5;
    }

    100% {
        opacity: 0;
        transform: translateY(-40px) scale(1.06);
    }
}

/* ─── PARCEIROS / CARROSSEL ───────────────────────────────────── */

.parceiros {
    position: relative;
    z-index: 5;
    background: var(--color-neutral-white);
    width: 100%;
    padding: var(--spacing-large) 0 var(--spacing-xl);
    overflow: hidden;
}

.parceiros__rotulo {
    text-align: center;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    color: color-mix(in srgb, var(--color-neutral-black) 78%, transparent);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-medium);
    font-family: var(--font-primary);
}

.parceiros__carrossel-moldura {
    overflow: hidden;
    position: relative;
}

.parceiros__carrossel-moldura::before,
.parceiros__carrossel-moldura::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.parceiros__carrossel-moldura::before {
    left: 0;
    background: linear-gradient(to right, var(--color-neutral-white), transparent);
}

.parceiros__carrossel-moldura::after {
    right: 0;
    background: linear-gradient(to left, var(--color-neutral-white), transparent);
}

.parceiros__carrossel-esteira {
    display: flex;
    align-items: center;
    width: max-content;
    animation: parceiros-scroll-left 24s linear infinite;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.parceiros__carrossel-moldura:hover .parceiros__carrossel-esteira,
.parceiros__carrossel-esteira:focus-within {
    animation-play-state: paused;
}

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

@keyframes parceiros-scroll-left {
    0% {
        transform: translateX(0);
    }

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

.parceiros__logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-xl);
    flex-shrink: 0;
    opacity: .5;
    transition: opacity var(--transition-default);
}

.parceiros__logo-item:hover {
    opacity: 1;
}

.parceiros__logo-texto {
    font-family: var(--font-primary);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-black);
    letter-spacing: -0.5px;
}

/* Cores individuais dos logotipos (Empresas Brasileiras) */
.parceiros__logo-texto--nubank {
    color: var(--color-brand-nubank);
    font-weight: var(--font-weight-black);
}

.parceiros__logo-texto--ifood {
    color: var(--color-brand-ifood);
    font-style: italic;
    font-weight: var(--font-weight-black);
}

.parceiros__logo-texto--totvs {
    color: var(--color-brand-totvs);
    letter-spacing: 2px;
    font-weight: var(--font-weight-black);
}

.parceiros__logo-texto--itau {
    color: var(--color-brand-itau);
    font-weight: var(--font-weight-black);
}

.parceiros__logo-texto--magalu {
    color: var(--color-brand-magalu);
    font-weight: var(--font-weight-black);
}

.parceiros__logo-texto--stone {
    color: var(--color-brand-stone);
    font-weight: var(--font-weight-black);
}

.parceiros__logo-texto--quintoandar {
    color: var(--color-brand-quintoandar);
    font-weight: var(--font-weight-black);
}

.parceiros__logo-texto--fiap {
    color: var(--color-brand-fiap);
    letter-spacing: 1.5px;
    font-weight: var(--font-weight-black);
}

.parceiros__logo-texto--ambev {
    color: var(--color-brand-ambev);
    letter-spacing: 2px;
    font-weight: var(--font-weight-black);
}

.parceiros__logo-texto--natura {
    color: var(--color-brand-natura);
    font-weight: var(--font-weight-black);
}

/* ─── RESPONSIVIDADE ─────────────────────────────────────────── */

@media (max-width: 768px) {
    .destaque__painel-corpo {
        grid-template-columns: 1fr;
    }

    .destaque__painel-barra-lateral {
        display: none;
    }

    .destaque__painel-linha {
        grid-template-columns: 1fr;
    }


}

@media (max-width: 480px) {
    .destaque__indicadores-linha {
        grid-template-columns: repeat(2, 1fr);
    }

    .destaque__indicadores-linha .destaque__indicador:last-child {
        grid-column: 1 / -1;
    }
}

/* ─── ACESSIBILIDADE ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .destaque__aurora-camada,
    .destaque__aurora-faixas,
    .destaque__painel-cartao,
    .destaque__nuvenzinha,
    .parceiros__carrossel-esteira {
        animation: none !important;
    }

    .destaque__aurora-camada {
        opacity: .6;
    }

    .parceiros__carrossel-esteira {
        overflow-x: auto;
    }
}

/* ======================================== Seção Dores do cliente e Solução - 2 ======================================== */
.servicos {
    padding: var(--spacing-xlarge) 0;
}

.servicos__cabecalho {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.servicos__titulo {
    font-size: var(--font-size-large);
    color: var(--color-neutral-black);
    font-weight: var(--font-weight-bold);
    margin-bottom: 12px;
}

.servicos__descricao {
    color: color-mix(in srgb, var(--color-neutral-black) 78%, transparent);
    font-size: var(--font-size-base);
}

.servicos__conteudo {
    background-color: color-mix(in srgb, var(--color-brand-primary) 8%, var(--color-neutral-white));
    border: 1px solid color-mix(in srgb, var(--color-brand-primary) 8%, var(--color-neutral-white));
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.servicos__grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    /* Creates inner borders between cards */
    background-color: color-mix(in srgb, var(--color-brand-primary) 8%, var(--color-neutral-white));
}

/* Bloco: cartao-servico */
.cartao-servico {
    background-color: var(--color-neutral-white);
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: background-color var(--transition-default);
}

.cartao-servico:hover {
    background-color: color-mix(in srgb, var(--color-brand-primary) 3%, var(--color-neutral-white));
}

.cartao-servico__icone {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-medium);
}

.cartao-servico__icone i {
    font-size: var(--font-size-medium);
}

.cartao-servico__icone svg {
    width: 24px;
    height: 24px;
}

.cartao-servico__icone--primario {
    background-color: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-neutral-white));
    color: var(--color-brand-primary);
}

.cartao-servico__icone--rosa {
    background-color: color-mix(in srgb, var(--color-brand-pink) 10%, var(--color-neutral-white));
    color: var(--color-brand-pink);
}

.cartao-servico__icone--verde {
    background-color: color-mix(in srgb, var(--color-brand-teal) 10%, var(--color-neutral-white));
    color: var(--color-brand-teal);
}

.cartao-servico__titulo {
    font-size: var(--font-size-medium);
    color: var(--color-neutral-black);
    font-weight: var(--font-weight-bold);
    margin-bottom: 12px;
}

.cartao-servico__descricao {
    font-size: var(--font-size-small);
    color: color-mix(in srgb, var(--color-neutral-black) 60%, transparent);
    line-height: 1.6;
}

/* Responsividade dos Serviços */
@media (max-width: 992px) {
    .servicos__grade {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .servicos__grade {
        grid-template-columns: 1fr;
    }

    .cartao-servico {
        padding: 32px 24px;
    }

    .servicos__titulo {
        font-size: var(--font-size-large);
    }
}

/* ======================================== SEÇÃO AVALIAÇÃO DOS CLIENTES - 4 ======================================== */
.avaliacoes {
    padding: var(--spacing-xlarge) 0;
    background-color: var(--color-neutral-white);
}

.avaliacoes h2 {
    text-align: center;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-large);
}

.avaliacoes__grade-videos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-large);
}

.avaliacoes__grade-videos>div {
    position: relative;
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    aspect-ratio: 9 / 16;
    background-color: var(--color-neutral-black);
}

.avaliacoes__grade-videos>div.is-reproduzindo .avaliacoes__sobreposicao {
    opacity: 0;
    pointer-events: none;
}

.avaliacoes__grade-videos video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avaliacoes__grade-videos video::cue {
    background-color: rgba(10, 15, 30, 0.85);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 4px 8px;
    border-radius: 4px;
}

.avaliacoes__sobreposicao {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--spacing-medium);
    background: linear-gradient(to bottom, var(--color-black-translucent-80) 0%, transparent 50%);
    color: var(--color-neutral-white);
    transition: opacity var(--transition-default);
    cursor: pointer;
}

.avaliacoes__titulo-video {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-small);
}

.avaliacoes__link-linkedin {
    position: absolute;
    left: 50%;
    bottom: var(--spacing-medium);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.14);
    color: var(--color-neutral-white);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transform: translateX(-50%);
    white-space: nowrap;
    transition: background-color var(--transition-default), transform var(--transition-default);
}

.avaliacoes__link-linkedin:hover,
.avaliacoes__link-linkedin:focus-visible {
    background-color: var(--color-brand-teal);
    color: var(--color-neutral-white);
    transform: translate(-50%, -2px);
}

.avaliacoes__link-linkedin i {
    font-size: 0.9rem;
}

.avaliacoes__botao-reproduzir {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform var(--transition-bounce);
}

.avaliacoes__botao-reproduzir i {
    font-size: var(--font-size-destaque);
    color: var(--color-neutral-white);
    opacity: 0.8;
}

.avaliacoes__botao-reproduzir:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.avaliacoes__botao-reproduzir svg {
    width: 64px;
    height: 64px;
}

/* Responsividade da Avaliação dos Clientes */
@media (max-width: 992px) {
    .avaliacoes__grade-videos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .avaliacoes__grade-videos {
        grid-template-columns: 1fr;
    }
}

/* ======================================== SEÇÃO ROI - 5 ======================================== */
.estatisticas {
    padding: var(--spacing-xlarge) 0;
    background-color: var(--color-neutral-white);
}

.estatisticas__recipiente {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    min-height: 420px;
}

.estatisticas__cabecalho {
    flex: 1;
    max-width: 390px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 0;
}

.estatisticas__logo {
    margin-bottom: 18px;
    max-width: 128px;
    height: auto;
}

.estatisticas__descricao {
    color: rgba(17, 24, 39, 0.7);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 360px;
    margin: 0;
}

.estatisticas__grade {
    flex: 1;
    display: flex;
    gap: 28px;
    justify-content: center;
}

.estatisticas__coluna {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.estatisticas__coluna--esquerda {
    margin-top: 58px;
}

.cartao-estatistica {
    padding: 32px 24px;
    border-radius: var(--border-radius-small);
    min-height: 182px;
    box-shadow: 0 4px 15px var(--color-black-translucent-5);
}

.cartao-estatistica__numero {
    display: block;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-black);
    color: var(--color-brand-primary);
    margin-bottom: 12px;
}

.cartao-estatistica__descricao {
    font-size: 0.95rem;
    color: rgba(10, 17, 22, 0.78);
    line-height: 1.5;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.01em;
}

.cartao-estatistica--primario {
    background-color: color-mix(in srgb, var(--color-brand-primary) 15%, var(--color-neutral-white));
}

.cartao-estatistica--secundario {
    background-color: color-mix(in srgb, var(--color-brand-secondary) 15%, var(--color-neutral-white));
}

.cartao-estatistica--verde {
    background-color: color-mix(in srgb, var(--color-brand-teal) 15%, var(--color-neutral-white));
}

.cartao-estatistica--rosa {
    background-color: color-mix(in srgb, var(--color-brand-pink) 15%, var(--color-neutral-white));
}

/* Responsividade das Estatísticas */
@media (max-width: 992px) {
    .estatisticas__recipiente {
        flex-direction: column;
        align-items: flex-start;
    }

    .estatisticas__cabecalho {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .estatisticas__grade {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .estatisticas__grade {
        flex-direction: column;
    }

    .estatisticas__coluna--esquerda {
        margin-top: 0;
    }

    .cartao-estatistica {
        width: 100%;
    }
}

/* ======================================== FAQ - 8 ======================================== */
.perguntas-frequentes {

    padding: var(--spacing-xlarge) 0;
    background-color: color-mix(in srgb, var(--color-brand-primary) 2%, var(--color-neutral-white));
}

.perguntas-frequentes__titulo {
    text-align: center;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-black);
    color: var(--color-neutral-black);
    margin-bottom: var(--spacing-large);
}

.perguntas-frequentes__lista {
    width: 100%;
}

.perguntas-frequentes__item {
    border-bottom: 1px solid color-mix(in srgb, var(--color-brand-primary) 15%, var(--color-neutral-white));
    padding: var(--spacing-medium) 0;
}

.perguntas-frequentes__item:last-child {
    border-bottom: none;
}

.perguntas-frequentes__resumo {
    display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
}

.perguntas-frequentes__resumo::-webkit-details-marker {
    display: none;
}

.perguntas-frequentes__icone {
    width: 48px;
    height: 48px;
    background-color: color-mix(in srgb, var(--color-brand-pink) 15%, var(--color-neutral-white));
    color: var(--color-brand-pink);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--spacing-medium);
    flex-shrink: 0;
}

.perguntas-frequentes__icone i {
    font-size: var(--font-size-medium);
}

.perguntas-frequentes__icone svg {
    width: 24px;
    height: 24px;
}

.perguntas-frequentes__pergunta {
    flex: 1;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-black);
    margin: 0;
}

.perguntas-frequentes__seta {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand-primary);
    transition: transform var(--transition-default);
}

.perguntas-frequentes__seta i {
    font-size: var(--font-size-medium);
}

details[open] .perguntas-frequentes__seta {
    transform: rotate(180deg);
}

.perguntas-frequentes__conteudo {
    padding: var(--spacing-small) 0 var(--spacing-small) 64px;
}

.perguntas-frequentes__texto {
    color: color-mix(in srgb, var(--color-neutral-black) 78%, transparent);
    font-size: var(--font-size-base);
    line-height: 1.6;
}

@media (max-width: 576px) {
    .perguntas-frequentes__conteudo {
        padding-left: 0;
        margin-top: 12px;
    }
}

/* ======================================== CAPTAÇÃO DE LEADS — CONTATO ======================================== */
.captacao {
    position: relative;
    padding: var(--spacing-xxlarge) 0;
    overflow: hidden;
    background: radial-gradient(ellipse 120% 60% at 50% 0%,
            color-mix(in srgb, var(--color-brand-primary) 30%, var(--color-surface-dark)) 0%,
            var(--color-surface-dark) 70%);
}

/* Camadas do fundo Aurora */
.captacao__aurora-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.captacao__aurora-layer {
    position: absolute;
    width: 200%;
    height: 70%;
    top: -10%;
    left: -50%;
    border-radius: 50%;
    filter: blur(80px);
    mix-blend-mode: screen;
}

.captacao__aurora-layer--1 {
    background:
        radial-gradient(ellipse 60% 40% at 30% 50%, color-mix(in srgb, var(--color-brand-teal) 50%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 80% 60% at 70% 40%, color-mix(in srgb, var(--color-brand-primary) 30%, transparent) 0%, transparent 60%);
    opacity: .5;
    animation: captacao-aurora-1 14s ease-in-out infinite;
}

.captacao__aurora-layer--2 {
    background:
        radial-gradient(ellipse 70% 50% at 60% 60%, color-mix(in srgb, var(--color-brand-pink) 40%, transparent) 0%, transparent 65%);
    opacity: .4;
    animation: captacao-aurora-2 18s ease-in-out infinite;
}

@keyframes captacao-aurora-1 {

    0%,
    100% {
        opacity: .5;
        transform: translate(0, 0) scaleX(1);
    }

    50% {
        opacity: .7;
        transform: translate(3%, 2%) scaleX(1.04);
    }
}

@keyframes captacao-aurora-2 {

    0%,
    100% {
        opacity: .4;
        transform: translate(0, 0) scaleX(1);
    }

    50% {
        opacity: .6;
        transform: translate(-4%, 3%) scaleX(1.06);
    }
}

/* Layout do recipiente */
.captacao__recipiente {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Coluna de informações */
.captacao__info {
    display: flex;
    flex-direction: column;
}


.captacao__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-white-translucent-7);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-small);
    padding: 5px var(--spacing-medium);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-teal);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: var(--spacing-medium) 0;
    width: fit-content;
}

.captacao__eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-brand-teal);
    flex-shrink: 0;
}

.captacao__titulo {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: var(--font-weight-black);
    color: var(--color-neutral-white);
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: var(--spacing-medium);
}

.captacao__titulo-destaque {
    background: var(--gradient-aurora);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.captacao__descricao {
    font-size: var(--font-size-base);
    line-height: 1.65;
    color: color-mix(in srgb, var(--color-neutral-white) 65%, transparent);
    margin-bottom: var(--spacing-large);
    max-width: 460px;
}

/* Lista de benefícios (Padronizado com o checklist de problemas) */
.captacao__beneficios {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-large) 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.captacao__beneficios li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.captacao__beneficio-icone {
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-brand-teal);
    background-color: var(--color-brand-teal);
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    transition: var(--transition-smooth);
}

.captacao__beneficio-icone::after {
    content: '✓';
    color: var(--color-neutral-white);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.captacao__beneficios li p {
    color: var(--color-neutral-white);
    font-size: var(--font-size-base);
    line-height: 1.4;
    margin: 0;
}

/* Prova social */
.captacao__prova-social {
    display: flex;
    align-items: center;
    padding-top: var(--spacing-medium);
    border-top: 1px solid var(--color-white-translucent-8);
}

.captacao__prova-texto {
    font-size: var(--font-size-small);
    color: color-mix(in srgb, var(--color-neutral-white) 75%, transparent);
    line-height: 1.4;
    margin: 0;
}

.captacao__prova-texto strong {
    color: var(--color-brand-teal);
    font-weight: var(--font-weight-bold);
}

/* Cartão do formulário */
.captacao__formulario-wrap {
    display: flex;
    justify-content: flex-end;
}

.captacao__formulario {
    background: var(--color-white-translucent-6);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-medium);
    padding: 32px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    width: 100%;
    max-width: 620px;
    box-shadow:
        0 0 0 1px var(--color-white-translucent-5),
        0 25px 80px var(--color-black-translucent-40);
}

.captacao__formulario-titulo {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-white);
    margin-bottom: 6px;
}

.captacao__formulario-subtitulo {
    font-size: var(--font-size-small);
    color: color-mix(in srgb, var(--color-neutral-white) 65%, transparent);
    margin-bottom: var(--spacing-large);
    line-height: 1.5;
}

/* Campos do formulário */
.captacao__campo {
    margin-bottom: var(--spacing-medium);
}

.captacao__campo-duplo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-medium);
}

.captacao__label {
    display: block;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: color-mix(in srgb, var(--color-neutral-white) 75%, transparent);
    margin-bottom: 6px;
}

.captacao__input {
    width: 100%;
    padding: 13px 16px;
    background: var(--color-white-translucent-7);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-small);
    color: var(--color-neutral-white);
    font-size: var(--font-size-base);
    font-family: var(--font-primary);
    transition: border-color var(--transition-default), background-color var(--transition-default), box-shadow var(--transition-default);
    /* 🔴4 A2 — Não remover outline no elemento base; controlar apenas via :focus-visible */
}

.captacao__input::placeholder {
    color: color-mix(in srgb, var(--color-neutral-white) 72%, transparent);
}

.captacao__input:hover {
    border-color: var(--color-white-translucent-22);
    background: var(--color-border-light);
}

.captacao__input:focus {
    outline: none; /* Apenas para cliques com mouse */
    border-color: var(--color-brand-teal);
    background: var(--color-border-light);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-teal) 20%, transparent);
}

.captacao__input:focus-visible {
    /* 🔴4 A2 — Indicador de foco explícito e visível para navegação por teclado (WCAG 2.4.11 AA) */
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
    border-color: var(--color-brand-teal);
    background: var(--color-border-light);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-teal) 20%, transparent);
}

/* Seletor (Select) */
.captacao__select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' fill-opacity='0.5' d='M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
}

.captacao__select option {
    background: var(--color-surface-dark-elevated);
    color: var(--color-neutral-white);
}

.captacao__seletor {
    border: 0;
    padding: 0;
    margin: var(--spacing-large) 0 0;
}

.captacao__seletor-titulo {
    color: var(--color-neutral-white);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-medium);
}

.captacao__opcoes-data,
.captacao__horarios {
    display: grid;
    gap: var(--spacing-small);
}

.captacao__opcoes-data {
    grid-template-columns: repeat(6, 1fr);
}

.captacao__opcao,
.captacao__horario {
    cursor: pointer;
}

.captacao__opcao-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.captacao__opcao-conteudo,
.captacao__horario span {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-small);
    background: var(--color-white-translucent-7);
    color: var(--color-neutral-white);
    transition: background var(--transition-default), border-color var(--transition-default), transform var(--transition-default);
}

.captacao__opcao-conteudo {
    min-height: 78px;
    flex-direction: column;
    gap: 5px;
}

.captacao__opcao-conteudo small,
.captacao__periodo {
    color: color-mix(in srgb, var(--color-neutral-white) 65%, transparent);
    font-size: var(--font-size-small);
}

.captacao__opcao-conteudo strong {
    font-size: var(--font-size-medium);
}

.captacao__opcao-input:checked + .captacao__opcao-conteudo,
.captacao__horario .captacao__opcao-input:checked + span {
    border-color: transparent;
    background: var(--gradient-aurora);
    color: var(--color-neutral-white);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-brand-pink) 25%, transparent);
}

.captacao__opcao:focus-within .captacao__opcao-conteudo,
.captacao__horario:focus-within span {
    outline: 3px solid color-mix(in srgb, var(--color-brand-teal) 55%, transparent);
    outline-offset: 2px;
}

.captacao__horarios {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-medium);
}

.captacao__grupo-horarios {
    display: grid;
    gap: var(--spacing-small);
}

.captacao__periodo {
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.04em;
}

.captacao__horario span {
    min-height: 44px;
}

.captacao__horario--indisponivel {
    cursor: not-allowed;
    opacity: 0.3;
}

/* Erros de Validação do Form */
.captacao__erro {
    color: var(--color-feedback-error);
    font-size: var(--font-size-small);
    margin-top: 6px;
    font-weight: var(--font-weight-medium);
    display: block;
}

.captacao__input.is-invalido {
    border-color: var(--color-feedback-error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-feedback-error) 20%, transparent);
}

/* Stepper do Formulário Multi-etapas */
.captacao__stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin: var(--spacing-medium) 0 var(--spacing-large);
    padding: 12px 16px;
    background: var(--color-white-translucent-5);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-small);
}

.captacao__step {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    cursor: default;
    transition: opacity var(--transition-default);
}

.captacao__step-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    background: var(--color-white-translucent-8);
    border: 1px solid var(--color-border-light);
    color: color-mix(in srgb, var(--color-neutral-white) 60%, transparent);
    transition: all var(--transition-default);
    position: relative;
}

.captacao__step-check {
    display: none;
    font-size: 0.8rem;
}

.captacao__step-rotulo {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: color-mix(in srgb, var(--color-neutral-white) 60%, transparent);
    transition: color var(--transition-default);
}

/* Estado Ativo do Step */
.captacao__step.is-active .captacao__step-badge {
    background: var(--gradient-aurora);
    border-color: transparent;
    color: var(--color-neutral-white);
    box-shadow: 0 0 16px color-mix(in srgb, var(--color-brand-teal) 45%, transparent);
    transform: scale(1.05);
}

.captacao__step.is-active .captacao__step-rotulo {
    color: var(--color-neutral-white);
    font-weight: var(--font-weight-bold);
}

/* Estado Concluído do Step */
.captacao__step.is-completed .captacao__step-badge {
    background: var(--color-feedback-success);
    border-color: transparent;
    color: var(--color-neutral-white);
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-feedback-success) 40%, transparent);
}

.captacao__step.is-completed .captacao__step-num {
    display: none;
}

.captacao__step.is-completed .captacao__step-check {
    display: inline-block;
}

.captacao__step.is-completed .captacao__step-rotulo {
    color: color-mix(in srgb, var(--color-neutral-white) 90%, transparent);
}

/* Linha conectora de progresso */
.captacao__step-linha {
    flex: 1;
    height: 3px;
    background: var(--color-white-translucent-8);
    margin: 0 14px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.captacao__step-progresso {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--gradient-aurora);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-brand-pink) 60%, transparent);
}

/* Alternância e animação de Etapas */
.captacao__etapa {
    display: none;
}

.captacao__etapa.is-ativa {
    display: block;
    animation: captacaoFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes captacaoFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Resumo do Lead na Etapa 2 */
.captacao__resumo-lead {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--color-brand-primary) 20%, var(--color-white-translucent-6));
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 35%, transparent);
    border-radius: var(--border-radius-small);
    margin-bottom: var(--spacing-medium);
}

.captacao__resumo-icone {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gradient-aurora);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-neutral-white);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.captacao__resumo-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.captacao__resumo-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-brand-teal-light);
    font-weight: var(--font-weight-medium);
}

.captacao__resumo-destaque {
    font-size: var(--font-size-small);
    color: var(--color-neutral-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botão Próxima Etapa */
.captacao__botao-proximo {
    width: 100%;
    margin-top: var(--spacing-medium);
}

/* Grupo de Ações da Etapa 2 (Voltar + Enviar) */
.captacao__acoes-etapa {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-small);
    align-items: center;
    margin-top: var(--spacing-large);
}

.captacao__botao-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    background: var(--color-white-translucent-7);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-small);
    color: var(--color-neutral-white);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-primary);
    cursor: pointer;
    transition: background var(--transition-default), border-color var(--transition-default), transform var(--transition-default);
}

.captacao__botao-voltar:hover {
    background: var(--color-white-translucent-15);
    border-color: var(--color-white-translucent-22);
    transform: translateX(-2px);
}

.captacao__botao-voltar:focus-visible {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

/* Layout do botão de enviar */
.captacao__botao-enviar {
    width: 100%;
    margin-top: 0;
}

/* Termos */
.captacao__termos {
    text-align: center;
    font-size: var(--font-size-small);
    color: color-mix(in srgb, var(--color-neutral-white) 55%, transparent);
    margin-top: var(--spacing-medium);
    line-height: 1.5;
}

.captacao__termos-link {
    color: color-mix(in srgb, var(--color-neutral-white) 70%, transparent);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-default);
}

.captacao__termos-link:hover {
    color: var(--color-brand-teal);
}

/* Responsividade da captação */
@media (max-width: 992px) {
    .captacao__recipiente {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .captacao__info {
        text-align: center;
        align-items: center;
    }

    .captacao__descricao {
        max-width: 100%;
    }

    .captacao__prova-social {
        justify-content: center;
    }

    .captacao__formulario-wrap {
        justify-content: center;
    }

    .captacao__formulario {
        max-width: 520px;
    }
}

@media (max-width: 576px) {
    .captacao {
        padding: var(--spacing-xlarge) 0;
    }

    .captacao__formulario {
        padding: 28px 20px;
    }

    .captacao__stepper {
        padding: 10px 12px;
    }

    .captacao__step-rotulo {
        font-size: 0.8rem;
    }

    .captacao__campo-duplo {
        grid-template-columns: 1fr;
    }

    .captacao__opcoes-data {
        grid-template-columns: repeat(3, 1fr);
    }

    .captacao__horarios {
        grid-template-columns: 1fr;
    }

    .captacao__acoes-etapa {
        grid-template-columns: 1fr;
    }

    .captacao__botao-voltar {
        order: 2;
        width: 100%;
    }

    .captacao__acoes-etapa .captacao__botao-enviar {
        order: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .captacao__aurora-layer {
        animation: none !important;
        opacity: .5;
    }
}

/* ======================================== NEWSLETTER ======================================== */
.newsletter {
    padding: var(--spacing-xlarge) 0;
    background-color: var(--color-neutral-white);
}

.newsletter__recipiente {
    max-width: 760px;
    padding: var(--spacing-large) var(--spacing-xl);
    border-radius: var(--border-radius-medium);
    background-color: color-mix(in srgb, var(--color-brand-pink) 9%, var(--color-neutral-white));
    border: 1px solid color-mix(in srgb, var(--color-brand-pink) 20%, var(--color-neutral-white));
    text-align: center;
    box-shadow: var(--shadow-soft);
}

.newsletter__titulo {
    color: var(--color-neutral-black);
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-primary);
    margin-bottom: var(--spacing-small);
}

.newsletter__descricao {
    max-width: 620px;
    margin: 0 auto var(--spacing-medium);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    font-family: var(--font-primary);
    line-height: 1.6;
}

.newsletter__formulario {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.newsletter__campo {
    width: min(100%, 360px);
    min-height: 48px;
    padding: 0 var(--spacing-medium);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius-small);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    background-color: var(--color-neutral-white);
    color: var(--color-neutral-black);
    /* 🔴4 A2 — Não remover outline no base; tratar via :focus e :focus-visible */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.newsletter__campo::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.95;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
}

.newsletter__erro {
    color: var(--color-feedback-error);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    margin-top: 6px;
    width: 100%;
}

.newsletter__campo:focus {
    outline: none; /* Apenas para cliques com mouse */
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px var(--color-aurora-purple-glow-2);
}

.newsletter__campo:focus-visible {
    /* 🔴4 A2 — Indicador de foco explícito para navegação por teclado (WCAG 2.4.11 AA) */
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px var(--color-aurora-purple-glow-2);
}

.newsletter__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    border: 0;
    border-radius: var(--border-radius-small);
    background: var(--gradient-aurora);
    color: var(--color-neutral-white);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--color-brand-primary) 30%, transparent);
    transition: transform 0.2s ease, box-shadow var(--transition-default), opacity var(--transition-default);
}

.newsletter__botao:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px color-mix(in srgb, var(--color-brand-primary) 45%, transparent);
    opacity: 0.95;
}

.newsletter__botao:active {
    transform: translateY(0);
}

.newsletter__botao:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-brand-teal) 55%, transparent);
    outline-offset: 2px;
}

.newsletter__privacidade {
    font-size: var(--font-size-small);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    margin: var(--spacing-small) auto 0;
    line-height: 1.5;
}

.newsletter__link-privacidade {
    color: var(--color-brand-primary);
    text-decoration: underline;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-default);
}

.newsletter__link-privacidade:hover,
.newsletter__link-privacidade:focus-visible {
    color: var(--color-brand-pink);
}

.newsletter__mensagem {
    min-height: 1.4em;
    margin-top: var(--spacing-small);
    color: var(--color-feedback-success);
    font-size: var(--font-size-small);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);
}

/* ======================================== FOOTER - 8 ======================================== */
.rodape {
    background: radial-gradient(ellipse 120% 60% at 50% 0%,
            color-mix(in srgb, var(--color-brand-primary) 100%, var(--color-surface-dark)) 0%,
            var(--color-surface-dark) 100%);
    color: var(--color-neutral-white);
    padding: var(--spacing-xlarge) 0 var(--spacing-large);
}

.rodape__topo {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xlarge);
}

.rodape__marca {
    max-width: 280px;
    flex-shrink: 0;
}

.rodape__logo {
    filter: brightness(0) invert(1);
    margin-bottom: var(--spacing-medium);
}

.rodape__legal {
    font-size: var(--font-size-small);
    color: color-mix(in srgb, var(--color-neutral-white) 70%, transparent);
    line-height: 1.6;
}

.rodape__navegacao {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
}

.rodape__titulo-navegacao {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-medium);
    color: var(--color-neutral-white);
}

.rodape__lista-navegacao {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rodape__item-navegacao {
    margin-bottom: 12px;
}

.rodape__link-navegacao {
    color: color-mix(in srgb, var(--color-neutral-white) 70%, transparent);
    text-decoration: none;
    font-size: var(--font-size-small);
    transition: color var(--transition-default);
    display: inline-block;
}

.rodape__link-navegacao:hover,
.rodape__link-navegacao:focus-visible {
    color: var(--color-neutral-white);
    transform: translateX(2px);
}

.rodape__fundo {
    border-top: 1px solid color-mix(in srgb, var(--color-neutral-white) 10%, transparent);
    padding-top: var(--spacing-large);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.rodape__contato {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.rodape__rotulo-contato {
    display: block;
    font-size: var(--font-size-small);
    color: color-mix(in srgb, var(--color-neutral-white) 70%, transparent);
    margin-bottom: 4px;
}

.rodape__valor-contato {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.rodape__redes-sociais {
    display: flex;
    gap: 16px;
}

.rodape__link-social {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-neutral-white) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-neutral-white);
    text-decoration: none;
    transition: background var(--transition-default), transform 0.15s ease, opacity var(--transition-default);
}

.rodape__link-social:hover,
.rodape__link-social:focus-visible {
    background: var(--gradient-aurora);
    opacity: .9;
    transform: translateY(-2px);
}

.rodape__icone-social {
    font-size: var(--font-size-base);
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .newsletter__formulario {
        flex-direction: column;
        align-items: stretch;
    }

    .newsletter__campo {
        width: 100%;
    }

    .rodape__topo {
        flex-direction: column;
        gap: 36px;
    }

    .rodape__navegacao {
        gap: 40px;
    }

    .rodape__fundo {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .newsletter__recipiente {
        padding: var(--spacing-large) var(--spacing-medium);
    }

    .rodape__navegacao {
        flex-direction: column;
        gap: 28px;
    }

    .rodape__contato {
        flex-direction: column;
        gap: 16px;
    }
}

/* ======================================== VOLTAR AO TOPO ======================================== */
.botao-topo {
    cursor: pointer;
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-aurora);
    color: var(--color-neutral-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-bounce);
    box-shadow: var(--shadow-medium);
    z-index: 100;
}

.botao-topo i {
    font-size: var(--font-size-medium);
}

.botao-topo.is-visivel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.botao-topo.is-visivel:hover,
.botao-topo.is-visivel:focus-visible {
    opacity: .9;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px color-mix(in srgb, var(--color-brand-teal) 30%, transparent);
}

@media (max-width: 768px) {
    .botao-topo {
        bottom: var(--spacing-medium);
        right: var(--spacing-medium);
    }
}



/* SEÇÃO 1: FUNCIONALIDADES */
.funcionalidades {
    background: radial-gradient(ellipse 120% 60% at 50% 0%,
            color-mix(in srgb, var(--color-brand-primary) 100%, var(--color-surface-dark)) 0%,
            var(--color-surface-dark) 150%);
    color: var(--color-neutral-white);
    padding: var(--spacing-xlarge) 0;
}

/* Linha superior: Benefícios + Card */
.funcionalidades__linha-superior {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: start;
    padding-bottom: var(--spacing-large);
}

.funcionalidades__beneficios {
    display: flex;
    flex-direction: column;
}

.funcionalidades__titulo-beneficios {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    color: var(--color-neutral-white);
    margin-bottom: 24px;
}

.funcionalidades__subtitulo-beneficios {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-teal);
    margin-bottom: 24px;
}

.funcionalidades__lista-beneficios {
    list-style: none;
    margin-bottom: 30px;
}

.funcionalidades__lista-beneficios li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: var(--font-size-base);
    color: var(--color-neutral-white);
    line-height: 1.4;
}

.funcionalidades__seta-marcador {
    color: var(--color-brand-teal);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

.funcionalidades__descricao-beneficios {
    font-size: var(--font-size-small);
    color: color-mix(in srgb, var(--color-neutral-white) 80%, transparent);
    margin-bottom: 16px;
}

/* Card de Depoimento */
.funcionalidades__coluna-depoimento {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.funcionalidades__texto-depoimento {
    font-size: var(--font-size-small);
    color: color-mix(in srgb, var(--color-neutral-white) 85%, transparent);
    font-weight: var(--font-weight-medium);
}

.cartao-depoimento {
    background-color: var(--color-neutral-white);
    color: var(--color-neutral-black);
    padding: 32px;
    border-radius: 20px;
    box-shadow: 0 15px 40px var(--color-black-translucent-15);
    position: relative;
}

.cartao-depoimento__slides {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.cartao-depoimento__slide {
    display: none;
}

.cartao-depoimento__slide.is-ativo {
    display: block;
    animation: depoimento-entrada var(--transition-default);
}

@keyframes depoimento-entrada {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cartao-depoimento__cabecalho {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.cartao-depoimento__cabecalho .cartao-depoimento__foto {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.cartao-depoimento__informacoes {
    flex-grow: 1;
}

.cartao-depoimento__nome {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-primary);
}

.cartao-depoimento__cargo {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}

.cartao-depoimento__corpo {
    font-size: var(--font-size-small);
    line-height: 1.6;
    color: color-mix(in srgb, var(--color-brand-primary) 80%, var(--color-neutral-black));
    margin-bottom: 24px;
}

.cartao-depoimento__controles {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cartao-depoimento__seta-navegacao {
    font-size: var(--font-size-large);
    cursor: pointer;
    color: var(--color-text-secondary);
    user-select: none;
    transition: var(--transition-smooth);
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cartao-depoimento__seta-navegacao:hover {
    color: var(--color-brand-primary);
    background-color: var(--color-gray-100);
}

.cartao-depoimento__pontos {
    display: flex;
    gap: 8px;
}

.cartao-depoimento__ponto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-surface-dark-elevated);
    cursor: pointer;
}

.cartao-depoimento__ponto.is-ativo {
    background-color: var(--color-brand-pink);
    transform: scale(1.2);
}

/* Linha inferior: Checklist de problemas */
.funcionalidades__linha-inferior {
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--spacing-large);
}

.funcionalidades__titulo-checklist {
    font-size: var(--font-size-large);
    text-align: center;
    color: var(--color-neutral-white);
    margin-bottom: 16px;
}

.funcionalidades__subtitulo-checklist {
    font-size: var(--font-size-base);
    text-align: center;
    color: color-mix(in srgb, var(--color-neutral-white) 80%, transparent);
    max-width: 800px;
    margin: 0 auto 24px auto;
    line-height: 1.5;
}



.funcionalidades__grade-checklist {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 48px;
}

/* Mockups visuais representativos */
.funcionalidades__coluna-mockup {
    display: flex;
    justify-content: center;
}

.funcionalidades__recipiente-mockup {
    position: relative;
    width: 320px;
    height: 240px;
}

.mini-painel {
    position: absolute;
    top: 10px;
    left: 20px;
    width: 200px;
    height: 140px;
    background-color: var(--color-neutral-white);
    border-radius: 12px;
    box-shadow: 0 10px 25px var(--color-black-translucent-20);
    padding: 10px;
    z-index: 1;
}

.mini-painel__cabecalho {
    height: 8px;
    width: 50%;
    background-color: var(--color-gray-300);
    border-radius: 4px;
    margin-bottom: 12px;
}

.mini-painel__grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mini-painel__celula {
    height: 45px;
    border-radius: 6px;
}

.computador {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 180px;
    z-index: 2;
}

.computador__tela {
    background-color: var(--color-gray-900);
    border: 6px solid var(--color-gray-700);
    border-radius: 8px 8px 0 0;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.computador__conteudo {
    text-align: center;
    width: 100%;
}

.computador__teclado {
    background-color: var(--color-gray-300);
    height: 8px;
    border-radius: 0 0 8px 8px;
}

/* Lista de checkboxes */
.funcionalidades__lista-caixas-selecao {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.funcionalidades__lista-caixas-selecao li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.funcionalidades__caixa-selecao {
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-brand-teal);
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
    position: relative;
    transition: var(--transition-smooth);
}

.funcionalidades__caixa-selecao:hover {
    background-color: color-mix(in srgb, var(--color-brand-teal) 10%, transparent);
}

.funcionalidades__caixa-selecao.is-selecionada {
    background-color: var(--color-brand-teal);
}

.funcionalidades__caixa-selecao.is-selecionada::after {
    content: '✓';
    color: var(--color-neutral-white);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.funcionalidades__lista-caixas-selecao li p {
    color: var(--color-neutral-white);
    font-size: var(--font-size-base);
    line-height: 1.4;
}

/* Rodapé do Checklist */
.funcionalidades__rodape-checklist {
    text-align: center;
    margin-top: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.funcionalidades__mensagem-destaque-rodape {
    font-size: var(--font-size-base);
    color: var(--color-neutral-white);
    font-weight: var(--font-weight-bold);
    margin-bottom: 16px;
}

.botao-cta {
    display: inline-flex;
    padding: 16px 24px;
    background: var(--gradient-aurora);
    border: none;
    border-radius: var(--border-radius-small);
    color: var(--color-neutral-white);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-primary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s ease, box-shadow var(--transition-default), opacity var(--transition-default);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.botao-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-white-translucent-15) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--transition-default);
}

.botao-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--color-brand-primary) 50%, transparent);
}

.botao-cta:hover::before {
    opacity: 1;
}

.botao-cta:active {
    transform: translateY(0);
}

.botao-cta__texto {
    position: relative;
    z-index: 1;
}

.botao-cta__icone {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    transition: transform var(--transition-default);
}

.botao-cta:hover .botao-cta__icone {
    transform: translateX(4px);
}

.fluxo {
    padding: var(--spacing-xlarge) 0;
    text-align: center;
}

.fluxo__linha-inferior {
    border-top: 1px solid var(--color-border-default);
    padding-top: var(--spacing-large);
    max-width: var(--recipiente-max-width);
    margin: 0 auto;
}

.fluxo__titulo-principal {
    font-size: var(--font-size-large);
    color: var(--color-surface-dark);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-xlarge);
}

.fluxo__grade-passos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}

/* Card individual do fluxo */
.cartao-fluxo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
}

.cartao-fluxo__numero {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-brand-teal) 0%, var(--color-brand-primary) 50%, var(--color-brand-secondary) 100%);
    color: var(--color-surface-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-black);
    margin-bottom: 24px;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-brand-teal) 25%, transparent);
    transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
    color: var(--color-neutral-white);
}

.cartao-fluxo:hover .cartao-fluxo__numero {
    transform: scale(1.1) rotate(5deg);
    background: var(--gradient-aurora);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-brand-primary) 30%, transparent);
}

.cartao-fluxo__titulo {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    color: var(--color-surface-dark);
    margin-bottom: 12px;
    line-height: 1.3;
}

.cartao-fluxo__descricao {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    line-height: 1.5;
}


@media (max-width: 992px) {
    .funcionalidades__linha-superior {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .funcionalidades__grade-checklist {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .funcionalidades__coluna-mockup {
        order: 2;
    }

    .fluxo__grade-passos {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

/* RESPONSIVIDADE DAS FUNCIONALIDADES E FLUXO */
@media (max-width: 600px) {

    .funcionalidades__titulo-beneficios,
    .funcionalidades__titulo-checklist,
    .fluxo__titulo-principal {
        font-size: var(--font-size-large);
    }

    .fluxo__grade-passos {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .botao-cta {
        width: 100%;
        padding: 16px 20px;
    }
}

/* ======================================== AJUSTES DE ESPAÇAMENTO PARA MOBILE ======================================== */
@media (max-width: 768px) {

    .servicos,
    .avaliacoes,
    .estatisticas,
    .perguntas-frequentes,
    .funcionalidades,
    .fluxo,
    .rodape {
        padding: var(--spacing-large) 0;
    }
}

@media (max-width: 576px) {
    .destaque__painel-envoltorio {
        padding: 0 var(--spacing-medium);
    }

    .destaque__painel-corpo {
        padding: var(--spacing-medium);
    }

    .destaque__painel-interno {
        padding: 12px;
    }

    .cartao-servico {
        padding: 24px var(--spacing-medium);
    }

    .funcionalidades__recipiente-mockup {
        transform: scale(0.85);
        transform-origin: center center;
        margin: -20px auto;
    }
}

/* ======================================== UTILITÁRIOS DE ACESSIBILIDADE ======================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    color: var(--color-neutral-white);
    background-color: var(--color-neutral-black);
}

/* ======================================== CHATBOT AURORA ======================================== */
/* Restaurar botão de subir ao topo na posição original */
.botao-topo {
    bottom: 14%;
    right: 10px;
}

.chatbot-container {
    position: fixed;
    top: 93%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 1000;
    font-family: var(--font-primary, 'Outfit', sans-serif);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Botão Flutuante */
.chatbot-toggle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-aurora);
    color: var(--color-neutral-white);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px var(--color-aurora-purple-glow-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform var(--transition-bounce, 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)), box-shadow var(--transition-default, 0.3s ease);
}

.chatbot-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px var(--color-aurora-purple-glow-1);
}

.chatbot-toggle:active {
    transform: scale(0.95);
}

/* Badge de Notificação */
.chatbot-toggle__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: var(--color-brand-pink);
    color: var(--color-neutral-white);
    font-size: 11px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-neutral-white);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 var(--color-aurora-pink-glow);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(207, 71, 147, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(207, 71, 147, 0);
    }
}

/* Janela do Chatbot */
.chatbot-window {
    position: absolute;
    right: 70px;
    bottom: 0;
    transform: scale(1);
    width: 360px;
    height: 500px;
    background: var(--color-surface-primary);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-border-default);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity var(--transition-smooth, 0.3s ease), transform var(--transition-smooth, 0.3s ease), visibility var(--transition-smooth, 0.3s ease);
    transform-origin: bottom right;
    backdrop-filter: blur(8px);
    background-color: var(--color-white-translucent-70);
}

.chatbot-window--hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    pointer-events: none;
}

/* Cabeçalho do Chat */
.chatbot-window__header {
    background: var(--gradient-aurora);
    color: var(--color-neutral-white);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chatbot-window__header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chatbot-window__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-white-translucent-20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    overflow: hidden;
    flex-shrink: 0;
}

.chatbot-window__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    display: block;
}

.chatbot-window__title {
    margin: 0;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
}

.chatbot-window__status {
    font-size: 11px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chatbot-window__status-dot {
    width: 6px;
    height: 6px;
    background-color: var(--color-brand-teal-light);
    border-radius: 50%;
    display: inline-block;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.chatbot-window__close-btn {
    background: none;
    border: none;
    color: var(--color-neutral-white);
    cursor: pointer;
    font-size: 20px;
    opacity: 0.8;
    transition: opacity var(--transition-default, 0.3s ease);
}

.chatbot-window__close-btn:hover {
    opacity: 1;
}

/* Corpo do Chat / Mensagens */
.chatbot-window__messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: var(--color-gray-50);
}

.chatbot-window__message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: var(--border-radius-small);
    font-size: var(--font-size-small);
    line-height: 1.4;
    word-break: break-word;
}

.chatbot-window__message--bot {
    background-color: var(--color-neutral-white);
    color: var(--color-neutral-black);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    box-shadow: var(--shadow-medium);
}

.chatbot-window__message--user {
    background-color: var(--color-brand-primary);
    color: var(--color-neutral-white);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 8px var(--color-aurora-purple-glow-2);
}

.chatbot-window__message--erro {
    background-color: var(--color-feedback-error-light);
    color: var(--color-feedback-error);
    border: 1px solid var(--color-feedback-error);
}

/* Indicador de Digitação */
.chatbot-window__message--typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background-color: var(--color-gray-300);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* Rodapé do Chat / Input */
.chatbot-window__footer {
    padding: 12px;
    background-color: var(--color-neutral-white);
    border-top: 1px solid var(--color-border-default);
}

.chatbot-window__form {
    display: flex;
    gap: 8px;
}

.chatbot-window__input {
    flex: 1;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius-large);
    padding: 8px 16px;
    font-size: var(--font-size-small);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    background-color: var(--color-neutral-white);
    color: var(--color-neutral-black);
}

.chatbot-window__input:focus {
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px var(--color-aurora-purple-glow-2);
}

.chatbot-window__send-btn {
    background: var(--gradient-aurora);
    border: none;
    color: var(--color-neutral-white);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-default, 0.3s ease), opacity var(--transition-default, 0.3s ease);
}

.chatbot-window__send-btn:hover {
    transform: scale(1.05);
}

.chatbot-window__send-btn:active {
    transform: scale(0.95);
}

/* Container de Chips de Sugestão */
.chatbot-window__suggestions-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    margin-bottom: 4px;
    align-self: flex-start;
    max-width: 95%;
}

/* Chip de Sugestão Individual */
.chatbot-window__suggestion-chip {
    background-color: var(--color-neutral-white);
    color: var(--color-brand-primary);
    border: 1px solid var(--color-brand-primary);
    padding: 6px 12px;
    border-radius: var(--border-radius-large);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-default, 0.3s ease);
    box-shadow: var(--shadow-medium);
}

.chatbot-window__suggestion-chip:hover {
    background: var(--gradient-aurora);
    color: var(--color-neutral-white);
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--color-aurora-purple-glow-1);
}

.chatbot-window__suggestion-chip:active {
    transform: scale(0.95);
}

/* Acessibilidade: Anel de Foco visível apenas para navegação por teclado */
.chatbot-toggle:focus-visible,
.chatbot-window__close-btn:focus-visible,
.chatbot-window__input:focus-visible,
.chatbot-window__send-btn:focus-visible,
.chatbot-window__suggestion-chip:focus-visible {
    outline: 3px solid var(--color-brand-teal);
    outline-offset: 2px;
}

/* Suporte à redução de movimento do sistema operacional */
@media (prefers-reduced-motion: reduce) {
    .chatbot-toggle,
    .chatbot-toggle__badge,
    .chatbot-window,
    .chatbot-window__status-dot,
    .typing-dot,
    .chatbot-window__suggestion-chip,
    .chatbot-window__send-btn {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
    
    .chatbot-window--hidden {
        transform: translateY(-50%) !important;
    }
}

/* Responsividade */
@media (max-width: 480px) {
    .chatbot-container {
        top: auto;
        bottom: 24px;
        transform: none;
    }
    
    .chatbot-window {
        width: calc(100vw - 32px);
        height: calc(100vh - 120px);
        bottom: 80px;
        top: auto;
        right: 0;
        transform: scale(1);
        transform-origin: bottom right;
    }
    
    .chatbot-window--hidden {
        transform: scale(0.8) translateY(20px);
    }
    
        @media (prefers-reduced-motion: reduce) {
        .chatbot-window--hidden {
            transform: none !important;
        }
    }
}

/* ============================  A18 — Toast de Sucesso (Elemento Estático no DOM) ============================ */
/* O elemento existe no DOM desde o carregamento para que o aria-live="assertive" seja registrado pelos leitores de tela */
.toast-sucesso {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background: var(--gradient-aurora);
    color: var(--color-neutral-white);
    padding: 18px 28px;
    border-radius: var(--border-radius-small);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    z-index: 1000000;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateY(100px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
}

.toast-sucesso.is-visivel {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.toast-sucesso__icone {
    font-size: 20px;
    color: var(--color-highlight-teal, #45e5c8);
    flex-shrink: 0;
}

/* Respeita preferências de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .toast-sucesso {
        transition: opacity 0.2s ease;
        transform: none;
    }
}