/* Página en construcción (/en-construccion/): un dibujo animado, el título y una línea.

   Va montada sobre /css/landing.css, que se carga antes y no se toca: de allá salen la paleta
   (`--l-*`), la cabeza, el azul noche con puntos (`.zona-noche`) y el pie. Acá va solo lo
   propio, con el prefijo `obra-`.

   El dibujo usa el lenguaje de los de OtherVision Academy: trazo celeste, relleno azul, un
   punto rojo que late. Las animaciones son de CSS y quien pidió menos movimiento las ve
   quietas.

   Orden: el bloque → el dibujo y sus piezas → las animaciones → menos movimiento. */

/* ---------- El bloque ---------- */

/* Llena la ventana debajo de la cabeza, con el contenido al medio; el pie queda abajo. */
.obra {
  display: grid;
  place-items: center;
  min-height: 82svh;
  padding: calc(var(--l-alto-nav) + clamp(2rem, 5vw, 4rem)) var(--l-pad) clamp(3rem, 7vw, 5.5rem);
}

.obra-interior {
  display: grid;
  justify-items: center;
  gap: var(--esp-4);
  max-width: 44rem;
  text-align: center;
}

.obra-interior h1 {
  font-family: var(--l-fuente-titulo);
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.obra-interior p {
  max-width: 34rem;
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.45;
  color: var(--l-sobre-noche-2);
  text-wrap: balance;
}

/* ---------- El dibujo ---------- */

.obra-dibujo {
  width: min(26rem, 100%);
  aspect-ratio: 32 / 21;
  margin-bottom: var(--esp-2);
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.obra-dibujo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.obra-trazo,
.obra-contorno {
  fill: none;
  stroke: var(--l-celeste);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.obra-fino,
.obra-contorno {
  stroke-width: 2.5;
}

.obra-guia {
  fill: none;
  stroke: rgba(169, 210, 255, 0.35);
  stroke-width: 2;
  stroke-dasharray: 6 8;
}

.obra-relleno {
  fill: #3b8bff;
}

.obra-suave {
  fill: rgba(59, 139, 255, 0.28);
}

.obra-blanco {
  fill: #fff;
}

/* El cable no lleva punta redonda: se estira, y una punta redonda se estiraría con él. */
.obra-cable {
  stroke: var(--l-celeste);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: obra-cable 4.8s ease-in-out infinite;
}

/* ---------- Las animaciones ----------
   El cable y el bloque comparten duración y curva: el bloque baja exactamente lo que el cable
   se estira (de 26 a 48 de largo, 22 de bajada). */

.obra-luz {
  fill: #ff6b6b;
  animation: obra-late 1.2s ease-in-out infinite;
}

.obra-bloque {
  animation: obra-baja 4.8s ease-in-out infinite;
}

/* Punta recta: con la redonda, mientras el trazo todavía no empezó a dibujarse, quedaban
   puntitos en cada esquina. */
.obra-contorno {
  stroke-linecap: butt;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: obra-dibuja 4.8s ease-in-out infinite;
}

.obra-punto {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: obra-aparece 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.22s);
}

@keyframes obra-late {
  50% {
    opacity: 0.35;
  }
}

@keyframes obra-baja {
  0%,
  15% {
    transform: translateY(0);
  }
  50%,
  65% {
    transform: translateY(22px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes obra-cable {
  0%,
  15% {
    transform: scaleY(1);
  }
  50%,
  65% {
    transform: scaleY(1.8462);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes obra-dibuja {
  0% {
    stroke-dashoffset: 1;
  }
  45%,
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1;
  }
}

@keyframes obra-aparece {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  20%,
  70% {
    opacity: 1;
    transform: scale(1);
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}

/* ---------- Menos movimiento ----------
   El dibujo queda armado y quieto: el bloque arriba, el contorno entero y los puntos a la
   vista. */

@media (prefers-reduced-motion: reduce) {
  .obra-dibujo * {
    animation: none !important;
  }

  .obra-contorno {
    stroke-dashoffset: 0;
  }

  .obra-punto {
    opacity: 1;
  }
}