/* ===========================================================
   ACUARELA EN MOVIMIENTO v1 · Método ACD-IA® — Alpint
   Pinta encima del sitio existente. Hereda los roles de color
   de css/lienzo.css (--lz-ink, --lz-primary, --lz-depth,
   --lz-emotion, --lz-light, --lz-life, --lz-paper, --lz-chat).
   Simplificación deliberada por rendimiento (pedido explícito
   del cliente): sin filtros feTurbulence/feDisplacementMap —
   los bordes "orgánicos" se logran con curvas dibujadas a mano,
   no con desplazamiento de píxeles (más liviano en equipos viejos).
   =========================================================== */

/* -------- Lavados de acuarela detrás de las 4 tarjetas de Soluciones -------- */
.lz-wash-host{ position:relative; isolation:isolate; }
.lz-wash{
  position:absolute; inset:-14px -14px auto -14px;
  height:calc(100% + 28px);
  z-index:-1;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.1s ease;
}
.lz-wash-host.is-visible .lz-wash{ opacity:1; }
.lz-wash ellipse{ opacity:.5; }

/* -------- Foco de galería alrededor de la foto de bodega (Por qué Alpint) -------- */
.lz-gallery-frame{
  position:relative;
  isolation:isolate;
}
.lz-gallery-frame::before{
  content:'';
  position:absolute; inset:-10px;
  z-index:-1;
  border-radius:4px;
  background:linear-gradient(135deg, var(--lz-light), #B9802E 45%, var(--lz-light));
  opacity:0;
  transition:opacity .8s ease;
}
.lz-gallery-frame.is-visible::before{ opacity:1; }
.lz-gallery-spot{
  position:absolute; top:-60px; left:50%;
  width:340px; height:260px;
  transform:translateX(-50%);
  z-index:1;
  pointer-events:none;
  background:conic-gradient(from 200deg at 50% 0%, rgba(255,250,240,.22), rgba(255,250,240,.05) 18deg, transparent 32deg);
  opacity:0;
  transition:opacity 1s ease .3s;
}
.lz-gallery-frame.is-visible .lz-gallery-spot{ opacity:1; }

/* -------- Escena pintada del cierre -------- */
.lz-scene-wrap{
  position:relative;
  width:100%;
  max-width:1600px;
  margin:0 auto;
  aspect-ratio:1600/360;
  overflow:hidden;
  background:#1a3a5c;
  isolation:isolate;
}
.lz-scene-wrap svg{ display:block; width:100%; height:100%; }
.lz-scene-caption{
  position:absolute; right:14px; bottom:10px; z-index:3;
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.04em;
  color:rgba(255,255,255,.65);
  pointer-events:none;
}
.lz-scene-pause{
  position:absolute; left:14px; bottom:10px; z-index:3;
  font-family:'IBM Plex Mono', monospace; font-size:11px;
  background:rgba(8,27,56,.55); color:#fff; border:1px solid rgba(255,255,255,.3);
  border-radius:3px; padding:5px 10px; cursor:pointer;
}
.lz-scene-pause:hover{ background:rgba(8,27,56,.8); }

/* Piezas animadas — solo transform y opacity, duración compartida 46s */
.lz-scene-wrap.is-playing .lz-s-fog{ animation:lz-sc-fog 46s linear infinite; }
.lz-scene-wrap.is-playing .lz-s-tower{ animation:lz-sc-tower 46s linear infinite; }
.lz-scene-wrap.is-playing .lz-s-truck{ animation:lz-sc-truck 46s linear infinite; }
.lz-scene-wrap.is-playing .lz-s-rain{ animation:lz-sc-rain 46s linear infinite; }
.lz-scene-wrap.is-playing .lz-s-building{ animation:lz-sc-building 46s linear infinite; }
.lz-scene-wrap.is-playing .lz-s-workers{ animation:lz-sc-workers 46s linear infinite; }
.lz-scene-wrap.is-playing .lz-s-flag{ animation:lz-sc-flag 46s linear infinite; }
.lz-scene-wrap.is-playing .lz-s-night{ animation:lz-sc-night 46s linear infinite; }
.lz-scene-wrap.is-playing .lz-s-stars circle{ animation:lz-sc-stars 46s linear infinite; }
.lz-scene-wrap.is-playing .lz-s-logo{ animation:lz-sc-logo 46s linear infinite; }
.lz-scene-wrap.is-playing .lz-s-brush{ animation:lz-sc-brush 46s linear infinite; }

.lz-scene-wrap.is-paused .lz-s-fog,
.lz-scene-wrap.is-paused .lz-s-tower,
.lz-scene-wrap.is-paused .lz-s-truck,
.lz-scene-wrap.is-paused .lz-s-rain,
.lz-scene-wrap.is-paused .lz-s-building,
.lz-scene-wrap.is-paused .lz-s-workers,
.lz-scene-wrap.is-paused .lz-s-flag,
.lz-scene-wrap.is-paused .lz-s-night,
.lz-scene-wrap.is-paused .lz-s-stars circle,
.lz-scene-wrap.is-paused .lz-s-logo,
.lz-scene-wrap.is-paused .lz-s-brush{
  animation-play-state:paused;
}
.lz-s-logo, .lz-s-brush{ transform-origin:0px 0px; }

/* Guion reordenado: el camión llega y se estaciona primero (0-14%);
   solo entonces se levantan las alzaprimas/andamios junto al edificio,
   que ahora sube más alto que antes (14-50%); una lluvia breve pasa
   mientras se termina de construir (50-66%); se entrega con bandera,
   trabajadores y ciudad despejada alrededor (66-88%); cae la noche y
   aparecen las estrellas antes de reiniciar el ciclo (88-97%). */
@keyframes lz-sc-fog{
  0%{ opacity:.8; } 8%{ opacity:.8; } 16%{ opacity:0; } 90%{ opacity:0; } 100%{ opacity:.8; }
}
@keyframes lz-sc-truck{
  0%,2%{ transform:translateX(-260px); } 14%,100%{ transform:translateX(0); }
}
@keyframes lz-sc-tower{
  0%,14%{ transform:scaleY(0); } 40%,88%{ transform:scaleY(1); } 100%{ transform:scaleY(0); }
}
@keyframes lz-sc-building{
  0%,16%{ transform:scaleY(.18); } 50%,88%{ transform:scaleY(1); } 100%{ transform:scaleY(.18); }
}
@keyframes lz-sc-rain{
  0%,48%{ opacity:0; } 54%,64%{ opacity:.55; } 70%,100%{ opacity:0; }
}
@keyframes lz-sc-workers{
  0%,58%{ opacity:0; transform:translateY(6px); } 66%,88%{ opacity:1; transform:translateY(0); } 100%{ opacity:0; transform:translateY(6px); }
}
@keyframes lz-sc-flag{
  0%,62%{ opacity:0; transform:scale(.4); } 70%,88%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(.4); }
}
@keyframes lz-sc-night{
  0%,82%{ opacity:0; } 90%,97%{ opacity:.9; } 100%{ opacity:0; }
}
@keyframes lz-sc-stars{
  0%,82%{ opacity:0; } 90%,97%{ opacity:1; } 100%{ opacity:0; }
}
/* Remate: el isotipo de Alpint "se estampa" en lo alto del edificio,
   como la firma de un cuadro, justo antes de que caiga la noche. */
