/* --- Variables & Reset --- */
:root {
  --bg-color: #0b0b0b;
  --card-bg: rgba(255, 255, 255, 0.05);
  --text-color: #ffffff;
  --text-muted: #aaaaaa;
  --accent-color: #00CCFF; /* Neon Sky Blue */
  --accent-secondary: #0099DD;
  --accent-glow: 0 0 10px rgba(0, 204, 255, 0.5), 0 0 20px rgba(0, 204, 255, 0.3);
  --accent-glow-intense: 0 0 15px rgba(0, 204, 255, 0.6), 0 0 40px rgba(0, 204, 255, 0.3), 0 0 80px rgba(0, 204, 255, 0.1);
  --font-heading: 'Orbitron', sans-serif;
  --font-hero: 'Racing Sans One', 'Orbitron', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --transition: all 0.3s ease;
  --section-padding: 80px 0;
  --cursor-x: 50%;
  --cursor-y: 50%;
}

/* Light Theme Variables */
body.light-theme {
  --bg-color: #f4f4f4;
  --card-bg: rgba(255, 255, 255, 0.8); /* More opaque for light mode */
  --text-color: #333333;
  --text-muted: #666666;
  --accent-color: #007bff; /* Darker blue usually works better on light, but let's keep it or adjust slightly */
  --accent-glow: 0 0 10px rgba(0, 123, 255, 0.3);
}

/* Light Theme Overrides */
body.light-theme .navbar {
  background: white !important;
  border-bottom: 1px solid #ddd;
}

body.light-theme .navbar-brand, 
body.light-theme .nav-link, 
body.light-theme .theme-toggle-btn {
  color: #333 !important;
}

body.light-theme .hero h1 {
  color: white !important; /* Keep Hero H1 white as it has a dark overlay */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

body.light-theme .hero-subtitle {
  color: white !important;
}

body.light-theme .glass-panel {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

body.light-theme .stat-card {
  background: white;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Fix "Únete al equipo" button in light mode (it looks like primary button needs darker text or background if transparent) */
body.light-theme .btn-primary {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

body.light-theme .btn-primary:hover {
  color: white !important;
  background-color: var(--accent-color) !important;
}

/* Fix Events in Light Mode */
body.light-theme .event-item {
  border-left: 3px solid transparent;
}

body.light-theme .event-item:hover {
  background: #f0f0f0; /* Darker background on hover for contrast */
  border-left: 3px solid var(--accent-color);
}

body.light-theme .section-title {
  color: #333;
  border-left-color: var(--accent-color);
}

/* Events Title specifically in dark section needs to be checked. 
   If section has dark background but body is light, we might need specific overrides.
   However, "Eventos" section has parallax image with overlay. 
   Let's check if the section title needs white color there.
*/
#eventos .section-title {
  color: white !important; /* Always white on parallax background */
}

/* Restore white text for event items on hover if needed, or keep dark for light theme.
   User asked: "al pasar el ratón por los próximos eventos el texto debe pasar de ocurso a blanco."
*/
body.light-theme .event-item:hover h3,
body.light-theme .event-item:hover p,
body.light-theme .event-item:hover .day, 
body.light-theme .event-item:hover .month {
   color: #333 !important; /* Keep it dark? User said "de oscuro a blanco" (from dark to white).
   Wait, if it's light theme, text is dark. Hovering makes background darker?
   "texto blanco" on hover. Okay.
   */
   color: white !important; 
}

body.light-theme .event-item:hover {
   background: var(--accent-color) !important; /* Make background accent color so white text is visible? */
}

/* Let's try: Default Light Theme = Dark Text. Hover = Accent BG + White Text? 
   Or just Dark BG + White Text? 
   User said "texto debe pasar de oscuro a blanco". 
   So we need a dark or colored background on hover.
*/
body.light-theme .event-item:hover {
    background: #333 !important;
}


/* Results Table */
body.light-theme .results-table th {
  color: var(--accent-color);
}

body.light-theme .results-table td {
  color: #333;
  border-bottom: 1px solid #ddd;
}

body.light-theme .results-table tbody tr:hover td {
   color: var(--accent-color) !important; /* Or black? User said "texto negro igual que cuando pasamos el ratón" (black text same as hover)
   Wait, "no se mira el contenido... tiene que ser texto negro igual que cuando pasamos el ratón".
   So normally it's invisible (white on white?), needs to be black. on hover it IS black? 
*/
   color: #000 !important;
}

/* Footer */
body.light-theme footer {
  background: #e9ecef;
  color: #333;
  border-top: 1px solid #ddd;
}

/* Blog Section Background Enhancement - Image Based */
#blog {
  position: relative;
  background-image: url('/static/media/img/home/hero4.webp');
  background-position: center;
  background-size: cover;
  background-attachment: fixed; /* Parallax effect for premium feel */
  overflow: hidden;
}

/* Dark Theme Overlay */
#blog::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85); /* Heavy dark overlay for readability */
  z-index: 1;
}

#blog::after {
  display: none; /* Remove tire tracks if present or keep them subtle? Let's remove for clean image look */
}

/* Ensure content is above background */
#blog .container {
  position: relative;
  z-index: 2;
}

/* Light Theme Adjustments */
body.light-theme #blog::before {
  background: rgba(255, 255, 255, 0.9); /* Heavy light overlay */
}

