/* ============================================================================
   TECH+ SUMMIT — camada do site
   ----------------------------------------------------------------------------
   Depende de design-system/tokens.css e design-system/components.css, nessa
   ordem. Carregada por último para vencer o DS por ORDEM, nunca por
   especificidade inflada.

   Regra deste arquivo: nenhum valor literal de cor, espaço ou tipo. Só tokens.
   As poucas exceções estão comentadas com a razão.

   Índice
     1.  Reset pós-Reboot
     2.  Layout — .split, .btn--block
     3.  Marca e navegação
     4.  Hero
     5.  Contador regressivo
     6.  Marquee                    ✦ candidato a promoção ao DS
     7.  Extensões de cartão
     8.  .info-card                 (unifica ticket-info-card + venue-info-card)
     9.  Palestrantes
     10. Timeline                   ✦ candidato a promoção ao DS
     11. Checklist                  ✦ candidato a promoção ao DS
     12. Lotes de ingresso
     13. Acordeão                   ✦ candidato a promoção ao DS
     14. Patrocinadores
     15. Rodapé
     16. Movimento reduzido
   ========================================================================== */


/* 1. RESET PÓS-REBOOT ========================================================
   O Bootstrap foi removido, e com ele o Reboot. O components.css do DS zera
   margens só nos seus próprios componentes (.h1–.h4, .lead, .card__title…);
   todo elemento sem classe do DS voltaria às margens do navegador. Este bloco
   substitui o Reboot no que a página realmente usa. */

h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

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

iframe {
  border: 0;
}

button {
  font: inherit;
  color: inherit;
}

/* O DS declara `scroll-margin-block-start` nas seções; aqui o par que falta,
   alinhado ao min-height de 72px da .nav sticky. */
html {
  scroll-behavior: smooth;
  scroll-padding-block-start: 88px;
}


/* 2. LAYOUT ================================================================= */

/* Substitui `row g-5` + 2× `col-xl-6` do Bootstrap nos 4 blocos de duas
   colunas: hero, #sobre, #programacao e #local. Uma coluna por padrão; duas
   a partir de 1080px — o mesmo ponto em que os grids de cartão se abrem, o
   que fecha o descompasso que existia entre 768 e 1200px. */
.split {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}

@media (min-width: 1080px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-9);
  }
  .split--reverse > :first-child {
    order: 2;
  }
}

.btn--block {
  width: 100%;
}

/* Cabeçalho de seção: rótulo, título e linha de apoio. O respiro depois dele
   é o que separa a introdução do conteúdo — sem isso a página fica sem ritmo. */
.section-head {
  max-width: 62ch;
}
.section-head > * + * {
  margin-block-start: var(--sp-4);
}
.section-head:not(:last-child) {
  margin-block-end: var(--sp-8);
}

/* #sobre — três faixas.
   A seção era um .split de duas colunas: numa cabia TODO o texto mais os quatro
   cartões, na outra só a imagem. Com `align-items: center`, a imagem flutuava no
   meio vertical de uma coluna altíssima, longe do título que ela ilustra, e os
   cartões ficavam 2×2 espremidos em meia largura.

   Agora: intro (título + imagem lado a lado, alinhados pelo topo) → texto em duas
   colunas de leitura → os quatro pilares na largura inteira. */
.sobre__intro {
  display: grid;
  gap: var(--sp-8);
  /* start, e não center: a imagem tem de encostar no topo do título, que é o que
     ela ilustra. Centralizada, ela descia e abria um vão sob o eyebrow. */
  align-items: start;
}
@media (min-width: 1000px) {
  .sobre__intro {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-9);
  }
}

/* A moldura neon do DS é um canto decorativo curto (22% da largura). Numa imagem
   de 568px isso vira um risco de 125px que parece corte acidental, não moldura.
   Aqui o "L" abraça mais — 58% — e a linha inferior desce um pouco além da base
   da imagem, que é como o canto neon aparece nas peças do Canva. */
.sobre__media {
  margin-block-start: var(--sp-2);
  padding-block-end: var(--sp-8);
}
.sobre__media::before {
  width: 58%;
}

