@import url("Variables.css");
a:link, a:visited, a:hover, a:active {
  text-decoration: none;color:var(--link-color);
}

.nav {
  background-color: var(--text-color-sataa);
  width: 100%;
  min-height: 2rem;
  margin: 0 auto; /* centramos el menú. En "Main.css" hemos definido el max-width=1328px */
  font-size: 1.1rem !important;
  position: sticky;
  top: 95px;
  z-index: 9999;
  &:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
  }
}
.nav__foto img {display: block;    border: 1px solid #B4B4B4;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  height: 95px;
  width: 100%;
  object-fit:fill;
}

.nav__ul { 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: space-between; /* alineación de los items del menú */
    padding: 0;
}
.nav__li {
  width: calc(100% / 8) ;
  /* hacemos el cálculo para que los items quepan en una misma línea. en este caso descontamos el margen dcho. e izq. */
  margin: 0;
  padding: .5rem .5rem;
  border-radius: 0.5rem 0.5rem 0 0;
  text-align: center;
  color: white;
  position: relative;
  &:is(#home, #presentacion, #plan__estudios, #equipo__docente, #matriculacion, #practicas__empresa, #blog, #area__privada) i::before {
    display: inline-block;
    height: 1rem;
    width: 1rem;  
  }
  &#home i::before {
    content: url(../../img/Iconos/house.svg);
    margin-right: 0;
  }
  &#presentacion i::before {
    content: url(../../img/Iconos/user-group.svg);
  }
  &#plan__estudios i::before {
    content: url(../../img/Iconos/chalkboard-user.svg);
  }
  &#equipo__docente i::before {
    content: url(../../img/Iconos/user-graduate.svg);
    height: .8rem;
    width: .8rem; 
    vertical-align: -1px;
  }
  &#matriculacion i::before {
    content: url(../../img/Iconos/euro-sign.svg);
    height: .65rem;
    width: .65rem; 
    vertical-align: -2px;
  }
  &#practicas__empresa i::before {
    content: url(../../img/Iconos/briefcase.svg);
    height: .8rem;
    width: .8rem; 
    vertical-align: -1px;
  }
  &#blog i::before {
    content: url(../../img/Iconos/blog.svg);
    height: .8rem;
    width: .8rem; 
    vertical-align: -1px;
  }
  &#area__privada i::before {
    content: url(../../img/Iconos/lock.svg);
    height: .8rem;
    width: .8rem; 
    vertical-align: -1px;
  }
  a {
      color: white;    
  }
  &:hover {
    background-color: var(--text-light-color-sataa); 
    & > .nav__ul, & > .nav__ul--foto {
        display: block; z-index: 99999;
    }  
  & > .nav__ul{
      height: auto;
  }  
}
.nav__ul { /* submenú */
  background-color: var(--text-light-color-sataa);
  border: 1px solid #B4B4B4;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  display: none;
  margin-left: -.55rem;
  padding: .3rem 0;
  position: absolute;
  top: 2.5rem;
  min-width: 100%;
  height: 0;
  -webkit-animation: scale-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;  
  }
  .nav__li { /* atributos de cada item del submenú */
    font-size: 1rem;
    margin: 0 auto;
    width: max-content;
    padding: 0 1rem; 
    a {
      color: white;text-align: center !important;
      &:hover{
        color:  lightblue;
        text-decoration: underline;font-style: normal;
      }
      &:focus {
        outline: none ;  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important   
      }  
    }
  }
  .nav__ul--foto { /* submenú foto */
    display: none;
    margin-left: -.55rem;
    padding: 0;
    position: absolute;
    top: -95px;
    width: 100%;

    -webkit-animation: scale-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
}
@keyframes zoom__in {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1);
    transform: scale3d(0.1, 0.1, 0.1);
  }

  50% {
    opacity: 1;
  }
}

.nav__li--link::after {  
  content: "";
  position: absolute;
  margin-left: .5rem;
  background-size:30px;
  width:0.7rem;
  height:0.7rem;
  content: url(../../img/iconos/up-right-from-square_white.svg);
}


@-webkit-keyframes fade__in {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @keyframes fade__in {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  .fade__in {
    -webkit-animation-name: fade__in;
    animation-name: fade__in;
    animation-duration: 2s;
  }

  @-webkit-keyframes zoom__in {
    from {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1);
      transform: scale3d(0.1, 0.1, 0.1);
    }
  
    50% {
      opacity: 1;
    }
  }
  /** 
  * ----------------------------------------
  * animation scale-in-top
  * ----------------------------------------
  */
  @-webkit-keyframes scale-in-top {
    0% {
        -webkit-transform: scale(0);
                transform: scale(0);
        -webkit-transform-origin: 50% 0%;
                transform-origin: 50% 0%;
        opacity: 0;
    }
    75% {
        opacity: .5;
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-transform-origin: 50% 0%;
                transform-origin: 50% 0%;
        opacity: 1;
    }
}
@keyframes scale-in-top {
    0% {
        -webkit-transform: scale(0);
                transform: scale(0);
        -webkit-transform-origin: 50% 0%;
                transform-origin: 50% 0%;
        opacity: 0;
    }
    75% {
        opacity: .5;
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-transform-origin: 50% 0%;
                transform-origin: 50% 0%;
        opacity: 1;
    }
}
/* ----------------------------------------------
 * Generated by Animista on 2026-1-9 8:43:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-bottom
 * ----------------------------------------
 */
 @-webkit-keyframes scale-in-bottom {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 1;
  }
}
@keyframes scale-in-bottom {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 1;
  }
}

/* Media Queries */
@media screen and (max-width: 1350px) {
	.nav__li:is(#presentacion, #plan__estudios, #equipo__docente, #matriculacion, #practicas__empresa, #blog, #area__privada) i::before {
    display: none;
	}
}
@media screen and (max-width: 1235px) {
  div .nav__li#blog {
    display: none !important;
  }
  .nav__li {
    font-size: 1rem;
    width: calc(100% / 7) ;
  }
}