body.light-theme footer h3 {
  color: #333;
}

body.light-theme footer .copyright {
  color: #666;
}

body.light-theme footer .social-icons i {
   color: #555;
}

body.light-theme footer .social-icons i:hover {
  background: rgba(255, 255, 255, 0.9); /* Heavy light overlay */
}

body.light-theme footer h3 {
  color: #333;
}

body.light-theme footer .copyright {
  color: #666;
}

body.light-theme footer .social-icons i {
   color: #555;
}

body.light-theme footer .social-icons i:hover {
   color: var(--accent-color);
}

/* Fix Blog Index Light Theme */
body.light-theme .news-card {
  background: white;
  border: 1px solid #ddd;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  color: #333;
}

body.light-theme .news-card h3 a {
  color: #333;
}

body.light-theme .news-card h3 a:hover {
  color: var(--accent-color);
}

body.light-theme .news-card p {
  color: #555;
}

body.light-theme .news-card-date {
  color: #777;
}

body.light-theme .page-item .page-link {
  background-color: white;
  border-color: #ddd;
  color: #333;
}

body.light-theme .page-item.active .page-link {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
}

body.light-theme .glass-card {
  background: white;
  border: 1px solid #ddd;
  color: #333;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

body.light-theme .glass-card h5 {
  color: #333;
}

body.light-theme .popular-post-item h6 a {
  color: #333 !important;
}

body.light-theme .popular-post-item small {
  color: #777 !important;
}

body.light-theme .glass-card-gradient {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #ddd;
}

body.light-theme .glass-card-gradient h5 {
  color: #333;
}

body.light-theme .glass-card-gradient p {
  color: #555 !important;
}

body.light-theme .breadcrumb-item.active {
    color: #333 !important;
}

body.light-theme .cta-button {
    background: var(--accent-color);
    color: white;
}

body.light-theme .cta-button:hover {
    background: #333;
    color: white;
}

/* Fix Blog Post Light Theme */
body.light-theme .blog-article {
  background: white;
  border: 1px solid #ddd;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  color: #333;
}

body.light-theme .blog-content {
  color: #333;
}

body.light-theme .blog-content h1,
body.light-theme .blog-content h2,
body.light-theme .blog-content h3,
body.light-theme .blog-content h4,
body.light-theme .blog-content h5,
body.light-theme .blog-content h6 {
  color: #222;
}

body.light-theme .blog-content p,
body.light-theme .blog-content li {
  color: #444;
}

body.light-theme .blog-content strong {
  color: #000;
}

/* Fix Badges/Tags in Light Mode */
body.light-theme .badge.border-info {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

body.light-theme .text-white {
    color: #333 !important;
}

/* Share Section */
body.light-theme .glass-card h5.text-white {
    color: #333 !important;
}

/* Back Button */
body.light-theme .btn-outline-light {
    color: #333;
    border-color: #ddd;
}

body.light-theme .btn-outline-light:hover {
    background-color: #333;
    color: white;
    border-color: #333;
}

/* Newsletter Modal Text */
body.light-theme .modal-content .text-white {
    color: #666 !important;
}

/* Fix Hero Meta Data Colors */
body.light-theme .page-hero-content .text-white {
    color: white !important; /* Keep white on hero */
}
/* Exception for Hero style="color: rgba(255,255,255,0.8);" */
/* We can't easily target inline styles without !important or precise selectors if they are inline. 
   The hero text is inside .d-flex with inline style. 
   Let's target strict: */
body.light-theme .page-hero-content div[style*="rgba(255,255,255,0.8)"] {
    color: rgba(255,255,255,0.9) !important; 
}

/* Fix News Excerpt Color */
body.light-theme .excerpt {
  color: #000 !important;
}

/* Dark/Light Toggle Button */
.theme-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-color);
  font-size: 1.2rem;
  cursor: pointer;
  margin-left: 15px;
  transition: var(--transition);
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle-btn:hover {
  color: var(--accent-color);
  transform: rotate(15deg);
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* Animated Speed Lines Background */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 200%; height: 200%;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 80px,
    rgba(0, 204, 255, 0.015) 80px,
    rgba(0, 204, 255, 0.015) 81px
  );
  animation: speed-bg-scroll 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}

main.main {
  position: relative;
}

@keyframes speed-bg-scroll {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50%, 50%); }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
}
::-webkit-scrollbar-thumb:hover {
  background: #33ddff;
}

/* Typography Overrides */
h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.navbar-brand, .btn {
  font-family: var(--font-heading) !important;
  text-transform: uppercase;
}

a {
  text-decoration: none;
  transition: var(--transition);
  color: inherit;
}

a:hover {
  color: var(--accent-color);
}

/* --- Bootstrap Overrides & Utilities --- */
.container {
  max-width: 1200px; /* Custom container width constraint */
}

.section-padding {
  padding: var(--section-padding);
}

.bg-darker {
  background-color: rgba(0, 0, 0, 0.3);
}

.section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 60px;
  transform: skewX(-10deg);
  border-left: 5px solid var(--accent-color);
  display: inline-block;
  padding-left: 20px;
  position: relative;
  animation: title-glow-pulse 3s ease-in-out infinite;
}

