@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
	height: auto;   /* mantém a proporção quando max-width reduz a largura */
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}
.coluna {
	width: 95%;
	margin-right: auto;
	margin-left: auto;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	font-size: 1.0625rem; 
	line-height: 28px;
	color: #001830;
}

/* Mesa, data e hora: estilo-base (só o font-size muda nos breakpoints) */
.mesa,
.data,
.hora {
	font-weight: bold;
	text-align: left;
	display: block;
	margin-bottom: 10px;
	padding-left: 0;
	padding-right: 0;
}
.data,
.hora {
	text-transform: uppercase;
}
/* Mesa: corpo maior, sem caixa alta forçada */
.mesa {
	font-size: var(--fonte-mesa);
	line-height: 1.2;
	color: #005cae;
}
/* Data: mesmo corpo do título da seção. Hora: corpo menor. */
.data {
	font-size: 1.5625rem;
}
.hora {
	font-size: 15px;
	color: #005cae;
}
/* Data: sem largura, margem, float ou posição próprias; linha pontilhada
   (imagem de fundo definida em estilos.css) alinhada à esquerda */
.data {
	width: auto;
	margin-left: 0;
	margin-right: 0;
	float: none;
	position: static;
	text-indent: 0;
	height: auto;
	background-image: none;   /* remove a linha pontilhada (fundo_data.png do estilos.css) */
}

.titulo_secao {
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	font-size: 1.5625rem; 
	font-weight: 700;
	color: #00467a;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
}
.form_texto_pad {
	font-size: 13px;
	text-align: left;
	display: block;
	font-weight: bold;
	color: #036;
	padding-left: 0%;
	padding-top: 10px;
}

.form_dados_pad {
	display: block;
	padding-left: 1%;
}

.aviso {
	color: #333;
	font-size: 13px;
	font-weight: bold;
	line-height: 18px;
	padding-top: 5px;
	padding-right: 5%;
	padding-left: 5%;
	text-align: center;
}

.periodo {
	padding-top: 10px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}
.coluna {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	font-size: 1.1875rem; 
	line-height: 30px;
	color: #001830;
}
.hora {
	font-size: 16px;
}

.aviso {
	color: #333;
	font-size: 13px;
	font-weight: bold;
	line-height: 18px;
	padding-top: 5px;
	padding-right: 20%;
	padding-left: 20%;
	text-align: center;
}

.periodo {
	padding-top: 10px;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}

}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
}

.coluna {
	width: 56%;
	margin-right: auto;
	margin-left: auto;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	font-size: 1.25rem; 
	line-height: 32px;
	color: #001830;
}
.data {
	font-size: 1.875rem;
}
.hora {
	font-size: 17px;
}

.titulo_secao {
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	font-size: 1.875rem; 
	font-weight: 700;
	color: #00467a;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 30px;
}
.form_texto_pad {
	font-size: 13px;
	text-align: left;
	display: block;
	font-weight: bold;
	color: #036;
	padding-left: 15%;
	padding-top: 10px;
}

.form_dados_pad {
	display: block;
	padding-left: 17%;
}
}


/* ==========================================================
   PÁGINA DE PROGRAMAÇÃO
   Tudo escopado em .programacao (classe do div.coluna no HTML).
   O seletor com duas classes vence as regras de uma classe do
   estilos.css, sem precisar de !important.
   ========================================================== */

.programacao {
	/* Ícones. A coluna de ícones tem a largura do ícone de data/hora; o ícone de
	   perfil (menor) fica centralizado nela, e o texto de datas, horas e nomes
	   começa na mesma posição. */
	--icone-data: 36px;     /* calendário (define a largura da coluna de ícones) */
	--icone-hora: 28px;     /* relógio (rente à margem esquerda) */
	--icone-perfil: 20px;   /* perfil dos nomes */
	--icone-espaco: 8px;    /* espaço entre o calendário e o texto da data */
	--hora-espaco: 6px;     /* espaço entre o relógio e o texto da hora */
	--nome-espaco: 8px;     /* espaço entre o ícone de perfil e o nome */

	display: flow-root;   /* garante que o conteúdo comece abaixo do cabeçalho */
	padding-top: 40px;    /* distância entre o cabeçalho e o título da seção */
	text-align: left;
}
.programacao .titulo_secao {
	margin-top: 0;
}

.programacao p {
	margin: 0 0 1em;
}

.programacao .capitular {
	font-size: 30px;
	font-weight: bold;
}

