@charset "utf-8";

/* tipográfía disponibilizada desde Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:wght@500&family=Noto+Sans+Display:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap');


/* "reseteo" selector universal */
*,
*::after,
*::before
 {
  /* para que el ancho de las cajas
     se calcule hasta los bordes y NO
     sólo por sus contenidos */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline-color: transparent;
  list-style: none;
  text-decoration:none;
}

/* ----------------
   reglas generales
   ---------------- */
/* ---------------------------------------------- REGLAS GENERALES -------------------------------------------------------------- */
html {
    /* scroll suave */
    scroll-behavior: smooth;
    /* para que el encabezado quede visible siempre */
    scroll-padding-block-start: 5em;
  }
  


/* 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-block-end: 1em;
}

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

/* TODAS las listas */
ul,
ol {
  list-style: none; /* elimina bullets, números etc. */
}

/* TODAS las imágenes */
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 de clase:
   grupo de elementos con características comunes...
   esta clase "contenedora" centra contenidos
   y limita su ancho
*/


/* lo que tienen en común el encabezado y el pie */

footer {
  background-color: hsl(210 92% 10% / 95%);
  color: white;
}

  
  body {
    
    min-height: 100vh;
    background-color: hsla(212, 43%, 86%, 0.89);
  }
 
  img {
    max-width: 100%;
  }
  
  .contenedora {
    max-width: 75rem;
    margin: 0 auto;
    padding: 2rem;
  }

  
  
  
  /* -------------------
     componente superior
     y sus contenidos
     ------------------- */
  
  header {
     width: 100%;
     height: 100vh;
     background-image: linear-gradient( 
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.6)),
        url(../imagenes/puente.jpg);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     display: flex;
     align-items: center;
     color: #fbfaeb;
  }
  
  
  
  /*-----MENU------ */
  /* caja que "limita" al logo y al menu */
header .contenedora {
    display: flex; /* caja flexible */
    /* 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 {
    display: flex; /* caja flexible */
    align-items: center; /* hijos centrados en la vertical */
    /* sale del fondo pero no parece */
    position: relative;
    /* capa superior, arriba de todo */
    z-index: 9999;
  }
  
  /* etiqueta img, pero SÓLO el logo */
  #logo img {
    width: 10em;
    margin: -1em .75em -1em 0;
  }
  






  .menu {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
  }
  
 
  /* ---------------------------------------------- MENU -------------------------------------------------------------- */

/* botón "hamburguesa" */
.menu-btn {
    background: hsla(318, 75%, 36%, 0.25);
    border-radius: 50%;
    box-shadow: -5px 5px 5px hsl(180 100% 4% / 0.2);
    padding: .75rem;
    width: 3rem;
    aspect-ratio: 1;
    cursor: pointer;
    transition: all 0.3s ease-out; /* anima el "hover" */
  
    /* fijo, no "scrolea", no genera scroll */
    position: fixed;
    /* emplazamiento 1 renglón del borde superior */
    top: 0.7em;
    /* emplazamiento 1 renglón del borde derecho */
    right: 0.7em;
    /* en capa superior, casi arriba de todo */
    z-index: 9000;
  }
  
  /* cada barra de la "hamburguesa" */
  .menu-btn .btn-linea {
    width: 25px;
    height: 3px;
    margin: 4px 0 4px 0;
    background: hsl(0 0% 90%);
    transition: all 0.3s ease-out;
    /* capa superior, pero no parece */
    position: relative;
    /* capa superior, casi arriba de todo */
    z-index: 9000;
  }
  
  /* cada barra, transformacion para formar la "X" */
  .menuVisible .menu-btn .btn-linea {
    transform: rotate(180deg);
  }
  /* Las tres barras para formar la "X" */
  .menuVisible .menu-btn .btn-linea:nth-child(1) {
    transform: rotate(45deg) translate(4px, 6px);
  }
  .menuVisible .menu-btn .btn-linea:nth-child(2) {
    opacity: 0;
  }
  .menuVisible .menu-btn .btn-linea:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -6px);
  }
  nav ul {
  background-color: hsl(210 92% 10% / 95%);
  display: grid;
  place-items: center;
  place-content: center;

  /* sale del fondo, queda fijo */
  position: fixed;
  /* emplazamiento,
  estirado en toda la ventana */
  inset: 0;
  /* capa superior, arriba de casi todo */
  z-index: 8000;
  /* escondido "a la derecha" */
  translate: 100%;
  
  transition: all .6s ease; /* anima cuando "nav" NO tiene la clase "menuVisible" */
}

