/* Página de materiais · usa os componentes de ../styles.css e ../redes-sociais/redes-sociais.css */
.para-quem__grid--4 { grid-template-columns: repeat(4, 1fr); }
.para-quem__grid--4 .perfil-card { padding: 34px 28px; }
.para-quem__grid--4 .perfil-card h3 { font-size: 24px; }
.para-quem__grid--4 .perfil-card p { font-size: 17px; }

.materiais { padding: 110px 0; }
.materiais__head { max-width: 820px; }
.materiais__head .text-24 { margin-top: 18px; }
.materiais__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mat { border-radius: 10px; padding: 28px 24px; background: var(--areia); color: var(--tinta); }
.mat__num { font-family: var(--f-serif); font-style: italic; font-size: 22px; color: var(--vinho); }
.mat h3 { font-size: 21px; font-weight: 700; margin-top: 10px; line-height: 1.2; }
.mat p { font-size: 16px; line-height: 1.45; font-weight: 300; margin-top: 10px; }

.como { padding: 110px 0; }
.como__passos { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.como__passos li { border-top: 1.5px solid var(--tinta); padding-top: 18px; }
.como__passos span { font-size: 44px; font-weight: 300; color: var(--vinho); }
.como__passos h3 { font-size: 22px; font-weight: 700; margin-top: 8px; }
.como__passos p { font-size: 17px; line-height: 1.45; font-weight: 300; margin-top: 8px; }

.cta-mat { padding: 110px 0; text-align: center; }
.cta-mat .container { max-width: 860px; }
.cta-mat .text-24 { margin: 20px auto 0; }
.cta-mat .btn { margin-top: 34px; }
.cta-mat .micro { margin-top: 14px; color: var(--creme); opacity: .75; }

@media (max-width: 1100px) {
  .para-quem__grid--4, .materiais__grid, .como__passos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .para-quem__grid--4, .materiais__grid, .como__passos { grid-template-columns: 1fr; gap: 12px; margin-top: var(--bloco); }
  .materiais, .como, .cta-mat { padding: var(--sec) 0; }
  .mat { padding: 22px 20px; }
  .como__passos span { font-size: 34px; }
  .cta-mat .btn { margin-top: var(--cta); }
}