/* ---------------------------------------------------------------------------
   4. Cabeçalho
   --------------------------------------------------------------------------- */

/*
 * O invólucro do template-part sai da árvore de caixas.
 *
 * Sem isto o `position: sticky` abaixo não gruda em nada, e o bug é do tipo que
 * não aparece na inspeção rápida: o cabeçalho continua no alto da página, só
 * que rola embora com o resto. A causa é o bloco `wp:template-part`, que sempre
 * embrulha o conteúdo num elemento próprio — aqui um <header> sem CSS nenhum,
 * com a altura exata da tarja mais o cabeçalho. Um elemento pegajoso só se
 * desloca dentro do bloco de conteúdo do pai, e nesse pai o deslocamento
 * disponível é zero.
 *
 * `display: contents` tira o invólucro da árvore de caixas sem tirá-lo do DOM
 * nem da árvore de acessibilidade: o landmark "banner" continua sendo ele, e o
 * bloco de contenção do cabeçalho passa a ser o .wp-site-blocks, que tem a
 * altura da página inteira.
 *
 * O seletor pega só o cabeçalho de propósito — o invólucro do rodapé é
 * <footer>, e precisa continuar gerando caixa para carregar a margem lá embaixo.
 */
.wp-site-blocks > header.wp-block-template-part {
	display: contents;
}

/*
 * O link da tarja fica em areia, um degrau acima do corda da frase.
 *
 * A cor vinha do atributo de link do bloco de parágrafo, e se perdeu quando a
 * tarja virou pattern com bloco de HTML — o que o bloco de HTML entrega é
 * marcação crua, sem os estilos que o editor gera. Sem esta regra o link sai da
 * mesma cor do texto ao redor e deixa de se anunciar como link, que é a única
 * coisa clicável da faixa.
 */
.magsil-tarja a {
	color: var(--wp--preset--color--areia);
}

/*
 * No celular esse link vira alvo de toque, e não só cor.
 *
 * Ele é a única coisa clicável da faixa e é o caminho mais curto do site para o
 * WhatsApp — aparece antes de qualquer outra coisa, no topo de toda página.
 * Media 19px de altura, que é metade do mínimo.
 *
 * `inline-block` com padding vertical, e não `min-block-size`: o link está no
 * meio de uma frase que quebra em duas linhas nessa largura, e um elemento de
 * linha só ganha altura de toque assim. A faixa cresce alguns pixels, e é um
 * preço baixo pelo botão de contato mais visitado da página.
 */
@media (width <= 781px) {
	.magsil-tarja a {
		display: inline-block;
		padding-block: 0.7rem;
	}
}

/*
 * O cabeçalho é carvão, e não areia, para formar um bloco escuro contínuo com a
 * tarja de aviso logo acima dele.
 *
 * Antes ele era areia translúcido. Entre a tarja escura e a foto do hero, que
 * sangra de ponta a ponta, sobrava uma listra clara no topo da página — lida
 * como falha, e não como cabeçalho.
 *
 * Vale dizer que esse bloco contínuo só existe no alto da página: a tarja não
 * gruda e o cabeçalho gruda, então ao rolar ele se descola e passa a flutuar
 * sozinho. A razão da cor continua de pé — o que muda é onde ela se enxerga.
 *
 * A translucidez e o desfoque continuam: quando a página rola, o conteúdo passa
 * por baixo e aparece esmaecido. Sobre base escura o contraste do texto não
 * depende do que está passando, o que não era verdade com a base clara.
 */
.magsil-cabecalho {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(140%) blur(10px);
	background-color: rgb(34 29 25 / 88%);
	color: var(--wp--preset--color--areia);
}

