/* Header y navegación */

.section {
  background: url('../images/gradient.svg') no-repeat;
  background-size: cover;
  animation: olas 9s ease-in-out infinite;
  height: 622px;
  position: relative;
  z-index: 1;
}

.container-header {
  display: flex;
  height: 100%;
  align-items: flex-start;
  padding-top: 120px;
}

.sticky-top{
  background-color: #ffffff;
}
.logo-header{
  height: 85px;
  width: auto;
}
.redes-header{
  gap: 25px;
}
.redes-header img{
  height: 25px;
  width: auto;
}

/* Header base */
.sticky-top {
  background-color: #ffffff;
  transition: all 0.3s ease;
  padding: 10px 0; /* espacio superior e inferior */
}

/* Logo base */
.logo-header {
  height: 85px;
  width: auto;
  transition: height 0.3s ease;
}

/* Al hacer scroll */
.sticky-top.scrolled {
  padding: 0px 0; /* menos padding = header más bajo */
  box-shadow: 0px 4px 10px 0px #00000033;
}

.sticky-top.scrolled .logo-header {
  height: 62px; /* logo más pequeño */
}