/* =========================================================
 * VARIÁVEIS GLOBAIS E RESET DE ESTILOS
 * ========================================================= */

/* Define o Design System do projeto: cores, fontes e variáveis globais usadas em todo o CSS */
:root {
    /* Identidade Visual Premium Internacional */
    --color-blue-inst: #0A192F;
    /* Deep Navy */
    --color-blue-dark: #050B14;
    /* Quase preto absoluto */
    --color-green: #006B5F;
    /* Esmeralda Escuro Elegante */
    --color-green-hover: #005046;
    --color-yellow: #D4AF37;
    /* Dourado Discreto / Champagne */
    --color-white: #FFFFFF;

    /* Tipografia */
    --font-main: 'Outfit', 'Outfit Fallback', Arial, sans-serif;
}

/* Cria uma fonte de fallback customizada para evitar saltos de layout (CLS) enquanto a fonte principal carrega */
@font-face {
    font-family: 'Outfit Fallback';
    src: local('Arial');
    size-adjust: 106%;
    ascent-override: 95%;
    descent-override: 25%;
    line-gap-override: 0%;
}

/* Reset básico para todos os elementos: remove margens/paddings padrão e garante que bordas não alterem o tamanho total do elemento */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Configurações do corpo da página: aplica a fonte padrão, cores base e ativa o scroll suave para links âncora */
body,
html {
    font-family: var(--font-main);
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    overflow-x: hidden;
    overflow-y: scroll;
    /* Força a barra de rolagem sempre visível para evitar layout shift horizontal */
    scroll-behavior: smooth;
}

/* =========================================================
 * 1. TELA DE INTRODUÇÃO (INTRO SCREEN)
 * ========================================================= */

/* Cobre a tela inteira com um fundo branco no carregamento inicial da página */
#intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    /* O JS aplicará a classe .hide-intro após 1 segundo */
    transition: opacity 0.8s ease-in-out, visibility 0.8s;
}

/* Classe de utilidade ativada via JavaScript para ocultar a tela de introdução suavemente */
#intro-screen.hide-intro {
    opacity: 0;
    visibility: hidden;
}

/* Contêiner das linhas animadas que aparecem na tela de introdução */
.intro-lines {
    display: flex;
    gap: 1rem;
    height: 4px;
    width: 0;
    animation: introLinesAnim 1s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

/* Estilo individual de cada linha animada da introdução */
.intro-line {
    height: 100%;
    flex: 1;
    opacity: 0;
    animation: lineFadeIn 0.3s forwards;
}

/* Define as cores específicas e atrasos de animação para as linhas da introdução */
.intro-blue {
    background: var(--color-blue-inst);
    animation-delay: 0.1s;
}

.intro-green {
    background: var(--color-green);
    animation-delay: 0.2s;
}

.intro-yellow {
    background: var(--color-yellow);
    animation-delay: 0.3s;
}

/* Keyframes que ditam como as linhas se expandem e depois sobem para o topo da tela */
@keyframes introLinesAnim {
    0% {
        width: 0;
        gap: 50px;
    }

    50% {
        width: 200px;
        gap: 0;
        transform: translateY(0);
    }

    100% {
        width: 100vw;
        gap: 0;
        transform: translateY(-50vh);
    }

    /* Voa para o topo para virar a barra */
}

/* Animação simples de fade-in para as linhas */
@keyframes lineFadeIn {
    to {
        opacity: 1;
    }
}

/* Barra colorida fixa no topo que aparece logo após a tela de introdução desaparecer */
.motion-lines-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    display: flex;
    opacity: 0;
    /* Começa invisível, aparece após o intro */
    animation: showTopLines 0.5s forwards 1.2s;
}

@keyframes showTopLines {
    to {
        opacity: 1;
    }
}

/* Distribuição das três cores institucionais na barra superior */
.line-blue {
    width: 34%;
    background: var(--color-blue-inst);
}

.line-green {
    width: 33%;
    background: var(--color-green);
}

.line-yellow {
    width: 33%;
    background: var(--color-yellow);
}

/* =========================================================
 * BARRA DE NAVEGAÇÃO (NAVBAR)
 * ========================================================= */

/* Estrutura principal do cabeçalho de navegação (transparente e absoluto sobre o conteúdo) */
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2.5rem 6%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
    background: transparent;
}

/* Define o tamanho da logo em telas normais, tablets e celulares */
.logo-svg {
    height: 72px;
    width: auto;
    display: block;
}

@media (max-width: 768px) {
    .logo-svg {
        height: 56px;
    }
}

@media (max-width: 480px) {
    .logo-svg {
        height: 48px;
    }
}

/* Botão fantasma (fundo transparente, borda fina) da barra de navegação, com efeito glassmorphism */
.btn-nav-ghost {
    display: inline-block;
    padding: 1.2rem 3.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
}

/* Efeito ao passar o mouse sobre o botão de navegação (ganha cor e levanta levemente) */
.btn-nav-ghost:hover {
    background-color: var(--color-green);
    border-color: var(--color-green);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 168, 89, 0.6);
}

/* =========================================================
 * SEÇÃO PRINCIPAL (HERO BANNER)
 * ========================================================= */

/* Contêiner principal do banner, ocupando 100% da altura da tela (ajustado para bugs de mobile com svh) */
.hero {
    position: relative;
    width: 100%;
    /* Fix para barras de navegacao mobile cortando elementos inferiores */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    padding-top: max(80px, 10vh);
    padding-bottom: 0;
}

/* Estrutura que segura os elementos de fundo (imagens, vídeos, partículas) atrás do texto principal */
.hero-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Imagem estática hiper rápida para LCP */
.lcp-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Motor Cinematográfico Nativo (Ken Burns) */
#video-layer {
    opacity: 0;
    transition: opacity 2s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

/* Imagem Estática da Capa */
.static-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* Película Escura e Vinheta (Cinematic Contrast) - Melhora a leitura do texto por cima do fundo */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Vignette mais sofisticada e escura */
    background: radial-gradient(circle at center, rgba(5, 11, 20, 0.4) 0%, rgba(5, 11, 20, 0.85) 100%);
    backdrop-filter: blur(4px);
    /* Profundidade de campo cinematográfica */
    -webkit-backdrop-filter: blur(4px);
    z-index: 2;
    pointer-events: none;
}

/* Partículas (Profundidade) - Cria pequenos pontos flutuantes no fundo do Hero */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

/* Formato e estilo de cada partícula flutuante */
.particle {
    position: absolute;
    bottom: -10px;
    width: 4px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

/* Posicionamentos e tempos de animação individuais para criar movimentos orgânicos/diferentes */
.p1 {
    left: 15%;
    animation-duration: 15s;
    animation-delay: 0s;
}

.p2 {
    left: 35%;
    animation-duration: 25s;
    animation-delay: 5s;
    width: 6px;
    height: 6px;
}

.p3 {
    left: 55%;
    animation-duration: 18s;
    animation-delay: 2s;
}

.p4 {
    left: 75%;
    animation-duration: 22s;
    animation-delay: 8s;
    width: 3px;
    height: 3px;
}

.p5 {
    left: 85%;
    animation-duration: 30s;
    animation-delay: 1s;
}

.p6 {
    left: 25%;
    animation-duration: 20s;
    animation-delay: 12s;
}

/* Animação que faz as partículas subirem a tela sumindo suavemente */
@keyframes floatUp {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100vh) translateX(20px);
        opacity: 0;
    }
}

/* Conteúdo Centralizado Imersivo - Envolve títulos, subtítulos e botão de ação */
.hero-content-center {
    position: relative;
    z-index: 10;
    text-align: center;
    width: 100%;
    padding: 0 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    margin-bottom: 0;
}

/* Estilo para a área que exibe a data do evento no banner */
.hero-date-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px !important;
    margin-bottom: 3vh;
    position: relative;
    z-index: 50;
}

/* Etiqueta com bordas para a data */
.date-badge {
    display: inline-block;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-yellow);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 1.5vh;
    position: relative;
    z-index: 51;
}

/* Textos da data e formatações tipográficas secundárias */
.hero-date-text {
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-date-wrapper .hero-date-text:last-child {
    font-size: 0.82rem !important;
    font-weight: 300;
    letter-spacing: 1.4px;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.68);
    opacity: 1 !important;
}

/* Ícone de calendário que acompanha a data */
.calendar-icon {
    color: var(--color-yellow);
    flex-shrink: 0;
}

/* Estilo do título principal e suas duas quebras de linha com pesos diferentes */
.hero-title {
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    margin-bottom: 1.5vh;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.line-1 {
    font-size: 3rem;
    letter-spacing: 4px;
    color: var(--color-white);
    font-weight: 300;
}

.line-2 {
    font-size: 6.5rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--color-white);
    background: none;
    -webkit-text-fill-color: var(--color-white);
    text-fill-color: var(--color-white);
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 255, 255, 0.15);
}

/* Subtítulo do Banner (Letras muito espaçadas, estilo luxo) */
.hero-subtitle {
    font-size: 3.5rem;
    font-weight: 200;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4.4vh;
    text-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
}

/* Destaca a palavra 'VOCÊ' com cor dourada */
.highlight-voce {
    color: var(--color-yellow);
    display: inline-block;
    font-size: 1.12em;
    font-weight: 600;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

/* Textos descritivos secundários abaixo do título */
.hero-institutional-text {
    max-width: 700px;
    margin-bottom: 3vh;
    text-align: center;
}

.inst-impact {
    font-size: clamp(0.95rem, 3vw, 1.15rem);
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 0.6rem;
    line-height: 1.4;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.inst-complement {
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* Botão Vivo (Breathing CTA) - Botão principal de ação do Hero */
.cta-wrapper {
    margin-bottom: 0;
}

.btn-primary {
    display: inline-block;
    padding: 1.2rem 3.5rem;
    background-color: var(--color-green);
    color: var(--color-white);
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 168, 89, 0.3);
}

/* Microinteração premium de brilho (Swipe) - Passa uma luz branca pelo botão ao dar hover */
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: all 0.8s ease;
}

.btn-primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 168, 89, 0.6);
}

.btn-primary:hover::after {
    left: 150%;
}

/* Tátil para mobile (Toque) - O botão afunda de leve quando clicado */
.btn-primary:active {
    transform: translateY(2px) scale(0.96);
    box-shadow: 0 5px 15px rgba(0, 168, 89, 0.4);
}

/* A respiração começa após 4s - Animação cíclica que pulsa a sombra chamando atenção */
.btn-breathing {
    animation: ctaBreathe 3s ease-in-out infinite alternate 4s;
}

@keyframes ctaBreathe {
    0% {
        box-shadow: 0 10px 30px rgba(0, 168, 89, 0.3), inset 0 0 0px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 15px 45px rgba(0, 168, 89, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.2);
    }
}

/* =========================================================
 * CONTAGEM REGRESSIVA E INDICADOR DE SCROLL (RODAPÉ DO HERO)
 * ========================================================= */

