/* Páginas de error (403 / 404): hero centrado que libra el header fijo.
   El markup vive en templates/page/page--403.html.twig y page--404.html.twig. */

.page-error .error-hero {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 8rem 0 4rem;
  background: var(--color-surface);
}

.error-inner {
  text-align: center;
}

.error-code {
  margin-bottom: 0.5rem;
  font-size: clamp(5rem, 16vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-gray-light-light);
}

.error-title {
  margin-bottom: 0.75rem;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.error-text {
  max-width: 34rem;
  margin: 0 auto 2rem;
  color: var(--color-gray);
  line-height: 1.65;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.error-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.6rem;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth),
    background 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth);
}

.error-btn:hover,
.error-btn:focus-visible {
  background: var(--color-ink-soft);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(10, 10, 10, 0.15);
}

/* Variante secundaria (Iniciar sesión en la 403) */
.error-btn-outline {
  background: transparent;
  color: var(--color-ink);
}

.error-btn-outline:hover,
.error-btn-outline:focus-visible {
  background: var(--color-ink);
  color: var(--color-white);
}