@keyframes title-glow-pulse {
  0%, 100% { border-left-color: var(--accent-color); text-shadow: none; }
  50% { border-left-color: #33ddff; text-shadow: 0 0 20px rgba(0, 204, 255, 0.3); }
}

/* --- Components --- */
.btn-primary {
  background-color: transparent;
  color: #fff;
  border: 1px solid var(--accent-color);
  font-weight: 800;
  letter-spacing: 2px;
  padding: 15px 40px;
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

@keyframes button-glitch {
  0% { clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); transform: translate(0); }
  20% { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 30px) 100%, 0 100%, 0 10px); transform: translate(-2px, 2px); }
  40% { clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 10px) 100%, 0 100%, 0 30px); transform: translate(2px, -2px); }
  60% { clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 25px) 100%, 0 100%, 0 15px); transform: translate(-2px, 0); }
  80% { clip-path: polygon(25px 0, 100% 0, 100% calc(100% - 25px), calc(100% - 15px) 100%, 0 100%, 0 25px); transform: translate(2px, 2px); }
  100% { clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); transform: translate(0); }
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--accent-color) !important;
  color: #000 !important;
  box-shadow: 0 0 30px var(--accent-color), 0 0 60px var(--accent-color) !important;
  border-color: var(--accent-color);
  animation: button-glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  text-shadow: none;
}

.btn-small {
  background: transparent;
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  padding: 5px 15px;
  font-size: 0.8rem;
  border-radius: 4px;
  display: inline-block;
}

.btn-small:hover {
  background: var(--accent-color);
  color: #000;
  box-shadow: var(--accent-glow);
  text-decoration: none;
}

.clip-button {
  clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
  border-radius: 0; /* Override bootstrap radius */
}

/* Cards & Panels */
.glass-panel {
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.placeholder-img {
  background-color: #222;
  background-image: linear-gradient(45deg, #222 25%, #2a2a2a 25%, #2a2a2a 50%, #222 50%, #222 75%, #2a2a2a 75%, #2a2a2a 100%);
  background-size: 20px 20px;
  display: block;
}

/* --- Header / Navbar --- */
.navbar {
  background: rgba(11, 11, 11, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 15px 0;
  z-index: 2000; /* Force header above everything */
}

.navbar-brand {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--text-color) !important;
  display: flex;
  align-items: center;
}



.navbar-brand img {
  max-height: 50px; /* Constrain logo height */
  width: auto;
  transition: .3s;
}

.navbar-brand img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 5px var(--accent-color));
}

.accent-dot {
  color: var(--accent-color);
}

.nav-link {
  color: var(--text-color) !important;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin: 0 18px;
  position: relative;
  padding-bottom: 5px;
}

.nav-link:hover, .nav-link.active {
  color: var(--accent-color) !important;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-color);
}

/* Mobile Menu Fixes */
@media (max-width: 991px) {
  .navbar-collapse {
    background: rgba(11, 11, 11, 0.98);
    padding: 20px;
    border-radius: 0 0 10px 10px;
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: absolute; /* Detach from flow if needed */
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 2001;
  }

  .navbar {
    background: #0b0b0b !important; /* Solid background on mobile */
  }
}

.btn-nav-contact {
  border: 1px solid var(--accent-color) !important;
  color: var(--accent-color) !important;
  border-radius: 0;
  padding: 8px 20px !important;
}

.btn-nav-contact:hover {
  background: var(--accent-color) !important;
  color: #000 !important;
}

.btn-nav-login {
  background: transparent;
  border: 1px solid var(--accent-color);
  color: #fff !important;
  font-weight: 700;
  padding: 8px 25px !important;
  margin-left: 10px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: all 0.3s ease;
}

.btn-nav-login:hover {
  background: var(--accent-color);
  color: #000 !important;
  box-shadow: 0 0 20px var(--accent-color);
  animation: button-glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* --- Parallax Sections --- */
.parallax-section {
  background-image: url('/static/media/img/home/eventos.webp');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.parallax-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Darker overlay for readability */
  z-index: 1;
}

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

/* --- Hero Section --- */
.hero {
  height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  margin-top: -76px;
}

/* Speed lines canvas layer */
#speed-lines-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.6;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to top, var(--bg-color), transparent);
}

.hero h1 {
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  font-family: var(--font-hero) !important;
  transform: skewX(-8deg);
  text-shadow: 0 0 10px rgba(0, 204, 255, 0.4), 0 0 40px rgba(0, 204, 255, 0.1);
  margin-bottom: 20px;
  animation: hero-neon-flicker 4s ease-in-out infinite;
  letter-spacing: 4px;
}

@keyframes hero-neon-flicker {
  0%, 100% { text-shadow: 0 0 10px rgba(0, 204, 255, 0.4), 0 0 40px rgba(0, 204, 255, 0.1); }
  25% { text-shadow: 0 0 15px rgba(0, 204, 255, 0.6), 0 0 60px rgba(0, 204, 255, 0.2), 0 0 100px rgba(0, 204, 255, 0.05); }
  50% { text-shadow: 0 0 5px rgba(0, 204, 255, 0.3), 0 0 20px rgba(0, 204, 255, 0.1); }
  75% { text-shadow: 0 0 20px rgba(0, 204, 255, 0.7), 0 0 80px rgba(0, 204, 255, 0.3), 0 0 120px rgba(0, 204, 255, 0.1); }
}

@media (max-width: 768px) {
  .hero h1 { font-size: 2.5rem; }
}

