/* /pricing — ronda 4, VARIANTE J1: "EL MAPA REAL". Prefijo `pj1-`.
   El hero es una escena: la ciudad de /empresas (Leaflet + Esri World Light
   Gray Base, quieta y con el mismo tratamiento de color), misiones que caen
   como pines, Znappers que las recorren y un HUD con el tanque de credito.
   Lo que la escena tiene que hacer ver, en este orden:
     1. se carga credito  -> el tanque se llena bloque a bloque;
     2. se lanzan misiones -> caen pines, "Lanzadas" sube, el tanque NO se mueve;
     3. un Znapper completa -> flash, check, un bloque sale del tanque y se
        reparte en dos monedas: al Znapper y a Znapp;
     4. cuando el tanque baja, una recarga lo llena de nuevo.
   Capas, de abajo hacia arriba: mapa (0) · velo (1) · pines y Znappers (2) ·
   texto y HUD (3) · monedas y rotulos (4). Ver js/pricing-j1.js. */

.pj1 {
  --pj1-z: #F44D30;              /* Znapper en zona: el naranja del producto */
  --pj1-ease: cubic-bezier(.23, 1, .32, 1);
  --pj1-uir: 640px;              /* borde derecho del texto+HUD, lo escribe el JS */
  --pj1-txtb: 320px;             /* borde inferior del texto (celular), idem */
  /* la barra es `sticky` y ocupa su lugar: la escena es el resto de la pantalla */
  --pj1-alto: max(calc(100svh - var(--navh, 64px)), 600px);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: var(--pj1-alto);
  background: var(--surface);
}

/* barra de arriba: vidrio esmerilado, como en /empresas, porque atras hay ciudad */
body:has(.pj1) .nav {
  background: rgba(250,248,245,.94);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* ---------------- el mapa ---------------- */
.pj1-mapa { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--surface); }
.pj1-mapa.leaflet-container { background: var(--surface); font-family: inherit; }
/* el mismo filtro que `.red__lienzo` en /empresas: calles blancas sobre tierra
   gris calida, alineada con el `--surface` del sitio */
.pj1-mapa .leaflet-tile-pane {
  filter: saturate(.42) brightness(.93) sepia(.14) hue-rotate(-6deg) saturate(1.22) contrast(.97);
}
.pj1-mapa .leaflet-pane > svg { max-width: none; max-height: none; }
.pj1-mapa .leaflet-control-attribution {
  pointer-events: auto;
  background: rgba(250,248,245,.78); color: var(--text-2);
  font-family: var(--mono); font-size: 9px; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 4px 0 0 0;
}
.pj1-mapa .leaflet-control-attribution a { color: var(--text); }

/* el velo: papel detras del texto y del HUD, la ciudad libre a la derecha */
.pj1-velo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(250,248,245,.85) 0, rgba(250,248,245,0) 60px),
    linear-gradient(90deg,
      rgba(250,248,245,.97) 0,
      rgba(250,248,245,.93) calc(var(--pj1-uir) - 40px),
      rgba(250,248,245,0) calc(var(--pj1-uir) + 140px));
}

/* ---------------- capas ---------------- */
.pj1-capa, .pj1-fx { position: absolute; inset: 0; pointer-events: none; }
.pj1-capa { z-index: 2; }
.pj1-fx { z-index: 4; }

/* ---------------- texto y HUD ---------------- */
.pj1-ui {
  position: relative; z-index: 3; pointer-events: none;
  min-height: var(--pj1-alto);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding-top: clamp(28px, 5vh, 56px);
  padding-bottom: clamp(36px, 7vh, 80px);
}
.pj1-txt { max-width: 600px; margin-bottom: clamp(20px, 4vh, 40px); }

/* "CREDITO" CON SU MONEDA. La "o" final es una moneda teal con el signo
   pesos: sin contenido en flujo, su borde de abajo se apoya en la linea de
   base como una letra. Gira una vez al entrar y cada vez que se carga. */
