/* ==========================================================================
   DV Digital — ONYX Experience (home)                         2026-11-07
   Componentes: Campo Ônix (fundo reativo), revelação da marca, Ecossistema DV
   (abas + cena 3D "Camadas de Valor"), narrativa "Do desafio à solução" e
   cena final. Tokens (--onyx-*) ficam no fim do style.css.

   Regras da casa: só preto, branco e cinzas; movimento por transform/opacity;
   sem JS tudo aparece no estado estático (as classes .is-pronto só entram
   depois que o onyx.js montou o componente); prefers-reduced-motion = estado
   final, sem transição.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Campo Ônix — linhas de relevo que reagem ao cursor (canvas atrás do texto)
   -------------------------------------------------------------------------- */
.onyx-campo-secao {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Fallback sem canvas: profundidade só com degradê neutro */
.onyx-campo-secao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 115%, rgba(var(--onyx-campo-rgb), 0.07), transparent 62%);
}

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

.onyx-campo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms var(--onyx-ease);
}

.onyx-campo.is-pronto { opacity: 1; }

/* --------------------------------------------------------------------------
   2. Marca — revelação em fatias sobre os pixels do logo oficial
   O <img> continua no lugar (mesmo tamanho, mesmo alt); só fica transparente
   enquanto o canvas temporário desenha as fatias. Depois, o canvas sai.
   -------------------------------------------------------------------------- */
.header .logo { position: relative; }

.onyx-marca-canvas {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.header .logo.is-revelando img { opacity: 0; }
.header .logo img { transition: opacity 160ms linear; }

/* --------------------------------------------------------------------------
   3. Ecossistema DV — abas + ilustração isométrica por frente (SVG)
   -------------------------------------------------------------------------- */
.onyx-eco-cena { display: none; } /* sem JS: só os cartões */

.onyx-eco-corpo.is-pronto {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 56px;
  align-items: center;
}

.onyx-eco-corpo.is-pronto .onyx-eco-cena {
  display: block;
  position: relative;
}

/* Painéis: todos na mesma célula da grade. A altura é a do maior, então
   trocar de aba não empurra o resto da página (zero deslocamento). */
.onyx-eco-corpo.is-pronto .onyx-eco-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.onyx-eco-corpo.is-pronto .onyx-eco-lista > .card {
  grid-area: 1 / 1;
  transform: none;
}

/* O painel que sai some na hora (sem a transição de 0,3 s do .card), para
   os dois textos nunca aparecerem sobrepostos; o que entra tem animação própria. */
.onyx-eco-corpo.is-pronto .onyx-eco-lista > .card.is-inativo {
  visibility: hidden;
  opacity: 0;
  transition: none;
}

.onyx-eco-corpo.is-pronto .onyx-eco-lista > .card.is-entrando {
  animation: onyx-entra var(--onyx-t-micro) var(--onyx-ease) both;
}

.onyx-eco-corpo.is-pronto .pillar-kicker { display: none; } /* a aba já diz o número e o nome */

.onyx-eco-abas {
  display: grid;
  margin-bottom: 20px;
  border-top: 1px solid var(--border-color);
}

.onyx-eco-aba {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: baseline;
  gap: 2px 12px;
  width: 100%;
  min-height: 44px;
  padding: 16px 4px;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  background: none;
  color: var(--text-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--onyx-t-foco) var(--onyx-ease);
}

.onyx-eco-aba::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--text-color);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--onyx-t-micro) var(--onyx-ease);
}

.onyx-eco-aba:hover,
.onyx-eco-aba[aria-selected="true"] { color: var(--text-color); }

.onyx-eco-aba[aria-selected="true"]::after { transform: scaleX(1); }

