/*
All snippets
**/
/*
================================================================================
Escala fluida

A coluna cresce ate 1440 (max-width da .row, em vendors/purecss/grids-responsive)
e trava. A tipografia acompanha a mesma faixa: 320 no minimo, 1440 no maximo.

O segundo numero de cada chamada e o valor MAXIMO e sai exatamente assim no CSS.
Nao ha ampliacao escondida: `.fluid(font-size, 26, 38)` nunca passa de 38px.

O layout e desenhado num frame de 1680 com area util de 1280, entao o valor lido
no Figma cai por volta de 1280 de viewport, nao no topo da faixa — em 1280 um
`38` rende ~36px. Se quiser o numero cravado em 1280, passe a faixa explicita:
`.fluid(font-size, 26, 38, @fluid-min, 1280)`.
================================================================================
*/
/* Ate onde a coluna cresce — casa com o max-width da .row no grid. */
/*
Fator que converte px do layout em rem. Ler `(24 * @pixel-to-rem)` como "os
24px do Figma".

Use para o que NAO deve crescer com a largura mas ainda precisa responder ao
zoom e ao tamanho de fonte que o usuario configurou no navegador. Valor que nao
deve escalar de jeito nenhum (borda de 1px, por exemplo) continua em px puro.
*/
/*
Interpola linearmente um valor entre duas larguras de viewport.

    .fluid(font-size, 32, 48);   // 32px em 320 de viewport, 48px em 1280

Os dois numeros sao os do Figma: o da tela pequena e o da area util de 1280.
Fora da faixa o clamp trava, entao nada estoura para cima nem some para baixo.

Por que nao `vw` puro (`clamp(14px, 2.5vw, 36px)`): `2.5vw` e uma reta que passa
pela origem, entao voce escolhe a inclinacao e as pontas caem onde cairem — na
pratica ela fica travada no minimo ate 560 e no maximo depois de 1440, e cresce
157% no meio. O termo `@{intersecao}rem` e o que permite fixar as duas pontas.

Tres armadilhas, todas verificadas neste projeto com less 4.9:

- Todo `/` precisa estar entre parenteses. O less 4 usa `parens-division` e
  divisao solta nao e calculada: sai `15 / 16rem` no CSS, o navegador descarta a
  regra inteira e o build nao acusa nada.
- `unit(@x, '')` NAO tira a unidade — insere a string como unidade literal e sai
  `1.2''rem`. Para remover, e `unit(@x)` com um argumento so.
- Sem `round()` saem dizimas de ponto flutuante (`1.0999999999999999rem`).

A saida e `rem`, nao `px`, de proposito: com `px` (ou com `vw` puro) o Ctrl+ e a
configuracao de fonte do navegador nao surtem efeito nenhum — WCAG 1.4.4, o
mesmo criterio que motivou tirar o `user-scalable=no` do viewport.
*/
.relative {
  position: relative;
}
.text-center {
  text-align: center;
}
/*
Esconde do olho, mantem para leitor de tela e navegacao por teclado.

Use quando o layout nao mostra rotulo mas o campo precisa de um: o <label>
continua no HTML e ligado por for/id, so nao ocupa espaco. `display: none` e
`visibility: hidden` NAO servem — os dois tiram o elemento da arvore de
acessibilidade, que e exatamente o que queremos preservar.

O `clip` esta deprecado em favor de `clip-path`, mas fica: navegador antigo que
nao entende `clip-path` ainda respeita o `clip`, e sem um dos dois o texto
reaparece no canto da tela.
*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}
/* Honeypot anti-bot: some do olho e do Tab; bots que preenchem `nome` são barrados */
.honeypot {
  display: none !important;
}
/*
Responsive image canvas
**/
.image-item {
  height: auto;
}
img {
  max-width: 100%;
  height: auto;
}
/*
Flexbox snippets
**/
.flex {
  display: flex;
}
.align-center {
  align-items: center;
}
.align-start {
  align-items: flex-start;
}
.align-end {
  align-items: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-evenly {
  justify-content: space-evenly;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-end {
  justify-content: flex-end;
}
.justify-start {
  justify-content: flex-start;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-centered {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 70em) {
  .tablet-column {
    flex-direction: column;
  }
}
@media (max-width: 40em) {
  .mobile-column {
    flex-direction: column;
  }
}
/* Só .woff2: suportado desde Chrome 36 / Firefox 39 / Safari 10 / Edge 14 (2016).
   Os .eot/.ttf/.svg/.woff que existiam aqui atendiam IE9 e Android 4 e pesavam
   ~1 MB na pasta sem nenhum navegador atual pedir por eles. Se um projeto
   precisar de IE11 ou Safari 9, o formato a reintroduzir é o .woff — só ele. */
/* A Rubik é fonte VARIÁVEL, e é por isso que aqui há um @font-face por SUBSET
   (latin, latin-ext) em vez de um por peso, como era na Exo 2.

   Lido da tabela `fvar` do .woff2: um eixo, `wght` 300–900, default 300. Os
   quatro pesos que o design usa (300 Light, 400 Regular, 500 Medium,
   600 SemiBold) saem todos deste mesmo arquivo de 34,5 KB — o Google serve a
   mesma URL para os quatro, dá para conferir pedindo o CSS com `wght@300;400;500;600`.

   Não desmembre em um arquivo por peso: seriam quatro downloads no lugar de um,
   e o navegador buscaria cada peso separado conforme a página pedisse. Pelo
   mesmo motivo o preload do meta-tags.twig aponta para UM arquivo só.

   `local()` ficou de fora de propósito: com fonte variável ele é armadilha —
   se houver uma Rubik estática instalada na máquina, o navegador a usa e perde
   o eixo inteiro, servindo um peso só para todos os `font-weight`. */
/* rubik - latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  src: url('../fonts/rubik-v31-latin-variable.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* rubik - latin-ext
   Português inteiro cabe no subset `latin` acima (os acentuados estão todos em
   U+00C0–U+00FF), então este arquivo não é baixado numa página comum. Ele está
   aqui porque o congresso lista palestrantes estrangeiros: um nome com ł, ş, ğ
   ou ř cai nesta faixa, e sem este bloco sairia em fonte de sistema no meio da
   linha. Custo de mantê-lo quando ninguém precisa: zero byte — o navegador só
   busca o arquivo se algum caractere da faixa aparecer. */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  src: url('../fonts/rubik-v31-latin-ext-variable.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/*
================================================================================
Tipografia

Todo tamanho passa pelo `.fluid()` (definido em default.less): o primeiro numero
e o da tela pequena, o segundo e o do Figma na area util de 1280.

O segundo numero e o TETO e sai literal no CSS: `.fluid(font-size, 26, 38)` da
38px em 1440 e nunca mais que isso. Como o layout e medido por volta de 1280, um
valor lido no Figma rende cerca de 4% menos naquela largura — 38 vira ~36. Se
algum caso precisar do numero cravado em 1280, use a faixa explicita:
`.fluid(font-size, 26, 38, @fluid-min, 1280)`.

Os tetos abaixo vieram MEDIDOS do Figma (frame 5897:19640, "LP - Congresso
wire", area util 1280), nao do mockup do modelo:

    40 / Medium 500   contador da contagem regressiva  -> h1
    32 / Light 300    "O futuro da medicina..."        -> h2
    28 / Medium 500   "AGENDA CIENTIFICA", "QUANDO?"   -> h3
    21 / Light 300    corpo, line-height 30            -> p, span, listas
    12 / SemiBold 600 menu e botao                     -> nao entra aqui

h4, h5 e h6 nao aparecem no frame que foi amostrado: os valores sao interpolados
entre o h3 (28) e o corpo (21) e estao marcados abaixo. Calibre quando a tela
que usar esses niveis for montada.

O peso tambem e medido, e por isso h2 sai mais LEVE que h1 e h3 — nao e engano.
No design o titulo-declaracao e Light com um trecho em Medium no meio, enquanto
os rotulos de secao sao Medium inteiros. Se um h2 precisar do peso cheio, troque
no bloco da secao, no style.less, e nao aqui.
================================================================================
*/
a {
  font-family: "Rubik", sans-serif;
  text-decoration: none;
  line-height: inherit;
  /* Link em ROSA, nao no roxo de @primary-color. Medido sobre a base
       @secondary-color: o roxo da 3,6:1 e o rosa 4,5:1 — o roxo so passaria
       em texto grande, e link corrido nao e texto grande.

       O roxo continua valendo nos titulos de secao, que sao de 36px e entram
       na regra de texto grande (3:1). */
  color: #f35dda;
}
a:hover {
  text-decoration: underline;
}
a img {
  border: none;
}
/*
Base do texto no <body>, e não no `span`.

O modelo declarava tamanho e cor em `p, span`. Declarar no `span` parece
inofensivo e não é: vira uma declaração DIRETA em todo <span> da página, que
vence qualquer valor herdado do pai. Na prática, um <span> dentro de um bloco
de 32px saía com 21px, e dentro de um link de 12px saía com 21px também.

Já custou três defeitos aqui: os números da contagem regressiva invisíveis
(cor), o "INSTAGRAM" do rodapé fora de escala e a faixa de data do evento
renderizando 21px onde o layout pede 32 — esta última sobreviveu a uma
correção que mexeu no <p>, porque quem desenha o texto são os <span> dentro
dele.

Com a base no <body>, o <span> volta a herdar do contexto, que é o
comportamento que todo mundo espera dele.
*/
body {
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  /* 16px CRAVADOS, e nao `.fluid()`.

       Nao e teimosia com o corpo do texto: quem manda no tamanho do texto sao
       o `p` e as listas, logo abaixo, cada um com sua faixa fluida. Aqui o
       valor existe so para o <span> ter de quem herdar.

       O motivo de ser fixo esta no grid. O `.row` do base.css trava em
       `max-width: 90em`, e `em` resolve contra o font-size do PROPRIO
       elemento — que a .row herda daqui. Com a faixa fluida, acima de 1440 de
       viewport o valor satura em 21px e a .row passa a valer 90 x 21 = 1890px:
       o grid inteiro alarga 450px em silencio, sem erro nenhum aparecer.
       Com 16px, 90em volta a ser os 1440px que o layout pressupoe.

       Mesmo raciocinio vale para o `margin: 0 -0.625em` que o basic.less poe
       nas colunas de grid. As media queries NAO entram nessa conta: `em` em
       media query resolve contra o tamanho inicial do navegador, nao contra o
       do elemento. */
  font-size: 16px;
  line-height: 1.43;
  color: #efefef;
}
/* Default paragraph styles */
p {
  font-family: "Rubik", sans-serif;
  /* Light 300, medido. Sobre fundo escuro o traco fino pesa menos que no
       claro — se algum bloco ficar apagado demais, suba para 400 no bloco dele. */
  font-weight: 300;
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1rem,calc(0.9107rem + 0.4464vw),1.3125rem);
  /* 30/21 do Figma. */
  line-height: 1.43;
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  margin-bottom: clamp(0.75rem,calc(0.6786rem + 0.3571vw),1rem);
  /* Sem `text-align: left` aqui. O modelo declarava, e por ser uma
       declaracao no proprio <p> ela VENCIA o `text-align: center` de qualquer
       ancestral — titulo de secao centralizado, card de comissao centralizado
       e rotulo de patrocinio centralizado saiam todos encostados a esquerda, e
       cada bloco precisava repetir o alinhamento. O padrao do navegador para
       <p> ja e `start`, entao nada muda onde ninguem centraliza. */
  text-rendering: optimizeLegibility;
  color: #efefef;
}
form input[type],
form select,
form span,
form label,
form textarea {
  font-family: "Rubik", sans-serif;
  /* Piso de 16px no campo: abaixo disso o iOS da zoom sozinho ao focar. */
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1rem,calc(0.9821rem + 0.0893vw),1.0625rem);
}
form button[type] {
  font-family: "Rubik", sans-serif;
}
button[type="button"] {
  font-family: "Rubik", sans-serif;
}
/* Default header styles */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Rubik", sans-serif;
  text-rendering: optimizeLegibility;
  font-style: normal;
  font-weight: 500;
  /* 44/32 do titulo principal do Figma. O design usa caixa de linha fixa em
       44px, entao a RAZAO muda conforme o tamanho (no h3 de 28 daria 1.57);
       1.375 e a do h2, que e o titulo mais longo e o que mais quebra linha. */
  line-height: 1.375;
  margin: 0;
  color: #ffffff;
}
h1 {
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1.75rem,calc(1.5357rem + 1.0714vw),2.5rem);
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  margin-bottom: clamp(1rem,calc(0.8571rem + 0.7143vw),1.5rem);
}
h2 {
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1.5rem,calc(1.3571rem + 0.7143vw),2rem);
  font-weight: 300;
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  margin-bottom: clamp(1rem,calc(0.8571rem + 0.7143vw),1.5rem);
}
h3 {
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1.3125rem,calc(1.1875rem + 0.625vw),1.75rem);
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  margin-bottom: clamp(0.75rem,calc(0.6071rem + 0.7143vw),1.25rem);
}
/* h4-h6: interpolados entre o h3 (28) e o corpo (21) — nao medidos. */
h4 {
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1.1875rem,calc(1.0982rem + 0.4464vw),1.5rem);
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  margin-bottom: clamp(0.75rem,calc(0.6786rem + 0.3571vw),1rem);
}
h5 {
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1.0625rem,calc(0.9911rem + 0.3571vw),1.3125rem);
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  margin-bottom: clamp(0.75rem,calc(0.6786rem + 0.3571vw),1rem);
}
h6 {
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1rem,calc(0.9643rem + 0.1786vw),1.125rem);
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  margin-bottom: clamp(0.75rem,calc(0.6786rem + 0.3571vw),1rem);
}
/* Helpful Typography Defaults */
em,
i {
  font-style: italic;
  line-height: inherit;
}
strong,
b {
  /* 600 e o peso mais forte que o design usa (botao e menu). O `bold` do
       navegador viraria 700 — existe no eixo da Rubik, mas nao no projeto. */
  font-weight: 600;
  line-height: inherit;
}
/* Percentual de proposito: acompanha o contexto, seja ele fluido ou nao. */
small {
  font-size: 60%;
  line-height: inherit;
}
/* Lists */
ul,
ol,
dl {
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  list-style-position: outside;
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1rem,calc(0.9107rem + 0.4464vw),1.3125rem);
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  margin-bottom: clamp(0.75rem,calc(0.6786rem + 0.3571vw),1rem);
  line-height: 1.6;
  color: #efefef;
}
code {
  font-family: Consolas, "Liberation Mono", Courier, monospace;
  font-weight: normal;
  color: #333333;
  background-color: #f8f8f8;
  border-width: 1px;
  border-style: solid;
  border-color: #e0e0e0;
  padding: 0.125rem 0.3125rem 0.0625rem;
}
/*
Colors
**/
/*
================================================================================
Paleta — identidade do 7o Congresso

Os hex NAO foram estimados de print: saem dos operadores de cor do PDF do
manual (0068-Huntington-KV-Congresso-Internacional-Huntington-v9.pdf), lidos
direto do content stream. O roxo confere com o `#b25dff` que o proprio SVG do
logo usa, o que serve de conferencia cruzada.

Os NOMES das variaveis sao os do modelo e continuam os mesmos de proposito: o
style.less inteiro referencia eles, e trocar nome aqui significaria varrer o
arquivo. O que mudou foi o valor — a identidade saiu do azul para o roxo.
================================================================================
*/
/* roxo da identidade — destaque, link e acao */
/* roxo escuro — base da pagina */
/* o tom mais escuro do manual; nao ha preto puro */
/* @black sem o # — entra cru na data URI do select */
/* Cores de apoio, todas do mesmo manual.

   @color-pink    o rosa da paleta. Entra nos degrades e nos destaques.
   @color-sky     o azul-claro da paleta. E o unico tom frio que sobrou, e
                  serve de contraponto ao roxo.
   @color-purple  mesmo valor de @primary-color. O nome duplicado fica porque
                  o style.less usa os dois em contextos diferentes — um como
                  "a cor de acao", outro como "o roxo do degrade".
   @color-purple-mid  roxo medio do manual, entre a base e o roxo claro.
   @color-cta     fundo do botao. Branco sobre o roxo claro da 2,6:1, que
                  falha no AA — entao o botao veste o roxo medio, que sobre
                  branco da 7,4:1. Medido.
   @off-white / @gray-background  superficies claras sobre a base escura. */
