/* Estilos para la contenedor principal */
.contenedor {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Para que ambas columnas tengan la misma altura */
}

/* Estilos para la parte izquierda */
.izquierda {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Estilos para la parte izquierda superior */
.izquierda-superior {
    background-color: #98B271;
    padding: 5%; /* Cambiado a porcentaje */
}

/* Estilos para la parte izquierda inferior */
.izquierda-inferior {
    background-color: #b0d380;
    padding: 5%; /* Cambiado a porcentaje */
}

/* Estilos para la parte derecha (imagen) */
.derecha {
    flex: 1;
    display: flex;
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: stretch; /* Estira la altura para que coincida con la columna izquierda */
}

/* Ajusta el ancho máximo de la imagen y su altura a auto */
.derecha img {
    max-width: 100%;
    height: auto;
}