/* ===== Tokens ===== */
:root {
  --navy: #082849;
  --navy-deep: #04233D;
  --turquoise: #00AAB8;
  --turquoise-dark: #007E8C;
  --turquoise-light: #5FD6E0;
  --aqua-soft: #EAF9FA;
  --surface: #FFFFFF;
  --surface-warm: #FAFAF8;
  --text: #102D4C;
  --text-muted: #4D5B72;
  --border: #DDE6ED;
  --whatsapp: #00873D;
  --whatsapp-hover: #006F33;

  --radius: 16px;
  --radius-btn: 10px;
  --shadow: 0 10px 30px rgba(8, 40, 73, 0.06);
  --gutter: 24px;
  --section-space: 60px;

  --font: Manrope, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--turquoise-dark);
  outline-offset: 4px;
  border-radius: 4px;
}

section[id], article[id] { scroll-margin-top: 16px; }

.container {
  width: 100%;
  max-width: calc(1200px + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section-title {
  font-size: clamp(27px, 2.2vw + 10px, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-align: center;
  text-wrap: balance;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ===== Botões ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--radius-btn);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .15s ease;
}

.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-whatsapp:hover { background: var(--whatsapp-hover); }

.btn-lg { min-height: 56px; padding: 14px 28px; font-size: 18px; }

.icon { width: 24px; height: 24px; flex: none; }
.btn-lg .icon { width: 28px; height: 28px; }

/* ===== Cabeçalho ===== */
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
}

.brand { display: block; flex: none; }
.brand img { width: 236px; height: auto; object-fit: contain; }

.main-nav { display: flex; gap: 8px; }

.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-btn);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
@media (hover: hover) {
  .main-nav a:hover { background: var(--aqua-soft); }
}

/* ===== Hero ===== */
.hero { background: var(--surface-warm); padding: 44px 0; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: 32px;
  align-items: center;
}

.badge {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--aqua-soft);
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.hero h1 {
  margin-top: 20px;
  font-size: clamp(34px, 3.6vw + 8px, 58px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--navy);
}

/* Quebras preferenciais do título só no desktop; abaixo disso o texto flui naturalmente */
@media (min-width: 1024px) {
  .h1-line { display: block; }
}

.hero-lead {
  margin-top: 24px;
  max-width: 30ch;
  font-size: clamp(19px, 0.6vw + 16px, 25px);
  line-height: 1.4;
  color: var(--text-muted);
}

.hero-cta { margin-top: 28px; }

.link-arrow {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--turquoise-dark);
  text-underline-offset: 4px;
}
.link-arrow svg { width: 20px; height: 20px; }
.link-arrow:hover { color: var(--navy); }

.hero-note { margin-top: 4px; font-size: 14px; color: var(--text-muted); }

.hero-media { margin: 0; }

.hero-photos {
  --hero-h: 440px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.photo {
  width: 100%;
  height: var(--hero-h);
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--border);
}
.hero-photos .photo-car { object-position: 45% 72%; }
.hero-photos .photo-house { object-position: 50% 55%; }

.hero-media figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-muted);
  text-align: right;
}

/* ===== Como funciona ===== */
.steps { background: var(--aqua-soft); padding: var(--section-space) 0; }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.step {
  min-height: 200px;
  padding: 28px;
  text-align: center;
}

.step-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--aqua-soft);
  color: var(--turquoise-dark);
}
.step-icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step h3, .plan h3 {
  font-size: clamp(22px, 0.5vw + 18px, 25px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--navy);
}

.step p { margin: 8px auto 0; max-width: 26ch; color: var(--text-muted); }

/* ===== Modalidades ===== */
.plans { padding: var(--section-space) 0; }

.plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}

.plan {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  min-height: 240px;
  overflow: hidden;
}

/* height: 0 + min-height: 100% impede que a altura natural da foto defina a altura do card */
.plan-photo {
  width: 100%;
  height: 0;
  min-height: 100%;
  object-fit: cover;
  background: var(--border);
}
.plan-photo.photo-car { object-position: 30% 74%; }
.plan-photo.photo-house { object-position: 50% 58%; }

.plan-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 26px;
}

.plan-body p { color: var(--text-muted); }
.plan-body .btn { margin-top: 8px; }

