/**
 * RAVOLLI — MATERIAIS v1.7.0
 * Camada: Blocksy Child (apresentação). Página /materiais/.
 * Fonte visual: docs/prototipos/materiais-ravolli.html (v5). Tokens: theme.json.
 * Carregado só na página que usa (ver inc/ravolli-materiais.php).
 *
 * 1.1.0 (rodada 2): sem faixas entre dobras; inner container das dobras com
 * 1200px centralizado (vence o margin:0 do core); texto claro cheio sobre foto;
 * dobras e seções claras em duas colunas no desktop (>= 900px).
 *
 * 1.1.1 (hotfix 2.1): o inner container do cover tem z-index `auto` neste
 * WordPress/Blocksy, então o ::after do degradê (depois no DOM) pintava por
 * cima do texto. Container agora em z-index 1; com o texto acima, o degradê
 * fica mais leve.
 *
 * 1.2.0: dobras, botões, FAQ e topo colado foram para ravolli-folds.css
 * (compartilhado com a página Sobre). Aqui ficam só os módulos e as seções
 * próprias da página. Visual do Materiais inalterado.
 *
 * 1.2.1 (01/10/2026): a seção de dúvidas (`.ravolli-materiais__faq`) passou para
 * ravolli-faq.css (componente compartilhado). Visual do Materiais inalterado.
 *
 * 1.2.2 (01/10/2026): o "+"/"–" dos mitos (`.ravolli-mito`) virou a seta "V serifado"
 * (token `--ravolli-chevron`, declarado em ravolli-faq.css, dependência deste arquivo).
 *
 * 1.3.0 (03/10/2026): pedra da régua em perfil (não quadrada): largura = diâmetro,
 * altura automática, contorno por drop-shadow; o container reserva a altura do
 * maior diâmetro (8 mm).
 *
 * 1.3.1 (03/10/2026): dobra "A pedra" com degradê preto (`--rm-fade-rgb: 0, 0, 0`).
 *
 * 1.4.0 (03/10/2026): a barra do ouro acompanha o quilate: larguras por `--au`/`--liga`
 * (definidas no HTML e trocadas pelo JS), com transição de 300 ms.
 *
 * 1.5.0 (03/10/2026): preenchimento editável: imagem > cor > padrão (`--rm-au-img`,
 * `--rm-au-cor`, `--rm-liga-cor`, e as variantes `-branco`). Texto com contraste AA:
 * véu claro sobre imagem; cor de texto escolhida no servidor sobre cor.
 *
 * 1.5.1 (05/10/2026): a liga também aceita imagem (`--rm-liga-img`), com o mesmo véu claro.
 *
 * 1.6.0 (05/10/2026): uma liga para cada ouro: com `.is-branco` a barra usa as variantes
 * `--rm-liga-*-branco` (fundo, texto, véu), com o mesmo padrão da liga amarela.
 *
 * 1.7.0 (05/10/2026, rodada 3): abertura com título (h1 + apoio centralizados, degradê
 * próprio); dobras brancas de texto (`.ravolli-materiais__texto`); módulo do ouro em
 * dois modos dentro de dobra de mídia (painel claro); selo "só 18k"; dureza com 5 pontos.
 */

/* Abertura só com foto (sem h1 por cima): sem escurecimento. Com h1, vale o bloco "Abertura com título" abaixo. */
.wp-block-cover.ravolli-fold.ravolli-fold--abertura:not(:has(.wp-block-cover__inner-container h1))::after {
	content: none;
}

/*
 * Abertura com título (1.7.0): eyebrow + h1 + frase de apoio centralizados e ancorados
 * embaixo. Só vale quando o inner container tem h1 (a página publicada sem h1 não muda).
 *
 * O tamanho e a altura de linha dos títulos vêm de variáveis (o style.css legado crava
 * `font-size` com !important lendo --ravolli-title-*): o h1 é dimensionado por
 * --ravolli-title-display, definida na própria dobra.
 *
 * Altura: vem do bloco (a Ana ajusta no editor, 60vh). O min-height inline do cover não
 * se vence sem !important, então o piso de 420px fica no inner container (flex em coluna
 * que empurra o texto para baixo); a dobra cresce junto se o bloco pedir menos.
 */
.ravolli-materiais .wp-block-cover.ravolli-fold.ravolli-fold--abertura:has(> .wp-block-cover__inner-container h1) {
	--ravolli-title-display: clamp(40px, 6vw, 72px);
	--ravolli-title-line-height: 1.08;
	/* Degradê só nesta dobra, de baixo para cima: firme na base (78%) e ainda >= 50% na altura do h1, para o AA do título sobre qualquer foto. */
	--rm-fold-grad: linear-gradient(to top, rgba(var(--rm-fade-rgb), .78) 0%, rgba(var(--rm-fade-rgb), .62) 50%, rgba(var(--rm-fade-rgb), .30) 100%);
}

.ravolli-materiais .wp-block-cover.ravolli-fold.ravolli-fold--abertura:has(> .wp-block-cover__inner-container h1) > .wp-block-cover__inner-container {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 420px;
	padding-block-end: 40px;
	text-align: center;
}

.ravolli-materiais .wp-block-cover.ravolli-fold.ravolli-fold--abertura:has(> .wp-block-cover__inner-container h1) > .wp-block-cover__inner-container > * {
	margin-inline: auto;
}