/* Blocos de programação */
.programacao .bloco {
	margin-top: 30px;
}
/* Cada dia é um <section class="dia">. A data fica "grudada" sob a barra do
   menu enquanto houver conteúdo do dia, e sai quando o dia termina. */
.programacao .dia {
	margin-top: 40px;
}
.programacao .dia > .data {
	position: sticky;
	top: calc(var(--topo-conteudo) - 1px);   /* -1px: sem fresta sob o menu */
	transition: top 0.25s ease;              /* acompanha o título ao compactar */
	z-index: 5;                              /* abaixo do topo estacionado (10002) */
	margin-bottom: 10px;
	padding: 6px 0;
	background-color: rgba(248, 235, 220, 0.85);   /* #f8ebdc a 85% */
	-webkit-backdrop-filter: blur(var(--menu-desfoque, 10px));
	backdrop-filter: blur(var(--menu-desfoque, 10px));
}
.programacao .data + .bloco {
	margin-top: 0;
}

.programacao .titulo_componentes_mesa,
.programacao .mesa_descricao {
	text-align: left;
	padding-left: 0;
	padding-right: 0;
}
/* Descrição da mesa, "Palestrantes/Participantes" e instituições:
   maiores que no estilos.css (13px, 12px e 12px) */
.programacao .mesa_descricao {
	font-size: 1.0625rem;
	line-height: 1.5;
	margin-bottom: 10px;
}
.programacao .titulo_componentes_mesa {
	font-size: 1.0625rem;
	margin-top: 14px;
}
.programacao .nome_instituicao {
	font-size: 0.9375rem;
}

/* Listas de nomes */
.programacao ul.lista_nomes {
	list-style-type: none;
	margin: 0 0 20px;
	padding: 0;
}
.programacao ul.lista_nomes li {
	position: relative;
	list-style: none;   /* remove o GIF (li { list-style-image } do estilos.css) */
	padding: 4px 0 4px calc((var(--icone-data) - var(--icone-perfil)) / 2 + var(--icone-perfil) + var(--nome-espaco));
}

/* Lançamentos de livros */
.programacao .livro {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 15px;
}
.programacao .livro img {
	flex: 0 0 88px;
	width: 88px;
	height: auto;
}
.programacao .livro_texto {
	font-size: 12px;
	line-height: 16px;
}
.programacao .livro_titulo,
.programacao .livro_autor {
	display: block;
}
.programacao .livro_titulo {
	font-weight: bold;
}
.programacao .livro_autor {
	margin-top: 4px;
}

/* Nota, comissão e créditos */
.programacao .nota {
	margin-top: 30px;
	font-size: 11px;
	line-height: 15px;
}
/* Comissão: box com linha de 1px */
.programacao .comissao {
	margin-top: 80px;
	padding: 20px;
	border: 1px solid #05172e;
}
@media only screen and (min-width: 481px) {
.programacao .comissao {
	padding: 28px 32px;
}
}
/* Títulos do rodapé: mesmo estilo dos títulos de mesa, em outra cor */
.programacao .comissao .titulo_componentes_mesa {
	font-size: var(--fonte-mesa);
	font-weight: bold;
	line-height: 1.2;
	color: #05172e;
	margin: 0 0 8px;
}
/* Nomes e instituições: mesmo padrão dos integrantes das mesas
   (o tamanho vem de .coluna e de .programacao .nome_instituicao) */
.programacao .comissao .pessoa {
	padding: 4px 0;
}
.programacao .comissao .equipe {
	margin-top: 20px;             /* = respiro interno do box */
}
@media only screen and (min-width: 481px) {
.programacao .comissao .equipe {
	margin-top: 28px;
}
}
.programacao .comissao .nota_arte {
	position: relative;
	margin: 28px 0 0;
	padding: 4px 0 4px 30px;      /* espaço para o ícone */
}
.programacao .comissao .nota_arte::before {
	content: "info";
	position: absolute;
	left: 0;
	top: 4px;
	font-family: "Material Symbols Outlined";
	font-feature-settings: "liga";
	font-size: 22px;
	font-weight: normal;
	line-height: 1.4;
	color: #005cae;
}
.programacao .comissao .nota_arte a:link,
.programacao .comissao .nota_arte a:visited {
	color: #005cae;
	text-decoration: underline;
}
.programacao .comissao .nota_arte a:hover,
.programacao .comissao .nota_arte a:active {
	color: #002b4d;
}

/* Ícones (Material Symbols, Google Fonts): calendário nas datas, relógio nas
   horas e perfil nos nomes. Requer o link do Material Symbols no <head>. */
