:root {
  --bg: #09020f;
  --panel: rgba(8, 7, 14, 0.92);
  --panel-2: rgba(18, 8, 28, 0.94);
  --purple: #9c22ff;
  --purple-2: #5e10a7;
  --purple-soft: #c15cff;
  --orange: #ff9a00;
  --orange-2: #ff5400;
  --white: #ffffff;
  --muted: #cfc6d7;
  --line: rgba(181, 48, 255, 0.7);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  color: var(--white);
    background:
    radial-gradient(circle at 78% 18%, rgba(255, 90, 0, 0.08), transparent 26%),
    radial-gradient(circle at 12% 86%, rgba(141, 24, 255, 0.12), transparent 28%),
    linear-gradient(rgba(5,1,8,.78), rgba(5,1,8,.78)),
    url('bg.png?v=1.0.1') center center / cover fixed no-repeat;
  font-family: "Barlow Condensed", Arial, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(120deg, transparent 0 48%, rgba(255,255,255,.05) 49%, transparent 50%),
    linear-gradient(30deg, transparent 0 48%, rgba(255,255,255,.025) 49%, transparent 50%);
  background-size: 38px 38px, 62px 62px;
  mix-blend-mode: screen;
}

.page-shell {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 54px);
  isolation: isolate;
  overflow-x: hidden;
}

.ambient {
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  opacity: 0.28;
  pointer-events: none;
  z-index: -1;
}

.ambient--one {
  width: 280px;
  height: 280px;
  right: -80px;
  top: 100px;
}


.ambient--two {
  width: 360px;
  height: 360px;
  left: -170px;
  bottom: 120px;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: 24px;
  align-items: center;
  min-height: 360px;
  margin-bottom: 20px;
}

.hero__copy {
  position: relative;
  z-index: 2;
}

.hero__eyebrow {
  margin: 0 0 16px;
  padding-left: 78px;
  color: #f4eef8;
  font-size: clamp(.95rem, 1.6vw, 1.3rem);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.hero__eyebrow::before,
.hero__eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  width: 56px;
  height: 6px;
  transform: skewX(-28deg);
  background: var(--purple);
  box-shadow: 13px 10px 0 var(--purple);
}

.hero h1 {
  margin: 0;
  line-height: .82;
  text-transform: uppercase;
  font-family: "Anton", Impact, sans-serif;
  letter-spacing: .015em;
  filter: drop-shadow(0 9px 0 rgba(0,0,0,.25));
}

.hero h1 span,
.hero h1 strong {
  display: block;
}

.hero h1 span {
  font-size: clamp(4.3rem, 9vw, 9.4rem);
  color: #fff;
  transform: rotate(-1deg);
}

.hero h1 strong {
  width: fit-content;
  margin-top: 10px;
  padding: 2px 16px 10px 10px;
  color: var(--orange);
  font-size: clamp(3.25rem, 7vw, 7.4rem);
  font-style: italic;
  background: linear-gradient(90deg, rgba(255, 154, 0, .08), transparent);
  transform: skewX(-6deg);
}

.hero__intro {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 600;
}

.hero__emblem {
  position: relative;
  justify-self: center;
  width: min(30vw, 360px);
  aspect-ratio: 1;
  filter: drop-shadow(0 0 34px rgba(255, 121, 0, .8));
}

.emblem__circle,
.emblem__vertical,
.emblem__horizontal {
  position: absolute;
  display: block;
}

.emblem__circle {
  inset: 7%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 35%, #ffd97a 0 3%, #ff9f1c 18%, #ff5a00 48%, #b91c00 75%, #4c0711 100%);
  box-shadow:
    0 0 30px rgba(255, 115, 0, .9),
    inset 0 0 30px rgba(255,255,255,.3);
  overflow: hidden;
}

.emblem__circle::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image: radial-gradient(circle, #180010 0 1px, transparent 2px);
  background-size: 14px 14px;
}

.emblem__vertical {
  top: 7%;
  bottom: 7%;
  left: 49%;
  width: 10%;
  background: #240413;
  box-shadow: 0 0 14px rgba(0,0,0,.55);
}

.emblem__horizontal {
  left: 7%;
  right: 7%;
  top: 49%;
  height: 10%;
  background: #240413;
  box-shadow: 0 0 14px rgba(0,0,0,.55);
}

.content {
  display: grid;
  grid-template-columns: minmax(570px, 1fr) minmax(360px, .78fr);
  gap: 26px;
  align-items: stretch;
}

.schedule {
  display: grid;
  gap: 14px;
}

.event-link,
.event-link:link,
.event-link:visited,
.event-link:hover,
.event-link:active,
.event-link:focus {
    display: block;
    color: inherit;
    text-decoration: none;
    outline: none;
}

.event-link * {
    color: inherit;
    text-decoration: none;
}

.event-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 122px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(177, 40, 255, .85);
  background:
    linear-gradient(90deg, rgba(0,0,0,.96), rgba(15, 7, 24, .95)),
    linear-gradient(120deg, transparent, rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  clip-path: polygon(2.3% 0, 100% 0, 97.7% 100%, 0 100%);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.event-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: -24%;
  width: 38%;
  height: 100%;
  transform: skewX(-20deg);
  opacity: .16;
  background: linear-gradient(90deg, transparent, var(--purple));
}

.event-card:hover {
  transform: translateY(-4px);
  border-color: var(--purple-soft);
  box-shadow: 0 22px 55px rgba(60, 0, 86, .46);
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-right: 1px solid rgba(198, 72, 255, .65);
  background:
    linear-gradient(135deg, rgba(116, 18, 173, .92), rgba(38, 5, 63, .98)),
    radial-gradient(circle at top, rgba(255,255,255,.15), transparent 42%);
  text-align: center;
  text-transform: uppercase;
}

.event-date__day {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(3.6rem, 5.6vw, 5.6rem);
  line-height: .84;
  letter-spacing: .02em;
}

.event-date__month {
  margin-top: 9px;
  font-size: clamp(.9rem, 1.4vw, 1.1rem);
  font-weight: 800;
  line-height: 1;
}

.event-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 34px;
  min-width: 0;
}

.event-card h3 {
  margin: 0 0 10px;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.event-card:first-child h3 {
  text-transform: none;
}

.location {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin: 0;
  color: #f3ebf6;
  font-size: clamp(1.02rem, 1.8vw, 1.35rem);
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.location strong {
  color: var(--purple-soft);
}

.pin {
  position: relative;
  width: 18px;
  height: 18px;
  margin-right: 2px;
  border-radius: 50% 50% 50% 0;
  background: var(--purple);
  transform: rotate(-45deg);
  flex: 0 0 auto;
}

.pin::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 6px;
  left: 6px;
  border-radius: 50%;
  background: #22062e;
}

.event-card--pending {
  border-color: rgba(255, 156, 0, .92);
}

.event-card--pending .event-date {
  border-right-color: rgba(255, 186, 35, .72);
  background: linear-gradient(135deg, #b16b00, #5f2c00 75%);
}

.event-card--pending h3,
.event-card--pending .location {
  color: var(--orange);
}

.event-card--pending .pin {
  background: var(--orange);
}

/*======================================================
    TORNEOS HIST脫RICOS
======================================================*/

.event-card--historic {
    cursor: pointer;

    border-color: rgba(120,120,120,.85);

    background:
        linear-gradient(
            90deg,
            rgba(24,24,24,.96),
            rgba(45,45,45,.94)
        );

    filter: grayscale(.70) brightness(.78);

    transition:
        transform .25s ease,
        filter .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.event-card--historic .event-date{
    background:
        linear-gradient(
            135deg,
            #555,
            #2e2e2e
        );

    border-right-color:#666;
}

.event-card--historic .location strong{
    color:#c8c8c8;
}

.event-card--historic:hover{

    filter: grayscale(.25) brightness(.96);

    border-color:#8b8b8b;

    box-shadow:
        0 22px 55px rgba(0,0,0,.55);

}

/*======================================================
    OVERLAY TORNEO HIST脫RICO
======================================================*/

.event-card--historic{
    position:relative;
}

.event-card--historic::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.82);

    opacity:0;

    transition:opacity .25s ease;

    z-index:15;

}

.event-card--historic::after{

    content:"Acerca del torneo";

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    font-family:"Anton",sans-serif;

    font-size:2.35rem;

    letter-spacing:.05em;

    text-transform:uppercase;

    color:#f8f8f8;
    
    text-shadow:
    0 2px 4px rgba(0,0,0,.75),
    0 0 18px rgba(255,255,255,.18);

    opacity:0;

    transition:opacity .25s ease;

    z-index:20;

    pointer-events:none;

}

.event-card--historic:hover::before,
.event-card--historic:hover::after{

    opacity:1;

}

/* M贸viles */

.event-card--historic:active::before,
.event-card--historic:active::after{

    opacity:1;

}

.visual-panel {
  min-height: 100%;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(148, 24, 232, .45);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 138, 0, .55), transparent 22%),
    linear-gradient(180deg, #22051f 0%, #240724 38%, #17041e 67%, #07010c 100%);
  clip-path: polygon(4% 0, 100% 0, 100% 96%, 0 100%, 0 4%);
  box-shadow: var(--shadow);
}

