/**
 * Página "Diagnóstico de E-commerce" — estilos isolados sob o prefixo
 * `.diagnostic-` (mesmo padrão de isolamento de assets/css/trafego-pago.css:
 * ver .claude/skills/dscomm-design-system). Usa direto os tokens de cor do
 * tema (var(--color-*), definidos em assets/css/input.css) para nunca sair
 * da paleta oficial. Carregado só em page-diagnostico-de-ecommerce.php.
 *
 * Fase 1 (interface): este arquivo cobre layout/visual. Os estados do
 * formulário (loading, erro, sucesso) são controlados por classes de estado
 * simples (is-*) alternadas via assets/js/diagnostic.js.
 */

.diagnostic-page {
  --dp-ink: var(--color-ink, #1c1e3c);
  --dp-brand: var(--color-brand, #48a0d9);
  --dp-highlight: var(--color-highlight, #a3cfec);
  --dp-section: var(--color-section, #d3e5f5);
  --dp-surface: var(--color-surface, #e5e5e9);
  --dp-surface-2: var(--color-surface-2, #e8e8e8);
  --dp-bg-muted: var(--color-bg-muted, #f8f8f8);
  --dp-border: var(--color-border, #cacad8);
  --dp-text-muted: var(--color-text-muted, #8b8c93);
  background: #fff;
}

.diagnostic-page * {
  box-sizing: border-box;
}

/* =========================================================
   Check pequeno reutilizado (benefícios do hero + "o que recebe")
   ========================================================= */
.diagnostic-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  background: var(--dp-section);
  color: var(--dp-brand);
  font-size: 0.8rem;
}

/* =========================================================
   HERO — mesma escala e presença do hero da Home (banner-topo.php:
   título grande em peso leve + marca-texto .text-highlight já usada
   lá em "crescimento") combinada com a técnica de composição de
   Clientes (foto + moldura + barra de ícones + card sobreposto),
   ampliada para ocupar a largura real de .container (1750px) em vez
   de ficar presa a um max-width pequeno interno.
   ========================================================= */
.diagnostic-hero {
  position: relative;
  z-index: 0;
  width: 100%;
  overflow: clip;
  padding-block: 1.5rem 3.5rem;
}

@media (min-width: 769px) {
  .diagnostic-hero {
    padding-block: 1rem 4.5rem;
  }
}

@media (min-width: 1200px) {
  .diagnostic-hero {
    padding-block: 1.5rem 5.5rem;
  }
}

.diagnostic-hero__container {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3rem;
}

.diagnostic-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  text-align: left;
}

.diagnostic-hero__copy .lead strong {
  color: var(--dp-ink);
  font-weight: 700;
}

.diagnostic-hero__benefits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.diagnostic-hero__benefits li {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  color: var(--dp-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.diagnostic-hero__example {
  color: var(--dp-brand);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}

.diagnostic-hero__example .link-arrow__icon {
  transition: transform 0.18s ease;
}

/* ---------- Composição visual (foto + moldura + barra de ícones + card) ---------- */
.diagnostic-hero__visual {
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: 100%;
  min-height: clamp(40.625rem, 73vh, 51.25rem);
}

.diagnostic-hero__frame {
  position: absolute;
  z-index: 0;
  top: 2.75rem;
  right: 2.875rem;
  bottom: 1.25rem;
  left: 7%;
  border: 2px solid var(--dp-brand);
  border-radius: 1.125rem;
  pointer-events: none;
}

.diagnostic-hero__photo {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 7.5rem;
  width: min(76%, 38.125rem);
  height: clamp(35rem, 67vh, 45.625rem);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(28, 30, 60, 0.35);
}

/* =========================================================
   Conteúdo do quadro: mockup estático de uma loja virtual genérica
   (.diagnostic-hero__store) + camada de análise em tempo real sobreposta
   (.diagnostic-scan: radar + pontos + tags + progresso). Substitui a
   fotografia anterior — só o CONTEÚDO do quadro muda; posição, tamanho,
   moldura e sombra de .diagnostic-hero__photo (acima) permanecem os
   mesmos. 100% CSS/SVG, sem imagem/gif/vídeo.
   ========================================================= */
.diagnostic-hero__store {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  filter: saturate(0.92) contrast(0.97);
}

/* Região próxima ao formulário (canto inferior esquerdo do quadro) um
   pouco mais clara, para manter a separação visual do card sobreposto. */
.diagnostic-hero__store::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(
    200deg,
    transparent 55%,
    rgba(255, 255, 255, 0.55) 78%,
    rgba(255, 255, 255, 0.82) 100%
  );
  pointer-events: none;
}

.dhs-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  background: var(--dp-bg-muted);
  border-bottom: 1px solid var(--dp-border);
}

.dhs-topbar__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--dp-border);
}

.dhs-topbar__url {
  margin-left: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: #fff;
  color: var(--dp-text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
}

.dhs-store {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.75rem 2rem;
}

.dhs-store__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--dp-border);
}

.dhs-store__logo {
  color: var(--dp-ink);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.dhs-store__nav {
  display: none;
  gap: 1.125rem;
  color: var(--dp-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

@media (min-width: 480px) {
  .dhs-store__nav {
    display: flex;
  }
}

.dhs-store__actions {
  margin-left: auto;
  display: flex;
  gap: 0.625rem;
  color: var(--dp-ink);
  font-size: 0.8125rem;
}

.dhs-store__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--dp-bg-muted);
}

.dhs-store__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (min-width: 420px) {
  .dhs-store__body {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }
}

.dhs-store__product-image {
  border-radius: 0.75rem;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--dp-section), var(--dp-bg-muted));
}

.dhs-store__thumbs {
  margin-top: 0.625rem;
  display: flex;
  gap: 0.5rem;
}

.dhs-store__thumbs span {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.375rem;
  background: var(--dp-bg-muted);
  border: 1px solid var(--dp-border);
}

.dhs-store__name {
  margin: 0 0 0.375rem;
  color: var(--dp-ink);
  font-weight: 700;
  font-size: 0.9375rem;
}

.dhs-store__rating {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  color: #d69a1f;
  font-size: 0.75rem;
}

.dhs-store__rating span {
  margin-left: 0.25rem;
  color: var(--dp-text-muted);
}

.dhs-store__price {
  margin: 0.625rem 0 0.875rem;
  color: var(--dp-ink);
  font-weight: 800;
  font-size: 1.375rem;
}

.dhs-store__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  background: var(--dp-ink);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}

.dhs-store__perks {
  margin: 1.125rem 0 0;
  padding: 0.875rem 0 0;
  border-top: 1px solid var(--dp-border);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.dhs-store__perks li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--dp-text-muted);
  font-size: 0.75rem;
}

.dhs-store__perks i {
  color: var(--dp-brand);
  font-size: 0.75rem;
}

/* ---------- Camada de análise (radar + pontos + tags + progresso) ---------- */
.diagnostic-scan {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.diagnostic-radar {
  position: absolute;
  z-index: 1;
  top: 32%;
  left: 40%;
  width: min(58%, 15.5rem);
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
}

.diagnostic-radar__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--dp-brand) 55%, transparent);
  opacity: 0.32;
}

.diagnostic-radar__ring--2 {
  inset: 15%;
  opacity: 0.28;
}

.diagnostic-radar__ring--3 {
  inset: 30%;
  opacity: 0.26;
}

.diagnostic-radar__ring--4 {
  inset: 45%;
  opacity: 0.22;
}