.programacao .data::before,
.programacao .hora::before,
.programacao ul.lista_nomes li::before {
	font-family: "Material Symbols Outlined";
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;      /* o uppercase de .data/.hora quebraria o ícone */
	white-space: nowrap;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}

/* Datas e horas: ícone na linha, antes do texto */
.programacao .data::before,
.programacao .hora::before {
	display: inline-block;
	vertical-align: -0.2em;
}
.programacao .data::before {
	font-size: var(--icone-data);
	width: var(--icone-data);
	margin-right: var(--icone-espaco);
}
.programacao .hora {
	display: flex;
	align-items: center;   /* centro do ícone alinhado ao centro do texto */
}
.programacao .hora::before {
	font-size: var(--icone-hora);
	width: var(--icone-hora);
	/* relógio rente à margem esquerda, com o texto logo ao lado */
	margin-left: 0;
	margin-right: var(--hora-espaco);
	flex: 0 0 auto;
}
.programacao .data::before {
	content: "calendar_month";
	content: "calendar_month" / "";   /* "/ ''" = sem texto alternativo p/ leitores de tela */
}
.programacao .hora::before {
	content: "schedule";
	content: "schedule" / "";
}

/* Nomes: ícone menor, centralizado na coluna dos ícones de data e hora e na
   primeira linha do texto */
.programacao ul.lista_nomes li::before {
	content: "account_circle";
	content: "account_circle" / "";
	position: absolute;
	top: 4px;
	left: calc((var(--icone-data) - var(--icone-perfil)) / 2);
	width: var(--icone-perfil);
	font-size: var(--icone-perfil);
	line-height: inherit;
}


/* Alturas compartilhadas pela ilustração, pelo menu e pelas datas fixas.
   --faixa-altura:  faixa de ilustração no topo da página (rola com o texto)
   --menu-altura:   altura da barra de links
   --topo-conteudo: altura do título + menu estacionados; onde o conteúdo "gruda"

   A faixa usa "em" (como o CSS original) e é declarada no body, para valer o
   mesmo "em" da ilustração. @property faz o valor virar pixels já no body;
   sem isso, o "em" seria recalculado em cada elemento que usa a variável. */
@property --faixa-altura {
	syntax: "<length>";
	inherits: true;
	initial-value: 20px;
}
body {
	--faixa-altura: 10em;   /* faixa decorativa: mesma altura em todas as telas */
	--menu-altura: 44px;
	--fonte-mesa: 20px;   /* corpo dos títulos de mesa e dos títulos do rodapé */
	--cabecalho-respiro: 12px;   /* espaço acima e abaixo da imagem do título */
	/* Borda lateral da imagem do título (só no mobile) */
	--borda-titulo: 16px;
	/* Medidas da imagem img/titulodata.png, em pixels. Ao trocar a imagem, mude só
	   estes dois números (e o width/height do <img> em cabecalho.php). */
	--titulo-largura: 603;
	--titulo-altura: 104;
	/* Altura da imagem do título: a do arquivo, reduzida em proporção em telas
	   estreitas, deixando a borda lateral de cada lado */
	--img-titulo-altura: min(calc(var(--titulo-altura) * 1px), calc((100vw - 2 * var(--borda-titulo)) * var(--titulo-altura) / var(--titulo-largura)));
	--cabecalho-altura: calc(var(--img-titulo-altura) + 2 * var(--cabecalho-respiro));
	/* Altura do bloco título + menu: onde as datas fixas grudam */
	--topo-conteudo: calc(var(--cabecalho-altura) + var(--menu-altura));
	/* Estado compacto (estacionado): a barra do título tem 2x a altura da barra do
	   menu, e a imagem encolhe para caber, com um respiro de 8px acima e abaixo */
	--cabecalho-altura-compacta: calc(2 * var(--menu-altura));
	--img-titulo-altura-compacta: min(var(--img-titulo-altura), calc(var(--cabecalho-altura-compacta) - 16px));
	--topo-conteudo-compacto: calc(var(--cabecalho-altura-compacta) + var(--menu-altura));
}
@media only screen and (min-width: 481px) {
body {
	--menu-altura: 48px;
	--borda-titulo: 0px;   /* sem borda no tablet e no desktop */
	--fonte-mesa: 21px;
	--cabecalho-respiro: 16px;
}
}
@media only screen and (min-width: 769px) {
body {
	--menu-altura: 52px;
	--fonte-mesa: 22px;
	--cabecalho-respiro: 20px;
}
}

