@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700&display=swap"); /*Fuente */

* {
  /*Toda la pagina */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* div donde esta todos los elementos */
  font-family: sans-serif;
  overflow-x: hidden;
}
button {
  cursor: pointer;
  font-family: Tahoma, "Segoe UI", Verdana, sans-serif;
  font-weight: bold;
}
/* Ralla amarilla */
.divider {
  height: 8px;
  width: 55%;
  margin-top: 15px; /* añade espacio externo por encima del contenedor de la imagen */
  margin-bottom: 15px;
  margin-left: 0;
  margin-right: auto;
  background-color: rgb(227, 246, 9);
}
/*********estilo general de todo*/
.wrapper {
  width: 100%;
  height: auto;
  background-color: #2a2929;
  color: white;
}
/***********titulo*/
.brand {
  color: rgb(227, 246, 9);
  /*Ponemos en linea las letras del nav con el titulo*/
  margin-top: -7px;
  padding-left: 8%;
}

.brand span {
  color: rgb(227, 246, 9);
}

/********************nav*/
.navbar {
  display: flex; /* que se coloque a la derecha del titulo */
  justify-content: space-between;
  padding: 2em;
  align-items: center; /* Asegura que todos los elementos estén alineados verticalmente */
}
.menu {
  /*que se coloque todo en linea*/
  display: flex;
  padding-right: 40px;
  width: 50%;
  /*que se separen los elementos del nav*/
  justify-content: space-around;
}
.menu li {
  list-style: none;
}
.menu a {
  /* dentro de las pestañas */
  color: white;
  text-decoration: none;
  /*Espacio entre pestañas*/
  padding: 10px 10px;
}
.menu .active {
  /*Cuando pasas el ratón se activa el color del nav */
  color: white;
}

.menu a:hover {
  background-color: rgb(227, 246, 9);
  color: black; /*color texto nav cuando estas encima*/
  transition: ease-in 0.5s; /*efecto cuando pasas el ratón encima de las pestañas del nav*/
}
/* Estilo del botón de hamburguesa */
.hamburger {
  display: none;
  font-size: 30px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  position: relative; /* Posicionamiento relativo dentro del navbar */
  z-index: 2; /* Asegura que el botón esté sobre el menú desplegado */
}
/********************fin nav*/

/********************main*/
.main {
  /*contenedor de información*/
  margin-left: 10%;
  background-color: #2a2929;
  color: white;
  width: 80%;
  /* max-width: 100vw;
  max-height: 100vh; */
  display: flex;
  font-size: 18px;
  align-items: center; /* Asegura que los elementos hijos ocupen toda la altura */
  justify-content: start; /* Separa máximo los elementos hijo */
  /* overflow: hidden; */
}
.info-content {
  background-color: #2a2929;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  margin-right: 75px;
}

h1 {
  line-height: 1.6; /* Aumenta la altura de línea a 1.6 veces el tamaño del texto */
  font-size: 2.5em; /* Ajustar según necesidad */
  margin: 0px;
}

span {
  color: rgb(227, 246, 9);
}
h3 {
  font-size: 1.2em; /* Ajustar según necesidad */
}
p {
  margin-top: 1em; /* Añade espacio superior */
}

#imgMain {
  width: auto; /* 40% del espacio del contenedor `.main` */
  margin: 0;
  margin-left: 35px;
  outline: none; /* Elimina el borde al enfocar */
}
/*******Estilo imagen*/
.main img {
  border: 4px solid rgb(227, 246, 9);
}
/*********Estilo botones*/
.redirectLinkedIn {
  text-decoration: none;
  padding: 10px 20px;
  background-color: rgb(227, 246, 9);
  border: none;
  border-radius: 20px;
  cursor: pointer; /*Para que aparezca la manita*/
  margin-left: 40%;
  margin-top: 2%;
}
.redirectLinkedIn:hover,
.botonSaberMas.redirectLinkedIn-cv:hover,
#botonFiltro:hover,
.custom-checkbox:hover input ~ .textoCheckbox,
#botonCards:hover,
.botonSaberMas:hover {
  /*Cuando el cursor esta encima del boton el cambia de color*/
  background-color: #5eacd9;
  box-shadow: none;
  transition: ease-in 0.5s;
}

/*********FINAL wrapper*/

/***************Estilos about*/
.about {
  margin-top: 10px;
  margin-bottom: 10px;
  display: grid;
  /* grid-template-columns: repeat(10, 1fr); */
  height: auto;
  /* Añade un espacio entre las celdas del grid */
  grid-gap: 10px;
  width: 80%;
  align-items: center;
  /* Lo separo del lado derecho */
  margin-left: 10%;
}

.about img {
  grid-column: 1 / 6; /* Ajusta según sea necesario */
  width: 99%;
  height: auto; /* Mantiene la proporción de la imagen */
  border: 4px solid rgb(227, 246, 9);
}

