@font-face {
    font-family: 'Eurostile Extended';
    src: url('fonts/EurostileExtended-Roman.woff2') format('woff2'),
         url('fonts/EurostileExtended-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PreguntaBank';
    src: url('fonts/BankGothicBold.woff2') format('woff2'),
         url('fonts/BankGothicBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Texto */
.texto-titulo-sc2
{
font-family: 'PreguntaBank', 'Arial', sans-serif;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.4),
             0 0 20px rgba(255, 255, 255, 0.27),
             0 0 30px rgba(255, 255, 255, 0.27),
             0 0 100px rgba(255, 255, 255, 0.27);
}

.texto-planos-sc2
{
font-size: 18px;
font-family: 'Eurostile Extended', 'Arial', sans-serif;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.4),
             0 0 20px rgba(255, 255, 255, 0.27),
             0 0 30px rgba(255, 255, 255, 0.27),
             0 0 100px rgba(255, 255, 255, 0.27);
}

/* Botones */
.button-fino-250 {
    background-image: url('../img/botones/boton-fino-250.png');
    width: 250px;
    height: 50px;
}

.button-fino-161x51 {
    background-image: url('../img/botones/boton-fino-161x51.png');
    width: 161px;
    height: 51px;
}

.button-azul {
    background-image: url('../img/botones/boton-azul.png');
    width: 242px;
    height: 52px;
}

.button-dorado {
    background-image: url('../img/botones/boton-dorado.png');
    width: 242px;
    height: 52px;
}

.button-seleccion {
    background-image: url('../img/botones/boton-seleccion.png');
    width: 250px;
    height: 64px;
}

.button-seleccion-dorado {
    background-image: url('../img/botones/boton-seleccion-dorado.png');
    width: 250px;
    height: 64px;
}

.button-seleccion-big {
    background-image: url('../img/botones/boton-seleccion-c.png');
    width: 279px;
    height: 71px;
    padding: 20px 20px; /* Espacio alrededor del texto para permitir expansión */
    font-size: clamp(0.5em, 0.5vw, 0.5em);
    line-height: clamp(0.9em, 0.9vw, 0.9em); /* Alinea verticalmente el texto */
}

.button-atras {
    background-image: url('../img/botones/boton-atras.png');
    width: 50px;
    height: 46px;
    cursor: pointer;
}

.button-siguiente {
    margin-top: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 46px;
    background-size: cover;
    transition: filter 0.3s ease-in-out;
    background-image: url('../img/botones/siguiente_1.png');
    cursor: pointer;
}

/**********/

.button-seleccion,
.button-seleccion-big,
.button-seleccion-dorado,
.button-atras,
.button-azul,
.button-dorado,
.button-fino-250,
.button-fino-161x51 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    color: #fff;
    transition: filter 0.3s ease-in-out;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4),
                 0 0 20px rgba(255, 255, 255, 0.2),
                 0 0 30px rgba(255, 255, 255, 0.2);
}

.button-dorado:hover,
.button-seleccion:hover,
.button-seleccion-big:hover,
.button-seleccion-dorado:hover,
.button-azul:hover,
.button-atras:hover,
.button-fino-250:hover,
.button-fino-161x51:hover {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4),
                 0 0 20px rgba(255, 255, 255, 0.2),
                 0 0 30px rgba(255, 255, 255, 0.2),
                 0 0 40px rgba(255, 255, 255, 0.4),
                 0 0 50px rgba(255, 255, 255, 0.4);
    color: #fff;
}

/*******************/