/* ClickaCierre — celular «caída» del hero (#hxd, «antes salías, hoy no»), biblioteca de la plantilla #7, página hija
   Auditoría SEO. 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 .hd-. Lo que se mueve es solo transform y opacity
   (translate, scale).
   La pantalla es la búsqueda de siempre. Debajo de las pestañas va la etiqueta del tiempo («Hace un año» / «Hoy») y la lista:
   competidor A, la casilla donde estabas (tu resultado y, al lado en el mismo lugar, el hueco punteado), competidor B y
   competidor C. La casilla mide lo que el hueco; cuando tu resultado está, B y C bajan lo que sobra (--hd-d, que mide
   telefono-caida.js) y, cuando se desvanece, suben a su sitio. Sin movimiento y sin JS queda un solo fotograma: «Hoy»,
   con el hueco, la marca «Ya no sales» y el pie; tu resultado queda en el HTML, invisible. */

/* ---------- la etiqueta del tiempo: una pastilla de tinta con un punto lima, como la del origen en #hxr */
.hx-caida .hd-when{margin:10px 4px 0}
.hd-chip{position:relative;display:inline-grid;align-items:center;padding:6px 13px 6px 24px;border-radius:999px;background:#0b1220;color:#f1f3e9;font:700 11.5px/1.1 Arial,sans-serif}
.hd-chip:before{content:'';position:absolute;left:10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#b8f34a;box-shadow:0 0 0 2.5px rgba(184,243,74,.3)}
.hd-chip b{grid-area:1/1;font:inherit}
/* sin movimiento solo se ve «Hoy»; con movimiento las dos comparten la misma casilla y se cruzan */
.hd-w0{display:none}

/* ---------- la lista: tres resultados orgánicos y la casilla del tuyo */
.hx.hx-caida .dx-zones{margin-top:8px}
.hx.hx-caida .dx-zone.hd-res{margin-top:0;padding:11px 8px 12px;overflow:visible}
.hd-list{--hd-d:0px;--hd-c:0px;--hd-slot:68px}
.hd-slot{position:relative;height:var(--hd-slot);margin-top:16px;list-style:none}
/* tu resultado: del alto que tenga, sale de la casilla hacia abajo; el borde y el halo lima lo distinguen */
.hx.hx-caida .dx-zone.hd-you{position:absolute;left:0;right:0;top:0;z-index:2;margin:0;padding:11px 8px 12px;border-bottom:0;border-radius:12px;background:#fff;box-shadow:0 0 0 2px #b8f34a,0 0 0 6px rgba(184,243,74,.34);opacity:0;pointer-events:none}
/* el hueco: un recuadro punteado donde salías */
.hd-hole{position:absolute;inset:0;border:1.5px dashed #aeb4bb;border-radius:12px;background:rgba(32,33,36,.025)}
.hx-caida .hx-tag{left:8px;pointer-events:auto;cursor:default}
.hx-caida .hx-tag:after{content:none}

/* la cola: resultados dibujados que llenan la pantalla bajo los reales (la pantalla los recorta) */
.hd-tail{display:block;list-style:none;pointer-events:none}
.hd-sk{display:flex;flex-direction:column;gap:8px;height:104px;padding:11px 8px 12px;border-bottom:1px solid #ebebeb;box-sizing:border-box}
.hd-sf{display:block;width:46%;height:22px;border-radius:11px;background:#eceff1}
.hd-sl{display:block;height:9px;border-radius:5px;background:#eceff1}
.hd-sf+.hd-sl{width:82%;height:13px}
.hd-sl:nth-of-type(3){width:100%}.hd-sl:nth-of-type(4){width:64%}

/* migas: el separador va al final de cada nivel y no al principio del siguiente, para que, al bajar a una segunda línea en
   pantallas angostas, esa línea no empiece con «›». Solo en la página que lleva este celular (sin :has() queda como antes) */
.hero:has(#hxd) .serp-url li+li:before{content:none}
.hero:has(#hxd) .serp-url li:not(:last-child):after{content:'›';margin:0 .5em;color:var(--dim)}

/* el cursor (o el toque) sobre una marca o la cosa que señala: se recuadra en lima y la marca se levanta */
.hx-caida [data-part]{transition:box-shadow .25s,background .25s}
.hx-caida .hd-hole{transition:box-shadow .25s,background .25s}
.hx-caida[data-hot="2"] .hd-hole,.hx-caida .hd-hole:hover{box-shadow:0 0 0 2.5px #b8f34a,0 0 0 6px rgba(184,243,74,.38);background:rgba(184,243,74,.14)}
.hx-caida[data-hot="1"] .hd-you{box-shadow:0 0 0 2.5px #b8f34a,0 0 0 7px rgba(184,243,74,.5)}
.hx-caida[data-hot="1"] [data-part="1"]>.hx-tag,.hx-caida[data-hot="2"] [data-part="2"]>.hx-tag,.hx-caida [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-caida.js): cada cosa espera su turno */
.js-motion .hx-caida.is-reset *,.js-motion .hx-caida.is-reset *:before,.js-motion .hx-caida.is-reset *:after{transition:none !important;animation:none !important}
.js-motion .hx-caida.is-armed :is(.dx-search,.dx-tabs,.hd-when,.hd-list){transition:opacity .35s}
.js-motion .hx-caida.is-fade :is(.dx-search,.dx-tabs,.hd-when,.hd-list){opacity:0}
/* las pestañas llegan después de escribir */
.js-motion .hx-caida.is-armed .dx-tabs{opacity:0;translate:0 6px;transition:opacity .4s,translate .5s var(--m-ease)}
.js-motion .hx-caida.is-armed.is-tabs .dx-tabs{opacity:1;translate:0 0}
.js-motion .hx-caida.is-armed.is-fade .dx-tabs{opacity:0}
/* la etiqueta del tiempo: «Hace un año» llega con los resultados y se cruza con «Hoy» */
.js-motion .hx-caida.is-armed .hd-w0{display:block}
.js-motion .hx-caida.is-armed .hd-when{opacity:0;translate:0 6px;transition:opacity .4s,translate .5s var(--m-ease)}
.js-motion .hx-caida.is-armed.is-then .hd-when{opacity:1;translate:0 0}
.js-motion .hx-caida.is-armed.is-fade .hd-when{opacity:0}
.js-motion .hx-caida.is-armed .hd-chip b{transition:opacity .3s,translate .45s var(--m-ease)}
.js-motion .hx-caida.is-armed .hd-w1{opacity:0;translate:0 7px}
.js-motion .hx-caida.is-armed.is-now .hd-w0{opacity:0;translate:0 -7px}
.js-motion .hx-caida.is-armed.is-now .hd-w1{opacity:1;translate:0 0}
/* los resultados llegan uno por uno; B y C esperan abajo lo que sobra mientras tu resultado está */
.js-motion .hx-caida.is-armed .dx-zone.hd-res{opacity:0;translate:0 10px;transition:opacity .45s,translate .6s var(--m-ease),box-shadow .25s}
.js-motion .hx-caida.is-armed .dx-zone.hd-res.is-in{opacity:1;translate:0 0}
.js-motion .hx-caida.is-armed .dx-zone.hd-b{translate:0 calc(var(--hd-d) + 10px)}
.js-motion .hx-caida.is-armed .dx-zone.hd-b.is-in{translate:0 var(--hd-d)}
.js-motion .hx-caida.is-armed .dx-zone.hd-c{opacity:0;translate:0 calc(var(--hd-d) + 12px)}
.js-motion .hx-caida.is-armed .dx-zone.hd-you.is-in{opacity:1;translate:0 0;pointer-events:auto}
/* la cola baja con B y C mientras tu resultado está (menos el alto de C, que aún no entró) y se acomoda con «Hoy» */
.js-motion .hx-caida.is-armed .hd-tail{opacity:0;translate:0 calc(var(--hd-d) - var(--hd-c) + 10px);transition:opacity .45s,translate .6s var(--m-ease)}
.js-motion .hx-caida.is-armed .hd-tail.is-in{opacity:1;translate:0 calc(var(--hd-d) - var(--hd-c))}
.js-motion .hx-caida.is-armed.is-now .hd-tail.is-in{translate:0 0;transition:opacity .45s,translate .75s var(--m-ease) .12s}
/* «Hoy»: tu resultado se desvanece, B y C suben, C entra y aparece el hueco */
.js-motion .hx-caida.is-armed.is-now .dx-zone.hd-you{opacity:0;translate:0 -4px;pointer-events:none;transition:opacity .5s,translate .5s var(--m-ease),box-shadow .25s}
.js-motion .hx-caida.is-armed.is-now .dx-zone.hd-b.is-in{translate:0 0;transition:opacity .45s,translate .75s var(--m-ease) .12s}
.js-motion .hx-caida.is-armed.is-now .dx-zone.hd-c{opacity:1;translate:0 0;transition:opacity .5s .35s,translate .75s var(--m-ease) .12s}
.js-motion .hx-caida.is-armed .hd-hole{opacity:0;scale:.96;pointer-events:none;transition:opacity .4s,scale .5s var(--m-ease),box-shadow .25s,background .25s}
.js-motion .hx-caida.is-armed.is-now .hd-hole{opacity:1;scale:1;pointer-events:auto;transition-delay:.4s,.4s,0s,0s}
/* las marcas: la 1 sobre tu resultado y la 2 sobre el hueco, cada una cuando le toca */
.js-motion .hx-caida.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-caida.is-armed :is(.hd-you,.hd-hole).is-tagged>.hx-tag{opacity:1;scale:1}
.js-motion .hx-caida.is-armed[data-hot="1"] [data-part="1"]>.hx-tag,.js-motion .hx-caida.is-armed[data-hot="2"] [data-part="2"]>.hx-tag,.js-motion .hx-caida.is-armed [data-part]:hover>.hx-tag{opacity:1;scale:1.06}

@media (max-width:380px){
  .hd-chip{font-size:11px}
}