/* ==========================================================================
   css/mutador/03-documento.css — parte 3/15 de lo que era styles.css
   --------------------------------------------------------------------------
   §05 clases de Lenis + §06 body base y tema + §07 fondo a sangre (bgmap + vídeo + velo).
   Se carga desde inc/paginas.php (_base) EN ESTE ORDEN: el número del
   archivo es su posición en la cascada. Un bloque nuevo → su propio archivo
   con el número que le toque, y añadirlo a la lista de _base.
   ========================================================================== */

/* ---------- §05 · Lenis (injected classes on <html>) ---------- */
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-stopped{ overflow: hidden; }
.lenis.lenis-smooth iframe{ pointer-events: none; }

/* ---------- §06 · Body base + tema site-wide (dark) ---------- */
body{
  font-family:var(--body);
  font-size:var(--fs-base);
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  /* cursor: crosshair; — quitado 6-oct-2026 junto al cursor custom: cursor nativo del sistema */
  cursor: default;   /* flecha también sobre textos (sin la I de escribir); se hereda */
  position: relative;
  transition: background-color .5s ease, color .5s ease;
}
/* Excepciones al cursor por defecto: mano en lo que se pulsa, I solo donde se escribe */
a[href], button, [role="button"], summary, select, label[for],
input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"]{ cursor: pointer; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
textarea, [contenteditable="true"]{ cursor: text; }


h1 b{  color: var(--mute);}
p a{    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: underline;
}
/* ---------- Theme system (section-aware light/dark) ----------
   Nota: este subsistema se complementa con §07 (bgmap) y con
   el atributo data-section-theme gestionado en main.js. */
/* Every section in .frame declares data-theme="light" | "dark".
   An IntersectionObserver sets body[data-theme] to the most visible section.
   Default site palette is "light". */
body[data-theme="dark"]{
  background-color: var(--ink);
  color: var(--paper);
  --rule: #3a3630;
  --mute: #a8a090;
}

/* ---------- §07 · Background map (hover full-bleed) ----------
   La imagen que se muestra aquí proviene de data-bg en cada .entry.
   Si data-bg está ausente, JS hace fallback a data-img (miniatura del cursor).
   Puedes usar imágenes distintas: data-img = recorte editorial para el cursor
   (220×290 px), data-bg = panorámica o encuadre amplio para el fondo.    
  background-size: var(--bg-size, 220%);*/
.bgmap{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background-image: var(--bg-img, none);
  background-repeat: no-repeat;
  background-size:cover;
  background-position: var(--bg-x, 50%) var(--bg-y, 50%);
}
.bgmap.on{ opacity: 1; }
/* Video full-bleed dentro de bgmap. Sólo visible cuando bgmap tiene .video-on.
   La imagen de fondo (poster) sigue activa por debajo durante el fade in del
   video, evitando parpadeo si el .mp4 aún no está decodificado. */
.bgmap-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.bgmap.video-on .bgmap-video{ opacity: 1; }
/* Very subtle veil: only enough to keep index text legible over light images. */
.bgveil{
  position: fixed; inset: 0; z-index: 1; pointer-events:none;
  background: var(--paper);
  opacity: 0;
  transition: opacity .35s ease;
}
.bgveil.on{ opacity: .15; }
body[data-theme="dark"] .bgveil{ background: var(--ink); }

.frame{ position: relative; z-index: 2; }
a{ color:inherit; text-decoration:none; }
a.u{  }
a.u:hover{ color: var(--accent); }