/* Estilos base (móviles primero) */
body {
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  
  header, nav, main, aside, footer,iframe {
    padding: 20px;
    border: 1px solid #ccc;
    margin: 5px;
  }
  
  main, aside {
    flex: 1;
  }
  
  /* Tablet (pantallas desde 600px) */
  @media (min-width: 600px) {
    body {
      flex-direction: row;
      flex-wrap: wrap;
    }
  
    header, footer {
      width: 100%;
    }
  
    nav {
      width: 100%;
    }
  
    main {
      width: 70%;
    }
    iframe{
        width: 50%;
    }
    
    aside {
      width: 30%;
    }
  }
  
  /* Escritorio (pantallas desde 900px) */
  @media (min-width: 900px) {
    body {
      max-width: 1200px;
      margin: auto;
    }
  
    nav {
      width: 20%;
    }
  
    main {
      width: 60%;
    }
  
    iframe{
        width: 40%;
    }


    aside {
      width: 20%;
    }
  }
  