:root {
    --azul: rgb(2 138 171);
    --gris: rgb(74, 74, 74);
    --naranja: rgb(246 133 55);
    --blanco: #ffffff;
    --negro: #000000;
}

/* ========== Fondos ========== */
.bg-azul {
    background-color: var(--azul) !important;
}

.bg-gris {
    background-color: var(--gris) !important;
}

.bg-naranja {
    background-color: var(--naranja) !important;
}

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

.bg-negro {
    background-color: var(--negro) !important;
}

/* ========== Colores de texto ========== */
.texto-azul {
    color: var(--azul) !important;
}

.texto-gris {
    color: var(--gris) !important;
}

.texto-naranja {
    color: var(--naranja) !important;
}

.texto-blanco {
    color: var(--blanco) !important;
}

.texto-negro {
    color: var(--negro) !important;
}

/* ========== Bordes ========== */
.borde-azul {
    border: 2px solid var(--azul) !important;
}

.borde-gris {
    border: 2px solid var(--gris) !important;
}

.borde-naranja {
    border: 2px solid var(--naranja) !important;
}

.borde-blanco {
    border: 2px solid var(--blanco) !important;
}

.borde-negro {
    border: 2px solid var(--negro) !important;
}

/* ----------------------------
    Pagina Contacto
----------------------------- */
.descripcionlateraltarjeta {
    color: white !important;
    background-color: var(--gris);
}

    .descripcionlateraltarjeta p {
        color: white !important;
    }

    .descripcionlateraltarjeta h3 {
        color: white !important;
    }

.btn-group-xs > .btn, .btn-xs {
    padding: .25rem .4rem;
    font-size: .875rem;
    line-height: .5;
    border-radius: .2rem;
}