/* ══════════════════════════════════════════════════════════════════════════
   ZONAS · landing pages por distrito e região  (outubro de 2026)

   Geradas por scripts/zonas/gerar.py. Usam o vocabulário do landing.css
   (x-in, x-k, xs-*, xc-*, xq-*, xr-*, xz, xrod) e acrescentam aqui só o que é
   delas: o topo com navegação, o hero com o cartão do número, o gráfico do
   mês a mês, a lista de distritos e a lista de concelhos.
   ══════════════════════════════════════════════════════════════════════════ */

body.zn{background:var(--x-preto); color:var(--x-osso); margin:0}
.zn .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.zn em{font-style:normal}

/* ── o topo ───────────────────────────────────────────────────────────── */
.zt{position:sticky; top:0; z-index:50; background:rgba(11,11,10,.86);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--x-linha-e)}
.zt-in{display:flex; align-items:center; gap:clamp(12px,2vw,32px); min-height:68px}
.zt-marca{display:inline-flex; align-items:center; gap:10px; color:var(--x-osso); text-decoration:none; margin-right:auto}
.zt-marca svg{width:30px; height:30px; flex:none}
.zt-marca b{display:flex; flex-direction:column; font-size:14px; font-weight:600; letter-spacing:-.01em; line-height:1.15}
.zt-marca b span{font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(242,242,238,.5)}
.zt-nav{display:flex; gap:4px}
.zt-nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:999px;
  color:rgba(242,242,238,.78); text-decoration:none; font-size:14px; font-weight:500; transition:background-color .2s, color .2s}
.zt-nav a:hover{background:rgba(242,242,238,.08); color:var(--x-osso)}
.zn-solar .zt-nav a[href*="paineis"],.zn-analise .zt-nav a[href*="analise"]{color:var(--x-lima)}
.zt-tel{color:var(--x-osso); font-size:14px; font-weight:500; text-decoration:none; white-space:nowrap}
.zt-tel:hover{color:var(--x-lima)}
.zt-cta{display:inline-flex; align-items:center; min-height:42px; padding:0 18px; border-radius:999px;
  background:var(--x-lima); color:var(--x-preto); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap}
.zt-cta:hover{background:#DCF76E}
@media(max-width:999px){ .zt-nav{display:none} }
@media(min-width:1000px) and (max-width:1239px){ .zt-tel{display:none} .zt-nav a{padding:0 10px} }
@media(max-width:599px){ .zt-tel{display:none} .zt-marca b span{display:none} .zt-cta{min-height:40px; padding:0 14px; font-size:13.5px} }

/* ── o hero ───────────────────────────────────────────────────────────── */
.zh{position:relative; overflow:hidden; padding:clamp(36px,5vw,72px) 0 clamp(64px,8vw,120px);
  background:radial-gradient(80% 70% at 85% 0%, rgba(208,245,61,.13), transparent 60%), var(--x-preto)}
.zh::after{content:""; position:absolute; right:-6vw; bottom:-14vw; width:min(52vw,720px); aspect-ratio:1; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='97.5 97.5 885 885'%3E%3Cpolygon fill='none' stroke='%23D0F53D' stroke-opacity='.14' stroke-width='3' points='715.98 478.6 502.66 783.02 470.22 829.33 400.21 929.24 433.59 817.81 448.51 767.97 507.1 572.34 364.02 599.48 564.26 300.95 596.19 253.31 664.99 150.76 636.96 264.32 624.48 314.89 576.18 510.67 715.98 478.6'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:rotate(-8deg)}
.zh-g{display:grid; gap:40px clamp(40px,5vw,96px); align-items:end; position:relative; z-index:1}
@media(min-width:1000px){ .zh-g{grid-template-columns:minmax(0,7fr) minmax(0,4fr)} }
.zh-mig ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px 10px; margin:0 0 clamp(28px,4vw,56px); padding:0;
  font-size:13px; color:rgba(242,242,238,.55)}
