/* ──────────────────────────────────────────────────────────────────────
   Symbi — el agente del sitio.

   Se carga en todas las páginas junto con assets/chat.js. Está escrito con
   valores literales y no con variables CSS a propósito: cada página del
   sitio nombra sus tokens distinto (--font-body en la home, --f-body en las
   legales), igual que pasa con nav.css.

   Capas de z-index del sitio: nav 60, grano 80, cursor 90.
   El chat va en 100 (lanzador) y 101 (panel) para quedar por encima de todo.
   ────────────────────────────────────────────────────────────────────── */

/* ── Lanzador ─────────────────────────────────────────────────────── */
.sy-launcher{
  position:fixed;right:22px;bottom:22px;z-index:100;
  display:flex;align-items:center;gap:10px;
  height:56px;padding:0 20px 0 16px;
  border:0;border-radius:999px;cursor:pointer;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:.92rem;font-weight:700;color:#fff;letter-spacing:-.01em;
  background:linear-gradient(120deg,#ff692f,#8207ea);
  box-shadow:0 14px 38px rgba(130,7,234,.36),0 4px 14px rgba(0,0,0,.4);
  transform:translateY(140%);
  transition:transform .55s cubic-bezier(.22,1,.36,1),
             box-shadow .3s ease, opacity .3s ease;
}
.sy-launcher.ready{transform:translateY(0)}
.sy-launcher:hover{box-shadow:0 18px 46px rgba(130,7,234,.5),0 6px 18px rgba(0,0,0,.45)}
.sy-launcher:focus-visible{outline:2px solid #15baff;outline-offset:3px}
.sy-launcher.hidden{transform:translateY(140%);opacity:0;pointer-events:none}

.sy-launcher .sy-dot{
  width:9px;height:9px;border-radius:50%;background:#fff;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);
  animation:sy-pulse 2.6s infinite;
}
@keyframes sy-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}
  70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

/* El contador del AI Buffet se fija abajo (z-index 55) y en móvil ocupa
   todo el ancho. Cuando aparece, el lanzador se sube para no encimarse. */
body:has(.bf-counter.show) .sy-launcher{bottom:94px}

/* ── Panel ────────────────────────────────────────────────────────── */
.sy-panel{
  position:fixed;right:22px;bottom:22px;z-index:101;
  display:flex;flex-direction:column;
  width:392px;max-width:calc(100vw - 32px);
  height:min(640px,calc(100vh - 120px));
  border-radius:22px;overflow:hidden;
  /* Casi opaco a propósito. El blur de atrás es un adorno: si el navegador
     no soporta backdrop-filter (o lo desactiva por ahorro de batería), el
     texto de la página se transparentaría encima del chat y no se podría
     leer. La legibilidad no puede depender de un efecto opcional. */
  background:rgba(9,1,20,.97);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 28px 80px rgba(0,0,0,.62);
  font-family:'DM Sans',system-ui,sans-serif;
  opacity:0;transform:translateY(18px) scale(.98);pointer-events:none;
  transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
.sy-panel.open{opacity:1;transform:none;pointer-events:auto}

/* ── Cabecera ─────────────────────────────────────────────────────── */
.sy-head{
  display:flex;align-items:center;gap:12px;
  padding:15px 16px;flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:linear-gradient(120deg,rgba(255,105,47,.14),rgba(130,7,234,.14));
}
.sy-avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:linear-gradient(120deg,#ff692f,#8207ea);
}
.sy-avatar img{width:22px;height:auto;display:block}
.sy-id{flex:1;min-width:0}
.sy-id strong{
  display:block;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.98rem;font-weight:800;color:#fff;letter-spacing:-.01em;
}
.sy-id span{display:block;font-size:.76rem;color:rgba(255,255,255,.6)}
.sy-id span::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#15baff;margin-right:6px;vertical-align:middle;
}
.sy-x{
  width:32px;height:32px;flex-shrink:0;border:0;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);
  font-size:1.1rem;line-height:1;display:grid;place-items:center;
  transition:background .2s ease,color .2s ease;
}
.sy-x:hover{background:rgba(255,255,255,.16);color:#fff}
.sy-x:focus-visible{outline:2px solid #15baff;outline-offset:2px}

/* ── Hilo de mensajes ─────────────────────────────────────────────── */
.sy-thread{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 16px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;
}
.sy-thread::-webkit-scrollbar{width:8px}
.sy-thread::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);border-radius:99px;
  border:2px solid transparent;background-clip:content-box;
}

