/* ==========================================================================
   Soldafer — folha única do tema.
   Mundo visual: chapa de aço, sinalização de galpão, ficha de prateleira.
   ========================================================================== */

/* --- Fontes ------------------------------------------------------------- */

@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-400-900-latin.woff2') format('woff2');
	font-weight: 400 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}

@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-400-900-ext.woff2') format('woff2');
	font-weight: 400 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB;
}

@font-face {
	font-family: 'Barlow';
	src: url('../fonts/barlow-400-latin.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}

@font-face {
	font-family: 'Barlow';
	src: url('../fonts/barlow-400-ext.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0100-02BA, U+1E00-1EFF, U+20A0-20AB;
}

@font-face {
	font-family: 'Barlow';
	src: url('../fonts/barlow-500-latin.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}

@font-face {
	font-family: 'Barlow';
	src: url('../fonts/barlow-600-latin.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}

@font-face {
	font-family: 'Barlow';
	src: url('../fonts/barlow-600-ext.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
	unicode-range: U+0100-02BA, U+1E00-1EFF, U+20A0-20AB;
}

@font-face {
	font-family: 'Barlow';
	src: url('../fonts/barlow-700-latin.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
	/* Óxido: a cor da marca, medida no logo. */
	--ox-900: #4a0f10;
	--ox-800: #5e1516;
	--ox: #811d1e;
	--ox-600: #9c2526;
	--ox-500: #b93536;

	/* Chapa e aço. */
	--grafite-900: #0d0f11;
	--grafite: #14161a;
	--grafite-700: #1e2228;
	--grafite-600: #2b3037;
	--aco: #7e858e;
	--aco-claro: #b6bcc3;

	/* Concreto: os fundos claros. */
	--concreto: #f2f0ec;
	--concreto-fundo: #e8e5df;
	--branco: #fdfdfc;

	/* Sinalização. */
	--sinal: #f0b429;
	--ok: #2f7a46;
	--alerta: #c0392b;

	/* Papéis semânticos. */
	--fundo: var(--concreto);
	--texto: #191b1e;
	--texto-suave: #55595f;
	--linha: #cfccc4;
	--linha-forte: #b0aca2;

	/* Tipografia. */
	--display: 'Archivo', 'Arial Narrow', sans-serif;
	--corpo: 'Barlow', system-ui, sans-serif;

	/* Teto medido: acima disso "NA MÃO DE QUEM" quebra e o título vira seis linhas. */
	--t-hero: clamp(2.7rem, 11vw, 4.9rem);
	--t-secao: clamp(1.9rem, 7.5vw, 3.25rem);
	--t-titulo: clamp(1.35rem, 5vw, 1.9rem);
	--t-corpo: 1.0625rem;
	--t-min: 0.8125rem;

	/* Espaço: escala de 4. */
	--e1: 0.25rem;
	--e2: 0.5rem;
	--e3: 0.75rem;
	--e4: 1rem;
	--e5: 1.5rem;
	--e6: 2rem;
	--e7: 3rem;
	--e8: 4rem;
	--e9: 6rem;

	/* Estrutura. */
	--largura: 76rem;
	--gutter: 1.25rem;
	--corte: 14px;
	--barra-inferior: 4.25rem;

	--z-nav: 60;
	--z-bandeja: 70;
	--z-overlay: 90;

	--transicao: 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (min-width: 48rem) {
	:root {
		--gutter: 2rem;
		--corte: 18px;
	}
}

/* --- Reset -------------------------------------------------------------- */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	background: var(--fundo);
	color: var(--texto);
	font-family: var(--corpo);
	font-size: var(--t-corpo);
	line-height: 1.6;
	min-height: 100dvh;
	overflow-x: hidden;
	padding-bottom: calc(var(--barra-inferior) + env(safe-area-inset-bottom));
	-webkit-font-smoothing: antialiased;
}

@media (min-width: 64rem) {
	body {
		padding-bottom: 0;
	}
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 0.18em;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

ul,
ol {
	list-style: none;
	padding: 0;
}

:focus-visible {
	outline: 3px solid var(--sinal);
	outline-offset: 2px;
}

/* Elementos com canto cortado recortam o outline: o foco vira um anel interno. */
.corte:focus-visible {
	outline: none;
}

.corte:focus-visible::after {
	content: '';
	position: absolute;
	inset: 3px;
	border: 2px solid var(--sinal);
	pointer-events: none;
}

::selection {
	background: var(--ox);
	color: #fff;
}

/* --- Tipografia --------------------------------------------------------- */

h1,
h2,
h3,
h4 {
	font-family: var(--display);
	font-weight: 800;
	font-stretch: 88%;
	line-height: 0.95;
	letter-spacing: -0.025em;
	text-wrap: balance;
	text-transform: uppercase;
}

h1 {
	font-size: var(--t-hero);
	font-weight: 900;
	font-stretch: 78%;
	line-height: 0.9;
}

h2 {
	font-size: var(--t-secao);
}

h3 {
	font-size: var(--t-titulo);
	font-stretch: 92%;
}

p {
	text-wrap: pretty;
	max-width: 68ch;
}

strong {
	font-weight: 600;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pular {
	position: absolute;
	top: -100px;
	left: var(--gutter);
	z-index: 200;
	background: var(--sinal);
	color: #000;
	padding: var(--e3) var(--e4);
	font-weight: 600;
}

.pular:focus {
	top: var(--e3);
}

/* --- Estrutura ---------------------------------------------------------- */

.env {
	width: min(100% - var(--gutter) * 2, var(--largura));
	margin-inline: auto;
}

.secao {
	padding-block: var(--e7);
}

@media (min-width: 48rem) {
	.secao {
		padding-block: var(--e8);
	}
}

.secao--escura {
	background: var(--grafite);
	color: var(--concreto);
}

.secao--escura h2,
.secao--escura h3 {
	color: var(--branco);
}

.secao__cabeca {
	margin-bottom: var(--e5);
}

.secao__cabeca p {
	margin-top: var(--e3);
	color: var(--texto-suave);
}

.secao--escura .secao__cabeca p {
	color: var(--aco-claro);
}

/* Corte de canto: a assinatura geométrica vem do hexágono da marca. */
.corte {
	position: relative;
	clip-path: polygon(
		var(--corte) 0,
		100% 0,
		100% calc(100% - var(--corte)),
		calc(100% - var(--corte)) 100%,
		0 100%,
		0 var(--corte)
	);
}

/* Hachura de sinalização — usada em divisores e bordas de aviso. */
.hachura {
	background-image: repeating-linear-gradient(
		-45deg,
		var(--sinal) 0 10px,
		var(--grafite) 10px 20px
	);
	height: 6px;
}

/* --- Cabeçalho ---------------------------------------------------------- */

.topo {
	position: sticky;
	top: 0;
	z-index: var(--z-nav);
	background: var(--grafite);
	color: var(--branco);
	border-bottom: 1px solid var(--grafite-600);
}

.topo__linha {
	display: flex;
	align-items: center;
	gap: var(--e3);
	min-height: 3.75rem;
}

.topo__marca {
	display: flex;
	align-items: center;
	gap: var(--e2);
	text-decoration: none;
	margin-right: auto;
	padding-block: var(--e2);
}

.topo__marca .marca {
	width: 26px;
	color: var(--ox-500);
	flex: none;
}

.topo__nome {
	font-family: var(--display);
	font-weight: 800;
	font-stretch: 80%;
	font-size: 1.35rem;
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: uppercase;
}

.topo__nome span {
	display: block;
	font-family: var(--corpo);
	font-size: 0.5625rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	color: var(--aco);
	text-transform: uppercase;
	margin-top: 2px;
}

.topo__acao {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--branco);
	position: relative;
	transition: color var(--transicao), background var(--transicao);
}

.topo__acao:hover {
	background: var(--grafite-700);
	color: var(--sinal);
}

.topo__menu {
	display: none;
}

@media (min-width: 64rem) {
	.topo__menu {
		display: flex;
		gap: var(--e5);
		margin-right: var(--e5);
	}

	.topo__menu a {
		font-family: var(--display);
		font-weight: 600;
		font-stretch: 92%;
		font-size: 0.9375rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-decoration: none;
		padding-block: var(--e2);
		border-bottom: 2px solid transparent;
		transition: border-color var(--transicao), color var(--transicao);
	}

	.topo__menu a:hover,
	.topo__menu .current-menu-item > a {
		border-color: var(--ox-500);
		color: var(--sinal);
	}
}

.contador {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	background: var(--ox-500);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 18px;
	text-align: center;
}

.contador[hidden] {
	display: none;
}

/* --- Navegação inferior (mobile) ---------------------------------------- */

.barra {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: var(--z-nav);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	background: var(--grafite-900);
	border-top: 1px solid var(--grafite-600);
	padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 64rem) {
	.barra {
		display: none;
	}
}

.barra__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: var(--barra-inferior);
	color: var(--aco-claro);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	position: relative;
	transition: color var(--transicao);
}

.barra__item[aria-current='page'],
.barra__item.is-ativo {
	color: var(--branco);
}

.barra__item[aria-current='page']::before,
.barra__item.is-ativo::before {
	content: '';
	position: absolute;
	top: 0;
	left: 20%;
	right: 20%;
	height: 3px;
	background: var(--ox-500);
}

.barra__item:active {
	background: var(--grafite-700);
}

/* --- Busca em tela cheia ------------------------------------------------ */

.busca {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	background: var(--grafite);
	color: var(--branco);
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

.busca.is-aberta {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.busca__topo {
	display: flex;
	align-items: center;
	gap: var(--e3);
	padding: var(--e4) var(--gutter);
	border-bottom: 1px solid var(--grafite-600);
}

.busca__campo {
	flex: 1;
	background: var(--grafite-700);
	border: 1px solid var(--grafite-600);
	color: var(--branco);
	padding: var(--e3) var(--e4);
	font-size: 1.0625rem;
	min-height: 48px;
}

.busca__campo::placeholder {
	color: var(--aco);
}

.busca__corpo {
	flex: 1;
	overflow-y: auto;
	padding: var(--e4) var(--gutter) var(--e8);
}

.busca__rotulo {
	font-family: var(--display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aco);
	margin-bottom: var(--e3);
}

.busca__lista {
	display: grid;
	gap: 1px;
	background: var(--grafite-600);
	margin-bottom: var(--e6);
}

.busca__lista a {
	display: flex;
	align-items: center;
	gap: var(--e3);
	background: var(--grafite);
	padding: var(--e3);
	text-decoration: none;
	min-height: 56px;
	transition: background var(--transicao);
}

.busca__lista a:hover {
	background: var(--grafite-700);
}

.busca__lista img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	background: var(--branco);
	flex: none;
}

.busca__sku {
	display: block;
	font-size: var(--t-min);
	color: var(--aco);
	font-variant-numeric: tabular-nums;
}

/* --- Botões ------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e2);
	min-height: 52px;
	padding: 0 var(--e5);
	position: relative;
	font-family: var(--display);
	font-weight: 700;
	font-stretch: 92%;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
	transition: background var(--transicao), color var(--transicao), transform 120ms ease;
}

.btn:active {
	transform: translateY(1px);
}

.btn:focus-visible {
	outline: none;
}

.btn:focus-visible::after {
	content: '';
	position: absolute;
	inset: 3px;
	border: 2px solid var(--sinal);
}

.btn--primario {
	background: var(--ox);
	color: #fff;
}

.btn--primario:hover {
	background: var(--ox-600);
}

.btn--claro {
	background: var(--branco);
	color: var(--grafite);
}

.btn--claro:hover {
	background: var(--sinal);
}

.btn--linha {
	border-color: currentColor;
	color: inherit;
}

.btn--linha:hover {
	background: currentColor;
}

.btn--linha:hover span,
.btn--linha:hover .ic {
	color: var(--grafite);
}

.btn--zap {
	background: var(--ok);
	color: #fff;
}

.btn--zap:hover {
	background: #276639;
}

.btn--bloco {
	width: 100%;
}

.btn .ic {
	flex: none;
}

/* --- Abertura ----------------------------------------------------------- */

.abertura {
	position: relative;
	background: var(--ox);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.abertura::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		repeating-linear-gradient(
			-45deg,
			rgba(255, 255, 255, 0.05) 0 2px,
			transparent 2px 9px
		);
}

.abertura::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(120% 90% at 78% 8%, rgba(255, 255, 255, 0.16), transparent 58%),
		linear-gradient(178deg, transparent 55%, var(--ox-900));
}

.abertura__interno {
	padding-block: var(--e7) var(--e8);
}

@media (min-width: 64rem) {
	.abertura__interno {
		padding-block: var(--e8);
		display: grid;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr);
		gap: var(--e7);
		align-items: end;
	}
}

.abertura h1 {
	color: #fff;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
}

.abertura h1 em {
	font-style: normal;
	color: var(--sinal);
}

.abertura__texto {
	margin-top: var(--e4);
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.9);
	max-width: 46ch;
}

.abertura__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e3);
	margin-top: var(--e5);
}

/* Campo de busca da abertura: a ação primária é procurar o que já se sabe que precisa. */
.abertura__busca {
	display: flex;
	margin-top: var(--e5);
	background: var(--branco);
	color: var(--texto);
	--corte: 12px;
}

.abertura__busca input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	padding: var(--e4);
	min-height: 58px;
	font-size: 1.0625rem;
}

.abertura__busca button {
	display: grid;
	place-items: center;
	width: 58px;
	background: var(--grafite);
	color: var(--branco);
	transition: background var(--transicao);
}

.abertura__busca button:hover {
	background: var(--ox-900);
}

/* Ficha de identificação da loja, no lugar do bloco de métricas de sempre. */
.identificacao {
	margin-top: var(--e6);
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(0, 0, 0, 0.16);
	--corte: 16px;
	backdrop-filter: blur(2px);
}

@media (min-width: 64rem) {
	.identificacao {
		margin-top: 0;
	}
}

.identificacao dl {
	display: grid;
	grid-template-columns: auto 1fr;
	margin: 0;
}

.identificacao dt,
.identificacao dd {
	padding: var(--e3) var(--e4);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	margin: 0;
}

.identificacao dt {
	font-family: var(--display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	border-right: 1px solid rgba(255, 255, 255, 0.16);
	white-space: nowrap;
}

.identificacao dd {
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.identificacao dl > :nth-last-child(-n + 2) {
	border-bottom: 0;
}

/* --- Placas de corredor (categorias) ------------------------------------ */

.corredores {
	display: grid;
	gap: 2px;
	background: var(--linha);
	border: 1px solid var(--linha);
}

@media (min-width: 48rem) {
	.corredores {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.corredores {
		grid-template-columns: repeat(3, 1fr);
	}
}

.corredor {
	display: flex;
	align-items: center;
	gap: var(--e4);
	background: var(--branco);
	padding: var(--e4);
	min-height: 88px;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: background var(--transicao), color var(--transicao);
}

.corredor:hover,
.corredor:focus-visible {
	background: var(--grafite);
	color: var(--branco);
}

.corredor__icone {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	flex: none;
	color: var(--ox);
	border: 1px solid var(--linha);
	transition: border-color var(--transicao), color var(--transicao), background var(--transicao);
}

.corredor:hover .corredor__icone,
.corredor:focus-visible .corredor__icone {
	background: var(--ox);
	border-color: var(--ox);
	color: #fff;
}

.corredor__nome {
	font-family: var(--display);
	font-weight: 700;
	font-stretch: 90%;
	font-size: 1.0625rem;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.corredor__meta {
	display: block;
	margin-top: 3px;
	font-family: var(--corpo);
	font-size: var(--t-min);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--texto-suave);
	text-transform: none;
	font-variant-numeric: tabular-nums;
}

.corredor:hover .corredor__meta {
	color: var(--aco-claro);
}

.corredor .ic--seta {
	margin-left: auto;
	color: var(--linha-forte);
	flex: none;
	transition: transform var(--transicao), color var(--transicao);
}

.corredor:hover .ic--seta {
	color: var(--sinal);
	transform: translateX(4px);
}

/* --- Vitrine de corredores (fotos do catálogo impresso) ------------------ */

.vitrine {
	display: grid;
	gap: 2px;
	background: var(--linha);
	border: 1px solid var(--linha);
}

@media (min-width: 40rem) {
	.vitrine {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.vitrine {
		grid-template-columns: repeat(3, 1fr);
	}
}

.prateleira {
	display: flex;
	flex-direction: column;
	background: var(--branco);
	text-decoration: none;
	overflow: hidden;
}

.prateleira__foto {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--concreto-fundo);
	overflow: hidden;
}

.prateleira__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms cubic-bezier(0.2, 0.7, 0.3, 1), filter var(--transicao);
	filter: saturate(0.92);
}

.prateleira:hover .prateleira__foto img,
.prateleira:focus-visible .prateleira__foto img {
	transform: scale(1.04);
	filter: none;
}

.prateleira__icone {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--linha-forte);
}

.prateleira__corpo {
	display: block;
	padding: var(--e3) var(--e4);
	border-top: 1px solid var(--linha);
	background: var(--branco);
	transition: background var(--transicao), color var(--transicao);
}

.prateleira:hover .prateleira__corpo,
.prateleira:focus-visible .prateleira__corpo {
	background: var(--grafite);
	color: var(--branco);
}

.prateleira__nome {
	display: block;
	font-family: var(--display);
	font-weight: 700;
	font-stretch: 90%;
	font-size: 1rem;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.prateleira__meta {
	display: block;
	margin-top: 3px;
	font-size: var(--t-min);
	font-weight: 500;
	color: var(--texto-suave);
	font-variant-numeric: tabular-nums;
}

.prateleira:hover .prateleira__meta {
	color: var(--aco-claro);
}

/* Capa do corredor: a mesma família de produtos que o catálogo impresso mostra. */
.capa-corredor {
	margin: 0 0 var(--e5);
	border: 1px solid var(--linha);
	background: var(--branco);
	overflow: hidden;
}

.capa-corredor img {
	width: 100%;
	height: auto;
	display: block;
}

/* --- Fichas de produto -------------------------------------------------- */

.fichas {
	display: grid;
	gap: var(--e3);
}

@media (min-width: 34rem) {
	.fichas {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.fichas {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--e4);
	}
}

.ficha {
	display: flex;
	flex-direction: column;
	background: var(--branco);
	border: 1px solid var(--linha);
	position: relative;
	transition: border-color var(--transicao), box-shadow var(--transicao);
}

.ficha:hover {
	border-color: var(--linha-forte);
	box-shadow: 0 10px 24px -14px rgba(20, 22, 26, 0.55);
}

.ficha__foto {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--concreto-fundo);
	overflow: hidden;
}

.ficha__foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	padding: var(--e3);
	transition: transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ficha:hover .ficha__foto img {
	transform: scale(1.04);
}

.ficha__marca {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--grafite);
	color: var(--branco);
	padding: 4px var(--e2);
	font-family: var(--display);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Sem foto: etiqueta de prateleira — selo de categoria e ficha ao lado. */
.ficha--etiqueta {
	flex-direction: row;
	align-items: stretch;
}

.ficha__selo {
	display: grid;
	place-items: center;
	width: 68px;
	flex: none;
	background: var(--concreto-fundo);
	border-right: 1px solid var(--linha);
	color: var(--ox);
}

.ficha--etiqueta .ficha__corpo {
	border-top: 0;
	min-width: 0;
}

.ficha__marca--linha {
	position: static;
	background: none;
	padding: 0;
	font-family: var(--display);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--texto-suave);
}

.ficha__corpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--e2);
	padding: var(--e3);
	border-top: 1px solid var(--linha);
}

.ficha__nome {
	font-family: var(--display);
	font-weight: 600;
	font-stretch: 94%;
	font-size: 0.9375rem;
	line-height: 1.15;
	letter-spacing: 0.005em;
	text-transform: none;
}

.ficha__nome a {
	text-decoration: none;
}

.ficha__nome a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.ficha__sku {
	font-size: 0.75rem;
	color: var(--texto-suave);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.ficha__acao {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e2);
	margin-top: auto;
	min-height: 46px;
	padding: 0 var(--e3);
	background: var(--concreto);
	border: 1px solid var(--linha);
	font-family: var(--display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.ficha__acao:hover {
	background: var(--ox);
	border-color: var(--ox);
	color: #fff;
}

.ficha__acao.is-dentro {
	background: var(--ok);
	border-color: var(--ok);
	color: #fff;
}

/* --- Bandeja de cotação ------------------------------------------------- */

.bandeja {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(var(--barra-inferior) + env(safe-area-inset-bottom));
	z-index: var(--z-bandeja);
	background: var(--grafite);
	color: var(--branco);
	border-top: 2px solid var(--ox-500);
	/* Fora de tela E fora do alcance do teclado enquanto a lista estiver vazia. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(140%);
	transition: transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 180ms ease, visibility 260ms;
}

@media (min-width: 64rem) {
	.bandeja {
		bottom: 0;
	}
}

.bandeja.is-visivel {
	visibility: visible;
	opacity: 1;
	transform: none;
}

.bandeja__linha {
	display: flex;
	align-items: center;
	gap: var(--e3);
	padding: var(--e3) var(--gutter);
}

.bandeja__conta {
	font-family: var(--display);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-right: auto;
	font-variant-numeric: tabular-nums;
}

.bandeja__conta span {
	display: block;
	font-family: var(--corpo);
	font-size: var(--t-min);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--aco-claro);
	text-transform: none;
}

/* --- Lista da cotação --------------------------------------------------- */

.itens {
	display: grid;
	gap: 1px;
	background: var(--linha);
	border: 1px solid var(--linha);
	margin-bottom: var(--e5);
}

.item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: var(--e3);
	align-items: center;
	background: var(--branco);
	padding: var(--e3);
}

.item__foto {
	width: 56px;
	height: 56px;
	object-fit: contain;
	background: var(--concreto-fundo);
}

.item__nome {
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.25;
}

.item__sku {
	display: block;
	font-size: var(--t-min);
	color: var(--texto-suave);
	font-variant-numeric: tabular-nums;
}

.qtd {
	display: flex;
	align-items: center;
	border: 1px solid var(--linha);
}

.qtd button {
	display: grid;
	place-items: center;
	width: 40px;
	height: 44px;
	color: var(--texto-suave);
	transition: background var(--transicao), color var(--transicao);
}

.qtd button:hover {
	background: var(--grafite);
	color: var(--branco);
}

.qtd input {
	width: 44px;
	height: 44px;
	border: 0;
	border-inline: 1px solid var(--linha);
	text-align: center;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

.qtd input::-webkit-outer-spin-button,
.qtd input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.item__remover {
	grid-column: 3;
	justify-self: end;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--texto-suave);
	transition: color var(--transicao);
}

.item__remover:hover {
	color: var(--alerta);
}

/* --- Formulário --------------------------------------------------------- */

.forma {
	display: grid;
	gap: var(--e4);
	margin-top: var(--e6);
}

@media (min-width: 48rem) {
	.forma {
		grid-template-columns: repeat(2, 1fr);
	}

	.forma__largo {
		grid-column: 1 / -1;
	}
}

.campo {
	display: grid;
	gap: var(--e2);
}

.campo label {
	font-family: var(--display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--texto-suave);
}

.campo label .req {
	color: var(--ox);
}

.campo input,
.campo textarea,
.campo select {
	background: var(--branco);
	border: 1px solid var(--linha-forte);
	padding: var(--e3);
	min-height: 52px;
	font-size: 1rem;
	transition: border-color var(--transicao), box-shadow var(--transicao);
}

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

.campo input:focus,
.campo textarea:focus {
	border-color: var(--ox);
	box-shadow: inset 0 0 0 1px var(--ox);
	outline: none;
}

.campo .ajuda {
	font-size: var(--t-min);
	color: var(--texto-suave);
}

.campo.is-erro input,
.campo.is-erro textarea {
	border-color: var(--alerta);
}

.campo .erro {
	display: flex;
	align-items: center;
	gap: var(--e1);
	font-size: var(--t-min);
	font-weight: 600;
	color: var(--alerta);
}

.mel {
	position: absolute;
	left: -9999px;
}

/* --- Estados de retorno ------------------------------------------------- */

/* O estado fala pelo selo, não por uma borda lateral colorida. */
.aviso {
	display: flex;
	gap: var(--e3);
	align-items: flex-start;
	padding: var(--e4);
	border: 1px solid var(--linha-forte);
	background: var(--branco);
}

.aviso__selo {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	background: var(--ox);
	color: #fff;
}

.aviso--ok .aviso__selo {
	background: var(--ok);
}

.aviso--erro .aviso__selo {
	background: var(--alerta);
}

.aviso p {
	margin-top: 2px;
}

.vazio {
	padding: var(--e7) var(--e4);
	text-align: center;
	border: 1px dashed var(--linha-forte);
	background: var(--branco);
}

.vazio .ic {
	margin: 0 auto var(--e3);
	color: var(--linha-forte);
}

.vazio h3 {
	margin-bottom: var(--e2);
}

.vazio p {
	margin: 0 auto var(--e4);
	color: var(--texto-suave);
}

/* --- Equipe ------------------------------------------------------------- */

.equipe {
	display: grid;
	gap: var(--e3);
}

@media (min-width: 40rem) {
	.equipe {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.equipe {
		grid-template-columns: repeat(3, 1fr);
	}
}

.pessoa {
	display: flex;
	align-items: center;
	gap: var(--e3);
	background: var(--grafite-700);
	border: 1px solid var(--grafite-600);
	padding: var(--e3);
}

.pessoa__foto {
	width: 56px;
	height: 56px;
	flex: none;
	object-fit: cover;
	background: var(--grafite-600);
	filter: grayscale(1) contrast(1.05);
}

.pessoa__inicial {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	flex: none;
	background: var(--ox);
	color: #fff;
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 800;
}

.pessoa__nome {
	font-family: var(--display);
	font-weight: 700;
	font-stretch: 92%;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.pessoa__funcao {
	display: block;
	font-family: var(--corpo);
	font-size: var(--t-min);
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--aco-claro);
	text-transform: none;
}

.pessoa__zap {
	margin-left: auto;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex: none;
	background: var(--ok);
	color: #fff;
	transition: background var(--transicao);
}

.pessoa__zap:hover {
	background: #276639;
}

/* --- Régua de processo -------------------------------------------------- */

.processo {
	display: grid;
	gap: var(--e5);
	counter-reset: passo;
}

@media (min-width: 56rem) {
	.processo {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--e6);
	}
}

.passo {
	position: relative;
	padding-top: var(--e5);
	border-top: 1px solid var(--grafite-600);
}

/* A linha que liga os marcos: existe só onde há um próximo. */
@media (min-width: 56rem) {
	.passo:not(:last-child)::after {
		content: '';
		position: absolute;
		top: -1px;
		right: calc(var(--e6) * -1);
		width: var(--e6);
		height: 1px;
		background: var(--grafite-600);
	}
}

.passo__marca {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--e3);
	background: var(--ox);
	color: #fff;
}

.passo__titulo {
	font-size: 1.125rem;
	font-stretch: 92%;
	color: var(--branco);
	margin-bottom: var(--e2);
}

.passo__texto {
	color: var(--aco-claro);
	font-size: 0.9375rem;
}

/* --- Filtros de categoria ----------------------------------------------- */

/* No toque a faixa desliza com o dedo. No mouse não havia como arrastar:
   as setas só entram onde existe ponteiro fino e sobra conteúdo fora da vista. */
.faixa {
	position: relative;
	margin-bottom: var(--e5);
}

.chips {
	display: flex;
	gap: var(--e2);
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: var(--e1);
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
}

.chips::-webkit-scrollbar {
	display: none;
}

.chip {
	scroll-snap-align: start;
}

.faixa__seta {
	display: none;
	place-items: center;
	align-self: start;
	width: 44px;
	height: 42px;
	border: 1px solid var(--linha-forte);
	background: var(--branco);
	color: var(--grafite);
	cursor: pointer;
	padding: 0;
	transition: background var(--transicao), color var(--transicao), border-color var(--transicao), opacity var(--transicao);
}

.faixa__seta:hover:not(:disabled) {
	background: var(--grafite);
	border-color: var(--grafite);
	color: var(--branco);
}

/* Ponta da lista: a seta continua no lugar (sem pulo de layout), apagada. */
.faixa__seta:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Uma seta só no jogo de ícones: a de voltar é a mesma, espelhada. */
.faixa__seta--antes .ic {
	transform: scaleX(-1);
}

/* Só onde existe mouse — e só quando a lista não cabe inteira na tela. */
@media (hover: hover) and (pointer: fine) {
	.faixa[data-rola] {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: var(--e2);
		align-items: start;
	}

	.faixa[data-rola] .faixa__seta {
		display: grid;
	}
}

.chip {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding-inline: var(--e4);
	white-space: nowrap;
	background: var(--branco);
	border: 1px solid var(--linha-forte);
	font-family: var(--display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.chip:hover,
.chip.is-ativo {
	background: var(--grafite);
	border-color: var(--grafite);
	color: var(--branco);
}

/* --- Contato ------------------------------------------------------------ */

.contato {
	display: grid;
	gap: var(--e5);
}

@media (min-width: 56rem) {
	.contato {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: var(--e6);
		align-items: start;
	}
}

.mapa {
	aspect-ratio: 4 / 3;
	background: var(--concreto-fundo);
	border: 1px solid var(--linha);
}

.mapa iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	filter: grayscale(0.35) contrast(1.05);
}

/* --- Marcas ------------------------------------------------------------- */

.marcas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--linha);
	border: 1px solid var(--linha);
}

@media (min-width: 48rem) {
	.marcas {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media (min-width: 64rem) {
	.marcas {
		grid-template-columns: repeat(7, 1fr);
	}
}

.marcas li {
	display: grid;
	place-items: center;
	background: var(--branco);
	padding: var(--e4) var(--e3);
	min-height: 80px;
}

.marcas img {
	max-height: 34px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.62;
	transition: opacity var(--transicao), filter var(--transicao);
}

.marcas li:hover img {
	filter: none;
	opacity: 1;
}

/* --- Faixa de convite --------------------------------------------------- */

.convite {
	background: var(--grafite);
	color: var(--branco);
	position: relative;
	overflow: hidden;
}

.convite__interno {
	display: grid;
	gap: var(--e5);
	padding-block: var(--e7);
}

@media (min-width: 64rem) {
	.convite__interno {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--e8);
		padding-block: var(--e8);
	}
}

.convite h2 {
	color: var(--branco);
}

.convite p {
	margin-top: var(--e3);
	color: var(--aco-claro);
}

.convite__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e3);
}

/* --- Rodapé ------------------------------------------------------------- */

.rodape {
	background: var(--grafite-900);
	color: var(--aco-claro);
	font-size: 0.9375rem;
}

.rodape__grade {
	display: grid;
	gap: var(--e6);
	padding-block: var(--e7);
}

@media (min-width: 48rem) {
	.rodape__grade {
		grid-template-columns: 1fr 1fr;
		gap: var(--e7);
	}
}

/* Quatro blocos (marca, catálogo, blog, loja) só cabem lado a lado no desktop. */
@media (min-width: 64rem) {
	.rodape__grade {
		grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
	}
}

.rodape h3 {
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	color: var(--branco);
	margin-bottom: var(--e3);
}

.rodape a {
	text-decoration: none;
	transition: color var(--transicao);
}

.rodape a:hover {
	color: var(--sinal);
}

.rodape__lista {
	display: grid;
	gap: var(--e2);
}

.rodape__contato {
	display: grid;
	gap: var(--e3);
}

.rodape__contato li {
	display: flex;
	gap: var(--e3);
	align-items: flex-start;
}

.rodape__contato .ic {
	flex: none;
	color: var(--ox-500);
	margin-top: 3px;
}

.rodape__marca {
	display: flex;
	align-items: center;
	gap: var(--e3);
	margin-bottom: var(--e4);
}

.rodape__marca .marca {
	width: 40px;
	color: var(--ox-500);
	flex: none;
}

.rodape__sociais {
	display: flex;
	gap: var(--e2);
	margin-top: var(--e4);
}

.rodape__sociais a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--grafite-600);
	transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}

