/* ═══════════════════════════════════════════════════════════════════
   Tokens · Landing Punto de Venta by OnLab
   Identidad cromática OnLab 2026 (misma paleta que el portal y la demo):
     AZUL PROFUNDO = estructura · AQUA = tecnología/interacción
     CORAL = acción/energía · PETRÓLEO = estados activos e iconos informativos
     GRISES CLAROS = fondo y superficies (sin crema, beige ni café en la identidad)
   AA verificado: texto blanco NUNCA sobre coral (3.0:1) ni aqua (1.8:1);
   sobre ellos el texto va en azul profundo (5.5:1 y 9.3:1). Como texto
   sobre claro se usan las variantes -ink.
   ═══════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/figtree-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Marca */
  --brand-coral:        #FF5B6E;
  --brand-aqua:         #00D4FF;
  --brand-navy:         #0B1F3B;
  --brand-petrol:       #0F6B78;  /* blanco encima 6.19:1; icono y texto sobre claro ≥ 5.2:1 */
  --brand-light-gray:   #F3F5F7;  /* gris claro principal: fondo y superficies suaves */
  --brand-soft-gray:    #EEF2F5;  /* gris claro secundario: superficies intermedias */
  --brand-border-gray:  #E2E8EE;  /* bordes y divisores */

  /* Paleta (roles) */
  --c-bg:             var(--brand-light-gray); /* gris claro · fondo */
  --c-ink:            #102033;            /* texto oscuro (15.1:1 sobre gris claro) */
  --c-ink-2:          #425466;            /* texto secundario (≥ 6.3:1 sobre blanco y los tres grises) */
  --c-surface:        #FFFFFF;
  --c-surface-2:      var(--brand-soft-gray); /* bloques secundarios */
  --c-line:           var(--brand-border-gray); /* bordes y divisores */
  --c-line-strong:    #C4C9D0;            /* azul profundo 24 % */

  --c-primary:        var(--brand-coral); /* coral · rellenos, bordes, iconos grandes */
  --c-primary-strong: var(--brand-coral); /* relleno del CTA (texto azul profundo 5.48:1) */
  --c-primary-hover:  #F05667;            /* hover del CTA (azul profundo 4.89:1) */
  --c-primary-ink:    #B03F4C;            /* coral como texto sobre claro (≥ 4.65:1 sobre blanco y los tres grises) */
  --c-primary-soft:   #FFE5E4;
  --c-on-primary:     var(--brand-navy);  /* texto sobre coral */

  --c-aqua:           var(--brand-aqua);  /* aqua · rellenos interactivos (texto azul profundo 9.31:1) */
  --c-aqua-strong:    #049AC0;            /* bordes, iconos y texto grande sobre claro (≥ 3:1) */
  --c-aqua-ink:       #066F90;            /* enlaces y texto sobre claro (≥ 4.62:1 sobre blanco y los tres grises) */

  --c-on-fill:        #FFFFFF;            /* texto sobre rellenos oscuros (azul profundo) */
  --c-on-dark:        #FFFFFF;            /* sobre azul profundo (16.5:1) */
  --c-on-dark-2:      #C2C7CE;            /* texto secundario sobre azul profundo (9.7:1) */

  /* «Punto de Venta by OnLab» (marca tipográfica): misma forma y texto, colores de la identidad 2026 */
  --logo-ink:         var(--brand-navy);   /* 16.5:1 sobre blanco */
  --logo-accent:      var(--brand-petrol); /* «by OnLab»: 5.66:1 sobre gris claro */

  /* Tipografía */
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-sm:   0.9375rem;   /* 15 px · solo metadatos */
  --fs-md:   1.0625rem;   /* 17 px · cuerpo */
  --fs-lg:   1.25rem;     /* 20 px · entradillas */
  --fs-xl:   1.5rem;      /* 24 px */
  --fs-h3:   1.375rem;    /* 22 px */
  --fs-h2:   clamp(2rem, 1.35rem + 2.2vw, 3rem);          /* 32 → 48 px */
  --fs-h1:   clamp(2.5rem, 1.4rem + 4.2vw, 4.5rem);       /* 40 → 72 px */
  --lh-tight: 1.08;
  --lh-head:  1.15;
  --lh-body:  1.6;

  /* Espacio: la landing respira más que la aplicación */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;
  --section-y: clamp(72px, 5vw + 48px, 144px);
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Forma */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11, 31, 59, .06), 0 1px 1px rgba(11, 31, 59, .04);
  --shadow-2: 0 12px 32px -12px rgba(11, 31, 59, .22);
  --shadow-3: 0 30px 60px -24px rgba(11, 31, 59, .30);
  --focus-ring: 0 0 0 3px var(--c-bg), 0 0 0 6px var(--c-aqua-ink);

  --header-h: 72px;
  --t-fast: 160ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}