/* =========================
   VARIABLES - FECOD 2026
========================= */
:root {
  /* Colores principales */
  --black: #001729;
  --dark: #002135;
  --grey: #cfd8e3;
  --blue: #1E5A9A;  /* Azul FECOD */
  
  /* Nuevas variables FECOD */
  --fecod-black: #001729;
  --fecod-red: #AD2221;
  --fecod-blue-dark: #002135;
  --fecod-blue-medium: #193C6D;
  --fecod-blue-accent: #1E5A9A;  /* Azul para reemplazar el rojo excesivo */
}

/* =========================
   BASE
========================= */
body {
  color: #fff;
  font-family: 'Inter', 'Exo 2', sans-serif;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(30,90,154,0.12), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(25,60,109,0.18), transparent 55%),
    linear-gradient(180deg, #001729 0%, #002135 40%, #001729 100%);
}
.modal {
  z-index: 99999 !important;
}

.modal-backdrop {
  z-index: 99998 !important;
}
body.modal-open {
  overflow: hidden;
}

.bracket-viewport {
  background: #000;
  z-index: 100000;
}


body.modal-open header,
body.modal-open footer {
  display: none !important;
}

/* =========================
   HEADER SCROLL BEHAVIOUR
========================= */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition:
    transform .35s ease,
    background-color .35s ease,
    backdrop-filter .35s ease;
}

header.is-hidden {
  transform: translateY(-100%);
}

header.is-scrolled {
  background: rgba(0,23,41,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(30,90,154,.25);
}

header.is-top {
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(30,90,154,.25);
}

.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(30,90,154,.25);
}

header:hover {
  background: transparent;
  border-bottom: 1px solid rgba(30,90,154,.25);
}

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

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

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

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

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

/* DROPDOWN */
.nav-item.dropdown:hover > .dropdown-menu {
  display: block;
}

.dropdown-menu {
  background: #001729;
  border: 1px solid rgba(30,90,154,.25);
  border-radius: 8px;
}

.dropdown-item {
  color: #e5e7eb;
}

.dropdown-item:hover {
  background: rgba(30,90,154,.15);
  color: #fff;
}

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

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

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

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

.custom-grey {
  background: #002135;
}

/* =========================
   SCROLL REVEAL
========================= */
.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-collapse {
    background: #001729;
    padding: 1rem;
  }
  .navbar-nav .nav-link::after {
    display: none;
  }
}

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

.fecod-card {
  padding: 2rem;
  background: linear-gradient(180deg, #002135, #001729);
  border: 1px solid rgba(30,90,154,.25);
  border-radius: 14px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

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

.fecod-card h4 {
  font-family: 'Bakbak One', sans-serif;
  font-weight: 400;
  margin-bottom: .75rem;
}

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

/* =========================
   DISCORD HUB
========================= */
.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, #001729 0%, #002135 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-family: 'Bakbak One', sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  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);
}

/* =========================
   FEATURE CARDS
========================= */
.fecod-features {
  position: relative;
  padding: 6rem 0;
  background-image: url("/static/img/siteinfo/lan.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(0,23,41,0.92), rgba(0,23,41,0.85), rgba(0,23,41,0.95));
  z-index: 1;
}

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

.feature-card {
  height: 100%;
  padding: 2rem;
  border-radius: 14px;
  background: rgba(0, 33, 53, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(30,90,154,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-family: 'Bakbak One', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  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(30,90,154,0.7);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.6),
    0 0 20px rgba(30,90,154,0.25);
}

/* =========================
   NAV DROPDOWNS
========================= */
.navbar .dropdown-toggle::before {
  display: none !important;
}

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

/* =========================
   NEWS CAROUSEL
========================= */
.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(0,23,41,0.95), rgba(0,23,41,0.65), rgba(0,23,41,0.3));
}

.carousel-content {
  max-width: 620px;
  padding-bottom: 4rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease;
}

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

.carousel-content h2 {
  font-family: 'Bakbak One', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  margin-bottom: 0.75rem;
}

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

.news-tag, .news-tags .news-tag {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--fecod-blue-accent);
  border: 1px solid rgba(30,90,154,.4);
  padding: .35rem .75rem;
  margin-bottom: .75rem;
}

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

