/* 1. CONFIGURAÇÕES GLOBAIS */
:root {
    --primary-white: #fffff0;
    --brand-red: #ff0000;     
    --brand-neon: #e2ff00;    
    --bg-dark: #050505;       
    --text-muted: #999999;
    --font-main: 'Inter', sans-serif;
    --transition-racing: cubic-bezier(0.65, 0.05, 0, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-main);
}

html {
    scroll-behavior: smooth;
    background-color: var(--bg-dark);
}

body {
    background-color: var(--bg-dark);
    color: var(--primary-white);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* O efeito fica em uma camada isolada no fundo */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='0.2' opacity='0.08' d='M20,100 C20,150 50,180 100,180 C150,180 180,150 180,100 C180,50 150,20 100,20 C50,20 20,50 20,100 M40,100 C40,130 60,160 100,160 C140,160 160,130 160,100 C160,70 140,40 100,40 C60,40 40,70 40,100 M60,100 C60,110 80,140 100,140 C120,140 140,110 140,100 C140,90 120,60 100,60 C80,60 60,90 60,100'/%3E%3C/svg%3E");
    background-size: 900px;
    z-index: -1; /* Atrás de todo o conteúdo */
    pointer-events: none;
    animation: topoFlow 80s linear infinite;
}

@keyframes topoFlow {
    from { background-position: 0 0; }
    to { background-position: 900px 900px; }
}

/* 3. NAVEGAÇÃO */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 8%;
    z-index: 1000;
    transition: all 0.4s var(--transition-racing);
}

.logo {
    font-weight: 900;
    font-size: 1.5rem;
    text-decoration: none;
    color: var(--primary-white);
    text-transform: uppercase;
}

.logo span { font-weight: 300; color: var(--text-muted); }

.nav-links { display: flex; list-style: none; gap: 2.5rem; }

.nav-links a {
    text-decoration: none;
    color: var(--primary-white);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
    font-weight: 700;
}

.nav-links a:hover { color: var(--brand-neon); }

/* 4. HERO SECTION */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    /* Gradiente ajustado para mostrar o fundo na direita */
    background: linear-gradient(90deg, rgba(5,5,5,1) 0%, rgba(5,5,5,0.8) 50%, rgba(5,5,5,0.3) 100%), 
                url('assets/hero_3.webp') no-repeat center center/cover;
    padding-left: 8%;
    position: relative;
    background-attachment: fixed;
}

.hero-title {
    font-size: clamp(4rem, 12vw, 10rem);
    color: var(--brand-neon);
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
    font-style: italic;
    margin: 1.5rem 0;
}

.hero-description {
    border-left: 4px solid var(--brand-red);
    padding-left: 20px;
    max-width: 600px;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
}

/* 5. BOTÕES RACING */
.hero-btns { display: flex; gap: 1.5rem; margin-top: 2rem; }

.btn-primary {
    padding: 1.2rem 2.8rem;
    background: var(--brand-neon);
    color: #000;
    font-weight: 900;
    text-decoration: none;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
    transition: 0.3s var(--transition-racing);
}

.btn-primary:hover { transform: scale(1.05) skewX(-5deg); }

/* 6. AUDIO PLAYER */
.audio-player {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: rgba(5, 5, 5, 0.9);
    padding: 15px 25px;
    border: 1px solid var(--brand-neon);
    z-index: 1000;
    display: flex;
    align-items: center;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
}

.player-btn { background: none; border: none; color: var(--brand-neon); cursor: pointer; margin-right: 15px; font-size: 1.2rem; }

/* 7. SEÇÃO ATLETA (HORIZONTAL) */
.horizontal-scroll {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: transparent; /* Permite ver o efeito no fundo */
}

.scroll-wrapper {
    display: flex;
    width: 400vw; 
    height: 100%;
    transition: transform 0.8s var(--transition-racing);
}

.scroll-item {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Leve sombra interna para garantir legibilidade do texto */
    background: radial-gradient(circle at 20% 50%, rgba(5,5,5,0.4) 0%, transparent 70%);
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    width: 85%;
    max-width: 1400px;
}

.justified-text {
    text-align: justify;
    line-height: 1.8;
    color: var(--text-muted);
    max-width: 500px;
}

/* MOLDURA TECH PADRONIZADA */
.image-container {
    width: 450px;
    height: 550px;
    position: relative;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
    position: relative;
    z-index: 2;
}

.image-container::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 1px solid var(--brand-neon);
    opacity: 0.4;
    clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
    z-index: 1;
}

