/* ═══════════════════════════════════════════════════════════════
   V2GO — DESIGN TOKENS · OPCIÓN 3 «RED»

   El isotipo —la red de nodos que dibuja Colombia— pasa a ser el
   sistema gráfico de toda la página: trama de fondo, conectores
   entre secciones y bloques de color pleno alternos.
   Es la opción que más responde al «web muy visual con infografías».
   Sistema derivado del INSTAGRAM y de los banners reales de la marca
   (mismo diseñador). No es una dirección inventada: es el lenguaje
   que V2GO ya usa, traducido a web.

   LO QUE DICEN LAS PIEZAS REALES
   ──────────────────────────────
   · Lienzo CLARO. Nunca negro plano.
   · La foto real de V2GO es protagonista y se funde a blanco.
   · El navy NO es fondo: es FORMA — círculos y arcos grandes que
     entran por las esquinas y recortan la imagen. (Esto es lo que
     resuelve el «se ve muy cargado el azul»: el azul deja de ser
     una superficie y pasa a ser un gesto gráfico.)
   · El ámbar vive en PÍLDORAS de texto y en palabras sueltas.
   · Todo es redondo. Píldora completa, sin esquinas duras.
   · Una sola tipografía: Geomanist, mezclando Light + Bold +
     itálica dentro de la misma frase.
   · Detalles de marca: «Logística» en vertical al borde y
     «Movemos lo que te mueve» como firma.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ─── LIENZO ──────────────────────────────────────────────────
     Blanco roto cálido, como el de las piezas. Nunca #FFF puro en
     superficies grandes: cansa y se ve barato. */
  --blanco:      #FFFFFF;
  --hueso:       #FAF9F7;   /* lienzo principal */
  --hueso-2:     #F2F0EC;   /* secciones alternas */
  --arena:       #E8E4DC;   /* superficies y rellenos */
  --arena-2:     #D8D3C8;

  /* ─── NAVY DE MARCA (Pantone 7546C) ───────────────────────────
     Texto, formas orgánicas y píldoras. Fondo solo en dos momentos. */
  --navy:        #1B3240;
  --navy-hondo:  #12242F;
  --navy-suave:  #2F4A5B;
  --navy-70:     rgba(27, 50, 64, 0.72);
  --navy-50:     rgba(27, 50, 64, 0.52);
  --navy-22:     rgba(27, 50, 64, 0.22);
  --navy-12:     rgba(27, 50, 64, 0.12);
  --navy-06:     rgba(27, 50, 64, 0.06);

  /* ─── ÁMBAR (Pantone 7409C) ───────────────────────────────────
     Píldoras, palabras destacadas y formas. */
  --ambar:       #F7AE1F;
  --ambar-claro: #FCC94F;
  --ambar-hondo: #E6A524;   /* Pantone 124C, el tercero del brandbook */
  --ambar-texto: #8A5407;   /* ámbar legible como texto pequeño */
  --ambar-velo:  #FDF2DC;
  --ambar-12:    rgba(247, 174, 31, 0.12);

  /* ─── SOBRE FOTO ──────────────────────────────────────────────*/
  --sobre-foto:      #FFFFFF;
  --sobre-foto-70:   rgba(255, 255, 255, 0.78);

  --exito:       #1E7D4F;
  --alerta:      #C0392B;

  /* ═══ TIPOGRAFÍA ═══════════════════════════════════════════════
     UNA sola familia, como la marca. La jerarquía se hace con peso
     y con itálica, no metiendo fuentes nuevas.
     · Light 300  → titulares grandes (así son los banners reales)
     · Regular    → cuerpo
     · Itálica    → el gesto cálido de la marca
     · Bold 700   → énfasis dentro de la frase */
  --fuente: 'Geomanist', 'Helvetica Neue', Arial, sans-serif;

  /* Escala grande — la queja de «letra muy pequeña» se mantiene resuelta */
  --t-xs:    0.8125rem;  /* 13px */
  --t-sm:    0.9375rem;  /* 15px */
  --t-base:  1.0625rem;  /* 17px */
  --t-md:    1.1875rem;  /* 19px — CUERPO POR DEFECTO */
  --t-lg:    1.375rem;   /* 22px */
  --t-xl:    1.75rem;    /* 28px */
  --t-2xl:   2.25rem;    /* 36px */
  --t-3xl:   3rem;       /* 48px */
  --t-4xl:   3.75rem;    /* 60px */
  --t-5xl:   5rem;       /* 80px */
  --t-6xl:   6.5rem;     /* 104px */

  --p-light: 300;
  --p-book:  300;   /* el cliente no entregó el peso 400 real: se mapea a Light */
  --p-bold:  700;

  --lh-solid:   1;
  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-mega:  -0.028em;
  --ls-tight: -0.015em;
  --ls-norm:  0;
  --ls-wide:  0.04em;

  /* ═══ ESPACIADO ════════════════════════════════════════════════*/
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-7: 1.75rem;  --s-8: 2rem;
  --s-9: 2.25rem;  --s-10: 2.5rem;  --s-11: 2.75rem;
  --s-12: 3rem;    --s-14: 3.5rem;  --s-16: 4rem;    --s-20: 5rem;
  --s-24: 6rem;    --s-28: 7rem;    --s-32: 8rem;

  --sec-py:    clamp(4.5rem, 9vw, 8rem);
  --sec-py-lg: clamp(6rem, 12vw, 11rem);

  /* ═══ LAYOUT ═══════════════════════════════════════════════════*/
  --wrap:      1280px;
  --wrap-ancho:1480px;
  --pad-x:     clamp(1.25rem, 4vw, 3.5rem);
  --gutter:    clamp(1.25rem, 2.4vw, 2.5rem);

  /* ═══ FORMA — TODO REDONDO ═════════════════════════════════════
     Es la firma visual de las piezas: píldoras y círculos. */
  --r-sm:    10px;
  --r-md:    18px;
  --r-lg:    28px;
  --r-xl:    40px;
  --r-pill:  999px;

  /* ═══ SOMBRA — suave y cálida, nunca dura ══════════════════════*/
  --sh-suave: 0 10px 30px -14px rgba(27, 50, 64, 0.20);
  --sh-media: 0 24px 50px -24px rgba(27, 50, 64, 0.28);
  --sh-alta:  0 40px 80px -34px rgba(27, 50, 64, 0.34);

  /* ═══ MOVIMIENTO ═══════════════════════════════════════════════*/
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast: 180ms;  --d-base: 380ms;  --d-slow: 720ms;  --d-draw: 1700ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-draw: 1ms; }
}