/*
 * O desfoque sai enquanto o menu do celular está aberto — e sem isto a navegação
 * inteira do site é inacessível no telefone.
 *
 * `backdrop-filter` torna o elemento BLOCO DE CONTENÇÃO para descendentes com
 * `position: fixed`. O menu responsivo do núcleo é exatamente isso: um painel
 * `fixed` com `inset: 0`, que deveria cobrir a tela inteira. Dentro deste
 * cabeçalho, o `inset: 0` passava a valer em relação ao cabeçalho — o painel
 * abria com 390 × 76 pixels, encaixado na faixa do topo, com os seis itens
 * espremidos numa coluna de 67px de largura encostada na borda direita. Ficavam
 * visíveis o "✕" e a palavra "Produtos"; o resto do menu saía da tela.
 *
 * O efeito não aparece no computador, porque acima de 781px o menu nunca vira
 * painel — ele é a barra horizontal de sempre. Só quebrava no celular, que é
 * justamente onde o menu é o único caminho para navegar.
 *
 * `has-modal-open` é posto pelo núcleo no elemento <html> enquanto o painel está
 * aberto. Desligar o filtro só nesse intervalo devolve a viewport como bloco de
 * contenção e mantém o vidro fosco no resto do tempo — que é o que se queria.
 * Prefixado para o Safari, onde a propriedade ainda pede -webkit-.
 */
.has-modal-open .magsil-cabecalho {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Os links vêm do theme.json em carvão, que sumiria no próprio fundo. */
.magsil-cabecalho a {
	color: var(--wp--preset--color--corda);
}

/*
 * O nome da marca fica em areia, um degrau acima do corda do menu. Sem isso os
 * dois saem na mesma cor e o cabeçalho vira uma fileira de itens iguais, sem
 * dizer qual deles é a marca.
 */
.magsil-cabecalho .wp-block-site-title a {
	color: var(--wp--preset--color--areia);
}

.magsil-cabecalho a:hover,
.magsil-cabecalho a:focus {
	color: var(--wp--preset--color--areia);
}

/*
 * Dentro do menu aberto no celular, quem manda na cor é o bloco.
 *
 * A regra de link acima tem especificidade maior que a classe has-areia-color
 * que o `overlayTextColor` gera, e vencia dentro do overlay — o resultado era
 * legível, mas a cor declarada no bloco simplesmente não valia. Devolver o
 * `inherit` aqui faz o overlay obedecer ao que o editor escolheu.
 */
.magsil-cabecalho .wp-block-navigation__responsive-container.has-modal-open a {
	color: inherit;
}

/*
 * A sombra aparece quando o cabeçalho descola do topo e passa a flutuar sobre o
 * conteúdo. Parado no alto ele não precisa dela: encosta na tarja, que é da
 * mesma cor, e o conjunto lê como uma peça só.
 *
 * Ela é a única separação entre o cabeçalho e o que passa por baixo desde que o
 * filete inferior saiu — e é a primeira versão do tema em que chega a aparecer,
 * porque até o cabeçalho grudar de verdade o estado "descolado" não existia.
 *
 * Feito com linha do tempo de rolagem, sem JavaScript: o tema não carrega um
 * byte de script e não vale começar por causa de uma sombra. Onde não houver
 * suporte, o @supports deixa tudo exatamente como está hoje — sem sombra, sem
 * erro. Os dois degraus do `from` existem porque a sombra `suave` tem duas
 * camadas, e box-shadow só interpola entre listas do mesmo tamanho.
 */
@supports (animation-timeline: scroll()) {
	.magsil-cabecalho {
		animation: magsil-cabecalho-descolado linear both;
		animation-timeline: scroll();
		animation-range: 0 5rem;
	}
}

@keyframes magsil-cabecalho-descolado {
	from {
		box-shadow: 0 0 0 rgba(34, 29, 25, 0), 0 0 0 rgba(34, 29, 25, 0);
	}

	to {
		box-shadow: var(--wp--preset--shadow--suave);
	}
}

.magsil-cabecalho .wp-block-navigation__container {
	gap: clamp(1.25rem, 2vw, 2.25rem);
}

/*
 * No celular o cabeçalho tem pouca largura para logotipo e menu. Com a escala
 * de espaçamento correta, o blockGap de 1,75rem empurrava o conjunto para uma
 * segunda linha; aqui ele encolhe.
 */
@media (width <= 781px) {
	.magsil-cabecalho .wp-block-group {
		gap: 0.75rem;
	}
}

/* Sublinhado que cresce a partir do centro no item de menu */
.magsil-cabecalho .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
}

.magsil-cabecalho .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	block-size: 1px;
	background-color: var(--wp--preset--color--terracota);
	transform: scaleX(0);
	transition: transform 220ms ease;
}