.rodape__sociais a:hover {
	background: var(--ox);
	border-color: var(--ox);
	color: #fff;
}

.rodape__base {
	border-top: 1px solid var(--grafite-700);
	padding-block: var(--e4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--e3);
	justify-content: space-between;
	font-size: var(--t-min);
	color: var(--aco);
}

/* --- Trilha ------------------------------------------------------------- */

.trilha {
	padding-block: var(--e4) 0;
	font-size: var(--t-min);
	color: var(--texto-suave);
}

.trilha ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2);
}

.trilha li + li::before {
	content: '/';
	margin-right: var(--e2);
	color: var(--linha-forte);
}

.trilha a {
	text-decoration: none;
}

.trilha a:hover {
	color: var(--ox);
}

/* --- Página de produto -------------------------------------------------- */

.produto {
	display: grid;
	gap: var(--e5);
	padding-block: var(--e5) var(--e7);
}

@media (min-width: 64rem) {
	.produto {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--e8);
		padding-block: var(--e6) var(--e9);
	}
}

.produto__foto {
	background: var(--branco);
	border: 1px solid var(--linha);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	padding: var(--e5);
}

/* Sem foto o quadrado grande vira buraco: uma faixa baixa basta para o selo. */
.produto__foto--vazia {
	aspect-ratio: auto;
	min-height: 168px;
	background: var(--concreto-fundo);
	color: var(--linha-forte);
}