/* ==========================================================
   TOPO DA PÁGINA
   - Ilustração decorativa: faz parte da página e rola com o texto.
   - #topo_fixo (título do evento + menu): estaciona no topo da tela.
   ========================================================== */
#ilustracao_cabecalho,
.faixa_ilustracao {
	display: block;
	width: 100%;
	height: var(--faixa-altura);
	background-image: url(img/ilustracao.png);
	background-repeat: repeat-x;
	background-position: center top;
}
/* Mobile e tablet: posição horizontal sorteada a cada carregamento (--faixa-x é
   definida por script em cabecalho.php). Sem JavaScript, fica centralizada. */
@media only screen and (max-width: 768px) {
#ilustracao_cabecalho,
.faixa_ilustracao {
	background-position: var(--faixa-x, 50%) top;
}
}
#topo_fixo {
	position: sticky;
	top: 0;
	z-index: 10002;   /* acima do conteúdo e das datas fixas */
	/* Reserva sempre a altura cheia: ao compactar o título, o texto abaixo não
	   "pula". A parte vazia deixa passar cliques para o conteúdo. */
	height: var(--topo-conteudo);
	pointer-events: none;
}
#cabecalho,
.menu_principal {
	pointer-events: auto;
}
#cabecalho {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--cabecalho-altura);
	background-color: #f8ebdc;
	background-image: url(img/fundo_titulodata.png);
	transition: height 0.25s ease;
}
#cabecalho img {
	display: block;     /* sem o espaço de linha sob a imagem: altura previsível */
	width: auto;        /* a largura acompanha a altura, mantendo a proporção */
	max-width: 100%;
	height: var(--img-titulo-altura);
	object-fit: contain;
	transition: height 0.25s ease;
}
/* Compacto: classe aplicada pelo script de cabecalho.php quando a ilustração
   já saiu da tela e o título está estacionado */
html.topo-compacto #cabecalho {
	height: var(--cabecalho-altura-compacta);
}
html.topo-compacto #cabecalho img {
	height: var(--img-titulo-altura-compacta);
}
html.topo-compacto .programacao .dia > .data {
	top: calc(var(--topo-conteudo-compacto) - 1px);
}
@media (prefers-reduced-motion: reduce) {
#cabecalho,
#cabecalho img,
.programacao .dia > .data {
	transition: none;
}
}

/* ==========================================================
   MENU PRINCIPAL (barra de links das seções)
   Um único <nav> em cabecalho.php. Em tablet e desktop ele fica
   "grudado" sob a faixa de ilustração ao rolar a página (position:
   sticky), no lugar da cópia #menu_fixo que existia antes.
   ========================================================== */
.menu_principal {
	--menu-fonte: clamp(13px, 3.8vw, 15px);   /* cabe os 3 links em telas estreitas */
	--menu-desfoque: 10px;   /* intensidade do desfoque */

	/* Efeito vidro fosco: o conteúdo que passa por baixo fica desfocado.
	   O desfoque só aparece se o fundo for um pouco translúcido. */
	background-color: rgba(237, 218, 193, 0.8);   /* #eddac1 a 80% */
	-webkit-backdrop-filter: blur(var(--menu-desfoque));
	backdrop-filter: blur(var(--menu-desfoque));
}
/* Navegadores sem backdrop-filter: fundo sólido, para não prejudicar a leitura */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.menu_principal {
	background-color: #eddac1;
}
}
.menu_principal ul {
	display: flex;
	flex-wrap: nowrap;   /* uma linha só: a altura da barra é sempre --menu-altura */
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.menu_principal li {
	flex: 1 1 0;
	list-style: none;   /* anula o li { list-style-image } do estilos.css */
}
.menu_principal a,
.menu_principal .sem_link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--menu-altura);
	padding: 0 8px;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	font-size: var(--menu-fonte);
	font-weight: bold;
	line-height: 1.2;
	color: #00467a;
	text-decoration: none;
}
.menu_principal a:hover,
.menu_principal a:focus-visible,
.menu_principal a[aria-current="page"] {
	color: #002b4d;
	background-color: rgba(0, 70, 122, 0.08);
	text-decoration: none;
}
/* Item sem link (ainda sem página): igual aos outros, mas não clicável e mais discreto */
.menu_principal .sem_link {
	cursor: default;
	opacity: .55;
}
/* Seção atual: mesma cor e fundo do hover (regra acima), mais o traço embaixo */
.menu_principal a[aria-current="page"] {
	box-shadow: inset 0 -4px 0 #00467a;
}

