/* ==========================================================================
   LAYOUT.CSS — chrome do site: progress bar, header, menu mobile, footer,
   barra de CTA fixa mobile. Não é uma "secção" da Arquitectura da Informação
   — é estrutura persistente comum a todas.
   ========================================================================== */

#scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; background:var(--color-accent);
  z-index:1000; transition:width .1s linear;
}

header.site-header{
  position:sticky; top:0; z-index:900; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--color-border);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) 0; }
.brand-logo{ height:28px; width:auto; }
@media(min-width:768px){ .brand-logo{ height:34px; } }

.nav-links{ display:none; gap:var(--space-6); font-weight:var(--fw-semibold); font-size:.92rem; }
.nav-links a{ text-decoration:none; color:var(--color-primary); position:relative; padding:4px 0; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0;
  background:var(--color-accent); transition:width var(--duration-base) var(--ease-standard);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after{ width:100%; }
@media(min-width:1024px){ .nav-links{ display:flex; } }
.nav-cta{ display:none; }
@media(min-width:1024px){ .nav-cta{ display:inline-flex; } }

.hamburger{ display:flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
@media(min-width:1024px){ .hamburger{ display:none; } }
.hamburger span{ width:22px; height:2px; background:var(--color-primary); border-radius:2px; }

.mobile-menu{
  position:fixed; inset:0; background:var(--color-primary); z-index:1100; color:#fff;
  display:flex; flex-direction:column; padding:var(--space-6); transform:translateX(100%);
  transition:transform .35s var(--ease-standard);
}
.mobile-menu[data-open="true"]{ transform:translateX(0); }
.mobile-menu-top{ display:flex; justify-content:flex-end; }
.mobile-menu-close{ background:none; border:0; color:#fff; font-size:1.8rem; cursor:pointer; line-height:1; padding:8px; }
.mobile-menu ul{ margin:var(--space-8) 0; display:flex; flex-direction:column; gap:var(--space-4); font-family:var(--font-display); font-size:1.4rem; font-weight:var(--fw-semibold); }
.mobile-menu ul a{ text-decoration:none; color:#fff; }
.mobile-menu-footer{ margin-top:auto; border-top:1px solid rgba(255,255,255,.2); padding-top:var(--space-4); font-size:.85rem; opacity:.85; display:flex; flex-direction:column; gap:6px; }

/* ---------- Barra de CTA fixa mobile (Fase 10 — Mobile First) ---------- */
.mobile-cta-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:800; display:flex; background:#fff;
  border-top:1px solid var(--color-border); box-shadow:0 -6px 20px rgba(31,32,81,.12);
}
@media(min-width:1024px){ .mobile-cta-bar{ display:none; } }
.mobile-cta-bar a{ flex:1; text-align:center; padding:14px 8px; font-weight:var(--fw-semibold); font-size:.9rem; text-decoration:none; }
.mobile-cta-bar a.call{ color:#fff; background:var(--color-primary); }
.mobile-cta-bar a.email{ color:var(--color-primary); background:var(--color-accent); }

/* ---------- Footer Ultra Premium (Parte D — Refinamento Foco 4: nunca só
   3 colunas de links; background vivo, manifesto editorial, assinatura). ---------- */
footer.site-footer{
  background:var(--gradient-institutional); color:rgba(255,255,255,.75);
  padding:var(--space-24) 0 var(--space-8); position:relative; overflow:hidden;
  border-top:1px solid rgba(249,210,8,.35);
}
/* seam de luz no topo — o fio que liga visualmente ao fecho de Áreas de Actuação */
footer.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(249,210,8,.65), transparent);
}
.footer-glow{ position:absolute; width:min(46vw,520px); height:min(46vw,520px); border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; background:radial-gradient(circle, rgba(249,210,8,.14), transparent 70%); top:-18%; left:-8%; animation:glowFloat 14s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce){ .footer-glow, .footer-roof{ animation:none !important; } }

.footer-manifesto{ position:relative; z-index:1; max-width:680px; margin-bottom:var(--space-16); }
.footer-manifesto h2{ color:#fff; font-size:clamp(1.9rem, 1.5rem + 2vw, 3rem); letter-spacing:var(--tracking-display); margin-bottom:var(--space-4); }
.footer-manifesto p{ color:rgba(255,255,255,.78); font-size:1.1rem; max-width:52ch; }
.footer-grid{ position:relative; z-index:1; display:flex; flex-direction:column; gap:var(--space-6); border-top:1px solid rgba(255,255,255,.14); padding-top:var(--space-8); }
@media(min-width:768px){ .footer-grid{ flex-direction:row; justify-content:space-between; align-items:flex-start; } }
.footer-logo{ height:26px; opacity:.95; margin-bottom:var(--space-4); } /* wordmark-on-dark.png já é a variante branco+amarelo para fundo escuro */
.footer-cols{ display:flex; flex-wrap:wrap; gap:var(--space-8); }
.footer-col h3{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--space-3); font-family:var(--font-body); font-weight:var(--fw-semibold); }
.footer-col a, .footer-col span{ display:block; font-size:.88rem; color:rgba(255,255,255,.72); text-decoration:none; margin-bottom:6px; transition:color var(--duration-fast); }
.footer-col a{ position:relative; width:fit-content; }
.footer-col a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--color-accent); transition:width var(--duration-base) var(--ease-standard); }
.footer-col a:hover{ color:#fff; }
.footer-col a:hover::after{ width:100%; }
.footer-bottom{ position:relative; z-index:1; margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid rgba(255,255,255,.12); font-size:.75rem; display:flex; flex-direction:column; gap:8px; }
@media(min-width:768px){ .footer-bottom{ flex-direction:row; justify-content:space-between; } }
.footer-bottom a{ color:rgba(255,255,255,.6); text-decoration:underline; }
.footer-roof{ position:absolute; right:-6%; bottom:-18%; width:340px; opacity:.07; pointer-events:none; z-index:0; animation:footerDrift 22s ease-in-out infinite alternate; }
@keyframes footerDrift{ from{ transform:translate(0,0) rotate(0deg); } to{ transform:translate(-14px,-10px) rotate(3deg); } }

/* ---------- Cursor de marca (Parte D — "cursor inteligente"): segue o rato
   em todo o site com suavização (rAF + lerp em nav.js), não só sobre CTAs —
   a marca acompanha sempre; sobre elementos interactivos "acorda" (escala
   maior), reforçando o que é clicável sem inventar um ícone novo — reutiliza
   o traço diagonal do motivo do telhado que já existe na marca. ---------- */
#brand-cursor{
  position:fixed; top:0; left:0; width:0; height:0; pointer-events:none; z-index:1200;
  opacity:0; transition:opacity var(--duration-base) var(--ease-out);
}
#brand-cursor.is-visible{ opacity:1; }
.brand-cursor-inner{
  position:absolute; width:34px; height:34px;
  transform:translate(-50%,-50%) rotate(var(--brand-angle)) scale(.42);
  transition:transform .32s var(--ease-out);
}
#brand-cursor.is-active .brand-cursor-inner{ transform:translate(-50%,-50%) rotate(var(--brand-angle)) scale(1.05); }
.brand-cursor-inner svg{ width:100%; height:100%; }
@media (prefers-reduced-motion: reduce){ #brand-cursor{ display:none; } }

/* ---------- Banner de consentimento de cookies (Parte E.5) ---------- */
#cookie-banner{
  position:fixed; left:var(--space-4); right:var(--space-4); bottom:var(--space-4); z-index:1300;
  max-width:560px; margin:0 auto; background:#fff; border:1px solid var(--color-border);
  border-radius:var(--radius-card); box-shadow:var(--shadow-2); padding:var(--space-6);
  display:flex; flex-direction:column; gap:var(--space-4);
}
#cookie-banner[hidden]{ display:none; }
#cookie-banner p{ font-size:.88rem; color:var(--color-text-muted); }
#cookie-banner .cookie-actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; }