/* ============================================================
   LOGÍSTICA M — Design Tokens
   Fuente única de verdad para color, tipografía, espaciado,
   radios, sombras y componentes base (botones, etiquetas).
   Importar este archivo en cualquier página del sitio.
   ============================================================ */

:root {
  /* ---------- COLOR · Marca ---------- */
  --navy:          #1B3D6E;   /* Azul marca · isotipo, acentos sobre claro */
  --navy-deep:     #0F2545;   /* Fondo principal del sitio */
  --navy-darkest:  #070D1A;   /* Footer, fondos más profundos */
  --ink:           #0A0F1C;   /* Secciones alternas, base del preloader */

  /* ---------- COLOR · Acento ---------- */
  --coral:         #FF6340;   /* Acción primaria · CTAs, links, líneas guía */
  --coral-hover:   #FF7754;   /* Hover de coral */
  --on-coral:      #070D1A;   /* Texto/íconos sobre relleno coral (AAA 6.6:1) */
  --ml-yellow:     #FFE600;   /* Integraciones (Mercado Libre, etc.) — uso puntual */
  --active-green:  #34D399;   /* Éxito, tracking en vivo, "asegurado" */

  /* ---------- COLOR · Neutros ---------- */
  --white:         #FFFFFF;
  --off-white:     #F5F4F0;   /* Fondo claro de marca (cálido, no blanco puro) */

  /* ---------- COLOR · Texto / líneas sobre fondo oscuro ---------- */
  --text:          rgba(255,255,255,1);
  --text-muted:    rgba(255,255,255,0.70);
  --text-faint:    rgba(255,255,255,0.60);   /* subido de .45 → AA ≥4.5:1 sobre navy-deep */
  --line:          rgba(255,255,255,0.10);
  --line-strong:   rgba(255,255,255,0.20);
  --surface:       rgba(255,255,255,0.04);   /* Cards / paneles sobre navy */
  --surface-hover: rgba(255,255,255,0.06);

  /* ---------- Tints utilitarios (fondos suaves de acento) ---------- */
  --coral-tint:    rgba(255,99,64,0.12);
  --green-tint:    rgba(52,211,153,0.15);
  --yellow-tint:   rgba(255,230,0,0.12);

  /* ---------- TIPOGRAFÍA ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Escala fluida (clamp: mín · ideal · máx) */
  --fs-display: clamp(2.4rem, 5vw,   4.2rem);  /* Títulos hero / página */
  --fs-h2:      clamp(1.8rem, 3.4vw, 2.8rem);  /* Títulos de sección */
  --fs-h3:      1.3rem;
  --fs-lead:    clamp(1.1rem, 1.6vw, 1.4rem);  /* Bajadas / lead */
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;
  /* Pesos */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;
  /* Tracking (los títulos van apretados; los eyebrows abiertos) */
  --track-tight:  -0.03em;
  --track-snug:   -0.01em;
  --track-wide:    0.16em;

  /* ---------- ESPACIADO (múltiplos de 4) ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 56px;
  --space-9: 80px;  --space-10: 120px;
  --maxw: 1200px;
  --pad-x: 56px;          /* padding horizontal de secciones (desktop) */
  --pad-x-mobile: 22px;

  /* ---------- RADIOS ---------- */
  --r-sm:  8px;    /* botones chicos, brand-mark */
  --r-md:  10px;   /* botones, inputs */
  --r-lg:  18px;   /* cards */
  --r-xl:  20px;   /* form-card */
  --r-pill: 999px; /* pills, floating CTA */

  /* ---------- SOMBRAS ---------- */
  --shadow-coral:   0 4px 16px rgba(255,99,64,0.25);
  --shadow-coral-h: 0 10px 28px rgba(255,99,64,0.40);
  --shadow-card:    0 18px 50px rgba(0,0,0,0.40);
  --shadow-float:   0 8px 32px rgba(0,0,0,0.45);

  /* ---------- MOVIMIENTO ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.22s;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-sans);
  background: var(--navy-deep);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   ETIQUETA "EYEBROW" — antecede a los títulos de sección
   <span class="eyebrow">Texto</span>  ·  variante .green
   ============================================================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--coral);
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.eyebrow.green  { color: var(--active-green); }
.eyebrow.yellow { color: var(--ml-yellow); }

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  border: none; border-radius: var(--r-md); cursor: pointer;
  font-family: inherit; font-weight: var(--fw-semi);
  letter-spacing: var(--track-snug);
  transition: all var(--dur) var(--ease);
}
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* Primario — coral lleno */
.btn-coral {
  background: var(--coral); color: var(--on-coral);
  padding: 16px 34px; font-size: 1rem;
  box-shadow: var(--shadow-coral);
}
.btn-coral:hover { background: var(--coral-hover); transform: translateY(-2px); box-shadow: var(--shadow-coral-h); }

/* Secundario — fantasma sobre fondo oscuro */
.btn-ghost {
  background: var(--surface); color: var(--white);
  border: 1px solid var(--line-strong);
  padding: 15px 32px; font-size: 1rem;
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.40); }

