/* Service pages (W-0134): /servicos/<slug> and /en/services/<slug>. Night top bar and hero, paper body, small footer (form.css). No script, no images: the H1 is the LCP element. */
body.page-service { padding-bottom: 0; }
/* W-0164 (review c36 C2): the header is the site header (app.css .site-head, is-inner); one container width site-wide (--content-max of app.css,
   the W-0146 64rem override is gone), so header, hero, body and footer start at the same x as on the home page. */
/* W-0164 (review c36 C3): the hero ground is the home hero's night sky (same gradients and warm glow), and the art is the isometric house of the
   home page with the part this page is about marked (art.mjs serviceScene), no flat icon on a cream tile. */
.sv-hero {
  position: relative; isolation: isolate; overflow: hidden; color: var(--color-paper); padding-block: var(--space-6) var(--space-12);
  background:
    radial-gradient(60% 55% at 78% 78%, rgb(255 110 60 / .3), rgb(255 150 70 / .08) 55%, transparent 75%),
    linear-gradient(180deg, #050c18 0%, #0a1b30 40%, #123550 78%, #1b3f5e 100%);
  background-color: var(--color-night);
}
.sv-hero-in { display: grid; gap: var(--space-6); align-items: center; }
.sv-art { margin: 0; justify-self: center; width: min(100%, 22rem); }
.sv-art svg { display: block; width: 100%; height: auto; }
.sv-art .band-iso { filter: drop-shadow(0 24px 40px rgb(3 10 20 / .55)); }
@media (min-width: 860px) {
  .sv-hero { padding-block: var(--space-12) var(--space-16); }
  /* W-0161 (review c35 B9): the art is a real counterweight to the text block on wide screens */
  .sv-hero-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-12); }
  .sv-art { width: 100%; max-width: 32rem; justify-self: end; }
}
.sv-inc h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); margin-bottom: var(--space-4); letter-spacing: -0.015em; }
.sv-inc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.sv-inc li { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--space-3); align-items: start; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-line); border-top: 4px solid var(--color-sun); border-radius: var(--radius-card); }
.sv-inc .badge { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--color-sun-soft); color: var(--color-ink); }
.sv-inc .badge .ico { width: 22px; height: 22px; }
.sv-inc h3 { font-size: 1.0625rem; margin: 2px 0 2px; }
.sv-inc p { margin: 0; color: var(--color-ink-muted); font-size: .9375rem; }
@media (min-width: 720px) { .sv-inc ul { grid-template-columns: repeat(3, 1fr); } .sv-inc li { display: block; } .sv-inc .badge { margin-bottom: var(--space-3); } }
.crumbs ol { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--fs-small); color: #cfe0ec; }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); opacity: .6; }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--color-sky-on-night); text-underline-offset: 3px; }
.sv-hero h1 { font-size: clamp(1.875rem, 1.25rem + 2.6vw, 3.25rem); margin-bottom: var(--space-4); text-wrap: balance; }
.sv-lead { max-width: 42rem; margin: 0 0 var(--space-6); font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.5; color: #e6eff6; }
.sv-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin: 0; }
.sv-note { font-size: var(--fs-small); color: #cfe0ec; }

.sv-body { max-width: var(--content-max); margin-inline: auto; padding: var(--space-8) var(--gutter) var(--space-16); } /* W-0146: same width as .wrap (was 52rem, hero 60rem) */
.sv-s { margin-top: var(--space-8); }
.sv-s h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); margin-bottom: var(--space-3); letter-spacing: -0.015em; }
.sv-s p, .sv-s li { max-width: 44rem; }
.sv-s ul { padding-left: 1.25rem; margin: 0 0 var(--space-4); }
.sv-s li { margin-bottom: var(--space-2); }
.sv-s a { text-underline-offset: 3px; }
.sv-s .fn { font-size: .72em; line-height: 0; margin-left: 2px; vertical-align: baseline; position: relative; top: -.45em; }
.sv-s .fn-ref { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; font-weight: 700; text-decoration: none; color: var(--color-ink); border-radius: 4px; }
.sv-s .fn-ref:hover, .sv-s .fn-ref:focus-visible { text-decoration: underline; background: var(--color-sun-soft); }
.sv-faq { padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.sv-q { margin-top: var(--space-4); }
.sv-q h3 { font-size: 1.125rem; margin-bottom: var(--space-1); }
.sv-q p { margin: 0; color: var(--color-ink-muted); }

/* W-0169 (review c37 F5): the closing "Pedir proposta" block is centred in the container (heading, line and button on the box's centre line, pt and en, 1440 and 390) */
.sv-box { margin-top: var(--space-12); padding: var(--space-8) var(--space-6); background: var(--color-night); color: var(--color-paper); border-radius: var(--radius-card); text-align: center; }
.sv-box h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); margin-bottom: var(--space-2); }
.sv-box p { margin: 0 auto var(--space-4); max-width: 40rem; color: #e6eff6; }
.sv-box p:last-child { margin-bottom: 0; }

.sv-rel { margin-top: var(--space-12); }
.sv-rel h2 { font-size: 1.25rem; margin-bottom: var(--space-3); }
.sv-rel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sv-rel a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 48px; padding: var(--space-2) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 14px; font-weight: 700; color: var(--color-ink); text-decoration: none; }
.sv-rel a:hover { border-color: var(--color-link); }
.sv-rel .go { color: var(--color-link); }
@media (min-width: 720px) { .sv-rel ul { grid-template-columns: repeat(3, 1fr); } }
/* W-0136: 4 related links on brand and city pages (2 services + 2 siblings): 2 columns; services keep 3 */
@media (min-width: 720px) { .sv-rel ul:has(> li:nth-child(4)) { grid-template-columns: repeat(2, 1fr); } }
.sv-model { padding-left: var(--space-4); border-left: 3px solid var(--color-sun, #FFB627); }
/* W-0136: brand row on S1/S2, city row on S4: compact pills */
.sv-tags { margin-top: var(--space-8); }
.sv-tags h2 { font-size: 1.125rem; margin-bottom: var(--space-3); }
.sv-tags ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sv-tags a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 999px; font-weight: 600; color: var(--color-ink); text-decoration: none; }
.sv-tags a:hover { border-color: var(--color-link); }
/* W-0149 (audit-c31 s3 Brand/City P1): hub blocks at the top of the body. Brand: "O que fazemos em inversores <marca>", 5 link cards (title + one line).
   City: "Serviços em <cidade>", the home service groups (Pôr a funcionar / Tirar mais partido do sol / Manter e acompanhar) as link lists. */
.sv-hub { margin-bottom: var(--space-8); }
.sv-hub h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); margin-bottom: var(--space-4); letter-spacing: -0.015em; }
.sv-hub ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sv-hub a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-3); min-height: 48px; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 14px; color: var(--color-ink); text-decoration: none; }
.sv-hub a:hover { border-color: var(--color-link); }
.sv-hub .go { color: var(--color-link); grid-column: 2; grid-row: 1 / span 2; }
.sv-hub-t { font-weight: 700; }
.sv-hub-d { grid-column: 1; font-size: .9375rem; color: var(--color-ink-muted); margin-top: 2px; }
@media (min-width: 720px) { .sv-hub-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sv-hub-list { grid-template-columns: repeat(3, 1fr); } }
.sv-hub-groups { display: grid; gap: var(--space-4); }
.sv-hub-g h3 { font-size: 1.0625rem; margin: 0 0 var(--space-2); }
.sv-hub-city a { font-weight: 700; }
@media (min-width: 860px) { .sv-hub-groups { grid-template-columns: repeat(3, 1fr); } }
/* W-0149 (audit-c31 s3 reparacao-inversor P1): "Reparar, substituir ou melhorar?" as a highlighted box */
.sv-callout { padding: var(--space-6); background: var(--color-sun-soft); border-left: 4px solid var(--color-sun); border-radius: var(--radius-card); }
.sv-callout p:last-child { margin-bottom: 0; }
.sv-callout a { color: var(--color-ink); font-weight: 700; }