/* ============================================================
   DOMINUS ENERGIA SOLAR — folha de estilo única
   Linguagem: display condensada gigante em caixa-alta,
   navy profundo quase preto, dourado usado com decisão,
   mono para números e evidências.
   ============================================================ */

:root {
  --navy-950: #050a12;
  --navy-900: #070f1c;
  --navy-800: #0a1526;
  --navy-700: #0e1d36;
  --navy-line: rgba(255, 255, 255, 0.09);
  --gold: #d9a33c;
  --gold-bright: #f0b94a;
  --gold-dim: rgba(217, 163, 60, 0.14);
  --grad-gold: linear-gradient(135deg, #f8cf6d 0%, #d9a33c 55%, #b57e1e 100%);
  --ice: #6cc4ff;
  --ice-dim: rgba(108, 196, 255, 0.12);
  --green: #25d366;
  --rust: #e07856;
  --white: #f5f8fc;
  --muted: #a3b1c6;
  --ink: #060b14;                 /* texto escuro sobre dourado */
  --ink-soft: rgba(6, 11, 20, 0.78);
  --font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;
  --maxw: 1160px;
  --radius: 12px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* reserva o espaco da barra de rolagem: sem isto a pagina "pula" de largura
     quando a abertura esconde a rolagem e depois devolve. */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 163, 60, .3) transparent;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(217, 163, 60, .28);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(217, 163, 60, .5);
  background-clip: content-box;
}

body {
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(16, 40, 78, 0.5), transparent 70%),
    var(--navy-900);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--gold-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Tipografia ---------- */

h1, h2 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.005em;
}

h1 { font-size: clamp(3rem, 7.5vw, 5.6rem); }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1; }

h3 {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: 0.015em;
}

/* palavra-chave em destaque dourado */
.hl {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--grad-gold);
  flex: 0 0 auto;
}
.cta-band .eyebrow { justify-content: center; }

.lead {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--muted);
  max-width: 46em;
}

.muted { color: var(--muted); }

/* Marcador editorial: dado real pendente de autorização */
.placeholder {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px dashed rgba(217, 163, 60, 0.45);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 10px;
  padding: 15px 30px;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), filter 0.18s var(--ease);
  text-decoration: none !important;
}

.btn svg { flex: 0 0 auto; }

.btn-gold {
  background: var(--grad-gold);
  color: var(--ink);
  box-shadow: 0 6px 24px rgba(217, 163, 60, 0.35);
}
.btn-gold:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(217, 163, 60, 0.5);
}

.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); }

.cta-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 12px;
}
.cta-note::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(37, 211, 102, 0.8);
  margin-right: 8px;
  vertical-align: 1px;
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ---------- Barra superior ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 10, 18, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--navy-line);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 74px;
}

.brand {
  width: max-content;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none !important;
  line-height: 1;
}
.brand small {
  display: block;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 4px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav a {
  position: relative;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: color 0.2s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  height: 2px; width: 0;
  background: var(--grad-gold);
  transition: width 0.25s var(--ease);
}
.nav a:hover { color: var(--white); }
.nav a:hover::after, .nav a.active::after { width: 100%; }
.nav a.active { color: var(--gold-bright); }

.topbar .btn { padding: 9px 18px; font-size: 1rem; white-space: nowrap; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--navy-line);
  border-radius: 8px;
  color: var(--white);
  font-size: 1.3rem;
  padding: 6px 12px;
  cursor: pointer;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 110px 0 90px;
  background:
    radial-gradient(ellipse 75% 65% at 80% -12%, rgba(217, 163, 60, 0.17), transparent 58%),
    radial-gradient(ellipse 60% 50% at 8% 115%, rgba(22, 55, 105, 0.4), transparent 65%),
    var(--navy-950);
  border-bottom: 1px solid var(--navy-line);
  overflow: hidden;
}

