@import url("/static/css/battle-rebrand.79aa372211eb.css");
@import url("/static/css/battle-navbar-lock.23c2fa3d97bc.css");
@import url("/static/css/i18n-switcher.d8a5467a4503.css");

/* =========================
   VARIABLES
========================= */
:root {
  --black: #05070d;
  --dark: #0b0f14;
  --grey: #cfd8e3;
  --blue: #3b82f6;
}

/* =========================
   BASE
========================= */
body {
  color: #fff;
  font-family: 'Exo 2', sans-serif;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,0.12), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(15,59,122,0.18), transparent 55%),
    linear-gradient(180deg, #020409 0%, #05070d 40%, #0b0f14 100%);
  position: relative;
}

/* Patrón de fondo repetitivo */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/static/img/bg.49848902818d.png");
  background-repeat: repeat;
  background-size: 400px 400px; /* Ajusta el tamaño del patrón */
  opacity: 0.03; /* Muy sutil para no ser invasivo */
  pointer-events: none;
  z-index: 0;
}

/* Asegurar que el contenido esté por encima del patrón */
body > * {
  position: relative;
  z-index: 1;
}

.social-card {
  background: #111;
  padding: 25px;
  border-radius: 16px;
}

.social-title {
  color: #fff;
  margin-bottom: 20px;
}

.social-feed-card {
  display: block;
  background: #0b0b0b;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s;
}

.social-feed-card:hover {
  transform: translateY(-4px);
}

.social-feed-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.social-feed-content {
  padding: 14px;
  color: #fff;
}

.platform-tag {
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 6px;
}

