/* IATIC · tokens y base de la marca Gobernación del Magdalena 2026 */
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url(../fonts/montserrat-medium.woff) format("woff"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url(../fonts/montserrat-bold.woff) format("woff"); }
@font-face { font-family: "Montserrat"; font-weight: 800 900; font-display: swap; src: url(../fonts/montserrat-extrabold.woff) format("woff"); }

:root {
  --primary: #0071bb; --primary-700: #005a96; --primary-100: #e2f1fa;
  --cyan: #00b7d9; --sky: #9fd7e5;
  --red: #f7003c; --yellow: #fec800; --green: #69b75e; --ocre: #a28034; --purple: #5618ba;
  --ink: #1d1d1b; --muted: #606060; --surface: #f6f5f5; --white: #fff;
  --navy: #0b2540; --line: #dfe4ea;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --shadow: 0 6px 24px rgba(11, 37, 64, .12);
  --font: "Montserrat", "Segoe UI", system-ui, Arial, sans-serif;
  --stripe: linear-gradient(90deg, #5618ba 0 11.1%, #a28034 0 22.2%, #fec800 0 33.3%, #f7003c 0 44.4%, #0071bb 0 55.5%, #00b7d9 0 66.6%, #9fd7e5 0 77.7%, #69b75e 0 88.8%, #5618ba 0);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-weight: 500; color: var(--ink); background: var(--surface); line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
a { color: var(--primary); }
.stripe-line { height: 3px; background: var(--stripe); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 0; cursor: pointer; font-weight: 800;
  padding: .85rem 1.2rem; border-radius: var(--r-md); background: var(--primary); color: #fff; font-size: 1rem; text-decoration: none; transition: transform .15s, background .15s, opacity .15s; }
.btn:hover { background: var(--primary-700); }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.btn.ghost:hover { background: var(--primary-100); }
.btn.red { background: var(--red); } .btn.green { background: var(--green); color: #10300b; } .btn.dark { background: var(--navy); }
.btn.sm { padding: .5rem .8rem; font-size: .85rem; border-radius: var(--r-sm); }
.btn.block { width: 100%; }