/* eVoost · Vecto Kit · tokens.css
   Tokens extraidos de los CSS reales de la demo Vecto (vecto.css, extras.css, seal.css, home-light.css, final.css, progress.css, buyer.css).
   Cada valor tiene su origen entre corchetes. Prefijo --vk- para no chocar con Tailwind / WordPress / el tema de private.
   Nada inventado: lo que viene solo del BRIEF (no aparece en el CSS de la demo) esta marcado como [brief]. */

/* Fuentes: carga una vez (Google Fonts). En WordPress/Next pasalas por el sistema de fuentes del proyecto.
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Unbounded:wght@300;400;500;600;700&family=Outfit:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"> */

:root {
  color-scheme: light;

  /* ───────── color · marca ───────── */
  --vk-navy: #0B2545;            /* [vecto.css] fondo de marca, avatares, botones oscuros */
  --vk-navy-2: #0F172A;          /* [vecto.css] texto fuerte / marco del movil */
  --vk-navy-3: #12315E;          /* [progress.css] hover del boton oscuro */
  --vk-brand: #579BFF;           /* [vecto.css] azul marca (el punto del hexagono) */
  --vk-brand-h: #3386FF;         /* [vecto.css] azul hex: celdas H3, linea de rejilla */
  --vk-brand-t: #0068FF;         /* [vecto.css] azul para texto sobre claro */
  --vk-brand-300: #A6CAFF;       /* [vecto.css] */
  --vk-brand-b: #CCE1FF;         /* [vecto.css] borde azul suave */
  --vk-brand-bg: #F2F7FF;        /* [vecto.css] fondo azul muy suave */
  --vk-blue-500: #2F6FDB;        /* [extras.css] final de degradados de boton/cromo */
  --vk-blue-600: #1E48BC;        /* [seal.css] cabecera de escaparate */
  --vk-blue-700: #12408F;        /* [extras.css] medio del degradado del cromo */
  --vk-blue-200: #8FBBFF;        /* [final.css] barra del motor, rampa de capas */
  --vk-blue-100: #EEF4FF;        /* [extras.css] inicio de rampa */
  --vk-blue-800: #1F5FD6;        /* [vecto.css/fifa.js] fin de rampa de capas */
  --vk-sky: #5B9BFF;             /* [vecto.css] glow de la apertura */

  /* ───────── color · oro = verificado ───────── */
  --vk-gold: #E4B84A;            /* [vecto.js] linea dorada del hexagono verificado en el mapa */
  --vk-gold-light: #FBF0B9;      /* [seal.css] inicio del degradado dorado */
  --vk-gold-mid: #E9BE4D;        /* [seal.css] */
  --vk-gold-dark: #B8860B;       /* [seal.css] */
  --vk-gold-ink: #5C3F05;        /* [es.html] tilde del sello */
  --vk-gold-stroke: #8A6410;     /* [es.html] contorno del sello */
  --vk-gold-text: #F3D77B;       /* [seal.css] texto «Verificado» sobre oscuro */
  --vk-gold-text-soft: #FBE9A6;  /* [seal.css] */
  --vk-gold-gradient: linear-gradient(135deg, #FBF0B9, #E9BE4D 55%, #B8860B);   /* [seal.css .cr-hex] */

  /* ───────── color · neutros (claro) ───────── */
  --vk-canvas: #F8FAFC;          /* [vecto.css] lienzo */
  --vk-canvas-warm: #FAF9F5;     /* [brief] fondo claro de los artifacts de eVoost; no esta en el CSS de la demo */
  --vk-map-bg: #EEF0F2;          /* [config.js/vecto.js] fondo del mapa sin base */
  --vk-home-bg: #F6F8FB;         /* [home-light.css] pantalla del dinero en claro */
  --vk-surface: #FFFFFF;
  --vk-surface-2: #F8FAFC;
  --vk-surface-3: #F1F5F9;
  --vk-dots: #D7DFEA;            /* [vecto.css] puntos del lienzo */
  --vk-fg: #0F172A;
  --vk-fg-2: #334155;
  --vk-fg-3: #4F5F75;            /* [Quorum, accesibilidad] antes #64748B (4,3-4,4:1); ahora ≥ 5,9:1 sobre #F1F5F9, #F6F7F3 y #EEF9F4 */
  --vk-fg-4: #5A6A80;            /* [Quorum, accesibilidad] antes #94A3B8 (2,6:1); ahora ≥ 4,8:1 sobre blanco y los fondos claros */
  --vk-line: #E2E8F0;
  --vk-line-ctl: #738399;        /* [Quorum, accesibilidad] antes #CBD5E1 (1,5:1); borde de campos y chips ≥ 3:1 (WCAG 1.4.11) */
  --vk-ink-home: #0E1A2E;        /* [home-light.css] texto de la pantalla clara */

  /* ───────── color · superficie oscura (portal, stories, apertura) ───────── */
  --vk-dark: #0B1220;            /* [extras.css .portal/.home] */
  --vk-dark-2: #0F2A4F;          /* [buyer.css .pt-slide.dark] */
  --vk-on-dark: #E8F0FF;
  --vk-on-dark-2: #CFDAEA;
  --vk-on-dark-3: #8EA1BA;

  /* ───────── color · estado ───────── */
  --vk-ok: #059669;              /* [vecto.css] */
  --vk-ok-dot: #10B981;
  --vk-ok-soft: #34D399;
  --vk-warn: #8A5A00;            /* [Quorum, accesibilidad] antes #F59E0B (2:1 sobre amarillo claro); es texto, no relleno: 5,4:1 sobre #FFF4DA */
  --vk-sun: #F2B84B;             /* [extras.css] luz del plano */

  /* ───────── color · hexagonos del mapa [vecto.js initMap] ───────── */
  --vk-hex-fill: #3386FF;        /* promocion normal */
  --vk-hex-dim: #CBD5E1;         /* apagado / no encaja */
  --vk-hex-echo: #8CB9FF;        /* ondas del latido y escaneo */
  --vk-hex-grid-line: #3386FF;   /* rejilla (opacidad .22) */
  --vk-hex-verified-line: #E4B84A; /* borde dorado = verificado */

  /* ───────── color · estados de unidad (edificio 3D, version clara) [home-light.css] ───────── */
  --vk-unit-available: #7FB0FF;
  --vk-unit-prebooked: #B7C6E3;
  --vk-unit-reserved: #8394B3;
  --vk-unit-sold: #D7DDE8;
  --vk-unit-selected: #1D4ED8;
  --vk-unit-selected-ring: #F2B84B;
  /* version oscura [extras.css] */
  --vk-unit-available-dk: #A6CAFF;
  --vk-unit-prebooked-dk: #6F86B3;
  --vk-unit-reserved-dk: #46587A;
  --vk-unit-sold-dk: #1E293B;

  /* ───────── tipografia ───────── */
  --vk-font-text: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;            /* [vecto.css --f] */
  --vk-font-display: "Unbounded", var(--vk-font-text);                                /* cromos, cifras grandes, claim */
  --vk-font-headline: "Outfit", var(--vk-font-text);                                  /* titulares (wordmark de promotor) */
  --vk-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;                   /* [vecto.css --mono] datos */
  /* escala observada */
  --vk-fs-micro: 8.5px;          /* etiquetas de cromo */
  --vk-fs-caption: 11px;         /* kickers en mayusculas, notas */
  --vk-fs-small: 12.5px;
  --vk-fs-body: 14px;
  --vk-fs-body-l: 15px;
  --vk-fs-title-s: 17px;
  --vk-fs-title: 25px;           /* h2 de la hoja */
  --vk-fs-title-l: 26px;         /* h3 del panel */
  --vk-fs-hero: 33px;            /* titular del anuncio */
  --vk-fs-stat: 46px;            /* % de encaje del cromo (Unbounded) */
  --vk-tracking-caps: .12em;     /* kickers */
  --vk-tracking-title: -.02em;

  /* ───────── radios [observados] ───────── */
  --vk-r-xs: 3px;
  --vk-r-sm: 10px;
  --vk-r-md: 14px;
  --vk-r-lg: 16px;
  --vk-r-xl: 20px;               /* paneles, tarjetas */
  --vk-r-2xl: 22px;              /* cromo, tray, escaparate */
  --vk-r-3xl: 30px;              /* hoja del asistente */
  --vk-r-phone: 54px;            /* marco del movil */
  --vk-r-pill: 999px;

  /* ───────── sombras ───────── */
  --vk-sh-sm: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10);
  --vk-sh-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.06);
  --vk-sh-lg: 0 12px 16px -4px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.03), 0 2px 2px -1px rgba(0,0,0,.04);
  --vk-sh-xl: 0 28px 48px -12px rgba(15,23,42,.28), 0 8px 16px -8px rgba(15,23,42,.14);
  --vk-sh-brand: 0 6px 14px -2px rgba(87,155,255,.40);
  --vk-sh-card: 0 20px 38px -10px rgba(11,37,69,.6), 0 0 0 1px rgba(255,255,255,.22) inset;                 /* [extras.css .fifa] */
  --vk-sh-card-verified: 0 22px 40px -10px rgba(11,37,69,.6), 0 0 0 1.5px rgba(233,190,77,.95) inset, 0 0 34px rgba(233,190,77,.32); /* [seal.css] */
  --vk-sh-card-hi: 0 22px 44px -10px rgba(11,37,69,.65), 0 0 0 1.5px #A6CAFF inset, 0 0 44px rgba(87,155,255,.5);                    /* [extras.css .fifa.hi] */
  --vk-sh-cta: 0 12px 28px -8px rgba(47,111,219,.8);                                                           /* [extras.css .cta-main] */

  /* ───────── gradientes ───────── */
  --vk-grad-card: radial-gradient(120% 70% at 100% 0, rgba(140,185,255,.6), transparent 60%), linear-gradient(165deg, #0B2545 0, #12408F 55%, #2F6FDB 100%); /* [extras.css .fifa] */
  --vk-grad-card-zone: radial-gradient(120% 70% at 100% 0, rgba(140,220,255,.4), transparent 60%), linear-gradient(165deg, #0F172A 0, #1E3A5F 60%, #3B6EA8 100%);
  --vk-grad-card-basic: linear-gradient(165deg, #334155, #64748B);
  --vk-grad-cta: linear-gradient(135deg, #579BFF, #2F6FDB);
  --vk-grad-progress: linear-gradient(90deg, #579BFF, #2F6FDB);                                                 /* [progress.css] */
  --vk-grad-progress-done: linear-gradient(90deg, #34D399, #059669);
  --vk-ramp: linear-gradient(90deg, #EEF4FF, #8FBBFF, #1F5FD6);                                                 /* [extras.css .ramp] */

  /* ───────── glass [vecto.css .glass] ───────── */
  --vk-glass-bg: rgba(255,255,255,.80);
  --vk-glass-bg-strong: rgba(255,255,255,.94);                                                                  /* [seal.css .escap] */
  --vk-glass-border: 1px solid rgba(255,255,255,.7);
  --vk-glass-filter: blur(16px) saturate(1.4);
  --vk-glass-dark-bg: rgba(15,23,42,.64);                                                                       /* [story.css .hs em] */
  --vk-glass-dark-filter: blur(8px);

  /* ───────── easing y duraciones [vecto.css] ───────── */
  --vk-ease-out: cubic-bezier(.23, 1, .32, 1);       /* UI que se repite: entradas, :active */
  --vk-ease-io: cubic-bezier(.77, 0, .175, 1);       /* portal, trazo del hexagono */
  --vk-ease-drawer: cubic-bezier(.32, .72, 0, 1);    /* hoja deslizante */
  --vk-ease-portal-close: cubic-bezier(.23, 1, .32, 1);
  --vk-dur-press: .16s;          /* feedback :active (scale .97) */
  --vk-dur-fast: .22s;           /* fundidos de pantalla, fin de carta */
  --vk-dur-base: .28s;           /* entradas escalonadas */
  --vk-dur-slow: .5s;            /* warp del mapa */
  --vk-dur-portal: 720ms;        /* el hexagono crece hasta ser ventana */
  --vk-dur-portal-close: 320ms;
  --vk-dur-flyto: 2400ms;        /* vuelo de camara */
  --vk-dur-beat: 1500ms;         /* periodo del latido lub-dub */
  --vk-stagger: 60ms;            /* paso del escalonado (60–90 ms segun brief) */

  /* ───────── mapa / 3D (constantes de diseno) ───────── */
  --vk-h3-res: 9;                /* celdas de ~0,1 km2 */
  --vk-phone-w: 390px;
  --vk-phone-h: 844px;
  --vk-ps: 1;                    /* escala del movil, la fija presenter.js */
}

/* Respeta prefers-reduced-motion: duraciones casi nulas para todo lo que use los tokens */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vk-dur-press: .01s; --vk-dur-fast: .01s; --vk-dur-base: .01s; --vk-dur-slow: .01s;
    --vk-dur-portal: 160ms; --vk-dur-portal-close: 160ms; --vk-dur-flyto: 0ms; --vk-stagger: 0ms;
  }
}

/* Utilidades de tokens compartidas por los modulos */
.vk-glass {
  background: var(--vk-glass-bg);
  -webkit-backdrop-filter: var(--vk-glass-filter); backdrop-filter: var(--vk-glass-filter);
  border: var(--vk-glass-border); box-shadow: var(--vk-sh-lg);
}
.vk-hexclip { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }