/* ═══════════════════════════════════════════════════════
   SignZen — Landing de Soporte Técnico (public/index.html)
   Complementa styles.css + soluciones-shared.css.
   Sólo estilos propios de esta landing.

   Se carga último en el <head> de index.html, después de soluciones-shared.css.
   .st-hero y .solucion-hero conviven en el mismo elemento con especificidad
   igual (una clase); por orden de carga, este archivo ya gana sin necesitar
   !important.
═══════════════════════════════════════════════════════ */

/* ── Hero: imagen de fondo, plano y oscuro, sin overlays decorativos ── */
.st-hero {
  background:
    linear-gradient(90deg, var(--navy) 0%, var(--navy) 40%, rgba(19, 22, 29, .55) 70%, rgba(19, 22, 29, .35) 100%),
    linear-gradient(135deg, rgba(19, 22, 29, .55) 0%, rgba(19, 22, 29, .30) 55%, rgba(19, 22, 29, .60) 100%),
    url('../img/soporte-hero-bg.png') center center / cover no-repeat,
    var(--navy);
  color: #fff;
  text-align: left;
}

/* sin círculo/glow ni grilla de puntos del patrón compartido */
.st-hero::before,
.st-hero::after {
  display: none;
}

.st-hero .solucion-hero__inner {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  align-items: flex-start;
  text-align: left;
}

.st-hero__title {
  color: #fff;
  max-width: 640px;
}

.st-hero__desc {
  color: rgba(255, 255, 255, .68);
  max-width: 560px;
}

/* ── Sección "Accesos" (patrón .help-card, aquí centralizado) ── */
.help-content {
  padding: 5rem 0 6rem;
  background: var(--white);
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.help-card {
  background: #fff;
  border: 1px solid #e5eaf5;
  border-radius: var(--radius-card);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  text-decoration: none;
}

.help-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 87, 255, .15);
  border-color: rgba(0, 87, 255, .3);
}

.help-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--ice);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.help-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
}

.help-card__desc {
  color: var(--slate);
  font-size: .925rem;
  line-height: 1.65;
  flex: 1;
}

.help-card__arrow {
  color: var(--brand);
  font-size: .85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Mismo breakpoint que el menú mobile de styles.css (768px): antes eran 900 y
   640, y entre 769 y 900 px el grid ya era mobile con el navbar todavía desktop. */
@media (max-width: 768px) {
  .help-grid { grid-template-columns: 1fr; max-width: 420px; }
  .help-content { padding: 3.5rem 0 4rem; }
}