:root {
    --color-primary: #eeeeee;
    --color-secondary: #000;
    --color-accent: #4e4feb;
    --color-background: #068fff;
    --titulos: 40px;
    --parrafos: 16px;
    --Textos: 14px;
    --subtitulos: 24px;
    --anuncios: 16px;
    --botones: 18px;
    --letra-botones: "Black Ops One", cursive;
    --letra-subtitulos: "Raleway", sans-serif;
    --letra-textos: "Montserrat", sans-serif;
    --letra-anuncios: "Titillium Web", sans-serif;
    --letra-titulos: "Roboto", sans-serif;
    --letra-enlaces: "Exo 2", sans-serif;
    --letra-principal: "New Rocker", cursive;
  }
  
  html,
  body {
    overflow-x: hidden;
  }
  

  body {
    background-color: var(--color-secondary);
    padding: 0px;
  }

  /*Header*/
  header{
    background-color: var(--color-secondary);
    padding: 0px;
  }

  /*Barra de navegación principal*/
.container-nav {
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.logo-nav {
  width: 7rem;
  margin-left: 2rem;
}

.navbar-title {
  width: 100%;
  margin-left: 2rem;
}

.container-lista {
  width: 100%;
}

.nav-lista {
  list-style: none;
  display: flex;
  margin: 0 10px;
  padding: 5px 8px;
  gap: 10px;
  height: auto;
  width: auto;
  align-self: center;
}

.nav-item {
  background-color: var(--color-accent);
  color: var(--color-secondary);
  font-size: var(--botones);
  border-radius: 4px 2px 2px;
  border-width: 2px 2px 0px 2px;
  border-style: solid;
  border-color: var(--color-secondary);
  font-size: var(--botones);
  font-family: var(--letra-botones);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 1px 10px;
  margin: 0;
}

.nav-item:hover {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  box-shadow: 0 3px 20px var(--color-background);
  padding: 1px 10px;
}

.nav-item a {
  font-size: 18px;
  max-width: 95%;
}
  /*Menu*/
.menu-principal {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.barra-pro {
  width: 95%;
  border: 3px solid var(--color-primary);
  position: relative;
  top: 5px;
  justify-content: center;
  text-align: center;
  align-items: center;
  margin: 20px auto;
}

#titulo-proyectos {
  text-align: center;
  font-family: var(--letra-principal);
  font-size: var(--titulos);
  color: var(--color-background);
  margin-top: 5rem;
  text-shadow: 1.5px 2px 2px var(--color-primary);
  letter-spacing: 10px;
}

#titulo-proyectos:hover {
  text-align: center;
  font-family: var(--letra-principal);
  font-size: var(--titulos);
  color: var(--color-accent);
  margin-top: 5rem;
  text-shadow: 1.5px 2px 1px var(--color-primary);
}
/* Sección 3 Reseñas y experiencias*/
.seccion-terminados, .seccion-proceso{
  display: flex;
  justify-content: space-between;
  width: 90%;
  height: 34rem;
  padding: 10px 30px;
  margin: 0 auto;
  overflow: auto;
  scrollbar-width: thin; /* Para Firefox */
  scrollbar-color: var(--color-background) var(--color-secondary);
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to left,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.seccion-tarjetas{
  display: flex;
  margin: 25px 20px;
  gap: 2rem;
}

.tarjetareseñas {
  position: relative;
  min-width: 330px;
  min-height: 470px;
  margin: 0px 20px;
  background-color: var(--color-secondary);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 10px;
  border-radius: 8px;
  color: var(--color-primary);
}

.tarjetareseñas::before {
  content: '';
  position: absolute;
  inset: 0;
  left: -5px;
  margin: auto;
  width: 340px;
  min-height: 480px;
  border-radius: 10px;
  background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );
  z-index: -10;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tarjetareseñas::after {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(20px);
}

.tarjetareseñas:hover::after {
  filter: blur(30px);
}

/*Imagenes del contenedor de proyectos*/
.tarjetareseñas img {
  margin: 0 auto;
  max-width: 14rem;
  background-color: transparent;
  border-radius: 5px;
  box-shadow: 0px 5px 15px var(--color-secondary);
}

.tarjetareseñas h5{
  font-size: var(--subtitulos);
  margin: 0 auto;
  text-align: center;
}

.tarjetareseñas p{
  width: 100%;
  margin: 0 auto;
  text-align: start;
  font-family: var(--letra-textos);
  font-size: var(--Textos);
}

.clase-proyecto{
  color: var(--color-background);
  padding-left: 15px;
}
.card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.enlaces {
  align-self: flex-end;
  text-decoration: none;
  color: var(--color-accent);
  padding-right: 10px;
}

.enlaces:hover{
  color: var(--color-background);
}
#tituloterminados, #tituloproceso, #tituloinvestigacion  {
  text-align: center;
    font-size: var(--titulos);
    color: var(--color-primary);
    font-family: var(--letra-titulos);
    text-shadow: 2px 4px 3px var(--color-background);
    margin: 20px 0px;
}

