/* =========================================================================
   AMPM - Secoes
   Carregado sob demanda: os widgets do Elementor declaram este arquivo em
   get_style_depends() e o tema o enfileira nas paginas com render nativo.
   ====================================================================== */

/* HERO =================================================================== */

.ampm-hero {
	display: grid;
	align-items: center;
	min-height: var(--ampm-hero-min, 92vh);
	padding-block: calc(var(--ampm-header-h) + clamp(3rem, 7vw, 5.5rem)) clamp(4.5rem, 8vw, 7rem);
	overflow: hidden;
}

@supports (min-height: 92svh) {
	.ampm-hero {
		min-height: var(--ampm-hero-min, 92svh);
	}
}

.ampm-hero__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

/* Duas colunas so quando a coluna de texto comporta a palavra mais longa
   do titulo no tamanho maximo da escala. */
@media (min-width: 1100px) {
	.ampm-hero__grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr);
	}

	/*
	 * O emblema encosta no TOPO da coluna, e nao no centro dela.
	 *
	 * Centrado, a base dele dependia da altura do texto ao lado, que muda com
	 * a largura da janela - e em tela baixa ele descia para fora do primeiro
	 * ecra. Encostado no topo, a base e sempre "recuo do cabecalho + altura do
	 * emblema", e o limite de altura logo abaixo garante que essa soma cabe.
	 * Pedido do cliente na revisao da 2a versao: "o logo deve ficar visivel
	 * por completo assim que a pessoa acessa o site".
	 */
	.ampm-hero__figure {
		align-self: start;
	}
}

.ampm-hero__title {
	margin-top: 1.5rem;
	font-size: var(--ampm-fs-display);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.035em;
}

.ampm-hero__text {
	margin-top: 1.75rem;
	max-width: 46ch;
	font-size: var(--ampm-fs-lead);
	line-height: 1.5;
	color: var(--ampm-text-color, var(--ampm-fg-soft));
}

.ampm-hero__actions {
	margin-top: clamp(2rem, 4vw, 2.75rem);
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

/* Emblema. */

.ampm-hero__figure {
	position: relative;
	display: grid;
	place-items: center;
	justify-self: center;
}

.ampm-hero__emblem {
	/*
	 * Tres limites, e vale o menor: a coluna, os 440px do desenho e o que
	 * sobra da altura do ecra depois do cabecalho e dos recuos do hero. O
	 * terceiro converte altura em largura pela proporcao da arte (760/900),
	 * porque so a largura e declarada aqui - com `height: auto` a altura vem
	 * sozinha, e assim o `img { height: auto }` do Elementor nao atropela
	 * nada. Ver: elementor-img-height-auto-corta-heroi-do-tema.
	 */
	width: var(--ampm-hero-emblem, min(100%, 440px, (100vh - var(--ampm-header-h, 84px) - 9rem) * 0.844));
	height: auto;
	filter: drop-shadow(0 42px 90px rgba(0, 70, 190, 0.55));
	animation: ampm-float 11s ease-in-out infinite;
}

/* svh em vez de vh: no telemovel a barra do navegador nao pode roubar altura. */
@supports (height: 100svh) {
	.ampm-hero__emblem {
		width: var(--ampm-hero-emblem, min(100%, 440px, (100svh - var(--ampm-header-h, 84px) - 9rem) * 0.844));
	}
}

@keyframes ampm-float {
	0%,
	100% {
		transform: translateY(-10px);
	}

	50% {
		transform: translateY(10px);
	}
}

.ampm-hero__ring {
	position: absolute;
	border: 1px solid rgba(120, 200, 255, 0.16);
	border-radius: 50%;
	pointer-events: none;
}

.ampm-hero__ring--1 {
	inset: -6%;
	animation: ampm-spin 44s linear infinite;
	border-style: dashed;
}

.ampm-hero__ring--2 {
	inset: -18%;
	border-color: rgba(120, 200, 255, 0.08);
	animation: ampm-spin 70s linear infinite reverse;
}

@keyframes ampm-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 1099px) {
	.ampm-hero__figure {
		position: absolute;
		inset: 0;
		z-index: -1;
		opacity: 0.16;
	}

	.ampm-hero__emblem {
		width: min(78vw, 440px);
	}
}

/* Faixa das sete letras. */

.ampm-methodstrip {
	margin-top: clamp(2.5rem, 5vw, 3.75rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--ampm-line-color);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 1.25rem;
}

.ampm-methodstrip__note,
.ampm-methodstrip__word {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ampm-fg-soft);
}

.ampm-methodstrip__word {
	color: var(--ampm-method-color, var(--ampm-cyan-soft));
}

.ampm-methodstrip__list {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
}

.ampm-methodstrip__item {
	font-family: var(--ampm-stack-display);
	font-size: clamp(1.05rem, 2.4vw, 1.4rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ampm-method-color, #ffffff);
	opacity: 0.35;
	animation: ampm-pulse 5.5s var(--ampm-ease) infinite;
	animation-delay: calc(var(--i) * 0.32s);
}

.ampm-methodstrip__item abbr {
	text-decoration: none;
	border: 0;
	cursor: help;
}

@keyframes ampm-pulse {
	0%,
	72%,
	100% {
		opacity: 0.32;
	}

	18%,
	40% {
		opacity: 1;
	}
}

/* CABECALHO DE PAGINA ==================================================== */

/* Respeita o preset de respiro da secao e ainda desconta a altura do
   cabecalho, que fica por cima quando o header e transparente. */
.ampm-pagehead {
	padding-block: calc(var(--ampm-header-h) + var(--ampm-sp-y)) var(--ampm-sp-y);
	overflow: hidden;
}

.ampm-pagehead__title {
	margin-top: 1rem;
	font-size: var(--ampm-fs-h1);
	max-width: 18ch;
}

.ampm-pagehead__text {
	margin-top: 1.25rem;
	max-width: 52ch;
	font-size: var(--ampm-fs-lead);
	line-height: 1.5;
	color: var(--ampm-text-color, var(--ampm-fg-soft));
}

.ampm-crumb {
	margin-bottom: 1.5rem;
	font-size: 0.8125rem;
	color: var(--ampm-fg-soft);
}

.ampm-crumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ampm-crumb li + li::before {
	content: "/";
	margin-right: 0.5rem;
	opacity: 0.45;
}

.ampm-crumb a:hover {
	color: var(--ampm-cyan-soft);
}

/* POSICIONAMENTO ========================================================= */

/*
 * Duas colunas: declaracao a esquerda, texto de apoio a direita. Empilhado,
 * sobrava metade da secao vazia e a declaracao quebrava em coluna estreita.
 */
.ampm-positioning__grid {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
	.ampm-positioning__grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		align-items: end;
	}
}

.ampm-positioning__deny,
.ampm-positioning__affirm {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 0.85rem;
}

.ampm-positioning__deny {
	font-family: var(--ampm-stack-display);
	font-size: clamp(1.05rem, 1.8vw, 1.35rem);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--ampm-deny-color, var(--ampm-fg-soft));
	max-width: 40ch;
}

.ampm-positioning__affirm {
	margin-top: 1.1rem;
	/* Abaixo do titulo do COMPETE de proposito: la e o pico da pagina. */
	font-size: clamp(1.5rem, 3vw, 2.375rem);
	line-height: 1.12;
}

/* Marcador hexagonal: nega (x) e afirma (v) sem passar linha sobre o texto. */
.ampm-positioning__mark {
	display: grid;
	place-items: center;
	width: 30px;
	height: 34px;
	flex: none;
	margin-top: 0.15em;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.ampm-positioning__mark .ampm-icon {
	width: 15px;
	height: 15px;
	stroke-width: 2.2;
}

.ampm-positioning__mark--no {
	background: color-mix(in srgb, var(--ampm-fg-soft) 20%, transparent);
	color: var(--ampm-fg-soft);
}

.ampm-positioning__mark--yes {
	background: var(--ampm-primary);
	color: #ffffff;
}

.ampm-positioning__affirm .ampm-positioning__mark {
	width: 38px;
	height: 43px;
	margin-top: 0.08em;
}

.ampm-positioning__affirm .ampm-icon {
	width: 19px;
	height: 19px;
}

.ampm-positioning__aside {
	padding-bottom: 0.35rem;
}

.ampm-positioning__text {
	max-width: 46ch;
	font-size: var(--ampm-fs-lead);
	line-height: 1.55;
	color: var(--ampm-text-color, var(--ampm-fg-soft));
}

/* Fio que amarra a coluna de apoio a declaracao. */
@media (min-width: 900px) {
	.ampm-positioning__aside {
		border-left: 1px solid var(--ampm-line-color);
		padding-left: clamp(1.25rem, 2.5vw, 2rem);
	}
}

/* Cadeia de valor. */

.ampm-chain {
	position: relative;
	margin-top: clamp(3rem, 6vw, 5rem);
}

.ampm-chain__note {
	margin-bottom: 1.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ampm-fg-soft);
}