/* grade técnica sutil, estilo prancheta de engenharia */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(140, 180, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 180, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

/* raios de sol estilizados no canto */
.hero::after {
  content: "";
  position: absolute;
  top: -240px;
  right: -220px;
  width: 740px;
  height: 740px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(217, 163, 60, 0.09) 0deg 5deg, transparent 5deg 14deg);
  -webkit-mask: radial-gradient(circle at center, #000 18%, transparent 66%);
  mask: radial-gradient(circle at center, #000 18%, transparent 66%);
  pointer-events: none;
  animation: sunSpin 90s linear infinite;
}
@keyframes sunSpin {
  to { transform: rotate(360deg); }
}

.hero .wrap { position: relative; z-index: 1; }

.hero h1 { max-width: 12em; margin: 0 0 26px; animation: fadeUp 0.7s var(--ease) both; }
.hero .lead { margin-bottom: 38px; animation: fadeUp 0.7s var(--ease) 0.12s both; }
.hero-cta { margin-bottom: 0; animation: fadeUp 0.7s var(--ease) 0.24s both; }
.hero .eyebrow { animation: fadeUp 0.7s var(--ease) both; }

/* Linha de comprovação de campo no hero (dado medido pela Dominus) */
.hero-proof {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 40em;
  margin: -4px 0 30px;
  padding: 14px 18px 14px 16px;
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(217, 163, 60, 0.12), rgba(217, 163, 60, 0));
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  animation: fadeUp 0.7s var(--ease) 0.1s both;
}
.hero-proof svg { flex: 0 0 auto; margin-top: 3px; color: var(--gold); }
.hero-proof strong { color: var(--gold); font-weight: 600; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* faixa de números do hero */
.statline {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 72px;
  border-top: 1px solid var(--navy-line);
}
.statline > div {
  position: relative;
  padding: 28px 48px 0 0;
  margin-right: 48px;
}
.statline > div::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 38px; height: 4px;
  background: var(--grad-gold);
}
.statline strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1;
  text-transform: uppercase;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.statline span {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---------- Letreiro deslizante ---------- */

.marquee {
  overflow: hidden;
  background: var(--navy-950);
  border-bottom: 1px solid var(--navy-line);
  padding: 15px 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeMove 38s linear infinite;
}
.marquee-group {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
}
.marquee-group span {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.marquee-group .dot {
  color: var(--gold);
  font-size: 0.9rem;
}
@keyframes marqueeMove {
  to { transform: translateX(-50%); }
}

/* ---------- Seções ---------- */

section {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
}
section > .wrap { position: relative; z-index: 1; }

/* seções claras: anéis técnicos girando na lateral, estilo compasso */
section:not(.alt)::before {
  content: "";
  position: absolute;
  top: 6%;
  right: -340px;
  width: 660px;
  height: 660px;
  border-radius: 50%;
  border: 1.5px dashed rgba(217, 163, 60, 0.13);
  animation: sunSpin 160s linear infinite;
  pointer-events: none;
}
section:not(.alt)::after {
  content: "";
  position: absolute;
  top: 18%;
  right: -250px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  border: 1px solid rgba(108, 196, 255, 0.09);
  pointer-events: none;
}

section.alt {
  background: linear-gradient(180deg, #0b1729 0%, #091220 100%);
  border-top: 1px solid var(--navy-line);
  border-bottom: 1px solid var(--navy-line);
}

/* seções escuras: grade de engenharia + sol de raios no canto esquerdo */
section.alt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  border: none;
  background-image:
    linear-gradient(rgba(140, 180, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 180, 255, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: none;
  pointer-events: none;
}
section.alt::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: -280px;
  left: -260px;
  right: auto;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  border: none;
  background: repeating-conic-gradient(rgba(217, 163, 60, 0.07) 0deg 5deg, transparent 5deg 14deg);
  -webkit-mask: radial-gradient(circle at center, #000 18%, transparent 66%);
  mask: radial-gradient(circle at center, #000 18%, transparent 66%);
  animation: sunSpin 120s linear infinite reverse;
  pointer-events: none;
}

/* número-fantasma gigante atrás do título (preenchido via js) */
.section-head {
  position: relative;
  margin-bottom: 56px;
  max-width: 44em;
}
.section-head::before {
  content: attr(data-n);
  position: absolute;
  top: -52px;
  left: -10px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(6rem, 12vw, 9.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(217, 163, 60, 0.16);
  pointer-events: none;
  z-index: 0;
}
.section-head > * { position: relative; z-index: 1; }
.section-head h2 { margin-bottom: 14px; }
.section-head h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  border-radius: 3px;
  background: var(--grad-gold);
  margin-top: 20px;
}

/* ---------- Grades de cartões ---------- */

.grid {
  display: grid;
  gap: 22px;
}
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  background: linear-gradient(160deg, #11223f 0%, #0b1729 100%);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: 30px 28px;
  overflow: hidden;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(217, 163, 60, 0.45);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.card:hover::before { transform: scaleX(1); }

.card h3 { margin-bottom: 10px; color: var(--white); }
.card p { font-size: 0.95rem; color: var(--muted); }
.card p + p { margin-top: 10px; }

/* etiqueta técnica — azul-gelo */
.card .tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ice);
  background: var(--ice-dim);
  border: 1px solid rgba(108, 196, 255, 0.28);
  border-radius: 99px;
  padding: 4px 12px;
  display: inline-block;
  margin-bottom: 14px;
}

/* cartão-link (hub de páginas) */
a.card {
  display: block;
  text-decoration: none !important;
}
a.card .go {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--gold-bright);
  margin-top: 16px;
  display: block;
  transition: transform 0.2s var(--ease);
}
a.card:hover .go { transform: translateX(6px); }

/* chip numerado — dourado sólido */
.card .num {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
  background: var(--grad-gold);
  border-radius: 10px;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(217, 163, 60, 0.3);
}

/* chip de ícone — dourado translúcido */
.icon-chip {
  width: 50px; height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(217, 163, 60, 0.24), rgba(217, 163, 60, 0.07));
  border: 1px solid rgba(217, 163, 60, 0.42);
  color: var(--gold-bright);
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(217, 163, 60, 0.15);
}
.icon-chip svg { width: 25px; height: 25px; }

/* ---------- Bloco de impacto (urgência / financiamento) ----------
   Bloco totalmente dourado com texto navy: inversão de contraste. */

.urgency {
  position: relative;
  background: var(--grad-gold);
  border: none;
  border-radius: 16px;
  padding: 48px 52px;
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(217, 163, 60, 0.22);
  overflow: hidden;
}
.urgency::after {
  content: "";
  position: absolute;
  top: -140px; right: -140px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.16) 0deg 5deg, transparent 5deg 14deg);
  -webkit-mask: radial-gradient(circle at center, #000 15%, transparent 65%);
  mask: radial-gradient(circle at center, #000 15%, transparent 65%);
  pointer-events: none;
}
.urgency > * { position: relative; z-index: 1; }
.urgency .eyebrow { color: var(--ink-soft); }
.urgency .eyebrow::before { background: var(--ink); }
.urgency h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  color: var(--ink);
  margin-bottom: 14px;
}
.urgency p { color: var(--ink-soft); max-width: 52em; }
.urgency p strong { color: var(--ink); }
.urgency .btn { margin-top: 28px; }
.urgency .btn-gold {
  background: var(--ink);
  color: var(--gold-bright);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.urgency .btn-gold:hover { filter: brightness(1.25); }
.urgency .cta-note { color: var(--ink-soft); }

/* selos comparativos de ano */
.year-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.yb {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 9px;
}
.yb.good {
  background: var(--ink);
  color: var(--gold-bright);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.yb.bad {
  border: 1.5px dashed rgba(6, 11, 20, 0.55);
  color: var(--ink-soft);
}

/* ---------- Faixa de CTA final ---------- */

.cta-band {
  position: relative;
  background:
    radial-gradient(ellipse 70% 90% at 50% 135%, rgba(217, 163, 60, 0.22), transparent 62%),
    radial-gradient(ellipse 50% 60% at 6% -20%, rgba(22, 55, 105, 0.4), transparent 60%),
    var(--navy-950);
  border-top: 1px solid var(--navy-line);
  text-align: center;
  padding: 110px 0;
  overflow: hidden;
}
.cta-band .wrap { position: relative; z-index: 1; }

/* sol gigante nascendo atrás do botão final */
.cta-band::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -400px;
  transform: translateX(-50%);
  width: 860px;
  height: 860px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(217, 163, 60, 0.09) 0deg 4deg, transparent 4deg 12deg);
  -webkit-mask: radial-gradient(circle at center, #000 20%, transparent 68%);
  mask: radial-gradient(circle at center, #000 20%, transparent 68%);
  animation: sunSpin 100s linear infinite;
  pointer-events: none;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(140, 180, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 180, 255, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.cta-band h2 { max-width: 18em; margin: 0 auto 30px; font-size: clamp(2.4rem, 5vw, 3.8rem); }
.cta-band h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  border-radius: 3px;
  background: var(--grad-gold);
  margin: 22px auto 0;
}
.cta-band .lead { margin: 0 auto 34px; }
.cta-band .btn-gold {
  padding: 19px 40px;
  font-size: 1.3rem;
  animation: glowPulse 2.8s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(217, 163, 60, 0.35); }
  50% { box-shadow: 0 8px 50px rgba(217, 163, 60, 0.65); }
}

/* ---------- Prova social ---------- */

.proof-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.proof-card .result { margin-top: auto; padding-top: 18px; }

/* Ficha da obra: os números que o comprador procura, em par rótulo/valor.
   Fica pronta aqui; entra no card assim que os dados forem autorizados. */
.ficha {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--navy-line);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 18px;
}
.ficha > div { display: flex; flex-direction: column; gap: 2px; }
.ficha dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ficha dd {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.05;
  color: var(--gold-bright);
}
.ficha dd small { font-size: .62em; color: var(--white); font-weight: 600; }
/* legenda obrigatória em toda foto: cliente · cidade · kWp · data */
.legenda {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 10px;
}
figure.obra { margin: 0; }
figure.obra img { width: 100%; height: auto; border-radius: 12px; display: block; }

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

ul.plain {
  list-style: none;
}
ul.plain li {
  padding: 14px 0 14px 34px;
  border-bottom: 1px solid var(--navy-line);
  position: relative;
  color: var(--muted);
}
ul.plain li strong { color: var(--white); }
ul.plain li::before {
  content: "";
  position: absolute;
  left: 4px; top: 24px;
  width: 14px; height: 3px;
  border-radius: 2px;
  background: var(--grad-gold);
}

/* ---------- Regiões atendidas ---------- */

.regions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.regions span {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  background: linear-gradient(160deg, #11223f, #0b1729);
  border: 1px solid var(--navy-line);
  border-radius: 99px;
  padding: 11px 22px;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.regions span:hover { border-color: var(--gold); transform: translateY(-2px); }
.regions span.base {
  border-color: rgba(217, 163, 60, 0.55);
  color: var(--ink);
  background: var(--grad-gold);
  font-weight: 600;
  box-shadow: 0 4px 18px rgba(217, 163, 60, 0.3);
}

/* ---------- Preço O&M ---------- */

.price-card {
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(217, 163, 60, 0.14), transparent 60%),
    linear-gradient(160deg, #11223f, #0b1729);
  border: 1px solid rgba(217, 163, 60, 0.45);
  border-radius: 16px;
  padding: 44px 42px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(217, 163, 60, 0.12);
}
.price-card .price {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 4.4rem;
  line-height: 0.95;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-card .price small {
  font-size: 1.2rem;
  font-weight: 600;
  -webkit-text-fill-color: var(--muted);
}
.price-card .from {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 14px;
}

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

footer {
  position: relative;
  background: var(--navy-950);
  border-top: 1px solid var(--navy-line);
  padding: 68px 0 40px;
  font-size: 0.92rem;
  overflow: hidden;
}
footer .wrap { position: relative; z-index: 1; }
footer::before {
  content: "";
  position: absolute;
  top: -300px;
  right: -160px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(217, 163, 60, 0.05) 0deg 5deg, transparent 5deg 14deg);
  -webkit-mask: radial-gradient(circle at center, #000 15%, transparent 64%);
  mask: radial-gradient(circle at center, #000 15%, transparent 64%);
  animation: sunSpin 140s linear infinite;
  pointer-events: none;
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
footer h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
footer p, footer li { color: var(--muted); }
footer ul { list-style: none; }
footer ul li { margin-bottom: 10px; }
footer ul a { color: var(--muted); text-decoration: none !important; transition: color 0.2s var(--ease); }
footer ul a:hover { color: var(--gold-bright); }
.foot-legal {
  border-top: 1px solid var(--navy-line);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---------- Botão flutuante WhatsApp ---------- */

.float-wa {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: linear-gradient(160deg, #2ee06f, #1cab52);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5), 0 0 24px rgba(37, 211, 102, 0.35);
  transition: transform 0.15s var(--ease);
}
.float-wa:hover { transform: scale(1.08); }
.float-wa svg { width: 33px; height: 33px; fill: #ffffff; }
.float-wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.65);
  animation: ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
  0% { transform: scale(1); opacity: 0.8; }
  75%, 100% { transform: scale(1.65); opacity: 0; }
}

/* ---------- Decorações de fundo (injetadas via js) ---------- */

.deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* painel solar desenhado em linha */
.deco-panel {
  width: 340px;
  height: 220px;
  border: 1.5px solid rgba(217, 163, 60, 0.16);
  border-radius: 12px;
  background-image:
    linear-gradient(rgba(217, 163, 60, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 163, 60, 0.11) 1px, transparent 1px);
  background-size: 85px 110px;
  background-position: -1px -1px;
}
.deco-panel::after {
  /* pé do painel */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 2px;
  height: 34px;
  background: rgba(217, 163, 60, 0.16);
}
.deco-panel-left { bottom: 70px; left: -90px; transform: rotate(8deg); }
.deco-panel-right { top: 60px; right: -80px; transform: rotate(-7deg); }

/* traços de circuito elétrico */
.deco-circuit {
  width: 360px;
  height: 300px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%236cc4ff' stroke-width='1'%3E%3Cpath d='M10%2070h40v-40h60'/%3E%3Cpath d='M30%20130v-30h50'/%3E%3Ccircle cx='10' cy='70' r='2.5'/%3E%3Ccircle cx='110' cy='30' r='2.5'/%3E%3Ccircle cx='80' cy='100' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.13;
  -webkit-mask: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.deco-circuit-left { top: 30px; left: -50px; }
.deco-circuit-right { bottom: 30px; right: -40px; }

/* malha de pontos */
.deco-dots {
  width: 280px;
  height: 210px;
  background-image: radial-gradient(rgba(217, 163, 60, 0.55) 1.2px, transparent 1.4px);
  background-size: 24px 24px;
  opacity: 0.3;
  -webkit-mask: radial-gradient(ellipse at center, #000 25%, transparent 72%);
  mask: radial-gradient(ellipse at center, #000 25%, transparent 72%);
}
.deco-dots-hero { bottom: 60px; right: 10%; }
.deco-dots-corner { top: 30px; right: 40px; }

/* órbita com ponto girando */
.deco-orbit {
  border: 1px dashed rgba(217, 163, 60, 0.22);
  border-radius: 50%;
  animation: sunSpin 36s linear infinite;
}
.deco-orbit::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 12px rgba(217, 163, 60, 0.9);
}
.deco-orbit::after {
  /* anel interno fixo */
  content: "";
  position: absolute;
  inset: 26%;
  border: 1px solid rgba(108, 196, 255, 0.12);
  border-radius: 50%;
}
.deco-orbit-hero { width: 240px; height: 240px; bottom: 16%; right: 9%; }
.deco-orbit-band { width: 180px; height: 180px; top: 16%; left: 7%; animation-duration: 28s; }

/* marcas de prancheta (+) espalhadas */
.deco-plus {
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cpath d='M24%2014v20M14%2024h20' stroke='%23d9a33c' stroke-width='1'/%3E%3C/svg%3E");
  opacity: 0.11;
}

/* ondas — referência ao Pantanal */
.deco-wave {
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40'%3E%3Cpath d='M0%2020%20Q%2030%205%2060%2020%20T%20120%2020%20T%20180%2020%20T%20240%2020' fill='none' stroke='%236cc4ff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 240px 40px;
  opacity: 0.07;
  -webkit-mask: linear-gradient(transparent, #000 60%);
  mask: linear-gradient(transparent, #000 60%);
}

/* ============================================================
   Identidades por página: as páginas temáticas desligam a
   família solar e recebem seus próprios elementos.
   ============================================================ */

body.theme-invest .hero::after, body.theme-rural .hero::after, body.theme-oem .hero::after,
body.theme-invest section.alt::after, body.theme-rural section.alt::after, body.theme-oem section.alt::after,
body.theme-invest .cta-band::before, body.theme-rural .cta-band::before, body.theme-oem .cta-band::before,
body.theme-invest section:not(.alt)::before, body.theme-rural section:not(.alt)::before, body.theme-oem section:not(.alt)::before,
body.theme-invest section:not(.alt)::after, body.theme-rural section:not(.alt)::after, body.theme-oem section:not(.alt)::after,
body.theme-invest footer::before, body.theme-rural footer::before, body.theme-oem footer::before {
  display: none;
}

/* ----- Tema INVESTIDORES: crescimento e dados ----- */

.deco-trend {
  width: 420px;
  height: 260px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260'%3E%3Cpolyline points='10,240%20110,180%20190,200%20290,90%20404,26' fill='none' stroke='%23d9a33c' stroke-width='1.5'/%3E%3Cg fill='%23d9a33c'%3E%3Ccircle cx='110' cy='180' r='4'/%3E%3Ccircle cx='190' cy='200' r='4'/%3E%3Ccircle cx='290' cy='90' r='4'/%3E%3C/g%3E%3Cpath d='M404%2026l-24%202M404%2026l-7%2022' fill='none' stroke='%23d9a33c' stroke-width='1.5'/%3E%3C/svg%3E");
  opacity: 0.30;
}
.deco-trend-hero { bottom: 13%; right: 5%; }
.deco-trend-left { top: 60px; left: -70px; opacity: 0.22; }

.deco-bars {
  width: 320px;
  height: 240px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='240'%3E%3Cg fill='none' stroke='%23d9a33c' stroke-width='1.5'%3E%3Crect x='10' y='150' width='40' height='90'/%3E%3Crect x='70' y='110' width='40' height='130'/%3E%3Crect x='130' y='130' width='40' height='110'/%3E%3Crect x='190' y='70' width='40' height='170'/%3E%3Crect x='250' y='30' width='40' height='210'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.24;
  -webkit-mask: linear-gradient(#000 55%, transparent);
  mask: linear-gradient(#000 55%, transparent);
}
.deco-bars-left { bottom: 50px; left: -50px; }
.deco-bars-right { bottom: 40px; right: -40px; }
.deco-bars-band { bottom: -30px; left: 7%; opacity: 0.20; }

/* traços diagonais de mercado */
.deco-ticks {
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cpath d='M24%2038l16-16' stroke='%236cc4ff' stroke-width='1'/%3E%3C/svg%3E");
  opacity: 0.24;
}

.deco-dots-ice {
  width: 280px;
  height: 210px;
  background-image: radial-gradient(rgba(108, 196, 255, 0.55) 1.2px, transparent 1.4px);
  background-size: 24px 24px;
  opacity: 0.45;
  -webkit-mask: radial-gradient(ellipse at center, #000 25%, transparent 72%);
  mask: radial-gradient(ellipse at center, #000 25%, transparent 72%);
}

/* ----- Tema FAZENDAS: horizonte, relevo e Pantanal ----- */

.deco-horizon {
  width: 360px;
  height: 140px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='140'%3E%3Cg fill='none' stroke='%23d9a33c' stroke-width='1.5'%3E%3Cpath d='M60%20120a120%20120%200%200%201%20240%200'/%3E%3Cline x1='0' y1='120' x2='360' y2='120'/%3E%3Cline x1='180' y1='22' x2='180' y2='6'/%3E%3Cline x1='112' y1='42' x2='102' y2='30'/%3E%3Cline x1='248' y1='42' x2='258' y2='30'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.32;
}
.deco-horizon-hero { bottom: 12%; right: 7%; }
.deco-horizon-band { left: 50%; transform: translateX(-50%); bottom: 40px; opacity: 0.26; }

/* curvas de nível (topografia) */
.deco-contour {
  width: 420px;
  height: 300px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300'%3E%3Cg fill='none' stroke='%236cc4ff' stroke-width='1'%3E%3Cellipse cx='210' cy='150' rx='195' ry='125'/%3E%3Cellipse cx='210' cy='150' rx='152' ry='92'/%3E%3Cellipse cx='210' cy='150' rx='110' ry='62'/%3E%3Cellipse cx='210' cy='150' rx='68' ry='34'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.22;
}
.deco-contour-left { top: 50%; transform: translateY(-50%); left: -150px; }
.deco-contour-right { top: 40px; right: -140px; }

/* campo de ondas */
.deco-wavefield {
  width: 400px;
  height: 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40'%3E%3Cpath d='M0%2020%20Q%2030%205%2060%2020%20T%20120%2020%20T%20180%2020%20T%20240%2020' fill='none' stroke='%236cc4ff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 240px 40px;
  opacity: 0.20;
  -webkit-mask: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.deco-wavefield-right { bottom: 30px; right: -50px; }

/* bando de aves */
.deco-birds {
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='210'%3E%3Cg fill='none' stroke='%236cc4ff' stroke-width='1.2'%3E%3Cpath d='M40%2050q8-9%2015%200q7-9%2015%200'/%3E%3Cpath d='M170%20120q6-7%2012%200q6-7%2012%200'/%3E%3Cpath d='M90%20170q5-6%2010%200q5-6%2010%200'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.24;
}
.deco-birds-corner {
  inset: auto;
  width: 300px;
  height: 220px;
  top: 30px;
  right: 50px;
}

/* ----- Tema MANUTENÇÃO O&M: engrenagens e monitoramento ----- */

.deco-gear {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23d9a33c' stroke-width='1.5'%3E%3Ccircle cx='130' cy='130' r='70'/%3E%3Ccircle cx='130' cy='130' r='28'/%3E%3Cline x1='200' y1='130' x2='222' y2='130'/%3E%3Cline x1='190.6' y1='165' x2='209.7' y2='176'/%3E%3Cline x1='165' y1='190.6' x2='176' y2='209.7'/%3E%3Cline x1='130' y1='200' x2='130' y2='222'/%3E%3Cline x1='95' y1='190.6' x2='84' y2='209.7'/%3E%3Cline x1='69.4' y1='165' x2='50.3' y2='176'/%3E%3Cline x1='60' y1='130' x2='38' y2='130'/%3E%3Cline x1='69.4' y1='95' x2='50.3' y2='84'/%3E%3Cline x1='95' y1='69.4' x2='84' y2='50.3'/%3E%3Cline x1='130' y1='60' x2='130' y2='38'/%3E%3Cline x1='165' y1='69.4' x2='176' y2='50.3'/%3E%3Cline x1='190.6' y1='95' x2='209.7' y2='84'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: sunSpin 50s linear infinite;
}
.deco-gear-hero { width: 260px; height: 260px; top: 20%; right: 8%; opacity: 0.30; }
.deco-gear-small { width: 120px; height: 120px; top: 54%; right: 24%; opacity: 0.24; animation: sunSpin 28s linear infinite reverse; }
.deco-gear-corner { width: 240px; height: 240px; bottom: -70px; right: -60px; opacity: 0.22; animation-duration: 70s; }

/* linha de monitoramento da geração */
.deco-pulse {
  height: 80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='80'%3E%3Cpolyline points='0,40%2060,40%2080,40%2095,12%20115,68%20130,40%20200,40%20215,25%20235,55%20250,40%20330,40%20345,10%20365,66%20380,40%20420,40' fill='none' stroke='%236cc4ff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 420px 80px;
  background-repeat: repeat-x;
  opacity: 0.26;
}
.deco-pulse-left { top: 70px; left: -30px; width: 440px; -webkit-mask: linear-gradient(90deg, #000 60%, transparent); mask: linear-gradient(90deg, #000 60%, transparent); }
.deco-pulse-band { left: 0; right: 0; top: 46px; opacity: 0.20; }

/* porcas sextavadas espalhadas */
.deco-hex {
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cpolygon points='86,70%2078,83.9%2062,83.9%2054,70%2062,56.1%2078,56.1' fill='none' stroke='%23d9a33c' stroke-width='1'/%3E%3C/svg%3E");
  opacity: 0.20;
}

/* ----- Tema QUEM SOMOS: prancheta do engenheiro + família solar ----- */

/* cota de medição (linha com setas e limites) */
.deco-cota {
  width: 300px;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='60'%3E%3Cg stroke='%23d9a33c' stroke-width='1' fill='none'%3E%3Cline x1='10' y1='30' x2='290' y2='30'/%3E%3Cline x1='10' y1='14' x2='10' y2='46'/%3E%3Cline x1='290' y1='14' x2='290' y2='46'/%3E%3Cline x1='150' y1='22' x2='150' y2='38'/%3E%3C/g%3E%3Cg fill='%23d9a33c'%3E%3Cpath d='M10%2030l12-5v10z'/%3E%3Cpath d='M290%2030l-12-5v10z'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.28;
}
.deco-cota-hero { top: 26%; right: 6%; }
.deco-cota-band { bottom: 50px; right: 8%; opacity: 0.22; }

/* arcos de compasso */
.deco-arcs {
  width: 300px;
  height: 300px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='none' stroke='%236cc4ff' stroke-width='1'%3E%3Cpath d='M20%20280A260%20260%200%200%201%20280%2020'/%3E%3Cpath d='M20%20220A200%20200%200%200%201%20220%2020'/%3E%3Cpath d='M20%20160A140%20140%200%200%201%20160%2020'/%3E%3C/g%3E%3Cg stroke='%23d9a33c' stroke-width='1'%3E%3Cline x1='8' y1='280' x2='32' y2='280'/%3E%3Cline x1='20' y1='268' x2='20' y2='292'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.24;
}
.deco-arcs-left { bottom: 30px; left: -70px; }

/* skyline de Corumbá estilizado */
.deco-skyline {
  width: 420px;
  height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='120'%3E%3Cg fill='none' stroke='%23d9a33c' stroke-width='1.2'%3E%3Cpath d='M0%20120V80h40v40'/%3E%3Cpath d='M40%20120V50h34v70'/%3E%3Cpath d='M74%20120V90h30v30'/%3E%3Cpath d='M104%20120V38h44v82'/%3E%3Cpath d='M148%20120V70h30v50'/%3E%3Cpath d='M178%20120V96h40v24'/%3E%3Cpath d='M218%20120V56h36v64'/%3E%3Cpath d='M254%20120V84h30v36'/%3E%3Cpath d='M284%20120V44h40v76'/%3E%3Cpath d='M324%20120V76h32v44'/%3E%3Cpath d='M356%20120V60h34v60'/%3E%3Cline x1='0' y1='120' x2='420' y2='120'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.20;
  -webkit-mask: linear-gradient(90deg, #000 70%, transparent);
  mask: linear-gradient(90deg, #000 70%, transparent);
}
.deco-skyline-left { bottom: 0; left: 30px; }

/* na página Quem Somos, a família solar fica mais visível e ganha vida */
body.theme-quem .deco-circuit { opacity: 0.26; }
body.theme-quem .deco-dots { opacity: 0.48; }
body.theme-quem .deco-plus { opacity: 0.18; }
body.theme-quem .deco-orbit { border-color: rgba(217, 163, 60, 0.4); }
body.theme-quem .deco-orbit::after { border-color: rgba(108, 196, 255, 0.22); }
body.theme-quem .deco-panel {
  border-color: rgba(217, 163, 60, 0.3);
  background-image:
    linear-gradient(rgba(217, 163, 60, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 163, 60, 0.2) 1px, transparent 1px);
}
body.theme-quem .deco-panel::after { background: rgba(217, 163, 60, 0.3); }

/* ============================================================
   Objetos 3D girando — um por página (decoração de fundo)
   ============================================================ */

@keyframes panelSpin {
  from { transform: rotateX(12deg) rotateY(0deg); }
  to { transform: rotateX(12deg) rotateY(360deg); }
}
@keyframes coinSpin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
@keyframes rotorSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes rotorSpinRev {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* ----- COMERCIO: o ar-condicionado que nao desliga + a conta despencando ----- */
.deco-clima3d {
  width: 320px;
  height: 300px;
  top: 16%;
  right: 7%;
  opacity: 0.6;
}
.deco-clima3d svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 28px rgba(217, 163, 60, 0.2));
  animation: climaFlutua 9s ease-in-out infinite alternate;
}
@keyframes climaFlutua {
  from { transform: translateY(-6px); }
  to   { transform: translateY(6px); }
}
/* sopro de ar frio: sai sem parar, porque o aparelho nunca desliga */
.deco-clima3d .onda {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: climaSopro 3s ease-out infinite;
  animation-delay: var(--w, 0s);
}
@keyframes climaSopro {
  0%   { opacity: 0; transform: translate(-7px, -9px) scale(.93); }
  25%  { opacity: .95; }
  70%  { opacity: .5; }
  100% { opacity: 0; transform: translate(15px, 21px) scale(1.07); }
}
/* a curva da conta caindo, redesenhada em ciclo */
.deco-clima3d .queda {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: climaQueda 7s ease-in-out infinite both;
  animation-delay: var(--d, 0s);
}
@keyframes climaQueda {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  6%   { opacity: 1; }
  40%  { stroke-dashoffset: 0; opacity: 1; }
  86%  { stroke-dashoffset: 0; opacity: 1; }
  96%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}

/* ----- INVESTIDORES: moeda com gráfico de alta ----- */
.deco-coin3d {
  width: 230px;
  height: 230px;
  top: 18%;
  right: 9%;
  perspective: 900px;
  opacity: 0.6;
}
.deco-coin3d::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Ccircle%20cx='120'%20cy='120'%20r='110'%20fill='%230d1e36'%20stroke='%23d9a33c'%20stroke-width='7'/%3E%3Ccircle%20cx='120'%20cy='120'%20r='92'%20fill='none'%20stroke='%23d9a33c'%20stroke-width='2'%20stroke-dasharray='4%208'%20stroke-opacity='.7'/%3E%3Cpolyline%20points='60,152%2098,114%20122,134%20176,76'%20fill='none'%20stroke='%23d9a33c'%20stroke-width='9'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpolyline%20points='150,74%20178,74%20178,102'%20fill='none'%20stroke='%23d9a33c'%20stroke-width='9'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 34px rgba(217, 163, 60, 0.3));
  animation: coinSpin 11s linear infinite;
}

/* ----- FAZENDAS: catavento com hélice rodando ----- */
.deco-mill {
  width: 300px;
  height: 380px;
  top: 7%;
  right: 8%;
  opacity: 0.6;
}
.deco-mill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='380'%3E%3Cg%20stroke='%23d9a33c'%20stroke-width='4'%20fill='none'%20stroke-linecap='round'%3E%3Cline%20x1='150'%20y1='125'%20x2='105'%20y2='365'/%3E%3Cline%20x1='150'%20y1='125'%20x2='195'%20y2='365'/%3E%3Cline%20x1='121'%20y1='215'%20x2='179'%20y2='215'/%3E%3Cline%20x1='112'%20y1='285'%20x2='188'%20y2='285'/%3E%3Cline%20x1='121'%20y1='215'%20x2='188'%20y2='285'/%3E%3Cline%20x1='179'%20y1='215'%20x2='112'%20y2='285'/%3E%3C/g%3E%3Cg%20stroke='%23d9a33c'%20stroke-width='5'%3E%3Cline%20x1='150'%20y1='120'%20x2='236'%20y2='96'/%3E%3Cpolygon%20points='236,80%20288,66%20288,120%20236,110'%20fill='%230d1e36'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 28px rgba(217, 163, 60, 0.2));
}
.deco-mill::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  left: 30px;
  top: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cdefs%3E%3Cpath%20id='b'%20d='M120%20120%20L110%2038%20Q120%2024%20130%2038%20Z'%20fill='%23d9a33c'%20fill-opacity='.8'/%3E%3C/defs%3E%3Cuse%20href='%23b'/%3E%3Cuse%20href='%23b'%20transform='rotate(30%20120%20120)'/%3E%3Cuse%20href='%23b'%20transform='rotate(60%20120%20120)'/%3E%3Cuse%20href='%23b'%20transform='rotate(90%20120%20120)'/%3E%3Cuse%20href='%23b'%20transform='rotate(120%20120%20120)'/%3E%3Cuse%20href='%23b'%20transform='rotate(150%20120%20120)'/%3E%3Cuse%20href='%23b'%20transform='rotate(180%20120%20120)'/%3E%3Cuse%20href='%23b'%20transform='rotate(210%20120%20120)'/%3E%3Cuse%20href='%23b'%20transform='rotate(240%20120%20120)'/%3E%3Cuse%20href='%23b'%20transform='rotate(270%20120%20120)'/%3E%3Cuse%20href='%23b'%20transform='rotate(300%20120%20120)'/%3E%3Cuse%20href='%23b'%20transform='rotate(330%20120%20120)'/%3E%3Ccircle%20cx='120'%20cy='120'%20r='13'%20fill='%230d1e36'%20stroke='%23d9a33c'%20stroke-width='5'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: rotorSpin 7s linear infinite;
}

/* ----- MANUTENÇÃO: engrenagens engrenadas ----- */
.deco-gears3d {
  width: 340px;
  height: 330px;
  top: -60px;
  right: -50px;
  opacity: 0.6;
}
.deco-gears3d::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  left: 0;
  top: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='260'%3E%3Cdefs%3E%3Crect%20id='t'%20x='116'%20y='4'%20width='28'%20height='32'%20rx='6'%20fill='%23d9a33c'%20fill-opacity='.85'/%3E%3C/defs%3E%3Cuse%20href='%23t'/%3E%3Cuse%20href='%23t'%20transform='rotate(30%20130%20130)'/%3E%3Cuse%20href='%23t'%20transform='rotate(60%20130%20130)'/%3E%3Cuse%20href='%23t'%20transform='rotate(90%20130%20130)'/%3E%3Cuse%20href='%23t'%20transform='rotate(120%20130%20130)'/%3E%3Cuse%20href='%23t'%20transform='rotate(150%20130%20130)'/%3E%3Cuse%20href='%23t'%20transform='rotate(180%20130%20130)'/%3E%3Cuse%20href='%23t'%20transform='rotate(210%20130%20130)'/%3E%3Cuse%20href='%23t'%20transform='rotate(240%20130%20130)'/%3E%3Cuse%20href='%23t'%20transform='rotate(270%20130%20130)'/%3E%3Cuse%20href='%23t'%20transform='rotate(300%20130%20130)'/%3E%3Cuse%20href='%23t'%20transform='rotate(330%20130%20130)'/%3E%3Ccircle%20cx='130'%20cy='130'%20r='96'%20fill='%230d1e36'%20fill-opacity='.6'%20stroke='%23d9a33c'%20stroke-width='7'/%3E%3Ccircle%20cx='130'%20cy='130'%20r='38'%20fill='none'%20stroke='%23d9a33c'%20stroke-width='6'/%3E%3Cg%20stroke='%23d9a33c'%20stroke-width='6'%3E%3Cline%20x1='130'%20y1='92'%20x2='130'%20y2='58'/%3E%3Cline%20x1='130'%20y1='168'%20x2='130'%20y2='202'/%3E%3Cline%20x1='92'%20y1='130'%20x2='58'%20y2='130'/%3E%3Cline%20x1='168'%20y1='130'%20x2='202'%20y2='130'/%3E%3C/g%3E%3Cpolygon%20points='130,112%20146,121%20146,139%20130,148%20114,139%20114,121'%20fill='%23d9a33c'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 30px rgba(217, 163, 60, 0.22));
  animation: rotorSpin 24s linear infinite;
}
.deco-gears3d::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  left: 200px;
  top: 180px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%3E%3Cdefs%3E%3Crect%20id='s'%20x='66'%20y='2'%20width='18'%20height='22'%20rx='4'%20fill='%23d9a33c'%20fill-opacity='.85'/%3E%3C/defs%3E%3Cuse%20href='%23s'/%3E%3Cuse%20href='%23s'%20transform='rotate(45%2075%2075)'/%3E%3Cuse%20href='%23s'%20transform='rotate(90%2075%2075)'/%3E%3Cuse%20href='%23s'%20transform='rotate(135%2075%2075)'/%3E%3Cuse%20href='%23s'%20transform='rotate(180%2075%2075)'/%3E%3Cuse%20href='%23s'%20transform='rotate(225%2075%2075)'/%3E%3Cuse%20href='%23s'%20transform='rotate(270%2075%2075)'/%3E%3Cuse%20href='%23s'%20transform='rotate(315%2075%2075)'/%3E%3Ccircle%20cx='75'%20cy='75'%20r='53'%20fill='%230d1e36'%20fill-opacity='.6'%20stroke='%23d9a33c'%20stroke-width='6'/%3E%3Ccircle%20cx='75'%20cy='75'%20r='16'%20fill='none'%20stroke='%23d9a33c'%20stroke-width='5'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: rotorSpinRev 13s linear infinite;
}

/* ----- QUEM SOMOS: o projeto se desenha sozinho na prancheta ----- */
.deco-blueprint3d {
  width: 300px;
  height: 390px;
  top: 12%;
  right: 6%;
  perspective: 1000px;
  opacity: 0.62;
}
.deco-blueprint3d svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 26px rgba(217, 163, 60, 0.22));
  animation: bpBalanco 18s ease-in-out infinite;
}
/* cada traco surge em sequencia, como se estivesse sendo desenhado */
.deco-blueprint3d .d {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: bpDesenha 13s ease-in-out infinite both;
  animation-delay: var(--d, 0s);
}
@keyframes bpBalanco {
  0%, 100% { transform: rotateY(-11deg) rotateX(4deg); }
  50%      { transform: rotateY(11deg) rotateX(-3deg); }
}
@keyframes bpDesenha {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  3%   { opacity: 1; }
  22%  { stroke-dashoffset: 0; opacity: 1; }
  84%  { stroke-dashoffset: 0; opacity: 1; }
  93%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}

/* ---------- Faixa de filme (vídeo ambiente) ---------- */

.film-section { padding: 72px 0; }
.film {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(217, 163, 60, 0.35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.film video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.film::after {
  /* vinheta leve para integrar o vídeo ao navy da página */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 120px rgba(5, 10, 18, 0.55);
}
.film-caption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

/* ---------- Espaços para vídeos das instalações ---------- */

.video-slot {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1.5px dashed rgba(217, 163, 60, 0.45);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 80% 80% at 50% 120%, rgba(217, 163, 60, 0.08), transparent 60%),
    linear-gradient(160deg, #11223f, #0b1729);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
  overflow: hidden;
}
.video-slot:hover { border-color: var(--gold); transform: translateY(-3px); }
.video-slot .play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--grad-gold);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 26px rgba(217, 163, 60, 0.35);
}
.video-slot .play svg { width: 26px; height: 26px; margin-left: 3px; }
/* quando o vídeo real for adicionado, ele ocupa o espaço inteiro */
.video-slot video,
.video-slot iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  object-fit: cover;
}

/* ---------- Pacote de movimento das decorações ----------
   Deslizes contínuos usam múltiplos exatos do tamanho do
   padrão para o laço ser perfeito (sem "pulo"). */

@keyframes decoFloat { to { translate: 0 -16px; } }
@keyframes decoBreathe { to { scale: 1.06; } }
@keyframes decoDriftPlus { to { background-position: 340px 170px; } }
@keyframes decoDriftDots { to { background-position: 240px 120px; } }
@keyframes decoDriftCircuit { to { background-position: 280px 140px; } }
@keyframes decoDriftHex { to { background-position: 380px 190px; } }
@keyframes decoBirdsFly { to { background-position: 520px -210px; } }
@keyframes decoWaveFlow { to { background-position: 240px 0; } }
@keyframes decoPulseScroll { to { background-position: -420px 0; } }

/* deriva contínua (padrões que escorregam devagar) */
.deco-plus { animation: decoDriftPlus 60s linear infinite; }
.deco-dots, .deco-dots-ice { animation: decoDriftDots 50s linear infinite; }
.deco-ticks { animation: decoDriftPlus 45s linear infinite; }
.deco-circuit { animation: decoDriftCircuit 40s linear infinite; }
.deco-hex { animation: decoDriftHex 70s linear infinite; }

/* pássaros cruzando o céu · ondas correndo · monitor rolando */
.deco-birds { animation: decoBirdsFly 26s linear infinite; }
.deco-wave { animation: decoWaveFlow 9s linear infinite; }
.deco-wavefield { animation: decoWaveFlow 7s linear infinite; }
.deco-pulse { animation: decoPulseScroll 6s linear infinite; }

/* flutuação suave (sobe e desce) */
.deco-panel { animation: decoFloat 6s ease-in-out infinite alternate; }
.deco-trend { animation: decoFloat 7s ease-in-out infinite alternate; }
.deco-bars { animation: decoFloat 8s ease-in-out infinite alternate; }
.deco-cota { animation: decoFloat 7s ease-in-out infinite alternate; }

/* respiração (cresce e encolhe de leve) */
.deco-contour { animation: decoBreathe 9s ease-in-out infinite alternate; }
.deco-horizon { animation: decoBreathe 8s ease-in-out infinite alternate; }
.deco-arcs { animation: decoBreathe 10s ease-in-out infinite alternate; }

/* ---------- Animações de entrada ao rolar ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .deco-blueprint3d .d { stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .deco-clima3d .queda { stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .deco-clima3d .onda { opacity: .7 !important; }
}

/* ---------- Hero dividido + painel de monitoramento ---------- */

.hero-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 56px;
  align-items: center;
}
.hero-grid h1 { font-size: clamp(2.5rem, 4.3vw, 4.1rem); }
.hero-visual {
  position: relative;
  animation: fadeUp 0.7s var(--ease) 0.3s both;
}

.monitor {
  position: relative;
  background: linear-gradient(160deg, #12233f, #0a1526);
  border: 1px solid rgba(217, 163, 60, 0.35);
  border-radius: 16px;
  padding: 26px 26px 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
/* varredura do painel removida: sugeria dado ao vivo que nao existe */
.monitor > * { position: relative; }
.monitor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.monitor-head > span:first-child {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.monitor-live {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4be381;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.monitor-live i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(37, 211, 102, 0.9);
  animation: dotPulse 1.6s ease-in-out infinite;
}
.monitor-kpi { margin-bottom: 22px; }
.monitor-kpi strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 3.1rem;
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.monitor-kpi span { font-size: 0.85rem; color: var(--muted); }
.monitor-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 110px;
  margin-bottom: 14px;
}
.monitor-bars i {
  flex: 1;
  height: var(--h);
  background: linear-gradient(180deg, #f0b94a, #b57e1e);
  border-radius: 4px 4px 0 0;
  opacity: 0.85;
  transform-origin: bottom;
  animation: barGrow 0.9s var(--ease) backwards;
  animation-delay: calc(var(--i) * 90ms + 0.5s);
}
@keyframes barGrow { from { transform: scaleY(0); } }
.monitor-note {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(200, 212, 230, 0.92);
  text-align: right;
}

/* ---------- Barra de progresso de leitura ---------- */

.progress-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-gold);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 300;
  pointer-events: none;
  animation: progressGrow auto linear;
  animation-timeline: scroll(root);
}
@keyframes progressGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---------- Foco de luz que acompanha o mouse ---------- */

.cursor-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 95;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 30%), rgba(217, 163, 60, 0.08), transparent 65%);
}

/* ---------- Micro-interações dos botões ---------- */

.btn:active { transform: translateY(1px) scale(0.98); }
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  left: -60%;
  transform: skewX(-12deg);
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: btnShine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnShine {
  0% { left: -60%; }
  22% { left: 130%; }
  100% { left: 130%; }
}

/* revelação ao rolar ganha desfoque que abre em nitidez */
.reveal {
  filter: blur(10px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease), filter 0.65s var(--ease);
}
.reveal.in { filter: none; }

/* ---------- Tipografia cinética (ativada via js) ---------- */

/* títulos entram palavra por palavra */
.kinetic .w { display: inline-block; opacity: 0; transform: translateY(0.7em); filter: blur(6px); }
.kinetic.words-in .w {
  animation: wordUp 0.6s var(--ease) both;
  animation-delay: calc(var(--wi) * 55ms);
}
@keyframes wordUp {
  from { opacity: 0; transform: translateY(0.7em); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
.hero h1.kinetic { animation: none; }

/* palavras douradas dentro de títulos divididos mantêm o gradiente */
.hl .w {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* brilho deslizando nos textos em degradê dourado */
@keyframes hlShimmer {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}
.hl, .statline strong, .price-card .price, .monitor-kpi strong {
  background-size: 200% 100%;
  animation: hlShimmer 7s ease-in-out infinite;
}

/* linhas que se desenham quando o título aparece */
.eyebrow::before { transform-origin: left; }
body.kinetic-on .hero .eyebrow::before { animation: lineDraw 0.8s var(--ease) 0.15s both; }
body.kinetic-on .section-head.in .eyebrow::before,
body.kinetic-on .urgency.in .eyebrow::before { animation: lineDraw 0.8s var(--ease) both; }
@keyframes lineDraw { from { transform: scaleX(0); } }

body.kinetic-on .section-head h2::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease) 0.25s;
}
body.kinetic-on .section-head.in h2::after { transform: scaleX(1); }
body.kinetic-on .cta-band h2::after {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.8s var(--ease) 0.35s;
}
body.kinetic-on .cta-band h2.words-in::after { transform: scaleX(1); }

/* número-fantasma respira devagar */
.section-head::before { animation: ghostDrift 14s ease-in-out infinite alternate; }
@keyframes ghostDrift { to { translate: 0 14px; } }

/* títulos e ícones dos cartões reagem ao passar o mouse */
.card h3 { transition: color 0.25s var(--ease); }
.card:hover h3 { color: var(--gold-bright); }
.icon-chip { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.card:hover .icon-chip {
  transform: translateY(-4px) rotate(-5deg);
  box-shadow: 0 8px 22px rgba(217, 163, 60, 0.3);
}
.card .num { transition: transform 0.25s var(--ease); }
.card:hover .num { transform: translateY(-4px) rotate(5deg); }

/* letreiro pausa quando o mouse está em cima */
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- Responsivo ---------- */

/* rótulo do botão em duas versões: a longa no computador, a curta no celular.
   Precisa vir ANTES das media queries, senão sobrescreve a versão do celular. */
.so-celular { display: none; }
.so-tela-grande { display: inline; }

@media (max-width: 1040px) {
  .nav {
    display: none;
    position: absolute;
    top: 74px; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--navy-950);
    border-bottom: 1px solid var(--navy-line);
    padding: 8px 24px 16px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--navy-line); }
  .nav a::after { display: none; }
  .nav a:last-of-type { border-bottom: none; }
  .nav-toggle { display: block; }
  .topbar .btn { padding: 8px 14px; font-size: 0.95rem; }
}

@media (max-width: 960px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-visual { max-width: 460px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }

  /* Título do hero no celular. Com 48px ele ocupava 8 linhas e 365px de altura,
     empurrando o único botão do site para y=803 numa tela de 812 — ou seja,
     nascia cortado. No computador nada muda. */
  .hero h1 { font-size: clamp(2rem, 9vw, 2.5rem); }

  /* rótulo do botão em versão curta: 40 caracteres quebravam em duas linhas,
     e botão quebrado parece defeito no único CTA da página */
  .so-tela-grande { display: none; }
  .so-celular { display: inline; }

  /* Manutenção: a linha de comprovação empurrava o botão para y=797 numa tela
     de 812. No celular ela desce para depois do botão — o texto continua lá,
     só troca de ordem. */
  .hero-grid > div:first-child {
    display: flex;
    flex-direction: column;
  }
  .hero-grid > div:first-child > .eyebrow { order: 1; }
  .hero-grid > div:first-child > h1       { order: 2; }
  .hero-grid > div:first-child > .lead    { order: 3; }
  .hero-grid > div:first-child > .hero-cta{ order: 4; }
  .hero-grid > div:first-child > .hero-proof { order: 5; margin-top: 26px; margin-bottom: 0; }

  /* Título nasce pronto no celular: sem borrão e sem entrada palavra a palavra.
     Antes ficava invisível por 1,3 s — quem vinha do anúncio via parágrafo e
     botão antes de saber o que a empresa faz. No computador segue como estava. */
  .hero h1.kinetic .w,
  .hero h1.kinetic.words-in .w {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }

  /* botão flutuante sai da frente quando um botão de WhatsApp está na tela */
  .float-wa.recolhido {
    opacity: 0;
    transform: scale(.6);
    pointer-events: none;
  }
  .float-wa { transition: opacity .25s var(--ease), transform .25s var(--ease); }

  /* rotulo do botao principal cabendo em uma linha (quebrado parece erro de layout) */
  .hero-cta .btn { font-size: .96rem; letter-spacing: .02em; }
  section { padding: 64px 0; }
  .hero { padding: 68px 0 60px; }
  .hero::after { width: 440px; height: 440px; top: -160px; right: -160px; }

  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }

  .statline { flex-direction: column; }
  .statline > div { margin-right: 0; padding: 22px 0 0; }
  .statline strong { font-size: 2.8rem; }
  .section-head::before { top: -36px; }
  .urgency { padding: 34px 26px; }
  .price-card { padding: 34px 26px; }
  .cta-band { padding: 80px 0; }

  /* decorações de fundo mais discretas no celular */
  section:not(.alt)::before, section:not(.alt)::after { display: none; }
  .deco { display: none; }
  section.alt::after { width: 420px; height: 420px; bottom: -200px; left: -200px; }
  .cta-band::before { width: 560px; height: 560px; bottom: -280px; }
  footer::before { width: 380px; height: 380px; top: -210px; right: -120px; }
}

/* ============================================================
   Botão do topo em telas estreitas — vira só o ícone do WhatsApp.
   Os rótulos ("Marcar reunião", "Falar sobre manutenção"…) exigem
   de 445px a 519px de viewport; abaixo disso o texto era cortado.
   O rótulo continua no DOM para leitores de tela.
   ============================================================ */
@media (max-width: 560px) {
  .topbar .btn-topo {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  .topbar .btn-topo svg { width: 20px; height: 20px; }
  .topbar .btn-topo .btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .topbar .wrap { gap: 12px; }
}


/* ============================================================
   ABERTURA DO SITE (so na home)
   O "D" se desenha traco a traco no escuro, o ouro preenche,
   a camera da deszoom revelando o nome, a tela clareia e o
   logo sobe ate o lugar dele no cabecalho.
   O portao que decide se roda fica no <head> do index.html.
   ============================================================ */

#intro { display: none; }

html.com-intro { overflow: hidden; }
html.com-intro .topbar .brand { visibility: hidden; }

html.com-intro #intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #04070d;
  animation: introClareia 2.8s var(--ease) 4.55s both;
}
@keyframes introClareia {
  from { background: #04070d; backdrop-filter: blur(22px); }
  to   { background: rgba(4, 7, 13, 0); backdrop-filter: blur(0px); }
}

/* brilho quente que nasce e morre atras do logo */
html.com-intro #intro::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 640px;
  height: 640px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(217, 163, 60, 0.18), transparent 62%);
  opacity: 0;
  pointer-events: none;
  animation: introBrilho 4.4s var(--ease) 1.4s both;
}
@keyframes introBrilho {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; }
}

/* o palco: comeca com zoom no D e a camera afasta */
html.com-intro .intro-palco {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  animation: introDeszoom 1.6s cubic-bezier(.5, 0, .15, 1) 2.9s both;
}
html.com-intro .intro-palco > * { grid-area: 1 / 1; }
@keyframes introDeszoom {
  from { transform: translate(-50%, -50%) scale(3); }
  to   { transform: translate(-50%, -50%) scale(1); }
}

/* ---------- a marca se desenha, peça a peça ---------- */
html.com-intro .intro-icone {
  display: block;
  width: 116px;
  height: 116px;
  overflow: visible;
  filter: drop-shadow(0 0 26px rgba(217, 163, 60, .35));
  animation: introIconeSai .7s var(--ease) 3.4s both;
}
@keyframes introIconeSai {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.8); }
}

/* a linha-guia traça o anel; depois some, e o anel cheio assume o lugar */
html.com-intro .intro-icone .g {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: introTraca .85s cubic-bezier(.5, 0, .15, 1) both,
             introGuiaSai .45s var(--ease) both;
}
html.com-intro .intro-icone .g1 { animation-delay: .12s, 1.25s; }
html.com-intro .intro-icone .g2 { animation-delay: .97s, 1.4s; animation-duration: .4s, .45s; }
@keyframes introTraca {
  /* visibility, e nao so o tracejado: com stroke-dasharray o navegador ainda
     pinta uma lasca no arremate antes do traco comecar — era o 'ponto solto' */
  from { stroke-dashoffset: 1; visibility: hidden; }
  1%   { visibility: visible; }
  to   { stroke-dashoffset: 0; visibility: visible; }
}
@keyframes introGuiaSai { to { opacity: 0; } }

/* o sol assenta girando de leve enquanto se forma */
html.com-intro .intro-icone .im-sol {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: introAssenta 2.2s cubic-bezier(.32, 0, .18, 1) .12s both;
}
@keyframes introAssenta {
  from { transform: rotate(-11deg); }
  to   { transform: rotate(0deg); }
}

/* anel de luz que estoura quando a marca fica pronta */
html.com-intro .intro-icone .im-flash {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: introEstouro .85s cubic-bezier(.2, .7, .3, 1) 2.75s both;
}
@keyframes introEstouro {
  0%   { opacity: 0; transform: scale(.9); }
  22%  { opacity: .85; }
  100% { opacity: 0; transform: scale(1.75); }
}

html.com-intro .intro-icone .im-anel {
  opacity: 0;
  animation: introSurge .45s var(--ease) 1.2s both;
}
@keyframes introSurge { to { opacity: 1; } }

/* as lâminas crescem de dentro do sol, uma a uma */
html.com-intro .intro-icone .r {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: introSalta .4s cubic-bezier(.3, 1.5, .5, 1) both;
}
html.com-intro .intro-icone .r1 { animation-delay: 1.45s; }
html.com-intro .intro-icone .r2 { animation-delay: 1.57s; }
html.com-intro .intro-icone .r3 { animation-delay: 1.69s; }
html.com-intro .intro-icone .r4 { animation-delay: 1.81s; }
html.com-intro .intro-icone .r5 { animation-delay: 1.93s; }
@keyframes introSalta {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: 1; transform: scale(1); }
}

/* as folhas brotam da própria base, no ponto onde se encontram */
html.com-intro .intro-icone .fo {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 50% 70%;
  animation: introBrota .5s cubic-bezier(.3, 1.3, .5, 1) both;
}
html.com-intro .intro-icone .fo1 { animation-delay: 2.05s; }
html.com-intro .intro-icone .fo2 { animation-delay: 2.17s; }
html.com-intro .intro-icone .fo3 { animation-delay: 2.35s; }
html.com-intro .intro-icone .fo4 { animation-delay: 2.4s; }
@keyframes introBrota {
  from { opacity: 0; transform: scale(.2); }
  to   { opacity: 1; transform: scale(1); }
}

/* a placa entra por último, deslizando */
html.com-intro .intro-icone .im-placa {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: introPlaca .45s var(--ease) 2.3s both;
}
@keyframes introPlaca {
  from { opacity: 0; transform: translate(7px, 5px) scale(.85); }
  to   { opacity: 1; transform: none; }
}

/* ---------- o nome ----------
   Tipografia em em, nas mesmas proporcoes do .brand do cabecalho:
   assim o logo pousa exatamente no lugar, em qualquer tela.        */
html.com-intro .intro-marca {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
  white-space: nowrap;
  transform-origin: left top;
}
html.com-intro .intro-marca.voa {
  transform: translate(var(--voo-x, 0), var(--voo-y, 0)) scale(var(--voo-s, 1));
  transition: transform 2.8s cubic-bezier(.45, 0, .2, 1);
}
html.com-intro .intro-marca-int {
  opacity: 0;
  animation: introNome .8s var(--ease) 3.4s both;
}
@keyframes introNome { to { opacity: 1; } }

/* o nome se revela da esquerda para a direita: primeiro o D, depois o resto */
html.com-intro .intro-wordmark {
  display: block;
  clip-path: inset(0 100% 0 0);
  animation: introRevela 1s cubic-bezier(.5, 0, .15, 1) 3.45s both;
}
@keyframes introRevela { to { clip-path: inset(0 0 0 0); } }

html.com-intro .intro-marca small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .353em;
  letter-spacing: .34em;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: .4165em;
  opacity: 0;
  animation: introSub .8s var(--ease) 4.1s both;
}
@keyframes introSub {
  from { opacity: 0; letter-spacing: .62em; }
  to   { opacity: 1; letter-spacing: .34em; }
}


