/* ==============================
   STYLES.CSS — 4.events
   CSS principal (carregado async)
   ============================== */

/* ==============================
   1. RESET MÍNIMO
   ============================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==============================
   2. CSS CUSTOM PROPERTIES
   ============================== */
:root {
    /* Cores primárias da marca */
    --cor-primaria: #F26522;
    --cor-primaria-hover: #d95a1e;
    --cor-primaria-light: rgba(242, 101, 34, 0.1);
    --cor-vermelho: #E63946;
    --cor-verde: #1A9B5C;
    --gradiente-primario: linear-gradient(135deg, #F26522 0%, #E63946 100%);
    --gradiente-heroi: linear-gradient(135deg, #42094b 0%, #53123f 50%, #65183e 100%);

    /* Fundos (light — default) */
    --fundo-primario: #F7F7F8;
    --fundo-secundario: #FFFFFF;
    --fundo-card: #FFFFFF;
    --fundo-navbar: rgba(255, 255, 255, 0.88);
    --fundo-rodape: #2a0830;
    --fundo-codigo: #f4f4f5;

    /* Texto */
    --texto-primario: #1a1a1a;
    --texto-secundario: #555555;
    --texto-terciario: #888888;
    --texto-sobre-primaria: #FFFFFF;
    --texto-sobre-escuro: #F0F0F0;
    --texto-link: #F26522;

    /* Bordas */
    --borda: #e5e5e5;
    --borda-card: #eeeeee;

    /* Sombras */
    --sombra-suave: 0 4px 16px rgba(0, 0, 0, 0.06);
    --sombra-media: 0 8px 24px rgba(0, 0, 0, 0.1);
    --sombra-forte: 0 12px 32px rgba(0, 0, 0, 0.15);
    --sombra-navbar: 0 2px 10px rgba(0, 0, 0, 0.08);

    /* Overlays */
    --overlay-escuro: rgba(26, 26, 46, 0.85);
    --overlay-leve: rgba(0, 0, 0, 0.4);

    /* Bordas arredondadas */
    --raio-borda: 16px;
    --raio-borda-medio: 12px;
    --raio-borda-pequeno: 8px;
    --raio-borda-pill: 50px;

    /* Transição padrão (Material Design easing) */
    --transicao: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transicao-rapida: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Tipografia */
    --fonte-titulo: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fonte-corpo: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    /* Tamanhos de fonte fluidos */
    --tamanho-hero: clamp(2rem, 5vw, 3.5rem);
    --tamanho-h1: clamp(1.75rem, 4vw, 3rem);
    --tamanho-h2: clamp(1.5rem, 3.5vw, 2.5rem);
    --tamanho-h3: clamp(1.2rem, 2.5vw, 1.75rem);
    --tamanho-h4: clamp(1rem, 2vw, 1.25rem);
    --tamanho-corpo: 1rem;
    --tamanho-pequeno: 0.875rem;
    --tamanho-mini: 0.75rem;

    /* Espaçamento */
    --espacamento-secao: 64px;
    --espacamento-secao-mobile: 48px;
    --espacamento-interno: 24px;
    --largura-container: 1200px;
    --largura-container-estreito: 800px;

    /* Z-index */
    --z-navbar: 1000;
    --z-modal: 2000;
    --z-topo: 900;
    --z-overlay: 1500;

    /* Cores de status */
    --cor-sucesso: #04d361;
    --cor-erro: #f75a68;
    --cor-aviso: #ffc107;
    --cor-info: #3b82f6;
}

/* ==============================
   3. BASE
   ============================== */
html {
    /* scroll-behavior definido via JS apenas em interações explícitas */
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--fonte-corpo);
    font-size: var(--tamanho-corpo);
    font-weight: 400;
    line-height: 1.6;
    color: var(--texto-primario);
    background-color: var(--fundo-primario);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.menu-aberto {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    line-height: 1.2;
    color: var(--texto-primario);
}

h1 { font-size: var(--tamanho-h1); }
h2 { font-size: var(--tamanho-h2); }
h3 { font-size: var(--tamanho-h3); }
h4 { font-size: var(--tamanho-h4); }

p {
    line-height: 1.7;
    color: var(--texto-secundario);
}

a {
    color: var(--texto-link);
    text-decoration: none;
    transition: var(--transicao-rapida);
}

a:hover {
    color: var(--cor-primaria-hover);
}

a:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
    border-radius: 4px;
}

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

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: var(--fonte-corpo);
    border: none;
    background: none;
}

button:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==============================
   5. UTILITÁRIOS
   ============================== */
.container {
    max-width: var(--largura-container);
    margin: 0 auto;
    padding: 0 var(--espacamento-interno);
}

.container-estreito {
    max-width: var(--largura-container-estreito);
    margin: 0 auto;
    padding: 0 var(--espacamento-interno);
}

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

.texto-destaque {
    background: var(--gradiente-primario);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.texto-centro {
    text-align: center;
}

.secao {
    padding: var(--espacamento-secao) 0;
}

.secao-eyebrow {
    font-family: var(--fonte-titulo);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cor-primaria);
    margin-bottom: 16px;
    text-align: center;
}

.secao-titulo {
    font-size: var(--tamanho-h2);
    font-weight: 400;
    text-align: center;
    margin-bottom: 16px;
}

.secao-titulo strong {
    font-weight: 700;
}

.secao-subtitulo {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--texto-secundario);
    text-align: center;
    max-width: 700px;
    margin: 0 auto 48px;
    line-height: 1.7;
}

.secao-subtitulo strong {
    font-weight: 700;
    color: var(--texto-primario);
}

/* ==============================
   6. BOTÕES
   ============================== */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-corpo);
    font-weight: 600;
    border-radius: var(--raio-borda-pill);
    transition: var(--transicao);
    text-decoration: none;
    white-space: nowrap;
}

.botao:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
}

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

.botao-primario {
    background: var(--cor-primaria);
    color: var(--texto-sobre-primaria);
}

.botao-primario:hover {
    background: var(--cor-primaria-hover);
    color: var(--texto-sobre-primaria);
}

.botao-secundario {
    background: transparent;
    color: var(--cor-primaria);
    border: 2px solid var(--cor-primaria);
}

.botao-secundario:hover {
    background: var(--cor-primaria);
    color: var(--texto-sobre-primaria);
}

.botao-branco {
    background: #FFFFFF;
    color: var(--cor-primaria);
}

.botao-branco:hover {
    background: #f0f0f0;
    color: var(--cor-primaria-hover);
}

.botao-pequeno {
    padding: 10px 24px;
    font-size: var(--tamanho-pequeno);
}

.botao-grande {
    padding: 18px 40px;
    font-size: 1.1rem;
}

/* ==============================
   7. NAVBAR
   ============================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-navbar);
    background: var(--fundo-navbar);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: var(--transicao);
    padding: 16px 0;
}

.navbar.scrolled {
    padding: 10px 0;
    border-bottom-color: var(--borda);
    box-shadow: var(--sombra-navbar);
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--largura-container);
    margin: 0 auto;
    padding: 0 var(--espacamento-interno);
}

.navbar-logo {
    display: flex;
    align-items: center;
}

.navbar-logo img {
    height: 36px;
    width: auto;
    transition: var(--transicao);
}

.navbar.scrolled .navbar-logo img {
    height: 30px;
}

.navbar-menu {
    display: flex;
    align-items: center;
    gap: 32px;
}

.navbar-link {
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-pequeno);
    font-weight: 500;
    color: var(--texto-primario);
    padding: 8px 0;
    position: relative;
}

.navbar-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--cor-primaria);
    transition: var(--transicao);
}

.navbar-link:hover::after,
.navbar-link.ativo::after {
    width: 100%;
}

.navbar-link:hover {
    color: var(--cor-primaria);
}

/* Dropdown do Ecossistema */
.navbar-dropdown {
    position: relative;
}

.navbar-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
}

.navbar-dropdown-trigger ion-icon {
    font-size: 14px;
    transition: var(--transicao);
}

.navbar-dropdown:hover .navbar-dropdown-trigger ion-icon {
    transform: rotate(180deg);
}

.navbar-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--fundo-secundario);
    border: 1px solid var(--borda);
    border-radius: var(--raio-borda-medio);
    box-shadow: var(--sombra-media);
    padding: 12px;
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transicao);
    z-index: 10;
}

.navbar-dropdown:hover .navbar-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.navbar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: var(--raio-borda-pequeno);
    color: var(--texto-primario);
    font-size: var(--tamanho-pequeno);
    transition: var(--transicao-rapida);
}

.navbar-dropdown-item:hover {
    background: var(--cor-primaria-light);
    color: var(--cor-primaria);
}

.navbar-dropdown-item img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.navbar-acoes {
    display: flex;
    align-items: center;
    gap: 16px;
}

.navbar-login {
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-pequeno);
    font-weight: 500;
    color: var(--texto-primario);
    padding: 8px 16px;
}

.navbar-login:hover {
    color: var(--cor-primaria);
}

.navbar-cta {
    padding: 10px 24px;
    font-size: var(--tamanho-pequeno);
}

/* Menu Mobile Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 28px;
    height: 22px;
    cursor: pointer;
    z-index: calc(var(--z-navbar) + 10);
}

.menu-toggle-linha {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--texto-primario);
    border-radius: 2px;
    transition: var(--transicao);
    transform-origin: center;
}

.menu-toggle.ativo .menu-toggle-linha:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.ativo .menu-toggle-linha:nth-child(2) {
    opacity: 0;
}

.menu-toggle.ativo .menu-toggle-linha:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Botão de tema */
/* Menu Mobile Overlay */
.menu-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-navbar) - 1);
    opacity: 0;
    visibility: hidden;
    transition: var(--transicao);
}

.menu-mobile-overlay.ativo {
    opacity: 1;
    visibility: visible;
}

.menu-mobile {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    background: var(--fundo-secundario);
    z-index: var(--z-navbar);
    padding: 80px 24px 24px;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: var(--sombra-forte);
}

.menu-mobile.ativo {
    right: 0;
}

.menu-mobile-link {
    display: block;
    padding: 14px 0;
    font-family: var(--fonte-titulo);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--texto-primario);
    border-bottom: 1px solid var(--borda);
}

.menu-mobile-link:hover {
    color: var(--cor-primaria);
}

.menu-mobile-submenu {
    padding-left: 16px;
}

.menu-mobile-submenu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: var(--tamanho-pequeno);
    color: var(--texto-secundario);
}

.menu-mobile-submenu-item:hover {
    color: var(--cor-primaria);
}

.menu-mobile-cta {
    margin-top: 24px;
    width: 100%;
    text-align: center;
}

/* ==============================
   8. HERO
   ============================== */
.heroi {
    position: relative;
    padding: 160px 0 80px;
    overflow: hidden;
}

.heroi-escuro {
    background: linear-gradient(135deg, #42094b 0%, #53123f 50%, #65183e 100%);
    color: var(--texto-sobre-escuro);
}

#heroi-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.heroi-escuro .heroi-titulo,
.heroi-escuro .heroi-subtitulo {
    color: var(--texto-sobre-escuro);
}

.heroi-container {
    display: flex;
    align-items: center;
    gap: 48px;
    position: relative;
    z-index: 1;
}

.heroi-conteudo {
    flex: 1;
    max-width: 600px;
}

.heroi-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--cor-primaria-light);
    color: var(--cor-primaria);
    border-radius: var(--raio-borda-pill);
    font-size: var(--tamanho-pequeno);
    font-weight: 600;
    margin-bottom: 24px;
}

.heroi-titulo {
    font-size: var(--tamanho-hero);
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 20px;
}

.heroi-subtitulo {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: var(--texto-secundario);
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 520px;
}