.zh-mig li+li::before{content:"/"; margin-right:10px; opacity:.5}
.zh-mig a{color:rgba(242,242,238,.75); text-decoration:none}
.zh-mig a:hover{color:var(--x-lima)}
.zh-mig [aria-current]{color:var(--x-osso)}
.zh-t{color:var(--x-osso); font-size:clamp(44px,7.4vw,124px); font-weight:500; letter-spacing:-.058em; line-height:.92; max-width:12ch}
.zh-ind .zh-t{max-width:16ch; font-size:clamp(40px,6.4vw,108px)}
.zh-t em{display:block; color:var(--x-lima)}
.zh-ind .zh-t em{display:inline}
.zh-s{margin-top:clamp(20px,2.4vw,32px); max-width:46ch; font-size:clamp(17px,1.5vw,21px); line-height:1.45; color:rgba(242,242,238,.78)}
.zh-s b{color:var(--x-osso); font-weight:600}
.zh-ctas{display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:clamp(26px,3vw,40px)}
.zn .zh .btn-p,.zn .zh a.btn-p[href]{background:var(--x-lima); color:var(--x-preto); min-height:58px; padding:0 30px; border-radius:999px;
  display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:600; text-decoration:none}
.zh-sec{display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--x-osso); font-weight:500; text-decoration:none;
  border-bottom:1.5px solid rgba(242,242,238,.3)}
.zh-sec:hover{border-color:var(--x-lima); color:var(--x-lima)}

.zh-escolha{margin-top:clamp(26px,3vw,40px); max-width:560px}
.zh-escolha-t{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(242,242,238,.6)}
.zh-picks{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.zh-pick{display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 24px; border-radius:999px;
  border:1.5px solid rgba(242,242,238,.35); color:var(--x-osso); font-weight:600; font-size:15.5px; text-decoration:none;
  transition:background-color .2s, color .2s, border-color .2s, transform .25s var(--x-ease)}
.zh-pick:hover{background:var(--x-lima); border-color:var(--x-lima); color:var(--x-preto); transform:translateY(-2px)}
.zh-pick:first-child{background:var(--x-lima); border-color:var(--x-lima); color:var(--x-preto)}
.zh-escolha-n{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:16px; font-size:12.5px; color:rgba(242,242,238,.6)}
.zh-escolha-n span::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--x-lima); margin-right:8px; vertical-align:2px}

.zh-card{position:relative; padding:clamp(24px,2.6vw,36px); border-radius:24px; background:var(--x-lima); color:var(--x-preto);
  box-shadow:0 30px 70px -30px rgba(208,245,61,.45)}
.zh-card-k{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(11,11,10,.65)}
.zh-card-v{display:flex; flex-direction:column; margin-top:10px}
.zh-card-v b{font-size:clamp(76px,8.4vw,132px); font-weight:500; letter-spacing:-.065em; line-height:.86; font-variant-numeric:tabular-nums}
.zh-card-v span{margin-top:8px; font-size:17px; font-weight:600}
.zh-card-d{margin-top:16px; padding-top:16px; border-top:1px solid rgba(11,11,10,.2); font-size:14.5px; line-height:1.5; color:rgba(11,11,10,.78)}
.zh-card-f{margin-top:12px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(11,11,10,.55)}
.zh-card-l{list-style:none; margin:14px 0 0; padding:0}
.zh-card-l li{display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:4px 14px; padding:14px 0; border-top:1px solid rgba(11,11,10,.18)}
.zh-card-l li:first-child{border-top:0}
.zh-card-l b{font-size:clamp(34px,3.4vw,52px); font-weight:500; letter-spacing:-.05em; line-height:1; color:var(--x-preto)}
.zh-card-l span{font-size:14.5px; line-height:1.35; color:rgba(11,11,10,.78)}

