/* ==========================================================================
   MIGO DESIGN TOKENS — grupomigo.net
   ==========================================================================
   Dirección: ferretería industrial profesional.
   Azules industriales + neutros slate. Rojo del logo SOLO en el logo y en
   accents puntuales (etiquetas de oferta, errores). NUNCA como color de UI.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* --------------------------------------------------------------------------
     COLORES — PRIMARIO (azul industrial)
     Tono "blueprint / acero pintado". Profundo, confiable, no juguetón.
     -------------------------------------------------------------------------- */
  --primary-50:  #EEF4FB;
  --primary-100: #D8E6F4;
  --primary-200: #B0CBE7;
  --primary-300: #7FA8D3;
  --primary-400: #4F84BA;
  --primary-500: #2A66A1;
  --primary-600: #0B4B8C;   /* ★ acción principal: botones, links, foco */
  --primary-700: #083C70;   /* hover */
  --primary-800: #062D55;   /* press */
  --primary-900: #041E3B;   /* texto sobre fondo blanco para headings serios */

  /* --------------------------------------------------------------------------
     COLORES — NEUTROS (slate frío, no gris cálido)
     Base de toda la UI: backgrounds, bordes, texto, dividers.
     -------------------------------------------------------------------------- */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;     /* "ink" — texto principal */

  /* --------------------------------------------------------------------------
     ACCENT — Ámbar de seguridad (chalecos, hot deals, ofertas)
     Úsalo MUY puntualmente: badges de "Oferta", flash sale, etiqueta nuevo.
     -------------------------------------------------------------------------- */
  --amber-50:  #FEF7E7;
  --amber-100: #FCEAB8;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;

  /* --------------------------------------------------------------------------
     MARCA — Rojo Migo (USAR SOLO EN LOGO + microacentos)
     Reglas:
       1. Logo: siempre en su forma original.
       2. Etiquetas "OFERTA" o badges de descuento puntuales.
       3. Estados de error (validación, alertas destructivas).
       NUNCA en headers, botones de compra, hover states, fondos planos.
     -------------------------------------------------------------------------- */
  --migo-red:      #D8231D;   /* hex tomado del SVG del logo */
  --migo-red-dark: #A81A15;

  /* --------------------------------------------------------------------------
     WHATSAPP — se mantiene la convención global (verde WA)
     Porque es un canal de venta crítico para Migo (todos los productos linkan
     a wa.me). El usuario reconoce el verde como "chatear por WhatsApp".
     -------------------------------------------------------------------------- */
  --wa-green:      #25D366;
  --wa-green-dark: #1FAE53;

  /* --------------------------------------------------------------------------
     SEMÁNTICOS
     -------------------------------------------------------------------------- */
  --success: #16A34A;
  --success-bg: #DCFCE7;
  --warning: #F59E0B;
  --warning-bg: #FEF3C7;
  --danger:  #DC2626;
  --danger-bg: #FEE2E2;
  --info:    #0B4B8C;
  --info-bg: #DBEAFE;

  /* --------------------------------------------------------------------------
     SUPERFICIES Y TEXTO (alias semánticos — usar estos, no los crudos)
     -------------------------------------------------------------------------- */
  --bg:            #FFFFFF;
  --bg-subtle:     #F8FAFC;   /* fondo de página */
  --bg-muted:      #F1F5F9;   /* secciones alternas */
  --bg-inverse:    #0F172A;   /* footer, dark sections */

  --border:        #E2E8F0;
  --border-strong: #CBD5E1;
  --border-focus:  #0B4B8C;

  --text:          #0F172A;   /* texto principal */
  --text-muted:    #475569;   /* texto secundario */
  --text-faint:    #94A3B8;   /* placeholders, captions */
  --text-inverse:  #FFFFFF;

  /* --------------------------------------------------------------------------
     TIPOGRAFÍA
     Display: Archivo (geométrica + condensada cuando hace falta peso industrial)
     Body:    Manrope (legible, redondeada apenas — no aburrida como Inter)
     Mono:    JetBrains Mono (precios, SKU, códigos)
     -------------------------------------------------------------------------- */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Escala tipográfica — modular ratio 1.25 */
  --fs-xs:   0.75rem;   /* 12 — captions, legales */
  --fs-sm:   0.875rem;  /* 14 — labels, meta */
  --fs-base: 1rem;      /* 16 — body */
  --fs-md:   1.125rem;  /* 18 — body destacado */
  --fs-lg:   1.25rem;   /* 20 — h4 */
  --fs-xl:   1.5rem;    /* 24 — h3 */
  --fs-2xl:  1.875rem;  /* 30 — h2 */
  --fs-3xl:  2.25rem;   /* 36 — h1 */
  --fs-4xl:  3rem;      /* 48 — hero */
  --fs-5xl:  3.75rem;   /* 60 — hero XL */

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* --------------------------------------------------------------------------
     ESPACIADO — base 4
     -------------------------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  28px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* --------------------------------------------------------------------------
     RADIOS — chicos. Estilo "utilitario / industrial", nunca pill chunky.
     -------------------------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-pill: 999px;

  /* --------------------------------------------------------------------------
     SHADOWS — sutiles. Nada de glow ni neón.
     -------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px -8px rgba(15, 23, 42, 0.14), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
  --shadow-focus: 0 0 0 3px rgba(11, 75, 140, 0.25);

  /* --------------------------------------------------------------------------
     MOTION
     -------------------------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;

  /* --------------------------------------------------------------------------
     LAYOUT — anchos de contenedor
     -------------------------------------------------------------------------- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  /* --------------------------------------------------------------------------
     Z-INDEX
     -------------------------------------------------------------------------- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ==========================================================================
   TIPOGRAFÍA — clases utilitarias listas para usar
   ========================================================================== */
.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 4vw + 1rem, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--slate-900);
}
.h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 2vw + 1rem, var(--fs-3xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--slate-900);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.4vw + 1rem, var(--fs-2xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--slate-900);
}
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--slate-900);
}
.h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--slate-900);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--primary-600);
}

.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }