/* ================================================================
   AlfamaWeb — estilos da LEITURA DE SOLUÇÃO
   ================================================================ */

/* ================================================================
   TOPO — faixa com imagem de fundo
   ================================================================ */

.solucao-topo {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 400px;
  padding: var(--space-4xl) var(--gutter-x);
  overflow: hidden;
  isolation: isolate;
}

/* A imagem é <img> e não background-image: assim ela entra na fila de
   carregamento como imagem de verdade (dá para dar `fetchpriority`) e o
   navegador pode escolher tamanho por `srcset` quando houver. */
.solucao-topo__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O véu que garante contraste do texto sobre a foto — sem ele o
   breadcrumb desaparece nas partes claras do circuito. */
.solucao-topo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(6, 6, 9, .88), rgba(6, 6, 9, .55) 50%, rgba(6, 6, 9, .88));
  pointer-events: none;
}

.solucao-topo__interno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--content-max);
  text-align: center;
}

.solucao-topo__titulo {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--text-primary);
}

/* ================================================================
   TEXTO + RESULTADOS
   ================================================================ */

.solucao-intro__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: var(--space-4xl);
  align-items: center;
}

.solucao-intro__texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.solucao-intro__titulo {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--text-primary);
}

/* O card azul dos números. O azul é o Brand/DarkBlue do Design System —
   é a única superfície do site que usa essa cor cheia, e é de propósito:
   ela separa o bloco de prova social do texto corrido ao lado. */
.resultados {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  background: var(--brand-dark-blue);
}

.resultados__titulo {
  color: var(--text-primary);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.2;
}

.resultados__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.resultado {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.resultado__icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--brand-primary);
  color: var(--black);
}
.resultado__icone svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
}

.resultado__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.resultado__rotulo {
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  line-height: 1.4;
}

.resultado__valor {
  color: var(--text-primary);
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.2;
}

/* ================================================================
   O QUE FAZ UM SITE TER RESULTADO
   ================================================================ */

.caracteristicas__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4xl);
  align-items: center;
}

.caracteristicas__midia {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-tertiary);
}
.caracteristicas__midia img {
  width: 100%;
  height: auto;
}

.caracteristicas__texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.caracteristicas__titulo {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--text-primary);
}

.caracteristicas__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xs);
}

.caracteristica {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  color: var(--text-primary);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
}

.caracteristica__marca {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  /* Alinha o círculo com a PRIMEIRA linha do texto, não com o bloco:
     em item de duas linhas o centro do bloco ficaria baixo demais. */
  margin-top: calc((1em * var(--lh-body) - 24px) / 2);
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: var(--black);
}
.caracteristica__marca svg {
  width: 12px;
  height: 11px;
  fill: none;
  stroke: currentColor;
}

/* ================================================================
   RESPONSIVO
   ================================================================ */

@media (max-width: 1000px) {
  .solucao-intro__grade,
  .caracteristicas__grade {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  /* A imagem do diagrama vai para cima do texto, como no mobile do Figma. */
  .caracteristicas__midia { order: -1; }
}

@media (max-width: 768px) {
  .solucao-topo { min-height: 280px; }
  .resultados { padding: var(--space-lg); }
}