/* ============================================================
   NOVA JIANGSU Angola — sistema de design
   Tokens + componentes. Baseado no manual de desenvolvimento v1.0
   ============================================================ */

:root{
  /* marca */
  --brand-900:#002F63; --brand-800:#003A78; --brand-700:#00428C; --brand-600:#1A5AA6;
  --brand-500:#3D78BF; --brand-300:#A9C5E3; --brand-200:#CFDFF0; --brand-100:#E6EEF8; --brand-050:#F3F7FC;
  /* acentos (padrão de vitral) */
  --gold:#F9C94B; --gold-600:#C99A16; --teal:#50A5A0; --teal-700:#0F766E;
  --olive:#8F9B35; --terra:#F7BE89; --terra-700:#C2410C; --mint:#65FCC5;
  /* neutros */
  --ink-900:#14181F; --ink-700:#2B333F; --ink-500:#5A6472; --ink-400:#8A93A0;
  --line-300:#D7DDE5; --line-200:#E7EBF0; --surface-0:#fff; --surface-1:#F6F7F9; --surface-2:#EEF1F5;
  --surface-inv:#0C1220;
  /* espaço */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --sp-8:64px; --sp-9:96px; --sp-10:128px;
  /* forma */
  --r-0:0; --r-sm:2px; --r-md:4px; --r-lg:8px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(10,16,28,.06),0 1px 3px rgba(10,16,28,.04);
  --sh-2:0 4px 12px rgba(10,16,28,.08),0 2px 4px rgba(10,16,28,.04);
  --sh-3:0 12px 32px rgba(10,16,28,.12),0 4px 8px rgba(10,16,28,.06);
  --sh-4:0 24px 64px rgba(10,16,28,.18);
  --focus:0 0 0 3px var(--surface-0),0 0 0 6px var(--brand-500);
  /* movimento */
  --dur-micro:160ms; --dur-fast:280ms; --dur-base:480ms; --dur-slow:720ms; --dur-cinema:1400ms;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.4,0,.2,1); --ease-expo:cubic-bezier(.16,1,.3,1);
  /* tipografia */
  --fs-display:clamp(2.75rem,1.4rem + 5.4vw,5rem);
  --fs-h1:clamp(2.125rem,1.5rem + 2.5vw,3.5rem);
  --fs-h2:clamp(1.75rem,1.3rem + 1.8vw,2.75rem);
  --fs-h3:clamp(1.375rem,1.2rem + .7vw,1.75rem);
  --fs-h4:clamp(1.125rem,1.05rem + .3vw,1.3125rem);
  --fs-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --fs-stat:clamp(2.25rem,1.6rem + 2.6vw,3.5rem);
  --container:1280px; --gutter:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--surface-0);color:var(--ink-900);
  font-family:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,h5{font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;line-height:1.1;margin:0 0 var(--sp-4);font-weight:700;letter-spacing:-.02em}
p{margin:0 0 var(--sp-4)}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-700)}
ul,ol{margin:0 0 var(--sp-4);padding-left:var(--sp-5)}
li{margin-bottom:var(--sp-2)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.tnum{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand-600);display:block;margin-bottom:var(--sp-3)}
.eyebrow--light{color:var(--brand-300)}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-500);max-width:64ch}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--sp-4);top:-60px;z-index:200;background:var(--brand-700);color:#fff;
  padding:10px 18px;border-radius:0 0 var(--r-md) var(--r-md);font-weight:600;transition:top var(--dur-fast) var(--ease-out)}
.skip:focus{top:0}

/* ── topbar ─────────────────────────────────────────────── */
.topbar{background:var(--surface-1);border-bottom:1px solid var(--line-200);font-size:12.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:var(--sp-4);flex-wrap:wrap}
.topbar .meta{color:var(--ink-500)}
.topbar .links{display:flex;gap:var(--sp-4);align-items:center}
.topbar a{color:var(--ink-500);text-decoration:none;display:inline-block;padding:6px 0;min-height:24px}
.topbar a:hover{color:var(--brand-700)}