/* ---------- Botão de som no cabeçalho ---------- */
/* O site pode tocar sons discretos nas animações. O controle fica no
   cabeçalho porque controle de som precisa ser achável, não escondido.
   O estado vive em aria-pressed: acessível e serve de seletor de CSS. */
.som-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--navy-line);
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}
.som-toggle:hover {
  color: var(--gold-bright);
  border-color: rgba(217, 163, 60, 0.45);
  background: rgba(217, 163, 60, 0.06);
}
.som-toggle:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}
.som-toggle[aria-pressed="true"] {
  color: var(--gold-bright);
  border-color: rgba(217, 163, 60, 0.45);
}
/* mudo é o estado padrão: mostra o alto-falante cortado */
.som-toggle .som-lig { display: none; }
.som-toggle[aria-pressed="true"] .som-lig { display: block; }
.som-toggle[aria-pressed="true"] .som-mudo { display: none; }

/* Enquanto o navegador não liberou áudio (falta o 1º clique da pessoa), o
   botão NÃO deve parecer desabilitado: ele é justamente o conserto, não a
   falha. Em vez de apagar, convida — contorno dourado suave. */
.som-toggle[data-travado="sim"] {
  border-color: rgba(217, 163, 60, 0.5);
  color: var(--gold);
}

/* No toque, o alvo vai a 44x44: abaixo disso o dedo erra, e controle de
   som que a pessoa nao consegue acertar e pior que nao ter controle. */