.pj1-cred-w { color: var(--teal); white-space: nowrap; }
.pj1-moneda {
  position: relative; display: inline-block; width: .56em; height: .56em; margin: 0 .02em 0 .03em;
  border-radius: 50%; vertical-align: baseline; bottom: -.01em;
  background: radial-gradient(circle at 35% 30%, var(--teal-hi), var(--teal) 60%, #0d9e8c);
  box-shadow: inset 0 0 0 .04em rgba(255,255,255,.3), 0 .06em .12em -.04em rgba(13,158,140,.6);
  animation: pj1Gira 1s cubic-bezier(.45, 0, .25, 1) .5s both;
}
.pj1-moneda i {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-style: normal; font-size: .4em; font-weight: 800; line-height: 1; color: #fff; letter-spacing: 0;
}
.pj1-moneda.is-gira { animation: pj1Gira 1s cubic-bezier(.45, 0, .25, 1); }
@keyframes pj1Gira { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
.pj1-txt .pe-sub { max-width: 24em; font-size: clamp(16px, min(1.35vw, 2.4vh), 20px); margin-top: clamp(12px, 2vh, 18px); }
/* ESCALA POR ALTO, NO SOLO POR ANCHO (13/11): en una notebook de 1280x720 o
   una Mac de 1440x900 el titulo a 5,6vw y el recuadro con aire fijo llenaban
   la pantalla y pedian alejar el zoom. Todo lo grande del hero toma el menor
   entre su medida por ancho y por alto. */
.pj1 .pe-h1 { font-size: clamp(40px, min(4.6vw, 7.6vh), 70px); }

/* LOS TRES PASOS (13/11, segunda version). La primera era chica y
   apretada y los numeros no se veian. Ahora el numero ES el marcador: un
   circulo teal grande, unidos por una linea punteada; titulo a 20, bajada
   a 15, y aire entre paso y paso. */
.pj1-pasos { list-style: none; margin: clamp(22px, 4vh, 40px) 0 0; padding: 0; display: grid; gap: clamp(16px, 3vh, 28px); }
.pj1-paso { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: start; }
.pj1-paso:not(:last-child)::before {
  content: ""; position: absolute; left: 21px; top: 52px; bottom: calc(-1 * clamp(16px, 3vh, 28px) + 6px); width: 2px;
  background: repeating-linear-gradient(180deg, rgba(19,193,172,.6) 0 5px, transparent 5px 10px);
}
.pj1-paso__n {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--teal-hi), var(--teal) 55%, #0d9e8c); color: #fff;
  font-size: 21px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 5px var(--teal-tint), 0 10px 18px -10px rgba(19,193,172,.9);
}
.pj1-paso__c { padding-top: 2px; min-width: 0; }
.pj1-paso__t { margin: 0; font-size: clamp(18px, min(1.5vw, 2.7vh), 21px); font-weight: 700; color: var(--ink); line-height: 1.2; letter-spacing: -.01em; }
.pj1-paso__d { margin: 5px 0 0; font-size: 15px; line-height: 1.45; color: var(--text-3); }
/* paso 1: las dos partes del precio, cada una por separado */
.pj1-paso__precio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.pj1-paso__precio em { font-style: normal; font-size: 18px; font-weight: 700; color: var(--text-4); }
.pj1-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 5px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap;
}
.pj1-chip--z { background: var(--pj1-z); box-shadow: 0 8px 16px -10px rgba(244,77,48,.9); }
.pj1-chip--n { background: #0b8c7c; box-shadow: 0 8px 16px -10px rgba(11,140,124,.9); }
.pj1-chip__ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); }
.pj1-chip__ic svg { width: 15px; height: 15px; }
.pj1-chip__ic img { width: 14px; height: auto; display: block; }
.pj1-chip.is-recibe { animation: pj1Recibe 1.2s var(--pj1-ease); }
.pj1-chip.is-recibe .pj1-chip__ic { animation: pj1Gana .5s cubic-bezier(.34, 1.56, .64, 1); }
/* paso 3: un boton que lanza de verdad una mision en el mapa */
/* el CTA: el primario del sitio, alineado con el texto de los pasos y
   separado de ellos lo justo para que se lea como el cierre del bloque */
.pj1-cta { pointer-events: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: clamp(26px, 4.4vh, 42px); }
.pj1-cta .btn { padding-right: 16px; }
.pj1-cta__d { margin: 0; font-size: 14px; line-height: 1.35; color: var(--text-3); max-width: 15em; }

/* EL JUEGO: una barra larga que flota sobre el mapa (13/11). Arranca con
   la invitacion y "Comenzar"; despues, en una fila: credito, medidor, lo
   lanzado y lo hecho, y cargar. Si no entra en una fila, se parte en dos
   (consulta de contenedor, no de pantalla). */
