/* ==========================================================================
   solar — "Usina"
   Charcoal and orange, heavy uppercase headings, big orange numbers.
   Rules live in .claude/skills/site-design/SKILL.md. Restyle only — every
   id / data-* / name / state-class hook main.js uses is preserved.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --char: #2b2b30;
  --char-2: #35353b;
  --char-line: #44444b;
  --black: #1c1c20;
  --ink: #1c1c20;
  --orange: #f58634;
  --orange-hover: #e47522;
  --orange-deep: #d9661a;
  --orange-ink: #a94a0c;
  --white: #ffffff;
  --grey: #f0f3f2;
  --rule: #dadfdd;
  --mute: #5e6068;
  --mute-d: #b5b7be;

  --r: 4px;

  --font-display: 'Montserrat', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --edge: 16px;
  --maxw: 74rem;
  --section-y: 64px;
}

@media (min-width: 768px) {
  :root { --edge: 24px; --section-y: 96px; }
}

/* --------------------------------------------------------------------------
   Reset + constraints
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: clip; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 48px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, dl, figure { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.site-header :focus-visible,
.hero-copy :focus-visible,
.section--dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--orange); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Overflow hardening — text-bearing flex/grid children may shrink; long
   unbroken strings (echoed input, big currency figures) may break. */
.bill-step[data-step],
.hero-credibility span,
.bill-head > span,
.result-hero-value,
.result-fact,
.compare-bar-meta .c-label,
.compare-bar-meta .c-value,
.step-body,
.consent-row span,
.stat-card,
.choice-card,
.placeholder-card,
.testi-card,
.footer-grid p { min-width: 0; }

.form-msg,
.result-hero-value,
.compare-bar-meta .c-label,
.compare-bar-meta .c-value,
.compare-note,
.placeholder-card .d,
.testi-card .quote,
.testi-card .who,
.footer-grid p { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Layout helpers + shared type
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--edge);
}

/* Kicker: orange bar + uppercase tracked label above every section heading */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 24px;
  height: 3px;
  background: var(--orange-deep);
}
.hero .eyebrow,
.section--dark .eyebrow { color: var(--orange); }
.hero .eyebrow::before,
.section--dark .eyebrow::before { background: var(--orange); }

.section { padding-block: var(--section-y); }
.section--dark { background: var(--char); color: var(--white); }
.section--paper-dim { background: var(--grey); }

.section-head {
  max-width: 44rem;
  margin-bottom: 40px;
}
.section-head h2 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  line-height: 1.08;
  text-transform: uppercase;
  max-width: 22ch;
}
.section-head p {
  margin-top: 16px;
  font-size: 1.0625rem;
  max-width: 56ch;
  color: var(--mute);
}
.section--dark .section-head p { color: var(--mute-d); }

.google-rating {
  margin-top: 12px;
  font-weight: 600;
}

/* links: ink text, orange underline */
.unsure-link,
.prova-instagram a,
.consent-row a,
.legal a,
.legal-back {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--orange-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Buttons — wizard advance = charcoal; conversion (WhatsApp) = orange
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  border: 2px solid var(--char);
  border-radius: var(--r);
  padding: 14px 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.btn-primary {
  background: var(--char);
  color: var(--white);
}
.btn-primary:disabled {
  background: var(--grey);
  border: 2px dashed var(--rule);
  color: var(--mute);
  cursor: not-allowed;
}
.btn-whatsapp {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
}
.btn-whatsapp svg { flex-shrink: 0; }

/* Hover only for real pointers — a tap must not leave a button stuck in its
   hover color. Every :hover rule in the sheet lives in one of these blocks. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:not(:disabled):hover { background: var(--char-2); border-color: var(--char-2); }
  .btn-whatsapp:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
  .preset-chip:hover,
  .choice-card:hover { border-color: var(--char); }
  .preset-chip.is-selected:hover,
  .choice-card.is-selected:hover { border-color: var(--orange); }
  .unsure-link:hover,
  .prova-instagram a:hover,
  .legal-back:hover { text-decoration-color: var(--ink); }
  .bill-back:hover { color: var(--ink); text-decoration-color: var(--orange-deep); }
  .modal-close:hover { background: var(--char-2); border-color: var(--char-2); }
  a.doc-tag:hover { background: var(--orange); color: var(--ink); }
  .faq-item summary:hover::after { background: var(--char-2); }
  .site-footer a:hover { text-decoration-color: var(--white); }
}

/* --------------------------------------------------------------------------
   Demo banner — only on the sample/template deploy
   -------------------------------------------------------------------------- */
.demo-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--black);
  color: #c9cad0;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
  padding: 7px var(--edge);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--char);
  color: var(--white);
  border-bottom: 1px solid var(--char-line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding-block: 10px;
}
.brand {
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.brand small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mute-d);
}
.brand small::first-letter { text-transform: uppercase; }
/* Cliente com logo real (empresa.logoUrl) troca o nome em texto por imagem —
   ver applyBrandLogo() em main.js. Logo precisa funcionar sobre fundo escuro. */