.world {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.world::before,
.world::after {
  content: "";
  position: absolute;
  inset: auto -15% 0;
  height: 47%;
  background:
    radial-gradient(ellipse at 50% 85%, #2c073f 0 9%, transparent 10%),
    linear-gradient(160deg, transparent 0 28%, #321040 29% 45%, transparent 46%),
    linear-gradient(200deg, transparent 0 25%, #1c082a 26% 44%, transparent 45%);
  opacity: .92;
}

.world__sun {
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  right: -1%;
  top: 4%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 45% 45%, rgba(255,255,255,.13) 0 2px, transparent 3px 11px),
    radial-gradient(circle, #ffd36d 0, #ff8c00 28%, #f24300 62%, rgba(158, 17, 34, .05) 71%);
  filter: drop-shadow(0 0 28px rgba(255, 106, 0, .65));
  opacity: .9;
}

.world__island {
  position: absolute;
  width: 150px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(180deg, #2d1d37, #100713);
  filter: drop-shadow(0 15px 6px rgba(0,0,0,.5));
}

.world__island::after {
  content: "";
  position: absolute;
  top: 36px;
  left: 18px;
  width: 116px;
  height: 90px;
  background: linear-gradient(150deg, #1b0a25, #08030c);
  clip-path: polygon(0 0, 100% 0, 70% 100%, 34% 78%);
}

.world__island--one {
  top: 41%;
  left: 13%;
  transform: scale(.75);
}

.world__island--two {
  top: 32%;
  right: 4%;
  transform: scale(.56);
}

.world__island--three {
  top: 50%;
  right: 25%;
  transform: scale(.45);
}

.arena {
  position: absolute;
  width: 88%;
  aspect-ratio: 1.8;
  left: 6%;
  bottom: 10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 47%, #4d2c3a 0 8%, #302033 9% 20%, #614132 21% 32%, #241426 33% 40%, #0f0712 41%),
    repeating-conic-gradient(from 0deg, rgba(253, 159, 44, .5) 0 2deg, transparent 2deg 12deg);
  border: 12px solid #1b0c20;
  box-shadow:
    0 18px 0 #08030b,
    0 35px 38px rgba(0,0,0,.7),
    inset 0 0 30px rgba(255, 128, 0, .32);
  transform: perspective(800px) rotateX(54deg);
}

.arena::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 3px solid rgba(192, 64, 255, .4);
  border-radius: 50%;
}

.arena__ring {
  position: absolute;
  inset: 33%;
  border: 4px solid #d766ff;
  border-radius: 50%;
  box-shadow: 0 0 18px #a020f0;
}

.arena__core {
  position: absolute;
  width: 34px;
  height: 34px;
  left: calc(50% - 17px);
  top: calc(50% - 17px);
  border-radius: 50%;
  background: #ffae00;
  box-shadow: 0 0 24px #ff8d00, 0 0 42px #b329ff;
}

.notice {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 28px;
  padding: 20px 24px;
  border: 1px solid rgba(177, 40, 255, .8);
  background: rgba(5, 3, 9, .88);
  box-shadow: var(--shadow);
  clip-path: polygon(1.2% 0, 100% 0, 98.8% 100%, 0 100%);
}

.notice__icon {
  position: relative;
  width: 58px;
  height: 54px;
  border: 5px solid var(--purple);
  border-radius: 7px;
}

.notice__icon::before,
.notice__icon::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 7px;
  height: 18px;
  border-radius: 4px;
  background: var(--purple);
}

.notice__icon::before { left: 10px; }
.notice__icon::after { right: 10px; }

.notice__icon span {
  position: absolute;
  width: 9px;
  height: 9px;
  bottom: 9px;
  background: var(--purple);
}

.notice__icon span:first-child { left: 10px; }
.notice__icon span:last-child { right: 10px; }

.notice h2 {
  margin: 0;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(1.45rem, 2.4vw, 2.2rem);
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.notice p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1050px) {
  .hero {
    grid-template-columns: 1fr .6fr;
  }

  .content {
    grid-template-columns: 1fr;
  }

  .visual-panel {
    min-height: 520px;
    order: -1;
  }

  .world__sun {
    width: 44%;
  }

  .arena {
    width: 62%;
    left: 19%;
    bottom: 4%;
  }
}

@media (max-width: 720px) {
  .page-shell {
    padding: 18px 14px 26px;
  }

  .hero {
    min-height: 300px;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .hero__emblem {
    position: absolute;
    right: 0px;
    bottom: -16px;
    width: 180px;
    opacity: .55;
    z-index: 0;
  }

  .hero__eyebrow {
    margin-top: 8px;
    font-size: .78rem;
    padding-left: 56px;
  }

  .hero__eyebrow::before,
  .hero__eyebrow::after {
    width: 38px;
    height: 4px;
  }

  .hero h1 span {
    font-size: clamp(3.7rem, 19vw, 6rem);
  }

  .hero h1 strong {
    font-size: clamp(2.75rem, 14vw, 4.7rem);
  }

  .hero__intro {
    max-width: 70%;
  }

  .visual-panel {
    min-height: 330px;
  }

  .world__sun {
    width: 55%;
    right: 1%;
  }

  .world__island--one {
    left: 4%;
    top: 48%;
  }

  .arena {
    width: 78%;
    left: 11%;
    bottom: -5%;
  }

  .event-card {
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 106px;
    clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
  }

  .event-date {
    padding: 12px 8px;
  }

  .event-date__day {
    font-size: 3.2rem;
  }

  .event-date__month {
    font-size: .76rem;
  }

  .event-card__body {
    padding: 16px 18px;
  }

  .event-card h3 {
    font-size: clamp(1.65rem, 8vw, 2.5rem);
  }

  .location {
    font-size: .9rem;
    gap: 5px;
  }

  .pin {
    width: 15px;
    height: 15px;
  }

  .pin::after {
    width: 5px;
    height: 5px;
    left: 5px;
    top: 5px;
  }

  .notice {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }

  .notice__icon {
    width: 44px;
    height: 42px;
    border-width: 4px;
  }

  .notice h2 {
    font-size: 1.35rem;
  }

  .notice p {
    font-size: .92rem;
  }
  
    .ambient--two {
        background: #7f00ff;
    }
    
    .ambient--one {
        background: #ff6200;
    }
}

@media (max-width: 390px) {
  .event-card {
    grid-template-columns: 94px minmax(0, 1fr);
  }

  .event-date__day {
    font-size: 2.75rem;
  }

  .event-date__month {
    font-size: .66rem;
  }

  .event-card__body {
    padding-inline: 13px;
  }

  .event-card h3 {
    font-size: 1.55rem;
  }

  .location {
    font-size: .78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}


.visual-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.character-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
.world,.arena,.world__sun,.world__island{display:none!important;}

/*======================================================
    PÁGINA PRÓXIMAMENTE
======================================================*/

.coming-page{

display:flex;

justify-content:center;

align-items:center;

padding:40px 0 60px;

}

.coming-card{

max-width:760px;

width:100%;

padding:60px;

text-align:center;

background:linear-gradient(180deg,rgba(8,7,14,.96),rgba(22,10,30,.96));

border:1px solid rgba(156,34,255,.45);

box-shadow:var(--shadow);

clip-path:polygon(2% 0,100% 0,98% 100%,0 100%);

}

.coming-icon{

font-size:4rem;

margin-bottom:25px;

}

.coming-card h2{

font-family:"Anton";

font-size:3rem;

font-weight:400;

letter-spacing:.04em;

margin:0 0 20px;

text-transform:uppercase;

}

.coming-card p{

font-size:1.35rem;

color:var(--muted);

margin:18px 0;

}

.coming-card ul{

list-style:none;

padding:0;

margin:35px 0;

}

.coming-card li{

margin:12px 0;

font-size:1.25rem;

font-weight:700;

}

.coming-note{

font-size:1.5rem!important;

color:var(--orange)!important;

font-weight:700;

margin-top:30px;

}

.coming-button{

display:inline-block;

margin-top:35px;

padding:16px 34px;

border:1px solid var(--purple);

background:rgba(156,34,255,.15);

color:#fff;

text-decoration:none;

font-weight:700;

font-size:1.15rem;

transition:.25s;

}

.coming-button:hover{

background:var(--purple);

transform:translateY(-3px);

}

@media(max-width:720px){

.coming-card{

padding:35px 24px;

}

.coming-card h2{

font-size:2.2rem;

}

.coming-card p{

font-size:1.1rem;

}

.coming-card li{

font-size:1rem;

}

}

/*======================================================================
    PÁGINAS DE TORNEOS
======================================================================*/

:root{

    --tournament-bg:#08111F;
    --tournament-card:#111B2D;
    --tournament-card-hover:#17233B;

    --tournament-primary:#1E88E5;
    --tournament-primary-dark:#1565C0;

    --tournament-accent:#FFC107;
    --tournament-success:#43A047;
    --tournament-danger:#E53935;

    --tournament-text:#F5F7FA;
    --tournament-text-soft:#C5CFDD;

    --tournament-border:rgba(255,255,255,.08);

    --tournament-shadow:
        0 10px 30px rgba(0,0,0,.35);

    --tournament-radius:18px;

    --tournament-max-width:1280px;

}



/*======================================================================
    BASE
======================================================================*/

.tournament-page{

    width:min(100%,1320px);

    margin:auto;

    padding:60px 28px 90px;

    position:relative;

    z-index:2;

}



.tournament-section{

    margin-top:80px;

}



.tournament-section:first-child{

    margin-top:40px;

}



/*======================================================================
    TITULOS
======================================================================*/

.section-title{

    width:100%;

    max-width:1320px;

    margin:0 auto 55px;

    text-align:center;

}



.section-title span{

    display:inline-block;

    padding:7px 18px;

    border-radius:999px;

    background:rgba(30,136,229,.15);

    color:#7CC2FF;

    font-size:.90rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}



.section-title h2{

    margin-top:18px;

    margin-bottom:15px;

    font-size:clamp(2rem,4vw,3rem);

    line-height:1.15;

    color:#FFF;

}



.section-title p{

    color:var(--tournament-text-soft);

    line-height:1.8;

    font-size:1.05rem;

}



/*======================================================================
    HERO
======================================================================*/

.tournament-hero{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    min-height:520px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:70px 40px;

    background:
        linear-gradient(
            rgba(5,12,24,.70),
            rgba(5,12,24,.88)
        ),
        url("torneos/20260726_smashnsecret/banner.jpg");

    background-size:cover;

    background-position:center;

    box-shadow:var(--tournament-shadow);

}



/* brillo */

.tournament-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top right,

            rgba(30,136,229,.25),

            transparent 45%);

    pointer-events:none;

}



/* efecto inferior */

.tournament-hero::after{

    content:"";

    position:absolute;

    bottom:-120px;

    left:50%;

    width:900px;

    height:240px;

    transform:translateX(-50%);

    background:radial-gradient(

        ellipse,

        rgba(255,255,255,.12),

        transparent 70%

    );

    filter:blur(30px);

}



.hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

}



.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 20px;

    border-radius:999px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.15);

    font-weight:600;

}



.hero-title{

    margin-top:25px;

    margin-bottom:20px;

    font-size:clamp(3rem,8vw,5rem);

    font-weight:900;

    line-height:1;

    letter-spacing:-2px;

    color:white;

}



.hero-description{

    max-width:760px;

    margin:auto;

    font-size:1.18rem;

    color:#E4ECF8;

    line-height:1.8;

}



/*======================================================================
    BOTONES
======================================================================*/

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-top:45px;

}



