/* Mapa Glico brand layer. Shared by local copies in the portal and PWA. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/manrope-400.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/manrope-500.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/manrope-600.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/manrope-700.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/manrope-800.ttf') format('truetype'); }
:root {
    --mg-ink: #102a43;
    --mg-ink-soft: #486581;
    --mg-blue: #3578f6;
    --mg-blue-dark: #2459c7;
    --mg-teal: #18b8a6;
    --mg-yellow: #f7b844;
    --mg-coral: #f28c72;
    --mg-paper: #fffdfa;
    --mg-cloud: #f3f7fb;
    --mg-line: #d9e3ed;
    --mg-white: #ffffff;
    --mg-radius-sm: 12px;
    --mg-radius-md: 20px;
    --mg-radius-lg: 30px;
    --mg-shadow-sm: 0 8px 24px rgba(16, 42, 67, .08);
    --mg-shadow-md: 0 18px 50px rgba(16, 42, 67, .12);
    --mg-focus: 0 0 0 4px rgba(53, 120, 246, .22);
    --mg-font: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--mg-font); color: var(--mg-ink); }
img { max-width: 100%; }
a { color: var(--mg-blue-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--mg-focus); }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 1000; padding: 12px 16px; border-radius: 10px; background: var(--mg-ink); color: var(--mg-white); }
.skip-link:focus { top: 16px; }
.mg-logo-mark { display: block; width: 42px; height: 42px; object-fit: contain; }
.mg-logo-image { display: block; width: 204px; height: auto; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}