/* ===========================================
   TMEX — /logistica-de-ultima-milla-en-bogota/ (page 2620)
   Solo lo propio de esta pagina. Base: landing.css (tl-). Prefijo propio: um-
   Todo acotado a .tmex-ultima-milla.
   =========================================== */

.tmex-ultima-milla { --um-navy: #071c2d; --um-navy-2: #102d43; --um-ink: #0A111A; --um-line: #D9EAF2; }
/* Iconos: un solo set de trazo (1.8), extremos y uniones redondeados, como en las landings aprobadas */
.tmex-ultima-milla svg[stroke] { stroke-linecap: round; stroke-linejoin: round; }

/* ---- 1. Hero ---- */
.tmex-ultima-milla .um-hero { padding: 104px 0 96px; }
.tmex-ultima-milla .um-hero .tl-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.tmex-ultima-milla .um-herochecks { list-style: none; display: grid; gap: 10px; margin: 6px 0 0; padding: 0; }
.tmex-ultima-milla .um-herochecks li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: rgba(255,255,255,.9); }
.tmex-ultima-milla .um-herochecks li > span { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: rgba(0,175,233,.18); color: var(--tmex-primary); }
.tmex-ultima-milla .um-herochecks svg { width: 13px; height: 13px; }
.tmex-ultima-milla .um-hero .tl-hero__cta-note { margin-bottom: 0; }

/* Foto + tarjeta de seguimiento compacta */
.tmex-ultima-milla .um-heromedia { position: relative; max-width: 560px; margin-left: auto; padding-bottom: 116px; }
.tmex-ultima-milla .um-heromedia__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; box-shadow: 0 30px 70px rgba(0,0,0,.35); }

.tmex-ultima-milla .um-track {
  position: absolute; z-index: 2; left: -40px; bottom: 0; width: min(390px, 88%);
  padding: 20px 20px 16px; border-radius: 20px; color: var(--tmex-text);
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  box-shadow: 0 30px 70px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.1);
}
.tmex-ultima-milla .um-track__head { display: flex; align-items: center; gap: 12px; }
.tmex-ultima-milla .um-track__ic { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--tmex-primary), #0078A8); box-shadow: 0 10px 22px rgba(0,175,233,.32); }
.tmex-ultima-milla .um-track__ic svg { width: 21px; height: 21px; }
.tmex-ultima-milla .um-track__kicker { display: block; font: 700 10.5px var(--tmex-font-title); letter-spacing: 1px; text-transform: uppercase; color: var(--tmex-muted); }
.tmex-ultima-milla .um-track__head strong { display: block; font: 700 16px/1.3 var(--tmex-font-title); color: var(--um-ink); }
.tmex-ultima-milla .um-track__live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font: 700 11.5px var(--tmex-font-title); color: #00638A; background: rgba(0,175,233,.12); white-space: nowrap; }
.tmex-ultima-milla .um-track__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--tmex-primary); animation: um-pulse 1.8s infinite; }