.produto__foto img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.produto__marca {
	display: inline-block;
	background: var(--grafite);
	color: var(--branco);
	padding: var(--e1) var(--e3);
	font-family: var(--display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: var(--e3);
}

.produto h1 {
	font-size: clamp(1.6rem, 6vw, 2.6rem);
	font-stretch: 90%;
	text-transform: none;
}

.produto__resumo {
	margin-top: var(--e4);
	color: var(--texto-suave);
}

.produto__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e3);
	margin-block: var(--e5);
}

.especificacoes {
	border: 1px solid var(--linha);
	background: var(--branco);
}

.especificacoes h2 {
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	padding: var(--e3);
	background: var(--concreto);
	border-bottom: 1px solid var(--linha);
}

.especificacoes dl {
	display: grid;
	grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
	margin: 0;
}

@media (min-width: 40rem) {
	.especificacoes dl {
		grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
	}
}

.especificacoes dt,
.especificacoes dd {
	padding: var(--e3);
	border-bottom: 1px solid var(--linha);
	margin: 0;
	font-size: 0.9375rem;
}

.especificacoes dt {
	font-weight: 600;
	color: var(--texto-suave);
	border-right: 1px solid var(--linha);
}

.especificacoes dd {
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.especificacoes dl > :nth-last-child(-n + 2) {
	border-bottom: 0;
}

/* --- Conteúdo editorial ------------------------------------------------- */

.prosa {
	max-width: 68ch;
}

.prosa > * + * {
	margin-top: var(--e4);
}

.prosa h2 {
	margin-top: var(--e6);
	font-size: clamp(1.5rem, 5vw, 2rem);
}

.prosa h3 {
	margin-top: var(--e5);
}

.prosa ul {
	display: grid;
	gap: var(--e2);
}

.prosa ul li {
	padding-left: var(--e5);
	position: relative;
}

.prosa ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 10px;
	height: 2px;
	background: var(--ox);
}