.image-container::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 80px;
    height: 80px;
    border-right: 4px solid var(--brand-red);
    border-bottom: 4px solid var(--brand-red);
    z-index: 3;
}

/* NAVEGAÇÃO E CONTADOR */
.nav-controls-fixed {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 2%;
    transform: translateY(-50%);
    z-index: 1001;
    pointer-events: none;
}

.nav-btn-alt {
    pointer-events: auto;
    width: 50px;
    height: 80px;
    background: var(--brand-neon);
    border: none;
    cursor: pointer;
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%);
}

.scroll-progress-left {
    position: absolute;
    bottom: 50px;
    left: 8%;
    z-index: 1002;
}

.progress-bar-minimal {
    width: 120px;
    height: 2px;
    background: rgba(255,255,255,0.1);
    margin-top: 10px;
}

.progress-fill {
    height: 100%;
    width: 25%;
    background: var(--brand-neon);
    transition: width 0.5s ease;
}
/* 1. O efeito em si */
.topo-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* SVG com cor branca e baixíssima opacidade (0.07) */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.07' d='M20,100 C20,150 50,180 100,180 C150,180 180,150 180,100 C180,50 150,20 100,20 C50,20 20,50 20,100 M40,100 C40,130 60,160 100,160 C140,160 160,130 160,100 C160,70 140,40 100,40 C60,40 40,70 40,100 M60,100 C60,110 80,140 100,140 C120,140 140,110 140,100 C140,90 120,60 100,60 C80,60 60,90 60,100'/%3E%3C/svg%3E");
    background-size: 1000px;
    z-index: -1; /* Atrás do conteúdo, mas à frente do fundo preto do body */
    pointer-events: none;
    animation: topoFlow 100s linear infinite;
}

/* 2. Garantindo que o BODY não cubra a .topo-bg */
body {
    background-color: #050505; /* Fundo base */
    position: relative;
}

/* 3. Deixando a Hero "vazada" */
.hero {
    background: linear-gradient(90deg, 
        rgba(5,5,5,1) 0%, 
        rgba(5,5,5,0.8) 40%, 
        rgba(5,5,5,0.2) 100%), 
        url('assets/hero_3.webp') no-repeat center center/cover;
    background-color: transparent !important;
}

/* 4. Deixando a Seção Atleta "vazada" */
.horizontal-scroll {
    background-color: transparent !important;
}

@keyframes topoFlow {
    from { background-position: 0 0; }
    to { background-position: 1000px 1000px; }
}
/* SEÇÃO DE RESULTADOS */
.results-section {
    padding: 100px 8%;
    background: transparent; /* Revela o efeito topográfico ao fundo */
    position: relative;
}

.section-title span {
    color: var(--brand-neon);
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.result-card {
    background: rgba(255, 255, 255, 0.03);
    border-left: 1px solid rgba(226, 255, 0, 0.2);
    padding: 30px;
    position: relative;
    clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%);
    transition: 0.4s var(--transition-racing);
}

.result-card:hover {
    background: rgba(226, 255, 0, 0.05);
    border-left: 2px solid var(--brand-neon);
    transform: translateY(-10px);
}

.result-card.highlight {
    border: 1px solid var(--brand-neon);
}

.card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.card-year { color: var(--brand-neon); }
.card-category { color: var(--text-muted); }

.result-card h3 {
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: 900;
}

.result-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.card-footer {
    font-size: 0.65rem;
    font-weight: 900;
    color: var(--brand-red);
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
}
/* CONTAINER PRINCIPAL */
.results-slider-section {
    padding: 100px 0;
    overflow: hidden;
    background: transparent;
}
.results-header { padding: 0 8%; margin-bottom: 50px; }

.results-container {
    position: relative;
    padding: 0 10%;
    min-height: 600px; /* Garante espaço para o card crescer */
}

.results-track {
    display: flex;
    gap: 40px;
    transition: transform 0.6s var(--transition-racing);
    align-items: flex-start; /* Alinha os cards pelo topo */
}

/* EFEITO DE MOTION BLUR DURANTE O SCROLL (Ativado via JS) */
.results-track.moving {
    filter: blur(4px) skewX(-2deg);
}