.heroi-acoes {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.heroi-imagem {
    flex: 1;
    max-width: 560px;
    position: relative;
    align-self: center;
    display: flex;
    justify-content: center;
}

.heroi-imagem img {
    width: 70%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
                0 2px 8px rgba(0, 0, 0, 0.3),
                0 20px 50px rgba(0, 0, 0, 0.25);
}

/* Hero video embed */
.heroi-video {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.heroi-video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--raio-borda);
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.heroi-video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.heroi-cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.heroi-dica-cta {
    font-size: var(--tamanho-pequeno);
    color: rgba(255, 255, 255, 0.4);
    margin-top: 12px;
    text-align: center;
}

.heroi:not(.heroi-escuro) .heroi-dica-cta {
    color: var(--texto-terciario);
}

/* Texto discreto abaixo de CTAs (reutilizavel) */
.dica-cta {
    font-size: var(--tamanho-pequeno);
    color: rgba(255, 255, 255, 0.4);
    margin-top: 12px;
}

/* ==============================
   8a-app. HERO APP FAN CAROUSEL
   ============================== */
.heroi-app-showcase {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.app-fan {
    position: relative;
    width: 360px;
    height: 440px;
}

.app-fan-card {
    position: absolute;
    width: 190px;
    height: 388px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
    top: 50%;
    left: 50%;
    transform-origin: 50% 100%;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.6s ease;
    will-change: transform, opacity;
}

.app-fan-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 3 visible cards: left, center, right */
.app-fan-card[data-pos="left"] {
    opacity: 0.6;
    transform: translate(-50%, -50%) rotate(-14deg) translateX(-70px) scale(0.85);
    z-index: 1;
}

.app-fan-card[data-pos="center"] {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    z-index: 3;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 30px rgba(242, 101, 34, 0.1);
}

.app-fan-card[data-pos="right"] {
    opacity: 0.6;
    transform: translate(-50%, -50%) rotate(14deg) translateX(70px) scale(0.85);
    z-index: 1;
}

/* Exit states */
.app-fan-card[data-pos="exit-left"] {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-30deg) translateX(-140px) scale(0.7);
    z-index: 0;
}

.app-fan-card[data-pos="exit-right"] {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(30deg) translateX(140px) scale(0.7);
    z-index: 0;
}

/* Hidden */
.app-fan-card[data-pos="hidden"] {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    z-index: 0;
}

@media (max-width: 768px) {
    .app-fan {
        width: 300px;
        height: 360px;
    }

    .app-fan-card {
        width: 150px;
        height: 306px;
        border-radius: 18px;
    }

    .app-fan-card[data-pos="left"] {
        transform: translate(-50%, -50%) rotate(-12deg) translateX(-55px) scale(0.82);
    }

    .app-fan-card[data-pos="right"] {
        transform: translate(-50%, -50%) rotate(12deg) translateX(55px) scale(0.82);
    }
}

/* ==============================
   8a-pre. HERO MOCKUP CAROUSEL 3D
   ============================== */
.heroi-mockups {
    flex: 1;
    min-width: 0;
    perspective: 1200px;
}

.mockup-carousel {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.mockup-track {
    position: relative;
    width: 100%;
    aspect-ratio: 2020 / 1374;
    transform-style: preserve-3d;
}

.mockup-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: rotateY(40deg) scale(0.85);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    will-change: transform, opacity;
}

.mockup-slide.mockup-active {
    opacity: 1;
    transform: rotateY(-4deg) rotateX(2deg) scale(1);
    pointer-events: auto;
}

.mockup-slide.mockup-exit-left {
    opacity: 0;
    transform: rotateY(-40deg) scale(0.85);
}

.mockup-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--raio-borda);
}

/* Diffuse glow shadow around mockup */
.mockup-slide img {
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4))
            drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3))
            drop-shadow(0 20px 50px rgba(0, 0, 0, 0.25));
}

.mockup-label {
    text-align: center;
    margin-top: 16px;
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-pequeno);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.03em;
    transition: opacity 0.3s;
    min-height: 1.5em;
}

.mockup-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}

.mockup-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: var(--transicao);
    padding: 0;
}

.mockup-dot.mockup-dot-active {
    background: var(--cor-primaria);
    width: 24px;
    border-radius: 4px;
}

.mockup-dot:hover {
    background: rgba(255, 255, 255, 0.5);
}

.mockup-dot.mockup-dot-active:hover {
    background: var(--cor-primaria);
}

@media (max-width: 768px) {
    .heroi-mockups {
        perspective: 800px;
        margin-bottom: -32px;
    }

    .mockup-carousel {
        max-width: 100%;
    }

    .mockup-track {
        /* Fixed dimensions to prevent size jitter between slides */
        aspect-ratio: auto;
        height: 62vw;
        overflow: visible;
    }

    .mockup-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .mockup-slide img {
        width: 90vw;
        max-width: none;
        height: auto;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

    .mockup-slide.mockup-active {
        transform: rotateY(0deg) rotateX(0deg) scale(1);
    }

    .mockup-label {
        font-size: var(--tamanho-mini);
        margin-top: 4px;
    }

    .mockup-dots {
        margin-top: 6px;
    }
}

/* ==============================
   8a. HERO HUB + EVE CHAT
   ============================== */
.heroi-hub {
    flex: 1;
    max-width: 420px;
    min-height: 480px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Circulos decorativos — orbita dos icones */
.hub-circle-outer {
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.hub-circle-inner {
    position: absolute;
    width: 190px;
    height: 190px;
    border: 1px dashed rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Centro — logo (posicao fixa no topo) */
.hub-centro {
    position: absolute;
    top: 95px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15),
                0 4px 20px rgba(0, 0, 0, 0.2),
                0 0 40px rgba(242, 101, 34, 0.12);
}

.hub-centro img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
}

/* Nodes — icones orbitando na parte superior */
.hub-node {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transition: transform 0.3s ease;
}

.hub-node:hover {
    transform: translateY(-3px) !important;
}

/* 7 nodes em semicirculo uniforme (raio 160px do centro do logo)
   Centro do logo: top 155px, left 50%
   Arco de 180° (de 0° a 180°), dividido em 6 intervalos = 30° cada */
.hub-node[data-hub="0"] { top: 155px; left: calc(50% + 160px); transform: translate(-50%, -50%); }  /* 0° */
.hub-node[data-hub="1"] { top: 75px;  left: calc(50% + 139px); transform: translate(-50%, -50%); }  /* 30° */
.hub-node[data-hub="2"] { top: 15px;  left: calc(50% + 80px);  transform: translate(-50%, -50%); }  /* 60° */
.hub-node[data-hub="3"] { top: -5px;  left: 50%;               transform: translate(-50%, -50%); }  /* 90° */
.hub-node[data-hub="4"] { top: 15px;  left: calc(50% - 80px);  transform: translate(-50%, -50%); }  /* 120° */
.hub-node[data-hub="5"] { top: 75px;  left: calc(50% - 139px); transform: translate(-50%, -50%); }  /* 150° */
.hub-node[data-hub="6"] { top: 155px; left: calc(50% - 160px); transform: translate(-50%, -50%); }  /* 180° */

.hub-node img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 7px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    object-fit: contain;
    transition: all 0.3s ease;
}

.hub-node:hover img {
    border-color: var(--cor-primaria);
    box-shadow: 0 4px 20px rgba(242, 101, 34, 0.25);
    background: rgba(242, 101, 34, 0.12);
}

.hub-node span {
    font-family: var(--fonte-titulo);
    font-size: 10px;
    text-align: center;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

/* Entrada animada — JS */
.hub-node.hub-entered {
    opacity: 1;
}

.hub-node.hub-ativo img {
    border-color: var(--cor-primaria);
    background: rgba(242, 101, 34, 0.15);
}

/* ── E.V.E. Chat no hub (abaixo do logo, tamanho fixo) ── */
.hub-eve-chat {
    position: absolute;
    top: 220px;
    left: 50%;
    transform: translateX(-50%);
    width: 290px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 5;
}

.hub-eve-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: #fafafa;
}

.hub-eve-header img {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.hub-eve-header span:first-of-type {
    font-family: var(--fonte-titulo);
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.hub-eve-status {
    font-size: 10px;
    color: var(--cor-primaria);
    margin-left: auto;
    font-weight: 600;
    font-family: var(--fonte-titulo);
}

.hub-eve-messages {
    padding: 10px 12px;
    height: 90px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.hub-eve-msg {
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 4px 12px 12px 12px;
    max-width: 90%;
    animation: eveFadeUp 0.4s ease-out both;
}

.hub-eve-msg-eve {
    background: linear-gradient(135deg, rgba(242,101,34,0.08), rgba(242,101,34,0.03));
    border: 1px solid rgba(242,101,34,0.12);
    color: #333;
    align-self: flex-start;
}

.hub-eve-msg-user {
    background: #f0f0f0;
    border: 1px solid rgba(0,0,0,0.04);
    color: #555;
    align-self: flex-end;
    border-radius: 12px 4px 12px 12px;
}

.hub-eve-input {
    padding: 10px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 12px;
    color: #999;
}

/* Floating suave */
.hub-node.hub-float {
    animation: hub-float var(--hub-float-dur, 6s) ease-in-out infinite;
    animation-delay: var(--hub-float-delay, 0s);
}

@keyframes hub-float {
    0%, 100% { translate: 0 0; }
    33% { translate: var(--hub-fx, 2px) var(--hub-fy, -3px); }
    66% { translate: calc(var(--hub-fx, 2px) * -0.5) calc(var(--hub-fy, -3px) * -0.7); }
}

/* ==============================
   8b. JORNADA DO ORGANIZADOR
   ============================== */
.jornada {
    background: var(--fundo-secundario);
    padding: 80px 0 64px;
    position: relative;
    overflow: hidden;
}

/* Animacoes de entrada — oculto ate visivel */
.jornada-eyebrow,
.jornada-h2,
.jornada-sub,
.jornada-timeline-wrap {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.jornada-visible .jornada-eyebrow { opacity: 1; transform: translateY(0); }
.jornada-visible .jornada-h2 { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.jornada-visible .jornada-sub { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.jornada-visible .jornada-timeline-wrap { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }

/* Header */
.jornada-header {
    text-align: center;
    padding: 0 24px;
    margin-bottom: 56px;
}

.jornada-eyebrow {
    font-family: var(--fonte-titulo);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cor-primaria);
    margin-bottom: 16px;
}

.jornada-h2 {
    font-family: var(--fonte-titulo);
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.15;
    max-width: 800px;
    margin: 0 auto 16px;
    color: var(--texto-primario);
}

.jornada-destaque {
    background: linear-gradient(135deg, #FF4F01 0%, #FF8C42 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.jornada-sub {
    font-size: 1rem;
    color: var(--texto-secundario);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

.jornada-sub strong {
    font-weight: 700;
    color: var(--texto-primario);
}

/* Timeline wrapper */
.jornada-timeline-wrap {
    position: relative;
    padding: 0 40px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Barra de progresso */
.jornada-progress-track {
    position: relative;
    height: 3px;
    background: var(--borda);
    border-radius: 2px;
}

.jornada-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #FF4F01, #FF8C42);
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 16px rgba(255, 79, 1, 0.2);
}

/* Grid de nodes */
.jornada-steps {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: relative;
    top: -2px;
}

/* Cada node */
.jornada-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 0 4px;
    background: none;
    border: none;
    font-family: inherit;
    transition: all 0.3s ease;
}

/* Dot */
.jornada-dot-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.jornada-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2.5px solid var(--borda);
    background: var(--fundo-secundario);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 2;
}

.jornada-node.active .jornada-dot,
.jornada-node.completed .jornada-dot {
    border-color: #FF4F01;
    background: #FF4F01;
    box-shadow: 0 0 20px rgba(255, 79, 1, 0.2), 0 0 40px rgba(255, 79, 1, 0.1);
}

.jornada-node.active .jornada-dot {
    width: 16px;
    height: 16px;
}

/* Ring pulsante */
.jornada-dot-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid #FF4F01;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s ease;
}

.jornada-node.active .jornada-dot-ring {
    opacity: 0.4;
    transform: scale(1);
    animation: jornada-pulse 2s ease-in-out infinite;
}

@keyframes jornada-pulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.3); opacity: 0; }
}

/* Textos do node */
.jornada-step-num {
    font-family: var(--fonte-titulo);
    font-size: 11px;
    font-weight: 700;
    color: var(--texto-terciario);
    margin-bottom: 6px;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.jornada-node.active .jornada-step-num {
    color: #FF4F01;
}

.jornada-step-tag {
    font-family: var(--fonte-titulo);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--texto-terciario);
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
    margin-bottom: 12px;
}

.jornada-node.active .jornada-step-tag {
    background: none;
    border: none;
    color: var(--cor-primaria);
    position: relative;
}

.jornada-node.active .jornada-step-tag::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--cor-primaria);
    border-radius: 1px;
}

