/* Página /recepta/ — só o que não existe no styles.css da home.
   O resto (hero, painel do produto, grade, FAQ, CTA) é o mesmo CSS da home. */

.rp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--light-09);
}
.rp-step {
  padding: 2rem 1.6rem 2.2rem 0;
  border-right: 1px solid var(--light-09);
}
.rp-step + .rp-step { padding-left: 1.6rem; }
.rp-step:last-child { border-right: 0; }
.rp-step .mono {
  display: block;
  margin-bottom: 1.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--light-55);
  opacity: 0.8;
}
.rp-step h3 {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  line-height: 1.25;
}
.rp-step p {
  margin: 0;
  color: var(--light-70);
  line-height: 1.55;
}

.rp-docs {
  margin-top: 1.6rem;
  font-size: 0.9rem;
  opacity: 0.8;
}
.rp-docs a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .rp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-step, .rp-step + .rp-step { padding: 1.8rem 1.4rem 1.8rem 0; border-right: 0; border-bottom: 1px solid var(--light-09); }
  .rp-step:nth-child(even) { padding-left: 1.4rem; border-left: 1px solid var(--light-09); }
}
@media (max-width: 640px) {
  .rp-steps { grid-template-columns: 1fr; }
  .rp-step, .rp-step + .rp-step, .rp-step:nth-child(even) { padding: 1.6rem 0; border-left: 0; }
  .rp-step:last-child { border-bottom: 0; }
}