@charset "utf-8";
/*  reset: selector universal */
* {
    /* para que el ancho de
    TODOS los elementos HTML
    se calculen hasta los bordes y
    NO solo por sus contenidos,
    cambiando lo que viene predeterminado */
    box-sizing: border-box;
  }

body{
    font-family: "Abel", sans-serif;
    margin: 0; /*hace que se ocupe toda la pantalla y no haya margenes*/
    background-color:rgb(220, 201, 252); /*color de fondo*/
    color: darkblue; /*color tipo*/
  min-height: 100dvh;  /* permite ser visualizada en pantallas diferentes */
 }

 p,
li {
  /* se evitan "viudas" y "huerfanos" */
  text-wrap: pretty;
}


/* para que "TODAS" las imagenes NO sean
   mayores que las cajas que las contienen
   para evitar "scroll" horizontal */
img {
  /* mediran, como maximo, el tamaño
     del bloque html que las contiene */
  max-width: 100%;
}

/* "TODOS" los vinculos */
a {
     /* no estaran subrayados */
  text-decoration: none;

  /* seran de un color definido en la "paleta de diseño" */
  color: hsl(0, 0%, 100%);

  /* negrita */
  font-weight: bold;
}

/* "TODAS" las listas */
ul,
ol {
  /* elimina bullets, numeros etc. */
  list-style: none;

  /* retira el relleno izquierdo predeterminado */
  padding: 0;
}

.contenedora {
   /* ancho maximo 1040px */
  max-width: 65rem;

  /* centrado horizontal (si sobra espacio,
    lo distribuye a izquierda y derecha por igual) */
  margin-inline: auto;

  /* espacio entre el borde del elemento y su contenido
  para que este no quede "pegado" a los bordes */
  padding: 1rem;
    }





/*----------------------------datos-yo-y-equipo-----------------------------------------------*/

    .equipo {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2em;
      align-items: center; /* Alinea los elementos al inicio verticalmente */
  }
  
  .equipo>* {
    flex: 1 1 240px;
    justify-content: center;
    /*text-align: center;*/
    }

  .equipo img {
      /*width: 300px; */
      /*max-width: 100%;*/
      max-width: 300px;
      border: 5px solid rgba(255, 255, 255, 0.808); /* Borde sólido */
      border-radius: 40%;
      box-shadow: 0px 13px 13px rgba(0, 0, 139, 0.514);
   /* color del fondo */
   background-color: rgb(178, 150, 235);
   
  }



  /*H2,: "Diseñadora gráfica y Equipo VM22"*/
  .equipo h2 {
    color: blueviolet;
     margin-top: 0em;
     /* "subrayado" a todo lo ancho */
 border-block-end: 3px solid rgb(177, 146, 238);
 padding-block-end: 1%; /*interlineado entre H2 y subrayado*/
 }

  h1 /*bahlyk daniela - bocetos - datos académicos*/{

      color :  white ; font-size : 2em ; 
      background-color:mediumpurple;
      margin-bottom: 10px; /*interlineado titulo h1 con h2 subtitulo*/
      
    
    }

/*BOTÓN para portafolio behance (debajo del nombre)*/

.portafolio {
  padding: 1px 13px; /* Ajusta el espaciado interior */
  background-color: hsla(241, 90%, 88%, 0.863); /* Color de fondo por defecto */
  color: rgba(0, 0, 139, 0.514); /* Color del texto */
  border: 2px solid rgba(0, 0, 139, 0.514); /* Borde sólido */
  border-radius: 20px; /* Borde redondeado */
  text-decoration: none; /* Elimina el subrayado del enlace */
  font-weight: bold; /* Texto en negrita */
  cursor: pointer; /* Cambia el cursor a una mano */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transiciones suaves para el cambio de color */
  
}

.portafolio:hover {
  background-color: hsl(0, 100%, 99%); /* Cambia el color de fondo al pasar el cursor */
  color: #5c3377; /* Cambia el color del texto al pasar el cursor */
}

/*BOTONES - que llevan a compañeras de equipo VM22)*/
.compas-boton{
  /*se agrega flex acá para que queden en columna (flex-direction: column)*/
  display: flex; 
  flex-direction: column;
  background-color:mediumpurple;
  border-radius: .60rem;
  color: white; /* Color del texto */
  text-decoration: none; /* Elimina el subrayado del enlace */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transiciones suaves para el cambio de color */
  justify-content: center;
  padding: 1px 13px; /* Ajusta el espaciado interior */
  font-weight: bold;
  line-height: 2em;
  margin: 0 0 .3em;
  }

.compas-boton:last-child {
      margin-right: 0; /* Elimina el margen derecho del último botón para evitar espacios innecesarios */
    }

/*cambia de color al pasar el cursor: */
.compas-boton:hover {
      background-color: hsl(0, 100%, 99%); /* Cambia el color de fondo al pasar el cursor */
      color: #5c3377; /* Cambia el color de la tipo al pasar el cursor */
    }
/*------------------------------------Fin sección de datosEquipo------------------------------------------------*/


/*encabezado y pie de pagina, el color de fondo y tipo*/
header, footer {
    background-color:rgb(67, 44, 114); 
    color: white;
}

/*el efecto sombra*/
header {
/* sombra difusa  */
box-shadow:
0   /* desplazamiento horizontal */
7px /* desplazamiento vertical */
50px /* desenfoque */
darkblue/* color */

}

