/* ============================================================ */
/* LEAN SUMMIT 2027 — PÁGINA COMPLETA (LIB)                    */
/* Merge das 12 seções de sections/, nesta ordem:              */
/* header · hero · números · tema 2027 · o que é ·             */
/* destaques · perfil dos participantes · patrocinador ·       */
/* experiência 2025 · vozes de 2025 · ingressos · footer       */
/*                                                             */
/* A ordem é a do Figma (frame 1:2 — Lean Summit 2027), lida   */
/* pelas posições y dos frames, que formam uma pilha contígua: */
/* hero -14 · números 1046 · tema 1940 · o que é 2384 ·        */
/* destaques 3333 · perfil 3500 · patrocinador 4173 ·          */
/* experiência 5081 · vozes 7595 · ingressos 8209 ·            */
/* footer 9413. O número no nome do arquivo é ordem de         */
/* construção, não de página.                                  */
/*                                                             */
/* Gerado a partir de sections/*.css — a fonte da verdade      */
/* continua sendo cada seção; ao editá-las, refazer o merge.   */
/* Aqui os :root de todas as seções viram um só (deduplicado)  */
/* e o body{} repetido vira uma regra única. Nenhum token      */
/* colidiu entre seções: os oito nomes repetidos trazem o      */
/* mesmo valor em todas — --summit-color-accent/-cyan/-ink/    */
/* -red/-white, --summit-font-primary, --summit-seta (a seta ↗ */
/* em data URI, nas seis seções que a usam) e, declarados nas  */
/* doze, --summit-regua/--summit-sobra, a régua de conteúdo de */
/* 1920px que impede a página de esticar em ultrawide.         */
/* ============================================================ */

:root {
  /* --- 1/12 · HEADER (faixa fixa) — Header 1:350  (1-header.css) --- */

  --summit-header-height:  82px;
  --summit-header-bg:      rgba(20, 20, 20, 0.78);   /* fundo translúcido sobre o hero */
  --summit-header-border:  rgba(255, 255, 255, 0.19);
  --summit-header-blur:    7.5px;
  --summit-color-white:    #ffffff;
  --summit-color-accent:   #00c89c;                  /* fundo do CTA */
  --summit-color-ink:      #141414;                  /* texto do CTA */
  --summit-font-primary:   'Inter', sans-serif;

  /* Motion: atraso de entrada do reveal. Quem escreve o valor por
     elemento é sections/1-header.js; aqui fica só o repouso, para
     `var(--reveal-delay)` nunca ficar órfã. As demais variáveis do
     reveal (--reveal-x/-y/-scale/-blur) nascem nas variantes. */
  --reveal-delay:  0ms;

  /* Régua de conteúdo — a lona de 1920 do Figma. Acima dela a página para de
     esticar: a sobra vira recuo igual dos dois lados, e o fundo continua
     sangrando de borda a borda. `--summit-sobra` carrega um `100%`, então só
     vale em recuo/margem/offset horizontal, onde a porcentagem lê a largura do
     bloco-pai (e, ao contrário de `vw`, não conta a barra de rolagem). */
  --summit-regua:  1920px;
  --summit-sobra:  max(0px, (100% - var(--summit-regua)) / 2);
  /* Seta "↗" do Figma (assets/icons/lean-summit-seta.svg, 7 x 7) embutida como data URI:
     é máscara CSS, e o Chrome só carrega imagem de máscara de file:// se for data:.
     Mesmo valor nas seis seções que têm a seta — o merge deduplica. */
  --summit-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7' fill='none'%3E%3Cpath d='M1.01838 6.71164L-8.86321e-05 5.69317L4.29963 1.3892H1.06951L1.07804 -8.58307e-06H6.7073V5.63351H5.30957L5.31809 2.40766L1.01838 6.71164Z' fill='%23141414'/%3E%3C/svg%3E");
  /* --- 2/12 · HERO — Frame 2 9:4  (10-hero.css) --- */

  --summit-color-cyan:     #68e2fb;                  /* destaque do título, régua, local */
  --summit-color-red:      #e8394a;                  /* moldura do card + marcas do parágrafo */
  --summit-color-body:     #d9d9d9;                  /* parágrafo de apoio */

  --summit-hero-height:    1060px;                   /* altura do frame 33:58 */
  --summit-hero-width:     1120px;                   /* container 33:62 */
  --summit-hero-col:       630px;                    /* coluna de texto 33:63 */
  --summit-hero-aside:     420px;                    /* card de data/local 33:100 */
  --summit-hero-gap:       70px;                     /* gap coluna ↔ card */
  --summit-hero-aside-bg:  rgba(17, 18, 20, 0.87);
  --summit-hero-rule:      rgba(255, 255, 255, 0.16); /* divisória interna do card */
  --summit-hero-glow:      rgba(104, 226, 251, 0.14); /* sombra sólida ciano do card */
  /* --- 3/12 · NÚMEROS DO EVENTO — Frame 1 9:3  (11-numeros.css) --- */


  /* Cores da seção */
  --summit-num-bg:            #7fe6fc;   /* fundo do retângulo 7:505 já com a trama aplicada */
  --summit-num-dot:           #6ad1e9;   /* ponto da trama: 2x2px, grade de 10px, offset 4px */
  --summit-num-ink:           #131313;   /* texto escuro — Figma traz #121213/#131313/#131314 */

  /* Tipografia (Inter) — medidas lidas dos nodes de texto */
  --summit-num-valor-size:    5.844rem;  /* 93.5px — Figma: 93,4 na fileira de cima, 93,5 na de baixo */
  --summit-num-valor-track:   -5.5px;    /* Figma: -7 / -7,05 — ver README: o Inter v4 do
                                            Google Fonts espaça os dígitos mais apertado que
                                            o Inter do Figma, e -7,05 os fazia encostar */
  --summit-num-valor-lh:      76.1px;
  --summit-num-rotulo-size:   2.5rem;    /* 40px */
  --summit-num-rotulo-track:  -2px;
  --summit-num-rotulo-lh:     41px;      /* Figma: 41 em três rótulos, 40 em "horas de conteúdo" */
  --summit-num-titulo-size:   4rem;      /* 64px */
  --summit-num-titulo-lh:     72px;

  /* Estrutura — distâncias tiradas das caixas do frame de 1920x894 */
  --summit-num-rotulo-max:    300px;     /* largura em que o rótulo quebra em duas linhas */
  --summit-num-regua-largura: 1186px;
  --summit-num-regua-altura:  3px;
  /* --- 4/12 · TEMA 2027 — Section 1:4  (2-tema.css) --- */


  --summit-tema-bg:       #ffffff;
  --summit-tema-dot:      #eaeaed;   /* ponto do padrão de fundo do frame */
  --summit-tema-red:      #e8394a;   /* traço do rótulo + trecho destacado do parágrafo */
  --summit-tema-cyan:     #68e2fb;   /* 2ª linha do título */
  --summit-tema-label:    #3c3c3c;   /* "TEMA 2027" — mais claro que a tinta do título */
  --summit-tema-body:     #000000;   /* corpo do parágrafo: preto puro, não #141414 */
  /* --- 5/12 · O QUE É O LEAN SUMMIT? — Frame 3 9:5  (2-o-que-e.css) --- */

  /* Cores */
  --summit-color-black:   #000000;   /* fim do gradiente, opaco */

  /* Tipografia */

  /* Seção "O que é" — proporções lidas do frame de 1919 x 1106.
     As medidas verticais usam `cqi` (1% da largura da seção) travado no valor
     do Figma: em 1920 batem no pixel, abaixo disso encolhem junto com a lona.
     `cqi` e não `vw` porque a barra de rolagem não entra na conta.

     A coluna vai nos 709px do Figma. Varrendo a largura, 699 a 713px é a faixa
     em que o Chrome reproduz as 21 quebras do mockup palavra por palavra — a
     medida original cai dentro dela, então aqui não houve ajuste (diferente do
     node 9:5 anterior, onde os 669px ficavam 1,3px curtos). */
  --oque-altura:      1106px;
  --oque-foto-left:   41.0631%;                  /* 788 / 1919 */
  --oque-foto-altura: 85.7143%;                  /* 948 / 1106 — a foto NÃO cobre
                                                    a seção inteira desde que o
                                                    frame cresceu para 1106 */

  /* A janela da foto mede 1131,6 x 948 na lona de 1920 (58,937% x 85,7143%).
     Como a seção tem altura FIXA de 1106px, estreitar a tela só encolhia a
     largura dessa janela: com `cover` + `object-position: left`, a foto ficava
     parada e era comida da direita para a esquerda — e a placa "Lean Summit
     2025", que termina a 75,6% da largura da imagem, era cortada já em 1800px
     (a 1920 sobra 79,6% da foto à mostra; a 1440, só 59,7%).
     A correção preserva a PROPORÇÃO da janela abaixo de 1920, e não o seu
     canto esquerdo: o mesmo recorte da lona em qualquer largura. */
  --oque-foto-largura:      1131.6px;            /* 58,937% de 1920 */
  --oque-foto-aspecto:      1.19367;             /* 1131,6 / 948 */
  --oque-foto-esquerda-min: 24cqi;               /* piso do avanço para a esquerda:
                                                    abaixo dele a foto passaria por
                                                    trás da coluna de texto inteira */
  --oque-foto-fade:   64px;                      /* dissolve o rodapé da foto —
                                                    varrido: 48/64/80/120px; a 120
                                                    a placa "2025" perde metade do
                                                    brilho, a 64 perde 16% e o
                                                    degrau já some */
  --oque-texto-left:  21.3132%;                  /* 409 / 1919 */
  --oque-texto-width: 36.94633%;                 /* 709 / 1919 */
  --oque-topo:        min(129px,   6.72225cqi);  /* topo → caixa do título */
  --oque-gap-titulo:  0.37173em;                 /* título → corpo: 34,72/93,4,
                                                    em `em` do próprio título
                                                    para não achatar no mobile */
  --oque-base:        min(130px,   6.77436cqi);  /* corpo → base da seção */
  --oque-titulo-size: min(93.4px,  4.86712cqi);
  /* --- 6/12 · DESTAQUES DO EVENTO — Section 1:82  (3-destaques-evento.css) --- */

  --summit-destaques-bg:         #68e2fb;   /* fundo chapado da faixa */
  --summit-destaques-rule:       rgba(20, 20, 20, 0.25);  /* divisória entre colunas */

  /* Medidas do frame: faixa de 167px = 42 (topo) + 60 (linha do título)
     + 5 (gap) + 18 (linha do apoio) + 42 (base). Container de 1728px
     (1920 − 96 de cada lado) dividido em 3 colunas iguais de 576,33px. */
  --summit-destaques-pad-x:      96px;      /* recuo lateral da faixa */
  --summit-destaques-item-pad:   42px 30px; /* padding de cada artigo */
  --summit-destaques-gap:        5px;       /* título → apoio */

  /* Os três títulos NÃO têm o mesmo corpo no Figma — ver README.
     Manter os nomes por coluna deixa a normalização em uma linha. */
  --summit-destaques-title-1:    2.4125rem;  /* 38.6px — node 1:85 */
  --summit-destaques-title-2:    2.5rem;     /* 40px   — node 1:92 */
  --summit-destaques-title-3:    2.43125rem; /* 38.9px — node 1:99 */
  --summit-destaques-title-lh:   60px;
  --summit-destaques-title-track: -2.4px;

  --summit-destaques-sub-size:   0.75rem;   /* 12px */
  --summit-destaques-sub-lh:     18px;
  --summit-destaques-sub-track:  0.96px;
  /* --- 7/12 · PERFIL DOS PARTICIPANTES — Frame 4 9:6  (7-perfil-participantes.css) --- */

  /* --- compartilhados com 1-header.css (mesmos valores) --- */

  /* --- paleta da seção --- */
  --summit-perfil-bg:          #ffffff;    /* node 6:102 */
  --summit-perfil-ponto:       #eaeaed;    /* textura de pontos (não vem no dump; medida no PNG) */
  --summit-perfil-trilho:      #e1e1e1;    /* anel de fundo da rosca */
  --summit-perfil-arco-cor:    #e8394a;    /* arco, rótulos de gênero e divisor */
  --summit-perfil-destaque:    #68e2fb;    /* "PERFIL" no título */

  /* --- geometria: tudo deriva do diâmetro da rosca --- */
  /* 235.0885px no Figma; encolhe para caber 5 colunas antes de quebrar a linha.
     O 212px descontado = 192 de padding lateral + 20 de folga para a barra de
     rolagem, que o 100vw não desconta em Chrome/Firefox no Windows. */
  --summit-perfil-rosca:       min(235.0885px, (100vw - 212px) / 7.123);

  --summit-perfil-tracado:     calc(var(--summit-perfil-rosca) * 0.14888); /*  35     / 235.0885 */
  --summit-perfil-coluna:      calc(var(--summit-perfil-rosca) * 1.05492); /* 248     / 235.0885 — caixa do rótulo */
  --summit-perfil-gap:         calc(var(--summit-perfil-rosca) * 0.46210); /* 108.635 / 235.0885 — fecha o passo de 356.635 */
  --summit-perfil-gap-linha:   calc(var(--summit-perfil-rosca) * 0.26000); /* respiro entre linhas quando a lista quebra */
  --summit-perfil-valor-fonte: calc(var(--summit-perfil-rosca) * 0.23395); /*  55     / 235.0885 */
  --summit-perfil-cargo-fonte: calc(var(--summit-perfil-rosca) * 0.10209); /*  24     / 235.0885 */
  /* o bloco de gênero também escala pelo diâmetro: preso a vw, ele ficava MENOR
     que os números das roscas em telas médias, invertendo a hierarquia do Figma */
  --summit-perfil-gvalor-fonte: calc(var(--summit-perfil-rosca) * 0.27224); /*  64     / 235.0885 */
  --summit-perfil-grotulo-fonte: var(--summit-perfil-cargo-fonte);          /*  24px, igual ao cargo */

  --summit-perfil-pad-x:       96px;       /* recuo lateral das demais seções da página (frames 1:82, 1:104) */
  /* --- 8/12 · PATROCINADOR OU EXPOSITOR — Frame 5 9:7  (6-patrocinador.css) --- */


  --summit-patroc-bg:      #000000;   /* fundo da seção (node 5:64) */
  --summit-patroc-red:     #e8394a;   /* "patrocinador" no título + "Lean Summit 2025" na legenda */
  --summit-patroc-cyan:    #68e2fb;   /* "expositor", os negritos do texto e a legenda */

  --summit-patroc-texto:   544px;     /* largura do bloco de texto (node 5:69) */
  --summit-patroc-video:   696px;     /* largura do vídeo (node 5:70) */
  --summit-patroc-gap:     41px;      /* 996 (vídeo) − 955 (fim do texto) */
  /* --- 9/12 · EXPERIÊNCIA 2025 — Section 1:104  (8-experiencia.css) --- */

  /* estrutura da seção (frame 1:104) */
  --summit-exp-bg:            #141414;
  --summit-exp-pad-y:         110px;         /* py do frame                       */
  --summit-exp-pad-x:         96px;          /* px do frame → container de 1728px  */
  --summit-exp-gap:           53px;          /* gap entre os quatro blocos         */
  --summit-exp-indent:        17.88%;        /* 309px de recuo da intro em 1728px  */

  /* cores */
  --summit-exp-accent:        #e8394a;       /* régua do chapéu + destaque do lead */
  --summit-exp-cyan:          #68e2fb;       /* 2ª linha do título + "aftermovie"  */
  --summit-exp-white:         #ffffff;
  --summit-exp-lead:          #bdbdbd;
  --summit-exp-note:          #999999;       /* apoio do cabeçalho da galeria      */
  --summit-exp-player-note:   #aaaaaa;       /* apoio da barra do player           */

  /* player do aftermovie (1:119) */
  --summit-exp-player-bg:     #080808;
  --summit-exp-player-border: rgba(255, 255, 255, 0.15);
  --summit-exp-player-top:    36px;          /* faixa preta acima do frame do vídeo */
  --summit-exp-poster-ratio:  1726 / 936;
  --summit-exp-play-size:     198px;         /* diâmetro do anel do play           */

  /* mosaico (1:131) */
  --summit-exp-tile-bg:       #222222;
  --summit-exp-tile-gap:      12px;
  --summit-exp-tile-pad:      18px;
  --summit-exp-tile-veil:     rgba(0, 0, 0, 0.8);
  /* --- 10/12 · VOZES DE 2025 — Section 1:168  (12-vozes-2025.css) --- */


  --summit-vozes-bg:        #ffffff;
  --summit-vozes-dot:       #eaeaed;   /* ponto do padrão de fundo do frame (igual ao Tema) */
  --summit-vozes-red:       #e8394a;   /* traço do rótulo + card 1 */
  --summit-vozes-cyan:      #68e2fb;   /* 3ª linha do título + card 2 */
  --summit-vozes-label:     #3c3c3c;   /* "VOZES DE 2025" — mais claro que a tinta do título */
  --summit-vozes-nav:       #bdbbb7;   /* círculo + triângulo do controle (nodes 6:99/6:100) */
  --summit-vozes-rule-red:  rgba(255, 255, 255, 0.31);  /* régua do rodapé no card vermelho */
  --summit-vozes-rule-cyan: rgba(20, 20, 20, 0.31);     /* idem no card ciano */
  --summit-vozes-event:     #000000;   /* "LEAN SUMMIT 2025" no card ciano: preto puro */

  --summit-vozes-card-w:    546.21px;  /* 1920 − 713,59 − 660,21 — referência: a largura
                                          real é (faixa − gap) / 2, que em 1920 dá exatamente
                                          isto (ver .summit-vozes__slide) */
  --summit-vozes-card-h:    410px;     /* referência: o conteúdo soma 409,9 em 1920 e a
                                          altura sai dele (ver .summit-vozes__card) */
  --summit-vozes-gap:       17.99px;   /* 1277,79 − (713,59 + 546,21) */
  --summit-vozes-nav-gap:   12px;      /* entre as duas setas — não está no Figma,
  /* --- 11/12 · INGRESSOS — Revisão Pissutti 64:2  (4-ingressos.css) --- */


  --summit-ingressos-bg:       #141414;   /* fundo da seção (frame 64:2 — era #111 no 1:203) */
  --summit-ingressos-red:      #e8394a;   /* régua do rótulo — mesmo vermelho de 2-tema */
  --summit-ingressos-cyan:     #68e2fb;   /* 2ª linha do título — mesmo ciano de 2-tema */
  --summit-ingressos-card:     #f5f4f0;   /* fundo do corpo do card (faixa das linhas de preço) */
  --summit-ingressos-card-alt: #ffffff;   /* fundo do topo, do rodapé e do painel aberto do card */
  --summit-ingressos-borda:    rgba(255, 255, 255, 0.16);  /* borda de 1px do card */
  --summit-ingressos-linha:    rgba(20, 20, 20, 0.14);     /* separador entre as linhas de preço */
  --summit-ingressos-sombra:   rgba(0, 0, 0, 0.14);        /* sombra interna do painel aberto */
  --summit-ingressos-tag:      #555555;   /* rótulo do topo do card */
  --summit-ingressos-sub:      #666666;   /* nota do rodapé do card */
  --summit-ingressos-de:       #777777;   /* preço riscado */
  --summit-ingressos-preto:    #000000;   /* descritivo da linha e texto do painel: preto puro */
  --summit-ingressos-nota:     #9da1a4;   /* nota de rodapé da seção */

  --summit-ingressos-max:      1298px;    /* largura do bloco de cards e da nota (2 x 629 + 40) */
  --summit-ingressos-gap:      40px;      /* vão entre os dois cards */
  --summit-ingressos-pad:      34px;      /* recuo lateral interno do card */
  --summit-ingressos-row:      126px;     /* altura mínima de cada linha de ingresso */
  --summit-ingressos-preco-zona: 200px;   /* faixa reservada ao preço à direita do rótulo:
  /* --- 12/12 · FOOTER — Footer 1:318  (9-footer.css) --- */

  --summit-footer-bg:        #1b1d1f;                     /* fill sólido do node 1:318 */
  --summit-footer-dot:       rgba(104, 226, 251, 0.10);   /* trama de pontos — ciano do
                                                             acento; alfa calibrado contra
                                                             o export do node (varredura) */
  --summit-footer-dot-tile:  10px;                        /* passo da trama, medido no export */
  --summit-footer-rule:      rgba(255, 255, 255, 0.14);   /* filete acima da barra legal */
  --summit-footer-muted:     #8f9498;                     /* títulos das colunas */
  --summit-footer-legal:     #9da1a4;                     /* barra inferior */
}


/* ============================================================ */
/* GLOBAL                                                      */
/* ============================================================ */
body {
  font-family: var(--summit-font-primary);
  margin: 0;
  padding: 0;
  background-color: var(--summit-color-ink);
}


/* ============================================================ */
/* 1/12 — HEADER (faixa fixa) — Header 1:350                   */
/* origem: sections/1-header.css                               */
/* ============================================================ */
/* SECTION */

.summit-header {
  position: fixed;              /* barra fixa sobre o hero — ver README (frame no Figma
                                    vem a y=-14, sobreposto ao topo da página) */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 34px;
  height: var(--summit-header-height);
  /* recuos do frame de 1920 + a sobra do ultrawide (ver --summit-sobra) */
  padding: 0 calc(76.8px + var(--summit-sobra)) 0 calc(178px + var(--summit-sobra));
  background: var(--summit-header-bg);
  -webkit-backdrop-filter: blur(var(--summit-header-blur));
  backdrop-filter: blur(var(--summit-header-blur));
  border-bottom: 1px solid var(--summit-header-border);
  font-family: var(--summit-font-primary);
}

