/* =============================
   GRID BASE — todos os modais
   ============================= */
.grid-projeto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 400px;
}

.proj-foto {
  overflow: hidden;
}

.proj-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =============================
   BLOCO DIREITO — info
   ============================= */
.proj-info {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--cor-branco);
}

.proj-cabecalho h2 {
  font-size: var(--fonte-subtitulo);
  font-weight: normal;
  margin: 0 0 6px 0;
}

.proj-subtitulo {
  font-size: var(--fonte-pequena);
  opacity: 0.6;
  margin: 0;
}

.proj-titulo-secao {
  font-size: var(--fonte-pequena);
  font-weight: normal;
  letter-spacing: 2px;
  border-bottom: 2px solid rgba(255,255,255,0.3);
  padding-bottom: 8px;
  margin: 0;
}

/* =============================
   ETAPAS
   ============================= */
.proj-etapas {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.etapa-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.circulo-etapa {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.circulo-etapa i {
  font-size: 16px;
  color: var(--cor-branco);
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
}

.info-etapa h4 {
  font-size: var(--fonte-pequena);
  font-weight: normal;
  letter-spacing: 0.5px;
  margin: 0 0 4px 0;
}

.info-etapa p {
  font-size: var(--fonte-pequena);
  line-height: 1.5;
  margin: 0;  
  opacity: 0.75;
}

/* =============================
   TEMAS DE COR — 1 classe por modal
   ============================= */
.tema-vermelho   { background-color: #8B0000; }
.tema-azul       { background-color: #0F2341; }
.tema-verde      { background-color: #176604 }
.tema-cyan       { background-color: #4b81a0; }
.tema-musgo      { background-color: #3c361e; }
.tema-cinza      { background-color: #2e2e2e; }
.tema-azul-claro { background-color: #45a5fa; }
.tema-marrom     { background-color: #3b2413; }
.tema-azul-m     { background-color: #012d9c; }



/* =============================
   RESPONSIVIDADE
   ============================= */
@media (max-width: 768px) {
  .grid-projeto {
    grid-template-columns: 1fr;
  }

  .proj-foto {
    min-height: 220px;
  }

  .proj-info {
    padding: 28px 20px;
  }
}