@media (pointer: coarse) {
  .som-toggle { width: 44px; height: 44px; }
}


/* ---------- Botão de som dentro da abertura ---------- */
/* Único caminho para a abertura ter som numa primeira visita: o navegador
   exige um gesto, e qualquer outro clique pula a animação. Discreto de
   propósito — quem ignorar vê a abertura normal, sem atrito nenhum. */
.intro-som {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px 0 13px;
  background: rgba(10, 20, 36, 0.55);
  border: 1px solid rgba(217, 163, 60, 0.42);
  border-radius: 999px;
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  animation: introSomEntra 0.7s var(--ease) 1.1s forwards;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.intro-som:hover {
  background: rgba(217, 163, 60, 0.14);
  border-color: rgba(217, 163, 60, 0.75);
}
.intro-som:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.intro-som.saiu { animation: introSomSai 0.35s var(--ease) forwards; }

@keyframes introSomEntra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 0.85; transform: none; }
}
@keyframes introSomSai {
  to { opacity: 0; transform: scale(0.9); }
}

@media (max-width: 560px) {
  .intro-som { left: 16px; bottom: 16px; font-size: 0.68rem; }
}


/* ---------- Botão de pular a abertura ---------- */
/* A abertura deixou de sair no clique (o clique agora liga o som), então
   sair precisa de um caminho explícito. Discreto, mas presente: prender
   alguém por 8 segundos sem saída é como se perde uma visita paga. */
