/* AI Week – by Arquiteteia: estilos comuns a todas as páginas (tokens, base, placeholders, botões, nav, estrutura e rodapé).
   Texto a preencher tem class="ph" no HTML ou vem entre [colchetes] nos dados dos scripts. */
[hidden]{display:none!important}img{max-width:100%}
/* Cinzel, local (arquivo e licença OFL em assets/fontes/) */
@font-face{font-family:"Cinzel";src:url("fontes/Cinzel-Variable.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
/* o nome Arquiteteia, em qualquer lugar do site, sai na fonte da Arquiteteia: caixa alta espaçada, como no
   arquiteteia.com, um pouco menor que o texto em volta para não gritar no meio da frase */
.arq{font-family:var(--f-arq);font-weight:500;font-size:.9em;letter-spacing:.1em;text-transform:uppercase;font-style:normal}
:root{
  color-scheme:dark;
  --bg:#000000; --panel:#0A0A0B; --line:#262629; --line-2:#18181B;
  --text:#F4F4F5; --soft:#D4D4D8; --muted:#8B8B92; --dim:#55555C;
  --laranja:#FF6A1A; --orange:#F0642B; --grey:#7C8394; --green:#22C55E;
  --ph-line:#E8AE2E; --ph-fill:rgba(232,174,46,.22); --ph-text:#F3CF7E;
  --f-sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --f-pixel:"Doto","Geist Mono",ui-monospace,monospace;
  /* identidade visual (docs/identidade-visual.md): Barlow Condensed ExtraBold nos títulos, Inter nos textos */
  --f-titulo:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --f-texto:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* a fonte da Arquiteteia (a do arquiteteia.com: Cinzel no papel da Trajan Pro do guia da marca), só no nome */
  --f-arq:"Cinzel","Trajan Pro",serif;
  /* medidas de tela: use calc(N*var(--vw)) no lugar de Nvw (e --vh, --svh). Em telas grandes elas descontam
     o zoom do "tamanho de referência" (fim deste arquivo); nas outras valem 1vw, 1vh, 1svh */
  --vw:1vw; --vh:1vh; --svh:1svh;
  /* cantos das janelas de terminal (os cardzinhos com as três bolinhas do Mac): curva contínua como as da Apple,
     com corner-shape:squircle junto (quem não suporta mostra o arredondado comum, também discreto) */
  --raio-janela:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
p,dl,dd,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--laranja);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:clamp(16px,calc(4*var(--vw)),48px)}
/* dobras da home: 96px em cima e embaixo no tamanho de referência (o maior passo da escala do kit); duas dobras
   pretas encostadas somam 192px entre um conteúdo e outro, com a linha no meio (antes eram 256px, pedido da equipe em 29/09) */
.sec{padding-block:clamp(56px,calc(6.25*var(--vw)),96px);border-top:1px solid var(--line-2)}
.eyebrow-y{font-weight:700;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--laranja)}
.h-sans{font-weight:700;font-size:clamp(36px,calc(5*var(--vw)),64px);letter-spacing:-.035em;line-height:1.02}
.note{margin-top:16px;font-size:14px;color:var(--muted)}

