/* ── /ppci/ — ajustes sobre o ppci-page.css ────────────────────────────────
   Carregado depois do ppci-page.css, então em empate de especificidade este
   arquivo vence. Duas frentes:

   1. As pranchas técnicas passaram a usar o mesmo componente da home
      (.svc-figure-*/.svc-hotspot-*). O ppci-page.css carrega um protótipo
      antigo em que `.ppci-preview .drawing button` e `.ppci-preview .drawing
      img` valem para QUALQUER botão ou imagem dentro da prancha — o que
      esticava cada ponto numerado para a largura toda. As regras abaixo
      devolvem ao componente as suas medidas.

   2. As duas seções escuras da página tinham sido achatadas por
      `.ppci-preview .dark { background: var(--cream) }`, e a página inteira
      virou um bloco claro só. Aqui elas voltam, no mesmo ritmo da home:
      verde no meio da página, verde-escuro no fechamento.

   Nenhum style="" aqui nem no HTML — a CSP não permite inline.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 1. A prancha interativa dentro da moldura de folha ──────────────────── */

.ppci-preview .drawing .svc-detail-figure {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

/* o protótipo zerava o padding e fixava a altura de todo botão/imagem daqui */
.ppci-preview .drawing .svc-figure-frame {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 5px;
  border: 1px solid var(--rule);
  background: #fff;
  cursor: zoom-in;
}
.ppci-preview .drawing .svc-figure-img {
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: center;
}

/* os pontos numerados: alvo de toque de 44px, ponto visível de 13px */
.ppci-preview .drawing .svc-hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  pointer-events: auto;
}
.ppci-preview .drawing .svc-hotspot-dot {
  width: 13px;
  height: 13px;
}

/* miniaturas: quadrados fixos, separados do desenho pela linha da folha */
.ppci-preview .drawing .svc-figure-thumbs {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  margin-top: 2px;
}
.ppci-preview .drawing .svc-figure-thumb {
  display: block;
  width: 58px;
  height: 58px;
  min-height: 0;
  padding: 3px;
  border: 1px solid var(--rule);
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.ppci-preview .drawing .svc-figure-thumb.active {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
}
.ppci-preview .drawing .svc-figure-thumb img {
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: top left;
}

/* legenda e convite acompanham a tipografia mono da folha */
.ppci-preview .drawing .svc-figure-caption,
.ppci-preview .drawing .svc-hotspot-hint {
  margin: 0;
  font-family: var(--mono);
  color: var(--ink-soft);
}
.ppci-preview .drawing .svc-figure-caption { font-size: 0.66rem; line-height: 1.55; }
.ppci-preview .drawing .svc-hotspot-hint { font-size: 0.63rem; }
.ppci-preview .drawing .svc-hotspot-tip { color: var(--cream); }

@media (max-width: 600px) {
  .ppci-preview .drawing .svc-figure-thumb { width: 52px; height: 52px; }
}

/* ── 2. O ritmo escuro da página ─────────────────────────────────────────── */

/* O --gold-light da marca (#D4AC58) rende 4,43:1 sobre o verde #1C4E43 — fica
   logo abaixo dos 4,5:1 exigidos para texto pequeno, e o eyebrow é pequeno.
   Um passo mais claro resolve (5,06:1 no verde, 7,67:1 no verde-escuro) e vale
   para as duas seções escuras, mantendo um tom só de ouro na página. */
.ppci-preview { --gold-on-green: #DDB96B; }

/* Meio da página, no mesmo verde de "Casos atendidos" na home. */
.ppci-preview #escopo { background: var(--green); color: var(--cream); }
.ppci-preview #escopo h2 { color: var(--white); }
.ppci-preview #escopo p { color: rgba(255, 255, 255, 0.82); }
.ppci-preview #escopo .eyebrow { color: var(--gold-on-green); }
.ppci-preview #escopo .scope { border-left-color: rgba(255, 255, 255, 0.22); }
.ppci-preview #escopo .scope li { border-bottom-color: rgba(255, 255, 255, 0.18); }
.ppci-preview #escopo .scope h3 { color: var(--white); }
.ppci-preview #escopo .scope p { color: rgba(255, 255, 255, 0.78); }

/* Alternância entre as duas seções claras do miolo. Sem isto, "Atendimento
   regional" e "O que precisamos saber" ficam brancas e coladas logo depois do
   verde — a mesma alternância creme/branco que a home usa entre "Portfólio" e
   "Processo". A régua no topo do bloco verde não é visível e sai. */
.ppci-preview #atendimento-regional { background: var(--cream); border-top: 0; }
.ppci-preview #atuacao { background: var(--white); }

.ppci-preview .drawing .ppci-marker{display:grid;place-items:center;width:40px;height:40px;min-width:40px;min-height:40px;max-width:40px;max-height:40px;padding:0;margin:0;border:2px solid #fff;border-radius:50%;background:#1c4e43;color:#fff;font:600 13px/1 Arial,sans-serif;letter-spacing:0;cursor:pointer;box-shadow:0 2px 8px #0003;transform:translate(-50%,-50%)}.ppci-preview .drawing .ppci-marker[aria-pressed=true]{background:#8d6d24}.ppci-preview .drawing .ppci-marker::before,.ppci-preview .drawing .ppci-marker::after{content:none}