.coming-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:220px;

    padding:15px 28px;

    border-radius:999px;

    font-weight:700;

    text-decoration:none;

    transition:.30s;

}



.coming-button-primary{

    background:var(--tournament-primary);

    color:white;

}



.coming-button-primary:hover{

    background:var(--tournament-primary-dark);

    transform:translateY(-3px);

}



.coming-button-secondary{

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.18);

    color:white;

    backdrop-filter:blur(10px);

}



.coming-button-secondary:hover{

    background:rgba(255,255,255,.16);

    transform:translateY(-3px);

}



/*======================================================================
    TARJETAS GENERALES
======================================================================*/

.card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:

        linear-gradient(

            180deg,

            rgba(21,30,49,.78),

            rgba(10,16,27,.65)

        );

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.06);

    box-shadow:

        0 18px 45px rgba(0,0,0,.22),

        inset 0 1px rgba(255,255,255,.04);

    transition:

        transform .35s,

        box-shadow .35s,

        border-color .35s;

}



.card:hover{

    transform:translateY(-6px);

    border-color:rgba(70,170,255,.22);

    box-shadow:

        0 30px 70px rgba(0,0,0,.32),

        0 0 25px rgba(37,140,255,.08);

}



/*======================================================================
    ANIMACIONES
======================================================================*/

.tournament-section{

    animation:fadeUp .6s ease;

}



@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:none;

    }

}



/*======================================================================
    TABLET
======================================================================*/

@media (max-width:992px){

    .tournament-page{

        padding:30px 20px 70px;

    }

    .tournament-hero{

        min-height:470px;

        padding:60px 30px;

    }

}



/*======================================================================
    MOVIL
======================================================================*/

@media (max-width:768px){

    .tournament-page{

        padding:20px 15px 60px;

    }

    .tournament-section{

        margin-top:55px;

    }

    .section-title{

        margin-bottom:35px;

    }

    .hero-title{

        font-size:2.8rem;

        letter-spacing:-1px;

    }

    .hero-description{

        font-size:1rem;

        line-height:1.7;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .coming-button{

        width:100%;

        min-width:unset;

    }

    .tournament-hero{

        min-height:430px;

        border-radius:20px;

        padding:45px 20px;

        background-position:center center;

    }

}

/*======================================================================
    INFORMACIÓN DEL TORNEO
======================================================================*/

.info-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;

    margin-bottom:45px;

}



.info-card{

    background:var(--tournament-card);

    border:1px solid var(--tournament-border);

    border-radius:var(--tournament-radius);

    padding:28px 24px;

    text-align:center;

    transition:.30s;

    box-shadow:var(--tournament-shadow);

}



.info-card:hover{

    transform:translateY(-6px);

    background:var(--tournament-card-hover);

}



.info-card i{

    font-size:2.2rem;

    color:var(--tournament-primary);

    margin-bottom:18px;

}



.info-card h3{

    font-size:1rem;

    margin-bottom:10px;

    color:#9DB8D8;

    font-weight:600;

}



.info-card p{

    color:white;

    font-size:1.08rem;

    font-weight:700;

    line-height:1.5;

}



/*======================================================================
    DESCRIPCIÓN
======================================================================*/

.tournament-description{

    max-width:1000px;

    margin:auto;

    background:var(--tournament-card);

    border-radius:var(--tournament-radius);

    border:1px solid var(--tournament-border);

    padding:40px;

    box-shadow:var(--tournament-shadow);

}



.tournament-description p{

    color:var(--tournament-text-soft);

    line-height:2;

    margin-bottom:20px;

    text-align:justify;

}



.tournament-description p:last-child{

    margin-bottom:0;

}



.feature{

    display:flex;

    align-items:center;

    gap:18px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.05);

    border-radius:14px;

    padding:15px 18px;

}