.ravolli-materiais .wp-block-cover.ravolli-fold.ravolli-fold--abertura:has(> .wp-block-cover__inner-container h1) > .wp-block-cover__inner-container > p.ravolli-eyebrow {
	/* Dourado é decorativo (falha contraste como texto): sobre a foto o eyebrow vai em claro. */
	color: var(--rm-on-navy);
}

.ravolli-materiais .wp-block-cover.ravolli-fold.ravolli-fold--abertura:has(> .wp-block-cover__inner-container h1) > .wp-block-cover__inner-container > h1.wp-block-heading {
	max-width: 16ch;
}

.ravolli-materiais .wp-block-cover.ravolli-fold.ravolli-fold--abertura:has(> .wp-block-cover__inner-container h1) > .wp-block-cover__inner-container > p.ravolli-fold__lead {
	max-width: 40ch;
	font-size: clamp(17px, 1.4vw, 20px);
	color: var(--rm-on-navy);
}

@media (min-width: 900px) {
	.ravolli-materiais .wp-block-cover.ravolli-fold.ravolli-fold--abertura:has(> .wp-block-cover__inner-container h1) > .wp-block-cover__inner-container {
		padding-block-end: 56px;
	}
}

/*
 * Dobras de mídia mais curtas (1.7.0), só no Materiais: a altura vem do bloco (nada fixo aqui),
 * então o ganho está no respiro do conteúdo: 72px/48px (celular 56px/40px) em vez de 96/64
 * (72/48 no celular) do componente compartilhado. Mesma especificidade da regra de
 * ravolli-folds.css (que é dependência deste arquivo e carrega antes); a Sobre não é tocada.
 * A abertura com título tem o seu próprio respiro embaixo (bloco acima, mais específico).
 */
.ravolli-materiais .wp-block-cover.ravolli-fold.has-custom-content-position.has-custom-content-position > .wp-block-cover__inner-container {
	padding-block: 56px 40px;
}

@media (min-width: 900px) {
	.ravolli-materiais .wp-block-cover.ravolli-fold.has-custom-content-position.has-custom-content-position > .wp-block-cover__inner-container {
		padding-block: 72px 48px;
	}
}

/* Dobra "A pedra": degradê preto em vez de marinho (só a cor; opacidades e direções vêm de ravolli-folds.css). */
.ravolli-materiais .wp-block-cover.ravolli-fold--pedra {
	--rm-fade-rgb: 0, 0, 0;
}

/* Dobra da pedra: texto à esquerda, ficha (.ravolli-pedras) à direita. */
.ravolli-materiais .wp-block-cover.ravolli-fold .wp-block-cover__inner-container > .ravolli-pedras {
	margin-top: 32px;
}

@media (min-width: 900px) {
	.ravolli-materiais .wp-block-cover.ravolli-fold--pedra > .wp-block-cover__inner-container {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		/* Linhas flexíveis em cima e embaixo centralizam o texto na altura da ficha. */
		grid-template-rows: 1fr auto auto auto 1fr;
		column-gap: 72px;
		row-gap: 0;
		align-items: start;
	}

	.ravolli-materiais .wp-block-cover.ravolli-fold--pedra .wp-block-cover__inner-container > p.ravolli-eyebrow {
		grid-column: 1;
		grid-row: 2;
	}

	.ravolli-materiais .wp-block-cover.ravolli-fold--pedra .wp-block-cover__inner-container > h2.wp-block-heading {
		grid-column: 1;
		grid-row: 3;
	}

	.ravolli-materiais .wp-block-cover.ravolli-fold--pedra .wp-block-cover__inner-container > p.ravolli-fold__lead {
		grid-column: 1;
		grid-row: 4;
	}

	.ravolli-materiais .wp-block-cover.ravolli-fold--pedra .wp-block-cover__inner-container > .ravolli-pedras {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: center;
		margin-top: 0;
	}
}

/* Ficha das pedras (blocos de colunas; texto editável no editor). */
.ravolli-pedras {
	gap: 12px;
}

.ravolli-materiais .wp-block-cover.ravolli-fold .ravolli-pedras .wp-block-column {
	padding: 22px;
	border: 1px solid color-mix(in srgb, var(--rm-bg) 22%, transparent);
	border-radius: 6px;
	background: color-mix(in srgb, var(--rm-navy) 45%, transparent);
}

.ravolli-materiais .wp-block-cover.ravolli-fold .ravolli-pedras .wp-block-column > * {
	margin-block: 0;
}

.ravolli-materiais .wp-block-cover.ravolli-fold .ravolli-pedras h3.wp-block-heading {
	font-family: var(--rm-display);
	font-weight: 400;
	color: var(--rm-on-navy);
}

.ravolli-materiais .wp-block-cover.ravolli-fold .wp-block-cover__inner-container .ravolli-pedras p {
	max-width: none;
	font-size: 15px;
	color: var(--rm-on-navy);
}

.ravolli-materiais .wp-block-cover.ravolli-fold .wp-block-cover__inner-container .ravolli-pedras .wp-block-column > p.ravolli-pedras__k {
	margin-top: 14px;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rm-gold);
}

.ravolli-materiais .wp-block-cover.ravolli-fold .wp-block-cover__inner-container .ravolli-pedras .wp-block-column > h3 + p.ravolli-pedras__k {
	margin-top: 10px;
}