/* Tablet */
@media only screen and (min-width: 481px) {
.menu_principal {
	--menu-fonte: 16px;
}
.menu_principal a,
.menu_principal .sem_link {
	padding: 0 16px;
}
}

/* Desktop */
@media only screen and (min-width: 769px) {
.menu_principal {
	--menu-fonte: 17px;
}
.menu_principal ul {
	width: clamp(420px, 46%, 760px);
	margin: 0 auto;
}
}


/* ==========================================================
   RODAPÉ "MAIS INFORMAÇÕES" (rodape.php, classe .info)
   "div.info" tem mais especificidade que ".info" do estilos.css, então vale
   mesmo que esse arquivo seja carregado depois.
   ========================================================== */
div.info {
	margin-top: 0;         /* o espaço vem do padding dos logos, acima */
	background: #005cae;   /* sólido, sem transparência */
	opacity: 1;
	color: #f8ebdc;        /* o #333 original ficaria ilegível sobre o azul */
}
div.info a:link,
div.info a:visited {
	color: #f8ebdc;        /* o azul padrão dos links (#06F) sumiria no fundo */
	text-decoration: underline;
}
div.info a:hover,
div.info a:active {
	color: #fff;
}


/* ==========================================================
   FUNDO DA PÁGINA
   O estilos.css usa background-attachment: fixed no body, que o Safari do
   iPhone/iPad ignora (o fundo rola junto com o texto). Aqui o fundo vive
   numa camada fixa, que funciona em qualquer dispositivo.
   ========================================================== */
body {
	background-image: none;
	background-color: #f8ebdc;   /* cor de apoio, caso a imagem não cubra a tela */
}
body::before {
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: url(img/fundo_conteudo.png) center top repeat-x;
	pointer-events: none;
}


/* ==========================================================
   LOGOS DO RODAPÉ (rodape.php)
   ========================================================== */
.logos_rodape {
	--escala-logos: .7;           /* mobile; 1 no tablet/desktop */
	padding: 30px 5% 40px;        /* 5% de respiro nas laterais */
	text-align: center;
}
@media (min-width: 481px) { .logos_rodape { --escala-logos: .85; } }
@media (min-width: 769px) { .logos_rodape { --escala-logos: 1; } }

.logos_rodape .grupo_logos + .grupo_logos { margin-top: 28px; }

.logos_rodape .rotulo_logos {
	margin: 0 0 14px;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: #005cae;
	text-align: center;
}

.logos_rodape ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px 24px;               /* 36px a partir do tablet */
	margin: 0;
	padding: 0;
	list-style: none;
}
.logos_rodape ul + ul { margin-top: 20px; }   /* 2ª linha do Apoio */
@media (min-width: 481px) { .logos_rodape ul { column-gap: 36px; } }
.logos_rodape li {
	margin: 0;
	padding: 0;
	list-style: none;             /* anula o li { list-style-image } */
}

/* Equilíbrio óptico: altura de cada logo calculada para uma área visual
   parecida (largos ficam mais baixos, compactos mais altos).
   --h = altura no desktop em px; --r = largura / altura do arquivo. */
.logos_rodape img {
	display: block;
	width: auto;
	height: calc(var(--h) * var(--escala-logos) * 1px);
	aspect-ratio: var(--r);
	max-width: 100%;
}
.logos_rodape .logo_cpda50       { --h: 84; --r: 318 / 228; }
.logos_rodape .logo_ibirapitanga { --h: 23; --r: 77.298 / 10; }
.logos_rodape .logo_aspta        { --h: 30; --r: 47.642 / 10; }
.logos_rodape .logo_capes        { --h: 60; --r: 21.528 / 20; }
.logos_rodape .logo_faperj       { --h: 44; --r: 51.059 / 20; }
.logos_rodape .logo_ufrrj        { --h: 46; --r: 56.088 / 20; }


/* ==========================================================
   PROGRAMAÇÃO: dia da semana e grupos de trabalho
   ========================================================== */
.programacao .data .dia_semana {
	margin-left: 0.4em;
	font-size: 0.6em;
	font-weight: normal;
	letter-spacing: 0.04em;
}

