@charset "UTF-8";
/* 
Theme Name: EDU-PORTAFOLIO
Theme URI: 
Description: Portafolio y sitio web de contacto
Version: 1
Author: Eduardo AAL
Author URI: instagram.com/disea.graficas
*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap");
h1, h2, h3 {
  font-family: "Montserrat", sans-serif;
}

h4, h5 {
  font-family: "Roboto", sans-serif;
}

h5 {
  font-size: 18px;
}

p {
  font-family: "Roboto", sans-serif;
  text-align: left;
  font-size: 18px;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  transition: 0.3s ease all;
  z-index: 1;
}

/* Estilo para el icono personalizado en el botón de menú */
.centered-image-button {
  width: 72px;
  height: 55px;
  position: relative;
}

.centered-image-button img {
  z-index: 9999;
  right: 0px;
  top: -8px;
  position: absolute;
}

/* Añade margen o padding según sea necesario para ajustar el espacio entre la imagen y el borde del botón */
.centered-image-button .menu-icon {
  margin: 0; /* Ajusta el margen si es necesario */
  padding: 0; /* Ajusta el relleno si es necesario */
}

.navbar {
  background: white;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.16);
  transition: 0.3s ease all;
}

.nav-link {
  color: black;
  margin-left: 20px;
  font-weight: bold;
}

.nav-link.neon {
  animation: neon 1s infinite alternate; /* 1s de duración, animación infinita en modo alterno */
}

.nav-link:hover {
  color: tomato;
}

.navbar-nav {
  display: flex;
  justify-content: flex-end;
}

.navbar-nav .current-menu-item > a {
  color: transparent;
  background: linear-gradient(270deg, #D94645, #971D1C);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: slideTexture 2s linear infinite;
}

@keyframes slideTexture {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.navbar.scroll {
  background-color: #1C1C1C; /* Color de fondo cuando se desplaza */
}

.scroll .nav-link {
  color: white; /* Cambiar el color del texto a blanco en estado de desplazamiento */
}

.scroll .nav-link:hover {
  color: #ff6347; /* Cambiar el color del texto a blanco en estado de desplazamiento */
}

.icono img {
  max-width: 50px;
  height: auto;
  margin: 10px 10px 10px 50px;
}

.navbar .logo img {
  height: 40px; /* Altura del logo */
  width: auto; /* Ancho automático para mantener la proporción */
  transition: height 0.3s; /* Transición para el tamaño del logo */
}

.span1 {
  width: 30px;
  height: 30px;
  line-height: 30px;
  display: block;
  background: none;
  color: white;
}

.navbar-brand {
  width: 7%;
  height: auto;
}

.navbar-brand img {
  width: 100%;
  height: auto;
}

/* Estilo base para los elementos de menú */
.navbar-nav .menu-item {
  position: relative;
  z-index: 999;
}

/*------------------------------------------*/
/* Estilos para el contenido superpuesto */
.texto-banner {
  background: rgba(255, 255, 255, 0.7); /* Fondo semitransparente para legibilidad */
  padding: 20px;
  border-radius: 5px;
  z-index: 1;
  text-align: left;
  font-weight: 980px;
}

.video {
  top: 0;
  left: 0;
  width: 100%;
  height: 110vh;
  z-index: -50;
  position: fixed;
}

.positivo {
  margin-top: -50px;
}

.contenedor-video {
  overflow: hidden;
  position: absolute;
  height: 110vh;
}

.relativo {
  position: relative;
  z-index: 50;
  background-color: white;
  margin-top: -10vh;
}

.relativo2 {
  position: relative;
  z-index: 50;
  background-color: white;
}

.relativo3.video {
  position: absolute;
  z-index: -50;
}

.blanco-abajo {
  background-color: #151515;
  z-index: 50;
  width: 100%;
  height: 7vh;
}

.degradado {
  background: linear-gradient(to left, #971D1C, transparent);
  right: 0;
  top: 0;
  height: 111vh;
  width: 50%;
  z-index: 1;
  position: absolute;
}

.img-banner img {
  width: 100%;
  max-height: 100vh;
  transform: scaleX(-1);
  position: relative;
  z-index: 2;
}

.img-banner2 {
  height: 100vh;
  z-index: 2;
  display: flex;
  align-items: flex-end;
}

.img-banner2 img {
  transform: scaleX(-1);
}

@media (max-width: 767px) {
  .img-banner2 img {
    display: none;
  }
  .texto-banner2 {
    margin-bottom: -100vh;
    padding: 25px;
  }
}
.texto-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0);
  z-index: 5;
  white-space: pre-line;
}

.texto-banner h1, h3, h5 {
  margin-top: 15px;
  font-weight: bolder;
}

button {
  --red: #971D1C;
  text-decoration: none; /* Eliminar subrayado */
  font-size: 15px;
  font-weight: bolder;
  padding: 0.8em 3em;
  letter-spacing: 0.08em;
  position: relative;
  font-family: inherit;
  border-radius: 0.6em;
  overflow: hidden;
  transition: all 0.3s;
  line-height: 1.4em;
  border: 2px solid var(--red);
  background: linear-gradient(to right, rgba(218, 126, 126, 0.42) 1%, transparent 40%, transparent 60%, rgba(218, 126, 126, 0.283) 100%);
  color: var(--red);
  box-shadow: inset 0 0 10px rgba(194, 107, 107, 0.4), 0 0 9px 3px rgba(218, 126, 126, 0.1);
  z-index: 100;
}

button:hover {
  color: #971D1C;
  text-decoration: none; /* Eliminar subrayado al pasar el ratón */
  box-shadow: inset 0 0 10px rgb(126, 56, 56), 0 0 9px 3px rgba(155, 126, 218, 0.2);
}

button:before {
  content: "";
  position: absolute;
  left: -4em;
  width: 4em;
  height: 100%;
  top: 0;
  transition: transform 0.4s ease-in-out;
  background: linear-gradient(to right, transparent 1%, rgba(218, 126, 126, 0.1) 40%, rgba(218, 126, 126, 0.1) 60%, transparent 100%);
}

button:hover:before {
  transform: translateX(15em);
}

.acerca {
  --red: white;
  text-decoration: none; /* Eliminar subrayado */
  font-size: 15px;
  font-weight: bold;
  padding: 0.8em 3em;
  letter-spacing: 0.08em;
  position: relative;
  font-family: inherit;
  border-radius: 0.6em;
  overflow: hidden;
  transition: all 0.3s;
  line-height: 1.4em;
  border: 2px solid var(--red);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1%, transparent 40%, transparent 60%, rgba(232, 197, 197, 0.1) 100%);
  color: var(--red);
  box-shadow: inset 0 0 10px rgba(227, 208, 208, 0.4), 0 0 9px 3px rgba(229, 210, 210, 0.1);
}