.feature span{

    font-size:1.5rem;

    width:42px;

    text-align:center;

}



.feature p{

    margin:0;

    line-height:1.4;

    color:white;

}


/*======================================================================
    EFECTO SOBRE TARJETAS
======================================================================*/

.info-card,
.tournament-description{

    position:relative;

    overflow:hidden;

}



.info-card::before,
.tournament-description::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:3px;

    background:linear-gradient(
        90deg,
        var(--tournament-primary),
        #5EB8FF
    );

}



/*======================================================================
    TABLET
======================================================================*/

@media (max-width:1100px){

    .info-grid{

        grid-template-columns:repeat(2,1fr);

    }

}



/*======================================================================
    MÓVIL
======================================================================*/

@media (max-width:768px){

    .info-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .info-card{

        padding:24px 20px;

    }

    .tournament-description{

        padding:25px;

    }

    .tournament-description p{

        text-align:left;

        line-height:1.8;

    }

    .feature{

        align-items:flex-start;

    }

}

/*======================================================================
    CAMPEÓN
======================================================================*/

.champion-card{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:40px;

    align-items:center;

    background:linear-gradient(
        135deg,
        #182742,
        #0E1728
    );

    border-radius:24px;

    padding:35px;

    overflow:hidden;

    position:relative;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 20px 45px rgba(0,0,0,.35);

}



.champion-card::before{

    content:"CAMPEÓN";

    position:absolute;

    right:-30px;

    top:40px;

    font-size:7rem;

    font-weight:900;

    color:rgba(255,255,255,.03);

    transform:rotate(-12deg);

    pointer-events:none;

}



.champion-image{

    position:relative;

}



.champion-image img{

    width:100%;

    display:block;

    border-radius:18px;

    border:4px solid rgba(255,193,7,.45);

    box-shadow:
        0 0 35px rgba(255,193,7,.20),
        0 20px 40px rgba(0,0,0,.35);

}



.champion-info h3{

    font-size:2.6rem;

    margin:18px 0;

    color:#FFF;

}



.champion-info p{

    color:var(--tournament-text-soft);

    line-height:1.9;

}



.champion-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    background:#FFC107;

    color:#222;

    font-weight:700;

    border-radius:999px;

}



.champion-character{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:30px;

}



.champion-character img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

    background:#1C2942;

    padding:8px;

}


/*======================================================================
    PODIO
======================================================================*/

.podium-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    margin-top:40px;

}



.podium-card{

    background:var(--tournament-card);

    border-radius:20px;

    padding:30px;

    text-align:center;

    border:1px solid var(--tournament-border);

    transition:.30s;

}



.podium-card:hover{

    transform:translateY(-6px);

}



.podium-place{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 16px;

    border-radius:999px;

    font-weight:700;

}



.second .podium-place{

    background:#C0C0C0;

    color:#222;

}



.third .podium-place{

    background:#CD7F32;

    color:#FFF;

}



.podium-card img{

    width:85px;

    height:85px;

    object-fit:contain;

    margin:18px auto;

}



.podium-card h3{

    color:#FFF;

}



/*======================================================================
    RESPONSIVE
======================================================================*/

@media(max-width:1100px){

    .champion-card{

        grid-template-columns:1fr;

        text-align:center;

    }

    .champion-character{

        justify-content:center;

    }

    .players-grid{

        grid-template-columns:repeat(2,minmax(260px,1fr));

    }

}



@media(max-width:768px){

    .champion-card{

        padding:25px;

    }

    .champion-card::before{

        font-size:4rem;

        top:15px;

        right:-10px;

    }

    .champion-info h3{

        font-size:2rem;

    }

    .players-grid{

        grid-template-columns:minmax(0,1fr);

    }

    .top16-grid{

        grid-template-columns:1fr;

    }

    .podium-grid{

        grid-template-columns:1fr;

    }

    .player-card{

        padding:22px;

    }

}



/*======================================================================
    SCROLLBAR
======================================================================*/

::-webkit-scrollbar{

    width:11px;

}



::-webkit-scrollbar-track{

    background:#09111E;

}



::-webkit-scrollbar-thumb{

    background:#1E88E5;

    border-radius:999px;

}



::-webkit-scrollbar-thumb:hover{

    background:#42A5F5;

}



/*======================================================================
    SELECCIÓN
======================================================================*/

::selection{

    background:#1E88E5;

    color:white;

}



/*======================================================================
    ENLACES
======================================================================*/

a{

    transition:.30s;

}



img{

    user-select:none;

    -webkit-user-drag:none;

}


/*======================================================================
    DESKTOP GRANDE
======================================================================*/

@media(min-width:1600px){

    .tournament-page{

        max-width:1400px;

    }

}

/*=========================================================
    RESUMEN DEL TORNEO (V2)
=========================================================*/

.tournament-summary{

    max-width:980px;

    margin:0 auto 45px;

}

.summary-main{

    background:linear-gradient(
        180deg,
        rgba(17,27,45,.96),
        rgba(10,18,31,.96)
    );

    border:1px solid rgba(255,255,255,.08);

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 18px 45px rgba(0,0,0,.35);

}

.summary-date{

    padding:45px;

    text-align:center;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.summary-date .summary-label{

    display:block;

    color:#7CC2FF;

    text-transform:uppercase;

    letter-spacing:.12em;

    font-size:.85rem;

    margin-bottom:12px;

}

.summary-date strong{

    font-size:2rem;

    color:#FFF;

}

.summary-row{

    display:grid;

    grid-template-columns:1fr 1fr;

}

.summary-box{

    display:flex;

    gap:20px;

    align-items:center;

    padding:30px 40px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.summary-row .summary-box:first-child{

    border-right:1px solid rgba(255,255,255,.06);

}

.summary-box span{

    font-size:2rem;

}

.summary-box small{

    display:block;

    color:#87B9E7;

    margin-bottom:6px;

}

.summary-box strong{

    color:#FFF;

    font-size:1.2rem;

}

.summary-footer{

    display:grid;

    grid-template-columns:1fr 1fr;

}

.summary-footer>div{

    padding:28px 40px;

}

.summary-footer>div:first-child{

    border-right:1px solid rgba(255,255,255,.06);

}

.summary-footer small{

    display:block;

    color:#87B9E7;

    margin-bottom:8px;

}

.summary-footer strong{

    color:#FFF;

}

@media(max-width:768px){

.summary-row,
.summary-footer{

    grid-template-columns:1fr;

}

.summary-row .summary-box:first-child,
.summary-footer>div:first-child{

    border-right:none;

}

.summary-box{

    padding:22px;

}

.summary-date{

    padding:30px 20px;

}

.summary-date strong{

    font-size:1.5rem;

}

}

/*=========================================================
    DISEÑO GLOBAL V2
=========================================================*/

.info-card,

.tournament-description,

.champion-card,

.player-card,

.top16-player,

.podium-card,

.summary-main{

    background:

        linear-gradient(

            180deg,

            rgba(18,27,44,.78),

            rgba(10,16,27,.64)

        ) !important;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.05);

    box-shadow:

        0 20px 55px rgba(0,0,0,.24),

        inset 0 1px rgba(255,255,255,.03);

}

.info-card:hover,

.player-card:hover,

.top16-player:hover,

.podium-card:hover,

.summary-main:hover{

    border-color:rgba(72,165,255,.18);

}

.tournament-summary,

.tournament-description,

.champion-card,

.players-grid,

.top16-grid,

.gallery-masonry{

    width:100%;

    max-width:1320px;

    margin-left:auto;

    margin-right:auto;

}

/*=========================================================
    ABOUT EVENT V2
=========================================================*/

.about-event{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:40px;

    align-items:center;

    width:100%;

    max-width:1320px;

    margin:45px auto 0;

}

.about-image{

    overflow:hidden;

    border-radius:22px;

    border:1px solid rgba(255,255,255,.06);

}

.about-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:.5s;

}

.about-image:hover img{

    transform:scale(1.05);

}

.about-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(44,144,255,.12);

    color:#6EB8FF;

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:.10em;

    margin-bottom:18px;

}

.about-content h3{

    font-size:2.4rem;

    margin-bottom:24px;

    color:#FFF;

}