/* ---------------------------------------------------------------------
 * Faixa do título (abaixo da foto de abertura)
 * ------------------------------------------------------------------ */

.ravolli-materiais__titulo {
	padding-block: 56px;
	padding-inline: 24px;
	background: var(--rm-bg);
	text-align: center;
}

@media (min-width: 900px) {
	.ravolli-materiais__titulo {
		padding-block: 88px;
	}
}

.ravolli-materiais__titulo.is-layout-constrained > * {
	max-width: none;
	margin-inline: auto;
}

.ravolli-materiais__titulo .ravolli-eyebrow {
	margin-bottom: 14px;
}

.ravolli-materiais .ravolli-materiais__titulo h1.wp-block-heading {
	max-width: 22ch;
	margin-block: 0;
	font-family: var(--rm-display);
	font-weight: 400;
	text-wrap: balance;
	color: var(--rm-navy);
}

.ravolli-materiais .ravolli-materiais__titulo h1.wp-block-heading em {
	font-style: italic;
	color: var(--rm-gold-text);
}

/* ---------------------------------------------------------------------
 * Seções claras
 * ------------------------------------------------------------------ */

.ravolli-materiais__ouro,
.ravolli-materiais__tamanho,
.ravolli-materiais__mitos,
.ravolli-materiais__dominio {
	padding-block: 64px;
	padding-inline: 24px;
	background: var(--rm-bg);
	color: var(--rm-text);
}

.ravolli-materiais__ouro,
.ravolli-materiais__dominio {
	background: var(--rm-alt);
	/* O grupo é constrained (1280px): a faixa sangra até as bordas da janela. */
	box-shadow: 0 0 0 100vmax var(--rm-alt);
	clip-path: inset(0 -100vmax);
}

@media (min-width: 900px) {
	.ravolli-materiais__ouro,
	.ravolli-materiais__tamanho,
	.ravolli-materiais__mitos,
	.ravolli-materiais__dominio {
		padding-block: 104px;
	}
}

.ravolli-materiais__ouro.is-layout-constrained > *,
.ravolli-materiais__tamanho.is-layout-constrained > *,
.ravolli-materiais__mitos.is-layout-constrained > *,
.ravolli-materiais__dominio.is-layout-constrained > * {
	max-width: 1200px;
	margin-inline: auto;
}

.ravolli-materiais :is(.ravolli-materiais__ouro, .ravolli-materiais__tamanho, .ravolli-materiais__mitos, .ravolli-materiais__dominio) h2.wp-block-heading {
	font-family: var(--rm-display);
	font-weight: 400;
	line-height: 1.12;
	color: var(--rm-navy);
	text-wrap: balance;
}

.ravolli-materiais :is(.ravolli-materiais__ouro, .ravolli-materiais__tamanho, .ravolli-materiais__mitos, .ravolli-materiais__dominio) h2.wp-block-heading em {
	font-style: italic;
	color: var(--rm-gold-text);
}

/*
 * Dobra branca de texto (1.7.0): wp:group `.ravolli-materiais__texto` entre as dobras de mídia.
 * Eyebrow (opcional) + h2 + parágrafo + nota (`.ravolli-materiais__nota`, onde entra a Legor),
 * tudo centralizado, sem altura mínima. Largura total sem faixas: o margin-block 0 vem de
 * `.ravolli-materiais > *` (ravolli-folds.css). O h2 usa --ravolli-title-section (o style.css
 * legado crava font-size com !important lendo a variável).
 */
.ravolli-materiais__texto {
	--ravolli-title-section: clamp(28px, 3.4vw, 44px);
	padding-block: 56px;
	padding-inline: 24px;
	background: var(--rm-bg);
	color: var(--rm-text);
	text-align: center;
}

@media (min-width: 900px) {
	.ravolli-materiais__texto {
		padding-block: 80px;
	}
}

.ravolli-materiais__texto.is-layout-constrained > * {
	max-width: none;
	margin-inline: auto;
}

.ravolli-materiais .ravolli-materiais__texto > * + * {
	margin-top: 16px;
}

.ravolli-materiais .ravolli-materiais__texto > .ravolli-eyebrow {
	margin-bottom: 0;
}

.ravolli-materiais .ravolli-materiais__texto > h2.wp-block-heading {
	max-width: 22ch;
	margin-block-end: 0;
	font-family: var(--rm-display);
	font-weight: 400;
	line-height: 1.12;
	text-wrap: balance;
	color: var(--rm-navy);
}

.ravolli-materiais .ravolli-materiais__texto > h2.wp-block-heading em {
	font-style: italic;
	color: var(--rm-gold-text);
}

.ravolli-materiais .ravolli-materiais__texto > p:not(.ravolli-eyebrow) {
	max-width: 46ch;
	font-size: clamp(17px, 1.3vw, 19px);
	color: var(--rm-text);
}

.ravolli-materiais .ravolli-materiais__texto > p.ravolli-materiais__nota {
	max-width: 52ch;
	font-size: 15px;
	color: var(--rm-text-2);
}

/* Filete dourado de 40px, centralizado, acima da nota. */
.ravolli-materiais .ravolli-materiais__texto > p.ravolli-materiais__nota::before {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	margin: 0 auto 16px;
	background: var(--rm-gold);
}

