/* PioTech — apresentação "Do núcleo ao sistema" (usa os tokens de site.css) */

html:has(body.deck) { scroll-padding-top: 0; scroll-snap-type: y proximity; }
.deck { --topo: 72px; }

/* Cabeçalho fixo da apresentação */
.deck__topo { position: fixed; inset: 0 0 auto 0; background: var(--cal); backdrop-filter: none; }
.deck__estado { display: flex; align-items: baseline; gap: 18px; font-family: var(--f-mono); font-size: 0.8rem; color: var(--concreto); }
.deck__titulo { letter-spacing: 0.04em; }
.deck__contador { font-weight: 500; color: var(--tinta); font-variant-numeric: tabular-nums; }
.deck__progresso { height: 3px; background: transparent; }
.deck__progresso span { display: block; height: 100%; background: var(--ipe); transform-origin: left; transform: scaleX(0); transition: transform .35s ease; }

/* Navegação */
.deck__nav { position: fixed; right: clamp(12px, 2.4vw, 28px); bottom: clamp(12px, 2.4vw, 28px); z-index: 12; display: grid; gap: 8px; }
.deck__botao {
  width: 48px; height: 48px; display: grid; place-items: center;
  font: 600 1.15rem/1 var(--f-texto); color: var(--cobalto);
  background: var(--branco); border: 2px solid var(--cobalto); border-radius: 2px; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.deck__botao:hover { background: var(--cobalto); color: var(--branco); }
.deck__botao:disabled { opacity: .35; cursor: default; background: var(--branco); color: var(--cobalto); }

/* Cenas */
.cena {
  min-height: 100svh;
  display: grid; align-content: center; gap: clamp(24px, 4vh, 44px);
  padding-block: calc(var(--topo) + clamp(28px, 6vh, 64px)) clamp(48px, 8vh, 88px);
  border-top: 1px solid var(--linha);
  scroll-snap-align: start;
}
.cena--capa { border-top: 0; }
.cena__grade { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
.cena__grade--capa { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
.cena__grade--lado { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
.cena__texto, .cena__cabeca { display: grid; gap: 22px; align-content: start; }
.cena__cabeca--larga { max-width: 900px; margin-bottom: clamp(28px, 5vh, 52px); }
.cena h1 { font-size: min(clamp(2.3rem, 1.1rem + 4vw, 4.6rem), 7.4vh); }
.cena h2 { font-size: min(clamp(1.9rem, 1.1rem + 2.2vw, 3.1rem), 5.6vh); }
.cena--mapa h2 { font-size: clamp(1.7rem, 1rem + 1.8vw, 2.5rem); }
.cena__lead { font-size: clamp(1.06rem, 1rem + 0.35vw, 1.25rem); color: var(--concreto); max-width: 58ch; }
.cena__dica { font-family: var(--f-mono); font-size: 0.8rem; color: var(--concreto); }
.tecla { display: inline-block; min-width: 26px; padding: 2px 7px; border: 1px solid var(--linha); border-bottom-width: 2px; background: var(--branco); text-align: center; color: var(--tinta); }
.cena__pronto {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
}
.cena__pronto span {
  font-family: var(--f-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tinta); background: var(--ipe); padding: 4px 10px;
}

/* Variações de fundo */
.cena--escura { background: var(--tinta); color: var(--branco); border-top: 0; }
.cena--escura .rotulo { color: var(--ipe); }
.cena--escura .cena__lead { color: rgb(255 255 255 / .78); }
.cena--azul { background: var(--cobalto); color: var(--branco); border-top: 0; }
.cena--azul .rotulo { color: var(--ipe); }

/* Azulejos */
.azulejos { aspect-ratio: 1; background: var(--cobalto); overflow: hidden; }
.azulejos svg { width: 100%; height: 100%; }
.azulejos .modulo { cursor: pointer; transform-box: view-box; transform-origin: 24px 24px; transition: transform .45s cubic-bezier(.3, .7, .2, 1); }
.azulejos--claro { background: var(--cobalto-fundo); }

/* 02 Problema */
.contrastes { display: grid; gap: 0; border-top: 2px solid var(--tinta); }
.contrastes li { display: grid; gap: 8px; padding-block: clamp(18px, 3vh, 28px); border-bottom: 1px solid var(--linha); }
.contrastes h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
.contrastes p { color: var(--concreto); max-width: 60ch; }

/* 03 Caminho inverso */
.trilhas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.trilha { display: grid; gap: 22px; align-content: start; padding: clamp(24px, 3.4vw, 40px); border: 1px solid var(--linha); background: var(--branco); }
.trilha__nome { font-family: var(--f-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--concreto); }
.trilha__passos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; counter-reset: passo; }
.trilha__passos li {
  counter-increment: passo;
  font-family: var(--f-display); font-stretch: 125%; font-weight: 680; letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); line-height: 1.1;
}
.trilha__passos li + li::before { content: "→"; margin-right: 10px; font-family: var(--f-texto); font-weight: 400; color: var(--concreto); }
.trilha__nota { color: var(--concreto); }
.trilha--comum .trilha__passos li { color: var(--concreto); }
.trilha--comum .trilha__passos li:last-child { font-size: clamp(1rem, .9rem + .5vw, 1.35rem); font-weight: 560; }
.trilha--piotech { background: var(--cobalto); border-color: var(--cobalto); color: var(--branco); }
.trilha--piotech .trilha__nome { color: var(--ipe); }
.trilha--piotech .trilha__passos li + li::before { color: var(--ipe); }
.trilha--piotech .trilha__nota { color: rgb(255 255 255 / .86); }

/* 04 Mapa da arquitetura */
.cena--mapa { gap: 0; padding-block: calc(var(--topo) + clamp(20px, 3.5vh, 40px)) clamp(24px, 4vh, 48px); }
.cena--mapa .cena__cabeca--larga { max-width: none; gap: 12px; margin-bottom: clamp(14px, 2.4vh, 26px); }
.mapa {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-areas:
    ". pessoas pessoas ."
    ". borda borda ."
    "conexoes servidor servidor git"
    "conexoes servidor servidor modelos"
    ". canais canais .";
  gap: clamp(12px, 2.2vh, 26px) clamp(28px, 4vw, 56px);
}
.mapa__fios { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.mapa__fios path { fill: none; stroke-width: 2; stroke-dasharray: 6 6; }
.mapa__fios .fio--conexao { stroke: var(--ipe); }
.mapa__fios .fio--interno { stroke: var(--cobalto); }
.mapa__fios .fio--acesso { stroke: var(--tinta); stroke-dasharray: none; }
.js .mapa__fios path { animation: fluxo 1.4s linear infinite; }
@keyframes fluxo { to { stroke-dashoffset: -24; } }

.no {
  position: relative; z-index: 1;
  display: grid; gap: 4px; align-content: center; justify-items: center; text-align: center;
  min-height: 46px; padding: 10px 16px;
  font: 600 0.98rem/1.25 var(--f-texto); color: var(--tinta);
  background: var(--branco); border: 1px solid var(--linha); border-radius: 2px; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.no:hover { border-color: var(--cobalto); }
.no[aria-pressed="true"] { border-color: var(--cobalto); box-shadow: 0 0 0 3px var(--ceu); }
.no__titulo { font-family: var(--f-display); font-stretch: 112%; font-weight: 650; font-size: 1.05rem; }
.no__itens { font-family: var(--f-mono); font-size: 0.74rem; font-weight: 400; color: var(--concreto); line-height: 1.5; }
.no--pessoas { grid-area: pessoas; justify-self: center; min-width: 260px; }
.no--borda { grid-area: borda; justify-self: center; min-width: 320px; font-family: var(--f-mono); font-size: 0.85rem; font-weight: 500; }
.no--conexoes { grid-area: conexoes; border-color: var(--ipe); border-width: 2px; }
.no--modelos { grid-area: modelos; }
.no--git { grid-area: git; }
.no--canais { grid-area: canais; }

.mapa__servidor {
  grid-area: servidor; position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "sistema contexto" "projetos ferramentas" "agente agente";
  gap: 10px; padding: 36px 14px 14px;
  background: var(--ceu); border: 2px solid var(--cobalto);
}
.mapa__rotulo { position: absolute; top: 12px; left: 18px; font-family: var(--f-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cobalto); }
.no--sistema { grid-area: sistema; }
.no--contexto { grid-area: contexto; }
.no--projetos { grid-area: projetos; }
.no--ferramentas { grid-area: ferramentas; }
.no--agente {
  grid-area: agente; min-height: 54px;
  font-family: var(--f-display); font-stretch: 125%; font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em;
  color: var(--branco); background: var(--cobalto); border-color: var(--cobalto);
}
.no--agente:hover { background: var(--cobalto-fundo); }
.no--agente[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ipe); }

.mapa__detalhe {
  margin-top: clamp(12px, 2vh, 22px); min-height: 3.2em; max-width: 920px;
  padding-top: 14px; border-top: 1px solid var(--linha);
  color: var(--concreto);
}
.mapa__detalhe strong { color: var(--tinta); }

/* 05 Núcleo */
.definicoes { display: grid; border-top: 2px solid var(--tinta); }
.definicoes > div { display: grid; grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr); gap: 20px; padding-block: 16px; border-bottom: 1px solid var(--linha); }
.definicoes dt { font-family: var(--f-display); font-stretch: 112%; font-weight: 650; font-size: 1.1rem; }
.definicoes dd { margin: 0; color: var(--concreto); }

/* 06 Conexões */
.mecanismos { display: grid; border-top: 2px solid var(--tinta); }
.mecanismos li { display: grid; grid-template-columns: minmax(120px, 0.32fr) minmax(0, 1fr); gap: 20px; padding-block: 16px; border-bottom: 1px solid var(--linha); }
.mecanismo__nome { font-family: var(--f-mono); font-weight: 500; font-size: 0.9rem; color: var(--cobalto); padding-top: 2px; }
.mecanismos p { color: var(--concreto); }

/* 07 Módulos */
.modulos { display: grid; gap: 14px; }
.modulos__aviso { font-family: var(--f-mono); font-size: 0.76rem; color: var(--concreto); }
.modulos__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); counter-reset: modulo; }
.modulos__lista li { counter-increment: modulo; display: grid; gap: 6px; align-content: start; padding: clamp(18px, 2.6vw, 30px); background: var(--branco); }
.modulos__lista li::before { content: counter(modulo, decimal-leading-zero); font-family: var(--f-mono); font-size: 0.78rem; font-weight: 500; color: var(--cobalto); }
.modulos__lista span { font-family: var(--f-display); font-stretch: 112%; font-weight: 650; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); letter-spacing: -0.015em; }
.modulos__lista small { font-size: 0.95rem; color: var(--concreto); }

