@charset "utf-8";


/*  selector universal */
* {
    /* para que el ancho de las cajas
       se calcule hasta los bordes y NO
       sólo por sus contenidos */
    box-sizing: border-box;
}


/* ----------------
   reglas generales
   ---------------- */

body {
    /* elimina margen predeterminado */
    margin: 0;
    /* cambia la tipografía general del proyecto */
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    background-color: rgb(177, 255, 229);
}

/* selector múltiple */
h1,
h2,
h3,
h4,
h5,
h6,
p { /* redefine los márgenes inferiores
    para que midan el tamaño de la tipografía */
    margin-bottom: 1em;
}

/* TODOS los vínculos */
a {
    /* elimina los subrayados */
    text-decoration: none;
}

/* TODAS las listas */
ul,
ol {
    /* elimina bullets, números etc. */
    list-style: none;
    /* retira el relleno izquierdo predeterminado */
    padding: 0;
}

/* todas nuestras imagenes */
img {
    /* para que NO midan más que la etiqueta que las contiene */
    max-width: 100%;
    /* opcional, evita deformaciones en navegadores antiguos */
    height: auto;
}

/* selector clase: grupo de elementos con características comunes */
.contenedora {
    /* limita el ancho a 1200px */
    max-width: 75rem;
    /* centra "la caja" horizontalmente */
    margin: 0 auto;
    /* distancia de los bordes al contenido igual a un renglón */
    padding: 1rem;
    text-align: center;
}

/* lo que tienen en común el encabezado y el pie */
header,
footer {
    background-color: #6377d1;
    color: white;
}
footer p{
    text-align: center;
}


header {
    /* encabezado con sombra difusa  */
    box-shadow: 0 4px 2px rgba(43, 0, 197, 0.623);
}

/* caja que "limita" al logo y al menu */
header .contenedora {
    /* caja flexible */
    display: flex;
    /* si los elementos "hijos" no caben en una fila,
        van a la fila siguiente */
    flex-wrap: wrap;
    /* elementos "hijos" separados en la horizontal */
    justify-content: space-between;
    /* elementos "hijos" centrados en la vertical */
    align-items: center;
}

#logo {
    background-color: rgb(181, 255, 233);
    border-radius: .35em;
    padding: .35em;
    width: 9em;
}


/* ------- menu --------- */

/* botón */

/*----- MENU DE HAMBURGUESA--------*/
.menu .menu-btn .btn-linea {
    width: 30px;
    height: 3px;
    margin: 4px 0 4px 0;
    background: black;
    transition: all 0.3s ease-out; 
  }
  


  
  .menu input {
    position: absolute;
    width: 15px;
    height: 25px;
    right: 1em;
    top: 15px;
    cursor: pointer;
    opacity: 0;
  }
  
  .menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
  .menu nav ul {
    height: auto;
    background: rgba(255, 255, 255, 0);
    display: block;
  
    list-style: none;
  
    text-align: center;
  }
  
  .menu nav ul li a {
    margin: 0;
    color: rgb(2, 5, 179);
    font-weight: bold;
    padding: 0.25em 0.5em;
    text-decoration: none;
  
    /*para que estas etiquetas "a" sean "cajas"*/
  }
  
  .menu .menu-btn {
    display: unset;
    margin: 0;
  }
  
  .menu nav {
    cursor: pointer;
    display: none;
    align-content: center;
    width: 30vw;
  }
  
  .menu input:checked ~ nav {
    /* transition: all 0.1s ease-in; */
    background: rgba(1, 136, 95, 0);
    text-align: center;
    display: block;
  }
  
  .menu input:checked ~ .menu-btn .btn-linea {
    background: rgb(3, 185, 85);
  }
  
  .menu input:not(:checked) ~ nav {
    display: none;
  }
  

  
/* menu propiamente dicho */
header nav ul {
    /* oculto provisoriamente en celulares */
    display: none;
}

/* items de lista  que contienen los vínculos del menu */
header nav ul li {
    /* que no midan menos de: */
    min-width: 0.2em;
    /* separación */
    margin: .10em 0 .10em .10em;
    background-color: rgba(96, 233, 210, 0);
}

/* vínculos del menu principal */
header nav ul li a {
    background-color: #13bbd1;
    border-radius: .45em ;
    color: rgb(0, 39, 65);
    font-weight: normal;
    padding: .20em .4em;
    text-align: center;
    /* para que estas etiquetas "a" sean "cajas" */
    display: block;
}

/* cuando el cursor se posiciona sobre los vínculos */
header nav ul li a:hover {
    background-color: rgb(2, 250, 176);
    color: #011bff;
}

/* cuál botón del menu seleccionado */
.index header nav ul li:first-child(1) a,
.plan header nav ul li:nth-child(2) a,
.mapa header nav ul li:nth-child(3) a {
    background-color: rgb(2, 250, 176);
    color: #011bff;
}


/* ------- cuerpo principal --------- */

/* TODAS las secciones */
section {
    padding-bottom: 3rem;
}

/* SÓLO la primera sección */
section:first-of-type {
    /* texto mayor */
    font-size: 1.25em;
}

/* clase para diferentes títulos */
.titulo {
    /* "subrayado" a todo lo ancho */
    border-bottom: .4rem solid #042caf;
    /* separa el "subrayado" del texto */
    padding-bottom: .5em;
}


/*
sección equipo
*/

/* componente con todos los datos de cada integrante */
.equipo article {
    background-color: rgba(43, 173, 180, 0.76);
    margin: .5em 0;
    padding: 1em;
    border-radius: .25em;

    /* caja flexible */
    display: flex;
    /* si los elementos "hijos" no caben en una línea,
        van a la línea siguiente */
    flex-wrap: wrap;
    /* elementos "hijos" separados en la horizontal */
    justify-content: space-between;
    /* elementos "hijos" alineados arriba */
    align-items: flex-start;
}