.pj1-hud {
  pointer-events: auto; container-type: inline-size;
  width: 100%;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(52,49,44,.08), 0 30px 60px -30px rgba(52,49,44,.5), 0 10px 20px -14px rgba(52,49,44,.25);
  padding: 14px clamp(20px, 2vw, 28px);
  animation: pj1Flota 7s ease-in-out infinite;
}
@keyframes pj1Flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.pj1-hud__intro { display: flex; align-items: center; gap: 16px; }
.pj1-hud__intro p { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; }
.pj1-hud__intro b { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.pj1-hud__intro small { font-size: 14px; color: var(--text-3); line-height: 1.35; margin-top: 2px; }
.pj1-hud__play {
  flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--teal-hi), var(--teal) 55%, #0d9e8c); color: #fff;
  box-shadow: 0 10px 18px -10px rgba(19,193,172,.9);
}
.pj1-hud__play svg { width: 22px; height: 22px; }
.pj1-hud__marca { flex: none; width: 48px; height: 48px; border-radius: 14px; display: block; box-shadow: 0 10px 20px -10px rgba(19,193,172,.9); animation: pj1Marca 3.2s ease-in-out infinite; }
@keyframes pj1Marca { 0%, 100% { rotate: 0deg; } 8% { rotate: -8deg; } 16% { rotate: 6deg; } 24% { rotate: 0deg; } }
.pj1-comenzar {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 9px;
  height: 48px; padding: 0 24px 0 18px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(145deg, var(--teal-hi), var(--teal) 55%, #0d9e8c); color: #fff;
  font: inherit; font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 12px 22px -12px rgba(19,193,172,.95);
  transition: scale .2s var(--pj1-ease), background-color .2s var(--pj1-ease);
}
.pj1-comenzar::after {
  content: ""; position: absolute; inset: -4px; border-radius: 17px; border: 2px solid var(--teal);
  animation: pj1Urge 1.8s ease-out infinite;
}
.pj1-comenzar svg { width: 18px; height: 18px; }
.pj1-comenzar:hover { scale: 1.05; }
.pj1-comenzar:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.pj1-hud__juego { display: none; }
.pj1-hud:not(.is-intro) .pj1-hud__intro { display: none; }
.pj1-hud:not(.is-intro) .pj1-hud__juego {
  display: grid; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cred stats stats" "med med cargar";
  gap: 12px 20px;
  animation: pj1Aparece .45s var(--pj1-ease) both;
}
@keyframes pj1Aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* lo lanzado y lo hecho aparecen con la primera mision */
.pj1-hud.is-vacio .pj1-stats, .pj1-hud.is-vacio .pj1-feed { display: none; }
.pj1-stats { animation: pj1Aparece .45s var(--pj1-ease) both; }
.pj1-cred { grid-area: cred; }
.pj1-medidor { grid-area: med; min-width: 0; }
.pj1-stats { grid-area: stats; justify-self: end; }
.pj1-cargar { grid-area: cargar; }
@container (min-width: 640px) {
  .pj1-hud:not(.is-intro) .pj1-hud__juego {
    grid-template-columns: auto minmax(150px, 1fr) auto auto; grid-template-areas: "cred med stats cargar";
    gap: 0 26px;
  }
}
/* EN ESCRITORIO la barra del juego va abajo a la derecha, sobre el mapa,
   del ancho de la zona libre (entre el texto y el borde, menos aire). */
@media (min-width: 1180px) {
  .pj1-hud {
    /* centrada abajo en la zona del mapa (entre el texto y el borde): angosta
       en la invitacion, mas ancha cuando arranca el juego */
    position: absolute; bottom: clamp(22px, 4.5vh, 44px);
    left: calc((100% - 100vw) / 2 + var(--pj1-uir, 760px) + 40px);
    right: calc((100% - 100vw) / 2 + clamp(24px, 3vw, 56px));
    margin-inline: auto;
    width: min(500px, calc(100vw - var(--pj1-uir, 760px) - 100px));
    transition: width .45s var(--pj1-ease);
  }
  .pj1-hud:not(.is-intro) {
    width: min(760px, calc(100vw - var(--pj1-uir, 760px) - 100px));
  }
  .pj1-txt { margin-bottom: 0; max-width: 560px; }
}
@container (max-width: 430px) {
  .pj1-hud__intro { flex-wrap: wrap; }
  .pj1-comenzar { width: 100%; }
}
/* TIPOGRAFIA: la del sitio (Archivo) en todo el HUD. Nada de rotulos en
   mono, mayusculas y espaciado: el usuario los leyo como "estetica de IA"
   (13/11). Los numeros van en Archivo con cifras tabulares. */
.pj1-lab {
  display: block; font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 4px;
}
.pj1-monto, .pj1-num {
  display: block; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1;
}
.pj1-monto { font-size: clamp(24px, min(2vw, 3.8vh), 30px); letter-spacing: -.03em; transform-origin: left bottom; }
.pj1-stats { display: flex; gap: 20px; text-align: right; }
.pj1-num { font-size: clamp(20px, min(1.6vw, 3vh), 24px); letter-spacing: -.02em; transform-origin: right bottom; }
.pj1-stat--ok .pj1-num { color: var(--teal-field); }
/* ESCALA DEL RECUADRO (13/11), cuatro tamaños y nada mas: 14 para rotulos
   y texto, 13 para notas, 15 para las partes del precio, y los numeros. */
.pj1-nota {
  display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--text-3); white-space: nowrap;
  transition: color .6s var(--pj1-ease);
}
.pj1-stat.is-avisa .pj1-nota { color: var(--teal-field); font-weight: 600; transition-duration: .15s; }