/*por el momento solo transparente*/
#logodgpc {
        /* cambiar de
        etiqueta tipo en linea
        a etiqueta tipo bloque
        para darle propiedades de bloque */
        display: block;
      
        /* redondeo de bordes */
        border-radius: .0rem;
        
        /* medidas */
        width: 8rem;
        
        /* relleno (espacio entre la imagen y el borde */
        padding: .27rem .5rem;
        /* si hay DOS valores,
        el 1er valor es el relleno arriba y abajo,
        el 2do valor es el relleno a izquierda y derecha */
        
        /* color del fondo */
        background-color: hsla(318, 100%, 47%, 0);
        
        /* borde */
        border: solid 0px hsl(0 0% 95%);

}

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

/* BOTONES la lista del menu en el encabezado */
header nav ul {
    /* elimina los margenes arriba y abajo que vienen predeterminados */
    margin-block: 0;
    /* en proximas clases se ocultara el menu en celulares */
    /* display: none; */
  }
  
  /* vinculos, pero SOLO los del menu superior */
  header nav a {
    /* color del texto */
    color: hsl(0 0% 95%);
  
    /* color de fondo */
    background-color:mediumslateblue;
  
    /* para darle propiedades de caja (ancho, por ejemplo) */
    display: block;
  
    /* ancho igual para todos */
    width: 7em;
  
    /* "relleno" arriba y abajo */
    padding-block: 0.25em .5em;
  
    /* border redondeado */
    border-radius: 20px;
    /* cantidad muuuuuy grande para que
    se visualice como "pildora" */
  
    /* texto centrado */
    text-align: center;

    transition: background-color 0.7s ease, color 0.3s ease; /* Transiciones suaves para el cambio de color */
    margin-right: 13px; /* Espacio entre los botones */
  }
  
  /* cuando se pasa el cursor por sobre
  los vinculos del menu o
  se accede a ellos por el teclado
  (selectores de "pseudoclase")
  
  y para que quede diferente
  el boton de la pagina en la que se está */
  
  header nav a:hover,
  header nav a:focus-visible,
  
  .index nav li:first-of-type a,
  .plan nav li:nth-of-type(2) a,
  .mapa nav li:nth-of-type(3) a {
    /* cambia el color de fondo */
    background-color: hsl(0 0% 95%);
  
    /* cambia el color de texto */
    color:mediumpurple;
    outline: none;
  }


/*para acomodar la ubicación del menu-header*/
header .contenedora {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/*acomodar los botones nav en horizontal*/
header nav ul {
    /* caja flexible */
    display: flex;
  
    /* separacion entre elementos de la caja flexible */
    gap: .25rem;
  
    /* si un elemento no cabe, baja a la siguiente li­nea */
    flex-wrap: wrap;
  }

/*----------datos academicos------------------------------*/
.contenedor-academicos {
  display: flex;
  flex-wrap: wrap;
  gap: 3em; /*espacio horizontal imagen-texto*/
 
  align-items: center; /* Alinea verticalmente*/
}

.academicos>* {

justify-content: center;
/*text-align: center;*/
}

.academicos img {
  /*width: 300px; */
  /*max-width: 100%;*/
  max-width: 150px;
 
  aspect-ratio: 1;
 
  object-fit: contain;
  background-color:rgb(255, 255, 255);
  border-radius: 50%;
/*-----para que las imagenes queden centradas verticalmente; entre ellas y el título-----*/
  margin-bottom: 1em; 
  margin-top: 1em;
  

}


.academicos h2 {
    margin-block-start: 0;
    color: blueviolet;
     margin-top: 0em;
 
 
 /* "subrayado" a todo lo ancho */
 border-block-end: 3px solid rgb(177, 146, 238);
  
 /* separa el "subrayado" del texto */
 padding-block-end: 1%;
 


}
  

  .academicos img:hover {
    background-color: mediumpurple; /* Cambia el color de fondo al pasar el cursor */

  }

.contenedor-academicos div {
    flex: 1; /* El contenido se expandirá para ocupar el espacio disponible */
}

.contenedor-academicos h2 {
    margin-bottom: 10px; /* Ajusta el margen inferior entre el título y la lista */
}

.academicos ul li {
    padding-left: 0; /* Elimina el relleno izquierdo predeterminado de la lista */
    list-style: none; /* Elimina los puntos de la lista */


}

/*---------------------fin datosAcademicos-----------*/

/*-------------------Materias------------------------*/
.coloryraya {
  color: blueviolet;

  
      /* "subrayado" a todo lo ancho */
      border-block-end: 3px solid rgb(177, 146, 238);
      
      /* separa el "subrayado" del texto */
      padding-block-end: .35rem;

  
}

/*------------------fin sección materias-------------*/

/*---------------------footer------------------------*/
footer p {
    /* elimina el margen inferior que viene predeterminado */
    margin-block-end: 0;
  }


/*-------------------fin footer (el único que no me complico la vida aaaaa)------------------------*/

/*---------------------bocetos-----------------------------*/


.bocetos h2, h3 {
  color: blueviolet;

  /* "subrayado" a todo lo ancho */
  border-block-end: 3px solid rgb(177, 146, 238);
  
  /* separa el "subrayado" del texto */
  padding-block-end: 1%;
  
}

.bocetos2 /*img pantalla celular*/ {
  
 display: flex;
 margin-bottom: 3%;
 margin-top: 3%;
 margin: 0;
 max-width: 49%;

}

.fotoizq {
margin-right: 3%
}

.fotoarriba /*fotos pantalla pc, distancia*/ {
  margin-bottom: 1%; /*para que haya una pequeña distancia entre el boceto pc 1 y 2*/
}