/* =====================================================================
   09 · REVELADO POR SCROLL (carga progresiva)
   DEGRADACIÓN: visible por defecto. Solo cuando <html> tiene .js se oculta,
   y reveal.js añade .is-in al entrar en pantalla.
   Poner en <head>: <script>document.documentElement.classList.add('js')</script>

   Uso:  <div class="reveal">…</div>
         <div class="reveal" data-reveal="izq">…</div>   (izq | der | zoom | linea)
         <ul class="reveal-grupo">…hijos escalonados…</ul>
   ===================================================================== */

.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-salida), transform .9s var(--ease-salida); transition-delay:var(--retraso, 0ms); will-change:opacity, transform; }
.js .reveal[data-reveal="izq"]{ transform:translateX(-36px); }
.js .reveal[data-reveal="der"]{ transform:translateX(36px); }
.js .reveal[data-reveal="zoom"]{ transform:scale(.94); }
.js .reveal[data-reveal="linea"]{ transform:none; clip-path:inset(0 100% 0 0); transition:clip-path 1.1s var(--ease-salida), opacity .4s; }
.js .reveal.is-in{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }

/* En móvil, nada de desplazamientos laterales: generan scroll horizontal antes de revelarse */
@media (max-width:700px){ .js .reveal[data-reveal="izq"], .js .reveal[data-reveal="der"]{ transform:translateY(28px); } }

/* Grupo escalonado */
.js .reveal-grupo > *{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease-salida), transform .8s var(--ease-salida); }
.js .reveal-grupo.is-in > *{ opacity:1; transform:none; }
.js .reveal-grupo.is-in > *:nth-child(2){ transition-delay:.1s; }
.js .reveal-grupo.is-in > *:nth-child(3){ transition-delay:.2s; }
.js .reveal-grupo.is-in > *:nth-child(4){ transition-delay:.3s; }
.js .reveal-grupo.is-in > *:nth-child(5){ transition-delay:.4s; }
.js .reveal-grupo.is-in > *:nth-child(6){ transition-delay:.5s; }
.js .reveal-grupo.is-in > *:nth-child(n+7){ transition-delay:.6s; }

/* Bloque oculto con revelado (curiosidad): "ver lo que incluye" */
.oculto-revela{ position:relative; max-height:var(--alto-cerrado, 220px); overflow:hidden; transition:max-height .9s var(--ease); }
.oculto-revela::after{ content:""; position:absolute; inset:auto 0 0 0; height:120px; background:linear-gradient(to bottom, transparent, var(--_bg, var(--c-fondo))); transition:opacity .5s; }
.oculto-revela.is-abierto{ max-height:var(--alto-abierto, 2000px); }
.oculto-revela.is-abierto::after{ opacity:0; }

@media (prefers-reduced-motion:reduce){
  .js .reveal, .js .reveal-grupo > *{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
}
