/* ============================================================
   F&MD Lab 2026 — LP
   Arquitetura: 1 grid 16x8 unificado + slides sobrepostos.
   Transições via GSAP em app.js.
   ============================================================ */

/* ---------- Fontes (TTNP — identidade do projeto) ----------
   Definidas em fonts.css (data URI base64) — carregado via <link> no head.
   Isso evita bloqueio CORS quando o arquivo é aberto via file://. */

/* ---------- Tokens ---------- */
:root {
  /* Cores */
  --color-bg: #000000;
  --color-fg: #ffffff;
  --color-fg-muted: rgba(255, 255, 255, 0.8);
  --color-accent: #d5fe42;
  --color-white: #ffffff;

  /* Tipografia */
  --font-primary: 'TTNP', ui-monospace, monospace;
  --fs-nav: 14px;
  --fs-tagline: 24px;
  --fs-body: 28px;
  --tracking-nav: -0.01em;
  --tracking-tagline: -0.01em;
  --lh-tight: 1.1;
  --lh-snug: 1.3;

  /* Espaçamento */
  --space-2: 2px;
  --space-6: 6px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-32: 32px;

  /* Grid */
  --grid-cols: 16;
  --grid-rows: 8;

  /* Header height (referência pra reservar área no stage) */
  --header-h: 53px;

  /* Transição */
  --t-fast: 200ms;
  --t-base: 400ms;
}

/* ============================================================
   Loader — grid 16x8 com cells dual-face (front amarelo, back transparente).
   Saída: flip 3D random revelando a página atrás.
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: transparent; /* o amarelo vem das cells front do grid */
  pointer-events: auto;
}

.loader.is-hidden {
  pointer-events: none;
}

.loader.is-removed {
  display: none;
}

/* Grid 16x8 cobrindo a viewport inteira */
.loader__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(8, 1fr);
  perspective: 1200px;
  transform-style: preserve-3d;
  z-index: 1;
}

.loader-cell {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

.loader-cell__face {
  position: absolute;
  inset: -0.5px; /* cobre gaps de subpixel entre cells */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.loader-cell__face--front {
  background: #d5fe42;
}

.loader-cell__face--back {
  background: transparent;
  transform: rotateY(180deg);
}

/* Conteúdo central (logo + spinner) acima do grid */
.loader__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  pointer-events: none;
}

.loader__logo {
  width: 205px;
  height: 74.5px;
  display: block;
}

.loader__logo > svg,
.loader__logo > div > svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.loader__spinner {
  width: 64px;
  height: 19px;
  display: block;
}

.loader__spinner > svg,
.loader__spinner > div > svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Navegação por slides (scroll-jacking event-based) — sem scroll nativo */
html {
  overflow: hidden;
}

html,
body {
  width: 100%;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow: hidden;
  height: 100vh;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul {
  list-style: none;
}

/* ============================================================
   Header — global, fixed no topo, acima de tudo
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--color-bg);
  padding: var(--space-20) var(--space-16);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  column-gap: var(--space-20);
}

.site-header__brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
}

.site-header__brand img {
  width: 45px;
  height: auto;
}

.site-nav {
  justify-self: center;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.site-nav__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  color: var(--color-fg);
  opacity: 0;
  transform: translateX(-2px);
  transition:
    opacity var(--t-fast) ease,
    transform var(--t-fast) ease,
    color var(--t-fast) ease;
}

.site-nav__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.site-nav__item--active .site-nav__icon {
  opacity: 1;
  transform: translateX(0);
}

.site-nav__link {
  font-family: var(--font-primary);
  font-size: var(--fs-nav);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--color-fg-muted);
  white-space: nowrap;
  transition: color var(--t-fast) ease;
}

.site-nav__item--active .site-nav__link {
  color: var(--color-fg);
}

/* Hover: ícone aparece + ícone e texto ficam verdes (accent).
   Funciona em item ativo e não-ativo. */
.site-nav__item:hover .site-nav__icon {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-accent);
}

.site-nav__item:hover .site-nav__link {
  color: var(--color-accent);
}

.site-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--color-accent);
}

/* Ícone do ticket: 2 partes (A esquerda + B direita) que se separam no hover */
.site-cta__icon {
  display: inline-flex;
  align-items: center;
  gap: 0;
  transition: gap var(--t-fast) ease;
}

.site-cta__part {
  display: block;
  height: 9px;
  width: auto;
  transition: transform var(--t-fast) ease;
  will-change: transform;
}

.site-cta__part--a { width: 6px; }
.site-cta__part--b { width: 11px; }

.site-cta__label {
  font-family: var(--font-primary);
  font-size: var(--fs-nav);
  line-height: 1;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
  /* TTNP tem o glyph deslocado para cima dentro do em-box;
     compensamos com translateY para alinhar visualmente com o ícone.
     skewX simula itálico de forma suave (animável) no hover. */
  display: inline-block;
  transform: translateY(2px) skewX(0deg);
  transform-origin: 0% 100%;
  transition: transform var(--t-fast) ease;
  will-change: transform;
}

/* Hover: partes se separam, texto vira itálico */
.site-cta:hover .site-cta__icon {
  gap: 2px;
}

.site-cta:hover .site-cta__part--a {
  transform: translateX(-1px);
}

.site-cta:hover .site-cta__part--b {
  transform: translateX(1px);
}

.site-cta:hover .site-cta__label {
  transform: translateY(2px) skewX(-10deg);
}

/* ============================================================
   Stage — viewport sticky 100vh + tracks que dão altura ao scroll
   ============================================================ */
.stage {
  position: relative;
  /* O stage tem altura total = (n slides) * 100vh. Cada .stage__track adiciona 100vh. */
}

.stage__viewport {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  /* perspective pro flip 3D das cells */
  perspective: 1200px;
}