.jornada-step-label {
    font-family: var(--fonte-titulo);
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-terciario);
    text-align: center;
    transition: color 0.3s;
    line-height: 1.3;
    max-width: 120px;
}

.jornada-node.active .jornada-step-label {
    color: var(--texto-primario);
}

.jornada-node:hover .jornada-step-label {
    color: var(--texto-secundario);
}

/* Painel de detalhe */
.jornada-detail {
    margin-top: 48px;
    padding: 0 40px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.jornada-card {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 48px;
    align-items: center;
    background: rgba(255, 79, 1, 0.04);
    border: 1px solid rgba(255, 79, 1, 0.2);
    border-radius: 20px;
    padding: 48px 56px;
    position: relative;
    overflow: hidden;
}

.jornada-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #FF4F01, transparent);
    opacity: 0.4;
}

/* Animacao de troca */
.jornada-animate {
    animation: jornada-fade-slide 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes jornada-fade-slide {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Card — lado esquerdo */
.jornada-card-left {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.jornada-card-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    padding: 0;
    background: none;
    border-radius: 16px;
    border: none;
    overflow: hidden;
}

.jornada-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 16px;
}

.jornada-card-info {
    flex: 1;
}

.jornada-card-stepnum {
    font-family: var(--fonte-titulo);
    font-size: 12px;
    font-weight: 600;
    color: #FF4F01;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.jornada-card-title {
    font-family: var(--fonte-titulo);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
    color: var(--texto-primario);
}

.jornada-card-subtitle {
    font-family: var(--fonte-titulo);
    font-size: 14px;
    font-weight: 500;
    color: var(--texto-terciario);
    margin-bottom: 16px;
}

.jornada-card-desc {
    font-size: 0.95rem;
    color: var(--texto-secundario);
    line-height: 1.7;
}

/* Card — lado direito (metrica) */
.jornada-card-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 16px;
    border: 1px solid var(--borda);
    min-height: 180px;
}

.jornada-metric-value {
    font-family: var(--fonte-titulo);
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FF4F01, #FF8C42);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
    line-height: 1.2;
}

.jornada-metric-label {
    font-size: 14px;
    color: var(--texto-terciario);
    font-weight: 500;
}

/* Counter dots */
.jornada-counter {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
}

.jornada-counter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--borda);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
}

.jornada-counter-dot.active {
    background: #FF4F01;
    width: 24px;
    border-radius: 4px;
}

/* ==============================
   9. CARDS
   ============================== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

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

.cards-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.card {
    background: var(--fundo-card);
    border: 1px solid var(--borda-card);
    border-radius: var(--raio-borda);
    padding: 32px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    border-color: rgba(242, 101, 34, 0.25);
}

.card-icone {
    width: 48px;
    height: 48px;
    padding: 10px;
    margin-bottom: 24px;
    border-radius: var(--raio-borda-medio);
    background: var(--cor-primaria-light);
    object-fit: contain;
}

.card-titulo {
    font-size: var(--tamanho-h4);
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
}

.card-descricao {
    font-size: var(--tamanho-pequeno);
    color: var(--texto-secundario);
    line-height: 1.7;
    flex: 1;
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-weight: 600;
    font-size: var(--tamanho-pequeno);
    color: var(--cor-primaria);
    transition: gap 0.25s ease, color 0.25s ease;
}

.card-link:hover {
    gap: 10px;
    color: var(--cor-primaria-hover);
}

.card-link ion-icon {
    transition: transform 0.25s ease;
}

.card:hover .card-link ion-icon {
    transform: translateX(3px);
}

/* Lista dentro de card */
.card-lista {
    list-style: none;
    margin-top: 12px;
    font-size: var(--tamanho-pequeno);
    color: var(--texto-secundario);
    line-height: 1.7;
    flex: 1;
}

.card-lista li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 6px;
}

.card-lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cor-primaria);
    opacity: 0.6;
}

/* Ícone ion-icon dentro de card (sem imagem) */
.card-icone-ion {
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    border-radius: var(--raio-borda-medio);
    background: var(--cor-primaria-light);
    color: var(--cor-primaria);
}

/* ==============================
   10. SEÇÃO BTG PACTUAL
   ============================== */
.secao-btg {
    position: relative;
    background: linear-gradient(135deg, #010a18 0%, #002952 50%, #004483 100%);
    color: var(--texto-sobre-escuro);
    padding: 80px 0;
    overflow: hidden;
}

#btg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.btg-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 56px;
}

.btg-conteudo {
    flex: 1;
    min-width: 0;
}

.btg-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--raio-borda-pill);
    font-size: var(--tamanho-pequeno);
    font-weight: 600;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.85);
}

.btg-badge ion-icon {
    font-size: 18px;
    color: #5ba3e6;
}

.btg-titulo {
    color: #f0f0f0;
    text-align: left;
}

.btg-destaque {
    background: linear-gradient(135deg, #5ba3e6 0%, #a0d0ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btg-sub {
    text-align: left;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 20px;
    max-width: none;
}

.btg-descricao {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--tamanho-corpo);
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 32px;
}

.btg-descricao strong {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.btg-acoes {
    display: flex;
    gap: 12px;
}

/* Video embed — vertical shorts */
.btg-video {
    flex: 0 0 280px;
}

.btg-video-wrapper {
    position: relative;
    width: 280px;
    aspect-ratio: 9 / 16;
    border-radius: var(--raio-borda);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(91, 163, 230, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btg-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ==============================
   11. SEÇÃO CLIENTES (Marquee)
   ============================== */
.secao-clientes {
    padding: 40px 0;
    overflow: hidden;
    background: var(--fundo-secundario);
    border-top: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
}

.clientes-titulo {
    text-align: center;
    font-size: var(--tamanho-pequeno);
    color: var(--texto-terciario);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 24px;
}

.clientes-marquee {
    display: flex;
    animation: marquee 30s linear infinite;
    gap: 60px;
    width: max-content;
}

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

.clientes-marquee img {
    height: 40px;
    width: auto;
    opacity: 0.5;
    transition: var(--transicao);
    filter: grayscale(100%);
}

.clientes-marquee img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ==============================
   12. CASES DE SUCESSO
   ============================== */
.secao-cases {
    padding: var(--espacamento-secao) 0;
}

.cases-wrapper {
    position: relative;
}

.cases-carrossel {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 40px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.cases-carrossel::-webkit-scrollbar {
    display: none;
}

.case-card {
    flex: 0 0 320px;
    scroll-snap-align: center;
    border-radius: var(--raio-borda);
    overflow: hidden;
    background: var(--fundo-card);
    border: 1px solid var(--borda-card);
    transition: var(--transicao);
}

.case-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-media);
}

/* YouTube Facade */
.youtube-fachada {
    position: relative;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.youtube-fachada img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transicao);
}

.youtube-fachada:hover img {
    transform: scale(1.05);
    opacity: 0.8;
}

.youtube-fachada-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: var(--cor-primaria);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: var(--transicao);
    box-shadow: 0 4px 20px rgba(242, 101, 34, 0.4);
}

.youtube-fachada-play:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 24px rgba(242, 101, 34, 0.6);
}

.youtube-fachada-play svg {
    width: 24px;
    height: 24px;
    fill: #FFFFFF;
    margin-left: 4px;
}

.youtube-fachada iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.case-card-info {
    padding: 16px;
}

.case-card-titulo {
    font-size: var(--tamanho-corpo);
    font-weight: 600;
    margin-bottom: 4px;
}

.case-card-descricao {
    font-size: var(--tamanho-pequeno);
    color: var(--texto-terciario);
}

/* Controles do carrossel */
.carrossel-controles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.carrossel-seta {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--borda);
    background: var(--fundo-secundario);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transicao);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    box-shadow: var(--sombra-leve);
}

.carrossel-seta:hover {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #FFFFFF;
}

.carrossel-seta ion-icon {
    font-size: 18px;
}

#cases-prev {
    left: 4px;
}

#cases-next {
    right: 4px;
}

.carrossel-pontos {
    display: flex;
    gap: 8px;
}

.carrossel-ponto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--borda);
    border: none;
    cursor: pointer;
    transition: var(--transicao);
}

.carrossel-ponto.ativo {
    background: var(--cor-primaria);
    width: 24px;
    border-radius: 4px;
}

/* ==============================
   13. CTA DIAGNÓSTICO
   ============================== */
.secao-cta {
    background: #2a2a2e;
    padding: 60px 0;
    text-align: center;
}

.secao-cta .secao-titulo {
    color: #ffffff;
    margin-bottom: 12px;
}

.secao-cta .secao-subtitulo {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 32px;
}

/* ==============================
   13b. SEÇÃO METODOLOGIA + LOGOS
   ============================== */
.secao-metodologia {
    position: relative;
    padding: 80px 0 64px;
    overflow: hidden;
    background: linear-gradient(160deg, #1a0a20 0%, #2a0830 40%, #3d1045 100%);
}

.metodologia-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(242, 101, 34, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(230, 57, 70, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

/* Subtle grid pattern overlay */
.metodologia-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 70%);
}

.metodologia-conteudo {
    position: relative;
    z-index: 1;
}

.metodologia-eyebrow {
    color: var(--cor-primaria);
}

.metodologia-titulo {
    color: #f0f0f0;
}

.texto-destaque-light {
    background: linear-gradient(135deg, #F26522 0%, #ff8a5c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.metodologia-sub {
    color: rgba(240, 240, 240, 0.55);
    font-weight: 300;
}

.metodologia-sub strong {
    font-weight: 500;
    color: rgba(240, 240, 240, 0.8);
}

/* Social proof area */
.metodologia-prova {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.metodologia-prova-label {
    text-align: center;
    font-family: var(--fonte-titulo);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 32px;
}

.metodologia-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    max-width: 960px;
    margin: 0 auto;
}

.metodologia-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    border-radius: var(--raio-borda-pequeno);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: var(--transicao);
}

.metodologia-logo-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(242, 101, 34, 0.25);
    transform: translateY(-2px);
}

.metodologia-logo-item img {
    height: 32px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    opacity: 0.55;
    transition: var(--transicao);
    filter: brightness(0) invert(1);
}

.metodologia-logo-item:hover img {
    opacity: 0.9;
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(242, 101, 34, 0.3));
}

/* ==============================
   13c-diag. PÁGINA DIAGNÓSTICO
   ============================== */
.diag-metodologia-grid {
    text-align: center;
    margin-bottom: 40px;
}

.diag-metodologia-img img {
    max-width: 50%;
    height: auto;
    margin: 0 auto;
    display: block;
}

.diag-etapas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.diag-etapa {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background: var(--fundo-card);
    border: 1px solid var(--borda-card);
    border-radius: var(--raio-borda-medio);
    transition: var(--transicao);
}

.diag-etapa:hover {
    border-color: var(--cor-primaria);
    box-shadow: var(--sombra-suave);
}

.diag-etapa-num {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-primaria);
    color: #fff;
    border-radius: 50%;
    font-family: var(--fonte-titulo);
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.diag-etapa strong {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 15px;
    font-weight: 700;
    color: var(--texto-primario);
    margin-bottom: 4px;
}

.diag-etapa p {
    font-size: 13px;
    color: var(--texto-terciario);
    line-height: 1.5;
    margin: 0;
}

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

    .diag-metodologia-img img {
        max-width: 100%;
    }
}

