/*
 * ================================================================
 *  EL MAPA DEL DINERO — header.css
 *  Componente: Navegación principal sticky con glassmorphism
 * ================================================================
 */

/* ----------------------------------------------------------------
   HEADER
---------------------------------------------------------------- */
#header {
  position     : fixed;
  top:0; left:0; right:0;
  z-index      : 1000;
  background   : #1A2340;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition   : background 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
}

#header.scrolled {
  background              : rgba(15,20,45,0.97);
  backdrop-filter         : blur(16px);
  -webkit-backdrop-filter : blur(16px);
  border-bottom           : 1px solid rgba(255,255,255,0.10);
  box-shadow              : 0 2px 24px rgba(0,0,0,0.25);
}

.header-inner {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  height          : 72px;
}

/* ----------------------------------------------------------------
   LOGO
---------------------------------------------------------------- */
.logo { display:flex; flex-direction:column; gap:2px; }
.logo:hover { opacity:0.85; }

.logo-main {
  font-family    : var(--font-display);
  font-size      : 17px;
  font-weight    : 600;
  color          : var(--white);
  letter-spacing : 0.02em;
  line-height    : 1;
}

.logo-sub {
  font-size      : 10px;
  font-weight    : 400;
  color          : var(--gold);
  letter-spacing : 0.18em;
  text-transform : uppercase;
  line-height    : 1;
}

/* ----------------------------------------------------------------
   NAV DESKTOP
---------------------------------------------------------------- */
nav { display:flex; align-items:center; gap:36px; }

nav a {
  color          : var(--muted2);
  font-size      : 14px;
  font-weight    : 400;
  letter-spacing : 0.01em;
  transition     : color 0.2s;
}
nav a:hover, nav a.active { color:var(--white); }

/* ----------------------------------------------------------------
   TOGGLE MÓVIL
---------------------------------------------------------------- */
.menu-toggle {
  display        : none;
  flex-direction : column;
  gap            : 5px;
  background     : none;
  border         : none;
  padding        : 6px;
  cursor         : pointer;
}

.menu-toggle span {
  display          : block;
  width            : 22px;
  height           : 1.5px;
  background       : var(--muted2);
  transition       : all 0.3s var(--ease);
  transform-origin : center;
}

.menu-toggle.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.menu-toggle.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ----------------------------------------------------------------
   MENÚ MÓVIL OVERLAY
---------------------------------------------------------------- */
@media (max-width:768px) {
  nav { display:none; }

  nav.open {
    display                 : flex;
    flex-direction          : column;
    align-items             : flex-start;
    position                : fixed;
    inset                   : 72px 0 0 0;
    background              : rgba(13,17,23,0.98);
    backdrop-filter         : blur(20px);
    -webkit-backdrop-filter : blur(20px);
    padding                 : 32px 24px;
    gap                     : 0;
    z-index                 : 999;
    overflow-y              : auto;
  }

  nav.open a {
    font-size     : 20px;
    padding       : 18px 0;
    border-bottom : 1px solid var(--border);
    width         : 100%;
    display       : block;
    color         : var(--muted2);
  }

  nav.open .btn-primary {
    width           : 100%;
    justify-content : center;
    padding         : 16px 24px;
    font-size       : 16px;
    margin-top      : 24px;
    border-bottom   : none;
  }

  .menu-toggle { display:flex; }
}