/* =====================================================================
   STATUS — Tema editorial para paginas de estado (404, gracias, error).
   Scopeado a .status-page (clase aplicada al <main>). Cargado siempre
   desde Base.astro (mismo patron que footer.css).
   ===================================================================== */

/* --- Top accent strip multicolor brand --- */
.status-page { position: relative; }
.status-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--brand-primary) 22%,
    var(--brand-secondary) 50%,
    var(--brand-primary) 78%,
    transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Hero centrado con grano sutil + radial gradient (igual que contacto) */
.status-page .status-hero {
  background:
    radial-gradient(ellipse 900px 460px at top center,
                    rgba(20, 68, 140, .04),
                    transparent 70%),
    #fff;
  padding: 96px 0 80px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.status-page .status-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(20, 68, 140, .055) 1px, transparent 0);
  background-size: 28px 28px;
  opacity: .3;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 80% at center, #000 30%, transparent 80%);
}
.status-page .status-hero > .container {
  position: relative;
  z-index: 1;
}

.status-page__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gray-20);
  background: #fff;
}
.status-page__icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.status-page__icon--success { border-color: var(--brand-secondary); }
.status-page__icon--success svg { stroke: var(--brand-secondary); }
.status-page__icon--warning { border-color: #b91c1c; }
.status-page__icon--warning svg { stroke: #b91c1c; }
.status-page__icon--info { border-color: var(--brand-primary); }
.status-page__icon--info svg { stroke: var(--brand-primary); }

.status-page__eyebrow {
  font-family: 'Montserrat', Inter, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .25em;
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  color: var(--brand-primary);
  margin: 0 auto 12px;
}
.status-page__title {
  font-family: 'Montserrat', Inter, system-ui, sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: var(--gray-90);
  margin: 0 auto 16px;
  max-width: 720px;
}
.status-page__lead {
  color: var(--gray-90);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 32px;
  font-size: 1rem;
}

.status-page__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.status-page__actions .btn {
  border-radius: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 12px 22px;
}
.status-page__actions .btn--primary {
  border: 1px solid var(--brand-primary);
}
.status-page__actions .btn--ghost {
  background: transparent;
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary);
}
.status-page__actions .btn--ghost:hover {
  background: var(--brand-primary);
  color: #fff;
}

/* --- 404: links utiles abajo del hero --- */
.status-page__helpful {
  background: #FAFAF7;
  border-top: 1px solid var(--gray-20);
  padding: 64px 0 80px;
}
.status-page__helpful-title {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: var(--brand-primary);
  text-align: center;
  margin: 0 0 32px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--brand-primary);
  display: inline-block;
}
.status-page__helpful .container {
  text-align: center;
}
.status-page__helpful-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
}
.status-page__helpful-card {
  background: #fff;
  border: 1px solid var(--gray-20);
  border-radius: 0;
  padding: 20px 24px;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.status-page__helpful-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(20, 68, 140, .08);
  border-color: var(--brand-primary);
}
.status-page__helpful-card-eyebrow {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--brand-primary);
  margin-bottom: 6px;
}
.status-page__helpful-card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--brand-primary);
  margin: 0;
}

@media (max-width: 720px) {
  .status-page .status-hero { padding: 64px 0 56px; }
  .status-page__helpful { padding: 48px 0 56px; }
}