/* =========================
   RESET
   ========================= */
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

/* =========================
   BODY / LAYOUT GENERAL
   ========================= */
body{
  background-image: url("../img/fondo.png") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-color: black;
  background-size: cover;

  width: 100vw;
  height: 100vh;
  overflow: hidden; /* evita scroll raro por 100vh + padding */
}

footer{
  padding: 10px;
  text-align: center;
}

/* =========================
   HEADER / LOGO
   ========================= */
.home header{
  text-align: center;
  height: 30vh;
}

.home header > #logo{
  background-image: url("../img/logo.png") !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  padding-top: 10%;
  padding-left: 2%;
  margin: 0 auto;
  height: 25vh;
  position: relative;
}

.home .titulo{
  position: absolute;
  bottom: 0px;
  left:20%;
  color: white !important;
  font-size: clamp(44px, 8vw, 46px);
  font-weight: 800;
  line-height: 0.9;

  /* RELLENO CON DEGRADADO (metal -> oro -> rojo) */
  background: linear-gradient(
    180deg,
    #fff3c6 0%,
    #f6d37a 22%,
    #e0b24d 40%,
    #d24a1c 65%,
    #a80c0c 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* CONTORNO */
  -webkit-text-stroke: 6px rgba(0,0,0,0.9);
  paint-order: stroke fill;

  /* SOMBRAS / RELIEVE */
  text-shadow:
    0 -2px 0 rgba(255,255,255,0.35),
    0 10px 0 rgba(0,0,0,0.55),
    0 0 18px rgba(255, 30, 30, 0.65),
    0 0 40px rgba(255, 120, 0, 0.35);

  filter: drop-shadow(0 14px 10px rgba(0,0,0,0.45));
}

/* OJO: este ::after no hace nada útil ahora (no usas data-text en .titulo)
.home .titulo::after{ content: attr(data-text); }
*/

/* =========================
   SECTION
   ========================= */
.home > section{
  padding-top: 0vh;
  text-align: center;
  height: 55vh;
}

.home section > .preview > video{
  margin: 0 auto;
  width: min(70ch, 92vw);
  border-radius: 12px;
  box-shadow: 0 14px 35px rgba(0,0,0,.65);
}

/* =========================
   BOTONES (Warriors)
   ========================= */
.btn-warriors{
  font-family: "Bebas Neue", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 20px;

  padding: 14px 36px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  background: linear-gradient(180deg, #2a2a2a 0%, #111 45%, #000 100%);
  color: #fff;

  box-shadow:
    0 0 0 2px #ff1a1a inset,
    0 6px 14px rgba(0,0,0,0.6),
    0 0 18px rgba(255,0,0,0.4);

  transition: all .25s ease;
}

.btn-warriors::before{
  content:"";
  position:absolute;
  top:0;
  left:-75%;
  width:50%;
  height:100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );
  transform: skewX(-20deg);
  transition: left .6s ease;
}

.btn-warriors:hover::before{ left:130%; }

.btn-warriors:hover{
  background: linear-gradient(180deg,#ff3b3b 0%,#b30000 60%,#4d0000 100%);
  box-shadow:
    0 0 0 2px #ff0000 inset,
    0 8px 22px rgba(0,0,0,0.8),
    0 0 30px rgba(255,0,0,0.7);
  transform: translateY(-2px);
}

/* ULTRA */
.btn-warriors-ultra{
  --red: #ff1a1a;
  --amber:#ff7a00;
  --bg1:#1b1b1f;
  --bg2:#070709;

  font-family: "Bebas Neue", "Anton", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 20px;
  color:#fff;

  padding: 14px 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  cursor:pointer;

  position:relative;
  isolation:isolate;
  overflow:hidden;

  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,0) 35%),
    linear-gradient(180deg, var(--bg1), var(--bg2));

  box-shadow:
    0 10px 26px rgba(0,0,0,.78),
    0 0 0 2px rgba(255,26,26,.35) inset,
    0 0 26px rgba(255,26,26,.22);

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn-warriors-ultra::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-2;
  opacity:.72;
  mix-blend-mode:overlay;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.02) 2px,
      rgba(0,0,0,0.0) 4px
    ),
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.05), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.04), transparent 55%),
    linear-gradient(180deg, #232327, #0b0b0d);
}

