/* ---------------------------------------------------
   1. DISEÑO BASE (CELULARES / MÓVILES)
   Estos estilos aplican desde 0px en adelante
--------------------------------------------------- */
.contenedor-adaptable {
    display: flex;
    flex-direction: column; /* Apila las tarjetas verticalmente */
    gap: 15px; /* Espacio entre tarjetas */
    background-color: #ffe0b2; /* Un fondo naranja claro para celular */
    

}
.divpc {
    display: none;
}
.divmob {
    display: block;
}
/* ---------------------------------------------------
   2. DISEÑO PARA PC / ESCRITORIO
   Se activa solo si la pantalla mide 768px o más
--------------------------------------------------- */
@media (min-width: 768px) {
    
    .contenedor-adaptable {
        flex-direction: row; /* Coloca las tarjetas una al lado de la otra */
        justify-content: space-between; /* Distribuye el espacio */
        background-color: #b2dfdb; /* Cambia a un fondo verde claro en PC */
        
    }


    .divpc {
        display: block;
    }
    .divmob {
        display: none;
    }

}