/**
 * Duplo D . o elenco como caminho do cliente (pagina 7001, 06/10/2026).
 *
 * Carregado so na 7001, depois do duplod-v2.css, pelo
 * novamira-sandbox/duplod-elenco-jornada.php.
 *
 * Duas regras que este arquivo respeita de proposito:
 *
 * 1. Nada aqui usa [data-fam]. O `.dd-v2 [data-fam="x"]` do duplod-v2.css pinta
 *    fundo e anel em QUALQUER descendente com o atributo (ja vazou na regua e
 *    nas pilulas). A cor de cada etapa entra por classe, `.dd-e-<agente>`, que
 *    so declara variaveis --e-* e nao pinta nada sozinha.
 * 2. Numero sobre cor e sempre `deep` sobre branco, nunca branco sobre `mark`:
 *    branco sobre o mark do verde mede 3,2:1 e sobre o ambar 4,0:1.
 */

/* ------------------------------------------------ cor de cada etapa */
.dd-e-pharos    { --e-tint: var(--pharos-tint);    --e-soft: var(--pharos-soft);    --e-line: var(--pharos-line);    --e-mark: var(--pharos-mark);    --e-deep: var(--pharos-deep); }
.dd-e-lume      { --e-tint: var(--lume-tint);      --e-soft: var(--lume-soft);      --e-line: var(--lume-line);      --e-mark: var(--lume-mark);      --e-deep: var(--lume-deep); }
.dd-e-signal    { --e-tint: var(--signal-tint);    --e-soft: var(--signal-soft);    --e-line: var(--signal-line);    --e-mark: var(--signal-mark);    --e-deep: var(--signal-deep); }
.dd-e-contextus { --e-tint: var(--contextus-tint); --e-soft: var(--contextus-soft); --e-line: var(--contextus-line); --e-mark: var(--contextus-mark); --e-deep: var(--contextus-deep); }
.dd-e-node      { --e-tint: var(--node-tint);      --e-soft: var(--node-soft);      --e-line: var(--node-line);      --e-mark: var(--node-mark);      --e-deep: var(--node-deep); }

/* ------------------------------------------------------------ a roda */
.dd-v2 .dd-roda {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin: 0 0 56px;
}
.dd-v2 .dd-roda__svg { width: 100%; height: auto; display: block; overflow: visible; }
.dd-v2 .dd-roda__arco { fill: none; stroke-width: 26; stroke-linecap: butt; }
.dd-v2 .dd-roda__bola { fill: #fff; stroke-width: 4; }
.dd-v2 .dd-roda__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  text-anchor: middle;
  dominant-baseline: central;
}
.dd-v2 .dd-roda__centro {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--neutral-800);
}

.dd-v2 .dd-roda__legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dd-v2 .dd-roda__legenda li { margin: 0; padding: 0; list-style: none; }
.dd-v2 .dd-roda__legenda a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px 16px 10px 14px;
  border-radius: var(--radius-md, 8px);
  background: var(--e-tint);
  box-shadow: inset 4px 0 0 var(--e-mark);
  color: var(--neutral-900);
  text-decoration: none;
  transition: box-shadow 160ms ease;
}
.dd-v2 .dd-roda__legenda a:hover,
.dd-v2 .dd-roda__legenda a:focus-visible { box-shadow: inset 4px 0 0 var(--e-mark), 0 0 0 2px var(--e-mark); }
.dd-v2 .dd-roda__n {
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--e-mark);
  color: var(--e-deep);
  font: 600 16px/36px var(--font-display);
  text-align: center;
}
.dd-v2 .dd-roda__txt { display: flex; flex-direction: column; gap: 2px; }
.dd-v2 .dd-roda__txt b { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 24px; }
.dd-v2 .dd-roda__txt small {
  font-family: var(--font-ui);
  font-size: 12px; line-height: 18px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--e-deep);
}

/* ---------------------------------------------------------- a trilha */
.dd-v2 .dd-trilha { list-style: none; margin: 0; padding: 0; }
.dd-v2 .dd-etapa {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 24px;
  margin: 0;
  padding: 0 0 32px;
  list-style: none;
  scroll-margin-top: 120px;
}
/* O trilho: cada etapa pinta o seu trecho, entao a linha muda de cor
   conforme o cliente anda. */
.dd-v2 .dd-etapa::before {
  content: "";
  position: absolute;
  left: 26px; top: 0; bottom: 0;
  width: 4px;
  background: var(--e-mark);
}
.dd-v2 .dd-etapa:first-child::before { top: 28px; }
.dd-v2 .dd-etapa__n {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 4px var(--e-mark);
  color: var(--e-deep);
  font: 600 22px/56px var(--font-display);
  text-align: center;
}
.dd-v2 .dd-etapa__card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  background: var(--e-tint);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 0 0 1px var(--e-line);
  overflow: hidden;
}
/* Absoluto dentro da celula: com height:100% numa linha de grade de altura
   automatica o retrato nao enche o card quando o texto e mais alto. */