.ampm-chain__list {
	position: relative;
	display: grid;
	gap: 1.75rem;
	z-index: 1;
}

.ampm-chain__step {
	position: relative;
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: center;
	gap: 0.9rem;
	padding-left: 0.25rem;
}

.ampm-chain__dot {
	display: grid;
	place-items: center;
	width: 34px;
	height: 38px;
	flex: none;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: color-mix(in srgb, var(--ampm-chain-color, var(--ampm-primary)) 12%, var(--ampm-section-bg));
	color: var(--ampm-chain-color, var(--ampm-primary));
	transition: background-color 0.5s var(--ampm-ease);
	transition-delay: calc(var(--i) * 0.12s);
}

.ampm-chain__dot .ampm-icon {
	width: 18px;
	height: 18px;
	transform: scale(0.6);
	opacity: 0;
	transition: transform 0.5s var(--ampm-ease), opacity 0.4s var(--ampm-ease);
	transition-delay: calc(var(--i) * 0.12s + 0.1s);
}

.ampm-chain.is-revealed .ampm-chain__dot,
.is-revealed .ampm-chain__dot {
	background: color-mix(in srgb, var(--ampm-chain-color, var(--ampm-primary)) 22%, var(--ampm-section-bg));
}

.ampm-chain.is-revealed .ampm-chain__dot .ampm-icon,
.is-revealed .ampm-chain__dot .ampm-icon {
	transform: none;
	opacity: 1;
}

.ampm-chain__index {
	font-family: var(--ampm-stack-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--ampm-chain-color, var(--ampm-primary));
}

.ampm-chain__label {
	font-family: var(--ampm-stack-display);
	font-size: clamp(1rem, 1.7vw, 1.25rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ampm-title-color, inherit);
}

/* A pista e o unico ancestral posicionado do trilho: assim ele nunca alcanca
   a legenda que fica acima da lista. */
.ampm-chain__track {
	position: relative;
}

.ampm-chain__rail {
	position: absolute;
	left: 17px;
	top: 1.4rem;
	bottom: 1.4rem;
	width: 1px;
	background: var(--ampm-line-color);
	overflow: hidden;
}

.ampm-chain__rail-fill {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--ampm-chain-color, var(--ampm-primary)), transparent);
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform 1.4s var(--ampm-ease) 0.2s;
}

.ampm-chain.is-revealed .ampm-chain__rail-fill {
	transform: scaleY(1);
}

@media (min-width: 900px) {
	.ampm-chain__list {
		grid-template-columns: repeat(var(--ampm-chain-count, 5), minmax(0, 1fr));
		gap: 1.25rem;
	}

	.ampm-chain__step {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 0.85rem;
		padding-top: 1.9rem;
		padding-left: 0;
	}

	.ampm-chain__dot {
		position: absolute;
		top: 0;
		left: 0;
	}

	.ampm-chain__step {
		padding-top: 3.4rem;
	}

	.ampm-chain__index {
		display: block;
	}

	.ampm-chain__rail {
		left: 18px;
		right: 18px;
		top: 18px;
		bottom: auto;
		width: auto;
		height: 1px;
	}

	.ampm-chain__rail-fill {
		background: linear-gradient(90deg, var(--ampm-chain-color, var(--ampm-primary)), transparent);
		transform: scaleX(0);
		transform-origin: left center;
	}

	.ampm-chain.is-revealed .ampm-chain__rail-fill {
		transform: scaleX(1);
	}

	/* Seta entre etapas. */
	.ampm-chain__step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 15px;
		right: 0.9rem;
		width: 6px;
		height: 6px;
		border-top: 1px solid var(--ampm-chain-color, var(--ampm-primary));
		border-right: 1px solid var(--ampm-chain-color, var(--ampm-primary));
		transform: rotate(45deg);
		opacity: 0.6;
	}
}

/* METODO COMPETE ========================================================= */

.ampm-compete__promise {
	margin: 1.25rem auto 0;
	max-width: 46ch;
	text-align: center;
	font-family: var(--ampm-stack-display);
	font-size: var(--ampm-fs-lead);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--ampm-cyan-soft);
}

.ampm-compete__stage {
	margin-top: clamp(2.75rem, 6vw, 4.5rem);
	display: flex;
	flex-direction: column;
	gap: clamp(1.75rem, 4vw, 2.5rem);
}

.ampm-compete__visual {
	order: -1;
	display: grid;
	justify-items: center;
	gap: 1.25rem;
}

.ampm-compete__art {
	position: relative;
	width: var(--ampm-hex-size, clamp(230px, 60vw, 380px));
	aspect-ratio: 760 / 903;
	margin-inline: auto;
}

.ampm-compete__img {
	position: relative;
	z-index: 1;
	width: 100%;
	filter: drop-shadow(0 34px 70px rgba(0, 60, 170, 0.5));
}

.ampm-compete__halo {
	position: absolute;
	inset: -18%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 140, 255, 0.35), transparent 66%);
	filter: blur(34px);
}

.ampm-compete__note {
	max-width: 52ch;
	text-align: center;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ampm-fg-soft);
}

/*
 * Rotulos dos pilares. Os seis dos vertices aparecem em QUALQUER tamanho
 * desde 1.9.0 (no celular, em escala menor, a pedido do cliente - "igual ao
 * PC"); o setimo, no centro da figura, aparece sempre - e ele que cobre o
 * "Execution" gravado no PNG da marca. Sem JS, ou com os rotulos desligados
 * no widget, a lista some e o acordeao fica no lugar.
 */

.ampm-compete__nodes {
	display: none;
}

.ampm-compete__hint {
	display: none;
	margin-top: -0.25rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ampm-fg-soft);
	opacity: 0.8;
}

/*
 * Pilares ao redor do hexagono: tres colunas (rotulos | arte | rotulos),
 * no mesmo arranjo da arte do cliente. Grade em vez de posicionamento
 * absoluto - assim o rotulo nunca cai por cima do hexagono, por mais
 * comprido que seja o nome.
 */
html.ampm-js .ampm-compete:not(.ampm-compete--no-nodes) .ampm-compete__hex {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	/*
	 * Linha 1: o vertice de cima. Linhas 2 e 3: os quatro vertices
	 * laterais - sao tambem as linhas da arte, que as divide ao meio, e e
	 * isso que poe cada rotulo na altura do seu vertice (25% e 75% da
	 * figura). Linha 4: o vertice de baixo.
	 */
	grid-template-rows: auto auto auto auto;
	align-items: center;
	gap: clamp(0.5rem, 1.4vw, 1.25rem);
	width: 100%;
}

html.ampm-js .ampm-compete:not(.ampm-compete--no-nodes) .ampm-compete__art {
	grid-area: 2 / 2 / 4 / 3;
}

html.ampm-js .ampm-compete:not(.ampm-compete--no-nodes) .ampm-compete__nodes {
	display: contents;
}

.ampm-compete__node {
	grid-column: var(--ampm-node-col, 1);
	grid-row: var(--ampm-node-row, 1);
}

/* Coluna da esquerda: rotulo espelhado, letra encostada no hexagono. */
.ampm-compete__node[style*="--ampm-node-col:1"] .ampm-compete__node-btn {
	flex-direction: row-reverse;
	text-align: right;
}

/*
 * Vertice de cima e vertice de baixo: a celula tem a largura da arte, e o
 * rotulo fica no eixo da ponta em vez de encostar a esquerda.
 */
.ampm-compete__node[style*="--ampm-node-col:2"] .ampm-compete__node-btn {
	width: auto;
	margin-inline: auto;
	justify-content: center;
}

/* --- celular e tablet: hexagono com os rotulos, acordeao fora, popup ---- */

@media (max-width: 1079px) {
	/* O acordeao so fica para quem nao tem JS ou desligou os rotulos. */
	html.ampm-js .ampm-compete:not(.ampm-compete--no-nodes) .ampm-compete__rail {
		display: none;
	}

	html.ampm-js .ampm-compete:not(.ampm-compete--no-nodes) .ampm-compete__hint {
		display: block;
	}

	html.ampm-js .ampm-compete:not(.ampm-compete--no-nodes) .ampm-compete__art {
		/* Duas colunas de rotulo de cada lado pedem a arte mais estreita. */
		--ampm-hex-size: clamp(150px, 46vw, 320px);
	}

	html.ampm-js .ampm-compete:not(.ampm-compete--no-nodes) .ampm-compete__hex {
		gap: clamp(0.35rem, 2vw, 1rem);
	}

	/* Toque tem de ser um alvo de verdade: nada de rotulo apagado a 62%. So
	   os seis dos vertices - a pastilha do centro tem de ficar OPACA, e ela
	   que cobre o "Execution" gravado no PNG. */
	html.ampm-js .ampm-compete__nodes .ampm-compete__node-btn {
		opacity: 0.82;
	}
}