.about-content p{

    font-size:1.08rem;

    line-height:2;

    color:#D6DFEA;

    margin-bottom:22px;

}

.about-stats{

    display:flex;

    gap:35px;

    margin-top:35px;

}

.about-stats div{

    text-align:center;

}

.about-stats strong{

    display:block;

    font-size:2rem;

    color:#3EA6FF;

}

.about-stats span{

    color:#B8C5D8;

}

@media(max-width:900px){

    .about-event{

        grid-template-columns:1fr;

    }

    .about-content{

        text-align:center;

    }

    .about-stats{

        justify-content:center;

        flex-wrap:wrap;

    }

}

.feature{

    display:flex;

    align-items:center;

    gap:18px;

    background:rgba(255,255,255,.035);

    border:1px solid rgba(255,255,255,.05);

    border-radius:16px;

    padding:16px 18px;

    transition:.25s;

}

.feature:hover{

    transform:translateX(8px);

    border-color:rgba(64,167,255,.35);

    background:rgba(64,167,255,.08);

}

.feature span{

    font-size:1.5rem;

    width:34px;

    text-align:center;

}

/*======================================================================
    SEDE DEL TORNEO
======================================================================*/

.location-section{

    width:100%;
    max-width:1320px;

    margin:120px auto 0;
    padding-top:20px;

    position:relative;

}


/* Separador visual respecto a la sección anterior */

.location-section::before{

    content:"";

    display:block;

    width:min(100%,720px);
    height:1px;

    margin:0 auto 75px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(71,164,255,.55),
        rgba(156,34,255,.35),
        transparent
    );

}


/*======================================================================
    ENCABEZADO
======================================================================*/

.location-section-heading{

    max-width:820px;

    margin:0 auto 60px;

    text-align:center;

}


.location-section-heading .section-tag{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:8px 20px;

    border-radius:999px;

    background:rgba(35,128,225,.13);

    border:1px solid rgba(75,171,255,.12);

    color:#78BEFF;

    font-size:.86rem;
    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

}


.location-section-heading h2{

    margin:22px 0 16px;

    color:#FFF;

    font-family:"Anton",Impact,sans-serif;

    font-size:clamp(2.7rem,5vw,4.6rem);
    font-weight:400;

    line-height:1.05;

    letter-spacing:.015em;

}


.location-section-heading p{

    margin:0;

    color:#CFD8E6;

    font-size:clamp(1.05rem,1.7vw,1.28rem);

    line-height:1.75;

}


/*======================================================================
    DISTRIBUCIÓN
======================================================================*/

.location-grid{

    display:grid;

    grid-template-columns:minmax(340px,.72fr) minmax(0,1.28fr);

    gap:38px;

    align-items:stretch;

    width:100%;

}


/*======================================================================
    INFORMACIÓN
======================================================================*/

.location-info{

    display:flex;

    flex-direction:column;

    padding:42px;

    position:relative;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.065);

    border-radius:24px;

    background:
        radial-gradient(
            circle at 12% 5%,
            rgba(49,143,255,.10),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(20,27,45,.83),
            rgba(8,12,23,.72)
        );

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    box-shadow:
        0 25px 65px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.035);

}


/* Línea luminosa superior */

.location-info::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:linear-gradient(
        90deg,
        #258EFF,
        #75C5FF 48%,
        rgba(156,34,255,.55) 75%,
        transparent
    );

}


.location-info-header{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:32px;

}


.location-pin{

    display:flex;

    align-items:center;
    justify-content:center;

    width:58px;
    height:58px;

    flex:0 0 58px;

    border-radius:18px;

    background:rgba(255,255,255,.045);

    border:1px solid rgba(255,255,255,.06);

    font-size:1.8rem;

    box-shadow:inset 0 1px rgba(255,255,255,.035);

}


.location-city{

    display:block;

    margin-bottom:4px;

    color:#72B9F8;

    font-size:.84rem;
    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}


.location-info h3{

    margin:0;

    color:#FFF;

    font-family:"Anton",Impact,sans-serif;

    font-size:clamp(2.6rem,4vw,4rem);
    font-weight:400;

    line-height:1;

}


.location-description{

    margin:0 0 24px;

    color:#D3DCE9;

    font-size:1.06rem;

    line-height:1.9;

}


.location-description strong{

    color:#FFF;

}


/*======================================================================
    ESTADÍSTICAS
======================================================================*/

.location-stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:16px;

    margin:14px 0 38px;

}


.location-stat{

    min-width:0;

    padding:17px 10px;

    border-top:1px solid rgba(255,255,255,.07);
    border-bottom:1px solid rgba(255,255,255,.04);

    text-align:center;

}


.location-stat strong{

    display:block;

    color:#3EA4FF;

    font-family:"Anton",Impact,sans-serif;

    font-size:2.3rem;
    font-weight:400;

    line-height:1;

}


.location-stat span{

    display:block;

    margin-top:9px;

    color:#AFC0D5;

    font-size:.92rem;

}


/*======================================================================
    BOTÓN
======================================================================*/

.btn-location{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:12px;

    width:100%;

    margin-top:auto;

    padding:16px 24px;

    border:1px solid rgba(83,177,255,.32);

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #278DF4,
        #176BD2
    );

    color:#FFF;

    font-size:1.02rem;
    font-weight:700;

    text-decoration:none;

    box-shadow:
        0 12px 30px rgba(25,112,220,.20),
        inset 0 1px rgba(255,255,255,.15);

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

}


.btn-location:hover{

    transform:translateY(-3px);

    filter:brightness(1.08);

    box-shadow:
        0 18px 40px rgba(25,112,220,.34),
        inset 0 1px rgba(255,255,255,.18);

}


/*======================================================================
    MAPA
======================================================================*/

.location-map{

    min-width:0;
    min-height:640px;

    position:relative;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.07);

    border-radius:24px;

    background:rgba(9,13,22,.76);

    box-shadow:
        0 25px 65px rgba(0,0,0,.30),
        0 0 30px rgba(39,142,244,.04);

}


.location-map::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

    border-radius:inherit;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        inset 0 -50px 90px rgba(4,7,13,.10);

}


.location-map iframe{

    display:block;

    width:100%;
    height:100%;
    min-height:640px;

    border:0;

}


/*======================================================================
    TABLET
======================================================================*/

@media(max-width:1050px){

    .location-section{

        margin-top:95px;

    }

    .location-grid{

        grid-template-columns:1fr;

    }

    .location-info{

        min-height:auto;

    }

    .location-map,
    .location-map iframe{

        min-height:500px;

    }

}


/*======================================================================
    MÓVIL
======================================================================*/

@media(max-width:768px){

    .location-section{

        margin-top:75px;

    }

    .location-section::before{

        margin-bottom:55px;

    }

    .location-section-heading{

        margin-bottom:38px;

        padding:0 4px;

    }

    .location-section-heading h2{

        margin-top:18px;

    }

    .location-grid{

        gap:24px;

    }

    .location-info{

        padding:28px 22px;

        border-radius:19px;

    }

    .location-info-header{

        align-items:flex-start;

        margin-bottom:26px;

    }

    .location-pin{

        width:50px;
        height:50px;

        flex-basis:50px;

        border-radius:15px;

        font-size:1.55rem;

    }

    .location-info h3{

        font-size:2.7rem;

    }

    .location-description{

        font-size:1rem;

        line-height:1.8;

    }

    .location-stats{

        gap:7px;

        margin-bottom:30px;

    }

    .location-stat{

        padding:15px 4px;

    }

    .location-stat strong{

        font-size:1.9rem;

    }

    .location-stat span{

        font-size:.78rem;

    }

    .btn-location{

        padding:15px 17px;

        font-size:.96rem;

    }

    .location-map,
    .location-map iframe{

        min-height:400px;

        border-radius:19px;

    }

}


/*======================================================================
    MÓVILES PEQUEÑOS
======================================================================*/

@media(max-width:420px){

    .location-stats{

        grid-template-columns:repeat(3,minmax(0,1fr));

    }

    .location-stat strong{

        font-size:1.65rem;

    }

    .location-stat span{

        font-size:.72rem;

    }

}

/*======================================================================
    TOP 3
======================================================================*/