.onyx-eco-aba-num {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

.onyx-eco-aba-nome {
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.onyx-eco-aba-desc {
  grid-column: 2;
  font-size: 0.92rem;
}

/* Lista no computador: o nome desliza alguns pixels no hover e fica deslocado na ativa */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .onyx-eco-aba-nome,
  .onyx-eco-aba-desc { transition: transform var(--onyx-t-micro) var(--onyx-ease); }
  .onyx-eco-aba:hover .onyx-eco-aba-nome,
  .onyx-eco-aba:hover .onyx-eco-aba-desc,
  .onyx-eco-aba[aria-selected="true"] .onyx-eco-aba-nome,
  .onyx-eco-aba[aria-selected="true"] .onyx-eco-aba-desc { transform: translateX(6px); }
}

/* Ilustração isométrica (SVG gerado por _fonte/ilustracao-ecossistema.mjs): uma base comum
   e uma cena por frente; a cena ativa vem de data-ativo (onyx.js). Profundidade discreta:
   --onyx-tx/--onyx-ty (cursor, -6..6 e -4..4) deslocam as camadas em velocidades diferentes;
   --onyx-abre (rolagem, 0..1) assenta as peças que flutuam. */
.onyx-palco3d {
  --onyx-abre: 1;
  --onyx-tx: 0;
  --onyx-ty: 0;
  position: relative;
}

.onyx-eco-svg {
  /* tema escuro: superfícies em ônix, arestas e tinta brancas */
  --eco-base-t: #121212;
  --eco-base-e: #0a0a0a;
  --eco-base-d: #0e0e0e;
  --eco-t: #262626;
  --eco-e: #111111;
  --eco-d: #1a1a1a;
  --eco-painel: #1c1c1c;
  --eco-fundo: #040404;
  --eco-linha: rgba(255, 255, 255, 0.09);
  --eco-linha-media: rgba(255, 255, 255, 0.3);
  --eco-forte: rgba(255, 255, 255, 0.86);
  --eco-tinta: #ffffff;
  --eco-sombra: rgba(0, 0, 0, 0.6);
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}

[data-theme="light"] .onyx-eco-svg {
  --eco-base-t: #f3f3f3;
  --eco-base-e: #d9d9d9;
  --eco-base-d: #e6e6e6;
  --eco-t: #ffffff;
  --eco-e: #dcdcdc;
  --eco-d: #ebebeb;
  --eco-painel: #ffffff;
  --eco-fundo: #cfcfcf;
  --eco-linha: rgba(0, 0, 0, 0.08);
  --eco-linha-media: rgba(0, 0, 0, 0.26);
  --eco-forte: rgba(0, 0, 0, 0.82);
  --eco-tinta: #0a0a0a;
  --eco-sombra: rgba(0, 0, 0, 0.07);
}

.onyx-eco-svg path,
.onyx-eco-svg ellipse {
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* faces e volumes */
.eco-base-t { fill: var(--eco-base-t); stroke: var(--eco-linha-media); }
.eco-base-e { fill: var(--eco-base-e); stroke: var(--eco-linha); }
.eco-base-d { fill: var(--eco-base-d); stroke: var(--eco-linha); }
.eco-grade { fill: none; stroke: var(--eco-linha); }
.onyx-eco-svg .t { fill: var(--eco-t); stroke: var(--eco-linha-media); }
.onyx-eco-svg .e { fill: var(--eco-e); stroke: var(--eco-linha-media); }
.onyx-eco-svg .d { fill: var(--eco-d); stroke: var(--eco-linha-media); }
.eco-painel { fill: var(--eco-painel); stroke: var(--eco-linha-media); }
.eco-cartao { fill: var(--eco-t); stroke: var(--eco-linha-media); }
.eco-bandeja { fill: var(--eco-base-t); stroke: var(--eco-linha-media); }
.eco-chip { fill: var(--eco-painel); stroke: var(--eco-forte); }
.eco-corpo { fill: var(--eco-d); stroke: var(--eco-linha-media); }
.eco-tampa { fill: var(--eco-t); stroke: var(--eco-forte); }
.eco-tampa-meio { fill: var(--eco-t); stroke: var(--eco-linha-media); }
.eco-anel { fill: none; stroke: var(--eco-linha-media); }
.eco-boca { fill: var(--eco-fundo); stroke: var(--eco-forte); }
.eco-boca-fundo { fill: none; stroke: var(--eco-linha-media); }
.eco-sombra { fill: var(--eco-sombra); stroke: none; }

/* glifos desenhados nas faces */
.eco-g { fill: none; stroke: var(--eco-forte); }
.eco-gf { fill: var(--eco-forte); stroke: none; }
.eco-gs { fill: var(--eco-linha-media); stroke: none; }
.eco-gs-linha { fill: none; stroke: var(--eco-linha-media); }
.eco-hachura { fill: var(--eco-linha); stroke: var(--eco-linha-media); }
.eco-realce { fill: var(--eco-tinta); stroke: none; }
.eco-cursor { fill: var(--eco-painel); stroke: var(--eco-tinta); }
.onyx-eco-svg .eco-check { fill: none; stroke: var(--eco-painel); stroke-width: 1.5; stroke-linecap: round; }
.eco-tendencia { fill: none; stroke: var(--eco-forte); stroke-dasharray: 3 3; }
.eco-orbita { fill: none; stroke: var(--eco-forte); stroke-dasharray: 2 5; }
.eco-seta,
.eco-no { fill: var(--eco-forte); stroke: none; }
.eco-marca { fill: var(--eco-linha-media); stroke: none; transition: fill var(--onyx-t-micro) var(--onyx-ease); }

/* fluxos: trilho fino + pontos que correm por ele */
.eco-trilho { fill: none; stroke: var(--eco-linha-media); }

.onyx-eco-svg .eco-fluxo {
  fill: none;
  stroke: var(--eco-tinta);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 0 9;
  vector-effect: none;
}

.eco-pulso { fill: none; stroke: var(--eco-forte); opacity: 0; transform-box: fill-box; transform-origin: center; }
.eco-brilho { transform-box: fill-box; transform-origin: center; }

/* camadas de profundidade (cursor e rolagem) */
.eco-px0,
.eco-px1,
.eco-flutua { transition: transform 450ms var(--onyx-ease); }
.eco-px0 { transform: translate(calc(var(--onyx-tx) * 0.5px), calc(var(--onyx-ty) * -0.4px)); }
.eco-px1 { transform: translate(calc(var(--onyx-tx) * 1.2px), calc(var(--onyx-ty) * -0.9px)); }
.eco-flutua { transform: translate(calc(var(--onyx-tx) * 1.1px), calc(var(--onyx-ty) * -0.8px + (1 - var(--onyx-abre)) * 16px)); }

/* troca de cena: as peças da cena que sai somem rápido; as da que entra sobem em sequência */
.eco-peca {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 180ms var(--onyx-ease), transform 0s linear 180ms;
}

.onyx-eco-cena[data-ativo="atrair"] [data-eco-cena="atrair"] .eco-peca,
.onyx-eco-cena[data-ativo="converter"] [data-eco-cena="converter"] .eco-peca,
.onyx-eco-cena[data-ativo="organizar"] [data-eco-cena="organizar"] .eco-peca,
.onyx-eco-cena[data-ativo="automatizar"] [data-eco-cena="automatizar"] .eco-peca {
  opacity: 1;
  transform: none;
  transition:
    opacity 420ms var(--onyx-ease) calc(140ms + var(--d, 0) * 55ms),
    transform 640ms var(--onyx-ease) calc(140ms + var(--d, 0) * 55ms);
}

.onyx-eco-cena[data-ativo="atrair"] .eco-marca[data-eco="atrair"],
.onyx-eco-cena[data-ativo="converter"] .eco-marca[data-eco="converter"],
.onyx-eco-cena[data-ativo="organizar"] .eco-marca[data-eco="organizar"],
.onyx-eco-cena[data-ativo="automatizar"] .eco-marca[data-eco="automatizar"] { fill: var(--eco-tinta); }

/* movimento contínuo só com a cena na tela, e por poucos ciclos (depois para) */
.onyx-eco-cena.is-visivel[data-ativo="atrair"] [data-eco-cena="atrair"] .eco-fluxo,
.onyx-eco-cena.is-visivel[data-ativo="converter"] [data-eco-cena="converter"] .eco-fluxo,
.onyx-eco-cena.is-visivel[data-ativo="organizar"] [data-eco-cena="organizar"] .eco-fluxo,
.onyx-eco-cena.is-visivel[data-ativo="automatizar"] [data-eco-cena="automatizar"] .eco-fluxo {
  animation: eco-flui 1.5s linear 5 both;
}

.onyx-eco-cena.is-visivel[data-ativo] [data-eco-cena] .eco-fluxo.eco-fluxo--volta { animation-direction: reverse; }

.onyx-eco-cena.is-visivel[data-ativo="converter"] .eco-pulso { animation: eco-pulso 1.8s var(--onyx-ease) 0.7s 3; }
.onyx-eco-cena.is-visivel[data-ativo="automatizar"] .eco-brilho { animation: eco-brilho 1.6s var(--onyx-ease-io) 0.6s 3; }

@keyframes eco-flui {
  from { stroke-dashoffset: 18; }
  to { stroke-dashoffset: 0; }
}

@keyframes eco-pulso {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

@keyframes eco-brilho {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

@keyframes onyx-entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.onyx-eco-legenda {
  position: absolute;
  left: 0;
  bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.onyx-eco-legenda-num {
  color: var(--text-color);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) {
  .onyx-eco-corpo.is-pronto {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .onyx-palco3d { width: 100%; max-width: 560px; margin: 0 auto; }
  .onyx-eco-legenda { display: none; } /* as abas logo abaixo já mostram a etapa ativa */
  .onyx-eco-abas {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-top: 0;
  }
  .onyx-eco-aba {
    grid-template-columns: 1fr;
    align-content: center;
    min-height: 64px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
  }
  .onyx-eco-aba::after { display: none; }
  .onyx-eco-aba[aria-selected="true"] {
    border-color: var(--text-color);
    background: var(--card-hover-bg);
  }
  .onyx-eco-aba-desc { display: none; }
  .onyx-eco-aba-nome { font-size: 1.15rem; }
  /* Aqui a troca é por toque (não há hover que desloque o layout sozinho):
     o painel tem a altura do próprio conteúdo, sem espaço sobrando. */
  .onyx-eco-corpo.is-pronto .onyx-eco-lista > .card.is-inativo { display: none; }
}

/* --------------------------------------------------------------------------
   4. Narrativa "Do desafio à solução"
   -------------------------------------------------------------------------- */
.onyx-historia { margin: 56px 0 64px; }

.onyx-historia-passos {
  display: grid;
  gap: 28px;
  list-style: none;
}

.onyx-historia-passo {
  padding: 4px 0 4px 24px;
  border-left: 1px solid var(--border-color);
  transition: border-color var(--onyx-t-micro) var(--onyx-ease);
}

.onyx-historia-kicker {
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.onyx-historia-passo h3 {
  margin-bottom: 12px;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  transition: color var(--onyx-t-micro) var(--onyx-ease);
}

.onyx-historia-passo p:last-child { font-size: 1.02rem; }

.onyx-historia-lado { margin-top: 36px; }

/* Celular e tablet: palco quadrado (linhas da tabela mais altas) e letra mínima maior */
@media (max-width: 1024px) {
  .onyx-historia-palco {
    aspect-ratio: 1 / 1;
    font-size: clamp(12px, 3.4cqw, 15px);
  }
}

/* Palco ilustrativo: 5:4, coordenadas em unidades do próprio palco (cqw/cqh) */
.onyx-historia-palco {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  container-type: size;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: radial-gradient(120% 90% at 28% 0%, var(--onyx-2), var(--onyx-0) 72%);
  color: var(--onyx-tinta);
  font-size: clamp(10px, 2.4cqw, 14px);
  line-height: 1.2;
}

[data-theme="light"] .onyx-historia-palco {
  background: radial-gradient(120% 90% at 28% 0%, #ffffff, var(--onyx-1) 72%);
}

.onyx-historia-palco > * {
  transition:
    transform var(--onyx-t-cena) var(--onyx-ease),
    opacity var(--onyx-t-micro) var(--onyx-ease),
    left var(--onyx-t-cena) var(--onyx-ease),
    width var(--onyx-t-cena) var(--onyx-ease),
    border-radius var(--onyx-t-cena) var(--onyx-ease);
}

/* Cena 1: quatro ilhas em grade 2×2, cada uma funcionando sozinha (ponto cheio),
   e a única ligação entre elas passa por um ponto central "à mão" (fios tracejados).
   Grade: colunas 6–40 e 60–94 cqw; linhas 8–42 e 58–92 cqh; centro em 50/50. */
.onyx-hp-fios {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--onyx-aresta-forte);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.onyx-hp-fios path { vector-effect: non-scaling-stroke; }

.onyx-hp-ilha {
  --ix: 6cqw;
  --iy: 8cqh;
  position: absolute;
  left: var(--ix);
  top: var(--iy);
  width: 34cqw;
  height: 34cqh;
  display: grid;
  gap: 0.45em;
  /* o chip da peça ocupa o topo da ilha (4 cqh + altura do chip) */
  padding: calc(6.2cqh + 2.1em + 2px) 3cqw 3.2cqh;
  border: 1px solid var(--onyx-aresta-media);
  border-radius: 10px;
  background: var(--onyx-1);
  opacity: 0;
  transform: scale(0.96);
}

/* ponto cheio: a peça funciona (mesma linguagem do fluxo da cena 4) */
.onyx-hp-ilha::after {
  content: "";
  position: absolute;
  top: calc(4cqh + 1.05em + 1px - 0.25em);
  right: 3cqw;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--onyx-tinta);
}

.onyx-hp-ilha[data-ilha="formulario"] { --ix: 60cqw; }
.onyx-hp-ilha[data-ilha="whatsapp"] { --iy: 58cqh; }
.onyx-hp-ilha[data-ilha="planilha"] { --ix: 60cqw; --iy: 58cqh; }

.onyx-historia-palco[data-cena="desafio"] .onyx-hp-ilha { opacity: 1; transform: none; }

/* conteúdo esquemático de cada ilha */
.onyx-hp-ilha[data-ilha="anuncio"] { grid-template-rows: minmax(0, 1fr) auto; }

.onyx-hp-il-img {
  border: 1px solid var(--onyx-aresta);
  border-radius: 5px;
  background: repeating-linear-gradient(135deg, var(--onyx-aresta) 0 1px, transparent 1px 8px);
}

.onyx-hp-il-traco { height: 0.45em; width: 62%; border-radius: 2px; background: var(--onyx-aresta-media); }

.onyx-hp-ilha[data-ilha="formulario"],
.onyx-hp-ilha[data-ilha="whatsapp"] { grid-template-rows: repeat(3, minmax(0, 1fr)); }

.onyx-hp-il-campo {
  border: 1px solid var(--onyx-aresta-media);
  border-radius: 4px;
  background: linear-gradient(var(--onyx-aresta-media), var(--onyx-aresta-media)) 0.6em 50% / 38% 0.3em no-repeat;
}

.onyx-hp-il-botao { width: 46%; border-radius: 4px; background: var(--onyx-tinta); opacity: 0.85; }

.onyx-hp-il-msg {
  width: 66%;
  border: 1px solid var(--onyx-aresta-media);
  border-radius: 0.7em 0.7em 0.7em 0.2em;
}

.onyx-hp-il-msg--eu {
  justify-self: end;
  width: 54%;
  border-color: transparent;
  border-radius: 0.7em 0.7em 0.2em 0.7em;
  background: var(--onyx-aresta-media);
}

.onyx-hp-il-msg--curta { width: 40%; }

.onyx-hp-il-grade {
  border: 1px solid var(--onyx-aresta-media);
  border-radius: 4px;
  background:
    linear-gradient(var(--onyx-aresta), var(--onyx-aresta)) 0 0 / 100% 25% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 calc(25% - 1px), var(--onyx-aresta) calc(25% - 1px) 25%),
    repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 1px), var(--onyx-aresta) calc(33.333% - 1px) 33.333%);
}

/* o ponto central: a ligação depende de alguém */
.onyx-hp-nota {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  padding: 0.3em 0.75em;
  border: 1px dashed var(--onyx-aresta-forte);
  border-radius: 999px;
  background: var(--onyx-0);
  font-size: max(0.85em, 10.5px);
  font-style: italic;
  white-space: nowrap;
  color: var(--onyx-tinta-suave);
  transform: translate(-50%, -50%);
}

.onyx-historia-palco:not([data-cena="desafio"]) .onyx-hp-fios,
.onyx-historia-palco:not([data-cena="desafio"]) .onyx-hp-nota { opacity: 0; }

/* Chips: as mesmas 4 peças atravessam as cenas */
.onyx-hp-chip {
  --x: 0;
  --y: 0;
  --r: 0deg;
  --s: 1;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  padding: 0.45em 0.95em;
  border: 1px solid var(--onyx-aresta-media);
  border-radius: 999px;
  background: var(--onyx-1);
  font-weight: 600;
  white-space: nowrap;
  transform-origin: left center;
  transform: translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqh)) rotate(var(--r)) scale(var(--s));
}

/* cena 1: cada chip é o cabeçalho da sua ilha (3 cqw e 4 cqh para dentro) */
.onyx-hp-chip[data-chip="anuncio"] { --x: 9; --y: 12; }
.onyx-hp-chip[data-chip="formulario"] { --x: 63; --y: 12; }
.onyx-hp-chip[data-chip="whatsapp"] { --x: 9; --y: 62; }
.onyx-hp-chip[data-chip="planilha"] { --x: 63; --y: 62; }

/* Cena 2: a página aparece e o anúncio liga direto nela; as outras peças
   esperam alinhadas à direita, menores e apagadas */
.onyx-historia-palco[data-cena="pagina"] .onyx-hp-chip { --x: 77.5; --s: 0.8; opacity: 0.32; }
.onyx-historia-palco[data-cena="pagina"] .onyx-hp-chip[data-chip="anuncio"] { --x: 2; --y: 47; --s: 1; opacity: 1; }
.onyx-historia-palco[data-cena="pagina"] .onyx-hp-chip[data-chip="formulario"] { --y: 36; }
.onyx-historia-palco[data-cena="pagina"] .onyx-hp-chip[data-chip="whatsapp"] { --y: 48; }
.onyx-historia-palco[data-cena="pagina"] .onyx-hp-chip[data-chip="planilha"] { --y: 60; }

/* elo do anúncio até a página: do fim do chip (15.5 cqw) à borda da página */
.onyx-hp-elo {
  position: absolute;
  left: 15.5cqw;
  top: 50cqh;
  width: 8.5cqw;
  height: 1px;
  background: var(--onyx-aresta-forte);
  transform: scaleX(0);
  transform-origin: left center;
}

.onyx-historia-palco[data-cena="pagina"] .onyx-hp-elo { transform: scaleX(1); }
.onyx-historia-palco[data-cena="pagina"][data-modo="celular"] .onyx-hp-elo { width: 21.5cqw; }

/* Celular e tablet: o chip do anúncio é mais largo em proporção ao palco;
   reduzido para o elo continuar visível */
@media (max-width: 1024px) {
  .onyx-historia-palco[data-cena="pagina"] .onyx-hp-chip[data-chip="anuncio"] { --x: 1.5; --s: 0.84; }
  .onyx-hp-elo { left: 19.5cqw; width: 4.5cqw; }
  .onyx-historia-palco[data-cena="pagina"][data-modo="celular"] .onyx-hp-elo { width: 17.5cqw; }
}

.onyx-hp-pagina {
  position: absolute;
  left: 24cqw;
  top: 9cqh;
  width: 52cqw;
  height: 82cqh;
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
  gap: 2cqh;
  padding: 3cqh 2.6cqw;
  container-type: inline-size;
  border: 1px solid var(--onyx-aresta-media);
  border-radius: 10px;
  background: var(--onyx-1);
  opacity: 0;
  transform: scale(0.96);
  overflow: hidden;
}

.onyx-historia-palco[data-cena="pagina"] .onyx-hp-pagina { opacity: 1; transform: none; }

.onyx-historia-palco[data-modo="celular"] .onyx-hp-pagina {
  left: 37cqw;
  width: 26cqw;
  border-radius: 18px;
}

.onyx-hp-pg-barra {
  height: 0.5em;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--onyx-aresta-media) 0 22%, transparent 22% 64%, var(--onyx-aresta) 64%);
}

