/* Estilo de fuente */

@font-face {
  font-family: Inter;
  src: url(fonts/Inter.ttf);
}

@font-face {
  font-family: italiana;
  src: url(fonts/Italiana-Regular.ttf)
}

@font-face {
  font-family: boogaloo;
  src: url(fonts/Boogaloo-Regular.ttf)
}

@font-face {
  font-family: Droid;
  src: url(fonts/DroidSans.ttf);
}

@font-face {
  font-family: Barlow;
  src: url(fonts/Barlow-Bold.ttf);
}

.titulo-tarjeta {
  font-family: Inter;
  font-weight: bold;
}

.texto-tarjeta {
  font-family: Droid;
}

body {
  font-family: Inter, sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh;
  font-display: swap;
  /* estamos indicando que el navegador cargue la fuente de manera inmediata */
  text-align: justify;
  text-justify: inter-word;
  /* Texto justificado */
}


/* header */

header {
  width: 100%;
  height: 190px;
  background: #008A97;
}

.logo {
  width: 40%;
  position: absolute;
  padding-top: 40px;
  left: 2%;


}

.logo img {
  width: 70%;

}


/* Estilos barra de búsqueda -  Cambio de porcentaje del widht para que haya una separación entre la barra de escribir y el buscar*/

#search-form {
  width: 25%;
  position: relative;
  left: 72%;
  padding-bottom: 10px;
  padding-top: 45px;

}


#search-form {
  display: none;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

}

#search-input {
  width: 190px;
  height: 35px;
  margin-right: 2%;
  /* Espacio de separación entre la barra de búsqueda y el botón */
  border: none;
  border-radius: 0;
  /* Esquinas rectas */
  padding: 5px;
  /* Espacio interno dentro del input */
}


#search-form button {
  width: 100px;
  height: 45px;
  background-color: white;
  border: none;
  border-radius: 0;
  /* Esquinas rectas */
}


#search-form button {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  color: #008A97
}


.he1 {

  margin-left: 40%;
  width: 10%;

}

/* Estilos generales del menú */

nav {
  position: absolute;
  margin-top: 5%;
  margin-left: 45%; 
  /* Tuvimos que cambiar el tamaño del margin left para que ajustar el tamaños */

}


nav ul {
  font-family: Inter, sans-serif;
  font-size: 1.3rem;
  list-style-type: none;
  padding: 0;
  text-align: center;
  /* Centrar el menú en dispositivos móviles */
}

nav ul li {

  display: inline-block;
  margin: 0 3px;
}

nav ul li a {
  display: block;
  font-family: Inter, sans-serif;
  text-decoration: none;
  color: #ffffff;
  padding: 7px;
  font-weight: 550;
  transition: background-color 0.3s;


}

nav ul li:hover {
  color: #ffffff;
  background-color: #04666e;
  font-weight: bold;

}


.topnav {
  overflow: hidden;
  position: relative;

}

.topnav #myLinks {
  display: none;

}

input {
  position: relative;
  width: 80%;
  height: 45px;
  font-size: 20px;
}

/* La clase <div> - necesaria para posicionar el contenido de dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Contenido desplegable (oculto de forma predeterminada) */
.dropdown-content {
  display: none;
  position: absolute;
  left: -3.5vw;
  background-color: rgba(0, 0, 0, 0.6);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Enlaces dentro del menú desplegable */
.dropdown-content a {
  color: white;
  padding: 20px 16px;
  text-decoration: none;
  display: block;
  font-size: 1rem;
}


/* Cambio en el color de los links de dropdown al pasar el raton por encima */
.dropdown-content a:hover {
  background-color: #d869e7;
}

/* Muestra el menú desplegable (use JS para agregar esta clase al contenedor .dropdown-content cuando el usuario haga clic en el botón desplegable) */
.show {
  display: block;
}



/* footer */


footer {
  width: 100%;
  height: 99px;
  background: #008A97;
  color: #ffff;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: inline-flex;

}

footer a {

  text-decoration: none;

}


/*-- MEDIAS --- */


/* Estilos para dispositivos móviles (ancho máximo de 1365px) */

@media (max-width:1372px) {
  nav ul li {
    font-size: 1.10rem;
  }

  .dropdown-content a {
    font-size: 0.9rem;

  }

  #search-form {
    position: static;
    margin-left: 70%;
  }


}