/* ── navbar ─────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--line-200);
  transition:box-shadow var(--dur-fast) var(--ease-in-out)}
/* O efeito de vidro vai num pseudo-elemento: um filtro/backdrop-filter num ANCESTOR
   tornaria-o containing block dos descendentes position:fixed, e a gaveta mobile
   deixaria de se posicionar em relacao ao viewport. */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:saturate(170%) blur(14px);
  backdrop-filter:saturate(170%) blur(14px)}
.nav.scrolled{box-shadow:var(--sh-2)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:var(--sp-5)}
.brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;flex:0 1 auto;min-width:0}
.brand .mark{width:38px;height:38px;border-radius:var(--r-md);background:var(--brand-700);display:grid;place-items:center;flex:none}
.brand .mark svg{width:22px;height:22px}
.brand b{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:.01em;font-size:18px;color:var(--brand-700);display:block;line-height:1.1;white-space:nowrap}
.brand > span{min-width:0}
.brand > span > span{display:block;font-size:10px;color:var(--ink-500);letter-spacing:.1em;text-transform:uppercase;
  font-family:'IBM Plex Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mainnav{display:flex;align-items:center;gap:var(--sp-6)}
.mainnav > a{font-size:15px;font-weight:500;color:var(--ink-700);text-decoration:none;position:relative;padding:8px 0}
.mainnav > a:not(.btn)::after{content:"";position:absolute;left:0;bottom:2px;height:3px;width:0;background:var(--gold);
  transition:width var(--dur-micro) var(--ease-in-out)}
.mainnav > a.btn--primary{color:#fff}
.mainnav > a.btn--gold{color:var(--ink-900)}
.mainnav > a.btn--outline{color:var(--brand-700)}
.mainnav > a:not(.btn):hover::after,.mainnav > a:not(.btn)[aria-current="page"]::after{width:100%}
.mainnav > a[aria-current="page"]{color:var(--brand-700)}
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--line-300);border-radius:var(--r-md);
  background:#fff;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:3}
.nav.menu-open .burger{opacity:0;visibility:hidden;pointer-events:none}
.drawer-head{display:none;align-items:center;justify-content:space-between;gap:var(--sp-4);
  margin-bottom:var(--sp-5);padding-bottom:var(--sp-4);border-bottom:1px solid var(--line-200)}
.drawer-head__brand{font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;color:var(--brand-700);
  letter-spacing:.01em}
.drawer-close{width:44px;height:44px;flex:none;border:1.5px solid var(--line-300);border-radius:var(--r-md);
  background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--ink-700)}
.drawer-close:hover{border-color:var(--brand-300);color:var(--brand-700)}
.drawer-close svg{width:20px;height:20px}
.burger span{display:block;width:20px;height:2px;background:var(--brand-700);position:relative;transition:background var(--dur-fast) var(--ease-out)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--brand-700);
  transition:transform var(--dur-fast) var(--ease-out)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ── botões ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:46px;padding:0 var(--sp-5);
  border-radius:var(--r-md);font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:all var(--dur-fast) var(--ease-out);white-space:nowrap}
