/* ══ BENJI · asistente de la web ═════════════════════════════════════════════
 * Estilos aislados bajo #benji-root con sus propias variables (--bj-*), para
 * poder soltar este archivo en cualquier página del sitio (portada, ficha,
 * listado…) sin depender de qué tokens defina esa página ni pisar sus clases.
 */
#benji-root{
  --bj-mint:#5ed3a4; --bj-verde:#1c7c59; --bj-noche:#16261f; --bj-noche-2:#0f1b15;
  --bj-hueso:#f4efe6; --bj-oro:#e8c98f; --bj-tinta:#1d1b16; --bj-piedra:#736c61;
  --bj-linea:#e6ddcb;
  --bj-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --bj-sans:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --bj-redonda:'Arial Rounded MT Bold','Segoe UI',Roboto,sans-serif;
  font-family:var(--bj-sans);
}
#benji-root *{box-sizing:border-box}
#benji-root [hidden]{display:none !important}

/* ═══ botón flotante ═══
 * Foto + doble anillo (hueco menta + trazo verde oscuro), como el logo
 * original: no es un borde plano, son dos capas de box-shadow por fuera
 * de la foto para que se vea "de marca" y no un simple círculo recortado. */
#benji-launcher{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  width:78px; height:78px; border-radius:50%; padding:0; border:none; cursor:pointer;
  background:var(--bj-mint) url('fotos/benji-avatar.png') center/cover;
  box-shadow:
    0 0 0 4px var(--bj-hueso),
    0 0 0 7px var(--bj-noche),
    0 12px 30px rgba(15,27,21,.32), 0 3px 10px rgba(15,27,21,.2);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
#benji-launcher:hover{transform:scale(1.06)}
#benji-launcher:active{transform:scale(.96)}
#benji-launcher::after{ /* halo de pulso, por fuera del anillo, para que no tape la foto */
  content:""; position:absolute; inset:-13px; border-radius:50%;
  border:2px solid var(--bj-mint); opacity:0; animation:bj-pulso 2.6s ease-out infinite;
}
#benji-launcher .bj-punto{
  position:absolute; right:-3px; bottom:-3px; width:26px; height:26px; border-radius:50%;
  background:var(--bj-mint); border:3px solid var(--bj-hueso); color:var(--bj-noche);
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(15,27,21,.25);
}
#benji-launcher .bj-punto svg{width:12px;height:12px}
@keyframes bj-pulso{ 0%{opacity:.5; transform:scale(.9)} 75%{opacity:0; transform:scale(1.18)} 100%{opacity:0} }
#benji-root.bj-abierto #benji-launcher .bj-icono-cerrar{display:flex}

/* insignia "nuevo mensaje" sobre el botón mientras el globo está visible */
#benji-launcher .bj-insignia{
  position:absolute; left:-4px; top:-4px; width:20px; height:20px; border-radius:50%;
  background:#c0432b; color:#fff; font-size:11px; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center; border:2.5px solid var(--bj-hueso);
  opacity:0; transform:scale(.5); transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
#benji-launcher .bj-insignia.bj-visible{opacity:1; transform:scale(1)}

/* burbuja "hook": más grande, con acento de color y frases que rotan */
#benji-globo{
  position:fixed; right:126px; bottom:28px; z-index:9998; width:238px;
  background:#fff; color:var(--bj-tinta); border-radius:16px 16px 4px 16px;
  box-shadow:0 14px 34px rgba(15,27,21,.26), 0 3px 10px rgba(15,27,21,.12);
  opacity:0; transform:translateY(10px) scale(.9); transform-origin:bottom right; pointer-events:none;
  transition:opacity .4s cubic-bezier(.22,.9,.32,1.4), transform .4s cubic-bezier(.22,.9,.32,1.4);
  overflow:hidden; cursor:pointer;
}
#benji-globo.bj-visible{opacity:1; transform:none; pointer-events:auto}
#benji-globo .bj-globo-acento{height:4px; background:linear-gradient(90deg,var(--bj-mint),var(--bj-verde))}
#benji-globo .bj-globo-cuerpo{padding:13px 15px 14px}
#benji-globo-texto{display:block; font-size:14px; line-height:1.42; font-weight:600; min-height:38px; transition:opacity .22s ease}
#benji-globo-texto b{color:var(--bj-verde); font-family:var(--bj-serif); font-weight:600; font-size:15px}
#benji-globo .bj-globo-cta{display:block; margin-top:7px; font-size:11.5px; font-weight:700; color:var(--bj-verde); letter-spacing:.02em}
#benji-globo .bj-x{
  position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%;
  background:var(--bj-noche); color:#fff; border:2px solid var(--bj-hueso); font-size:12px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:1;
}
@media (max-width:520px){
  /* --bj-desplaza la sube el JS mientras el aviso de cookies esté en pantalla
     (en móvil ocupa casi todo el ancho abajo y si no, se solapan). */
  #benji-root{--bj-desplaza:0px}
  #benji-launcher{width:66px; height:66px; right:16px; bottom:calc(16px + var(--bj-desplaza));
    box-shadow:0 0 0 3px var(--bj-hueso), 0 0 0 6px var(--bj-noche), 0 10px 24px rgba(15,27,21,.3);
    transition:transform .25s cubic-bezier(.34,1.56,.64,1), bottom .3s ease}
  #benji-launcher::after{inset:-11px}
  #benji-globo{right:16px; bottom:calc(92px + var(--bj-desplaza)); width:calc(100vw - 96px); max-width:260px;
    transition:opacity .4s cubic-bezier(.22,.9,.32,1.4), transform .4s cubic-bezier(.22,.9,.32,1.4), bottom .3s ease}
}

