/* AI Week: CSS das dobras da página inicial. O que é comum a todas as páginas está em base.css. */

/* 01. topo (FIRE, com a marca da AI Week): janelas em três formas, a perna do A, um retângulo e a perna espelhada */
/* A PASSAGEM (29/09/2026), como no arquiteteia.com: a dobra .presa fica parada (sticky) e a .folha
   seguinte sobe por cima dela, com sombra na borda; a presa escurece enquanto é coberta. Presa mais alta
   que a janela gruda pelo pé (--alt e --nav vêm do home.js). Topo -> Manifesto -> Experiências; cada dobra
   fica acima da anterior (z-index) e as seguintes à Experiências acima de todas, com fundo próprio. */
.presa{position:sticky;top:min(var(--nav,72px),calc(calc(100*var(--svh)) - var(--alt,calc(100*var(--svh)))))}
:where(main > *){position:relative;z-index:2;background:var(--bg)}
.heroi{z-index:0;overflow:hidden;background:#000}
.manifesto{z-index:1}
.folha{box-shadow:0 -48px 96px -24px rgba(0,0,0,var(--sombra-a,.6))}
#experiencias{--sombra-a:.38}
@supports (animation-timeline: view()){
  body{timeline-scope:--folha-manifesto,--folha-exp,--folha-hack}
  .manifesto{view-timeline-name:--folha-manifesto}
  #experiencias{view-timeline-name:--folha-exp}
  .hack-palco{view-timeline-name:--folha-hack}
  .presa::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:#000;opacity:0;animation:passagem-recua linear both;animation-range:entry 0% entry 100%}
  .heroi::after{animation-timeline:--folha-manifesto}
  .manifesto::after{animation-timeline:--folha-exp}
  @keyframes passagem-recua{to{opacity:.42}}
  /* Experiências -> Hackathon (30/09/2026): o Hackathon sobe de baixo como um card que abre até a
     borda (o mesmo gesto do Manifesto) e as Experiências ficam presas e somem no escuro por trás;
     a foto do palco assenta enquanto o card sobe. O clip-path do .hack-palco já existia (é o que
     recorta a foto fixa), aqui ele só começa recuado dos lados. */
  #experiencias::after{animation-timeline:--folha-hack;animation-name:passagem-apaga;animation-range:entry 0% entry 90%}
  /* abaixo das Experiências presas ficam o Topo e o Manifesto (também presos): um bloco preto do
     tamanho delas, logo embaixo (sombra sem desfoque), é o que aparece nas laterais do card */
  #experiencias{box-shadow:0 -48px 96px -24px rgba(0,0,0,var(--sombra-a,.6)),0 var(--alt,calc(100*var(--svh))) 0 0 #000}
  @keyframes passagem-apaga{to{opacity:.72}}
  @media (prefers-reduced-motion:no-preference){
    .hack-palco{animation:hack-card-abre linear both;animation-timeline:--folha-hack;animation-range:entry 0% entry 85%}
    @keyframes hack-card-abre{0%,15%{clip-path:inset(0 clamp(24px,calc(7*var(--vw)),140px))}to{clip-path:inset(0 0)}}
    .hack-bg{animation:hack-foto-assenta linear both;animation-timeline:--folha-hack;animation-range:entry 0% entry 100%}
    @keyframes hack-foto-assenta{from{transform:scale(1.12)}to{transform:none}}
  }
}
.heroi-in{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:center;gap:clamp(24px,calc(3*var(--vw)),56px);min-height:min(calc(84*var(--vh)),860px);padding-block:clamp(24px,calc(3*var(--vw)),48px)}
.heroi-h{font-family:"Anton",Impact,"Arial Narrow",sans-serif;font-weight:400;font-size:clamp(42px,calc(4.5*var(--vw)),88px);line-height:1.02;letter-spacing:.005em;text-transform:uppercase;color:#F5F3EF}
.heroi-h em{font-style:normal;color:var(--laranja)}
.heroi-sub{margin-top:clamp(20px,calc(2*var(--vw)),32px);max-width:42ch;font-weight:500;font-size:clamp(17px,calc(1.3*var(--vw)),24px);line-height:1.3;color:#F5F3EF}
.janelas{position:relative;height:min(calc(78*var(--vh)),820px);margin-right:calc(50% - calc(50*var(--vw)));overflow:hidden;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2222%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%220%2C240%20125%2C0%20190%2C0%20190%2C1000%20105%2C1000%200%2C840%22%2F%3E%3Cpolygon%20points%3D%22255%2C240%20405%2C0%20600%2C0%20600%2C1000%20370%2C1000%20255%2C840%22%2F%3E%3Cpolygon%20points%3D%22665%2C240%20815%2C0%201000%2C0%201000%2C1000%20780%2C1000%20665%2C840%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2222%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%220%2C240%20125%2C0%20190%2C0%20190%2C1000%20105%2C1000%200%2C840%22%2F%3E%3Cpolygon%20points%3D%22255%2C240%20405%2C0%20600%2C0%20600%2C1000%20370%2C1000%20255%2C840%22%2F%3E%3Cpolygon%20points%3D%22665%2C240%20815%2C0%201000%2C0%201000%2C1000%20780%2C1000%20665%2C840%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0/100% 100% no-repeat}
.janelas{background:#FF6A1A}
.janelas-img{position:absolute;inset:0;background:#1a1a1a url(../fotos/fundo.jpg) 62% 40%/cover no-repeat;filter:contrast(.72) brightness(1.18);mix-blend-mode:luminosity;opacity:.92}
.janelas::after{content:"";position:absolute;inset:0;background:linear-gradient(170deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.45));pointer-events:none}
@media (prefers-reduced-motion: no-preference){.janelas-img{animation:janela-zoom 26s ease-in-out infinite alternate}}
@keyframes janela-zoom{from{transform:scale(1)}to{transform:scale(1.12)}}
.heroi-meta{margin-bottom:clamp(18px,calc(2*var(--vw)),28px);font-family:var(--f-mono);font-weight:600;font-size:clamp(12px,calc(.95*var(--vw)),16px);line-height:1.55;letter-spacing:.2em;text-transform:uppercase;color:#F5F3EF}
.heroi-cta{display:inline-flex;align-items:center;justify-content:center;height:clamp(56px,calc(3.6*var(--vw)),68px);margin-top:clamp(28px,calc(3*var(--vw)),48px);padding:0 clamp(40px,calc(3.8*var(--vw)),72px);border-radius:6px;background:var(--laranja);color:#0A0A0B;font-weight:700;font-size:clamp(17px,calc(1.1*var(--vw)),21px);text-decoration:none;transition:transform .2s}
.heroi-cta:hover{transform:translateY(-2px)}
@media (max-width:900px){.heroi-in{grid-template-columns:1fr;min-height:0}.janelas{height:clamp(260px,calc(70*var(--vw)),420px)}}

/* 02. manifesto: faixa clara, mais baixa que uma tela */
.manifesto{padding-block:clamp(56px,calc(7*var(--vw)),112px);border-top:0;background:#F4F0E7;color:#101010}
.manifesto-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,5.6fr) minmax(0,2.9fr);column-gap:clamp(24px,calc(3*var(--vw)),48px);align-items:end}
.manifesto-lado{padding-bottom:.4em;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8A857C}
.manifesto-eyebrow{margin-bottom:clamp(14px,calc(1.6*var(--vw)),24px);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.manifesto-frase{font-family:"Anton",Impact,"Arial Narrow",sans-serif;font-weight:400;font-size:clamp(40px,calc(5*var(--vw)),80px);line-height:1.18;letter-spacing:.005em;text-transform:uppercase}
.manifesto-frase em{font-style:normal;color:var(--laranja)}
.manifesto-apoio{padding-bottom:.3em;font-size:clamp(15px,calc(1.1*var(--vw)),17px);line-height:1.65;color:#5F5B54}
.manifesto-apoio::before{content:"";display:block;width:64px;height:3px;margin-bottom:clamp(14px,calc(1.4*var(--vw)),20px);background:var(--laranja)}
@media (max-width:900px){.manifesto-in{grid-template-columns:1fr;row-gap:24px}.manifesto-lado{order:-1;padding:0}}
/* o Manifesto chega como um card (29/09/2026, Davi: "dê a ideia de que tem um card embaixo que vai subir"):
   o creme começa recuado dos lados, de cantos retos, e abre até a borda enquanto sobe. Sem suporte a
   animation-timeline, fica a faixa inteira de sempre. */
@supports (animation-timeline: view()){
  .manifesto{background:transparent}
  .manifesto::before{content:"";position:absolute;inset:0;z-index:-1;background:#F4F0E7;animation:card-abre linear both;animation-timeline:--folha-manifesto;animation-range:entry 0% entry 100%}
  /* "entry", não "cover": o Manifesto é sticky e a faixa cover dele só termina no fim da página */
  @keyframes card-abre{0%,20%{clip-path:inset(0 clamp(16px,calc(3*var(--vw)),56px))}to{clip-path:inset(0 0)}}
}

/* 04. experiências (referência: docs/referencias/dobra-experiencias.png). Identidade visual:
   Barlow Condensed ExtraBold nos títulos, Inter no resto, preto, branco e laranja #FF6A1A.
   Texto 467fr; os 4 cards saem com a MESMA largura (266fr cada, pedido do Davi em 29/09/2026 —
   a referência tinha o 4º card mais largo, isso deixou de valer). */
.exp{position:sticky;display:grid;grid-template-columns:467fr 266fr 266fr 266fr 266fr;min-height:clamp(560px,calc(42*var(--vw)),860px);background:#000;font-family:var(--f-texto)}
.exp-intro{position:relative;display:flex;flex-direction:column;padding:clamp(16px,calc(1.4*var(--vw)),24px) clamp(24px,calc(2.5*var(--vw)),40px) clamp(28px,calc(2.8*var(--vw)),44px) clamp(24px,calc(7.5*var(--vw)),150px)}
.exp-rotulo{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.exp-texto{margin-block:auto;padding-block:clamp(24px,calc(3*var(--vw)),48px)}
.exp-kicker{font-size:clamp(12px,calc(.98*var(--vw)),17px);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.exp-h{margin-top:clamp(10px,calc(1*var(--vw)),16px);font-family:var(--f-titulo);font-weight:800;font-size:clamp(40px,calc(3.4*var(--vw)),66px);line-height:.98;letter-spacing:.005em;text-transform:uppercase;color:#fff}
.exp-h em{font-style:normal;color:var(--laranja)}
.exp-lede{margin-top:clamp(14px,calc(1.3*var(--vw)),22px);max-width:34ch;font-size:clamp(14px,calc(1*var(--vw)),18px);line-height:1.45;color:rgba(255,255,255,.86)}
.exp-botoes{display:grid;gap:10px;max-width:clamp(220px,calc(16.2*var(--vw)),320px);margin-top:clamp(20px,calc(2*var(--vw)),32px)}
.exp-bt{display:flex;align-items:center;justify-content:center;gap:12px;height:clamp(36px,calc(2.45*var(--vw)),46px);border-radius:3px;font-size:clamp(10px,calc(.72*var(--vw)),13px);font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.exp-bt--cheio{background:var(--laranja);color:#000}
.exp-bt--cheio:hover{background:#fff}
.exp-bt--linha{border:1px solid rgba(255,255,255,.62);color:#fff}
.exp-bt--linha:hover{border-color:#fff;background:#fff;color:#000}
.exp-assina,.exp-lema{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.exp-assina{position:absolute;left:clamp(16px,calc(2.5*var(--vw)),48px);bottom:clamp(28px,calc(2.8*var(--vw)),44px)}
.exp-lema{position:absolute;right:clamp(16px,calc(2.5*var(--vw)),40px);bottom:clamp(28px,calc(2.8*var(--vw)),44px);z-index:2}
.exp-cards{display:contents}
.exp-card{position:relative;overflow:hidden;padding:clamp(40px,calc(3.4*var(--vw)),56px) clamp(18px,calc(1.8*var(--vw)),28px) 0;border:1px solid rgba(255,255,255,.18);border-left-width:0}
/* cada card com uma borda leve (29/09/2026, Davi); os cards encostam, então a linha entre dois vizinhos é uma só */
.exp-card:first-child{border-left-width:1px}
.exp-card img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .5s ease,transform 1.2s cubic-bezier(.25,.46,.45,.94)}
.exp-card > :not(img){position:relative;z-index:1}
.exp-num{font-family:var(--f-titulo);font-weight:800;font-size:clamp(26px,calc(2*var(--vw)),36px);line-height:1;color:var(--laranja)}
.exp-card-h{margin-top:clamp(12px,calc(1.3*var(--vw)),20px);font-family:var(--f-titulo);font-weight:800;font-size:clamp(22px,calc(1.75*var(--vw)),32px);line-height:1;letter-spacing:.005em;text-transform:uppercase;color:#fff}
.exp-card-sub{margin-top:clamp(8px,calc(.8*var(--vw)),12px);font-size:clamp(13px,calc(.88*var(--vw)),16px);line-height:1.35;color:rgba(255,255,255,.82)}
.exp-seta{position:absolute!important;left:clamp(18px,calc(1.8*var(--vw)),28px);top:75%;display:grid;place-items:center;width:clamp(32px,calc(2.3*var(--vw)),40px);aspect-ratio:1;border:1px solid rgba(255,255,255,.85);border-radius:50%;color:#fff;transform:translateY(-50%);transition:width .35s ease,border-color .35s,box-shadow .35s,background-color .35s}
.exp-seta svg{width:44%;height:44%}
/* destaque: o card sob o mouse; sem mouse na lista, o primeiro */
.exp-card:hover img,.exp-cards:not(:hover) .exp-card.on img{opacity:1;transform:scale(1.03)}
.exp-card:hover .exp-seta,.exp-cards:not(:hover) .exp-card.on .exp-seta{width:clamp(42px,calc(3*var(--vw)),52px);border-color:#fff;box-shadow:0 0 22px rgba(255,106,26,.45)}
.exp-seta:hover{background:var(--laranja);border-color:var(--laranja)!important;color:#000}
.exp-card:focus-within .exp-seta{border-color:var(--laranja)}
@media (prefers-reduced-motion: reduce){.exp-card img{transition:none}.exp-card:hover img,.exp-cards:not(:hover) .exp-card.on img{transform:none}}
/* o card sob o mouse se expande e a foto aproxima (29/09/2026, Davi). Base igual (266fr cada): a
   coluna dele cresce 138fr e as outras três cedem 46fr cada (138/3) — a soma fica 1064fr e o
   texto da esquerda não se mexe. */
@media (min-width:1001px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .exp{transition:grid-template-columns .6s cubic-bezier(.25,.46,.45,.94)}
  .exp:has(.exp-card:nth-child(1):hover){grid-template-columns:467fr 404fr 220fr 220fr 220fr}
  .exp:has(.exp-card:nth-child(2):hover){grid-template-columns:467fr 220fr 404fr 220fr 220fr}
  .exp:has(.exp-card:nth-child(3):hover){grid-template-columns:467fr 220fr 220fr 404fr 220fr}
  .exp:has(.exp-card:nth-child(4):hover){grid-template-columns:467fr 220fr 220fr 220fr 404fr}
  .exp-card:hover img{transform:scale(1.1)}
}
/* telas estreitas: só encaminhado (a adaptação mobile vem depois) */
@media (max-width:1000px){
  .exp{grid-template-columns:repeat(2,minmax(0,1fr));min-height:0}
  .exp-intro{grid-column:1/-1;padding-bottom:72px}
  .exp-card{min-height:420px;border-top:1px solid rgba(255,255,255,.14)}
  .exp-lema{display:none}
}

/* local + cronograma geral: o ingresso. Identidade (kit 1.2): Barlow Condensed ExtraBold nos títulos e números,
   Inter no resto; laranja, preto e branco, superfície #141414 e texto de apoio #B3B3B3 (neutros técnicos);
   preto sobre laranja na barra do hackathon e no botão. Fundo off-white #F4F0E7, o mesmo do Manifesto, sem o
   Pulso que subia por trás, e ingresso com cantos levemente arredondados (curva contínua, como os da Apple), a
   pedido da equipe em 29/09. No fundo claro o título fica todo preto: laranja sobre esse off-white não chega a
   3:1 (kit, seção 04). */
.loc{position:relative;overflow:hidden;padding-block:clamp(24px,calc(2*var(--vw)),40px) clamp(56px,calc(4.5*var(--vw)),72px);background:#F4F0E7;font-family:var(--f-texto);color:#fff}
.loc-cabeca{position:relative;z-index:2;max-width:560px}
.loc-h{font-family:var(--f-titulo);font-weight:800;font-size:clamp(44px,calc(4.2*var(--vw)),64px);line-height:1.02;text-transform:uppercase;color:#000}
.loc-h em{font-style:normal}
.loc-palco{position:relative;margin-top:clamp(28px,calc(2.6*var(--vw)),40px)}
.bilhete-sombra{position:relative;z-index:1;filter:drop-shadow(0 40px 50px rgba(0,0,0,.75))}
/* o picote: os dois meios-círculos são vazados de verdade (máscara), deixando ver o que está atrás.
   --furo maior que os circulinhos originais (13px), pra ler como o recorte de uma passagem de ônibus. */
.bilhete{--canhoto:clamp(240px,calc(19*var(--vw)),300px);--furo:20px;display:grid;grid-template-columns:minmax(0,1fr) var(--canhoto);background:#141414;border:1px solid rgba(255,255,255,.08);border-radius:18px;corner-shape:squircle;-webkit-mask:radial-gradient(circle var(--furo) at calc(100% - var(--canhoto)) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--furo) at calc(100% - var(--canhoto)) 100%,#0000 97%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle var(--furo) at calc(100% - var(--canhoto)) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--furo) at calc(100% - var(--canhoto)) 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.bilhete-corpo{padding:clamp(24px,calc(2.6*var(--vw)),40px)}
.bilhete-dados{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.bilhete-dados > div + div{padding-left:clamp(16px,calc(2*var(--vw)),32px);border-left:1px solid rgba(255,255,255,.12)}
.bilhete-dados dt,.roteiro-titulo{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#B3B3B3}
.bilhete-dados b{display:block;margin-top:10px;font-family:var(--f-titulo);font-weight:800;font-size:clamp(28px,calc(2.5*var(--vw)),40px);line-height:1;text-transform:uppercase;color:var(--laranja)}
.bilhete-dados span{display:block;margin-top:8px;font-size:14px;color:#B3B3B3}
.bilhete-dados .lar{color:var(--laranja)}
.bilhete-dados b:has(> .unicamp-ico){display:flex;align-items:center;flex-wrap:nowrap;column-gap:.3em}
.bilhete-dados b .unicamp-ico{height:52px;margin-block:-5px}
.roteiro{margin-top:clamp(24px,calc(2.4*var(--vw)),36px);padding-top:clamp(20px,calc(2*var(--vw)),28px);border-top:1px solid rgba(255,255,255,.12)}
.roteiro-dias{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
.roteiro-dias li + li{border-left:1px dashed rgba(255,255,255,.14)}
.dia{display:flex;align-items:baseline;gap:8px;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#B3B3B3}
.dia b{font-family:var(--f-titulo);font-weight:800;font-size:clamp(36px,calc(3.2*var(--vw)),52px);line-height:.9;letter-spacing:0;color:#fff}
.dia-item{margin-top:12px;font-size:15px;font-weight:600;color:var(--laranja)}
.dia-nota{margin-top:4px;font-size:13px;color:#B3B3B3}
/* o hackathon: um fio de luz laranja (a "luz" do kit) que atravessa os três dias, com um ponto em cada um */
.roteiro-dias{--vao:clamp(16px,calc(2*var(--vw)),32px)}
.roteiro-dias li + li{padding-left:var(--vao)}
.hack-item{position:relative;margin-top:22px;padding-top:22px;font-size:15px;font-weight:600;color:var(--laranja)}
.hack-item::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)}
.roteiro-dias li:last-child .hack-item::before{right:0;background:linear-gradient(90deg,var(--laranja) 60%,rgba(255,106,26,0))}
.hack-item::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)}
.bilhete-pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:clamp(20px,calc(2*var(--vw)),28px)}
.bilhete-end{font-size:14px;color:rgba(255,255,255,.86)}
.bilhete-links{display:flex;gap:24px}
.bilhete-links a{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:underline;text-underline-offset:.35em}
.bilhete-links a:hover{color:var(--laranja)}
.bilhete-canhoto{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,calc(1.6*var(--vw)),24px);padding:32px 24px;border-left:3px dotted rgba(255,255,255,.32);text-align:center}
.canhoto-rotulo{margin:0;font-size:10px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:#B3B3B3}
.canhoto-logo{width:clamp(96px,calc(8.5*var(--vw)),136px);height:auto}
.loc-bt{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border-radius:4px;background:var(--laranja);color:#000;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:box-shadow .16s}
.loc-bt:hover{text-decoration:underline;box-shadow:inset 0 0 0 2px #000}
/* código de barras decorativo do canhoto: puro enfeite de bilhete, não codifica nada */
.canhoto-codigo{display:block;width:100%;max-width:150px;height:26px;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 8px,#fff 8px 11px,transparent 11px 12px,#fff 12px 15px,transparent 15px 16px);opacity:.5}
/* ============ o ingresso em movimento (30/09) ============
   1. Ao entrar na tela, ele é impresso: abre de cima para baixo com uma linha de luz laranja passando (a cabeça
      da impressora, a "luz" do kit); depois o fio do hackathon se acende pelos três dias, um ponto de cada vez, e
      um brilho passa pelo código de barras.
   2. No "Quero participar" do canhoto, o canhoto rasga no picote (a luz corre pela linha pontilhada), se solta e
      sobe; na troca de página ele vira a credencial da Inscrição (assets/passe.js e o fim de inscricao.css).
   Quem liga as classes é o home.js; sem JS ou com movimento reduzido, o ingresso fica parado como antes. */
@view-transition{navigation:auto}
/* a impressão: o recorte e a linha de luz têm os mesmos quadros (0, 88%, 100%) e a mesma curva, andando juntos;
   nos últimos 12% o recorte abre para a sombra aparecer e a luz some */
.loc--anima .bilhete-sombra{clip-path:inset(0 0 100% 0)}
.loc--visto .bilhete-sombra{animation:loc-imprime 1.25s cubic-bezier(.45,0,.25,1) both}
.loc--impresso .bilhete-sombra{clip-path:none;animation:none}
@keyframes loc-imprime{0%{clip-path:inset(0 0 100% 0)}88%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(-60px -90px -150px -90px)}}
.loc--anima .loc-palco::after{content:"";position:absolute;left:-1%;right:-1%;top:0;z-index:3;height:2px;background:var(--laranja);box-shadow:0 0 18px 3px rgba(255,106,26,.7),0 0 3px rgba(255,214,186,.95);opacity:0;pointer-events:none}
.loc--visto .loc-palco::after{animation:loc-cabeca 1.25s cubic-bezier(.45,0,.25,1) both}
@keyframes loc-cabeca{0%{top:0;opacity:0}6%{opacity:1}88%{top:100%;opacity:1}100%{top:100%;opacity:0}}
/* o fio do hackathon se acende dia a dia, depois da impressão */
.loc--anima .hack-item::before{transform:scaleX(0);transform-origin:left center}
.loc--anima .hack-item::after{transform:scale(0)}
.loc--anima .roteiro-dias li:nth-child(1) .hack-item{--d:1.2s}
.loc--anima .roteiro-dias li:nth-child(2) .hack-item{--d:1.5s}
.loc--anima .roteiro-dias li:nth-child(3) .hack-item{--d:1.8s}
.loc--visto .hack-item::before{animation:loc-fio .3s linear var(--d) both}
.loc--visto .hack-item::after{animation:loc-ponto .5s cubic-bezier(.2,0,0,1) var(--d) both}
@keyframes loc-fio{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes loc-ponto{0%{transform:scale(0)}55%{transform:scale(1.7)}100%{transform:scale(1)}}
/* o brilho no código de barras, uma vez só */
.loc--anima .canhoto-codigo{position:relative;overflow:hidden}
.loc--anima .canhoto-codigo::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,var(--laranja),transparent);transform:translateX(-120%)}
.loc--visto .canhoto-codigo::after{animation:loc-leitura .9s cubic-bezier(.2,0,0,1) 2.1s both}
@keyframes loc-leitura{from{transform:translateX(-120%)}to{transform:translateX(320%)}}
/* o rasgo: o home.js põe uma cópia do canhoto (.canhoto-voo) em cima do original e anima a cópia; o ingresso
   perde a parte do canhoto (a máscara corta no picote, com os meios-círculos virando cantos) e fica com meio picote */
.bilhete-corpo{position:relative}
.bilhete--rasgado{-webkit-mask:radial-gradient(circle var(--furo) at 100% 0,#0000 97%,#000) top left/calc(100% - var(--canhoto)) 51% no-repeat,radial-gradient(circle var(--furo) at 100% 100%,#0000 97%,#000) bottom left/calc(100% - var(--canhoto)) 51% no-repeat;mask:radial-gradient(circle var(--furo) at 100% 0,#0000 97%,#000) top left/calc(100% - var(--canhoto)) 51% no-repeat,radial-gradient(circle var(--furo) at 100% 100%,#0000 97%,#000) bottom left/calc(100% - var(--canhoto)) 51% no-repeat}
.bilhete--rasgado .bilhete-canhoto{visibility:hidden}
.bilhete--rasgado .bilhete-corpo::after{content:"";position:absolute;top:var(--furo);bottom:var(--furo);right:0;border-right:3px dotted rgba(255,255,255,.32)}
.canhoto-voo{--furo:20px;position:absolute;z-index:3;margin:0;background:#141414;border:1px solid rgba(255,255,255,.08);border-left:3px dotted rgba(255,255,255,.32);border-radius:0 18px 18px 0;corner-shape:squircle;transform-origin:0 100%;will-change:transform;-webkit-mask:radial-gradient(circle var(--furo) at 0 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--furo) at 0 100%,#0000 97%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle var(--furo) at 0 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--furo) at 0 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.rasgo-luz{position:absolute;z-index:4;width:3px;margin-left:-1px;background:var(--laranja);box-shadow:0 0 14px 2px rgba(255,106,26,.85),0 0 3px rgba(255,220,190,.95);transform-origin:50% 0;pointer-events:none}
/* sem transição entre páginas (navegador sem o recurso): a tela escurece antes de ir */
.passe-veu{position:fixed;inset:0;z-index:60;background:#000;opacity:0;pointer-events:none}
/* telas estreitas: só encaminhado (a adaptação mobile vem depois) */
@media (max-width:1000px){
  .bilhete{grid-template-columns:1fr}
  .bilhete-dados,.roteiro-dias{grid-template-columns:1fr;gap:20px}
  .bilhete-dados > div + div,.roteiro-dias li + li{padding-left:0;border-left:0}
  .hack-item::before{right:0}
  .bilhete-canhoto{border-left:0;border-top:3px dotted rgba(255,255,255,.32)}
  .bilhete{-webkit-mask:none;mask:none}
}

/* 05b. hackathon · quem vai hackear (AI Engineer, pontos) */
.quem-head{display:grid;gap:14px;justify-items:center;text-align:center;margin-bottom:32px}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:28px}
.pill{height:54px;padding:0 20px;border:1px solid #2c2c30;border-radius:999px;background:transparent;color:#A1A1AA;font-weight:600;font-size:17px;cursor:pointer;transition:color .2s,background-color .2s,border-color .2s}
.pill:hover{color:#fff}
.pill[aria-selected="true"]{background:#3A1D10;border-color:#A34A20;color:var(--laranja)}
.dots-panel{border:1px solid #232326;border-radius:24px;background:#000;padding:clamp(14px,calc(2.4*var(--vw)),32px)}
.dots-panel canvas{display:block;width:100%}
.dots-legend{display:none;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:13px;font-weight:700;letter-spacing:.04em}
.dots-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
@media (max-width:640px){.dots-legend{display:flex}}

/* 05a. hackathon em uma tela (Junction): o fundo fica parado e a dobra de cima sobe e o descobre */
.sobre{position:relative}
.hack-palco{position:relative;clip-path:inset(0);border-top:1px solid var(--line-2)}
.hack-palco > section{position:relative;z-index:1}
/* as duas telas do hackathon sobre a mesma foto: sem linha entre elas; o vão (~160px) deixa a foto aparecer sem
   virar buraco (antes eram ~270px; ajuste da equipe em 29/09) */
.hack-palco .sec{border-top:0}
.hack-palco .dots-panel{background:transparent;border-color:rgba(255,255,255,.14)}
.hack-palco .quem-head{text-shadow:0 2px 24px rgba(0,0,0,.6)}
.hack-bg{position:fixed;inset:0;z-index:0;background:#0b0b0c url(../fotos/fundo.jpg) center / cover no-repeat;pointer-events:none}
.hack-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.76) 40%,rgba(0,0,0,.52) 70%,rgba(0,0,0,.46) 100%)}
.sobre .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,calc(5*var(--vw)),96px);align-items:center;min-height:calc(100*var(--vh));padding-block:clamp(56px,calc(6.25*var(--vw)),96px) clamp(48px,calc(4.2*var(--vw)),64px)}
.sobre-eyebrow{font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#D4D4D8}
.sobre h2{margin-top:18px;font-family:"Anton",Impact,"Arial Narrow",sans-serif;font-weight:400;font-size:clamp(40px,calc(5.2*var(--vw)),72px);line-height:.98;letter-spacing:.005em;text-transform:uppercase;max-width:13ch}
.sobre h2 em{font-style:normal;color:var(--laranja)}
.sobre-txt{margin-top:28px;max-width:46ch;font-size:clamp(17px,calc(1.35*var(--vw)),20px);line-height:1.75;color:#E4E4E7}
.sobre-links{display:flex;flex-wrap:wrap;gap:16px 48px;margin-top:40px}
.sobre-links a{font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--laranja)}
.sobre-links a:hover{color:#fff}
.term{border-left:2px solid var(--laranja);border-radius:var(--raio-janela);corner-shape:squircle;background:rgba(16,16,20,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:var(--f-mono);box-shadow:0 30px 80px rgba(0,0,0,.45),-18px 0 48px -30px rgba(255,106,26,.55)}
.term-bar{display:flex;align-items:center;gap:8px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.07)}
.term-bar i{width:12px;height:12px;border-radius:50%}
.term-bar span{margin-left:14px;font-size:13px;color:#B4B4BA}
/* toques da identidade visual (kit: laranja #FF6A1A como destaque sobre o escuro, e a luz laranja):
   prompt, flag, marcadores, valores-chave e cursor em laranja. As três bolinhas da barra são a
   ÚNICA exceção às cores da marca (pedido explícito do Davi): vermelho, amarelo e verde de
   janela de macOS, na ordem de sempre. */
.term-bar i:nth-child(1){background:#FF5F57}
.term-bar i:nth-child(2){background:#FEBC2E}
.term-bar i:nth-child(3){background:#28C840}
.term .t-l{color:var(--laranja);font-weight:inherit}
.term b.t-l{font-weight:500}
.term-body{padding:clamp(24px,calc(3*var(--vw)),40px) clamp(20px,calc(3*var(--vw)),40px) clamp(24px,calc(3*var(--vw)),44px);font-size:clamp(13px,calc(1.05*var(--vw)),15.5px);line-height:1;color:#E4E4E7}
.term-cmd{margin-bottom:40px}
.term-rows{display:grid;grid-template-columns:auto 1fr;gap:17px 20px}
.term-rows dt{color:#C9C9CE;text-transform:uppercase}
.term-rows dt::before{content:"> ";color:var(--laranja)}
.term-rows dd{text-transform:uppercase}
.term-rows .hide{visibility:hidden}
/* digitação do 05a: cada letra do comando e das linhas já nasce no DOM (a coluna do grid nunca
   muda de largura, e o leitor de tela recebe o texto inteiro); "digitar" é só revelar em
   sequência, sem transição — não é fade */
.term-ch{opacity:0}
.term-ch-on{opacity:1}
.term-end{margin-top:52px;display:flex;align-items:baseline;gap:10px}
/* o cursor só existe enquanto a frase está sendo digitada (JS liga a classe .on no instante em
   que a digitação começa e desliga quando ela termina); fica esperando "no fim da frase" — que é
   onde ele mora no HTML, depois do link — e some quando o link pronto e pulsando já basta como
   chamada. Sem JS (digitação nunca rodou: card já visível ao abrir, ou motion reduzido) o cursor
   simplesmente não aparece, do mesmo jeito que o card mostraria depois de pronto */
.cursor{display:none;width:.6em;border-bottom:2px solid var(--laranja);margin-left:6px}
.cursor.on{display:inline-block}
@media (prefers-reduced-motion: no-preference){.cursor.on{animation:blink 1.05s steps(1) infinite}}
@keyframes blink{50%{opacity:0}}
/* CTA na mesma linha do "$", digitada letra a letra como o resto da ficha (JS); pulsa sozinha
   quando não está digitando - inclusive de cara, se a digitação nunca rodar (ex.: card já visível
   ao abrir a página, ou movimento reduzido, que não gera a classe abaixo) */
.term-cta{font-weight:700;font-size:clamp(19px,calc(1.7*var(--vw)),25px);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--laranja)}
.term-cta:hover{color:#fff}
@media (prefers-reduced-motion: no-preference){
  .term-cta{animation:term-cta-pulsa 1.7s ease-in-out infinite}
  .term-cta.digitando{animation:none}
}
@keyframes term-cta-pulsa{0%,100%{opacity:1;text-shadow:0 0 0 rgba(255,106,26,0)}50%{opacity:.68;text-shadow:0 0 20px rgba(255,106,26,.85)}}
.sobre-cap{position:absolute;right:clamp(16px,calc(4*var(--vw)),48px);bottom:14px;z-index:1;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#8B8B92}
@media (max-width:900px){.sobre .wrap{grid-template-columns:1fr;min-height:0}}

/* 06. palestrantes (FIRE / Hotmart: faixa que corre sozinha com cards em 7 tamanhos,
   pessoa recortada na frente do grafismo, nome em letra condensada; laranja -> amarelo) */
.fire{position:relative;overflow:hidden}
/* moldura: duas peças do símbolo da marca (contorno branco), espelhadas pelos quatro cantos do
   título+apoio — ficam DENTRO de .fire-head (que já é position:relative), então "left/right/top/
   bottom:0" corresponde às bordas desse bloco, nunca à faixa de cards logo abaixo */
.fire-moldura{position:absolute;inset:0;pointer-events:none}
.fire-lacos{position:absolute;top:clamp(-22px,calc(-1.3*var(--vw)),-6px);width:clamp(84px,calc(7*var(--vw)),130px);height:auto;fill:none;stroke:#F4F4F0;stroke-width:6;stroke-linejoin:round;opacity:.7}
.fire-lacos path,.fire-raios path{vector-effect:non-scaling-stroke}
.fire-lacos--esq{left:clamp(4px,calc(.8*var(--vw)),16px)}
.fire-lacos--dir{right:clamp(4px,calc(.8*var(--vw)),16px);transform:scaleX(-1)}
.fire-raios{position:absolute;bottom:0;width:clamp(42px,calc(3.4*var(--vw)),58px);height:auto;fill:none;stroke:#F4F4F0;stroke-width:6;stroke-linejoin:round;opacity:.55}
.fire-raios--esq{left:clamp(8px,calc(1*var(--vw)),20px)}
.fire-raios--dir{right:clamp(8px,calc(1*var(--vw)),20px);transform:scaleX(-1)}
/* menos arrumado (30/09/2026, Davi: "tá muito arrumadinho"): as peças deixam de ser pares espelhados;
   cada uma com tamanho, altura, ângulo e opacidade próprios */
.fire-lacos--esq{top:clamp(-40px,calc(-2.4*var(--vw)),-10px);left:clamp(2px,calc(1*var(--vw)),14px);width:clamp(96px,calc(8*var(--vw)),150px);rotate:-7deg;opacity:.75}
.fire-lacos--dir{top:calc(6*var(--vw));right:clamp(10px,calc(3.2*var(--vw)),48px);width:clamp(60px,calc(5*var(--vw)),96px);transform:none;rotate:11deg;opacity:.45}
.fire-raios--esq{bottom:calc(3*var(--vw));left:clamp(30px,calc(5.5*var(--vw)),84px);width:clamp(34px,calc(2.7*var(--vw)),46px);rotate:14deg;opacity:.5}
.fire-raios--dir{bottom:calc(-1.5*var(--vw));right:clamp(4px,calc(1*var(--vw)),16px);width:clamp(50px,calc(4.1*var(--vw)),70px);rotate:-5deg;opacity:.6}
@media (max-width:600px){.fire-moldura{display:none}}
.fire-head{position:relative;display:grid;justify-items:center;gap:22px;text-align:center}
.fire-h{position:relative;font-family:"Anton","Bebas Neue",Impact,"Arial Narrow",sans-serif;font-weight:400;font-size:clamp(48px,calc(7.4*var(--vw)),124px);line-height:.92;letter-spacing:.005em;text-transform:uppercase;color:#F5F3EF}
.fire-h em{font-style:normal;color:var(--laranja)}
.fire-sub{position:relative;max-width:34ch;font-weight:500;font-size:clamp(18px,calc(1.7*var(--vw)),30px);line-height:1.15;color:#F5F3EF}
/* constelação: logos de IA, decorativos e discretos, nas margens do título (nunca sobre o texto nem
   sobre os cards); flutuação leve + reação sutil à rolagem (var(--par), escrita pelo home.js) */
.fire-constelacao{position:absolute;inset:0;pointer-events:none}
.fio{position:absolute;width:var(--s,28px);height:var(--s,28px);background:#F5F3EF;opacity:.5;-webkit-mask-image:var(--logo);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-image:var(--logo);mask-size:contain;mask-repeat:no-repeat;mask-position:center;translate:0 calc(var(--par,0px) * var(--k,.4));animation:fire-flutua var(--dur,6.5s) ease-in-out infinite;animation-delay:var(--atraso,0s)}
.fio-1{--s:38px;--k:.35;--dur:6.2s;--atraso:-1s;top:calc(-4.6*var(--vw));left:calc(6*var(--vw));rotate:-12deg;opacity:.6}
.fio-2{--s:20px;--k:.55;--dur:7s;--atraso:-3s;top:calc(-2.6*var(--vw));left:calc(36*var(--vw));opacity:.38}
.fio-3{--s:34px;--k:.4;--dur:6.6s;--atraso:-2s;top:calc(-3.4*var(--vw));left:calc(70*var(--vw));rotate:16deg;opacity:.55}
.fio-4{--s:20px;--k:.3;--dur:7.4s;--atraso:-.5s;top:calc(12*var(--vw));left:calc(3.5*var(--vw));rotate:-6deg;opacity:.32}
.fio-5{--s:30px;--k:.45;--dur:6.8s;--atraso:-4s;top:calc(22*var(--vw));left:calc(12.5*var(--vw));rotate:-20deg;opacity:.5}
.fio-6{--s:44px;--k:.35;--dur:7.2s;--atraso:-2.5s;top:calc(4.5*var(--vw));left:calc(85*var(--vw));rotate:9deg;opacity:.42}
.fio-7{--s:18px;--k:.5;--dur:6.4s;--atraso:-1.5s;top:calc(21*var(--vw));left:calc(71*var(--vw));opacity:.35}
.fio-8{--s:26px;--k:.4;--dur:7.6s;--atraso:-3.5s;top:calc(25.5*var(--vw));left:calc(41*var(--vw));rotate:24deg;opacity:.45}
@keyframes fire-flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (max-width:900px){.fire-constelacao{display:none}}
@media (prefers-reduced-motion:reduce){.fio{animation:none;translate:none}}
.fire-faixa{position:relative;margin-top:clamp(40px,calc(6*var(--vw)),90px);overflow:hidden}
.fire-faixa::before,.fire-faixa::after{content:"";position:absolute;top:0;bottom:0;z-index:3;width:140px;pointer-events:none}
.fire-faixa::before{left:0;background:linear-gradient(to right,#000,transparent)}
.fire-faixa::after{right:0;background:linear-gradient(to left,#000,transparent)}
.fire-trilho{--cw:clamp(190px,calc(16.5*var(--vw)),320px);--ch:calc(var(--cw) * 1.4);display:flex;align-items:flex-start;gap:45px;width:max-content;padding-block:40px 60px;animation:fire-corre 50s linear infinite;pointer-events:none}
.fire-card{pointer-events:auto}
.fire-trilho:hover,.fire-trilho:focus-within{animation-play-state:paused}
.fire-link{position:absolute;inset:0;display:block;color:inherit;text-decoration:none;cursor:pointer}
.fire-link:focus-visible{outline:3px solid var(--laranja);outline-offset:-4px}
@keyframes fire-corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fire-card{position:relative;flex:0 0 var(--cw);height:var(--ch);overflow:hidden;border-radius:15px;background:#141414;container-type:inline-size;box-shadow:0 4px 16px rgba(0,0,0,.4);transition:transform .45s cubic-bezier(.25,.46,.45,.94),box-shadow .45s cubic-bezier(.25,.46,.45,.94)}
.fire-card.s1{margin-top:calc(var(--ch) * .18)}
.fire-card.s2{margin-top:calc(var(--ch) * .22)}
.fire-card.s3{margin-top:calc(var(--ch) * .04)}
.fire-card.s4{margin-top:calc(var(--ch) * .14)}
.fire-card.s5{margin-top:0}
.fire-card.s6{margin-top:calc(var(--ch) * .1)}
.fire-card.s7{margin-top:calc(var(--ch) * .06)}
@media (max-width:600px){.fire-trilho{--cw:200px;--ch:280px;gap:28px}}
.fire-card:hover{z-index:5;transform:scale(1.04) translateY(-6px);box-shadow:0 20px 48px rgba(0,0,0,.55)}
.fire-card svg{position:absolute;inset:0;width:100%;height:100%}
.fire-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(1.16);transform-origin:50% 100%;transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.fire-card:hover img{transform:scale(1.21)}
.fire-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 30%,transparent 52%);pointer-events:none}
.fire-nome{position:absolute;left:10cqw;bottom:12cqw;z-index:2;font-family:"Anton",Impact,"Arial Narrow",sans-serif;font-size:13.5cqw;line-height:.98;color:#F5F3EF}
.fire-nome b{display:block;font-weight:400;color:var(--laranja)}
.fire-cargo{position:absolute;left:10cqw;right:10cqw;bottom:4cqw;z-index:2;font-size:max(11px,4.4cqw);line-height:1.2;color:#D4D4D8;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.fire-card:hover .fire-cargo{opacity:1;transform:none}
.fire .ref{margin-inline:auto}
@media (prefers-reduced-motion: reduce){.fire-faixa{overflow-x:auto}.fire-trilho{animation:none}}

/* 08. para quem é (AI Engineer, roda) */
#h-tm,#h-pat,#h-quem{font-family:"Anton",Impact,"Arial Narrow",sans-serif;font-weight:400;letter-spacing:.005em;text-transform:uppercase}
#h-tm em{font-style:normal;color:var(--laranja)}
/* o "AI"/"IA" dos títulos "AI Week para todo mundo" e "Três dias para construir com IA" é o símbolo da marca
   (o mesmo SVG do menu), na altura das maiúsculas da Anton; o texto fica para leitor de tela */
.simbolo-no-titulo{display:inline-block;height:.9em;width:calc(.9em * 522 / 602);margin-right:.06em;vertical-align:-.02em}
.everyone{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,calc(5*var(--vw)),80px);align-items:center}
.ev-lede{margin-top:24px;font-size:clamp(18px,calc(1.5*var(--vw)),21px);line-height:1.5;color:#D4D4D8;max-width:38ch}
.ev-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 26px;margin-top:40px;padding:clamp(22px,calc(3*var(--vw)),40px);border:1px solid #1f1f22;border-radius:18px;background:#070708;transition:opacity .25s}
.ev-card.swap{opacity:.15}
.ev-ico{display:grid;place-items:center;width:60px;height:60px;border:1px solid #3a3a3e;border-radius:50%;color:#D4D4D8}
.ev-ico svg{width:28px;height:28px}
.ev-card h3{font-size:clamp(21px,calc(2*var(--vw)),26px);font-weight:700;letter-spacing:-.02em;color:#E4E4E7}
.ev-card p{grid-column:1/-1;margin-top:8px;font-size:clamp(16px,calc(1.35*var(--vw)),19px);line-height:1.55;color:#A1A1AA}
.orbit{position:relative;width:100%;max-width:640px;margin-inline:auto;aspect-ratio:1;container-type:inline-size}
.orbit-bg{position:absolute;inset:-4%;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.5px);background-size:22px 22px;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.orbit-ring{position:absolute;inset:9%;border:1px solid rgba(255,255,255,.13);border-radius:50%}
.orbit-core{position:absolute;inset:29%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,.02) 58%,transparent 72%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.core-logo{display:grid;justify-items:center;padding:1.2cqw 2.6cqw 1.6cqw;border:1.3cqw solid #fff;line-height:.86;box-shadow:0 0 70px rgba(255,255,255,.14)}
.core-logo b{font-size:11.5cqw;font-weight:800;letter-spacing:-.05em;color:#fff}
.core-logo small{margin-top:.8cqw;margin-right:-.5em;font-size:3.1cqw;font-weight:700;letter-spacing:.5em;color:#fff}
.core-marca .logo-svg{display:block;width:22cqw;height:auto;filter:drop-shadow(0 0 36px rgba(255,106,26,.3))}
.orbit-rot{position:absolute;inset:0;transform:rotate(calc(var(--phi,0) * 1deg));transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.node{position:absolute;left:50%;top:50%;width:max(40px,9.4cqw);height:max(40px,9.4cqw);transform:translate(-50%,-50%) rotate(calc(var(--a) * 1deg)) translateY(-41cqw) rotate(calc((var(--a) + var(--phi,0)) * -1deg));transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.node-btn{display:grid;place-items:center;width:100%;height:100%;border:1px solid #3a3a3e;border-radius:50%;background:#0A0A0B;color:#A1A1AA;cursor:pointer;transition:background-color .3s,color .3s,box-shadow .3s,border-color .3s}
.node-btn:hover{color:#fff;border-color:#6b6b72}
.node-btn svg{width:46%;height:46%}
.node.on .node-btn{background:#fff;border-color:#fff;color:#000;box-shadow:0 0 34px rgba(255,255,255,.28)}
.node-lbl{position:absolute;top:calc(100% + 8px);left:50%;display:grid;justify-items:center;gap:6px;transform:translateX(-50%);white-space:nowrap;font-size:clamp(12px,2.7cqw,17px);font-weight:500;color:#8B8B92;pointer-events:none;transition:color .3s}
.node.on .node-lbl{color:#fff;font-weight:700}
.badge{padding:2px 7px;border-radius:4px;background:var(--laranja);color:#1A0802;font-size:10.5px;font-weight:800;letter-spacing:.04em}
@media (max-width:900px){.everyone{grid-template-columns:1fr}.ev-card{margin-top:28px}}
@media (max-width:700px){.node:not(.on) .node-lbl{opacity:0}}

/* 07. patrocinadores (a dobra de clientes da arquiteteia.com: duas fileiras de logos
   em sentidos opostos, bordas que somem e a fita de linhas atrás; terracota -> amarelo) */
.pat{position:relative;isolation:isolate;overflow:hidden}
.pat-head{display:grid;gap:14px;justify-items:center;text-align:center}
.pat-lead{font-size:clamp(16px,calc(1.2*var(--vw)),18px);color:#A1A1AA}
.pat-palco{position:relative;margin-top:clamp(56px,calc(9*var(--vh)),104px)}
.pat-master{position:relative;display:grid;gap:16px;justify-items:center;margin-bottom:clamp(28px,calc(4*var(--vh)),40px)}
.pat-master-tag{margin:0;font-weight:700;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--laranja)}
.pat-master-lista{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;list-style:none;margin:0;padding:0}
/* os três Master: o mesmo logo provisório da fita de baixo, 1,4 vez maior (zoom amplia letra e marca juntas) */
.pat-logo--master{zoom:1.4;opacity:.95}
.pat-linhas{position:absolute;inset:-70% 0 -60% 0;z-index:-1;overflow:hidden;pointer-events:none;color:rgba(255,106,26,.32)}
.pat-fita{position:absolute;top:0;left:0;width:calc(max(100%,1100px) * 2);height:100%;animation:pat-linhas 140s steps(2520) infinite;will-change:transform}
.pat-linhas svg{display:block;width:100%;height:100%}
.pat-linhas path{vector-effect:non-scaling-stroke}
@keyframes pat-linhas{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.pat-faixa{height:64px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.pat-brilho{width:min(1100px,90%);height:1px;margin:30px auto;background:linear-gradient(90deg,transparent,rgba(255,106,26,.6) 50%,transparent);box-shadow:0 0 22px 2px rgba(255,106,26,.22)}
.pat-trilho{display:flex;align-items:center;gap:40px;width:max-content;height:100%;padding-right:40px;animation:pat-desliza 24.8s linear infinite;will-change:transform}
.pat-trilho--volta{animation-direction:reverse}
@keyframes pat-desliza{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.pat-faixa:hover .pat-trilho,.pat-faixa:focus-within .pat-trilho{animation-play-state:paused}
.pat-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:10px;width:216px;color:#fff;opacity:.82;white-space:nowrap;transition:opacity .3s}
.pat-logo:hover{opacity:1}
.pat-logo svg{flex:none;width:28px;height:28px}
.pl-1{font-weight:600;font-size:21px;letter-spacing:-.02em}
.pl-2{font-weight:400;font-size:15px;letter-spacing:.3em;text-transform:uppercase}
.pl-3{font-family:var(--f-mono);font-weight:500;font-size:18px;text-transform:lowercase}
.pl-4{font-family:var(--f-pixel);font-weight:900;font-size:22px}
.pl-5{font-weight:800;font-size:22px;letter-spacing:-.045em;text-transform:uppercase}
.pl-6{font-weight:300;font-size:19px;letter-spacing:.1em;text-transform:uppercase}
.pat-cta{display:flex;justify-content:center;margin-top:clamp(56px,calc(8*var(--vh)),88px)}
@media (max-width:600px){.pat-logo{width:168px}.pat-trilho{gap:24px;padding-right:24px;animation-duration:18.6s}.pat-master-lista{gap:16px}.pat-logo--master{zoom:1.15}}
@media (prefers-reduced-motion: reduce){
  .pat-fita{animation:none}
  .pat-faixa{height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .pat-trilho{width:100%;flex-wrap:wrap;justify-content:center;row-gap:24px;padding-right:0;animation:none}
  .pat-trilho > [aria-hidden="true"]{display:none}
}

/* QUEM SOMOS: IA em escala (30/09/2026, Davi: "efeito UAU da Arquiteteia... que leve pro arquiteteia.com";
   "mostrar que mexemos com audiovisual, mas acima de tudo o uso massivo de IA"). O quadro final: o render do
   Kohls (projeto da Arquiteteia, kohls-dourado-04-silhueta do site dela), a logo real dela, uma frase e o
   chamado. Sem JS e com movimento reduzido fica só este quadro, estático. Com animação (home.js, bloco 09,
   liga .qs--anima) um canvas cobre o palco: a grade de quadros gerados em paralelo, o mergulho no Kohls e o
   traço do monograma. O render que a cena desenha segue a MESMA regra de posição do .qs-render daqui
   (topo 96px, pé 24px, object-position 75% no largo; 210% da largura e centro em 55,3% no estreito). */
.qs{position:relative;background:#000;color:#fff;font-family:var(--f-texto)}
.qs-palco{position:relative;height:calc(100*var(--svh));min-height:560px;overflow:hidden;background:#000}
.qs-render{position:absolute;top:96px;left:0;width:100%;height:calc(100% - 120px);object-fit:contain;object-position:75% 50%;pointer-events:none}
.qs-tela{display:none}
.qs-link{position:absolute;inset:0;z-index:2;display:block;color:#fff;text-decoration:none}
.qs-link:focus-visible{outline:none}
.qs-marca{--fim:1;position:absolute;left:calc(7*var(--vw));top:50%;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(24px,calc(2.6*var(--vw)),40px);width:calc(27*var(--vw));opacity:var(--fim);transform:translateY(calc(-50% + (1 - var(--fim)) * 28px))}
.qs-logo{display:block;width:100%;height:auto}
.qs-cta{height:auto;min-height:44px;padding:12px 22px;font-family:var(--f-texto);font-weight:600;font-size:clamp(14px,calc(1*var(--vw)),16px);letter-spacing:.02em}
.qs-cta .arq{font-weight:700;letter-spacing:.12em}
.qs-link:hover .qs-cta{background:#fff}
/* a dobra inteira é o link: o foco aparece no botão, com anel duplo (branco e preto) */
.qs-link:focus-visible .qs-cta{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px #000}
.qs-link:focus-visible .qs-marca{--fim:1 !important}
.qs-frase{font-size:clamp(12px,calc(.86*var(--vw)),15px);font-weight:500;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#B3B3B3}
.qs--anima .qs-render{visibility:hidden}
.qs--anima .qs-tela{position:absolute;inset:0;display:block;width:100%;height:100%}
/* telas estreitas: só encaminhado (a adaptação mobile vem depois): o prédio em cima, a marca embaixo */
@media (max-width:820px){
  .qs-render{top:88px;left:50%;width:210%;height:auto;object-fit:fill;transform:translateX(-55.3%)}
  .qs-marca{left:20px;right:20px;top:auto;bottom:32px;align-items:center;width:auto;transform:translateY(calc((1 - var(--fim)) * 28px))}
  .qs-logo{width:min(100%,320px)}
  .qs-frase{text-align:center}
}

/* 10. FAQ (Vercel Ship) */
.pixel{font-family:var(--f-pixel);font-weight:900;font-size:clamp(44px,calc(6.4*var(--vw)),104px);line-height:.95;letter-spacing:-.01em}
.faq{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:clamp(24px,calc(4*var(--vw)),64px);align-items:start}
.faq-left{position:sticky;top:calc(env(safe-area-inset-top,0px) + 110px);min-height:340px}
.faq-left .pixel{font-size:clamp(56px,calc(6.4*var(--vw)),96px);margin-top:clamp(20px,calc(3*var(--vw)),48px)}
.mascot{position:absolute;display:block;image-rendering:pixelated;color:#E4E4E7;--m-g:#4A4A50}
/* sobre dobra clara (home.js, "O CONTRASTE"), o bichinho fica preto para não sumir */
.mascot.no-claro{color:#080808;--m-g:#9A9A9A}
.mascot rect{fill:currentColor;transition:fill .35s}
.mascot rect.g{fill:var(--m-g)}
.mascot svg{display:block;width:100%;height:auto}
.m1{left:-8px;top:190px;width:84px}
.m2{right:4%;top:120px;width:76px;transform:rotate(-12deg)}
/* a trilha dos bichinhos (home.js): em tela larga eles saem da coluna do título e andam pelo site
   inteiro numa camada fixa, posicionados só por transform (abaixo do menu, que é z-index 30) */
.faq{position:relative}
.trilha-palco{position:fixed;inset:0;z-index:25;pointer-events:none;overflow:hidden}
.trilha-palco .mascot{left:0;top:0;right:auto;bottom:auto;animation:none;transform-origin:0 100%;will-change:transform}
@media (prefers-reduced-motion: no-preference){
  .m1{animation:bob 3.6s ease-in-out infinite}
  .m2{animation:bob2 4.2s ease-in-out infinite}
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes bob2{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-10px)}}
.faq-list{border-top:1px dashed #2a2a2d}
.qa{border-bottom:1px dashed #2a2a2d}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:clamp(24px,calc(2.6*var(--vw)),40px);cursor:pointer;list-style:none;font-weight:500;font-size:clamp(21px,calc(2.1*var(--vw)),34px);letter-spacing:-.025em;line-height:1.2}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:#fff}
.plus{position:relative;flex:none;width:32px;height:32px;margin-right:clamp(0px,calc(1*var(--vw)),16px);transition:transform .25s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;background:#A1A1AA;transform:translate(-50%,-50%)}
.plus::before{width:100%;height:1.5px}
.plus::after{width:1.5px;height:100%}
.qa[open] .plus{transform:rotate(45deg)}
.qa p{max-width:62ch;padding-bottom:clamp(24px,calc(2.6*var(--vw)),36px);font-size:clamp(16px,calc(1.35*var(--vw)),19px);line-height:1.6;color:#A1A1AA}
@media (max-width:820px){.faq{grid-template-columns:1fr}.faq-left{position:relative;top:auto;min-height:200px}.m1{top:auto;bottom:0;left:auto;right:30%;width:64px}.m2{top:24px;width:60px}}

/* links das dobras para as subpáginas */
.fire .dobra-mais,.pat-cta{justify-content:center}
.pat-cta{flex-wrap:wrap;gap:12px}
/* os rótulos da roda passam da borda em telas estreitas (mesmo invisíveis, com opacity:0); corta sem criar rolagem */
#para-quem{overflow-x:clip}
.faq-list .dobra-mais{margin-top:clamp(28px,calc(3*var(--vw)),40px)}

/* ajustes da home (menu fixo de 73px) */
html{scroll-padding-top:73px}


#palestrantes .dobra-mais{margin-top:clamp(8px,calc(2*var(--vh)),24px)}



/* 10. FAQ: na home ficam as 6 primeiras perguntas; a lista completa vai para faq.html */
#faq .faq-list .qa:nth-of-type(n+7){display:none}

/* ============ 08c. AGENTE: terminal de IA embutido na dobra "para quem é" (30/09/2026) ============
   A pedido do Davi: deixou de ser dobra própria e passou a viver dentro de #para-quem, logo abaixo
   da coluna de texto/roda (.everyone), ocupando a largura do .wrap da seção. Bolinhas nas cores
   reais de janela (vermelho/amarelo/verde, não o laranja da marca), fundo escuro próprio, fonte
   mono do site e laranja da marca só nos prompts e links. A janela tem altura fixa e rola por
   dentro; a página não se move quando chega mensagem nova. */
.agente-term{width:100%;margin-top:clamp(40px,calc(5*var(--vw)),64px);border:1px solid rgba(255,255,255,.14);border-radius:var(--raio-janela);corner-shape:squircle;overflow:hidden;background:#0A0A0C;font-family:var(--f-mono);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 60px -30px rgba(255,106,26,.35)}
.agente-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);background:#141416}
.agente-bar i{width:12px;height:12px;border-radius:50%}
.agente-bar i.a-r{background:#FF5F57}
.agente-bar i.a-y{background:#FEBC2E}
.agente-bar i.a-g{background:#28C840}
.agente-bar span{margin-left:10px;font-size:12.5px;color:#B3B3B3}
.agente-body{padding:clamp(16px,calc(2*var(--vw)),22px)}
.agente-log{height:clamp(220px,calc(30*var(--vh)),320px);overflow-y:auto;overflow-x:hidden;padding-right:6px;font-size:clamp(13px,calc(1*var(--vw)),15px);line-height:1.55}
.agente-linha{margin:0 0 12px;overflow-wrap:anywhere}
.agente-linha .p{margin-right:.4em;color:var(--laranja);font-weight:700}
.agente-pergunta{color:#E4E4E7}
.agente-resposta{color:#D4D4D8}
.agente-resposta a{color:var(--laranja);text-decoration:underline;text-underline-offset:.25em}
.agente-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 14px}
.agente-chip{padding:6px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:transparent;color:#D4D4D8;font-family:var(--f-mono);font-size:12.5px;cursor:pointer;transition:border-color .2s,color .2s}
.agente-chip:hover,.agente-chip:focus-visible{border-color:var(--laranja);color:var(--laranja)}
.agente-form{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.agente-prompt{color:var(--laranja);font-weight:700}
.agente-input{flex:1;min-width:0;padding:6px 0;background:transparent;border:0;color:#F5F3EF;font-family:var(--f-mono);font-size:clamp(13px,calc(1*var(--vw)),15px);outline:0;caret-color:var(--laranja)}
.agente-input::placeholder{color:#55555C}
.agente-cursor{color:var(--laranja);font-weight:700}
@media (prefers-reduced-motion: no-preference){.agente-cursor{animation:agente-blink 1.05s steps(1) infinite}}
@keyframes agente-blink{50%{opacity:0}}
/* enquanto a resposta do agente não chega, o cursor pisca na linha dela */
.agente-linha .texto.espera::after{content:"_";color:var(--laranja);font-weight:700}
@media (prefers-reduced-motion: no-preference){.agente-linha .texto.espera::after{animation:agente-blink 1.05s steps(1) infinite}}
@media (max-width:640px){.agente-log{height:clamp(200px,calc(38*var(--vh)),280px)}}

/* 11. rodapé */