/* Segmentos detalhados (Figma: Segmentos / Sessão segmentos, 510:4099). */

.segmentos-detalhado { padding: 56px 0; }
@media (min-width: 1024px) {
  .segmentos-detalhado { padding: 96px 0; }
}

.segmentos-detalhado-intro { text-align: center; margin-bottom: 32px; }
.segmentos-detalhado-intro .badge { margin-bottom: 20px; }
.segmentos-detalhado-intro h2 { max-width: 700px; margin: 0 auto; }
@media (min-width: 1024px) {
  .segmentos-detalhado-intro { margin-bottom: 48px; }
}

.segmentos-detalhado-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .segmentos-detalhado-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .segmentos-detalhado-grid { grid-template-columns: repeat(3, 1fr); }
}

.segmento-card {
  display: flex;
  flex-direction: column;
  border: 1.05px solid var(--color-border-blue);
  border-radius: 20px;
  padding: 40px;
  background: var(--color-white);
}
@media (min-width: 1024px) {
  /* Altura mínima igual à do card no Figma (357px) — cards com descrição
     mais curta ficam com a mesma altura dos vizinhos na mesma linha, com
     o link sempre grudado na base (margin-top: auto), em vez de flutuar
     no meio do card. */
  .segmento-card { min-height: 357px; }
}

.segmento-card--featured {
  background: var(--color-orange);
  border-color: var(--color-orange-light);
}

.segmento-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--color-orange);
  margin-bottom: 26px;
}
.segmento-card--featured .segmento-card-icon { background: var(--color-white); }
.segmento-card-icon img { width: 24px; height: 24px; }

.segmento-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.2px; color: var(--color-navy); margin-bottom: 12px; }
.segmento-card--featured h3 { color: var(--color-white); }

/* O texto tem 341px de largura no Figma (a caixa de texto invade 10px do
   respiro da direita do card) — é isso que faz as descrições quebrarem
   em 5 linhas no máximo, e não 6, deixando todos os cards com 357px.
   Do fim do texto até o link são 24,5px. */
.segmento-card p { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--color-gray-04); margin-right: -10px; margin-bottom: 24.5px; }
.segmento-card--featured p { color: var(--color-white); }

.segmento-card-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6.82px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-orange);
  margin-top: auto;
}
.segmento-card-link img { width: 17.05px; height: 17.05px; }
.segmento-card--featured .segmento-card-link { color: var(--color-white); }