/* =============================================================================
   SentryTechLab — folha de estilo única
   -----------------------------------------------------------------------------
   Paleta: design system "Emerald" da Sentry Tech Lab.
   Princípios:
     · Claro dominante. O navy de marca é banda de ancoragem, não o fundo.
     · Emerald é acento — etiquetas, marcadores, botões, foco. Nunca superfície.
     · Separação por linha e espaço, não por sombra e cartão.
     · Raio 4px.
   Tudo o resto vem dos tokens de theme.json — não repetir valores aqui.
   ========================================================================== */

:root {
	--stl-paper: var(--wp--preset--color--stl-paper, #fff);
	--stl-surface: var(--wp--preset--color--stl-surface, #f5f6f7);
	--stl-line: var(--wp--preset--color--stl-line, #e2e5e8);
	--stl-steel: var(--wp--preset--color--stl-steel, #626d78);
	--stl-ink: var(--wp--preset--color--stl-ink, #0a0f14);
	--stl-navy: var(--wp--preset--color--stl-navy, #0d1b2a);
	--stl-navy-deep: var(--wp--preset--color--stl-navy-deep, #0a141f);
	--stl-emerald: var(--wp--preset--color--stl-emerald, #059669);
	--stl-emerald-bright: var(--wp--preset--color--stl-emerald-bright, #34d399);
	--stl-emerald-soft: var(--wp--preset--color--stl-emerald-soft, #d1fae5);

	/* Tons derivados, usados só dentro das bandas navy. */
	--stl-navy-line: #2f4a63;
	--stl-navy-muted: #8aa0b3;
	--stl-navy-text: #f8fafc;

	--stl-radius: 4px;
	--stl-measure: 66ch;
}

/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Nenhuma secção pode provocar scroll horizontal, em nenhum ecrã. */
html,
body {
	overflow-x: clip;
}

/* Foco sempre visível — acessibilidade, não decoração. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--stl-emerald);
	outline-offset: 3px;
	border-radius: 2px;
}

/* -----------------------------------------------------------------------------
   Ritmo de secção
   -------------------------------------------------------------------------- */

.stl-section {
	padding-block: var(--wp--preset--spacing--stl-60, 6rem);

	/*
	 * As secções encostam umas às outras. O ritmo vertical é o padding de
	 * cada uma, nunca uma margem entre elas.
	 *
	 * Sem isto, o gap de blocos do WordPress deixa 32px entre secções
	 * consecutivas. Entre duas secções claras não se nota — o espaço é
	 * branco e o fundo também. Entre a banda de "What comes next" e a do
	 * MES, que são as duas navy, aparecia uma tira branca a meio da
	 * página, e o mesmo acontecia em qualquer transição para uma banda.
	 */
}

/*
 * A classe está repetida de propósito, e não por engano.
 *
 * O Kadence põe `margin-bottom: var(--global-md-spacing)` em
 * `.single-content .wp-block-group` — duas classes, portanto mais
 * específico do que `.stl-section` sozinha, que perdia em silêncio. Repetir
 * a classe iguala a especificidade sem inventar um selector descendente que
 * dependa do wrapper do tema-pai, e a nossa folha carrega depois da dele.
 */
.stl-section.stl-section {
	margin-block: 0;
}

/*
 * Largura e margem lateral do conteúdo de TODAS as secções — as mesmas do
 * cabeçalho e do rodapé do Kadence (--global-content-width 1290px e
 * --global-content-edge-padding 1.5rem), para o texto alinhar com o
 * logótipo em qualquer largura.
 *
 * Porquê (T15, 2026-10-01): o wide-size do Kadence deixa o .alignwide
 * esticar até 1520px sem padding, por isso o texto encostava ao bordo
 * (x=0) na Home a 1440px e em TODAS as páginas no telemóvel. Os
 * !important empatam com os do próprio WordPress nas regras de layout.
 */
.stl-section.stl-section > .alignwide {
	box-sizing: border-box;
	inline-size: 100%;
	max-width: var(--global-content-width, 1290px) !important;
	margin-inline: auto !important;
	padding-inline: var(--global-content-edge-padding, 1.5rem);
}

/*
 * O alignwide do stl_open() tem layout "constrained", que centra cada filho
 * numa coluna de 760px — o eyebrow ficava à esquerda e o título ao centro.
 * Alinhar tudo à esquerda; as medidas de leitura vêm de cada classe (ch).
 */
.stl-section > .alignwide.is-layout-constrained > * {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

.stl-section--tight {
	padding-block: var(--wp--preset--spacing--stl-50, 4rem);
}

.stl-section--surface {
	background-color: var(--stl-surface);
}

/* Linha fina entre secções claras consecutivas. */
.stl-section--ruled {
	border-block-start: 1px solid var(--stl-line);
}

/* Banda de marca — navy fixo. */
.stl-band {
	background-color: var(--stl-navy);
	color: #c2ced9;
}

.stl-band--deep {
	background-color: var(--stl-navy-deep);
}

.stl-band :is(h1, h2, h3, h4) {
	color: var(--stl-navy-text);
}

/* -----------------------------------------------------------------------------
   Fundo técnico das superfícies navy
   -----------------------------------------------------------------------------
   Papel milimétrico, não decoração: duas grelhas sobrepostas — uma fina de
   22px e uma grossa de cinco em cinco — desenhadas a branco com 3% e 6% de
   opacidade sobre o navy. A ideia é a folha de desenho técnico que está em
   cima de qualquer secretária de produção, não um "fundo bonito".

   Porquê `background-image` no próprio elemento e não um `::before`:
   a cor de fundo pinta-se por baixo da imagem de fundo, portanto a grelha
   assenta sobre o navy e todo o conteúdo continua por cima das duas, sem
   pseudo-elemento, sem `position` e sem um único `z-index` novo. Isso
   importa aqui porque a composição de fotografias do hero já usa z-index
   1–3, e qualquer camada extra obrigava a reordenar aquilo.

   Sem imagens e sem movimento, por decisão: o posicionamento é de contenção,
   e um fundo animado trema em portáteis de fábrica — que é onde este site
   vai ser aberto. Também não precisa de `prefers-reduced-motion`, porque não
   há nada a mexer.

   A 3% a grelha desloca o navy de #0d1b2a para cerca de #14212f. O texto é
   #f8fafc: o contraste não se mexe de forma mensurável, e a grelha lê-se de
   perto sem competir com a leitura.
   -------------------------------------------------------------------------- */

:root {
	--stl-grid-cell: 22px;
	--stl-grid-minor: rgb(255 255 255 / 3%);
	--stl-grid-major: rgb(255 255 255 / 6%);
}

.stl-band,
.stl-hero,
.site-footer-wrap {
	/*
	 * Ordem das camadas: a primeira listada fica por cima. As grossas antes
	 * das finas para que os cruzamentos de cinco em cinco se leiam inteiros.
	 */
	background-image:
		repeating-linear-gradient(to right, var(--stl-grid-major) 0 1px, transparent 1px calc(var(--stl-grid-cell) * 5)),
		repeating-linear-gradient(to bottom, var(--stl-grid-major) 0 1px, transparent 1px calc(var(--stl-grid-cell) * 5)),
		repeating-linear-gradient(to right, var(--stl-grid-minor) 0 1px, transparent 1px var(--stl-grid-cell)),
		repeating-linear-gradient(to bottom, var(--stl-grid-minor) 0 1px, transparent 1px var(--stl-grid-cell));
}

/* Em ecrãs pequenos a malha de 22px fica apertada e passa a ler-se como
   ruído. Sobe para 28px, e a grelha grossa acompanha. */
@media (max-width: 782px) {

	:root {
		--stl-grid-cell: 28px;
	}
}

/* No modo de alto contraste do sistema o utilizador pediu superfícies lisas.
   A grelha sai; a cor de fundo fica. */
@media (forced-colors: active) {

	.stl-band,
	.stl-hero,
	.site-footer-wrap {
		background-image: none;
	}
}

/* -----------------------------------------------------------------------------
   Eyebrow — a etiqueta técnica acima do título. Dá o tom de engenharia.
   -------------------------------------------------------------------------- */

.stl-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-block-end: 1.15rem;
	font-family: var(--wp--preset--font-family--stl-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--stl-emerald);
}

.stl-eyebrow::before {
	content: "";
	inline-size: 1.75rem;
	block-size: 1px;
	background: currentColor;
	flex: none;
}

.stl-band .stl-eyebrow {
	color: var(--stl-emerald-bright);
}

/* Título de secção com medida controlada. */
.stl-title {
	max-inline-size: 21ch;
	text-wrap: balance;
}

.stl-lead {
	max-inline-size: var(--stl-measure);
	font-size: var(--wp--preset--font-size--stl-lead);
	line-height: 1.6;
	color: var(--stl-steel);
}

.stl-band .stl-lead {
	color: var(--stl-navy-muted);
}

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.stl-hero {
	background-color: var(--stl-navy-deep);
	color: #b3c0cc;
}

.stl-hero :is(h1, h2) {
	max-inline-size: 15ch;
	color: var(--stl-navy-text);
}

/* Segunda linha da headline em tom calmo: cria hierarquia sem mudar o corpo. */
.stl-hero .stl-dim {
	display: block;
	color: #7d8fa1;
}

.stl-hero__sub {
	max-inline-size: 52ch;
	font-size: var(--wp--preset--font-size--stl-lead);
	line-height: 1.6;
	color: #b3c0cc;
}

/* A imagem do hero: recorta sem deformar, seja qual for o rácio carregado. */
.stl-hero figure.wp-block-image,
.stl-hero figure.wp-block-image img {
	block-size: 100%;
	margin: 0;
}

.stl-hero figure.wp-block-image img {
	inline-size: 100%;
	object-fit: cover;
	border-radius: var(--stl-radius);
	min-block-size: 22rem;
}

/* -----------------------------------------------------------------------------
   Composição de três fotografias do hero
   -----------------------------------------------------------------------------
   Uma grelha de 12×10 com as três imagens em áreas que se cruzam de propósito:
   cada uma tapa um canto da anterior e deixa a descoberto a parte que
   interessa. Grelha e não position:absolute porque as áreas sobrepostas ficam
   declaradas em números legíveis — mudar o enquadramento é mudar uma linha —
   e porque reflui sozinha quando a coluna encolhe.

   A ordem é a da leitura: a nave, depois a linha, depois a peça.
   -------------------------------------------------------------------------- */

.stl-hero__stack {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(10, 1fr);
	/*
	 * Mais larga do que alta, e de propósito: com a composição em retrato a
	 * terceira fotografia caía abaixo da dobra e o texto ficava a boiar no
	 * meio de uma coluna vazia. Assim o hero inteiro cabe num ecrã.
	 */
	aspect-ratio: 6 / 5;
	margin: 0;
}

/* Anula o mínimo da imagem única: aqui quem manda é a célula da grelha. */
.stl-hero .stl-hero__stack figure.wp-block-image {
	block-size: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: var(--stl-radius);
	/* Um fio claro separa cada fotografia da que está por baixo. */
	box-shadow:
		0 0 0 1px rgb(255 255 255 / 12%),
		0 1.25rem 2.5rem -0.75rem rgb(0 0 0 / 55%);
}

.stl-hero .stl-hero__stack figure.wp-block-image img {
	block-size: 100%;
	inline-size: 100%;
	min-block-size: 0;
	object-fit: cover;
	border-radius: inherit;
}

/*
 * As áreas seguem o rácio de cada fotografia, para o recorte não amputar o
 * assunto: a nave e a linha de prensas são panorâmicas, o corte da peça é
 * quase quadrado.
 */

.stl-hero__shot--floor {
	grid-area: 1 / 1 / 7 / 11;   /* 10×6 células ≈ 16:9 */
	z-index: 1;
}

.stl-hero__shot--line {
	grid-area: 5 / 6 / 9 / 13;   /* 7×4 ≈ 16:9 */
	z-index: 2;
}

/*
 * Encostada à esquerda, alinhada com a nave: assim tapa só o canto das
 * prensas em vez de lhes comer a fila toda, e não sobra aquela nesga da
 * fotografia de baixo a espreitar pela esquerda.
 */
.stl-hero__shot--detail {
	grid-area: 6 / 1 / 11 / 7;   /* 6×5, quase quadrado */
	z-index: 3;
}

/*
 * Em ecrãs estreitos a coluna passa a ter a largura toda e a composição fica
 * alta demais. Menos altura e menos desencontro: continua a ler-se como três
 * imagens sobrepostas, sem empurrar os botões para fora do ecrã.
 */
@media (max-width: 1024px) {

	.stl-hero__stack {
		aspect-ratio: 16 / 11;
	}

	.stl-hero__shot--floor {
		grid-area: 1 / 1 / 7 / 10;
	}

	.stl-hero__shot--line {
		grid-area: 4 / 6 / 8 / 13;
	}

	.stl-hero__shot--detail {
		grid-area: 5 / 2 / 11 / 8;
	}
}

/* -----------------------------------------------------------------------------
   Botões — o núcleo vem de theme.json; aqui só a variante fantasma.
   -------------------------------------------------------------------------- */

.wp-block-button.stl-btn--ghost .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--stl-line);
	color: var(--stl-ink);
}

.wp-block-button.stl-btn--ghost .wp-block-button__link:hover {
	background-color: var(--stl-surface);
	border-color: var(--stl-steel);
	color: var(--stl-ink);
}

.stl-band .wp-block-button.stl-btn--ghost .wp-block-button__link,
.stl-hero .wp-block-button.stl-btn--ghost .wp-block-button__link {
	border-color: var(--stl-navy-line);
	color: var(--stl-navy-text);
}

.stl-band .wp-block-button.stl-btn--ghost .wp-block-button__link:hover,
.stl-hero .wp-block-button.stl-btn--ghost .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.07);
	border-color: var(--stl-navy-muted);
}

/* -----------------------------------------------------------------------------
   Problemas — lista separada por linhas.
   Sem numeração: são situações paralelas, não uma sequência. Numerá-las seria
   dar-lhes uma ordem que não existe.
   -------------------------------------------------------------------------- */

.stl-problems {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
	column-gap: 3rem;
	border-block-start: 1px solid var(--stl-line);
}

.stl-problems > * {
	margin-block: 0;
	padding-block: 1.6rem 1.75rem;
	border-block-end: 1px solid var(--stl-line);
	font-size: var(--wp--preset--font-size--stl-base);
	line-height: 1.6;
	color: var(--stl-ink);
}

.stl-problems > *::before {
	content: "";
	display: block;
	inline-size: 1.25rem;
	block-size: 2px;
	margin-block-end: 0.9rem;
	background: var(--stl-emerald);
}

/* -----------------------------------------------------------------------------
   Process Flow — Observe → Map → Diagnose → Improve → Implement → Measure
   Aqui a numeração é legítima: é uma sequência real, e a ordem importa.
   -------------------------------------------------------------------------- */

.stl-flow {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0 1.4rem;
	counter-reset: stl-step;
}

.stl-flow > * {
	position: relative;
	margin-block: 0;
	padding-block-start: 2.6rem;
	border-block-start: 2px solid var(--stl-navy-line);
	counter-increment: stl-step;
}

.stl-flow > *::before {
	content: "";
	position: absolute;
	inset-block-start: -2px;
	inset-inline-start: 0;
	inline-size: 2.25rem;
	block-size: 2px;
	background: var(--stl-emerald-bright);
}

.stl-flow > *::after {
	content: "0" counter(stl-step);
	position: absolute;
	inset-block-start: 1.05rem;
	inset-inline-start: 0;
	font-family: var(--wp--preset--font-family--stl-mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	color: var(--stl-emerald-bright);
}

.stl-flow__name {
	margin: 0 0 0.45rem;
	font-size: 1.0625rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	color: var(--stl-navy-text);
}

.stl-flow__desc {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--stl-navy-muted);
}

/* -----------------------------------------------------------------------------
   Listas de verificação / capacidades
   -------------------------------------------------------------------------- */

.stl-checks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
	gap: 0 2.5rem;
	padding: 0;
	list-style: none;
}

.stl-checks li {
	padding-block: 0.7rem;
	border-block-end: 1px solid var(--stl-line);
	font-size: var(--wp--preset--font-size--stl-sm);
}

.stl-band .stl-checks li {
	border-block-end-color: var(--stl-navy-line);
	color: #c2ced9;
}

/* -----------------------------------------------------------------------------
   ScreenshotFrame — moldura discreta para as imagens do FabVitals.
   Sem barra de endereço falsa: os três pontos chegam para dar contexto.
   -------------------------------------------------------------------------- */

.stl-shot {
	border: 1px solid var(--stl-line);
	border-radius: var(--stl-radius);
	background: var(--stl-paper);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--stl-raised);
}

.stl-band .stl-shot {
	border-color: var(--stl-navy-line);
	background: var(--stl-navy);
	box-shadow: none;
}

.stl-shot__bar {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 0.85rem;
	background: var(--stl-surface);
	border-block-end: 1px solid var(--stl-line);
	font-family: var(--wp--preset--font-family--stl-mono);
	font-size: 0.68rem;
	color: var(--stl-steel);
}

.stl-band .stl-shot__bar {
	background: #14222f;
	border-block-end-color: var(--stl-navy-line);
	color: var(--stl-navy-muted);
}

.stl-shot__bar::before {
	content: "";
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.45;
	box-shadow: 0.75rem 0 0 currentColor, 1.5rem 0 0 currentColor;
	margin-inline-end: 2.1rem;
	flex: none;
}

.stl-shot figure,
.stl-shot img {
	margin: 0;
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.stl-shot-caption {
	margin-block-start: 0.8rem;
	font-size: 0.85rem;
	color: var(--stl-steel);
}

.stl-band .stl-shot-caption {
	color: var(--stl-navy-muted);
}

/* -----------------------------------------------------------------------------
   Integração — ERP → FabVitals → Shop Floor → IoT → Analytics
   -------------------------------------------------------------------------- */

.stl-integration {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
}

.stl-node {
	flex: 1 1 9.5rem;
	min-inline-size: 9.5rem;
	margin-block: 0;
	padding: 1.4rem 1.1rem;
	border: 1px solid var(--stl-line);
	border-radius: var(--stl-radius);
	background: var(--stl-paper);
	text-align: center;
	font-weight: 650;
	font-size: var(--wp--preset--font-size--stl-sm);
}

.stl-node--primary {
	border-color: var(--stl-emerald);
	background: var(--stl-emerald-soft);
	color: #064e3b;
}

.stl-node small {
	display: block;
	margin-block-start: 0.3rem;
	font-family: var(--wp--preset--font-family--stl-mono);
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stl-steel);
}

.stl-node--primary small {
	color: #047857;
}

.stl-arrow {
	flex: none;
	align-self: center;
	margin-block: 0;
	padding-inline: 0.7rem;
	color: var(--stl-steel);
}

/* -----------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.stl-flow {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 2.25rem;
	}
}

@media (max-width: 781px) {
	.stl-section {
		padding-block: var(--wp--preset--spacing--stl-50, 4rem);
	}

	.stl-flow {
		grid-template-columns: repeat(2, 1fr);
	}

	.stl-hero figure.wp-block-image img {
		min-block-size: 14rem;
	}

	/* As setas do diagrama passam a apontar para baixo quando empilha. */
	.stl-integration {
		flex-direction: column;
	}

	.stl-arrow {
		align-self: flex-start;
		padding: 0.35rem 0 0.35rem 1.5rem;
		rotate: 90deg;
	}
}

@media (max-width: 480px) {
	.stl-flow {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------------------------
   Movimento — discreto, e desligado para quem o pediu ao sistema.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.stl-reveal {
		animation: stl-fade-up 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
		animation-timeline: view();
		animation-range: entry 0% entry 38%;
	}

	@keyframes stl-fade-up {
		from {
			opacity: 0;
			translate: 0 12px;
		}
		to {
			opacity: 1;
			translate: 0 0;
		}
	}
}

/* -----------------------------------------------------------------------------
   PÁGINAS INTERIORES
   -------------------------------------------------------------------------- */

/* Hero de página interior: mesma banda navy do hero da Home, mas mais baixo e
   sem fotografia — o peso visual pertence à Home. */
.stl-hero--page {
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.stl-hero--page h1 {
	max-inline-size: 24ch;
	font-size: clamp(2.1rem, 4.2vw, 3.1rem);
}

.stl-hero--page .stl-hero__sub {
	max-inline-size: 58ch;
	margin-block-start: 1.4rem;
}

/* Parágrafo de corpo. Medida de leitura curta é o que distingue um texto que
   se lê de um texto que se salta. */
.stl-prose {
	max-inline-size: 68ch;
	margin-block-start: 1.35rem;
	font-size: var(--wp--preset--font-size--stl-base);
	line-height: 1.7;
	color: var(--stl-ink);
}

.stl-band .stl-prose {
	color: #c2ced9;
}

/* -----------------------------------------------------------------------------
   stl-defs — grelha de termo + definição.
   Duas colunas, separadas por linha. Sem cartões, sem sombra.
   -------------------------------------------------------------------------- */

.stl-defs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	column-gap: 3.5rem;
	border-block-start: 1px solid var(--stl-line);
}

.stl-band .stl-defs {
	border-block-start-color: var(--stl-navy-line);
}

.stl-defs > * {
	padding-block: 1.7rem 1.9rem;
	border-block-end: 1px solid var(--stl-line);
}

.stl-band .stl-defs > * {
	border-block-end-color: var(--stl-navy-line);
}

.stl-def__t {
	margin: 0 0 0.55rem;
	font-size: 1.0625rem;
	font-weight: 650;
	letter-spacing: -0.012em;
	line-height: 1.35;
	color: var(--stl-ink);
	text-wrap: balance;
}

.stl-band .stl-def__t {
	color: var(--stl-navy-text);
}

.stl-def__d {
	margin: 0;
	max-inline-size: 46ch;
	font-size: var(--wp--preset--font-size--stl-sm);
	line-height: 1.62;
	color: var(--stl-steel);
}

.stl-band .stl-def__d {
	color: var(--stl-navy-muted);
}

/* Três colunas certas — benefícios e indústrias da página de produto. O
   auto-fit das duas colunas deixava o terceiro item sozinho numa linha. */
.stl-defs--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 2.5rem;
	align-items: stretch;
}

/* Classe dupla: o Kadence dá margin-bottom a `.single-content .wp-block-group`
   e as colunas ficavam com alturas diferentes. */
.stl-defs.stl-defs--three > * {
	margin-block: 0;
}

@media (max-width: 900px) {
	.stl-defs--three {
		grid-template-columns: 1fr;
	}
}

/* Duas colunas fixas: 4 itens fazem 2×2 e 2 itens uma linha, sem órfãos. */
.stl-defs--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
}

.stl-defs.stl-defs--two > * {
	margin-block: 0;
}

@media (max-width: 700px) {
	.stl-defs--two {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------------------------
   PÁGINA DE PRODUTO (content/_product.php)
   -------------------------------------------------------------------------- */


/* Herói: problema → resultado, lado a lado, por baixo do subtítulo. */
.stl-shift {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 2.5rem;
	max-inline-size: 60rem;
	margin-block-start: var(--wp--preset--spacing--stl-40, 2.5rem);
	border-block-start: 1px solid var(--stl-navy-line);
}

.stl-shift__side {
	padding-block-start: 1.3rem;
}

.stl-shift__side--after {
	border-block-start: 2px solid var(--stl-emerald-bright);
	margin-block-start: -1px;
}

.stl-shift__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--stl-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stl-navy-muted);
}

.stl-shift__side--after .stl-shift__label {
	color: var(--stl-emerald-bright);
}

.stl-shift__text {
	margin: 0.5rem 0 0;
	max-inline-size: 44ch;
	line-height: 1.6;
	color: #c2ced9;
}

.stl-shift__side--after .stl-shift__text {
	color: var(--stl-navy-text);
}

@media (max-width: 781px) {
	.stl-shift {
		grid-template-columns: 1fr;
		border-block-start: 0;
	}

	.stl-shift__side {
		border-block-start: 1px solid var(--stl-navy-line);
	}

	.stl-shift__side--after {
		border-block-start: 2px solid var(--stl-emerald-bright);
		margin-block-start: 1.3rem;
	}
}

/* Capturas: um bloco por grupo, separado por linha. */
.stl-screens-group {
	margin-block-start: var(--wp--preset--spacing--stl-50, 4rem);
	padding-block-start: var(--wp--preset--spacing--stl-40, 2.5rem);
	border-block-start: 1px solid var(--stl-line);
}

.stl-screens-group > h3 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 650;
	letter-spacing: -0.012em;
}

.stl-screens-group > .stl-prose {
	margin-block-start: 0.6rem;
	color: var(--stl-steel);
}

/* Ecrãs de computador: duas colunas; com número ímpar, o primeiro vai à
   largura toda, para a grelha nunca acabar com um buraco. */
.stl-screens {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 2rem;
}

.stl-screens > :first-child:nth-last-child(odd) {
	grid-column: 1 / -1;
}

/* Telemóveis: colunas estreitas, alinhadas à esquerda — um telemóvel à
   largura de meia página seria mais alto do que o ecrã de quem o vê. */
.stl-screens--phone {
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 13rem));
	justify-content: start;
}

