/* ══════════════════════════════════════════════════════════════════════════
   SIMULADOR SOLAR DO TELHADO  (outubro de 2026)

   Carregado depois de estilos.css, landing.css e zonas.css. Classes ss-*
   (o simulador) e sc-* (a secção "Como se calcula"). Mobile first.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-sim .zt-nav a[href*="paineis"]{color:var(--x-lima)}
.ss [hidden],.sc [hidden]{display:none !important}

/* ── a secção ─────────────────────────────────────────────────────────── */
.ss{background:var(--x-osso); color:var(--x-preto); padding:clamp(56px,7vw,112px) 0}
.ss .x-k{color:rgba(11,11,10,.62)}
.ss .x-k::before{background:var(--x-preto)}
.ss-t{color:var(--x-preto); font-size:clamp(34px,4.4vw,72px); font-weight:500; letter-spacing:-.05em; line-height:.98}
.ss-t em{background:var(--x-preto); color:var(--x-lima); padding:0 .14em; border-radius:.12em}
.ss-cab{margin-bottom:clamp(24px,3vw,40px)}
/* o estilos.css desenha todos os <form> como cartão; aqui não */
.ss-procura{background:none; border:0; border-radius:0; padding:0; margin:0}
/* o atalho flutuante não tapa o mapa nem o 3D enquanto se usa o simulador */
body.ss-dentro .xflut{transform:translate(-50%,160%) !important}

.ss-semjs{max-width:62ch}
.ss-semjs p{font-size:17px; line-height:1.55; color:rgba(11,11,10,.78); margin-bottom:20px}
.ss-semjs .btn-p{display:inline-flex; align-items:center; min-height:54px; padding:0 26px; border-radius:999px;
  background:var(--x-preto); color:var(--x-lima); font-weight:600; text-decoration:none}

/* os passos */
.ss-prog{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:0; scroll-margin-top:84px}
.ss-prog li{display:inline-flex; align-items:center; min-height:36px; padding:0 16px; border-radius:999px;
  border:1.5px solid rgba(11,11,10,.18); font-size:13.5px; font-weight:600; color:rgba(11,11,10,.55)}
.ss-prog li[aria-current]{background:var(--x-preto); border-color:var(--x-preto); color:var(--x-lima)}

.ss-g{display:grid; gap:16px; align-items:start}
@media(min-width:1000px){
  .ss-g{grid-template-columns:minmax(330px,4fr) minmax(0,7fr); gap:24px}
  .ss-palco{position:sticky; top:84px}
}