/* Barra de etapas (5 puntos) */
.tmex-ultima-milla .um-progress { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 18px 0 0; padding: 0; }
.tmex-ultima-milla .um-progress li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.tmex-ultima-milla .um-progress li:not(:first-child)::before { /* tramo desde el punto anterior */
  content: ""; position: absolute; top: 8px; right: 50%; width: 100%; height: 2px; background: var(--um-line);
}
.tmex-ultima-milla .um-progress li.is-done::before, .tmex-ultima-milla .um-progress li.is-active::before { background: var(--tmex-primary); }
.tmex-ultima-milla .um-progress i { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--um-line); background: #fff; }
.tmex-ultima-milla .um-progress li.is-done i {
  border-color: var(--tmex-primary);
  background: var(--tmex-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}
.tmex-ultima-milla .um-progress li.is-active i { border-color: var(--tmex-primary); box-shadow: 0 0 0 4px rgba(0,175,233,.18); }
.tmex-ultima-milla .um-progress li.is-active i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--tmex-primary); animation: um-pulse 1.8s infinite; }
.tmex-ultima-milla .um-progress span { font: 600 11px/1.2 var(--tmex-font-title); color: #475467; }
.tmex-ultima-milla .um-progress li.is-active span { color: #00638A; font-weight: 800; }
.tmex-ultima-milla .um-progress li:not(.is-done):not(.is-active) span { color: #667085; }

.tmex-ultima-milla .um-track__foot { margin-top: 16px; padding-top: 13px; border-top: 1px dashed var(--um-line); }
.tmex-ultima-milla .um-track__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; }
.tmex-ultima-milla .um-track__foot span { display: flex; align-items: center; gap: 8px; font: 600 13px var(--tmex-font-body); color: #344054; }
.tmex-ultima-milla .um-track__foot svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--tmex-primary); }

/* Etiquetas flotantes */
.tmex-ultima-milla .um-chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 14px; white-space: nowrap;
  font: 600 13px var(--tmex-font-title); color: var(--um-ink); background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.tmex-ultima-milla .um-chip b { font-size: 15px; }
.tmex-ultima-milla .um-chip__stars { color: #F5A623; letter-spacing: 1px; }
.tmex-ultima-milla .um-chip svg { width: 18px; height: 18px; color: var(--tmex-success); }
.tmex-ultima-milla .um-chip--top { top: -16px; right: 22px; }
@keyframes um-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,175,233,.55); }
  70% { box-shadow: 0 0 0 9px rgba(0,175,233,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,175,233,0); }
}

/* ---- 2. Cifras ---- */
.tmex-ultima-milla .um-kpis { position: relative; z-index: 2; margin-top: -44px; padding: 0 0 8px; }
.tmex-ultima-milla .um-kpis__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  width: calc(100% - 48px); max-width: calc(var(--tmex-container) - 48px); /* el contenedor pierde su margen lateral al llevar el fondo: se repone aqui */
  padding: 26px 10px; border-radius: 22px; background: #fff; border: 1px solid var(--um-line);
  box-shadow: 0 24px 54px rgba(7,28,45,.12);
}
.tmex-ultima-milla .um-kpi { display: flex; align-items: flex-start; gap: 14px; padding: 4px 20px; border-left: 1px solid var(--um-line); }
.tmex-ultima-milla .um-kpi:first-child { border-left: 0; }
.tmex-ultima-milla .um-kpi__ic { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; color: var(--tmex-primary); background: var(--tmex-primary-10); transition: transform .25s ease, background .25s ease, color .25s ease; }
.tmex-ultima-milla .um-kpi__ic svg { width: 24px; height: 24px; }
.tmex-ultima-milla .um-kpi:hover .um-kpi__ic { transform: translateY(-3px); color: #fff; background: linear-gradient(135deg, var(--tmex-primary), #0078A8); }
.tmex-ultima-milla .um-kpi strong { display: block; font: 800 24px/1.1 var(--tmex-font-title); color: var(--um-ink); }
/* "Menos del" como etiqueta pequena sobre la cifra: el simbolo "<" se leia como un signo menos */
.tmex-ultima-milla .um-kpi strong small { display: block; margin-bottom: 3px; font: 700 10.5px var(--tmex-font-title); letter-spacing: 1px; text-transform: uppercase; color: var(--tmex-muted); }
.tmex-ultima-milla .um-kpi div > span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--tmex-muted); }