.stl-screens--phone > :first-child:nth-last-child(odd) {
	grid-column: auto;
}

.stl-screen.wp-block-image {
	margin: 0;
}

/* A nota "ambiente de demonstração", depois do último grupo. */
.stl-screens-group + .stl-meta {
	margin-block-start: var(--wp--preset--spacing--stl-40, 2.5rem);
}

.stl-screen img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top left;
	border: 1px solid var(--stl-line);
	border-radius: var(--stl-radius);
	background: var(--stl-paper);
	box-shadow: var(--wp--preset--shadow--stl-raised);
}

/* Capturas na proporção delas (conversas com o assistente): inteiras, sem
   recorte; a grelha alinha-as pelo topo, já que as alturas diferem. */
.stl-screens:has(.stl-screen--natural) {
	align-items: start;
}

.stl-screen--natural img {
	aspect-ratio: auto;
	object-fit: contain;
	background: #fff;
}

.stl-screens--phone .stl-screen img {
	aspect-ratio: 780 / 1688;
	border-radius: 14px;
}

.stl-screen figcaption.wp-element-caption {
	margin: 0.7rem 0 0;
	text-align: start;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--stl-steel);
}

@media (max-width: 781px) {
	.stl-screens {
		grid-template-columns: 1fr;
		gap: 1.6rem;
	}

	.stl-screens--phone {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -----------------------------------------------------------------------------
   stl-ladder — sequência numerada vertical.
   Usada onde a ordem é informação (como corre um trabalho). O número fica
   numa coluna própria, ligada por uma linha contínua: lê-se como percurso.
   -------------------------------------------------------------------------- */

.stl-ladder {
	counter-reset: stl-rung;
	display: grid;
	gap: 0;
}

.stl-ladder > * {
	position: relative;
	display: grid;
	grid-template-columns: 3.25rem 1fr;
	gap: 0 1.35rem;
	padding-block: 1.5rem;
	counter-increment: stl-rung;
}

/* A linha vertical que liga os degraus, interrompida no último. */
.stl-ladder > *::before {
	content: "";
	position: absolute;
	inset-block: 2.9rem 0;
	inset-inline-start: 0.72rem;
	inline-size: 1px;
	background: var(--stl-line);
}

.stl-band .stl-ladder > *::before {
	background: var(--stl-navy-line);
}

.stl-ladder > *:last-child::before {
	display: none;
}

/* O número, em círculo vazado. */
.stl-ladder > *::after {
	content: "0" counter(stl-rung);
	position: absolute;
	inset-block-start: 1.4rem;
	inset-inline-start: 0;
	display: grid;
	place-content: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	font-family: var(--wp--preset--font-family--stl-mono);
	font-size: 0.66rem;
	letter-spacing: 0.02em;
	color: var(--stl-emerald);
	background: var(--stl-paper);
	border: 1px solid var(--stl-line);
	border-radius: 50%;
}

.stl-section--surface .stl-ladder > *::after {
	background: var(--stl-surface);
}

.stl-band .stl-ladder > *::after {
	color: var(--stl-emerald-bright);
	background: var(--stl-navy);
	border-color: var(--stl-navy-line);
}

.stl-band--deep .stl-ladder > *::after {
	background: var(--stl-navy-deep);
}

.stl-ladder__t {
	grid-column: 2;
	margin: 0 0 0.4rem;
	font-size: 1.0625rem;
	font-weight: 650;
	letter-spacing: -0.012em;
	color: var(--stl-ink);
}

.stl-band .stl-ladder__t {
	color: var(--stl-navy-text);
}

.stl-ladder__d {
	grid-column: 2;
	margin: 0;
	max-inline-size: 58ch;
	font-size: var(--wp--preset--font-size--stl-sm);
	line-height: 1.62;
	color: var(--stl-steel);
}

.stl-band .stl-ladder__d {
	color: var(--stl-navy-muted);
}

/* -----------------------------------------------------------------------------
   stl-note — ressalva ou aviso.
   Barra de acento à esquerda, sem ícone e sem cor de alerta: é uma nota
   editorial, não um erro.
   -------------------------------------------------------------------------- */

.stl-note {
	max-inline-size: 62ch;
	margin-block-start: 1.75rem;
	padding: 1.15rem 1.35rem;
	border-inline-start: 2px solid var(--stl-emerald);
	background: var(--stl-surface);
	font-size: var(--wp--preset--font-size--stl-sm);
	line-height: 1.62;
	color: var(--stl-steel);
}

.stl-note strong {
	color: var(--stl-ink);
	font-weight: 650;
}

.stl-section--surface .stl-note {
	background: var(--stl-paper);
	border-inline-start-color: var(--stl-emerald);
}

.stl-band .stl-note {
	background: rgba(255, 255, 255, 0.045);
	border-inline-start-color: var(--stl-emerald-bright);
	color: #b6c2ce;
}

.stl-band .stl-note strong {
	color: var(--stl-navy-text);
}

@media (max-width: 600px) {
	.stl-ladder > * {
		grid-template-columns: 2.5rem 1fr;
		gap: 0 1rem;
	}
}

/* -----------------------------------------------------------------------------
   stl-legal — Privacy e Terms.
   Documento para ler, não página para varrer: medida estreita, hierarquia
   clara, e espaço generoso acima dos títulos para dar respiração às secções.
   -------------------------------------------------------------------------- */

.stl-legal {
	max-inline-size: 68ch;
}

.stl-legal :is(h2, h3) {
	text-wrap: balance;
}

.stl-legal h2 {
	margin-block: 3rem 0.9rem;
	font-size: 1.375rem;
	letter-spacing: -0.015em;
}

.stl-legal h3 {
	margin-block: 2rem 0.65rem;
	font-size: 1.0625rem;
	font-weight: 650;
}

.stl-legal > :first-child {
	margin-block-start: 0;
}

.stl-legal p {
	margin-block-start: 1rem;
	font-size: var(--wp--preset--font-size--stl-sm);
	line-height: 1.7;
	color: var(--stl-ink);
}

.stl-legal ul,
.stl-legal ol {
	margin-block-start: 1rem;
	padding-inline-start: 1.35rem;
}

.stl-legal li {
	margin-block-end: 0.55rem;
	font-size: var(--wp--preset--font-size--stl-sm);
	line-height: 1.65;
	color: var(--stl-steel);
}

.stl-legal li::marker {
	color: var(--stl-emerald);
}

/* Os placeholders [LEGAL COMPANY NAME] etc. ficam visualmente marcados, para
   ninguém publicar a página achando que está pronta. */
.stl-legal code,
.stl-note code {
	padding: 0.1em 0.4em;
	border-radius: 2px;
	background: var(--stl-emerald-soft);
	color: #064e3b;
	font-family: var(--wp--preset--font-family--stl-mono);
	font-size: 0.86em;
}

/* -----------------------------------------------------------------------------
   stl-todo — nota de trabalho, só visível a editores com sessão iniciada.
   Deliberadamente feia: tem de se distinguir do conteúdo real num relance,
   para ninguém a confundir com texto publicado.
   -------------------------------------------------------------------------- */

.stl-todo {
	max-inline-size: 68ch;
	margin-block-start: 1.75rem;
	padding: 1.15rem 1.35rem;
	border: 1px dashed #b45309;
	border-radius: var(--stl-radius);
	background: #fffbeb;
	font-size: var(--wp--preset--font-size--stl-sm);
	line-height: 1.62;
	color: #52412a;
}

.stl-todo__tag {
	display: block;
	margin-block-end: 0.6rem;
	font-family: var(--wp--preset--font-family--stl-mono);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #b45309;
}

.stl-todo strong {
	color: #3f3120;
}

.stl-todo code {
	background: #fef3c7;
	color: #78350f;
}

/* Linha de metadados: "Last updated", versão do documento. */
.stl-meta {
	margin-block-start: 0.9rem;
	font-family: var(--wp--preset--font-family--stl-mono);
	font-size: 0.72rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--stl-steel);
}

.stl-band .stl-meta,
.stl-hero .stl-meta {
	color: var(--stl-navy-muted);
}

/* -----------------------------------------------------------------------------
   stl-form — formulário de contacto (blocos Otter).
   Alvos de toque ≥44px porque isto também é aberto em telemóvel no chão de
   fábrica. Foco emerald visível, como no resto do site.
   -------------------------------------------------------------------------- */

.stl-form {
	max-inline-size: 44rem;
}

/* Duas colunas nos campos curtos, uma só nos campos longos. */
.stl-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.15rem 1.5rem;
}