.acerca:hover {
  color: #d59191;
  text-decoration: none; /* Eliminar subrayado al pasar el ratón */
  box-shadow: inset 0 0 10px rgb(173, 112, 112), 0 0 9px 3px rgba(170, 109, 109, 0.2);
}

.acerca:before {
  content: "";
  position: absolute;
  left: -4em;
  width: 4em;
  height: 100%;
  top: 0;
  transition: transform 0.4s ease-in-out;
  background: linear-gradient(to right, transparent 1%, rgba(218, 169, 169, 0.1) 40%, rgba(221, 170, 170, 0.1) 60%, transparent 100%);
}

.acerca:hover:before {
  transform: translateX(15em);
}

.acerca-de-mi {
  display: flex;
  align-items: center;
  height: 55vh;
  z-index: 50;
  color: white;
  background-color: #151515;
  margin-bottom: -5px;
}

.acerca-de-mi p {
  margin-top: 25px;
  text-align: center;
}

.titulo-servicios {
  color: #971D1C;
  font-weight: bold;
  margin-top: 100px;
  margin-bottom: 100px;
  width: 40%;
  float: left;
}

.linea {
  margin-top: 120px;
  margin-bottom: 80px;
  width: 60%;
  float: left;
  height: 2px; /* Grosor de la línea */
  background-color: #971D1C; /* Color de la línea */
}

.tabs {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px;
}

.tab-buttons {
  display: flex;
  justify-content: space-between;
}

.tab-button {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #151515;
  border-radius: 0;
  text-align: center;
  margin: 5px;
  transition: 0.3s all ease;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-button h4 {
  text-align: center;
  margin: 0; /* Elimina el margen predeterminado del h4 */
}

.tab-button:hover {
  color: tomato;
  border: 1px solid tomato;
}

.tab-button.active {
  background-color: #971D1C;
  color: #fff;
  border: none;
}

.tab-button.active:hover {
  background-color: tomato;
  color: #fff;
  border: none;
}

.tab-content {
  display: none;
  padding: 10px;
}

#tab1 {
  display: block;
}

/* Agregar estilos para hacer el contenido responsive */
@media screen and (max-width: 768px) {
  .tabs {
    padding: 10px;
  }
  .tab-buttons {
    flex-direction: column;
    align-items: center; /* Centra los botones horizontalmente */
  }
  .tab-button {
    width: 100%;
    margin: 5px 0;
    text-align: center; /* Centra el texto dentro de los botones */
  }
  .tab-button h4 {
    padding-left: 0;
    padding-right: auto;
    width: 100%;
  }
}
/* proyectos inicio */
.linea-titulo-proyectos {
  margin-top: 20px;
  padding-top: -10px;
  width: 60%;
  float: left;
  height: 2px; /* Grosor de la línea */
  background-color: #971D1C; /* Color de la línea */
}

.titulo-proyectos-inicio {
  text-align: right; /* Alinea el texto a la derecha */
  color: #971D1C;
  font-weight: bold;
  width: 40%;
}

.relativo2 {
  position: relative;
}

.proyectos-container {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se envuelvan en una nueva línea */
  justify-content: space-around; /* Distribuye los elementos a lo largo de la fila */
}

.proyecto-card {
  flex: 0 0 54vh; /* Asegura que cada proyecto ocupe aproximadamente un tercio del contenedor y tenga márgenes */
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 2vh;
  cursor: pointer;
  position: relative;
}

