/* ============================================================
   BUILDERTRACK — estilos específicos do produto
   (complementa style.css)
   ============================================================ */

/* ---------- HERO: dashboard mockup ---------- */
.dash {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-glow), 0 32px 64px rgba(0,0,0,0.5);
  animation: float 6s ease-in-out infinite;
}
.dash__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
}
.dash__title {
  margin-left: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.dash__bar { position: relative; }
.dash__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #4ade80;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.25);
  padding: 3px 10px;
  border-radius: 100px;
}
.dash__live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.9);
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* app shell: sidebar + main */
.dash__app { display: grid; grid-template-columns: 56px 1fr; }
.dash__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 0;
  background: rgba(255,255,255,0.02);
  border-right: 1px solid var(--border);
}
.dash__logo {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; font-weight: 900; font-size: 13px;
  margin-bottom: 8px;
}
.dnav {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: transparent; border: none; cursor: default;
  color: var(--text-muted);
}
.dnav svg { width: 18px; height: 18px; }
.dnav--active { background: rgba(108,99,255,0.18); color: #a5a0ff; }

.dash__main { padding: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.dash__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dstat {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.dstat__label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.dstat__val { font-size: 22px; font-weight: 800; line-height: 1.1; }
.dstat__val small { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.dstat__val--accent { color: var(--accent); }
.dstat__val--warn { color: #febc2e; }
.dstat__trend { display: block; font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.dstat__trend--up { color: #4ade80; }
.dstat__trend--warn { color: #febc2e; }

/* map */
.dash__map {
  position: relative;
  height: 138px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 30% 40%, rgba(0,212,255,0.08), transparent 45%),
    radial-gradient(circle at 75% 65%, rgba(108,99,255,0.10), transparent 45%),
    var(--bg-2);
  overflow: hidden;
}
.dash__grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 26px 26px;
}
.dash__roads, .dash__route {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.dash__roads path {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 6;
  stroke-linecap: round;
}
.dash__route path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 6 6;
  filter: drop-shadow(0 0 4px rgba(0,212,255,0.6));
  animation: routeDash 1.2s linear infinite;
}
@keyframes routeDash { to { stroke-dashoffset: -24; } }

.pin {
  position: absolute;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(0,212,255,0.2);
}
.pin::after {
  content: '';
  position: absolute; inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(0,212,255,0.35);
  animation: ping 2.4s ease-out infinite;
}
.pin--2 { top: 62%; left: 64%; background: var(--primary); box-shadow: 0 0 0 4px rgba(108,99,255,0.2); }
.pin--2::after { border-color: rgba(108,99,255,0.4); animation-delay: .6s; }
.pin--3 { top: 24%; left: 18%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.2); }
.pin--3::after { border-color: rgba(34,197,94,0.4); animation-delay: 1.2s; }
.pin--4 { top: 74%; left: 44%; background: #febc2e; box-shadow: 0 0 0 4px rgba(254,188,46,0.2); }
.pin--4::after { border-color: rgba(254,188,46,0.4); animation-delay: 1.8s; }
@keyframes ping {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}
/* veículo em movimento */
.truck {
  position: absolute;
  top: 55%; left: 63%;
  width: 24px; height: 24px;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 0 0 4px rgba(108,99,255,0.22), 0 4px 12px rgba(0,0,0,0.5);
  animation: truckMove 6s ease-in-out infinite;
}
.truck svg { width: 15px; height: 15px; }
@keyframes truckMove {
  0%   { top: 28%; left: 20%; }
  45%  { top: 28%; left: 63%; }
  55%  { top: 28%; left: 63%; }
  100% { top: 64%; left: 63%; }
}

/* bottom: lista + telemetria */
.dash__bottom { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; }
.dash__list { display: flex; flex-direction: column; gap: 7px; }
.veh {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.veh__dot { width: 8px; height: 8px; border-radius: 50%; }
.veh__dot--ok { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.7); }
.veh__dot--warn { background: #febc2e; box-shadow: 0 0 8px rgba(254,188,46,0.7); }
.veh__dot--idle { background: var(--text-muted); }
.veh__plate { font-size: 12px; font-weight: 700; font-family: 'Fira Code','Consolas',monospace; }
.veh__meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veh__status {
  font-size: 10px; font-weight: 700;
  color: #4ade80;
  background: rgba(34,197,94,0.12);
  padding: 3px 8px; border-radius: 100px;
  white-space: nowrap;
}
.veh__status--warn { color: #febc2e; background: rgba(254,188,46,0.12); }
.veh__status--idle { color: var(--text-muted); background: rgba(255,255,255,0.06); }

/* telemetria */
.telem {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.telem__title { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.telem__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 8px; }
.telem__label { font-size: 11px; color: var(--text-muted); grid-column: 1 / -1; margin-bottom: 2px; }
.telem__bar {
  height: 6px; border-radius: 100px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.telem__bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 100px;
}
.telem__bar i.telem__bar--fuel { background: linear-gradient(90deg, #22c55e, #a3e635); }
.telem__val { font-size: 12px; font-weight: 800; }
.telem__val small { font-size: 9px; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.telem__spark { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.telem__spark span {
  flex: 1;
  background: linear-gradient(180deg, var(--accent), rgba(0,212,255,0.2));
  border-radius: 2px 2px 0 0;
  min-height: 3px;
}

/* ---------- TRUST (diferenciais) ---------- */
.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.trust__item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.trust__icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(108,99,255,0.15);
  color: var(--primary);
}
.trust__icon svg { width: 22px; height: 22px; }
.trust__item strong { display: block; font-size: 15px; font-weight: 700; }
.trust__item span { font-size: 12px; color: var(--text-muted); }

/* ---------- STRIP (setores) ---------- */
.strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
  position: relative;
  z-index: 1;
}
.strip--sectors { border-top: none; }
.strip__inner { text-align: center; }
.strip__label {
  display: block;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.strip__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 32px;
}
.strip__items span {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  opacity: .85;
  transition: color .2s, opacity .2s;
}
.strip__items span:hover { color: var(--text); opacity: 1; }

/* ---------- MÉTRICAS ---------- */
.section--metrics { padding: 60px 0; }
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.metric {
  text-align: center;
  background: rgba(17,19,24,0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 20px;
}
.metric__ico {
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(108,99,255,0.15);
  color: var(--primary);
}
.metric__ico svg { width: 26px; height: 26px; }
.metric strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}
.metric--highlight {
  background: linear-gradient(135deg, rgba(108,99,255,0.16), rgba(0,212,255,0.06));
  border-color: rgba(108,99,255,0.4);
}
.metric__num {
  font-size: clamp(28px, 3.4vw, 40px) !important;
  line-height: 1.05;
}
.metric__label {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ---------- PLANOS ---------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.plan {
  background: rgba(17,19,24,0.75);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  position: relative;
  transition: all .3s ease;
}
.plan:hover { transform: translateY(-4px); border-color: rgba(108,99,255,0.4); }
.plan--featured {
  background: linear-gradient(135deg, rgba(108,99,255,0.18), rgba(0,212,255,0.08));
  border-color: rgba(108,99,255,0.4);
  box-shadow: var(--shadow-glow);
}
.plan__badge {
  position: absolute;
  top: -1px; right: 24px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 4px 12px;
  border-radius: 0 0 8px 8px;
  letter-spacing: .5px;
}
.plan__name { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.plan__desc { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; min-height: 38px; }
.plan__price {
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.plan__currency { font-size: 20px; font-weight: 700; color: var(--text-muted); }
.plan__period { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.plan__price--custom { font-size: 30px; }
.plan__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.plan__list li {
  font-size: 14px;
  color: var(--text-muted);
  padding-left: 24px;
  position: relative;
}
.plan__list li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--primary);
  font-weight: 700;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
@media (max-width: 1024px) {
  .trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .metrics { grid-template-columns: 1fr; }
  .strip__items { gap: 12px 20px; }
  .trust { grid-template-columns: 1fr; }
}