/* AddSupply — página SPA (Supplies Purchase Agreement)
   Portada «cortina de luz»: una línea de luz aparece al centro y se abre como cortina sobre la
   foto, que se acerca despacio; luego entran SPA, el significado, el lema y los botones.
   Al bajar, cada una de las tres ideas entra con el mismo barrido de luz sobre una foto nueva.
   Sin la clase .movimiento (sin JavaScript o con «reducir movimiento») todo se ve quieto. */

/* ---------- Portada ---------- */
.spa-intro {
  position: relative; overflow: hidden; isolation: isolate; text-align: center; background: #0d0e10;
  min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h));
  display: grid; place-items: center; padding: 56px 0 80px;
}
.spa-portada-foto { position: absolute; inset: 0; z-index: -1; background: url("../img/spa-pasillo.jpg") 50% 45% / cover no-repeat; }
.spa-portada-foto::after { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 45% at 50% 52%, rgba(13,14,16,.72), rgba(13,14,16,.25) 100%), linear-gradient(180deg, rgba(13,14,16,.4) 0%, rgba(13,14,16,.2) 40%, rgba(13,14,16,.92) 100%); }
.spa-luz { display: none; }
.spa-intro-contenido { position: relative; z-index: 1; }
.spa-marca { width: clamp(132px, 26vw, 210px); margin: 0 auto 22px; }
.spa-marca svg { display: block; width: 100%; height: auto; overflow: visible; }
.spa-disco { fill: rgba(17,18,20,.88); }
.spa-anillo { fill: none; stroke: var(--rojo-trazo); stroke-width: 3; }
.spa-marca text { font: 700 74px/1 var(--display); letter-spacing: 2px; fill: var(--blanco); }
.spa-siglas { font: 600 clamp(.9rem, 1.8vw, 1.15rem)/1.2 var(--display); letter-spacing: .34em; margin: 0 -.34em 0 0; text-transform: uppercase; color: var(--gris-claro); }
.spa-lema { font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: .95; margin: 18px auto 0; max-width: 16ch; }
.spa-lema em { font-style: normal; color: var(--rojo-claro); }
.spa-acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.spa-intro .desliza { display: none; }