.stl-form__row {
	margin: 0 0 1.15rem;
	display: flex;
	flex-direction: column;
}

.stl-form__grid .stl-form__row {
	margin: 0;
}

.stl-form__req {
	margin-inline-start: 0.15rem;
	color: var(--stl-emerald);
}

.stl-form__hint {
	margin-inline-start: 0.4rem;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--stl-steel);
}

.stl-form__help {
	margin-block-end: 0.55rem;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--stl-steel);
	max-inline-size: 58ch;
}

/* Honeypot: fora do ecrã, nunca display:none — há bots que ignoram campos
   escondidos por display e preenchem os que estão só deslocados. */
.stl-form__hp {
	position: absolute;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

/* Turnstile: só existe quando as chaves estiverem gravadas. A margem
   acompanha o resto das linhas do formulário. */
.stl-form__captcha {
	margin-block: 1.6rem 0;
	min-block-size: 65px;
}

.stl-form__consent {
	margin-block: 1.6rem 0;
}

.stl-form__actions {
	margin-block-start: 1.9rem;
}

/* Resultado da submissão. */
.stl-form__result {
	margin-block-end: 1.75rem;
	padding: 1.05rem 1.25rem;
	border-inline-start: 2px solid var(--stl-emerald);
	background: var(--stl-paper);
	font-size: var(--wp--preset--font-size--stl-sm);
	line-height: 1.6;
	color: var(--stl-steel);
}

.stl-form__result strong {
	display: block;
	margin-block-end: 0.25rem;
	color: var(--stl-ink);
	font-weight: 650;
}

.stl-form__result--error {
	border-inline-start-color: #dc2626;
	color: var(--stl-ink);
}

.stl-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea) {
	inline-size: 100%;
	min-block-size: 2.75rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--stl-line);
	border-radius: var(--stl-radius);
	background: var(--stl-paper);
	color: var(--stl-ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--stl-base);
	line-height: 1.5;
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.stl-form textarea {
	min-block-size: 8.5rem;
	resize: vertical;
}

