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

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

body {
  margin: 0;
  font-family: var(--of-font-body);
  font-size: var(--of-fs-base);
  line-height: 1.65;
  color: var(--of-grafito);
  background: var(--of-blanco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--of-azul);
  text-decoration: none;
  transition: color var(--of-trans-fast);
}

a:hover { color: var(--of-cyan); }

::selection {
  background: var(--of-cyan);
  color: var(--of-blanco);
}

.container {
  width: 100%;
  max-width: var(--of-container);
  margin: 0 auto;
  padding: 0 var(--of-space-6);
}

.container-sm {
  max-width: var(--of-container-sm);
  margin: 0 auto;
  padding: 0 var(--of-space-6);
}

.section {
  padding: var(--of-space-32) 0;
}

@media (max-width: 768px) {
  .section { padding: var(--of-space-16) 0; }
  :root { --of-nav-h: 72px; }
}

/* Skip link a11y */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--of-azul);
  color: white;
  padding: 8px 16px;
  z-index: 9999;
}
.skip-link:focus { top: 0; }

/* Scrollbar */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--of-gris-1); }
::-webkit-scrollbar-thumb {
  background: var(--of-azul-light);
  border-radius: 999px;
  border: 3px solid var(--of-gris-1);
}