.summit-header__logo {
  flex-shrink: 0;
  display: block;
  line-height: 0;
}

.summit-header__logo img {
  display: block;
  width: 158px;
  height: 52px;
}

.summit-header__nav {
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 1 0 0;
  justify-content: flex-end;    /* Figma empurra a nav à direita via padding fixo do
                                    frame de 1920px — aqui, flex-grow reproduz o mesmo
                                    resultado de forma responsiva */
}

.summit-header__link {
  font-family: var(--summit-font-primary);
  font-weight: 700;
  font-size: 0.75rem;           /* 12px */
  line-height: 18px;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--summit-color-white);
  text-decoration: none;
  white-space: nowrap;
}

.summit-header__link:hover,
.summit-header__link:focus-visible {
  color: var(--summit-color-accent);   /* acabamento — não está no Figma */
}

.summit-header__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 17.99px;
  padding: 13px 17px;
  background: var(--summit-color-accent);
  color: var(--summit-color-ink);
  text-decoration: none;
  white-space: nowrap;
}

.summit-header__cta span:first-child {
  font-family: var(--summit-font-primary);
  font-weight: 700;
  font-size: 0.694rem;          /* 11.1px */
  line-height: 18px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
}

/* Seta "↗" do Figma como máscara SVG (--summit-seta): a Inter do Google Fonts não
   traz U+2197 e o glifo caía em fonte do sistema. A cor é a do texto (currentColor). */
.summit-header__cta-icon {
  font-size: 0.75rem;           /* 12px — corpo do glifo, que dimensiona a máscara */
  display: inline-block;
  vertical-align: middle;
  width: 1em;                   /* avanço do glifo "↗" da Inter: caixa de 1em com a seta de 0,56em centrada (o desenho
                                   ocupa 6,71 dos 7 do viewBox: 6,4px de tinta a 12px — medido 6–7 nos screenshots) */
  height: 1em;
  background-color: currentColor;   /* a cor é a do texto ao redor, como era o glifo */
  -webkit-mask: var(--summit-seta) no-repeat center / 0.56em;
  mask: var(--summit-seta) no-repeat center / 0.56em;
}

.summit-header__cta:hover,
.summit-header__cta:focus-visible {
  background: #00b088;          /* acabamento — não está no Figma */
}

/* Âncora sob a faixa fixa: irmãos do header com id param abaixo dos 82px da
   barra, e não atrás dela. Vale porque as seções são filhas diretas do
   <body>, irmãs do <header> — se um dia forem aninhadas num wrapper, esta
   regra deixa de alcançá-las. */
.summit-header ~ [id] {
  scroll-margin-top: var(--summit-header-height);
}

/* Botão hambúrguer + painel mobile — sem frame no Figma para isso (pendência
   antiga do comentário abaixo), construídos do zero. Escondidos por padrão;
   só aparecem no breakpoint ≤991.98px, onde a nav de texto já some. */
.summit-header__burger {
  display: none;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.summit-header__burger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--summit-color-white);
  transition: transform 220ms ease, opacity 220ms ease;
}

.summit-header__burger[aria-expanded="true"] .summit-header__burger-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.summit-header__burger[aria-expanded="true"] .summit-header__burger-bar:nth-child(2) {
  opacity: 0;
}

.summit-header__burger[aria-expanded="true"] .summit-header__burger-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* `top: 100%` acompanha a altura real do header sozinho — inclusive quando
   ela muda de 82px fixos para `auto` no breakpoint de 575.98px abaixo. */
.summit-header__mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  flex-direction: column;
  background: var(--summit-color-ink);
  border-bottom: 1px solid var(--summit-header-border);
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms ease;
}

.summit-header__mobile-nav--aberto {
  max-height: 320px;
}

.summit-header__mobile-link {
  padding: 16px 24px;
  font-family: var(--summit-font-primary);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--summit-color-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.summit-header__mobile-link:last-child {
  border-bottom: 0;
}

.summit-header__mobile-link:hover,
.summit-header__mobile-link:focus-visible {
  color: var(--summit-color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .summit-header__burger-bar,
  .summit-header__mobile-nav {
    transition-duration: 1ms;
  }
}

/* RESPONSIVO */

@media (max-width: 1399.98px) {
  .summit-header {
    padding-left: 96px;
    padding-right: 48px;
  }
}

@media (max-width: 991.98px) {
  .summit-header {
    padding-left: 32px;
    padding-right: 24px;
    gap: 20px;
  }

  .summit-header__nav {
    display: none;
  }

  .summit-header__burger,
  .summit-header__mobile-nav {
    display: flex;
  }

  /* sem a nav de texto sobrando espaço no meio, é o CTA quem absorve o vão —
     ele e o hambúrguer (logo em seguida no DOM) ficam colados na borda
     direita, com o hambúrguer sendo o último/mais à direita dos dois */
  .summit-header__cta {
    margin-left: auto;
  }

  /* um pouco menor aqui: logo + hambúrguer + CTA dividem a mesma faixa
     estreita, sem a nav de texto para abrir espaço */
  .summit-header__cta {
    padding: 11px 14px;
    gap: 10px;
  }

  .summit-header__cta span:first-child {
    font-size: 0.625rem;          /* 10px, entre os 11.1px do desktop e os 9px do 575.98px */
  }
}

@media (max-width: 575.98px) {
  .summit-header {
    height: auto;
    padding: 12px 16px;
    gap: 12px;
  }

  .summit-header__logo img {
    width: 120px;                 /* reduzida — 158px + CTA não cabem juntos abaixo de 576px */
    height: 39.5px;
  }

  .summit-header__cta {
    padding: 10px 14px;
    gap: 8px;
  }

  .summit-header__cta span:first-child {
    font-size: 0.5625rem;         /* 9px — cabe em telas estreitas */
    letter-spacing: 0.5px;
    line-height: 12px;
    white-space: normal;          /* permite quebrar em 2 linhas */
    max-width: 108px;
  }
}


/* ============================================================ */
/* MOTION DA PÁGINA (acabamento — não está no Figma)           */
/* ============================================================ */
/* O contrato de reveal é o MESMO do LeanWeb (wwwroot/css/reveal-
   animations.css + js/components/revealAnimations.js): `.reveal` +
   variante + `.is-visible`, com o atraso em `--reveal-delay`. Mantê-lo
   idêntico faz a porta para a view Razor custar nada — lá o arquivo
   global já existe e estas regras saem fora.

   Mora no CSS do header porque o merge não tem um slot "página": a
   primeira seção da ordem é o ponto mais cedo do styles.css. Quem marca
   os elementos é sections/1-header.js, lendo `data-reveal` do HTML de
   cada seção — então sem JS (e nos previews das outras seções) nada
   fica invisível, a página só perde o movimento. */

.reveal {
  opacity: 0;
  filter: blur(var(--reveal-blur, 0px));
  transform: translate3d(var(--reveal-x, 0px), var(--reveal-y, 18px), 0) scale(var(--reveal-scale, 1));
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.65s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity, filter;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.reveal--up    { --reveal-y: 18px; }
.reveal--left  { --reveal-x: -18px; --reveal-y: 0px; }
.reveal--right { --reveal-x: 18px;  --reveal-y: 0px; }
.reveal--scale { --reveal-scale: 0.96; --reveal-y: 10px; }
.reveal--blur  { --reveal-blur: 10px; --reveal-y: 10px; }

/* Extensão desta página: a faixa fixa entra POR CIMA, não de baixo.
   (as cinco de cima são as do contrato global; esta é a sexta) */
.reveal--down  { --reveal-y: -18px; }

/* ------------------------------------------------------------ */
/* Faixa fixa que recolhe ao descer e volta ao subir             */
/* ------------------------------------------------------------ */
/* Só o transform muda — a barra continua exatamente a do Figma
   quando está no lugar. O JS não recolhe enquanto o topo da página
   estiver à vista, para o hero nunca nascer sem o cabeçalho.

   A faixa NÃO entra pelo reveal: ela é o único elemento da página com
   transform próprio permanente, e as duas transições de `transform`
   (a do .reveal e a daqui) brigariam pela mesma propriedade. */
.summit-header {
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.summit-header.summit-header--recolhido {
  transform: translate3d(0, -100%, 0);
}

/* Sublinhado que cresce no link do menu — o link já muda de cor no
   hover (regra acima); isto só acrescenta o traço. */
.summit-header__link {
  position: relative;
}

.summit-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--summit-color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.summit-header__link:hover::after,
.summit-header__link:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    transform: none;
    opacity: 1;
    filter: none;
  }

  .summit-header,
  .summit-header__link::after {
    transition-duration: 1ms;
  }

  .summit-header.summit-header--recolhido {
    transform: none;
  }
}


/* ============================================================ */
/* 2/12 — HERO — Frame 2 9:4                                   */
/* origem: sections/10-hero.css                                */
/* ============================================================ */
/* ============================================================ */
/* SECTION                                                     */
/* ============================================================ */

.summit-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--summit-hero-height);
  overflow: hidden;
  background: var(--summit-color-ink);
  font-family: var(--summit-font-primary);
}

/* Camada 1 — foto do palco (node 33:59). A caixa passa 25px abaixo da seção,
   como no Figma, e a foto é esticada (w 100% / h 123.45% / top -3.84%): o teste
   de correlação de bordas contra a referência deu 0.92 para o esticamento e
   0.03 para `cover` — ver README. */
.summit-hero__photo {
  position: absolute;
  inset: 0 0 -25px 0;
  overflow: hidden;
  pointer-events: none;
}

.summit-hero__photo img {
  position: absolute;
  left: 0;
  top: -3.84%;
  width: 100%;
  height: 123.45%;
  max-width: none;
  object-fit: fill;
}

/* Camada 2 — véu que escurece a esquerda e fecha o pé em preto (node 33:60) */
.summit-hero__veil {
  position: absolute;
  inset: 0 0 -25px 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgb(20, 20, 20) 5%, rgba(20, 20, 20, 0.898) 47%, rgba(20, 20, 20, 0.345) 82%),
    linear-gradient(180deg, rgba(20, 20, 20, 0) 60%, rgb(20, 20, 20) 100%);
}

/* Camada 3 — os dois feixes diagonais (node 33:61), ciano e vermelho */
.summit-hero__beams {
  position: absolute;
  inset: 0;
  opacity: 0.32;
  pointer-events: none;
  background-image:
    linear-gradient(113.48798531147291deg, rgba(104, 226, 251, 0) 46%, rgb(104, 226, 251) 46.15%, rgba(104, 226, 251, 0) 46.3%),
    linear-gradient(69.80478150790582deg, rgba(232, 57, 74, 0) 72%, rgb(232, 57, 74) 72.15%, rgba(232, 57, 74, 0) 72.3%);
}

.summit-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;      /* card alinhado pela base da coluna — ver README */
  gap: var(--summit-hero-gap);
  width: var(--summit-hero-width);
  max-width: 100%;
  margin: 0 auto;
}

.summit-hero__col {
  flex: 1 1 var(--summit-hero-col);
  max-width: var(--summit-hero-col);
  min-width: 0;
}

.summit-hero__logo {
  display: block;
  width: 560px;
  height: 313.625px;
}

.summit-hero__title {
  margin: 72.375px 0 0;         /* 70.375px do Figma + 2px: o Chrome assenta a linha de
                                    40px 2px mais alto que o renderizador do Figma */
  max-width: 470px;             /* força a quebra depois de "reinvenção": a linha 1
                                    mede 440px e "…do" chegaria a 503px */
  font-family: var(--summit-font-primary);
  font-weight: 400;
  font-size: 2.5rem;            /* 40px */
  line-height: 42px;
  letter-spacing: -1.4px;
  text-transform: uppercase;
  color: var(--summit-color-white);
}

.summit-hero__title-accent {
  color: var(--summit-color-cyan);
}

.summit-hero__lead {
  margin: 13.795px 0 0;
  width: 634px;                 /* as três linhas do Figma fecham em 627/628/548px de
                                    tinta numa coluna de 630. O Inter do Google Fonts
                                    desenha ~0,6% mais largo e pede 631,97px para as
                                    linhas 1 e 2 — a 630px o "fazer." desce para a
                                    linha 2 e as três quebras saem do lugar. 634px dá
                                    2px de folga sobre o mínimo e sobra 4px da coluna,
                                    para dentro do vão de 70px até o card. */
  max-width: calc(100% + 4px);  /* trava a sobra em 4px quando a coluna encolhe */
  font-family: var(--summit-font-primary);
  font-weight: 400;
  font-size: 0.99375rem;        /* 15.9px */
  line-height: 26.35px;
  color: var(--summit-color-body);
}

.summit-hero__lead-mark {
  color: var(--summit-color-red);
}

.summit-hero__actions {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 17.5px;           /* põe o topo do CTA em 580,32px na coluna (Figma 580,31).
                                    Era 45.5px quando o parágrafo tinha 2 linhas; a terceira
                                    linha do texto novo comeu 26,35px + os 1,68px que a
                                    medição anterior carregava. */
}

.summit-hero__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 18px;
  padding: 17px 20px;
  background: var(--summit-color-accent);
  color: var(--summit-color-ink);
  text-decoration: none;
  white-space: nowrap;
}

.summit-hero__cta span:first-child {
  font-weight: 700;
  font-size: 0.69375rem;        /* 11.1px */
  line-height: 18px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
}

/* Seta "↗" do Figma como máscara SVG (--summit-seta): a Inter do Google Fonts não
   traz U+2197 e o glifo caía em fonte do sistema. A cor é a do texto (currentColor). */
.summit-hero__cta-icon {
  font-size: 0.75rem;           /* 12px — corpo do glifo, que dimensiona a máscara */
  display: inline-block;
  vertical-align: middle;
  width: 1em;                   /* avanço do glifo "↗" da Inter: caixa de 1em com a seta de 0,56em centrada (o desenho
                                   ocupa 6,71 dos 7 do viewBox: 6,4px de tinta a 12px — medido 6–7 nos screenshots) */
  height: 1em;
  background-color: currentColor;   /* a cor é a do texto ao redor, como era o glifo */
  -webkit-mask: var(--summit-seta) no-repeat center / 0.56em;
  mask: var(--summit-seta) no-repeat center / 0.56em;
}

.summit-hero__cta:hover,
.summit-hero__cta:focus-visible {
  background: #00b088;          /* acabamento — não está no Figma */
}

.summit-hero__replay {
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--summit-color-white);
  color: var(--summit-color-white);
  font-weight: 700;
  font-size: 0.75rem;           /* 12px */
  line-height: 18px;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.summit-hero__replay:hover,
.summit-hero__replay:focus-visible {
  color: var(--summit-color-cyan);      /* acabamento — não está no Figma */
  border-bottom-color: var(--summit-color-cyan);
}

/* Card de data e local (node 33:100) */

.summit-hero__aside {
  flex: 0 0 var(--summit-hero-aside);
  box-sizing: border-box;
  width: var(--summit-hero-aside);
  min-height: 174px;            /* altura do frame; a sobra de 2px no pé é respiro */
  margin-bottom: 4.31px;        /* no Figma o card fecha na base do frame de 628px, que o
                                    conteúdo da coluna estoura em 4.31px (o botão passa da
                                    borda). Sem isso o card desce 4px. */
  padding: 28px;
  border: 1px solid var(--summit-color-red);
  border-top-width: 5px;
  background: var(--summit-hero-aside-bg);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 14px 14px 0 0 var(--summit-hero-glow);
}

.summit-hero__save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;                    /* medido: a régua + rótulo + régua fecham 326px */
  margin: 0;
  height: 20px;
}

.summit-hero__save-rule {
  flex: 0 0 46px;
  height: 4px;
  background: var(--summit-color-red);
}

.summit-hero__save-label {
  font-weight: 700;
  font-size: 1.25rem;           /* 20px */
  line-height: 20px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--summit-color-white);
  white-space: nowrap;
}

.summit-hero__date {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;                    /* no Figma o gap é 5px + o espaço tipográfico que cada
                                    nó de texto carrega nas pontas; 12px reproduz o
                                    intervalo medido de 19–20px entre os traços */
  margin: 13px 0 0;
  height: 27px;
  font-weight: 700;
  font-size: 1.6875rem;         /* 27px */
  line-height: 27px;
  letter-spacing: 2.7px;
  text-transform: uppercase;
  color: var(--summit-color-white);
  white-space: nowrap;
}

.summit-hero__date-sep {
  font-size: 1.55rem;           /* 24.8px */
  line-height: 27px;
  color: var(--summit-color-cyan);
}

.summit-hero__place {
  margin: 19px 0 0;
  padding-top: 17.07px;         /* 15.07px do Figma + 2px de assentamento da linha */
  border-top: 1px solid var(--summit-hero-rule);
  font-weight: 700;
  font-size: 1.25rem;           /* 20px */
  line-height: 14.85px;
  letter-spacing: 1.43px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;          /* a linha mede 362.5px num container de 362px: sem isso
                                    ela quebra em duas e o card cresce 15px */
  color: var(--summit-color-cyan);
}

/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
/* Não há frame mobile no Figma — os breakpoints abaixo são do projeto e
   preservam a hierarquia do desktop reduzindo tipografia e empilhando. */

@media (max-width: 1399.98px) {
  .summit-hero__inner {
    width: calc(100% - 96px);   /* calc + margin auto: com `margin: 0 48px` o bloco
                                    encostaria à esquerda entre 1216px e 1400px, onde o
                                    max-width de 1120px ainda manda */
    gap: 48px;
  }
}

@media (max-width: 1247.98px) {
  .summit-hero {
    min-height: 940px;
  }

  .summit-hero__logo {
    width: 100%;
    max-width: 560px;
    height: auto;
  }

  .summit-hero__title {
    margin-top: 56px;
  }
}

@media (max-width: 991.98px) {
  /* Empilha: o card de data passa a ficar abaixo do bloco de texto. */
  .summit-hero {
    min-height: 0;
    align-items: stretch;
    padding: 150px 0 80px;      /* 150px = header fixo (82px) + respiro */
  }

  .summit-hero__inner {
    flex-direction: column;
    align-items: stretch;
    width: calc(100% - 64px);
    gap: 44px;
  }

  .summit-hero__col {
    flex: 1 1 auto;
    max-width: none;
  }

  .summit-hero__logo {
    max-width: 460px;
  }

  .summit-hero__title {
    max-width: none;
  }

  .summit-hero__lead {
    width: auto;                /* desfaz os 634px do desktop: empilhado a coluna é
                                    fluida e a largura fixa estouraria telas estreitas */
    max-width: 620px;
  }

  .summit-hero__aside {
    flex: 0 0 auto;
    width: 100%;
    max-width: var(--summit-hero-aside);
    margin-bottom: 0;           /* empilhado, o ajuste de base do desktop não se aplica */
  }
}

@media (max-width: 767.98px) {
  .summit-hero {
    padding: 130px 0 64px;
  }

  .summit-hero__inner {
    width: calc(100% - 48px);
    gap: 36px;
  }

  .summit-hero__logo {
    max-width: 380px;
  }

  .summit-hero__title {
    margin-top: 40px;
    font-size: 2rem;            /* 32px */
    line-height: 34px;
    letter-spacing: -1px;
  }

  .summit-hero__lead {
    margin-top: 16px;
  }

  .summit-hero__actions {
    margin-top: 32px;
    gap: 24px;
  }
}

@media (max-width: 575.98px) {
  .summit-hero {
    padding: 118px 0 56px;
  }

  .summit-hero__inner {
    width: calc(100% - 32px);
  }

  .summit-hero__logo {
    max-width: 280px;
  }

  .summit-hero__title {
    font-size: 1.625rem;        /* 26px */
    line-height: 28px;
    letter-spacing: -0.6px;
  }

  .summit-hero__lead {
    font-size: 0.9375rem;       /* 15px */
    line-height: 24px;
  }

  /* Abaixo de 576px os dois botões não cabem lado a lado (250px + 30px + 109px). */
  .summit-hero__actions {
    flex-wrap: wrap;
    gap: 20px;
  }

  .summit-hero__aside {
    padding: 20px;
    min-height: 0;
  }

  /* O bloco "28 e 29 | set | 2027" mede 326px no desktop e estouraria a tela
     de 320px dentro do card — tipografia e réguas reduzem juntas. */
  .summit-hero__save {
    gap: 10px;
  }

  .summit-hero__save-rule {
    flex: 0 0 28px;
  }

  .summit-hero__save-label {
    font-size: 0.875rem;        /* 14px */
    letter-spacing: 2.8px;
  }

  .summit-hero__date {
    gap: 10px;
    height: auto;
    font-size: 1.25rem;         /* 20px */
    line-height: 22px;
    letter-spacing: 1.8px;
  }

  .summit-hero__date-sep {
    font-size: 1.15rem;         /* 18.4px */
    line-height: 22px;
  }

  .summit-hero__place {
    margin-top: 16px;
    padding-top: 14px;
    font-size: 0.8125rem;       /* 13px */
    line-height: 18px;
    letter-spacing: 0.9px;
  }
}


/* ============================================================ */
/* MOTION (acabamento — não está no Figma)                      */
/* ============================================================ */

/* A foto ganha transform pelo JS (parallax): `will-change` evita o
   repintar da camada inteira a cada quadro. */
.summit-hero__photo img {
  will-change: transform;
}

/* Os dois feixes diagonais respiram devagar. Não é reveal: eles já têm
   `opacity: .32` própria, e um `.reveal` (opacity: 0) brigaria com ela —
   por isso o movimento aqui é só de transform, em laço contínuo. */
@keyframes summit-hero-feixes {
  from { transform: translate3d(-1.2%, 0, 0); }
  to   { transform: translate3d(1.2%, 0, 0); }
}

.summit-hero__beams {
  animation: summit-hero-feixes 14s ease-in-out infinite alternate;
  will-change: transform;   /* mesma promoção de camada já dada à foto do hero */
}