.champion-card{

    position:relative;

    display:grid;

    grid-template-columns:430px minmax(0,1fr);

    gap:42px;

    align-items:center;

    overflow:hidden;

    padding:34px;

    border-radius:28px;

    border:1px solid rgba(255,255,255,.08);

    background:
        linear-gradient(
            135deg,
            rgba(23,34,58,.98),
            rgba(10,17,29,.98)
        );

    box-shadow:
        0 24px 60px rgba(0,0,0,.45);

}



.champion-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,
            rgba(255,193,7,.16),
            transparent 45%);

    pointer-events:none;

}



.champion-image{

    position:relative;

}



.champion-image img{

    width:100%;

    display:block;

    border-radius:22px;

    border:3px solid rgba(255,193,7,.45);

    transition:.45s;

    box-shadow:

        0 0 45px rgba(255,193,7,.18),

        0 25px 45px rgba(0,0,0,.40);

}



.champion-card:hover .champion-image img{

    transform:scale(1.02);

}



.champion-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            #FFD54F,
            #FFC107
        );

    color:#262626;

    font-weight:800;

}



.champion-info h3{

    margin:22px 0 10px;

    font-size:clamp(2.4rem,5vw,3.2rem);

    color:#FFF;

}



.champion-team{

    margin:0 0 22px;

    color:#7CC2FF !important;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}



.champion-info>p{

    line-height:1.9;

    color:var(--tournament-text-soft);

}



.champion-stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    margin-top:34px;

}



.champion-stats div{

    padding:20px;

    border-radius:16px;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.02)
        );

    border:1px solid rgba(255,255,255,.06);

    text-align:center;

}



.champion-stats span{

    display:block;

    color:#9FB6D5;

    font-size:.88rem;

    text-transform:uppercase;

    letter-spacing:.08em;

}



.champion-stats strong{

    display:block;

    margin-top:8px;

    font-size:2rem;

    color:white;

}



.character-icons{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:25px;

}



.character-icons.large{

    justify-content:flex-start;

}



.character-icons img{

    width:56px;

    height:56px;

    object-fit:contain;

    transition:.30s;

    filter:drop-shadow(0 0 10px rgba(30,136,229,.20));

}



.character-icons.large img{

    width:78px;

    height:78px;

}



.champion-card:hover .character-icons img,

.podium-card:hover .character-icons img{

    transform:scale(1.10);

    filter:

        drop-shadow(0 0 12px rgba(90,180,255,.55));

}



.podium-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

    margin-top:38px;

}



.podium-card{

    position:relative;

    overflow:hidden;

    padding:30px;

    border-radius:22px;

    background:

        linear-gradient(
            180deg,
            rgba(18,28,45,.96),
            rgba(10,17,29,.96)
        );

    border:1px solid rgba(255,255,255,.06);

    text-align:center;

    transition:.35s;

}



.podium-card:hover{

    transform:translateY(-7px);

}



.podium-card::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:3px;

}



.second::before{

    background:linear-gradient(90deg,#ECECEC,#AFAFAF);

}



.third::before{

    background:linear-gradient(90deg,#E69B4E,#A95518);

}



.podium-place{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:9px 18px;

    border-radius:999px;

    font-weight:700;

}



.second .podium-place{

    background:#C8CDD4;

    color:#1F1F1F;

}



.third .podium-place{

    background:#B96A28;

    color:white;

}



.podium-card h3{

    margin:22px 0 18px;

    color:white;

    font-size:1.55rem;

}



.podium-record{

    display:flex;

    justify-content:center;

    gap:16px;

    margin-top:24px;

    font-weight:700;

}



.podium-record span{

    color:#C7D6E8;

}



.podium-record strong{

    color:#FFD54F;

}

@media(max-width:992px){

    .champion-card{

        grid-template-columns:1fr;

        text-align:center;

    }

    .character-icons.large{

        justify-content:center;

    }

}

@media(max-width:768px){

    .champion-card{

        padding:22px;

        gap:28px;

    }

    .champion-stats{

        grid-template-columns:1fr;

    }

    .podium-grid{

        grid-template-columns:1fr;

    }

    .character-icons img{

        width:48px;
        height:48px;

    }

    .character-icons.large img{

        width:68px;
        height:68px;

    }

}

/*======================================================================
    TOP 8
======================================================================*/

.players-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

}



.player-card{

    position:relative;

    overflow:hidden;

    padding:28px;

    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            rgba(19,29,46,.96),
            rgba(10,17,29,.96)
        );

    border:1px solid rgba(255,255,255,.06);

    box-shadow:

        0 15px 40px rgba(0,0,0,.35);

    text-align:center;

    transition:

        transform .30s,

        border-color .30s,

        box-shadow .30s;

}



.player-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top,

            rgba(30,136,229,.10),

            transparent 55%

        );

    opacity:0;

    transition:.35s;

}



.player-card:hover{

    transform:translateY(-8px);

    border-color:rgba(80,180,255,.22);

    box-shadow:

        0 28px 60px rgba(0,0,0,.42),

        0 0 18px rgba(40,140,255,.12);

}



.player-card:hover::before{

    opacity:1;

}



.player-position{

    position:absolute;

    top:18px;

    right:18px;

    font-size:2.4rem;

    font-weight:900;

    color:rgba(255,255,255,.06);

}



.player-card h3{

    margin:18px 0;

    color:#FFF;

    font-size:1.45rem;

}



.player-record{

    display:flex;

    justify-content:center;

    gap:14px;

    margin-top:18px;

    font-weight:700;

}



.player-record span{

    color:#C8D8EA;

}



.player-record strong{

    color:#FFD54F;

}



/*=============================
    BARRA
=============================*/

.player-rate{

    position:relative;

    height:10px;

    margin-top:24px;

    overflow:hidden;

    border-radius:999px;

    background:

        rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.04);

}



.rate-fill{

    position:relative;

    width:0;

    height:100%;

    border-radius:999px;

    background:

        linear-gradient(

            90deg,

            #1565C0,

            #42A5F5,

            #81D4FA

        );

    box-shadow:

        0 0 12px rgba(66,165,245,.45);

    transition:

        width .9s cubic-bezier(.25,.8,.25,1),

        filter .30s;

}



.rate-fill::after{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    left:-40%;

    width:34%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.65),

            transparent

        );

    animation:none;

}



.player-card:hover .rate-fill{

    filter:

        brightness(1.18);

}



.player-card:hover .rate-fill::after{

    animation:

        energySlide 1.2s linear infinite;

}



/*=============================
    ANIMACIÓN
=============================*/

@keyframes energySlide{

    from{

        left:-35%;

    }

    to{

        left:120%;

    }

}

/*==============================================================
    TOP 8 - MÓVIL
==============================================================*/
@media (max-width:768px){

    .players-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .player-card{

        padding:22px 20px;

        min-height:auto;

    }

    .player-position{

        top:14px;

        right:16px;

        font-size:2rem;

    }

    .player-card h3{

        margin:12px 0;

        padding-right:40px;

        font-size:1.35rem;

        line-height:1.3;

        word-break:break-word;

    }

    .player-card .character-icons{

        margin:16px 0;

        justify-content:center;

        gap:12px;

    }

    .player-card .character-icons img{

        width:48px;

        height:48px;

    }

    .player-record{

        margin-top:16px;

        justify-content:center;

        flex-wrap:wrap;

        gap:18px;

    }

    .player-record span,

    .player-record strong{

        font-size:1rem;

    }

    .player-rate{

        margin-top:18px;

    }

}

/*======================================================================
    TOP 16
======================================================================*/

.top16-list{

    display:grid;

    grid-template-columns:repeat(2,minmax(320px,1fr));

    gap:18px;

}



.top16-player{

    position:relative;

    display:flex;

    align-items:center;

    gap:20px;

    padding:18px 22px;

    border-radius:18px;

    overflow:hidden;

    background:

        linear-gradient(
            180deg,
            rgba(18,28,45,.90),
            rgba(10,17,29,.92)
        );

    border:1px solid rgba(255,255,255,.05);

    transition:

        transform .28s,

        border-color .28s,

        box-shadow .28s;

}



.top16-player::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(30,136,229,.06),
            transparent 45%
        );

    opacity:0;

    transition:.30s;

}