.about-info {
  /* margin-right: 100px; */
  line-height: 1.6;
  grid-column: 6 / 12; /* Ajusta según sea necesario, asegúrate de que suma 10 columnas en total */
  padding: 5px;
  height: 95%;
  display: grid;
  margin-left: 10px;
}

.botonSaberMas {
  /* width: 20%; */
  background-color: rgb(227, 246, 9);
  border: none;
  /* padding: 10px 10px; */
  height: 35px;
  width: 150px;
  border-radius: 20px;
  cursor: pointer; /*Para que aparezca la manita*/
  margin-left: 30%;
  margin-top: 50px;
  /* margin-top: 25px; */
}
.botonSaberMas a {
  text-decoration: none;
  color: black;
}
/***************Fin Estilos about*/

/****************** INICIO CLASIFICACIÓN POR TIPO   'PORFOLIO'  */
.porfolio {
  width: auto;
  background-color: #2a2929;
  color: aliceblue;
}

/************estilos de portafolio*/
.portfolio_headings {
  /*Contenedor del titulo*/
  margin-left: 10%;
  width: 80%;
  padding: 10px;
  height: auto;
}
.portfolio_headings h2 {
  /*titulo*/
  font-size: 1.5em;
  margin: 10px 0px 20px 0px;
}
.search-bar {
  margin: 0px;
}
.language-selection {
  display: inline;
  height: auto;
  width: 60%;
  /* superior, derecha,inferior, izquierda */
  margin: 30px 0 30px 0;
}
/* Estilo base para el label que actuará como contenedor del checkbox */
.custom-checkbox {
  position: relative;
  margin-right: 20px;
  padding: 5px;
  cursor: pointer;
  font-size: 18px;
  user-select: none;
}
.custom-checkbox:hover {
  background-color: #5eacd9;
  box-shadow: none;
  transition: ease-in 0.4s;
}

.textoCheckbox {
  color: white;
}
/* .portfolio {
  width: 80vw;
  height: 80vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
} */
#botonFiltro {
  display: block;
  text-decoration: none;
  padding: 10px 20px;
  background-color: rgb(227, 246, 9);
  border: none;
  border-radius: 20px;
  cursor: pointer; /*Para que aparezca la manita*/
  margin-left: 1%;
  margin-top: 25px;
}
#botonFiltro:focus {
  outline: none; /* Asegura que no haya contorno cuando el botón es enfocado */
}
/* ******** INICIO CARDS*/
/* contenedor padre de todas las cards */
.container {
  background-color: #2a2929;
  display: flex; /*par que las card estén  en el centro*/
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /*par que las card estén  en el centro*/
  padding: 3em;
  margin: 0 auto;
  max-width: 100%; /* Cambia width por max-width */
  box-sizing: border-box; /* Agrega esto para incluir el padding en el ancho */
}
/* Contenedor  padre de cada carta  */
.card {
  display: grid;
  width: 27%;
  height: 500px;
  color: aliceblue;
  background-color: cadetblue;
  /* superior, derecha, inferior e izquierda */
  margin: 10px 15px 20px 15px;
  float: left;
}
.card a{
  text-decoration: none;
  color: black;
}
.card_img {
  /*original */
  width: 100%;
  /* background-image: url(../img/generica.png); */
  background-color: white; /* color fondo */
  background-size: contain; /* La imagen se ajusta al contenedor y mantiene su proporción */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center; /* Centra la imagen en el contenedor */
  border: solid 4px cadetblue;
}
.card_title {
  margin-left: 5px;
  padding: 1px;
  font-size: larger;
  color: white;
}
.card_title h2{
  margin-bottom: 10px;
}
.card_proyecto_links {
  /*logos */
  display: flex;
  justify-content: center;
}
.card_proyecto_links a {
  /*titulo de las cartas*/
  color: white;
  text-decoration: none;
}
.card_proyecto_links i {
  /*logos cartas*/
  font-size: 1.6em;
  color: black;
  margin: 10px;
}
.proyects_details_content {
  margin-left: 5px;
  display: flex;
  width: 99%;
  height: auto;
  justify-content: center;
  /* margin-top: 10%; */
  text-decoration: none;
}