.onyx-hp-pg-titulo { height: 1.15em; width: 84%; border-radius: 2px; background: var(--onyx-tinta); opacity: 0.88; }
.onyx-hp-pg-titulo--curto { width: 58%; }
.onyx-hp-pg-texto { height: 0.45em; width: 72%; border-radius: 2px; background: var(--onyx-aresta-media); }

.onyx-hp-pg-cta {
  justify-self: start;
  padding: 0.55em 1em;
  border-radius: 4px;
  background: var(--onyx-tinta);
  color: var(--onyx-0);
  font-size: 0.82em;
  font-weight: 700;
  white-space: nowrap;
  transition: box-shadow var(--onyx-t-cena) var(--onyx-ease);
}

.onyx-historia-palco[data-cena="pagina"] .onyx-hp-pg-cta { box-shadow: 0 0 0 0.45em rgba(var(--onyx-campo-rgb), 0.12); }

/* área de imagem da página (hachura neutra, como num esboço de layout) */
.onyx-hp-pg-visual {
  min-height: 2em;
  border: 1px solid var(--onyx-aresta);
  border-radius: 6px;
  background: repeating-linear-gradient(135deg, var(--onyx-aresta) 0 1px, transparent 1px 9px);
}

.onyx-hp-pg-provas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6em;
  min-height: 4.4em;
}