/* ── o sol na zona ────────────────────────────────────────────────────── */
.zs{background:var(--x-lima); color:var(--x-preto); padding:var(--x-pad) 0}
.zs-g{display:grid; gap:44px clamp(40px,5vw,96px); align-items:center}
@media(min-width:1000px){ .zs-g{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} }
.zs-t{color:var(--x-preto); font-size:clamp(34px,4.4vw,72px); font-weight:500; letter-spacing:-.05em; line-height:.98}
.zs-t em{background:var(--x-preto); color:var(--x-lima); padding:0 .14em; border-radius:.12em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.zs-factos{list-style:none; margin:clamp(24px,3vw,40px) 0 0; padding:0}
.zs-factos li{padding:14px 0; border-top:1px solid rgba(11,11,10,.2); font-size:16px; line-height:1.45; color:rgba(11,11,10,.78)}
.zs-factos b{color:var(--x-preto); font-weight:600}
.zs-nota{margin-top:20px; font-size:13px; line-height:1.55; color:rgba(11,11,10,.66); max-width:62ch}
.zs-nota a{color:var(--x-preto); font-weight:600}

.zg{margin:0; padding:clamp(18px,2.4vw,32px); border-radius:24px; background:var(--x-preto)}
.zg svg{display:block; width:100%; height:auto}
.zg rect{fill:var(--x-lima)}
.zg g:hover rect{fill:#DCF76E}
.zg .zg-v{fill:rgba(242,242,238,.85); font-size:13px; font-weight:600; font-family:inherit}
.zg .zg-m{fill:rgba(242,242,238,.55); font-size:13px; font-family:inherit}
.zg figcaption{margin-top:12px; font-size:12.5px; color:rgba(242,242,238,.6)}
@media(max-width:599px){ .zg .zg-v{font-size:17px} .zg .zg-m{font-size:16px} }

/* lista dos 20, ordenada pelo sol */
.zr{list-style:none; margin:0; padding:clamp(14px,2vw,26px); border-radius:24px; background:var(--x-preto); counter-reset:z}
.zr li a{display:grid; grid-template-columns:minmax(110px,9.5rem) 1fr auto; align-items:center; gap:14px;
  min-height:40px; padding:4px 10px; border-radius:10px; color:var(--x-osso); text-decoration:none; font-size:14.5px}
.zr li a:hover{background:rgba(242,242,238,.07)}
.zr li.eu a{background:rgba(208,245,61,.14)}
.zr-n{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.zr-b{position:relative; height:10px; border-radius:999px; background:rgba(242,242,238,.08); overflow:hidden}
.zr-b i{position:absolute; inset:0 auto 0 0; width:calc(var(--p) * 1%); background:var(--x-lima); border-radius:inherit}
.zr-v{font-variant-numeric:tabular-nums; font-weight:600; color:var(--x-lima); min-width:3.6em; text-align:right}

/* ── modalidades sem fotografia ───────────────────────────────────────── */
section.xs.zm{padding:var(--x-pad) 0}
.zs + section.xs.zm{padding-top:var(--x-pad)}
.zm-cab{padding-top:0 !important}
.zm-t{font-size:clamp(36px,4.8vw,80px) !important}

/* ── processo com N passos ────────────────────────────────────────────── */
@media(min-width:1000px){
  .zp-l{grid-template-columns:repeat(auto-fit,minmax(0,1fr)) !important; display:grid; grid-auto-flow:column}
}

/* ── ligação cruzada ──────────────────────────────────────────────────── */
.zx{background:var(--x-preto); padding:clamp(56px,7vw,110px) 0; border-top:1px solid var(--x-linha-e)}
.zx-g{display:grid; gap:28px clamp(40px,5vw,96px); align-items:end}
@media(min-width:1000px){ .zx-g{grid-template-columns:minmax(0,7fr) minmax(0,4fr)} }
.zx-t{color:var(--x-osso); font-size:clamp(30px,3.6vw,58px); font-weight:500; letter-spacing:-.045em; line-height:1}
.zx-t em{color:var(--x-lima)}
.zx-s{margin-top:16px; max-width:56ch; font-size:16px; line-height:1.55; color:rgba(242,242,238,.72)}
.zx-s b{color:var(--x-osso)}
.zx-l{display:flex; justify-content:space-between; align-items:center; gap:18px; min-height:84px; padding:20px 26px;
  border-radius:20px; border:1.5px solid var(--x-lima); color:var(--x-osso); text-decoration:none; font-size:18px; font-weight:500; letter-spacing:-.02em;
  transition:background-color .25s, color .25s}
.zx-l i{font-style:normal; font-size:24px; color:var(--x-lima); transition:transform .25s var(--x-ease)}
.zx-l:hover{background:var(--x-lima); color:var(--x-preto)}
.zx-l:hover i{color:var(--x-preto); transform:translateX(4px)}

/* ── concelhos ────────────────────────────────────────────────────────── */
.zc{background:var(--x-osso); color:var(--x-preto); padding:var(--x-pad) 0}
.zc .x-k{color:rgba(11,11,10,.62)} .zc .x-k::before{background:var(--x-preto)}
.zc-g{display:grid; gap:36px clamp(40px,5vw,96px); align-items:start}
@media(min-width:1000px){ .zc-g{grid-template-columns:minmax(0,4fr) minmax(0,7fr)} }
.zc-t{color:var(--x-preto); font-size:clamp(32px,3.8vw,62px); font-weight:500; letter-spacing:-.05em; line-height:1}
.zc-s{margin-top:16px; font-size:16px; line-height:1.55; color:rgba(11,11,10,.7); max-width:40ch}
.zc-l{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.zc-l li{padding:10px 16px; border-radius:999px; border:1.5px solid rgba(11,11,10,.18); font-size:15px; font-weight:500; background:#fff}

/* ── outras zonas ─────────────────────────────────────────────────────── */
.zo{background:var(--x-preto); padding:var(--x-pad) 0 clamp(56px,6vw,96px)}
.zo-t{color:var(--x-osso); font-size:clamp(30px,3.6vw,58px); font-weight:500; letter-spacing:-.045em; line-height:1}
.zo-viz{display:grid; gap:12px; margin-top:clamp(28px,3vw,44px)}
@media(min-width:760px){ .zo-viz{grid-template-columns:repeat(3,minmax(0,1fr))} }
.zo-z{display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:end; padding:22px 24px; border-radius:20px;
  border:1px solid var(--x-linha-e); color:var(--x-osso); text-decoration:none; transition:border-color .25s, background-color .25s}
.zo-z span{grid-column:1 / -1; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(242,242,238,.55)}
.zo-z b{font-size:clamp(24px,2.4vw,34px); font-weight:500; letter-spacing:-.04em}
.zo-z i{font-style:normal; font-size:22px; color:var(--x-lima); transition:transform .25s var(--x-ease)}
.zo-z:hover{border-color:var(--x-lima); background:rgba(208,245,61,.06)}
.zo-z:hover i{transform:translateX(4px)}
.zo-todas{list-style:none; display:flex; flex-wrap:wrap; gap:4px 6px; margin:clamp(28px,3vw,40px) 0 0; padding:22px 0 0; border-top:1px solid var(--x-linha-e)}
.zo-todas a{display:inline-flex; align-items:center; min-height:44px; padding:0 12px; border-radius:999px; color:rgba(242,242,238,.75); text-decoration:none; font-size:14px}
.zo-todas a:hover{color:var(--x-lima); background:rgba(242,242,238,.06)}
.zo-todas a[aria-current]{color:var(--x-preto); background:var(--x-lima)}

/* ── índice da análise: grelha de zonas ───────────────────────────────── */
.zi{background:var(--x-osso); color:var(--x-preto); padding:var(--x-pad) 0}
.zi .x-k{color:rgba(11,11,10,.62)} .zi .x-k::before{background:var(--x-preto)}
.zi-t{color:var(--x-preto); font-size:clamp(34px,4.4vw,72px); font-weight:500; letter-spacing:-.05em; line-height:1}
.zi-g{list-style:none; margin:clamp(32px,4vw,56px) 0 0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.zi-g a{display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:center; padding:20px 22px; border-radius:18px;
  background:#fff; border:1px solid rgba(11,11,10,.1); color:var(--x-preto); text-decoration:none; transition:transform .25s var(--x-ease), border-color .25s}
.zi-g b{font-size:21px; font-weight:500; letter-spacing:-.03em; color:var(--x-preto)}
.zi-g span{grid-row:2; font-size:13px; color:rgba(11,11,10,.6)}
.zi-g i{grid-row:1 / span 2; grid-column:2; font-style:normal; font-size:20px}
.zi-g a:hover{transform:translateY(-3px); border-color:var(--x-preto)}

/* a fatura de exemplo, estática nestas páginas */
.zn .xf{border-top:1px solid var(--x-linha-e)}
.zn .xp.zpb{padding-bottom:var(--x-pad)}

/* o rodapé com os 20 distritos */
.xrod-zonas ul{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px}
.xrod-zonas li{font-size:14px}

/* atalho flutuante: aqui está sempre ligado em telemóvel */
/* (o atalho liga-se com a rolagem, ver o fim de cada página) */
@media(max-width:759px){ .zn main{padding-bottom:84px} }
.zn-sim .zt-nav a[href*="simulador"],.zn-setor .zt-nav a[href*="setores"]{color:var(--x-lima)}
.zn-sim .zt-nav a[href*="paineis"]{color:rgba(242,242,238,.78)}

/* ── hero das páginas interiores, segunda volta (12 out.) ─────────────────
   Fotografia por trás, título mais contido, tudo no primeiro ecrã. */
body.zn .zh{background:
    linear-gradient(90deg, rgba(11,11,10,.94) 0%, rgba(11,11,10,.82) 45%, rgba(11,11,10,.55) 100%),
    linear-gradient(0deg, #0B0B0A 0%, rgba(11,11,10,0) 35%),
    url("img/hero-1280.webp") center 40% / cover no-repeat;
  padding:clamp(28px,3.4vw,56px) 0 clamp(48px,5.4vw,88px)}
body.zn-solar .zh,body.zn-sim .zh,body.zn-setor .zh{background:
    linear-gradient(90deg, rgba(11,11,10,.94) 0%, rgba(11,11,10,.8) 45%, rgba(11,11,10,.45) 100%),
    linear-gradient(0deg, #0B0B0A 0%, rgba(11,11,10,0) 35%),
    url("img/solar-paineis-1170.webp") center 55% / cover no-repeat}
body.zn .zh::after{opacity:.5}
body.zn .zh-t{font-size:clamp(40px,5.2vw,84px); max-width:15ch; line-height:.95}
body.zn .zh-t em{display:inline}
body.zn .zh-ind .zh-t{font-size:clamp(38px,4.8vw,78px); max-width:18ch}
body.zn .zh-s{font-size:clamp(16px,1.3vw,19px); max-width:52ch}
body.zn .zh-mig ol{margin-bottom:clamp(20px,2.6vw,36px)}
body.zn .zh-g{align-items:center}
.zh-card{backdrop-filter:blur(6px)}
.zh-card-v b,.zh-card-v span{color:var(--x-preto)}
.zh-card-v b{font-size:clamp(68px,6.6vw,108px)}
@media(max-width:759px){
  body.zn .zh{background-position:center, center, 70% 40%}
  body.zn .zh-t{font-size:clamp(34px,9.6vw,46px)}
  .zh-card-v b{font-size:64px}
}