/* ==========================================================================
   Enviamo — Base comun de los mockups animados
   ==========================================================================

   El DISENO de las animaciones de producto. Aqui vive COMO se ve cada pieza
   (el panel de un pedido, una fila con casilla, el raton, el selector de
   transportista, la etiqueta, la banda de pasos). NO vive el guion: cuando
   pasa cada cosa es propio de cada escena y va en su hoja.

     css/mockups.css      <- esto: el aspecto, compartido
     css/mk-dividir.css   <- los tiempos de dividir un pedido
     css/mk-agrupar.css   <- los tiempos de agrupar pedidos
     js/mockups.js        <- el motor que mide posiciones en pantalla

   Por que separado: durante el desarrollo cambiamos el color de las filas,
   el icono del boton y el tamano de las casillas media docena de veces. Con
   una copia por animacion, cada cambio habria que hacerlo dos veces y a la
   tercera se desincronizan.

   Prefijo `mk-` en TODO. En la landing `.paso` y `.escena` son del hero
   (js/pagina.js:119 los busca) y pisarlos ya rompio la portada una vez.
   ========================================================================== */

:root {
  --violeta: #322DA1;
  --violeta-claro: #6f5cf0;
  --verde-hondo: #00b389;
  --verde-suave: #f0fdf9;
  --verde-borde: #a7f3d0;
  --ambar: #f59e0b;
  --ambar-suave: #fffbeb;
  --ambar-borde: #fde68a;

  --papel: #fbfbfe;
  --niebla: #f1f1f8;
  --linea: #e4e4f0;
  --tinta: #14132b;
  --tinta-media: #4a4869;
  --tinta-suave: #7d7b99;

  --ciclo: 22s;
  --curva: cubic-bezier(.34, 1.25, .5, 1);
  --suave: cubic-bezier(.25, .8, .25, 1);
  --tinte: cubic-bezier(.4, 0, .2, 1);
}

/* El modulo solo estila lo suyo: nada de `body`, `h2` ni selectores
   universales. Antes los declaraba, porque esto empezo siendo una pagina
   suelta, y al integrarlo redefinia la tipografia y el suavizado de toda la
   landing. Ese `-webkit-font-smoothing: antialiased` heredado era la causa
   del texto borroso: adelgaza los trazos y quita el suavizado de subpixel.

   La fuente y los colores se heredan de la pagina. */

.mk-seccion *, .mk-seccion *::before, .mk-seccion *::after { box-sizing: border-box; }

/* El texto se deja al renderizado normal del navegador.
   `-webkit-font-smoothing: antialiased` parece que deberia mejorarlo, pero
   adelgaza los trazos y quita el suavizado de subpixel: en texto pequeno
   (este boton esta a 11.84px) se lee como desenfoque. */

/* Mientras la seccion no esta en pantalla, todo quieto en su primer
   fotograma. Al entrar, `_motor.js` retira la clase y la escena arranca
   desde cero: quien baja hasta aqui ve la historia entera, no el ciclo a
   medias. */
.mk-espera *,
.mk-espera *::before,
.mk-espera *::after {
  animation-play-state: paused !important;
}

.mk-seccion {
  /* Su propio contexto de apilamiento: si no, los z-index de dentro compiten
     con la cabecera fija de la landing (z-index: 100) y la tapan al hacer
     scroll. */
  isolation: isolate;
  position: relative;
  z-index: 0;
  padding: clamp(3.5rem, 2.5rem + 4vw, 7rem) clamp(1rem, .5rem + 2vw, 2rem);

}

.mk-envoltorio { max-width: 1160px; margin: 0 auto; }
.mk-cabecera { max-width: 44rem; margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }

.mk-rotulo {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .8rem; border-radius: 999px;
  background: rgba(50, 45, 161, .08);
  color: var(--violeta);
  font-size: .78rem; font-weight: 700;
  margin-bottom: 1rem;
}
.mk-rotulo::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--verde-hondo);
  animation: dv-late 2s ease-in-out infinite;
}


.mk-cabecera h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem); }

/* La parte del titular que carga el mensaje, en el violeta de la marca. Se
   destaca UNA sola idea por titular: con dos deja de destacar nada. */
.mk-cabecera h2 .mk-acento { color: var(--violeta); }

.mk-entradilla {
  margin: 1rem 0 0;
  font-size: clamp(1rem, .95rem + .3vw, 1.18rem);
  color: var(--tinta-media);
  max-width: 36rem;
}

/* ==========================================================================
   ESCENARIO: origen a la izquierda, resultados a la derecha
   ========================================================================== */

/* Sin marco ni fondo: la animacion flota sobre la pagina. Una caja blanca
   con borde y sombra competia con las tarjetas de dentro, que ya tienen el
   suyo: dos niveles de marco para lo mismo. */
.mk-teatro { overflow: visible; }

.mk-lienzo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(60px, 8vw, 110px) minmax(0, 1fr);
  /* Columnas en pixeles enteros: con `fr` salian en 420.359px y todo lo de
     dentro heredaba posiciones fraccionarias, que es lo que hace que el
     texto se vea borroso. */
  grid-template-columns:
    round(down, calc((100% - clamp(60px, 8vw, 110px)) / 2), 1px)
    clamp(60px, 8vw, 110px)
    round(down, calc((100% - clamp(60px, 8vw, 110px)) / 2), 1px);
  /* Anclado arriba, NO centrado: con `center` el pedido subia 143px al
     desplegarse la lista y el raton parecia pulsar fuera, porque apuntaba
     a la posicion final mientras el pedido aun estaba abajo. */
  align-items: start;
  gap: 0;
  /* Sin relleno: era el aire entre el borde de la caja y su contenido, y ya
     no hay caja. */
  padding: 0;
  min-height: 430px;
}