/* AJUSTES NOS CARDS DE RESULTADOS */
.result-frame {
    min-width: 400px;
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(15px);
    padding: 25px;
    display: flex;
    flex-direction: column; /* Organiza: imagem, depois texto, depois stats */
    transition: all 0.5s var(--transition-racing);
    opacity: 0.3;
    transform: scale(0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.result-frame.active {
    opacity: 1;
    transform: scale(1);
    border-color: var(--brand-neon);
}

/* ÁREA DA IMAGEM NO CARD */
.frame-image {
    width: 100%;
    height: 220px; /* Altura fixa para a imagem */
    margin-bottom: 20px;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
}

.frame-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.result-frame.active .frame-image img {
    filter: grayscale(0);
}

.year-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--brand-neon);
    color: #000;
    padding: 5px 12px;
    font-weight: 900;
    font-size: 0.7rem;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

.frame-body {
    margin-bottom: 20px;
    flex-grow: 1; /* Faz o texto ocupar o espaço necessário */
}
.frame-body h3 {
    font-size: 1.5rem;
    color: var(--primary-white);
    margin-bottom: 10px;
    font-weight: 900;
}

.frame-body p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
} line-height: 1.4;

/* BARRA DE ESTATÍSTICAS (ESTILO STRAVA) */
.strava-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    margin-top: auto; /* Força para ficar sempre no rodapé do card */
}

.stat-item {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.stat-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.stat-value {
    font-size: 1rem;
    color: var(--brand-neon);
    font-weight: 900;
    font-style: italic;
    margin-top: 4px;
}

/* RESPONSIVIDADE */
@media (max-width: 500px) {
    .result-frame {
        min-width: 300px;
        padding: 15px;
    }
    .strava-stats {
        grid-template-columns: 1fr 1fr; /* Duas colunas no celular */
    }
}

/* CONTEÚDO DO CARD */
.frame-index { font-size: 5rem; font-weight: 900; position: absolute; top: 10px; right: 20px; opacity: 0.05; color: #fff; }
.frame-top { display: flex; justify-content: space-between; margin-bottom: 30px; font-weight: 900; font-size: 0.8rem; }
.year { color: var(--brand-neon); }
.tag { color: var(--text-muted); }
.result-frame h3 { font-size: 2rem; font-weight: 900; line-height: 1; margin-bottom: 20px; }
.result-frame p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }
.frame-footer { margin-top: auto; font-weight: 900; color: var(--brand-red); font-size: 0.7rem; letter-spacing: 2px; }

/* NAVEGAÇÃO */
.results-nav {
    display: flex;
    gap: 20px;
    margin-top: 50px;
    justify-content: center;
}
/* Efeito de Overlay de Vídeo */
.video-card {
    cursor: pointer;
}

.play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(226, 255, 0, 0.1); /* Brilho neon suave */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.4s var(--transition-racing);
    z-index: 2;
}

.video-card:hover .play-overlay {
    opacity: 1;
}

.play-button-icon {
    width: 60px;
    height: 60px;
    background: var(--brand-neon);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    padding-left: 5px; /* Ajuste óptico do ícone play */
    box-shadow: 0 0 30px rgba(226, 255, 0, 0.5);
    transform: scale(0.8);
    transition: 0.4s var(--transition-racing);
}

.video-card:hover .play-button-icon {
    transform: scale(1);
}

/* Puxar thumbnail automática do YouTube */
.media-thumb img {
    object-position: center;
}
/* AJUSTE DE SEPARAÇÃO E GRID */
.media-section {
    padding: 120px 8%;
    position: relative;
    clear: both; /* Impede invasão de floats */
    z-index: 10;
    background: var(--bg-dark); /* Fundo sólido para evitar transparência indesejada da anterior */
}

.media-grid-optimized {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas */
    gap: 40px;
    margin-top: 50px;
}

.video-item {
    cursor: pointer;
    transition: transform 0.3s var(--transition-racing);
}

.video-thumb-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: visible; /* Para mostrar a moldura neon saindo um pouco */
}

.video-thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 8%);
    filter: grayscale(0.5);
    transition: 0.5s;
}

/* MOLDURA NEON MODERNA */
.neon-frame-video {
    position: absolute;
    inset: -3px;
    border: 1px solid var(--brand-neon);
    clip-path: polygon(8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 8%);
    opacity: 0.3;
    pointer-events: none;
    transition: 0.3s;
}

.video-item:hover .neon-frame-video {
    opacity: 1;
    box-shadow: 0 0 15px var(--brand-neon);
}

.video-item:hover img {
    filter: grayscale(0);
    transform: scale(1.02);
}

/* TEXTOS DO VÍDEO */
.video-meta {
    margin-top: 15px;
    padding-left: 10px;
    border-left: 2px solid var(--brand-red);
}

