:root {
	--rojo: rgb(221, 29, 33);
    --azul: rgb(2 138 171);
    --gris: rgb(74, 74, 74);
    --amarillo: rgb(255, 198, 0);
    --naranja: rgb(246 133 55);
    --blanco: #ffffff;
    --gris-oscuro: #2c2c2c;
    --negro: #000000;
    --btnAzul1: #00b8fc;
    --btnAzul2: #00629d;
    --btnAzulDisabled1: #b8dfee;
    --btnAzulDisabled2: #7fb3cc;
    --btnAzulBorder: #033655;
    --btnAzulBorderDisabled: #8aaec2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.borde-amarillo {
    border: 2px solid var(--amarillo) !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;
}

/* ========== Botones naranjas ========== */
.btn.bg-naranja {
    padding: 0.5rem 2.5rem;
    min-width: 140px;
    width: auto !important;
}

/* ========== Checkboxes ========== */
.form-check-input:checked {
    background-color: var(--azul);
    border-color: var(--azul);
}

.form-check-input:focus {
    border-color: var(--azul);
    box-shadow: 0 0 0 0.25rem rgba(2, 138, 171, 0.25);
}

/* ----------------------------
    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;
}
/* Tarjetas */
.tarjeta {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    border: 4px solid #028aab; /* azul fuerte */
    color: #005BBB;
    text-decoration: none;
    padding: 40px 20px;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 8px;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 220px; /* para que queden proporcionadas y centradas */
}

/* Hover */
.tarjeta:hover {
    background: #028aab;
    color: #ffffff;
}

/* ============================== */
/*    RESPONSIVE GLOBAL MÓVIL     */
/* ============================== */
@media (max-width: 767.98px) {
    .zonaHeader img {
        max-height: 100px;
        max-width: 280px !important;
    }

    .zonaLandingBody {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .zonaLandingBody img.img-fluid {
        max-height: 160px;
        width: auto;
    }

    .tarjeta {
        padding: 16px 10px;
        font-size: 0.9rem;
        max-width: 100%;
    }
}