:root {
  --navy: #1c2740;
  --ink: #161c28;
  --muted: #4a5260;
  --blue: #2f5499;
  --sky: #a9c1ee;
  --zinc: #eef0f2;
  --ring: var(--blue);
  --radius: 4px;
  --font: "Schibsted Grotesk", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; font: 400 1.0625rem/1.6 var(--font); color: var(--ink); background: #fff; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }

h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 4.9rem); line-height: 1; }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); max-width: 22ch; }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
p { margin: 0; }

.wrap { width: min(100% - 2.5rem, 1200px); margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: #fff; padding: .5rem 1rem; }

.lead { max-width: 58ch; margin-top: 1.25rem; color: var(--muted); }
.dark { background: var(--navy); color: #fff; --ring: var(--sky); }
.dark .lead { color: #c3ccdb; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0 1.75rem; border: 1px solid transparent;
  border-radius: var(--radius); font: 700 1rem var(--font); cursor: pointer;
  transition: background-color .15s;
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: #264682; }
.dark .btn--primary { background: #fff; color: var(--navy); }
.dark .btn--primary:hover { background: var(--zinc); }
.btn--ghost { border-color: rgba(255, 255, 255, .4); color: #fff; min-height: 2.75rem; padding: 0 1.25rem; }
.btn--ghost:hover { background: rgba(255, 255, 255, .1); }
.hero .actions .btn--ghost { min-height: 3.25rem; padding: 0 1.75rem; }

/* Topo e hero */
.hero { position: relative; padding-bottom: 3rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.5rem; }
.nav { display: flex; gap: 2rem; font-weight: 500; color: #c3ccdb; }
.nav a:hover { color: #fff; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: 3rem 4rem;
}
.hero__kicker { margin-bottom: 1.25rem; color: var(--sky); font-weight: 500; }
.hero .lead { font-size: 1.25rem; margin-top: 1.5rem; }
.actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.25rem; }
.facts {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 3rem 0 0; padding: 1.5rem 0 0;
  list-style: none; border-top: 1px solid rgba(255, 255, 255, .18); color: #c3ccdb;
}
.hero__photo { width: 100%; aspect-ratio: 1080 / 820; object-fit: cover; }
/* A borda inferior imita o perfil trapezoidal de uma telha metálica */
.hero::after {
  content: ""; position: absolute; inset: auto 0 -1px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14'%3E%3Cpath d='M0 14L14 0h28l14 14z' fill='%23eef0f2'/%3E%3C/svg%3E") repeat-x bottom / 56px 14px;
}

/* Seções */
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section--zinc { background: var(--zinc); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 2.5rem 1.5rem; margin-top: 3.5rem; }
.cards img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.cards h3 { margin-top: 1.25rem; font-size: 1.5rem; }
.cards p { margin-top: .5rem; max-width: 52ch; color: var(--muted); }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split > img { width: 100%; object-fit: cover; }

.points { margin-top: 2.5rem; border-top: 1px solid #d3d8de; }
.points > div { padding-block: 1.25rem; border-bottom: 1px solid #d3d8de; }
.points p { margin-top: .25rem; color: var(--muted); }

/* Comparador antes/depois */
.compare { position: relative; margin: 3rem 0 0; max-width: 1000px; aspect-ratio: 900 / 350; overflow: hidden; background: var(--navy); user-select: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare::after { content: ""; position: absolute; inset: 0 auto 0 var(--pos); width: 3px; margin-left: -1.5px; background: #fff; }
.compare__handle {
  position: absolute; z-index: 1; top: 50%; left: var(--pos); width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem;
  display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--navy); box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
.compare__tag { position: absolute; z-index: 1; bottom: 1rem; padding: .4rem .9rem; font-weight: 700; color: #fff; background: var(--navy); border-radius: var(--radius); }
.compare__tag--before { left: 1rem; }
.compare__tag--after { right: 1rem; background: var(--blue); }
.compare__range { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:focus-within { outline: 3px solid var(--ring); outline-offset: 3px; }
.compare figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Processo: sequência real, por isso numerada */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin: 3.5rem 0 0; padding: 0; list-style: none; counter-reset: etapa; }
.steps li { counter-increment: etapa; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .25); }
.steps li::before { content: counter(etapa); display: block; margin-bottom: .75rem; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--sky); }
.steps p { margin-top: .5rem; color: #c3ccdb; }

/* Loja */
address { margin: 1.75rem 0 2rem; padding-left: 1.25rem; border-left: 3px solid var(--blue); font-style: normal; font-weight: 500; }

/* Contato */
.contact {
  background: linear-gradient(rgba(28, 39, 64, .88), rgba(28, 39, 64, .88)), url("../img/contato-fundo.webp") center / cover;
}
.phone { display: inline-block; margin-top: 2rem; padding-bottom: .25rem; border-bottom: 2px solid var(--sky); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; }

.form { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius); background: #fff; color: var(--ink); --ring: var(--blue); }
.form label { display: grid; gap: .4rem; font-size: .9375rem; font-weight: 700; }
.opt { font-weight: 400; color: var(--muted); }
.form input, .form select, .form textarea {
  width: 100%; min-height: 3rem; padding: .75rem 1rem; border: 1px solid #8a94a3; border-radius: var(--radius);
  font: 400 1rem var(--font); color: var(--ink); background: #fff;
}
.form textarea { resize: vertical; }
.form__note { font-size: .875rem; color: var(--muted); }

/* Rodapé */
.footer { padding-block: 3.5rem 2rem; background: #111a2e; color: #c3ccdb; font-size: .9375rem; line-height: 1.9; }
.footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; }
.footer p { max-width: 30ch; margin-top: 1rem; line-height: 1.6; }
.footer h2 { margin-bottom: .5rem; font-size: 1rem; letter-spacing: 0; color: #fff; }
.footer a:hover { color: #fff; }
.footer__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .8125rem; }

@media (max-width: 900px) {
  .nav { display: none; }
  .hero__grid { grid-template-columns: 1fr; }
}

/* Abertura fotográfica: conteúdo em primeiro plano. */
[hidden] { display: none !important; }
.hero { isolation:isolate; padding-bottom:0; overflow:hidden; }
.hero .hero__photo { position:absolute; inset:0; z-index:-2; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:center 43%; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(10,23,43,.94),rgba(10,23,43,.82) 40%,rgba(10,23,43,.32) 75%,rgba(10,23,43,.2)),linear-gradient(180deg,rgba(10,23,43,.35),transparent 40%,rgba(10,23,43,.4)); }
.hero .topbar { border-bottom:1px solid #ffffff38; position:relative; }
.hero__grid { display:block; min-height:600px; padding-block:4.5rem 3.5rem; }
.hero__grid > div { max-width:850px; }
.hero h1 { max-width:none; font-size:clamp(2.6rem,5.6vw,5rem); line-height:1.05; letter-spacing:-.035em; }
.hero h1 > span { display:block; }
.hero__kicker { color:#d8e7ff; max-width:43ch; }
.hero .lead { max-width:48ch; color:#e0e7f1; font-size:1.125rem; line-height:1.6; }
.hero .lead strong { display:block; max-width:40ch; font-weight:700; color:#fff; }
.hero .lead > span { display:block; margin-top:.5rem; }
.hero .facts { color:#e0e7f1; max-width:790px; margin-top:2.25rem; font-size:.9375rem; gap:.75rem 1.5rem; }
.hero::after { pointer-events:none; }
.menu-toggle { display:none; border:1px solid #ffffff66; background:transparent; color:white; min-height:44px; padding:.5rem .85rem; font:600 1rem var(--font); border-radius:4px; }
.menu-toggle span { margin-left:.5rem; }
.installation > img { width:100%; max-height:480px; object-fit:cover; }
.installation > div { margin-top:2.5rem; display:grid; grid-template-columns:1fr 1fr; column-gap:4rem; }
.installation h2 { grid-column:1; }
.installation .lead { grid-column:1; }
.installation .points { grid-column:2; grid-row:1 / span 2; margin-top:0; }
.steps li::before { font-size:1.25rem; font-weight:500; }
.contact__stack { max-width:860px; }
.contact__stack > div { max-width:680px; margin-bottom:2.5rem; }
.contact__stack h2 { max-width:21ch; }
.form .btn--primary { background:var(--blue); color:white; }
.form .btn--primary:hover { background:#264682; }
.field-error { color:#a51e29; font-weight:500; }
.field-error:empty { display:none; }
.form [aria-invalid="true"] { border-color:#a51e29; }
@media(max-width:900px) {
 .menu-toggle:not([hidden]) { display:inline-flex; align-items:center; }
 .topbar { flex-wrap:wrap; gap:.75rem; }
 .topbar > a:last-child { margin-left:auto; }
 .nav { display:flex; width:100%; order:4; flex-wrap:wrap; gap:.5rem; padding:.75rem 0; }
 .nav a { padding:.5rem .75rem; min-height:44px; }
 .nav[data-enhanced="true"] { display:none; }
 .nav[data-enhanced="true"][data-open="true"] { display:flex; }
 .installation > div { display:block; }
 .installation .points { margin-top:2rem; }
}
@media(max-width:600px) {
 .hero__grid { min-height:0; padding-block:2.5rem 3rem; }
 .hero .hero__photo { object-position:64% center; }
 .hero::before { background:linear-gradient(90deg,rgba(10,23,43,.92),rgba(10,23,43,.67)); }
 .hero .topbar { padding-block:1rem; }
 .hero .topbar > a:first-child img { width:65px; height:auto; }
 .hero .topbar > a:last-child { font-size:.8rem; padding-inline:.65rem; }
 .hero__kicker { font-size:.875rem; margin-bottom:1rem; }
 .hero h1 { font-size:clamp(1.85rem,8.5vw,2.8rem); line-height:1.12; letter-spacing:-.035em; }
 .hero .lead { font-size:1rem; margin-top:1.25rem; }
 .hero .actions { margin-top:1.5rem; gap:.65rem; }
 .hero .actions .btn { padding-inline:1rem; font-size:.9rem; }
 .hero .facts { margin-top:1.5rem; font-size:.875rem; gap:.5rem 1rem; }
 .menu-toggle { font-size:.875rem; padding-inline:.65rem; }
 .contact__stack .form { padding:1.5rem; }
}

/* Acabamento editorial: ritmo, alinhamento e quebras de linha naturais. */
#servicos h2 { max-width:27ch; }
.cards article { min-width:0; }
.cards h3 { line-height:1.2; }
.cards p { line-height:1.65; }
.installation > img { aspect-ratio:2.5 / 1; object-position:center; }
.installation > div { column-gap:clamp(2rem,5vw,4rem); }
.contact__stack .phone { margin-top:1.25rem; }
.form h3 { margin-bottom:.25rem; }
.form__note { line-height:1.5; }
.footer__legal { max-width:none !important; }
@media(max-width:600px) {
 .hero .facts { display:grid; grid-template-columns:1fr; gap:.45rem; padding-top:1rem; }
 .hero .actions { align-items:stretch; }
 .hero .actions .btn { width:100%; }
 .hero__grid { padding-bottom:2.5rem; }
 .installation > img { aspect-ratio:1.6 / 1; }
 .section { padding-block:3.5rem; }
 .cards { margin-top:2rem; gap:2.25rem; }
 h2 { font-size:clamp(1.8rem,7.8vw,2.25rem); line-height:1.12; }
}