.stl-form :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--stl-emerald);
	box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.16);
}

.stl-form :is(input, select, textarea)::placeholder {
	color: #97a1ab;
}

.stl-form label,
.stl-form .otter-form-input-label__label {
	display: block;
	margin-block-end: 0.42rem;
	font-size: var(--wp--preset--font-size--stl-sm);
	font-weight: 550;
	color: var(--stl-ink);
}

/* Asterisco de obrigatório em emerald, não em vermelho: não é um erro. */
.stl-form .otter-form-input-label__label span,
.stl-form .required {
	color: var(--stl-emerald);
}

/* Checkbox de consentimento: alvo grande e texto legível ao lado. */
.stl-form .otter-form-multiple-choice-inputs label,
.stl-form .wp-block-themeisle-blocks-form-multiple-choice label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	min-block-size: 2.75rem;
	font-weight: 400;
	color: var(--stl-steel);
	line-height: 1.5;
}

.stl-form input[type="checkbox"],
.stl-form input[type="radio"] {
	inline-size: 1.05rem;
	block-size: 1.05rem;
	margin-block-start: 0.15rem;
	accent-color: var(--stl-emerald);
	flex: none;
}

/* Botão de submissão: igual aos restantes botões do site. */
.stl-form button[type="submit"],
.stl-form .wp-block-button__link {
	min-block-size: 2.9rem;
	padding: 0.85rem 1.7rem;
	border: 1px solid var(--stl-emerald);
	border-radius: var(--stl-radius);
	background: var(--stl-emerald);
	color: #fff;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--stl-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.14s ease, border-color 0.14s ease;
}