.brand-logo { display: block; height: 36px; width: auto; }
.doc-tag {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
a.doc-tag {
  position: relative;
  border: 2px solid var(--orange);
  border-radius: 2px;
  padding: 9px 14px;
  color: var(--white);
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease;
}
/* Invisible tap area 4px above and below the border (the inset counts from
   inside the 2px border): the box is 37-41px tall, the target 45-49px, and
   the header keeps its height. */
a.doc-tag::after { content: ""; position: absolute; inset: -6px -2px; }
span.doc-tag { color: var(--mute-d); }

@media (max-width: 479px) {
  .brand { font-size: 0.875rem; }
  a.doc-tag { font-size: 0.6875rem; letter-spacing: 0.06em; padding: 8px 10px; }
  .btn { font-size: 0.8125rem; letter-spacing: 0.04em; padding-inline: 12px; }
  .result-extra-cta .btn { font-size: 0.75rem; letter-spacing: 0.02em; }
}

/* --------------------------------------------------------------------------
   Hero — charcoal panel, photo slot (or module grid) behind the simulator
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--char);
  color: var(--white);
  padding-block: 24px 48px;
}
/* Photo slot fallback: a solar-module grid edged in orange. With
   client.json fotos.hero set, main.js adds .has-photo + --hero-foto. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 47%;
  background-image:
    linear-gradient(var(--char-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--char-line) 1px, transparent 1px);
  background-size: 46px 76px;
  background-position: -1px -1px;
  border-left: 3px solid var(--orange);
  opacity: 0.9;
  pointer-events: none;
}
.hero.has-photo {
  background:
    linear-gradient(rgba(28, 28, 32, 0.82), rgba(28, 28, 32, 0.82)),
    var(--hero-foto) center / cover no-repeat,
    var(--char);
}
.hero.has-photo::after { display: none; }

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.hero-copy { display: grid; gap: 16px; align-content: start; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.625rem, 6.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  max-width: 20ch;
}
.hero-sub {
  font-size: 1.0625rem;
  max-width: 44ch;
  color: var(--mute-d);
}
.hero-credibility {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 8px 28px;
  max-width: 34rem;
  padding-top: 18px;
  border-top: 1px solid var(--char-line);
}
.hero-credibility span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute-d);
}
.hero-credibility strong {
  display: block;
  margin-bottom: 6px;
  font-weight: 800;
  font-size: clamp(1.625rem, 6.5vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
/* the region is text, not a number — keep it from towering over the others */
.hero-credibility span:last-child strong { font-size: clamp(1.125rem, 4.5vw, 1.5rem); line-height: 1.15; padding-top: 0.35em; }
.hero-jump {
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration-color: var(--orange);
}
.hero-stage { position: relative; }

/* Mobile: kicker, headline, then the simulator — the R$ input and the first
   button must be visible at 375×812 without scrolling. */
@media (max-width: 899px) {
  .hero-copy { display: contents; }
  .hero .eyebrow { order: 0; }
  .hero h1 { order: 1; }
  .hero-stage { order: 2; }
  .hero-sub { order: 3; margin-top: 8px; }
  .hero-credibility { order: 4; }
  .hero-jump { order: 5; }
  .hero::after {
    width: 100%;
    top: auto;
    height: 62%;
    border-left: 0;
    border-top: 3px solid var(--orange);
    opacity: 0.4;
  }
}

/* --------------------------------------------------------------------------
   Bill card — the simulator
   -------------------------------------------------------------------------- */
.bill-card {
  position: relative;
  z-index: 1;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r);
  border-top: 4px solid var(--orange);
  padding: 20px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}
