/* ============================================================
   GLOBAL SOLAR — hero: a montagem do telhado
   Só a home usa este arquivo.
   ============================================================ */

.hero{position:relative;padding:clamp(40px,7vw,74px) 0 clamp(48px,7vw,84px)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,56px);align-items:center}
.hero h1{font-size:clamp(38px,5.6vw,68px);margin:20px 0 0;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--sol)}
.hero-sub{color:var(--nevoa);font-size:clamp(16px,1.9vw,19px);margin-top:20px;max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}
.link-sec{font-size:15px;color:var(--luz);text-decoration:none;border-bottom:1px solid rgba(147,169,182,.4);padding-bottom:3px;transition:border-color .2s}
.link-sec:hover{border-color:var(--sol)}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero{padding-top:26px}
}

/* ---------- o quadro ---------- */
.telhado{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid rgba(147,169,182,.18);background:#04090E}
.telhado svg{display:block;width:100%;height:auto}

/* etiqueta da etapa da montagem, canto superior esquerdo do quadro */
.etapa{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--dado);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brasa);background:rgba(4,9,14,.66);backdrop-filter:blur(6px);
  border:1px solid rgba(255,194,74,.28);border-radius:999px;padding:6px 13px;
  display:flex;align-items:center;gap:8px;transition:opacity .4s;
}
.etapa::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brasa);animation:pisca 1.1s infinite}
.etapa[hidden]{display:none}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.25}}

/* refazer a montagem */
.remontar{
  position:absolute;top:14px;right:14px;z-index:2;
  font-family:var(--dado);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--luz);background:rgba(4,9,14,.66);backdrop-filter:blur(6px);
  border:1px solid rgba(147,169,182,.3);border-radius:999px;padding:7px 13px;
  cursor:pointer;display:flex;align-items:center;gap:7px;transition:.2s;
}
.remontar svg{width:12px;height:12px}
.remontar:hover{border-color:var(--sol);color:var(--brasa)}
.remontar[hidden]{display:none}

/* ---------- painel de leitura ---------- */
.painel-ctrl{
  padding:16px 18px 18px;
  border-top:1px solid rgba(147,169,182,.16);
  background:linear-gradient(180deg,rgba(20,58,82,.28),rgba(4,9,14,0));
}
.ctrl-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:12px}
.ctrl-rot{font-family:var(--dado);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--nevoa)}
.leitura{font-family:var(--dado);font-size:clamp(22px,3.4vw,30px);font-weight:700;line-height:1;color:var(--brasa);font-variant-numeric:tabular-nums}
.leitura .un{font-size:.5em;color:var(--nevoa);font-weight:400;margin-left:4px}
.relogio{font-family:var(--dado);font-size:15px;font-weight:500;color:var(--luz);font-variant-numeric:tabular-nums}

.arrasta{transition:opacity .4s}
.arrasta.travado{opacity:.32;pointer-events:none}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:none;cursor:grab;display:block;margin:0}
input[type=range]:active{cursor:grabbing}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#1B2C38,var(--celula),var(--sol),var(--celula),#1B2C38)}
input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#1B2C38,var(--celula),var(--sol),var(--celula),#1B2C38)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;border:0;margin-top:-9.5px;
  background:radial-gradient(circle at 35% 32%,#FFF8DF,var(--brasa) 42%,var(--sol));
  box-shadow:0 0 0 5px rgba(255,196,0,.16),0 0 22px rgba(255,211,0,.55);
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;border:0;
  background:radial-gradient(circle at 35% 32%,#FFF8DF,var(--brasa) 42%,var(--sol));
  box-shadow:0 0 0 5px rgba(255,196,0,.16),0 0 22px rgba(255,211,0,.55);
}
input[type=range]:focus-visible{outline:2px solid var(--brasa);outline-offset:6px;border-radius:6px}

.nota{font-family:var(--dado);font-size:10.5px;color:var(--nevoa);margin-top:10px;line-height:1.5}