.proyecto-card img {
  width: 100%;
  min-height: 50vh;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s;
  border-radius: 2vh;
}

.proyecto-card:hover img {
  transform: scale(1.1);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* Fondo negro con opacidad */
  opacity: 0;
  transition: opacity 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.proyecto-card:hover .overlay {
  opacity: 1;
}

.proyecto-title {
  width: 100%;
  text-align: center;
  padding: 20px;
  margin: 0;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: bold;
  color: #151515;
}

/*separacion lineas*/
.marquee-container {
  margin-top: 10vh;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.marquee-container h1 {
  font-size: 100px;
}

.marquee {
  display: inline-block;
  animation: marquee 20s linear infinite;
  width: 100%;
}

.marquee-row {
  display: flex;
  align-items: center;
  animation: marquee 20s linear infinite;
  width: 100%;
}

.marquee-row:first-child {
  animation: marquee 20s linear infinite;
  width: 100%;
}

.marquee-row:nth-child(2) {
  animation: marqueeReverse 20s linear infinite;
  width: 100%;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes marqueeReverse {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
#wpforms-form-147 {
  width: 100%;
  text-align: left;
}

.texto-banner2 {
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.texto-banner2 h3 {
  text-align: left;
}

#wpforms-form-147 button {
  --red: #971D1C;
  width: 25vh;
  text-decoration: none; /* Eliminar subrayado */
  display: flex;
  justify-content: center; /* Alineación horizontal del texto en el centro del botón */
  align-items: center;
  font-size: 15px;
  font-weight: bolder;
  padding: 0.8em 3em;
  letter-spacing: 0.08em;
  position: relative;
  font-family: inherit;
  border-radius: 0.6em;
  overflow: hidden;
  transition: all 0.3s;
  line-height: 1.4em;
  border: 2px solid var(--red);
  background: linear-gradient(to right, rgba(218, 126, 126, 0.42) 1%, transparent 40%, transparent 60%, rgba(218, 126, 126, 0.283) 100%);
  color: var(--red);
  box-shadow: inset 0 0 10px rgba(194, 107, 107, 0.4), 0 0 9px 3px rgba(218, 126, 126, 0.1);
  z-index: 100;
}

#wpforms-form-147 button:hover {
  color: #971D1C;
  text-decoration: none; /* Eliminar subrayado al pasar el ratón */
  box-shadow: inset 0 0 10px rgb(126, 56, 56), 0 0 9px 3px rgba(155, 126, 218, 0.2);
}

#wpforms-form-147 button:before {
  content: "";
  position: absolute;
  left: -4em;
  width: 4em;
  height: 100%;
  top: 0;
  transition: transform 0.4s ease-in-out;
  background: linear-gradient(to right, transparent 1%, rgba(218, 126, 126, 0.1) 40%, rgba(218, 126, 126, 0.1) 60%, transparent 100%);
}

#wpforms-form-147 button:hover:before {
  transform: translateX(15em);
}

/*--------------------------------------*/
.relative {
  position: relative;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0);
  margin-top: -10vh;
}

.degradado2 {
  background: linear-gradient(to right, #971D1C, transparent);
  left: 0;
  top: 0;
  height: 111vh;
  width: 40%;
  z-index: -3;
  position: absolute;
}

.texto-proyectos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  z-index: 5;
  color: white;
}

.texto-proyectos h1 {
  font-weight: bolder;
  color: white;
}

.sombra-contenedor {
  position: relative;
  display: inline-block;
}

.sombra {
  display: block;
  animation: flotar 2s ease-in-out infinite;
}

.sombra-real {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 20px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
}

@keyframes flotar {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -30px);
  }
}
@media (max-width: 767px) { /* Cambia el valor de acuerdo a tu punto de quiebre */
  .texto-proyectos {
    display: block; /* Cambia a 'block' para que los elementos se apilen en pantallas pequeñas */
    margin: 10vh;
  }
}
/*------------------------------------------------------*/
/* Estilos para el botón toggle estilo switch */
.switch {
  /* Variables */
  --switch_width: 2em;
  --switch_height: 1em;
  --thumb_color: #e8e8e8;
  --track_color: #e8e8e8;
  --track_active_color: #888;
  --outline_color: #000;
  font-size: 24px; /* Ajusta el tamaño según tus necesidades */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(90deg);
  margin-left: 10vh;
  width: var(--switch_width);
  height: var(--switch_height);
  z-index: 999;
  top: 100px;
}

/* Media query para dispositivos con un ancho máximo de 767px */
@media (max-width: 767px) {
  .switch {
    margin-left: 1vh;
  }
}
/* Estilo del checkbox (visiblemente oculto) */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* El slider */
.switch .slider {
  box-sizing: border-box;
  border: 2px solid var(--outline_color);
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--track_color);
  transition: 0.15s;
  border-radius: var(--switch_height);
}

.switch .slider:before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  height: var(--switch_height);
  width: var(--switch_height);
  border: 2px solid var(--outline_color);
  border-radius: 100%;
  left: -2px;
  bottom: -2px;
  background-color: var(--thumb_color);
  transform: translateY(-0.2em);
  box-shadow: 0 0.2em 0 var(--outline_color);
  transition: 0.15s;
}