.diagnostic-radar__sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: conic-gradient(
    from 0deg,
    color-mix(in oklab, var(--dp-brand) 40%, transparent) 0deg,
    transparent 65deg,
    transparent 360deg
  );
  animation: diagnosticRadarSweep 5.5s linear infinite;
}

.diagnostic-radar__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--dp-brand);
  box-shadow: 0 0 0 0.375rem color-mix(in oklab, var(--dp-highlight) 55%, transparent);
}

@keyframes diagnosticRadarSweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.diagnostic-scan__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.diagnostic-scan__line {
  stroke: var(--dp-brand);
  stroke-width: 0.35;
  opacity: 0.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: diagnosticLineDraw 0.5s ease-out forwards;
}

.diagnostic-scan__lines .diagnostic-scan__line:nth-child(1) {
  animation-delay: 0.5s;
}
.diagnostic-scan__lines .diagnostic-scan__line:nth-child(2) {
  animation-delay: 0.65s;
}
.diagnostic-scan__lines .diagnostic-scan__line:nth-child(3) {
  animation-delay: 0.8s;
}
.diagnostic-scan__lines .diagnostic-scan__line:nth-child(4) {
  animation-delay: 0.95s;
}

@keyframes diagnosticLineDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.diagnostic-scan__point {
  position: absolute;
  z-index: 2;
  width: 0.75rem;
  height: 0.75rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--dp-brand);
  box-shadow: 0 0 0 0.3125rem color-mix(in oklab, var(--dp-highlight) 65%, transparent);
  animation: diagnosticInspectionPulse 2s ease-in-out infinite;
}

.diagnostic-scan__point::after {
  content: '';
  position: absolute;
  inset: -0.375rem;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--dp-highlight) 75%, transparent);
  opacity: 0.55;
}

@keyframes diagnosticInspectionPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}

.diagnostic-scan__point--seo {
  top: 16%;
  left: 26%;
  animation-duration: 1.8s;
}
.diagnostic-scan__point--mobile {
  top: 16%;
  left: 82%;
  animation-duration: 2.1s;
}
.diagnostic-scan__point--checkout {
  top: 55%;
  left: 68%;
  animation-duration: 2.4s;
}
.diagnostic-scan__point--speed {
  top: 78%;
  left: 80%;
  animation-duration: 2s;
}

.diagnostic-scan__tag {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: 2.5rem;
  padding-inline: 0.875rem;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.25rem -0.5rem rgba(28, 30, 60, 0.3);
  color: var(--dp-ink);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  translate: 0 6px;
  animation:
    diagnosticTagIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    diagnosticTagFloat 3.6s ease-in-out infinite;
}

.diagnostic-scan__tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--dp-section);
  color: var(--dp-brand);
  font-size: 0.65rem;
}

.diagnostic-scan__tag-status {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.diagnostic-scan__tag-status--ok {
  background: #3f9d58;
}
.diagnostic-scan__tag-status--warn {
  background: #c8562e;
}
.diagnostic-scan__tag-status--caution {
  background: #d69a1f;
}

@keyframes diagnosticTagIn {
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Flutuação sutil e contínua, como se a tag estivesse descolada da loja
   (não presa a um ponto fixo) — duração e atraso variam por tag em
   .diagnostic-scan__tag--* para que o movimento de cada uma se desencontre
   das outras, em vez de flutuarem em sincronia. */
@keyframes diagnosticTagFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-0.375rem) rotate(-1.5deg);
  }
}

.diagnostic-scan__tag--seo {
  top: 9%;
  left: 4%;
  animation-delay: 0.7s, 0.1s;
  animation-duration: 0.5s, 3.4s;
}
.diagnostic-scan__tag--mobile {
  top: 9%;
  right: 4%;
  animation-delay: 0.85s, 0.5s;
  animation-duration: 0.5s, 3.9s;
}
.diagnostic-scan__tag--checkout {
  top: 48%;
  right: 3%;
  animation-delay: 1s, 0s;
  animation-duration: 0.5s, 4.3s;
}
.diagnostic-scan__tag--speed {
  top: 68%;
  right: 3%;
  animation-delay: 1.15s, 0.3s;
  animation-duration: 0.5s, 3.7s;
}

.diagnostic-scan__progress {
  position: absolute;
  z-index: 3;
  right: 4%;
  bottom: 4%;
  width: 9.25rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.25rem -0.5rem rgba(28, 30, 60, 0.3);
  opacity: 0;
  translate: 0 6px;
  animation: diagnosticTagIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.3s forwards;
}

.diagnostic-scan__progress-label {
  margin: 0 0 0.5rem;
  color: var(--dp-ink);
  font-size: 0.75rem;
  font-weight: 700;
}

.diagnostic-scan__progress-value {
  color: var(--dp-brand);
}

.diagnostic-scan__progress-track {
  width: 100%;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--dp-section);
  overflow: hidden;
}

.diagnostic-scan__progress-fill {
  display: block;
  height: 100%;
  width: 35%;
  border-radius: 999px;
  background: var(--dp-brand);
  animation: diagnosticProgressFill 4.5s ease-in-out infinite;
}

@keyframes diagnosticProgressFill {
  0% {
    width: 35%;
  }
  50% {
    width: 78%;
  }
  100% {
    width: 35%;
  }
}

/* Mesmo tratamento de .solucoes-hero__icons (input.css): fundo bg-section,
   border-radius, sombra e overflow:hidden — só a posição/tamanho do rail
   em si é própria desta composição (ver .diagnostic-hero__visual). */
.diagnostic-hero__rail {
  position: absolute;
  z-index: 4;
  top: 5rem;
  right: 0;
  width: 4.75rem;
  min-height: 22.5rem;
  padding: 2.125rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background: var(--dp-section);
  border-radius: 0.9rem;
  overflow: hidden;
  box-shadow: 0 0.75rem 1.875rem -0.625rem rgba(28, 30, 60, 0.25);
}

/* Mesma lógica de .solucoes-hero__icon: largura relativa ao rail,
   altura automática — o aspect-ratio de cada ícone vem dos atributos
   width/height do <img> (mesmos valores de Clientes/Soluções). */
.diagnostic-hero__icon {
  display: block;
  width: 48%;
  height: auto;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.diagnostic-hero__icon:hover {
  transform: scale(1.14) rotate(-4deg);
}

/* ---------- Card funcional do formulário (sobreposto à foto) ---------- */
.diagnostic-form-card {
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: 1.125rem;
  width: min(28.75rem, 60%);
  background: #fff;
  border-radius: 1rem;
  padding: 1.875rem;
  box-shadow: 0 1.375rem 3.4375rem -0.5rem rgba(25, 27, 64, 0.28);
}

.diagnostic-form-card__title {
  margin: 0 0 0.375rem;
  color: var(--dp-ink);
  font-size: 1.375rem;
  font-weight: 700;
}

.diagnostic-form-card__subtitle {
  margin: 0 0 1.25rem;
  color: var(--dp-text-muted);
  font-size: 0.9375rem;
}

.diagnostic-form-card__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.diagnostic-form-card__field {
  position: relative;
  display: flex;
  align-items: center;
}

.diagnostic-form-card__field i {
  position: absolute;
  left: 1.125rem;
  color: var(--dp-text-muted);
  font-size: 0.9375rem;
  pointer-events: none;
}

.diagnostic-form-card__input {
  width: 100%;
  height: 3.5rem;
  padding: 0 1rem 0 2.75rem;
  border: 1px solid var(--dp-border);
  border-radius: 0.5rem;
  color: var(--dp-ink);
  font-size: 1rem;
  background: #fff;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.diagnostic-form-card__input::placeholder {
  color: var(--dp-text-muted);
}

.diagnostic-form-card__input:focus-visible {
  outline: none;
  border-color: var(--dp-brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--dp-brand) 30%, white);
}

