/* ============================================================
   zuraghi design system — base.css
   Reset + estilos globales. Requiere tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--z-bg);
  color: var(--z-text);
  font-family: var(--z-font-body);
  font-size: var(--z-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

::selection { background: var(--z-accent); color: var(--z-on-accent); }

:focus-visible { outline: 2px solid var(--z-accent); outline-offset: 2px; }

/* -- fondo con retícula técnica (hero, contacto) -- */
.z-grid-bg {
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.03) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 64px);
}

/* -- contenedor centrado -- */
.z-container {
  max-width: var(--z-container);
  margin: 0 auto;
}