/* SHARED SITE SHELL — nav + footer + brand lockup.
 *
 * Linked from all five public pages. This is the ONLY place .nav, .foot and
 * the brand-lockup classes are defined — no page-specific stylesheet should
 * redeclare them. That's what makes every page look like one site instead of
 * four separately-designed ones. If the shell needs to change, change it
 * here once; don't patch it per page.
 *
 * Colours are hardcoded rather than pulled from each page's :root, on
 * purpose: en.css, landing.css and pro.css each define different palettes
 * (--ink vs --black vs --ink/--blue), and the shell must render identically
 * no matter which page's variables are in scope.
 */

.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;
  padding:13px 24px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border-bottom:1px solid #e2e2df;font-family:'Poppins',system-ui,sans-serif}

.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.nav-logo{height:32px;display:block}

/* ConstruCostos endorsed-brand lockup: sub-brand leads, parent reassures.
 * Zamia mark at ~60% the ConstruCostos logo's height, muted, separated by a
 * thin rule. Only used on the three ConstruCostos-branded pages. */
.brand-primary{height:32px;display:block}
.brand-sep{width:1px;height:20px;background:#e2e2df;flex:none}
.brand-parent{display:flex;align-items:center;gap:6px;opacity:.62}
.brand-parent-logo{height:19px;display:block;border-radius:2px}
.brand-parent-text{font-size:11px;font-weight:600;color:#6b6b68;white-space:nowrap}

.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{font-size:14px;font-weight:500;color:#3a3a38;text-decoration:none}
.nav-links a:hover{color:#1f5c3c}

.lang{display:flex;border:1px solid #e2e2df;border-radius:999px;overflow:hidden;
  font-size:12.5px;font-weight:700;flex:none;margin-left:auto}
.lang a{padding:6px 11px;text-decoration:none;color:#6b6b68}
.lang a.on{background:#171717;color:#fff}

.nav-cta{font-size:14px;font-weight:700;text-decoration:none;color:#fff;background:#171717;
  padding:9px 18px;border-radius:999px;white-space:nowrap}
.nav-cta:hover{background:#1f5c3c}

.foot{display:flex;flex-wrap:wrap;align-items:center;gap:22px;max-width:1080px;margin:0 auto;
  padding:36px 22px 46px;border-top:1px solid #e2e2df;color:#6b6b68;font-size:13.5px;
  font-family:'Poppins',system-ui,sans-serif}
.foot-logo{height:34px;border-radius:4px;flex:none}
.foot-body{flex:1;min-width:230px}
.foot-body strong{color:#171717}
.foot-body .micro{font-size:12.5px;color:#6b6b68;margin:6px 0 0;line-height:1.5;max-width:520px;display:block}
.foot-links{display:flex;flex-wrap:wrap;gap:7px 20px;flex:none}
.foot-links a{font-size:13px;font-weight:600;color:#1f5c3c;text-decoration:none}
.foot-links a:hover{text-decoration:underline}

@media(max-width:760px){
  .nav{padding:11px 16px;flex-wrap:wrap;row-gap:8px}
  .nav-links{display:none}
  .nav-logo,.brand-primary{height:27px}
  .brand-parent-logo{height:16px}
  .nav-cta{font-size:13px;padding:8px 14px}
  .foot{flex-direction:column;text-align:center;padding:30px 18px 42px}
  .foot-links{justify-content:center}
}