@layer reset, base, utilities, components, sections, overrides;

@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tektur";
  src: url("../fonts/tektur-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

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

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

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul[class],
  ol[class] {
    margin: 0;
    padding: 0;
    list-style: none;
  }

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

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
    background: none;
    border: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  table {
    border-collapse: collapse;
  }
}

@layer base {
  :root {
    --papel: #fafbf9;
    --tinta: #10262b;
    --azul: #2f5bff;
    --azul-turq: #35c0c9;
    --lima: #b5e94a;
    --tinta-60: rgba(16, 38, 43, .6);
    --tinta-30: rgba(16, 38, 43, .3);
    --tinta-12: rgba(16, 38, 43, .12);
    --papel-80: rgba(250, 251, 249, .8);
    --papel-neblina: #f1f4ef;
    --gradiente-arcade: linear-gradient(120deg, var(--azul), var(--azul-turq));
    --sombra-tarjeta: 0 1.5rem 3rem -2rem rgba(16, 38, 43, .35);
    --radio-s: .5rem;
    --radio-m: 1rem;
    --radio-l: 1.75rem;
    --contenedor: 75rem;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --espacio-1: .25rem;
    --espacio-2: .5rem;
    --espacio-3: .75rem;
    --espacio-4: 1rem;
    --espacio-5: 1.5rem;
    --espacio-6: 2rem;
    --espacio-7: 3rem;
    --espacio-8: 4.5rem;
    --espacio-9: 6rem;
    --fuente-titulo: "Tektur", system-ui, sans-serif;
    --fuente-texto: "Onest", system-ui, sans-serif;
    --franja-alto: 4.5rem;
    --marca-anillo-radio: 3rem;
  }

  body {
    min-height: 100vh;
    font-family: var(--fuente-texto);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--tinta);
    background-color: var(--papel);
    background-image:
      radial-gradient(circle at 12% 8%, rgba(47, 91, 255, .05), transparent 40%),
      radial-gradient(circle at 88% 4%, rgba(181, 233, 74, .07), transparent 35%);
    background-attachment: fixed;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: .01em;
    color: var(--tinta);
  }

  h1 {
    font-size: clamp(2.4rem, 1.7rem + 3.1vw, 4.2rem);
  }

  h2 {
    font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem);
  }

  h3 {
    font-size: clamp(1.3rem, 1.15rem + .8vw, 1.7rem);
  }

  p {
    max-width: 62ch;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible {
    outline: .1875rem solid var(--azul);
    outline-offset: .1875rem;
    border-radius: .25rem;
  }

  ::selection {
    background-color: var(--lima);
    color: var(--tinta);
  }
}

@layer utilities {
  .contenedor {
    width: min(100% - var(--gutter) * 2, var(--contenedor));
    margin-inline: auto;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .flex {
    display: flex;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .grid {
    display: grid;
  }

  .items-center {
    align-items: center;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .gap-1 {
    gap: var(--espacio-1);
  }

  .gap-2 {
    gap: var(--espacio-2);
  }

  .gap-3 {
    gap: var(--espacio-3);
  }

  .gap-4 {
    gap: var(--espacio-4);
  }

  .gap-6 {
    gap: var(--espacio-6);
  }

  .mt-1 { margin-top: var(--espacio-1); }
  .mt-2 { margin-top: var(--espacio-2); }
  .mt-3 { margin-top: var(--espacio-3); }
  .mt-4 { margin-top: var(--espacio-4); }
  .mt-6 { margin-top: var(--espacio-6); }
  .mt-8 { margin-top: var(--espacio-8); }
  .mb-2 { margin-bottom: var(--espacio-2); }
  .mb-3 { margin-bottom: var(--espacio-3); }
  .mb-4 { margin-bottom: var(--espacio-4); }
  .mb-6 { margin-bottom: var(--espacio-6); }

  .py-8 { padding-block: var(--espacio-8); }
  .py-9 { padding-block: var(--espacio-9); }

  .text-sm {
    font-size: .875rem;
  }

  .text-lg {
    font-size: 1.15rem;
  }

  .text-center {
    text-align: center;
  }

  .text-tinta-60 {
    color: var(--tinta-60);
  }

  .w-full {
    width: 100%;
  }

  .relative {
    position: relative;
  }

  .block-max {
    max-width: 46rem;
  }

  .hidden {
    display: none;
  }

  @media (min-width: 60rem) {
    .fila-desktop {
      flex-direction: row;
    }
  }
}