.bill-card-tear { display: none; }

.bill-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.bill-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bill-head .bill-step {
  font-size: 0.875rem;
  color: var(--mute);
  white-space: nowrap;
}

.bill-step[data-step] { margin: 0; padding: 0; border: 0; min-inline-size: 0; }

/* Crossfade between steps and into the result — see goToStep() in main.js.
   Shared with #financiamento, which fades in the same way once it has data. */
.bill-step[data-step],
#financiamento { transition: opacity 0.2s ease, transform 0.2s ease; }
.is-leaving { opacity: 0; transform: translateY(-6px); }
.is-entering { opacity: 0; transform: translateY(6px); }

.bill-question {
  margin-top: 8px;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
}

.money-field {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--grey);
  border: 2px solid transparent;
  border-radius: var(--r);
  padding: 0 16px;
  transition: border-color 0.12s ease;
}
.money-field:focus-within { border-color: var(--char); }
.money-field .cifrao {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--mute);
}
.money-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  /* The vertical padding lives on the input, not the grey well, so the
     whole well height is the tap target. */
  padding-block: 8px;
}
.money-field input::placeholder { color: #a3a6ad; }
.money-field input:focus { outline: none; }

.preset-chips {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
.preset-chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  border: 2px solid var(--rule);
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r);
  padding: 8px 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.preset-chip.is-selected { border-color: var(--orange); background: var(--orange); }

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  border: 2px solid var(--rule);
  background: var(--white);
  border-radius: var(--r);
  padding: 12px 6px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.choice-card .ico {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1;
}
.choice-card .lbl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Last resort on the narrowest phones (320px): break "MONOFÁSICA" inside
     the card instead of spilling past its border. No effect when it fits. */
  hyphens: auto;
  overflow-wrap: anywhere;
}
.choice-card.is-selected { border-color: var(--orange); background: var(--orange); }

