/* =============================================================
   4utils — Bootstrap 4.3.1 customization
   Overrides leves: usamos Bootstrap apenas para grid (.container,
   .row, .col-*) e responsive utilities (.d-lg-none etc).
   Componentes próprios vivem em components.css com BEM (.btn--primary).
   ============================================================= */

/* Reset adicional ao do Bootstrap */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background-color: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings: cabem na nossa escala mas mantém .h1/h1 do Bootstrap como classes neutras */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: var(--space-3);
  color: var(--text-primary);
  font-weight: var(--weight-bold);
}

p {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover { color: var(--brand-primary-hover); }
a:visited { color: var(--text-link-visited); }

a.no-style,
a.no-style:hover,
a.no-style:visited {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
}

/* Foco universal: aparece SÓ via teclado (focus-visible) */
:focus { outline: none; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: inherit;
}

/* Container: estende Bootstrap com xxl em 1280 */
.container {
  width: 100%;
  padding-right: var(--space-4);
  padding-left: var(--space-4);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1440px) { .container { max-width: 1280px; } }

/* Gutter custom 24px (12 cada lado) */
.row {
  margin-right: -12px;
  margin-left: -12px;
}
[class*="col-"] {
  padding-right: 12px;
  padding-left: 12px;
}

/* Esconde elementos com [hidden] consistentemente */
[hidden] { display: none !important; }