/* los numeros que cambian dan un saltito */
.pj1-sube { animation: pj1Sube .4s var(--pj1-ease); }
@keyframes pj1Sube { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ---------------- la barra de credito ----------------
   Tercera version (13/11). Rechazadas: la de bloques (pilas), la gruesa con
   brillo y punto de luz (infantil) y la linea plana de 8px (pobre). Ahora es
   un medidor: canal hundido con marcas cada 10%, el nivel en degrade del
   teal con su propia sombra y, arriba, "Montos de ejemplo". Sin
   barrido de luz ("barato", 13/11): lo vivo es que el nivel se mueve y cada
   mision hecha deja escrito en la punta lo que salio. */
.pj1-barra-cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 0; font-size: 13px; color: var(--text-3);
}
.pj1-barra-cab span:first-child { color: var(--text-2); font-weight: 500; }
.pj1-barra-cab b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.pj1-tanque {
  position: relative; margin-top: 8px; height: 14px; padding: 3px; border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(52,49,44,.10) calc(10% - 1px) 10%) 3px 50% / calc(100% - 6px) 6px no-repeat,
    var(--surface);
  box-shadow: inset 0 1px 2px rgba(52,49,44,.12), inset 0 0 0 1px rgba(52,49,44,.05);
}
.pj1-rastro, .pj1-nivel { position: absolute; left: 3px; top: 3px; bottom: 3px; border-radius: 999px; min-width: 0; max-width: calc(100% - 6px); }
.pj1-rastro { background: rgba(244,77,48,.4); }
.pj1-nivel {
  overflow: hidden;
  background: linear-gradient(90deg, #0d9e8c, var(--teal) 55%, var(--teal-hi));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 10px -3px rgba(19,193,172,.7);
  transition: filter .4s var(--pj1-ease);
}
.pj1-tanque.is-carga .pj1-nivel { filter: brightness(1.12) saturate(1.1); }

/* EL ICONO DE "TU CREDITO": una billetera en un cuadrito teal. Late cuando
   cargas. El monto se tiñe un instante: naranja al bajar, teal al subir. */
.pj1-lab--cred { display: flex; align-items: center; gap: 9px; }
.pj1-cred__ic {
  flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: var(--teal); color: #fff; box-shadow: 0 6px 12px -6px rgba(19,193,172,.9);
}
.pj1-cred__ic svg { width: 17px; height: 17px; }
.pj1-cred__ic.is-late { animation: pj1Gana .5s cubic-bezier(.34, 1.56, .64, 1); }
.pj1-monto { transition: color .5s var(--pj1-ease); }
.pj1-monto.is-baja { color: var(--pj1-z); transition-duration: .1s; }
.pj1-monto.is-alza { color: var(--teal-field); transition-duration: .1s; }

/* lo ultimo que paso en el mapa, a la derecha de "Montos de ejemplo" */
.pj1-feed { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 500; color: var(--text-2); }
.pj1-feed__i { display: inline-flex; align-items: center; gap: 7px; animation: pj1Feed .45s var(--pj1-ease); }
.pj1-feed__i i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-4); }
.pj1-feed__i--ok i { background: var(--pj1-z); }
.pj1-feed__i--carga i, .pj1-feed__i--lan i { background: var(--teal); }
@keyframes pj1Feed { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* EL BOTON DE CARGAR, al lado de la barra. Urgente (naranja, con un aro
   que late) cuando hay misiones esperando y no hay credito. */
.pj1-barra-fila { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.pj1-barra-fila .pj1-tanque { flex: 1; margin-top: 0; }
.pj1-cargar {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px 0 10px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--ink); color: var(--paper); font: inherit; font-size: 14px; font-weight: 600;
  transition: background-color .3s var(--pj1-ease), opacity .3s var(--pj1-ease), scale .2s var(--pj1-ease);
}
.pj1-cargar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.pj1-cargar:hover { scale: 1.04; }
.pj1-cargar:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pj1-cargar:disabled { opacity: .35; cursor: default; scale: 1; }
.pj1-cargar.is-urge { background: var(--pj1-z); }
.pj1-cargar.is-urge::after {
  content: ""; position: absolute; inset: -4px; border-radius: 13px; border: 2px solid var(--pj1-z);
  animation: pj1Urge 1.4s ease-out infinite;
}
@keyframes pj1Urge { 0% { opacity: .8; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.14); } }