.onyx-hp-pg-provas > span {
  border: 1px solid var(--onyx-aresta);
  border-radius: 4px;
  background: linear-gradient(var(--onyx-aresta-media), var(--onyx-aresta-media)) 0.6em 0.7em / 50% 0.3em no-repeat;
}

/* Página no celular: a mesma página reorganizada em uma coluna */
@container (max-width: 220px) {
  .onyx-hp-pg-titulo { width: 92%; }
  .onyx-hp-pg-texto { width: 86%; }
  .onyx-hp-pg-provas { grid-template-columns: 1fr; grid-auto-rows: 2.6em; }
  .onyx-hp-pg-provas > span:nth-child(n + 3) { display: none; }
}

/* Cenas 3 e 4: registros */
.onyx-hp-tabela {
  position: absolute;
  left: 5cqw;
  top: 6cqh;
  width: 90cqw;
  height: 53cqh;
  overflow: hidden;
  border: 1px solid var(--onyx-aresta-media);
  border-radius: 10px;
  background: var(--onyx-1);
  opacity: 0;
  transform: translateY(2cqh);
}

.onyx-hp-cab,
.onyx-hp-linha {
  display: grid;
  grid-template-columns: 34% 22% 26% 18%;
  align-items: center;
}

.onyx-hp-cab {
  height: 9cqh;
  border-bottom: 1px solid var(--onyx-aresta-media);
  font-size: 0.72em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--onyx-tinta-suave);
}

