
/* Diagnóstico Estratégico de Vídeo - Incite Filmes */
.diagnostic-hero {
  min-height: 72vh;
}
.diagnostic-glow {
  position: absolute;
  width: 32rem;
  height: 32rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,75,18,.22), transparent 65%);
  filter: blur(18px);
  pointer-events: none;
}
.diagnostic-panel {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,75,18,.14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 90px rgba(0,0,0,.42);
  backdrop-filter: blur(18px);
}
.diagnostic-progress-track {
  height: .55rem;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.diagnostic-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff4b12, #e3342f);
  box-shadow: 0 0 32px rgba(255,75,18,.35);
  border-radius: 999px;
  transition: width .35s ease;
}
.diagnostic-option {
  position: relative;
  text-align: left;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 1.15rem;
  padding: 1rem 1.05rem;
  color: #f5f2ec;
  font-weight: 850;
  line-height: 1.25;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.diagnostic-option:hover,
.diagnostic-option:focus-visible {
  transform: translateY(-2px);
  background: rgba(255,255,255,.095);
  border-color: rgba(255,75,18,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  outline: none;
}
.diagnostic-option.is-selected {
  background: linear-gradient(135deg, rgba(255,75,18,.26), rgba(255,255,255,.08));
  border-color: rgba(255,75,18,.78);
  box-shadow: 0 0 0 1px rgba(255,75,18,.2), 0 22px 65px rgba(0,0,0,.35);
}
.diagnostic-option small {
  display: block;
  color: #b8b8b8;
  font-weight: 600;
  margin-top: .35rem;
}
.diagnostic-card {
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 1.45rem;
  padding: 1.25rem;
}
.diagnostic-card-title {
  color: #ff4b12;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 900;
  margin-bottom: .75rem;
}
.diagnostic-list {
  display: grid;
  gap: .55rem;
}
.diagnostic-list li {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  color: #d6d6d6;
}
.diagnostic-list li::before {
  content: "";
  width: .45rem;
  height: .45rem;
  margin-top: .55rem;
  border-radius: 999px;
  background: #ff4b12;
  box-shadow: 0 0 18px rgba(255,75,18,.45);
  flex: 0 0 auto;
}
.diagnostic-loading-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: #ff4b12;
  animation: diagnosticPulse 1s ease-in-out infinite;
}
.diagnostic-loading-dot:nth-child(2) { animation-delay: .14s; }
.diagnostic-loading-dot:nth-child(3) { animation-delay: .28s; }
@keyframes diagnosticPulse {
  0%, 100% { transform: scale(.78); opacity: .45; }
  50% { transform: scale(1.08); opacity: 1; }
}
.diagnostic-fade {
  animation: diagnosticFade .32s ease-out;
}
@keyframes diagnosticFade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
  .diagnostic-hero { min-height: auto; }
  .diagnostic-panel { border-radius: 1.35rem; }
  .diagnostic-option { padding: .95rem; }
}

/* Lapidação final: resultado mais leve no mobile */
@media (max-width: 640px) {
  .diagnostic-card {
    padding: 1rem;
    border-radius: 1.15rem;
  }
  .diagnostic-card p,
  .diagnostic-list li {
    font-size: .94rem;
    line-height: 1.55;
  }
  .diagnostic-card-title {
    font-size: .68rem;
    margin-bottom: .6rem;
  }
}
