/* /assets/css/no-exist.css — OneCut · Estilos página 404
   Complementa styles.css — no duplica variables ni reset
   ────────────────────────────────────────────────────── */

/* ════════════════════════════════════════
   LAYOUT PRINCIPAL — dos columnas
════════════════════════════════════════ */
.page-404 {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 80px 0 96px;
  min-height: calc(100dvh - 58px - 61px); /* viewport - header - footer */
}

.page-404__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0 80px;
}

/* ════════════════════════════════════════
   COLUMNA IZQUIERDA — símbolo
════════════════════════════════════════ */
.page-404__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Símbolo de corte OneCut */
.cut-symbol {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--font);
  font-size: clamp(48px, 8vw, 80px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--accent);
  user-select: none;
  will-change: transform;
}

/* Piezas del símbolo — posición inicial unidas */
.cut-left,
.cut-right {
  display: inline-block;
  opacity: 0;
  transform: translateX(0);
  /* La animación la dispara el JS añadiendo la clase .is-cut */
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity   0.35s ease;
}

.cut-slash {
  display: inline-block;
  opacity: 0;
  transform: scaleY(0.6);
  margin: 0 4px;
  transition:
    opacity   0.3s ease 0.15s,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

/* Estado inicial: todo visible antes del corte */
.cut-symbol.is-visible .cut-left,
.cut-symbol.is-visible .cut-right {
  opacity: 1;
}
.cut-symbol.is-visible .cut-slash {
  opacity: 1;
  transform: scaleY(1);
}

/* Estado "cortado": las líneas se separan */
.cut-symbol.is-cut .cut-left  {
  transform: translateX(-12px);
}
.cut-symbol.is-cut .cut-right {
  transform: translateX(12px);
}

/* ════════════════════════════════════════
   COLUMNA DERECHA — contenido
════════════════════════════════════════ */
.page-404__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Código numérico — decorativo, no semántico */
.page-404__code {
  font-size: clamp(96px, 18vw, 160px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--text-faint);
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 0.5s var(--ease) 0.02s forwards;
}

/* Título principal */
.page-404__title {
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--text);
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.5s var(--ease) 0.12s forwards;
}

/* Subtítulo */
.page-404__sub {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.5s var(--ease) 0.2s forwards;
}

/* CTA principal */
.page-404__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 12px 28px;
  background: var(--accent);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  border-radius: var(--radius);
  text-decoration: none;
  /* Sin sombra en reposo — aparece solo en hover */
  box-shadow: none;
  transition:
    background     0.18s ease,
    transform      0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow     0.18s ease;
  opacity: 0;
  animation: fadeUp 0.5s var(--ease) 0.28s forwards;
}

.page-404__cta:hover {
  background: var(--accent-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(107, 78, 255, 0.28);
}

.page-404__cta:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

/* Foco accesible */
.page-404__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ════════════════════════════════════════
   KEYFRAMES
════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ════════════════════════════════════════
   RESPONSIVE — mobile: columna única
════════════════════════════════════════ */
@media (max-width: 680px) {
  .page-404 {
    padding: 56px 0 72px;
    align-items: flex-start;
  }

  .page-404__grid {
    grid-template-columns: 1fr;
    gap: 48px 0;
  }

  /* Símbolo centrado arriba en mobile */
  .page-404__visual {
    justify-content: flex-start;
  }

  .page-404__content {
    align-items: flex-start;
  }
}

/* ════════════════════════════════════════
   REDUCCIÓN DE MOVIMIENTO
════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .page-404__code,
  .page-404__title,
  .page-404__sub,
  .page-404__cta {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .cut-left,
  .cut-right,
  .cut-slash {
    transition: none;
  }
}