.btn-warriors-ultra::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  z-index:-1;

  background: conic-gradient(
    from var(--spin),
    transparent 0deg,
    rgba(255,26,26,0.0) 30deg,
    rgba(255,26,26,0.95) 55deg,
    rgba(255,122,0,0.85) 75deg,
    rgba(255,26,26,0.65) 95deg,
    transparent 140deg,
    transparent 360deg
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  padding: 3px;
  filter: drop-shadow(0 0 14px rgba(255,26,26,0.65))
          drop-shadow(0 0 28px rgba(255,122,0,0.25));

  animation: spinBorder 2.2s linear infinite;
  opacity: .95;
}

.btn-warriors-ultra .innerGlow{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 45%),
    radial-gradient(circle at 50% 120%, rgba(255,26,26,0.22), transparent 55%);
  mix-blend-mode:screen;
  opacity:.9;
}

.btn-warriors-ultra .shine{
  position:absolute;
  inset:-60% -40%;
  z-index:1;
  background: linear-gradient(
    120deg,
    transparent 35%,
    rgba(255,255,255,0.35) 50%,
    transparent 65%
  );
  transform: translateX(-70%) rotate(12deg);
  transition: transform .65s ease;
  mix-blend-mode: screen;
  pointer-events:none;
  opacity:.6;
}

.btn-warriors-ultra span{
  position:relative;
  z-index:2;
  text-shadow:
    0 2px 0 rgba(0,0,0,.6),
    0 0 16px rgba(255,26,26,.35);
}

.btn-warriors-ultra:hover{
  transform: translateY(-2px);
  box-shadow:
    0 16px 34px rgba(0,0,0,.86),
    0 0 0 2px rgba(255,26,26,.55) inset,
    0 0 32px rgba(255,26,26,.45);
  filter: saturate(1.12);
}

.btn-warriors-ultra:hover .shine{
  transform: translateX(75%) rotate(12deg);
}

.btn-warriors-ultra:active{
  transform: translateY(0px) scale(.99);
}

@keyframes spinBorder{
  to { --spin: 360deg; }
}

@property --spin{
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.btn-warriors-ultra.live{
  --red:#ff0000;
  --amber:#ff3b00;
}

/* =========================
   PELEAS (SINGLE MODE) - FIX DEFINITIVO
   ========================= */
.peleas{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 18px 16px;
}

.peleas .single-wrap{
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 14px;
}

/* Botones prev/next (solo en peleas) */
.peleas .car-btn{
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg,#1a1a1f,#08080b);
  color:#fff;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.6), 0 0 18px rgba(255,0,0,.18);
  transition: .2s;
}
.peleas .car-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,.75), 0 0 28px rgba(255,0,0,.35);
}

.peleas .slide{
  width: 100%;
  flex: initial;
  scroll-snap-align: unset;
}

/* Fight card “tipo velada” */
.peleas .fight-card{
  width: 100%;
  min-height: 150px;

  display: flex;
  align-items: stretch;
  border-radius: 16px;
  overflow: hidden;
  position: relative;

  background: linear-gradient(90deg, #240000 0%, #0b0b0f 50%, #1a0a00 100%);
  box-shadow:
    0 0 0 2px rgba(255,0,0,.30) inset,
    0 14px 35px rgba(0,0,0,.72),
    0 0 24px rgba(255,0,0,.18);

  transform: none;
}

.peleas .fight-card::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(circle at 25% 50%, rgba(255,0,0,.20), transparent 55%),
    radial-gradient(circle at 75% 50%, rgba(255,120,0,.14), transparent 60%);
  filter: blur(40px);
  z-index: 0;
}

.peleas .fighter{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;

  padding: 22px 16px;
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 1;
}

.peleas .fighter.left{ padding-left: 26px; }
.peleas .fighter.right{ padding-right: 26px; }

.peleas .fighter img{
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 999px;
  border: 3px solid #ff1a1a;
  box-shadow: 0 0 18px rgba(255,0,0,.45), 0 0 40px rgba(255,0,0,.15);
  transition: .2s ease;
}

.peleas .fighter .name{
  margin-top: 0;
  font-family: "Bebas Neue","Anton",system-ui,sans-serif;
  font-size: 22px;
  letter-spacing: .10em;
  opacity: .95;
}

.peleas .vs{
  width: 140px;
  display:flex;
  align-items:center;
  justify-content:center;

  font-family:"Bebas Neue","Anton",system-ui,sans-serif;
  font-size: 64px;
  color:#fff;
  text-shadow: 0 0 14px #ff0000, 0 0 32px #ff0000, 0 0 70px #ff7a00;

  padding: 0;
  animation: none;
  position: relative;
  z-index: 2;
}

