/* =====================================================================
   pages.css — Estilos específicos de páginas
   Homepage N.Pronto (hero, frentes, diagnóstico, especialidades,
   processo, scope, CTA) + páginas interiores (page-hero, contacto, artigo).
   ===================================================================== */

/* =====================================================================
   HOMEPAGE — HERO
   ===================================================================== */
.home-hero {
  position: relative; overflow: hidden;
  background: var(--color-dark-2);
  color: #fff;
}
/* Imagem com bleed à direita */
.home-hero__bleed { position: relative; width: 100%; height: 280px; }
.home-hero__bleed img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

.home-hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: var(--space-lg);
  padding-block: var(--space-xl);
}
.home-hero__content { display: grid; gap: var(--space-md); align-content: start; justify-items: start; max-width: 560px; }
.home-hero__title { font-size: var(--fs-800); color: #fff; }
.home-hero__lead { font-size: var(--fs-400); color: var(--color-on-dark-muted); max-width: 48ch; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }

/* Cartão flutuante "Pedido em acompanhamento" */
.hero-card {
  position: relative; width: 100%; max-width: 380px;
  background: #fff; color: var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg);
  display: grid; gap: var(--space-md);
}
.hero-card__title { font-family: var(--font-heading); font-weight: var(--fw-bold); color: var(--color-heading); font-size: var(--fs-400); }
.hero-card__rows { display: grid; gap: var(--space-sm); }
.hero-card__row { display: grid; grid-template-columns: 22px 1fr auto; gap: var(--space-sm); align-items: center; font-size: var(--fs-200); }
.hero-card__row svg { width: 18px; height: 18px; color: var(--color-muted); }
.hero-card__row dt { color: var(--color-muted); }
.hero-card__row dd { color: var(--color-heading); font-weight: var(--fw-semibold); text-align: right; }
.hero-card__row dd .dot { color: var(--color-primary); }

/* =====================================================================
   Layout "título + conteúdo" (Secções 1 e 4)
   ===================================================================== */
.split-layout { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; align-items: start; }
.split-layout__aside { display: grid; gap: var(--space-sm); align-content: start; justify-items: start; }
.split-layout__aside h2 { font-size: var(--fs-700); }
.split-layout__aside p { color: var(--color-muted); }
/* Nota laranja (Secção 4) */
.aside-note {
  display: flex; gap: var(--space-xs); align-items: flex-start;
  margin-top: var(--space-xs);
  color: var(--color-primary); font-size: var(--fs-200); font-weight: var(--fw-semibold);
}
.aside-note svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
/* Checklist em duas colunas (Secção 3) */
.check-list--cols { grid-template-columns: 1fr; }

/* =====================================================================
   Secção 3 — Diagnóstico (faixa escura: texto + imagem)
   ===================================================================== */
.diag { display: grid; gap: var(--space-xl); align-items: center; grid-template-columns: 1fr; }
.diag__content { display: grid; gap: var(--space-md); align-content: start; justify-items: start; }
.diag__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; }
.diag__media img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   Secção 7 — CTA final (faixa com imagem)
   ===================================================================== */
.home-cta { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.home-cta__media { position: absolute; inset: 0; }
.home-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.home-cta__overlay {
  position: relative;
  background: linear-gradient(90deg, var(--color-dark-2) 0%, rgba(14,15,19,0.92) 42%, rgba(14,15,19,0.35) 100%);
  padding: var(--space-2xl) var(--space-xl);
  display: grid; gap: var(--space-md); justify-items: start;
}
.home-cta__overlay h2 { color: #fff; max-width: 18ch; }
.home-cta__overlay p { color: var(--color-on-dark-muted); max-width: 48ch; }
.home-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
.home-cta__phone { display: flex; align-items: center; gap: var(--space-xs); color: #fff; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-400); }
.home-cta__phone svg { width: 20px; height: 20px; color: var(--color-primary); }
.home-cta__overlay h2 .accent { color: var(--color-primary); }

/* =====================================================================
   Páginas interiores
   ===================================================================== */
.page-hero { padding-block: var(--space-lg) var(--space-md); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.page-hero__inner { display: grid; gap: var(--space-sm); }
.breadcrumb { display: flex; gap: var(--space-2xs); font-size: var(--fs-100); color: var(--color-muted); flex-wrap: wrap; }
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-primary); }

.contact-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
.contact-aside { display: grid; gap: var(--space-md); align-content: start; }
.contact-info-item { display: grid; gap: var(--space-2xs); }
.contact-info-item h4 { font-size: var(--fs-200); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); }

.article { max-width: 740px; margin-inline: auto; }
.article__header { margin-bottom: var(--space-lg); }
.article__media { margin: var(--space-lg) 0; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); aspect-ratio: 16 / 9; }
.article__body > * + * { margin-top: var(--space-md); }
.article__body h2 { margin-top: var(--space-lg); }
.article__body ul { display: grid; gap: var(--space-xs); padding-left: var(--space-md); list-style: disc; }