@font-face {
    font-family: "Archeologicaps";
    src: url("../fonts/Archeologicaps.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "StylosCapitaleAD100";
    src: url("../fonts/StylosCapitaleAD100.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: 'Exo 2',sans-serif;
    background: #020611;
    color: white;
}

/* ======================================== */
/* FONDO */
/* ======================================== */

#fondo {
    position: fixed;
    width: 100%;
    height: 100%;
    background: linear-gradient( rgba(2,5,18,.58), rgba(2,5,18,.72) ), url("../img/fondo.png");
    background-size: cover;
    background-position: center;
    filter: brightness(1.05) saturate(1.25);
    z-index: -10;
}

body.modoMiniJuegos #fondo {
    background:
        linear-gradient(90deg, rgba(1, 5, 15, .58), rgba(1, 5, 15, .20) 48%, rgba(1, 5, 15, .58)),
        linear-gradient(180deg, rgba(1, 5, 15, .20), rgba(1, 5, 15, .58)),
        url("../img/minijuegos/nexus-arcade-background-4k.png");
    background-size: cover;
    background-position: center;
    filter: brightness(1.08) saturate(1.18);
}


/* ======================================== */
/* EFECTOS */
/* ======================================== */

#lineaVertical {
    position: fixed;
    left: 230px;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(0,170,255,.10);
}

#circuloHUD {
    position: fixed;
    right: 250px;
    top: 50%;
    transform: translateY(-50%);
    width: 700px;
    height: 700px;
    border-radius: 50%;
    border: 1px solid rgba(0,170,255,.06);
    pointer-events: none;
}

.notificacionesBoton {
    position: fixed;
    top: -4px;
    right: -2px;
    z-index: 35;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

.notificacionesBotonActivo {
    opacity: 1;
    pointer-events: auto;
}

.notificacionesBoton::after {
    content: attr(data-notification-count);
    position: absolute;
    top: 1px;
    right: -1px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #ff2f7d;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 11px;
    line-height: 1;
    text-shadow:
        0 0 5px rgba(255, 47, 125, .95),
        0 0 12px rgba(255, 47, 125, .86),
        0 0 20px rgba(255, 47, 125, .58);
    display: none;
    z-index: 4;
}

.notificacionesBotonConConteo::after {
    display: grid !important;
}

.notificacionesBoton img {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 213, 94, .72));
    pointer-events: none;
}

.notificacionesBoton:hover,
.notificacionesBoton:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.16);
    outline: none;
}

.notificacionesBotonVibra img {
    animation: notificacionesCampanaVibra 2s ease-in-out 1;
    transform-origin: 50% 8%;
}

@keyframes notificacionesCampanaVibra {
    0%,
    100% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(-13deg);
    }

    30% {
        transform: rotate(11deg);
    }

    45% {
        transform: rotate(-9deg);
    }

    60% {
        transform: rotate(7deg);
    }

    75% {
        transform: rotate(-4deg);
    }
}

.notificacionesModal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 62px 18px 18px;
    pointer-events: none;
}

.notificacionesModalActivo {
    display: flex;
}

.notificacionesModalOverlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .28);
    pointer-events: auto;
}

.notificacionesPanel {
    position: relative;
    z-index: 1;
    width: min(520px, calc(100vw - 28px));
    max-height: min(720px, calc(100vh - 86px));
    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid rgba(95, 240, 255, .54);
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 47, 125, .16), transparent 34%),
        linear-gradient(180deg, rgba(2, 8, 23, .98), rgba(1, 4, 16, .98));
    box-shadow:
        inset 0 0 0 1px rgba(255, 213, 94, .12),
        0 18px 44px rgba(0, 0, 0, .64),
        0 0 30px rgba(95, 240, 255, .16);
    clip-path: polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px));
    pointer-events: auto;
}

.notificacionesHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid rgba(95, 240, 255, .22);
}

.notificacionesHeader span,
.notificacionesCerrar {
    color: #ffd45e;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
}

.notificacionesHeader strong {
    margin: 6px 0 0;
    color: #5ff0ff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 16px;
    line-height: 1.2;
    text-shadow: 0 0 12px rgba(95, 240, 255, .72);
}

.notificacionesCerrar {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 213, 94, .52);
    background: rgba(1, 5, 16, .72);
    cursor: pointer;
}

.notificacionesLista {
    display: grid;
    gap: 10px;
    padding: 14px 16px 18px;
    overflow: auto;
}

.notificacionItem,
.notificacionesVacio {
    border: 1px solid rgba(95, 240, 255, .20);
    background: rgba(3, 12, 28, .72);
    padding: 10px;
}

.notificacionItem {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 34px;
    gap: 16px;
    align-items: center;
}

.notificacionItem img {
    width: 96px;
    height: 86px;
    object-fit: cover;
    border: 1px solid rgba(255, 213, 94, .38);
}

.notificacionItem strong,
.notificacionesVacio strong {
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    line-height: 1.1;
}

.notificacionItem p,
.notificacionesVacio p {
    margin: 4px 0 0;
    color: #d8e8ff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}

.notificacionBorrar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 47, 125, .62);
    background: rgba(1, 5, 16, .72);
    color: #ff2f7d;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 12px;
    cursor: pointer;
    text-shadow: 0 0 10px rgba(255, 47, 125, .75);
}

.notificacionBorrar:hover,
.notificacionBorrar:focus-visible {
    color: #ffffff;
    border-color: rgba(255, 47, 125, .95);
    box-shadow: 0 0 16px rgba(255, 47, 125, .22);
    outline: none;
}

@media (max-width: 760px) {
    .notificacionesBoton {
        top: 4px;
        right: 4px;
        width: 40px;
        height: 40px;
    }

    .notificacionesBoton img {
        width: 36px;
        height: 36px;
    }
}

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

#contenedor {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* ======================================== */
/* SIDEBAR */
/* ======================================== */

#sidebar {
    width: 230px;
    height: 100vh;
    padding: 34px 25px 24px 25px;
    background: linear-gradient( 180deg, rgba(5,10,25,.72), rgba(5,10,25,.12) );
    backdrop-filter: blur(12px);
    border-right: 1px solid rgba(0,170,255,.06);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}

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

#logoBox {
    margin-bottom: 28px;
}

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

#logoN {
    width: 138px;
    height: 138px;
    border-radius: 24px;
    background: url("../img/logo.png");
    background-size: 118%;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 15px rgba(0,170,255,.32)) drop-shadow(0 0 42px rgba(0,140,255,.16));
    margin: 0 auto 18px auto;
    animation: pulsarLogo 4s ease-in-out infinite;
}

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

@keyframes pulsarLogo {

    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 12px rgba(0,170,255,.20)) drop-shadow(0 0 35px rgba(0,140,255,.08));
    }

    50% {
        transform: scale(1.03);
        filter: drop-shadow(0 0 20px rgba(0,190,255,.35)) drop-shadow(0 0 45px rgba(0,140,255,.18));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 12px rgba(0,170,255,.20)) drop-shadow(0 0 35px rgba(0,140,255,.08));
    }
}

#logoBox h1 {
    font-size: 40px;
    font-family: 'Rajdhani',sans-serif;
    letter-spacing: 5px;
    margin-bottom: 8px;
}

#logoBox span {
    font-size: 11px;
    color: #58bfff;
    letter-spacing: 4.5px;
}

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

.menuBoton {
    padding: 13px 18px;
    margin-bottom: 8px;
    font-size: 15px;
    letter-spacing: 2px;
    color: #d7ebff;
    cursor: pointer;
    border-left: 1px solid rgba(0,170,255,.18);
    transition: .25s;
}

    .menuBoton:hover {
        transform: translateX(8px);
        color: #59c7ff;
    }

.activo {
    color: #59c7ff;
}

.nexusGifDownload {
    width: 78px;
    height: 78px;
    margin: -78px 0 2px 130px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease;
}

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

.nexusGifDownload:hover {
    transform: translateX(6px) scale(1.08);
    filter: drop-shadow(0 0 18px rgba(89, 199, 255, .42));
}

.worldChampionshipMenu {
    position: relative;
    min-width: 188px;
    min-height: 50px;
    display: grid;
    place-items: center;
    padding: 0 22px;
    border: 0;
    color: #ffd65a;
    text-align: center;
    overflow: visible;
    isolation: isolate;
}

.worldChampionshipMenu::before {
    content: "";
    position: absolute;
    inset: -8px -18px;
    background: url("../img/world-championship-frame.png") center / 100% 100% no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 0 12px rgba(255, 210, 80, .2));
    z-index: 2;
}

.worldChampionshipMenu::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 82%;
    height: 52%;
    background:
        radial-gradient(circle, rgba(255, 221, 106, .3) 0%, rgba(255, 181, 43, .13) 34%, transparent 72%);
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    opacity: .35;
    animation: worldFrameAura 3.9s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.worldChampionshipMenu span {
    position: relative;
    z-index: 4;
    display: block;
    max-width: 145px;
    color: #ffe28a;
    font-size: 10px;
    line-height: 1.12;
    letter-spacing: 2.2px;
    font-weight: 900;
    text-shadow: 0 0 12px rgba(255, 210, 76, .34);
    animation: worldTitlePulse 3.2s ease-in-out infinite;
}

.worldSpark {
    position: absolute;
    top: 3px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffd966;
    box-shadow:
        0 0 7px rgba(255, 219, 102, .95),
        0 0 14px rgba(255, 169, 35, .55);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    animation: worldSparkFall 3.8s linear infinite;
}

.worldSpark1 {
    left: 20%;
    animation-delay: .1s;
}

.worldSpark2 {
    left: 38%;
    animation-delay: 1.1s;
}

.worldSpark3 {
    left: 54%;
    animation-delay: .65s;
}

.worldSpark4 {
    left: 70%;
    animation-delay: 1.75s;
}

.worldSpark5 {
    left: 84%;
    animation-delay: 2.35s;
}

.worldGoldLine {
    position: absolute;
    left: 20px;
    right: 20px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.worldGoldLine::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 233, 128, .95), transparent);
    box-shadow: 0 0 9px rgba(255, 210, 76, .82);
    animation: worldGoldLineTravel 2.9s ease-in-out infinite;
}

.worldGoldLineTop {
    top: 9px;
}

.worldGoldLineBottom {
    bottom: 9px;
}

.worldGoldLineBottom::before {
    animation-delay: 1.45s;
}

@keyframes worldFrameAura {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(.92);
        opacity: .22;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: .42;
    }
}

@keyframes worldGoldLineTravel {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }

    20% {
        opacity: .9;
    }

    80% {
        opacity: .9;
    }

    100% {
        transform: translateX(250%);
        opacity: 0;
    }
}

@keyframes worldTitlePulse {
    0%,
    100% {
        color: #ffe28a;
        text-shadow:
            0 0 10px rgba(255, 210, 76, .28),
            0 0 20px rgba(255, 160, 40, .08);
    }

    50% {
        color: #fff3bd;
        text-shadow:
            0 0 14px rgba(255, 227, 129, .62),
            0 0 30px rgba(255, 170, 45, .26);
    }
}

@keyframes worldSparkFall {
    0% {
        transform: translateY(0) scale(.5);
        opacity: 0;
    }

    16% {
        opacity: .9;
    }

    72% {
        opacity: .78;
    }

    100% {
        transform: translateY(38px) scale(.18);
        opacity: 0;
    }
}

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

#contenidoPrincipal {
    flex: 1;
    height: 100vh;
    padding: 90px 90px 140px 90px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(89,199,255,.75) rgba(0,170,255,.04);
}

    #contenidoPrincipal::-webkit-scrollbar {
        width: 5px;
    }

    #contenidoPrincipal::-webkit-scrollbar-track {
        background: rgba(0,170,255,.04);
    }

    #contenidoPrincipal::-webkit-scrollbar-thumb {
        background: linear-gradient( to bottom, rgba(0,170,255,.12), rgba(89,199,255,.85), rgba(0,170,255,.12) );
        border-radius: 20px;
        box-shadow: 0 0 12px rgba(0,170,255,.65);
    }


/* ======================================== */
/* TRANSICION DE PAGINAS */
/* ======================================== */

.paginaSeccion {
    display: none;
    opacity: 0;
    transform: translateY(18px);
    filter: blur(8px);
    transition:
        opacity .32s ease,
        transform .32s ease,
        filter .32s ease;
    will-change: opacity, transform, filter;
}

.paginaSeccion.paginaActiva {
    display: block;
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.paginaSeccion.paginaSalida {
    display: block;
    opacity: 0;
    transform: translateY(-12px);
    filter: blur(8px);
    pointer-events: none;
}
/* ======================================== */
/* TITULOS */
/* ======================================== */

#tituloSuperior {
    font-size: 15px;
    letter-spacing: 7px;
    color: #58bfff;
    margin-bottom: 20px;
}

#contenidoPrincipal h2 {
    font-size: 88px;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 700;
    line-height: .95;
    letter-spacing: 3px;
    margin-bottom: 25px;
    text-shadow: 0 0 35px rgba(0,140,255,.12);
    max-width: 850px;
}

#contenidoPrincipal h3 {
    font-size: 24px;
    font-weight: 400;
    color: #70ccff;
    letter-spacing: 4.5px;
    margin-bottom: 70px;
}

/* ======================================== */
/* PERFIL / STAFF */
/* ======================================== */

#perfilLibre {
    position: relative;
    width: 650px;
    z-index: 5;
    overflow: visible;
}

#lineaPerfil {
    position: absolute;
    left: -30px;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient( transparent, rgba(0,170,255,.34), transparent );
    box-shadow: 0 0 18px rgba(0,170,255,.22);
}

#contenidoPerfil {
    position: relative;
    width: 100%;
}

#staffScroll {
    position: relative;
    width: 100%;
    height: auto;
    padding-right: 0;
    overflow: visible;
    scroll-behavior: smooth;
}

.staffMember {
    position: relative;
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 40px;
    min-height: 330px;
    padding: 0 0 100px 0;
}

    .staffMember:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 28px;
        right: 34px;
        bottom: 48px;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(89,199,255,.58), rgba(89,199,255,.13), transparent );
        box-shadow: 0 0 16px rgba(0,170,255,.26);
    }

.staffImageBox {
    position: relative;
    width: 180px;
    height: 260px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
}

    .staffImageBox::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 8px;
        width: 130px;
        height: 18px;
        transform: translateX(-50%);
        background: radial-gradient( ellipse, rgba(0,170,255,.24), rgba(0,170,255,.08) 48%, transparent 72% );
        filter: blur(4px);
    }

    .staffImageBox::after {
        content: "";
        position: absolute;
        inset: 26px 18px 0 18px;
        background: radial-gradient( circle at 50% 48%, rgba(0,170,255,.14), rgba(0,140,255,.05) 42%, transparent 72% );
        filter: blur(12px);
        opacity: .85;
    }

.staffImage {
    position: relative;
    z-index: 2;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(0,170,255,.18)) drop-shadow(0 0 40px rgba(0,140,255,.10));
    animation: flotarPersonaje 6s ease-in-out infinite;
}

.staffText {
    position: relative;
    max-width: 430px;
}

    .staffText::before {
        content: "";
        position: absolute;
        left: -20px;
        top: 8px;
        width: 1px;
        height: calc(100% - 16px);
        background: linear-gradient( to bottom, transparent, rgba(89,199,255,.48), transparent );
        box-shadow: 0 0 14px rgba(0,170,255,.22);
    }

.staffLabel {
    margin-bottom: 8px;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    color: rgba(89,199,255,.75);
}

.staffText h4 {
    font-size: 46px;
    font-family: 'Rajdhani',sans-serif;
    margin-bottom: 16px;
    line-height: 1;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 0 22px rgba(0,140,255,.16);
}

    .staffText h4 span {
        color: #59c7ff;
    }

.staffInfo {
    display: flex;
    gap: 30px;
    margin-bottom: 24px;
    color: #70ccff;
    font-size: 14px;
    letter-spacing: 2px;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 500;
}

    .staffInfo div {
        position: relative;
    }

        .staffInfo div:not(:last-child)::after {
            content: "";
            position: absolute;
            right: -17px;
            top: 50%;
            width: 3px;
            height: 3px;
            transform: translateY(-50%);
            border-radius: 50%;
            background: rgba(89,199,255,.9);
            box-shadow: 0 0 10px rgba(89,199,255,.8);
        }

.staffText p {
    font-size: 16px;
    line-height: 1.75;
    color: #dcecff;
    font-weight: 300;
}

#inicioPresentacion {
    position: relative;
    width: 680px;
    max-width: 100%;
    z-index: 5;
}

.inicioIntro {
    position: relative;
    max-width: 620px;
}

.inicioIntro::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 8px;
    width: 1px;
    height: calc(100% - 16px);
    background: linear-gradient( to bottom, transparent, rgba(89,199,255,.48), transparent );
    box-shadow: 0 0 14px rgba(0,170,255,.22);
}

.inicioLabel {
    margin-bottom: 14px;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4.5px;
    color: rgba(89,199,255,.82);
}

.inicioIntro p {
    max-width: 600px;
    margin-bottom: 22px;
    font-size: 18px;
    line-height: 1.85;
    color: #dcecff;
    font-weight: 300;
}

.inicioPuntos {
    display: grid;
    grid-template-columns: repeat(4, minmax(118px, 1fr));
    gap: 16px;
    max-width: 720px;
    margin: 34px 0 38px;
}

.inicioPuntos span {
    position: relative;
    min-height: 86px;
    padding: 18px 16px 14px;
    border: 1px solid rgba(89,199,255,.26);
    border-left-color: rgba(89,199,255,.78);
    background:
        linear-gradient(135deg, rgba(0,170,255,.18), rgba(0,55,120,.08) 48%, rgba(0,0,0,.18)),
        radial-gradient(circle at 18% 0%, rgba(89,199,255,.24), transparent 52%);
    box-shadow:
        inset 0 0 20px rgba(0,170,255,.08),
        0 0 18px rgba(0,170,255,.10);
    overflow: hidden;
}

.inicioPuntos span::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(89,199,255,.95), transparent);
}

.inicioPuntos span::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -24px;
    width: 72px;
    height: 72px;
    border: 1px solid rgba(89,199,255,.18);
    transform: rotate(45deg);
}

.inicioPuntos strong {
    position: relative;
    z-index: 2;
    display: block;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 26px;
    line-height: .95;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 0 18px rgba(89,199,255,.38);
}

.inicioPuntos small {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 10px;
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.2px;
}

.inicioPuntos span:hover {
    transform: translateY(-4px);
    border-color: rgba(89,199,255,.62);
    box-shadow:
        inset 0 0 26px rgba(0,170,255,.12),
        0 0 24px rgba(0,170,255,.20);
}

#btnDiscordInicio {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 250px;
    height: 58px;
    padding: 0 32px;
    border: 1px solid rgba(89,199,255,.45);
    background: rgba(0,170,255,.08);
    color: #e8f7ff;
    text-decoration: none;
    font-family: 'Rajdhani',sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    box-shadow: inset 0 0 18px rgba(0,170,255,.08);
    transition: .25s;
}

#btnDiscordInicio::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: -1px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(89,199,255,.9), transparent );
}

#btnDiscordInicio:hover {
    transform: translateX(8px);
    color: #ffffff;
    border-color: rgba(89,199,255,.9);
    box-shadow: 0 0 26px rgba(0,170,255,.32), inset 0 0 24px rgba(0,170,255,.12);
}

.inicioPoster {
    position: relative;
    min-height: calc(100vh - 190px);
    margin-top: 24px;
    padding-bottom: 18px;
    overflow: visible;
    z-index: 5;
}

.inicioPoster::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 64% 34%, rgba(0,170,255,.18), transparent 26%),
        radial-gradient(circle at 28% 42%, rgba(0,0,0,.18), transparent 34%);
    z-index: -1;
    pointer-events: none;
}

.inicioPosterTop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: min(100%, 1120px);
    margin: 0 auto 18px;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 700;
    text-align: center;
}

.inicioPosterTop span {
    flex: 1;
    max-width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,205,84,.86), rgba(89,199,255,.65), transparent);
    box-shadow: 0 0 12px rgba(89,199,255,.35);
}

.inicioPosterTop strong {
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
    letter-spacing: 7px;
    text-shadow:
        0 0 14px rgba(255,255,255,.24),
        0 0 26px rgba(89,199,255,.24);
}

.inicioPosterTop small {
    color: #70ccff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 4.5px;
    text-shadow: 0 0 16px rgba(89,199,255,.30);
}

.inicioPosterGrid {
    position: relative;
    display: block;
    min-height: 390px;
}

.inicioPosterContent {
    position: relative;
    z-index: 4;
    width: min(58%, 770px);
}

.inicioPosterLogo {
    display: block;
    width: min(680px, 100%);
    max-height: 250px;
    object-fit: contain;
    object-position: left center;
    margin: -4px 0 18px -22px;
    filter:
        drop-shadow(0 0 18px rgba(0,170,255,.36))
        drop-shadow(0 0 36px rgba(255,205,84,.12));
}

.inicioPosterTitle {
    margin-bottom: 7px;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.05;
    text-transform: uppercase;
}

.inicioPosterTitle strong {
    display: block;
    color: #ffffff;
    font-size: 27px;
    text-shadow: 0 0 18px rgba(255,255,255,.14);
}

.inicioPosterTitle span {
    display: block;
    color: #19a9ff;
    font-size: 27px;
    text-shadow: 0 0 18px rgba(0,170,255,.34);
}

.inicioPosterText {
    width: min(100%, 730px);
}

.inicioPosterText p {
    margin-bottom: 6px;
    color: #eaf5ff;
    font-size: 15px;
    line-height: 1.46;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(0,0,0,.28);
}

.inicioChallenge {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: 0;
    width: min(100%, 710px);
    margin-top: 8px;
    padding: 8px 14px 8px 8px;
    border: 1px solid rgba(89,199,255,.50);
    background:
        linear-gradient(90deg, rgba(0,170,255,.18), rgba(2,12,32,.78) 64%, rgba(0,170,255,.04));
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 26px, calc(100% - 20px) 100%, 0 100%);
    box-shadow: inset 0 0 22px rgba(0,170,255,.10), 0 0 24px rgba(0,120,255,.16);
}

.inicioChallengeIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.inicioChallengeIcon img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 10px rgba(89,199,255,.52))
        drop-shadow(0 0 10px rgba(255,205,84,.16));
}

.inicioChallenge p {
    margin: 0;
    color: #dcecff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    line-height: 1.22;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.inicioChallenge strong {
    display: block;
    margin-top: 4px;
    color: #ffd45e;
    letter-spacing: 1.5px;
}

.inicioPosterVisual {
    position: absolute;
    right: -10px;
    top: 28px;
    width: min(46%, 500px);
    z-index: 3;
    min-height: 420px;
    display: grid;
    place-items: center;
}

.inicioPosterVisual::before {
    display: none;
}

.inicioPosterVisual img {
    position: relative;
    width: min(470px, 94%);
    max-height: 430px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 18px rgba(89,199,255,.72))
        drop-shadow(0 0 58px rgba(0,140,255,.32))
        drop-shadow(0 0 24px rgba(255,205,84,.18));
    animation: inicioCopaPulse 4.8s ease-in-out infinite;
    transition: opacity .52s ease, transform .52s ease, filter .52s ease;
}

.inicioPosterVisual img:not(.logoRotandoActivo) {
    opacity: .16;
    transform: scale(.90) translateY(8px);
    filter:
        blur(2px)
        drop-shadow(0 0 8px rgba(89,199,255,.30));
}

.inicioPosterVisual img.logoRotandoActivo {
    opacity: 1;
    transform: scale(1);
}

.inicioPosterVisual img.logoRotandoSalida {
    opacity: 0;
    transform: scale(1.07) translateY(-6px);
    filter:
        blur(4px)
        drop-shadow(0 0 20px rgba(89,199,255,.80))
        drop-shadow(0 0 56px rgba(0,140,255,.38));
}

.inicioPosterMetrics {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    width: min(100%, 1160px);
    margin: 4px auto 8px;
    border: 1px solid rgba(89,199,255,.45);
    background:
        linear-gradient(90deg, rgba(0,16,38,.85), rgba(0,60,120,.38), rgba(0,16,38,.85));
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 16px), 0 16px);
    box-shadow: inset 0 0 26px rgba(0,170,255,.16), 0 0 28px rgba(0,140,255,.20);
}

.inicioMetric {
    position: relative;
    min-height: 60px;
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    column-gap: 14px;
    padding: 8px 16px;
}

.inicioMetric:not(:last-child) {
    border-right: 1px solid rgba(89,199,255,.38);
}

.inicioMetricIcon {
    grid-row: 1 / 3;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    clip-path: none;
    box-shadow: none;
}

.inicioMetricIcon img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 10px rgba(89,199,255,.55))
        drop-shadow(0 0 8px rgba(255,205,84,.20));
}

.inicioMetric strong {
    align-self: end;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 24px;
    line-height: .95;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 0 18px rgba(89,199,255,.42);
}

.inicioMetric small {
    align-self: start;
    margin-top: 5px;
    color: #19b6ff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
}

.inicioCtaBox {
    position: relative;
    z-index: 8;
    display: grid;
    justify-items: center;
    width: min(430px, 100%);
    margin: 6px auto 0;
    padding-bottom: 46px;
}

.inicioPoster #btnDiscordInicio {
    position: relative;
    display: flex;
    width: min(390px, 100%);
    height: 58px;
    margin: 0;
    padding: 0 34px;
    border: 1px solid rgba(89,199,255,.75);
    background:
        linear-gradient(180deg, rgba(0,170,255,.30), rgba(0,88,185,.22)),
        linear-gradient(90deg, rgba(255,205,84,.18), transparent 22%, transparent 78%, rgba(255,205,84,.18));
    clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 20px, calc(100% - 18px) 100%, 18px 100%, 0 20px);
    color: #ffffff;
    font-size: 25px;
    letter-spacing: 4.5px;
    box-shadow:
        inset 0 0 26px rgba(0,170,255,.22),
        0 0 28px rgba(0,170,255,.36),
        0 0 12px rgba(255,205,84,.18);
    text-shadow: 0 0 14px rgba(255,255,255,.35);
    overflow: hidden;
}

.inicioPoster #btnDiscordInicio::before {
    content: "";
    position: absolute;
    inset: -80% -35%;
    background:
        linear-gradient(115deg, transparent 28%, rgba(89,199,255,.24) 42%, rgba(255,255,255,.88) 50%, rgba(89,199,255,.26) 58%, transparent 72%);
    transform: translateX(-72%) rotate(8deg);
    opacity: 0;
}

.inicioPoster #btnDiscordInicio::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 4px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(89,199,255,1), transparent);
    box-shadow: 0 0 10px rgba(89,199,255,.86), 0 0 22px rgba(0,170,255,.54);
    opacity: .65;
}

.inicioPoster #btnDiscordInicio:hover {
    transform: translateY(-4px);
    border-color: rgba(143,222,255,1);
    box-shadow:
        inset 0 0 34px rgba(0,170,255,.36),
        0 0 22px rgba(89,199,255,.64),
        0 0 54px rgba(0,132,255,.48),
        0 0 18px rgba(255,205,84,.18);
    animation: botonEnergia 1.2s ease-in-out infinite alternate;
}

.inicioPoster #btnDiscordInicio:hover::before {
    opacity: 1;
    animation: barridoEnergia 1.1s ease-in-out infinite;
}

.inicioCtaOrnamento {
    position: absolute;
    top: 48px;
    width: 430px;
    max-width: 92%;
    height: 74px;
    object-fit: contain;
    object-position: center center;
    pointer-events: none;
    filter:
        drop-shadow(0 0 10px rgba(89,199,255,.54))
        drop-shadow(0 0 12px rgba(255,205,84,.14));
}

@keyframes barridoEnergia {
    0% {
        transform: translateX(-76%) rotate(8deg);
    }

    100% {
        transform: translateX(76%) rotate(8deg);
    }
}

@keyframes botonEnergia {
    0% {
        filter: drop-shadow(0 0 4px rgba(89,199,255,.35));
    }

    100% {
        filter: drop-shadow(0 0 16px rgba(89,199,255,.85));
    }
}

.inicioPosterBenefits {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 22px;
    width: min(100%, 1160px);
    margin: 30px auto 0;
}

.inicioPosterBenefits div {
    position: relative;
    padding-left: 18px;
    border-left: 1px solid rgba(255,205,84,.40);
}

.inicioPosterBenefits strong {
    display: block;
    margin-bottom: 6px;
    color: #ffd76a;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.inicioPosterBenefits span {
    display: block;
    color: rgba(220,236,255,.78);
    font-size: 14px;
    line-height: 1.45;
}

.inicioYoutubeUltimo {
    position: relative;
    z-index: 6;
    width: min(100%, 980px);
    margin: 46px auto 12px;
}

.inicioYoutubeHeader {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(89,199,255,.34);
    padding-bottom: 12px;
}

.inicioYoutubeHeader span {
    color: #ff4b4b;
    font-family: 'Rajdhani',sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.inicioYoutubeHeader strong {
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 28px;
    font-weight: 700;
    text-align: right;
}

.inicioYoutubePlayer {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(89,199,255,.44);
    border-radius: 8px;
    background: #020811;
    box-shadow:
        0 0 28px rgba(0,170,255,.18),
        inset 0 0 28px rgba(0,170,255,.08);
}

.inicioYoutubePlayer iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 700px) {

    .inicioYoutubeHeader {
        display: block;
    }

    .inicioYoutubeHeader strong {
        display: block;
        margin-top: 6px;
        font-size: 23px;
        text-align: left;
    }

}

@keyframes inicioCopaPulse {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.025);
    }
}

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

@keyframes flotarPersonaje {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }
}

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

#hologramaN {
    position: fixed;
    right: 120px;
    top: 50%;
    transform: translateY(-50%);
    width: 650px;
    height: 650px;
    background: url("../img/copa.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .88;
    filter: drop-shadow(0 0 12px rgba(0,170,255,.45)) drop-shadow(0 0 35px rgba(0,140,255,.25)) drop-shadow(0 0 90px rgba(0,140,255,.12));
    animation: flotar 6s ease-in-out infinite, pulsar 4s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

/* ======================================== */
/* PULSO */
/* ======================================== */

@keyframes pulsar {

    0% {
        filter: drop-shadow(0 0 12px rgba(0,170,255,.35)) drop-shadow(0 0 35px rgba(0,140,255,.18)) drop-shadow(0 0 90px rgba(0,140,255,.08));
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(0,190,255,.65)) drop-shadow(0 0 60px rgba(0,140,255,.35)) drop-shadow(0 0 130px rgba(0,140,255,.18));
    }

    100% {
        filter: drop-shadow(0 0 12px rgba(0,170,255,.35)) drop-shadow(0 0 35px rgba(0,140,255,.18)) drop-shadow(0 0 90px rgba(0,140,255,.08));
    }
}

/* ======================================== */
/* PLATAFORMA */
/* ======================================== */

#plataforma {
    position: fixed;
    right: 210px;
    bottom: 120px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient( rgba(0,170,255,.25), transparent 70% );
    filter: blur(25px);
    z-index: 0;
    pointer-events: none;
}

/* ======================================== */
/* ANIMACION */
/* ======================================== */

@keyframes flotar {

    0% {
        transform: translateY(-50%) translateY(0px);
    }

    50% {
        transform: translateY(-50%) translateY(-20px);
    }

    100% {
        transform: translateY(-50%) translateY(0px);
    }
}

/* ======================================== */
/* DRAFT PANEL */
/* ======================================== */

#paginaDraft {
    position: relative;
    min-height: calc(100vh - 180px);
    z-index: 5;
}

#draftPanel {
    position: relative;
    width: 620px;
    max-width: 100%;
    padding-top: 32px;
}

#draftPanel::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient( transparent, rgba(0,170,255,.38), transparent );
    box-shadow: 0 0 18px rgba(0,170,255,.28);
}

#draftMiniText {
    margin-bottom: 18px;
    font-size: 14px;
    letter-spacing: 6px;
    color: #58bfff;
    font-family: 'Rajdhani',sans-serif;
}

#draftPanel h1 {
    margin-bottom: 24px;
    font-size: 82px;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 700;
    line-height: .9;
    letter-spacing: 4.5px;
    color: #ffffff;
    text-shadow: 0 0 35px rgba(0,140,255,.18);
}

#draftPanel p {
    max-width: 520px;
    margin-bottom: 42px;
    font-size: 20px;
    line-height: 2;
    color: #dcecff;
    font-weight: 300;
}

#btnIrDraft {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    height: 58px;
    padding: 0 34px;
    color: #e8f7ff;
    text-decoration: none;
    font-family: 'Rajdhani',sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 3px;
    border: 1px solid rgba(89,199,255,.55);
    background: linear-gradient( 90deg, rgba(0,170,255,.08), rgba(0,170,255,.2), rgba(0,170,255,.08) );
    box-shadow: 0 0 18px rgba(0,170,255,.16), inset 0 0 20px rgba(0,170,255,.08);
    transition: .25s;
}

#btnIrDraft::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: -1px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(89,199,255,.9), transparent );
}

#btnIrDraft:hover {
    transform: translateX(8px);
    color: #ffffff;
    border-color: rgba(89,199,255,.9);
    box-shadow: 0 0 26px rgba(0,170,255,.32), inset 0 0 24px rgba(0,170,255,.12);
}

/* ======================================== */
/* MINI JUEGOS */
/* ======================================== */

.miniJuegosPagina {
    position: relative;
    width: 100%;
    min-height: 720px;
    padding: 42px clamp(24px, 5vw, 72px) 80px;
    color: #ffffff;
    overflow: hidden;
    background: transparent;
    display: grid;
    justify-items: center;
    align-content: start;
}

.miniJuegosPagina::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 213, 94, .16), transparent 32%),
        radial-gradient(circle at 18% 20%, rgba(118, 76, 255, .18), transparent 28%),
        radial-gradient(circle at 84% 22%, rgba(89, 199, 255, .16), transparent 26%);
}

.miniJuegosHeader,
.miniJuegosGrid,
.miniJuegosArcadeLayout {
    position: relative;
    z-index: 1;
}

.miniJuegosHeader {
    width: min(760px, 100%);
    margin: 0 auto 22px;
    text-align: center;
}

.miniJuegosHeader h1 {
    position: relative;
    display: inline-block;
    margin: 8px 0 10px;
    color: #ffffff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: clamp(24px, 3.2vw, 46px);
    line-height: 1.25;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow:
        2px 0 0 rgba(255, 68, 210, .52),
        -2px 0 0 rgba(89, 199, 255, .58),
        0 0 18px rgba(88, 191, 255, .34),
        0 0 34px rgba(255, 213, 94, .16);
    animation: miniJuegosArcadePulse 2.6s ease-in-out infinite;
}

.miniJuegosHeader h1::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: -9px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #70ccff, #ffd45e, #ff44d2, transparent);
    box-shadow: 0 0 16px rgba(112, 204, 255, .52);
    animation: miniJuegosArcadeLine 1.8s linear infinite;
}

.miniJuegosHeader p {
    max-width: 600px;
    margin: 0 auto;
    color: #d8e8ff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
}

.miniJuegosGrid {
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
    gap: 16px;
    justify-content: center;
    align-items: start;
}

.miniJuegosArcadeLayout {
    width: min(1000px, 100%);
    display: grid;
    grid-template-columns: minmax(340px, 380px) minmax(420px, 520px);
    gap: 18px;
    justify-content: center;
    align-items: start;
}

