/* SHARED TOP MENU — homepage (/ and /es/), /construcostos/ and Cota (/cota/).
 * One component so the brand family reads as one site. Classes are prefixed
 * `zn-` on purpose: they never collide with nav-footer.css (.nav), site.css
 * or a product page's own styles, so this file can be dropped into any page.
 *
 * Contrast rule (JJ, 2026-09-22): the bar is a translucent dark glass strip
 * that is ALWAYS there, not a transparent overlay that only becomes solid on
 * scroll. Links are full white. A visitor who isn't looking for the menu must
 * still see it over a bright photo or a WebGL hero. */

.zn{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;gap:16px;
  padding:12px clamp(18px,4vw,56px);color:#fff;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:rgba(14,17,15,.58);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .25s ease,border-color .25s ease}
.zn.solid{background:rgba(14,17,15,.9);border-bottom-color:rgba(255,255,255,.12)}
.zn::after{content:"";position:absolute;left:0;right:0;top:100%;height:26px;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,17,15,.35),rgba(14,17,15,0))}

.zn-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;white-space:nowrap;
  font-family:'Fraunces',Georgia,'Times New Roman',serif;font-size:21px;font-weight:500;letter-spacing:-.01em;flex:none}
.zn-brand img,.zn-brand svg{display:block;height:30px;width:auto}

.zn-links{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,2.2vw,28px)}
.zn-links a{color:#fff;opacity:.92;text-decoration:none;font-size:14.5px;font-weight:500;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.35);transition:opacity .18s}
.zn-links a:hover{opacity:1}
.zn-links a.on{opacity:1;position:relative}
.zn-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:#8fd3a8}
.zn-links a.out::after{content:"↗";position:static;font-size:11px;margin-left:4px;opacity:.7;background:none}

.zn-lang{display:flex;gap:2px;font-size:12.5px;font-weight:600;letter-spacing:.08em;flex:none}
.zn-lang a{padding:6px 9px;border-radius:999px;color:#fff;opacity:.75;text-decoration:none}
.zn-lang a.on{background:rgba(255,255,255,.16);opacity:1}

.zn-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;flex:none;
  border-radius:999px;background:#25D366;color:#06331a;font-weight:600;font-size:14px;text-decoration:none;
  white-space:nowrap;transition:transform .18s,background .18s}
.zn-cta:hover{transform:translateY(-1px);background:#3ae07a}
.zn-cta svg{width:17px;height:17px;flex:none}
.zn-cta.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.zn-cta.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* hamburger — phones only */
.zn-burger{display:none;margin-left:auto;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.3);
  background:transparent;cursor:pointer;padding:0;flex:none;position:relative}
.zn-burger span,.zn-burger span::before,.zn-burger span::after{content:"";position:absolute;left:12px;width:18px;height:2px;
  background:#fff;border-radius:2px;transition:transform .2s,top .2s,opacity .2s}
.zn-burger span{top:20px}
.zn-burger span::before{left:0;top:-6px}
.zn-burger span::after{left:0;top:6px}
.zn.open .zn-burger span{background:transparent}
.zn.open .zn-burger span::before{top:0;transform:rotate(45deg)}
.zn.open .zn-burger span::after{top:0;transform:rotate(-45deg)}

@media(max-width:760px){
  .zn{gap:10px}
  .zn-brand{font-size:19px}
  .zn-burger{display:block}
  .zn-cta:has(svg) span{display:none}
  .zn-cta:has(svg){width:42px;padding:0}
  .zn-cta.ghost{height:38px;padding:0 14px;font-size:13.5px}
  .zn-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(14,17,15,.97);border-bottom:1px solid rgba(255,255,255,.12);padding:6px 18px 14px}
  .zn.open .zn-links{display:flex}
  .zn-links a{font-size:17px;padding:13px 0;border-top:1px solid rgba(255,255,255,.08)}
  .zn-links a:first-child{border-top:0}
  .zn-links a.on::after{display:none}
}
@media(max-width:360px){.zn-brand span{display:none}}