*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    background-color: white;
}
   /* DESDE AQUI COMIENZA EL CODIGO DE LA BANDERA*/


.article-container-bandera {
    position: relative; /* Permite posicionar elementos dentro del artículo */
    width: 100%; /* Ancho del contenedor */
    overflow: hidden; /* Oculta cualquier contenido que se salga del contenedor */
}

.img-bandera{
    width: 40%;
    height: 30%;
}

.p-texto-bandera{
    text-align: center;
    width: 60%;
    height: 30%;
    color: white; /* Color del texto */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para el texto */
    padding: 23px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 20px;
}

/*---------------------------- Media Query -------------------------------*/
@media (min-width:550px){
    .article-container-bandera {
        display: flex;
    }
    .img-bandera{
        margin-left: 0;
        width: 30%;
        height: 35%;
    }
    .p-texto-bandera{
        width: 100%;
    }
}

@media (max-width: 549px) {
    /* PARA MENOR DE PANTALLAS DE 800PX  */

    .article-container-bandera {
        /* display: none; */
        width: 100%;
        height: auto;
        /* overflow: hidden; */ /* Removido para evitar que el contenido se recorte */
        text-align: center; /* Centrar el contenido */
    }
    
    .p-texto-bandera {
        width: 100%;
        height: 30%;
        text-align: center;
        position: relative; /* Cambiado de absolute para que esté debajo de la imagen */
        color: white;
        background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para el texto */
        border-radius: 5px;
        font-size: 18px; /* Tamaño ajustado para mejor visibilidad */
        line-height: 1.5;
    }
    
    .img-bandera {
        width: 100%;
        height: 30%;
    }


}