.miniJuegoCard {
    overflow: hidden;
    border: 1px solid rgba(89, 199, 255, .28);
    background:
        linear-gradient(145deg, rgba(2, 8, 20, .94), rgba(3, 15, 34, .78)),
        radial-gradient(circle at 50% 0%, rgba(255, 213, 94, .13), transparent 48%);
    box-shadow:
        inset 0 0 28px rgba(89, 199, 255, .06),
        0 18px 38px rgba(0, 0, 0, .32);
    transform: translateZ(0);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.miniJuegosArcadeLayout .miniJuegoCard {
    width: 100%;
}

.miniJuegoCard:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 213, 94, .56);
    box-shadow:
        inset 0 0 28px rgba(89, 199, 255, .08),
        0 20px 40px rgba(0, 0, 0, .36),
        0 0 26px rgba(255, 196, 68, .10);
}

.miniJuegoCover {
    position: relative;
    height: 176px;
    overflow: hidden;
    border-bottom: 1px solid rgba(89, 199, 255, .22);
}

.miniJuegoCover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.1) contrast(1.05);
}

.miniJuegoCover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 30%, rgba(1, 6, 16, .76)),
        radial-gradient(circle at 50% 40%, rgba(89, 199, 255, .12), transparent 54%);
}

.miniJuegoCover span {
    position: absolute;
    left: 18px;
    bottom: 16px;
    z-index: 2;
    color: #70ccff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}

.miniJuegoBody {
    display: grid;
    gap: 0;
    padding: 14px 18px 16px;
}

.miniJuegoBody span {
    color: #70ccff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}

.miniJuegoBody h2 {
    margin: 2px 0 5px;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1;
}

.miniJuegoBody p {
    margin: 0;
    color: #d8e8ff;
    font-size: 13px;
    line-height: 1.42;
    font-weight: 700;
}

.miniJuegoPlayButton {
    min-height: 40px;
    border: 1px solid rgba(255, 213, 94, .78);
    background: linear-gradient(90deg, rgba(255, 196, 68, .18), rgba(255, 255, 255, .04), rgba(255, 196, 68, .12));
    color: #ffd45e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
    cursor: pointer;
}

@keyframes miniJuegosArcadePulse {
    0%,
    100% {
        text-shadow:
            2px 0 0 rgba(255, 68, 210, .52),
            -2px 0 0 rgba(89, 199, 255, .58),
            0 0 18px rgba(88, 191, 255, .34),
            0 0 34px rgba(255, 213, 94, .16);
        transform: translateY(0);
    }

    50% {
        text-shadow:
            3px 0 0 rgba(255, 68, 210, .68),
            -3px 0 0 rgba(89, 199, 255, .74),
            0 0 24px rgba(88, 191, 255, .52),
            0 0 46px rgba(255, 213, 94, .24);
        transform: translateY(-1px);
    }
}

@keyframes miniJuegosArcadeLine {
    0% {
        opacity: .58;
        transform: scaleX(.82);
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }

    100% {
        opacity: .58;
        transform: scaleX(.82);
    }
}

.miniJuegoPlayButton:hover {
    color: #ffffff;
    border-color: rgba(255, 231, 148, .96);
    box-shadow: 0 0 24px rgba(255, 196, 68, .18);
}

.starfallRankingPanel {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    border: 2px solid rgba(42, 172, 255, .78);
    background:
        linear-gradient(145deg, rgba(2, 5, 16, .96), rgba(5, 6, 24, .92)),
        radial-gradient(circle at 50% 4%, rgba(89, 199, 255, .16), transparent 34%),
        repeating-linear-gradient(0deg, rgba(112, 204, 255, .03) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(90deg, rgba(179, 59, 255, .025) 0 1px, transparent 1px 14px);
    box-shadow:
        inset 0 0 0 1px rgba(179, 59, 255, .38),
        inset 0 0 32px rgba(89, 199, 255, .07),
        0 18px 38px rgba(0, 0, 0, .32);
    padding: 14px 18px 14px;
}

.starfallRankingPanel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(112, 204, 255, .08), transparent);
    opacity: .65;
    animation: starfallRankingScan 3.4s linear infinite;
}

.starfallRankingHeader {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    text-align: center;
}

.starfallRankingHeader span,
.starfallRankingHeader small {
    display: block;
    color: #70ccff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.starfallRankingHeader h2 {
    margin: 7px 0 12px;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    line-height: .94;
    text-shadow:
        3px 0 0 rgba(255, 68, 210, .42),
        -3px 0 0 rgba(89, 199, 255, .50),
        0 0 18px rgba(112, 204, 255, .32);
}

.starfallRankingHeader h2 b,
.starfallRankingHeader h2 strong {
    display: block;
    font-weight: 900;
}

.starfallRankingHeader h2 b {
    color: #8ae9ff;
    font-size: clamp(28px, 3vw, 38px);
}

.starfallRankingHeader h2 strong {
    margin-top: 6px;
    color: #d64cff;
    font-size: clamp(28px, 2.8vw, 36px);
}

.starfallRankingHeader small {
    color: #ffd45e;
    font-size: 9px;
    letter-spacing: 2px;
}

.starfallRankingRefreshBox {
    min-height: 44px;
    display: grid;
    grid-template-columns: 62px 1fr;
    align-items: center;
    gap: 0;
    margin: 0 0 10px;
    border: 2px solid rgba(179, 59, 255, .74);
    background:
        linear-gradient(90deg, rgba(179, 59, 255, .12), rgba(0, 0, 0, .08)),
        rgba(4, 8, 26, .72);
    box-shadow: inset 0 0 18px rgba(179, 59, 255, .08);
    padding: 6px 10px;
    text-align: left;
}

.starfallRankingRefreshBox i {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border: 2px solid #ffd45e;
    color: #ffd45e;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 14px;
    font-style: normal;
    text-shadow: 0 0 10px rgba(255, 213, 94, .45);
}

.starfallRankingRefreshBox i::before {
    content: "";
    position: absolute;
    top: -8px;
    width: 30px;
    height: 8px;
    border: 2px solid #ffd45e;
    border-bottom: 0;
}

.starfallRankingRefreshBox i::after {
    content: "";
    position: absolute;
    bottom: -11px;
    width: 26px;
    height: 8px;
    border-top: 2px solid #ffd45e;
    box-shadow: 0 5px 0 rgba(255, 213, 94, .9);
}

.starfallRankingRefreshBox em {
    color: #8ae9ff;
    font-style: normal;
}

.starfallRankingList {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    gap: 6px;
    margin: 0;
    min-height: 0;
    border: 2px solid rgba(179, 59, 255, .82);
    box-shadow:
        inset 0 0 0 1px rgba(179, 59, 255, .26),
        inset 0 0 24px rgba(179, 59, 255, .08);
    padding: 10px;
    list-style: none;
}

.starfallRankingItem,
.starfallRankingState {
    min-height: 38px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(89, 199, 255, .16);
    background: rgba(4, 9, 27, .66);
    padding: 6px 8px;
}

.starfallRankingState {
    grid-template-columns: 1fr;
    justify-items: center;
    color: #d8e8ff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}

.starfallRankingPosition {
    display: grid;
    place-items: center;
    min-height: 26px;
    border: 1px solid rgba(255, 255, 255, .22);
    color: #70ccff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 10px;
    line-height: 1;
}

.starfallRankingName {
    min-width: 0;
}

.starfallRankingName strong {
    display: block;
    overflow: hidden;
    color: #ffffff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.starfallRankingName span {
    display: block;
    margin-top: 3px;
    color: rgba(112, 204, 255, .86);
    font-family: 'Rajdhani', sans-serif;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}

.starfallRankingScore {
    color: #ffd45e;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 9px;
    grid-column: 2;
    text-align: left;
    text-shadow: 0 0 14px rgba(255, 213, 94, .35);
}

.starfallRankingTop1,
.starfallRankingTop2,
.starfallRankingTop3 {
    min-height: 40px;
}

.starfallRankingTop1 {
    border-color: rgba(255, 213, 94, .72);
    background:
        linear-gradient(90deg, rgba(255, 196, 68, .18), rgba(4, 15, 32, .78)),
        rgba(4, 15, 32, .72);
    box-shadow: inset 0 0 22px rgba(255, 213, 94, .08);
}

.starfallRankingTop1 .starfallRankingPosition {
    border-color: rgba(255, 213, 94, .84);
    color: #ffd45e;
    box-shadow: 0 0 18px rgba(255, 213, 94, .18);
}

.starfallRankingTop2 {
    border-color: rgba(196, 230, 255, .56);
    background: linear-gradient(90deg, rgba(196, 230, 255, .13), rgba(4, 15, 32, .76));
}

.starfallRankingTop3 {
    border-color: rgba(255, 139, 83, .56);
    background: linear-gradient(90deg, rgba(255, 139, 83, .13), rgba(4, 15, 32, .76));
}

.starfallRankingTop2 .starfallRankingPosition {
    color: #cdefff;
    border-color: rgba(196, 230, 255, .7);
}

.starfallRankingTop3 .starfallRankingPosition {
    color: #ff9a5d;
    border-color: rgba(255, 139, 83, .7);
}

.starfallRankingRefreshing .starfallRankingList {
    animation: starfallRankingFresh .62s ease;
}

.starfallRankingRefreshing .starfallRankingHeader {
    animation: starfallRankingHeaderRefresh .62s ease;
}

@keyframes starfallRankingScan {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes starfallRankingHeaderRefresh {
    0% {
        filter: brightness(1);
        transform: translateY(0);
    }

    36% {
        filter: brightness(1.9);
        transform: translateY(-3px);
        text-shadow:
            0 0 16px rgba(55, 218, 255, .85),
            0 0 28px rgba(221, 73, 255, .55);
    }

    100% {
        filter: brightness(1);
        transform: translateY(0);
    }
}

@keyframes starfallRankingFresh {
    0% {
        filter: brightness(1);
        transform: translateY(0);
    }

    35% {
        filter: brightness(1.7);
        transform: translateY(-2px);
        box-shadow:
            inset 0 0 0 1px rgba(179, 59, 255, .4),
            inset 0 0 34px rgba(112, 204, 255, .18),
            0 0 24px rgba(112, 204, 255, .22);
    }

    100% {
        filter: brightness(1);
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .miniJuegosArcadeLayout {
        grid-template-columns: minmax(280px, 380px);
        justify-content: center;
    }

    .starfallRankingPanel {
        min-height: 0;
    }
}

.nexusStarfallModal {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: none;
    padding: 18px;
    overflow: hidden;
}

.nexusStarfallModalActivo {
    display: block;
}

.nexusStarfallOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 5, 15, .9);
    backdrop-filter: blur(16px);
}

.nexusStarfallPanel {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(100vh - 36px);
    border: 1px solid rgba(255, 213, 94, .58);
    background:
        linear-gradient(145deg, rgba(1, 5, 14, .98), rgba(2, 14, 32, .94)),
        radial-gradient(circle at 50% 0%, rgba(89, 199, 255, .14), transparent 54%);
    box-shadow:
        0 0 48px rgba(0, 0, 0, .58),
        inset 0 0 34px rgba(89, 199, 255, .06);
    overflow: hidden;
}

.nexusStarfallClose {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 5;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(89, 199, 255, .48);
    background: rgba(3, 13, 28, .92);
    color: #70ccff;
    cursor: pointer;
}

.nexusStarfallTopbar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 4;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 68px 10px 22px;
    background: linear-gradient(180deg, rgba(1, 6, 16, .86), rgba(1, 6, 16, .18));
    pointer-events: none;
}

.nexusStarfallModeLabel {
    display: none;
}

.nexusStarfallTopbar span,
.nexusStarfallTopbar strong {
    color: #70ccff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}

.nexusStarfallTopbar h2 {
    margin: 3px 0 0;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 30px;
    line-height: 1;
}

.nexusStarfallCanvasWrap {
    width: 100%;
    height: 100%;
}

#nexusStarfallCanvas {
    width: 100%;
    height: 100%;
    display: block;
    background: #020714;
}
/* ======================================== */
/* DRAFT ESTANDARTES */
/* ======================================== */

#paginaDraft {
    overflow: hidden;
}

#draftPanel {
    z-index: 4;
}

#draftEstandartes {
    position: absolute;
    left: 510px;
    top: 260px;
    width: 620px;
    height: 560px;
    z-index: 2;
    pointer-events: none;
}

.draftBanner {
    position: absolute;
    top: 0;
    width: 285px;
    height: auto;
    opacity: 0;
    object-fit: contain;
    filter:
        drop-shadow(0 0 14px rgba(0,170,255,.28))
        drop-shadow(0 0 42px rgba(0,140,255,.16));
    will-change: transform, opacity;
}

.draftBannerRojo {
    left: 0;
    transform: translateY(-260px) rotate(-6deg) scale(.92);
}

.draftBannerAzul {
    left: 245px;
    transform: translateY(-260px) rotate(6deg) scale(.92);
}

.paginaActiva #draftEstandartes .draftBannerRojo {
    animation: caerEstandarteRojo 1.05s cubic-bezier(.18,.86,.22,1.12) .16s forwards;
}

.paginaActiva #draftEstandartes .draftBannerAzul {
    animation: caerEstandarteAzul 1.05s cubic-bezier(.18,.86,.22,1.12) .54s forwards;
}

@keyframes caerEstandarteRojo {

    0% {
        opacity: 0;
        transform: translateY(-310px) rotate(-8deg) scale(.9);
    }

    68% {
        opacity: 1;
        transform: translateY(160px) rotate(-3deg) scale(1.03);
    }

    84% {
        opacity: 1;
        transform: translateY(132px) rotate(-5deg) scale(1);
    }

    100% {
        opacity: 1;
        transform: translateY(145px) rotate(-4deg) scale(1);
    }
}

@keyframes caerEstandarteAzul {

    0% {
        opacity: 0;
        transform: translateY(-310px) rotate(8deg) scale(.9);
    }

    68% {
        opacity: 1;
        transform: translateY(188px) rotate(3deg) scale(1.03);
    }

    84% {
        opacity: 1;
        transform: translateY(160px) rotate(5deg) scale(1);
    }

    100% {
        opacity: 1;
        transform: translateY(174px) rotate(4deg) scale(1);
    }
}
/* ======================================== */
/* PAGINAS PENDIENTES */
/* ======================================== */

.paginaPendiente {
    position: relative;
    width: 650px;
    max-width: 100%;
    z-index: 5;
}

.paginaPendiente::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient( transparent, rgba(0,170,255,.34), transparent );
    box-shadow: 0 0 18px rgba(0,170,255,.22);
}

.pendienteMiniText {
    margin-bottom: 18px;
    font-size: 14px;
    letter-spacing: 6px;
    color: #58bfff;
    font-family: 'Rajdhani',sans-serif;
}

.paginaPendiente h1 {
    margin-bottom: 24px;
    font-size: 82px;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 700;
    line-height: .9;
    letter-spacing: 4.5px;
    color: #ffffff;
    text-shadow: 0 0 35px rgba(0,140,255,.18);
}

.paginaPendiente p {
    max-width: 520px;
    font-size: 20px;
    line-height: 2;
    color: #dcecff;
    font-weight: 300;
}

/* ======================================== */
/* COACH */
/* ======================================== */

.coachPagina {
    min-height: 720px;
    padding: 58px clamp(28px, 5vw, 88px);
    color: #ffffff;
}

.coachContentBloqueado {
    display: none;
}

.coachHeader {
    max-width: 760px;
    margin-bottom: 28px;
}

.coachHeader h1,
.coachLocked h1 {
    margin: 10px 0 12px;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(58px, 8vw, 108px);
    line-height: .86;
    letter-spacing: 5px;
    text-shadow: 0 0 28px rgba(88, 191, 255, .22);
}

.coachHeader p,
.coachLocked p {
    max-width: 720px;
    margin: 0;
    color: #d8e8ff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}

.coachLocked {
    min-height: 520px;
    display: grid;
    align-content: center;
}

.coachLockedOculto {
    display: none;
}

.coachGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.coachEmptyState {
    margin-top: 20px;
    width: min(520px, 100%);
    min-height: 86px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(89, 199, 255, .24);
    background: rgba(2, 8, 20, .68);
    color: #70ccff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.coachEmptyStateOculto {
    display: none;
}

.coachCard {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(89, 199, 255, .24);
    background:
        linear-gradient(145deg, rgba(2, 8, 20, .92), rgba(3, 15, 34, .76)),
        radial-gradient(circle at 50% 0%, rgba(255, 213, 94, .13), transparent 48%);
    box-shadow:
        inset 0 0 28px rgba(89, 199, 255, .05),
        0 18px 36px rgba(0, 0, 0, .28);
}

.coachCard::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 1px solid rgba(255, 213, 94, .42);
    pointer-events: none;
}

.coachPhoto {
    height: 230px;
    min-height: 230px;
    display: grid;
    place-items: center;
    border-bottom: 1px solid rgba(89, 199, 255, .2);
    overflow: hidden;
}

.coachPhoto span {
    width: 108px;
    height: 108px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 213, 94, .74);
    border-radius: 50%;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 3px;
    background: rgba(0, 0, 0, .34);
    box-shadow: 0 0 30px rgba(255, 213, 94, .18);
}

.coachPhoto img {
    width: 100%;
    height: 100%;
    max-height: 230px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.coachPhotoCustom {
    background:
        radial-gradient(circle at 50% 42%, rgba(89, 199, 255, .26), transparent 42%),
        linear-gradient(145deg, rgba(7, 40, 78, .72), rgba(1, 8, 18, .96));
}

.coachPhotoBlue {
    background:
        radial-gradient(circle at 50% 42%, rgba(89, 199, 255, .35), transparent 42%),
        linear-gradient(145deg, rgba(7, 40, 78, .82), rgba(1, 8, 18, .96));
}

.coachPhotoGold {
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 213, 94, .38), transparent 42%),
        linear-gradient(145deg, rgba(72, 45, 6, .82), rgba(1, 8, 18, .96));
}

.coachPhotoRed {
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 68, 68, .34), transparent 42%),
        linear-gradient(145deg, rgba(78, 12, 18, .82), rgba(1, 8, 18, .96));
}

.coachCardBody {
    padding: 20px;
}

.coachIdentity {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.coachIdentity span,
.coachPrice span,
.coachPrice small {
    color: #70ccff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
}

#contenidoPrincipal .coachIdentity h2 {
    margin: 4px 0 0;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
}

.coachIdentity strong {
    min-width: 86px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 213, 94, .58);
    color: #ffd45e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
}

.coachCountry {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: #d8e8ff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 2px;
}

.coachFlag {
    width: 34px;
    height: 22px;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, .42);
    box-shadow: 0 0 12px rgba(0, 0, 0, .28);
}

.coachFlagChile {
    background:
        linear-gradient(90deg, #0039a6 0 34%, transparent 34%),
        linear-gradient(#ffffff 0 50%, #d52b1e 50% 100%);
}

.coachFlagArgentina {
    background: linear-gradient(#74acdf 0 33%, #ffffff 33% 66%, #74acdf 66% 100%);
}

.coachFlagPeru {
    background: linear-gradient(90deg, #d91023 0 33%, #ffffff 33% 66%, #d91023 66% 100%);
}

.coachFlagColombia {
    background: linear-gradient(#fcd116 0 50%, #003893 50% 75%, #ce1126 75% 100%);
}

.coachFlagMexico {
    background: linear-gradient(90deg, #006847 0 33%, #ffffff 33% 66%, #ce1126 66% 100%);
}

.coachFlagGeneric {
    background:
        linear-gradient(135deg, rgba(89,199,255,.88), rgba(255,213,94,.86)),
        #09223d;
}

.coachCardBody p {
    min-height: 96px;
    margin: 0 0 16px;
    color: #d8e8ff;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 700;
}

.coachServices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.coachServices span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(89, 199, 255, .26);
    color: #bde9ff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    background: rgba(4, 15, 32, .7);
}

.coachServiceCount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    min-height: 38px;
    margin-bottom: 14px;
    padding: 0 12px;
    border: 1px solid rgba(89, 199, 255, .2);
    background: rgba(4, 15, 32, .56);
}

.coachServiceCount span {
    color: #70ccff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}

.coachServiceCount strong {
    color: #ffd45e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px;
    line-height: 1;
}

.coachPrice {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(89, 199, 255, .18);
}

.coachPrice strong {
    color: #ffd45e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 34px;
    line-height: 1;
}

.coachServiceButton {
    width: 100%;
    min-height: 38px;
    margin-top: 8px;
    border: 1px solid rgba(255, 213, 94, .78);
    background: linear-gradient(90deg, rgba(255, 196, 68, .18), rgba(255, 255, 255, .04), rgba(255, 196, 68, .12));
    color: #ffd45e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
    cursor: pointer;
}

.coachServiceButton:hover {
    color: #ffffff;
    border-color: rgba(255, 231, 148, .96);
    box-shadow: 0 0 22px rgba(255, 196, 68, .16);
}

.coachContactModal {
    position: fixed;
    inset: 0;
    z-index: 12160;
    display: none;
    padding: 18px;
    overflow: hidden;
}

.coachContactModalActivo {
    display: flex;
}

.coachContactOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 5, 15, .84);
    backdrop-filter: blur(14px);
}

.coachContactPanel {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: min(460px, calc(100vw - 36px));
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 213, 94, .64);
    background:
        linear-gradient(145deg, rgba(2, 8, 20, .96), rgba(3, 15, 34, .90)),
        radial-gradient(circle at 50% 0%, rgba(89, 199, 255, .14), transparent 54%);
    box-shadow:
        0 0 42px rgba(0, 0, 0, .56),
        inset 0 0 32px rgba(89, 199, 255, .06);
    padding: 22px;
}

.coachContactCerrar {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(89, 199, 255, .42);
    background: rgba(3, 13, 28, .92);
    color: #70ccff;
    cursor: pointer;
}

.coachContactPanel h2 {
    margin: 6px 38px 18px 0;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 34px;
    line-height: 1;
    letter-spacing: 1px;
}

.coachContactDatos {
    display: grid;
    gap: 5px;
    margin-bottom: 12px;
    padding: 10px;
    border-left: 2px solid rgba(89, 199, 255, .45);
    background: rgba(89, 199, 255, .06);
}

.coachContactDatos span {
    color: #70ccff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}

.coachContactDatos strong {
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px;
    line-height: 1;
}

.coachContactPanel p {
    margin: 14px 0 18px;
    color: #d8e8ff;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 700;
}

.coachContactWhatsappLink {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 213, 94, .78);
    background: linear-gradient(90deg, rgba(255, 196, 68, .18), rgba(255, 255, 255, .04), rgba(255, 196, 68, .12));
    color: #ffd45e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
    text-decoration: none;
}

.coachContactWhatsappDisabled {
    opacity: .45;
    cursor: not-allowed;
}

.coachTermsModal {
    position: fixed;
    inset: 0;
    z-index: 12180;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.coachTermsModalActivo {
    display: flex;
}

.coachTermsOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 5, 15, .82);
    backdrop-filter: blur(12px);
}

.coachTermsPanel {
    position: relative;
    z-index: 2;
    width: min(540px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 213, 94, .64);
    background: linear-gradient(145deg, rgba(2, 8, 20, .96), rgba(3, 15, 34, .9));
    box-shadow:
        0 0 42px rgba(0, 0, 0, .56),
        inset 0 0 32px rgba(89, 199, 255, .06);
    padding: 20px 24px;
}

.coachTermsMini {
    color: #70ccff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4.5px;
}

.coachTermsPanel h2 {
    margin: 6px 0 12px;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 1px;
}

.coachTermsScroll {
    max-height: min(46vh, 390px);
    overflow-y: auto;
    padding: 2px 14px 2px 0;
    scrollbar-color: rgba(112, 204, 255, .72) rgba(4, 15, 32, .72);
}

.coachTermsScroll::-webkit-scrollbar {
    width: 8px;
}

.coachTermsScroll::-webkit-scrollbar-track {
    background: rgba(4, 15, 32, .72);
}

.coachTermsScroll::-webkit-scrollbar-thumb {
    background: rgba(112, 204, 255, .72);
}

.coachTermsPanel p,
.coachTermsPanel li {
    color: #d8e8ff;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
}

.coachTermsPanel ol {
    margin: 16px 0 0;
    padding-left: 22px;
}

.coachTermsPanel li {
    margin-bottom: 9px;
}

.coachTermsPanel strong {
    color: #ffffff;
}

.coachTermsRemember {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    color: #bde9ff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    cursor: pointer;
}

.coachTermsRemember input {
    width: 15px;
    height: 15px;
    accent-color: #70ccff;
    cursor: pointer;
}

.coachTermsActions {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 14px;
}

.coachTermsActions button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(255, 213, 94, .72);
    background: linear-gradient(90deg, rgba(255, 196, 68, .18), rgba(255, 255, 255, .04), rgba(255, 196, 68, .12));
    color: #ffd45e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    cursor: pointer;
}

.coachTermsActions button:last-child {
    border-color: rgba(89, 199, 255, .28);
    color: #9fb4c8;
    background: rgba(4, 15, 32, .72);
}

.coachTermsActions button:hover {
    border-color: rgba(255, 231, 148, .96);
    color: #ffffff;
}

.miniJuegosContentBloqueado {
    display: none;
}

.miniJuegosTermsPanel {
    width: min(860px, calc(100vw - 48px));
}

.miniJuegosTermsScroll {
    max-height: min(58vh, 560px);
}

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

@media (max-width: 1180px) {
    .coachGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .coachPagina {
        padding: 42px 18px;
    }

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

    .coachCardBody p {
        min-height: 0;
    }
}

/* ======================================== */
/* WORLD CHAMPIONSHIP */
/* ======================================== */

.worldChampionshipPanel {
    position: relative;
    width: min(1180px, 96vw);
    min-height: min(52vw, 560px);
    margin: 18px auto 0;
    display: grid;
    place-items: center;
}

.worldChampionshipFrame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 0 28px rgba(255, 199, 67, .2));
}

.worldChampionshipText {
    position: relative;
    width: min(620px, 58%);
    margin-top: 18px;
    text-align: center;
    z-index: 2;
}

.worldChampionshipText .pendienteMiniText {
    margin-bottom: 14px;
    color: #ffd65a;
}

.worldChampionshipText h1 {
    margin: 0 0 20px;
    font-size: clamp(42px, 5vw, 72px);
    line-height: .9;
    letter-spacing: 5px;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    text-shadow: 0 0 34px rgba(255, 210, 76, .18);
}

.worldChampionshipText p {
    margin: 0 auto 20px;
    max-width: 560px;
    font-size: 18px;
    line-height: 1.8;
    color: #dfe8f5;
    font-weight: 500;
}

.worldChampionshipText strong {
    display: inline-block;
    border: 1px solid rgba(255, 211, 87, .75);
    padding: 12px 28px;
    color: #ffd65a;
    font-size: 13px;
    letter-spacing: 5px;
    background: rgba(255, 211, 87, .08);
}

body.modoWorldChampionship #sidebar,
body.modoWorldChampionship #fondo,
body.modoWorldChampionship #lineaVertical,
body.modoWorldChampionship #circuloHUD {
    display: none;
}

body.modoWorldChampionship #contenedor {
    display: block;
}

body.modoWorldChampionship #contenidoPrincipal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    padding: 0;
    overflow: hidden;
    z-index: 40;
}

.worldChampionshipScene {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #050403;
    overflow: hidden;
}

.worldBackgroundVideo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .96;
    pointer-events: none;
}

.worldSceneShade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 46%, rgba(255, 188, 70, .06), transparent 32%),
        linear-gradient(90deg, rgba(0, 0, 0, .46), transparent 34%, transparent 66%, rgba(0, 0, 0, .46)),
        linear-gradient(180deg, rgba(0, 0, 0, .28), transparent 48%, rgba(0, 0, 0, .68));
    pointer-events: none;
}

.worldReturnButton {
    position: absolute;
    top: 28px;
    left: 30px;
    z-index: 3;
    min-width: 168px;
    min-height: 46px;
    border: 1px solid rgba(255, 213, 96, .88);
    background: rgba(5, 5, 5, .54);
    color: #ffe17d;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(255, 178, 45, .18);
}

.worldReturnButton:hover {
    background: rgba(255, 213, 96, .14);
    box-shadow: 0 0 28px rgba(255, 198, 65, .32);
}

.worldMediaControls {
    position: absolute;
    top: 28px;
    right: 30px;
    z-index: 4;
    display: flex;
    gap: 10px;
}

.worldMediaButton {
    width: 48px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 213, 96, .88);
    background: rgba(5, 5, 5, .54);
    color: #ffe17d;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(255, 178, 45, .18);
}

.worldMediaButton:hover {
    background: rgba(255, 213, 96, .14);
    box-shadow: 0 0 28px rgba(255, 198, 65, .32);
}

.worldMediaButton.mediaOff {
    color: #7f8a99;
    border-color: rgba(126, 143, 163, .62);
    box-shadow: none;
}

.worldCountdownPanel {
    position: absolute;
    left: 50%;
    top: 7vh;
    z-index: 3;
    width: min(560px, calc(100vw - 48px));
    transform: translateX(-50%);
    padding: 16px 18px 18px;
    border: 1px solid rgba(255, 211, 92, .64);
    background:
        linear-gradient(135deg, rgba(5, 7, 12, .48), rgba(13, 4, 4, .3)),
        radial-gradient(circle at 50% 0%, rgba(255, 39, 39, .16), transparent 48%);
    box-shadow:
        0 0 28px rgba(255, 190, 51, .14),
        inset 0 0 24px rgba(0, 0, 0, .52);
    text-align: center;
    backdrop-filter: blur(2px);
}

.worldCountdownPanel::before,
.worldCountdownPanel::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 216, 100, .86));
}

.worldCountdownPanel::before {
    left: -46px;
}

.worldCountdownPanel::after {
    right: -46px;
    transform: rotate(180deg);
}

.worldCountdownLabel {
    margin-bottom: 12px;
    color: #ffd76b;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 4.5px;
    text-shadow: 0 0 18px rgba(255, 188, 48, .34);
}

.worldCountdownGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.worldCountdownUnit {
    min-height: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(95, 191, 255, .32);
    background: rgba(2, 10, 22, .48);
}

.worldCountdownUnit strong {
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 38px;
    line-height: .9;
    letter-spacing: 2px;
    text-shadow:
        0 0 18px rgba(255, 220, 112, .36),
        0 6px 16px rgba(0, 0, 0, .58);
}

.worldCountdownUnit span {
    margin-top: 8px;
    color: #63d7ff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}

.worldFloatingRelic {
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 2;
    width: min(16vw, 230px);
    min-width: 138px;
    transform: translate(-50%, -50%);
    filter:
        drop-shadow(0 0 20px rgba(255, 22, 22, .46))
        drop-shadow(0 22px 30px rgba(0, 0, 0, .62));
    opacity: .94;
    animation: worldRelicFloat 4.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes worldRelicFloat {
    0%,
    100% {
        transform: translate(-50%, -50%) translateY(-7px) scale(.98);
        filter:
            drop-shadow(0 0 18px rgba(255, 24, 24, .4))
            drop-shadow(0 22px 30px rgba(0, 0, 0, .62));
    }

    50% {
        transform: translate(-50%, -50%) translateY(10px) scale(1.02);
        filter:
            drop-shadow(0 0 34px rgba(255, 28, 28, .64))
            drop-shadow(0 30px 36px rgba(0, 0, 0, .72));
    }
}

.worldSceneIntro {
    position: absolute;
    left: 50%;
    bottom: 3.5vh;
    z-index: 2;
    width: min(760px, calc(100vw - 48px));
    transform: translateX(-50%);
    text-align: center;
    color: #ffffff;
}

.worldSceneMini {
    margin-bottom: 16px;
    color: #ffd86a;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 8px;
    text-shadow: 0 0 18px rgba(255, 192, 62, .36);
}

.worldSceneIntro h1 {
    margin: 0 0 18px;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(56px, 8vw, 112px);
    line-height: .84;
    letter-spacing: 6px;
    text-shadow:
        0 0 30px rgba(255, 209, 95, .24),
        0 8px 30px rgba(0, 0, 0, .72);
}

.worldSceneIntro p {
    max-width: 640px;
    margin: 0 auto;
    color: #e9edf5;
    font-size: 20px;
    line-height: 1.6;
    font-weight: 600;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .72);
}

/* ======================================== */

.worldInscriptionFrame {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: min(675px, 54vw);
    aspect-ratio: 1695 / 928;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    background: url("../img/marco-inscripcion-world.png") center / contain no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 0 28px rgba(255, 206, 88, .28));
}

.worldInscriptionButton {
    position: relative;
    z-index: 2;
    min-height: 44px;
    min-width: min(390px, 42vw);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 2.8%;
    border: 0;
    background: transparent;
    color: #ffe7a3;
    font-family: "Archeologicaps", Georgia, 'Times New Roman', serif;
    font-size: clamp(19px, 1.55vw, 27px);
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: none;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, .94),
        0 0 16px rgba(255, 213, 96, .34);
}
.worldInscriptionButton:hover {
    color: #ffffff;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, .94),
        0 0 22px rgba(255, 231, 148, .48);
}

.worldInscriptionButton.worldActionBlocked,
.worldViewTournamentButton.worldActionBlocked,
.worldInscriptionButton:disabled,
.worldViewTournamentButton:disabled {
    opacity: .42;
    cursor: not-allowed;
    filter: grayscale(.45);
    box-shadow: none;
}

.worldInscriptionButton.worldActionBlocked:hover,
.worldViewTournamentButton.worldActionBlocked:hover,
.worldInscriptionButton:disabled:hover,
.worldViewTournamentButton:disabled:hover {
    color: inherit;
    border-color: rgba(99, 215, 255, .36);
    text-shadow:
        0 2px 0 rgba(0, 0, 0, .94),
        0 0 10px rgba(255, 213, 96, .18);
}

.worldAccessHidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.worldLoginTournamentModal {
    position: fixed;
    inset: 0;
    z-index: 15120;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.worldLoginTournamentModalActivo {
    display: flex;
}

.worldLoginTournamentOverlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 4, 14, .8);
    backdrop-filter: blur(9px);
}

.worldLoginTournamentPanel {
    position: relative;
    width: min(470px, 100%);
    padding: 34px 28px 28px;
    border: 1px solid rgba(99, 215, 255, .56);
    background: linear-gradient(160deg, rgba(3, 10, 28, .96), rgba(7, 21, 42, .94));
    box-shadow: 0 0 42px rgba(99, 215, 255, .2), inset 0 0 28px rgba(255, 213, 94, .08);
    text-align: center;
}

.worldLoginTournamentClose {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .05);
    color: #ffffff;
    cursor: pointer;
}

.worldLoginTournamentPanel span {
    display: block;
    color: #70ccff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
}

.worldLoginTournamentPanel h2 {
    margin: 12px 0 10px;
    color: #ffd86a;
    font-family: 'Rajdhani', sans-serif;
    font-size: 34px;
    line-height: 1;
    letter-spacing: 2px;
}

.worldLoginTournamentPanel p {
    margin: 0 auto 22px;
    color: #dcecff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    line-height: 1.4;
}

.worldLoginTournamentAction {
    min-width: 190px;
    min-height: 44px;
    border: 1px solid rgba(255, 213, 94, .74);
    background: rgba(255, 213, 94, .1);
    color: #ffd86a;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 10px;
    cursor: pointer;
}
#worldInscripcionConfirmar {
    min-height: 44px;
    width: 100%;
    border: 1px solid rgba(255,213,94,.64);
    background: rgba(255,196,68,.08);
    color: #ffd55e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
}