@keyframes choice-confirm {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.choice-card.is-confirming { animation: choice-confirm 0.28s ease; }

.unsure-link {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 0;
  background: none;
  border: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}

.bill-actions {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bill-back {
  background: none;
  border: 0;
  min-height: 44px;
  padding: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.bill-result > .bill-back { display: block; margin: 12px auto 0; }

.bill-progress {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}
.bill-progress i {
  flex: 1;
  height: 4px;
  background: var(--rule);
}
.bill-progress i.is-done { background: var(--orange); }

/* Small phones: on an iPhone SE, Safari shows ~553px of page, and
   "Ver minha economia" must be in it on load. Tighter header, hero gaps and
   card spacing, plus a 16px card question that fits one line at 375px, win
   ~85px; the h1 size and the 44px tap minimum stay. Kept after the card
   rules on purpose, so it wins the cascade. */
@media (max-width: 479px) {
  .site-header .container { min-height: 52px; padding-block: 8px; }
  .brand-logo { height: 32px; }
  .hero { padding-top: 16px; }
  .hero .container { gap: 14px; }
  .bill-card { padding: 16px; }
  .bill-question { margin-top: 6px; font-size: 1rem; }
  .money-field { margin-top: 10px; }
  .money-field input { padding-block: 4px; font-size: 2rem; }
  .preset-chips { margin-top: 8px; }
  .preset-chip { min-height: 44px; }
  .bill-actions { margin-top: 10px; }
  .bill-progress { margin-top: 12px; }
  /* "MONOFÁSICA" is 95px at 12px/0.06em; a card on a 360px phone has ~77px.
     11px (the floor for tracked labels) at 0.02em is 82px, and narrower
     card padding and gaps give it 87px at 360 and 92px at 375. */
  .choice-grid { gap: 6px; }
  .choice-card { padding-inline: 2px; }
  .choice-card .lbl { font-size: 0.6875rem; letter-spacing: 0.02em; }
}

/* "DOURADOS E REGIÃO" doesn't fit a third of the row on phones (below
   ~600px, where "DOURADOS" ran 16-34px into the side gutter and was clipped
   at 320) nor in the narrow copy column of small desktops (900-1099px). There
   the two numbers share the first row and the region gets its own row. */
@media (max-width: 599px), (min-width: 900px) and (max-width: 1099px) {
  .hero-credibility { grid-template-columns: repeat(2, auto); row-gap: 16px; }
  .hero-credibility span:last-child { grid-column: 1 / -1; }
  .hero-credibility span:last-child strong { padding-top: 0; }
}

/* Calculando — short interstitial between step 3 and the result */
.bill-calculating .bill-question { margin-top: 28px; }
.calc-progress {
  margin-top: 18px;
  height: 8px;
  background: var(--grey);
  overflow: hidden;
}
.calc-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--orange);
  transition: width var(--calc-duration, 750ms) linear;
}
.calc-progress-fill.is-filling { width: 100%; }

/* --------------------------------------------------------------------------
   Result — economia dominates, on charcoal, in orange
   -------------------------------------------------------------------------- */
.result-hero {
  margin-top: 12px;
  padding: 16px 18px 18px;
  background: var(--char);
  color: var(--white);
  border-radius: var(--r);
}
.result-hero-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-d);
}
.result-hero-value {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 6.5vw, 2.125rem);
  line-height: 1.1;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.nowrap { white-space: nowrap; }

.result-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}
@media (min-width: 420px) {
  .result-facts { grid-template-columns: repeat(4, 1fr); }
}
.result-fact {
  padding: 10px 10px 8px;
  background: var(--grey);
  border-radius: var(--r);
}
.result-fact .rf-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.result-fact .rf-label {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Economia acumulada — three bars (year 1/3/5) */
.economia-chart { margin-top: 16px; }
.chart-title {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.chart-bars {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.chart-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.cb-value {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cb-track {
  position: relative;
  height: 72px;
  background: var(--grey);
  overflow: hidden;
}
.cb-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: var(--char);
  transition: height 0.6s ease;
}
.chart-bar:last-child .cb-fill { background: var(--orange); }
.cb-label {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

.result-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-weight: 600;
  font-size: 0.9375rem;
}
.result-badge::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231c1c20' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.bill-disclaimer {
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mute);
}
.bill-disclaimer:empty { display: none; }
#resultadoPiso .bill-disclaimer:first-child {
  margin-top: 14px;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
}
#resultadoPiso .btn { margin-top: 18px; }

/* --------------------------------------------------------------------------
   Lead form
   -------------------------------------------------------------------------- */
