/* Menú superior común (portada y páginas de proyecto). Se carga después de los
   estilos de cada página. */

/* El puente invisible bajo un desplegable solo actúa con el menú abierto: si no,
   abría el desplegable al pasar el ratón por debajo del menú. */
.dock-dropdown-wrap::before { pointer-events: none; }
.dock-dropdown-wrap:hover::before, .dock-dropdown-wrap.dock-dropdown-open::before { pointer-events: auto; }
.dock-dropdown-link small { white-space: nowrap; }

/* ─── Cabecera móvil: barra compacta y legible (el logo SVG de escritorio trae mucho margen interno) ─── */
#bz-header .brand-word { display: none; }
@media (max-width: 768px) {
  #bz-header {
    height: 64px; padding: 0 16px; pointer-events: auto;
    background: rgba(15,17,69,0.82);
    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  #bz-header .brand { gap: 0.6rem; min-height: 44px; }
  #bz-header .brand img { height: 38px; width: 38px; filter: drop-shadow(0 0 8px rgba(84,206,130,.35)); }
  #bz-header .brand-word { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
  #bz-dock { height: 64px; padding: 0 12px; }
  .dock-burger { width: 44px; height: 44px; border-radius: 12px; }
  #bz-dock .dock-nav-items { top: 74px; }
  body { padding-top: 64px; }
  #empresa, #problema, #solucion, #pf-cta, #pf-pricing { scroll-margin-top: 80px; }
  section[id] { scroll-margin-top: 72px; }
}


/* Barra del móvil: «Contactar» siempre a mano, junto al menú */
.dock-contact-m { display: none; }
@media (max-width: 768px) {
  #bz-dock { gap: 8px; }
  .dock-contact-m {
    display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px;
    border-radius: 13px; font-size: 0.86rem; font-weight: 800; letter-spacing: 0.01em; text-decoration: none;
    color: #0b2a18; background: var(--green-l); box-shadow: 0 6px 18px rgba(84,206,130,0.25); pointer-events: auto;
  }
  .dock-contact-m:active { transform: scale(0.97); }
  .dock-contact-m:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
}
@media (max-width: 340px) { .dock-contact-m { padding: 0 12px; font-size: 0.8rem; } }

/* ─── Páginas de proyecto: secciones del caso en la barra superior ─── */
.pj-nav-top { display: none; }
#bz-dock.has-sections .pj-nav-top {
  display: inline-flex; gap: 0.2rem; padding: 0.3rem; border-radius: 99px; overflow-x: auto; scrollbar-width: none;
  background: rgba(10,12,46,0.78); border: 1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
#bz-dock.has-sections .pj-nav-top::-webkit-scrollbar { display: none; }
#bz-dock.has-sections .pj-nav-top a {
  white-space: nowrap; padding: 0.5rem 0.9rem; border-radius: 99px; font-size: 0.82rem; font-weight: 700; text-decoration: none;
  color: rgba(255,255,255,0.72); transition: background-color 0.2s, color 0.2s;
}
#bz-dock.has-sections .pj-nav-top a:hover { color: #fff; background: rgba(255,255,255,0.07); }
#bz-dock.has-sections .pj-nav-top a.active { color: #0b2a18; background: var(--green-l); }
#bz-dock.has-sections .pj-nav-top a:focus-visible { outline: 2px solid var(--green-l); outline-offset: 2px; }
/* Escritorio ancho: logo · secciones · menú */
@media (min-width: 1240px) {
  #bz-dock.has-sections { grid-template-columns: clamp(170px, 16vw, 230px) 1fr auto; }
  #bz-dock.has-sections .pj-nav-top { grid-column: 2; grid-row: 1; justify-self: center; }
  #bz-dock.has-sections .dock-nav-items { grid-column: 3; grid-row: 1; }
}
/* Escritorio estrecho: las secciones, justo debajo del menú, dentro de la barra */
@media (min-width: 769px) and (max-width: 1239px) {
  #bz-dock.has-sections .pj-nav-top { position: absolute; top: calc(50% + 40px); left: 50%; transform: translateX(-50%); }
}
/* Móvil: segunda fila fija bajo la barra */
@media (max-width: 768px) {
  #bz-dock.has-sections .pj-nav-top {
    position: fixed; top: 64px; left: 0; right: 0; justify-content: flex-start; border-radius: 0; border-width: 0 0 1px; padding: 0.35rem 12px;
    background: rgba(15,17,69,0.9); box-shadow: none;
  }
  #bz-dock.has-sections .pj-nav-top a { padding: 0.45rem 0.8rem; font-size: 0.8rem; }
  body:has(#bz-dock.has-sections) { padding-top: 112px; }
  body:has(#bz-dock.has-sections) section[id] { scroll-margin-top: 124px; }
  #bz-dock.has-sections.dock-open .pj-nav-top { visibility: hidden; }
}

/* ─── Menú móvil cerrado: no puede recibir clics ───
   Se ocultaba solo con opacidad y los enlaces de los desplegables (pointer-events: auto)
   seguían activos e invisibles encima del contenido: tocar una foto o un botón llevaba
   a un proyecto. Cerrado, el menú queda oculto de verdad (también para teclado y lectores). */
@media (max-width: 768px) {
  #bz-dock .dock-nav-items { visibility: hidden; transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1), visibility 0s linear 0.3s; }
  #bz-dock.dock-open .dock-nav-items { visibility: visible; transition-delay: 0s; }
  #bz-dock:not(.dock-open) .dock-nav-items,
  #bz-dock:not(.dock-open) .dock-nav-items * { pointer-events: none !important; }
}