/* Os dois parágrafos de definição. Em largura total dariam linhas de mais de
   100 caracteres — ilegíveis. Em duas colunas, cada uma fica perto de 60ch. */
.sobre__texto {
  display: grid;
  gap: var(--sp-6);
  margin-block-start: var(--sp-9);
  color: var(--fg-muted);
}
@media (min-width: 860px) {
  .sobre__texto {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
}

/* Os quatro pilares, agora na largura inteira da seção: uma linha só a partir de
   1000px. Contagem explícita porque o auto-fit de .grid daria 3+1 em telas
   médias, deixando um cartão órfão. */
.about-grid {
  grid-template-columns: 1fr;
  margin-block-start: var(--sp-9);
}
@media (min-width: 560px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1000px) {
  .about-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mesmo motivo do .about-grid: são dois cartões, e o auto-fit de .grid
   (minmax(280px,1fr)) deixaria os dois com 280px encostados à esquerda num
   container de 1200px. Duas colunas fixas a partir de 760px. */
.cases-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .cases-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Seis perfis: 3×2 em telas largas, 2×3 no meio, 1 coluna no telefone.
   Deixado explícito porque auto-fit produziria 4+2, com dois órfãos. */
.perfis-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .perfis-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1000px) {
  .perfis-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Os quatro números do histórico: 2×2 antes de caber em linha única. */
.numeros-grid {
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 860px) {
  .numeros-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.numeros-timeline {
  margin-block-start: var(--sp-9);
}


/* 3. MARCA E NAVEGAÇÃO ====================================================== */

/* O "T+" era um quadrado de raio 8px. O DS define canto reto a partir das
   peças, então aqui ele vira um quadrado puro com o gradiente da marca. */
/* Lettering TECH+ SUMMIT — o PNG exportado do Canva, não a reconstrução
   tipográfica. Duas variantes: a de fundo claro tem o "TECH+" recolorido
   para --c-navy-900 (o branco original sumiria); a de fundo escuro é o
   arquivo original. O gradiente do "SUMMIT" é o mesmo nas duas.
   O texto fica num .visually-hidden para o leitor de tela e para que o
   conteúdo da página siga verificável. */
.nav__logo {
  display: block;
  block-size: 26px;
  inline-size: auto;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


.nav__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* No rodapé o lettering respira mais — é assinatura, não navegação. */
.nav__brand--footer .nav__logo { block-size: 34px; }

.nav__panel {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-width: 0;
}

/* A barra do topo não pode encolher para dentro de si mesma.
   O `min-width: 0` que o DS põe em .nav__links permitia que a lista fosse
   comprimida abaixo do próprio conteúdo; como cada .nav__link é `nowrap`,
   os itens não quebravam — vazavam para a direita e passavam POR BAIXO dos
   botões, que pintam depois no DOM. Era assim que "Local" e "Dúvidas"
   apareciam sob o CTA, sem nenhum aviso de overflow.

   Com flex-shrink: 0 nos dois lados, a barra ou cabe inteira ou não cabe —
   e "não cabe" é responsabilidade do breakpoint abaixo, não do acaso. */
.nav__panel .nav__links {
  min-width: auto;
  flex-shrink: 0;
  gap: var(--sp-4);
}

.nav__actions {
  display: flex;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.nav__actions .btn {
  min-height: 40px;
  padding-inline: var(--sp-4);
  font-size: var(--fs-xs);
}

/* O hambúrguer só existe em telas estreitas. */
.nav__toggle {
  display: none;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  background: transparent;
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-none);
  cursor: pointer;
}

.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  inline-size: 18px;
  block-size: 2px;
  background: var(--fg);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.nav__toggle-bars {
  position: relative;
}
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}
.nav__toggle-bars::before { inset-block-start: -6px; }
.nav__toggle-bars::after  { inset-block-start: 6px; }

/* Vira um X quando aberto. */
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1239.98px) {
  .nav {
    flex-wrap: wrap;
    gap: var(--sp-3);
  }

  .nav__toggle { display: grid; }

  /* Painel deslizante. O JS só alterna o atributo `hidden`; quem o traduz em
     estilo é a regra abaixo — a declaração `[hidden] { display: none }` da
     folha do navegador PERDE para o `display: flex` do autor, então o estado
     fechado precisa ser dito aqui, explicitamente. */
  .nav__panel[hidden] {
    display: none;
  }

  .nav__panel {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
    padding-block: var(--sp-5) var(--sp-6);
    border-block-start: var(--border-w) solid var(--border);
  }

  .nav__panel .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* anula a faixa rolável que o DS aplica abaixo de 900px: aqui
       o padrão escolhido para o site é o painel, e ele vale até 1240px */
    overflow: visible;
    mask-image: none;
    padding-inline-end: 0;
  }

  .nav__panel .nav__link {
    /* `display: block` não é cosmético aqui. O .nav__link é inline, e padding
       vertical em elemento inline não empurra a linha: as áreas de toque de
       dois links vizinhos se sobrepunham, e um toque perto da borda acionava
       o link errado. Como bloco, cada alvo ocupa a própria faixa. */
    display: block;
    padding-block: var(--sp-3);
    border-block-end: var(--border-w) solid var(--border);
  }

  .nav__actions {
    flex-direction: column;
  }
  .nav__actions .btn {
    min-height: 48px;
    font-size: var(--fs-sm);
  }
}

/* O corte é 1240px, não 900px. Medido, não estimado: a barra inteira —
   marca 226 + 7 links 587 + CTA 203, mais os gaps — pede 1064px de conteúdo,
   e com o gutter de 6vw só há essa folga a partir de ~1240px. Abaixo disso
   o painel é a resposta certa; foi tentar espremer a barra em telas menores
   que produziu a sobreposição.

   Acima do corte o painel está sempre presente: o atributo `hidden` que o JS
   deixou para trás precisa ser ignorado. `.nav__panel[hidden]` (0,2,0) vence
   o `[hidden]` da folha do navegador (0,1,0) sem !important. */
@media (min-width: 1240px) {
  .nav__panel[hidden] { display: flex; }
  .nav__toggle { display: none; }
}


/* 4. HERO =================================================================== */

.hero {
  padding-block: clamp(6rem, 12vw, 9rem) clamp(3rem, 7vw, 5rem);
}

/* O --fs-7xl do DS é dimensionado para "TECH+ SUMMIT". O título do hero tem
   palavras bem mais longas ("Computação", "avançada") que estouram a largura
   abaixo de 480px. Curva própria, com o mesmo teto do token. */
.hero__title {
  font-size: clamp(2.5rem, 9.5vw, 5.5rem);
  overflow-wrap: break-word;
}

/* A foto de plateia entra no lugar da trama de circuito, com o mesmo
   tratamento escuro por cima. */
.hero.surface-void::before {
  background-image:
    linear-gradient(90deg, rgb(0 5 68 / 0.96) 0%, rgb(0 5 68 / 0.72) 45%, rgb(0 5 68 / 0.30) 100%),
    linear-gradient(0deg, rgb(0 5 68 / 0.94) 0%, rgb(0 5 68 / 0.18) 42%, rgb(6 33 56 / 0.60) 100%),
    url("../img/hero-audience.png");
  background-size: cover, cover, cover;
  background-position: center;
  opacity: 1;
  mask-image: none;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-end: var(--sp-7);
}

.hero__lead {
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* O .stack--lg do DS dá 32px entre título, lead, botões e preço. Depois do
   título vale mais, porque o line-height 0.96 encosta os descendentes. */
.hero__headline > .hero__title {
  /* o teto agora vive em .hero__title-claim: a linha da marca é curta e não
     deve ser estrangulada pelo mesmo limite da frase de proposta */
  max-width: none;
}
.hero__headline > .hero__title + * {
  margin-block-start: var(--sp-7);
}

.hero__price {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.hero__price strong {
  color: var(--accent);
  font-weight: var(--fw-medium);
}

.hero__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7);
  justify-content: space-between;
  align-items: flex-end;
  margin-block-start: var(--sp-10);
  padding-block-start: var(--sp-6);
  border-block-start: var(--border-w) solid var(--border);
}

.hero__details {
  display: grid;
  gap: var(--sp-2);
}
.hero__details p {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.hero__detail-icon {
  flex: none;
  inline-size: 10px;
  block-size: 10px;
  background: var(--c-neon);
  box-shadow: var(--glow-neon);
}


/* 5. CONTADOR REGRESSIVO ====================================================
   Construído sobre .stat do DS. Os atributos data-countdown* são o contrato
   com main.js — as classes mudaram, eles não. */

.countdown {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.countdown__unit {
  min-inline-size: 3.5ch;
}

.countdown__unit .stat__value {
  font-size: var(--fs-4xl);
  font-variant-numeric: tabular-nums;
}

.countdown__sep {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-display);
  color: var(--accent);
}


/* 6. MARQUEE ✦ ==============================================================
   Faixa de palavras entre o hero e #sobre. Escura, delimitada por dois
   filetes neon — o mesmo idioma do .rule-neon do DS, aplicado como borda. */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-5);
  user-select: none;
}