/* Footer */
#contactos {
    width: 100%;
    overflow: hidden;
    background: var(--color-secondary);
    padding: 20px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  
  #contactos:hover {
    background-color: var(--color-background);
    color: var(--color-secondary);
    box-shadow: 0px -5px 10px var(--color-primary);
    overflow-x: hidden;
  }
  
  .enlaces-footer {
    width: 30%;
    font-family: var(--letra-enlaces);
    font-size: var(--parrafos);
    text-decoration: none;
    margin: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 7px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }
  
  .enlaces-footer img {
    width: 100%;
  }
  
  .logo1:hover {
    transform: scale(1.2);
    border-radius: 7px;
    box-shadow: 3px 5px 4px 1px #3b5998;
  }
  
  .logo2:hover {
    transform: scale(1.2);
    border-radius: 7px;
    box-shadow: 3px 5px 4px 1px #833ab4;
  }
  
  .logo3:hover {
    transform: scale(1.2);
    border-radius: 7px;
    box-shadow: 3px 5px 4px 1px #ff0050;
  }
  
  .logo4:hover {
    transform: scale(1.2);
    border-radius: 7px;
    box-shadow: 3px 5px 3px 1px #2bb741;
  }
  
  .logo5:hover {
    transform: scale(1.2);
    border-radius: 7px;
    box-shadow: 3px 5px 1px 1px #0e76a8;
  }
  
  .logo6:hover {
    transform: scale(1.2);
    border-radius: 7px;
    box-shadow: 3px 5px 4px 1px #171515;
  }
  
  .enlaces img {
    max-width: 50px;
    display: flex;
    transition: filter 0.3s;
  }
  
  .enlaces img:hover {
    filter: brightness(70%);
  }
  
  .informacion-footer {
    display: flex;
    flex-direction: column;
  }
  
  .informacion-footer .infofooter {
    text-decoration: none;
    font-family: var(--letra-principal);
    font-size: var(--subtitulos);
    color: var(--color-secondary);
  }
  
  .informacion-footer img {
    width: 20%;
    margin: 0 auto;
  }
  
  .año {
    font-family: var(--letra-principal);
    font-size: var(--subtitulos);
  }

  /* 🟢 **Responsive para móviles (320px - 480px)** */
@media (min-width: 320px) and (max-width: 480px){
  .navbar-title {
    display: none;
  }

  #titulo-proyectos{
    font-size: 30px;
  }

  #titulo-proyectos:hover {
    font-size: 30px;
  }

  #tituloterminados, #tituloproceso, #tituloinvestigacion {
    font-size: 20px;
  }

  .tarjetareseñas {
    justify-content: space-around;
    min-width: 250px;
    min-height: 0px;
  }

  .tarjetareseñas::before{
    width: 260px;
  }
  .tarjetareseñas img {
    max-width: 10rem;
  }

  .enlaces-footer img {
    width: 2rem;
  }

  .informacion-footer img {
    width: 15rem;
  }
}


/* 🟡 **Responsive para tablets (481px - 1024px)** */
@media (min-width: 481px) and (max-width: 1024px){
  .enlaces-footer img {
    width: 2rem;
  }

  .informacion-footer img {
    width: 15rem;
  }
}

/* 🔵 **Responsive para escritorios grandes (ajustes mínimos) */
@media (min-width: 1025px){

}