/* Telefone: nao ha largura para letra + nome lado a lado; empilha. */
@media (max-width: 599px) {
	html.ampm-js .ampm-compete:not(.ampm-compete--no-nodes) .ampm-compete__node[style*="--ampm-node-col:1"] .ampm-compete__node-btn,
	html.ampm-js .ampm-compete:not(.ampm-compete--no-nodes) .ampm-compete__node[style*="--ampm-node-col:3"] .ampm-compete__node-btn {
		flex-direction: column;
		align-items: center;
		gap: 0.35rem;
		padding: 0.5rem 0;
		text-align: center;
	}

	html.ampm-js .ampm-compete:not(.ampm-compete--no-nodes) .ampm-compete__node-letter {
		width: 26px;
		height: 30px;
		font-size: 0.75rem;
	}

	html.ampm-js .ampm-compete:not(.ampm-compete--no-nodes) .ampm-compete__node-name {
		font-size: 0.6875rem;
		line-height: 1.2;
	}

	html.ampm-js .ampm-compete:not(.ampm-compete--no-nodes) .ampm-compete__node--core .ampm-compete__node-name {
		font-size: 0.6875rem;
	}

	html.ampm-js .ampm-compete:not(.ampm-compete--no-nodes) .ampm-compete__node--core .ampm-compete__node-btn {
		padding: 0.3rem 0.65rem;
	}
}

/*
 * O popup do pilar (so abaixo de 1080px; ver initCompete). <dialog> nativo:
 * a folha sobe do fundo no telefone e vira cartao centrado no tablet. As
 * classes do painel (.ampm-compete__count, __panel-title, __panel-text) sao
 * as mesmas do cartao da tela grande, de proposito.
 */
.ampm-compete__dialog {
	position: fixed;
	inset: auto 0 0 0;
	margin: 0;
	width: 100%;
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: #ffffff;
	/* As variaveis do tom escuro, para o cartao ler igual a secao. */
	--ampm-fg-soft: #a9bede;
	--ampm-line-color: rgba(150, 190, 255, 0.22);
	--ampm-pillar-active: var(--ampm-cyan-soft);
	--ampm-title-color: #ffffff;
	--ampm-text-color: #c9d8ee;
}

.ampm-compete__dialog::backdrop {
	background: rgba(3, 10, 24, 0.7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ampm-compete__dialog.is-open::backdrop {
	opacity: 1;
}

.ampm-compete__dialog-card {
	position: relative;
	box-sizing: border-box;
	max-height: min(88svh, 88vh);
	overflow: auto;
	padding: 1.6rem 1.35rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
	background: linear-gradient(180deg, #06214f, #021339);
	border: 1px solid rgba(127, 220, 255, 0.28);
	border-bottom: 0;
	border-radius: 18px 18px 0 0;
	box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.55);
	transform: translateY(28px);
	opacity: 0;
	transition: transform 0.32s var(--ampm-ease), opacity 0.28s var(--ampm-ease);
}

.ampm-compete__dialog.is-open .ampm-compete__dialog-card {
	transform: none;
	opacity: 1;
}

.ampm-compete__dialog-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--ampm-line-color);
	border-radius: 999px;
	color: #ffffff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.ampm-compete__dialog-close:focus-visible,
.ampm-compete__dialog-arrow:focus-visible {
	outline: 2px solid var(--ampm-accent);
	outline-offset: 3px;
}

.ampm-compete__dialog-head {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	margin-top: 0.6rem;
	padding-right: 3rem;
}

.ampm-compete__dialog-head .ampm-compete__letter {
	background: var(--ampm-cyan-soft);
	color: var(--ampm-deep);
}

.ampm-compete__dialog-head .ampm-compete__panel-title {
	margin-top: 0.15rem;
	outline: none;
}

/* O nome fica na linha do titulo; e o rotulo (o outro span) que desce. */
.ampm-compete__panel-title .ampm-compete__dialog-name {
	display: inline;
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: inherit;
}

.ampm-compete__dialog .ampm-compete__panel-text {
	max-width: none;
}

.ampm-compete__dialog-nav {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ampm-line-color);
}

.ampm-compete__dialog-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.5rem 0.9rem;
	background: none;
	border: 1px solid var(--ampm-line-color);
	border-radius: 999px;
	color: var(--ampm-cyan-soft);
	font-family: var(--ampm-stack-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: border-color 0.25s var(--ampm-ease), background-color 0.25s var(--ampm-ease);
}

@media (hover: hover) {
	.ampm-compete__dialog-arrow:hover,
	.ampm-compete__dialog-close:hover {
		background: rgba(127, 220, 255, 0.12);
		border-color: var(--ampm-cyan-soft);
	}
}

@media (min-width: 720px) {
	.ampm-compete__dialog {
		inset: 0;
		margin: auto;
		width: min(560px, calc(100% - 3rem));
		height: fit-content;
	}

	.ampm-compete__dialog-card {
		max-height: min(86svh, 86vh);
		padding: 2rem 2rem 1.75rem;
		border-bottom: 1px solid rgba(127, 220, 255, 0.28);
		border-radius: 14px;
		box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
	}
}

body.ampm-dialog-open {
	overflow: hidden;
}

.ampm-compete__node-btn {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	padding: 0.4rem 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	opacity: 0.62;
	transition: opacity 0.3s var(--ampm-ease);
}

.ampm-compete__node.is-active .ampm-compete__node-btn {
	opacity: 1;
}

/*
 * Hover so onde ha cursor. Num ecra de toque o :hover fica preso no ultimo
 * item tocado e o visitante ve um pilar "aceso" sem painel nenhum - foi
 * exatamente o print que o cliente mandou em 06/09/2026.
 */
@media (hover: hover) {
	.ampm-compete__node-btn:hover {
		opacity: 1;
	}

	.ampm-compete__node-btn:hover .ampm-compete__node-name {
		color: #ffffff;
	}

	.ampm-compete__trigger:hover {
		color: var(--ampm-pillar-active, var(--ampm-cyan-soft));
	}
}

.ampm-compete__node-btn:focus-visible {
	outline: 2px solid var(--ampm-accent);
	outline-offset: 3px;
}

.ampm-compete__node-letter {
	display: grid;
	place-items: center;
	width: 30px;
	height: 34px;
	flex: none;
	font-family: var(--ampm-stack-display);
	font-size: 0.8125rem;
	font-weight: 800;
	color: var(--ampm-deep);
	background: var(--ampm-cyan-soft);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	transition: transform 0.3s var(--ampm-ease);
}

.ampm-compete__node-name {
	font-family: var(--ampm-stack-display);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--ampm-fg-soft);
	transition: color 0.3s var(--ampm-ease);
}

.ampm-compete__node.is-active .ampm-compete__node-name {
	color: #ffffff;
}

.ampm-compete__node.is-active .ampm-compete__node-letter {
	transform: scale(1.14);
	/* drop-shadow, e nao box-shadow: o clip-path recortaria a sombra. */
	filter: drop-shadow(0 0 10px rgba(127, 220, 255, 0.75));
}

/*
 * O SETIMO pilar, no centro do hexagono (arranjo pedido pelo cliente em
 * 05/09/2026). A pastilha e opaca de proposito: a palavra "Execution" esta
 * gravada no PNG e nao da para apaga-la sem refazer o miolo do desenho.
 * Medida na arte, a chapa gravada ocupa 46% da largura e 9,2% da altura,
 * centrada - os minimos abaixo cobrem-na com folga em qualquer tamanho.
 */
.ampm-compete__node--core {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 60%;
	min-height: 12%;
}

.ampm-compete__node--core .ampm-compete__node-btn {
	height: 100%;
	justify-content: center;
	padding: 0.45rem 0.9rem;
	/* A cor da propria chapa gravada no PNG (medida: rgb(5,36,75)). Preto do
	   tema abria um buraco no meio da figura; nesta cor a pastilha assenta. */
	background: #05244b;
	border: 1px solid rgba(127, 220, 255, 0.32);
	border-radius: 999px;
	box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.9);
	opacity: 1;
}

.ampm-compete__node--core .ampm-compete__node-name {
	color: #ffffff;
	white-space: nowrap;
}

/* Gatilhos (acordeao no mobile). */

.ampm-compete__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1rem 0.25rem;
	background: none;
	border: 0;
	border-top: 1px solid var(--ampm-line-color);
	text-align: left;
	cursor: pointer;
	color: var(--ampm-pillar-color, var(--ampm-fg-soft));
	transition: color 0.3s var(--ampm-ease);
}

