/* ══════════════════════════════════════
   EXTRA2 — Diagnóstico card neon, IG melhorado,
   cards interativos, portfolio fix, ROI destaque
   ══════════════════════════════════════ */

/* ── Diagnóstico card especial ── */
.diag-card-special {
  border-color: rgba(216,255,87,.35) !important;
  background: linear-gradient(135deg, rgba(216,255,87,.08) 0%, rgba(216,255,87,.03) 100%) !important;
  position: relative; overflow: hidden;
}
.diag-card-orb {
  position: absolute; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(216,255,87,.12) 0%, transparent 70%);
  top: -60px; right: -60px; pointer-events: none; border-radius: 50%;
  animation: diag-orb 3s ease-in-out infinite;
}
@keyframes diag-orb { 0%,100%{transform:scale(1) translate(0,0)} 50%{transform:scale(1.15) translate(-10px,10px)} }
.diag-card-pulse-bar {
  width: 100%; height: 3px; border-radius: 2px; margin: 16px 0;
  background: linear-gradient(90deg, transparent, #D8FF57, transparent);
  background-size: 200% 100%;
  animation: scan-bar 2s linear infinite;
}
@keyframes scan-bar { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.diag-card-special .btn-primary {
  box-shadow: 0 0 20px rgba(216,255,87,.3), 0 4px 16px rgba(0,0,0,.3);
  animation: btn-glow-pulse 2.5s ease-in-out infinite;
}
@keyframes btn-glow-pulse { 0%,100%{box-shadow:0 0 16px rgba(216,255,87,.25)} 50%{box-shadow:0 0 32px rgba(216,255,87,.55)} }

/* ── Service cards — cursor pointer + hover lift ── */
.service-card[data-service] { cursor: pointer; }
.service-card[data-service]:hover {
  border-color: rgba(216,255,87,.35) !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 0 40px rgba(216,255,87,.18), 0 28px 60px rgba(0,0,0,.5) !important;
}

/* ── Portfólio — card sizes definitivos ── */
.pf-item-wide { grid-column: span 5 !important; aspect-ratio: 16/9 !important; }
.pf-item-tall { grid-column: span 7 !important; aspect-ratio: 4/3 !important; }
.pf-item-med  { grid-column: span 4 !important; aspect-ratio: 4/3 !important; }
.pf-item-sm   { grid-column: span 4 !important; aspect-ratio: 4/3 !important; }

/* SVG gráficos dentro dos pf-items */
.pf-chart-wrap {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px; gap: 8px;
  background: linear-gradient(135deg, #0a0f1a 0%, #0d1322 100%);
}
.pf-chart-label { font-size: .75rem; color: rgba(255,255,255,.4); text-align: center; }
.pf-chart-title { font-size: .9rem; font-weight: 700; color: #fff; text-align: center; }

/* ── Calculadora ROI — mais destaque ── */
.roi-wrap {
  background: linear-gradient(135deg, rgba(216,255,87,.07) 0%, rgba(123,92,249,.05) 100%) !important;
  border-color: rgba(216,255,87,.35) !important;
  box-shadow: 0 0 40px rgba(216,255,87,.08), 0 24px 60px rgba(0,0,0,.4) !important;
}
.roi-wrap h4 { font-size: 1.15rem; }
.roi-stat-num { font-weight: 900; }
.roi-stat.highlight { background: linear-gradient(135deg, rgba(216,255,87,.14), rgba(123,92,249,.08)) !important; }

/* ── Mais Completo badge fix ── */
.oferta-popular {
  font-size: .68rem !important; padding: 4px 14px !important;
  min-width: 120px; text-align: center;
}
.oferta-card.destaque {
  border: 1.5px solid rgba(216,255,87,.5) !important;
}

/* ── Instagram - mais real ── */
.ig-post-placeholder { background: linear-gradient(135deg, #0f1222, #0a0d1a) !important; }
.ig-post-chart { width: 100%; height: 100%; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
.ig-bar { border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(216,255,87,.8), rgba(216,255,87,.4)); transition: height .5s ease; }
.ig-bar-label { font-size: .55rem; color: rgba(255,255,255,.3); text-align: center; }

/* ── Provas sociais — último card menor ── */
.prova-card:last-child { grid-column: span 3; }
@media (max-width: 900px) { .prova-card:last-child { grid-column: span 1; } }

/* ── Contadores — mais brilho ── */
.counter-num { transition: text-shadow .3s ease; }
.counter-num.counting { text-shadow: 0 0 40px rgba(216,255,87,.7), 0 0 80px rgba(216,255,87,.3); }

/* ── Hero chat layout fix ── */
@media (min-width: 1101px) {
  .hero-inner { grid-template-columns: 1fr .85fr; }
}

/* Spark keyframe */
@keyframes spark-fly { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)} }
.spark { position:absolute;width:5px;height:5px;background:#FF8C42;border-radius:50%;pointer-events:none;animation:spark-fly .9s ease-out forwards;opacity:0; }