/* ═══ panel de chat ═══ */
#benji-panel{
  position:fixed; right:20px; bottom:96px; z-index:9999;
  width:min(384px, calc(100vw - 32px)); height:min(600px, calc(100vh - 132px));
  background:var(--bj-hueso); border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 24px 60px rgba(15,27,21,.32), 0 4px 16px rgba(15,27,21,.18);
  transform-origin:bottom right;
  opacity:0; transform:translateY(14px) scale(.96); pointer-events:none;
  transition:opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1);
}
#benji-root.bj-abierto #benji-panel{opacity:1; transform:none; pointer-events:auto}
@media (max-width:520px){
  #benji-panel{right:10px; bottom:10px; width:calc(100vw - 20px); height:calc(100vh - 20px); border-radius:16px}
  #benji-launcher{right:16px; bottom:16px}
}

/* ═══ pantalla de carga: sale una vez, la primera vez que se abre el chat
   en cada visita a la página — igual que la cabecera, no se repite si se
   cierra y se vuelve a abrir sin recargar. ═══ */
#benji-splash{
  position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; padding:32px; text-align:center;
  background:linear-gradient(160deg,var(--bj-noche),var(--bj-noche-2));
  transition:opacity .4s ease, visibility .4s;
}
#benji-splash.bj-fuera{opacity:0; visibility:hidden; pointer-events:none}
#benji-splash .bj-splash-avatar{
  width:132px; height:132px; border-radius:50%; margin-bottom:16px;
  background:var(--bj-mint) url('fotos/benji-avatar.png') center/cover;
  box-shadow:0 0 0 5px var(--bj-noche-2), 0 0 0 9px var(--bj-mint), 0 18px 40px rgba(0,0,0,.4);
  animation:bj-splash-entra .55s cubic-bezier(.22,.9,.32,1.4);
}
#benji-splash .bj-splash-nombre{font-family:var(--bj-redonda); font-weight:700; font-size:25px; color:#fff; letter-spacing:.03em}
#benji-splash .bj-splash-tagline{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--bj-mint)}
#benji-splash .bj-barra{width:min(190px,70%); height:5px; border-radius:99px; background:rgba(255,255,255,.14); overflow:hidden; margin-top:22px}
#benji-splash .bj-barra span{
  display:block; height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--bj-mint),var(--bj-verde));
  animation:bj-splash-carga 1.15s cubic-bezier(.4,0,.2,1) forwards;
}
#benji-splash .bj-splash-estado{font-size:11.5px; color:rgba(244,239,230,.55); margin-top:11px}
@keyframes bj-splash-entra{ from{opacity:0; transform:scale(.7)} to{opacity:1; transform:none} }
@keyframes bj-splash-carga{ from{width:0%} to{width:100%} }
@media (prefers-reduced-motion:reduce){
  #benji-splash .bj-barra span{animation-duration:.01s}
  #benji-splash .bj-splash-avatar{animation:none}
}

.bj-cabecera{
  flex:none; display:flex; align-items:center; gap:11px; padding:16px 16px 15px;
  background:linear-gradient(135deg,var(--bj-noche),var(--bj-noche-2)); color:#fff; position:relative;
}
.bj-cabecera::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--bj-mint)}
.bj-avatar{
  width:54px; height:54px; border-radius:50%; flex:none; background:var(--bj-mint) url('fotos/benji-avatar.png') center/cover;
  box-shadow:0 0 0 2.5px var(--bj-mint), 0 0 0 4px rgba(255,255,255,.18); position:relative;
}
.bj-avatar::after{
  content:""; position:absolute; right:-2px; bottom:-2px; width:13px; height:13px; border-radius:50%;
  background:#3fbf7a; border:2.5px solid var(--bj-noche-2);
}
.bj-cabecera .bj-nombre{font-family:var(--bj-redonda);font-weight:700;font-size:18px;letter-spacing:.03em}
.bj-cabecera .bj-tagline{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bj-mint);margin-top:2px}
#benji-cerrar{
  margin-left:auto; width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center; flex:none;
}
#benji-cerrar:hover{background:rgba(255,255,255,.22)}

