:root {
  --ink: #0a0a0a;
  --coal: #121212;
  --ash: #1c1c1c;
  --line: rgba(255,255,255,.1);
  --paper: #f1eee8;
  --paper-ink: #111;
  --muted: #8b8780;
  --ember: #ff4f0f;
  --ember-hot: #ff8a3d;
  --ember-deep: #7a1703;
  --ember-text: #e2500e; /* o laranja único de textos e números (teste: mais escuro; antes #ff6a1f, #ff8a3d e #ff4f0f misturados) */
  --ember-title: var(--ember-hot); /* o destaque dos títulos ("ensinamentos", "eventos." etc.): mais claro que o --ember-text */
  --radius: 28px;
  --gutter: clamp(16px, 4vw, 40px);
  /* o respiro entre seções: cada seção só empurra pelo topo, então o vão entre
     duas seções quaisquer é sempre exatamente uma unidade desta */
  --section-space: clamp(80px, 11vw, 160px);
  /* as rampas das luzes e do grão nas bordas das seções. Em reta, as duas rampas de uma junção chegavam ao --ink com
     inclinação e se encontravam num vinco, que o olho lia como uma linha preta entre as seções; nesta curva (um
     smoothstep elevado a 1,6) a luz encosta no zero com inclinação zero, e a junção vira um vale liso, sem aresta */
  --fade-top: transparent 0px, rgba(0,0,0,0.0033) 40px, rgba(0,0,0,0.027) 80px, rgba(0,0,0,0.086) 120px, rgba(0,0,0,0.188) 160px, rgba(0,0,0,0.33) 200px, rgba(0,0,0,0.5) 240px, rgba(0,0,0,0.677) 280px, rgba(0,0,0,0.839) 320px, rgba(0,0,0,0.956) 360px, #000 400px;
  --fade-bottom: #000 calc(100% - 520px), rgba(0,0,0,0.956) calc(100% - 468px), rgba(0,0,0,0.839) calc(100% - 416px), rgba(0,0,0,0.677) calc(100% - 364px), rgba(0,0,0,0.5) calc(100% - 312px), rgba(0,0,0,0.33) calc(100% - 260px), rgba(0,0,0,0.188) calc(100% - 208px), rgba(0,0,0,0.086) calc(100% - 156px), rgba(0,0,0,0.027) calc(100% - 104px), rgba(0,0,0,0.0033) calc(100% - 52px), transparent 100%;
  --grain-in: transparent 0%, rgba(0,0,0,0.0033) 2.5%, rgba(0,0,0,0.027) 5%, rgba(0,0,0,0.086) 7.5%, rgba(0,0,0,0.188) 10%, rgba(0,0,0,0.33) 12.5%, rgba(0,0,0,0.5) 15%, rgba(0,0,0,0.677) 17.5%, rgba(0,0,0,0.839) 20%, rgba(0,0,0,0.956) 22.5%, #000 25%;
  --grain-out: #000 75%, rgba(0,0,0,0.956) 77.5%, rgba(0,0,0,0.839) 80%, rgba(0,0,0,0.677) 82.5%, rgba(0,0,0,0.5) 85%, rgba(0,0,0,0.33) 87.5%, rgba(0,0,0,0.188) 90%, rgba(0,0,0,0.086) 92.5%, rgba(0,0,0,0.027) 95%, rgba(0,0,0,0.0033) 97.5%, transparent 100%;
  --display: "Archivo", "Arial Black", sans-serif;
  --body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* film grain */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--ember); color: var(--ink); }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.display {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .92;
  margin: 0;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: .02em;
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--ember);
  box-shadow: 0 0 12px var(--ember);
}
.tag { color: var(--ember-text); font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 6px 6px 6px 20px; border-radius: 999px;
  font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, color .3s;
}
.btn .dot {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.btn svg { width: 14px; height: 14px; }
/* keep rotating icons on their own layer so they don't snap to the pixel grid when the transition ends */
.btn .dot, .nav-cta-dot, .event-arrow, .school-go, .photo-zoom { will-change: transform; backface-visibility: hidden; }
.btn:hover .dot { transform: rotate(-45deg); }
.btn:active { transform: scale(.97); }
.btn-ember { background: var(--ember); color: var(--ink); }
.btn-ember .dot { background: var(--ink); color: var(--ember); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light .dot { background: var(--ember); color: var(--ink); }
.btn-ghost { border: 1px solid rgba(255,255,255,.25); color: #fff; }
.btn-ghost .dot { background: rgba(255,255,255,.1); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* ---------- menu: o chrome do slide ---------- */
/* No alto da página (.is-top, posto pelo main.js) o menu faz parte do slide 00: sem caixa, sobre a luz do hero, com a
   linha fina embaixo (como a do pé do hero), e o nome alinhado ao "Felipe" gigante. Ao rolar, vira a cápsula de vidro
   fosco das abas das Palestras (.deck-tabs), com a mesma receita; sem JS, fica sempre cápsula. A altura (14 + 60 px) é
   a que a barra das Palestras deixa livre (--top) */
.nav {
  --nav-pad: 22px;
  position: fixed; top: 14px; left: 0; right: 0; margin-inline: auto; z-index: 50;
  width: min(1320px - 2 * var(--gutter), calc(100% - 2 * var(--gutter))); height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 10px 0 var(--nav-pad); border-radius: 999px;
  background: rgba(14,10,8,.42); box-shadow: 0 18px 50px -24px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
}
/* a linha fina do slide; só no alto da página */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: rgba(255,255,255,.35); opacity: 0;
}
/* as transições só depois do primeiro quadro, para o menu não "apagar" a cápsula ao carregar */
.nav.is-ready { transition: background .5s, box-shadow .5s, -webkit-backdrop-filter .5s, backdrop-filter .5s; }
.nav.is-ready::after { transition: opacity .5s; }
/* no alto, a marca e o convite encostam nas pontas da linha fina. O padding da cápsula não muda: eles andam por
   transform, numa camada própria. Animar o padding (layout) deixava a caixa do convite em frações de pixel durante o
   fim da curva, e ela dava um pulo ao assentar no pixel inteiro */
.nav .logo, .nav-actions { will-change: transform; backface-visibility: hidden; }
.nav.is-ready .logo, .nav.is-ready .nav-actions { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.nav.is-top:not(.menu-open) .logo { transform: translateX(calc(-1 * var(--nav-pad))); }
.nav.is-top:not(.menu-open) .nav-actions { transform: translateX(10px); }
.nav.is-top:not(.menu-open) {
  background: rgba(14,10,8,0); box-shadow: 0 18px 50px -24px rgba(0,0,0,0);
  -webkit-backdrop-filter: none; backdrop-filter: none; /* none, e não blur(0): senão o vidro do convite não enxerga a página */
}
.nav.is-top:not(.menu-open)::after { opacity: 1; }

/* a marca, em SVG de contorno embutido no HTML (o branco vem do color do link, currentColor). No alto da página, sobre
   o hero, aparece o nome ("felipe facio.", assets/logo/nome-escuro.svg); na cápsula, depois de rolar, o monograma (o F,
   assets/logo/icone-escuro.svg). Os dois ocupam a mesma célula da grade, então a largura do link não muda na troca e
   o menu não anda. Sem JS o menu é sempre cápsula: fica o monograma */
.logo { display: grid; align-items: center; justify-items: start; flex-shrink: 0; color: #fff; }
.logo svg { display: block; width: auto; }
.logo-name, .logo-badge { grid-area: 1 / 1; }
.logo-name { height: 30px; opacity: 0; transform: translateY(-6px); }
/* o monograma vai num círculo laranja de 44 px: a cápsula tem 60 px de altura e o círculo fica a 8 px da borda
   esquerda, a mesma folga de cima e de baixo */
.logo-badge {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  margin-left: calc(8px - var(--nav-pad)); background: var(--ember);
  /* camada própria o tempo todo: sem isso o F é desenhado numa camada durante a transição e volta para a página no
     fim, caindo no pixel inteiro (o F "pulava" quando a animação terminava) */
  will-change: transform, opacity; backface-visibility: hidden;
}
/* tamanho inteiro e quadrado (o viewBox é quadrado): centrado no círculo de 44 px, o F cai em 11 px exatos */
.logo-mark { width: 22px; height: 22px; }
.nav.is-ready :is(.logo-name, .logo-badge) { transition: opacity .45s, transform .6s cubic-bezier(.16,1,.3,1); }
.nav.is-top:not(.menu-open) .logo-name { opacity: 1; transform: none; }
.nav.is-top:not(.menu-open) .logo-badge { opacity: 0; transform: scale(.82); }
@media (prefers-reduced-motion: reduce) { .nav.is-ready :is(.logo-name, .logo-badge) { transition: opacity .2s; } }
/* as cores da logo no header. O nome é todo branco, ponto final incluído. O monograma da cápsula é todo num branco a
   90%, braço do meio incluído */
.logo-ac { fill: var(--ember); }
.logo-name .logo-ac { fill: currentColor; }
.logo-mark { color: rgba(255,255,255,.9); }
.logo-mark .logo-ac { fill: currentColor; }

/* os itens: só os nomes, em Inter Tight 500, sem numeral nem linha. A seção na tela (aria-current) ganha uma pílula de
   vidro (preenchimento fraco, sem borda) com uma luz de brasa por baixo, que desliza de um item ao outro como a pílula
   das abas das Palestras; o JS mede o item (--mark-x, --mark-w) e põe .has-mark. No alto da página não há pílula */
.nav ul {
  position: relative; display: flex; gap: clamp(0px, .4vw, 6px); list-style: none; margin: 0; padding: 0;
  font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: rgba(255,255,255,.66);
}
.nav ul a {
  position: relative; z-index: 1; display: flex; align-items: center; height: 36px; padding: 0 clamp(10px, 1.1vw, 16px);
  border-radius: 999px; white-space: nowrap; transition: color .3s, background .3s;
}
.nav ul a:hover, .nav ul a[aria-current] { color: #fff; }
/* o hover, como o das abas: um preenchimento fraco no item */
.nav ul a:not([aria-current]):hover { background: rgba(255,255,255,.06); }
.nav ul::after {
  content: ""; position: absolute; z-index: 0; left: 0; top: 50%; height: 36px; margin-top: -18px; pointer-events: none;
  width: var(--mark-w, 0px); transform: translateX(var(--mark-x, 0px)); border-radius: 999px;
  background: rgba(255,255,255,.1);
  box-shadow: 0 10px 26px -10px rgba(255,79,15,.55), inset 0 -10px 18px -12px rgba(255,106,31,.5);
  opacity: 0; transition: opacity .35s;
}
.nav ul.has-mark::after {
  opacity: 1;
  transition: opacity .35s, transform .6s cubic-bezier(.16,1,.3,1), width .6s cubic-bezier(.16,1,.3,1);
}

/* o convite: pílula de preenchimento fraco, sem borda; a brasa sólida só acende no hover (cada seção já tem a sua
   peça sólida, e o hero tem o "Contratar Felipe" em branco) */
.nav-actions { display: flex; align-items: center; gap: 6px; }
/* largura fixa e inteira: a caixa não muda de tamanho quando a Inter Tight termina de carregar, nem cai em fração
   de pixel (que estalava no fim das transições) */
.nav-cta {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 124px; height: 40px; padding: 0 5px 0 18px; border-radius: 999px;
  background: rgba(255,255,255,.1); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background .3s;
}
/* antes do primeiro quadro (sem .is-ready) nada transiciona: o convite não clareia e escurece ao carregar */
.nav:not(.is-ready) :is(.nav-cta, .nav-cta-dot, .nav-toggle) { transition: none; }
.nav.is-top:not(.menu-open) :is(.nav-cta, .nav-toggle) { background-color: rgba(14,10,8,.38); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav-cta-dot {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: var(--ember-hot);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s, color .3s;
}
.nav-cta svg { width: 13px; height: 13px; }
.nav-cta:hover { background: rgba(255,255,255,.16); }
.nav-cta:hover .nav-cta-dot { background: var(--ember); color: var(--ink); transform: rotate(-45deg); }
.nav-toggle, .nav-mobile-contact { display: none; }
.nav-toggle {
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff; cursor: pointer;
  place-items: center; align-content: center; gap: 4px; transition: background .3s;
}
.nav-toggle:hover, .nav.menu-open .nav-toggle { background: rgba(255,255,255,.18); }
.nav-toggle span {
  display: block; width: 14px; height: 1.5px; border-radius: 2px;
  background: currentColor; transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s;
}
.nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- hero: o slide de abertura ---------- */
/* A seção é o palco e o slide 00 do deck das Palestras. O laranja da 01 vem em duas faixas diagonais, no alto e no pé,
   com o preto liso no meio; o nome entra em Inter Tight gigante, à esquerda, e passa por trás do retrato, que fica à
   direita com o giroscópio de metal em 3D/ASCII como halo atrás da cabeça (canvas do main.js, "Hero"). Tudo se mede pela altura
   do retrato (--fig-h), pelo eixo da cabeça (--head-x) e pelo corpo do nome (--name) */
.hero {
  --u: clamp(9px, 1vw, 14px);
  --stage-w: calc(min(100vw, 1320px) - 2 * var(--gutter));
  --fig-h: min(98svh, 118vw, 1120px);
  --fig-w: calc(var(--fig-h) * .76);
  --fig-bleed: calc(.12 * var(--fig-h)); /* quanto o retrato passa do pé */
  /* o eixo da cabeça vem do nome: o corpo entra por trás da última letra de FACIO, em qualquer proporção de tela, sem o
     ombro direito sair pela borda */
  --stage-l: calc(max(0px, (100vw - 1320px) / 2) + var(--gutter));
  --head-x: min(calc(var(--stage-l) + 3.07 * var(--name) + .2 * var(--fig-w)), calc(100vw - .4 * var(--fig-w)));
  /* o centro da cabeça fica a 16% da altura da foto, contado do alto dela */
  --head-y: calc(100% + var(--fig-bleed) - .84 * var(--fig-h));
  /* "Felipe" ocupa ~58% do palco, sem passar de um terço da altura da tela; 2.25 é a largura da palavra por px de corpo */
  --name: min(calc(var(--stage-w) * .58 / 2.25), 32svh);
  --ease: cubic-bezier(.16,1,.3,1);
  position: relative; isolation: isolate; overflow: hidden;
  height: 100svh; min-height: 620px;
  background: var(--ink); color: #fff;
}
/* a luz é o gradiente da 01 das Palestras, com o mesmo perfil: a parede de laranja chapado com o brilho pêssego junto
   da borda, e a passagem definida pelo vermelho-escuro até o preto (as mesmas cores e paradas, na mesma proporção entre
   si), girada em duas faixas diagonais, como na referência (capa "Design skills"). Em cima ela desce da borda e a borda
   de baixo dela sobe para a direita; embaixo ela sobe da borda pelo pé inteiro, até a borda direita, um pouco mais alta
   à esquerda. O brilho de cada faixa corre deitado ao longo da borda dela, como o da 01 corre ao longo da borda
   esquerda. O meio fica no preto liso, com o nome e o apoio. Um borrão leve (3–5 px) suaviza as passagens sem lavar o perfil; a camada
   sobra além das bordas para ele não escurecê-las. Embaixo a luz não se apaga: a hero corta a camada numa linha seca,
   que é a borda de cima da faixa rolante, já no preto */
.hero::before {
  content: ""; position: absolute; inset: -24px; z-index: -2; pointer-events: none;
  filter: blur(clamp(3px, .35vw, 5px));
  background:
    radial-gradient(44% 30% at 14% 4%, rgba(255,138,72,.8), rgba(255,106,31,.3) 50%, transparent 85%),
    radial-gradient(52% 26% at 22% 100%, rgba(255,138,72,.8), rgba(255,106,31,.3) 50%, transparent 85%),
    linear-gradient(171deg, #ff6a1f 0.0%, #f2520f 7.0%, #c23d08 12.5%, #8a2806 17.0%, #4a1404 21.0%, rgba(14,6,3,.72) 25.0%, rgba(8,4,3,.4) 29.0%, rgba(5,3,2,.14) 33.5%, rgba(5,3,2,0) 38.0%),
    linear-gradient(5deg, #ff6a1f calc(24px + 0.0%), #f2520f calc(24px + 5.7%), #c23d08 calc(24px + 10.2%), #8a2806 calc(24px + 13.9%), #4a1404 calc(24px + 17.2%), rgba(14,6,3,.72) calc(24px + 20.5%), rgba(8,4,3,.4) calc(24px + 23.8%), rgba(5,3,2,.14) calc(24px + 27.5%), rgba(5,3,2,0) calc(24px + 31.2%));
}
/* o chrome do slide: o + no alto à direita, a × embaixo à direita, acima do pé, e a paginação 00 / 08 na borda direita */
.hero-chrome { z-index: 4; }
.hero-chrome .plus--tr { top: clamp(104px, 13svh, 136px); }
.hero-chrome .cross { right: calc(var(--u) * 3.4); bottom: clamp(130px, 20svh, 190px); }
.hero-page {
  position: absolute; right: calc(var(--u) * 3.4); top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  height: max(96px, calc(var(--u) * 10)); font-size: max(12px, calc(var(--u) * 1.05)); font-weight: 500; opacity: .7;
  background: linear-gradient(currentColor, currentColor) center / 1px calc(100% - 3.6em) no-repeat;
}
.hero-page b { font-weight: 500; color: var(--ember-text); }

/* o giroscópio atrás da cabeça, como um halo; passa do alto do retrato e dos dois lados dos ombros */
.hero-solid {
  --solid-w: min(.94 * var(--fig-h), 100vw);
  --solid-shift: clamp(28px, 3vw, 56px); /* um pouco à direita do eixo da cabeça */
  position: absolute; z-index: 0; pointer-events: none;
  width: var(--solid-w); aspect-ratio: 1;
  left: calc(var(--head-x) - .5 * var(--solid-w) + var(--solid-shift)); top: calc(var(--head-y) + .04 * var(--fig-h) - .5 * var(--solid-w));
  animation: hero-in 1.6s var(--ease) .5s both;
}
.hero-solid canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* a camada do giroscópio, do tamanho do hero: o contraste do menu (que no alto não tem caixa) vem dela, não de sombra
   no texto. O giroscópio se dissolve no preto antes de chegar à faixa do menu (14 + 60 px), em hero e não na caixa
   dele, que muda de lugar com a tela */
.hero-solid-layer {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 64px, rgba(0,0,0,.35) 112px, #000 190px);
  mask-image: linear-gradient(to bottom, transparent 64px, rgba(0,0,0,.35) 112px, #000 190px);
}

/* o retrato à direita, com a cabeça no eixo --head-x. O P&B e o oval que apaga o corpo no preto já vêm na imagem
   (felipe-hero-noir, com alfa) */
.hero-figure {
  position: absolute; z-index: 2; margin: 0; pointer-events: none;
  bottom: calc(-1 * var(--fig-bleed)); left: calc(var(--head-x) - .57 * var(--fig-w));
  height: var(--fig-h); aspect-ratio: 922 / 1213;
}
.hero-figure picture { display: block; width: 100%; height: 100%; animation: fig-in 1.6s var(--ease) .1s both; }
.hero-figure img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 100%;
  filter: brightness(.86) contrast(1.12);
}

/* o palco do texto: à esquerda, do menu até o pé. Sem z-index, para o nome ficar atrás do retrato e o resto na frente */
.hero-stage {
  position: absolute; inset: 0; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding-top: clamp(92px, 14svh, 140px); padding-bottom: clamp(96px, 16svh, 150px);
}

/* o nome: o título das Palestras no corpo de cartaz. Cada linha sobe de trás de uma régua (o recorte da linha) */
.hero-title { position: relative; margin-left: -.05em; font-size: var(--name); }
.hero-name {
  position: relative; z-index: 1; margin: 0;
  font-family: var(--body); font-weight: 500; font-size: 1em;
  letter-spacing: -.055em; line-height: .8; color: #fff6ee;
}
.hero-line { display: block; overflow: clip; padding: .02em .1em .16em 0; margin-bottom: -.16em; }
.hero-line > span { display: block; animation: line-up 1.3s var(--ease) both; }
.hero-line + .hero-line > span { animation-delay: .12s; }
.hero-line + .hero-line { padding-left: .62em; } /* FACIO entra recuado, como um degrau do slide */
@keyframes line-up { from { transform: translateY(105%); } }
/* a cópia por cima da foto: só aparece onde há imagem embaixo, deixando o nome legível sobre o paletó */
.hero-name--over {
  position: absolute; z-index: 3; inset: 0 auto auto 0;
  mix-blend-mode: overlay; opacity: .8;
}

/* o apoio dos slides, com a linha fina, logo abaixo do nome e alinhado ao recuo de FACIO */
.hero-lead {
  position: relative; z-index: 4; margin: clamp(16px, 3svh, 32px) 0 0 calc(.57 * var(--name));
  padding-left: 18px; max-width: 300px;
  font-size: clamp(15px, 1.2vw, 18px); font-weight: 500; line-height: 1.25; letter-spacing: -.025em;
  color: rgba(255,255,255,.76);
  animation: hero-in 1s var(--ease) .7s both;
}
.hero-lead::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 1px; background: rgba(255,255,255,.35); }
.hero-lead b { font-weight: 500; color: var(--ember-text); }

/* o pé: sobre uma linha fina, o índice das quatro palestras (numerais em Archivo, como as abas do deck) e o convite
   em brasa, a única peça sólida. Sem véu: a luz de baixo vai cheia até a linha seca do pé; o retrato já se apaga
   sozinho (o alfa da imagem) */
.hero-foot {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
  padding: clamp(60px, 10svh, 110px) 0 clamp(20px, 3.4svh, 36px);
  pointer-events: none;
  animation: hero-in 1s var(--ease) .8s both;
}
.hero-foot-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; pointer-events: auto;
  padding-top: clamp(14px, 2svh, 20px); border-top: 1px solid rgba(255,255,255,.16);
}
.hero-index { display: flex; gap: clamp(18px, 2.6vw, 44px); min-width: 0; }
.hero-index a {
  display: flex; align-items: baseline; gap: 10px; white-space: nowrap;
  font-size: 13px; font-weight: 500; letter-spacing: -.01em; color: rgba(255,255,255,.62);
  transition: color .25s;
}
.hero-index b {
  font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: 15px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: #120805;
}
.hero-index a:hover { color: #fff; }
/* o pé fica sobre a faixa de laranja: como na 01 das Palestras, os números passam ao preto e o texto ao branco */
.hero-index a { color: rgba(255,255,255,.9); }
.hero-foot-inner { border-top-color: rgba(255,255,255,.3); }
@keyframes fig-in { from { opacity: 0; transform: translateY(1.2%); } }
@keyframes hero-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- marquee ---------- */
.marquee {
  /* uma caixa de ponta a ponta, demarcada por duas linhas finas; a de cima corre sobre a linha seca do pé da hero.
     O texto some nas pontas sob duas camadas da cor do fundo (no lugar da máscara, que apagaria as linhas também) */
  position: relative; display: flex; overflow: hidden; padding: 34px 0; user-select: none;
  border-block: 1px solid rgba(255,255,255,.16);
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: 12%; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink), rgba(10,10,10,0)); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--ink), rgba(10,10,10,0)); }
.marquee-track { display: flex; flex-shrink: 0; gap: 56px; padding-right: 56px; animation: scroll 38s linear infinite; }
.marquee-track span {
  font-family: var(--display); font-stretch: 100%; font-weight: 500; font-size: clamp(18px, 2vw, 24px);
  color: #6f6b65; white-space: nowrap; display: flex; align-items: center; gap: 56px;
}
.marquee-track span::after { content: "✳"; color: var(--ember-text); font-size: .8em; }
@keyframes scroll { to { transform: translateX(-100%); } }

/* ---------- formats (fanned cards) ---------- */
/* o vão vem sempre do topo da seção de baixo — nunca somado ao rodapé da de cima */
.section { padding: var(--section-space) 0 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head h2 { font-size: clamp(36px, 6vw, 92px); }
.section-head h2 .dim { color: #5c5852; }
.section-head p { max-width: 360px; color: var(--muted); margin: 0; }

/* container query units let the card body lock to its final open width, so text never re-wraps mid-animation */
.fan { display: flex; height: 460px; container-type: inline-size; --ease-morph: cubic-bezier(.7,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); }
.card {
  position: relative; flex: 1; min-width: 0;
  margin-left: -28px; padding: 30px; border-radius: 26px;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer; overflow: hidden; text-align: left; font: inherit; color: inherit; border: 0;
  box-shadow: -18px 0 40px rgba(0,0,0,.45);
  transition: flex-grow .8s var(--ease-morph), transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.card:first-child { margin-left: 0; }
.card.is-open { flex-grow: 3.4; }
/* everything that fades or slides stays on its own layer, so text doesn't snap to the pixel grid when a transition ends */
.card, .card-spine, .card-body > *, .card-points li, .card .glyph { will-change: transform, opacity; backface-visibility: hidden; }
/* the heading only fades — will-change: transform here would make it the icon's containing block and pull the icon out of the corner */
.card-top { will-change: opacity; }
@media (hover: hover) {
  .card:not(.is-open):hover { transform: translateY(-10px); box-shadow: -18px 18px 50px rgba(0,0,0,.55); }
  .card:not(.is-open):hover .glyph { transform: rotate(14deg) scale(1.06); }
  .card.is-open:hover .glyph { transform: rotate(-32deg) scale(1.14); }
}
.fan .card:active { transform: translateY(-4px) scale(.985); transition-duration: .8s, .15s, .5s; }
.card:nth-child(1) { background: var(--ember); color: var(--ink); }
.card:nth-child(2) { background: var(--paper); color: var(--ink); }
.card:nth-child(3) { background: #262626; }
.card:nth-child(4) { background: #050505; }
/* the heading is locked to the open card's width (minus the icon), so it never re-wraps while the card resizes;
   closed cards show a vertical "spine" title instead, and the two crossfade */
.card-top { width: calc((100cqi - 156px) * .53125 - 12px - 126px); flex-shrink: 0; opacity: 0; transition: opacity .15s; }
.card.is-open .card-top { opacity: 1; transition: opacity .45s .3s; }
.card-no { display: block; font-size: 13px; font-weight: 600; opacity: .7; }
.card h3 {
  font-family: var(--display); font-stretch: 125%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(22px, 2.4vw, 34px); line-height: .95; letter-spacing: -.02em; margin: 18px 0 0;
  overflow-wrap: anywhere;
}
.card-spine {
  position: absolute; left: 30px; bottom: 30px; max-height: calc(100% - 60px); overflow: hidden;
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font-family: var(--display); font-stretch: 125%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(18px, 1.7vw, 24px); line-height: 1; letter-spacing: -.01em;
  transition: opacity .45s .35s;
}
.card-spine b { font-family: var(--body); font-stretch: 100%; font-size: 13px; font-weight: 600; letter-spacing: 0; opacity: .7; margin-bottom: 14px; }
.card.is-open .card-spine { opacity: 0; transition: opacity .12s; }
/* open inner width = (fan width + 3 × 28px overlap − 4 × 60px padding) × 3.4 / 6.4, minus a little slack */
.card-body { width: min(440px, calc((100cqi - 156px) * .53125 - 12px)); flex-shrink: 0; }
/* contents rise in one after another on open, and drop out quickly (no delay) on close */
.card-body > :not(.card-points), .card-points li {
  opacity: 0; transform: translateY(18px);
  transition: opacity .2s, transform .3s var(--ease-out);
}
.card.is-open .card-body > :not(.card-points), .card.is-open .card-points li {
  opacity: var(--o, 1); transform: none;
  transition: opacity .5s .3s, transform .7s .3s var(--ease-out);
}
.card.is-open .card-body > :nth-child(2):not(.card-points) { transition-delay: .4s; }
.card.is-open .card-points li:nth-child(1) { transition-delay: .36s; }
.card.is-open .card-points li:nth-child(2) { transition-delay: .42s; }
.card.is-open .card-points li:nth-child(3) { transition-delay: .48s; }
.card.is-open .card-points li:nth-child(4) { transition-delay: .54s; }
.card.is-open .card-body > :nth-child(3) { transition-delay: .56s; }
.card-body p { margin: 0 0 20px; font-size: 18px; }
.card-body p, .card-points li { --o: .85; }
/* experience cards carry a short list, so they get a bit more height */
.fan--roles { height: 500px; }
.card-points { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.card-points li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.45; }
.card-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.card:nth-child(4) .card-points li::before { background: var(--ember); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 999px; border: 1px solid currentColor; opacity: .75; }
.card .glyph { position: absolute; top: 30px; right: 30px; width: 110px; height: 110px; transition: transform .9s var(--ease-out); }
.card.is-open .glyph { transform: rotate(-20deg) scale(1.1); }

/* ---------- showreel ---------- */
.reel {
  position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 7.5;
  background:
    radial-gradient(60% 90% at 70% 110%, rgba(255,79,15,.55), transparent 70%),
    radial-gradient(40% 60% at 15% -10%, rgba(255,138,61,.18), transparent 70%),
    linear-gradient(#161616, #0b0b0b);
  border: 1px solid var(--line);
  display: grid; place-items: center;
}
.reel::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000, transparent 75%);
}
.play {
  position: relative; width: 112px; height: 112px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ember); color: var(--ink); display: grid; place-items: center;
  box-shadow: 0 0 0 14px rgba(255,79,15,.15), 0 0 80px rgba(255,79,15,.6);
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s;
}
.play:hover { transform: scale(1.08); box-shadow: 0 0 0 26px rgba(255,79,15,.12), 0 0 120px rgba(255,79,15,.8); }
.play svg { width: 34px; height: 34px; margin-left: 6px; }
.reel-label { position: absolute; left: 32px; bottom: 28px; right: 32px; display: flex; justify-content: space-between; gap: 20px; font-size: 14px; color: #cfc9c0; }
.reel-label strong { font-family: var(--display); font-stretch: 125%; text-transform: uppercase; font-size: clamp(18px, 2.4vw, 30px); color: #fff; display: block; line-height: 1; margin-bottom: 6px; }

/* ---------- process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.step { padding: 32px 28px 40px 0; border-right: 1px solid var(--line); position: relative; }
.step + .step { padding-left: 28px; }
.step:last-child { border-right: 0; }
.step::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--ember);
  transition: width 1s cubic-bezier(.16,1,.3,1);
}
.step.in::before { width: 100%; }
.step .tag { font-size: 13px; }
.step h3 { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 24px; letter-spacing: -.02em; margin: 44px 0 10px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- palestras: a seção inteira é o palco, do tamanho da tela e sem caixas (Refs 6 e 7) ---------- */
/* Uma palestra por vez, de ponta a ponta; os botões do topo (.deck-tab) trocam a palestra. As
   quatro ficam empilhadas na mesma célula do grid e só a .is-active aparece. O fundo de cada uma
   (.slide-bg) ocupa a tela toda, por baixo do menu fixo e da barra de botões logo abaixo dele; o
   resto vive na área livre entre a barra e o pé (--head e --foot). Essa área é um container, e tudo dentro é medido em --u (1%
   da largura, limitado pela altura), então a composição escala inteira, como um slide. Nas telas
   em pé (celular, tablet de pé) a composição vira uma coluna. Sem JS, as palestras aparecem uma
   embaixo da outra, cada uma do tamanho da tela, e os botões somem. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.topics {
  /* --top: da borda do slide até a barra, livre do menu fixo */
  --top: clamp(74px, 9svh, 84px); --bar: clamp(56px, 7svh, 64px);
  --head: calc(var(--top) + var(--bar)); --foot: clamp(12px, 2svh, 24px);
  position: relative; isolation: isolate; overflow: clip; background: var(--ink);
  /* o respiro de cima vira margem: o palco (barra + slide) cabe numa tela com folga, e o "#topics" do menu cai nele */
  margin-top: var(--section-space); padding: 0;
}
.topics .section-head { margin-bottom: clamp(16px, 2vw, 28px); }
/* o título "Palestras" no mesmo Inter Tight 500 apertado dos outros títulos de seção (.motion-title e cia.) */
.topics .section-head h2 {
  font-family: var(--body); font-weight: 500; font-stretch: 100%; text-transform: none;
  font-size: clamp(46px, 7.4vw, 112px); letter-spacing: -.062em; line-height: .9;
}
.deck { counter-reset: slide; }
.topics.is-tabbed .deck { display: grid; grid-template-columns: minmax(0, 1fr); }
.topics.is-tabbed .slide { grid-area: 1 / 1; }
.slide {
  /* 1 --u = 1% da largura da área livre, sem passar de 1/56 da altura (o 16:9) */
  --u: min(1cqw, 1.78cqh);
  counter-increment: slide;
  position: relative; overflow: hidden; isolation: isolate;
  height: max(540px, 95svh); padding: var(--head) 0 var(--foot); container: slide / size;
  transition: opacity .7s cubic-bezier(.16,1,.3,1);
}
.topics.is-tabbed .slide:not(.is-active) {
  visibility: hidden; opacity: 0;
  transition: opacity .5s cubic-bezier(.16,1,.3,1), visibility 0s .5s;
}
.slide-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; transition: transform 1.6s cubic-bezier(.16,1,.3,1); }
/* o fundo fica sempre na sua própria camada: sem isso, no celular a foto (com máscara) pisca quando o zoom começa
   e dá um pulinho quando ele acaba, ao voltar para a grade de pixels */
.topics.is-tabbed .slide-bg { will-change: transform; backface-visibility: hidden; }
.topics.is-tabbed .slide:not(.is-active) .slide-bg { transform: scale(1.06); }
.slide-chrome, .slide-in { position: absolute; inset: var(--head) 0 var(--foot); }
.slide-chrome { z-index: 2; pointer-events: none; }
.slide-in { z-index: 3; }

/* o índice das palestras: uma cápsula de vidro fosco de ponta a ponta, com uma pílula sólida
   (.deck-tabs::after) por trás da palestra escolhida, cujo texto inverte sobre ela. A pílula
   escorre como uma gota: a borda que vai na frente sai primeiro e a de trás alcança depois; o
   sentido (data-dir) e as bordas (--mark-l, --mark-r) vêm do JS, medidos no botão ativo. Vem
   antes do .deck no HTML; o top a empurra para dentro do topo do slide e a margem negativa
   devolve a altura dela, então o slide começa onde a barra começaria */
.deck-bar {
  --deck-ink: #f1eee8; --deck-muted: rgba(241,238,232,.62); --deck-accent: var(--ember);
  --deck-on: #0a0a0a; --deck-on-num: #0a0a0a;
  --deck-glass: rgba(14,10,8,.42); --deck-hover: rgba(255,255,255,.08);
  --deck-glow: rgba(255,79,15,.45);
  --deck-ease: cubic-bezier(.16,1,.3,1);
  position: relative; z-index: 10; top: var(--top);
  width: min(1320px - 2 * var(--gutter), calc(100% - 2 * var(--gutter))); height: var(--bar);
  margin: 0 auto calc(-1 * var(--bar)); display: flex;
}
.deck-bar h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* na 03 o fundo é papel: a cápsula vira vidro claro e a pílula, carvão com o numeral em brasa */
.topics:has(.slide--c.is-active) .deck-bar {
  --deck-ink: #191410; --deck-muted: rgba(25,20,16,.58); --deck-accent: #191410;
  --deck-on: #f1eee8; --deck-on-num: var(--ember);
  --deck-glass: rgba(255,255,255,.5); --deck-hover: rgba(25,20,16,.06);
  --deck-glow: rgba(25,20,16,.28);
}
.topics:not(.is-tabbed) .deck-bar { position: static; height: auto; margin: 0 auto 24px; }
.topics:not(.is-tabbed) .deck-tabs { display: none; }
.deck-tabs {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1; gap: 4px; min-width: 0;
  padding: 5px; border-radius: 999px; background: var(--deck-glass);
  box-shadow: 0 18px 50px -24px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  transition: background .5s, box-shadow .5s;
}
/* a pílula; só se abre quando a seção aparece na tela */
.deck-tabs::after {
  content: ""; position: absolute; z-index: 0; top: 5px; bottom: 5px; left: var(--mark-l, 5px); right: var(--mark-r, 100%);
  border-radius: 999px; pointer-events: none; background: var(--deck-accent);
  box-shadow: 0 10px 34px -6px var(--deck-glow);
  transition: left .7s var(--deck-ease), right .7s var(--deck-ease), background .45s, box-shadow .45s, clip-path 1.1s var(--deck-ease) .2s;
}
/* indo para a direita, a borda direita puxa e a esquerda vem atrás; voltando, o contrário */
.deck-tabs[data-dir="fwd"]::after { transition-duration: .85s, .5s, .45s, .45s, 1.1s; transition-delay: .06s, 0s, 0s, 0s, .2s; }
.deck-tabs[data-dir="back"]::after { transition-duration: .5s, .85s, .45s, .45s, 1.1s; transition-delay: 0s, .06s, 0s, 0s, .2s; }
.topics.is-tabbed:not(.is-seen) .deck-tabs::after { clip-path: inset(0 100% 0 0 round 999px); }
.deck-tab {
  appearance: none; border: 0; margin: 0; padding: 0 clamp(14px, 1.6vw, 24px); min-width: 0; font: inherit; cursor: pointer;
  position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(10px, 1vw, 14px);
  border-radius: 999px; background: transparent; color: var(--deck-muted); text-align: left;
  transition: color .4s var(--deck-ease), background .3s;
}
.deck-tab:not([aria-selected="true"]):hover { background: var(--deck-hover); color: var(--deck-ink); }
.deck-tab-num {
  flex-shrink: 0; font-family: var(--display); font-size: clamp(18px, 1.7vw, 24px); font-weight: 800; font-stretch: 118%;
  letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; transition: color .4s var(--deck-ease);
}
.deck-tab-name { min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.deck-tab[aria-selected="true"] { color: var(--deck-on); transition-delay: .12s; }
.deck-tab[aria-selected="true"] .deck-tab-num { color: var(--deck-on-num); transition-delay: .12s; }
.deck-tab:focus-visible { outline: 2px solid var(--deck-ink); outline-offset: 3px; }
.slide-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* chrome comum: trilho de palavras, cruzes, × e paginação */
.plus, .cross { position: absolute; width: max(12px, calc(var(--u) * 1.3)); aspect-ratio: 1; }
.plus::before, .plus::after, .cross::before, .cross::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: currentColor; opacity: .7; }
.plus::after, .cross::after { rotate: 90deg; }
.cross { width: max(14px, calc(var(--u) * 1.6)); rotate: 45deg; }
.plus--tr { right: calc(var(--u) * 3.4); top: calc(var(--u) * 3.2); }
.plus--bl { left: calc(var(--u) * 3.4); bottom: calc(var(--u) * 3.2); }
.slide-page {
  position: absolute; right: calc(var(--u) * 3.4); top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  height: max(76px, calc(var(--u) * 8)); font-size: max(12px, calc(var(--u) * 1.05)); font-weight: 500; opacity: .7;
  background: linear-gradient(currentColor, currentColor) center / 1px calc(100% - 3.6em) no-repeat;
}
.slide-page::before { content: counter(slide, decimal-leading-zero); }
.slide-page::after { content: attr(data-of); }
.slide-rail {
  position: absolute; top: calc(var(--u) * 3.3); left: 50%; translate: -50% 0; margin: 0; white-space: nowrap;
  font-size: max(14px, calc(var(--u) * 1.3)); font-weight: 600; letter-spacing: -.01em;
}
.slide-title { margin: 0; font-family: var(--body); font-weight: 500; letter-spacing: -.062em; line-height: .9; text-wrap: balance; }
.slide-title > span:not(.sr-only) { display: block; width: max-content; max-width: 100%; }
.slide-title em { font-style: normal; color: var(--ember-title); }
.slide-lead { margin: 0; font-size: max(17px, calc(var(--u) * 1.62)); line-height: 1.3; letter-spacing: -.01em; }
.slide-points {
  list-style: none; margin: 0; padding: 0; counter-reset: point; display: grid; gap: calc(var(--u) * .55);
  font-size: max(16px, calc(var(--u) * 1.45)); line-height: 1.3;
}
.slide-points li { counter-increment: point; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); }
.slide-points li::before { content: counter(point, decimal-leading-zero); font-size: .82em; font-weight: 600; color: var(--ember-text); padding-top: .12em; }
.slide-go {
  display: inline-flex; align-items: center; gap: 8px; width: max-content;
  font-size: max(16px, calc(var(--u) * 1.48)); font-weight: 600;
  padding-bottom: 3px; background: linear-gradient(var(--ember), var(--ember)) 0 100% / 100% 1px no-repeat;
  transition: color .4s;
}
.slide-go svg { width: .85em; height: .85em; color: var(--ember-text); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.slide-go:hover { color: var(--ember-text); }
.slide-go:hover svg { transform: translate(3px, -3px); }

/* 01 · a composição da 02 (logo abaixo), com a divisa meio a meio: um humano e um robô de perfil, cara a cara, em
   ASCII (canvas animado pelo JS, com a imagem parada por baixo para quem está sem JS). A 01 e a 02 têm o grão de filme */
/* grão de filme, parado e fino, por cima do fundo e da foto (os textos ficam limpos) */
:is(.slide--a, .slide--b) .slide-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 160px;
}

/* 02 · inspirado na prancha do centro da Ref 6, na brasa do site e sem a divisa: um fundo só, de carvão, com a brasa acesa
   atrás das placas; o render é sem fundo (PNG com alfa), só as placas de prata e as sombras que elas projetam.
   Vale também para a 01, que muda o fundo e a divisa logo abaixo */
:is(.slide--a, .slide--b) { --split: 43%; background: #120c09; color: #fff; }
:is(.slide--a, .slide--b) .slide-bg {
  background:
    radial-gradient(62% 70% at 0% 100%, rgba(255,186,140,.16), rgba(255,120,60,.06) 45%, transparent 85%),
    radial-gradient(46% 56% at 66% 54%, rgba(255,79,15,.42), rgba(122,23,3,.22) 52%, transparent 76%),
    linear-gradient(180deg, #0d0908, #1c120d);
}
/* as placas ficam onde estava a foto (a metade direita), mas sem fundo; a borda esquerda some aos poucos, sem a divisa */
:is(.slide--a, .slide--b) .slide-photo {
  /* a área tem o formato do render (quadrado, encostado à direita), então a borda esquerda que some é a dele mesmo */
  position: absolute; top: 0; right: 0; bottom: 0; aspect-ratio: 1; max-width: calc(100% - var(--split));
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%); mask: linear-gradient(90deg, transparent, #000 14%);
}
/* o render nunca é cortado (o cover cortava as placas): ele cabe inteiro na área, encostado embaixo à direita */
:is(.slide--a, .slide--b) .slide-photo img { object-fit: contain; object-position: right bottom; }
/* véu de carvão só atrás do título, para o branco ler por cima da prata clara */
:is(.slide--a, .slide--b) .slide-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(46% 26% at 22% 52%, rgba(18,10,7,.62), rgba(18,10,7,.3) 55%, transparent 80%); }
:is(.slide--a, .slide--b) .slide-lead { width: max(17%, 230px); font-size: max(13px, calc(var(--u) * 1.05)); line-height: 1.3; letter-spacing: 0; color: rgba(255,255,255,.72); }
:is(.slide--a, .slide--b) .slide-in::before { content: ""; width: 1px; background: rgba(255,255,255,.35); }
:is(.slide--a, .slide--b) .slide-title { font-size: calc(var(--u) * 6.8); letter-spacing: -.06em; text-align: center; text-shadow: 0 0 calc(var(--u) * 4) rgba(20,10,6,.35); }
:is(.slide--a, .slide--b) .slide-title > span:not(.sr-only) { margin-inline: auto; }
:is(.slide--a, .slide--b) .slide-title em { color: var(--ember-title); }
:is(.slide--a, .slide--b) .slide-foot { width: max(30%, 340px); display: grid; gap: calc(var(--u) * 1.4); }
/* deitado: três faixas (apoio · título · lista); o título e a linha ficam no meio da faixa do centro, à mesma distância dos dois textos */
@container slide not (max-aspect-ratio: 6 / 5) {
  :is(.slide--a, .slide--b) .slide-in { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(var(--u) * 6.4) 0 calc(var(--u) * 4.6); }
  :is(.slide--a, .slide--b) .slide-lead { grid-area: 1 / 1; margin-left: 9%; }
  :is(.slide--a, .slide--b) .slide-in::before { grid-area: 2 / 1; align-self: center; justify-self: start; margin-left: 9%; height: 26cqh; }
  :is(.slide--a, .slide--b) .slide-title { grid-area: 2 / 1; align-self: center; margin-inline: 4%; }
  :is(.slide--a, .slide--b) .slide-foot { grid-area: 3 / 1; margin-left: 9%; }
}
:is(.slide--a, .slide--b) .slide-points { gap: .35em; font-size: max(16px, calc(var(--u) * 1.45)); line-height: 1.28; color: rgba(255,255,255,.8); }
:is(.slide--a, .slide--b) .slide-points li { grid-template-columns: 2em minmax(0, 1fr); }
:is(.slide--a, .slide--b) .slide-points li::before { color: var(--ember-text); }
:is(.slide--a, .slide--b) .slide-go { font-size: max(14px, calc(var(--u) * 1.2)); font-weight: 500; }
:is(.slide--a, .slide--b) .cross { left: 71%; top: 50%; }
:is(.slide--a, .slide--b) .slide-orbit { left: 46%; top: 2%; width: 50%; height: 96%; opacity: .9; }
/* a 02 segue o gradiente de uma referência em azul-gelo ("The Path That Builds a Champion"), trocando o azul pela brasa: uma névoa alta na borda esquerda, mais acesa no meio da
   altura; o carvão no centro, atrás do título; e uma luz clara, de pêssego quase branco, vindo da borda direita atrás das
   placas. O miolo claro fica abaixo da barra de palestras, para as abas seguirem lendo em branco.
   O gradiente mora numa camada própria, borrada, para ficar difuso sem borrar as placas; ela sobra além das bordas
   (inset negativo) para o borrão não escurecer as bordas; por isso as bordas do slide ficam em 8% e 92% dela.
   A opacidade da camada deixa as luzes mais suaves: o que some dela é o preto de baixo, da mesma cor da base.
   O preto é quase puro e as luzes terminam cedo, sem a cauda de vermelho escuro, para o centro não virar marrom */
.slide--b .slide-bg { background: #050303; }
.slide--b .slide-bg::before {
  content: ""; position: absolute; inset: -10%; pointer-events: none; opacity: .8; filter: blur(clamp(36px, 4.5cqw, 90px));
  background:
    radial-gradient(17% 36% at 8% 50%, rgba(255,150,80,.42), rgba(255,106,31,.16) 60%, transparent 100%),
    radial-gradient(30% 54% at 8% 50%, rgba(255,79,15,.74), rgba(230,60,8,.32) 42%, transparent 88%),
    radial-gradient(14% 30% at 92% 46%, #fff1e4, rgba(255,196,150,.6) 45%, transparent 100%),
    radial-gradient(40% 78% at 92% 46%, #ff9a52, rgba(255,90,20,.9) 30%, rgba(230,60,8,.52) 54%, rgba(110,18,2,.18) 74%, transparent 90%),
    linear-gradient(90deg, #090504, #040303 42%, #060403 60%, #170804);
}
/* a 01 tem as duas metades da Ref 6: à esquerda o gradiente do laranja na borda ao preto; à direita, atrás do ASCII,
   o gradiente da Ref 6 espelhado: escuro junto do meio e uma luz laranja difusa vindo da borda direita, mais forte
   embaixo. A passagem entre as metades é suave: o gradiente da esquerda não para no meio, ele segue e some aos poucos
   por cima do escuro. Sobre o laranja, os números, o sublinhado e o marcador da aba em brasa sumiriam, então lá eles
   ficam em preto e branco */
.slide--a { --split: 50%; }
.slide--a .slide-bg {
  background:
    radial-gradient(42% 66% at 0% 40%, rgba(255,138,72,.7), rgba(255,106,31,.26) 45%, rgba(255,106,31,.08) 70%, transparent 95%) 0 0 / var(--split) 100% no-repeat,
    /* o laranja fica na borda e escurece aos poucos, em muitas paradas (difuso, sem faixa marcada), sumindo logo depois do meio */
    linear-gradient(90deg, #ff6a1f, #f75c16 5%, #e44c0e 11%, rgba(196,62,8,.94) 17%, rgba(150,44,6,.86) 23%, rgba(102,30,5,.78) 29%, rgba(58,18,4,.68) 35%, rgba(24,9,4,.52) 41%, rgba(10,5,3,.3) 47%, rgba(6,3,2,.12) 53%, rgba(5,3,2,0) 59%),
    /* na direita, só um ponto de luz fraco e difuso no canto de cima */
    radial-gradient(16% 24% at 100% 0%, rgba(255,122,46,.2), rgba(242,82,15,.08) 45%, transparent 85%),
    linear-gradient(200deg, #070403, #030202 55%, #050302); /* o preto quase puro */
}
/* o ASCII começa logo abaixo da barra de palestras, para a antena não ficar atrás das abas, e passa do meio para
   ficar grande: a grade cabe inteira (as duas cabeças sem corte), encostada embaixo, onde os ombros se dissolvem */
.slide--a .slide-photo { top: 0; left: 26%; aspect-ratio: auto; max-width: none; -webkit-mask: none; mask: none; } /* sobe até o topo do slide: o alto das cabeças passa por trás do vidro das abas */
/* o véu atrás do título, refeito para esta área mais larga: ele some antes da borda esquerda, sem marcar uma linha */
.slide--a .slide-photo::after { background: radial-gradient(28% 26% at 33% 50%, rgba(18,10,7,.62), rgba(18,10,7,.3) 55%, transparent 80%); }
.slide--a .slide-photo img { object-fit: contain; object-position: 50% 100%; }
.slide-ascii { position: absolute; inset: 0; width: 100%; height: 100%; }
.slide-photo.has-ascii img { visibility: hidden; }
.topics:has(.slide--a.is-active) .deck-bar { --deck-accent: #fff; --deck-on: #120805; --deck-on-num: var(--ember); --deck-glow: rgba(255,255,255,.3); }
.slide--a .slide-lead { color: rgba(255,255,255,.9); }
.slide--a .slide-points { color: #fff; }
.slide--a .slide-points li::before { color: #120805; }
.slide--a .slide-in::before { background: rgba(255,255,255,.6); }
.slide--a .slide-go { background-image: linear-gradient(#fff, #fff); }
.slide--a .slide-go svg { color: #fff; }
.slide--a .slide-go:hover { color: #120805; }
/* o "Eu" atravessa a divisa: em pêssego claro ele lê no laranja e no carvão */
.slide--a .slide-title em { color: var(--ember-title); }
.slide--a .cross { left: 75%; }
.slide--a .slide-orbit { left: 54%; width: 42%; }
.slide-orbit { position: absolute; overflow: visible; }
.slide-orbit :is(ellipse, circle) { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* 03 · claro: a marca gigante no alto, o anel de vidro sobre a brasa (em ASCII) e o selo redondo */
.slide--c { background: #ebe7e1; color: var(--paper-ink); }
.slide--c .slide-bg {
  background:
    radial-gradient(28% 44% at 58% 46%, rgba(255,138,61,.55), rgba(255,79,15,.18) 55%, transparent 75%),
    radial-gradient(40% 50% at 100% 100%, rgba(255,150,90,.35), transparent 70%),
    linear-gradient(140deg, #f6f3ee 0%, #e8e2da 58%, #f0dccc 100%);
}
/* o anel no mesmo lugar e tamanho de antes; o blur que ele tinha já vem desenhado na grade */
.slide--c .slide-photo { position: absolute; inset: 0; overflow: hidden; }
.slide--c .slide-photo img { inset: 46% auto auto 58%; translate: -50% -50%; width: calc(var(--u) * 38); height: auto; }
.slide-seal {
  position: absolute; right: calc(var(--u) * 14); top: 30%; width: calc(var(--u) * 9); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 calc(var(--u) * .5) rgba(255,255,255,.7), 0 22px 44px -14px rgba(122,23,3,.5);
}
.slide-seal img { scale: 1.35; }
.slide-mark {
  position: absolute; left: calc(var(--u) * 4.4); top: calc(var(--u) * 9.5); margin: 0; white-space: nowrap;
  font-size: calc(var(--u) * 10); font-weight: 500; letter-spacing: -.068em; line-height: .9; color: var(--ink);
}
.slide-mark sup { font-size: .42em; letter-spacing: 0; vertical-align: top; position: relative; top: .08em; margin-left: .04em; }
.slide--c .slide-title {
  position: absolute; left: calc(var(--u) * 4.6); bottom: calc(var(--u) * 5.6); width: calc(var(--u) * 42);
  font-size: calc(var(--u) * 3.4); letter-spacing: -.035em; line-height: 1.06;
}
.slide--c .slide-foot { position: absolute; right: calc(var(--u) * 7.4); bottom: calc(var(--u) * 4); width: calc(var(--u) * 38); display: grid; gap: calc(var(--u) * 1.3); }
.slide--c .slide-lead { color: rgba(17,17,17,.8); font-weight: 500; }
.slide--c .slide-points { color: rgba(17,17,17,.72); }

/* 04 · dividido ao contrário: a imagem à esquerda e o título gigante em escada por cima de tudo */
.slide--d { background: #0f0c0b; color: #fff; }
.slide--d .slide-bg { background: radial-gradient(60% 80% at 100% 0%, rgba(255,79,15,.2), transparent 62%), linear-gradient(180deg, #17110e, #0b0908); }
.slide--d .slide-photo { position: absolute; inset: 0; overflow: hidden; }
.slide--d .slide-photo img { inset: 50% auto auto 50%; translate: -50% -50%; width: min(74cqw, 114cqh); height: auto; } /* render sem fundo: as três moedas no centro do slide */
.slide--d .slide-rail { left: 73.5%; }
.slide--d .slide-title { position: absolute; left: calc(var(--u) * 9); right: calc(var(--u) * 6); top: calc(var(--u) * 10); font-size: calc(var(--u) * 7.8); }
.slide--d .slide-title > span:nth-child(2) { margin: .04em 0 0 calc(var(--u) * 24); }
.slide--d .slide-title > span:nth-child(3) { margin: .04em 0 0 calc(var(--u) * 7); }
.slide--d .slide-foot { position: absolute; right: calc(var(--u) * 7.4); bottom: calc(var(--u) * 4); width: calc(var(--u) * 40); display: grid; gap: calc(var(--u) * 1.3); }
.slide--d .slide-lead { color: rgba(255,255,255,.86); font-weight: 500; }
.slide--d .slide-points { color: rgba(255,255,255,.7); }
.slide--d .slide-orbit { left: 26%; top: -38%; width: calc(var(--u) * 62); aspect-ratio: 1; opacity: .3; }

/* entrada: quando a palestra entra, o título sobe linha a linha e os traços se desenham */
.slide-title > span, .slide-mark, .slide-lead, .slide-points, .slide-go, .slide-loop-text {
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1), color .4s;
}.slide-title > span:nth-child(2) { transition-delay: .07s; }
.slide-title > span:nth-child(3) { transition-delay: .14s; }
.slide-mark { transition-delay: .04s; }
:is(.slide-lead, .slide-points, .slide-loop-text) { transition-delay: .2s; }
.slide-go { transition-delay: .28s; }
.slide-loop path, .slide-orbit :is(ellipse, circle) { stroke-dasharray: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1) .3s; }
:is(.topics.is-tabbed:not(.is-seen) .slide, .topics.is-tabbed .slide:not(.is-active)) :is(.slide-title > span, .slide-mark) { opacity: 0; transform: translateY(.35em); transition-delay: 0s; }
:is(.topics.is-tabbed:not(.is-seen) .slide, .topics.is-tabbed .slide:not(.is-active)) :is(.slide-lead, .slide-points, .slide-go, .slide-loop-text) { opacity: 0; transform: translateY(16px); transition-delay: 0s; }
:is(.topics.is-tabbed:not(.is-seen) .slide, .topics.is-tabbed .slide:not(.is-active)) :is(.slide-loop path, .slide-orbit :is(ellipse, circle)) { stroke-dashoffset: 1; transition-delay: 0s; }

/* slides em pé: a composição vira coluna — título em cima, texto no pé, imagem por trás */
@container slide (max-aspect-ratio: 6 / 5) {
  .slide-in {
    --u: 1.9cqw;
    display: flex; flex-direction: column; gap: 14px;
    padding: calc(52px + 2cqh) 6cqw 6cqw;
  }
  .slide-chrome { --u: 1.9cqw; }
  .slide-in > * { position: static !important; translate: none !important; width: auto !important; }
  /* o trilho de palavras vira o chapéu do título: no alto ele batia nas moedas e na cruz */
  .slide-rail { margin-top: auto; font-size: 13px; letter-spacing: .02em; opacity: .75; }
  .slide-rail + .slide-title { margin-top: 0 !important; }
  .slide-title { font-size: min(13.5cqw, 9.6cqh) !important; }
  .slide-page, .cross, .slide-loop, .slide-loop-text, .slide-in::before { display: none; }
  .plus--tr { top: 20px; right: 18px; }
  .plus--bl { display: none; }
  .slide-points, .slide-lead { font-size: clamp(15px, 4.3cqw, 21px); max-width: 46ch; }
  .slide-go { font-size: clamp(16px, 4.4cqw, 20px); }

  /* em pé: o close do render em cima, o título e os textos embaixo; na 01 o laranja sobe do pé, atrás dos textos */
  /* a luz cai devagar, em muitas paradas (como uma curva, sem a quina do marrom no meio), e o fundo de cima desce
     para um carvão já aquecido, para a borda do laranja não marcar uma diagonal */
  .slide--a .slide-bg {
    background:
      /* o ponto de luz encostado no canto de cima à direita: aceso no vértice e sumindo devagar */
      radial-gradient(60% 26% at 100% 0%, rgba(255,100,22,.4), rgba(250,78,8,.25) 24%, rgba(232,60,4,.13) 46%, rgba(180,40,2,.05) 68%, rgba(120,24,0,.015) 86%, transparent 100%),
      radial-gradient(140% 50% at 0% 100%, #ff7a2e, #f8631f 12%, rgba(240,82,15,.9) 24%, rgba(214,64,10,.74) 36%, rgba(178,48,7,.56) 48%, rgba(136,34,5,.38) 60%, rgba(92,22,4,.22) 72%, rgba(52,14,4,.1) 84%, rgba(30,10,5,0) 100%),
      radial-gradient(120% 34% at 100% 100%, rgba(242,82,15,.22), rgba(150,36,4,.1) 50%, transparent 100%),
      linear-gradient(180deg, #0d0908, #120b08 40%, #1e110b);
  }
  /* a foto começa logo abaixo dos marcadores das abas e some aos poucos nas duas pontas, para não passar por baixo deles */
  :is(.slide--a, .slide--b) .slide-photo { inset: calc(var(--head) + 10px) 0 44% 0; aspect-ratio: auto; max-width: none; -webkit-mask: linear-gradient(180deg, transparent, #000 28px, #000 88%, transparent); mask: linear-gradient(180deg, transparent, #000 28px, #000 88%, transparent); }
  :is(.slide--a, .slide--b) .slide-photo img { object-fit: cover; object-position: 40% 45%; }
  .slide--a .slide-photo img { object-fit: contain; object-position: 50% 100%; } /* o ASCII cabe inteiro, como o canvas */
  /* na 01 as figuras sobem: a antena passa por trás do vidro das abas e do menu, e o alto das cabeças por trás das abas (como no deitado) */
  .slide--a .slide-photo { top: calc(var(--head) - 128px); translate: 0 44px; } /* o translate desce as figuras sem mudar a escala */
  /* o véu de carvão do deitado mira o título; em pé ele cairia no vazio ao lado das placas, como uma sombra solta */
  :is(.slide--a, .slide--b) .slide-photo::after { display: none; }
  /* na 02 a área vai de um pouco acima da barra (o alto passa por trás do vidro das abas) até o título (--title-y,
     medido pelo JS); só a sombra do pé do render passa por baixo dele. O ASCII (main.js) cresce nela e pode passar
     um pouco das bordas; a imagem parada, para quem está sem JS, cabe inteira */
  .slide--b .slide-photo {
    inset: calc(var(--head) - 48px) 0 auto 0; height: calc((var(--title-y, 60%) - var(--head)) * 1.2 + 48px);
    -webkit-mask: linear-gradient(180deg, transparent, #000 28px); mask: linear-gradient(180deg, transparent, #000 28px);
  }
  /* em pé a fila é espelhada na horizontal, como o canvas do main.js: a placa da frente à direita, subindo para a esquerda */
  .slide--b .slide-photo img { object-fit: contain; object-position: left bottom; scale: -1 1; }
  /* em pé, a luz fica embaixo: a da direita e a névoa da esquerda sobem do pé, por trás da lista, e o alto fica no
     preto, atrás das placas e do título (as posições são da camada, que sobra 10% além do slide: o pé fica em 92%) */
  .slide--b .slide-bg::before {
    background:
      radial-gradient(30% 22% at 8% 76%, rgba(255,150,80,.4), rgba(255,106,31,.16) 60%, transparent 100%),
      radial-gradient(56% 38% at 8% 76%, rgba(255,79,15,.7), rgba(230,60,8,.3) 40%, transparent 86%),
      radial-gradient(28% 16% at 92% 86%, #fff1e4, rgba(255,196,150,.6) 42%, transparent 100%),
      radial-gradient(86% 42% at 92% 84%, #ff9a52, rgba(255,90,20,.9) 28%, rgba(230,60,8,.52) 50%, rgba(110,18,2,.18) 72%, transparent 90%),
      linear-gradient(180deg, #090504, #040303 30%, #070404 60%, #170804);
  }
  /* "Pensamento de IA" numa linha só: com 3 linhas em vez de 5 sobra altura para as placas */
  .slide--b .slide-title { font-size: min(12.4cqw, 9cqh) !important; text-shadow: none; }
  :is(.slide--a, .slide--b) .slide-lead { display: none; }
  :is(.slide--a, .slide--b) .slide-title { margin-top: auto; padding-right: 0; text-align: left; text-shadow: 0 2px 28px rgba(18,8,4,.6); }
  :is(.slide--a, .slide--b) .slide-title > span:not(.sr-only) { margin-inline: 0; }
  :is(.slide--a, .slide--b) .slide-orbit { left: 14%; top: 3%; width: 72%; height: 46%; }
  .slide--a .slide-orbit { top: 0; height: 40%; } /* a órbita da 01 sobe junto com as figuras, até logo abaixo das abas */
  :is(.slide--a, .slide--b) .slide-foot { gap: 14px; }
  .slide--c .slide-foot, .slide--d .slide-foot { gap: 14px; }

  .slide--c .slide-mark { font-size: 16.5cqw; margin-top: 3cqh; }
  .slide--c .slide-photo img { left: 62%; top: 44%; width: 84cqw; }
  .slide--c .slide-seal { right: 10cqw; top: 36%; width: 20cqw; }
  .slide--c .slide-title { margin-top: auto; font-size: min(8.4cqw, 6cqh) !important; letter-spacing: -.04em; }

  .slide--d .slide-photo { inset: calc(var(--head) - 56px) 0 46% 0; } /* do pé das abas (que no celular sobem) até o título */
  .slide--d .slide-photo img { top: 0; translate: -50% 0; width: min(128cqw, 55cqh); } /* maior que a tela, se preciso: o render tem folga vazia nas laterais */
  .slide--d .slide-title { font-size: min(12.4cqw, 9cqh) !important; }
  .slide--d .slide-title > span:nth-child(2) { margin-left: 7%; max-width: 93%; }
  .slide--d .slide-title > span:nth-child(3) { margin-left: 3%; }
  .slide--d .slide-orbit { left: 30%; top: -14%; width: 90cqw; }
}
/* em pé, os títulos das quatro palestras ficam centralizados (cada linha no meio; sai a escada da 04) */
@container slide (max-aspect-ratio: 6 / 5) {
  .topics .slide .slide-title { text-align: center; }
  .topics .slide .slide-title > span:not(.sr-only) { margin-inline: auto; }
  /* o título por cima do objeto 3D, no meio dele. O objeto mantém o tamanho e fica centralizado no vão entre as abas
     (--r0) e o começo do texto do pé (--foot-y, medido pelo JS; sem JS, 70% da altura); o título sai do fluxo e fica
     no centro desse vão (--mid), na frente do objeto */
  /* (nos filhos do slide: o container query não vale para o próprio .slide) */
  .topics .slide > * { --r0: calc(var(--head) - 60px); --mid: calc((var(--r0) + var(--foot-y, 70%) - 12px) / 2); }
  .topics .slide .slide-title {
    position: absolute !important; left: 6cqw; right: 6cqw; top: calc(var(--mid) - var(--head)); bottom: auto; translate: 0 -50% !important;
    margin: 0 !important;
  }
  /* o que fica no fluxo desce para o pé: na 03 a marca "Next Level", na 04 o trilho de palavras, logo acima do texto */
  .topics :is(.slide--c, .slide--d) .slide-in > :first-child { margin-top: auto !important; }
  .topics :is(.slide--a, .slide--b) .slide-foot { margin-top: auto; }
  .topics :is(.slide--a, .slide--b) .slide-photo {
    top: var(--r0); bottom: calc(100% - var(--foot-y, 70%) + 12px); height: auto; translate: none;
  }
  /* na 02 as placas sobem um pouco e o título desce para o vão livre acima da lista: ele fica só na parte de baixo
     delas, em vez de no meio */
  .topics .slide--b .slide-photo { translate: 0 -6cqh; }
  .topics .slide--b .slide-title { top: calc(var(--mid) - var(--head) + 11cqh); }
  .topics .slide--c .slide-photo img { left: 50%; top: var(--mid); translate: -50% -50%; }
  /* 03: a brasa atrás do anel vira um círculo bem difuso (numa camada borrada, centrada no anel); em pé, a elipse
     do deitado ficava alta e estreita */
  .topics .slide--c .slide-bg {
    background:
      radial-gradient(40% 50% at 100% 100%, rgba(255,150,90,.35), transparent 70%),
      linear-gradient(140deg, #f6f3ee 0%, #e8e2da 58%, #f0dccc 100%);
  }
  .topics .slide--c .slide-bg::before {
    content: ""; position: absolute; left: 50%; top: var(--mid); width: 120cqw; aspect-ratio: 1; translate: -50% -50%;
    border-radius: 50%; pointer-events: none; opacity: .75; filter: blur(clamp(36px, 12cqw, 64px));
    background: radial-gradient(circle closest-side, rgba(255,138,61,.62), rgba(255,106,31,.34) 38%, rgba(255,79,15,.12) 66%, transparent);
  }
  .topics .slide--d .slide-photo { inset: 0; }
  .topics .slide--d .slide-photo img { top: var(--mid); translate: -50% -50%; }
  /* as órbitas acompanham o objeto */
  .topics :is(.slide--a, .slide--b) .slide-orbit { top: calc(var(--mid) - var(--head) - 23%); height: 46%; }
  .topics .slide--d .slide-orbit { top: calc(var(--mid) - var(--head) - 45cqw); }
}
/* slides em pé e baixos (iPhone SE e afins): sai a frase de apoio e os espaços apertam; o título continua grande */
@container slide (max-aspect-ratio: 6 / 5) and (max-height: 600px) {
  .slide--c .slide-lead, .slide--d .slide-lead { display: none; }
  .slide-in { gap: 10px; padding-top: 50px; }
  .slide--c .slide-mark { font-size: 14cqw; margin-top: 1cqh; }
  .slide--c .slide-title { font-size: min(8cqw, 5.6cqh) !important; }
  .slide-points { gap: 4px; font-size: 14px; }
  .slide-points li { line-height: 1.3; }
}

/* ---------- motion: na identidade das Palestras — palco de ponta a ponta com o gradiente da 01 e telas em ASCII ---------- */
/* A seção é um palco como o das Palestras: começa depois do respiro (margem, não padding) e o fundo vai de borda a
   borda, com o gradiente da palestra 01 (o laranja na borda esquerda escurecendo devagar até o preto, a cauda passando
   do meio sem degrau) e o ponto de luz fraco no canto de cima à direita; o grão de filme fino por cima. As cruzes são o
   mesmo chrome dos slides, medidas em --u */
.motion {
  --u: clamp(9px, 1vw, 14px);
  /* só os lados cortam (o anel passa da borda direita); em cima, a luz vaza para o vão preto acima da seção */
  position: relative; isolation: isolate; overflow-x: clip;
  margin-top: var(--section-space); padding: clamp(96px, 10vw, 150px) 0 clamp(72px, 8vw, 120px);
  background: var(--ink);
}
/* as luzes moram numa camada própria e borrada (como a da palestra 02), para a passagem do laranja ao preto não marcar
   uma parede: o laranja cai numa curva de muitas paradas, com a cauda até ~80% da largura. Nada marca a seção: em
   cima o vão do respiro fica todo preto, longe das Palestras, e a luz só acende dentro da seção, numa rampa longa
   (~320 px) que começa do zero, sem linha; no pé ela se apaga devagar, da metade da seção para baixo, numa curva de
   muitas paradas, ainda dentro da seção (abaixo vem o título de Eventos, que ela não pode cobrir). Fora das luzes
   fica o preto da própria página (--ink), o mesmo de cima e de baixo */
.motion::before {
  content: ""; position: absolute; inset: calc(-1 * var(--section-space)) -8% 0; z-index: -2; pointer-events: none;
  /* sem filter: blur: os cinco vídeos fazem a tela ser recomposta 30 vezes por segundo, e o desfoque de ~80 px era
     refeito a cada vez sobre a seção quase inteira; sobre este gradiente liso a diferença mal aparece */
  background:
    radial-gradient(40% 52% at 6% 44%, rgba(255,138,72,.55), rgba(255,106,31,.22) 50%, transparent 90%),
    linear-gradient(90deg,
      rgba(255,106,31,1) 6%, rgba(250,96,26,.94) 13%, rgba(240,84,20,.84) 20%, rgba(222,72,15,.7) 27%,
      rgba(196,60,11,.55) 34%, rgba(164,48,8,.4) 41%, rgba(128,36,6,.27) 48%, rgba(92,26,5,.16) 55%,
      rgba(60,18,4,.08) 62%, rgba(36,12,4,.03) 70%, transparent 80%),
    radial-gradient(22% 30% at 94% 14%, rgba(255,122,46,.22), rgba(242,82,15,.08) 50%, transparent 90%);
  -webkit-mask: linear-gradient(180deg, transparent calc(var(--section-space) + 0px), rgba(0,0,0,0.0033) calc(var(--section-space) + 40px), rgba(0,0,0,0.027) calc(var(--section-space) + 80px), rgba(0,0,0,0.086) calc(var(--section-space) + 120px), rgba(0,0,0,0.188) calc(var(--section-space) + 160px), rgba(0,0,0,0.33) calc(var(--section-space) + 200px), rgba(0,0,0,0.5) calc(var(--section-space) + 240px), rgba(0,0,0,0.677) calc(var(--section-space) + 280px), rgba(0,0,0,0.839) calc(var(--section-space) + 320px), rgba(0,0,0,0.956) calc(var(--section-space) + 360px), #000 calc(var(--section-space) + 400px), #000 50%, rgba(0,0,0,0.956) 55%, rgba(0,0,0,0.839) 60%, rgba(0,0,0,0.677) 65%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.33) 75%, rgba(0,0,0,0.188) 80%, rgba(0,0,0,0.086) 85%, rgba(0,0,0,0.027) 90%, rgba(0,0,0,0.0033) 95%, transparent 100%);
          mask: linear-gradient(180deg, transparent calc(var(--section-space) + 0px), rgba(0,0,0,0.0033) calc(var(--section-space) + 40px), rgba(0,0,0,0.027) calc(var(--section-space) + 80px), rgba(0,0,0,0.086) calc(var(--section-space) + 120px), rgba(0,0,0,0.188) calc(var(--section-space) + 160px), rgba(0,0,0,0.33) calc(var(--section-space) + 200px), rgba(0,0,0,0.5) calc(var(--section-space) + 240px), rgba(0,0,0,0.677) calc(var(--section-space) + 280px), rgba(0,0,0,0.839) calc(var(--section-space) + 320px), rgba(0,0,0,0.956) calc(var(--section-space) + 360px), #000 calc(var(--section-space) + 400px), #000 50%, rgba(0,0,0,0.956) 55%, rgba(0,0,0,0.839) 60%, rgba(0,0,0,0.677) 65%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.33) 75%, rgba(0,0,0,0.188) 80%, rgba(0,0,0,0.086) 85%, rgba(0,0,0,0.027) 90%, rgba(0,0,0,0.0033) 95%, transparent 100%);
}
.hero::after, .motion::after, .about::after, .events::after, .corps:not(.is-pinned)::after, .is-pinned .corps-stage::after, .schools::after, .photos::after, .cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 160px;
  /* o grão some só nas bordas que dão para um vão sem grão (a faixa rolante, o respiro das Palestras, a corrente):
     ali ele desenharia a borda da seção contra o preto liso. Entre duas seções com grão ele segue cheio dos dois
     lados — o ruído não tem costura, e apagá-lo deixava uma faixa lisa na junção */
  -webkit-mask: linear-gradient(180deg, var(--grain-in), var(--grain-out));
          mask: linear-gradient(180deg, var(--grain-in), var(--grain-out));
}
/* Sobre Pensar segue em Eventos, Eventos em Para empresas, Para empresas em Instituições, Fotos no Contato */
.motion::after { -webkit-mask: linear-gradient(180deg, var(--grain-in), #000 25%); mask: linear-gradient(180deg, var(--grain-in), #000 25%); }
.events::after, .corps::after, .is-pinned .corps-stage::after { -webkit-mask: none; mask: none; }
.schools::after { -webkit-mask: linear-gradient(180deg, #000 75%, var(--grain-out)); mask: linear-gradient(180deg, #000 75%, var(--grain-out)); }
.photos::after { -webkit-mask: linear-gradient(180deg, var(--grain-in), #000 25%); mask: linear-gradient(180deg, var(--grain-in), #000 25%); }
.hero-chrome, .motion-chrome, .about-chrome, .events-chrome, .corps-chrome, .schools-chrome, .photos-chrome, .cta-chrome { position: absolute; inset: 0; pointer-events: none; color: #fff; }
/* o grão do hero só some embaixo: em cima a página começa junto com a seção */
.hero::after { -webkit-mask: none; mask: none; } /* o grão vai até a linha seca do pé */
.motion > .wrap, .about > .wrap, .events > .wrap, .corps > .wrap, .schools > .wrap, .photos > .wrap { position: relative; z-index: 1; }
/* o anel de metal em 3D, em ASCII de 0 e 1 (canvas do main.js), no canto de cima à direita, sobre o ponto de luz do
   gradiente; fica atrás do título e das caixas e pode passar um pouco da borda direita */
.motion-ring {
  position: absolute; z-index: 0; top: clamp(8px, 1.5vw, 24px); right: clamp(-96px, -4vw, -32px);
  width: clamp(300px, 46vw, 760px); aspect-ratio: 1; pointer-events: none;
}
.motion-ring canvas, .about-knot canvas, .about-chain-solid canvas, .events-stage canvas, .corps-solid canvas, .schools-solid canvas, .tech-chain-solid canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* o título como os dos slides: Inter Tight fino e apertado, o destaque em pêssego claro (o "Eu" da 01), que lê no
   laranja e no carvão; embaixo, a frase de apoio com a linha fina dos slides; a direita fica para o anel */
.motion-head, .events-head, .schools-head, .photos-head { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 2vw, 28px); margin-bottom: clamp(40px, 5vw, 72px); }
.motion-title, .about-title, .events-title, .corps-title, .schools-title, .photos-title {
  margin: 0; font-family: var(--body); font-weight: 500; font-size: clamp(46px, 7.4vw, 112px);
  letter-spacing: -.062em; line-height: .9; color: #fff; text-shadow: 0 0 40px rgba(20,10,6,.25);
}
.motion-title > span, .about-title > span, .events-title > span, .corps-title > span, .schools-title > span, .photos-title > span { display: block; }
.motion-title em { font-style: normal; color: var(--ember-title); }
.motion-lead, .about-lead, .events-lead, .corps-lead, .schools-lead, .photos-lead {
  position: relative; margin: 0; padding-left: 22px; max-width: 280px;
  font-size: 15px; line-height: 1.35; color: rgba(255,255,255,.72);
}
.motion-lead::before, .about-lead::before, .events-lead::before, .corps-lead::before, .schools-lead::before, .photos-lead::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 1px; background: rgba(255,255,255,.35); }

/* o loading de Ensinamentos: fica sobre a grade enquanto os vídeos começam a tocar por baixo (o main.js põe .is-loading
   na seção e tira quando tudo já roda). Só anima opacity e transform: começar um vídeo segura o JS por 50–140 ms, e
   essas duas propriedades seguem animando no compositor mesmo assim — o loading não trava junto */
.motion-stage { position: relative; }
.motion-loader { display: none; }
.motion.is-loading .motion-loader {
  position: absolute; inset: 0 0 auto; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding-top: clamp(64px, 8vw, 128px);
  transition: opacity .35s;
}
.motion.is-ready .motion-loader { opacity: 0; }
.motion-loader-bits { display: flex; gap: .55em; font: 700 15px/1 ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.45); }
.motion-loader-bits i { font-style: normal; opacity: .14; animation: loader-bit 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * .08s - 1.6s); }
.motion-loader-bits i.hot { color: var(--ember-hot); text-shadow: 0 0 10px rgba(255,106,31,.9); }
@keyframes loader-bit { 35%, 55% { opacity: 1; } }
.motion-loader-bar { width: min(240px, 60vw); height: 1px; background: rgba(255,255,255,.16); overflow: hidden; }
.motion-loader-bar i { display: block; height: 100%; background: var(--ember-hot); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.motion-loader-label { margin: 0; font: 500 11px/1 ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.motion-loader-count { color: var(--ember-text); font-variant-numeric: tabular-nums; }

/* seis colunas: em cima estreita + larga, embaixo três iguais */
.motion-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 16px);
}
.motion-box { grid-column: span 2; min-height: clamp(280px, 26vw, 340px); }
.motion-box--narrow { grid-column: span 2; min-height: clamp(300px, 30vw, 380px); }
.motion-box--wide { grid-column: span 4; min-height: clamp(300px, 30vw, 380px); }

/* cada caixa é uma tela escura, como a metade preta da palestra 01: o vidro quase opaco sobre o gradiente da seção,
   sem borda, a luz fraca de brasa vindo do canto de baixo e o chrome dos slides — o numeral grande das abas no alto à
   direita e uma cruz no canto de baixo */
.motion-box {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  border-radius: 22px; background: rgba(7,4,3,.86);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.7);
  /* sem backdrop-filter: o vídeo cobre a caixa inteira, então o desfoque não aparecia, e era refeito a cada quadro do vídeo */
}
/* o fundo da tela: a luz de brasa difusa no canto de baixo à direita, por trás do ASCII */
.motion-media {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 60% at 100% 100%, rgba(255,79,15,.2), rgba(122,23,3,.08) 55%, transparent 85%),
    radial-gradient(50% 40% at 0% 0%, rgba(255,122,46,.06), transparent 80%);
}
.motion-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.motion-box.has-video video, .motion-media video[poster] { opacity: 1; }
/* o canvas que o main.js põe por cima do vídeo e onde copia os quadros dele (com dois ou mais <video> tocando o Chrome
   cortava a página para a metade dos quadros); só aparece no primeiro quadro desenhado, e aí o vídeo some */
.motion-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.motion-box.is-drawn .motion-media canvas { opacity: 1; }
.motion-box.is-drawn .motion-media video { visibility: hidden; }
/* Pensamento de IA: desce o vídeo, sem zoom */
.motion-box--shift-down .motion-media :is(video, canvas) { transform: translateY(7%); }
/* véu escuro no topo, para o texto ler sobre qualquer quadro */
.motion-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,4,3,.9) 0%, rgba(7,4,3,.5) 34%, transparent 58%);
}

.motion-no {
  position: absolute; z-index: 2; top: clamp(20px, 1.9vw, 26px); right: clamp(22px, 2vw, 28px);
  font-family: var(--display); font-size: clamp(22px, 2vw, 30px); font-weight: 800; font-stretch: 118%;
  letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ember-text);
}
.motion-box > .plus { z-index: 2; right: clamp(22px, 2vw, 28px); bottom: clamp(20px, 1.9vw, 26px); color: #fff; opacity: .7; }

.motion-copy { position: relative; z-index: 2; padding: clamp(22px, 2vw, 28px); padding-right: 76px; max-width: 420px; }
.motion-copy h3 {
  margin: 0; font-family: var(--body); font-weight: 500; letter-spacing: -.05em;
  font-size: clamp(26px, 2.4vw, 36px); line-height: .95; color: #fff;
}
.motion-copy p { margin: 12px 0 0; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.72); }

/* ---------- sobre: na identidade das Palestras — palco de ponta a ponta, a luz de brasa vindo da direita ---------- */
/* Saiu do papel claro: a seção é um palco escuro como as outras padronizadas, sem caixa e sem a margem do respiro (o
   pé da faixa rolante já é escuro e a caixa do nó tem folga vazia acima do objeto). A luz é o oposto da 01 das
   Palestras (logo abaixo, que acende à esquerda): o laranja nasce na borda DIREITA, atrás do título, e se apaga na
   faixa dos números. A seção é alta, então a luz não é uma parede da altura toda: é uma elipse medida em px a partir
   do alto (pela largura do nó, como o cabeçalho). Restos fracos de brasa ficam atrás do nó, em cima à esquerda, e atrás
   do retrato. Em cima a luz acende do zero, numa rampa longa, e embaixo se apaga ainda dentro da seção (em px; abaixo
   vem o palco das Palestras) */
.about {
  --u: clamp(9px, 1vw, 14px);
  --knot-w: clamp(440px, 48vw, 780px);
  position: relative; isolation: isolate; overflow-x: clip;
  padding: clamp(24px, 3vw, 48px) 0 clamp(16px, 2vw, 32px);
  background: var(--ink);
}
.about::before {
  content: ""; position: absolute; inset: 0 -8%; z-index: -2; pointer-events: none;
  filter: blur(clamp(40px, 5vw, 90px));
  background:
    radial-gradient(30% calc(var(--knot-w) * .4) at 95% calc(var(--knot-w) * .55), rgba(255,138,72,.5), rgba(255,106,31,.2) 50%, transparent 90%),
    radial-gradient(62% calc(var(--knot-w) * .95) at 100% calc(var(--knot-w) * .55),
      rgba(255,106,31,.92), rgba(244,88,22,.76) 12%, rgba(222,72,15,.56) 24%, rgba(180,54,10,.36) 36%,
      rgba(128,36,6,.2) 50%, rgba(70,20,5,.08) 66%, rgba(36,12,4,.02) 82%, transparent),
    radial-gradient(26% calc(var(--knot-w) * .36) at 8% calc(var(--knot-w) * .24), rgba(255,122,46,.2), rgba(242,82,15,.07) 50%, transparent 90%),
    radial-gradient(34% 520px at 4% calc(100% - 640px), rgba(255,106,31,.16), rgba(242,82,15,.05) 50%, transparent 90%);
  -webkit-mask: linear-gradient(180deg, var(--fade-top), var(--fade-bottom));
          mask: linear-gradient(180deg, var(--fade-top), var(--fade-bottom));
}

/* o nó de trevo de metal em 3D, em ASCII de 0 e 1 (canvas do main.js), fica à direita,
   grande e passando da borda; o título e o apoio ficam à esquerda, no pé. O cabeçalho tem a altura do
   nó, para os números só começarem depois dele */
.about-head {
  position: relative; min-height: calc(var(--knot-w) * .8);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: clamp(20px, 2vw, 28px);
  text-align: left;
}
.about-knot {
  position: absolute; z-index: -1; right: calc(-1 * clamp(40px, 8vw, 180px)); top: calc(var(--knot-w) * -.04);
  width: var(--knot-w); aspect-ratio: 1; pointer-events: none;
}
/* o título é a frase inteira, um manifesto: maior que os de Ensinamentos e Eventos; fica sobre o laranja, então o
   destaque vai em pêssego (o "Eu" da 01) */
.about-title { font-size: clamp(48px, 7.8vw, 124px); letter-spacing: -.035em; }
.about-title em { font-style: normal; color: var(--ember-title); }
.about-lead { max-width: 340px; text-align: left; }
.about-lead b { color: #fff; font-weight: 500; }

/* os números: uma faixa entre as linhas finas dos slides, com os numerais das abas (Archivo largo e pesado) no maior
   tamanho da página e o rótulo em Inter Tight ao lado, no pé do numeral */
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(56px, 7vw, 104px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px;
  padding: clamp(26px, 3vw, 44px) clamp(8px, 1.5vw, 24px) clamp(22px, 2.6vw, 36px) 0;
}
.stat + .stat { border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 48px); }
.stat .num {
  font-family: var(--display); font-stretch: 118%; font-weight: 800; letter-spacing: -.05em;
  font-size: clamp(76px, 11.5vw, 180px); line-height: .78; font-variant-numeric: tabular-nums; color: #fff;
}
.stat .num sup { font-size: .36em; letter-spacing: -.02em; vertical-align: top; position: relative; top: .04em; margin-left: .06em; color: var(--ember-text); }
.stat h3 {
  margin: 0; max-width: 10ch;
  font-weight: 500; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.02; letter-spacing: -.045em; color: rgba(255,255,255,.72);
}

.about-grid { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: clamp(32px, 6vw, 96px); margin-top: clamp(56px, 7vw, 100px); align-items: stretch; }
.about-rail { position: relative; display: flex; flex-direction: column; }
.about-rail > .cv { margin-top: clamp(44px, 5vw, 64px); }
/* a corrente de metal em 3D/ASCII (canvas do main.js), unindo os dois lados num S deitado: sai da borda esquerda logo
   abaixo das especialidades, sobe numa corcova, desce num vale por baixo da experiência e volta perto da borda direita.
   A caixa do canvas vai da borda esquerda da tela (e um pouco além) até a direita; o JS põe a onda pela proporção dela. O espaço no
   fluxo ocupa o resto do trilho e o estica o quanto faltar */
.about-chain {
  --chain-h: clamp(380px, 36vw, 560px);
  position: relative; flex: 1 0 auto; min-height: calc(var(--chain-h) * .72 - clamp(40px, 4vw, 64px));
  margin-top: clamp(8px, 1vw, 16px); pointer-events: none;
}
.about-chain-solid {
  --bleed: calc(var(--chain-h) * .3); --chain-ext: 1.05;
  position: absolute; z-index: -1; top: calc(var(--chain-h) * -.04);
  left: calc(-1 * (max(0px, (100vw - 1320px) / 2) + var(--gutter) + var(--bleed)));
  width: calc(100vw + var(--bleed)); height: var(--chain-h);
}
.about-chain:not(:has(canvas)) { display: none; }

/* o retrato é uma tela, como as fotos de Registros de palco: cantos de 22px, sem borda, a sombra funda, a brasa fraca
   no canto de baixo à esquerda e uma cruz no alto à direita */
.about-photo {
  position: relative; margin: 0; aspect-ratio: 4 / 5;
  width: min(100%, 520px);
  overflow: hidden; border-radius: 22px; background: rgba(7,4,3,.86); color: #fff; isolation: isolate;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.7);
  /* mantém a animação de entrada suave */
  backface-visibility: hidden; transform: translateZ(0);
}
/* a entrada usa `scale`/`opacity` para não sobrescrever o translateZ(0) acima */
.about-photo.reveal, .about-photo.reveal.in {
  transform: translateZ(0);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), scale 1.1s cubic-bezier(.16,1,.3,1);
}
.about-photo.reveal { opacity: 0; scale: .965; }
.about-photo.reveal.in { opacity: 1; scale: 1; }
.about-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.92);
  transform: scale(1.0001); transition: transform 1.4s cubic-bezier(.16,1,.3,1);
}
/* com a foto carregada, o fundo escuro e o fallback saem de trás dela:
   senão eles vazam no antialiasing das bordas arredondadas como um fio preto */
.about-photo:has(img) { background: transparent; }
.about-photo:has(img) .about-photo-fallback { display: none; }
.about-photo-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(90% 60% at 50% 115%, var(--ember) 0%, var(--ember-deep) 45%, transparent 75%), #0b0b0b;
}
.about-photo-fallback span {
  font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(90px, 12vw, 180px); letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.35);
}
/* o véu escuro no pé, para a legenda ler, e a brasa fraca no canto; no hover a brasa cresce como luz (só opacity e
   transform), como nas fotos */
.about-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(80% 50% at 0% 100%, rgba(255,106,31,.3), rgba(194,61,8,.1) 50%, transparent 100%),
    linear-gradient(to top, rgba(7,4,3,.86), rgba(7,4,3,.3) 32%, transparent 54%);
}
.about-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(70% 60% at 0% 100%, rgba(255,106,31,.36), rgba(194,61,8,.14) 50%, transparent 100%);
  opacity: 0; transform: scale(.7); transform-origin: 0 100%;
  transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .5s;
}
.about-photo:hover img { transform: scale(1.04); }
.about-photo:hover::before { opacity: 1; transform: none; }
.about-photo > .plus { z-index: 2; top: clamp(20px, 1.9vw, 26px); right: clamp(20px, 1.9vw, 26px); color: #fff; }
/* a legenda: o nome em Inter Tight apertado, o papel embaixo e o selo, a única peça sólida em brasa da seção */
.about-photo figcaption {
  position: absolute; z-index: 2; left: clamp(18px, 1.8vw, 24px); right: clamp(16px, 1.6vw, 22px); bottom: clamp(16px, 1.6vw, 22px);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  font-size: 13px; line-height: 1.3; color: rgba(255,255,255,.72);
}
.about-photo figcaption strong { display: block; margin-bottom: 4px; font-weight: 500; font-size: clamp(20px, 1.8vw, 26px); line-height: 1; letter-spacing: -.045em; color: #fff; }
.about-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: var(--ember); color: var(--ink); font-weight: 600; font-size: 12px; white-space: nowrap; }
.about-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.about-body { width: 100%; margin: 0; }

/* os blocos do currículo: o título e o numeral das abas em brasa, sobre uma linha fina */
.cv { margin-top: clamp(44px, 5vw, 64px); }
.about-body > .cv:first-child { margin-top: 0; }
.cv-title {
  display: flex; justify-content: space-between; align-items: center; margin: 0; padding-bottom: 16px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.6);
  border-bottom: 1px solid var(--line);
}
.cv-title > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.cv-count {
  font-family: var(--display); font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; font-stretch: 118%;
  letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ember-text);
}
/* a experiência como a lista de Eventos: linhas de 1 px, o numeral das abas em brasa (contador do CSS), o cargo em
   Inter Tight apertado e, ao lado, as disciplinas */
/* todas as caixas acompanham a altura do maior conteúdo em cada largura de tela */
.cv-list { display: grid; grid-auto-rows: 1fr; list-style: none; margin: 0; padding: 0; counter-reset: cv; }
.cv-list > li {
  counter-increment: cv;
  position: relative; isolation: isolate; overflow: visible;
  display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: baseline; align-content: center;
  padding: clamp(20px, 2.2vw, 28px) 12px;
  border-bottom: 1px solid var(--line);
}
.cv-list > li::before {
  content: counter(cv, decimal-leading-zero);
  font-family: var(--display); font-size: clamp(16px, 1.4vw, 20px); font-weight: 800; font-stretch: 118%;
  letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ember-text);
}
/* o brilho se projeta além da linha, com bordas difusas e uma entrada gradual */
.cv-list > li::after,
.event-row::before {
  content: ""; position: absolute; inset: -48px -40px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse closest-side at 35% 50%, rgba(255,106,31,.42), rgba(194,61,8,.19) 48%, transparent 100%);
  filter: blur(24px); opacity: 0;
  transition: opacity .65s ease;
}
.cv-list > li:hover::after { opacity: 1; }
.cv-role { transition: transform .8s cubic-bezier(.16,1,.3,1); }
.cv-list > li:hover .cv-role { transform: translateX(4px); }
.cv-role strong {
  display: block; font-family: var(--body); font-weight: 500;
  font-size: clamp(22px, 2.1vw, 30px); line-height: 1; letter-spacing: -.05em; color: #fff;
}
.cv-role span { display: block; margin-top: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.5); }
.cv-list > li > .cv-role:last-child { grid-column: 2 / -1; }
.cv-courses { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cv-courses li { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.35; }
.cv-courses b { display: block; font-weight: 500; font-size: 15px; letter-spacing: -.01em; color: rgba(255,255,255,.9); }

/* as especialidades têm um halo suave que se espalha ao redor da pílula */
.skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.skills span {
  position: relative; isolation: isolate;
  padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.06);
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,.72);
  transition: background .7s ease, color .7s ease;
}
.skills span::before {
  content: ""; position: absolute; inset: -20px -24px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse closest-side, rgba(255,106,31,.36), rgba(194,61,8,.14) 55%, transparent 100%);
  filter: blur(12px); opacity: 0; transition: opacity .65s ease;
}
.skills span:hover { background: rgba(255,106,31,.1); color: var(--ember-text); }
.skills span:hover::before { opacity: 1; }

/* ---------- instituições: na identidade das Palestras — palco de ponta a ponta, a luz de brasa vindo da direita ---------- */
/* Como Empresas (logo acima): fundo de borda a borda, grão e cruzes iguais, sem a margem do respiro e com pouco
   padding em cima (o pé de Empresas já é escuro e a caixa do icosaedro tem folga vazia acima do objeto). A luz é o
   oposto da de lá: o laranja nasce na borda DIREITA, na altura do título, e cai até o preto antes do meio, com um resto
   fraco de brasa no canto de cima à esquerda, atrás do icosaedro. Em cima a luz acende do zero, numa rampa longa, e
   embaixo se apaga ainda dentro da seção (em px; abaixo vem Fotos) */
.schools {
  --u: clamp(9px, 1vw, 14px);
  position: relative; isolation: isolate; overflow-x: clip;
  padding: clamp(24px, 3vw, 48px) 0 clamp(72px, 8vw, 120px);
  background: var(--ink);
}
.schools::before {
  content: ""; position: absolute; inset: 0 -8%; z-index: -2; pointer-events: none;
  filter: blur(clamp(40px, 5vw, 90px));
  background:
    radial-gradient(36% 30% at 95% 30%, rgba(255,138,72,.5), rgba(255,106,31,.2) 50%, transparent 90%),
    linear-gradient(270deg,
      rgba(255,106,31,.92) 6%, rgba(244,88,22,.78) 13%, rgba(226,74,16,.6) 20%, rgba(196,60,11,.42) 27%,
      rgba(156,46,8,.27) 34%, rgba(112,32,6,.15) 41%, rgba(70,20,5,.07) 48%, rgba(36,12,4,.02) 56%, transparent 64%),
    radial-gradient(24% 20% at 6% 14%, rgba(255,122,46,.2), rgba(242,82,15,.07) 50%, transparent 90%);
  -webkit-mask: linear-gradient(180deg, var(--fade-top), var(--fade-bottom));
          mask: linear-gradient(180deg, var(--fade-top), var(--fade-bottom));
}

/* o cabeçalho é o de Eventos: o icosaedro de metal em 3D, em ASCII de 0 e 1 (canvas do main.js), à esquerda, grande e
   passando da borda; o título e o contador à direita, no pé. O cabeçalho tem a altura do icosaedro, para a grade só
   começar depois dele */
.schools-head {
  --solid-w: clamp(460px, 50vw, 820px);
  position: relative; min-height: calc(var(--solid-w) * .8);
  justify-content: flex-end; align-items: flex-end; text-align: right;
}
.schools-solid {
  position: absolute; z-index: -1; left: calc(-1 * clamp(40px, 8vw, 180px)); top: calc(var(--solid-w) * -.05);
  width: var(--solid-w); aspect-ratio: 1; pointer-events: none;
}
/* o título e o contador ficam sobre o laranja: o destaque vai em pêssego (o "Eu" da 01), que lê ali; em brasa ele sumia */
.schools-title em { font-style: normal; color: var(--ember-title); }
/* o contador: o numeral das abas (Archivo largo e pesado), com o apoio e a linha fina ao lado */
.schools-count { display: flex; align-items: flex-end; gap: clamp(18px, 2vw, 28px); text-align: left; }
.schools-count .num {
  font-family: var(--display); font-stretch: 118%; font-weight: 800; letter-spacing: -.04em;
  font-size: clamp(64px, 7vw, 112px); line-height: .8; font-variant-numeric: tabular-nums; color: var(--ember-text);
}
.schools-count .num sup { font-size: .42em; vertical-align: top; position: relative; top: .1em; margin-left: 2px; }
.schools-lead { max-width: 250px; }

/* a grade: só as linhas finas dos slides — uma em cima, uma embaixo de cada linha e uma entre as colunas, sem moldura
   por fora */
.school-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.school {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  min-height: 200px; padding: 22px 24px;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; gap: 14px 12px;
  grid-template-areas: "no kind" "name name" "meta meta";
  border-bottom: 1px solid var(--line); border-left: 1px solid var(--line);
}
.school:nth-child(4n+1) { border-left: 0; }
/* no hover, a brasa sobe como luz da linha de baixo (não um bloco chapado): a elipse se apaga antes do alto e dos
   lados da célula; só transform e opacity */
.school::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 85% at 50% 100%, rgba(255,106,31,.42), rgba(194,61,8,.16) 50%, transparent 100%);
  opacity: 0; transform: translateY(24%);
  transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .5s;
}
.school:hover::before { opacity: 1; transform: none; }
.school-no {
  grid-area: no; font-family: var(--display); font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; font-stretch: 118%;
  letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ember-text);
}
.school-kind { grid-area: kind; justify-self: end; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.5); }
/* o nome como os de Eventos: Inter Tight fino e bem apertado */
.school-name {
  grid-area: name; align-self: center;
  font-family: var(--body); font-weight: 500; font-size: clamp(24px, 2.2vw, 32px); line-height: .98; letter-spacing: -.05em;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.school:hover .school-name { transform: translateY(-4px); }
.school-logo {
  grid-area: name; align-self: center; max-height: 56px; max-width: 80%; width: auto;
  filter: grayscale(1) brightness(0) invert(1); opacity: .8; transition: opacity .3s;
}
.school:hover .school-logo { opacity: 1; }
.school-meta { grid-area: meta; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.62); transition: color .3s; }
.school:hover .school-meta { color: rgba(255,255,255,.85); }

/* "Sua escola": uma tela escura dentro da célula, como as caixas de Ensinamentos, com a brasa no canto de baixo à
   direita; o círculo da seta é a única peça sólida em brasa */
.school--cta { display: block; padding: 8px; }
.school--cta::before { display: none; }
.school--cta a {
  display: grid; grid-template-rows: auto 1fr auto; gap: 14px; height: 100%; padding: 14px 16px;
  border-radius: 16px;
  background:
    radial-gradient(80% 70% at 100% 100%, rgba(255,79,15,.3), rgba(122,23,3,.1) 55%, transparent 85%),
    rgba(16,11,9,.88);
}
/* as áreas nomeadas das células não existem no grid do link: cada peça segue a ordem */
.school--cta a > * { grid-area: auto; }
.school--cta .school-kind { justify-self: start; color: var(--ember-text); }
.school--cta .school-meta { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; color: #fff; }
.school-go {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ember); color: var(--ink);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.school--cta:hover .school-go { transform: rotate(45deg); }

/* ---------- events: na identidade das Palestras — palco de ponta a ponta, a luz de brasa vindo da direita ---------- */
/* Como Ensinamentos (logo acima), o fundo vai de borda a borda e o grão fino é o mesmo; mas sem a margem do respiro e
   sem padding em cima: o pé de Ensinamentos já é escuro e a caixa do palco tem folga vazia acima do objeto, então
   o vão somado ficava grande demais. A luz é o espelho da de lá: o laranja nasce na borda DIREITA, na altura do título, e cai até o
   preto antes do meio, com um resto fraco de brasa embaixo à esquerda; assim as duas seções seguidas não repetem a
   mesma parede. Em cima a luz acende do zero, numa rampa longa, e embaixo se apaga ainda dentro da seção (as
   paradas do pé são em px, para o quadro de um evento aberto não esticar a luz) */
.events {
  --u: clamp(9px, 1vw, 14px);
  position: relative; isolation: isolate; overflow-x: clip;
  padding: 0 0 clamp(72px, 8vw, 120px);
  background: var(--ink);
}
/* A luz de Eventos não pode depender da altura da seção: ela muda a cada quadro enquanto os quadros dos eventos abrem
   e fecham, e um fundo do tamanho da seção com máscara e degradês em % (e o blur, antes) era redesenhado inteiro pela
   GPU a cada quadro — travava a página. Então nada aqui é medido pela altura: a faixa de brasa da borda direita é um
   ladrilho de 64 px repetido para baixo, o ponto de luz do alto fica a uma distância fixa do topo, e no lugar da
   máscara vão duas camadas da cor do fundo — a de cima, aqui, e a de baixo, presa ao pé da seção (.events-chrome::before,
   numa camada própria, que só desliza). Visualmente é o mesmo de antes */
.events::before {
  content: ""; position: absolute; inset: 0 -8%; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, var(--ink) 0px, rgba(10,10,10,0.9967) 40px, rgba(10,10,10,0.973) 80px, rgba(10,10,10,0.914) 120px, rgba(10,10,10,0.812) 160px, rgba(10,10,10,0.67) 200px, rgba(10,10,10,0.5) 240px, rgba(10,10,10,0.323) 280px, rgba(10,10,10,0.161) 320px, rgba(10,10,10,0.044) 360px, transparent 400px) 0 0 / 100% 400px no-repeat,
    radial-gradient(36% clamp(460px, 36vw, 580px) at 95% clamp(250px, 20vw, 320px), rgba(255,138,72,.5), rgba(255,106,31,.2) 50%, transparent 90%) 0 0 / 100% 1000px no-repeat,
    linear-gradient(270deg,
      rgba(255,106,31,.92) 6%, rgba(244,88,22,.78) 13%, rgba(226,74,16,.6) 20%, rgba(196,60,11,.42) 27%,
      rgba(156,46,8,.27) 34%, rgba(112,32,6,.15) 41%, rgba(70,20,5,.07) 48%, rgba(36,12,4,.02) 56%, transparent 64%) 0 0 / 100% 64px repeat-y;
}
.events-chrome::before {
  /* z -1, antes do grão no fluxo: o véu apaga só a luz, e o grão segue por cima até a borda, emendando no de baixo */
  content: ""; position: absolute; z-index: -1; left: -8%; right: -8%; bottom: 0; height: 520px; will-change: transform;
  background: linear-gradient(180deg, transparent 0px, rgba(10,10,10,0.044) 52px, rgba(10,10,10,0.161) 104px, rgba(10,10,10,0.323) 156px, rgba(10,10,10,0.5) 208px, rgba(10,10,10,0.67) 260px, rgba(10,10,10,0.812) 312px, rgba(10,10,10,0.914) 364px, rgba(10,10,10,0.973) 416px, rgba(10,10,10,0.9967) 468px, var(--ink) 520px);
}

/* o cabeçalho inverte o de Ensinamentos: o palco giratório de metal em 3D, em ASCII de 0 e 1 (canvas do main.js), à
   esquerda, grande e passando da borda; o título e o apoio à direita, no pé. O cabeçalho tem a altura do palco, para
   a lista só começar depois dele. A caixa (10:9) tem folga vazia em cima e embaixo do objeto: ela sobe um pouco
   (top negativo) e o cabeçalho cobre só a parte com o palco */
.events-head {
  --stage-w: clamp(560px, 60vw, 1000px);
  position: relative; min-height: calc(var(--stage-w) * .74);
  justify-content: flex-end; align-items: flex-end; text-align: right;
}
.events-lead { text-align: left; }
.events-stage {
  position: absolute; z-index: -1; left: calc(-1 * clamp(80px, 14.5vw, 290px)); top: calc(var(--stage-w) * -.045);
  width: var(--stage-w); aspect-ratio: 10 / 9; pointer-events: none;
}
.events-title em { font-style: normal; color: var(--ember-title); }

/* a lista: linhas de 1 px, como o chrome dos slides */
.event-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.event { border-bottom: 1px solid var(--line); transition: border-color .4s; }
.event-row {
  position: relative; isolation: isolate; overflow: visible; cursor: pointer;
  display: grid; grid-template-columns: 72px 1fr auto 56px; align-items: center; gap: 24px;
  padding: clamp(22px, 2.6vw, 34px) 20px;
}
/* o gradiente é compartilhado com as caixas de Experiência do Sobre */
/* os numerais das abas: Archivo largo e pesado, em brasa */
.event-no {
  grid-column: 1; font-family: var(--display); font-size: clamp(18px, 1.6vw, 24px); font-weight: 800; font-stretch: 118%;
  letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ember-text);
}
/* o nome como os títulos das caixas de Ensinamentos: Inter Tight fino e bem apertado */
.event-name {
  grid-column: 2;
  font-family: var(--body); font-weight: 500;
  font-size: clamp(30px, 4.4vw, 64px); line-height: .95; letter-spacing: -.055em;
  transition: color .3s, transform .8s cubic-bezier(.16,1,.3,1);
}
/* etiquetas e seta sem borda: um preenchimento fraco é o que segura a forma (como as pílulas do menu) */
.event-tags { grid-column: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.event-tags span {
  padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.06);
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.72); white-space: nowrap;
  transition: color .3s, background .3s;
}
.event-arrow {
  grid-column: 4; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: #fff; cursor: pointer;
  transition: transform .5s cubic-bezier(.16,1,.3,1), background .3s, color .3s;
}
.event-arrow svg { width: 18px; height: 18px; }

/* hover e aberto: a luz acende, o nome anda e a seta vira a única peça sólida em brasa */
.event-row:hover::before, .event.is-open .event-row::before { opacity: 1; }
.event-row:hover .event-name, .event.is-open .event-name { transform: translateX(4px); }
.event-row:hover .event-tags span, .event.is-open .event-tags span { color: #fff; background: rgba(255,255,255,.1); }
.event-row:hover .event-arrow, .event.is-open .event-arrow { background: var(--ember); color: var(--ink); }
.event-row:hover .event-arrow { transform: rotate(45deg); }
.event.is-open .event-arrow { transform: rotate(135deg); }

/* ---------- o quadro do evento: um telão ---------- */
/* abre e fecha animando a altura; ao fechar, um pouco mais rápido e com saída suave */
.event-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.65,0,.35,1); }
.event.is-open .event-panel { grid-template-rows: 1fr; transition: grid-template-rows .7s cubic-bezier(.16,1,.3,1); }
.event-panel-inner { min-height: 0; overflow: hidden; }
.event.is-open { border-bottom-color: transparent; }

/* A tela aberta é um telão de palco, todos da mesma altura: a luz da palestra 01 num canto e o numeral gigante do
   evento em contorno de 1 px, a participação como título e o apoio com a linha fina no pé à esquerda. As fotos ficam
   emolduradas à direita (nunca no fundo): a principal como uma tela na altura toda, abrindo como cortina, e a 2ª
   sobreposta no canto dela, como um monitor de retorno; o card de speaker fica em pé, inteiro. Sem hover: a tela não
   reage ao cursor */
.event-screen {
  --panel-h: clamp(440px, 40vw, 580px);
  --pad: clamp(26px, 3.2vw, 48px);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: var(--panel-h); margin: 4px 0 28px; padding: var(--pad);
  border-radius: 22px; color: #fff;
  /* a luz nasce no canto de cima à direita (sem fotos) */
  background:
    radial-gradient(70% 95% at 100% 0%, rgba(255,138,72,.95), rgba(247,92,22,.72) 24%, rgba(194,60,10,.42) 46%, rgba(102,30,5,.18) 68%, rgba(36,12,4,.05) 86%, transparent 100%),
    radial-gradient(30% 40% at 0% 100%, rgba(242,82,15,.14), transparent 80%),
    linear-gradient(200deg, #0b0705, #050302 60%, #070403);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.7);
}
/* com fotos à direita, a luz passa para o canto de baixo à esquerda, atrás do texto */
.event-screen--side {
  background:
    radial-gradient(70% 100% at 0% 100%, rgba(255,138,72,.95), rgba(247,92,22,.72) 24%, rgba(194,60,10,.42) 46%, rgba(102,30,5,.18) 68%, rgba(36,12,4,.05) 86%, transparent 100%),
    radial-gradient(30% 40% at 100% 0%, rgba(255,122,46,.14), transparent 80%),
    linear-gradient(200deg, #0b0705, #050302 60%, #070403);
}
/* o numeral gigante do evento, só no contorno fino, no canto oposto ao das fotos */
.event-screen::after {
  content: attr(data-no); position: absolute; z-index: 0; top: -.1em; right: -.05em; pointer-events: none;
  font-family: var(--display); font-stretch: 125%; font-weight: 800; line-height: 1;
  font-size: clamp(260px, 34vw, 520px); letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.2);
}
.event-screen--side::after { right: auto; left: -.05em; }

/* o texto: a participação como título e o apoio com a linha fina, no pé à esquerda; sobre a luz, o destaque em
   pêssego e uma sombra escura suave */
.event-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 24px); max-width: min(620px, 56%); text-shadow: 0 1px 16px rgba(40,10,2,.4); }
.event-screen--photo .event-copy { max-width: 44%; }
.event-role {
  margin: 0; font-family: var(--body); font-weight: 500;
  font-size: clamp(28px, 3.3vw, 52px); line-height: .94; letter-spacing: -.058em; text-wrap: balance;
}
.event-role b { font-weight: 600; color: var(--ember-text); }
.event-about {
  position: relative; margin: 0; padding-left: 22px; max-width: 46ch;
  font-size: clamp(14px, 1.1vw, 16px); line-height: 1.45; color: rgba(255,255,255,.8);
}
.event-about::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 1px; background: rgba(255,255,255,.55); }

/* ---- as fotos, emolduradas à direita ---- */
.event-media { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.event-photo {
  position: absolute; overflow: hidden; padding: 0; margin: 0; border: 0; outline: 0; pointer-events: auto;
  background: #000; cursor: zoom-in; -webkit-appearance: none; appearance: none;
  border-radius: 14px;
}
.event-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.event-photo:focus-visible { outline: 2px solid var(--ember-hot); outline-offset: 3px; }
.event-photo.is-main {
  top: var(--pad); bottom: var(--pad); right: var(--pad); width: var(--main-w, 42%);
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.8);
}
.event-photo.is-pip {
  z-index: 2; bottom: calc(var(--pad) + 28px); right: calc(var(--pad) + var(--main-w, 42%) - 56px);
  height: clamp(150px, 15vw, 220px); aspect-ratio: var(--r);
  box-shadow: 0 18px 40px -10px rgba(0,0,0,.8);
}
.event-photo.is-pip img { object-position: 50% 15%; }
/* monitor deitado (foto horizontal): mais baixo e mais para dentro da tela grande, para não invadir o texto */
.event-photo.is-pip.is-wide { height: clamp(110px, 11vw, 165px); right: calc(var(--pad) + var(--main-w, 42%) - 110px); }
.event-photo.is-pip.is-wide img { object-position: 50% 50%; }
.event-photo.is-poster {
  top: var(--pad); bottom: var(--pad); right: calc(var(--pad) * 1.6); aspect-ratio: var(--r);
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.8);
}

/* o selo "Ver fotos": a única outra peça sólida em brasa, parado no canto de baixo da foto principal */
.event-badge {
  position: absolute; z-index: 4; right: calc(var(--pad) + 16px); bottom: calc(var(--pad) + 16px); pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 16px; border-radius: 999px;
  background: var(--ember); color: var(--ink);
  font-size: 12px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
}
.event-screen:has(.is-poster) .event-badge { right: calc(var(--pad) * 1.6 + 16px); }
.event-badge svg { width: 12px; height: 12px; }

/* a abertura: a foto principal abre como uma cortina da esquerda para a direita e chega de perto; o monitor e o card
   sobem girando de leve; o texto entra por último, em sequência */
.event-photo.is-main { clip-path: inset(0 100% 0 0 round 14px); transition: clip-path .5s cubic-bezier(.65,0,.35,1); }
.event-photo.is-main img { transform: scale(1.18); transition: transform 1.6s cubic-bezier(.16,1,.3,1); }
.event.is-open .event-photo.is-main { clip-path: inset(0 0 0 0 round 14px); transition: clip-path 1.05s cubic-bezier(.77,0,.18,1) .12s; }
.event.is-open .event-photo.is-main img { transform: scale(1.02); }
.event-photo.is-pip, .event-photo.is-poster, .event-badge {
  opacity: 0; transform: translateY(70px) rotate(4deg);
  transition: opacity .3s, transform .45s cubic-bezier(.65,0,.35,1);
}
.event.is-open .event-photo.is-pip, .event.is-open .event-photo.is-poster, .event.is-open .event-badge {
  opacity: 1; transform: none;
  transition: opacity .6s .45s, transform 1s cubic-bezier(.16,1,.3,1) .45s;
}
.event-copy > * { opacity: 0; transform: translateY(28px); transition: opacity .3s, transform .45s cubic-bezier(.16,1,.3,1); }
.event.is-open .event-copy > * { opacity: 1; transform: none; transition: opacity .6s, transform .9s cubic-bezier(.16,1,.3,1); }
.event.is-open .event-copy > :nth-child(1) { transition-delay: .3s; }
.event.is-open .event-copy > :nth-child(2) { transition-delay: .42s; }

/* ---------- empresas: na identidade das Palestras — palco de ponta a ponta, a luz de brasa vindo da esquerda ---------- */
/* Como Eventos (logo acima): fundo de borda a borda, grão e cruzes iguais, sem a margem do respiro e com pouco padding
   em cima (o pé de Eventos já é escuro e a caixa do bloco tem folga vazia acima do objeto). A luz é o oposto da de lá:
   o laranja nasce na borda ESQUERDA, na altura do título, e cai até o preto antes do meio, com um resto fraco de brasa
   no canto de cima à direita, atrás do bloco. A luz principal é uma elipse vertical difusa: mais larga no centro,
   afunila e se dissolve nas extremidades de cima e de baixo. */
.corps {
  --u: clamp(9px, 1vw, 14px);
  position: relative; isolation: isolate; overflow-x: clip;
  padding: clamp(24px, 3vw, 48px) 0 clamp(72px, 8vw, 120px);
  background: var(--ink);
}
.corps:not(.is-pinned)::before,
.is-pinned .corps-stage::before {
  content: ""; position: absolute; inset: -8svh -8%; z-index: -2; pointer-events: none;
  filter: blur(clamp(72px, 8vw, 144px));
  background:
    radial-gradient(28% 46% at 4% 50%, rgba(255,138,72,.3), rgba(255,106,31,.12) 50%, transparent 100%),
    radial-gradient(54% 48% at 0% 50%,
      rgba(255,106,31,.66), rgba(244,88,22,.56) 16%, rgba(226,74,16,.4) 32%, rgba(196,60,11,.24) 48%,
      rgba(156,46,8,.12) 64%, rgba(112,32,6,.045) 80%, rgba(70,20,5,.008) 94%, transparent 100%),
    radial-gradient(24% 20% at 94% 12%, rgba(255,122,46,.16), rgba(242,82,15,.06) 50%, transparent 90%);
  -webkit-mask: linear-gradient(180deg, var(--fade-top), var(--fade-bottom));
          mask: linear-gradient(180deg, var(--fade-top), var(--fade-bottom));
}

/* Dois estados com tempo de leitura: Siemens e a frase da palestra.
   O palco fica preso em qualquer largura; sem JS ou com movimento reduzido, fica empilhado. */
.corps-stage { position: relative; }
.corps-solid { position: relative; width: min(100%, 640px); aspect-ratio: 1; margin: 0 0 0 auto; pointer-events: none; }
.corps-scene { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(28px, 3vw, 40px); }
.corps-title { margin: 0; font-size: clamp(56px, 8vw, 128px); }
.corps-lead { max-width: 360px; }
.corps-lead b { color: #fff; font-weight: 500; }
.corps-progress { display: none; }

/* A pista de 3 telas: a abertura começa assim que a seção prende, e sobra tempo de leitura para a frase. */
.corps.is-pinned { padding: 0; }
.is-pinned .corps-track { height: 300svh; }
.is-pinned .corps-stage {
  --title: 1; --lead: 0; --open: 0; --progress: 0;
  position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate;
}
/* A linha acompanha a mesma posição de scroll do objeto e dos textos. */
.is-pinned .corps-progress {
  display: block; position: absolute; z-index: 2;
  left: 50%; width: min(240px, 48vw); translate: -50% 0;
  bottom: max(28px, env(safe-area-inset-bottom));
  height: 2px; overflow: hidden; border-radius: 2px;
  background: rgba(255,255,255,.14); pointer-events: none;
}
.corps-progress span {
  display: block; width: 100%; height: 100%; background: var(--ember);
  transform: scaleX(var(--progress)); transform-origin: left; will-change: transform;
}
/* No celular, um aviso logo acima da linha: sem ele, a cena presa parecia parada e a pessoa não sabia que devia
   rolar. Segue a direção da rolagem (o JS marca o palco com data-hint): "para baixo" descendo, "para cima" subindo, e
   apaga ao chegar no fim da cena descendo (.hint-off). Na letra da frase da palestra (Inter Tight, caixa baixa,
   espaçamento justo), não na de rótulo. */
.corps-hint { display: none; }
@media (max-width: 560px) {
  .is-pinned .corps-hint {
    display: block; position: absolute; z-index: 2;
    left: 50%; translate: -50% 0; bottom: calc(max(28px, env(safe-area-inset-bottom)) + 16px);
    font-family: var(--body); font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: -.02em;
    white-space: nowrap; color: rgba(255,255,255,.78); pointer-events: none;
    transition: opacity .35s ease;
  }
  .is-pinned .hint-off .corps-hint { opacity: 0; }
  .corps-hint > span { display: none; align-items: center; gap: 6px; }
  .corps-stage:not([data-hint="up"]) .corps-hint-down, .corps-stage[data-hint="up"] .corps-hint-up { display: inline-flex; }
  .is-pinned .corps-hint svg { color: var(--ember-hot); animation: corps-hint-down 1.6s ease-in-out infinite; }
  .is-pinned .corps-hint-up svg { animation-name: corps-hint-up; }
}
@keyframes corps-hint-down { 0%, 100% { translate: 0 -1px; } 50% { translate: 0 3px; } }
@keyframes corps-hint-up { 0%, 100% { translate: 0 1px; } 50% { translate: 0 -3px; } }

/* Gradiente, grão e detalhes pertencem ao palco preso: o scroll anima só o objeto e os textos. */
.is-pinned .corps-stage::before {
  --backdrop-fade: linear-gradient(180deg, transparent, rgba(0,0,0,.028) 5%, rgba(0,0,0,.216) 15%,
    rgba(0,0,0,.5) 25%, rgba(0,0,0,.784) 35%, rgba(0,0,0,.972) 45%, #000 50%,
    rgba(0,0,0,.972) 55%, rgba(0,0,0,.784) 65%, rgba(0,0,0,.5) 75%, rgba(0,0,0,.216) 85%, rgba(0,0,0,.028) 95%, transparent);
  -webkit-mask: var(--backdrop-fade); mask: var(--backdrop-fade);
}
.is-pinned .corps-solid {
  position: absolute; inset: 0; width: auto; aspect-ratio: auto; margin: 0;
  /* As metades se dissolvem antes das bordas do palco. */
  --edge: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.1) 4%, rgba(0,0,0,.4) 9%, rgba(0,0,0,.8) 15%, #000 21%,
    #000 79%, rgba(0,0,0,.8) 85%, rgba(0,0,0,.4) 91%, rgba(0,0,0,.1) 96%, transparent 100%);
  -webkit-mask: var(--edge); mask: var(--edge);
}
.is-pinned .corps-scene { position: absolute; inset: 0; display: grid; place-items: center; }
.is-pinned :is(.corps-title, .corps-lead) { grid-area: 1 / 1; }
/* O limite pela largura faz o nome caber em celulares estreitos. */
.is-pinned .corps-title {
  font-size: min(12svh, 15vw); line-height: 1; text-align: center; translate: 0 .04em;
  opacity: var(--title); scale: calc(.9 + .1 * var(--title));
}
.is-pinned .corps-lead {
  max-width: 720px; padding-left: 0; text-align: center;
  font-size: clamp(20px, 1.9vw, 28px); line-height: 1.25; letter-spacing: -.03em; color: rgba(255,255,255,.7);
  opacity: var(--lead); translate: 0 calc(16px * (1 - var(--lead)));
}
.is-pinned .corps-lead::before { display: none; }

/* a corrente grande atravessa as bordas da tela. O canvas continua além das laterais;
   só o viewport recorta os elos, enquanto a camada transparente conecta as duas seções. */
.tech-chain {
  --chain-height: clamp(480px, 48vw, 740px);
  --chain-bleed: clamp(80px, 9vw, 140px);
  --chain-side-bleed: clamp(96px, 12vw, 240px);
  display: none; position: relative; z-index: 2; isolation: isolate; overflow-x: clip; pointer-events: none;
  margin-top: calc(-1 * clamp(56px, 6vw, 88px));
  margin-bottom: calc(80px - clamp(96px, 10vw, 150px));
}
.tech-chain:has(canvas) { display: grid; justify-items: center; height: var(--chain-height); }
.tech-chain::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 62% 46% at 50% 50%, rgba(255,106,31,.12), rgba(194,61,8,.035) 50%, transparent 100%);
  filter: blur(clamp(24px, 4vw, 56px));
}
.tech-chain-solid {
  position: absolute; top: calc(-1 * var(--chain-bleed)); left: 50%; transform: translateX(-50%);
  width: calc(100% + 2 * var(--chain-side-bleed)); height: calc(var(--chain-height) + 2 * var(--chain-bleed));
}

/* ---------- fotos: na identidade das Palestras — palco de ponta a ponta, a luz de brasa vindo da esquerda ---------- */
/* Como Instituições (logo acima): fundo de borda a borda, grão e cruzes iguais, sem a margem do respiro. Sem objeto 3D
   (as fotos já são a imagem da seção), então não há caixa com folga vazia em cima: o padding de cima é o de
   Ensinamentos, e somado ao pé escuro de Instituições faz o vão de sempre. A luz é o oposto da de lá: o laranja nasce
   na borda ESQUERDA, na altura do título, e cai até o preto antes do meio, com um resto fraco no canto de cima à
   direita. Em cima a luz acende do zero, numa rampa longa, e embaixo se apaga ainda dentro da seção (em px; abaixo vem
   o cartão laranja de Contato, que ela não pode tocar) */
.photos {
  --u: clamp(9px, 1vw, 14px);
  position: relative; isolation: isolate; overflow-x: clip;
  padding: clamp(96px, 10vw, 150px) 0 clamp(72px, 8vw, 120px);
  background: var(--ink);
}
.photos::before {
  content: ""; position: absolute; inset: 0 -8%; z-index: -2; pointer-events: none;
  filter: blur(clamp(40px, 5vw, 90px));
  background:
    radial-gradient(36% 26% at 5% 22%, rgba(255,138,72,.5), rgba(255,106,31,.2) 50%, transparent 90%),
    linear-gradient(90deg,
      rgba(255,106,31,.92) 6%, rgba(244,88,22,.78) 13%, rgba(226,74,16,.6) 20%, rgba(196,60,11,.42) 27%,
      rgba(156,46,8,.27) 34%, rgba(112,32,6,.15) 41%, rgba(70,20,5,.07) 48%, rgba(36,12,4,.02) 56%, transparent 64%),
    radial-gradient(24% 20% at 94% 10%, rgba(255,122,46,.18), rgba(242,82,15,.06) 50%, transparent 90%);
  -webkit-mask: linear-gradient(180deg, var(--fade-top), var(--fade-bottom));
          mask: linear-gradient(180deg, var(--fade-top), var(--fade-bottom));
}
/* sem objeto, o cabeçalho é uma linha: o título à esquerda, sobre o laranja (o destaque em pêssego, como o de
   Ensinamentos), e o apoio à direita, no pé do título */
.photos-head { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; }
.photos-title em { font-style: normal; color: var(--ember-title); }

/* cada foto é uma tela, como as caixas de Ensinamentos: cantos de 22px, sem borda, a sombra funda; as fotos de uma
   linha dividem a mesma altura e nunca são cortadas */
.photo-grid { display: grid; gap: clamp(12px, 1.2vw, 16px); counter-reset: photo; }
.photo-row { display: flex; gap: clamp(12px, 1.2vw, 16px); }
.photo {
  flex: var(--r) 1 0; aspect-ratio: var(--r); min-width: 0;
  position: relative; overflow: hidden; isolation: isolate;
  padding: 0; border: 0; border-radius: 22px; background: rgba(7,4,3,.86);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.7);
  cursor: zoom-in; font: inherit; color: #fff; text-align: left;
}
.photo:not(.photo--graphic) { counter-increment: photo; }
.photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.16,1,.3,1), filter .6s;
  filter: saturate(.9);
}
/* o véu escuro no pé, para a legenda ler sobre qualquer foto */
.photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(7,4,3,.8), rgba(7,4,3,.3) 30%, transparent 50%);
}
/* no hover, a brasa entra como luz do canto de baixo à esquerda (não um bloco): a elipse se apaga antes do alto e da
   direita da foto; só opacity e transform */
.photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 55% at 0% 100%, rgba(255,106,31,.42), rgba(194,61,8,.16) 50%, transparent 100%);
  opacity: 0; transform: scale(.7); transform-origin: 0 100%;
  transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .5s;
}
/* a legenda: o numeral das abas em brasa, o evento em Inter Tight apertado e o momento embaixo */
.photo-cap {
  position: absolute; z-index: 2; left: clamp(18px, 1.8vw, 24px); bottom: clamp(16px, 1.6vw, 22px); right: 76px;
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline;
  font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.3;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.photo-cap::before {
  content: counter(photo, decimal-leading-zero); grid-row: span 2;
  font-family: var(--display); font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; font-stretch: 118%;
  letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ember-text);
}
.photo-cap b {
  display: block; margin-bottom: 4px;
  font-weight: 500; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.02; letter-spacing: -.045em; color: #fff;
}
/* a lupa: a única peça sólida em brasa, como a seta de Eventos */
.photo-zoom {
  position: absolute; z-index: 2; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ember); color: var(--ink);
  transform: scale(0) rotate(-90deg); transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.photo-zoom svg { width: 16px; height: 16px; }
