/* =====================================================================
   Gente no Centro — LP
   Tokens e anatomia conforme DIRECAO-VISUAL.md (fonte de verdade visual).
   Comportamento conforme SPEC-UX.md. Texto conforme COPY.md.
   Mobile-first. Breakpoints: <640 mobile · 640–1023 tablet · >=1024 desktop.
   ===================================================================== */

/* ---------- Morganite local --------------------------------------------------
   Fontes publicadas junto da LP: a hero não depende de uma conexão externa,
   inclusive em mobile. `swap` mantém texto visível enquanto o TTF carrega. */
@font-face {
  font-family: 'Morganite';
  src: url('../assets/Morganite/Morganite-Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Morganite';
  src: url('../assets/Morganite/Morganite-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Morganite';
  src: url('../assets/Morganite/Morganite-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Fallback métrico caso a fonte local não esteja disponível. Sem size-adjust,
   Oswald ocupa ~18% mais largura e o layout salta ~40px. */
@font-face {
  font-family: 'Morganite Fallback';
  src: local('Oswald'), local('Arial Narrow');
  size-adjust: 86%;
  ascent-override: 92%;
}

:root {
  /* --- Fundo: três degraus, todos quase-pretos --- */
  --bg:            #0B0B0E;
  --bg-deep:       #050507;
  --bg-2:          #0F0F13;

  /* --- Superfícies de vidro --- */
  --surface:       #1B1B21;
  --surface-2:     #232329;
  --surface-pill:  #1F2025;

  /* --- Acento lavanda: escala de três degraus, medida por papel --- */
  --accent:        #6F6FAA;
  --accent-mid:    #67679C;
  --accent-dim:    #646791;
  --accent-glow:   #8B8BC4;   /* só hover/foco — nunca em repouso */

  /* --- Azul-marinho: forma orgânica de fundo --- */
  --navy:          #0C0C1D;
  --navy-2:        #141525;

  /* --- Texto --- */
  --text:          #FFFFFF;
  --text-2:        #C9C9D2;
  --text-3:        #8A8A96;

  /* --- Erro: o único vermelho do sistema, dessaturado --- */
  --erro:          #C4646E;

  /* --- Traço --- */
  --hairline:      rgba(255,255,255,.055);
  --rule:          rgba(111,111,170,.34);

  /* --- Tipografia --- */
  --font-display: 'Morganite', 'Morganite Fallback', 'Oswald', 'Arial Narrow', sans-serif;
  --font-ui: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

  --d-hero:    clamp(88px, 17vw, 220px);
  --d-name:    clamp(52px, 7vw, 104px);
  --d-section: clamp(46px, 6vw, 82px);

  --t-lockup:  clamp(26px, 4.2vw, 46px);
  --t-lead:    clamp(21px, 2.4vw, 30px);
  --t-body-lg: 19px;
  --t-body:    17px;
  --t-item:    17px;
  --t-ui:      15px;
  --t-btn:     16px;
  --t-meta:    14px;
  --t-label:   12px;
  --t-label-2: 13px;
  --t-fine:    13px;

  /* --- Raio --- */
  --r-panel:   28px;
  --r-card:    20px;
  --r-input:   14px;
  --r-pill:    999px;

  /* --- Espaçamento (base 4) --- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 176px; --s-12: 240px;

  --pad-section: clamp(80px, 11vh, 176px);
  --pad-breath:  clamp(140px, 20vh, 280px);
  --gutter:      clamp(20px, 5vw, 40px);
  --maxw:        1200px;
  --maxw-read:   660px;

  /* --- Movimento: sutil e rápido, nada acima de 300ms --- */
  --ease: cubic-bezier(.2,.6,.3,1);
  --t-fast: 160ms;
  --t-surface: 240ms;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }

/* Foco de teclado global — nunca outline:none sem substituto */
:focus-visible {
  outline: 2px solid var(--accent-glow);
  outline-offset: 3px;
  border-radius: inherit;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface-2);
  color: var(--text);
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r-input) 0;
  font-size: var(--t-ui);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ============================================================ VIDRO
   DIRECAO-VISUAL §1.4: o vidro NÃO tem borda traçada. A "borda" real é o
   inset de quina. Fallback obrigatório quando backdrop-filter não existe. */
.glass {
  background: rgba(27, 27, 33, 0.72);
  -webkit-backdrop-filter: blur(26px) saturate(115%);
  backdrop-filter: blur(26px) saturate(115%);
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 24px 60px -20px rgba(0,0,0,.7);
  border-radius: var(--r-panel);
}

@supports not (backdrop-filter: blur(1px)) {
  .glass          { background: rgba(27, 27, 33, 0.94); }
  .glass-capsule  { background: rgba(27, 27, 33, 0.88); }
  .glass-card     { background: rgba(27, 27, 33, 0.92); }
  .pill           { background: rgba(31, 32, 37, 0.97); }
  .glass-input    { background: rgba(27, 27, 33, 0.92); }
}

.glass-panel { border-radius: var(--r-panel); padding: var(--s-7); }

.glass-card {
  border-radius: var(--r-card);
  padding: var(--s-5);
  background: rgba(27, 27, 33, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 12px 32px -14px rgba(0,0,0,.6);
  transition: background var(--t-surface) var(--ease),
              box-shadow var(--t-surface) var(--ease);
}
/* Cards NÃO se movem — só o CTA tem movimento espacial (DIRECAO-VISUAL §5.1) */
.glass-card:hover {
  background: rgba(27, 27, 33, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 32px -14px rgba(0,0,0,.6);
}

/* Cápsula do lockup: mais translúcida (55%) — deixa passar o que está atrás */
.glass-capsule {
  display: inline-block;
  border-radius: var(--r-pill);
  padding: var(--s-3) var(--s-6);
  background: rgba(27, 27, 33, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

/* ============================================================ TEXTURAS
   Regra: por ÂNCORA, nunca global. A textura marca onde há uma pessoa. */

/* Camada A — favos. Topo absoluto da página, UMA única vez. */
.favos {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 180px;
  pointer-events: none;
  z-index: 0;
  opacity: .055;
  background-repeat: repeat;
  background-size: 90px 78px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='78' viewBox='0 0 90 78'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M22.5 0L45 13v26L22.5 52 0 39V13z'/%3E%3Cpath d='M67.5 0L90 13v26L67.5 52 45 39V13z'/%3E%3Cpath d='M45 39l22.5 13v26L45 91 22.5 78V52z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
}

/* Camada B — linhas concêntricas. SÓ atrás de retratos. Desligada em mobile. */
.concentricas {
  display: none;
  position: absolute;
  width: 900px; height: 900px;
  pointer-events: none;
  z-index: -1;
  opacity: .05;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='.9'%3E%3Ccircle cx='200' cy='200' r='60'/%3E%3Ccircle cx='200' cy='200' r='95'/%3E%3Ccircle cx='200' cy='200' r='130'/%3E%3Ccircle cx='200' cy='200' r='165'/%3E%3Ccircle cx='200' cy='200' r='198'/%3E%3C/g%3E%3C/svg%3E");
  /* Desvanece nas bordas: a textura ancora o retrato, não desenha um alvo */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 72%);
}

/* Camada C — forma orgânica navy. Máximo um por viewport. */
.blob {
  position: absolute;
  pointer-events: none;
  /* Atrás de tudo: filter cria contexto de empilhamento e, em z-index 0,
     o blob pintava por cima dos retratos dos palestrantes. */
  z-index: -1;
  width: 120vh; height: 120vh;
  max-width: 1100px; max-height: 1100px;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle at 50% 50%,
    var(--navy-2) 0%, var(--navy) 45%, rgba(12,12,29,0) 72%);
}

/* ============================================================ PÍLULA CTA
   Anatomia herdada e não reinventável (DIRECAO-VISUAL §2.2).
   Aparece exatamente 3x: hero, fim da programação, formulário. */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  max-width: 100%;
  padding: 0 var(--s-6);
  border: none;
  border-radius: var(--r-pill);
  background: rgba(31, 32, 37, 0.88);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
  backdrop-filter: blur(20px) saturate(115%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background var(--t-surface) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.pill__meta {
  color: var(--accent);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.4;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

.pill__divider {
  width: 1px;
  height: 20px;
  flex: 0 0 1px;
  margin: 0 var(--s-5);
  background: rgba(255,255,255,.14);
}

.pill__verbo {
  color: var(--text);
  font-size: var(--t-btn);
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Hover: o ÚNICO movimento espacial da página */
.pill:hover {
  background: rgba(35, 35, 41, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(111,111,170,.28),
    0 18px 40px -16px rgba(0,0,0,.8);
  transform: translateY(-1px);
}
.pill:hover .pill__meta { color: var(--accent-glow); }

.pill:focus-visible {
  outline: 2px solid var(--accent-glow);
  outline-offset: 3px;
}

.pill:active {
  transform: translateY(0);
  background: rgba(27, 27, 33, 0.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

/* Loading: a divisória vira o indicador. NUNCA spinner. */
.pill[aria-busy="true"] {
  opacity: .7;
  pointer-events: none;
}
.pill[aria-busy="true"] .pill__divider {
  animation: pulso 900ms ease-in-out infinite;
}
@keyframes pulso {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}

.pill:disabled,
.pill[disabled] {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}
.pill:disabled:hover { background: rgba(31,32,37,.88); box-shadow: inset 0 1px 0 rgba(255,255,255,.055); }

/* Em telas estreitas a anatomia da pílula é preservada (meta · divisor ·
   verbo), só o respiro interno encolhe — senão ela estoura os 390px. */
@media (max-width: 419px) {
  .pill { padding: 0 var(--s-5); }
  .pill__divider { margin: 0 var(--s-4); }
  .hero__tipo { width: 100%; max-width: 100vw; overflow: hidden; }
  .hero__tagline { width: 100%; max-width: 290px; font-size: 19px; }
  .hero__quando { width: 100%; max-width: 310px; margin-inline: auto; font-size: 12px; }
  .hero__cta { width: 100%; max-width: 350px; margin-inline: auto; }
  .hero__cta .pill { display: flex; width: 100%; min-width: 0; padding-inline: var(--s-4); }
  .hero__cta .pill__divider { margin-inline: var(--s-3); }
  .hero__cta .pill__verbo { font-size: 14px; letter-spacing: .02em; }
}

@media (min-width: 1024px) {
  .pill { min-height: 56px; }
}

/* ============================================================ CHIPS
   O componente mais leve do sistema: sem blur, sem área de acento. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-5) 0 0;
}
.chip {
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  background: rgba(255,255,255,.045);
  color: var(--text-2);
  font-size: var(--t-label-2);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.4;
}

/* ============================================================ PLACEHOLDERS
   Visualmente inequívocos: nenhum deles pode passar despercebido em QA. */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px dashed rgba(255,255,255,.22);
  color: var(--text-3);
  text-align: center;
  padding: var(--s-4);
}
.ph--4x5 { aspect-ratio: 4 / 5; border-radius: var(--r-panel); }
.ph--circ {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  /* "?" para que a ausência do retrato do host seja inequívoca em QA */
  font-size: 26px;
  color: var(--text-3);
}
.ph--circ::after { content: "?"; }
.ph__texto { font-size: var(--t-label-2); letter-spacing: .02em; }

[data-placeholder="true"].assinatura__nome { color: var(--text-3); }
[data-placeholder="true"].assinatura__nome { display: none; }
.assinatura__bio { margin-top: var(--s-2); color: var(--text-3); font-size: var(--t-fine); }

/* ============================================================ TÍTULOS DE SEÇÃO */
.secao__titulo {
  font-family: var(--font-ui);
  font-size: var(--t-lead);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 var(--s-4);
}

/* ============================================================ 0. REALIZAÇÃO
   Não é card, não leva vidro: não há substrato atrás e não é um objeto. */
.realizacao {
  position: relative;
  z-index: 1;
  background: var(--bg-deep);
  /* Barra de crédito, não header: em mobile ela precisa ser fina o bastante
     para que a página abra na marca, não em créditos de patrocínio. */
  padding: var(--s-3) var(--gutter);
}
.realizacao__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  /* Uma linha só, com quebra suave se faltar espaço — nunca duas fileiras
     de logos dentro do mesmo grupo (regra da direção §4.1). */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3) var(--s-5);
}
.realizacao__grupo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
}
.realizacao__rotulo {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.3;
}
/* Nunca duas fileiras de logos: se não couber, o logo encolhe (mín. 14px). */
.realizacao__logos {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--s-3);
}
.realizacao__logo img {
  height: 15px;
  width: auto;
  min-height: 14px;
  opacity: .7;
}
.realizacao__apoio-arte { width: auto; height: 18px; opacity: .82; }
.realizacao__logo--texto {
  color: var(--text-3);
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
  /* marcação de pendência: sublinhado tracejado, inequívoco em QA */
  border-bottom: 1px dashed rgba(255,255,255,.25);
}

@media (min-width: 640px) {
  .realizacao { padding: var(--s-5) var(--gutter); }
  .realizacao__inner {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .realizacao__grupo { gap: var(--s-5); }
  .realizacao__logos { gap: var(--s-5); }
  .realizacao__rotulo { font-size: var(--t-label-2); }
  .realizacao__logo img { height: 20px; }
  .realizacao__logo--texto { font-size: var(--t-fine); line-height: 20px; }
}

/* ============================================================ 1. HERO */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.blob--hero {
  top: -20vh;
  right: -30vh;
}

/* --- MOBILE (<640): herança quase direta do KV.
       O único breakpoint em que a tipografia fica POR CIMA da foto. --- */
.hero__inner {
  position: relative;
  z-index: 1;
}
.hero__elenco {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
}
.hero__arco {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
  /* Dissolução vertical longa: a tipografia nasce do escuro, sem costura.
     A imagem já tem área preta abaixo do arco — a máscara só suaviza a junção. */
  -webkit-mask-image: linear-gradient(180deg, #000 34%, rgba(0,0,0,.6) 52%, transparent 74%);
  mask-image: linear-gradient(180deg, #000 34%, rgba(0,0,0,.6) 52%, transparent 74%);
}
.hero__tipo {
  position: relative;
  padding: 0 var(--gutter) var(--s-9);
  /* A cápsula sobe até sobrepor a base do arco: este é o único breakpoint em
     que a tipografia fica POR CIMA da foto, e é para isso que a cápsula é
     translúcida — ela deixa o ombro do host passar (DIRECAO §3.5). */
  padding-top: 50vw;
  text-align: center;
}

.hero__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.hero__lockup {
  font-family: var(--font-ui);
  font-size: var(--t-lockup);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--text);
}
.hero__lockup-art { display: none; }
@media (max-width: 639px) {
  /* No mobile, o lockup pronto preserva a composição e não força o título
     em duas peças a disputar espaço com os rostos. O h1 continua sendo a
     única identificação semântica da página pelo alt da imagem. */
  .hero__title {
    display: block;
    justify-content: center;
    width: 100%;
  }
  .hero__lockup-art {
    display: block;
    width: min(88vw, 352px);
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .hero__lockup {
    display: none;
  }
  .hero__display { display: none; }

  /* Evita que o conteúdo essencial caia abaixo da dobra em aparelhos
     estreitos, sem apertar o retrato nem o CTA. */
  .hero__tipo {
    padding-top: clamp(190px, 51vw, 300px);
    padding-bottom: var(--s-8);
  }
  .hero__tagline {
    margin-top: var(--s-4);
    max-width: 27ch;
    font-size: clamp(18px, 5vw, 21px);
  }
  .hero__cta { margin-top: var(--s-7); }
}
.hero__display {
  font-family: var(--font-display);
  font-size: var(--d-hero);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: .82;
  text-transform: uppercase;
  color: var(--text);
  /* Protege as hastes onde cruzam a região clara da mão do host.
     Nunca overlay chapado sobre a foto (apagaria o arco). */
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}

.hero__tagline {
  margin: var(--s-5) auto 0;
  max-width: 30ch;
  font-size: var(--t-lead);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.5;
  color: var(--text-2);
}

.hero__cta { margin-top: var(--s-8); }
.hero__formato {
  margin-top: var(--s-4);
  color: var(--accent);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .3em;
  line-height: 1.3;
  text-transform: uppercase;
}
.hero__quando {
  margin-top: var(--s-4);
  color: var(--accent-dim);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.4;
}

/* --- TABLET (640–1023): arco em cima, tipografia embaixo --- */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero__tipo { padding-top: 48vw; }
  .hero__arco {
    /* Dissolução vertical no rodapé da imagem, longa e sem costura visível */
    -webkit-mask-image: linear-gradient(180deg, #000 40%, rgba(0,0,0,.5) 60%, transparent 82%);
    mask-image: linear-gradient(180deg, #000 40%, rgba(0,0,0,.5) 60%, transparent 82%);
  }
}

/* --- DESKTOP (>=1024): assimétrico 44/56, tipo à esquerda, arco à direita --- */
@media (min-width: 1024px) {
  .hero__inner {
    display: grid;
    grid-template-columns: 44fr 56fr;
    align-items: center;
    min-height: min(92vh, 860px);
    max-width: var(--maxw);
    margin: 0 auto;
    padding-left: var(--gutter);
  }
  .hero__tipo {
    padding: var(--s-9) 0;
    padding-top: var(--s-9);
    text-align: left;
    grid-column: 1;
    grid-row: 1;
  }
  .hero__title { align-items: flex-start; }
  .hero__tagline { margin-left: 0; }

  /* O arco sangra à direita e na base do hero, como na peça.
     Ancorado na borda direita da VIEWPORT (não do container), para sangrar
     de verdade em vez de terminar numa aresta visível. */
  /* A caixa do arco acompanha a proporção da imagem (16:9) e é ancorada à
     direita e à base do hero. Assim o arco preserva os três sujeitos (cover
     não amplia porque a caixa tem a mesma proporção do arquivo) e ainda
     sangra para fora da viewport à direita. */
  .hero__elenco {
    position: absolute;
    /* Sangra PARA FORA da borda direita da viewport (ombros do Lucas cortados
       pela margem, como na peça) e começa à DIREITA da coluna de tipo, para
       que o rosto do Marcelo não caia sob "CENTRO". A prova social são as
       pessoas: nenhum dos três rostos pode ser ocluído pela tipografia. */
    /* Ancorado pela ESQUERDA: o arco começa depois da coluna de tipo e corre
       até passar da borda direita da viewport (sangria). Controlar por `left`
       é o que garante o afastamento do Marcelo em relação a "CENTRO". */
    /* A caixa mantém a proporção do arquivo (16:9): assim `cover` não amplia
       e os três sujeitos sobrevivem. Começa depois da coluna de tipo e corre
       para fora da borda direita da viewport. Ancorada na base do hero. */
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    aspect-ratio: auto;
    z-index: -1;
  }
  .hero__elenco picture { display: block; width: 100%; height: 100%; }
  .hero__arco {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    /* Dissolução dupla: aresta esquerda (os rostos emergem do preto, o que
       resolve a colisão entre o texto e o ombro do Marcelo) e base. */
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
  /* "CENTRO" sobre fundo, não sobre foto: dispensa a sombra de proteção */
  .hero__display { text-shadow: none; }
}

/* ============================================================ 2. MANIFESTO
   Momento de maior respiro. Fundo --bg, textura no mínimo, sem blob. */
.manifesto {
  position: relative;
  overflow: hidden;
  padding: var(--pad-breath) var(--gutter);
}
.manifesto__inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw-read);
  margin: 0 auto;
  text-align: center;
  /* Ordem DOM: h2 -> retrato -> parágrafos -> assinatura.
     Ordem visual: retrato -> h2 -> parágrafos -> assinatura.
     Resolvido com order DENTRO da seção (SPEC-UX §2.2). */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.manifesto__retrato { order: -1; margin: 0 0 var(--s-8); width: 280px; max-width: 100%; }
.manifesto__retrato img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: var(--r-panel); }
/* O PNG do Felipe é uma silhueta transparente deslocada para a direita.
   Este ajuste mantém rosto e ombros no card 4:5 sem alterar os demais retratos. */
.manifesto__retrato img.host-photo--felipe { object-position: 68% top; }
.manifesto__retrato .ph { display: none; }
.manifesto__retrato .ph { display: none; }
.manifesto__tese {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-lead);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.5;
  color: var(--text);
}
.manifesto__texto { margin-top: var(--s-8); text-align: left; }
.manifesto__texto p {
  font-size: var(--t-body-lg);
  line-height: 1.62;
  color: var(--text-2);
}
.manifesto__texto p + p { margin-top: var(--s-5); }

.assinatura { margin-top: var(--s-8); }
.assinatura__filete {
  display: block;
  width: 64px;
  height: 1px;
  margin: 0 auto var(--s-4);
  background: var(--rule);
}
.assinatura__nome {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--text);
}
.assinatura__cargo {
  margin-top: var(--s-1);
  color: var(--text-3);
  font-size: var(--t-label-2);
  letter-spacing: .02em;
}

@media (min-width: 640px) {
  .concentricas--centro {
    display: block;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 560px; height: 560px;
  }
}

/* ============================================================ 3. PALESTRANTES */
.palestrantes { padding: var(--pad-section) 0; }
.palestrantes__topo {
  max-width: 560px;
  margin: 0 auto var(--s-9);
  padding: 0 var(--gutter);
  text-align: center;
}
.palestrantes__intro {
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-2);
}

.palestrante {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--s-8) 0;
}
/* Mobile: empilha — foto acima (a foto é a prova social em si), painel abaixo. */
.palestrante__foto { position: relative; z-index: 1; }
.palestrante__foto img { width: 100%; }
/* A sombra dissolve no preto, sem borda de recorte — como na peça.
   Em mobile a foto sangra nas duas laterais: dissolve só na base. */
.palestrante__foto img {
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.palestrante__painel {
  position: relative;
  z-index: 1;
  margin: calc(var(--s-7) * -1) var(--gutter) 0;
}

.palestrante__rotulo {
  color: var(--accent-mid);
  font-size: var(--t-label-2);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.4;
}
.palestrante__nome {
  margin: var(--s-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--d-name);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: .86;
  text-transform: uppercase;
  color: var(--text);
}
.palestrante__bio {
  margin-top: var(--s-5);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text-2);
}

.blob--esq { top: 5%; left: -40vh; }
.blob--dir { top: 5%; right: -40vh; }

@media (min-width: 640px) {
  .concentricas--esq { display: block; top: 4%; left: -10%; width: 700px; height: 700px; }
  .concentricas--dir { display: block; top: 4%; right: -10%; width: 700px; height: 700px; }
}

/* Alternância de lado a partir de 900px (SPEC-UX §5) */
@media (min-width: 900px) {
  .palestrante {
    display: grid;
    grid-template-columns: 46fr 54fr;
    align-items: center;
    gap: var(--s-8);
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--s-9) 0;
  }
  /* A grade ocupa a viewport inteira para a foto poder sangrar; o painel é
     que recebe o teto de leitura, não o container. */
  .palestrante { max-width: none; padding-inline: var(--gutter); }
  .palestrante__painel { margin: 0; max-width: 600px; }
  .palestrante--b .palestrante__painel { margin-left: auto; }
  /* Teto de altura: sem isso a foto sangrada cresce com a coluna e o bloco
     vira uma tela cheia de rosto, desequilibrando a alternância. */
  .palestrante__foto img {
    max-height: 600px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center top;
  }

  /* Marcelo: foto sangrando à esquerda da viewport, painel à direita.
     A aresta interna dissolve no preto — nunca borda de recorte. */
  .palestrante--a .palestrante__foto {
    grid-column: 1; grid-row: 1;
    margin-left: 0;
    display: flex;
    justify-content: center;
  }
  .palestrante--a .palestrante__foto img {
    -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
  }
  .palestrante--a .palestrante__painel { grid-column: 2; grid-row: 1; }

  /* Lucas: espelhado — painel à esquerda, foto sangrando à direita */
  .palestrante--b .palestrante__foto {
    grid-column: 2; grid-row: 1;
    margin-right: 0;
    display: flex;
    justify-content: center;
  }
  .palestrante--b .palestrante__foto img {
    -webkit-mask-image: linear-gradient(270deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(270deg, #000 55%, transparent 100%);
  }
  .palestrante--b .palestrante__painel { grid-column: 1; grid-row: 1; margin: 0 0 0 var(--gutter); }

  .palestrante__painel { padding: var(--s-8); }
}

/* ============================================================ 4. PROGRAMAÇÃO
   Sem textura: o painel de vidro é o objeto. */
.programacao {
  background: var(--bg-2);
  padding: var(--pad-section) var(--gutter);
}
.programacao__inner { max-width: 880px; margin: 0 auto; }
.programacao__enquadramento {
  margin-bottom: var(--s-7);
  font-size: var(--t-body-lg);
  line-height: 1.62;
  color: var(--text-2);
}

.timeline__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-1);
  padding: var(--s-4) 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.timeline__item:last-child { border-bottom: none; }
.timeline__time {
  color: var(--accent-dim);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.timeline__label {
  font-size: var(--t-item);
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1.4;
  color: var(--text);
}
.timeline__item--destaque .timeline__label { font-weight: 600; }

.programacao__cta { margin-top: var(--s-8); text-align: center; }

@media (min-width: 640px) {
  .timeline__item {
    grid-template-columns: 130px 1fr;
    gap: var(--s-5);
    align-items: baseline;
  }
}
@media (min-width: 1024px) {
  .programacao__painel { padding: var(--s-8); }
  .timeline__item { grid-template-columns: 160px 1fr; }
}

/* ============================================================ 5. PARA QUEM É
   Varredura rápida: card mais baixo que largo, pouco padding vertical.
   Sem ícones. Nenhum número no texto. */
.para-quem { padding: var(--pad-section) var(--gutter); }
.para-quem__inner { max-width: var(--maxw); margin: 0 auto; }
.para-quem__enquadramento {
  margin-bottom: var(--s-7);
  font-size: var(--t-body-lg);
  line-height: 1.62;
  color: var(--text-2);
}
.quem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
.quem-grid__item { position: relative; }
.quem-grid__index {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  color: var(--accent-dim);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.quem-grid__item h3 {
  margin: 0 0 var(--s-2);
  padding-right: var(--s-8);
  font-size: var(--t-item);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.4;
  color: var(--text);
}
.quem-grid__item p {
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--text-2);
}

@media (min-width: 640px) { .quem-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .quem-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

/* ============================================================ 6. MOVIMENTO MENSAL */
.movimento {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--pad-breath) 0;
}
.blob--movimento { top: 10%; left: 50%; transform: translateX(-50%); opacity: .8; }
.movimento__inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* Morganite ocorrência 4/5. Duas linhas forçadas por <br> — três são proibidas. */
.movimento__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--d-section);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: .88;
  text-transform: uppercase;
  color: var(--text);
}
.movimento__enquadramento {
  margin-top: var(--s-5);
  max-width: var(--maxw-read);
  font-size: var(--t-body-lg);
  line-height: 1.62;
  color: var(--text-2);
}

/* A fileira sai do quadro pela direita, sem fim visível.
   Puramente visual — não é carrossel, não tem setas nem dots. */
.movimento__regua-wrap {
  position: relative;
  z-index: 1;
  margin: var(--s-9) 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.movimento__regua-wrap::-webkit-scrollbar { display: none; }

.edicoes {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-2) var(--gutter);
  width: max-content;
}
.edicoes__item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 220px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Não são interativos: sem cursor de ponteiro, sem tabindex, sem hover de ação */
  cursor: default;
}
.edicoes__badge {
  color: var(--text-3);
  font-size: var(--t-label-2);
  font-weight: 500;
  letter-spacing: .02em;
}
.edicoes__data {
  margin-top: auto;
  color: var(--accent);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: .02em;
}
.edicoes__nome {
  margin-top: var(--s-1);
  font-size: var(--t-item);
  font-weight: 500;
  color: var(--text);
}
/* Futuras: mesmo componente, dois ajustes de estado — tracejado e ~25% */
.edicoes__item--futura {
  background: rgba(27, 27, 33, 0.25);
  border: 1px dashed rgba(255,255,255,.14);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.edicoes__item--futura:hover { background: rgba(27, 27, 33, 0.25); box-shadow: none; }
.edicoes__item--futura .edicoes__data { color: var(--text-3); }
/* Pseudo-card decorativo: sangra e desvanece, sem indicar série finita */
.edicoes__item--sangria {
  width: 220px;
  min-height: 168px;
  border-radius: var(--r-card);
  border: 1px dashed rgba(255,255,255,.07);
  background: rgba(27,27,33,.12);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
  mask-image: linear-gradient(90deg, #000, transparent);
}

.continuidade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  text-align: center;
}
.continuidade__retrato { width: 96px; height: 96px; flex: 0 0 96px; }
.continuidade__retrato { overflow: hidden; border-radius: 50%; }
.continuidade__retrato img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.continuidade__retrato img.host-photo--felipe { object-position: 68% top; }
.continuidade__frase {
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 26ch;
}
@media (min-width: 640px) {
  .continuidade { flex-direction: row; text-align: left; justify-content: center; }
}
@media (min-width: 1024px) {
  /* Em desktop a régua não rola: sangra na borda da viewport */
  .movimento__regua-wrap {
    overflow-x: hidden;
    scroll-snap-type: none;
    margin-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  }
  .movimento__regua-wrap .edicoes { padding-left: 0; }
  .edicoes__item, .edicoes__item--sangria { width: 260px; min-height: 190px; }
}

/* ============================================================ 7. INSCRIÇÃO */
.inscricao {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--pad-section) var(--gutter);
}
.inscricao:focus { outline: none; }
.blob--inscricao { top: -10%; left: 50%; transform: translateX(-50%); }

.inscricao__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}
.inscricao__painel { text-align: center; }
@media (max-width: 639px) {
  .inscricao { padding-inline: 16px; }
  .inscricao__painel { padding: 32px 20px; }
  .inscricao__conteudo,
  .inscricao__sucesso { width: 100%; min-width: 0; }
  .inscricao__titulo { max-width: 100%; font-size: clamp(30px, 9vw, 48px) !important; }
  .inscricao__apoio,
  .inscricao__quando { max-width: 100%; }
  .form { width: 100%; min-width: 0; }
  .form__campo,
  .form__submit { min-width: 0; }
}
.inscricao__lockup {
  font-family: var(--font-ui);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
}
.inscricao__lockup-art { display: block; width: min(100%, 160px); height: auto; margin: 0 auto; }
.inscricao__lockup-art img { display: block; width: 100%; max-width: none; height: auto; }
/* Morganite ocorrência 5/5 — o teto do orçamento. Duas linhas. */
.inscricao__titulo {
  margin: var(--s-5) 0 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 10vw, 82px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: .88;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
}
.inscricao__titulo:focus { outline: none; }
.inscricao__apoio {
  margin-top: var(--s-4);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text-2);
}
.inscricao__quando {
  margin-top: var(--s-6);
  color: var(--accent-dim);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.6;
}

/* --- Formulário: 5 campos. Nome em largura total. --- */
.form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-top: var(--s-8);
  text-align: left;
}
.form__campo { display: flex; flex-direction: column; }
.form__campo label {
  margin-bottom: var(--s-2);
  color: var(--text-2);
  font-size: var(--t-label-2);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.4;
}

