body {
    margin: 0;
    background-color: #ffffff;
}

.img-pais {
    height: 200px;
    width: 200px;
}

.contenedor-imagen {
    /* Opcional: Define un ancho máximo para el contenedor si no es el 100% del padre */
    max-width: 1024px; /* Ejemplo: el div no crecerá más allá de 800px de ancho */
    margin: 0 auto; /* Para centrar el contenedor */
    border: 1px solid #ccc; /* Para visualizar el div */
}

    .contenedor-imagen img {
        max-width: 100%; /* La imagen no excederá el ancho de su contenedor */
        height: auto; /* Mantiene la proporción de la imagen automáticamente */
        display: block; /* Elimina el espacio extra debajo de las imágenes (comportamiento de inline) */
    }

.contenedor-imagen-con-altura {
    width: 100%;
    height: 64px; /* Define una altura fija o variable para el div */
    overflow: hidden; /* Asegura que la imagen no se salga si no cabe */
    border: 1px solid #ccc;
}

    .contenedor-imagen-con-altura img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Recorta la imagen para llenar el contenedor manteniendo la proporción */
        /* Otros valores de object-fit:
     - contain: La imagen se escala para caber completamente dentro del contenedor (puede dejar espacio en blanco).
     - fill: La imagen se estira para llenar el contenedor (puede distorsionarse).
     - scale-down: Compara 'none' y 'contain' y usa el más pequeño.
     - none: La imagen no se escala.
  */
    }

.contenedor-proporcion {
    position: relative; /* Necesario para que la imagen se posicione absolutamente */
    width: 100%;
    padding-bottom: 56.25%; /* Para una proporción 16:9 (9 / 16 = 0.5625 * 100%) */
    /* Para una proporción 4:3, sería padding-bottom: 75%; (3 / 4 = 0.75 * 100%) */
    /* Para una proporción 1:1 (cuadrado), sería padding-bottom: 100%; */
    height: 0; /* Necesario para que el padding-bottom sea el que defina la altura */
    overflow: hidden; /* Oculta cualquier parte de la imagen que se salga */
    border: 1px solid #ccc;
}

    .contenedor-proporcion img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Puedes usar cover o contain según tu necesidad */
    }

.disclaimer-box {
    width: 100%;
    background-color: #E0F7FA; /* Fondo celeste muy claro */
    border: 1px solid #B2EBF2; /* Borde celeste un poco más oscuro */
    padding: 15px 20px; /* Espacio interno alrededor del texto */
    margin: 20px 0; /* Margen superior e inferior para separarlo de otros elementos */
    color: #333333; /* Color de texto negro/gris oscuro */
    font-family: Arial, sans-serif; /* Fuente legible */
    font-size: 0.95em; /* Tamaño de fuente ligeramente más pequeño */
    border-radius: 8px; /* Bordes redondeados */
    display: flex; /* Para alinear el icono y el texto */
    align-items: flex-start; /* Alinea el icono con la parte superior del texto */
    line-height: 1.5; /* Espaciado entre líneas para mejor lectura */
}

.disclaimer-icon {
    font-size: 1.8em; /* Tamaño del icono */
    color: #00796B; /* Un verde azulado para el icono para que resalte */
    margin-right: 15px; /* Espacio entre el icono y el texto */
    line-height: 1; /* Asegura que el icono no añada espacio vertical extra */
}

.disclaimer-box p {
    margin: 0; /* Elimina el margen predeterminado del párrafo dentro del div */
}

.disclaimer-box strong {
    font-weight: bold; /* Asegura que la palabra "Advertencia" sea negrita */
}