.btn svg{width:17px;height:17px;flex:none}
.btn--primary{background:var(--brand-700);color:#fff}
.btn--primary:hover{background:var(--brand-800);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn--gold{background:var(--gold);color:var(--ink-900)}
.btn--gold:hover{background:#ffdd6b;transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn--outline{border-color:var(--brand-700);color:var(--brand-700);background:transparent}
.btn--outline:hover{background:var(--brand-050)}
.btn--ghost-on-dark{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
.btn--ghost-on-dark:hover{background:rgba(255,255,255,.14)}

/* ── hero ───────────────────────────────────────────────── */
.hero{position:relative;background:var(--brand-900);color:#fff;overflow:hidden;isolation:isolate}
.hero__vitral{position:absolute;inset:0;z-index:0;opacity:.5}
.hero__vitral img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  mix-blend-mode:luminosity;animation:drift 70s var(--ease-in-out) infinite alternate}
@keyframes drift{from{transform:scale(1.06) translate3d(-1.5%,0,0)}to{transform:scale(1.14) translate3d(1.5%,-1%,0)}}
.hero__veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(103deg,rgba(0,35,80,.97) 0%,rgba(0,42,92,.90) 42%,rgba(0,47,99,.62) 78%,rgba(0,47,99,.50) 100%)}
.hero__grid{position:absolute;inset:0;z-index:1;opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(ellipse 80% 70% at 30% 40%,#000,transparent 78%)}
.hero__inner{position:relative;z-index:2;padding-top:clamp(64px,8.5vw,116px);padding-bottom:clamp(56px,6.5vw,92px)}
.hero h1{font-size:var(--fs-display);font-weight:800;letter-spacing:-.035em;max-width:16ch;margin:var(--sp-4) 0 var(--sp-5)}
.hero .lead{color:rgba(255,255,255,.84);max-width:56ch;margin-bottom:var(--sp-6)}
.hero__actions{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.hero__proof{display:flex;gap:var(--sp-6);flex-wrap:wrap;margin-top:var(--sp-8);
  padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.18)}
.proof{display:flex;align-items:center;gap:var(--sp-2);font-size:13.5px;color:rgba(255,255,255,.82)}
.proof svg{width:18px;height:18px;color:var(--gold);flex:none}
.rv{display:block;overflow:hidden}
.rv>span{display:block;transform:translateY(102%);opacity:0;animation:rise var(--dur-slow) var(--ease-out) forwards}
.rv>span:nth-child(1){animation-delay:60ms}
.rv>span:nth-child(2){animation-delay:150ms}
.rv>span:nth-child(3){animation-delay:240ms}
@keyframes rise{to{transform:translateY(0);opacity:1}}
.fade-up{opacity:0;transform:translateY(20px);animation:fadeUp var(--dur-base) var(--ease-out) 400ms forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* ── faixa de vitral ────────────────────────────────────── */
.vitral{position:relative;height:112px;overflow:hidden;background:var(--brand-900);
  background-image:url('/assets/brand/vitral-faixa.webp');background-repeat:repeat-x;background-size:auto 100%;
  background-position:0 center;animation:pan 40s linear infinite}
@keyframes pan{from{background-position:0 center}to{background-position:-1050px center}}
.vitral--thin{height:24px}

/* ── secções ────────────────────────────────────────────── */
section{padding:var(--sp-9) 0}
section.tight{padding:var(--sp-8) 0}
section.alt{background:var(--surface-1)}
section.dark{background:var(--brand-900);color:#fff}
section.dark h2,section.dark h3{color:#fff}
section.dark .lead{color:rgba(255,255,255,.78)}
.sec-head{max-width:76ch;margin-bottom:var(--sp-7)}
.sec-head h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.025em;margin-bottom:var(--sp-4)}
.sec-head p{color:var(--ink-500);font-size:var(--fs-lead);line-height:1.6;margin:0}
.sec-head .eyebrow{margin-bottom:var(--sp-3)}

/* ── números ────────────────────────────────────────────── */
.stats{background:var(--surface-1);border-bottom:1px solid var(--line-200)}
.stats .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-200);
  padding:0;max-width:none}
.stats .wrap > *{background:var(--surface-1)}
.stat{padding:var(--sp-6) var(--sp-5)}
.stat b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:var(--fs-stat);line-height:1;
  letter-spacing:-.03em;color:var(--brand-700);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:var(--sp-2);font-size:11.5px;font-family:'IBM Plex Mono',monospace;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500)}
.stat em{display:block;margin-top:6px;font-style:normal;font-size:13px;color:var(--ink-500);line-height:1.5}

/* ── cartões ────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:var(--sp-5)}
.card{border:1px solid var(--line-200);border-radius:var(--r-md);overflow:hidden;background:#fff;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
  position:relative;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--brand-300)}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--surface-2);flex:none}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.card:hover .ph img{transform:scale(1.04)}
.card .ph--vitral{background:var(--brand-900);position:relative;overflow:hidden}
.card .ph--vitral::before{content:"";position:absolute;inset:0;
  background-image:url('/assets/brand/mosaico-capa.webp');background-size:cover;background-position:center 40%;
  opacity:.24;mix-blend-mode:luminosity}
.card .ph--vitral img{display:none}
.cards .card:nth-child(4n+1) .ph--vitral::before{background-position:12% 62%}
.cards .card:nth-child(4n+2) .ph--vitral::before{background-position:72% 24%}
.cards .card:nth-child(4n+3) .ph--vitral::before{background-position:38% 86%}
.cards .card:nth-child(4n+4) .ph--vitral::before{background-position:88% 48%}
.card .body{padding:var(--sp-5);display:flex;flex-direction:column;flex:1}
.card .badges{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:var(--sp-1)}
.card .badges .badge{margin:0}
.card h3,.card h4{font-size:var(--fs-h4);font-weight:600;margin:var(--sp-3) 0 var(--sp-2);letter-spacing:-.01em}
.card p{font-size:14.5px;color:var(--ink-500);margin:0 0 var(--sp-3)}
.card .loc{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-500)}
.card .facts{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--brand-700);margin-top:auto;
  padding-top:var(--sp-3);border-top:1px solid var(--line-200)}
.card .stretched{position:absolute;inset:0;text-decoration:none}
.card .stretched:focus-visible{box-shadow:var(--focus)}
.badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 8px;border-radius:var(--r-sm);background:var(--brand-100);color:var(--brand-700);
  margin:0 4px 4px 0}
.badge--gold{background:var(--gold);color:var(--ink-900)}
.badge--work{background:#E7F4F1;color:var(--teal-700)}

/* ── botões de filtro ───────────────────────────────────── */
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.chip{min-height:36px;padding:0 var(--sp-4);display:inline-flex;align-items:center;border-radius:var(--r-pill);
  border:1.5px solid var(--line-300);font-size:13.5px;font-weight:500;color:var(--ink-700);background:#fff;cursor:pointer;
  transition:all var(--dur-micro) var(--ease-in-out);text-decoration:none}
.chip:hover{border-color:var(--brand-300);color:var(--brand-700)}
.chip[aria-pressed="true"],.chip.is-on{background:var(--brand-700);border-color:var(--brand-700);color:#fff}

/* ── tabela ─────────────────────────────────────────────── */
.tbl{border:1px solid var(--line-200);border-radius:var(--r-md);overflow:hidden;background:#fff}
.tbl-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:var(--brand-700);color:#fff;text-align:left;padding:11px 16px;font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
td{padding:11px 16px;border-bottom:1px solid var(--line-200);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:var(--surface-1)}
td .mono{font-size:12.5px;color:var(--brand-700);white-space:nowrap}

/* ── citação ────────────────────────────────────────────── */
.quote{background:var(--surface-inv);color:#fff;border-radius:var(--r-lg);border-left:4px solid var(--gold);
  padding:var(--sp-7);max-width:840px}
.quote p{font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(1.25rem,1rem+1vw,1.8rem);line-height:1.32;
  letter-spacing:-.015em;margin-bottom:var(--sp-4)}
.quote span{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(255,255,255,.55)}

/* ── mapa ───────────────────────────────────────────────── */
.mapwrap{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:var(--sp-7);align-items:center}
@media(max-width:900px){.mapwrap{grid-template-columns:1fr}}
.map{width:100%;height:auto;max-height:620px}
.map path{fill:var(--brand-100);stroke:#fff;stroke-width:1.4;transition:fill var(--dur-fast) var(--ease-out);
  cursor:pointer}
.map path:hover,.map path:focus{fill:var(--gold);outline:none}
.map path[data-n="1"]{fill:#C9DCEF}
.map path[data-n="2"]{fill:#9CBEDD}
.map path[data-n="3"]{fill:#6B9FCA}
.map path[data-n="4"]{fill:#3D78BF}
.map path[data-n="5"]{fill:#1A5AA6}
.map path[data-n="6"]{fill:#00428C}
.map path.hi{fill:var(--gold)}
.legend{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4);font-size:12.5px;color:var(--ink-500);
  font-family:'IBM Plex Mono',monospace}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.provlist{list-style:none;padding:0;margin:0;columns:2;column-gap:var(--sp-6)}
.provlist li{display:flex;justify-content:space-between;gap:var(--sp-3);padding:7px 0;border-bottom:1px solid var(--line-200);
  font-size:14px;break-inside:avoid}
.provlist b{font-family:'IBM Plex Mono',monospace;font-weight:500;color:var(--brand-700);font-variant-numeric:tabular-nums}
.provlist a{text-decoration:none}

/* ── ficha de obra ──────────────────────────────────────── */
.obra-hero{padding-top:clamp(40px,5vw,64px);padding-bottom:var(--sp-8);background:var(--surface-1);border-bottom:1px solid var(--line-200)}
.crumbs{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-500);margin-bottom:var(--sp-5)}
.crumbs a{color:var(--ink-500);text-decoration:none}
.crumbs a:hover{color:var(--brand-700);text-decoration:underline}
.obra-hero h1{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.03em;max-width:22ch;margin-bottom:var(--sp-4)}
.ficha{display:grid;grid-template-columns:340px 1fr;gap:var(--sp-8);align-items:start}
@media(max-width:900px){.ficha{grid-template-columns:1fr;gap:var(--sp-6)}}
.ficha dl{margin:0;border:1px solid var(--line-200);border-radius:var(--r-md);overflow:hidden;background:#fff}
.ficha dt{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-400);padding:9px var(--sp-4);background:var(--surface-1);border-bottom:1px solid var(--line-200)}
.ficha dd{margin:0;padding:9px var(--sp-4);font-size:14.5px;border-bottom:1px solid var(--line-200)}
.ficha dd:last-child{border-bottom:0}
.datalist{margin:0;border:1px solid var(--line-200);border-radius:var(--r-md);overflow:hidden;background:#fff;
  display:grid;grid-template-columns:150px 1fr}
.datalist dt{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-400);padding:11px var(--sp-4);background:var(--surface-1);border-bottom:1px solid var(--line-200)}
.datalist dd{margin:0;padding:11px var(--sp-4);font-size:14.5px;border-bottom:1px solid var(--line-200)}
.datalist dd:last-child,.datalist dt:nth-last-child(2){border-bottom:0}
.ficha dd .mono{color:var(--brand-700);font-size:13.5px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sp-3)}
.gal figure{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--surface-2);position:relative}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gal--tall{grid-template-columns:1fr}
.gal--tall img{aspect-ratio:16/10}

/* ── formulário ─────────────────────────────────────────── */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);max-width:720px}
.form .full{grid-column:1/-1}
@media(max-width:640px){.form{grid-template-columns:1fr}}
.field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-500);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--line-300);
  border-radius:var(--r-md);font:inherit;font-size:15px;background:#fff;color:var(--ink-900);
  transition:border-color var(--dur-micro) var(--ease-in-out),box-shadow var(--dur-micro) var(--ease-in-out)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-700);outline:none;box-shadow:0 0 0 3px var(--brand-100)}