.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: var(--rule-w);
  background: var(--grad-hairline);
  box-shadow: var(--glow-neon);
  z-index: 1;
}
.marquee::before { inset-block-start: 0; }
.marquee::after  { inset-block-end: 0; }

.marquee__track {
  display: flex;
  inline-size: max-content;
  animation: marquee-slide 34s linear infinite;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding-inline-end: var(--sp-8);
}

.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  color: var(--fg);
}

/* Separador em losango entre as palavras. */
.marquee__item::after {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  background: var(--accent);
  rotate: 45deg;
}

@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* 7. EXTENSÕES DE CARTÃO ==================================================== */

/* Numeração dos cards de #sobre e #temas. */
.card__index {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent-text);
  margin-block-end: var(--sp-4);
}

/* Os 13 SVGs inline não trazem width/height nem fill/stroke — sem esta regra
   viram blocos de 300×150 com paths pretos sólidos. */
.card__icon,
.info-card__icon svg {
  inline-size: 32px;
  block-size: 32px;
  fill: none;
  stroke: var(--accent-text);   /* teal-500 daria 2,4:1 e sumiria no claro */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card__icon {
  margin-block-end: var(--sp-4);
}

.card--featured {
  border-color: var(--border-accent);
}

/* Cartões que carregam mídia no topo, sem respiro interno em volta dela. */
.card--media {
  padding: 0;
  overflow: hidden;
}


/* 7b. IMAGEM EMOLDURADA =====================================================
   A moldura em "L" do DS é decorativa e fica atrás da mídia, deslocada para
   fora — como nas peças, onde o neon encosta no canto sem cercar a foto. */

.frame-neon > .media,
.frame-neon > .venue-map {
  position: relative;
  z-index: 1;
}

.frame-neon {
  padding: 0 0 var(--sp-6) var(--sp-6);
}
.frame-neon::before {
  inline-size: 55%;
  inset-block: var(--sp-6) 0;
}

.frame-neon img {
  inline-size: 100%;
  height: auto;
}

.venue-map {
  aspect-ratio: 4 / 3;
}
.venue-map iframe {
  inline-size: 100%;
  block-size: 100%;
}


/* 8. INFO-CARD ==============================================================
   Unifica .ticket-info-card e .venue-info-card, que eram o mesmo componente
   escrito duas vezes: ícone + título + parágrafo, em duas colunas. */

.info-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.info-card__icon {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  background: var(--bg-subtle);
  border: var(--border-w) solid var(--border);
}

.info-card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin-block-end: var(--sp-2);
}