/* --- Paginação ---------------------------------------------------------- */

.paginacao {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2);
	margin-top: var(--e6);
}

.paginacao .page-numbers {
	display: grid;
	place-items: center;
	min-width: 48px;
	height: 48px;
	padding-inline: var(--e3);
	border: 1px solid var(--linha-forte);
	background: var(--branco);
	font-weight: 600;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: background var(--transicao), color var(--transicao);
}

.paginacao .page-numbers:hover,
.paginacao .page-numbers.current {
	background: var(--grafite);
	border-color: var(--grafite);
	color: var(--branco);
}

/* --- Entrada orquestrada ------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.entra {
		animation: entra 620ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
	}

	.entra-1 { animation-delay: 60ms; }
	.entra-2 { animation-delay: 130ms; }
	.entra-3 { animation-delay: 200ms; }
	.entra-4 { animation-delay: 270ms; }

	@keyframes entra {
		from {
			opacity: 0;
			transform: translateY(14px);
			clip-path: inset(0 0 100% 0);
		}
		to {
			opacity: 1;
			transform: none;
			clip-path: inset(0 0 0 0);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Blog: leitura e artigo --------------------------------------------- */

.leituras {
	display: grid;
	gap: var(--e4);
}

@media (min-width: 40rem) {
	.leituras {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.leituras {
		grid-template-columns: repeat(3, 1fr);
	}
}

.leitura {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--branco);
	border: 1px solid var(--linha);
	clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%);
	transition: border-color var(--transicao), transform var(--transicao);
}