.photo:hover img { transform: scale(1.05); filter: saturate(1.05); }
.photo:hover::before { opacity: 1; transform: none; }
.photo:hover .photo-cap { transform: translateY(-4px); }
.photo:hover .photo-zoom, .photo:focus-visible .photo-zoom { transform: none; }
.photo--graphic::after, .photo--graphic::before { display: none; }
.photo--graphic:hover img { transform: scale(1.02); }

/* os pontos do carrossel (só no celular): um por foto; o da foto à vista se alonga em brasa */
.photo-nav { display: none; }
.photo-nav i {
  width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.28);
  transition: width .35s cubic-bezier(.16,1,.3,1), background-color .35s;
}
.photo-nav i.is-on { width: 26px; background: var(--ember-hot); }

/* a foto em tela cheia: vidro escuro por cima da página, e os botões sem borda (um preenchimento fraco segura a forma,
   como as setas de Eventos); no hover, a brasa sólida */
.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgba(7,4,3,.86); color: #fff;
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
}
.lightbox::backdrop { background: rgba(0,0,0,.5); }
.lightbox[open] { display: grid; place-items: center; animation: lb-in .35s ease-out; }
@keyframes lb-in { from { opacity: 0; } }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 16px; padding: 70px 90px 40px; }
.lightbox img { max-width: min(1400px, calc(100vw - 180px)); max-height: calc(100vh - 170px); width: auto; height: auto; border-radius: 22px; }
.lightbox figcaption { font-size: 15px; font-weight: 500; letter-spacing: -.02em; color: rgba(255,255,255,.72); }
.lb-btn {
  position: absolute; width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; border: 0; background: rgba(255,255,255,.07); color: #fff;
  transition: background .25s, color .25s;
}
.lb-btn:hover { background: var(--ember); color: var(--ink); }
.lb-btn svg { width: 18px; height: 18px; }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; translate: 0 -50%; }
.lb-next { right: 20px; top: 50%; translate: 0 -50%; }