/* Contêiner posicionado no fundo do Hero Banner */
.hero-bottom {
    position: relative;
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 3.5vh;
}

/* Contador Estilo Relógio Premium Minimalista */
.countdown-minimal {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
}

/* Título de 'contagem regressiva' acima dos números */
.countdown-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.65rem;
    font-weight: 400;
}

/* Estrutura flex para alinhar os números do contador lado a lado */
.countdown-numbers {
    display: flex;
    align-items: baseline;
    font-size: 3.5rem;
    font-weight: 200;
    color: var(--color-white);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
}

/* Garante que os números não fiquem pulando ao atualizar (tabular-nums) */
.number-val {
    display: inline-block;
    min-width: 1.2em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Rótulos dos números (dias, horas, min...) */
.countdown-numbers .lbl {
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 4px;
    margin-right: 2.5rem;
}

.countdown-numbers .lbl {
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-left: 0.2rem;
    margin-right: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
}

.countdown-numbers .lbl:last-child {
    margin-right: 0;
}

/* Classe utilitária global para esconder elementos */
.hide {
    display: none !important;
}

/* Estado alternativo do contador quando o evento já começou ou está prestes a começar */
.countdown-started {
    background-color: rgba(0, 168, 89, 0.15);
    border: 1px solid var(--color-green);
    padding: 1rem 2rem;
    border-radius: 50px;
    color: var(--color-white);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 1.1rem;
    backdrop-filter: blur(5px);
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 168, 89, 0.2);
    animation: fadeUpAnim 0.8s ease forwards;
}

/* Indicador de Scroll (Ver Mais) - Setinha pulsando sugerindo rolagem */
.scroll-indicator-wrapper {
    position: relative;
    padding-bottom: 2rem;
    z-index: 10;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: auto;
}

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.scroll-indicator:hover {
    opacity: 1;
}

.scroll-indicator span {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

@keyframes bounceScroll {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* Animações Escalonadas Premium (Apple/Stripe Style) - Fazem os itens subirem sequencialmente na inicialização */
/* Consideramos que o Intro termina por volta de 1s. */
.fade-up {
    opacity: 0;
    animation: fadeUpAnim 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeUpAnim {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.97);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Sequência exata de entrada - Usada em conjunto com .fade-up nos elementos HTML */
.sequence-nav {
    animation-delay: 1.0s;
}

.sequence-1 {
    animation-delay: 1.2s;
}

.sequence-2 {
    animation-delay: 1.4s;
}

.sequence-2-5 {
    animation-delay: 1.5s;
}

.sequence-3 {
    animation-delay: 1.6s;
}

.sequence-4 {
    animation-delay: 1.8s;
}

.sequence-5 {
    animation-delay: 2.1s;
}

.sequence-6 {
    animation-delay: 2.5s;
}

/* =========================================================
 * RESPONSIVIDADE E TIPOGRAFIA FLUIDA (Otimização Completa do Banner)
 * ========================================================= */

/* 1. Notebooks e Telas Médias (993px a 1200px) */
@media (max-width: 1200px) {
    .line-1 {
        font-size: 2.5rem;
        letter-spacing: 3px;
    }

    .line-2 {
        font-size: 5rem;
    }

    .hero-subtitle {
        font-size: 2.8rem;
        letter-spacing: 6px;
    }
}

/* 2. Tablets (769px a 992px) */
@media (max-width: 992px) {
    .line-1 {
        font-size: 2rem;
    }

    .line-2 {
        font-size: 4rem;
    }

    .hero-subtitle {
        font-size: 2.2rem;
        margin-bottom: 3.6vh;
    }

    .btn-primary {
        padding: 1.2rem 3rem;
    }
}

/* 3. Mobile Large (481px a 768px) */
@media (max-width: 768px) {
    .navbar {
        padding: 1.5rem 5%;
    }

    .logo-text {
        font-size: 1.4rem;
    }

    .hero-date-wrapper {
        font-size: 0.95rem;
        margin-bottom: 1.5vh;
    }

    .line-1 {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }

    .line-2 {
        font-size: 3rem;
        letter-spacing: -1px;
    }

    .hero-subtitle {
        font-size: 1.6rem;
        letter-spacing: 4px;
        margin-bottom: 2.8vh;
    }

    .hero-bottom {
        margin-bottom: 2.5vh;
    }

    .btn-primary {
        width: 100%;
        max-width: 320px;
        font-size: 1.1rem;
        padding: 1.2rem;
    }

    .countdown-minimal {
        padding: 1rem 2rem;
        border-radius: 16px;
    }

    .countdown-numbers {
        font-size: 1.2rem;
    }

    .countdown-numbers .lbl {
        font-size: 0.75rem;
        margin-right: 1rem;
    }

    .scroll-indicator-wrapper {
        padding-bottom: 1.2rem;
    }

    .scroll-indicator span {
        font-size: 0.6rem;
    }
}

/* 4. Mobile Small (Até 480px - Ex: iPhone SE) */
@media (max-width: 480px) {
    .navbar {
        padding: 1.2rem 4%;
    }

    .btn-nav-ghost {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }

    .hero-date-wrapper {
        font-size: 0.85rem;
        margin-bottom: 1.5vh;
    }

    /* Tipografia fluida para evitar quebra desajeitada em telas muito estreitas */
    .line-1 {
        font-size: clamp(1.1rem, 4vw, 1.3rem);
        letter-spacing: 1px;
    }

    .line-2 {
        font-size: clamp(2rem, 11vw, 2.6rem);
        letter-spacing: -1px;
    }

    .hero-subtitle {
        font-size: clamp(1.2rem, 6vw, 1.4rem);
        letter-spacing: 3px;
        margin-bottom: 2.6vh;
    }

    .hero-bottom {
        margin-bottom: 2.5vh;
    }

    .btn-primary {
        max-width: 100%;
        font-size: 1rem;
        padding: 1.1rem;
    }

    .countdown-minimal {
        padding: 1rem;
        width: 100%;
        max-width: 320px;
        border-radius: 12px;
    }

    .countdown-numbers {
        font-size: 1.1rem;
        display: flex;
        justify-content: center;
        gap: 0.5rem;
    }

    .countdown-numbers .lbl {
        margin-right: 0;
    }

    /* Indicador de scroll no celular: reduz um pouco para não poluir se necessário, mas visível */
    .hero {
        padding-top: 60px;
    }

    .scroll-indicator-wrapper {
        padding-bottom: 0.5rem;
    }

    .scroll-indicator span {
        font-size: 0.65rem;
        margin-bottom: 0.2rem;
    }
}

/* 5. Proteção de Altura Extrema (Laptops achatados ou Mobile Horizontal) - Reduz margens se a altura da tela for muito pequena */
@media (max-height: 800px) {
    .hero {
        padding-top: max(70px, 8vh);
        padding-bottom: 0;
    }

    .hero-title {
        margin-bottom: 1vh;
    }

    .hero-subtitle {
        margin-bottom: 1.5vh;
    }

    .hero-date-wrapper {
        margin-bottom: 1.5vh;
    }

    .hero-bottom {
        margin-bottom: 2vh;
    }
}

@media (max-height: 680px) {
    .hero {
        padding-top: max(60px, 6vh);
        padding-bottom: 0;
    }

    .line-1 {
        font-size: 2.2rem;
    }

    .line-2 {
        font-size: 4.5rem;
    }

    .hero-subtitle {
        font-size: 2.5rem;
        margin-bottom: 1vh;
    }

    .hero-date-wrapper {
        margin-bottom: 1vh;
    }

    .hero-bottom {
        margin-bottom: 1.5vh;
    }

    .countdown-numbers {
        font-size: 2.5rem;
    }

    .btn-primary {
        padding: 1rem 3rem;
        font-size: 1.1rem;
    }
}

@media (max-height: 600px) {
    .hero {
        padding-top: 55px;
        padding-bottom: 0;
    }

    .line-1 {
        font-size: 1.8rem;
    }

    .line-2 {
        font-size: 3.5rem;
    }

    .hero-subtitle {
        font-size: 2rem;
        margin-bottom: 0.5vh;
    }

    .hero-date-wrapper {
        transform: scale(0.9);
        margin-bottom: 0.5vh;
    }

    .hero-bottom {
        margin-bottom: 1vh;
    }

    .countdown-numbers {
        font-size: 2rem;
    }

    .btn-primary {
        padding: 0.8rem 2.5rem;
        font-size: 1rem;
    }

    .scroll-indicator-wrapper {
        padding-bottom: 0.2rem;
    }
}

/* =========================================================
 * 6. MODAL DE PRÉ-INSCRIÇÃO (Glassmorphism & Responsivo)
 * ========================================================= */

/* Fundo escuro desfocado atrás do Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 11, 20, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    padding: 1rem;
}

/* Transição de visibilidade via script JS */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Corpo principal da caixa do Modal */
.modal-container {
    background: rgba(10, 25, 47, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(212, 175, 55, 0.05);
    border-radius: 20px;
    padding: 2.5rem;
    width: 100%;
    max-width: 600px;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 90vh;
    overflow-y: auto;
}

/* Custom scrollbar para rolagens internas no modal caso a tela seja pequena */
.modal-container::-webkit-scrollbar {
    width: 6px;
}

.modal-container::-webkit-scrollbar-track {
    background: transparent;
}

.modal-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.modal-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

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

/* Botão Fechar (X) - Canto superior direito do Modal */
.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 2rem;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
    padding: 0.2rem;
    z-index: 50;
}

.modal-close-btn:hover {
    color: var(--color-white);
}

/* Textos de Cabeçalho dentro do Modal */
.modal-heading {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.modal-subheading {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2rem;
    line-height: 1.4;
}

/* Formulário e Elementos de Input dentro do Modal */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
    text-align: left;
}

.form-group label {
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group select {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    color: var(--color-white);
    font-family: var(--font-main);
    font-size: 0.95rem;
    transition: all 0.25s ease;
    outline: none;
}

.form-group select option {
    background: #050b14;
    color: var(--color-white);
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--color-yellow);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.15);
    background: rgba(255, 255, 255, 0.08);
}

/* Grid Responsivo para exibir dois campos de form lado a lado */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

/* Mensagens de validação e erro nos campos */
.error-msg {
    color: #ff4d4d;
    font-size: 0.75rem;
    margin-top: 0.35rem;
    min-height: 1rem;
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.error-msg.visible {
    display: block;
    opacity: 1;
}

.form-group input.invalid,
.form-group select.invalid {
    border-color: #ff4d4d;
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.15);
}

/* Estilos de Checkboxes e botões de Radio costumizados para o Modal */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.checkbox-group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1.2rem;
    margin-top: 0.5rem;
}

@media (max-width: 576px) {
    .checkbox-group-grid {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
    padding: 0.15rem 0;
    transition: transform 0.2s ease;
}

.checkbox-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.25s ease;
    flex-shrink: 0;
    padding: 0;
}

.checkbox-item input[type="checkbox"]:focus {
    border-color: var(--color-yellow);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
}

.checkbox-item input[type="checkbox"]:checked {
    background: var(--color-green);
    border-color: var(--color-green);
}

/* Checkmark animado (Vezinho) */
.checkbox-item input[type="checkbox"]:checked::after {
    content: '';
    width: 8px;
    height: 4px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg) translate(0.5px, -1px);
    position: absolute;
}

