/* ========================================
   RESET GENERAL
======================================== */

* {
  margin: 0;
  padding: 0;

  box-sizing: border-box;

  font-family: "Montserrat", sans-serif;
}

html,
body {
  width: 100%;

  overflow-x: hidden;

  background: #000;
}

/* ========================================
   HEADER
======================================== */

.header {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  display: flex;
  justify-content: center;

  z-index: 9999;

  will-change: transform;
}

/* ========================================
   CONTENEDOR PRINCIPAL
======================================== */

.header-overlay {
  width: 100%;
  height: 105px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ========================================
   CONTENEDOR IZQUIERDO
======================================== */

.contenedor-izquierdo {
  width: 280px;
  height: 105px;

  display: flex;
  align-items: center;

  padding-left: 108px;

  flex-shrink: 0;
}

/* ========================================
   LOGO
======================================== */

.logo {
  display: flex;
  align-items: center;
}

.logo a {
  display: flex;
  align-items: center;

  text-decoration: none;
}

.logo img {
  width: 165px;
  height: auto;

  display: block;

  object-fit: contain;

  backface-visibility: hidden;
}

/* ========================================
   CONTENEDOR DERECHO
======================================== */

.contenedor-derecho {
  position: relative;

  width: 960px;
  height: 105px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-left: 150px;
  padding-right: 35px;

  overflow: hidden;

  flex-shrink: 0;

  contain: layout paint;
}

/* ========================================
   SVG FONDO
======================================== */

.contenedor-derecho::before {
  content: "";

  position: absolute;

  inset: 0;

  background-image: url("data:image/svg+xml,%3Csvg width='960' height='105' viewBox='0 0 960 105' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40.2424 63L0 0H960V105H109.827L67.3487 38.5L40.2424 63Z' fill='url(%23paint0_linear_197_2)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_197_2' x1='480' y1='0' x2='479.979' y2='105' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23274C77'/%3E%3Cstop offset='1' stop-color='%23315983'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 1;

  pointer-events: none;

  transform: translateZ(0);
}

/* ========================================
   CONTENIDO SOBRE SVG
======================================== */

.navbar,
.social-icons {
  position: relative;

  z-index: 5;
}

/* ========================================
   NAVBAR
======================================== */

.navbar {
  display: flex;
  align-items: center;
}

.navbar ul {
  display: flex;
  align-items: center;

  gap: 42px;

  list-style: none;
}

.navbar ul li {
  display: flex;
  align-items: center;
}

.navbar ul li a {
  text-decoration: none;

  color: #e7ecef;

  font-size: 14px;
  font-weight: 700;

  letter-spacing: 1px;

  white-space: nowrap;

  transition: color 0.25s ease;

  backface-visibility: hidden;
}

.navbar ul li a:hover {
  color: #a3cef1;
}

/* ========================================
   REDES SOCIALES
======================================== */

.social-icons {
  display: flex;
  align-items: center;

  gap: 14px;

  padding: 35px;
}

.social-icons a {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  text-decoration: none;

  background: rgba(255, 255, 255, 0.08);

  color: #e7ecef;

  font-size: 15px;

  transition:
    background 0.25s ease,
    transform 0.25s ease;

  transform: translateZ(0);

  backface-visibility: hidden;
}

.social-icons a:hover {
  background: rgba(255, 255, 255, 0.18);

  transform: translateY(-2px);
}

/* ========================================
   HEADER BASE
======================================== */

.header {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 9999;

  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    backdrop-filter 0.35s ease;
}

/* ========================================
   CONTENEDOR PRINCIPAL
======================================== */

.header-overlay {
  width: 100%;
  height: 105px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  transition: 0.35s ease;
}

/* ========================================
   HEADER SCROLL
======================================== */

.header.scrolled {
  background: #e7ecef;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  backdrop-filter: blur(10px);
}

/* ========================================
   HEADER IZQUIERDA
======================================== */

.contenedor-izquierdo {
  transition: 0.35s ease;
}

/* ========================================
   HEADER DERECHA
======================================== */

.contenedor-derecho {
  transition: 0.35s ease;
}

/* ========================================
   SVG FONDO NORMAL
======================================== */

.contenedor-derecho::before {
  transition:
    opacity 0.35s ease,
    background 0.35s ease;
}

/* ========================================
   SVG AL HACER SCROLL
======================================== */

.header.scrolled .contenedor-derecho::before {
  opacity: 0;
}

/* ========================================
   LOGO
======================================== */

.logo img {
  width: 165px;

  transition: 0.35s ease;
}

/* ========================================
   MENU
======================================== */

.navbar ul li a {
  transition: color 0.3s ease;
}

/* ========================================
   ICONOS
======================================== */

.social-icons a {
  transition:
    color 0.3s ease,
    background 0.3s ease;
}

/* ========================================
   CAMBIO COLOR MENU
======================================== */

.header.scrolled .navbar ul li a {
  color: #274c77;
}

/* ========================================
   CAMBIO COLOR ICONOS
======================================== */

.header.scrolled .social-icons a {
  color: #274c77;

  background: rgba(39, 76, 119, 0.08);
}

/* ========================================
   HOVER
======================================== */

.header.scrolled .navbar ul li a:hover,
.header.scrolled .social-icons a:hover {
  color: #6096ba;
}

/* ========================================
   ANIMACION
======================================== */

.header.scrolled {
  animation: headerAnimation 0.35s ease;
}

@keyframes headerAnimation {
  from {
    opacity: 0;

    transform: translateY(-15px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}