/* Compacto — navbar */
.btn-sm {
  background: var(--coral); color: var(--on-coral);
  padding: 11px 22px; font-size: var(--fs-sm); border-radius: var(--r-sm);
}
.btn-sm:hover { background: var(--coral-hover); transform: translateY(-1px); }

/* Bloque — submit de formularios */
.btn-block {
  width: 100%; justify-content: center;
  background: var(--coral); color: var(--on-coral);
  padding: 16px; font-size: 1rem; box-shadow: var(--shadow-coral);
}
.btn-block:hover { background: var(--coral-hover); transform: translateY(-2px); }

/* Pill flotante — CTA fijo */
.btn-pill {
  background: var(--coral); color: var(--on-coral);
  padding: 14px 24px; border-radius: var(--r-pill);
  font-size: 0.9rem; box-shadow: var(--shadow-float);
}
.btn-pill:hover { background: var(--coral-hover); transform: translateY(-3px); }

/* Borde animado — la "línea de luz" que recorre el contorno.
   Detalle de marca para CTAs destacados (hero, "Discover our solutions"). */
.btn-line {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 34px; border-radius: var(--r-md);
  font-family: inherit; font-weight: var(--fw-semi); font-size: 1rem;
  letter-spacing: var(--track-snug);
  color: var(--white); background: var(--navy-deep);
  cursor: pointer; border: none;
  transition: background var(--dur) var(--ease);
}
.btn-line::before {            /* halo de luz girando */
  content: ""; position: absolute; inset: -2px; z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--ang, 0deg),
      transparent 0turn, var(--coral) 0.12turn, transparent 0.30turn,
      transparent 0.62turn, var(--white) 0.74turn, transparent 0.92turn);
  animation: btn-line-spin 4s linear infinite;
}
.btn-line::after {             /* relleno interior, deja ver sólo el borde */
  content: ""; position: absolute; inset: 1.5px; z-index: -1;
  border-radius: inherit; background: var(--navy-deep);
}
.btn-line:hover { background: var(--navy); }
.btn-line:hover::after { background: var(--navy); }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes btn-line-spin { to { --ang: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .btn-line::before { animation: none; }
}

/* Toggle (segmentado) — usado en formularios (WhatsApp / Mail) */
.toggle-opt {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03);
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semi);
  color: var(--white); cursor: pointer; transition: all var(--dur) var(--ease);
}
.toggle-opt:hover { border-color: rgba(255,255,255,0.35); }
.toggle-opt.active { border-color: var(--coral); background: var(--coral-tint); }

/* ============================================================
   FOCO DE TECLADO (accesibilidad) — anillo visible al navegar con Tab
   ============================================================ */
.btn:focus-visible,
.btn-line:focus-visible,
.toggle-opt:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* Sobre fondos claros, el anillo blanco no se ve: usar navy */
.on-light :focus-visible { outline-color: var(--navy); }

/* ============================================================
   SKIP LINK — "saltar al contenido" (WCAG 2.4.1 Bypass Blocks)
   Oculto fuera de pantalla hasta recibir foco con Tab.
   ============================================================ */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 2000;
  transform: translateY(-150%);
  background: var(--coral); color: var(--on-coral);
  padding: 12px 20px; border-radius: var(--r-md);
  font-weight: var(--fw-semi); box-shadow: var(--shadow-coral);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); outline: 3px solid var(--white); outline-offset: 3px; }