.top16-player:hover{

    transform:translateX(8px);

    border-color:rgba(80,180,255,.18);

    box-shadow:

        0 16px 35px rgba(0,0,0,.30);

}



.top16-player:hover::before{

    opacity:1;

}



/*=============================
    POSICIÓN
=============================*/

.top16-pos{

    width:60px;

    height:60px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

        linear-gradient(
            180deg,
            #1976D2,
            #1256A3
        );

    color:white;

    font-weight:800;

    font-size:1.15rem;

    box-shadow:

        0 0 16px rgba(30,136,229,.25);

}



/*=============================
    INFO
=============================*/

.top16-info{

    flex:1;

    min-width:0;

}



.top16-info h3{

    margin:0 0 10px;

    color:white;

    font-size:1.18rem;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}



/*=============================
    ICONOS
=============================*/

.top16-info .character-icons{

    margin-top:0;

    justify-content:flex-start;

}



.top16-info .character-icons img{

    width:42px;

    height:42px;

}



.top16-player:hover .character-icons img{

    transform:scale(1.08);

}



/*=============================
    RECORD
=============================*/

.top16-record{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:4px;

    flex-shrink:0;

}



.top16-record span{

    color:#BFD1E8;

    font-size:.95rem;

    font-weight:700;

}



.top16-record strong{

    color:#FFD54F;

    font-size:1.1rem;

}

@media(max-width:992px){

    .top16-list{

        grid-template-columns:1fr;

    }

}



@media(max-width:768px){

    .top16-player{

        padding:16px;

        gap:16px;

    }

    .top16-pos{

        width:52px;

        height:52px;

        font-size:1rem;

    }

    .top16-info h3{

        font-size:1rem;

    }

    .top16-info .character-icons img{

        width:36px;

        height:36px;

    }

    .top16-record{

        font-size:.9rem;

    }

}

/*======================================================================
    ESTADÍSTICAS
======================================================================*/

.stats-summary-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

    margin-bottom:55px;

}



.stats-card{

    position:relative;

    overflow:hidden;

    padding:28px;

    border-radius:22px;

    background:

        linear-gradient(
            180deg,
            rgba(18,28,45,.96),
            rgba(10,17,29,.96)
        );

    border:1px solid rgba(255,255,255,.05);

    text-align:center;

    transition:

        transform .30s,

        border-color .30s,

        box-shadow .30s;

}



.stats-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    right:0;

    height:3px;

    background:

        linear-gradient(
            90deg,
            #2196F3,
            #6EC6FF
        );

}



.stats-card:hover{

    transform:translateY(-6px);

    border-color:rgba(80,180,255,.20);

    box-shadow:

        0 22px 45px rgba(0,0,0,.35);

}



.stats-value{

    display:block;

    color:white;

    font-size:2rem;

    font-weight:800;

}



.stats-label{

    display:block;

    margin-top:10px;

    color:#BFD1E8;

    font-size:.95rem;

    text-transform:uppercase;

    letter-spacing:.05em;

}



/*=========================
    BLOQUES
=========================*/

.stats-block{

    margin-top:45px;

}



.stats-block h3{

    margin-bottom:26px;

    font-size:1.55rem;

    color:white;

}



/*=========================
    PERSONAJES
=========================*/

.character-ranking{

    display:grid;

    gap:18px;

}



.character-row{

    display:grid;

    grid-template-columns:

        48px
        180px
        minmax(0,1fr)
        40px;

    gap:18px;

    align-items:center;

}



.character-row img{

    width:42px;

    height:42px;

}



.character-row span{

    color:white;

    font-weight:600;

}



.character-row strong{

    color:#FFD54F;

    text-align:right;

}



/*=========================
    BARRAS
=========================*/

.character-bar{

    position:relative;

    height:12px;

    overflow:hidden;

    border-radius:999px;

    background:

        rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.05);

}



.character-bar .bar-fill{

    position:relative;

    width:0;

    height:100%;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            #1565C0,
            #42A5F5,
            #81D4FA
        );

    box-shadow:

        0 0 16px rgba(66,165,245,.40);

    transition:

        width .9s ease;

}



.character-bar .bar-fill::after{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    left:-35%;

    width:35%;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.70),
            transparent
        );

}



.character-row:hover .bar-fill::after{

    animation:energySlide 1.1s linear infinite;

}



/*=========================
    TEAMS
=========================*/

.team-ranking{

    display:grid;

    gap:12px;

}



.team-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 20px;

    border-radius:14px;

    background:

        rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.05);

    transition:.30s;

}



.team-row:hover{

    transform:translateX(6px);

    background:

        rgba(255,255,255,.05);

}



.team-row span{

    color:white;

    font-weight:700;

}



.team-row strong{

    color:#FFD54F;

    font-size:1.15rem;

}

@media(max-width:992px){

    .stats-summary-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .character-row{

        grid-template-columns:

            42px
            140px
            minmax(0,1fr)
            34px;

    }

}

@media(max-width:768px){

    .stats-summary-grid{

        grid-template-columns:1fr;

    }

    .character-row{

        grid-template-columns:

            36px
            100px
            minmax(0,1fr)
            28px;

        gap:12px;

    }

    .character-row img{

        width:34px;

        height:34px;

    }

    .stats-value{

        font-size:1.7rem;

    }

}

/*======================================================================
    GALERÍA
======================================================================*/

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:26px;

    margin-top:45px;

}



.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    cursor:pointer;

    background:#111827;

    border:1px solid rgba(255,255,255,.06);

    box-shadow:

        0 18px 40px rgba(0,0,0,.30);

    transition:

        transform .35s,

        border-color .35s,

        box-shadow .35s;

}



.gallery-item:hover{

    transform:translateY(-8px);

    border-color:rgba(90,180,255,.30);

    box-shadow:

        0 30px 60px rgba(0,0,0,.45),

        0 0 24px rgba(40,140,255,.10);

}



/*==============================================================
    IMAGEN
==============================================================*/

.gallery-item img{

    display:block;

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    transition:

        transform .60s ease,

        filter .35s ease;

}



.gallery-item:hover img{

    transform:scale(1.05);

    filter:brightness(.82);

}



/*==============================================================
    OVERLAY
==============================================================*/

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to top,

            rgba(6,8,15,.92) 0%,

            rgba(6,8,15,.50) 32%,

            rgba(6,8,15,0) 68%

        );

    opacity:0;

    transition:.35s;

    z-index:1;

}



.gallery-item:hover::before{

    opacity:1;

}



/*==============================================================
    ICONO
==============================================================*/





.gallery-item:hover::after{

    opacity:1;

    transform:translateY(0);

}



/*==============================================================
    TÍTULO
==============================================================*/

.gallery-item .gallery-caption{

    position:absolute;

    left:22px;

    right:22px;

    bottom:22px;

    z-index:2;

    opacity:0;

    transform:translateY(18px);

    transition:.35s;

}



.gallery-item:hover .gallery-caption{

    opacity:1;

    transform:translateY(0);

}



.gallery-caption h3{

    margin:0;

    color:#FFF;

    font-size:1.15rem;

    font-weight:700;

}



.gallery-caption p{

    margin:8px 0 0;

    color:#C8D8EA;

    line-height:1.6;

    font-size:.92rem;

}

/*==============================================================
    RESPONSIVE
==============================================================*/

@media(max-width:992px){

    .gallery-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:768px){

    .gallery-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .gallery-item{

        border-radius:18px;

    }

    .gallery-item img{

        aspect-ratio:16/10;

    }

}

/*======================================================================
    GALERÍA - EFECTOS
======================================================================*/

.gallery-item{

    animation:galleryFadeIn .65s ease both;

}

.gallery-item:nth-child(2){ animation-delay:.05s; }
.gallery-item:nth-child(3){ animation-delay:.10s; }
.gallery-item:nth-child(4){ animation-delay:.15s; }
.gallery-item:nth-child(5){ animation-delay:.20s; }
.gallery-item:nth-child(6){ animation-delay:.25s; }
.gallery-item:nth-child(7){ animation-delay:.30s; }
.gallery-item:nth-child(8){ animation-delay:.35s; }
.gallery-item:nth-child(9){ animation-delay:.40s; }
.gallery-item:nth-child(10){ animation-delay:.45s; }
.gallery-item:nth-child(11){ animation-delay:.50s; }
.gallery-item:nth-child(12){ animation-delay:.55s; }
.gallery-item:nth-child(13){ animation-delay:.60s; }
.gallery-item:nth-child(14){ animation-delay:.65s; }
.gallery-item:nth-child(15){ animation-delay:.70s; }
.gallery-item:nth-child(16){ animation-delay:.75s; }
.gallery-item:nth-child(17){ animation-delay:.80s; }
.gallery-item:nth-child(18){ animation-delay:.85s; }



