/* ==========================================================================
   39 · SOPORTE BINDEXP — escribirnos o llamarnos  (5 de octubre de 2026)
   ==========================================================================
   Dos tarjetas: WhatsApp (lo normal) y llamar (lo urgente). Llamar cambia con
   el aparato: con el dedo, un botón que marca; con ratón, el número para
   copiar y un QR para marcar desde el celular. Lo decide `pointer`, no el
   ancho: un computador angosto sigue sin poder llamar. js/30-soporte.js. */

.sop { display: grid; gap: .8rem; }
.sop__op {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1rem 1.05rem; border-radius: var(--radio);
  background: var(--surface); border: 1.5px solid var(--linea-sutil);
  color: var(--tinta); text-decoration: none;
}
.sop__i {
  flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: 12px; font-size: 1.2rem; background: var(--crema-2); color: var(--tinta-2);
}
.sop__t { flex: 1; min-width: 0; display: grid; gap: .2rem; }
.sop__t b { font-size: 1rem; }
.sop__t small { font-size: .85rem; line-height: 1.45; color: var(--tinta-3); }

/* WhatsApp: verde, y toda la tarjeta es el enlace. */
.sop__op--wa { align-items: center; border-color: rgba(21,122,71,.28); background: var(--verde-sua);
  transition: transform var(--d-rapido) var(--ease), box-shadow var(--d-rapido) var(--ease); }
.sop__op--wa:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(21,122,71,.16); }
.sop__op--wa .sop__i { background: var(--verde); color: #fff; }
.sop__ir { flex: none; color: var(--verde); font-size: 1.1rem; }

/* Llamar: con el dedo, el botón; con ratón, el número y el QR. */
.sop__marcar { margin-top: .55rem; text-decoration: none; }
.sop__pc { display: none; margin-top: .55rem; gap: .9rem; align-items: center; grid-template-columns: 1fr auto; }
.sop__num { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.sop__num b { font: 700 1.5rem/1.1 var(--display); letter-spacing: .01em; color: var(--tinta); }
.sop__qr { margin: 0; display: grid; justify-items: center; gap: .35rem; max-width: 10.5rem; text-align: center; }
.sop__qr img { width: 132px; height: 132px; padding: 6px; border-radius: 12px; background: #fff;
  border: 1.5px solid var(--linea-sutil); image-rendering: pixelated; }
.sop__qr figcaption { font-size: .74rem; line-height: 1.35; color: var(--tinta-3); }
@media (hover: hover) and (pointer: fine) {
  .sop__marcar { display: none; }
  .sop__pc { display: grid; }
}
@media (max-width: 520px) {
  .sop__pc { grid-template-columns: 1fr; justify-items: start; }
}

/* El símbolo de BindExp, siempre dentro de su círculo blanco con su sombra
   suave, como el logo original (lo pidió Denisse: se ve mejor así). Sin la
   palabra: ya la dice el rótulo «Soporte BindExp». */
.bx-simbolo { display: grid; place-items: center; flex: none; width: 29px; height: 29px;
  margin: -.3rem -.2rem -.3rem -.3rem; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(33,22,16,.18), 0 0 0 1px rgba(33,22,16,.06); }
.bx-simbolo img { display: block; width: 20px; height: 20px; }
.modal__icono:has(.bx-simbolo--cab) { background: #fff; border-color: #fff; border-radius: 50%; }
.bx-simbolo--cab { width: auto; height: auto; margin: 0; background: none; box-shadow: none; }
.bx-simbolo--cab img { width: 34px; height: 34px; }