.ampm-compete__item:last-child .ampm-compete__trigger {
	border-bottom: 1px solid var(--ampm-line-color);
}

.ampm-compete__letter {
	display: grid;
	place-items: center;
	width: 40px;
	height: 46px;
	flex: none;
	font-family: var(--ampm-stack-display);
	font-size: 1.15rem;
	font-weight: 800;
	color: currentColor;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: color-mix(in srgb, currentColor 12%, transparent);
	transition: background-color 0.3s var(--ampm-ease), color 0.3s var(--ampm-ease);
}

.ampm-compete__names {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.ampm-compete__name {
	font-family: var(--ampm-stack-display);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.ampm-compete__label {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	opacity: 0.72;
}

.ampm-compete__item.is-active .ampm-compete__trigger {
	color: var(--ampm-pillar-active, var(--ampm-cyan-soft));
}

.ampm-compete__item.is-active .ampm-compete__letter {
	background: var(--ampm-pillar-active, var(--ampm-cyan-soft));
	color: var(--ampm-deep);
}

/*
 * Painel: acordeao no mobile - e, desde a revisao de 06/09/2026, o mesmo
 * CARTAO da tela grande (fundo, fio e canto), so que logo abaixo do pilar
 * tocado. Ha sempre um pilar aberto; tocar noutro troca, tocar no aberto
 * nao fecha (ver initCompete em ampm.js). O cartao mora no .ampm-compete__panel-box:
 * o padding nao pode ficar no -inner, senao a linha fechada (0fr) ainda
 * mostraria o padding e o fio.
 */

.ampm-compete__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s var(--ampm-ease);
}

.ampm-compete__item.is-active > .ampm-compete__panel {
	grid-template-rows: 1fr;
}

.ampm-compete__panel-inner {
	overflow: hidden;
	min-height: 0;
}

.ampm-compete__panel-box {
	margin: 0.35rem 0 1.25rem;
	padding: 1.25rem 1.2rem 1.35rem;
	background: var(--ampm-panel-bg, rgba(255, 255, 255, 0.045));
	border: 1px solid var(--ampm-line-color);
	border-radius: var(--ampm-radius-lg);
}

.ampm-compete__count {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ampm-pillar-active, var(--ampm-cyan-soft));
}

.ampm-compete__panel-title {
	margin-top: 0.55rem;
	font-size: var(--ampm-fs-h3);
	color: var(--ampm-title-color, inherit);
}

.ampm-compete__panel-title span {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--ampm-stack-body);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ampm-fg-soft);
}

.ampm-compete__panel-text {
	margin-top: 1rem;
	max-width: 46ch;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ampm-text-color, var(--ampm-fg-soft));
}

/* --- desktop: hexagono a esquerda, sete gatilhos no topo, painel a direita */

@media (min-width: 1080px) {
	html.ampm-js .ampm-compete__stage {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		grid-template-rows: auto auto;
		column-gap: clamp(0.35rem, 0.9vw, 0.9rem);
		row-gap: clamp(2.25rem, 4vw, 3.5rem);
	}

	html.ampm-js .ampm-compete__rail,
	html.ampm-js .ampm-compete__item {
		display: contents;
	}

	html.ampm-js .ampm-compete__trigger,
	html.ampm-js .ampm-compete__item:last-child .ampm-compete__trigger {
		grid-row: 1;
		flex-direction: column;
		align-items: center;
		gap: 0.65rem;
		padding: 1.25rem 0.4rem 1.1rem;
		border: 0;
		border-top: 1px solid var(--ampm-line-color);
		border-bottom: 0;
		text-align: center;
		position: relative;
	}

	html.ampm-js .ampm-compete__trigger::after {
		content: "";
		position: absolute;
		top: -1px;
		left: 0;
		width: 100%;
		height: 2px;
		background: var(--ampm-pillar-active, var(--ampm-cyan-soft));
		transform: scaleX(0);
		transition: transform 0.4s var(--ampm-ease);
	}

	html.ampm-js .ampm-compete__item.is-active .ampm-compete__trigger::after {
		transform: scaleX(1);
	}

	html.ampm-js .ampm-compete__letter {
		width: 46px;
		height: 53px;
		font-size: 1.35rem;
	}

	html.ampm-js .ampm-compete__names {
		justify-items: center;
		align-content: start;
	}

	/* Duas linhas reservadas para o nome mais longo, para que a traducao de
	   todos os pilares fique na mesma altura. */
	html.ampm-js .ampm-compete__name {
		font-size: 0.8125rem;
		line-height: 1.25;
		min-height: 2.5em;
		display: flex;
		align-items: center;
	}

	html.ampm-js .ampm-compete__label {
		font-size: 0.6875rem;
	}

	/* Quatro das sete colunas para a arte: as tres restantes seguram o painel,
	   que so tem um paragrafo. */
	html.ampm-js .ampm-compete__visual {
		grid-row: 2;
		grid-column: 1 / 5;
		order: 0;
		align-content: center;
	}

	html.ampm-js .ampm-compete__art {
		--ampm-hex-size: clamp(210px, 19vw, 320px);
	}

	html.ampm-js .ampm-compete__panel {
		grid-row: 2;
		grid-column: 5 / -1;
		display: block;
		align-self: center;
		padding: clamp(1.5rem, 2.5vw, 2.25rem);
		background: var(--ampm-panel-bg, rgba(255, 255, 255, 0.045));
		border: 1px solid var(--ampm-line-color);
		border-radius: var(--ampm-radius-lg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(14px);
		transition: opacity 0.45s var(--ampm-ease), transform 0.45s var(--ampm-ease), visibility 0.45s;
	}

	html.ampm-js .ampm-compete__item.is-active > .ampm-compete__panel {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* Na tela grande o cartao e o proprio painel; a caixa interna some. */
	html.ampm-js .ampm-compete__panel-box {
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
	}

	/* (A grade dos rotulos ao redor do hexagono vale em qualquer tamanho; esta
	   acima, fora deste @media, desde 1.9.0.) */
}

/* Piscada curta quando o atalho de uma missao abre o pilar aqui. */
.ampm-compete__stage.is-highlighted .ampm-compete__item.is-active .ampm-compete__panel,
.ampm-compete__stage.is-highlighted .ampm-compete__item.is-active .ampm-compete__trigger,
.ampm-compete__stage.is-highlighted .ampm-compete__node.is-active .ampm-compete__node-btn {
	animation: ampm-pisca 1.2s var(--ampm-ease);
}

@keyframes ampm-pisca {
	0%,
	100% {
		box-shadow: 0 0 0 0 transparent;
	}

	25%,
	60% {
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--ampm-pillar-active, #7fdcff) 45%, transparent);
	}
}

/* FAIXA COM IMAGEM ======================================================= */

.ampm-band__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

@media (min-width: 940px) {
	.ampm-band__grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	}

	/* Por padrao a foto entra primeiro no HTML, mas aparece a direita. */
	.ampm-band__figure {
		order: 2;
	}

	.ampm-band--flip .ampm-band__figure {
		order: 0;
	}
}

.ampm-band__figure {
	position: relative;
	margin: 0;
	border-radius: var(--ampm-radius-lg);
	overflow: hidden;
}

.ampm-band__img {
	width: 100%;
	height: var(--ampm-band-min, auto);
	aspect-ratio: 1408 / 768;
	object-fit: cover;
	display: block;
}

/* Tinta suave para a foto assentar no tom escuro da secao. */
.ampm-band__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		145deg,
		rgba(0, 24, 84, var(--ampm-band-tint, 0.22)),
		rgba(3, 10, 24, calc(var(--ampm-band-tint, 0.22) * 1.6))
	);
}

.ampm-band__frame {
	position: absolute;
	inset: 0;
	border: 1px solid var(--ampm-line-color);
	border-radius: var(--ampm-radius-lg);
	pointer-events: none;
}

/* No tom claro a foto ganha um leve destaque em vez de se dissolver no fundo. */
.ampm-section--light .ampm-band__figure,
.ampm-section--surface .ampm-band__figure {
	box-shadow: 0 30px 60px -40px rgba(0, 32, 96, 0.55);
}

.ampm-band__title {
	margin-top: 1rem;
	/* Deliberadamente abaixo do titulo do COMPETE: esta faixa apoia, nao compete. */
	font-size: clamp(1.35rem, 2.5vw, 1.95rem);
	line-height: 1.15;
	max-width: 20ch;
}

.ampm-band__text {
	margin-top: 1.15rem;
	max-width: 48ch;
	font-size: var(--ampm-fs-lead);
	line-height: 1.5;
	color: var(--ampm-text-color, var(--ampm-fg-soft));
}

.ampm-band__actions {
	margin-top: 1.85rem;
}

/* MISSOES ================================================================ */

.ampm-missions__list {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--ampm-line-color);
}

