/**
 * Seccoes editoriais da pagina de evento com sessoes.
 * Frame "AA - Open Week 2026 - desktop 1512" (Figma GXi5BdKuIHzV920Q3BAYi9).
 *
 * O markup do Sobre, FAQ e CTA vem de widgets Elementor, para a equipa da
 * Academy poder editar a copy. O desenho vive aqui, com classes proprias -
 * nao em estilos por widget, que sao imposiveis de manter.
 */

.owh,
.ows,
.ow-sobre,
.ow-faq,
.ow-cta {
	--ow-azul-50: #EAF5FC;
	--ow-azul-100: #CDE8F8;
	--ow-azul-400: #009CDD;
	--ow-azul-700: #28539A;
	--ow-azul-900: #002C56;
	--ow-azul-950: #001730;
	--ow-cinza-50: #F4F6F8;
	--ow-cinza-100: #EAEFF4;
	--ow-cinza-200: #D6DEE5;
	--ow-cinza-400: #8B9BA7;
	--ow-cinza-500: #677682;
	--ow-cinza-700: #37434D;
	--ow-medida: 1272px;
	--ow-sticky: 100px;

	/* Fuga do KV: continuacao do degrade da arte para a direita da faixa.
	 * Os stops sao a coluna de pixeis do bordo direito do proprio KV
	 * (amostrada com GD), por isso a juncao e continua por construcao.
	 * A tira ocupa a faixa inteira (520px): os primeiros 55px sao a
	 * transicao suave entre o azul chapado e o topo do KV. */
	/* KV mobile: a composicao (lockup, fotografia, elipse em multiply) e
	 * exportada como uma imagem so. Token para a marca poder trocar a
	 * arte sem duplicar o bloco @media. */
	--ow-kv-mobile: image-set(
		url("https://academy.autonoma.pt/wp-content/uploads/2026/08/openweek-2026-hero-mobile.webp?v=2") type("image/webp"),
		url("https://academy.autonoma.pt/wp-content/uploads/2026/08/openweek-2026-hero-mobile.jpg?v=2") type("image/jpeg")
	);

	--ow-kv-fuga: linear-gradient(
		to bottom,
		#002C56 0%,
		#00315C 10.58%, #004575 19.52%, #005B8E 28.46%, #006EA6 37.40%,
		#0084BF 46.35%, #0097D7 55.29%, #009BDC 64.23%, #009CDD 73.17%,
		#009CDD 100%
	);
}

.owh *,
.ows *,
.ow-cta * {
	box-sizing: border-box;
}

/* ================================================================= hero */

:is(.ow, .ows, .owh) .owh__faixa {
	position: relative;
	height: 520px;
	background: var(--ow-azul-900);
	overflow: hidden;
}

/* Em ecras largos a arte para no limite da coluna de conteudo e o resto da
 * faixa ficava chapado, com um corte seco. Esta tira ocupa exactamente a
 * folga a direita da arte e prolonga o degrade do KV ate ao bordo da janela. */
:is(.ow, .ows, .owh) .owh__faixa::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	right: 0;
	width: calc(max(24px, (100% - var(--ow-medida)) / 2) + 2px);
	background: var(--ow-kv-fuga);
	pointer-events: none;
}

:is(.ow, .ows, .owh) .owh__conteudo {
	position: relative;
	z-index: 2;
	max-width: var(--ow-medida);
	margin-inline: auto;
	padding: 108px 24px 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

:is(.ow, .ows, .owh) .owh__conteudo > * {
	max-width: 700px;
}

:is(.ow, .ows, .owh) .owh__sobretitulo {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ow-azul-100);
}

:is(.ow, .ows, .owh) .owh__titulo {
	margin: 0;
	font-size: 56px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -1px;
	color: var(--ow-azul-50);
}

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

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

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

:is(.ow, .ows, .owh) .owh__cta:hover,
:is(.ow, .ows, .owh) .owh__cta:focus-visible {
	background: #fff;
}

/* Zona de arte: encostada a direita, mas dentro das margens do site.
 *
 * A faixa e full-bleed e a arte estava colada ao bordo da JANELA - num
 * ecra de 2000px ficava a flutuar longe do conteudo, fora da coluna onde
 * vive tudo o resto. Com o max() ela para de crescer para fora a partir
 * da largura da frame (1512): ate la fica colada ao bordo, como no
 * desenho; acima disso mantem a mesma distancia relativa, acompanhando a
 * coluna central em vez da janela. */
