body{
    background:linear-gradient(135deg,#1a0b1f,#2a1238);
    color:white;
    min-height:100vh;
}

.navbar-rock{
    background:linear-gradient(
    90deg,
    #2a1238,
    #ff8a00
    );
    box-shadow:0 0 20px rgba(0,0,0,0.5);
}

h1{

    font-size:2.5rem;

    font-weight:800;

    color:white;

    letter-spacing:1px;

    text-shadow:
        0 0 15px rgba(255,138,0,.5);

    margin-bottom:30px;
}

.card-rock{
    background:#2a1238;   
    border:none;
    border-radius:15px;
    color:white;
}

.hero{
    text-align:center;
    padding:60px;
}

.hero h1{
    color:#ff8a00;

    font-size:4rem;
    font-weight:bold;
    text-shadow:
    0 0 15px rgba(255,138,0,.5);
}

.hero p{
    color:#f5f5f5;
    font-size:1.2rem;
}

.btn-rock{
    background:#ff8a00;
    border:none;
}

.btn-rock:hover{
    background:#ff6a00;
}

/* ========================= */
/* CARRERA 2.0 */
/* ========================= */

.titulo-carrera{

    text-align:center;

    margin-bottom:35px;

}

.alerta-piedras{

    text-align:center;

    background:#2d163b;

    border:3px solid #ff8a00;

    border-radius:20px;

    padding:40px;

}

.pista{

    position:relative;

    margin-top:70px;

    padding-top:35px;
    padding-bottom:35px;

    background:#8c6540;

    border-radius:25px;

    overflow:visible;

    border:4px solid #ff8a00;

    box-shadow:
        0 15px 40px rgba(0,0,0,.5),
        0 0 25px rgba(255,138,0,.15);

}

.pista::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:35px;
    border-radius: 25px;

    background:#2f7f2f;

}

.pista::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:35px;

    border-radius: 25px;

    background:#2f7f2f;

}

.carril{

    position:relative;

    height:120px;

    border-bottom:2px dashed rgba(255,255,255,.20);

}

.carril:last-child{

    border-bottom:none;

}

.numero-carril{

    position:absolute;

    left:15px;

    top:40px;

    width:40px;

    height:40px;

    border-radius:50%;

    background:#ff8a00;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:bold;

    z-index:50;

}

.competidor{

    position:absolute;

    left:70px;

    top:15px;

    width:320px;

    height:90px;

    background:#2d163b;

    border:3px solid #ff8a00;

    border-radius:18px;

    padding-left:80px;

}

.roca{
    position:absolute;
    left:80px;
    top:30px;
    width:60px;
    height:60px;
    object-fit:cover;
    z-index:500;
    transition:none;
}

.info-piedra h3{

    margin:0;

    font-size:1.6rem;

    color:white;

    font-weight:bold;

}

.info-piedra p{

    margin:0;

    color:#d8d8d8;

    font-size:1rem;

}

.info-piedra{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.nombre{

    font-size:1.3rem;

    font-weight:bold;

    color:white;

}

.dueno{

    color:#d0d0d0;

    margin-top:5px;

}

.meta{

    position:absolute;

    right:150px;

    top:35px;

    bottom:35px;

    width:25px;

    background:repeating-linear-gradient(
        0deg,
        white 0px,
        white 15px,
        black 15px,
        black 30px
    );

    z-index:200;

}

.cartel-meta{

    position:absolute;

    right:90px;

    top:-75px;

    z-index:999;

    background:linear-gradient(
        135deg,
        #5c2f00,
        #ff8a00
    );

    color:white;

    padding:10px 20px;

    border-radius:15px;

    border:4px solid #ff8a00;

    font-weight:bold;

    font-size:1.3rem;

    box-shadow:
        0 0 40px rgba(255,138,0,.6);

}

/* ========================= */
/* LOGIN */
/* ========================= */

.form-control{

    background:#3b1b4d;
    border:2px solid #ff8a00;
    color:white;

}

.form-control:focus{

    background:#44205a;
    color:white;

    border-color:#ffb347;

    box-shadow:0 0 15px rgba(255,138,0,.4);

}

.form-label{

    color:white;
    font-weight:bold;

}

.card-rock{

    background:#2d163b;

    border-radius:20px;

    border:3px solid #ff8a00;

    box-shadow:
        0 0 40px rgba(255,138,0,.25);

}

.btn-rock{

    background:#ff8a00;

    color:white;

    font-size:1.2rem;

    font-weight:bold;

    border:none;

    border-radius:12px;

    padding:12px;

    transition:.3s;

}

.btn-rock:hover{

    background:#ff6b00;

    transform:translateY(-2px);

    box-shadow:0 0 20px rgba(255,138,0,.6);

}

.btn:disabled{

    opacity:0.6;

    cursor:not-allowed;

    transform:none !important;

    box-shadow:none !important;

}

/* ========================= */
/* CUENTA REGRESIVA */
/* ========================= */

.cuenta-regresiva{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9998;

    backdrop-filter:blur(6px);

}

#numeroCuenta{

    font-size:180px;

    font-weight:900;

    color:#ff8a00;

    text-shadow:
        0 0 40px rgba(255,138,0,.9);

    animation:zoomCuenta .9s ease;

}