.field .err{color:#B91C1C;font-size:13px;margin-top:5px;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#B91C1C}
.field.invalid .err{display:block}
.formnote{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-500);margin-top:var(--sp-4)}
.form-ok{background:#E6F4F1;border:1px solid #B9DED7;border-radius:var(--r-md);padding:var(--sp-5);color:var(--teal-700);font-size:15px}
.form-err{background:#FCEBEB;border:1px solid #F2B9B9;border-radius:var(--r-md);padding:var(--sp-5);color:#B91C1C;font-size:15px}
.btn[disabled]{opacity:.65;cursor:progress;transform:none}

/* ── rodapé ─────────────────────────────────────────────── */
footer{background:var(--brand-900);color:rgba(255,255,255,.72);padding:var(--sp-8) 0 0;position:relative}
footer::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--gold),var(--terra),var(--teal),var(--olive),var(--brand-500))}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--sp-6);padding-bottom:var(--sp-7)}
@media(max-width:860px){footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer .cols{grid-template-columns:1fr}}
footer h5{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:0 0 var(--sp-4)}
footer ul{list-style:none;padding:0;margin:0;font-size:14px}
footer li{margin-bottom:var(--sp-2)}
footer a{color:rgba(255,255,255,.72);text-decoration:none;display:inline-block;padding:4px 0;min-height:24px}
footer a:hover{color:#fff;text-decoration:underline}
footer .bar{border-top:1px solid rgba(255,255,255,.14);padding:var(--sp-4) 0;display:flex;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.5);font-family:'IBM Plex Mono',monospace}
footer .logo{height:30px;margin-bottom:var(--sp-4)}