.info-card__body {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}


/* 9. PALESTRANTES =========================================================== */

/* Padrão horizontal: retrato à esquerda, identificação e bio à direita, um
   cartão por linha. Troca a leitura em paralelo (três colunas, três bios
   truncadas pelo olho) por leitura em série — cada palestrante ocupa a
   largura inteira e a bio ganha uma medida confortável em vez de uma coluna
   estreita de 370px.

   O cartão é claro sobre a superfície --sunken da seção. A referência usava
   branco sobre fundo escuro; aqui o escuro está reservado aos três pares de
   seções que abrem, provam e fecham a página, e transformar #palestrantes em
   escuro quebraria esse ritmo. A relação figura/fundo é a mesma. */
.speakers-list {
  display: grid;
  gap: var(--sp-6);
}

.speaker {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--sp-7);
  /* O retrato 4/5 é sempre mais alto que a bio. Com `align-items: start` sobrava
     um vazio de ~170px sob cada texto, e o cartão lia como inacabado. Centrado,
     a diferença de altura vira respiro simétrico em vez de buraco. */
  align-items: center;
  padding: var(--sp-6);
  background: var(--bg);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
}

.speaker__portrait {
  overflow: hidden;
  border-radius: var(--radius-xs);
}

.speaker__portrait img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.speaker__body {
  padding-block: var(--sp-2);
}

