/**
 * Bloco Programa - eventos com inscricao por sessao.
 *
 * Implementa a frame "AA - Open Week 2026 - desktop 1512" (Figma
 * GXi5BdKuIHzV920Q3BAYi9, no 4146:1118). Medidas e cores retiradas do no,
 * nao estimadas.
 *
 * Tokens: apontam para as cores globais do Elementor quando existem, com o
 * hex do design system em fallback. Blue/500, Blue/700, Blue/800, Blue/900,
 * Grey/500, Grey/600, Grey/700 e Grey/800 ainda nao sao tokens globais do
 * Kit #6 - ficam em hex ate essa decisao ser tomada com o Tomas.
 */

.ow {
	--ow-azul-50: var(--e-global-color-d42b484c, #EAF5FC);
	--ow-azul-100: var(--e-global-color-4ff7769, #CDE8F8);
	--ow-azul-400: var(--e-global-color-7cd227d, #009CDD);
	--ow-azul-700: #28539A;
	--ow-azul-800: #143F78;
	--ow-azul-900: #002C56;
	--ow-azul-950: var(--e-global-color-accent, #001730);
	--ow-cinza-50: #F4F6F8;
	--ow-cinza-100: #EAEFF4;
	--ow-cinza-200: #D6DEE5;
	--ow-cinza-400: #8B9BA7;
	--ow-cinza-500: #677682;
	--ow-cinza-600: #4E5B66;
	--ow-cinza-700: #37434D;
	--ow-cinza-800: #263038;
	--ow-cinza-950: #0E1419;

	/* Estado de erro dos formularios: campos obrigatorios por preencher. */
	--ow-erro: #D33D44;

	/* Altura da barra fixa do site: um valor so, usado no sticky e no
	   scroll-margin-top. E o que impede o ancoramento de desalinhar. */
	--ow-sticky: 100px;

	display: flex;
	flex-direction: column;
	gap: 48px;
	max-width: 1272px;
	margin-inline: auto;
	padding: 80px 0 0;
	background: #fff;
	color: var(--ow-cinza-700);
}

.ow *,
.ow *::before,
.ow *::after {
	box-sizing: border-box;
}

/* Critico: as regras de display por classe (flex, grid) ganham a folha de
   estilos do browser e anulariam o atributo hidden. Sem isto, todos os
   paineis aparecem ao mesmo tempo. */
.ow [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------- intro */

/* --------------------------------------------- defesa contra o tema
 *
 * O Hello Biz pinta QUALQUER <button> do site de #C36, com borda e canto
 * de 3px, e a folha do tema carrega depois das folhas dos plugins. Com um
 * selector de uma classe (.ow__tab, 0-1-0) a nossa regra empata com
 * [type="button"] e perde por ordem de carregamento - por isso as tabs, os
 * dias e os titulos dos cartoes apareciam cor-de-rosa.
 *
 * Duas medidas, nenhuma com !important:
 * 1. O CSS do bloco passa a depender do handle 'hello-biz' (ver
 *    msg-eventos.php), por isso carrega DEPOIS do tema e ganha os empates.
 * 2. Todos os selectores do componente passam a ter o prefixo
 *    :is(.ow, .ows, .owh) - 0-2-0 - com margem sobre o tema.
 *
 * Este bloco repoe o estado neutro; as regras do componente, mais abaixo,
 * pintam por cima.
 */

:is(.ow, .ows, .owh) button,
:is(.ow, .ows, .owh) [type="button"],
:is(.ow, .ows, .owh) [type="submit"] {
	width: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	/* Como no browser: o texto de um botao e centrado. O titulo do cartao,
	   que e um botao a fazer de titulo, repoe o alinhamento a esquerda com o
	   seu proprio all: unset. */
	text-align: center;
	text-decoration: none;
}

/* So o fundo: a cor fica a cargo das regras do componente, senao o estado
   hover perdia a cor propria de cada elemento. */
:is(.ow, .ows, .owh) button:hover,
:is(.ow, .ows, .owh) button:focus,
:is(.ow, .ows, .owh) [type="button"]:hover,
:is(.ow, .ows, .owh) [type="button"]:focus,
:is(.ow, .ows, .owh) [type="submit"]:hover,
:is(.ow, .ows, .owh) [type="submit"]:focus {
	background-color: transparent;
	text-decoration: none;
}

:is(.ow, .ows, .owh) input,
:is(.ow, .ows, .owh) select,
:is(.ow, .ows, .owh) textarea {
	border-radius: 0;
}

/* O tema tambem pinta os <a> de #C36. Os links do componente que tem cor
   propria continuam a te-la - sao mais especificos do que esta regra. */
:is(.ow, .ows, .owh) a {
	color: inherit;
}

:is(.ow, .ows, .owh) .ow__intro {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

:is(.ow, .ows, .owh) .ow__titulo {
	margin: 0;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ow-azul-950);
}

:is(.ow, .ows, .owh) .ow__subtitulo {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ow-cinza-600);
}

/* -------------------------------------------------------------- tabs */

:is(.ow, .ows, .owh) .ow__tabs {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--ow-cinza-200);
}

:is(.ow, .ows, .owh) .ow__tab {
	flex: 1 0 0;
	min-width: 0;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	padding: 14px 8px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ow-azul-900);
	cursor: pointer;
}

:is(.ow, .ows, .owh) .ow__tab.is-activa {
	background: var(--ow-azul-400);
	color: #fff;
}

/* ------------------------------------------------------------- corpo */

:is(.ow, .ows, .owh) .ow__corpo {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

:is(.ow, .ows, .owh) .ow__coluna-lista {
	flex: 0 0 460px;
	width: 460px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

:is(.ow, .ows, .owh) .ow__contador {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	line-height: 1.4;
}

:is(.ow, .ows, .owh) .ow__contador-total {
	font-weight: 700;
	color: var(--ow-cinza-600);
}

:is(.ow, .ows, .owh) .ow__lista-corpo {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: #fff;
}

/* ------------------------------------------------------ calha de dias */

:is(.ow, .ows, .owh) .ow__calha {
	flex: 0 0 40px;
	width: 40px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

:is(.ow, .ows, .owh) .ow__dia {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 0;
	text-decoration: none;
	line-height: 1.4;
}

:is(.ow, .ows, .owh) .ow__dia-semana {
	font-size: 13px;
	font-weight: 400;
	color: var(--ow-azul-400);
}

:is(.ow, .ows, .owh) .ow__dia-num {
	font-size: 16px;
	font-weight: 700;
	color: var(--ow-azul-700);
}

:is(.ow, .ows, .owh) .ow__dia.is-activo {
	background: var(--ow-azul-950);
}

:is(.ow, .ows, .owh) .ow__dia.is-activo .ow__dia-semana,
:is(.ow, .ows, .owh) .ow__dia.is-activo .ow__dia-num {
	color: var(--ow-azul-50);
}

:is(.ow, .ows, .owh) .ow__dia:focus-visible {
	outline: 3px solid var(--ow-azul-400);
	outline-offset: 2px;
}

/* ------------------------------------------------- viewport da lista */

:is(.ow, .ows, .owh) .ow__viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;

	/* Caixa fixa, como na frame. E ela que cria o scroll interno da lista e
	   da sentido a calha de dias: com altura automatica, uma lista curta
	   nunca transborda e os botoes dos dias nao tem para onde deslocar. */
	height: 880px;
	overflow-y: auto;
	overflow-x: hidden;

	/* Sem scroll-behavior no CSS de proposito: com ele, qualquer atribuicao
	   de scrollTop passa a ser animada, e o browser nao corre animacoes em
	   separadores sem foco - o scroll fica em silencio a zero. Quem decide
	   se e suave e o JavaScript, chamada a chamada. */

	/* Impede que o scroll da lista, ao chegar ao fim, continue na pagina. */
	overscroll-behavior: contain;

	/* Barra de scroll a ESQUERDA, entre a calha de dias e a lista.
	 *
	 * Nao ha propriedade para isto: a barra assenta sempre no bordo final
	 * do eixo inline. Invertendo a direccao da caixa, o bordo final passa a
	 * ser o esquerdo. Os filhos voltam a ltr, senao o texto e a pontuacao
	 * invertiam com eles.
	 *
	 * Encostada a calha, a barra le-se como a regua da lista - e nao como
	 * uma barra da pagina que por acaso ali esta. */
	direction: rtl;
}

:is(.ow, .ows, .owh) .ow__viewport > * {
	direction: ltr;
}

:is(.ow, .ows, .owh) .ow__eventos {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-left: 12px;
}

:is(.ow, .ows, .owh) .ow__dia-titulo {
	position: sticky;
	top: 0;
	z-index: 2;
	margin: 0;
	padding: 8px 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ow-azul-950);
	background: #fff;
	border-bottom: 1px solid var(--ow-azul-950);
	scroll-margin-top: 0;
}

/* -------------------------------------------------------------- card */

:is(.ow, .ows, .owh) .ow__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 16px;
	background: transparent;

	/* O card e o destino do redirect das sessoes e o browser salta para la
	   antes de o JavaScript correr. Sem descontar a barra fixa, aterrava
	   debaixo dela. */
	scroll-margin-top: calc(var(--ow-sticky) + 24px);
}

:is(.ow, .ows, .owh) .ow__card.is-activa {
	background: var(--ow-azul-50);
}

:is(.ow, .ows, .owh) .ow__card.is-terminada {
	opacity: 0.7;
}

:is(.ow, .ows, .owh) .ow__card-gatilho {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

:is(.ow, .ows, .owh) .ow__card-titulo {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

/* O botao e o controlo acessivel; o ::after cobre o card inteiro, para a
   area de toque ser o card sem existirem dois controlos. */
:is(.ow, .ows, .owh) .ow__card-botao {
	all: unset;
	display: block;
	cursor: pointer;
	color: var(--ow-azul-950);
}

:is(.ow, .ows, .owh) .ow__card-botao::after {
	content: "";
	position: absolute;
	inset: 0;
}

:is(.ow, .ows, .owh) .ow__card:has(.ow__card-botao:focus-visible) {
	outline: 3px solid var(--ow-azul-400);
	outline-offset: -3px;
}

:is(.ow, .ows, .owh) .ow__card-chevron {
	flex: 0 0 20px;
	display: block;
	width: 20px;
	height: 20px;
	transition: transform 0.25s ease-in-out;
}

:is(.ow, .ows, .owh) .ow__card.is-activa .ow__card-chevron {
	transform: rotate(180deg);
}

:is(.ow, .ows, .owh) .ow__card-chevron img {
	display: block;
	width: 20px;
	height: 20px;
}

:is(.ow, .ows, .owh) .ow__card-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

:is(.ow, .ows, .owh) .ow__etiqueta {
	display: inline-block;
	padding: 4px 10px;
	background: var(--ow-azul-50);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ow-azul-800);
	white-space: nowrap;
}

:is(.ow, .ows, .owh) .ow__card.is-activa .ow__etiqueta {
	background: #fff;
}

:is(.ow, .ows, .owh) .ow__card-hora {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ow-azul-400);
}

:is(.ow, .ows, .owh) .ow__card-estado {
	font-size: 14px;
	font-weight: 700;
	color: var(--ow-cinza-500);
}

:is(.ow, .ows, .owh) .ow__card-oradores {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ow-cinza-500);
}

:is(.ow, .ows, .owh) .ow__vazio {
	margin: 0;
	padding: 32px 16px;
	background: var(--ow-azul-50);
	text-align: center;
}

/* ------------------------------------------------------------ painel */

:is(.ow, .ows, .owh) .ow__coluna-painel {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 64px;
	padding-left: 64px;
	border-left: 1px solid var(--ow-cinza-200);
}

:is(.ow, .ows, .owh) .ow__painel {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

:is(.ow, .ows, .owh) .ow__painel-contexto {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

:is(.ow, .ows, .owh) .ow__painel-titulo {
	margin: 0;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ow-azul-950);
}

:is(.ow, .ows, .owh) .ow__painel-curso {
	margin: 0;
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
	color: var(--ow-azul-400);
}

:is(.ow, .ows, .owh) .ow__painel-curso a {
	color: inherit;
	text-decoration: underline;
}

:is(.ow, .ows, .owh) .ow__painel-bloco {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

:is(.ow, .ows, .owh) .ow__barra-sessao {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

:is(.ow, .ows, .owh) .ow__tag {
	display: inline-block;
	padding: 4px 8px;
	background: var(--ow-azul-100);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.72px;
	color: var(--ow-azul-950);
	white-space: nowrap;
}

:is(.ow, .ows, .owh) .ow__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

:is(.ow, .ows, .owh) .ow__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ow-azul-950);
	white-space: nowrap;
}

:is(.ow, .ows, .owh) .ow__icone {
	display: block;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}

:is(.ow, .ows, .owh) .ow__painel-texto {
	font-size: 16px;
	line-height: 1.4;
	color: var(--ow-cinza-700);
}

:is(.ow, .ows, .owh) .ow__painel-texto p {
	margin: 0 0 16px;
}

:is(.ow, .ows, .owh) .ow__painel-texto p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------- speakers */

:is(.ow, .ows, .owh) .ow__speakers {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

:is(.ow, .ows, .owh) .ow__speakers-titulo {
	margin: 0;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ow-azul-400);
}

:is(.ow, .ows, .owh) .ow__grelha-oradores {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

:is(.ow, .ows, .owh) .ow__orador {
	flex: 0 0 370px;
	max-width: 370px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

:is(.ow, .ows, .owh) .ow__orador-foto {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	/* Placeholder da biblioteca de fotografias do Figma: #001730 a 16%.
	   Neutro de marca de proposito - le-se tanto sobre o azul da Academy
	   como sobre o roxo da ESESFM. O azul-100 anterior ficava fora de
	   marca na pagina da ESESFM. */
	background: rgba(0, 23, 48, 0.16);
}

:is(.ow, .ows, .owh) .ow__orador-foto img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 0;
}

:is(.ow, .ows, .owh) .ow__orador-texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

:is(.ow, .ows, .owh) .ow__orador-nome {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ow-azul-900);
}

:is(.ow, .ows, .owh) .ow__orador-cargo {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ow-cinza-600);
}

/* ------------------------------------------------------- formulario */

:is(.ow, .ows, .owh) .ow__form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

:is(.ow, .ows, .owh) .ow__form-titulo {
	margin: 0;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ow-azul-400);
}