.magsil-cabecalho .wp-block-navigation-item__content:hover::after,
.magsil-cabecalho .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.magsil-cabecalho .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   4.1 Hero
   Altura em clamp e não em vh puro: 78vh vira 1.120px num monitor alto, onde
   o visitante rola uma tela inteira antes de ver qualquer produto. O piso
   garante presença no notebook; o teto impede o exagero no monitor grande.
   --------------------------------------------------------------------------- */

/*
 * A abertura encosta no cabeçalho.
 *
 * O núcleo dá a todo filho direto de .wp-site-blocks uma margem de topo igual
 * ao blockGap da raiz, e o <main> herdava 1,75rem dela. Numa página que abre
 * com faixa sangrando de ponta a ponta, essa margem vira uma listra areia entre
 * o cabeçalho escuro e a foto — lida como falha, e não como respiro. Só
 * desligamos quando a página de fato abre no hero: nas outras, a margem é o que
 * separa o cabeçalho do título.
 */
main:has(> .magsil-hero:first-child) {
	margin-block-start: 0;
}

.magsil-hero {
	min-height: clamp(34rem, 78vh, 52rem) !important;
}

/*
 * A largura da coluna vem daqui, e não do layout do bloco.
 *
 * Sem blocos-filhos dentro do cover — ver o comentário no patterns/hero.php —, o
 * núcleo não pendura `is-layout-constrained` neste contêiner, e com ele foi
 * embora o teto de 1440px. Sem teto, a abertura começava colada na margem
 * enquanto todas as seções abaixo começavam na coluna de 1440: num monitor de
 * 1920px são 125px de desalinhamento entre o título do hero e o primeiro título
 * da página.
 */
.magsil-hero .wp-block-cover__inner-container {
	inline-size: 100%;
	max-inline-size: 1440px;
	margin-inline: auto;
	position: relative;
	z-index: 2;
}

/* ---------------------------------------------------------------------------
   4.1.1 O carrossel da abertura

   Sem JavaScript: as fotos ficam empilhadas e o que muda é a opacidade de cada
   uma, em laço. Quatro posições, seis segundos cada, com 1,2s de travessia —
   um ciclo de 24 segundos. O número de posições é fixo porque seletor de
   quadro-chave não aceita variável; quem lida com listas menores é o
   patterns/hero.php, repetindo as fotos que houver.

   O atraso negativo da primeira existe para que a página não abra escura: sem
   ele a foto entraria desvanecendo, e o primeiro segundo do site seria um
   retângulo vazio embaixo do título.
   --------------------------------------------------------------------------- */

/*
 * A foto não é escurecida aqui: quem escurece é a camada de cobertura do próprio
 * bloco, com o `dimRatio` definido no patterns/hero.php.
 *
 * Houve um `filter: brightness()` nesta regra, somado a um véu em gradiente.
 * Eram dois mecanismos fazendo o mesmo trabalho, e um deles — o gradiente — o
 * fazia de forma desigual. Com uma camada só, parelha, há um número a ajustar
 * quando alguém achar a abertura clara ou escura demais, e ele está num lugar
 * só.
 */
.magsil-hero__foto {
	z-index: 0;
}

/*
 * O véu cobre a foto, e não a coluna de conteúdo.
 *
 * Medido no navegador: a foto ocupava 1585×780 a partir de x=0 e o véu saía
 * 1440×752 a partir de x=73 — sobrava uma faixa clara nos dois lados e no topo,
 * exatamente o contrário do escurecimento parelho que ele deveria dar.
 *
 * A causa é o layout do bloco de capa. Ele declara `contentSize: 1440px`, e o
 * WordPress aplica isso a todo filho direto que não tenha alinhamento próprio —
 * `max-width: 1440px`, `margin-inline: auto` e a margem de bloco da raiz. O véu
 * é um filho direto, e vinha sendo tratado como se fosse conteúdo. Passou a ser
 * visível quando os blocos-filhos saíram de dentro da capa e ela mesma virou o
 * contêiner de layout.
 */
.magsil-hero .wp-block-cover__background {
	max-inline-size: none;
	margin: 0;
}