.programacao .grupos_trabalho {
	margin-top: 8px;
}
.programacao .gts_conteudo {
	margin-top: 20px;
	padding-left: 16px;
	border-left: 2px solid #005cae;   /* marca onde o bloco aberto começa e termina */
}
@media only screen and (min-width: 481px) {
.programacao .gts_conteudo {
	margin-left: 18px;                /* alinha a linha ao centro do ícone */
	padding-left: 24px;
}
}
.programacao .gt {
	margin-top: 36px;
}
.programacao .gt:first-of-type {
	margin-top: 0;
}
.programacao .gt .mesa {
	margin-bottom: 6px;
	color: inherit;               /* mesma cor do texto, não o azul das mesas */
}
.programacao .gt .ementa {
	margin: 0;
}


/* ==========================================================
   PROGRAMAÇÃO: destaque e link para os grupos de trabalho
   ========================================================== */
.programacao .mesa_descricao.destaque {
	font-weight: bold;
}

.programacao .link_ancora:link,
.programacao .link_ancora:visited {
	color: #005cae;
	font-weight: 600;
	text-decoration: underline;
}
.programacao .link_ancora:hover,
.programacao .link_ancora:active {
	color: #002b4d;
}

/* Ao saltar para a âncora, o título não fica escondido sob o topo estacionado */
.programacao .grupos_trabalho {
	scroll-margin-top: calc(var(--topo-conteudo-compacto) + 16px);
}


/* ==========================================================
   PROGRAMAÇÃO: blocos expansíveis (descrições dos GTs e ementas)
   Ícone: círculo azul com "+" (fechado) e "−" (aberto).
   ========================================================== */
.programacao .grupos_trabalho > summary,
.programacao .ementa_gt > summary {
	list-style: none;                 /* tira o triângulo padrão */
	cursor: pointer;
	color: #005cae;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.3;
}
.programacao .grupos_trabalho > summary::-webkit-details-marker,
.programacao .ementa_gt > summary::-webkit-details-marker {
	display: none;                    /* Safari */
}

.programacao .grupos_trabalho > summary,
.programacao .ementa_gt > summary,
.programacao .recolher_gts {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.programacao .grupos_trabalho > summary::before,
.programacao .ementa_gt > summary::before,
.programacao .recolher_gts::before {
	content: "add";
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--icone-toggle);
	height: var(--icone-toggle);
	border-radius: 50%;
	background: #005cae;
	color: #f8ebdc;
	font-family: "Material Symbols Outlined";
	font-feature-settings: "liga";
	font-size: calc(var(--icone-toggle) * .78);
	font-weight: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	transition: background-color .15s;
}
.programacao .grupos_trabalho[open] > summary::before,
.programacao .ementa_gt[open] > summary::before,
.programacao .recolher_gts::before {
	content: "remove";
}

/* Botão principal */
.programacao .grupos_trabalho > summary {
	--icone-toggle: 14px;
	margin-top: 4px;
	padding: 8px 16px 8px 12px;
	border: 1px solid #005cae;
	transition: background-color .15s;
}
.programacao .grupos_trabalho > summary:hover {
	background: rgba(0, 92, 174, .08);
}
.programacao .grupos_trabalho > summary .rotulo_aberto,
.programacao .grupos_trabalho[open] > summary .rotulo_fechado {
	display: none;
}
.programacao .grupos_trabalho[open] > summary .rotulo_aberto {
	display: inline;
}

/* Ementa de cada GT */
.programacao .ementa_gt {
	margin-top: 14px;
}
.programacao .ementa_gt > summary {
	--icone-toggle: 12px;
	padding: 2px 0;
}
.programacao .ementa_gt > .ementa {
	margin-top: 10px;
}

/* "Recolher descrições" (fim do conteúdo) */
.programacao .recolher_gts {
	--icone-toggle: 12px;
	margin: 36px 0 0;
	padding: 2px 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	color: #005cae;
	text-align: left;
}

/* Hover e foco */
.programacao .grupos_trabalho > summary:hover,
.programacao .ementa_gt > summary:hover,
.programacao .recolher_gts:hover {
	color: #002b4d;
}
.programacao .grupos_trabalho > summary:hover::before,
.programacao .ementa_gt > summary:hover::before,
.programacao .recolher_gts:hover::before {
	background: #002b4d;
}
.programacao .grupos_trabalho > summary:focus-visible,
.programacao .ementa_gt > summary:focus-visible,
.programacao .recolher_gts:focus-visible {
	outline: 2px solid #005cae;
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.programacao .grupos_trabalho > summary,
	.programacao .grupos_trabalho > summary::before,
	.programacao .ementa_gt > summary::before { transition: none; }
}


/* "mediante inscrição": já com cara de link; o destino entra depois com
   href="..." no <a class="link_inscricao"> (sem href, não é clicável). */