.checkbox-text {
    font-size: 0.9rem;
    font-weight: 300;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: rgba(255, 255, 255, 0.85);
}

/* Campo oculto de 'especificar outros' */
.outro-especificacao-wrapper {
    margin-top: 0.75rem;
    width: 100%;
}

.outro-especificacao-wrapper.hide {
    display: none !important;
}

/* Radio buttons estilizados de forma similar aos checkboxes */
.checkbox-item input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.25s ease;
    flex-shrink: 0;
    padding: 0;
}

.checkbox-item input[type="radio"]:focus {
    border-color: var(--color-yellow);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
}

.checkbox-item input[type="radio"]:checked {
    background: transparent;
    border-color: var(--color-green);
}

.checkbox-item input[type="radio"]:checked::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--color-green);
    border-radius: 50%;
    position: absolute;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

/* Formulário Wizard (Animações entre as Etapas 1, 2, 3) */
.form-step {
    animation: fadeInStep 0.4s ease forwards;
}

.form-step.hide {
    display: none !important;
}

@keyframes fadeInStep {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.step-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Barra de Progresso visual no topo do Modal */
.progress-container {
    margin-bottom: 2rem;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.progress-bar-bg {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--color-yellow);
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Botões e Ações de navegação do Modal (Voltar, Próximo, Enviar) */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

.step-actions {
    justify-content: space-between;
    align-items: center;
}

.step-actions .btn-next:only-child {
    margin-left: auto;
}

.btn-modal-cancel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.85rem 2rem;
    border-radius: 50px;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-modal-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.4);
}

.btn-modal-submit,
.btn-modal-close-success {
    background: var(--color-green);
    border: 1px solid var(--color-green);
    color: var(--color-white);
    padding: 0.85rem 2.2rem;
    border-radius: 50px;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 168, 89, 0.3);
}

.btn-modal-submit:hover,
.btn-modal-close-success:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 168, 89, 0.6);
    background: var(--color-green-hover);
    border-color: var(--color-green-hover);
}

.btn-modal-submit:active,
.btn-modal-close-success:active {
    transform: translateY(2px) scale(0.96);
    box-shadow: 0 5px 15px rgba(0, 168, 89, 0.4);
}

/* Conteúdo de Sucesso - Visível após envio do form */
.modal-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 0;
}

.success-icon-wrapper {
    margin-bottom: 1.5rem;
    background: rgba(214, 175, 87, 0.1);
    padding: 1rem;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(212, 175, 55, 0.2);
    animation: successPulse 2s infinite ease-in-out;
}

@keyframes successPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0px rgba(212, 175, 55, 0.2);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(212, 175, 55, 0);
    }
}

.success-message {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 480px;
}

/* Responsividade do Modal para mobile */
@media (max-width: 576px) {
    .modal-container {
        padding: 1.75rem 1.25rem;
        border-radius: 16px;
        max-height: 95vh;
    }

    .modal-heading {
        font-size: 1.6rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .modal-actions {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }

    .btn-modal-cancel,
    .btn-modal-submit,
    .btn-modal-close-success {
        width: 100%;
        padding: 0.8rem;
    }
}

/* =========================================================
 * DIVISORES ENTRE SEÇÕES (FIM DO HERO E PRÓXIMA SEÇÃO)
 * ========================================================= */

/* Separador Minimalista Hero -> Próxima Seção (Santos SVG) */
.santos-divider-wrapper {
    position: relative;
    width: 100%;
    /* Mantém o fundo integrado com a próxima seção */
    background-color: #FAFAF8;
    display: flex;
    justify-content: center;
    overflow: hidden;
    z-index: 10;
    margin-top: -1px;
    /* Remove fresta */
}

/* Imagem decorativa no divisor */
.santos-divider-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* Evita que a imagem fique muito pequena em telas grandes ou muito deformada */
    min-width: 1000px;
    max-height: 120px;
}

/* =========================================================
 * 7. SEÇÃO PREMIUM: O FÓRUM BRASIL CULTURAL
 * ========================================================= */
.premium-about-section {
    position: relative;
    background-color: #FAFAF8;
    /* Fundo minimalista off-white */
    width: 100%;
    overflow: hidden;
    padding: 8rem 5% 4rem 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-blue-dark);
}

/* Contêiner de animações ao fundo (panorâmica lenta) */
.premium-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.topo-bg-svg {
    width: 100%;
    height: 100%;
    min-width: 1000px;
    animation: slowPan 60s linear infinite alternate;
}

@keyframes slowPan {
    0% {
        transform: scale(1.05) translate(0, 0);
    }

    100% {
        transform: scale(1.05) translate(-2%, -2%);
    }
}

.premium-container {
    max-width: 1200px;
    width: 100%;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.premium-header {
    text-align: center;
    margin-bottom: 4rem;
}

.premium-subtitle {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 500;
    color: #8c8c8c;
    display: block;
    margin-bottom: 1rem;
}

.premium-divider-line {
    width: 40px;
    height: 1px;
    background: #e0e0e0;
    margin: 0 auto 2rem auto;
}

.premium-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    color: var(--color-blue-inst);
}

.premium-title .gradient-text {
    background: linear-gradient(135deg, var(--color-blue-inst) 0%, var(--color-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.premium-text-content {
    max-width: 820px;
    text-align: center;
    margin-bottom: 5rem;
}

.premium-text-content p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #5a5a5a;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

.premium-text-content p:last-child {
    margin-bottom: 0;
}

/* Grid de cards de destaques informativos */
.premium-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
    margin-bottom: 6rem;
}

/* Card individual (Glassmorphism e Box Shadow no Hover) */
.premium-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 22px;
    padding: 3.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

/* Efeito sutil no fundo do card (Glassmorphism) */
.premium-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    border-radius: 22px;
}

/* Linha degradê no fundo que aparece preenchendo a borda inferior no hover */
.premium-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-green) 0%, var(--color-blue-inst) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.premium-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

.premium-card:hover::after {
    transform: scaleX(1);
}

.premium-card:hover .card-icon {
    transform: scale(1.1);
}

/* Ícones circulares dentro dos cards */
.card-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 1.8rem;
}

.icon-green {
    background: rgba(0, 107, 95, 0.08);
}

.icon-blue {
    background: rgba(10, 25, 47, 0.08);
}

.icon-yellow {
    background: rgba(212, 175, 55, 0.12);
}

.card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-blue-inst);
    margin-bottom: 1rem;
}

.card-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    font-weight: 300;
}

/* Divisória do Skyline para o final da Seção Premium */
.skyline-divider {
    width: 100%;
    height: 80px;
    position: relative;
    z-index: 10;
    margin-top: -1px;
    /* Evita fresta */
}

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

/* Delays dinâmicos pros cards em cascata, se ativados via scroll reveal script */
.card-delay-1 {
    animation-delay: 0.1s;
}

.card-delay-2 {
    animation-delay: 0.2s;
}

.card-delay-3 {
    animation-delay: 0.3s;
}

.card-delay-4 {
    animation-delay: 0.4s;
}

/* Responsividade Premium Section */
@media (max-width: 992px) {
    .premium-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 500px;
    }

    .premium-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .premium-title {
        font-size: 2rem;
    }

    .premium-text-content p {
        font-size: 1.05rem;
    }

    .elegant-quote {
        font-size: 1.3rem;
    }
}

/* =========================================================
 * 8. SEÇÃO CIDADE-SEDE (Santos, SP)
 * ========================================================= */
.host-city-section {
    position: relative;
    background-color: #ffffff;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Divisória de Transição Mureta de Santos (Svg Background inline) */
.mureta-transition-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    background-color: #ffffff;
    position: relative;
    margin-top: -1px;
    z-index: 10;
}

.mureta-transition-divider.divider-hero {
    background-color: transparent;
    margin-top: 0;
}

.mureta-divider-line {
    flex-grow: 1;
    height: 48px;
    background-repeat: repeat-x;
    background-size: 30px 48px;
}

.mureta-divider-left {
    background-image: url('data:image/svg+xml;utf8,<svg width="30" height="48" viewBox="0 0 30 48" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="14" x2="30" y2="14" stroke="%23d2d6dc" stroke-width="1"/><line x1="0" y1="34" x2="30" y2="34" stroke="%23d2d6dc" stroke-width="1"/><circle cx="15" cy="24" r="9" stroke="%23d2d6dc" stroke-width="1" fill="none"/><line x1="0" y1="14" x2="0" y2="34" stroke="%23d2d6dc" stroke-width="1"/></svg>');
    background-position: right;
}

.mureta-divider-right {
    background-image: url('data:image/svg+xml;utf8,<svg width="30" height="48" viewBox="0 0 30 48" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="14" x2="30" y2="14" stroke="%23d2d6dc" stroke-width="1"/><line x1="0" y1="34" x2="30" y2="34" stroke="%23d2d6dc" stroke-width="1"/><circle cx="15" cy="24" r="9" stroke="%23d2d6dc" stroke-width="1" fill="none"/><line x1="0" y1="14" x2="0" y2="34" stroke="%23d2d6dc" stroke-width="1"/></svg>');
    background-position: left;
}

.mureta-pillar {
    flex-shrink: 0;
}

.mureta-divider-text {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #a0aec0;
    margin: 0 20px;
    padding-left: 5px;
}

.container-city {
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8rem 6% 6rem 6%;
}

.city-badge {
    display: inline-block;
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: #b59226;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    padding: 0.4rem 1.4rem;
    border-radius: 50px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.05);
}

.city-title {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-blue-inst);
    margin-bottom: 1.8rem;
    letter-spacing: -0.5px;
}

.city-separator {
    color: var(--color-green);
    margin: 0 0.4rem;
}

.city-description {
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.8;
    color: #4a5568;
    max-width: 720px;
}

/* Responsividade da Seção da Cidade-Sede */
@media (max-width: 768px) {
    .host-city-section {
        padding: 0;
    }

    .container-city {
        padding: 5rem 5% 4rem 5%;
    }

    .city-title {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }

    .city-description {
        font-size: 1rem;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    .host-city-section {
        padding: 0 0 4rem 0;
    }

    .container-city {
        padding: 3rem 4% 0 4%;
    }

    .city-title {
        font-size: 1.45rem;
        letter-spacing: -0.2px;
    }

    .city-badge {
        font-size: 0.65rem;
        padding: 0.35rem 1.1rem;
        margin-bottom: 1.5rem;
    }

    .city-description {
        font-size: 0.95rem;
    }

    .mureta-divider-text {
        font-size: 0.7rem;
        letter-spacing: 3px;
        margin: 0 10px;
    }
}

/* =========================================================
 * RODAPÉ (FOOTER INSTITUCIONAL)
 * ========================================================= */

/* Linha com gradiente que separa o corpo do site e o Footer */
.footer-gradient-line {
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--color-blue-inst), var(--color-green), var(--color-yellow));
    box-shadow: 0 0 10px rgba(0, 107, 95, 0.2);
}

