/* ClickaCierre — celular «respuesta» del hero (#hxi, «la IA responde y nombra a otros»), biblioteca de la plantilla #7,
   página hija SEO para IA. Lo carga la página con p.estilos, después de landing.css. Usa las clases del celular del hero
   (.hx, .dx-phone, .dx-cap, .hx-tag, .hx-miss, .hx-cta, .probe-cta) y copia solo lo mínimo de la conversación (barra,
   burbuja, respuesta, lista), con el prefijo .hr-, para no cargar lanzamiento.css. Lo que se mueve es solo transform y
   opacity (translate, scale).
   La pantalla es una conversación con ChatGPT sin anuncio, escrita como texto: ni logotipo ni verde de marca. Lo que la
   distingue del chat de ChatGPT Ads es la lima de ClickaCierre: los dos negocios que nombra la IA van con un resaltador
   lima (marca 1) y debajo queda un hueco punteado (marca 2) donde no está el tuyo. Sin movimiento y sin JS queda un solo
   fotograma completo: la respuesta con los dos negocios, el hueco con su marca y el pie. */

.hx-respuesta .dx-phone{display:flex;flex-direction:column;font-family:'Segoe UI',Roboto,Arial,sans-serif;color:#0d0d0d}
.hr-top{display:flex;align-items:center;justify-content:space-between;margin:2px 8px 10px;padding-bottom:10px;border-bottom:1px solid #efefef}
.hr-top b{font:600 15px/1 'Segoe UI',Roboto,Arial,sans-serif;letter-spacing:-.01em}
.hr-menu{width:18px;height:10px;border-block:2px solid #0d0d0d}
.hr-new{position:relative;width:16px;height:16px;border:2px solid #0d0d0d;border-radius:4px}
.hr-new:after{content:'';position:absolute;right:-5px;top:-5px;width:9px;height:2px;background:#0d0d0d;rotate:-45deg;box-shadow:0 0 0 2px #fff}
.hr-thread{flex:1;display:flex;flex-direction:column;gap:12px;padding:6px 6px 70px;overflow:hidden}
.hr-user{align-self:flex-end;max-width:84%;padding:9px 13px;border-radius:18px;background:#f1f1f1;font-size:13.5px;line-height:1.4;color:#0d0d0d}
.hr-rest{visibility:hidden}
.hr-answer{position:relative;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.5;color:#1f1f1f}
.hr-input{position:absolute;left:14px;right:14px;bottom:30px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 9px 9px 16px;border:1px solid #e3e3e3;border-radius:999px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.06);font-size:13px;color:#8e8e8e}
.hr-input i{flex:none;width:26px;height:26px;border-radius:50%;background:#0d0d0d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12.5v-9M4.25 7.25 8 3.5l3.75 3.75'/%3E%3C/svg%3E") center/13px no-repeat}

/* ---------- los dos negocios que nombra la IA: resaltador lima detrás y la marca 1 sobre el borde */
.hr-names{position:relative;margin-top:12px;padding:15px 10px 9px 8px}
.hr-names:before{content:'';position:absolute;inset:0;border-radius:12px;background:rgba(184,243,74,.16);box-shadow:inset 0 0 0 1.5px rgba(184,243,74,.7);pointer-events:none;transition:box-shadow .25s}
.hr-list{position:relative;display:flex;flex-direction:column;gap:6px;padding-left:16px;list-style:disc}
.hr-list li::marker{color:#6b6b6b}
.hr-list b{font-weight:700;color:#0d0d0d;background:linear-gradient(transparent 60%,rgba(184,243,74,.7) 60%)}

/* ---------- el hueco: un recuadro punteado donde no está tu negocio, con un renglón dibujado y apagado */
.hr-hole{position:relative;margin:12px 0 4px;padding:15px 12px 11px;border:1.5px dashed #aeb4bb;border-radius:12px;background:rgba(32,33,36,.025);transition:box-shadow .25s,background .25s}
.hr-ghost{display:flex;align-items:center;gap:10px;color:#8a9097}
.hr-gf{display:grid;place-items:center;flex:none;width:30px;height:30px;border:1.5px dashed #b4bac1;border-radius:9px;font:700 14px/1 Arial,sans-serif;font-style:normal;color:#9aa0a6}
.hr-ghost>span{display:flex;flex-direction:column;gap:5px;min-width:0}
.hr-ghost b{font:600 13px/1.2 'Segoe UI',Roboto,Arial,sans-serif}
.hr-gl{display:block;width:120px;max-width:100%;height:7px;border-radius:4px;background:#eceff1}

.hx-respuesta .hx-tag{left:8px;pointer-events:auto;cursor:default}
.hx-respuesta .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 */
.hx-respuesta[data-hot="1"] .hr-names:before,.hx-respuesta .hr-names:hover:before{box-shadow:inset 0 0 0 2px #b8f34a,0 0 0 5px rgba(184,243,74,.38)}
.hx-respuesta[data-hot="2"] .hr-hole,.hx-respuesta .hr-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-respuesta[data-hot="1"] [data-part="1"]>.hx-tag,.hx-respuesta[data-hot="2"] [data-part="2"]>.hx-tag,.hx-respuesta [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-respuesta.js): cada cosa espera su turno */
.js-motion .hx-respuesta.is-reset *,.js-motion .hx-respuesta.is-reset *:before,.js-motion .hx-respuesta.is-reset *:after{transition:none !important;animation:none !important}
.js-motion .hx-respuesta.is-armed .hr-thread{transition:opacity .35s}
.js-motion .hx-respuesta.is-armed.is-fade .hr-thread{opacity:0}
/* la conversación se arma por partes: la pregunta, la frase, cada negocio y el consejo */
.js-motion .hx-respuesta.is-armed :is(.hr-user,.hr-answer>p,.hr-list li){opacity:0;translate:0 10px;transition:opacity .45s,translate .55s var(--m-ease)}
.js-motion .hx-respuesta.is-armed :is(.hr-user,.hr-answer>p,.hr-list li).is-in{opacity:1;translate:0 0}
.js-motion .hx-respuesta.is-armed .hr-user.is-typing .hr-typed:after{content:'';display:inline-block;width:1.5px;height:1em;margin-left:2px;vertical-align:-.15em;background:#0d0d0d;animation:hr-caret .9s steps(1) infinite}
@keyframes hr-caret{50%{opacity:0}}
/* mientras la IA «piensa» llega un punto donde va a empezar la respuesta (no desplaza nada: está posado sobre ella) */
.js-motion .hx-respuesta.is-armed .hr-answer.is-thinking:before{content:'';position:absolute;left:2px;top:4px;width:12px;height:12px;border-radius:50%;background:#0d0d0d;animation:hr-think 1s ease-in-out infinite}
@keyframes hr-think{50%{scale:.6;opacity:.6}}
/* la marca 1 y el resaltador llegan con la lista; el hueco y la marca 2, después */
.js-motion .hx-respuesta.is-armed .hr-names:before{opacity:0;transition:opacity .4s,box-shadow .25s}
.js-motion .hx-respuesta.is-armed .hr-names.is-tagged:before{opacity:1}
.js-motion .hx-respuesta.is-armed .hr-hole{opacity:0;scale:.96;pointer-events:none;transition:opacity .4s,scale .5s var(--m-ease),box-shadow .25s,background .25s}
.js-motion .hx-respuesta.is-armed .hr-hole.is-in{opacity:1;scale:1;pointer-events:auto}
.js-motion .hx-respuesta.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-respuesta.is-armed :is(.hr-names,.hr-hole).is-tagged>.hx-tag{opacity:1;scale:1}
.js-motion .hx-respuesta.is-armed[data-hot="1"] [data-part="1"]>.hx-tag,.js-motion .hx-respuesta.is-armed[data-hot="2"] [data-part="2"]>.hx-tag,.js-motion .hx-respuesta.is-armed [data-part]:hover>.hx-tag{opacity:1;scale:1.06}

@media (max-width:380px){
  .hr-user,.hr-answer{font-size:13px}
}