.video-meta .source {
    font-size: 0.7rem;
    color: var(--brand-neon);
    font-weight: 900;
    letter-spacing: 2px;
}

.video-meta h3 {
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: 900;
    margin-top: 5px;
}

/* RESPONSIVIDADE PARA CELULAR */
@media (max-width: 768px) {
    .media-grid-optimized {
        grid-template-columns: 1fr; /* Uma coluna em telas pequenas */
    }
}
/* SEÇÃO PATROCÍNIO */
.sponsorship-section {
    padding: 100px 8%;
    background: transparent;
}

/* TICKER DE MARCAS */
.brands-ticker {
    margin-bottom: 80px;
    padding: 40px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
}

.ticker-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 50px;
    opacity: 0.6;
}

.brand-logo {
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--text-muted);
    filter: grayscale(1);
    transition: 0.4s;
}

.brand-logo:hover {
    filter: grayscale(0);
    color: var(--primary-white);
}

/* GRID DE COTAS */
.sponsorship-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.tier-card {
    background: rgba(255, 255, 255, 0.02);
    padding: 40px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
    transition: 0.4s var(--transition-racing);
    display: flex;
    flex-direction: column;
}

.tier-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.04);
}

.tier-header {
    margin-bottom: 30px;
}

.tier-label {
    font-size: 0.7rem;
    color: var(--brand-neon);
    font-weight: 900;
    letter-spacing: 2px;
}

.tier-card h3 {
    font-size: 1.8rem;
    font-weight: 900;
    margin-top: 5px;
}

.tier-features {
    list-style: none;
    margin-bottom: 40px;
    flex-grow: 1;
}

.tier-features li {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    text-transform: uppercase;
    font-weight: 700;
}

/* BOTÃO DA COTA */
.tier-btn {
    text-decoration: none;
    color: var(--primary-white);
    font-weight: 900;
    font-size: 0.8rem;
    padding: 15px;
    border: 1px solid var(--primary-white);
    text-align: center;
    transition: 0.3s;
}

.tier-btn:hover {
    background: var(--primary-white);
    color: #000;
}

/* DESTAQUE COTA MASTER */
.tier-card.master {
    border: 1px solid var(--brand-neon);
}

.tier-card.master .tier-btn {
    background: var(--brand-neon);
    color: #000;
    border: none;
}

.neon-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 0;
    background: var(--brand-neon);
    transition: 0.4s;
}

.tier-card:hover .neon-line {
    width: 100%;
}

/* RESPONSIVIDADE */
@media (max-width: 1024px) {
    .sponsorship-grid { grid-template-columns: 1fr; }
}
/* HUB DE CONTATO DIRETO */
.contact-section {
    padding: 120px 8%;
    text-align: center;
}

.hub-description {
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 60px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.contact-buttons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}

.hub-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--primary-white);
    position: relative;
    clip-path: polygon(5% 0, 100% 0, 100% 80%, 95% 100%, 0 100%, 0 20%);
    transition: 0.4s var(--transition-racing);
}

.hub-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--brand-neon);
    transform: scale(1.02);
}

.hub-icon {
    font-weight: 900;
    font-size: 0.6rem;
    color: var(--brand-neon);
    letter-spacing: 2px;
    transform: rotate(-90deg);
    width: 60px;
    border-bottom: 2px solid var(--brand-red);
}

.hub-info {
    flex-grow: 1;
    text-align: left;
    padding-left: 20px;
}

.hub-info h3 {
    font-size: 1.2rem;
    font-weight: 900;
    text-transform: uppercase;
}

.hub-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 700;
}

.hub-arrow {
    font-size: 1.5rem;
    color: var(--brand-neon);
    opacity: 0;
    transition: 0.3s;
}

.hub-card:hover .hub-arrow {
    opacity: 1;
    transform: translateX(10px);
}

/* DESTAQUE WHATSAPP */
.hub-card.whatsapp {
    border-left: 4px solid #25D366;
}

/* RESPONSIVIDADE */
@media (max-width: 768px) {
    .contact-buttons-grid {
        grid-template-columns: 1fr;
    }
    .hub-card {
        padding: 20px;
    }
}
/* Garante que o conteúdo não fique ilegível nos cards inativos */
.result-frame {
    opacity: 0.4; /* Aumentado de 0.3 para 0.4 */
    cursor: pointer;
}

/* Força a visibilidade total das estatísticas no card central */
.result-frame.active {
    opacity: 1;
    border-color: var(--brand-neon);
    z-index: 10;
}

/* Ajuste para as imagens não estourarem o card */
.frame-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}