@font-face {
  font-family: "rotu";
  src: url(/assets/fuentes/PermanentMarker.ttf);
}
@font-face {
  font-family: "Raleway";
  src: url(/assets/fuentes/Raleway.ttf);
}

:root {
  --color-naranja: #ff4500;
  --color-amarillo: #ffaa00;
  --color-fondo: #f9f9f9;
  --color-text: #333;
  --grisclaro: #f0f0f0;
  --cafe: #6f4e37;
  --font-1: 'Raleway', sans-serif;
  --font-2: 'rotu', sans-serif;
  --font-3: 'Roboto', sans-serif;
}
/* Contenedor del menu de navegacion compartido */
.nav__container {
  position: absolute;
  top: 03%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  z-index: 10; /* Asegura que el menú esté por encima de otros elementos */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav__menu {
  width: 100%;
  justify-content: space-around;
  display: flex;
  margin: 0 auto;
  padding: 0%;
}
.nav__item {
  list-style: none;
  font-family: var(--font-2);
  font-size: 2rem;
  
}
.nav__link {
  text-decoration: none;
  font-family: var(--font-2);
  padding: 0%.5rem;
  
}
.nav__link__black {
  color: var(--color-amarillo);
}
.nav__link:hover {
  color:  var(--color-naranja);

}

/* fin de menu de navegacion compartido */


@media (max-width: 980px) {
  .nav__link,
  .nav__link__black,
  .nav__item {
    font-size: 1rem;
    font-family: 'rotu';
  }

}

@media (max-width: 500px) {
  .nav__link,
  .nav__link__black,
  .nav__item {
    font-size: 0.8rem;
    font-family: 'rotu';
    color: black;
  }
 .servicios__titulo {
    font-size: 1rem;
  }
  .footer__footer {
    white-space: nowrap;
    margin: 0;
    padding: 0;
    font-size: 0.5rem;
  }
  .footer__redes {
    gap: 0.2rem;
  }
  .footer__icon {
    font-size: 1rem;  
  
}
}
/* seccion footer */
.footer { 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: black;
  color: var(--grisclaro);

}
.footer__line {
  width: 100%;
  border-bottom: 1px solid var(--cafe);
  margin-bottom: 1rem;
}
.footer__icon {
  color: var(--cafe);
  font-size: 1.5rem;
  text-decoration: none;
  margin: 0 0.5rem;
}
.footer__icon:hover {
  color: var(--color-naranja);
}
.footer_footer span {
  color: var(--grisclaro);
  font-family: (--font-3);
}
.footer__redes{
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 1rem;
  margin-bottom: 0.5rem;
}