/* Régua de tamanho no celular: mesma tipografia das dobras brancas de texto. */
@media (max-width: 899px) {
	.ravolli-materiais__tamanho {
		--ravolli-title-section: clamp(28px, 3.4vw, 44px);
	}

	.ravolli-materiais .ravolli-materiais__tamanho > p:not(.ravolli-eyebrow) {
		font-size: clamp(17px, 1.3vw, 19px);
		color: var(--rm-text);
	}
}

.ravolli-numeral {
	margin: 0;
	font-family: var(--rm-display);
	font-size: clamp(84px, 12vw, 150px);
	line-height: .9;
	letter-spacing: -.02em;
	color: var(--rm-gold-text);
	font-variant-numeric: tabular-nums;
}

.ravolli-numeral-label {
	margin: 12px 0 0;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--rm-text-2);
}

/* Ouro (desktop): numeral, rótulo e parágrafo à esquerda; módulo à direita. */
@media (min-width: 900px) {
	.ravolli-materiais__ouro {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		grid-template-rows: 1fr auto auto auto 1fr;
		column-gap: 80px;
		row-gap: 0;
		align-items: start;
	}

	.ravolli-materiais__ouro.is-layout-constrained > * {
		grid-column: 1;
		max-width: none;
		margin-inline: 0;
	}

	.ravolli-materiais__ouro > .ravolli-numeral {
		grid-row: 2;
	}

	.ravolli-materiais__ouro > .ravolli-numeral-label {
		grid-row: 3;
	}

	.ravolli-materiais__ouro > p:not(.ravolli-numeral):not(.ravolli-numeral-label) {
		grid-row: 4;
		max-width: 46ch;
		margin-top: 24px;
	}

	.ravolli-materiais__ouro > .ravolli-mat {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: center;
	}
}

/* Tamanho (desktop): texto e régua à esquerda, pedra à direita na altura toda. */
@media (min-width: 900px) {
	.ravolli-materiais__tamanho {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		grid-template-rows: 1fr repeat(7, auto) 1fr;
		column-gap: 80px;
		row-gap: 0;
		align-items: start;
	}

	.ravolli-materiais__tamanho.is-layout-constrained > * {
		grid-column: 1;
		max-width: none;
		margin-inline: 0;
	}

	.ravolli-materiais__tamanho > .ravolli-eyebrow {
		grid-row: 2;
	}

	.ravolli-materiais__tamanho > h2.wp-block-heading {
		grid-row: 3;
		margin-block: 0;
	}

	.ravolli-materiais__tamanho > p:not(.ravolli-eyebrow) {
		grid-row: 4;
		max-width: 46ch;
		margin-top: 24px;
	}

	/* Os filhos do módulo viram itens da grade: a pedra sai da coluna da régua. */
	.ravolli-materiais__tamanho > .ravolli-mat-tamanho {
		display: contents;
	}

	.ravolli-mat-tamanho__label {
		grid-column: 1;
		grid-row: 5;
		margin-top: 28px;
	}

	.ravolli-mat-tamanho input[type="range"] {
		grid-column: 1;
		grid-row: 6;
	}

	.ravolli-mat-tamanho__readout {
		grid-column: 1;
		grid-row: 7;
		margin-top: 8px;
	}

	.ravolli-mat-tamanho__note {
		grid-column: 1;
		grid-row: 8;
		margin-top: 16px;
	}

	.ravolli-mat-tamanho__stone {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: stretch;
		min-height: 420px;
	}
}

/* Mitos: cartões em 2 colunas a partir de 720px. */
.ravolli-materiais__mitos {
	display: grid;
	gap: 12px;
	align-items: start;
}

.ravolli-materiais__mitos > :not(.ravolli-mito) {
	grid-column: 1 / -1;
}

@media (min-width: 720px) {
	.ravolli-materiais__mitos {
		grid-template-columns: 1fr 1fr;
	}
}

.ravolli-mito {
	border: 1px solid var(--rm-line);
	border-radius: 6px;
	background: var(--rm-bg);
	padding: 20px 20px 18px;
	margin: 0;
}

.ravolli-materiais__mitos .ravolli-mito {
	max-width: none;
	margin-inline: 0;
}

.ravolli-mito__tag {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rm-gold-text);
}

/* Mitos: pergunta em Lora, +/– dourado (mesma receita do FAQ compartilhado). */
.ravolli-mito > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	font-family: var(--rm-display);
	font-size: 19px;
	font-weight: 400;
	color: var(--rm-navy);
}

.ravolli-mito > summary::-webkit-details-marker {
	display: none;
}

.ravolli-mito > summary::after {
	content: "";
	flex: 0 0 auto;
	align-self: center;
	width: 13px;
	height: 20px;
	background-color: var(--rm-gold-text);
	-webkit-mask: var(--ravolli-chevron) center / contain no-repeat;
	mask: var(--ravolli-chevron) center / contain no-repeat;
	transition: transform .3s ease;
}

.ravolli-mito[open] > summary::after {
	transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
	.ravolli-mito > summary::after {
		transition: none;
	}
}

.ravolli-mito > summary:focus-visible {
	outline: 2px solid var(--rm-gold);
	outline-offset: 2px;
}

.ravolli-mito > :not(summary) {
	color: var(--rm-text-2);
	max-width: 60ch;
}