.onyx-hp-cab > span:first-child { padding-left: 3cqw; }

.onyx-hp-linha {
  height: 11cqh;
  border-bottom: 1px solid var(--onyx-aresta);
  opacity: 0;
  transform: translateX(-2cqw);
  transition: opacity var(--onyx-t-micro) var(--onyx-ease), transform var(--onyx-t-micro) var(--onyx-ease), background-color var(--onyx-t-micro) var(--onyx-ease);
}

.onyx-hp-linha:last-child { border-bottom: 0; }
.onyx-hp-nome { display: block; width: 58%; height: 0.5em; margin-left: 3cqw; border-radius: 2px; background: var(--onyx-aresta-media); }
.onyx-hp-etapa { font-size: 0.85em; }

.onyx-hp-av {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border: 1px solid var(--onyx-aresta-media);
  border-radius: 50%;
  font-size: 0.75em;
  font-weight: 700;
}

/* Registros: tabela no meio do palco (22–75 cqh). Rotina: sobe para abrir espaço
   ao fluxo (10–63 cqh); tabela e chips sobem juntos, os mesmos 12 cqh. */
.onyx-historia-palco[data-cena="registros"] .onyx-hp-tabela { opacity: 1; transform: translateY(16cqh); }
.onyx-historia-palco[data-cena="rotina"] .onyx-hp-tabela { opacity: 1; transform: translateY(4cqh); }

