/* Ecosollar — estilos do site.
   Visual "Luz do meio-dia", aprovado no Claude Design em 08/10/2026:
   https://claude.ai/artifact/MT6VocJgpsbwBZwenbUaS7 */

:root {
  --papel: #FBF8F1;
  --papel-2: #F2ECDF;
  --papel-3: #EDE5D4;
  --papel-4: #F1EADB;
  --cartao: #FFFFFF;
  --linha: #E6DECD;
  --noite: #0E2440;
  --noite-2: #18345C;
  --texto-2: #3D4E66;
  --texto-3: #5A6A80;
  --claro: #FBF8F1;
  --claro-2: #C9D3E2;
  --claro-3: #B9C4D6;
  --sol: #F6A81C;
  --sol-forte: #E8920C;
  --sol-claro: #FFF1D6;
  --folha: #137A43;
  --folha-2: #0F6838;
  --painel: #1D4FA0;
  --painel-claro: #E6EDF8;
  --borda-campo: #7A8699;
  --f-titulo: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --f-texto: "Instrument Sans", "Helvetica Neue", "Segoe UI", sans-serif;
  --margem: clamp(12px, 2.5vw, 24px);
  --suave: cubic-bezier(.2, .7, .2, 1);
  --mola: cubic-bezier(.34, 1.56, .64, 1);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23137A43' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --check-sol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23F6A81C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --selo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23137A43'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --seta-baixo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230E2440' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--noite);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--f-titulo); letter-spacing: -0.02em; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--sol-forte); outline-offset: 3px; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 12px 18px; border-radius: 10px;
  background: var(--noite); color: var(--claro); font-weight: 700; text-decoration: none;
}
.pular:focus { top: 12px; }

.caixa { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--margem); }
.secao { padding-block: clamp(64px, 8vw, 112px); }
.fundo-2 { background: var(--papel-2); }

/* ---------- Textos ---------- */

.tit {
  font-weight: 800; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.04;
  letter-spacing: -0.03em; text-wrap: balance;
}
.sobre {
  font-size: 14px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--folha);
}
.lead { font-size: 18px; line-height: 1.6; color: var(--texto-2); text-wrap: pretty; }
.cab { display: flex; flex-direction: column; gap: 14px; max-width: 700px; }
.cab-largo { max-width: 780px; gap: 16px; }
.pilha { display: flex; flex-direction: column; gap: 22px; }

/* ---------- Botões e links ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border: 0; border-radius: 14px;
  font-weight: 700; font-size: 17px; line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .25s var(--suave), box-shadow .25s ease, background-color .2s ease;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
  translate: -120% 0; transition: translate .7s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(14, 36, 64, 0.55); }
.btn:hover::after { translate: 120% 0; }
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
.ico-seta { transition: translate .25s var(--suave); }
.btn:hover .ico-seta { translate: 4px 0; }
.btn-g { min-height: 60px; padding: 0 30px; font-size: 18px; }
.btn-sol { background: var(--sol); color: var(--noite); }
.btn-sol:hover { background: #FFB531; }
.btn-noite { background: var(--noite); color: var(--claro); }
.btn-noite:hover { background: var(--noite-2); }
.btn-folha { background: var(--folha); color: #FFFFFF; }
.btn-folha:hover { background: var(--folha-2); }
.ico { width: 20px; height: 20px; flex: none; }

.link-forte {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 700; font-size: 17px;
  text-decoration: underline; text-decoration-color: var(--sol);
  text-decoration-thickness: 3px; text-underline-offset: 7px;
  transition: text-underline-offset .25s var(--suave), text-decoration-color .25s ease;
}
.link-forte:hover { text-decoration-color: var(--sol-forte); text-underline-offset: 4px; }
.link-claro {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--claro); font-weight: 600; font-size: 17px;
  text-decoration: underline; text-decoration-color: var(--sol);
  text-decoration-thickness: 2px; text-underline-offset: 7px;
  transition: text-underline-offset .25s var(--suave);
}
.link-claro:hover { text-underline-offset: 4px; }

/* ---------- Listas ---------- */

