*,
*::after,
*::before
{
    box-sizing: border-box;
   
    }
    html {
      
        scroll-behavior: smooth;
        scroll-padding-block-start: 5em;
    }

    body {
    font-family:'Raleway', sans-serif;
    margin: 0;
    color: hsl(0 0% 30%);
    background-color: rgb(224, 217, 187);
    }
    
    h1{
        color:  hsl(74, 13%, 32%);
        line-height: 1.1;
    }
    
    h2{
        background-color: hsl(75, 23%, 17%);
        color: rgb(243, 238, 217);
        padding: 5px;
        line-height: 1.1;
    }
    
    h3 {
    
    color: hsl(0 0% 15%);
    
    line-height: 1.5;
    margin-block: 0;
    }
    
  
    img {
    /* medirán, como máximo, el tamaño
        del bloque html que las contiene */
    max-width: 100%;
    }
    
    
    a {
    text-decoration: none;
    color: hsl(75, 23%, 17%);
    font-weight: bold;
    }
    
   
    ul,
    ol {
    list-style: none;
    padding: 0;
    }
    
    
    .contenedora {
    
    /* ancho máximo 1040px */
    max-width: 65rem;
    /* centrado horizontal (si sobra espacio,
        lo distribuye a izquierda y derecha) */
    margin-inline: auto;
    /* espacio entre el borde del elemento y su contenido
    para que estos no queden "pegados" a los bordes */
    padding: 1rem;
    clear: both;
    }
    
    /* -------------------
        componente superior
        y sus contenidos
        ------------------- */
    
    
    header{
    background-color: hsl(72, 14%, 58%);
    color: hsl(0 0% 95%);
    position: sticky;
    top: 0;
    z-index: 8000;
    }
    footer{ 
        background-color: hsl(72, 14%, 43%);
        color: rgb(243, 238, 217);
    }
    header {
    /* sombra difusa  */
    box-shadow:
        0   /* desplazamiento horizontal */
        4px /* desplazamiento vertical */
        4px /* desenfoque */
        hsl(0 0% 0% / 20%) /* color */
    
    }
    
    
    /* sólo el enlace al grupo */
    #logo a {
    /* cambiar de etiqueta tipo en linea
    a etiqueta tipo bloque para poder darle
    propiedades de bloque */
    display: block;
    /* redondeo de bordes */
    border-radius: 1em;
    /* ancho */
    width: 6rem;
    height: 4rem;
    /* centrar contenidos */
    text-align: center;
    /* tamaño de la tipografía */
    font-size: 1.6rem;
    /* color del fondo */
    background-color:rgb(243, 238, 217);
    /* borde */
    border: solid 4px hsl(72, 14%, 43%);
    }
    
    /* cuando se pasa el cursor sobre el logo
    o se usa el teclado para llegar */
    #logo a:hover,
    #logo a:focus-visible {
    /* se invierten los colores de fondo y borde */
    background-color:hsl(72, 14%, 58%);
    border:  solid 4px rgb(255, 255, 255);
    }
    
    

    
    /*BURGUER*/
    
    .menu-btn {
    background-color:rgb(243, 238, 217);
    border-radius: 50%;
    box-shadow: -5px 5px 5px hsl(180 100% 4% / 0.2);
    padding: .75rem;
    border: solid hsl(72, 15%, 27%);
    outline: none;
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease-out;
    position: fixed;
    top: 1em;
    right: 1em;
    z-index: 9000;
    
}
    
    
.menu-btn .btn-linea {
    width: 1.7em;
    height: 5px;
    margin: 2px auto;
    border-radius: 20rem;
    background-color: hsl(72, 15%, 27%);
    transition: all 0.3s ease-out;
    position: relative;
    z-index: 9000;
}

.menuVisible .menu-btn .btn-linea {
    transform: rotate(180deg);
    background-color: hsl(72, 15%, 27%);
}

.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);
}

.menu{
    background-color:hsla(73, 11%, 34%, 0.788);
    display: grid;
    place-items: center;
    place-content: center;
  
  
    position: fixed;
    inset: 0;
    z-index: 8000;
    translate: 100%;
    margin: 0;
    transition: all .6s ease;
}

.menuVisible .menu {
    transition: all .4s ease; 
    margin: 0;
    translate: 0;
}

.menu a {
    
    color: white;
    display: block;
    font-size: 1.25rem;
    margin-block-end: .5rem;
    width: min(70vw, 20rem); 
    text-align: left;
    padding: .5rem;
    text-decoration: none;
}

.btn-inicio {
    margin-right: 2em;
}

.menu a:hover {
    color: hsl(74, 12%, 51%);
    transition: all 0.5s;
}


