/* ---------- lo que viene · carrusel ---------- */
/* las flechas, a los lados de las tarjetas y por encima de ellas */
.opr-px-camino .opr-px-cm-flecha{
  position:absolute !important; top:50% !important; transform:translateY(-50%) !important; z-index:50 !important;
  width:46px !important; height:46px !important; border-radius:999px !important; display:grid !important; place-items:center !important;
  color:var(--suave) !important; background:var(--superficie) !important;
  box-shadow:inset 0 0 0 1.5px var(--borde2), var(--sombra-s) !important;
  transition:background .16s ease, color .16s ease, box-shadow .16s ease !important;
}
.opr-px-camino .opr-px-cm-flecha.es-antes{left:clamp(0px,1vw,18px) !important}
.opr-px-camino .opr-px-cm-flecha.es-despues{right:clamp(0px,1vw,18px) !important}
.opr-px-camino .opr-px-cm-flecha:hover{color:var(--tinta) !important; box-shadow:inset 0 0 0 1.5px var(--p500), var(--sombra) !important}
.opr-px-camino .opr-px-cm-flecha:active{transform:translateY(-50%) scale(.94) !important}
.opr-px-camino .opr-px-cm-flecha svg{width:19px !important; height:19px !important}

/* La escena se sale de la caja de 1180 px a propósito: dentro no caben cinco
   tarjetas sin que las dos de fuera queden en un hilo. Como es hija directa de
   la sección, ocupa su ancho menos el padding, sin usar vw y sin arriesgar
   scroll horizontal. */
.opr-px-camino .opr-px-cm-ancho{width:100% !important}

/* la escena: las tarjetas van absolutas dentro, así que la altura la pone ella.
   La máscara va en la pista y no en la escena: si fuera en la escena también
   desvanecería las flechas, que están justo en el borde. */
.opr-px-camino .opr-px-cm-escena{
  position:relative !important; height:clamp(348px,42vw,420px) !important;
  touch-action:pan-y !important; cursor:grab !important;
}
.opr-px-camino .opr-px-cm-escena.es-arrastrando{cursor:grabbing !important}
.opr-px-camino .opr-px-cm-pista{
  position:absolute !important; inset:0 !important; overflow:hidden !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%) !important;
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%) !important;
}

.opr-px-camino .opr-px-cm-carta{
  position:absolute !important; left:50% !important; top:50% !important; width:clamp(246px,23vw,318px) !important;
  margin-left:calc(clamp(246px,23vw,318px) / -2) !important;
  padding:26px 26px 24px !important; border-radius:var(--radio) !important;
  background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde), var(--sombra) !important;
  transition:transform .52s cubic-bezier(.32,.72,.16,1), opacity .52s cubic-bezier(.32,.72,.16,1),
             filter .52s cubic-bezier(.32,.72,.16,1) !important;
  will-change:transform, opacity, filter !important;
  --velo:0px;
}
/* la nitidez cuenta la distancia: entera en el centro, con velo al lado, y
   solo intuida en los extremos */
.opr-px-camino .opr-px-cm-carta.es-lado{filter:blur(var(--velo)) !important; opacity:.94 !important}
.opr-px-camino .opr-px-cm-carta.es-fuera{filter:blur(var(--velo)) !important; opacity:.82 !important}
.opr-px-camino .opr-px-cm-carta.es-lejos{opacity:0 !important; pointer-events:none !important}

.opr-px-camino .opr-px-cm-icono{
  width:42px !important; height:42px !important; border-radius:12px !important; display:grid !important; place-items:center !important;
  background:var(--p100) !important; color:var(--p700) !important; margin-bottom:16px !important;
}
.opr-px-camino .opr-px-cm-icono svg{width:21px !important; height:21px !important}
.opr-px-camino .opr-px-cm-etq{display:block !important; font-size:.78125rem !important; font-weight:600 !important; color:var(--tenue) !important}
.opr-px-camino .opr-px-cm-tit{margin-top:5px !important; font-size:1.1875rem !important; font-weight:800 !important; letter-spacing:-.024em !important; line-height:1.18 !important}
.opr-px-camino .opr-px-cm-txt{margin-top:9px !important; font-size:.90625rem !important; line-height:1.55 !important; color:var(--suave) !important; text-wrap:pretty !important}
.opr-px-camino .opr-px-cm-dato{
  margin-top:16px !important; padding-top:14px !important; border-top:1px solid var(--borde) !important;
  display:flex !important; align-items:baseline !important; gap:7px !important;
}
.opr-px-camino .opr-px-cm-dato b{font-size:1.375rem !important; font-weight:800 !important; letter-spacing:-.03em !important; font-variant-numeric:tabular-nums !important}
.opr-px-camino .opr-px-cm-dato span{font-size:.8125rem !important; color:var(--tenue) !important}