/* A seta do "Veja como foi em 2025" chama a rolagem */
@keyframes summit-hero-seta {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

.summit-hero__replay span:last-child {
  display: inline-block;
  animation: summit-hero-seta 1.8s ease-in-out infinite;
}

/* O CTA sobe um fio no hover — o mesmo acabamento dos outros botões
   da página. */
.summit-hero__cta,
.summit-hero__replay {
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.summit-hero__cta:hover,
.summit-hero__replay:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .summit-hero__beams,
  .summit-hero__replay span:last-child {
    animation: none;
  }

  .summit-hero__cta,
  .summit-hero__replay {
    transition-duration: 1ms;
  }

  .summit-hero__cta:hover,
  .summit-hero__replay:hover {
    transform: none;
  }
}


/* ============================================================ */
/* 3/12 — NÚMEROS DO EVENTO — Frame 1 9:3                      */
/* origem: sections/11-numeros.css                             */
/* ============================================================ */
/* ============================================================ */
/* SECTION: NÚMEROS DO EVENTO                                  */
/* ============================================================ */
.summit-numeros {
  display: flex;                /* flex column evita colapso de margem entre os blocos —
                                    toda a régua vertical é somada, não colapsada */
  flex-direction: column;
  align-items: center;
  padding: 80px calc(24px + var(--summit-sobra)) 150px;
                                 /* 80px até a caixa do número; 150px fecha os 894px do frame.
                                    O recuo lateral de 24px é acabamento — o Figma não tem
                                    padding lateral porque o conteúdo é centralizado.
                                    A sobra segura os blocos na régua de 1920 no ultrawide. */
  background-color: var(--summit-num-bg);
  background-image: radial-gradient(circle at 1px 1px,
                                    var(--summit-num-dot) 1px,
                                    transparent 1px);
  background-size: 10px 10px;
  background-position: 4px 4px;
  font-family: var(--summit-font-primary);
  color: var(--summit-num-ink);
  text-align: center;
}

.summit-numeros__bloco {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}


/* --- Fileiras de estatísticas --- */

.summit-numeros__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;      /* alinha a primeira linha dos rótulos entre itens de
                                    altura diferente ("Palestrantes" tem uma linha só) */
  margin: 0;
  padding: 0;
  list-style: none;
}

.summit-numeros__lista--dupla {
  gap: 78px;                    /* rende os 88px de tinta a tinta medidos no frame */
}

.summit-numeros__lista--quadrupla {
  margin-top: 58px;
  gap: 51px;                    /* rende os ~56px de tinta a tinta medidos no frame
                                    (Figma: 54 / 58 / 55 entre itens — um valor só) */
}

.summit-numeros__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.summit-numeros__valor {
  display: block;               /* sem isto o span herda o strut de 16px do pai e
                                    a caixa da linha deixa de valer os 76,1px do Figma */
  font-size: var(--summit-num-valor-size);
  font-weight: 800;
  line-height: var(--summit-num-valor-lh);
  letter-spacing: var(--summit-num-valor-track);
  text-transform: uppercase;
  color: var(--summit-color-white);
  white-space: nowrap;
  margin-right: calc(-1 * var(--summit-num-valor-track));  /* devolve o espaço que o tracking
                                    negativo tira DEPOIS do último dígito — sem isto a caixa
                                    encolhe e a centralização joga a tinta para a direita */
}

.summit-numeros__rotulo {
  display: block;
  width: min-content;           /* reproduz a quebra em duas linhas do Figma sem <br>:
                                    a caixa encolhe até a palavra mais longa do rótulo */
  max-width: var(--summit-num-rotulo-max);
  margin-top: 12px;             /* fileira de cima: 21,9px da base do número ao topo do rótulo */
  margin-right: calc(-1 * var(--summit-num-rotulo-track));  /* mesma compensação do número */
  font-size: var(--summit-num-rotulo-size);
  font-weight: 400;
  line-height: var(--summit-num-rotulo-lh);
  letter-spacing: var(--summit-num-rotulo-track);
  text-transform: uppercase;
}

.summit-numeros__lista--quadrupla .summit-numeros__rotulo {
  margin-top: 16px;             /* fileira de baixo: 27,5px de tinta a tinta */
}


/* --- Títulos --- */

.summit-numeros__titulo {
  margin: 0;
  font-size: var(--summit-num-titulo-size);
  font-weight: 800;
  line-height: var(--summit-num-titulo-lh);
  text-transform: uppercase;
}

.summit-numeros__titulo--rede {
  margin-top: 65px;
  letter-spacing: 0;            /* o único texto do frame sem tracking negativo */
}

.summit-numeros__titulo--conteudos {
  margin-top: 41px;
  letter-spacing: -2px;
  margin-right: 2px;            /* mesma compensação de tracking do número */
}


/* --- Régua --- */

.summit-numeros__regua {
  width: min(var(--summit-num-regua-largura), 100%);
  height: var(--summit-num-regua-altura);
  margin: 50px 0 0;
  border: 0;
  background: var(--summit-color-white);
  opacity: 1;                   /* Bootstrap zera para .25 no <hr> */
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
/* Não há frame mobile no Figma — os degraus abaixo são acabamento
   da conversão, calculados para não estourar a largura da tela. */

/* O título mais longo ("Diversidade de conteúdos e casos") mede 1187px a 64px:
   é ele que dita cada degrau, para nunca quebrar em duas linhas antes do celular. */

@media (max-width: 1399.98px) {
  :root {
    --summit-num-valor-size:  5rem;      /* 80px */
    --summit-num-valor-track: -4.71px;   /* mantém a proporção -5,5/93,5 */
    --summit-num-valor-lh:    65px;
    --summit-num-titulo-size: 3.5rem;    /* 56px — 1039px de tinta, cabe até ~1090px */
    --summit-num-titulo-lh:   64px;
  }

  .summit-numeros {
    padding: 64px 24px 120px;
  }

  .summit-numeros__lista--dupla     { gap: 64px; }
  .summit-numeros__lista--quadrupla { gap: 40px; margin-top: 48px; }

  .summit-numeros__titulo--rede      { margin-top: 52px; }
  .summit-numeros__regua             { margin-top: 40px; }
  .summit-numeros__titulo--conteudos { margin-top: 32px; letter-spacing: -1.75px; }
}

@media (max-width: 1199.98px) {
  :root {
    --summit-num-valor-size:  4.5rem;    /* 72px */
    --summit-num-valor-track: -4.24px;
    --summit-num-valor-lh:    59px;
    --summit-num-titulo-size: 3rem;      /* 48px — 890px de tinta, cabe até ~940px */
    --summit-num-titulo-lh:   56px;
    /* O rótulo encolhe aqui, e não em 991.98, para os quatro itens continuarem
       numa fileira só até 992px: 785px de itens + 120px de vãos + 48 de recuo */
    --summit-num-rotulo-size:  2rem;     /* 32px */
    --summit-num-rotulo-track: -1.6px;
    --summit-num-rotulo-lh:    34px;
    --summit-num-rotulo-max:   240px;
  }

  .summit-numeros__titulo--conteudos { letter-spacing: -1.5px; }
}

@media (max-width: 991.98px) {
  :root {
    --summit-num-titulo-size:  2.25rem;  /* 36px — 668px de tinta, cabe até ~716px */
    --summit-num-titulo-lh:    42px;
  }

  .summit-numeros__lista--quadrupla { gap: 32px 40px; }
  .summit-numeros__titulo--conteudos { letter-spacing: -1.125px; }

  /* Quatro colunas deixam de caber e a fileira quebraria em 3+1: trava cada item
     em metade da fileira para virar 2x2 (o vão de coluna aqui é 40px) */
  .summit-numeros__lista--quadrupla .summit-numeros__item {
    flex: 0 0 calc(50% - 20px);
  }
}

@media (max-width: 767.98px) {
  :root {
    --summit-num-valor-size:  3.5rem;    /* 56px */
    --summit-num-valor-track: -3.3px;    /* proporcional a -5,5/93,5 */
    --summit-num-valor-lh:    46px;
    --summit-num-titulo-size: 1.75rem;   /* 28px — 519px de tinta, cabe até ~559px */
    --summit-num-titulo-lh:   34px;
  }

  .summit-numeros {
    padding: 48px 20px 72px;
  }

}

@media (max-width: 575.98px) {
  :root {
    --summit-num-valor-size:   2.75rem;  /* 44px */
    --summit-num-valor-track:  -2.59px;  /* proporcional a -5,5/93,5 */
    --summit-num-valor-lh:     38px;
    --summit-num-rotulo-size:  1.125rem; /* 18px */
    --summit-num-rotulo-track: -0.5px;
    --summit-num-rotulo-lh:    22px;
    --summit-num-rotulo-max:   160px;
    --summit-num-titulo-size:  1.5rem;   /* 24px */
    --summit-num-titulo-lh:    30px;
  }

  .summit-numeros {
    padding: 40px 16px 56px;
  }

  .summit-numeros__lista--dupla     { gap: 32px; }
  .summit-numeros__lista--quadrupla { gap: 24px; margin-top: 32px; }

  /* metade da fileira, agora com o vão de 24px */
  .summit-numeros__lista--quadrupla .summit-numeros__item {
    flex: 0 0 calc(50% - 12px);
  }

  .summit-numeros__rotulo           { margin-top: 8px; }
  .summit-numeros__lista--quadrupla .summit-numeros__rotulo { margin-top: 10px; }

  .summit-numeros__titulo--rede      { margin-top: 32px; }
  .summit-numeros__regua             { margin-top: 28px; }
  .summit-numeros__titulo--conteudos { margin-top: 24px; letter-spacing: -0.5px; }
}


/* ============================================================ */
/* MOTION (acabamento — não está no Figma)                      */
/* ============================================================ */

/* A régua entra crescendo do centro em vez de subir: `--reveal-scale`
   é o mesmo token que a variante `.reveal--scale` usa, só que mais
   fundo. A altura de 1px torna a escala vertical imperceptível — o que
   se vê é o traço se abrindo. */
.summit-numeros__regua {
  --reveal-scale: 0.4;
  --reveal-y: 0px;
}

/* Caixa dos dígitos que o contador escreve. Não tem estilo próprio: é
   um <span> transparente dentro do .summit-numeros__valor, existindo só
   para o "+" do design ficar fora da contagem. */
.summit-numeros__count {
  font: inherit;
  letter-spacing: inherit;
}


/* ============================================================ */
/* 4/12 — TEMA 2027 — Section 1:4                              */
/* origem: sections/2-tema.css                                 */
/* ============================================================ */
/* SECTION */

.summit-tema {
  padding: 64px 0 48px;              /* o topo do conteúdo agora é o parágrafo (y=64),
                                        não mais o rótulo; base = 664 − 616 = 48 */
  background-color: var(--summit-tema-bg);
  /* Malha de pontos: 2px a cada 10px, fase 4px nos dois eixos — medida no export
     do node 33:47. O dump do Figma achata o fill do frame em "bg-white"; o render
     do próprio node traz a malha, e ela não vem como imagem nem SVG. Ver README. */
  background-image: radial-gradient(circle at 5px 5px, var(--summit-tema-dot) 1.05px, transparent 1.05px);
  background-size: 10px 10px;
  font-family: var(--summit-font-primary);
}

.summit-tema__inner {
  display: flex;
  align-items: flex-start;
  padding: 0 calc(48px + var(--summit-sobra)) 0 calc(404px + var(--summit-sobra));
                                     /* 404 = x do Container 33:48 na lona de 1920;
                                        a sobra centra essa lona no ultrawide */
}

/* Coluna esquerda — rótulo + título (Container 33:48, 698px) */

.summit-tema__intro {
  flex: 0 1 698px;
  min-width: 0;
  margin-top: 27px;                  /* rótulo em y=91; o parágrafo, em y=64 */
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.summit-tema__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 700;
  font-size: 0.675rem;               /* 10.8px */
  line-height: 11px;
  letter-spacing: 1.98px;
  text-transform: uppercase;
  color: var(--summit-tema-label);
}

.summit-tema__eyebrow::before {      /* "Background" 33:50 — retângulo sem raio */
  content: "";
  flex-shrink: 0;
  width: 35px;
  height: 3px;
  background: var(--summit-tema-red);
}

.summit-tema__title {
  margin: 0;
  font-weight: 400;                  /* Inter Regular: haste de 8px medida em 93,4px */
  font-size: 5.8375rem;              /* 93.4px */
  line-height: 76.14px;
  letter-spacing: -7.05px;
  text-transform: uppercase;
  color: var(--summit-color-ink);
}

.summit-tema__line {
  display: block;                    /* as três quebras são do design, não do fluxo:
                                        "reinvenção" sozinha na linha é o que permite
                                        colori-la — não são um <div> por linha do dump */
}

.summit-tema__line--accent {
  color: var(--summit-tema-cyan);
}

/* Coluna direita — parágrafo + CTA (nodes 33:57 e 33:54) */

.summit-tema__aside {
  /* No Figma esta coluna tem 381px. A linha "mais existir, simplificar o excesso
     de complexidade," preenche esses 381px EXATOS lá; como o Chrome com o Inter do
     Google Fonts desenha ~0,3% mais largo, em 381px ela transborda e antecipa a
     quebra, cascateando as três últimas linhas do 2º parágrafo. Medindo largura a
     largura, as 16 linhas da referência voltam a bater de 382px a 388px — um platô
     de 7px, não um encaixe no fio. 384px é o meio dele. Reverter = trocar por 381px
     e aceitar duas linhas quebrando diferente. */
  flex: 0 1 384px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;           /* o CTA tem a largura do próprio conteúdo (202px) */
  gap: 15px;                         /* 581 (topo do link) − 566 (base do parágrafo) */
}

.summit-tema__text {
  font-weight: 500;                  /* Inter Medium é o peso-base do parágrafo */
  font-size: 0.94375rem;             /* 15.1px */
  line-height: 26.4px;
  color: var(--summit-tema-body);
}

.summit-tema__text p {
  margin: 0;
}

.summit-tema__text p + p {
  margin-top: 26.4px;                /* no Figma os quatro parágrafos são separados
                                        por uma linha vazia dentro do mesmo bloco */
}

.summit-tema__text strong {
  font-weight: 700;
}

.summit-tema__lead {                 /* 1º parágrafo: Bold inteiro */
  font-weight: 700;
}

.summit-tema__ink {                  /* 2º parágrafo: #141414, e não o #000000 dos
                                        demais — o Figma troca a tinta só neste, e a
                                        diferença é medível no export (ver README) */
  color: var(--summit-color-ink);
}

.summit-tema__closing {              /* fecho: Bold em vermelho */
  font-weight: 700;
  color: var(--summit-tema-red);
}

.summit-tema__highlight {
  color: var(--summit-tema-red);
}

.summit-tema__cta {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--summit-color-ink);
  color: var(--summit-color-ink);
  text-decoration: none;
  white-space: nowrap;
}

.summit-tema__cta span:first-child {
  font-weight: 700;
  font-size: 0.694rem;               /* 11.1px */
  line-height: 18px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
}

/* Seta "↗" do Figma como máscara SVG (--summit-seta): a Inter do Google Fonts não
   traz U+2197 e o glifo caía em fonte do sistema. A cor é a do texto (currentColor). */
.summit-tema__cta-icon {
  font-size: 0.75rem;                /* 12px — corpo do glifo, que dimensiona a máscara */
  display: inline-block;
  vertical-align: middle;
  width: 1em;                   /* avanço do glifo "↗" da Inter: caixa de 1em com a seta de 0,56em centrada (o desenho
                                   ocupa 6,71 dos 7 do viewBox: 6,4px de tinta a 12px — medido 6–7 nos screenshots) */
  height: 1em;
  background-color: currentColor;   /* a cor é a do texto ao redor, como era o glifo */
  -webkit-mask: var(--summit-seta) no-repeat center / 0.56em;
  mask: var(--summit-seta) no-repeat center / 0.56em;
}

.summit-tema__cta:hover,
.summit-tema__cta:focus-visible {     /* acabamento — não está no Figma */
  color: var(--summit-tema-red);
  border-bottom-color: var(--summit-tema-red);
}

/* RESPONSIVO */

/* Não há frame mobile no Figma — daqui para baixo é decisão da conversão (README).
   A lona de referência é 1920; abaixo dela o recuo de 404px e o título de 93,4px
   deixam de caber. O título encolhe mantendo as proporções do Figma
   (line-height = 0,8152 × tamanho; tracking = −0,0755 × tamanho). */

@media (max-width: 1531.98px) {
  /* 404 + 698 + 381 + 48 = 1531. Abaixo disso as duas colunas passam a encolher
     e, em 1400px, a linha "DO TRABALHO" (592px renderizados) chega perto da borda.
     Soltar o recuo aqui devolve as medidas exatas do Figma até ~1224px. */
  .summit-tema__inner {
    padding-left: 96px;              /* mesmo recuo que o Header adota fora da lona de 1920 */
  }
}

@media (max-width: 1399.98px) {
  .summit-tema {
    padding: 56px 0 48px;
  }
}

@media (max-width: 1247.98px) {
  .summit-tema__inner {
    padding-left: 48px;
  }

  .summit-tema__title {
    /* Com 93,4px a linha "DO TRABALHO" mede 592px e quebraria assim que a coluna
       caísse abaixo disso — o que acontece a partir de ~1010px. Em 80px ela mede
       507px e as três linhas do design sobrevivem até o empilhamento. */
    font-size: 5rem;                 /* 80px */
    line-height: 65.2px;
    letter-spacing: -6.04px;
  }
}

@media (max-width: 991.98px) {
  .summit-tema__inner {
    flex-direction: column;          /* 698 + 381 lado a lado não cabem mais */
    padding-left: 32px;
    padding-right: 32px;
  }

  .summit-tema__intro,
  .summit-tema__aside {
    flex: 0 1 auto;
    width: 100%;
  }

  .summit-tema__intro {
    max-width: 698px;
  }

  .summit-tema__intro {
    margin-top: 0;                   /* empilhado, o parágrafo deixa de subir acima
                                        do rótulo — o offset de 27px perde o sentido */
  }

  .summit-tema__aside {
    max-width: 520px;                /* 381px empilhado fica estreito demais e 698px
                                        daria ~90 caracteres por linha */
    margin-top: 48px;
  }

  .summit-tema__title {
    font-size: 4.25rem;              /* 68px */
    line-height: 55.4px;
    letter-spacing: -5.13px;
  }
}

@media (max-width: 767.98px) {
  .summit-tema {
    padding: 48px 0 40px;
  }

  .summit-tema__title {
    font-size: 3.5rem;               /* 56px */
    line-height: 45.6px;
    letter-spacing: -4.23px;
  }
}

@media (max-width: 575.98px) {
  .summit-tema {
    padding: 40px 0 32px;
  }

  .summit-tema__inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .summit-tema__intro {
    gap: 16px;
  }

  .summit-tema__title {
    font-size: 2.5rem;               /* 40px — "DO TRABALHO" mede 253px e ainda cabe
                                        nos 288px úteis de uma tela de 320px */
    line-height: 32.6px;
    letter-spacing: -3.02px;
  }

  .summit-tema__aside {
    margin-top: 32px;
  }
}


/* ============================================================ */
/* MOTION (acabamento — não está no Figma)                      */
/* ============================================================ */

.summit-tema__cta {
  transition: background 200ms ease, color 200ms ease,
              transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.summit-tema__cta:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .summit-tema__cta {
    transition-duration: 1ms;
  }

  .summit-tema__cta:hover {
    transform: none;
  }
}


/* ============================================================ */
/* 5/12 — O QUE É O LEAN SUMMIT? — Frame 3 9:5                 */
/* origem: sections/2-o-que-e.css                              */
/* ============================================================ */
/* ============================================================ */
/* SECTION: O QUE É O LEAN SUMMIT?                             */
/* ============================================================ */
/* O frame do Figma NÃO tem preenchimento: onde não há foto, o que aparece é o
   fundo da página. No arquivo, a lona está em #141414 — o mesmo `--summit-color-ink`
   que a `merge.json` usa no `body`. Por isso a seção pinta ink, não preto: preto
   deixaria esta seção até 8/255 mais escura que as vizinhas na faixa em que o
   gradiente ainda não fechou. O preto puro segue no fim do gradiente. */
.summit-oque {
  position: relative;
  overflow: hidden;
  container-type: inline-size;   /* referência das unidades cqi acima */
  min-height: var(--oque-altura);
  background-color: var(--summit-color-ink);
  font-family: var(--summit-font-primary);
}


/* --- Camadas de fundo --- */
.summit-oque__fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Desde o node 33:518 a foto tem 948px num frame de 1106 — ela cobre 85,7% da
   seção e para. No Figma isso vira um corte horizontal seco; aqui o rodapé
   dissolve no fundo num degradê de 120px. É acabamento, não está no Figma. */
.summit-oque__foto {
  position: absolute;
  top: 0;
  right: 0;

  /* Duas travas, na ordem em que entram conforme a tela estreita:
     1. `min()` — até 1920 vale a posição do Figma; abaixo dela a foto ganha a
        largura que perdeu deslizando para a esquerda (`100cqi - largura`), o
        que mantém a janela em 1131,6px e o recorte intacto. Acima de 1920 o
        termo do Figma é o menor e a seção fica idêntica à de hoje.
     2. `max()` — quando o deslize chega ao piso (por volta de 1489px), a foto
        para de andar e passa a ceder ALTURA, sempre na mesma proporção.
     A altura sai da largura resultante, então o recorte nunca muda. */
  --foto-left: max(var(--oque-foto-esquerda-min),
                   min(var(--oque-foto-left),
                       calc(100cqi - var(--oque-foto-largura))));
  left: var(--foto-left);
  height: min(var(--oque-foto-altura),
              calc((100cqi - var(--foto-left)) / var(--oque-foto-aspecto)));

  overflow: hidden;
  /* O degradê do rodapé era feito com mask-image, mas máscara CSS sobre um
     elemento com filho animado (o Ken Burns da <img> logo abaixo) força um
     caminho de composição mais lento em vários navegadores/GPUs — é a causa
     mais provável do soluço percebido nesta seção. Trocado por uma camada
     de overlay comum (.summit-oque__foto-fade), que é um blend alpha barato
     e dá o mesmo resultado visual, já que o overflow:hidden aqui em cima
     continua cuidando do recorte sozinho. */
}