.leitura:hover {
	border-color: var(--grafite);
	transform: translateY(-2px);
}

.leitura__foto {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--concreto-fundo);
}

.leitura__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sem foto: o selo faz o papel da capa, como a etiqueta de prateleira do catálogo. */
.leitura__selo {
	display: grid;
	place-items: center;
	height: 84px;
	background: var(--grafite);
	color: var(--sinal);
}

.leitura__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--e2);
	padding: var(--e5);
	flex: 1;
}

.leitura__etiqueta {
	font-family: var(--display);
	font-size: var(--t-min);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ox);
}

.leitura__nome {
	font-size: 1.1875rem;
	line-height: 1.25;
}

.leitura__nome a {
	color: inherit;
	text-decoration: none;
}

.leitura__nome a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.leitura__resumo {
	color: var(--texto-suave);
	font-size: 0.9375rem;
}

.leitura__meta {
	margin-top: auto;
	padding-top: var(--e3);
	font-size: var(--t-min);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aco);
}

.artigo__topo {
	padding-block: var(--e6) var(--e5);
}

.artigo__env {
	max-width: 48rem;
	margin-inline: auto;
}

.artigo__meta {
	font-family: var(--display);
	font-size: var(--t-min);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ox);
	margin-bottom: var(--e3);
}