.glass-input {
  width: 100%;
  height: 52px;
  padding: var(--s-4) var(--s-5);
  border: none;
  border-radius: var(--r-input);
  background: rgba(27,27,33,.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--t-ui);
  font-weight: 500;
  line-height: 1.4;
  transition: background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.glass-input::placeholder { color: var(--text-3); }
.glass-input:hover { background: rgba(35,35,41,.62); }

/* Anel de 2px, não borda: borda mudaria a caixa e saltaria o layout. */
.glass-input:focus {
  outline: none;
  background: rgba(27,27,33,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 2px var(--accent);
}
.form__campo:focus-within label { color: var(--accent); }

/* Erro: o anel de erro prevalece sobre o foco — o lavanda cede. */
.glass-input[aria-invalid="true"],
.glass-input[aria-invalid="true"]:focus {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 2px var(--erro);
}
.form__campo:focus-within .glass-input[aria-invalid="true"] ~ label { color: var(--text-2); }

.form__erro {
  margin-top: var(--s-2);
  color: var(--erro);
  font-size: var(--t-label-2);
  font-weight: 500;
  line-height: 1.4;
}

.form__falha {
  grid-column: 1 / -1;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-input);
  background: rgba(196,100,110,.10);
  box-shadow: inset 0 0 0 1px rgba(196,100,110,.34);
  color: var(--erro);
  font-size: var(--t-label-2);
  font-weight: 500;
  line-height: 1.5;
}
.form__falha p { margin: 0; }
.form__falha p + p { margin-top: var(--s-2); }

.form__submit { grid-column: 1 / -1; text-align: center; margin-top: var(--s-2); }
/* Botão de submit = a pílula, em largura total do painel. 3ª e última ocorrência. */
.pill--submit { width: 100%; }
.inscricao__formato {
  margin-top: var(--s-4);
  color: var(--accent);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .3em;
  line-height: 1.3;
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .form { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .form__campo--full { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .inscricao__painel { padding: var(--s-8); }
}

/* --- Sucesso: o painel confirma no lugar. Sem toast, sem modal, sem navegar. --- */
.inscricao__conteudo,
.inscricao__sucesso { transition: opacity var(--t-surface) var(--ease); }
.inscricao__conteudo[hidden],
.inscricao__sucesso[hidden] { display: none; }
.is-fading { opacity: 0; }

.sucesso__titulo {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-lead);
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1.5;
  color: var(--text);
}
.sucesso__titulo:focus { outline: none; }
.sucesso__detalhe {
  margin-top: var(--s-4);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text-2);
}

/* ============================================================ 8. RODAPÉ
   Sem vidro. O único lugar da página onde o contraste cai de propósito. */
.rodape {
  background: var(--bg-deep);
  padding: var(--s-9) var(--gutter) var(--s-8);
}
.rodape__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  text-align: center;
}
.rodape__arte { width: min(100%, 383px); height: auto; opacity: .88; }
.rodape .lockup-h[hidden] { display: none; }
.lockup-h {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text-2);
  font-size: var(--t-body);
}
.lockup-h__marca strong { font-weight: 700; }
.lockup-h__marca em { font-weight: 400; font-style: italic; }
.lockup-h__filete {
  display: block;
  width: clamp(40px, 12vw, 140px);
  height: 1px;
  background: var(--rule);
}
.lockup-h__mono { width: 22px; height: 22px; opacity: .8; }

.rodape__creditos,
.rodape__contexto,
.rodape__final {
  color: var(--text-3);
  font-size: var(--t-fine);
  line-height: 1.5;
}
.rodape__final { margin-top: var(--s-4); }

/* Links: sem underline em repouso; a cor da decoração entra no hover. */
.rodape a {
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease),
              text-decoration-color var(--t-fast) var(--ease);
}
.rodape a:hover { color: var(--text); text-decoration-color: var(--accent); }

@media (min-width: 1024px) {
  .rodape__inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left; }
  .rodape__final { margin-top: 0; }
}

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill { transition: background var(--t-fast) linear; }
  .pill:hover { transform: none; }
  .pill[aria-busy="true"] .pill__divider { animation: none; opacity: 1; }
  .inscricao__conteudo,
  .inscricao__sucesso { transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}