/* =========================================================
   CONTAINER GENERAL (Fondo y posición fija)
========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #F2F1EC; /* Color de fondo exacto de Figma */
  z-index: 9999;
  transition: transform 0.45s ease;
}

/* =========================================================
   ESTRUCTURA DE REJILLA (Aquí está el secreto del calco)
========================================================= */
.site-header__inner {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  
  /* Aumentamos drásticamente el padding-top (de 42px a 74px).
     Esto bajará el Logo, el Menú y el Símbolo al mismo tiempo de forma homogénea.
  */
  padding: 74px 30px 34px 32px; 

  display: grid;
  grid-template-columns: 236px 1fr 108px;
  align-items: start;
  column-gap: 54px;
}

/* =========================================================
   LOGO (IZQUIERDA) - Ancho exacto de Figma: 236px
========================================================= */
.site-header__brand {
  display: block;
  width: 236px;
  height: auto;
  margin-top: 4px; /* Pequeño ajuste para alinear la línea base con el texto */
}

.site-header__brand img {
  display: block;
  width: 236px;
  height: auto;
}

/* =========================================================
   NAV CENTRAL (Distribución de sub-bloques)
========================================================= */
.site-nav {
  /* Mantenemos este margen controlado para que la línea base 
     del texto del menú coincida exactamente con la del logotipo.
  */
  margin-top: 2px; 

  display: grid;
  grid-template-columns: 100px 126px 63px 80px;
  column-gap: 64px;
  align-items: start;
  font-family: var(--font-sans);
}

/* Las dos columnas de enlaces verticales */
.site-nav__col {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Separación vertical entre los links de una misma columna */
}

/* Estilo general de los enlaces de texto */
.site-nav a {
  font-family: var(--font-sans);
  font-size: 15px; /* Tamaño visual de tu Figma */
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  text-decoration: none;
  display: block;
}

/* Botón/Enlace de Contacto */
.site-nav__contact {
  display: block;
  font-weight: 400;
}

/* Selector de Idiomas */
.site-nav__langs {
  display: flex;
  gap: 16px;
}

.site-nav__langs a {
  font-weight: 400;
}

/* =========================================================
   SÍMBOLO (DERECHA) - Medidas exactas de tu inspector de Figma
========================================================= */
.site-header__symbol {
  width: 108px;
  height: 112.27px;
  display: block;
  
  /* Como aumentamos el espacio arriba, le damos un margen negativo 
     para que el círculo siga flotando perfectamente sobre la imagen inferior.
  */
  margin-top: -16px; 
}

.site-header__symbol img,
.site-header__symbol svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Ocultar barra al hacer scroll down */
.site-header.is-hidden {
  transform: translateY(-100%);
}