.diagnostic-form-card__input[aria-invalid='true'] {
  border-color: #d64545;
}

.diagnostic-form-card__status {
  min-height: 1.125rem;
  margin: -0.25rem 0 0;
  color: #d64545;
  font-size: 0.8125rem;
  line-height: 1.3;
}

.diagnostic-form-card__status.is-info {
  color: var(--dp-brand);
}

/* Geometria/cor vêm do utilitário .btn-dark do tema (input.css); aqui só o
   que o botão do card precisa além disso: posição para o spinner e gap
   menor (o ícone de seta + label + spinner cabem juntos no card estreito). */
.diagnostic-form-card__submit {
  position: relative;
  gap: 0.625rem;
  border: 0;
  cursor: pointer;
  font-size: 0.9375rem !important;
  padding-inline: 1rem !important;
}

.diagnostic-form-card__submit:focus-visible {
  outline: 2px solid var(--dp-brand);
  outline-offset: 2px;
}

.diagnostic-form-card__submit:disabled {
  cursor: progress;
  opacity: 0.85;
}

.diagnostic-form-card__accent {
  color: var(--dp-brand);
}

.diagnostic-form-card__spinner {
  display: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

.diagnostic-form-card__submit.is-loading .diagnostic-form-card__spinner {
  display: inline-block;
  animation: diagnostic-spin 0.8s linear infinite;
}

.diagnostic-form-card__submit.is-loading .diagnostic-form-card__submit-label {
  opacity: 0.9;
}

@keyframes diagnostic-spin {
  to {
    transform: rotate(360deg);
  }
}

.diagnostic-form-card__confirmations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.diagnostic-form-card__confirmations li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--dp-text-muted);
  font-size: 0.8125rem;
}

.diagnostic-form-card__confirmations i {
  color: var(--dp-brand);
  font-size: 0.8125rem;
}

.diagnostic-form-card__footer {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  border-radius: 0.625rem;
  background: var(--dp-section);
  color: var(--dp-ink);
  font-size: 0.8125rem;
  font-weight: 500;
}

.diagnostic-form-card__footer-icon {
  color: var(--dp-brand);
}

/* =========================================================
   O QUE ANALISAMOS — mesma linguagem visual da grade de
   serviços de Soluções (.solutions-service-card, input.css):
   header centralizado, cards numerados com ícone maior e a
   mesma alternância de tons institucionais. Paleta reaproveitada
   dos tokens --color-ink/--color-brand/--color-solutions-* já
   usados por Soluções, mantendo o isolamento .diagnostic- desta
   página. Ver template-parts/diagnostico_components/capabilities.php.
   ========================================================= */
.diagnostic-capabilities {
  background: #fff;
}

.diagnostic-capabilities__inner {
  /* Largura de conteúdo própria, mais estreita que o .container do
     site — mesmo idioma width:min(...) de .solutions-services__inner
     (input.css), não um max-width tentando imitar o container. */
  width: min(100% - 3rem, 80rem); /* 1280px */
  margin-inline: auto;
}

.diagnostic-capabilities__header {
  max-width: 53.125rem; /* 850px */
  margin: 0 auto;
}

/* Título/lead usam .h-section/.body-text (input.css) e os cards reaproveitam
   .solutions-service-card* diretamente — mesmos componentes de Soluções,
   sem duplicar escala/paleta aqui. Ver capabilities.php. */

/* Hover mais "sensível" (reage mais e mais rápido ao mouse) e com curva de
   easing spring, só nesta página — escopado a .diagnostic-capabilities/
   .diagnostic-process para não alterar o .solutions-service-card original
   usado em Soluções. Reaproveita os mesmos cards de capabilities.php e
   process.php. */
.diagnostic-capabilities .solutions-service-card,
.diagnostic-process .solutions-service-card {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.diagnostic-capabilities .solutions-service-card:hover,
.diagnostic-process .solutions-service-card:hover {
  transform: translateY(-0.5rem) scale(1.03);
  box-shadow: 0 1.375rem 2.5rem -1.125rem rgba(18, 24, 47, 0.32);
}

/* Micro-animações contínuas por categoria (icon_tone + anim em
   capabilities.php), reforçando o que cada uma representa. */

/* 01 Experiência de compra / 02 Conversão — gotas caindo do funil de
   vendas, uma logo depois da outra. */
.diagnostic-capabilities__icon--funnel {
  position: relative;
}

.diagnostic-capabilities__icon--funnel::before,
.diagnostic-capabilities__icon--funnel::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--dp-brand);
  opacity: 0;
  animation: diagnosticFunnelDrip 1.6s ease-in infinite;
}

.diagnostic-capabilities__icon--funnel::before {
  margin-left: -0.25rem;
  animation-delay: 0s;
}

.diagnostic-capabilities__icon--funnel::after {
  margin-left: 0.15rem;
  animation-delay: 0.8s;
}

@keyframes diagnosticFunnelDrip {
  0% {
    transform: translate(-50%, 0) scale(0.7);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  75% {
    opacity: 0.45;
  }
  100% {
    transform: translate(-50%, 1.1rem) scale(0.3);
    opacity: 0;
  }
}

/* 03 SEO e descoberta — lupa varrendo de um lado a outro, como numa busca. */
.diagnostic-capabilities__icon--search i {
  display: inline-block;
  animation: diagnosticSearchScan 2.4s ease-in-out infinite;
}

@keyframes diagnosticSearchScan {
  0%,
  100% {
    transform: rotate(0deg) translateX(0);
  }
  25% {
    transform: rotate(-12deg) translateX(-0.05rem);
  }
  75% {
    transform: rotate(12deg) translateX(0.05rem);
  }
}

/* 04 Conteúdo de produto — brilho de "carregando" cruzando o ícone. */
.diagnostic-capabilities__icon--image {
  position: relative;
  overflow: hidden;
}

.diagnostic-capabilities__icon--image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: -80% 0;
  animation: diagnosticImageShimmer 2.2s ease-in-out infinite;
}

@keyframes diagnosticImageShimmer {
  0% {
    background-position: -80% 0;
  }
  100% {
    background-position: 180% 0;
  }
}

/* 05 Performance — ponteiro do velocímetro balançando. */
.diagnostic-capabilities__icon--gauge i {
  display: inline-block;
  transform-origin: 50% 85%;
  animation: diagnosticGaugeNeedle 2.2s ease-in-out infinite;
}

@keyframes diagnosticGaugeNeedle {
  0%,
  100% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(14deg);
  }
}

/* =========================================================
   O QUE VOCÊ RECEBE — composição em duas colunas (texto +
   painel do relatório) na mesma linguagem visual da grade de
   serviços de Soluções (input.css): título compacto reaproveitando
   a escala de .solutions-services__title, painel reaproveitando
   --color-solutions-pale-blue e faixa inferior reaproveitando
   --color-ink. Ver template-parts/diagnostico_components/
   report-preview.php.
   ========================================================= */
.diagnostic-report {
  background: #fff;
}

.diagnostic-report__grid {
  /* Largura de conteúdo própria, mesmo idioma width:min(...) de
     .solutions-services__inner (input.css) — não um max-width
     tentando imitar o .container do site. */
  width: min(100% - 3rem, 79.5rem); /* 1272px */
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3rem;
}

@media (min-width: 1200px) {
  .diagnostic-report__grid {
    grid-template-columns: 54fr 46fr;
    gap: 4.5rem; /* 72px */
  }
}