#worldInscripcionConfirmar:disabled {
    opacity: .48;
    cursor: not-allowed;
}

#worldInscripcionConfirmar:not(:disabled):hover {
    border-color: rgba(255,231,148,.95);
    color: #ffffff;
    box-shadow: 0 0 22px rgba(255,196,68,.16);
}

.worldViewTournamentButton {
    position: absolute;
    right: 32px;
    bottom: 96px;
    z-index: 4;
    min-height: 48px;
    min-width: 260px;
    border: 1px solid rgba(99, 215, 255, .78);
    background:
        linear-gradient(135deg, rgba(99, 215, 255, .18), rgba(4, 13, 26, .62)),
        rgba(5, 5, 5, .66);
    color: #8fe6ff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 3px;
    cursor: pointer;
    box-shadow:
        0 0 28px rgba(99, 215, 255, .18),
        inset 0 0 20px rgba(99, 215, 255, .08);
}

.worldViewTournamentButton:hover {
    color: #ffffff;
    border-color: rgba(255, 231, 148, .9);
    box-shadow: 0 0 34px rgba(99, 215, 255, .28);
}

@media (max-width: 760px) {
    .worldInscriptionFrame {
        width: min(390px, 72vw);
        top: 48%;
    }

    .worldInscriptionButton {
        min-height: 34px;
        min-width: min(255px, 51vw);
        gap: 0;
        font-size: 13px;
        letter-spacing: 2px;
    }

    
    .worldViewTournamentButton {
        left: 50%;
        right: auto;
        bottom: 78px;
        width: min(320px, calc(100vw - 36px));
        min-width: 0;
        transform: translateX(-50%);
        font-size: 17px;
        letter-spacing: 3px;
    }
}
/* CONTACTO */
/* ======================================== */

#paginaContacto {
    position: relative;
    z-index: 5;
}

#paginaSorteo {
    position: relative;
    z-index: 5;
}

.contactoHero {
    position: relative;
    width: min(100%, 760px);
    margin-bottom: 44px;
}

.contactoHero::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(transparent, rgba(0,170,255,.34), transparent);
    box-shadow: 0 0 18px rgba(0,170,255,.22);
}

.contactoHero h1 {
    margin-bottom: 22px;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 82px;
    line-height: .9;
    letter-spacing: 4.5px;
    text-shadow:
        0 0 32px rgba(0,140,255,.22),
        0 0 8px rgba(255,255,255,.08);
}

.contactoHero p {
    max-width: 660px;
    color: #dcecff;
    font-size: 20px;
    line-height: 1.75;
    font-weight: 300;
}

.contactoRedes {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 18px;
    width: min(100%, 900px);
}

.contactoRed {
    position: relative;
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: 16px;
    min-height: 92px;
    padding: 15px 18px;
    border: 1px solid rgba(89,199,255,.34);
    background:
        linear-gradient(135deg, rgba(0,170,255,.16), rgba(2,12,32,.78) 58%, rgba(255,205,84,.06)),
        rgba(2,10,26,.52);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    color: #ffffff;
    text-decoration: none;
    box-shadow:
        inset 0 0 24px rgba(0,170,255,.10),
        0 0 18px rgba(0,60,130,.16);
    overflow: hidden;
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

.contactoRed::before {
    content: "";
    position: absolute;
    inset: -70% -40%;
    background: linear-gradient(115deg, transparent 34%, rgba(89,199,255,.22), transparent 66%);
    transform: translateX(-70%) rotate(8deg);
    opacity: 0;
}

.contactoRed:hover {
    transform: translateY(-5px);
    border-color: rgba(143,222,255,.90);
    box-shadow:
        inset 0 0 28px rgba(0,170,255,.18),
        0 0 26px rgba(0,170,255,.34),
        0 0 12px rgba(255,205,84,.14);
}

.contactoRed:hover::before {
    opacity: 1;
    animation: barridoEnergia 1s ease-in-out;
}

.contactoIcono {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(89,199,255,.34);
    background: radial-gradient(circle, rgba(89,199,255,.22), rgba(0,24,54,.72));
    box-shadow: 0 0 16px rgba(0,170,255,.20);
}

.contactoIcono img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(89,199,255,.48));
}

.contactoIconoTexto {
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 0 12px rgba(89,199,255,.55);
}

.contactoRed span:last-child {
    position: relative;
    z-index: 1;
}

.contactoRed strong {
    display: block;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 2.6px;
}

.contactoRed small {
    display: block;
    margin-top: 6px;
    color: #58bfff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.contactoInstagram {
    border-color: rgba(255,91,190,.34);
}

.contactoTikTok {
    border-color: rgba(89,255,244,.34);
}

.contactoYoutube {
    border-color: rgba(255,70,70,.40);
}

.contactoTwitch {
    border-color: rgba(168,112,255,.42);
}

.contactoDiscord {
    border-color: rgba(122,145,255,.42);
}

.contactoWsp {
    border-color: rgba(45,255,133,.36);
}

.contactoCorreo {
    border-color: rgba(255,205,84,.38);
}

/* ======================================== */
/* SORTEO */
/* ======================================== */

.sorteoHero {
    position: relative;
    width: min(100%, 760px);
    margin-bottom: 38px;
}

.sorteoHero::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(255,205,84,.85), transparent);
    box-shadow: 0 0 18px rgba(255,205,84,.48);
}

.sorteoHero h1 {
    margin-bottom: 22px;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 82px;
    line-height: .9;
    letter-spacing: 4.5px;
    text-transform: uppercase;
    text-shadow: 0 0 22px rgba(255,205,84,.35);
}

.sorteoHero p {
    max-width: 660px;
    color: #dcecff;
    font-size: 20px;
    line-height: 1.7;
    font-weight: 300;
}

.sorteoResumen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    width: min(100%, 1060px);
    margin-bottom: 26px;
    padding: 22px 26px;
    border: 1px solid rgba(255,205,84,.44);
    background: linear-gradient(135deg, rgba(4,13,28,.82), rgba(7,23,46,.62));
    box-shadow:
        inset 0 0 34px rgba(0,170,255,.08),
        0 0 34px rgba(255,205,84,.10);
}

.sorteoResumenTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.sorteoResumenInfo {
    min-width: 0;
}

#sorteoMesEtiqueta,
.sorteoCountdownBox span {
    display: block;
    margin-bottom: 8px;
    color: #59c7ff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 4px;
}

.sorteoResumen strong {
    display: block;
    color: #ffcd54;
    font-family: 'Rajdhani',sans-serif;
    font-size: 38px;
    line-height: 1;
    letter-spacing: 2px;
    text-shadow: 0 0 18px rgba(255,205,84,.42);
}

.sorteoCountdownBox {
    min-width: 188px;
    padding: 12px 16px;
    border: 1px solid rgba(89,199,255,.26);
    background: rgba(0,15,35,.54);
    text-align: center;
}

.sorteoCountdownBox strong {
    color: #ffffff;
    font-size: 30px;
    letter-spacing: 1px;
    white-space: nowrap;
}

.sorteoResumen p {
    max-width: 640px;
    margin-top: 10px;
    color: rgba(220,236,255,.86);
    font-size: 16px;
    line-height: 1.55;
}

.sorteoResumen p b {
    display: block;
    margin-bottom: 4px;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 18px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.sorteoResumen p span {
    display: block;
}

.sorteoStats {
    display: grid;
    grid-template-columns: repeat(3, 96px);
    gap: 10px;
}

.sorteoStats span {
    display: grid;
    place-items: center;
    min-height: 74px;
    border: 1px solid rgba(89,199,255,.26);
    background: rgba(0,15,35,.54);
    color: #9edfff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-align: center;
}

.sorteoStats strong {
    color: #ffffff;
    font-size: 30px;
}

.sorteoGrid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 24px;
    width: min(100%, 1180px);
}

.sorteoForm,
.sorteoListaPanel {
    border: 1px solid rgba(89,199,255,.28);
    background: rgba(3,13,29,.72);
    box-shadow:
        inset 0 0 28px rgba(0,170,255,.08),
        0 0 24px rgba(0,20,45,.35);
}

.sorteoForm {
    display: grid;
    gap: 13px;
    align-content: start;
    padding: 22px;
}

.sorteoForm label {
    color: #8fddff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.4px;
}

.sorteoForm input[type="text"],
.sorteoForm input[type="url"],
.sorteoForm input[type="file"] {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid rgba(89,199,255,.30);
    background: rgba(0,10,25,.82);
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
    outline: none;
}

.sorteoSteamLookup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 8px;
}

.sorteoSteamLookup button {
    min-height: 46px;
    font-size: 13px;
    letter-spacing: 1.4px;
}

.sorteoSteamMsg {
    min-height: 18px;
    color: rgba(158,223,255,.76);
    font-size: 12px;
    line-height: 1.35;
}

.sorteoForm input[type="file"] {
    color: rgba(220,236,255,.76);
    font-size: 13px;
}

.sorteoPreview {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(89,199,255,.22);
    background: rgba(0,10,25,.58);
    overflow: hidden;
}

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

.sorteoPreview span {
    color: rgba(220,236,255,.48);
    font-family: 'Rajdhani',sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 3px;
}

.sorteoPagoOpciones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(89,199,255,.24);
    background: rgba(0,10,25,.52);
}

.sorteoPagoOpciones legend {
    padding: 0 8px;
    color: #8fddff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2.4px;
}

.sorteoPagoOpcion {
    position: relative;
    min-height: 118px;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 12px 8px;
    border: 1px solid rgba(89,199,255,.22);
    background: linear-gradient(180deg, rgba(89,199,255,.08), rgba(0,10,25,.76));
    cursor: pointer;
    text-align: center;
    overflow: hidden;
}

.sorteoPagoOpcion::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    pointer-events: none;
}

.sorteoPagoOpcion input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sorteoPagoIcono {
    width: 54px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.sorteoPagoIcono img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(89,199,255,.18));
}

.sorteoPagoTexto {
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
}

.sorteoPagoOpcion i {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255,213,94,.58);
    background: rgba(0,10,25,.70);
}

.sorteoPagoOpcion input:checked ~ i {
    background: #ffd45e;
    box-shadow: 0 0 18px rgba(255,213,94,.38);
}

.sorteoPagoOpcion input:checked ~ i::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #07101e;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.sorteoPagoOpcion:has(input:checked) {
    border-color: rgba(255,213,94,.84);
    background: linear-gradient(180deg, rgba(255,196,68,.16), rgba(0,10,25,.78));
    box-shadow: inset 0 0 24px rgba(255,196,68,.10), 0 0 18px rgba(255,196,68,.10);
}

.sorteoPagoOpcion:has(input:checked)::before {
    border-color: rgba(255,213,94,.24);
}

.sorteoPagoOpcion:hover {
    border-color: rgba(89,199,255,.52);
}

.sorteoPagoOpciones label {
    color: #8fddff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.4px;
}

@media (max-width: 700px) {
    .sorteoPagoOpciones {
        grid-template-columns: 1fr;
    }
}

.sorteoForm button,
.sorteoListaHeader button {
    min-height: 46px;
    border: 1px solid rgba(255,205,84,.70);
    background: linear-gradient(180deg, rgba(95,70,16,.82), rgba(38,26,8,.86));
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 2px;
    cursor: pointer;
    text-shadow: 0 0 10px rgba(255,205,84,.45);
}

.sorteoForm button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

#sorteoFormMsg {
    min-height: 22px;
    color: rgba(220,236,255,.78);
    font-size: 13px;
    line-height: 1.45;
}

.sorteoListaPanel {
    padding: 22px;
}

.sorteoListaHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.sorteoListaHeader h2 {
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 38px;
    line-height: 1;
    letter-spacing: 2px;
}

.sorteoListaHeader button {
    min-width: 130px;
    padding: 0 18px;
    font-size: 14px;
}

.sorteoWinner {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid rgba(255,205,84,.72);
    background: rgba(70,45,5,.42);
    color: #ffdf7d;
    font-family: 'Rajdhani',sans-serif;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sorteoLista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 14px;
}

.sorteoJuego,
.sorteoVacio {
    border: 1px solid rgba(89,199,255,.24);
    background: rgba(0,15,35,.58);
}

.sorteoJuego {
    position: relative;
    overflow: hidden;
}

.sorteoJuego img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.sorteoJuegoInfo {
    min-height: 96px;
    padding: 12px;
}

.sorteoJuegoInfo strong {
    display: block;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 20px;
    line-height: 1.05;
    letter-spacing: 1px;
}

.sorteoJuegoInfo span,
.sorteoJuegoInfo small {
    display: block;
    margin-top: 7px;
    color: #72d3ff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.sorteoJuegoInfo small {
    color: rgba(220,236,255,.58);
}

.sorteoJuego.eliminated {
    filter: grayscale(.82);
    opacity: .52;
}

.sorteoJuego.eliminated::after,
.sorteoJuego.active::after {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 8px;
    border: 1px solid currentColor;
    background: rgba(0,7,18,.82);
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.sorteoJuego.active::after {
    content: "ACTIVO";
    color: #70ffb7;
}

.sorteoJuego.eliminated::after {
    content: "ELIMINADO";
    color: #ff6f8d;
}

.sorteoVacio {
    grid-column: 1 / -1;
    padding: 28px;
    color: rgba(220,236,255,.74);
    font-family: 'Rajdhani',sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-align: center;
}

@media (max-width: 980px) {

    .sorteoResumen,
    .sorteoGrid {
        grid-template-columns: 1fr;
    }

    .sorteoStats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {

    .sorteoHero h1 {
        font-size: 54px;
    }

    .sorteoResumen,
    .sorteoForm,
    .sorteoListaPanel {
        padding: 18px;
    }

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

    .sorteoListaHeader {
        align-items: stretch;
        flex-direction: column;
    }

    .sorteoResumenTop {
        align-items: stretch;
        flex-direction: column;
    }

    .sorteoCountdownBox {
        min-width: 0;
        width: 100%;
    }

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

    .sorteoListaHeader button {
        width: 100%;
    }
}
/* ======================================== */
/* ENCUENTROS FIXTURE */
/* ======================================== */

#paginaEncuentros {
    position: relative;
    z-index: 5;
}

#encuentrosHeader {
    position: relative;
    width: 760px;
    max-width: 100%;
    margin-bottom: 54px;
}

#encuentrosHeader::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient( transparent, rgba(0,170,255,.34), transparent );
    box-shadow: 0 0 18px rgba(0,170,255,.22);
}

.encuentrosMiniText {
    margin-bottom: 18px;
    font-size: 14px;
    letter-spacing: 6px;
    color: #58bfff;
    font-family: 'Rajdhani',sans-serif;
}

#encuentrosHeader h1 {
    margin-bottom: 22px;
    font-size: 82px;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 700;
    line-height: .9;
    letter-spacing: 4.5px;
    color: #ffffff;
    text-shadow: 0 0 35px rgba(0,140,255,.18);
}

#encuentrosHeader p {
    max-width: 560px;
    font-size: 20px;
    line-height: 1.8;
    color: #dcecff;
    font-weight: 300;
}

#listaEncuentros {
    position: relative;
    width: 860px;
    max-width: 100%;
}

#paginaPlayoff {
    position: relative;
    z-index: 5;
}

#playoffHeader {
    position: relative;
    width: 760px;
    max-width: 100%;
    margin-bottom: 54px;
}

#playoffHeader::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #58bfff, transparent);
}

.playoffMiniText {
    margin-bottom: 18px;
    font-size: 14px;
    letter-spacing: 6px;
    color: #58bfff;
    font-family: 'Rajdhani',sans-serif;
}

#playoffHeader h1 {
    margin-bottom: 22px;
    font-size: 82px;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 700;
    line-height: .9;
    color: #ffffff;
    text-shadow: 0 0 24px rgba(88,191,255,.42);
}

#playoffHeader p {
    max-width: 560px;
    font-size: 20px;
    line-height: 1.8;
    color: #dcecff;
    font-weight: 300;
}

#playoffSection {
    position: relative;
    width: min(1320px, 100%);
    margin-left: clamp(40px, 5vw, 130px);
    padding: 8px 0 38px;
    background: transparent;
}

.playoffTopTitle {
    display: grid;
    justify-items: center;
    gap: 0;
    margin: -6px auto 52px;
    color: #f4c84d;
    font-family: 'Rajdhani',sans-serif;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 10px;
    text-transform: uppercase;
    text-shadow:
        0 0 14px rgba(255,255,255,.36),
        0 0 22px rgba(255,196,54,.72),
        0 0 34px rgba(0,151,255,.32);
}

.playoffTopTitle img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 14px rgba(0,151,255,.95))
        drop-shadow(0 0 20px rgba(255,203,68,.38));
}

.playoffBracket {
    position: relative;
    z-index: 2;
    min-height: 650px;
    font-family: 'Rajdhani',sans-serif;
}

.playoffStage {
    position: absolute;
    color: #76c7ff;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(0,145,255,.72);
}

.playoffStage::after {
    content: "";
    display: block;
    width: 240px;
    height: 2px;
    margin-top: 10px;
    background: linear-gradient(90deg, transparent, rgba(255,205,66,.92), transparent);
    box-shadow: 0 0 12px rgba(255,195,41,.7);
}

.playoffStageQuarters {
    left: 52px;
    top: 0;
}

.playoffStageSemis {
    left: 485px;
    top: 0;
}

.playoffStageFinal {
    left: 960px;
    top: 0;
}

.playoffCard {
    position: absolute;
    display: grid;
    grid-template-columns: 68px 1fr;
    align-items: center;
    width: 300px;
    min-height: 78px;
    padding: 8px 24px 8px 18px;
    color: #f2f7ff;
    background:
        linear-gradient(135deg, rgba(4,13,37,.96), rgba(2,21,55,.9)),
        linear-gradient(90deg, rgba(0,151,255,.24), transparent);
    border: 2px solid rgba(0,151,255,.92);
    clip-path: polygon(0 18px, 18px 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px));
    box-shadow:
        inset 0 0 22px rgba(0,151,255,.16),
        0 0 18px rgba(0,151,255,.56),
        0 0 2px rgba(255,213,86,.92);
    animation: playoffCardPulse 4.2s ease-in-out infinite;
}

.playoffCard::before,
.playoffCard::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.playoffCard::before {
    inset: 5px;
    border: 1px solid rgba(100,210,255,.38);
    clip-path: inherit;
    box-shadow:
        inset 0 0 12px rgba(255,255,255,.08),
        0 0 9px rgba(0,151,255,.26);
    animation: playoffInnerBorder 3.4s ease-in-out infinite;
}

.playoffCard::after {
    left: 16px;
    right: 16px;
    bottom: -2px;
    height: 3px;
    background: linear-gradient(90deg, #f6c94c, #ffffff 18%, transparent 34%, #0aa8ff 70%, #ffffff);
    background-size: 220% 100%;
    box-shadow: 0 0 12px rgba(0,168,255,.82), 0 0 18px rgba(255,203,68,.38);
    animation: playoffEdgeScan 2.8s linear infinite;
}

.playoffCard img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(0,151,255,.8));
}

.playoffCard strong {
    justify-self: center;
    color: #f3f6ff;
    font-size: 54px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-shadow: 0 0 12px rgba(255,255,255,.55);
}

.playoffCardQ1 strong,
.playoffCardQ2 strong,
.playoffCardQ3 strong,
.playoffCardQ4 strong,
.playoffCardS2 strong,
.playoffCardS4 strong {
    font-size: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
}


.playoffCard .playoffTeamNameSmall {
    font-size: 24px !important;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
}
.playoffGold {
    border-color: rgba(255,203,68,.96);
    box-shadow:
        inset 0 0 22px rgba(255,203,68,.13),
        0 0 18px rgba(0,151,255,.46),
        0 0 14px rgba(255,203,68,.42);
    animation-name: playoffGoldPulse;
}

.playoffCrown {
    justify-self: center;
    color: #f5ca4e;
    font-size: 46px;
    line-height: 1;
    text-shadow: 0 0 15px rgba(255,203,68,.85);
}

.playoffWinner {
    grid-template-columns: 68px 1fr;
}

.playoffWinner span {
    justify-self: center;
    color: #19aaff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.playoffWinner strong {
    grid-column: 2;
    margin-top: -10px;
    font-size: 34px;
}

.playoffFinalBlue span {
    color: #19aaff;
    text-shadow: 0 0 12px rgba(25,170,255,.78);
}

.playoffFinalRed span {
    color: #ff3448;
    text-shadow: 0 0 12px rgba(255,52,72,.78);
}

.playoffDuel,
.playoffFinalVs {
    position: absolute;
    color: #13a8ff;
    font-size: 36px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    text-shadow: 0 0 16px rgba(19,168,255,.92);
}

.playoffDirect {
    position: absolute;
    color: #f4c84d;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(255,203,68,.58);
    white-space: nowrap;
}

.playoffMatchDate {
    position: absolute;
    left: 78px;
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    width: 188px;
    min-height: 44px;
    padding: 5px 12px 5px 8px;
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(4,13,37,.96), rgba(4,24,58,.92)) padding-box,
        linear-gradient(90deg, #ff3f81, #ffd34d, #43f06f, #28c9ff, #a756ff, #ff3f81) border-box;
    border: 2px solid transparent;
    clip-path: polygon(0 12px, 12px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
    box-shadow:
        0 0 16px rgba(40,201,255,.58),
        0 0 18px rgba(255,63,129,.32),
        inset 0 0 18px rgba(255,255,255,.08);
    font-family: 'Rajdhani',sans-serif;
    z-index: 3;
    animation: playoffRainbowGlow 3.2s linear infinite;
}

.playoffMatchDate span {
    color: #ffd34d;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-shadow: 0 0 12px rgba(255,211,77,.9);
}


.playoffMatchDate .playoffFullDate {
    font-size: 15px;
    letter-spacing: 0;
}
.playoffMatchDate strong {
    color: #eaf8ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(40,201,255,.8);
}

.playoffMatchDateTop {
    top: 38px;
}

.playoffMatchDateBottom {
    top: 346px;
}
.playoffMatchDateSemiTop {
    left: 508px;
    top: 38px;
}

.playoffMatchDateSemiBottom {
    left: 508px;
    top: 304px;
}




.playoffCardQ1 {
    left: 0;
    top: 78px;
}

.playoffDuelTop {
    left: 138px;
    top: 174px;
}

.playoffCardQ2 {
    left: 0;
    top: 220px;
}

.playoffCardQ3 {
    left: 0;
    top: 386px;
}

.playoffDuelBottom {
    left: 138px;
    top: 482px;
}

.playoffCardQ4 {
    left: 0;
    top: 528px;
}

.playoffDirectTop {
    left: 472px;
    top: 34px;
}

.playoffCardS1 {
    left: 430px;
    top: 84px;
}


.playoffDuelSemiTop {
    left: 562px;
    top: 167px;
}

.playoffDuelSemiBottom {
    left: 562px;
    top: 438px;
}
.playoffCardS2 {
    left: 430px;
    top: 202px;
}

.playoffDirectBottom {
    left: 480px;
    top: 315px;
}

.playoffCardS3 {
    left: 430px;
    top: 350px;
}

.playoffCardS4 {
    left: 430px;
    top: 473px;
}

.playoffCardF1 {
    left: 830px;
    top: 136px;
}

.playoffFinalVs {
    left: 965px;
    top: 272px;
}

.playoffCardF2 {
    left: 830px;
    top: 403px;
}

.playoffChampion {
    position: absolute;
    left: 1165px;
    top: 198px;
    display: grid;
    justify-items: center;
    align-content: center;
    width: 145px;
    min-height: 190px;
    padding: 16px;
    color: #f4c84d;
    background: linear-gradient(160deg, rgba(7,14,36,.98), rgba(0,20,52,.94));
    border: 2px solid rgba(255,203,68,.95);
    clip-path: polygon(0 24px, 24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px));
    box-shadow:
        inset 0 0 24px rgba(255,203,68,.15),
        0 0 26px rgba(255,203,68,.44);
    animation: playoffGoldPulse 4.2s ease-in-out infinite;
}

.playoffChampion img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(255,203,68,.82));
}

.playoffChampion strong {
    margin-top: 14px;
    font-size: 25px;
    line-height: 1;
    text-transform: uppercase;
}

.playoffChampion span {
    margin-top: 8px;
    color: #f7d76d;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 3px;
}

.playoffLine {
    position: absolute;
    z-index: 1;
    background: #8fd8ff;
    border-radius: 2px;
    box-shadow:
        0 0 10px rgba(255,255,255,.9),
        0 0 20px rgba(0,151,255,.92),
        0 0 32px rgba(255,203,68,.25);
    animation: playoffEnergy 2.8s ease-in-out infinite;
}

.playoffLine::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
    filter: blur(5px);
    opacity: .58;
}

.playoffLineQTopA { left: 300px; top: 117px; width: 42px; height: 4px; }
.playoffLineQTopB { left: 300px; top: 259px; width: 42px; height: 4px; }
.playoffLineQTopC { left: 338px; top: 117px; width: 4px; height: 146px; }
.playoffLineQTopD { left: 338px; top: 225px; width: 92px; height: 4px; }
.playoffLineQBottomA { left: 300px; top: 425px; width: 42px; height: 4px; }
.playoffLineQBottomB { left: 300px; top: 567px; width: 42px; height: 4px; }
.playoffLineQBottomC { left: 338px; top: 425px; width: 4px; height: 146px; }
.playoffLineQBottomD { left: 338px; top: 496px; width: 92px; height: 4px; }
.playoffLineSemiA { left: 730px; top: 123px; width: 4px; height: 105px; }
.playoffLineSemiB { left: 730px; top: 175px; width: 100px; height: 4px; }
.playoffLineSemiC { left: 730px; top: 389px; width: 4px; height: 107px; }
.playoffLineSemiD { left: 730px; top: 442px; width: 100px; height: 4px; }
.playoffLineFinalA { left: 1130px; top: 175px; width: 4px; height: 268px; }
.playoffLineFinalB { left: 1130px; top: 292px; width: 35px; height: 4px; }



@keyframes playoffRainbowGlow {
    0%, 100% {
        filter: hue-rotate(0deg) brightness(1);
    }

    50% {
        filter: hue-rotate(55deg) brightness(1.2);
    }
}

@keyframes playoffEnergy {
    0%, 100% {
        opacity: .72;
        filter: brightness(1);
    }

    50% {
        opacity: 1;
        filter: brightness(1.55);
    }
}

@keyframes playoffEdgeScan {
    0% {
        background-position: 120% 0;
        opacity: .72;
    }

    50% {
        opacity: 1;
    }

    100% {
        background-position: -120% 0;
        opacity: .82;
    }
}

@keyframes playoffInnerBorder {
    0%, 100% {
        border-color: rgba(100,210,255,.26);
        box-shadow: inset 0 0 12px rgba(255,255,255,.06), 0 0 9px rgba(0,151,255,.22);
    }

    50% {
        border-color: rgba(255,255,255,.62);
        box-shadow: inset 0 0 16px rgba(255,255,255,.14), 0 0 15px rgba(0,151,255,.48);
    }
}

@keyframes playoffCardPulse {
    0%, 100% {
        border-color: rgba(0,151,255,.78);
        box-shadow: inset 0 0 22px rgba(0,151,255,.13), 0 0 16px rgba(0,151,255,.44), 0 0 2px rgba(255,213,86,.7);
    }

    50% {
        border-color: rgba(255,255,255,.86);
        box-shadow: inset 0 0 26px rgba(255,255,255,.1), 0 0 24px rgba(0,151,255,.74), 0 0 16px rgba(255,203,68,.28);
    }
}

@keyframes playoffGoldPulse {
    0%, 100% {
        border-color: rgba(255,203,68,.88);
        box-shadow: inset 0 0 22px rgba(255,203,68,.12), 0 0 18px rgba(0,151,255,.42), 0 0 13px rgba(255,203,68,.36);
    }

    50% {
        border-color: rgba(255,255,255,.92);
        box-shadow: inset 0 0 28px rgba(255,203,68,.2), 0 0 24px rgba(255,255,255,.24), 0 0 22px rgba(255,203,68,.62);
    }
}

.encuentroItem {
    position: relative;
    display: grid;
    grid-template-columns: 200px 1fr 200px 170px;
    align-items: center;
    gap: 42px;
    min-height: 275px;
    padding: 34px 0 46px;
}

.encuentroItem::before {
    content: "";
    position: absolute;
    left: 70px;
    right: 70px;
    top: 50%;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(89,199,255,.48), transparent );
    box-shadow: 0 0 18px rgba(0,170,255,.28);
    z-index: -1;
}

.equipoSlot {
    position: relative;
    height: 215px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.equipoSlot::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: 165px;
    height: 18px;
    transform: translateX(-50%);
    background: radial-gradient( ellipse, rgba(0,170,255,.26), rgba(0,170,255,.08) 48%, transparent 72% );
    filter: blur(4px);
}

.equipoLogo {
    position: relative;
    z-index: 2;
    width: 178px;
    height: 170px;
    max-width: 178px;
    max-height: 170px;
    object-fit: contain;
    --logo-scale: 1;
    filter: drop-shadow(0 0 14px rgba(0,170,255,.24)) drop-shadow(0 0 34px rgba(0,140,255,.12));
    animation: flotarEquipo 6s ease-in-out infinite;
}

.equipoSlotDer .equipoLogo {
    animation-delay: .4s;
}

.encuentroCentro {
    position: relative;
    text-align: center;
    padding: 18px 10px;
}

.encuentroCentro::before,
.encuentroCentro::after {
    content: "";
    position: absolute;
    top: 18px;
    width: 1px;
    height: calc(100% - 36px);
    background: linear-gradient( transparent, rgba(89,199,255,.48), transparent );
    box-shadow: 0 0 14px rgba(0,170,255,.22);
}

.encuentroCentro::before {
    left: -18px;
}

.encuentroCentro::after {
    right: -18px;
}

.encuentroEstado {
    margin-bottom: 10px;
    font-size: 14px;
    letter-spacing: 4.5px;
    color: rgba(89,199,255,.72);
    font-family: 'Rajdhani',sans-serif;
}

.encuentroVS {
    margin-bottom: 12px;
    font-size: 54px;
    line-height: .9;
    letter-spacing: 4.5px;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 700;
    text-shadow: 0 0 28px rgba(0,170,255,.28);
}

.encuentroFecha {
    margin-bottom: 6px;
    font-size: 18px;
    letter-spacing: 4.5px;
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 700;
}

.encuentroHora {
    font-size: 15px;
    letter-spacing: 3px;
    color: #dcecff;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 500;
}

@keyframes flotarEquipo {

    0% {
        transform: translateY(0px) scale(var(--logo-scale));
    }

    50% {
        transform: translateY(-9px) scale(var(--logo-scale));
    }

    100% {
        transform: translateY(0px) scale(var(--logo-scale));
    }
}
.resultadoSlot {
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 28px;
}

.resultadoSlot::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 1px;
    height: calc(100% - 36px);
    background: linear-gradient( transparent, rgba(89,199,255,.5), transparent );
    box-shadow: 0 0 14px rgba(0,170,255,.22);
}

.resultadoLabel {
    margin-bottom: 10px;
    font-size: 14px;
    letter-spacing: 4.5px;
    color: rgba(89,199,255,.72);
    font-family: 'Rajdhani',sans-serif;
}

.resultadoEstado {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    letter-spacing: 3px;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 700;
    text-shadow: 0 0 18px rgba(0,170,255,.24);
}

.resultadoLogo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(0,170,255,.35));
    transform: scale(var(--logo-scale));
}
/* ======================================== */
/* AJUSTE VISUAL LOGOS EQUIPOS */
/* ======================================== */

.equipoLogo1 {
    --logo-scale: 1.18;
}

.equipoLogo2 {
    --logo-scale: 1.28;
}

.equipoLogo3 {
    --logo-scale: 1.08;
}

.equipoLogo4 {
    --logo-scale: 1.02;
}

.equipoLogo5 {
    --logo-scale: 1.08;
}

.equipoLogo6 {
    --logo-scale: 1.02;
}

.equipoLogo7 {
    --logo-scale: 1.04;
}

.equipoLogo8 {
    --logo-scale: .92;
}

.equipoLogo9 {
    --logo-scale: 1.12;
}

.equipoLogo10 {
    --logo-scale: 1.1;
}
/* ======================================== */
/* SIDE TAGS ENCUENTROS */
/* ======================================== */

.sideTag {
    position: absolute;
    top: 4px;
    left: 50%;
    z-index: 4;
    min-width: 118px;
    transform: translateX(-50%);
    padding: 6px 12px 5px;
    text-align: center;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
    line-height: 1;
    background: rgba(3,12,28,.34);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.08);
    text-shadow: 0 0 12px currentColor;
}

.sideTag::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: .85;
}

.sideTagBlue {
    color: #59c7ff;
    border-color: rgba(89,199,255,.34);
    box-shadow: 0 0 18px rgba(0,170,255,.16), inset 0 0 16px rgba(0,170,255,.06);
}

.sideTagRed {
    color: #ff4d6d;
    border-color: rgba(255,77,109,.34);
    box-shadow: 0 0 18px rgba(255,77,109,.16), inset 0 0 16px rgba(255,77,109,.06);
}
.encuentrosFrase {
    margin-top: 18px;
    font-size: 18px;
    font-weight: 400;
    color: #70ccff;
    letter-spacing: 4.5px;
    font-family: 'Rajdhani',sans-serif;
    text-shadow: 0 0 18px rgba(0,140,255,.16);
}
/* ======================================== */
/* EQUIPOS ROSTER */
/* ======================================== */

#paginaEquipos {
    position: relative;
    z-index: 5;
}

#equiposHeader {
    position: relative;
    width: 760px;
    max-width: 100%;
    margin-bottom: 54px;
}

#equiposHeader::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient( transparent, rgba(0,170,255,.34), transparent );
    box-shadow: 0 0 18px rgba(0,170,255,.22);
}

.equiposMiniText {
    margin-bottom: 18px;
    font-size: 14px;
    letter-spacing: 6px;
    color: #58bfff;
    font-family: 'Rajdhani',sans-serif;
}

#equiposHeader h1,
#equipoDetalleHeader h2 {
    margin-bottom: 22px;
    font-size: 82px;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 700;
    line-height: .9;
    letter-spacing: 4.5px;
    color: #ffffff;
    text-shadow: 0 0 35px rgba(0,140,255,.18);
}

#equiposHeader p,
#equipoDetalleHeader p {
    max-width: 560px;
    font-size: 20px;
    line-height: 1.8;
    color: #dcecff;
    font-weight: 300;
}

#equiposVistaLista {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    align-items: flex-start;
    gap: 30px 34px;
    z-index: 5;
    width: min(100%, 1180px);
}

.equipoCard {
    position: relative;
    width: 100%;
    min-height: 230px;
    padding: 18px 0 22px;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
}

.equipoCardGlow {
    position: absolute;
    left: 50%;
    bottom: 58px;
    width: 145px;
    height: 20px;
    transform: translateX(-50%);
    background: radial-gradient( ellipse, rgba(0,170,255,.28), rgba(0,170,255,.08) 48%, transparent 72% );
    filter: blur(5px);
}

.equipoCardLogo {
    position: relative;
    z-index: 2;
    width: 150px;
    height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(0,170,255,.26)) drop-shadow(0 0 42px rgba(0,140,255,.14));
    animation: flotarEquipo 6s ease-in-out infinite;
    transition: .25s;
}

.equipoCardNombre {
    display: block;
    margin-top: 14px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffffff;
    text-shadow: 0 0 18px rgba(0,170,255,.2);
}

.equipoCard:hover .equipoCardLogo {
    transform: translateY(-8px) scale(1.04);
}