/* 08 Circuito fechado */
.caminhos { display: grid; gap: 0; border-top: 1px solid rgb(255 255 255 / .28); }
.caminhos li { display: grid; gap: 8px; padding-block: clamp(18px, 3vh, 26px); border-bottom: 1px solid rgb(255 255 255 / .28); }
.caminho__rota { font-family: var(--f-mono); font-size: 0.82rem; font-weight: 500; color: var(--ipe); letter-spacing: 0.04em; }
.caminho__rota i { font-style: normal; color: var(--branco); padding-inline: 4px; }
.caminhos h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); }
.caminhos p { color: rgb(255 255 255 / .8); max-width: 56ch; }

/* 09 Formas e controles */
.formas { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.formas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.formas__lista li { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid var(--tinta); }
.formas__lista span { font-family: var(--f-mono); font-size: 0.8rem; font-weight: 500; color: var(--cobalto); }
.formas__lista p { color: var(--concreto); }
.controles { display: grid; gap: 18px; padding: clamp(22px, 3vw, 34px); background: var(--branco); border: 1px solid var(--linha); border-top: 6px solid var(--ipe); }
.controles__titulo { font-family: var(--f-display); font-stretch: 112%; font-weight: 650; font-size: 1.2rem; }
.controles .lista { padding-top: 0; border-top: 0; }
.controles__nota { font-size: 0.95rem; color: var(--concreto); padding-top: 16px; border-top: 1px solid var(--linha); }

/* 10 Na infra do cliente */
.lista--clara { border-top-color: rgb(255 255 255 / .28); font-size: clamp(1.02rem, 1rem + .25vw, 1.15rem); }
.lista--clara li::before { background: var(--ipe); }

/* 11 Fases */
.fases { display: grid; border-top: 2px solid var(--tinta); }
.fases li { display: grid; grid-template-columns: 56px minmax(170px, 0.4fr) minmax(0, 1fr); gap: 20px; align-items: baseline; padding-block: clamp(8px, 1.4vh, 16px); border-bottom: 1px solid var(--linha); }
.fase__n { font-family: var(--f-mono); font-size: 0.85rem; font-weight: 500; color: var(--cobalto); }
.fase__nome { font-family: var(--f-display); font-stretch: 112%; font-weight: 650; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
.fase__pronto { color: var(--concreto); }

/* 12 Ciclo */
.ciclo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); counter-reset: etapa; }
.ciclo li { counter-increment: etapa; display: grid; gap: 4px; padding: clamp(16px, 2.2vw, 24px); background: var(--branco); color: var(--concreto); }
.ciclo li span { font-family: var(--f-display); font-stretch: 112%; font-weight: 650; font-size: 1.25rem; color: var(--tinta); }
.ciclo li span::before { content: counter(etapa, decimal-leading-zero) " "; font-family: var(--f-mono); font-size: 0.8rem; font-weight: 500; color: var(--cobalto); }

