/* RM Arquitectos · MOVIMIENTO · concepto "Replanteo, con incisión": primero se traza en recto, después una incisión abre el campo, después se asienta.
   Los tiempos y curvas son los tokens --rm-* de styles.css (Capa 4). Lo único que no es una variable: los seguros de 1 ms y 4,5 s
   (tiempos de espera fijos, no medidas de diseño), el 0 ms de respaldo del retardo en cascada, el 100vh / 100svh de la capa de la entrada y el espaciado
   entre letras en em del botón "Saltar".
   REGLAS: solo se animan opacity, transform y, en la intro, el clip-path del logo. Nada rebota. Ningún valor cambia, se cuenta ni se mueve por separado
   (cifras, precios, plazos); el titular, el botón principal y la banda de datos no se animan; los bloques entran con un fundido corto.
   Todo vive dentro de "screen" + "sin preferencia de reducir movimiento": con prefers-reduced-motion: reduce y al imprimir, la página
   queda tal cual está en styles.css. Si se borra este archivo (o su <link>), la web sigue completa y sin movimiento.
   Qué depende de JavaScript propio y qué es CSS puro: ver la guía «Cómo actualizar la web» del manual de RM. */
@media screen and (prefers-reduced-motion:no-preference){

@keyframes rm-asentar{from{opacity:0;transform:translateY(var(--rm-dy,var(--space-4)))}}
@keyframes rm-fundir{from{opacity:0}}
@keyframes rm-regla{from{transform:scaleX(0)}}
@keyframes rm-cuna{to{stroke-dashoffset:0}}
/* Seguros: si el script no llega, a los 4,5 s todo queda visible y la capa de la intro desaparece */
@keyframes rm-liberar{to{visibility:hidden}}
@keyframes rm-devolver{to{opacity:1;transform:none}}
@keyframes rm-mostrar{to{visibility:visible}}

/* ---------- 0 · INTRO · el logo aparece en el centro y se acomoda en el encabezado (1,88 s, una vez por sesión) ----------
   Solo existe con la clase rm-intro-on en <html> (la pone js/pre.js antes de pintar y la saca js/intro.js al terminar).
   Capas: hero (debajo) < telón Grafito z40 < encabezado z50 < logo grande z60 < botón "Saltar" z70. */
.rm-intro-on .intro{display:block;animation:rm-liberar 1ms linear 4500ms forwards}
.intro-campo{position:fixed;left:0;top:0;width:100%;height:100vh;height:100svh;background:var(--rm-ink-900);z-index:40}
.intro-onda{position:absolute;left:0;top:100%;width:100%;height:var(--rm-wave-h);overflow:visible;fill:var(--rm-ink-900)}
.intro-escena{position:fixed;inset:0;z-index:60;display:grid;place-items:center;pointer-events:none}
.intro-marca{grid-area:1/1;width:var(--rm-mark-w-intro);height:auto;color:var(--rm-ink-050);clip-path:inset(50% 0 50% 0)}
.intro-linea{grid-area:1/1;width:calc(var(--rm-mark-w-intro)*1.2);height:var(--rule);background:var(--rm-ink-050);transform:scaleX(0);transform-origin:0 50%}
.intro-saltar{position:fixed;left:var(--space-4);bottom:var(--space-4);z-index:70;min-width:var(--space-7);min-height:var(--space-7);padding:var(--space-3);background:none;border:0;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--rm-ink-400)}
.intro-saltar:focus-visible{color:var(--rm-ink-050)}
/* Mientras dura: el logo del encabezado espera (la intro lo reemplaza) y el menú y el rótulo entran cuando el logo llega a su lugar */
.rm-intro-on .site-header .marca{opacity:0;animation:rm-devolver 1ms linear 4500ms forwards}
/* El menú entra con un fundido; el rótulo ARQUITECTOS (lleva la regla de Óxido) aparece de golpe al acoplar el logo: el Óxido nunca se anima como relleno */
#nav{transition:opacity var(--rm-dur-3) var(--rm-ease-out)}
.rm-intro-on:not(.rm-docked) #nav{opacity:0;animation:rm-devolver 1ms linear 4500ms forwards}
.rm-intro-on:not(.rm-docked) .marca-sub{visibility:hidden;animation:rm-mostrar 1ms linear 4500ms forwards}

/* ---------- 1 · HERO · empieza con "hero-go" (al cargar, o cuando el telón de la intro ya subió a la mitad). El titular (H1) y la bajada no se animan. ----------
   Antes de hero-go lo animado espera oculto; si el script nunca llega, a los 4,5 s se libera solo. */
.rm-anim:not(.hero-go) .hero-anim{opacity:0;animation:rm-devolver 1ms linear 4500ms forwards}
.rm-anim:not(.hero-go) .hero-regla{transform:scaleX(0)}
.rm-anim:not(.hero-go) .draw{stroke-dashoffset:1;animation:rm-cuna 1ms linear 4500ms forwards}
.rm-anim .draw{stroke-dashoffset:1}
.rm-anim.hero-go .hero-regla{animation:rm-regla var(--rm-dur-5) var(--rm-ease-trazo) backwards}   /* único gesto de Óxido del hero: la regla se traza */
.rm-anim.hero-go .hero .label.hero-anim{animation:rm-fundir var(--rm-dur-3) var(--rm-ease-out) backwards}
.rm-anim.hero-go .hero .rm-btn--ghost.hero-anim,.rm-anim.hero-go .hero .note.hero-anim{animation:rm-fundir var(--rm-dur-3) var(--rm-ease-out) calc(var(--rm-u)*7) backwards}
/* El botón principal y la banda de datos NO se animan: están desde el primer cuadro (el botón es el elemento de conversión; la banda tapa el dibujo y avisa que hay más abajo). */
/* Incisiones del motivo: se dibujan una vez, una por vez, DESPUÉS de la regla de Óxido (nunca dos trazos a la vez) */
.rm-anim.hero-go .draw{animation:rm-cuna var(--rm-dur-5) var(--rm-ease-trazo) var(--rm-dur-5) both}
.rm-anim.hero-go .draw.d2{animation-delay:calc(var(--rm-dur-5)*2)}   /* la segunda empieza cuando termina la primera: nunca dos trazos a la vez */