/* Background da LP: vídeo em loop. object-fit cover preserva aspect ratio
   sem distorcer (corta o que sobra). background-color é fallback enquanto
   o vídeo carrega. */
.stage__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--color-bg);
  z-index: 0;
  pointer-events: none;
}

/* Grid 16x8 paralelo: cells de imagem com flip 3D individual.
   Fica entre o stage__bg e o stage__grid (color). */
.stage__image-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  transform-style: preserve-3d;
  pointer-events: none;
}

.image-cell {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

.image-cell__face {
  position: absolute;
  inset: -0.5px; /* cobre gaps de subpixel entre cells */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  /* background-size e background-position aplicados via JS (cover dinâmico) */
}

.image-cell__face--back {
  transform: rotateY(180deg);
}

/* ---------- Grid 16x8 (dual-face cells) ---------- */
.stage__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  transform-style: preserve-3d;
}

.cell {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  /* sem background — cor vem das faces */
}

.cell__face {
  position: absolute;
  /* inset negativo: cada face transborda 0.5px pra cobrir gaps de subpixel
     entre cells (1fr não divide exato em alguns viewports). O overflow:hidden
     do viewport corta o excesso nas bordas. */
  inset: -0.5px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-color: var(--cell-color, transparent);
}

.cell__face--back {
  transform: rotateY(180deg);
}

/* ---------- Slides (camadas de conteúdo sobre o grid) ---------- */
.slide {
  position: absolute;
  inset: 0;
  z-index: 10; /* acima do grid pra seleção de texto ficar visível */
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  pointer-events: none; /* container não bloqueia; filhos liberam quando precisam */
  visibility: hidden;
}

.slide[data-active] {
  visibility: visible;
}

/* ---------- Linhas animáveis (split por linha via JS) ---------- */
.line {
  display: block;
  overflow: hidden;
}

.line__inner {
  display: block;
  will-change: transform, opacity;
}

/* ---------- Slide: HERO ---------- */
.hero__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  /* fallback antes do GSAP set; depois GSAP gerencia o transform inteiro */
  transform: translate(-50%, -50%);
  width: clamp(280px, 30vw, 520px);
  aspect-ratio: 410 / 149;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Lottie injeta <svg> com width/height inline — força preencher o container */
.hero__logo > svg,
.hero__logo > div > svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* CTA "Garanta seu ingresso" — link grid-placed (cols 6–11, row 8) */
.hero__tagline {
  grid-column: 6 / span 6;
  grid-row: 8;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px var(--space-32) 0;
  text-decoration: none;
  pointer-events: auto;
  color: #000;
}

/* Box interno — igual .footer__cta-row: recebe o fundo preto no hover.
   Padding com top maior pelo trim da TTNP (escala 1/3 do footer). */
.hero__tagline-inner {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 18px 12px 10px;
  background-color: transparent;
  color: #000;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}

/* Hover — box preto + texto/ícone verde + skew (mesma lógica do footer) */
.hero__tagline:hover .hero__tagline-inner {
  background-color: var(--color-bg);
  color: var(--color-accent);
}

.hero__tagline p {
  font-family: var(--font-primary);
  font-size: 32px;
  line-height: 1.15; /* >1 dá margem para os ascendentes da TTNP */
  letter-spacing: -0.64px;
  color: inherit;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: auto;
  user-select: text;
  will-change: transform;
  transform-origin: 0% 100%;
  transition: transform var(--t-fast) ease;
}

.hero__tagline:hover p {
  transform: skewX(-10deg);
}

.hero__tagline-icon {
  display: flex;
  align-items: center;
  padding: 6px 0;
  flex-shrink: 0;
  color: inherit;
  transition: transform var(--t-fast) ease;
}

.hero__tagline-icon svg {
  display: block;
}

.hero__tagline:hover .hero__tagline-icon {
  transform: translate(4px, -4px);
}

/* Scroll badge — canto inferior direito (rows 7–8, cols 15–16) */
.hero__scroll-badge {
  grid-column: 15 / span 2;
  grid-row: 7 / span 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 24px;
  pointer-events: none;
}

.hero__scroll-badge img {
  display: block;
  width: 112px;
  height: 112px;
}

/* ---------- Slide: O EVENTO ---------- */
.evento__text {
  grid-column: 11 / span 5;
  grid-row: 4 / span 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.3em;
  padding-right: var(--space-32);
}

.evento__text p {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--color-bg);
  pointer-events: auto;
  user-select: text;
}

/* ---------- Slide: O EVENTO — 2 (continuação) ---------- */
.evento-2__text {
  grid-column: 3 / span 4;
  grid-row: 2 / span 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.3em;
  padding-right: var(--space-32);
}

.evento-2__text p {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--color-bg);
  pointer-events: auto;
  user-select: text;
}

/* ---------- Slide: DATA E LOCAL ---------- */
.data-local__panel {
  grid-column: 10 / span 5;
  grid-row: 2 / span 7;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center; /* centralizado verticalmente conforme Figma atualizado */
  gap: 32px;
  padding: 0 64px;
}

/* Container do "26/09": camadas separadas (bg + text) pra animação dissociada.
   Padding assimétrico vertical (mais top, menos bottom) compensa o offset natural
   do glyph TTNP dentro do em-box, deixando o "26/09" visualmente centralizado. */
.data-local__date {
  position: relative;
  display: inline-block;
  padding: 28px 24px 12px;
  white-space: nowrap;
  overflow: hidden; /* contém o reveal da bg */
}

.data-local__date-bg {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  transform-origin: 0% 50%;
  z-index: 0;
}

.data-local__date-text {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--font-primary);
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  pointer-events: auto;
  user-select: text;
}

.data-local__venue {
  color: var(--color-bg);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: auto;
  user-select: text;
}

.data-local__venue-a {
  font-family: var(--font-primary);
  font-style: italic;
}

