/* ClickaCierre — celular «recorrido» del hero (#hxr, «la venta que no aparece en tu reporte»), biblioteca de la plantilla
   #7, pilar Analítica web y reportes. Lo carga la página con p.estilos, después de landing.css. Usa las clases del
   celular del hero (.hx, .dx-*, .hx-tag, .hx-miss) y solo agrega lo propio, con el prefijo .hr-. Lo que se mueve es solo
   transform y opacity (scale, translate).
   La pantalla tiene cuatro capas que se turnan: el origen (una búsqueda, un anuncio o una publicación, o el mensaje de
   una amiga), tu web, la conversación y tu reporte. Arriba, un hilo de cuatro pasos (Llegó · Tu web · WhatsApp · Compra).
   Sin movimiento y sin JS queda un solo fotograma: el reporte, encima de las demás capas (cubiertas, no ocultas), con
   las tres marcas y el hilo encendido; debajo, la línea final y el enlace. La web es un dibujo (aria-hidden); lo demás
   es texto real y el sr-only de la figura cuenta la historia. */

/* ---------- la pantalla: debajo de la barra de estado, de borde a borde del celular */
.hx-recorrido .hr-screen{position:absolute;left:0;right:0;top:36px;bottom:34px;z-index:3;display:flex;flex-direction:column;background:#fff;color:#202124;font-family:Arial,sans-serif;transition:opacity .35s}
.hx-recorrido .hr-screen.is-fade{opacity:0}
.hx-recorrido.is-reset .hr-screen *,.hx-recorrido.is-reset .hr-screen *:before,.hx-recorrido.is-reset .hr-screen *:after{transition:none !important;animation:none !important}

/* ---------- el hilo de arriba: cada paso se enciende en lima cuando ocurre */
.hr-trail{flex:none;display:flex;margin:0;padding:9px 14px 10px;list-style:none;border-bottom:1px solid #ebebeb;background:#fff}
.hr-trail li{position:relative;flex:1;text-align:center;font:700 11px/1.2 Arial,sans-serif;color:#80868b;transition:color .3s}
.hr-trail li:not(:first-child):before,.hr-trail li:not(:first-child):after{content:'';position:absolute;left:-50%;right:50%;top:5px;height:2px;background:#e1e4e8}
.hr-trail li:not(:first-child):after{background:#0b1220;transform-origin:0 50%;scale:0 1;transition:scale .5s var(--m-ease)}
.hr-trail i{position:relative;z-index:1;display:block;width:12px;height:12px;margin:0 auto 5px;border-radius:50%;background:#e1e4e8;box-shadow:0 0 0 2px #fff}
.hr-trail i:before{content:'';position:absolute;inset:0;border-radius:50%;background:#b8f34a;box-shadow:0 0 0 1.5px #0b1220;scale:0;transition:scale .4s cubic-bezier(.34,1.56,.64,1)}
.hr-trail li.is-on{color:#0b1220}
.hr-trail li.is-on i:before{scale:1}
.hr-trail li.is-on:not(:first-child):after{scale:1 1}
/* con una recomendación no hay web: el hilo salta de «Llegó» a «WhatsApp» */
.hx-recorrido[data-o="reco"] .hr-trail li:nth-child(2){display:none}

/* ---------- las cuatro capas, apiladas */
.hr-stage{position:relative;flex:1;min-height:0;overflow:hidden}
.hr-layer{position:absolute;inset:0;overflow:hidden;background:#fff}
.hr-origin{z-index:1;padding:0 12px}
.hr-web{z-index:2;display:flex;flex-direction:column}
.hr-chat{z-index:3;display:flex;flex-direction:column;background:#eef1f4}
.hr-report{z-index:4;display:flex;flex-direction:column;gap:26px;padding:16px 14px 0}

/* ---------- 1. el origen: cómo llegó el cliente */
.hr-src{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;margin:11px 0 10px;padding:5px 11px 5px 8px;border-radius:999px;background:#0b1220;color:#f1f3e9;font:700 11.5px/1.1 Arial,sans-serif}
.hr-src i{width:8px;height:8px;border-radius:50%;background:#b8f34a;box-shadow:0 0 0 2.5px rgba(184,243,74,.3)}
.hx-recorrido .hr-o{display:none}
.hx-recorrido[data-o="search"] .hr-o-search,.hx-recorrido[data-o="feed"] .hr-o-feed{display:block}
.hx-recorrido[data-o="reco"] .hr-o-reco{display:flex}
.hr-kind{display:none}
.hx-recorrido[data-k="anuncio"] .hr-kind{display:block}
.hr-origin .dx-search{margin:0}
.hr-origin .dx-tabs{margin-top:10px}
/* la búsqueda: tu resultado y dos más, apenas dibujados */
.hr-results{margin:2px 0 0;padding:0;list-style:none}
.hr-res{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:2px;padding:12px 8px;border-bottom:1px solid #ebebeb;border-radius:10px;transition:background .3s}
.hr-res.is-pick{background:#e8f0fe}
.hr-res.is-you .dx-fav{border-color:#0b1220;background:#b8f34a;color:#0b1220}
.hr-ln{display:block;height:9px;margin-top:7px;border-radius:5px;background:#eceff1}
.hr-ln:nth-last-child(1){width:58%}
.hr-fv{display:block;width:22px;height:22px;border-radius:50%;background:#eceff1}
.hr-sk{pointer-events:none}
/* el muro: una publicación o un anuncio, con su imagen */
.hr-o-feed{padding:2px 0 0}
.hr-post{position:relative;margin:0;padding:12px 12px 10px;border:1px solid #e3e5e8;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(32,33,36,.12);transition:background .3s}
.hr-post.hr-sk{margin-top:12px;height:92px;box-shadow:none;border-style:dashed;border-color:#dfe2e6}
.hr-post.is-pick{background:#f2f6ff}
.hr-ph{display:flex;align-items:center;gap:10px;margin:0 0 9px}
.hr-ph b{display:block;font:700 13.5px/1.25 Arial,sans-serif;color:#202124}
.hr-ph small{display:block;font:12px/1.3 Arial,sans-serif;color:#65676b}
.hr-sk .hr-ph{margin:0}
.hr-av{width:34px;height:34px;font-size:14px}
.hr-pt{margin:0 0 10px;font:13.5px/1.42 Arial,sans-serif;color:#202124}
.hr-pimg{position:relative;display:block;height:132px;margin:0 -12px;overflow:hidden;background:linear-gradient(150deg,#e3ebd2,#a9c8ad 52%,#7fa6a6)}
.hr-pimg i{position:absolute;border-radius:50%;background:rgba(255,255,255,.34)}
.hr-pimg i:nth-child(1){left:-30px;top:-34px;width:120px;height:120px}
.hr-pimg i:nth-child(2){right:-20px;bottom:-46px;width:150px;height:150px;background:rgba(255,255,255,.22)}
.hr-pb{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding-top:10px}
.hr-pb b{min-width:0;font:700 13.5px/1.3 Arial,sans-serif;color:#202124}
.hr-pbtn{flex:none;padding:7px 12px;border-radius:7px;background:#e4e6eb;font:700 12.5px/1.1 Arial,sans-serif;color:#202124}
.hx-recorrido[data-k="publicacion"] .hr-pbtn{display:none}
/* la recomendación: el mensaje de una amiga y la tarjeta de tu negocio */
.hr-o-reco{flex-direction:column;gap:16px}
.hr-bub{position:relative;align-self:flex-start;max-width:86%;margin:4px 0 0;padding:11px 14px;border-radius:5px 17px 17px 17px;background:#f0f2f5;font:14px/1.42 Arial,sans-serif;color:#202124}
.hr-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:14px;border:1px solid #e3e5e8;border-radius:14px;background:#fff;box-shadow:0 1px 4px rgba(32,33,36,.14)}
.hr-card .hr-ph{margin:0}
/* el botón de WhatsApp: una palabra y un globo de chat genérico, sin el logotipo de nadie */
.hr-wa{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 16px;border-radius:999px;background:#1f9d57;box-shadow:0 8px 16px -8px rgba(31,157,87,.7);color:#fff;font:700 14.5px/1 Arial,sans-serif}
.hr-wa .i{width:18px;height:18px;stroke-width:1.9}

/* ---------- el toque: un círculo que se asienta y se va */
.hr-tap{position:absolute;left:64%;top:52%;z-index:3;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(32,33,36,.24);box-shadow:0 0 0 2px rgba(255,255,255,.8);opacity:0;scale:.3;pointer-events:none}
.hr-tap.is-on{animation:hr-press .95s ease-out both}
@keyframes hr-press{0%{opacity:0;scale:.3}22%{opacity:1;scale:1}66%{opacity:1;scale:.92}100%{opacity:0;scale:1.5}}
.hr-card .hr-tap{left:50%;top:auto;bottom:23px}
.hr-post .hr-tap{left:68%;top:auto;bottom:22px}
.hr-go .hr-tap{left:66%;top:50%}

/* ---------- 2. tu web: una página nueva dentro del navegador del celular (un dibujo) */
.hr-bar{display:flex;align-items:center;flex:none;gap:8px;height:34px;margin:8px 12px 6px;padding:0 14px;border-radius:999px;background:#f1f3f4;font:13px/1 Arial,sans-serif;color:#202124}
.hr-bar span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hr-lock{position:relative;flex:none;width:9px;height:7px;margin-top:4px;border-radius:2px;background:#5f6368}
.hr-lock:before{content:'';position:absolute;left:1.5px;bottom:5px;width:6px;height:6px;border:1.6px solid #5f6368;border-bottom:0;border-radius:4px 4px 0 0;box-sizing:border-box}
.hr-page{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;padding:6px 12px 0;overflow:hidden;border-top:1px solid #ebebeb}
.hr-nav{display:flex;align-items:center;justify-content:space-between;margin:0;padding:6px 4px 9px;border-bottom:1px solid #ebebeb;font:700 15px/1.2 Arial,sans-serif;color:#202124}
.hr-burger{position:relative;width:18px;height:2px;border-radius:2px;background:#5f6368;box-shadow:0 -6px 0 #5f6368,0 6px 0 #5f6368}
.hr-ban{display:flex;flex-direction:column;justify-content:flex-end;gap:7px;min-height:170px;padding:18px 16px 20px;border-radius:12px;background:linear-gradient(160deg,#9aa4b5,#5d6b82 60%,#3f4a5c);color:#fff}
.hr-ban b{font:700 25px/1.12 Arial,sans-serif;letter-spacing:-.01em}
.hr-bl{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.4)}
.hr-bl:nth-of-type(1){width:78%}
.hr-bl:nth-of-type(2){width:52%}
.hr-go{position:relative}
.hr-lines{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.hr-lines i{height:9px;border-radius:5px;background:#e8eaed}
.hr-lines i:nth-child(2){width:88%}
.hr-lines i:nth-child(3){width:64%}
.hr-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hr-tiles i{height:74px;border-radius:10px;background:#eef0f2}

/* ---------- 3. la conversación: genérica, sin logotipo. El cliente escribe a la derecha y tu negocio responde */
.hr-ctop{flex:none;display:flex;align-items:center;gap:10px;margin:0;padding:9px 12px;background:#fff;border-bottom:1px solid #e1e4e8}
.hr-back{flex:none;width:9px;height:9px;margin:0 2px 0 3px;border-left:2px solid #5f6368;border-bottom:2px solid #5f6368;rotate:45deg}
.hr-ctop b{display:block;font:700 14.5px/1.2 Arial,sans-serif;color:#202124}
.hr-ctop small{display:block;font:12px/1.3 Arial,sans-serif;color:#188038}
.hr-msgs{flex:1;min-height:0;display:flex;flex-direction:column;gap:32px;padding:34px 12px 0}
.hr-msg{position:relative;max-width:84%;margin:0;padding:9px 13px;border-radius:15px;font:14px/1.42 Arial,sans-serif;box-shadow:0 1px 2px rgba(32,33,36,.16)}
.hr-out{align-self:flex-end;border-bottom-right-radius:4px;background:#dff5b1;color:#16210a}
.hr-in{align-self:flex-start;border-bottom-left-radius:4px;background:#fff;color:#202124}
.hr-sys{position:relative;align-self:center;display:flex;align-items:flex-start;gap:8px;max-width:96%;margin:0;padding:9px 14px;border-radius:12px;background:#0b1220;color:#f1f3e9;font:700 12.5px/1.35 Arial,sans-serif}
.hr-sys .i{flex:none;width:15px;height:15px;margin-top:1px;color:#b8f34a;stroke-width:2.6}
.hr-input{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:10px 12px 12px;background:#fff;border-top:1px solid #e1e4e8;font:13.5px/1.2 Arial,sans-serif;color:#80868b}
.hr-input span{flex:1;padding:10px 14px;border-radius:999px;background:#f1f3f4}
.hr-input i{flex:none;width:34px;height:34px;border-radius:50%;background:#1f9d57}

/* ---------- 4. tu reporte: tres filas dibujadas con puntos, sin cifras. Lo que falta tiene borde de puntos */
.hr-rtop{display:flex;align-items:center;gap:10px;margin:0;font:700 17px/1.2 Arial,sans-serif;color:#202124}
.hr-rico{display:flex;align-items:flex-end;gap:3px;flex:none;width:26px;height:24px;padding:5px;border-radius:7px;background:#0b1220}
.hr-rico i{flex:1;border-radius:1px;background:#b8f34a}
.hr-rico i:nth-child(1){height:40%}.hr-rico i:nth-child(2){height:75%}.hr-rico i:nth-child(3){height:55%}
.hr-orig{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:11px 14px;border:1.5px dashed #bcc1c7;border-radius:12px;font:13.5px/1.3 Arial,sans-serif;color:#4d5156}
.hr-orig b{flex:none;font-weight:700;color:#80868b}
.hr-rows{display:flex;flex-direction:column;gap:30px;margin:0;padding:0;list-style:none}
.hr-row{position:relative;padding:16px 15px 17px;border:1px solid #e3e5e8;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(32,33,36,.12)}
.hr-row.is-empty{border:1.5px dashed #bcc1c7;box-shadow:none}
.hr-rl{display:block;font:700 14px/1.2 Arial,sans-serif;color:#202124}
.hr-dots{display:flex;justify-content:space-between;margin-top:13px}
.hr-dots i{flex:none;width:17px;height:17px;border:1.6px dotted #b6bbc1;border-radius:50%;box-sizing:border-box}
.hr-dots i.on{border:0;background:#0b1220;box-shadow:0 0 0 2px rgba(184,243,74,.75)}
.hr-dots i:nth-child(1){--d:0}.hr-dots i:nth-child(2){--d:45}.hr-dots i:nth-child(3){--d:90}.hr-dots i:nth-child(4){--d:135}
.hr-dots i:nth-child(5){--d:180}.hr-dots i:nth-child(6){--d:225}.hr-dots i:nth-child(7){--d:270}.hr-dots i:nth-child(8){--d:315}
.hr-dots i:nth-child(9){--d:360}.hr-dots i:nth-child(10){--d:405}.hr-dots i:nth-child(11){--d:450}.hr-dots i:nth-child(12){--d:495}

/* ---------- las tres marcas. Cada una vive dentro de la cosa que señala (la burbuja, la línea del sistema, una fila del
   reporte) y se asoma sobre su borde. La 2 va a la derecha, para que no se amontonen */
.hx-recorrido .hx-tag{pointer-events:auto;cursor:default}
.hx-recorrido .hx-tag{left:8px}
.hx-recorrido .hr-out .hx-tag,.hx-recorrido .hr-row[data-part="2"] .hx-tag,.hx-recorrido .hr-sys .hx-tag{left:auto;right:8px}
.hx-recorrido .hr-orig .hx-tag{left:8px}
.hx-recorrido .hx-tag:after{content:none}

/* el cursor (o el toque) sobre una marca o la cosa que señala: se recuadra en lima y la marca se levanta, aunque aún no haya llegado */
.hx-recorrido [data-part]{transition:box-shadow .25s,background .25s}
.hx-recorrido[data-hot="1"] [data-part="1"],.hx-recorrido[data-hot="2"] [data-part="2"],.hx-recorrido[data-hot="3"] [data-part="3"],.hx-recorrido [data-part]:hover{box-shadow:0 0 0 2.5px #b8f34a,0 0 0 6px rgba(184,243,74,.38)}
.hx-recorrido .hr-orig[data-part]:hover,.hx-recorrido[data-hot="1"] .hr-orig[data-part="1"]{background:rgba(184,243,74,.16)}
.hx-recorrido[data-hot="1"] [data-part="1"]>.hx-tag,.hx-recorrido[data-hot="2"] [data-part="2"]>.hx-tag,.hx-recorrido[data-hot="3"] [data-part="3"]>.hx-tag,.hx-recorrido [data-part]:hover>.hx-tag{scale:1.06;box-shadow:0 0 0 2px #fff,0 0 0 4.5px #0b1220,0 10px 20px -8px rgba(11,18,32,.55)}

/* ---------- con movimiento (la clase .is-armed la pone telefono-recorrido.js): cada cosa espera su turno */
.js-motion .hx-recorrido.is-armed .hr-web,.js-motion .hx-recorrido.is-armed .hr-chat{translate:104% 0;box-shadow:-18px 0 30px -18px rgba(11,18,32,.35);transition:translate .55s var(--m-ease)}
.js-motion .hx-recorrido.is-armed.is-web .hr-web,.js-motion .hx-recorrido.is-armed.is-chat .hr-chat{translate:0 0}
.js-motion .hx-recorrido.is-armed .hr-report{translate:0 102%;box-shadow:0 -18px 30px -18px rgba(11,18,32,.35);transition:translate .6s var(--m-ease)}
.js-motion .hx-recorrido.is-armed.is-report .hr-report{translate:0 0}
.js-motion .hx-recorrido.is-armed.is-report .hr-chat{translate:0 -102%;transition:translate .6s var(--m-ease)}
/* el origen y lo que lo compone llegan uno por uno */
.js-motion .hx-recorrido.is-armed :is(.hr-res.is-you,.hr-post,.hr-bub,.hr-card,.hr-sk){opacity:0;translate:0 10px;transition:opacity .45s,translate .6s var(--m-ease),background .3s}
.js-motion .hx-recorrido.is-armed.is-in :is(.hr-res.is-you,.hr-post,.hr-bub,.hr-card,.hr-sk){opacity:1;translate:0 0}
.js-motion .hx-recorrido.is-armed :is(.hr-msg,.hr-sys){opacity:0;translate:0 10px;scale:.94;transform-origin:50% 100%;transition:opacity .3s,translate .55s var(--m-ease),scale .55s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background .25s}
.js-motion .hx-recorrido.is-armed :is(.hr-msg,.hr-sys).is-in{opacity:1;translate:0 0;scale:1}
.js-motion .hx-recorrido.is-armed .hr-out{transform-origin:100% 100%}
.js-motion .hx-recorrido.is-armed .hr-in{transform-origin:0 100%}
/* las barras de puntos se llenan una tras otra */
.js-motion .hx-recorrido.is-armed .hr-dots i.on{scale:0;opacity:0;transition:scale .4s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0) * 1ms),opacity .2s calc(var(--d,0) * 1ms)}
.js-motion .hx-recorrido.is-armed.is-fill .hr-dots i.on{scale:1;opacity:1}
/* las marcas */
.js-motion .hx-recorrido.is-armed .hx-tag{opacity:0;scale:.4;transform-origin:14px 50%;transition:opacity .2s,scale .55s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.js-motion .hx-recorrido.is-armed .hr-out .hx-tag,.js-motion .hx-recorrido.is-armed .hr-row[data-part="2"] .hx-tag,.js-motion .hx-recorrido.is-armed .hr-sys .hx-tag{transform-origin:calc(100% - 14px) 50%}
.js-motion .hx-recorrido.is-armed [data-part].is-tagged>.hx-tag{opacity:1;scale:1}
.js-motion .hx-recorrido.is-armed[data-hot="1"] [data-part="1"]>.hx-tag,.js-motion .hx-recorrido.is-armed[data-hot="2"] [data-part="2"]>.hx-tag,.js-motion .hx-recorrido.is-armed[data-hot="3"] [data-part="3"]>.hx-tag,.js-motion .hx-recorrido.is-armed [data-part]:hover>.hx-tag{opacity:1;scale:1.06}

@media (max-width:380px){
  .hr-trail li{font-size:10.5px}
  .hr-wa{font-size:13.5px;padding:0 10px}
  .hr-ban b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.hr-tap{animation:none}}