.ampm-missions__item {
	border-bottom: 1px solid var(--ampm-line-color);
}

.ampm-missions__row {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: clamp(1.5rem, 3vw, 2.25rem) 0;
	transition: color 0.32s var(--ampm-ease);
}

.ampm-missions__row::before {
	content: "";
	position: absolute;
	inset: 0 -1.25rem;
	z-index: -1;
	background: var(--ampm-row-hover, var(--ampm-primary));
	opacity: 0;
	transform: scaleY(0.82);
	transition: opacity 0.35s var(--ampm-ease), transform 0.35s var(--ampm-ease);
	border-radius: var(--ampm-radius);
}

a.ampm-missions__row:hover::before,
a.ampm-missions__row:focus-visible::before {
	opacity: 0.06;
	transform: scaleY(1);
}

.ampm-missions__index {
	display: grid;
	gap: 0.2rem;
	min-width: 5.5rem;
}

.ampm-missions__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 46px;
	margin-bottom: 0.6rem;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: color-mix(in srgb, var(--ampm-row-hover, var(--ampm-primary)) 11%, transparent);
	color: var(--ampm-row-hover, var(--ampm-primary));
	transition: background-color 0.32s var(--ampm-ease), transform 0.32s var(--ampm-ease);
}

.ampm-missions__icon .ampm-icon {
	width: 20px;
	height: 20px;
}

.ampm-missions__item:hover .ampm-missions__icon {
	background: var(--ampm-row-hover, var(--ampm-primary));
	color: #ffffff;
	transform: translateY(-2px);
}

.ampm-missions__prefix {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ampm-fg-soft);
}

.ampm-missions__num {
	font-family: var(--ampm-stack-display);
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--ampm-num-color, var(--ampm-line-color));
	transition: color 0.32s var(--ampm-ease);
}

.ampm-missions__item:hover .ampm-missions__num {
	color: var(--ampm-row-hover, var(--ampm-primary));
}

.ampm-missions__body {
	display: grid;
	gap: 0.7rem;
}

.ampm-missions__title {
	font-family: var(--ampm-stack-display);
	font-size: clamp(1.1rem, 2.1vw, 1.5rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.028em;
	color: var(--ampm-title-color, inherit);
}

.ampm-missions__text {
	max-width: 60ch;
	color: var(--ampm-text-color, var(--ampm-fg-soft));
}

.ampm-missions__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.25rem;
}

.ampm-missions__arrow {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--ampm-line-color);
	border-radius: 50%;
	color: var(--ampm-fg-soft);
	transition: transform 0.34s var(--ampm-ease), border-color 0.34s var(--ampm-ease),
		background-color 0.34s var(--ampm-ease), color 0.34s var(--ampm-ease);
}

.ampm-missions__item:hover .ampm-missions__arrow {
	background: var(--ampm-row-hover, var(--ampm-primary));
	border-color: transparent;
	color: #ffffff;
	transform: translateX(5px);
}

.ampm-missions__cta {
	margin-top: clamp(2rem, 4vw, 3rem);
}

/* --- modo tatico (com foto de fundo) ------------------------------------ */

/*
 * O veu mora no MESMO background-image da foto, empilhado antes dela, e nao
 * num ::after da secao: a secao ja usa pseudo-elementos para a malha e o brilho
 * do backdrop, e disputar esse espaco custaria uma camada a mais so para
 * escurecer a foto.
 */
.ampm-missions--tactical {
	--ampm-row-hover: var(--ampm-accent);
	--ampm-num-color: rgba(255, 255, 255, 0.3);
	--ampm-line-color: rgba(160, 200, 255, 0.16);
	overflow: hidden;
}

/*
 * A foto cobre so o alto da secao e morre no navy antes das ultimas missoes.
 * Esticada na altura inteira ela virava textura: com 1459px de secao para 768px
 * de foto o drone sumia no recorte, e o texto das linhas de baixo ficava sobre
 * o miolo claro da cidade.
 */
.ampm-missions__photo {
	position: absolute;
	inset: 0 0 auto 0;
	height: min(64%, 640px);
	z-index: -1;
	background-image:
		linear-gradient(180deg, rgba(3, 9, 22, 0.86) 0%, rgba(3, 9, 22, 0.52) 38%, rgba(3, 9, 22, 0.86) 78%, rgba(3, 9, 22, 1) 100%),
		linear-gradient(90deg, rgba(3, 9, 22, 0.9) 0%, rgba(3, 9, 22, 0.28) 70%, rgba(3, 9, 22, 0.55) 100%),
		var(--ampm-missions-photo);
	background-size: cover;
	background-position: center 40%;
	background-repeat: no-repeat;
	filter: saturate(0.7) contrast(1.04);
}

.ampm-missions--tactical .ampm-missions__list {
	border-top-color: rgba(160, 200, 255, 0.22);
}

.ampm-missions--tactical .ampm-missions__item {
	border-bottom-color: rgba(160, 200, 255, 0.22);
}

/* Numeracao maior e em display: e o que da o peso "operacao", nao a foto. */
.ampm-missions--tactical .ampm-missions__num {
	font-size: clamp(1.9rem, 3.4vw, 2.8rem);
	color: rgba(255, 255, 255, 0.34);
}

.ampm-missions--tactical .ampm-missions__prefix {
	color: var(--ampm-cyan-soft);
	letter-spacing: 0.26em;
}

.ampm-missions--tactical .ampm-missions__icon {
	background: rgba(45, 212, 255, 0.14);
	color: var(--ampm-cyan-soft);
	box-shadow: 0 0 0 1px rgba(45, 212, 255, 0.28) inset;
}

.ampm-missions--tactical .ampm-missions__item:hover .ampm-missions__icon {
	background: var(--ampm-accent);
	color: #04101f;
}

.ampm-missions--tactical .ampm-missions__item:hover .ampm-missions__num {
	color: var(--ampm-cyan-soft);
}

.ampm-missions--tactical .ampm-missions__title {
	color: #ffffff;
}

.ampm-missions--tactical .ampm-chip {
	border-color: rgba(160, 200, 255, 0.28);
	color: rgba(214, 232, 255, 0.86);
}

.ampm-missions--tactical a.ampm-chip:hover,
.ampm-missions--tactical a.ampm-chip:focus-visible {
	background: rgba(45, 212, 255, 0.12);
	border-color: var(--ampm-accent);
	color: var(--ampm-cyan-soft);
}

.ampm-missions--tactical .ampm-missions__arrow {
	border-color: rgba(160, 200, 255, 0.3);
	color: rgba(220, 235, 255, 0.8);
}

.ampm-missions--tactical .ampm-missions__item:hover .ampm-missions__arrow {
	background: var(--ampm-accent);
	color: #04101f;
}

@media (max-width: 720px) {
	.ampm-missions__row {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.ampm-missions__index {
		min-width: 4rem;
	}

	.ampm-missions__arrow {
		display: none;
	}
}

/* COMO ATUAMOS =========================================================== */

.ampm-process__flow {
	position: relative;
	margin-top: clamp(2.75rem, 5vw, 4rem);
	display: grid;
	gap: var(--ampm-flow-gap, clamp(2rem, 4vw, 2.75rem));
}

.ampm-process__step {
	position: relative;
	padding-left: 4rem;
}

.ampm-process__marker {
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 46px;
	height: 53px;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: color-mix(in srgb, var(--ampm-flow-color, var(--ampm-primary)) 12%, transparent);
	color: var(--ampm-flow-color, var(--ampm-primary));
	transition: background-color 0.35s var(--ampm-ease);
}

.ampm-process__step:hover .ampm-process__marker {
	background: color-mix(in srgb, var(--ampm-flow-color, var(--ampm-primary)) 22%, transparent);
}

.ampm-process__marker .ampm-icon {
	width: 22px;
	height: 22px;
	transform: scale(0.6);
	opacity: 0;
	transition: transform 0.5s var(--ampm-ease), opacity 0.4s var(--ampm-ease);
	transition-delay: calc(var(--i) * 0.1s + 0.12s);
}

.ampm-process__step.is-revealed .ampm-process__marker .ampm-icon {
	transform: none;
	opacity: 1;
}

.ampm-process__dot {
	width: 7px;
	height: 8px;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: var(--ampm-flow-color, var(--ampm-primary));
	transform: scale(0);
	transition: transform 0.5s var(--ampm-ease);
	transition-delay: calc(var(--i) * 0.1s + 0.15s);
}

.ampm-process__step.is-revealed .ampm-process__dot {
	transform: scale(1);
}

/* O marcador hexagonal tem 46x53: o centro fica em x=23, e a linha comeca
   logo abaixo dele. Antes ficava em 10.5px, herdado do marcador antigo de
   22px - por isso saia torta no telemovel. */
.ampm-process__step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 23px;
	top: 61px;
	bottom: calc(var(--ampm-flow-gap, 2.5rem) * -1);
	width: 2px;
	margin-left: -1px;
	background: linear-gradient(180deg, var(--ampm-flow-color, var(--ampm-primary)), transparent);
	opacity: 0.32;
}