.intro-pular {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  min-height: 44px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid rgba(232, 238, 252, 0.22);
  border-radius: 999px;
  color: rgba(232, 238, 252, 0.6);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  animation: introSomEntra 0.7s var(--ease) 1.1s forwards;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.intro-pular:hover { color: #fff; border-color: rgba(232, 238, 252, 0.5); }
.intro-pular:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

@media (max-width: 560px) {
  .intro-pular { right: 16px; bottom: 16px; font-size: 0.68rem; padding: 0 14px; }
}


/* Nota de rodapé de uma ficha técnica. Existe para um caso específico: a
   usina de 112 kWp foi homologada em 08/2026 e a geração publicada e uma
   PROJECAO, nao uma media medida. Numero projetado sem rotulo vira promessa
   - e promessa de geracao e o tipo de coisa que se discute depois em
   reuniao com investidor. */
.nota-ficha {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--muted);
}


/* ---------- FAQ ----------
   <details> nativo: funciona por teclado, funciona sem CSS, e o navegador
   ja cuida do estado aberto/fechado. Um acordeao feito a mao daria mais
   trabalho e seria menos acessivel. */
.faq { max-width: 860px; }
.faq-item {
  border-bottom: 1px solid var(--navy-line);
}
.faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--white);
  transition: color 0.2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--gold);
  transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--gold-bright); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}
.faq-resposta {
  padding: 0 44px 24px 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.7;
}
.faq-resposta strong { color: var(--white); font-weight: 600; }
.faq-nota {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--muted);
  opacity: 0.85;
}

@media (max-width: 560px) {
  .faq-item summary { font-size: 1.02rem; padding: 18px 0; }
  .faq-resposta { padding-right: 0; }
}