/* =====================================================================
   Portfólio · Meus projetos (cabeçalho, protótipo e explicação)
   ===================================================================== */

.projeto + .projeto { margin-top: clamp(5rem, 10vw, 8rem); }

.projeto-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 2rem;
    margin-bottom: 1.6rem;
}
.projeto-cabeca h3 { font-size: var(--t-4); }
.projeto-cabeca p { margin: 0; color: var(--apagado); }

.projeto-detalhes {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 1.5rem clamp(2rem, 5vw, 4.5rem);
    margin-top: 2.2rem;
}
.projeto-explica { max-width: 60ch; }
.projeto-explica em { font-style: normal; color: var(--branco); font-weight: 600; }
.projeto-dica {
    color: var(--apagado);
    padding-left: 1rem;
    border-left: 2px solid var(--vermelho);
}

.projeto-destaques li {
    position: relative;
    padding: .55rem 0 .55rem 1.6rem;
    border-bottom: 1px solid var(--linha);
}
.projeto-destaques li:first-child { padding-top: 0; }
.projeto-destaques li::before {
    content: "";
    position: absolute;
    left: .1rem;
    top: 1.05rem;
    width: .5rem;
    height: .5rem;
    background: var(--vermelho);
    transform: rotate(45deg);
}
.projeto-destaques li:first-child::before { top: .5rem; }


@media (max-width: 860px) {
    .projeto-detalhes { grid-template-columns: 1fr; }
}