:is(.ow, .ows, .owh) .owh__arte {
	position: absolute;
	z-index: 1;
	top: 55px;
	bottom: 0;
	left: auto;
	/* Alinhada pela coluna de conteudo (1272), nao pela janela: em ecras
	   largos a arte acompanha a mesma margem lateral do resto do site. */
	right: max(24px, calc(50% - var(--ow-medida) / 2));
	width: 660px;
	height: 465px;
	overflow: hidden;
}

:is(.ow, .ows, .owh) .owh__arte img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* -------------------------------------------------------- breadcrumb */

:is(.ow, .ows, .owh) .owh__breadcrumb {
	background: var(--ow-cinza-50);
	font-size: 14px;
	line-height: 1.4;
}

:is(.ow, .ows, .owh) .owh__breadcrumb ol {
	list-style: none;
	margin: 0 auto;
	max-width: var(--ow-medida);
	padding: 16px 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

:is(.ow, .ows, .owh) .owh__breadcrumb li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--ow-cinza-400);
}

:is(.ow, .ows, .owh) .owh__breadcrumb a {
	color: var(--ow-azul-700);
	text-decoration: none;
}

:is(.ow, .ows, .owh) .owh__breadcrumb a:hover {
	text-decoration: underline;
}

:is(.ow, .ows, .owh) .owh__breadcrumb [aria-current="page"] {
	color: var(--ow-cinza-700);
}

/* ============================================ inscricao na semana toda */

.ows {
	background: var(--ow-azul-50);

	/* A barra do site e fixa: sem esta margem, a ancoragem poe o topo da
	   seccao debaixo dela e o titulo desaparece. */
	scroll-margin-top: var(--ow-sticky, 100px);
}

.ows[hidden] {
	display: none;
}

:is(.ow, .ows, .owh) .ows__interior {
	max-width: var(--ow-medida);
	margin-inline: auto;
	padding: 64px 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

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

:is(.ow, .ows, .owh) .ows__texto {
	margin: 0;
	max-width: 700px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ow-cinza-700);
}

/* Campos a branco sobre o fundo Blue/50, como validado na ronda 13. */
.ows .ow__input {
	background: #fff;
	border-color: #fff;
}

/* Em desktop o formulario distribui-se na horizontal. */
@media (min-width: 1025px) {

	.ows .ow__campos {
		flex-direction: row;
		gap: 24px;
	}

	.ows .ow__campo {
		flex: 1 1 0;
		max-width: none;
	}
}

/* ================================================================ sobre */

.ow-sobre {
	background: #fff;
}

.ow-sobre .elementor-widget-container > ul,
.ow-sobre ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ow-sobre li {
	position: relative;
	padding-left: 19px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ow-cinza-700);
}

/* O marcador ">" da frame, sem imagem e sem list-style. */
.ow-sobre li::before {
	content: ">";
	position: absolute;
	left: 0;
	top: 0;
	/* O marcador usa a cor de acento: em ESESFM acompanha a marca e fica
	   Purple/400, porque o token e redefinido no body.evento-esesfm. */
	color: var(--ow-azul-400);
	font-weight: 700;
}

/* ================================================================== faq */

/* ================================================================== cta */

.ow-cta {
	position: relative;
	text-align: center;
	color: #fff;
}

/* O veu escuro por cima da fotografia: sem ele o texto branco nao passa
   dos 4,5:1 em cima de uma imagem clara. */
.ow-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 23, 48, 0.8);
	pointer-events: none;
}

.ow-cta > .e-con-inner,
.ow-cta > .elementor-widget-wrap {
	position: relative;
	z-index: 1;
}

.ow-cta h2,
.ow-cta .elementor-heading-title {
	font-size: 40px;
	font-weight: 500;
	line-height: 44px;
	color: #fff;
	max-width: 738px;
	margin-inline: auto;
}

.ow-cta p {
	font-size: 16px;
	line-height: 1.4;
	color: #fff;
	max-width: 640px;
	margin-inline: auto;
}

.ow-cta .elementor-button {
	min-width: 240px;
	height: 48px;
	padding: 0 16px;
	border-radius: 0;
	background: var(--ow-azul-100);
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 48px;
}

.ow-cta .elementor-button:hover,
.ow-cta .elementor-button:focus-visible {
	background: #fff;
	color: #000;
}

/* =============================================================== mobile */