.ampm-process__num {
	font-family: var(--ampm-stack-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--ampm-eyebrow-color);
}

.ampm-process__title {
	margin-top: 0.4rem;
	font-size: clamp(1.05rem, 1.9vw, 1.35rem);
}

.ampm-process__text {
	margin-top: 0.6rem;
	max-width: 46ch;
	color: var(--ampm-text-color, var(--ampm-fg-soft));
}

@media (min-width: 900px) {
	.ampm-process__flow {
		grid-template-columns: repeat(var(--ampm-steps, 4), minmax(0, 1fr));
	}

	.ampm-process__step {
		padding-left: 0;
		padding-top: 4.25rem;
	}

	.ampm-process__marker {
		top: 0;
	}

	.ampm-process__step:not(:last-child)::before {
		left: 56px;
		right: calc(var(--ampm-flow-gap, 2.5rem) * -1);
		top: 26px;
		bottom: auto;
		width: auto;
		height: 1px;
		background: linear-gradient(90deg, var(--ampm-flow-color, var(--ampm-primary)), transparent);
	}
}

/* MANIFESTO ============================================================== */

.ampm-manifesto {
	overflow: hidden;
	text-align: var(--ampm-head-align, left);
}

/*
 * O manifesto ficava num container estreito centralizado - lia-se como um
 * bloco solto no meio da secao. Agora encosta a esquerda e a coluna da
 * direita segura o respiro.
 */
.ampm-manifesto__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 1000px) {
	.ampm-manifesto__grid {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		align-items: center;
	}
}

.ampm-manifesto__body-col {
	max-width: 46rem;
}

.ampm-manifesto__aside {
	display: none;
}

@media (min-width: 1000px) {
	.ampm-manifesto__aside {
		display: grid;
		place-items: center;
	}

	.ampm-manifesto__hex {
		display: block;
		width: min(100%, 300px);
		aspect-ratio: 100 / 115;
		color: var(--ampm-cyan-soft);
		opacity: 0.16;
	}
}

.ampm-manifesto__title {
	margin-top: 1rem;
	font-size: var(--ampm-fs-h2);
}

.ampm-manifesto__body {
	margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
	padding: 0;
	border: 0;
}

.ampm-manifesto__line {
	font-family: var(--ampm-stack-display);
	font-size: clamp(1.2rem, 2.6vw, 1.9rem);
	font-weight: 600;
	line-height: 1.24;
	letter-spacing: -0.03em;
	color: var(--ampm-title-color, inherit);
	text-wrap: balance;
}

.ampm-manifesto__line + .ampm-manifesto__line {
	margin-top: 0.9rem;
}

.ampm-manifesto__line:nth-child(n + 3) {
	font-size: clamp(1.05rem, 2vw, 1.4rem);
	opacity: 0.82;
}

.ampm-manifesto__closing {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--ampm-line-color);
	font-family: var(--ampm-stack-display);
	font-size: clamp(1.15rem, 2.3vw, 1.6rem);
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -0.028em;
	color: var(--ampm-cyan-soft);
}

.ampm-manifesto__signature {
	margin-top: clamp(2rem, 4vw, 3rem);
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ampm-fg-soft);
}

.ampm-manifesto__rule {
	width: 46px;
	height: 1px;
	background: currentColor;
	flex: none;
}

/* PUBLICO ================================================================ */

/*
 * O titulo desta secao e uma frase inteira (o cliente escolheu a redacao na
 * revisao da 1a versao), nao um titulo de tres palavras. Na escala h2 padrao
 * ele ocupava seis linhas e empurrava a grade de setores para longe; menor e
 * com medida maior, cabe em quatro e a secao volta a ficar em equilibrio.
 */
.ampm-sectors .ampm-sechead__title {
	font-size: clamp(1.35rem, 0.95rem + 1.3vw, 2rem);
	max-width: 25ch;
}

.ampm-sectors__grid {
	display: grid;
	gap: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 940px) {
	.ampm-sectors__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
		align-items: start;
	}
}

.ampm-sectors__facts {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	display: grid;
	gap: 1.5rem;
}

.ampm-sectors__fact dt {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ampm-eyebrow-color);
}

.ampm-sectors__fact dd {
	margin: 0.5rem 0 0;
	font-family: var(--ampm-stack-display);
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--ampm-title-color, inherit);
}

.ampm-sectors__list {
	display: grid;
	grid-template-columns: repeat(var(--ampm-sector-cols, 2), minmax(0, 1fr));
	gap: 1px;
	background: var(--ampm-line-color);
	border: 1px solid var(--ampm-line-color);
	border-radius: var(--ampm-radius);
	overflow: hidden;
}

.ampm-sectors__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: clamp(1rem, 2vw, 1.35rem);
	background: var(--ampm-card-bg);
	transition: background-color 0.3s var(--ampm-ease);
}

.ampm-sectors__item:hover {
	background: color-mix(in srgb, var(--ampm-mark-color, var(--ampm-primary)) 7%, var(--ampm-card-bg));
}

.ampm-sectors__mark {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: var(--ampm-radius);
	color: var(--ampm-mark-color, var(--ampm-primary));
	background: color-mix(in srgb, var(--ampm-mark-color, var(--ampm-primary)) 9%, transparent);
	transition: background-color 0.3s var(--ampm-ease), transform 0.3s var(--ampm-ease);
}

.ampm-sectors__mark .ampm-icon,
.ampm-sectors__mark .ampm-hex {
	width: 20px;
	height: 20px;
}

.ampm-sectors__item:hover .ampm-sectors__mark {
	background: color-mix(in srgb, var(--ampm-mark-color, var(--ampm-primary)) 18%, transparent);
	transform: translateY(-1px);
}

.ampm-sectors__label {
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
}

@media (max-width: 520px) {
	.ampm-sectors__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* VALORES ================================================================ */

.ampm-values__statements {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	display: grid;
	gap: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 860px) {
	.ampm-values__statements {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ampm-values__statement {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--ampm-card-bg);
	border: 1px solid var(--ampm-card-border);
	border-radius: var(--ampm-radius-lg);
}

.ampm-values__statement::before {
	content: "";
	position: absolute;
	left: 0;
	top: clamp(1.5rem, 3vw, 2.25rem);
	width: 2px;
	height: 34px;
	background: var(--ampm-primary);
}

.ampm-values__statement-title {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ampm-eyebrow-color);
	font-family: var(--ampm-stack-body);
}

.ampm-values__statement p {
	margin-top: 0.9rem;
	font-family: var(--ampm-stack-display);
	font-size: clamp(1rem, 1.8vw, 1.1875rem);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.015em;
	color: var(--ampm-title-color, inherit);
}

.ampm-values__label {
	margin-top: clamp(3rem, 6vw, 4.5rem);
	font-family: var(--ampm-stack-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ampm-eyebrow-color);
}

.ampm-values__list {
	margin-top: 1.75rem;
	display: grid;
	gap: var(--ampm-value-gap, clamp(1.75rem, 3vw, 2.5rem));
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

@media (min-width: 1100px) {
	.ampm-values__list {
		grid-template-columns: repeat(var(--ampm-value-cols, 4), minmax(0, 1fr));
	}
}

.ampm-values__item {
	position: relative;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ampm-line-color);
}

.ampm-values__num {
	font-family: var(--ampm-stack-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--ampm-eyebrow-color);
}

.ampm-values__title {
	margin-top: 0.5rem;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ampm-values__text {
	margin-top: 0.6rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ampm-text-color, var(--ampm-fg-soft));
}

/* INDICADORES ============================================================ */

.ampm-stats__list {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.ampm-sechead + .ampm-stats__list {
	margin-top: clamp(2.25rem, 4vw, 3rem);
}

.ampm-stats__item {
	padding-top: 1.4rem;
	border-top: 1px solid var(--ampm-line-color);
}

.ampm-stats__value {
	display: flex;
	align-items: baseline;
	gap: 0.15rem;
	font-family: var(--ampm-stack-display);
	font-size: clamp(2.1rem, 4.4vw, 3.1rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
	color: var(--ampm-stat-color, var(--ampm-cyan-soft));
}

.ampm-stats__affix {
	font-size: 0.55em;
	font-weight: 700;
}

.ampm-stats__label {
	margin-top: 0.85rem;
	display: block;
	max-width: 26ch;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ampm-text-color, var(--ampm-fg-soft));
}

/* CASOS & INSIGHTS ======================================================= */

.ampm-insights__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 1.5rem;
}

.ampm-insights__linkedin {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding-bottom: 0.35rem;
	font-size: 0.9375rem;
	font-weight: 600;
	border-bottom: 1px solid var(--ampm-line-color);
	color: var(--ampm-primary);
}

.ampm-insights__linkedin:hover {
	border-color: currentColor;
}

.ampm-insights__empty {
	margin-top: 2.5rem;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border: 1px dashed var(--ampm-line-color);
	border-radius: var(--ampm-radius-lg);
	max-width: 62ch;
	color: var(--ampm-fg-soft);
}

.ampm-insights__cta {
	margin-top: clamp(2rem, 4vw, 3rem);
}

/* Filtros. */

.ampm-filter {
	margin-top: clamp(2rem, 4vw, 2.75rem);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ampm-filter__btn {
	padding: 0.5rem 1rem;
	background: transparent;
	border: 1px solid var(--ampm-line-color);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ampm-fg-soft);
	cursor: pointer;
	transition: color 0.26s var(--ampm-ease), border-color 0.26s var(--ampm-ease),
		background-color 0.26s var(--ampm-ease);
}

.ampm-filter__btn:hover {
	color: var(--ampm-primary);
	border-color: var(--ampm-primary);
}

.ampm-filter__btn.is-active {
	background: var(--ampm-primary);
	border-color: var(--ampm-primary);
	color: #ffffff;
}

/* Cards. */

.ampm-cards {
	margin-top: clamp(2rem, 4vw, 3rem);
	display: grid;
	gap: var(--ampm-card-gap, clamp(1.25rem, 2.5vw, 2rem));
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

@media (min-width: 960px) {
	.ampm-cards {
		grid-template-columns: repeat(var(--ampm-cols, 3), minmax(0, 1fr));
	}
}

.ampm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ampm-card-bg);
	border: 1px solid var(--ampm-card-border);
	border-radius: var(--ampm-card-radius);
	overflow: hidden;
	transition: transform 0.36s var(--ampm-ease), border-color 0.36s var(--ampm-ease),
		box-shadow 0.36s var(--ampm-ease);
}