.platform-tag.youtube { color: #ff0000; }
.platform-tag.x { color: #1da1f2; }

.social-cta {
  display: block;
  margin-top: 20px;
  text-align: center;
}

/* =========================
   HEADER SCROLL BEHAVIOUR
========================= */
.carrousel-item {
  max-height: 520px;
  min-height: 520px;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483000;
  overflow: visible !important;

  transition:
    transform .35s ease,
    background-color .35s ease,
    backdrop-filter .35s ease;
}

/* Asegurar que header esté debajo de modales */
body.modal-open header {
  z-index: 2147483000 !important;
}

/* Header oculto (scroll down) */
header.is-hidden {
  transform: translateY(-100%);
}

header.header-dropdown-open {
  transform: translateY(0) !important;
}

/* Header visible con fondo */
header.is-scrolled {
  background: rgba(5,7,13,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(59,130,246,.25);
}

/* Header arriba del todo */
header.is-top {
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(59,130,246,.25);
}


@media (max-width: 768px) {
  .header {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.section {
  position: relative;
}

.section::before {
  content: ;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 120px;
 background: linear-gradient(
 to bottom,
 rgba(0,0,0,0.65),
 transparent
 );
 pointer-events: none;
}



/* =========================
 HEADER / NAVBAR
========================= */
header {
 background: transparent;
 border-bottom: 1px solid rgba(59,130,246,.25);
}
header:hover {
 background: transparent;
 border-bottom: 1px solid rgba(59,130,246,.25);
}

.logo-h-img {
 height: 42px;
 transition: filter .3s ease;
}

.fecod-main-nav {
  margin-left: auto;
  overflow: visible;
}

.fecod-header {
  isolation: auto;
  z-index: 2147483000 !important;
  overflow: visible !important;
}

.fecod-header .container,
.fecod-header .navbar,
.fecod-header .navbar-collapse,
.fecod-header .navbar-nav,
.fecod-header .nav-item.dropdown {
  overflow: visible !important;
}

.fecod-header .nav-item.dropdown {
  z-index: 2147483100;
}

.fecod-navbar-toggler {
  border: 1px solid rgba(92, 145, 236, 0.45);
  background: rgba(11, 18, 32, 0.9);
  border-radius: 8px;
}

.fecod-navbar-toggler:focus {
  box-shadow: 0 0 0 .16rem rgba(59,130,246,.25);
}

header a:hover .logo-h-img {
 filter:
 drop-shadow(0 0 6px rgba(59,130,246,.6))
 drop-shadow(0 0 14px rgba(59,130,246,.4));
}

/* NAV LINKS */
.navbar-nav .nav-link {
 font-size: .8rem;
 letter-spacing: .08em;
 text-transform: uppercase;
 color: #e5e7eb !important;
 position: relative;
}

.nav-notif-badge {
  position: absolute;
  top: -2px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.6rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 0 0 2px rgba(5,7,13,0.95);
}

.navbar-nav .nav-link::after {
 content: ;
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--blue);
  transition: width .25s ease;
}

.navbar-nav .nav-link:hover::after {
  width: 100%;
}

/* DROPDOWN HOVER (desktop): keep open when moving from trigger to menu */
@media (min-width: 992px) {
  .navbar .nav-item.dropdown {
    position: relative;
    padding-bottom: 18px;
    margin-bottom: -18px;
  }

  .navbar .nav-item.dropdown > .dropdown-menu {
    --bs-dropdown-spacer: 0;
    margin-top: 0 !important;
    top: calc(100% - 2px);
    z-index: 2147483200;
    pointer-events: auto !important;
    position: absolute;
  }

  .navbar .nav-item.dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
    pointer-events: none;
  }

  .navbar .nav-item.dropdown:hover > .dropdown-menu,
  .navbar .nav-item.dropdown:focus-within > .dropdown-menu,
  .navbar .nav-item.dropdown > .dropdown-menu:hover,
  .navbar .nav-item.dropdown > .dropdown-menu:focus-within {
    display: block;
  }
}

.fecod-header .dropdown-menu,
.fecod-header .dropdown-menu .dropdown-item {
  pointer-events: auto !important;
}

.dropdown-menu {
  background: #05070a;
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 8px;
}

.dropdown-item {
  color: #e5e7eb;
}

.dropdown-item:hover {
  background: rgba(59,130,246,.15);
  color: #fff;
}

/* =========================
   HERO
========================= */
.hero {
  padding: 6rem 0 5rem;
  background:
    radial-gradient(circle at 70% 20%, rgba(59,130,246,.18), transparent 40%),
    linear-gradient(180deg, #000, var(--dark));
}

/* =========================
   SECTIONS
========================= */
.section {
  padding: 5rem 0;
}

.custom-grey {
  background: #0e1118;
}

/* =========================
   SCROLL REVEAL (CINEMATIC)
========================= */
.reveal {
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity .8s cubic-bezier(.4,0,.2,1),
    transform .8s cubic-bezier(.4,0,.2,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 991px) {
  .navbar-expand-lg .navbar-collapse {
    display: none;
  }

  .navbar-expand-lg .navbar-collapse.show {
    display: block;
    width: 100%;
    margin-top: .65rem;
    border: 1px solid rgba(59,130,246,.28);
    border-radius: 10px;
    background: rgba(4, 10, 20, 0.95);
    padding: .4rem;
  }

  .navbar-expand-lg .navbar-collapse .navbar-nav .nav-link {
    padding: .5rem .65rem;
    border-radius: 8px;
  }

  .navbar-expand-lg .navbar-collapse .navbar-nav .nav-link:hover {
    background: rgba(59,130,246,.15);
  }

  .navbar-nav .nav-link::after {
    display: none;
  }
}

.fecod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.fecod-card {
  padding: 2rem;
  background: linear-gradient(180deg, #0b0f14, #05070d);
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 14px;
  transition: transform .3s ease, box-shadow .3s ease;
}

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

.fecod-card h4 {
  font-weight: 700;
  margin-bottom: .75rem;
}


@keyframes ambientPulse {
  0% { opacity: .85; }
  50% { opacity: 1; }
  100% { opacity: .85; }
}

.hero::before {
  content: ;
 position: absolute;
 inset: 0;
 background:
 radial-gradient(circle at 70% 30%, rgba(59,130,246,.18), transparent 45%);
 animation: ambientPulse 8s ease-in-out infinite;
 pointer-events: none;
}

body::after {
 content: ;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("/static/img/ui/noise.e15d713ed31f.png");
  opacity: 0.035;
}

.discord-hub {
  position: relative;
  padding: 6rem 0;
  overflow: hidden;
}

.discord-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 30%, rgba(88,101,242,0.25), transparent 45%),
    linear-gradient(180deg, #05070d 0%, #020409 100%);
  z-index: 0;
}

.discord-hub .container {
  position: relative;
  z-index: 2;
}

.discord-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: #5865F2;
  font-weight: 700;
}

.discord-title {
  font-size: 2.4rem;
  font-weight: 800;
  margin: 0.75rem 0 1rem;
}

.discord-text {
  color: #cfd8e3;
  max-width: 520px;
}
.discord-features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.discord-features li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: #e5e7eb;
}

.discord-features li::before {
  content: ▸;
  position: absolute;
  left: 0;
  color: #5865F2;
}

.discord-cta {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.75rem;
  border: 1px solid #5865F2;
  color: #5865F2;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: all .25s ease;
}

.discord-cta:hover {
  background: #5865F2;
  color: #000;
}

.discord-visual img {
  max-width: 220px;
  filter:
    drop-shadow(0 20px 40px rgba(88,101,242,0.35));
  transform: translateY(0);
  transition: transform .6s ease;
}

.discord-hub:hover .discord-visual img {
  transform: translateY(-8px);
}

.navbar .dropdown-toggle::before {
  content: ▾;
  margin-left: 6px;
  font-size: 0.7rem;
  opacity: 0.6;
}

.fecod-features {
  position: relative;
  padding: 6rem 0;
  background-image: url("/static/img/siteinfo/lan.0c37c929a508.jpg");
  background-size: cover;
  background-position: center 20%;
  background-attachment: fixed;
}

.fecod-features::before {
  content: ;
 position: absolute;
 inset: 0;
 background:
 linear-gradient(
 to bottom,
 rgba(5,7,13,0.92),
 rgba(5,7,13,0.85),
 rgba(5,7,13,0.95)
 );
 z-index: 1;
}

.fecod-features > .container {
 position: relative;
 z-index: 2;
}

.feature-card {
 height: 100%;
 padding: 2rem;
 border-radius: 14px;
 background: rgba(15, 23, 42, 0.75);
 backdrop-filter: blur(10px);
 border: 1px solid rgba(59,130,246,0.25);
 box-shadow: 0 20px 40px rgba(0,0,0,0.45);
 transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.feature-card h3 {
 font-size: 1.1rem;
 font-weight: 700;
 margin-bottom: .75rem;
 color: #fff;
}

.feature-card p {
 font-size: .95rem;
 color: #cfd8e3;
 line-height: 1.6;
}

.feature-card:hover {
 transform: translateY(-8px);
 border-color: rgba(59,130,246,0.7);
 box-shadow:
 0 30px 60px rgba(0,0,0,0.6),
 0 0 20px rgba(59,130,246,0.25);
}

.navbar-nav .dropdown-toggle::after {
 display: none !important;
 content: none !important;
}

.navbar-nav .dropdown-toggle::before {
 display: none !important;
}

.news-carousel {
 height: 75vh;
 min-height: 520px;
 position: relative;
}

.news-carousel .carousel-item {
 height: 75vh;
 min-height: 520px;
 background-size: cover;
 background-position: center 20%;
}

.carousel-overlay {
 position: absolute;
 inset: 0;
 background:
 linear-gradient(
 to top,
 rgba(5,7,13,0.95),
 rgba(5,7,13,0.65),
 rgba(5,7,13,0.3)
 );
}

.carousel-content {
 max-width: 620px;
 padding-bottom: 4rem;
}

.carousel-content h2 {
 font-size: clamp(2rem, 4vw, 3rem);
 font-weight: 800;
 margin-bottom: 0.75rem;
}

.carousel-content p {
 color: #cfd8e3;
 margin-bottom: 1.5rem;
}

.news-tag {
 display: inline-block;
 font-size: .7rem;
 letter-spacing: .2em;
 color: #93c5fd;
 border: 1px solid rgba(59,130,246,.4);
 padding: .35rem .75rem;
 margin-bottom: .75rem;
}

.carousel-progress {
 position: absolute;
 left: 0;
 bottom: 0;
 width: 100%;
 height: 3px;
 background: rgba(255,255,255,0.15);
 z-index: 10;
 overflow: hidden;
}

.carousel-progress-bar {
 background: linear-gradient(
 90deg,
 #3b82f6,
 #60a5fa
 );
}

.twitch-popup {
 position: fixed;
 bottom: 24px;
 right: 24px;
 z-index: 1030; /* Below Bootstrap modals (1050) */
 display: none;
}

.twitch-popup-content {
 background: #0b0f14;
 border: 1px solid rgba(145,70,255,.6);
 border-radius: 14px;
 padding: 1.5rem;
 width: 300px;
 box-shadow: 0 20px 40px rgba(0,0,0,.6);
}

.twitch-badge {
 display: inline-block;
 font-size: .7rem;
 letter-spacing: .15em;
 color: #9146FF;
 margin-bottom: .5rem;
}

.twitch-actions {
 display: flex;
 justify-content: space-between;
 margin-top: 1rem;
}

.twitch-actions button {
 background: none;
 border: none;
 color: #9ca3af;
 font-size: .85rem;
}

.instagram-media {
 max-width: 400px !important;
 width: 100% !important;
}
.twitter-tweet {
 margin: 0 auto !important;
}

#social-hub .social-title {
 font-size: 1.2rem;
 font-weight: 800;
 margin-bottom: 1.25rem;
 letter-spacing: .05em;
 min-height: min-content;
}

.social-card {
 max-height: 520px auto !important;
 min-height: 520px auto !important;
}

.instagram-media {
 max-width: 420px !important;
 margin: 0 auto !important;
 max-height: 520px auto !important;
 min-height: 520px auto !important;

}

.twitter-tweet {
 margin: 0 auto !important;
 max-height: 520px auto !important;
 min-height: 520px auto !important;

}

.social-cta {
 display: inline-block;
 margin-top: 1rem;
 font-size: .85rem;
 letter-spacing: .1em;
 color: #93c5fd;
 text-decoration: none;
 border-bottom: 1px solid rgba(59,130,246,.4);
 transition: all .2s ease;
}

.social-cta:hover {
 color: #fff;
 border-color: #3b82f6;
}

.news-carousel {
 height: 75vh;
 min-height: 520px;
}

.news-tags {
 margin-bottom: .5rem;
}

.news-tag {
 display: inline-block;
 font-size: .7rem;
 letter-spacing: .15em;
 color: #93c5fd;
 border: 1px solid rgba(59,130,246,.4);
 padding: .35rem .75rem;
}

.news-date {
 color: #cfd8e3;
 font-size: .85rem;
 margin-bottom: 1.25rem;
}


#fecodNewsCarousel .carousel-inner {
 height: 75vh;
 min-height: 520px;
 position: relative;
}

#fecodNewsCarousel .carousel-item {
 height: 100%;
 position: relative;
}

#fecodNewsCarousel {
 position: relative;
 overflow: hidden;
}