/* Recap ("Agora você sabe") e "o que acompanha". */
.ravolli-recap .wp-block-column,
.ravolli-receive .wp-block-column {
	padding-top: 14px;
	border-top: 1px solid var(--rm-gold);
}

.ravolli-recap__num {
	margin: 0 0 6px;
	font-family: var(--rm-display);
	font-weight: 400;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.1;
	color: var(--rm-gold-text);
}

.ravolli-recap p:not(.ravolli-recap__num) {
	font-size: 15px;
	color: var(--rm-text-2);
}

/* Fecho: centrado; só as colunas "o que acompanha" ficam alinhadas à esquerda. */
.ravolli-materiais .wp-block-cover.ravolli-fold--fecho .wp-block-cover__inner-container {
	text-align: center;
}

.ravolli-materiais .wp-block-cover.ravolli-fold .ravolli-receive {
	text-align: left;
	--ravolli-title-subsection: 18px;
}

.ravolli-materiais .wp-block-cover.ravolli-fold .ravolli-receive .wp-block-column > * {
	margin-block: 0;
}

.ravolli-materiais .wp-block-cover.ravolli-fold .ravolli-receive h3.wp-block-heading {
	margin-bottom: 6px;
	font-family: var(--rm-display);
	font-weight: 400;
	color: var(--rm-on-navy);
}

.ravolli-materiais .wp-block-cover.ravolli-fold .wp-block-cover__inner-container .ravolli-receive p {
	font-size: 14px;
	max-width: none;
	color: var(--rm-on-navy-2);
}

/* ---------------------------------------------------------------------
 * Módulos (shortcodes) — base
 * ------------------------------------------------------------------ */

.ravolli-mat {
	display: grid;
	gap: 16px;
	font-family: var(--rm-body);
}

.ravolli-mat button {
	font-family: inherit;
	color: inherit;
}

.ravolli-mat button:focus-visible,
.ravolli-mat input:focus-visible {
	outline: 2px solid var(--rm-gold);
	outline-offset: 2px;
}

/* Ouro */
.ravolli-mat-seg {
	display: inline-flex;
	justify-self: start;
	max-width: 100%;
	padding: 3px;
	gap: 2px;
	border: 1px solid var(--rm-line);
	border-radius: 999px;
	background: var(--rm-bg);
}

.ravolli-mat-seg button {
	min-height: 44px;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 14px;
	cursor: pointer;
}

.ravolli-mat-seg button[aria-pressed="true"] {
	background: var(--rm-navy);
	color: var(--rm-on-navy);
}