.ampm-card:hover {
	transform: translateY(-4px);
	border-color: var(--ampm-card-accent, var(--ampm-primary));
	box-shadow: 0 26px 50px -34px rgba(0, 40, 120, 0.55);
}

.ampm-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: linear-gradient(140deg, var(--ampm-deep), var(--ampm-navy));
}

.ampm-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ampm-ease);
}

.ampm-card:hover .ampm-card__img {
	transform: scale(1.04);
}

.ampm-card__fallback {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: rgba(120, 200, 255, 0.28);
}

.ampm-card__fallback .ampm-hex {
	width: 74px;
	height: 85px;
}

.ampm-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: clamp(1.15rem, 2.4vw, 1.6rem);
	flex: 1;
}

.ampm-card__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ampm-fg-soft);
}

.ampm-card__kind {
	color: var(--ampm-card-accent, var(--ampm-primary));
}

.ampm-card__title {
	font-size: 1.1875rem;
	line-height: 1.24;
	letter-spacing: -0.024em;
}

.ampm-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ampm-card__text {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ampm-text-color, var(--ampm-fg-soft));
}

.ampm-card__result {
	padding: 0.7rem 0.9rem;
	background: color-mix(in srgb, var(--ampm-card-accent, var(--ampm-primary)) 8%, transparent);
	border-left: 2px solid var(--ampm-card-accent, var(--ampm-primary));
	font-size: 0.875rem;
	font-weight: 500;
}

.ampm-card__more {
	margin-top: auto;
	padding-top: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ampm-card-accent, var(--ampm-primary));
}

.ampm-card__more .ampm-icon {
	width: 16px;
	height: 16px;
	transition: transform 0.3s var(--ampm-ease);
}

.ampm-card:hover .ampm-card__more .ampm-icon {
	transform: translateX(4px);
}

.ampm-card.is-filtered {
	display: none;
}

.ampm-cards__empty {
	margin-top: 2rem;
	color: var(--ampm-fg-soft);
}

/* CONTATO ================================================================ */

.ampm-contact__grid {
	display: grid;
	gap: clamp(2.5rem, 6vw, 4.5rem);
}

@media (min-width: 980px) {
	.ampm-contact__grid {
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		align-items: start;
	}
}

.ampm-contact__intro .ampm-sechead__title {
	font-size: clamp(1.5rem, 3vw, 2.35rem);
	max-width: 16ch;
}

.ampm-contact__intro .ampm-sechead__text {
	max-width: 42ch;
}

/* A aparencia dos canais mora em ampm.css (.ampm-channels), porque o rodape
   usa a mesma lista. Aqui fica so o que e da secao. */
.ampm-contact__details {
	margin-top: clamp(2rem, 4vw, 3rem);
}

/* Formulario. */

.ampm-form {
	position: relative;
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	background: var(--ampm-card-bg);
	border: 1px solid var(--ampm-card-border);
	border-radius: var(--ampm-radius-lg);
}

.ampm-form__anchor {
	position: absolute;
	top: -100px;
}

.ampm-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ampm-form__grid {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.ampm-field {
	display: grid;
	gap: 0.45rem;
	margin: 0;
}

.ampm-field--full {
	grid-column: 1 / -1;
}

.ampm-field__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ampm-fg-soft);
}

.ampm-field__req {
	color: var(--ampm-accent);
	margin-left: 0.2em;
}

.ampm-field__input {
	width: 100%;
	/* 16px e o piso: abaixo disso o Safari do iOS da zoom ao focar o campo. */
	font-size: max(16px, 1rem);
	padding: 0.85rem 1rem;
	background: var(--ampm-field-bg, rgba(255, 255, 255, 0.05));
	border: 1px solid var(--ampm-field-border, var(--ampm-line-color));
	border-radius: var(--ampm-field-radius);
	color: var(--ampm-field-fg, var(--ampm-fg));
	font: inherit;
	line-height: 1.5;
	transition: border-color 0.24s var(--ampm-ease), box-shadow 0.24s var(--ampm-ease);
}

.ampm-section--light .ampm-field__input,
.ampm-section--surface .ampm-field__input {
	--ampm-field-bg: #ffffff;
}

.ampm-field__input:focus {
	outline: none;
	border-color: var(--ampm-field-focus, var(--ampm-accent));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ampm-field-focus, var(--ampm-accent)) 22%, transparent);
}

.ampm-field__input[aria-invalid="true"] {
	border-color: #ff6b81;
}

textarea.ampm-field__input {
	resize: vertical;
	min-height: 120px;
}

.ampm-form__consent {
	margin-top: 1.25rem;
	display: flex;
	align-items: start;
	gap: 0.65rem;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--ampm-fg-soft);
	cursor: pointer;
}

.ampm-form__consent input {
	margin-top: 0.2rem;
	accent-color: var(--ampm-primary);
	width: 20px;
	height: 20px;
	flex: none;
}

.ampm-form__submit {
	margin-top: 1.5rem;
	width: 100%;
	justify-content: center;
}

.ampm-form__status {
	margin-bottom: 1.25rem;
}

.ampm-form__msg {
	display: block;
	padding: 0.9rem 1.1rem;
	border-radius: var(--ampm-radius);
	font-size: 0.9375rem;
	border-left: 3px solid currentColor;
}

.ampm-form__msg--ok {
	color: #35d07f;
	background: rgba(53, 208, 127, 0.1);
}

.ampm-form__msg--error {
	color: #ff8095;
	background: rgba(255, 128, 149, 0.1);
}

.ampm-form.is-sending {
	opacity: 0.7;
	pointer-events: none;
}

/* CHAMADA FINAL ========================================================== */

.ampm-cta__inner {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: center;
}

@media (min-width: 900px) {
	.ampm-cta__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.ampm-cta__title {
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	max-width: 26ch;
}

.ampm-cta__lead {
	margin-top: 1rem;
	max-width: 52ch;
	color: var(--ampm-text-color, var(--ampm-fg-soft));
}

.ampm-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

/* CONTEUDO INDIVIDUAL, ARQUIVO E 404 ==================================== */

.ampm-single__media {
	margin-top: calc(clamp(2.75rem, 6vw, 4.5rem) * -1);
	position: relative;
	z-index: 2;
}

.ampm-single__img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--ampm-radius-lg);
	box-shadow: 0 40px 80px -50px rgba(0, 24, 84, 0.7);
}

.ampm-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	padding-bottom: 1.5rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--ampm-line-color);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ampm-fg-soft);
}

.ampm-single__topics {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.ampm-single__result {
	margin-bottom: 2rem;
	padding: 1.1rem 1.35rem;
	background: color-mix(in srgb, var(--ampm-primary) 7%, transparent);
	border-left: 3px solid var(--ampm-primary);
	font-family: var(--ampm-stack-display);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
}

.ampm-single__share {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ampm-line-color);
}

