:root {
  --ink: #1b1e23;
  --ink-2: #2a2e36;
  --accent: #c9a227;
  --gold-hi: #e6c463;
  --paper: #ffffff;
  --muted: #6b7280;
  --wa: #128c7e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body.canal-lp { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper); line-height: 1.55; }
img { max-width: 100%; display: block; }
.container { width: min(1100px, 92%); margin: 0 auto; }
.btn { display: inline-block; padding: 14px 26px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-ghost { border: 2px solid #fff; color: #fff; }
.hero { background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%); color: #fff; padding: 72px 0 56px; }
.hero-brand { display: flex; align-items: center; gap: 12px; }
.hero-brand-text { letter-spacing: .18em; font-size: 15px; color: var(--gold-hi); font-weight: 700; display: grid; line-height: 1.3; }
.hero-brand-text small { letter-spacing: .3em; font-size: 10px; color: var(--accent); font-weight: 600; text-transform: uppercase; }
.hero h1 { font-size: clamp(28px, 5vw, 46px); line-height: 1.15; margin: 14px 0; }
.hero-sub { font-size: clamp(16px, 2.4vw, 19px); color: #d3d6db; max-width: 640px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.wa-float { position: fixed; right: 16px; bottom: 16px; background: var(--wa); color: #fff; padding: 14px 20px; border-radius: 999px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,.25); z-index: 50; }
section { padding: 56px 0; }
section h2 { font-size: clamp(24px, 4vw, 34px); margin-bottom: 24px; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
@media (min-width: 900px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.service-card img { aspect-ratio: 4/3; object-fit: cover; }
.service-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.service-body .btn { margin-top: auto; text-align: center; }
.safety-sub { color: var(--muted); max-width: 760px; margin-top: -12px; }
.safety-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 22px; }
/* height:auto é obrigatório: o atributo height="600" do <img> vira hint de apresentação e anula o aspect-ratio */
.safety-grid img { aspect-ratio: 4/3; height: auto; object-fit: cover; border-radius: 8px; }
.works { background: #f6f7f9; }
.works-sub { color: var(--muted); margin-top: -14px; margin-bottom: 22px; }
.works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.works-grid img { aspect-ratio: 4/3; height: auto; object-fit: cover; border-radius: 8px; }
.works-ig { margin-top: 24px; text-align: center; }
.btn-ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: #fff; }
.why-list { list-style: none; display: grid; gap: 14px; max-width: 720px; }
.steps { background: var(--ink); color: #fff; }
.steps-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.step-num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--accent); color: var(--ink); font-weight: 800; margin-bottom: 8px; }
.contact { background: #f6f7f9; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; align-items: start; }
#lead-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; background: #fff; padding: 22px; border-radius: 10px; border: 1px solid #e5e7eb; }
#lead-form label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; font-weight: 600; font-size: 14px; }
#lead-form input, #lead-form select, #lead-form textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: 11px; border: 1px solid #d1d5db; border-radius: 7px; font: inherit; }
#lead-form .hp { position: absolute; left: -9999px; }
.btn-submit { background: var(--ink); color: #fff; border: 0; cursor: pointer; font: inherit; }
.form-status { font-size: 14px; min-height: 1.2em; }
.footer { background: var(--ink); color: #d3d6db; padding: 28px 0; font-size: 14px; }
.footer a { color: var(--gold-hi); }

.hero { background-image: linear-gradient(160deg, rgba(27,30,35,.86) 0%, rgba(42,46,54,.72) 100%), url('../img/hero.webp'); background-size: cover; background-position: center 65%; }
@media (max-width: 700px) { .footer { padding-bottom: 88px; } }