.speaker__name {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.speaker__role {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
}

/* A régua separa identificação de biografia: sem ela o nome, o cargo e o
   primeiro parágrafo viram um bloco só de texto cinza. */
.speaker__bio {
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-5);
  border-block-start: var(--border-w) solid var(--border);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-width: 68ch;
}

/* Abaixo de 720px a coluna do retrato deixa de caber ao lado do texto sem
   estrangular os dois. O retrato vira faixa no topo, com altura limitada:
   4/5 em largura total daria meia tela só de foto. */
@media (max-width: 719.98px) {
  .speaker {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    padding: var(--sp-5);
  }
  .speaker__portrait img {
    aspect-ratio: 3 / 2;
    object-position: center 22%;
  }
  .speaker__body { padding-block-start: 0; }
}


/* 10. TIMELINE ✦ ============================================================ */

.timeline {
  display: grid;
  gap: var(--sp-3);
}

.timeline__item {
  display: grid;
  grid-template-columns: minmax(7ch, auto) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-raised);
  border-inline-start: var(--rule-w) solid;
  border-image: var(--grad-brand) 1;
  border-radius: var(--radius-none);
}

.timeline__time {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.timeline__label {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}


/* 11. CHECKLIST ✦ =========================================================== */

.checklist {
  display: grid;
  gap: var(--sp-3);
}

.checklist__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.checklist__item::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  margin-block-start: 0.45em;
  background: var(--accent);
  rotate: 45deg;
}


/* 12. LOTES DE INGRESSO ===================================================== */

.lots {
  display: grid;
  gap: var(--sp-1);
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-5);
  border-block-start: var(--border-w) solid var(--border);
}

.lot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--fg-faint);
}

.lot__name   { min-width: 0; }
.lot__status { font-style: normal; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.lot__price  { font-family: var(--font-mono); font-weight: var(--fw-medium); }

/* Lote vigente — era `.active`, renomeado para a convenção BEM do DS. */
.lot--current {
  background: var(--bg-subtle);
  color: var(--fg);
}
.lot--current .lot__status { color: var(--accent); }

.tickets-info {
  margin-block-start: var(--sp-9);
  padding-block-start: var(--sp-7);
  border-block-start: var(--border-w) solid var(--border);
}

.tickets-info__note {
  max-width: 68ch;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  margin-block-end: var(--sp-6);
}


/* 13. ACORDEÃO ✦ ============================================================
   <details>/<summary> nativo. O atributo name="faq" devolve, sem JS, a
   exclusividade que o data-bs-parent do Bootstrap dava. */

.accordion {
  display: grid;
  gap: var(--sp-2);
}

.accordion__item {
  border: var(--border-w) solid var(--border);
  background: var(--bg-raised);
}

.accordion__trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5);
  cursor: pointer;
  /* sem isto, Safari e Firefox desenham um triângulo ao lado do chevron */
  list-style: none;
}
.accordion__trigger::-webkit-details-marker { display: none; }

/* O :focus-visible do DS cobre a, button, input… mas <summary> é focável sem
   tabindex e ficaria de fora. */
.accordion__trigger:focus-visible {
  outline: var(--border-w-thick) solid var(--focus);
  outline-offset: -3px;
}

.accordion__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.accordion__icon {
  flex: none;
  position: relative;
  inline-size: 14px;
  block-size: 14px;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background: var(--accent-text);
  transition: transform var(--dur-base) var(--ease-out);
}
.accordion__icon::after { rotate: 90deg; }