/* ---- 3. Que es + diagrama + glosario ---- */
.tmex-ultima-milla .um-what { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.tmex-ultima-milla .um-miles { margin: 0; padding: 28px; border-radius: 22px; background: linear-gradient(160deg, #F2FAFD 0%, #FFFFFF 75%); border: 1px solid var(--um-line); display: grid; gap: 14px; }
.tmex-ultima-milla .um-mile { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--um-line); }
.tmex-ultima-milla .um-mile:not(:last-of-type)::after { /* conector */
  content: ""; position: absolute; left: 37px; bottom: -15px; width: 2px; height: 14px; background: repeating-linear-gradient(var(--tmex-primary) 0 3px, transparent 3px 6px);
}
.tmex-ultima-milla .um-mile__ic { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; color: var(--tmex-primary); background: var(--tmex-primary-10); }
.tmex-ultima-milla .um-mile__ic svg { width: 22px; height: 22px; }
.tmex-ultima-milla .um-mile b { display: block; font: 700 16px var(--tmex-font-title); color: var(--um-ink); }
.tmex-ultima-milla .um-mile div > span { display: block; font-size: 14px; line-height: 1.45; color: var(--tmex-muted); }
.tmex-ultima-milla .um-mile.is-last { border: 1.5px solid var(--tmex-primary); box-shadow: 0 14px 32px rgba(0,175,233,.16); }
.tmex-ultima-milla .um-mile.is-last .um-mile__ic { color: #fff; background: linear-gradient(135deg, var(--tmex-primary), #0078A8); }
.tmex-ultima-milla .um-mile em { position: absolute; top: -11px; right: 14px; padding: 3px 10px; border-radius: 999px; font: 700 11px var(--tmex-font-title); font-style: normal; letter-spacing: .4px; text-transform: uppercase; color: #fff; background: var(--tmex-primary); }
.tmex-ultima-milla .um-miles figcaption { margin-top: 4px; font-size: 14px; line-height: 1.5; color: #475467; }

.tmex-ultima-milla .um-glossary { margin-top: 56px; padding: 32px; border-radius: 22px; color: #fff; background: radial-gradient(circle at 92% 0%, rgba(0,175,233,.32), transparent 55%), linear-gradient(160deg, var(--um-navy-2), var(--um-navy)); }
.tmex-ultima-milla .um-glossary__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.tmex-ultima-milla .um-glossary__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--tmex-primary); background: rgba(0,175,233,.16); }
.tmex-ultima-milla .um-glossary__ic svg { width: 22px; height: 22px; }
.tmex-ultima-milla .um-glossary h3 { margin: 0; color: #fff; font-size: 22px; }
.tmex-ultima-milla .um-glossary__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.tmex-ultima-milla .um-glossary__grid > div { padding: 20px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(217,234,242,.16); }
.tmex-ultima-milla .um-glossary dt { margin-bottom: 8px; font: 700 16px var(--tmex-font-title); color: #fff; }
.tmex-ultima-milla .um-glossary dd { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.78); }

/* ---- 4. Asi operamos ---- */
.tmex-ultima-milla .um-ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tmex-ultima-milla .um-ops article {
  position: relative; overflow: hidden; padding: 28px 26px 26px; border-radius: 18px; background: #fff; border: 1px solid var(--um-line);
  box-shadow: 0 14px 34px rgba(7,28,45,.06); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tmex-ultima-milla .um-ops article::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--tmex-primary), #0078A8); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.tmex-ultima-milla .um-ops article:hover { transform: translateY(-6px); border-color: rgba(0,175,233,.45); box-shadow: 0 24px 48px rgba(0,120,168,.14); }
.tmex-ultima-milla .um-ops article:hover::after { transform: scaleX(1); }
.tmex-ultima-milla .um-ops__ic { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 20px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--tmex-primary), #0078A8); box-shadow: 0 10px 22px rgba(0,175,233,.28); transition: transform .3s ease; }
.tmex-ultima-milla .um-ops__ic svg { width: 24px; height: 24px; }
.tmex-ultima-milla .um-ops article:hover .um-ops__ic { transform: rotate(-6deg) scale(1.05); }
/* Numero como marca de agua (mismo recurso que el proceso del hub de tramites) */
.tmex-ultima-milla .um-ops__n {
  position: absolute; top: 16px; right: 22px; font: 800 46px/1 var(--tmex-font-title); letter-spacing: -1px;
  color: transparent; -webkit-text-stroke: 1.5px rgba(0,175,233,.30); transition: -webkit-text-stroke-color .3s ease;
}
.tmex-ultima-milla .um-ops article:hover .um-ops__n { -webkit-text-stroke-color: rgba(0,175,233,.6); }
.tmex-ultima-milla .um-ops h3 { font-size: 19px; line-height: 1.3; margin-bottom: 8px; }
.tmex-ultima-milla .um-ops p { font-size: 15.5px; line-height: 1.65; color: var(--tmex-muted); margin: 0; }

/* ---- 5. Flota propia ---- */
.tmex-ultima-milla .um-fleet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.tmex-ultima-milla .um-fleet__photo { position: relative; margin: 0; }
.tmex-ultima-milla .um-fleet__photo img { width: 100%; border-radius: 22px; box-shadow: 0 24px 54px rgba(7,28,45,.18); aspect-ratio: 800 / 550; object-fit: cover; }
/* Composicion: foto del equipo grande + mensajero en moto superpuesto abajo a la derecha */
.tmex-ultima-milla .um-fleet__media { position: relative; padding: 0 0 72px; }
.tmex-ultima-milla .um-fleet__photo { width: 88%; }
.tmex-ultima-milla .um-fleet__moto { position: absolute; right: 0; bottom: 0; width: 52%; margin: 0; padding: 6px; border-radius: 22px; background: #fff; box-shadow: 0 24px 54px rgba(7,28,45,.22); transition: transform .35s ease; }
.tmex-ultima-milla .um-fleet__moto img { width: 100%; aspect-ratio: 800 / 533; object-fit: cover; border-radius: 17px; }
.tmex-ultima-milla .um-fleet__media:hover .um-fleet__moto { transform: translateY(-6px); }
.tmex-ultima-milla .um-fleet__badge {
  position: absolute; left: 18px; bottom: 36px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 14px; font: 700 13px var(--tmex-font-title); color: var(--um-ink); background: #fff;
  box-shadow: 0 16px 36px rgba(7,28,45,.18);
}
.tmex-ultima-milla .um-fleet__badge svg { width: 18px; height: 18px; color: var(--tmex-primary); }
.tmex-ultima-milla .um-fleet .tl-checklist { margin-top: 8px; }

/* ---- 6. Comparativa ---- */
.tmex-ultima-milla .um-compare { max-width: 960px; margin: 0 auto; border-radius: 22px; box-shadow: 0 24px 54px rgba(7,28,45,.08); background: #fff; }
.tmex-ultima-milla .um-compare .tl-table { min-width: 0; }
.tmex-ultima-milla .um-compare th, .tmex-ultima-milla .um-compare td { padding: 18px 22px; vertical-align: middle; }
.tmex-ultima-milla .um-compare thead th { font-size: 15px; background: #F7FBFD; }
.tmex-ultima-milla .um-compare thead th.tl-col-highlight { color: #fff; background: linear-gradient(135deg, var(--tmex-primary), #0078A8); }
.tmex-ultima-milla .um-compare tbody th { width: 26%; font: 700 15px var(--tmex-font-title); color: var(--um-ink); background: #fff; }
.tmex-ultima-milla .um-compare tbody td { font-size: 15.5px; }
.tmex-ultima-milla .um-compare tbody td:not(.tl-col-highlight) { color: var(--tmex-muted); }
.tmex-ultima-milla .um-compare td.tl-col-highlight { font-weight: 600; color: var(--um-ink); background: rgba(0,175,233,.06); }
.tmex-ultima-milla .um-compare td { position: relative; }
.tmex-ultima-milla .um-compare td > span:last-child { display: inline; }
.tmex-ultima-milla .um-compare tbody td, .tmex-ultima-milla .um-compare thead th:not(:first-child) { padding-left: 58px; }
.tmex-ultima-milla .um-yes, .tmex-ultima-milla .um-no { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.tmex-ultima-milla .um-yes { color: #fff; background: var(--tmex-primary); }
.tmex-ultima-milla .um-no { color: #98A2B3; background: #F2F4F7; }
.tmex-ultima-milla .um-yes svg, .tmex-ultima-milla .um-no svg { width: 12px; height: 12px; }
.tmex-ultima-milla .um-compare tbody tr { transition: background .2s ease; }
.tmex-ultima-milla .um-compare tbody tr:hover th, .tmex-ultima-milla .um-compare tbody tr:hover td:not(.tl-col-highlight) { background: #FAFCFD; }
/* ---- 7. Impacto ---- */
.tmex-ultima-milla .um-impact { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; }
.tmex-ultima-milla .um-impact__intro p { color: #475467; }
.tmex-ultima-milla .um-impact__stat {
  display: flex; align-items: center; gap: 20px; margin-top: 28px; padding: 24px 26px; border-radius: 20px; color: #fff;
  background: radial-gradient(circle at 100% 0%, rgba(255,255,255,.18), transparent 50%), linear-gradient(135deg, var(--tmex-primary), #0078A8);
  box-shadow: 0 22px 48px rgba(0,175,233,.28);
}
.tmex-ultima-milla .um-impact__stat strong { flex-shrink: 0; font: 800 46px/1 var(--tmex-font-title); letter-spacing: -1px; }
.tmex-ultima-milla .um-impact__stat strong small { display: block; margin-bottom: 6px; font: 700 12px var(--tmex-font-title); letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.85); }
.tmex-ultima-milla .um-impact__stat span { font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.92); }
.tmex-ultima-milla .um-impact__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tmex-ultima-milla .um-impact__list li { display: flex; gap: 16px; padding: 26px 24px; border-bottom: 1px solid var(--um-line); transition: background .25s ease; }
.tmex-ultima-milla .um-impact__list li:nth-child(odd) { border-right: 1px solid var(--um-line); }
.tmex-ultima-milla .um-impact__list li:nth-last-child(-n+2) { border-bottom: 0; }
.tmex-ultima-milla .um-impact__list li:hover { background: #F7FBFD; }
.tmex-ultima-milla .um-impact__ic { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; color: var(--tmex-primary); background: var(--tmex-primary-10); transition: transform .25s ease, background .25s ease, color .25s ease; }
.tmex-ultima-milla .um-impact__ic svg { width: 22px; height: 22px; }
.tmex-ultima-milla .um-impact__list li:hover .um-impact__ic { transform: translateY(-3px); color: #fff; background: linear-gradient(135deg, var(--tmex-primary), #0078A8); }
.tmex-ultima-milla .um-impact__list h3 { font-size: 18px; line-height: 1.3; margin-bottom: 6px; }
.tmex-ultima-milla .um-impact__list p { font-size: 15px; line-height: 1.6; color: var(--tmex-muted); margin: 0; }
/* ---- 8. Cobertura ---- */
.tmex-ultima-milla .um-coverage { background: radial-gradient(circle at 85% 10%, rgba(0,175,233,.22), transparent 50%), linear-gradient(160deg, var(--um-navy-2), var(--um-navy)); }
.tmex-ultima-milla .um-coverage__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.tmex-ultima-milla .um-map { margin: 0; max-width: 440px; margin-left: auto; padding: 10px; border-radius: 22px; background: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.35); transition: transform .35s ease; }
.tmex-ultima-milla .um-map:hover { transform: translateY(-6px); }
.tmex-ultima-milla .um-map img { width: 100%; border-radius: 16px; }
.tmex-ultima-milla .um-hours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.tmex-ultima-milla .um-hours > div { display: flex; gap: 14px; padding: 22px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(217,234,242,.18); backdrop-filter: blur(6px); transition: background .25s ease, border-color .25s ease; }
.tmex-ultima-milla .um-hours > div:hover { background: rgba(255,255,255,.1); border-color: rgba(0,175,233,.45); }
.tmex-ultima-milla .um-hours__ic { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; color: var(--tmex-primary); background: rgba(0,175,233,.16); }
.tmex-ultima-milla .um-hours__ic svg { width: 22px; height: 22px; }
.tmex-ultima-milla .um-hours__day { display: block; margin-bottom: 6px; font: 700 13px var(--tmex-font-title); letter-spacing: 1px; text-transform: uppercase; color: var(--tmex-primary); }
.tmex-ultima-milla .um-hours p { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.88); }
/* ---- 9. Para quien ---- */
.tmex-ultima-milla .um-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.tmex-ultima-milla .um-who__card {
  position: relative; overflow: hidden; display: flex; gap: 20px; padding: 28px 28px 26px; border-radius: 20px; color: inherit;
  background: #fff; border: 1px solid var(--um-line); box-shadow: 0 14px 34px rgba(7,28,45,.06);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tmex-ultima-milla .um-who__card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--tmex-primary), #0078A8); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.tmex-ultima-milla .um-who__card:hover { transform: translateY(-6px); border-color: rgba(0,175,233,.45); box-shadow: 0 24px 48px rgba(0,120,168,.14); }
.tmex-ultima-milla .um-who__card:hover::after { transform: scaleX(1); }
.tmex-ultima-milla .um-who__ic { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--tmex-primary), #0078A8); box-shadow: 0 10px 22px rgba(0,175,233,.28); }
.tmex-ultima-milla .um-who__ic svg { width: 25px; height: 25px; }
.tmex-ultima-milla .um-who__card > div { display: flex; flex-direction: column; }
.tmex-ultima-milla .um-who__tag { align-self: flex-start; margin-bottom: 10px; padding: 4px 11px; border-radius: 999px; font: 700 11px var(--tmex-font-title); letter-spacing: .4px; text-transform: uppercase; color: #00638A; background: rgba(0,175,233,.10); }
.tmex-ultima-milla .um-who h3 { font-size: 19px; line-height: 1.3; margin-bottom: 8px; }
.tmex-ultima-milla .um-who p { font-size: 15.5px; line-height: 1.6; color: var(--tmex-muted); margin: 0 0 4px; }
.tmex-ultima-milla .um-who .tl-card__link { display: block; margin-top: auto; padding-top: 12px; }
.tmex-ultima-milla .um-who .tl-card__link > span { display: inline-block; margin-left: 4px; transition: transform .2s ease; }
.tmex-ultima-milla .um-who__card:hover .tl-card__link > span { transform: translateX(4px); }
/* ---- 10. Prueba social ---- */
.tmex-ultima-milla .um-reviews { margin-top: 64px; }
.tmex-ultima-milla .um-reviews__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px;
  width: fit-content; max-width: 100%; margin: 0 auto 30px; padding: 14px 24px; border-radius: 999px;
  background: linear-gradient(135deg, var(--um-ink), #152438); box-shadow: 0 14px 30px rgba(10,17,26,.18);
}
.tmex-ultima-milla .um-reviews__head p { margin: 0; font-size: 15.5px; color: rgba(255,255,255,.8); }
.tmex-ultima-milla .um-reviews__head b { color: #fff; }
.tmex-ultima-milla .um-reviews__head .tl-card__link { margin-top: 0; color: var(--tmex-primary); }
.tmex-ultima-milla .um-reviews__head .tl-card__link:hover { color: #fff; }
.tmex-ultima-milla .um-reviews .tl-testimonial {
  position: relative; overflow: hidden; padding: 30px 28px 26px; border-radius: 20px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tmex-ultima-milla .um-reviews .tl-testimonial::before { content: "\201C"; position: absolute; top: -28px; right: 18px; font: 700 150px/1 Georgia, serif; color: rgba(0,175,233,.10); pointer-events: none; }
.tmex-ultima-milla .um-reviews .tl-testimonial:hover { transform: translateY(-6px); border-color: rgba(0,175,233,.45); box-shadow: 0 24px 48px rgba(0,120,168,.14); }
.tmex-ultima-milla .um-reviews .tl-testimonial__quote { position: relative; font-size: 16px; color: #25313d; }
.tmex-ultima-milla .um-reviews .tl-testimonial__avatar { color: #fff; background: linear-gradient(135deg, var(--tmex-primary), #0078A8); }
/* ---- 12. Servicios relacionados ---- */
.tmex-ultima-milla .um-related a.tl-card { position: relative; overflow: hidden; display: flex; flex-direction: column; color: inherit; border-radius: 18px; }
.tmex-ultima-milla .um-related a.tl-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--tmex-primary), #0078A8); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.tmex-ultima-milla .um-related a.tl-card:hover { border-color: rgba(0,175,233,.45); box-shadow: 0 24px 48px rgba(0,120,168,.14); }
.tmex-ultima-milla .um-related a.tl-card:hover::after { transform: scaleX(1); }
.tmex-ultima-milla .um-related .tl-card__icon { transition: background .25s ease, color .25s ease; }
.tmex-ultima-milla .um-related a.tl-card:hover .tl-card__icon { color: #fff; background: linear-gradient(135deg, var(--tmex-primary), #0078A8); }
.tmex-ultima-milla .um-related h3 { font-size: 18px; }
.tmex-ultima-milla .um-related p { font-size: 15px; }
/* Enlace como texto en linea: la flecha sigue a la ultima palabra aunque el texto ocupe dos lineas */
.tmex-ultima-milla .um-related .tl-card__link { display: block; margin-top: auto; padding-top: 10px; }
.tmex-ultima-milla .um-related .tl-card__link > span { display: inline-block; margin-left: 4px; transition: transform .2s ease; }
.tmex-ultima-milla .um-related a.tl-card:hover .tl-card__link > span { transform: translateX(4px); }
/* ---- 13. CTA final ---- */
.tmex-ultima-milla .um-cta { background: #fff; }
.tmex-ultima-milla .um-cta__box {
  max-width: 920px; margin: 0 auto; padding: 56px 48px; border-radius: 26px; text-align: center; color: #fff;
  background: radial-gradient(circle at 15% 0%, rgba(0,175,233,.35), transparent 50%), linear-gradient(160deg, var(--um-navy-2), var(--um-navy));
  box-shadow: 0 30px 70px rgba(7,28,45,.25);
}
.tmex-ultima-milla .um-cta__box h2 { color: #fff; }
.tmex-ultima-milla .um-cta__box { position: relative; overflow: hidden; }
.tmex-ultima-milla .um-cta__box::before { /* rejilla tenue, como la grafica del hero */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.tmex-ultima-milla .um-cta__box > * { position: relative; }
.tmex-ultima-milla .um-cta__trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 22px 0 0; padding: 0; }
.tmex-ultima-milla .um-cta__trust li { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--tmex-font-title); color: rgba(255,255,255,.88); }
.tmex-ultima-milla .um-cta__trust svg { width: 16px; height: 16px; color: var(--tmex-primary); }
.tmex-ultima-milla .um-cta__box p { max-width: 640px; margin-left: auto; margin-right: auto; color: rgba(255,255,255,.85); }
.tmex-ultima-milla .um-cta__box .tl-label { color: var(--tmex-primary); }
.tmex-ultima-milla .um-cta__box .tl-btn { margin-top: 12px; }
.tmex-ultima-milla .um-cta__note { margin-top: 16px !important; font-size: 14px !important; color: rgba(255,255,255,.65) !important; }

/* ---- Movimiento reducido ---- */
@media (prefers-reduced-motion: reduce) {
  .tmex-ultima-milla .um-track__live i, .tmex-ultima-milla .um-progress li.is-active i::after { animation: none; }
  .tmex-ultima-milla .um-ops article, .tmex-ultima-milla .um-ops article::after { transition: none; }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .tmex-ultima-milla .um-hero .tl-hero__grid { grid-template-columns: 1fr; }
  .tmex-ultima-milla .um-heromedia { margin: 10px auto 0; }
  .tmex-ultima-milla .um-track { left: -16px; }
  .tmex-ultima-milla .um-kpis__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .tmex-ultima-milla .um-kpi:nth-child(3) { border-left: 0; }
  .tmex-ultima-milla .um-what, .tmex-ultima-milla .um-fleet, .tmex-ultima-milla .um-coverage__grid, .tmex-ultima-milla .um-impact { grid-template-columns: 1fr; gap: 36px; }
  .tmex-ultima-milla .um-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tmex-ultima-milla .um-glossary__grid { grid-template-columns: 1fr; }
  .tmex-ultima-milla .um-hours { grid-template-columns: 1fr; }
  .tmex-ultima-milla .um-map { margin: 0 auto; }
}
@media (max-width: 767px) {
  .tmex-ultima-milla .um-hero { padding: 64px 0 104px; }
  .tmex-ultima-milla .um-heromedia { padding-bottom: 0; }
  .tmex-ultima-milla .um-heromedia__img { border-radius: 18px; }
  .tmex-ultima-milla .um-track { position: relative; left: auto; bottom: auto; width: auto; margin: -48px 10px 0; padding: 16px 14px 14px; border-radius: 16px; }
  .tmex-ultima-milla .um-track__ic { width: 38px; height: 38px; }
  .tmex-ultima-milla .um-progress span { font-size: 10px; }
  /* En movil las etiquetas tapan la foto y las etapas; sus datos estan justo debajo, en las cifras */
  .tmex-ultima-milla .um-chip { display: none; }
  .tmex-ultima-milla .um-kpis { margin-top: -36px; }
  .tmex-ultima-milla .um-kpis__grid { width: calc(100% - 40px); padding: 20px 4px; border-radius: 18px; }
  .tmex-ultima-milla .um-kpi { flex-direction: column; align-items: flex-start; gap: 10px; padding: 2px 14px; }
  .tmex-ultima-milla .um-kpi__ic { width: 40px; height: 40px; border-radius: 12px; }
  .tmex-ultima-milla .um-kpi__ic svg { width: 20px; height: 20px; }
  .tmex-ultima-milla .um-kpi strong { font-size: 20px; }
  .tmex-ultima-milla .um-kpi div > span { font-size: 13px; }
  .tmex-ultima-milla .um-ops { grid-template-columns: 1fr; gap: 14px; }
  .tmex-ultima-milla .um-who { grid-template-columns: 1fr; gap: 14px; }
  .tmex-ultima-milla .um-reviews { margin-top: 44px; }
  .tmex-ultima-milla .um-reviews__head { border-radius: 18px; padding: 14px 18px; }
  .tmex-ultima-milla .um-who__card { padding: 22px 20px; gap: 16px; }
  .tmex-ultima-milla .um-who__ic { width: 46px; height: 46px; }
  .tmex-ultima-milla .um-impact__list { grid-template-columns: 1fr; }
  .tmex-ultima-milla .um-impact__list li { padding: 20px 4px; border-right: 0 !important; border-bottom: 1px solid var(--um-line) !important; }
  .tmex-ultima-milla .um-impact__list li:last-child { border-bottom: 0 !important; }
  .tmex-ultima-milla .um-impact__stat { padding: 20px; gap: 16px; }
  .tmex-ultima-milla .um-impact__stat strong { font-size: 38px; }
  .tmex-ultima-milla .um-compare { background: transparent; box-shadow: none; border: 0; border-radius: 0; overflow: visible; }
  .tmex-ultima-milla .um-compare thead { display: none; }
  .tmex-ultima-milla .um-compare table, .tmex-ultima-milla .um-compare tbody, .tmex-ultima-milla .um-compare tr, .tmex-ultima-milla .um-compare th, .tmex-ultima-milla .um-compare td { display: block; width: 100%; }
  .tmex-ultima-milla .um-compare .tl-table { background: transparent; }
  .tmex-ultima-milla .um-compare tbody tr { margin-bottom: 14px; border: 1px solid var(--um-line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 10px 24px rgba(7,28,45,.06); }
  .tmex-ultima-milla .um-compare tbody th { width: 100%; padding: 14px 16px 6px; border: 0; }
  .tmex-ultima-milla .um-compare tbody td { padding: 8px 16px 12px 50px; border: 0; font-size: 15px; }
  .tmex-ultima-milla .um-yes, .tmex-ultima-milla .um-no { left: 16px; top: 26px; transform: none; }
  .tmex-ultima-milla .um-compare td.tl-col-highlight .um-yes { top: 30px; }
  .tmex-ultima-milla .um-compare tbody td::before { margin-left: -34px; }
  .tmex-ultima-milla .um-compare tbody td::before { content: attr(data-label); display: block; margin-bottom: 4px; font: 700 11px var(--tmex-font-title); letter-spacing: .6px; text-transform: uppercase; color: #667085; }
  .tmex-ultima-milla .um-compare td.tl-col-highlight { padding-top: 12px; }
  .tmex-ultima-milla .um-compare td.tl-col-highlight::before { color: #00638A; }
  .tmex-ultima-milla .um-ops article { padding: 22px 20px; }
  .tmex-ultima-milla .um-miles, .tmex-ultima-milla .um-glossary { padding: 22px 18px; }
  .tmex-ultima-milla .um-glossary { margin-top: 40px; }
  .tmex-ultima-milla .um-cta__box { padding: 40px 22px; border-radius: 20px; }
}