* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }

body {
    background: #2563eb ;
    color: #f44336;
    line-height: 1.6;
}

.grid-flex1 {
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
    gap: 10px;
    padding: 10px;
}

.grid-flex1 > * {
    padding: 20px;
    border-radius: 6px;
    color: #000000 ;
    display: flex;
    align-items: center;
    justify-content: center;
	flex-direction: row;
	row-gap: 20px;
}

.cabecera { flex: 1 1 100%; background: #bceb25 ; }
.nav { flex: 1 1 100%; background: #bceb25 ; }
.aside-izq { flex: 1 1 20%; background: #bceb25 ; }
.main { display: flex; flex: 1 1 55%; background: #bceb25 ; }
.aside-der { flex: 1 1 20%; background: #bceb25 ; }
.pie { flex: 1 1 100%; background: #bceb25 ; }

@media (max-width: 768px) {
    .aside-izq, .aside-der { flex: 1 1 100%; }
    .main { flex: 1 1 100%; }
}