/* Con movimiento: arranca una vez que la tipografía cargó (.listo) */
.movimiento .spa-portada-foto { clip-path: inset(0 50% 0 50%); transform: scale(1.18); }
.movimiento .spa-luz { display: block; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; z-index: 0; background: linear-gradient(180deg, transparent, #fff 30%, var(--rojo-claro) 70%, transparent); box-shadow: 0 0 22px 3px rgba(255,90,79,.55); transform: scaleY(0); opacity: 0; }
.movimiento .spa-siglas, .movimiento .spa-lema, .movimiento .spa-acciones { opacity: 0; transform: translateY(14px); }
.movimiento .spa-marca { opacity: 0; transform: scale(.82); }
.movimiento .spa-anillo { stroke-dasharray: 1; stroke-dashoffset: 1; }
.movimiento .spa-intro.listo .spa-luz { animation: spa-luz 2.2s cubic-bezier(.65,0,.35,1) forwards; }
.movimiento .spa-intro.listo .spa-portada-foto { animation: spa-abre 1.9s cubic-bezier(.77,0,.18,1) .7s forwards, spa-acerca 9s ease-out .7s forwards; }
.movimiento .spa-intro.listo .spa-marca { animation: spa-sube 1.1s cubic-bezier(.2,.7,.2,1) 1.5s forwards; }
.movimiento .spa-intro.listo .spa-anillo { animation: spa-traza 1.4s cubic-bezier(.65,0,.35,1) 1.8s forwards; }
.movimiento .spa-intro.listo .spa-siglas { animation: spa-sube 1s cubic-bezier(.2,.7,.2,1) 1.8s forwards; }
.movimiento .spa-intro.listo .spa-lema { animation: spa-sube 1s cubic-bezier(.2,.7,.2,1) 2.1s forwards; }
.movimiento .spa-intro.listo .spa-acciones { animation: spa-sube 1s cubic-bezier(.2,.7,.2,1) 2.4s forwards; }
.movimiento .spa-intro .desliza { display: flex; position: absolute; left: 50%; bottom: 18px; z-index: 2; transform: translateX(-50%); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #9aa0a7; flex-direction: column; align-items: center; gap: 8px; }
.desliza i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--rojo-claro), transparent); animation: desliza 1.8s ease-in-out infinite; }
@keyframes desliza { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@keyframes spa-luz { 0% { opacity: 1; transform: scaleY(0); } 30% { opacity: 1; transform: scaleY(1); } 60% { opacity: 1; } 100% { opacity: 0; transform: scaleY(1) scaleX(40); } }
@keyframes spa-abre { to { clip-path: inset(0 0 0 0); } }
@keyframes spa-acerca { to { transform: scale(1); } }
@keyframes spa-sube { to { opacity: 1; transform: none; } }
@keyframes spa-traza { to { stroke-dashoffset: 0; } }

/* ---------- Escena al bajar: barridos de luz entre tres fotos ---------- */
.spa-escena { position: relative; background: #0d0e10; }
.spa-escena-fija { position: relative; overflow: hidden; display: grid; }
.spa-capa, .spa-barrido, .spa-riel { display: none; }
/* Sin movimiento: cada idea es un bloque sobre su foto */
.spa-idea { position: relative; padding-top: clamp(72px, 12vw, 128px); padding-bottom: clamp(72px, 12vw, 128px); }
.spa-idea::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: linear-gradient(90deg, rgba(13,14,16,.88), rgba(13,14,16,.45)), url("../img/spa-acuerdo.jpg") center / cover no-repeat; }
.spa-idea:nth-of-type(5)::before { background-image: linear-gradient(90deg, rgba(13,14,16,.88), rgba(13,14,16,.45)), url("../img/spa-almacen.jpg"); }
.spa-idea:nth-of-type(6)::before { background-image: linear-gradient(90deg, rgba(13,14,16,.88), rgba(13,14,16,.45)), url("../img/spa-stock.jpg"); }
.spa-idea h2 { font-size: clamp(2.6rem, 7vw, 5.6rem); margin: 0 0 10px; line-height: .95; max-width: 14ch; }
.spa-idea p { color: #e6e7e9; max-width: 46ch; font-size: clamp(1rem, 1.6vw, 1.15rem); margin: 0; }

.movimiento .spa-escena { height: 380vh; }
.movimiento .spa-escena-fija { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); display: block; }
.movimiento .spa-capa { display: block; position: absolute; inset: 0; background: var(--foto) center / cover no-repeat; clip-path: inset(0 100% 0 0); will-change: clip-path, transform; }
.movimiento .spa-capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,14,16,.86) 0%, rgba(13,14,16,.35) 70%), linear-gradient(180deg, rgba(13,14,16,0) 50%, rgba(13,14,16,.6) 100%); }
.movimiento .spa-barrido { display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; z-index: 3; background: linear-gradient(180deg, transparent, #fff 30%, var(--rojo-claro) 70%, transparent); box-shadow: 0 0 22px 3px rgba(255,90,79,.55); opacity: 0; will-change: transform, opacity; }
.movimiento .spa-idea { position: absolute; left: 0; right: 0; bottom: clamp(40px, 12vh, 110px); padding: 0 var(--gutter); z-index: 4; opacity: 0; will-change: opacity, transform; }
.movimiento .spa-idea::before { display: none; }
.movimiento .spa-riel { display: grid; position: absolute; z-index: 5; right: var(--gutter); top: 50%; transform: translateY(-50%); gap: 14px; }
.spa-riel span { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font: 600 15px/1 var(--display); letter-spacing: .1em; color: rgba(255,255,255,.45); transition: color .3s; }
.spa-riel span::after { content: ""; width: 22px; height: 2px; background: currentColor; transition: width .3s; }
.spa-riel span.activo { color: var(--blanco); }
.spa-riel span.activo::after { width: 40px; background: var(--rojo-claro); }
@media (max-width: 640px) { .movimiento .spa-riel { top: 18px; transform: none; gap: 6px; } }

/* ---------- ¿Qué es? ---------- */
.spa-que-es { align-items: center; }
.spa-pregunta { font: 600 clamp(1.3rem, 2.4vw, 1.7rem)/1.2 var(--display); color: var(--rojo-claro); margin: 0 0 16px; }
.spa-cifras { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.spa-cifras div { background: var(--acero); padding: clamp(24px, 4vw, 40px); display: grid; gap: 6px; }
.spa-cifras strong { font: 700 clamp(4rem, 10vw, 7.5rem)/.85 var(--display); color: var(--blanco); }
.spa-cifras div:first-child strong { color: var(--rojo-claro); }
.spa-cifras span { color: var(--gris-claro); font-size: 1.02rem; max-width: 32ch; }

@media (prefers-reduced-motion: reduce) { .desliza i { animation: none; } }