/* --- las tres sin desvelar --- */
.opr-px-camino .opr-px-cm-carta.es-velada{background:var(--p50) !important}
.opr-px-camino .opr-px-cm-velo{position:relative !important}
.opr-px-camino .opr-px-cm-borroso{
  filter:blur(7px) !important; opacity:.5 !important; user-select:none !important; pointer-events:none !important;
}
.opr-px-camino .opr-px-cm-barra{
  display:block !important; height:13px !important; border-radius:5px !important; background:var(--p300) !important; margin-bottom:9px !important;
}
.opr-px-camino .opr-px-cm-barra.es-corta{width:52% !important}
.opr-px-camino .opr-px-cm-barra.es-media{width:78% !important}
.opr-px-camino .opr-px-cm-barra.es-fina{height:9px !important; background:var(--p200) !important}
.opr-px-camino .opr-px-cm-sello{
  position:absolute !important; left:0 !important; right:0 !important; top:50% !important; transform:translateY(-50%) !important;
  display:flex !important; flex-direction:column !important; align-items:center !important; gap:7px !important; text-align:center !important;
}
.opr-px-camino .opr-px-cm-sello-icono{
  width:38px !important; height:38px !important; border-radius:999px !important; display:grid !important; place-items:center !important;
  background:var(--p950) !important; color:#fff !important;
}
.opr-px-camino .opr-px-cm-sello-icono svg{width:17px !important; height:17px !important}
.opr-px-camino .opr-px-cm-sello b{font-size:1rem !important; font-weight:800 !important; letter-spacing:-.022em !important}
.opr-px-camino .opr-px-cm-sello span{font-size:.8125rem !important; color:var(--suave) !important}

/* --- puntos --- */
.opr-px-camino .opr-px-cm-puntos{display:flex !important; justify-content:center !important; gap:7px !important; margin-top:26px !important; flex-wrap:wrap !important}
.opr-px-camino .opr-px-cm-punto{
  width:8px !important; height:8px !important; border-radius:999px !important; background:var(--p300) !important;
  transition:width .3s ease, background .3s ease !important;
}
.opr-px-camino .opr-px-cm-punto.es-activo{width:26px !important; background:var(--p950) !important}

/* --- pie --- */
.opr-px-camino .opr-px-cm-pie{
  margin-top:28px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:11px !important;
  font-size:.90625rem !important; color:var(--suave) !important; text-align:left !important;
}
.opr-px-camino .opr-px-cm-pie b{font-weight:700 !important; color:var(--tinta) !important}
.opr-px-camino .opr-px-cm-candado{
  flex:none !important; width:32px !important; height:32px !important; border-radius:999px !important; display:grid !important; place-items:center !important;
  background:var(--p100) !important; color:var(--p700) !important;
}
.opr-px-camino .opr-px-cm-candado svg{width:16px !important; height:16px !important}

@media (max-width:820px){
  .opr-px-camino .opr-px-cm-escena{height:clamp(340px,74vw,400px) !important}
}
@media (max-width:640px){
  /* en estrecho no caben cinco: las de fuera estorban más de lo que aportan */
  .opr-px-camino .opr-px-cm-carta.es-fuera{opacity:0 !important; pointer-events:none !important}
  .opr-px-camino .opr-px-cm-flecha{width:40px !important; height:40px !important}
}
@media (max-width:560px){
  .opr-px-camino .opr-px-cm-carta{padding:22px 20px 20px !important}
  .opr-px-camino .opr-px-cm-pie{font-size:.84375rem !important}
}