.stl-form button[type="submit"]:hover,
.stl-form .wp-block-button__link:hover {
	background: #047857;
	border-color: #047857;
}

/* Mensagens de resposta do formulário. */
.stl-form .otter-form-server-message {
	margin-block-start: 1rem;
	padding: 0.8rem 1rem;
	border-inline-start: 2px solid var(--stl-emerald);
	background: var(--stl-surface);
	font-size: var(--wp--preset--font-size--stl-sm);
}

/* -----------------------------------------------------------------------------
   HEADER
   O Kadence monta a estrutura no Customizer; a aparência vive aqui, para
   haver um só sítio onde procurar estilos.
   -------------------------------------------------------------------------- */

.site-header-wrap {
	background-color: var(--stl-paper);
	border-block-end: 1px solid var(--stl-line);
}

.site-branding a {
	text-decoration: none;
	font-weight: 680;
	letter-spacing: -0.02em;
	color: var(--stl-ink);
}

/* Marca + nome, lado a lado.
   O Kadence limita o logo a max-width:200px, mas a nossa marca é quadrada e
   a 200px ocupava o header todo. Aqui manda a ALTURA, que é a dimensão que
   interessa num header. */
.site-branding a.brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.site-branding a.brand img.custom-logo {
	inline-size: auto;
	block-size: 2.5rem;
	max-inline-size: none;
}