.site-footer {
    background-color: var(--color-blue-inst);
    /* Azul profundo para dar contraste sutil com o body */
    color: var(--color-white);
    padding: 4rem 6% 1.5rem 6%;
    font-family: var(--font-main);
    position: relative;
}

/* Distribuição de colunas usando CSS Grid */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    width: 270px;
    height: auto;
    object-fit: contain;
    margin-bottom: 1.5rem;
    align-self: flex-start;
}

.footer-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-yellow);
    letter-spacing: 0.5px;
}

.footer-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
}

.footer-subtitle {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--color-white);
    position: relative;
    padding-bottom: 0.5rem;
}

/* Sublinhado das seções do rodapé */
.footer-subtitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--color-green);
}

/* Lista de links do rodapé */
.footer-links {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover,
.footer-links a:focus {
    color: var(--color-yellow);
    transform: translateX(5px);
    outline: none;
}

/* Foco de acessibilidade nos links do footer */
.footer-links a:focus-visible {
    outline: 2px solid var(--color-yellow);
    outline-offset: 4px;
}

/* Links da lista de redes sociais no footer */
.social-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.social-link:hover,
.social-link:focus-visible {
    color: #ffffff;
    transform: translateX(4px);
    outline: none;
}

/* Ícones de mídias sociais */
.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-icon svg {
    transition: all 0.3s ease;
}

.social-icon:hover,
.social-icon:focus {
    background-color: var(--color-green);
    color: var(--color-white);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 107, 95, 0.4);
    outline: none;
}

.social-icon:focus-visible {
    outline: 2px solid var(--color-yellow);
    outline-offset: 4px;
}

/* Informações de contato e dados da base */
.info-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.info-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.info-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

/* Créditos e Direitos de marca da parte bem inferiror */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-credits {
    font-weight: 300;
}

/* Responsividade do Footer */
@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 3rem 2rem;
    }

    .footer-col {
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .site-footer {
        padding: 3rem 5% 1.5rem 5%;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .footer-logo {
        width: 270px;
        height: auto;
        align-self: center;
        margin-bottom: 2rem;
    }

    .footer-subtitle::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-col {
        align-items: center;
    }

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

    .info-block {
        align-items: center;
    }

    .footer-links a {
        padding: 0.5rem 0;
        /* Maior área de toque no celular */
    }
}

/* Pause animations in footer until in view (Otimização de Renderização) */
.site-footer .fade-up {
    animation-play-state: paused;
}

.site-footer .fade-up.in-view {
    animation-play-state: running;
}

/* =========================================================
 * COMPONENTE DE REDES SOCIAIS FLUTUANTE NA LATERAL
 * ========================================================= */
.floating-social {
    position: fixed;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}

.floating-social.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: slideInLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInLeft {
    0% {
        transform: translate(-20px, -50%);
        opacity: 0;
    }

    100% {
        transform: translate(0, -50%);
        opacity: 1;
    }
}

.social-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

/* Tooltip informando a rede social ao passar o mouse */
.social-tooltip {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    margin-left: 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 1);
    color: var(--color-blue-dark);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 1px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Tooltip Arrow (Setinha do balão) */
.social-tooltip::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -4px;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.95);
    border-left: 1px solid rgba(255, 255, 255, 1);
    border-bottom: 1px solid rgba(255, 255, 255, 1);
}

.social-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Identidade Visual - Cores específicas no hover de acordo com a ordem do botão (Fórum Brasil) */
.social-btn:nth-child(1):hover {
    border-color: var(--color-blue-inst);
    background: rgba(10, 25, 47, 0.6);
}

.social-btn:nth-child(2):hover {
    border-color: var(--color-green);
    background: rgba(0, 107, 95, 0.4);
}

.social-btn:nth-child(3):hover {
    border-color: var(--color-yellow);
    background: rgba(212, 175, 55, 0.2);
}

.social-btn:nth-child(4):hover {
    border-color: var(--color-white);
    background: rgba(255, 255, 255, 0.1);
}

.social-btn:hover .social-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* TEMA CLARO (Adaptação Dinâmica do Social Flutuante, para quando a seção atrás dele for clara) */
.floating-social.theme-light .social-btn {
    background: rgba(10, 25, 47, 0.05);
    border-color: rgba(10, 25, 47, 0.15);
    color: var(--color-blue-inst);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.floating-social.theme-light .social-btn:hover {
    background: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-white);
    box-shadow: 0 8px 25px rgba(0, 107, 95, 0.3);
}

.floating-social.theme-light .social-tooltip {
    background: var(--color-blue-inst);
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.1);
}

.floating-social.theme-light .social-tooltip::before {
    background: var(--color-blue-inst);
    border-color: transparent;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Forçar override das cores no hover do tema claro */
.floating-social.theme-light .social-btn:nth-child(1):hover,
.floating-social.theme-light .social-btn:nth-child(2):hover,
.floating-social.theme-light .social-btn:nth-child(3):hover,
.floating-social.theme-light .social-btn:nth-child(4):hover {
    border-color: var(--color-green);
    background: var(--color-green);
    color: var(--color-white);
}

/* Responsividade do Componente Flutuante */
@media (max-width: 992px) {
    .social-btn {
        width: 38px;
        height: 38px;
    }

    .social-btn svg {
        width: 18px;
        height: 18px;
    }

    .floating-social {
        left: 16px;
        gap: 10px;
    }
}

@media (max-width: 768px) {

    /* Melhor usabilidade: oculta completamente em mobile por falta de espaço */
    .floating-social {
        display: none !important;
    }
}

/* =======================================
 * GLOBAL SECTION STYLES (ESTILOS PADRÃO DE SEÇÕES)
 * ======================================= */

/* Classes bases para layout e grids (Padrão para as seções abaixo) */
section {
    background-color: var(--color-white);
    padding: 100px 0;
    color: var(--color-blue-inst);
}

section h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 50px;
    font-weight: 700;
}

.cards-grid,
.palestrantes-grid,
.noticias-grid,
.depoimentos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.card-base {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.card-base:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

/* Linhas de borda decorativa no topo de cards utilitários */
.card-border-blue {
    border-top: 4px solid var(--color-blue-inst);
}

.card-border-green {
    border-top: 4px solid var(--color-green);
}

.card-border-yellow {
    border-top: 4px solid var(--color-yellow);
}

/* DIVISORES ENTRE SEÇÕES ALTERNATIVOS (Imagens) */
.section-divider {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    background: transparent;
    opacity: 0.8;
}

.section-divider img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* =======================================
 * 2. SEÇÃO: SOBRE O FÓRUM
 * ======================================= */
.section-sobre {
    position: relative;
    overflow: hidden;
    padding: 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.sobre-content-relative {
    position: relative;
    z-index: 10;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    background: rgba(10, 25, 47, 0.92);
    /* Azul oficial da identidade com leve transparência */
    padding: 4rem 3rem;
    border-radius: 16px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.sobre-content-relative h2 {
    margin-bottom: 2rem;
    color: var(--color-yellow);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.sobre-text-box p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--color-white);
    margin-bottom: 1.5rem;
}

/* =======================================
 * 3. SEÇÃO: O QUE ESPERAR
 * ======================================= */
.section-esperar .esperar-card {
    padding: 40px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.esperar-card .icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 107, 95, 0.1);
    color: var(--color-green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.esperar-card:hover .icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    background: var(--color-green);
    color: #fff;
}

.esperar-card .content-wrapper {
    transition: transform 0.3s ease;
}

.esperar-card:hover .content-wrapper {
    transform: translateY(-10px);
}

.esperar-card h3 {
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.esperar-card p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* =======================================
 * 4. SEÇÃO: PROGRAMAÇÃO GERAL (SIMPLES)
 * ======================================= */
.programacao-intro {
    text-align: center;
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 50px;
    color: #64748b;
}

.programacao-cronograma {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.cronograma-item {
    background: #f8fafc;
    padding: 25px;
    border-left: 4px solid var(--color-blue-inst);
    border-radius: 8px;
}

.cronograma-item .time {
    font-weight: 700;
    color: var(--color-blue-inst);
    margin-bottom: 5px;
    display: block;
}

.cronograma-item h4 {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.cronograma-item p {
    color: #64748b;
    font-size: 0.9rem;
}

/* =======================================
 * 5. SEÇÃO: PALESTRANTES
 * ======================================= */
.palestrante-card {
    text-align: center;
    padding: 0 0 25px 0;
}

.palestrante-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    margin-bottom: 20px;
    background: #e2e8f0;
}

.palestrante-card h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.palestrante-card .cargo {
    color: var(--color-green);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.palestrante-card .tema {
    color: #64748b;
    font-size: 0.9rem;
    font-style: italic;
    padding: 0 20px;
}

/* =======================================
 * 6. SEÇÃO: EDIÇÕES ANTERIORES (CARDS)
 * ======================================= */
.edicoes-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.edicao-card {
    padding: 0;
}

.edicao-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    background: #cbd5e1;
}

.edicao-info {
    padding: 25px;
}

.edicao-info .ano {
    display: inline-block;
    background: var(--color-yellow);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.edicao-info h3 {
    margin-bottom: 10px;
}

.edicao-info p {
    color: #64748b;
    font-size: 0.95rem;
}

/* =======================================
 * 7. SEÇÃO: DEPOIMENTOS/EXPERIÊNCIAS
 * ======================================= */
.depoimento-card {
    padding: 40px 30px;
    text-align: left;
}

.depoimento-author {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.depoimento-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background: #cbd5e1;
    margin-right: 15px;
}

.depoimento-author h4 {
    margin: 0;
    font-size: 1.1rem;
}

.depoimento-text {
    font-style: italic;
    color: #475569;
    line-height: 1.6;
}

/* =======================================
 * 8. SEÇÃO: NOTÍCIAS RECENTES
 * ======================================= */
.noticia-card {
    padding: 0;
}

.noticia-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    background: #cbd5e1;
}

.noticia-info {
    padding: 25px;
}

.noticia-data {
    color: var(--color-green);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}

.noticia-info h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    line-height: 1.4;
}

.noticia-info p {
    color: #64748b;
    font-size: 0.9rem;
}

/* =======================================
 * 9. SEÇÃO: GALERIA DE FOTOS (MOSAICO)
 * ======================================= */
.galeria-mosaico {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 250px;
    gap: 15px;
}

.galeria-item {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #cbd5e1;
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.galeria-item:hover img {
    transform: scale(1.05);
}

/* =======================================
 * 10. SEÇÃO: PARCEIROS E PATROCINADORES
 * ======================================= */
.section-parceiros {
    padding: 100px 0;
    background-color: #ffffff;
}

.partners-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    align-items: start;
}

.partner-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.partner-col-title {
    font-size: 1.5rem;
    color: var(--color-green);
    border-bottom: 2px solid var(--color-green);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    text-align: left;
}

.partner-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1rem;
}

/* Espaços reservados (Placeholders) caso logos ainda não existam */
.partner-placeholder {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.2;
    color: #495057;
    font-weight: 500;
    min-height: 80px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.partner-placeholder:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

@media (max-width: 992px) {
    .partners-grid-layout {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}

/* =======================================
 * 11. SEÇÃO FINAL: INSCRIÇÃO DIRETA
 * ======================================= */
.section-inscricao {
    background: linear-gradient(135deg, var(--color-blue-inst) 0%, rgba(10, 25, 47, 0.9) 100%);
    color: #fff;
    text-align: center;
    padding: 120px 0;
}

.section-inscricao h2 {
    color: #fff;
    margin-bottom: 20px;
}

.section-inscricao p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.section-inscricao .btn-primary {
    font-size: 1.1rem;
    padding: 15px 40px;
}

/* =======================================
 * EFEITOS ADICIONAIS GLOBAIS (KEN BURNS E PARTÍCULAS EXTRAS)
 * ======================================= */

/* Motor Cinematográfico Nativo (Ken Burns) repetido aqui - usado para dar leve zoom infinito em imagens de fundo */
#video-layer {
    opacity: 0;
    transition: opacity 2s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.kb-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1);
    animation: kenBurnsAnim 120s infinite linear;
}

@keyframes kenBurnsAnim {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    3% {
        opacity: 1;
    }

    11% {
        opacity: 1;
    }

    14% {
        opacity: 0;
        transform: scale(1.15);
    }

    100% {
        opacity: 0;
        transform: scale(1.15);
    }
}

/* Partículas CSS alternativas (Profundidade) */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
}

.p1 {
    width: 4px;
    height: 4px;
    left: 10%;
    animation-duration: 25s;
    animation-delay: 0s;
}

.p2 {
    width: 6px;
    height: 6px;
    left: 30%;
    animation-duration: 30s;
    animation-delay: -5s;
}

.p3 {
    width: 3px;
    height: 3px;
    left: 50%;
    animation-duration: 20s;
    animation-delay: -10s;
}

.p4 {
    width: 5px;
    height: 5px;
    left: 70%;
    animation-duration: 28s;
    animation-delay: -15s;
}

.p5 {
    width: 4px;
    height: 4px;
    left: 90%;
    animation-duration: 35s;
    animation-delay: -2s;
}

.p6 {
    width: 7px;
    height: 7px;
    left: 20%;
    animation-duration: 40s;
    animation-delay: -8s;
}

@keyframes floatUp {
    0% {
        transform: translateY(110vh) scale(0.5);
        opacity: 0;
    }

    20% {
        opacity: 0.8;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(-10vh) scale(1.5);
        opacity: 0;
    }
}

/* =========================================================================
   ESTRUTURAÇÃO DAS NOVAS SEÇÕES
   ========================================================================= */

/* Divisor Fotográfico - Grid com imagens na horizontal dividindo conteúdos */
.divider-fotos {
    display: flex;
    width: 100vw;
    height: 30vh;
    overflow: hidden;
}

.divider-foto-item {
    flex: 1;
    background-size: cover;
    background-position: center;
    position: relative;
}

.divider-foto-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 25, 47, 0.4);
    transition: background 0.3s ease;
}

