/* ======================================================
   header.css (LIMPIO) — AdMouse
   - Solo afecta al header moderno (.main-header)
   - Responsive + hamburguesa
   - Compatible con initHeader(): usa .is-scrolled
   - Sin dropdown (Galería entra directo a gal.html)
====================================================== */

:root{
  --hdr-h: 64px;
  --hdr-h-m: 60px;

  --hdr-bg: linear-gradient(90deg, rgb(107, 160, 198), #021c43f0);
  --hdr-bg-scrolled: rgba(255,255,255,.86);

  --link-dark: rgba(15,23,42,.86);
  --link-light: rgba(255,255,255,.90);
}

/* Evita que el contenido quede debajo del header fijo */
body.has-fixed-header{
  padding-top: var(--hdr-h);
}
@media (max-width: 768px){
  body.has-fixed-header{ padding-top: var(--hdr-h-m); }
}

/* Header fijo */
.main-header{
  position: fixed;
  top:0; left:0; right:0;
  width:100%;
  z-index: 5000;
  background: var(--hdr-bg);
  transition: background .35s ease, box-shadow .35s ease;
}

/* Modo scroll (glass claro) */
.main-header.is-scrolled{
  background: var(--hdr-bg-scrolled);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(15,23,42,.10);
}

/* Contenedor interno */
.main-header .header-container{
  max-width: 1500px;
  margin: 0 auto;
  height: var(--hdr-h);
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

/* Logo */
.main-header .logo{
  display:flex;
  align-items:center;
  flex: 0 0 auto;
}
.main-header .logo-img,
.main-header .logo img{
  height: 40px;
  width: auto;
  max-height: 40px;
  object-fit: contain;
  display:block;
}

/* Navegación desktop */
.main-header .navigation{
  flex: 1 1 auto;
  display:flex;
  justify-content:center;
  min-width: 0;
}

.main-header .nav-links{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.main-header .nav-links a{
  color: var(--link-light);
  text-decoration:none;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.main-header .nav-links a:hover{
  background: rgba(255,255,255,.18);
  color: #fff;
  transform: translateY(-1px);
}

/* Links cuando el header es claro (scroll) */
.main-header.is-scrolled .nav-links a{
  color: var(--link-dark);
}
.main-header.is-scrolled .nav-links a:hover{
  background: rgba(15,23,42,.08);
  color: rgba(15,23,42,.96);
}

/* Hamburguesa */
.main-header .menu-toggle{
  display:none; /* desktop: oculto */
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);

  align-items:center;
  justify-content:center;
  flex-direction: column;
  gap: 6px;

  cursor:pointer;
  flex-shrink: 0;
  position: relative;
}

.main-header .menu-toggle .bar{
  height: 2px;
  width: 20px;
  background: #fff;
  border-radius: 999px;
  margin: 0;
  transition: transform .22s ease, opacity .22s ease;
}

/* Hamburguesa en header claro */
.main-header.is-scrolled .menu-toggle{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.10);
}
.main-header.is-scrolled .menu-toggle .bar{
  background: rgba(15,23,42,.90);
}

/* Zona táctil extra */
.main-header .menu-toggle::after{
  content:"";
  position:absolute;
  inset:-8px;
}

/* X */
.main-header .menu-toggle.open .bar:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.main-header .menu-toggle.open .bar:nth-child(2){
  opacity: 0;
}
.main-header .menu-toggle.open .bar:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px){
  .main-header .header-container{ height: var(--hdr-h-m); }

  .main-header .logo-img,
  .main-header .logo img{
    height: 34px;
    max-height: 34px;
  }

  .main-header .menu-toggle{ display:flex; }
  .main-header .navigation{ justify-content:flex-end; }

  .main-header .nav-links{
    display:none;
    position:absolute;
    left: 16px;
    right: 16px;
    top: calc(var(--hdr-h-m) + 10px);

    flex-direction: column;
    align-items: stretch;
    gap: 6px;

    padding: 10px;
    border-radius: 16px;
    background: rgba(17,24,39,.88);
    border: 1px solid rgba(255,255,255,.12);
    z-index: 6000;
  }

  .main-header .nav-links.active{ display:flex; }

  .main-header .nav-links a{
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    color: rgba(255,255,255,.92);
    transform: none;
  }
}