.hero-subtitle {
  font-size: 1.2rem;
  letter-spacing: 5px;
  margin-bottom: 40px;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  display: inline-block;
  padding: 10px 30px;
  transform: skewX(-8deg);
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  backdrop-filter: blur(5px);
  border-left: 3px solid var(--accent-color);
  position: relative;
  overflow: hidden;
}

.hero-subtitle::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 204, 255, 0.15), transparent);
  animation: subtitle-sweep 3s ease-in-out infinite;
}

@keyframes subtitle-sweep {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* --- Stats (Nosotros) --- */
.stat-card {
  padding: 40px;
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px;
  right: -2px; bottom: -2px;
  background: linear-gradient(45deg, var(--accent-color), transparent, var(--accent-color), transparent);
  background-size: 400% 400%;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: border-gradient-spin 3s linear infinite;
}

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

@keyframes border-gradient-spin {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.stat-card:hover {
  transform: translateY(-10px);
  border-color: var(--accent-color);
  box-shadow: var(--accent-glow);
}

.stat-icon {
  font-size: 3rem;
  color: var(--accent-color);
  margin-bottom: 20px;
}

.stat-number {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 10px;
}

/* --- Eventos (Timeline) --- */
.event-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-left: 3px solid transparent;
  transition: all 0.4s ease;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.event-item::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, 
    rgba(0, 204, 255, 0.08) 0%, 
    rgba(0, 204, 255, 0.03) 50%, 
    transparent 100%);
  transition: left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 0;
}

.event-item:hover::before {
  left: 0;
}

.event-item > * {
  position: relative;
  z-index: 1;
}

.event-item:hover {
  border-left: 3px solid var(--accent-color);
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(8px);
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  margin-right: 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding-right: 20px;
}

.event-date .day {
  font-size: 1.8rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--accent-color);
  line-height: 1;
}

.event-date .month {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

@media (max-width: 768px) {
  .event-item { flex-direction: column; text-align: center; }
  .event-date { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); width: 100%; padding-bottom: 10px; margin-bottom: 15px; margin-right: 0; flex-direction: row; gap: 10px;}
}

/* --- Resultados (Table) --- */
.results-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.results-table th, .results-table td {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.results-table th {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--accent-color);
}

.pos { font-weight: 700; font-family: var(--font-heading); }
.podium-p1 .pos { color: #FFD700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); animation: podium-glow-gold 2s ease-in-out infinite; }
.podium-p2 .pos { color: #C0C0C0; text-shadow: 0 0 10px rgba(192, 192, 192, 0.5); animation: podium-glow-silver 2s ease-in-out infinite; }
.podium-p3 .pos { color: #CD7F32; text-shadow: 0 0 10px rgba(205, 127, 50, 0.5); animation: podium-glow-bronze 2s ease-in-out infinite; }

@keyframes podium-glow-gold {
  0%, 100% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
  50% { text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.3); }
}
@keyframes podium-glow-silver {
  0%, 100% { text-shadow: 0 0 5px rgba(192, 192, 192, 0.3); }
  50% { text-shadow: 0 0 15px rgba(192, 192, 192, 0.8), 0 0 30px rgba(192, 192, 192, 0.3); }
}
@keyframes podium-glow-bronze {
  0%, 100% { text-shadow: 0 0 5px rgba(205, 127, 50, 0.3); }
  50% { text-shadow: 0 0 15px rgba(205, 127, 50, 0.8), 0 0 30px rgba(205, 127, 50, 0.3); }
}

.results-table tbody tr:hover,
.results-table tbody tr:hover > * {
  background-color: transparent !important;
  color: inherit !important;
  --bs-table-accent-bg: transparent !important;
}

/* --- Blog --- */
.blog-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}

.blog-card:hover { transform: translateY(-5px); }
.blog-image { height: 300px; width: 100%; overflow: hidden; position: relative; }
.news-card-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.blog-card:hover .news-card-image { transform: scale(1.1); }
.blog-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.blog-content h3 {
  min-height: 5em; /* Force 2 lines height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 15px;
  font-size: 1.4rem; /* Ensure consistent sizing */
}
.read-more { margin-top: auto; color: var(--accent-color); font-weight: 700; }

/* --- Contact Page (New) --- */
.page-hero {
  padding: 140px 0 0;
  background: radial-gradient(circle at center, rgba(0, 204, 255, 0.05) 0%, transparent 70%);
  position: relative;
  text-align: center;
}

.page-hero h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.contact-hero {
  padding: 100px 0 60px;
  background: radial-gradient(circle at center, rgba(0, 204, 255, 0.1) 0%, rgba(11, 11, 11, 1) 70%);
}

.contact-card-info {
  text-align: center;
  padding: 40px 20px;
  height: 100%;
  transition: 0.3s;
}

.contact-card-info:hover {
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.08);
}

.contact-card-info i {
  font-size: 2.5rem;
  color: var(--accent-color);
  margin-bottom: 20px;
}

.form-control {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  padding: 15px;
  border-radius: 0;
}

.form-control:focus {
  background: rgba(0, 0, 0, 0.6);
  border-color: var(--accent-color);
  box-shadow: 0 0 10px rgba(0, 204, 255, 0.2);
  color: white;
}

.form-control::placeholder {
  color: #fff;
  opacity: 1;
}

.form-control::-ms-input-placeholder {
  color: #fff;
}