.divider-foto-item:hover::after {
    background: rgba(10, 25, 47, 0.1);
}

/* Galeria Sobre o Fórum - Items individuais na galeria */
.galeria-imagem {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.galeria-imagem:hover {
    transform: translateY(-5px);
}

.galeria-imagem .legenda {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(10, 25, 47, 0.9), transparent);
    color: var(--color-white);
    padding: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
}

/* =========================================================================
   AGENDA COMING SOON STATE
========================================================================= */
.section-agenda {
    padding: 6rem 0;
    position: relative;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section-agenda h2 {
    color: var(--color-blue-inst);
    text-align: center;
    margin-bottom: 2rem;
}

.agenda-coming-soon {
    position: relative;
    z-index: 10;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    /* Padrão visual idêntico ao bloco da seção Sobre (.sobre-content-relative) */
    background: var(--color-blue-inst);
    padding: 4rem 3rem;
    border-radius: 16px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.agenda-content {
    position: relative;
    z-index: 1;
}

.agenda-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 2rem auto;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.agenda-icon-wrapper svg {
    stroke: var(--color-white);
}

/* Hierarquia de texto idêntica à seção Sobre */
.agenda-content h3 {
    color: var(--color-white);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.agenda-main-desc {
    color: var(--color-white);
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto 2rem auto;
}

.agenda-alert-text {
    display: inline-block;
    color: var(--color-white);
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.8rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
    .agenda-coming-soon {
        padding: 3rem 1.5rem;
    }
    
    .agenda-content h3 {
        font-size: 1.5rem;
    }
    
    .agenda-main-desc {
        font-size: 1rem;
    }
}

/* Timeline Programação - Linha do tempo visual */
.timeline-container {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 2rem 0;
    padding-left: 2rem;
}

.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
}

.timeline-item {
    position: relative;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.timeline-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(10px);
    border-color: rgba(0, 168, 89, 0.3);
}

.timeline-dot {
    position: absolute;
    top: 2rem;
    left: -2rem;
    width: 12px;
    height: 12px;
    background: var(--color-green);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(0, 168, 89, 0.5);
}

.timeline-time {
    font-size: 0.85rem;
    color: var(--color-yellow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.timeline-content h3 {
    margin-top: 0.5rem;
    font-size: 1.25rem;
}

/* Botões simples textuais sem fundo */
.btn-text {
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 0.9rem;
    text-decoration: underline;
    text-decoration-color: var(--color-green);
    cursor: pointer;
    margin-top: 1rem;
    padding: 0;
}

/* Estilos complementares de palestrantes */
.palestrantes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.palestrante-card {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.palestrante-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 auto 1rem;
}

.palestrante-card h4 {
    margin-bottom: 0.3rem;
    color: var(--color-white);
}

.palestrante-card p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Galeria Edições Anteriores - Estilo com overlay escura */
.edicoes-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .edicoes-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .edicoes-gallery {
        grid-template-columns: 1fr;
    }
}

.edicao-gallery-item {
    height: 300px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.edicao-gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.edicao-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem 1.5rem 1.5rem;
    background: linear-gradient(to top, rgba(10, 25, 47, 0.95), transparent);
    color: var(--color-white);
}

.edicao-overlay h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
}

.edicao-overlay p {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Modais Adicionais para reprodutores de vídeo/tela grande */
.modal-video {
    max-width: 900px;
    padding: 0;
    background: #000;
}

.modal-video .modal-close-btn {
    top: -40px;
    right: 0;
    color: var(--color-white);
}

.modal-large {
    max-width: 800px;
}

.video-content {
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
}

/* =========================================================================
   TIMELINE INTERATIVA (PROGRAMAÇÃO DETALHADA COM ABAS)
   ========================================================================= */
.interactive-timeline {
    margin-top: 2rem;
    position: relative;
}

/* Navegação da Timeline (Botões dos Dias) */
.timeline-nav {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 3rem;
}

.timeline-nav::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%);
    z-index: 1;
}

/* Botões/Abas correspondentes a cada dia */
.timeline-tab {
    background: var(--color-dark-bg);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 0.8rem 2rem;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.timeline-tab:hover {
    border-color: rgba(0, 168, 89, 0.5);
    color: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 168, 89, 0.2);
}

.timeline-tab.active {
    border-color: var(--color-green);
    color: var(--color-white);
    box-shadow: 0 0 20px rgba(0, 168, 89, 0.4);
}

.day-num {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.day-month {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.2rem;
}

/* Painéis de Conteúdo revelados pelas abas */
.timeline-panels {
    position: relative;
}

.timeline-panel {
    display: none;
    opacity: 0;
}

.timeline-panel.active {
    display: block;
    animation: fadeSlideIn 0.5s forwards ease-out;
}

@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cards individuais de cada atividade dentro do painel do dia */
.activity-card {
    display: flex;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

.activity-card:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-3px);
    border-color: rgba(0, 168, 89, 0.3);
    box-shadow: 0 10px 30px rgba(0, 168, 89, 0.1);
}

.activity-time {
    padding: 1.5rem;
    background: rgba(0, 168, 89, 0.1);
    color: var(--color-yellow);
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.activity-details {
    padding: 1.5rem;
    flex: 1;
}

.activity-location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-green);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.activity-theme {
    font-size: 1.25rem;
    color: var(--color-white);
    margin: 0 0 0.5rem 0;
}

.activity-desc {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-size: 0.95rem;
}

.panel-action {
    text-align: center;
    margin-top: 2rem;
}

/* Responsivo para a Timeline Interativa */
@media (max-width: 768px) {
    .timeline-nav {
        flex-direction: column;
        gap: 1rem;
    }

    .timeline-nav::before {
        width: 2px;
        height: 100%;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }

    .timeline-tab {
        flex-direction: row;
        gap: 1rem;
        justify-content: center;
    }

    .activity-card {
        flex-direction: column;
    }

    .activity-time {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding: 1rem;
        min-width: auto;
    }
}

/* =========================================================================
   SEÇÃO TEASER (NOVA) LOGO APÓS O HERO
   ========================================================================= */
.section-hero-teaser {
    position: relative;
    width: 100%;
    min-height: 500px;
    height: 60vh;
    max-height: 700px;
    background-image: url('assets/img/capa.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.teaser-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 25, 47, 0.6);
    z-index: 1;
}

.teaser-content-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 800px;
    padding: 2rem;
}

.teaser-content-wrapper h2 {
    font-size: 2.5rem;
    color: var(--color-white);
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.teaser-content-wrapper p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
    line-height: 1.6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.teaser-content-wrapper .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .section-hero-teaser {
        min-height: 400px;
        height: 50vh;
        background-attachment: scroll;
    }

    .teaser-content-wrapper h2 {
        font-size: 2rem;
    }
}

/* =========================================================================
   NOVA SEÇÃO: NEWSLETTER (FORMULÁRIO DE INSCRIÇÃO SIMPLES)
   ========================================================================= */
.section-newsletter {
    background: var(--color-blue-inst);
    padding: 6rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.newsletter-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-container h2 {
    font-size: 2.5rem;
    color: var(--color-yellow);
    margin-bottom: 1rem;
}

.newsletter-container p {
    font-size: 1.1rem;
    color: var(--color-white);
    margin-bottom: 2rem;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.newsletter-form .form-group {
    position: relative;
    text-align: left;
}

.newsletter-form input {
    width: 100%;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--color-white);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-green);
    background: rgba(255, 255, 255, 0.1);
}

/* Mensagem de Erro do form */
.newsletter-form .error-message {
    color: #e74c3c;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    display: block;
}

.newsletter-form .error-message.hide {
    display: none;
}

.newsletter-form button {
    margin-top: 1rem;
    width: 100%;
}

/* Feedback de sucesso após envio da newsletter */
.newsletter-success {
    background: rgba(0, 168, 89, 0.1);
    border: 1px solid rgba(0, 168, 89, 0.3);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    animation: fadeSlideIn 0.5s ease;
}

.newsletter-success.hide {
    display: none;
}

.newsletter-success svg {
    margin-bottom: 1rem;
}

.newsletter-success h3 {
    color: var(--color-yellow);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.newsletter-success p {
    color: var(--color-white);
    margin: 0;
}

/* =========================================================================
   POLAROID BACKGROUND ANIMATION (Fundo fotográfico animado de memórias)
   ========================================================================= */
.polaroid-background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilo individual de cada foto do tipo Polaroid no fundo */
.polaroid-item {
    position: absolute;
    width: 220px;
    height: 260px;
    background: #fff;
    padding: 10px 10px 40px 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    opacity: 0;
    transform-origin: center center;
    will-change: transform, opacity;
    transform: translate(0, 0) scale(0.5) rotate(0deg);
    z-index: var(--z);
}

.polaroid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
    opacity: 0.85;
    /* Destaque 40% (texto tem 60%) */
    filter: blur(0.5px);
    transition: opacity 0.5s ease;
}

.polaroid-item::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 40px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 2px;
}