.equipoCard:hover .equipoCardNombre {
    color: #59c7ff;
}

#equipoDetalle {
    position: relative;
    z-index: 5;
    width: 980px;
    max-width: 100%;
}

.equipoDetalleOculto {
    display: none;
}

#btnVolverEquipos {
    margin-bottom: 34px;
    padding: 12px 18px;
    border: 1px solid rgba(89,199,255,.35);
    background: rgba(0,170,255,.06);
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    cursor: pointer;
    transition: .25s;
}

#btnVolverEquipos:hover {
    transform: translateX(-6px);
    color: #ffffff;
    border-color: rgba(89,199,255,.75);
}

#equipoDetalleHeader {
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: center;
    gap: 48px;
    margin-bottom: 48px;
}

.equipoDetalleLogo {
    width: 210px;
    height: 210px;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(0,170,255,.26)) drop-shadow(0 0 42px rgba(0,140,255,.14));
    animation: flotarEquipo 6s ease-in-out infinite;
}

#rosterVertical {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.playerRow {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr 330px;
    align-items: center;
    gap: 34px;
    min-height: 118px;
    padding: 18px 0;
}

.playerRow::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(89,199,255,.52), transparent);
    box-shadow: 0 0 16px rgba(0,170,255,.24);
}

.playerRole {
    color: #59c7ff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 4.5px;
    text-shadow: 0 0 18px rgba(0,170,255,.26);
}

.playerInfo h3 {
    margin-bottom: 6px;
    font-family: 'Rajdhani',sans-serif;
    font-size: 34px;
    line-height: 1;
    letter-spacing: 2px;
    color: #ffffff;
}

.playerInfo span {
    font-size: 15px;
    letter-spacing: 3px;
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
}

.playerStats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    font-family: 'Rajdhani',sans-serif;
    color: rgba(220,236,255,.75);
    font-size: 14px;
    letter-spacing: 2px;
}

.playerStats strong {
    display: block;
    margin-top: 6px;
    color: #ffffff;
    font-size: 16px;
    letter-spacing: 1.5px;
}
/* ======================================== */
/* TEAM DETAIL PAGE */
/* ======================================== */

.teamPage {
    position: relative;
    z-index: 5;
    width: 980px;
    max-width: 100%;
}

.btnVolverEquipos {
    margin-bottom: 34px;
    padding: 12px 18px;
    border: 1px solid rgba(89,199,255,.35);
    background: rgba(0,170,255,.06);
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    cursor: pointer;
    transition: .25s;
}

.btnVolverEquipos:hover {
    transform: translateX(-6px);
    color: #ffffff;
    border-color: rgba(89,199,255,.75);
}

.teamHero {
    display: grid;
    grid-template-columns: 230px 1fr;
    align-items: center;
    gap: 54px;
    margin-bottom: 54px;
}

.teamLogoBox {
    position: relative;
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.teamLogoBox::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 180px;
    height: 20px;
    transform: translateX(-50%);
    background: radial-gradient( ellipse, rgba(0,170,255,.28), rgba(0,170,255,.08) 48%, transparent 72% );
    filter: blur(5px);
}

.teamLogoGrande {
    position: relative;
    z-index: 2;
    width: 220px;
    height: 220px;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(0,170,255,.26)) drop-shadow(0 0 42px rgba(0,140,255,.14));
    animation: flotarEquipo 6s ease-in-out infinite;
}

.teamIntro h1 {
    margin-bottom: 22px;
    font-size: 72px;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 700;
    line-height: .9;
    letter-spacing: 4.5px;
    color: #ffffff;
    text-shadow: 0 0 35px rgba(0,140,255,.18);
}

.teamIntro p {
    max-width: 560px;
    font-size: 20px;
    line-height: 1.8;
    color: #dcecff;
    font-weight: 300;
}

.teamRoster {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
/* ======================================== */
/* PLAYER ADVANCED STATS */
/* ======================================== */

.playerRowExpanded {
    grid-template-columns: 100px 260px 1fr;
    align-items: start;
    row-gap: 26px;
}

.playerProfileLink {
    display: inline-flex;
    margin-top: 18px;
    padding: 10px 14px;
    border: 1px solid rgba(89,199,255,.35);
    color: #70ccff;
    text-decoration: none;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
    background: rgba(0,170,255,.06);
    transition: .25s;
}

.playerProfileLink:hover {
    transform: translateX(6px);
    color: #ffffff;
    border-color: rgba(89,199,255,.75);
}

.playerStatsExpanded {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    row-gap: 18px;
}

.championPool {
    grid-column: 2 / 4;
    position: relative;
    padding-top: 8px;
}

.championPoolTitle {
    margin-bottom: 16px;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    color: rgba(89,199,255,.78);
}

.championList {
    display: grid;
    grid-template-columns: repeat(4, 180px);
    gap: 18px 22px;
    align-items: stretch;
}

.championItem {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    column-gap: 0;
    width: 180px;
    min-height: 64px;
    padding: 10px 12px;
    border-left: 1px solid rgba(89,199,255,.28);
    background: linear-gradient(90deg, rgba(0,170,255,.07), transparent);
}

.championItem img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 50%;
    filter: drop-shadow(0 0 10px rgba(0,170,255,.24));
}

.championItem span {
    display: block;
    min-width: 0;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

.championItem small {
    display: block;
    grid-column: 2;
    margin-top: -12px;
    color: rgba(220,236,255,.62);
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    white-space: nowrap;
}

.playerBlockSeparated {
    margin-top: 54px;
    padding-top: 54px;
}

.playerBlockSeparated::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(89,199,255,.72), transparent);
    box-shadow: 0 0 18px rgba(0,170,255,.34);
}

.playerBlockSeparated::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: #59c7ff;
    box-shadow: 0 0 8px rgba(89,199,255,.95), 0 0 22px rgba(0,170,255,.55), 0 0 44px rgba(0,140,255,.25);
    animation: pulsoSeparador 2.4s ease-in-out infinite;
}

@keyframes pulsoSeparador {

    0% {
        opacity: .55;
        transform: translateX(-50%) scale(.78);
        box-shadow: 0 0 6px rgba(89,199,255,.55), 0 0 16px rgba(0,170,255,.28);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.18);
        box-shadow: 0 0 10px rgba(89,199,255,1), 0 0 28px rgba(0,170,255,.72), 0 0 58px rgba(0,140,255,.34);
    }

    100% {
        opacity: .55;
        transform: translateX(-50%) scale(.78);
        box-shadow: 0 0 6px rgba(89,199,255,.55), 0 0 16px rgba(0,170,255,.28);
    }
}

/* ======================================== */
/* RANKING TABLE */
/* ======================================== */

#paginaRanking {
    position: relative;
    z-index: 5;
}

.rankingPanel {
    position: relative;
    width: 760px;
    max-width: 100%;
    margin-top: 42px;
    padding-left: 28px;
}

.rankingPanel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(transparent, rgba(89,199,255,.42), transparent);
    box-shadow: 0 0 18px rgba(0,170,255,.22);
}

.rankingHeader,
.rankingRow {
    display: grid;
    grid-template-columns: 70px 1fr 130px;
    align-items: center;
    min-height: 58px;
    column-gap: 18px;
    font-family: 'Rajdhani',sans-serif;
}

.rankingHeader {
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(89,199,255,.24);
    color: rgba(112,204,255,.82);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}

.rankingRow {
    position: relative;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1.5px;
    background: linear-gradient(90deg, rgba(0,170,255,.08), transparent 72%);
    border-left: 1px solid rgba(89,199,255,.28);
}

.rankingRow span {
    padding: 0 12px;
}

.rankingRow span:first-child {
    color: #59c7ff;
    text-shadow: 0 0 14px rgba(0,170,255,.36);
}

.rankingEmpty {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(89,199,255,.18);
    color: rgba(220,236,255,.58);
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}


/* ======================================== */
/* RANKING PARTICLES */
/* ======================================== */

.rankingRow {
    overflow: hidden;
    isolation: isolate;
}

.rankingRow span {
    position: relative;
    z-index: 2;
}

.rankingRow::before,
.rankingRow::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.rankingRow::before {
    width: 46%;
    opacity: .72;
    background:
        radial-gradient(circle at 22% 30%, rgba(255,214,107,.95) 0 2px, transparent 3px),
        radial-gradient(circle at 44% 62%, rgba(255,184,64,.82) 0 1px, transparent 3px),
        radial-gradient(circle at 66% 38%, rgba(255,235,164,.72) 0 1px, transparent 3px),
        radial-gradient(circle at 82% 70%, rgba(255,190,76,.68) 0 2px, transparent 4px);
    filter: drop-shadow(0 0 8px rgba(255,190,76,.55));
    animation: rankingParticulas 3.8s linear infinite;
}

.rankingRow::after {
    width: 34%;
    background: linear-gradient(90deg, transparent, rgba(255,195,76,.20), transparent);
    transform: translateX(-18%);
    animation: rankingBrillo 4.8s ease-in-out infinite;
}

.rankingTop::before {
    width: 52%;
    opacity: .96;
    background:
        radial-gradient(circle at 16% 24%, rgba(255,240,171,1) 0 2px, transparent 4px),
        radial-gradient(circle at 34% 70%, rgba(255,199,73,.96) 0 2px, transparent 4px),
        radial-gradient(circle at 52% 42%, rgba(255,230,126,.88) 0 1px, transparent 3px),
        radial-gradient(circle at 70% 28%, rgba(255,180,56,.80) 0 2px, transparent 4px),
        radial-gradient(circle at 88% 68%, rgba(255,235,166,.72) 0 1px, transparent 3px);
    filter: drop-shadow(0 0 10px rgba(255,205,84,.72)) drop-shadow(0 0 22px rgba(255,170,40,.28));
}

.rankingTop::after {
    background: linear-gradient(90deg, transparent, rgba(255,205,84,.30), rgba(255,240,170,.12), transparent);
}

.rankingMid::before {
    width: 42%;
    opacity: .58;
    background:
        radial-gradient(circle at 26% 36%, rgba(255,205,86,.76) 0 1px, transparent 3px),
        radial-gradient(circle at 54% 68%, rgba(255,168,52,.56) 0 1px, transparent 3px),
        radial-gradient(circle at 78% 30%, rgba(255,225,140,.50) 0 1px, transparent 3px);
    filter: drop-shadow(0 0 7px rgba(255,184,64,.38));
}

.rankingMid::after {
    width: 26%;
    opacity: .72;
    background: linear-gradient(90deg, transparent, rgba(255,178,64,.13), transparent);
}

.rankingLow::before {
    width: 34%;
    opacity: .32;
    background:
        radial-gradient(circle at 30% 32%, rgba(255,203,92,.52) 0 1px, transparent 3px),
        radial-gradient(circle at 62% 66%, rgba(255,170,58,.34) 0 1px, transparent 3px);
    filter: drop-shadow(0 0 5px rgba(255,166,52,.20));
}

.rankingLow::after {
    width: 22%;
    opacity: .42;
    background: linear-gradient(90deg, transparent, rgba(255,178,64,.08), transparent);
}

@keyframes rankingParticulas {

    0% {
        transform: translateX(-26%) translateY(0);
    }

    50% {
        transform: translateX(-6%) translateY(-2px);
    }

    100% {
        transform: translateX(18%) translateY(0);
    }
}

@keyframes rankingBrillo {

    0%, 100% {
        opacity: .28;
        transform: translateX(-20%);
    }

    50% {
        opacity: .82;
        transform: translateX(18%);
    }
}

/* ======================================== */
/* RANKING SPORT UPGRADE */
/* ======================================== */

.rankingStatus {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
    padding: 9px 18px 9px 0;
    color: rgba(255,224,146,.92);
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-shadow: 0 0 16px rgba(255,190,76,.28);
}

.rankingStatus::after {
    content: "";
    position: absolute;
    left: 0;
    right: -42px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,205,84,.70), rgba(89,199,255,.18), transparent);
    box-shadow: 0 0 16px rgba(255,190,76,.20);
}

.rankingHeader,
.rankingRow {
    grid-template-columns: 76px 1fr 150px;
}

.rankingHeader {
    min-height: 46px;
    margin-bottom: 8px;
    border-top: 1px solid rgba(89,199,255,.16);
    border-bottom: 1px solid rgba(89,199,255,.34);
    background: linear-gradient(90deg, rgba(0,170,255,.05), rgba(0,170,255,.02), transparent);
}

.rankingRow {
    min-height: 64px;
    margin-bottom: 8px;
    border-left: 1px solid rgba(89,199,255,.26);
    border-top: 1px solid rgba(89,199,255,.11);
    border-bottom: 1px solid rgba(89,199,255,.18);
    background: linear-gradient(90deg, rgba(0,170,255,.09), rgba(0,16,32,.22) 48%, transparent 86%);
}

.rankingRow::marker {
    display: none;
}

.rankingRow span {
    padding: 0 12px;
}

.rankingPos {
    color: #59c7ff;
    font-size: 24px;
    text-shadow: 0 0 14px rgba(0,170,255,.42);
}

.rankingTeam {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.rankingTeam img {
    position: relative;
    z-index: 2;
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 9px rgba(89,199,255,.32));
}

.rankingTeam strong {
    min-width: 0;
    color: #ffffff;
    font-size: 22px;
    letter-spacing: 1.8px;
    white-space: nowrap;
    text-shadow: 0 0 16px rgba(0,140,255,.18);
}

.rankingPoints {
    justify-self: end;
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0;
    min-width: 98px;
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    text-align: right;
    text-shadow: 0 0 18px rgba(89,199,255,.22);
}

.rankingPoints small {
    color: rgba(112,204,255,.62);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.rankingTop {
    border-left: 2px solid rgba(255,205,84,.72);
    border-bottom-color: rgba(255,205,84,.24);
    background: linear-gradient(90deg, rgba(255,195,76,.11), rgba(0,170,255,.07) 44%, transparent 88%);
    box-shadow: inset 0 0 0 1px rgba(255,205,84,.05), 0 0 18px rgba(255,190,76,.08);
}

.rankingLeader {
    min-height: 78px;
    border-left-color: rgba(255,226,132,.95);
    background: linear-gradient(90deg, rgba(255,205,84,.18), rgba(0,170,255,.09) 42%, transparent 90%);
    box-shadow: inset 0 0 0 1px rgba(255,226,132,.10), 0 0 28px rgba(255,190,76,.14);
}

.rankingLeader .rankingTeam img {
    width: 52px;
    height: 52px;
}

.rankingLeader .rankingTeam strong {
    font-size: 27px;
}

.rankingLeader .rankingPoints {
    font-size: 36px;
    color: #ffe08f;
    text-shadow: 0 0 18px rgba(255,205,84,.42), 0 0 34px rgba(255,170,46,.18);
}

.rankingMedal {
    position: absolute !important;
    left: 44px;
    top: 50%;
    z-index: 3 !important;
    width: 20px;
    height: 20px;
    padding: 0 !important;
    border-radius: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #120a02;
    background: radial-gradient(circle, #fff0a8, #d99a28 72%);
    box-shadow: 0 0 12px rgba(255,205,84,.62);
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.rankingMid {
    border-left-color: rgba(255,205,84,.36);
}

.rankingLow {
    border-left-color: rgba(89,199,255,.22);
}

@media (max-width: 900px) {

    .rankingPanel {
        width: 100%;
        padding-left: 18px;
    }

    .rankingHeader,
    .rankingRow {
        grid-template-columns: 52px 1fr 88px;
        column-gap: 0;
    }

    .rankingTeam img {
        width: 34px;
        height: 34px;
    }

    .rankingTeam strong {
        font-size: 17px;
        white-space: normal;
    }

    .rankingPoints {
        min-width: auto;
        font-size: 23px;
    }

    .rankingPoints small {
        display: none;
    }
}

/* ======================================== */
/* RANKING PARTICLES SMOOTH FIX */
/* ======================================== */

.rankingRow::before {
    left: 0;
    right: auto;
    width: 100%;
    opacity: .72;
    background-size: 360px 100%;
    background-repeat: repeat-x;
    animation: rankingParticulas 7.5s linear infinite;
}

.rankingTop::before {
    width: 100%;
    opacity: .96;
    background-size: 380px 100%;
}

.rankingMid::before {
    width: 100%;
    opacity: .58;
    background-size: 420px 100%;
}

.rankingLow::before {
    width: 100%;
    opacity: .34;
    background-size: 460px 100%;
}

@keyframes rankingParticulas {

    0% {
        background-position: 0 0;
        transform: translateX(0);
    }

    100% {
        background-position: 360px 0;
        transform: translateX(0);
    }
}

/* ======================================== */
/* RANKING TROPHY SIDE */
/* ======================================== */

.rankingStage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(640px, 760px) minmax(260px, 1fr);
    align-items: center;
    column-gap: 78px;
    width: min(1280px, 100%);
}

.rankingTrophy {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
}

.rankingTrophy::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,170,255,.18), rgba(0,90,180,.07) 42%, transparent 70%);
    filter: blur(14px);
}

.rankingTrophy img {
    position: relative;
    z-index: 2;
    width: min(420px, 92%);
    max-height: 520px;
    object-fit: contain;
    opacity: .92;
    filter: drop-shadow(0 0 16px rgba(89,199,255,.34)) drop-shadow(0 0 54px rgba(0,140,255,.18));
    animation: rankingTrophyFloat 6s ease-in-out infinite;
}

@keyframes rankingTrophyFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

@media (max-width: 1180px) {

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

    .rankingTrophy {
        display: none;
    }
}

/* ======================================== */
/* ENCUENTROS POSITION OFFSET */
/* ======================================== */

#listaEncuentros {
    margin-left: clamp(150px, 15vw, 390px);
}

@media (max-width: 1500px) {

    #playoffSection {
        margin-left: 0;
        overflow-x: hidden;
    }

    .playoffBracket {
        width: 1320px;
        transform: scale(.74);
        transform-origin: top left;
        min-height: 550px;
    }
}

@media (max-width: 1180px) {

    #listaEncuentros {
        margin-left: 0;
    }

    #playoffSection {
        margin-left: 0;
    }
}

@media (max-width: 980px) {

    #playoffSection {
        padding: 28px 16px 30px;
        overflow: visible;
    }

    .playoffBracket {
        min-height: auto;
        display: grid;
        gap: 18px;
        width: 100%;
        transform: none;
    }

    .playoffStage,
    .playoffCard,
    .playoffDuel,
    .playoffDirect,
    .playoffMatchDate,
    .playoffFinalVs,
    .playoffChampion {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }

    .playoffStage {
        margin-top: 18px;
        text-align: center;
    }

    .playoffStage::after {
        width: 100%;
    }

    .playoffCard {
        min-height: 72px;
    }

    .playoffCard strong {
        font-size: 42px;
    }

    .playoffCardQ1 strong,
    .playoffCardQ2 strong,
    .playoffCardQ3 strong,
    .playoffCardQ4 strong,
    .playoffCardS2 strong,
    .playoffCardS4 strong {
        font-size: 22px;
    }

    .playoffCardQ1 strong,
    .playoffCardQ2 strong,
    .playoffCardQ3 strong,
    .playoffCardQ4 strong,
    .playoffCardS2 strong,
    .playoffCardS4 strong {
        font-size: 22px;
    }

    .playoffWinner strong {
        font-size: 28px;
    }

    .playoffDuel,
    .playoffFinalVs {
        text-align: center;
    }

    .playoffLine {
        display: none;
    }
}



/* ======================================== */
/* SIDEBAR AUDIO */
/* ======================================== */

.audioToggle {
    width: 100%;
    margin-top: 18px;
    padding: 10px 12px;
    border: 1px solid rgba(89,199,255,.28);
    background: linear-gradient( 90deg, rgba(0,170,255,.08), rgba(255,255,255,.02), rgba(0,170,255,.06) );
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: inset 0 0 18px rgba(0,170,255,.08), 0 0 22px rgba(0,140,255,.08);
    transition: .25s;
}

    .audioToggle:hover {
        color: #ffffff;
        border-color: rgba(89,199,255,.55);
        box-shadow: inset 0 0 20px rgba(0,170,255,.12), 0 0 26px rgba(0,140,255,.16);
    }

#audioVolumeBox {
    width: 100%;
    margin-top: 9px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    row-gap: 5px;
    column-gap: 10px;
    color: rgba(112,204,255,.88);
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

#audioVolumeBox span {
    line-height: 1;
}

#audioVolumeBox strong {
    min-width: 34px;
    color: rgba(220,236,255,.9);
    font-size: 11px;
    line-height: 1;
    text-align: right;
    letter-spacing: 1px;
}

#audioVolumen {
    grid-column: 1 / -1;
    width: 100%;
    height: 16px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    outline: none;
    cursor: pointer;
    --audioNivel: 75%;
}

#audioVolumen::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    border-radius: 30px;
    background: linear-gradient( 90deg, rgba(89,199,255,.95) 0%, rgba(89,199,255,.95) var(--audioNivel), rgba(10,35,58,.72) var(--audioNivel), rgba(10,35,58,.72) 100% );
    border: 1px solid rgba(89,199,255,.22);
    box-shadow: 0 0 14px rgba(0,170,255,.28), inset 0 0 10px rgba(0,170,255,.12);
}

#audioVolumen::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -5px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50%;
    background: #59c7ff;
    border: 1px solid rgba(220,236,255,.85);
    box-shadow: 0 0 10px rgba(89,199,255,.95), 0 0 24px rgba(0,170,255,.55);
}

#audioVolumen::-moz-range-track {
    width: 100%;
    height: 4px;
    border-radius: 30px;
    background: rgba(10,35,58,.72);
    border: 1px solid rgba(89,199,255,.22);
    box-shadow: 0 0 14px rgba(0,170,255,.28), inset 0 0 10px rgba(0,170,255,.12);
}

#audioVolumen::-moz-range-progress {
    height: 4px;
    border-radius: 30px;
    background: rgba(89,199,255,.95);
    box-shadow: 0 0 12px rgba(89,199,255,.65);
}

#audioVolumen::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #59c7ff;
    border: 1px solid rgba(220,236,255,.85);
    box-shadow: 0 0 10px rgba(89,199,255,.95), 0 0 24px rgba(0,170,255,.55);
}

.audioPulse {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #59c7ff;
    box-shadow: 0 0 10px rgba(89,199,255,.95), 0 0 24px rgba(0,170,255,.55);
    animation: pulsoAudio 1.8s ease-in-out infinite;
}

.audioToggle.silenciado {
    color: rgba(215,235,255,.55);
    border-color: rgba(215,235,255,.12);
    background: rgba(255,255,255,.025);
}

    .audioToggle.silenciado .audioPulse {
        background: rgba(215,235,255,.35);
        box-shadow: 0 0 8px rgba(215,235,255,.22);
        animation: none;
    }

@keyframes pulsoAudio {

    0% {
        transform: scale(.82);
        opacity: .55;
    }

    50% {
        transform: scale(1.28);
        opacity: 1;
    }

    100% {
        transform: scale(.82);
        opacity: .55;
    }
}
/* ======================================== */
/* SIDEBAR BRAND */
/* ======================================== */

#sidebarBrand {
    margin-top: auto;
    padding: 12px 0 0 0;
    border-top: 1px solid rgba(89,199,255,.14);
    color: rgba(215,235,255,.76);
    font-family: 'Rajdhani',sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 2px;
    text-shadow: 0 0 14px rgba(0,170,255,.16);
}

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

#contenedor {
    flex-direction: column;
}

#sidebar {
    width: 100%;
    height: 96px;
    padding: 10px 18px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(0,170,255,.16);
    background: linear-gradient( 90deg, rgba(5,10,25,.88), rgba(5,10,25,.54), rgba(5,10,25,.78) );
    overflow-x: auto;
    overflow-y: hidden;
}

#sidebar::-webkit-scrollbar {
    height: 4px;
}

#sidebar::-webkit-scrollbar-track {
    background: rgba(0,170,255,.04);
}

#sidebar::-webkit-scrollbar-thumb {
    background: rgba(89,199,255,.65);
    border-radius: 20px;
}

#logoBox {
    display: grid;
    grid-template-columns: 58px 118px 62px;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 6px;
    min-width: 254px;
    margin: 0;
}

#logoN {
    grid-row: 1 / 3;
    width: 54px;
    height: 54px;
    margin: 0;
    border-radius: 14px;
}

#logoBox h1 {
    grid-column: 2;
    margin: 0;
    font-size: 28px;
    line-height: .9;
    letter-spacing: 4.5px;
}

#logoBox > span {
    grid-column: 2;
    font-size: 9px;
    letter-spacing: 3px;
    white-space: nowrap;
}

#logoBox .audioToggle {
    grid-column: 3;
    grid-row: 1;
    width: 59px;
    margin: 0;
    justify-self: end;
    padding: 5px 6px;
    border-radius: 999px;
    border-color: rgba(89,199,255,.22);
    background: rgba(4,13,28,.42);
    box-shadow: inset 0 0 12px rgba(0,170,255,.05);
}

#audioEstado {
    font-size: 7px;
    letter-spacing: 1px;
    color: inherit;
}

#audioVolumeBox {
    grid-column: 3;
    grid-row: 2;
    width: 59px;
    margin: 0;
    justify-self: end;
    grid-template-columns: auto 1fr auto;
    column-gap: 3px;
    row-gap: 0;
    font-size: 6px;
    letter-spacing: 1px;
    opacity: .9;
}

#audioVolumeBox span {
    grid-column: 1;
    align-self: center;
}

#audioVolumeBox strong {
    grid-column: 3;
    min-width: 18px;
    font-size: 6px;
    align-self: center;
}

#audioVolumen {
    grid-column: 2;
    height: 10px;
}

#audioVolumen::-webkit-slider-runnable-track {
    height: 3px;
    border: 0;
    background: linear-gradient( 90deg, rgba(89,199,255,.9) 0%, rgba(89,199,255,.9) var(--audioNivel), rgba(82,110,132,.28) var(--audioNivel), rgba(82,110,132,.28) 100% );
    box-shadow: 0 0 8px rgba(0,170,255,.18);
}

#audioVolumen::-webkit-slider-thumb {
    width: 10px;
    height: 10px;
    margin-top: -4px;
    box-shadow: 0 0 10px rgba(89,199,255,.72);
}

#audioVolumen::-moz-range-track {
    height: 3px;
    border: 0;
    background: rgba(82,110,132,.28);
    box-shadow: 0 0 8px rgba(0,170,255,.18);
}

#audioVolumen::-moz-range-progress {
    height: 3px;
}

#audioVolumen::-moz-range-thumb {
    width: 10px;
    height: 10px;
}

.menuBoton {
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 7px;
    border-left: 0;
    border-bottom: 1px solid rgba(0,170,255,.22);
    white-space: nowrap;
    font-size: 14px;
    letter-spacing: 1.4px;
}

.nexusGifDownload {
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    margin: 0 4px;
}

.worldChampionshipMenu {
    flex: 0 0 205px;
    width: 205px;
    height: 54px;
    min-width: 205px;
    min-height: 58px;
    margin: 0 18px 0 auto;
    padding: 0 30px;
    border-bottom: 0;
}

.worldChampionshipMenu:hover {
    transform: translateY(-3px);
}

.worldChampionshipMenu:hover::before {
    filter:
        drop-shadow(0 0 12px rgba(255, 224, 122, .45))
        drop-shadow(0 0 24px rgba(255, 166, 31, .22));
}

.worldChampionshipMenu:hover span {
    color: #fff6c8;
}

.accountMenuCluster {
    flex: 0 0 auto;
    margin-left: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.accountResourceStack {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

#btnLogin {
    position: relative;
    margin-left: 0;
    padding: 11px 18px;
    border: 1px solid rgba(255,196,68,.78);
    border-bottom-color: rgba(255,196,68,.78);
    color: #ffd45e;
    overflow: hidden;
    box-shadow: inset 0 0 18px rgba(255,196,68,.08), 0 0 18px rgba(255,196,68,.10);
    clip-path: polygon(0 0, calc(100% - 26px) 0, calc(100% - 26px) 14px, 100% 14px, 100% 100%, 0 100%);
}

#btnLogin::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 1px;
    background:
        linear-gradient( 90deg, transparent, #ffd45e, transparent ) top left / 46% 2px no-repeat,
        linear-gradient( 180deg, transparent, #ffd45e, transparent ) top right / 2px 46% no-repeat,
        linear-gradient( 270deg, transparent, #ffd45e, transparent ) bottom right / 46% 2px no-repeat,
        linear-gradient( 0deg, transparent, #ffd45e, transparent ) bottom left / 2px 46% no-repeat;
    opacity: .95;
    animation: bordeLoginDorado 2.2s linear infinite;
    pointer-events: none;
    clip-path: polygon(0 0, calc(100% - 26px) 0, calc(100% - 26px) 14px, 100% 14px, 100% 100%, 0 100%);
}

#btnLogin::after {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(255,213,94,.18);
    pointer-events: none;
    clip-path: polygon(0 0, calc(100% - 25px) 0, calc(100% - 25px) 13px, 100% 13px, 100% 100%, 0 100%);
}

#btnLogin:hover {
    color: #ffffff;
    transform: translateY(-3px);
    border-color: rgba(255,221,126,.95);
    box-shadow: inset 0 0 22px rgba(255,196,68,.12), 0 0 26px rgba(255,196,68,.18);
}

@keyframes bordeLoginDorado {

    0% {
        background-position: top left, top right, bottom right, bottom left;
        filter: brightness(1);
    }

    25% {
        background-position: top right, top right, bottom right, bottom left;
        filter: brightness(1.24);
    }

    50% {
        background-position: top right, bottom right, bottom right, bottom left;
        filter: brightness(1);
    }

    75% {
        background-position: top right, bottom right, bottom left, bottom left;
        filter: brightness(1.24);
    }

    100% {
        background-position: top left, top right, bottom right, top left;
        filter: brightness(1);
    }
}

.menuBoton:hover {
    transform: translateY(-3px);
}

.adminMenuOculto {
    display: none !important;
}

.pointsWidget {
    flex: 0 0 auto;
    min-width: 126px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-left: 0;
    padding: 0 10px;
    border: 1px solid rgba(255,213,94,.52);
    background: rgba(255,196,68,.055);
    color: #ffd55e;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 900;
    letter-spacing: 2px;
}

.pointsWidgetOculto {
    display: none !important;
}

.pointsIcon {
    width: 30px;
    height: 30px;
    display: inline-block;
    background: url("../img/puntos.png") center / contain no-repeat;
    filter: drop-shadow(0 0 8px rgba(255,196,68,.42));
}

.ticketsIcon {
    background-image: url("../img/minijuegos/ticket.png");
    width: 48px;
    height: 26px;
}

.pointsWidget strong {
    min-width: 32px;
    color: #ffffff;
    font-size: 17px;
    text-align: right;
}

.pointsWidget button {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(89,199,255,.38);
    background: rgba(89,199,255,.06);
    color: #70ccff;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.pointsWidget button:hover {
    border-color: rgba(255,213,94,.9);
    color: #ffffff;
    box-shadow: 0 0 16px rgba(255,196,68,.16);
}

.compraCuentaModal {
    position: fixed;
    inset: 0;
    z-index: 15000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.compraCuentaModalActivo {
    display: flex;
}

.compraCuentaOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 5, 15, .84);
    backdrop-filter: blur(14px);
}

.compraCuentaPanel {
    position: relative;
    z-index: 2;
    width: min(720px, calc(100vw - 40px));
    max-height: min(86vh, 760px);
    overflow: auto;
    padding: 30px;
    border: 1px solid rgba(255,213,94,.56);
    background:
        linear-gradient(145deg, rgba(2,8,20,.98), rgba(3,15,34,.90)),
        radial-gradient(circle at 50% 0%, rgba(255,196,68,.10), transparent 48%);
    box-shadow: 0 0 46px rgba(0,0,0,.48), inset 0 0 34px rgba(89,199,255,.06);
}

.compraCuentaCerrar {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(89,199,255,.46);
    background: rgba(3,13,28,.92);
    color: #70ccff;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 18px;
    font-weight: 900;
}

.compraCuentaPanel > span,
.compraCuentaOpcion span,
.compraCuentaEstado {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4.5px;
}

.compraCuentaPanel h2 {
    margin: 10px 42px 10px 0;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: clamp(38px, 6vw, 58px);
    line-height: .92;
}

.compraCuentaPanel p {
    margin: 0 0 20px;
    color: #d8e8ff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.compraCuentaOpciones {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.compraCuentaSeparador {
    grid-column: 1 / -1;
    display: grid;
    gap: 6px;
    margin: 8px 0 2px;
    border-top: 1px solid rgba(95, 199, 255, .28);
    padding-top: 16px;
}

.compraCuentaSeparador span,
.compraCuentaSeparador small {
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.compraCuentaSeparador span {
    color: #d8b4ff;
    font-size: 11px;
    text-shadow: 0 0 12px rgba(178, 108, 255, .62);
}

.compraCuentaSeparador small {
    color: rgba(234, 247, 255, .78);
    font-size: 8px;
    line-height: 1.5;
}

.compraCuentaOpcion {
    min-height: 118px;
    display: grid;
    align-content: center;
    gap: 0;
    border: 1px solid rgba(89,199,255,.30);
    background: rgba(4,15,32,.70);
    color: #ffffff;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
}

.compraCuentaOpcion strong {
    color: #ffd55e;
    font-size: 34px;
    line-height: 1;
}

.compraCuentaOpcion small {
    color: #d8e8ff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
}

.compraCuentaOpcion:hover {
    transform: translateY(-2px);
    border-color: rgba(255,213,94,.82);
    background: rgba(255,196,68,.08);
    box-shadow: 0 0 22px rgba(255,196,68,.14);
}

.compraCuentaEstado {
    min-height: 18px;
    margin-top: 16px;
    color: #ffd55e;
}



.compraTerminosModal {
    position: fixed;
    inset: 0;
    z-index: 16000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.compraTerminosModalActivo {
    display: flex;
}

.compraTerminosOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 5, 15, .86);
    backdrop-filter: blur(14px);
}

.compraTerminosPanel {
    position: relative;
    z-index: 2;
    width: min(760px, calc(100vw - 42px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px 28px;
    border: 1px solid rgba(255, 213, 94, .66);
    background:
        linear-gradient(145deg, rgba(2, 8, 20, .98), rgba(3, 15, 34, .92)),
        radial-gradient(circle at 50% 0%, rgba(255, 196, 68, .10), transparent 48%);
    box-shadow:
        0 0 48px rgba(0, 0, 0, .54),
        inset 0 0 36px rgba(89, 199, 255, .07);
}

.compraTerminosMini {
    color: #70ccff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4.5px;
}

.compraTerminosPanel h2 {
    margin: 8px 0 14px;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(26px, 4vw, 42px);
    line-height: .95;
    letter-spacing: 1px;
}

.compraTerminosScroll {
    max-height: min(56vh, 520px);
    overflow-y: auto;
    padding: 2px 16px 2px 0;
    scrollbar-color: rgba(112, 204, 255, .72) rgba(4, 15, 32, .72);
}

.compraTerminosScroll::-webkit-scrollbar {
    width: 8px;
}

.compraTerminosScroll::-webkit-scrollbar-track {
    background: rgba(4, 15, 32, .72);
}

.compraTerminosScroll::-webkit-scrollbar-thumb {
    background: rgba(112, 204, 255, .72);
}

.compraTerminosPanel h3 {
    margin: 15px 0 6px;
    color: #ffd55e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
}

.compraTerminosPanel p,
.compraTerminosPanel li {
    color: #d8e8ff;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
}

.compraTerminosPanel ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.compraTerminosPanel li {
    margin-bottom: 5px;
}

.compraTerminosPanel strong {
    color: #ffffff;
}

.compraTerminosActions {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 16px;
}

.compraTerminosActions button {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(255, 213, 94, .76);
    background: linear-gradient(90deg, rgba(255, 196, 68, .18), rgba(255, 255, 255, .04), rgba(255, 196, 68, .12));
    color: #ffd45e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
    cursor: pointer;
}

.compraTerminosActions button:last-child {
    border-color: rgba(89, 199, 255, .28);
    color: #9fb4c8;
    background: rgba(4, 15, 32, .72);
}

.compraTerminosActions button:hover {
    border-color: rgba(255, 231, 148, .96);
    color: #ffffff;
}

@media (max-width: 760px) {
    .compraCuentaOpciones {
        grid-template-columns: 1fr;
    }
}

.activo {
    border-bottom-color: rgba(89,199,255,.95);
}

#sidebarBrand {
    display: none;
}

#contenidoPrincipal {
    height: calc(100vh - 96px);
    padding: 14px 90px 120px 90px;
}

#lineaVertical {
    left: 0;
    top: 96px;
    width: 100%;
    height: 1px;
}