.accordion__item[open] .accordion__icon::after { transform: scaleX(0); }

.accordion__panel {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--fg-muted);
  line-height: var(--lh-loose);
  max-width: 76ch;
}

.accordion__item[open] .accordion__trigger { padding-block-end: var(--sp-4); }


/* 14. PATROCINADORES ======================================================== */

.tier + .tier {
  margin-block-start: var(--sp-8);
}

.tier__label {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block-end: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-text);
}
.tier__label::after {
  content: "";
  flex: 1;
  block-size: var(--border-w);
  background: var(--grad-hairline);
}

.tier__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}

.partner-card {
  display: grid;
  place-items: center;
  min-block-size: 104px;
  text-align: center;
  font-weight: var(--fw-bold);
}

.partner-card--empty {
  color: var(--fg-faint);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  border-style: dashed;
  box-shadow: none;
}
.partner-card--empty:hover {
  transform: none;
  box-shadow: none;
}

.partners-cta {
  margin-block-start: var(--sp-9);
}


/* 15. RODAPÉ ================================================================ */

.footer__main {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.footer__brand-text {
  max-width: 46ch;
  margin-block-start: var(--sp-4);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.footer__col {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

.footer__heading {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-block-end: var(--sp-2);
}

.footer__col a,
.footer__col span {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.footer__col a:hover {
  color: var(--fg);
  text-decoration: underline;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  margin-block-start: var(--sp-9);
  padding-block-start: var(--sp-5);
  border-block-start: var(--border-w) solid var(--border);
  color: var(--fg-faint);
  font-size: var(--fs-xs);
}


/* 16. MOVIMENTO REDUZIDO ====================================================
   Os tokens --dur-* do DS já zeram sozinhos, mas a animação do marquee usa
   duração literal (34s) e não é coberta por eles. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .marquee__track {
    animation: none;
    transform: none;
  }
  /* Sem animação, a faixa duplicada estouraria a largura: some com a cópia
     e deixa o conteúdo rolável na horizontal. */
  .marquee {
    overflow-x: auto;
  }
  .marquee__group[aria-hidden="true"] {
    display: none;
  }

  .nav__toggle-bars,
  .nav__toggle-bars::before,
  .nav__toggle-bars::after {
    transition: none;
  }
}


/* 17. BLOCOS DAS SEÇÕES NOVAS ================================================
   Acrescentado quando a página passou de 11 para 16 seções, ao levar para o ar
   100% do conteúdo confirmado do documento do cliente. */

/* Rótulo de dia em #programacao — selo de data + dia da semana na mesma linha.
   A estrutura é rotulada pela DATA, nunca por "Dia 2": quando a abertura de
   30/09 confirmar, ela entra como bloco irmão sem tocar no que já está no ar. */
.programacao__dia {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.programacao__dia .h4 {
  color: var(--fg-muted);
}

/* Bio do palestrante, sob o retrato. O .speaker já traz o scrim escuro com o
   nome; a bio fica fora dele, na superfície da seção. */
.speaker__bio {
  margin-block-start: var(--sp-4);
}

/* Nome oficial completo, discreto sob os dados do hero. */
.hero__official {
  margin-block-start: var(--sp-3);
  opacity: 0.75;
}

/* #chamada-final: o selo de data ancora o bloco. Mantido em --fs-3xl porque o
   contraste do gradiente sobre o texto navy é 3,3:1 — válido só em corpo
   grande. Nunca trocar por .date-badge--sm aqui. */
#chamada-final .date-badge {
  align-self: flex-start;
}

/* Costura entre #numeros e #ingressos: duas .surface-void coladas mostram a
   emenda, porque a trama do ::before reinicia no limite da seção. O filete
   neon marca o capítulo em vez de esconder o problema. */
#ingressos .rule-neon {
  max-width: 280px;
  margin-block-end: var(--sp-8);
}

/* Os botões da barra não podem quebrar: "Garantir minha vaga" em duas linhas
   estica a nav inteira. O .btn do DS permite quebra de propósito (em bloco ela
   é desejável); aqui, na barra, não é. */
.nav__actions .btn {
  white-space: nowrap;
}

/* 18. ALTERAÇÕES DO DOCUMENTO DO CLIENTE ====================================
   Aplicadas a partir do Google Doc de revisão. */

/* Logos dos realizadores. O arquivo do Canva é um lockup único com as duas
   marcas — não dá para separá-las na fonte. Ocupa a faixa inteira em vez de
   dois cartões de texto. */
.tier__grid--lockup {
  grid-template-columns: 1fr;
}
.partner-card--lockup {
  gap: var(--sp-4);
  padding-block: var(--sp-6);
}
.partner-card__logos {
  inline-size: auto;
  max-inline-size: min(100%, 420px);
  block-size: auto;
  /* Usa a variante -escuro: o lockup original é branco, feito para fundo escuro,
     e sumiria aqui. Um filter: invert() resolveria o texto mas estragaria os três
     pontos coloridos do símbolo Assespro — por isso a recoloração foi feita no
     próprio arquivo, só nos pixels acromáticos. */
}

/* Rótulo secundário do cartão de ingresso: o nome comercial do ingresso fica
   abaixo do título, que agora diz o que o ingresso É. */
.ticket-card__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-faint);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-block-start: calc(var(--sp-1) * -1);
}


