/* ───────── contenedores y ritmo ───────── */
.mp-ancho{
  width:100%;
  max-width:var(--mp-ancho);
  margin-inline:auto;
  padding-inline:var(--mp-gutter);
}
.mp-ancho--texto{ max-width:calc(var(--mp-ancho-tx) + var(--mp-gutter) * 2) }

.mp-seccion{ padding-block:var(--mp-e6) }
@media (min-width:768px){ .mp-seccion{ padding-block:var(--mp-e7) } }

.mp-seccion__cab{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--mp-e3); flex-wrap:wrap; margin-bottom:var(--mp-e4);
}

/* retícula de muestrario: el cuadrado como sistema */
.mp-reticula{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--mp-e3) var(--mp-e2);
}
@media (min-width:640px){ .mp-reticula{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--mp-e4) var(--mp-e3) } }
@media (min-width:1024px){ .mp-reticula{ grid-template-columns:repeat(4, minmax(0,1fr)) } }

.mp-reticula--2{ grid-template-columns:repeat(1, minmax(0,1fr)) }
@media (min-width:640px){ .mp-reticula--2{ grid-template-columns:repeat(2, minmax(0,1fr)) } }

/* franja de tela — la firma del sitio */
.mp-tela{
  position:relative;
  width:100%;
  aspect-ratio:21/9;
  overflow:hidden;
  background:var(--mp-lino-hondo);
}
@media (max-width:640px){ .mp-tela{ aspect-ratio:3/2 } }
.mp-tela img{ width:100%; height:100%; object-fit:cover }