/* =============================================================================
   DRS MOTORS · DEMO — FLUJOS DEL USUARIO: pago, reserva, SOAT, perfil
   Mismas reglas que app.css: radio 0, un Azul Acero por pantalla sobre sup-1,
   Azul Luz dentro de paneles y hojas.
============================================================================= */

/* ---------------- pago ---------------- */
.pago-lineas{margin:0 0 4px;padding:12px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.pago-total{display:flex;align-items:baseline;justify-content:space-between;padding:12px 0 0}
.pago-proceso{padding:6px 0 30px}
.proceso{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.proceso li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:center;color:var(--txt-3);font-size:var(--fs-13)}
.proceso li i{width:22px;height:22px;border:1px solid var(--n-4);display:grid;place-items:center}
.proceso li i .ico{width:13px;height:13px;stroke-width:3px}
.proceso li.hecho{color:var(--txt-1)}
.proceso li.hecho i{border-color:var(--pos);color:var(--pos)}
.proceso li.actual{color:var(--txt-1)}
.proceso li.actual i{border-color:var(--acc-graf);animation:gira-cuadro 1s steps(4) infinite}
.proceso li.actual i::after{content:"";width:8px;height:8px;background:var(--acc-graf)}
@keyframes gira-cuadro{to{transform:rotate(360deg)}}
.pago-ok{padding:24px 0 34px;text-align:center}
.pago-ok-ico{display:inline-grid;place-items:center;width:72px;height:72px;border:2px solid var(--pos);color:var(--pos);animation:late .45s var(--ease)}
.pago-ok-ico .ico{width:36px;height:36px;stroke-width:2.5px}

/* ---------------- pasos de un flujo ---------------- */
.pasos-flujo{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin:4px 0 18px}
.pasos-flujo i{height:3px;background:var(--linea)}
.pasos-flujo i.ok{background:var(--txt-2)}
.pasos-flujo i.actual{background:var(--acc-graf)}
.campos-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.campo-sel{position:relative}
.campo .ayuda{font-size:var(--fs-11);color:var(--txt-3)}
.campo input[readonly]{color:var(--txt-2);background:var(--sup-2)}
.aviso-caja{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--panel-borde);background:var(--panel);font-size:var(--fs-13);color:var(--txt-2)}
.aviso-caja .ico{width:18px;height:18px;color:var(--acc-txt);margin-top:1px}

/* Celebración con el flap abierto (forma abierta: solo en animación, 08 §7) */
.festejo{position:relative;padding:34px 0 10px;text-align:center}
.festejo .l1,.festejo .l2{display:block;height:0;margin:0 auto;transform-origin:center}
.festejo .l1{width:180px;border-top:1.5px solid var(--txt-2);animation:festejo-l1 .9s var(--ease) both}
.festejo .l2{width:180px;border-top:2.5px solid var(--acc-1);margin-top:5px;animation:festejo-l2 .9s var(--ease) both}
.festejo .d{margin:18px 0 6px}
@keyframes festejo-l1{0%{transform:scaleX(0) translateY(4px)}50%{transform:scaleX(1) translateY(4px)}100%{transform:scaleX(1) translateY(-10px)}}
@keyframes festejo-l2{0%{transform:scaleX(0) translateY(-3px)}50%{transform:scaleX(1) translateY(-3px)}100%{transform:scaleX(1) translateY(10px)}}

