.obp-page-state {
  display: grid;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  width: min(100%, 108rem);
  margin-inline: auto;
}

.obp-page-state__hero,
.obp-page-state__surface {
  width: min(100%, var(--wp--style--global--wide-size, 1200px));
  margin-inline: auto;
}

.obp-page-state__hero,
.obp-page-state__surface {
  box-sizing: border-box;
  border-radius: var(--pd-radius-xl, 28px);
}

.obp-page-state__hero {
  display: grid;
  gap: clamp(0.9rem, 1.8vw, 1.3rem);
  padding: clamp(1.35rem, 3vw, 2.2rem);
  color: var(--pd-editorial-hero-text, var(--wp--preset--color--texto, #e7eef9));
  border: 1px solid var(--pd-editorial-hero-border, rgba(255, 255, 255, 0.12));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--pd-editorial-accent-default, #2f5ad8) 14%, transparent), transparent 34%),
    var(--pd-editorial-hero-background, linear-gradient(145deg, #162338, #0f1826));
  box-shadow: var(--pd-shadow-hero, 0 30px 70px rgba(2, 8, 20, 0.42));
}

.obp-page-state__eyebrow {
  margin: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 74%, transparent);
}

.obp-page-state__title {
  margin: 0;
  color: var(--pd-editorial-hero-title, var(--wp--preset--color--blanco, #f5f8ff));
}

.obp-page-state__message,
.obp-page-state__support {
  margin: 0;
  max-width: 52rem;
}

.obp-page-state__surface {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
  border: 1px solid var(--pd-editorial-surface-border, rgba(255, 255, 255, 0.1));
  color: var(--pd-editorial-surface-text, var(--wp--preset--color--texto, #e7eef9));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pd-editorial-surface-background, #141f31) 96%, transparent), color-mix(in srgb, var(--pd-editorial-surface-background, #141f31) 88%, var(--wp--preset--color--fondo, #07111d)));
  box-shadow: var(--pd-shadow-card, 0 24px 50px rgba(2, 8, 20, 0.34));
}

.obp-page-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.obp-page-state__actions .wp-block-button {
  margin: 0;
}

.obp-page-state__actions .wp-block-button__link {
  min-width: 11rem;
  text-align: center;
}

.obp-state-construction {
  --pd-editorial-accent-default: var(--wp--preset--color--azul-principal, #2f5ad8);
}

.obp-state-maintenance {
  --pd-editorial-accent-default: #f59e0b;
}

.obp-state-offline {
  --pd-editorial-accent-default: #ef4444;
}

@media (max-width: 781px) {
  .obp-page-state__actions {
    flex-direction: column;
  }

  .obp-page-state__actions .wp-block-button,
  .obp-page-state__actions .wp-block-button__link {
    width: 100%;
  }
}