.social-bar i {
  font-size: 2rem;
  margin: 0 15px;
  transition: 0.3s;
  color: var(--text-muted);
}

.social-bar i:hover {
  color: var(--accent-color);
  transform: scale(1.2);
  text-shadow: var(--accent-glow);
}

/* --- Footer --- */
footer {
  background: #050505;
  border-top: none;
  padding: 40px 0;
  margin-top: auto;
  position: relative;
  overflow: hidden;
}

footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 200%; height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--accent-color) 0px,
    var(--accent-color) 20px,
    transparent 20px,
    transparent 40px
  );
  animation: tire-tread-scroll 4s linear infinite;
}

@keyframes tire-tread-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.sponsors-ticker span {
  margin: 0 10px;
  color: var(--text-muted);
  font-family: var(--font-heading);
}

/* --- ANIMATIONS & FX --- */

/* Scroll Reveal Base — Left Slide */
.reveal {
  opacity: 0;
  transform: translateX(-40px) translateY(20px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* Directional: Right Slide */
.reveal-right {
  opacity: 0;
  transform: translateX(40px) translateY(20px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* Stagger Delays */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

/* Glitch Effect */
@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  20% { transform: skew(-2deg); }
  40% { transform: skew(2deg); }
  60% { transform: skew(-1deg); }
  80% { transform: skew(1deg); }
  100% { transform: skew(0deg); }
}

@keyframes glitch-anim-1 {
  0% { clip: rect(20px, 9999px, 15px, 0); }
  20% { clip: rect(50px, 9999px, 60px, 0); }
  40% { clip: rect(10px, 9999px, 40px, 0); }
  60% { clip: rect(80px, 9999px, 85px, 0); }
  80% { clip: rect(30px, 9999px, 20px, 0); }
  100% { clip: rect(60px, 9999px, 50px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip: rect(60px, 9999px, 70px, 0); }
  20% { clip: rect(10px, 9999px, 20px, 0); }
  40% { clip: rect(40px, 9999px, 50px, 0); }
  60% { clip: rect(20px, 9999px, 10px, 0); }
  80% { clip: rect(50px, 9999px, 40px, 0); }
  100% { clip: rect(10px, 9999px, 60px, 0); }
}

.glitch-text {
  position: relative;
  /* animation: glitch-skew 4s infinite linear alternate-reverse; */ /* Too chaotic always on */
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
}

.glitch-text::before {
  left: 2px;
  text-shadow: -1px 0 #ff00c1;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim-1 5s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -2px;
  text-shadow: -1px 0 #00fff9;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim-2 5s infinite linear alternate-reverse;
}

/* Neon Pulse */
@keyframes neon-pulse {
  0% { box-shadow: 0 0 5px rgba(0, 204, 255, 0.2); }
  50% { box-shadow: 0 0 20px rgba(0, 204, 255, 0.6), 0 0 40px rgba(0, 204, 255, 0.2); }
  100% { box-shadow: 0 0 5px rgba(0, 204, 255, 0.2); }
}

.btn-primary.pulse-anim {
  animation: neon-pulse 2s infinite;
}

/* Hover Sweep Effect */
.btn-primary {
  overflow: hidden; /* For sweep */
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: 0.5s;
}

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

/* Card Hover Float & Glow Enhanced */
.glass-panel {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
  will-change: transform;
}

.glass-panel[data-tilt] {
  transform-style: preserve-3d;
}

.glass-panel:hover {
  border-color: var(--accent-color);
  box-shadow: 0 10px 30px -10px rgba(0, 204, 255, 0.3), 0 0 0 1px rgba(0, 204, 255, 0.1);
}

/* --- INTRANET / DASHBOARD STYLES --- */

/* Login Page */
.login-body {
  background: url('https://images.unsplash.com/photo-1547726588-4db886733226?q=80&w=2670&auto=format&fit=crop') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  z-index: 0;
}

.login-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  padding: 40px;
  border: 1px solid rgba(0, 204, 255, 0.3);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

/* Sidebar Layout */
#wrapper {
  overflow-x: hidden;
}

#sidebar-wrapper {
  min-height: 100vh;
  margin-left: -15rem;
  transition: margin .25s ease-out;
  background: rgba(11, 11, 11, 0.95);
  border-right: 1px solid rgba(255,255,255,0.1);
  width: 15rem;
  position: fixed;
  z-index: 1000;
}

#sidebar-wrapper .sidebar-heading {
  padding: 1.5rem 1.25rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--accent-color);
  font-family: var(--font-heading);
  text-align: center;
}

#sidebar-wrapper .list-group {
  width: 15rem;
}

.list-group-item {
  background: transparent;
  color: #ccc;
  border: none;
  padding: 1rem 1.5rem;
  transition: 0.3s;
}

.list-group-item:hover, .list-group-item.active {
  background: rgba(0, 204, 255, 0.1);
  color: var(--accent-color);
  border-left: 4px solid var(--accent-color);
}

.list-group-item i {
  width: 25px;
  text-align: center;
  margin-right: 10px;
}

#page-content-wrapper {
  width: 100%;
  padding-left: 0;
  transition: padding .25s ease-out;
}

/* Desktop: Show Sidebar */
@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }
  #page-content-wrapper {
    padding-left: 15rem; /* Push content */
  }
  .mobile-nav-toggle {
    display: none; /* Hide toggle on desktop */
  }
}

/* Dashboard Cards */
.dashboard-card {
  border-left: 3px solid var(--accent-color);
  height: 100%;
  padding: 2px; /* Inner padding handled by content */
}

.card-header-custom {
  background: rgba(255, 255, 255, 0.05);
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.card-title-custom {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: 1px;
}

.card-body-custom {
  padding: 20px;
}


/* Cookies */

.gdprcookie {
  position: fixed;
  color: #fff;
  font-size: 1.2em;
  line-height: 1.5em;
  bottom: 0;
  width: 100%;
  padding: 1rem;
  background: rgba(0,0,0,.9);
  z-index: 9999!important
}

.gdprcookie-intro,.gdprcookie-types {
  margin: auto;
  padding-right: 15px;
  padding-left: 15px;
  max-width: 1140px
}

.gdprcookie h6 {
  margin-bottom: .5rem;
  font-size: 2.25rem;
  color: #fff
}

.gdprcookie h5 {
  margin-bottom: 2.5rem;
  font-weight: 400;
  font-size: 1.25rem;
  color: #fff
}

.gdprcookie p {
  font-size: 1rem;
  color: rgba(255,255,255,.75)
}

.gdprcookie h2 {
  font-size: 1.1em
}

.gdprcookie-buttons button {
  color: #fff;
  font-family: inherit;
  font-size: 1.1rem;
  padding: .5rem 2.75rem;
  border: .05rem solid currentColor;
  border-radius: .15rem;
  margin: 0 .5rem 1rem;
  background: 0 0;
  cursor: pointer
}

.gdprcookie-buttons button:disabled {
  color: rgba(255,255,255,.5)
}

.gdprcookie-types input[type=checkbox] {
  transform: scale(1.5);
  margin: 10px!important;
  transition: .3s
}

.gdprcookie-types {
  margin: 1.5rem auto 2.5rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(255,255,255,.75)
}

.gdprcookie-types ul {
  overflow: hidden;
  padding: 0;
  margin: 1rem 0
}

.gdprcookie-types li {
  padding: 0;
  margin: 0;
  width: 33%;
  display: block;
  list-style: none;
  float: left;
  color: #fff
}

.gdprcookie-types li label {
  font-size: 1rem;
  color: #fff
}

.btn-cookies {
  background:  var(--color-card);
  border: 1px solid var(--color-primary);
  color: var(--color-text);
  transition: 0.3s ease;
}

.btn-cookies:hover {
  background: var(--color-primary);
  color: var(--color-card);
  transform: scale(1.1);
  border: 0;
}

/* --- Blog Section (Redesign) --- */

/* News Card */
.news-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px; /* Smooth rounded corners */
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  backdrop-filter: blur(10px);
}

.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--accent-color);
  background: rgba(255, 255, 255, 0.05);
}

.news-card-image-wrapper {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); /* Slight angled cut */
}

.news-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.news-card:hover .news-card-image {
  transform: scale(1.1);
}

.news-card-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.8);
  color: var(--accent-color);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid var(--accent-color);
  backdrop-filter: blur(4px);
  z-index: 2;
}

.news-card-content {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.news-card-date {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 15px;
}

.news-card-date i {
  margin-right: 8px;
  color: var(--accent-color);
}

.news-card-content h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  line-height: 1.4;
  margin-top: 0;
}

.news-card-content h3 a {
  color: var(--text-color);
  text-decoration: none;
  background: linear-gradient(to right, #fff, #fff 50%, var(--accent-color) 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 0% 0%; /* Default text color (white) position */
  transition: background-position 0.3s;
  -webkit-text-fill-color: initial; /* Reset for safety if gradient fails */
  color: #fff;
}

.news-card-content h3 a:hover {
  color: var(--accent-color);
}

.news-card-content p {
  color: #ccc;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent-color);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: var(--transition);
  margin-top: auto;
}

.news-card-link i {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.news-card-link:hover {
  color: #fff;
  text-shadow: 0 0 10px var(--accent-color);
}

.news-card-link:hover i {
  transform: translateX(5px);
}

/* Sidebar Widgets */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 25px;
  backdrop-filter: blur(10px);
}

.glass-card-gradient {
  background: linear-gradient(145deg, rgba(11, 11, 11, 0.9), rgba(20, 20, 20, 0.9));
  border: 1px solid rgba(0, 204, 255, 0.2);
  border-radius: 12px;
  padding: 30px;
  position: relative;
  overflow: hidden;
}

.glass-card-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-color), transparent);
}

.popular-post-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.3s;
  padding: 10px;
  border-radius: 8px;
}

.popular-post-item:last-child {
  border-bottom: none;
}

.popular-post-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Pagination */
.pagination .page-item .page-link {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-color);
  margin: 0 5px;
  border-radius: 5px;
  transition: var(--transition);
}

.pagination .page-item.active .page-link,
.pagination .page-item .page-link:hover {
  background: var(--accent-color);
  color: #000;
  border-color: var(--accent-color);
  box-shadow: 0 0 15px rgba(0, 204, 255, 0.4);
}

.pagination .page-item.disabled .page-link {
  background: transparent;
  color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.05);
}

/* Newsletter CTA Button */
.cta-button {
  background: var(--accent-color);
  color: #000;
  font-weight: 800;
  padding: 12px 25px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.cta-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: 0.5s;
  z-index: -1;
}