/* Foto RECORTADA, nunca esticada: no Figma ela entra com ~126% da largura do
   contêiner e 100% da altura, ancorada à esquerda — que é exatamente o que
   `cover` + `object-position: left` faz na proporção da seção.
   O Figma ainda desloca a imagem 0,79px para dentro (`left: 0.07%`), deixando
   uma fresta transparente nessa borda; aqui ela fica colada. Reproduzir a fresta
   exigiria `object-position` negativo — é artefato de montagem, não desenho. */
.summit-oque__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.summit-oque__foto-veu {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
}

/* Substitui a antiga mask-image do rodapé da foto — mesmo degradê, agora
   como overlay comum em vez de máscara (ver comentário em .summit-oque__foto). */
.summit-oque__foto-fade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom,
    transparent calc(100% - var(--oque-foto-fade)),
    var(--summit-color-ink) 100%);
}

/* Preto sólido na esquerda → transparente na direita. É este gradiente que
   sustenta a legibilidade do texto sobre a foto. */
.summit-oque__gradiente {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0)        0%,
    var(--summit-color-black) 100%
  );
}


/* --- Conteúdo --- */
.summit-oque__conteudo {
  position: relative;
  z-index: 1;
  width: var(--oque-texto-width);
  margin-left: var(--oque-texto-left);
  padding-top: var(--oque-topo);
  padding-bottom: var(--oque-base);
}

.summit-oque__titulo {
  margin: 0 0 var(--oque-gap-titulo);
  margin-left: -0.0642em;      /* o Figma põe a caixa do título em x=403 e a do
                                  corpo em x=409 para que a haste do "O" caia no
                                  mesmo eixo — 6px de side bearing da Inter em
                                  93,4px, aqui em `em` para escalar junto */
  margin-right: 0.0642em;      /* compensa a margem negativa: desloca a caixa em
                                  vez de alargá-la */
  font-weight: 400;
  font-size: var(--oque-titulo-size);
  line-height: 0.8152;         /* 76,14 / 93,4 */
  letter-spacing: -0.07548em;  /* -7,05 / 93,4 */
  text-transform: uppercase;
  color: var(--summit-color-red);
  overflow-wrap: break-word;

  /* Trava a quebra do mockup ("O QUE É O LEAN" / "SUMMIT?") em qualquer largura.
     A linha inteira mede 11,07em e "O QUE É O LEAN" mede 6,83em, então qualquer
     limite entre os dois força a mesma quebra — em `em`, acompanha o corpo da
     fonte. Com a coluna do node 33:518 (709px) a regra passou a agir também em
     1920, travando a caixa do título em 700,5px; sem ela o título viraria uma
     linha só em telas médias e em monitores acima de 1920. */
  max-width: 7.5em;
}

.summit-oque__titulo span {
  color: var(--summit-color-cyan);
}

.summit-oque__texto {
  font-weight: 400;
  font-size: 0.94375rem;       /* 15,1px */
  line-height: 26.4px;
  color: var(--summit-color-white);
  overflow-wrap: break-word;
}

/* Uma linha em branco entre blocos — no Figma os parágrafos são separados por
   <br><br> dentro de um único nó de texto, o que dá exatamente 1x a entrelinha. */
.summit-oque__texto p,
.summit-oque__lista {
  margin: 0 0 26.4px;
}

.summit-oque__texto > :last-child {
  margin-bottom: 0;
}

/* Os três itens são linhas corridas no Figma: sem marcador, sem recuo e sem
   respiro extra entre eles. A lista carrega só a semântica. */
.summit-oque__lista {
  padding-left: 0;
  list-style: none;
}

.summit-oque__texto strong {
  font-weight: 700;
  color: var(--summit-color-cyan);
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* Não está no Figma — nenhum frame abaixo de 1920 foi fornecido */
/* ============================================================ */

/* Entre 992 e 1248 a coluna de 34,86% ficaria estreita demais para 15,1px:
   alarga o texto e encosta mais à esquerda, mantendo a quebra do título. */
@media (max-width: 1247.98px) {
  .summit-oque__conteudo {
    width: 46%;
    margin-left: 12%;
  }
}

/* Abaixo de 992 a composição em duas colunas deixa de caber: a foto passa a
   ocupar a seção inteira como textura e o véu escurece o bastante para o texto
   correr por cima em largura total. */
@media (max-width: 991.98px) {
  .summit-oque {
    min-height: 0;
  }

  /* Como textura de largura total a janela volta a acompanhar a altura da
     seção — e o recorte deixa de ser ancorado à esquerda: centrado, a placa
     "Lean Summit 2025" fica no meio do enquadramento em vez de sair pela
     direita. */
  .summit-oque__foto {
    --foto-left: 0px;
    height: var(--oque-foto-altura);
  }

  .summit-oque__foto img {
    object-position: center center;
  }

  .summit-oque__foto-veu {
    background-color: rgba(0, 0, 0, 0.62);
  }

  .summit-oque__gradiente {
    background-image: linear-gradient(
      to left,
      rgba(0, 0, 0, 0.60)   0%,
      rgba(0, 0, 0, 0.86) 100%
    );
  }

  .summit-oque__conteudo {
    width: auto;
    max-width: 46rem;          /* trava a linha em ~90 caracteres */
    margin-left: 0;
    padding: 64px 32px 72px;
  }

  .summit-oque__titulo {
    font-size: clamp(2.25rem, 7.4cqi, 4.5rem);   /* 36px … 72px */
  }
}

@media (max-width: 575.98px) {
  .summit-oque__conteudo {
    padding: 48px 20px 56px;
  }
}


/* ============================================================ */
/* MOTION (acabamento — não está no Figma)                      */
/* ============================================================ */

/* Ken burns lento na foto do fundo. A escala vai na <img>, não no
   .summit-oque__foto: é o contêiner que recorta (overflow: hidden) e
   que carrega a máscara do fade — escalar ele levaria a máscara junto.
   Com `object-fit: cover` a foto ampliada nunca deixa borda à mostra. */
@keyframes summit-oque-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

.summit-oque__foto img {
  animation: summit-oque-zoom 24s ease-in-out infinite alternate;
  will-change: transform;
}

/* Marcador que corre ao lado dos três itens da lista quando eles entram */
.summit-oque__lista li {
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.summit-oque__lista li:hover {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .summit-oque__foto img {
    animation: none;
  }

  .summit-oque__lista li {
    transition-duration: 1ms;
  }

  .summit-oque__lista li:hover {
    transform: none;
  }
}


/* ============================================================ */
/* 6/12 — DESTAQUES DO EVENTO — Section 1:82                   */
/* origem: sections/3-destaques-evento.css                     */
/* ============================================================ */
/* ============================================================ */
/* SECTION                                                     */
/* ============================================================ */
.summit-destaques {
  display: flex;
  align-items: flex-start;
  background: var(--summit-destaques-bg);
  font-family: var(--summit-font-primary);
  /* O Figma só define a lona de 1920 (recuo fixo de 96px). Acima disso a
     sobra segura o container em 1728px em vez de esticar as colunas — é a
     mesma régua das outras onze seções. Abaixo, valem os 96px do frame (e os
     recuos menores dos breakpoints). */
  padding-inline: calc(var(--summit-destaques-pad-x) + var(--summit-sobra));
}

.summit-destaques__item {
  flex: 1 0 0;
  min-width: 0;                 /* `min-w-px` do Figma: deixa a coluna encolher
                                    sem que o título force o estouro da faixa */
  display: flex;
  flex-direction: column;
  gap: var(--summit-destaques-gap);
  padding: var(--summit-destaques-item-pad);
  text-align: center;
}

.summit-destaques__item:not(:last-child) {
  border-right: 1px solid var(--summit-destaques-rule);
}

.summit-destaques__title {
  margin: 0;
  font-weight: 700;
  font-size: var(--summit-destaques-title-2);
  line-height: var(--summit-destaques-title-lh);
  letter-spacing: var(--summit-destaques-title-track);
  text-transform: uppercase;
  color: var(--summit-color-ink);

/* O `letter-spacing` do CSS também é somado DEPOIS do último caractere; com o
   texto centralizado, isso joga a linha meio tracking para o lado (+1,2px nos
   títulos, −0,5px nos apoios, medidos contra o screenshot). Devolver esse
   espaço na margem final recoloca a tinta no centro exato da coluna. */
  margin-inline-end: calc(-1 * var(--summit-destaques-title-track));
}

/* As três colunas declaram o corpo do título juntas, inclusive a do meio, que
   repete o valor da base — é a divergência do Figma legível de uma vez só. */
.summit-destaques__item--conteudo .summit-destaques__title {
  font-size: var(--summit-destaques-title-1);   /* 38.6px */
}

.summit-destaques__item--palco .summit-destaques__title {
  font-size: var(--summit-destaques-title-2);   /* 40px */
}

.summit-destaques__item--comunidade .summit-destaques__title {
  font-size: var(--summit-destaques-title-3);   /* 38.9px */
}

.summit-destaques__subtitle {
  margin: 0;
  font-weight: 600;
  font-size: var(--summit-destaques-sub-size);
  line-height: var(--summit-destaques-sub-lh);
  letter-spacing: var(--summit-destaques-sub-track);
  text-transform: uppercase;
  color: var(--summit-color-ink);
  margin-inline-end: calc(-1 * var(--summit-destaques-sub-track));  /* ver nota acima */
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
/* Não há frame mobile no Figma — os breakpoints abaixo são decisão da
   conversão (ver README). Da primeira quebra em diante os três títulos
   passam a ter o mesmo corpo: a diferença de 1,4px do frame de 1920 não
   sobrevive à redução e só atrapalharia o ajuste. O tracking vira `em`
   para acompanhar o corpo (−2,4px / 40px = −0,06em). */

@media (max-width: 1399.98px) {
  /* A linha de "CONTEÚDO VIVO" mede 298px; com 56px de recuo lateral a
     coluna ainda a comporta inteira até ~1190px. */
  .summit-destaques {
    --summit-destaques-pad-x: 56px;
  }
}

@media (max-width: 1247.98px) {
  .summit-destaques {
    --summit-destaques-pad-x: 32px;
    --summit-destaques-item-pad: 36px 20px;
    --summit-destaques-title-1: 2rem;   /* 32px */
    --summit-destaques-title-2: 2rem;
    --summit-destaques-title-3: 2rem;
    --summit-destaques-title-lh: 1.5;   /* 60/40 do frame, agora como razão */
    --summit-destaques-title-track: -0.06em;
  }
}

@media (max-width: 991.98px) {
  /* Abaixo de 992px as três colunas ficam estreitas demais: o apoio
     ("para transformar a prática", 218px) começa a quebrar em duas linhas
     antes de o título estourar. A faixa empilha e as divisórias deitam. */
  .summit-destaques {
    --summit-destaques-pad-x: 24px;
    --summit-destaques-item-pad: 30px 16px;
    --summit-destaques-title-1: 1.75rem;   /* 28px */
    --summit-destaques-title-2: 1.75rem;
    --summit-destaques-title-3: 1.75rem;
    flex-direction: column;
    align-items: stretch;   /* empilhado, o `flex-start` do frame encolheria
                               cada artigo até o texto e encurtaria a régua */
  }

  .summit-destaques__item:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--summit-destaques-rule);
  }
}

@media (max-width: 575.98px) {
  .summit-destaques {
    --summit-destaques-pad-x: 16px;
    --summit-destaques-item-pad: 26px 8px;
    --summit-destaques-title-1: 1.5rem;   /* 24px */
    --summit-destaques-title-2: 1.5rem;
    --summit-destaques-title-3: 1.5rem;
  }
}


/* ============================================================ */
/* MOTION (acabamento — não está no Figma)                      */
/* ============================================================ */

/* Os três blocos sobem um fio no hover. A faixa é baixa (167px) e cada
   item ocupa um terço dela: o deslocamento fica em 3px para não brigar
   com a linha de base do título ao lado. */
.summit-destaques__item {
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.summit-destaques__item:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .summit-destaques__item {
    transition-duration: 1ms;
  }

  .summit-destaques__item:hover {
    transform: none;
  }
}


/* ============================================================ */
/* 7/12 — PERFIL DOS PARTICIPANTES — Frame 4 9:6               */
/* origem: sections/7-perfil-participantes.css                 */
/* ============================================================ */
/* ============================================================ */
/* SECTION                                                     */
/* ============================================================ */

.summit-perfil,
.summit-perfil *{
  box-sizing: border-box;
}

.summit-perfil {
  padding: 45px calc(var(--summit-perfil-pad-x) + var(--summit-sobra)) 45px;
                                                   /* 45 = topo da caixa do título; 45 fecha os 673px.
                                                      A sobra impede as cinco roscas de se afastarem
                                                      umas das outras acima de 1920 */
  background-color: var(--summit-perfil-bg);
  background-image: radial-gradient(circle, var(--summit-perfil-ponto) 1px, transparent 1.15px);
  background-size: 10px 10px;                      /* passo da retícula medido no PNG */
  background-position: -0.5px -0.5px;              /* centro do 1º ponto em (4.5, 4.5) */
  font-family: var(--summit-font-primary);
  color: var(--summit-color-ink);
}

.summit-perfil__titulo {
  margin: 0;
  font-size: clamp(1.75rem, 3.3334vw, 4rem);       /* 64px em 1920 */
  font-weight: 400;                                /* Inter Regular — confere com a haste de 6px medida no PNG */
  line-height: 1.19;                               /* 76.1px / 64px */
  letter-spacing: -0.078125em;                     /* -5px / 64px */
  margin-inline-end: 0.078125em;                   /* o CSS aplica o tracking negativo também DEPOIS do
                                                      último caractere (o Figma não); sem devolver esse
                                                      espaço, o texto centralizado nasce |tracking|/2 à
                                                      direita — mesma convenção de 3-destaques-evento */
  text-align: center;
  text-transform: uppercase;
}

.summit-perfil__titulo-destaque {
  color: var(--summit-perfil-destaque);
}

/* --- fileira de roscas --- */

.summit-perfil__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;                         /* centra também a última linha incompleta,
                                                      o que um grid de N colunas não faz */
  column-gap: var(--summit-perfil-gap);
  row-gap: var(--summit-perfil-gap-linha);
  margin: 18px 0 0;                                /* 139 (topo das roscas) − 121 (base do título) */
  padding: 0;
  list-style: none;
}

.summit-perfil__item {
  width: var(--summit-perfil-coluna);
}

.summit-perfil__grafico {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--summit-perfil-rosca);
  height: var(--summit-perfil-rosca);
  margin: 0 auto;                                  /* a caixa do rótulo (248px) é mais larga que a rosca */
}

.summit-perfil__rosca {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--summit-perfil-arco-cor) 0 calc(var(--summit-perfil-arco, 0) * 1deg),
    var(--summit-perfil-trilho) 0
  );
  /* vaza o miolo: a textura de pontos do fundo aparece dentro da rosca no Figma.
     0.5px de esfumaçado de cada lado do raio interno suaviza a serrilha da máscara. */
  -webkit-mask-image: radial-gradient(circle closest-side,
    transparent calc(100% - var(--summit-perfil-tracado) - 0.5px),
    #000        calc(100% - var(--summit-perfil-tracado) + 0.5px));
  mask-image: radial-gradient(circle closest-side,
    transparent calc(100% - var(--summit-perfil-tracado) - 0.5px),
    #000        calc(100% - var(--summit-perfil-tracado) + 0.5px));
}

.summit-perfil__valor {
  position: relative;                              /* acima da rosca, fora da máscara */
  margin: 0;
  font-size: var(--summit-perfil-valor-fonte);
  font-weight: 400;
  line-height: 1.09;                               /* 60px / 55px */
  letter-spacing: -0.090909em;                     /* -5px / 55px */
  margin-inline-end: 0.090909em;                   /* mesma compensação do título */
  text-align: center;
}

.summit-perfil__cargo {
  margin: 37px 0 0;                                /* 409 (topo do rótulo) − 374.09 (base da rosca), +2 aferidos no render */
  font-size: var(--summit-perfil-cargo-fonte);
  font-weight: 700;
  line-height: 0.96;                               /* 23px / 24px — o passo de 2 linhas do Figma */
  letter-spacing: -0.041667em;                     /* -1px / 24px */
  text-align: center;
  text-transform: uppercase;
}

/* --- recorte por gênero --- */

.summit-perfil__genero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 61px;                                       /* fecha o vão de 68px de tinta entre os dois números */
  margin-top: 80px;                                /* 536 (topo do número) − 455 (base do rótulo mais alto) */
}

.summit-perfil__genero-item {
  text-align: center;
}

.summit-perfil__genero-valor {
  margin: 0;
  font-size: var(--summit-perfil-gvalor-fonte);    /* 64px em 1920 */
  font-weight: 400;
  line-height: 0.94;                               /* 60px / 64px */
  letter-spacing: -0.078125em;                     /* -5px / 64px */
}

.summit-perfil__genero-rotulo {
  margin: 7px 0 0;
  font-size: var(--summit-perfil-grotulo-fonte);   /* 24px em 1920 */
  font-weight: 700;
  line-height: 0.96;                               /* 23px / 24px */
  letter-spacing: -0.041667em;                     /* -1px / 24px */
  text-transform: uppercase;
  color: var(--summit-perfil-arco-cor);
}

