.llaves-section {
    padding-top: 92px
}

.filtros-llaves {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px;
    border: 1px solid #ffffff0d;
    border-radius: 14px;
    background: #ffffff04
}

.filtros-llaves[hidden],
.panel-llave[hidden] {
    display: none
}

.filtros-llaves button {
    min-width: 78px;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #929d97;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s
}

.filtros-llaves button:hover {
    color: #edf3ef;
    background: #ffffff07
}

.filtros-llaves button[aria-pressed=true] {
    color: #24e7a0;
    border-color: #24e7a03b;
    background: #173529;
    box-shadow: inset 0 1px #ffffff0d
}

.panel-llave {
    min-width: 0;
    margin-top: 28px;
    padding: 32px;
    border: 1px solid #ffffff13;
    border-radius: 26px;
    background: radial-gradient(ellipse at 0 0, #24e7a01c, transparent 48%), radial-gradient(ellipse at 100% 100%, #f024bf17, transparent 52%), linear-gradient(180deg, #0e1411, #0a0e0c);
    box-shadow: 0 20px 50px #0004, inset 0 1px #ffffff09
}

.resumen-llave {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 25px;
    padding-bottom: 22px;
    border-bottom: 1px solid #ffffff0d
}

.resumen-llave h3 {
    margin: 2px 0 0;
    font: 36px Impact, 'Arial Narrow', sans-serif
}

.resumen-llave h3 span {
    color: #f024bf
}

.fase-llave {
    color: #24e7a0;
    font-size: 8px;
    letter-spacing: 1.8px;
    font-weight: 850
}

.resumen-llave p {
    margin: 0;
    color: #929d97;
    font-size: 13px
}

.resumen-llave a,
.insignia-final {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin-left: auto;
    padding: 7px 11px;
    border: 1px solid #24e7a02c;
    border-radius: 10px;
    background: #24e7a009;
    color: #24e7a0;
    font-size: 11px;
    font-weight: 800
}

.insignia-final {
    border-color: #f024bf32;
    background: #f024bf0b;
    color: #ff62d5
}

.ayuda-desplazamiento-llave {
    margin: 18px 0 10px;
    color: #849089;
    font-size: 11px
}

.desplazamiento-llave {
    overflow-x: auto;
    padding: 16px 3px 18px;
    scrollbar-color: #3e7956 #131c16
}

.arbol-llave {
    display: grid;
    column-gap: 54px;
    min-width: 780px
}

.arbol-grupo {
    grid-template-columns: 1.25fr 1fr .8fr
}

.arbol-final {
    grid-template-columns: 1.25fr 1fr 1fr .8fr;
    min-width: 1020px
}

.ronda-llave h4 {
    height: 35px;
    margin: 0;
    color: #89958e;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 1.4px
}

.combates-ronda {
    height: 540px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 20px
}

.combate-llave {
    position: relative;
    overflow: visible;
    border: 1px solid #ffffff16;
    border-left: 3px solid #24e7a0;
    border-radius: 10px;
    background: linear-gradient(135deg, #142019, #0f1712);
    box-shadow: 0 8px 20px #0003, inset 0 1px #ffffff08
}

.combate-llave:nth-child(even) {
    border-left-color: #f024bf
}

.combate-llave.finalizado {
    border-color: #24e7a04d
}

.etiqueta-combate {
    position: absolute;
    top: -19px;
    left: 0;
    color: #849089;
    font-size: 9px
}

.casilla-llave {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 49px;
    padding: 7px 11px;
    color: #d9dfdb;
    font-size: 12px
}

.casilla-llave+.casilla-llave {
    border-top: 1px solid #ffffff12
}

.casilla-llave.ganador {
    color: #8df3ba;
    background: #24e7a009
}

.casilla-llave.perdedor {
    color: #c9aaa9;
    background: linear-gradient(90deg, #c63b421c, #7b20220a 72%, transparent);
    box-shadow: inset 3px 0 #dc4e55a6
}

.casilla-llave.perdedor .numero-casilla {
    border-color: #e65b6233;
    background: #3a2425;
    color: #ef9b9f
}

.casilla-llave.perdedor .avatar-llave {
    border-color: #e65b6238;
    background: radial-gradient(circle at 50% 70%, #d84b5224, transparent 75%), #181112
}

.casilla-llave.perdedor .avatar-llave img {
    filter: grayscale(.45) saturate(.65);
    opacity: .78
}

.numero-casilla {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    border: 1px solid #24e7a018;
    border-radius: 6px;
    background: #234231;
    color: #9af2bf;
    font-size: 10px
}

.avatar-llave {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    overflow: hidden;
    border: 1px solid #ffffff18;
    border-radius: 9px;
    background: radial-gradient(circle at 50% 70%, #24e7a02d, transparent 75%), #101813;
    color: #77877e;
    font-size: 13px;
    font-weight: 800
}

.avatar-llave img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom
}

.avatar-llave-vacio {
    border-style: dashed;
    background: #ffffff04
}

.nombre-casilla {
    min-width: 0;
    overflow-wrap: anywhere
}

.marca-ganador {
    margin-left: auto;
    color: #24e7a0;
    font-weight: 900
}

.marca-perdedor {
    position: relative;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    flex: 0 0 20px;
    border: 1px solid #e65b6245;
    border-radius: 50%;
    background: #d6495014;
    color: #ee777d
}

.marca-perdedor::before,
.marca-perdedor::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background: currentColor
}

.marca-perdedor::before {
    transform: rotate(45deg)
}

.marca-perdedor::after {
    transform: rotate(-45deg)
}

.ronda-inicial .combate-llave:after,
.ronda-clasificatoria .combate-llave:after,
.ronda-gran-final .combate-llave:after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    width: 28px;
    border-top: 1px solid #617368
}

.ganador-llave {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 12px;
    border: 1px solid #24e7a04f;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 0, #24e7a02a, transparent 50%), linear-gradient(135deg, #153d29, #261326);
    box-shadow: 0 14px 30px #0004, inset 0 1px #ffffff0e
}

.simbolo-ganador {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #24e7a045;
    border-radius: 50%;
    color: #24e7a0;
    font-size: 18px;
    text-shadow: 0 0 18px #24e7a080
}

.ganador-llave strong {
    margin: 10px 0 7px;
    font-size: 14px
}

.identidad-ganador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    color: #aab5ae;
    font-size: 11px
}

.identidad-ganador>span:last-child {
    min-width: 0;
    overflow-wrap: anywhere
}

.avatar-llave-destacado {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 10px
}

.ronda-clasificados .identidad-ganador {
    gap: 10px;
    font-size: 13px;
    font-weight: 700
}

.ronda-clasificados .avatar-llave-destacado {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 12px
}

.ganador-llave.campeon {
    border-color: #f024bf52;
    background: radial-gradient(circle at 50% 0, #f024bf28, transparent 52%), linear-gradient(135deg, #153d29, #321229)
}

@media(max-width:760px) {
    .llaves-section {
        padding-top: 68px
    }

    .filtros-llaves {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr)
    }

    .filtros-llaves button {
        min-width: 0;
        padding-inline: 6px
    }

    .panel-llave {
        padding: 20px 14px;
        border-radius: 20px
    }

    .resumen-llave {
        align-items: flex-start;
        flex-direction: column;
        padding-bottom: 18px;
        gap: 8px
    }

    .resumen-llave h3 {
        font-size: 32px
    }

    .resumen-llave a,
    .insignia-final {
        margin-left: 0
    }

    .arbol-llave {
        column-gap: 40px
    }
}