.lista-check { display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.45; }
.lista-check li { display: flex; align-items: flex-start; gap: 10px; }
.lista-check li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px;
  background: var(--check) center / contain no-repeat;
}
.lista-selo { display: flex; flex-direction: column; gap: 18px; margin-top: 6px; }
.lista-selo li { display: flex; align-items: flex-start; gap: 14px; }
.lista-selo li::before {
  content: ""; flex: none; width: 24px; height: 24px; margin-top: 1px;
  background: var(--selo) center / contain no-repeat;
}
.lista-selo li > div { display: flex; flex-direction: column; gap: 2px; }
.lista-selo strong { font-size: 17px; }
.lista-selo span { font-size: 16px; line-height: 1.5; color: var(--texto-2); }
.lista-selo-curta { gap: 14px; margin-top: 0; font-size: 17px; line-height: 1.5; }
.lista-selo-curta li::before { margin-top: 0; }

/* ---------- Topo ---------- */

.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 248, 241, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo-in { position: relative; display: flex; align-items: center; gap: 12px 40px; min-height: 80px; padding-block: 12px; }
.marca { display: flex; flex: none; }
.marca img { width: auto; height: 48px; }
.menu { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.menu a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 16px; font-weight: 600; text-decoration: none;
  border-bottom: 3px solid transparent;
}
.menu a:not(.btn):hover { border-bottom-color: #E9D3A6; }
.menu a[aria-current="page"] { border-bottom-color: var(--sol); }
.menu .btn { margin-left: auto; min-height: 46px; padding: 0 20px; border-radius: 12px; font-size: 16px; }
.menu .btn .ico { width: 18px; height: 18px; }
.menu-btn { display: none; }

@media (max-width: 959px) {
  .topo-in { min-height: 68px; justify-content: space-between; }
  .marca img { height: 40px; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 14px;
    border: 1.5px solid var(--noite); border-radius: 12px;
    background: transparent; font-size: 16px; font-weight: 700; cursor: pointer;
  }
  .js .menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--margem) 20px;
    background: var(--papel); border-bottom: 1px solid var(--linha);
    box-shadow: 0 18px 30px -18px rgba(14, 36, 64, 0.35);
  }
  .js .menu.aberto { display: flex; }
  .js .menu a:not(.btn) {
    min-height: 54px; padding: 0 4px; font-size: 18px;
    border-bottom: 1px solid var(--linha);
  }
  .js .menu a[aria-current="page"] { color: var(--painel); font-weight: 800; }
  .js .menu .btn { margin: 16px 0 0; min-height: 54px; font-size: 17px; }
  html:not(.js) .topo-in { flex-wrap: wrap; }
  html:not(.js) .menu-btn { display: none; }
}
.menu-ico, .menu-ico::before, .menu-ico::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .2s ease, background-color .2s ease;
}
.menu-ico { position: relative; }
.menu-ico::before, .menu-ico::after { content: ""; position: absolute; left: 0; }
.menu-ico::before { top: -6px; }
.menu-ico::after { top: 6px; }
[aria-expanded="true"] .menu-ico { background: transparent; }
[aria-expanded="true"] .menu-ico::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .menu-ico::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Abertura da página inicial ---------- */

.hero { position: relative; overflow: hidden; background: var(--noite); color: var(--claro); }
.hero-sol { position: absolute; right: -330px; bottom: -380px; width: 980px; height: 980px; max-width: none; pointer-events: none; }
.hero-in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: clamp(40px, 5vw, 72px); align-items: center;
  padding-block: clamp(48px, 7vw, 96px);
}
.hero-txt { display: flex; flex-direction: column; gap: 28px; }
.selo {
  align-self: flex-start; display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border: 1px solid rgba(251, 248, 241, 0.28); border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--sol);
}
.hero h1 {
  font-weight: 800; font-size: clamp(44px, 6.2vw, 84px); line-height: 0.98;
  letter-spacing: -0.035em; text-wrap: balance;
}
.hero h1 span { color: var(--sol); }
.hero-lead {
  max-width: 34em; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55;
  color: var(--claro-2); text-wrap: pretty;
}
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hero-itens { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; color: var(--claro-2); }
.hero-itens li { display: flex; align-items: center; gap: 8px; }
.hero-itens li::before {
  content: ""; flex: none; width: 18px; height: 18px;
  background: var(--check-sol) center / contain no-repeat;
}

