/* ==========================================================================
   123 BUSQUEI — CAMADA DE EFEITOS "TECNOLÓGICOS"
   Radar ao vivo, painel animado, ícones 3D, botões iluminados, fundos vivos
   e avisos. Para um site mais calmo, basta remover este arquivo do <head>.
   ========================================================================== */

:root { --ticker-h: 38px; }
html { scroll-padding-top: calc(var(--header-h) + var(--ticker-h) + 12px); }

/* --------------------------------------------------------------------------
   TOPO FIXO: RADAR + CABEÇALHO
   -------------------------------------------------------------------------- */
.topo { position: sticky; top: 0; z-index: 100; }
.topo .site-header { position: relative; }
@media (max-width: 960px) {
  .main-nav { height: calc(100dvh - var(--header-h) - var(--ticker-h)); }
}

.live-bar {
  height: var(--ticker-h); overflow: hidden;
  background: linear-gradient(90deg, #0b1626, var(--navy-900) 40%, #13284a);
  color: #dbe4ef; font-size: .8rem;
  border-bottom: 1px solid rgba(233, 196, 106, .18);
  transition: height .3s ease;
}
.live-bar.fechado { height: 0; border-bottom: 0; }
.live-bar.fechado + .site-header .main-nav { height: calc(100dvh - var(--header-h)); }
.live-inner { height: 100%; display: flex; align-items: center; gap: 18px; }

.live-pill {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 10px; border-radius: 999px;
  background: rgba(16, 185, 129, .14); border: 1px solid rgba(52, 211, 153, .35);
  color: #6ee7b7; font-family: var(--font-title); font-weight: 800; font-size: .7rem;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.live-bar[data-modo="demonstracao"] .live-pill { background: rgba(233,196,106,.12); border-color: rgba(233,196,106,.4); color: var(--gold); }
.live-bar[data-modo="manual"] .live-pill { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.4); color: #93c5fd; }
.live-bar.offline .live-pill { opacity: .6; }

.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.live-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid currentColor; animation: livePing 1.8s ease-out infinite;
}
@keyframes livePing { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }

.live-track { flex: 1; display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.live-metrics { display: flex; align-items: center; gap: 26px; flex-shrink: 0; padding-right: 26px; }
.live-copy { display: none; }
.live-metric { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.live-metric i { font-size: .85rem; }
.live-metric strong { color: #fff; font-family: var(--font-title); font-weight: 800; font-variant-numeric: tabular-nums; border-radius: 4px; padding: 0 2px; }
.live-metric strong.flash { animation: numFlash 1.2s ease; }
@keyframes numFlash { 0% { background: rgba(233,196,106,.55); color: var(--navy-900); } 100% { background: transparent; } }
.live-metric .i-gold { color: var(--gold); }
.live-metric .i-green { color: #34d399; }
.live-metric .i-red { color: #ff8a93; }
.live-metric .i-blue { color: #93c5fd; }

.live-close { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; color: #94a3b8; }
.live-close:hover { color: #fff; background: rgba(255,255,255,.08); }

/* Os números passam como letreiro; o mouse por cima pausa */
.live-copy { display: flex; }
.live-metrics { animation: marquee 34s linear infinite; }
.live-track:hover .live-metrics { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
.rotulo-curto { display: none; }
@media (max-width: 560px) {
  .rotulo-longo { display: none; }
  .rotulo-curto { display: inline; }
  .live-inner { gap: 10px; }
}

/* --------------------------------------------------------------------------
   HERO EM DUAS COLUNAS + FUNDO VIVO
   -------------------------------------------------------------------------- */
.hero { isolation: isolate; }
.hero .fx-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero::before {
  /* grade de "mapa" bem sutil se movendo devagar */
  content: ''; position: absolute; inset: -60px; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(29,53,87,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,53,87,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  animation: gridDrift 40s linear infinite;
}
@keyframes gridDrift { to { transform: translate(48px, 48px); } }

.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero-grid .hero-head { text-align: left; margin: 0; }
.hero-grid h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.hero-grid .hero-sub { margin: 0; }
.hero-grid .hero-ctas { justify-content: flex-start; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: .88rem; color: var(--text-muted); }
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof i { color: var(--green-700); }

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid .hero-head { text-align: center; margin: 0 auto; }
  .hero-grid .hero-sub { margin: 0 auto; }
  .hero-grid .hero-ctas, .hero-proof { justify-content: center; }
}

/* --------------------------------------------------------------------------
   PAINEL DE ENTREGAS ANIMADO (VITRINE DO PRODUTO)
   -------------------------------------------------------------------------- */
.ops-panel {
  position: relative; border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, #13284a, var(--navy-900));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 30px 80px rgba(15,28,46,.35), 0 0 0 1px rgba(233,196,106,.08), inset 0 1px 0 rgba(255,255,255,.08);
  transform: perspective(1200px) rotateY(-6deg) rotateX(3deg);
  transition: transform .5s ease;
}
.ops-panel:hover { transform: perspective(1200px) rotateY(0) rotateX(0); }
@media (max-width: 1020px) { .ops-panel { transform: none; max-width: 600px; margin: 0 auto; } }

.ops-chrome {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08); color: var(--dark-muted); font-size: .78rem;
}
.ops-chrome .dots { display: flex; gap: 6px; margin-right: 6px; }
.ops-chrome .dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.ops-chrome .dots i:nth-child(1) { background: #ff5f57; }
.ops-chrome .dots i:nth-child(2) { background: #febc2e; }
.ops-chrome .dots i:nth-child(3) { background: #28c840; }
.ops-chrome strong { color: #fff; font-family: var(--font-title); }
.ops-chrome .tag { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.06); font-size: .7rem; }

.ops-map { position: relative; aspect-ratio: 13 / 10; }
.ops-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ops-map .street { stroke: rgba(148,163,184,.13); stroke-width: 10; stroke-linecap: round; fill: none; }
.ops-map .street-thin { stroke: rgba(148,163,184,.08); stroke-width: 4; fill: none; }
.ops-map .route { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 2 12; animation: routeFlow 1.6s linear infinite; }
.ops-map .route-glow { fill: none; stroke-width: 10; stroke-linecap: round; opacity: .14; }
@keyframes routeFlow { to { stroke-dashoffset: -28; } }
.ops-map .pin-ring { fill: none; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pinPulse 2.4s ease-out infinite; }
@keyframes pinPulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
.ops-map .fa-glyph { font-family: 'Font Awesome 6 Free'; font-weight: 900; text-anchor: middle; dominant-baseline: central; }

/* Cartões flutuando por cima do mapa */
.ops-card {
  position: absolute; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 14px; max-width: 62%;
  background: rgba(255,255,255,.96); color: var(--navy-900);
  box-shadow: 0 12px 30px rgba(0,0,0,.3); font-size: .8rem; line-height: 1.35;
  animation: floaty 6s ease-in-out infinite;
}
.ops-card strong { display: block; font-family: var(--font-title); font-size: .84rem; }
.ops-card span { color: var(--text-muted); }
.ops-card .ic { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; color: #fff; }
.ops-card.c1 { top: 6%; left: 5%; }
.ops-card.c1 .ic { background: linear-gradient(145deg, #ff6b75, var(--red)); }
.ops-card.c2 { bottom: 20%; right: 4%; animation-delay: -2s; }
.ops-card.c2 .ic { background: linear-gradient(145deg, #4ade80, var(--green-700)); }
.ops-card.c3 { bottom: 5%; left: 6%; animation-delay: -4s; }
.ops-card.c3 .ic { background: linear-gradient(145deg, #fff3b0, #d4a337); color: var(--navy-900); }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.ops-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.08); }
.ops-stats div { padding: 12px 10px; text-align: center; color: var(--dark-muted); font-size: .72rem; }
.ops-stats div + div { border-left: 1px solid rgba(255,255,255,.08); }
.ops-stats strong { display: block; color: #fff; font-family: var(--font-title); font-size: 1.05rem; }
.ops-stats .g { color: #34d399; }
.ops-stats .y { color: var(--gold); }

@media (max-width: 560px) {
  .ops-card { font-size: .7rem; padding: 7px 10px; gap: 7px; max-width: 70%; }
  .ops-card strong { font-size: .74rem; }
  .ops-card .ic { width: 26px; height: 26px; border-radius: 8px; font-size: .75rem; }
  .ops-card.c2 { display: none; }
}

/* --------------------------------------------------------------------------
   ÍCONES 3D COM BRILHO
   -------------------------------------------------------------------------- */
.icon-box {
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.4);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s;
}
.icon-box::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 50%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.04));
  border-radius: inherit; border-bottom-left-radius: 50% 20%; border-bottom-right-radius: 50% 20%;
}
.icon-box i { position: relative; z-index: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }

.icon-box.gold, .section-dark .icon-box.gold {
  background: linear-gradient(145deg, #fff3b0 0%, #e9c46a 50%, #d4a337 100%); color: var(--navy-900);
  box-shadow: 0 10px 22px -6px rgba(233,196,106,.6), inset 0 2px 2px rgba(255,255,255,.8), inset 0 -3px 5px rgba(180,130,20,.3);
}
.icon-box.red, .section-dark .icon-box.red {
  background: linear-gradient(145deg, #ff6b75 0%, #e63946 50%, #b81d2a 100%); color: #fff;
  box-shadow: 0 10px 22px -6px rgba(230,57,70,.55), inset 0 2px 2px rgba(255,255,255,.55), inset 0 -3px 5px rgba(130,15,25,.4);
}
.icon-box.navy, .section-dark .icon-box.navy {
  background: linear-gradient(145deg, #4a78b5 0%, #1d3557 55%, #0f1f33 100%); color: #fff;
  box-shadow: 0 10px 22px -6px rgba(29,53,87,.55), inset 0 2px 2px rgba(255,255,255,.45), inset 0 -3px 5px rgba(5,15,25,.5);
}
.icon-box.green, .section-dark .icon-box.green {
  background: linear-gradient(145deg, #4ade80 0%, #10b981 50%, #065f46 100%); color: #fff;
  box-shadow: 0 10px 22px -6px rgba(16,185,129,.55), inset 0 2px 2px rgba(255,255,255,.55), inset 0 -3px 5px rgba(4,75,45,.4);
}
*:hover > .icon-box, .icon-box:hover { transform: translateY(-4px) scale(1.07) rotate(-3deg); }

/* --------------------------------------------------------------------------
   BOTÕES ILUMINADOS (REFLEXO DE LUZ + BRILHO)
   -------------------------------------------------------------------------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.btn:hover::after { left: 120%; }
.btn-red:hover { box-shadow: 0 8px 28px rgba(230,57,70,.5), 0 0 0 4px rgba(230,57,70,.12); }
.btn-navy:hover { box-shadow: 0 8px 28px rgba(29,53,87,.45), 0 0 0 4px rgba(29,53,87,.12); }
.btn-gold:hover { box-shadow: 0 8px 28px rgba(233,196,106,.65), 0 0 0 4px rgba(233,196,106,.2); }
.btn-green:hover { box-shadow: 0 8px 28px rgba(4,120,87,.45), 0 0 0 4px rgba(16,185,129,.15); }
.btn-whatsapp:hover { box-shadow: 0 8px 28px rgba(37,211,102,.5), 0 0 0 4px rgba(37,211,102,.15); }

/* Botão principal "respirando" para chamar atenção (sem exagero) */
.btn-pulse { animation: btnGlow 2.8s ease-in-out infinite; }
@keyframes btnGlow {
  0%, 100% { box-shadow: 0 6px 18px rgba(230,57,70,.28), 0 0 0 0 rgba(230,57,70,.35); }
  50% { box-shadow: 0 8px 26px rgba(230,57,70,.4), 0 0 0 10px rgba(230,57,70,0); }
}

/* --------------------------------------------------------------------------
   CARDS 3D: INCLINAM E ACENDEM SEGUINDO O MOUSE
   -------------------------------------------------------------------------- */
[data-tilt] {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
  will-change: transform;
}
[data-tilt].tilting { transition: transform .08s linear, box-shadow .25s; }
[data-tilt]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(233,196,106,.16), transparent 45%);
  opacity: 0; transition: opacity .3s;
}
[data-tilt]:hover::after { opacity: 1; }
/* Depois da animação de entrada, o card volta a obedecer à inclinação */
[data-tilt].reveal.visible { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: opacity .6s ease, transform .25s ease, box-shadow .25s; }
[data-tilt].reveal.visible.tilting { transition: opacity .6s ease, transform .08s linear, box-shadow .25s; }
.persona-card[data-tilt]:hover, .persona-card[data-tilt].reveal.visible:hover { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px); }
.feature-card, .step, .plan, .persona-card { position: relative; }
.section-dark [data-tilt]::after { background: radial-gradient(380px circle at var(--mx) var(--my), rgba(233,196,106,.14), transparent 45%); }
.section-dark .feature-card:hover { border-color: rgba(233,196,106,.35); }

/* Plano em destaque com borda de luz girando */
.plan.featured { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--ang, 0deg), var(--red), var(--gold), var(--red), #ff9aa2, var(--red)) border-box; animation: spinBorder 6s linear infinite; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spinBorder { to { --ang: 360deg; } }

/* --------------------------------------------------------------------------
   COMO FUNCIONA: LINHA DE FLUXO ANIMADA ENTRE AS ETAPAS
   -------------------------------------------------------------------------- */
.steps { position: relative; }
.steps::before {
  content: ''; position: absolute; left: 6%; right: 6%; top: 62px; height: 3px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 20px);
  background-size: 20px 3px; opacity: .7; animation: flowLine 1s linear infinite;
}
@keyframes flowLine { to { background-position: 20px 0; } }
.step { z-index: 1; }
@media (max-width: 960px) { .steps::before { display: none; } }

/* --------------------------------------------------------------------------
   FAIXAS ESCURAS COM AURORA E REDE
   -------------------------------------------------------------------------- */
.section-dark { position: relative; overflow: hidden; isolation: isolate; }
.section-dark .fx-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .7; }
.aurora { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.aurora span { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(90px); opacity: .28; animation: auroraMove 22s ease-in-out infinite alternate; }
.aurora span:nth-child(1) { background: var(--red); top: -180px; left: -120px; }
.aurora span:nth-child(2) { background: var(--gold); bottom: -220px; right: -100px; animation-delay: -7s; opacity: .2; }
.aurora span:nth-child(3) { background: #3b82f6; top: 30%; left: 45%; animation-delay: -14s; opacity: .18; }
@keyframes auroraMove {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(120px, 60px) scale(1.15); }
  100% { transform: translate(-60px, 120px) scale(.9); }
}

/* --------------------------------------------------------------------------
   AVISOS DE ENTREGA (TOASTS)
   -------------------------------------------------------------------------- */
.toast-box { position: fixed; left: 20px; bottom: 20px; z-index: 95; display: flex; flex-direction: column; gap: 10px; width: 340px; max-width: calc(100vw - 40px); pointer-events: none; }
.toast {
  position: relative; display: flex; gap: 12px; padding: 14px 14px 16px; overflow: hidden;
  border-radius: 16px; pointer-events: auto;
  background: rgba(255,255,255,.97); border: 1px solid var(--border);
  box-shadow: 0 18px 44px rgba(15,28,46,.2);
  animation: toastIn .45s cubic-bezier(.34, 1.4, .64, 1);
}
.toast.saindo { animation: toastOut .4s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-30px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(-30px) scale(.96); } }
.toast-icon {
  position: relative; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; overflow: hidden;
  box-shadow: inset 0 2px 2px rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.2);
}
.toast-icon::after { content: ''; position: absolute; inset: 0 0 50% 0; background: linear-gradient(rgba(255,255,255,.4), transparent); }
.t-pedido .toast-icon, .t-economia .toast-icon { background: linear-gradient(145deg, #fff3b0, #d4a337); color: var(--navy-900); }
.t-despacho .toast-icon { background: linear-gradient(145deg, #ff6b75, #b81d2a); }
.t-motoboy .toast-icon, .t-entrega .toast-icon { background: linear-gradient(145deg, #4ade80, #065f46); }
.t-loja .toast-icon { background: linear-gradient(145deg, #4a78b5, #0f1f33); }
.toast-body { flex: 1; min-width: 0; }
.toast-top { display: flex; align-items: center; gap: 8px; font-size: .7rem; }
.toast-tag { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--navy); }
.toast-when { color: var(--text-muted); }
.toast-x { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; color: var(--text-muted); }
.toast-x:hover { background: var(--surface-2); }
.toast-title { display: block; font-family: var(--font-title); font-size: .9rem; color: var(--navy-900); margin-top: 2px; }
.toast-desc { font-size: .8rem; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--red), var(--gold)); transform-origin: left; animation: toastTimer 7s linear forwards; }
.toast.pausado .toast-bar { animation-play-state: paused; }
@keyframes toastTimer { to { transform: scaleX(0); } }

body.chat-open .toast-box { display: none; }
@media (max-width: 560px) {
  .toast-box { left: 10px; right: 10px; width: auto; max-width: none; bottom: 78px; }
  .toast { padding: 10px 10px 12px; }
  .toast-desc { display: none; }
}

/* --------------------------------------------------------------------------
   BOTÃO DO Ian COM ANEL DE ENERGIA
   -------------------------------------------------------------------------- */
.ian-fab::before {
  content: ''; position: absolute; left: 3px; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%;
  border: 2px solid var(--gold); animation: livePing 2.4s ease-out infinite; pointer-events: none;
}

/* --------------------------------------------------------------------------
   QUEM PREFERE MENOS MOVIMENTO: DESLIGA TUDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .live-metrics, .hero::before, .aurora span, .ops-card, .btn-pulse, .steps::before, .plan.featured { animation: none; }
  [data-tilt] { transform: none; }
  .ops-panel { transform: none; }
}