/* el menu cuando "nav" tiene la clase "menuVisible" */
.menuVisible ul {
  background-color: hsl(210 92% 30% / 95%);
  transition: all .4s ease; /* anima cuando "nav" tiene la clase "menuVisible" */
  
  /* se muestra */
  translate: 0;
}
/* cada vínculo del menu  desplegable*/
nav ul li a {
    border-bottom: solid 3px hsla(246, 97%, 65%, 0.1);
    color: white;
    display: block;
    font-size: 1.5rem;
    margin-block-end: .5rem;
    width: min(70vw, 20rem); /* el valor menor entre el 40% del ancho de la ventana del navegador y 240px */
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    padding: .5rem;
    text-decoration: none;
  }
  
  nav ul li a:hover {
    border: solid 2px hsla(0, 0, 75%, 0.5);
    background-color: hsl(210 92% 30% / 95%);
    transition: all .3s;
  }
  
  /* ---------------------------------------------- CUERPO DEL DOCUMENTO -------------------------------------------------------------- */
    
.propuesta{
    max-width: 62.5rem;
    margin: auto;  
    padding: 5px;
    background-color: hsla(230, 78%, 18%, 0.103);
    border-radius: 4px;
    margin-bottom: 20px;
    margin-top: 20px;

  
    }
.propuesta p { 
        font-family: 'Crimson Text', serif;
        padding-left: 150px;
        padding-right: 150px;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 100;
        text-align: justify;
      }
      