.lead-form {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 2px solid var(--char);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lead-form > .bill-question { margin-top: 0; font-size: 1.0625rem; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.field input {
  width: 100%;
  min-height: 52px;
  border: 2px solid transparent;
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: 1rem;
  background: var(--grey);
  color: var(--ink);
}
.field input::placeholder { color: #8a8d95; }
.field input:focus { border-color: var(--char); outline: none; }
.consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--mute);
}
.consent-row input {
  margin-top: 1px;
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--orange-deep);
}
.consent-row a { font-weight: 600; }
.form-msg {
  display: none;
  font-size: 0.9375rem;
  padding: 10px 14px;
  border-radius: var(--r);
  background: var(--grey);
  border-left: 4px solid var(--char);
}
.form-msg.is-visible { display: block; }
.form-msg.is-error { background: #fdecea; border-left-color: #b42318; color: #7a1a12; }
.form-msg.is-ok { border-left-color: var(--orange); }
.lead-form .btn-whatsapp { margin-top: 4px; }

/* Instagram principal — supporting CTA under the WhatsApp form */
.result-extra-cta {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.result-extra-cta .btn-primary { background: var(--white); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .result-extra-cta .btn-primary:hover { background: var(--char); color: var(--white); border-color: var(--char); }
}

/* --------------------------------------------------------------------------
   Floating WhatsApp/Instagram — secondary, hidden over #resultExtraCta/#faq
   -------------------------------------------------------------------------- */
.float-btn {
  position: fixed;
  right: var(--edge);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.14s ease;
  pointer-events: none;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
}
.float-btn.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.float-whatsapp {
  bottom: calc(16px + env(safe-area-inset-bottom));
  background: var(--orange);
  color: var(--ink);
}
.float-instagram {
  bottom: calc(16px + 54px + 12px + env(safe-area-inset-bottom));
  background: var(--char);
  color: var(--white);
  /* Over the dark bands (how-it-works, footer) the circle is the same colour
     as the page; the inset ring keeps its edge visible (>= 3:1). */
  box-shadow: inset 0 0 0 2px var(--mute-d), 0 8px 20px -8px rgba(0, 0, 0, 0.5);
}
@media (hover: hover) and (pointer: fine) {
  .float-whatsapp:hover { background: var(--orange-hover); }
  .float-instagram:hover { background: var(--char-2); }
}
@media (prefers-reduced-motion: reduce) {
  .float-btn { transition: none; }
}

/* --------------------------------------------------------------------------
   Prova social
   -------------------------------------------------------------------------- */
.stat-row {
  display: grid;
  /* Columns follow the visible cards: a stat with no confirmed number is
     hidden (data-hide-empty), and the rest share the row without a hole. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 10px;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
}
.stat-card .n {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 9vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--orange-deep);
  font-variant-numeric: tabular-nums;
}
.stat-card .l {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.stat-row-note {
  margin-bottom: 48px;
  font-size: 0.8125rem;
  color: var(--mute);
}
.stat-row-note code { font-family: inherit; font-weight: 600; color: var(--ink); }

.gallery-grid, .testi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .testi-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

/* Installation without a photo: a place, marked with a pin */
.placeholder-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
  align-items: center;
  align-content: center;
  background: var(--grey);
  border-radius: var(--r);
  padding: 14px 16px;
}
.placeholder-card::before {
  content: "";
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  background: var(--char) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z' fill='%23f58634'/%3E%3Ccircle cx='12' cy='10' r='2.3' fill='%232b2b30'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.placeholder-card .t {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.placeholder-card .d { display: block; font-size: 0.875rem; color: var(--mute); }

/* Installation with a real photo (instalacoes[].foto in client.json) */
.obra-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--char);
}
.obra-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.obra-card figcaption {
  padding: 12px 16px 14px;
  color: var(--white);
}
.obra-card .t {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.obra-card .d { display: block; font-size: 0.875rem; color: var(--mute-d); }

#depoimentos { margin-top: 56px !important; }
.testi-card {
  padding-top: 20px;
  border-top: 3px solid var(--orange);
}
.testi-card + .testi-card { margin-top: 24px; }
@media (min-width: 900px) { .testi-card + .testi-card { margin-top: 0; } }
.testi-card.has-photo { display: flex; gap: 14px; align-items: flex-start; }
.testi-photo {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.testi-body { min-width: 0; }
.testi-card .quote { font-size: 1.125rem; line-height: 1.5; white-space: pre-line; } /* keep line breaks typed in the admin */
.testi-card .who {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

.prova-instagram { margin-top: 48px; }
.prova-instagram a { font-weight: 600; }

/* --------------------------------------------------------------------------
   Como funciona — a real sequence, so it earns big numbers
   -------------------------------------------------------------------------- */
.steps-list {
  display: grid;
  gap: 32px;
}
@media (min-width: 900px) {
  .steps-list { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .step-item { padding-inline: 28px; border-left: 1px solid var(--char-line); }
  .step-item:first-child { padding-left: 0; border-left: 0; }
}
.step-item { display: flex; flex-direction: column; gap: 14px; }
.step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.step-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}
.step-body p { margin-top: 8px; font-size: 1rem; color: var(--mute-d); }

/* --------------------------------------------------------------------------
   Financiamento
   -------------------------------------------------------------------------- */
.compare-card {
  max-width: 44rem;
  background: var(--white);
  border-radius: var(--r);
  border-top: 4px solid var(--orange);
  padding: 24px;
}
.compare-bars { display: flex; flex-direction: column; gap: 22px; }
.compare-bar-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
}
.compare-bar-meta .c-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.compare-bar-meta .c-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.compare-bar-row.old .c-value { text-decoration: line-through; text-decoration-color: var(--mute); text-decoration-thickness: 2px; color: var(--mute); }
.compare-bar-row.new .c-value { font-size: 2.25rem; color: var(--orange-deep); }
.compare-bar-track {
  margin-top: 10px;
  height: 12px;
  background: var(--grey);
  overflow: hidden;
}
.compare-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  transition: width 0.6s ease;
}
.compare-bar-row.old .compare-bar-fill { background: #a3a6ad; }
.compare-bar-row.new .compare-bar-fill { background: var(--orange); }
.compare-note { margin-top: 18px; font-size: 0.8125rem; line-height: 1.5; color: var(--mute); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  #faq .container {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    column-gap: 64px;
    align-items: start;
  }
  #faq .section-head { grid-row: 1 / 99; position: sticky; top: 64px; }
}
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item:first-of-type { border-top: 2px solid var(--ink); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 14px 0;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  background: var(--char);
  color: var(--orange);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1;
  transition: background 0.12s ease, color 0.12s ease;
}
.faq-item[open] summary::after { content: "\2212"; background: var(--orange); color: var(--ink); }
.faq-item p { padding: 0 48px 22px 0; font-size: 1rem; line-height: 1.6; color: var(--mute); max-width: 60ch; }

/* --------------------------------------------------------------------------
   Footer — the company's credentials
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--black);
  color: var(--white);
  padding-block: 56px 120px;
  font-size: 0.9375rem;
  line-height: 1.5;
}
/* Privacy pages have no floating buttons to clear */
.legal + .site-footer { padding-bottom: 56px; }
.site-footer .footer-grid { display: grid; gap: 18px; }
@media (min-width: 768px) {
  .site-footer .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 32px; }
  .site-footer .footer-grid > :first-child { grid-column: 1 / -1; }
}
.site-footer .footer-grid > :first-child {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--char-line);
}
.site-footer .footer-grid > :first-child strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.f-label {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-d);
}
.site-footer a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
/* Footer and "Veja mais instalações" links are single text lines (~19px):
   padding grows the tap area to ~45px and the equal negative margin keeps
   the text exactly where it was. */
