/* ===========================================
   TMEX — /servicios/particulares/ (page 2340)
   Solo lo propio de esta pagina. Los componentes compartidos estan en hub-audiencia.css.
   Prefijo propio: sp-
   =========================================== */

/* ---- Seccion 2: ¿donde estas tu? (enrutador por situacion) ---- */
.tmex-landing .sp-where__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.tmex-landing .sp-where__or {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--tmex-font-title); font-weight: 800; font-size: 16px; color: var(--tmex-primary);
  background: #fff; border: 1.5px solid rgba(0,175,233,0.35); box-shadow: 0 10px 24px rgba(10,17,26,0.12);
}

.tmex-landing .sp-path {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 36px 36px 30px; border-radius: 22px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.tmex-landing .sp-path:hover { transform: translateY(-4px); }
.tmex-landing .sp-path__art { height: 120px; margin: -6px 0 18px; }
.tmex-landing .sp-path__art svg { height: 100%; width: auto; max-width: 100%; }
.tmex-landing .sp-path__kicker { font-family: var(--tmex-font-title); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.tmex-landing .sp-path h3 { font-size: 26px; margin-bottom: 10px; }
.tmex-landing .sp-path > p { font-size: 16px; margin-bottom: 22px; }

.tmex-landing .sp-path__list { list-style: none; margin-top: auto; }
.tmex-landing .sp-path__list li { border-top: 1px solid; }
.tmex-landing .sp-path__list a { display: flex; align-items: center; gap: 10px; padding: 13px 2px; font-family: var(--tmex-font-title); font-size: 16px; font-weight: 700; transition: gap .2s ease, padding .2s ease; }
.tmex-landing .sp-path__list a span { margin-left: auto; transition: transform .2s ease; }
.tmex-landing .sp-path__list a:hover { padding-left: 8px; }
.tmex-landing .sp-path__list a:hover span { transform: translateX(4px); }
.tmex-landing .sp-path__list em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }

/* Camino 1: en Bogota (claro) */
.tmex-landing .sp-path--city { color: var(--tmex-primary); background: linear-gradient(160deg, #F2FAFD 0%, #FFFFFF 75%); border: 1.5px solid var(--tmex-border); box-shadow: 0 16px 40px rgba(31,41,51,0.06); }
.tmex-landing .sp-path--city:hover { box-shadow: 0 22px 48px rgba(0,120,168,0.14); border-color: rgba(0,175,233,0.4); }
.tmex-landing .sp-path--city .sp-path__kicker { color: #0078A8; }
.tmex-landing .sp-path--city > p { color: var(--tmex-muted); }
.tmex-landing .sp-path--city .sp-path__list li { border-color: var(--tmex-border); }
.tmex-landing .sp-path--city .sp-path__list a { color: var(--tmex-dark); }
.tmex-landing .sp-path--city .sp-path__list a span { color: var(--tmex-primary); }
.tmex-landing .sp-path--city .sp-path__list a:hover { color: #0078A8; }

/* Camino 2: fuera de Bogota (oscuro, el de mas demanda) */
.tmex-landing .sp-path--remote {
  color: var(--tmex-primary);
  background: radial-gradient(circle at 90% 0%, rgba(0,175,233,0.35), transparent 55%), linear-gradient(160deg, #10203A 0%, #0A111A 100%);
  box-shadow: 0 22px 50px rgba(10,17,26,0.28);
}
.tmex-landing .sp-path--remote:hover { box-shadow: 0 28px 60px rgba(0,120,168,0.35); }
.tmex-landing .sp-path--remote .sp-path__kicker { color: var(--tmex-primary); }
.tmex-landing .sp-path--remote h3 { color: #fff; }
.tmex-landing .sp-path--remote > p { color: rgba(255,255,255,0.75); }
.tmex-landing .sp-path--remote .sp-path__list li { border-color: rgba(255,255,255,0.12); }
.tmex-landing .sp-path--remote .sp-path__list a { color: #fff; }
.tmex-landing .sp-path--remote .sp-path__list a span { color: var(--tmex-primary); }
.tmex-landing .sp-path--remote .sp-path__list a:hover { color: var(--tmex-primary); }
.tmex-landing .sp-path--remote .sp-path__list em { color: #0A111A; background: var(--tmex-primary); }

@media (prefers-reduced-motion: reduce) {
  .tmex-landing .sp-path, .tmex-landing .sp-path__list a, .tmex-landing .sp-path__list a span { transition: none; }
}
@media (max-width: 860px) {
  .tmex-landing .sp-where__grid { grid-template-columns: 1fr; gap: 14px; }
  /* En una columna la "o" va en su propia fila, entre las dos tarjetas */
  .tmex-landing .sp-where__or { position: static; transform: none; justify-self: center; width: 44px; height: 44px; }
  .tmex-landing .sp-path { padding: 28px 22px 22px; }
  .tmex-landing .sp-path h3 { font-size: 22px; }
}

/* ---- Seccion 5: frente a frente (componente de hub-audiencia.css) ---- */
/* Etiqueta del lado gris en movil: aqui el competidor es hacerlo uno mismo */
.tmex-landing #hacerlo-tu .se-vs { --se-vs-app-label: 'Hacerlo tú'; }

/* ---- Seccion 6: historias reales (resenas de hub-audiencia.css) ---- */
.tmex-landing .sp-reviews { margin-top: 8px; }
.tmex-landing .sp-review__place { align-self: flex-start; font-family: var(--tmex-font-title); font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #0078A8; }