#botonCards {
  padding: 5px 15px;
 text-align: center;
 justify-content: center;
 align-items: center;
  height: 45%;
  /*Estilos boton de las cards*/
  margin-bottom: 10px;
  font-weight: bold;   /*Texto en negrita*/
}
#botonCards:hover {
  /*Cuando el cursor esta encima del boton el cambia de color*/
  background-color: rgb(246, 100, 9);
  box-shadow: none;
  transition: ease-in 0.5s;
}
.card_img-nodeJs {
  width: 100%;
  height: 150px;
  background-image: url(../img/logoNode-js.jpg);
  /* background-image: url(../img/logoJava.png); */
  background-color: white; /* color fondo */
  background-size: contain; /* La imagen se ajusta al contenedor y mantiene su proporción */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center; /* Centra la imagen en el contenedor */
  border: solid 4px cadetblue;
}
.card_img-tutoMySql{
  width: 100%;
  height: 150px;
  background-image: url(../img/logoMysql.png);
  /* background-image: url(../img/logoJava.png); */
  background-color: white; /* color fondo */
  background-size: contain; /* La imagen se ajusta al contenedor y mantiene su proporción */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center; /* Centra la imagen en el contenedor */
  border: solid 4px cadetblue;
}
.card_img-tutoGoAccess{
  width: 100%;
  height: 150px;
  background-image: url(../img/logoUbuntu.png);
  /* background-image: url(../img/logoJava.png); */
  background-color: white; /* color fondo */
  background-size: contain; /* La imagen se ajusta al contenedor y mantiene su proporción */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center; /* Centra la imagen en el contenedor */
  border: solid 4px cadetblue;
}
.card_img-laravel {
  width: 100%;
  height: 150px;
  background-image: url(../img/logo-laravel250x83.png);
  /* background-image: url(../img/logoJava.png); */
  background-color: white; /* color fondo */
  background-size: contain; /* La imagen se ajusta al contenedor y mantiene su proporción */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center; /* Centra la imagen en el contenedor */
  border: solid 4px cadetblue;
}

.card_img-tutoLaravel {
  width: 100%;
  height: 150px;
  background-image: url(../img/logoUbuntuLaravel.png);
  /* background-image: url(../img/logoJava.png); */
  background-color: white; /* color fondo */
  background-size: contain; /* La imagen se ajusta al contenedor y mantiene su proporción */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center; /* Centra la imagen en el contenedor */
  border: solid 4px cadetblue;
}
.card_img-java {
  width: 100%;
  height: 150px;
  background-image: url(../img/logoJava.png);
  /* background-image: url(../img/logoJava.png); */
  background-color: white; /* color fondo */
  background-size: contain; /* La imagen se ajusta al contenedor y mantiene su proporción */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center; /* Centra la imagen en el contenedor */
  border: solid 4px cadetblue;
}
.card_img-html {
  width: 100%;
  height: 150px;
  background-image: url(../img/html-css300x150.png);
  background-color: white; /* color fondo */
  background-size: contain; /* La imagen se ajusta al contenedor y mantiene su proporción */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center; /* Centra la imagen en el contenedor */
  border: solid 4px cadetblue;
}
.card-img-js {
  width: 100%;
  height: 150px;
  background-image: url(../img/js300x150.png);
  background-color: white; /* color fondo */
  background-size: contain; /* La imagen se ajusta al contenedor y mantiene su proporción */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center; /* Centra la imagen en el contenedor */
  border: solid 4px cadetblue;
}
.card_img-php {
  width: 100%;
  height: 150px;
  background-image: url(../img/php250x250.png);
  background-color: white; /* color fondo */
  background-size: contain; /* La imagen se ajusta al contenedor y mantiene su proporción */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center; /* Centra la imagen en el contenedor */
  border: solid 4px cadetblue;
}
.project-details-button {
  text-decoration: none;
  padding: 10px 20px;
  background-color: rgb(227, 246, 9);
  border: none;
  border-radius: 20px;
  margin-top: 20px;
  cursor: pointer;
}
/* //////**********Estilos modal ***************************/
.infoCard{
  cursor: pointer;
  color: white;
}

 /* Estilos del pop-up con la info de las cards */
  .modalContainer {
  display: none; /* Ocultar el modal inicialmente */
  position: fixed; /* Fija el contenedor en la pantalla */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
  display: flex; /* Centra el modal */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Asegura que esté por encima de todo */
}

/* Estilos del modal */
.modal {
  max-height: 80vh; /* Máximo 80% de la altura de la ventana */
  overflow-y: auto; /* Scroll vertical si el contenido excede */
  padding: 20px; /* Espacio interno para que no se pegue al borde */
  background: #fff; /* Fondo claro para mejor legibilidad */
  border-radius: 5px; /* Bordes redondeados */
  color: black;
  position: relative; /* Relativo al contenedor fijo */
  width: 80%; /* Ancho razonable, ajustable */
  max-width: 600px; /* Límite máximo */
  text-align: center;
}
/* Contenedor principal del modal */

/* Texto del modal */
.modalContainer .modal p {
  text-align: left !important;
}

/* .modal {
  width: 50%;
  padding: 20px;

  background-color: rgba(255, 255, 255); 

} */
 .modal h1{
  font-size: 1.2em;
}

/* Botón para cerrar el modal */
#bootonClose {
  padding: 10px 20px;
  background-color: rgb(227, 246, 9);
  border: none;
  border-radius: 20px;
  margin-top: 20px;
  cursor: pointer;
}