/* ============================================================
   JMT Solutions TI — Design System V2
   Fuente unica de color, tipografia, espaciado y movimiento.
   Ningun componente define un valor propio: todo sale de aqui.
   ============================================================ */

:root {
    /* ---------- Superficies ---------- */
    --hero:        #07111F;
    --navbar:      #081321;
    --fondo:       #F7F9FC;
    --superficie:  #FFFFFF;

    /* Superficies elevadas sobre fondo oscuro */
    --glass:       rgba(255, 255, 255, .06);
    --glass-borde: rgba(255, 255, 255, .10);

    /* ---------- Texto ---------- */
    --texto:        #111827;
    --texto-suave:  #64748B;
    --texto-tenue:  #94A3B8;

    /* Sobre fondo oscuro */
    --texto-claro:       #F1F5F9;
    --texto-claro-suave: #94A9C4;

    /* ---------- Accion ---------- */
    --azul:        #1677FF;
    --azul-hover:  #0F5ED7;
    --azul-claro:  #36B3FF;

    /* Urgencia. Reservado a ofertas y stock bajo: si se usa en
       cualquier otro sitio deja de significar urgencia. */
    --naranja:     #FF7A00;

    /* Exclusivo de WhatsApp y disponibilidad. */
    --whatsapp:       #22C55E;
    --whatsapp-hover: #16A34A;

    /* ---------- Bordes y estado ---------- */
    --borde:        #E8EEF5;
    --borde-fuerte: #D3DEEB;

    --exito:       #15803D;
    --exito-fondo: #ECFDF3;
    --alerta:      #B45309;
    --alerta-fondo:#FFFAEB;
    --error:       #B91C1C;
    --error-fondo: #FEF2F2;

    /* ---------- Sombras ---------- */
    --sombra:       0 12px 40px rgba(15, 23, 42, .08);
    --sombra-alta:  0 20px 60px rgba(15, 23, 42, .12);
    --sombra-sutil: 0 1px 3px rgba(15, 23, 42, .06);
    --glow-azul:    0 8px 32px rgba(22, 119, 255, .32);
    --glow-verde:   0 8px 32px rgba(34, 197, 94, .28);

    /* ---------- Tipografia ----------
       Dos familias, no mas. Sora carga los titulares de campana; Inter
       sostiene toda la interfaz. Mezclar mas familias diluye la identidad. */
    --fuente: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
              "Segoe UI", Roboto, sans-serif;
    --fuente-display: "Sora", "Inter", system-ui, sans-serif;

    /* Escala en px, tal como se especifico. clamp() protege el movil. */
    --txt-hero:    clamp(2.75rem, 6.4vw, 4.5rem);   /* 72px */
    --txt-titulo:  clamp(2.25rem, 4.4vw, 3.5rem);   /* 56px */
    --txt-h2:      clamp(1.875rem, 3.4vw, 2.625rem);/* 42px */
    --txt-h3:      clamp(1.5rem, 2.6vw, 2.125rem);  /* 34px */
    --txt-h4:      1.75rem;                          /* 28px */
    --txt-precio:  clamp(1.75rem, 3vw, 2.5rem);      /* 40px */
    --txt-card:    1.25rem;                          /* 20px */
    --txt-sub:     1.375rem;                         /* 22px */
    --txt-lg:      1.125rem;                         /* 18px */
    --txt-md:      1.0625rem;                        /* 17px  texto principal */
    --txt-base:    1rem;                             /* 16px  botones */
    --txt-sm:      .9375rem;                         /* 15px  secundario */
    --txt-label:   .875rem;                          /* 14px */
    --txt-xs:      .8125rem;                         /* 13px  codigos */

    --peso-light: 300;
    --peso-normal: 400;
    --peso-medio:  500;
    --peso-semi:   600;
    --peso-bold:   700;
    --peso-negro:  800;

    --lh-hero:   1.05;
    --lh-titulo: 1.15;
    --lh-card:   1.45;
    --lh-texto:  1.65;

    --track-hero:   -.04em;
    --track-h2:     -.03em;
    --track-h3:     -.02em;
    --track-normal: 0;

    /* Color del texto por contexto */
    --texto-card:  #344054;
    --texto-desc:  #667085;
    --texto-gral:  #475467;
    --texto-hero:  rgba(255, 255, 255, .80);
    --texto-footer:rgba(255, 255, 255, .75);

    /* ---------- Espaciado (escala de 4) ---------- */
    --e-1: 4px;    --e-2: 8px;    --e-3: 12px;   --e-4: 16px;
    --e-5: 20px;   --e-6: 24px;   --e-7: 28px;   --e-8: 32px;
    --e-9: 36px;   --e-10: 40px;  --e-12: 48px;  --e-14: 56px;
    --e-16: 64px;  --e-20: 80px;  --e-24: 96px;

    /* El aire entre secciones es lo que separa una tienda de una
       experiencia. No reducir. */
    --e-seccion: 120px;
    --e-hero:    140px;

    /* ---------- Radios ---------- */
    --r-card:  22px;
    --r-input: 16px;
    --r-btn:   16px;
    --r-hero:  32px;
    --r-sm:    10px;
    --r-full:  999px;

    /* ---------- Layout ---------- */
    --ancho-max:  1440px;
    --ancho:      1320px;
    --lateral:    64px;
    --alto-header: 88px;

    /* ---------- Capas ----------
       Escala declarada para que nadie invente un z-index de 9999. */
    --z-base: 10;
    --z-flotante: 20;
    --z-barra: 30;
    --z-header: 50;

    /* ---------- Movimiento ---------- */
    --t-rapido: 200ms;
    --t-medio:  300ms;
    --t-lento:  500ms;
    --curva:     cubic-bezier(.4, 0, .2, 1);
    --curva-out: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 1024px) {
    :root { --lateral: 32px; --e-seccion: 88px; --e-hero: 96px; }
}

@media (max-width: 640px) {
    :root {
        --lateral: 20px;
        --e-seccion: 72px;
        --e-hero: 72px;
        --txt-3xl: 1.875rem;
        --alto-header: 68px;
    }
}

/* Quien pide menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    :root { --t-rapido: 1ms; --t-medio: 1ms; --t-lento: 1ms; }

    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}