.cta-button:hover {
  box-shadow: 0 0 20px var(--accent-color);
  color: #000;
}


/* --- Blog Article Typography --- */

.blog-article {
  padding: 40px;
}

@media (max-width: 768px) {
  .blog-article {
    padding: 25px;
  }
}

.blog-content {
  color: #ddd;
  font-size: 1.1rem;
  line-height: 1.8;
}

.blog-content h2, .blog-content h4 {
  color: var(--accent-color);
  margin-top: 40px;
  margin-bottom: 20px;
  line-height: 1.3;
}

.blog-content h3 {
  color: var(--accent-color);
  margin-bottom: 20px;
  line-height: 1.3;
}

.blog-content h2 { font-size: 2rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; }
.blog-content h3 { font-size: 1.2rem; }
.blog-content h4 { font-size: 1.3rem; color: #fff; }

.blog-content p {
  margin-bottom: 25px;
}

.blog-content strong {
  color: #fff;
  font-weight: 600;
}

.blog-content a {
  color: var(--accent-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.blog-content a:hover {
  color: #fff;
  text-shadow: 0 0 5px var(--accent-color);
}

.blog-content ul, .blog-content ol {
  margin-bottom: 25px;
  padding-left: 20px;
}

.blog-content ul li, .blog-content ol li {
  margin-bottom: 10px;
  padding-left: 10px;
}

.blog-content ul li::marker {
  color: var(--accent-color);
}

.blog-content blockquote {
  border-left: 4px solid var(--accent-color);
  background: rgba(255, 255, 255, 0.05);
  padding: 20px 30px;
  margin: 30px 0;
  font-style: italic;
  font-size: 1.2rem;
  color: #fff;
  border-radius: 0 10px 10px 0;
}

.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 30px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.blog-content figure {
  margin: 30px 0;
}

.blog-content figcaption {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 10px;
  font-style: italic;
}


/* --- Pilot Upload Section (Nosotros) --- */

.pilot-upload-section {
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 80px;
  padding: 60px 0;
}

/* --- Pilots Section (Nosotros) --- */
.pilot-img-wrapper {
  width: 280px;
  height: 280px;
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
  border: 2px solid var(--accent-color);
  padding: 5px;
  transition: all 0.3s ease;
}

.pilot-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.pilot-card:hover .pilot-img-wrapper {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(0, 204, 255, 0.4);
  border-color: #fff;
}


/* =========================================================
   RACING THEME — NEW COMPONENTS
   ========================================================= */

/* --- Preloader --- */
#preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #0b0b0b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-spinner {
  width: 60px;
  height: 60px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid var(--accent-color);
  border-right: 3px solid var(--accent-color);
  border-radius: 50%;
  animation: preloader-spin 0.8s linear infinite;
  margin-bottom: 20px;
}

@keyframes preloader-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.preloader-text {
  font-family: var(--font-heading);
  color: var(--accent-color);
  font-size: 0.9rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  animation: preloader-text-pulse 1.5s ease-in-out infinite;
}

@keyframes preloader-text-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.preloader-bar {
  width: 200px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  margin-top: 15px;
  border-radius: 2px;
  overflow: hidden;
}

.preloader-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-color), #33ddff);
  animation: preloader-bar-progress 1.5s ease-in-out infinite;
}

@keyframes preloader-bar-progress {
  0% { width: 0%; margin-left: 0%; }
  50% { width: 60%; margin-left: 20%; }
  100% { width: 0%; margin-left: 100%; }
}

/* --- Checkered Section Divider --- */
.section-divider-checkered {
  width: 100%;
  height: 30px;
  background-image:
    linear-gradient(45deg, rgba(0, 204, 255, 0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0, 204, 255, 0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0, 204, 255, 0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0, 204, 255, 0.08) 75%);
  background-size: 30px 30px;
  background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
  position: relative;
  overflow: hidden;
}

.section-divider-checkered::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--bg-color), transparent 20%, transparent 80%, var(--bg-color));
}

/* --- Racing Stripe Accent Bar --- */
.racing-stripe {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-color), transparent);
  margin: 15px auto 0;
  position: relative;
}

.racing-stripe::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, #fff, transparent);
  animation: stripe-shimmer 2s ease-in-out infinite;
  opacity: 0.5;
}

@keyframes stripe-shimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

/* --- Cursor Neon Glow --- */
.cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 204, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1040;
  transform: translate(-50%, -50%);
  transition: left 0.15s ease-out, top 0.15s ease-out;
  mix-blend-mode: screen;
}

/* --- Navbar Scroll Shrink --- */
.navbar.scrolled {
  padding: 8px 0 !important;
  background: rgba(11, 11, 11, 0.98) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 204, 255, 0.05);
}

.navbar.scrolled .navbar-brand img {
  max-height: 38px;
}

body.light-theme .navbar.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* --- Blog Card Neon Accent --- */
.blog-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--accent-color);
  transition: width 0.4s ease, left 0.4s ease;
  box-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
}

.blog-card {
  position: relative;
}

.blog-card:hover::after {
  width: 100%;
  left: 0;
}

/* --- News Card Neon Accent --- */
.news-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--accent-color);
  transition: width 0.4s ease, left 0.4s ease;
  box-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
}

.news-card:hover::after {
  width: 100%;
  left: 0;
}

/* --- Contact Card Rotating Border --- */
.contact-card-info {
  position: relative;
  overflow: hidden;
}

