/* Valsol - tokens de diseno
   Colores oficiales tomados del logo (Valsol logo.png):
   #053156 azul principal, #8F0C3E guinda, #141F43 azul oscuro. */
:root{
  /* Color */
  --color-marca: #053156;          /* logo: azul principal */
  --color-marca-profundo: #141F43; /* logo: azul oscuro */
  --color-acento: #8F0C3E;         /* logo: guinda */
  --color-fondo: #FFFFFF;
  --color-apoyo: #F3F4F7;
  --color-texto: #141F43;
  --color-texto-suave: #4F5873;
  --color-linea: #DCDFE7;
  --color-sobre-marca: #FFFFFF;
  --color-sobre-marca-suave: rgba(255,255,255,.8);

  /* Tipografia */
  --font-display: "Proza Libre", "Segoe UI", Arial, sans-serif;
  --fw-titulo: 500;
  --fw-parrafo: 300;
  --font-texto: "Lexend", "Segoe UI", Arial, sans-serif;
  --lh-texto: 1.45;
  --lh-parrafo-grande: 1.18;
  --lh-titulo: .96;
  --lh-hero: 1;
  --lh-tarjeta: 1.02;
  --fs-xs: .8125rem;
  --fs-s: .9375rem;
  --fs-campo: 1rem;
  --fs-m: 1.0625rem;
  --fs-l: 1.375rem;
  --fs-l2: clamp(1.5rem, 2.2vw, 1.875rem);
  --fs-xl: clamp(1.75rem, 3.2vw, 2.5rem);
  --fs-xxl: clamp(2.5rem, 6vw, 4.75rem);

  /* Espaciado */
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px;
  --s-5: 40px; --s-6: 64px; --s-7: 120px;

  /* Layout */
  --ancho-max: 1200px;
  --ancho-max-portada: 1440px;
  --ancho-logo-portada: 820px;
  --alto-menu: 92px;
  --gutter: clamp(20px, 4vw, 40px);
  /* Velo blanco sobre la foto de la portada: arriba para que el logo se lea, abajo deja ver el almacen */
  --velo-arriba: .78;
  --velo-medio: .5;
  --velo-abajo: .2;

  /* Forma */
  --radio-panel: 28px;
  --radio-tarjeta: 20px;
  --radio-tarjeta-chica: 14px;
  --radio-campo: 10px;
  --radio-pill: 999px;

  /* Movimiento */
  --ease: cubic-bezier(.16,1,.3,1);
}