/* Animação disparada para "espalhar" as polaroids (Fan Out) e flutuarem */
.fan-active .polaroid-item {
    animation: polaroidFanOut 1.2s cubic-bezier(.22, 1, .36, 1) forwards, polaroidFloat var(--f) ease-in-out infinite alternate;
    animation-delay: var(--d), calc(1.2s + var(--d));
}

@keyframes polaroidFanOut {
    0% {
        opacity: 0;
        transform: translate(0, 50px) scale(0.6) rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r));
    }
}

@keyframes polaroidFloat {
    0% {
        transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r));
    }

    100% {
        transform: translate(calc(var(--x) + 2px), calc(var(--y) - 6px)) scale(1.02) rotate(calc(var(--r) + 1.5deg));
    }
}

/* Utilitários para ocultar partes em tablet/mobile */
@media (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .polaroid-item {
        width: 150px;
        height: 180px;
        padding: 6px 6px 25px 6px;
    }

    .sobre-content-relative {
        padding: 1.5rem;
    }
}

/* =========================================================================
   SEÇÃO DE VÍDEOS (NOVA)
   ========================================================================= */
.section-videos {
    padding: 6rem 0;
    text-align: center;
    background-color: var(--color-blue-inst);
}

.section-videos h2 {
    color: var(--color-yellow);
    margin-bottom: 1rem;
    font-size: 2.2rem;
}

.videos-subtitle {
    font-size: 1.1rem;
    color: var(--color-white);
    margin-bottom: 4rem;
}

.videos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    align-items: center;
}

/* Container responsivo que força proporção 16:9 pros iFrames dos vídeos */
.video-item {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    background: #000;
}

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

/* YouTube Facade (Carregamento sob demanda) */
.video-facade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.video-facade .video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.video-facade:hover .video-thumb,
.video-facade:focus-visible .video-thumb {
    transform: scale(1.05);
    filter: brightness(0.9);
}

.video-facade .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    transition: transform 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.video-facade:hover .play-btn,
.video-facade:focus-visible .play-btn {
    transform: translate(-50%, -50%) scale(1.15);
}

.video-facade .play-btn svg .play-bg {
    transition: fill 0.3s ease;
}

.video-facade:hover .play-btn svg .play-bg,
.video-facade:focus-visible .play-btn svg .play-bg {
    fill: var(--color-green);
}

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

/* =========================================================================
   HERO ESQUERDA (ALINHAMENTO & ONDAS) - Estilo para hero text-align left
   ========================================================================= */
.hero-content-left {
    position: relative;
    z-index: 10;
    text-align: left;
    width: 100%;
    max-width: 1200px;
    padding: 0 4%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 25vh;
    margin-bottom: auto;
}

.countdown-left {
    align-items: flex-start !important;
}

.countdown-left .countdown-numbers {
    justify-content: flex-start !important;
}

/* Ondas SVG decorativas no canto do Hero */
.hero-waves {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    max-width: 700px;
    z-index: 5;
    /* Atrás do conteúdo */
    pointer-events: none;
}

/* Centraliza os elementos na versão mobile caso o desktop use formato à esquerda */
@media (max-width: 768px) {
    .hero-content-left {
        margin-top: 15vh;
        align-items: center;
        text-align: center;
    }

    .countdown-left {
        align-items: center !important;
    }

    .countdown-left .countdown-numbers {
        justify-content: center !important;
    }

    .hero-waves {
        width: 80%;
    }
}

/* === LOADER DO MODAL DE VÍDEO === */
.video-content {
    position: relative;
    background: var(--color-dark);
}

.video-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10, 25, 47, 0.95);
    color: var(--color-white);
    z-index: 2;
    transition: opacity 0.4s ease;
    border-radius: 16px;
}

.video-loader p {
    margin-top: 15px;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
}

.video-loader.hide-loader {
    opacity: 0;
    pointer-events: none;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: var(--color-yellow);
    animation: spin 1s ease-in-out infinite;
}

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

#youtube-player {
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    position: relative;
}

#youtube-player.loaded {
    opacity: 1;
}
/* === STICKY MOBILE CTA === */
.mobile-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem 1.5rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--color-dark) 40%, transparent);
    z-index: 900;
    display: flex;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.mobile-sticky-cta.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mobile-sticky-cta .btn-primary {
    width: 100%;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

@media (min-width: 769px) {
    .mobile-sticky-cta {
        display: none !important;
    }
}
/* Melhorias na Galeria de Edições Anteriores com object-fit e img real */
.edicao-gallery-item {
    height: 300px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.edicao-gallery-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.edicao-gallery-item:hover img {
    transform: scale(1.08);
}

.edicao-gallery-item .edicao-overlay {
    z-index: 2;
}
/* =========================================================================
   7. SEÇÃO PALESTRANTES
========================================================================= */
.section-palestrantes {
    padding: 6rem 0;
    position: relative;
    background: #ffffff;
}

.section-palestrantes h2 {
    color: var(--color-blue-inst);
    text-align: center;
    margin-bottom: 1rem;
}

.section-palestrantes .section-subtitle {
    color: var(--color-green);
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem auto;
    font-size: 1.1rem;
    font-weight: 500;
}

.palestrantes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.palestrante-card {
    background: var(--color-blue-inst);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.palestrante-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 168, 89, 0.3);
}

.palestrante-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: border-color 0.3s ease;
}

.palestrante-card:hover .palestrante-avatar {
    border-color: var(--color-green);
}

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

.palestrante-info h3 {
    color: #ffffff;
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.palestrante-role {
    display: block;
    color: var(--color-yellow);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.palestrante-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
    font-style: italic;
}

/* Responsividade Palestrantes */
@media (max-width: 1024px) {
    .palestrantes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .palestrantes-grid {
        grid-template-columns: 1fr;
    }
    .section-palestrantes {
        padding: 4rem 0;
    }
}
/* =========================================================================
   COUNTDOWN POSICIONADO NO CANTO INFERIOR DIREITO DO HERO
========================================================================= */

/* Em desktop: posição absoluta no canto inferior direito da hero */
@media (min-width: 1025px) {
    .hero-countdown-right {
        position: absolute;
        right: 5%;
        bottom: 12vh;
        width: auto;
        margin: 0;
        justify-content: flex-end;
    }
}

/* Tablet: reduz deslocamento lateral */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-countdown-right {
        position: absolute;
        right: 3%;
        bottom: 10vh;
        width: auto;
        margin: 0;
        justify-content: flex-end;
    }
}

/* Mobile: volta ao fluxo normal, centralizado */
@media (max-width: 768px) {
    .hero-countdown-right {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        justify-content: center;
        margin-bottom: 2vh;
    }

    .hero-countdown-right .countdown-left {
        align-items: center !important;
    }

    .hero-countdown-right .countdown-numbers {
        justify-content: center !important;
    }
}
/* =========================================================================
   7. PALESTRANTES
   ========================================================================= */
.section-palestrantes {
    padding: 6rem 0;
    position: relative;
    background: #ffffff;
}

.section-palestrantes h2 {
    color: var(--color-blue-inst);
    text-align: center;
    margin-bottom: 1rem;
}

.section-palestrantes .section-subtitle {
    text-align: center;
    color: #4a5568;
    max-width: 600px;
    margin: 0 auto 4rem auto;
    font-size: 1.15rem;
    line-height: 1.6;
}

.palestrantes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.palestrante-card {
    background: var(--color-blue-inst);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Detalhe superior da marca (linha colorida ao passar o mouse) */
.palestrante-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-blue-inst), var(--color-green), var(--color-yellow));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.palestrante-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

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

.palestrante-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin-bottom: 1.5rem;
    position: relative;
    padding: 4px;
    background: linear-gradient(135deg, rgba(10,25,47,0.05), rgba(212,175,55,0.15));
}

.palestrante-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #ffffff;
    background-color: #f5f5f5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.palestrante-info h3 {
    color: var(--color-white);
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.palestrante-role {
    display: block;
    color: var(--color-green);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1.2rem;
}

.palestrante-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    font-style: italic;
}

/* Responsividade Palestrantes */
@media (max-width: 1200px) {
    .palestrantes-grid {
        gap: 1.5rem;
    }
}

@media (max-width: 1024px) {
    .palestrantes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .palestrantes-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .palestrante-card {
        padding: 2rem;
    }
}

/* =========================================================================
 * 9. PATROCINADORES EM DESTAQUE (Carrossel Infinito CSS)
 * ========================================================================= */

.section-patrocinadores {
    background: linear-gradient(to bottom, #FFFFFF, #F8FAFC);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

/* Efeito Glow Abstrato no Fundo (claro e elegante) */
.section-patrocinadores::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

/* Ajuste das Cores dos Textos do Cabeçalho */
.section-patrocinadores h2 {
    color: var(--color-blue-inst);
    font-weight: 700;
}

.section-patrocinadores .section-subtitle {
    color: #4a5568;
    max-width: 600px;
    margin: 0 auto;
}

.section-patrocinadores .container {
    position: relative;
    z-index: 1;
    margin-bottom: 3rem;
}

.sponsors-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: 2rem 0;
    cursor: grab;
}

.sponsors-carousel-wrapper:active {
    cursor: grabbing;
}

/* Máscaras de esmaecimento lateral */
.sponsors-carousel-wrapper::before,
.sponsors-carousel-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 15%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.sponsors-carousel-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
}

