/* Utilidades — solo estas cuatro clases */
@layer utilities {

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .container {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: 2rem;
  }
}

.container--prose {
  max-width: 65ch;
}

.u-hide-sm {
  display: none;
}

@media (min-width: 640px) {
  .u-hide-sm {
    display: revert;
  }
}

.u-show-lg {
  display: none;
}

@media (min-width: 1024px) {
  .u-show-lg {
    display: block;
  }
}

}