.summit-perfil__genero-divisor {
  position: absolute;                              /* fora do fluxo: os 108px do traço (node 7:629)
                                                      são maiores que a pilha número+rótulo e não
                                                      devem empurrar a altura da seção */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -3px;                                /* fecha o traço em y 525→633 (node 7:629): a pilha
                                                      número+rótulo tem centro 3px abaixo do dele */
  width: 2px;
  height: 108px;
  background: var(--summit-perfil-arco-cor);
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
/* Nenhum frame mobile foi fornecido no Figma. A rosca encolhe de forma contínua
   dentro de cada faixa; os breakpoints só trocam quantas colunas cabem por linha
   (5 → 3 → 2 → 1) e o recuo lateral. */

@media (max-width: 1247.98px) {
  :root {
    --summit-perfil-rosca:   min(235.0885px, (100vw - 148px) / 4.089);   /* 3 por linha */
    --summit-perfil-pad-x:   64px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --summit-perfil-rosca:   min(235.0885px, (100vw - 116px) / 2.5719);  /* 2 por linha */
    --summit-perfil-pad-x:   48px;
  }

  .summit-perfil {
    padding-top: 36px;
    padding-bottom: 40px;
  }

  .summit-perfil__genero {
    margin-top: 56px;
    gap: 48px;
  }

  .summit-perfil__genero-divisor {
    height: 84px;
  }
}

@media (max-width: 575.98px) {
  :root {
    --summit-perfil-rosca:   min(235.0885px, 100vw - 84px);              /* 1 por linha */
    --summit-perfil-pad-x:   32px;
    /* aqui a rosca volta ao tamanho cheio (1 por linha), mas o bloco de gênero
       é lado a lado: sem este teto em vw ele estoura a tela abaixo de ~430px */
    --summit-perfil-gvalor-fonte:  min(calc(var(--summit-perfil-rosca) * 0.27224), 12vw);
    --summit-perfil-grotulo-fonte: min(var(--summit-perfil-cargo-fonte), 6vw);
  }

  .summit-perfil {
    padding-top: 28px;
    padding-bottom: 32px;
  }

  .summit-perfil__lista {
    margin-top: 14px;
  }

  .summit-perfil__cargo {
    margin-top: 22px;
  }

  .summit-perfil__genero {
    margin-top: 44px;
    gap: 32px;
  }

  .summit-perfil__genero-divisor {
    height: 72px;
  }
}


/* ============================================================ */
/* MOTION (acabamento — não está no Figma)                      */
/* ============================================================ */

/* O arco é varrido pelo JS (sections/7-perfil-participantes.js), que
   reescreve `--summit-perfil-arco` a cada quadro: o `conic-gradient`
   não interpola sozinho sem `@property`. Aqui fica só o que é do CSS. */

/* Repintar um cônico por quadro é trabalho de composição: a camada
   própria evita levar o resto da seção junto. */
.summit-perfil__rosca {
  will-change: background;
}

/* A rosca cresce um fio quando o ponteiro para em cima dela */
.summit-perfil__grafico {
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.summit-perfil__item:hover .summit-perfil__grafico {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .summit-perfil__grafico {
    transition-duration: 1ms;
  }

  .summit-perfil__item:hover .summit-perfil__grafico {
    transform: none;
  }
}


/* ============================================================ */
/* 8/12 — PATROCINADOR OU EXPOSITOR — Frame 5 9:7              */
/* origem: sections/6-patrocinador.css                         */
/* ============================================================ */
/* SECTION */

.summit-patrocinador {
  background: var(--summit-patroc-bg);
  /* Recuos do frame de 1920 (81 / 228 / 107 / 411) expressos em vw para que a
     faixa 1400–1920 escale junto em vez de estourar num único breakpoint. */
  padding:
    clamp(48px, 4.219vw, 81px)
    calc(clamp(24px, 11.875vw, 228px) + var(--summit-sobra))
    clamp(56px, 5.573vw, 107px)
    calc(clamp(24px, 21.406vw, 411px) + var(--summit-sobra));
}

/* --- Título ------------------------------------------------- */

.summit-patrocinador__titulo {
  margin: 0 0 82.72px;          /* 316 (topo das colunas) − 233,28 (base do título) */
  max-width: 12.1111em;         /* 1090px ÷ 90px — em, para a quebra em 2 linhas
                                    seguir a fonte quando ela escala */
  font-size: clamp(2.75rem, 4.6875vw, 5.625rem);   /* 90px no frame de 1920 */
  font-weight: 400;
  line-height: 0.846;           /* 76,14px ÷ 90px */
  letter-spacing: -0.07833em;   /* −7,05px ÷ 90px */
  text-transform: uppercase;
  color: var(--summit-color-white);
}

.summit-patrocinador__titulo-destaque { color: var(--summit-patroc-red); }
.summit-patrocinador__titulo-alt      { color: var(--summit-patroc-cyan); }

/* --- Colunas ------------------------------------------------ */

.summit-patrocinador__colunas {
  display: flex;
  align-items: flex-start;      /* texto e vídeo começam ambos em y=316 */
  gap: var(--summit-patroc-gap);
}

.summit-patrocinador__texto {
  flex: 0 1 var(--summit-patroc-texto);   /* encolhe abaixo de 1920, nunca cresce */
  min-width: 0;
}

/* --- Parágrafos --------------------------------------------- */

.summit-patrocinador__texto p {
  margin: 0 0 26.4px;           /* no Figma a separação é uma linha vazia = 1 × line-height */
  font-size: 0.94375rem;        /* 15,1px */
  font-weight: 400;
  line-height: 26.4px;
  color: var(--summit-color-white);
}

.summit-patrocinador__texto p:last-of-type {
  margin-bottom: 0;
}

.summit-patrocinador__texto strong {
  font-weight: 700;
  color: var(--summit-patroc-cyan);
}

/* --- Link do CTA -------------------------------------------- */

.summit-patrocinador__cta {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 86.8px;           /* 746 (topo do link) − 659,2 (base do texto) */
  padding: 8px 0;
  border-bottom: 1px solid var(--summit-color-accent);
  font-weight: 700;
  font-size: 0.75rem;           /* 12px */
  line-height: 18px;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  color: var(--summit-color-accent);
  text-decoration: none;
  white-space: nowrap;
}

/* Seta "↗" do Figma como máscara SVG (--summit-seta): a Inter do Google Fonts não
   traz U+2197 e o glifo caía em fonte do sistema. A cor é a do texto (currentColor). */
.summit-patrocinador__cta-icon {
  display: inline-block;
  vertical-align: middle;
  width: 1em;                   /* avanço do glifo "↗" da Inter: caixa de 1em com a seta de 0,56em centrada (o desenho
                                   ocupa 6,71 dos 7 do viewBox: 6,4px de tinta a 12px — medido 6–7 nos screenshots) */
  height: 1em;
  background-color: currentColor;   /* a cor é a do texto ao redor, como era o glifo */
  -webkit-mask: var(--summit-seta) no-repeat center / 0.56em;
  mask: var(--summit-seta) no-repeat center / 0.56em;
}

.summit-patrocinador__cta:hover,
.summit-patrocinador__cta:focus-visible {
  color: var(--summit-color-white);            /* acabamento — não está no Figma */
  border-bottom-color: var(--summit-color-white);
}

/* --- Vídeo -------------------------------------------------- */

.summit-patrocinador__video {
  flex: 1 1 var(--summit-patroc-video);   /* cresce acima de 1920 para não deixar vão à direita */
  min-width: 0;
  margin: 0;
}

.summit-patrocinador__video-link {
  position: relative;
  display: block;
  line-height: 0;
}

.summit-patrocinador__video-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 696 / 389.552;
  object-fit: cover;
  border-radius: 21px;
}

.summit-patrocinador__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90.03px;
  height: 90.03px;
  transform: translate(-50%, -50%);   /* o anel é concêntrico ao card (1344 / 510,78) */
  transition: transform 0.2s ease;
  pointer-events: none;
}

.summit-patrocinador__play-ring {
  display: block;
  width: 100%;
  height: 100%;
}

.summit-patrocinador__play-tri {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 47.2307px;
  height: 40.903px;
  /* No Figma o triângulo é um polígono apontando para cima, girado 90°, com o
     centro deslocado 6,39px à direita do centro do anel (compensação óptica). */
  transform: translate(-50%, -50%) translate(6.386px, -0.437px) rotate(90deg);
}

.summit-patrocinador__video-link:hover .summit-patrocinador__play,
.summit-patrocinador__video-link:focus-visible .summit-patrocinador__play {
  transform: translate(-50%, -50%) scale(1.06);      /* acabamento — não está no Figma */
}

/* --- Legenda ------------------------------------------------ */

.summit-patrocinador__legenda {
  margin: 21.45px auto 0;       /* 727 (topo da legenda) − 705,55 (base do vídeo) */
  max-width: 19.09375em;        /* 611px ÷ 32px — mantém a quebra em 2 linhas */
  font-size: clamp(1.375rem, 1.6667vw, 1.5625rem);   /* teto ajustado para 25px */
  font-weight: 400;
  line-height: 1.15625;         /* 37px ÷ 32px */
  text-transform: uppercase;
  text-align: center;
  color: var(--summit-patroc-cyan);
}

.summit-patrocinador__legenda-destaque { color: var(--summit-patroc-red); }

/* --- Modal de vídeo (compartilhado com as seções 8-experiencia e 12-vozes-2025) --- */
/* MESMO bloco nas três seções que têm vídeo (6-patrocinador, 8-experiencia e
   12-vozes-2025). É duplicação consciente: cada seção precisa valer sozinha no
   seu preview e os IIFEs não compartilham estado, então o componente é combinado
   por convenção — a classe `.summit-video-modal` e o marcador
   `[data-summit-video-modal]`, que é como uma seção fecha o vídeo da outra.
   Mexeu aqui, mexe nas outras duas. As regras são idênticas; só os nomes de
   token mudam, porque cada seção declara o seu (e todos valem o mesmo). */

.summit-video-modal {
  /* `fit-content` é o que faz o `margin: auto` centrar: com `width: auto` o
     <dialog> modal (que vem com `inset: 0`) estica para a largura toda, sobra
     zero para o auto distribuir, e a moldura encosta na esquerda.
     `max-width/height: none` derrubam o teto do próprio navegador
     (`calc(100% - 6px - 2em)`), que cortaria o vídeo nas laterais. */
  position: fixed;                /* explícito (o navegador já aplica isso via
                                      dialog:modal, mas author CSS sobrepõe a UA
                                      stylesheet — precisa declarar de novo para
                                      não perder o posicionamento fixo/centralizado
                                      ao virar âncora do botão fechar absolute) */
  width: fit-content;
  height: fit-content;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.summit-video-modal::backdrop {
  background: rgba(8, 8, 8, 0.92);
}

/* 16:9 preso pelos DOIS lados: a largura manda até a altura virar o limite,
   e aí o `calc` de dvh assume — sem isso, em tela baixa e larga o vídeo
   passa por baixo da dobra. */
.summit-video-modal__frame {
  width: min(92vw, 1280px, calc(84dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.summit-video-modal__player {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.summit-video-modal__close {
  position: absolute;            /* preso à moldura do vídeo, no canto superior
                                    externo direito — não mais fixo ao viewport */
  top: -16px;
  right: -16px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #080808;
  color: var(--summit-color-white);
  font-family: var(--summit-font-primary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.summit-video-modal__close:hover,
.summit-video-modal__close:focus-visible {
  border-color: var(--summit-patroc-cyan);
  color: var(--summit-patroc-cyan);
}

/* RESPONSIVO */

@media (max-width: 1247.98px) {
  /* O recuo esquerdo de 21,4vw vira uma calha vazia grande abaixo de ~1250px. */
  .summit-patrocinador {
    padding-left: 8.5vw;
    padding-right: 6vw;
  }
}

@media (max-width: 991.98px) {
  /* Sem frame mobile no Figma — as colunas empilham e os recuos ficam simétricos. */
  .summit-patrocinador {
    padding: 56px 48px 64px;
  }

  .summit-patrocinador__titulo {
    margin-bottom: 48px;
  }

  .summit-patrocinador__colunas {
    flex-direction: column;
    gap: 48px;
  }

  .summit-patrocinador__texto {
    flex: 0 1 auto;
    max-width: 640px;           /* acima disso a linha passa de ~100 caracteres */
  }

  .summit-patrocinador__video {
    flex: 0 1 auto;
    width: 100%;
    max-width: var(--summit-patroc-video);
  }

  .summit-patrocinador__cta {
    margin-top: 40px;
  }
}

@media (max-width: 767.98px) {
  .summit-patrocinador {
    padding: 48px 32px 56px;
  }
}

@media (max-width: 575.98px) {
  .summit-patrocinador {
    padding: 40px 20px 48px;
  }

  .summit-patrocinador__play {
    width: 60px;
    height: 60px;
  }

  .summit-patrocinador__play-tri {
    width: 31.5px;
    height: 27.27px;
    transform: translate(-50%, -50%) translate(4.26px, -0.29px) rotate(90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .summit-patrocinador__play {
    transition-duration: 1ms;
  }
}


/* ============================================================ */
/* MOTION (acabamento — não está no Figma)                      */
/* ============================================================ */
/* O anel de play já cresce no hover (regra acima). Falta só o CTA. */

.summit-patrocinador__cta {
  transition: color 200ms ease, border-bottom-color 200ms ease,
              transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.summit-patrocinador__cta:hover,
.summit-patrocinador__cta:focus-visible {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .summit-patrocinador__cta {
    transition-duration: 1ms;
  }

  .summit-patrocinador__cta:hover,
  .summit-patrocinador__cta:focus-visible {
    transform: none;
  }
}


/* ============================================================ */
/* 9/12 — EXPERIÊNCIA 2025 — Section 1:104                     */
/* origem: sections/8-experiencia.css                          */
/* ============================================================ */
/* ============================================================ */
/* SECTION                                                       */
/* ============================================================ */
.summit-experiencia {
  display: flex;
  flex-direction: column;
  gap: var(--summit-exp-gap);
  /* a sobra segura o container de 1728px no ultrawide, em vez de esticá-lo */
  padding: var(--summit-exp-pad-y) calc(var(--summit-exp-pad-x) + var(--summit-sobra));
  background: var(--summit-exp-bg);
  font-family: var(--summit-font-primary);
}

/* --- Intro ------------------------------------------------- */

.summit-experiencia__intro {
  display: flex;
  gap: 29px;                       /* 1083 − (309 + 745) no container de 1728px */
  padding-left: var(--summit-exp-indent);
}

.summit-experiencia__intro-main {
  display: flex;
  flex-direction: column;
  gap: 22px;
  flex: 0 1 745px;
  min-width: 0;
}

.summit-experiencia__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.675rem;             /* 10.8px */
  font-weight: 700;
  line-height: 11px;
  letter-spacing: 1.98px;
  text-transform: uppercase;
  color: var(--summit-exp-white);
}

.summit-experiencia__eyebrow-rule {
  flex: 0 0 auto;
  width: 35px;
  height: 3px;
  background: var(--summit-exp-accent);
}

.summit-experiencia__title {
  margin: 0;
  font-size: clamp(3.25rem, 4.896vw, 5.875rem);   /* 52px … 94px (94px em 1920) */
  font-weight: 400;
  line-height: 0.81em;             /* 76,14px em 94px */
  letter-spacing: -0.075em;        /* −7,05px em 94px */
  text-transform: uppercase;
  color: var(--summit-exp-white);
  /* a quebra "VOCÊ PRECISAVA / ESTAR LÁ." vem da largura do bloco (745px): a
     primeira linha mede 695px e a palavra seguinte não cabe — sem <br>. Em em
     (745/94) a quebra sobrevive à fonte fluida: sem isto, entre 768 e 1024px o
     título voltava a caber numa linha só e a 2ª linha ciano sumia             */
  max-width: 7.93em;
}

.summit-experiencia__title-accent {
  color: var(--summit-exp-cyan);
}

.summit-experiencia__lead {
  flex: 0 1 380px;
  margin: 0;
  padding-top: 35px;
  font-size: 0.944rem;             /* 15.1px */
  font-weight: 400;
  line-height: 26.4px;
  color: var(--summit-exp-lead);
}

.summit-experiencia__lead-accent {
  color: var(--summit-exp-accent);
}

/* --- Player do aftermovie ---------------------------------- */

.summit-experiencia__player {
  margin: 0;
  padding-top: var(--summit-exp-player-top);
  background: var(--summit-exp-player-bg);
  border: 1px solid var(--summit-exp-player-border);
}

.summit-experiencia__stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--summit-exp-poster-ratio);
  max-height: 936px;               /* teto do frame — acima de 1920px o pôster corta */
  overflow: hidden;
  isolation: isolate;
}

.summit-experiencia__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.summit-experiencia__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--summit-exp-play-size);
  height: var(--summit-exp-play-size);
  transform: translate(-50%, -50%);
  transition: transform 220ms ease;   /* acabamento — não está no Figma */
}

.summit-experiencia__play-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.summit-experiencia__play-tri {
  /* triângulo exportado apontando para cima, girado 90° como no Figma; a caixa
     sem rotação fica deslocada para que o triângulo girado caia opticamente
     centrado no anel (14,4px à direita do centro geométrico)                  */
  position: absolute;
  left: 31.24%;                    /* 61,85px em 198px */
  top: 27.21%;                     /* 53,88px em 198px */
  width: 52.05%;                   /* 103,06px */
  height: 45.08%;                  /* 89,25px  */
  transform: rotate(90deg);
}

.summit-experiencia__stage:hover .summit-experiencia__play,
.summit-experiencia__stage:focus-visible .summit-experiencia__play {
  transform: translate(-50%, -50%) scale(1.06);   /* acabamento — não está no Figma */
}

.summit-experiencia__player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 52.5px;
  padding: 18px 22px;
}

.summit-experiencia__player-tag,
.summit-experiencia__player-note {
  font-size: 0.688rem;             /* 11px */
  line-height: 16.5px;
  letter-spacing: 0.99px;
  text-transform: uppercase;
}

.summit-experiencia__player-tag {
  font-weight: 700;
  color: var(--summit-exp-cyan);
}

.summit-experiencia__player-note {
  font-weight: 400;
  color: var(--summit-exp-player-note);
  text-align: right;
}

/* --- Cabeçalho da galeria ---------------------------------- */

.summit-experiencia__gallery-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-top: 71px;
}

.summit-experiencia__gallery-title {
  margin: 0;
  font-size: clamp(1.375rem, 1.667vw, 2rem);   /* 22px … 32px (32px em 1920) */
  font-weight: 400;
  line-height: 1.5em;              /* 48px em 32px */
  letter-spacing: -0.04em;         /* −1,28px em 32px */
  text-transform: uppercase;
  color: var(--summit-exp-white);
  white-space: nowrap;
}

.summit-experiencia__gallery-note {
  margin: 0;
  font-size: 0.938rem;             /* 15px */
  font-weight: 400;
  line-height: 24px;
  color: var(--summit-exp-note);
  white-space: nowrap;
}

/* --- Mosaico ------------------------------------------------ */

.summit-experiencia__grid {
  display: grid;
  grid-template-columns: 7fr 4fr 4fr;          /* 1,40fr · 0,80fr · 0,80fr */
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--summit-exp-tile-gap);
  /* as colunas são fracionárias e as fileiras do Figma têm 260px fixos: sem o
     aspecto do mosaico inteiro (1728x804), abaixo de 1920 as fotos largas
     viriam quase quadradas. Em 1920 o aspecto devolve exatamente 3x260 + 2x12 */
  aspect-ratio: 1728 / 804;
  margin: 0;
  padding: 0;
  list-style: none;
}

.summit-experiencia__tile {
  position: relative;
  overflow: hidden;                /* zoom no hover fica confinado ao contêiner */
  background: var(--summit-exp-tile-bg);
}

.summit-experiencia__tile--conteudo   { grid-column: 1;         grid-row: 1 / span 2; }
.summit-experiencia__tile--referencias{ grid-column: 2;         grid-row: 1; }
.summit-experiencia__tile--ideias     { grid-column: 3;         grid-row: 1; }
.summit-experiencia__tile--conexoes   { grid-column: 2 / span 2; grid-row: 2; }
.summit-experiencia__tile--praticas   { grid-column: 1;         grid-row: 3; }
.summit-experiencia__tile--evento     { grid-column: 2;         grid-row: 3; }

.summit-experiencia__tile-link {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
}

.summit-experiencia__tile-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 420ms ease;   /* acabamento — não está no Figma */
}

.summit-experiencia__tile-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: var(--summit-exp-tile-pad);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--summit-exp-tile-veil) 100%);
}

.summit-experiencia__tile-label,
.summit-experiencia__tile-arrow {
  font-size: 0.625rem;             /* 10px */
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--summit-exp-white);
}

/* Seta "↗" do Figma como máscara SVG (--summit-seta): a Inter do Google Fonts não
   traz U+2197 e o glifo caía em fonte do sistema. A cor é a do texto (currentColor). */
.summit-experiencia__tile-arrow {
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
  width: 1em;                   /* avanço do glifo "↗" da Inter: caixa de 1em com a seta de 0,56em centrada (o desenho
                                   ocupa 6,71 dos 7 do viewBox: 6,4px de tinta a 12px — medido 6–7 nos screenshots) */
  height: 1em;
  background-color: currentColor;   /* a cor é a do texto ao redor, como era o glifo */
  -webkit-mask: var(--summit-seta) no-repeat center / 0.56em;
  mask: var(--summit-seta) no-repeat center / 0.56em;
  transition: transform 220ms ease;   /* acabamento — não está no Figma */
}

.summit-experiencia__tile-link:hover .summit-experiencia__tile-img,
.summit-experiencia__tile-link:focus-visible .summit-experiencia__tile-img {
  transform: scale(1.04);
}

.summit-experiencia__tile-link:hover .summit-experiencia__tile-arrow,
.summit-experiencia__tile-link:focus-visible .summit-experiencia__tile-arrow {
  transform: translate(2px, -2px);
}

.summit-experiencia__tile-link:focus-visible,
.summit-experiencia__stage:focus-visible {
  outline: 2px solid var(--summit-exp-cyan);
  outline-offset: -2px;
}

/* --- Lightbox (8-experiencia.js) ---------------------------- */
/* Estado ampliado não existe no Figma — ver README.             */

.summit-experiencia-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.summit-experiencia-lightbox::backdrop {
  background: rgba(8, 8, 8, 0.92);
}

.summit-experiencia-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  margin: 0;
  padding: 48px;
}

.summit-experiencia-lightbox__img {
  max-width: 100%;
  max-height: calc(100% - 48px);
  object-fit: contain;
}

.summit-experiencia-lightbox__caption {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--summit-font-primary);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--summit-exp-white);
}

/* "3 / 6" — mais apagado que o rótulo: é referência, não conteúdo */
.summit-experiencia-lightbox__count {
  color: var(--summit-exp-note);
  font-variant-numeric: tabular-nums;   /* o contador não dança ao trocar de foto */
}

/* --- Setas do carrossel --- */
/* Ficam sobre o fundo do dialog, coladas nas bordas: em foto retrato sobra
   preto dos dois lados, e é ali que a mão procura o controle. */
.summit-experiencia-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--summit-exp-player-border);
  background: var(--summit-exp-player-bg);
  color: var(--summit-exp-white);
  font-family: var(--summit-font-primary);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.summit-experiencia-lightbox__nav--prev { left: 16px; }
.summit-experiencia-lightbox__nav--next { right: 16px; }

.summit-experiencia-lightbox__nav:hover,
.summit-experiencia-lightbox__nav:focus-visible {
  border-color: var(--summit-exp-cyan);
  color: var(--summit-exp-cyan);
}