/* ── os controlos ─────────────────────────────────────────────────────── */
.ss-ctl{background:#fff; border:1px solid var(--x-linha-c); border-radius:24px; padding:clamp(20px,2.4vw,32px)}
.ss-pt{color:var(--x-preto); font-size:clamp(26px,2.6vw,36px); font-weight:500; letter-spacing:-.04em; line-height:1.05; margin-bottom:20px; outline:none}
.ss-txt{font-size:15.5px; line-height:1.55; color:rgba(11,11,10,.75); margin:14px 0 4px}
.ss-txt b{color:var(--x-preto)}
.ss-l{display:flex; justify-content:space-between; gap:12px; margin:18px 0 6px; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(11,11,10,.6)}
.ss-l output{letter-spacing:0; text-transform:none; font-size:14px; color:var(--x-preto)}
.ss-in{display:block; width:100%; min-height:48px; padding:8px 2px; border:0; border-bottom:1.5px solid rgba(11,11,10,.3);
  border-radius:0; background:transparent; color:var(--x-preto); font-family:inherit; font-size:17px; font-weight:500; line-height:1.3}
.ss-in:focus{outline:none; border-bottom-color:var(--x-preto); box-shadow:0 2px 0 0 var(--x-lima)}
.ss-sel{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:28px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B0B0A' stroke-width='1.6'/%3E%3C/svg%3E") right 4px center/12px no-repeat}
.ss-linha{display:flex; gap:10px; align-items:flex-end}
.ss-linha .ss-in{flex:1; min-width:0}
.ss-g2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.ss-ajuda{margin-top:8px; font-size:13.5px; line-height:1.5; color:rgba(11,11,10,.62)}
.ss-ajuda:empty,.ss-zona:empty,.ss-area:empty{display:none}
.ss-ou{display:flex; align-items:center; gap:12px; margin:22px 0 2px; font-size:12.5px; color:rgba(11,11,10,.55)}
.ss-ou::before,.ss-ou::after{content:""; flex:1; height:1px; background:var(--x-linha-c)}
.ss-zona,.ss-area{margin-top:16px; padding:12px 14px; border-radius:14px; background:rgba(208,245,61,.35);
  font-size:14.5px; line-height:1.5; color:rgba(11,11,10,.85)}
.ss-zona b,.ss-area b{color:var(--x-preto)}

.ss-resultados{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; max-height:220px; overflow:auto}
.ss-res-b{display:block; width:100%; min-height:44px; padding:10px 12px; border-radius:12px; border:1px solid var(--x-linha-c);
  background:#fff; color:var(--x-preto); font-family:inherit; font-size:13.5px; font-weight:400; line-height:1.35; text-align:left; cursor:pointer}
.ss-res-b[aria-pressed="true"]{border-color:var(--x-preto); background:rgba(208,245,61,.3)}

/* botões e pílulas */
.ss-b{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 20px;
  border-radius:999px; border:1.5px solid var(--x-preto); background:transparent; color:var(--x-preto);
  font-family:inherit; font-size:14.5px; font-weight:600; line-height:1; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .2s, color .2s, transform .25s var(--x-ease)}
.ss-b:hover{background:rgba(11,11,10,.06)}
.ss-b-p{background:var(--x-preto); color:var(--x-lima)}
.ss-b-p:hover{background:#26261f}
.ss-b:disabled{opacity:.38; cursor:not-allowed}
.ss-nav{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:26px}
.ss-nav .ss-b-p{margin-left:auto}
.ss-pilulas{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.ss-pil{min-height:46px; padding:0 20px; border-radius:999px; border:1.5px solid rgba(11,11,10,.3); background:transparent;
  color:var(--x-preto); font-family:inherit; font-size:15px; font-weight:600; line-height:1; cursor:pointer; transition:background-color .2s, border-color .2s}
.ss-pil[aria-checked="true"]{background:var(--x-lima); border-color:var(--x-lima)}
.ss-pil:disabled{opacity:.38; cursor:not-allowed}
.ss-pilulas + .ss-modo{margin-top:6px}

.ss-range{display:block; width:100%; min-height:44px; margin:0; accent-color:var(--x-lima); cursor:pointer}
.ss-ctl .ss-range{accent-color:var(--x-preto)}

/* ── o palco: mapa e 3D ───────────────────────────────────────────────── */
.ss-palco{background:var(--x-preto); color:var(--x-osso); border-radius:24px; overflow:hidden}
.ss-mapa,.ss-3d{position:relative; height:clamp(340px,64vh,640px); background:#1b1c17}
@media(max-width:759px){ .ss-mapa,.ss-3d{height:min(70vh,460px)} }
.ss-mapa{z-index:0; font-family:inherit}
.ss-mapa.leaflet-container{background:#1b1c17; cursor:crosshair}
.ss-mapa.leaflet-container .leaflet-control-attribution{font-size:10.5px; line-height:1.4; max-width:100%; white-space:normal;
  background:rgba(11,11,10,.72); color:rgba(242,242,238,.8)}
.ss-mapa .leaflet-control-attribution a{color:var(--x-lima)}
.ss-mapa .leaflet-control-zoom a{width:40px; height:40px; line-height:38px}
.ss-mapa-aviso{margin:0; padding:12px 16px; background:var(--x-lima); color:var(--x-preto); font-size:14px; font-weight:500; line-height:1.4}
.ss-ferr{display:flex; flex-wrap:wrap; gap:8px; padding:12px; border-top:1px solid var(--x-linha-e)}
.ss-palco .ss-b{border-color:rgba(242,242,238,.45); color:var(--x-osso)}
.ss-palco .ss-b:hover{background:rgba(242,242,238,.08)}
.ss-palco .ss-b-p{background:var(--x-lima); border-color:var(--x-lima); color:var(--x-preto)}
.ss-palco .ss-b-p:hover{background:#DCF76E}
.ss-ferr .ss-b-p{margin-left:auto}
.ss-ferr .ss-b-p[hidden]{display:none !important}

.ss-3d canvas{display:block; width:100% !important; height:100% !important; touch-action:none}
.ss-3d-msg{position:absolute; inset:0; display:grid; place-items:center; margin:0; color:rgba(242,242,238,.7); font-size:15px}
.ss-bussola{position:absolute; top:12px; right:12px; width:44px; height:44px; pointer-events:none}
.ss-bussola svg{width:100%; height:100%; transform:rotate(var(--a,0deg))}
.ss-bussola circle{fill:rgba(11,11,10,.6); stroke:rgba(242,242,238,.4)}
.ss-bussola text{fill:var(--x-osso); font-size:9px; font-weight:700; font-family:inherit}
.ss-bussola path{fill:rgba(242,242,238,.45)}
.ss-bussola path.n{fill:var(--x-lima)}
.ss-2d{display:block; width:100%; height:100%}
.ss-2d-n{position:absolute; top:12px; right:16px; margin:0; font-weight:700; color:var(--x-lima)}

.ss-sol-info{margin:0; padding:12px 16px 0; font-size:13.5px; color:rgba(242,242,238,.75); min-height:1.5em}
.ss-tempo{display:grid; gap:4px 20px; padding:4px 16px 16px}
@media(min-width:600px){ .ss-tempo{grid-template-columns:1fr 1fr} .ss-tempo-b{grid-column:1 / -1} }
.ss-tempo .ss-l{color:rgba(242,242,238,.6); margin-top:12px}
.ss-tempo .ss-l output{color:var(--x-osso)}
.ss-tempo-b{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}

/* ── o resultado ──────────────────────────────────────────────────────── */
.ss-res{margin-top:clamp(20px,2.4vw,32px); outline:none; scroll-margin-top:84px}
.ss-res-g{display:grid; gap:16px}
@media(min-width:1000px){ .ss-res-g{grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:24px; align-items:start} }
.ss-num{background:var(--x-preto); color:var(--x-osso); border-radius:24px; padding:clamp(22px,2.6vw,36px)}
.ss .ss-num .x-k{color:rgba(242,242,238,.62)}
.ss .ss-num .x-k::before{background:var(--x-lima)}
.ss-kpi{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px; margin:0}
@media(min-width:600px){ .ss-kpi{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ss-kpi div{border-top:1px solid var(--x-linha-e); padding-top:12px}
.ss-kpi dt{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(242,242,238,.6)}
.ss-kpi dd{margin:6px 0 0; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  font-size:clamp(36px,4.2vw,60px); font-weight:500; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; color:var(--x-osso)}
.ss-kpi small{font-size:16px; letter-spacing:0; font-weight:600; color:rgba(242,242,238,.7)}
.ss-kpi-g{grid-column:1 / -1}
@media(min-width:600px){ .ss-kpi-g{grid-column:auto} }
.ss-kpi-g dd{color:var(--x-lima)}
.ss-r-zona{margin-top:18px; font-size:14px; line-height:1.55; color:rgba(242,242,238,.72)}
.ss-r-zona b{color:var(--x-osso)}
.ss-r-aviso{margin-top:12px; padding:12px 14px; border-radius:14px; border:1px solid #FFD90A; color:#FFE45C; font-size:14px; line-height:1.5}

.ss-graf{margin:22px 0 0}
.ss-graf svg{display:block; width:100%; height:auto}
.ss-graf rect{fill:var(--x-lima)}
.ss-graf .ss-gv{fill:rgba(242,242,238,.85); font-size:12.5px; font-weight:600; font-family:inherit}
.ss-graf .ss-gm{fill:rgba(242,242,238,.55); font-size:13px; font-family:inherit}
.ss-graf figcaption{margin-top:10px; font-size:12.5px; color:rgba(242,242,238,.6)}
@media(max-width:599px){ .ss-graf .ss-gv{font-size:0} .ss-graf .ss-gm{font-size:17px} }
.ss .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.ss-press{margin-top:20px; border-top:1px solid var(--x-linha-e); padding-top:6px}
.ss-press summary{display:flex; align-items:center; min-height:44px; cursor:pointer; font-size:14.5px; font-weight:600; color:var(--x-osso)}
.ss-press ul{margin:4px 0 0; padding-left:18px; font-size:14px; line-height:1.55; color:rgba(242,242,238,.72)}
.ss-press li{margin:4px 0}

.ss-cta{background:var(--x-lima); color:var(--x-preto); border-radius:24px; padding:clamp(22px,2.6vw,36px)}
.ss-cta-k{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(11,11,10,.65)}
.ss-cta-t{margin-top:10px; font-size:clamp(26px,2.6vw,36px); font-weight:500; letter-spacing:-.045em; line-height:1.02}
.ss-cta-s{margin-top:12px; font-size:15.5px; line-height:1.5; color:rgba(11,11,10,.78)}
.ss-cta-b{display:flex; align-items:center; justify-content:center; min-height:56px; margin-top:20px; padding:0 22px; border-radius:999px;
  background:var(--x-preto); color:var(--x-lima); font-size:16px; font-weight:600; text-decoration:none; text-align:center;
  transition:transform .25s var(--x-ease), background-color .2s}
.ss-cta-b:hover{background:#26261f; transform:translateY(-2px)}
.ss-cta-m{margin-top:18px; padding-top:16px; border-top:1px solid rgba(11,11,10,.2); font-size:15px; line-height:1.5; color:rgba(11,11,10,.82)}
.ss-cta-m b{color:var(--x-preto)}
.ss-cta-z{display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:8px; color:var(--x-preto); font-weight:600; font-size:14.5px}

/* ── como se calcula ──────────────────────────────────────────────────── */
.sc{background:var(--x-preto); color:var(--x-osso); padding:var(--x-pad) 0}
.sc .x-k-esc{color:rgba(242,242,238,.62)}
.sc .x-k-esc::before{background:var(--x-lima)}
.sc-g{display:grid; gap:36px clamp(40px,5vw,96px); align-items:start}
@media(min-width:1000px){ .sc-g{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} }
.sc-t{color:var(--x-osso); font-size:clamp(34px,4.4vw,72px); font-weight:500; letter-spacing:-.05em; line-height:.98}
.sc-t em{color:var(--x-lima)}
.sc-s{margin-top:18px; max-width:46ch; font-size:16px; line-height:1.55; color:rgba(242,242,238,.72)}
.sc-l{list-style:none; margin:0; padding:0; border-top:2px solid var(--x-lima)}
.sc-l li{padding:16px 0; border-bottom:1px solid var(--x-linha-e); font-size:16px; line-height:1.55; color:rgba(242,242,238,.75)}
.sc-l b{color:var(--x-osso); font-weight:600}
.sc-l a{color:var(--x-lima)}

@media(prefers-reduced-motion:reduce){
  .ss-b,.ss-pil,.ss-cta-b{transition:none}
  .ss-cta-b:hover{transform:none}
}

/* o botão do topo leva PARA BAIXO, ao simulador (o estilos.css põe ↑ em todos os a.btn-p[href^="#"]) */
.zn-sim .zh a.btn-p[href="#simulador"]::after{content:"↓"}
.zn-sim .zh a.btn-p[href="#simulador"]:hover::after{transform:translateY(2px)}