/* ======================================== */
/* LOGIN */
/* ======================================== */

#paginaLogin {
    position: relative;
    z-index: 5;
}

.loginPanel {
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(320px, 420px);
    gap: 42px;
    align-items: center;
}

.loginIntro {
    position: relative;
    padding-left: 30px;
}

.loginIntro::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient( transparent, rgba(0,170,255,.42), transparent );
    box-shadow: 0 0 18px rgba(0,170,255,.25);
}

.loginMiniText {
    margin-bottom: 18px;
    color: #58bfff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    letter-spacing: 6px;
}

.loginIntro h1 {
    margin-bottom: 22px;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 82px;
    font-weight: 700;
    line-height: .9;
    letter-spacing: 4.5px;
    text-shadow: 0 0 35px rgba(0,140,255,.18);
}

.loginIntro p {
    max-width: 560px;
    color: #dcecff;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.8;
}

.loginForm {
    position: relative;
    display: grid;
    gap: 18px;
    padding: 28px;
    border: 1px solid rgba(89,199,255,.22);
    background: linear-gradient( 180deg, rgba(3,12,28,.78), rgba(3,12,28,.36) );
    box-shadow: inset 0 0 32px rgba(0,170,255,.06), 0 0 38px rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
}

.loginProviderBox {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: -4px;
}

.loginProvider {
    width: 54px;
    height: 54px;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,213,94,.46);
    border-radius: 50%;
    background: rgba(1,8,22,.62);
    color: #dcecff;
    cursor: pointer;
    box-shadow: inset 0 0 18px rgba(255,196,68,.05), 0 0 18px rgba(255,196,68,.08);
    transition: .25s;
}

.loginProvider span,
.loginProvider img {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.loginProvider img {
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(88,101,242,.45));
}

.loginIconCorreo {
    position: relative;
    border: 1px solid rgba(255,213,94,.92);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(255,196,68,.22);
}

.loginIconCorreo::before,
.loginIconCorreo::after {
    content: "";
    position: absolute;
    top: 8px;
    width: 12px;
    height: 1px;
    background: rgba(255,213,94,.95);
}

.loginIconCorreo::before {
    left: 1px;
    transform: rotate(34deg);
    transform-origin: left center;
}

.loginIconCorreo::after {
    right: 1px;
    transform: rotate(-34deg);
    transform-origin: right center;
}

.loginProvider:hover {
    transform: translateY(-2px);
    border-color: rgba(255,213,94,.62);
    color: #ffffff;
    box-shadow: 0 0 18px rgba(255,196,68,.12);
}

.loginForm::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    border: 1px solid rgba(89,199,255,.08);
    box-shadow: 0 0 26px rgba(0,170,255,.12);
}

.loginForm label {
    display: grid;
    gap: 0;
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}

.loginForm input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(89,199,255,.28);
    background: rgba(1,8,22,.68);
    color: #ffffff;
    font: inherit;
    font-size: 16px;
    letter-spacing: 1px;
    outline: none;
}

.loginForm input:focus {
    border-color: rgba(89,199,255,.9);
    box-shadow: 0 0 18px rgba(0,170,255,.22);
}

.loginRecordarSesion {
    width: fit-content;
    display: inline-flex !important;
    align-items: center;
    gap: 8px !important;
    color: #dcecff !important;
    font-size: 12px !important;
    letter-spacing: 3px !important;
    cursor: pointer;
    user-select: none;
}

.loginRecordarSesion input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.loginRecordarSesion span {
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    flex: 0 0 14px;
    border: 1px solid rgba(112,204,255,.58);
    background: rgba(1,8,22,.74);
    box-shadow: inset 0 0 8px rgba(0,170,255,.08), 0 0 8px rgba(0,170,255,.08);
}

.loginRecordarSesion span::after {
    content: "";
    width: 7px;
    height: 7px;
    background: #ffd45e;
    box-shadow: 0 0 10px rgba(255,213,94,.72);
    transform: scale(0);
    transition: transform .18s ease;
}

.loginRecordarSesion input:checked + span::after {
    transform: scale(1);
}

.loginRecordarSesion:focus-within span {
    border-color: rgba(89,199,255,.9);
    box-shadow: 0 0 18px rgba(0,170,255,.22);
}

.loginForm button {
    min-height: 50px;
    margin-top: 4px;
    border: 1px solid rgba(89,199,255,.55);
    background: linear-gradient( 90deg, rgba(0,170,255,.22), rgba(255,255,255,.04), rgba(0,170,255,.18) );
    color: #ffffff;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 4.5px;
    transition: .25s;
}

.loginForm button:hover {
    transform: translateY(-2px);
    border-color: rgba(143,222,255,.95);
    box-shadow: 0 0 24px rgba(0,170,255,.22);
}

.loginForm .loginCrearCuenta {
    min-height: 38px;
    margin-top: -8px;
    border-color: rgba(255,213,94,.42);
    background: rgba(255,196,68,.045);
    color: #ffd45e;
    font-size: 13px;
    letter-spacing: 3px;
}

.loginForm .loginCrearCuenta:hover {
    border-color: rgba(255,213,94,.9);
    box-shadow: 0 0 20px rgba(255,196,68,.16);
}

.loginForm .loginRecuperarPassword {
    min-height: 34px;
    margin-top: -8px;
    border-color: rgba(216,180,254,.42);
    background: rgba(168,85,247,.055);
    color: #d8b4fe;
    font-size: 12px;
    letter-spacing: 2.6px;
}

.loginForm .loginRecuperarPassword:hover {
    border-color: rgba(216,180,254,.9);
    box-shadow: 0 0 20px rgba(168,85,247,.18);
}

.loginEstado {
    min-height: 20px;
    color: rgba(215,235,255,.76);
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
}

.loginEstadoActivo {
    color: #ffd45e;
}

.sesionCerradaModal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.sesionCerradaModalActivo {
    display: flex;
}

.sesionCerradaOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1,5,15,.82);
    backdrop-filter: blur(14px);
}

.sesionCerradaPanel {
    position: relative;
    z-index: 2;
    width: min(520px, calc(100vw - 48px));
    padding: 30px 34px 34px;
    border: 1px solid rgba(255,213,94,.5);
    background: linear-gradient(180deg, rgba(3,12,28,.98), rgba(3,12,28,.86));
    box-shadow: 0 0 46px rgba(0,0,0,.48), inset 0 0 34px rgba(255,196,68,.06);
}

.sesionCerradaPanel span {
    color: #59c7ff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 6px;
}

.sesionCerradaPanel h2 {
    margin: 14px 38px 14px 0;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 36px;
    line-height: 1;
    letter-spacing: 2px;
}

.sesionCerradaPanel p {
    margin: 0 0 24px;
    color: #d8e8ff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
}

.sesionCerradaX {
    position: absolute;
    right: 14px;
    top: 12px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,213,94,.45);
    background: rgba(255,196,68,.05);
    color: #ffd45e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 18px;
    font-weight: 800;
}

.sesionCerradaAccion {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(255,213,94,.78);
    background: linear-gradient(90deg, rgba(255,196,68,.18), rgba(255,255,255,.04), rgba(255,196,68,.12));
    color: #ffd45e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 3px;
}

.sesionCerradaX:hover,
.sesionCerradaAccion:hover {
    border-color: rgba(255,231,148,.95);
    color: #ffffff;
    box-shadow: 0 0 22px rgba(255,196,68,.18);
}

.crearCuentaModal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
}

.crearCuentaModalActivo {
    display: flex;
}

.crearCuentaOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1,5,15,.82);
    backdrop-filter: blur(14px);
}

.modalCuentaAbierto {
    overflow: hidden;
}

.inicioAppAvisoModal {
    position: fixed;
    inset: 0;
    z-index: 12090;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.inicioAppAvisoModalActivo {
    display: flex;
}

.inicioAppAvisoOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1,5,15,.84);
    backdrop-filter: blur(15px);
}

.inicioAppAvisoPanel {
    position: relative;
    z-index: 2;
    width: min(500px, calc(100vw - 48px));
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 30px 34px 34px;
    border: 1px solid rgba(255,213,94,.48);
    background: linear-gradient(180deg, rgba(3,12,28,.98), rgba(3,12,28,.86));
    box-shadow: 0 0 48px rgba(0,0,0,.52), inset 0 0 34px rgba(89,199,255,.08);
    text-align: center;
}

.inicioAppAvisoIcono {
    width: 104px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 22px;
    border: 1px solid rgba(89,199,255,.46);
    box-shadow: 0 0 28px rgba(204,50,255,.28), 0 0 24px rgba(89,199,255,.18);
}

.inicioAppAvisoPanel span {
    margin-top: 4px;
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 6px;
}

.inicioAppAvisoPanel h2 {
    margin: 0;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: clamp(30px, 5vw, 48px);
    line-height: .95;
    letter-spacing: 2px;
}

.inicioAppAvisoPanel p {
    max-width: 390px;
    margin: 0;
    color: #d8e8ff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
}

.inicioAppAvisoCerrar {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,213,94,.45);
    background: rgba(255,196,68,.05);
    color: #ffd45e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 18px;
    font-weight: 900;
}

.inicioAppAvisoCerrar:hover {
    border-color: rgba(255,231,148,.95);
    color: #ffffff;
    box-shadow: 0 0 22px rgba(255,196,68,.18);
}

.crearCuentaPanel {
    position: relative;
    z-index: 2;
    width: min(470px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    display: grid;
    gap: 10px;
    padding: 22px 26px 24px;
    border: 1px solid rgba(255,213,94,.42);
    background: linear-gradient( 180deg, rgba(3,12,28,.96), rgba(3,12,28,.78) );
    box-shadow: inset 0 0 34px rgba(255,196,68,.055), 0 0 44px rgba(0,0,0,.44), 0 0 28px rgba(255,196,68,.10);
}

.crearCuentaPanel::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    border: 1px solid rgba(255,213,94,.16);
}

.cerrarCrearCuenta {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,213,94,.38);
    background: rgba(255,196,68,.04);
    color: #ffd45e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.cerrarCrearCuenta:hover {
    border-color: rgba(255,213,94,.9);
    color: #ffffff;
    box-shadow: 0 0 18px rgba(255,196,68,.16);
}

.crearCuentaPanel h2 {
    margin: -4px 42px 8px 0;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 34px !important;
    line-height: 1 !important;
    letter-spacing: 2px !important;
    max-width: none !important;
    text-shadow: 0 0 24px rgba(255,196,68,.14) !important;
}

.crearCuentaPanel label {
    display: grid;
    gap: 6px;
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
}

.crearCuentaPanel input {
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(89,199,255,.28);
    background: rgba(1,8,22,.72);
    color: #ffffff;
    font: inherit;
    font-size: 16px;
    letter-spacing: 1px;
    outline: none;
}

.crearCuentaPanel input:focus {
    border-color: rgba(255,213,94,.82);
    box-shadow: 0 0 18px rgba(255,196,68,.16);
}

.confirmarCrearCuenta {
    min-height: 44px;
    margin-top: 4px;
    border: 1px solid rgba(255,213,94,.78);
    background: linear-gradient( 90deg, rgba(255,196,68,.18), rgba(255,255,255,.04), rgba(255,196,68,.12) );
    color: #ffd45e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
}

/* ======================================== */
/* PERFIL DE CUENTA */
/* ======================================== */

.perfilPagina {
    width: 100%;
    margin: 0 auto;
    padding: 36px clamp(28px, 4vw, 76px) 58px;
    color: #ffffff;
}

.perfilCabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.perfilMiniText {
    color: #59c7ff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 7px;
}

.perfilCabecera h1 {
    margin: 8px 0 10px;
    font-family: 'Rajdhani',sans-serif;
    font-size: 68px;
    line-height: .9;
    letter-spacing: 0;
}

.perfilCabecera p {
    max-width: 620px;
    color: #c8d8ef;
    font-size: 16px;
    line-height: 1.7;
}

.perfilHeaderActions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    flex-wrap: wrap;
}

.perfilCerrarSesion,
.perfilCoachEditorBtn,
.perfilGuardar,
.perfilActualizarOpgg {
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid rgba(255,213,94,.75);
    background: rgba(255,196,68,.08);
    color: #ffd55e;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 3px;
    cursor: pointer;
}

.perfilCoachEditorBtn {
    border-color: rgba(89,199,255,.58);
    background: rgba(89,199,255,.08);
    color: #70ccff;
}

.perfilCoachEditorOculto {
    display: none;
}

.perfilActualizarOpgg {
    width: 100%;
    border-color: rgba(89,199,255,.45);
    background: rgba(89,199,255,.07);
    color: #70ccff;
}

.perfilRiotAcciones {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.perfilRiotAccionesConBorrar {
    grid-template-columns: minmax(0, 1fr) minmax(190px, .52fr);
}

.perfilBorrarRiot {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(255,87,87,.58);
    background: rgba(255,87,87,.08);
    color: #ff8b8b;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.4px;
    cursor: pointer;
}

.perfilBorrarRiot[hidden] {
    display: none;
}

@media (max-width: 760px) {
    .perfilRiotAcciones,
    .perfilRiotAccionesConBorrar {
        grid-template-columns: 1fr;
    }
}

.perfilGrid {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(520px, 1.35fr) minmax(340px, 430px);
    gap: clamp(16px, 1.6vw, 28px);
}

.perfilPanel {
    border: 1px solid rgba(89,199,255,.24);
    background: linear-gradient(145deg, rgba(2,8,20,.90), rgba(3,15,34,.72));
    box-shadow: inset 0 0 28px rgba(89,199,255,.05);
    padding: 22px;
}

.perfilPanelAncho {
    grid-column: 1 / -1;
}

.perfilIdentidad {
    display: grid;
    align-content: start;
    gap: 16px;
}

.perfilLogoBox {
    position: relative;
    width: 100%;
    min-height: 190px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
    padding: 18px;
    border: 1px solid rgba(89,199,255,.26);
    background: rgba(1,8,22,.72);
    box-shadow: inset 0 0 42px rgba(89,199,255,.06), 0 0 24px rgba(255,196,68,.08);
    overflow: hidden;
}

.perfilLogoBox::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(1,8,22,.34);
    pointer-events: none;
}

.perfilPortadaPreview {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.perfilLogoBox #perfilLogoPreview {
    position: relative;
    z-index: 1;
    width: 92px;
    height: 92px;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: 0 0 22px rgba(89,199,255,.14);
    object-fit: contain;
}

.perfilLogoBtn {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 44px;
    border: 1px solid rgba(89,199,255,.35);
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
    cursor: pointer;
}

.perfilLogoBtn input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.perfilCoachBtn {
    width: 100%;
    border-color: rgba(255, 213, 94, .72);
    color: #ffd45e;
    background:
        linear-gradient(90deg, rgba(255, 196, 68, .16), rgba(255, 255, 255, .035), rgba(255, 196, 68, .10)),
        rgba(3, 13, 28, .78);
    cursor: pointer;
}

.perfilPortadaBtn {
    margin-top: -8px;
}

.perfilDato {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-left: 2px solid rgba(89,199,255,.45);
    background: rgba(89,199,255,.05);
}

.perfilDato span,
.perfilPanelTitulo span,
.perfilFormulario label {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 4.5px;
}

.perfilDato strong,
.perfilPanelTitulo strong {
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 19px;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
}

.perfilSecretoLinea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.perfilOjo {
    width: 36px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255,213,94,.55);
    background: rgba(255,196,68,.06);
    color: #ffd55e;
    cursor: pointer;
}

.perfilOjo svg {
    width: 19px;
    height: 19px;
}

.perfilOjo path,
.perfilOjo circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.perfilOjoActivo {
    color: #ffffff;
    box-shadow: 0 0 16px rgba(255,196,68,.18);
}

.perfilPanelTitulo {
    display: grid;
    gap: 5px;
    margin-bottom: 16px;
}

.perfilFormulario {
    display: grid;
    gap: 13px;
}

.perfilFormulario label {
    display: grid;
    gap: 7px;
}

.perfilFormulario input,
.perfilFormulario textarea {
    width: 100%;
    border: 1px solid rgba(89,199,255,.28);
    background: rgba(0,7,18,.62);
    color: #ffffff;
    font-family: 'Exo 2',sans-serif;
    font-size: 15px;
    font-weight: 700;
    outline: none;
}

.perfilFormulario input {
    min-height: 44px;
    padding: 0 14px;
}

.perfilFormulario textarea {
    min-height: 94px;
    padding: 12px 14px;
    resize: vertical;
}

.perfilFormulario input:focus,
.perfilFormulario textarea:focus {
    border-color: rgba(255,213,94,.82);
    box-shadow: 0 0 18px rgba(255,196,68,.13);
}

.perfilRiotIdCampos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px minmax(92px, 140px);
    align-items: center;
    gap: 8px;
}

.perfilRiotIdCampos span {
    min-height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,213,94,.42);
    background: rgba(255,196,68,.06);
    color: #ffd45e;
    font-family: 'Rajdhani',sans-serif;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 10px rgba(255,196,68,.45);
}

.perfilJugadorTarjeta {
    min-height: 92px;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(89,199,255,.24);
    background: linear-gradient(135deg, rgba(89,199,255,.08), rgba(1,8,22,.56));
}

.perfilJugadorIcono {
    width: 68px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,213,94,.5);
    background: rgba(0,7,18,.72);
    box-shadow: 0 0 20px rgba(89,199,255,.12);
}

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

.perfilJugadorDatos {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.perfilJugadorDatos span {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.perfilJugadorDatos strong {
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 22px;
    line-height: 1;
    overflow-wrap: anywhere;
}

.perfilJugadorDatos small {
    color: #ffd45e;
    font-family: 'Rajdhani',sans-serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
}

.perfilRankedResumen {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
}

.perfilRankedCard {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid rgba(89,199,255,.2);
    background: rgba(0,7,18,.42);
}

.perfilRankedPrincipal {
    border-color: rgba(255,213,94,.42);
    background: linear-gradient(135deg, rgba(255,196,68,.08), rgba(0,7,18,.46));
}

.perfilRankedSecundaria {
    padding: 10px 12px;
}

.perfilRankedCard span,
.perfilRankedMeta,
.perfilRankedCard small {
    color: #99a9c1;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}

.perfilRankedCard span {
    color: #70ccff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}

.perfilRankedCard strong {
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
}

.perfilRankedPrincipal strong {
    color: #ffd45e;
    font-size: 21px;
}

.perfilRankedLp {
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 16px;
    font-weight: 900;
}

.perfilEncontradoModal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    place-items: center;
    padding: 18px;
}

.perfilEncontradoModalActivo {
    display: grid;
}

.perfilEncontradoOverlay {
    position: absolute;
    inset: 0;
    background: rgba(0,5,15,.74);
    backdrop-filter: blur(6px);
}

.perfilEncontradoPanel {
    position: relative;
    width: min(560px, 100%);
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(89,199,255,.34);
    background: linear-gradient(145deg, rgba(2,14,34,.96), rgba(1,7,18,.96));
    box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 36px rgba(89,199,255,.12);
}

.perfilEncontradoPanel > span {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 4px;
}

.perfilEncontradoPanel h2 {
    margin: 0;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 1px;
}

.perfilBorrarRiotPanel h2 {
    color: #ffd45e;
}

.perfilBorrarRiotAviso {
    margin: 0;
    color: #dcecff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
}

.perfilEncontradoAcciones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.perfilEncontradoAcciones button {
    min-height: 44px;
    border: 1px solid rgba(89,199,255,.42);
    background: rgba(89,199,255,.07);
    color: #70ccff;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
}

.perfilEncontradoAcciones button:first-child {
    border-color: rgba(255,213,94,.72);
    background: linear-gradient(90deg, rgba(255,196,68,.18), rgba(255,255,255,.035));
    color: #ffd45e;
}

.perfilEncontradoAcciones button:hover {
    color: #ffffff;
    box-shadow: 0 0 20px rgba(89,199,255,.14);
}

.perfilMensaje {
    color: #99a9c1;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
}

.perfilMensajeActivo {
    color: #ffd55e;
}

.perfilLista {
    display: grid;
    gap: 10px;
}

.perfilEquipoAcciones {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.perfilEquipoBoton,
.equipoModalAccion {
    min-height: 44px;
    border: 1px solid rgba(255,213,94,.72);
    background: linear-gradient(90deg, rgba(255,196,68,.16), rgba(255,255,255,.035), rgba(255,196,68,.10));
    color: #ffd45e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
}

.perfilEquipoBotonSecundario {
    border-color: rgba(89,199,255,.42);
    background: rgba(89,199,255,.055);
    color: #70ccff;
}

.perfilEquipoBoton:hover,
.equipoModalAccion:hover {
    border-color: rgba(255,231,148,.96);
    color: #ffffff;
    box-shadow: 0 0 22px rgba(255,196,68,.16);
}

.perfilEquipoCard {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(89,199,255,.22);
    background: linear-gradient(145deg, rgba(89,199,255,.075), rgba(1,8,22,.48));
}

.perfilEquipoBorrar {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,78,91,.36);
    background: rgba(255,78,91,.06);
    color: #ff4e5b;
    cursor: pointer;
}

.perfilEquipoBorrar svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.perfilEquipoBorrar:hover {
    border-color: rgba(255,78,91,.9);
    color: #ffffff;
    box-shadow: 0 0 18px rgba(255,78,91,.18);
}

.perfilEquipoLogo {
    position: relative;
    width: 76px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,213,94,.42);
    background: rgba(0,7,18,.62);
}

.perfilEquipoLogo img {
    width: 82%;
    height: 82%;
    object-fit: contain;
}

.perfilEquipoLogoEditar {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: start center;
    padding: 5px;
    opacity: .92;
    background: linear-gradient(180deg, rgba(0,7,18,.72), rgba(0,7,18,.04));
    cursor: pointer;
    transition: opacity .18s ease, border-color .18s ease;
}

.perfilEquipoLogoEditar input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.perfilEquipoLogoEditar span {
    width: 100%;
    padding: 4px 3px;
    border: 1px solid rgba(44,247,255,.72);
    background: rgba(4,49,62,.9);
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1px;
    text-align: center;
}

.perfilEquipoLogo:hover .perfilEquipoLogoEditar,
.perfilEquipoLogoEditar:focus-within {
    opacity: 1;
}

.perfilEquipoInfo {
    display: grid;
    gap: 0;
}

.perfilEquipoInfo span,
.perfilEquipoJugadores span {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}

.perfilEquipoInfo strong {
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
}

.perfilEquipoMeta {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.perfilEquipoMeta b {
    display: grid;
    gap: 2px;
    border: 1px solid rgba(89,199,255,.2);
    background: rgba(1,8,22,.55);
    color: #dcecff;
    padding: 6px 8px;
    font-size: 14px;
    letter-spacing: 1px;
}

.perfilEquipoMeta b span {
    color: #70ccff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}

.perfilEquipoJugadores {
    grid-column: 1 / -1;
    display: grid;
    gap: 0;
    padding-top: 4px;
}

.perfilEquipoJugadores p {
    margin: 0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.perfilJugadoresLista {
    display: grid;
    gap: 6px;
}

.perfilJugadorFila {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid rgba(89,199,255,.14);
    background: rgba(1,8,22,.34);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.perfilJugadorFila span {
    color: #ffffff;
    font-size: 13px;
    letter-spacing: .5px;
    overflow-wrap: anywhere;
}

.perfilJugadorBorrar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,78,91,.5);
    background: rgba(255,78,91,.08);
    color: #ff4e5b;
    cursor: pointer;
}

.perfilJugadorBorrar svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.perfilJugadorBorrar:hover {
    color: #ffffff;
    border-color: rgba(255,78,91,.85);
    box-shadow: 0 0 16px rgba(255,78,91,.16);
}

.perfilJugadorFilaBloqueada {
    border-color: rgba(255,213,94,.32);
    background: rgba(255,196,68,.07);
    color: #ffd45e;
}

.perfilJugadorFilaBloqueada span {
    color: #ffd45e;
}

.perfilJugadorFilaBloqueada b {
    color: #ffffff;
    font-size: 12px;
    letter-spacing: 1.5px;
}

.perfilSubPanelTitulo {
    display: grid;
    gap: 5px;
    margin: 18px 0 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(89,199,255,.16);
}

.perfilSubPanelTitulo span {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 4.5px;
}

.perfilSubPanelTitulo strong {
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
}

.perfilHistorialPartidas {
    display: grid;
    gap: 9px;
}

.perfilHistorialVacio {
    min-height: 110px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0;
    border: 1px solid rgba(89,199,255,.18);
    background: rgba(89,199,255,.045);
    text-align: center;
}

.perfilHistorialVacio span {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 4.5px;
}

.perfilHistorialVacio strong {
    color: #dcecff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
}

.perfilPartidaItem {
    display: grid;
    grid-template-columns: minmax(70px, 1fr) 34px minmax(70px, 1fr) 82px;
    gap: 0;
    align-items: center;
    min-height: 58px;
    padding: 9px;
    border: 1px solid rgba(89,199,255,.18);
    background: rgba(1,8,22,.58);
}

.perfilPartidaEquipo {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0;
    align-items: center;
    min-width: 0;
}

.perfilPartidaEquipo img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border: 1px solid rgba(255,213,94,.28);
    background: rgba(0,7,18,.62);
}

.perfilPartidaEquipo span {
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.perfilPartidaVs {
    color: rgba(220,236,255,.72);
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
}

.perfilPartidaResultado {
    display: grid;
    justify-items: end;
    gap: 2px;
}

.perfilPartidaResultado strong {
    font-family: 'Rajdhani',sans-serif;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 2px;
}

.perfilPartidaResultado small {
    color: rgba(220,236,255,.62);
    font-family: 'Rajdhani',sans-serif;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    text-align: right;
}

.perfilResultadoWin {
    border-color: rgba(89,199,255,.34);
    box-shadow: inset 3px 0 0 rgba(89,199,255,.9);
}

.perfilResultadoWin .perfilPartidaResultado strong {
    color: #59c7ff;
}

.perfilResultadoLoss {
    border-color: rgba(255,78,91,.34);
    box-shadow: inset 3px 0 0 rgba(255,78,91,.86);
}

.perfilResultadoLoss .perfilPartidaResultado strong {
    color: #ff4e5b;
}

.perfilResultadoAusente {
    border-color: rgba(154,164,178,.32);
    background: rgba(80,88,102,.16);
    box-shadow: inset 3px 0 0 rgba(154,164,178,.78);
}

.perfilResultadoAusente .perfilPartidaResultado strong {
    color: #aeb7c5;
}

.perfilResultadoPendiente .perfilPartidaResultado strong {
    color: #ffd55e;
}

.equipoModal {
    position: fixed;
    inset: 0;
    z-index: 12020;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
}

.equipoModalActivo {
    display: flex;
}

.coachSolicitudModal {
    position: fixed;
    inset: 0;
    z-index: 12060;
    display: none;
    padding: 18px;
    overflow: hidden;
}

.coachSolicitudModalActivo {
    display: flex;
}

.coachSolicitudOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 5, 15, .84);
    backdrop-filter: blur(14px);
}

.coachSolicitudPanel {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: min(500px, calc(100vw - 36px));
    max-height: calc(100vh - 36px);
    overflow: auto;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 213, 94, .64);
    background:
        linear-gradient(145deg, rgba(2, 8, 20, .96), rgba(3, 15, 34, .90)),
        radial-gradient(circle at 50% 0%, rgba(89, 199, 255, .14), transparent 54%);
    box-shadow:
        0 0 42px rgba(0, 0, 0, .56),
        inset 0 0 32px rgba(89, 199, 255, .06);
    padding: 22px;
}

.coachSolicitudCerrar {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(89, 199, 255, .42);
    background: rgba(3, 13, 28, .92);
    color: #70ccff;
    cursor: pointer;
}

#contenidoPrincipal .coachSolicitudPanel h2,
.coachSolicitudPanel h2 {
    margin: 6px 38px 12px 0;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 34px;
    line-height: 1;
    letter-spacing: 1px;
}

.coachSolicitudPanel p {
    margin: 0 0 14px;
    color: #d8e8ff;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 700;
}

.coachSolicitudPasos {
    display: grid;
    gap: 0;
    margin-bottom: 16px;
}

.coachSolicitudPasos span {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid rgba(89, 199, 255, .22);
    color: #bde9ff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    background: rgba(4, 15, 32, .72);
}

.coachSolicitudDiscord {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border: 1px solid rgba(255, 213, 94, .78);
    background: linear-gradient(90deg, rgba(255, 196, 68, .18), rgba(255, 255, 255, .04), rgba(255, 196, 68, .12));
    color: #ffd45e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
    text-decoration: none;
}

.coachSolicitudDiscord:hover {
    border-color: rgba(255, 231, 148, .96);
    color: #ffffff;
    box-shadow: 0 0 22px rgba(255, 196, 68, .16);
}

.compraResultadoModal {
    position: fixed;
    inset: 0;
    z-index: 12120;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.compraResultadoModalActivo {
    display: flex;
}

.compraResultadoOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 5, 15, .86);
    backdrop-filter: blur(14px);
}

.compraResultadoPanel {
    position: relative;
    z-index: 2;
    width: min(480px, calc(100vw - 36px));
    border: 1px solid rgba(255, 213, 94, .74);
    background:
        linear-gradient(145deg, rgba(2, 8, 20, .98), rgba(3, 15, 34, .94)),
        radial-gradient(circle at 50% 0%, rgba(89, 199, 255, .16), transparent 58%);
    box-shadow:
        0 0 52px rgba(0, 0, 0, .62),
        inset 0 0 36px rgba(89, 199, 255, .07);
    padding: 26px;
    text-align: center;
}

.compraResultadoPanel span {
    color: #70ccff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 5px;
}

.compraResultadoPanel h2 {
    margin: 10px 0 12px;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 38px;
    line-height: .95;
    letter-spacing: 1px;
}

.compraResultadoPanel p {
    margin: 0 0 22px;
    color: #d8e8ff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 800;
}

.compraResultadoPanel button {
    min-height: 44px;
    min-width: 180px;
    border: 1px solid rgba(255, 213, 94, .86);
    background: linear-gradient(90deg, rgba(255, 196, 68, .22), rgba(255, 255, 255, .04), rgba(255, 196, 68, .16));
    color: #ffd45e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
    cursor: pointer;
}

.compraResultadoPanel button:hover {
    border-color: #ffe794;
    color: #ffffff;
    box-shadow: 0 0 24px rgba(255, 196, 68, .18);
}

.coachEditorModal {
    position: fixed;
    inset: 0;
    z-index: 12070;
    display: none;
    padding: 18px;
    overflow: hidden;
}

.coachEditorModalActivo {
    display: flex;
}

.coachEditorOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 5, 15, .84);
    backdrop-filter: blur(14px);
}

.coachEditorPanel {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: min(720px, calc(100vw - 36px));
    max-height: calc(100vh - 36px);
    overflow: auto;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 213, 94, .64);
    background:
        linear-gradient(145deg, rgba(2, 8, 20, .96), rgba(3, 15, 34, .90)),
        radial-gradient(circle at 50% 0%, rgba(89, 199, 255, .14), transparent 54%);
    box-shadow:
        0 0 42px rgba(0, 0, 0, .56),
        inset 0 0 32px rgba(89, 199, 255, .06);
    padding: 22px;
}

.coachEditorCerrar {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(89, 199, 255, .42);
    background: rgba(3, 13, 28, .92);
    color: #70ccff;
    cursor: pointer;
}

#contenidoPrincipal .coachEditorPanel h2,
.coachEditorPanel h2 {
    margin: 6px 38px 18px 0;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 36px;
    line-height: 1;
    letter-spacing: 1px;
}

.coachEditorGrid {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 18px;
    align-items: start;
}

.coachEditorFoto,
.coachEditorPanel label {
    color: #70ccff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
}

.coachEditorFoto {
    display: grid;
    gap: 10px;
    cursor: pointer;
}

.coachEditorFoto img {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid rgba(89, 199, 255, .28);
    background: rgba(2, 8, 20, .78);
    object-fit: cover;
}

.coachEditorFoto input {
    color: #d8e8ff;
    font-size: 11px;
}

.coachEditorCampos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.coachEditorPanel input,
.coachEditorPanel select,
.coachEditorPanel textarea {
    width: 100%;
    min-height: 44px;
    margin-top: 7px;
    border: 1px solid rgba(89, 199, 255, .28);
    background: rgba(1, 8, 22, .74);
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 0 12px;
    outline: none;
}

.coachEditorPanel textarea {
    min-height: 86px;
    padding-top: 10px;
    resize: vertical;
}

.coachEditorServiciosOpciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 9px;
}

.coachEditorServicioOpcion {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(89, 199, 255, .28);
    background: rgba(1, 8, 22, .74);
    color: #bde9ff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
}

.coachEditorServicioActivo {
    border-color: rgba(255, 213, 94, .78);
    background: rgba(255, 196, 68, .14);
    color: #ffd45e;
    box-shadow: inset 0 0 18px rgba(255, 196, 68, .08);
}

.coachEditorDescripcion {
    display: grid;
    margin-top: 14px;
}

.coachEditorLabelLinea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
}

.coachEditorLabelLinea small {
    color: #ffd45e;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
}

.coachEditorAcciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 18px;
}

.coachEditorAcciones button {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(255, 213, 94, .78);
    background: linear-gradient(90deg, rgba(255, 196, 68, .18), rgba(255, 255, 255, .04), rgba(255, 196, 68, .12));
    color: #ffd45e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
    cursor: pointer;
}

.coachEditorAcciones button + button {
    border-color: rgba(89, 199, 255, .35);
    background: rgba(89, 199, 255, .06);
    color: #70ccff;
}

.coachEditorEstado {
    min-height: 18px;
    margin-top: 12px;
    color: #ffd45e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
}

.borrarEquipoModal {
    position: fixed;
    inset: 0;
    z-index: 12040;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.borrarEquipoModalActivo {
    display: flex;
}

.borrarEquipoOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1,5,15,.84);
    backdrop-filter: blur(14px);
}

.borrarEquipoPanel {
    position: relative;
    z-index: 2;
    width: min(560px, calc(100vw - 48px));
    display: grid;
    gap: 16px;
    padding: 30px 34px 34px;
    border: 1px solid rgba(255,78,91,.48);
    background: linear-gradient(180deg, rgba(3,12,28,.98), rgba(3,12,28,.86));
    box-shadow: 0 0 48px rgba(0,0,0,.48), inset 0 0 34px rgba(255,78,91,.055);
}