/* ---------------- perfil ---------------- */
.pf-cab{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:6px 0 20px}
.pf-avatar{display:grid;place-items:center;width:76px;height:76px;background:var(--sup-3);border:1px solid var(--n-4);font:400 var(--fs-34)/1 var(--f-display);letter-spacing:.04em;color:var(--txt-1);padding-top:4px}
.pf-cab .t11{margin-top:6px}
.pf-nivel{display:block;width:100%;text-align:left;padding:15px}
.pf-nivel-top{display:flex;justify-content:space-between;align-items:center}
.pf-barra{position:relative;height:8px;background:var(--sup-3);border:1px solid var(--linea)}
.pf-barra i{position:absolute;left:0;top:0;bottom:0;background:var(--acc-graf)}
.pf-nivel-pie{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:8px}
.pf-nivel-pie .t11{text-align:center}
.pf-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px;border:1px solid var(--panel-borde);background:var(--panel)}
.pf-cifras div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-right:1px solid var(--panel-linea)}
.pf-cifras div:last-child{border-right:0}
.pf-referido{margin-top:8px;padding:15px}
.pf-codigo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:14px;padding:12px 14px;border:1px dashed var(--n-4);background:var(--sup-3)}
.pf-cod-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:6px}
.pf-grupo{margin-top:24px}
.pf-grupo>.ceja{margin-bottom:10px}
.pf-tarjeta{padding:0 12px}
.pf-tarjeta .fila:last-child{border-bottom:0}
.pf-sw .fila{grid-template-columns:0 1fr auto;gap:12px}
.pf-verif{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.pf-tarjeta-credito{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:18px;height:196px;padding:18px;
  background:
    linear-gradient(color-mix(in srgb, var(--linea) 60%, transparent) 1px, transparent 1px) 0 0/18px 18px,
    linear-gradient(90deg, color-mix(in srgb, var(--linea) 60%, transparent) 1px, transparent 1px) 0 0/18px 18px,
    var(--sup-2);
  border:1px solid var(--n-4)}
.pf-tc-top{display:flex;justify-content:space-between;align-items:center}
.pf-chip-tc{width:40px;height:30px;border:1px solid var(--txt-3);background:
  linear-gradient(var(--txt-3),var(--txt-3)) 0 50%/100% 1px no-repeat,
  linear-gradient(var(--txt-3),var(--txt-3)) 50% 0/1px 100% no-repeat}
.pf-tc-pie{display:flex;justify-content:space-between}
.pf-tc-pie span{display:flex;flex-direction:column;gap:4px}
.pf-tc-pie b{font:600 var(--fs-13)/1 var(--f-label);letter-spacing:.14em;color:var(--txt-1)}
.pf-comprobante{background:var(--sup-1);color:var(--txt-2);margin:-24px -15px -40px;padding:20px 15px 40px}
.pf-comp-cab{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--linea)}
.pf-comprobante .datos{padding-top:14px;border-top:1px solid var(--linea)}

/* Casilla de verificación cuadrada */
.check{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;width:100%;text-align:left;padding:12px 0;font-size:var(--fs-13);line-height:1.45;color:var(--txt-2)}
.check i{width:22px;height:22px;border:1px solid var(--n-4);display:grid;place-items:center;background:var(--sup-2)}
.check[aria-checked="true"] i{border-color:var(--sel-fondo);background:var(--sel-fondo);color:var(--sup-1)}
.check i .ico{width:14px;height:14px;stroke-width:3px}

/* ---------------- beneficios ---------------- */
.meta-grande{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:14px 0 10px}
.meta-grande span{position:relative;display:grid;place-items:center;height:62px;border:1px solid var(--n-4);color:var(--txt-3)}
.meta-grande span.ok{background:var(--sel-fondo);border-color:var(--sel-fondo);color:var(--sup-1)}
.meta-grande span.premio{border-style:dashed;border-color:var(--acc-graf);color:var(--acc-txt)}
.meta-grande .d{color:inherit}
.meta-grande i{position:absolute;bottom:4px;font-style:normal;color:inherit}

/* ---------------- calendario de pico y placa ---------------- */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.cal-nav .d{text-transform:uppercase}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.cal-cab{text-align:center;padding:4px 0 6px}
.cal-dia{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:50px;border:1px solid var(--panel-linea);color:var(--txt-2)}
.cal-dia.vacio{border-color:transparent}
.cal-dia .d{color:inherit}
.cal-dia .ico{width:12px;height:12px;stroke-width:3px}
.cal-dia.restringido{color:var(--neg);border-color:color-mix(in srgb, var(--neg) 55%, var(--linea))}
.cal-dia.restringido::after{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--neg)}
.cal-dia.libre{color:var(--txt-3)}
.cal-dia.festivo{background:repeating-linear-gradient(45deg, transparent 0 5px, color-mix(in srgb, var(--n-4) 60%, transparent) 5px 6px)}
.cal-dia.festivo i{font-style:normal}
.cal-dia.hoy{outline:1px solid var(--txt-1);outline-offset:-1px}
.cal-leyenda{display:flex;gap:16px;margin-top:12px;font:600 var(--fs-9)/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.cal-leyenda span{display:flex;align-items:center;gap:6px}
.cal-leyenda i{width:12px;height:12px;border:1px solid var(--linea)}
.cal-leyenda .l-no{border-color:var(--neg);box-shadow:inset 0 3px 0 var(--neg)}
.cal-leyenda .l-f{background:repeating-linear-gradient(45deg, transparent 0 3px, var(--n-4) 3px 4px)}
.cal-leyenda .l-hoy{border-color:var(--txt-1)}

/* ---------------- registro ---------------- */
.onb{display:flex;flex-direction:column;min-height:calc(100% - 56px)}
.onb-riel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;flex:1}
.onb-riel::-webkit-scrollbar{display:none}
.onb-slide{flex:0 0 100%;scroll-snap-align:start;padding:10px 22px 0}
.onb-dibujo{height:250px;display:flex;align-items:center;justify-content:center;margin:0 -8px 22px;border:1px solid var(--panel-borde);
  background:
    linear-gradient(color-mix(in srgb, var(--linea) 60%, transparent) 1px, transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg, color-mix(in srgb, var(--linea) 60%, transparent) 1px, transparent 1px) 0 0/20px 20px;}