.sponsors-carousel-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
}

.sponsors-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    /* Duração da animação define a velocidade. 20s para um movimento lento e elegante */
    animation: infinite-scroll 25s linear infinite;
}

/* Pausa no Hover */
.sponsors-track:hover {
    animation-play-state: paused;
}

@keyframes infinite-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Translada metade da largura total do track, já que o conteúdo foi duplicado */
        transform: translateX(calc(-50% - 1rem));
    }
}

.sponsor-card {
    background: #FFFFFF;
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 12px;
    padding: 2rem 1.5rem; /* Ajustado para compensar a ausência de texto */
    width: 280px; /* Ajuste para logos mais uniformes e próximos */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    flex-shrink: 0;
}

.sponsor-card:hover,
.sponsor-card:focus {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06), 0 0 10px rgba(212, 175, 55, 0.1);
    background: #FFFFFF;
    outline: none;
}

.sponsor-img-wrapper {
    width: 100%;
    height: 90px; /* Altura fixa para uniformidade percebida */
    display: flex;
    align-items: center;
    justify-content: center;
}

.sponsor-img {
    max-width: 80%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.65;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sponsor-card:hover .sponsor-img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.08);
}

/* Fallbacks caso o texto retorne no futuro */
.sponsor-info {
    display: none;
}
/* Responsividade */
@media (max-width: 1024px) {
    .sponsor-card {
        width: 280px; /* ~3 por vez */
    }
}

@media (max-width: 768px) {
    .section-patrocinadores {
        padding: 4rem 0;
    }
    
    .sponsor-card {
        width: 260px; /* 2+ por vez */
    }
    
    /* Remover fade mask no mobile para aproveitar melhor o espaço */
    .sponsors-carousel-wrapper::before,
    .sponsors-carousel-wrapper::after {
        width: 5%;
    }
}

@media (max-width: 480px) {
    .sponsor-card {
        width: 240px; /* 1.5 a 2 por vez */
        padding: 2rem 1rem;
    }
}

/* =======================================
 * CTAs SECUND�RIOS (OUTLINE)
 * ======================================= */
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    background-color: transparent;
    color: var(--color-white);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}
.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
}

.btn-outline-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    background-color: transparent;
    color: var(--color-blue-inst);
    border: 2px solid rgba(13, 33, 79, 0.3); /* blue-inst com opacidade */
    border-radius: 50px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}
.btn-outline-dark:hover {
    background-color: rgba(13, 33, 79, 0.05);
    border-color: var(--color-blue-inst);
    transform: translateY(-3px);
}






/* =========================================================
 * NAVBAR SCROLLED STATE
 * ========================================================= */
.navbar.scrolled {
    background: rgba(10, 25, 47, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .navbar.scrolled {
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }
}

/* =========================================================================
 * OVERRIDES: MELHORIA HIERARQUIA PALESTRANTES
 * ========================================================================= */
.palestrante-card {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.palestrante-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25) !important;
}

.palestrante-avatar {
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto 1.5rem auto !important;
}

.palestrante-avatar img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.palestrante-card:hover .palestrante-avatar img {
    transform: scale(1.08) !important;
}

.palestrante-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.palestrante-info h3 {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 0.3rem !important;
    color: var(--color-white) !important;
}

.palestrante-role {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--color-yellow) !important;
    margin-bottom: 1.2rem !important;
    display: block !important;
}

.palestrante-desc {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-style: italic !important;
    font-weight: 300 !important;
    padding: 0 10px !important;
}

/* =========================================================================
 * OVERRIDES: RESPONSIVIDADE E MODAL (AUDITORIA FINAL)
 * ========================================================================= */

/* 1. Contraste do Menu Hamburguer (Mobile) */
.menu-toggle {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Melhora leitura em fundos claros */
}
.navbar.scrolled .menu-toggle {
    text-shadow: none; /* Remove sombra quando já está no fundo escuro */
}

/* 2. Alinhamento da Navbar em Telas Grandes (1920px+) */
@media (min-width: 1366px) {
    .navbar {
        padding-left: max(6%, calc((100vw - 1200px) / 2));
        padding-right: max(6%, calc((100vw - 1200px) / 2));
    }
}

/* 3. Tipografia Fluida nos Palestrantes */
.palestrante-info h3 {
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
}

/* 4. Correções do Modal de Inscrição (Redução de Scroll) */
.modal-content {
    padding: 2rem !important; /* Era muito espaçado */
    max-height: 90vh;
    overflow-y: auto;
}

/* Ajuste dos botões de rádio/checkboxes no mobile */
.radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}
.checkbox-item {
    margin-bottom: 0.2rem !important;
    padding: 0.5rem !important;
}

@media (max-width: 768px) {
    .modal-content {
        padding: 1.5rem 1rem !important;
    }
    .radio-group {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
 * OVERRIDES: PADRONIZAÇÃO DE TÍTULOS DO FOOTER
 * ========================================================================= */
.footer-subtitle {
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--color-yellow) !important;
    font-weight: 600 !important;
    margin-bottom: 1.2rem !important;
}

/* Esconder o tracinho inferior original para ficar mais minimalista/editorial */
.footer-subtitle::after {
    display: none !important;
}

/* =========================================================================
 * OVERRIDES: REDES SOCIAIS PREMIUM (FOOTER)
 * ========================================================================= */
.social-icons {
    margin-top: 2rem !important; /* Cria um respiro elegante separando do e-mail */
    gap: 1.2rem !important; /* Mais espaço entre os ícones */
}

.social-icon {
    width: 46px !important; /* Área de toque (tap target) premium e acessível (>44px) */
    height: 46px !important;
    background-color: rgba(255, 255, 255, 0.03) !important; /* Fundo mais sutil */
    border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Borda luxuosa */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.social-icon svg {
    width: 22px !important; /* Aumentado do original para mais clareza, mas mantendo a leveza */
    height: 22px !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hover Premium */
.social-icon:hover,
.social-icon:focus {
    background-color: var(--color-green) !important;
    border-color: var(--color-green) !important;
    transform: translateY(-4px) !important; /* Elevação ligeiramente maior */
    box-shadow: 0 8px 20px rgba(0, 168, 89, 0.3) !important; /* Brilho de neon suave (Esmeralda) */
}

.social-icon:hover svg,
.social-icon:focus svg {
    transform: scale(1.15) !important; /* O ícone cresce sutilmente dentro do botão */
}

/* =========================================================================
 * OVERRIDES: LINK DE CONTATO PREMIUM
 * ========================================================================= */
.footer-contact-link {
    color: var(--color-green) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    position: relative;
    padding-bottom: 2px;
}

.footer-contact-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--color-green);
    transition: width 0.3s ease;
}

.footer-contact-link:hover {
    color: var(--color-yellow) !important;
    transform: translateX(4px) !important;
}

.footer-contact-link:hover::after {
    width: 100%;
    background-color: var(--color-yellow);
}

/* =========================================================================
 * OVERRIDES: EQUILÍBRIO DO GRID DO FOOTER
 * ========================================================================= */
@media (min-width: 993px) {
    .footer-container {
        /*
          Antes: 1.5fr 1fr 1fr 1.2fr (Criava "buraco" na coluna 2)
          Depois: 1.6fr 0.8fr 1.1fr 1.3fr
          - Col 1 (1.6fr): Mantém espaço para a logo e texto extenso.
          - Col 2 (0.8fr): Reduzido, pois os links curtos não precisam de tanto espaço, eliminando o buraco.
          - Col 3 (1.1fr): Acomoda a nova área de Redes Sociais Premium.
          - Col 4 (1.3fr): Acomoda os logos de patrocínio com conforto.
        */
        grid-template-columns: 1.6fr 0.8fr 1.1fr 1.3fr !important;
        gap: 3.5rem !important; /* Aumentado de 3rem para melhor separação das "massas" */
    }
}

.footer-col {
    /* Força o alinhamento vertical pelo topo, garantindo que os títulos fiquem perfeitamente alinhados na mesma linha horizontal */
    justify-content: flex-start !important;
}

/* Reduz a margem inferior exagerada do texto descritivo para não empurrar a Coluna 1 muito para baixo */
.footer-desc {
    line-height: 1.7 !important;
}

/* =========================================================================
 * MODAL PREMIUM SPLIT LAYOUT
 * ========================================================================= */
.modal-split {
    display: flex;
    flex-direction: row;
    max-width: 1000px !important; /* Mais largo para acomodar os dois lados */
    padding: 0 !important; /* Remove padding padrão para que a imagem encoste nas bordas */
    overflow: hidden; /* Mantém bordas arredondadas nos filhos */
    background: var(--color-blue-inst); /* Fundo base */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4) !important;
}

/* Painel Esquerdo (VIP / Institucional) */
.modal-left-panel {
    width: 35%;
    position: relative;
    background-image: url('assets/img/centro.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 2rem;
    color: var(--color-white);
}

.modal-left-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 25, 47, 0.9) 0%, rgba(0, 168, 89, 0.7) 100%);
    z-index: 1;
}

.modal-left-logo {
    position: relative;
    z-index: 2;
    max-width: 160px;
}

.modal-left-content {
    position: relative;
    z-index: 2;
}

.modal-left-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    color: var(--color-yellow);
}

.modal-left-content p {
    font-size: 1rem;
    opacity: 0.8;
    line-height: 1.5;
}

/* Painel Direito (Formulário Atual) */
.modal-right-panel {
    width: 65%;
    position: relative;
    background: #ffffff; /* Fundo claro para o form */
    display: flex;
    flex-direction: column;
}

/* Ajustes internos do Formulario no painel direito (Sobrescrevendo darkMode default se existir) */
.modal-right-panel .modal-content {
    background: transparent !important;
    color: #333333;
    padding: 3rem !important;
    border: none !important;
    box-shadow: none !important;
}

.modal-right-panel .modal-heading, 
.modal-right-panel .modal-subheading,
.modal-right-panel label {
    color: #1a1a1a;
}

.modal-right-panel .checkbox-text {
    color: #333333;
}

/* Ajuste do botão de fechar para o painel direito */
.modal-right-panel .modal-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #666666;
    z-index: 10;
}
.modal-right-panel .modal-close-btn:hover {
    color: #000000;
}

/* Responsividade do Modal Split */
@media (max-width: 992px) {
    .modal-left-panel {
        width: 30%; /* Reduz a imagem no tablet */
        padding: 2rem 1.5rem;
    }
    .modal-right-panel {
        width: 70%;
    }
}