.artigo__titulo {
	font-size: clamp(2rem, 6.5vw, 3rem);
	line-height: 1.05;
}

/* Traço curto de óxido acima da linha de apoio — a mesma marca dos itens de lista. */
.artigo__linha {
	margin-top: var(--e5);
	padding-top: var(--e4);
	font-size: 1.1875rem;
	color: var(--texto-suave);
	position: relative;
}

.artigo__linha::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 2px;
	background: var(--ox);
}

.artigo__capa {
	margin-bottom: var(--e6);
	border: 1px solid var(--linha);
}

.artigo__capa img {
	width: 100%;
	height: auto;
}

.prosa--artigo {
	max-width: none;
	padding-bottom: var(--e7);
}

.prosa a {
	color: var(--ox);
	text-underline-offset: 3px;
}

.prosa a:hover {
	color: var(--ox-600);
}

.prosa ol {
	display: grid;
	gap: var(--e2);
	padding-left: var(--e5);
}

.prosa table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

/* Tabela larga rola dentro do próprio bloco: a página nunca rola de lado. */
.prosa figure.wp-block-table {
	overflow-x: auto;
	border: 1px solid var(--linha-forte);
	background: var(--branco);
}

.prosa th,
.prosa td {
	padding: var(--e3);
	border-bottom: 1px solid var(--linha);
	text-align: left;
	vertical-align: top;
}

.prosa thead th {
	background: var(--grafite);
	color: var(--branco);
	font-family: var(--display);
	font-size: var(--t-min);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 0;
}

.prosa tbody tr:last-child td {
	border-bottom: 0;
}

/* Chapa branca com traço de aço e canto cortado — mesma construção da ficha. */
.prosa blockquote {
	background: var(--branco);
	border: 1px solid var(--linha-forte);
	clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%);
	padding: var(--e5);
	font-size: 1.0625rem;
}

.artigo__fecho {
	display: grid;
	gap: var(--e4);
	background: var(--grafite);
	color: var(--branco);
	padding: var(--e6);
	margin-bottom: var(--e7);
}

.artigo__fecho-texto {
	max-width: 46ch;
}

.artigo__fecho-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e3);
}

/* --- Utilidades --------------------------------------------------------- */

.bloqueado {
	overflow: hidden;
}

.oculto {
	display: none !important;
}

/* display:flex/grid nos componentes vence o [hidden] do navegador — aqui não vence. */
[hidden] {
	display: none !important;
}