.sy-msg{
  max-width:86%;padding:11px 14px;border-radius:16px;
  font-size:.92rem;line-height:1.55;word-wrap:break-word;
  animation:sy-in .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes sy-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.sy-msg.bot{
  align-self:flex-start;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  border-bottom-left-radius:5px;
}
.sy-msg.yo{
  align-self:flex-end;color:#fff;
  background:linear-gradient(120deg,rgba(255,105,47,.9),rgba(255,164,38,.85));
  border-bottom-right-radius:5px;
}
.sy-msg.error{
  align-self:stretch;max-width:100%;
  background:rgba(255,105,47,.1);border:1px solid rgba(255,105,47,.32);
  color:#ffb596;font-size:.86rem;
}
.sy-msg a{color:#15baff;text-decoration:underline;text-underline-offset:2px}
.sy-msg.yo a{color:#fff}
.sy-msg strong{font-weight:700;color:#fff}
.sy-msg p{margin:0 0 8px}
.sy-msg p:last-child{margin:0}

/* Cursor de escritura mientras llega el stream */
.sy-msg.escribiendo::after{
  content:'';display:inline-block;width:7px;height:15px;
  background:#ff692f;margin-left:3px;vertical-align:text-bottom;
  animation:sy-caret .9s step-end infinite;
}
@keyframes sy-caret{0%,100%{opacity:1}50%{opacity:0}}

/* ── "Pensando" y uso de herramientas: el agente muestra su trabajo ── */
.sy-trabajo{
  align-self:flex-start;display:flex;align-items:center;gap:9px;
  padding:9px 14px;border-radius:999px;
  background:rgba(21,186,255,.09);border:1px solid rgba(21,186,255,.26);
  color:#8fd9ff;font-size:.8rem;
  animation:sy-in .3s cubic-bezier(.22,1,.36,1) both;
}
.sy-trabajo i{
  width:13px;height:13px;flex-shrink:0;border-radius:50%;
  border:2px solid rgba(21,186,255,.3);border-top-color:#15baff;
  animation:sy-gira .7s linear infinite;
}
@keyframes sy-gira{to{transform:rotate(360deg)}}

.sy-puntos{align-self:flex-start;display:flex;gap:4px;padding:12px 15px}
.sy-puntos i{
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);
  animation:sy-bota 1.3s infinite;
}
.sy-puntos i:nth-child(2){animation-delay:.18s}
.sy-puntos i:nth-child(3){animation-delay:.36s}
@keyframes sy-bota{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-5px);opacity:1}
}

/* ── Tarjeta de cotización ────────────────────────────────────────── */
.sy-cotiza{
  align-self:stretch;max-width:100%;
  border-radius:16px;overflow:hidden;
  background:linear-gradient(150deg,rgba(130,7,234,.16),rgba(21,186,255,.09));
  border:1px solid rgba(130,7,234,.34);
  animation:sy-in .35s cubic-bezier(.22,1,.36,1) both;
}
.sy-cotiza-top{
  padding:12px 15px 10px;
  border-bottom:1px solid rgba(255,255,255,.09);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#c08bff;
}
.sy-cotiza ul{list-style:none;margin:0;padding:11px 15px;display:grid;gap:7px}
.sy-cotiza li{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:.86rem;color:rgba(255,255,255,.85);
}
.sy-cotiza li span:last-child{color:rgba(255,255,255,.55);flex-shrink:0}
.sy-cotiza-total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:12px 15px;background:rgba(0,0,0,.3);
  border-top:1px solid rgba(255,255,255,.09);
}
.sy-cotiza-total b{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.32rem;font-weight:800;color:#fff;letter-spacing:-.02em;
}
.sy-cotiza-total em{font-style:normal;font-size:.76rem;color:#15baff}
.sy-cotiza-nota{
  padding:0 15px 12px;font-size:.76rem;color:rgba(255,255,255,.5);line-height:1.45;
}

/* ── Confirmación de lead ─────────────────────────────────────────── */
.sy-listo{
  align-self:stretch;max-width:100%;
  display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:14px;
  background:rgba(21,186,255,.1);border:1px solid rgba(21,186,255,.32);
  color:#8fd9ff;font-size:.86rem;line-height:1.5;
  animation:sy-in .35s cubic-bezier(.22,1,.36,1) both;
}
.sy-listo b{display:block;color:#fff;font-size:.9rem;margin-bottom:1px}

/* ── Sugerencias de arranque ──────────────────────────────────────── */
.sy-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.sy-chips button{
  padding:8px 13px;border-radius:999px;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:.8rem;
  color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.sy-chips button:hover{
  background:rgba(255,105,47,.16);border-color:rgba(255,105,47,.46);
  transform:translateY(-1px);
}
.sy-chips button:focus-visible{outline:2px solid #15baff;outline-offset:2px}

/* ── Barra de entrada ─────────────────────────────────────────────── */
.sy-bar{
  flex-shrink:0;padding:11px 12px;
  border-top:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.26);
}
.sy-form{display:flex;align-items:flex-end;gap:9px}
.sy-form textarea{
  flex:1;resize:none;min-height:42px;max-height:110px;
  padding:11px 14px;border-radius:14px;
  font-family:'DM Sans',sans-serif;font-size:.9rem;line-height:1.45;color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  transition:border-color .2s ease,background .2s ease;
}
.sy-form textarea::placeholder{color:rgba(255,255,255,.4)}
.sy-form textarea:focus{
  outline:0;border-color:rgba(255,105,47,.6);background:rgba(255,255,255,.1);
}
.sy-enviar{
  width:42px;height:42px;flex-shrink:0;border:0;border-radius:13px;cursor:pointer;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(120deg,#ff692f,#8207ea);
  transition:transform .2s ease,opacity .2s ease;
}
.sy-enviar:hover:not(:disabled){transform:translateY(-2px)}
.sy-enviar:disabled{opacity:.4;cursor:not-allowed}
.sy-enviar:focus-visible{outline:2px solid #15baff;outline-offset:2px}
.sy-enviar svg{width:17px;height:17px;display:block}

.sy-pie{
  margin:8px 2px 0;font-size:.68rem;color:rgba(255,255,255,.36);
  text-align:center;line-height:1.4;
}
.sy-pie a{color:rgba(255,255,255,.55)}

/* ── Botón "Pregúntale a Symbi" dentro de la página ───────────────────
   Vive en .cta-actions de la home, junto a WhatsApp y correo. Hereda .btn
   de index.html; aquí solo va el acento y el reset de <button>. */
.btn-symbi{
  border:1.5px solid rgba(192,139,255,.4);
  background:rgba(130,7,234,.12);
  color:#fff;font-size:1rem;padding:17px 32px;cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;
}
.btn-symbi:hover{
  transform:translateY(-3px);
  border-color:#c08bff;color:#c08bff;
  background:rgba(130,7,234,.2);
}
.btn-symbi:focus-visible{outline:2px solid #15baff;outline-offset:3px}
.btn-symbi svg{width:20px;height:20px;flex-shrink:0}

/* Misma regla que .btn-orange/.btn-mail en la home */
@media (max-width:768px){
  .btn-symbi{width:100%;justify-content:center}
}

/* ── Móvil: pantalla completa ─────────────────────────────────────── */
@media (max-width:560px){
  .sy-launcher{right:14px;bottom:14px;height:52px;padding:0 17px 0 14px;font-size:.86rem}
  body:has(.bf-counter.show) .sy-launcher{bottom:84px}
  .sy-panel{
    right:0;bottom:0;left:0;top:0;
    width:100%;max-width:100%;height:100%;
    border-radius:0;border:0;
    transform:translateY(100%);
  }
  .sy-panel.open{transform:none}
  .sy-msg{max-width:90%}
}

/* Respeta a quien pidió menos movimiento */
@media (prefers-reduced-motion:reduce){
  .sy-launcher,.sy-panel,.sy-msg,.sy-trabajo,.sy-cotiza,.sy-listo{
    transition-duration:.01ms;animation-duration:.01ms;
  }
  .sy-launcher .sy-dot,.sy-puntos i,.sy-trabajo i{animation:none}
}