/* ==========================================================================
   GS01 — BASE DE LA PÁGINA PRINCIPAL
   ========================================================================== */

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg-color);
  color: var(--c-text);
  font-family: var(--font-family);
  font-weight: var(--font-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-text);
}

/* Fondo reactivo: detrás de todo. js/background.js le da tamaño (algo más
   grande que la ventana, para que al inclinarse no se vean los bordes),
   posición e inclinación. */
.bg-canvas {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 0;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
}

main {
  position: relative;
  z-index: 1;
}


/* --------------------------------------------------------------------------
   CURSOR
   js/cursor.js pone en cada superficie --cursor-default (CURSOR1) y
   --cursor-action (CURSOR2) del color que contrasta con su fondo.
   Solo con ratón: en táctil queda el cursor del sistema (no se ve).
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  /* Reposo → CURSOR1. Se declara en cada superficie porque ahí vive su
     variable; :where() no suma especificidad, así lo seleccionable gana. */
  :where(html, [data-cursor]) {
    cursor: var(--cursor-default), auto;
  }

  /* Seleccionable → CURSOR2 */
  :is(a[href], button, input, select, textarea, label, summary,
      [role="button"], [role="slider"], [tabindex]:not([tabindex="-1"])) {
    cursor: var(--cursor-action), pointer;
  }

  /* Lo que está desactivado no es seleccionable */
  :is(button, input, select, textarea):disabled {
    cursor: var(--cursor-default), not-allowed;
  }
}