/* Fundo dos circulos do contador. Antes era um lilas azulado; agora acompanha
   o roxo da identidade, bem rebaixado para o numero escuro continuar legivel
   por cima. */
/* A faixa que se destaca do corpo da pagina (indicadores e speakers). Com a
   base em @secondary-color, este e o tom imediatamente ACIMA dela — o nome
   ficou de quando a identidade era azul. */
/* O degrade da identidade. O manual mostra um so, de rosa a roxo, com a nota
   "puxar o rosa mais para fora" — dai o rosa terminar em 18% e nao no meio.
   O antigo tinha cinco paradas e passava por amarelo e azul; nao existe mais. */
/*
Breakpoints
*/
/*
Structure
**/
body {
  /* Base escura: e o fundo do design inteiro. Trocar aqui evita repetir
       background e cor de texto em cada secao do style.less. */
  background-color: #321f7d;
}
*:focus:not(:focus-visible) {
  outline: none;
}
*:focus-visible {
  outline: 2px solid #b25dff;
  outline-offset: 2px;
}
.row .row {
  margin-left: -1rem;
  margin-right: -1rem;
}
.row.expanded {
  max-width: 100%;
}
.row.expanded > div > .row {
  margin-left: auto;
  margin-right: auto;
}
.row .collapse {
  padding: 0;
}
@media (min-width: 70em) {
  [class*="grid-"] {
    margin: 0 -0.625em;
  }
}
hr {
  border: none;
  border-bottom: 1px solid #cdcdcd;
  margin: 25px 0;
}
/*
================================================================================
Lightbox — personalizacao do projeto

O componente mora em site/static/css/vendors/lightbox/ e em
site/static/js/vendors/lightbox/, e e carregado a parte. Ele nao deve ser
editado projeto a projeto: o que muda sai daqui, por custom property.

A lista completa do que da para trocar esta no cabecalho do lightbox.less. O que
nao aparecer aqui embaixo fica no padrao do componente.
================================================================================
*/
:root {
  /* Bloco inline aberto no lightbox: o painel e claro, entao o texto volta
       para a cor de corpo do projeto em vez do #333 padrao do componente. */
  --lightbox-panel-bg: #ffffff;
  /* @black, e nao @font-color: com a base escura o @font-color virou claro
       (#efefef) e sumiria dentro deste painel, que continua branco. */
  --lightbox-panel-color: #2f245e;
  /* Contador e mensagem de erro, na mesma familia do resto do site. */
  /* @gray, e nao @silver: o #cdcdcd sobre o painel branco da 1,8:1. */
  --lightbox-muted: #a9a8a8;
}
/*
================================================================================
Ícones — SVG inline, um partial por ícone em site/views/includes/icons/
Herdam a cor via `currentColor`; o tamanho vem do CSS do contexto.
================================================================================
*/
.icon {
  display: block;
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
}
/*
Fetures
**/
.opacity {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.opacity:hover {
  opacity: 0.6;
  text-decoration: none;
  cursor: pointer;
}
.opacity-translate {
  opacity: 1;
  transition: opacity 0.5s ease-in-out, transform 0.5s;
}
.opacity-translate:hover {
  cursor: pointer;
  opacity: 0.6;
  text-decoration: none;
  transform: translateY(-2px);
}
.default-button {
  background-color: #4e358c;
  /* Medidas do componente "cta" do Figma (node 5525:6784): 140x45, texto de
       12px SemiBold, padding 12/15, canto reto. O modelo trazia 10/20 sem
       altura minima, o que dava ~36px — visivelmente menor que o do layout. */
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  min-height: 45px;
  padding: 12px 25px;
  border: none;
  transition: background-color 0.5s, color 0.5s;
  /* Botao de acento (VER AGENDA, VEJA COMO CHEGAR).

       Veste o ROSA, e nao o roxo de @primary-color, por medida de contraste
       sobre o proprio botao: no roxo #b25dff o texto escuro da 3,9:1 e o
       branco 3,6:1 — os dois reprovam no AA, que pede 4,5:1 neste tamanho.
       No rosa #f35dda o texto em @black da 4,8:1 e passa.

       A escolha nao contraria o manual: o rosa e justamente o que a
       identidade usa para destacar (o "grande evolucao" da peca principal). */
  /* Botao do formulario de newsletter: fundo branco sobre a faixa de
       gradiente, texto na cor da base. */
}
.default-button.full {
  width: 100%;
  display: flex;
  justify-content: center;
}
.default-button.light {
  background-color: #f35dda;
  color: #2f245e;
}
.default-button.light:hover {
  background-color: #ffffff;
  color: #2f245e;
}
.default-button.white {
  background-color: #ffffff;
  color: #321f7d;
}
.default-button.white:hover {
  background-color: #efe4ff;
  color: #321f7d;
}
.default-button:hover {
  text-decoration: none;
  background-color: #2f245e;
  /* Modelo trazia color:@black sobre fundo preto — texto sumia. */
  color: #ffffff;
}
.spacing {
  padding: 60px 0;
}
.spacing iframe {
  display: block;
  width: 100%;
}
@media (max-width: 40em) {
  .spacing iframe {
    margin-top: 20px;
  }
}
form input[type],
form textarea,
form select {
  border: none;
  border: 1px solid #a9a8a8;
  height: 40px;
  padding: 0 0 0 6px;
  display: block;
  width: 100%;
  background-color: #efefef;
  /* Texto digitado em @black: o @gray sobre o @field da 2,1:1 e o campo
           preenchido fica ilegivel. O @gray segue nos placeholders abaixo. */
  color: #2f245e;
  margin-bottom: 16px;
}
form input[type]:focus,
form textarea:focus,
form select:focus {
  border: 1px solid #b25dff;
  outline: 0;
}
form input[type]::-webkit-input-placeholder,
form textarea::-webkit-input-placeholder,
form select::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #a9a8a8;
}
form input[type]::-moz-placeholder,
form textarea::-moz-placeholder,
form select::-moz-placeholder {
  /* Firefox 19+ */
  color: #a9a8a8;
}
form input[type]:-ms-input-placeholder,
form textarea:-ms-input-placeholder,
form select:-ms-input-placeholder {
  /* IE 10+ */
  color: #a9a8a8;
}
form select {
  appearance: none;
  /* remove a seta padrão */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #efefef;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cpath%20fill%3D%27%232f245e%27%20d%3D%27M233.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200l192-192c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L256%20338.7%2086.6%20169.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l192%20192z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 32px;
}
form input[type="radio"],
form input[type="checkbox"] {
  width: 10px;
  height: 10px;
  margin-right: 10px;
}
form textarea {
  padding-top: 5px;
  height: 150px;
}
/*
Swiper
*/
.swiper.default-arrows .custom-arrow {
  position: absolute;
  bottom: 0;
  z-index: 3;
  border-radius: 70px;
  background-color: #cdcdcd;
  border: none;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s;
}
.swiper.default-arrows .custom-arrow.prev-arrow {
  left: calc(50% - 60px);
}
.swiper.default-arrows .custom-arrow.next-arrow {
  right: calc(50% - 60px);
}
.swiper.default-arrows .custom-arrow.swiper-button-disabled {
  opacity: 0.4;
}
.swiper.default-arrows .custom-arrow i {
  font-size: 10px;
  color: #b25dff;
}
.swiper.default-arrows .custom-arrow:hover {
  background: #321f7d;
}
/*
Page
*/
/* Altura do header fixo. Fica em variavel porque TRES coisas dependem dela e
   precisam andar juntas: o proprio header, o respiro do .wrap-page e o
   scroll-margin-top das ancoras. Sem o terceiro, clicar no menu leva a secao
   para debaixo do header — defeito classico de ancora com header fixo. */
/* 88px e nao os 70 de antes: o logo do congresso e MUITO mais alto que o
   anterior — 229x103 (razao 2,2) contra 168x43 (razao 3,9). Nos 70px antigos
   ele caberia com 44px de altura e as quatro linhas de texto sairiam com ~6px
   cada, ilegiveis. */