.site-branding .site-title-wrap {
	display: flex;
	align-items: center;
}

.site-branding p.site-title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 680;
	letter-spacing: -0.022em;
	line-height: 1.1;
	color: var(--stl-ink);
	white-space: nowrap;
}

/* O footer é navy: a marca escura desapareceria. Inverte-se por filtro, o
   que evita manter um segundo ficheiro de logótipo só para o escuro. */
.site-footer .custom-logo {
	filter: invert(1) hue-rotate(180deg);
}

@media (max-width: 480px) {
	.site-branding a.brand img.custom-logo {
		block-size: 2.1rem;
	}

	.site-branding p.site-title {
		font-size: 0.9375rem;
	}
}

/* Navegação: sem sublinhado, acento no estado activo e no hover. */
.header-navigation .header-menu-container > ul > li > a {
	font-size: var(--wp--preset--font-size--stl-sm);
	font-weight: 550;
	letter-spacing: -0.005em;
	color: var(--stl-ink);
	text-decoration: none;
}

.header-navigation .header-menu-container > ul > li > a:hover,
.header-navigation .header-menu-container > ul > li.current-menu-item > a,
.header-navigation .header-menu-container > ul > li.current-menu-ancestor > a {
	color: var(--stl-emerald);
}

/* Submenus: painel branco com borda.
   O Kadence pinta o dropdown com --global-palette3, que é quase preto. Com o
   texto também escuro, o menu ficava ilegível. O selector inclui .site-header
   para ganhar especificidade ao CSS que o Kadence injecta inline no <head>. */
