/* ============================================================
   Soluções — refinamento fiel do Figma 1646:41711 (08-09-2026)
   Hero com foto (mesmo padrão do Sobre) · Cards de porte
   (foto + painel azul) · Blocos por porte com nova copy
   ============================================================ */

/* ---------- HERO (usa .pg-hero--img de paginas.css) ---------- */
.sl-hero__content {
  max-width: 620px;
}

/* o Figma desta página usa 40px no H1 (o Sobre usa 48px) */
.sl-hero__content .pg-hero__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: -1.26px;
}

/* mesma escala nos títulos de seção (Figma: 40px, tracking -1.26px) */
.sl-page .pg-h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -1.26px;
}

.sl-hero__content .pg-hero__lead strong {
  font-weight: 600;
  color: #fff;
}

/* ---------- CARDS DE PORTE (Figma "Card Link", 369×462) ----------
   Foto ocupa o card inteiro; o painel azul ancora no rodapé com um
   filete claro no topo, como no Figma. */
.sl-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sl-card {
  position: relative;
  display: block;
  height: 462px;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #eef4ff;
  box-shadow: 0 0 0 1px #d7deec, 0 18px 34px -18px rgba(11, 27, 59, .28);
  transition: transform .25s ease, box-shadow .25s ease;
}

.sl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px #c3d0e8, 0 26px 44px -18px rgba(11, 27, 59, .34);
}

/* as ilustrações de porte têm o prédio no meio do quadro e fundo off-white:
   o card ganha o mesmo fundo (não fica costura) e a arte sobe um pouco para
   não ficar escondida atrás do painel azul */
.sl-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  mix-blend-mode: multiply;
  display: block;
}

.sl-card__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #005bff;
  border-top: 1.5px solid #5285ff;
  border-radius: 24px;
  padding: 26px 24px 24px;
}

.sl-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sl-card__title {
  flex: 1;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.42px;
  color: #fff;
}

.sl-card__arrow {
  flex: none;
  width: 20px;
  height: 20px;
  color: #f3f3f3;
  transition: transform .25s ease;
}

.sl-card:hover .sl-card__arrow {
  transform: translate(2px, -2px);
}

.sl-card__desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.58;
  color: rgba(255, 255, 255, .86);
}

/* ---------- SEÇÕES ----------
   No Figma todas as seções desta página são brancas (não há faixa cinza) e
   medem 878 de altura com o conteúdo de 616 centralizado: sobra 131 de
   respiro em cima e embaixo. */
.sl-page .pg-section {
  background: #fff;
  padding: clamp(64px, 9vw, 131px) 0;
}

/* seletor de porte: 80 de topo, 150 de base e 64 entre título e cards */
.sl-page #escolha {
  padding-top: clamp(48px, 8.5vh, 80px);
  padding-bottom: clamp(80px, 16vh, 150px);
}

.sl-page #escolha .pg-section__head {
  margin-bottom: clamp(36px, 6vh, 64px);
}

/* ---------- BLOCOS POR PORTE (Figma: 548 | 56 | 548) ---------- */
/* a foto do Figma é um recorte 548×616 da imagem original, não a imagem
   inteira: por isso aspect-ratio + object-fit em vez de height auto */
/* O fundo off-white da ilustração encostava no branco da seção e a caixa
   sumia. Conserto em duas partes, sem regerar arte:
   1. a CAIXA ganha fundo azul-claro #EEF4FF e um anel de 1px #d7deec
      (box-shadow em vez de border, para não somar 2px na largura);
   2. a IMAGEM entra em `multiply`, então o off-white embutido na arte deixa
      passar o azul-claro da caixa e o desenho mantém o mesmo peso. */
.sl-page .pg-split__media {
  background: #eef4ff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #d7deec,
              0 20px 44px -16px rgba(11, 27, 59, .2),
              0 8px 16px -8px rgba(11, 27, 59, .1);
}

.sl-page .pg-split__media img {
  width: 100%;
  height: auto;
  /* a arte é 3:4 dentro da caixa 548×616 do Figma: o cover come só a margem */
  aspect-ratio: 548 / 616;
  object-fit: cover;
  border-radius: 24px;
  mix-blend-mode: multiply;
}

/* corpo de texto do Figma: 16px, entrelinha 1.2, cinza #757575 */
.sl-page .pg-split__kicker {
  font-size: 16px;
  line-height: 1.2;
  color: #757575;
  margin-top: 24px;
}

/* dois parágrafos de abertura: no Figma há uma linha vazia entre eles */
.sl-page .pg-split__kicker + .pg-split__kicker {
  margin-top: 19px;
}

/* ---------- CHECKLISTS ----------
   O Figma usa o "Check (16)" do DS: traço fino azul, sem a bolinha cheia
   que o site aplica por padrão. */
.sl-page .pg-checklist {
  gap: 16px;
  margin-top: 24px;
}

.sl-page .pg-checklist li {
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.2;
  color: #757575;
}

.sl-page .pg-checklist li::before {
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 0;
  box-shadow: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L7 12.5L13 3.5' stroke='%23002E7F' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.sl-page .pg-checklist li strong {
  color: #002e7f;
  font-weight: 600;
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 980px) {
  .sl-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  /* em coluna única a foto retrato fica alta demais: volta para 4:3 */
  .sl-page .pg-split__media img {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 640px) {
  .sl-cards {
    grid-template-columns: 1fr;
  }

  .sl-card {
    height: 420px;
  }
}