.data-local__venue-b {
  font-family: 'TTNP Round', var(--font-primary);
  font-style: normal;
}

.data-local__addr {
  color: var(--color-bg);
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  pointer-events: auto;
  user-select: text;
}

.data-local__addr p {
  margin: 0;
}

.data-local__addr p:first-child {
  font-family: var(--font-primary);
  font-style: italic;
}

.data-local__addr p:last-child {
  font-family: var(--font-primary);
  font-style: normal;
}

/* ============================================================
   Programação — tabs (compartilhadas) + cards (compartilhados com flip 3D)
   Layout: grid 16 cols. Tab ocupa cols 2-15 (14 cols). Cards ocupam cols 1-16
   com padding interno 16px nos lados externos.
   ============================================================ */

.programacao-tabs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 15;   /* acima dos slides e dos cards */
  /* Grid 16 cols: 1 col blank | 14 cols tab principal | 1 col blank.
     Gap 16px entre cols (consistente com o design). */
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  column-gap: 16px;
  pointer-events: none;
  opacity: 0; /* default invisível; controlado por JS */
}

/* Tab principal (14 cols) com padding 16 e 3 sub-tabs flex igual */
.programacao-tabs__inner {
  grid-column: 2 / span 14;
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 16px;
}

.programacao-tabs[hidden] {
  display: none;
}

.programacao-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Top maior que bottom: compensa o vertical trim natural da TTNP
     (glyph deslocado pra cima dentro do em-box, mesma característica que
     ajustamos no menu e no "26/09"). */
  padding: 22px 0 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  pointer-events: auto;
  isolation: isolate; /* contém o z-index interno */
}

/* 4 bordas separadas (animáveis) — bottom já visível por default;
   top/right/left aparecem no hover sequencialmente. */
.programacao-tab__border {
  position: absolute;
  background: var(--color-bg);
  z-index: 1;
  transition: transform 180ms ease;
}

.programacao-tab__border--bottom {
  bottom: 0; left: 0; right: 0;
  height: 1px;
  transform: scaleX(1);
  transform-origin: left center;
}

.programacao-tab__border--left {
  top: 0; bottom: 0; left: 0;
  width: 1px;
  transform: scaleY(0);
  transform-origin: bottom center;
}

.programacao-tab__border--top {
  top: 0; left: 0; right: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
}

.programacao-tab__border--right {
  top: 0; bottom: 0; right: 0;
  width: 1px;
  transform: scaleY(0);
  transform-origin: top center;
}

/* Hover ENTER (apenas em tabs não-ativas) — anima left→top→right em sequência */
.programacao-tab:not(.is-active):hover .programacao-tab__border--left {
  transform: scaleY(1);
  transition-delay: 0ms;
}
.programacao-tab:not(.is-active):hover .programacao-tab__border--top {
  transform: scaleX(1);
  transition-delay: 120ms;
}
.programacao-tab:not(.is-active):hover .programacao-tab__border--right {
  transform: scaleY(1);
  transition-delay: 240ms;
}

/* Fill preto (mask reveal quando tab vira ativa) */
.programacao-tab__fill {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  z-index: 2;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.6, 0, 0.2, 1);
}

.programacao-tab.is-active .programacao-tab__fill {
  transform: scaleX(1);
}

/* Quando ativa: bottom border esconde (coberta pelo fill) e top/right/left ficam visíveis */
.programacao-tab.is-active .programacao-tab__border--bottom {
  background: transparent;
}

/* Label */
.programacao-tab__label {
  position: relative;
  z-index: 3;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-bg);
  white-space: nowrap;
  transition: color 240ms ease;
}

.programacao-tab.is-active .programacao-tab__label {
  color: var(--color-accent);
}

.programacao-tab__prefix {
  font-family: var(--font-primary);
  font-style: italic;
}

.programacao-tab__suffix {
  font-family: 'TTNP Round', var(--font-primary);
  font-style: normal;
}

/* ---------- Cards (shared entre os 3 sub-slides, com flip 3D) ---------- */

.programacao-cards-shared {
  position: absolute;
  /* tabs têm height "hug content" (~96px no design); cards começam logo abaixo */
  top: 96px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  display: flex;
  gap: 16px;
  padding: 0 16px 16px;
  perspective: 1500px;
  pointer-events: none;
  opacity: 0; /* default invisível; controlado por JS */
}

.programacao-cards-shared[hidden] {
  display: none;
}

.programacao-card {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: auto;
}

/* Cada face do card é uma "carta" sobreposta */
.programacao-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.programacao-card__face--back {
  transform: rotateY(180deg);
}

/* Mídia (foto + badge horário) */
.programacao-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 160 / 90;
  overflow: hidden;
  background: var(--color-bg);
  flex-shrink: 0;
}

.programacao-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.programacao-card__time {
  position: absolute;
  top: 0;
  right: 0;
  width: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding assimétrico (top maior) compensa o trim vertical do glyph TTNP
     dentro do em-box — mesma técnica do menu/26/09/tab programação */
  padding: 13px 0 5px;
  background: var(--color-accent);
  border: 1px solid var(--color-bg);
  font-family: var(--font-primary);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-bg);
  z-index: 2;
}

/* Body (info do palestrante) */
.programacao-card__body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  background: var(--color-accent);
  border: 1px solid var(--color-bg);
  color: var(--color-bg);
  user-select: text;
}