.site-header .header-navigation .header-menu-container ul ul.sub-menu,
.site-header .header-navigation .header-menu-container ul ul.submenu {
	background-color: var(--stl-paper);
	border: 1px solid var(--stl-line);
	border-radius: var(--stl-radius);
	box-shadow: var(--wp--preset--shadow--stl-raised);
	padding-block: 0.35rem;
}

.site-header .header-navigation .header-menu-container ul ul.sub-menu li a,
.site-header .header-navigation .header-menu-container ul ul.submenu li a {
	font-size: var(--wp--preset--font-size--stl-sm);
	color: var(--stl-ink);
	background-color: transparent;
	text-decoration: none;
}

.site-header .header-navigation .header-menu-container ul ul.sub-menu li a:hover,
.site-header .header-navigation .header-menu-container ul ul.submenu li a:hover,
.site-header .header-navigation .header-menu-container ul ul.sub-menu li.current-menu-item > a {
	color: var(--stl-emerald);
	background-color: var(--stl-surface);
}

/* Largura e ritmo do dropdown. O Kadence fixa os links a 200px com 17px de
   padding: com os seis produtos de Soluções os nomes partiam em três linhas
   e o painel passava dos 500px de altura. */
.site-header .header-navigation .header-menu-container ul ul.sub-menu li a {
	width: 17rem;
	padding-block: 0.6rem;
	line-height: 1.4;
}

