/* Estilos generales y utilitarios */
.color-azul {
    color: var(--color-azul-movistar);
}

.bg-blanco {
    background-color: var(--color-blanco-movistar);
}

.bg-purpura {
    background-color: var(--color-purpura-movistar);
}

/* Estructura de secciones */
section {
    padding: 0px 0;
}

/* Títulos y texto */
.titulo {
    text-align: center;
    color: var(--color-azul-movistar);
    padding: 130px 239px 50px 234px;
    font-size: 45px;
    font-family: 'telefonica';
}

.sub-titulo {
    text-align: center;
    color: var(--color-azul-movistar);
    margin-bottom: 10px;
    font-size: 30px;
    font-family: 'telefonica';
}

.sub-titulo1 {
    text-align: center;
    color: var(--color-azul-movistar);
    margin-bottom: 10px;
    font-size: 45px;
    font-family: 'telefonica';
}

.description {
    text-align: center;
    padding: 0px 135px 120px 135px;
    font-family: 'telefonica';
}

.description1 {
    text-align: center;
    padding: 0px 0px 120px 0px;
    font-family: 'telefonica';

}

.description p {
    color: var(--color-gris-4-movistar);
    font-size: 24px;
    line-height: 1.6;
    font-family: 'telefonica';
}

.description1 p {
    font-size: 26px;
    font-family: 'telefonica';

}

/* Cajas de selección */
.boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    padding: 0px 223.5px 120px 223.5px;
}

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    border-radius: 6px;
    border: 2px solid var(--color-azul-movistar);
    color: var(--color-gris-5-movistar);
    background: var(--color-blanco-movistar);
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 200px;
    height: 74px;
}

.box i {
    font-size: 1.5rem;
}

.box svg path,
.box svg [fill] {
    fill: var(--color-azul-movistar);
    transition: fill 0.3s ease;
}

.box svg [stroke] {
    stroke: var(--color-azul-movistar);
    transition: fill 03s ease;
}

.box.active,
.box:hover {
    fill: var(--color-blanco-movistar);
    background: var(--color-azul-movistar);
    color: var(--color-blanco-movistar) !important;
}

.box:hover svg path,
.box:hover svg [fill],
.box.active svg path,
.box.active svg [fill] {
    fill: var(--color-blanco-movistar);

}

.box:hover svg [stroke],
.box.active svg [stroke] {
    stroke: var(--color-blanco-movistar);
}

/* .btn-page-boxes {
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
} */

@media (max-width: 992px) {
    .description1 p {
        font-size: 16px;
    }

    .titulo {
        font-size: 32px;
        padding: 65.07px 55px 35px 55px;
    }

    .boxes {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        padding: 0px 55px 26.07px 55px;
    }

    .description {
        text-align: center;
        padding: 48px 22px 120px 22px;
    }

    .description p {
        color: var(--color-gris-4-movistar);
        font-size: 16px;
        line-height: 1.6;
    }

    .sub-titulo {
        text-align: center;
        color: var(--color-azul-movistar);
        margin-bottom: 10px;
        font-size: 20px;
    }
}