.diagnostic-report__copy {
  /* align-items:stretch (padrão) — a lista em grid 2 colunas e o título
     precisam da largura cheia da coluna para calcular seus tracks/quebras
     de linha corretamente; flex-start deixava tudo encolher ao conteúdo. */
  display: flex;
  flex-direction: column;
}

/* Eyebrow/título/texto usam .eyebrow/.h-section/.body-text (input.css). */

.diagnostic-report__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 1.5rem; /* 14px / 24px */
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.diagnostic-report__list li {
  display: flex;
  align-items: center;
  gap: 0.625rem; /* 10px */
  color: var(--dp-ink);
  font-weight: 700;
  font-size: 0.9375rem; /* 15px */
}

.diagnostic-report__list .diagnostic-check {
  width: 2rem; /* 32px — só nesta lista, sem afetar o hero */
  height: 2rem;
}

/* CTA usa .btn-dark.link-arrow (input.css). */

.diagnostic-report__note {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  margin: 0.875rem 0 0; /* 14px */
  color: var(--dp-text-muted);
  font-size: 0.8125rem; /* 13px */
}

.diagnostic-report__note i {
  font-size: 0.75rem;
  color: var(--dp-text-muted);
}

/* ---------- Painel do relatório ---------- */
.diagnostic-report__preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  min-height: 31.25rem; /* 500px */
  padding: 2.75rem; /* 44px */
  border-radius: 0.875rem; /* 14px */
  background: var(--color-solutions-pale-blue, #c7e2f3);
}

.diagnostic-report__preview-label {
  position: absolute;
  z-index: 1;
  top: 1.5rem;
  left: 1.75rem;
  color: var(--dp-ink);
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}

.diagnostic-report__preview-number {
  position: absolute;
  z-index: 0;
  top: 1.25rem;
  right: 1.75rem;
  color: var(--dp-ink);
  font-size: 3.5rem; /* 56px */
  font-weight: 800;
  line-height: 1;
  opacity: 0.1;
}

.diagnostic-report__preview-strip {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.625rem; /* 10px */
  background: var(--dp-ink);
  border-radius: 0 0 0.875rem 0.875rem;
}

.diagnostic-report-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 25rem; /* 400px */
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--dp-ink) 12%, transparent);
  border-radius: 0.875rem; /* 14px */
  padding: 1.875rem; /* 30px */
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(28, 30, 60, 0.25);
}

.diagnostic-report-card__header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.375rem;
  border-bottom: 1px solid var(--dp-border);
}

.diagnostic-report-card__logo {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  padding: 0.375rem;
  border-radius: 0.5rem;
  background: var(--dp-ink);
}

.diagnostic-report-card__title {
  margin: 0;
  color: var(--dp-ink);
  font-weight: 700;
  font-size: 1rem;
}

.diagnostic-report-card__domain {
  margin: 0;
  color: var(--dp-text-muted);
  font-size: 0.875rem;
}

.diagnostic-report-card__badge {
  margin-left: auto;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--dp-section);
  color: var(--dp-ink);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.diagnostic-report-card__body {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.diagnostic-report-card__score {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.diagnostic-report-card__ring {
  --diagnostic-score: 72;
  position: relative;
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(
    var(--dp-brand) calc(var(--diagnostic-score) * 3.6deg),
    var(--dp-section) 0
  );
}

.diagnostic-report-card__ring::before {
  content: '';
  position: absolute;
  inset: 0.375rem;
  border-radius: 50%;
  background: #fff;
}

.diagnostic-report-card__ring span {
  position: relative;
  z-index: 1;
  color: var(--dp-ink);
  font-weight: 800;
  font-size: 1.125rem;
}

.diagnostic-report-card__score-label {
  margin: 0 0 0.25rem;
  color: var(--dp-ink);
  font-weight: 700;
  font-size: 1rem;
}

.diagnostic-report-card__score-text {
  margin: 0;
  color: var(--dp-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.diagnostic-report-card__priorities-title {
  margin: 0 0 0.875rem;
  color: var(--dp-ink);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.diagnostic-report-card__priorities ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.diagnostic-report-card__priorities li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--dp-border);
  color: var(--dp-ink);
  font-size: 0.9375rem;
}

.diagnostic-report-card__priorities li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.diagnostic-priority {
  flex-shrink: 0;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.diagnostic-priority--alta {
  background: #fbe3e3;
  color: #b13333;
}
.diagnostic-priority--media {
  background: var(--dp-section);
  color: #2e6f96;
}
.diagnostic-priority--baixa {
  background: var(--dp-bg-muted);
  color: var(--dp-text-muted);
}

.diagnostic-report-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.375rem;
  border-top: 1px solid var(--dp-border);
}

.diagnostic-report-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--dp-brand);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}

.diagnostic-report-card__download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--dp-border);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--dp-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: not-allowed;
}

/* =========================================================
   COMO FUNCIONA — painel azul-claro reaproveitando
   --color-solutions-pale-blue e cards no idioma de
   .solutions-service-card (input.css). Ver
   template-parts/diagnostico_components/process.php.
   ========================================================= */
.diagnostic-process {
  background: var(--color-solutions-pale-blue, #c7e2f3);
}

.diagnostic-process__inner {
  /* Largura de conteúdo própria, mesmo idioma width:min(...) de
     .solutions-services__inner (input.css). */
  width: min(100% - 3rem, 79.5rem); /* 1272px */
  margin-inline: auto;
}

.diagnostic-process__header {
  max-width: 47.5rem; /* 760px */
  margin: 0 auto 2.5rem;
}

/* Eyebrow/título usam .eyebrow/.h-section (input.css); os cards reaproveitam
   .solutions-service-card* diretamente. */

.diagnostic-process__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.125rem; /* 18px */
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 769px) {
  .diagnostic-process__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem; /* 20px */
  }
}

/* Cards reaproveitam .solutions-service-card* (input.css) — ver acima. */

/* =========================================================
   PROBLEMAS INVISÍVEIS — bento grid assimétrico (card principal
   em destaque + 3 cards menores com ilustrações decorativas),
   mesma paleta institucional reaproveitada de Soluções (input.css)
   e das demais seções desta página. Ver
   template-parts/diagnostico_components/problems.php.
   ========================================================= */
.diagnostic-problems {
  position: relative;
  overflow: clip;
  background: #fff;
  padding-block: 5rem; /* 80px — override em 1200px abaixo */
}

/* Halo azul extremamente discreto no topo da seção. */
.diagnostic-problems::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -10rem;
  left: 50%;
  transform: translateX(-50%);
  width: 50rem;
  height: 24rem;
  background: radial-gradient(
    ellipse at center,
    rgba(72, 160, 217, 0.14) 0%,
    rgba(199, 226, 243, 0.08) 45%,
    rgba(255, 255, 255, 0) 75%
  );
  pointer-events: none;
}

.diagnostic-problems__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 3rem, 77.5rem); /* 1240px — mesma largura visual das demais seções */
  margin-inline: auto;
}

.diagnostic-problems__header {
  max-width: 56.25rem; /* 900px */
  margin: 0 auto;
}

/* Título/lead usam .h-section/.body-text (input.css); só a cor da eyebrow
   (marca, não ink) precisa de um pequeno ajuste sobre a utility .eyebrow. */
.diagnostic-problems__eyebrow {
  color: var(--dp-brand);
}

/* =========================================================
   Bento grid — proporções horizontais e compactas (~478px de
   altura total no desktop). Larguras/alturas fixas propositais
   nesta seção (sem vh, sem min-height>500px, sem fr sem controle):
   é a única forma de manter o conjunto com a altura pedida em vez
   de deixar o conteúdo esticar as linhas do grid.
   ========================================================= */