/* ---------- contato: gradiente orgânico da Ref Gradient ---------- */
/* Curvas da referência, com a paleta, o blur e a rampa de entrada das outras
   seções. A brasa nasce na base e sobe até desaparecer no --ink. */
.cta {
  --u: clamp(9px, 1vw, 14px);
  position: relative; isolation: isolate; overflow: clip;
  padding: clamp(120px, 13vw, 200px) 0 clamp(18px, 2.5vw, 32px);
  background: var(--ink); text-align: center;
}
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(to top, rgba(10,10,10,.62), transparent 18%);
}
/* o grão não some em nenhuma ponta: em cima ele continua o de Fotos (.1), embaixo a página acaba junto com a seção.
   Onde a brasa aparece ele engrossa para .15, na mesma rampa da máscara do .horizon, então a junção não muda. */
.cta::after {
  opacity: .15;
  -webkit-mask: linear-gradient(180deg, rgba(0,0,0,.667) 20px, rgba(0,0,0,.71) 110px, rgba(0,0,0,.82) 210px, #000 340px);
          mask: linear-gradient(180deg, rgba(0,0,0,.667) 20px, rgba(0,0,0,.71) 110px, rgba(0,0,0,.82) 210px, #000 340px);
}
.cta-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
/* Halos de luz sobre uma base quente contínua: as curvas surgem da variação
   de luminosidade, sem recortes pretos entre as áreas de cor. */
.horizon {
  position: absolute; z-index: -3; inset: 0 -10% -100px; pointer-events: none;
  background:
    radial-gradient(ellipse 14% 26% at 32% 88%, rgba(255,210,140,.74), rgba(255,164,69,.62) 32%, rgba(255,93,14,.3) 62%, transparent 96%),
    radial-gradient(ellipse 29% 13% at 45% 78%, rgba(255,196,116,.7), rgba(255,145,47,.55) 32%, rgba(255,79,8,.24) 64%, transparent 98%),
    radial-gradient(ellipse 16% 35% at 9% 75%, rgba(255,185,98,.7), rgba(255,124,29,.57) 35%, rgba(238,66,6,.27) 66%, transparent 98%),
    radial-gradient(ellipse 22% 12% at 96% 88%, rgba(255,145,53,.8), rgba(235,66,10,.55) 46%, transparent 94%),
    radial-gradient(ellipse 48% 28% at 38% 92%, rgba(255,91,14,1) 10%, rgba(199,41,4,.84) 46%, transparent 95%),
    radial-gradient(ellipse 44% 34% at 5% 67%, rgba(172,40,5,.62), rgba(89,20,4,.3) 58%, transparent 96%),
    radial-gradient(ellipse 80% 36% at 60% 100%, rgba(225,67,12,.88), rgba(162,40,7,.52) 48%, transparent 100%),
    linear-gradient(to top, rgba(141,31,5,.88), rgba(102,25,5,.4) 32%, rgba(53,16,5,.11) 58%, transparent 80%);
  filter: blur(clamp(64px, 7.5vw, 116px));
  -webkit-mask-image: linear-gradient(180deg, transparent 20px, rgba(0,0,0,.12) 110px, rgba(0,0,0,.45) 210px, #000 340px);
          mask-image: linear-gradient(180deg, transparent 20px, rgba(0,0,0,.12) 110px, rgba(0,0,0,.45) 210px, #000 340px);
}
/* a logo em 3D (o F em metal, canvas do main.js), dentro do título e por trás dele, na diagonal de baixo à direita:
   a caixa sai do canto de baixo à direita do "falar.", e a parte de cima à esquerda dela passa por trás das letras.
   Sem JS a caixa fica vazia */
.cta-logo {
  --w: clamp(190px, 34vw, 540px);
  position: absolute; z-index: -1; left: calc(100% - var(--w) * .45); top: calc(100% - var(--w) * .5);
  width: var(--w); aspect-ratio: 1; pointer-events: none;
}
.cta-logo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* o título como os dos slides, o maior da página: é o fim */
.cta-title {
  margin: 0; font-family: var(--body); font-weight: 500;
  font-size: clamp(64px, 14vw, 230px); letter-spacing: -.062em; line-height: .86; color: #fff;
  text-shadow: 0 0 40px rgba(20,10,6,.25);
}
/* o bloco (título, apoio e botão) fica no centro da seção (o .cta-in centra os filhos), mas tudo dentro dele alinha à
   esquerda, na borda do "Vamos". O apoio não passa da largura do título, e a diagonal à direita fica livre para a logo */
.cta-block { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.cta-title { position: relative; }
.cta-title > span:not(.cta-logo) { display: block; }
.cta-title em { font-style: normal; color: var(--ember-title); }
.cta-lead { max-width: 400px; margin: clamp(24px, 2.4vw, 32px) 0 clamp(28px, 3vw, 36px); font-size: 17px; line-height: 1.45; color: rgba(255,255,255,.72); }
/* o pé: as linhas finas dos slides, sobre o fim escuro do gradiente */
.cta-meta {
  align-self: stretch;
  margin-top: clamp(120px, 15vw, 220px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 14px; color: rgba(255,255,255,.72); text-align: left;
}
.cta-meta nav { display: flex; gap: 24px; flex-wrap: wrap; }
.cta-meta a { transition: color .25s; }
.cta-meta a:hover { color: var(--ember-text); }
/* no celular tudo centraliza (o título, o apoio e o botão), e a logo fica no meio, por trás do título; sobe um pouco,
   para só a ponta de baixo dela encostar no apoio */
@media (max-width: 560px) {
  .cta-block { align-items: center; text-align: center; }
  .cta-logo { --w: min(76vw, 300px); left: calc(50% - var(--w) / 2); top: calc(50% - var(--w) * .58); }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  /* palestras: a etiqueta fica para leitores de tela e os botões ganham espaço */
  .deck-tab-name { font-size: 13px; }
  .deck-bar h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .motion-box, .motion-box--narrow, .motion-box--wide { grid-column: span 3; }
  .motion-box:last-child { grid-column: 1 / -1; }
  /* em pé não cabe lado a lado: o objeto 3D sobe para o canto de cima à direita, passando da borda, e fica só um
     pouco acima do título — a parte de baixo dele invade a ponta direita do título, por trás. O texto vai à esquerda */
  .about-head, .events-head, .schools-head {
    --obj-w: min(76vw, 460px);
    min-height: 0; align-items: flex-start; text-align: left; padding-top: calc(var(--obj-w) * .5);
  }
  .about-knot, .events-stage, .schools-solid {
    position: absolute; z-index: -1; left: auto; right: calc(-1 * var(--gutter) - var(--obj-w) * .1);
    top: calc(var(--obj-w) * -.12); width: var(--obj-w); margin: 0;
  }
  /* Siemens empilhada: o bloco sobe para trás do título, passando da borda direita */
  .corps-solid { width: min(86vw, 460px); margin: 0 calc(-1 * var(--gutter)) calc(min(86vw, 460px) * -.3) auto; }
  .event-row { grid-template-columns: 40px 1fr auto; row-gap: 14px; }
  .event-tags { grid-column: 2; grid-row: 2; justify-content: flex-start; }
  .event-arrow { grid-column: 3; grid-row: 1; width: 44px; height: 44px; }
  .event-no { grid-row: 1; }
  .event-name { grid-row: 1; }
  /* o telão em pé: a foto principal (ou o card) entra no fluxo, em cima do texto, que ganha a largura toda; o monitor
     de retorno fica para o lightbox e o selo vai para o canto de cima da foto */
  .event-screen { height: auto; min-height: min(118vw, 520px); }
  .event-screen--side { min-height: 0; justify-content: flex-start; gap: 28px; }
  .event-copy, .event-screen--photo .event-copy { max-width: none; }
  .event-screen--side .event-media { position: relative; inset: auto; }
  .event-photo.is-main, .event-photo.is-poster { position: relative; inset: auto; display: block; }
  .event-photo.is-main { width: 100%; height: min(72vw, 400px); }
  .event-photo.is-poster { height: min(110vw, 460px); }
  .event-photo.is-pip { display: none; }
  .event-badge, .event-screen:has(.is-poster) .event-badge { right: auto; bottom: auto; left: calc(var(--pad) + 14px); top: calc(var(--pad) + 14px); }
  .event-screen::after { font-size: min(64vw, 320px); }
  .school-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .school:nth-child(4n+1) { border-left: 1px solid var(--line); }
  .school:nth-child(2n+1) { border-left: 0; }
  .nav-toggle { display: grid; }
  /* o menu aberto é uma tela, como as caixas: escura, cantos de 22px, sem borda, brasa fraca no canto de baixo. Mais
     opaca que as telas: dentro do vidro da cápsula, o backdrop-filter dela não enxerga a página (só a cápsula) */
  .nav .nav-menu {
    position: absolute; top: calc(100% + 10px); right: 0; left: auto; isolation: isolate;
    width: min(420px, 100%); display: flex; flex-direction: column; gap: 0;
    padding: 10px 22px 18px; margin: 0; overflow: hidden;
    border-radius: 22px; background: #0b0806;
    box-shadow: 0 24px 60px -30px rgba(0,0,0,.7), 0 30px 80px rgba(0,0,0,.35);
    font-size: inherit; letter-spacing: 0;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px) scale(.985); transform-origin: top right;
    transition: opacity .22s, visibility .22s, transform .32s cubic-bezier(.16,1,.3,1);
  }
  .nav .nav-menu::before {
    content: ""; position: absolute; z-index: -1; right: -25%; bottom: -30%; width: 85%; height: 70%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255,106,31,.3), rgba(194,61,8,.1) 60%, transparent);
    filter: blur(18px);
  }
  .nav.menu-open .nav-menu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
  .nav .nav-menu li:not(.nav-mobile-contact) { border-bottom: 1px solid var(--line); }
  .nav .nav-menu a {
    display: flex; align-items: center; gap: 14px;
    min-height: 58px; padding: 0;
    color: #fff; font-family: var(--body); font-size: clamp(22px, 3vw, 26px); font-weight: 500;
    line-height: 1; letter-spacing: -.05em;
    transition: color .2s, padding-left .3s cubic-bezier(.16,1,.3,1);
  }
  .nav .nav-menu::after { display: none; }
  .nav .nav-menu a { height: auto; border-radius: 0; }
  .nav .nav-menu a[aria-current] { color: var(--ember-text); }
  .nav .nav-menu li:not(.nav-mobile-contact) a:hover { background: none; }
  .nav .nav-menu li:not(.nav-mobile-contact) a::after {
    content: "↗"; position: static; margin-left: auto; width: auto; height: auto; background: none;
    color: var(--muted); font-family: var(--body); font-size: 15px; font-weight: 400; letter-spacing: 0;
    transform: none; transition: color .2s, transform .3s cubic-bezier(.16,1,.3,1);
  }
  .nav .nav-menu a:hover, .nav .nav-menu a:focus-visible { color: #fff; padding-left: 6px; }
  .nav .nav-menu li:not(.nav-mobile-contact) a[aria-current]::after { color: var(--ember-text); }
  .nav .nav-menu li:not(.nav-mobile-contact) a:hover::after,
  .nav .nav-menu li:not(.nav-mobile-contact) a:focus-visible::after { color: var(--ember-text); transform: rotate(-45deg); }
  /* sobre: embaixo dos números, o retrato, a experiência e as especialidades no fim (o trilho vira display: contents
     para o retrato e as especialidades ganharem `order` na coluna do grid) */
  .about-grid { display: flex; flex-direction: column; gap: 0; }
  .about-rail { display: contents; }
  .about-photo { order: 1; width: 100%; max-width: 520px; }
  .about-body { order: 2; margin-top: clamp(44px, 7vw, 64px); }
  .about-rail > .cv { order: 3; margin-top: clamp(44px, 5vw, 64px); padding-top: 0; }
  /* a corrente fecha a coluna, embaixo das especialidades, passando da borda esquerda */
  .about-chain { order: 4; --chain-h: min(104vw, 460px); min-height: calc(var(--chain-h) * .72); margin-top: 16px; }
  .about-chain-solid { --chain-ext: 1.2; top: calc(var(--chain-h) * -.04); }
  .cv-list > li { grid-template-columns: 40px minmax(0, 1fr); row-gap: 14px; }
  .cv-courses { grid-column: 2; }
  .fan, .fan--roles { flex-direction: column; height: auto; }
  .card {
    margin-left: 0; margin-top: -24px; min-height: 120px; box-shadow: 0 -14px 30px rgba(0,0,0,.45);
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 0fr;
    transition: grid-template-rows .6s var(--ease-morph), padding-bottom .6s var(--ease-morph), transform .15s;
  }
  .card:first-child { margin-top: 0; }
  .fan .card:active { transform: scale(.985); transition-duration: .6s, .6s, .15s; }
  .card-body { width: auto; min-height: 0; overflow: hidden; }
  .card-top, .card.is-open .card-top { width: auto; padding-right: 80px; opacity: 1; }
  .card-spine { display: none; }
  .card-body > :first-child { margin-top: 24px; }
  .card.is-open { grid-template-rows: auto 1fr; padding-bottom: 48px; }
  .card .glyph { width: 64px; height: 64px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2) { border-right: 0; }
  .step:nth-child(3) { padding-left: 0; }
  .step:nth-child(n+3) { border-top: 1px solid var(--line); }
  .reel { aspect-ratio: 4 / 5; }
}
@media (max-width: 560px) {
  /* celular: com as barras do navegador a tela fica baixa; o slide ganha altura mínima para o título caber grande */
  .slide { height: max(660px, 95svh); }
  /* celular: só a barra de palestras sobe, quase no teto do slide; o resto segue medido do --top de sempre */
  .deck-bar { top: 12px; }
  /* celular: só o botão escolhido mostra o nome; os outros ficam no número */
  .deck-tabs { display: flex; gap: 2px; }
  .deck-tab { flex: none; padding: 0 14px; }
  .deck-tab[aria-selected="true"] { flex: 1 1 0; }
  .deck-tab:not([aria-selected="true"]) .deck-tab-name { display: none; }
  .deck-tab-num { font-size: 17px; }
  .deck-tab-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .motion-box, .motion-box--narrow, .motion-box--wide { grid-column: 1 / -1; min-height: 280px; }
  /* celular: o anel fica no canto de cima à direita, passando da borda, só um pouco acima do título — a parte de
     baixo dele invade a ponta direita do título, por trás */
  .motion { padding-top: 160px; }
  .motion-ring { top: 0; right: -56px; width: 250px; }
  /* Pensamento de IA: na caixa larga e baixa o vídeo quadrado sobra embaixo; sobe o cérebro e mantém o selo dentro */
  .motion-box--shift-down .motion-media video { object-position: 50% 85%; }
  .motion-box--shift-down .motion-media :is(video, canvas) { transform: none; }
  /* celular: Registros de palco vira um carrossel na horizontal, de borda a borda; as linhas somem (display: contents)
     e as fotos ficam numa trilha só, com snap no início de cada uma. Nenhuma foto é cortada: a altura tem teto (--h)
     e a largura sai da proporção, até 82vw, para a próxima espiar na borda */
  .photo-grid {
    display: flex; align-items: center; gap: 12px;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 28px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .photo-grid::-webkit-scrollbar { display: none; }
  .photo-row { display: contents; }
  .photo { --h: min(112vw, 64svh); flex: none; width: min(82vw, calc(var(--h) * var(--r))); border-radius: 18px; scroll-snap-align: start; }
  .photo-nav { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
  .photo-zoom { transform: none; width: 38px; height: 38px; }
  .lightbox figure { padding: 70px 12px 90px; }
  .lightbox img { max-width: calc(100vw - 24px); max-height: calc(100vh - 190px); }
  .lb-prev, .lb-next { top: auto; bottom: 20px; translate: none; }
  .event-row { grid-template-columns: 28px 1fr auto; gap: 12px; padding: 22px 4px; }
  .event-arrow { width: 40px; height: 40px; }
  .event-row:hover .event-name, .event.is-open .event-name { transform: none; }
  .event-screen { --pad: 22px; border-radius: 18px; }
  .school { min-height: 160px; padding: 18px 14px; }
  .school--cta { padding: 6px; }
  .school--cta a { padding: 12px; }
  .school-name { font-size: 22px; }
  .schools-count { flex-direction: column; align-items: flex-start; }
  /* sobre: os números um embaixo do outro, o numeral à esquerda e o rótulo à direita */
  .stats { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .cv-list > li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding-inline: 4px; }
  .cv-list > li:hover .cv-role { transform: none; }
  .nav { --nav-pad: 16px; }
  .nav-actions > .nav-cta { display: none; }
  .nav .nav-menu { padding: 10px 18px 16px; }
  .nav-mobile-contact { display: block; }
  .nav .nav-menu .nav-mobile-contact { margin-top: 14px; }
  /* no menu do celular, o convite é a única peça sólida em brasa */
  .nav .nav-menu .nav-mobile-contact a {
    justify-content: space-between;
    min-height: 48px; padding: 5px 5px 5px 18px; border-radius: 999px;
    background: var(--ember); color: var(--ink); font-family: var(--body);
    text-transform: none; font-size: 14px; font-weight: 650; letter-spacing: 0;
  }
  .nav .nav-menu .nav-mobile-contact span {
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 50%; background: var(--ink); color: var(--ember); font-size: 15px;
    transition: transform .3s cubic-bezier(.16,1,.3,1);
  }
  .nav .nav-menu .nav-mobile-contact a:hover,
  .nav .nav-menu .nav-mobile-contact a:focus-visible { padding-left: 18px; color: var(--ink); }
  .nav .nav-menu .nav-mobile-contact a:hover span,
  .nav .nav-menu .nav-mobile-contact a:focus-visible span { transform: rotate(-45deg); }
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding: 28px 0; border-right: 0; }
  .step:nth-child(n+2) { border-top: 1px solid var(--line); }
  .step h3 { margin-top: 16px; }
  .reel-label { flex-direction: column; left: 20px; right: 20px; }
  /* a corrente: a caixa mais alta e mais larga além das bordas deixa os elos ~20% maiores (eles se medem pelo lado
     menor da caixa; a curva continua cruzando a tela de borda a borda) */
  .tech-chain { --chain-height: 540px; --chain-side-bleed: 170px; }
}
/* hero no celular e no tablet em pé: o nome no alto, na largura toda, sobre o laranja; o retrato preso logo abaixo dele
   (cresce para baixo e sai pelo pé, em vez de subir no nome), com a fita atrás da cabeça; o apoio e o convite no pé.
   Saem o chrome e o índice das palestras */
@media (max-width: 560px), (max-width: 960px) and (orientation: portrait) {
  /* FACIO, recuado .4em, é a linha mais larga: 2.49 é a largura dele por px de corpo */
  .hero {
    --stage-top: clamp(96px, 15svh, 128px);
    --name: min(calc(var(--stage-w) / 2.49), 17svh);
    --fig-h: min(128vw, 78svh); --head-x: 54%;
    --fig-top: calc(var(--stage-top) + 1.75 * var(--name));
    --head-y: calc(var(--fig-top) + .16 * var(--fig-h));
    min-height: 640px;
  }
  .hero-figure { top: var(--fig-top); bottom: auto; }
  .hero-chrome { display: none; }
  .hero-stage { justify-content: flex-start; padding-top: var(--stage-top); padding-bottom: 0; }
  .hero-line + .hero-line { padding-left: .4em; }
  .hero-lead { position: absolute; z-index: 6; left: var(--gutter); right: var(--gutter); bottom: 98px; margin: 0; max-width: 280px; } /* na frente do véu do pé */
  .hero-index { display: none; }
  .hero-foot { padding-top: 220px; background: linear-gradient(0deg, transparent, rgba(10,10,10,.5) 18%, rgba(10,10,10,.88) 45%, rgba(10,10,10,.6) 72%, transparent); }
  .hero-foot-inner { border-top: 0; padding-top: 0; }
  .hero-solid { --solid-w: min(104vw, 1.1 * var(--fig-h)); --solid-shift: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .about-photo.reveal, .about-photo.reveal.in { opacity: 1; scale: none; transform: translateZ(0); }
}

/* ABERTURA (loading screen, js/loader.js) — o slide antes do slide 00, curto e limpo. Palco escuro de borda a borda;
   a luz é a faixa de baixo do hero (o gradiente da 01 girado), que sobe e acende. No meio, a logo horizontal: o
   monograma F em contorno fraco, que se enche de baixo para cima, e o "felipe facio" ao lado, cada letra subindo de
   trás de uma régua; o ponto em brasa só entra no fim. No pé, o numeral em Archivo 800 largo e o apoio com a linha
   fina, sobre a linha de 1 px em que corre a cabeça de luz.
   Tudo o que se move é animação de CSS em transform e opacity, que roda no compositor: enquanto o main.js monta a
   página (tarefas de 100–200 ms), a abertura não trava. Por isso cada letra é um <svg> próprio (um <path> dentro de
   um SVG não ganha camada). O F se enche por um clip-path animado no CSS (um quadro de pintura pequeno; o desenho
   fica parado, sem reamostrar). Tudo espera o .is-go (a largada, depois que o main.js rodou). O JS só conta o numeral e decide a hora de sair: a etapa 1 (até 90%) leva --t, e a etapa 2 (.is-ready)
   só começa quando a página e as fontes carregaram.
   Só existe com .is-opening no <html> (JS e sem movimento reduzido); até sair, a página não rola (o loader.js barra a
   roda, o toque e as teclas: com overflow: hidden a barra de rolagem sumia e, ao voltar, mudava a largura da página
   inteira bem na saída), as entradas do hero ficam pausadas e os objetos 3D não giram */
html.is-opening .hero, html.is-opening .hero * { animation-play-state: paused !important; }
.loader {
  --u: clamp(9px, 1vw, 14px);
  --m: clamp(124px, 16vw, 260px); /* o lado do monograma; o resto da logo se mede por ele */
  --pad: clamp(20px, 3.4vw, 52px);
  --t: 1.1s; /* a etapa 1 (até 90%); o loader.js usa o mesmo tempo */
  --ease-load: cubic-bezier(.3,.6,.4,1);
  display: none; position: fixed; inset: 0; z-index: 300;
  background: var(--ink); color: #fff;
}
html.is-opening .loader, .loader.is-leaving { display: block; }
.loader-light {
  /* a mesma rampa da 01, espalhada em mais paradas e mais alta (mais difusa), com um borrão médio; a camada sobra
     60 px além das bordas para o borrão não escurecê-las, mas é recortada (depois do borrão) rente à borda de baixo da
     abertura: sem o recorte, os 60 px de baixo ficavam parados no topo do hero quando a cortina chegava ao alto e
     sumiam de uma vez quando a abertura saía da página */
  position: absolute; inset: -60px; pointer-events: none;
  filter: blur(14px);
  clip-path: inset(0 0 60px 0);
  background:
    radial-gradient(68% 40% at 22% 100%, rgba(255,138,72,.62), rgba(255,106,31,.26) 45%, rgba(255,106,31,.08) 70%, transparent 90%),
    linear-gradient(5deg, #fa6418 0%, #e94f0e 6%, #c23d08 12%, #9a2e07 17%, #6e2106 22%, #461504 27%, rgba(24,9,4,.7) 32%, rgba(12,5,3,.42) 37%, rgba(7,4,3,.2) 42%, rgba(5,3,2,.07) 47%, rgba(5,3,2,0) 52%);
  opacity: .18; transform: translate3d(0, 22%, 0);
}
.loader.is-go .loader-light { animation: ld-light var(--t) var(--ease-load) forwards; }
.loader.is-ready .loader-light { animation: ld-light-end .3s ease-out forwards; }
@keyframes ld-light { to { opacity: .92; transform: translate3d(0, 2.2%, 0); } }
@keyframes ld-light-end { from { opacity: .92; transform: translate3d(0, 2.2%, 0); } to { opacity: 1; transform: none; } }
/* o grão: o mesmo das seções (ruído fino e contrastado), mais forte embaixo, onde está a luz; no alto, sobre o preto,
   fica no nível do resto da página. Camada parada (só sobe junto com a cortina) */
.loader::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 160px;
  -webkit-mask: linear-gradient(0deg, #000 0%, #000 28%, rgba(0,0,0,.7) 45%, rgba(0,0,0,.45) 62%, rgba(0,0,0,.45) 100%);
          mask: linear-gradient(0deg, #000 0%, #000 28%, rgba(0,0,0,.7) 45%, rgba(0,0,0,.45) 62%, rgba(0,0,0,.45) 100%);
}
.loader-chrome { position: absolute; inset: 0; z-index: 3; pointer-events: none; color: #fff; }
.loader-chrome .cross { right: calc(var(--u) * 3.4); top: 50%; }

.loader-lockup {
  position: absolute; z-index: 3; left: 50%; top: 47%; translate: -50% -50%;
  display: flex; align-items: center; gap: calc(var(--m) * .1);
}
.loader-lockup svg { display: block; width: 100%; height: 100%; }

/* o F: o contorno fraco parado e, por cima, a cópia cheia, revelada de baixo para cima por um recorte (clip-path) que
   sobe. O desenho nunca se move. Antes eram duas camadas deslizando em sentidos opostos (para rodar no compositor), e o
   F, reamostrado a cada quadro em frações de pixel, tremia nas bordas contra o contorno parado */
.loader-mark { position: relative; width: var(--m); aspect-ratio: 1; flex: none; }
.loader-ghost { position: absolute; inset: 0; overflow: visible; }
.loader-ghost path { fill: none; stroke: rgba(255,255,255,.22); stroke-width: .5; }
.loader-fill { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); }
.loader.is-go .loader-fill { animation: ld-fill var(--t) var(--ease-load) forwards; }
.loader.is-ready .loader-fill { animation: ld-fill-end .3s ease-out forwards; }
@keyframes ld-fill { to { clip-path: inset(12% 0 0 0); } }
@keyframes ld-fill-end { from { clip-path: inset(12% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* o nome, nas proporções da logo horizontal: a caixa-alta com ~61% da altura do F, centrada nele. Cada letra é um
   <svg> do tamanho do nome inteiro, empilhados; a régua é o overflow da caixa */
.loader-name {
  position: relative; flex: none;
  height: calc(var(--m) * .746); aspect-ratio: 431.47 / 100.58;
  translate: 0 calc(var(--m) * .076);
}
.loader-letters { position: absolute; inset: 0; overflow: hidden; }
.loader-letters svg {
  position: absolute; inset: 0;
  transform: translate3d(0, 100%, 0);
}
.loader.is-go .loader-letters svg { animation: ld-up .6s cubic-bezier(.16,1,.3,1) calc(.06s + var(--i) * .06s) forwards; }
@keyframes ld-up { to { transform: none; } }
/* o ponto, fora da régua: cresce a partir do próprio centro (97,9% × 71,4% da caixa do nome) */
.loader-dot { position: absolute; inset: 0; overflow: visible; transform-origin: 97.9% 71.4%; transform: scale(0); }
.loader.is-done .loader-dot { animation: ld-dot .5s cubic-bezier(.34,1.5,.64,1) forwards; }
@keyframes ld-dot { from { transform: scale(0); } to { transform: none; } }

/* a saída: o F e as letras sobem e somem, o ponto encolhe */
.loader.is-leaving .loader-letters svg { animation: ld-out .45s cubic-bezier(.7,0,.84,0) calc(var(--i) * 14ms) both; } /* both: na espera, cada letra fica no lugar (sem ele, voltava para baixo da régua e sumia de uma vez) */
.loader.is-leaving .loader-mark { animation: ld-mark-out .45s cubic-bezier(.7,0,.84,0) forwards; }
.loader.is-leaving .loader-dot { animation: ld-dot-out .35s cubic-bezier(.7,0,.84,0) .1s both; }
@keyframes ld-out { from { transform: none; } to { transform: translate3d(0, -100%, 0); } }
@keyframes ld-mark-out { to { opacity: 0; transform: translate3d(0, -24px, 0); } }
@keyframes ld-dot-out { from { transform: none; } to { transform: scale(0); } }

.loader-foot {
  position: absolute; z-index: 3; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + 22px);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
}
.loader-count {
  margin: 0; display: flex; align-items: flex-start; gap: .14em;
  font-family: var(--display); font-weight: 800; font-stretch: 118%; font-variant-numeric: tabular-nums;
  font-size: clamp(44px, 6.4vw, 96px); line-height: .8; letter-spacing: -.02em;
}
.loader-count span {
  font-family: var(--body); font-weight: 500; font-stretch: normal; font-size: clamp(12px, 1vw, 14px); line-height: 1;
  letter-spacing: 0; color: rgba(255,255,255,.6); margin-top: .3em;
}
.loader-lead {
  margin: 0; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.35);
  font: 500 clamp(13px, 1.05vw, 15px)/1.4 var(--body); color: rgba(255,255,255,.72);
}
/* a linha de 1 px do pé, e nela a cabeça de luz que anda com o carregamento; atrás dela, a linha já percorrida */
.loader-line { position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--pad); height: 1px; background: rgba(255,255,255,.22); }
.loader-line i { position: absolute; left: 0; top: 0; width: 0; height: 1px; }
.loader.is-go .loader-line i { animation: ld-tip var(--t) var(--ease-load) forwards; }
.loader.is-ready .loader-line i { animation: ld-tip-end .3s ease-out forwards; }
@keyframes ld-tip { to { transform: translate3d(90vw, 0, 0); } }
@keyframes ld-tip-end { from { transform: translate3d(90vw, 0, 0); } to { transform: translate3d(100vw, 0, 0); } }
.loader-line i::after { content: ""; position: absolute; right: 0; top: 0; width: 100vw; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.2), #fff); }
.loader-line i::before {
  /* a cabeça: um círculo em brasa, centrado na linha, com um glow curto em volta */
  content: ""; position: absolute; left: -5px; top: -4.5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 4px 1px rgba(255,106,31,.8), 0 0 10px 2px rgba(255,79,15,.4);
}
.loader-foot, .loader-line, .loader-chrome { transition: opacity .3s; }
.loader.is-leaving :is(.loader-foot, .loader-line, .loader-chrome) { opacity: 0; }

/* a cortina: a tela inteira sobe, com uma barra de brasa acesa embaixo dela, que lava o hero e se apaga */
/* a subida acelera devagar e chega no alto desacelerando longo, sem tranco no fim */
.loader.is-leaving { animation: ld-curtain 1.05s cubic-bezier(.65,0,.15,1) .15s forwards; }
@keyframes ld-curtain { to { transform: translate3d(0, -100%, 0); } }
.loader::after {
  content: ""; position: absolute; left: -10%; right: -10%; top: 100%; height: 42vh; pointer-events: none; opacity: 0;
  background: radial-gradient(50% 70% at 50% 0%, rgba(255,138,61,.7), rgba(242,82,15,.34) 30%, rgba(194,61,8,.16) 50%, rgba(122,23,3,.06) 66%, transparent 82%);
}
/* a barra de brasa acende com a subida e se apaga devagar, depois que a cortina já passou */
.loader.is-leaving::after { animation: loader-hem 1.5s cubic-bezier(.4,0,.2,1) both; }
@keyframes loader-hem { 18% { opacity: 1; } 55% { opacity: .7; } 100% { opacity: 0; } }

@media (max-width: 640px) {
  .loader { --m: min(46vw, 32svh); }
  .loader-lockup { top: 44%; flex-direction: column; gap: clamp(14px, 4vw, 24px); }
  .loader-name { height: auto; width: min(80vw, 420px); translate: none; }
  .loader-chrome .cross { display: none; }
}