/* ── bloco de nota ──────────────────────────────────────── */
.note{border:1px dashed var(--line-300);border-radius:var(--r-md);padding:var(--sp-5);background:var(--brand-050);
  font-size:14.5px;color:var(--ink-700);max-width:78ch}
.note b{color:var(--brand-700)}
.note--warn{background:#FEF3E2;border-color:#E8C68A}

/* ── listas de conteúdo ─────────────────────────────────── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:start}
@media(max-width:860px){.two-col{grid-template-columns:1fr;gap:var(--sp-6)}}
.mark{list-style:none;padding:0;margin:0}
.mark li{position:relative;padding-left:30px;margin-bottom:var(--sp-3)}
.mark li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--gold);
  transform:rotate(45deg)}
.timeline{list-style:none;padding:0;margin:0;position:relative}
.timeline::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--brand-700),var(--gold))}
.timeline li{position:relative;padding-left:56px;margin-bottom:var(--sp-5)}
.timeline li::before{content:"";position:absolute;left:11px;top:6px;width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--brand-700)}
.timeline b{display:block;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--brand-700);letter-spacing:.08em}
.timeline span{display:block;color:var(--ink-700);font-size:15px}

/* ── reveals ────────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
  transition-delay:var(--reveal-delay,0ms)}
[data-reveal].is-visible{opacity:1;transform:none}

/* ── movimento: camada 2 (v1.5) ──────────────────────────
   Regra: cada animação ou explica um dado, ou explica um espaço,
   ou explica um material. Nada é só decorativo. Só transform e
   opacity — nada de filter, nada de box-shadow animado.          */

/* (1) luz a atravessar o vitral */
.vitral::after{content:"";position:absolute;top:0;bottom:0;left:0;width:46%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24) 46%,rgba(255,255,255,.07) 72%,transparent);
  transform:translate3d(-130%,0,0);will-change:transform;
  animation:sweep 11s var(--ease-in-out) infinite}