.onb-dibujo svg{width:100%;height:auto;max-height:230px}
.onb-dibujo .meta-grande{width:100%}
.onb-puntos{display:flex;justify-content:center;gap:6px;margin:18px 0}
.onb-puntos i{width:22px;height:3px;background:var(--n-4);transition:background .2s,width .2s}
.onb-puntos i.on{background:var(--txt-1);width:36px}
.onb-pie{padding:0 15px 34px}
.reg-cel{display:grid;grid-template-columns:auto 1fr;border:1px solid var(--campo-borde);background:var(--sup-3)}
.reg-cel input{border:0!important;background:transparent!important}
.reg-prefijo{display:grid;place-items:center;padding:0 14px;border-right:1px solid var(--campo-borde);font:600 var(--fs-16) var(--f-label);color:var(--txt-1)}
.reg-placa{font:400 var(--fs-26)/1 var(--f-display)!important;letter-spacing:.12em;text-transform:uppercase}
.otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:10px}
.otp span{display:grid;place-items:center;height:62px;border:1px solid var(--campo-borde);background:var(--sup-2);font:400 var(--fs-34)/1 var(--f-display);color:var(--txt-1)}
.otp span.lleno{border-color:var(--txt-2)}
.otp span.foco{border-color:var(--acc-graf);box-shadow:inset 0 -3px 0 var(--acc-graf)}

/* ---------------- explorar en el mapa ---------------- */
.exp{position:absolute;inset:0;overflow:hidden;background:var(--sup-1)}
.exp-mapa{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;background:var(--sup-2)}
.exp-mapa.moviendo{cursor:grabbing}
.exp-lienzo{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.exp-lienzo svg{display:block;width:100%;height:100%}
.exp-sobre{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.exp-pines{position:absolute;inset:0;pointer-events:none}
.mapa-pin,.mapa-yo,.mapa-destino{position:absolute;left:0;top:0;width:0;height:0;pointer-events:auto}
.mapa-pin>span{
  position:absolute;left:0;bottom:9px;transform:translateX(-50%);white-space:nowrap;display:flex;align-items:center;gap:4px;
  padding:4px 7px 3px;background:var(--sup-1);border:1px solid var(--ctl-borde);
  font:400 var(--fs-16)/1 var(--f-display);letter-spacing:.04em;color:var(--txt-1);
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.mapa-pin>span::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;margin-left:-4px;background:inherit;border-right:1px solid var(--ctl-borde);border-bottom:1px solid var(--ctl-borde);transform:rotate(45deg)}
@media (hover:hover){ .mapa-pin:hover>span{border-color:var(--txt-1)} }
.mapa-pin>span::before{content:"";position:absolute;inset:-9px -5px}   /* área táctil de 44 px (el ::after es la punta) */
.mapa-pin.sel{z-index:5}
.mapa-pin.sel>span{background:var(--sel-fondo);border-color:var(--sel-fondo);color:var(--sup-1);transform:translateX(-50%) scale(1.12)}
.mapa-pin.sel>span::after{border-color:var(--sel-fondo)}
.mapa-pin-promo{display:grid;place-items:center;width:14px;height:14px;background:var(--pos);color:var(--sup-1);font:700 var(--fs-9)/1 var(--f-label);font-style:normal}
.mapa-yo i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;background:var(--acc-graf);border:2px solid var(--sup-1);box-shadow:0 0 0 1px var(--acc-graf)}
.mapa-yo i::after{content:"";position:absolute;inset:-8px;border:1px solid var(--acc-graf);animation:pulso 1.8s var(--ease) infinite}
.mapa-yo b{position:absolute;left:0;top:12px;transform:translateX(-50%);font:700 var(--fs-9)/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--txt-1);background:var(--sup-1);padding:3px 5px;white-space:nowrap}
.mapa-destino i{position:absolute;left:-17px;top:-44px;width:34px;height:34px;display:grid;place-items:center;background:var(--acc-graf);color:var(--sup-1)}
.mapa-destino i::after{content:"";position:absolute;left:50%;bottom:-5px;width:9px;height:9px;margin-left:-4.5px;background:var(--acc-graf);transform:rotate(45deg)}
.mapa-destino .ico{width:20px;height:20px}
.ruta-casco{fill:none;stroke:var(--sup-1);stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter}
.ruta-linea{fill:none;stroke:var(--acc-graf);stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter}
.ruta-movil{fill:var(--txt-1);stroke:var(--sup-1);stroke-width:2}