/* Altura com a pagina rolada. O encolhimento e modesto de proposito: o logo do
   congresso tem QUATRO linhas de texto, e abaixo de ~48px de altura elas
   passam a medir menos de 7px e deixam de ser legiveis. Com logo de uma linha
   dava para descer bem mais. */
.wrap-page {
  padding-top: 88px;
}
@media (max-width: 70em) {
  .wrap-page {
    padding-top: 60px;
  }
}
/*
================================================================================
Rolagem suave das ancoras do menu

CSS, nao JS: scroll-behavior resolve o deslize, e scroll-margin-top impede que
a secao pare escondida atras do header fixo.

prefers-reduced-motion desliga o deslize sem desligar a navegacao: quem pediu
menos movimento continua chegando na secao, so que de imediato.
================================================================================
*/
html {
  scroll-behavior: smooth;
  /* Libera a transicao entre altura fixa e `auto`, que e o que permite o
       acordeao do FAQ abrir animado sem JS medindo pixel. Onde nao houver
       suporte, o acordeao abre instantaneo — que e o comportamento de hoje. */
  interpolate-size: allow-keywords;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
[id] {
  scroll-margin-top: 88px;
}
@media (max-width: 70em) {
  [id] {
    scroll-margin-top: 60px;
  }
}
/* Skip link — acessibilidade via teclado */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  font-size: 14px;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}
/*
Slider
*/
.main-slider {
  /*
    Escurecimento da midia. Fica aqui, e nao num `style=` no Twig: o valor e o
    mesmo em todo lugar, entao e declaracao de CSS. Um projeto que precise de
    outro grau troca esta linha; um bloco especifico troca dentro dele.
    */
  --overlay: 0.35;
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 60px;
  /*
    Antes do Swiper assumir, os slides são divs empilhadas — o CSS dele é
    carregado de forma assíncrona. Mostra só o primeiro até ele inicializar
    (é o Swiper quem põe .swiper-initialized). Se o JS falhar, resta o
    primeiro slide em vez de uma coluna de imagens.
    */
  /*
    Dots. No layout eles sao TRACINHOS, nao bolinhas — por isso o
    border-radius vai a zero e a largura e maior que a altura. O ativo troca
    de cor em vez de mudar de tamanho: bullet que cresce empurra os vizinhos e
    a fileira inteira balanca a cada slide.
    */
}
.main-slider .swiper-wrapper {
  align-items: center;
}
.main-slider:not(.swiper-initialized) .swiper-slide:not(:first-child) {
  display: none;
}
.main-slider:not(.swiper-initialized) .swiper-button-prev,
.main-slider:not(.swiper-initialized) .swiper-button-next {
  opacity: 0;
}
.main-slider .swiper-slide {
  display: block;
  width: 100%;
  height: 40vw;
  min-height: 450px;
  max-height: 800px;
  position: relative;
  background-color: #cdcdcd;
  overflow: hidden;
  /*
        Escurecimento sobre a mídia, para o texto manter contraste. Fica no
        slide (e não no <figure>) porque nos slides de vídeo o <iframe> é
        filho direto daqui — assim a regra serve aos dois casos.
        A opacidade vem do --overlay declarado no topo de .main-slider.
        */
}
.main-slider .swiper-slide:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, var(--overlay, 0.35));
  z-index: 2;
  pointer-events: none;
}
.main-slider .swiper-slide figure {
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
}
.main-slider .swiper-slide .slide-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  z-index: 1;
  pointer-events: none;
}
.main-slider .swiper-slide .slide-media.slide-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.main-slider .swiper-slide .slide-media.slide-image .image-entity {
  display: none;
}
.main-slider .swiper-slide iframe.slide-media {
  transform: translate(-50%, -50%) scale(1.5) !important;
  pointer-events: none;
}
.main-slider .swiper-slide .text {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 3;
}
.main-slider .swiper-button-prev,
.main-slider .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  margin: 0;
  /* 10x20 e a medida das setas do banner no Figma (nodes 5897:19649 e
           5897:19650). A seta cheia do modelo tinha 20x20. */
}
.main-slider .swiper-button-prev::after,
.main-slider .swiper-button-next::after {
  display: none;
}
.main-slider .swiper-button-prev .icon,
.main-slider .swiper-button-next .icon {
  width: 10px;
  height: 20px;
}
.main-slider .swiper-button-prev:hover,
.main-slider .swiper-button-next:hover {
  opacity: 0.8;
}
.main-slider .swiper-button-prev:hover.swiper-button-prev,
.main-slider .swiper-button-next:hover.swiper-button-prev {
  transform: translateY(-50%) translateX(-5px);
}
.main-slider .swiper-button-prev:hover.swiper-button-next,
.main-slider .swiper-button-next:hover.swiper-button-next {
  transform: translateY(-50%) translateX(5px);
}
.main-slider .swiper-button-prev.swiper-button-disabled,
.main-slider .swiper-button-next.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.main-slider .swiper-button-prev {
  /* 51px da borda, como no Figma. */
  left: 51px;
}
.main-slider .swiper-button-prev .icon {
  transform: rotate(180deg);
}
@media (max-width: 70em) {
  .main-slider .swiper-button-prev {
    left: 15px;
  }
}
.main-slider .swiper-button-next {
  right: 51px;
}
@media (max-width: 70em) {
  .main-slider .swiper-button-next {
    right: 15px;
  }
}
.main-slider .swiper-pagination {
  position: absolute;
  bottom: 24px;
  left: 0;
  width: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (max-width: 70em) {
  .main-slider .swiper-pagination {
    bottom: 12px;
  }
}
.main-slider .swiper-pagination-bullet {
  width: 18px;
  height: 2px;
  border-radius: 0;
  background-color: #ffffff;
  opacity: 0.4;
  margin: 0;
  transition: opacity 0.3s, background-color 0.3s;
}
.main-slider .swiper-pagination-bullet:hover {
  opacity: 0.7;
}
.main-slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
  background-color: #b25dff;
}
/*
Blog
*/
.blog-list {
  list-style: none;
}
.blog-list li {
  margin-bottom: 20px;
}
.blog-list li a {
  display: block;
  border: 1px solid #cdcdcd;
  padding: 16px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.blog-list li a:hover {
  opacity: 0.6;
  text-decoration: none;
  cursor: pointer;
}
.blog-list li a header {
  height: 100%;
  position: relative;
}
.blog-list li a header h2 {
  font-weight: 400;
  font-size: 22px;
  text-transform: uppercase;
}
.blog-list li a header span {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #2f245e;
  margin: 0;
  font-style: italic;
  font-size: 12px;
}
.widgets {
  padding: 40px;
  margin-bottom: 40px;
  background-color: #2f245e;
}
@media (max-width: 70em) {
  .widgets {
    padding: 20px;
  }
}
@media (max-width: 40em) {
  .widgets {
    margin-top: 40px;
  }
}
.widgets h3 {
  text-transform: uppercase;
  font-weight: 400;
  margin-top: 20px;
  margin-bottom: 5px;
}
.widgets form {
  position: relative;
  margin-bottom: 40px;
}
.widgets form input[type] {
  background-color: #ffffff;
}
.widgets form button {
  position: absolute;
  right: 10px;
  top: 50%;
  background: transparent;
  border: none;
  transform: translateY(-50%);
}
.widgets form button .icon {
  width: 16px;
  height: 16px;
  color: #2f245e;
}
.widgets ul {
  list-style: none;
}
.widgets ul li a {
  color: #a9a8a8;
}
.widgets ul li a.active {
  font-weight: 700;
}
.pagination {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination li {
  margin: 0 5px;
}
.pagination li a {
  background-color: #2f245e;
  color: #ffffff;
  display: block;
  width: 20px;
  line-height: 1.2;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.pagination li a:hover {
  opacity: 0.6;
  text-decoration: none;
  cursor: pointer;
}
.pagination li:not(:first-child) a,
.pagination li:not(:last-child) a {
  width: auto;
}
.pagination li.current a,
.pagination li a.current {
  background-color: #a9a8a8;
  opacity: 1;
  cursor: default;
}
.error-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}
.blog-content .featured-image {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.blog-content iframe {
  width: 100%;
  margin-top: 40px;
}
.blog-content .carousel-blog {
  margin: 10px -10px 0 -10px;
}
.blog-content .carousel-blog .item {
  padding: 10px;
}
/* LGPD */
.lgpd-all {
  display: none;
}
.lgpd-all .footer-lgpd {
  position: fixed;
  z-index: 9999;
  max-width: 1420px;
  transition: 0.3s ease-in-out;
  background: #fff;
  bottom: 25px;
  left: 10px;
  right: 10px;
  padding: 20px;
  box-shadow: 0 0 10px #aaa;
  border-radius: 6px;
  -webkit-transform: translateY(300px);
  -ms-transform: translateY(300px);
  transform: translateY(300px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 40em) {
  .lgpd-all .footer-lgpd {
    flex-wrap: wrap;
  }
}
.lgpd-all .footer-lgpd * {
  text-transform: none;
}
.lgpd-all .footer-lgpd.footer-lgpd-opened {
  transition: 0.1s ease-in-out;
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
}
.lgpd-all .footer-lgpd p {
  margin: 0 20px 0 0;
  color: #321f7d;
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(0.875rem,calc(0.8393rem + 0.1786vw),1rem);
}
@media (max-width: 40em) {
  .lgpd-all .footer-lgpd p {
    margin: 0 0 20px 0;
  }
}
.lgpd-all .footer-lgpd p a {
  text-decoration: none;
  color: #b25dff;
}
.lgpd-all .footer-lgpd .lgpd-accept {
  white-space: nowrap;
  background-color: #4e358c;
  /* Medidas do componente "cta" do Figma (node 5525:6784): 140x45, texto de
       12px SemiBold, padding 12/15, canto reto. O modelo trazia 10/20 sem
       altura minima, o que dava ~36px — visivelmente menor que o do layout. */
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  min-height: 45px;
  padding: 12px 25px;
  border: none;
  transition: background-color 0.5s, color 0.5s;
  /* Botao de acento (VER AGENDA, VEJA COMO CHEGAR).

       Veste o ROSA, e nao o roxo de @primary-color, por medida de contraste
       sobre o proprio botao: no roxo #b25dff o texto escuro da 3,9:1 e o
       branco 3,6:1 — os dois reprovam no AA, que pede 4,5:1 neste tamanho.
       No rosa #f35dda o texto em @black da 4,8:1 e passa.

       A escolha nao contraria o manual: o rosa e justamente o que a
       identidade usa para destacar (o "grande evolucao" da peca principal). */
  /* Botao do formulario de newsletter: fundo branco sobre a faixa de
       gradiente, texto na cor da base. */
}
.lgpd-all .footer-lgpd .lgpd-accept.full {
  width: 100%;
  display: flex;
  justify-content: center;
}
.lgpd-all .footer-lgpd .lgpd-accept.light {
  background-color: #f35dda;
  color: #2f245e;
}
.lgpd-all .footer-lgpd .lgpd-accept.light:hover {
  background-color: #ffffff;
  color: #2f245e;
}
.lgpd-all .footer-lgpd .lgpd-accept.white {
  background-color: #ffffff;
  color: #321f7d;
}
.lgpd-all .footer-lgpd .lgpd-accept.white:hover {
  background-color: #efe4ff;
  color: #321f7d;
}
.lgpd-all .footer-lgpd .lgpd-accept:hover {
  text-decoration: none;
  background-color: #2f245e;
  /* Modelo trazia color:@black sobre fundo preto — texto sumia. */
  color: #ffffff;
}
@media (max-width: 40em) {
  .lgpd-all .footer-lgpd .lgpd-accept {
    width: 100%;
  }
}
/*
Footer
*/
.wrap-footer {
  /* Os tres blocos ficam centralizados como um grupo, com folga entre eles —
       e nao esticados de borda a borda, que era o efeito das colunas de grid. */
  /* O .whatsapp-fixed do modelo saiu junto com o elemento no footer.twig:
       este design nao tem botao flutuante. Se o cliente pedir de volta, volta o
       markup e a regra. */
  background-color: rgba(47, 36, 94, 0.45);
  padding: 60px 0;
}
.wrap-footer .footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 120px;
  flex-wrap: wrap;
}
.wrap-footer .footer-links {
  min-width: 220px;
}
.wrap-footer .logo img {
  display: block;
  width: auto;
  height: 76px;
}
.wrap-footer .footer-label {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 8px;
}
.wrap-footer .footer-value {
  font-size: 12px;
  text-transform: uppercase;
  color: #f5f5f5;
  margin-bottom: 24px;
}
.wrap-footer .footer-value a {
  color: inherit;
}
.wrap-footer .footer-social {
  display: flex;
  align-items: center;
  gap: 16px;
}
.wrap-footer .footer-social .footer-label {
  margin-bottom: 0;
}
.wrap-footer .social {
  list-style: none;
  margin: 0;
  display: flex;
  gap: 8px;
}
.wrap-footer .social a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f5f5f5;
  font-size: 12px;
  text-transform: uppercase;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.wrap-footer .social a:hover {
  opacity: 0.6;
  text-decoration: none;
  cursor: pointer;
}
.wrap-footer .social .icon {
  width: 18px;
  height: 18px;
}
.wrap-footer .footer-links ul {
  list-style: none;
  margin: 0;
}
.wrap-footer .footer-links ul li:last-child {
  margin-bottom: 0;
}
.wrap-footer .footer-links ul a {
  color: #ffffff;
  text-transform: uppercase;
  font-size: 16px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.wrap-footer .footer-links ul a:hover {
  opacity: 0.6;
  text-decoration: none;
  cursor: pointer;
}
@media (max-width: 70em) {
  .wrap-footer .footer-inner {
    gap: 40px;
    flex-direction: column;
    text-align: center;
  }
  .wrap-footer .footer-social {
    justify-content: center;
  }
  .wrap-footer .logo img {
    margin: 0 auto;
  }
}
/*
Header
*/
.wrap-header {
  background-color: #321f7d;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 70px cravados, como no layout (o header do Figma tem exatamente essa
       altura). Altura fixa em vez de padding porque dentro dele convivem o logo
       de 43px e o botao de 45px: com padding, quem mandasse na altura seria o
       elemento mais alto, e qualquer ajuste nele mexeria no header inteiro.

       O valor sai de @header-height, no basic.less, junto com o respiro do
       .wrap-page e o scroll-margin-top das ancoras — os tres tem de andar
       casados. */
  height: 88px;
  padding: 0;
  /* Enquanto o lightbox trava a rolagem, a barra some e o viewport alarga.
       Elemento `position: fixed` se mede pelo viewport e nao enxerga o padding
       que o lightbox poe no <body>: este header alargava 15px e a .row
       centralizada dentro dele andava 7,5px — medido.

       Trocar o `width: 100%` por outro valor nao resolve: `left/right: 0` da no
       mesmo, e `100vw` seria constante mas 15px largo demais na navegacao
       normal, criando barra horizontal. O que resolve e descontar a medida.
       Fora do lightbox a variavel nao existe e isto vale 0. */
  padding-right: var(--lightbox-scrollbar, 0px);
  /* No layout a arte do banner comeca EMBAIXO do header, nao atras dele —
       por isso ele e solido desde o topo e o hero nao e puxado para cima. */
  transition: height 0.4s, box-shadow 0.4s;
  z-index: 7;
  /* .scrolled e posta pelo app.js a partir de 50px de rolagem. Encolhe o
       header e o logo junto — os dois com a mesma duracao, senao um chega
       antes do outro e o logo parece pular dentro da barra. */
  /* Quem pediu menos movimento nao ve a barra deslizar: ela troca de altura
       de uma vez. O comportamento continua igual, so sem a animacao. */
}
.wrap-header > .row {
  height: 100%;
  /* `align-content`, e nao `align-items`.

           O `.row` do base.css e `flex-flow: row wrap` com
           `align-content: flex-start`. Com quebra de linha ligada, o
           `align-items: center` do `.align-center` centraliza DENTRO da linha
           do flex — e a linha, que tem a altura da coluna mais alta (70px),
           ficava encostada no topo dos 88px do header.

           Resultado medido: o header tinha centro em 44 e todo o conteudo em
           35. Nove pixels acima, em tudo ao mesmo tempo, que e o que dava a
           impressao de desalinhamento sem nenhum elemento estar errado. */
  align-content: center;
}
.wrap-header .logo {
  display: block;
}
.wrap-header .logo img {
  display: block;
  width: auto;
  height: 64px;
  transition: height 0.4s;
}
.wrap-header .default-button {
  white-space: nowrap;
  padding: 12px 20px;
}
.wrap-header .header-actions {
  gap: 8px;
}
.wrap-header .menu {
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wrap-header .menu li a {
  /* Texto claro: o header flutua sobre a arte escura do banner. */
  color: #ffffff;
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(0.75rem,calc(0.7143rem + 0.1786vw),0.875rem);
  text-transform: uppercase;
  font-weight: 300;
  display: block;
  padding: 10px 0;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.wrap-header .menu li a:hover {
  opacity: 0.6;
  text-decoration: none;
  cursor: pointer;
}
.wrap-header .menu li.dropdown {
  position: relative;
}
.wrap-header .menu li.dropdown ul {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 24px;
  background-color: #ffffff;
  padding: 10px 25px;
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s;
  list-style: none;
}
.wrap-header .menu li.dropdown ul li a {
  white-space: nowrap;
  font-weight: 400;
  padding: 2px 0;
  text-align: center;
}
.wrap-header .menu li.dropdown:hover ul {
  visibility: visible;
  opacity: 1;
}
.wrap-header.scrolled {
  height: 68px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.wrap-header.scrolled .logo img {
  height: 48px;
}
@media (prefers-reduced-motion: reduce) {
  .wrap-header,
  .wrap-header .logo img {
    transition: none;
  }
}
/*
Menu mobile
*/
.wrap-header-mobile {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #2f245e;
  /* Mesma altura declarada no @header-height-mobile, que é o respiro que o
       .wrap-page reserva. Com padding em vez de altura o header crescia além
       dos 60px reservados e passava por cima do topo da arte. */
  height: 60px;
  padding: 4px 0;
  z-index: 9;
  /* O botão do layout tem 140x45. Nessa largura ele não cabe ao lado do logo
       e do seletor de idioma numa tela de 500 — cobria o "HUNTINGTON". Aqui
       ele encolhe; o tamanho cheio vale do lg para cima. */
}
.wrap-header-mobile > .row {
  height: 100%;
  /* Mesma razao do header de desktop: a linha do flex ficaria no topo. */
  align-content: center;
}
.wrap-header-mobile .default-button {
  font-size: 10px;
  padding: 8px 10px;
  min-width: 0;
  min-height: 34px;
  white-space: nowrap;
}
.wrap-header-mobile .header-actions {
  gap: 4px;
}
.wrap-header-mobile .lang-switch summary {
  height: 34px;
  padding: 8px 6px;
  gap: 4px;
}
.wrap-header-mobile .toggle-menu {
  font-size: 24px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.wrap-header-mobile .toggle-menu:hover {
  opacity: 0.6;
  text-decoration: none;
  cursor: pointer;
}
.wrap-header-mobile .toggle-menu .icon {
  width: 32px;
  height: 32px;
}
.wrap-header-mobile .logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrap-header-mobile .logo img {
  display: block;
  height: 48px;
  width: auto;
  max-width: 100%;
}
.wrap-header-mobile .mobile-menu {
  background-color: #2f245e;
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  transition: top 0.5s;
}
.wrap-header-mobile .mobile-menu.opened {
  top: 0;
}
.wrap-header-mobile .mobile-menu .toggle-menu {
  padding: 30px 0 0 0;
}
.wrap-header-mobile .mobile-menu .menu {
  list-style: none;
  margin: 0;
}
.wrap-header-mobile .mobile-menu .menu li {
  display: block;
  width: 100%;
}
.wrap-header-mobile .mobile-menu .menu li a {
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 300;
  display: block;
  text-align: center;
  padding: 15px 0;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.wrap-header-mobile .mobile-menu .menu li a:hover {
  opacity: 0.6;
  text-decoration: none;
  cursor: pointer;
}
.wrap-header-mobile .mobile-menu .menu li a i {
  margin-right: 5px;
}
.wrap-header-mobile .mobile-menu .menu li:not(:last-child) {
  /* Fundo do menu agora e @black — a borda sai de um branco
                       rebaixado, que e o que o design usa para separar. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
/*
Contato
*/
.section-contact {
  /*
    A .row do grid e flex, entao as duas colunas ja saem com a mesma altura.
    A coluna de apoio ocupa essa altura inteira e o mapa fica com `flex: 1`,
    absorvendo a sobra — assim os dois lados terminam juntos em qualquer
    largura, sem casar alturas na mao.
    */
}
.section-contact .contact-form {
  /*
        Campo claro so aqui dentro. O padrao global (@field cinza sobre borda
        @gray) e pesado para um formulario que ocupa metade da tela — mas segue
        valendo na newsletter do rodape e nos demais. Um projeto que nao queira
        a diferenca apaga este bloco e volta ao global.
        */
}
.section-contact .contact-form h2 {
  margin-bottom: 8px;
}
.section-contact .contact-form .contact-intro {
  margin-bottom: 24px;
}
.section-contact .contact-form label {
  display: block;
  margin-bottom: 6px;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}
.section-contact .contact-form input[type],
.section-contact .contact-form select,
.section-contact .contact-form textarea {
  background-color: #ffffff;
  border: 1px solid #cdcdcd;
  color: #ffffff;
}
.section-contact .contact-form input[type]:focus,
.section-contact .contact-form select:focus,
.section-contact .contact-form textarea:focus {
  border-color: #b25dff;
}
.section-contact .contact-form textarea {
  /* Generoso de proposito: e ele que da altura a coluna esquerda,
               para as duas terminarem juntas. */
  height: 180px;
  padding: 12px;
}
.section-contact .contact-form .contact-submit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.section-contact .contact-form .contact-submit .contact-privacy {
  /* 200px de base: abaixo disso quebra para a linha de baixo em
                   vez de espremer ao lado do botao. */
  flex: 1 0 200px;
  margin: 0;
  font-size: 12px;
  line-height: 18px;
}
.section-contact .contact-aside {
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media (max-width: 40em) {
  .section-contact .contact-aside {
    margin-top: 40px;
  }
}
.section-contact .contact-aside .contact-details {
  flex: none;
  padding: 24px;
  border: 1px solid #cdcdcd;
}
.section-contact .contact-aside .contact-detail {
  display: flex;
  gap: 16px;
}
.section-contact .contact-aside .contact-detail:not(:last-child) {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #cdcdcd;
}
.section-contact .contact-aside .contact-detail .icon {
  flex: none;
  width: 24px;
  height: 24px;
  /* alinha com a primeira linha do titulo, nao com o topo da caixa */
  margin-top: 2px;
  color: #b25dff;
}
.section-contact .contact-aside .contact-detail h3 {
  font-size: 16px;
  margin-bottom: 4px;
}
.section-contact .contact-aside .contact-detail address,
.section-contact .contact-aside .contact-detail p {
  margin: 0;
  font-style: normal;
  font-size: 14px;
  line-height: 22px;
}
.section-contact .contact-aside .contact-detail ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.section-contact .contact-aside .contact-detail ul li a {
  font-size: 14px;
  line-height: 22px;
  color: #efefef;
}
.section-contact .contact-aside .contact-detail ul li a:hover {
  color: #b25dff;
  text-decoration: none;
}
.section-contact .contact-aside .contact-map {
  flex: 1 1 auto;
  /* piso: abaixo disto o mapa deixa de ser legivel */
  min-height: 240px;
  margin: 20px 0 0 0;
  border: 1px solid #cdcdcd;
  /* o iframe do Google ja vem branco; a borda amarra com o card acima */
  line-height: 0;
}
.section-contact .contact-aside .contact-map iframe {
  display: block;
  width: 100%;
  /* 100% da sobra que o flex deu; sem isto o iframe assume 150px */
  height: 100%;
  border: none;
}
/*
================================================================================
Landing page do congresso

Uma classe por seção do briefing, na mesma ordem do home/index.twig. Nada aqui
abre um segundo bloco para classe que já exista acima — propriedade nova entra
no bloco de cima, mesmo que esteja a centenas de linhas daqui.
================================================================================
*/
/* Barra de gradiente que fecha título de seção, faixa de data e endereço.
   É o "Full Gradiente" do Figma, que o get_variable_defs devolve vazio — os
   stops estão no @gradient-full, no basic.less. */
.title-bar {
  display: block;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #f35dda 0%, #f35dda 18%, #b25dff 100%);
}
.section-title {
  text-align: center;
  margin-bottom: 60px;
}
.section-title h2 {
  text-transform: uppercase;
  font-weight: 300;
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1.5rem,calc(1.2857rem + 1.0714vw),2.25rem);
  margin-bottom: 16px;
}
.section-title h2 strong {
  color: #b25dff;
  font-weight: 500;
}
.section-title .title-bar {
  max-width: 350px;
  margin: 0 auto;
}
/*
02 · Hero
*/
.section-hero {
  /* Sem margem negativa. Eu tinha puxado o hero para debaixo do header
       supondo que a arte sangrava ate o topo; no Figma ela comeca em y=70,
       ou seja, LOGO ABAIXO do header, que tem exatamente essa altura. A margem
       negativa era o que fazia o banner subir demais mesmo com o padding-top
       do .wrap-page. */
}
.section-hero .main-slider {
  /* Sem escurecimento: o banner do modelo escurece a foto para o texto
           por cima ganhar contraste, mas aqui NÃO há texto por cima — título e
           data já vêm dentro da arte. Os 0.35 herdados lavavam o degradê da
           identidade inteiro. */
  --overlay: 0;
  margin-bottom: 0;
  /* `.image` e não `.swiper-slide`: o banner.twig põe o TIPO do slide
           como classe, e a proporção fixa só vale para arte fechada.

           Sem esse recorte, o slide composto (`.arte`) era espremido nos
           727px desta proporção enquanto o conteúdo pedia 1026 — e o
           `overflow: hidden` cortava o meio, deixando na tela o pé do logo e
           o topo da célula. Medido. */
  /* O slide composto cresce com o conteúdo. As três travas de altura do
           modelo (`height: 40vw`, `min-height: 450px`, `max-height: 800px`)
           foram feitas para mídia de proporção fixa e aqui cortariam a peça —
           precisam ser desfeitas as três, porque qualquer uma sozinha já
           basta para limitar. */
}
.section-hero .main-slider .swiper-slide.image {
  aspect-ratio: 20 / 11;
  height: auto;
  min-height: 0;
  max-height: none;
  /* @silver é cinza-claro e aparecia por baixo da transparência do
               PNG; com o escurecimento por cima virava um cinza médio no lugar
               do azul da identidade. */
  background-color: #2f245e;
}
.section-hero .main-slider .swiper-slide.arte {
  height: auto;
  min-height: 0;
  max-height: none;
  background-color: #2f245e;
}
/*
Faixa de data e local
*/
.section-event-bar {
  padding: 40px 0 0;
  /* No Figma o bloco inteiro (texto + barra) tem 720px e fica centralizado.
       A barra estava herdando a largura da coluna, que vai a 1408px — por isso
       aparecia bem maior que a do layout. */
}
.section-event-bar .event-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* Faixa explicita ate 1280: o layout tem 32px na area util de 1280, e
           com o teto padrao (1440) isso renderizava ~30px ali — o texto saia
           menor que o do Figma. */
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1.375rem,calc(1.1667rem + 1.0417vw),2rem);
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.section-event-bar .title-bar {
  max-width: 720px;
  margin: 0 auto;
}
.section-event-bar .event-icon {
  display: flex;
  color: #b25dff;
}
.section-event-bar .event-icon .icon {
  width: 32px;
  height: 32px;
}
.section-event-bar .event-place {
  color: #b25dff;
}
.section-event-bar .event-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #e6e6e6;
  border: 1px solid #cdcdcd;
  /* Ele separa data e local na MESMA linha. Quando a faixa quebra em
           duas, sobra pendurado no fim da primeira — vira sujeira, nao
           separador. */
}
@media (max-width: 40em) {
  .section-event-bar .event-dot {
    display: none;
  }
}
/*
03 · Vinheta
*/
.section-vinheta {
  padding: 60px 0;
  position: relative;
  overflow: hidden;
  /* Acima da faixa azul dos indicadores, que sobe por trás com margem
       negativa. Sem isto o brilho abaixo ficava escondido atrás dela — o
       `z-index: -1` do :before o mandava para trás do fundo da seção seguinte,
       não só para trás do painel. */
  z-index: 1;
  /* Brilho azul que sobe por tras do painel — as elipses 908/921 do Figma
       (416x416, y1081 e y1110), que la sao SVG borrado. Aqui e degrade radial:
       nao pede requisicao, escala sozinho e nao serrilha.

       Fica em :before com z-index negativo para passar ATRAS do painel claro
       sem cobrir nada; o .section-vinheta e o contexto de empilhamento. */
}
.section-vinheta:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  /* 100%, nunca mais que isso: a secao NAO pode ter overflow: hidden
           (o brilho precisa vazar para baixo, por cima da faixa seguinte), e
           sem o teto os 120% de largura centralizados criavam rolagem
           horizontal — medido em 1440, 768 e 500. */
  width: 100%;
  height: 700px;
  pointer-events: none;
  /* 0 e não -1: fica acima do fundo da seção e abaixo do painel, que é 1. */
  z-index: 0;
  /* Dois focos: o principal sobe do centro-baixo e o segundo abre para a
           direita, que é como as elipses 908/921 se sobrepõem no Figma. Antes
           era um só, estreito, e mal aparecia embaixo do painel. */
  background: radial-gradient(ellipse 70% 55% at 62% 78%, rgba(178, 93, 255, 0.62) 0%, rgba(78, 53, 140, 0.3) 48%, transparent 74%), radial-gradient(ellipse 70% 45% at 18% 78%, rgba(243, 93, 218, 0.4) 0%, transparent 70%);
  filter: blur(55px);
}
.section-vinheta:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 140px;
  background-color: #4e358c;
  z-index: 2;
}
.section-vinheta .vinheta-frame {
  position: relative;
  /* Acima da faixa azul da secao de indicadores, que sobe por tras. */
  z-index: 3;
  /* aspect-ratio reserva o espaço antes de o vídeo existir: sem isso a
           página salta quando o embed entra. */
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-vinheta .vinheta-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}
.section-vinheta .vinheta-empty {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* @gray sobre o painel quase branco dava 2,1:1 — ilegível. */
  color: #2f245e;
  margin: 0;
}
/*
04 · Números
*/
.section-metrics {
  /* Faixa em azul mais claro que sobe POR TRAS da vinheta, como o layout faz
       com a secao de speakers: a margem negativa puxa o bloco para cima e o
       padding devolve o espaco, entao o fundo invade sem levar o conteudo
       junto. O z-index fica abaixo do da vinheta para o painel claro continuar
       por cima. */
  position: relative;
  z-index: 0;
  padding: 60px 0;
  background-color: #4e358c;
  /* Os circulos sao de .counter-list — mesma peca da contagem regressiva. */
}
/*
05 · O futuro da medicina reprodutiva
*/
.section-about {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  /* Brilho roxo/rosa a direita, abaixo da galeria — a elipse 909 do Figma
       (302x302, y2430). Mesmo tratamento do blur da vinheta: degrade radial
       borrado em vez de SVG.

       O overflow: hidden acima existe por causa dele: sem isso o brilho passa
       da borda direita e cria rolagem horizontal, que o guia de estilo
       proibe. */
  /* O conteudo sobe acima do brilho. */
  /* As setas ficam no frame, fora do .swiper: dentro do wrapper elas seriam
       deslocadas junto a cada slide e sumiriam da tela. */
  /* Tracinhos, nao bolinhas, e ABAIXO da legenda — dentro do slide eles
       cobriam a foto. Mesmo desenho dos dots do banner. */
}
.section-about:after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -180px;
  width: 760px;
  height: 700px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 50%, rgba(178, 93, 255, 0.8) 0%, rgba(78, 53, 140, 0.42) 42%, transparent 70%);
  filter: blur(80px);
}
.section-about > .row {
  position: relative;
  z-index: 1;
}
.section-about .about-title {
  text-transform: uppercase;
  font-weight: 300;
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1.5rem,calc(1.3571rem + 0.7143vw),2rem);
  color: #efefef;
  margin-bottom: 40px;
}
.section-about .about-title strong {
  color: #b25dff;
  font-weight: 500;
}
.section-about .about-lead {
  margin-top: 24px;
}
.section-about .about-numbers {
  list-style: none;
  margin: 40px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.section-about .about-numbers li {
  display: flex;
  align-items: center;
  gap: 20px;
  /* Traço vertical entre os números — no Figma é um SVG de 1px
               rotacionado; aqui é borda, que não pede requisição nem arquivo. */
}
.section-about .about-numbers li:before {
  content: "";
  display: block;
  width: 1px;
  height: 96px;
  background-color: rgba(255, 255, 255, 0.4);
}
.section-about .about-number {
  display: block;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 300;
  color: #ffffff;
}
.section-about .about-number-label {
  display: block;
  font-size: 18px;
  line-height: 1.45;
  color: #ffffff;
}
.section-about .about-number-label strong {
  display: block;
  color: #b25dff;
  font-weight: 300;
}
.section-about .about-gallery {
  /* Todas as fotos no MESMO enquadramento 4:3 (a proporção da maioria
           dos arquivos). Antes cada slide tinha a altura da própria foto e o
           mais alto (vertical) esticava o wrapper — as horizontais ficavam
           com faixa vazia embaixo. O `cover` corta o excedente. */
}
.section-about .about-gallery .about-swiper {
  overflow: hidden;
  /* Swiper CSS vem async (CDN); até .swiper-initialized os slides
               empilham em coluna — mesmo truque do .main-slider. */
}
.section-about .about-gallery .about-swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
  display: none;
}
.section-about .about-gallery .swiper-slide {
  margin: 0;
}
.section-about .about-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}
.section-about .about-gallery-frame {
  position: relative;
  padding: 0 28px;
}
.section-about .about-prev,
.section-about .about-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #b25dff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.section-about .about-prev:hover,
.section-about .about-next:hover {
  opacity: 0.6;
  text-decoration: none;
  cursor: pointer;
}
.section-about .about-prev .icon,
.section-about .about-next .icon {
  width: 7px;
  height: 14px;
}
.section-about .about-prev {
  left: 0;
}
.section-about .about-prev .icon {
  transform: rotate(180deg);
}
.section-about .about-next {
  right: 0;
}
.section-about .about-caption {
  text-align: center;
  font-size: 11px;
  margin: 16px 0 0;
}
.section-about .about-pagination {
  position: static;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  /* Sem o `flex: none` os tracinhos encolhiam até sumir quando a
           galeria cresce: 26 fotos passam da largura da coluna. */
}
.section-about .about-pagination .swiper-pagination-bullet {
  flex: none;
  width: 18px;
  height: 2px;
  border-radius: 0;
  background-color: #ffffff;
  opacity: 0.4;
  margin: 0;
  transition: opacity 0.3s, background-color 0.3s;
}
.section-about .about-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
  background-color: #b25dff;
}
@media (max-width: 70em) {
  .section-about .about-text {
    margin-bottom: 40px;
  }
  .section-about .about-numbers {
    gap: 24px;
  }
}
/*
06 · Quando / Onde + contagem regressiva
*/
.section-when {
  padding: 40px 0 80px;
  /* Metade esquerda do card: o beija-flor da identidade. É detalhe FIXO, não
       espaço esperando conteúdo — antes havia aqui um degradê fazendo as vezes
       da ilustração, o que parecia imagem em carregamento.

       `contain` e não `cover`: a peça é fechada e tem transparência; recortar
       comeria a asa ou o bico. */
  /* O desenho dos circulos esta em .counter-list, logo abaixo: a contagem
       regressiva e os indicadores da secao 04 usam a mesma peca. Aqui fica so
       o que e do contexto. */
}
.section-when .when-card {
  position: relative;
  border: 1px solid #ffffff;
  border-radius: 16px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.18), rgba(150, 206, 240, 0.18));
  display: flex;
  align-items: center;
  gap: 40px;
}
.section-when .when-art {
  flex: 0 0 40%;
  align-self: center;
  margin: 0 0 -20px -80px;
  /* O bico avança sobre o texto, como no layout. Sem o z-index ele
           passaria por baixo do bloco de conteúdo. */
  position: relative;
  z-index: 1;
}
.section-when .when-art img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.section-when .when-body {
  flex: 1 1 auto;
  padding: 40px;
}
.section-when .when-body h3 {
  text-transform: uppercase;
  font-weight: 400;
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1.3125rem,calc(1.1875rem + 0.625vw),1.75rem);
  color: #efefef;
  margin-bottom: 4px;
}
.section-when .when-body p {
  font-size: 18px;
  margin-bottom: 32px;
  color: #ffffff;
}
.section-when .countdown-title {
  margin: 48px 0 0;
  text-align: center;
  font-weight: 500;
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1.3125rem,calc(1.1875rem + 0.625vw),1.75rem);
  line-height: 1.2;
  color: #efefef;
}
.section-when .counter-list {
  position: relative;
  margin-top: 32px;
  /* Brilho roxo por trás da fileira, puxado para a esquerda como no
           layout. Degradê radial borrado, mesmo tratamento dos outros brilhos
           da página — não pede requisição e não serrilha.

           z-index negativo em vez de ordem no DOM: assim ele passa atrás dos
           círculos sem precisar de um elemento a mais no Twig. */
}
.section-when .counter-list:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateX(-140px);
  width: min(900px, 100%);
  height: 380px;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(178, 93, 255, 0.42) 0%, rgba(78, 53, 140, 0.2) 45%, transparent 72%);
  filter: blur(70px);
}
@media (max-width: 70em) {
  .section-when .when-card {
    flex-direction: column;
  }
  .section-when .when-art {
    flex: none;
    width: 70%;
    max-width: 320px;
    margin: 0 auto;
  }
}
/*
Circulos de contador

Uma peca visual, dois usos: a contagem regressiva da secao 06 e os indicadores
da secao 04. Fica num bloco proprio para nao repetir circulo, cor e tipografia
em dois lugares — se o desenho mudar, muda aqui.
*/
.counter-list {
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  /* A cor precisa vir nos proprios <span>: o "p, span" do typography.less
       declara color: @font-color (claro), e isso vence o @black herdado do
       <li> — os numeros sumiam dentro do circulo claro. */
  /* Sem quebra de linha na tela pequena: se a fileira quebrasse, a bolinha
       do último item de cima ficaria pendurada na ponta, sem nada para
       separar.

       Os círculos encolhem para os quatro caberem. Com 76px a conta dava 328
       de necessidade contra ~327 úteis num aparelho de 375 — no fio, e
       estourava por 1px no pior caso. Com 72 são 312, medidos, e sobra folga. */
}
.counter-list li {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: #efe4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  text-align: center;
  /* Bolinha separadora do layout (node 5897:19725, 8px). Pseudo-elemento
           em vez de <span> no Twig: é ornamento, não conteúdo — num leitor de
           tela ela viraria ruído entre os valores.

           Vai no meio do intervalo: `left: 100%` chega na borda do círculo e o
           deslocamento de metade do gap a leva ao centro do vão. Não há
           separador depois do último. */
}
.counter-list li:not(:last-child):after {
  content: "";
  position: absolute;
  left: calc(100% + 16px);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #b25dff;
}
.counter-list .counter-value {
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1.375rem,calc(1.125rem + 1.25vw),2.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -2px;
  color: #2f245e;
}
.counter-list .counter-label {
  font-size: 20px;
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(0.8125rem,calc(0.7768rem + 0.1786vw),0.9375rem);
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1.1;
  color: #2f245e;
}
@media (max-width: 70em) {
  .counter-list {
    gap: 20px;
  }
  .counter-list li {
    width: 100px;
    height: 100px;
  }
  .counter-list li:not(:last-child):after {
    left: calc(100% + 10px);
  }
  .counter-list .counter-value {
    font-size: 28px;
  }
  .counter-list .counter-label {
    font-size: 13px;
  }
}
@media (max-width: 40em) {
  .counter-list {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .counter-list li {
    width: 80px;
    height: 80px;
    gap: 4px;
  }
  .counter-list li:not(:last-child):after {
    left: calc(100% + 3px);
    width: 3px;
    height: 3px;
  }
  .counter-list .counter-value {
    font-size: 16px;
  }
  .counter-list .counter-label {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: -0.4px;
  }
}
/*
07 · Speakers — o card serve também às duas comissões
*/
.speaker-card {
  /* Medidas do node 5897:20343: 205x263, borda de 0,75px, canto de 16px e
       degradê do verde ao lilás a 35% — sobre a base azul isso compõe o
       azul-arroxeado do layout. */
  /* `border-box` DECLARADO, e não herdado. O base.css propaga o modelo de
       caixa com `* { box-sizing: inherit }` a partir do `html`, que é
       border-box — só que o CSS do Swiper declara `content-box` no slide, e
       a partir dali a cadeia de herança inverte para todo mundo dentro do
       carrossel.

       Aqui isso doía: com `height: 100%` e `padding: 16px`, os 100% viravam
       a altura do CONTEÚDO e os 32px de padding mais 2 de borda entravam por
       fora. O card ficava 271px dentro de um slide de 237, e os 34px de
       sobra iam parar no `margin-top: auto` do "Saiba mais" — que é o vão
       que aparecia entre ele e o nome. Medido.

       Vale o aviso para qualquer outro elemento com padding que venha a
       morar dentro de um .swiper. */
  box-sizing: border-box;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  background: linear-gradient(to bottom, rgba(150, 206, 240, 0.3), rgba(178, 93, 255, 0.35));
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* A bandeira encosta no canto reto da foto, meio para fora do card. */
  /* Um link só cobre o card; "Saiba mais" continua visível por baixo. */
}
.speaker-card figure {
  position: relative;
  margin: 0;
  /* A foto DOMINA o card: 173x149 no layout, contra 263px de altura
           total. Proporção travada por aspect-ratio e recorte por object-fit —
           retrato e paisagem entram pelo cadastro e os dois precisam encher a
           mesma caixa sem deformar. */
  /* Escurecimento azulado sobre a foto. No Figma é uma camada irmã com
           rgba(5,12,72,0.5), não um filtro — a imagem exportada vem limpa e o
           efeito se reproduz aqui. */
}
.speaker-card figure img {
  display: block;
  width: 100%;
  aspect-ratio: 173 / 149;
  object-fit: cover;
  /* Canto superior esquerdo reto: é onde a bandeira encaixa. */
  border-radius: 0 12px 12px 12px;
}
.speaker-card .speaker-flag {
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 1;
  width: 22px;
  height: 18px;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}
.speaker-card .speaker-flag .icon {
  width: 100%;
  height: 100%;
}
.speaker-card .speaker-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}
.speaker-card h3 {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: #ffffff;
  margin: 0;
  /* O cadastro manda o nome como quiser; a tela capitaliza. */
  text-transform: capitalize;
}
.speaker-card.is-clickable {
  cursor: pointer;
}
.speaker-card .speaker-card-stretch {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.speaker-card .link-more {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  text-transform: uppercase;
  color: #ffffff;
  pointer-events: none;
}
.speaker-card .link-more .icon {
  width: 7px;
  height: 7px;
}
.speaker-card.is-clickable:hover .link-more {
  opacity: 0.6;
}
/* Painel inline do lightbox (mini currículo do speaker). */
.speaker-bio-panel {
  max-width: 520px;
  margin: 0 auto;
  padding: 1.5rem;
  text-align: center;
  color: var(--lightbox-panel-color, #2f245e);
}
.speaker-bio-panel .speaker-bio-photo {
  position: relative;
  display: inline-block;
  max-width: 280px;
  margin: 0 auto 1rem;
}
.speaker-bio-panel .speaker-bio-photo img {
  display: block;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}
.speaker-bio-panel .speaker-bio-photo .speaker-flag {
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 1;
  width: 28px;
  height: 22px;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}
.speaker-bio-panel .speaker-bio-photo .speaker-flag .icon {
  width: 100%;
  height: 100%;
}
.speaker-bio-panel .speaker-bio-name {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  text-transform: none;
  color: var(--lightbox-panel-color, #2f245e);
}
.speaker-bio-panel .speaker-bio-inst {
  font-size: 0.875rem;
  margin: 0 0 1rem;
  color: var(--lightbox-muted, #a9a8a8);
}
.speaker-bio-panel .speaker-bio-text {
  font-size: 0.9375rem;
  line-height: 1.55;
  text-align: left;
  /* typography.less pinta todo <p> com @font-color (claro) — no painel
           branco do lightbox isso some. Mesma armadilha do counter-value §06. */
}
.speaker-bio-panel .speaker-bio-text p,
.speaker-bio-panel .speaker-bio-text li,
.speaker-bio-panel .speaker-bio-text span {
  color: var(--lightbox-panel-color, #2f245e);
}
.speaker-bio-panel .speaker-bio-text p:last-child {
  margin-bottom: 0;
}
/*
Card das comissões — desenho próprio, não é o do speaker

No layout ele é escuro, com borda em degradê, foto redonda com anel em degradê
e tudo centralizado: nada disso vem do card de speaker, que é claro, retangular
e alinhado à esquerda. Herdar um do outro custava mais sobrescrita do que os
dois separados.

A borda em degradê sai de um :before mascarado. É o caminho porque
border-image não respeita raio de canto, e um elemento a mais só para desenhar
borda seria markup pagando por efeito de estilo.
*/
.member-card {
  position: relative;
  border-radius: 12px;
  background-color: #321f7d;
  padding: 24px 16px;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* Nome e CRM numa caixa de altura fixa: 1 linha de nome + 1 de CRM.
       Nem todo membro tem CRM, e sem a reserva cada card empurrava separador
       e função para uma altura diferente dos vizinhos. A faixa do CRM fica
       reservada mesmo vazia — por isso grid com linhas explícitas, e não o
       fluxo do flex. `lh` sai do line-height declarado aqui.

       O nome reserva uma linha só porque o card foi alargado para caber os
       nomes atuais (ver `.committee-list li`). Um nome mais longo no cadastro
       volta a quebrar e desalinha a linha dele; aí é subir para `2lh`. */
}
.member-card:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, #b25dff, #b25dff);
  /* Recorta o miolo e deixa só o anel de 1px: o degradê vira borda.
           O -webkit- não é legado — o Safari só dispensa o prefixo no mask
           composite a partir do 15.4. */
  -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.member-card figure {
  margin: 0 0 8px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #b25dff, #b25dff);
  flex: none;
}
.member-card figure img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.member-card .member-head {
  width: 100%;
  display: grid;
  grid-template-rows: minmax(1lh, auto) minmax(1lh, auto);
  row-gap: 4px;
  font-size: 15px;
  line-height: 1.4;
}
.member-card .member-head h3,
.member-card .member-head .member-crm {
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}
.member-card .member-head h3 {
  grid-row: 1;
  align-self: center;
  font-weight: 400;
  color: #ffffff;
}
.member-card .member-head .member-crm {
  grid-row: 2;
  color: #ffffff;
}
.member-card .separator {
  width: 60%;
  height: 1px;
  background-color: #b25dff;
  margin: 8px auto;
}
.member-card .member-role {
  font-size: 13px;
  line-height: 1.35;
  margin: 12px 0 0;
}
.member-card .member-link {
  margin-top: auto;
  padding-top: 16px;
  font-size: 14px;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: underline;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  position: relative;
  z-index: 3;
}
.member-card .member-link:hover {
  opacity: 0.6;
  text-decoration: none;
  cursor: pointer;
}
.member-card.is-clickable {
  cursor: pointer;
}
.member-card .member-card-stretch {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.section-speakers {
  /* Faixa em azul mais claro, como no layout: esta seção tem fundo próprio,
       um tom acima da base da página. */
  background-color: #4e358c;
  padding: 80px 0;
  /* O frame existe para as setas terem contra o que se posicionar, já que
       elas moram fora do .swiper. Ele leva o teto de largura; a faixa ocupa o
       conteúdo dele.

       1150 = os 1090 da faixa no Figma (node 5897:20341) mais 30px de cada
       lado, onde as setas ficam. Sem o teto, `slidesPerView: 5` não limitaria
       nada na prática: os cinco cards só esticariam, e num monitor de 1600
       cada um chegava a 298px contra os 205 do desenho. */
}
.section-speakers .speakers-frame {
  position: relative;
  max-width: 1150px;
  margin: 0 auto;
  padding: 2px 30px;
}
@media (max-width: 40em) {
  .section-speakers .speakers-frame {
    padding: 0 24px;
  }
}
.section-speakers .speakers-prev,
.section-speakers .speakers-next {
  position: absolute;
  /* Centraliza na FOTO, não no card: o card tem nome e link embaixo, e
           o meio dele cairia sobre o texto. Os 40px descontam metade dessa
           faixa de baixo. */
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  /* O Swiper marca assim quando não há mais para onde ir. */
}
.section-speakers .speakers-prev:hover,
.section-speakers .speakers-next:hover {
  opacity: 0.6;
  text-decoration: none;
  cursor: pointer;
}
.section-speakers .speakers-prev .icon,
.section-speakers .speakers-next .icon {
  width: 7px;
  height: 14px;
}
.section-speakers .speakers-prev.swiper-button-disabled,
.section-speakers .speakers-next.swiper-button-disabled {
  opacity: 0.25;
  cursor: default;
}
.section-speakers .speakers-prev {
  left: 0;
}
.section-speakers .speakers-prev .icon {
  transform: rotate(180deg);
}
.section-speakers .speakers-next {
  right: 0;
}
.section-speakers .speakers-swiper {
  /* Sem folga lateral: o `.swiper` recorta na caixa de PADDING, não na
           de conteúdo, então uma folga aqui deixaria 1px do próximo card
           aparecendo na borda — parece defeito de renderização, não espiada.
           O respiro lateral é do frame acima.

           A conta fecha redonda: (1090 - 4 x 15) / 5 = 206px por card, que é
           o 205 do layout. */
  margin-bottom: 40px;
}
.section-speakers .speakers-swiper .swiper-slide {
  /* Sem `width` aqui. Com `slidesPerView` numérico o Swiper escreve a
               largura inline em cada slide, e uma medida fixa no CSS seria uma
               segunda fonte para a mesma coisa — perdendo sempre, porque
               inline vence, e só confundindo quem for ajustar depois.

               Quantos cabem por tela está em slider.js, na escada de
               `breakpoints`.

               `height: auto` fica: sem ele o Swiper iguala a altura de todos
               os slides à do mais alto por estiramento, e o card perde o
               alinhamento do "Saiba mais" no rodapé. */
  height: auto;
  padding: 2px 0;
}
/*
08 · Programação
*/
.section-schedule {
  padding: 80px 0 0 0;
  /* Alinhada à ESQUERDA e travada na mesma largura das abas: no layout ela
       é uma nota de rodapé do bloco, não uma legenda centralizada. */
  /* Painel de "Aguarde": no layout é uma faixa em degradê azul, com o
       anel de pontos à esquerda e o texto ao lado — não um aviso centralizado. */
  /* Anel de pontos coloridos. Um elemento só: o primeiro ponto é o próprio
       fundo e os outros oito são box-shadow em volta, a 17px do centro. Sai
       mais barato que nove <span> ou um SVG a baixar. */
  /* Quem pediu menos movimento vê o anel parado — ele é decorativo, e a
       informação ("programação em breve") está no texto ao lado. */
}
.section-schedule .schedule-notice {
  text-align: center;
  font-size: 14px;
  max-width: 960px;
  margin: 0 auto 40px;
  /* A segunda linha é a ressalva ("**Alterações de grade...") e no
           layout ela vem mais clara que a primeira, não mais escura. */
}
.section-schedule .schedule-notice strong {
  color: #ffffff;
  font-weight: 400;
}
.section-schedule .schedule-days {
  list-style: none;
  margin: 0 0 24px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.section-schedule .schedule-day {
  position: relative;
  width: 320px;
  max-width: 100%;
  min-height: 64px;
  /* Pílula, não retângulo de canto 8: é a forma do layout. O valor alto
           arredonda pela altura, então não precisa acompanhar mudança de
           tamanho. */
  border-radius: 100px;
  border: none;
  background: none;
  color: #efefef;
  cursor: pointer;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
  transition: background 0.5s;
  /* Borda em degradê da aba inativa — ciano de um lado, lilás do outro,
           como no layout. Vem de um :before mascarado porque `border-image`
           não respeita raio de canto, e numa pílula isso apareceria feio.
           Mesmo recurso do card de comissão. */
  /* Aba ativa: o degradê "gradiente tab agenda" do Figma, e a borda sai
           de cena. O `aria-selected` é o estado de verdade — uma classe
           seguiria o JS e mentiria se ele falhasse. */
}
.section-schedule .schedule-day:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, #b25dff, #b25dff);
  -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.section-schedule .schedule-day .day-name {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}
.section-schedule .schedule-day .day-date {
  text-transform: uppercase;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.3;
}
.section-schedule .schedule-day[aria-selected="true"] {
  /* O degrade da identidade, o mesmo das barras de secao — o manual
               traz um so, e repetir a definicao aqui seria criar um segundo
               lugar para mudar quando ele mudar. */
  background: linear-gradient(90deg, #f35dda 0%, #f35dda 18%, #b25dff 100%);
  color: #ffffff;
}
.section-schedule .schedule-day[aria-selected="true"]:before {
  opacity: 0;
}
.section-schedule .schedule-note {
  max-width: 1010px;
  margin: 0 auto 40px;
}
.section-schedule .schedule-note p {
  text-align: center;
  font-size: 14px;
  margin-bottom: 0;
}
.section-schedule .schedule-note-strong {
  color: #ffffff;
  font-weight: 500;
  text-align: center;
}
.section-schedule .rooms-list {
  list-style: none;
  margin: 0 0 32px;
}
.section-schedule .schedule-room {
  width: 100%;
  height: 100%;
  min-height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(178, 93, 255, 0.55), rgba(243, 93, 218, 0.55));
  color: #ffffff;
  cursor: pointer;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  transition: filter 0.5s;
}
.section-schedule .schedule-room .room-name {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 500;
}
.section-schedule .schedule-room .room-hint {
  font-size: 11px;
  font-weight: 300;
}
.section-schedule .schedule-room[aria-expanded="false"] {
  filter: grayscale(0.4) brightness(0.8);
}
.section-schedule .schedule-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 48px 24px;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(178, 93, 255, 0.3), rgba(178, 93, 255, 0.18));
  margin: 0;
}
.section-schedule .schedule-empty p {
  margin: 0;
  font-size: 18px;
  color: #ffffff;
  text-align: left;
}
.section-schedule .schedule-empty strong {
  color: #b25dff;
  font-weight: 500;
}
@media (max-width: 40em) {
  .section-schedule .schedule-empty {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .section-schedule .schedule-empty p {
    text-align: center;
  }
}
.section-schedule .schedule-spinner {
  flex: none;
  width: 6px;
  height: 6px;
  margin: 17px;
  border-radius: 50%;
  background-color: #f35dda;
  box-shadow: 17px 0 0 #b25dff, 12px 12px 0 #96cef0, 0 17px 0 #f35dda, -12px 12px 0 #ffffff, -17px 0 0 #b25dff, -12px -12px 0 #96cef0, 0 -17px 0 #f35dda, 12px -12px 0 #ffffff;
  animation: spinner-gira 3s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .section-schedule .schedule-spinner {
    animation: none;
  }
}
.schedule-session {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
}
.schedule-session .session-title {
  text-align: center;
  text-transform: none;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  padding: 20px 16px;
  margin: 0;
}
.schedule-session .session-chairs {
  text-align: center;
  font-size: 16px;
  padding: 18px 16px;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.schedule-session .session-chairs strong {
  font-weight: 500;
}
.schedule-session .session-talks {
  list-style: none;
  margin: 0;
}
.schedule-session .talk {
  display: flex;
  gap: 32px;
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.schedule-session .talk:last-child {
  border-bottom: none;
}
.schedule-session .talk.talk-break {
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
}
.schedule-session .talk-time {
  flex: 0 0 132px;
  font-size: 14px;
  font-weight: 500;
  color: #b25dff;
  margin: 0;
}
.schedule-session .talk-body {
  flex: 1 1 auto;
}
.schedule-session .talk-title {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 4px;
}
.schedule-session .talk-translation {
  font-size: 14px;
  font-style: italic;
  margin-bottom: 12px;
}
.schedule-session .talk-speakers {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
}
.schedule-session .talk-speakers li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.schedule-session .talk-speakers .speaker-flag {
  display: flex;
  width: 20px;
  height: 16px;
}
.schedule-session .talk-speakers .speaker-flag .icon {
  width: 100%;
  height: 100%;
}
@media (max-width: 40em) {
  .schedule-session .talk {
    flex-direction: column;
    gap: 8px;
    padding: 20px 16px;
  }
  .schedule-session .talk-time {
    flex: none;
  }
}
/*
09 e 10 · Comissões
*/
.section-committee {
  padding: 80px 0;
  /* Os cards do layout são estreitos: 222px na comissão organizadora, e na
       científica cabem três numa faixa de 1100px. Com a coluna inteira do grid
       eles esticavam e a seção ocupava o dobro da altura.

       Limitar por `max-width` no <li> em vez de mudar as classes de grid
       mantém a quebra responsiva do PureCSS e só impede o card de crescer. */
}
.section-committee .committee-list {
  list-style: none;
  /* Três por linha, como no layout: 3 x 272 + 2 x 24 de intervalo. Sem o
           teto, numa tela larga entravam cinco e o sexto card ficava sozinho
           na linha de baixo. */
  max-width: 864px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  /* 272, não os 240 do layout: com os nomes reais o mais longo
           ("Maria do Carmo Borges de Souza") mede 230px a 15px, e os 208px de
           miolo do card de 240 quebravam quatro nomes em duas linhas. */
}
.section-committee .committee-list li {
  flex: 0 1 272px;
  max-width: 272px;
  margin: 0;
  padding: 0;
}
/*
11 · FAQ
*/
.section-faq {
  padding: 80px 0;
  /* Abertura animada sem uma linha de JS.

       `::details-content` é o miolo do <details>, e com o `interpolate-size:
       allow-keywords` do basic.less a altura consegue transitar de 0 até
       `auto` — que é justamente o que obrigava, antes, a medir o conteúdo em
       JS. `content-visibility` entra com `allow-discrete` para o conteúdo não
       sumir no primeiro quadro do fechamento.

       Onde o pseudo-elemento não existir, o seletor inteiro é descartado pelo
       navegador e o acordeão volta a abrir instantâneo — que é o
       comportamento que ele já tinha. Nada quebra. */
}
.section-faq .faq-list {
  list-style: none;
  margin: 0;
}
.section-faq .faq-list li {
  margin-bottom: 12px;
}
.section-faq details {
  background-color: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.section-faq details[open] {
  background-color: rgba(255, 255, 255, 0.15);
  border-bottom-color: #ffffff;
}
.section-faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}
.section-faq details[open]::details-content {
  block-size: auto;
}
@media (prefers-reduced-motion: reduce) {
  .section-faq details::details-content {
    transition: none;
  }
}
.section-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 32px;
  cursor: pointer;
  list-style: none;
  /* O triângulo padrão do <summary> sai por aqui no WebKit; o
           `list-style: none` acima resolve nos demais. */
}
.section-faq summary::-webkit-details-marker {
  display: none;
}
.section-faq .faq-question {
  font-size: 16px;
  color: #ffffff;
}
.section-faq .faq-icon {
  flex: none;
  display: flex;
  color: #ffffff;
  transition: transform 0.3s ease;
  /* O ícone de menos só aparece com o item aberto, e o de mais some —
           troca de estado é CSS, não JS. */
}
.section-faq .faq-icon .icon {
  width: 16px;
  height: 16px;
}
.section-faq .faq-icon .icon-minus {
  display: none;
}
.section-faq details[open] .faq-icon .icon-plus {
  display: none;
}
.section-faq details[open] .faq-icon .icon-minus {
  display: block;
}
.section-faq details p {
  padding: 0 32px 24px;
  font-size: 12px;
  margin: 0;
}
@media (max-width: 40em) {
  .section-faq summary {
    padding: 16px;
    gap: 16px;
  }
  .section-faq details p {
    padding: 0 16px 16px;
  }
}
/*
12 · Newsletter e Como chegar
*/
.section-newsletter {
  background: linear-gradient(90deg, #4e358c 0%, #b25dff 42.5%, #f35dda 100%);
  padding: 71px 0;
}
.section-newsletter .newsletter-text h2 {
  text-transform: uppercase;
  font-weight: 400;
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1.5rem,calc(1.3571rem + 0.7143vw),2rem);
  margin-bottom: 16px;
}
.section-newsletter .newsletter-text p {
  color: #ffffff;
}
.section-newsletter .newsletter-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.section-newsletter .newsletter-lead strong {
  font-weight: 500;
}
.section-newsletter .newsletter-lead .icon {
  width: 10px;
  height: 10px;
}
.section-newsletter .newsletter-form input[type] {
  background: none;
  border: 1px solid #ffffff;
  border-radius: 8px;
  height: 45px;
  color: #ffffff;
  padding: 0 16px;
  margin-bottom: 8px;
}
.section-newsletter .newsletter-form input[type]::placeholder {
  color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 70em) {
  .section-newsletter .newsletter-text {
    margin-bottom: 32px;
  }
}
.section-location {
  padding: 80px 0;
}
.section-location .location-text h2 {
  text-transform: uppercase;
  font-weight: 400;
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1.5rem,calc(1.3571rem + 0.7143vw),2rem);
  margin-bottom: 40px;
}
.section-location .location-text h3 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 2px;
}
.section-location .location-text .location-name {
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 0;
}
.section-location .location-text .location-address {
  font-size: 16px;
  margin-bottom: 32px;
}
.section-location .location-map img {
  display: block;
  width: 100%;
  border-radius: 8px;
}
@media (max-width: 70em) {
  .section-location .location-text {
    margin-bottom: 32px;
  }
}
/*
13 · Patrocínio
*/
.section-sponsors {
  padding: 40px 0 80px;
  /* Filete de 1px, e não a `.title-bar` de 5px das outras seções: no layout
       o traço aqui é bem mais discreto, e com a barra cheia cada tier passava
       a competir com o título da seção. A opacidade rebaixa o mesmo degradê. */
  /* Flex centralizado, e não grade: com grade, a última linha de um tier
       ímpar (o Bronze tem nove) deixava a marca sozinha encostada à esquerda.
       Centralizado, cada linha se equilibra sozinha, que é como o layout
       distribui. */
}
.section-sponsors .sponsor-group {
  margin-bottom: 60px;
  text-align: center;
}
.section-sponsors .sponsor-label {
  text-transform: uppercase;
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1.125rem,calc(1.0179rem + 0.5357vw),1.5rem);
  font-weight: 500;
  color: #b25dff;
  margin-bottom: 16px;
  text-align: center;
}
.section-sponsors .sponsor-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0 auto 40px;
  background: linear-gradient(90deg, #f35dda 0%, #f35dda 18%, #b25dff 100%);
  opacity: 0.55;
}
.section-sponsors .sponsor-list {
  list-style: none;
  margin: 0 0 20px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 60px;
}
.section-sponsors .sponsor-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.section-sponsors .sponsor-list img {
  display: block;
  max-height: 60px;
  max-width: 200px;
  width: auto;
}
@media (max-width: 40em) {
  .section-sponsors .sponsor-list {
    gap: 24px 32px;
  }
  .section-sponsors .sponsor-list img {
    max-height: 44px;
    max-width: 130px;
  }
}
/*
Seletor de idioma — node 5684:6575 ("botão blingue"), 80x45 no layout.

Mora fora do .wrap-header porque aparece nos dois headers (desktop e mobile);
o que é específico de cada um fica no bloco do header correspondente.
*/
.lang-switch {
  position: relative;
}
.lang-switch summary {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 45px;
  padding: 12px 15px;
  cursor: pointer;
  list-style: none;
  color: #ffffff;
  /* O triângulo padrão do <summary> sai por aqui no WebKit; o
           `list-style: none` acima resolve nos demais. */
}
.lang-switch summary::-webkit-details-marker {
  display: none;
}
.lang-switch .lang-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  margin: 0;
}
.lang-switch .lang-flag .icon {
  width: 100%;
  height: 100%;
}
.lang-switch .lang-code {
  font-size: 14px;
  line-height: 1;
  color: #ffffff;
  margin: 0;
}
.lang-switch .lang-caret {
  display: flex;
  color: #ffffff;
  margin: 0;
}
.lang-switch .lang-caret .icon {
  width: 5px;
  height: 10px;
  /* O chevron do Figma aponta para a direita; no seletor ele aponta
               para baixo. Girar o mesmo partial evita um segundo SVG só para
               mudar o ângulo. */
  transform: rotate(90deg);
}
.lang-switch[open] .lang-caret .icon {
  transform: rotate(-90deg);
}
.lang-switch ul {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 0;
  list-style: none;
  background-color: #2f245e;
  border-radius: 4px;
  padding: 4px 0;
  min-width: 100%;
  z-index: 2;
}
.lang-switch ul a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  color: #ffffff;
  font-size: 12px;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.lang-switch ul a:hover {
  opacity: 0.6;
  text-decoration: none;
  cursor: pointer;
}
/*
Anel de pontos do painel "Aguarde" — ver .schedule-spinner.
Fica no nível raiz porque @keyframes não é herdado por aninhamento.
*/
@keyframes spinner-gira {
  to {
    transform: rotate(360deg);
  }
}
/*
Seletor de idioma dentro da programação

Mesmo componente do header, só que sobre o fundo da seção e com um rótulo ao
lado. O que muda de contexto fica aqui; o desenho continua vindo do
.lang-switch.
*/
/* No layout o rótulo e o seletor moram DENTRO da mesma cápsula — a borda
   envolve os dois, não só o seletor. Por isso a pílula é este container, e o
   .lang-switch de dentro fica sem borda própria. */
.schedule-language {
  width: fit-content;
  margin: 0 auto 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 100px;
}
.schedule-language .schedule-language-label {
  font-size: 11px;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.schedule-language .lang-switch {
  /* A lista abre a partir da cápsula, alinhada pela direita. */
}
.schedule-language .lang-switch summary {
  height: 36px;
  padding: 0;
  gap: 6px;
}
.schedule-language .lang-switch ul {
  top: calc(100% + 10px);
  right: -16px;
}
@media (max-width: 40em) {
  .schedule-language {
    flex-direction: column;
    gap: 2px;
    padding: 8px 20px;
    border-radius: 24px;
  }
}
/*
================================================================================
Hero composto — slide do tipo `arte`

O manual da identidade entrega o mesh como fundo de referência, não como
arquivo: no PDF ele é sombreamento vetorial, que não sai como bitmap. Aqui ele
é reconstruído com degradês radiais sobrepostos, seguindo a leitura da peça —
roxo escuro na base, magenta atravessando o centro e o azul-claro abrindo no
canto superior direito.

Vantagem de ser CSS e não imagem: acompanha qualquer proporção de tela sem
recorte, não pesa nada e não serrilha. A desvantagem é que é aproximação — se
vier o mesh como arquivo, troque este bloco por um `background-image` e o resto
continua valendo.
================================================================================
*/
.main-slider .arte {
  position: relative;
  width: 100%;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Camada do mesh. Fica num :before para o conteúdo poder ter z-index
       próprio sem disputar empilhamento com o fundo. */
  /* A frase da peça: o trecho em destaque vem dentro de uma pílula rosa.
       `<mark>` e não `<span>` — é exatamente o que o elemento significa, texto
       realçado, e o leitor de tela anuncia o realce junto. O fundo amarelo
       padrão do navegador é sobrescrito aqui. */
}
.main-slider .arte:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 70% 60% at 88% 8%, rgba(150, 206, 240, 0.85) 0%, rgba(150, 206, 240, 0) 60%), radial-gradient(ellipse 65% 70% at 62% 42%, rgba(243, 93, 218, 0.8) 0%, rgba(243, 93, 218, 0) 62%), radial-gradient(ellipse 60% 80% at 34% 72%, rgba(178, 93, 255, 0.7) 0%, rgba(178, 93, 255, 0) 66%), radial-gradient(ellipse 90% 90% at 8% 30%, #321f7d 0%, rgba(50, 31, 125, 0) 70%), linear-gradient(115deg, #2f245e 0%, #4e358c 55%, #b25dff 100%);
}
.main-slider .arte > .row {
  position: relative;
  z-index: 1;
  width: 100%;
}
.main-slider .arte .arte-logo {
  display: block;
  width: 100%;
  max-width: 430px;
  height: auto;
  margin-bottom: 40px;
}
.main-slider .arte .arte-frase {
  /* Sem espaco depois das virgulas: o conteudo de `~""` e opaco para o
       --compress, entao o que ficar aqui vai para o CSS minificado. Os espacos
       em volta do `+` sao obrigatorios pela sintaxe de calc() e ficam. */
  font-size: clamp(1.25rem,calc(1.1071rem + 0.7143vw),1.75rem);
  font-weight: 300;
  line-height: 1.45;
  color: #ffffff;
  max-width: 22em;
  margin-bottom: 40px;
}
.main-slider .arte .arte-frase mark {
  background-color: #f35dda;
  color: #2f245e;
  padding: 0.05em 0.5em;
  border-radius: 100px;
  font-weight: 400;
}
.main-slider .arte .arte-figura img {
  display: block;
  /* Teto de 440px: sem ele a celula ficava com ~590 e sozinha
               empurrava o hero para mais de 1000px de altura. */
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-left: auto;
}
@media (max-width: 70em) {
  .main-slider .arte {
    min-height: 0;
    padding: 40px 0;
  }
  .main-slider .arte .arte-texto {
    order: 2;
    text-align: center;
  }
  .main-slider .arte .arte-logo {
    margin: 0 auto 32px;
    max-width: 300px;
  }
  .main-slider .arte .arte-frase {
    margin-left: auto;
    margin-right: auto;
  }
  .main-slider .arte .arte-figura {
    order: 1;
    margin-bottom: 32px;
  }
  .main-slider .arte .arte-figura img {
    max-width: 320px;
    margin: 0 auto;
  }
}
/*
================================================================================
Modelo de caixa dentro dos carrosséis

O base.css propaga o modelo de caixa por herança: `html` é `border-box` e
`* { box-sizing: inherit }`. O CSS do Swiper, porém, declara `content-box` no
seu container — e como a propagação é por herança, dali para baixo TUDO dentro
de um carrossel passa a ser content-box.

Isso já quebrou duas coisas, as duas medidas:

  1. `.speaker-card` tem `height: 100%` e padding. Em content-box os 100%
     viravam a altura do conteúdo e os 32px de padding entravam por fora: o
     card ficava 271px dentro de um slide de 237 e a sobra ia parar no
     `margin-top: auto` do "Saiba mais".

  2. As colunas do grid dentro do slide composto do banner. `lg-7` + `lg-5`
     somam 100%, mas com o `padding: 0 1rem` de cada coluna somando por fora
     davam 863 + 625 = 1488 numa faixa de 1424 — e quebravam linha, jogando a
     célula para baixo do texto.

Restaurar aqui resolve a classe inteira do problema em vez de caso a caso. É
seguro: o próprio Swiper não usa padding nos elementos que posiciona, então
para ele os dois modelos dão no mesmo.
================================================================================
*/
.swiper,
.swiper * {
  box-sizing: border-box;
}
/*
Controle de carrossel sem função

Com um slide só não há para onde navegar, e o Swiper marca setas e dots com
`-lock`. Sem isto eles ficam na tela como enfeite morto — e, pior, clicáveis
sem efeito. É regra do componente, não do banner: vale para qualquer carrossel
que fique com um item só depois que o cadastro entrar.
*/
/* O `.swiper` na frente nao e enfeite: sem ele o seletor tem menos peso que
   o `.main-slider .swiper-button-prev` que posiciona as setas, e a regra era
   simplesmente ignorada. Com os dois empatados em especificidade, vale este,
   que vem depois no arquivo. */
.swiper .swiper-button-lock,
.swiper .swiper-pagination-lock {
  display: none;
}