.dd-v2 .dd-etapa__fig { position: relative; margin: 0; min-height: 280px; overflow: hidden; background: var(--e-soft); }
.dd-v2 .dd-etapa__fig img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center var(--dd-agent-pos, 24%);
  display: block;
}
.dd-v2 .dd-etapa__corpo { padding: 26px 30px 28px; display: flex; flex-direction: column; gap: 10px; }
.dd-v2 .dd-etapa__corpo > * { margin: 0; }
.dd-v2 .dd-etapa__cor {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px; line-height: 18px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--e-deep);
}
.dd-v2 .dd-etapa__nome {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px; line-height: 34px;
  color: var(--neutral-900);
}
.dd-v2 .dd-etapa__nome a { color: inherit; text-decoration: none; }
.dd-v2 .dd-etapa__nome a:hover { text-decoration: underline; text-underline-offset: 4px; }
.dd-v2 .dd-etapa__nome small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--neutral-700);
  margin-left: 8px;
}
.dd-v2 .dd-etapa__sentido {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px; line-height: 26px;
  color: var(--e-deep);
}
.dd-v2 .dd-etapa__corpo p { font-size: 16px; line-height: 26px; color: var(--neutral-800); }
.dd-v2 .dd-etapa__corpo p.dd-etapa__cor { font-size: 12px; line-height: 18px; color: var(--e-deep); }
.dd-v2 .dd-etapa__corpo p.dd-etapa__sentido { font-size: 18px; color: var(--e-deep); }
.dd-v2 .dd-etapa__corpo p.dd-etapa__limite {
  font-size: 14px; line-height: 22px;
  color: var(--neutral-700);
  border-top: 1px solid var(--e-line);
  padding-top: 12px;
  margin-top: 2px;
}
.dd-v2 .dd-etapa__limite b { color: var(--neutral-900); }
.dd-v2 .dd-etapa__mais {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px; line-height: 20px;
  color: var(--e-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
}

/* A volta: depois do azul, o violeta de novo. */
.dd-v2 .dd-trilha__volta {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 24px;
  align-items: center;
  margin: 0;
  font-size: 16px; line-height: 26px;
  color: var(--neutral-800);
}
.dd-v2 .dd-trilha__volta::before {
  content: "↺";
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--pharos-tint);
  box-shadow: inset 0 0 0 4px var(--pharos-mark);
  color: var(--pharos-deep);
  font: 600 26px/56px var(--font-display);
  text-align: center;
}

/* ------------------------------------------- onde o caminho quebra */
.dd-v2 .dd-quebra {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.dd-v2 .dd-quebra__fig { margin: 0; }
.dd-v2 .dd-quebra__fig img { width: 100%; height: auto; display: block; border-radius: 12px; }
.dd-v2 .dd-quebra__corpo { display: flex; flex-direction: column; gap: 14px; }
.dd-v2 .dd-quebra__corpo > h2, .dd-v2 .dd-quebra__corpo > p { margin: 0; }
.dd-v2 .dd-quebra__lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dd-v2 .dd-quebra__lista li { margin: 0; padding: 0; list-style: none; }
.dd-v2 .dd-quebra__lista a {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px 12px 14px;
  border-radius: var(--radius-md, 8px);
  background: var(--e-tint);
  box-shadow: inset 4px 0 0 var(--e-mark);
  color: var(--neutral-900);
  text-decoration: none;
  transition: box-shadow 160ms ease;
}
.dd-v2 .dd-quebra__lista a:hover,
.dd-v2 .dd-quebra__lista a:focus-visible { box-shadow: inset 4px 0 0 var(--e-mark), 0 0 0 2px var(--e-mark); }
.dd-v2 .dd-quebra__n {
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--e-mark);
  color: var(--e-deep);
  font: 600 15px/32px var(--font-display);
  text-align: center;
}
.dd-v2 .dd-quebra__txt { font-size: 16px; line-height: 24px; }
.dd-v2 .dd-quebra__quem {
  font-family: var(--font-ui);
  font-size: 12px; line-height: 18px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--e-deep);
  white-space: nowrap;
}

/* ------------------------------------------------------------ celular */
@media (max-width: 959px) {
  .dd-v2 .dd-roda { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dd-v2 .dd-roda__svg { max-width: 300px; margin: 0 auto; }
  .dd-v2 .dd-quebra { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dd-v2 .dd-quebra__fig { max-width: 520px; }
}

@media (max-width: 767px) {
  .dd-v2 .dd-etapa { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding-bottom: 24px; }
  .dd-v2 .dd-etapa::before { left: 18px; }
  .dd-v2 .dd-etapa:first-child::before { top: 20px; }
  .dd-v2 .dd-etapa__n { width: 40px; height: 40px; font-size: 18px; line-height: 40px; box-shadow: inset 0 0 0 3px var(--e-mark); }
  /* O retrato vira avatar ao lado do nome: cinco retratos inteiros
     empilhados somavam ~3.800px de rolagem no celular. */
  .dd-v2 .dd-etapa__card { display: block; }
  .dd-v2 .dd-etapa__fig {
    float: left;
    width: 76px; height: 96px; min-height: 0;
    margin: 16px 14px 6px 16px;
    border-radius: 6px;
  }
  .dd-v2 .dd-etapa__fig img { position: static; }
  .dd-v2 .dd-etapa__corpo { display: block; padding: 16px 16px 20px; }
  .dd-v2 .dd-etapa__corpo > * + * { margin-top: 8px; }
  .dd-v2 .dd-etapa__nome { font-size: 22px; line-height: 28px; }
  .dd-v2 .dd-etapa__nome small { display: block; margin: 2px 0 0; font-size: 14px; line-height: 20px; }
  .dd-v2 .dd-etapa__corpo p.dd-etapa__sentido { font-size: 16px; line-height: 24px; clear: left; padding-top: 4px; }
  .dd-v2 .dd-etapa__mais { display: inline-block; }
  .dd-v2 .dd-trilha__volta { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; font-size: 15px; line-height: 24px; }
  .dd-v2 .dd-trilha__volta::before { width: 40px; height: 40px; font-size: 20px; line-height: 40px; box-shadow: inset 0 0 0 3px var(--pharos-mark); }
  .dd-v2 .dd-quebra__lista a { grid-template-columns: 32px minmax(0, 1fr); row-gap: 4px; }
  .dd-v2 .dd-quebra__quem { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-v2 .dd-roda__legenda a,
  .dd-v2 .dd-quebra__lista a { transition: none; }
}