/* ============================================================
   Página "Sitio en construcción" — Grupo ARCUMA
   ============================================================ */

.cs {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Cinta de peligro animada */
.tape {
  height: 10px;
  background: repeating-linear-gradient(
    -45deg,
    var(--color-primary) 0 14px,
    transparent 14px 28px
  );
  background-color: color-mix(in oklab, var(--color-primary) 14%, var(--color-bg));
  background-size: 39.6px 39.6px;
  animation: tape-slide 1.6s linear infinite;
}
@keyframes tape-slide {
  to {
    background-position: 39.6px 0;
  }
}

.cs__main {
  display: grid;
  align-content: center;
  gap: clamp(var(--space-10), 5vw, var(--space-16));
  padding-block: clamp(var(--space-12), 7vw, var(--space-24));
}
.cs__grid {
  display: grid;
  gap: clamp(var(--space-10), 5vw, var(--space-16));
  align-items: center;
}
@media (min-width: 900px) {
  .cs__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.cs__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
}
.cs__badge i {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: currentColor;
  animation: blink 1.5s ease-in-out infinite;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.7);
  }
}

.cs h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: var(--space-6);
}
.cs h1 em {
  font-style: normal;
  color: var(--color-primary);
}
.cs__lede {
  color: var(--color-text-muted);
  margin-top: var(--space-5);
  max-width: 52ch;
}

.cs__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* Barra de avance */
.progress {
  margin-top: clamp(var(--space-10), 5vw, var(--space-12));
  max-width: 420px;
}
.progress__top {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.progress__track {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-divider);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  animation: fill 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}
@keyframes fill {
  to {
    width: 70%;
  }
}

/* Datos de contacto mientras tanto */
.cs__contact {
  display: grid;
  gap: var(--space-1);
  margin-top: clamp(var(--space-10), 5vw, var(--space-12));
  max-width: 460px;
}
.cs__contact li {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
  max-width: none;
}
.cs__contact li:last-child {
  border-bottom: 1px solid var(--color-divider);
}
.cs__contact .k {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cs__contact .v {
  font-weight: 600;
  text-decoration: none;
}
.cs__contact a.v:hover {
  color: var(--color-primary);
}

/* ---------- Escena animada ---------- */
.scene {
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  padding: clamp(var(--space-5), 3vw, var(--space-8));
}
.scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    var(--color-divider) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  opacity: 0.7;
}
.scene svg {
  position: relative;
  width: 100%;
  height: auto;
}

/* Trazado del edificio */
.draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Ladrillos que aparecen */
.brick {
  transform-box: fill-box;
  opacity: 0;
  animation: brick-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes brick-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Grúa: brazo fijo, gancho que baja y sube */
.hook {
  animation: hook 4.2s ease-in-out infinite;
}
@keyframes hook {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(16px);
  }
  70% {
    transform: translateY(4px);
  }
}

/* Engrane girando */
.gear {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 9s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.gear--rev {
  animation-direction: reverse;
  animation-duration: 6s;
}

/* Chispas de soldadura */
.spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: spark 1.4s ease-out infinite;
}
@keyframes spark {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  25% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tape,
  .cs__badge i,
  .hook,
  .gear,
  .spark {
    animation: none !important;
  }
  .draw {
    stroke-dashoffset: 0;
    animation: none;
  }
  .brick {
    opacity: 1;
    animation: none;
  }
  .progress__bar {
    width: 70%;
    animation: none;
  }
}

/* Encabezado y pie compactos */
.cs__header,
.cs__footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-5);
}
.cs__header {
  justify-content: space-between;
}
.cs__footer {
  border-top: 1px solid var(--color-divider);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Hormiga de marca en la escena */
.scene {
  position: relative;
}
.scene__hormiga {
  position: absolute;
  left: clamp(14px, 6%, 30px);
  bottom: clamp(10px, 4%, 30px);
  width: clamp(64px, 13%, 104px);
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 6px 14px oklch(0 0 0 / 0.35));
  animation: hormiga-entra 900ms cubic-bezier(0.16, 1, 0.3, 1) 2.4s both;
  pointer-events: none;
}
@keyframes hormiga-entra {
  from {
    opacity: 0;
    transform: translateY(14px) rotate(-6deg);
  }
  to {
    opacity: 0.95;
    transform: translateY(0) rotate(0deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene__hormiga {
    animation: none;
    opacity: 0.95;
  }
}