.ravolli-mat-bar {
	display: flex;
	height: 96px;
	border-radius: 4px;
	overflow: hidden;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ravolli-mat-bar > div {
	display: flex;
	align-items: flex-end;
	position: relative;
	/* Largura fiel ao teor: sem padding no segmento (ele ficaria fora do flex-basis) e o rótulo quebra de linha. */
	min-width: 0;
	overflow: hidden;
	transition: background .5s ease, flex-grow .3s ease;
}

.ravolli-mat-bar > div > span {
	display: block;
	padding: 10px 12px;
}

/* Segmento estreito (liga do 24k): sem rótulo na vista (segue para o leitor de tela), sem o respiro lateral. */
.ravolli-mat-bar > div.is-narrow {
	min-width: 2px;
}

.ravolli-mat-bar > div.is-narrow > span {
	position: absolute;
	padding: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Textura do ouro: foto (variável do shortcode, vinda de Aparência → Ravolli — Materiais) ou o gradiente. */
.ravolli-mat-bar__au {
	flex: var(--au, 75) 1 0%;
	background: var(--rm-au-img, var(--rm-au-cor, linear-gradient(135deg, color-mix(in srgb, var(--rm-gold) 75%, var(--rm-bg)), var(--rm-gold) 60%, color-mix(in srgb, var(--rm-gold) 80%, var(--rm-navy))))) center / cover;
	color: var(--rm-au-ink, var(--rm-navy));
	text-shadow: var(--rm-au-shadow, 0 0 12px color-mix(in srgb, var(--rm-bg) 60%, transparent));
}

.ravolli-mat-bar__liga {
	flex: var(--liga, 25) 1 0%;
	background: var(--rm-liga-img, var(--rm-liga-cor, var(--rm-navy))) center / cover;
	color: var(--rm-liga-ink, var(--rm-on-navy));
}

/* Sobre imagem, o rótulo da liga ganha o mesmo véu claro dos ouros, com texto marinho. */
.ravolli-mat-bar__liga > span {
	background: var(--rm-liga-veil, transparent);
	color: var(--rm-liga-veil-ink, inherit);
}

/* Ouro branco: a liga também troca (imagem > cor > padrão, cada uma com as suas variáveis). */
.ravolli-mat-bar.is-branco .ravolli-mat-bar__liga {
	background: var(--rm-liga-img-branco, var(--rm-liga-cor-branco, var(--rm-navy))) center / cover;
	color: var(--rm-liga-ink-branco, var(--rm-on-navy));
}

.ravolli-mat-bar.is-branco .ravolli-mat-bar__liga > span {
	background: var(--rm-liga-veil-branco, transparent);
	color: var(--rm-liga-veil-ink-branco, inherit);
}

.ravolli-mat-bar.is-branco .ravolli-mat-bar__au {
	background: var(--rm-au-img-branco, var(--rm-au-cor-branco, linear-gradient(135deg, var(--wp--preset--color--surface-alt-strong), color-mix(in srgb, var(--wp--preset--color--surface-alt-strong) 80%, var(--rm-navy)) 60%, color-mix(in srgb, var(--wp--preset--color--surface-alt-strong) 65%, var(--rm-navy))))) center / cover;
	color: var(--rm-au-ink-branco, var(--rm-navy));
	text-shadow: var(--rm-au-shadow-branco, 0 0 12px color-mix(in srgb, var(--rm-bg) 60%, transparent));
}

/* Sobre imagem o rótulo ganha um véu claro (--rm-au-veil, definido só quando há foto): AA sobre qualquer foto. */
.ravolli-mat-bar__au > span {
	background: var(--rm-au-veil, transparent);
}

.ravolli-mat-bar.is-branco .ravolli-mat-bar__au > span {
	background: var(--rm-au-veil-branco, transparent);
}

.ravolli-mat-liga {
	margin: 0;
	font-size: 14px;
	color: var(--rm-text-2);
}

.ravolli-mat-karats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.ravolli-mat-karats button {
	display: grid;
	gap: 2px;
	min-height: 60px;
	padding: 12px 6px;
	border: 1px solid var(--rm-line);
	border-radius: 4px;
	background: var(--rm-bg);
	text-align: center;
	cursor: pointer;
}

.ravolli-mat-karats b {
	font-family: var(--rm-display);
	font-size: 22px;
	font-weight: 400;
	color: var(--rm-navy);
}

.ravolli-mat-karats small {
	font-size: 12px;
	color: var(--rm-text-2);
}

.ravolli-mat-karats button[aria-pressed="true"] {
	border-color: var(--rm-gold);
	background: color-mix(in srgb, var(--rm-gold) 14%, var(--rm-bg));
}

/*
 * Selo "só 18k" (1.7.0): etiqueta sob a fileira de quilates, centrada no eixo do botão 18k,
 * com uma seta apontando para ele. Não é botão nem link. O 18k é a 2ª de 4 colunas (gap 8px):
 * o centro dele fica a 37,5% da largura menos 1px (1,5 coluna + gap). A etiqueta pode ser mais
 * larga que o botão, mas nunca sai do módulo: --t (deslocamento horizontal) é limitado às duas
 * bordas, e a seta (left = -t) segue o eixo mesmo quando a etiqueta encosta na borda (320px).
 * `cqw` = largura útil do módulo (container-type abaixo); sem suporte, a etiqueta fica à esquerda.
 *
 * `width: 100%` é obrigatório junto do container-type: o core crava `margin: auto !important`
 * nos filhos de grupo constrained, e um item de grid com margem auto encolhe ao conteúdo, que
 * com inline-size containment é 0 (o módulo sumia no grupo claro do desktop).
 */
.ravolli-mat-ouro {
	box-sizing: border-box;
	width: 100%;
	container-type: inline-size;
}

.ravolli-mat-selo {
	justify-self: start;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	max-width: 100%;
	margin-top: -6px;
	padding: 6px 12px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--rm-gold) 14%, var(--rm-bg));
	box-shadow: 0 0 0 1px var(--rm-gold);
	font-size: 13px;
	line-height: 1.3;
	color: var(--rm-navy);
}

.ravolli-mat-selo img {
	display: block;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	height: 16px;
}

@supports (width: 1cqw) {
	.ravolli-mat-selo {
		--axis: calc(37.5cqw - 1px);
		--t: clamp(calc(-1 * var(--axis)), -50%, calc(100cqw - 100% - var(--axis)));
		position: relative;
		left: var(--axis);
		transform: translateX(var(--t));
	}

	.ravolli-mat-selo::before {
		content: "";
		position: absolute;
		top: -5px;
		left: calc(-1 * var(--t));
		width: 9px;
		height: 9px;
		border-top: 1px solid var(--rm-gold);
		border-left: 1px solid var(--rm-gold);
		background: color-mix(in srgb, var(--rm-gold) 14%, var(--rm-bg));
		transform: translateX(-50%) rotate(45deg);
	}
}

.ravolli-mat-note {
	margin: 0;
	min-height: 3.2em;
	padding-left: 16px;
	border-left: 2px solid var(--rm-gold);
	color: var(--rm-text-2);
}

/*
 * Ouro dentro de dobra de mídia (1.7.0, modos quilate e cor): o módulo foi desenhado para fundo
 * claro, então ganha um painel claro em vez de ter as cores reescritas. O painel é OPACO
 * (bg-base): a 92% sobre foto escura o fundo efetivo vira ~#e7e8e8 e o text-secondary
 * (#737373) cai de 4,54:1 para 3,87:1, abaixo de AA. O escopo da dobra pinta todo `p` em claro
 * (4 classes), por isso a cor e o tamanho dos parágrafos do módulo são devolvidos aqui.
 */
.ravolli-materiais .wp-block-cover.ravolli-fold .wp-block-cover__inner-container .ravolli-mat-ouro {
	box-sizing: border-box;
	width: 100%;
	max-width: 560px;
	padding: 18px;
	border-radius: 6px;
	background: var(--rm-bg);
	color: var(--rm-text);
}