.magsil-hero--carrossel .magsil-hero__foto {
	opacity: 0;
	animation: magsil-hero-troca 24s linear infinite;
	animation-delay: calc(var(--magsil-quadro, 0) * 6s - 1.2s);
}

@keyframes magsil-hero-troca {
	0% { opacity: 0; }
	5% { opacity: 1; }
	25% { opacity: 1; }
	30% { opacity: 0; }
	100% { opacity: 0; }
}

/* ---------------------------------------------------------------------------
   4.1.2 O texto que acompanha a foto

   Os quadros ficam empilhados na mesma célula de grade, e não posicionados de
   forma absoluta: assim a altura do palco é a do quadro mais alto, e a troca não
   empurra os botões para cima e para baixo a cada seis segundos. Empilhar por
   posição absoluta daria o mesmo cruzamento e um salto de layout junto.
   --------------------------------------------------------------------------- */

.magsil-hero__palco {
	display: grid;
	max-inline-size: 760px;
}

.magsil-hero__quadro {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.magsil-hero--carrossel .magsil-hero__quadro {
	opacity: 0;
	animation: magsil-hero-troca 24s linear infinite;
	animation-delay: calc(var(--magsil-quadro, 0) * 6s - 1.2s);
}

/*
 * O título do quadro é o mesmo desenho no <h1> e nos parágrafos que o imitam.
 * A página tem um <h1> só — o do quadro de marca —, e os outros três precisam
 * parecer com ele sem se declararem títulos.
 */
.magsil-hero__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.022em;
	color: var(--wp--preset--color--areia);
	text-wrap: balance;
}

.magsil-hero__texto {
	margin: 0;
	font-size: var(--wp--preset--font-size--grande);
	color: var(--wp--preset--color--corda);
}

/*
 * Os botões são marcação escrita à mão, então o espaçamento entre eles não vem
 * do blockGap de um `wp:buttons` — vem daqui.
 */
.magsil-hero__acoes {
	margin-block-start: var(--wp--preset--spacing--30);
}

.magsil-hero__acoes .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ---------------------------------------------------------------------------
   4.1.3 Pausar sem JavaScript

   Texto que se troca sozinho por mais de cinco segundos precisa de um jeito de
   parar — WCAG 2.2.2, nível A. A caixa de seleção fica fora da tela mas continua
   alcançável pelo teclado; quem aparece é a etiqueta, e o `:has()` transmite o
   estado dela para as animações da foto e do texto.
   --------------------------------------------------------------------------- */

.magsil-hero__interruptor {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.magsil-hero__pausa {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--miudo);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--corda);
	cursor: pointer;
	border-block-end: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	padding-block-end: 0.15rem;
}

.magsil-hero__pausa:hover {
	color: var(--wp--preset--color--areia);
}

.magsil-hero__interruptor:focus-visible + .magsil-hero__pausa {
	outline: 2px solid var(--wp--preset--color--areia);
	outline-offset: 4px;
}

.magsil-hero__pausa-seguir {
	display: none;
}

.magsil-hero__interruptor:checked + .magsil-hero__pausa .magsil-hero__pausa-parar {
	display: none;
}

.magsil-hero__interruptor:checked + .magsil-hero__pausa .magsil-hero__pausa-seguir {
	display: inline;
}

.magsil-hero:has(.magsil-hero__interruptor:checked) .magsil-hero__foto,
.magsil-hero:has(.magsil-hero__interruptor:checked) .magsil-hero__quadro {
	animation-play-state: paused;
}

/*
 * Movimento reduzido é um pedido, não uma preferência estética: a troca para, e
 * fica a primeira foto. Sem isto a abertura seria a única parte do site que
 * ignora o ajuste do sistema.
 */
@media (prefers-reduced-motion: reduce) {
	.magsil-hero--carrossel .magsil-hero__foto,
	.magsil-hero--carrossel .magsil-hero__quadro {
		animation: none;
		opacity: 0;
	}

	.magsil-hero--carrossel .magsil-hero__foto:first-of-type,
	.magsil-hero--carrossel .magsil-hero__quadro:first-child {
		opacity: 1;
	}

	/* Sem troca, não há o que pausar. */
	.magsil-hero__pausa,
	.magsil-hero__interruptor {
		display: none;
	}
}