/* ---------- Simulador (a "conta de luz") ---------- */

.conta {
  position: relative; display: flex; flex-direction: column; gap: 18px;
  padding: clamp(20px, 3vw, 32px); border-radius: 24px;
  background: var(--papel); color: var(--noite);
  box-shadow: 0 32px 64px -24px rgba(3, 10, 22, 0.6);
}
.conta-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.conta-topo h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }

.seg { display: flex; gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 999px; background: var(--papel-3); min-inline-size: 0; }
.seg label { position: relative; display: flex; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 18px; border-radius: 999px;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .15s ease;
}
.seg input:checked + span { background: var(--noite); color: var(--claro); }
.seg input:focus-visible + span { outline: 3px solid var(--sol-forte); outline-offset: 2px; }
.seg-cheio label { flex: 1 1 0; }
.seg-cheio span { width: 100%; min-height: 44px; }

.conta-pergunta { display: flex; flex-direction: column; gap: 6px; }
.conta-pergunta label { font-size: 15px; font-weight: 500; color: var(--texto-2); }
.num-g {
  font-family: var(--f-titulo); font-size: clamp(44px, 5vw, 60px); font-weight: 800;
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.conta-regua { display: flex; flex-direction: column; gap: 4px; }
.conta-limites { display: flex; justify-content: space-between; font-size: 13px; color: var(--texto-3); }

.conta input[type="range"] {
  --p: 18%;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer;
}
.conta input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 99px;
  background: linear-gradient(to right, var(--sol-forte) var(--p), var(--papel-3) var(--p));
}
.conta input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -10px; border-radius: 50%;
  background: var(--noite); border: 4px solid var(--papel); box-shadow: 0 0 0 2px var(--noite);
}
.conta input[type="range"]::-moz-range-track { height: 8px; border-radius: 99px; background: var(--papel-3); }
.conta input[type="range"]::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--sol-forte); }
.conta input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--noite); border: 4px solid var(--papel); box-shadow: 0 0 0 2px var(--noite);
}

.conta-corte { position: relative; height: 0; margin: 6px calc(-1 * clamp(20px, 3vw, 32px)); border-top: 2px dashed #D6CCB8; }
.conta-corte::before, .conta-corte::after {
  content: ""; position: absolute; top: -16px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--noite);
}
.conta-corte::before { left: -15px; }
.conta-corte::after { right: -15px; }

.conta-res { display: flex; flex-direction: column; gap: 10px; }
.conta-res .rot { font-size: 15px; font-weight: 500; color: var(--texto-2); }
.conta-nova { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.conta-nova .num-g { color: var(--folha); }
.conta-nova span:last-child { font-size: 16px; color: var(--texto-2); }
.conta-frase { font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.conta-aviso { padding: 12px 14px; border-radius: 12px; background: var(--sol-claro); font-size: 15px; line-height: 1.45; }
.conta-det { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr)); gap: 10px; }
.conta-det div { padding: 10px 12px; border-radius: 12px; background: var(--papel-4); }
.conta-det dt { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
.conta-det dd { margin-top: 4px; font-size: 16px; font-weight: 600; }
.conta .btn { width: 100%; padding-inline: 20px; }
.conta-nota { font-size: 13px; line-height: 1.5; color: var(--texto-3); }

/* ---------- Garantias ---------- */

.garantias { border-bottom: 1px solid var(--linha); }
.garantias-in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 32px; padding-block: 48px;
}
.garantia { display: flex; align-items: flex-start; gap: 16px; }
.garantia h3 { margin-bottom: 4px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.garantia p { font-size: 15.5px; line-height: 1.5; color: var(--texto-2); }
.ico-caixa {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--painel-claro); color: var(--painel);
}
.ico-caixa svg { width: 28px; height: 28px; }

/* ---------- Foto + texto ---------- */