/* 19. ASSINATURA DE REALIZAÇÃO NO RODAPÉ ==================================== */

/* As marcas dos realizadores viviam só em #parceiros, que é uma grade
   comercial de cotas. Institucionalmente são coisas diferentes: cota se
   compra, realização não. O rodapé é onde a assinatura é procurada. */
.footer__realizacao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-6);
  border-block-start: var(--border-w) solid var(--border);
}

.footer__realizacao-logos {
  inline-size: auto;
  max-inline-size: min(100%, 300px);
  block-size: auto;
}


/* 20. INGRESSOS: A DIFERENÇA ENTRE OS DOIS TEM DE SER ÓBVIA ================= */

/* O texto já dizia qual ingresso incluía a Rodada, mas o desenho contradizia:
   as tags comparavam eixos diferentes ("Em venda" x "Com rodada"), o cartão de
   regras exibia "12x" no lugar exato onde os outros dois mostram o preço, e
   era o único com botão de compra. Quem batia o olho lia três produtos, com o
   único CTA no que não é produto. */

/* A diferença de preço deixa de ser uma subtração mental. */
.ticket-price__delta {
  margin-block: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}
.ticket-price__delta strong { color: var(--fg); }

/* O destaque do cartão de regras: informativo, nunca com peso de preço. */
.rules-card__highlight {
  margin-block-start: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-sunken);
  border-inline-start: var(--border-w-thick) solid var(--border-accent);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}
.rules-card__highlight strong { color: var(--fg); }

/* A prova da rodada é nota de rodapé do cartão, não item da lista: sem isto
   ela encosta na checklist e lê como um quinto marcador. */
.tickets-grid .caption { margin-block-start: var(--sp-3); }

/* Os dois cartões de ingresso empurram o botão para a base, para que fiquem
   alinhados entre si mesmo com textos de alturas diferentes. */
.tickets-grid .card { display: flex; flex-direction: column; }
.tickets-grid .card .btn--block { margin-block-start: auto; }
.tickets-grid .lots { margin-block-end: var(--sp-5); }


/* 21. O NOME DO EVENTO NO <h1> ============================================== */

/* O h1 dizia "Computação avançada aplicada aos negócios" e não continha o nome
   do evento. "Tech+ Summit" só existia como imagem aria-hidden na nav e como
   legenda apagada no pé do hero — ou seja, nem o leitor que bate o olho nem o
   Google encontravam a marca no título principal da página.
   Agora o h1 tem duas vozes: a marca, que abre, e a proposta, que explica. */
.hero__title-brand {
  display: block;
  font-size: 1em;
  line-height: 0.94;
  letter-spacing: var(--ls-tight);
}

.hero__title-ano {
  color: var(--fg-muted);
  font-weight: var(--fw-semibold);
}

