/* ============================================================
   Aparta y Vuela · componentes del sistema gráfico · v1.0
   Se carga después de tokens.css. Solo usa tokens del manual.
   A · Ruta de puntos (marca, landing, panel, propuestas)
   B · Pase de abordar (vista del viajero, avisos)
   Sello, código de barras decorativo, etiqueta condensada.
   ============================================================ */

/* Etiqueta: condensada, mayúsculas, tracking +14 % (máx. cinco palabras) */
.ayv-label,.ayv-k{font-family:var(--ayv-font);font-variation-settings:"wdth" 75;font-weight:600;font-size:var(--ayv-fs-xs);letter-spacing:var(--ayv-track-label);text-transform:uppercase;line-height:1.3}

/* ---------- A · Ruta de puntos ---------- */
.ayv-ruta{position:relative;display:flex;align-items:center;justify-content:space-between;height:18px}
.ayv-ruta::before{content:"";position:absolute;left:5px;right:5px;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,var(--ayv-linea-2) 0 2px,transparent 2px 8px)}
.ayv-ruta>i{position:relative;z-index:1;flex:none;width:var(--ayv-dot);height:var(--ayv-dot);border-radius:50%;background:var(--ayv-surface,#fff);box-shadow:inset 0 0 0 2px var(--ayv-linea-2)}
.ayv-ruta>i.ok{background:var(--ayv-menta);box-shadow:none}
.ayv-ruta>i.now{width:var(--ayv-dot-now);height:var(--ayv-dot-now);background:var(--ayv-coral);box-shadow:none}
.ayv-ruta>i.fin{box-shadow:inset 0 0 0 2px var(--ayv-marino)}
.ayv-ruta>i.now{animation:ayv-llega var(--ayv-t-slow) var(--ayv-ease) both}
@keyframes ayv-llega{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
.ayv-ruta-pie{display:flex;justify-content:space-between;gap:8px;margin-top:8px;color:var(--ayv-fg-3)}

/* ---------- B · Pase de abordar ---------- */
.ayv-pase{--muesca:var(--ayv-bg);position:relative;background:var(--ayv-surface,#fff);border:1px solid var(--ayv-border);border-radius:var(--ayv-r-lg)}
.ayv-perf{position:relative;height:0;border-top:2px dashed var(--ayv-linea-2);margin:0}
.ayv-perf::before,.ayv-perf::after{content:"";position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--muesca);border:1px solid var(--ayv-border)}
.ayv-perf::before{left:-10px;clip-path:inset(0 0 0 50%)}
.ayv-perf::after{right:-10px;clip-path:inset(0 50% 0 0)}
.ayv-barras{height:34px;background:repeating-linear-gradient(90deg,var(--ayv-marino) 0 2px,transparent 2px 4px,var(--ayv-marino) 4px 5px,transparent 5px 8px,var(--ayv-marino) 8px 11px,transparent 11px 12px,var(--ayv-marino) 12px 13px,transparent 13px 16px);opacity:.9}

/* Sello: inclinado, borde 3 px, condensada. COMPRADO · AL DÍA · LISTO */
.ayv-sello{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border:3px solid currentColor;border-radius:8px;color:var(--ayv-coral-tinta);font-family:var(--ayv-font);font-variation-settings:"wdth" 75;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;line-height:1.1;transform:rotate(-10deg);background:rgba(255,255,255,.7);white-space:nowrap}
.ayv-sello.ok{color:var(--ayv-menta-tinta)}
.ayv-sello.mar{color:var(--ayv-marino)}
.ayv-sello.pon{animation:ayv-sello var(--ayv-t-base) var(--ayv-ease) both}
@keyframes ayv-sello{from{transform:scale(1.6) rotate(-10deg);opacity:0}to{transform:scale(1) rotate(-10deg);opacity:1}}

/* Muesca en tarjetas de hito: dos medias lunas en los costados */
.ayv-muesca{--muesca:var(--ayv-bg);position:relative}
.ayv-muesca::before,.ayv-muesca::after{content:"";position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--muesca)}
.ayv-muesca::before{left:-9px}.ayv-muesca::after{right:-9px}

/* Barra de avance: crece de izquierda a derecha en 600 ms */
.ayv-progress{height:10px;border-radius:var(--ayv-r-pill);background:var(--ayv-progress-track);overflow:hidden}
.ayv-progress>i{display:block;height:100%;width:0;background:var(--ayv-progress);border-radius:inherit;transition:width var(--ayv-t-slow) var(--ayv-ease)}

/* Datos: tabulares, 800, tracking −4 % */
.ayv-dato{font-family:var(--ayv-font);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:var(--ayv-track-data);line-height:1}

@media (prefers-reduced-motion:reduce){.ayv-ruta>i.now,.ayv-sello.pon{animation:none}.ayv-progress>i{transition:none}}