.duas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: clamp(40px, 6vw, 88px); align-items: center;
}
.foto-sol, .foto-painel { position: relative; }
.foto-sol { padding: 0 0 24px 24px; }
.foto-painel { padding: 0 22px 22px 0; }
.foto-sol::before, .foto-painel::before {
  content: ""; position: absolute; bottom: 0; width: 78%; height: 78%; border-radius: 28px;
}
.foto-sol::before { left: 0; background: var(--sol); }
.foto-painel::before { right: 0; background: var(--painel); }
.foto-sol img, .foto-painel img { position: relative; width: 100%; border-radius: 24px; object-fit: cover; }
.foto-q { justify-self: center; width: min(100%, 460px); }
.foto-q img { aspect-ratio: 1 / 1; }
.pilha-btn { align-self: flex-start; }

/* ---------- Etapas (página inicial) ---------- */

.passos-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.passos-lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 20px; margin-top: 48px;
}
.passos-lista li { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 20px; background: var(--papel); }
.passo-n {
  font-family: var(--f-titulo); font-size: 44px; font-weight: 800; line-height: 1;
  letter-spacing: -0.03em; color: var(--painel);
}
.passos-lista h3 { font-size: 22px; font-weight: 700; }
.passos-lista p { font-size: 16px; line-height: 1.55; color: var(--texto-2); }

/* ---------- Casa e empresa ---------- */

.publicos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
  gap: 24px; margin-top: 44px;
}
.publico {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px;
  padding: clamp(20px, 2.6vw, 32px); border: 1px solid var(--linha); border-radius: 24px;
  background: var(--cartao);
}
.publico img { flex: 0 0 168px; width: 168px; height: 168px; object-fit: cover; border-radius: 18px; }
.publico > div { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.publico h3 { font-size: 30px; font-weight: 800; }
.publico p { font-size: 16.5px; line-height: 1.55; color: var(--texto-2); }
.publico .link-forte { align-self: flex-start; font-size: 16px; }

/* ---------- Perguntas ---------- */

.duvidas-in { display: flex; flex-wrap: wrap; gap: 40px clamp(40px, 6vw, 88px); }
.duvidas-cab { flex: 1 1 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.acordeao { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.acordeao details { padding: 0 24px; border-radius: 16px; background: var(--papel); }
.acordeao summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding-block: 14px; cursor: pointer; list-style: none;
  font-family: var(--f-titulo); font-size: 19px; font-weight: 700; line-height: 1.3;
}
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after {
  content: ""; flex: none; width: 20px; height: 20px;
  background: var(--seta-baixo) center / contain no-repeat; transition: transform .2s ease;
}
.acordeao details[open] summary::after { transform: rotate(180deg); }
.acordeao details p { padding-bottom: 22px; font-size: 16.5px; line-height: 1.6; color: var(--texto-2); }

/* ---------- Faixa de chamada ---------- */

.chamada { background: var(--sol); color: var(--noite); }
.chamada-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px;
  padding-block: clamp(56px, 7vw, 96px);
}
.chamada-txt { flex: 1 1 520px; display: flex; flex-direction: column; gap: 14px; }
.chamada h2 {
  font-weight: 800; font-size: clamp(34px, 4.2vw, 58px); line-height: 1;
  letter-spacing: -0.035em; text-wrap: balance;
}
.chamada p { max-width: 36em; font-size: 19px; line-height: 1.55; }
.chamada-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.link-tel {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; font-size: 16px; text-decoration: underline; text-underline-offset: 5px;
}

/* ---------- Abertura das páginas internas ---------- */

.pg-hero { position: relative; overflow: hidden; background: var(--noite); color: var(--claro); }
.pg-hero-sol { position: absolute; right: -300px; top: -300px; width: 760px; height: 760px; max-width: none; pointer-events: none; }
.pg-hero-in { position: relative; display: flex; flex-direction: column; gap: 22px; padding-block: clamp(56px, 7vw, 104px); }
.pg-hero .sobre { color: var(--sol); }
.pg-hero h1 {
  max-width: 15em; font-weight: 800; font-size: clamp(40px, 5vw, 68px); line-height: 1;
  letter-spacing: -0.035em; text-wrap: balance;
}
.pg-hero .hero-lead { max-width: 36em; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.6; }
.pg-hero-404 .pg-hero-in { padding-block: clamp(72px, 10vw, 140px); }

/* ---------- Como funciona ---------- */

.etapas { display: flex; flex-direction: column; padding-block: clamp(40px, 6vw, 88px); }
.etapa {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 40px;
  padding-block: 36px; border-top: 1px solid var(--linha);
}
.etapa:last-child { border-bottom: 1px solid var(--linha); }
.etapa-n {
  flex: 0 0 96px; font-family: var(--f-titulo); font-size: 64px; font-weight: 800;
  line-height: 0.9; letter-spacing: -0.04em; color: var(--painel);
}
.etapa-txt { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.etapa h2 { font-size: 28px; font-weight: 800; }
.etapa-txt p { font-size: 17px; line-height: 1.6; color: var(--texto-2); }
.sua-parte { flex: 1 1 280px; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px; background: var(--papel-2); }
.sua-parte .rot { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--folha); }
.sua-parte p:last-child { font-size: 16px; line-height: 1.5; }

/* ---------- Serviços ---------- */

.caixinhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.caixinha { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 18px; background: var(--papel-2); }
.caixinha h3 { font-size: 20px; font-weight: 700; }
.caixinha .lista-check { font-size: 15.5px; }
.grade-servicos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 20px; margin-top: 44px;
}
.servico { display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--linha); border-radius: 20px; background: var(--cartao); }
.servico h3 { font-size: 21px; font-weight: 700; }
.servico p { font-size: 16px; line-height: 1.55; color: var(--texto-2); }

