/* ============================================================
   demo.css — Estilos del MODO DEMO: motor de tour (globos) + badge
   Identidad de marca (violeta→azul), glassmorphism. Funciona sobre
   la landing y sobre los 5 temas de la app. Respeta reduced-motion.
   ============================================================ */

/* ── Raíz del tour ── */
.tt-root {
  position: fixed; inset: 0; z-index: 99999;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}
.tt-blocker { position: absolute; inset: 0; cursor: default; }

/* ── Spotlight (recorte sobre el elemento) ── */
.tt-spot {
  position: absolute; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(3, 6, 16, .74);
  border: 2px solid rgba(139, 92, 246, .9);
  transition: all .35s cubic-bezier(.22, 1, .36, 1);
}

/* ── Globo ── */
.tt-balloon {
  position: absolute; width: min(360px, calc(100vw - 24px));
  background: linear-gradient(165deg, #0e1330 0%, #0a0e22 100%);
  border: 1px solid rgba(139, 92, 246, .35);
  border-radius: 16px; padding: 18px 18px 14px;
  color: #e8f0ff; z-index: 2;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(139, 92, 246, .12) inset;
  animation: ttIn .3s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes ttIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; } }
.tt-balloon.tt-center { animation: ttPop .3s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes ttPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.tt-skip {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: 0; color: rgba(232, 240, 255, .4);
  font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 2px 4px;
  transition: color .15s;
}
.tt-skip:hover { color: #fff; }

.tt-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 16px; font-weight: 800; letter-spacing: -.02em;
  color: #fff; margin: 0 40px 8px 0; line-height: 1.25;
}
.tt-body { font-size: 13.5px; line-height: 1.6; color: rgba(232, 240, 255, .72); }
.tt-body b { color: #c4b5fd; font-weight: 700; }

.tt-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 16px;
}
.tt-progress { font-size: 12px; color: rgba(232, 240, 255, .4); font-weight: 600; }
.tt-step-num { color: #a78bfa; font-weight: 800; }
.tt-nav { display: flex; gap: 8px; }

.tt-btn {
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  font-family: inherit; background: rgba(255, 255, 255, .05); color: rgba(232, 240, 255, .7);
  transition: background .15s, transform .15s, border-color .15s;
}
.tt-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.tt-prev { background: transparent; }
.tt-next {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #2563eb 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .35);
}
.tt-next:hover { transform: translateY(-1px); }

/* CTA dentro del cierre */
.tt-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px; padding: 11px 18px; border-radius: 12px;
  background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
  font-weight: 800; font-size: 13.5px; text-decoration: none;
  box-shadow: 0 10px 24px rgba(34, 197, 94, .35);
}
.tt-cta:hover { filter: brightness(1.08); }

/* ── Flecha del globo ── */
.tt-arrow { position: absolute; width: 0; height: 0; }
.tt-arrow-bottom { top: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid #0e1330; }
.tt-arrow-top    { bottom: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid #0a0e22; }
.tt-arrow-right  { left: -9px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 9px solid #0e1330; }
.tt-arrow-left   { right: -9px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 9px solid #0e1330; }

/* ── Móvil: globo anclado abajo ── */
.tt-balloon.tt-mobile {
  left: 12px !important; right: 12px !important; bottom: 16px !important;
  top: auto !important; width: auto !important; transform: none !important;
}

/* ════════════════════ Badge MODO DEMO ════════════════════ */
#demo-badge {
  position: fixed; left: 16px; bottom: 16px; z-index: 9998;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px; border-radius: 999px;
  background: rgba(10, 14, 34, .82); backdrop-filter: blur(12px);
  border: 1px solid rgba(139, 92, 246, .4);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
  font-family: 'Inter', system-ui, sans-serif;
  cursor: grab; touch-action: none; user-select: none;
}
#demo-badge:active { cursor: grabbing; }
.demo-badge-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #34d399; flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); animation: demoBlink 2s ease-in-out infinite;
}
@keyframes demoBlink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.demo-badge-txt {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  color: #e8f0ff; white-space: nowrap;
}
.demo-badge-btn {
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06);
  color: rgba(232, 240, 255, .85); border-radius: 999px; padding: 5px 11px;
  font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, transform .15s;
}
.demo-badge-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; transform: translateY(-1px); }
.demo-badge-cta {
  background: linear-gradient(135deg, #22c55e, #16a34a); border-color: transparent; color: #fff;
}
.demo-badge-exit { padding: 5px 9px; color: rgba(232, 240, 255, .6); }
.demo-badge-exit:hover { background: rgba(239, 68, 68, .2); color: #fecaca; }

@media (max-width: 640px) {
  .demo-badge-txt { display: none; }
  #demo-badge { left: 10px; bottom: 10px; }
}

/* ── Botón flotante "Cotiza con nosotros" (WhatsApp) — CTA del demo ── */
#demo-cotiza {
  position: fixed; right: 18px; bottom: 18px; z-index: 9997;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 17px 11px 14px; border-radius: 999px;
  background: linear-gradient(135deg, #25d366, #1aae53); color: #fff;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 13.5px;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 30px rgba(37, 211, 102, .42);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
#demo-cotiza:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 38px rgba(37, 211, 102, .52); }
#demo-cotiza svg { width: 22px; height: 22px; fill: #fff; flex-shrink: 0; }
@media (max-width: 640px) {
  #demo-cotiza { right: 12px; bottom: 12px; padding: 11px 14px; font-size: 12.5px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .tt-spot, .tt-balloon, .tt-next { transition: none !important; animation: none !important; }
  .demo-badge-dot { animation: none; }
}

/* ════════════════════ Intro 3D al entrar al demo ════════════════════ */
#demo-intro {
  position: fixed; inset: 0; z-index: 100001;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, #0c1330 0%, #030610 72%);
  transition: opacity .6s ease;
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}
#demo-intro.hide { opacity: 0; pointer-events: none; }
#demo-intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo-intro-center { position: relative; z-index: 2; text-align: center; }
.demo-intro-brand { font-size: 40px; font-weight: 800; letter-spacing: -.04em; color: #fff; }
.demo-intro-brand span { background: linear-gradient(100deg, #c4b5fd, #818cf8 50%, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.demo-intro-rings { position: relative; width: 70px; height: 70px; margin: 22px auto 16px; }
.demo-intro-rings span { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; border: 2px solid rgba(139, 92, 246, .5); border-radius: 50%; animation: introRing 1.8s cubic-bezier(0, .4, .4, 1) infinite; }
.demo-intro-rings span:nth-child(2) { animation-delay: .6s; }
.demo-intro-rings span:nth-child(3) { animation-delay: 1.2s; }
@keyframes introRing { 0% { transform: scale(.3); opacity: .8; } 100% { transform: scale(1); opacity: 0; } }
.demo-intro-txt { font-size: 13px; color: rgba(232, 240, 255, .5); letter-spacing: .02em; font-family: 'Inter', sans-serif; }
@media (prefers-reduced-motion: reduce) { .demo-intro-rings span { animation: none; } }

/* ════════════════════ Cámara cinematográfica del mapa ════════════════════ */
.demo-cine-bar {
  position: fixed; left: 0; right: 0; height: 0; background: #000;
  z-index: 99990; pointer-events: none;
  transition: height .6s cubic-bezier(.22, 1, .36, 1);
}
.demo-cine-bar.top { top: 0; }
.demo-cine-bar.bottom { bottom: 0; }
.demo-cine-bar.show { height: 7vh; }

/* Pulso del CTA "Cotizar" al terminar el tour del mapa */
.demo-cta-pulse { animation: demoCtaPulse 1.1s ease-in-out 5; }
@keyframes demoCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  50%      { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); transform: translateY(-1px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-cine-bar { transition: none; }
  .demo-cta-pulse { animation: none; }
}

/* ════════════════════ Globo educativo sobre el vehículo ════════════════════ */
.marker__edu {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(6px); transform-origin: bottom center;
  width: 212px; text-align: left;
  background: linear-gradient(165deg, #0e1330 0%, #0a0e22 100%);
  border: 1px solid rgba(139, 92, 246, .42); border-radius: 12px; padding: 9px 11px;
  color: #e8f0ff; font-family: 'Inter', sans-serif;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(139, 92, 246, .12) inset;
  z-index: 6; pointer-events: none; opacity: 0;
  transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.marker__edu.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.marker__edu::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #0a0e22;
}
.marker__edu .edu-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: #fff; }
.marker__edu .edu-ico { font-size: 14px; }
.marker__edu .edu-txt { font-size: 11px; color: rgba(232, 240, 255, .72); margin-top: 4px; line-height: 1.45; }
.marker__edu b { color: #c4b5fd; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .marker__edu { transition: none; } }

/* ════════════════════ Selector de rubro (badge) ════════════════════ */
.demo-scn { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.demo-scn-btn {
  border: 0; background: transparent; color: rgba(232, 240, 255, .55);
  font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.demo-scn-btn:hover { color: #fff; }
.demo-scn-btn.active { background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff; }
@media (max-width: 860px) { .demo-scn { display: none; } }