/* Páginas de produto: Nizity Salão (salao.html) e Nizity Pesquisa de Campo (campo.html). Conceito "Fio na mão":
   a 1ª dobra é o produto em miniatura (order-flow.css / field-flow.css) com a legenda das etapas; depois, blocos de
   tela cheia no tom do produto, na linguagem de Serviços e Parceiros: sem pilha de caixas, sem rótulo pequeno em
   cima de título, losangos como marcadores, cantos de 10 px, desenhos em traço de 1 px.
   Um fio fino (a "espinha") desce pela margem esquerda no computador e acende um losango em cada título quando ele
   aparece (product-page.js põe .is-seen); termina cheio no convite.
   O tom: Salão no violeta e rosa da marca (o orbe no estado idle); Campo no verde-água da parceria (estado
   looking). --tone pinta botão e losangos; --tone-glow, os brilhos e as faixas. Só tokens semânticos. */

.pp {
  --tone: var(--color-accent);
  --tone-glow: var(--color-orb);
  --tone-on: var(--color-on-tone);
  --tone-text: color-mix(in srgb, var(--color-accent) 80%, var(--color-text));
  --band: color-mix(in srgb, var(--tone-glow) 6%, var(--color-panel-solid));
  --pp-ease: cubic-bezier(.2, .7, .2, 1);
}
.pp[data-tone="campo"] {
  --tone: var(--color-partner);
  --tone-glow: var(--color-glow-partner);
  --tone-on: var(--color-on-partner);
  --tone-text: color-mix(in srgb, var(--color-partner) 70%, var(--color-text));
}
.pp .btn-accent { --btn-tone: var(--tone); --btn-on: var(--tone-on); }
/* O brilho de fundo do site (violeta, no body) passa ao verde-água na página do Campo */
body:has(.pp[data-tone="campo"]) {
  background:
    radial-gradient(ellipse 60% 45% at 72% 22%, color-mix(in srgb, var(--color-glow-partner) calc(16% * var(--glow-strength)), transparent), transparent 70%),
    radial-gradient(1px 1px at 20% 30%, var(--color-star), transparent),
    radial-gradient(1px 1px at 80% 70%, var(--color-star), transparent),
    var(--color-bg);
  background-attachment: fixed;
}
.pp .home-link:focus-visible { color: var(--tone-text); }
@media (hover: hover) { .pp .home-link:hover { color: var(--tone-text); } }

/* ---------- Topo em tela cheia: texto à esquerda, a miniatura à direita ---------- */
.pp-hero {
  --hero-foot: clamp(4.5rem, 14vh, 9rem);
  position: relative; overflow: hidden; overflow: clip;
  display: grid; align-items: center;
  min-height: calc(100vh - var(--header-height) - 1px);
  min-height: calc(100svh - var(--header-height) - 1px);
  background: linear-gradient(color-mix(in srgb, var(--tone-glow) 6%, var(--color-panel-solid)) calc(100% - var(--hero-foot)), transparent);
}
.pp-hero-inner { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: center; gap: clamp(2rem, 4vw, 5rem); padding-block: clamp(2rem, 6vh, 4.5rem); }
.pp-hero h1 { font-weight: 300; font-size: min(clamp(2.5rem, 4.2vw, 4.2rem), 12.5vw); line-height: .98; letter-spacing: -0.035em; text-wrap: balance; }
.pp-hero h1 strong { font-weight: 600; }
.pp-lead { color: var(--color-muted); font-size: clamp(1.08rem, 1.4vw, 1.3rem); line-height: 1.45; margin-top: 1.375rem; max-width: 26rem; text-wrap: pretty; }
.pp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 2rem; }
.pp-demo { min-width: 0; scroll-margin-top: 1rem; }

/* Legenda das etapas: três colunas com um fio em cima e um losango no começo. Com a animação, só a etapa da vez
   fica acesa (a miniatura diz qual em data-stage); sem JS ou com movimento reduzido, as três lado a lado */