.contact-card-info::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent, var(--accent-color), transparent, transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: rotate-border 3s linear infinite;
}

.contact-card-info:hover::before {
  opacity: 1;
}

.contact-card-info::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  right: 2px; bottom: 2px;
  background: var(--card-bg);
  border-radius: inherit;
  z-index: 0;
}

.contact-card-info > * {
  position: relative;
  z-index: 1;
}

@keyframes rotate-border {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =========================================================
   PAGE HEROES (Eventos, Resultados)
   ========================================================= */

.page-hero-events,
.page-hero-results {
  min-height: 45vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 120px 0 60px;
}

.page-hero-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.3) saturate(1.2);
}

.page-hero-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,204,255,0.08) 100%);
  z-index: 1;
}

.page-hero-title {
  font-family: var(--font-hero), var(--font-heading), sans-serif;
  font-size: 4rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 6px;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(0, 204, 255, 0.3);
  animation: hero-neon-flicker 4s ease-in-out infinite;
  margin-bottom: 10px;
}

.hero-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 5px;
  color: var(--accent-color);
  text-transform: uppercase;
  margin-bottom: 10px;
}

#speed-lines-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
}


/* =========================================================
   TIMELINE EVENTS (Eventos page)
   ========================================================= */

.events-timeline {
  position: relative;
  padding-left: 30px;
}

.events-timeline::before {
  content: '';
  position: absolute;
  top: 0; left: 12px;
  width: 2px; height: 100%;
  background: linear-gradient(180deg, var(--accent-color), rgba(0,204,255,0.1));
}

.timeline-event-card {
  padding: 25px 30px;
  margin-bottom: 20px;
  position: relative;
  border-left: 3px solid transparent;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.timeline-event-card:hover {
  border-left-color: var(--accent-color);
  transform: translateX(5px);
}

.timeline-event-card.event-past {
  opacity: 0.65;
}

.timeline-event-card.event-past:hover {
  opacity: 1;
}

.timeline-event-indicator {
  position: absolute;
  left: -42px;
  top: 50%;
  transform: translateY(-50%);
}

.timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--accent-color);
  background: var(--bg-color);
}

.timeline-dot.dot-upcoming {
  background: var(--accent-color);
  box-shadow: 0 0 10px rgba(0, 204, 255, 0.6);
  animation: dot-pulse 2s ease-in-out infinite;
}

.timeline-dot.dot-past {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(0, 204, 255, 0.4); }
  50% { box-shadow: 0 0 15px rgba(0, 204, 255, 0.8), 0 0 30px rgba(0, 204, 255, 0.3); }
}

.timeline-date-block {
  min-width: 60px;
}

.timeline-day {
  display: block;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.timeline-month {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--accent-color);
  letter-spacing: 3px;
  margin-top: 2px;
}

.badge-completed,
.badge-upcoming {
  display: inline-block;
  font-size: 0.6rem;
  margin-top: 5px;
  padding: 2px 6px;
  border-radius: 3px;
}

.badge-completed {
  background: rgba(40, 167, 69, 0.2);
  color: #28a745;
}

.badge-upcoming {
  background: rgba(0, 204, 255, 0.15);
  color: var(--accent-color);
}

.timeline-event-info h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: #fff;
  letter-spacing: 1px;
}

.text-muted-custom {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}


/* =========================================================
   RESULT STAT CARDS (Resultados page)
   ========================================================= */

.result-stat-card {
  padding: 30px 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.result-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(0, 204, 255, 0.15);
}

.result-stat-icon {
  font-size: 2rem;
  color: var(--accent-color);
  margin-bottom: 15px;
}

.result-stat-card .stat-number {
  font-size: 2.5rem;
}

.result-stat-card .stat-label {
  font-size: 0.75rem;
  letter-spacing: 2px;
}

/* Serie Badge */
.serie-badge {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(0, 204, 255, 0.1);
  border: 1px solid rgba(0, 204, 255, 0.2);
  border-radius: 4px;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: var(--accent-color);
}

/* Result Row Hover */
.result-row {
  transition: background 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.result-row:hover {
  background: rgba(0, 204, 255, 0.04);
}

/* Results Table Wrapper Enhancement */
.results-table-wrapper {
  overflow: hidden;
  border: 1px solid rgba(0, 204, 255, 0.08);
}

.results-table thead tr {
  background: rgba(0, 204, 255, 0.06);
}


/* =========================================================
   LIGHT THEME — Page Hero & Timeline Overrides
   ========================================================= */

body.light-theme .page-hero-title {
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

body.light-theme .hero-eyebrow {
  color: var(--accent-color);
}

body.light-theme .timeline-event-info h3 {
  color: var(--text-color);
}

body.light-theme .text-muted-custom {
  color: rgba(0, 0, 0, 0.5);
}

body.light-theme .timeline-day {
  color: var(--text-color);
}

body.light-theme .timeline-dot {
  background: var(--bg-color);
}

body.light-theme .result-row:hover {
  background: rgba(0, 204, 255, 0.06);
}

body.light-theme .serie-badge {
  background: rgba(0, 204, 255, 0.08);
}


/* --- Accessibility: Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal, .reveal-right {
    opacity: 1;
    transform: none;
  }

  #speed-lines-canvas {
    display: none;
  }

  .cursor-glow {
    display: none;
  }
}