/* ==========================================================================
   Temoc — /soporte
   La URL de soporte que las apps declaran en App Store Connect: la abre un
   socio con una duda y, antes que él, el revisor de Apple en un iPhone.
   Utilitaria y sin JS; toma tokens de styles.css y la prosa de formulario.css.
   ========================================================================== */

.soporte__entrada {
  margin: 0 0 6px;
  font: 400 17px/1.65 var(--font-text);
  color: var(--text-muted);
  max-width: 46ch;
}
.soporte h2 { margin-top: 42px; }

/* ---- Contacto: dos puertas, del tamaño de un pulgar ----------------------- */
.vias {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.soporte .via {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, .5);
  color: var(--text-display);
  transition: var(--transition-soft);
}
.soporte .via:hover { border-color: var(--tinta-900); background: #FFF; }
.via__texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.via__que {
  font: 500 11px/1.2 var(--font-text);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.via__dato {
  font: 500 17px/1.35 var(--font-text);
  color: var(--text-display);
  /* el correo no rompe la caja en pantallas angostas */
  overflow-wrap: anywhere;
}
.via__flecha {
  width: 20px; height: 20px;
  margin-left: auto; flex: none;
  color: var(--text-faint);
  transition: var(--transition-soft);
}
.soporte .via:hover .via__flecha { color: var(--tinta-900); transform: translateX(3px); }

/* ---- Preguntas ------------------------------------------------------------ */
.soporte h3 { font-size: 16px; }

/* ---- Eliminar tu cuenta ---------------------------------------------------
   Google Play lee esta sección al pie de la letra contra su checklist: qué app,
   qué pasos, qué se borra, qué se conserva y en cuánto tiempo. Por eso va a la
   vista —nada que desplegar, nada que buscar— y las rutas de cada app en el
   acento, que es el recurso con que el sistema marca lo que no se puede pasar
   por alto. Ancla estable: /soporte#eliminar-cuenta. ------------------------- */
.rutas {
  margin: 18px 0 26px;
  padding: 2px 20px;
  border: 1px solid var(--accent-300);
  border-radius: var(--radius-s);
  background: var(--accent-100);
}
.ruta { padding: 15px 0; }
.ruta + .ruta { border-top: 1px solid var(--accent-300); }
.ruta__app {
  display: block;
  margin-bottom: 4px;
  font: 500 11px/1.2 var(--font-text);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ruta__pasos {
  display: block;
  font: 500 16px/1.45 var(--font-text);
  color: var(--text-display);
}

/* Qué se borra, qué se queda y en cuánto: el mismo renglón etiqueta-dato de
   las vías de contacto, para que la página tenga un solo patrón. */
.borrado {
  margin: 0;
  border-top: 1px solid var(--border-hairline);
}
.borrado__fila {
  padding: 13px 0;
  border-bottom: 1px solid var(--border-hairline);
}
.borrado dt {
  margin-bottom: 3px;
  font: 500 11px/1.2 var(--font-text);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.borrado dd {
  margin: 0;
  font: 400 15px/1.65 var(--font-text);
  color: var(--text-body);
}

/* ---- Legal: los tres documentos, un renglón cada uno ---------------------- */
.soporte .legales {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-hairline);
}
.soporte .legales li { margin: 0; }
.soporte .legales a {
  display: block;
  padding: 15px 2px;
  border: 0;
  border-bottom: 1px solid var(--border-hairline);
  font: 400 15px/1.5 var(--font-text);
  color: var(--text-body);
  transition: var(--transition-soft);
}
.soporte .legales a:hover { color: var(--tinta-900); border-bottom-color: var(--tinta-900); }

@media (prefers-reduced-motion: reduce) {
  .soporte .via:hover .via__flecha { transform: none; }
}