@font-face {
  font-family: "Raleway";
  src: url("../../fonts/Raleway-SemiBold.woff") format("woff"),
       url("../../fonts/Raleway-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("../../fonts/Raleway-Bold.woff") format("woff"),
       url("../../fonts/Raleway-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../../fonts/Roboto-Regular.woff") format("woff"),
       url("../../fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../../fonts/Roboto-Medium.woff") format("woff"),
       url("../../fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../../fonts/Roboto-Bold.woff") format("woff"),
       url("../../fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text-main: #17203a;
  --color-text-muted: #536078;
  --color-hero-bg: #10104d;
  --color-primary: #2727c7;
  --color-primary-dark: #1313ab;
  --color-brand-accent: #00d0ff;
  --color-accent-dark: #006a83;
  --color-panel-soft: #efefff;
  --color-border: #dce2eb;
  --color-success-text: #166534;
  --color-success-bg: #ecfdf3;
  --color-error-text: #a32920;
  --color-error-bg: #fff1f0;
  --radius-control: 10px;
  --radius-card: 18px;
  --shadow-soft: 0 18px 50px rgba(16, 16, 77, 0.09);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --font-title: "Raleway", system-ui, -apple-system, sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Refuerzos de septiembre de 2026: profundidad discreta, escala tipográfica y movimiento compartido. */
:root {
  --color-ink-soft: #3d4761;
  --color-line: #e4e9f2;
  --color-line-strong: #d3dbe8;
  --color-wash: #f4f7fd;
  --color-wash-accent: #edf7fc;
  --color-primary-soft: #ececfb;
  --color-warning-text: #8a5a00;
  --color-warning-bg: #fff8e8;
  --radius-media: 14px;
  --radius-pill: 999px;
  --shadow-media: 0 1px 2px rgba(23, 32, 58, .04), 0 12px 28px rgba(23, 32, 58, .06);
  --shadow-raised: 0 18px 45px rgba(23, 32, 58, .1), 0 2px 8px rgba(23, 32, 58, .05);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --step-title: clamp(2rem, 3.3vw, 2.8rem);
  --step-lead: 1.05rem;
}