@media (max-width: 1024px) {

	:is(.ow, .ows, .owh) .owh__faixa {
		height: auto;
	}

	:is(.ow, .ows, .owh) .owh__conteudo {
		padding: 48px 24px 280px;
		gap: 16px;
	}

	:is(.ow, .ows, .owh) .owh__titulo {
		font-size: 36px;
		letter-spacing: 0;
	}

	:is(.ow, .ows, .owh) .owh__arte {
		inset: auto 0 0 0;
		width: 100%;
		height: 260px;
	}

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

	:is(.ow, .ows, .owh) .ows__interior {
		padding: 40px 24px;
	}

	:is(.ow, .ows, .owh) .ows__titulo,
	.ow-cta h2,
	.ow-cta .elementor-heading-title {
		font-size: 28px;
		line-height: 1.2;
	}

	.ow-sobre li {
		font-size: 16px;
	}
}

/* ======================================= titulos das seccoes editoriais
   Os headings vem do widget do Elementor; o desenho vive aqui para nao
   ficar preso a estilos por widget. */

.ow-sobre .elementor-heading-title,
.ow-faq .elementor-heading-title {
	font-size: 36px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ow-azul-950);
	margin-bottom: 24px;
}

/* Especificidade: o CSS do Elementor para o text-editor ganha a uma
   classe simples. Sobe-se dentro do wrapper do proprio componente, sem
   !important e sem tocar em ficheiros partilhados. */
.ow-sobre .elementor-widget-text-editor ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ow-sobre .elementor-widget-text-editor li {
	position: relative;
	padding-left: 19px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ow-cinza-700);
	list-style: none;
}

.ow-sobre .elementor-widget-text-editor li::before {
	content: ">";
	position: absolute;
	left: 0;
	top: 0;
	/* O marcador usa a cor de acento: em ESESFM acompanha a marca e fica
	   Purple/400, porque o token e redefinido no body.evento-esesfm. */
	color: var(--ow-azul-400);
	font-weight: 700;
}

/* O container do Elementor tem medida propria; a nossa e 1272. */
.ow-sobre > .e-con-inner,
.ow-faq > .e-con-inner,
.ow-cta > .e-con-inner {
	max-width: 1272px;
	margin-inline: auto;
}

/* Especificidade: o CSS do Elementor para os widgets vem de varias folhas e
   empata com uma classe simples. Acrescenta-se .e-con - a classe que o
   proprio container ja tem - em vez de recorrer a !important. */

.ow-sobre.e-con .elementor-heading-title,
.ow-faq.e-con .elementor-heading-title {
	font-size: 36px;
	font-weight: 600;
	line-height: 1.2;
	color: #001730;
	margin: 0 0 24px;
}

.ow-cta.e-con .elementor-heading-title {
	font-size: 40px;
	font-weight: 500;
	line-height: 44px;
	color: #fff;
	max-width: 738px;
	margin: 0 auto;
}

.ow-cta.e-con .elementor-widget-text-editor,
.ow-cta.e-con .elementor-widget-text-editor p {
	font-size: 16px;
	line-height: 1.4;
	color: #fff;
	max-width: 640px;
	margin-inline: auto;
}

.ow-cta.e-con > .e-con-inner {
	gap: 24px;
	align-items: center;
}

.ow-cta.e-con .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 240px;
	height: 48px;
	padding: 0 16px;
	border-radius: 0;
	background: #CDE8F8;
	color: #000;
	font-size: 16px;
	font-weight: 400;
	fill: #000;
}

.ow-cta.e-con .elementor-button:hover,
.ow-cta.e-con .elementor-button:focus-visible {
	background: #fff;
	color: #000;
}

@media (max-width: 1024px) {

	.ow-sobre.e-con .elementor-heading-title,
	.ow-faq.e-con .elementor-heading-title,
	.ow-cta.e-con .elementor-heading-title {
		font-size: 28px;
		line-height: 1.2;
	}

	/* O botao tinha min-width 240px e altura fixa de 48px. Com a coluna
	   estreita do mobile, o rotulo transbordava a caixa em vez de a fazer
	   crescer - e a caixa continuava com 48px por baixo do texto. Aqui a
	   largura deixa de poder passar a coluna e a altura passa a ser um
	   minimo, nao um limite: um rotulo mais longo quebra dentro do botao. */
	.ow-cta.e-con .elementor-button {
		max-width: 100%;
		height: auto;
		min-height: 48px;
		padding: 12px 16px;
		line-height: 1.4;
		text-wrap: balance;
	}
}
/* =========================================================== movimento
   Mesma duracao e mesma curva do bloco Programa, para a pagina inteira ter
   um so ritmo. O keyframe ow-entrada e definido em evento-sessoes.css, que
   e dependencia declarada desta folha. */

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