.borrarEquipoPanel span {
    color: #ff4e5b;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 5px;
}

.borrarEquipoPanel h2 {
    margin: 0;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 38px;
    line-height: 1;
    letter-spacing: 2px;
}

.borrarEquipoPanel p {
    margin: 0;
    color: #dcecff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.55;
}

.borrarEquipoAcciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.borrarEquipoAcciones button {
    min-height: 44px;
    border: 1px solid rgba(89,199,255,.32);
    background: rgba(89,199,255,.055);
    color: #70ccff;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 3px;
}

.borrarEquipoAcciones button:first-child {
    border-color: rgba(255,78,91,.72);
    background: rgba(255,78,91,.08);
    color: #ff4e5b;
}

.borrarEquipoAcciones button:hover {
    color: #ffffff;
    box-shadow: 0 0 20px rgba(89,199,255,.14);
}

.equipoModalOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1,5,15,.84);
    backdrop-filter: blur(14px);
}

.equipoModalPanel {
    position: relative;
    z-index: 2;
    width: min(520px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    display: grid;
    gap: 0;
    padding: 24px 32px 28px;
    border: 1px solid rgba(255,213,94,.48);
    background: linear-gradient(180deg, rgba(3,12,28,.98), rgba(3,12,28,.84));
    box-shadow: 0 0 48px rgba(0,0,0,.48), inset 0 0 34px rgba(255,196,68,.06);
}

.equipoModalPanel h2 {
    margin: 0 38px 0 0;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: clamp(34px, 7vh, 72px);
    line-height: 1;
    letter-spacing: 2px;
}

.equipoModalCerrar {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,213,94,.45);
    background: rgba(255,196,68,.05);
    color: #ffd45e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 18px;
    font-weight: 900;
}

.equipoModalCampos {
    display: grid;
    gap: 0;
}

.equipoModalCampos label {
    display: grid;
    gap: 7px;
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 3px;
}

.equipoModalCampos input,
.equipoModalCampos select,
.equipoLogoCarga span {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(89,199,255,.28);
    background: rgba(1,8,22,.72);
    color: #ffffff;
    font: inherit;
    font-size: 16px;
    letter-spacing: 1px;
    outline: none;
}

.equipoModalCampos input:focus,
.equipoModalCampos select:focus {
    border-color: rgba(255,213,94,.82);
    box-shadow: 0 0 18px rgba(255,196,68,.16);
}

.equipoUnirseResultado {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(89,199,255,.32);
    background: linear-gradient(90deg, rgba(89,199,255,.08), rgba(255,213,94,.05));
}

.equipoUnirseResultado[hidden],
.equipoUnirseAcciones[hidden] {
    display: none;
}

.equipoUnirseResultado img {
    width: 78px;
    aspect-ratio: 1;
    object-fit: contain;
    border: 1px solid rgba(255,213,94,.46);
    background: rgba(0,5,15,.70);
}

.equipoUnirseResultado span {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 4px;
}

.equipoUnirseResultado strong {
    display: block;
    margin-top: 2px;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 1px;
}

.equipoUnirseResultado small {
    display: block;
    margin-top: 8px;
    color: #b9c9df;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.equipoUnirseAcciones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.equipoUnirseAcciones button {
    min-height: 42px;
    border: 1px solid rgba(255,213,94,.72);
    background: rgba(255,196,68,.06);
    color: #ffd45e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4px;
}

.equipoUnirseAcciones button:last-child {
    border-color: rgba(89,199,255,.34);
    background: rgba(89,199,255,.06);
    color: #70ccff;
}

.equipoUnirseAcciones button:hover {
    color: #ffffff;
    box-shadow: 0 0 20px rgba(89,199,255,.14);
}

.equipoLogoCarga {
    position: relative;
}

.equipoLogoCarga input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.equipoLogoCarga span {
    display: grid;
    place-items: center;
    color: #dcecff;
}

.equipoLogoPreviewBox {
    width: 132px;
    aspect-ratio: 1;
    justify-self: center;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,213,94,.52);
    background: rgba(0,7,18,.62);
    box-shadow: inset 0 0 24px rgba(89,199,255,.06);
}

.equipoLogoPreviewBox img {
    width: 82%;
    height: 82%;
    object-fit: contain;
}

.perfilListaItem {
    padding: 13px 14px;
    border: 1px solid rgba(89,199,255,.18);
    background: rgba(89,199,255,.05);
    color: #dcecff;
    font-size: 14px;
    font-weight: 700;
}

.perfilRendimiento {
    display: grid;
    gap: 16px;
}

.perfilRankGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.perfilRankGrid div {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid rgba(255,213,94,.30);
    background: rgba(255,196,68,.05);
}

.perfilRankGrid span,
.perfilStatItem span {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.perfilRankGrid strong {
    color: #ffd55e;
    font-family: 'Rajdhani',sans-serif;
    font-size: 22px;
}

.perfilHexStats {
    position: relative;
    width: min(260px, 100%);
    aspect-ratio: 1;
    margin: 14px auto 8px;
}

.perfilHexGrid,
.perfilHexFill {
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 6%, 88% 28%, 88% 72%, 50% 94%, 12% 72%, 12% 28%);
}

.perfilHexGrid {
    z-index: 1;
    border: 1px solid rgba(89,199,255,.38);
    background:
        linear-gradient(30deg, transparent 49%, rgba(89,199,255,.22) 50%, transparent 51%),
        linear-gradient(90deg, transparent 49%, rgba(89,199,255,.16) 50%, transparent 51%),
        linear-gradient(150deg, transparent 49%, rgba(89,199,255,.22) 50%, transparent 51%),
        rgba(89,199,255,.05);
    box-shadow: inset 0 0 30px rgba(89,199,255,.08);
}

.perfilHexGrid::before,
.perfilHexGrid::after {
    content: "";
    position: absolute;
    inset: 14%;
    clip-path: inherit;
    border: 1px solid rgba(89,199,255,.22);
}

.perfilHexGrid::after {
    inset: 28%;
}

.perfilHexFill {
    z-index: 2;
    background: linear-gradient(145deg, rgba(255,213,94,.72), rgba(89,199,255,.44));
    opacity: .78;
    filter: drop-shadow(0 0 16px rgba(255,196,68,.22));
}

.perfilHexMarco {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: 86%;
    height: 96%;
    object-fit: contain;
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: drop-shadow(0 0 16px rgba(89,199,255,.18));
}

.perfilHexCentro {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,213,94,.65);
    background: rgba(2,8,20,.88);
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    clip-path: polygon(50% 5%, 90% 27%, 90% 73%, 50% 95%, 10% 73%, 10% 27%);
}

.perfilHexIcono {
    position: absolute;
    z-index: 4;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(89,199,255,.36);
    background: rgba(1,8,22,.74);
    color: #70ccff;
    box-shadow: 0 0 14px rgba(89,199,255,.12);
}

.perfilHexIcono svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.perfilHexIcono1 {
    left: 50%;
    top: 2%;
    transform: translate(-50%, -50%);
}

.perfilHexIcono2 {
    right: 5%;
    top: 24%;
    transform: translate(50%, -50%);
}

.perfilHexIcono3 {
    right: 5%;
    bottom: 24%;
    transform: translate(50%, 50%);
}

.perfilHexIcono4 {
    left: 50%;
    bottom: 2%;
    transform: translate(-50%, 50%);
}

.perfilHexIcono5 {
    left: 5%;
    bottom: 24%;
    transform: translate(-50%, 50%);
}

.perfilHexIcono6 {
    left: 5%;
    top: 24%;
    transform: translate(-50%, -50%);
}

.perfilStatsLista {
    display: grid;
    gap: 9px;
}

.perfilStatItem {
    display: flex;
    justify-content: space-between;
    gap: 0;
    padding: 9px 11px;
    border: 1px solid rgba(89,199,255,.18);
    background: rgba(89,199,255,.05);
}

.perfilStatItem strong {
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 18px;
}

.perfilTorneos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.perfilTorneosVacio {
    grid-column: 1 / -1;
    min-height: 170px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0;
    border: 1px solid rgba(89,199,255,.20);
    background: rgba(89,199,255,.045);
    text-align: center;
}

.perfilTorneosVacio span,
.torneosEstado span {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4.5px;
}

.perfilTorneosVacio strong,
.torneosEstado strong {
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 24px;
    letter-spacing: 1px;
}

.perfilTorneosVacio button {
    min-width: 180px;
    min-height: 44px;
    border: 1px solid rgba(255,213,94,.78);
    background: linear-gradient(90deg, rgba(255,196,68,.18), rgba(255,255,255,.04), rgba(255,196,68,.12));
    color: #ffd45e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
}

.perfilTorneosVacio button:hover {
    border-color: rgba(255,231,148,.96);
    color: #ffffff;
    box-shadow: 0 0 22px rgba(255,196,68,.16);
}

.torneosPagina {
    min-height: 720px;
    padding: 58px clamp(28px, 5vw, 88px);
    color: #ffffff;
}

.torneosCabecera {
    max-width: 720px;
    margin-bottom: 30px;
}

.torneosCabecera h1 {
    margin: 10px 0 12px;
    font-family: 'Rajdhani',sans-serif;
    font-size: clamp(54px, 8vw, 104px);
    line-height: .88;
    letter-spacing: 0;
}

.torneosCabecera p {
    color: #d8e8ff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}

.torneosEstado {
    min-height: 260px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0;
    border: 1px solid rgba(255,213,94,.34);
    background: linear-gradient(145deg, rgba(2,8,20,.86), rgba(3,15,34,.66));
    box-shadow: inset 0 0 34px rgba(89,199,255,.05);
    text-align: center;
}

.torneosEstado p {
    max-width: 620px;
    margin: 0;
    color: #d8e8ff;
    font-size: 16px;
    font-weight: 700;
}

.adminPagina {
    min-height: 720px;
    padding: 58px clamp(28px, 5vw, 88px);
    color: #ffffff;
}

.adminCabecera {
    max-width: 760px;
    margin-bottom: 28px;
}

.adminCabecera h1 {
    margin: 10px 0 12px;
    font-family: 'Rajdhani',sans-serif;
    font-size: clamp(48px, 7vw, 92px);
    line-height: .9;
    letter-spacing: 0;
}

.adminCabecera p {
    color: #d8e8ff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}

.adminEstado {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(255,213,94,.36);
    background: rgba(255,196,68,.055);
    color: #ffd55e;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
}

.adminLocalAviso {
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid rgba(89,199,255,.28);
    background: rgba(89,199,255,.055);
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 3px;
}

.adminPanel {
    display: none;
    grid-template-columns: 1fr;
    gap: 18px;
}

.adminPanel section {
    min-height: 0;
    padding: 22px;
    border: 1px solid rgba(89,199,255,.24);
    background: linear-gradient(145deg, rgba(2,8,20,.90), rgba(3,15,34,.72));
    box-shadow: inset 0 0 28px rgba(89,199,255,.05);
}

.adminPanel span {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4.5px;
}

.adminPanel strong {
    display: block;
    margin: 8px 0 12px;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 24px;
    letter-spacing: 1px;
}

.adminPanel p {
    margin: 0;
    color: #d8e8ff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
}

.adminCard {
    display: grid;
    align-content: start;
    gap: 16px;
}

.adminCardAmplia {
    width: 100%;
}

.adminFormGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.adminCampoAncho {
    grid-column: 1 / -1;
}

.adminCard label,
.torneoCard label {
    display: grid;
    gap: 7px;
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}

.adminCard input,
.adminCard textarea,
.adminCard select,
.torneoCard select {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(89,199,255,.32);
    background: rgba(1,8,22,.58);
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 15px;
    font-weight: 800;
}

.adminCard textarea {
    min-height: 110px;
    padding: 12px;
    resize: vertical;
    line-height: 1.35;
}

.adminCoverCarga input {
    display: none;
}

.adminCoverCarga span {
    min-height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(89,199,255,.36);
    background: rgba(1,8,22,.58);
    color: #d8e8ff;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 3px;
}

.adminCoverCarga span:hover {
    border-color: rgba(255,213,94,.68);
    color: #ffd55e;
}

.adminTournamentCoverPreview {
    height: 190px;
    border: 1px solid rgba(255,213,94,.34);
    background: rgba(1,8,22,.62);
    overflow: hidden;
}

.adminTournamentCoverPreview img,
.torneoCardCover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.adminNotificationPreview {
    min-height: 150px;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    border: 1px solid rgba(255,213,94,.34);
    background:
        radial-gradient(circle at 12% 20%, rgba(255,213,94,.10), transparent 34%),
        rgba(1,8,22,.62);
    padding: 14px;
}

.adminNotificationPreview img {
    width: 132px;
    height: 118px;
    object-fit: cover;
    object-position: center;
    border: 1px solid rgba(112,204,255,.34);
    background: rgba(2,8,20,.9);
}

.adminNotificationPreview div {
    min-width: 0;
}

.adminNotificationPreview p {
    margin: 0;
    color: #d8e8ff;
    overflow-wrap: anywhere;
}

.adminCard button,
.torneoRegistroBoton {
    min-height: 44px;
    width: min(100%, 420px);
    border: 1px solid rgba(255,213,94,.58);
    background: rgba(255,196,68,.07);
    color: #ffd55e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
}

.adminCard button:hover,
.torneoRegistroBoton:hover {
    border-color: rgba(255,231,148,.95);
    color: #ffffff;
    box-shadow: 0 0 22px rgba(255,196,68,.16);
}

.adminCard button:disabled,
.torneoRegistroBoton:disabled,
.torneoCard select:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.adminResumen {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(89,199,255,.24);
    background: rgba(89,199,255,.055);
    color: #d8e8ff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
}

.torneosLista {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 40%));
    gap: 18px;
    justify-content: start;
    align-items: start;
    margin-top: 22px;
}

.torneoCard {
    display: grid;
    gap: 0;
    padding: 20px;
    border: 1px solid rgba(89,199,255,.24);
    background: linear-gradient(145deg, rgba(2,8,20,.90), rgba(3,15,34,.72));
}

.torneosLista .torneoCard {
    position: relative;
    overflow: hidden;
    gap: 0;
    padding: 0;
    width: 100%;
    max-width: 540px;
    border-color: rgba(89,199,255,.34);
    background:
        linear-gradient(180deg, rgba(2,8,20,.34), rgba(2,8,20,.96) 47%),
        linear-gradient(145deg, rgba(2,8,20,.94), rgba(3,15,34,.82));
    box-shadow: 0 18px 34px rgba(0,0,0,.28);
}

.torneoCardCover {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 1px solid rgba(255,213,94,.26);
    background: rgba(1,8,22,.62);
    object-fit: contain;
    object-position: center;
}

.torneosLista .torneoCardCover {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-bottom: 1px solid rgba(89,199,255,.24);
    background:
        radial-gradient(circle at 50% 45%, rgba(89,199,255,.12), transparent 58%),
        rgba(1,8,22,.72);
    object-fit: contain;
    object-position: center;
}

.torneoCardBody {
    display: grid;
    gap: 14px;
    padding: 18px 20px 20px;
}

.torneoCardInfo {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.torneoCardCountdown {
    width: fit-content;
    margin-top: 5px !important;
    padding: 4px 9px;
    border: 1px solid rgba(255,213,94,.36);
    border-radius: 3px;
    background: rgba(255,213,94,.08);
    color: #ffd55e !important;
    font-family: 'Rajdhani',sans-serif;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 1.6px;
}

.torneoCardCountdownActivo {
    border-color: rgba(112,204,255,.42);
    background: rgba(89,199,255,.08);
    color: #70ccff !important;
}

.torneoCardCountdownCerrado {
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.045);
    color: #aebbd0 !important;
}

.torneoCardActions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    justify-content: start;
}

.torneosLista .torneoRegistroBoton,
.torneosLista .torneoCard > .torneoRegistroBoton {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 4px;
    font-size: 11px;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(255,213,94,.34);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        color .18s ease,
        background .18s ease;
}

.torneosLista .torneoRegistroBoton::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,.08);
    pointer-events: none;
}

.torneosLista .torneoRegistroBoton:hover {
    transform: translateY(-1px);
}

.torneosLista .torneoRegistroPrincipal {
    border-color: rgba(255,213,94,.78);
    background:
        linear-gradient(180deg, rgba(255,213,94,.24), rgba(255,196,68,.08)),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.14), transparent 42%);
    color: #ffe69a;
    box-shadow:
        inset 0 0 16px rgba(255,196,68,.08),
        0 0 16px rgba(255,196,68,.06);
}

.torneosLista .torneoRegistroPrincipal:hover {
    border-color: rgba(255,232,151,.96);
    background:
        linear-gradient(180deg, rgba(255,224,126,.30), rgba(255,196,68,.11)),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.18), transparent 42%);
    color: #ffffff;
    box-shadow:
        inset 0 0 18px rgba(255,196,68,.12),
        0 0 20px rgba(255,196,68,.18);
}

.torneosLista .torneoRegistroSecundario {
    border-color: rgba(89,199,255,.56);
    background:
        linear-gradient(180deg, rgba(89,199,255,.16), rgba(89,199,255,.04)),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.11), transparent 42%);
    color: #d8f2ff;
    box-shadow:
        inset 0 0 16px rgba(89,199,255,.08),
        0 0 16px rgba(89,199,255,.05);
}

.torneosLista .torneoRegistroSecundario:hover {
    border-color: rgba(112,204,255,.92);
    color: #ffffff;
    background:
        linear-gradient(180deg, rgba(112,204,255,.22), rgba(89,199,255,.07)),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.15), transparent 42%);
    box-shadow:
        inset 0 0 18px rgba(89,199,255,.12),
        0 0 20px rgba(89,199,255,.16);
}

@media (max-width: 820px) {
    .torneosLista {
        grid-template-columns: 1fr;
    }

    .torneosLista .torneoCard {
        max-width: none;
    }
}

.adminConfirmModal {
    position: fixed;
    inset: 0;
    z-index: 12100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.adminConfirmModalActivo {
    display: flex;
}

.adminConfirmOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1,5,15,.86);
    backdrop-filter: blur(14px);
}

.adminConfirmPanel {
    position: relative;
    z-index: 2;
    width: min(620px, calc(100vw - 42px));
    max-height: calc(100vh - 42px);
    overflow: auto;
    padding: 26px;
    border: 1px solid rgba(255,213,94,.52);
    background: linear-gradient(145deg, rgba(2,8,20,.96), rgba(3,15,34,.90));
    box-shadow: 0 0 48px rgba(0,0,0,.58);
}

.adminConfirmClose {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,213,94,.56);
    background: rgba(255,196,68,.08);
    color: #ffd55e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 18px;
    font-weight: 900;
}

.adminConfirmPanel > span {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 5px;
}

.adminConfirmPanel > strong {
    display: block;
    margin: 8px 42px 8px 0;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: clamp(34px, 6vw, 58px);
    line-height: .95;
    letter-spacing: 2px;
}

.adminConfirmPanel > p {
    margin: 0 0 18px;
    color: #d8e8ff;
    font-size: 15px;
    font-weight: 700;
}

.adminConfirmPreview .torneoCard {
    margin: 0;
}

.adminConfirmActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 16px;
}

.adminConfirmActions button {
    min-height: 44px;
    border: 1px solid rgba(255,213,94,.58);
    background: rgba(255,196,68,.07);
    color: #ffd55e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
}

.adminConfirmActions button:last-child {
    border-color: rgba(89,199,255,.34);
    color: #d8e8ff;
}

.torneoCard span {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4.5px;
}

.torneoCard strong {
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 28px;
    font-weight: 900;
}

.torneoCard p {
    margin: 0;
    color: #ffd55e;
    font-size: 14px;
    font-weight: 800;
}

.torneoCardInscrito {
    border-color: rgba(80,190,255,.58);
    box-shadow: 0 0 24px rgba(80,190,255,.12);
}

.torneoDetalleVista {
    display: none;
}

.torneoDetalleVistaActivo {
    display: block;
}

.torneoDetallePanel {
    display: grid;
    gap: 18px;
    padding: 24px;
    border: 1px solid rgba(89,199,255,.28);
    background: linear-gradient(145deg, rgba(2,8,20,.92), rgba(3,15,34,.76));
}

.torneoDetallePanel img {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border: 1px solid rgba(255,213,94,.28);
}

.torneoDetallePanel span {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4.5px;
}

.torneoDetallePanel h2 {
    margin: 0;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: clamp(38px, 6vw, 76px);
    line-height: .95;
}

.torneoBracketPanel {
    display: grid;
    gap: 20px;
    padding: 22px;
    border: 1px solid rgba(255,213,94,.32);
    background:
        linear-gradient(180deg, rgba(2,8,20,.82), rgba(2,8,20,.48)),
        radial-gradient(circle at 50% 0%, rgba(89,199,255,.13), transparent 48%);
    box-shadow: inset 0 0 34px rgba(0,0,0,.38);
}

.torneoDetalleTabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 260px));
    justify-content: center;
    gap: 12px;
}

.torneoDetalleTabButton {
    position: relative;
    overflow: hidden;
    min-height: 42px;
    border: 1px solid rgba(89,199,255,.38);
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(89,199,255,.14), rgba(89,199,255,.035)),
        rgba(2,8,20,.76);
    color: #d8f2ff;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(89,199,255,.28);
}

.torneoDetalleTabButton::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 3px;
    pointer-events: none;
}

.torneoDetalleTabButton:hover,
.torneoDetalleTabButtonActivo {
    border-color: rgba(255,213,94,.74);
    background:
        linear-gradient(180deg, rgba(255,213,94,.22), rgba(255,196,68,.07)),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.13), transparent 46%),
        rgba(2,8,20,.82);
    color: #ffe69a;
    box-shadow: 0 0 20px rgba(255,196,68,.12);
}

.torneoDetalleTabPanel {
    display: none;
    gap: 16px;
}

.torneoDetalleTabPanelActivo {
    display: grid;
}

.torneoBracketHeader {
    display: grid;
    gap: 4px;
    text-align: center;
}

.torneoBracketHeader span {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 4px;
}

.torneoBracketHeader strong {
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: 3px;
}

.torneoBracketHeader p {
    margin: 0;
    color: #d8e8ff;
    font-size: 14px;
    font-weight: 800;
}

.torneoPredictionsHeader {
    max-width: 980px;
    width: 100%;
    justify-self: center;
}

.torneoBracketFormat {
    display: grid;
    gap: 18px;
    overflow-x: auto;
    padding: 0 0 8px;
}

.torneoBracketFormatIntro {
    display: grid;
    gap: 4px;
    text-align: center;
}

.torneoBracketFormatIntro span {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 4px;
}

.torneoBracketFormatIntro strong {
    color: #ffd55e;
    font-family: 'Rajdhani',sans-serif;
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 900;
    letter-spacing: 3px;
}

.torneoBracketFormatIntro p {
    margin: 0;
    color: #d8e8ff;
    font-size: 13px;
    font-weight: 800;
}

.torneoBracketFlow {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 8px;
    align-items: center;
}

.torneoBracketFlow span {
    min-height: 38px;
    display: grid;
    place-items: center;
    padding: 6px 8px;
    border: 1px solid rgba(255,213,94,.34);
    background: rgba(255,213,94,.07);
    color: #ffe69a;
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-align: center;
}

.torneoBracketFlow em {
    display: none;
}

.torneoBracketAdjust {
    display: grid;
    gap: 10px;
    justify-items: end;
}

.torneoBracketAdjustToggle,
.torneoBracketAdjustReset {
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid rgba(255,213,94,.42);
    border-radius: 4px;
    background: rgba(255,213,94,.08);
    color: #ffd55e;
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    cursor: pointer;
}

.torneoBracketAdjustToggle:hover,
.torneoBracketAdjustReset:hover {
    border-color: rgba(255,213,94,.82);
    background: rgba(255,213,94,.14);
}

.torneoBracketAdjustPanel {
    width: min(100%, 980px);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(89,199,255,.28);
    border-radius: 6px;
    background: rgba(2,8,20,.86);
    box-shadow: inset 0 0 24px rgba(89,199,255,.06);
}

.torneoBracketAdjustPanel[hidden] {
    display: none;
}

.torneoBracketAdjustPanel p {
    margin: 0;
    color: #d8e8ff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.torneoBracketAdjustOutput {
    min-height: 34px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(0,0,0,.28);
    color: #ffd55e;
    font-family: Consolas, monospace;
    font-size: 10px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.torneoBracketTreeDragActivo [data-bracket-drag] {
    cursor: grab;
    outline: 1px dashed rgba(255,213,94,.62);
    outline-offset: 4px;
}

.torneoBracketTreeDragActivo [data-bracket-drag]:active {
    cursor: grabbing;
}

.torneoBracketTreeDragActivo [data-bracket-drag]::selection {
    background: transparent;
}

.torneoBracketTree {
    min-width: var(--bracket-tree-width, 1220px);
    display: grid;
    grid-template-columns: 1.26fr 1.04fr 1fr;
    gap: var(--bracket-column-gap, 58px);
    align-items: start;
    padding: 26px 10px 10px;
    --bracket-match-height: 150px;
    --bracket-match-gap: 26px;
    --bracket-line-span: 58px;
    --bracket-line-offset: -59px;
    --bracket-line-thickness: 2px;
    --bracket-semi-gap: 202px;
    --bracket-semi-top: 88px;
    --bracket-final-top: 264px;
    --bracket-final-join-top: 234px;
    --bracket-final-join-height: 430px;
    --bracket-line: rgba(89,199,255,.72);
    --bracket-line-soft: rgba(89,199,255,.42);
    --bracket-line-glow: 0 0 12px rgba(89,199,255,.45), 0 0 24px rgba(89,199,255,.18);
}

.torneoBracketTreeRound {
    position: relative;
    display: grid;
    gap: var(--bracket-match-gap);
}

.torneoBracketTreeRound h3 {
    margin: 0;
    min-height: 42px;
    display: grid;
    place-items: center;
    padding: 7px 10px;
    border: 1px solid rgba(89,199,255,.3);
    background: rgba(2,8,20,.68);
    color: #ffd55e;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2.3px;
    text-align: center;
}

.torneoBracketTreeRound h3 small {
    display: block;
    color: #d8e8ff;
    font-size: 10px;
    letter-spacing: 1.4px;
}

.torneoBracketTreeMatch {
    position: relative;
    display: grid;
    min-height: var(--bracket-match-height);
    border: 1px solid rgba(89,199,255,.38);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(9,24,43,.96), rgba(3,10,22,.94));
    box-shadow:
        0 14px 30px rgba(0,0,0,.28),
        inset 0 0 22px rgba(89,199,255,.055);
}

.torneoBracketTreeRound:not(:last-child) .torneoBracketTreeMatch::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--bracket-line-offset, -59px);
    width: var(--bracket-line-span, 58px);
    height: var(--bracket-line-thickness, 2px);
    background: linear-gradient(90deg, var(--bracket-line), var(--bracket-line-soft));
    box-shadow: var(--bracket-line-glow);
}

.torneoBracketTreeRound:first-child .torneoBracketTreeMatch:nth-of-type(2)::before,
.torneoBracketTreeRound:first-child .torneoBracketTreeMatch:nth-of-type(4)::before {
    content: "";
    position: absolute;
    right: var(--bracket-line-offset, -59px);
    top: calc(-50% - var(--bracket-match-gap));
    width: var(--bracket-line-thickness, 2px);
    height: calc(100% + var(--bracket-match-gap));
    background: linear-gradient(180deg, transparent, var(--bracket-line) 12%, var(--bracket-line) 88%, transparent);
    box-shadow: var(--bracket-line-glow);
}

.torneoBracketTreeRoundMiddle::after {
    content: "";
    position: absolute;
    width: var(--bracket-line-thickness, 2px);
    background: linear-gradient(180deg, transparent, var(--bracket-line-soft) 8%, var(--bracket-line) 50%, var(--bracket-line-soft) 92%, transparent);
    box-shadow: var(--bracket-line-glow);
    pointer-events: none;
}

.torneoBracketTreeRoundMiddle::after {
    right: var(--bracket-line-offset, -59px);
    top: var(--bracket-final-join-top, 234px);
    height: var(--bracket-final-join-height, 430px);
}

.torneoBracketTreeRoundMiddle .torneoBracketTreeMatch::before,
.torneoBracketTreeRoundFinal .torneoBracketTreeMatch::before {
    content: "";
    position: absolute;
    left: var(--bracket-line-offset, -59px);
    top: 50%;
    width: var(--bracket-line-span, 58px);
    height: var(--bracket-line-thickness, 2px);
    background: linear-gradient(90deg, var(--bracket-line-soft), var(--bracket-line));
    box-shadow: var(--bracket-line-glow);
}

.torneoBracketTreeMatchHeader,
.torneoBracketTreeFooter {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px;
    background: rgba(1,6,16,.46);
    color: #d8e8ff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.torneoBracketTreeMatchHeader strong,
.torneoBracketTreeFooter span {
    color: #70ccff;
}

.torneoBracketTreeFooter strong {
    color: #ffd55e;
}

.torneoBracketTreeTeams {
    display: grid;
}

.torneoBracketSlot {
    min-height: 46px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-top: 1px solid rgba(89,199,255,.2);
    color: #ffffff;
}

.torneoBracketSlotLogo {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,213,94,.26);
    background: rgba(0,0,0,.28);
}

.torneoBracketSlotLogo img {
    width: auto;
    height: auto;
    max-width: 26px;
    max-height: 26px;
    border: 0;
    object-fit: contain;
}

.torneoBracketSlotText {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.torneoBracketSlotText strong {
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.torneoBracketSlotText small {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.torneoBracketSlot em {
    color: #d8e8ff;
    font-style: normal;
    font-size: 18px;
    text-align: center;
}

.torneoBracketSlotPendiente {
    opacity: .66;
}

.torneoBracketSlotPendiente .torneoBracketSlotText strong {
    color: #aebbd0;
    font-style: italic;
}

.torneoBracketTreeRoundMiddle {
    gap: var(--bracket-semi-gap, 202px);
}

.torneoBracketTreeRoundFinal {
    gap: 28px;
}

.torneoBracketTreeRoundMiddle .torneoBracketTreeMatch:first-of-type {
    margin-top: var(--bracket-semi-top, 88px);
}

.torneoBracketTreeRoundFinal .torneoBracketTreeMatch:first-of-type {
    margin-top: var(--bracket-final-top, 264px);
}

.torneoBracketChampion {
    display: grid;
    gap: 5px;
    place-items: center;
    min-height: 104px;
    border: 1px solid rgba(255,213,94,.46);
    border-radius: 6px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,213,94,.16), transparent 52%),
        rgba(2,8,20,.72);
}

.torneoBracketChampion span {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 4px;
}

.torneoBracketChampionLogo {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,213,94,.34);
    background: rgba(0,0,0,.28);
}

.torneoBracketChampionLogo img {
    width: auto;
    height: auto;
    max-width: 36px;
    max-height: 36px;
    border: 0;
    object-fit: contain;
}

.torneoBracketChampion strong {
    color: #ffd55e;
    font-family: 'Rajdhani',sans-serif;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 3px;
}

.torneoBracketGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(340px, 1fr));
    gap: 16px;
}

.torneoBracketMatch {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(89,199,255,.26);
    background: rgba(2,8,20,.52);
}

.torneoBracketRound div {
    min-height: 38px;
    color: #ffd55e;
}

.torneoBracketVersus {
    gap: 10px;
}

.torneoBracketVersus .worldPredictionTeam {
    min-height: 156px;
    padding: 42px 12px 14px;
}

.torneoBracketVersus .worldPredictionPool,
.torneoBracketVersus .worldPredictionPlayers {
    min-height: 24px;
    font-size: 9px;
    letter-spacing: 1.4px;
}

.torneoBracketVersus .worldPredictionPool {
    color: #ffd55e;
}

.torneoBracketVersus .worldPredictionPlayers {
    color: #8fe6ff;
}

.torneoBracketVersus .worldPredictionLogo {
    width: 62px;
    height: 62px;
}

.torneoBracketVersus .worldPredictionLogo img {
    width: auto;
    height: auto;
    max-width: 50px;
    max-height: 50px;
    border: 0;
}

.torneoBracketVersus .worldPredictionTeam strong {
    font-size: 24px;
    letter-spacing: 3px;
}

.torneoBracketVersus .worldPredictionTeam small {
    width: 100%;
    font-size: 11px;
    line-height: 1.15;
    letter-spacing: 1.7px;
    overflow-wrap: anywhere;
}

.torneoPredictionTeamPending {
    opacity: .56;
    cursor: not-allowed;
}

.torneoPredictionTeamPending:hover {
    border-color: rgba(255,213,94,.42);
    box-shadow: inset 0 0 38px rgba(0,0,0,.38);
}

@media (max-width: 980px) {
    .torneoBracketGrid {
        grid-template-columns: 1fr;
    }

    .torneoBracketTree {
        min-width: 860px;
    }
}

@media (max-width: 620px) {
    .torneoBracketPanel {
        padding: 12px;
    }

    .torneoDetalleTabs {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .torneoDetalleTabButton {
        min-height: 38px;
        font-size: 10px;
        letter-spacing: 1.8px;
    }

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

.torneoDetalleEquipos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 210px));
    gap: 18px;
}

.torneoDetalleEquipo,
.perfilTorneoInscrito {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 13px 14px;
    border: 1px solid rgba(89,199,255,.22);
    background: rgba(89,199,255,.055);
    color: #dcecff;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 900;
}

button.torneoDetalleEquipo {
    position: relative;
    min-height: 270px;
    display: grid;
    place-items: center;
    align-content: center;
    justify-content: center;
    padding: 42px 26px 34px;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: center;
    overflow: visible;
}

button.torneoDetalleEquipo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/team-card-frame.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    filter: drop-shadow(0 0 18px rgba(255,196,68,.18));
}

.torneoDetalleEquipoLogo {
    position: relative;
    z-index: 1;
    width: 92px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 0;
    background: rgba(0,7,18,.18);
}

.torneoDetalleEquipoLogo img {
    width: 82%;
    height: 82%;
    max-height: none;
    object-fit: contain;
    border: 0;
}

.torneoDetalleEquipoTexto {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 7px;
    justify-items: center;
}

.torneoDetalleEquipoTexto strong {
    color: #ffffff;
    font-size: 25px;
    text-align: center;
}

.torneoDetalleEquipoTexto small {
    color: #70ccff;
    font-size: 13px;
    letter-spacing: 4.5px;
}

.torneoEquipoDetalleModal {
    position: fixed;
    inset: 0;
    z-index: 12140;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.torneoEquipoDetalleModalActivo {
    display: flex;
}

.torneoEquipoDetalleOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1,5,15,.86);
    backdrop-filter: blur(14px);
}

.torneoEquipoDetallePanel {
    position: relative;
    z-index: 2;
    width: min(720px, calc(100vw - 42px));
    min-height: 360px;
    padding: 86px 70px 68px;
    border: 0;
    background: transparent;
}

.torneoEquipoDetallePanel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/team-inspection-frame.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    filter: drop-shadow(0 0 26px rgba(255,196,68,.20));
}

.torneoEquipoDetalleCerrar {
    position: absolute;
    z-index: 3;
    top: 34px;
    right: 42px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,213,94,.56);
    background: rgba(2,8,20,.92);
    color: #ffd55e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 22px;
    font-weight: 900;
    box-shadow: 0 0 18px rgba(0,0,0,.55);
}

.torneoEquipoDetallePanel > span {
    position: relative;
    z-index: 1;
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 5px;
}