.ampm-single__share a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	color: var(--ampm-primary);
}

.ampm-archive__search {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.ampm-404 {
	display: grid;
	place-items: center;
	min-height: 70vh;
	text-align: center;
}

.ampm-404 .ampm-eyebrow {
	justify-content: center;
}

.ampm-404__title {
	margin-top: 1.25rem;
	font-size: var(--ampm-fs-h1);
}

.ampm-404__text {
	margin-top: 1.15rem;
	font-size: var(--ampm-fs-lead);
	color: var(--ampm-text-color, var(--ampm-fg-soft));
}

.ampm-404__search {
	margin: 2rem auto 0;
	max-width: 420px;
}

.ampm-404__actions {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	justify-content: center;
}

/* Comentarios. */

.ampm-comments__title {
	font-size: var(--ampm-fs-h3);
	margin-bottom: 1.5rem;
}

.ampm-comments__list {
	display: grid;
	gap: 1.75rem;
	margin-bottom: 2.5rem;
}

.ampm-comments__list .children {
	margin-top: 1.5rem;
	padding-left: 1.5rem;
	border-left: 1px solid var(--ampm-line-color);
	display: grid;
	gap: 1.5rem;
}

.ampm-comments .comment-form {
	display: grid;
	gap: 1rem;
}

.ampm-comments .comment-form input[type="text"],
.ampm-comments .comment-form input[type="email"],
.ampm-comments .comment-form input[type="url"],
.ampm-comments .comment-form textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	background: #ffffff;
	border: 1px solid var(--ampm-line-color);
	border-radius: var(--ampm-field-radius);
	font: inherit;
}


/* SIMBOLO INTERATIVO ===================================================== */

.ampm-symbol__stage {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	justify-items: center;
}

@media (min-width: 940px) {
	/*
	 * O conjunto fica centrado embaixo do titulo em vez de esticar de ponta a
	 * ponta: a legenda tem tres linhas curtas e ficava numa coluna de 750px,
	 * longe demais do desenho.
	 */
	.ampm-symbol__stage {
		grid-template-columns: auto minmax(0, 32rem);
		justify-content: center;
		justify-items: start;
	}
}

.ampm-symbol__svg {
	width: var(--ampm-symbol-size, clamp(260px, 42vw, 420px));
	height: auto;
	overflow: visible;
	justify-self: center;
}

/* Hexagono interno, so atmosfera. */
.ampm-symbol__inner {
	fill: none;
	stroke: var(--ampm-line-color);
	stroke-width: 1;
}

/* Cada lateral: uma faixa invisivel mais larga captura o ponteiro, para o
   alvo nao ser uma linha de 3px. */
.ampm-symbol__hit {
	fill: none;
	stroke: transparent;
	stroke-width: 34;
	stroke-linecap: round;
	cursor: pointer;
}

.ampm-symbol__edge {
	fill: none;
	stroke: var(--ampm-symbol-edge, var(--ampm-primary));
	stroke-width: 5;
	stroke-linecap: round;
	opacity: 0.32;
	stroke-dasharray: 112;
	stroke-dashoffset: 112;
	transition: opacity 0.3s var(--ampm-ease), stroke 0.3s var(--ampm-ease),
		stroke-width 0.3s var(--ampm-ease);
}

/* Montagem: cada lado se desenha na sua vez. */
.ampm-symbol__stage.is-built .ampm-symbol__edge {
	animation: ampm-desenha 0.55s var(--ampm-ease) forwards;
	animation-delay: calc(var(--ampm-side, 0) * 0.16s);
}

@keyframes ampm-desenha {
	to {
		stroke-dashoffset: 0;
	}
}

.ampm-symbol__side {
	cursor: pointer;
	outline: none;
}

.ampm-symbol__side:hover .ampm-symbol__edge,
.ampm-symbol__side:focus-visible .ampm-symbol__edge,
.ampm-symbol__side.is-active .ampm-symbol__edge {
	opacity: 1;
	stroke: var(--ampm-symbol-active, var(--ampm-accent));
	stroke-width: 7;
}

.ampm-symbol__side:focus-visible .ampm-symbol__letter {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ampm-symbol__letter {
	font-family: var(--ampm-stack-display);
	font-size: 19px;
	font-weight: 800;
	fill: var(--ampm-fg-soft);
	transition: fill 0.3s var(--ampm-ease);
}

.ampm-symbol__side:hover .ampm-symbol__letter,
.ampm-symbol__side:focus-visible .ampm-symbol__letter,
.ampm-symbol__side.is-active .ampm-symbol__letter {
	fill: var(--ampm-title-color, var(--ampm-ink));
}

/* Nucleo: a execucao fecha a figura - e e o setimo alvo. */
.ampm-symbol__core path {
	fill: var(--ampm-symbol-core, var(--ampm-deep));
	/*
	 * O aceso e um anel, nao a troca do preenchimento: pintar o nucleo com o
	 * ciano da marca deixava o texto branco em 2.67:1. Assim o rotulo continua
	 * sobre o navy e o destaque vem de fora.
	 */
	stroke: transparent;
	stroke-width: 5;
	paint-order: stroke fill;
	opacity: 0;
	transform-origin: 100px 115.5px;
	transform: scale(0.7);
	transition: opacity 0.5s var(--ampm-ease), transform 0.5s var(--ampm-ease),
		stroke 0.3s var(--ampm-ease);
}

.ampm-symbol__core {
	cursor: pointer;
	outline: none;
}

/*
 * O centro e o mostrador: as LETRAS ficam so nas laterais e aqui aparece o
 * nome por extenso do pilar sob o cursor. Em repouso, e a palavra do setimo -
 * "Execution" -, destacada em ciano para nao se confundir com os outros seis.
 */
.ampm-symbol__core text {
	font-family: var(--ampm-stack-display);
	font-weight: 700;
	letter-spacing: -0.015em;
	fill: #ffffff;
	opacity: 0;
	transition: opacity 0.4s var(--ampm-ease) 0.2s, fill 0.3s var(--ampm-ease);
}

.ampm-symbol__core-name {
	font-size: 13px;
}

/* O centro reage como as laterais. */
.ampm-symbol__core:hover path,
.ampm-symbol__core:focus-visible path,
.ampm-symbol__core.is-active path {
	stroke: var(--ampm-symbol-active, var(--ampm-accent));
}

/* Mostrando outro pilar, o centro nao se anuncia como o setimo. */
.ampm-symbol__core.is-mirror:not(:hover):not(:focus-visible) path {
	stroke: transparent;
}

/* Em repouso e no proprio setimo, a palavra do centro vem em ciano. */
.ampm-symbol__core:not(.is-mirror) .ampm-symbol__core-name {
	fill: var(--ampm-cyan-soft, #7fdcff);
}

.ampm-symbol__core:focus-visible .ampm-symbol__core-name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ampm-symbol__stage.is-built .ampm-symbol__core path {
	opacity: 1;
	transform: none;
	transition-delay: 1s;
}

.ampm-symbol__stage.is-built .ampm-symbol__core text {
	opacity: 1;
	transition-delay: 1.15s;
}

.ampm-symbol__stage.is-built .ampm-symbol__core-name {
	opacity: 1;
	transition-delay: 1.15s;
}

/* Legenda: um item por vez, sem pular a altura. */
.ampm-symbol__readout {
	position: relative;
	width: 100%;
	min-height: 8.5rem;
	display: grid;
}

.ampm-symbol__item {
	grid-area: 1 / 1;
	display: grid;
	gap: 0.4rem;
	align-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.35s var(--ampm-ease), transform 0.35s var(--ampm-ease), visibility 0.35s;
}

.ampm-symbol__item.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ampm-symbol__side-num {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ampm-eyebrow-color);
}

.ampm-symbol__item strong {
	font-family: var(--ampm-stack-display);
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.028em;
	color: var(--ampm-title-color, inherit);
}

.ampm-symbol__item > span:last-child {
	font-size: var(--ampm-fs-lead);
	color: var(--ampm-text-color, var(--ampm-fg-soft));
}

.ampm-symbol__item--core strong {
	color: var(--ampm-primary);
}

.ampm-symbol__foot {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.85rem 1.5rem;
}

.ampm-symbol__hint {
	font-size: 0.8125rem;
	color: var(--ampm-fg-soft);
}

.ampm-symbol__replay {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 40px;
	padding: 0.5rem 1rem;
	background: transparent;
	border: 1px solid var(--ampm-line-color);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ampm-fg-soft);
	cursor: pointer;
	transition: color 0.26s var(--ampm-ease), border-color 0.26s var(--ampm-ease);
}

.ampm-symbol__replay:hover {
	color: var(--ampm-primary);
	border-color: var(--ampm-primary);
}

.ampm-symbol__replay .ampm-icon {
	width: 16px;
	height: 16px;
}