/* ==========================================================
HEADER.CSS
Sistema global de navegación.

Contiene:
- Header fijo
- Logo
- Menú desktop
- Dropdown
- Menú móvil
- Estados de apertura

No incluir:
- Hero
- Secciones
- Botones generales
- Footer
========================================================== */

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

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    backdrop-filter 0.25s ease;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(223, 229, 236, 0.85);
  box-shadow: 0 8px 30px rgba(16, 42, 77, 0.08);
  backdrop-filter: blur(14px);
}

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

.header-inner {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

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

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand img {
  width: auto;
  height: 40px;
  object-fit: contain;
}

/* ==========================================================
NAVEGACIÓN DESKTOP
========================================================== */

.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav > ul > li {
  position: relative;
}

.main-nav a,
.dropdown-toggle {
  color: var(--sea-blue-950);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

/* enlaces principales */

.main-nav > ul > li > a,
.dropdown-toggle {
  position: relative;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
}

/* línea inferior */

.main-nav > ul > li > a::after,
.dropdown-toggle::after {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--sea-green-600);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.2s ease;
}

.main-nav > ul > li > a:hover::after,
.main-nav > ul > li > a.is-active::after,
.dropdown-toggle:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ==========================================================
DROPDOWN DESKTOP
========================================================== */

.dropdown-toggle {
  border: 0;

  background: transparent;

  cursor: pointer;
}

.dropdown-menu {
  position: absolute;

  top: calc(100% + 12px);

  left: 50%;

  width: 300px;

  padding: 10px;

  background: var(--sea-white);

  border: 1px solid var(--sea-line);

  border-radius: 18px;

  box-shadow: var(--shadow-lg);

  opacity: 0;

  visibility: hidden;

  transform: translate(-50%, 10px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}

.nav-dropdown.is-open .dropdown-menu {
  opacity: 1;

  visibility: visible;

  transform: translate(-50%, 0);
}

.dropdown-menu a {
  display: block;

  padding: 11px 13px;

  border-radius: 10px;
}

.dropdown-menu a:hover {
  color: var(--sea-blue-800);

  background: var(--sea-blue-100);
}

.dropdown-separator {
  height: 1px;

  margin: 8px 14px;

  background: var(--sea-line);
}

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

.nav-login {
  color: var(--sea-blue-800) !important;
}

.nav-cta {
  min-height: 44px;

  padding: 11px 18px;

  color: #fff !important;
}

/* ==========================================================
BOTÓN MENÚ MÓVIL
========================================================== */

.menu-toggle {
  display: none;

  width: 44px;

  height: 44px;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 4px;

  border: 1px solid var(--sea-line);

  border-radius: 12px;

  background: var(--sea-white);

  cursor: pointer;
}

.menu-toggle span {
  display: block;

  width: 20px;

  height: 2px;

  background: var(--sea-blue-950);

  transition: 0.2s ease;
}

/* animación X */

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}



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

@media(max-width:1024px){

  :root{
    --header-height:72px;
  }

  .site-header{
    height:var(--header-height);
    background:var(--sea-white);
  }

  .brand img{
    height:48px;
  }

  .menu-toggle{
    display:flex;
    position:relative;
    z-index:1200;
  }


  .main-nav{

    position:fixed;
    inset:0;
    z-index:1100;

    display:block;

    width:100%;
    height:100dvh;

    padding:
      calc(var(--header-height) + 20px)
      24px
      40px;

    overflow-y:auto;

    background:var(--sea-white);

    opacity:0;
    visibility:hidden;

    transform:translateY(-15px);

    transition:
      opacity .25s ease,
      transform .25s ease,
      visibility .25s ease;

  }


  .main-nav.is-open{

    opacity:1;
    visibility:visible;

    transform:translateY(0);

  }


  .main-nav>ul{

    display:block;

  }


  .main-nav>ul>li{

    border-bottom:1px solid var(--sea-line);

  }


  .main-nav>ul>li>a,
  .dropdown-toggle{

    display:flex;

    width:100%;

    min-height:54px;

    align-items:center;

    justify-content:space-between;

  }


  /* SUBMENUS */

  .dropdown-menu{

    position:static!important;

    display:block;

    width:100%;

    max-height:0;

    margin:0;

    padding:0;

    overflow:hidden;

    background:transparent;

    border:0;

    border-radius:0;

    box-shadow:none;

    opacity:1;

    visibility:visible;

    transform:none!important;

    transition:
      max-height .3s ease,
      padding .3s ease;

  }


  .nav-dropdown.is-open .dropdown-menu{

    max-height:500px;

    padding:
      8px 0
      14px;

  }


  .dropdown-menu a{

    display:flex;

    width:100%;

    min-height:42px;

    align-items:center;

    padding:
      10px 18px;

    color:var(--sea-blue-800);

    font-size:.82rem;

    font-weight:700;

    border-radius:10px;

  }


  .dropdown-menu a:hover{

    background:var(--sea-blue-100);

  }


  .dropdown-separator{

    height:1px;

    margin:8px 18px;

    background:var(--sea-line);

  }


  .nav-dropdown.is-open>.dropdown-toggle{

    color:var(--sea-blue-800);

  }


  .nav-cta{

    width:100%;

    margin-top:20px;

    display:flex;

    justify-content:center;

    align-items:center;

  }

}


@media(max-width:600px){

  .header-inner{
    padding-inline:14px;
  }


  .brand img{
    height:42px;
  }


  .menu-toggle{

    width:42px;
    height:42px;

  }

}