.exp-cab{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;align-items:center;gap:10px;padding:8px 12px 10px;
  background:linear-gradient(var(--sup-1) 70%, color-mix(in srgb, var(--sup-1) 0%, transparent))}
.exp-tit{flex:1;min-width:0}
.exp-tit .ceja{font-size:var(--fs-9);margin-bottom:4px}
.exp-btn{display:grid;place-items:center;width:40px;height:40px;flex:none;background:var(--sup-1);border:1px solid var(--ctl-borde);color:var(--txt-1)}
.exp-btn .ico{width:20px;height:20px}
.exp-chips{position:absolute;left:0;right:0;top:60px;z-index:6;display:flex;gap:6px;overflow-x:auto;padding:6px 12px;scrollbar-width:none}   /* relleno arriba y abajo: el área de toque de los chips no se recorta */
.exp-chips::-webkit-scrollbar{display:none}
.exp-chip{flex:none;height:32px;padding:0 12px;background:var(--sup-1);border:1px solid var(--ctl-borde);font:700 var(--fs-9)/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2)}
.exp-chip[aria-pressed="true"]{background:var(--txt-1);border-color:var(--txt-1);color:var(--sup-1)}
.exp-zoom{position:absolute;right:12px;top:118px;z-index:6;display:flex;flex-direction:column;border:1px solid var(--ctl-borde);background:var(--sup-1)}
.exp-zoom button{display:grid;place-items:center;width:44px;height:44px;color:var(--txt-1);border-bottom:1px solid var(--panel-borde)}   /* apilados sin espacio: 44 de verdad */
.exp-zoom button:last-child{border-bottom:0}
.exp-zoom .ico{width:18px;height:18px}
/* Carrusel: solo del alto de las tarjetas (no tapa el mapa) y con sus propios eventos. En Safari de iOS el
   desplazamiento lo lleva una vista nativa que WebKit deja sin interacción si el contenedor con scroll tiene
   pointer-events:none, aunque sus tarjetas lo tengan en auto: por eso no se deslizaba con el dedo (en Chrome
   sí). Encaja una tarjeta por gesto (snap-stop) y se asoma la siguiente; el ::after deja que la última
   también encaje al principio. El indicador «2 / 7» (.exp-pos) va encima; --exp-pie lo mide el JS. */
