/* ---------- Gavi flotante: una gaviota de la marca encima del botón de WhatsApp. Abre el chat sin salir de la página. */
.jp { --jp-s: 56px; --jp-r: max(18px, env(safe-area-inset-right, 0px)); --jp-b: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 56px + 12px); }

.jp-fab {
  position: fixed; z-index: 71; right: var(--jp-r); bottom: var(--jp-b); width: var(--jp-s); height: var(--jp-s);
  display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer; color: #fff;
  border: 1px solid rgb(255 255 255 / .16);
  background: radial-gradient(120% 100% at 30% 15%, #2A4C8E 0%, #13295A 52%, #0B1834 100%);
  box-shadow: 0 16px 34px -14px rgb(11 24 52 / .85), 0 0 0 0 rgb(255 114 0 / 0), 0 2px 6px rgb(0 0 0 / .18);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.jp-fab:hover, .jp-fab:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgb(11 24 52 / .9), 0 0 0 5px rgb(255 114 0 / .16), 0 2px 6px rgb(0 0 0 / .18); }
.jp-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.js .jp-fab { opacity: 0; transform: translateY(16px) scale(.9); }
body.ready .jp-fab { opacity: 1; transform: none; transition: opacity .5s 1.1s, transform .6s 1.1s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
body.ready .jp-fab:hover { transform: translateY(-2px); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }

/* la gaviota: planea subiendo y bajando apenas, y cada tanto da dos aletazos */
.jp-sky { display: grid; place-items: center; width: 100%; height: 100%; animation: jpGlide 4.6s ease-in-out infinite; }
.jp-bird { display: grid; place-items: center; color: var(--accent); filter: drop-shadow(0 2px 6px rgb(255 114 0 / .35)); }
.jp-bird svg { display: block; width: 32px; height: auto; transform-origin: 50% 62%; animation: jpFlap 5.2s ease-in-out infinite; }
.jp-fab:hover .jp-bird svg { animation-duration: 1.6s; }
@keyframes jpGlide { 0%, 100% { transform: translate(0, 1.5px) rotate(-3deg); } 50% { transform: translate(1px, -2.5px) rotate(2deg); } }
@keyframes jpFlap {
  0%, 62%, 100% { transform: scaleY(1); }
  67% { transform: scaleY(-.35) translateY(-2px); } 72% { transform: scaleY(1); }
  77% { transform: scaleY(-.3) translateY(-2px); } 83% { transform: scaleY(1); }
}
.jp-fab .live { position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%; background: #1FB76A; border: 2px solid #0F2148; }
.jp-x { position: absolute; width: 22px; height: 22px; opacity: 0; transform: rotate(-90deg) scale(.6); transition: opacity .25s, transform .35s cubic-bezier(.16,1,.3,1); }
.jp.is-open .jp-x { opacity: 1; transform: none; }
.jp.is-open .jp-sky { opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s; animation: none; }
.jp.is-open .jp-fab .live { opacity: 0; }

/* etiqueta al pasar el mouse */
.jp-tip {
  position: absolute; right: calc(100% + 12px); top: 50%; white-space: nowrap; pointer-events: none;
  padding: 9px 14px; border-radius: 12px; font: 700 .92rem var(--head); color: #fff; background: #0F1E3D;
  box-shadow: 0 12px 26px -12px rgb(11 24 52 / .7);
  opacity: 0; transform: translate(6px, -50%); transition: opacity .25s, transform .35s cubic-bezier(.16,1,.3,1);
}
.jp-fab:hover .jp-tip, .jp-fab:focus-visible .jp-tip { opacity: 1; transform: translate(0, -50%); }
.jp.is-open .jp-tip { display: none; }

/* aviso de una vez por visita */
.jp-hint {
  position: fixed; z-index: 71; right: calc(var(--jp-r) + var(--jp-s) + 14px); bottom: calc(var(--jp-b) + 4px); width: 250px; cursor: pointer;
  padding: 13px 34px 13px 15px; border-radius: 16px 16px 4px 16px; font-size: .92rem; line-height: 1.4; color: #2B2F42;
  background: rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgb(255 255 255 / .9); box-shadow: 0 20px 40px -20px rgb(15 30 61 / .5);
  opacity: 0; transform: translateX(8px) scale(.96); transform-origin: right bottom; transition: opacity .3s, transform .45s cubic-bezier(.16,1,.3,1);
}
.jp-hint.in { opacity: 1; transform: none; }
.jp-hint b { display: block; font: 700 .98rem var(--head); color: #0F1E3D; margin-bottom: 2px; }
.jp-hint-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 8px; background: none; color: #6B7186; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.jp-hint-x:hover { background: rgb(15 30 61 / .06); color: #0F1E3D; }

/* ventana */
.jp-pop {
  position: fixed; z-index: 95; right: var(--jp-r); bottom: calc(var(--jp-b) + var(--jp-s) + 14px);
  width: min(392px, calc(100vw - 32px)); height: min(600px, calc(100svh - var(--jp-b) - var(--jp-s) - 110px)); min-height: 420px;
  opacity: 0; transform: translateY(14px) scale(.96); transform-origin: right bottom; transition: opacity .25s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.jp.is-open .jp-pop { opacity: 1; transform: none; }
.jp .chat-pop { height: 100%; min-height: 0; border-radius: 22px; }
.jp .chat-pop .chat-head { gap: 10px; padding: 12px 12px 12px 14px; }
.jp .chat-pop .chat-av { width: 38px; height: 38px; }
.jp .chat-pop .chat-av svg { width: 24px; }
.jp .chat-pop .chat-wa { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 10px; }
.jp .chat-pop .chat-wa span { display: none; }
.jp-full, .jp-close { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; transition: background-color .2s, border-color .2s; }
.jp-full:hover, .jp-close:hover { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .3); }
.jp-full svg { width: 16px; height: 16px; }
.jp-close svg { width: 18px; height: 18px; }
.jp .chat-pop .chat-welcome { gap: 14px; padding: 16px; align-self: end; }
.jp .chat-pop .cw-modes { grid-template-columns: 1fr; gap: 10px; }
.jp .chat-pop .cw-mode { padding: 15px 16px 16px; }
.jp .chat-pop .cw-mode b { font-size: 1.04rem; }
.jp .chat-pop .cw-mode span { font-size: .88rem; }
.jp .chat-pop .ex { font-size: .84rem; padding: 7px 11px; }
.jp .chat-pop .chat-log { padding: 16px 14px 6px; }
.jp .chat-pop .msg { max-width: 88%; }
.jp .chat-pop .msg p { font-size: .96rem; }
.jp .chat-pop .res-card { min-width: 0; }
.jp .chat-pop .res-row { grid-template-columns: 1fr; gap: 2px; }
.jp .chat-pop .chat-quick { padding: 6px 14px 10px; }
.jp .chat-pop .chat-form { margin: 0 12px; }
.jp .chat-pop .chat-legal { padding: 8px 14px 12px; font-size: .74rem; }

/* el chat abierto deja de lado la burbuja de WhatsApp para no tapar nada */
body.jp-open .wa-float { opacity: 0 !important; pointer-events: none; transform: translateY(10px) !important; }
body.menu-open .jp-fab, body.menu-open .jp-hint { opacity: 0 !important; pointer-events: none; }

@media (hover: none) { .jp-tip { display: none; } }
@media (max-width: 700px) {
  /* en celular queda un solo botón: Gavi. WhatsApp está dentro del chat (botón de arriba), así no se tapa el contenido */
  .jp { --jp-s: 52px; --jp-b: max(14px, env(safe-area-inset-bottom, 0px)); --jp-r: 14px; }
  body:has(.jp) .wa-float { display: none; }
  .jp-bird svg { width: 28px; }
}
/* celular: el chat ocupa toda la pantalla, como una app */
@media (max-width: 640px) {
  .jp-hint { width: min(240px, calc(100vw - 100px)); }
  .jp-pop { inset: 0; width: 100%; height: 100dvh; min-height: 0; transform: translateY(24px); transform-origin: center bottom; }
  .jp .chat-pop { border-radius: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .jp .chat-pop::after { display: none; }
  .jp .chat-pop.on-dark { background: radial-gradient(90% 50% at 50% 0%, #1D3A72 0%, #0F2148 60%, #0B1834 100%) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .jp .chat-pop .chat-welcome { align-self: center; }
  .jp .chat-pop .chat-wa { width: auto; padding: 0 12px; gap: 7px; }   /* en celular WhatsApp vive acá: se muestra con su nombre */
  .jp .chat-pop .chat-wa span { display: inline; }
  body.jp-open { overflow: hidden; }
  body.jp-open .jp-fab { opacity: 0 !important; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jp-sky, .jp-bird svg { animation: none; }
  .jp-pop, .jp-hint { transition: opacity .2s; transform: none; }
}