/* ===========================
   NAVBAR SÓLIDO + SIN HUECOS
   (drop-in: reemplaza tu bloque)
=========================== */

/* Altura adaptable: +alto en desktop, cómodo en móvil */
:root{
  --header-h: clamp(68px, 9vw, 96px);
  --bg:#ffffff;
  --ink:#111111;
  --muted:#6b6f76;
  --hover:#f0f0f0;
  --shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* Estructura base + sticky footer */
html, body{height:100%}
*{box-sizing:border-box}

body{
  min-height:100%;
  margin:0;
  color:var(--ink);
  background:var(--bg);
  display:flex; flex-direction:column;

  /* ✅ IMPORTANTE: usamos header FIXED, así que
     empujamos el contenido igual a la altura del header */
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}

main{flex:1 0 auto; margin-top:0}
footer.footer,.footer{flex-shrink:0}

/* ========= NAVBAR ========= */
header.nav-global{
  /* ✅ FIX: que nunca “desaparezca” ni se recorte */
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background:#fff;
  z-index: 2147483000; /* muy por encima de héroes/video con z-index */

  display:flex; align-items:center; justify-content:center;
  padding:0 clamp(12px,4vw,24px);
  box-shadow:var(--shadow);

  -webkit-backdrop-filter:saturate(180%) blur(6px);
  backdrop-filter:saturate(180%) blur(6px);
  overflow: visible; /* nada de recortes */
}

/* Tipografías (no romper FA) */
header.nav-global{ --nav-font:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif; }
header.nav-global *{ font-family:var(--nav-font); }

/* Restaurar FA */
header.nav-global i[class^="fa"],
header.nav-global i[class*=" fa"],
header.nav-global .fa,
header.nav-global .fas,
header.nav-global .fa-solid{ font-family:"Font Awesome 6 Free" !important; font-weight:900; }
header.nav-global .far,.fa-regular{ font-family:"Font Awesome 6 Free" !important; font-weight:400; }
header.nav-global .fab,.fa-brands{ font-family:"Font Awesome 6 Brands" !important; font-weight:400; }

/* ========= LAYOUT INTERNO ========= */
header.nav-global .navbar{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; height:100%;
  gap: clamp(10px, 2vw, 16px);
  overflow:visible;
}

/* Izquierda (logo + toggle) */
header.nav-global .navbar-izquierda{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
}
header.nav-global .brand-btn{
  background:transparent; border:none; padding:0; display:flex; align-items:center; justify-content:center;
}
header.nav-global .brand-logo{
  /* ✅ más alto para “engordar” visualmente el navbar */
  height: clamp(36px, 5vw, 48px);
  width:auto; display:block;
}

/* Botón menú */
header.nav-global .menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; border:none; background:transparent;
}
@media (min-width:769px){
  header.nav-global .menu-toggle{ display:none; }
}

/* Centro (links) */
header.nav-global .nav-centro{
  --gap: clamp(10px, 2.5vw, 24px);
  display:flex; align-items:center; justify-content:center;
  gap:var(--gap);
  flex:1 1 auto; min-width:0;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  max-width:100%;
}
header.nav-global .nav-centro::-webkit-scrollbar{ display:none; }
header.nav-global .nav-centro a{
  text-decoration:none; color:#000; font-weight:700;
  padding:10px 14px; border-radius:12px; white-space:nowrap;
  transition:background .2s ease, transform .15s ease;
  font-size:clamp(.92rem, 2.2vw, 1.02rem);
}
header.nav-global .nav-centro a:hover{ background:var(--hover); transform:translateY(-1px); }

/* Derecha (iconos) */
header.nav-global .nav-derecha{
  display:flex; gap:10px; justify-content:flex-end; align-items:center; flex:0 0 auto;
}
header.nav-global .icon-btn{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; color:#000; background:transparent;
  transition:background .2s ease, transform .15s ease;
}
header.nav-global .icon-btn:hover{ background:var(--hover); transform:translateY(-1px); }

