/* =========================================================
   LOQUIERO — DESIGN SYSTEM TOKENS (FINAL)
   Versión: 2026
   Uso: Web · Checkout · UI · Emails
   Regla: un solo sistema, sin excepciones
   ========================================================= */

:root {

  /* ======================================================
     🎨 COLORES — CONTEXTO
     ====================================================== */

  --loq-canvas: #f5f5f7;     /* fondo general del sitio */
  --loq-surface: #ffffff;    /* cards, módulos, pasos */

  --loq-text: #1d1d1f;       /* texto principal */
  --loq-text-muted: #6e6e73; /* texto secundario */
  --loq-text-invert: #ffffff;

  --loq-border-soft: rgba(0,0,0,0.08);


  /* ======================================================
   💰 BENEFICIOS ECONÓMICOS (USO LIMITADO)
   ====================================================== */

--loq-success: #00a650; /* cuotas, ahorro, ventajas económicas */


  /* ======================================================
     💜 MARCA / ACCIONES
     ====================================================== */

  --loq-accent: #5a38e5;
  --loq-accent-hover: #4c2fd6;


  /* ======================================================
     🔤 TIPOGRAFÍA (GLOBAL · UNIFICADA)
     ====================================================== */

  --loq-font-family:
    "Plus Jakarta Sans",
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  /* Tamaños — SOLO 3 (desktop = mobile) */
  --loq-text-muted-size: 0.75rem;   /* ~12px → eyebrow, ayudas */
  --loq-text-base-size: 0.875rem;   /* ~14px → texto base */
  --loq-text-strong-size: 1.25rem;  /* ~20px → títulos de cards */

  /* Pesos */
  --loq-font-regular: 400;
  --loq-font-medium: 500;
  --loq-font-semibold: 600;


  /* ======================================================
     🔘 RADIOS (REGLA ESTRICTA)
     ====================================================== */

  --loq-radius-card: 18px;   /* TODAS las cards */
  --loq-radius-pill: 999px;  /* botones y badges */

  /* Regla:
     - NO inventar otros radios
     - pill solo en CTA / badges
  */


  /* ======================================================
     🌫️ SOMBRAS (TARJETAS BLANCAS FLOTANTES)
     ====================================================== */

  /* Card estándar */
  --loq-shadow-card:
    0 8px 24px rgba(0,0,0,0.10);

  /* Card protagonista / elevada */
  --loq-shadow-raised:
    0 16px 40px rgba(0,0,0,0.14);

  /* CTA */
  --loq-shadow-cta:
    0 18px 40px rgba(0,0,0,0.30);


  /* ======================================================
     📐 ESPACIADOS (RITMO VERTICAL)
     ====================================================== */

  --loq-space-1: 8px;    /* micro: label-input, icon-text */
  --loq-space-2: 16px;   /* base: bloques internos */
  --loq-space-3: 24px;   /* separación estándar */
  --loq-space-4: 40px;   /* cambio de sección */
  --loq-space-5: 56px;   /* respiración grande / hero */


  /* ======================================================
     ⏱️ TRANSICIONES
     ====================================================== */

  --loq-transition-base: 0.22s cubic-bezier(.4,0,.2,1);
}



/* ======================================================
   CHECKOUT — SISTEMA BASE (consume tokens)
   ====================================================== */

body.woocommerce-checkout {
  background: var(--loq-canvas);
  font-family: var(--loq-font-family);
  color: var(--loq-text);
}

.loq-checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--loq-space-3);
}

@media (min-width: 768px) {
  .loq-checkout-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.loq-stack {
  display: flex;
  flex-direction: column;
  gap: var(--loq-space-3);
}

.loq-card {
  background: var(--loq-surface);
  border-radius: var(--loq-radius-card);
  box-shadow: var(--loq-shadow-card);
  padding: var(--loq-space-3);
}

.loq-card--raised { box-shadow: var(--loq-shadow-raised); }
.loq-cta-card { box-shadow: var(--loq-shadow-cta); }

.loq-btn-primary {
  border: 0;
  border-radius: var(--loq-radius-pill);
  padding: 12px 28px;
  font-size: var(--loq-text-base-size);
  font-weight: var(--loq-font-semibold);
  color: var(--loq-text-invert);
  background: var(--loq-accent);
  transition: var(--loq-transition-base);
  cursor: pointer;
}
.loq-btn-primary:hover {
  background: var(--loq-accent-hover);
}