/* Estilos para dispositivos móviles (ancho máximo de 1211px) */

@media (max-width:1211px) {
  nav ul li {
    font-size: 1.00rem;
  }

  .dropdown-content a {
    font-size: 0.85rem;

  }


  #search-form {
    position: static;
    margin-left: 68%;
  }


}

/* Estilos para dispositivos móviles (ancho máximo de 1109px) */

@media (max-width:1125px) {
  nav ul li {
    font-size: 0.90rem;
  }

  .dropdown-content a {
    font-size: 0.8rem;

  }

  #search-form {
    position: static;
    margin-left: 64%;
  }

  nav {

    position: absolute;
    margin-left: 44%;

  }


}




/* Estilos para dispositivos móviles (ancho máximo de 1094px) */

@media (max-width:1094px) {
  nav ul li {
    font-size: 0.90rem;
  }

  .dropdown-content a {
    font-size: 0.8rem;

  }

  #search-form {
    position: static;
    margin-left: 63%;
  }

  nav {

    position: absolute;
    margin-left: 43%;

  }


}

/* Estilos para dispositivos móviles (ancho máximo de 918px) */

@media (max-width:954px) {
  nav ul li {
    font-size: 0.90rem;

  }


  #search-form {
    position: static;
    margin-left: 54%;
  }

  nav {

    position: absolute;
    margin-left: 34%;

  }

}



/* Estilos para dispositivos móviles (ancho máximo de 850px) */


@media (max-width:850px) {

  #search-form {
    position: static;
    margin-left: 52%;
  }

  nav {

    position: absolute;
    margin-left: 32%;

  }

}



/* Estilos para dispositivos móviles (ancho máximo de 790px) */


@media (max-width:801px) {

  nav ul li {
    font-size: 0.85rem;


  }

  #search-form {
    position: static;
    margin-left: 48%;
  }

  nav {

    position: absolute;
    margin-left: 30%;

  }

}



/* Estilos para dispositivos móviles (ancho máximo de 768px) */
@media (max-width: 768px) {
  nav {
    display: none;

  }

  header {
    height: 150px;
  }



  .mobile-container {
    /* Espacio utilizado para el navegador movil*/
    position: relative;
    max-width: 100%;
    margin: auto;
    height: 450px;
    color: white;
    border-radius: 10px;
    z-index: 100;

  }

  .topnav {
    /* Estilo para el menu desplegable*/
    overflow: hidden;
    height: auto;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.05);
    position: relative;
  }

  .topnav #myLinks {
    /*Preferiblemente no tocar debido al codigo de js*/
    display: none;


  }

  .topnav a {
    /* Estilo para los PFAE dentro del menu*/
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    display: block;

  }

  .topnav a.icon {
    /*Estilo del icono*/
    background-color: rgba(0, 0, 0, 0.05);
    display: block;
    position: absolute;
    margin-right: 10px;
    margin-bottom: 5px;
    right: 5px;
    top: 10px;


  }



  .buscarMovil {

    margin-top: 20px;
    margin-left: 20px;
  }

  .topnav a:hover {
    /*Estilo para cuando pasas el raton por encima de PFAE dentro del menu*/
    background-color: #ddd;
    color: black;
  }

  .topnav a.icon:hover {
    color: white;
    background-color: transparent;


  }

  #home:hover {
    background-color: transparent;
  }


  #home {
    pointer-events: none;

  }


  .active {
    background-color: #04AA6D;
    color: white;
  }

  #search-input {
    display: none;

  }

  #search-form button {
    display: none;
  }

  #search-form {
    display: none;
    height: 50px;
  }

  .logo {
    width: 75%;
    position: absolute;
    padding-top: 25px;
    padding-left: 10%;
    padding-right: 10%;



  }

  .logo img {
    width: 68%;

  }

}

@media (min-width: 769px) {
  .mobile-container {
    display: none;

  }
}

@media (max-width: 850px) {
  ul li {
    font-size: 19px;

  }

}