:is(.ow, .ows, .owh) .owh__cta,
:is(.ow, .ows, .owh) .owh__breadcrumb a,
.ow-cta.e-con .elementor-button {
	transition:
		background-color var(--ow-mov) var(--ow-curva),
		color var(--ow-mov) var(--ow-curva);
}

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

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

}
/* ======================================== hero mobile - medidas da frame
 *
 * No 4335:5826 ("dispositivo=mobile, aberto=nao"). O hero mobile nao e o
 * desktop encolhido: a arte ocupa a faixa toda e o texto assenta EM BAIXO,
 * por cima dela. Antes tinhamos o inverso - texto em cima e uma tira de
 * arte com 260px no fundo.
 *
 * A composicao do KV (lockup, fotografia, elipse em multiply) e exportada
 * como uma imagem so: em CSS eram quatro camadas posicionadas em valores
 * fraccionarios que nunca sobreviveriam a uma mudanca de largura. WebP com
 * 54KB, JPEG de 120KB como rede - a 780x1454 chega para ecras 2x.
 */

@media (max-width: 1024px) {

	:is(.ow, .ows, .owh) .owh__faixa {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		height: auto;
		min-height: 727px;
		/* A cor por baixo e a do gradiente da frame: se a imagem falhar ou
		   ainda nao tiver chegado, o texto branco continua a ler-se. */
		background-color: var(--ow-azul-900);
		background-image: var(--ow-kv-mobile);
		background-position: center top;
		background-size: cover;
		background-repeat: no-repeat;
	}

	/* A fuga do degrade e uma correccao de ecras largos: em mobile a arte
	   ocupa a faixa toda e a tira so apareceria como uma barra ao lado. */
	:is(.ow, .ows, .owh) .owh__faixa::after {
		display: none;
	}

	/* A arte deixa de ser um elemento: passou a ser o fundo da faixa. */
	:is(.ow, .ows, .owh) .owh__arte {
		display: none;
	}

	:is(.ow, .ows, .owh) .owh__conteudo {
		position: relative;
		z-index: 1;
		gap: 16px;
		padding: 32px 24px;
		max-width: none;
	}

	:is(.ow, .ows, .owh) .owh__sobretitulo {
		font-size: 16px;
		font-weight: 700;
		line-height: 24px;
		color: #9CD1EF;
	}

	:is(.ow, .ows, .owh) .owh__titulo {
		font-size: 40px;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: -1px;
		color: #fff;
	}

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

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

	:is(.ow, .ows, .owh) .owh__cta {
		width: 100%;
		min-width: 240px;
		height: 48px;
	}

	:is(.ow, .ows, .owh) .owh__breadcrumb {
		gap: 6px;
		padding: 12px 24px;
		font-size: 13px;
		line-height: 1.4;
		background: var(--ow-cinza-50);
	}

	/* ---------------------------------- inscricao na semana toda ---- */

	:is(.ow, .ows, .owh) .ows__interior {
		padding: 80px 24px;
		gap: 24px;
	}

	:is(.ow, .ows, .owh) .ows__titulo {
		font-size: 32px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: -1px;
		color: var(--ow-azul-950);
	}

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

	:is(.ow, .ows, .owh) .ows .ow__campos {
		gap: 20px;
	}

	:is(.ow, .ows, .owh) .ows .ow__campo {
		gap: 8px;
	}

	:is(.ow, .ows, .owh) .ow__label {
		font-size: 15px;
		color: var(--ow-cinza-800);
	}

	:is(.ow, .ows, .owh) .ows .ow__input {
		height: 48px;
		padding: 0 24px;
		border: 2px solid var(--ow-cinza-50);
		background: #fff;
	}
}

/* O titulo da seccao Sobre passou a shortcode (consciente da marca), por
 * isso deixa de ser um heading do Elementor e precisa do mesmo desenho. */
.ow-sobre .ow-sobre__titulo {
	font-size: 36px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ow-azul-950);
	margin: 0 0 24px;
}

@media (max-width: 1024px) {

	.ow-sobre .ow-sobre__titulo {
		font-size: 28px;
	}
}

/* ==================================================== CTA do hero: âncora
 *
 * O CTA deixou de abrir a inscrição na semana toda e passou a ser um <a>
 * para o Programa. O bloco acima foi escrito para um <button>, que é
 * flex-como-caixa por defeito; um <a> é inline e o rótulo assentava no
 * topo dos 48px em vez de ao centro.
 */
:is(.ow, .ows, .owh) a.owh__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
}

/* A barra do site é fixa: sem isto a âncora punha o título do Programa
   debaixo dela. O valor repete o --ow-sticky do hero e é declarado aqui
   porque os tokens dessa folha vivem em secções irmãs, e as custom
   properties não atravessam irmãos. */
#programa {
	--ow-sticky: 100px;

	scroll-margin-top: calc(var(--ow-sticky) + 16px);
}