/* ==========================================================================
   Fonts
   ========================================================================== */

/* BOOTZY TM — fuente propietaria del estudio. */
@font-face {
  font-family: 'Bootzy TM';
  src: url('../fonts/BootzyTM.woff2') format('woff2'),
       url('../fonts/BootzyTM.woff') format('woff'),
       url('../fonts/BootzyTM.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* REDACTION — usada solo para el glifo del asterisco de Projects. */
@font-face {
  font-family: 'Redaction Asterisk';
  src: url('../fonts/redaction-50-latin-400-italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Montserrat vía Google Fonts, ver <link> en index.html.
   Si preferís self-host (sin dependencia externa), avisame y armo
   /fonts/Montserrat-*.woff2 + @font-face acá mismo. */

/* ==========================================================================
   Base
   ========================================================================== */

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

.container {
  width: 100%;
  padding-inline: var(--container-padding);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Textura de papel — generada en CSS (SVG feTurbulence), sin imagen externa.
   Se aplica como overlay via ::before sobre cualquier elemento con esta clase.
   ========================================================================== */

.paper-texture {
  position: relative;
  background-color: var(--color-bg);
}

.paper-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.35;
  z-index: 1;
}

/* asegura que el contenido real quede por encima de la textura */
.paper-texture > * {
  position: relative;
  z-index: 2;
}