/* Levanta el pulgar al pasar el ratón sobre él */
.switch input:hover + .slider:before {
  transform: translateY(-0.3em);
  box-shadow: 0 0.3em 0 var(--outline_color);
}

/* Cambia el color del fondo cuando el checkbox está marcado */
.switch input:checked + .slider {
  background-color: var(--track_active_color);
}

/* Levanta el pulgar al pasar el ratón sobre él y está marcado */
.switch input:hover:checked + .slider:before {
  transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.3em);
  box-shadow: 0 0.3em 0 var(--outline_color);
}

/* Levanta el pulgar cuando está marcado */
.switch input:checked + .slider:before {
  transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.2em);
}

/* Eleva el pulgar cuando está marcado y enfocado */
.switch input:focus-visible + .slider {
  box-shadow: 0 0 0 2px var(--track_active_color);
}

/* Estilos generales para el botón toggle */
.toggle-label {
  position: relative;
  display: flex;
  align-items: center; /* Alinea verticalmente los elementos dentro de .toggle-label */
}

/* Estilo de los iconos izquierdo y derecho */
.toggle-icon-left,
.toggle-icon-right {
  margin: 30px; /* Ajusta el tamaño según tus necesidades */
  transform: rotate(90deg) scaleX(-1);
}

.switch i {
  font-size: larger;
}

/* Agrega esta clase para posicionar el botón fijo */
.fixed-switch {
  position: fixed;
  transition: opacity 0.5s ease, visibility 0.5s ease, position 0.5s ease; /* Añadido */
  top: 200px; /* Ajusta según tus necesidades */
  z-index: 999;
}

#colMd7, #colMd10 {
  position: relative;
  transition: opacity 0.5s ease, visibility 0.5s ease, position 0.5s ease; /* Añadido */
}

#colMd7 {
  opacity: 0;
  visibility: hidden;
}

#colMd10 {
  opacity: 0;
  visibility: visible;
}

/* Clase adicional para posición absolute cuando es necesario */
#colMd10.absolute {
  position: absolute;
}

#colMd7.absolute {
  position: absolute;
}

.container-proyecto {
  width: 100%;
  margin: 10vh 0vh 10vh 0vh;
  transition: all 0.5s ease;
  overflow: hidden; /* Para evitar que el contenido se desborde en el hover */
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.16);
  display: flex;
  justify-content: space-between;
  border-radius: 2vh;
}

.container-proyecto h2 {
  width: 98%;
  text-decoration: none;
  font-weight: bolder;
  font-size: 30px;
  font-family: "roboto";
  color: #151515;
  text-transform: uppercase;
  margin-top: 5vh;
  margin-bottom: 5vh;
  margin-left: 2%;
  transition: all 0.5s ease; /* Agregamos una transición para los cambios en el texto */
}

.container-proyecto h4 {
  color: #151515;
  width: 83%;
  height: auto;
  margin-right: 14%;
  font-size: 16px;
}

.textos-proyectos {
  width: 100%;
  margin-right: 15%;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  transition: all 0.5s ease; /* Agregamos una transición para la escala */
}

.container-proyecto a {
  text-decoration: none;
}

.container-proyecto img {
  border-radius: 2vh;
  width: 30%;
  height: 100%;
  margin: 5%;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.16);
  transition: all 0.5s ease; /* Agregamos una transición para los cambios en la imagen */
}

.relativo a {
  text-decoration: none;
}

.container-proyecto .grayscale {
  filter: grayscale(100%);
  border-color: transparent;
  transition: all 0.5s ease; /* Agregamos una transición para la escala */
}

.container-proyecto:hover {
  box-shadow: 15px 15px 25px rgba(0, 0, 0, 0.3);
}

.container-proyecto:hover img {
  transform: scale(1.1); /* Escalamos la imagen al 110% en el hover */
  filter: grayscale(0%);
}

.container-proyecto:hover h2 {
  color: transparent;
  background: linear-gradient(270deg, #D94645, #971D1C);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: slideTexture 2s linear infinite;
}

.container-proyecto:hover h4 {
  color: #971D1C;
}

/* Media query para dispositivos con un ancho máximo de 320px */
@media (max-width: 320px) {
  .container-proyecto {
    flex-wrap: wrap; /* Cambia la disposición a wrap */
    justify-content: space-around; /* Alinea los elementos con espacio entre ellos */
  }
  .container-proyecto img {
    width: 90%;
  }
}
/* Media query para dispositivos con un ancho máximo de 767px */
@media (max-width: 767px) {
  .container-proyecto {
    flex-wrap: wrap; /* Cambia la disposición a wrap */
    justify-content: space-around; /* Alinea los elementos con espacio entre ellos */
    width: 100%;
  }
  .container-proyecto h2, h4 {
    padding-left: 20vh;
  }
  .container-proyecto:hover {
    width: 100%;
  }
  .container-proyecto img {
    width: 45%;
  }
}
/*cuadricula*/
.img-proyecto2 {
  width: 100%;
  height: 30vh; /* Ajusta la altura al 100% para ocupar todo el contenedor */
  position: relative;
  border-radius: 2vh;
  overflow: hidden;
}

.img-proyecto2 img {
  min-width: 40vh;
  bottom: 50px;
  right: 50px;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.16);
  transition: all 0.5s ease;
}

