* {
    box-sizing: border-box;
    }
  
  
  :root {
    --color-textos: #232324;
    --color-textos-secundarios: #232324;
    --color-textos-alfa: #232324;
    --color-fondos: #efede1;
    --color-1: #7182d1;
    --color-2: #fbd85e;
    --color-3: #e59d49;
    --color-3-alfa: #e38a84;
    --color-4: #b24942;
    
    --tipo-titulos: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --tipo-textos:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
    --sombras:
      0 
      4px 
      2px 
      var(--color-textos-alfa);
  }
  
  /*tema oscuro responsive*/
  @media (prefers-color-scheme: dark) {
    :root {
      --color-textos: hsl(0 0% 85%);
      --color-textos-secundarios: rgba(255, 255, 255, 0.5);
      --color-textos-alfa: rgba(255, 255, 255, 0.553);
      --color-fondos: hsl(0 0% 10%);
      --color-1: hsl(210 92% 36% / .5);
      --color-2: hsl(38 100% 30%);
      --color-3: hsl(280 29% 30%);
      --color-3-alfa: hsl(280 29% 30% / .15);
      --color-4: hsl(198 100% 44% / .5);
    }
  }
  
  /*reglas generales del cuerpo*/
  body {
    font-family: var(--tipo-textos);
    margin: 0;
    background-color: var(--color-fondos);
  }
  
  /*para todos los títulos*/
  h1,
  h2,
  h3,
  h4 {
    font-family: var(--tipo-titulos);
  }
  
  /*para todas las imagenes no sean mayores que las cajas contenedoras, evita scroll*/
  img {max-width: 100%;
  }
  
  /*todos los vinculos*/
  a {
    text-decoration: none;
    color: var(--color-textos-alfa);
    font-family: var(--tipo-titulos);
    font-weight: bold;
    font-size: .8em;
    border-radius: 0.3em;
  }
  
  /*todas las listas*/
  ul,
    ol {
      list-style: none;
    padding: 0;
    }
  
    /*caja contenedora*/ /*este poner 50rem despues si no puedo solucionar la barra de menu*/
    .contenedora {
      width: min( 75rem, 100% );
    margin-inline: auto;
    padding: 1em;
    text-align: left;
    }
  
    /*componente superior y sus contenidos*/
    header,
    footer {
      background-color: var(--color-3);
    color: var(--color-fondos);
    text-align: center;
    width: 100%;
    margin-inline: auto;
    padding: .8em;
    }
  
    header {
      box-shadow: var(--sombras);
    }

    /*caja flex del header*/
    header .contenedora {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1em;

    }

  
  
    /*para imagenes que estan dentro de una etiqueta id logo*/
  
  #logo img {
    background-color: var(--color-fondos);
    padding: .5rem;
    border: solid 4px var(--color-1);
    border-radius: .5rem;
    aspect-ratio: 2 / 1;
    text-align: center;
    }
  
    /*boton del menu*/
    .menu-btn{
      background: var(--color-2);
    }
  
  .menu-btn,
  .menu-fondo {
    border-radius: 50%;
    padding: .75rem;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
  }
  
  .menu-btn .btn-linea {
    width: 1.5em;
    height: 3px;
    margin-block: 0.25em;
    background: var(--color-fondos);
    transition: all 0.3s ease-out;
  }
  
  /*menu*/
  header nav ul { 
    margin-block: 0;
    display: none;
  }
  
  
  header nav a {
    color: var(--color-fondos);
    background-color: var(--color-1);
    display: block;
    width: max-content;
    margin: .125em;
    padding-inline: 1.5em;
    text-align: center;
    border-radius: 0.25em;
    
  }
  
  /*cuando dse pasa el cursor sobre los vinculos del menu*/
  header nav a:hover {
    background-color:var(--color-fondos);
    color: var(--color-1);
    }
  
  /*boton del menu seleccionado*/
  .index .btn-index,
  .plan .btn-plan,
  .mapa .btn-mapa {
    background-color: var(--color-3-alfa);
    color: var(--color-2);
  }
  
  /*componente central y sus contenidos*/
  /*todas las secciones*/
  section {
          padding-bottom: 2rem;
        }
  
  /*secciones comitente*/
        .comitente {
        font-size: 1.25em;
        }
  
  /*para diferentes titulos*/
        .titulo {
          border-block-end: 4px solid var(--color-1);
          padding-bottom: .50em;
          }
  
  /*seccion equipo*/
  /*solo imagenes del equipo*/
  
  .equipo article{
    background-color:#f4d0ac;
    margin-block: .5em;
    padding: 1em;
    text-align: center;
    border-radius: .25em;
   display: flex;
   gap: .2em;
   flex-wrap: wrap;
   justify-content: center;
  }
  
  .equipo_img{
    border: solid .4em var(--color-3);
    border-radius: 50%;
    box-shadow:
    var(--sombras),
    var(--sombras) inset;
    width: 10em;
    aspect-ratio: 1;
    align-self: flex-start;
    }

    .equipo_textos {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .equipo_textos a {
      margin: auto  0 0 auto;
    }

    /*vinculo a rotulo individual*/
    .equipo_textos a {
      background-color: var(--color-4);
    border-radius: rem;
    color: var(--color-fondos);
    padding-block: .25em;
    padding-inline: 1em;
    text-align: center;
    }


    /*seccion mvp*/
    .mvp a {
      background-color: var(--color-3);
      border-radius: rem;
        color: var(--color-fondos);
        padding-block: .25em;
        padding-inline: 1em;
        text-align: center;
        }
      
        .mvp a:hover {
          color: var(--color-1);
          border-color: var(--color-2);
        }
  /*seccion botones mapa*/

  .bocetos {
    font-family: var(--tipo-textos);
    text-align: center;
      padding-bottom: 1em;
      align-items: center;
      
  }
  
  .bocetos ul{
    display: flex;
    flex-direction: column;
    justify-content: center;
      flex-wrap: wrap;
  }
  
  .bocetos ul li{
    margin: 1em;
    font-size: 1em;
    list-style-type: none;
    
  }
  
  .bocetos ul li a{
    color: var(--color-fondos);
    text-decoration: none;
    background-color: var(--color-3);
    border: 2px solid transparent;
  }
  
  .bocetos ul li a:hover{
    color: var(--color-1);
    border-color: var(--color-2);
    border: 2px solid transparent;
  }

  
    /*seccion academicos*/
    
    .academicos > ul > li:not(:last-of-type) {
      border-bottom: var(--color-2);
      padding-block-end: 1.5em;
      margin-block-end: 15em;
    }
    
  /*imagenes solo de la seccion academicos*/
  .academicos_img { 
    width: 12em;
  }
  
  /*para centrar texto*/
  #datos {
    padding: 1em;
    font-size: 1em;
    margin-top: 1em;
    text-align: center;
  }
  
  /*parrafo contenidos en footer*/
  footer p {
    margin-block-end: 1em;
  }
  
  /*cambiar apariencia en la medida en que el navegador se ensancha*/
  
  /*cambios a partir de los 480px*/
  @media(min-width:30em) {
    header nav ul{
      display: flex;
    }

    
    /*se oculta el boton*/
    .menu-btn {
      display: none;
    }
    
    /*menu horizontal solo a partir de cierto ancho*/
    header nav,
    header nav ul{
      display: contents;
    }

    /* para que el menú se vaya a la derecha, le digo al primer li que sobre quede solo a la izq*/
    header nav ul li:first-of-type {
      margin-inline-start: auto;
    }


    .comitente img {
      width: 10em;
      float: left;
      margin-inline-end: 1em;
    }
  }

  /*cambios a partir de los 640px*/
  @media(min-width: 40em) {

    /*seccion equipo como caja flexible, integrantes en la misma linea*/
    .equipo {
      display: flex;
      flex-wrap: wrap;
      gap: 1em;
    }

    /*se elimininan los margenes establecidos para celu*/
    .equipo article { 
      margin: 0;
      width: calc(50% - .5em)
    }

    .equipo h2 {
      width: 100%;
    }

    .equipo_textos {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
   
    /* el espacio que sobra queda arriba y a la izquierda */
    .equipo_textos a {
      margin: auto  0 0 auto;
    }
  
  
    /* en academicos que el logo quede a la izquierda y los textos a la derecha */
    .academicos > ul > li {
      display: flex;
      gap: 1em;
      align-items: flex-start;
    }
  
    .academicos h3 {
      margin-block-start: 0;
    }
  
  }
  
  /* cambios a partir de los 960px */
  @media (min-width: 60em) {
  
    /*3 integrantes en una li­nea */
    .equipo article {
      width: calc(33% - .7em);
    }
  
    /* datos academicos en una linea */
    .academicos > ul {
      display: flex;
      gap: 1em;
    }
  
    .academicos > ul > li {
      width: calc(33% - .7em);
    }
  }