/* ===== Micro utilidades (sustituye lo básico de Tailwind que usas) ===== */

/* Breakpoints */
@media (min-width: 640px) { :root { --sm: 1; } }
@media (min-width: 768px) { :root { --md: 1; } }
@media (min-width: 1280px){ :root { --xl: 1; } }

/* Layout básicos */
.w-full{ width:100%; }
.flex{ display:flex; }
.grid{ display:grid; }
.text-center{ text-align:center; }

/* Colores de texto usados */
.text-gray-500{ color:#6b7280; }

/* Grid columnas que usas */
.grid-cols-1{ grid-template-columns: repeat(1,minmax(0,1fr)); }
@media (min-width:640px){ .sm\:grid-cols-2{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width:768px){ .md\:grid-cols-3{ grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (min-width:1280px){ .xl\:grid-cols-4{ grid-template-columns: repeat(4,minmax(0,1fr)); } }

/* Gaps / paddings / margins que aparecen en tu HTML */
.gap-6{ gap:1.5rem; }
.p-4{ padding:1rem; }
.py-6{ padding-top:1.5rem; padding-bottom:1.5rem; }
.mx-auto{ margin-left:auto; margin-right:auto; }

/* Contenedores anchos */
.max-w-screen-xl{ max-width:1280px; }

/* Helpers de visibilidad (por si acaso) */
.hidden{ display:none !important; }
.block{ display:block; }

/* Ajustes suaves por si faltan fuentes del sistema */
:root{
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
body{ font-family: var(--font-sans); }

/* Puedes añadir más utilidades a medida que las necesites */