/*
 * Utilidades. Son pocas a propósito: lo que tiene nombre propio es un componente.
 */
@layer utilities {
  /* Oculta a la vista, pero lo mantiene para lectores de pantalla. */
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Texto que solo cabe en pantallas medianas o más anchas. */
  @media (max-width: 29.99rem) {
    .from-medium {
      display: none;
    }
  }
}