/* ===== Ilustraciones vectoriales propias y sus animaciones base (CSS) ===== */

/* mapa ilustrado de la ruta */
.route{background:var(--concrete);padding:96px 0;overflow:hidden}
.route-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:center}
.route h2{font-size:clamp(2.1rem,5vw,3.6rem);font-weight:900;text-transform:uppercase;line-height:.96;max-width:14ch}
.legs{list-style:none;padding:0;margin:30px 0 32px;display:grid;gap:0}
.legs li{display:grid;gap:2px;padding:16px 0 16px 34px;border-top:2px solid var(--ink);position:relative}
.legs li:last-child{border-bottom:2px solid var(--ink)}
.legs li::before{content:"";position:absolute;left:0;top:22px;width:18px;height:18px;border-radius:50%;background:var(--yellow);border:4px solid var(--ink)}
.legs b{font-weight:900;font-size:1.15rem;font-stretch:112%}
.legs span{color:#3B392F;font-size:.98rem}
.map-art{width:100%;height:auto;display:block;overflow:hidden;border-radius:28px}
.map-art .sun-rays{transform-origin:96px 96px;animation:turn 26s linear infinite}
.map-art .wave{animation:waveX 5s linear infinite}
@keyframes waveX{to{transform:translateX(100px)}}
.map-art .cloud{animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(70px)}}
.map-art .palm{transform-box:fill-box;transform-origin:50% 100%;animation:sway 5s ease-in-out infinite alternate}
.map-art .palm2{animation-duration:6.5s;animation-delay:-2s}
@keyframes sway{from{rotate:-3deg}to{rotate:4deg}}
.map-art .road-dash{animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-30}}
.map-art .pin-ring{transform-box:fill-box;transform-origin:center;animation:pinPulse 2s ease-out infinite}
@keyframes pinPulse{from{transform:scale(1);opacity:1}to{transform:scale(2.4);opacity:0}}
.map-art text{paint-order:stroke;stroke:var(--concrete);stroke-width:6px;stroke-linejoin:round}

/* íconos dibujados de los servicios */
.svc-ico{width:62px;height:62px;color:var(--yellow);fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.svc:hover .svc-ico{animation:wiggle .6s ease}
@keyframes wiggle{25%{transform:rotate(-8deg) scale(1.08)}60%{transform:rotate(6deg) scale(1.08)}}

/* licencia ilustrada */
.lic-card{display:block;width:min(340px,100%);margin:26px 0 4px;filter:drop-shadow(8px 8px 0 var(--ink));transform:rotate(-3deg)}
.lic-card .lic-stamp{transform-box:fill-box;transform-origin:center}

/* escena de atardecer sobre el pie */
.sunset{background:var(--ink);line-height:0;overflow:hidden}
.sunset svg{width:100%;height:clamp(120px,16vw,200px);display:block}
.ss-car{animation:drive 16s linear infinite}
@keyframes drive{from{transform:translateX(-220px)}to{transform:translateX(1240px)}}
.ss-wheel{animation:turn .7s linear infinite}
.ss-sun{transform-box:fill-box;transform-origin:50% 100%;animation:sunBreath 6s ease-in-out infinite alternate}
@keyframes sunBreath{to{transform:scale(1.06)}}

@media (max-width:980px){.route-grid{grid-template-columns:1fr;gap:28px}.map-art{order:-1}}
@media (max-width:760px){.route{padding:64px 0}.lic-card{width:min(300px,100%)}.svc-ico{width:54px;height:54px}}
@media (prefers-reduced-motion:reduce){
  .map-art .sun-rays,.map-art .wave,.map-art .cloud,.map-art .palm,.map-art .road-dash,.map-art .pin-ring,.ss-car,.ss-wheel,.ss-sun,.svc:hover .svc-ico{animation:none}
  .ss-car{transform:translateX(480px)}
}