.programacao .link_inscricao {
	color: #005cae;
	text-decoration: underline;
}
.programacao .link_inscricao[href] {
	cursor: pointer;
}
.programacao .link_inscricao[href]:hover,
.programacao .link_inscricao[href]:active {
	color: #002b4d;
}


/* ==========================================================
   INSCRIÇÃO: página de entrada (dois boxes) e formulários
   ========================================================== */
.inscricao {
	display: flow-root;
	padding-top: 40px;              /* afasta o título do cabeçalho, como na programação */
	padding-bottom: 40px;
	text-align: left;
}
.inscricao .titulo_secao {
	margin-top: 0;
	text-align: left;
}
.inscricao p {
	margin: 0 0 1em;
}

/* Dois boxes quadrados: empilhados no celular, lado a lado a partir de 481px */
.inscricao .boxes_inscricao {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 24px;
}
@media only screen and (min-width: 600px) {
.inscricao .boxes_inscricao {
	grid-template-columns: repeat(2, minmax(0, 220px));   /* tamanho de cada box */
	justify-content: center;                              /* centraliza o par de boxes */
	gap: 28px;                                            /* distância entre eles */
}
}
@media only screen and (min-width: 769px) {
.inscricao .boxes_inscricao {
	gap: 40px;
}
}

.inscricao .box_inscricao {
	display: flex;
	flex-direction: column;
	aspect-ratio: 1 / 1;            /* quadrado; cresce se o texto pedir mais altura */
	padding: 32px 18px 18px;        /* mais respiro acima do título */
	color: inherit;                 /* cor padrão do texto até o hover */
	border: 1px solid currentColor;
	text-decoration: none;
	transition: color .15s, background-color .15s;
}
.inscricao .box_inscricao:hover,
.inscricao .box_inscricao:focus-visible {
	color: #005cae;                 /* linha, título, descrição e ação passam a azul */
	background: rgba(0, 92, 174, .07);
}
.inscricao .box_inscricao:focus-visible {
	outline: 2px solid #005cae;
	outline-offset: 3px;
}

.inscricao .box_titulo {
	margin: 0 0 8px;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	font-size: var(--fonte-mesa);
	font-weight: bold;
	line-height: 1.2;
	color: inherit;
	text-align: left;
}
.inscricao .box_descricao {
	margin: 0 0 14px;
	font-size: 1rem;
	line-height: 1.35;
}
/* "Fazer inscrição" com seta, sempre no pé do box */
.inscricao .box_acao {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 1.0625rem;
}
.inscricao .box_acao::after {
	content: "arrow_forward";
	font-family: "Material Symbols Outlined";
	font-feature-settings: "liga";
	font-size: 1.25em;
	font-weight: normal;
	line-height: 1;
	transition: transform .15s;
}
.inscricao .box_inscricao:hover .box_acao::after {
	transform: translateX(4px);
}

/* Página de cada formulário */
.inscricao .link_voltar:link,
.inscricao .link_voltar:visited {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 8px;
	font-weight: 600;
	color: #005cae;
	text-decoration: none;
}
.inscricao .link_voltar:hover,
.inscricao .link_voltar:active {
	color: #002b4d;
	text-decoration: underline;
}
.inscricao .link_voltar::before {
	content: "arrow_back";
	font-family: "Material Symbols Outlined";
	font-feature-settings: "liga";
	font-size: 1.25em;
	font-weight: normal;
	line-height: 1;
}

/* O Google não informa a altura real do formulário: ajuste estes valores
   depois de testar (o celular costuma precisar de mais altura). */
.inscricao .moldura_formulario {
	margin-top: 24px;
	/* Caixa em volta do formulário: a cor de fundo é a que o formulário mostra
	   (já com a tinta abaixo); a borda usa o bege mais escuro do fundo da página.
	   O padding-top soma ao espaço do próprio Google para igualar o das laterais. */
	--fundo-caixa: #fbf5ef;
	--borda-caixa: #f3e6d5;
	--respiro-topo: 23px;
	background: var(--fundo-caixa);
	border: 2px solid var(--borda-caixa);
	padding-top: var(--respiro-topo);
}
@media only screen and (max-width: 480px) {
.inscricao .moldura_formulario {
	--respiro-topo: 0px;              /* no celular o espaço do Google já é pequeno em todos os lados */
}
}

