* {
    box-sizing: border-box;
    }
    
    body {
        font-family: Arial;
    }
    
    
    /*Contenedor para cajas flexibles*/
    div#principal {
        display:-webkit-flex;
        display: flex;
        width:100% ;
    }
    
    /*Estilo para el menú de navegación*/
    div#menu {
        -webkit-flex:1;
        -ms-flex:1;
        flex: .5;
        background-color: rgba(138, 177, 250, 0.555);
        padding: 30px;
        padding-top: 50px;
    }
    
    /*Estilo para lista dentro del menú*/
    ul#temas {
        list-style-type: none;
        padding: 30px;
        text-decoration-line: none;
        text-align: center;
    }
    
  
    /*Estilo para la caja de logo*/
    div#cajalogo {
        width: 150px;
        max-height: 100px;
        float: left;
        flex: 3;
    }
    
    /*Estilo para el logo*/
    #logo {
        width: 150px;
        max-height: 150px;
        margin-left: 40px;
        margin-top: 50px;
    }
    
    /*Estilo al contenido*/
    div#seccion {
        -webkit-flex: 3;
        -ms-flex: 3;
        flex: 3;
        background-color:rgba(241, 202, 235, 0.623);
        padding: 10px;
        padding-left: 40px;
        padding-right: 40px;
    }
    
    /*Estilo para articulo*/
    div.articulo {
        text-align: justify;
        font-family:Verdana;
        margin-left: 2%;
        margin-right: 2%;
        padding: 10px;
        padding-left: 40px;
        padding-right: 40px;
        
    }
    
    /*Estilo para el pie de página*/
    div#pie {
        background-color:rgba(201, 92, 155, 0.685);
        padding: 8px;
        text-align: center;
        color: aliceblue;
    }
    
    /*Diseño responsivo para div principal*/
    @media (max-width:800px) {
        div#principal {
            -webkit-flex-direction: column;
            flex-direction: column;
        }
    }
.contenedor {
    display: flex;
    align-items:normal;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    max-width: 800px;
    margin: 10px;
    flex-wrap:wrap; /* Permite que se acomode en pantallas pequeñas */
  }

  .texto {
    flex: 1 1 100%;
    font-size: 17px;
    font-family: Verdana;
    text-align: justify;
  }

  .imagen {
    flex: 1;
    max-width: 100%;
  }

  .imagen img {
    max-width: 100%;
    height: 400px ;
    border-radius: 10px;
  }
  @media (min-width: 700px) {
    .texto, .imagen {
      flex: 1 1 45%;
    }
  }