.summit-experiencia-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--summit-exp-player-border);
  background: var(--summit-exp-player-bg);
  color: var(--summit-exp-white);
  font-family: var(--summit-font-primary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.summit-experiencia-lightbox__close:hover,
.summit-experiencia-lightbox__close:focus-visible {
  border-color: var(--summit-exp-cyan);
  color: var(--summit-exp-cyan);
}

/* --- Modal de vídeo (compartilhado com as seções 6-patrocinador e 12-vozes-2025) --- */
/* MESMO bloco nas três seções que têm vídeo (6-patrocinador, 8-experiencia e
   12-vozes-2025). É duplicação consciente: cada seção precisa valer sozinha no
   seu preview e os IIFEs não compartilham estado, então o componente é combinado
   por convenção — a classe `.summit-video-modal` e o marcador
   `[data-summit-video-modal]`, que é como uma seção fecha o vídeo da outra.
   Mexeu aqui, mexe nas outras duas. As regras são idênticas; só os nomes de
   token mudam, porque cada seção declara o seu (e todos valem o mesmo). */

.summit-video-modal {
  /* `fit-content` é o que faz o `margin: auto` centrar: com `width: auto` o
     <dialog> modal (que vem com `inset: 0`) estica para a largura toda, sobra
     zero para o auto distribuir, e a moldura encosta na esquerda.
     `max-width/height: none` derrubam o teto do próprio navegador
     (`calc(100% - 6px - 2em)`), que cortaria o vídeo nas laterais. */
  position: fixed;                /* explícito (o navegador já aplica isso via
                                      dialog:modal, mas author CSS sobrepõe a UA
                                      stylesheet — precisa declarar de novo para
                                      não perder o posicionamento fixo/centralizado
                                      ao virar âncora do botão fechar absolute) */
  width: fit-content;
  height: fit-content;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.summit-video-modal::backdrop {
  background: rgba(8, 8, 8, 0.92);
}

/* 16:9 preso pelos DOIS lados: a largura manda até a altura virar o limite,
   e aí o `calc` de dvh assume — sem isso, em tela baixa e larga o vídeo
   passa por baixo da dobra. */
.summit-video-modal__frame {
  width: min(92vw, 1280px, calc(84dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000000;
  border: 1px solid var(--summit-exp-player-border);
}

.summit-video-modal__player {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.summit-video-modal__close {
  position: absolute;            /* preso à moldura do vídeo, no canto superior
                                    externo direito — não mais fixo ao viewport */
  top: -16px;
  right: -16px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--summit-exp-player-border);
  background: var(--summit-exp-player-bg);
  color: var(--summit-exp-white);
  font-family: var(--summit-font-primary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.summit-video-modal__close:hover,
.summit-video-modal__close:focus-visible {
  border-color: var(--summit-exp-cyan);
  color: var(--summit-exp-cyan);
}

@media (prefers-reduced-motion: reduce) {
  .summit-experiencia__play,
  .summit-experiencia__tile-img,
  .summit-experiencia__tile-arrow {
    transition-duration: 1ms;
  }
}

/* ============================================================ */
/* RESPONSIVO                                                    */
/* ============================================================ */
/* Não há frames além do de 1920 no Figma — os breakpoints abaixo */
/* são decisão da conversão (ver README).                         */

@media (max-width: 1399.98px) {
  .summit-experiencia {
    --summit-exp-pad-y: 88px;
    --summit-exp-pad-x: 48px;
    --summit-exp-gap: 44px;
    --summit-exp-indent: 96px;     /* recuo proporcional deixaria a intro estreita demais */
  }

  .summit-experiencia__gallery-head {
    padding-top: 56px;
  }
}

@media (max-width: 1247.98px) {
  .summit-experiencia__intro {
    flex-direction: column;
    gap: 28px;
    padding-left: 0;
  }

  .summit-experiencia__intro-main {
    flex: 0 0 auto;
  }

  .summit-experiencia__title {
    font-size: clamp(3rem, 6.2vw, 5.875rem);
  }

  .summit-experiencia__lead {
    flex: 0 0 auto;
    max-width: 480px;
    padding-top: 0;
  }
}

@media (max-width: 991.98px) {
  .summit-experiencia {
    --summit-exp-pad-y: 72px;
    --summit-exp-pad-x: 32px;
    --summit-exp-gap: 36px;
    --summit-exp-play-size: 132px;
  }

  .summit-experiencia__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    aspect-ratio: auto;              /* a altura passa a vir do aspecto de cada tile */
  }

  /* o mosaico de 3 colunas não cabe: vira 2 colunas com as fileiras largas
     ocupando a linha inteira, e a altura passa a vir do aspecto de cada foto */
  .summit-experiencia__tile {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 21 / 9;
  }

  .summit-experiencia__tile--conteudo {
    aspect-ratio: 795 / 532;
  }

  .summit-experiencia__tile--referencias,
  .summit-experiencia__tile--ideias {
    grid-column: auto;
    aspect-ratio: 454 / 260;
  }

  .summit-experiencia__gallery-head {
    padding-top: 40px;
  }
}

@media (max-width: 767.98px) {
  .summit-experiencia__player-bar {
    flex-wrap: wrap;
    gap: 6px 18px;
  }

  .summit-experiencia__player-note {
    text-align: left;
  }

  .summit-experiencia__gallery-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .summit-experiencia__gallery-title,
  .summit-experiencia__gallery-note {
    white-space: normal;
  }
}

@media (max-width: 575.98px) {
  .summit-experiencia {
    --summit-exp-pad-y: 56px;
    --summit-exp-pad-x: 16px;
    --summit-exp-gap: 28px;
    --summit-exp-play-size: 88px;
    --summit-exp-tile-gap: 8px;
    --summit-exp-tile-pad: 14px;
  }

  .summit-experiencia__grid {
    grid-template-columns: 1fr;
  }

  .summit-experiencia__tile,
  .summit-experiencia__tile--referencias,
  .summit-experiencia__tile--ideias {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
  }

  .summit-experiencia__tile--conexoes,
  .summit-experiencia__tile--praticas,
  .summit-experiencia__tile--evento {
    aspect-ratio: 16 / 10;
  }

  .summit-experiencia__lead {
    font-size: 0.875rem;           /* 14px — 15,1px deixa o bloco largo demais */
    line-height: 24px;
  }

  .summit-experiencia-lightbox__figure {
    padding: 24px 16px;
  }

  /* setas menores e coladas na borda — a foto fica com o resto da tela */
  .summit-experiencia-lightbox__nav {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }

  .summit-experiencia-lightbox__nav--prev { left: 4px; }
  .summit-experiencia-lightbox__nav--next { right: 4px; }
}


/* ============================================================ */
/* 10/12 — VOZES DE 2025 — Section 1:168                       */
/* origem: sections/12-vozes-2025.css                          */
/* ============================================================ */
/* SECTION */

.summit-vozes {
  background-color: var(--summit-vozes-bg);
  /* Malha de pontos: 2px a cada 10px, fase 4px nos dois eixos. Mesmo padrão da
     seção Tema — o dump do node achata o fill do frame em "bg-white" e não há
     imagem nem SVG por trás dela; a receita saiu da medição do export. */
  background-image: radial-gradient(circle at 5px 5px, var(--summit-vozes-dot) 1.05px, transparent 1.05px);
  background-size: 10px 10px;
  font-family: var(--summit-font-primary);
}

.summit-vozes__inner {
  display: flex;
  align-items: flex-start;
  padding: 110px
           calc(var(--summit-sobra) + clamp(48px, 48px + (100% - 1400px) * 0.092308, 96px))
           94px
           calc(var(--summit-sobra) + clamp(96px, 96px + (100% - 1400px) * 0.207692, 204px));
                                     /* topo 110; base 94 (era 614 − 520 no Figma, e
                                        foi mantida como respiro); em 1920: direita 96
                                        (borda do card 2 em 1824) e esquerda 204 = x do
                                        Container 1:173. Entre 1920 e 1400 os dois
                                        recuos descem em linha reta até os 96/48 que
                                        valem abaixo de 1400 (0,2077 e 0,0923 px por px
                                        de viewport): como os cards agora dividem a
                                        faixa em dois, recuo fixo faria a largura deles
                                        saltar 78px no breakpoint. A sobra mantém tudo
                                        na régua de 1920 no ultrawide.
                                        A seção não fecha mais em 614: o passador
                                        desceu para debaixo dos cards e somou 49px
                                        (24 de respiro + 25 do botão) — 663 no total. */
}

/* Coluna esquerda — rótulo + título (Container 1:173, 349px com pr 35) */

.summit-vozes__intro {
  flex: 0 0 349px;
  min-width: 0;
  padding-right: 35px;               /* 1:173 tem pr-[35px]: os filhos medem 314px */
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.summit-vozes__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 700;
  font-size: 0.675rem;               /* 10.8px */
  line-height: 11px;
  letter-spacing: 1.98px;
  text-transform: uppercase;
  color: var(--summit-vozes-label);
}

.summit-vozes__eyebrow::before {     /* "Background" 1:175 — retângulo sem raio, y=4
                                        numa linha de 11px, ou seja, centralizado */
  content: "";
  flex-shrink: 0;
  width: 35px;
  height: 3px;
  background: var(--summit-vozes-red);
}

.summit-vozes__title {
  margin: 0;
  font-weight: 400;                  /* o dump diz Inter Regular; o peso aparente vem
                                        do corpo de 90px com tracking negativo */
  font-size: 5.625rem;               /* 90px */
  line-height: 76.14px;
  letter-spacing: -7.05px;
  text-transform: uppercase;
  color: var(--summit-color-ink);
}

.summit-vozes__line {
  display: block;                    /* as três quebras são do design — é o que isola
                                        "conta." para poder colori-la de ciano */
}

.summit-vozes__line--accent {
  color: var(--summit-vozes-cyan);
}

/* Coluna direita — faixa de cards com o passador embaixo */

.summit-vozes__faixa {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;           /* o passador não se estica: fica do tamanho do
                                        par de botões, encostado na borda esquerda
                                        do primeiro card */
  /* 713,59 − (204 + 349) = 160,59: a calha que no Figma abrigava a seta única,
     mantida vazia em 1920 para que os cards continuem onde o design os pôs
     (x=713,59). Sem a seta dentro dela é espaço morto, então entre 1920 e 1400
     ela desce em linha reta até os 64px do breakpoint seguinte. A porcentagem lê
     a caixa de conteúdo do __inner: 1620px em 1920 (e no ultrawide, que a sobra
     segura), 1256px em 1400 — (160,59 − 64) / 364 = 0,26535 px por px. */
  margin-left: clamp(64px, 64px + (100% - 1256px) * 0.26535, 160.59px);
}

/* Passador "anterior" + "próximo" (Group 2, nodes 6:99 + 6:100) */

.summit-vozes__nav-group {
  flex: 0 0 auto;
  display: flex;
  gap: var(--summit-vozes-nav-gap);
  margin-top: 24px;                  /* respiro entre a base do card e os botões —
                                        não está no Figma, que põe a seta ao lado */
}

.summit-vozes__nav {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--summit-vozes-nav);
  cursor: pointer;
}

.summit-vozes__nav-icon {
  display: block;
}

.summit-vozes__nav:disabled {
  cursor: default;                   /* o cinza #bdbbb7 do Figma já é o estado inerte:
                                        no início da faixa não há para onde voltar */
}

.summit-vozes__nav:not(:disabled):hover,
.summit-vozes__nav:not(:disabled):focus-visible {
  color: var(--summit-color-ink);    /* acabamento — não está no Figma */
}

/* Faixa de depoimentos */

.summit-vozes__track {
  flex: 0 0 auto;                    /* dentro de uma coluna, `1 1 auto` esticaria a
                                        faixa na vertical */
  align-self: stretch;
  min-width: 0;
  display: flex;
  gap: var(--summit-vozes-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;                  /* sem JS: a faixa rola nativamente — é o único
                                        jeito de chegar aos outros cards */
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Barra escondida: enquanto havia só a seta "anterior", ela era a única forma
     de avançar com o mouse e ficou à mostra (custo: +15px de altura no
     Windows/Linux). Com o par de setas isso deixou de valer, e a seção volta aos
     614px do Figma em qualquer sistema. Swipe, trackpad e teclado continuam
     rolando a faixa. Ver README. */
  scrollbar-width: none;             /* Firefox */
}

.summit-vozes__track::-webkit-scrollbar {
  display: none;                     /* Chrome/Safari/Edge */
}

/* Com JS a faixa só anda pelos botões e pelo slide automático: `overflow: hidden`
   corta a rolagem lateral livre (trackpad, roda, arraste), que deixava um card
   pela metade à vista e quebrava a página — o carrossel agora para sempre em
   cards inteiros. Em tela de toque o swipe continua valendo (a parada é por
   snap, também em cards inteiros). O atributo é posto pelo JS. */
.summit-vozes[data-vozes-js] .summit-vozes__track {
  overflow-x: hidden;
}

@media (pointer: coarse) {
  .summit-vozes[data-vozes-js] .summit-vozes__track {
    overflow-x: auto;
  }
}

.summit-vozes__slide {
  /* Dois cards inteiros por vista, sempre: a largura é a da faixa menos o gap,
     dividida por dois — em 1920 (faixa de 1110,41px) dá exatamente os 546,21 do
     Figma; abaixo disso os cards encolhem juntos em vez de o segundo sair cortado
     na borda. A porcentagem lê a largura da faixa porque flex-basis resolve
     contra o contêiner flex. */
  flex: 0 0 calc((100% - var(--summit-vozes-gap)) / 2);
  display: flex;                     /* estica o card até a altura do mais alto */
  scroll-snap-align: start;
}

/* Card (Background 1:179 / 1:190) */

.summit-vozes__card {
  display: flex;
  flex-direction: column;
  width: 100%;                       /* a largura é do slide (ver .summit-vozes__slide) */
  min-height: 0;                     /* a altura sai do conteúdo: em 1920 soma 409,9 (os
                                        410 do frame); com o card mais estreito a arte
                                        é mais baixa e um mínimo fixo deixaria um vão
                                        vazio no pé do card */
  height: 100%;
  padding: 11.25px 15.1px 26.84px;   /* 15,1 = (546,21 − 516)/2; o topo 11,25 é a média
                                        dos dois cards (12,25 e 10,25 no Figma — 2px de
                                        ruído de import, ver README) */
  background: var(--summit-vozes-card-bg);
  color: var(--summit-vozes-card-ink);
}

/* Os dois temas do Figma. Cada variante só troca as quatro cores abaixo — um card
   novo entra escolhendo uma delas, não reescrevendo o bloco. */

.summit-vozes__card--vermelho {
  --summit-vozes-card-bg:    var(--summit-vozes-red);
  --summit-vozes-card-ink:   #ffffff;
  --summit-vozes-card-rule:  var(--summit-vozes-rule-red);
  --summit-vozes-card-event: #ffffff;
}

.summit-vozes__card--ciano {
  --summit-vozes-card-bg:    var(--summit-vozes-cyan);
  --summit-vozes-card-ink:   var(--summit-color-ink);
  --summit-vozes-card-rule:  var(--summit-vozes-rule-cyan);
  --summit-vozes-card-event: var(--summit-vozes-event);
}

.summit-vozes__media {
  display: block;                    /* é um <a>: sem isso o inline deixaria uma
                                        folga de linha-base sob a arte */
  position: relative;
  width: 100%;
  aspect-ratio: 516 / 287;           /* 516 x 287 na lona de 1920 */
  overflow: hidden;
}

/* Anel de play — acabamento da conversão, não está no node 1:168. Sem ele a arte
   não avisa que abre um vídeo. São os mesmos dois SVGs da seção 6, reduzidos. */

.summit-vozes__play {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Fração do painel, não px fixo: o card encolhe no mobile e um anel fixo
     passaria de 23% da altura do painel (o que o Figma desenha) para 51% numa
     tela de 320px. 66,75/516 = 12,936% devolve exatamente os 66,75px na lona de
     1920 — que são os 90,0299px da seção 6 na proporção dos dois painéis
     (516/696 = 0,741379). Nenhum valor foi arredondado no olho. */
  width: 12.936%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
  pointer-events: none;
}

.summit-vozes__play-ring {
  display: block;
  width: 100%;
  height: 100%;
}

.summit-vozes__play-tri {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52.4611%;                   /* 47,2307 / 90,0299 do anel */
  height: auto;                      /* o atributo `height` do <img> é uma declaração
                                        de verdade (presentational hint) e travaria a
                                        altura, deixando o `aspect-ratio` inerte */
  aspect-ratio: 47.2307 / 40.903;    /* a altura sai da razão do próprio polígono */
  /* No Figma o triângulo é um polígono apontando para cima, girado 90°, com o
     centro deslocado à direita do centro do anel (compensação óptica). Os dois
     deslocamentos são do tamanho do triângulo, não do anel, porque é contra a
     caixa do próprio elemento que translate() lê porcentagem:
     6,386/47,2307 = 13,521% e −0,437/40,903 = −1,0684%. */
  transform: translate(-50%, -50%)
             translate(13.521%, -1.0684%)
             rotate(90deg);
}

.summit-vozes__media:hover .summit-vozes__play,
.summit-vozes__media:focus-visible .summit-vozes__play {
  transform: translate(-50%, -50%) scale(1.06);
}

.summit-vozes__media > img {         /* filho DIRETO: os dois <img> do anel de play
                                        moram dentro do <span> e seriam pegos por
                                        `.summit-vozes__media img`, que ainda por
                                        cima vence `.summit-vozes__play-tri` na
                                        especificidade (0,1,1 contra 0,1,0) — o
                                        triângulo saía do tamanho do anel */
  position: absolute;                /* o Figma amplia a arte além do painel; estes
                                        quatro valores são os do fill (ver README) */
  left: -0.97%;
  top: -1.12%;
  width: 101.55%;
  height: 102.36%;
  max-width: none;
  display: block;
}

.summit-vozes__event {
  margin: 15px -0.6px 0 0;           /* 15px = 313,25 − 298,25. A margem negativa devolve
                                        o letter-spacing que o CSS aplica depois do
                                        último caractere e que empurraria a linha 0,6px
                                        para a esquerda num bloco alinhado à direita */
  text-align: right;                 /* encosta na borda direita da arte */
  font-weight: 700;
  font-size: 0.625rem;               /* 10px */
  line-height: 15px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--summit-vozes-card-event);   /* no card ciano o Figma usa preto puro,
                                              diferente do #141414 do nome/cargo */
}

.summit-vozes__footer {
  margin: 7px 19.9px 0;              /* 7px = 335,25 − 328,25; 15,1 + 19,9 = 35, o recuo
                                        da régua e do texto na borda do card */
  padding-top: 12.91px;              /* 349,16 − (335,25 + 1 da régua) */
  border-top: 1px solid var(--summit-vozes-card-rule);
}

.summit-vozes__name {
  margin: 0;
  font-weight: 700;
  font-size: 0.625rem;               /* 10px */
  line-height: 15px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.summit-vozes__role {
  margin: 4px 0 0;
  font-weight: 400;
  font-size: 0.60625rem;             /* 9.7px */
  line-height: 15px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* --- Modal de vídeo (compartilhado com as seções 6-patrocinador e 8-experiencia) --- */
/* MESMO bloco nas três seções que têm vídeo (6-patrocinador, 8-experiencia e
   12-vozes-2025). É duplicação consciente: cada seção precisa valer sozinha no
   seu preview e os IIFEs não compartilham estado, então o componente é combinado
   por convenção — a classe `.summit-video-modal` e o marcador
   `[data-summit-video-modal]`, que é como uma seção fecha o vídeo da outra.
   Mexeu aqui, mexe nas outras duas. As regras são idênticas; só os nomes de
   token mudam, porque cada seção declara o seu (e todos valem o mesmo). */

.summit-video-modal {
  /* `fit-content` é o que faz o `margin: auto` centrar: com `width: auto` o
     <dialog> modal (que vem com `inset: 0`) estica para a largura toda, sobra
     zero para o auto distribuir, e a moldura encosta na esquerda.
     `max-width/height: none` derrubam o teto do próprio navegador
     (`calc(100% - 6px - 2em)`), que cortaria o vídeo nas laterais. */
  position: fixed;                /* explícito (o navegador já aplica isso via
                                      dialog:modal, mas author CSS sobrepõe a UA
                                      stylesheet — precisa declarar de novo para
                                      não perder o posicionamento fixo/centralizado
                                      ao virar âncora do botão fechar absolute) */
  width: fit-content;
  height: fit-content;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.summit-video-modal::backdrop {
  background: rgba(8, 8, 8, 0.92);
}

/* 16:9 preso pelos DOIS lados: a largura manda até a altura virar o limite,
   e aí o `calc` de dvh assume — sem isso, em tela baixa e larga o vídeo
   passa por baixo da dobra. */
.summit-video-modal__frame {
  width: min(92vw, 1280px, calc(84dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.summit-video-modal__player {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.summit-video-modal__close {
  position: absolute;            /* preso à moldura do vídeo, no canto superior
                                    externo direito — não mais fixo ao viewport */
  top: -16px;
  right: -16px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #080808;
  color: var(--summit-color-white);
  font-family: var(--summit-font-primary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.summit-video-modal__close:hover,
.summit-video-modal__close:focus-visible {
  border-color: var(--summit-vozes-cyan);
  color: var(--summit-vozes-cyan);
}

/* Setas do carrossel de depoimentos dentro do modal — só esta seção monta
   estes botões (as outras duas seções de vídeo têm um único vídeo cada).
   O grupo não gera caixa própria no desktop: cada seta continua absolute
   contra .summit-video-modal, do lado do quadro. Só vira uma fileira de
   verdade no mobile (ver breakpoint abaixo). */
.summit-video-modal__nav-group {
  display: contents;
}

.summit-video-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #080808;
  color: var(--summit-color-white);
  font-family: var(--summit-font-primary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.summit-video-modal__nav--prev { left: 16px; }
.summit-video-modal__nav--next { right: 16px; }

.summit-video-modal__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.summit-video-modal__nav:not(:disabled):hover,
.summit-video-modal__nav:not(:disabled):focus-visible {
  border-color: var(--summit-vozes-cyan);
  color: var(--summit-vozes-cyan);
}

/* Legenda abaixo do quadro: nome + cargo do depoimento, os mesmos dados já
   usados no rodapé do card (.summit-vozes__name / .summit-vozes__role). */
.summit-video-modal__caption {
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.summit-video-modal__caption-nome {
  font-family: var(--summit-font-primary);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--summit-color-white);
}

.summit-video-modal__caption-cargo {
  font-family: var(--summit-font-primary);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--summit-color-body);
}

/* Mobile: o quadro do vídeo ocupa quase toda a largura da tela (92vw), então
   o botão fechar "para fora" do canto (top/right negativos) e as setas
   "para fora" das laterais do quadro furavam a viewport — o botão fechar
   ficava parcialmente cortado/sobreposto e causava rolagem horizontal.
   Aqui os três voltam para o fluxo normal: fechar acima do quadro (sem
   sobrepor nada), setas como uma fileira abaixo da legenda — mais perto do
   polegar do que grudadas nas bordas do vídeo. */
@media (max-width: 767.98px) {
  .summit-video-modal {
    display: flex;
    flex-direction: column;
    /* trava a largura no valor do quadro (a mesma régua de 92vw que o
       .summit-video-modal__frame já usa): sem isto, um nome/cargo comprido
       na legenda mede como texto sem quebra ao calcular o `fit-content` do
       pai e alarga o modal além da viewport — é a quebra de layout relatada */
    width: min(92vw, 1280px, calc(84dvh * 16 / 9));
  }

  .summit-video-modal__close {
    position: static;
    align-self: flex-end;
    margin: 0 0 12px;
  }

  /* a legenda já ganha 100% da largura travada acima (align-items:stretch é
     o padrão do flex column); só falta garantir que o texto quebre em vez de
     esticar o pai caso venha uma palavra isolada muito longa */
  .summit-video-modal__caption-nome,
  .summit-video-modal__caption-cargo {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .summit-video-modal__nav-group {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
  }

  .summit-video-modal__nav {
    position: static;
    transform: none;
  }
}

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

  .summit-vozes__play {
    transition-duration: 1ms;
  }
}

/* RESPONSIVO */

/* Não há frame mobile no Figma — daqui para baixo é decisão da conversão (README).
   A lona de referência é 1920, onde os dois cards fecham exatamente contra o recuo
   de 96px da direita. Abaixo disso continuam dois cards inteiros por vista (mais
   estreitos), e abaixo de 768px um só — nunca um card cortado. O título encolhe
   mantendo as proporções do Figma (line-height = 0,846 x corpo; tracking =
   −0,0783 x corpo). */

@media (max-width: 1399.98px) {
  .summit-vozes__inner {
    padding: 88px 48px 76px 96px;    /* mesmo recuo que o Header e o Tema adotam fora
                                        da lona de 1920 */
  }

  .summit-vozes__faixa {
    margin-left: 64px;               /* onde a rampa de cima chega em 1400 — daqui para
                                        baixo a calha fica fixa */
  }
}

@media (max-width: 1247.98px) {
  .summit-vozes__inner {
    padding-left: 48px;
  }

  .summit-vozes__intro {
    flex-basis: 300px;
    padding-right: 24px;
  }

  .summit-vozes__title {
    /* 96 + 349 + 109 + 25 + 26,6 = 605 antes do primeiro card: abaixo de ~1250px
       não sobra nem meio card à vista. Com 72px a linha mais larga ("VIVEU,") mede
       195px e cabe nos 276px da coluna. */
    font-size: 4.5rem;               /* 72px */
    line-height: 60.9px;
    letter-spacing: -5.64px;
  }

  .summit-vozes__faixa {
    margin-left: 40px;
  }
}

@media (max-width: 991.98px) {
  .summit-vozes__inner {
    flex-wrap: wrap;                 /* a coluna do título sai de cima da faixa */
    padding: 72px 32px 64px;
  }

  .summit-vozes__intro {
    flex: 0 0 100%;
    padding-right: 0;
  }

  .summit-vozes__title {
    font-size: 3.75rem;              /* 60px */
    line-height: 50.8px;
    letter-spacing: -4.7px;
  }

  .summit-vozes__faixa {
    flex: 0 0 100%;                  /* a faixa passa a ocupar a linha inteira, abaixo
                                        do título */
    margin-left: 0;
    margin-top: 40px;
  }

  .summit-vozes__card {
    min-height: 0;                   /* a altura passa a ser a soma do conteúdo */
  }
}

@media (max-width: 767.98px) {
  .summit-vozes__inner {
    padding: 56px 24px 48px;
  }

  .summit-vozes__title {
    font-size: 3rem;                 /* 48px */
    line-height: 40.6px;
    letter-spacing: -3.76px;
  }

  .summit-vozes {
    --summit-vozes-gap: 12px;
  }

  .summit-vozes__slide {
    flex-basis: 100%;                /* um card inteiro por vista: dois de ~350px
                                        deixariam a arte com 320px e o cargo em três
                                        linhas */
  }
}

@media (max-width: 575.98px) {
  .summit-vozes__inner {
    padding: 48px 16px 40px;
  }

  .summit-vozes__intro {
    gap: 16px;
  }

  .summit-vozes__title {
    font-size: 2.25rem;              /* 36px — "VIVEU," mede 98px e cabe nos 288px
                                        úteis de uma tela de 320px */
    line-height: 30.5px;
    letter-spacing: -2.82px;
  }

  .summit-vozes__card {
    padding-bottom: 20px;
  }

  .summit-vozes__footer {
    margin-inline: 12px;             /* 35px de recuo num card de ~264px comeria 27% da
                                        largura útil do rodapé */
  }
}


/* ============================================================ */
/* MOTION (acabamento — não está no Figma)                      */
/* ============================================================ */
/* O reveal entra no .summit-vozes__faixa com a variante `up`, nunca
   `scale`: o carrossel lê a largura dos slides, e uma escala no
   contêiner devolveria medida errada em getBoundingClientRect. */

.summit-vozes__card {
  transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.summit-vozes__card:hover {
  transform: translateY(-4px);
}

.summit-vozes__nav {
  transition: color 200ms ease, transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.summit-vozes__nav:not(:disabled):hover {
  transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .summit-vozes__card,
  .summit-vozes__nav {
    transition-duration: 1ms;
  }

  .summit-vozes__card:hover,
  .summit-vozes__nav:not(:disabled):hover {
    transform: none;
  }
}


/* ============================================================ */
/* 11/12 — INGRESSOS — Revisão Pissutti 64:2                   */
/* origem: sections/4-ingressos.css                            */
/* ============================================================ */
/* SECTION */

.summit-ingressos,
.summit-ingressos * {
  box-sizing: border-box;       /* o merge não tem reset global: min-height + padding das
                                    linhas (126px) e do rodapé (183px) dependem disto */
}

.summit-ingressos {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* cabeçalho, cards e nota param sozinhos em --summit-ingressos-max (1298px),
     então o recuo lateral só precisa do mínimo que ainda cabe os dois cards de
     629px (até 1426px); a sobra entra acima da régua de 1920, por convenção da
     página. O 134,4px do frame seria artefato: entre 1400 e 1567px ele
     derrubaria os cards para 545px e o descritivo do Summit entraria na faixa
     do preço riscado. */
  padding: 112px calc(64px + var(--summit-sobra)) 117.5px;
  background: var(--summit-ingressos-bg);
  font-family: var(--summit-font-primary);
  scroll-margin-top: 82px;      /* altura do Header fixo — âncora #ingressos da nav */
}

/* --- cabeçalho da seção (node 64:203) ------------------------ */

.summit-ingressos__head {
  display: flex;
  width: 100%;
  max-width: var(--summit-ingressos-max);   /* mesmo bloco dos cards: título e data
                                               mantêm a relação com eles em qualquer largura */
}

.summit-ingressos__intro {
  flex: 1 1 0;
  min-width: 0;
  margin-left: -11.8px;         /* o grid do Figma abre com uma coluna vazia de 90px + gap
                                    de 76.8px (134 + 90 + 76,8 = 300,8): é isso que desloca
                                    o título 11,8px à esquerda da borda dos cards (312,6) */
  display: flex;
  flex-direction: column;
  gap: 20.875px;
}

.summit-ingressos__eyebrow {
  margin: 0;                    /* o merge não tem reset de <p>; sem isto entram 16px de UA
                                    acima e abaixo e o cabeçalho cresce */
  display: flex;
  align-items: center;
  gap: 10px;
}

.summit-ingressos__rule {
  flex-shrink: 0;
  width: 35px;
  height: 3px;
  background: var(--summit-ingressos-red);
}

.summit-ingressos__eyebrow-text {
  display: block;               /* sem isto o span herda o strut de 16px do <p> */
  font-weight: 700;
  font-size: 0.644rem;          /* 10.3px */
  line-height: 11px;
  letter-spacing: 1.98px;
  text-transform: uppercase;
  color: var(--summit-color-white);
}

.summit-ingressos__titulo {
  margin: 0;
  max-width: 10.5em;            /* a linha inteira mede 11,9em e "ESCOLHA SUA" mede 6,17em:
                                    10,5em segura a quebra em duas linhas em qualquer corpo */
  padding-bottom: 0.625px;      /* node 64:208 — fecha os 188,5px do bloco de cabeçalho */
  font-weight: 400;
  font-size: 5.906rem;          /* 94.5px */
  line-height: 77.76px;
  letter-spacing: -7.2px;
  text-transform: uppercase;
  color: var(--summit-color-white);
}

/* A quebra em duas linhas vem da largura da coluna (961,4px): "ESCOLHA SUA" mede 583px
   e não cabe junto com "EXPERIÊNCIA" (521px) — não há <br> no markup. */
.summit-ingressos__titulo-destaque {
  color: var(--summit-ingressos-cyan);
}

.summit-ingressos__meta {
  flex: 0 0 270px;              /* a data começa em x=1339, a 1028px da borda dos cards:
                                    1298 − 1028 = 270 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 48px;
}

.summit-ingressos__data {
  margin: 0;
  font-weight: 700;
  font-size: 1.381rem;          /* 22.1px */
  line-height: 36px;
  letter-spacing: -0.72px;
  text-transform: uppercase;
  color: var(--summit-color-accent);
}

.summit-ingressos__local {
  margin: 0;
  font-weight: 700;
  font-size: 0.75rem;           /* 12px */
  line-height: 18px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--summit-color-white);
}

/* --- bloco dos cards (nodes 64:424 e 64:370) ------------------ */

.summit-ingressos__cards {
  display: flex;
  align-items: flex-start;      /* cada card tem a altura do seu conteúdo: com accordions
                                    independentes, esticar o mais baixo abriria um vão
                                    entre as linhas e o rodapé */
  gap: var(--summit-ingressos-gap);
  width: 100%;
  max-width: var(--summit-ingressos-max);
  margin-top: 80.5px;           /* cabeçalho termina em y=300,5 e os cards começam em 381 */
}

.summit-ingressos__card {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;             /* recorta a fita diagonal na quina do card */
  background: var(--summit-ingressos-card);
  border: 1px solid var(--summit-ingressos-borda);
}

.summit-ingressos__card--destaque {
  box-shadow: 0 0 0 3px var(--summit-color-accent);
}

/* --- topo do card (node 64:371) ------------------------------ */

.summit-ingressos__card-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 30px var(--summit-ingressos-pad) 26px;
  background: var(--summit-ingressos-card-alt);
  border-bottom: 3px solid var(--summit-color-accent);
}

.summit-ingressos__card-tag {
  margin: 0;
  font-weight: 700;
  font-size: 0.625rem;          /* 10px */
  line-height: 15px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--summit-ingressos-tag);
}

.summit-ingressos__card-titulo {
  margin: 0;
  font-weight: 400;
  font-size: 2.5rem;            /* 40px */
  line-height: 40px;
  letter-spacing: -1.8px;
  text-transform: uppercase;
  color: var(--summit-color-ink);
}

/* --- linhas de ingresso (nodes 64:376 / 64:392 / 64:402) ------ */

.summit-ingressos__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.summit-ingressos__item,
.summit-ingressos__ingresso {
  display: block;
}

/* A linha inteira é o <summary>: clicar em qualquer ponto dela abre o painel.
   Rótulo no topo, descritivo encostado no toggle na base, preço centrado na
   altura — a mesma composição do Figma, que posiciona os quatro em absoluto. */
.summit-ingressos__linha {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--summit-ingressos-row);
  padding: 22px var(--summit-ingressos-pad) 8px;
  border-bottom: 1px solid var(--summit-ingressos-linha);
  list-style: none;
  cursor: pointer;
}

.summit-ingressos__linha::-webkit-details-marker {
  display: none;
}

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

.summit-ingressos__item-nome {
  flex: 1 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.summit-ingressos__item-label {
  display: block;
  padding-right: var(--summit-ingressos-preco-zona);   /* o rótulo quebra em vez de entrar
                                                          na faixa do preço */
  font-weight: 700;
  font-size: 1.4375rem;         /* 23px */
  line-height: 34.5px;
  text-transform: uppercase;
  color: var(--summit-color-ink);
}

.summit-ingressos__item-desc {
  display: block;
  margin-top: auto;             /* desce até encostar no toggle — em todas as linhas do
                                    Figma o descritivo termina onde o toggle começa */
  padding-top: 6px;
  font-weight: 400;
  font-size: 0.8125rem;         /* 13px */
  line-height: 20px;
  text-transform: uppercase;
  color: var(--summit-ingressos-preto);
}

.summit-ingressos__item-desc b {
  font-weight: 700;
}

/* Larguras das caixas de texto do Figma. A do Full Experience é a que força a
   quebra "…EM UMA / EXPERIÊNCIA COMPLETA" — a linha inteira mede 340px. */
.summit-ingressos__item-desc--summit   { max-width: 320px; }
.summit-ingressos__item-desc--full     { max-width: 271px; }
.summit-ingressos__item-desc--workshop {
  max-width: 425px;
  font-size: 0.6875rem;         /* 11px — corpo menor porque a 2ª linha é longa */
  line-height: 16px;
}

.summit-ingressos__precos {
  position: absolute;
  /* Ancorado a uma distância fixa do topo da linha (46px = metade dos 126px da linha
     menos metade dos 34px do preço cheio — o mesmo ponto que top:50% dava numa linha
     de altura padrão). Fixo, e não mais centralizado na altura real da linha: no
     descritivo do Workshop, que quebra em 2-3 linhas e estica a linha inteira, um
     centro dinâmico empurrava o preço riscado para baixo, quase colado no texto. */
  top: 46px;
  right: var(--summit-ingressos-pad);
  display: flex;
  align-items: flex-end;        /* alinha a base da caixa do preço riscado com a do preço cheio */
  gap: 12px;
}

.summit-ingressos__de {
  display: block;
  font-weight: 400;
  font-size: 0.8125rem;         /* 13px */
  line-height: 19.5px;
  color: var(--summit-ingressos-de);
  text-decoration-line: line-through;
  text-decoration-thickness: from-font;
  text-decoration-skip-ink: none;
}

.summit-ingressos__por {
  display: block;
  font-weight: 700;
  font-size: 2.125rem;          /* 34px */
  line-height: 34px;
  letter-spacing: -1.7px;
  color: var(--summit-color-accent);
  white-space: nowrap;
}

/* Toggle "O QUE ESTÁ INCLUÍDO | ↗" — canto inferior direito da linha */
.summit-ingressos__toggle {
  display: flex;
  align-items: center;
  align-self: flex-end;
  font-weight: 700;
  font-size: 0.6875rem;         /* 11px */
  line-height: 15px;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--summit-color-accent);
}

.summit-ingressos__toggle-label {
  display: block;
}

.summit-ingressos__linha:hover .summit-ingressos__toggle-label {
  text-decoration: underline;   /* acabamento — não está no Figma */
  text-underline-offset: 2px;
}

.summit-ingressos__toggle-sep {
  display: block;
  margin: 0 4px 0 8px;          /* medido: 8px entre "INCLUÍDO" e "|", 7px entre "|" e a seta
                                    (a seta tem 3,5px de folga dentro da caixa de 15px) */
}

.summit-ingressos__toggle-arrow {
  display: inline-block;
  width: 15px;                  /* caixa do glifo no Figma (15 x 14) */
  height: 14px;
  font-size: 0.875rem;          /* 14px — corpo do glifo: a máscara mede 0,56em ≈ 7,8px (8 x 7 no screenshot) */
  color: var(--summit-color-ink);
  background-color: currentColor;
  -webkit-mask: var(--summit-seta) no-repeat center / 0.56em;
  mask: var(--summit-seta) no-repeat center / 0.56em;
  transform: rotate(90deg);     /* fechado: "↘" — o Figma gira o mesmo "↗" 90° */
  transition: transform 160ms ease;
}

.summit-ingressos__ingresso[open] .summit-ingressos__toggle-arrow {
  transform: none;              /* aberto: "↗" */
}

/* --- painel "o que está incluído" (node 64:422) --------------- */

.summit-ingressos__incluido {
  padding: 12px 16px 40px 22px; /* texto em x=22 com 589px de largura; 12px do topo do painel
                                    à 1ª linha e 40px da última à base (card Regular) */
  background: var(--summit-ingressos-card-alt);
  box-shadow: inset 5px 4px 4px 0 var(--summit-ingressos-sombra);
  font-weight: 400;
  font-size: 1rem;              /* 16px */
  line-height: 29px;
  color: var(--summit-ingressos-preto);
}

.summit-ingressos__checks {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O Figma escreve o check como texto ("✓ ") em Inter. A Inter do Google Fonts não
   traz U+2713 (nem ↗ U+2197 / ⇄ U+21C4 — subset latin), e o glifo de fallback do
   sistema é pesado e muda por plataforma. Aqui o check é um traço SVG com a forma
   e o tamanho do glifo da Inter medidos no screenshot (10 x 8px, 6px até o texto). */
.summit-ingressos__checks li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 8px;
  margin-right: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.3 3.7 7 9 1.3' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.summit-ingressos__incluido-nota {
  margin: 0;
  font-weight: 600;
  font-style: italic;
}

.summit-ingressos__parcelar {
  margin: 29px 0 0;             /* uma linha vazia (29px) entre a lista e o parcelamento */
  font-weight: 700;
  color: var(--summit-color-accent);
}

/* Abertura animada onde o navegador já anima altura de <details>
   (Chromium 131+); nos demais o painel abre de uma vez, como sempre. */
.summit-ingressos__ingresso {
  interpolate-size: allow-keywords;
}

.summit-ingressos__ingresso::details-content {
  height: 0;
  overflow: clip;
  transition: height 220ms ease, content-visibility 220ms allow-discrete;
}

.summit-ingressos__ingresso[open]::details-content {
  height: auto;
}

/* --- rodapé do card (node 64:413) ----------------------------- */

.summit-ingressos__card-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 280px;            /* alinha a altura com o rodapé do card Parceiros: parcela +
                                    CTA + pergunta do código + botão de código + nota somam
                                    ~270px de conteúdo; o card Regular, mais curto, estica
                                    até essa mesma altura. Reajustar se algum item deste
                                    rodapé mudar de tamanho/quantidade de novo. */
  padding: 28px var(--summit-ingressos-pad) 32px;
  background: var(--summit-ingressos-card-alt);
}

.summit-ingressos__parcela {
  margin: 0;
  font-weight: 400;
  font-size: 0.8125rem;         /* 13px */
  line-height: 19.5px;
  text-align: center;
  text-transform: uppercase;
  color: var(--summit-color-ink);
}

.summit-ingressos__parcela strong {
  font-weight: 700;
}

.summit-ingressos__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 20px 18px;
  background: var(--summit-color-accent);
  color: var(--summit-color-ink);
  text-decoration: none;
  transition: background-color 160ms ease;
}

.summit-ingressos__cta:hover,
.summit-ingressos__cta:focus-visible {
  background: #00b088;          /* acabamento — não está no Figma (mesmo hover do Header) */
}

.summit-ingressos__cta-label {
  display: block;
  font-weight: 700;
  font-size: 0.694rem;          /* 11.1px */
  line-height: 18px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
}

/* Seta "↗" do Figma como máscara SVG (--summit-seta): a Inter do Google Fonts não
   traz U+2197 e o glifo caía em fonte do sistema. A cor é a do texto (currentColor). */
.summit-ingressos__cta-icon {
  flex-shrink: 0;
  font-size: 0.75rem;           /* 12px — corpo do glifo, que dimensiona a máscara */
  display: inline-block;
  vertical-align: middle;
  width: 1em;                   /* avanço do glifo "↗" da Inter: caixa de 1em com a seta de 0,56em centrada (o desenho
                                   ocupa 6,71 dos 7 do viewBox: 6,4px de tinta a 12px — medido 6–7 nos screenshots) */
  height: 1em;
  background-color: currentColor;   /* a cor é a do texto ao redor, como era o glifo */
  -webkit-mask: var(--summit-seta) no-repeat center / 0.56em;
  mask: var(--summit-seta) no-repeat center / 0.56em;
}

.summit-ingressos__card-nota {
  margin: 0;
  font-weight: 400;
  font-size: 0.5875rem;         /* 9.4px */
  line-height: 14px;
  text-align: center;
  color: var(--summit-ingressos-sub);
}

/* --- CTA secundário "solicite seu código de cliente" (card Parceiros) --- */

.summit-ingressos__codigo-pergunta {
  margin: 0;
  font-weight: 400;
  font-size: 0.8125rem;         /* 13px, igual à .summit-ingressos__parcela */
  line-height: 14px;
  text-align: center;
  color: var(--summit-color-ink);
}

.summit-ingressos__codigo-cta {
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  padding: 14px 16px;
  background: #d8f5ea;
  border: 1.5px solid var(--summit-color-accent);
  color: var(--summit-color-ink);
  text-decoration: none;
  transition: background-color 160ms ease;
}

.summit-ingressos__codigo-cta:hover,
.summit-ingressos__codigo-cta:focus-visible {
  background: var(--summit-color-accent);
  color: var(--summit-color-ink);
}

.summit-ingressos__codigo-cta-label {
  display: block;
  font-weight: 700;
  font-size: 0.694rem;          /* 11.1px, igual à .summit-ingressos__cta-label */
  line-height: 18px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
}

/* --- fita "Melhor condição" (node 64:472) ---------------------- */

/* O Figma entrega a fita como uma caixa do tamanho exato do bounding box da barra girada
   (189,94 x 25 a 36° => 168,359 x 131,869) posicionada por `left`. Aqui a âncora é a direita
   (-31,2px = 627 - 489,84 - 168,359), que dá o mesmo recorte em qualquer largura de card. */
.summit-ingressos__fita {
  position: absolute;
  top: -28.43px;
  right: -31.2px;
  z-index: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168.359px;
  height: 131.869px;
  pointer-events: none;
}

.summit-ingressos__fita-bar {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 189.94px;
  height: 25px;
  padding: 8px 45px;
  background: var(--summit-color-accent);
  transform: rotate(36deg);
  font-weight: 400;
  font-size: 0.525rem;          /* 8.4px */
  line-height: 9px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--summit-color-ink);
}

/* --- nota de rodapé da seção (node 64:216) --------------------- */

.summit-ingressos__nota {
  margin: 16.5px 0 0;           /* base do card em 1436, linha de texto de 15px centrada em 1460 */
  width: 100%;
  max-width: var(--summit-ingressos-max);
  padding-left: 23px;           /* o Figma recua a nota 23px da borda dos cards (x=335,6) */
  font-weight: 400;
  font-size: 0.6875rem;         /* 11px */
  line-height: 15px;
  color: var(--summit-ingressos-nota);
}

/* RESPONSIVO */

@media (max-width: 1399.98px) {
  .summit-ingressos {
    padding: 100px 64px;
    --summit-ingressos-pad: 26px;
    --summit-ingressos-row: 116px;
    --summit-ingressos-preco-zona: 180px;   /* bloco de preço a 28px mede ~162px */
  }

  .summit-ingressos__intro {
    margin-left: 0;             /* a coluna vazia de 90px do grid é lona de 1920 — abaixo
                                    disso o título alinha com a borda dos cards */
  }

  .summit-ingressos__titulo {
    font-size: 4.5rem;          /* 72px */
    line-height: 60px;
    letter-spacing: -5px;
  }

  .summit-ingressos__meta {
    padding-top: 30px;
  }

  .summit-ingressos__card-titulo {
    font-size: 2.125rem;        /* 34px */
    line-height: 34px;
    letter-spacing: -1.4px;
  }

  .summit-ingressos__item-label {
    font-size: 1.25rem;         /* 20px */
    line-height: 30px;
  }

  .summit-ingressos__item-desc {
    font-size: 0.75rem;         /* 12px */
    line-height: 18px;
  }

  .summit-ingressos__item-desc--workshop {
    font-size: 0.6875rem;       /* 11px — já era o menor corpo */
    line-height: 16px;
  }

  .summit-ingressos__por {
    font-size: 1.75rem;         /* 28px */
    line-height: 30px;
    letter-spacing: -1.2px;
  }

  .summit-ingressos__de {
    font-size: 0.75rem;         /* 12px */
  }

  .summit-ingressos__precos {
    top: 43px;                  /* 116px de linha, preço de 30px: mesma conta do desktop */
  }

  .summit-ingressos__nota {
    padding-left: 0;
  }
}

@media (max-width: 1247.98px) {
  .summit-ingressos {
    padding: 88px 48px;

    /* Com os cards empilhados, a régua do bloco passa a ser a de UM card
       — (1298 − 40) / 2 = 629px, a mesma largura que eles têm lado a lado.
       Cabeçalho, cards e nota continuam presos à mesma régua, e o
       `align-items: center` da seção centraliza a coluna inteira na página.
       Sem isso o bloco seguia com 1298px e os cards ficavam encostados na
       esquerda, com a folga toda sobrando de um lado só. */
    --summit-ingressos-max: 629px;
  }

  .summit-ingressos__titulo {
    font-size: 3.75rem;         /* 60px */
    line-height: 52px;
    letter-spacing: -4px;
  }

  /* Dois cards lado a lado só cabem até ~1250px: abaixo disso o descritivo do
     Summit entra na faixa do preço riscado. Empilhar mantém a linha intacta.

     `align-items: stretch` corrige o `flex-start` da regra base: em coluna, ele
     é o eixo HORIZONTAL, e o card ficava com a largura do próprio conteúdo
     (592px) colado à esquerda. Esticado, ele fecha os 629px da régua — a mesma
     largura que tem lado a lado no desktop, então o miolo do card continua
     sendo exatamente o desenho aprovado — e nasce alinhado com o cabeçalho e
     com a nota, que já param na mesma régua. `center` não serviria: manteria
     os 592px e deixaria o card 18px mais estreito que o resto da coluna. */
  .summit-ingressos__cards {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    margin-top: 56px;
  }

  .summit-ingressos__card {
    flex: 0 0 auto;
  }
}

@media (max-width: 991.98px) {
  .summit-ingressos {
    padding: 72px 32px;
  }

  .summit-ingressos__head {
    flex-direction: column;     /* sem largura para as duas colunas do Figma lado a lado */
    gap: 24px;
  }

  .summit-ingressos__meta {
    flex: 0 0 auto;
    padding-top: 0;
  }

  .summit-ingressos__titulo {
    font-size: 3rem;            /* 48px */
    line-height: 42px;
    letter-spacing: -3px;
  }
}

@media (max-width: 767.98px) {
  .summit-ingressos {
    padding: 64px 24px;
    --summit-ingressos-pad: 22px;
    --summit-ingressos-row: 108px;
    --summit-ingressos-preco-zona: 172px;   /* bloco de preço a 26px mede ~155px */
  }

  .summit-ingressos__titulo {
    font-size: 2.5rem;          /* 40px */
    line-height: 36px;
    letter-spacing: -2.4px;
  }

  .summit-ingressos__card-head {
    padding: 24px var(--summit-ingressos-pad) 20px;
  }

  .summit-ingressos__card-titulo {
    font-size: 1.875rem;        /* 30px */
    line-height: 32px;
    letter-spacing: -1.2px;
  }

  .summit-ingressos__item-label {
    font-size: 1.1875rem;       /* 19px */
    line-height: 28px;
  }

  .summit-ingressos__por {
    font-size: 1.625rem;        /* 26px */
    line-height: 28px;
    letter-spacing: -1.1px;
  }

  .summit-ingressos__precos {
    top: 40px;                  /* 108px de linha, preço de 28px: mesma conta do desktop */
  }

  .summit-ingressos__incluido {
    padding: 12px 16px 32px 20px;
    font-size: 0.9375rem;       /* 15px */
    line-height: 26px;
  }

  .summit-ingressos__parcelar {
    margin-top: 26px;
  }

  .summit-ingressos__card-foot {
    padding: 22px var(--summit-ingressos-pad) 24px;
  }
}

@media (max-width: 575.98px) {
  .summit-ingressos {
    padding: 56px 20px;
    --summit-ingressos-pad: 20px;
    --summit-ingressos-row: 0px;
  }

  .summit-ingressos__titulo {
    font-size: 2.25rem;         /* 36px */
    line-height: 32px;
    letter-spacing: -1.6px;
  }

  .summit-ingressos__eyebrow-text {
    font-size: 0.594rem;        /* 9.5px */
    letter-spacing: 1.6px;
  }

  .summit-ingressos__data {
    font-size: 1.125rem;        /* 18px */
    line-height: 26px;
    letter-spacing: -0.4px;
  }

  .summit-ingressos__local {
    font-size: 0.6875rem;       /* 11px */
    letter-spacing: 0.6px;
  }

  .summit-ingressos__card-titulo {
    font-size: 1.75rem;         /* 28px */
    line-height: 30px;
    letter-spacing: -1px;
  }

  /* Linha empilhada: rótulo, preço, descritivo, toggle — o preço sai do absoluto
     porque não há largura para ficar ao lado do rótulo. */
  .summit-ingressos__linha {
    padding: 18px var(--summit-ingressos-pad) 10px;
  }

  .summit-ingressos__item-nome {
    display: contents;
  }

  .summit-ingressos__item-label {
    order: 1;
    padding-right: 0;
    font-size: 1.0625rem;       /* 17px */
    line-height: 24px;
  }

  .summit-ingressos__precos {
    order: 2;
    position: static;
    transform: none;
    margin-top: 6px;
  }

  .summit-ingressos__item-desc {
    order: 3;
    margin-top: 10px;
    padding-top: 0;
    max-width: none;
  }

  .summit-ingressos__toggle {
    order: 4;
    margin-top: 12px;
  }

  .summit-ingressos__por {
    font-size: 1.375rem;        /* 22px */
    line-height: 24px;
    letter-spacing: -0.8px;
  }

  .summit-ingressos__de {
    font-size: 0.6875rem;       /* 11px */
    line-height: 16px;
  }

  .summit-ingressos__incluido {
    padding: 12px 14px 26px 18px;
    font-size: 0.875rem;        /* 14px */
    line-height: 24px;
  }

  .summit-ingressos__parcelar {
    margin-top: 24px;
  }

  .summit-ingressos__cta {
    padding: 16px 16px 14px;
    gap: 10px;
  }

  .summit-ingressos__cta-label {
    font-size: 0.625rem;        /* 10px */
    letter-spacing: 0.5px;
  }

  /* Fita reduzida na mesma proporção: barra 150x21 a 36° => bbox 133,7 x 105,2 */
  .summit-ingressos__fita {
    top: -22.7px;
    right: -24.8px;
    width: 133.7px;
    height: 105.2px;
  }

  .summit-ingressos__fita-bar {
    width: 150px;
    height: 21px;
    padding: 6px 34px;
    font-size: 0.463rem;        /* 7.4px */
    line-height: 9px;
    letter-spacing: 0.6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .summit-ingressos__cta,
  .summit-ingressos__toggle-arrow,
  .summit-ingressos__ingresso::details-content {
    transition-duration: 1ms;
  }
}


/* ============================================================ */
/* MOTION (acabamento — não está no Figma)                      */
/* ============================================================ */
/* A abertura do "O que está incluído" já é animada acima
   (::details-content). Aqui fica só o relevo dos dois cards. */

.summit-ingressos__card {
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.summit-ingressos__card:hover {
  transform: translateY(-4px);
}

.summit-ingressos__cta {
  transition: background-color 160ms ease, transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.summit-ingressos__cta:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .summit-ingressos__card,
  .summit-ingressos__cta {
    transition-duration: 1ms;
  }

  .summit-ingressos__card:hover,
  .summit-ingressos__cta:hover {
    transform: none;
  }
}


/* ============================================================ */
/* 12/12 — FOOTER — Footer 1:318                               */
/* origem: sections/9-footer.css                               */
/* ============================================================ */
/* SECTION */

.summit-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas:
    "logo   headline nav"
    "bottom bottom   bottom";
  gap: 96px;
  /* a sobra segura a grade de três colunas na régua de 1920 no ultrawide */
  padding: 100px calc(96px + var(--summit-sobra)) 30px;
  background-color: var(--summit-footer-bg);
  /* A trama está no próprio node do Footer (aparece no export isolado dele),
     não é fundo herdado da página. Disco de 2px num tile de 10x10; o deslocamento
     de -0.5px em y alinha o centro do ponto com o do export do Figma. */
  background-image: radial-gradient(circle at center,
                      var(--summit-footer-dot) 1px, transparent 1px);
  background-size: var(--summit-footer-dot-tile) var(--summit-footer-dot-tile);
  background-position: 0 -0.5px;
  font-family: var(--summit-font-primary);
}

/* --- logo ------------------------------------------------------ */

.summit-footer__logo {
  grid-area: logo;
  align-self: start;
  display: block;
  line-height: 0;
}

.summit-footer__logo img {
  display: block;
  width: 230px;
  height: 75.55px;
  max-width: 100%;
}

/* --- título ---------------------------------------------------- */

/* O bloco lead é o item da grade: o título e a linha de apoio abaixo dele
   ocupam juntos a área "headline" em todos os breakpoints. */
.summit-footer__lead {
  grid-area: headline;
  align-self: start;
}

.summit-footer__headline {
  margin: 0;
  max-width: 480px;             /* é o max-width que quebra em "A REINVENÇÃO /
                                   COMEÇA AQUI." sem <br>. A caixa do Figma mede 460px,
                                   mas o Chrome desenha a 1ª linha com 457px contra os
                                   453px do Figma — 460 deixaria 3px de folga. 480 mantém
                                   a mesma quebra com margem, e ainda está bem abaixo dos
                                   ~725px que subiriam "COMEÇA" para a 1ª linha. */
  font-size: 4.481rem;          /* 71.7px */
  font-weight: 400;
  line-height: 68px;
  letter-spacing: -0.0879em;    /* -6.3px @ 71.7px — em, para acompanhar os
                                   tamanhos menores dos breakpoints */
  text-transform: uppercase;
  color: var(--summit-color-white);
}

.summit-footer__headline-accent {
  color: var(--summit-color-cyan);
}

/* --- linha de apoio -------------------------------------------- */

.summit-footer__kicker {
  max-width: 455px;             /* a caixa do Figma (node 50:14). É ela que quebra
                                   o texto depois de "…DESENHADA POR" sem <br>:
                                   a 1ª linha mede 430px e "OUTRA" só subiria
                                   acima de ~490px. */
  margin: 6px 0 0;              /* topo da caixa em y=242, a 6px da base da 2ª
                                   linha do título (y=236) */
  font-size: 0.5625rem;         /* 9px */
  font-weight: 700;
  line-height: 21px;
  letter-spacing: 0.22em;       /* 1,98px @ 9px */
  text-transform: uppercase;
  text-align: center;
  color: var(--summit-footer-legal);
}

/* No layout de três colunas do Figma a linha de apoio flutua sobre a folga do
   rodapé, em vez de empilhar sob o título. No frame ela é um node absoluto
   *sobre* o Footer (`50:14`), e é isso que mantém a altura em 466,56px: em
   fluxo, os 48px dela (42 da caixa + 6 do respiro) empurrariam o filete e a
   barra legal de y=402 para y=450. Abaixo de 1248px o layout já não é o do
   Figma e ela volta ao fluxo, empilhada sob o título. */
@media (min-width: 1248px) {
  .summit-footer__lead {
    position: relative;
  }

  .summit-footer__kicker {
    position: absolute;
    top: 100%;                  /* base da 2ª linha do título */
    left: -7px;                 /* a caixa do node começa em x=569, 7px à esquerda
                                   da coluna do título (x=576) — o node foi posto
                                   à mão no Figma. Fora do fluxo, o recuo cabe na
                                   folga de 96px entre as colunas e centra o texto
                                   exatamente onde o frame o desenha. */
    width: 455px;
    max-width: 100%;
  }
}

/* --- colunas de links ------------------------------------------ */

.summit-footer__nav {
  grid-area: nav;
  align-self: start;
  display: flex;
  align-items: flex-start;
  gap: 25px;
}

.summit-footer__col {
  flex: 1 1 0;
  min-width: 0;
}

.summit-footer__col-title {
  margin: 0 0 21.5px;           /* 8px de margin + 13px de gap no Figma;
                                   13.5 + 21.5 = 35px do topo do título ao 1º link */
  font-size: 0.5625rem;         /* 9px */
  font-weight: 700;
  line-height: 13.5px;
  letter-spacing: 0.1em;        /* 0.9px @ 9px */
  text-transform: uppercase;
  color: var(--summit-footer-muted);
}

.summit-footer__list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.summit-footer__link {
  display: block;               /* sem isso o <a> inline herda o strut de 16px do
                                   corpo e a linha mede mais que os 18px do Figma */
  font-size: 0.706rem;          /* 11.3px — o dump traz 11.1/11.3/11.4 por item,
                                   ruído de import; fixado no valor mediano */
  font-weight: 400;
  line-height: 18px;
  color: var(--summit-color-white);
  text-decoration: none;
}

.summit-footer__link:hover,
.summit-footer__link:focus-visible {
  color: var(--summit-color-cyan);   /* acabamento — não está no Figma */
}

/* --- barra inferior -------------------------------------------- */

.summit-footer__bottom {
  grid-area: bottom;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 70px;             /* somado ao row-gap de 96px, põe o filete a
                                   166px da base da 1ª linha (y=402 no frame) */
  padding-top: 20px;
  border-top: 1px solid var(--summit-footer-rule);
}

.summit-footer__legal,
.summit-footer__top {
  margin: 0;
  font-size: 0.5625rem;         /* 9px — o dump traz 8.9px no link, ruído de import */
  font-weight: 400;
  line-height: 13.5px;
  letter-spacing: 0.08em;       /* 0.72px @ 9px */
  text-transform: uppercase;
  color: var(--summit-footer-legal);
}

.summit-footer__top {
  display: block;
  text-decoration: none;
  white-space: nowrap;
}

.summit-footer__top:hover,
.summit-footer__top:focus-visible {
  color: var(--summit-color-white);   /* acabamento — não está no Figma */
}

/* RESPONSIVO */
/* Nenhum frame mobile foi fornecido no Figma. Os passos abaixo mantêm a quebra
   "A REINVENÇÃO / COMEÇA AQUI." em duas linhas em todas as larguras: o
   max-width acompanha o font-size na mesma proporção do desktop (480/71.7). */

@media (max-width: 1399.98px) {
  .summit-footer {
    gap: 48px 48px;
    padding: 100px 64px 30px;
  }

  .summit-footer__headline {
    max-width: 415px;
    font-size: 3.875rem;        /* 62px */
    line-height: 59px;
  }

  .summit-footer__bottom {
    margin-top: 56px;
  }
}

@media (max-width: 1247.98px) {
  /* Duas colunas: logo e título empilham à esquerda, links ocupam a faixa de
     384px do Figma à direita — abaixo disso o e-mail de contato (150px) não
     caberia nas duas colunas de links. */
  .summit-footer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 384px);
    grid-template-areas:
      "logo     nav"
      "headline nav"
      "bottom   bottom";
    padding: 80px 48px 30px;
  }

  .summit-footer__headline {
    max-width: 428px;
    font-size: 4rem;            /* 64px */
    line-height: 61px;
  }
}

@media (max-width: 991.98px) {
  .summit-footer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "logo"
      "headline"
      "nav"
      "bottom";
    gap: 48px;
    padding: 72px 48px 28px;
  }

  .summit-footer__bottom {
    margin-top: 40px;
  }
}

@media (max-width: 767.98px) {
  .summit-footer {
    gap: 40px;
    padding: 64px 32px 24px;
  }

  .summit-footer__headline {
    max-width: 348px;
    font-size: 3.25rem;         /* 52px */
    line-height: 49px;
  }

  .summit-footer__logo img {
    width: 190px;
    height: 62.42px;
  }
}

@media (max-width: 575.98px) {
  .summit-footer {
    gap: 32px;
    padding: 56px 20px 20px;
  }

  .summit-footer__headline {
    max-width: 241px;
    font-size: 2.25rem;         /* 36px */
    line-height: 34px;
  }

  /* Abaixo de 576px as duas colunas de links não cabem lado a lado sem quebrar
     "contato@leansummit.com.br" no meio do endereço. */
  .summit-footer__nav {
    flex-direction: column;
    gap: 28px;
  }

  .summit-footer__bottom {
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
  }
}


/* ============================================================ */
/* MOTION (acabamento — não está no Figma)                      */
/* ============================================================ */

/* O deslize vai no <li>, não no <a>: o link é caixa inline e transform
   não pega nela — e trocar o display do <a> mexeria na linha de base da
   lista, que é layout do Figma. O <li> já é bloco. */
.summit-footer__list li {
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.summit-footer__list li:hover,
.summit-footer__list li:focus-within {
  transform: translateX(4px);
}

/* A seta do "Voltar ao topo" sobe quando o ponteiro chega */
.summit-footer__top span {
  display: inline-block;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.summit-footer__top:hover span,
.summit-footer__top:focus-visible span {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .summit-footer__list li,
  .summit-footer__top span {
    transition-duration: 1ms;
  }

  .summit-footer__list li:hover,
  .summit-footer__list li:focus-within,
  .summit-footer__top:hover span,
  .summit-footer__top:focus-visible span {
    transform: none;
  }
}

/* =====================================================================
   Modais ASP.NET (Seja Patrocinado / Captação de Leads / Cupom — dormente)
   Restilizados para a identidade Lean Summit 2027. As classes abaixo são
   as mesmas usadas pelos controles asp: no lean-summit.aspx (title-modal,
   campo-modal, btn-modal, modalgif, sinalizador) — não renomear no markup,
   só a moldura (.modal-content) passou de "ws-content" para "summit-modal".
   ===================================================================== */

.summit-modal {
  position: relative;
  background: var(--summit-color-ink);
  border: 1px solid var(--summit-color-cyan);
  border-radius: 0;
  font-family: var(--summit-font-primary);
  padding: clamp(24px, 4vw, 48px);
}

.summit-modal .btn-close {
  position: absolute;
  top: 16px;
  right: 16px;
  opacity: 0.8;
}

.summit-modal .btn-close:hover {
  opacity: 1;
}

.title-modal {
  font-family: var(--summit-font-primary);
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--summit-color-white);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--summit-color-accent);
  padding-left: 0.75rem;
}

.campo-modal {
  font-family: var(--summit-font-primary);
  font-size: 0.9rem;
  color: var(--summit-color-white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  padding: 12px 14px;
  margin-bottom: 4px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.campo-modal::placeholder {
  color: var(--summit-color-body);
  opacity: 0.7;
}

.campo-modal:focus {
  outline: none;
  border-color: var(--summit-color-accent);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}

.btn-modal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 24px;
  background: var(--summit-color-accent);
  color: var(--summit-color-ink);
  border: none;
  border-radius: 0;
  font-family: var(--summit-font-primary);
  font-weight: 700;
  font-size: 0.694rem;
  line-height: 18px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-modal::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--summit-seta) no-repeat center / 0.56em;
  mask: var(--summit-seta) no-repeat center / 0.56em;
}

.btn-modal:hover,
.btn-modal:focus-visible {
  background: #00b088;
}

.btn-modal:disabled {
  opacity: 0.5;
  cursor: default;
}

.sinalizador {
  display: block;
  font-family: var(--summit-font-primary);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  color: var(--summit-color-red) !important;
  text-transform: none;
  margin-top: -2px;
  margin-bottom: 4px;
}

.modalgif {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 20, 0.85);
}

.summit-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--summit-color-accent);
  animation: summit-spinner-girar 0.8s linear infinite;
}

@keyframes summit-spinner-girar {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .summit-spinner {
    animation-duration: 1ms;
  }
}