#benji-mensajes{
  flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin;
}
.bj-fila{display:flex; gap:8px; max-width:92%}
.bj-fila.bj-bot{align-self:flex-start}
.bj-fila.bj-yo{align-self:flex-end; flex-direction:row-reverse}
.bj-fila .bj-mini{width:28px;height:28px;border-radius:50%;flex:none;background:var(--bj-mint) url('fotos/benji-avatar.png') center/cover;align-self:flex-end;box-shadow:0 0 0 1.5px var(--bj-mint)}
.bj-globo2{
  padding:10px 13px; border-radius:15px; font-size:14px; line-height:1.5;
}
.bj-bot .bj-globo2{background:#fff; color:var(--bj-tinta); border:1px solid var(--bj-linea); border-bottom-left-radius:4px}
.bj-yo .bj-globo2{background:var(--bj-verde); color:#fff; border-bottom-right-radius:4px}
.bj-globo2 a{color:inherit; text-decoration-color:currentColor}
.bj-bot .bj-globo2 a{color:var(--bj-verde); font-weight:600}

.bj-escribiendo{display:flex; gap:4px; padding:12px 13px}
.bj-escribiendo span{width:6px;height:6px;border-radius:50%;background:var(--bj-piedra);opacity:.5;animation:bj-tecleo 1.1s ease-in-out infinite}
.bj-escribiendo span:nth-child(2){animation-delay:.15s}
.bj-escribiendo span:nth-child(3){animation-delay:.3s}
@keyframes bj-tecleo{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* chips de respuesta rápida */
.bj-chips{display:flex; flex-wrap:wrap; gap:7px; padding-left:36px}
.bj-chip{
  border:1.5px solid var(--bj-oro); background:#fff; color:var(--bj-tinta);
  font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:999px; cursor:pointer;
  transition:background .15s ease;
}
.bj-chip:hover{background:var(--bj-oro)}

/* tarjeta de vivienda dentro del chat */
.bj-tarjeta{
  display:flex; gap:10px; text-decoration:none; color:inherit; background:#fff;
  border:1px solid var(--bj-linea); border-radius:13px; padding:8px; align-items:center;
}
.bj-tarjeta img{width:58px;height:58px;border-radius:9px;object-fit:cover;flex:none;background:var(--bj-linea)}
.bj-tarjeta .bj-t-info{min-width:0}
.bj-tarjeta .bj-t-pob{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bj-verde)}
.bj-tarjeta .bj-t-tit{font-size:13px;font-weight:600;line-height:1.25;margin:1px 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bj-tarjeta .bj-t-precio{font-family:var(--bj-serif);font-size:14px;color:var(--bj-tinta)}
.bj-tarjetas{display:flex; flex-direction:column; gap:8px; margin-top:8px; max-width:100%}

/* mini-formulario de contacto embebido en el chat */
.bj-formulario{background:#fff; border:1px solid var(--bj-linea); border-radius:14px; padding:13px; margin-top:6px; max-width:100%}
.bj-formulario label{display:block; font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--bj-piedra); margin:9px 0 4px}
.bj-formulario label:first-child{margin-top:0}
.bj-formulario input[type=text], .bj-formulario input[type=tel], .bj-formulario textarea{
  width:100%; border:1.5px solid var(--bj-linea); border-radius:9px; padding:8px 10px;
  font:inherit; font-size:13.5px; background:var(--bj-hueso); color:var(--bj-tinta);
}
.bj-formulario textarea{resize:none; min-height:52px}
.bj-formulario input:focus, .bj-formulario textarea:focus{outline:2px solid var(--bj-mint); outline-offset:1px}
.bj-consiente{display:flex !important; align-items:flex-start; gap:7px; font-size:11.5px; font-weight:400; letter-spacing:0; color:var(--bj-piedra); margin-top:11px; cursor:pointer}
.bj-consiente input{width:auto !important; margin-top:2px; flex:none}
.bj-consiente a{color:var(--bj-verde)}
.bj-formulario .bj-atrapamoscas{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.bj-enviar{
  margin-top:11px; width:100%; border:none; border-radius:9px; padding:10px; cursor:pointer;
  background:var(--bj-verde); color:#fff; font-weight:700; font-size:13.5px;
}
.bj-enviar:disabled{opacity:.6; cursor:default}
.bj-error{font-size:11.5px; color:#b3452c; margin-top:6px; min-height:1px}

/* barra de entrada */
#benji-form{
  flex:none; display:flex; align-items:flex-end; gap:8px; padding:11px; border-top:1px solid var(--bj-linea); background:#fff;
}
#benji-input{
  flex:1; resize:none; max-height:96px; border:1.5px solid var(--bj-linea); border-radius:14px;
  padding:9px 12px; font:inherit; font-size:14px; line-height:1.4; color:var(--bj-tinta); background:var(--bj-hueso);
}
#benji-input:focus{outline:none; border-color:var(--bj-mint)}
#benji-enviar{
  flex:none; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:var(--bj-verde); color:#fff; display:flex; align-items:center; justify-content:center;
}
#benji-enviar:disabled{opacity:.45; cursor:default}
#benji-enviar svg{width:16px;height:16px}

@media (prefers-reduced-motion:reduce){
  #benji-launcher::after{animation:none}
  #benji-panel, #benji-globo, #benji-launcher{transition:none}
}