.carousel-content {
 opacity: 0;
 transform: translateY(20px);
 transition: opacity .5s ease;
}

.carousel-item.active .carousel-content {
 opacity: 1;
 transform: translateY(0);
}

.news-tabs {
 position: absolute;
 bottom: 24px;
 left: 900px;
 z-index: 30;
 display: flex;
 gap: 1rem;
 pointer-events: auto;
}

.news-tab {
 display: flex;
 align-items: center;
 gap: .4rem;
 cursor: pointer;
 opacity: .35;
 transition: opacity .2s ease;
}

.news-tab.active,
.news-tab:hover {
 opacity: 1;
}

.news-tab-number {
 font-size: .85rem;
 font-weight: 700;
 letter-spacing: .15em;
 color: #fff;
 min-width: 2ch;
 text-align: center;
}

.news-tab-bar {
 width: 32px;
 height: 2px;
 background: rgba(255,255,255,.25);
 overflow: hidden;
}

.news-tab-bar-fill {
 display: block;
 height: 100%;
 width: 0%;
 background: var(--blue);
}

.home-events {
 padding: 5rem 0;
}

.section-title {
 font-weight: 900;
 letter-spacing: .12em;
}

.events-header {
 color: #fff;
}

.events-nav {
 display: flex;
 align-items: center;
 gap: .75rem;
}