@keyframes sweep{0%{transform:translate3d(-130%,0,0)}55%{transform:translate3d(340%,0,0)}100%{transform:translate3d(340%,0,0)}}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.09) 50%,transparent 58%);
  transform:translate3d(-30%,0,0);will-change:transform;
  animation:sweepHero 14s var(--ease-in-out) infinite}
@keyframes sweepHero{0%{transform:translate3d(-30%,0,0)}62%{transform:translate3d(30%,0,0)}100%{transform:translate3d(30%,0,0)}}

/* (2) sublinhado dourado que se apaga da esquerda para a direita.
       Só com rato: em ecrã táctil não há hover, por isso o sublinhado
       fixo mantém-se como forma de identificar a ligação.          */
@media(hover:hover) and (pointer:fine){
  main a:not(.btn):not(.chip):not(.stretched){
    text-decoration:underline;text-decoration-color:rgba(0,66,140,.32);text-underline-offset:3px;
    background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;
    background-position:0 100%;background-size:0 1.5px;
    transition:background-size var(--dur-fast) var(--ease-out),text-decoration-color var(--dur-fast) var(--ease-out)}
  main a:not(.btn):not(.chip):not(.stretched):hover,
  main a:not(.btn):not(.chip):not(.stretched):focus-visible{
    background-size:100% 1.5px;text-decoration-color:transparent}
}

/* (3) o número assenta: a contagem termina com um eco e um fio dourado */
.stat b{position:relative}
.stat b.settled{animation:settle var(--dur-slow) var(--ease-out)}
@keyframes settle{0%{transform:scale(1.045)}58%{transform:scale(.997)}100%{transform:scale(1)}}
.stat b.settled::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--gold);transform-origin:left center;
  animation:rule var(--dur-slow) var(--ease-out) forwards}
@keyframes rule{0%{transform:scaleX(0);opacity:0}28%{opacity:1}100%{transform:scaleX(1);opacity:0}}