.problems-bento {
  position: relative;
  z-index: 1;
  margin-top: 2.5rem; /* 40px */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.125rem; /* 18px */
}

@media (min-width: 1100px) {
  .problems-bento {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: stretch;
  }
}

.problems-bento__right {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.125rem; /* 18px */
}

@media (min-width: 1100px) {
  .problems-bento__right {
    /* Linhas com altura fixa (não fr/auto): 190px + gap 18px + 270px
       = 478px, e é essa soma que dita a altura do card principal ao
       lado (via align-items:stretch em .problems-bento). */
    grid-template-rows: 11.875rem 16.875rem; /* 190px / 270px */
  }
}

.problems-bento__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.125rem; /* 18px */
}

@media (min-width: 768px) {
  .problems-bento__bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Base compartilhada dos cards ---------- */
.problems-bento__card {
  position: relative;
  overflow: hidden;
  padding: 1.625rem; /* 26px — sobrescrito abaixo por card */
  border-radius: 0.75rem; /* 12px */
  display: flex;
  flex-direction: column;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}

.problems-bento__seo {
  padding: 1.5rem 1.875rem; /* 24px / 30px */
}

.problems-bento__content,
.problems-bento__tech {
  padding: 1.625rem 1.75rem; /* 26px / 28px */
}

@media (hover: hover) {
  .problems-bento__card:hover {
    transform: translateY(-0.1875rem); /* -3px */
    box-shadow: 0 1rem 2rem -1.25rem rgba(18, 24, 47, 0.3);
  }

  .problems-bento__card:hover .problems-bento__funnel,
  .problems-bento__card:hover .problems-bento__search,
  .problems-bento__card:hover .problems-bento__gallery,
  .problems-bento__card:hover .problems-bento__gauge {
    opacity: 0.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .problems-bento__card {
    transition: none;
  }
  .problems-bento__card:hover {
    transform: none;
  }
}

.problems-bento__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.problems-bento__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; /* 48px */
  height: 3rem;
  border-radius: 0.5625rem; /* 9px */
  font-size: 1.125rem;
  flex-shrink: 0;
}

.problems-bento__icon--on-white {
  background: #fff;
  color: var(--dp-ink);
}
.problems-bento__icon--on-navy {
  background: var(--dp-ink);
  color: #fff;
}
.problems-bento__icon--on-blue {
  background: var(--dp-brand);
  color: #fff;
}
.problems-bento__icon--on-pale-blue {
  background: var(--color-solutions-pale-blue, #c7e2f3);
  color: var(--dp-ink);
}

.problems-bento__number {
  font-size: 2.125rem; /* 34px */
  font-weight: 800;
  line-height: 1;
  color: #fff;
  opacity: 0.28;
}

.problems-bento__number--ink {
  color: var(--dp-ink);
  opacity: 0.14;
}

.problems-bento__title {
  margin: 0.75rem 0 0; /* 12px */
  font-weight: 800;
  line-height: 1.2;
}

.problems-bento__title--lg {
  font-size: 1.625rem; /* 26px */
}

.problems-bento__title--md {
  font-size: 1.25rem; /* 20px */
}

.problems-bento__title--sm {
  font-size: 1.1875rem; /* 19px */
}

.problems-bento__list {
  margin: 0.625rem 0 0; /* 10px */
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px */
}

.problems-bento__list li {
  position: relative;
  padding-left: 1.125rem;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.4;
}

.problems-bento__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.4375rem; /* 7px */
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
}

.problems-bento__list--grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.375rem 1.25rem;
}