/* ==============================
   13c-bilheteria. PÁGINA BILHETERIA
   ============================== */
.bilheteria-hero {
    position: relative;
    padding: 140px 0 60px;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(135deg, #42094b 0%, #53123f 50%, #65183e 100%);
}

.bilheteria-hero-inner {
    position: relative;
    z-index: 1;
}

.bilheteria-hero-titulo {
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-hero);
    font-weight: 700;
    color: var(--texto-sobre-escuro);
    line-height: 1.1;
    margin-bottom: 12px;
}

.bilheteria-hero-sub {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 32px;
}

/* Search bar */
.bilheteria-busca {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.bilheteria-busca ion-icon:first-child {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--cor-primaria);
    pointer-events: none;
    z-index: 2;
}

.bilheteria-busca input {
    width: 100%;
    padding: 16px 48px 16px 52px;
    font-family: var(--fonte-corpo);
    font-size: 15px;
    color: var(--texto-primario);
    background: var(--fundo-secundario);
    border: 2px solid transparent;
    border-radius: var(--raio-borda);
    outline: none;
    transition: var(--transicao);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.bilheteria-busca input::placeholder {
    color: var(--texto-terciario);
}

.bilheteria-busca input:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(242, 101, 34, 0.1);
}

.bilheteria-busca-limpar {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-terciario);
    font-size: 20px;
    border-radius: 4px;
    transition: background 0.2s;
}

.bilheteria-busca-limpar:hover {
    background: var(--fundo-primario);
}

/* Categories strip */
.bilheteria-categorias {
    background: var(--fundo-secundario);
    border-bottom: 1px solid var(--borda);
    padding: 16px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bilheteria-cats {
    display: flex;
    gap: 8px;
    white-space: nowrap;
}

.bilheteria-cat {
    padding: 8px 20px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-borda-pill);
    background: transparent;
    font-family: var(--fonte-titulo);
    font-size: 13px;
    font-weight: 500;
    color: var(--texto-secundario);
    cursor: pointer;
    transition: var(--transicao);
    flex-shrink: 0;
}

.bilheteria-cat:hover {
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
}

.bilheteria-cat-active {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
}

.bilheteria-cat-active:hover {
    color: #fff;
}

/* Section title */
.bilheteria-secao-titulo {
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-h3);
    font-weight: 700;
    color: var(--texto-primario);
    margin-bottom: 24px;
}

/* Events grid */
.bilheteria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

@media (min-width: 1200px) {
    .bilheteria-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Event card */
@keyframes bilheteriaFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.bilheteria-card {
    background: var(--fundo-card);
    border: 1px solid var(--borda-card);
    border-radius: var(--raio-borda-pequeno);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: bilheteriaFadeIn 0.4s ease-out both;
}

.bilheteria-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    color: inherit;
}

.bilheteria-card-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: visible;
}

.bilheteria-card-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
    border-radius: var(--raio-borda-pequeno) var(--raio-borda-pequeno) 0 0;
}

.bilheteria-card:hover .bilheteria-card-banner img {
    transform: scale(1.05);
}

.bilheteria-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.bilheteria-card-cat {
    position: absolute;
    bottom: -12px;
    left: 20px;
    color: #fff;
    padding: 5px 14px;
    border-radius: var(--raio-borda-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.bilheteria-card-body {
    padding: 20px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bilheteria-card-datas {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.bilheteria-card-data {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--texto-primario);
    white-space: nowrap;
}

.bilheteria-card-data-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bilheteria-card-data-start {
    background: #10b981;
}

.bilheteria-card-data-end {
    background: var(--cor-primaria);
}

.bilheteria-card-data-sep {
    color: var(--texto-terciario);
    font-size: 10px;
}

.bilheteria-card-titulo {
    font-family: var(--fonte-titulo);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--texto-primario);
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bilheteria-card-local {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--texto-terciario);
}

.bilheteria-card-local ion-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.bilheteria-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    margin-top: auto;
    background: var(--cor-primaria);
    color: #fff;
    border-radius: var(--raio-borda-pequeno);
    font-family: var(--fonte-titulo);
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
}

.bilheteria-card:hover .bilheteria-card-cta {
    background: var(--cor-primaria-hover);
}

.bilheteria-card-cta ion-icon {
    font-size: 16px;
}

/* Loading / Empty */
.bilheteria-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px 0;
    color: var(--texto-terciario);
}

.bilheteria-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--borda);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.bilheteria-vazio {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 0;
    color: var(--texto-terciario);
    text-align: center;
}

.bilheteria-vazio ion-icon {
    font-size: 48px;
    opacity: 0.4;
}

/* Responsive */
@media (max-width: 768px) {
    .bilheteria-hero {
        padding: 120px 0 40px;
    }

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

    .bilheteria-card-banner {
        height: 180px;
    }
}

/* ==============================
   13c-quem. PÁGINA QUEM SOMOS
   ============================== */

/* Hero institucional — centralizado, sem CTA */
.heroi-institucional {
    padding: 140px 0 80px;
    text-align: center;
}

.heroi-institucional .heroi-container-center {
    justify-content: center;
}

.heroi-institucional .heroi-conteudo-center {
    max-width: 700px;
    text-align: center;
    align-items: center;
    margin: 0 auto;
}

.heroi-institucional .heroi-subtitulo {
    text-align: center;
    margin: 0 auto;
}

.heroi-institucional .texto-destaque {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #ffffff;
    background-clip: unset;
    color: #ffffff;
}

/* Video + Content grid */
.quem-video-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
}

.quem-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--raio-borda);
    overflow: hidden;
    box-shadow: var(--sombra-media);
}

.quem-video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.quem-video-conteudo p {
    font-size: var(--tamanho-corpo);
    line-height: 1.7;
    color: var(--texto-secundario);
    margin-bottom: 16px;
}

.quem-video-conteudo p strong {
    color: var(--texto-primario);
    font-weight: 600;
}

/* Metrics bar */
.secao-quem-metricas {
    background: linear-gradient(135deg, #1a0a20 0%, #2a0830 50%, #3d1045 100%);
    padding: 48px 0;
}

.quem-metricas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    text-align: center;
}

.quem-metrica {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quem-metrica-num {
    font-family: var(--fonte-titulo);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--cor-primaria);
    line-height: 1;
}

.quem-metrica-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: var(--fonte-titulo);
}

/* Mascote + Propósito */
.quem-proposito-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 56px;
    align-items: center;
}

.quem-proposito-mascote {
    text-align: center;
}

.quem-proposito-mascote img {
    width: 200px;
    height: auto;
    margin-bottom: 16px;
}

.quem-mascote-frase {
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-h4);
    font-weight: 700;
    color: var(--texto-primario);
    margin: 0 0 4px;
}

.quem-mascote-sub {
    font-size: var(--tamanho-pequeno);
    color: var(--texto-terciario);
    margin: 0;
}

.quem-proposito-conteudo p {
    font-size: var(--tamanho-corpo);
    line-height: 1.7;
    color: var(--texto-secundario);
    margin-bottom: 24px;
}

.quem-proposito-conteudo p strong {
    color: var(--texto-primario);
    font-weight: 600;
}

.quem-valores-lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.quem-valor {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: var(--fundo-primario);
    border: 1px solid var(--borda-card);
    border-radius: var(--raio-borda-pequeno);
    transition: var(--transicao);
}

.quem-valor:hover {
    border-color: var(--cor-primaria);
    box-shadow: var(--sombra-suave);
}

.quem-valor ion-icon {
    font-size: 22px;
    color: var(--cor-primaria);
    flex-shrink: 0;
    margin-top: 2px;
}

.quem-valor strong {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 14px;
    font-weight: 600;
    color: var(--texto-primario);
    margin-bottom: 2px;
}

.quem-valor span {
    font-size: 13px;
    color: var(--texto-terciario);
    line-height: 1.4;
}

/* DNA grid */
.quem-dna-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.quem-dna-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 20px;
    text-align: center;
    background: var(--fundo-card);
    border: 1px solid var(--borda-card);
    border-radius: var(--raio-borda-medio);
    transition: var(--transicao);
}

.quem-dna-item:hover {
    border-color: var(--cor-primaria);
    transform: translateY(-2px);
    box-shadow: var(--sombra-suave);
}

.quem-dna-item ion-icon {
    font-size: 28px;
    color: var(--cor-primaria);
}

.quem-dna-item strong {
    font-family: var(--fonte-titulo);
    font-size: 15px;
    font-weight: 700;
    color: var(--texto-primario);
}

.quem-dna-item span {
    font-size: 13px;
    color: var(--texto-terciario);
    line-height: 1.5;
}

/* Evolução logos + texto */
.quem-evolucao-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 16px;
}

.quem-evolucao-img img {
    max-height: 320px;
    width: auto;
    border-radius: var(--raio-borda);
}

.quem-evolucao-texto p {
    font-size: var(--tamanho-pequeno);
    line-height: 1.7;
    color: var(--texto-secundario);
    margin-bottom: 12px;
    padding-left: 16px;
    border-left: 2px solid var(--borda);
    transition: var(--transicao);
}

.quem-evolucao-texto p:hover {
    border-left-color: var(--cor-primaria);
}

.quem-evolucao-texto p strong {
    color: var(--cor-primaria);
    font-weight: 700;
}

@media (max-width: 768px) {
    .quem-evolucao-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .quem-evolucao-img {
        text-align: center;
    }

    .quem-evolucao-img img {
        max-height: 300px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .quem-video-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .quem-video-conteudo .secao-titulo,
    .quem-video-conteudo .secao-eyebrow {
        text-align: center !important;
    }

    .quem-video-conteudo p {
        text-align: center;
    }

    .quem-metricas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .quem-proposito-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .quem-proposito-conteudo .secao-titulo,
    .quem-proposito-conteudo .secao-eyebrow {
        text-align: center !important;
    }

    .quem-proposito-conteudo p {
        text-align: center;
    }

    .quem-dna-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .quem-dna-grid {
        grid-template-columns: 1fr;
    }
}

/* ==============================
   13c-ufscar. PROVA SOCIAL UFSCAR
   ============================== */
.secao-ufscar {
    background: var(--fundo-primario);
}

.ufscar-card {
    background: linear-gradient(135deg, #1a1025 0%, #2a0830 50%, #1a1025 100%);
    border-radius: var(--raio-borda);
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
}

.ufscar-card-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    min-height: 420px;
}

.ufscar-conteudo {
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

.ufscar-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 6px 16px;
    background: rgba(242, 101, 34, 0.1);
    border: 1px solid rgba(242, 101, 34, 0.2);
    border-radius: var(--raio-borda-pill);
    font-family: var(--fonte-titulo);
    font-size: 12px;
    font-weight: 600;
    color: var(--cor-primaria);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ufscar-badge ion-icon {
    font-size: 14px;
}

.ufscar-logo img {
    height: 56px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.ufscar-titulo {
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-h3);
    font-weight: 400;
    color: #f0f0f0;
    line-height: 1.25;
    margin: 0;
}

.ufscar-titulo strong {
    font-weight: 700;
    color: var(--cor-primaria);
}

.ufscar-desc {
    font-size: var(--tamanho-pequeno);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.ufscar-desc strong {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
}

.ufscar-stats {
    display: flex;
    gap: 24px;
    margin-top: 4px;
}

.ufscar-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ufscar-stat-numero {
    font-family: var(--fonte-titulo);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--cor-primaria);
    line-height: 1;
}

.ufscar-stat-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: var(--fonte-titulo);
}

/* Photo side */
.ufscar-foto {
    position: relative;
    overflow: hidden;
}

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

.ufscar-foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #1a1025 0%, transparent 30%);
    pointer-events: none;
}

