/* hecho por r3k1 */
@layer base {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab) + 16px); background: var(--bg); }
  body {
    min-height: 100svh;
    color: var(--tinta);
    font: 400 16px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    transition: background-color .5s, color .5s;
  }
  img, svg { display: block; max-width: 100%; }
  img { height: auto; }
  a { color: inherit; text-decoration: none; }
  button, input { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  ul, ol { list-style: none; }
  em { font-style: italic; }
  address { font-style: normal; }
  ::selection { background: var(--oro); color: var(--sobre-oro); }
  :focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 4px; }

  h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
  h1 em, h2 em, h3 em {
    font-style: italic;
    background: var(--oro-g);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: .06em;
  }

  .oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .saltar { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--oro); color: var(--sobre-oro); padding: 10px 16px; border-radius: 99px; }
  .saltar:focus { top: 12px; }
}