.hero-section{
  background-image: url(../fotos-marketing/pexels-lukas-574071.webp);
  padding-left: 50px;
  padding-top: 100px;
  height: 200px;
  background-attachment: fixed; 
  background-repeat: no-repeat; 
  background-size: cover;
}

.hero-section > .link{
  background-color: #cea135;
  width: 300px;
  height: auto;
  border-radius: 7px;
}


html {
  scroll-behavior: smooth;
}

.animated-background {
  margin: 0;
  padding: 0;
  background-color: rgb(17 17 37);
  z-index: 1;
}


.animation {
  width: 100%;
  height: 30vh;
}


@keyframes girarIzquierda {
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes girarDerecha {
  100% {
    transform: rotate(360deg);
  }
}

.azul-oscuro {
  animation: girarIzquierda 39s linear infinite;
}

.azul-clarito {
  animation: girarDerecha 26s linear infinite;
}

.beige-oscuro {
  animation: girarIzquierda 40s linear infinite;
}

.beige-clarito {
  animation: girarDerecha 46s linear infinite;
}

.presupuesto {
  height: 70px;
  background-color: rgb(17 17 37);
  margin: 0;
  font-size: 2em;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.presupuesto a {
  text-decoration: none;
  color: white;
}

.por-que-nosotros{
  background-color: rgb(17 17 37);
  color: white;
  text-align: center;
  height: auto;
  padding-top: 20px;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.por-que-nosotros h2 {
  padding: 10px;
  font-weight: 100;
}

.nuestro-potencial {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  background: linear-gradient(rgb(17 17 37), 10%, rgb(192 192 255));
  grid-gap: 1px;
  justify-content:space-between;
  text-align: center;
  align-items: center;
  padding-top: 2px;
  height: 210px;

}

.nuestro-potencial > .column {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  justify-content: center;
  align-items: center;
  border-color: black;
  border-radius: 3px;
  border-style: solid;
  height: 200px;
}

.nuestro-potencial > .column p{
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(17 17 37);
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
} 

.nuestro-potencial > .column i{
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(17 17 37);
} 

.nuestro-potencial > .column:hover {
  color: rgb(121 129 210);
  letter-spacing: 2px;
    
}


.contenedor {
  margin-top: 2px;
  padding-top: 20px;
  height: 800px;
  background-color:  rgb(17 17 37);
}

.contenedor > .titulo {
  font-size: 2em;
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
  color: #cbcbcb;
}

.contenedor > .contenedor-izquierdo {
  color: #cbcbcb;
  background-color:  rgb(17 17 37);
  box-shadow: 10px 13px 35px 19px rgb(0 0 0 / 78%);
  margin: 0;
  font-size: 1em;
  width: 50%;
  height: 80px;
  display: flex;
  text-align: center;
  align-items: center;
  padding-left: 20px;
}

.contenedor > .contenedor-derecho {
  font-size: 1em;
  color: #cbcbcb;
  box-shadow: 10px 13px 35px 19px rgb(0 0 0 / 78%);
  background-color: rgb(17 17 37);
  margin: 0;
  justify-content: right;
  display: flex;
  height: 80px; 
  width: 100%;
  align-items: center;
  padding-right: 20px;
}


.contenedor > .contenedor-izquierdo{
  animation: mover-izquierda-derecha 5s;
  animation-fill-mode: forwards;
}

@keyframes mover-izquierda-derecha {
  from{
    transform: translateX(-85px);
  }

  to {
    transform: translateX(85px);
  }
}

.contenedor > .contenedor-derecho {
  animation: mover-derecha-izquierda 5s;
  animation-fill-mode: forwards;
}

@keyframes mover-derecha-izquierda {
  from{
    transform: translateX(100px);
  }

  to {
    transform: translateX(-110px);
  }
}

.contenedor-derecho:hover , .contenedor-izquierdo:hover {
  color: gold;
  font-size: 1em;
  letter-spacing: 6px;
}

/* Overlay oscuro */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(17 17 37 / 70%);
  z-index: 999;
  display: none;
}

/* Popup */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: #fff;
  border-radius: 16px;
  max-width: 600px;
  width: 90%;
  padding: 30px;
  box-shadow: 0 15px 30px rgb(0 0 0 / 25%);
  z-index: 1000;
  display: none;
  transition: all 0.3s ease;
  animation: popupFadeIn 0.3s ease forwards;
}

.popup-content {
  position: relative;
}

/* Botón cerrar */
.close-btn {
  position: absolute;
  top: -15px;
  right: -15px;
  background: #111125;
  color: #fff;
  font-size: 1.5rem;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  text-align: center;
  line-height: 35px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
}

/* Animación de entrada */
@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -55%) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Responsive */
@media (max-width: 500px) {
  .presupuesto {
  font-size: 1.6em;
  }
  .popup {
    padding: 20px;
  }

  .close-btn {
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
    line-height: 30px;
  }
}