/*
  components/card.css
  "Placa de rack": la tarjeta de producto imita una unidad de equipo,
  no una card de SaaS. Esquinas casi rectas, tornillos en las esquinas,
  sombra dura de canto en vez de sombra difusa gris.
*/

.plate {
  position: relative;
  background: var(--ink-800);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-plate);
  padding: var(--space-6);
}

.plate__screw {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--steel-400);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

.plate__screw::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4px;
  height: 1px;
  background: var(--ink-900);
  transform: rotate(35deg);
}

.plate__screw--tl {
  top: var(--space-2);
  left: var(--space-2);
}
.plate__screw--tr {
  top: var(--space-2);
  right: var(--space-2);
}
.plate__screw--bl {
  bottom: var(--space-2);
  left: var(--space-2);
}
.plate__screw--br {
  bottom: var(--space-2);
  right: var(--space-2);
}