.titulo_propuesta
{
    color: hsla(239, 85%, 24%, 0.801);
    font-size: 40px;
    text-align: center;
    font-family: 'Yeseva One', cursive;
}
 
  
  
   
    .contenedor_titulo
    /*Contenedor General de los estudiantes */
    { /* ancho máximo 1040px - centrado horizontal -espacio entre el borde del elemento y su contenido*/
        max-width: 70rem;
        margin-inline: auto;
        padding: 1rem ; 
      
       
    }
  
  
  
  
  
    /* galeria de imagenes */
  
     /*boton de imagenes */
    .boton_actividades 
    {
      display: block;
      width: 50%;
      font-family: Georgia, 'Times New Roman', Times, serif;
      font-weight: 700;
      text-align: center;
      background-color: hsla(0, 0%, 100%, 0.25);
      border-radius: 35rem;
      padding-block: .130em .25em;
      padding-inline: 1em .75em;
      margin: 25px;
      color: hsl(209 100% 35% / 0.95);
      text-decoration: none;
      margin-left: 60px;
    }
    
    .boton_actividades:hover
    {
      background-color: hsl(209 100% 35% / 0.95);
      box-shadow: 0 .25em .25em hsl(0 0% 0% / 0.25);
      color: hsl(0 0% 90%);
  }
    .imagenes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(12.5em, 1fr));
      gap: .25em;
    }
    
    .charlas h1
    {
    color: hsla(239, 85%, 24%, 0.801);
    font-family: Georgia, 'Times New Roman', Times, serif;
    }
    
    .charlas figure {
      /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
      position: relative;
      /* para ocultar lo que "excede" sus límites */
      overflow: hidden;
    }
    
    .charlas img {
      /* para que la imagen "llene" la etiqueta "img" aun con otras porporciones */
      object-fit: cover;
      object-position: left center;
      width: 100%;
      height: 100%;
      display: block; 
    }
    
    .charlas figcaption {
      background-color: hsla(229, 87%, 18%, 0.5);
      /* mix-blend-mode: hard-light; */
      color: white;
      padding: .5em;
      line-height: 1em;
      text-transform: uppercase;
      font-weight: 700;
      /* para superponer el epígrafe sobre la foto */
      position: absolute;
      /* estirar para que ocupe todo figure */
      inset: 0;
      /* mover para que se vea apenas el "titulo" de la foto */
      transform: translateY(calc(100% - 2em));
      transition: all .6s ease;
    }
    
    /* propiedades de figcaption SÓLO cuando
     el cursor se coloca encima de "figure" */
    .charlas figure:hover figcaption {
      background-color: hsla(241, 83%, 21%, 0.75);
      transition: all .3s ease;
    
      /* emplazamiento, 0 del borde superior */
      transform: translateY(0);
      /* grid */
      display: grid;
      /* texto centrado */
      text-align: center;
      place-items: center;
      place-content: center;
      /* relleno en linea 2 renglones */
      padding-inline: 2em;
    }
    
    .charlas figcaption span {
      display: block;
      font-size: .75em;
      color: #ddd;
      margin-block-start: .5em;
      text-transform: none;
    }
    
    .charlas figcaption a {
      display: inline-block;
      margin-block-start: .5em;
      background-color: hsl(209 100% 35% / 0.5);
      color: hsl(0 0% 90% / 0.85);
      padding: .25em 1em;
      border-radius: 2em;
    }
    
    .charlas figcaption a::after {
      content: " →";
    }
    
    .charlas figcaption a:hover {
      background-color: hsl(209 100% 35% / 0.95);
      box-shadow: 0 .25em .25em hsl(0 0% 0% / 0.25);
      color: hsl(0 0% 90%);
    }
    
  
  
  
  .articulos {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
      gap: 2rem;    
      align-items: flex-start;
      
  }
  

  .textos article {
   background-color: hsla(230, 78%, 18%, 0.103);
    border-radius: 1px;
    padding: 1em;
    padding-block-start: 0;
    margin-block-end: 1em;
  }
  
  .textos article h4 {
   
    padding: 1em 0 .5em 0;
    margin-block-end: 1em;
    
    /* para salir del "flujo de información" del fondo 
    y colocase en una capa superior "pegajosa" */
    position: sticky;
    /* emplazamiento a 5 renglones del borde superior */
    top: 5em;
  }
    /* clase para diferentes títulos */
  .titulo {
      border-block-end: 4px solid  hsla(231, 100%, 47%, 0.397); /* "subrayado" a todo lo ancho */
      padding-block-end: .35em; /* separa el "subrayado" del texto */
  }
    
  
  /*------------------- ALUMNOS Y SU INFORMACIÓN-------------------------------------------------*/
  /*Alumnos y sus rotulos*/
  
  .contenedor_equipo, h2
  /*Contenedor General de los estudiantes */
  { /* ancho máximo 1040px - centrado horizontal -espacio entre el borde del elemento y su contenido*/
      max-width: 70rem;
      margin-inline: auto;
      padding: 2rem ; 
    
     
  }
  
  
  
  .titulo2, .titulo3 
  {
      text-decoration: none;
      font-family: Georgia, 'Times New Roman', Times, serif;
      font-weight: bold;
      border-block-end: 2px solid hsl(230, 84%, 17%);
      padding-block-end: .35rem;
      
  }
  
  /*Alumnos y sus rotulos*/
  .contenedor_equipo article 
  {
      background-color: hsla(230, 78%, 18%, 0.103);
      padding: 1.5em; 
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
     
      
  }
    
    /* SOLO las imágenes del equipo */
  .contenedor_equipo img 
  {
      background: hsla(321, 22%, 29%, 0);
      width: 8em;
      aspect-ratio: 1;
      border-radius: 50%;
  }
    
    
  /* nombre de integrante del equipo */
  .equipo_texto h3 
  {
       margin-block-start: 0;  
       color: hsla(242, 90%, 8%, 0.747);
  }
  
    
   /*  "rótulo individual" */
  .equipo_texto a 
  {
    display: block;
    width: 50%;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 700;
    text-align: center;
    background-color: hsla(0, 0%, 100%, 0.25);
    border-radius: 35rem;
    padding-block: .130em .25em;
    padding-inline: 1em .75em;
    margin: 5px;
    color: hsl(209 100% 35% / 0.95);
    text-decoration: none;
    margin-left: 60px;
  }
    
    
  .equipo_texto a:hover,
  .equipo_texto a:focus-visible 
  {
    background-color: hsl(209 100% 35% / 0.95);
    box-shadow: 0 .25em .25em hsl(0 0% 0% / 0.25);
    color: hsl(0 0% 90%);
  }
  
  .equipo_texto 
  { /* paquete de texto */
      align-self: stretch;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 1.25rem;
  }
    
  .equipo_texto > * 
  { /* sin margenes */
      margin-block: 0;
  }
    
  /* nombre de cada Alumno */
  .equipo_texto h3 
  {
      margin-block-start: 0; 
  }
    
  /* "botón" con link a rótulo individual */
  .equipo_texto a 
  {
      margin-inline-start: auto;
  }
  
  .contenedor_equipo div, h3  
  {
      font-family: Georgia, 'Times New Roman', Times, serif;
    
  }
    
  .equipo_articulos
  /*Contenedor donde esta puesto el articulo */
  {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: 0.5rem;   
  
  }
  
  /*------------------------------- DATOS ACADEMICOS -------------------------------------------*/
  .academicos_contenedor
  {
      /*Contenedor General de los estudiantes */
      /* ancho máximo 1040px - centrado horizontal -espacio entre el borde del elemento y su contenido*/
      max-width: 70rem;
      margin-inline: auto;
      padding: 2rem ;
         
  }
  
  
   /* las imagenes de datos academicos */
  .academicos_contenedor  img 
  {
      display: block;
      width: 5em;
      aspect-ratio: 1;
      padding: .5rem;
      border-radius: 50rem;
     
  }
  
  
  
  .academicos_contenedor a:hover img 
  {
      box-shadow: 0 4px 4px hsla(0, 4%, 73%, 0.2);
      transition: box-shadow .3s ease;
      align-items: center;
  
  }
  
    
    /* sección datos académicos */
  
  .academicos_contenedor > ul 
  {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
      gap: 1rem;
  }
    
    
  .academicos_contenedor > ul > li 
  {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: flex-start;
      align-content: flex-start;
  }
    
  .academicos_contenedor > ul > li 
  {
      margin: 0;
  }
  
  .equipo_academica
  {
      max-width: 70rem;
      margin-inline: auto;
      padding: 2rem;
      background-color:  hsla(0, 2%, 10%, 0.05);
      text-align: center;
      border-radius: .55rem;
  }
  
  .equipo_academica > ul  
  {
      display: grid;
      margin: 0%;
  }
    
  .equipo_academica div, h3  
  {
      font-family: Georgia, 'Times New Roman', Times, serif;
  }
  
  
  .equipo_academica a:hover img 
  {
      box-shadow: 0 4px 4px hsl(0 0% 0% / 20%);
      transition: box-shadow .3s ease;
      align-items: center;
  
  }
  .academicotexto
  /*Contenedor del bloque academico */
  {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
      gap: 2rem;   
      padding: 1.5em; 
      align-items: flex-start;
      border-radius: .55rem;
  }
    
  
  
     /* ------------------- FOOTER------------------- */
    
     footer .contenedora p 
     {
         margin-block: 0;
     }
     
     /* contenedor con logo a la izquierda y texto a la derecha, si cabe ...Footer */
     footer .contenedora 
     {
          text-align: center;
          
         
     }
     
     footer p 
     {
         margin-block-end: 0;
     }
  
  
  
  /* --------------------------
     media queries,
     para cambiar la apariencia
     en la medida en que el
     navegador se ensancha
     (mobile first)
     -------------------------- */
  
  
  
  /* cambios a partir de los menos 360px */
  @media (min-width: 17em) {
    .textoimagen
    {
      position: absolute;
      color: white;
      font-size: 10px;
      font-weight: 700;
      background-color:rgba(1, 10, 37, 0.212) ;
      top: 1px; /* Ajusta la distancia desde la parte superior */
        left: 50px; /* Ajusta la distancia desde la izquierda */
        right: 20px; /* Ajusta la distancia desde la derecha */ 
     
     
    }
  
  }
  
  /* cambios a partir de los 360px */
  @media (min-width: 30em) {
    .textoimagen
    {
        position: absolute;
        font-weight: 700;
        top: 1px; /* Ajusta la distancia desde la parte superior */
        left: 10px; /* Ajusta la distancia desde la izquierda */
        right: 20px; /* Ajusta la distancia desde la derecha */ 
        color: white;
        background-color: transparent;
        
      }
  
  }
  /* cambios a partir de los 640px */
  @media(min-width: 40em) {
  
   
    
    /* el menú deja de ser fijo */
    header nav {
      /* para que esté en capa superior pero que no parezca */
      position: relative;
    }
      
    /* botón "hamburguesa" oculto */
    .menu-btn {
      display: none;
    }
  
    /* menu visible */
    header nav ul,
    header .menuVisible ul {
      /* caja flexible para menu horizontal*/
      display: flex;
      /* separación entre sus elementos */
      gap: .25em;
  
      /* para que esté en capa superior pero que no parezca */
      position: relative;
  
      /* elimina desplazamiento */
      translate: 0;
  
      /* elimina fondo */
      background-color: unset;
     
    }
      
    /* items de lista  que contienen los vínculos del menu desplegable */
    header nav ul li {
      min-width: 7em; /* que no midan menos de: */
    }
  
    /* vínculos del menu principal */
    header nav ul li a {
      background-color: hsl(210 92% 30% / 95%);
      font-family: Georgia, 'Times New Roman', Times, serif;
      border-radius: .25em ;
      color: white;
      font-size: 1rem;
      width: auto;
      padding: .25em 1em;
      text-align: center;
      display: block; /* para que sean "cajas" */
      margin-block-end: unset;
      border-block-end: unset;
    }
    
    /* cuando el cursor se posiciona sobre los vínculos */
    header nav ul li a:hover {
      background-color: white;
      color: hsl(239, 100%, 44%);
      border-block-end: unset;
    }
    .textoimagen
    {
        color: white;
        
      }
   
  }
  
  
  /* cambios a partir de los 800px */
  @media(min-width: 50em) {
   
    .charlas {
      padding: 1em;
    }
  
    .textos h3 {
      padding: 1em;
    }
   
    .textoimagen
    {
        position: absolute;
        font-size: 20px;
        font-weight: 700;
        top: 1px; /* Ajusta la distancia desde la parte superior */
        left: 20px; /* Ajusta la distancia desde la izquierda */
        right: 20px; /* Ajusta la distancia desde la derecha */ 
        color: white;
        background-color: transparent;
        
      }
  
  }
  
  /* cambios a partir de los 1200px */
  @media(min-width: 75em) {
    
    .textoimagen
    {
        position: absolute;
        font-size: 18px;
        font-weight: 700;
        top: 1px; /* Ajusta la distancia desde la parte superior */
        left: 300px; /* Ajusta la distancia desde la izquierda */
        right: 20px; /* Ajusta la distancia desde la derecha */ 
        color: white;
        background-color: transparent;
        
      }
    .charlas {
      background-color: hsl(198 50% 44% / 0.1);
      margin-block-start: 0;
      margin-block-end: 3em;
      padding-inline: 4em;
      width: 100%;
      min-height: 60vh;
      display: grid;
      align-items: center;
      align-content: center;
    }
   
   
    }