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

body{
    background:#ececec; 
    font-family:Arial, Helvetica, sans-serif;
    min-height:100vh;
    display:flex;
    justify-content:center;
}

.app{
    width:100%;
    max-width:600px;
    min-height:100vh;
    padding: 40px 78px 70px;
    position:relative;
    background-image: url('../img/fondo.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero{
    text-align:center;
    margin-top:40px;
}

.hero h1{
    color:#ff0050;
    font-size:clamp(3rem,8vw,5rem);
    font-family:cursive;
    font-weight:400;
}

.hero h2{
    color:#ff0050;
    font-size:clamp(2rem,6vw,3rem);
    font-weight:900;
    margin-top:10px;
}

#registroForm{
    margin-top:60px;
}

.campo{
    margin-bottom:35px;
}

.campo label{
    display:block;
    color:#ff0050;
    font-size:2rem;
    font-weight:900;
    margin-bottom:15px;
}

.campo input{
    width:100%;
    height:90px;
    border:2px solid #ff0050;
    border-radius:24px;
    background:transparent;
    padding:0 25px;
    font-size:1.3rem;
    outline:none;
}

.campo input.error{
    border-color:#d40000;
}

.g-recaptcha-wrapper{
    display:flex;
    justify-content:center;
    margin:20px 0 40px;
}


@media(max-width:480px){

    .campo label{
        font-size:1.8rem;
    }

    .campo input{
        height:80px;
        font-size:1.1rem;
    }
    
}


.partido-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.flecha{
    flex-shrink:0;
}

.flecha img{
    width:55px;
}

.partido-container{
    position:relative;
    width:100%;
    max-width:480px;
}

.partido-base{
    width:100%;
    display:block;
}

#goles{
    position:absolute;

    left:38%;
    top:68%;

    transform:translate(-50%, -50%);

    color:#ff0050;
    font-size:7rem;
    font-weight:900;
    line-height:1;

    letter-spacing:4px;
}

#btnMenos{
    position:absolute;

    right:10%;
    top:36%;

    width:70px;
    height:70px;

    border:none;
    background:transparent;

    color:#ff0050;

    font-size:4rem;
    font-weight:bold;

    cursor:pointer;
}

#btnMas{
    position:absolute;

    right:10%;
    top:58%;

    width:70px;
    height:70px;

    border:none;
    background:transparent;

    color:#ff0050;

    font-size:4rem;
    font-weight:bold;

    cursor:pointer;
}

.premios-card{
    margin-top:25px;
    text-align:center;
}

.premios-card img{
    width:100%;
    max-width:315px;
}

@media(max-width:480px){

    #goles{
        font-size:2rem;
        left: 42%;
    }

    #btnMenos {

        right: 13%;
        top: 43%;
    }

    #btnMas{
        right: 13%;
        top: 66%;
    }
    

    #btnMenos, #btnMas {
        width: 20px;
        height: 20px;
        font-size: 1rem;
    }


}


@media(max-width:380px){

    #goles{
        font-size:2rem;
        left: 42%;
    }

    #btnMenos, #btnMas {
        width: 20px;
        height: 20px;
        font-size: 1rem;
    }

        #btnMas{
        right: 11%;
        top: 61%;
    }


}