@keyframes zoomCuenta{

    from{

        transform:scale(.2);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.tarjeta-piedra{

    position:absolute;

    left:55px;

    top:10px;

    width:330px;

    height:75px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:10px;

    background:#2d163b;

    border:3px solid #ff8a00;

    border-radius:18px;

    transition:.4s;

}

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

.pantalla-podio{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(8px);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.podio-card{

    width:1000px;

    max-width:95%;

    background:linear-gradient(
        180deg,
        #2d163b,
        #1a0f25
    );

    border:4px solid #ff8a00;

    border-radius:25px;

    padding:35px;

    text-align:center;

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

    animation:zoomGanador .45s ease;

}

.podio{

    margin-top:30px;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:35px;

}

.puesto{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.puesto img{

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:18px;

    border:4px solid white;

    margin-bottom:15px;

    background:white;

}

.puesto h2,
.puesto h3{

    margin-bottom:15px;

    color:white;

    font-weight:800;

}

.caja-podio{

    width:160px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    font-weight:bold;

    color:white;

    border-radius:15px 15px 0 0;

    box-shadow:0 8px 20px rgba(0,0,0,.4);

}

.primero .caja-podio{

    height:220px;

    background:linear-gradient(
        180deg,
        #ffd700,
        #d99a00
    );

}

.segundo .caja-podio{

    height:170px;

    background:linear-gradient(
        180deg,
        #d7d7d7,
        #8f8f8f
    );

}

.tercero .caja-podio{

    height:130px;

    background:linear-gradient(
        180deg,
        #c07a35,
        #8b4d17
    );

}

#clasificacionCompleta{

    margin-top:35px;

    font-size:1.2rem;

    color:white;

    text-align:left;

    width:60%;

    margin-left:auto;

    margin-right:auto;

}

#clasificacionCompleta div{

    background:#2d163b;

    margin-bottom:10px;

    padding:12px 18px;

    border-radius:12px;

    border-left:6px solid #ff8a00;

}

.puesto{

    transition:all .8s ease;

    opacity:1;

}

.primero{

    transform:translateY(-80px);

    animation:flotar 2s infinite ease-in-out;

}

@keyframes flotar{

    0%{

        transform:translateY(-80px);

    }

    50%{

        transform:translateY(-92px);

    }

    100%{

        transform:translateY(-80px);

    }

}

.primero .caja-podio{

    animation:brilloOro 1.8s infinite;

}

@keyframes brilloOro{

    0%{

        box-shadow:0 0 10px gold;

    }

    50%{

        box-shadow:0 0 45px gold;

    }

    100%{

        box-shadow:0 0 10px gold;

    }

}


/* ===================================== */
/* HOME */
/* ===================================== */

.hero-home{

    text-align:center;

    padding:70px 20px 40px;

}

.hero-title{

    font-size:5rem;

    font-weight:900;

    color:#ff8a00;

    text-shadow:
        0 0 25px rgba(255,138,0,.8),
        0 0 50px rgba(255,138,0,.3);

    margin-bottom:20px;

}

.hero-subtitle{

    font-size:1.6rem;

    color:#f0f0f0;

    margin-bottom:45px;

}

.hero-icons{

    display:flex;

    justify-content:center;

    gap:80px;

    margin-bottom:50px;

    flex-wrap:wrap;

}

.hero-icons div{

    display:flex;

    flex-direction:column;

    align-items:center;

    font-size:2rem;

    color:#ffb347;

    transition:.3s;

}

.hero-icons div:hover{

    transform:translateY(-8px) scale(1.08);

}

.hero-icons span{

    font-size:1.2rem;

    color:white;

    margin-top:10px;

}

.btn-home{

    font-size:1.5rem;

    padding:18px 50px;

    border-radius:18px;

    box-shadow:
        0 0 25px rgba(255,138,0,.5);

    transition:.3s;

}

.btn-home:hover{

    transform:scale(1.08);

    box-shadow:
        0 0 40px rgba(255,138,0,.9);

}

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

.home-card{

    width:330px;

    margin:70px auto;

    background:#2d163b;

    border:3px solid #ff8a00;

    border-radius:25px;

    padding:35px;

    text-align:center;

    box-shadow:
        0 0 40px rgba(255,138,0,.25);

}

.home-card h2{

    color:#ffcc66;

    margin-bottom:25px;

}

.campeon-home{

    width:160px;

    height:160x;

    object-fit:contain;

    background:white;

    border-radius:20px;

    padding:10px;

    box-shadow:
        0 0 25px rgba(255,255,255,.2);

}

.home-card h3{

    margin-top:20px;

    font-size:2rem;

    font-weight:bold;

}

.home-card p{

    font-size:1.2rem;

    color:#ddd;

}

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

.estadisticas{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

    margin-top:60px;

    margin-bottom:80px;

}

.stat{

    background:#2d163b;

    border:2px solid #ff8a00;

    border-radius:20px;

    text-align:center;

    padding:30px;

    transition:.3s;

    box-shadow:
        0 0 20px rgba(255,138,0,.15);

}

.stat:hover{

    transform:translateY(-8px);

    box-shadow:
        0 0 35px rgba(255,138,0,.5);

}

.stat h2{

    color:#ff8a00;

    font-size:2.5rem;

    font-weight:900;

    margin-bottom:10px;

}

.stat span{

    color:white;

    font-size:1.1rem;

}

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

@media(max-width:768px){

.hero-title{

    font-size:2rem;

}

.hero-subtitle{

    font-size:1.2rem;

}

.hero-icons{

    gap:30px;

}

.hero-icons div{

    font-size:2.2rem;

}

.home-card{

    width:95%;

}

.campeon-home{

    width:170px;

    height:170px;

}

}