@font-face {
  font-family: "teko-semibold";
  src: url("../fonts/Teko-SemiBold.woff") format("woff2");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "teko-medium";
  src: url("../fonts/Teko-Medium.woff") format("woff2");
  font-weight: 100;
  font-style: normal;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #0b0e13 !important;
}

:root {
  --primary-color: #f64e00;

  --gray-dark: #0f0f0f;
  --gray-light: #101528;
}

h3 {
  font-family: "teko-medium";
  font-size: 50px !important;
}

h2 {
  font-family: "teko-semibold";
  font-size: 90px !important;
}

h5 {
  font-family: "teko-semibold";
  font-size: 30px !important;
}

p {
  color: #c1c1c1;
}

a {
  text-decoration: none;
  margin: 0px;
}

.container__main {
  padding: 100px 0px;
}

.span__title {
  letter-spacing: 5px;
  font-family: "teko-semibold";
  margin: 0px;
  font-size: 20px;
  color: var(--primary-color);
}

/*
    Forms css
*/
.login-box {
  width: 80%;
  margin: auto;
  padding: 50px 60px 50px 60px;
  border-radius: 20px;
}

.form__input {
  background-color: rgba(84, 84, 84, 0.286);
  height: 60px;
  border-radius: 50px;
  border: none;
  padding: 5px 25px;
  width: 100%;
  border: 1px solid var(--primary-color);
}

.form__label {
  color: white;
  margin: 20px auto 10px auto;
  font-size: 19px;
}

.form__input:focus {
  background-color: rgba(84, 84, 84, 0.286);
  color: #fff;
}

.form__input::placeholder {
  color: #9b9b9b;
}

.form__input:focus::placeholder {
  color: transparent;
}

.form__input option {
  background-color: #12121f;
  color: #fff;
}

main {
  padding: 100px 0px;
}
/* css header */

.title--header {
  font-size: 95px;
  font-family: "teko-semibold";
  line-height: 75px;
}

.text-subtitle {
  line-height: 80px;
}

.title--header span {
  color: #ff5500;
}

.title-info {
  font-size: 30px !important;
  color: var(--primary-color);
}

.-img--person {
  left: 150px;
  z-index: -1;
}

.header__banner {
  width: 100%;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  padding: 100px 10px;
}

.background__video {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  z-index: -20;
  filter: grayscale(60%) blur(2px) brightness(0.8);
}

.overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  z-index: -10;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 1));
}

.card--header {
  background-color: rgba(0, 0, 0, 0.7);
  max-width: 250px;
  max-height: 250px;
  border-radius: 20px;
  margin: auto;
  border-color: rgba(254, 128, 0, 0.8) !important ;
}

.card--header .num {
  font-family: "teko-semibold";
  font-size: 70px !important;
  margin-bottom: -20px;
}

.row-header {
  margin-top: 20px;
  margin-bottom: 50px;
}

/* Components ux */
.buttom__group {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
}

.buttom {
  background: linear-gradient(45deg, rgb(253, 12, 0), rgb(254, 130, 0));
  background-size: 200% 200%; /* gradiente más grande */
  background-position: left center; /* posición inicial */
  padding: 12px 28px;
  color: white;
  text-decoration: none;
  font-family: "teko-medium";
  font-size: 22px;
  letter-spacing: 2px;
  border-radius: 50px;
  transition: background-position 0.5s ease; /* animación suave */
}

.buttom:hover {
  background: linear-gradient(90deg, rgb(255, 200, 2), rgb(254, 130, 0));
  background-size: 200% 200%;
  background-position: right center; /* mueve el fondo */
  color: white;
}

.-btn--primary {
  background: linear-gradient(45deg, rgb(253, 12, 0), rgb(254, 130, 0));
  position: relative;
}

.-btn--primary:before {
  content: "";
  background: linear-gradient(
    45deg,
    #c700ba,
    #ff7300,
    #ff5500,
    #f700ff,
    #f067ff,
    #ff0073,
    #c085ff,
    #ff00c8,
    #ff13c0
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 3px);
  height: calc(100% + 3px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 50px;
}

.-btn--primary:hover:before {
  opacity: 1;
}

.-btn--primary img {
  transition: all 0.3s ease-in-out;
}

.-btn--primary:hover img {
  transform: scale(1.3);
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.redes-iconos {
  z-index: 10;
  right: 5px;
  bottom: 150px;
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.red__icon{
  background-color: var(--primary-color);
  padding: 8px;
  border-radius: 50px;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease, background-color 0.2s ease;
}

.red__icon:hover{
  transform: scale(1.2);
}

.fb:hover{
  background-color: #395CA2;
}
.tk:hover{
  background-color: #000000;
}
.yt:hover{
  background-color: #d60000;
}
.in:hover{
  background-color: #9E2098;
}
.ds:hover{
  background-color: #515DA0;
}

.red__icon img{
  width: 23px;
}

/*
    Page Perfil css
*/

.perfil__container {
  background-color: var(--gray-light);
  padding: 50px 60px;
  border-radius: 20px;
}

.perfil__stats {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 10px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: white;
  text-align: center;
  line-height: 40px;
}

.victorias {
  background-color: #28a745; /* verde */
}

.empates {
  background-color: #ffc107; /* amarillo */
}

.derrotas {
  background-color: #dc3545; /* rojo */
}

.perfil__legend {
  display: flex;
  gap: 20px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 0px;
}

.perfil__legend div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}

.table__perfil {
  width: 100%;
}

.table__perfil--row {
  text-align: left;
  color: white;
}

.table__perfil--th,
.table__perfil--td {
  text-align: left;
  height: 50px;
}

.table__perfil--th {
  font-family: "teko-semibold";
  font-size: 23px;
  width: 40%;
}

.table__perfil--td {
  font-size: 20px;
  width: 60%;
}

/* css slider */

.slider {
  position: relative;
  max-width: 900px;

  overflow: hidden;
}

.slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.btn__slide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  cursor: pointer;
  padding: 1px;
  border-radius: 50%;
  user-select: none;
  width: 50px;
  height: 50px;
}

.slide {
  min-width: 100%;
  height: 100%;
}

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

.btn__slide:hover {
  background: rgba(0, 0, 0, 0.8);
}

#prev {
  left: 10px;
}