@media (max-width: 768px) {
    .modal-split {
        flex-direction: column;
        max-width: 95vw !important;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-left-panel {
        width: 100%;
        height: 200px; /* Empilha: Vira um cabeçalho VIP */
        padding: 1.5rem;
    }
    
    .modal-right-panel {
        width: 100%;
    }
    
    .modal-right-panel .modal-content {
        padding: 2rem 1rem !important;
    }
}

/* =========================================================================
 * OVERRIDES: REFINAMENTO DE UNIDADE DO FOOTER (PREMIUM)
 * ========================================================================= */

/* 1. Apertando o grid para reduzir o excesso de vazio (Floating Islands) */
@media (min-width: 993px) {
    .footer-container {
        /* Reduzindo o max-width para compactar os elementos e criar unidade visual */
        max-width: 1050px !important;
        /* Distribuindo colunas de forma mais igualitária e unida */
        grid-template-columns: 1.4fr 1fr 1fr 1.2fr !important;
        gap: 2.5rem !important; /* Aproximando os blocos */
        justify-content: center !important;
    }
}

/* 2. Alinhamento Horizontal Absoluto dos Títulos */
/* A Coluna 1 não tem um h4, então alinhamos o topo da logo com os h4 das outras colunas */
.footer-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: 10px !important; /* Cria uma linha invisível no topo */
}

.footer-subtitle {
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: block !important;
    min-height: 24px !important; /* Garante que todos os títulos ocupem a mesma altura */
}

.footer-col.col-brand img {
    margin-top: -5px !important; /* Micro-ajuste para compensar o padding invisível do H4 nas outras colunas */
}

/* 3. Integrando Contato e Redes Sociais */
.social-icons {
    margin-top: 1.5rem !important; /* Aproximando do email para parecerem o mesmo grupo de comunicação */
    justify-content: flex-start !important; /* Alinhando com o e-mail, em vez de centralizado solto */
}

/* 4. Aproximando os Selos da Coluna 4 (Realização) */
.footer-col:last-child .info-block {
    margin-bottom: 2rem !important; /* Reduzindo espaço entre Protagonismo e Inflection */
}

.developer-seal {
    padding-top: 1.5rem !important;
    margin-top: auto !important; /* Empurra pro fundo alinhado se necessário, ou gruda logo abaixo */
}

/* =========================================================================
 * OVERRIDES: CHANCELAS INSTITUCIONAIS PREMIUM (COLUNA 4)
 * ========================================================================= */
.footer-col:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Alinhamento impecável à esquerda para as duas marcas */
}

/* Títulos das chancelas */
.footer-col:last-child .footer-subtitle,
.developer-seal > span {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    color: rgba(255, 255, 255, 0.4) !important; /* Menos grito, mais sofisticação */
    text-transform: uppercase !important;
    margin-bottom: 1.2rem !important;
    display: block !important;
}

/* Bloco Realização (Protagonismo) */
.footer-col:last-child .info-block {
    margin-bottom: 2.5rem !important; /* Espaço generoso antes da divisória */
    width: 100% !important;
}

.footer-col:last-child .info-block img {
    max-width: 180px !important; /* Presença sólida e imponente */
    height: auto !important;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)) !important;
}

/* Divisória e Bloco Desenvolvedor (Inflection) */
.developer-seal {
    width: 100% !important;
    padding-top: 3.5rem !important; margin-top: 2rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important; /* Linha ultra-sutil e elegante */
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.developer-seal img {
    max-width: 170px !important;
    height: auto !important;
    margin-top: 0.5rem !important;
    opacity: 0.6 !important;
    filter: grayscale(100%) contrast(120%) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.developer-seal img:hover {
    opacity: 1 !important;
    filter: grayscale(0%) contrast(100%) !important;
    transform: translateY(-2px);
}

/* =========================================================================
 * OVERRIDES: UX PREMIUM - CHIPS DE SELEÇÃO (ETAPA 3 DO MODAL)
 * ========================================================================= */

.chip-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 0.8rem !important;
    margin-top: 1rem !important;
}

/* Responsividade Mobile (Grid 2 colunas como solicitado) */
@media (max-width: 576px) {
    .chip-grid {
        grid-template-columns: 1fr 1fr !important; /* Força 2 colunas */
        gap: 0.5rem !important;
    }
}

@media (max-width: 360px) {
    .chip-grid {
        grid-template-columns: 1fr !important;
    }
}

.chip-label {
    display: block !important;
    margin: 0 !important;
    cursor: pointer !important;
    position: relative !important;
}

/* Esconde o checkbox padrão */
.chip-label input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* O Chip (Estado Normal) */
.chip-text {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0.8rem 1rem !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 8px !important; /* Bordas mais suaves em vez de pílula para texto longo */
    background: #f8f9fa !important;
    color: #444 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    line-height: 1.3 !important;
    user-select: none !important;
}

@media (max-width: 576px) {
    .chip-text {
        padding: 0.6rem 0.5rem !important;
        font-size: 0.75rem !important; /* Texto menor no mobile para caber 2 colunas */
        justify-content: center !important;
        text-align: center !important;
        flex-direction: column !important;
        gap: 0.3rem !important;
    }
}

/* Hover suave para desktop */
@media (hover: hover) {
    .chip-label:hover .chip-text {
        background: #f0f2f5 !important;
        border-color: rgba(0,0,0,0.15) !important;
    }
}

/* O Chip (Estado Selecionado) */
.chip-label input[type="checkbox"]:checked + .chip-text {
    background: var(--color-green) !important;
    color: var(--color-white) !important;
    border-color: var(--color-green) !important;
    box-shadow: 0 4px 12px rgba(0, 168, 89, 0.25) !important;
    transform: scale(1.02) !important;
    font-weight: 600 !important;
}

/* Reduz o gap do formulário em volta para focar nos chips */
#step-3 .form-group {
    margin-bottom: 1.5rem !important;
}



/* =========================================================================
 * OVERRIDES: UX PREMIUM - INPUTS E BOTÕES DO MODAL
 * ========================================================================= */

/* Inputs Premium */
.modal-content input[type="text"],
.modal-content input[type="email"],
.modal-content input[type="tel"],
.modal-content input[type="number"],
.modal-content select,
.modal-content textarea {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 12px !important;
    padding: 1rem 1.2rem !important;
    font-size: 1rem !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.01) inset !important;
    width: 100% !important; /* Garantir que ocupem o espaço todo */
}

/* Estado de Focus */
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
    outline: none !important;
    border-color: var(--color-green) !important;
    box-shadow: 0 0 0 4px rgba(0, 168, 89, 0.15) !important;
    background: #fff !important;
}

/* Botões do Formulário */
.step-actions {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
    justify-content: flex-end !important;
}

/* Quando houver botão voltar e continuar, joga um de cada lado */
.step-actions:has(.btn-modal-cancel) {
    justify-content: space-between !important;
}

/* Botão Secundário (Voltar) */
.btn-modal-cancel {
    background: transparent !important;
    color: #666 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 1rem 1rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
}

.btn-modal-cancel:hover {
    color: var(--color-green) !important;
    text-decoration: underline !important;
    transform: translateX(-3px) !important; /* Feedback de retorno */
}

/* Botão Principal (Continuar / Confirmar) */
.btn-modal-submit {
    background: linear-gradient(135deg, var(--color-green) 0%, #008a48 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 1rem 2.5rem !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(0, 168, 89, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-modal-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 168, 89, 0.4) !important;
    background: linear-gradient(135deg, #00b862 0%, var(--color-green) 100%) !important;
}



/* =========================================================================
 * OVERRIDES: ANIMAÇÕES E VALIDAÇÕES DO MODAL
 * ========================================================================= */

/* Transição de Etapas */
.form-step {
    animation: slideInStep 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

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

/* Feedback de Erro Visual */
.modal-content input.invalid,
.modal-content select.invalid,
.modal-content textarea.invalid {
    border-color: #e74c3c !important;
    background: rgba(231, 76, 60, 0.05) !important;
    animation: shakeError 0.4s ease-in-out !important;
}

@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.error-msg {
    color: #e74c3c !important;
    font-size: 0.85rem !important;
    margin-top: 0.4rem !important;
    display: block !important;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease !important;
}

.error-msg.visible {
    opacity: 1;
    transform: translateY(0);
}



/* =========================================================================
 * OVERRIDES: UX MOBILE E ACESSIBILIDADE
 * ========================================================================= */
@media (max-width: 768px) {
    body.modal-open {
        overflow: hidden !important; /* Previne scroll do body */
    }
    
    .modal-overlay {
        overflow-y: auto !important; /* Scroll exclusivo no overlay */
        padding: 1rem !important; /* Afasta o modal das bordas da tela no mobile */
        align-items: flex-start !important; /* Evita que o modal fique cortado no topo em telas pequenas */
    }

    .modal-split {
        overflow-y: visible !important; /* Remove duplo scroll */
        height: auto !important;
        max-height: none !important;
        margin: 2rem auto !important; /* Espaço para respirar */
    }

    /* Aumenta a área de toque dos checkboxes e radios no mobile */
    .checkbox-item, .chip-label {
        min-height: 44px !important; 
        display: flex !important;
        align-items: center !important;
    }
}


/* =========================================================================
 * OVERRIDES: ALINHAMENTO ESTRUTURAL ABSOLUTO DO FOOTER (GRID & HEIGHT)
 * ========================================================================= */
@media (min-width: 993px) {
    .footer-container {
        align-items: stretch !important; /* Garante que todas as colunas tenham a mesma altura invisível */
        gap: 4rem 2.5rem !important; /* Espaçamento horizontal equilibrado */
    }

    .footer-col {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding-top: 0 !important; 
        margin-top: 0 !important;
        height: 100% !important; 
    }

    /* Padroniza as caixas de título para iniciarem no exato mesmo eixo Y */
    .footer-subtitle {
        margin-top: 0 !important;
        padding-top: 0 !important;
        line-height: 1.2 !important;
    }

    /* Força a logo (Coluna 1) a iniciar no mesmo eixo Y dos títulos das outras colunas */
    .footer-logo, .col-brand img {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* O selo da Inflection na Coluna 4 vai ser empurrado para o final da coluna, 
       criando uma base sólida e ancorando o layout, ajudando no equilíbrio visual */
    .developer-seal {
        margin-top: auto !important;
    }
}

/* Ajustes Mobile para o grid estrutural */
@media (max-width: 992px) {
    .footer-container {
        gap: 3rem !important;
    }
    .footer-col {
        align-items: center !important;
        text-align: center !important;
    }
    /* No mobile, centraliza os títulos e logos */
    .footer-subtitle, .footer-logo, .col-brand img {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Centraliza a lista social */
    .social-list {
        align-items: center !important;
    }
}

/* =========================================================================
 * ACESSIBILIDADE (WCAG 2.1 AA) - FOCO VISÍVEL E SUPORTE A LEITORES DE TELA
 * ========================================================================= */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.video-facade:focus-visible,
.timeline-tab:focus-visible {
    outline: 3px solid var(--color-yellow) !important;
    outline-offset: 3px !important;
    border-radius: 4px;
}

.modal-content input:focus-visible,
.modal-content select:focus-visible,
.modal-content textarea:focus-visible {
    outline: 3px solid var(--color-green) !important;
    outline-offset: 2px !important;
}