.container-proyecto2 {
  margin: 2vh auto 2vh auto;
  transition: all 0.5s ease;
  overflow: hidden;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-radius: 2vh;
  padding: 3vh;
  height: 90%;
}

.container-proyecto2 h2 {
  width: 100%;
  text-decoration: none;
  font-weight: bolder;
  font-size: 23.5px;
  font-family: "roboto";
  color: #151515;
  text-transform: uppercase;
  transition: all 0.5s ease;
}

.container-proyecto2 p {
  color: #151515;
  width: 100%;
  height: auto;
  font-size: 16px;
}

.textos-proyectos2 {
  width: 100%;
  height: 50%;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  transition: all 0.5s ease;
}

.container-proyecto2 a {
  text-decoration: none;
}

.relativo a {
  text-decoration: none;
}

.container-proyecto2 .grayscale {
  filter: grayscale(100%);
  border-color: transparent;
  transition: all 0.5s ease;
}

.container-proyecto2:hover {
  box-shadow: 15px 15px 25px rgba(0, 0, 0, 0.3);
}

.container-proyecto2:hover img {
  transform: scale(1.1);
  filter: grayscale(0%);
}

.container-proyecto2:hover h2 {
  color: transparent;
  background: linear-gradient(270deg, #D94645, #971D1C);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: slideTexture 2s linear infinite;
}

.container-proyecto2:hover p {
  color: #971D1C;
}

/*-------------------------------------*/
.custom-computer-container {
  top: 50%;
  position: relative;
  width: 100%;
  min-height: 50vh;
  padding-top: 100vh; /* Ajustar esto para el aspect ratio deseado */
  margin-top: -100vh;
  overflow: hidden;
}

.custom-computer-container img {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
}

.custom-content {
  position: absolute;
  top: 17%;
  left: 12%;
  width: 75%;
  height: 45%; /* Ajustar esto según la cantidad de contenido */
  overflow: hidden;
  background-color: #151515;
}

/* Ajustar estos estilos según necesidades */
.custom-content img {
  width: 100%;
  height: auto;
  top: 0;
  z-index: 40;
}

#scrolling-image {
  animation: scrollAnimation 20s linear infinite;
}

@keyframes scrollAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-80%);
  }
}
/*-------------------------------------*/
.custom-computer-container2 {
  top: 50%;
  position: relative;
  width: 100%;
  min-height: 50vh;
  padding-top: 100vh; /* Ajustar esto para el aspect ratio deseado */
  margin-top: -100vh;
  overflow: hidden;
}

.custom-computer-container2 img {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
}

.custom-content2 {
  position: absolute;
  top: 13%;
  left: 27%;
  width: 45%;
  height: 75%; /* Ajustar esto según la cantidad de contenido */
  overflow: hidden;
  background-color: #151515;
}

/* Ajustar estos estilos según necesidades */
.custom-content2 img {
  min-width: 215vh;
  height: 75vh;
  top: 0;
  z-index: 40;
}

#scrolling-image2 {
  animation: scrollAnimation2 18s linear infinite; /* Ajusta la duración total a 18s (4s de movimiento x 5 repeticiones) */
}

