/* AI Week: peças comuns às subpáginas (Patrocine, Hackathon, Programação...): títulos, botões, abertura com
   arte, faixa de números, seções, listas numeradas, etapas no fio de luz e perguntas. Identidade (docs/
   identidade-visual.md e o kit em docs/kit-ia/): Barlow Condensed ExtraBold nos títulos, Inter no resto;
   laranja #FF6A1A, preto e branco, neutros técnicos do kit (#141414, #B3B3B3, #666). Medidas de tela sempre
   por calc(N*var(--vw)) (ver o "tamanho de referência" no base.css). */
main{font-family:var(--f-texto)}
.pg-h1,.pg-h2{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;color:#fff}
.pg-h1 em,.pg-h2 em{font-style:normal;color:var(--laranja)}
.pg-h1{font-size:clamp(52px,calc(5.6*var(--vw)),96px);line-height:.98;letter-spacing:-.01em}
.pg-h2{font-size:clamp(40px,calc(3.9*var(--vw)),64px);line-height:1.02}
.pg-bt{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:0 24px;border:0;border-radius:4px;background:var(--laranja);color:#000;font:600 13px/1 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:box-shadow .16s}
.pg-bt:hover{text-decoration:underline;text-underline-offset:.3em;box-shadow:inset 0 0 0 2px #000}
/* secundário: transparente, contorno claro (kit, seção 10) */
.pg-bt--linha{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.62)}
.pg-bt--linha:hover{box-shadow:inset 0 0 0 2px #fff}
.pg-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.pg-topo .pg-acoes .pg-bt{margin-top:0}

/* abertura: texto à esquerda, arte da biblioteca Pulso do kit à direita, sumindo no preto */
.pg-topo{position:relative;overflow:hidden;background:#000}
.pg-arte{position:absolute;right:0;top:0;width:min(62%,1100px);height:100%;object-fit:cover;object-position:70% 50%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%),linear-gradient(0deg,transparent,#000 22%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 35%),linear-gradient(0deg,transparent,#000 22%);mask-composite:intersect;pointer-events:none}
.pg-topo-in{position:relative;z-index:1;padding-block:clamp(40px,calc(4*var(--vw)),64px) clamp(56px,calc(6*var(--vw)),96px)}
.pg-volta{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#B3B3B3;text-decoration:none}
.pg-volta:hover{color:#fff;text-decoration:underline;text-underline-offset:.3em}
.pg-rotulo{margin-top:clamp(32px,calc(3.5*var(--vw)),56px);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.pg-h1{margin-top:16px}
.pg-lede{margin-top:20px;max-width:34ch;font-size:clamp(17px,calc(1.3*var(--vw)),21px);line-height:1.5;color:rgba(255,255,255,.88)}
.pg-topo .pg-bt{margin-top:32px}
/* os números ficam numa faixa preta própria, abaixo da arte, para o texto nunca cair sobre o laranja */
.pg-faixa{position:relative;z-index:1;background:#000;border-top:1px solid rgba(255,255,255,.12)}
/* colunas iguais na largura toda: as divisórias ficam alinhadas e o espaço entre os itens é o mesmo (pedido da equipe em
   30/09); se um valor não couber, só a coluna dele cresce, sem quebrar a linha */
.pg-numeros{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(max-content,1fr);padding-block:28px}
.pg-numeros > div{padding-right:clamp(12px,calc(1.6*var(--vw)),24px)}
.pg-numeros > div + div{padding-left:clamp(20px,calc(2.1*var(--vw)),32px);border-left:1px solid rgba(255,255,255,.2)}
.pg-numeros dt{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#B3B3B3}
.pg-numeros dd{margin-top:8px;font-family:var(--f-titulo);font-weight:800;font-size:clamp(22px,calc(1.8*var(--vw)),30px);line-height:1;text-transform:uppercase;white-space:nowrap}

.pg-sec{padding-block:clamp(64px,calc(6.5*var(--vw)),104px);border-top:1px solid rgba(255,255,255,.08);background:#000}
.pg-sec-cabeca{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.pg-nota{max-width:42ch;font-size:16px;line-height:1.5;color:#B3B3B3}

/* lista numerada: números laranja, como o "01 / 02 / 03" do manual */
.pg-motivos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,calc(3*var(--vw)),48px);margin-top:clamp(32px,calc(3.5*var(--vw)),56px)}
.pg-motivos li{padding-top:24px;border-top:1px solid rgba(255,255,255,.2)}
.pg-n{font-family:var(--f-titulo);font-weight:800;font-size:clamp(28px,calc(2.3*var(--vw)),36px);line-height:1;color:var(--laranja)}
.pg-motivos h3{margin-top:14px;font-family:var(--f-titulo);font-weight:800;font-size:clamp(24px,calc(2*var(--vw)),32px);line-height:1.05;text-transform:uppercase}
.pg-motivos p{margin-top:12px;max-width:38ch;font-size:16px;line-height:1.55;color:rgba(255,255,255,.82)}

/* etapas no fio de luz: a "luz" do kit (curva luminosa laranja) ligando os passos, um ponto em cada um,
   o mesmo desenho do hackathon no ingresso da home */
.pg-etapas{--vao:clamp(24px,calc(3*var(--vw)),48px);display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:var(--vao);margin-top:clamp(40px,calc(4*var(--vw)),64px)}
.pg-etapas > li{position:relative;padding-top:36px}
.pg-etapas > li::before{content:"";position:absolute;left:0;right:calc(-1*var(--vao));top:5px;height:2px;background:var(--laranja);box-shadow:0 0 12px rgba(255,106,26,.8),0 0 2px rgba(255,210,170,.9)}
.pg-etapas > li:last-child::before{right:0;background:linear-gradient(90deg,var(--laranja) 50%,rgba(255,106,26,0))}
.pg-etapas > li::after{content:"";position:absolute;left:0;top:1px;width:10px;height:10px;border-radius:50%;background:var(--laranja);box-shadow:0 0 0 4px rgba(255,106,26,.18),0 0 14px rgba(255,106,26,.9)}
.pg-etapas h3{margin-top:12px;font-family:var(--f-titulo);font-weight:800;font-size:clamp(24px,calc(2*var(--vw)),32px);line-height:1.05;text-transform:uppercase}
.pg-etapas p{margin-top:12px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.82)}

/* perguntas: abre e fecha, com o "+" laranja */
.pg-perguntas{margin-top:clamp(32px,calc(3.5*var(--vw)),56px);border-bottom:1px solid rgba(255,255,255,.14)}
.pg-perguntas details{border-top:1px solid rgba(255,255,255,.14)}
.pg-perguntas summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding-block:22px;cursor:pointer;list-style:none;font-size:clamp(18px,calc(1.35*var(--vw)),22px);font-weight:600;line-height:1.3}
.pg-perguntas summary::-webkit-details-marker{display:none}
.pg-perguntas summary::after{content:"+";flex:none;font-family:var(--f-titulo);font-weight:800;font-size:34px;line-height:1;color:var(--laranja);transition:transform .25s}
.pg-perguntas details[open] summary::after{transform:rotate(45deg)}
.pg-perguntas summary:hover{text-decoration:underline;text-underline-offset:.3em;text-decoration-color:var(--laranja)}
.pg-perguntas details > p{max-width:64ch;padding-bottom:24px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.82)}

/* selo de nível (Essencial, Avançado): a diferença vem da palavra e do selo (contorno x cheio), não só da cor */
.pg-selo{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border:1px solid #fff;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.pg-selo--cheio{background:var(--laranja);border-color:var(--laranja);color:#000}

/* telas estreitas: só encaminhado (a adaptação mobile vem depois) */
@media (max-width:1000px){
  .pg-arte{position:relative;display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
  .pg-motivos,.pg-etapas{grid-template-columns:1fr}
  .pg-etapas > li::before{right:0}
  .pg-numeros{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:20px}
  .pg-numeros dd{white-space:normal}
  .pg-numeros > div + div{padding-left:0;border-left:0}
}