.exp-carrusel{position:absolute;left:0;right:0;bottom:max(28px, calc(env(safe-area-inset-bottom, 0px) + 12px));z-index:6;
  display:flex;align-items:stretch;gap:8px;padding:0 12px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-padding-inline:12px;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.exp-carrusel::-webkit-scrollbar{display:none}
.exp-carrusel>.exp-card{flex:0 0 min(340px, calc(100% - 36px));width:auto;scroll-snap-stop:always}
.exp-carrusel::after{content:"";flex:0 0 calc(100% - min(340px, calc(100% - 36px)) - 8px)}
.exp-pos{position:absolute;left:12px;bottom:calc(var(--exp-pie, 150px) + 8px);z-index:6;display:flex;align-items:center;height:24px;padding:0 9px;letter-spacing:.2em;pointer-events:none}
@media (max-height: 500px){ .exp-zoom{top:106px} } /* celular de lado: el zoom no queda debajo del carrusel */
/* Celular de lado con la barra de la demo arriba: no caben los tres botones sobre las tarjetas; se acerca y aleja
   con los dedos y queda solo «centrar en tu ubicación» */
@media (pointer: coarse) and (max-height: 500px){ .exp-zoom button:not([data-a="exp-yo"]){display:none} }
.exp-card{flex:none;width:300px;display:grid;grid-template-columns:96px 1fr;gap:10px;padding:10px;text-align:left;scroll-snap-align:start;background:var(--panel)}
.exp-card-plano{position:relative;display:block;height:96px;border:1px solid var(--panel-linea);background:var(--sup-1)}
.exp-card-plano svg{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px)}
.exp-card-plano .chip{position:absolute;left:-1px;top:-1px;height:18px;padding:0 5px;font-size:var(--fs-9)}
.exp-card-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.exp-card-info .d{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exp-card-info .precio{margin-top:auto;flex-wrap:wrap;row-gap:0}
.modo-lista{overflow:hidden}
.exp-lista{position:absolute;left:0;right:0;top:108px;bottom:0;overflow-y:auto;padding:0 15px 40px;scrollbar-width:none}
.exp-lista::-webkit-scrollbar{display:none}
.exp-card.grande{width:100%;grid-template-columns:130px 1fr;margin-bottom:8px}
.exp-card.grande .exp-card-plano{height:120px}

/* ---------------- comercio ---------------- */
.com-plano{position:relative;margin:0 -15px;height:180px;border-bottom:1px solid var(--linea);
  background:
    linear-gradient(color-mix(in srgb, var(--linea) 60%, transparent) 1px, transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg, color-mix(in srgb, var(--linea) 60%, transparent) 1px, transparent 1px) 0 0/20px 20px;}
.com-plano svg{position:absolute;left:24px;right:24px;top:30px;bottom:10px;width:calc(100% - 48px);height:calc(100% - 40px)}
.com-plano .chip{position:absolute;left:15px;top:10px}
.com-meta{display:flex;align-items:baseline;gap:14px;margin-top:10px}
.com-acciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.com-acciones .btn:first-child{grid-column:1 / -1}
.com-srv{grid-template-columns:auto 1fr auto}
.com-resena{padding:12px 0;border-bottom:1px solid var(--linea)}
.com-mini{display:block;width:100%;padding:0;border:1px solid var(--panel-borde)}
.com-mini [data-minimapa]{position:relative;height:190px;overflow:hidden;background:var(--sup-2);pointer-events:none}

/* ---------------- reservar ---------------- */
.res-bloque{margin-top:22px}
.res-bloque>.ceja{margin-bottom:10px}
.res-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.res-dia{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0 9px;border:1px solid var(--panel-borde);color:var(--txt-2)}
.res-dia .d{color:inherit}
.res-dia .cap{font-size:var(--fs-9)}
.res-dia i{font-style:normal;color:var(--neg)}
.res-dia.pyp{border-top:3px solid var(--neg);padding-top:6px}
.res-dia[aria-pressed="true"]{background:var(--txt-1);border-color:var(--txt-1);color:var(--sup-1)}
.res-dia[aria-pressed="true"] .cap,.res-dia[aria-pressed="true"] i{color:var(--sup-1)}
.res-horas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.res-hora{position:relative;height:40px;border:1px solid var(--panel-borde);font:600 var(--fs-11)/1 var(--f-label);letter-spacing:.06em;color:var(--txt-1)}
.res-hora[disabled]{color:var(--txt-3);opacity:.45;text-decoration:line-through;cursor:not-allowed}
.res-hora.promo{border-color:color-mix(in srgb, var(--pos) 70%, var(--linea))}
.res-hora i{position:absolute;right:-1px;top:-1px;padding:2px 3px;background:var(--pos);color:var(--sup-1);font:700 var(--fs-7_5)/1 var(--f-label);font-style:normal}
.res-hora[aria-pressed="true"]{background:var(--txt-1);border-color:var(--txt-1);color:var(--sup-1)}

/* ---------------- cómo llegar ---------------- */
.ruta .exp-mapa{bottom:0}
.ruta-panel{position:absolute;left:0;right:0;bottom:0;z-index:7;max-height:48%;overflow:auto;padding:14px 15px 30px;background:var(--sup-2);border-top:1px solid var(--panel-borde);scrollbar-width:none}
.ruta-top{display:flex;justify-content:space-between;align-items:flex-end}
.ruta-pasos{list-style:none;margin:14px 0 12px;padding:0;display:flex;flex-direction:column}
.ruta-pasos li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--linea);font-size:var(--fs-13);color:var(--txt-1)}
.ruta-pasos i{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--n-4);font:400 var(--fs-16)/1 var(--f-display);font-style:normal;color:var(--acc-txt)}
.ruta-pasos i .ico{width:14px;height:14px}
.ruta-botones{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:6px}

/* ---------------- cotizaciones ---------------- */
.cot-card{margin-bottom:8px;animation:aparece .45s var(--ease)}
.cot-incluye{list-style:none;margin:12px 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-13);color:var(--txt-2)}
.cot-incluye li{display:flex;align-items:center;gap:8px}
.cot-incluye .ico{width:14px;height:14px;color:var(--pos);stroke-width:3px}
.cot-espera{width:18px;height:18px;border:2px solid var(--acc-graf);animation:gira-cuadro 1s steps(4) infinite}