.ravolli-materiais .wp-block-cover.ravolli-fold .wp-block-cover__inner-container > .ravolli-mat-ouro {
	margin-top: 32px;
}

.ravolli-materiais .wp-block-cover.ravolli-fold .wp-block-cover__inner-container .ravolli-mat-ouro p {
	max-width: none;
	color: var(--rm-text-2);
}

.ravolli-materiais .wp-block-cover.ravolli-fold .wp-block-cover__inner-container .ravolli-mat-ouro p.ravolli-mat-liga {
	font-size: 14px;
}

.ravolli-materiais .wp-block-cover.ravolli-fold .wp-block-cover__inner-container .ravolli-mat-ouro p.ravolli-mat-note {
	font-size: 16px;
}

@media (min-width: 600px) {
	.ravolli-materiais .wp-block-cover.ravolli-fold .wp-block-cover__inner-container .ravolli-mat-ouro {
		padding: 24px;
	}
}

/* Desktop: texto da dobra à esquerda, painel à direita (mesma técnica da dobra da pedra). */
@media (min-width: 900px) {
	.ravolli-materiais .wp-block-cover.ravolli-fold:has(> .wp-block-cover__inner-container > .ravolli-mat-ouro) > .wp-block-cover__inner-container {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		grid-template-rows: 1fr auto auto auto 1fr;
		column-gap: 72px;
		row-gap: 0;
		align-items: start;
	}

	.ravolli-materiais .wp-block-cover.ravolli-fold .wp-block-cover__inner-container > p.ravolli-eyebrow:has(~ .ravolli-mat-ouro) {
		grid-column: 1;
		grid-row: 2;
	}

	.ravolli-materiais .wp-block-cover.ravolli-fold .wp-block-cover__inner-container > h2.wp-block-heading:has(~ .ravolli-mat-ouro) {
		grid-column: 1;
		grid-row: 3;
	}

	.ravolli-materiais .wp-block-cover.ravolli-fold .wp-block-cover__inner-container > p.ravolli-fold__lead:has(~ .ravolli-mat-ouro) {
		grid-column: 1;
		grid-row: 4;
	}

	.ravolli-materiais .wp-block-cover.ravolli-fold .wp-block-cover__inner-container > .ravolli-mat-ouro {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: center;
		justify-self: end;
		margin-top: 0;
	}
}

/* Pedra (dentro da dobra escura) */
.ravolli-mat-pedra {
	gap: 14px;
	max-width: 560px;
	color: var(--rm-on-navy);
}

.ravolli-mat-pedra__row {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 12px;
	align-items: center;
}

@media (max-width: 520px) {
	.ravolli-mat-pedra__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

.ravolli-mat-pedra__label {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rm-on-navy-2);
}

.ravolli-mat-pedra__track {
	display: grid;
	gap: 5px;
}

.ravolli-mat-pedra__fill {
	position: relative;
	height: 16px;
	border-radius: 3px;
	overflow: hidden;
	background: color-mix(in srgb, var(--rm-bg) 16%, transparent);
}

.ravolli-mat-pedra__fill i {
	position: absolute;
	inset: 0;
	width: var(--w);
	background: var(--rm-gold);
	transition: width .8s cubic-bezier(.2, .7, .2, 1);
}

.ravolli-mat-pedra__fill--dia i {
	background: color-mix(in srgb, var(--rm-bg) 60%, transparent);
}

.ravolli-mat-pedra__fill span {
	position: absolute;
	right: 8px;
	top: 0;
	line-height: 16px;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--rm-on-navy);
}

/* Repouso = cheio; com JS, arma em 0 e enche ao entrar na tela. */
.ravolli-mat-pedra.is-armed:not(.is-in) .ravolli-mat-pedra__fill i {
	width: 0;
}

.ravolli-mat-pedra__key {
	display: flex;
	gap: 18px;
	margin: 0;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--rm-on-navy-2);
}

.ravolli-mat-pedra__key i {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	border-radius: 2px;
	background: var(--rm-gold);
}

.ravolli-mat-pedra__key i.ravolli-mat-pedra__key-dia {
	background: color-mix(in srgb, var(--rm-bg) 60%, transparent);
}

/* Tamanho */
/* --dmax = diâmetro de 8 mm (mesma fórmula de ravolli_materiais_stone_diameter()); --ar = altura/largura da foto. */
.ravolli-mat-tamanho__stone {
	--dmax: 188px;
	display: grid;
	place-items: center;
	min-height: max(260px, calc(var(--dmax) * var(--ar, 1)));
}

@media (min-width: 900px) {
	.ravolli-mat-tamanho__stone {
		--dmax: 310px;
	}
}

.ravolli-mat-tamanho__stone svg {
	width: var(--d);
	height: var(--d);
	transition: width .3s, height .3s;
}

/* Foto real da pedra (campo "pedra_regua"): escala pela mesma variável --d. */
.ravolli-mat-tamanho__img {
	display: block;
	width: var(--d);
	max-width: none;
	height: auto;
	/* Pedra clara sobre fundo claro: contorno suave, sem caixa atrás. */
	filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--rm-navy) 35%, transparent)) drop-shadow(0 6px 14px color-mix(in srgb, var(--rm-navy) 18%, transparent));
	transition: width .3s;
}