/* ===== Atendimento ===== */
.service { background: var(--navy-deep); color: #fff; padding: 36px 0; }

.service-inner {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  align-items: center;
}

.service-brand {
  padding: 24px;
  border-radius: 12px;
  background: var(--surface);
}
.service-brand img { width: 100%; height: auto; }

.service-content {
  margin-left: 48px;
  padding: 8px 0 8px 48px;
  border-left: 1px solid var(--turquoise);
}

.service h2 {
  font-size: clamp(26px, 1.2vw + 16px, 32px);
  font-weight: 800;
  line-height: 1.15;
}

.service-role {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 700;
  color: var(--turquoise-light);
}

.service-text { margin-top: 12px; }

.service-support { margin-top: 14px; font-size: 15px; color: #C9D6E3; }
.service-support a { color: #fff; text-underline-offset: 3px; }
.service-support a:hover { color: var(--turquoise-light); }
.service :focus-visible { outline-color: var(--turquoise-light); }

/* ===== CTA final e rodapé ===== */
.final-cta {
  background: var(--aqua-soft);
  padding: 64px 0 56px;
  text-align: center;
}
.final-cta .btn { margin-top: 28px; white-space: nowrap; }

.cta-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 10px;
  margin-top: 18px;
  font-size: 18px;
  color: var(--navy);
}
.cta-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-underline-offset: 4px;
}

.site-footer { background: var(--aqua-soft); }

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 32px;
  padding-top: 24px;
  padding-bottom: 32px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
}

/* Desktop estreito: mais espaço para o texto dos cards, para o botão caber em uma linha */
@media (min-width: 1024px) and (max-width: 1199px) {
  .plan { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
  .plan-body { padding: 24px 22px; }
  .plan-body .btn { padding: 12px 16px; }
}

/* ===== Tablet ===== */
@media (max-width: 1023px) {
  :root { --section-space: 52px; }

  .header-inner { gap: 16px; }
  .brand img { width: 210px; }
  .main-nav a { padding: 0 10px; font-size: 16px; white-space: nowrap; }

  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-lead { max-width: none; }
  .hero-photos { --hero-h: 340px; }

  .plans-grid { grid-template-columns: minmax(0, 1fr); }
  .service-content { margin-left: 32px; padding-left: 32px; }
}

/* Etapas empilham e o botão do cabeçalho vira só ícone quando o espaço aperta */
@media (max-width: 860px) {
  .header-cta { width: 48px; height: 48px; padding: 0; }
  .header-cta-label { display: none; }
  .steps-grid { grid-template-columns: 1fr; gap: 16px; }
  .step { min-height: 0; padding: 24px; }
}

/* ===== Celular ===== */
@media (max-width: 767px) {
  :root { --section-space: 40px; --gutter: 20px; }

  body { font-size: 17px; }

  .header-inner {
    flex-wrap: wrap;
    gap: 4px 12px;
    min-height: 0;
    padding-top: 12px;
    padding-bottom: 6px;
  }
  .brand img { width: 186px; }
  .main-nav {
    order: 3;
    width: 100%;
    justify-content: center;
    column-gap: clamp(4px, 4vw, 32px);
    border-top: 1px solid var(--border);
    padding-top: 4px;
  }
  .main-nav a { padding: 0 8px; }

  .hero { padding: 28px 0 36px; }
  .hero-cta { width: 100%; }
  .hero-photos { --hero-h: 240px; gap: 12px; }

  .service-inner { grid-template-columns: minmax(0, 1fr); }
  .service-brand { max-width: 340px; }
  .service-content {
    margin: 24px 0 0;
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(0, 170, 184, 0.5);
  }
  .service-role { font-size: 18px; }

  .final-cta { padding: 48px 0 40px; }
  .final-cta .btn { width: 100%; max-width: 420px; }
  .cta-meta { flex-direction: column; gap: 0; }
  .cta-meta > [aria-hidden="true"] { display: none; }

  .footer-inner { flex-direction: column; gap: 4px; }
}

/* Foto acima do texto até 599 px: abaixo disso, lado a lado, o botão do card quebra em duas linhas */
@media (max-width: 599px) {
  .plan { grid-template-columns: minmax(0, 1fr); }
  .plan-photo { height: 200px; min-height: 0; }
  .plan-body { padding: 22px; }
  .plan-body .btn { width: 100%; }
  .btn { padding: 12px 16px; }
}

@media (max-width: 359px) {
  .brand img { width: 168px; }
  .main-nav a { padding: 0 4px; font-size: 15px; }
  .hero-photos { --hero-h: 200px; }
  .btn-lg { gap: 8px; padding: 14px 12px; font-size: 16px; }
  .btn-lg .icon { width: 24px; height: 24px; }
}