/* Navegação mobile: o painel do Kadence também herda o fundo escuro. */
.mobile-navigation ul li a {
	color: var(--stl-ink);
}

.mobile-navigation ul li a:hover {
	color: var(--stl-emerald);
}

#mobile-drawer .drawer-inner {
	background-color: var(--stl-paper);
}

/* Setas dos submenus no drawer: o Kadence pinta-as quase brancas (a cor do
   drawer escuro original) e sobre o painel branco ficavam invisíveis. */
#mobile-drawer .drawer-sub-toggle {
	color: var(--stl-steel);
}

/* Selector de idioma do Polylang, dentro do menu.
   O nome do idioma por extenso saiu do cabeçalho: fica o globo e o código de
   duas letras, montados no stl_language_switcher_title(). O nome inteiro
   continua lá para leitores de ecrã, em .screen-reader-text. */
.pll-parent-menu-item > a,
.pll-parent-menu-item .sub-menu .lang-item a {
	font-family: var(--wp--preset--font-family--stl-mono);
	font-size: 0.72rem !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pll-parent-menu-item > a {
	color: var(--stl-steel) !important;
}

.pll-parent-menu-item > a:hover {
	color: var(--stl-emerald) !important;
}

/* Globo e código na mesma linha de base. */
.stl-lang {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

/* Em em, não em px: o ícone acompanha o tamanho do código ao lado. */
.stl-lang__globe {
	width: 1.15em;
	height: 1.15em;
	flex: none;
}

/* A lista tem duas letras por linha. O Kadence fixa os itens de submenu em
   200px — largura feita para nomes de páginas — e é isso, e não o <ul>, que
   estica o painel: daí o width auto no <a>. */
.site-header .pll-parent-menu-item .sub-menu {
	min-width: 0;
	width: max-content;
}

.site-header .header-navigation .header-menu-container ul ul.sub-menu .lang-item > a {
	width: auto;
	min-width: 3.5rem;
	padding-inline: 1.1rem;
}

/* O idioma em curso fica marcado: é a única pista de qual está activo
   depois de o nome por extenso ter saído da lista. */
.site-header .pll-parent-menu-item .sub-menu .lang-item.current-lang > a {
	color: var(--stl-emerald);
	font-weight: 600;
}

/* Botão do header. */
.header-button-inner-wrap .header-button {
	border-radius: var(--stl-radius);
	background-color: var(--stl-emerald);
	border: 1px solid var(--stl-emerald);
	color: #fff;
	font-size: var(--wp--preset--font-size--stl-sm);
	font-weight: 600;
	text-decoration: none;
	padding: 0.65rem 1.25rem;
}

.header-button-inner-wrap .header-button:hover {
	background-color: #047857;
	border-color: #047857;
	color: #fff;
}

/* -----------------------------------------------------------------------------
   FOOTER
   Navy mais profundo que a banda do CTA, para funcionar como base da página.
   -------------------------------------------------------------------------- */

.site-footer,
.site-footer-wrap {
	background-color: var(--stl-navy-deep);
	color: var(--stl-navy-muted);
}

.site-footer .widget-title,
.site-footer h3 {
	font-family: var(--wp--preset--font-family--stl-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--stl-emerald-bright);
	margin-block-end: 1rem;
}

.site-footer p {
	font-size: var(--wp--preset--font-size--stl-sm);
	line-height: 1.6;
	color: var(--stl-navy-muted);
}

.site-footer .widget_nav_menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .widget_nav_menu li {
	margin-block-end: 0.55rem;
}

.site-footer a {
	color: #c2ced9;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--stl-sm);
}

.site-footer a:hover {
	color: var(--stl-emerald-bright);
}

/* Barra inferior separada por uma linha, não por mudança de fundo. */
.site-bottom-footer-inner-wrap {
	border-block-start: 1px solid var(--stl-navy-line);
}

.site-bottom-footer-inner-wrap .footer-html-inner p {
	margin: 0;
	font-size: 0.8125rem;
	color: #6d8298;
}

/* -----------------------------------------------------------------------------
   Impressão
   -------------------------------------------------------------------------- */

@media print {
	.stl-band,
	.stl-hero {
		background: none !important;
		color: #000 !important;
	}

	.stl-band :is(h1, h2, h3),
	.stl-hero :is(h1, h2, h3) {
		color: #000 !important;
	}

	.wp-block-buttons {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
   Figuras de conteúdo — fotografia dentro das secções.
   -------------------------------------------------------------------------- */

.stl-figure img,
.wp-block-image.stl-figure img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--stl-radius);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.stl-figure figcaption {
	margin-block-start: 0.7rem;
	font-size: 0.8125rem;
	color: var(--stl-steel);
}

/* -----------------------------------------------------------------------------
   stl-defs--links — stl-defs cujo título é um link (Home → páginas de produto).
   -------------------------------------------------------------------------- */

.stl-defs--links .stl-def__t a {
	color: inherit;
	text-decoration: none;
}

.stl-defs--links .stl-def__t a::after {
	content: " →";
	color: var(--stl-emerald);
}

.stl-band .stl-defs--links .stl-def__t a::after {
	color: var(--stl-emerald-bright);
}

.stl-defs--links .stl-def__t a:hover,
.stl-defs--links .stl-def__t a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}