.torneoEquipoDetalleHeader {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: 18px 0;
}

.torneoEquipoDetalleHeader img {
    width: 118px;
    aspect-ratio: 1;
    object-fit: contain;
    border: 1px solid rgba(255,213,94,.42);
    background: rgba(0,7,18,.66);
}

.torneoEquipoDetalleHeader strong {
    display: block;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 38px;
    line-height: 1;
}

.torneoEquipoDetalleHeader small {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 4.5px;
}

.torneoEquipoDetalleRecord {
    min-width: 150px;
    padding: 13px 14px;
    border: 1px solid rgba(89,199,255,.24);
    background: rgba(89,199,255,.055);
    text-align: right;
}

.torneoEquipoDetalleRecord span {
    display: block;
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 4.5px;
}

.torneoEquipoDetalleRecord strong {
    display: block;
    margin: 4px 0;
    color: #ffd55e;
    font-family: 'Rajdhani',sans-serif;
    font-size: 30px;
    line-height: 1;
}

.torneoEquipoDetalleRecord small {
    color: #d8e8ff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
}

@media (max-width: 720px) {
    .torneoEquipoDetallePanel {
        padding: 62px 42px 46px;
    }

    .torneoEquipoDetalleCerrar {
        top: 34px;
        right: 34px;
    }

    .torneoEquipoDetalleHeader {
        grid-template-columns: auto 1fr;
    }

    .torneoEquipoDetalleRecord {
        grid-column: 1 / -1;
        text-align: left;
    }
}

.torneoEquipoJugadores {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 9px;
    margin-top: 8px;
}

.torneoEquipoJugador {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid rgba(89,199,255,.22);
    background: rgba(89,199,255,.055);
    color: #dcecff;
    font-family: 'Rajdhani',sans-serif;
    font-weight: 900;
}

.torneoEquipoJugadorPerfil {
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    color: #dcecff;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.torneoEquipoJugadorPerfil span {
    display: block;
    overflow-wrap: anywhere;
}

.torneoEquipoJugadorPerfil:hover span,
.torneoEquipoJugadorPerfil:focus-visible span {
    color: #70ccff;
    text-shadow: 0 0 12px rgba(112, 204, 255, .55);
}

.torneoEquipoJugadorPerfil:focus-visible {
    outline: 1px solid rgba(255,213,94,.75);
    outline-offset: 3px;
}

.torneoEquipoJugador strong {
    flex: 0 0 auto;
    color: #ffd55e;
    text-align: right;
}

.perfilTorneoInscrito button,
.torneoDetalleVolver {
    min-height: 38px;
    border: 1px solid rgba(255,213,94,.58);
    background: rgba(255,196,68,.07);
    color: #ffd55e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
}

.torneoInscripcionModal {
    position: fixed;
    inset: 0;
    z-index: 12120;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.torneoInscripcionModalActivo {
    display: flex;
}

.torneoInscripcionOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1,5,15,.86);
    backdrop-filter: blur(14px);
}

.torneoInscripcionPanel {
    position: relative;
    z-index: 2;
    width: min(520px, calc(100vw - 42px));
    padding: 26px;
    border: 1px solid rgba(255,213,94,.52);
    background: linear-gradient(145deg, rgba(2,8,20,.96), rgba(3,15,34,.90));
    box-shadow: 0 0 48px rgba(0,0,0,.58);
}

.torneoInscripcionCerrar {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,213,94,.56);
    background: rgba(255,196,68,.08);
    color: #ffd55e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 18px;
    font-weight: 900;
}

.torneoInscripcionPanel > span,
.torneoInscripcionPanel label {
    color: #70ccff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4.5px;
}

.torneoInscripcionPanel > strong {
    display: block;
    margin: 8px 42px 16px 0;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: clamp(34px, 6vw, 54px);
    line-height: .95;
}

.torneoInscripcionPerfil,
.torneoInscripcionPago,
.torneoInscripcionEstado {
    margin-bottom: 14px;
    padding: 13px 14px;
    border: 1px solid rgba(89,199,255,.24);
    background: rgba(89,199,255,.055);
    color: #d8e8ff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
}

.metodoPagoSelector {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.metodoPagoSelector legend {
    grid-column: 1 / -1;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, .74);
    font-family: 'Rajdhani',sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-align: center;
}

.metodoPagoSelector label {
    min-height: 42px;
    display: grid;
    place-items: center;
    position: relative;
    margin: 0;
    padding: 9px 10px;
    border: 1px solid rgba(89,199,255,.24);
    border-radius: 8px;
    background: rgba(0,0,0,.38);
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}

.metodoPagoSelector input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.metodoPagoSelector label:has(input:checked) {
    border-color: rgba(60,242,255,.82);
    background: linear-gradient(135deg, rgba(20,191,208,.28), rgba(99,217,130,.18));
    box-shadow: 0 0 18px rgba(48,222,255,.22);
}

.torneoInscripcionPanel label {
    display: grid;
    gap: 0;
    margin-bottom: 14px;
}

.torneoInscripcionPanel .metodoPagoSelector label {
    margin-bottom: 0;
}

.torneoInscripcionPanel select {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(89,199,255,.34);
    background: rgba(1,8,22,.72);
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 15px;
    font-weight: 900;
}

#torneoInscripcionConfirmar {
    min-height: 44px;
    width: 100%;
    border: 1px solid rgba(255,213,94,.64);
    background: rgba(255,196,68,.08);
    color: #ffd55e;
    cursor: pointer;
    font-family: 'Rajdhani',sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
}

.perfilTorneo {
    border: 1px solid rgba(255,213,94,.32);
    background: rgba(255,196,68,.05);
    padding: 18px;
}

.perfilTorneo span {
    color: #59c7ff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 4.5px;
}

.perfilTorneo strong {
    display: block;
    margin: 7px 0;
    color: #ffffff;
    font-family: 'Rajdhani',sans-serif;
    font-size: 25px;
}

.perfilTorneo p {
    color: #ffd55e;
    font-size: 13px;
    font-weight: 800;
}

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

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

    .perfilIdentidad,
    .perfilFormulario,
    .perfilPanelAncho {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .perfilPagina {
        width: min(100%, calc(100vw - 28px));
        padding-top: 24px;
    }

    .perfilCabecera {
        display: grid;
    }

    .perfilHeaderActions {
        justify-content: stretch;
    }

    .perfilHeaderActions button {
        width: 100%;
    }

    .perfilCabecera h1 {
        font-size: 48px;
    }

    .perfilGrid,
    .perfilTorneos,
    .adminFormGrid,
    .torneosLista {
        grid-template-columns: 1fr;
    }

    .adminCard button {
        width: 100%;
    }

    .coachEditorGrid,
    .coachEditorCampos {
        grid-template-columns: 1fr;
    }

    .coachEditorFoto {
        max-width: 190px;
    }

    .coachEditorAcciones button {
        width: 100%;
    }
}

@media (max-height: 680px) {

    .crearCuentaPanel {
        gap: 0;
        padding: 18px 22px 20px;
    }

    .crearCuentaPanel h2 {
        margin-bottom: 4px;
        font-size: 28px !important;
    }

    .crearCuentaPanel input {
        min-height: 36px;
    }

    .confirmarCrearCuenta {
        min-height: 38px;
    }
}

.confirmarCrearCuenta:hover {
    color: #ffffff;
    border-color: rgba(255,231,148,.95);
    box-shadow: 0 0 22px rgba(255,196,68,.18);
}

@media (max-width: 1180px) {

    #sidebar {
        height: 150px;
        align-content: flex-start;
        flex-wrap: wrap;
        gap: 10px 14px;
    }

    #contenidoPrincipal {
        height: calc(100vh - 150px);
        padding: 12px 38px 90px 38px;
    }

    #lineaVertical {
        top: 150px;
    }

    #sidebarBrand {
        margin-left: 0;
    }

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

@media (max-width: 760px) {

    #sidebar {
        height: 238px;
        padding: 10px 12px;
    }

    #logoBox {
        grid-template-columns: 52px 104px 66px;
        min-width: 240px;
        column-gap: 9px;
    }

    #logoN {
        width: 50px;
        height: 50px;
    }

    #logoBox h1 {
        font-size: 25px;
        letter-spacing: 3px;
    }

    #logoBox > span {
        font-size: 8px;
        letter-spacing: 2px;
    }

    #logoBox .audioToggle,
    #audioVolumeBox {
        width: 66px;
    }

    .menuBoton {
        padding: 9px 10px;
        font-size: 13px;
        letter-spacing: 1.5px;
    }

    .accountMenuCluster {
        margin-left: 0;
        gap: 0;
    }

    #btnLogin {
        margin-left: 0;
        padding: 10px 14px;
    }

    #sidebarBrand {
        display: none;
    }

    #contenidoPrincipal {
        height: calc(100vh - 238px);
        padding: 12px 22px 80px 22px;
    }

    #lineaVertical {
        top: 238px;
    }

    .loginIntro {
        padding-left: 18px;
    }

    .loginIntro h1 {
        font-size: 48px;
    }

    .loginIntro p {
        font-size: 17px;
    }

    .loginForm {
        padding: 20px;
    }

    .worldChampionshipPanel {
        width: 100%;
        min-height: 430px;
        margin-top: 6px;
    }

    .worldChampionshipText {
        width: 68%;
    }

    .worldChampionshipText h1 {
        font-size: 35px;
        letter-spacing: 3px;
    }

    .worldChampionshipText p {
        font-size: 14px;
        line-height: 1.5;
    }

    .worldReturnButton {
        top: 16px;
        left: 16px;
        min-width: 138px;
        min-height: 40px;
        font-size: 11px;
        letter-spacing: 2px;
    }

    .worldCountdownPanel {
        top: 13vh;
        width: calc(100vw - 28px);
        padding: 12px 10px 14px;
    }

    .worldCountdownPanel::before,
    .worldCountdownPanel::after {
        display: none;
    }

    .worldCountdownLabel {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .worldCountdownGrid {
        gap: 6px;
    }

    .worldCountdownUnit {
        min-height: 58px;
    }

    .worldCountdownUnit strong {
        font-size: 26px;
    }

    .worldCountdownUnit span {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .worldFloatingRelic {
        top: 47%;
        width: 130px;
        min-width: 0;
    }

    .worldSceneIntro {
        bottom: 6vh;
        width: calc(100vw - 30px);
    }

    .worldSceneMini {
        font-size: 10px;
        letter-spacing: 4.5px;
    }

    .worldSceneIntro h1 {
        font-size: 42px;
        letter-spacing: 3px;
    }

    .worldSceneIntro p {
        font-size: 15px;
        line-height: 1.45;
    }

}













/* Ajuste final para slots de ganadores ya definidos en semifinales */
.playoffCard.playoffCardS2 strong.playoffTeamNameSmall,
.playoffCard.playoffCardS4 strong.playoffTeamNameSmall {
    font-size: 24px !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    text-transform: uppercase;
}






.miniJuegosArcadeLayout .miniJuegoCard {
    align-self: start;
}

.starfallRankingList .starfallRankingState {
    grid-column: 1 / -1;
}

@media (max-width: 520px) {
    .starfallRankingList {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}
/* STARFALL COMPLEMENTED ARCADE PANELS */
.miniJuegosPagina {
    overflow: visible;
}

.miniJuegosHeader {
    display: none;
}

.miniJuegosArcadeLayout {
    position: relative;
    isolation: isolate;
    width: min(1120px, 100%);
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(390px, 500px) minmax(430px, 500px);
    gap: 22px;
    align-items: stretch;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    clip-path: none;
}

.miniJuegosArcadeLayout::before,
.miniJuegosArcadeLayout::after {
    display: none;
}

.miniJuegosArcadeLayout .miniJuegoCard,
.starfallRankingPanel {
    position: relative;
    z-index: 1;
    min-height: 570px;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(95, 240, 255, .16), transparent 35%),
        linear-gradient(180deg, rgba(2, 6, 20, .96), rgba(1, 4, 16, .98));
    box-shadow:
        inset 0 0 0 1px rgba(255, 213, 94, .38),
        inset 0 0 0 3px rgba(0, 0, 0, .82),
        0 0 0 1px rgba(95, 240, 255, .72),
        0 0 28px rgba(95, 240, 255, .18),
        0 20px 44px rgba(0, 0, 0, .48);
    clip-path: polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px));
}

.miniJuegosArcadeLayout .miniJuegoCard::before,
.starfallRankingPanel::before {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: 4;
    pointer-events: none;
    border: 1px solid rgba(95, 240, 255, .26);
    clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
}

.miniJuegosArcadeLayout .miniJuegoCard::after,
.starfallRankingPanel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px),
        linear-gradient(90deg, transparent, rgba(95, 240, 255, .08), transparent);
    opacity: .36;
    mix-blend-mode: screen;
}

.miniJuegosArcadeLayout .miniJuegoCard {
    display: grid;
    grid-template-rows: 285px 1fr;
    padding: 0;
}

.miniJuegoCover {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 213, 94, .48);
    background: #010412;
}

.miniJuegoCover img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border: 0;
    filter: saturate(1.32) contrast(1.14) brightness(1.06);
    transform: scale(1.04);
    mask-image: none;
}

.miniJuegoCover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 18%, rgba(1, 5, 16, .28) 64%, rgba(1, 5, 16, .92) 100%),
        radial-gradient(circle at 50% 36%, rgba(255, 213, 94, .16), transparent 40%);
}

.miniJuegoCover span {
    position: absolute;
    left: 22px;
    bottom: 18px;
    z-index: 2;
    padding: 5px 8px;
    border-left: 3px solid #ffd45e;
    background: rgba(1, 4, 16, .56);
    color: #5ff0ff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 8px;
    letter-spacing: 2px;
    text-shadow: 0 0 12px rgba(95, 240, 255, .88);
}

.miniJuegoBody {
    position: relative;
    z-index: 5;
    margin: 0;
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 22px 24px 30px;
    background:
        radial-gradient(circle at 82% 8%, rgba(214, 76, 255, .13), transparent 28%),
        repeating-linear-gradient(90deg, rgba(95, 240, 255, .035) 0 1px, transparent 1px 16px);
}

.miniJuegoBody > div:first-child > span,
.miniJuegoBody > div:first-child > h2 {
    display: none;
}

.starfallFeatureGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.starfallFeatureGrid div {
    min-height: 72px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    border: 1px solid rgba(95, 240, 255, .30);
    background:
        linear-gradient(180deg, rgba(95, 240, 255, .09), rgba(214, 76, 255, .05)),
        rgba(2, 8, 24, .72);
    box-shadow: inset 0 0 18px rgba(95, 240, 255, .06);
}

.starfallFeatureGrid div::before {
    content: "";
    width: 15px;
    height: 15px;
    border: 2px solid #ffd45e;
    transform: rotate(45deg);
    box-shadow: 0 0 14px rgba(255, 213, 94, .85), inset 0 0 10px rgba(255, 213, 94, .32);
}

.starfallFeatureGrid b,
.starfallFeatureGrid span {
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 7px;
    line-height: 1.25;
    text-align: center;
    letter-spacing: 1px;
}

.starfallFeatureGrid b {
    color: #5ff0ff;
    text-shadow: 0 0 10px rgba(95, 240, 255, .85);
}

.starfallFeatureGrid span {
    color: #d64cff;
}

.miniJuegoBody p {
    max-width: none;
    margin: 0;
    color: #d8f7ff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 8px;
    line-height: 1.75;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(95, 240, 255, .45);
}

.miniJuegoPlayButton {
    position: relative;
    overflow: hidden;
    width: min(340px, 100%);
    min-height: 56px;
    margin: 4px auto 0;
    border: 0;
    clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 20px 100%, 0 50%);
    background:
        linear-gradient(90deg, rgba(255, 213, 94, .16), transparent 18% 82%, rgba(255, 213, 94, .16)),
        rgba(2, 5, 18, .92);
    color: #ffd45e;
    box-shadow:
        inset 0 0 0 2px rgba(255, 213, 94, .86),
        inset 0 0 24px rgba(255, 213, 94, .14),
        0 0 24px rgba(255, 213, 94, .22);
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 18px;
    letter-spacing: 3px;
    text-shadow: 0 0 16px rgba(255, 213, 94, .82);
}

.miniJuegoPlayButton::before {
    content: ">>";
    margin-right: 18px;
}

.miniJuegoPlayButton::after {
    content: "<<";
    position: static;
    margin-left: 18px;
    background: none;
    transform: none;
    animation: none;
}

.starfallRankingPanel {
    display: grid;
    grid-template-rows: auto auto 1fr;
    padding: 34px 32px 30px;
}

.starfallRankingHeader {
    position: relative;
    z-index: 5;
    margin: 0 0 12px;
    text-align: center;
}

.starfallRankingHeader > span {
    display: none;
}

.starfallRankingHeader h2 {
    width: fit-content;
    margin: 0 auto 16px;
    padding: 10px 20px 12px;
    border-top: 1px solid rgba(95, 240, 255, .58);
    border-bottom: 1px solid rgba(214, 76, 255, .58);
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    line-height: 1;
    text-align: center;
}

.starfallRankingHeader h2 b,
.starfallRankingHeader h2 strong {
    display: inline;
    font-size: clamp(24px, 2.4vw, 34px);
    letter-spacing: 2px;
}

.starfallRankingHeader h2 b {
    color: #5ff0ff;
    text-shadow: 0 0 16px rgba(95, 240, 255, .75);
}

.starfallRankingHeader h2 strong {
    margin-left: 8px;
    color: #d64cff;
    text-shadow: 0 0 16px rgba(214, 76, 255, .76);
}

.starfallRankingRefreshBox {
    position: relative;
    z-index: 5;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 0 14px;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.starfallRankingRefreshBox i {
    display: none;
}

.starfallRankingRefreshBox small {
    color: #ffd45e;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 8px;
    letter-spacing: 1px;
    text-shadow: 0 0 12px rgba(255, 213, 94, .78);
}

.starfallRankingRefreshBox small::before,
.starfallRankingRefreshBox small::after {
    content: "::";
    margin: 0 10px;
    color: #8ae9ff;
}

.starfallRankingList {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto repeat(10, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 0;
    margin: 0;
    min-height: 0;
    border: 0;
    background: rgba(1, 4, 16, .50);
    box-shadow:
        inset 0 0 0 1px rgba(95, 240, 255, .38),
        inset 0 0 0 3px rgba(214, 76, 255, .18),
        inset 0 0 30px rgba(95, 240, 255, .07);
    padding: 16px 20px;
    clip-path: polygon(0 20px, 20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px));
    list-style: none;
}

.starfallRankingList::before {
    content: "#      JUGADOR                         SCORE";
    display: grid;
    align-items: center;
    min-height: 30px;
    color: #d64cff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 8px;
    letter-spacing: 1px;
    border-bottom: 1px dashed rgba(214, 76, 255, .32);
}

.starfallRankingItem,
.starfallRankingState,
.starfallRankingTop1,
.starfallRankingTop2,
.starfallRankingTop3 {
    min-height: 0;
}

.starfallRankingItem {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-bottom: 1px dotted rgba(95, 240, 255, .14);
}

.starfallRankingPosition {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #8ae9ff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 11px;
}

.starfallRankingTop1 .starfallRankingPosition {
    color: #ffd45e;
}

.starfallRankingName {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
}

.starfallRankingName::before {
    content: "...";
    color: #5ff0ff;
    animation: starfallNameNeon 3.2s linear infinite;
}

.starfallRankingName strong {
    color: #5ff0ff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 9px;
    letter-spacing: 0;
    text-shadow: 0 0 12px currentColor;
    animation: starfallNameNeon 4.2s linear infinite;
}

.starfallRankingAccountTrigger {
    width: fit-content;
    max-width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.starfallRankingAccountTrigger:focus-visible {
    outline: 1px solid #ffd45e;
    outline-offset: 3px;
}

.starfallRankingAccountTrigger:hover strong {
    color: #ffd45e;
    text-shadow: 0 0 14px rgba(255, 213, 94, .92), 0 0 28px rgba(214, 76, 255, .42);
}

.starfallRankingName span {
    display: none;
}

.starfallRankingScore {
    grid-column: auto;
    color: #ffd45e;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 9px;
    text-align: right;
    text-shadow: 0 0 14px rgba(255, 213, 94, .85);
}

.starfallAccountHoverModal {
    position: fixed;
    z-index: 12180;
    width: min(420px, calc(100vw - 24px));
    border: 1px solid rgba(95, 240, 255, .72);
    background:
        linear-gradient(180deg, rgba(2, 8, 23, .98), rgba(1, 4, 16, .98)),
        radial-gradient(circle at 50% 0%, rgba(214, 76, 255, .18), transparent 44%);
    box-shadow:
        inset 0 0 0 2px rgba(255, 213, 94, .16),
        inset 0 0 26px rgba(95, 240, 255, .08),
        0 16px 36px rgba(0, 0, 0, .62),
        0 0 28px rgba(95, 240, 255, .22);
    clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(.98);
    transition: opacity .16s ease, transform .16s ease;
}

.starfallAccountHoverModalActivo {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.starfallAccountCover {
    position: relative;
    height: 132px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 213, 94, .28);
}

.starfallAccountCover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.15) contrast(1.08);
}

.starfallAccountCover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(1, 4, 16, .12), rgba(1, 4, 16, .70));
}

.starfallAccountBody {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 20px 20px;
}

.starfallAccountPhoto {
    width: 96px;
    height: 96px;
    border: 2px solid rgba(255, 213, 94, .86);
    background: rgba(2, 8, 23, .96);
    object-fit: cover;
    object-position: center;
    box-shadow: 0 0 18px rgba(255, 213, 94, .24);
}

.starfallAccountInfo {
    min-width: 0;
    display: grid;
    gap: 5px;
    align-content: start;
}

.starfallAccountInfo span,
.starfallAccountInfo strong {
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    letter-spacing: 1px;
}

.starfallAccountInfo span {
    color: #ffd45e;
    font-size: 9px;
    text-shadow: 0 0 10px rgba(255, 213, 94, .68);
}

.starfallAccountInfo strong {
    color: #5ff0ff;
    font-size: 14px;
    line-height: 1.3;
    overflow-wrap: anywhere;
    text-shadow: 0 0 12px rgba(95, 240, 255, .72);
}

.starfallAccountInfo p {
    margin: 2px 0 0;
    color: #d8f7ff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

@keyframes starfallNameNeon {
    0%, 100% {
        color: #5ff0ff;
        text-shadow: 0 0 12px rgba(95, 240, 255, .9), 0 0 22px rgba(95, 240, 255, .45);
    }

    33% {
        color: #d64cff;
        text-shadow: 0 0 12px rgba(214, 76, 255, .9), 0 0 22px rgba(214, 76, 255, .45);
    }

    66% {
        color: #ffd45e;
        text-shadow: 0 0 12px rgba(255, 213, 94, .9), 0 0 22px rgba(255, 213, 94, .45);
    }
}

@media (max-width: 980px) {
    .miniJuegosArcadeLayout {
        grid-template-columns: minmax(280px, 520px);
    }

    .miniJuegosArcadeLayout .miniJuegoCard,
    .starfallRankingPanel {
        min-height: 0;
    }
}

/* STARFALL UNIFIED ARCADE PANEL */
.miniJuegosArcadeLayout {
    width: min(1120px, 100%);
    grid-template-columns: minmax(390px, 500px) minmax(430px, 500px);
    gap: 0;
    padding: 22px 24px;
    background:
        radial-gradient(circle at 18% 8%, rgba(95, 240, 255, .14), transparent 30%),
        radial-gradient(circle at 78% 12%, rgba(214, 76, 255, .15), transparent 32%),
        linear-gradient(180deg, rgba(2, 6, 20, .97), rgba(1, 4, 16, .99));
    box-shadow:
        inset 0 0 0 1px rgba(255, 213, 94, .55),
        inset 0 0 0 3px rgba(0, 0, 0, .86),
        inset 0 0 0 5px rgba(95, 240, 255, .34),
        0 0 0 1px rgba(255, 213, 94, .70),
        0 0 34px rgba(95, 240, 255, .18),
        0 22px 48px rgba(0, 0, 0, .52);
    clip-path: polygon(0 24px, 24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px));
}

.miniJuegosArcadeLayout::before {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: 1;
    pointer-events: none;
    border: 1px solid rgba(95, 240, 255, .26);
    clip-path: polygon(0 16px, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px));
}

.miniJuegosArcadeLayout::after {
    content: "";
    position: absolute;
    left: calc(50% + 4px);
    top: 34px;
    bottom: 34px;
    z-index: 2;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 213, 94, .86), transparent);
    box-shadow: 0 0 18px rgba(255, 213, 94, .82), 0 0 34px rgba(214, 76, 255, .42);
}

.miniJuegosArcadeLayout .miniJuegoCard,
.starfallRankingPanel {
    min-height: 545px;
    background: transparent;
    box-shadow: none;
    clip-path: none;
}

.miniJuegosArcadeLayout .miniJuegoCard {
    border-right: 1px solid rgba(255, 213, 94, .34);
    padding-right: 20px;
}

.starfallRankingPanel {
    padding: 34px 18px 30px 34px;
}

.miniJuegosInfoPanel {
    position: absolute;
    top: 214px;
    left: clamp(20px, 3vw, 54px);
    z-index: 4;
    width: clamp(190px, 14vw, 235px);
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    place-items: center;
    gap: 10px;
    padding: 0 22px;
    overflow: hidden;
    border: 0;
    background:
        linear-gradient(90deg, rgba(255, 213, 94, .16), transparent 18% 82%, rgba(255, 213, 94, .16)),
        rgba(2, 5, 18, .92);
    color: #ffd45e;
    cursor: pointer;
    box-shadow:
        inset 0 0 0 2px rgba(255, 213, 94, .86),
        inset 0 0 24px rgba(255, 213, 94, .14),
        0 0 24px rgba(255, 213, 94, .22);
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
}

.miniJuegosInfoPanel:hover,
.miniJuegosInfoPanel:focus-visible {
    color: #ffffff;
    outline: none;
    box-shadow:
        inset 0 0 0 2px rgba(255, 231, 148, .96),
        inset 0 0 24px rgba(255, 213, 94, .18),
        0 0 24px rgba(255, 213, 94, .28);
}

.miniJuegosInfoPanel::before {
    content: ">>";
    position: relative;
    z-index: 2;
    color: #ffd45e;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 9px;
    text-shadow: 0 0 16px rgba(255, 213, 94, .82);
}

.miniJuegosInfoPanel::after {
    content: "<<";
    position: relative;
    z-index: 2;
    color: #ffd45e;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 9px;
    text-shadow: 0 0 16px rgba(255, 213, 94, .82);
}

.miniJuegosInfoPanel span,
.miniJuegosInfoPanel strong {
    position: relative;
    z-index: 2;
    margin: 0;
    text-align: center;
    font-family: 'Press Start 2P', monospace;
    line-height: 1.35;
    text-transform: uppercase;
}

.miniJuegosInfoPanel span {
    display: none;
}

.miniJuegosInfoPanel strong {
    color: #ffd45e;
    font-size: clamp(8px, .62vw, 10px);
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: 0 0 16px rgba(255, 213, 94, .82);
}

#contenidoPrincipal .miniJuegosInfoPanel strong {
    margin: 0;
    color: #ffd45e;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: clamp(8px, .62vw, 10px);
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: 0 0 16px rgba(255, 213, 94, .82);
}

.miniJuegosInfoPanel:hover strong,
.miniJuegosInfoPanel:focus-visible strong,
.miniJuegosInfoPanel:hover::before,
.miniJuegosInfoPanel:hover::after,
.miniJuegosInfoPanel:focus-visible::before,
.miniJuegosInfoPanel:focus-visible::after {
    color: #ffffff;
}

.miniJuegosInfoModal {
    position: fixed;
    inset: 0;
    z-index: 16000;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.miniJuegosInfoModal .notificacionesModalOverlay {
    background: rgba(0, 4, 14, .78);
    backdrop-filter: blur(12px) saturate(.82);
}

.miniJuegosInfoModalPanel {
    width: min(720px, calc(100vw - 44px));
    max-height: min(680px, calc(100vh - 48px));
}

.miniJuegosInfoModalContenido .notificacionesVacio {
    min-height: 190px;
    align-content: center;
    padding: 28px;
}

.miniJuegosInfoTexto {
    display: grid;
    gap: 14px;
    padding: 26px;
    border: 1px solid rgba(95, 240, 255, .24);
    background: rgba(2, 8, 20, .68);
    color: #dcecff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.38;
}

.miniJuegosInfoTexto strong {
    color: #ffd45e;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: clamp(11px, 1.3vw, 15px);
    line-height: 1.45;
    text-shadow: 0 0 12px rgba(255, 213, 94, .62);
}

.miniJuegosInfoTexto p {
    margin: 0;
}

.miniJuegosInfoTexto b {
    color: #5ff0ff;
}

@media (max-width: 980px) {
    .miniJuegosInfoModal {
        padding: 18px;
    }

    .miniJuegosInfoModalPanel {
        width: min(620px, calc(100vw - 28px));
    }

    .miniJuegosInfoTexto {
        padding: 18px;
        font-size: 14px;
    }
}

@media (max-width: 1500px) {
    .miniJuegosInfoPanel {
        top: 178px;
        left: 16px;
        width: 190px;
    }
}

@media (max-width: 980px) {
    .miniJuegosInfoPanel {
        position: relative;
        top: auto;
        left: auto;
        width: min(210px, 100%);
        margin: 18px auto 0;
    }
}

/* STARFALL RANKING FIRST PLACE ONLY */
.starfallRankingName::before {
    content: "...";
    color: rgba(95, 240, 255, .55);
    animation: none;
}

.starfallRankingName strong {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, .18);
    animation: none;
}

.starfallRankingScore {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, .18);
}

.starfallRankingTop1 .starfallRankingName::before {
    content: "CROWN";
    color: #ffd45e;
    font-size: 7px;
    letter-spacing: 1px;
    animation: none;
    text-shadow: 0 0 12px rgba(255, 213, 94, .9);
}

.starfallRankingTop1 .starfallRankingName strong {
    animation: starfallNameNeon 3.4s linear infinite;
}

.starfallRankingTop1 .starfallRankingScore {
    color: #ffd45e;
    text-shadow: 0 0 14px rgba(255, 213, 94, .85);
}

/* MINI JUEGOS RETRO HEADER RESTORE */
.miniJuegosHeader {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 10px;
    width: min(780px, 100%);
    margin: 0 auto 22px;
    text-align: center;
}

.miniJuegosHeader .pendienteMiniText {
    color: #ffd45e;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    text-shadow: 0 0 12px rgba(255, 213, 94, .72);
}

.miniJuegosHeader h1 {
    margin: 0;
    color: #5ff0ff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: 2px;
    text-shadow:
        3px 0 0 rgba(214, 76, 255, .42),
        -3px 0 0 rgba(255, 213, 94, .24),
        0 0 22px rgba(95, 240, 255, .55);
}

.miniJuegosTituloOlaTexto .miniJuegosTituloPalabra > span {
    display: inline-block;
    transform-origin: 50% 85%;
    animation: miniJuegosLetraOla 1.7s ease-in-out infinite;
    animation-delay: calc(var(--i) * .07s);
    will-change: transform;
}

.miniJuegosTituloOlaTexto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateX(24px);
}

.miniJuegosTituloPalabra {
    display: inline-flex;
    align-items: center;
}

.miniJuegosTituloMini {
    margin-right: .28em;
}

.miniJuegosTituloJuegos {
    margin-left: 1.06em;
}

.miniJuegosTituloGif {
    width: clamp(58px, 7.1vw, 98px);
    height: clamp(72px, 8.9vw, 122px);
    display: inline-block;
    margin: 0;
    object-fit: contain;
    vertical-align: middle;
    transform: translateX(30px);
    filter: drop-shadow(0 0 12px rgba(255, 213, 94, .38));
}

@keyframes miniJuegosLetraOla {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    28% {
        transform: translateY(-7px) rotate(-1.5deg);
    }

    44% {
        transform: translateY(2px) rotate(1deg);
        text-shadow:
            4px 0 0 rgba(214, 76, 255, .52),
            -4px 0 0 rgba(255, 213, 94, .30),
            0 0 28px rgba(95, 240, 255, .68);
    }

    58% {
        transform: translateY(0) rotate(0deg);
    }
}

.miniJuegosHeader p {
    max-width: 680px;
    margin: 0 auto;
    color: #d8f7ff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    text-shadow: 0 0 12px rgba(95, 240, 255, .20);
}

/* NEXUS VIP HEADER */
.vipWidget {
    position: relative;
    min-width: 112px;
    border-color: rgba(255, 205, 54, .82);
    background:
        linear-gradient(135deg, rgba(255, 205, 54, .18), rgba(41, 15, 4, .76)),
        rgba(8, 9, 18, .92);
    color: #ffd84e;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .05),
        0 0 20px rgba(255, 190, 42, .12);
}

.vipWidget::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, transparent, rgba(255, 232, 116, .22), transparent);
    transform: translateX(-120%);
    animation: vipWidgetScan 3.6s linear infinite;
}

.vipWidget img {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 214, 62, .74));
}

.vipWidget strong {
    position: relative;
    z-index: 1;
    min-width: auto;
    color: #ffd84e;
    font-size: 14px;
    letter-spacing: 2px;
    text-shadow:
        0 0 7px rgba(255, 216, 78, .86),
        0 0 14px rgba(255, 133, 21, .36);
}

.vipWidgetActivo {
    border-color: rgba(255, 233, 132, .96);
    background:
        linear-gradient(135deg, rgba(255, 221, 86, .26), rgba(52, 19, 2, .84)),
        rgba(9, 7, 15, .94);
}

.compraCuentaPanel:has(.compraCuentaOpcionVip) {
    border-color: rgba(255, 205, 54, .86);
    box-shadow:
        0 0 52px rgba(255, 196, 68, .16),
        0 0 86px rgba(132, 61, 255, .12);
}

.compraCuentaPregunta,
.compraCuentaPrecio,
.compraCuentaBeneficios {
    display: block;
}

.compraCuentaPregunta {
    color: #ffffff;
    font-size: 19px;
    font-weight: 900;
}

.compraCuentaPrecio {
    margin-top: 5px;
    color: #ffd84e;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 1px;
}

.compraCuentaBeneficios {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.compraCuentaBeneficios b {
    border: 1px solid rgba(255, 216, 78, .32);
    background: rgba(255, 196, 68, .08);
    padding: 10px 12px;
    color: #eaf7ff;
    font-size: 13px;
    line-height: 1.2;
    text-transform: uppercase;
}

.compraCuentaOpcionesVip {
    grid-template-columns: minmax(220px, 360px);
    justify-content: center;
}

.compraCuentaOpcionVip {
    min-height: 142px;
    border-color: rgba(255, 216, 78, .82);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 216, 78, .18), transparent 58%),
        rgba(8, 12, 24, .86);
    box-shadow: inset 0 0 24px rgba(255, 196, 68, .08);
}

@keyframes vipWidgetScan {
    0% {
        transform: translateX(-120%);
    }

    48%,
    100% {
        transform: translateX(120%);
    }
}

@media (max-width: 980px) {
    .vipWidget {
        min-width: 96px;
    }

    .vipWidget img {
        width: 30px;
        height: 24px;
    }
}

@media (max-width: 640px) {
    .compraCuentaBeneficios {
        grid-template-columns: 1fr;
    }
}


/* MINI JUEGOS FOLDER SLOTS */
.miniJuegosFolderSection {
    position: relative;
    z-index: 2;
    width: min(1120px, 100%);
    margin: 28px auto 0;
}