.site-footer a,
.prova-instagram a {
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
}
/* 16px icon in a 44px tap square; the margins cancel the extra box so the
   line height doesn't change and the icon still sits ~12px after the name. */
.site-footer .footer-instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -14px -14px -14px -2px;
  padding-block: 0;
  vertical-align: middle;
  text-decoration: none !important;
  color: var(--orange) !important;
}

/* --------------------------------------------------------------------------
   Reveal — kept as a hook for main.js, static by design (no scroll motion)
   -------------------------------------------------------------------------- */
.reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   "Não sei" modal
   -------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(28, 28, 32, 0.72);
}
.modal-backdrop.is-open { display: flex; }
.modal-sheet {
  width: 100%;
  max-width: 34rem;
  background: var(--white);
  border-top: 4px solid var(--orange);
  border-radius: var(--r) var(--r) 0 0;
  padding: 24px var(--edge) calc(24px + env(safe-area-inset-bottom));
}
@media (min-width: 768px) {
  .modal-backdrop { align-items: center; }
  .modal-sheet { border-radius: var(--r); padding: 32px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6); }
}
.modal-sheet h3 {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
  text-transform: uppercase;
}
.modal-sheet p { margin-bottom: 20px; font-size: 1rem; line-height: 1.55; color: var(--mute); }
.modal-sheet p strong { color: var(--ink); }
.modal-close {
  width: 100%;
  min-height: 52px;
  border: 2px solid var(--char);
  background: var(--char);
  color: var(--white);
  border-radius: var(--r);
  padding: 12px 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   privacidade*.html — charcoal title band (same panel grid as the hero),
   then the policy on white
   -------------------------------------------------------------------------- */
.legal-head {
  position: relative;
  overflow: hidden;
  background: var(--char);
  color: var(--white);
  padding-block: 40px 48px;
}
.legal-head::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 30%;
  background-image:
    linear-gradient(var(--char-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--char-line) 1px, transparent 1px);
  background-size: 46px 76px;
  background-position: -1px -1px;
  border-left: 3px solid var(--orange);
  pointer-events: none;
}
@media (max-width: 899px) { .legal-head::after { display: none; } }
.legal-head .container { position: relative; z-index: 1; }
.legal-back {
  display: inline-block;
  /* ~45px tap target; the negative margins keep the layout where it was. */
  padding-block: 13px;
  margin-block: -13px 11px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.legal-head .legal-back { color: var(--white); text-decoration-color: var(--orange); }
.legal-head :focus-visible { outline-color: var(--orange); }
.legal h1 {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 6.5vw, 2.75rem);
  line-height: 1.08;
  text-transform: uppercase;
  max-width: 20ch;
}
.legal-lead {
  font-size: 1.1875rem;
  line-height: 1.5;
  max-width: 50ch;
  color: var(--mute-d);
}
/* 404: the one action on the page, back to the simulator. ".legal" in the
   selector so it beats the ".legal a" link underline. The page is short, so
   the message gets room and anything below the footer is footer-coloured
   instead of a white band. */