.events-arrow {
 background: none;
 border: 1px solid rgba(255,255,255,.4);
 color: #fff;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 font-size: 1.2rem;
 transition: all .2s ease;
}

.events-arrow:hover {
 background: #fff;
 color: #000;
}

.events-more {
 color: #fff;
 font-size: .85rem;
 letter-spacing: .08em;
 text-decoration: none;
}

.events-carousel {
 display: flex;
 gap: 1.5rem;
 overflow-x: auto;
 scroll-behavior: smooth;
 padding-bottom: 1rem;
}

.events-carousel::-webkit-scrollbar {
 display: none;
}

.event-card {
 position: relative;
 min-width: 320px;
 height: 460px;
 background-size: cover;
 background-position: center;
 border-radius: 14px;
 overflow: hidden;
 flex-shrink: 0;
}

.event-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(
 to top,
 rgba(5,7,13,.9),
 rgba(5,7,13,.55),
 rgba(5,7,13,.15)
 );
}

.event-content {
 position: absolute;
 bottom: 0;
 padding: 1.5rem;
 z-index: 2;
}

.event-date {
 font-size: .75rem;
 letter-spacing: .12em;
 opacity: .85;
}

.event-title {
 margin: .75rem 0;
 font-size: 1.2rem;
 font-weight: 800;
}

