/* Ruta operativa: una conexión continua entre cada etapa */
.operation-timeline { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; position:relative; isolation:isolate; margin-top:58px!important; }
.operation-timeline::before { display:none; }
.timeline-heading em { font-style:italic !important; }
.timeline-heading .connect-title { position:relative; display:inline-block; padding-right:49px; color:var(--red); }
.timeline-heading .connect-title::before { content:""; position:absolute; top:56%; right:17px; width:25px; height:2px; transform:translateY(-50%); background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 7px); opacity:.7; animation:connection-link 1.8s linear infinite; }
.timeline-heading .connect-title::after { content:""; position:absolute; top:56%; right:0; width:9px; height:9px; border-radius:50%; transform:translateY(-50%); background:var(--red); box-shadow:0 0 0 0 rgba(229,36,45,.42); animation:connection-pulse 2.4s ease-out infinite; }
@keyframes connection-link { to { background-position-x:-28px; } }
@keyframes connection-pulse { 0%,45% { box-shadow:0 0 0 0 rgba(229,36,45,.38); } 70% { box-shadow:0 0 0 7px rgba(229,36,45,0); } 100% { box-shadow:0 0 0 0 rgba(229,36,45,0); } }
.timeline-route { position:absolute; z-index:0; top:0; left:0; width:100%; height:108px; overflow:visible; pointer-events:none; }
.timeline-route > path:not(.route-shadow) { fill:none; stroke:var(--red); stroke-width:1.7; stroke-linecap:round; stroke-dasharray:3 8; opacity:.82; animation:route-flow 2.8s linear infinite; }
.timeline-route .route-shadow { display:none; }
@keyframes route-flow { to { stroke-dashoffset:-44; } }
.operation-timeline article { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; border-top:0 !important; padding:0 18px; text-align:center; }
.operation-timeline article:last-child { padding-right:18px; }
.operation-timeline b { display:grid; place-items:center; width:64px; height:64px; border:1px solid var(--red); border-radius:50%; background:var(--bg); box-shadow:0 0 0 8px var(--bg),0 9px 22px rgba(229,36,45,.16); color:var(--red); font:700 20px 'Space Grotesk',sans-serif; letter-spacing:-.04em; }
.operation-timeline h3 { margin:23px 0 8px; color:var(--text); font:700 20px 'Space Grotesk',sans-serif; }
.operation-timeline p { max-width:240px; margin:0; color:var(--muted); font-size:14px; line-height:1.58; }
.timeline-mobile-truck { display:none; }
@media (max-width:850px) { .operation-timeline { grid-template-columns:1fr; max-width:560px; margin:42px auto 0!important; } .timeline-route { display:none; } .timeline-mobile-truck { display:block; position:absolute; z-index:2; top:9px; left:9px; width:44px; height:44px; object-fit:contain; transform:rotate(90deg); transform-origin:center; filter:drop-shadow(0 7px 8px rgba(0,0,0,.2)); animation:mobile-truck-route 9s linear infinite; pointer-events:none; } .operation-timeline::after { content:""; position:absolute; z-index:0; top:32px; bottom:32px; left:31px; width:1px; background:repeating-linear-gradient(to bottom,var(--red) 0 4px,transparent 4px 11px); opacity:.8; animation:route-flow-vertical 2.8s linear infinite; } @keyframes route-flow-vertical { to { background-position-y:44px; } } @keyframes mobile-truck-route { 0% { top:9px; opacity:1; } 45% { top:calc(100% - 53px); opacity:1; } 50% { top:calc(100% - 53px); opacity:0; } 51% { top:9px; opacity:0; } 56%,100% { top:9px; opacity:1; } } .operation-timeline article,.operation-timeline article:last-child { display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:22px; align-items:start; padding:0 0 31px; text-align:left; } .operation-timeline article:last-child { padding-bottom:0; } .operation-timeline b { grid-row:span 2; } .operation-timeline h3 { margin:3px 0 7px; } .operation-timeline p { grid-column:2; max-width:none; } }
@media (max-width:480px) { .operation-timeline { margin-top:34px!important; } .operation-timeline::after { top:27px; bottom:27px; left:27px; } .timeline-mobile-truck { top:7px; left:7px; width:40px; height:40px; } .operation-timeline article,.operation-timeline article:last-child { grid-template-columns:54px minmax(0,1fr); column-gap:17px; padding-bottom:27px; } .operation-timeline b { width:54px; height:54px; font-size:19px; } .operation-timeline h3 { margin-top:0; font-size:19px; } }
@media (prefers-reduced-motion:reduce) { .timeline-route path,.operation-timeline::after { animation:none; } }

/* En móvil el vehículo comparte la ruta y desaparece al cruzar cada hito, como en escritorio. */
@media (max-width:850px) {
  .operation-timeline .timeline-mobile-truck { z-index:1; animation:none; transition:none; }
  .operation-timeline article { z-index:2; }
  .operation-timeline { grid-auto-rows:152px; row-gap:31px; }
  .operation-timeline::after { bottom:120px; }
  .operation-timeline article,
  .operation-timeline article:last-child { grid-template-rows:auto 1fr; min-height:0; height:100%; padding-bottom:0; align-content:start; }
  .operation-timeline h3 { margin:0 !important; }
  .operation-timeline p { margin:4px 0 0 !important; }
}

@media (max-width:480px) {
  .operation-timeline { grid-auto-rows:150px; row-gap:27px; }
  .operation-timeline::after { bottom:123px; }
}