/* ===================================================================
   SUPERMATIC — Soporte page styles (mobile-first)
   =================================================================== */

/* ── Hero ───────────────────────────────────────────────────────── */
.soporte-hero {
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--sm-line);
}
.soporte-hero h1 { margin-top: var(--gap-sm); }

/* ── Support channel cards ──────────────────────────────────────── */
.soporte-channels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
  margin-top: var(--gap-lg);
}
@media (min-width: 620px) {
  .soporte-channels { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .soporte-channels { grid-template-columns: repeat(3, 1fr); }
}

.soporte-card {
  background: var(--sm-paper);
  border: 1px solid var(--sm-line);
  border-radius: var(--radius);
  padding: var(--gap-md);
  display: flex;
  flex-direction: column;
}
.soporte-card__icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: var(--gap-sm);
}
.soporte-card h3 {
  font-size: 1rem;
  color: var(--sm-graphite);
  margin-bottom: 8px;
}
.soporte-card p {
  font-size: 0.875rem;
  color: var(--sm-mute-2);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 0;
}
.soporte-card p .pending {
  font-style: italic;
  color: var(--sm-mute);
}
.soporte-card__action {
  margin-top: var(--gap-md);
}

/* ── FAQ ────────────────────────────────────────────────────────── */
.soporte-faq h2 {
  margin-bottom: var(--gap-lg);
}

.faq-list {
  max-width: 720px;
}
.faq-item {
  border-bottom: 1px solid var(--sm-line);
}
.faq-item:first-child { border-top: 1px solid var(--sm-line); }

.faq-item summary {
  list-style: none;
  padding: 18px 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--sm-graphite);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-md);
  user-select: none;
  -webkit-user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--sm-red);
  line-height: 1;
  flex-shrink: 0;
}
.faq-item[open] > summary::after { content: '−'; }
.faq-item summary:focus-visible {
  outline: 2px solid var(--sm-red);
  outline-offset: 2px;
  border-radius: 2px;
}

.faq-answer {
  padding-bottom: var(--gap-md);
  font-size: 0.9rem;
  color: var(--sm-mute-2);
  line-height: 1.7;
}
.faq-answer a {
  color: var(--sm-red);
  font-weight: 500;
}
.faq-answer a:hover { text-decoration: underline; }
.faq-answer .pending {
  font-style: italic;
  color: var(--sm-mute);
}

/* ── Bottom CTA ─────────────────────────────────────────────────── */
.soporte-cta {
  text-align: center;
}
.soporte-cta h2 {
  margin-bottom: var(--gap-sm);
}
.soporte-cta p {
  color: var(--sm-mute-2);
  max-width: 400px;
  margin: 0 auto var(--gap-lg);
  line-height: 1.65;
}