/* ==========================================================================
   ARQUIVO: como-funciona.css
   OBJETIVO: Estilos para a Seção 2 (O Problema / Dores, o Passo a Passo VIP
   e o card "Girar o Estoque").
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. O PROBLEMA (Dores Atuais do Corretor)
   -------------------------------------------------------------------------- */
.problemas-bloco {
  margin-bottom: var(--espaco-3xl);
}

.problemas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-md);
}

@media (min-width: 768px) {
  .problemas-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.problema-card {
  background-color: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda-media);
  border-radius: var(--raio-medio);
  padding: var(--espaco-lg);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
  transition: border-color var(--transicao-rapida);
}

.problema-card:hover {
  border-color: var(--cor-preto-suave);
}

.problema-icone-wrap {
  width: 36px;
  height: 36px;
  border-radius: var(--raio-pequeno);
  background-color: var(--cor-fundo-destaque);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-texto-principal);
}

.problema-titulo {
  font-size: var(--tam-fonte-padrao);
  font-weight: var(--peso-forte);
  color: var(--cor-texto-principal);
}

.problema-descricao {
  font-size: var(--tam-fonte-pequena);
  color: var(--cor-texto-secundario);
}

/* --------------------------------------------------------------------------
   2. A SOLUÇÃO: OS 3 PASSOS SIMPLES
   -------------------------------------------------------------------------- */
.passos-bloco {
  margin-bottom: var(--espaco-2xl);
}

.passos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-lg);
}

@media (min-width: 768px) {
  .passos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.passo-card {
  background-color: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda-media);
  border-radius: var(--raio-grande);
  padding: var(--espaco-xl);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
  position: relative;
  transition: transform var(--transicao-rapida), box-shadow var(--transicao-rapida), border-color var(--transicao-rapida);
}

.passo-card:hover {
  transform: translateY(-4px);
  border-color: var(--cor-preto-suave);
  box-shadow: var(--sombra-destaque);
}

.passo-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espaco-xs);
}

.passo-numero {
  font-size: var(--tam-fonte-micro);
  font-weight: var(--peso-extra);
  padding: 0.25rem 0.65rem;
  background-color: var(--cor-preto-puro);
  color: var(--cor-texto-inverso);
  border-radius: var(--raio-redondo);
}

.passo-icone {
  width: 28px;
  height: 28px;
  color: var(--cor-texto-principal);
}

.passo-titulo {
  font-size: var(--tam-fonte-media);
  font-weight: var(--peso-forte);
  color: var(--cor-texto-principal);
}

.passo-descricao {
  font-size: var(--tam-fonte-pequena);
  line-height: var(--altura-linha-conforto);
  color: var(--cor-texto-secundario);
}

/* --------------------------------------------------------------------------
   3. GIRAR O ESTOQUE (Card de Tranquilidade e Garantia de Gestão)
   -------------------------------------------------------------------------- */
.girar-estoque-card {
  background-color: var(--cor-fundo-cartao);
  border: 2px dashed var(--cor-borda-media);
  border-radius: var(--raio-grande);
  padding: var(--espaco-xl);
  display: flex;
  align-items: center;
  gap: var(--espaco-lg);
  max-width: 820px;
  margin: var(--espaco-2xl) auto 0 auto;
  box-shadow: var(--sombra-suave);
  transition: border-color var(--transicao-rapida);
}

.girar-estoque-card:hover {
  border-color: var(--cor-preto-puro);
}

.girar-estoque-icone-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--cor-preto-puro);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.girar-estoque-icone-wrap .icone-svg {
  width: 26px;
  height: 26px;
  filter: brightness(0) invert(1);
}

.girar-estoque-texto {
  font-size: var(--tam-fonte-padrao);
  color: var(--cor-texto-secundario);
  line-height: var(--altura-linha-conforto);
}

.girar-estoque-texto strong {
  color: var(--cor-texto-principal);
  font-size: var(--tam-fonte-media);
  display: inline-block;
  margin-bottom: 0.25rem;
}