.event-desc {
 font-size: .85rem;
 opacity: .9;
 margin-bottom: 1rem;
}

.event-actions {
 display: flex;
 gap: .5rem;
}

.back-to-circuit {
 position: fixed;
 top: 12px;
 left: 12px;
 z-index: 1030; /* Below Bootstrap modals (1050) */
 background: #111;
 color: #fff;
 padding: 6px 10px;
 border-radius: 6px;
 font-size: 0.85rem;
 text-decoration: none;
 opacity: 0.9;
}

.back-to-circuit:hover {
 opacity: 1;
 background: #000;
}

.chall-chat {
 position: fixed;
 bottom: 20px;
 right: 20px;
 width: 320px;
 height: 420px;
 background: #0b0f14;
 border: 1px solid #2a2f34;
 border-radius: 10px;
 display: flex;
 flex-direction: column;
 z-index: 1030; /* Below Bootstrap modals (1050) */
}

.chall-chat.hidden {
 display: none;
}

.legal-page {
 max-width: 900px;
 color: #e5e5e5;
}

.legal-page h1,
.legal-page h5 {
 color: #ffffff;
}

.footer-legal a {
 color: #bfbfbf;
 text-decoration: none;
}

.footer-legal a:hover {
 color: #ffffff;
}


#chat-messages {
 flex: 1;
 overflow-y: auto;
 padding: 10px;
 font-size: 14px;
}

.chat-header {
 background: #111;
 padding: 8px;
 font-weight: bold;
}

.cookie-modal {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.55);
 display: flex;
 align-items: flex-end;
 justify-content: center;
 z-index: 1030; /* Below Bootstrap modals (1050) */
}

.cookie-modal.hidden {
 display: none;
}

.cookie-card {
 background: linear-gradient(180deg, #111827, #0b0f1a);
 color: #fff;
 padding: 24px;
 width: 100%;
 max-width: 420px;
 margin: 20px;
 border-radius: 16px;
 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
 animation: cookieSlideUp 0.4s ease-out;
}

.cookie-card h5 {
 margin-bottom: 10px;
 font-weight: 600;
}

.cookie-card p {
 font-size: 0.9rem;
 color: #cbd5f5;
}

.cookie-actions {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: 16px;
}

.cookie-link {
 font-size: 0.85rem;
 color: #60a5fa;
 text-decoration: none;
}

.cookie-link:hover {
 text-decoration: underline;
}

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