/* --------------------------------------------------------------------------
   07. CRM no WhatsApp: fonte/secoes/crm.php

   Capítulo escuro entre dois de papel. Porta do capítulo de operação do
   molde: a vida de um lead em placas soltas (sem fio, para não repetir a
   régua do capítulo 06) e, ao lado, uma conversa ilustrativa em vidro com a
   ficha do veículo e os marcos (test drive e vendedor). O halo atrás da
   conversa dá a atmosfera que a fotografia daria. Nenhuma divisa mora aqui.
   -------------------------------------------------------------------------- */
.secao-crm {
  position: relative;
  overflow: hidden;
  overflow: clip;
}

.crm-halo {
  position: absolute;
  z-index: 0;
  inset: 18% -10% auto 38%;
  height: 70%;
  background: radial-gradient(closest-side, var(--acento-vidro), transparent);
  pointer-events: none;
}

.secao-crm > .container {
  position: relative;
  z-index: 1;
}

.secao-crm .secao-cabecalho .selo {
  margin-bottom: var(--e4);
}

.crm-palco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: var(--esp-grid);
  align-items: center;
}

.crm-conduta {
  display: grid;
  align-content: center;
  gap: var(--e6);
}

.crm-conduta-topo {
  display: grid;
  justify-items: start;
  gap: var(--e4);
}

.crm-conduta-topo h3 {
  max-width: 24ch;
  font-size: var(--t3);
  font-weight: var(--p-max);
  letter-spacing: var(--tk2);
  line-height: 1.18;
}

.crm-trilha {
  display: grid;
  gap: var(--e4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-trilha > li {
  padding: var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--sup-2);
  box-shadow: var(--sombra-1);
  transition:
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

.crm-trilha > li:hover {
  border-color: var(--acento-linha);
  box-shadow: var(--sombra-2);
  transform: translateY(calc(var(--e1) * -0.5));
}

.crm-trilha h4 {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: 0;
  color: var(--texto);
  font-family: var(--titulo);
  font-size: var(--t5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.35;
}

.crm-trilha p {
  margin-top: var(--e3);
  color: var(--suave);
  font-size: var(--c3);
  line-height: 1.8;
}

/* --- Conversa ilustrativa ------------------------------------------------ */
.crm-conversa {
  --mov-forca: 2%;
  display: grid;
  gap: var(--e5);
  margin: 0;
  padding: var(--e6);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--sup-1) 72%, transparent);
  box-shadow: var(--sombra-3);
}

.crm-conversa-topo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e4);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--borda);
}

.crm-avatar,
.crm-ficha-icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--acento-vidro);
  color: var(--acento);
}

.crm-avatar .icone,
.crm-ficha-icone .icone {
  width: 20px;
  height: 20px;
}

.crm-conversa-topo strong,
.crm-ficha strong {
  display: block;
  color: var(--texto);
  font-size: var(--c2);
  font-weight: var(--p-forte);
  line-height: 1.35;
}

.crm-conversa-topo small,
.crm-ficha small {
  display: block;
  color: var(--tenue);
  font-family: var(--mono);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
  text-transform: uppercase;
}

.crm-baloes {
  display: grid;
  gap: var(--e3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-balao {
  max-width: 82%;
  padding: var(--e3) var(--e4);
  border-radius: var(--r-lg);
  font-size: var(--c3);
  line-height: 1.6;
}

.crm-balao--cliente {
  justify-self: start;
  border: 1px solid var(--borda);
  border-bottom-left-radius: var(--r-sm);
  background: var(--sup-3);
  color: var(--texto);
}

.crm-balao--loja {
  justify-self: end;
  border: 1px solid var(--acento-linha);
  border-bottom-right-radius: var(--r-sm);
  background: var(--acento-vidro);
  color: var(--texto);
}

.crm-ficha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--e4);
  padding: var(--e4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-lg);
  background: var(--sup-2);
}

.crm-ficha span > span {
  display: block;
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.5;
}

.crm-marcos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-marcos > li {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 44px;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.45;
}

.crm-marcos .icone {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--acento);
}

.crm-conversa .nota {
  margin: 0;
}

.crm-nota {
  max-width: 72ch;
  margin-top: var(--esp-bloco);
}

.crm-nota strong {
  color: var(--texto);
  font-weight: var(--p-forte);
}

@media (max-width: 980px) {
  .crm-palco {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .crm-halo {
    inset: 50% -20% auto -20%;
    height: 50%;
  }
}

@media (max-width: 680px) {
  .crm-conversa {
    padding: var(--e5);
    border-radius: var(--r-lg);
  }

  .crm-conversa-topo {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .crm-conversa-topo .selo {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .crm-balao {
    max-width: 92%;
  }

  .crm-marcos {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-trilha > li {
    transition: none;
  }

  .crm-trilha > li:hover {
    transform: none;
  }
}