.pp-legend { margin-top: 1.5rem; }
.pp-stages { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.pp-stage { position: relative; padding-top: 1rem; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: .9rem; line-height: 1.45; transition: border-color .4s; }
.pp-stage b { display: block; margin-bottom: .2rem; color: var(--color-text); font-weight: 600; }
.pp-stage-num { font-family: var(--font-mono); font-weight: 500; font-size: .85em; color: var(--tone-text); margin-right: .25em; }
.pp-stage-mark { position: absolute; left: 0; top: -.3125rem; width: .625rem; height: .625rem; rotate: 45deg; border: 1.5px solid var(--tone); background: var(--color-bg); transition: background .4s, box-shadow .4s; }
/* Etapa fora da vez: o texto não perde contraste (AA); só o título desce para o tom secundário e o losango apaga */
:is(.of, .ff)[data-stage] ~ .pp-legend .pp-stage b { color: var(--color-muted); transition: color .4s; }
:is(.of, .ff)[data-stage] ~ .pp-legend .pp-stage .pp-stage-mark { opacity: .5; transition: opacity .4s, background .4s, box-shadow .4s; }
:is(.of, .ff)[data-stage="1"] ~ .pp-legend .pp-stage--1,
:is(.of, .ff)[data-stage="2"] ~ .pp-legend .pp-stage--2,
:is(.of, .ff)[data-stage="3"] ~ .pp-legend .pp-stage--3 { border-top-color: var(--tone); }
:is(.of, .ff)[data-stage="1"] ~ .pp-legend .pp-stage--1 b,
:is(.of, .ff)[data-stage="2"] ~ .pp-legend .pp-stage--2 b,
:is(.of, .ff)[data-stage="3"] ~ .pp-legend .pp-stage--3 b { color: var(--color-text); }
:is(.of, .ff)[data-stage="1"] ~ .pp-legend .pp-stage--1 .pp-stage-mark,
:is(.of, .ff)[data-stage="2"] ~ .pp-legend .pp-stage--2 .pp-stage-mark,
:is(.of, .ff)[data-stage="3"] ~ .pp-legend .pp-stage--3 .pp-stage-mark { opacity: 1; background: var(--tone); box-shadow: 0 0 10px color-mix(in srgb, var(--tone-glow) calc(70% * var(--glow-strength)), transparent); }
.pp-legend-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 1.125rem; }
.pp-demo-label { color: var(--color-muted); font-size: .82rem; }

/* Controles da miniatura: botões de verdade (a cena desenhada é aria-hidden) */
.pp-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.pp-ctl-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .25rem; background: none; border: 0; color: var(--color-muted); font-size: .88rem; font-weight: 500; transition: color .15s, background .15s; }
.pp-ctl-btn:focus-visible { color: var(--color-text); }
@media (hover: hover) { .pp-ctl-btn:hover { color: var(--color-text); } }
/* A ação da vez (Campo): controle em contorno, no tom do produto, do tamanho dos outros controles. Não é CTA: o
   botão cheio da página é o do topo. A largura mínima segura o Pausar no lugar enquanto o rótulo troca */
.pp-ctl-btn--line { justify-content: center; min-width: 12.5rem; padding: 0 1rem; border: 1px solid var(--tone); border-radius: var(--radius); color: var(--tone-text); }
.pp-ctl-btn--line:focus-visible { color: var(--tone-text); }
@media (hover: hover) { .pp-ctl-btn--line:hover { color: var(--tone-text); background: color-mix(in srgb, var(--tone) 10%, transparent); } }
.pp-ctl-btn[aria-disabled="true"] { opacity: .45; cursor: default; }
/* O ícone de Pausar (duas barras / triângulo) mora em components.css: o rodapé usa o mesmo */

