/* ==========================================================================
   WorkE · Tokens de diseño
   --------------------------------------------------------------------------
   Valores extraídos de producción (worke.es) el 2026-07-29.
   Origen: paleta global de Astra, replicada por Elementor como
   --e-global-color-astglobalcolor*.

   Este archivo es la ÚNICA fuente de valores. lab.css consume estas
   variables y no define ningún color, tamaño ni espaciado por su cuenta.

   Correspondencia con producción, para la traducción posterior a Astra:
     --worke-color-primary       ←→  --ast-global-color-0
     --worke-color-primary-dark  ←→  --ast-global-color-1
     --worke-color-heading       ←→  --ast-global-color-2
     --worke-color-text          ←→  --ast-global-color-3
     --worke-color-surface       ←→  --ast-global-color-4
     --worke-color-surface-alt   ←→  --ast-global-color-5
     --worke-color-border        ←→  --ast-global-color-7
   ========================================================================== */

:root {
  /* --- Color -------------------------------------------------------------- */
  --worke-color-primary: #046bd2;
  --worke-color-primary-dark: #045cb4;

  /* Variante profunda del azul corporativo, para grandes superficies de
     fondo. Mismo tono (212° frente a 210°), saturación reducida del 96 %
     al 58 % y luminosidad del 42 % al 27 %. No es un color nuevo de marca:
     es el mismo azul apagado y oscurecido para que una banda completa no
     resulte agresiva. No existe en la paleta global de Astra, así que al
     llevarlo a producción habrá que darlo de alta o aplicarlo como CSS. */
  --worke-color-primary-deep: #1d426d;
  --worke-color-heading: #1e293b;
  --worke-color-text: #334155;
  --worke-color-surface: #ffffff;
  --worke-color-surface-alt: #f0f5fa;
  --worke-color-border: #d1d5db;

  /* Dorado de valoración. Deliberadamente NO es el azul corporativo: la
     estrella dorada es una convención universal de reseña y sustituirla por
     el color de marca hace que deje de leerse como valoración.
     Es el dorado exacto de Google Reviews, hsl(45, 97%, 50%). Se elige el
     valor literal y no una variante propia porque aquí el objetivo es el
     reconocimiento inmediato: cualquier desviación del tono al que el usuario
     está acostumbrado resta identificación sin aportar nada.
     Contraste: 1,56:1 sobre el fondo de la tarjeta. Es bajo y es una decisión
     deliberada, no un descuido. Las estrellas son decorativas, van con
     `aria-hidden` y llevan la alternativa textual «Valoración: 5 de 5»: la
     valoración se comunica por texto, nunca por color, así que el mínimo de
     3:1 para gráficos no les aplica.
     **No reutilizar este token para nada que transmita información**, ni para
     texto, ni para iconos con significado, ni para bordes o estados. Fuera de
     las estrellas decorativas incumpliría el contraste.
     No existe en la paleta global de Astra: al pasar a producción habrá que
     darlo de alta, igual que --worke-color-primary-deep. */
  --worke-color-star: #fbbc04;

  /* Derivados para estados. Se calculan sobre el primario, no se inventan. */
  --worke-color-primary-soft: rgba(4, 107, 210, 0.08);
  --worke-color-focus: #046bd2;

  /* TERCERA superficie, para una banda que debe distinguirse de las dos que ya
     existen. NO es un color nuevo de marca: es el GEMELO CLARO de
     --worke-color-primary-deep. Mismo tono (212°), misma saturación (58 %) y
     la luminosidad sube del 27 % al 88 %. La banda de oferta y la banda de
     cierre son el mismo color a dos alturas.

     Se dio de alta porque ninguna superficie existente diferenciaba, y está
     medido en ΔE (CIE76: <2 imperceptible, >10 diferencia clara):
       surface-alt ................ ΔE  0,0  es el fondo del hero
       primary-soft sobre blanco .. ΔE  2,0  apenas distinguible del hero
       surface (blanco) ........... ΔE  4,8  y choca con la sección siguiente
       ESTE token ................. ΔE 11,5 frente al hero · 16,3 frente al blanco
     Es decir, se separa de sus vecinas más del doble de lo que se separan
     entre sí las secciones actuales, que van a ΔE 4,8.

     ⚠ CONTRASTE: sobre este fondo, --worke-color-primary da 3,84:1 y NO llega
     al 4,5:1 exigido a un texto de 15px en negrita. Los rótulos que vayan
     encima usan --worke-color-primary-dark, que da 4,85:1. El texto de título
     da 10,8:1 y el de párrafo 7,6:1.

     No existe en la paleta global de Astra: al pasar a producción habrá que
     darlo de alta, igual que --worke-color-primary-deep y --worke-color-star. */
  --worke-color-surface-accent: #cfdff2;

  /* --- Tipografía --------------------------------------------------------- */
  /* Stack del sistema: es el que usa Astra hoy. No hay fuente de marca. */
  --worke-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  --worke-font-size-body: 1rem;      /* 16px */
  --worke-font-size-nav: 1rem;       /* 16px */
  --worke-font-size-small: 0.9375rem;/* 15px */
  --worke-font-size-h1: 2.25rem;     /* 36px */
  --worke-font-size-h2: 1.875rem;    /* 30px */
  --worke-font-size-h3: 1.5rem;      /* 24px */
  --worke-font-size-h4: 1.25rem;     /* 20px */
  --worke-font-size-h5: 1.125rem;    /* 18px */

  /* Tamaño del nombre de marca en el logotipo. Está FUERA de la escala
     tipográfica a propósito: no es texto de contenido, es un elemento de
     identidad fijo. Los 26px son el valor real de producción, donde Astra lo
     aplica a `.site-title`. */
  --worke-brand-font-size: 1.625rem;   /* 26px */

  --worke-letter-spacing-eyebrow: 0.08em;

  --worke-line-height-body: 1.65;
  --worke-line-height-heading: 1.3;
  --worke-font-weight-heading: 600;
  --worke-font-weight-nav: 500;

  /* Completa la escala de pesos —500, 600, 700— en lugar de añadir un valor
     suelto. Se usa solo donde un titular debe pesar más que un título de
     sección sin ocupar el escalón de tamaño del h1, que en la portada está
     reservado (D-33). Hoy su único consumidor es el titular de la banda de
     oferta: es el patrón que señala el hallazgo B-03 y se acepta a sabiendas,
     porque el valor pertenece a una escala y no es arbitrario. */
  --worke-font-weight-strong: 700;

  /* --- Espaciado ---------------------------------------------------------- */
  --worke-space-xs: 0.25rem;   /* 4px  */
  --worke-space-sm: 0.5rem;    /* 8px  */
  --worke-space-md: 1rem;      /* 16px */
  --worke-space-lg: 1.5rem;    /* 24px */
  --worke-space-xl: 2rem;      /* 32px */
  --worke-space-2xl: 3rem;     /* 48px */

  /* --- Estructura --------------------------------------------------------- */
  --worke-container-width: 1200px;
  --worke-container-padding: 1.25rem;

  /* Ancho de lectura cómodo para bloques de texto centrados. */
  --worke-measure: 42rem;

  /* Ancho de las superficies con campos de formulario. Un único valor para
     la pantalla de acceso y la previsualización del alta: las dos son la
     misma clase de superficie y deben medir lo mismo. */
  --worke-form-width: 30rem;

  /* Altura del logotipo. Cambiar SOLO este valor al sustituirlo por una
     versión horizontal: el ancho se ajusta solo y la estructura no se toca. */
  --worke-logo-height: 40px;
  --worke-header-height: 72px;

  /* --- Iconografía --------------------------------------------------------- */
  --worke-icon-box: 2.75rem;   /* 44px, contenedor del icono */
  --worke-icon-size: 1.375rem; /* 22px, trazo del SVG */
  --worke-marker-box: 1.75rem; /* 28px, indicador de lista */
  --worke-marker-size: 1rem;   /* 16px, trazo del indicador */
  --worke-step-box: 3rem;      /* 48px, numeral de paso */

  /* --- Controles de formulario -------------------------------------------- */
  --worke-control-padding-y: 0.625rem;
  --worke-control-padding-x: 0.75rem;

  /* --- Formas ------------------------------------------------------------- */
  --worke-radius-sm: 4px;
  --worke-radius-md: 6px;
  --worke-radius-lg: 8px;
  --worke-shadow-header: 0 1px 3px rgba(15, 23, 42, 0.08);
  --worke-shadow-panel: 0 4px 16px rgba(15, 23, 42, 0.1);

  /* Sombra de activo de producto. Es la ÚNICA del sistema sobre un elemento en
     flujo, y esa exclusividad es lo que la hace significar «esto es un activo
     real» y no «esto es un contenedor».

     No contradice §4.6.2 sino que cae fuera de su supuesto: aquella norma
     prohíbe la sombra en tarjetas porque «una tarjeta con sombra sugiere que se
     puede pulsar», y ese motivo no alcanza a una imagen.

     Misma tinta que las otras dos —rgba(15,23,42,…)—, así que no introduce
     color nuevo. El desplazamiento y el difuminado escalan con la pieza: sobre
     una imagen de 1200px, los 16px de --worke-shadow-panel son
     proporcionalmente invisibles. La opacidad sube de .1 a .12 porque debajo
     hay `surface-alt` y no blanco.

     RESTRICCIÓN, y no es una recomendación: SOLO en imágenes o vídeos reales
     del producto. Nunca en tarjetas, botones, formularios, paneles de contenido
     ni en el bloque de precio. Por eso se pide con el modificador
     `.lab-visual--producto` y no se hereda. Ver §4.6.2 y D-52. */
  --worke-shadow-visual: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* --- Movimiento --------------------------------------------------------- */
  --worke-transition: 150ms ease;
}

/* Breakpoints de referencia — coherentes con Astra.
   CSS no permite variables en @media, así que se documentan aquí y se
   escriben literales en lab.css. No cambiar uno sin cambiar el otro.

     Escritorio  : min-width 922px
     Tablet/móvil: max-width 921px   → el menú colapsa en hamburguesa
     Móvil       : max-width 544px
*/