/* Las flechas van en la columna del medio, por debajo de todo */
.mk-flechas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.mk-flechas svg { width: 100%; height: 100%; overflow: visible; }

.mk-flecha {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: var(--largo, 300);
  stroke-dashoffset: var(--largo, 300);
  animation: dv-traza var(--ciclo) var(--suave) infinite;
}
.mk-flecha--a { stroke: var(--violeta-claro); animation-delay: 0s; }
.mk-flecha--b { stroke: var(--ambar); animation-name: dv-traza-b; }

/* La linea va PRIMERO: se traza desde el pedido origen y, al llegar al
   final, nace el pedido nuevo. Antes salia el pedido antes que su linea y
   la relacion no se leia. */


.mk-punta {
  fill: var(--mk-tono);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: dv-punta-sale var(--ciclo) var(--curva) infinite;
}
.mk-punta--a { --mk-tono: var(--violeta-claro); animation-delay: 0s; }
.mk-punta--b { --mk-tono: var(--ambar); animation-name: dv-punta-sale-b; }


/* ==========================================================================
   EL PEDIDO ORIGEN — se queda toda la escena
   ========================================================================== */

.mk-origen {
  grid-column: 1;
  position: relative;
  z-index: 3;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(20, 19, 43, .07);
  overflow: hidden;
  animation: dv-origen-vive var(--ciclo) var(--suave) infinite;
}



.mk-origen__fila {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .85rem;
  background: #fff;
}

.mk-origen__icono {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--violeta);
  color: #fff;
}
.mk-origen__icono svg { width: 15px; height: 15px; }

