﻿.contenedor {
    display: flex;
    flex-wrap: wrap; /* Permite que se acomode en móviles */
    gap: 10px; /* Espacio entre los div */
}

.izquierda {
    flex: 30%; /* 30% de ancho */
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 8px;
}

.derecha {
    flex: 70%; /* 70% de ancho */
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* 📱 Ajuste en móviles */
@media (max-width: 768px) {
    .contenedor {
        flex-direction: column; /* Apilar los div en pantallas pequeñas */
    }

    .izquierda, .derecha {
        flex: 100%; /* Ambos div ocupan todo el ancho */
    }
}
