/* ==========================================================================
   ESTILOS PRINCIPAIS - NEXTBOX GROUP (PORTAL UNIFICADO 60 FPS)
   SEÇÃO 1 (HERO) + SEÇÃO 2 (03. SOLUÇÕES) + SEÇÃO 3 (05. PÚBLICOS)
   ========================================================================== */

:root {
    /* Identidade NextBox & Ex-Envios (Laranja Oficial) */
    --cor-primaria-envios: #EE7F1A;
    --cor-secundaria-envios: #FF9429;
    --cor-brilho-envios: rgba(238, 127, 26, 0.45);

    /* Identidade Ex-Place (Azul) */
    --cor-primaria-place: #0099FF;
    --cor-secundaria-place: #0077EE;
    --cor-brilho-place: rgba(0, 153, 255, 0.45);

    /* Cores Base & Neutras */
    --cor-fundo-escuro: #040810;
    --cor-texto-claro: #FFFFFF;
    --cor-texto-mutado: #CBD5E1;
    --cor-texto-secundario: #94A3B8;

    /* Tipografia */
    --fonte-principal: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --fonte-titulos: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --fonte-destaque: 'Space Grotesk', sans-serif;

    /* Transições Otimizadas */
    --transicao-fluida: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    --transicao-rapida: transform 0.2s ease, opacity 0.2s ease;
}

/* Reset Global */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
    background-color: var(--cor-fundo-escuro);
    font-family: var(--fonte-principal);
    color: var(--cor-texto-claro);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ==========================================================================
   CABEÇALHO GLOBAL (HEADER FIXO)
   ========================================================================== */
.cabecalho-principal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 16px 48px;
    background: linear-gradient(180deg, rgba(4, 8, 16, 0.92) 0%, rgba(4, 8, 16, 0.75) 80%, rgba(4, 8, 16, 0) 100%);
    transition: background 0.3s ease, padding 0.3s ease;
}

.cabecalho-principal.com-scroll {
    background: rgba(4, 8, 16, 0.95);
    border-bottom: 1px solid rgba(0, 153, 255, 0.15);
    padding: 12px 48px;
}

.conteiner-cabecalho {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Logotipo Header */
.link-logo-header {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.25s ease;
}

.link-logo-header:hover {
    transform: scale(1.03);
}

.logo-header-img {
    height: 42px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
    transition: filter 0.25s ease;
}

.link-logo-header:hover .logo-header-img {
    filter: drop-shadow(0 2px 14px rgba(255, 85, 0, 0.35));
}

/* Menu de Navegação */
.menu-navegacao {
    display: flex;
    align-items: center;
}

.lista-navegacao {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
}

.item-menu {
    position: relative;
}

.link-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: var(--fonte-principal);
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    padding: 8px 4px;
    gap: 6px;
    transition: color 0.25s ease;
}

.link-menu::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 2.5px;
    background: var(--cor-primaria-envios);
    border-radius: 2px;
    box-shadow: 0 0 10px var(--cor-brilho-envios);
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.link-menu:hover {
    color: #FFFFFF;
}

.link-menu:hover::after {
    width: 100%;
    left: 0;
}

.link-menu.ativo {
    color: #FFFFFF;
    font-weight: 600;
}

.link-menu.ativo::after {
    width: 100%;
    left: 0;
}

