/**
 * utils.css — Utilidades mínimas (reemplaza Tailwind CDN)
 * Solo incluye las clases que realmente se usan en kreactivo.com
 * ~8KB vs ~350KB del Play CDN de Tailwind
 */

/* ── Display ─────────────────────────────────────────────────────── */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }

/* ── Flexbox ─────────────────────────────────────────────────────── */
.flex-1        { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-start   { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }

/* ── Grid ────────────────────────────────────────────────────────── */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Gap ─────────────────────────────────────────────────────────── */
.gap-1   { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2   { gap: 0.5rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-5   { gap: 1.25rem; }
.gap-6   { gap: 1.5rem; }
.gap-7   { gap: 1.75rem; }

/* ── Sizing ──────────────────────────────────────────────────────── */
.w-full  { width: 100%; }
.w-1\.5  { width: 0.375rem; }
.w-3\.5  { width: 0.875rem; }
.w-4     { width: 1rem; }
.w-6     { width: 1.5rem; }
.w-10    { width: 2.5rem; }
.h-4     { height: 1rem; }
.h-6     { height: 1.5rem; }
.h-10    { height: 2.5rem; }
.max-w-7xl { max-width: 80rem; }
.min-w-0   { min-width: 0; }

/* ── Padding ─────────────────────────────────────────────────────── */
.p-4       { padding: 1rem; }
.p-5       { padding: 1.25rem; }
.px-5      { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6      { padding-left: 1.5rem;  padding-right: 1.5rem; }
.py-2\.5   { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-5      { padding-top: 1.25rem;  padding-bottom: 1.25rem; }
.py-8      { padding-top: 2rem;     padding-bottom: 2rem; }

/* ── Margin ──────────────────────────────────────────────────────── */
.mb-1    { margin-bottom: 0.25rem; }
.mb-2    { margin-bottom: 0.5rem; }
.mb-6    { margin-bottom: 1.5rem; }
.mt-1    { margin-top: 0.25rem; }
.mt-2    { margin-top: 0.5rem; }
.mt-3    { margin-top: 0.75rem; }
.mt-4    { margin-top: 1rem; }
.mt-8    { margin-top: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Position ────────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { inset: 0; }
.-top-1   { top: -0.25rem; }
.-right-1 { right: -0.25rem; }

/* ── Border & Radius ─────────────────────────────────────────────── */
.border       { border-width: 1px; border-style: solid; }
.rounded-full { border-radius: 9999px; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-3xl  { border-radius: 1.5rem; }

.border-white\/10      { border-color: rgba(255, 255, 255, 0.1); }
.border-orange-500\/20 { border-color: rgba(249, 115, 22, 0.2); }
.border-orange-500\/40 { border-color: rgba(249, 115, 22, 0.4); }

/* ── Overflow ────────────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }

/* ── Typography ──────────────────────────────────────────────────── */
.text-xs      { font-size: 0.75rem;  line-height: 1rem; }
.text-sm      { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg      { font-size: 1.125rem; line-height: 1.75rem; }
.text-6xl     { font-size: 3.75rem;  line-height: 1; }
.font-black   { font-weight: 900; }
.font-bold    { font-weight: 700; }
.font-medium  { font-weight: 500; }
.uppercase    { text-transform: uppercase; }
.tracking-tight   { letter-spacing: -0.025em; }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-wide    { letter-spacing: 0.025em; }
.tracking-widest  { letter-spacing: 0.1em; }
.tabular-nums  { font-variant-numeric: tabular-nums; }
.no-underline  { text-decoration: none; }
.text-center   { text-align: center; }

/* ── Colors ──────────────────────────────────────────────────────── */
.text-white      { color: #fff; }
.text-gray-400   { color: #9ca3af; }
.text-gray-500   { color: #6b7280; }
.text-orange-400 { color: #fb923c; }
.text-orange-500 { color: #f97316; }

.bg-red-500     { background-color: #ef4444; }
.bg-orange-500  { background-color: #f97316; }
.bg-slate-900\/80  { background-color: rgba(15, 23, 42, 0.8); }
.bg-orange-500\/5  { background-color: rgba(249, 115, 22, 0.05); }

/* ── Gradientes ──────────────────────────────────────────────────── */
.bg-gradient-to-r {
  --tw-grad-from: transparent;
  --tw-grad-via:  ;
  --tw-grad-to:   transparent;
  background-image: linear-gradient(to right,
    var(--tw-grad-from),
    var(--tw-grad-via, var(--tw-grad-to)),
    var(--tw-grad-to)
  );
}
.from-orange-400 { --tw-grad-from: #fb923c; }
.via-red-500     { --tw-grad-via:  #ef4444; }
.to-pink-500     { --tw-grad-to:   #ec4899; }
.from-purple-500 { --tw-grad-from: #a855f7; }
.to-pink-600     { --tw-grad-to:   #db2777; }
.from-green-500  { --tw-grad-from: #22c55e; }
.to-emerald-600  { --tw-grad-to:   #059669; }
.from-blue-500   { --tw-grad-from: #3b82f6; }
.to-cyan-600     { --tw-grad-to:   #0891b2; }

.bg-clip-text    { -webkit-background-clip: text; background-clip: text; }
.text-transparent { color: transparent; }

/* ── Efectos ─────────────────────────────────────────────────────── */
.backdrop-blur-xl {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.shadow-red-500\/50 { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5), 0 4px 12px rgba(239, 68, 68, 0.5); }

.opacity-50 { opacity: 0.5; }

/* ── Transiciones ────────────────────────────────────────────────── */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-300 { transition-duration: 300ms; }

/* ── Hover states ────────────────────────────────────────────────── */
.hover\:scale-105:hover         { transform: scale(1.05); }
.hover\:-translate-y-0\.5:hover { transform: translateY(-0.125rem); }
.hover\:shadow-2xl:hover        { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.hover\:shadow-lg:hover         { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.hover\:shadow-orange-500\/10:hover  { box-shadow: 0 10px 20px rgba(249, 115, 22, 0.1); }
.hover\:bg-orange-500\/10:hover      { background-color: rgba(249, 115, 22, 0.1); }
.hover\:border-orange-500\/40:hover  { border-color: rgba(249, 115, 22, 0.4); }

/* ── Group hover ─────────────────────────────────────────────────── */
.group:hover .group-hover\:rotate-12       { transform: rotate(12deg); }
.group:hover .group-hover\:translate-x-0\.5 { transform: translateX(0.125rem); }