/* ---------- Energia solar ---------- */

.caminho {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 16px; margin-top: 40px;
}
.caminho li { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 20px; background: var(--noite); color: var(--claro); }
.caminho-topo { display: flex; align-items: center; justify-content: space-between; }
.caminho .ico-caixa { background: var(--sol); color: var(--noite); }
.caminho-n { font-family: var(--f-titulo); font-size: 40px; font-weight: 800; line-height: 1; color: var(--sol); }
.caminho h3 { font-size: 22px; font-weight: 700; }
.caminho p { font-size: 16px; line-height: 1.55; color: var(--claro-2); }
.nota-sol { margin-top: 16px; padding: 24px 28px; border-radius: 20px; background: var(--sol-claro); font-size: 17px; line-height: 1.6; }

.creditos-in { display: flex; flex-wrap: wrap; gap: 40px clamp(40px, 6vw, 88px); }
.creditos-cab { flex: 1 1 340px; display: flex; flex-direction: column; gap: 16px; }
.creditos-grade {
  flex: 1.4 1 480px; min-width: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px;
}
.fato { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 18px; background: var(--papel); }
.fato-num { font-family: var(--f-titulo); font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--painel); }
.fato h3 { font-size: 22px; font-weight: 700; }
.fato p:not(.fato-num) { font-size: 16px; line-height: 1.55; color: var(--texto-2); }

.anos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 12px; margin-top: 36px;
}
.anos li { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--linha); border-radius: 16px; background: var(--cartao); }
.anos span { font-size: 15px; font-weight: 600; color: var(--texto-3); }
.anos strong { font-family: var(--f-titulo); font-size: 34px; font-weight: 800; line-height: 1; }
.anos .agora { border-color: var(--noite); background: var(--noite); color: var(--claro); }
.anos .agora span { font-weight: 700; color: var(--sol); }
.lei-notas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; margin-top: 16px; }
.lei-notas p { padding: 20px 22px; border-radius: 16px; background: var(--papel-2); font-size: 16px; line-height: 1.55; }

/* ---------- Contato ---------- */