.ufscar-complemento {
    font-size: var(--tamanho-mini);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
    padding: 16px 40px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 768px) {
    .ufscar-card-inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .ufscar-conteudo {
        padding: 32px 24px;
        text-align: center;
        align-items: center;
    }

    .ufscar-foto {
        height: 200px;
        order: -1;
    }

    .ufscar-foto::after {
        background: linear-gradient(180deg, transparent 50%, #1a1025 100%);
    }

    .ufscar-stats {
        justify-content: center;
    }

    .ufscar-complemento {
        padding: 16px 24px 20px;
    }

    .ufscar-logo img {
        height: 44px;
    }
}

/* ==============================
   13c-caex. MONETIZAÇÃO CAEX + CALCULADORA
   ============================== */
.caex-mon-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.caex-mon-desc {
    font-size: var(--tamanho-corpo);
    line-height: 1.7;
    color: var(--texto-secundario);
    margin-bottom: 32px;
}

.caex-mon-desc strong {
    color: var(--texto-primario);
    font-weight: 600;
}

.caex-mon-exemplos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.caex-mon-exemplo {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: var(--fundo-primario);
    border: 1px solid var(--borda-card);
    border-radius: var(--raio-borda-medio);
    transition: var(--transicao);
}

.caex-mon-exemplo:hover {
    border-color: var(--cor-primaria);
    box-shadow: var(--sombra-suave);
}

.caex-mon-exemplo ion-icon {
    font-size: 24px;
    color: var(--cor-primaria);
    flex-shrink: 0;
    margin-top: 2px;
}

.caex-mon-exemplo strong {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 14px;
    font-weight: 600;
    color: var(--texto-primario);
    margin-bottom: 2px;
}

.caex-mon-exemplo span {
    font-size: 13px;
    color: var(--texto-terciario);
    line-height: 1.4;
}

/* Calculator card */
.caex-calc-card {
    background: var(--fundo-secundario);
    border: 1px solid var(--borda-card);
    border-radius: var(--raio-borda);
    padding: 32px;
    box-shadow: var(--sombra-media);
}

.caex-calc-header {
    text-align: center;
    margin-bottom: 28px;
}

.caex-calc-header ion-icon {
    font-size: 32px;
    color: var(--cor-primaria);
    margin-bottom: 8px;
}

.caex-calc-header h3 {
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-h4);
    font-weight: 700;
    color: var(--texto-primario);
    margin: 0 0 4px;
}

.caex-calc-header p {
    font-size: var(--tamanho-pequeno);
    color: var(--texto-terciario);
    margin: 0;
}

.caex-calc-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 28px;
}

.caex-calc-field label {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-primario);
    margin-bottom: 8px;
}

.caex-calc-field input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--borda);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.caex-calc-field input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cor-primaria);
    border: 3px solid var(--fundo-secundario);
    box-shadow: 0 2px 8px rgba(242, 101, 34, 0.3);
    cursor: pointer;
}

.caex-calc-field input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cor-primaria);
    border: 3px solid var(--fundo-secundario);
    box-shadow: 0 2px 8px rgba(242, 101, 34, 0.3);
    cursor: pointer;
}

.caex-calc-range-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: 11px;
    color: var(--texto-terciario);
}

.caex-calc-range-info strong {
    font-size: 14px;
    color: var(--cor-primaria);
    font-weight: 700;
}

/* Result */
.caex-calc-resultado {
    background: linear-gradient(135deg, rgba(242, 101, 34, 0.06), rgba(242, 101, 34, 0.02));
    border: 1px solid rgba(242, 101, 34, 0.15);
    border-radius: var(--raio-borda-medio);
    padding: 24px;
    text-align: center;
}

.caex-calc-resultado-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-terciario);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.caex-calc-resultado-valor {
    font-family: var(--fonte-titulo);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--cor-primaria);
    line-height: 1;
    margin-bottom: 12px;
}

.caex-calc-resultado-detalhe {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.caex-calc-resultado-detalhe span {
    font-size: 13px;
    color: var(--texto-secundario);
}

@media (max-width: 768px) {
    .caex-mon-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .caex-mon-conteudo .secao-titulo {
        text-align: center !important;
    }

    .caex-mon-desc {
        text-align: center;
    }

    .caex-calc-card {
        padding: 24px 20px;
    }
}

/* ==============================
   13c-mod. MODALIDADES DE CREDENCIAMENTO
   ============================== */
.secao-modalidades {
    background: linear-gradient(180deg, #fff8f5 0%, #ffffff 100%);
}

.mod-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 40px;
}

.mod-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 12px;
    border-radius: 14px;
    border: 2px solid var(--borda-card);
    background: transparent;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--texto-terciario);
    font-family: var(--fonte-titulo);
}

.mod-tab ion-icon {
    font-size: 28px;
}

.mod-tab-label {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    color: var(--texto-secundario);
}

.mod-tab-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--cor-primaria);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.25s, max-height 0.25s;
}

.mod-tab:hover {
    border-color: var(--cor-primaria);
}

.mod-tab-active {
    border-color: var(--cor-primaria);
    background: var(--fundo-secundario);
    color: var(--cor-primaria);
    box-shadow: 0 4px 20px rgba(242, 101, 34, 0.12);
}

.mod-tab-active .mod-tab-label {
    color: var(--texto-primario);
}

.mod-tab-active .mod-tab-badge {
    opacity: 1;
    max-height: 20px;
}

/* Panels */
.mod-panel {
    display: none;
}

.mod-panel-active {
    display: block;
    animation: eveFadeUp 0.35s ease-out;
}

.mod-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.mod-panel-video {
    width: 100%;
    border-radius: var(--raio-borda);
    overflow: hidden;
    background: var(--fundo-secundario);
    border: 1px solid var(--borda-card);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    aspect-ratio: 9 / 16;
    max-height: 580px;
}

.mod-panel-video iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.mod-panel-info {
    background: var(--fundo-secundario);
    border-radius: var(--raio-borda);
    padding: 32px 28px;
    border: 1px solid var(--borda-card);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}

.mod-panel-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--raio-borda-pill);
    background: rgba(242, 101, 34, 0.08);
    color: var(--cor-primaria);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.mod-panel-titulo {
    font-family: var(--fonte-titulo);
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 700;
    color: var(--texto-primario);
    margin: 0 0 6px;
    line-height: 1.3;
}

.mod-panel-sub {
    font-size: 15px;
    color: var(--cor-primaria);
    font-weight: 600;
    margin: 0 0 20px;
}

.mod-panel-desc {
    font-size: 15px;
    color: var(--texto-secundario);
    line-height: 1.7;
    margin: 0 0 24px;
}

.mod-panel-desc strong {
    color: var(--texto-primario);
    font-weight: 600;
}

.mod-panel-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mod-panel-lista li {
    font-size: 14px;
    color: var(--texto-primario);
    line-height: 1.5;
    padding-left: 30px;
    position: relative;
}

.mod-panel-lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(242, 101, 34, 0.08);
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 5l2 2 3.5-3.5' stroke='%23F26522' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.mod-panel-lista li strong {
    font-weight: 600;
}

@media (max-width: 768px) {
    .mod-tabs {
        grid-template-columns: repeat(2, 1fr);
    }

    .mod-panel-grid {
        grid-template-columns: 1fr;
    }

    .mod-panel-video {
        max-height: 480px;
    }

    .mod-tab {
        padding: 14px 8px;
    }

    .mod-tab ion-icon {
        font-size: 22px;
    }

    .mod-tab-label {
        font-size: 12px;
    }
}

/* ==============================
   13c-tour. TOUR VISUAL DA PLATAFORMA
   ============================== */
.secao-tour {
    padding-top: 32px;
    padding-bottom: 0;
}

.secao-tour > .container:first-child {
    margin-bottom: 56px;
}

.tour-item {
    padding: 64px 0;
    position: relative;
    overflow: hidden;
}

.tour-item:nth-child(odd) {
    background: var(--fundo-primario);
}

.tour-item:nth-child(even) {
    background: var(--fundo-secundario);
}

.tour-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 56px;
    align-items: center;
}

.tour-item-invertido .tour-grid {
    grid-template-columns: 1.2fr 1fr;
    direction: rtl;
}

.tour-item-invertido .tour-grid > * {
    direction: ltr;
}

.tour-numero {
    font-family: var(--fonte-titulo);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, rgba(242, 101, 34, 0.12), rgba(242, 101, 34, 0.04));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.tour-titulo {
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-h3);
    font-weight: 700;
    color: var(--texto-primario);
    margin-bottom: 16px;
    line-height: 1.25;
}

.tour-descricao {
    font-size: var(--tamanho-corpo);
    line-height: 1.7;
    color: var(--texto-secundario);
    margin-bottom: 24px;
}

.tour-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tour-lista li {
    font-size: var(--tamanho-pequeno);
    line-height: 1.5;
    color: var(--texto-secundario);
    padding-left: 28px;
    position: relative;
}

.tour-lista li ion-icon {
    position: absolute;
    left: 0;
    top: 2px;
}

.tour-descricao strong {
    color: var(--texto-primario);
    font-weight: 600;
}

.tour-lista li strong {
    color: var(--texto-primario);
    font-weight: 600;
}

.tour-lista li ion-icon {
    color: var(--cor-verde);
    font-size: 18px;
}

.tour-imagem {
    position: relative;
}

.tour-imagem img {
    width: 100%;
    height: auto;
    border-radius: var(--raio-borda);
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12))
            drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tour-item:hover .tour-imagem img {
    transform: scale(1.02);
}

/* Stacked images — principal + secondary smaller */
.tour-imagem-stacked {
    position: relative;
}

.tour-imagem-stacked .tour-img-principal {
    width: 100%;
    height: auto;
    border-radius: var(--raio-borda);
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
    position: relative;
    z-index: 1;
}

.tour-imagem-stacked .tour-img-secundaria {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 55%;
    height: auto;
    border-radius: var(--raio-borda-medio);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 3px solid var(--fundo-secundario);
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tour-item:hover .tour-img-secundaria {
    transform: translate(-4px, -4px) scale(1.03);
}

@media (max-width: 768px) {
    .tour-imagem-stacked .tour-img-secundaria {
        width: 50%;
        bottom: -12px;
        right: -8px;
    }
}

/* App tour variant — phone mockups side by side */
.tour-grid-app {
    grid-template-columns: 1fr 1fr;
}

.tour-item-invertido .tour-grid-app {
    grid-template-columns: 1fr 1fr;
}

.tour-imagem-app {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 16px;
    perspective: 800px;
}

.tour-imagem-app img {
    width: 44%;
    max-width: 200px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    filter: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tour-imagem-app img:first-child {
    transform: rotate(-3deg);
}

.tour-imagem-app .tour-app-secondary {
    transform: rotate(3deg) translateY(20px);
    opacity: 0.85;
}

.tour-item:hover .tour-imagem-app img:first-child {
    transform: rotate(-1deg) translateY(-4px);
}

.tour-item:hover .tour-imagem-app .tour-app-secondary {
    transform: rotate(1deg) translateY(14px);
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .secao-tour > .container:first-child {
        margin-bottom: 32px;
    }

    .tour-item {
        padding: 40px 0;
    }

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

    .tour-item-invertido .tour-grid {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .tour-texto {
        text-align: center;
    }

    .tour-lista li {
        text-align: left;
    }

    .tour-numero {
        font-size: 3rem;
    }

    .tour-imagem img {
        max-width: 100%;
    }

    .tour-grid-app {
        grid-template-columns: 1fr;
    }

    .tour-item-invertido .tour-grid-app {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .tour-imagem-app {
        gap: 12px;
    }

    .tour-imagem-app img {
        width: 42%;
        max-width: 160px;
        border-radius: 16px;
    }
}

/* ==============================
   13c-pre. SEÇÃO IA SITE BUILDER
   ============================== */
@keyframes sbScanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}
@keyframes sbCursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
@keyframes sbGlowPulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

.secao-site-builder {
    position: relative;
    background: linear-gradient(160deg, #0a0a0f 0%, #12101a 40%, #1a1025 100%);
    padding: 100px 0 80px;
    overflow: hidden;
}

/* Subtle grid texture */
.sb-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(242, 101, 34, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 101, 34, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 30% 50%, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 50%, black 0%, transparent 70%);
    pointer-events: none;
}

/* Background gradient blobs */
.sb-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 40% 50% at 25% 50%, rgba(242, 101, 34, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 35% 40% at 75% 30%, rgba(160, 80, 220, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

/* Scanline sweep effect */
.sb-scanline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(242, 101, 34, 0.04) 50%, transparent 100%);
    animation: sbScanline 6s ease-in-out infinite;
    pointer-events: none;
}

.sb-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
}

/* ── Left: Visual ── */
.sb-visual {
    position: relative;
}

.sb-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 101, 34, 0.15) 0%, rgba(242, 101, 34, 0.05) 40%, transparent 65%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: sbGlowPulse 4s ease-in-out infinite;
    filter: blur(40px);
    pointer-events: none;
}

