/* ==========================================================================
   BSL CORE DESIGN SYSTEM - EA FC 27 EDITION
   Tema Escuro (PADRÃO DO SITE) & Tema Claro com Alto Contraste & Carbon Fiber
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Russo+One&display=swap');

   /* --- VARIÁVEIS DE TEMA (DARK MODE PADRÃO DO SITE) --- */
   :root, html.dark-theme {
     /* Marca & Destaques Neon */
     --bsl-purple: #8B3DFF;
     --bsl-purple-neon: #9F6CE0;
     --bsl-purple-glow: rgba(139, 61, 255, 0.4);
     --bsl-accent-cyan: #00E5FF;
     --bsl-accent-green: #00FF87;
     --bsl-accent-gold: #FFB800;
   
     /* Modo Escuro (Dark Theme Default) */
     --bg-main: #090312;
     --bg-carbon: #0D051A;
     --bg-surface: #140A26;
     --bg-surface-elevated: #1F103A;
     --bg-glass: rgba(20, 10, 38, 0.88);
     --border-color: rgba(159, 108, 224, 0.28);
     --border-color-strong: rgba(159, 108, 224, 0.6);
   
     /* Fontes com Alto Contraste para Leitura Perfeita */
     --text-primary: #F8F6FE;
     --text-secondary: #D1C7E8; /* Lavanda Claro Brilhante */
     --text-muted: #A99DC6;     /* Alto Contraste */
   
     --card-shadow: 0 12px 35px rgba(0, 0, 0, 0.55), 0 0 20px rgba(139, 61, 255, 0.1);
     --card-shadow-hover: 0 20px 45px rgba(139, 61, 255, 0.3), 0 0 25px rgba(159, 108, 224, 0.25);
   
     /* Fonts */
     --font-main: 'Outfit', sans-serif;
     --font-display: 'Russo One', sans-serif;
   
     /* Transições de Animações Polidas */
     --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
     --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   
     /* Dimensões & Containers */
     --navbar-height: 72px;
     --container-max-width: 1640px;
   }
   
   /* --- MODO CLARO (LIGHT THEME OPTIONAL OVERRIDE) --- */
   html.light-theme {
     --bg-main: #F2F4F8;
     --bg-carbon: #E8EBF2;
     --bg-surface: #FFFFFF;
     --bg-surface-elevated: #F7F9FC;
     --bg-glass: rgba(255, 255, 255, 0.92);
     --border-color: rgba(139, 61, 255, 0.18);
     --border-color-strong: rgba(139, 61, 255, 0.4);
     
     --text-primary: #0F0C1B;
     --text-secondary: #423B56;
     --text-muted: #6B6282;
   
     --card-shadow: 0 10px 30px rgba(15, 12, 27, 0.08), 0 2px 6px rgba(139, 61, 255, 0.05);
     --card-shadow-hover: 0 18px 40px rgba(139, 61, 255, 0.18), 0 4px 12px rgba(0, 0, 0, 0.1);
   }
   
   /* --- BASE & RESET --- */
   * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   html {
     scroll-behavior: smooth;
     font-size: 16px;
   }
   
   /* PADRÃO FIBRA DE CARBONO & AURORA AMBIENTE COM ANIMAÇÃO LEVE EM CSS */
   @keyframes ambientGlowPulse {
     0% {
       background-position: 0% 0%, 0 0, 0 0, 0 0;
     }
     50% {
       background-position: 100% 50%, 0 0, 0 0, 7px 7px;
     }
     100% {
       background-position: 0% 0%, 0 0, 0 0, 0 0;
     }
   }
   
   body {
     font-family: var(--font-main);
     background-color: var(--bg-main);
     background-image: 
       radial-gradient(ellipse 120% 80% at 50% -20%, rgba(159, 108, 224, 0.25) 0%, rgba(0, 229, 255, 0.1) 45%, transparent 75%),
       radial-gradient(circle at 85% 60%, rgba(139, 61, 255, 0.12) 0%, transparent 50%),
       radial-gradient(circle at 15% 80%, rgba(0, 229, 255, 0.08) 0%, transparent 50%),
       linear-gradient(45deg, rgba(0, 0, 0, 0.07) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.07) 75%, rgba(0, 0, 0, 0.07));
     background-size: 200% 200%, 100% 100%, 100% 100%, 14px 14px;
     background-position: 0% 0%, 0 0, 0 0, 0 0;
     animation: ambientGlowPulse 20s ease-in-out infinite;
     color: var(--text-primary);
     line-height: 1.5;
     overflow-x: hidden;
     min-height: 100vh;
     transition: background-color var(--transition-normal), color var(--transition-normal);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   /* --- CONTÊINER PRINCIPAL (RESPONSIVIDADE ULTRAWIDE, 16:9 E MOBILE) --- */
   .bsl-container {
     width: 100%;
     max-width: var(--container-max-width);
     margin-left: auto;
     margin-right: auto;
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
   
   @media (min-width: 1920px) {
     .bsl-container {
       padding-left: 2.5rem;
       padding-right: 2.5rem;
     }
   }
   
   @media (max-width: 768px) {
     .bsl-container {
       padding-left: 1rem;
       padding-right: 1rem;
     }
   }
   
   /* --- TIPOGRAFIA & CORREÇÕES DE CONTRASANTE --- */
   h1, h2, h3, h4, h5, h6, .font-display {
     font-family: var(--font-display);
     letter-spacing: 0.5px;
     line-height: 1.15;
   }
   
   a {
     color: inherit;
     text-decoration: none;
     transition: color var(--transition-fast);
   }
   
   .text-muted, .small-muted {
     color: var(--text-muted) !important;
     opacity: 1 !important;
   }
   
   .text-secondary-bright {
     color: var(--text-secondary) !important;
   }
   
   /* Utilities */
   .text-neon {
     color: var(--bsl-purple-neon);
     text-shadow: 0 0 12px var(--bsl-purple-glow);
   }
   
   .text-cyan {
     color: var(--bsl-accent-cyan);
   }
   
   .text-green {
     color: var(--bsl-accent-green);
   }
   
   .bg-surface {
     background-color: var(--bg-surface);
   }
   
   .bg-surface-elevated {
     background-color: var(--bg-surface-elevated);
   }
   
   .glass-panel {
     background: var(--bg-glass);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border: 1px solid var(--border-color);
     border-radius: 18px;
     box-shadow: var(--card-shadow);
     transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
   }
   
   .glass-panel:hover {
     box-shadow: var(--card-shadow-hover);
     border-color: var(--border-color-strong);
   }
   
   /* --- CARROSSEL INFINITO DE PATROCINADORES / PARCEIROS --- */
   .partners-ticker-wrapper {
     width: 100%;
     overflow: hidden;
     padding: 1.5rem 0;
     background: rgba(0, 0, 0, 0.2);
     border-top: 1px solid var(--border-color);
     border-bottom: 1px solid var(--border-color);
     margin: 3rem 0;
   }
   
   .partners-ticker-track {
     display: flex;
     align-items: center;
     gap: 3rem;
     width: max-content;
     animation: tickerScroll 25s linear infinite;
   }
   
   .partners-ticker-track:hover {
     animation-play-state: paused;
   }
   
   .partner-logo-item img {
     height: 45px;
     width: auto;
     object-fit: contain;
     filter: grayscale(80%) opacity(0.7);
     transition: all var(--transition-fast);
   }
   
   .partner-logo-item img:hover {
     filter: grayscale(0%) opacity(1) drop-shadow(0 0 10px var(--bsl-purple-glow));
     transform: scale(1.1);
   }
   
   @keyframes tickerScroll {
     0% { transform: translateX(0); }
     100% { transform: translateX(-50%); }
   }
   
   /* ==========================================================================
      RESPONSIVIDADE MOBILE 9:16 E TELAS COMPACTAS (SMARTPHONES 360px - 480px)
      ========================================================================== */
   @media (max-width: 768px) {
     html {
       font-size: 14.5px;
     }
     .bsl-container {
       padding-left: 0.75rem;
       padding-right: 0.75rem;
     }
     /* Prevenção de estouro lateral de tabelas */
     .table-responsive {
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
     }
     /* Modais e Mini-Janelas Otimizados para Celular */
     .modal-dialog {
       margin: 0.5rem auto !important;
       max-width: 95vw !important;
     }
     .modal-content {
       border-radius: 16px !important;
       box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7) !important;
     }
     .modal-body {
       max-height: 75vh;
       overflow-y: auto;
       padding: 1rem 0.85rem !important;
     }
     .modal-header {
       padding: 0.75rem 1rem !important;
     }
     .modal-footer {
       padding: 0.75rem 1rem !important;
     }
   }
   
   @media (max-width: 480px) {
     html {
       font-size: 13.5px;
     }
     .bsl-container {
       padding-left: 0.5rem;
       padding-right: 0.5rem;
     }
     h1, .h1 { font-size: 1.5rem !important; }
     h2, .h2 { font-size: 1.3rem !important; }
     h3, .h3 { font-size: 1.15rem !important; }
     .btn {
       padding: 0.4rem 0.8rem;
     }
   }