@layer cimiento, armazon, piezas;

@layer cimiento {
  :root {
    --ambar: #ffd800;
    --ambar-hondo: #e3bf00;
    --carbon: #111111;
    --grafito: #1b1b1b;
    --hollin: #2c2c2c;
    --papel: #f5f2e9;
    --papel-claro: #fffdf6;
    --tinta: #161616;
    --sepia: #5a5549;
    --veta: #d9d2bf;
    --alerta: #c8261b;
    --letra-titular: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
    --letra-cuerpo: "Literata", Georgia, "Times New Roman", serif;
    --ancho: 1180px;
  }

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

  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 1rem;
  }

  body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font: 400 1.0625rem/1.7 var(--letra-cuerpo);
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3 {
    font-family: var(--letra-titular);
    line-height: 1.14;
    letter-spacing: -0.012em;
    margin: 0 0 0.55em;
  }

  h1 {
    font-size: clamp(1.85rem, 4.3vw, 3.05rem);
    font-weight: 800;
  }

  h2 {
    font-size: clamp(1.32rem, 2.5vw, 1.72rem);
    font-weight: 700;
    margin-top: 0.4em;
  }

  h3 {
    font-size: 1.1rem;
    font-weight: 700;
  }

  p,
  ul,
  ol,
  dl {
    margin: 0 0 1em;
  }

  ul,
  ol {
    padding-left: 1.25em;
  }

  li {
    margin-bottom: 0.35em;
  }

  a {
    color: inherit;
  }

  strong {
    font-weight: 600;
  }

  :focus-visible {
    outline: 3px solid var(--ambar-hondo);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
    }
  }
}