@keyframes scrollAnimation2 {
  0%, 20% {
    transform: translateX(0);
  }
  24.5%, 36% {
    transform: translateX(-43vh); /* Mueve 17.5% del ancho total en cada repetición */
  }
  40.5%, 58.5% {
    transform: translateX(-86vh); /* Mueve 18% del ancho total en cada repetición */
  }
  63%, 76.5% {
    transform: translateX(-129vh); /* Mueve 13.5% del ancho total en cada repetición */
  }
  81%, 89% {
    transform: translateX(-171vh); /* Mueve 8% del ancho total al final de la animación */
  }
}
/* Estilos para el degradado */
.degradado3 {
  background: linear-gradient(to left, #971D1C, transparent);
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100vh;
  z-index: 25;
  margin-top: 5vh;
}

.fondo {
  top: 0;
  left: 0;
  width: 100%;
  height: 110vh;
  z-index: -50;
  position: fixed;
}

.fondo2 {
  top: 0;
  left: 0;
  width: 100%;
  height: 110vh;
  z-index: -50;
  position: absolute;
}

/* Estilos para el contenido */
.proyecto1-texto {
  position: relative;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  padding-left: 0; /* Eliminamos el margen izquierdo */
  margin-top: -5vh;
}

.proyecto1-texto h1 {
  font-weight: bolder;
  color: white;
  margin-left: 20px; /* Agregamos un margen izquierdo para separar el texto del borde de la pantalla */
}

.proyecto1-texto h3 {
  font-weight: bolder;
  color: white;
  margin-left: 20px; /* Agregamos un margen izquierdo para separar el texto del borde de la pantalla */
}

.proyecto1-texto h2 {
  font-weight: bolder;
  color: white;
  margin-left: 20px; /* Agregamos un margen izquierdo para separar el texto del borde de la pantalla */
}

.relativo-proyecto {
  position: relative;
  z-index: 50;
  background-color: white;
}

.negativo-proyecto {
  margin-top: -5vh;
}

.img-proyecto-uno {
  overflow: hidden;
  width: 100%;
  height: 70vh;
  border-radius: 2vh;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
}

.img-proyecto-uno img {
  width: 100%;
}

.horizontal-list {
  width: 100%;
  display: flex;
  justify-content: space-around;
  list-style: none;
}

.item {
  margin-top: 1vh;
  margin-right: 20px;
  padding-right: 20px;
  width: 10vh;
  height: auto;
  display: flex;
  align-items: center;
  border-right: #151515 solid 1px;
}

.item2 {
  margin-top: 1vh;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Estilo para el ícono */
.item i {
  position: relative; /* Para que el ícono sea un punto de referencia */
  cursor: pointer; /* Cambia el cursor al pasar el mouse sobre el ícono */
  color: #971D1C;
}

/* Estilo para el texto flotante */
.fa-css3:hover::after {
  content: "CSS3"; /* El texto que aparecerá al pasar el mouse */
  position: absolute;
  top: -60px; /* Ajusta la posición vertical según tu preferencia */
  left: 0; /* Ajusta la posición horizontal según tu preferencia */
  background: #000; /* Fondo del texto flotante */
  color: #fff; /* Color del texto */
  padding: 20px; /* Espacio alrededor del texto */
  border-radius: 5px; /* Bordes redondeados para el fondo */
  font-size: 12px; /* Tamaño del texto */
  opacity: 0; /* Inicialmente, el texto estará oculto */
  transition: opacity 0.3s; /* Transición para suavizar la aparición */
}

.fa-bootstrap:hover::after {
  content: "BOOTSTRAP"; /* El texto que aparecerá al pasar el mouse */
  position: absolute;
  top: -60px; /* Ajusta la posición vertical según tu preferencia */
  left: 0; /* Ajusta la posición horizontal según tu preferencia */
  background: #000; /* Fondo del texto flotante */
  color: #fff; /* Color del texto */
  padding: 20px; /* Espacio alrededor del texto */
  border-radius: 5px; /* Bordes redondeados para el fondo */
  font-size: 12px; /* Tamaño del texto */
  opacity: 0; /* Inicialmente, el texto estará oculto */
  transition: opacity 0.3s; /* Transición para suavizar la aparición */
}

.fa-js:hover::after {
  content: "JAVASCRIPT"; /* El texto que aparecerá al pasar el mouse */
  position: absolute;
  top: -60px; /* Ajusta la posición vertical según tu preferencia */
  left: 0; /* Ajusta la posición horizontal según tu preferencia */
  background: #000; /* Fondo del texto flotante */
  color: #fff; /* Color del texto */
  padding: 20px; /* Espacio alrededor del texto */
  border-radius: 5px; /* Bordes redondeados para el fondo */
  font-size: 12px; /* Tamaño del texto */
  opacity: 0; /* Inicialmente, el texto estará oculto */
  transition: opacity 0.3s; /* Transición para suavizar la aparición */
}

.fa-wordpress:hover::after {
  content: "WORDPRESS"; /* El texto que aparecerá al pasar el mouse */
  position: absolute;
  top: -60px; /* Ajusta la posición vertical según tu preferencia */
  left: 0; /* Ajusta la posición horizontal según tu preferencia */
  background: #000; /* Fondo del texto flotante */
  color: #fff; /* Color del texto */
  padding: 20px; /* Espacio alrededor del texto */
  border-radius: 5px; /* Bordes redondeados para el fondo */
  font-size: 12px; /* Tamaño del texto */
  opacity: 0; /* Inicialmente, el texto estará oculto */
  transition: opacity 0.3s; /* Transición para suavizar la aparición */
}

.fa-html5:hover::after {
  content: "HTML5"; /* El texto que aparecerá al pasar el mouse */
  position: absolute;
  top: -60px; /* Ajusta la posición vertical según tu preferencia */
  left: 0; /* Ajusta la posición horizontal según tu preferencia */
  background: #000; /* Fondo del texto flotante */
  color: #fff; /* Color del texto */
  padding: 20px; /* Espacio alrededor del texto */
  border-radius: 5px; /* Bordes redondeados para el fondo */
  font-size: 12px; /* Tamaño del texto */
  opacity: 0; /* Inicialmente, el texto estará oculto */
  transition: opacity 0.3s; /* Transición para suavizar la aparición */
}

/* Cuando se pasa el mouse sobre el ícono, el texto flotante se mostrará */
.item i:hover::after {
  opacity: 1;
}

.border-texto {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
  border-radius: 2vh;
  padding: 2vh;
}

.proposito-proyecto-uno {
  width: 100%;
  min-height: 50vh;
  position: relative;
  padding: 5vh;
  text-align: left;
}

.proposito-proyecto-uno h2 {
  font-weight: bolder;
  text-align: left;
}

.proposito-proyecto-uno p {
  font-weight: 300;
  text-align: left;
  font-size: larger;
}

.container-imguno {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.proposito-proyecto-uno2 {
  width: 100%;
  min-height: 50vh;
  display: flex;
  align-items: center;
}

.proposito-proyecto-uno2 img {
  width: 100%;
  height: auto;
}

/*------------------------------*/
.margen-arriba {
  padding-top: 15vh;
}

.titulo2-proyecto1 {
  color: #971D1C;
  font-weight: bolder;
}

.img-izq {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-height: 400px;
  margin-top: 10vh;
  border-radius: 2vh;
}

.img-izq img {
  border-radius: 2vh;
  min-width: 50vh; /* Ajustado para ocupar toda la anchura del contenedor */
}

.texto-drch {
  margin-top: 10vh;
  padding-left: 5vh;
  padding-right: 5vh;
}

.texto-drch h2 {
  font-weight: bolder;
}

.texto-drch h3 {
  font-weight: 300;
  margin-top: 5vh;
  font-size: larger;
  margin-bottom: -25px;
  font-family: "roboto";
}

.linearoja {
  width: 65%;
  float: right;
  height: 2px;
  background-color: #971D1C;
  margin-top: 25px;
}

.titulo-otrosproyectos {
  width: 84%;
}

.linearoja2 {
  width: 55%;
  float: right;
  height: 2px;
  background-color: #971D1C;
  margin-top: 25px;
}

/*-------------------------------------*/
.img-contacto {
  z-index: 2;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: 5vh;
}

.img-contacto h2 {
  font-weight: bold;
}

.texto-contacto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 5;
  margin-bottom: 50px;
  margin-top: 5vh;
}

.borde-contacto {
  border-radius: 2vh;
  padding: 25px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}

.texto-contacto h1, h3, h5 {
  margin-top: 15px;
  font-weight: bolder;
}

.noflex {
  flex: none;
}

@media (max-width: 767px) {
  .img-contacto img {
    display: none;
  }
  .texto-contacto {
    padding: 25px;
  }
}
/*----------- acerca de mi -----------*/
.none {
  width: 100%;
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  flex-direction: column;
}

@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-80px); /* Ajusta la distancia que quieres que se mueva hacia arriba */
  }
  100% {
    transform: translateY(0);
  }
}
.img-bannerX {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  z-index: 5;
}