/* A proposta continua sendo a promessa, mas em segunda voz: se as duas
   linhas tiverem o mesmo peso, nenhuma das duas é lida. */
.hero__title-claim {
  display: block;
  margin-block-start: var(--sp-4);
  font-size: 0.42em;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: normal;
  max-width: 22ch;
}


/* 23. LOGO DE PATROCINADOR ================================================== */

/* Cartão que carrega marca de terceiro. Diferente do .partner-card--empty:
   aqui o conteúdo é a marca de outra instituição, e o manual dela manda.

   Duas coisas que o CSS NÃO pode fazer com esta logo, por regra do manual
   NIC.br/CGI.br v1.0: aplicar transparência (opacity) e aplicar contorno.
   Também não pode recolorir — nada de filter. Por isso o cartão não tem
   nenhum efeito de hover sobre a imagem. */
.partner-card--marca {
  padding: var(--sp-5);
}

.partner-card__marca {
  inline-size: auto;
  /* Mínimo digital do manual para a versão horizontal simplificada é 20px de
     altura. A folga transparente do arquivo ocupa 30% da altura em cima e
     embaixo, então 64px de caixa deixam a marca em ~41px: o dobro do mínimo. */
  block-size: clamp(52px, 7vw, 68px);
  max-inline-size: 100%;
  object-fit: contain;
}


/* 24. PARCEIROS INSTITUCIONAIS ============================================== */

/* Faixa fora da tabela de cotas. Três colunas fixas: o auto-fit de .tier__grid
   (minmax 190px) daria 4 ou 5 colunas num container de 1200px e deixaria as
   três marcas espremidas à esquerda, com buracos à direita. */
.tier__grid--institucional {
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .tier__grid--institucional { grid-template-columns: repeat(3, 1fr); }
}

/* Todos os arquivos têm a mesma tela (900×460) com a marca já centrada e
   equilibrada por área de tinta. Por isso uma única altura serve para as três
   e o alinhamento óptico vem de graça. */
.tier--institucional .partner-card__marca {
  block-size: clamp(74px, 9vw, 92px);
}


/* 18. PROGRAMAÇÃO E PALESTRANTES — atualização de 26/09/2026 =================
   A planilha final do cliente trouxe 14 nomes e 13 sessões. Dois ajustes:
   - #palestrantes ganhou um segundo grupo, compacto (.guests), para painelistas,
     mediadores e convidados sem bio. O cartão horizontal (.speaker) fica para
     quem tem palestra e bio.
   - #programacao virou lista de sessões: só os quatro marcos que o cliente
     mandou exibir têm horário; as demais mostram o tipo de sessão na mesma
     coluna, em rótulo de caixa-alta, para não se confundirem com hora. */

.speakers-group__title {
  margin-block: var(--sp-8) var(--sp-5);
  color: var(--fg-muted);
}
.speakers-group__title:first-of-type { margin-block-start: 0; }

.speaker__talk {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.speaker__talk-kind {
  display: block;
  margin-block-end: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.guests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) {
  .guests { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Largura fixa no desktop: a grade é de apoio e não pode competir com os
   cartões completos acima — nem ampliar fotos de baixa resolução. */
@media (min-width: 1080px) {
  .guests { grid-template-columns: repeat(3, minmax(0, 240px)); }
}
.guest {
  padding: var(--sp-4);
  background: var(--bg);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
}
.guest__photo {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-xs);
}
.guest__name {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.guest__part {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

#programacao .timeline { margin: 0; padding: 0; list-style: none; }
#programacao .programacao__dia { margin-block-end: var(--sp-2); }
.timeline__item--rich {
  grid-template-columns: minmax(11ch, 12ch) minmax(0, 1fr);
  align-items: baseline;
}
.timeline__item--rich .timeline__label {
  display: grid;
  gap: var(--sp-1);
}
.timeline__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.timeline__people {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.timeline__people a {
  color: var(--link, var(--accent-text));
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.timeline__kind {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.timeline__group {
  margin-block: var(--sp-4) 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--fg-muted);
}
.timeline__item--destaque .timeline__title { font-size: var(--fs-lg); }

@media (max-width: 559.98px) {
  .timeline__item--rich {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
  }
}