.contato-in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px); align-items: start;
  padding-block: clamp(48px, 7vw, 104px);
}
.canais { display: flex; flex-direction: column; gap: 16px; }
.canal-wa {
  display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 22px;
  background: var(--folha); color: #FFFFFF; text-decoration: none;
  font-size: 17px; line-height: 1.5; transition: transform .15s ease, background-color .15s ease;
}
.canal-wa:hover { transform: translateY(-2px); background: var(--folha-2); }
.canal-wa-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.canal-wa-rot { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.canal-wa-num { font-family: var(--f-titulo); font-size: clamp(32px, 3.4vw, 44px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.canais-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.canal {
  display: flex; flex-direction: column; gap: 8px; padding: 22px;
  border: 1px solid var(--linha); border-radius: 18px; background: var(--cartao); text-decoration: none;
}
a.canal:hover { border-color: var(--noite); }
.canal .rot { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-3); }
.canal strong { font-size: 18px; overflow-wrap: anywhere; }

.form {
  display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--linha); border-radius: 24px; background: var(--cartao);
}
.form-cab { display: flex; flex-direction: column; gap: 8px; }
.form h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; line-height: 1.1; }
.form-cab p { font-size: 16.5px; line-height: 1.55; color: var(--texto-2); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .campo legend { font-size: 15px; font-weight: 600; }
.campo-fs { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.campo-fs legend { padding: 0; margin-bottom: 6px; }
.campo input, .campo textarea {
  width: 100%; min-height: 52px; padding: 0 14px;
  border: 1.5px solid var(--borda-campo); border-radius: 12px;
  background: #FFFFFF; color: var(--noite); font-size: 17px;
}
.campo textarea { min-height: 120px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--noite); }
.campo input::placeholder, .campo textarea::placeholder { color: #8A94A3; }
.campo .opc { font-weight: 400; color: var(--texto-3); }
.campos-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 18px; align-items: end; }
.form .btn { width: 100%; }
.form-nota { font-size: 14px; line-height: 1.5; color: var(--texto-3); }

/* ---------- Rodapé ---------- */

.rodape { background: var(--noite); color: var(--claro); }
.rodape-in { display: flex; flex-direction: column; gap: 48px; padding-block: 64px 32px; }
.rodape-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 40px; }
.rodape-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.rodape-logo { display: flex; padding: 12px 16px; border-radius: 14px; background: var(--papel); }
.rodape-logo img { width: auto; height: 44px; }
.rodape-marca p { max-width: 22em; font-size: 15.5px; line-height: 1.6; color: var(--claro-3); }
.rodape h2 { margin-bottom: 14px; font-size: 18px; font-weight: 700; color: var(--sol); }
.rodape-lista { display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.rodape-lista a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.rodape-lista a:hover { text-decoration: underline; text-decoration-color: var(--sol); text-underline-offset: 5px; }
.rodape-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 24px; border-top: 1px solid rgba(251, 248, 241, 0.16);
  font-size: 14px; color: var(--claro-3);
}

/* ==========================================================
   Movimento: entradas, parallax, revelação ao rolar e detalhes.
   Quem pede "reduzir movimento" no aparelho não vê nada disso
   (o JS só liga a classe .anima quando o movimento é permitido).
   ========================================================== */

/* Barra de leitura e topo que encolhe ao rolar */
.progresso {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--sol); transform-origin: 0 50%;
  transform: scaleX(var(--lido, 0)); pointer-events: none;
}
.topo { transition: box-shadow .3s ease; }
.topo-in { transition: min-height .3s var(--suave), padding .3s var(--suave); }
.marca img { transition: height .3s var(--suave); }
.topo.rolou { box-shadow: 0 12px 30px -20px rgba(14, 36, 64, 0.45); }
@media (min-width: 960px) {
  .topo.rolou .topo-in { min-height: 66px; padding-block: 8px; }
  .topo.rolou .marca img { height: 42px; }
}

/* Cartões que respondem ao mouse */
.servico, .publico, .passos-lista li, .fato, .canal, .caixinha, .caminho li, .anos li, .garantia {
  transition: transform .35s var(--suave), box-shadow .35s ease, border-color .3s ease;
}
.ico-caixa { transition: background-color .3s ease, color .3s ease, rotate .35s var(--mola), scale .35s var(--mola); }
@media (hover: hover) {
  .servico:hover, .publico:hover, .passos-lista li:hover, .fato:hover, .caminho li:hover, .caixinha:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 44px -30px rgba(14, 36, 64, 0.5);
  }
  .servico:hover .ico-caixa, .garantia:hover .ico-caixa { background: var(--painel); color: #FFFFFF; rotate: -8deg; scale: 1.06; }
  .caminho li:hover .ico-caixa { rotate: -8deg; }
  a.canal:hover { transform: translateY(-3px); }
  .btn:hover .ico-wa, .wa-flutua:hover .ico-wa { animation: balanca .6s ease; }
}
@keyframes balanca {
  20% { rotate: -14deg; } 40% { rotate: 10deg; } 60% { rotate: -6deg; } 80% { rotate: 3deg; }
}