#next {
  right: 10px;
}

/* Indicadores */
.dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
}

.dot.active {
  background: white;
}

.whatsapp-icon {
  position: fixed;
  right: 30px;
  bottom: 50px;
  z-index: 20;
}

/* css of the page register */

.glow-card {
  background: #fff;
}

/*
    Footer css
*/
.footer {
  background-color: var(--gray-dark);
}

/* css of the table */
table {
  margin: auto;
}

table .-thead--hader {
  height: 70px;
}

table thead th {
  text-align: center;
  font-size: 20px;
  font-weight: 400;
}

table tbody tr td {
  height: 60px;
  text-align: center;
}

.heade--tag {
  height: 2px;
  width: 100%;
}

/* css og the nav bars */
.nav__top {
  background-color: var(--gray-light);
  padding: 5px 10px;
}

.nav__bar {
  background-color: #000;
}

.nav__link {
  color: #fff;
  font-size: 24px;
  font-weight: 100;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  font-family: "teko-medium";
  margin: 0 15px;
  letter-spacing: 1px;
}

.nav__link:hover {
  color: var(--primary-color);
}

.nav__action--span {
  font-family: "teko-medium";
  font-size: 20px;
  transition: all 0.3s ease-in-out;
  margin-top: 5px;
}

/* css of the home */
.-post--home {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)),
    /* capa oscura */ url("../images/slides/bg-banner-2.jpg") center/cover
      no-repeat; /* imagen */
  width: 100%;
  height: 400px;
}

.marquee {
  width: 60%;
}

/*
  Acordion section
*/

.acordion__item + .acordion__item {
  border-top: 1px solid var(--border);
}

.acordion__header {
  width: 100%;
  text-align: left;
  background: rgba(0, 0, 0, 0.5);
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
}
.acordion__header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.chev {
  margin-left: auto;
  transition: transform 0.25s ease;
}

.download__container {
  width: 50%;
}

@media (max-width: 992px) {
  .download__container {
    width: 100%;
  }
}

/* Panel colapsable con animación de altura */
.panel-wrap {
  overflow: hidden;
  transition: max-height 0.28s ease;
  max-height: 0;
  background: #0b1220;
}
.panel {
  padding: 16px 20px 20px;
  color: #fff;
  line-height: 1.6;
}

/* Estado abierto */
.item.is-open .panel-wrap {
  max-height: 320px;
} /* ajusta si tu contenido es más largo */
.item.is-open .chev {
  transform: rotate(180deg);
}

/* Bonus: indicador a la izquierda */
.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  flex: 0 0 10px;
}
.item.is-open .dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15);
}

/* css of loader */
.goog-te-gadget-simple {
  background-color: rgba(0, 0, 0, 0.9) !important;
  border-color: rgba(127, 127, 127, 0.9) !important;
  border-radius: 20px;
}

.goog-te-gadget-simple span {
  color: #7c7c7c;
  margin-right: 10px;
}

.goog-te-gadget-simple img {
  display: none;
}

/* animation loader */
#pageLoader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #12121f;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

#pageLoader img {
  width: 100px;
  animation: pulse 1.2s infinite;
  filter: drop-shadow(0 0 10px #0ff);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.nav__main {
  width: 80%;
  margin: auto;
}

.btn__open {
  background-color: transparent;
  border: none;
  display: none;
}

.btn__nav {
  display: flex;
}

.btn__close {
  display: none;
}

.active {
  display: flex !important;
}

.menu__list {
  display: flex;
  align-items: center;
  list-style: none;
}

nav .menu__list ul li a {
  color: #fff;
}

nav .menu__list ul li a:hover {
  color: #dc0c0c;
}
.info__nav {
  justify-content: start;
  align-items: center;
}

@media (max-width: 992px) {
  .menu__list {
    display: none;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100vh;
    list-style: none;
    align-items: center;
    margin-bottom: 0px;
    background: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
  }

  .btn__close {
    display: block;
    position: absolute;
    top: 20px;
    right: 30px;
    cursor: pointer;
  }

  .nav__link {
    color: var(--primary-color);
    margin: 20px 0px;
  }
  .nav__main {
    width: 95%;
  }
  .info__nav {
    width: 100%;
    justify-content: space-between;
  }
  .btn__group {
    flex-direction: column;
    gap: 20px;
  }
  .menu__list {
    /* display: none; */
    position: fixed;
    z-index: 1000;
  }

  .btn__open {
    display: block;
  }

  .row-header {
    flex-direction: column-reverse;
    padding-top: 70px;
    padding-bottom: 100px;
  }
  .buttom {
    width: 100%;
  }
}

@media (max-width: 1200px) {
  .marquee {
    display: none;
  }
  .btn__nav {
    display: none;
  }
  .menu {
    display: block;
  }

  .-nav--redes {
    display: none;
  }
  .btn--nav {
    justify-content: center;
  }

  .login-box {
    width: 100%;
    padding: 10px;
  }
}