/* que afecte solo a las imagenes del equipo */
.equipo img {
    /* fondo blanco (estas img son transparentes) */
    background: white;
    /* borde violeta */
    border: solid .4em #078570;
    /* imagen redonda */
    border-radius: 50%;
    /* sombra interna y externa */
    box-shadow: 0 5px 5px rgba(0, 0, 0, .2),
        0 5px 5px rgba(0, 0, 0, .2) inset;
    /* para flex */
    width: 8em;
}

article > div {
    /* ancho de los textos del artículo:flex-wrap:
        todo el ancho diponible MENOS
        el ancho de la imagen + margen */
    width: calc(100% - 9em);
    /* pero no menos de */
    min-width: 12em;
}

.equipo article h3 {
    /* alinea nombre e imagen del integrante */
    margin-top: 0;
}

/* vínculo "rótulo individual" */
.equipo article a {
    background-color: rgb(93, 231, 204);
    border-radius: .80rem;
    color: #002e53;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    line-height: 1.25em;
    padding: .105em 1em;
}

/* cuando el cursor está sobre el vínculo "rótulo individual" */
.equipo article a:hover {
    color: white;
    background-color: #80ccb5;
}

/*
sección datos académicos
*/


/* ítems de lista "descendientes directos" de listas "descendientes directas de la seccion de datos académicos" */

.datosacademicos > ul > li {
    text-align: center;
}

/* los mismos items MENOS el último */
.datosacademicos > ul > li:not(:last-of-type) {
    /* línea divisoria*/
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
    /* espacio antes de la línea */
    padding-bottom: 1.5em;
    /* espacio después de la línea*/
    margin-bottom: 1.5em;
}

.datosacademicos img {
    width: 4em;
    height: auto;
}

/* primer hijo directo de un "li"
    que es hijo directo de un "ul"
    que a su vez es hijo directo de la
    sección "academicos"
    (es la caja que contiene cada logo) */
.datosacademicos > ul > li > *:first-child {
    margin-right: 2em;
    width: 8em;
}

.datosacademicos h3 { margin-top: 0; }


/* -------- CSS específico para "plan.html" ------------ */

.plan main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}




/* --------------------------
   media queries,
   para cambiar la apariencia
   en la medida en que el
   navegador se ensancha
   (mobile first)
-------------------------- */

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

    

    /* datos académicos */

    .datosacademicos > ul > li {
        /* caja flexible */
        display: flex;
    }

    .datosacademicos > ul > li > div {
        width: calc(100% - 10em);
    }

    /* en archivo plan.html, descendientes directos de main MENOS el primero */
.plan main > :not(:first-child) {
    width: calc(50% - 1em);
}

}

/* cambios a partir de los 890px */
@media(min-width: 920px) {
    body{
    background-color: rgb(99, 216, 181);
}

.menu .btn-linea {
    display: none;
  }
  .menu input {
    display: none;
  }
  .menu input:checked ~ nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    font-size: 2em;
    align-content: flex-start;
    transition: all 0 ease-out;
  }
  .menu input:not(:checked) ~ nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    font-size: 2em;
    align-content: flex-start;
    
  }
  .menu {
    display: unset;
    flex-direction: row;
    align-items: flex-start;
  }

  .menu nav ul {
    display: unset;
    display: flex;
    flex-direction: row;
    margin-top: 0;
  }
  .menu nav ul li a:hover {
    color: rgb(255, 255, 255);
  }


    /* para que queden dos integrantes del equipo por línea */
    .equipo {
        /* caja flexible */
        display: flex;
        /* "hijos" a la siguiente línea si no caben */
        flex-wrap: wrap;
        /* "hijos" separados en la horizontal */
        justify-content: space-between;
    }
    .equipo h2 {
        /* manda los article para la siguiente línea */
        width: 100%;
    }
    .equipo article {
        /* caben dos y sobra 1em */
        width: calc(50% - .5em);
    }

    .equipo article div {        
        /* para mandar el link "rótulo" para abajo */
        /* caja flexible */
        display: flex;
        /* eje principal: vertical */
        flex-direction: column;
        /* "fuerza" que el div tenga toda la altura disponible */
        height: 100%;
    }
    .equipo article div a {
        /* todo el espacio que sobra va a la izquierda y arriba del vínculo (funciona pq está dentro de una caja flexible) */
        margin: auto 0 0 auto;
    }

    /* para que "footer" quede siempre abajo, aun con poco contenido en "main" */
    .plan {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    .plan footer {
        margin-top: auto;
    }

}

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

    

    /* 2 párrafos del comitente por línea */
    .comitente {
        display: flex;
        flex-wrap: wrap;
        justify-content:right;
        text-align: center;
    }
    .comitente h1 {
        width: 100%;
    }
    .comitente p {
        width: calc(50% - .5em);
    }

    /* 3 integrantes del equipo por línea */
    .equipo article {
        width: calc(33% - .75em);
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
    }
    .equipo article div {
        width: unset;
        margin-top: 1em;
    }
    .equipo article h2 {
        text-align: center;
    }
    

    /* datos academicos en una línea */

    .datosacademicos > ul {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    .datosacademicos > ul > li {
        width: calc(33.33% - 2em);
        flex-direction: column;
    }
    .datosacademicos > ul > li:not(:last-of-type) {
        /* línea divisoria*/
        border-bottom: 0;
    }
    .datosacademicos > ul > li > div {
        margin-top:
        width:unset;    
    }