/*
  Valedi: variables de diseño.
  Paleta PROVISIONAL. Los colores definitivos se eligen más adelante:
  para cambiarlos basta con editar este archivo.
*/
:root {
  /* Color: fondos */
  --color-bg: #ffffff;
  --color-bg-alt: #f2f3f3;
  --color-dark: #25292e;

  /* Color: texto */
  --color-text: #1d2024;
  --color-text-muted: #555c64;
  --color-on-dark: #f4f5f5;
  --color-on-dark-muted: #bcc2c8;

  /* Color: líneas */
  --color-line: #d3d6d9;
  --color-line-strong: #7f868e;
  --color-line-on-dark: #4b5159;

  /* Color: acento sobrio */
  --color-accent: #3f5a6e;
  --color-accent-hover: #314859;
  --color-accent-on-dark: #a8bccb;
  --color-on-accent: #ffffff;

  /* Color: estados del formulario */
  --color-error: #9a2b2b;
  --color-success: #2c6549;

  /* Tipografía: familias */
  --font-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-heading: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Tipografía: escala */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem);
  --text-hero: clamp(2rem, 1.1rem + 2.6vw, 3.4rem);
  --text-hero-small: clamp(1.75rem, 1.2rem + 2.6vw, 2.25rem);

  --leading-tight: 1.08;
  --leading-heading: 1.2;
  --leading-body: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-section: clamp(4rem, 2.5rem + 6.5vw, 7.5rem);
  --space-gutter: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);

  /* Medidas */
  --width-page: 75rem;
  --width-text: 38rem;
  --width-hero-copy: 34rem;
  --width-card: 18rem;
  --width-photo: 9.5rem;
  --height-photo: 11.75rem;
  /* 42vw iguala a 75svh en 16:9 y evita que una ventana muy ancha recorte el edificio */
  --height-hero: max(75svh, 42vw);
  --height-hero-small: 80svh;
  --size-mark-width: 2.5rem;
  --size-control: 3rem;
  --size-target: 1.5rem;
  --size-icon: 1.75rem;
  --size-icon-small: 1.25rem;
  --size-patron: 3rem;
  --size-paso: 2.5rem;
  --size-punto: 0.75rem;
  --size-flecha: 0.5rem;
  --width-foto: 48rem;
  --height-turnstile: 4.0625rem;
  --width-boton-aviso: 7rem;
  --width-reporte: 26rem;
  /* Alto de cada paso del proceso en móvil; el SVG vertical mide 160 × 800 */
  --proceso-fila: 7.5rem;

  /* Bordes */
  --border-thin: 1px;
  --border-mark: 3px;
  --radius: 2px;

  /* Movimiento */
  --duration-fast: 150ms;

  /* Velo sobre la foto del hero. Va anclado al texto, no a porcentajes: en escritorio
     al borde derecho de la columna de texto y en móvil al alto del bloque de texto.
     Si cambia, hay que volver a medir el contraste con scripts/verificar_heros.py. */
  --color-veil: 18 22 27;
  --hero-text-edge: calc(max(0px, (100vw - var(--width-page)) / 2) + var(--space-gutter) + var(--width-hero-copy));
  --gradient-hero: linear-gradient(90deg,
    rgb(var(--color-veil) / 0.8) 0,
    rgb(var(--color-veil) / 0.66) var(--hero-text-edge),
    rgb(var(--color-veil) / 0.5) calc(var(--hero-text-edge) + 4rem),
    rgb(var(--color-veil) / 0.26) calc(var(--hero-text-edge) + 9rem),
    rgb(var(--color-veil) / 0.08) calc(var(--hero-text-edge) + 14rem),
    rgb(var(--color-veil) / 0) calc(var(--hero-text-edge) + 20rem));
  --gradient-hero-small: linear-gradient(180deg,
    rgb(var(--color-veil) / 0.74) 0,
    rgb(var(--color-veil) / 0.66) calc(100% - var(--space-8)),
    rgb(var(--color-veil) / 0.3) calc(100% - var(--space-5)),
    rgb(var(--color-veil) / 0) 100%);
}