/* ---------- Corpo: seções em tela cheia ---------- */
.pp-body { position: relative; }
.pp-sec { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.pp-sec h2 { font-weight: 300; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em; max-width: 22ch; text-wrap: balance; }
.pp-sec h2 strong { font-weight: 600; }
.pp-text { color: var(--color-muted); font-size: 1.1rem; line-height: 1.55; max-width: 38rem; margin-top: 1.25rem; text-wrap: pretty; }
/* Faixa no tom (uma seção sim, outra não), que se funde com o fundo em cima e embaixo */
.pp-band { background: linear-gradient(transparent, var(--band) clamp(48px, 8vw, 110px), var(--band) calc(100% - clamp(48px, 8vw, 110px)), transparent); }

/* Desenhos em traço de 1 px (SVG inline). Os que "se escrevem" fazem isso uma vez, quando aparecem */
.pp-draw { display: block; width: 100%; height: auto; overflow: visible; }
.pp-d-line { fill: none; stroke: var(--color-line-strong); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.pp-d-faint { fill: none; stroke: var(--color-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pp-d-fill { fill: var(--color-bg); }
.pp-d-ink { fill: none; stroke: color-mix(in srgb, var(--color-text) 55%, transparent); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pp-d-hatch { fill: url(#pp-hatch); stroke: var(--color-line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pp-d-route { fill: none; stroke: var(--tone-glow); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pp-d-lost { fill: none; stroke: var(--color-line-strong); stroke-width: 1.25; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.pp-d-break path { fill: none; stroke: var(--color-orb); stroke-width: 2; stroke-linecap: round; }
.pp-d-smudge { fill: none; stroke: color-mix(in srgb, var(--color-text) 40%, transparent); stroke-width: 6; stroke-linecap: round; opacity: .45; filter: blur(1.5px); }
.pp-d-drop { fill: color-mix(in srgb, var(--tone) 22%, transparent); stroke: var(--tone); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* Com o product-page.js (e movimento liberado): a rota começa apagada e se desenha ao aparecer; o × e o resto
   perdido surgem no fim */
.pp-draw.is-armed .pp-d-route { stroke-dashoffset: 1; }
.pp-draw.is-armed :is(.pp-d-break, .pp-d-lost) { opacity: 0; }
.pp-draw.is-armed.is-seen .pp-d-route { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.45, 0, .25, 1) .2s; }
.pp-draw.is-armed.is-seen :is(.pp-d-break, .pp-d-lost) { opacity: 1; transition: opacity .4s 1.5s; }
.pp-draw.is-armed .pp-d-drop { transform: translateY(-40px); opacity: 0; transform-box: fill-box; }
.pp-draw.is-armed.is-seen .pp-d-drop { transform: none; opacity: 1; transition: transform .7s cubic-bezier(.5, 0, .7, .4) .3s, opacity .2s .3s; }
.pp-draw.is-armed .pp-d-smudge { opacity: 0; }
.pp-draw.is-armed.is-seen .pp-d-smudge { opacity: .45; transition: opacity .8s 1s; }

/* O que sai do papel / da prancheta: título e desenho de um lado, a tabela (ou o texto) do outro */
.pp-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.pp-split-head .pp-ticket { max-width: 32rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
.pp-split--text { align-items: center; }
.pp-sheet { max-width: 25rem; justify-self: center; }

/* Tabela antes/depois: sem caixa; a coluna "Antes" em cor apagada sobre uma pauta de caderno quase invisível, e
   um fio no tom separa a coluna do produto */
.pp-vs { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.pp-vs thead th { padding: 0 1.25rem .875rem; text-align: left; font-size: .88rem; font-weight: 500; color: var(--color-muted); }
.pp-vs thead th::before, .pp-vs td::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .625rem; rotate: 45deg; border: 1.5px solid var(--color-line-strong); vertical-align: .08em; }
.pp-vs thead th:last-child, .pp-vs td:last-child { border-left: 1px solid var(--tone); }
.pp-vs thead th:last-child { color: var(--color-text); }
.pp-vs thead th:last-child::before, .pp-vs td:last-child::before { border-color: var(--tone); background: var(--tone); }
.pp-vs td::before { display: none; }
.pp-vs tbody tr { border-top: 1px solid var(--color-line); }
.pp-vs tbody th { padding: 1.25rem 1.25rem 1.25rem 0; text-align: left; font-weight: 500; white-space: nowrap; vertical-align: top; }
.pp-vs td { padding: 1.25rem; vertical-align: top; }
.pp-vs td:nth-child(2) { color: var(--color-muted); background: repeating-linear-gradient(transparent 0 1.43rem, color-mix(in srgb, var(--color-line) 60%, transparent) 1.43rem calc(1.43rem + 1px)); background-position: 0 1.25rem; }

/* Planta do salão e os papéis ao lado (a lista repete os números dos losangos) */
.pp-plan-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-top: clamp(2rem, 4vw, 3.5rem); }
.pp-floor-pin rect { fill: var(--color-bg); stroke: var(--tone); stroke-width: 1.5; }
.pp-floor-pin text { fill: var(--tone-text); font: 600 15px var(--font-sans); text-anchor: middle; }
.pp-roles { list-style: none; display: grid; gap: 1.75rem; }
.pp-role { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.pp-role h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.3; margin-bottom: .3rem; }
.pp-role p { color: var(--color-muted); }
.pp-role-num { position: relative; display: grid; place-items: center; width: 2rem; height: 2rem; font-size: .85rem; font-weight: 600; color: var(--tone-text); }
.pp-role-num::before { content: ""; position: absolute; inset: .3rem; rotate: 45deg; border: 1.5px solid var(--tone); }

/* Sem instalar nada: o fio em escala grande, com as tecnologias penduradas em letra mono, pequena */
.pp-wire { list-style: none; display: grid; grid-template-columns: auto minmax(6rem, 1fr) auto; align-items: start; margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 60rem; }
.pp-wire-node { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.pp-wire-mark { width: 1.25rem; height: 1.25rem; margin-block: 1rem; rotate: 45deg; border: 1.5px solid var(--tone); background: var(--color-bg); }
.pp-wire-orb { width: 3.25rem; height: 3.25rem; }
.pp-wire b { font-weight: 500; }
.pp-wire code { font-family: var(--font-mono); font-size: .75rem; color: var(--color-muted); }
.pp-wire-link { position: relative; display: grid; justify-items: center; gap: .375rem; padding-top: 3.75rem; margin-inline: 1rem; }
.pp-wire-link::before, .pp-wire-link::after { content: ""; position: absolute; left: 0; right: 0; top: 1.625rem; height: 1px; background: color-mix(in srgb, var(--tone) 55%, transparent); }
.pp-wire-link::after { left: 0; width: 2.5rem; right: auto; height: 3px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--tone-glow)); box-shadow: 0 0 10px var(--tone-glow); opacity: 0; }
.pp-wire-sec.is-seen .pp-wire-link::after { animation: pp-run 2.6s cubic-bezier(.45, 0, .25, 1) .3s 2 both; }
@keyframes pp-run { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 2.5rem); opacity: 0; } }

/* O que ele não faz: frases soltas, cada uma com um losango riscado */
.pp-not-list { list-style: none; display: grid; gap: 1.125rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.pp-not-list li { position: relative; padding-left: 2rem; font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 300; line-height: 1.3; letter-spacing: -0.01em; }
.pp-not-list li::before { content: ""; position: absolute; left: .125rem; top: .45em; width: .625rem; height: .625rem; rotate: 45deg; border: 1.5px solid var(--color-line-strong); }
.pp-not-list li::after { content: ""; position: absolute; left: -.125rem; top: calc(.45em + .3125rem); width: 1.125rem; height: 1.5px; background: var(--color-muted); rotate: -45deg; }

/* Campo: os três jeitos de entrar, em colunas separadas por um fio no tom (sem caixa) */
.pp-cols { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
.pp-role--col { display: block; padding-left: 1.5rem; border-left: 1px solid color-mix(in srgb, var(--tone) 60%, transparent); }
.pp-role--col h3 { display: grid; font-size: 1.25rem; font-weight: 600; margin-bottom: .75rem; }
.pp-role-where { font-size: .95rem; font-weight: 400; color: var(--color-muted); }
.pp-role-ico { display: block; width: 4rem; height: 3rem; margin-bottom: 1.25rem; fill: none; stroke: var(--color-line-strong); stroke-width: 1.5; stroke-linejoin: round; overflow: visible; }
.pp-ico-tone { stroke: var(--tone); }

/* O que vem junto: linhas de ficha técnica (nome à esquerda, o que faz à direita) */
.pp-feats { margin-top: clamp(2rem, 4vw, 3rem); }
.pp-feat { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 1rem 3rem; padding-block: 1.5rem; border-top: 1px solid var(--color-line); }
.pp-feat:last-child { border-bottom: 1px solid var(--color-line); }
.pp-feat dt { display: flex; align-items: baseline; gap: .875rem; font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 500; line-height: 1.25; }
.pp-feat dt::before { content: ""; flex: none; width: .5625rem; height: .5625rem; rotate: 45deg; border: 1.5px solid var(--tone); translate: 0 -.15em; }
.pp-feat dd { color: var(--color-muted); font-size: 1.02rem; max-width: 40rem; }

/* Sem sinal no campo: a frase grande e o fio cortado. Ao aparecer, o vão fecha e passam o dado e a foto */
.pp-statement { font-size: clamp(1.45rem, 2.5vw, 2.3rem); font-weight: 300; line-height: 1.28; letter-spacing: -0.015em; max-width: 44rem; text-wrap: pretty; }
.pp-cut { display: grid; grid-template-columns: auto minmax(8rem, 1fr) auto; align-items: center; gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 50rem; }
.pp-cut-end { display: grid; justify-items: center; gap: .5rem; font-size: .88rem; font-weight: 500; }
.pp-cut-end .pp-role-ico { margin: 0; width: 3rem; height: 2.5rem; }
/* A imagem do orbe é rosa (a cor da marca); o filtro a leva ao verde-água da página, como em Parceiros */
.pp-cut-orb { width: 2.5rem; height: 2.5rem; margin-block: 0; filter: hue-rotate(200deg); }
.pp-cut-wire { position: relative; height: 5rem; }
.pp-cut-wire::before { content: ""; position: absolute; left: 0; right: 0; top: 1.5rem; height: 1px; background: color-mix(in srgb, var(--tone) 60%, transparent); }
.pp-cut-gap { position: absolute; left: 34%; top: calc(1.5rem - .5rem); width: 2.25rem; height: 1rem; border-inline: 1px solid var(--color-line-strong); background: repeating-linear-gradient(135deg, var(--color-line-strong) 0 1px, transparent 1px 4px), var(--color-bg); }
.pp-cut-gap-t { position: absolute; left: 34%; top: -.5rem; translate: calc(-50% + 1.125rem) -100%; font-size: .75rem; font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.pp-cut-dot { position: absolute; left: 0; top: 1.5rem; width: .5rem; height: .5rem; translate: -50% -50%; rotate: 45deg; background: var(--tone-glow); box-shadow: 0 0 10px var(--tone-glow); opacity: 0; }
.pp-cut-dot--photo { width: .875rem; height: .875rem; }
.pp-cut-keys { position: absolute; left: 0; right: 0; top: 2.75rem; display: flex; justify-content: center; gap: 1.5rem; font-size: .8rem; color: var(--color-muted); }
.pp-cut-keys > span { display: inline-flex; align-items: center; gap: .5rem; }
.pp-cut-k { width: .4375rem; height: .4375rem; rotate: 45deg; background: var(--tone); }
.pp-cut-k--photo { width: .6875rem; height: .6875rem; }
.pp-offline.is-seen .pp-cut-gap, .pp-offline.is-seen .pp-cut-gap-t { animation: pp-close .5s var(--pp-ease) 1s both; }
.pp-offline.is-seen .pp-cut-dot--data { animation: pp-go 1.3s cubic-bezier(.45, 0, .25, 1) 1.5s both; }
.pp-offline.is-seen .pp-cut-dot--photo { animation: pp-go 1.5s cubic-bezier(.45, 0, .25, 1) 2.3s both; }
/* Letra do sistema bem grande: o diagrama empilha em vez de cortar. Consulta de contêiner porque nela o em segue a
   letra do contêiner (numa @media, não); com a letra normal, 16em fica abaixo da largura de qualquer celular */
.pp-offline > .container { container-type: inline-size; }
@container (max-width: 16em) {
  .pp-offline .pp-cut { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pp-offline .pp-cut-wire { justify-self: stretch; }
}
@keyframes pp-close { to { transform: scaleX(0); opacity: 0; } }
@keyframes pp-go { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.pp-tech { list-style: none; display: flex; flex-wrap: wrap; gap: .375rem 1.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); font-family: var(--font-mono); font-size: .75rem; color: var(--color-muted); }

/* ---------- Convite: faixa final no tom, com o orbe animado da marca ao lado ---------- */
.pp-end {
  --band: color-mix(in srgb, var(--tone-glow) 8%, var(--color-panel-solid));
  padding-block: clamp(4.5rem, 9vw, 8rem) clamp(3rem, 6vw, 4.5rem);
  background: linear-gradient(transparent, var(--band) clamp(64px, 10vw, 128px), var(--band) calc(100% - clamp(40px, 6vw, 80px)), transparent);
}
.pp-end-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr); align-items: center; gap: 3rem; }
.pp-end h2 { font-weight: 300; font-size: var(--fs-closing); line-height: 1.05; letter-spacing: -0.02em; }
.pp-end h2 strong { font-weight: 600; }
.pp-end-text > p { color: var(--color-muted); margin-top: 1rem; font-size: 1.05rem; max-width: 35rem; }
.pp-end .cs-back { margin-top: 2.25rem; }
.pp-orb { position: relative; justify-self: center; width: min(24rem, 30vw); aspect-ratio: 1; }
.pp-orb::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tone-glow) calc(16% * var(--glow-strength)), transparent), transparent); pointer-events: none; }
.pp-orb-canvas { position: absolute; inset: -14%; width: 128%; height: 128%; }
.pp-orb-still { position: absolute; inset: 8%; width: 84%; height: 84%; }
:root[data-theme] .pp-orb:has(.pp-orb-canvas:not([hidden])) .pp-orb-still { visibility: hidden; }

/* ---------- A espinha: só no computador largo, onde a margem esquerda tem espaço ---------- */
@media (min-width: 1100px) {
  .pp-body { --spine-x: calc(max(0px, (100% - var(--max-width)) / 2) + var(--gutter) - 2.75rem); }
  .pp-body::before { content: ""; position: absolute; z-index: 0; left: var(--spine-x); top: 0; bottom: var(--spine-end, 14rem); width: 1px; background: linear-gradient(transparent, color-mix(in srgb, var(--tone) 55%, transparent) 5rem, color-mix(in srgb, var(--tone) 55%, transparent)); pointer-events: none; }
  .pp-body :is(.pp-sec h2, .pp-statement, .pp-end h2) { position: relative; }
  .pp-body :is(.pp-sec h2, .pp-statement, .pp-end h2)::before { content: ""; position: absolute; left: calc(-2.75rem - .34375rem); top: .5em; width: .6875rem; height: .6875rem; rotate: 45deg; border: 1.5px solid var(--tone); background: var(--color-bg); transition: background .5s, box-shadow .5s; }
  .pp-body .is-seen :is(h2, .pp-statement)::before, .pp-body:not(.is-armed) :is(.pp-sec h2, .pp-statement)::before { background: var(--tone); }
  .pp-body .pp-end h2::before { background: var(--tone); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone-glow) 16%, transparent), 0 0 16px color-mix(in srgb, var(--tone-glow) calc(70% * var(--glow-strength)), transparent); }
  .pp-body.is-armed .pp-end:not(.is-seen) h2::before { background: var(--color-bg); box-shadow: none; }
}