.legal .legal-cta { width: auto; margin-top: 28px; text-decoration: none; }
.pagina-404 { background: var(--black); }
.pagina-404 .legal-head { min-height: 50vh; }
.legal-body { padding-block: 40px 96px; max-width: 44rem; }
.legal h2 {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.legal-body > h2:first-child { margin-top: 0; border-top: 2px solid var(--ink); }
.legal-body p { margin-bottom: 1em; line-height: 1.65; max-width: 65ch; }
/* Desktop: question left, answer right */
@media (min-width: 900px) {
  .legal-head { padding-block: 56px 64px; }
  .legal-body {
    max-width: var(--maxw);
    display: grid;
    grid-template-columns: 17rem minmax(0, 44rem);
    column-gap: 48px;
    padding-top: 64px;
  }
  .legal h2 { grid-column: 1; margin: 0; padding-block: 24px; }
  .legal h2 ~ p { grid-column: 2; margin: 0 0 1em; }
  .legal h2 + p { padding-top: 24px; border-top: 1px solid var(--rule); }
  .legal-body > h2:first-child + p { border-top: 2px solid var(--ink); }
}
/* the header label repeats the page title right below — drop it where space is tight */
@media (max-width: 479px) { span.doc-tag { display: none; } }

/* --------------------------------------------------------------------------
   Wider viewports
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .bill-actions { flex-direction: row-reverse; align-items: center; gap: 12px; }
  .bill-actions .btn { width: auto; flex: 1; }
  .bill-actions .bill-back { flex: none; }
}
@media (min-width: 900px) {
  .hero { padding-block: 88px 96px; }
  .hero .container {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 72px;
    /* Top-aligned: once the result makes the card ~1000px tall, centring
       left the headline floating mid-card with an empty band above it. */
    align-items: start;
  }
  .bill-card { padding: 32px; }
}