:root
{
    --tamaño_width: 250px;
    --tamaño_height: 50px;
    --color_letras: rgb(255, 255, 255);
    --color_letras_2: rgb(75, 75, 75);
    --color_letras_hover: rgb(255, 255, 255);
    --clor_background-animado: rgb(88, 163, 218);  
    --color_background_fijo:rgba(255, 255, 255, 0);
    --color_borde:rgb(255, 255, 255);
    --color_borde_2:rgb(75, 75, 75);
}

.boton_s2
{
    width: var(--tamaño_width);
    height: var(--tamaño_height);
    background-color: var(--color_background_fijo);
    border-radius: 5px;
    margin-top: 20px;
    cursor: pointer;
    overflow: hidden;
}
.cont_cambio_tamano
{
    width: 100%;
    height: 0%;
    background-color: var(--clor_background-animado);
    transition: height 0.3s;
}
.boton_s2:hover .cont_cambio_tamano
{
    height: 100%;
}

.cont_leras
{
    width: var(--tamaño_width);
    height: var(--tamaño_height);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont_leras p
{
    font-size: 20px !important;
    color: var(--color_letras) !important;
}

.boton_s2:hover .cont_leras p
{
    color: var(--color_letras_hover) !important;
}

.borde
{
    border: 2px solid var(--color_borde);
}
.borde_2
{
    border: 2px solid var(--color_borde_2);
}
.letras_2 p
{
    color: var(--color_letras_2) !important;
}