.peleas .vs::before{
  content:"";
  position:absolute;
  top: 14px;
  bottom: 14px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(255,0,0,.55), transparent);
  opacity: .85;
}

.peleas .fight-card:hover{
  box-shadow:
    0 0 0 2px rgba(255,0,0,.55) inset,
    0 18px 40px rgba(0,0,0,.85),
    0 0 35px rgba(255,0,0,.25);
}
.peleas .fight-card:hover .fighter img{
  transform: scale(1.04);
}

@media (max-width: 780px){
  .peleas .single-wrap{
    grid-template-columns: 44px 1fr 44px;
    gap: 10px;
  }
  .peleas .car-btn{ width: 44px; height: 44px; border-radius: 10px; }
  .peleas .vs{ width: 96px; font-size: 52px; }
  .peleas .fighter img{ width: 76px; height: 76px; }
  .peleas .fight-card{ min-height: 130px; }
}

/* =========================
   PELEADORES (CAROUSEL)
   ========================= */
.peleadores{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 18px 16px;
}

.fighters-wrap{
  width:100%;
  max-width: 1200px;
  display:grid;
  grid-template-columns: 56px 1fr 56px;
  align-items:center;
  gap:14px;
}

.fighter-slide{ width:100%; }

.fighter-card{
  width:100%;
  border-radius: 18px;
  overflow:hidden;
  position:relative;
  padding: 18px;

  background: linear-gradient(180deg, rgba(20,20,24,.95), rgba(8,8,10,.95));
  box-shadow:
    0 0 0 2px rgba(255,0,0,.28) inset,
    0 14px 35px rgba(0,0,0,.72),
    0 0 24px rgba(255,0,0,.16);
}

.fighter-card::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,0,0,.20), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(255,120,0,.12), transparent 60%);
  filter: blur(42px);
  z-index:0;
}

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

.fighter-card__top{
  display:flex;
  gap:16px;
  align-items:center;
}

.fighter-card__img{
  width: 98px;
  height: 98px;
  border-radius: 999px;
  object-fit:cover;
  border: 3px solid #ff1a1a;
  box-shadow: 0 0 18px rgba(255,0,0,.45), 0 0 40px rgba(255,0,0,.15);
}

.fighter-card__title{ text-align:left; }
.fighter-card__name{
  font-family:"Bebas Neue","Anton",system-ui,sans-serif;
  font-size: 34px;
  letter-spacing: .10em;
  color:#fff;
  line-height: 1;
}
.fighter-card__alias{
  margin-top: 6px;
  color: rgba(255,255,255,.75);
  font-size: 14px;
  letter-spacing: .08em;
}

.fighter-card__meta{
  display:flex;
  gap:10px;
  margin-top: 14px;
  flex-wrap:wrap;
}

.tag{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.9);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tag--dim{ opacity:.75; }

.stats{ margin-top: 16px; display:flex; flex-direction:column; gap:10px; }
.stat{ display:grid; grid-template-columns: 110px 1fr; gap:12px; align-items:center; }
.stat__label{
  color: rgba(255,255,255,.85);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.bar__fill{
  height:100%;
  width:50%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,0,0,.95), rgba(255,122,0,.80));
  box-shadow: 0 0 16px rgba(255,0,0,.35);
}

.fighter-card__btn{
  width:100%;
  margin-top: 16px;
}

/* dots */
.dots{
  display:flex;
  gap:8px;
  margin-top: 14px;
}
.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  cursor:pointer;
}
.dot--active{
  background: rgba(255,0,0,.75);
  border-color: rgba(255,0,0,.9);
  box-shadow: 0 0 14px rgba(255,0,0,.55);
}

@media (max-width: 780px){
  .fighters-wrap{ grid-template-columns: 44px 1fr 44px; gap:10px; }
  .fighter-card__img{ width:84px; height:84px; }
  .fighter-card__name{ font-size: 28px; }
  .stat{ grid-template-columns: 96px 1fr; }
}

/* =========================
   PELEADORES - FIX BOTONES SLIDER
   ========================= */

/* Asegura que la sección no quede tapada */
.peleadores{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 18px 16px;
  position: relative;
  z-index: 2;
}

/* Grid del carrusel: botones | card | botones */
.peleadores .fighters-wrap{
  width:100%;
  max-width: 1200px;
  display:grid;
  grid-template-columns: 56px 1fr 56px;
  align-items:center;
  gap:14px;
  position: relative;
}