@media (min-width: 420px) {
  .problems-bento__list--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Card principal: Experiência e conversão ---------- */
.problems-bento__main {
  background: var(--dp-ink);
  color: #fff;
  padding: 1.875rem 2rem; /* 30px / 32px */
}

@media (min-width: 1100px) {
  .problems-bento__main {
    display: grid;
    /* Coluna do funil fixa em 250px (~40% maior que a versão anterior de
       180px) — o conteúdo (texto) ocupa o restante do espaço. */
    grid-template-columns: minmax(0, 1fr) 15.625rem;
    align-items: center;
    gap: 1.5rem; /* 24px */
  }
}

.problems-bento__main-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.problems-bento__main .problems-bento__title {
  margin-top: 1rem; /* 16px abaixo do título, conforme pedido */
}

.problems-bento__main .problems-bento__list {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem; /* 16px */
}

.problems-bento__main .problems-bento__list li::before {
  color: var(--color-solutions-pale-blue, #c7e2f3);
}

.problems-bento__tag {
  margin: 1.5rem 0 0; /* 24px — em fluxo normal, nunca position:absolute */
  color: var(--color-solutions-pale-blue, #c7e2f3);
  font-size: 0.6875rem; /* 11px */
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  opacity: 0.85;
}

.problems-bento__main-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem; /* 24px no mobile/tablet, empilhado abaixo da lista */
}

@media (min-width: 1100px) {
  .problems-bento__main-visual {
    margin-top: 0;
    height: 100%;
  }
}

.problems-bento__funnel {
  width: 11.25rem; /* 180px no mobile/tablet */
  color: var(--color-solutions-pale-blue, #c7e2f3);
  opacity: 0.6;
  transition: opacity 200ms ease;
  pointer-events: none;
}

@media (min-width: 1100px) {
  .problems-bento__funnel {
    width: 100%;
    max-width: 15.625rem; /* 250px — ~40% maior que a versão anterior (180px) */
  }
}

.problems-bento__funnel svg {
  display: block;
  width: 100%;
  height: auto;
}

.problems-bento__funnel-icon {
  position: relative;
  left: 30%;
  margin-top: -1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.6875rem;
}

/* ---------- Card: SEO e descoberta ---------- */
.problems-bento__seo {
  background: var(--color-solutions-pale-blue, #c7e2f3);
  color: var(--dp-ink);
}

.problems-bento__seo .problems-bento__list li::before {
  color: var(--dp-brand);
}

.problems-bento__seo-body {
  margin-top: 0.25rem; /* 4px */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 1;
}

.problems-bento__seo-copy .problems-bento__list {
  margin-top: 0.25rem; /* 4px */
  gap: 0.3125rem 1.25rem; /* 5px linha / 20px coluna */
}

.problems-bento__seo-copy .problems-bento__list li {
  line-height: 1.3;
}

.problems-bento__seo-copy {
  flex: 1;
  min-width: 13rem;
}

.problems-bento__seo-copy .problems-bento__title {
  margin-top: 0;
}

.problems-bento__search {
  flex-shrink: 0;
  width: 8.125rem; /* 130px */
  color: var(--dp-ink);
  opacity: 0.4;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.problems-bento__search svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Cards menores: Conteúdo e imagens / Tecnologia e mobile ---------- */
.problems-bento__content {
  background: var(--color-solutions-lavender, #c9c9d9);
  color: var(--dp-ink);
}
.problems-bento__content .problems-bento__list li::before {
  color: var(--dp-ink);
}

.problems-bento__tech {
  background: var(--dp-bg-muted);
  color: var(--dp-ink);
  border: 1px solid color-mix(in oklab, var(--dp-ink) 12%, transparent);
}
.problems-bento__tech .problems-bento__list li::before {
  color: var(--dp-brand);
}

@media (min-width: 1100px) {
  /* Nos cards menores (270px), a ilustração vira position:absolute no
     canto inferior direito — sai do fluxo, então nunca força o card a
     crescer. A lista usa a largura cheia do card (sem max-width): mais
     estreita forçaria os itens a quebrar em 2 linhas e estourar a altura.
     Em compensação, o próprio texto fica mais compacto para garantir
     folga vertical acima da ilustração. */
  .problems-bento__content,
  .problems-bento__tech {
    height: 16.875rem; /* 270px */
  }

  .problems-bento__content .problems-bento__title,
  .problems-bento__tech .problems-bento__title {
    margin-top: 0.5rem; /* 8px */
  }

  .problems-bento__content .problems-bento__list,
  .problems-bento__tech .problems-bento__list {
    margin-top: 0.375rem; /* 6px */
    gap: 0.3125rem; /* 5px */
  }

  .problems-bento__content .problems-bento__list li,
  .problems-bento__tech .problems-bento__list li {
    line-height: 1.3;
  }

  .problems-bento__gallery,
  .problems-bento__gauge {
    position: absolute;
    right: 1.25rem;
    bottom: 0.25rem;
    margin-top: 0;
    padding-top: 0;
  }
}

.problems-bento__gallery {
  margin-top: 0.75rem;
  padding-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4375rem;
  opacity: 0.55;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.problems-bento__gallery-thumb {
  width: 1.5rem; /* 24px */
  height: 1.5rem;
  border-radius: 0.375rem;
  background: currentColor;
  opacity: 0.5;
}

.problems-bento__gallery-line {
  height: 0.3125rem;
  flex: 1 1 5rem;
  min-width: 2.5rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.35;
}

.problems-bento__gallery-line--short {
  flex-basis: 2.5rem;
}

.problems-bento__gauge {
  margin-top: 0.75rem;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  color: var(--dp-brand);
  opacity: 0.65;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.problems-bento__gauge svg {
  display: block;
  width: 3.5rem; /* 56px */
  height: auto;
}

.problems-bento__gauge-lines {
  width: 100%;
  max-width: 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.problems-bento__gauge-lines span {
  height: 0.25rem;
  border-radius: 999px;
  background: var(--dp-border);
}

.problems-bento__gauge-lines span:nth-child(1) {
  width: 100%;
}
.problems-bento__gauge-lines span:nth-child(2) {
  width: 70%;
}
.problems-bento__gauge-lines span:nth-child(3) {
  width: 85%;
}

/* =========================================================
   CTA FINAL + FAIXA DE CONFIANÇA — um único painel comercial de
   fechamento logo após "Problemas invisíveis" (mesma largura e
   border-radius do bento anterior): área azul-marinho (marcador +
   título + texto + botão + detalhe decorativo) seguida, dentro do
   mesmo container arredondado/overflow:hidden, da faixa de
   confiança azul-clara. Ver
   template-parts/diagnostico_components/final-cta.php.
   ========================================================= */
.diagnostic-final-cta {
  background: #fff;
}

.diagnostic-final-cta__panel {
  width: min(100% - 3rem, 77.5rem); /* 1240px — mesma largura do bento anterior */
  margin-inline: auto;
  /* .diagnostic-problems (seção anterior) já termina com padding-bottom
     próprio (56px ≤768 / 80px 769-1199 / 96px ≥1200) — margin-top aqui é
     calculado para que o espaço TOTAL entre o bento e este painel fique
     em ~64px (dentro da faixa de 56-72px pedida), sem alterar o padding
     da seção anterior. */
  margin-top: 0.5rem; /* 8px + 56px da seção anterior = 64px */
  margin-bottom: 4.5rem; /* 72px */
  border-radius: 0.875rem; /* 14px */
  overflow: hidden; /* cantos superiores (main) e inferiores (trust) vêm daqui */
}

@media (min-width: 769px) and (max-width: 1199px) {
  .diagnostic-final-cta__panel {
    margin-top: -1rem; /* -16px + 80px da seção anterior = 64px */
  }
}

@media (min-width: 1200px) {
  .diagnostic-final-cta__panel {
    margin-top: -2rem; /* -32px + 96px da seção anterior = 64px */
    margin-bottom: 5.25rem; /* 84px */
  }
}

.diagnostic-final-cta__main {
  position: relative;
  overflow: hidden; /* recorta o detalhe decorativo */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem; /* 24px, entre copy e botão no mobile/tablet */
  padding: 1.875rem 1.625rem; /* 30px / 26px */
  background: var(--dp-ink);
}

@media (min-width: 481px) {
  .diagnostic-final-cta__main {
    padding: 2.25rem 2rem;
  }
}

@media (min-width: 1025px) {
  .diagnostic-final-cta__main {
    display: grid;
    /* Coluna do botão no piso pedido para o botão (390px) — o resto vai
       para o título, que precisa da largura para não quebrar mal. */
    grid-template-columns: minmax(0, 1fr) 24.375rem; /* 390px */
    align-items: center;
    gap: 2.5rem; /* 40px */
    min-height: 15rem; /* 240px, dentro de 240-270 */
    padding: 2.5rem 3.25rem; /* 40px / 52px */
  }
}

.diagnostic-final-cta__copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.diagnostic-final-cta__eyebrow {
  margin: 0 0 1rem; /* 16px */
  color: var(--dp-brand);
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Escala/cor do título vêm das utilities aplicadas direto no <h2>
   (mesmo vocabulário de .h-section, sem o token text-ink embutido —
   ver skill: heading sobre fundo escuro não usa a utility com cor
   fixa). Só o comportamento de quebra de linha é específico daqui. */
.diagnostic-final-cta__title strong {
  font-weight: 800;
  /* Nunca deixa "mais" isolado numa linha sozinho — "vender mais" quebra
     sempre junto, para a linha seguinte inteira se necessário. */
  white-space: nowrap;
}

.diagnostic-final-cta__text {
  margin: 1.125rem 0 0; /* 18px */
  max-width: 35rem; /* 560px */
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem; /* 16px */
  line-height: 1.55;
}

/* Geometria/cor base vêm de .btn-white.link-arrow (input.css) — só o
   necessário além disso: largura máxima do card, o tom de hover
   (pale-blue da paleta institucional em vez do cinza padrão do
   utilitário) e o alinhamento à direita no grid do desktop. */
.diagnostic-final-cta__button {
  max-width: 26.25rem; /* 420px */
}

@media (min-width: 1025px) {
  .diagnostic-final-cta__button {
    justify-self: end;
  }
}

.diagnostic-final-cta__button:hover {
  background-color: color-mix(in oklab, var(--color-solutions-pale-blue, #c7e2f3) 35%, white);
}

/* Detalhe decorativo abstrato (linha + pontos conectados), ecoando o
   funil do card "Experiência e conversão" do bento anterior — puramente
   ornamental, opacidade muito baixa, atrás do botão. */
.diagnostic-final-cta__deco {
  position: absolute;
  z-index: 0;
  right: -2.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 13.75rem; /* 220px */
  height: auto;
  color: var(--color-solutions-pale-blue, #c7e2f3);
  opacity: 0.08;
  pointer-events: none;
}

.diagnostic-final-cta__trust {
  margin: 0;
  padding: 1.25rem 1.75rem; /* 20px / 28px */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 1rem; /* 16px */
  list-style: none;
  background: var(--color-solutions-pale-blue, #c7e2f3);
}

@media (min-width: 480px) {
  .diagnostic-final-cta__trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .diagnostic-final-cta__trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-block: 1.375rem; /* 22px */
  }
}

.diagnostic-final-cta__trust li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6875rem; /* 11px */
  color: var(--dp-ink);
  font-weight: 700;
  font-size: 0.8125rem; /* 13px */
}

@media (max-width: 479px) {
  .diagnostic-final-cta__trust li {
    justify-content: flex-start;
  }
}

.diagnostic-final-cta__trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; /* 36px */
  height: 2.25rem;
  border-radius: 0.5rem; /* 8px */
  background: rgba(255, 255, 255, 0.6);
  color: var(--dp-brand);
  font-size: 0.9375rem;
  flex-shrink: 0;
}

/* =========================================================
   FAQ + CTA FINAL
   ========================================================= */
.diagnostic-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

.diagnostic-faq__title {
  margin-top: 0.5rem;
}

.diagnostic-accordion {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.diagnostic-accordion__item {
  background: #fff;
  border: 1px solid var(--dp-border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.diagnostic-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  color: var(--dp-ink);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  list-style: none;
}

.diagnostic-accordion__trigger::-webkit-details-marker {
  display: none;
}

.diagnostic-accordion__trigger:focus-visible {
  outline: 2px solid var(--dp-brand);
  outline-offset: -2px;
}

.diagnostic-accordion__chevron {
  flex-shrink: 0;
  color: var(--dp-brand);
  transition: transform 0.2s ease;
}

.diagnostic-accordion__item[open] .diagnostic-accordion__chevron {
  transform: rotate(180deg);
}

.diagnostic-accordion__panel {
  padding: 0 1.25rem 1.125rem;
  color: var(--dp-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.diagnostic-accordion__panel p {
  margin: 0;
}

.diagnostic-faq__cta {
  background: var(--dp-ink);
  border-radius: 1.125rem;
  padding: 2.5rem 2rem;
  color: #fff;
}

.diagnostic-faq__cta-text {
  margin: 0 0 1.5rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9375rem;
}

/* Botão usa .btn-brand.link-arrow (input.css) — mesmo componente do
   CTA "CONTATO" do header, só com width:100% dentro do card. */
.diagnostic-faq__cta-button {
  width: 100%;
}

/* =========================================================
   RESPONSIVIDADE
   Desktop grande (>=1200px): hero 2 colunas, grid 3x2 / 2x2 completos.
   ========================================================= */
@media (min-width: 1200px) {
  .diagnostic-hero__container {
    grid-template-columns:
      minmax(26rem, 0.86fr)
      minmax(32rem, 1.14fr);
    align-items: start;
    gap: clamp(3.5rem, 5vw, 6.25rem);
    min-height: calc(100svh - 8rem);
  }

  .diagnostic-hero__copy {
    padding-top: 0;
  }

  .diagnostic-problems {
    padding-block: 6rem; /* 96px */
  }

  .diagnostic-faq__grid {
    grid-template-columns: minmax(0, 1fr) 34rem;
  }

  /* Quadro azul "gruda" no topo (abaixo do .site-header, que é sticky)
     enquanto a coluna do FAQ — mais alta — ainda está rolando, e sai
     junto com o resto assim que o FAQ termina. Puro CSS: .diagnostic-
     faq__grid já usa align-items:start (não estica os itens), então a
     área da célula do grid tem a altura da coluna mais alta (o FAQ) e é
     ela quem limita até onde o card pode "grudar". Nenhum JS necessário
     — muito mais robusto que um parallax calculado no scroll. */
  .diagnostic-faq__cta {
    position: sticky;
    top: 7rem; /* .site-header mede ~100px nesta faixa (1200–1279px) + respiro */
  }
}

@media (min-width: 1280px) {
  .diagnostic-faq__cta {
    top: 11rem; /* .site-header cresce para ~160px a partir de 1280px */
  }
}

/* ---------- Tablet / desktop médio (769–1199px) ---------- */
@media (min-width: 769px) and (max-width: 1199px) {
  .diagnostic-hero__visual {
    min-height: clamp(32rem, 62vh, 40.625rem);
  }

  .diagnostic-hero__photo {
    right: 5rem;
    width: min(72%, 27rem);
    height: clamp(28rem, 58vh, 34rem);
  }

  .diagnostic-hero__rail {
    top: 3.5rem;
    width: 4rem;
    min-height: 17.5rem;
  }

  .diagnostic-hero__frame {
    top: 2rem;
    right: 2rem;
    bottom: 0.75rem;
  }

  .diagnostic-form-card {
    width: min(24rem, 62%);
    padding: 1.5rem;
  }

  .diagnostic-report__grid {
    grid-template-columns: 54fr 46fr;
    gap: 2.25rem; /* 36px */
  }

  .diagnostic-report-card {
    max-width: 22rem; /* mantém o relatório dentro do container no tablet */
  }

  /* Entre 900px e 1199px: card principal continua em destaque, mas os
     elementos gráficos decorativos ficam menores para não competir com o
     conteúdo em uma coluna mais estreita. */
  .problems-bento__funnel {
    width: 8.75rem; /* 140px */
  }

  .problems-bento__search {
    width: 6.875rem; /* 110px */
  }

  .problems-bento__gauge svg {
    width: 4.5rem; /* 72px */
  }

  /* Radar menor e tags mais próximas dos pontos — o quadro encolheu
     (min(72%, 27rem) acima), então a composição de análise precisa do
     mesmo ajuste de escala para não ficar apertada. */
  .diagnostic-radar {
    width: min(58%, 11rem);
  }

  .diagnostic-scan__tag {
    height: 2.125rem;
    font-size: 0.6875rem;
    padding-inline: 0.6875rem;
  }

  .diagnostic-scan__tag-icon {
    width: 1.1875rem;
    height: 1.1875rem;
    font-size: 0.5625rem;
  }

  .diagnostic-scan__tag--seo,
  .diagnostic-scan__tag--mobile {
    top: 7%;
  }

  .diagnostic-scan__progress {
    width: 8rem;
  }
}

/* ---------- Mobile (<=768px) ---------- */
@media (max-width: 768px) {
  .diagnostic-hero__container {
    gap: 2.5rem;
  }

  .diagnostic-hero__copy {
    align-items: center;
    text-align: center;
  }

  .diagnostic-hero__benefits {
    justify-content: center;
  }

  /* Do hero da Home ao mobile: abandona a composição sobreposta
     (position:absolute) por uma pilha simples em fluxo normal —
     ver seção 16 do briefing de refino do hero. */
  .diagnostic-hero__visual {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .diagnostic-hero__frame {
    display: none;
  }

  .diagnostic-hero__photo {
    /* relative (não static): .diagnostic-scan (radar/pontos/tags) precisa
       de um ancestral posicionado para o inset:0 funcionar — mantém o
       mesmo fluxo normal de .diagnostic-hero__photo no mobile. Zera
       top/right (herdados da regra base, position:absolute) que sob
       position:relative passam a deslocar a caixa em vez de serem
       ignorados como eram sob position:static. */
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 680;
  }

  /* Tags compactas (chip só com o ícone) e sem as linhas de conexão mais
     longas, para não competir com o quadro estreito do mobile. Radar e os
     quatro pontos de inspeção permanecem. */
  .diagnostic-scan__lines {
    display: none;
  }

  .diagnostic-scan__tag {
    height: 1.875rem;
    padding-inline: 0.5rem;
    gap: 0.3125rem;
    font-size: 0;
  }

  .diagnostic-scan__tag-icon {
    width: 1.125rem;
    height: 1.125rem;
    font-size: 0.5625rem;
  }

  /* No mobile o cabeçalho da loja (logo/menu) ocupa a mesma faixa onde a
     tag ficava no desktop — desce as duas um pouco mais, para a altura da
     linha de categorias/ícones, onde não cobrem nenhum texto. */
  .diagnostic-scan__tag--seo,
  .diagnostic-scan__tag--mobile {
    top: 13%;
  }

  .diagnostic-scan__progress {
    width: 7.25rem;
    padding: 0.5625rem 0.625rem;
  }

  .diagnostic-scan__progress-label {
    font-size: 0.6875rem;
  }

  .diagnostic-hero__rail {
    position: static;
    width: 100%;
    min-height: 0;
    flex-direction: row;
    justify-content: center;
    gap: 1.75rem;
    padding: 1rem 0;
  }

  /* Em linha (não mais em coluna), cada ícone precisa de um tamanho
     próprio em vez de % da largura do rail (que aqui é 100%). */
  .diagnostic-hero__icon {
    width: auto;
    height: 1.75rem;
  }

  .diagnostic-form-card {
    position: static;
    width: 100%;
  }

  .diagnostic-report__list {
    grid-template-columns: 1fr;
  }

  .diagnostic-report__preview {
    min-height: 0;
    padding: 1.5rem; /* 24px */
  }

  .diagnostic-report__preview-number {
    font-size: 2.25rem; /* 36px, mais discreto */
    top: 1rem;
    right: 1.25rem;
  }

  .diagnostic-report__preview-label {
    top: 1rem;
    left: 1.25rem;
  }

  .diagnostic-report-card {
    max-width: none;
  }

  .diagnostic-problems {
    padding-block: 3.5rem; /* 56px */
  }

  .problems-bento__funnel,
  .problems-bento__search,
  .problems-bento__gallery,
  .problems-bento__gauge {
    display: none;
  }

  .problems-bento__main-bottom {
    min-height: 0;
    padding-top: 1rem;
  }

  .diagnostic-faq__cta {
    text-align: center;
  }
}

/* ---------- Telas pequenas (<=480px) ---------- */
@media (max-width: 480px) {
  .diagnostic-form-card {
    padding: 1.5rem;
  }

  .diagnostic-hero__rail {
    gap: 1.25rem;
  }

  .diagnostic-report-card {
    padding: 1.25rem;
  }

  .problems-bento__card {
    padding: 1.375rem; /* 22px */
  }

  .diagnostic-final-cta__trust {
    padding-inline: 1.375rem; /* 22px */
  }

  .diagnostic-faq__cta {
    padding: 2rem 1.5rem;
  }
}

/* =========================================================
   ANIMAÇÕES — entrada sutil no load (hero) e ao rolar (demais seções),
   com leve stagger. Curva "ease-out expo" (padrão em toda a página) para
   um movimento que desacelera suave, sem bounce. As classes .diagnostic-
   reveal(-group) são adicionadas ao HTML nos componentes; a troca para
   .is-inview é feita por um IntersectionObserver em assets/js/diagnostic.js
   — sem a classe .is-inview (JS desabilitado/indisponível) o conteúdo
   permanece 100% visível via a regra "sem JS" logo abaixo, nunca invisível.
   Tudo aqui é anulado em prefers-reduced-motion (bloco no fim do arquivo).
   ========================================================= */
/* Hero: título, lead, benefícios e CTA entram em sequência ao carregar;
   a composição visual (foto/rail/card) entra logo em seguida. Usa as
   propriedades `translate`/`scale` (independentes de `transform`) de
   propósito: vários cards da página (.solutions-service-card,
   .problems-bento__card) já têm seu próprio `transform: translateY(...)`
   no `:hover` — se o reveal usasse `transform`, o hover pararia de
   funcionar depois da entrada por causa do empate de especificidade.
   `translate`/`scale` somam-se ao `transform` do hover sem conflito. */
.diagnostic-hero__copy > * {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    translate 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.diagnostic-hero__copy > *:nth-child(1) {
  transition-delay: 0.05s;
}
.diagnostic-hero__copy > *:nth-child(2) {
  transition-delay: 0.15s;
}
.diagnostic-hero__copy > *:nth-child(3) {
  transition-delay: 0.25s;
}
.diagnostic-hero__copy > *:nth-child(4) {
  transition-delay: 0.35s;
}

.diagnostic-hero__visual {
  opacity: 0;
  translate: 0 20px;
  scale: 0.98;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
    translate 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
    scale 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.diagnostic-hero.is-loaded .diagnostic-hero__copy > *,
.diagnostic-hero.is-loaded .diagnostic-hero__visual {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* Reveal genérico ao rolar: o próprio elemento .diagnostic-reveal, ou cada
   filho direto de .diagnostic-reveal-group (com stagger por nth-child). */
.diagnostic-reveal,
.diagnostic-reveal-group > * {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    translate 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.diagnostic-reveal.is-inview,
.diagnostic-reveal-group > *.is-inview {
  opacity: 1;
  translate: 0 0;
}

.diagnostic-reveal--d2,
.diagnostic-reveal-group > *:nth-child(2) {
  transition-delay: 0.08s;
}
.diagnostic-reveal--d3,
.diagnostic-reveal-group > *:nth-child(3) {
  transition-delay: 0.16s;
}
.diagnostic-reveal--d4,
.diagnostic-reveal-group > *:nth-child(4) {
  transition-delay: 0.24s;
}
.diagnostic-reveal-group > *:nth-child(5) {
  transition-delay: 0.32s;
}
.diagnostic-reveal-group > *:nth-child(6) {
  transition-delay: 0.4s;
}

/* Anel de nota do relatório: preenche e conta do zero até o valor real
   quando a seção entra na tela (JS anima --diagnostic-score e o número). */
@property --diagnostic-score {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.diagnostic-report-card__ring {
  transition: --diagnostic-score 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
   Acessibilidade: respeita prefers-reduced-motion.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .diagnostic-form-card__spinner {
    animation: none;
  }

  .diagnostic-hero__copy > *,
  .diagnostic-hero__visual,
  .diagnostic-reveal,
  .diagnostic-reveal-group > * {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition: none;
  }

  .diagnostic-report-card__ring {
    transition: none;
  }

  .diagnostic-accordion__chevron,
  .diagnostic-form-card__input,
  .diagnostic-form-card__submit,
  .diagnostic-faq__cta-button {
    transition: none;
  }

  /* Camada de análise (radar + pontos + tags + progresso): para a
     rotação/pulsos e mostra tudo já no estado final, estático — nenhuma
     informação visual é removida, só a animação. */
  .diagnostic-radar__sweep {
    animation: none;
    opacity: 0.5;
  }

  .diagnostic-scan__point {
    animation: none;
  }

  .diagnostic-scan__line {
    animation: none;
    stroke-dashoffset: 0;
  }

  .diagnostic-scan__tag,
  .diagnostic-scan__progress {
    animation: none;
    opacity: 1;
    translate: 0 0;
  }

  .diagnostic-scan__progress-fill {
    animation: none;
    width: 68%;
  }

  .diagnostic-hero__icon {
    transition: none;
  }

  .diagnostic-hero__icon:hover {
    transform: none;
  }

  .diagnostic-capabilities .solutions-service-card,
  .diagnostic-process .solutions-service-card {
    transition: none;
  }

  .diagnostic-capabilities .solutions-service-card:hover,
  .diagnostic-process .solutions-service-card:hover {
    transform: none;
    box-shadow: none;
  }

  .diagnostic-capabilities__icon--funnel::before,
  .diagnostic-capabilities__icon--funnel::after {
    animation: none;
    opacity: 0;
  }

  .diagnostic-capabilities__icon--search i,
  .diagnostic-capabilities__icon--gauge i {
    animation: none;
  }

  .diagnostic-capabilities__icon--image::after {
    animation: none;
    background-position: 180% 0;
  }
}