.onyx-historia-palco[data-cena="registros"] .onyx-hp-linha,
.onyx-historia-palco[data-cena="rotina"] .onyx-hp-linha { opacity: 1; transform: none; }

.onyx-historia-palco[data-cena="registros"] .onyx-hp-linha:nth-child(3) { transition-delay: 80ms; }
.onyx-historia-palco[data-cena="registros"] .onyx-hp-linha:nth-child(4) { transition-delay: 160ms; }
.onyx-historia-palco[data-cena="registros"] .onyx-hp-linha:nth-child(5) { transition-delay: 240ms; }

/* Os chips pousam na coluna "Origem", cada um na sua linha */
.onyx-historia-palco[data-cena="registros"] .onyx-hp-chip,
.onyx-historia-palco[data-cena="rotina"] .onyx-hp-chip { --r: 0deg; --s: 0.8; --x: 36; opacity: 1; }

.onyx-historia-palco[data-cena="registros"] .onyx-hp-chip[data-chip="anuncio"] { --y: 33.3; }
.onyx-historia-palco[data-cena="registros"] .onyx-hp-chip[data-chip="formulario"] { --y: 44.3; }
.onyx-historia-palco[data-cena="registros"] .onyx-hp-chip[data-chip="whatsapp"] { --y: 55.3; }
.onyx-historia-palco[data-cena="registros"] .onyx-hp-chip[data-chip="planilha"] { --y: 66.3; }
.onyx-historia-palco[data-cena="rotina"] .onyx-hp-chip[data-chip="anuncio"] { --y: 21.3; }
.onyx-historia-palco[data-cena="rotina"] .onyx-hp-chip[data-chip="formulario"] { --y: 32.3; }
.onyx-historia-palco[data-cena="rotina"] .onyx-hp-chip[data-chip="whatsapp"] { --y: 43.3; }
.onyx-historia-palco[data-cena="rotina"] .onyx-hp-chip[data-chip="planilha"] { --y: 54.3; }

