/* Las dos fuentes van autoalojadas (licencia SIL OFL 1.1, ver assets/fonts/licenses). */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("../assets/fonts/BigShouldersDisplay-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../assets/fonts/HankenGrotesk-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Sin capa, para que el atributo hidden gane siempre a cualquier display de los componentes. */
[hidden] { display: none; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
  h1, h2, h3 { font-size: 1em; font-weight: inherit; line-height: inherit; }
  ul, ol { padding: 0; list-style: none; }
  button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  img, svg { display: block; max-width: 100%; }
  table { border-collapse: separate; }
}

@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    background: var(--acero);
  }

  body {
    min-height: 100dvh;
    background: var(--acero);
    color: var(--tinta);
    font-family: var(--fuente-texto);
    font-size: 1rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  /* Todo lo pulsable: respuesta al pulsar, no al soltar, y sin retardo de doble toque. */
  button, a, [role="button"], [role="checkbox"], [role="radio"], label[for] {
    touch-action: manipulation;
  }

  button, [role="button"], [role="checkbox"], [role="radio"], .pestana, .boton-principal, .boton-secundario {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  /* Con movimiento reducido solo hay transiciones de color (80 ms); la escala y los deslizamientos se quedan fuera. */
  .pulsable {
    transition: background-color 80ms linear, opacity 80ms linear;
  }

  @media (prefers-reduced-motion: no-preference) {
    .pulsable {
      transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
    }
    .pulsable:active { transform: scale(0.97); }
  }

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

  :focus { outline: none; }
  :focus-visible { outline: 2px solid var(--brasa); outline-offset: 2px; }

  input, select { font-size: 1rem; }

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

  /* Todo :hover vive aquí dentro: en el móvil, tocar no debe dejar un hover pegado. */
  @media (hover: hover) and (pointer: fine) {
    a.fila-lista:hover, button.fila-lista:hover { background-color: var(--templada); }
  }
}