:is(.ow, .ows, .owh) .ow__campos {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

:is(.ow, .ows, .owh) .ow__campo {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 526px;
}

:is(.ow, .ows, .owh) .ow__label {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ow-cinza-800);
}

:is(.ow, .ows, .owh) .ow__input {
	height: 44px;
	padding: 0 20px;
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ow-cinza-950);
	background: var(--ow-cinza-100);
	border: 2px solid var(--ow-cinza-50);
	border-radius: 0;
}

:is(.ow, .ows, .owh) .ow__input::placeholder {
	color: var(--ow-cinza-400);
}

:is(.ow, .ows, .owh) .ow__input:focus-visible {
	outline: 3px solid var(--ow-azul-400);
	outline-offset: 2px;
}

:is(.ow, .ows, .owh) .ow__consentimento {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	line-height: 24px;
	color: var(--ow-cinza-950);
}

/* -------------------------------------------------------- check-button
 *
 * Componente do design system (Figma, pagina Components, no 1601:6579).
 * Primeira utilizacao no site: procurei Green/600 (#0A7A59) e padroes de
 * checkbox no tema e nos plugins msg-* e so encontrei checkboxes nativas
 * do backoffice. Fica aqui com nome proprio, para a proxima utilizacao
 * poder levantar o bloco em vez de o redesenhar.
 *
 * Por defeito: quadrado de 20px, preenchimento Grey/200, contorno Blue/950.
 * Marcado: preenchimento Green/600 com o visto a Blue/50.
 * Os dois SVG sao exportacoes do proprio componente, nao desenhos nossos.
 */