.ravolli-mat-tamanho__label {
	display: flex;
	justify-content: space-between;
	color: var(--rm-text);
}

.ravolli-mat-tamanho__label b {
	font-variant-numeric: tabular-nums;
	color: var(--rm-navy);
}

.ravolli-mat-tamanho input[type="range"] {
	width: 100%;
	min-height: 44px;
	accent-color: var(--rm-gold);
}

.ravolli-mat-tamanho__readout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ravolli-mat-tamanho__readout > div {
	display: grid;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid var(--rm-line);
	border-radius: 4px;
}

.ravolli-mat-tamanho__readout b {
	font-family: var(--rm-display);
	font-size: 26px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--rm-navy);
}

.ravolli-mat-tamanho__readout small {
	font-size: 13px;
	color: var(--rm-text-2);
}

.ravolli-mat-tamanho__note {
	margin: 0;
	font-size: 14px;
	color: var(--rm-text-2);
}

/* Dureza (dentro da dobra escura) */
.ravolli-mat-dureza {
	gap: 20px;
	max-width: 720px;
	color: var(--rm-on-navy);
}

.ravolli-mat-dureza__scale {
	position: relative;
	padding-top: 52px;
	padding-bottom: 30px;
}

.ravolli-mat-dureza__rail {
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--rm-bg) 25%, transparent), var(--rm-gold));
}

.ravolli-mat-dureza__scale button {
	position: absolute;
	top: 22px;
	transform: translateX(-50%);
	display: grid;
	justify-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.ravolli-mat-dureza__scale button i {
	display: block;
	width: 14px;
	height: 14px;
	margin-top: 25px;
	border: 2px solid var(--rm-gold);
	border-radius: 50%;
	background: var(--rm-navy);
	transition: transform .2s;
}

.ravolli-mat-dureza__scale button[aria-pressed="true"] i {
	background: var(--rm-gold);
	transform: scale(1.4);
}

.ravolli-mat-dureza__scale button span {
	position: absolute;
	top: -4px;
	font-size: 11px;
	letter-spacing: .06em;
	white-space: nowrap;
	color: var(--rm-on-navy-2);
}

/* Moissanite e diamante ficam a 7,5% de distância (os rótulos não cabem na mesma linha): a moissanite sobe um degrau. */
.ravolli-mat-dureza__scale button[data-key="moissanite"] span {
	top: -26px;
}

.ravolli-mat-dureza__scale button[aria-pressed="true"] span {
	color: var(--rm-on-navy);
}

.ravolli-mat-dureza__scale button em {
	display: none;
	font-style: normal;
}

.ravolli-mat-dureza__ticks {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--rm-on-navy-2);
}

/* Celular: os 5 pontos viram uma grade de botões (alvo de toque ≥ 44px): 3 em cima, 2 centralizados embaixo. */
@media (max-width: 759px) {
	.ravolli-mat-dureza__scale {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 8px;
		padding: 0;
	}

	.ravolli-mat-dureza__scale button {
		grid-column: span 2;
	}

	.ravolli-mat-dureza__scale button:nth-of-type(4) {
		grid-column: 2 / span 2;
	}

	.ravolli-mat-dureza__scale button:nth-of-type(5) {
		grid-column: 4 / span 2;
	}

	.ravolli-mat-dureza__rail,
	.ravolli-mat-dureza__ticks,
	.ravolli-mat-dureza__scale button i {
		display: none;
	}

	.ravolli-mat-dureza__scale button {
		position: static;
		transform: none;
		gap: 2px;
		align-content: center;
		padding: 8px 6px;
		border: 1px solid color-mix(in srgb, var(--rm-bg) 30%, transparent);
		border-radius: 4px;
	}

	.ravolli-mat-dureza__scale button span {
		position: static;
	}

	.ravolli-mat-dureza__scale button[data-key="moissanite"] span {
		top: auto;
	}

	.ravolli-mat-dureza__scale button em {
		display: block;
		font-size: 12px;
		color: var(--rm-on-navy-2);
		font-variant-numeric: tabular-nums;
	}

	.ravolli-mat-dureza__scale button[aria-pressed="true"] {
		border-color: var(--rm-gold);
		background: color-mix(in srgb, var(--rm-gold) 22%, transparent);
	}
}

.ravolli-mat-dureza__note {
	min-height: 5em;
	max-width: 48ch;
}

.ravolli-mat-dureza__note b {
	display: block;
	margin-bottom: 6px;
	font-family: var(--rm-display);
	font-weight: 400;
	font-size: clamp(24px, 3vw, 34px);
}

.ravolli-mat-dureza__note span {
	color: var(--rm-on-navy);
}

/* Desktop: escala à esquerda, nota à direita, alinhadas ao centro. */
@media (min-width: 900px) {
	.ravolli-mat-dureza {
		max-width: none;
		grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
		gap: 56px;
		align-items: center;
	}
}

.ravolli-materiais .wp-block-cover.ravolli-fold .wp-block-cover__inner-container > .ravolli-mat-dureza {
	margin-top: 32px;
}

@media (prefers-reduced-motion: reduce) {
	.ravolli-mat-bar > div,
	.ravolli-mat-pedra__fill i,
	.ravolli-mat-tamanho__stone svg,
	.ravolli-mat-tamanho__img,
	.ravolli-mat-dureza__scale button i {
		transition: none;
	}
}