/* Vanguardia · tokens de diseño */
@font-face { font-family: "Cabinet Grotesk"; src: url("../fonts/cabinet-grotesk-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url("../fonts/cabinet-grotesk-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url("../fonts/cabinet-grotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* Fallbacks métricamente ajustados para evitar layout shift mientras cargan */
@font-face { font-family: "Cabinet Fallback"; src: local("Arial Black"), local("Arial Bold"), local("Arial"); size-adjust: 88%; ascent-override: 98%; descent-override: 26%; }
@font-face { font-family: "Switzer Fallback"; src: local("Arial"); size-adjust: 98%; ascent-override: 96%; descent-override: 25%; }

:root {
  /* Color · derivado del logo */
  --noche: #061634;
  --vanguardia: #0C3C84;
  --luz: #1E52A8;
  --hielo: #C9D6EC;        /* azul muy claro para texto secundario sobre noche */
  --papel: #F3F1EC;        /* fondo claro cálido */
  --papel-2: #E8E4DB;      /* un paso de tono para separar superficies */
  --tinta: #0A1530;        /* texto sobre papel */
  --tinta-2: #3C4762;      /* texto secundario sobre papel (AA) */
  --ambar: #FFB21E;        /* acento de energía: solo acción principal y golpes de luz */
  --ambar-2: #F29A00;

  /* Tipografía */
  --f-display: "Cabinet Grotesk", "Cabinet Fallback", sans-serif;
  --f-text: "Switzer", "Switzer Fallback", sans-serif;
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem);
  --step-hero: clamp(3.25rem, 1.2rem + 7.4vw, 9rem);
  --step-giant: clamp(4.5rem, 1rem + 13vw, 15rem);

  /* Espacio */
  --gutter: clamp(16px, 2.4vw, 36px);
  --section: clamp(72px, 8vw, 132px);
  --max: 1520px;

  /* Motivo: el chaflán de la flecha (ángulo ~53°) */
  --cut: clamp(18px, 2.6vw, 44px);
  --clip-cut: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  --clip-cut-sm: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));

  /* Movimiento */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.65, .01, .05, .99);
  --ease-snap: cubic-bezier(.85, 0, .15, 1);
  --d-micro: 180ms;
  --d-state: 320ms;
  --d-enter: 700ms;
}