/*
 * Legibilidade sobre a foto.
 *
 * No desktop a composição funciona porque o primeiro plano escuro fica atrás
 * do texto. No celular o recorte muda: a foto centraliza e o céu claro sobe
 * para trás do título. Medido no viewport de 390px, o contraste médio do h1
 * passava (5:1), mas os piores pontos caíam a 1,00:1 — trechos de letra sobre
 * fundo da mesma luminosidade. Contraste irregular é o que produz a sensação
 * de texto lavado, e é o que a média esconde.
 *
 * A correção é uma cortina ancorada ao rodapé do bloco, e não um escurecimento
 * geral: preserva a foto onde ela não atrapalha e garante piso de contraste
 * exatamente onde o texto se apoia.
 */
.magsil-hero .wp-block-cover__background {
	z-index: 1;
}

/*
 * No celular, texto e foto param de disputar o mesmo espaço.
 *
 * A cortina sobre a foto foi tentada e medida: o fundo típico chegava a 5:1,
 * mas sobravam manchas claras em 2,3:1 na borda superior esquerda, justamente
 * atrás das primeiras palavras do título. Contraste irregular é pior que
 * contraste baixo uniforme — a vista lê como texto lavado, e escurecer o
 * suficiente para cobrir a pior mancha apagaria a fotografia inteira.
 *
 * Empilhar resolve a causa: a foto ganha uma faixa própria, onde aparece
 * inteira e sem véu, e o texto desce para superfície sólida, com contraste
 * garantido (15:1) independentemente da imagem que o cliente subir depois.
 */
@media (width <= 781px) {
	.magsil-hero {
		display: block;
		min-height: 0 !important;
		padding-block: 0 !important;
		padding-inline: 0 !important;
	}

	.magsil-hero .wp-block-cover__image-background {
		position: relative;
		inset: auto;
		display: block;
		margin: 0;
		inline-size: 100%;
		block-size: 58vw;
		min-block-size: 15rem;
		object-fit: cover;
		object-position: 50% 62%;
	}

	/* Sem foto atrás do texto, o véu perde a função. */
	.magsil-hero .wp-block-cover__background {
		display: none;
	}

	/*
	 * E o carrossel também. Empilhado, ele deixaria de ser troca de foto no
	 * mesmo lugar e viraria quatro fotos uma embaixo da outra, empurrando o
	 * texto para fora da primeira tela — que é o oposto do que o empilhamento
	 * veio resolver.
	 */
	.magsil-hero__foto:not(:first-of-type) {
		display: none;
	}

	.magsil-hero--carrossel .magsil-hero__foto {
		animation: none;
		opacity: 1;
	}

	/*
	 * O texto para de girar junto com a foto. Com uma imagem só, um texto que
	 * continuasse trocando falaria de peças que não estão na tela.
	 */
	.magsil-hero--carrossel .magsil-hero__quadro {
		animation: none;
		opacity: 0;
	}

	.magsil-hero--carrossel .magsil-hero__quadro:first-child {
		opacity: 1;
	}

	.magsil-hero__pausa,
	.magsil-hero__interruptor {
		display: none;
	}

	/* O !important existe porque o core aplica o padding da raiz no próprio
	   .wp-block-cover quando o bloco é alignfull, e zerá-lo lá levava junto o
	   respiro do conteúdo. */
	.magsil-hero .wp-block-cover__inner-container {
		/* Sem isto, o inline-size:100% herdado somava-se ao padding e o texto
		   saía pela direita da tela. */
		box-sizing: border-box;
		inline-size: 100%;
		margin: 0 !important;
		background-color: var(--wp--preset--color--carvao);
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30)
			var(--wp--preset--spacing--50) !important;
	}
}

/* ---------------------------------------------------------------------------
   4.2 Imagem institucional
   Proporção fixa para a foto do processo: sem ela, uma imagem em retrato
   estica a coluna e desequilibra o par com o texto ao lado.
   --------------------------------------------------------------------------- */

.magsil-imagem-processo img {
	aspect-ratio: 5 / 6;
	object-fit: cover;
	inline-size: 100%;
	block-size: auto;
}

/* ---------------------------------------------------------------------------