/* sin credito, las misiones esperan en gris */
.pj1-pin .pj1-pin__p { transition: filter .5s var(--pj1-ease), opacity .5s var(--pj1-ease); }
.pj1-pin.is-espera .pj1-pin__p { filter: grayscale(1); opacity: .7; }

/* EL CARTEL GUIA: arriba del mapa, centrado en la zona libre. No tapa nada
   del recuadro y se va solo cuando el paso se cumple. */
.pj1-guia { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; }
.pj1-guia__in {
  position: relative; left: 0; display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(440px, calc(100vw - 32px));
  transform: translateX(-50%); pointer-events: auto;
  padding: 10px 16px 10px 10px; border-radius: 16px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 18px 36px -18px rgba(52,49,44,.45);
  animation: pj1GuiaIn .5s var(--pj1-ease) both;
}
.pj1-guia__in > span { display: flex; flex-direction: column; min-width: 0; }
.pj1-guia b { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.pj1-guia small { font-size: 13px; color: var(--text-3); line-height: 1.3; margin-top: 2px; }
.pj1-guia__ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); }
.pj1-guia__ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.pj1-guia--cargar .pj1-guia__in { box-shadow: 0 0 0 1.5px rgba(244,77,48,.55), 0 18px 36px -18px rgba(244,77,48,.55); padding-right: 10px; }
.pj1-guia--cargar .pj1-guia__ic { background: var(--pj1-z); color: #fff; }
.pj1-guia__btn {
  flex: none; margin-left: 4px; height: 36px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--pj1-z); color: #fff; font: inherit; font-size: 14px; font-weight: 600;
}
.pj1-guia__btn:hover { filter: brightness(1.06); }
.pj1-guia__in.is-sale { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
@keyframes pj1GuiaIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* en escritorio, el mapa se toca */
@media (hover: hover) and (pointer: fine) { .pj1 { cursor: pointer; } .pj1-txt, .pj1-hud { cursor: auto; } }

@keyframes pj1Recibe { 0% { filter: none; } 15% { filter: brightness(1.18) saturate(1.1); } 100% { filter: none; } }

/* ---------------- el globo ----------------
   Lo unico que se toca: aparece sobre un punto del mapa, late, y al tocarlo
   cae ahi una mision. Ancla = la coordenada (el piso, como los pines). */
.pj1-globo {
  position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none;
  pointer-events: auto; cursor: pointer; z-index: 3; font: inherit; color: inherit;
}
.pj1-globo__b {
  position: absolute; left: -24px; top: -66px; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--teal), 0 12px 24px -10px rgba(52,49,44,.7);
  transition: scale .2s var(--pj1-ease);
  animation: pj1GloboIn .55s cubic-bezier(.34, 1.56, .64, 1) both, pj1GloboFlota 2s ease-in-out .55s infinite;
}
.pj1-globo__b::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 12px; margin: 5px 0 0 -1px;
  border-radius: 1px; background: var(--ink);
}
.pj1-globo__b svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.pj1-globo__onda {
  position: absolute; left: -16px; top: -7px; width: 32px; height: 14px; border-radius: 50%;
  border: 2px solid var(--teal); animation: pj1GloboOnda 2s ease-out infinite;
}
.pj1-globo__txt {
  position: absolute; left: 0; top: 10px; transform: translateX(-50%); white-space: nowrap;
  padding: 6px 11px; border-radius: 999px; background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 6px 14px -6px rgba(52,49,44,.4);
  font-size: 13px; font-weight: 600; display: none;
}
.pj1-globo.is-primero .pj1-globo__txt { display: block; animation: pj1GloboIn .4s var(--pj1-ease) .5s both; }
.pj1-globo:hover .pj1-globo__b, .pj1-globo:focus-visible .pj1-globo__b { scale: 1.12; }
.pj1-globo:focus-visible { outline: none; }
.pj1-globo:focus-visible .pj1-globo__b { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
.pj1-globo.is-pop .pj1-globo__b { animation: pj1GloboPop .4s ease-out forwards; }
.pj1-globo.is-va .pj1-globo__b { animation: pj1GloboVa .45s ease-in forwards; }
.pj1-globo.is-pop .pj1-globo__onda, .pj1-globo.is-va .pj1-globo__onda,
.pj1-globo.is-pop .pj1-globo__txt, .pj1-globo.is-va .pj1-globo__txt { display: none; }
@keyframes pj1GloboIn { 0% { opacity: 0; transform: translateY(14px) scale(.3); } 100% { opacity: 1; transform: none; } }
@keyframes pj1GloboFlota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes pj1GloboOnda { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes pj1GloboPop { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes pj1GloboVa { 0% { transform: scale(1); opacity: 1; } 100% { transform: translateY(8px) scale(.2); opacity: 0; } }

/* ---------------- los pines ----------------
   El ancla (0,0) es el PISO de la coordenada: ahi va la sombra, y el disco
   flota arriba, como en /empresas. */
.pj1-pin, .pj1-z, .pj1-eco, .pj1-mon, .pj1-tag, .pj1-flash { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.pj1-z, .pj1-eco, .pj1-mon { will-change: transform; }
.pj1-pin__som {
  position: absolute; left: -10px; top: -4px; width: 20px; height: 7px; border-radius: 50%;
  background: rgba(52,49,44,.30); filter: blur(2.5px);
}
.pj1-pin__in { position: absolute; left: -22px; top: -54px; width: 44px; height: 44px; transform-origin: 50% 100%; }
.pj1-pin__p {
  position: absolute; left: 5px; top: 5px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); color: var(--teal-field);
  box-shadow: 0 0 0 2px var(--teal), 0 7px 16px -6px rgba(52,49,44,.5);
  transition: background-color .3s var(--pj1-ease), color .3s var(--pj1-ease), box-shadow .3s var(--pj1-ease), scale .3s var(--pj1-ease);
  animation: pj1Flota 4.5s cubic-bezier(.77, 0, .175, 1) var(--d, 0ms) infinite;
}
.pj1-pin__p svg { grid-area: 1 / 1; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pj1-pin__p .pj1-pin__ok { opacity: 0; scale: .3; stroke-width: 2.8; transition: opacity .2s ease, scale .45s cubic-bezier(.34, 1.56, .64, 1); }
.pj1-pin__ti { transition: opacity .15s ease; }
@keyframes pj1Flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* el aro de progreso mientras el Znapper releva */
.pj1-pin__aro { position: absolute; inset: 0; width: 44px; height: 44px; rotate: -90deg; overflow: visible; }
.pj1-pin__aro circle { fill: none; stroke: var(--pj1-z); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 126; stroke-dashoffset: 126; opacity: 0; }
.pj1-pin.is-relevando .pj1-pin__aro circle { opacity: 1; animation: pj1Aro 2s linear forwards; }
@keyframes pj1Aro { to { stroke-dashoffset: 0; } }

/* cae, no aparece: acelera como algo que cae y rebota al tocar el piso */
.pj1-pin.is-cae .pj1-pin__in { animation: pj1Cae .9s both; }
.pj1-pin.is-cae .pj1-pin__som { animation: pj1Som .9s both; }
@keyframes pj1Cae {
  0%   { transform: translateY(-170px); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  10%  { opacity: 1; }
  48%  { transform: translateY(0) scale(1.14, .82); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  64%  { transform: translateY(-20px) scale(.95, 1.06); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  78%  { transform: translateY(0) scale(1.06, .93); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  88%  { transform: translateY(-5px) scale(1); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes pj1Som {
  0%   { transform: scale(.2); opacity: 0; }
  48%  { transform: scale(1.2); opacity: .45; }
  100% { transform: scale(1); opacity: 1; }
}
/* la onda al tocar el piso */
.pj1-pin::after {
  content: ""; position: absolute; left: -16px; top: -10px; width: 32px; height: 14px; border-radius: 50%;
  border: 2px solid var(--teal); opacity: 0; pointer-events: none;
}
.pj1-pin.is-cae::after { animation: pj1Onda .7s var(--pj1-ease) .42s; }
@keyframes pj1Onda { 0% { opacity: .8; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.6); } }

/* tomada: un Znapper va en camino */
.pj1-pin.is-tomada .pj1-pin__p { box-shadow: 0 0 0 2px var(--pj1-z), 0 7px 16px -6px rgba(52,49,44,.5); }
/* en revision: el Znapper ya termino y Znapp esta validando. Un aro teal
   que late hasta que se aprueba */
.pj1-pin.is-revision .pj1-pin__p { box-shadow: 0 0 0 2px var(--teal), 0 7px 16px -6px rgba(52,49,44,.5); animation: pj1Revisa .65s ease-in-out infinite alternate; }
@keyframes pj1Revisa { to { box-shadow: 0 0 0 6px rgba(19,193,172,.28), 0 7px 16px -6px rgba(52,49,44,.5); } }
/* hecha: el disco se llena de marca y el glifo pasa a check */
.pj1-pin.is-hecha .pj1-pin__p {
  background: var(--teal-field); color: #fff; scale: 1.08;
  box-shadow: 0 0 0 2px var(--teal-field), 0 8px 18px -6px rgba(13,131,117,.55);
}
.pj1-pin.is-hecha .pj1-pin__ti { opacity: 0; }
.pj1-pin.is-hecha .pj1-pin__ok { opacity: 1; scale: 1; }
/* `scale` va en el hijo: en `.pj1-pin` se compondria con el translate que lo
   coloca y lo arrastraria hacia la esquina */
.pj1-pin.is-sale { opacity: 0; transition: opacity .45s ease; }
.pj1-pin.is-sale .pj1-pin__in { scale: .5; transition: scale .45s var(--pj1-ease); }

/* ---------------- los Znappers ----------------
   Disco naranja con la persona caminando; el ancla es el piso. */
.pj1-z { z-index: 2; }
.pj1-z__som { position: absolute; left: -9px; top: -3px; width: 18px; height: 6px; border-radius: 50%; background: rgba(52,49,44,.28); filter: blur(2px); }
.pj1-z__p {
  position: absolute; left: -14px; top: -32px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pj1-z); color: #fff;
  box-shadow: 0 0 0 2px rgba(250,248,245,.95), 0 6px 14px -5px rgba(52,49,44,.55);
  transition: scale .3s var(--pj1-ease);
}
.pj1-z__ic { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pj1-z.is-izq .pj1-z__ic { scale: -1 1; }
.pj1-z.is-camina .pj1-z__p { animation: pj1Paso .36s ease-in-out infinite alternate; }
@keyframes pj1Paso { 0% { translate: 0 0; rotate: -6deg; } 100% { translate: 0 -3px; rotate: 6deg; } }
.pj1-z.is-trabaja .pj1-z__p { scale: 1.16; }
.pj1-z.pj1-gana .pj1-z__p { animation: pj1Gana .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pj1Gana { 0% { scale: 1; } 40% { scale: 1.45; } 100% { scale: 1; } }
.pj1-eco { z-index: 1; opacity: 0; transition: opacity .25s ease; }
.pj1-eco.is-on { opacity: 1; }
.pj1-eco::before { content: ""; position: absolute; left: -7px; top: -25px; width: 14px; height: 14px; border-radius: 50%; background: rgba(244,77,48,.30); }
.pj1-eco--2::before { left: -5px; top: -23px; width: 10px; height: 10px; background: rgba(244,77,48,.16); }

/* ---------------- monedas, rotulos y flashes ---------------- */
.pj1-mon i {
  position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 12px/1 var(--font); font-style: normal; color: #fff;
  background: var(--pj1-z);
  box-shadow: 0 0 0 2px #fff, 0 4px 10px -3px rgba(52,49,44,.45);
}
.pj1-mon--n i, .pj1-mon--c i { background: var(--teal); }
.pj1-mon--n i { left: -8px; top: -8px; width: 16px; height: 16px; font-size: 9px; }
.pj1-mon--eco i { opacity: .32; box-shadow: none; color: transparent; }
.pj1-mon--eco2 i { opacity: .14; box-shadow: none; color: transparent; }

.pj1-tag { z-index: 3; }
.pj1-tag b {
  position: absolute; left: 0; bottom: 0; transform: translateX(-50%);
  white-space: nowrap; padding: 5px 10px; border-radius: 999px;
  font: 700 13px/1 var(--font);
  background: var(--ink); color: var(--paper);
  box-shadow: 0 6px 16px -6px rgba(52,49,44,.45);
  animation: pj1Tag 1.6s var(--pj1-ease) forwards;
}
.pj1-tag--z b { background: var(--pj1-z); }
.pj1-tag--ok b { background: var(--teal-field); }
.pj1-tag--gasto b { background: var(--paper); color: var(--text-2); font-size: 12px; padding: 4px 8px; box-shadow: 0 0 0 1px var(--line), 0 4px 10px -6px rgba(52,49,44,.4); }
.pj1-tag--carga b { font-size: 15px; padding: 8px 14px; background: var(--teal-field); }
@keyframes pj1Tag {
  0%   { opacity: 0; translate: 0 8px; scale: .85; }
  14%  { opacity: 1; translate: 0 0; scale: 1; }
  80%  { opacity: 1; translate: 0 -10px; }
  100% { opacity: 0; translate: 0 -20px; }
}
.pj1-flash::before {
  content: ""; position: absolute; left: -30px; top: -58px; width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0, rgba(255,255,255,.9) 30%, rgba(19,193,172,.35) 60%, rgba(19,193,172,0) 72%);
  animation: pj1Flash .55s ease-out forwards;
}
@keyframes pj1Flash { 0% { opacity: 0; transform: scale(.3); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(2); } }

/* fuera de pantalla o pestaña oculta: todo quieto */
.pj1.is-pausa * { animation-play-state: paused !important; }

/* ---------------- celular ---------------- */
@media (max-width: 1179px) {   /* apilado: celular, tablet y notebooks chicas (13/11) */
  .pj1-velo {
    background: linear-gradient(180deg,
      rgba(250,248,245,.97) 0, rgba(250,248,245,.93) calc(var(--pj1-txtb) - 10px),
      rgba(250,248,245,0) calc(var(--pj1-txtb) + 60px));
  }
  .pj1-ui { padding-top: 24px; padding-bottom: 28px; }
  .pj1-txt { margin-bottom: clamp(190px, 30svh, 360px); }
  .pj1-txt .pe-k { margin-bottom: 10px; }
  .pj1-txt .pe-h1 { font-size: 38px; }
  .pj1-txt .pe-sub { font-size: 16px; margin-top: 12px; }
  .pj1-pasos { margin-top: 22px; gap: 18px; }
  .pj1-cta { margin-top: 24px; }
  .pj1-paso { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; }
  .pj1-paso__n { width: 38px; height: 38px; font-size: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 4px var(--teal-tint); }
  .pj1-paso:not(:last-child)::before { left: 18px; top: 46px; bottom: -12px; }
  .pj1-paso__t { font-size: 17px; }
  .pj1-paso__d { font-size: 14px; }
  .pj1-chip { height: 32px; font-size: 13px; }
  .pj1-chip__ic { width: 22px; height: 22px; }
  .pj1-hud { width: min(100%, 680px); border-radius: 20px; padding: 14px 18px; }
  .pj1-monto { font-size: 26px; }
  .pj1-ui { justify-content: flex-start; }
  .pj1-hud { margin-top: auto; }
}
@media (max-width: 520px) {
  .pj1-feed { display: none; }
  .pj1-guia b { font-size: 14px; }
  .pj1-guia small { font-size: 12px; }
  .pj1-guia__btn { height: 32px; padding: 0 10px; font-size: 13px; }
  .pj1-cargar { height: 32px; padding: 0 12px 0 9px; font-size: 13px; }
}
@media (max-width: 360px) {
  .pj1-stats { gap: 8px; }
  .pj1-monto { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .pj1-pin__p, .pj1-z__p, .pj1-pin.is-cae .pj1-pin__in, .pj1-pin.is-cae .pj1-pin__som,
  .pj1-pin.is-cae::after, .pj1-sube, .pj1-tanque, .pj1-chip, .pj1-chip__ic, .pj1-hud, .pj1-comenzar::after, .pj1-hud__marca, .pj1-cred__ic, .pj1-moneda, .pj1-guia__in, .pj1-cargar::after { animation: none !important; }
  .pj1-tag b { animation: pj1TagQuieto 1.6s ease forwards; }
  @keyframes pj1TagQuieto { 0% { opacity: 0; } 15%, 75% { opacity: 1; } 100% { opacity: 0; } }
}

/* MAS AIRE (13/11, la opcion A del comparador): sin bajada bajo el titulo,
   los numeros un punto mas chicos y sin halo, la linea mas fina, y mas
   espacio entre paso y paso y antes del boton. Mismo contenido, menos peso. */
.pj1 .pj1-pasos { margin-top: clamp(28px, 5vh, 48px); gap: clamp(22px, 3.6vh, 34px); }
.pj1 .pj1-paso { grid-template-columns: 40px minmax(0, 1fr); gap: 18px; }
.pj1 .pj1-paso__n { width: 40px; height: 40px; font-size: 18px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 4px var(--teal-tint); }
.pj1 .pj1-paso:not(:last-child)::before { left: 19px; top: 50px; bottom: calc(-1 * clamp(22px, 3.6vh, 34px) + 8px); width: 1.5px; }
.pj1 .pj1-paso__t { font-size: clamp(17px, min(1.4vw, 2.5vh), 20px); font-weight: 650; }
.pj1 .pj1-paso__d { margin-top: 4px; font-size: 14.5px; }
.pj1 .pj1-cta { margin-top: clamp(32px, 5.4vh, 52px); }