.sb-mockup-frame {
    position: relative;
}

.sb-mockup-frame img {
    width: 100%;
    height: auto;
    border-radius: var(--raio-borda);
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5))
            drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4))
            drop-shadow(0 0 40px rgba(242, 101, 34, 0.08));
}

/* Prompt bar overlay at bottom of mockup */
.sb-prompt-bar {
    position: absolute;
    bottom: 18%;
    left: 8%;
    right: 8%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(10, 10, 15, 0.85);
    border: 1px solid rgba(242, 101, 34, 0.25);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(242, 101, 34, 0.08);
}

.sb-prompt-icon {
    color: var(--cor-primaria);
    font-size: 18px;
    display: flex;
    flex-shrink: 0;
}

.sb-prompt-text {
    font-family: var(--fonte-titulo);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.sb-prompt-cursor {
    width: 2px;
    height: 16px;
    background: var(--cor-primaria);
    flex-shrink: 0;
    animation: sbCursorBlink 0.8s step-end infinite;
}

/* ── Right: Content ── */
.sb-conteudo {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    font-family: var(--fonte-titulo);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cor-primaria);
}

.sb-eyebrow-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cor-primaria);
    box-shadow: 0 0 12px var(--cor-primaria), 0 0 24px rgba(242, 101, 34, 0.4);
    animation: evePulse 2s ease-in-out infinite;
}

.sb-titulo {
    font-family: var(--fonte-titulo);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: #f0f0f0;
    margin: 0;
}

.sb-titulo-destaque {
    background: linear-gradient(135deg, var(--cor-primaria) 0%, #ff8a5c 50%, #ffc097 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sb-descricao {
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.5);
    max-width: 520px;
}

.sb-descricao strong {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

/* Feature cards */
.sb-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--raio-borda-medio);
    transition: var(--transicao);
}

.sb-feature:hover {
    background: rgba(242, 101, 34, 0.06);
    border-color: rgba(242, 101, 34, 0.2);
    transform: translateX(4px);
}

.sb-feature-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(242, 101, 34, 0.1);
    border-radius: 10px;
    color: var(--cor-primaria);
    font-size: 20px;
    flex-shrink: 0;
}

.sb-feature-title {
    font-family: var(--fonte-titulo);
    font-size: 15px;
    font-weight: 600;
    color: #f0f0f0;
    margin-bottom: 4px;
}

.sb-feature-desc {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.45);
}

/* Responsive */
@media (max-width: 768px) {
    .secao-site-builder {
        padding: 64px 0 56px;
    }

    .sb-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sb-conteudo {
        text-align: center;
        align-items: center;
        order: -1;
    }

    .sb-descricao {
        max-width: 100%;
        text-align: center;
    }

    .sb-titulo {
        text-align: center;
    }

    .sb-feature {
        text-align: left;
    }

    .sb-prompt-bar {
        bottom: 14%;
        left: 4%;
        right: 4%;
        padding: 8px 12px;
    }

    .sb-prompt-text {
        font-size: 11px;
    }

    .sb-glow {
        width: 280px;
        height: 280px;
    }

    .sb-scanline {
        display: none;
    }
}

/* ==============================
   13c. SEÇÃO E.V.E. — CHAT INTERATIVO
   ============================== */
@keyframes evePulse {
    0%, 100% { box-shadow: 0 0 20px rgba(242,101,34,0.1), 0 0 40px rgba(242,101,34,0.05); }
    50% { box-shadow: 0 0 30px rgba(242,101,34,0.2), 0 0 60px rgba(242,101,34,0.08); }
}
@keyframes eveTyping {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1); }
}
@keyframes eveFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes eveShimmer {
    0% { opacity: 0; }
    50% { opacity: 0.5; }
    100% { opacity: 0; }
}
@keyframes eveWave {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(1); }
}

.secao-eve {
    position: relative;
    overflow: hidden;
    padding: 80px 0 48px;
}

.eve-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 50%, rgba(242,101,34,0.04) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 80% 30%, rgba(242,101,34,0.03) 0%, transparent 70%);
    pointer-events: none;
}

.eve-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.eve-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.eve-particles span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cor-primaria);
    opacity: 0;
    animation: eveShimmer 3s ease-in-out infinite;
}

.eve-particles span:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; animation-duration: 3s; }
.eve-particles span:nth-child(2) { top: 33%; left: 30%; animation-delay: 0.8s; animation-duration: 4s; width: 8px; height: 8px; }
.eve-particles span:nth-child(3) { top: 51%; left: 50%; animation-delay: 1.6s; animation-duration: 3.5s; }
.eve-particles span:nth-child(4) { top: 69%; left: 70%; animation-delay: 2.4s; animation-duration: 4.5s; width: 10px; height: 10px; }
.eve-particles span:nth-child(5) { top: 87%; left: 90%; animation-delay: 3.2s; animation-duration: 3s; }

.eve-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 40px;
}

/* Left content */
.eve-conteudo {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.eve-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    background: linear-gradient(135deg, rgba(242,101,34,0.08), rgba(242,101,34,0.03));
    border: 1px solid rgba(242,101,34,0.15);
    border-radius: var(--raio-borda-pill);
    padding: 8px 18px;
    font-family: var(--fonte-titulo);
    font-size: 13px;
    font-weight: 500;
    color: var(--cor-primaria);
    letter-spacing: 0.04em;
}

.eve-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cor-primaria);
    box-shadow: 0 0 8px var(--cor-primaria);
    animation: evePulse 2s ease-in-out infinite;
}

.eve-titulo {
    text-align: left;
    margin-bottom: 0;
}

.eve-nome-destaque {
    background: var(--gradiente-primario);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.eve-fullname {
    font-family: var(--fonte-titulo);
    font-size: clamp(14px, 1.6vw, 18px);
    font-weight: 400;
    color: var(--texto-terciario);
    letter-spacing: 0.08em;
    margin-top: -16px;
}

.eve-descricao {
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.7;
    color: var(--texto-secundario);
    max-width: 500px;
}

.eve-acoes {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.eve-cta {
    box-shadow: 0 4px 20px rgba(242,101,34,0.18);
}

.eve-cta:hover {
    box-shadow: 0 8px 32px rgba(242,101,34,0.3);
}

.eve-whatsapp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(37,211,102,0.06);
    border: 1px solid rgba(37,211,102,0.2);
    border-radius: var(--raio-borda-pill);
    font-size: 13px;
    font-weight: 500;
    color: #1a9e4a;
    font-family: var(--fonte-titulo);
    text-decoration: none;
    transition: var(--transicao);
}

.eve-whatsapp-badge:hover {
    background: rgba(37,211,102,0.12);
    border-color: rgba(37,211,102,0.35);
    transform: translateY(-1px);
    color: #1a9e4a;
}

/* Chat window */
.eve-chat-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}

.eve-chat-glow {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242,101,34,0.08), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(60px);
    animation: evePulse 4s ease-in-out infinite;
}

.eve-chat-circle-outer {
    position: absolute;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(242,101,34,0.06);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.eve-chat-circle-inner {
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px dashed rgba(242,101,34,0.05);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.eve-chat {
    width: 100%;
    max-width: 420px;
    background: var(--fundo-secundario);
    border: 1px solid var(--borda-card);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
    position: relative;
    z-index: 2;
    transition: box-shadow 0.3s, transform 0.3s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.eve-chat:hover {
    box-shadow: 0 16px 56px rgba(242,101,34,0.12), 0 4px 12px rgba(0,0,0,0.06);
    transform: translateY(-4px);
    color: inherit;
}

.eve-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--borda-card);
    background: var(--fundo-primario);
}

.eve-chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--raio-borda-medio);
    overflow: hidden;
    border: 2px solid rgba(242,101,34,0.25);
    animation: evePulse 3s ease-in-out infinite;
    flex-shrink: 0;
}

.eve-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eve-chat-header-info {
    flex: 1;
}

.eve-chat-header-name {
    font-family: var(--fonte-titulo);
    font-size: 15px;
    font-weight: 600;
    color: var(--texto-primario);
}

.eve-chat-header-status {
    font-size: 11px;
    color: var(--cor-primaria);
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--fonte-titulo);
}

.eve-chat-online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cor-primaria);
    box-shadow: 0 0 6px var(--cor-primaria);
}

/* Audio wave */
.eve-audio-wave {
    display: flex;
    gap: 3px;
    align-items: center;
    height: 24px;
}

.eve-audio-wave span {
    width: 3px;
    height: 20px;
    border-radius: 2px;
    background: var(--cor-primaria);
    animation: eveWave 1s ease-in-out infinite;
    transform-origin: center;
}

.eve-audio-wave span:nth-child(1) { animation-delay: 0s; }
.eve-audio-wave span:nth-child(2) { animation-delay: 0.1s; }
.eve-audio-wave span:nth-child(3) { animation-delay: 0.2s; }
.eve-audio-wave span:nth-child(4) { animation-delay: 0.3s; }
.eve-audio-wave span:nth-child(5) { animation-delay: 0.4s; }
.eve-audio-wave span:nth-child(6) { animation-delay: 0.5s; }
.eve-audio-wave span:nth-child(7) { animation-delay: 0.6s; }

/* Messages */
.eve-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    min-height: 300px;
    background: var(--fundo-primario);
}

.eve-msg {
    max-width: 85%;
    padding: 10px 16px;
    font-size: 13px;
    line-height: 1.5;
    animation: eveFadeUp 0.5s ease-out both;
}

.eve-msg-user {
    align-self: flex-end;
    background: #f0f0f0;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px 4px 16px 16px;
    color: var(--texto-secundario);
}

.eve-msg-eve {
    align-self: flex-start;
    background: linear-gradient(135deg, rgba(242,101,34,0.08), rgba(242,101,34,0.03));
    border: 1px solid rgba(242,101,34,0.18);
    border-radius: 4px 16px 16px 16px;
    color: var(--texto-primario);
}

.eve-msg-eve-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--cor-primaria);
    margin-bottom: 4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--fonte-titulo);
}

/* Typing indicator */
.eve-typing {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 4px 0 4px 4px;
}

.eve-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cor-primaria);
    animation: eveTyping 1.2s ease-in-out infinite;
}

.eve-typing span:nth-child(1) { animation-delay: 0s; }
.eve-typing span:nth-child(2) { animation-delay: 0.2s; }
.eve-typing span:nth-child(3) { animation-delay: 0.4s; }

/* Input bar */
.eve-chat-input-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--borda-card);
    background: var(--fundo-secundario);
}

.eve-chat-input-field {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--fundo-primario);
    border: 1px solid rgba(0,0,0,0.06);
    font-size: 13px;
    color: var(--texto-terciario);
    font-family: var(--fonte-corpo);
}

.eve-chat-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--gradiente-primario);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 16px;
}

/* Feature badges */
.eve-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.eve-feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--fundo-secundario);
    border: 1px solid var(--borda-card);
    border-radius: var(--raio-borda-pill);
    font-size: 14px;
    font-weight: 500;
    color: var(--texto-primario);
    font-family: var(--fonte-titulo);
    transition: var(--transicao);
    cursor: default;
    white-space: nowrap;
}

.eve-feature-badge ion-icon {
    color: var(--cor-primaria);
    font-size: 16px;
}