.img-bannerX img {
  width: 100%;
  max-height: 100vh;
  position: relative;
  animation: moveUpDown 4s infinite; /* Ajusta la duración de la animación según sea necesario */
}

.degradadoX {
  background: linear-gradient(to right, #971D1C, transparent);
  left: 0;
  top: 0;
  height: 111vh;
  width: 50%;
  z-index: 1;
  position: absolute;
}

.titulo-profesiones {
  width: 100%;
  color: #971D1C;
  font-weight: bolder;
  font-size: 40px;
  padding-top: 10vh;
  padding-bottom: 5vh;
}

.profesiones h3 {
  color: #971D1C;
  font-weight: 500;
}

.profesiones p {
  font-weight: 500;
  font-size: x-large;
}

.profesiones-linea {
  border-bottom: solid #971D1C;
  height: 1px;
  margin-top: 80px;
}

.profesiones-anio h2 {
  margin-top: 25px;
  font-size: 60px;
  font-weight: 300;
}

.experiencia p {
  font-weight: 500;
}

.experiencia h2 {
  color: #971D1C;
  font-weight: bolder;
  font-size: 40px;
  margin-bottom: 5vh;
}

.skills1 h2 {
  color: #971D1C;
  font-weight: bolder;
  font-size: 40px;
  margin-bottom: 5vh;
}

.skills2 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

.columna1 .columna2 p {
  font-size: x-large;
}

.titulo-rs {
  color: #971D1C;
  font-weight: bold;
  font-size: 40px;
  width: 100%;
  text-align: center;
}

.img-rs {
  position: relative;
  overflow: hidden;
  width: 170vh;
  height: 50vh;
  border-radius: 2vh;
}

.rs-imagen {
  border-radius: 2vh;
  top: -60vh;
  left: -5vh;
  z-index: 999;
  position: relative;
  min-width: 175vh;
}

.iconos-rs {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  font-size: 25px;
  margin-bottom: 50px;
}

.iconos-rs a {
  margin: 10px;
  text-align: center;
}

@media (max-width: 768px) {
  .iconos-rs {
    flex-direction: column;
    align-items: center;
  }
}
.iconos-rs a {
  color: #151515;
}

.iconos-rs a:hover {
  color: #971D1C;
}

/*-------------------------------------*/
.card1 {
  width: 100%;
  height: auto;
  flex: 1;
}

footer {
  background-color: #151515;
  width: 100%;
  margin-bottom: -20px;
}

footer i {
  color: white;
}

.footer-img {
  max-width: 10vh;
  height: auto;
  margin-top: 5vh;
  transition: all 1s ease;
}

.footer-img img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1) grayscale(100%) contrast(1000%) hue-rotate(0deg);
  transition: all 1s ease;
}

.footer-img img:hover {
  filter: brightness(100%) invert(0) hue-rotate(12deg) contrast(100%);
}

.footer-txt1 {
  color: white;
  margin-top: 5vh;
}