.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, #1E5A9A, #2a7bc4);
}

/* =========================
   NEWS TABS
========================= */
.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(--fecod-blue-accent);
}

/* =========================
   HOME EVENTS
========================= */
.home-events {
  padding: 5rem 0;
}

.section-title {
  font-family: 'Bakbak One', sans-serif;
  font-weight: 400;
  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: var(--fecod-blue-accent);
  color: #fff;
  border-color: var(--fecod-blue-accent);
}

.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(0,23,41,.9), rgba(0,23,41,.55), rgba(0,23,41,.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 {
  font-family: 'Bakbak One', sans-serif;
  margin: .75rem 0;
  font-size: 1.2rem;
  font-weight: 400;
}

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

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

/* =========================
   TWITCH POPUP
========================= */
.twitch-popup {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: none;
}

.twitch-popup-content {
  background: #001729;
  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;
}

/* =========================
   SOCIAL HUB
========================= */
#social-hub .social-title {
  font-family: 'Bakbak One', sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 1.25rem;
  letter-spacing: .05em;
}

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

.twitter-tweet {
  margin: 0 auto !important;
}

.social-cta {
  display: inline-block;
  margin-top: 1rem;
  font-size: .85rem;
  letter-spacing: .1em;
  color: var(--fecod-blue-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(30,90,154,.4);
  transition: all .2s ease;
}

.social-cta:hover {
  color: #fff;
  border-color: var(--fecod-blue-accent);
}

/* =========================
   MISC
========================= */
.back-to-circuit {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  background: #001729;
  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: var(--fecod-blue-accent);
}

/* =========================
   CHAT
========================= */
.chall-chat {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;
  height: 420px;
  background: #001729;
  border: 1px solid #2a2f34;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  z-index: 9999;
}

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

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

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

/* =========================
   LEGAL
========================= */
.legal-page {
  max-width: 900px;
  color: #e5e5e5;
}

.legal-page h1,
.legal-page h5 {
  font-family: 'Bakbak One', sans-serif;
  color: #ffffff;
}

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

.footer-legal a:hover {
  color: var(--fecod-blue-accent);
}

/* =========================
   COOKIE MODAL
========================= */
.cookie-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 9999;
}

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

.cookie-card {
  background: linear-gradient(180deg, #002135, #001729);
  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 {
  font-family: 'Bakbak One', sans-serif;
  margin-bottom: 10px;
  font-weight: 400;
}

.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: var(--fecod-blue-accent);
  text-decoration: none;
}

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

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

/* =========================
   SNOWFLAKES (sin tocar)
========================= */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}

/* =========================
   NAVBAR FIX - FECOD COLORS
========================= */
header.sticky-top,
header.text-white {
  background: #001729 !important;
  border-bottom: 1px solid rgba(30,90,154,0.3) !important;
}

header.is-scrolled,
header.sticky-top.is-scrolled {
  background: rgba(0,23,41,0.95) !important;
  backdrop-filter: blur(12px);
}

header.is-top,
header.sticky-top.is-top {
  background: transparent !important;
}

.navbar,
.navbar-expand-lg {
  background: transparent !important;
}

.navbar-collapse,
.navbar-nav {
  background: transparent !important;
}

@media (max-width: 991px) {
  .navbar-collapse {
    background: #001729 !important;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 10px;
  }
}

/* CONTENEDOR QUE ROMPE BOOTSTRAP */
.bracket-viewport {
  position: fixed;
  inset: 0;
  background: black;
  overflow: hidden;
}

/* IFRAME REAL 1920x1080 ESCALADO */
.bracket-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  border: none;

  transform: translate(-50%, -50%)
             scale(
               min(
                 100vw / 1920,
                 100vh / 1080
               )
             );

  transform-origin: center center;
}

.bracket-iframe {
  filter: none !important;
  opacity: 1 !important;
}

.bracket-scale-wrapper {
  width: 100vw;
  height: 100vh;
  background: #000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bracket-iframe {
  width: 1920px;
  height: 1080px;
  border: 0;
  transform-origin: top center;
  transform: scale(calc(100vw / 1920));
}

@media (min-aspect-ratio: 16/9) {
  .bracket-iframe {
    transform: scale(calc(100vh / 1080));
  }
}