/* Celular e tablet: colunas redistribuídas (Origem mais larga) e chips maiores,
   que continuam cabendo na coluna */
@media (max-width: 1024px) {
  .onyx-hp-cab,
  .onyx-hp-linha { grid-template-columns: 30% 26% 26% 18%; }
  .onyx-hp-cab { font-size: 0.8em; }
  .onyx-historia-palco[data-cena="registros"] .onyx-hp-chip,
  .onyx-historia-palco[data-cena="rotina"] .onyx-hp-chip { --s: 0.86; --x: 32.5; }
}

/* Cena 4: a rotina (simulação no botão "Simular um contato") */
.onyx-hp-fluxo {
  position: absolute;
  left: 5cqw;
  top: 72cqh;
  width: 90cqw;
  height: 16cqh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4cqw;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  transform: translateY(3cqh);
}

.onyx-historia-palco[data-cena="rotina"] .onyx-hp-fluxo { opacity: 1; transform: none; }

.onyx-hp-fluxo li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.6em 0.7em;
  border: 1px solid var(--onyx-aresta);
  border-radius: 8px;
  background: var(--onyx-1);
  font-size: 0.8em;
  line-height: 1.25;
  color: var(--onyx-tinta-suave);
  transition: color var(--onyx-t-micro) var(--onyx-ease), border-color var(--onyx-t-micro) var(--onyx-ease);
}

/* Estado por forma, não só por cor: círculo vazio = pendente, cheio = feito */
.onyx-hp-fluxo li::before {
  content: "";
  flex: none;
  width: 0.9em;
  height: 0.9em;
  border: 1px solid var(--onyx-aresta-media);
  border-radius: 50%;
  transition: background-color var(--onyx-t-micro) var(--onyx-ease), border-color var(--onyx-t-micro) var(--onyx-ease);
}

.onyx-hp-fluxo li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 2.4cqw;
  height: 1px;
  background: var(--onyx-aresta-media);
}

.onyx-hp-fluxo li.is-ok {
  color: var(--onyx-tinta);
  border-color: var(--onyx-aresta-forte);
}

.onyx-hp-fluxo li.is-ok::before {
  background: var(--onyx-tinta);
  border-color: var(--onyx-tinta);
}

.onyx-hp-aviso {
  position: absolute;
  right: 5cqw;
  top: 64.4cqh; /* entre a tabela (termina em 63) e o fluxo (começa em 72) */
  z-index: 4;
  padding: 0.5em 0.9em;
  border-radius: 6px;
  background: var(--onyx-tinta);
  color: var(--onyx-0);
  font-size: 0.8em;
  font-weight: 700;
  opacity: 0;
  transform: translateY(-1.5cqh);
}

/* Celular e tablet: fluxo em grade 2×2, cada passo numa linha só (letra legível) */
@media (max-width: 1024px) {
  .onyx-hp-fluxo {
    height: 22cqh;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6cqh 2.4cqw;
  }
  .onyx-hp-fluxo li { font-size: 0.85em; white-space: nowrap; }
  .onyx-hp-fluxo li:nth-child(2)::after { display: none; }
}

.onyx-historia-palco.is-simulado .onyx-hp-aviso { opacity: 1; transform: none; }
.onyx-historia-palco.is-simulado .onyx-hp-linha--nova { background: rgba(var(--onyx-campo-rgb), 0.08); }