/* Botão Header CTA */
.botao-cta-header {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    border-radius: 50px;
    background: linear-gradient(135deg, #FF6A00 0%, #EE4400 100%);
    font-size: 0.9rem;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(255, 85, 0, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.botao-cta-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(255, 85, 0, 0.6);
}

.seta-icone-header {
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
}

.botao-cta-header:hover .seta-icone-header {
    transform: translateX(4px);
}

/* Botão Hambúrguer (Mobile) */
.botao-hamburguer {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.barra-hamburguer {
    width: 100%;
    height: 2.5px;
    background-color: #FFFFFF;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

.botao-hamburguer.aberto .barra-hamburguer:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.botao-hamburguer.aberto .barra-hamburguer:nth-child(2) {
    opacity: 0;
}

.botao-hamburguer.aberto .barra-hamburguer:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

/* Dropdown Menu Mobile */
.menu-mobile-dropdown {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(4, 8, 16, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 100px 32px 40px;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.menu-mobile-dropdown.ativo {
    opacity: 1;
    pointer-events: auto;
}

.navegacao-mobile {
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: center;
    text-align: center;
}

.link-menu-mobile {
    font-size: 1.25rem;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.2s ease;
}

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

.botao-cta-mobile {
    margin-top: 16px;
    width: 100%;
    max-width: 280px;
    justify-content: center;
}
/* ==========================================================================
   NAVEGAÇÃO FLUTUANTE LATERAL
   ========================================================================== */

.navegacao-flutuante {
    position: fixed;
    right: 28px;
    top: 50%;
    transform: translateY(-50%) translateZ(0);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 16px;
    pointer-events: auto;
}

.link-indicador {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 6px;
    cursor: pointer;
    flex-direction: row-reverse;
}

.ponto-indicador {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    transition: var(--transicao-rapida);
}

.rotulo-indicador {
    font-family: var(--fonte-destaque);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #FFFFFF;
    background: rgba(4, 9, 20, 0.92);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(0, 153, 255, 0.25);
    opacity: 0;
    transform: translateX(10px);
    transition: var(--transicao-rapida);
    pointer-events: none;
    white-space: nowrap;
}

.link-indicador:hover .rotulo-indicador,
.link-indicador.ativo .rotulo-indicador {
    opacity: 1;
    transform: translateX(0);
}

.link-indicador.ativo .ponto-indicador {
    background: var(--cor-primaria-envios);
    border-color: #FFA447;
    box-shadow: 0 0 12px rgba(238, 127, 26, 0.85);
    transform: scale(1.3);
}

/* ==========================================================================
   ESTRUTURA DAS SEÇÕES GLOBAIS
   ========================================================================== */
.secao-completa {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background-color: var(--cor-fundo-escuro);
    contain: paint layout;
    transform: translateZ(0);
}

.fundo-cenario {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    transform: translateZ(0);
}

.imagem-cenario,
.video-cenario {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   SEÇÃO 1 (01): HERO NEXTBOX GROUP
   ========================================================================== */
.gradiente-hero-topo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(180deg, rgba(4, 8, 16, 0.8) 0%, transparent 100%);
    pointer-events: none;
}

.gradiente-hero-esquerda {
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, rgba(4, 8, 16, 0.95) 0%, rgba(4, 8, 16, 0.75) 10%, rgba(4, 8, 16, 0) 100%);
    pointer-events: none;
}

.degrade-hero-base {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(0deg, #040810 0%, rgba(4, 8, 16, 0.8) 0%, transparent 30%);
    pointer-events: none;
    z-index: 2;
}

.conteiner-hero {
    position: relative;
    z-index: 5;
    width: 100%;
    min-height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px 64px 60px 64px;
    max-width: 1440px;
    margin: 0 auto;
}

.bloco-hero-texto {
    max-width: 680px;
}

.tag-hero {
    display: inline-block;
    font-family: var(--fonte-destaque);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #CED4DA;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.titulo-hero {
    font-family: var(--fonte-titulos);
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.08;
    color: #FFFFFF;
    margin-bottom: 22px;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9);
}

.descricao-hero {
    font-size: 1.15rem;
    line-height: 1.55;
    color: #E2E8F0;
    font-weight: 400;
    margin-bottom: 36px;
    max-width: 520px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

.botoes-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.link-scroll-explorar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s ease;
}

.link-scroll-explorar:hover {
    color: var(--cor-primaria-envios);
    transform: translateY(2px);
}

.seta-baixo-explorar {
    width: 18px;
    height: 18px;
    transition: transform 0.25s ease;
}

.link-scroll-explorar:hover .seta-baixo-explorar {
    transform: translateY(4px);
}

/* ==========================================================================
   SEÇÃO 2 (02): QUEM É A NEXTBOX GROUP (ECOSSISTEMA & ESTRUTURA)
   ========================================================================== */
.secao-quem-somos {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #040810;
}

.gradiente-secao02-topo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;
    background: linear-gradient(180deg, #040810 0%, rgba(4, 8, 16, 0.6) 40%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.gradiente-secao02-esquerda {
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, rgba(4, 8, 16, 0.85) 0%, rgba(4, 8, 16, 0.4) 60%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.degrade-secao02-base {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: linear-gradient(0deg, #040810 0%, rgba(4, 8, 16, 0.7) 50%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.conteiner-quem-somos {
    position: relative;
    z-index: 5;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding: 130px 48px 30px 48px;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 56px;
    align-items: center;
}

/* Lado Esquerdo: Textos */
.coluna-texto-quem-somos {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.titulo-quem-somos {
    font-family: var(--fonte-titulos);
    font-size: 3.3rem;
    font-weight: 800;
    line-height: 1.12;
    color: #FFFFFF;
    margin-bottom: 28px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
}

.destaque-laranja-gradient {
    background: #EE7F1A;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #EE7F1A;
    display: inline-block;
    filter: drop-shadow(0 2px 14px rgba(238, 127, 26, 0.35));
}

.bloco-paragrafos-quem-somos {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;
}

.paragrafo-quem-somos {
    font-family: var(--fonte-principal);
    font-size: 1.05rem;
    line-height: 1.62;
    color: #CBD5E1;
    font-weight: 400;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

/* Lado Direito: Organograma & Diagrama com Linhas Pulsantes */
.coluna-diagrama-ecossistema {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.estrutura-arvore-diagrama {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 540px;
}

/* Card Pai: NextBox Group */
.card-diagrama-pai {
    width: 320px;
    padding: 22px 28px;
    border-radius: 18px;
    background: rgba(5, 14, 30, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.8px solid #0099FF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6),
                0 0 28px rgba(0, 153, 255, 0.38),
                inset 0 0 22px rgba(0, 153, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    z-index: 3;
}

.card-diagrama-pai:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7),
                0 0 38px rgba(0, 153, 255, 0.55),
                inset 0 0 26px rgba(0, 153, 255, 0.25);
}

.conteudo-card-pai {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.logo-diagrama-pai {
    width: 100%;
    max-width: 200px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7));
}

/* Conectores SVG Pulsantes */
.wrapper-conector-svg {
    width: 100%;
    height: 72px;
    position: relative;
    margin: -2px 0 -2px 0;
    overflow: visible;
    z-index: 2;
}

.svg-linhas-conectoras {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
}

.trilha-estatica {
    opacity: 0.45;
}

.pulso-luz {
    stroke-dasharray: 45 190;
    stroke-linecap: round;
}

.pulso-laranja {
    animation: pulsarFluxoNeon 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulso-azul {
    animation: pulsarFluxoNeon 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.45s;
}

@keyframes pulsarFluxoNeon {
    0% {
        stroke-dashoffset: 235;
        opacity: 0.2;
    }
    50% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: -45;
        opacity: 0.2;
    }
}

/* Cards Filhos */
.grade-cards-filhos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
    z-index: 3;
}

.card-diagrama-filho {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 18px;
    border-radius: 18px;
    text-decoration: none;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.card-filho-envios {
    background: rgba(16, 11, 7, 0.78);
    border: 1.8px solid #EE7F1A;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6),
                0 0 28px rgba(238, 127, 26, 0.35),
                inset 0 0 20px rgba(238, 127, 26, 0.14);
}

.card-filho-envios:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7),
                0 0 40px rgba(238, 127, 26, 0.6),
                inset 0 0 26px rgba(238, 127, 26, 0.24);
}

.card-filho-place {
    background: rgba(5, 14, 30, 0.78);
    border: 1.8px solid #0099FF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6),
                0 0 28px rgba(0, 153, 255, 0.35),
                inset 0 0 20px rgba(0, 153, 255, 0.14);
}

.card-filho-place:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7),
                0 0 40px rgba(0, 153, 255, 0.6),
                inset 0 0 26px rgba(0, 153, 255, 0.24);
}

.cabecalho-card-filho {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.logo-card-filho {
    max-height: 38px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
}

.descricao-card-filho {
    font-family: var(--fonte-principal);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.45;
    color: #E2E8F0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

/* Faixa Inferior de Segmentos / Públicos */
.faixa-segmentos-secao02 {
    position: relative;
    z-index: 5;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 28px 48px 36px 48px;
    background: linear-gradient(180deg, rgba(4, 8, 16, 0.4) 0%, rgba(4, 8, 16, 0.95) 100%);
}

.conteiner-faixa-segmentos {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.item-segmento-faixa {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    flex: 1;
    cursor: default;
    transition: transform 0.3s ease;
}

.item-segmento-faixa:hover {
    transform: translateY(-3px);
}

.icone-segmento-faixa {
    width: 38px;
    height: 38px;
    color: #EE7F1A;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 10px rgba(238, 127, 26, 0.5));
    transition: filter 0.3s ease, transform 0.3s ease;
}

.icone-segmento-faixa svg {
    width: 32px;
    height: 32px;
}

.item-segmento-faixa:hover .icone-segmento-faixa {
    filter: drop-shadow(0 0 16px rgba(238, 127, 26, 0.85));
    transform: scale(1.1);
}

.nome-segmento-faixa {
    font-family: var(--fonte-principal);
    font-size: 0.98rem;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: 0.2px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.divisor-segmentos {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
}

/* ==========================================================================
   SEÇÃO 3 (03): AS DUAS SOLUÇÕES
   ========================================================================== */
.degrade-azul-baixo-para-cima {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(0deg, #040a18 0%, rgba(4, 11, 26, 0.96) 7%, rgba(5, 14, 34, 0.82) 11%, rgba(5, 17, 42, 0.58) 16%, rgba(6, 20, 50, 0.28) 23%, rgba(6, 20, 50, 0.08) 29%, transparent 84%);
    pointer-events: none;
}

.sobreposicao-luz-laranja {
    position: absolute;
    top: 0; left: 0; width: 50%; height: 100%;
    background: radial-gradient(circle at 20% 20%, rgba(255, 85, 0, 0.12) 0%, transparent 60%);
    pointer-events: none;
    z-index: 2;
}

.sobreposicao-luz-azul {
    position: absolute;
    top: 0; right: 0; width: 50%; height: 100%;
    background: radial-gradient(circle at 80% 20%, rgba(0, 153, 255, 0.12) 0%, transparent 60%);
    pointer-events: none;
    z-index: 2;
}

/* ==========================================================================
   COMPONENTE GLOBAL: TAG DE SEÇÃO PADRONIZADA (INLINE ACIMA DOS TÍTULOS)
   ========================================================================== */
.tag-secao-padrao {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    pointer-events: auto;
    user-select: none;
    margin-bottom: 20px;
}

.titulo-tag {
    font-family: var(--fonte-destaque);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #CBD5E1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

.traco-indicador-tag {
    width: 38px;
    height: 3.5px;
    background: #EE7F1A;
    border-radius: 2px;
    margin-top: 6px;
    box-shadow: 0 0 10px rgba(238, 127, 26, 0.65);
}


.conteiner-solucoes {
    position: relative;
    z-index: 5;
    width: 100%;
    min-height: 125vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    padding: 50px 48px 36px 48px;
}

.coluna-solucao {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 20px;
}

.coluna-ex-envios { padding-right: 32px; }
.coluna-ex-place { padding-left: 32px; }

.conteudo-solucao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 540px;
}

/* Logos Oficiais Ex-Envios e Ex-Place */
.marca-topo {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.logo-marca-solucao {
    height: 48px;
    width: auto;
    max-width: 320px;
    object-fit: contain;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.logo-marca-solucao:hover {
    transform: scale(1.04);
}

.logo-ex-envios {
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 16px rgba(255, 85, 0, 0.35));
}

.logo-ex-envios:hover {
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 24px rgba(255, 85, 0, 0.55));
}

.logo-ex-place {
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 16px rgba(0, 153, 255, 0.35));
}

.logo-ex-place:hover {
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 24px rgba(0, 153, 255, 0.55));
}

/* Títulos Seção 03 */
.titulo-principal {
    font-family: var(--fonte-titulos);
    font-size: 2.85rem;
    font-weight: 800;
    line-height: 1;
    color: #FFFFFF;
    margin-bottom: 6px;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.85);
}

.destaque-laranja {
    color: var(--cor-primaria-envios);
    text-shadow: 0 0 20px rgba(238, 127, 26, 0.4);
}

.destaque-branco { color: #FFFFFF; }

.descricao-subtitulo {
    font-size: 1.05rem;
    line-height: 1.5;
    color: #E2E8F0;
    font-weight: 400;
    margin-bottom: 24px;
    max-width: 440px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

/* Botões */
.area-botao { margin-bottom: 30px; }

.botao-acao {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 26px;
    border-radius: 50px;
    font-family: var(--fonte-principal);
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
    border: none;
    outline: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    transform: translateZ(0);
}

.botao-acao .seta-icone {
    width: 18px;
    height: 18px;
    transition: transform 0.25s ease;
}

.botao-acao:hover .seta-icone { transform: translateX(4px); }

.botao-envios {
    background: linear-gradient(135deg, #FF9429 0%, #EE7F1A 100%);
    box-shadow: 0 4px 18px rgba(238, 127, 26, 0.4);
}

.botao-envios:hover {
    background: linear-gradient(135deg, #FFA447 0%, #EE7F1A 100%);
    box-shadow: 0 6px 24px rgba(238, 127, 26, 0.65);
    transform: translateY(-2px);
}

.botao-place {
    background: linear-gradient(135deg, #00A6FF 0%, #0070E0 100%);
    box-shadow: 0 4px 18px rgba(0, 153, 255, 0.4);
}

.botao-place:hover {
    background: linear-gradient(135deg, #1AB0FF 0%, #0088FF 100%);
    box-shadow: 0 6px 24px rgba(0, 153, 255, 0.65);
    transform: translateY(-2px);
}

/* Grade de Recursos (Seção 03) */
.grade-recursos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
    margin-top: auto;
    padding-top: 20px;
}

.item-recurso {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    cursor: default;
    transition: transform 0.25s ease;
}

.item-recurso:hover { transform: translateY(-4px); }

.caixa-icone {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, background 0.25s ease;
}

.caixa-icone svg { width: 24px; height: 24px; }

.icone-laranja {
    background: rgba(238, 127, 26, 0.16);
    border: 1.5px solid rgba(238, 127, 26, 0.55);
    color: #EE7F1A;
    box-shadow: 0 0 14px rgba(238, 127, 26, 0.25);
}

.item-recurso:hover .icone-laranja {
    background: rgba(238, 127, 26, 0.32);
    border-color: #EE7F1A;
    color: #FFA447;
    box-shadow: 0 0 18px rgba(238, 127, 26, 0.55);
}

.icone-azul {
    background: rgba(0, 153, 255, 0.16);
    border: 1.5px solid rgba(0, 153, 255, 0.55);
    color: #0099FF;
    box-shadow: 0 0 14px rgba(0, 153, 255, 0.25);
}

.item-recurso:hover .icone-azul {
    background: rgba(0, 153, 255, 0.32);
    border-color: #00A6FF;
    color: #66C2FF;
    box-shadow: 0 0 18px rgba(0, 153, 255, 0.55);
}

.rotulo-recurso {
    font-size: 0.82rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.25;
    max-width: 105px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.98), 0 0 12px rgba(4, 10, 24, 0.9);
}

/* Divisores de Transição entre Seções */
.divisor-transicao-secoes {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 10;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, #040810 100%);
}

.linha-brilho-transicao {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(238, 127, 26, 0.6) 20%, 
        rgba(0, 153, 255, 0.8) 50%, 
        rgba(238, 127, 26, 0.6) 80%, 
        transparent 100%);
    box-shadow: 0 0 12px rgba(0, 153, 255, 0.7), 0 0 20px rgba(238, 127, 26, 0.4);
}

/* ==========================================================================
   SEÇÃO 3 (05): PARA QUEM CRIAMOS
   ========================================================================== */
.degrade-azul-baixo-para-cima-publicos {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(0deg, 
        #040a18 0%, 
        rgba(4, 11, 26, 0.94) 18%, 
        rgba(4, 13, 30, 0.78) 32%, 
        rgba(5, 16, 38, 0.45) 48%, 
        transparent 75%);
    pointer-events: none;
}

.gradiente-sombra-esquerda {
    position: absolute;
    top: 0; left: 0; width: 50%; height: 100%;
    background: linear-gradient(90deg, rgba(4, 8, 16, 0.98) 0%, rgba(4, 10, 22, 0.85) 55%, rgba(4, 8, 16, 0) 100%);
    pointer-events: none;
    z-index: 2;
}

.gradiente-sombra-inferior {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 44%;
    background: linear-gradient(0deg, rgba(4, 8, 16, 0.98) 0%, rgba(4, 10, 22, 0.7) 50%, rgba(4, 8, 16, 0) 100%);
    pointer-events: none;
    z-index: 2;
}

.brilho-laranja-radial {
    position: absolute;
    top: 15%; left: 8%; width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(238, 127, 26, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 2;
}

.conteiner-principal-publicos {
    position: relative;
    z-index: 5;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 100px 56px 40px 56px;
}

.bloco-apresentacao {
    max-width: 580px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.titulo-destaque {
    font-family: var(--fonte-titulos);
    font-size: 3.3rem;
    font-weight: 800;
    line-height: 1.08;
    color: #FFFFFF;
    margin-bottom: 22px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.85);
}

.palavra-destaque {
    color: var(--cor-primaria-envios);
    text-shadow: 0 0 20px rgba(238, 127, 26, 0.4);
}

.descricao-secao {
    font-size: 1.12rem;
    line-height: 1.55;
    color: #E2E8F0;
    max-width: 460px;
    font-weight: 400;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

/* Ícones no Canto Inferior Direito */
.area-inferior-segmentos {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 36px;
    width: 100%;
    max-width: 980px;
    margin-left: auto;
    margin-top: auto;
    padding-top: 24px;
}

.item-segmento {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.25s ease;
    position: relative;
    padding: 6px 4px;
    flex: 1;
    max-width: 220px;
}

.item-segmento:hover { transform: translateY(-5px); }

.icone-segmento-direto {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: transform 0.25s ease;
    filter: drop-shadow(0 0 10px rgba(238, 127, 26, 0.55));
}

.icone-segmento-direto svg {
    width: 38px;
    height: 38px;
    stroke: var(--cor-primaria-envios);
    transition: transform 0.25s ease;
}

.item-segmento:hover .icone-segmento-direto svg {
    stroke: #FFA447;
    transform: scale(1.12);
}

.titulo-segmento {
    font-family: var(--fonte-titulos);
    font-size: 1.3rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 6px;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

.item-segmento:hover .titulo-segmento { color: #EE7F1A; }

.resumo-segmento {
    font-size: 0.9rem;
    line-height: 1.35;
    color: #E2E8F0;
    font-weight: 400;
    max-width: 190px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

/* ==========================================================================
   SEÇÃO 4 (07): DESCUBRA O ECOSSISTEMA NEXTBOX
   ========================================================================== */
.secao-ecossistema {
    position: relative;
    width: 100%;
    min-height: 123vh;
    display: flex;
    align-items: center;
    background-color: var(--cor-fundo-escuro);
    contain: layout paint;
    overflow: hidden;
}

.gradiente-ecossistema-topo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #040810 0%, rgba(4, 8, 16, 0.78) 1%, transparent 40%);
    pointer-events: none;
    z-index: 2;
}

.gradiente-ecossistema-base {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(0deg, #040810 0%, rgba(4, 8, 16, 0.82) 40%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.conteiner-ecossistema {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 100px 48px 50px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 123vh;
}

/* Topo / Títulos */
.bloco-topo-ecossistema {
    max-width: 680px;
}

.titulo-ecossistema {
    font-family: var(--fonte-titulos);
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1.08;
    color: #FFFFFF;
    margin-top: 10px;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95);
}

.destaque-laranja-ecossistema {
    color: #EE7F1A;
    text-shadow: 0 0 32px rgba(238, 127, 26, 0.4);
}

.descricao-ecossistema {
    font-family: var(--fonte-principal);
    font-size: 1.15rem;
    line-height: 1.45;
    color: #E2E8F0;
    font-weight: 400;
    max-width: 500px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

/* Grade dos Cards Clicáveis */
.grade-cards-ecossistema {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    width: 100%;
    margin-top: 40px;
}

.card-ecossistema {
    position: relative;
    display: block;
    text-decoration: none;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    background: transparent;
    transition: filter 0.35s ease, box-shadow 0.35s ease;
    contain: paint;
}

.card-ecossistema.visivel {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease, box-shadow 0.35s ease;
}

.img-card-clicavel {
    width: 100%;
    height: -webkit-fill-available;
    display: block;
    object-fit: contain;
    border-radius: 18px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

/* Efeito Hover e Foco Card Ex-Envios (Laranja) */
.card-ecossistema-envios {
    filter: drop-shadow(0 6px 20px rgba(238, 127, 26, 0.25));
}

.card-ecossistema-envios:hover {
    transform: translateY(-6px) scale(1.02);
    filter: drop-shadow(0 12px 32px rgba(238, 127, 26, 0.55));
}

.card-ecossistema-envios:active {
    transform: translateY(-2px) scale(0.99);
}

/* Efeito Hover e Foco Card Ex-Place (Azul) */
.card-ecossistema-place {
    filter: drop-shadow(0 6px 20px rgba(0, 153, 255, 0.25));
}

.card-ecossistema-place:hover {
    transform: translateY(-6px) scale(1.02);
    filter: drop-shadow(0 12px 32px rgba(0, 153, 255, 0.55));
}

.card-ecossistema-place:active {
    transform: translateY(-2px) scale(0.99);
}

/* ==========================================================================
   SEÇÃO 5 (08): FECHAMENTO NEXTBOX GROUP (LOGO CENTRAL & SLOGAN)
   ========================================================================== */
.secao-fechamento {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    background-color: #03060c;
}

.vinheta-radial-fechamento {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(3, 7, 16, 0.3) 0%, rgba(3, 7, 16, 0.85) 75%, #03060c 100%);
    pointer-events: none;
    z-index: 2;
}

.brilho-central-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(238, 127, 26, 0.15) 0%, rgba(0, 153, 255, 0.1) 45%, transparent 70%);
    pointer-events: none;
    z-index: 2;
    animation: pulsarAuraCentral 6s ease-in-out infinite alternate;
}

@keyframes pulsarAuraCentral {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.conteiner-fechamento {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 24px;
    max-width: 900px;
    margin: 0 auto;
}

/* Imagem de Fundo com Animação de Revelação e Zoom */
.animar-fundo-fechamento {
    opacity: 0;
    transform: scale(1.08) translateZ(0);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.animar-fundo-fechamento.fundo-visivel {
    opacity: 1;
    transform: scale(1) translateZ(0);
}

/* Wrapper da Logo com Efeitos */
.wrapper-logo-fechamento {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 38px;
    animation: flutuarLogoVertical 5s ease-in-out infinite alternate;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.canvas-raios-fechamento {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 4;
    transition: opacity 0.25s ease-out;
}

.wrapper-logo-fechamento:hover {
    transform: scale(1.05) translateY(-6px);
}

@keyframes flutuarLogoVertical {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-12px); }
}

.logo-nextbox-vertical {
    width: 100%;
    max-width: 380px;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 3;
    filter: drop-shadow(0 8px 25px rgba(255, 85, 0, 0.35)) drop-shadow(0 0 35px rgba(0, 153, 255, 0.25));
    transition: filter 0.35s ease;
}

.wrapper-logo-fechamento:hover .logo-nextbox-vertical {
    filter: drop-shadow(0 10px 32px rgba(255, 85, 0, 0.55)) drop-shadow(0 0 45px rgba(0, 153, 255, 0.45));
}

/* Frase de Fechamento */
.textos-fechamento {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.frase-fechamento {
    font-family: var(--fonte-destaque);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 3.5px;
    line-height: 1.6;
    color: #F8FAFC;
    text-transform: uppercase;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 153, 255, 0.3);
}

.linha-decorativa-fechamento {
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #EE7F1A 0%, #0099FF 100%);
    box-shadow: 0 0 12px rgba(0, 153, 255, 0.6);
}

/* ==========================================================================
   ANIMAÇÕES DE ENTRADA
   ========================================================================== */
.animar-item {
    opacity: 0;
    transform: translateY(25px) translateZ(0);
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.visivel {
    opacity: 1 !important;
    transform: translateY(0) translateZ(0) !important;
}

.atraso-1 { transition-delay: 0.08s; }
.atraso-2 { transition-delay: 0.16s; }
.atraso-3 { transition-delay: 0.24s; }
.atraso-4 { transition-delay: 0.32s; }
.atraso-5 { transition-delay: 0.40s; }

/* ==========================================================================
   RESPONSIVIDADE
   ========================================================================== */
@media (max-width: 1200px) {
    .titulo-hero { font-size: 3.1rem; }
    .titulo-quem-somos { font-size: 2.8rem; }
    .titulo-principal { font-size: 2.3rem; }
    .titulo-destaque { font-size: 2.7rem; }
    .titulo-ecossistema { font-size: 2.9rem; }
    .conteiner-hero { padding: 110px 40px 40px 40px; }
    .conteiner-quem-somos { padding: 100px 32px 30px 32px; gap: 36px; }
    .conteiner-solucoes { padding: 90px 28px 30px 28px; }
    .conteiner-principal-publicos { padding: 90px 28px 30px 28px; }
    .conteiner-ecossistema { padding: 90px 28px 40px 28px; }
    .area-inferior-segmentos { gap: 18px; }
}

@media (max-width: 992px) {
    .cabecalho-principal { padding: 14px 24px; }
    .menu-navegacao { display: none; }
    .navegacao-flutuante { display: none; }
    .conteiner-quem-somos { grid-template-columns: 1fr; gap: 48px; }
    .coluna-texto-quem-somos { text-align: center; align-items: center; }
    .bloco-paragrafos-quem-somos { max-width: 100%; }
    .conteiner-solucoes { grid-template-columns: 1fr; gap: 45px; }
    .coluna-ex-envios, .coluna-ex-place { padding: 0; }
    .grade-cards-ecossistema { grid-template-columns: 1fr; gap: 24px; }
    .area-inferior-segmentos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 14px;
        margin-left: 0;
    }
    .item-segmento { max-width: 100%; }
    .conteiner-faixa-segmentos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }
    .divisor-segmentos { display: none; }
}

@media (max-width: 600px) {
    .titulo-hero { font-size: 2.2rem; }
    .titulo-quem-somos { font-size: 2.1rem; }
    .titulo-principal { font-size: 1.8rem; }
    .titulo-destaque { font-size: 1.85rem; }
    .titulo-ecossistema { font-size: 2.1rem; }
    .conteiner-hero { padding: 90px 20px 30px 20px; }
    .conteiner-quem-somos { padding: 85px 20px 30px 20px; }
    .card-diagrama-pai { width: 100%; max-width: 290px; }
    .grade-cards-filhos { grid-template-columns: 1fr; gap: 18px; }
    .wrapper-conector-svg { display: none; }
    .conteiner-ecossistema { padding: 85px 20px 30px 20px; }
    .grade-recursos { grid-template-columns: repeat(2, 1fr); gap: 16px 8px; }
    .area-inferior-segmentos { grid-template-columns: 1fr; gap: 14px; }
    .item-segmento { flex-direction: row; text-align: left; gap: 12px; }
    .icone-segmento-direto { margin-bottom: 0; min-width: 38px; height: 38px; }
    .icone-segmento-direto svg { width: 30px; height: 30px; }
    .conteiner-faixa-segmentos { grid-template-columns: 1fr; gap: 16px; }
    .item-segmento-faixa { flex-direction: row; text-align: left; gap: 14px; }
    .titulo-tag { font-size: 0.85rem; letter-spacing: 1.8px; }
    .botao-acao { width: 100%; justify-content: center; }
    .botoes-hero { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   ANIMAÇÕES DE ENTRADA ULTRALEVES (60 FPS - HARDWARE ACCELERATED)
   ========================================================================== */
.animar-item {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.animar-item.visivel {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

/* Atrasos Escalonados de Entrada Suave */
.atraso-1 { transition-delay: 0.05s; }
.atraso-2 { transition-delay: 0.12s; }
.atraso-3 { transition-delay: 0.20s; }
.atraso-4 { transition-delay: 0.28s; }
.atraso-5 { transition-delay: 0.36s; }

/* Animações Direcionais em Cascata: Recursos (Seção 3) */
/* Laranjas: Empilhados da Esquerda para a Direita */
.animar-recurso-esq {
    opacity: 0;
    transform: translate3d(-40px, 0, 0) scale(0.9);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.animar-recurso-esq.visivel {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
}

/* Azuis: Empilhados da Direita para a Esquerda */
.animar-recurso-dir {
    opacity: 0;
    transform: translate3d(40px, 0, 0) scale(0.9);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.animar-recurso-dir.visivel {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
}

/* Delays em Cascata dos Recursos */
.atraso-card-1 { transition-delay: 0.08s; }
.atraso-card-2 { transition-delay: 0.20s; }
.atraso-card-3 { transition-delay: 0.32s; }
.atraso-card-4 { transition-delay: 0.44s; }

/* ==========================================================================
   RESPONSIVO — HEADER MOBILE
   ========================================================================== */
@media (max-width: 900px) {
    .menu-navegacao,
    .acoes-header {
        display: none;
    }

    .botao-hamburguer {
        display: flex;
    }

    .menu-mobile-dropdown {
        display: flex;
    }

    .cabecalho-principal {
        padding: 14px 24px;
    }

    .logo-header-img {
        height: 34px;
    }
}

@media (max-width: 600px) {
    .conteiner-cabecalho {
        padding: 0 4px;
    }

    .cabecalho-principal {
        padding: 12px 20px;
    }
}

/* ==========================================================================
   ⚡ EFEITO RELÂMPAGO — FLASH DE ENTRADA + RAIOS DINÂMICOS (HERO E FECHAMENTO)
   ========================================================================== */

/* Canvas de raios desenhados via JS */
.canvas-raios,
.canvas-raios-fechamento-full {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    opacity: 1;
}

/* Flash de entrada - Seção Hero */
.flash-entrada {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: radial-gradient(ellipse at 60% 40%,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(238, 127, 26, 0.75) 25%,
        rgba(255, 180, 60, 0.4) 50%,
        transparent 75%
    );
    opacity: 0;
    animation: flash-relampago-entrada 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.3s;
}

/* Flash de entrada - Seção 5 Fechamento */
.flash-entrada-fechamento {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(238, 127, 26, 0.75) 30%,
        rgba(0, 153, 255, 0.45) 55%,
        transparent 75%
    );
    opacity: 0;
}

.flash-entrada-fechamento.ativo {
    animation: flash-relampago-entrada 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes flash-relampago-entrada {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    15%  { opacity: 0.6; }
    25%  { opacity: 0.95; }  /* segundo pulso */
    40%  { opacity: 0.15; }
    100% { opacity: 0; }
}

/* Brilho de contorno nos textos quando flash dispara (via classe JS) */
.secao-hero.raio-ativo .titulo-hero,
.secao-fechamento.raio-ativo .frase-fechamento {
    text-shadow:
        0 0 30px rgba(255, 255, 255, 0.9),
        0 0 60px rgba(238, 127, 26, 0.7),
        0 0 80px rgba(0, 153, 255, 0.6);
    transition: text-shadow 0.05s ease;
}