/* placeholders */
.ph-on .ph{background-image:repeating-linear-gradient(135deg,var(--ph-fill) 0 5px,transparent 5px 10px);box-shadow:inset 0 -1.5px 0 var(--ph-line);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ph-on [data-ph]{outline:1px dashed var(--ph-line);outline-offset:-1px}
.ref{display:none;align-items:baseline;gap:8px;width:fit-content;max-width:100%;margin-top:18px;font-family:var(--f-mono);font-size:11.5px;line-height:1.55;color:var(--ph-text);border:1px dashed var(--ph-line);border-radius:4px;padding:6px 10px}
.ref::before{content:"REF";flex:none;font-weight:700;background:var(--ph-line);color:#1A1200;padding:0 5px;border-radius:2px}
.ph-on .ref{display:inline-flex}
.ph-toggle{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 12px;border:1px solid #3a3a3e;border-radius:999px;background:#fff;color:#000;font:600 13px/1 var(--f-sans);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.ph-toggle .sw{position:relative;width:30px;height:18px;border-radius:9px;background:#A1A1AA;transition:background-color .2s}
.ph-toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s}
.ph-toggle[aria-pressed="true"] .sw{background:var(--ph-line)}
.ph-toggle[aria-pressed="true"] .sw::after{transform:translateX(12px)}
.ph-toggle .n{font-family:var(--f-mono);font-size:11px;color:#55555C}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;border-radius:999px;background:var(--laranja);color:#1A0802;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;transition:background-color .15s}
.btn:hover{background:#fff}
.btn-out{display:inline-flex;align-items:center;gap:14px;padding:18px 24px;border:1px solid #3a3a3e;font-family:var(--f-mono);font-weight:700;font-size:15px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:#fff;transition:background-color .15s,color .15s}
.btn-out:hover{background:#fff;color:#000}
.btn-out svg{width:18px;height:18px}
.dobra-mais{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,calc(4*var(--vw)),48px)}

/* LOGO DA UNICAMP (30/09/2026): uso PROVISÓRIO, ainda sem autorização confirmada (docs/contexto.md, "Uso
   da marca Unicamp"). Todo logo da Unicamp no site tem a classe .unicamp; para tirar todos de uma vez antes
   de ir ao ar, se a autorização não vier: .unicamp{display:none!important}. Arquivos em marca/unicamp/.
   .unicamp-ico é o logo completo (emblema e UNICAMP embaixo) ao lado de "FCA Unicamp" num rótulo: a linha
   vira uma fileira alinhada pelo meio, para o logo ter altura para o nome dele ser lido */
.unicamp-ico{display:block;flex:none;width:auto;height:44px}
:has(> .unicamp-ico){display:flex;align-items:center;flex-wrap:wrap;column-gap:.7em;row-gap:6px}

/* nav: o HOLOFOTE (escolhido pela equipe em 30/09/2026, entre três propostas). Barra fosca que flutua com um
   dedo de margem das bordas; um brilho laranja segue o mouse e acende a linha de baixo; nos links, o texto rola
   e um marcador desliza até o link; à direita, a data e o local ao lado do botão de inscrição; embaixo, a linha
   laranja do quanto da página já foi percorrido. Sem contagem e sem painel embaixo dos links (tirados a pedido
   da equipe). O que é só enfeite (marcador, data, linha) o base.js monta; sem JS fica a barra com os links.
   No celular, os links abrem num menu. */
.topnav{--nav-m:16px;position:sticky;top:calc(var(--nav-m) + env(safe-area-inset-top,0px));z-index:30;margin:var(--nav-m) var(--nav-m) 0;
  border-radius:22px;background:rgba(8,8,8,.82);-webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
  --mx:-400px;--my:-400px;--luz:0}
/* o holofote e a linha acesa ficam numa camada recortada pelos cantos da barra */
.nav-luz{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.nav-luz::before{content:"";position:absolute;inset:0;opacity:var(--luz);transition:opacity .4s;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,106,26,.16),transparent 70%)}
.nav-luz::after{content:"";position:absolute;left:0;right:0;top:71px;height:1px;opacity:var(--luz);transition:opacity .4s;
  background:linear-gradient(90deg,transparent calc(var(--mx) - 220px),rgba(255,106,26,.9) var(--mx),transparent calc(var(--mx) + 220px))}
.nav-prog{position:absolute;left:22px;right:22px;top:71px;height:2px;background:var(--laranja);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.topnav .nav-in{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;max-width:none;height:72px;padding-inline:28px 14px}

/* a marca (30/09/2026): o símbolo laranja é o "AI", centralizado na altura da barra; ao lado, um bloco só,
   também centralizado: o WEEK em cima e o "by ARQUITETEIA" embaixo, começando alinhado com o W. Em grade:
   o símbolo e a Unicamp ocupam as duas linhas, o WEEK e o "by" empilham na coluna do meio.
   --h é a altura das maiúsculas do WEEK; --ai, a altura do desenho do símbolo */
.nav-marca{--h:21px;--ai:40px;display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto auto;align-content:center;align-self:center;column-gap:calc(var(--h)*.45);row-gap:7px;justify-self:start;text-decoration:none;white-space:nowrap;color:var(--laranja)}
.nav-marca svg{grid-column:1;grid-row:1/3;align-self:center;display:block;width:auto;height:calc(var(--ai)/.96)}
.nav-week{grid-column:2;grid-row:1;align-self:end;display:block;font:800 calc(var(--h)/.727)/1 var(--f-texto);letter-spacing:-.01em;text-transform:uppercase;color:var(--laranja);text-box:trim-both cap alphabetic}
.nav-by{grid-column:2;grid-row:2;align-self:start;display:block;font:400 11px/1 var(--f-texto);color:#B3B3B3;text-box:trim-both cap alphabetic}
.nav-by .arq{font-size:11px;letter-spacing:.14em;color:#E6E6E6}
/* a parceria com a Unicamp, dita sem palavras: um traço fino e o logo oficial completo (emblema e UNICAMP
   embaixo, como no arquivo da equipe), na mesma linha da assinatura, quase da altura da barra */
.nav-parceria{grid-column:3;grid-row:1/3;display:flex;align-items:center;gap:14px;align-self:center;margin-left:10px}
.nav-parceria::before{content:"";width:1px;height:34px;background:rgba(255,255,255,.28)}
.nav-parceria img{display:block;width:auto;height:54px}

.nav-links{position:relative;justify-self:center;display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.nav-links a{position:relative;z-index:1;display:block;height:36px;padding:0 16px;overflow:hidden;border-radius:999px;font:500 14px/36px var(--f-texto);color:#B3B3B3;text-decoration:none;white-space:nowrap}
.nav-links a[aria-current="page"]{color:#fff}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--laranja)}
/* o texto rola: a cópia branca de baixo sobe no lugar da de cima */
.nav-links a .rl{display:block;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.nav-links a .rl+.rl{position:absolute;left:16px;right:16px;top:100%;color:#fff}
.nav-links a:hover .rl,.nav-links a.on .rl{transform:translateY(-100%)}
.nav-marcador{position:absolute;top:5px;left:0;height:36px;border-radius:999px;background:#1b1b1b;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,106,26,.35);
  opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),width .5s cubic-bezier(.22,1,.36,1),opacity .3s;pointer-events:none}
.nav-marcador::after{content:"";position:absolute;left:50%;bottom:-6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--laranja);box-shadow:0 0 10px var(--laranja)}

.nav-dir{display:flex;align-items:center;justify-content:flex-end;gap:20px}
.nav-quando{margin:0;font:500 10px/1.35 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#B3B3B3;text-align:right;white-space:nowrap}
.topnav .btn svg{width:14px;height:14px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.topnav .btn:hover svg{transform:translateX(3px)}

.nav-menu{display:none;place-content:center;gap:6px;width:44px;height:44px;padding:0;border:1px solid #3a3a3e;border-radius:50%;background:transparent;cursor:pointer}
.nav-menu span{display:block;width:18px;height:1.5px;background:#fff;transition:transform .2s}
.topnav.aberto .nav-menu span:first-child{transform:translateY(3.75px) rotate(45deg)}
.topnav.aberto .nav-menu span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
@media (max-width:1320px){.nav-quando{display:none}}
@media (max-width:1180px){.nav-by{display:none}.nav-week{grid-row:1/3;align-self:center}.nav-links a{padding:0 11px}}
@media (max-width:960px){
  .topnav{--nav-m:10px;border-radius:18px}
  .topnav .nav-in{display:flex;justify-content:space-between;height:64px;padding-inline:18px 10px}
  .nav-marca{--h:18px;--ai:34px}
  .nav-parceria img{height:46px}
  .nav-luz::after,.nav-prog{top:63px}
  .nav-menu{display:grid}
  .nav-marcador{display:none}
  .nav-links{position:absolute;top:calc(100% + 8px);left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 18px 12px;border-radius:18px;background:#080808}
  .topnav.aberto .nav-links{display:flex}
  .nav-links a{height:auto;padding:14px 0;border-radius:0;border-bottom:1px solid var(--line-2);font-size:17px;line-height:1.3}
  .nav-links a[aria-current="page"]::after{display:none}
}
@media (max-width:420px){.nav-by,.nav-parceria{display:none}}
@media (prefers-reduced-motion:reduce){.topnav *,.topnav *::before,.topnav *::after{transition:none!important;animation:none!important}}

/* estrutura: área reservada para o conteúdo que ainda não foi definido */
.slot{display:grid;place-items:center;min-height:260px;padding:24px;border:1px dashed #3a3a3e;border-radius:12px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 10px,transparent 10px 20px);font-family:var(--f-mono);font-size:13px;line-height:1.6;color:var(--muted);text-align:center}
.slot b{display:block;margin-bottom:4px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.slot-sm{min-height:180px}
.esq-h{margin-top:14px;margin-bottom:clamp(32px,calc(4*var(--vw)),56px)}

/* subpáginas: cabeçalho e corpo */
.pag-topo{padding-block:clamp(48px,calc(7*var(--vw)),104px) clamp(32px,calc(4*var(--vw)),56px)}
.pag-volta{display:inline-block;margin-bottom:28px;font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.pag-volta:hover{color:#fff}
.pag-topo h1{margin-top:14px;font-weight:700;font-size:clamp(44px,calc(7*var(--vw)),104px);line-height:.98;letter-spacing:-.04em}
.pag-lede{margin-top:20px;max-width:52ch;font-size:clamp(18px,calc(1.5*var(--vw)),21px);color:var(--soft)}
.pag-corpo{padding-bottom:clamp(72px,calc(9*var(--vw)),128px)}

/* rodapé (o da arquiteteia.com, com AI WEEK) */
.rodape{padding-block:clamp(28px,calc(4*var(--vw)),56px) calc(clamp(22px,calc(2.6*var(--vw)),34px) + 64px + env(safe-area-inset-bottom,0px));background:#0A0A0B;border-top:1px solid var(--line-2);color:#F4F4F5}
.rodape__cta{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(18px,calc(2.2*var(--vw)),30px) clamp(18px,calc(2*var(--vw)),28px);background:var(--laranja);color:#0A0A0B;font-weight:600;font-size:clamp(1.45rem,calc(2.7*var(--vw)),2.6rem);line-height:1;letter-spacing:-.01em;text-transform:uppercase;text-decoration:none}
.rodape__cta::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.rodape__cta:hover::before,.rodape__cta:focus-visible::before{transform:scaleX(1)}
.rodape__cta:focus-visible{outline:2px solid #F4F4F5;outline-offset:3px}
.rodape__cta-seta{flex:none;display:grid;place-items:center;width:36px;height:36px;transition:transform .4s cubic-bezier(.65,0,.35,1)}
.rodape__cta:hover .rodape__cta-seta{transform:translateX(4px)}
.rodape__meio{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-top:clamp(40px,calc(5.5*var(--vw)),76px);padding-bottom:clamp(24px,calc(3*var(--vw)),40px);border-bottom:1px solid rgba(244,244,245,.12)}
/* página sem a faixa-chamada (a Inscrição): o rodapé começa direto nos links */
.rodape__meio:first-child{margin-top:0}
.rodape__nav{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;column-gap:clamp(48px,calc(9*var(--vw)),150px);row-gap:18px}
.rodape__nav ul{display:grid;gap:9px;align-content:start}
.rodape__nav a,.rodape__nav li > span{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,244,245,.78);text-decoration:none;transition:color .3s ease}
.rodape__contatos li > span{text-transform:none;letter-spacing:.06em}
.rodape__nav a:hover,.rodape__nav a:focus-visible{color:var(--laranja);outline:none}
.rodape__topo{flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(244,244,245,.22);color:#F4F4F5;transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.rodape__topo:hover,.rodape__topo:focus-visible{background:var(--laranja);border-color:var(--laranja);color:#0A0A0B;outline:none}
.rodape__topo svg{transition:transform .4s cubic-bezier(.65,0,.35,1)}
.rodape__topo:hover svg{transform:translateY(-2px)}
.marca-dagua{width:100%;overflow-x:clip;overflow-y:visible;margin-block:clamp(22px,calc(3.2*var(--vw)),46px) clamp(28px,calc(4*var(--vw)),52px);font-weight:400;font-size:calc(18*var(--vw));line-height:1;letter-spacing:.08em;white-space:nowrap;user-select:none;color:rgba(244,244,245,.09)}
.marca-dagua__linha{display:inline-block}
.md-esp{display:inline-block;width:.28em}
.md-letra{position:relative;display:inline-block;transition:color .9s ease}
.md-letra::after{content:attr(data-l);position:absolute;top:0;left:calc(50% - .04em);width:1.2em;margin-left:-.6em;text-align:center;letter-spacing:0;color:transparent;background:var(--laranja) center / cover no-repeat;-webkit-background-clip:text;background-clip:text;opacity:0;font-variation-settings:"wght" 300;transition:opacity .9s ease,font-variation-settings 1s cubic-bezier(.65,0,.35,1);pointer-events:none}
.marca-dagua.com-fotos .md-letra::after{background-image:var(--foto)}
@media (hover:hover) and (pointer:fine){
  .md-letra:hover{color:transparent;transition-duration:.3s}
  .md-letra:hover::after{opacity:1;font-variation-settings:"wght" 900;transition-duration:.3s,.45s}
}
.rodape__base{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:clamp(16px,calc(2*var(--vw)),24px);border-top:1px solid rgba(244,244,245,.12)}
.rodape__redes{display:flex;align-items:center;gap:20px}
.rodape__rede{display:block;color:#F4F4F5;transition:color .3s ease}
.rodape__rede:hover,.rodape__rede:focus-visible{color:var(--laranja);outline:none}
.rodape__icone{display:block;width:16px;height:16px}
.rodape__copy{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,244,245,.55)}
@media (max-width:720px){
  .rodape__nav{grid-template-columns:repeat(2,auto);column-gap:48px}
  .rodape__contatos{grid-column:1/-1}
  .rodape__base{flex-direction:column-reverse;align-items:flex-start;gap:16px}
}

/* ============ tamanho de referência ============
   O site é desenhado para 1536px de largura, a tela de um notebook com escala de 125%. Em telas mais
   largas, a página inteira é ampliada na mesma proporção (zoom), para ficar igual em qualquer
   monitor; a altura (720px de referência) limita a ampliação em monitores ultralargos. As medidas de
   tela (--vw, --vh, --svh) descontam o zoom, senão cresceriam duas vezes. Navegador que não entende
   a conta fica sem ampliação, como antes. */
@supports (zoom: calc(100vw / 1536px)) {
  @media (min-width: 1537px) {
    :root{
      --z: max(1, min(100vw / 1536px, 100vh / 720px));
      zoom: var(--z);
      --vw: calc(1vw / var(--z)); --vh: calc(1vh / var(--z)); --svh: calc(1svh / var(--z));
    }
  }
}