/*==============================================================
    BRILLO SUPERIOR
==============================================================*/

.gallery-item .gallery-shine{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:4;

    overflow:hidden;

}

.gallery-item .gallery-shine::before{

    content:"";

    position:absolute;

    top:-40%;

    left:-70%;

    width:45%;

    height:180%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.28),

            transparent

        );

    transform:rotate(25deg);

    transition:left .7s ease;

}

.gallery-item:hover .gallery-shine::before{

    left:135%;

}



/*==============================================================
    BORDE INTERNO
==============================================================*/

.gallery-item::selection{

    background:transparent;

}

.gallery-item{

    isolation:isolate;

}

.gallery-item>.gallery-frame{

    position:absolute;

    inset:10px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.08);

    opacity:0;

    pointer-events:none;

    transition:.35s;

    z-index:2;

}

.gallery-item:hover>.gallery-frame{

    opacity:1;

}



/*==============================================================
    KEYFRAMES
==============================================================*/

@keyframes galleryFadeIn{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*======================================================================
    LIGHTBOX
======================================================================*/

.gallery-lightbox{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

    background:rgba(5,8,15,.94);

    backdrop-filter:blur(14px);

    opacity:0;

    visibility:hidden;

    transition:

        opacity .30s,

        visibility .30s;

    z-index:99999;

}



.gallery-lightbox.active{

    opacity:1;

    visibility:visible;

}



/*==============================================================
    CONTENIDO
==============================================================*/

.gallery-lightbox-content{

    position:relative;

    width:min(92vw,1400px);

    display:flex;

    flex-direction:column;

    align-items:center;

}



.gallery-lightbox img{

    max-width:100%;

    max-height:78vh;

    border-radius:18px;

    box-shadow:

        0 35px 80px rgba(0,0,0,.55);

    transform:scale(.95);

    transition:

        transform .30s;

}



.gallery-lightbox.active img{

    transform:scale(1);

}



/*==============================================================
    INFORMACIÓN
==============================================================*/

.gallery-info{

    width:100%;

    margin-top:28px;

    text-align:center;

}



.gallery-info h3{

    color:#FFF;

    margin:0;

    font-size:2rem;

}



.gallery-info p{

    margin:14px auto;

    max-width:900px;

    color:#C7D6E8;

    line-height:1.8;

}



.gallery-info span{

    display:inline-block;

    margin-top:10px;

    color:#7CC2FF;

    font-weight:700;

}



/*==============================================================
    BOTÓN CERRAR
==============================================================*/

.gallery-close{

    position:absolute;

    top:24px;

    right:30px;

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    color:white;

    font-size:1.5rem;

    cursor:pointer;

    transition:.25s;

}



.gallery-close:hover{

    background:#1976D2;

    transform:rotate(90deg);

}



/*==============================================================
    FLECHAS
==============================================================*/

.gallery-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:64px;

    height:64px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    color:white;

    font-size:2rem;

    cursor:pointer;

    transition:.25s;

}



.gallery-arrow:hover{

    background:#1976D2;

}



.gallery-arrow.prev{

    left:28px;

}



.gallery-arrow.next{

    right:28px;

}



/*==============================================================
    RESPONSIVE
==============================================================*/

@media(max-width:768px){

    .gallery-lightbox{

        padding:20px;

    }

    .gallery-arrow{

        width:48px;

        height:48px;

        font-size:1.5rem;

    }

    .gallery-arrow.prev{

        left:10px;

    }

    .gallery-arrow.next{

        right:10px;

    }

    .gallery-close{

        top:12px;

        right:12px;

        width:46px;

        height:46px;

    }

    .gallery-info h3{

        font-size:1.35rem;

    }

    .gallery-info p{

        font-size:.95rem;

    }

}

/*======================================================================
    LIGHTBOX - DETALLES VISUALES
======================================================================*/

.gallery-lightbox img{

    opacity:0;

    transition:
        opacity .30s ease,
        transform .35s ease;

}



.gallery-lightbox.active img{

    opacity:1;

}



.gallery-lightbox.changing img{

    opacity:0;

    transform:scale(.96);

}



/*==============================================================
    BOTONES
==============================================================*/

.gallery-arrow,
.gallery-close{

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:
        0 8px 30px rgba(0,0,0,.35);

}



.gallery-arrow:active,
.gallery-close:active{

    transform:scale(.92);

}



/*==============================================================
    CONTADOR
==============================================================*/

.gallery-info span{

    padding:8px 16px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.08);

    font-size:.92rem;

    letter-spacing:.08em;

}



/*==============================================================
    SCROLLBAR
==============================================================*/

.gallery-description::-webkit-scrollbar{

    width:8px;

}

.gallery-description::-webkit-scrollbar-thumb{

    background:#4C9DFF;

    border-radius:20px;

}



/*==============================================================
    ANIMACIÓN ENTRADA
==============================================================*/

.gallery-lightbox.active .gallery-info{

    animation:galleryInfoUp .45s ease;

}



@keyframes galleryInfoUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==============================================================
    FOOTER
==============================================================*/

.tournament-footer{

    margin-top:120px;

    padding:90px 25px 45px;

    position:relative;

    overflow:hidden;

    background:

        linear-gradient(
            180deg,
            rgba(13,8,24,0) 0%,
            rgba(13,8,24,.65) 18%,
            rgba(7,10,18,.97) 100%
        );

    border-top:1px solid rgba(255,255,255,.05);

}



/* brillo superior */

.tournament-footer::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:420px;

    height:2px;

    background:

        linear-gradient(
            90deg,
            transparent,
            #6C5CE7,
            #45A6FF,
            transparent
        );

    opacity:.75;

}



/*==============================================================
    CONTENEDOR
==============================================================*/

.footer-inner{

    max-width:1000px;

    margin:auto;

    text-align:center;

}



/*==============================================================
    LOGO
==============================================================*/

.footer-logo{

    width:68px;

    height:68px;

    margin-bottom:18px;

    filter:

        drop-shadow(0 0 18px rgba(108,92,231,.35));

    transition:.35s;

}



.footer-logo:hover{

    transform:rotate(8deg) scale(1.08);

}



/*==============================================================
    TITULO
==============================================================*/

.footer-inner h3{

    margin:0;

    color:#FFF;

    font-size:2rem;

    font-weight:700;

    letter-spacing:.02em;

}



/*==============================================================
    DESCRIPCIÓN
==============================================================*/

.footer-description{

    margin:18px auto 40px;

    max-width:620px;

    color:#B9C5D8;

    line-height:1.8;

    font-size:1rem;

}



/*==============================================================
    MENU
==============================================================*/

.footer-nav{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:36px;

    flex-wrap:wrap;

}



.footer-nav a{

    position:relative;

    color:#D8E4F4;

    text-decoration:none;

    font-weight:600;

    transition:.30s;

}



.footer-nav a:hover{

    color:#53A8FF;

}



.footer-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#53A8FF;

    transition:.30s;

}



.footer-nav a:hover::after{

    width:100%;

}



/*==============================================================
    DIVISOR
==============================================================*/

.footer-divider{

    width:120px;

    height:1px;

    margin:42px auto 28px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

}



/*==============================================================
    COPYRIGHT
==============================================================*/

.footer-copy{

    color:#7E8CA1;

    font-size:.9rem;

    letter-spacing:.04em;

}



/*==============================================================
    RESPONSIVE
==============================================================*/

@media(max-width:768px){

    .tournament-footer{

        margin-top:80px;

        padding:70px 20px 35px;

    }

    .footer-inner h3{

        font-size:1.7rem;

    }

    .footer-description{

        font-size:.95rem;

    }

    .footer-nav{

        gap:18px;

        flex-direction:column;

    }

}