/* ============================================================
   EYUB' - soporte.css
   ============================================================ */

/* ---------- Tiempos de respuesta ---------- */
.respuesta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--borde);
}
.respuesta__item {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.4rem 1.3rem;
  background: var(--fondo-alt);
}
.respuesta__item > .ico { color: var(--acento); }
.respuesta__item strong { font-family: var(--fuente-titulo); font-size: .98rem; font-weight: 700; }
.respuesta__item small  { font-size: .8rem; color: var(--texto-ter); line-height: 1.45; }

/* ---------- Tarjeta de servicio ---------- */
.soporte-item { display: flex; flex-direction: column; }
.soporte-item p { flex: 1; margin-bottom: 1rem; }

/* ---------- Flujo de atencion ---------- */
.flujo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 1rem;
  margin-bottom: 2.4rem;
}

.flujo__paso {
  position: relative;
  padding: 1.6rem 1.3rem 1.3rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
  transition: all var(--normal) var(--ease);
}
.flujo__paso:hover { border-color: var(--azul-interactivo); transform: translateY(-4px); }

.flujo__num {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  margin-bottom: .9rem;
  border-radius: 50%;
  font-family: var(--fuente-titulo);
  font-size: .82rem;
  font-weight: 800;
  color: var(--acento);
  background: rgba(1, 28, 89, .12);
  border: 1px solid rgba(1, 28, 89, .3);
  transition: all var(--normal) var(--ease-out);
}
.flujo__paso:hover .flujo__num { color: #fff; background: var(--azul-interactivo); border-color: var(--azul-interactivo); }

.flujo__paso h4 { margin-bottom: .35rem; font-size: 1rem; }
.flujo__paso p  { font-size: .85rem; color: var(--texto-sec); }

/* ---------- Tarjeta de tickets (proximamente) ---------- */
.ticket {
  padding: clamp(1.8rem, 3.5vw, 2.6rem);
  border-radius: var(--radio-lg);
  border: 1px dashed var(--borde-fuerte);
  background: var(--superficie);
  backdrop-filter: blur(12px);
}
.ticket__cabeza { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.ticket p { color: var(--texto-sec); max-width: 78ch; font-size: .96rem; }
.ticket em { color: var(--acento); font-style: normal; font-weight: 600; }

.ticket__estados {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
}
.ticket__estados span {
  position: relative;
  padding: .5rem 1rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--texto-ter);
  border-radius: var(--radio-full);
  border: 1px solid var(--borde);
  background: var(--superficie-2);
}
.ticket__estados span:first-child {
  color: var(--whatsapp);
  border-color: rgba(37, 211, 102, .35);
  background: rgba(37, 211, 102, .10);
}

/* ---------- Llamado urgente ---------- */
.urgente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--radio-lg);
  border: 1px solid rgba(37, 211, 102, .3);
  background:
    radial-gradient(600px 300px at 85% 20%, rgba(37, 211, 102, .14), transparent 62%),
    var(--superficie);
}
.urgente h3 { margin-bottom: .4rem; }
.urgente p  { color: var(--texto-sec); font-size: .95rem; }