/* ========= SUBMENÚ ESTILOS ========= */
.nav-item.has-dropdown{ position:relative; }
.nav-item.has-dropdown .dropdown-estilos{
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:220px; background:#fff; border:1px solid #eee; border-radius:14px;
  box-shadow:0 14px 28px rgba(0,0,0,.14);
  display:none; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:2147483647; padding:8px 0; display:flex; flex-direction:column;
}
.nav-item.has-dropdown:hover .dropdown-estilos,
.nav-item.has-dropdown.open .dropdown-estilos{
  display:flex; opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav-item.has-dropdown .dropdown-estilos a{
  padding:11px 16px; color:#000; text-decoration:none; transition:background .2s ease; border-radius:10px;
}
.nav-item.has-dropdown .dropdown-estilos a:hover{ background:#f5f5f5; }

/* ========= DROPDOWN USUARIO ========= */
header.nav-global .user-menu{ position:relative; }
header.nav-global .user-menu .dropdown{
  position:absolute; top:calc(100% + 12px); right:0; min-width:260px;
  background:#fff; border-radius:16px;
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  padding:10px; display:flex; flex-direction:column; gap:6px;
  z-index:2147483647; opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
header.nav-global .user-menu .dropdown.open{ opacity:1; visibility:visible; transform:translateY(0); }

header.nav-global .user-menu .dropdown-item{
  padding:10px 14px; border-radius:12px; font-size:14px; font-weight:700;
  color:#222; text-decoration:none; cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
header.nav-global .user-menu .dropdown-item:hover{ background:#f5f5f5; transform:translateX(3px); }

/* Perfil */
header.nav-global .user-menu .profile-card{
  display:flex; align-items:center; flex-direction:column; gap:6px;
  padding:14px 16px; border-radius:16px; background:#2e4b57; color:#fff; text-align:center;
}
header.nav-global .user-menu .avatar-fallback{
  width:68px; height:68px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:20px;
  background:linear-gradient(135deg,#3a6b7b,#25414b); color:#fff;
  border:3px solid rgba(255,255,255,.65); box-shadow:0 4px 14px rgba(0,0,0,.25);
}
header.nav-global .user-menu .profile-name{ margin-top:6px; font-size:16px; font-weight:800; }
header.nav-global .user-menu .profile-email{
  font-size:13px; opacity:.9; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ========= FOOTER (igual que tenías) ========= */
.footer{
  background:#eee; color:#111;
  padding:24px clamp(16px,4vw,32px) 80px;
}
.footer .features{
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between;
  margin-bottom:24px;
}
.footer .feature{
  flex:1 1 160px; min-width:160px;
  display:flex; align-items:center; gap:12px;
  background:#666; color:#fff; border-radius:999px; padding:10px 14px;
}
.footer .feature i,.footer .feature svg{ flex:0 0 24px; height:24px; }
.footer .cols{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:16px;
}
.footer .col h4{ font-size:1rem; margin:0 0 8px; }
.footer .col a{
  display:block; color:#111; text-decoration:none;
  padding:4px 0; font-size:.95rem;
}
.footer .col a:hover{ text-decoration:underline; }

/* ========= RESPONSIVE ========= */
@media (max-width:768px){
  /* dropdown móvil “despegado” del header para evitar recortes */
  .nav-item.has-dropdown{ position: static; }
  .nav-item.has-dropdown .dropdown-estilos{
    position: fixed !important;
    top: calc(var(--header-h) + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 360px);
    max-height: 70vh;
    overflow: auto;
    z-index: 2147483647;
  }
  .nav-item.has-dropdown.align-right .dropdown-estilos{
    left: auto; right: 12px; transform: none;
    width: min(92vw, 360px);
  }
  /* botones un pelín más cómodos en táctil */
  header.nav-global .icon-btn{ width:46px; height:46px; border-radius:14px; }
}

@media (min-width:769px){
  /* dropdown cuelga normal del item */
  .nav-item.has-dropdown{ position: relative; }
  .nav-item.has-dropdown .dropdown-estilos{
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483647;
  }
}

/* <=600px footer */
@media (max-width:600px){
  .footer .feature{ flex:1 1 100%; justify-content:flex-start; }
}

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;}
}

/* ========= ANTI-SUPERPOSICIÓN (por si tu héroe/video tiene z-altos) ========= */
/* Baja capas de héroe/video; el header siempre arriba */
.hero, [data-hero], .video-wrap, .banner-top{
  position:relative; z-index: 1;
}
/* El header ya tiene z-index 2147483000 */

/* ========= ANTI-HUECO EN PÁGINAS (ej. Novedades) ========= */
/* El huequito suele ser margen del primer bloque: lo anulamos */
main > *:first-child{ margin-top: 0 !important; }
section:first-child, .wrap:first-child, .page:first-child, .container:first-child{
  margin-top: 0 !important;
}
h1:first-child, .page-title:first-child{ margin-block-start: 0 !important; }

/* Si tienes un contenedor principal tipo .jz-catalogo, evita padding/margen arriba */
.jz-catalogo{ margin-top: 0 !important; padding-top: 0 !important; }

/* Seguridad extra: el header nunca recorta dropdowns/links */
header.nav-global,
header.nav-global .navbar,
header.nav-global .nav-centro{
  overflow: visible !important;
}
/* ===========================
   ANTI-CORTE GLOBAL (pegalo al final)
=========================== */

:root{ --header-h: clamp(72px, 9vw, 96px); }

body{
  margin:0; min-height:100%;
  display:flex; flex-direction:column;
  padding-top: env(safe-area-inset-top, 0px); /* sin padding fijo del header */
}

header.nav-global{
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  height: var(--header-h);
  z-index: 2147483000;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:0 clamp(12px,4vw,24px);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  -webkit-backdrop-filter:saturate(180%) blur(6px);
  backdrop-filter:saturate(180%) blur(6px);

  /* anti-colapso (evita franja arriba) */
  padding-bottom:1px;
  margin-bottom:-1px;
  overflow:visible;
}

/* seguridad: no recortar dropdowns */
header.nav-global, header.nav-global .navbar, header.nav-global .nav-centro{
  overflow:visible !important;
}

/* el primer bloque del main no debe empujar hacia arriba */
main{ flex:1 0 auto; }
main > *:first-child,
.page > *:first-child,
.container > *:first-child,
.wrap > *:first-child,
section:first-child{
  margin-top:0 !important;
}