/* Estilos propios de las páginas de soporte.
   Se carga DESPUÉS de landing-v2.css y sólo agrega lo que falta:
   tipografía, contenedores, nav, botones y pie vienen de landing-v2.css. */

.section-soft { background: var(--surface-soft); }

.support-hero {
  padding: calc(var(--nav-height) + clamp(56px, 7vw, 96px)) 0 clamp(48px, 6vw, 80px);
  background:
    radial-gradient(circle at 82% 12%, rgba(215, 137, 24, .12), transparent 42%),
    linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
}

.support-hero h1 {
  max-width: 16ch;
  margin-bottom: 22px;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -.03em;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 44px;
}

.contact-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(30px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.contact-panel h2 { margin-bottom: 12px; }
.contact-panel p { max-width: 62ch; margin: 0; color: var(--ink-soft); }
.contact-panel .button-row { margin-top: 0; }

.support-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.support-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.support-card > span {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--amber-dark);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.support-card h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
  line-height: 1.2;
}

.support-card p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.support-card a {
  color: var(--amber-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 720px) {
  .contact-panel { flex-direction: column; align-items: flex-start; }
}