@font-face {
  font-family: "Vastago Grotesk";
  src: url("../fonts/VastagoGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vastago Grotesk";
  src: url("../fonts/VastagoGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vastago Grotesk";
  src: url("../fonts/VastagoGrotesk-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vastago Grotesk";
  src: url("../fonts/VastagoGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --hat-color-primary: #234036;            /* verde marca: CTA, seleccion, foco */
  --hat-color-primary-hover: #1b332b;
  --hat-color-primary-contrast: #ffffff;
  --hat-color-primary-tint: #f0f5f2;
  --hat-color-surface: #ffffff;
  --hat-color-summary: #fafafa;            /* columna resumen, full-bleed */
  --hat-color-card: #f6f4ef;               /* croquis de la dedicatoria */
  --hat-color-text: #1c1c1c;
  --hat-color-text-soft: #6b6b6b;
  --hat-color-text-faint: #9a9a9a;
  --hat-color-border: #e6e6e6;
  --hat-color-border-strong: #d4d4d4;
  --hat-color-divider: #efefef;
  --hat-color-success: #1a7f4f;
  --hat-color-error: #c0392b;
  --hat-color-error-soft: #fdf1ef;
  --hat-color-warn-soft: #fdf6ec;          /* banners suaves */
  --hat-color-overlay: rgba(20, 24, 22, 0.55);

  --hat-font-body: "Vastago Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hat-font-heading: var(--hat-font-body);
  --hat-fs-xs: 0.75rem;     /* 12 */
  --hat-fs-sm: 0.8125rem;   /* 13 */
  --hat-fs-md: 0.9375rem;   /* 15 */
  --hat-fs-lg: 1.125rem;    /* 18 */
  --hat-fs-xl: 1.5rem;      /* 24 */
  --hat-fw-medium: 500;
  --hat-fw-bold: 600;
  --hat-lh: 1.5;

  --hat-heading-transform: none;
  --hat-heading-ls: 0;
  --hat-heading-weight: 600;

  --hat-space-1: 4px;
  --hat-space-2: 8px;
  --hat-space-3: 12px;
  --hat-space-4: 16px;
  --hat-space-5: 20px;
  --hat-space-6: 24px;
  --hat-space-8: 32px;
  --hat-space-10: 40px;
  --hat-space-12: 48px;

  --hat-radius-sm: 8px;
  --hat-radius-md: 10px;
  --hat-radius-input: 10px;
  --hat-radius-pill: 999px;
  --hat-shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.18);

  --hat-control-height: 54px;
  --hat-focus-ring: 0 0 0 1.5px var(--hat-color-primary);
  --hat-transition: 140ms ease;

  --hat-color-savings: #0faf87;
}