/* ---------- Celular e tablet em pé ---------- */
@media (max-width: 860px) {
  .pp-hero { min-height: 0; align-items: start; }
  .pp-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-block: 2rem 2.5rem; }
  .pp-acts { margin-top: 1.5rem; gap: .75rem 1.25rem; }
  .pp-stages { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pp-stage { padding: .75rem 0 .75rem 1.5rem; border-top: 0; border-left: 1px solid var(--color-line); }
  .pp-stage-mark { left: -.3125rem; top: 1.05rem; }
  :is(.of, .ff)[data-stage="1"] ~ .pp-legend .pp-stage--1,
  :is(.of, .ff)[data-stage="2"] ~ .pp-legend .pp-stage--2,
  :is(.of, .ff)[data-stage="3"] ~ .pp-legend .pp-stage--3 { border-left-color: var(--tone); }
  .pp-legend-foot { flex-direction: column; align-items: stretch; }
  .pp-split, .pp-plan-grid, .pp-cols, .pp-end-inner { grid-template-columns: minmax(0, 1fr); }
  .pp-split-head .pp-ticket { max-width: 22rem; }
  .pp-sheet { max-width: 14rem; }
  .pp-feat { grid-template-columns: minmax(0, 1fr); gap: .5rem; padding-block: 1.25rem; }
  .pp-orb { width: min(15rem, 60vw); order: -1; }
  .pp-end-inner { gap: 1.5rem; }
}
/* Celular deitado: o convite volta a ter o texto e o orbe lado a lado, com o orbe menor (em cima, ele sozinho
   ocupava a altura da tela) */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 32rem) {
  .pp-end-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; }
  .pp-orb { width: min(12rem, 45svh); order: 0; }
}
/* Tabela antes/depois em pares empilhados (o nome do item, o "Antes" apagado, o produto em texto cheio) */
@media (max-width: 640px) {
  .pp-vs, .pp-vs tbody, .pp-vs tr, .pp-vs th, .pp-vs td { display: block; }
  .pp-vs thead tr { display: flex; gap: 1.25rem; }
  .pp-vs thead td { display: none; }
  .pp-vs thead th { padding: 0 0 .75rem; }
  .pp-vs thead th:last-child { border-left: 0; }
  .pp-vs tbody tr { padding-block: 1rem; }
  .pp-vs tbody th { padding: 0 0 .5rem; white-space: normal; }
  .pp-vs td { padding: .25rem 0 .25rem 1rem; border-left: 1px solid var(--color-line-strong); background: none !important; }
  .pp-vs td:last-child { margin-top: .5rem; }
  .pp-wire { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 0; }
  .pp-wire-node { grid-template-columns: 2.5rem auto; justify-items: start; align-items: center; text-align: left; column-gap: 1rem; row-gap: 0; }
  .pp-wire-node > :first-child { grid-row: span 2; justify-self: center; }
  .pp-wire-link { justify-items: start; margin: 0; padding: 1.5rem 0 1.5rem 3.5rem; }
  .pp-wire-link::before { left: 1.25rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .pp-wire-link::after { display: none; }
  .pp-cut { grid-template-columns: auto minmax(5rem, 1fr) auto; gap: .75rem; }
  .pp-cut-keys { flex-direction: column; align-items: center; gap: .25rem; }
}

/* O pedido viajando, maior no topo da página do Salão (na home e na vitrine fica com o teto de sempre) */
@container of (min-width: 560px) {
  .pp-demo .of-stage { font-size: min(calc(100cqw / 52), .95rem); }
}
/* O que ele não faz: título de um lado, as frases do outro */
@media (min-width: 861px) {
  .pp-not .container { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
  .pp-not .pp-not-list { margin-top: .5rem; }
}