/* =====================================================================
   DELVAG GOTA — Guía virtual interactiva (sin chatbot, sin voz)
   Animaciones suaves, globos de texto, reacción por sección.
   Depende de las variables de color de styles.css (con respaldo).
   ===================================================================== */

.gota {
  position: fixed; left: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 26px);
  z-index: 96; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  font-family: "Poppins", Arial, sans-serif;
  --gota-navy: var(--navy, #16327F);
  --gota-sky: var(--sky, #2BA8E2);
  --gota-ink: var(--ink, #11223F);
  pointer-events: none;
}
.gota * { pointer-events: auto; }
.gota[hidden] { display: none; }

/* Arrastre */
.gota .gota-avatar { cursor: grab; touch-action: none; }
.gota.dragging .gota-avatar { cursor: grabbing; }
.gota.dragging { transition: none; }
.gota.dragging .gota-bubble { opacity: .35; }

/* Consciente del borde: si está a la derecha, el globo se alinea a la derecha */
.gota.side-right { align-items: flex-end; }
.gota.side-right .gota-bubble { border-radius: 18px 18px 6px 18px; transform-origin: bottom right; }
.gota.side-right .gota-bubble::after { left: auto; right: 26px; }

/* --- Globo de texto --- */
.gota-bubble {
  position: relative; max-width: 300px; background: #fff; color: var(--gota-ink);
  border: 1px solid #E2EAF4; border-radius: 18px 18px 18px 6px;
  box-shadow: 0 22px 50px -22px rgba(16,45,110,.4);
  padding: 14px 16px 15px; transform-origin: bottom left;
  animation: gota-pop .45s cubic-bezier(.22,.61,.36,1) both;
}
.gota-bubble::after {
  content: ""; position: absolute; left: 26px; bottom: -8px; width: 18px; height: 18px;
  background: #fff; border-right: 1px solid #E2EAF4; border-bottom: 1px solid #E2EAF4;
  transform: rotate(45deg); border-radius: 0 0 4px 0;
}
.gota-name {
  display: flex; align-items: center; gap: 7px; font-family: "Manrope", "Poppins", sans-serif;
  font-weight: 700; font-size: .82rem; color: var(--gota-navy); margin-bottom: 5px; letter-spacing: -.01em;
}
.gota-name .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gota-sky); box-shadow: 0 0 0 3px rgba(43,168,226,.18); }
.gota-name small { font-weight: 500; color: #6A7790; font-size: .72rem; }
.gota-msg { font-size: .9rem; line-height: 1.5; color: #3A4862; }
.gota-msg strong { color: var(--gota-navy); }
.gota-close {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center; color: #9AA7BE; background: #F4F8FD; transition: color .2s, background .2s;
}
.gota-close:hover { color: var(--gota-navy); background: #E6F1FB; }
.gota-close svg { width: 14px; height: 14px; }

.gota-bubble.swap { animation: gota-swap .5s cubic-bezier(.22,.61,.36,1) both; }

/* --- Avatar / mascota --- */
.gota-avatar {
  position: relative; width: clamp(92px, 12vw, 128px); aspect-ratio: 1; border-radius: 50%;
  background: #fff;
  border: 3px solid #fff; box-shadow: 0 18px 40px -16px rgba(16,45,110,.5), inset 0 0 0 1px #DCEFFB;
  overflow: hidden; isolation: isolate;
  animation: gota-breathe 4.5s ease-in-out infinite;
}
.gota-avatar::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(43,168,226,.25);
}
.gota-avatar img {
  position: absolute; left: 50%; top: 52%; width: 96%; height: 96%;
  transform: translate(-50%,-50%); object-fit: contain;
  border-radius: 50%; background: #fff;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s;
}
.gota-avatar .gota-ring {
  position: absolute; inset: -6px; border-radius: 50%; border: 2px dashed rgba(43,168,226,.4);
  opacity: 0; transition: opacity .3s; animation: gota-spin 14s linear infinite;
}
.gota-avatar:hover .gota-ring { opacity: 1; }
.gota-avatar:hover { animation-play-state: paused; }
.gota-avatar:active { transform: scale(.96); }

/* Burbuja "abrir" cuando está minimizada */
.gota.min .gota-bubble { display: none; }
.gota.min .gota-avatar { width: clamp(64px, 9vw, 78px); }
.gota-open-hint {
  position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gota-sky); color: #fff; display: none; place-items: center; font-size: 13px; font-weight: 700;
  box-shadow: 0 6px 14px -4px rgba(43,168,226,.7); animation: gota-nudge 2s ease-in-out infinite;
}
.gota.min .gota-open-hint { display: grid; }

/* --- Nudge (continúa explorando) --- */
.gota-nudge-tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  white-space: nowrap; background: var(--gota-navy); color: #fff; font-size: .74rem; font-weight: 600;
  padding: 5px 10px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.gota-avatar.tip .gota-nudge-tip { opacity: 1; }

/* --- Animaciones --- */
@keyframes gota-breathe { 0%,100%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(-5px) scale(1.025); } }
@keyframes gota-spin { to { transform: rotate(360deg); } }
@keyframes gota-pop { from { opacity: 0; transform: scale(.8) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes gota-swap { 0%{ opacity: .4; transform: translateY(6px) scale(.98); } 100%{ opacity: 1; transform: none; } }
@keyframes gota-nudge { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.18);} }
@keyframes gota-enter { from { opacity: 0; transform: translateY(24px) scale(.9);} to { opacity: 1; transform: none;} }
.gota.enter { animation: gota-enter .6s cubic-bezier(.22,.61,.36,1) both; }
.gota.wiggle .gota-avatar img { animation: gota-wiggle .9s ease-in-out; }
@keyframes gota-wiggle { 0%,100%{ transform: translate(-50%,-50%) rotate(0);} 25%{ transform: translate(-50%,-52%) rotate(-5deg);} 75%{ transform: translate(-50%,-52%) rotate(5deg);} }

/* --- Responsive --- */
@media (max-width: 600px){
  .gota { left: 12px; bottom: 12px; gap: 8px; }
  .gota-bubble { max-width: min(70vw, 240px); padding: 12px 14px 13px; }
  .gota-msg { font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce){
  .gota-avatar, .gota-avatar .gota-ring, .gota-bubble, .gota.enter, .gota-open-hint { animation: none !important; }
  .gota-avatar img { transition: opacity .3s; }
}