/* Inicio Header */
.header {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  pointer-events: none;
  overflow: hidden;
}

.header > * {
  pointer-events: auto;
}

.container-header {
  width: 100%;
  transform: translateZ(0px);
  color: rgba(255, 255, 255, 0.98);
  background-color: transparent;
  transition: height 0.3s ease-in 0s;
}

.container-header.scroll-down {
  width: 100%;
  --s2-one-hub-navigation-top-bar-height: calc(
    16px + var(--textappearances-copy150-lineheight) + 12px + 0px
  );
  height: var(--s2-one-hub-navigation-top-bar-height);
  transform: translateZ(0px);
  color: rgba(255, 255, 255, 0.98);
  background-color: transparent;
  transition: height 0.3s ease-in 0s;
}

.one-color .container-header {
  background-color: rgba(255, 255, 255, 0.98);
}

@media (min-width: 560px) {
  .container-header.scroll-down {
    --s2-one-hub-navigation-top-bar-height: calc(
      16px + var(--textappearances-copy150-lineheight) + 12px + 0px
    );
  }
}

.container-header.scroll-down .box-line {
  width: 100%;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  pointer-events: none;
  position: absolute;
  top: 0px;
  transform: translateY(-32px);
  transition: transform 0.3s ease-in 0s;
}

@media (min-width: 560px) {
  .container-header.scroll-down .box-line {
    transform: translateY(-50px);
  }
}

.grid-header {
  display: grid;
  max-width: 2560px;
  grid-template-columns: repeat(24, 1fr);
  grid-template-areas: 'a0 a0 a0 a0 a0 a0 a0 a0 a0 a0 a0 a0 a0 a0 a0 a0 a0 a0 a0 a0 a0 a0 a0 a0';
  margin: auto;
}

.grid-header > div {
  grid-area: a0 / a0 / a0 / a0;
  overflow: hidden;
}

.container-header.alternative-scroll {
  background-color: rgba(255, 255, 255, 0.98);
}

.box-header {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  padding: var(--size-dynamic0020) 0;
}

.header .container-button {
  display: flex;
  padding-left: var(--size-grid001);
  overflow: hidden;
}

.header .button-menu {
  cursor: pointer;
  display: block;
  width: auto;
  height: 24px;
  text-align: left;
  font-size: 0px;
  color: rgba(255, 255, 255, 0.98);
  border-width: 0px;
  border-style: initial;
  border-color: initial;
  border-image: initial;
  padding: 0px;
  margin: 0px;
  background: none;
}

.header.one-color .button-menu {
  color: var(--color-main);
}

.header.one-color .button-menu:hover,
.header.one-color .button-menu:focus {
  color: var(--color-main-hover);
  outline: 0px;
}

.header .button-menu:hover,
.header .button-menu:focus {
  color: var(--color-main-hover);
  outline: 0px;
}

.header .alternative-scroll .button-menu {
  color: var(--color-main);
}

.header .container-icon {
  display: inline-block;
}

.header .container-text {
  display: inline-block;
  vertical-align: text-bottom;
  height: 100%;
  box-sizing: border-box;
  padding-top: 1px;
  padding-left: 10px;
  max-width: calc(25vw);
  overflow: hidden;
}

.header .text-menu {
  font-family: var(--font-family-text, vw-text, Helvetica, Arial, sans-serif);
  color: inherit;
  word-break: inherit;
  font-weight: bold;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.04px;
  margin: -1.5px 0px 1.5px;
}

.box-line {
  width: 100%;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  pointer-events: none;
  position: absolute;
  top: 0px;
  transform: translateY(
    calc(16px + var(--textappearances-copy150-lineheight) + 12px + 0px - 16px + 1px)
  );
  transition: transform 0.3s ease-in 0s;
}

@media (min-width: 560px) {
  .box-line {
    transform: translateY(
      calc(16px + var(--textappearances-copy150-lineheight) + 12px + 0px - 20px + 1px)
    );
  }
}

@media (min-width: 960px) {
  .box-line {
    transform: translateY(
      calc(16px + var(--textappearances-copy150-lineheight) + 12px + 0px - 24px + 1px)
    );
  }
}

.grid-box-line {
  display: grid;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  --logo-size: 32px;
  --margin-size: 8px;
  grid-template-columns: auto max-content auto;
}

@media (min-width: 960px) {
  .grid-box-line {
    --logo-size: 48px;
    --margin-size: 12px;
    grid-template-columns: calc(var(--size-grid016) - var(--margin-size)) max-content auto;
  }
}

@media (min-width: 560px) {
  .grid-box-line {
    --logo-size: 40px;
    --margin-size: 10px;
    grid-template-columns: auto max-content auto;
  }
}

.grid-box-line::before,
.grid-box-line::after {
  content: '';
  height: 2px;
  background: rgba(255, 255, 255, 0.98);
}

.one-color .grid-box-line::before,
.one-color .grid-box-line::after,
.alternative-scroll .grid-box-line::before,
.alternative-scroll .grid-box-line::after {
  background: var(--color-main);
}

.grid-box-line .container-icon {
  pointer-events: auto;
  margin: 0 10px;
}

.grid-box-line .link-icon {
  text-decoration: none;
}

.grid-box-line svg {
  fill: rgba(255, 255, 255, 0.98);
  width: var(--logo-size);
  height: var(--logo-size);
}

.one-color .grid-box-line svg,
.alternative-scroll .grid-box-line svg {
  fill: var(--color-main);
}

/* Fin Menu */

/* Logo */

.container-logo {
  margin-right: var(--size-grid001);
  display: flex;
}

.container-logo img {
  width: var(--size-dynamic0300);
}