.eve-feature-badge:hover {
    border-color: rgba(242,101,34,0.3);
    box-shadow: 0 4px 16px rgba(242,101,34,0.1);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .eve-container {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }

    .eve-conteudo {
        align-items: center;
    }

    .eve-titulo {
        text-align: center;
    }

    .eve-fullname {
        margin-top: -12px;
    }

    .eve-descricao {
        text-align: center;
        max-width: 100%;
    }

    .eve-acoes {
        justify-content: center;
    }

    .eve-chat {
        max-width: 340px;
        border-radius: 16px;
    }

    .eve-chat-messages {
        min-height: 260px;
        padding: 14px;
    }

    .eve-chat-header {
        padding: 12px 16px;
    }

    .eve-chat-input-bar {
        padding: 10px 14px;
    }

    .eve-chat-glow,
    .eve-chat-circle-outer,
    .eve-chat-circle-inner {
        display: none;
    }

    .eve-particles {
        display: none;
    }

    .eve-features {
        gap: 10px;
    }

    .eve-feature-badge {
        font-size: 13px;
        padding: 8px 16px;
    }

    .secao-eve {
        padding: 56px 0 40px;
    }
}

/* ==============================
   14. FAQ ACCORDION
   ============================== */
.secao-faq {
    padding: 32px 0 var(--espacamento-secao);
}

.faq-busca {
    max-width: 500px;
    margin: 0 auto 32px;
    position: relative;
}

.faq-busca-input {
    width: 100%;
    padding: 14px 20px 14px 48px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-borda-pill);
    font-family: var(--fonte-corpo);
    font-size: var(--tamanho-corpo);
    background: var(--fundo-secundario);
    color: var(--texto-primario);
    transition: var(--transicao);
}

.faq-busca-input:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-light);
}

.faq-busca-icone {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--texto-terciario);
    font-size: 20px;
}

.faq-lista {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--borda);
}

.faq-item[open] .faq-pergunta::after {
    transform: rotate(180deg);
}

.faq-pergunta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-corpo);
    font-weight: 500;
    color: var(--texto-primario);
    cursor: pointer;
    list-style: none;
    transition: var(--transicao-rapida);
}

.faq-pergunta::-webkit-details-marker {
    display: none;
}

.faq-pergunta::after {
    content: '';
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: var(--transicao);
}

.faq-pergunta:hover {
    color: var(--cor-primaria);
}

.faq-resposta {
    padding: 0 0 20px;
    color: var(--texto-secundario);
    line-height: 1.7;
    font-size: var(--tamanho-pequeno);
}

.faq-oculto {
    display: none;
}

/* ==============================
   15. FUNCIONALIDADES GRID
   ============================== */
.funcionalidades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.funcionalidades-dots {
    display: none;
}

.funcionalidade-card {
    display: flex;
    gap: 16px;
    padding: 24px;
    background: var(--fundo-card);
    border: 1px solid var(--borda-card);
    border-radius: var(--raio-borda-medio);
    transition: var(--transicao);
}

.funcionalidade-card:hover {
    border-color: var(--cor-primaria);
    box-shadow: var(--sombra-suave);
}

.funcionalidade-icone {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-primaria-light);
    border-radius: var(--raio-borda-pequeno);
    color: var(--cor-primaria);
    font-size: 24px;
}

.funcionalidade-titulo {
    font-size: var(--tamanho-corpo);
    font-weight: 600;
    margin-bottom: 6px;
}

.funcionalidade-descricao {
    font-size: var(--tamanho-pequeno);
    color: var(--texto-secundario);
    line-height: 1.5;
}

/* ==============================
   16. MÉTRICAS / CONTADORES
   ============================== */
.secao-metricas {
    padding: 60px 0;
    background: var(--fundo-secundario);
}

.metricas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    text-align: center;
}

.metrica-item {
    padding: 24px;
}

.metrica-numero {
    font-family: var(--fonte-titulo);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--cor-primaria);
    line-height: 1;
    margin-bottom: 8px;
}

.metrica-label {
    font-size: var(--tamanho-pequeno);
    color: var(--texto-secundario);
    font-weight: 500;
}

/* ==============================
   17. TABELA COMPARATIVA
   ============================== */
.comparativo-wrapper {
    max-width: 900px;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--raio-borda);
    box-shadow: var(--sombra-suave);
}

.comparativo-tabela {
    width: 100%;
    min-width: 540px;
    border-collapse: collapse;
}

.comparativo-tabela thead {
    background: var(--gradiente-heroi);
    color: var(--texto-sobre-escuro);
}

.comparativo-tabela th {
    padding: 16px 20px;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    text-align: left;
}

.comparativo-tabela td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--borda);
    font-size: var(--tamanho-pequeno);
}

.comparativo-tabela tr:last-child td {
    border-bottom: none;
}

.comparativo-tabela tbody tr {
    background: var(--fundo-card);
    transition: var(--transicao-rapida);
}

.comparativo-tabela tbody tr:hover {
    background: var(--cor-primaria-light);
}

.comparativo-check {
    color: var(--cor-verde);
    font-size: 1.2rem;
}

.comparativo-x {
    color: var(--cor-erro);
    font-size: 1.2rem;
}

.comparativo-destaque {
    font-weight: 700;
    color: var(--cor-primaria);
}

/* ==============================
   18. HUB CRUZADO (Cross-sell)
   ============================== */
.secao-hub {
    padding: var(--espacamento-secao) 0;
    background: var(--gradiente-heroi);
    color: var(--texto-sobre-escuro);
}

.secao-hub .secao-titulo {
    color: var(--texto-sobre-escuro);
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 40px;
}

.hub-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--raio-borda-medio);
    color: var(--texto-sobre-escuro);
    transition: var(--transicao);
}

.hub-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.hub-item img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.hub-item-nome {
    font-weight: 600;
    font-size: var(--tamanho-pequeno);
}

/* ==============================
   19. MODAL DE LEADS
   ============================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: var(--transicao);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacamento-interno);
}

.modal-overlay.ativo {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--fundo-secundario);
    border-radius: var(--raio-borda);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px;
    position: relative;
    transform: translateY(20px) scale(0.95);
    transition: var(--transicao);
    box-shadow: var(--sombra-forte);
}

.modal-overlay.ativo .modal {
    transform: translateY(0) scale(1);
}

.modal-fechar {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fundo-primario);
    border: 1px solid var(--borda);
    cursor: pointer;
    transition: var(--transicao);
    font-size: 18px;
    color: var(--texto-secundario);
}

.modal-fechar:hover {
    background: var(--cor-erro);
    border-color: var(--cor-erro);
    color: #FFFFFF;
}

.modal-titulo {
    font-size: var(--tamanho-h3);
    margin-bottom: 8px;
}

.modal-subtitulo {
    font-size: var(--tamanho-pequeno);
    color: var(--texto-secundario);
    margin-bottom: 24px;
}

.formulario-grupo {
    margin-bottom: 16px;
}

.formulario-label {
    display: block;
    font-size: var(--tamanho-pequeno);
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--texto-primario);
}

.formulario-input,
.formulario-select,
.formulario-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-borda-pequeno);
    font-family: var(--fonte-corpo);
    font-size: var(--tamanho-corpo);
    background: var(--fundo-primario);
    color: var(--texto-primario);
    transition: var(--transicao);
}

.formulario-input:focus,
.formulario-select:focus,
.formulario-textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-light);
}

.formulario-textarea {
    resize: vertical;
    min-height: 100px;
}

.formulario-erro {
    font-size: var(--tamanho-mini);
    color: var(--cor-erro);
    margin-top: 4px;
    display: none;
}

.formulario-grupo.invalido .formulario-input,
.formulario-grupo.invalido .formulario-select,
.formulario-grupo.invalido .formulario-textarea {
    border-color: var(--cor-erro);
}

.formulario-grupo.invalido .formulario-erro {
    display: block;
}

.formulario-sucesso {
    text-align: center;
    padding: 32px 0;
    display: none;
}

.formulario-sucesso.ativo {
    display: block;
}

.formulario-sucesso ion-icon {
    font-size: 48px;
    color: var(--cor-sucesso);
    margin-bottom: 16px;
}

/* ==============================
   20. FOOTER
   ============================== */
.footer {
    background: var(--fundo-primario);
    color: var(--texto-primario);
    padding: 60px 0 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo {
    max-width: 200px;
}

.footer-logo img {
    width: 160px;
    height: auto;
    margin-bottom: 16px;
}

.footer-descricao {
    font-size: var(--tamanho-pequeno);
    color: var(--texto-secundario);
    line-height: 1.6;
    margin-bottom: 20px;
}

.footer-social {
    display: flex;
    gap: 12px;
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: var(--texto-secundario);
    transition: var(--transicao);
    font-size: 18px;
}

.footer-social-link:hover {
    background: var(--cor-primaria);
    color: #FFFFFF;
}

.footer-titulo {
    font-size: var(--tamanho-pequeno);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: var(--texto-primario);
}

.footer-link {
    display: block;
    padding: 6px 0;
    font-size: var(--tamanho-pequeno);
    color: var(--texto-secundario);
    transition: var(--transicao-rapida);
}

.footer-link:hover {
    color: var(--cor-primaria);
    padding-left: 4px;
}

.footer-divisor {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
}

.footer-rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-copyright {
    font-size: var(--tamanho-mini);
    color: var(--texto-secundario);
}

.footer-legal {
    display: flex;
    gap: 24px;
}

.footer-legal a {
    font-size: var(--tamanho-mini);
    color: var(--texto-secundario);
}

.footer-legal a:hover {
    color: var(--cor-primaria);
}

/* ==============================
   21. BOTÃO VOLTAR AO TOPO
   ============================== */
.botao-topo {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: var(--z-topo);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--cor-primaria);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    box-shadow: var(--sombra-media);
    transition: var(--transicao);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

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

.botao-topo:hover {
    background: var(--cor-primaria-hover);
    transform: translateY(-4px);
    box-shadow: var(--sombra-forte);
}

.botao-topo ion-icon {
    font-size: 22px;
}

/* ==============================
   22. ANIMAÇÕES
   ============================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulsar {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(242, 101, 34, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 40px rgba(242, 101, 34, 0.5);
    }
}

/* Classe aplicada pelo IntersectionObserver */
[data-animacao] {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-animacao='fade-up'] {
    transform: translateY(30px);
}

[data-animacao='fade-left'] {
    transform: translateX(-30px);
}

[data-animacao='fade-right'] {
    transform: translateX(30px);
}

[data-animacao].animado {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

/* ==============================
   23. LOADER DE PÁGINA
   ============================== */
.loader-pagina {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--fundo-primario);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}

.loader-pagina.oculto {
    opacity: 0;
    pointer-events: none;
}

.loader-pagina img {
    width: 80px;
    animation: pulsar 2s ease-in-out infinite;
}

.loader-barra {
    width: 120px;
    height: 3px;
    background: var(--borda);
    border-radius: 2px;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
}

.loader-barra::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradiente-primario);
    animation: brilho-barra 1.5s ease-in-out infinite;
}

@keyframes brilho-barra {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ==============================
   24. SKIP-TO-CONTENT
   ============================== */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    padding: 12px 24px;
    background: var(--cor-primaria);
    color: #FFFFFF;
    border-radius: var(--raio-borda-pequeno);
    font-weight: 600;
    z-index: 10000;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 16px;
}

/* ==============================
   25. MEDIA QUERIES (Desktop-first)
   ============================== */