/* menú propiamente dicho */
header nav ul {
  background-color: hsla(73, 11%, 34%, 0.788);
  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: hsla(73, 11%, 34%, 0.89);
  transition: all .4s ease; /* anima cuando "nav" tiene la clase "menuVisible" */
  
  /* se muestra */
  translate: 0;
}

/* cada vínculo del menu */
header nav ul li a {
  border-bottom: solid 3px hsl(0 0% 100% / 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;
  
  padding: .5rem;
  text-decoration: none;
}

header nav ul li a:hover {
  border-bottom: solid 3px hsl(0 0% 100% / 0.5);
  transition: all .3s;
}



/*MEDIA*/
        
/*773px*/
@media(min-width: 48.313em) {

    /* el menú deja de ser fijo */
    header .menu {
      /* para que esté en capa superior pero que no parezca */
      position: relative;
      
    }
      
    /* botón "hamburguesa" oculto */
    .menu-btn {
      display: none;
    }
  
    /* menu visible */
    header .menu,
    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 */
    header .menu {
      min-width: 4em; /* que no midan menos de: */
    }
  
    /* vínculos del menu principal */
    header .menu  a {
      color: hsl(0 0% 95%);
      background-color: hsl(75, 23%, 17%);
      border-radius: .25em ;
      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 .menu a:hover {
   
        background-color:rgb(243, 238, 217);
        color:  hsl(75, 23%, 17%);
      border-block-end: unset;
    }

    .btn-inicio {
        margin-right: 0;
    }

    .menu-completo{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .carro-logo{
        position: static; 
        
    }

      /* ví­nculos, pero SÓLO los del menú superior */
      header nav a {
        /* color del texto */
        color: hsl(0 0% 95%);
        /* color de fondo */
        background-color: hsl(75, 23%, 17%);
        /* para darle propiedades de caja (ancho, por ejemplo) */
        display: block;
        /* ancho igual para todos */
        width: 5em;
        /* "relleno" arriba y abajo */
        padding-block: .25em;
        /* border redondeado */
        border-radius: 0.25em;
        /* texto centrado */
        text-align: center;
        box-shadow: -2px 2px 6px rgb(68, 75, 61);
        transition: box-shadow .8s ease
        }
        
        /* cuando se pasa el cursor por sobre los ví­nculos del menú
        o se accede a ellos por el teclado (selectores de "pseudoclase") */
        
        header nav a:hover,
        header nav a:focus-visible {
        /* cambia el color de fondo */
        background-color:rgb(243, 238, 217);
        /* cambia el color de texto */
        color:  hsl(75, 23%, 17%);
        outline: none;
        box-shadow: 0 1px 1px hsl(0 0% 0% / 20%);
        transition: box-shadow .67s ease;
        }
    
}  
  
    
    
    
    /* ------------------
        componente central
        y sus contenidos
        ------------------ */
    
    
    /* TODAS las secciones */
    
    section {
    /* distancia entre sus contenidos
    y su borde inferior */
    padding-block-end: 2rem;
    }
    
    /*
    sección personal
    */
    
    .personal {
    /* textos 25% mayores */
    font-size: 1.25em;
    }

    .personal {
        /* textos 25% mayores */
        font-size: 1.25em;
    }
    
    .personal_texto {
        text-align: left;
    }
    /* clase para diferentes tí­tulos */
    
    .titulo1 {
    /* "subrayado" a todo lo ancho */
    border-block-end: 4px solid hsl(75, 23%, 17%);
    /* separa el "subrayado" del texto */
    padding-block-end: .35rem;
    }
    
    /* frase "Mi sitio en ACUMAR */
    
    .personal ul {
    /* sin margen inferior */
    margin-block-end: 0;
    /* texto menor */
    font-size: smaller;
    /* se retiran las negritas (predeterminadas) */
    font-weight: normal;
    /* se reduce la entrelínea para "acercarse" al H1 */
    line-height: 1.5;

    }
    
    /* título principal en el rótulo */
    
    .personal h1 {
    /* se elimina el margen superior predeterminado para "acercarse" a la frase "Mi sitio en ACUMAR" */
    margin-block-start: 1;
    }
    
    .personal img {
    /* bordes redondeados */
    border-radius: 2em;
    box-shadow: -3px 3px 6px rgb(75, 77, 73);
    
    /* ancho --> el menor de los dos valores, con factor de crecimiento */
    width: clamp(5rem, 5rem + 25vw, 30rem);
    }
      
      
    /*
    sección comitente
    */
    
    /* imagen del comitente */
    .personal img {
    /* permite al texto "recorrer la imagen" */
    float: left;
    
    /* distancia horizontal entre la imagen y el texto */
    margin-inline-end: 1rem;
    }
    
    .personal_ruta a {
    background-color: hsla(134, 49%, 15%, 0.15);
    border-radius: .25rem;
    color: hsl(100, 7%, 32%);
    padding-block: .25em;
    padding-inline: 1em;
    box-shadow: -3px 3px 6px rgb(100, 95, 95);
    transition: box-shadow .8s ease
    }
    
    /* cuando el cursor está sobre el ví­nculo "rótulo individual" o cuando se selecciona con el teclado */
    .personal_ruta a:hover,
    .personal_ruta a:focus-visible {
    color: hsl(44, 39%, 89%);
    background-color:  hsl(97, 16%, 22%);
    outline: none;
    box-shadow: 0 1px 1px hsl(0 0% 0% / 20%);
    transition: box-shadow .67s ease;
    }
    
    .analisis img {
        /* bordes redondeados */
        border-radius: .25rem;
        box-shadow: -4px 4px 14px rgb(75, 77, 73);
        /* ancho --> el menor de los dos valores, con factor de crecimiento */
        width: 100%
        
        }
          
          
        /*
        sección comitente
        */
        
        /* imagen del comitente */
    .analisis img {
        /* permite al texto "recorrer la imagen" */
        
        
        /* distancia horizontal entre la imagen y el texto */
        margin-inline-end: 1rem;
     }

    .trabajos img {

        /* bordes redondeados */
        border-radius: .25rem;
        
        
    }

    
   

 

    /*
    sección equipo
    */
    
    /* componente con todos los datos de cada integrante */
    
    .equipo article {
    /* color de fondo */
    background-color: hsla(135, 9%, 36%, 0.15);
    /* distancia vertical entre los integrantes */
    margin-block: .5em;
    /* "relleno" (distancia entre contenido y borde) */
    padding: 1em;
    /* borde redondeado */
    border-radius: 1em;
    box-shadow: -5px 8px 10px 0 rgba(0, 0, 0, 0.37);
    
 
    }
    
    /* SOLO las imágenes del equipo */
    .equipo img {
    /* fondo de color (si son transparentes) */
    background: hsl(58, 39%, 83%);
    /* tamaños */
    width: 8em;
    aspect-ratio: 1;
    /* borde violeta */
    border: solid .4em  hsl(73, 44%, 28%);
    /* imagen redonda */
    border-radius: 10px 20px;
    /* sombra interna y externa */
    box-shadow:
        0 7px 4px hsl(0 0% 0% / 20%),
        0 4px 4px hsl(0 0% 0% / 20%) inset;
    }
    
    /* nombre de integrante del equipo */
    .equipo_texto  h3 {
    /* más adelante eliminaremos el espacio superior predeterminado
    para que se alinee con la imagen */
    margin-block-start: 0;
    }
    
    /* ví­nculo "rótulo individual" */
    .equipo_texto a {
    background-color:hsla(134, 49%, 15%, 0.15);
    border-radius: .25rem;
    color:  hsl(100, 7%, 32%);
    padding-block: .25em;
    padding-inline: 1em;
    box-shadow: -3px 3px 5px 0 rgb(68, 67, 67, 0.5);
    transition: box-shadow .8s ease
    
    }
    
    /* cuando el cursor está sobre el ví­nculo "rótulo individual" o cuando se selecciona con el teclado */
    .equipo_texto a:hover,
    .equipo_texto a:focus-visible {
        color: hsl(44, 39%, 89%);
        background-color:  hsl(97, 16%, 22%);
        outline: none;
        box-shadow: 0 0px 0px hsl(0 0% 0% / 20%);
        transition: box-shadow .5s ease;
        
        
    }

   
    
    /*
    sección datos académicos
    */
    
    
    /* í­tems de lista "descendientes directos"
    de listas "descendientes directas"
    de la seccion de datos académicos"
    MENOS el último */
    
    .academicos > ul > li:not(:last-of-type) {
    /* lí­nea divisoria*/
    border-bottom: solid 1px hsl(280 29% 44% / .15);
    /* espacio antes de la lí­nea */
    padding-block-end: 1.5em;
    /* espacio después de la lí­nea*/
    margin-block-end: 1.5em;
    }
    
    /* imágenes SOLO en la sección académicos */
    .academicos img {
    display: block;
    width: 8em;
    aspect-ratio: 1;
    background-color: white;
    padding: .5rem;
    border-radius: .25rem;
    box-shadow: -7px 7px 7px rgb(100, 95, 95);
    transition: box-shadow .8s ease;
    }
    
    .academicos a:hover img {
    box-shadow: 0 4px 4px hsl(0 0% 0% / 20%);
    transition: box-shadow 1s ease;
    }
    
    
    /* -------------------
        componente inferior
        y sus contenidos
        ------------------- */
    
    /* imágenes contenidas en la etiqueta "footer" */
    footer img {
    max-width: 10rem;
    }
    
    /* párrafo/s contenidos en la etiqueta "footer" */
    footer p {
    /* elimina el margen inferior que viene predeterminado */
    margin-block-end: 0;
    text-align: justify;
    }
    
    
    body{
        display: grid;
        min-height: 100dvh;
        grid-template-rows: auto 1fr;
    }
    
    header > .contenedora {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    #logo a{
        display: grid;
        place-items: center;
        padding-block: 0 .125em;
    }
    
  
    
    .personal_ruta {
        display: flex;
        gap: .50em;
        flex-wrap: wrap;
    }

    .equipo_articulos{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
        gap: 1rem;
        
    }
    
    .equipo_articulos article {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .equipo_texto {
        align-self: stretch;
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 1.25rem;
        flex-grow: 1;
    }
    
    .equipo_textos > * {
        margin-block: 0;
    }
    
    .equipo_textos a {
     margin-inline-start: auto;
    }
    
    .academicos > ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
        gap: 1rem;
    }
    
    .academicos > ul > li {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: flex-start;
        align-content: flex-start;
    }
    
    .portfolio .materias > ul{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
        align-items: center;
        gap: 1rem;
        background-color: hsla(135, 9%, 36%, 0.15);
        padding: 1em;
        border-radius: 0.25em;
    }
    .materias li {
        margin-block-start: .5rem;
    }
    .materias ul, ol{
        list-style: none;
        padding: 0;
    }
    
    .materias_articulos {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
        gap: 1rem;
    }

    .materias article {
        background-color: hsla(135, 9%, 36%, 0.15);
        margin-block: 0.5em;
        padding: 1em;
        border: 2px solid rgb(59, 78, 47);
        border-radius: 2em;
        box-shadow: -5px 8px 20px 0 rgba(0, 0, 0, 0.37);
        
    }
    .materias h3 {
        text-align: center;
        padding-bottom: 1em ;

    }
    
    .trabajos ul, ol{
        list-style: none;
        padding: 0;
    }
    /*773px*/
@media(min-width: 48.313em) {
    .trabajos_frames {
       
        
        /* ancho --> el menor de los dos valores, con factor de crecimiento */
        width: clamp(10rem, 10rem + 25vw, 30rem);
    }
    .trabajos_frames {
       
        display: grid;
        width: 100%;
        grid-template-rows: auto auto auto;
        grid-template-columns: repeat(2, auto);
        gap: 0.5rem;
    }
}

   

    footer .contenedora p {
        margin-block: 0;
    }
      
    


/* ANALISIS INDI */

    .analisis {
    /* textos 25% mayores */
    font-size: 1.25em;
    }
    
    .titulo1 {
    /* "subrayado" a todo lo ancho */
    border-block-end: 4px solid hsl(75, 23%, 17%);
    /* separa el "subrayado" del texto */
    padding-block-end: .35rem;
    }
    
    /* frase "Mi sitio en ACUMAR */
    
    .analisis ul {
    /* sin margen inferior */
    margin-block-end: 0;
    /* texto menor */
    font-size: smaller;
    /* se retiran las negritas (predeterminadas) */
    font-weight: normal;
    /* se reduce la entrelínea para "acercarse" al H1 */
    line-height: 1.5;

    }
    
    /* título principal en el rótulo */
    
    .analisis h1 {
    /* se elimina el margen superior predeterminado para "acercarse" a la frase "Mi sitio en ACUMAR" */
    margin-block-start: 1;
    }

/* PORTFOLIO */

    .trabajos {
    /* textos 25% mayores */
    font-size: 1.25em;
    }
    
    .titulo1 {
    /* "subrayado" a todo lo ancho */
    border-block-end: 4px solid hsl(75, 23%, 17%);
    /* separa el "subrayado" del texto */
    padding-block-end: .35rem;
    }
    
    /* frase "Mi sitio en ACUMAR */
    
    .trabajos ul {
    /* sin margen inferior */
    margin-block-end: 0;
    /* texto menor */
    font-size: smaller;
    /* se retiran las negritas (predeterminadas) */
    font-weight: normal;
    /* se reduce la entrelínea para "acercarse" al H1 */
    line-height: 1.5;

    }
    
    /* título principal en el rótulo */
    
    .trabajos h1 {
    /* se elimina el margen superior predeterminado para "acercarse" a la frase "Mi sitio en ACUMAR" */
    margin-block-start: 1;
    }

    .trabajos article {
        border-bottom: solid 2px hsl(280 29% 44% / .15);
        /* espacio antes de la lí­nea */
        padding-block-end: 1.5em;
        /* espacio después de la lí­nea*/
        margin-block-end: 1.5em;
    }

    .trabajos article a:hover{
        color: hsl(108, 15%, 40%);
    }