/* Tinta: o Google não deixa o fundo do formulário transparente. Esta camada por
   cima (pointer-events: none, não atrapalha o clique) tinge só os claros: o branco
   vira o tom abaixo e o texto escuro continua escuro. Para desligar, apague o
   bloco ::after. */
.inscricao .formulario_tinta {
	position: relative;
	isolation: isolate;
	/* Tom que o branco assume: um ponto entre branco (#fff) e o bege da página
	   (#f8ebdc). Mais perto do bege = mais "transparente". */
	--tom-formulario: #fcf5ee;
}
.inscricao .formulario_tinta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--tom-formulario);
	mix-blend-mode: multiply;
	pointer-events: none;
}
.inscricao .formulario_inscricao {
	display: block;
	width: 100%;
	height: 1700px;
	border: 0;
}
@media only screen and (max-width: 480px) {
.inscricao .formulario_inscricao {
	height: 2000px;
}
}
.inscricao .formulario_alternativo {
	margin-top: 16px;
	text-align: center;
}
@media (prefers-reduced-motion: reduce) {
	.inscricao .box_inscricao,
	.inscricao .box_acao::after { transition: none; }
}


/* Telas muito estreitas (320-360px): menu com 4 itens, menos respiro lateral */
@media only screen and (max-width: 360px) {
.menu_principal a,
.menu_principal .sem_link {
	padding-left: 4px;
	padding-right: 4px;
}
}


/* Inscrição de Trabalhos: botão que abre o formulário em outra aba (formulários com
   upload de arquivos não podem ser incorporados) */
.inscricao .chamada_formulario {
	margin: 28px 0 12px;
}
.inscricao .botao_formulario:link,
.inscricao .botao_formulario:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	color: inherit;                   /* cor padrão do texto até o hover, como os boxes */
	border: 1px solid currentColor;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.3;
	text-decoration: none;
	transition: color .15s, background-color .15s;
}
.inscricao .botao_formulario::after {
	content: "open_in_new";
	font-family: "Material Symbols Outlined";
	font-feature-settings: "liga";
	font-size: 1.25em;
	font-weight: normal;
	line-height: 1;
}
.inscricao .botao_formulario:hover,
.inscricao .botao_formulario:active,
.inscricao .botao_formulario:focus-visible {
	color: #005cae;
	background: rgba(0, 92, 174, .07);
}
.inscricao .botao_formulario:focus-visible {
	outline: 2px solid #005cae;
	outline-offset: 3px;
}
.inscricao .formulario_aviso {
	font-size: .9375rem;
}
@media (prefers-reduced-motion: reduce) {
	.inscricao .botao_formulario { transition: none; }
}


/* Box que abre um link externo (formulário do Google em outra aba): ícone de "abrir" */
.inscricao .box_externo .box_acao::after {
	content: "open_in_new";
}
.inscricao .box_externo:hover .box_acao::after {
	transform: none;
}
.inscricao .boxes_aviso {
	margin: 20px 0 0;
	font-size: .9375rem;
	text-align: center;
}

/* ==========================================================
   PÁGINA +CPDA50 (extras.php)
   Usa a base de .programacao (classe extra "extras" no div.coluna).
   ========================================================== */
.extras .extra {
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px dotted #05172e;
}
.extras .titulo_secao + .extra {
	margin-top: 24px;
	padding-top: 0;
	border-top: 0;
}
.extras .extra .mesa {
	margin-bottom: 14px;
}

/* Data, horário, local e organização: ícone + texto, no padrão dos nomes da programação */
.extras ul.extra_meta {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}
.extras ul.extra_meta li {
	position: relative;
	list-style: none;   /* remove o GIF de li do estilos.css */
	padding: 3px 0 3px 30px;
	line-height: 1.4;
}
.extras ul.extra_meta li::before {
	font-family: "Material Symbols Outlined";
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	position: absolute;
	left: 0;
	top: 4px;
	font-size: 20px;
	color: #005cae;
}
.extras li.m_data::before  { content: "calendar_month"; content: "calendar_month" / ""; }
.extras li.m_hora::before  { content: "schedule";       content: "schedule" / ""; }
.extras li.m_local::before { content: "location_on";    content: "location_on" / ""; }
.extras li.m_org::before   { content: "groups";         content: "groups" / ""; }
.extras .rotulo {
	font-weight: 600;
}

/* Lista de acervos */
.extras ul.extra_lista {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}
.extras ul.extra_lista li {
	list-style: none;
	margin: 0 0 10px;
	padding: 0 0 0 16px;
	border-left: 2px solid #005cae;
	line-height: 1.45;
}