.msg-check {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	line-height: 24px;
	color: #0E1419;
}

.msg-check input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background-color: #D6DEE5;
	background-image: url(icones/check-vazio.svg);
	background-size: 20px 20px;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: background-color var(--ow-mov, 280ms) var(--ow-curva, ease);
}

.msg-check input[type="checkbox"]:checked {
	background-color: #0A7A59;
	background-image: url(icones/tick.svg);
}

.msg-check input[type="checkbox"]:focus-visible {
	outline: 3px solid #009CDD;
	outline-offset: 2px;
}

.msg-check label {
	cursor: pointer;
}

:is(.ow, .ows, .owh) .ow__accao {
	margin: 0;
}

:is(.ow, .ows, .owh) .ow__submeter {
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	width: 240px;
	height: 48px;
	padding: 0 16px;
	border: 0;
	border-radius: 0;
	background: var(--ow-azul-950);
	color: #fff;
	cursor: pointer;
}

:is(.ow, .ows, .owh) .ow__submeter:hover,
:is(.ow, .ows, .owh) .ow__submeter:focus-visible {
	background: var(--ow-azul-900);
}

/* -------------------------------------------------------------- mobile
   Empilhamento base. A frame "AA - Open Week 2026 - mobile 390" tem
   desenho proprio (painel a expandir dentro do card) e precisa de um passo
   dedicado - isto e o comportamento minimo aceitavel ate la. */

/* =============================================================== mobile
 *
 * Implementa a frame "AA - Open Week 2026 - mobile 390" (no 4151:2478).
 * Nao e o desktop empilhado: em mobile a lista corre com a pagina (sem
 * caixa de scroll propria), a calha de dias deita-se na horizontal e o
 * painel da sessao passa a abrir DENTRO do cartao - o JS relocaliza o
 * mesmo bloco, como a propria frame anota ("relocalizado por JS"). Nada
 * e duplicado: ha um painel e um formulario, mudam de sitio.
 *
 * Tres camadas fixas empilhadas - barra do site, tabs, calha de dias -
 * e os cabecalhos de dia a colar por baixo delas. As alturas vivem em
 * variaveis para os offsets nao se desencontrarem: mudar a altura das
 * tabs num sitio corrige o encosto de tudo o resto.
 */

