*{box-sizing: border-box;
}

  body {
    background-color: #bdf093;

    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   
    margin: 0;
  }


    h1{
      display: block;
      padding: 1em;
      background-color: rgba(97, 161, 99);
      color: hsl(0, 0%, 2%);
      font-size: 18px;
      text-align: center;
      border-radius: 0.25em;
      box-shadow: 4px 3px 6px rgb(24, 64, 68);
      max-width: 80%;
      margin: 1em auto;

    }
    h2{
        display: block;
        padding: 1em;
        background-color: rgba(97, 161, 99);
        color: hsl(0, 0%, 2%);
        font-size: 18px;
        text-align: center;
        border-radius: 0.25em;
        box-shadow: 4px 3px 6px rgb(24, 64, 68);
        max-width: 80%;
        margin: 1em auto;

      }
      h3{
        display: block;
        padding: 1em;
        background-color: rgba(97, 161, 99);
        color: hsl(0, 0%, 2%);
        font-size: 18px;
        text-align: center;
        border-radius: 0.25em;
        box-shadow: 4px 3px 6px rgb(24, 64, 68);
        max-width: 80%;
        margin: 1em auto;
      }
      p {
        

        max-width: 80%;
        margin: 1em auto;
      
        }
        ol {
          max-width: 80%;
          margin: 1em auto;
        }

  img {

    max-width: 100%;
  }
  
    a {

    text-decoration: none;
    color: rgba(5, 104, 91, 0.75);
    font-family: Arial;
    font-size: 1.1em;
  }
  

  ul,
  ol {
    list-style: none;
    padding-inline: 0;
  }
  .contenedora {
    width: min( 100%, 75rem );
    margin-inline: auto;
    padding: 1rem;
  }
  
  header,
  footer {
    background-color: rgb(97, 161, 99);
    color: rgb(23, 24, 24);
  }
  
  header {
    box-shadow: 0 5px 3px rgba(42, 42, 42, 0.2);
  }
  header .contenedora {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #logo img {

    background-color: rgb(183, 235, 241);
    padding: .10em;
    border: solid 4px rgb(24, 120, 139);
    border-radius: .10em;
    aspect-ratio: 2 / 1;
    width: 8em;
  }
  .menu-btn {
    background: rgba(21, 158, 170, 0.489);
  }
  
  .menu-btn,
  .menu-fondo {
    border-radius: 50%;
    padding: .75rem;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
  }
    
  header nav a {
    color: rgb(193, 231, 200);
    background-color: rgb(6, 51, 3);
    display: block;
    width: 5em;
    margin: .25em;
    padding-block: .25em;
    text-align: center;
    border-radius: .25em;
    
  
  }


  section {
    padding-bottom: 2rem;
  }

  .comitente {
    font-size: 1.25em;
  }
  .titulo {
    border-block-end: 4px solid rgb(43, 160, 90);
    padding-bottom: .25rem;
  }

  .equipo_textos {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .equipo_textos a {
    margin: auto  0 0 auto;
  }
  

  
  footer p {
    margin-block-end: 0;
  }

    .menu-btn {
      display: none;
    }
     header nav,
     header nav ul {
      display: contents;
    }

    header nav ul li:first-of-type {
      margin-inline-start: auto;
    }
  

    header nav ul li:nth-of-type(-n + 2) {
      order: -1;
    }
  
    header nav ul li:last-of-type {
      margin-inline-end: auto;
    }

    header .contenedora {
      gap: .5em;
    }

    .titulos{
      /* se eliminan los márgenes
      definidos para celulares */
      margin: 0;
      /* caben 2 en la misma línea */
      width: calc(50% - .5em);
    }
  
  /* componente (article) con todos los datos de cada integrante */
    .titulos {
  /* color de fondo */      
      background-color: #7b509126;
  /* distancia vertical entre los integrantes (1/2 tamaño del texto) */    
      margin-block: 0.5em;
  /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
      padding: 1em;
  /* borde redondeado 1/4 del tamaño del texto */    
      border-radius: 0em;
  /* caja flexible para que la imagen quede a la izquierda y los textos a la derecha */
      display: flex;
  /* separa sus elementos con una "calle" */
      gap: 1em;
  }
  @media screen and (min-width:768px){
    header nav ul {
      flex-direction: row;
    }
}