@keyframes lz-sc-logo{
  0%,76%{ opacity:0; transform:scale(.5) rotate(-9deg); }
  86%,90%{ opacity:1; transform:scale(1) rotate(0deg); }
  100%{ opacity:0; transform:scale(.5) rotate(-9deg); }
}
@keyframes lz-sc-brush{
  0%,78%{ opacity:0; }
  87%,90%{ opacity:.8; }
  100%{ opacity:0; }
}

/* Estado final estático (prefers-reduced-motion o equipos limitados):
   sin keyframes — se fijan directamente los valores del acto "Entregar". */
.lz-scene-wrap.lz-scene-final .lz-s-fog{ opacity:0; }
.lz-scene-wrap.lz-scene-final .lz-s-tower{ transform:scaleY(1); }
.lz-scene-wrap.lz-scene-final .lz-s-truck{ transform:translateX(0); }
.lz-scene-wrap.lz-scene-final .lz-s-rain{ opacity:0; }
.lz-scene-wrap.lz-scene-final .lz-s-building{ transform:scaleY(1); }
.lz-scene-wrap.lz-scene-final .lz-s-workers{ opacity:1; transform:translateY(0); }
.lz-scene-wrap.lz-scene-final .lz-s-flag{ opacity:1; transform:scale(1); }
.lz-scene-wrap.lz-scene-final .lz-s-night{ opacity:0; }
.lz-scene-wrap.lz-scene-final .lz-s-stars circle{ opacity:0; }
.lz-scene-wrap.lz-scene-final .lz-s-logo{ opacity:1; transform:scale(1) rotate(0deg); }
.lz-scene-wrap.lz-scene-final .lz-s-brush{ opacity:.8; }
.lz-scene-wrap.lz-scene-final .lz-scene-pause{ display:none; }

@media (prefers-reduced-motion: reduce){
  .lz-wash{ transition:none; opacity:1; }
  .lz-gallery-frame::before, .lz-gallery-spot{ transition:none; opacity:1; }
}

@media (max-width:760px){
  .lz-scene-caption{ display:none; }
}