/* Tablet landscape / laptop pequeno */
@media (max-width: 1024px) {
    .cards-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cards-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .heroi-container {
        gap: 32px;
    }

    /* Hub — tablet */
    .heroi-hub {
        max-width: 380px;
        min-height: 440px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Jornada — tablet: scroll horizontal */
    .jornada {
        padding: 60px 0 48px;
    }

    .jornada-timeline-wrap {
        padding: 0 24px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .jornada-timeline-wrap::-webkit-scrollbar {
        display: none;
    }

    .jornada-steps {
        grid-template-columns: repeat(7, 140px);
        min-width: max-content;
    }

    .jornada-progress-track {
        min-width: 980px;
    }

    .jornada-detail {
        padding: 0 24px;
    }

    .jornada-card {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 36px 32px;
    }

    .jornada-card-right {
        min-height: 120px;
        padding: 24px;
    }
}

/* Transição desktop → mobile */
@media (max-width: 968px) {
    .navbar-menu {
        display: none;
    }

    .navbar-acoes .navbar-login,
    .navbar-acoes .navbar-cta {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .heroi {
        padding: 120px 0 60px;
        overflow-x: clip;
        overflow-y: visible;
    }

    .heroi-container {
        flex-direction: column;
        text-align: center;
    }

    .heroi-conteudo {
        max-width: 100%;
    }

    .heroi-subtitulo {
        margin: 0 auto 32px;
    }

    .heroi-acoes {
        justify-content: center;
    }

    .heroi-hub {
        max-width: 300px;
        min-height: 400px;
        margin: 0 auto;
    }

    .hub-circle-outer, .hub-circle-inner {
        display: none;
    }

    .hub-centro {
        top: 80px;
        width: 56px;
        height: 56px;
    }

    .hub-centro img {
        width: 44px;
        height: 44px;
    }

    .hub-node img {
        width: 36px;
        height: 36px;
        padding: 5px;
        border-radius: 10px;
    }

    .hub-node span {
        font-size: 8px;
    }

    .hub-eve-chat {
        top: 160px;
        width: 260px;
    }

    .hub-eve-messages {
        height: 76px;
    }

    .hub-node[data-hub="0"] { top: 80px; left: calc(50% + 110px); }
    .hub-node[data-hub="1"] { top: 30px; left: calc(50% + 85px); }
    .hub-node[data-hub="2"] { top: 0px;  left: calc(50% + 30px); }
    .hub-node[data-hub="3"] { top: 0px;  left: calc(50% - 30px); }
    .hub-node[data-hub="4"] { top: 30px; left: calc(50% - 85px); }
    .hub-node[data-hub="5"] { top: 80px; left: calc(50% - 110px); }
    .hub-node[data-hub="6"] { top: 120px; left: calc(50% - 75px); }

    .heroi-imagem {
        max-width: 320px;
    }

}

/* Tablet portrait / mobile */
@media (max-width: 768px) {
    :root {
        --espacamento-secao: 48px;
    }

    .cards-grid-3,
    .cards-grid-4 {
        grid-template-columns: 1fr;
    }

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

    /* Mobile carousel: show 3 cards per page */
    .funcionalidades-carousel .funcionalidades-grid {
        gap: 12px;
    }

    .funcionalidades-carousel .funcionalidade-card[data-func-hidden="true"] {
        display: none;
    }

    .funcionalidades-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
    }

    .func-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        background: var(--borda);
        cursor: pointer;
        transition: var(--transicao);
        padding: 0;
    }

    .func-dot.func-dot-active {
        background: var(--cor-primaria);
        width: 24px;
        border-radius: 4px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .footer-logo {
        max-width: none;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

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

    .footer-link:hover {
        padding-left: 0;
    }

    .footer-rodape {
        flex-direction: column;
        text-align: center;
    }

    .footer-legal {
        justify-content: center;
    }

    .metricas-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .comparativo-wrapper {
        overflow-x: visible;
    }

    .comparativo-tabela {
        min-width: 0;
        font-size: var(--tamanho-pequeno);
    }

    .comparativo-tabela thead {
        display: none;
    }

    .comparativo-tabela tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .comparativo-tabela tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 16px;
        border-radius: var(--raio-borda-medio);
        border: 1px solid var(--borda-card);
        background: var(--fundo-card);
    }

    .comparativo-tabela tbody tr:hover {
        background: var(--cor-primaria-light);
    }

    .comparativo-tabela td {
        padding: 0;
        border-bottom: none;
        font-size: var(--tamanho-pequeno);
    }

    /* First column spans full width as label */
    .comparativo-tabela td:first-child {
        grid-column: 1 / -1;
        font-weight: 700;
        font-family: var(--fonte-titulo);
        color: var(--texto-primario);
        font-size: var(--tamanho-corpo);
        padding-bottom: 4px;
        border-bottom: 1px solid var(--borda);
        margin-bottom: 4px;
    }

    /* Second column: 4.events */
    .comparativo-tabela td:nth-child(2)::before {
        content: '4.events';
        display: block;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--cor-primaria);
        margin-bottom: 2px;
        font-family: var(--fonte-titulo);
    }

    /* Third column: Outras */
    .comparativo-tabela td:nth-child(3)::before {
        content: 'Outras';
        display: block;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--texto-terciario);
        margin-bottom: 2px;
        font-family: var(--fonte-titulo);
    }

    .hub-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal {
        padding: 24px;
    }

    .secao-metodologia {
        padding: 56px 0 48px;
    }

    .metodologia-logos {
        gap: 10px;
    }

    .metodologia-logo-item {
        padding: 10px 14px;
    }

    .metodologia-logo-item img {
        height: 24px;
        max-width: 90px;
    }

    .metodologia-prova {
        margin-top: 40px;
        padding-top: 32px;
    }

    .case-card {
        flex: 0 0 280px;
    }

    #cases-prev {
        left: 2px;
    }

    #cases-next {
        right: 2px;
    }

    .carrossel-seta {
        width: 36px;
        height: 36px;
    }

    .cases-carrossel {
        padding: 8px 24px;
    }

    /* Jornada — mobile: timeline vertical */
    .jornada-header {
        margin-bottom: 32px;
    }

    .jornada-timeline-wrap {
        padding: 0 24px;
        overflow-x: visible;
    }

    .jornada-progress-track {
        position: absolute;
        left: 44px;
        top: 0;
        bottom: 0;
        width: 3px;
        height: 100%;
        min-width: unset;
    }

    .jornada-progress-fill {
        width: 100% !important;
        height: 0;
        transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        background: linear-gradient(180deg, #FF4F01, #FF8C42);
    }

    .jornada-steps {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: unset;
    }

    .jornada-node {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 8px 0;
        text-align: left;
    }

    .jornada-dot-wrap {
        width: 32px;
        height: 32px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .secao-btg {
        padding: 56px 0;
    }

    .jornada-dot {
        width: 12px;
        height: 12px;
    }

    .jornada-node.active .jornada-dot {
        width: 14px;
        height: 14px;
    }

    .jornada-step-num {
        display: none;
    }

    .jornada-step-tag {
        font-size: 9px;
        padding: 3px 8px;
        margin-bottom: 0;
    }

    .jornada-step-label {
        font-size: 13px;
        max-width: none;
        font-weight: 600;
    }

    .jornada-detail {
        padding: 0 24px;
        margin-top: 32px;
    }

    .jornada-card-left {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .jornada-card-icon {
        width: 64px;
        height: 64px;
        padding: 0;
    }

    .jornada-card-title {
        font-size: 1.3rem;
    }

    .jornada-metric-value {
        font-size: 1.8rem;
    }
}

/* Mobile intermediário */
@media (max-width: 600px) {
    .heroi-acoes {
        flex-direction: column;
        align-items: stretch;
    }

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

    .btg-container {
        flex-direction: column;
        text-align: center;
    }

    .btg-titulo,
    .btg-sub {
        text-align: center;
    }

    .btg-descricao {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .btg-acoes {
        justify-content: center;
    }

    .btg-video {
        flex: none;
    }

    .btg-video-wrapper {
        width: 240px;
        margin: 0 auto;
    }
}

/* Mobile pequeno */
@media (max-width: 480px) {
    .metricas-grid {
        grid-template-columns: 1fr;
    }

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

    .clientes-marquee img {
        height: 28px;
    }

    .heroi-titulo {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .navbar-logo img {
        height: 28px;
    }

    /* Jornada — mobile pequeno */
    .jornada {
        padding: 48px 0 40px;
    }

    .jornada-timeline-wrap {
        padding: 0 16px;
    }

    .jornada-progress-track {
        left: 36px;
    }

    .jornada-detail {
        padding: 0 16px;
        margin-top: 24px;
    }

    .jornada-card {
        padding: 24px 20px;
        gap: 24px;
        border-radius: 16px;
    }

    .jornada-card-desc {
        font-size: 0.9rem;
    }

    .jornada-counter {
        margin-top: 24px;
    }
}

/* ==============================
   26. REDUCED MOTION
   ============================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-animacao] {
        opacity: 1;
        transform: none;
    }

    .clientes-marquee {
        animation: none;
    }
}

/* ==============================
   26b. EXIT INTENT POPUP
   ============================== */
.body--popup-open {
    overflow: hidden;
}

.exit-popup {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.exit-popup--hidden {
    display: none;
}

.exit-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: exitFadeIn 0.3s ease-out;
}

.exit-popup__card {
    position: relative;
    background: var(--fundo-secundario);
    border-radius: var(--raio-borda);
    padding: 48px 40px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: exitSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.exit-popup--closing .exit-popup__backdrop {
    animation: exitFadeOut 0.3s ease-in forwards;
}

.exit-popup--closing .exit-popup__card {
    animation: exitSlideOut 0.3s ease-in forwards;
}

@keyframes exitFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes exitFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes exitSlideIn {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes exitSlideOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(20px) scale(0.95); }
}

.exit-popup__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--texto-terciario);
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.exit-popup__close:hover {
    color: var(--texto-primario);
    background: var(--fundo-primario);
}

.exit-popup__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(242, 101, 34, 0.08);
    border: 1px solid rgba(242, 101, 34, 0.2);
    border-radius: var(--raio-borda-pill);
    font-family: var(--fonte-titulo);
    font-size: 12px;
    font-weight: 600;
    color: var(--cor-primaria);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}

.exit-popup__badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    animation: exitBadgePulse 1.5s ease-in-out infinite;
}

@keyframes exitBadgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.7); }
}

.exit-popup__title {
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-h3);
    font-weight: 700;
    color: var(--texto-primario);
    margin: 0 0 12px;
}

.exit-popup__subtitle {
    font-size: var(--tamanho-corpo);
    color: var(--texto-secundario);
    line-height: 1.6;
    margin: 0 0 24px;
}

.exit-popup__features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
    text-align: left;
}

.exit-popup__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--tamanho-pequeno);
    color: var(--texto-secundario);
}

.exit-popup__feature ion-icon {
    font-size: 20px;
    color: var(--cor-verde);
    flex-shrink: 0;
}

.exit-popup__feature strong {
    color: var(--texto-primario);
    font-weight: 700;
}

.exit-popup__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 32px;
    background: var(--cor-primaria);
    color: #fff;
    border: none;
    border-radius: var(--raio-borda-pill);
    font-family: var(--fonte-titulo);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(242, 101, 34, 0.3);
}

.exit-popup__cta:hover {
    background: var(--cor-primaria-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(242, 101, 34, 0.4);
    color: #fff;
}

.exit-popup__cta ion-icon {
    font-size: 18px;
}

.exit-popup__hint {
    font-size: var(--tamanho-mini);
    color: var(--texto-terciario);
    margin: 12px 0 0;
}

@media (max-width: 480px) {
    .exit-popup__card {
        padding: 36px 24px;
    }

    .exit-popup__title {
        font-size: var(--tamanho-h4);
    }

    .exit-popup__cta {
        font-size: 14px;
        padding: 14px 24px;
    }
}

@media print {
    .exit-popup { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .exit-popup__card,
    .exit-popup__backdrop {
        animation: none !important;
    }
}

/* ==============================
   27. SCROLLBAR CUSTOMIZADA
   ============================== */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--fundo-secundario);
}

::-webkit-scrollbar-thumb {
    background: var(--gradiente-primario);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cor-primaria-hover);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--cor-primaria) var(--fundo-secundario);
}

/* ==============================
   28. SELEÇÃO DE TEXTO
   ============================== */
::selection {
    background: var(--cor-primaria);
    color: #FFFFFF;
}

::-moz-selection {
    background: var(--cor-primaria);
    color: #FFFFFF;
}