/* 13 Referência */
.provas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.provas li { display: grid; gap: 8px; align-content: start; padding-block: 20px; border-top: 1px solid rgb(255 255 255 / .28); }
.provas h3 { font-size: 1.2rem; }
.provas p { color: rgb(255 255 255 / .8); }
.provas__proximo { grid-column: 1 / -1; }
.provas__proximo h3 { color: var(--ipe); }

/* 14 Começar */
.cena--final { background: var(--branco); }
.perguntas { display: grid; border-top: 2px solid var(--tinta); counter-reset: pergunta; }
.perguntas li { counter-increment: pergunta; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding-block: 13px; border-bottom: 1px solid var(--linha); font-size: clamp(1rem, .96rem + .25vw, 1.12rem); }
.perguntas li::before { content: counter(pergunta, decimal-leading-zero); font-family: var(--f-mono); font-size: 0.8rem; font-weight: 500; color: var(--cobalto); padding-top: 3px; }

/* Revelação (só com JS ativo) */
.js [data-revela] { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.js .cena.visivel [data-revela] { opacity: 1; transform: none; }

/* Responsivo */
@media (max-width: 960px) {
  html:has(body.deck) { scroll-snap-type: none; }
  .cena h1 { font-size: clamp(2.2rem, 1.2rem + 4vw, 3.4rem); }
  .cena h2 { font-size: clamp(1.8rem, 1.1rem + 2.6vw, 2.6rem); }
  .deck__titulo { display: none; }
  .cena__dica { display: none; }
  .cena { min-height: auto; padding-block: calc(var(--topo) + 40px) 64px; }
  .cena--capa { min-height: 100svh; }
  .cena__grade--capa, .cena__grade--lado, .trilhas, .formas { grid-template-columns: 1fr; }
  .azulejos--capa, .azulejos--claro { aspect-ratio: 2 / 1; }
  .modulos__lista, .provas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapa {
    grid-template-columns: 1fr;
    grid-template-areas: "pessoas" "borda" "servidor" "conexoes" "modelos" "git" "canais";
    gap: 12px;
  }
  .mapa__fios { display: none; }
  .no--pessoas, .no--borda { justify-self: stretch; min-width: 0; }
}
@media (max-width: 640px) {
  .deck { --topo: 64px; }
  .modulos__lista, .provas, .formas__lista, .ciclo { grid-template-columns: 1fr; }
  .definicoes > div, .mecanismos li { grid-template-columns: 1fr; gap: 4px; }
  .fases li { grid-template-columns: 40px minmax(0, 1fr); }
  .fase__pronto { grid-column: 2; }
  .mapa__servidor { grid-template-columns: 1fr; grid-template-areas: "agente" "sistema" "contexto" "projetos" "ferramentas"; }
  .deck__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-revela] { opacity: 1; transform: none; transition: none; }
  .js .mapa__fios path { animation: none; }
  .azulejos .modulo, .deck__progresso span { transition: none; }
}

@media print {
  .deck__topo, .deck__nav, .pular { display: none; }
  .cena { min-height: auto; break-after: page; padding-block: 32px; }
  .js [data-revela] { opacity: 1; transform: none; }
}