.footer-txt2 p {
  margin-top: 1vh;
  color: white;
  font-size: small;
}

.direcciones {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh; /* opcional */
  flex-wrap: nowrap;
  font-size: x-large;
}

@media (max-width: 767px) {
  @keyframes scrollAnimation2 {
    0%, 20% {
      transform: translateX(0);
    }
    24.5%, 36% {
      transform: translateX(-20vh); /* Mueve 17.5% del ancho total en cada repetición */
    }
    40.5%, 58.5% {
      transform: translateX(-40vh); /* Mueve 18% del ancho total en cada repetición */
    }
    63%, 76.5% {
      transform: translateX(-60vh); /* Mueve 13.5% del ancho total en cada repetición */
    }
    81%, 89% {
      transform: translateX(-80vh); /* Mueve 8% del ancho total al final de la animación */
    }
  }
  .card1 {
    border: #dcdcdc solid 1px;
  }
  .img-contacto {
    min-width: 100%;
    text-align: center;
  }
  .img-contacto h4 {
    width: 60vh;
    margin-left: -17.5vh;
    text-align: left;
  }
  .texto-contacto {
    margin-top: 5px;
  }
  .custom-content2 {
    top: 15%;
    height: 70%;
  }
  .custom-content2 img {
    min-width: 100vh;
    height: 32vh;
    top: 1.5vh;
    z-index: 38;
  }
  .proyecto1-texto {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 50vh;
    margin-top: 0vh;
  }
  .custom-computer-container2 {
    top: 50%;
    position: relative;
    width: 100%;
    min-height: auto;
    padding-top: 50vh; /* Ajustar esto para el aspect ratio deseado */
    margin-top: -40vh;
    overflow: hidden;
  }
  .custom-computer-container {
    margin-top: -40vh;
    margin-bottom: -15vh;
    padding-top: 55vh;
  }
  .proposito-proyecto-uno {
    margin-top: -60vh;
  }
  .proposito-proyecto-uno2 {
    display: none;
  }
  .container-proyecto h2 {
    padding-left: 2vh;
    font-size: 23.5px;
  }
  .container-proyecto img {
    min-width: 90%;
  }
  .textos-proyectos h4 {
    display: none;
  }
  .textos-proyectos h2 {
    min-width: 100%;
    text-align: left;
  }
  .textos-proyectos {
    min-width: 90%;
    margin-left: 5%;
  }
  .container-proyecto {
    width: 80%;
    margin-left: 13%;
    margin-right: auto;
  }
  .sombra {
    margin-top: 25px;
  }
  .texto-proyectos {
    min-width: 100%;
    margin-left: 0;
  }
  .texto-proyectos h1 {
    color: black;
    margin-left: 15px;
    margin-top: -15px;
  }
  .iconos-rs {
    display: flex;
    justify-content: flex-start;
    align-items: start;
    flex-wrap: wrap;
    font-size: 20px;
    margin-bottom: 50px;
  }
  .img-rs {
    max-width: 100%;
    height: 50vh;
    border-radius: 0vh;
  }
  .rs-imagen {
    max-width: 100%;
  }
  .img-rs img {
    max-width: 100%;
    margin-left: -100vh;
    margin-top: -5vh;
  }
  .skills2 {
    display: flex;
    flex-direction: column;
  }
  .columna1 {
    min-width: 100%;
    margin-left: 15px;
  }
  .columna1 p {
    font-size: x-large;
  }
  .columna2 p {
    font-size: x-large;
  }
  .columna2 {
    min-width: 100%;
    margin-left: 15px;
    margin-top: 30px;
  }
  .experiencia p {
    font-size: x-large;
  }
  .profesiones-linea {
    display: none;
  }
  .profesiones h3 {
    padding-top: 25px;
  }
  .profesiones-anio {
    border-bottom: #971D1C solid 2px;
    padding-bottom: 25px;
  }
  .acerca-de-mi h2 {
    margin-top: 0px;
  }
  .img-bannerX {
    margin-top: 15vh;
    padding-top: 25px;
    max-height: 45vh;
  }
  .degradado {
    height: 140vh;
  }
  .degradado3 {
    height: 140vh;
  }
  .none {
    color: #151515;
  }
  .positivo {
    margin-top: 15vh;
  }
  .positivo h1 {
    min-width: 100%;
  }
  .icono img {
    margin-left: 0;
  }
  .video {
    display: none;
  }
  .img-banner {
    display: none;
  }
  .contenedor-video {
    max-height: 50vh;
  }
  .texto-banner {
    max-height: 50vh;
  }
  .linea {
    display: none;
  }
  .titulo-servicios {
    min-width: 100%;
    margin-left: 15px;
    border-bottom: #971D1C solid 2px;
    padding-bottom: 30px;
  }
  .linea-titulo-proyectos {
    display: none;
  }
  .titulo-proyectos-inicio {
    min-width: 100%;
    margin-right: 15px;
    margin-top: -70px;
    border-bottom: #971D1C solid 2px;
    padding-bottom: 30px;
  }
  .tabs {
    margin-top: -50px;
  }
  .nav-link {
    margin: 25px;
  }
}/*# sourceMappingURL=style.css.map */