/* AI Week: página Palestras, só o que é dela. As peças comuns estão em paginas.css. O card de cada palestra
   segue o card de palestrante do manual ("Conversas sobre IA"): retrato em preto e branco com luz laranja de
   um lado, e embaixo o título, o nome em laranja, o cargo e o horário (kit, seção 08: o rosto comanda). */
/* o auditório do kit (04-ativos/referencias/space.png): o palco com a arte da AI Week no telão, as cadeiras
   e o totem "Auditório" (30/09/2026, a pedido do Felipe, no lugar do microfone) */
.pl-arte{object-position:62% 50%}
.pl-dias{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,calc(2*var(--vw)),32px);margin-top:clamp(32px,calc(3.5*var(--vw)),56px)}
.pl-dia{display:grid;gap:clamp(16px,calc(1.6*var(--vw)),24px);align-content:start}
.pl-dia-cab{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14)}
.pl-dia-cab b{font-family:var(--f-titulo);font-weight:800;font-size:clamp(44px,calc(3.8*var(--vw)),64px);line-height:.85;color:var(--laranja)}
.pl-dia-cab span{font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;color:#B3B3B3}
.pl-card{overflow:hidden;background:#141414;border:1px solid rgba(255,255,255,.08);transition:border-color .2s}
.pl-card:hover{border-color:rgba(255,106,26,.6)}
.pl-foto{position:relative;aspect-ratio:4/3.4;overflow:hidden;background:radial-gradient(120% 90% at 88% 30%,rgba(255,106,26,.55),rgba(255,106,26,0) 55%),#0b0b0b}
.pl-foto img{position:absolute;left:50%;bottom:0;width:78%;height:auto;transform:translateX(-50%);filter:grayscale(1) contrast(1.05);transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.pl-card:hover .pl-foto img{transform:translateX(-50%) scale(1.04)}
.pl-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#141414 0%,rgba(20,20,20,0) 35%);pointer-events:none}
.pl-info{padding:clamp(16px,calc(1.8*var(--vw)),24px)}
.pl-titulo{font-family:var(--f-titulo);font-weight:800;font-size:clamp(22px,calc(1.8*var(--vw)),28px);line-height:1.05;text-transform:uppercase}
.pl-nome{margin-top:12px;font-family:var(--f-titulo);font-weight:800;font-size:clamp(17px,calc(1.3*var(--vw)),20px);letter-spacing:.02em;text-transform:uppercase;color:var(--laranja)}
.pl-cargo{margin-top:4px;font-size:14px;color:rgba(255,255,255,.82)}
.pl-meta{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#B3B3B3}

.pl-temas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,calc(1.4*var(--vw)),20px);margin-top:clamp(32px,calc(3.5*var(--vw)),56px)}
.pl-temas li{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:190px;padding:clamp(18px,calc(2*var(--vw)),28px);background:#141414;border:1px solid rgba(255,255,255,.08)}
.pl-temas h3{font-family:var(--f-titulo);font-weight:800;font-size:clamp(22px,calc(1.9*var(--vw)),30px);line-height:1.05;text-transform:uppercase}
.pl-temas .pl-tema-av{border-color:rgba(255,106,26,.5)}
.pl-temas .pg-selo{align-self:flex-start}

/* a nuvem curva "O que você vai ouvir" (30/09): uma plataforma chapada no fundo, com a logo grande no meio, e os lados
   curvos vindo na direção de quem olha; as palavras encaixadas como um mosaico, todas deitadas, e as duas linhas de
   luz laranja desenhando a curva. O palestras.js monta tudo; aqui o visual.
   A dobra ocupa quase a tela toda: o título compacto em cima e a parede no resto da altura.
   Sem JS e no celular, fica a lista de cards acima. */
.pv-cena{display:none;position:relative;height:clamp(440px,calc(100*var(--svh) - 72px - 230px),820px);margin-top:clamp(12px,calc(1.4*var(--vw)),24px);overflow:hidden;perspective:900px;perspective-origin:50% 50%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.pv-cil{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.pv-cil > *{position:absolute;left:0;top:0;transform-origin:0 0;white-space:nowrap;backface-visibility:hidden}
/* as cores (neutros do kit): a maioria em cinza claro (o #B3B3B3 um pouco transparente: aparece sem gritar), branco para destaque, cinza escuro no fundo da
   trama e laranja só nas palavras-chave. Perto do mouse, a cor esquenta: o cinza e o branco vão para o laranja, o
   laranja vai para o branco (--calor de 0 a 1, posto pelo JS) */
.pv-p,.pv-medidor span{font-family:var(--f-titulo);font-weight:800;line-height:.92;text-transform:uppercase;white-space:nowrap}
.pv-p{transform-style:preserve-3d}
/* onde as palavras são medidas antes do encaixe (fora da vista) */
.pv-medidor{position:absolute;left:0;top:0;visibility:hidden}
.pv-medidor span{position:absolute;left:0;top:0}
/* a logo oficial, grande, na plataforma do meio */
.pv-logo{display:block;max-width:none;height:auto;opacity:0;transition:opacity 1s ease .1s}
.pv--on .pv-logo{opacity:1}
.pv-c-claro{--cor:rgba(179,179,179,.75);--quente:var(--laranja)}
.pv-c-branco{--cor:#fff;--quente:var(--laranja)}
.pv-c-escuro{--cor:#555;--quente:var(--laranja)}
.pv-c-laranja{--cor:var(--laranja);--quente:#fff}
.pv-in{display:block;color:color-mix(in srgb,var(--quente) calc(var(--calor,0)*100%),var(--cor));transition:color .35s ease,translate .45s cubic-bezier(.2,0,0,1)}
/* o "hack": as letras que estão embaralhando ganham outra cor (branco nas cinzas e nas laranja, laranja nas brancas) */
.pv-hack{font-style:normal;color:#fff}
.pv-c-branco .pv-hack{color:var(--laranja)}
/* a entrada: as palavras vêm de perto de quem olha e pousam na superfície (entram na tela) */
.pv-cena .pv-in{opacity:0}
.pv--on .pv-in{animation:pv-entra 1.1s cubic-bezier(.2,0,0,1) var(--d,0s) both}
@keyframes pv-entra{from{opacity:0;transform:translateZ(520px)}to{opacity:1;transform:none}}
/* as linhas de luz: pedacinhos na borda do cilindro que, juntos, fazem a curva; acendem do centro para as pontas */
.pv-luz{height:2px;background:var(--laranja);box-shadow:0 0 12px rgba(255,106,26,.8),0 0 2px rgba(255,210,170,.9);opacity:0;transition:opacity .5s ease var(--d,0s)}
.pv--on .pv-luz{opacity:1}
/* o título curvo, centralizado em cima da tela (o palestras.js põe letra por letra) */
.pv-titulo{position:relative;height:clamp(110px,calc(9.5*var(--vw)),150px);perspective:900px;perspective-origin:50% 190%}
.pv-tcil{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.pv-l{position:absolute;left:0;top:0;transform-origin:0 0;font-family:var(--f-titulo);font-weight:800;line-height:1;text-transform:uppercase;white-space:pre;color:#fff;backface-visibility:hidden;opacity:0;transition:opacity .6s ease var(--d,0s)}
.pv-l--laranja{color:var(--laranja)}
.pv--on .pv-l{opacity:1}
@media (min-width:1001px){
  .com-painel.pl-temas-sec{padding-block:clamp(40px,calc(4*var(--vw)),64px) clamp(24px,calc(2.4*var(--vw)),40px)}
  .com-painel .pv-cena{display:block}
  /* o título de verdade fica para leitores de tela; na tela aparece o curvo */
  .com-painel #h-temas{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .com-painel .pl-temas{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.pv--on .pv-in{animation:none;opacity:1}.pv-luz,.pv-logo,.pv-l{transition:none}}

.pl-convite{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px}
.pl-convite-txt{margin-top:18px;max-width:46ch;font-size:17px;line-height:1.55;color:rgba(255,255,255,.86)}
.pl-convite-email{margin-top:12px;font-size:14px;color:#B3B3B3}

@media (max-width:1000px){
  .pl-dias,.pl-temas{grid-template-columns:1fr}
}