/* Intro Indera v3 · el movimiento lo hace intro.js (requestAnimationFrame) */
html.ii-on, html.ii-on body { overflow: hidden; }
html:not(.ii-on) #intro-indera { display: none; }
#intro-indera { position: fixed; inset: 0; z-index: 9999; overflow: hidden; background: #C5CEB2; will-change: transform; contain: strict; }
#intro-indera.ii-fadeout { transition: opacity .5s ease; opacity: 0; }
.ii-svg { position: absolute; inset: 0; display: block; }
.ii-skip { position: absolute; right: 20px; bottom: 20px; background: transparent; cursor: pointer;
  border: 1px solid rgba(18,59,29,.35); color: #123B1D; mix-blend-mode: normal; border-radius: 999px; padding: 8px 16px;
  font: 600 12px/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.ii-panel { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 10000; display: flex; gap: 8px;
  align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px;
  background: rgba(12,38,19,.92); color: #EFE2CB; font: 13px/1.2 system-ui, sans-serif; }
.ii-panel button, .ii-panel select { background: #123B1D; color: #EFE2CB; border: 1px solid #C59C6D; border-radius: 8px; padding: 6px 10px; font: inherit; cursor: pointer; }
.ii-panel input[type=range] { flex: 1 1 220px; accent-color: #C59C6D; }
.ii-panel .ii-t { min-width: 160px; font-variant-numeric: tabular-nums; }
.ii-panel .ii-f { font-weight: 600; min-width: 90px; color: #C59C6D; }
/* Fondo de la página: paisaje sutil arriba (lo pinta intro.js) */
#indera-marca { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1; pointer-events: none; opacity: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }

.ii-vineta { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 95% at 50% 45%, transparent 55%, rgba(96,112,72,.16) 100%); }
/* papel de acuarela (prensado en frío) sobre toda la escena, y luz lateral sobre el papel verde */
.ii-papel { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .5; background-size: 512px 512px; }
.ii-luz { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 85% 12%, rgba(255,250,235,.35), rgba(255,250,235,0) 70%); mix-blend-mode: soft-light; }