/* Controles (fora do palco, porque o palco é aria-hidden) */
.onyx-historia-controles {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.onyx-historia-controles[hidden] { display: none; }

.onyx-historia-nav,
.onyx-historia-acao {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.onyx-historia-nav button,
.onyx-historia-acao button {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color var(--onyx-t-foco) var(--onyx-ease), border-color var(--onyx-t-foco) var(--onyx-ease), background-color var(--onyx-t-foco) var(--onyx-ease);
}

.onyx-historia-nav button span { margin-left: 4px; }

.onyx-historia-nav button:hover,
.onyx-historia-acao button:hover { color: var(--text-color); border-color: var(--text-muted); }

.onyx-historia-nav button[aria-current="step"],
.onyx-historia-acao button[aria-pressed="true"] {
  color: var(--text-color);
  border-color: var(--text-color);
}

.onyx-historia-acao button[data-onyx-simular] {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 600;
}

.onyx-historia-acao button[aria-disabled="true"] { opacity: 0.6; cursor: progress; }

.onyx-historia:not([data-cena="pagina"]) [data-acao-de="pagina"],
.onyx-historia:not([data-cena="rotina"]) [data-acao-de="rotina"] { display: none; }

.onyx-historia-rotulo {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Computador: texto à esquerda, palco preso ao lado enquanto as etapas passam.
   Não há captura da rolagem: é position: sticky, e a página rola normalmente. */
@media (min-width: 1025px) {
  .onyx-historia.is-pronto {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
  }
  .onyx-historia.is-pronto .onyx-historia-passos { gap: 0; }
  .onyx-historia.is-pronto .onyx-historia-passo {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .onyx-historia.is-pronto .onyx-historia-passo h3 { color: var(--text-muted); }
  .onyx-historia.is-pronto .onyx-historia-passo.is-ativo { border-left-color: var(--text-color); }
  .onyx-historia.is-pronto .onyx-historia-passo.is-ativo h3 { color: var(--text-color); }
  /* Palco + controles cabem inteiros na tela mesmo em notebook baixo:
     altura do palco ≤ 100vh − cabeçalho (104) − controles (~150) − folga;
     largura = altura × 5/4 */
  .onyx-historia.is-pronto .onyx-historia-lado {
    position: sticky;
    top: max(104px, calc(50vh - 290px));
    width: 100%;
    max-width: max(400px, calc((100vh - 270px) * 1.25));
    justify-self: center;
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   5. Cena final: ponto de partida
   -------------------------------------------------------------------------- */
.onyx-partida {
  max-width: 980px;
  margin: 72px auto 0;
  text-align: center;
}

.onyx-partida-titulo {
  margin-bottom: 12px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.onyx-partida-texto {
  max-width: 640px;
  margin: 0 auto 28px;
}

.onyx-partida-opcoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  text-align: left;
}

.onyx-partida-opcao {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 22px 52px 22px 22px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--card-bg);
  transition: border-color var(--onyx-t-foco) var(--onyx-ease), transform var(--onyx-t-micro) var(--onyx-ease), background-color var(--onyx-t-foco) var(--onyx-ease);
}

.onyx-partida-opcao::after {
  content: "→";
  position: absolute;
  right: 22px;
  top: 20px;
  color: var(--text-muted);
  transition: transform var(--onyx-t-micro) var(--onyx-ease), color var(--onyx-t-foco) var(--onyx-ease);
}

.onyx-partida-opcao strong { font-size: 1.12rem; color: var(--text-color); }
.onyx-partida-opcao span { font-size: 0.95rem; color: var(--text-muted); }

.onyx-partida-opcao:hover {
  opacity: 1;
  border-color: var(--text-color);
  background: var(--card-hover-bg);
  transform: translateY(-3px);
}

.onyx-partida-opcao:hover::after,
.onyx-partida-opcao:focus-visible::after {
  color: var(--text-color);
  transform: translateX(4px);
}

.onyx-partida-mais { margin-top: 22px; font-size: 1rem; }
.onyx-partida-mais a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 820px) {
  .onyx-partida-opcoes { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   6. Sem suporte a container queries (navegadores antigos): o palco da
      narrativa sai; o texto das etapas continua completo.
   -------------------------------------------------------------------------- */
@supports not (container-type: size) {
  .onyx-historia-palco,
  .onyx-historia-controles { display: none !important; }
}

/* --------------------------------------------------------------------------
   7. Movimento reduzido: estados finais, trocas instantâneas
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .onyx-campo,
  .eco-px0,
  .eco-px1,
  .eco-flutua,
  .eco-peca,
  .eco-marca,
  .onyx-eco-aba,
  .onyx-eco-aba::after,
  .onyx-eco-aba-nome,
  .onyx-eco-aba-desc,
  .onyx-historia-palco > *,
  .onyx-hp-linha,
  .onyx-hp-fluxo li,
  .onyx-hp-fluxo li::before,
  .onyx-hp-pg-cta,
  .onyx-partida-opcao,
  .onyx-partida-opcao::after { transition: none !important; }
  .onyx-eco-corpo.is-pronto .onyx-eco-lista > .card.is-entrando,
  .eco-fluxo,
  .eco-pulso,
  .eco-brilho { animation: none !important; }
  .onyx-partida-opcao:hover { transform: none; }
}