/* Ponteiro do simulador */
.conta input[type="range"]::-webkit-slider-thumb { transition: transform .2s var(--mola); }
.conta input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.conta input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.22); }

/* Botão flutuante do WhatsApp */
.wa-flutua {
  position: fixed; z-index: 40;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--folha); color: #FFFFFF;
  box-shadow: 0 14px 30px -12px rgba(14, 36, 64, 0.6);
  transition: opacity .35s ease, scale .45s var(--mola), transform .25s var(--suave);
}
.wa-flutua .ico { width: 28px; height: 28px; }
.wa-flutua:hover { transform: translateY(-3px); }
.js .wa-flutua:not(.mostra) { opacity: 0; scale: .4; pointer-events: none; }

/* Revelação ao rolar (o JS marca os elementos que ainda estão abaixo da tela) */
.anima [data-revela] {
  opacity: 0; translate: 0 34px;
  transition:
    opacity .8s var(--suave) var(--atraso, 0s),
    translate .9s var(--suave) var(--atraso, 0s),
    scale .9s var(--suave) var(--atraso, 0s),
    transform .35s var(--suave), box-shadow .35s ease, border-color .3s ease;
}
.anima [data-revela="esquerda"] { translate: -48px 0; }
.anima [data-revela="direita"] { translate: 48px 0; }
.anima [data-revela="zoom"] { translate: 0 20px; scale: .93; }
.anima [data-revela].visivel { opacity: 1; translate: none; scale: none; }

/* Parallax: o JS escreve --par (rolagem) e --mx/--my (mouse) */
.hero-sol { transform: translate3d(var(--mx, 0px), calc(var(--par, 0px) + var(--my, 0px)), 0); will-change: transform; }
.pg-hero-sol { transform: translate3d(0, var(--par, 0px), 0); }
.foto-sol::before, .foto-painel::before { transform: translate3d(0, var(--par, 0px), 0); }
.foto-sol img, .foto-painel img { transform: translate3d(0, calc(var(--par, 0px) * -0.35), 0); }