/* BOTONES prev/next (solo en PELEADORES) */
.peleadores .car-btn{
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);

  background: linear-gradient(180deg,#1a1a1f,#08080b);
  color: #fff;

  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;

  /* que se vean SIEMPRE */
  box-shadow:
    0 12px 26px rgba(0,0,0,.75),
    0 0 0 2px rgba(255,0,0,.35) inset,
    0 0 22px rgba(255,0,0,.22);

  font-family: "Bebas Neue","Anton",system-ui,sans-serif;
  font-size: 34px;
  line-height: 1;

  position: relative;
  z-index: 10; /* por encima de la card */
  transition: .2s;
}

.peleadores .car-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 16px 34px rgba(0,0,0,.85),
    0 0 0 2px rgba(255,0,0,.60) inset,
    0 0 34px rgba(255,0,0,.50);
}

/* Slide */
.peleadores .fighter-slide{
  width:100%;
  position: relative;
  z-index: 2;
}

/* Evita que el glow del card capture clicks */
.peleadores .fighter-card::before{
  pointer-events: none;
}

/* Responsive */
@media (max-width: 780px){
  .peleadores .fighters-wrap{
    grid-template-columns: 44px 1fr 44px;
    gap:10px;
  }
  .peleadores .car-btn{
    width:44px;
    height:44px;
    border-radius:10px;
    font-size: 28px;
  }
}


/* =========================
   BRACKET
   ========================= */
.bracket{
  width: min(1320px, 96vw);
  margin: 0 auto;
  padding: 18px 14px;

  display: grid;
  grid-template-columns: 1fr 1fr 440px 1fr 1fr;
  grid-template-rows: auto;
  gap: 16px;

  color: #fff;
}

/* Rond as */
.round{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

/* “Match box” */
.match{
  position: relative;
  border-radius: 14px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(18,18,22,.92), rgba(6,6,8,.92));
  box-shadow:
    0 0 0 2px rgba(255,0,0,.22) inset,
    0 12px 28px rgba(0,0,0,.7),
    0 0 22px rgba(255,0,0,.12);
  overflow: hidden;
}

.match::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 25% 40%, rgba(255,0,0,.22), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(255,120,0,.12), transparent 60%);
  filter: blur(42px);
  opacity: .9;
  pointer-events:none;
}

/* Slots (cada jugador) */
.slot{
  position: relative;
  z-index: 1;
  border-radius: 999px;
  padding: 10px 14px;
  margin: 8px 0;
  text-align: center;

  font-family: "Bebas Neue","Anton",system-ui,sans-serif;
  letter-spacing: .10em;
  font-size: 18px;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  box-shadow: 0 0 0 2px rgba(255,0,0,.18) inset;
}

.slot.big{
  font-size: 22px;
  padding: 14px 16px;
}

/* Centro */
.center{
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
}

.label{
  text-align: center;
  font-family: "Bebas Neue","Anton",system-ui,sans-serif;
  letter-spacing: .20em;
  font-size: 18px;
  opacity: .9;
  text-shadow: 0 0 18px rgba(255,0,0,.25);
}
.label.champ{ margin-top: 4px; }
.label.third{ margin-top: 6px; }
.label.ex{ margin-top: 10px; opacity: .75; }

.champion .slot{
  border-color: rgba(255,0,0,.55);
  box-shadow:
    0 0 0 2px rgba(255,0,0,.40) inset,
    0 0 26px rgba(255,0,0,.25);
}

/* ===== Conectores (líneas) =====
   Esto es lo “difícil”: hacemos conectores simples por pseudo-elementos
   para que parezca bracket sin SVG.
*/
.round.left .match::after{
  content:"";
  position:absolute;
  top: 50%;
  right: -16px;
  width: 16px;
  height: 2px;
  background: rgba(255,0,0,.45);
  box-shadow: 0 0 18px rgba(255,0,0,.25);
}

.round.right .match::after{
  content:"";
  position:absolute;
  top: 50%;
  left: -16px;
  width: 16px;
  height: 2px;
  background: rgba(255,0,0,.45);
  box-shadow: 0 0 18px rgba(255,0,0,.25);
}

/* Responsive */
@media (max-width: 1100px){
  .bracket{
    grid-template-columns: 1fr 1fr 360px 1fr 1fr;
  }
}
@media (max-width: 900px){
  .bracket{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .center{ grid-column: auto; }
  .round.left .match::after,
  .round.right .match::after{ display:none; }
}

.slide .video{
    text-align: center;
}

.slide .video video{
    margin:15px auto;
    height: 25vh;
}