body {
}
/* Estilos para tablas */
table, th, td {
    border: 0px solid white;
}
.card {
    padding: 0;
}
.card-wrapper {
}
.image-container {
    position: relative; /* Necesario para el posicionamiento */
}
.contenedor {
    position: relative;
    width: 100%; /* o un valor específico */
    height: 400px; /* o un valor específico */
    overflow: hidden; /* Oculta cualquier contenido que desborde */
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* O object-fit: contain */
    z-index: -1; /* Asegura que la imagen esté detrás del texto */
}

.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /*  Color del texto */
    text-align: left;
    background-color: transparent;
    filter: opacity(100%);
    /*  Otras propiedades de estilo para el texto */
}
.blur-image {
    filter: blur(1px); /* Ajusta el valor del desenfoque según sea necesario */
    max-width: 100%;
    height: auto; /* Mantiene la proporción de la imagen */
}
@media only screen and (max-width: 320px) and (min-width: 0px) {
    .flag-banner-principal {
        min-height: 300px;
        background: transparent url('../img/mobile.jpg') no-repeat center top;
        background-size: cover;
        top: 0;
        margin-bottom: 30px !important;
    }

    .flag-banner-global {
        min-height: 200px;
        background: transparent url('') no-repeat center top;
        background-size: 100% auto;
        top: 0;
        margin-bottom: 10px !important;
    }
}
/* Small devices such as large phones (640px and up) */
@media only screen and (max-width: 640px) and (min-width: 321px) {
    .flag-banner-principal {
        min-height: 300px;
        background: transparent url('../img/mobile.jpg') no-repeat center top;
        background-size: cover;
        top: 0;
        margin-bottom: 30px !important;
    }

    .flag-banner-global {
        min-height: 250px;
        background: transparent url('') no-repeat center top;
        background-size: 100% auto;
        top: 0;
        margin-bottom: 10px !important;
    }
}

/* Medium devices such as tablets (768px and up) */
@media only screen and (max-width: 768px) and (min-width: 641px) {
    .flag-banner-global {
        margin-bottom: 30px !important;
        background: transparent url('') no-repeat center top;
        margin-bottom: 30px !important;
        min-height: 150px;
        background-size: 100%;
    }

    .flag-banner-principal {
        min-height: 350px;
        background: transparent url('../img/header.jpg') no-repeat center top;
        background-size: cover;
        top: 0;
        margin-bottom: 30px !important;
    }
}

/* Large devices such as laptops (1024px and up) */
@media only screen and (max-width: 1024px) and (min-width: 769px) {
    .flag-banner-global {
        margin-bottom: 0px !important;
        background: transparent url('') no-repeat center top;
        min-height: 200px;
        background-size: 100%;
        top: 0;
    }

    .flag-banner-principal {
        min-height: 350px;
        background: transparent url('../img/header.jpg') no-repeat center top;
        background-size: cover;
        top: 0;
        margin-bottom: 30px !important;
    }
}

/* Largest devices such as desktops (1280px and up) */
@media only screen and (max-width: 1440px) and (min-width: 1025px) {
    .flag-banner-global {
        min-height: 300px;
        margin-bottom: 30px !important;
        background-size: 100% 100% !important;
        background: transparent url('') no-repeat center top;
    }

    .flag-banner-principal {
        min-height: 350px;
        background: transparent url('../img/header.jpg') no-repeat center top;
        background-size: cover;
        margin-bottom: 30px !important;
    }
}
/* Largest devices such as desktops (1280px and up) */
@media only screen and (max-width: 4500px) and (min-width: 1441px) {
    .flag-banner-global {
        min-height: 350px;
        margin-bottom: 30px !important;
        background-size: contain !important;
        background: transparent url('') no-repeat center top;
    }

    .flag-banner-principal {
        min-height: 350px;
        background: transparent url('../img/header.jpg') no-repeat center top;
        background-size: cover;
        margin-bottom: 30px !important;
    }
}


/* --- Banner responsive --- */
/* ——— Banner ——— */
/* —— Contenedor e imagen —— */
.banner-wrapper {
    overflow: hidden;
}

.banner-img {
    object-fit: cover;
    height: 100%;
}

/* —— Overlay siempre centrado —— */
.banner-overlay {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 90%;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    text-shadow: 0 0 4px rgba(0,0,0,.6);
}

    /* Dejamos el tamaño de fuente por defecto de Bootstrap en escritorio
   (≈ 1.75 rem para h3 y 1 rem para p).  */
    .banner-overlay h3 {
        margin-bottom: .5rem;
        font-weight: 700;
    }

    .banner-overlay p {
        margin: 0;
    }

/* —— Botón flotante —— */
.banner-btn {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

/* —— Vista móvil (< 576 px) —— */
@media (max-width: 575.98px) {

    /* Imagen completa sin recortes extremos */
    .banner-img {
        object-fit: contain;
    }

    /* Botón centrado abajo */
    .banner-btn {
        left: 50%;
        right: auto;
        transform: translateX(40%);
    }

    /* Reducción de textos para que no sobresalgan */
    .banner-overlay h3 {
        font-size: 1.35rem;
    }

    .banner-overlay p {
        font-size: 0.85rem;
    }
}