.miniJuegosFolderHeader {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(95, 240, 255, .34);
    padding-bottom: 10px;
}

.miniJuegosFolderHeader span,
.miniJuegosFolderHeader h2 {
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    letter-spacing: 2px;
}

.miniJuegosFolderHeader span {
    color: #ffd45e;
    font-size: 9px;
    text-shadow: 0 0 12px rgba(255, 212, 94, .56);
}

.miniJuegosFolderHeader h2 {
    margin: 0;
    color: #5ff0ff;
    font-size: clamp(18px, 2.4vw, 28px);
    text-shadow: 0 0 16px rgba(95, 240, 255, .72);
}

.miniJuegosFolderGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.miniJuegoFolderCard {
    min-height: 520px;
}

.miniJuegoFolderCard .miniJuegoCover {
    min-height: 150px;
}

.miniJuegoFolderCard .miniJuegoBody h2 {
    font-size: clamp(34px, 4.4vw, 54px);
}

.miniJuegoFolderCard .starfallFeatureGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.miniJuegoFolderBloqueado {
    opacity: .76;
}

.miniJuegoFolderBloqueado .miniJuegoCover img {
    filter: grayscale(.75) saturate(.62) brightness(.58) contrast(1.08);
}

.miniJuegoFolderBloqueado .miniJuegoCard {
    border-color: rgba(255, 213, 94, .28);
}

.miniJuegoFolderBloqueado .miniJuegoPlayButton {
    width: min(380px, 100%);
    padding: 0 26px;
    cursor: not-allowed;
    color: #ffdf75;
    font-size: clamp(10px, 1.4vw, 13px);
    letter-spacing: 2px;
    white-space: nowrap;
    filter: grayscale(.25);
}

.miniJuegoFolderBloqueado .miniJuegoPlayButton::before,
.miniJuegoFolderBloqueado .miniJuegoPlayButton::after {
    content: "";
    margin: 0;
}

.miniJuegoFolderBloqueado .miniJuegoPlayButton:hover {
    color: #ffdf75;
    box-shadow: none;
}

.miniJuegoProximamente {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    transform: translate(-50%, -50%) rotate(-6deg);
    padding: 10px 16px;
    border: 1px solid rgba(255, 213, 94, .84);
    background: rgba(2, 8, 20, .78);
    color: #ffd45e;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: clamp(10px, 1.4vw, 16px);
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 0 0 12px rgba(255, 213, 94, .86), 0 0 22px rgba(95, 240, 255, .36);
    box-shadow: inset 0 0 18px rgba(255, 213, 94, .12), 0 0 24px rgba(255, 213, 94, .18);
    pointer-events: none;
}

.miniJuegoSlotState {
    min-height: 180px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(95, 240, 255, .38);
    background: rgba(3, 12, 28, .78);
    color: #d8f7ff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
}

.miniJuegoCarpetaPanel {
    width: min(1180px, calc(100vw - 34px));
}

.miniJuegoCarpetaFrame {
    width: 100%;
    height: min(72vh, 760px);
    border: 1px solid rgba(95, 240, 255, .34);
    background: #020812;
}

@media (max-width: 760px) {
    .miniJuegosFolderHeader {
        display: grid;
        align-items: start;
    }

    .miniJuegoFolderCard {
        min-height: 0;
    }
}


/* MINI JUEGOS FOLDER FULL PANELS */
.miniJuegosFolderGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.miniJuegoFolderArcade {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.miniJuegoFolderArcade .miniJuegoFolderCard,
.miniJuegoFolderArcade .miniJuegoFolderRankingPanel {
    min-height: 545px;
}

.miniJuegoFolderRankingPanel .starfallRankingRefreshBox small {
    color: #ffd45e;
}

.miniJuegoFolderRankingPanel .starfallRankingList {
    margin-top: 12px;
}

.miniJuegoFolderRankingPanel[data-beatline-ranking="true"] .starfallRankingHeader > span {
    color: #6ee7ff;
    text-shadow:
        0 0 12px rgba(44, 208, 255, .75),
        0 0 22px rgba(218, 65, 255, .32);
}

@media (max-width: 980px) {
    .miniJuegoFolderArcade {
        grid-template-columns: minmax(280px, 520px);
    }

    .miniJuegoFolderArcade::after {
        display: none;
    }
}


/* NEXUS GRID MODAL FULL FRAME */
.miniJuegoCarpetaPanel {
    width: calc(100vw - 28px);
    height: calc(100vh - 28px);
}

.miniJuegoCarpetaPanel .nexusStarfallTopbar {
    min-height: 58px;
}

.miniJuegoCarpetaFrame {
    height: calc(100vh - 112px);
}


/* NEXUS GRID MODAL TRUE FULL FRAME */
.miniJuegoCarpetaPanel {
    width: calc(100vw - 8px);
    height: calc(100vh - 8px);
}

.miniJuegoCarpetaPanel .nexusStarfallTopbar {
    display: none;
}

.miniJuegoCarpetaPanel .nexusStarfallClose {
    z-index: 9;
}

.miniJuegoCarpetaFrame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.worldRoseFallLayer {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}

.worldRoseFallLayerActivo {
    opacity: 1;
}

.worldRose {
    position: absolute;
    top: -28vh;
    width: clamp(52px, 5.4vw, 92px);
    aspect-ratio: 344 / 500;
    background: url("../img/rosas.png") center / contain no-repeat;
    opacity: .86;
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .46));
    animation-name: worldRoseFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.worldRose1 { left: 8%; animation-duration: 9s; animation-delay: -1s; transform: rotate(-18deg); }
.worldRose2 { left: 21%; width: clamp(44px, 4.4vw, 76px); animation-duration: 11s; animation-delay: -5s; }
.worldRose3 { left: 36%; animation-duration: 10s; animation-delay: -3s; }
.worldRose4 { left: 51%; width: clamp(48px, 4.8vw, 82px); animation-duration: 12s; animation-delay: -7s; }
.worldRose5 { left: 66%; animation-duration: 9.5s; animation-delay: -4s; }
.worldRose6 { left: 79%; width: clamp(42px, 4.2vw, 72px); animation-duration: 11.5s; animation-delay: -8s; }
.worldRose7 { left: 91%; animation-duration: 10.5s; animation-delay: -2s; }
.worldRose8 { left: 44%; width: clamp(38px, 3.8vw, 66px); animation-duration: 13s; animation-delay: -10s; }
.worldRose9 { left: 3%; width: clamp(40px, 4.1vw, 70px); animation-duration: 10.8s; animation-delay: -6.5s; }
.worldRose10 { left: 15%; width: clamp(56px, 5.7vw, 96px); animation-duration: 12.6s; animation-delay: -11s; }
.worldRose11 { left: 29%; width: clamp(36px, 3.6vw, 62px); animation-duration: 9.8s; animation-delay: -7.6s; }
.worldRose12 { left: 58%; width: clamp(54px, 5.3vw, 90px); animation-duration: 11.8s; animation-delay: -2.5s; }
.worldRose13 { left: 73%; width: clamp(38px, 4vw, 68px); animation-duration: 10.2s; animation-delay: -9.2s; }
.worldRose14 { left: 86%; width: clamp(50px, 5vw, 84px); animation-duration: 12.9s; animation-delay: -4.8s; }
.worldRose15 { left: 96%; width: clamp(34px, 3.5vw, 60px); animation-duration: 9.4s; animation-delay: -3.4s; }
.worldRose16 { left: 39%; width: clamp(46px, 4.7vw, 80px); animation-duration: 13.6s; animation-delay: -12.3s; }

.worldLeaf {
    position: absolute;
    top: -18vh;
    width: clamp(16px, 1.8vw, 30px);
    height: clamp(28px, 3.1vw, 52px);
    border-radius: 88% 0 88% 0;
    background: linear-gradient(135deg, #d4b35c 0%, #67842d 42%, #1f4b1f 100%);
    opacity: .78;
    filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .42));
    animation-name: worldLeafFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.worldLeaf::before {
    content: "";
    position: absolute;
    inset: 8% 47% 10% 47%;
    border-radius: 999px;
    background: rgba(255, 232, 146, .56);
    transform: rotate(-8deg);
}

.worldLeaf1 { left: 6%; animation-duration: 7.6s; animation-delay: -1.8s; }
.worldLeaf2 { left: 13%; width: clamp(12px, 1.4vw, 24px); height: clamp(22px, 2.5vw, 42px); animation-duration: 8.5s; animation-delay: -6.3s; }
.worldLeaf3 { left: 24%; animation-duration: 6.9s; animation-delay: -3.7s; }
.worldLeaf4 { left: 32%; width: clamp(14px, 1.6vw, 27px); height: clamp(25px, 2.8vw, 48px); animation-duration: 9.2s; animation-delay: -7.8s; }
.worldLeaf5 { left: 47%; animation-duration: 7.9s; animation-delay: -4.6s; }
.worldLeaf6 { left: 54%; width: clamp(13px, 1.5vw, 25px); height: clamp(23px, 2.6vw, 44px); animation-duration: 8.9s; animation-delay: -2.4s; }
.worldLeaf7 { left: 63%; animation-duration: 7.1s; animation-delay: -5.2s; }
.worldLeaf8 { left: 70%; width: clamp(15px, 1.7vw, 28px); height: clamp(26px, 2.9vw, 50px); animation-duration: 9.7s; animation-delay: -8.8s; }
.worldLeaf9 { left: 81%; animation-duration: 7.4s; animation-delay: -3s; }
.worldLeaf10 { left: 89%; width: clamp(12px, 1.4vw, 23px); height: clamp(21px, 2.4vw, 40px); animation-duration: 8.2s; animation-delay: -6.9s; }
.worldLeaf11 { left: 95%; animation-duration: 9.4s; animation-delay: -1.1s; }
.worldLeaf12 { left: 41%; width: clamp(14px, 1.6vw, 26px); height: clamp(24px, 2.7vw, 46px); animation-duration: 7.7s; animation-delay: -5.9s; }

@keyframes worldRoseFall {
    0% {
        transform: translate3d(0, -18vh, 0) rotate(-26deg);
    }

    50% {
        transform: translate3d(34px, 58vh, 0) rotate(24deg);
    }

    100% {
        transform: translate3d(-18px, 128vh, 0) rotate(58deg);
    }
}

@keyframes worldLeafFall {
    0% {
        transform: translate3d(0, -14vh, 0) rotate(18deg);
    }

    35% {
        transform: translate3d(-42px, 36vh, 0) rotate(136deg);
    }

    70% {
        transform: translate3d(36px, 82vh, 0) rotate(254deg);
    }

    100% {
        transform: translate3d(-24px, 126vh, 0) rotate(392deg);
    }
}

/* World Championship inscription modal frame */
.worldInscripcionModal .torneoInscripcionOverlay {
    background: rgba(1, 5, 15, .76);
    backdrop-filter: blur(10px);
}

.worldInscripcionModal .worldInscripcionPanel {
    width: min(1180px, calc(100vw - 28px));
    aspect-ratio: 1508 / 983;
    min-height: 0;
    padding: clamp(128px, 10.9vw, 162px) clamp(235px, 20.4vw, 310px) clamp(106px, 9.2vw, 142px);
    border: 0;
    background: url("../img/marcoinscripcion.png") center / contain no-repeat;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    overflow: visible;
}

.worldInscripcionModal .torneoInscripcionCerrar {
    top: 18%;
    right: 18.5%;
    z-index: 3;
    border-color: rgba(255, 213, 94, .78);
    background: rgba(2, 8, 20, .72);
}

.worldInscripcionModal .worldInscripcionPanel > span,
.worldInscripcionModal .worldInscripcionPanel label {
    color: #79d8ff;
    text-align: center;
    text-shadow: 0 0 12px rgba(0, 0, 0, .82);
}

.worldInscripcionModal .worldInscripcionPanel > strong {
    margin: 2px 34px 8px;
    color: #ffffff;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: .92;
    text-align: center;
    text-shadow: 0 0 18px rgba(255, 213, 94, .24), 0 4px 18px rgba(0, 0, 0, .86);
}

.worldInscripcionModal .torneoInscripcionPerfil,
.worldInscripcionModal .torneoInscripcionPago,
.worldInscripcionModal .torneoInscripcionEstado {
    margin-bottom: 8px;
    padding: 10px 12px;
    background: rgba(3, 12, 26, .74);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .34);
    text-align: center;
}

.worldInscripcionModal .worldInscripcionPanel label {
    gap: 7px;
    margin-bottom: 8px;
}

.worldInscripcionModal .worldInscripcionPanel select,
.worldInscripcionModal .worldInscripcionPanel input {
    width: 100%;
    background: rgba(1, 8, 22, .86);
}

.worldInscripcionCodigoBox {
    display: grid;
}

.worldInscripcionCodigoBox input {
    min-height: 40px;
    border: 1px solid rgba(99, 215, 255, .42);
    color: #dcecff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    outline: none;
}

.worldInscripcionCodigoBox input:focus {
    border-color: rgba(255, 213, 94, .82);
    box-shadow: 0 0 18px rgba(255, 213, 94, .14);
}

.worldInscripcionModal #worldInscripcionConfirmar {
    margin-top: 0;
    background: rgba(255, 196, 68, .12);
}

@media (max-width: 880px) {
    .worldInscripcionModal .worldInscripcionPanel {
        width: min(760px, calc(100vw - 10px));
        padding: 18.5vw 18vw 15vw;
        gap: 6px;
    }

    .worldInscripcionModal .torneoInscripcionCerrar {
        top: 15%;
        right: 14%;
    }

    .worldInscripcionModal .worldInscripcionPanel > strong {
        margin-right: 28px;
        margin-left: 28px;
        font-size: clamp(24px, 6vw, 36px);
    }

    .worldInscripcionModal .torneoInscripcionPerfil,
    .worldInscripcionModal .torneoInscripcionPago,
    .worldInscripcionModal .torneoInscripcionEstado {
        padding: 8px 10px;
        font-size: 14px;
        letter-spacing: 1.5px;
    }
}

/* World Championship tournament view */
.worldTournamentView {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    padding: 96px 42px 44px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .72)),
        rgba(1, 5, 13, .34);
    pointer-events: none;
    overflow: hidden;
}

.worldTournamentViewActivo {
    display: block;
}

body.modoWorldTournamentView .worldCountdownPanel,
body.modoWorldTournamentView .worldSceneIntro,
body.modoWorldTournamentView .worldInscriptionFrame,
body.modoWorldTournamentView .worldViewTournamentButton {
    display: none;
}

.worldTournamentPanel {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    gap: 20px;
    padding: 26px 34px 34px;
    border: 1px solid rgba(255, 213, 94, .28);
    background:
        linear-gradient(90deg, rgba(2, 8, 20, .62), rgba(3, 15, 34, .34), rgba(2, 8, 20, .62));
    box-shadow: inset 0 0 70px rgba(0, 0, 0, .48);
    overflow: hidden;
    pointer-events: auto;
}


.worldTournamentTabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 4px;
}

.worldTournamentTab {
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(255, 213, 94, .42);
    background: rgba(3, 12, 26, .54);
    color: #ffd86a;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    box-shadow: inset 0 0 18px rgba(255, 213, 96, .04);
}

.worldTournamentTab:hover,
.worldTournamentTabActivo {
    border-color: rgba(112, 204, 255, .62);
    color: #ffffff;
    background: rgba(89, 199, 255, .12);
    box-shadow: 0 0 18px rgba(89, 199, 255, .14);
}

.worldTournamentInfoPanel {
    align-self: start;
    width: min(760px, 100%);
    margin: 18px auto 0;
    padding: 24px;
    border: 1px solid rgba(89, 199, 255, .28);
    background: rgba(2, 8, 20, .62);
    text-align: center;
    color: #dcecff;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 900;
    letter-spacing: 2px;
}

.worldTournamentInfoPanel strong {
    display: block;
    margin-bottom: 10px;
    color: #ffd86a;
    font-size: 22px;
    letter-spacing: 4px;
}

.worldTournamentInfoPanel p {
    margin: 0;
    max-width: none;
}

.worldGroupStageGrid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    overflow: auto;
}

.worldGroupStageCard {
    min-height: 178px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 213, 94, .38);
    background:
        linear-gradient(180deg, rgba(4, 14, 31, .82), rgba(1, 6, 16, .9));
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .34);
}

.worldGroupStageCard strong {
    color: #ffd86a;
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 3px;
    text-align: center;
}

.worldGroupStageCard > div {
    display: grid;
    gap: 8px;
}

.worldMatchScheduleGrid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 28px;
    overflow: auto;
}

.worldMatchScheduleCard {
    width: min(1380px, 100%);
    min-height: 430px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 18px;
    padding: 28px 34px 34px;
    border: 1px solid rgba(255, 213, 94, .38);
    background:
        linear-gradient(180deg, rgba(4, 14, 31, .82), rgba(1, 6, 16, .9));
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .34);
}

.worldMatchScheduleCard > strong {
    color: #ffd86a;
    font-family: 'Rajdhani', sans-serif;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 4px;
    text-align: center;
}

.worldMatchGroupTeams {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.worldMatchGroupTeams span {
    min-height: 76px;
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 8px;
    border: 1px solid rgba(99, 215, 255, .24);
    background: rgba(2, 8, 20, .58);
    color: #dcecff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-align: center;
}

.worldMatchGroupTeams img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.worldGroupStageDays {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.worldGroupStageDays section {
    display: grid;
    gap: 10px;
    align-content: start;
    min-height: 245px;
    padding: 12px;
    border: 1px solid rgba(99, 215, 255, .2);
    background: rgba(2, 8, 20, .34);
}

.worldGroupStageDays b {
    min-height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 213, 94, .32);
    background: rgba(255, 213, 94, .08);
    color: #ffd86a;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
}

.worldGroupStageCard span {
    min-height: 58px;
    display: grid;
    place-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(99, 215, 255, .26);
    background: rgba(2, 8, 20, .64);
    color: #dcecff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.4px;
    line-height: 1.2;
    text-align: center;
}

.worldGroupStageCard em {
    color: #8fe6ff;
    font-style: normal;
}

.worldMatchScheduleItem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    justify-items: stretch;
    min-height: 78px;
}

.worldMatchScheduleItem i {
    display: flex;
    align-items: center;
    justify-content: center;
    place-items: center;
    gap: 7px;
    color: #dcecff;
    font-style: normal;
    min-width: 0;
    white-space: nowrap;
}

.worldMatchScheduleItem img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.worldMatchScheduleItem em {
    align-self: center;
    color: #8fe6ff;
    font-size: 12px;
    font-style: normal;
}

@media (max-width: 980px) {
    .worldMatchScheduleGrid {
        grid-template-columns: 1fr;
    }

    .worldGroupStageGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .worldMatchGroupTeams {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 560px) {
    .worldGroupStageGrid {
        grid-template-columns: 1fr;
    }
}

.worldTournamentPredictions {
    min-height: 0;
    overflow: auto;
}

.worldPredictionsPanel {
    position: relative;
    width: min(980px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.worldPredictionSchedule {
    position: fixed;
    left: clamp(22px, 3vw, 54px);
    top: clamp(118px, 14vh, 152px);
    z-index: 8;
    width: 210px;
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(255, 213, 94, .42);
    background: rgba(2, 8, 20, .76);
    box-shadow: inset 0 0 28px rgba(0, 0, 0, .34);
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
}

.worldPredictionSchedule span {
    color: #8fe6ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}

.worldPredictionSchedule strong {
    color: #ffffff;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 3px;
}

.worldPredictionSchedule small {
    color: #dcecff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 2px;
}

.worldPredictionSchedule b {
    min-height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(99, 215, 255, .32);
    background: rgba(99, 215, 255, .08);
    color: #ffd86a;
    font-size: 18px;
    letter-spacing: 4px;
}

.worldPredictionsHeader {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.worldPredictionsHeader strong,
.worldPredictionsHeader span {
    min-height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(99, 215, 255, .34);
    background: rgba(2, 8, 20, .72);
    color: #dcecff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
    text-align: center;
}

.worldPredictionsHeader strong {
    color: #ffd86a;
}

.worldPredictionsMatch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.worldPredictionTeam {
    position: relative;
    min-height: 220px;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 50px 22px 22px;
    border: 1px solid rgba(255, 213, 94, .42);
    background:
        linear-gradient(180deg, rgba(4, 14, 31, .84), rgba(1, 6, 16, .9));
    color: #ffffff;
    cursor: pointer;
    overflow: hidden;
    box-shadow: inset 0 0 38px rgba(0, 0, 0, .38);
}

.worldPredictionPool,
.worldPredictionPlayers {
    position: absolute;
    top: 12px;
    min-height: 26px;
    display: grid;
    place-items: center;
    padding: 0 10px;
    border: 1px solid rgba(99, 215, 255, .28);
    background: rgba(1, 6, 16, .76);
    color: #ffd86a;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}

.worldPredictionPool {
    left: 12px;
}

.worldPredictionPlayers {
    right: 12px;
    color: #8fe6ff;
}

.worldPredictionTeam:hover {
    border-color: rgba(112, 204, 255, .78);
    box-shadow: 0 0 24px rgba(112, 204, 255, .18), inset 0 0 38px rgba(0, 0, 0, .38);
}

.worldPredictionTeam i {
    display: none;
}

.worldPredictionLogo {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 213, 94, .35);
    background: rgba(0, 0, 0, .34);
}

.worldPredictionLogo img {
    max-width: 68px;
    max-height: 68px;
    object-fit: contain;
}

.worldPredictionTeam strong {
    font-family: 'Rajdhani', sans-serif;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 4px;
}

.worldPredictionTeam small {
    color: #8fe6ff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 3px;
}

.worldPredictionBetBox {
    display: grid;
}

.worldPredictionBetBox div {
    min-height: 46px;
    border: 1px solid rgba(99, 215, 255, .34);
    background: rgba(2, 8, 20, .74);
    color: #dcecff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
    text-align: center;
}

.worldPredictionBetBox div {
    display: grid;
    place-items: center;
}

.worldPredictionBalance {
    position: relative;
    min-height: 34px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    border: 1px solid rgba(99, 215, 255, .28);
    background: rgba(2, 8, 20, .72);
    overflow: hidden;
}

.worldPredictionBalance::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            #e83042 0,
            #e83042 var(--world-prediction-left),
            #40a6ff var(--world-prediction-left),
            #40a6ff 100%);
    opacity: .82;
    transform-origin: left center;
    animation: worldPredictionLoadFill .62s ease-out both;
}

.worldPredictionBalance::before {
    content: "";
    position: absolute;
    left: var(--world-prediction-left);
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 0 16px rgba(255, 255, 255, .44);
    z-index: 2;
}

.worldPredictionBalance i {
    display: none;
}

.worldPredictionBalance span {
    position: relative;
    z-index: 4;
    color: #dcecff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    text-align: center;
}

@keyframes worldPredictionLoadFill {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity: .38;
    }

    100% {
        clip-path: inset(0 0 0 0);
        opacity: .82;
    }
}

.worldPredictionBetModal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 20px;
}

.worldPredictionBetOverlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 4, 12, .78);
    backdrop-filter: blur(10px);
}

.worldPredictionBetPanel {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    display: grid;
    gap: 12px;
    padding: 26px;
    border: 1px solid rgba(255, 213, 94, .58);
    background:
        linear-gradient(180deg, rgba(4, 14, 31, .96), rgba(1, 6, 16, .98));
    box-shadow: 0 0 42px rgba(112, 204, 255, .14);
    text-align: center;
}

.worldPredictionBetClose {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 213, 94, .54);
    background: rgba(1, 6, 16, .78);
    color: #ffd86a;
    cursor: pointer;
    font-weight: 900;
}

.worldPredictionBetPanel > span {
    color: #8fe6ff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 4px;
}

.worldPredictionBetPanel h3 {
    margin: 0;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 3px;
}

.worldPredictionBetTeam {
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 14px;
    border: 1px solid rgba(99, 215, 255, .28);
    background: rgba(0, 0, 0, .24);
}

.worldPredictionBetTeam img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.worldPredictionBetTeam strong {
    color: #ffffff;
    font-size: 24px;
    letter-spacing: 3px;
}

.worldPredictionBetTeam small,
.worldPredictionBetSaldo,
#worldPredictionModalStatus {
    color: #dcecff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
}

.worldPredictionBetSaldo,
#worldPredictionModalStatus {
    min-height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(99, 215, 255, .28);
    background: rgba(2, 8, 20, .74);
}

#worldPredictionModalAmount {
    min-height: 46px;
    border: 1px solid rgba(255, 213, 94, .46);
    background: rgba(1, 6, 16, .86);
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 2px;
    text-align: center;
    outline: none;
}

#worldPredictionModalConfirm {
    min-height: 46px;
    border: 1px solid rgba(255, 213, 94, .72);
    background: rgba(255, 213, 94, .12);
    color: #ffd86a;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
}

.worldPredictionAdmin {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.worldPredictionAdmin button {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(255, 213, 94, .42);
    background: rgba(255, 213, 94, .09);
    color: #ffd86a;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
}

.worldPredictionAdmin button:hover {
    border-color: rgba(112, 204, 255, .68);
    color: #ffffff;
}

@media (max-width: 760px) {
    .worldPredictionSchedule {
        position: static;
        width: min(360px, 100%);
        justify-self: center;
    }

    .worldPredictionsHeader,
    .worldPredictionsMatch,
    .worldPredictionBetBox {
        grid-template-columns: 1fr;
    }

    .worldPredictionTeam {
        min-height: 180px;
    }
}
.worldTournamentPanel > span {
    color: #70ccff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 5px;
    text-align: center;
}

.worldTournamentPanel h2 {
    margin: 0;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(54px, 5.8vw, 106px);
    line-height: .86;
    text-align: center;
    text-shadow: 0 0 26px rgba(255, 213, 94, .22), 0 8px 26px rgba(0, 0, 0, .72);
}

.worldTournamentPanel h2.worldTournamentTitleHidden {
    display: none;
}

.worldTournamentPanel p {
    margin: 0 auto;
    max-width: 820px;
    color: #dcecff;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
}

.worldTournamentTeams {
    align-content: start;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, minmax(170px, 210px));
    gap: 24px;
    margin-top: 8px;
    overflow: auto;
    padding: 8px 6px 18px;
}

.worldTournamentEmpty {
    min-height: 110px;
    justify-content: center;
    text-align: center;
}

@media (max-width: 760px) {
    .worldTournamentView {
        padding: 88px 14px 24px;
    }

    .worldTournamentPanel {
        padding: 18px 12px 20px;
        gap: 16px;
    }

    .worldTournamentPanel h2 {
        font-size: clamp(38px, 12vw, 58px);
    }

    .worldTournamentTeams {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 16px;
    }
}

/* ======================================== */
/* SHOP */
/* ======================================== */

.shopPagina {
    position: relative;
    z-index: 5;
    width: 100%;
    padding: 48px clamp(16px, 2.2vw, 34px);
    color: #ffffff;
}

.shopHeader {
    position: relative;
    margin-bottom: 34px;
}

.shopHeader::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(transparent, rgba(0, 170, 255, .34), transparent);
    box-shadow: 0 0 18px rgba(0, 170, 255, .22);
}

.shopHeader h1 {
    margin: 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(58px, 8vw, 92px);
    line-height: .9;
    letter-spacing: 4.5px;
    color: #ffffff;
    text-shadow: 0 0 35px rgba(0, 140, 255, .2);
}

.shopRoulette {
    position: relative;
    width: min(1270px, 100%);
    margin: -6px auto 34px;
    padding: 18px clamp(12px, 1.8vw, 24px) 16px;
    border: 1px solid rgba(88, 191, 255, .34);
    background: linear-gradient(145deg, rgba(1, 9, 24, .84), rgba(5, 22, 48, .58));
    box-shadow: inset 0 0 30px rgba(0, 170, 255, .11), 0 0 26px rgba(0, 120, 255, .16);
    overflow: hidden;
}

.shopRoulette::before,
.shopRoulette::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: clamp(34px, 8vw, 116px);
    pointer-events: none;
}

.shopRoulette::before {
    left: 0;
    background: linear-gradient(90deg, rgba(1, 8, 22, .96), transparent);
}

.shopRoulette::after {
    right: 0;
    background: linear-gradient(270deg, rgba(1, 8, 22, .96), transparent);
}

.shopRoulettePointer {
    position: absolute;
    left: 50%;
    top: 12px;
    z-index: 4;
    width: 2px;
    height: 132px;
    transform: translateX(-50%);
    background: linear-gradient(transparent, #ffd45e 18%, #ffffff 50%, #ffd45e 82%, transparent);
    box-shadow: 0 0 16px rgba(255, 213, 94, .72);
}

.shopRouletteViewport {
    position: relative;
    z-index: 1;
    height: 142px;
    overflow: hidden;
}

.shopRouletteTrack {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translate3d(0, 0, 0);
    transition: transform 4200ms cubic-bezier(.12, .82, .18, 1);
    will-change: transform;
}

.shopRouletteIcon {
    width: 112px;
    height: 132px;
    flex: 0 0 112px;
    display: grid;
    grid-template-rows: 76px 38px;
    align-items: center;
    justify-items: center;
    gap: 8px;
    padding: 9px 7px 8px;
    border: 1px solid rgba(88, 191, 255, .34);
    background: radial-gradient(circle at center, rgba(89, 199, 255, .18), rgba(3, 12, 30, .82) 70%);
    box-shadow: inset 0 0 20px rgba(0, 170, 255, .11), 0 0 16px rgba(0, 120, 255, .14);
}

.shopRouletteIcon img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(80, 220, 255, .34));
}

.shopRouletteIcon span {
    width: 100%;
    display: block;
    overflow-wrap: anywhere;
    color: #ffd45e;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 8px;
    line-height: 1.45;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(255, 196, 68, .58), 0 1px 2px rgba(0, 0, 0, .9);
}

.shopRouletteIconActivo {
    border-color: rgba(255, 213, 94, .82);
    box-shadow: inset 0 0 22px rgba(255, 213, 94, .16), 0 0 24px rgba(255, 196, 68, .34);
}

.shopRouletteControls {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.shopRouletteTickets {
    min-width: 150px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: #f0d4ff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 11px;
    line-height: 1;
    text-shadow: 0 0 10px rgba(178, 108, 255, .76);
}

.shopRouletteTicketsOculto {
    display: none;
}

.shopRouletteTickets img {
    width: 116px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(178, 108, 255, .68));
}

.shopRouletteButton {
    min-width: 160px;
    min-height: 42px;
    border: 1px solid rgba(255, 213, 94, .76);
    background: linear-gradient(180deg, rgba(74, 49, 8, .82), rgba(18, 13, 4, .94));
    color: #ffd45e;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    cursor: pointer;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 196, 68, .62);
    box-shadow: inset 0 0 16px rgba(255, 213, 94, .12), 0 0 18px rgba(255, 166, 31, .16);
}

.shopRouletteButton:disabled {
    cursor: wait;
    opacity: .72;
}

.shopRouletteResult {
    min-height: 22px;
    color: #59c7ff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: clamp(9px, .85vw, 11px);
    line-height: 1.45;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(89, 199, 255, .42);
}

.shopGrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(180px, 230px));
    gap: 34px 30px;
    align-items: start;
    justify-content: center;
}

.shopItemCard {
    width: 100%;
    display: grid;
    gap: 14px;
    justify-items: center;
}

.shopItemName {
    width: 100%;
    min-height: 42px;
    display: grid;
    place-items: center;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: clamp(9px, .85vw, 12px);
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(
        90deg,
        #ff4d6d,
        #ffd45e,
        #62ff9c,
        #59c7ff,
        #b26cff,
        #ff4d6d
    );
    background-size: 320% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shopNameRainbow 8s linear infinite;
    text-shadow: 0 0 12px rgba(89, 199, 255, .34);
}

@keyframes shopNameRainbow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 320% 50%;
    }
}

.shopItemSquare {
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid rgba(88, 191, 255, .42);
    background: linear-gradient(145deg, rgba(2, 12, 30, .88), rgba(5, 22, 48, .74));
    box-shadow: inset 0 0 28px rgba(0, 170, 255, .12), 0 0 24px rgba(0, 120, 255, .14);
    overflow: hidden;
}

.shopItemSquare img {
    width: 84%;
    height: 84%;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(80, 220, 255, .3));
}

.shopItemSquare img.shopItemImageUp {
    transform: translateY(-8%);
}

.shopItemPrice {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 213, 94, .58);
    color: #ffd45e;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: clamp(11px, 1.25vw, 15px);
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.5;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 196, 68, .62), 0 0 18px rgba(255, 130, 18, .34);
}

.shopItemPrice img {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 196, 68, .52));
}


.shopBuyButton {
    width: min(230px, 100%);
    min-height: 48px;
    border: 1px solid rgba(255, 213, 94, .72);
    background: linear-gradient(180deg, rgba(74, 49, 8, .78), rgba(18, 13, 4, .92));
    color: #ffd45e;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    cursor: pointer;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 196, 68, .62);
    box-shadow: inset 0 0 16px rgba(255, 213, 94, .12), 0 0 18px rgba(255, 166, 31, .16);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.shopBuyButton:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 238, 161, .9);
    box-shadow: inset 0 0 18px rgba(255, 213, 94, .18), 0 0 24px rgba(255, 196, 68, .28);
}

.shopBuyButton:disabled {
    cursor: wait;
    opacity: .68;
    transform: none;
}

.shopCompraModal {
    position: fixed;
    inset: 0;
    z-index: 15100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.shopCompraModalActivo {
    display: flex;
}

.shopCompraOverlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 5, 16, .78);
    backdrop-filter: blur(8px);
}

.shopCompraPanel {
    position: relative;
    width: min(520px, 100%);
    border: 1px solid rgba(255, 213, 94, .62);
    background: linear-gradient(160deg, rgba(4, 13, 31, .96), rgba(20, 13, 4, .96));
    color: #ffffff;
    padding: 34px 28px 28px;
    box-shadow: 0 0 42px rgba(255, 196, 68, .2), inset 0 0 30px rgba(89, 199, 255, .08);
    text-align: center;
}

.shopCompraCerrar {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .05);
    color: #ffffff;
    cursor: pointer;
}

.shopCompraMini {
    display: block;
    margin-bottom: 10px;
    color: #59c7ff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
}

.shopCompraPanel h2 {
    margin: 0 0 14px;
    color: #ffd45e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.shopCompraPanel p {
    margin: 0;
    color: rgba(255, 255, 255, .86);
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    line-height: 1.45;
}

.shopCompraDetalle {
    min-height: 0;
    margin: 20px 0 0;
    display: grid;
    gap: 6px;
}

.shopCompraDetalle strong,
.shopCompraDetalle span {
    display: block;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 11px;
    line-height: 1.5;
}

.shopCompraDetalle strong {
    color: #ffffff;
}

.shopCompraDetalle span {
    color: #ffd45e;
}

.shopCompraActions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

.shopCompraDiscord,
.shopCompraAceptar {
    min-width: 150px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(89, 199, 255, .66);
    background: rgba(4, 19, 42, .86);
    color: #ffffff;
    font-family: 'Press Start 2P', 'Rajdhani', sans-serif;
    font-size: 10px;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
}

.shopCompraAceptar {
    border-color: rgba(255, 213, 94, .74);
    background: rgba(74, 49, 8, .78);
    color: #ffd45e;
}

@media (max-width: 1180px) {
    .shopGrid {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

    .shopRouletteIcon {
        width: 96px;
        height: 124px;
        flex-basis: 96px;
    }

    .shopRouletteViewport {
        height: 134px;
    }
}