.mk-origen__ref { font-size: .84rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mk-origen__meta { font-size: .68rem; color: var(--tinta-suave); }

.mk-origen__abre {
  margin-right: .1rem;
  color: var(--tinta-suave);
  animation: dv-chevron var(--ciclo) var(--suave) infinite;
}
.mk-origen__abre svg { width: 14px; height: 14px; display: block; }


/* El botón Dividir */
.mk-boton {
  position: relative;
  margin-left: auto;
  display: flex; align-items: center; gap: .3rem;
  padding: .38rem .7rem;
  border-radius: 8px;
  font-size: .74rem; font-weight: 700;
  background: var(--violeta);
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  animation: dv-boton-vive var(--ciclo) var(--curva) infinite;
}
.mk-boton svg { width: 12px; height: 12px; }

/* El boton se queda TODA la escena: es la accion que explica la seccion.
   Antes se borraba al 48% y la tarjeta quedaba sin nada donde pulsar. */


.mk-boton::after {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 13px;
  border: 2px solid var(--violeta);
  opacity: 0;
  animation: dv-clic var(--ciclo) var(--suave) infinite;
}


/* --------------------------------------------------------------- Las filas */

.mk-filas {
  display: grid;
  gap: .3rem;
  padding: 0 .45rem;
  max-height: 0;
  overflow: hidden;
  animation: dv-despliega var(--ciclo) var(--suave) infinite;
}


.mk-fila {
  display: flex; align-items: center; gap: .5rem;
  padding: .42rem .5rem;
  border: 1px solid var(--linea);
  border-radius: 9px;
  background: #fff;
  opacity: 0;
  animation-duration: var(--ciclo), var(--ciclo);
  animation-timing-function: var(--curva), var(--tinte);
  animation-iteration-count: infinite, infinite;
  animation-name: dv-fila-entra, dv-fila-m1;
  animation-delay: var(--mk-t), 0s;
}





/* Cada fila se tiñe tras SU pulsación, no todas a la vez */



/* D va al pedido ambar: se tine de ambar, no de violeta */

/* Las dos ultimas van al segundo pedido: se tinen de ambar, como el */


.mk-casilla {
  width: 16px; height: 16px; flex: none;
  display: grid; place-items: center;
  border: 1.7px solid #c7c5d9;
  border-radius: 4px;
  background: #fff;
  color: #fff;
  animation-duration: var(--ciclo);
  animation-timing-function: var(--curva);
  animation-iteration-count: infinite;
}
.mk-casilla svg {
  width: 10px; height: 10px; opacity: 0;
  animation-duration: var(--ciclo);
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
/* Las dos ultimas no se marcan: se quedan en el pedido original. Solo se
   tinen de ambar al dividir, para decir a donde pertenecen. */
.mk-fila:nth-child(4), .mk-fila:nth-child(5) {
  animation-name: dv-fila-entra, dv-fila-queda;
}












.mk-fila__foto {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--mk-tono, var(--niebla));
  color: #fff;
  font-size: .62rem; font-weight: 800;
}

.mk-fila__nombre { font-size: .76rem; font-weight: 600; color: var(--tinta); }
.mk-fila__sku { font-size: .62rem; color: var(--tinta-suave); }

/* La marca de a qué pedido ha ido cada fila */
.mk-fila__destino {
  margin-left: auto;
  padding: .1rem .4rem;
  border-radius: 999px;
  font-size: .6rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  animation: dv-destino-sale var(--ciclo) var(--curva) infinite;
}
.mk-fila__destino--a { background: #f0edff; color: var(--violeta-claro); }
.mk-fila__destino--b { background: var(--ambar-suave); color: #92400e; border: 1px solid var(--ambar-borde); }



.mk-fila__aviso {
  margin-left: auto;
  display: flex; align-items: center; gap: .25rem;
  padding: .1rem .4rem;
  border: 1px solid var(--ambar-borde);
  border-radius: 999px;
  background: var(--ambar-suave);
  color: #92400e;
  font-size: .6rem; font-weight: 700;
  white-space: nowrap;
  animation: dv-aviso-vive var(--ciclo) var(--tinte) infinite;
}
.mk-fila__aviso svg { width: 9px; height: 9px; }
/* Se retira cuando aparece la marca de destino, para no duplicar */


/* ==========================================================================
   LOS DOS PEDIDOS NUEVOS
   ========================================================================== */

.mk-nuevos {
  grid-column: 3;
  position: relative;
  z-index: 3;
  display: grid;
  /* Hueco generoso: separa los dos destinos para que cada flecha tenga
     recorrido. Con .7rem la del segundo pedido salia casi horizontal y no
     se leia como una relacion. */
  gap: 1.6rem;
}

.mk-nuevo {
  position: relative;
  padding: .7rem .8rem;
  border: 1.5px solid var(--mk-tono);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(20, 19, 43, .07);
  opacity: 0;
  animation-duration: var(--ciclo), var(--ciclo);
  animation-timing-function: var(--curva), steps(1, end);
  animation-iteration-count: infinite, infinite;
}
.mk-nuevo--a { --mk-tono: var(--violeta-claro); animation-name: dv-nuevo-sale, dv-encima-a; }
.mk-nuevo--b { --mk-tono: var(--ambar); animation-name: dv-nuevo-sale-b, dv-encima-b; }

/* Aparecen VACIOS, esperando a que lleguen sus articulos */
/* Nacen al llegar la punta de su linea (48% / 51%), con una entrada suave
   desde el propio extremo de la flecha. */


/* La que elige transportista se pone delante para que no la tape la otra */



.mk-nuevo__fila { display: flex; align-items: center; gap: .5rem; }

.mk-nuevo__caja { width: 30px; height: auto; flex: none; }

.mk-nuevo__ref {
  font-size: .8rem; font-weight: 800;
  color: var(--mk-tono);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.mk-nuevo__que {
  font-size: .66rem; color: var(--tinta-suave);
  animation: dv-cuenta var(--ciclo) steps(1, end) infinite;
}
/* El recuento se rellena cuando llegan los artículos */
.mk-nuevo__que span { opacity: 0; animation: dv-cuenta-sale var(--ciclo) steps(1, end) infinite; }



.mk-nuevo__estado {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .45rem;
  border: 1px solid var(--ambar-borde);
  border-radius: 999px;
  background: var(--ambar-suave);
  color: #92400e;
  font-size: .62rem; font-weight: 700;
  white-space: nowrap;
}
.mk-nuevo__estado svg { width: 9px; height: 9px; animation: dv-gira 3s linear infinite; transform-origin: center; }


/* Los articulos del pedido, ya dentro de la tarjeta desde que nace: no
   vuelan desde el origen, porque el reparto ya lo cuentan las flechas y el
   color de las filas. */
.mk-articulos {
  display: flex; gap: .25rem;
  margin-top: .5rem;
}
.mk-nuevo--a .mk-articulo { background: var(--violeta-claro); }
.mk-nuevo--b .mk-articulo { background: var(--ambar); }

/* Cuando la ficha lleva una referencia de pedido en vez de una letra, no
   cabe en un cuadrado: se ensancha y se lee como una pastilla. */
.mk-articulo--ref {
  width: auto !important;
  min-width: max-content;
  padding: 0 .5rem;
  white-space: nowrap;
  font-size: .64rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.mk-articulos--refs { gap: .3rem; }

.mk-articulo {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--mk-tono);
  color: #fff;
  font-size: .62rem; font-weight: 800;
}

/* Una fila que no entra en la accion: sigue ahi, pero no se marca. Su
   casilla vacia es lo que hace ver que SE PODRIA marcar y no se hace. */
.mk-fila--otra { opacity: .62; }
.mk-fila--otra .mk-fila__nombre { font-weight: 500; }

/* ---------------------------------------------------------------- La regla
   Una condicion escrita como frase, con sus piezas destacadas. Se lee como
   lenguaje natural, que es lo que la hace entendible sin explicar nada. */

.mk-regla { padding: .6rem .7rem; display: grid; gap: .4rem; }

.mk-regla__linea {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  font-size: .76rem;
  color: var(--tinta-media);
}

.mk-regla__marca-si {
  padding: .1rem .4rem;
  border-radius: 5px;
  background: var(--niebla);
  color: var(--tinta-suave);
  font-size: .6rem; font-weight: 800;
  letter-spacing: .06em;
}
.mk-regla__marca-si--entonces { background: #f0edff; color: var(--violeta); }

.mk-regla__pieza {
  padding: .18rem .5rem;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: #fff;
  font-size: .72rem; font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
}
.mk-regla__pieza--valor {
  border-color: #cdc9f7;
  background: #f6f5ff;
  color: var(--violeta);
  font-variant-numeric: tabular-nums;
}
.mk-regla__pieza--courier {
  display: inline-flex; align-items: center; gap: .35rem;
  border-color: var(--verde-borde);
  background: var(--verde-suave);
  color: #047857;
}
.mk-regla__pieza--courier img { height: 14px; width: auto; max-width: 42px; object-fit: contain; }

.mk-regla__union { font-size: .7rem; color: var(--tinta-suave); }

/* La tienda: primer paso de la regla en el panel real. Tono neutro para que
   el transportista, que es la decision, siga siendo lo que destaca. */
.mk-regla__pieza--tienda {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--niebla);
  border-color: var(--linea);
  color: var(--tinta);
}
.mk-regla__pieza--tienda img { height: 13px; width: auto; max-width: 40px; object-fit: contain; }

/* La marca «Activa», que sustituye al boton cuando ya esta guardada */
.mk-regla__marca {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .18rem .5rem;
  border: 1px solid var(--verde-borde);
  border-radius: 999px;
  background: var(--verde-suave);
  color: #047857;
  font-size: .66rem; font-weight: 700;
  white-space: nowrap;
}
.mk-regla__marca svg { width: 11px; height: 11px; }

/* El logo del transportista asignado, en la fila del pedido */
.mk-destino__logo { height: 15px; width: auto; max-width: 44px; object-fit: contain; display: block; }

/* La marca ocupa el sitio del boton sin superponerse: antes iba en
   `position: absolute` encima y se leian las dos a la vez. */
.rg-seccion .mk-regla__marca { margin-left: auto; }

/* --------------------------------------------------------- La lista de reglas
   Varias reglas numeradas por prioridad. Se evaluan por orden y gana la
   primera que encaja: por eso el numero va delante, no es decorativo. */

.mk-reglas { padding: .5rem; display: grid; gap: .4rem; }

.mk-regla__item {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .5rem .6rem;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: #fff;
}

.mk-regla__orden {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--niebla);
  color: var(--tinta-suave);
  font-size: .64rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.mk-regla__cuerpo { display: grid; gap: .3rem; min-width: 0; }

/* ------------------------------------------------------------- El aviso
   Una nota al pie de la tarjeta que explica POR QUE se puede hacer lo que
   se esta haciendo (misma direccion, mismo cliente...). */

.mk-aviso {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 .45rem .5rem;
  padding: .45rem .6rem;
  /* Ambar, no verde: es una deteccion que pide tu atencion. En verde
     parecia que la accion ya estuviera hecha. */
  border: 1px solid var(--ambar-borde);
  border-radius: 9px;
  background: var(--ambar-suave);
  color: #92400e;
  font-size: .7rem; font-weight: 600;
}
.mk-aviso svg { width: 13px; height: 13px; flex: none; }

/* ------------------------------------------------ Selector de transportista */

.mk-courier {
  position: relative;
  margin-top: .5rem;
  display: flex; align-items: center; gap: .45rem;
  padding: .4rem .55rem;
  border: 1px dashed var(--linea);
  border-radius: 8px;
  background: var(--papel);
  font-size: .68rem; font-weight: 600;
  color: var(--tinta-suave);
  min-height: 34px;
  animation: dv-courier-lleno var(--ciclo) var(--tinte) infinite;
}
.mk-courier--b { animation-name: dv-courier-lleno-b; }
.mk-courier--b .mk-courier__vacio { animation-name: dv-vacio-b; }
.mk-courier--b .mk-courier__elegido { animation-name: dv-elegido-b; }
.mk-courier--b .mk-opcion--elegida { animation-name: dv-opcion-b; }




.mk-courier__vacio {
  display: flex; align-items: center; gap: .35rem;
  animation: dv-vacio var(--ciclo) steps(1, end) infinite;
}
.mk-courier__vacio svg { width: 12px; height: 12px; }



.mk-courier__elegido {
  position: absolute;
  display: flex; align-items: center; gap: .4rem;
  opacity: 0;
  animation: dv-elegido var(--ciclo) steps(1, end) infinite;
}



.mk-courier__logo { height: 18px; width: auto; max-width: 58px; object-fit: contain; }
.mk-courier__servicio { font-size: .64rem; font-weight: 700; color: var(--tinta-media); }

.mk-desplegable {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  z-index: 25;
  padding: .25rem;
  border: 1px solid var(--linea);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(20, 19, 43, .16);
  display: grid; gap: 2px;
  opacity: 0;
  transform-origin: top;
  animation: dv-despl-a var(--ciclo) var(--suave) infinite;
}
.mk-courier--b .mk-desplegable { animation-name: dv-despl-b; }




.mk-opcion {
  display: flex; align-items: center; gap: .4rem;
  padding: .28rem .4rem;
  border-radius: 6px;
  font-size: .66rem; font-weight: 600;
  color: var(--tinta-media);
}
.mk-opcion img { height: 15px; width: auto; max-width: 50px; object-fit: contain; }

.mk-opcion--elegida {
  animation: dv-opcion-a var(--ciclo) var(--tinte) infinite;
}



/* ------------------------------------------------------------- La etiqueta */

.mk-etiqueta {
  margin-top: .45rem;
  padding: .38rem .45rem;
  border-radius: 6px;
  background: var(--tinta);
  color: #fff;
  opacity: 0;
  animation: dv-etiq-a var(--ciclo) var(--curva) infinite;
}
.mk-nuevo--b .mk-etiqueta { animation-name: dv-etiq-b; }




.mk-barras { display: flex; gap: 1.3px; height: 15px; }
.mk-barras i { flex: 1; background: #fff; border-radius: .5px; }
.mk-barras i:nth-child(3n) { flex: 2.3; }
.mk-barras i:nth-child(4n) { flex: .5; opacity: .32; }
.mk-barras i:nth-child(5n) { flex: 1.7; }
.mk-etiqueta__pie {
  margin-top: .2rem;
  font-size: .55rem; font-weight: 700; letter-spacing: .05em;
  opacity: .82; font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   EL RATON
   ========================================================================== */

.mk-raton {
  position: absolute;
  left: 0; top: 0;
  z-index: 40;
  width: 20px; height: 20px;
  pointer-events: none;
  opacity: 0;
  /* `linear` a proposito: la curva la pone CADA TRAMO dentro del keyframe.

     Con una sola curva para todo el ciclo, el navegador suaviza entre
     fotogramas aunque las coordenadas sean identicas, asi que las pausas no
     eran pausas: el raton seguia deslizandose despacio. Y los tramos largos
     y los cortos iban a la misma velocidad mecanica.

     Poniendo `animation-timing-function` dentro de cada fotograma, cada
     tramo decide como se recorre: los desplazamientos aceleran y frenan,
     los clics van secos y las esperas se quedan QUIETAS. */
  animation: dv-raton-viaje var(--ciclo) linear infinite;
}
.mk-raton svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 5px rgba(15,23,42,.35)); }

/* Las paradas las calcula el JS en --rNx/--rNy tras medir en pantalla */


/* ============================================================== Responsive */

@media (max-width: 900px) {
  /* Las flechas fuera: no hay columna intermedia donde dibujarlas. El raton
     se queda — es lo que explica que las cosas pasan porque alguien las
     hace, y sus paradas las mide el JS igual que en escritorio. */
  .mk-flechas { display: none; }
  .mk-raton { width: 18px; height: 18px; }

  /* Las tres piezas NO caben a la vez en una pantalla de movil, asi que se
     relevan en el mismo sitio: primero el pedido, luego sus dos mitades.
     Apiladas en vertical la seccion medía 1.400px y habia que hacer scroll
     para ver la relacion entre una cosa y otra. */
  .mk-lienzo {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0;
    min-height: 430px;
    padding: 0;
    align-items: center;
  }
  .mk-origen, .mk-nuevos { grid-area: 1 / 1; }

  /* Solo lo que NO acciona el raton se queda quieto. El boton, las casillas
     y el selector de courier conservan su animacion: es lo que engancha
     cada efecto a su pulsacion. Apagarlos los dejaba ya resueltos desde el
     primer fotograma. */
  .mk-nuevo, .mk-articulo, .mk-nuevo__que span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* El relevo, DESPUES de apagar lo de dentro: compite con un
     `animation: none !important` y necesita ganar. */
  .mk-origen {
    animation: mk-movil-origen var(--ciclo) var(--suave) infinite !important;
  }
  .mk-nuevos {
    animation: mk-movil-nuevos var(--ciclo) var(--suave) infinite !important;
  }
  .mk-filas { max-height: none !important; animation: none !important; padding: .45rem; }
  .mk-origen__abre { animation: none !important; transform: rotate(180deg) !important; }

  /* Las filas se ven CON el pedido: su animacion de entrada las dejaba
     invisibles hasta el 16% y quedaba un hueco blanco de 3,5 segundos. */
  .mk-fila { opacity: 1 !important; transform: none !important; }

  /* La cabecera se partia en tres lineas (100px). El nombre del cliente no
     explica nada de la division, asi que en movil se retira. */
  .mk-origen__fila { gap: .5rem; padding: .6rem .7rem; }
  .mk-origen__ref { white-space: nowrap; }
  .mk-origen__meta { white-space: nowrap; font-size: .64rem; }
  .mk-cliente { display: none; }
  .mk-desplegable { display: none !important; }

  /* Sin lista desplegable: no cabe sobre una tarjeta que ya ocupa media
     pantalla. El raton pulsa el selector y el transportista aparece. */
  .mk-desplegable { display: none !important; }
  .mk-courier__elegido { position: absolute; }

  /* Cada transportista aparece tras SU clic: el raton pulsa a 58% y 67%,
     no en los tiempos de escritorio. */
  .mk-courier              { animation-name: mk-courier-movil-a !important; }
  .mk-courier__vacio       { animation-name: mk-vacio-movil-a !important; }
  .mk-courier__elegido     { animation-name: mk-elegido-movil-a !important; }
  .mk-courier--b           { animation-name: mk-courier-movil-b !important; }
  .mk-courier--b .mk-courier__vacio   { animation-name: mk-vacio-movil-b !important; }
  .mk-courier--b .mk-courier__elegido { animation-name: mk-elegido-movil-b !important; }


  /* Se cortaba por el `flex` del contenedor: se le deja su ancho propio */
  .mk-boton { flex: 0 0 auto; width: max-content; padding: .35rem .6rem; }


  /* Recorrido propio: sin listas que abrir, el raton va de un selector al
     otro. Las paradas 8 y 10 (las opciones) aqui no existen.

     Acotado a `.dv-seccion`: este recorrido es el de DIVIDIR. Sin acotar, su
     `!important` se lo imponia tambien a agrupar y a reglas, que pulsan en
     otros instantes — en reglas el raton ni siquiera habia aparecido en su
     primer clic. */
  .dv-seccion .mk-raton { animation-name: mk-raton-movil !important; }
}

@keyframes mk-vacio-movil-a   { 0%, 58% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes mk-vacio-movil-b   { 0%, 67% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes mk-elegido-movil-a { 0%, 58% { opacity: 0; } 59%, 100% { opacity: 1; } }
@keyframes mk-elegido-movil-b { 0%, 67% { opacity: 0; } 68%, 100% { opacity: 1; } }
@keyframes mk-courier-movil-a {
  0%, 58%  { border-style: dashed; border-color: var(--linea); background: var(--papel); }
  60%,100% { border-style: solid; border-color: var(--verde-borde); background: var(--verde-suave); }
}
@keyframes mk-courier-movil-b {
  0%, 67%  { border-style: dashed; border-color: var(--linea); background: var(--papel); }
  69%,100% { border-style: solid; border-color: var(--verde-borde); background: var(--verde-suave); }
}

/* El recorrido del raton en DIVIDIR, version movil.

   ATENCION a los tiempos: este keyframe se escribio copiando la cadencia de
   REGLAS (24%, 27%, 30%) pero se aplica a DIVIDIR, que marca sus casillas al
   12%, 15% y 18% — justo la mitad. El raton llegaba doce puntos TARDE, asi
   que en el movil las casillas se marcaban solas antes de que el cursor
   apareciera y la escena se veia rota.

   Los tiempos de abajo son los de dividir, sacados de
   `mockups/dividir/tiempos.css`:
     dv-marca-1  pinta a 13%   -> pulsar a 12,5%
     dv-marca-2  pinta a 16%   -> pulsar a 15,5%
     dv-marca-3  pinta a 19%   -> pulsar a 18,5%
     dv-boton-vive aparece a 18% -> pulsarlo a 34%

   Cada pulsacion va JUSTO ANTES de su marcado. Si el cursor llega despues,
   la casilla se marca sola y no se entiende quien la ha pulsado. */
@keyframes mk-raton-movil {
  0%,  2%   { opacity: 0; translate: var(--r0x) var(--r0y); animation-timing-function: linear; }
  4%        { opacity: 1; translate: var(--r0x) var(--r0y); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }

  /* Las tres casillas */
  10%       { opacity: 1; translate: var(--r2x) var(--r2y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  11%       { opacity: 1; translate: var(--r2x) var(--r2y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  12.5%     { opacity: 1; translate: var(--r2x) var(--r2y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  13.5%     { opacity: 1; translate: var(--r3x) var(--r3y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  14.5%     { opacity: 1; translate: var(--r3x) var(--r3y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  15.5%     { opacity: 1; translate: var(--r3x) var(--r3y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  16.5%     { opacity: 1; translate: var(--r4x) var(--r4y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  17.5%     { opacity: 1; translate: var(--r4x) var(--r4y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  18.5%     { opacity: 1; translate: var(--r4x) var(--r4y); scale: 1; animation-timing-function: linear; }

  /* El boton Dividir, que ya esta visible desde el 18%.

     El salto se hace en 4,5 puntos, igual que en agrupar. Antes iba del
     18,5% al 33% —catorce puntos y medio— y el raton cruzaba la pantalla a
     camara lenta. El tiempo que sobra se gasta quieto al final. */
  23%       { opacity: 1; translate: var(--r4x) var(--r4y); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  27.5%     { opacity: 1; translate: var(--r6x) var(--r6y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  29%       { opacity: 1; translate: var(--r6x) var(--r6y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  30.5%     { opacity: 1; translate: var(--r6x) var(--r6y); scale: 1; animation-timing-function: linear; }
  40%       { opacity: 0; translate: var(--r6x) var(--r6y); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }

  /* Espera a que el relevo traiga los dos pedidos */
  52%       { opacity: 0; translate: var(--r7x) var(--r7y); animation-timing-function: linear; }
  55%       { opacity: 1; translate: var(--r7x) var(--r7y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  56.5%     { opacity: 1; translate: var(--r7x) var(--r7y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  58%       { opacity: 1; translate: var(--r7x) var(--r7y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }

  /* Y al del segundo pedido */
  64%       { opacity: 1; translate: var(--r9x) var(--r9y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  65.5%     { opacity: 1; translate: var(--r9x) var(--r9y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  67%       { opacity: 1; translate: var(--r9x) var(--r9y); scale: 1; animation-timing-function: linear; }
  90%       { opacity: 1; translate: var(--r9x) var(--r9y); animation-timing-function: linear; }
  97%       { opacity: 1; translate: var(--r9x) var(--r9y); animation-timing-function: linear; }
  99%, 100% { opacity: 0; translate: var(--r9x) var(--r9y); }
}

/* El relevo: cada pieza manda la mitad del ciclo, con un cruce corto para
   que nunca se vea el hueco entre una y otra. */
/* El cierre del ciclo: los resultados se van del todo (97%) y el origen no
   vuelve hasta el 99%, ya con sus casillas reiniciadas. Antes reaparecia al
   94% con el estado del final todavia puesto y se veian mezclados. */
@keyframes mk-movil-origen {
  0%       { opacity: 0; }
  3%       { opacity: 1; }
  44%      { opacity: 1; }
  49%      { opacity: 0; }
  99%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes mk-movil-nuevos {
  0%       { opacity: 0; }
  46%      { opacity: 0; }
  52%      { opacity: 1; }
  95%      { opacity: 1; }
  98%,100% { opacity: 0; }
}

/* En pantallas muy estrechas, el SKU sobra: el nombre ya identifica */
@media (max-width: 420px) {
  .mk-fila__sku { display: none; }
  .mk-fila__nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mk-fila { gap: .4rem; padding: .4rem .45rem; }
  .mk-fila__destino { font-size: .56rem; padding: .08rem .3rem; }
}

/* ------------------------------------------------------------ Sin movimiento */

@media (prefers-reduced-motion: reduce) {
  .mk-raton, .mk-desplegable, .mk-flechas { display: none !important; }
  .mk-origen, .mk-filas, .mk-fila, .mk-casilla, .mk-casilla svg, .mk-boton,
  .mk-nuevo, .mk-courier, .mk-courier__vacio, .mk-courier__elegido,
  .mk-etiqueta, .mk-fila__destino,
  .mk-rotulo::before, .mk-nuevo__estado svg, .mk-origen__abre,
  .mk-nuevo__que span, .mk-fila__aviso {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .mk-lienzo { grid-template-columns: 1fr; gap: 1rem; min-height: 0; }
  .mk-origen, .mk-nuevos { grid-column: 1; }
  .mk-filas { max-height: none; padding: .45rem; }
  .mk-boton { display: none !important; }
  .mk-fila__aviso { display: none !important; }
  /* Sin lista desplegable: no cabe sobre una tarjeta que ya ocupa media
     pantalla. El raton pulsa el selector y el transportista aparece. */
  .mk-desplegable { display: none !important; }
  .mk-courier__elegido { position: absolute; }

  /* Cada transportista aparece tras SU clic: el raton pulsa a 58% y 67%,
     no en los tiempos de escritorio. */
  .mk-courier              { animation-name: mk-courier-movil-a !important; }
  .mk-courier__vacio       { animation-name: mk-vacio-movil-a !important; }
  .mk-courier__elegido     { animation-name: mk-elegido-movil-a !important; }
  .mk-courier--b           { animation-name: mk-courier-movil-b !important; }
  .mk-courier--b .mk-courier__vacio   { animation-name: mk-vacio-movil-b !important; }
  .mk-courier--b .mk-courier__elegido { animation-name: mk-elegido-movil-b !important; }
}


/* ==========================================================================
   Agrupar y reglas en pantallas estrechas
   Cada modulo tiene su densidad: agrupar lleva direccion bajo cada nombre y
   reglas lleva tres lineas por regla. Con el ajuste comun no bastaba.
   ========================================================================== */

@media (max-width: 900px) {
  /* En columna, la regla y los pedidos se turnan igual que en dividir */
  .ag-seccion .mk-lienzo,
  .rg-seccion .mk-lienzo { grid-template-columns: 1fr; }

  .rg-seccion .mk-regla__item { padding: .45rem .5rem; gap: .45rem; }
  .rg-seccion .mk-regla__linea { flex-wrap: wrap; row-gap: .2rem; }
}

@media (max-width: 420px) {
  /* La direccion de agrupar es lo que hace ver que coinciden: no se quita,
     se recorta a una linea. */
  .ag-seccion .mk-fila__sku {
    display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
  }
  .ag-seccion .mk-fila { gap: .35rem; }

  /* En reglas el peso y el importe SON la condicion: tampoco se quitan */
  .rg-seccion .mk-fila__sku { display: block; }

  .mk-regla__pieza, .mk-regla__pieza--courier, .mk-regla__pieza--tienda { font-size: .6rem; }
  .mk-regla__union { font-size: .6rem; }
  .mk-regla__pieza--courier img { height: 11px; max-width: 34px; }
  .mk-regla__pieza--tienda img { height: 11px; max-width: 32px; }
  .mk-regla__orden { width: 17px; height: 17px; font-size: .58rem; }
}


/* ==========================================================================
   Texto nitido: las cajas que desplazan texto empiezan en pixel entero
   Un padding en `rem` da 7.2px o 12.8px, y esa fraccion viaja hasta el texto,
   que acaba rasterizado a medio pixel. Se redondea el desplazamiento, no la
   escala tipografica.
   ========================================================================== */

.mk-filas,
.mk-reglas,
.mk-articulos,
.mk-nuevo,
.mk-fila,
.mk-regla__item,
.mk-origen__fila,
.mk-nuevo__fila,
.mk-desplegable,
.mk-opcion,
.mk-courier,
.mk-etiqueta {
  padding: round(down, var(--p-y, .45rem), 1px) round(down, var(--p-x, .5rem), 1px);
}

/* Cada uno conserva su holgura, ya en valores que redondean limpio */
.mk-filas        { --p-y: .45rem; --p-x: .45rem; }
.mk-reglas       { --p-y: .5rem;  --p-x: .5rem; }
.mk-articulos    { --p-y: 0;      --p-x: .5rem; }
.mk-nuevo        { --p-y: .7rem;  --p-x: .8rem; }
.mk-fila         { --p-y: .42rem; --p-x: .5rem; }
.mk-regla__item  { --p-y: .5rem;  --p-x: .6rem; }
.mk-origen__fila { --p-y: .7rem;  --p-x: .85rem; }
.mk-opcion       { --p-y: .4rem;  --p-x: .55rem; }
.mk-courier      { --p-y: .45rem; --p-x: .6rem; }
.mk-desplegable  { --p-y: .25rem; --p-x: .25rem; }
.mk-etiqueta     { --p-y: .45rem; --p-x: .55rem; }
.mk-nuevo__fila  { --p-y: 0;      --p-x: 0; }

/* Y los huecos entre cajas, por el mismo motivo */
.mk-filas, .mk-reglas, .mk-articulos { gap: round(down, .4rem, 1px); }

/* Las piezas de una regla van en linea: un gap de .35rem (5.6px) desplaza
   cada pieza medio pixel mas que la anterior. */
.mk-regla__linea { gap: round(down, .35rem, 1px); }
.mk-regla__cuerpo { gap: round(down, .3rem, 1px); }
.mk-regla__item { gap: round(down, .55rem, 1px); }
.mk-regla__pieza,
.mk-regla__marca-si { padding: round(down, .1rem, 1px) round(down, .4rem, 1px); }
.mk-regla__pieza--valor,
.mk-regla__pieza--courier,
.mk-regla__pieza--tienda { padding: round(down, .18rem, 1px) round(down, .5rem, 1px); }
.mk-regla__pieza--courier,
.mk-regla__pieza--tienda { gap: round(down, .35rem, 1px); }

/* Y las filas de pedidos: el nombre arranca tras la foto y el gap */
.mk-fila { gap: round(down, .5rem, 1px); }
.mk-nuevo__fila { gap: round(down, .5rem, 1px); }
.mk-origen__fila { gap: round(down, .6rem, 1px); }

/* La etiqueta de cada linea, a ancho fijo: su ancho fraccionario empujaba a
   la pieza siguiente a medio pixel. Alinea las tres reglas de paso. */
.rg-seccion .mk-regla__linea > .mk-regla__union:first-child,
.rg-seccion .mk-regla__marca-si { width: 58px; flex: none; text-align: left; }

/* Los articulos del pedido agrupado, que se reparten el ancho sobrante */
.mk-articulos--refs { gap: round(down, .3rem, 1px); }
.mk-articulo { padding: round(down, .12rem, 1px) round(down, .45rem, 1px); }

/* El aviso y el boton son los dos ultimos bloques que desplazaban texto a
   medio pixel: el aviso por su margen en rem, el boton porque `margin-left:
   auto` lo empuja contra un ancho de contenido fraccionario. */
.mk-aviso {
  margin: 0 round(down, .45rem, 1px) round(down, .5rem, 1px);
  padding: round(down, .45rem, 1px) round(down, .6rem, 1px);
  gap: round(down, .45rem, 1px);
}
.mk-boton {
  padding: round(down, .38rem, 1px) round(down, .7rem, 1px);
  gap: round(down, .3rem, 1px);
}
.mk-origen__fila { justify-content: flex-start; }
.mk-origen__fila > .mk-boton,
.mk-origen__fila > .mk-regla__marca { margin-left: auto; }

/* ==========================================================================
   El transportista asignado en reglas
   Aqui la marca lleva logo Y servicio, y apilados se salian de la fila. En
   linea caben y ademas se leen como una sola cosa: «SEUR 24 h».
   ========================================================================== */
.rg-seccion .mk-fila__destino {
  display: inline-flex; align-items: center; gap: round(down, .3rem, 1px);
  padding: round(down, .15rem, 1px) round(down, .4rem, 1px);
  background: var(--verde-suave);
  border: 1px solid var(--verde-borde);
  color: #166534;
  max-width: 42%;
}
.rg-seccion .mk-destino__logo { height: 12px; max-width: 30px; flex: none; }
.rg-seccion .mk-destino__servicio {
  font-size: .58rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================================
   Agrupar y reglas en movil: el raton se retira con su panel
   El relevo de `_base.css` cambia el panel bajo el raton, y su ultima parada
   quedaba medida sobre el panel que ya se ha ido: el cursor se veia flotando
   solo en medio de la escena. Se va con el.
   ========================================================================== */
/* Agrupar: marca las tres casillas, pulsa Agrupar y se retira antes del
   relevo. Lo que sigue lo hace el sistema, no la mano. */
@keyframes ag-raton-movil {
  0%    { opacity: 0; translate: var(--r0x) var(--r0y); animation-timing-function: linear; }
  2%    { opacity: 1; translate: var(--r0x) var(--r0y); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  10%   { opacity: 1; translate: var(--r2x) var(--r2y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  11%   { opacity: 1; translate: var(--r2x) var(--r2y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  12.5% { opacity: 1; translate: var(--r2x) var(--r2y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  15%   { opacity: 1; translate: var(--r3x) var(--r3y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  16%   { opacity: 1; translate: var(--r3x) var(--r3y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  17.5% { opacity: 1; translate: var(--r3x) var(--r3y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  20%   { opacity: 1; translate: var(--r4x) var(--r4y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  21%   { opacity: 1; translate: var(--r4x) var(--r4y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  22.5% { opacity: 1; translate: var(--r4x) var(--r4y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  27%   { opacity: 1; translate: var(--r6x) var(--r6y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  28.5% { opacity: 1; translate: var(--r6x) var(--r6y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  30%   { opacity: 1; translate: var(--r6x) var(--r6y); scale: 1; animation-timing-function: linear; }
  /* fuera antes de que el panel de origen ceda el turno */
  40%   { opacity: 0; translate: var(--r6x) var(--r6y); animation-timing-function: linear; }
  100%  { opacity: 0; translate: var(--r6x) var(--r6y); }
}

/* Reglas: escribe las tres y se retira. Ya lo hacia en escritorio, pero en
   movil hay que apagarlo antes del relevo. */
@keyframes rg-raton-movil {
  0%    { opacity: 0; translate: var(--r0x) var(--r0y); animation-timing-function: linear; }
  1%    { opacity: 1; translate: var(--r0x) var(--r0y); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  2%    { opacity: 1; translate: var(--r2x) var(--r2y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  2.5%  { opacity: 1; translate: var(--r2x) var(--r2y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  3.5%  { opacity: 1; translate: var(--r2x) var(--r2y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  7%    { opacity: 1; translate: var(--r3x) var(--r3y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  7.5%  { opacity: 1; translate: var(--r3x) var(--r3y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  8.5%  { opacity: 1; translate: var(--r3x) var(--r3y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  12%   { opacity: 1; translate: var(--r4x) var(--r4y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  12.5% { opacity: 1; translate: var(--r4x) var(--r4y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  13.5% { opacity: 1; translate: var(--r4x) var(--r4y); scale: 1; animation-timing-function: linear; }
  18%   { opacity: 1; translate: var(--r4x) var(--r4y); animation-timing-function: linear; }
  21%   { opacity: 0; translate: var(--r4x) var(--r4y); animation-timing-function: linear; }
  100%  { opacity: 0; translate: var(--r4x) var(--r4y); }
}


/* ==========================================================================
   El transportista asignado, legible
   En «listos para enviar» el logo salia a 12px y el servicio abreviado
   («24 h»), mientras que en la regla de la izquierda se lee entero
   («SEUR · Paquete 24 h»). Hay sitio de sobra para que sea igual.
   ========================================================================== */

.rg-seccion .mk-fila__destino {
  max-width: none;
  padding: round(down, .22rem, 1px) round(down, .5rem, 1px);
  gap: round(down, .4rem, 1px);
}
.rg-seccion .mk-destino__logo {
  height: 16px;
  max-width: 42px;
}
.rg-seccion .mk-destino__servicio {
  font-size: .68rem;
  font-weight: 700;
}