.programacao-card__header {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.programacao-card__name {
  font-family: var(--font-primary);
  font-style: italic;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.programacao-card__subtitle {
  font-family: var(--font-primary);
  font-style: normal;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.programacao-card__desc {
  font-family: var(--font-primary);
  font-style: normal;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ============================================================
   Últimos anos — stats (no slide) + cards 3x2 (shared com flip 3D)
   Estrutura fiel ao Figma:
   - Stats: bloco cols 2-5 rows 2-7, items alinhados à direita (items-end),
     padding 64px horizontal, gap 64px entre as duas stats,
     número Square 80px + label italic 28px lado a lado (flex-wrap).
   - Cards: cols 6-15 rows 2-7, grid 3x2 com gap 16px, body bg #9a9a9a.
   ============================================================ */

.slide--ultimos-anos .ultimos-stats,
.slide--ultimos-anos-2 .ultimos-stats {
  grid-column: 2 / span 4;
  grid-row: 2 / span 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 64px;
  padding: 0 64px;
  color: var(--color-bg);
  white-space: nowrap;
}

/* Cada stat alinha conforme classe modificadora (--left ou --right) */
.ultimos-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  width: 100%;
  pointer-events: auto;
  user-select: text;
}

.ultimos-stat--left {
  justify-content: flex-start;
  text-align: left;
}

.ultimos-stat--right {
  justify-content: flex-end;
  text-align: right;
}

/* Número grande (Square regular, sem italic). */
.ultimos-stat-num {
  font-family: var(--font-primary);
  font-style: normal;
  font-size: 80px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Label — paragrafo único OU dentro de label-block (multilinha).
   line-height próximo de 1 compacta a métrica vertical (label fica mais
   denso). */
.ultimos-stat-label {
  font-family: var(--font-primary);
  font-style: normal;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Bloco vertical (quando label tem mais de uma linha).
   translateY negativo sobe o label pra ficar visualmente centralizado
   com o número grande (compensa o trim TTNP nos números 80px). */
.ultimos-stat-label-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-8px);
}

/* Override de alinhamento — caso "+80 horas de evento" onde o frame fica
   à direita mas o label visualmente alinha à esquerda. */
.ultimos-stat-label-block--align-left {
  align-items: flex-start;
  text-align: left;
}

/* Span italic — mesma abordagem que funciona nos demais textos italic do
   site (font-style: italic com a family TTNP do @font-face). */
.ultimos-stat-italic {
  font-style: italic;
}

/* ============================================================
   Footer — slide com link CTA, logo Lottie, copyright e socials
   ============================================================ */

.slide--footer {
  /* Usa o mesmo grid 16x8 do .slide */
}

/* Wrapper pai: cols 2-15, rows 2-7, centralizado verticalmente */
.slide--footer .footer__top {
  grid-column: 2 / span 14;
  grid-row: 2 / span 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px 32px;
}

/* Wrapper filho: link e logo alinhados ao final (items-end) com space-between */
.footer__top-inner {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

/* Link "Garanta / seu ingresso" — 96px. Hover: box preto + texto/ícone verde
   + skewX no texto (mesma técnica do Ingressos do header). */
.footer__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: var(--color-bg);
  text-decoration: none;
  pointer-events: auto;
}

/* Cada linha do link ganha seu próprio box preto no hover.
   Padding compacto: vertical sutil (com top um pouco maior pelo trim
   TTNP) e right maior que left pra compensar o glyph italic-like que
   termina antes do em-box. */
.footer__cta-row {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px 0 12px;
  background-color: transparent;
  color: var(--color-bg);
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}

.footer__cta:hover .footer__cta-row {
  background-color: var(--color-bg);
  color: var(--color-accent);
}

.footer__cta-text {
  font-family: var(--font-primary);
  font-style: normal;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
  display: inline-block;
  transform: skewX(0deg);
  transform-origin: 0% 100%;
  transition: transform var(--t-fast) ease;
  will-change: transform;
}

.footer__cta:hover .footer__cta-text {
  transform: skewX(-10deg);
}

/* Ícone arrow: usa currentColor → segue a cor da row (preto default,
   verde no hover) */
.footer__cta-arrow {
  display: inline-flex;
  align-items: center;
  padding: 12px 0;
  color: inherit;
  transition: transform var(--t-fast) ease;
}

.footer__cta-arrow svg {
  width: 24px;
  height: 24px;
  display: block;
}

.footer__cta-arrow svg path {
  fill: currentColor;
}

.footer__cta:hover .footer__cta-arrow {
  transform: translate(4px, -4px);
}

/* Logo Lottie do footer — 360px conforme Figma */
.footer__logo {
  flex: 0 0 auto;
  width: 360px;
  aspect-ratio: 410 / 149; /* mesma proporção do Lottie da hero */
  padding: 12px 0 16px;
  display: block;
  pointer-events: none;
  user-select: none;
}

.footer__logo > svg,
.footer__logo > div > svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Linha 2: copyright (esquerda) + socials (direita), row 8 */
.slide--footer .footer__bottom {
  grid-column: 1 / -1;
  grid-row: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(100% / 16);
}

.footer__copy {
  font-family: var(--font-primary);
  font-style: normal;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-bg);
  white-space: nowrap;
  padding: 0 32px;
  pointer-events: auto;
  user-select: text;
}
/* Link em "F&MD" dentro do copyright: clicável + feedback visual no hover */
.footer__copy a {
  pointer-events: auto;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: text-decoration 150ms ease;
}
.footer__copy a:hover {
  text-decoration: underline;
}

.footer__social {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 32px;
  margin: 0;
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  pointer-events: auto;
  transition: transform var(--t-fast) ease, opacity var(--t-fast) ease;
}

.footer__social a:hover {
  transform: translateY(-2px);
}

.footer__social img {
  width: 24px;
  height: 24px;
  display: block;
}

/* Cards shared 3 cols × 2 rows, com flip 3D individual */
.ultimos-cards-shared {
  position: absolute;
  /* cols 6-15 (10 cols), rows 2-7 do grid */
  top: 12.5%;        /* depois da row 1 (1/8) */
  left: 31.25%;      /* depois de 5 cols (5/16) */
  right: 6.25%;      /* deixa 1 col blank na direita */
  bottom: 12.5%;     /* deixa row 8 blank */
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  padding: 16px; /* frame pai dos cards recebeu padding (conforme Figma atualizado) */
  perspective: 1500px;
  pointer-events: none;
  opacity: 0; /* default invisível; controlado por JS */
}

.ultimos-cards-shared[hidden] {
  display: none;
}

.ultimos-card {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: auto;
  min-width: 0;
  min-height: 0;
}

.ultimos-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ultimos-card__face--back {
  transform: rotateY(180deg);
}

/* Imagem ocupa o espaço restante (flex 1, sem aspect fixo) */
.ultimos-card__media {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: var(--color-bg);
}

.ultimos-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body: fundo cinza com border preto (conforme Figma) */
.ultimos-card__body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 20px;
  background: #9a9a9a;
  border: 1px solid var(--color-bg);
  color: var(--color-bg);
  user-select: text;
}

/* Nome: 20px, primeira palavra italic + restante regular */
.ultimos-card__name {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.ultimos-card__name-first {
  font-style: italic;
}

.ultimos-card__name-rest {
  font-style: normal;
}

.ultimos-card__company {
  font-family: var(--font-primary);
  font-style: normal;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ---------- Slide: PATROCINADORES E PARCEIROS ---------- */
/* Conteúdo centrado em cols 2–15, rows 2–7 */
.patrocinadores__content {
  grid-column: 2 / span 14;
  grid-row: 2 / span 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 80px;
  pointer-events: auto;
}

.patrocinadores__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.patrocinadores__label {
  font-family: var(--font-primary);
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #000;
  text-align: center;
  white-space: nowrap;
  margin: 0;
  user-select: text;
}

.patrocinadores__logos {
  display: block;
  width: 100%;
  height: auto;
}

.patrocinadores__logos--sponsors { max-width: 777px; }
.patrocinadores__logos--partners { max-width: 803px; }

/* ============================================================
   Stage tracks — cada um vale 100vh de scroll
   ============================================================ */
/* Navegação agora é event-based (sem scroll real) — tracks não são usados */
.stage__track {
  display: none;
}

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================================
   MOBILE (< 1024px) — scroll nativo vertical, seções empilhadas,
   grid 6x11 por seção com flip on-reveal, vídeo fixed atrás.
   ============================================================ */

.m-root { display: none; } /* escondido no desktop */

@media (max-width: 1023px) {
  /* Esconde a versão desktop */
  .site-header,
  .stage { display: none !important; }

  /* Restaura scroll vertical nativo */
  html,
  body {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
  }

  .m-root { display: block; }

  /* ---------- Vídeo de fundo (fixed atrás de tudo) ---------- */
  .m-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--color-bg);
    z-index: 0;
    pointer-events: none;
  }

  /* ---------- Header mobile (fixed) ---------- */
  .m-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 47px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: var(--color-bg);
  }

  .m-header__brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
  }
  .m-header__brand img { width: 46px; height: auto; display: block; }

  /* Menu scrollável horizontal com fade (mask) nas bordas */
  .m-nav {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* fade nas duas pontas, indicando que há mais conteúdo */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }
  .m-nav::-webkit-scrollbar { display: none; }

  .m-nav__list {
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    padding: 0 20px; /* respiro pra primeiro/último não colarem no fade */
  }

  .m-nav__item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
  }

  .m-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    color: var(--color-fg);
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity var(--t-fast) ease, transform var(--t-fast) ease;
  }
  .m-nav__icon svg { width: 100%; height: 100%; fill: currentColor; }

  .m-nav__item--active .m-nav__icon { opacity: 1; transform: translateX(0); }

  .m-nav__link {
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: var(--tracking-nav);
    text-transform: uppercase;
    color: var(--color-fg-muted);
    white-space: nowrap;
    transition: color var(--t-fast) ease;
  }
  .m-nav__item--active .m-nav__link { color: var(--color-fg); }

  /* CTA Ingressos */
  .m-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-accent);
  }
  .m-cta__icon { display: inline-flex; align-items: center; gap: 0; }
  .m-cta__part { display: block; height: 9px; width: auto; }
  .m-cta__label {
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 1;
    letter-spacing: var(--tracking-nav);
    text-transform: uppercase;
    color: var(--color-accent);
    white-space: nowrap;
  }

  /* ---------- Seções (empilhadas, scroll nativo) ---------- */
  .m-main { position: relative; z-index: 1; }

  .m-section {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    /* sem overflow hidden: a seção pode crescer se o conteúdo pedir */
  }

  /* Grid 6x11 decorativo — overflow hidden clipa o inset -0.5px das faces */
  .m-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(11, 1fr);
    perspective: 1000px;
    transform-style: preserve-3d;
    overflow: hidden;
    z-index: 1;
  }

  .m-cell {
    position: relative;
    transform-style: preserve-3d;
    /* will-change aplicado dinamicamente via JS só durante o flip */
  }
  .m-cell__face {
    position: absolute;
    inset: -0.5px; /* cobre gaps de subpixel */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-repeat: no-repeat;
  }
  .m-cell__face--back {
    background: transparent;
    transform: rotateY(180deg);
  }

  /* ---------- Conteúdo sobre o grid (grid 6x11 pra placement) ---------- */
  .m-content {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(11, 1fr);
    pointer-events: none;
  }

  /* Hero: logo centralizado + tagline */
  .m-hero__logo {
    position: absolute;
    top: calc(50% - 16px);
    left: 50%;
    width: min(86vw, 312px);
    aspect-ratio: 312 / 113;
    pointer-events: none;
    user-select: none;
    /* transform aplicado por GSAP (centralização) */
  }
  .m-hero__logo > svg,
  .m-hero__logo > div > svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }

  /* Hero CTA + scroll badge — bottom row (rows 9–11, all 6 cols) */
  .m-hero__tagline {
    grid-column: 1 / -1;
    grid-row: 9 / span 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 48px 16px 48px 24px;
    pointer-events: none;
  }

  .m-hero__cta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    pointer-events: auto;
  }

  .m-hero__cta-line {
    font-family: var(--font-primary);
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.56px;
    color: #000;
    text-transform: uppercase;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .m-hero__cta-line img {
    display: block;
    flex-shrink: 0;
  }

  .m-hero__scroll-badge {
    flex-shrink: 0;
    pointer-events: auto;
  }

  .m-hero__scroll-badge img {
    display: block;
    width: 90px;
    height: 90px;
  }

  /* O evento: texto */
  .m-evento__text {
    grid-column: 1 / span 5;
    grid-row: 3 / span 7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.3em;
    padding: 48px 16px;
  }
  .m-evento__text--2 {
    grid-column: 1 / -1;
    padding: 48px 16px 48px 32px;
  }
  .m-evento__text p {
    font-family: var(--font-primary);
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-bg);
    margin: 0;
    pointer-events: auto;
    user-select: text;
  }

  /* ====== Data e local ====== */
  .m-section--data-local {
    background: transparent;
  }

  /* Grid paralelo de imagem — ocupa SOMENTE a altura das cells que a revelam
     (5 das 11 rows do grid principal). Cells dual-face com cover dinâmico (JS).
     z-index 2 (sobre o grid colorido z:1, abaixo do conteúdo z:10). */
  .m-image-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100% * 5 / 11);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 1fr);
    perspective: 1000px;
    transform-style: preserve-3d;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
  }
  .m-image-cell {
    position: relative;
    transform-style: preserve-3d;
  }
  .m-image-cell__face {
    position: absolute;
    inset: -0.5px;
    backface-visibility: hidden;
    background-repeat: no-repeat;
  }
  .m-image-cell__face--back {
    transform: rotateY(180deg);
  }

  /* Painel: ocupa cols 1/-1 e rows 5/span 7 (Figma).
     Sub-grid interno 5 cols × 3 rows com gap-y 24, padding 48/32.
     self-center: o painel centraliza verticalmente nas 7 rows reservadas. */
  .m-data-local__panel {
    grid-column: 1 / -1;
    grid-row: 5 / span 7;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, fit-content(100%));
    row-gap: 24px;
    padding: 48px 32px;
    pointer-events: auto;
    user-select: text;
  }

  /* Box preto 26/09 — sub-row 1, col 1/span 5, justify-self start (encolhe).
     Padding assimétrico (12 top / 4 bottom) compensa o offset do glyph TTNP. */
  .m-data-local__date {
    grid-column: 1 / span 5;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    background: var(--color-bg);
    padding: 12px 12px 4px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .m-data-local__date-text {
    font-family: 'TTNP Italic', var(--font-primary);
    font-style: normal;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.02em; /* ≈ -0.96px em 48px */
    color: var(--color-accent);
    white-space: nowrap;
  }

  /* Auditório / da Acirp — sub-row 2, col 1/span 5 stretch.
     2 spans inline: "Auditório" (Italic Square) + "da&nbsp;Acirp" (Round). */
  .m-data-local__venue {
    grid-column: 1 / span 5;
    grid-row: 2;
    align-self: start;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-bg);
  }
  .m-data-local__venue-a {
    font-family: 'TTNP Italic', var(--font-primary);
    font-style: normal;
  }
  .m-data-local__venue-b {
    font-family: 'TTNP Round', var(--font-primary);
    font-style: normal;
  }

  /* Endereço — sub-row 3, col 2/span 4 (indentado uma sub-col).
     20px, line-height 1.3, primeira linha italic. */
  .m-data-local__addr {
    grid-column: 2 / span 4;
    grid-row: 3;
    align-self: start;
    font-style: normal;
    color: var(--color-bg);
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.01em; /* ≈ -0.2px em 20px */
  }
  .m-data-local__addr p {
    margin: 0;
    font-family: var(--font-primary);
  }
  .m-data-local__addr p i {
    font-family: 'TTNP Italic', var(--font-primary);
    font-style: normal;
  }

  /* ====== Programação (accordion + carrossel) ====== */
  /* O grid amarelo stretch com a section (cells '.' precisam mostrar o vídeo
     em toda a altura — bg sólido na section tamparia o vídeo). */
  .m-section--programacao .m-content {
    display: block;
  }
  .m-programacao__wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    pointer-events: auto;
    user-select: text;
  }

  /* --- Accordion --- */
  .m-accordion {
    width: 100%;
  }
  .m-accordion__header {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #000;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px;
    cursor: pointer;
    color: #000;
    font: inherit;
    text-align: left;
    transition: background-color 220ms ease;
  }
  .m-accordion--open > .m-accordion__header {
    background: #000;
    color: var(--color-accent);
  }
  .m-accordion__label {
    display: inline-block;
    font-size: 0; /* zera o espaço entre os spans inline */
    letter-spacing: -0.02em; /* ≈ -0.56px em 28px */
    line-height: 1;
    word-break: break-word;
    flex: 1 0 0;
  }
  .m-accordion__label-a {
    font-family: 'TTNP Italic', var(--font-primary);
    font-style: normal;
    font-size: 28px;
    line-height: 1;
  }
  .m-accordion__label-b {
    font-family: 'TTNP Round', var(--font-primary);
    font-style: normal;
    font-size: 28px;
    line-height: 1;
  }

  /* Body do accordion: animado via JS (max-height interpolado pela altura
     real do conteúdo via scrollHeight). Defaults pra estado fechado. */
  .m-accordion__body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 360ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms ease;
  }
  /* Estado aberto: max-height definido inline via JS pra altura real.
     opacity fade-in suave acompanha. */
  .m-accordion--open > .m-accordion__body {
    opacity: 1;
  }

  /* --- Carrossel --- */
  .m-carousel {
    padding-top: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    pointer-events: auto;
  }
  .m-carousel__viewport {
    overflow: hidden;
    /* margem negativa pra alinhar o card com o container (já que o
       m-programacao__wrap tem 16px de padding). Cancela o padding lateral. */
    margin: 0 -16px;
    pointer-events: auto;
  }
  .m-carousel__track {
    display: flex;
    gap: 16px;
    padding: 0 16px;
    touch-action: pan-y; /* evita briga com scroll vertical */
    will-change: transform;
    align-items: stretch; /* cards ficam todos com a mesma altura */
    pointer-events: auto;
  }
  /* Controles fixos abaixo do viewport — não dependem do card ativo */
  .m-carousel__nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    pointer-events: auto;
  }

  /* --- Card mobile (igual estrutura do desktop, valores Figma) --- */
  .m-prog-card {
    flex: 0 0 100%;
    /* O card ocupa 100% do viewport (1 card por vez, sem peek) */
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  .m-prog-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 160 / 90;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }
  .m-prog-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
  }
  .m-prog-card__time {
    position: relative;
    background: var(--color-accent);
    border: 1px solid #000;
    width: 88px;
    padding: 8px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-style: normal;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.01em; /* ≈ -0.24px @24px */
    color: #000;
    white-space: nowrap;
    margin: 0; /* fica top-right naturalmente pelo flex do pai */
  }
  .m-prog-card__body {
    background: var(--color-accent);
    border: 1px solid #000;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #000;
    /* Cresce pra preencher a altura do card. Como o track tem align-items:
       stretch, todos os cards ficam com a altura do card com mais conteúdo,
       e o body de cada um se estica pra ocupar o espaço extra. */
    flex: 1 1 auto;
  }
  .m-prog-card__header {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
  }
  .m-prog-card__name {
    margin: 0;
    font-family: 'TTNP Italic', var(--font-primary);
    font-style: normal;
    font-size: 24px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
  }
  .m-prog-card__subtitle {
    margin: 0;
    font-family: var(--font-primary);
    font-style: normal;
    font-size: 20px;
    letter-spacing: -0.01em;
  }
  .m-prog-card__desc {
    margin: 0;
    font-family: var(--font-primary);
    font-style: normal;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  /* --- Controles (setas) do carrossel — fora dos cards, posição fixa --- */
  .m-carousel__nav-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 32px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #000;
    transition: opacity 200ms ease;
  }
  .m-carousel__nav-btn[disabled] {
    opacity: 0.16;
    cursor: default;
  }
  .m-carousel__nav-btn img {
    width: 24px;
    height: 24px;
    display: block;
    pointer-events: none;
  }
  .m-carousel__nav-btn--prev img {
    transform: rotate(180deg);
  }

  /* Modifier --peek: cada card ocupa width = 100% - 16px (mostra 16px do próximo).
     Estratégia: track tem padding 0 16px (default), e cada card tem flex-basis
     calc(100% - 32px - 16px) ... não. Vou definir card width direto. */
  .m-carousel--peek .m-prog-card,
  .m-carousel--peek .m-ultimos-card {
    flex: 0 0 calc(100% - 16px);
  }

  /* ====== Últimos anos ====== */
  /* Section com altura suficiente pra acomodar 16 rows iguais onde o
     carrossel cabe nas suas 6 rows com folga (Figma original = 931px). */
  .m-section--ultimos-anos {
    min-height: max(100vh, 1050px);
    min-height: max(100svh, 1050px);
  }
  /* Grid decorativo 6x16 — stretch com a section (cells '.' mostram vídeo). */
  .m-section--ultimos-anos .m-grid {
    grid-template-rows: repeat(16, 1fr);
  }
  /* Content em GRID 6x16 com as MESMAS proporções do grid decorativo,
     pra as stats e o carrossel ocuparem EXATAMENTE as rows/cols do Figma. */
  .m-section--ultimos-anos .m-content {
    grid-template-rows: repeat(16, 1fr);
  }

  /* --- Stats --- */
  .m-ultimos__stat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 0 8px;
    color: #000;
    pointer-events: auto;
    user-select: text;
  }
  .m-ultimos__stat-num {
    margin: 0;
    font-family: var(--font-primary);
    font-style: normal;
    font-size: 64px;
    line-height: 1;
    letter-spacing: -0.02em; /* ≈ -1.28px @64px */
    text-align: right;
  }
  .m-ultimos__stat-side {
    margin: 0;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.01em; /* ≈ -0.24px @24px */
  }
  .m-ultimos__stat-side i {
    font-family: 'TTNP Italic', var(--font-primary);
    font-style: normal;
  }
  .m-ultimos__stat-label {
    display: flex;
    flex-direction: column;
    line-height: 1;
  }
  .m-ultimos__stat-label-a,
  .m-ultimos__stat-label-b {
    margin: 0;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .m-ultimos__stat-label-a {
    font-family: 'TTNP Italic', var(--font-primary);
    font-style: normal;
  }
  .m-ultimos__stat-label-b {
    font-family: var(--font-primary);
    font-style: normal;
  }
  .m-ultimos__stat-label-b i {
    font-family: 'TTNP Italic', var(--font-primary);
    font-style: normal;
  }

  /* Posicionamento por grid placement — col/row EXATOS do Figma.
     Cada stat ocupa 2 rows (com align-content: center pra centralizar
     verticalmente o conteúdo dentro do slot de 2 rows). */
  .m-ultimos__stat--1 {
    /* +10 anos / de evento — node 6310:663 */
    grid-column: 3 / span 4;
    grid-row: 2 / span 2;
    justify-content: center;
    padding: 0 32px;
  }
  .m-ultimos__stat--2 {
    /* +1.500 participantes — node 6312:667 */
    grid-column: 1 / span 4;
    grid-row: 4 / span 2;
    padding: 0 48px 0 32px;
  }
  .m-ultimos__stat--3 {
    /* +80 horas / de evento — node 6317:673 (justify-end no Figma!) */
    grid-column: 2 / span 4;
    grid-row: 6 / span 2;
    justify-content: flex-end;
    padding: 0 32px;
  }
  .m-ultimos__stat--4 {
    /* +40 palestrantes — node 6317:676 (sem padding lateral) */
    grid-column: 2 / span 5;
    grid-row: 8 / span 2;
  }

  /* Carrossel — col 1/-1, row 10/span 6 (Figma node 6317:682) */
  .m-ultimos__carousel {
    grid-column: 1 / -1;
    grid-row: 10 / span 6;
    padding: 16px 16px 0;
    pointer-events: auto;
    /* align-self: start evita que o grid estique o carousel até a borda
       da row — o carousel cresce com o conteúdo, não fica preso à célula. */
    align-self: start;
  }

  /* viewport não deve encolher (flex-shrink:0) para não comprimir o track
     quando o flex-column container tem altura menor que o conteúdo */
  .m-ultimos__carousel .m-carousel__viewport {
    flex-shrink: 0;
  }

  /* Card mobile (Últimos anos) — bg cinza, sem horário, sem descrição.
     Altura da mídia definida por svh (responsiva à altura do viewport),
     não por aspect-ratio livre: evita que a card estoure o container
     quando a tela alarga (landscape / tablet). */
  .m-ultimos-card {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .m-ultimos-card__media {
    position: relative;
    width: 100%;
    /* clamp: mínimo 140px (landscape curto), ideal 28svh, máximo 220px */
    height: clamp(140px, 28svh, 220px);
    overflow: hidden;
  }
  .m-ultimos-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
  }
  .m-ultimos-card__body {
    background: #9a9a9a; /* cinza Figma */
    border: 1px solid #000;
    padding: 20px;
    display: flex;
    flex-direction: column;
    color: #000;
    flex: 0 0 auto; /* fit-content: cresce só pelo conteúdo */
  }
  .m-ultimos-card__name {
    margin: 0;
    font-family: var(--font-primary);
    font-style: normal;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.01em; /* ≈ -0.2px @20px */
  }
  .m-ultimos-card__name-first {
    font-family: 'TTNP Italic', var(--font-primary);
    font-style: normal;
  }
  .m-ultimos-card__name-rest {
    font-family: var(--font-primary);
  }
  .m-ultimos-card__company {
    margin: 0;
    font-family: var(--font-primary);
    font-style: normal;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.01em; /* ≈ -0.16px @16px */
  }

  /* ====== Patrocinadores e Parceiros (mobile) ====== */
  .m-patrocinadores__content {
    grid-column: 1 / -1;
    grid-row: 2 / span 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 24px;
    pointer-events: auto;
  }

  .m-patrocinadores__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .m-patrocinadores__label {
    font-family: var(--font-primary);
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #000;
    text-align: center;
    white-space: nowrap;
    margin: 0;
    user-select: text;
  }

  .m-patrocinadores__logos {
    display: block;
    height: auto;
    max-width: 100%;
  }

  /* ====== Footer ====== */
  /* Section min-height: 100vh (instrução do nome do frame Figma).
     Grid 6x11 com W=branco / Y=amarelo / .=transparente (revela vídeo). */
  .m-section--footer {
    min-height: 100vh;
    min-height: 100svh;
  }

  /* Conteúdo: 3 blocos em grid placement exato do Figma */
  .m-section--footer .m-content {
    /* já é grid 6x11 default */
  }

  /* Logo LAB — col 1/span 6, row 2/span 4. p-24, justify-end (logo
     no bottom do slot), items-center, w-full. Aspect ratio 360/131.27 */
  .m-footer__logo-wrap {
    grid-column: 1 / -1;
    grid-row: 2 / span 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 24px;
    pointer-events: auto;
  }
  .m-footer__logo {
    width: 100%;
    aspect-ratio: 360 / 131.27;
    position: relative;
    overflow: hidden;
  }
  .m-footer__logo > svg,
  .m-footer__logo > div > svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }

  /* CTA "GARANTA SEU INGRESSO" — col 1/span 6, row 6/span 3, p-24, items-start */
  .m-footer__cta {
    grid-column: 1 / -1;
    grid-row: 6 / span 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px; /* gap-y 2.061px no Figma */
    padding: 24px;
    text-decoration: none;
    color: #000;
    pointer-events: auto;
  }
  .m-footer__cta-line {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    font-family: var(--font-primary);
    font-style: normal;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.02em; /* ≈ -0.96px @48px */
    text-transform: uppercase;
    color: #000;
    white-space: nowrap;
  }
  .m-footer__cta-line--with-icon {
    gap: 8px;
    align-items: flex-start;
    padding: 0 4px; /* mesmo padding 4 horizontal do Figma */
  }
  .m-footer__cta-icon {
    display: inline-flex;
    align-items: center;
    padding: 8px 0; /* py-8 no Figma */
  }
  .m-footer__cta-icon img {
    display: block;
    width: 12px;
    height: 12px;
  }

  /* Copyright + socials — col 1/span 6, row 10/span 2, items-end justify-between, pb-24 px-24 */
  .m-footer__bottom {
    grid-column: 1 / -1;
    grid-row: 10 / span 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 24px 24px;
    pointer-events: auto;
  }
  .m-footer__copy {
    margin: 0;
    font-family: var(--font-primary);
    font-style: normal;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.01em; /* ≈ -0.16px @16px */
    color: #000;
    white-space: nowrap;
  }
  .m-footer__copy a {
    pointer-events: auto;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
  }
  .m-footer__copy a:hover {
    text-decoration: underline;
  }
  .m-footer__social {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 2px 0;
  }
  .m-footer__social a {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: #000;
  }
  .m-footer__social img {
    display: block;
    width: 18px;
    height: 18px;
  }
}