/* (4) tom da textura de vitral: a cor codifica a linha de negócio */
.card .ph--vitral::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--tom,var(--gold));opacity:.26}

/* (5) anexo de ficheiro: ficha de confirmação e barra de envio */
.fileinfo{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;
  background:var(--brand-050);border:1px solid var(--brand-200);border-radius:var(--r-md);
  font-size:13px;color:var(--brand-700)}
.fileinfo__ico{width:18px;height:18px;flex:none;color:var(--brand-600)}
.fileinfo__nome{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fileinfo__tam{color:var(--ink-500);font-family:'IBM Plex Mono',monospace;font-size:12px;
  white-space:nowrap;flex:none}
.fileinfo__x{margin-left:auto;flex:none;width:26px;height:26px;border:0;background:transparent;
  color:var(--ink-500);border-radius:var(--r-sm);cursor:pointer;font-size:17px;line-height:1}
.fileinfo__x:hover{background:var(--brand-100);color:var(--brand-700)}
.upbar{margin-top:12px;height:3px;background:var(--brand-100);border-radius:2px;overflow:hidden}
.upbar i{display:block;height:100%;width:38%;background:var(--gold);
  animation:upslide 1.1s var(--ease-in-out) infinite}
@keyframes upslide{0%{transform:translateX(-100%)}100%{transform:translateX(360%)}}

/* ── responsivo ─────────────────────────────────────────── */
@media(max-width:1024px){
  :root{--gutter:24px}
  section{padding:var(--sp-8) 0}
  .stats .wrap{grid-template-columns:repeat(3,1fr)}
}
/* Gaveta do menu — breakpoint 1024px (abaixo disso a navegacao desktop nao cabe) */
@media(max-width:1024px){
  .burger{display:flex}
  .mainnav{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(380px,86vw);
    z-index:2;
    background:#fff;
    flex-direction:column;align-items:stretch;gap:0;
    padding:var(--sp-6);
    padding-bottom:max(var(--sp-6),env(safe-area-inset-bottom));
    box-shadow:var(--sh-4);
    transform:translateX(101%);
    visibility:hidden;
    overflow-y:auto;overscroll-behavior:contain;
    transition:transform var(--dur-fast) var(--ease-out),visibility var(--dur-fast) var(--ease-in-out)}
  .mainnav.open{transform:translateX(0);visibility:visible}
  .mainnav > a{padding:var(--sp-4) 0;min-height:52px;display:flex;align-items:center;
    border-bottom:1px solid var(--line-200);font-size:17px}
  .mainnav .btn{margin-top:var(--sp-5);justify-content:center;min-height:50px}
  .drawer-head{display:flex}
}
@media(max-width:640px){
  .mainnav{width:100%}
  .mainnav > a{min-height:56px}
}
/* Abaixo de 430px o subtitulo da marca nao cabe ao lado do botao de menu:
   sem esta regra o header transborda e o botao sai do ecrã. */
@media(max-width:430px){
  .brand > span > span{display:none}
  .brand b{font-size:16px}
  .brand{gap:var(--sp-2)}
}
@media(max-width:860px){
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .provlist{columns:1}
}
@media(max-width:520px){
  .stats .wrap{grid-template-columns:1fr}
  .hero__proof{gap:var(--sp-4)}
}
.scrim{position:fixed;inset:0;background:rgba(10,16,28,.55);z-index:1;opacity:0;pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-out)}
.scrim.on{opacity:1;pointer-events:auto}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .rv>span{transform:none!important;opacity:1!important}
  .vitral,.hero__vitral img{animation:none!important}
  .vitral::after,.hero::after{display:none!important}
  .stat b.settled{animation:none!important}
  .stat b.settled::after{animation:none!important}
  .upbar i{animation:none!important;width:100%;transform:none}
  .mainnav{transition:none!important}
}

@media print{
  .topbar,.nav,.hero__actions,.vitral,footer,.skip,.hero::after,.fileinfo,.upbar{display:none!important}
  body{font-size:11pt}
  a{text-decoration:none;color:inherit}
  section{padding:12pt 0}
}