/* ==========================================================================
   EL MANA · Brasas Fish
   base: fuentes, tokens, reset, tipografía y retícula
   Dirección de arte: papel marfil, hilos de 1 px, serif fina.
   ========================================================================== */

/* ==========================================================================
   EL MANA · tipografías autohospedadas
   Boska (display) · Switzer (texto) · JetBrains Mono (etiquetas)
   Fuentes de Fontshare y Google Fonts, licencias libres para uso comercial.
   ========================================================================== */

@font-face {
  font-family: 'Boska';
  src: url('../assets/fonts2/boska-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Boska';
  src: url('../assets/fonts2/boska-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Boska';
  src: url('../assets/fonts2/boska-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer';
  src: url('../assets/fonts2/switzer-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer';
  src: url('../assets/fonts2/switzer-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer';
  src: url('../assets/fonts2/switzer-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts2/mono-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts2/mono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts2/mono-500-latin-ext.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts2/mono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* noche */
  --paper: #0b0b0a;
  --paper-2: #101010;
  --paper-3: #171715;
  --ink: #ede7da;
  --ink-2: #cfc8ba;
  --stone: #8e887a;
  --stone-2: #6b665b;

  /* hilos */
  --line: rgba(237, 231, 218, 0.14);
  --line-2: rgba(237, 231, 218, 0.075);
  --line-clara: rgba(237, 231, 218, 0.18);

  /* acentos apagados */
  --clay: #b9ab92;
  --clay-2: #d3c6ae;
  --clay-soft: rgba(185, 171, 146, 0.12);
  --brasa: #7e4a3c;

  /* noche profunda */
  --night: #080807;
  --night-2: #0e0e0c;
  --cream: #f2eee5;

  /* vidrio */
  --glass: rgba(255, 255, 255, 0.05);
  --glass-2: rgba(255, 255, 255, 0.035);
  --glass-brd: rgba(255, 255, 255, 0.1);
  --glass-dark: rgba(8, 8, 7, 0.55);
  --glass-dark-brd: rgba(237, 231, 218, 0.12);
  --blur: blur(24px) saturate(140%);

  /* tipografía */
  --serif: 'Boska', 'Iowan Old Style', Palatino, Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans: 'Switzer', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --fs-hero: clamp(3.4rem, 10.2vw, 9rem);
  --fs-h2: clamp(2.4rem, 5.6vw, 4.6rem);
  --fs-h3: clamp(1.5rem, 2.6vw, 2.3rem);
  --fs-body: clamp(0.98rem, 1.02vw, 1.06rem);
  --fs-sm: 0.86rem;
  --fs-xs: 0.66rem;

  /* espacio */
  --pad: clamp(1.2rem, 4.5vw, 4.5rem);
  --max: 1380px;
  --sec: clamp(4.5rem, 10vw, 9rem);
  --nav-h: 74px;

  /* movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.6s;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

img { height: auto; background: var(--paper-3); }

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

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

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

ul, ol { list-style: none; padding: 0; }

::selection { background: rgba(185, 171, 146, 0.22); color: #fff; }

:focus-visible {
  outline: 1px solid var(--clay);
  outline-offset: 5px;
}

[hidden] { display: none !important; }

@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 9px; }
  ::-webkit-scrollbar-track { background: var(--paper); }
  ::-webkit-scrollbar-thumb {
    background: var(--paper-3);
    border-radius: 99px;
    border: 3px solid var(--paper);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--stone-2); }
}

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.08; }

em,
.cursiva {
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: -0.01em;
}

p { text-wrap: pretty; }

strong { font-weight: 500; }

.display {
  font-family: var(--serif);
  font-size: var(--fs-hero);
  line-height: 0.86;
  letter-spacing: -0.035em;
}

/* etiquetas pequeñas */
.rot {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--stone);
}

/* hilo bandera del Perú: rojo · blanco · rojo, 1 px */
.hilo-pe {
  --c: var(--brasa);
  display: inline-block;
  width: 1.65em;
  height: 1px;
  background-image: linear-gradient(90deg, var(--c) 0 34%, transparent 34% 66%, var(--c) 66% 100%);
  flex: none;
  opacity: 0.9;
}

.hilo-pe--larga { width: 4.2em; }
.hilo-pe--clara { --c: rgba(242, 238, 229, 0.75); }

/* regla fina con etiqueta */
.regla {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.regla .rot { color: var(--ink-2); }

.lead {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 46ch;
  font-weight: 380;
}

.texto {
  max-width: 58ch;
  color: var(--ink-2);
  font-weight: 380;
}

.texto + .texto { margin-top: 1rem; }

.gris { color: var(--stone); }

.micro {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}

.num {
  font-family: var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.01em;
}

/* ---------- Retícula ---------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.seccion {
  position: relative;
  padding-block: var(--sec);
}

.seccion--tinta {
  background: var(--night);
  color: var(--cream);
}

.seccion--tinta .rot,
.seccion--tinta .gris,
.seccion--tinta .micro { color: rgba(242, 238, 229, 0.55); }

.seccion--tinta .regla { border-bottom-color: var(--line-clara); }
.seccion--tinta .regla .rot { color: var(--cream); }
.seccion--tinta .texto { color: rgba(242, 238, 229, 0.74); }
.seccion--tinta .hilo-pe { --c: rgba(242, 238, 229, 0.8); }

.seccion--arena {
  background: var(--paper-2);
}

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

/* textura de papel, muy leve */
.papel {
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* ---------- Animación base ---------- */
html.js [data-rv] { opacity: 0; }
html.reduced [data-rv] { opacity: 1 !important; }

.reveal {
  overflow: hidden;
  position: relative;
}

.reveal img { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* número de sección dentro de la etiqueta */
.rot__n {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--clay);
  letter-spacing: 0.12em;
}

.seccion--tinta .rot__n { color: rgba(242, 238, 229, 0.75); }