/* Como funciona: os números das etapas acendem conforme a pessoa rola */
.anima .etapa-n { color: #C3D0E8; transition: color .6s ease, scale .6s var(--mola); transform-origin: 0 50%; }
.anima .etapa.passou .etapa-n { color: var(--painel); }
.anima .etapa.ativa .etapa-n { scale: 1.1; }
.anima .sua-parte { transition: background-color .6s ease; }
.anima .etapa.ativa .sua-parte { background: var(--sol-claro); }

/* Destaques do simulador */
.conta-nova .num-g.pulsa { animation: pulsa .5s var(--mola); }
@keyframes pulsa { 40% { scale: 1.08; } }
.anima .conta.destaca { animation: destaca 1.4s ease; }
@keyframes destaca {
  0% { box-shadow: 0 32px 64px -24px rgba(3, 10, 22, 0.6), 0 0 0 0 rgba(246, 168, 28, 0.7); }
  40% { box-shadow: 0 32px 64px -24px rgba(3, 10, 22, 0.6), 0 0 0 14px rgba(246, 168, 28, 0.35); }
  100% { box-shadow: 0 32px 64px -24px rgba(3, 10, 22, 0.6), 0 0 0 26px rgba(246, 168, 28, 0); }
}

/* Troca de página com esmaecimento (navegadores que suportam) */
@view-transition { navigation: auto; }
.topo { view-transition-name: topo; }
::view-transition-old(root) { animation: .25s ease both pagina-sai; }
::view-transition-new(root) { animation: .5s var(--suave) both pagina-chega; }
@keyframes pagina-sai { to { opacity: 0; } }
@keyframes pagina-chega { from { opacity: 0; translate: 0 18px; } }

/* Entrada da abertura */
@keyframes entra { from { opacity: 0; translate: 0 30px; } }
.anima .hero-txt > *, .anima .pg-hero-in > * { animation: entra .9s var(--suave) both; }
.anima .hero-txt > :nth-child(1), .anima .pg-hero-in > :nth-child(1) { animation-delay: .05s; }
.anima .hero-txt > :nth-child(2), .anima .pg-hero-in > :nth-child(2) { animation-delay: .15s; animation-duration: 1.1s; }
.anima .hero-txt > :nth-child(3), .anima .pg-hero-in > :nth-child(3) { animation-delay: .32s; }
.anima .hero-txt > :nth-child(4), .anima .pg-hero-in > :nth-child(4) { animation-delay: .46s; }
.anima .hero-txt > :nth-child(5) { animation-delay: .6s; }

/* A palavra "sol" acende depois que o título aparece */
.anima .hero h1 span { animation: acende 1.2s ease .95s both; }
@keyframes acende { from { color: var(--claro); } }

/* A conta de luz chega girando de leve */
.anima .conta { animation: conta-chega 1.2s var(--suave) .35s both; }
@keyframes conta-chega { from { opacity: 0; translate: 70px 40px; rotate: 4deg; } }

/* O sol nasce, respira e os raios giram */
.anima .hero-sol { animation: sol-nasce 1.8s var(--suave) .1s both; }
@keyframes sol-nasce { from { opacity: 0; translate: 0 180px; } }
.anima .pg-hero-sol { animation: aneis-chegam 1.6s var(--suave) both; }
@keyframes aneis-chegam { from { opacity: 0; scale: .85; rotate: -25deg; } }
.hero-sol circle, .pg-hero-sol circle { transform-box: view-box; transform-origin: 50% 50%; }
.anima .hero-sol circle:nth-child(1) { animation: respira 6s ease-in-out infinite; }
.anima .hero-sol circle:nth-child(2), .anima .pg-hero-sol circle:nth-child(1) { animation: gira 90s linear infinite; }
.anima .hero-sol circle:nth-child(3), .anima .pg-hero-sol circle:nth-child(2) { animation: gira 130s linear infinite reverse; }
.anima .hero-sol circle:nth-child(4), .anima .pg-hero-sol circle:nth-child(3) { animation: gira 170s linear infinite; }
.anima .hero-sol circle:nth-child(5) { animation: gira 210s linear infinite reverse; }
.anima .hero-sol circle:nth-child(6) { animation: gira 260s linear infinite; }
@keyframes gira { to { rotate: 360deg; } }
@keyframes respira { 50% { scale: 1.05; } }

/* Energia passando de um passo para o outro (página Energia solar) */
.anima .caminho .ico-caixa { animation: energia 4s ease-in-out infinite; }
.anima .caminho li:nth-child(2) .ico-caixa { animation-delay: 1s; }
.anima .caminho li:nth-child(3) .ico-caixa { animation-delay: 2s; }
.anima .caminho li:nth-child(4) .ico-caixa { animation-delay: 3s; }
@keyframes energia {
  0%, 28%, 100% { box-shadow: 0 0 0 0 rgba(246, 168, 28, 0); scale: 1; }
  12% { box-shadow: 0 0 0 10px rgba(246, 168, 28, 0.3); scale: 1.1; }
}

/* O ano atual da Lei 14.300 pulsa de leve */
.anima .anos .agora { animation: agora 2.6s ease-in-out infinite; }
@keyframes agora { 50% { box-shadow: 0 0 0 6px rgba(246, 168, 28, 0.35); } }

/* Onda em volta do botão flutuante */
.anima .wa-flutua::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--folha); animation: onda 2.8s ease-out infinite;
}
@keyframes onda { 0% { opacity: .7; scale: 1; } 70%, 100% { opacity: 0; scale: 1.7; } }

/* Sem movimento: tira transições e animações (só quando o navegador não tem como animar) */
@media (prefers-reduced-motion: reduce) {
  html:not(.anima) *, html:not(.anima) *::before, html:not(.anima) *::after {
    transition: none !important; animation: none !important;
  }
}