/* ---------- 2 · Subrayado trazado de la navegación (hover con puntero y foco de teclado) ---------- */
#nav a{position:relative}
#nav a::after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--space-1)*-.5);height:var(--rule);background:var(--rm-ink-050);
  transform:scaleX(0);transform-origin:left;transition:transform var(--rm-dur-2) var(--rm-ease-trazo)}
#nav a:focus-visible::after{transform:none}
@media(hover:hover){
  #nav a:hover{text-decoration:none}
  #nav a:hover::after{transform:none}
}

/* ---------- 3 · Imágenes: fundido al cargar (solo opacity) ---------- */
.slot img.rm-in{transition:opacity var(--rm-dur-4) var(--rm-ease-out)}
.slot--hero img.rm-in{transition-duration:var(--rm-dur-3)}

/* ---------- 4 · Aparecer al hacer scroll · necesita JS (movimiento.js) · el estado oculto existe SOLO con html.rm-anim ----------
   data-rm="asentar" | "fundir" | "marcador"  = un elemento suelto.   data-rm-grupo="asentar" | "cota" = una lista que entra en cascada.
   movimiento.js agrega .rm-in cuando entra en pantalla (una sola vez) y numera a los hijos de cada grupo en --i. */
.rm-anim [data-rm=asentar],.rm-anim [data-rm-grupo=asentar]>*{opacity:0;transform:translateY(var(--rm-dy,var(--space-4)))}
.rm-anim [data-rm=fundir],.rm-anim [data-rm=marcador]{opacity:0;--rm-dur:var(--rm-dur-3)}
.rm-anim [data-rm].rm-in,.rm-anim [data-rm-grupo=asentar].rm-in>*{--w:calc(var(--rm-base,0ms) + var(--i,0)*var(--rm-stagger));opacity:1;transform:none;
  transition:opacity var(--rm-dur,var(--rm-dur-4)) var(--rm-ease-out) var(--w),transform var(--rm-dur,var(--rm-dur-4)) var(--rm-ease-out) var(--w)}

/* Parámetros por lista (distancia de entrada, duración y demora inicial) */
.razones{--rm-dy:var(--space-2);--rm-base:calc(var(--rm-u)*4)}   /* las filas empiezan 160 ms después de que arranca la regla */
.fases{--rm-dy:var(--space-2);--rm-base:calc(var(--rm-u)*4)}
#incluye-lista{--rm-dy:var(--space-2);--rm-dur:var(--rm-dur-3)}
.grid-precios,#estudio-texto{--rm-dy:var(--space-4)}

/* Razones y fases: la regla fuerte de 2 px se traza de izquierda a derecha y las filas se asientan sobre ella */
.rm-anim .razones,.rm-anim .fases{position:relative;border-top-color:transparent}
.rm-anim .razones::before,.rm-anim .fases::before{content:"";position:absolute;left:0;right:0;top:calc(var(--rule-strong)*-1);height:var(--rule-strong);background:var(--rm-ink-900);transform:scaleX(0);transform-origin:left}
.rm-anim .razones.rm-in::before,.rm-anim .fases.rm-in::before{transform:none;transition:transform var(--rm-dur-5) var(--rm-ease-trazo)}

/* Precios: el marcador de Óxido del aviso se traza de abajo hacia arriba (segundo y último gesto de Óxido de la página) */
.rm-anim .aviso-precio{position:relative;border-left-color:transparent}
.rm-anim .aviso-precio::before{content:"";position:absolute;left:calc(var(--rule-accent)*-1);top:0;bottom:0;width:var(--rule-accent);background:var(--rm-accent-500);transform:scaleY(0);transform-origin:bottom}
.rm-anim .aviso-precio.rm-in::before{transform:none;transition:transform var(--rm-dur-4) var(--rm-ease-trazo)}

/* Precios: cota de pagos 40/30/30. La línea se traza, las marcas oblicuas y las etiquetas aparecen. Ninguna cifra se cuenta ni se mueve. */
.rm-anim .cota-linea{transform:scaleX(0);transform-origin:left}
.rm-anim .cota-marca{opacity:0}
.rm-anim .cota-et>span{opacity:0}
.rm-anim .cota.rm-in .cota-linea{transform:none;transition:transform var(--rm-dur-5) var(--rm-ease-trazo)}
.rm-anim .cota.rm-in .cota-marca{opacity:1;transition:opacity var(--rm-dur-3) var(--rm-ease-out) calc(var(--i,0)*var(--rm-stagger))}
.rm-anim .cota.rm-in .cota-et>span{opacity:1;transition:opacity var(--rm-dur-3) var(--rm-ease-out) calc((var(--i,0) + 2)*var(--rm-stagger))}

}