/* ============================================================
   Bot flotante del sitio (widget de chat)
   ============================================================ */
.xioon-chat-btn{
  position:fixed;right:20px;bottom:20px;z-index:900;
  width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:var(--gold-grad);color:#231603;overflow:hidden;
  box-shadow:0 10px 26px rgba(231,170,58,.4);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease, opacity .25s ease;
}
.xioon-chat-btn:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 30px rgba(231,170,58,.5)}
.xioon-chat-btn svg{width:26px;height:26px}
.xioon-chat-btn__avatar{width:100%;height:100%;object-fit:cover;object-position:50% 8%;transform:scale(1.7);border-radius:50%}
.xioon-chat-btn .xioon-chat-badge{
  position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;
  background:var(--st-disponible);border:2px solid var(--bg);z-index:1;
}

.xioon-chat-panel{
  position:fixed;right:20px;bottom:92px;z-index:900;
  width:min(370px, calc(100vw - 32px));height:min(540px, calc(100vh - 140px));
  background:var(--bg);border-radius:18px;box-shadow:0 24px 60px rgba(21,37,61,.28);
  border:1px solid var(--line-2);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.xioon-chat-panel.is-open{opacity:1;transform:none;pointer-events:auto}

.xioon-chat-head{
  background:var(--navy);color:var(--on-navy);padding:14px 16px;
  display:flex;align-items:center;gap:10px;flex:none;
}
.xioon-chat-head__avatar{
  width:36px;height:36px;border-radius:50%;background:var(--gold-grad);
  display:flex;align-items:center;justify-content:center;color:#231603;flex:none;font-weight:700;
  overflow:hidden;
}
.xioon-chat-head__avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;transform:scale(1.7)}
.xioon-chat-head__info{flex:1;min-width:0}
.xioon-chat-head__info b{display:block;font-size:var(--ui-lg)}
.xioon-chat-head__info span{display:block;font-size:var(--ui-sm);opacity:.75}
.xioon-chat-close{
  background:none;border:none;color:var(--on-navy);opacity:.8;cursor:pointer;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.xioon-chat-close:hover{opacity:1;background:rgba(255,255,255,.12)}

.xioon-chat-body{
  flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:10px;
  background:var(--bg-2);
}
.xioon-chat-msg{max-width:86%;padding:9px 12px;border-radius:14px;font-size:var(--ui-base);line-height:1.45;white-space:pre-wrap}
.xioon-chat-msg--bot{align-self:flex-start;background:var(--bg);border:1px solid var(--line-2);border-bottom-left-radius:4px}
.xioon-chat-msg--user{align-self:flex-end;background:var(--navy);color:var(--on-navy);border-bottom-right-radius:4px}
.xioon-chat-msg--error{align-self:flex-start;background:rgba(192,72,60,.1);border:1px solid rgba(192,72,60,.3);color:#8a2f24}

.xioon-chat-suggest{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px;flex:none}

/* Menú principal: botones de tema en columna, ícono + etiqueta */
.xioon-chat-suggest--menu{flex-direction:column;padding:0 8px}
.xioon-chat-suggest--menu button{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  border:1px solid var(--line-2);background:var(--bg);border-radius:var(--r-md);padding:9px 12px;
  font-size:var(--ui-md);font-weight:600;color:var(--navy);cursor:pointer;
}
.xioon-chat-suggest--menu button svg{flex:none;color:var(--gold-d)}
.xioon-chat-suggest--menu button:hover{border-color:var(--gold);background:var(--bg-2)}

/* Detalle de un tema: ver página / cotizar por WhatsApp / volver */
.xioon-chat-suggest--acciones{flex-direction:column;padding:0 8px}
.xioon-chat-suggest--acciones button,
.xioon-chat-suggest__wa{
  display:block;width:100%;text-align:center;border-radius:var(--r-md);padding:9px 12px;
  font-size:var(--ui-md);font-weight:700;cursor:pointer;text-decoration:none;box-sizing:border-box;
}
.xioon-chat-suggest--acciones button:not(.xioon-chat-suggest__volver){border:1px solid var(--line-2);background:var(--bg);color:var(--navy)}
.xioon-chat-suggest--acciones button:not(.xioon-chat-suggest__volver):hover{border-color:var(--gold);color:var(--gold-d)}
.xioon-chat-suggest__wa{border:1px solid var(--whatsapp,#25D366);background:var(--whatsapp,#25D366);color:#fff}
.xioon-chat-suggest__wa:hover{opacity:.92}
.xioon-chat-suggest__volver{border:none;background:none;color:var(--ink-3);font-weight:600}
.xioon-chat-suggest__volver:hover{color:var(--navy)}

.xioon-chat-foot{padding:6px 12px 10px;text-align:center;flex:none;background:var(--bg)}
.xioon-chat-foot{font-size:var(--ui-sm);color:var(--ink-3)}
.xioon-chat-foot a{color:var(--gold-d);font-weight:600;text-decoration:underline}

@media (max-width:480px){
  .xioon-chat-panel{right:16px;bottom:84px;width:calc(100vw - 24px)}
  .xioon-chat-btn{right:16px;bottom:16px}
}

/* ---------- Redes sociales flotantes, apiladas arriba del bot ---------- */
.xioon-fab-stack{
  position:fixed;right:20px;bottom:94px;z-index:899;
  display:flex;flex-direction:column-reverse;gap:12px;
  transition:opacity .25s ease;
}

/* Mientras el hero de video está a la vista (ver ui.js), el botón de
   chat y las redes flotantes se ocultan para no encimarse con sus
   botones — reaparecen suaves apenas se hace scroll de largo. */
body.widgets-oc .xioon-chat-btn,
body.widgets-oc .xioon-fab-stack{opacity:0;pointer-events:none}
.xioon-fab{
  width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  border:var(--bw) solid var(--navy);box-shadow:var(--shadow-hard-sm);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1);
}
.xioon-fab:hover{transform:translateY(-4px);box-shadow:0 14px 30px -8px rgba(231,170,58,.5)}
.xioon-fab svg{width:24px;height:24px}
.xioon-fab--wa{background:#25d366}
.xioon-fab--fb{background:#1877f2}
.xioon-fab--ig{background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)}

@media (max-width:480px){
  .xioon-fab-stack{right:16px;bottom:82px;gap:10px}
  .xioon-fab{width:44px;height:44px}
  .xioon-fab svg{width:21px;height:21px}

  /* En telefono la columna de tres botones medía 126px de alto y se
     quedaba a media pantalla, encima de las tarjetas: medido, tapaba el
     precio de Sachaca, que se leia "$42,66". En una pantalla de 375px no
     sobra sitio a la derecha para que floten tres.

     Facebook e Instagram siguen a un toque en el pie, asi que arriba se
     queda solo WhatsApp, que es por donde llegan las consultas de
     verdad. Un boton en la esquina, que es donde se espera, en vez de
     una columna cruzando el contenido. */
  .xioon-fab--fb,
  .xioon-fab--ig{display:none}
}