@media (max-width: 1024px) {

	.ow {
		--ow-tabs: 42px;
		--ow-calha: 40px;
		--ow-chrome: calc(var(--ow-sticky) + var(--ow-tabs) + var(--ow-calha));
		gap: 32px;
		padding-top: 48px;
	}

/* Sem fita de areas (uma so area) as tabs nao sao impressas. O desconto
   de 42px deixava a calha de dias a flutuar por baixo da barra de
   navegacao e - pior - punha os cabecalhos de dia 42px abaixo da linha de
   leitura, pelo que o dia activo nunca mudava com o scroll. */
.ow.ow--sem-tabs {
	--ow-tabs: 0px;
}

	:is(.ow, .ows, .owh) .ow__intro {
		gap: 16px;
	}

	:is(.ow, .ows, .owh) .ow__titulo {
		font-size: 28px;
	}

	/* ------------------------------------------------------ tabs */

	:is(.ow, .ows, .owh) .ow__tabs {
		position: sticky;
		top: var(--ow-sticky);
		z-index: 4;
		height: var(--ow-tabs);
		gap: 4px;
		overflow-x: auto;
		overflow-y: hidden;
		background: #fff;
		/* Sem barra de scroll visivel, mas com scroll a serio: em ecras
		   estreitos as cinco areas nao cabem e arrastam-se com o dedo. */
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	:is(.ow, .ows, .owh) .ow__tabs::-webkit-scrollbar {
		display: none;
	}

	:is(.ow, .ows, .owh) .ow__tab {
		flex: 0 0 auto;
		min-width: 0;
		height: var(--ow-tabs);
		padding: 0 14px;
		font-size: 14px;
	}

	/* ------------------------------------------- corpo, calha, lista */

	:is(.ow, .ows, .owh) .ow__corpo {
		flex-direction: column;
		gap: 0;
	}

	:is(.ow, .ows, .owh) .ow__coluna-lista {
		flex: 1 1 auto;
		width: 100%;
	}

	/* A calha deixa de ser uma coluna a esquerda e passa a ser uma fita
	   por cima da lista, com os cinco dias a dividir a largura. */
	:is(.ow, .ows, .owh) .ow__lista-corpo {
		flex-direction: column;
		gap: 16px;
	}

	:is(.ow, .ows, .owh) .ow__calha {
		position: sticky;
		top: calc(var(--ow-sticky) + var(--ow-tabs));
		z-index: 3;
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: var(--ow-calha);
		gap: 0;
		background: #fff;
	}

	:is(.ow, .ows, .owh) .ow__dia {
		flex: 1 1 0;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 4px;
		height: 28px;
		padding: 0;
	}

	:is(.ow, .ows, .owh) .ow__dia-semana,
	:is(.ow, .ows, .owh) .ow__dia-num {
		font-size: 13px;
		line-height: 18px;
	}

	/* Sem caixa de scroll: a lista corre com a pagina. E o que faz
	   sentido num ecra estreito - dois scrolls encaixados um no outro
	   sao uma armadilha para o dedo. */
	:is(.ow, .ows, .owh) .ow__viewport {
		height: auto;
		max-height: none;
		overflow: visible;
	}

	:is(.ow, .ows, .owh) .ow__eventos {
		gap: 24px;
		padding-left: 0;
		padding-bottom: 0;
	}

	:is(.ow, .ows, .owh) .ow__dia-titulo {
		top: var(--ow-chrome);
		z-index: 2;
	}

	:is(.ow, .ows, .owh) .ow__card {
		scroll-margin-top: calc(var(--ow-chrome) + 8px);
	}

	:is(.ow, .ows, .owh) .ow__card-meta {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	/* --------------------------------------- painel dentro do cartao */

	/* Quando o JS o encaixa a seguir ao cartao, a coluna passa a ser um
	   filho da lista: perde a regua a esquerda e ganha uma em cima, para
	   se ler como continuacao do cartao e nao como bloco solto. */
	:is(.ow, .ows, .owh) .ow__coluna-painel {
		width: 100%;
		padding: 24px 0 0;
		border-left: 0;
		border-top: 1px solid var(--ow-cinza-200);
		gap: 32px;
	}

	:is(.ow, .ows, .owh) .ow__painel {
		gap: 24px;
	}

	/* O titulo ja esta no cartao logo acima. Repeti-lo era ruido e um
	   segundo heading com o mesmo texto - a frame esconde-o. */
	:is(.ow, .ows, .owh) .ow__painel-titulo {
		display: none;
	}

	:is(.ow, .ows, .owh) .ow__painel-curso {
		font-size: 16px;
		line-height: 1.4;
	}

	:is(.ow, .ows, .owh) .ow__barra-sessao {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	:is(.ow, .ows, .owh) .ow__meta {
		flex-wrap: wrap;
		column-gap: 12px;
		row-gap: 6px;
	}

	:is(.ow, .ows, .owh) .ow__speakers-titulo,
	:is(.ow, .ows, .owh) .ow__form-titulo {
		font-size: 20px;
	}

	:is(.ow, .ows, .owh) .ow__grelha-oradores {
		gap: 24px;
	}

	:is(.ow, .ows, .owh) .ow__orador {
		flex: 1 1 100%;
		max-width: none;
	}

	/* Alvos de toque: 48px de altura nos campos e o botao a toda a
	   largura. Os 44px do desktop sao confortaveis com rato e apertados
	   com o polegar. */
	:is(.ow, .ows, .owh) .ow__input {
		height: 48px;
	}

	:is(.ow, .ows, .owh) .ow__submeter {
		width: 100%;
	}

	:is(.ow, .ows, .owh) .ow__accao {
		width: 100%;
	}
}

/* Ecras muito estreitos: os cinco dias deixam de caber a dividir a
   largura sem o texto encavalitar. Passam a arrastar-se na horizontal,
   com largura minima por dia. */
@media (max-width: 360px) {

	:is(.ow, .ows, .owh) .ow__calha {
		overflow-x: auto;
		scrollbar-width: none;
	}

	:is(.ow, .ows, .owh) .ow__calha::-webkit-scrollbar {
		display: none;
	}

	:is(.ow, .ows, .owh) .ow__dia {
		flex: 0 0 auto;
		min-width: 64px;
	}
}


/* =========================================================== movimento
 *
 * Uma so duracao e uma so curva para o componente inteiro: estados que
 * mudam ao mesmo tempo tem de acabar ao mesmo tempo, senao o conjunto
 * parece desalinhado mesmo estando cada peca correcta.
 */

.ow {
	--ow-mov: 280ms;
	--ow-curva: cubic-bezier(0.4, 0, 0.2, 1);
}

:is(.ow, .ows, .owh) .ow__tab,
:is(.ow, .ows, .owh) .ow__dia,
:is(.ow, .ows, .owh) .ow__card,
:is(.ow, .ows, .owh) .ow__etiqueta,
:is(.ow, .ows, .owh) .ow__cta,
:is(.ow, .ows, .owh) .ow__submeter,
:is(.ow, .ows, .owh) .ow__input {
	transition:
		background-color var(--ow-mov) var(--ow-curva),
		border-color var(--ow-mov) var(--ow-curva),
		color var(--ow-mov) var(--ow-curva),
		box-shadow var(--ow-mov) var(--ow-curva),
		opacity var(--ow-mov) var(--ow-curva);
}

:is(.ow, .ows, .owh) .ow__dia-semana,
:is(.ow, .ows, .owh) .ow__dia-num {
	transition: color var(--ow-mov) var(--ow-curva);
}

:is(.ow, .ows, .owh) .ow__card-chevron {
	transition: transform var(--ow-mov) var(--ow-curva);
}

/* O painel activo entra com um fade curto. Trocar o atributo hidden faz o
   elemento passar de display:none a visivel, e uma animacao CSS reinicia
   sempre nessa transicao - e o que da o movimento sem precisar de manter
   dois paineis no DOM ao mesmo tempo. */
@keyframes ow-entrada {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

:is(.ow, .ows, .owh) .ow__painel {
	animation: ow-entrada var(--ow-mov) var(--ow-curva) both;
}

:is(.ow, .ows, .owh) .ow__vazio {
	animation: ow-entrada var(--ow-mov) var(--ow-curva) both;
}

/* Quem pediu menos movimento fica sem movimento nenhum - incluindo o
   scroll, que e a animacao que mais incomoda quem tem sensibilidade
   vestibular. */
@media (prefers-reduced-motion: reduce) {

	.ow {
		--ow-mov: 1ms;
	}

	:is(.ow, .ows, .owh) .ow__painel,
	:is(.ow, .ows, .owh) .ow__vazio {
		animation: none;
	}
}
/* ============================================ mobile - medidas da frame
 *
 * Valores lidos do no 4313:16523 da frame "AA - Open Week 2026 - mobile
 * 390", nao estimados: tipografia (Mobile/Body/caption-bold 13/1.4,
 * Mobile/Body/small-bold 15/1.4, Mobile/Heading/Card 18/1.3), paddings e
 * cores por token. Este bloco vem depois do bloco mobile geral porque
 * afina medidas - a estrutura ja esta la.
 */

@media (max-width: 1024px) {

	/* --- tabs: 13px bold, 12/14 de padding, filete por baixo da fita - */

	:is(.ow, .ows, .owh) .ow__tabs {
		align-items: center;
		height: auto;
		border-bottom: 1px solid var(--ow-cinza-200);
	}

	:is(.ow, .ows, .owh) .ow__tab {
		height: auto;
		padding: 12px 14px;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.4;
		white-space: nowrap;
	}

	/* --- calha de dias: 6px em cima e em baixo, dia com 5px ---------- */

	:is(.ow, .ows, .owh) .ow__calha {
		height: auto;
		padding: 6px 0;
	}

	:is(.ow, .ows, .owh) .ow__dia {
		height: auto;
		padding: 5px 0;
	}

	:is(.ow, .ows, .owh) .ow__dia-semana,
	:is(.ow, .ows, .owh) .ow__dia-num {
		font-size: 13px;
		font-weight: 700;
		line-height: 1.4;
	}

	/* --- cabecalho de dia: 15px bold + filete Blue/950 -------------- */

	:is(.ow, .ows, .owh) .ow__dia-titulo {
		gap: 8px;
		padding: 8px 0;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.4;
		color: var(--ow-azul-950);
		background: #fff;
		border-bottom: 1px solid var(--ow-azul-950);
	}

	/* --- cartao: 16/24 de padding, 211px de altura ------------------ */

	:is(.ow, .ows, .owh) .ow__card {
		gap: 16px;
		/* min-height e nao height: os titulos reais do CMS sao bem mais
		   longos do que os 45 caracteres que a componente declara. Com
		   altura fixa o cartao cortava o conteudo; assim mantem a medida
		   da frame no caso normal e cresce quando tem de crescer. */
		min-height: 211px;
		padding: 24px 16px;
	}

	:is(.ow, .ows, .owh) .ow__card-titulo,
	:is(.ow, .ows, .owh) .ow__card-botao {
		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--ow-azul-950);
	}

	/* Tres linhas, como na frame. O texto continua inteiro no HTML - o
	   corte e so visual, por isso nao custa nada ao SEO nem ao leitor de
	   ecra. */
	:is(.ow, .ows, .owh) .ow__card-botao {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	:is(.ow, .ows, .owh) .ow__card-meta {
		gap: 10px;
		align-items: center;
	}

	:is(.ow, .ows, .owh) .ow__etiqueta {
		padding: 4px 10px;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.4;
		color: var(--ow-azul-800);
		background: var(--ow-azul-50);
	}

	:is(.ow, .ows, .owh) .ow__card-hora {
		font-size: 13px;
		font-weight: 700;
		line-height: 1.4;
		color: var(--ow-azul-400);
	}

	:is(.ow, .ows, .owh) .ow__card-oradores {
		font-size: 13px;
		font-weight: 400;
		line-height: 1.4;
		color: var(--ow-cinza-500);
	}

	/* O painel alinha pela caixa de texto do cartao: 16px, o mesmo
	   avanco. Sem isto lia-se como um bloco solto por baixo. */
	:is(.ow, .ows, .owh) .ow__coluna-painel {
		padding: 24px 16px 0;
	}
}

/* ================================================= movimento da frame
 *
 * Tempos e curvas lidos das interaccoes do prototipo, nao escolhidos:
 *   cartao abre/fecha .... SMART_ANIMATE  EASE_IN_AND_OUT  300ms
 *   hover de botao ....... SMART_ANIMATE  EASE_OUT         300ms
 *   botao de dia ......... SCROLL_ANIMATE EASE_IN_AND_OUT  550ms (no JS)
 */

.ow,
.owh,
.ows,
.ow-sobre,
.ow-faq,
.ow-cta {
	--ow-mov: 300ms;
	--ow-curva: cubic-bezier(0.42, 0, 0.58, 1);
	--ow-curva-saida: cubic-bezier(0, 0, 0.58, 1);
}

/* O hover entra com ease out - e o unico estado que a frame anima com
   outra curva, e faz sentido: entra depressa e assenta. */
:is(.ow, .ows, .owh) .ow__tab:hover,
:is(.ow, .ows, .owh) .ow__dia:hover,
:is(.ow, .ows, .owh) .ow__submeter:hover,
:is(.ow, .ows, .owh) .owh__cta:hover,
.ow-cta.e-con .elementor-button:hover {
	transition-timing-function: var(--ow-curva-saida, ease-out);
}

@media (prefers-reduced-motion: reduce) {

	.ow,
	.owh,
	.ows,
	.ow-sobre,
	.ow-faq,
	.ow-cta {
		--ow-mov: 1ms;
	}
}

/* Uma animacao de cada vez.
 *
 * Em mobile e a coluna que cresce, com ease out. Se o painel entrasse ao
 * mesmo tempo com o seu fade + 8px, eram duas animacoes sobrepostas no
 * mesmo sitio - le-se como tremor, nao como suavidade, e era parte do
 * efeito travado. Em desktop o fade fica: la nao ha altura a crescer. */
@media (max-width: 1024px) {

	:is(.ow, .ows, .owh) .ow__painel {
		animation: none;
	}
}

/* A correccao de scroll ao trocar de sessao e nossa, feita no mesmo tick
 * da mudanca do DOM. O ancoramento automatico do Chrome faria a dele por
 * cima, e duas correccoes somadas passam do sitio. Desligado aqui - so
 * dentro da lista, o resto da pagina mantem o comportamento normal. */
@media (max-width: 1024px) {

	:is(.ow, .ows, .owh) .ow__eventos {
		overflow-anchor: none;
	}
}

/* ============================================================== marca
 *
 * A pagina e uma so; o que muda entre a Autonoma Academy e a ESESFM e a
 * cor de acento e a banda do hero. Em vez de um segundo template, um
 * segundo CSS e um segundo JS - que se desencontrariam a primeira
 * correccao - redefinem-se DOIS tokens quando o evento-mae tem a marca
 * ESESFM.
 *
 * A classe vive no <body> e nao no wrapper do shortcode: as seccoes
 * editoriais (Sobre, FAQ, CTA) sao containers do Elementor partilhados
 * pelas duas marcas, e um shortcode nao lhes chega.
 *
 * Purple/400 e Purple/800 sao os tokens que o Duarte usou nas variantes
 * ESESFM do Figma - o acento e a banda, nada mais.
 */

body.evento-esesfm :is(.ow, .owh, .ows, .ow-sobre, .ow-faq, .ow-cta) {
	--ow-azul-400: #A773C5;
	--ow-azul-900: #3C1350;
	--ow-kv-mobile: image-set(
		url("https://academy.autonoma.pt/wp-content/uploads/2026/09/openweek-2026-esesfm-hero-mobile.webp?v=1") type("image/webp"),
		url("https://academy.autonoma.pt/wp-content/uploads/2026/09/openweek-2026-esesfm-hero-mobile.jpg?v=1") type("image/jpeg")
	);
	--ow-kv-fuga: linear-gradient(
		to bottom,
		#3C1350 0%,
		#3C1251 10.58%, #411756 19.52%, #4C2462 28.46%, #572D6C 37.40%,
		#623A78 46.35%, #6D4583 55.29%, #78508E 64.23%, #845C9A 73.17%,
		#8F67A5 82.12%, #9971AF 91.06%, #A57DBB 100%
	);
}



/* =============================================== folha (bottom sheet)
 *
 * Mobile: o detalhe da sessao entra por baixo, sobre um veu escuro, em
 * vez de expandir dentro da lista. A lista fica intacta por tras - nao
 * ha alturas a animar nem conteudo a saltar.
 *
 * Em desktop nao existe: o painel vive na coluna da direita.
 */

:is(.ow, .ows, .owh) .ow__veu,
:is(.ow, .ows, .owh) .ow__folha {
	display: none;
}

@media (max-width: 1024px) {

	:is(.ow, .ows, .owh) .ow__veu {
		display: block;
		position: fixed;
		inset: 0;
		/* A barra do site e fixa com z-index 999: o veu tem de ficar por
		   cima, senao o cabecalho fica aceso por cima de um ecra escurecido. */
		z-index: 1000;
		background: rgba(0, 23, 48, 0.64);
		opacity: 0;
		pointer-events: none;
		transition: opacity 320ms cubic-bezier(0, 0, 0.58, 1);
	}

	:is(.ow, .ows, .owh) .ow__veu.is-aberta {
		opacity: 1;
		pointer-events: auto;
	}

	:is(.ow, .ows, .owh) .ow__folha {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1001;
		/* Nunca o ecra todo: a lista continua a ver-se em cima, e e isso
		   que diz ao utilizador que a folha esta por cima e nao substituiu
		   a pagina. */
		max-height: 80vh;
		max-height: 80svh;
		background: #fff;
		box-shadow: 0 -8px 32px rgba(0, 23, 48, 0.18);
		/* translateY e nao top/height: so transform e opacity e que o
		   browser compoe sem recalcular layout - e a diferenca entre
		   deslizar e engasgar. */
		transform: translateY(100%);
		visibility: hidden;
		transition:
			transform 320ms cubic-bezier(0, 0, 0.58, 1),
			visibility 0s linear 320ms;
	}

	:is(.ow, .ows, .owh) .ow__folha.is-aberta {
		transform: none;
		visibility: visible;
		transition:
			transform 320ms cubic-bezier(0, 0, 0.58, 1),
			visibility 0s;
	}

	:is(.ow, .ows, .owh) .ow__folha:focus {
		outline: none;
	}

	:is(.ow, .ows, .owh) .ow__folha-cabeca {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16px;
		flex: 0 0 auto;
		padding: 16px;
		border-bottom: 1px solid var(--ow-cinza-200);
	}

	:is(.ow, .ows, .owh) .ow__folha-titulo {
		margin: 0;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.3;
		color: var(--ow-azul-950);
	}

	:is(.ow, .ows, .owh) .ow__folha-fechar {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		/* 44px: alvo de toque minimo, mesmo com um icone de 20px. */
		width: 44px;
		height: 44px;
		margin: -12px -12px -12px 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--ow-azul-950);
		cursor: pointer;
	}

	:is(.ow, .ows, .owh) .ow__folha-corpo {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/* Sem isto o scroll da folha propaga-se para a pagina quando chega
		   ao fim, e a lista mexe-se por tras. */
		overscroll-behavior: contain;
		padding: 0 16px 24px;
	}

	/* Dentro da folha a coluna deixa de ser a continuacao de um cartao:
	   nao precisa da regua de topo nem da largura da lista. */
	:is(.ow, .ows, .owh) .ow__folha .ow__coluna-painel {
		width: 100%;
		padding: 24px 0 0;
		border: 0;
		gap: 32px;
	}

	body.ow-folha-aberta {
		overflow: hidden;
	}
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {

	:is(.ow, .ows, .owh) .ow__veu,
	:is(.ow, .ows, .owh) .ow__folha {
		transition: none;
	}
}

/* -------------------------------------- rodape e chevron da folha (mobile) */

@media (max-width: 1024px) {

	/* O chevron passa a apontar para cima: o icone diz DE ONDE vem o
	   conteudo. Em desktop aponta para a direita, onde o painel abre; em
	   mobile aponta para cima, de onde a folha sobe. Um "+" prometia
	   expandir no lugar - e isso deixou de ser verdade. */
	:is(.ow, .ows, .owh) .ow__card-chevron,
	:is(.ow, .ows, .owh) .ow__card.is-activa .ow__card-chevron {
		transform: rotate(-90deg);
	}

	:is(.ow, .ows, .owh) .ow__folha-rodape {
		flex: 0 0 auto;
		padding: 12px 16px;
		/* Barra de gestos do iOS: sem isto o CTA fica por baixo dela. */
		padding-bottom: max(12px, env(safe-area-inset-bottom));
		border-top: 1px solid var(--ow-cinza-200);
		background: #fff;
	}

	:is(.ow, .ows, .owh) .ow__folha-cta {
		font: inherit;
		font-size: 16px;
		font-weight: 400;
		line-height: 1.4;
		display: block;
		width: 100%;
		height: 48px;
		padding: 0 16px;
		border: 0;
		border-radius: 0;
		background: var(--ow-azul-950);
		color: #fff;
		text-align: center;
		cursor: pointer;
	}

	:is(.ow, .ows, .owh) .ow__folha-cta:hover,
	:is(.ow, .ows, .owh) .ow__folha-cta:focus-visible {
		background: var(--ow-azul-900);
	}

	/* O botao do formulario passa a viver no rodape: dois botoes com a
	   mesma etiqueta seriam dois alvos para a mesma accao. */
	:is(.ow, .ows, .owh) .ow__folha .ow__accao {
		display: none;
	}
}

@media (max-width: 1024px) {

	/* O cartao deixou de ter estado "aberto": o detalhe vive na folha, e
	   enquanto ela esta aberta o cartao esta tapado pelo veu. Um fundo
	   aceso por baixo de um modal nao comunica nada. */
	:is(.ow, .ows, .owh) .ow__card.is-activa {
		background: transparent;
	}
}


/* ======================================= embed do MailerLite (inscrição)
 *
 * O embed do MailerLite traz ~25KB de CSS proprio com cantos de 4px,
 * Open Sans e um azul de hover fora da palete. Nao foi copiado: fica o
 * markup (que a JS deles precisa) e o desenho e nosso, com os tokens.
 * Menos peso, e a folha de inscricao passa a envelhecer com o resto do
 * componente em vez de divergir dele.
 */

:is(.ow, .ows, .owh) .ow__form--embed .ml-form-embedContainer {
	width: 100%;
}

/* As medidas seguem o formulario nativo (.ow__campo, .ow__label,
   .ow__input): o embed substitui o markup, nao o desenho. Quem chega a
   folha de inscricao nao deve notar que mudou de tecnologia. */
:is(.ow, .ows, .owh) .ow__form--embed .ml-form-fieldRow {
	margin: 0 0 24px;
	max-width: 526px;
}

:is(.ow, .ows, .owh) .ow__form--embed .ml-form-fieldRow.ml-last-item {
	margin-bottom: 0;
}

:is(.ow, .ows, .owh) .ow__form--embed .ow-embed-label {
	display: block;
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	/* !important: o tema pinta os <label> de formulario e ganha aos
	   selectores de classe. Mesmo padrao do tick e do estado de erro. */
	color: var(--ow-cinza-800) !important;
}

:is(.ow, .ows, .owh) .ow__form--embed input[type="text"],
:is(.ow, .ows, .owh) .ow__form--embed input[type="email"],
:is(.ow, .ows, .owh) .ow__form--embed input[type="tel"] {
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	display: block;
	width: 100%;
	height: 44px;
	padding: 0 20px;
	border: 2px solid var(--ow-cinza-50);
	/* Sem cantos arredondados: norma da marca. O embed traz 4px. */
	border-radius: 0;
	background: var(--ow-cinza-100);
	color: var(--ow-cinza-950);
	box-sizing: border-box;
}

:is(.ow, .ows, .owh) .ow__form--embed input::placeholder {
	color: var(--ow-cinza-400);
}

:is(.ow, .ows, .owh) .ow__form--embed input:focus-visible {
	outline: 3px solid var(--ow-azul-400);
	outline-offset: 2px;
}

/* --- consentimento: quadrado, nunca redondo --- */

:is(.ow, .ows, .owh) .ow__form--embed .ml-form-checkboxRow {
	margin: 24px 0;
}

/* align-items: center como no .ow__consentimento nativo. */
:is(.ow, .ows, .owh) .ow__form--embed .ml-form-checkboxRow label.checkbox {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	cursor: pointer;
}

/* Componente check-button do Figma (pagina Components, 1601:6579):
   caixa de 20px sem cantos, contorno Blue/950 de 1px, fundo Grey/200 por
   preencher e Green/600 quando marcado, com o tick em Blue/50. O
   tick.svg ja traz o contorno e o simbolo - por isso ocupa a caixa
   inteira (background-origin: border-box) e assenta sobre o contorno em
   vez de o duplicar. */
:is(.ow, .ows, .owh) .ow__form--embed .ml-form-checkboxRow input[type="checkbox"] {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1px solid var(--ow-azul-950);
	border-radius: 0;
	background: var(--ow-cinza-200);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

:is(.ow, .ows, .owh) .ow__form--embed .ml-form-checkboxRow input[type="checkbox"]:checked {
	background-color: #0A7A59;
	/* Tick embutido em data URI: o simbolo exportado do componente, sem
	   o rectangulo de contorno (esse ja e a borda do input) e sem um
	   pedido extra ao servidor. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23EAF5FC' fill-rule='evenodd' clip-rule='evenodd' d='M17.2703 5.25877C17.5876 5.59212 17.5746 6.11959 17.2412 6.43692L7.6116 15.6036C7.44716 15.7601 7.22596 15.8428 6.99915 15.8325C6.77234 15.8221 6.55957 15.7197 6.41002 15.5489L2.70632 11.3181C2.40317 10.9718 2.43814 10.4454 2.78443 10.1422C3.13072 9.83906 3.6572 9.87404 3.96035 10.2203L7.09177 13.7974L16.0921 5.22975C16.4255 4.91242 16.9529 4.92541 17.2703 5.25877Z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px 11px;
}

:is(.ow, .ows, .owh) .ow__form--embed .ml-form-checkboxRow input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--ow-azul-400);
	outline-offset: 2px;
}

:is(.ow, .ows, .owh) .ow__form--embed .ml-form-checkboxRow .label-description p {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--ow-cinza-950);
}

:is(.ow, .ows, .owh) .ow__form--embed .ml-form-checkboxRow .label-description a {
	color: inherit;
	text-decoration: underline;
}

/* --- botao --- */

:is(.ow, .ows, .owh) .ow__form--embed .ml-form-embedSubmit button {
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	display: block;
	width: 240px;
	max-width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 0;
	border-radius: 0;
	background: var(--ow-azul-950);
	color: #fff;
	text-align: center;
	cursor: pointer;
}

:is(.ow, .ows, .owh) .ow__form--embed .ml-form-embedSubmit button:hover,
:is(.ow, .ows, .owh) .ow__form--embed .ml-form-embedSubmit button:focus-visible {
	background: var(--ow-azul-900);
}

:is(.ow, .ows, .owh) .ow__form--embed .ml-form-embedSubmit button.loading {
	display: none;
}

/* --- estado de erro que a JS do MailerLite aplica --- */

/* .form-control e nao so input: o selector de base usa input[type=...],
   que tem a mesma especificidade - e um empate deixa o resultado a
   depender da ordem no ficheiro, que e a pior forma de o garantir. */
:is(.ow, .ows, .owh) .ow__form--embed .ml-error input.form-control {
	/* !important por precaucao, pela mesma razao do tick: o tema pinta
	   campos de formulario com !important. Por confirmar num browser com
	   foco - o ambiente de teste tem o motor de estilos congelado. */
	border-color: var(--ow-erro) !important;
}

:is(.ow, .ows, .owh) .ow__form--embed .ml-error input[type="checkbox"] {
	border-color: var(--ow-erro);
}

:is(.ow, .ows, .owh) .ow__form--embed .ml-error .label-description p,
:is(.ow, .ows, .owh) .ow__form--embed .ml-error .ow-embed-label {
	color: var(--ow-erro);
}

/* --- sucesso --- */

:is(.ow, .ows, .owh) .ow__form--embed .ml-form-successContent h4 {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ow-azul-950);
}

:is(.ow, .ows, .owh) .ow__form--embed .ml-form-successContent p {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ow-cinza-700);
}

/* --- utilitarios que vinham no CSS do embed e ainda sao precisos --- */

:is(.ow, .ows, .owh) .ow__form--embed .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

:is(.ow, .ows, .owh) .ow__form--embed .ml-form-embedSubmitLoad {
	display: inline-block;
	width: 20px;
	height: 20px;
}

:is(.ow, .ows, .owh) .ow__form--embed .ml-form-embedSubmitLoad::after {
	content: " ";
	display: block;
	width: 11px;
	height: 11px;
	margin: 1px;
	border: 4px solid #fff;
	border-color: #fff #fff #fff transparent;
	border-radius: 50%;
	animation: ow-embed-load 1.2s linear infinite;
}

@keyframes ow-embed-load {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	:is(.ow, .ows, .owh) .ow__form--embed .ml-form-embedSubmitLoad::after {
		animation-duration: 3s;
	}
}

@media (max-width: 1024px) {

	:is(.ow, .ows, .owh) .ow__form--embed .ml-form-embedSubmit button {
		width: 100%;
	}

	/* O rodape da folha passa a sobrepor-se ao corpo em vez de ocupar
	   espaco no fluxo. Assim, escondê-lo nao muda a altura do conteudo -
	   e sem mudanca de altura o observador nao entra em oscilacao. */
	:is(.ow, .ows, .owh) .ow__folha-corpo {
		padding-bottom: 88px;
	}

	:is(.ow, .ows, .owh) .ow__folha-rodape {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		transition: opacity 200ms ease, transform 200ms ease;
	}

	/* Com o botao de submissao a vista, o CTA de ancoragem deixa de ter
	   trabalho: dois botoes iguais no mesmo ecra so criam duvida. */
	:is(.ow, .ows, .owh) .ow__folha-rodape.is-oculto {
		opacity: 0;
		transform: translateY(100%);
		pointer-events: none;
	}
}


/* --------------------------------------------------- nota "em breve"
 *
 * Sessao confirmada mas ainda sem programa. Ocupa o lugar da hora no
 * cartao e no painel, em cinza e nao no acento: e uma ausencia de
 * informacao, nao um destaque. */
:is(.ow, .ows, .owh) .ow__card-nota {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ow-cinza-500);
	font-style: italic;
}

:is(.ow, .ows, .owh) .ow__meta-nota {
	color: var(--ow-cinza-500);
	font-style: italic;
}

/* O icone do relogio a cinza, para nao ficar mais forte do que o texto. */
:is(.ow, .ows, .owh) .ow__meta-nota .ow__icone {
	opacity: 0.5;
}

@media (max-width: 1024px) {

	:is(.ow, .ows, .owh) .ow__card-nota {
		font-size: 14px;
	}
}

/* Moldura das fotografias dos oradores.
 *
 * Um filete no acento da marca — ciano na Academy, roxo na ESESFM, pelo
 * mesmo token — em vez de uma cor fixa: a moldura acompanha a marca sem
 * uma segunda regra. Fica no filete de 1px de propósito: a 48px, 2px
 * competiriam com a fotografia em vez de a enquadrarem.
 *
 * box-sizing e a imagem a 100%: sem isso o filete somava 2px à caixa e a
 * fotografia de 48px transbordava para cima dele.
 */
:is(.ow, .ows, .owh) .ow__orador-foto {
	box-sizing: border-box;
	border: 1px solid var(--ow-azul-400);
}

:is(.ow, .ows, .owh) .ow__orador-foto img {
	width: 100%;
	height: 100%;
}

/* ============================================== sinopse colapsavel
 *
 * Em desktop a coluna do painel cresce sem limite e a sinopse integral
 * cabe sem custo: a lista de dias a esquerda e sempre mais alta. Em
 * mobile o detalhe vive numa folha de 80svh - uma sinopse de 900
 * caracteres enche o corpo visivel e empurra os oradores, que sao a
 * prova social, para fora do ecra. Cortamos a 5 linhas e damos botao.
 *
 * max-height e nao -webkit-line-clamp: o clamp e instavel quando o
 * bloco tem varios paragrafos (as sinopses de 15 e 16 de setembro tem
 * 2 e 3). O texto continua inteiro no HTML em qualquer dos casos.
 */

:is(.ow, .ows, .owh) .ow__ver-mais {
	display: none;
}

@media (max-width: 1024px) {

	:is(.ow, .ows, .owh) .ow__painel-texto--colapsavel {
		position: relative;
		max-height: calc(1.4em * 6);
		overflow: hidden;
	}

	/* Fade em vez de corte a meio da linha: diz "ha mais texto" sem
	   precisar de o escrever. */
	:is(.ow, .ows, .owh) .ow__painel-texto--colapsavel::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2.2em;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
		pointer-events: none;
	}

	:is(.ow, .ows, .owh) .ow__painel-texto--colapsavel.is-expandido {
		max-height: none;
	}

	:is(.ow, .ows, .owh) .ow__painel-texto--colapsavel.is-expandido::after {
		content: none;
	}

	:is(.ow, .ows, .owh) .ow__ver-mais {
		display: inline-flex;
		align-items: center;
		margin-top: 10px;
		padding: 6px 0;
		border: 0;
		background: none;
		font-family: inherit;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.2;
		color: var(--ow-azul-400);
		text-decoration: underline;
		text-underline-offset: 3px;
		cursor: pointer;
	}

	:is(.ow, .ows, .owh) .ow__ver-mais:focus-visible {
		outline: 2px solid var(--ow-azul-400);
		outline-offset: 3px;
	}
}

/* ========================================= nome do orador com ficha
 *
 * Nem todos os oradores tem ficha de docente: quando nao ha, o nome
 * fica texto simples. O link herda a cor e o peso do nome - a unica
 * diferenca e o sublinhado ao passar e no foco. Assim a lista le-se
 * igual e nao parece meia lista de links.
 */

:is(.ow, .ows, .owh) .ow__orador-link {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

:is(.ow, .ows, .owh) .ow__orador-link:hover,
:is(.ow, .ows, .owh) .ow__orador-link:focus-visible {
	color: var(--ow-azul-400);
	text-decoration: underline;
	text-underline-offset: 3px;
}

:is(.ow, .ows, .owh) .ow__orador-link:focus-visible {
	outline: 2px solid var(--ow-azul-400);
	outline-offset: 3px;
}

/* Enquadramento da fotografia dentro da moldura.
 *
 * A moldura é quadrada e as fotografias são 4:5. Com o object-fit: cover e o
 * object-position por omissão (50% 50%), a moldura mostrava a faixa CENTRAL e
 * deitava fora os 12,5% de cima — que é precisamente onde está a testa. Era
 * isso que cortava a cabeça ao António Figueiredo.
 *
 * `top` e não uma percentagem afinada: as masters da biblioteca têm a cabeça
 * encostada ao topo dos 320×400, e a 12% a Helena Valentim já tocava o
 * limite. Nunca cortar uma cara vale mais do que ganhar uns pixels de escala.
 *
 * Isto só funciona porque o render passou a servir o `medium` (240×300) em
 * vez de pedir 96×96: o WordPress respondia com o thumbnail 150×150, que é um
 * recorte central JÁ GRAVADO no ficheiro — nenhum CSS recupera pixels que o
 * recorte apagou.
 */
:is(.ow, .ows, .owh) .ow__orador-foto img {
	object-position: top;
}