/*
Theme Name: Grectus
Theme URI: https://grectus.com.br
Author: Grectus
Author URI: https://grectus.com.br
Description: Tema sob medida da Grectus. Vitrine de produto com pagamento em checkout externo, páginas legais exigidas pelo Decreto 7.962/2013 e um painel próprio para os dados da empresa. Identidade editorial em madeira e papel: Newsreader, IBM Plex Sans e IBM Plex Mono.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grectus
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-menu, editor-style, threaded-comments, translation-ready

As fontes Newsreader e IBM Plex estão em assets/fonts sob a SIL Open Font License 1.1
(veja os arquivos LICENCA-*.txt na mesma pasta).
*/

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

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

/* Grão de papel: dá textura ao fundo liso, como a folha impressa. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

::selection {
	background: var(--wp--preset--color--nogueira-clara);
	color: var(--wp--preset--color--tinta);
}

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--nogueira);
	outline-offset: 2px;
}

p {
	max-width: 66ch;
}

/* Parágrafos dentro de grades e faixas acompanham a caixa, não o texto corrido. */
.is-layout-grid p,
.is-layout-flex p,
.grectus-painel p,
.wp-block-details p,
p.has-text-align-center {
	max-width: none;
}

.wp-block-image img {
	display: block;
}

.wp-block-image figcaption {
	margin-top: 0.7rem;
}

/* --------------------------------------------------------------------------
   2. Cabeçalho
   -------------------------------------------------------------------------- */

.grectus-cabecalho {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--wp--preset--color--fundo);
	border-bottom: 1px solid var(--wp--preset--color--linha);
	padding-block: 0.85rem;
}

.admin-bar .grectus-cabecalho {
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* Letreiro da marca: GRECTUS em maiúsculas espaçadas, como na arte do usuário.
   Se um arquivo de logo for enviado (Aparência › logo do site), a imagem entra
   e este texto sai de cena — ver a regra com :has() abaixo.
   Vale com e sem link: no modo "só a política" o nome deixa de ser link. */
.wp-block-site-title,
.wp-block-site-title a {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 400;
}

.grectus-cabecalho .wp-block-site-title {
	font-size: 1.15rem;
}

.grectus-cabecalho .wp-block-site-title,
.grectus-cabecalho .wp-block-site-title a {
	letter-spacing: 0.14em;
}

/* Com logo em imagem, o nome escrito viraria repetição. */
.grectus-cabecalho__barra:has(.wp-block-site-logo img) .wp-block-site-title,
.grectus-rodape:has(.wp-block-site-logo img) .wp-block-site-title {
	display: none;
}

.grectus-cabecalho .wp-block-navigation__container {
	gap: clamp(1rem, 2.2vw, 1.9rem);
}

.grectus-cabecalho .wp-element-button {
	padding: 0.6rem 1.15rem;
	font-size: 0.875rem;
}

.grectus-cabecalho .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
}

.grectus-cabecalho .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.25rem;
	font-size: 1.25rem;
	font-family: var(--wp--preset--font-family--serifa);
}

/* --------------------------------------------------------------------------
   3. Rodapé
   -------------------------------------------------------------------------- */

.grectus-rodape {
	border-top: 1px solid var(--wp--preset--color--linha);
	background: var(--wp--preset--color--pedra);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.grectus-rodape,
.grectus-rodape p {
	color: var(--wp--preset--color--tinta-media);
	font-size: 0.875rem;
}

.grectus-rodape .wp-block-heading {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--rotulo);
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta-media);
}

.grectus-rodape ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.grectus-rodape a {
	color: var(--wp--preset--color--tinta-media);
	text-decoration: none;
}

.grectus-rodape a:hover {
	color: var(--wp--preset--color--tinta);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.grectus-rodape__legal {
	border-top: 1px solid var(--wp--preset--color--linha);
	padding-top: var(--wp--preset--spacing--40);
}

.grectus-rodape__legal p {
	font-size: 0.8125rem;
	max-width: none;
}

/* --------------------------------------------------------------------------
   4. Seções e faixas
   -------------------------------------------------------------------------- */

.grectus-secao {
	padding-block: var(--wp--preset--spacing--70);
}

.grectus-secao--curta {
	padding-block: var(--wp--preset--spacing--60);
}

.grectus-secao--primeira {
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
}

/* Seções de largura total encostam umas nas outras: o respiro vem do padding de cada uma. */
.wp-block-post-content.is-layout-constrained > .alignfull {
	margin-block: 0;
}

.grectus-secao + .grectus-secao:not([class*="has-background"]) {
	border-top: 1px solid var(--wp--preset--color--linha);
}

/* Cabeçalho de seção: sobrelinha + título + lide juntos. */
.grectus-titulo-secao.is-layout-flow > * + * {
	margin-block-start: 0.75rem;
}

/* --------------------------------------------------------------------------
   5. Estilos de bloco da Grectus
   -------------------------------------------------------------------------- */

/* 5.1 Sobrelinha (rótulo em versalete monoespaçado) */
.is-style-sobrelinha {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--rotulo);
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--nogueira);
	max-width: none;
}

/* 5.2 Lide (parágrafo de abertura em serifa) */
.is-style-lide {
	font-family: var(--wp--preset--font-family--serifa);
	font-size: var(--wp--preset--font-size--lide);
	line-height: 1.5;
	color: var(--wp--preset--color--tinta-media);
	max-width: 60ch;
}

/* 5.3 Nota (texto auxiliar) */
.is-style-nota {
	font-size: var(--wp--preset--font-size--nota);
	line-height: 1.55;
	color: var(--wp--preset--color--tinta-media);
}

/* 5.4 Selo (etiqueta curta) */
.is-style-selo {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	padding: 0.35rem 0.55rem;
	background: var(--wp--preset--color--pedra);
	color: var(--wp--preset--color--tinta-media);
	max-width: none;
}

/* 5.5 Preço: serifa com números alinhados, sem o ar de etiqueta. */
.is-style-preco {
	font-family: var(--wp--preset--font-family--serifa);
	font-size: var(--wp--preset--font-size--preco);
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--wp--preset--color--tinta);
	max-width: none;
}

/* 5.6 Painel (cartão de papel com fio) */
.is-style-painel {
	background: var(--wp--preset--color--papel);
	border: 1px solid var(--wp--preset--color--linha);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* 5.7 Destaque (painel com marca de madeira à esquerda) */
.is-style-destaque {
	background: var(--wp--preset--color--papel);
	border: 1px solid var(--wp--preset--color--linha);
	border-left: 3px solid var(--wp--preset--color--nogueira);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* 5.8 Marcado (cartão escolhido) */
.is-style-marcado {
	background: var(--wp--preset--color--nogueira-clara);
	border: 1px solid var(--wp--preset--color--nogueira);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* 5.9 Aviso (segurança e limites de uso) */
.is-style-aviso {
	background: var(--wp--preset--color--terracota-clara);
	border: 1px solid var(--wp--preset--color--terracota);
	border-left: 3px solid var(--wp--preset--color--terracota);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

.is-style-aviso .wp-block-heading {
	color: var(--wp--preset--color--terracota);
}

.is-style-painel > :first-child,
.is-style-destaque > :first-child,
.is-style-marcado > :first-child,
.is-style-aviso > :first-child {
	margin-top: 0;
}

.is-style-painel.is-layout-flow > * + *,
.is-style-destaque.is-layout-flow > * + *,
.is-style-marcado.is-layout-flow > * + *,
.is-style-aviso.is-layout-flow > * + * {
	margin-block-start: 0.7rem;
}

/* 5.10 Passos numerados */
.is-style-passos {
	list-style: none;
	counter-reset: passo;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--linha);
}

/* Número posicionado, não grade: o texto solto depois do <br> viraria um item
   da grade e cairia na coluna estreita do número. */
.is-style-passos > li {
	counter-increment: passo;
	position: relative;
	padding: 1.1rem 0 1.1rem 4rem;
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--linha);
	color: var(--wp--preset--color--tinta-media);
}

.is-style-passos > li::before {
	content: counter(passo, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: calc(1.1rem + 0.28rem);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--nogueira);
}

.is-style-passos > li > strong:first-child {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--titulo-3);
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
	margin-bottom: 0.2rem;
}

.is-style-passos > li > strong:first-child + br {
	display: none;
}

/* 5.11 Lista com fios (itens separados por linha) */
.is-style-lista-fios {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--linha);
}

.is-style-lista-fios > li {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--linha);
	color: var(--wp--preset--color--tinta-media);
}

.is-style-lista-fios > li > strong:first-child {
	color: var(--wp--preset--color--tinta);
}

/* 5.12 Lista com marcador de madeira */
.wp-block-list:not([class*="is-style-"]) {
	color: var(--wp--preset--color--tinta-media);
	padding-left: 1.15rem;
}

.wp-block-list:not([class*="is-style-"]) li::marker {
	color: var(--wp--preset--color--nogueira);
}

.wp-block-list li {
	margin-bottom: 0.45rem;
}

.wp-block-list strong {
	color: var(--wp--preset--color--tinta);
}

/* 5.13 Imagem com moldura */
.is-style-moldura img {
	border: 1px solid var(--wp--preset--color--linha);
	background: var(--wp--preset--color--pedra);
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   6. Tabelas
   -------------------------------------------------------------------------- */

.wp-block-table {
	border: 1px solid var(--wp--preset--color--linha);
	background: var(--wp--preset--color--papel);
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th {
	text-align: left;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta-media);
	padding: 0.95rem 1.1rem 0.6rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--linha);
	white-space: nowrap;
}

.wp-block-table td {
	padding: 0.8rem 1.1rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--linha);
	vertical-align: top;
	color: var(--wp--preset--color--tinta-media);
}

.wp-block-table tr:last-child td {
	border-bottom: 0;
}

.wp-block-table td:first-child {
	color: var(--wp--preset--color--tinta);
	font-weight: 500;
}

.wp-block-table figcaption {
	padding: 0 0 0.9rem;
}

/* Ficha técnica: valores em monoespaçado, alinhados. */
.is-style-ficha td:last-child {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--tinta);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. Perguntas frequentes (blocos "Detalhes")
   -------------------------------------------------------------------------- */

.wp-block-details {
	border-top: 1px solid var(--wp--preset--color--linha);
	padding: 1.05rem 0;
}

.wp-block-details:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--linha);
}

.wp-block-details summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1rem;
	color: var(--wp--preset--color--nogueira);
	flex: none;
}

.wp-block-details[open] summary::after {
	content: "–";
}

.wp-block-details > :not(summary) {
	margin-top: 0.8rem;
	color: var(--wp--preset--color--tinta-media);
}

/* --------------------------------------------------------------------------
   8. Herói e vitrine
   -------------------------------------------------------------------------- */

/* Abertura: o nome do produto é a peça gráfica; a foto sobe até o cabeçalho. */
.grectus-vitrine {
	--grectus-vitrine-topo: clamp(1.5rem, 5vw, 3.5rem);
	/* Mesmo respiro lateral do theme.json (a variável do WordPress não existe no :root). */
	--grectus-respiro: clamp(1.25rem, 5vw, 3rem);

	padding-block: var(--grectus-vitrine-topo) var(--wp--preset--spacing--80);
}

.grectus-vitrine__grade {
	gap: clamp(1.75rem, 5vw, 4.5rem);
	align-items: flex-end;
}

.grectus-vitrine .wp-block-column {
	min-width: 0;
}

/* O nome acompanha o topo da foto; a frase, o preço e o botão assentam na base. */
.grectus-vitrine__texto {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0;
	padding-block: clamp(0.5rem, 2vw, 1.5rem) clamp(0.5rem, 3vw, 2.75rem);
}

.grectus-vitrine__frase {
	margin-block-start: 0;
}

.grectus-vitrine__nome {
	/* A margem automática embaixo empurra frase, preço e botão para a base. */
	margin: 0 0 auto;
	line-height: 0.85;
	letter-spacing: -0.045em;
	word-break: break-word;
}

.grectus-vitrine__frase {
	margin-block-start: 1.6rem;
	max-width: 24ch;
	color: var(--wp--preset--color--tinta-media);
}

.grectus-vitrine__preco {
	max-width: 20rem;
	margin-block-start: 1.9rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--linha);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--tinta-media);
}

.grectus-vitrine .wp-block-buttons {
	margin-block-start: 1.7rem;
}

/* A foto sobe até o cabeçalho e sangra até a borda direita da tela. */
.grectus-vitrine {
	overflow: clip;
}

/* Dois nomes de classe de propósito: o layout flex do WordPress zera a margem
   das colunas com `.is-layout-flex > :is(*, div) { margin: 0 }`. */
.grectus-vitrine .grectus-vitrine__palco {
	margin-block-start: calc(-1 * var(--grectus-vitrine-topo));
	/* Cresce até a borda: sem isso a margem negativa só vira espaço vago. */
	flex-grow: 1;
}

@media (min-width: 900px) {
	/* A sangria vai na figura, não na coluna: coluna é item de flex e o
	   WordPress não a deixa crescer para dentro da margem liberada. */
	.grectus-vitrine__palco .wp-block-image {
		margin-inline-end: calc(-1 * (100vw - min(76rem, 100vw - 2 * var(--grectus-respiro))) / 2);
	}
}

/* A foto do produto é deitada: recorte suave, sem espremer a peça. */
.grectus-vitrine__palco img {
	width: 100%;
	aspect-ratio: 5 / 4;
	max-height: 76vh;
	object-fit: cover;
	background: var(--wp--preset--color--pedra);
}

/* Uma entrada só, na abertura: o nome e a foto assentam. Nada de seção que
   aparece subindo a cada rolagem. */
@media (prefers-reduced-motion: no-preference) {
	.grectus-vitrine__texto > *,
	.grectus-vitrine__palco {
		animation: grectus-assentar 900ms cubic-bezier(0.2, 0.65, 0.2, 1) backwards;
	}

	.grectus-vitrine__nome { animation-delay: 40ms; }
	.grectus-vitrine__frase { animation-delay: 160ms; }
	.grectus-vitrine__preco { animation-delay: 240ms; }
	.grectus-vitrine .wp-block-buttons { animation-delay: 320ms; }

	.grectus-vitrine__palco {
		animation-name: grectus-revelar;
		animation-duration: 1200ms;
	}
}

@keyframes grectus-assentar {
	from { opacity: 0; transform: translateY(0.75rem); }
}

@keyframes grectus-revelar {
	from { opacity: 0; clip-path: inset(0 0 14% 0); }
}

.grectus-caixa-compra .is-style-preco {
	margin-bottom: 0.15rem;
}

.grectus-caixa-compra .wp-block-buttons {
	margin-top: 1.1rem;
}

.grectus-caixa-compra .wp-element-button {
	width: 100%;
	text-align: center;
}

/* Faixa de garantias: um fio fino, quatro rótulos, nada de parágrafo. */
.grectus-faixa {
	background: var(--wp--preset--color--papel);
	border-top: 1px solid var(--wp--preset--color--linha);
	border-bottom: 1px solid var(--wp--preset--color--linha);
	padding-block: 1.35rem;
}

.grectus-faixa__itens {
	gap: 0 clamp(1.5rem, 4vw, 3.25rem);
	row-gap: 0.6rem;
}

.grectus-faixa__itens .is-style-sobrelinha {
	position: relative;
	color: var(--wp--preset--color--tinta-media);
	margin: 0;
}

/* Separador em fio entre os rótulos, menos no primeiro. */
.grectus-faixa__itens .is-style-sobrelinha + .is-style-sobrelinha::before {
	content: "";
	position: absolute;
	left: clamp(-1.6rem, -2vw, -0.75rem);
	top: 0.1em;
	bottom: 0.1em;
	width: 1px;
	background: var(--wp--preset--color--linha);
}

/* --------------------------------------------------------------------------
   8b. Linha em destaque: fundo animado (GIF ou vídeo) com chamada
   Padrão grectus/linha-destaque. Serve para qualquer linha: insira o padrão
   de novo e troque o fundo (bloco Capa › Substituir), o texto e o link.
   Nada aqui depende do arquivo de fundo: imagem, GIF e MP4 recebem o mesmo tratamento.
   -------------------------------------------------------------------------- */

/* Ponte: fio vertical que liga a seção anterior à linha. */
.wp-block-spacer.grectus-ponte {
	position: relative;
	margin-block: 0;
}

.grectus-ponte::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: var(--wp--preset--color--nogueira);
	transform-origin: top;
}

.wp-block-cover.grectus-linha {
	--grectus-linha-margem: max(clamp(1.25rem, 5vw, 3rem), calc((100% - 76rem) / 2));
	margin-block: 0;
	min-height: max(32rem, 88vh);
	min-height: max(32rem, 88svh);
	padding-block: var(--wp--preset--spacing--80);
	overflow: hidden;
	color: var(--wp--preset--color--papel);
}

.grectus-linha :is(.wp-block-cover__image-background, .wp-block-cover__video-background) {
	object-fit: cover;
}

/* Escurece de baixo para cima, onde fica o texto: legível sobre qualquer fundo. */
.grectus-linha::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgb(34 35 31 / 0.82) 0%, rgb(34 35 31 / 0.4) 42%, rgb(34 35 31 / 0) 72%);
}

/* Conteúdo embaixo, na mesma grade do cabeçalho: largura "larga" + respiro lateral do site.
   (Sem a "posição do conteúdo" do bloco Capa, que encolhe o container interno.) */
.wp-block-cover.grectus-linha {
	align-items: flex-end;
	padding-inline: 0;
}

.grectus-linha .wp-block-cover__inner-container {
	z-index: 2;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.grectus-linha__conteudo.is-layout-constrained > * + * {
	margin-block-start: 1rem;
}

.grectus-linha :where(.wp-block-heading, p) {
	color: var(--wp--preset--color--papel);
}

.grectus-linha .wp-block-heading {
	font-size: var(--wp--preset--font-size--titulo-1);
}

.grectus-linha .is-style-sobrelinha {
	color: var(--wp--preset--color--nogueira-clara);
}

.grectus-linha .is-style-lide {
	color: rgb(251 250 247 / 0.88);
}

.grectus-linha .wp-block-buttons {
	margin-block-start: 1.75rem;
}

.grectus-linha :focus-visible {
	outline-color: var(--wp--preset--color--papel);
}

/* GIF não tem pausa: oculto, fica a cor de fundo. Vídeo é pausado pelo script. */
.grectus-linha.is-parado .wp-block-cover__image-background {
	visibility: hidden;
}

.grectus-linha__pausa {
	position: absolute;
	z-index: 3;
	right: clamp(1.25rem, 5vw, 3rem);
	bottom: 1.25rem;
	padding: 0.5rem 0.75rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--rotulo);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--wp--preset--color--papel);
	background: rgb(34 35 31 / 0.55);
	border: 1px solid rgb(251 250 247 / 0.45);
	border-radius: 0;
	cursor: pointer;
}

.grectus-linha__pausa:hover {
	background: var(--wp--preset--color--tinta);
	border-color: var(--wp--preset--color--papel);
}

/* Botão claro, para usar sobre imagem ou vídeo. */
.wp-block-button.is-style-claro .wp-element-button {
	background: var(--wp--preset--color--papel);
	color: var(--wp--preset--color--tinta);
	border-color: var(--wp--preset--color--papel);
}

.wp-block-button.is-style-claro .wp-element-button:hover,
.wp-block-button.is-style-claro .wp-element-button:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--papel);
	border-color: var(--wp--preset--color--papel);
}

/*
 * Transição ao rolar: o fio desce, a seção abre da largura do conteúdo até a
 * tela inteira, o fundo se aproxima e o texto sobe. Só em navegadores com
 * animação guiada pela rolagem e para quem não pediu menos movimento; nos
 * demais a seção aparece pronta, sem animação.
 */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.grectus-ponte::before {
			animation: grectus-fio-descer linear both;
			animation-timeline: view();
			animation-range: entry 30% cover 55%;
		}

		/* Linha do tempo da seção inteira: o conteúdo termina de aparecer quando ela termina de entrar. */
		.wp-block-cover.grectus-linha {
			view-timeline: --grectus-linha block;
			animation: grectus-linha-abrir linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 100%;
		}

		.grectus-linha :is(.wp-block-cover__image-background, .wp-block-cover__video-background) {
			animation: grectus-fundo-aproximar linear both;
			animation-timeline: --grectus-linha;
			animation-range: cover 0% cover 100%;
		}

		.grectus-linha__conteudo > * {
			animation: grectus-texto-surgir linear both;
			animation-timeline: --grectus-linha;
			animation-range: entry 45% entry 100%;
		}
	}
}

@keyframes grectus-fio-descer {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@keyframes grectus-linha-abrir {
	from { clip-path: inset(0 var(--grectus-linha-margem)); }
	to { clip-path: inset(0 0); }
}

@keyframes grectus-fundo-aproximar {
	from { transform: scale(1.12); }
	to { transform: scale(1); }
}

@keyframes grectus-texto-surgir {
	from { opacity: 0; transform: translateY(1.5rem); }
	to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8c. Escolha de linha e cor (shortcode [grectus_personalizar])
   O estado vive nos radios; o CSS que liga a escolha ao botão certo é gerado
   em inc/produto.php a partir das listas de linhas e cores.
   -------------------------------------------------------------------------- */

.grectus-personalizar {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
}

.grectus-personalizar__grupo {
	margin: 0;
	padding: 0;
	border: 0;
}

.grectus-personalizar__grupo legend {
	padding: 0;
	margin-bottom: 0.55rem;
}

.grectus-personalizar__rotulo {
	font-size: var(--wp--preset--font-size--nota);
	font-weight: 600;
	color: var(--wp--preset--color--tinta-media);
}

.grectus-personalizar__opcoes {
	display: grid;
	gap: 0.5rem;
}

.grectus-personalizar__opcoes--cores {
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.grectus-opcao__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.grectus-opcao {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.7rem 0.85rem;
	background: var(--wp--preset--color--papel);
	border: 1px solid var(--wp--preset--color--linha);
	cursor: pointer;
}

.grectus-opcao:hover {
	border-color: var(--wp--preset--color--nogueira);
}

.grectus-opcao__radio:checked + .grectus-opcao {
	border-color: var(--wp--preset--color--nogueira);
	background: var(--wp--preset--color--nogueira-clara);
}

.grectus-opcao__radio:focus-visible + .grectus-opcao {
	outline: 2px solid var(--wp--preset--color--nogueira);
	outline-offset: 2px;
}

.grectus-opcao__amostra {
	flex: none;
	width: 1.4rem;
	height: 1.4rem;
	border: 1px solid rgb(34 35 31 / 0.2);
}

.grectus-opcao__nome {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
}

.grectus-opcao__nota {
	display: block;
	font-size: var(--wp--preset--font-size--nota);
	color: var(--wp--preset--color--tinta-media);
}

.grectus-personalizar__aviso {
	margin-top: 0.55rem;
}

.grectus-personalizar__preco {
	margin: 0;
}

.grectus-personalizar__compras {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.grectus-personalizar__compra {
	justify-content: center;
	text-align: center;
}

.grectus-personalizar__compra--pendente {
	white-space: normal;
	padding: 0.85rem;
	text-align: center;
}

/* --------------------------------------------------------------------------
   8d. Lista de espera (shortcode [grectus_lista_espera])
   -------------------------------------------------------------------------- */

.grectus-lista {
	max-width: 30rem;
	margin-block: var(--wp--preset--spacing--50);
}

.grectus-lista__forma {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--wp--preset--color--papel);
	border: 1px solid var(--wp--preset--color--linha);
}

.grectus-lista__campo {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	max-width: none;
}

.grectus-lista__campo label {
	font-size: var(--wp--preset--font-size--nota);
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
}

.grectus-lista__campo input {
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--tinta);
	background: var(--wp--preset--color--fundo);
	border: 1px solid var(--wp--preset--color--linha);
	border-radius: 0;
	padding: 0.7rem 0.8rem;
	width: 100%;
}

.grectus-lista__campo input:focus-visible {
	outline: 2px solid var(--wp--preset--color--nogueira);
	outline-offset: 1px;
}

.grectus-lista__ajuda {
	font-size: var(--wp--preset--font-size--nota);
	color: var(--wp--preset--color--tinta-media);
}

.grectus-lista__consentimento {
	margin: 0;
	max-width: none;
	font-size: var(--wp--preset--font-size--nota);
	color: var(--wp--preset--color--tinta-media);
}

.grectus-lista__consentimento label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	line-height: 1.5;
}

.grectus-lista__consentimento input {
	margin-top: 0.2rem;
	flex: none;
	accent-color: var(--wp--preset--color--nogueira);
}

.grectus-lista__botao {
	margin: 0;
}

.grectus-lista__botao .wp-element-button {
	width: 100%;
	cursor: pointer;
	font-family: inherit;
}

.grectus-lista__nota {
	margin: 0;
	max-width: none;
}

/* Campo-isca: fora da tela, mas alcançável por robô que lê o HTML. */
.grectus-lista__isca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.grectus-lista__recado {
	margin: 0 0 1.1rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--wp--preset--color--linha);
	font-size: var(--wp--preset--font-size--nota);
	max-width: none;
}

.grectus-lista__recado--ok {
	border-color: var(--wp--preset--color--oliva);
	background: var(--wp--preset--color--oliva-clara);
	color: var(--wp--preset--color--tinta);
}

.grectus-lista__recado--erro {
	border-color: var(--wp--preset--color--terracota);
	background: var(--wp--preset--color--terracota-clara);
	color: var(--wp--preset--color--terracota);
}

/* --------------------------------------------------------------------------
   9. Documentos (políticas e termos)
   -------------------------------------------------------------------------- */

/* Um documento legal é um documento, não uma página de vitrine: uma folha de
   papel sobre a bancada, numa família de tipos só (Newsreader, do título ao
   corpo) e com o número da seção na margem — porque o texto se refere a elas
   ("ver seção 7"), então o número é informação, não enfeite. */

.grectus-documento {
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.grectus-documento .grectus-folha {
	background: var(--wp--preset--color--papel);
	padding: clamp(1.75rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 5rem);
	font-family: var(--wp--preset--font-family--serifa);
	color: var(--wp--preset--color--tinta);
}

.grectus-documento .grectus-folha :is(p, li) {
	font-family: var(--wp--preset--font-family--serifa);
	font-size: 1.0625rem;
	line-height: 1.72;
	max-width: 68ch;
}

.grectus-documento .wp-block-post-title {
	font-size: clamp(2rem, 5.5vw, 2.9rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0;
}

.grectus-documento__data {
	margin-block: 0.9rem 0;
	color: var(--wp--preset--color--tinta-media);
	font-size: 0.9375rem;
	display: flex;
	gap: 0.35em;
}

.grectus-documento__data p,
.grectus-documento__data time {
	margin: 0;
	font-size: inherit;
}

/* Índice: onze seções pedem um mapa. Duas colunas quando há largura.
   A especificidade precisa passar da regra de espaçamento do post-content. */
.grectus-documento .wp-block-post-content .grectus-documento__indice {
	margin-block: clamp(2rem, 4vw, 2.75rem);
	padding-block: 1.4rem;
	border-block: 1px solid var(--wp--preset--color--linha);
}

/* O índice é estrutura, não texto corrido: sem a medida de leitura, senão o
   layout constrained do WordPress centraliza o que sobra e desalinha a coluna. */
.grectus-documento .wp-block-post-content .grectus-documento__indice > p {
	margin: 0 0 0.9rem;
	max-width: none;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--tinta-media);
}

.grectus-documento .wp-block-post-content .grectus-documento__indice ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: indice;
	columns: 2;
	column-gap: 2.5rem;
}

.grectus-documento .wp-block-post-content .grectus-documento__indice li {
	counter-increment: indice;
	max-width: none;
	margin: 0 0 0.45rem;
	/* O número fica na coluna do texto e o título recua: a linha que quebra
	   alinha com o título, e o índice não escapa para fora da coluna. */
	position: relative;
	padding-left: 1.75em;
	break-inside: avoid;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.grectus-documento .wp-block-post-content .grectus-documento__indice li::before {
	content: counter(indice);
	position: absolute;
	left: 0;
	right: auto;
	top: 0;
	width: auto;
	height: auto;
	background: none;
	color: var(--wp--preset--color--tinta-media);
	font-variant-numeric: tabular-nums;
}

.grectus-documento .wp-block-post-content .grectus-documento__indice a {
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

.grectus-documento .wp-block-post-content .grectus-documento__indice a:hover {
	color: var(--wp--preset--color--nogueira);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Corpo: numeração das seções na margem. */
.grectus-documento .wp-block-post-content {
	counter-reset: secao;
}

.grectus-documento .wp-block-post-content > * + * {
	margin-block-start: 1.05rem;
}

.grectus-documento .wp-block-post-content h2 {
	position: relative;
	counter-increment: secao;
	margin-block: clamp(2.5rem, 5vw, 3.6rem) 1.1rem;
	font-size: clamp(1.3rem, 2.6vw, 1.55rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	scroll-margin-top: 5rem;
}

.grectus-documento .wp-block-post-content h2::before {
	content: counter(secao);
	position: absolute;
	right: calc(100% + 1.1rem);
	top: 0.12em;
	color: var(--wp--preset--color--nogueira);
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
}

.grectus-documento .wp-block-post-content h3 {
	margin-block: 1.9rem 0.6rem;
	font-family: var(--wp--preset--font-family--serifa);
	font-size: 1.1rem;
}

.grectus-documento .wp-block-post-content ul {
	margin-block: 1.05rem;
	padding-left: 1.15rem;
	list-style: none;
}

.grectus-documento .wp-block-post-content li {
	position: relative;
	margin-block: 0.5rem;
}

.grectus-documento .wp-block-post-content li::before {
	content: "";
	position: absolute;
	right: calc(100% + 0.6rem);
	top: 0.78em;
	width: 0.28rem;
	height: 0.28rem;
	background: var(--wp--preset--color--tinta-media);
}

.grectus-documento .wp-block-post-content a {
	color: var(--wp--preset--color--nogueira);
	text-underline-offset: 0.18em;
}

/* Sem largura de margem, o número volta para dentro da linha do título. */
@media (max-width: 47.99rem) {
	.grectus-documento .wp-block-post-content h2 {
		padding-left: 1.9rem;
	}

	.grectus-documento .wp-block-post-content h2::before {
		right: auto;
		left: 0;
	}

	.grectus-documento .wp-block-post-content .grectus-documento__indice ol {
		columns: 1;
	}
}

/* Nota que só quem está logado no painel enxerga. */
.grectus-nota-interna {
	background: var(--wp--preset--color--terracota-clara);
	border: 1px dashed var(--wp--preset--color--terracota);
	padding: 1.1rem 1.25rem;
}

.grectus-nota-interna::before {
	content: "Rascunho interno — visível só para quem está logado";
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracota);
	margin-bottom: 0.5rem;
}

.grectus-nota-interna p {
	color: var(--wp--preset--color--tinta);
	font-size: 0.875rem;
}

/* Dado que ainda não foi preenchido no painel Grectus. */
.grectus-pendente {
	background: var(--wp--preset--color--terracota-clara);
	color: var(--wp--preset--color--terracota);
	padding: 0.05em 0.35em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9em;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   10. Miudezas
   -------------------------------------------------------------------------- */

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--linha);
	opacity: 1;
	margin: 0;
}

.wp-block-buttons {
	gap: 0.75rem;
}

.wp-block-button.is-style-contorno .wp-element-button,
.wp-block-button.is-style-outline .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--tinta);
	border: 1px solid var(--wp--preset--color--linha);
}

.wp-block-button.is-style-contorno .wp-element-button:hover,
.wp-block-button.is-style-outline .wp-element-button:hover {
	background: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--papel);
	border-color: var(--wp--preset--color--tinta);
}

.wp-block-post-title a {
	text-decoration: none;
	color: inherit;
}

/* Fecho calmo: folha de papel, bastante ar, um botão só. */
.grectus-chamada {
	background: var(--wp--preset--color--papel);
	border-top: 1px solid var(--wp--preset--color--linha);
	padding-block: var(--wp--preset--spacing--80);
}

.grectus-chamada__promessa {
	font-family: var(--wp--preset--font-family--serifa);
	font-size: var(--wp--preset--font-size--lide);
	line-height: 1.5;
	color: var(--wp--preset--color--tinta-media);
	max-width: none;
}

.grectus-chamada__miolo.is-layout-constrained > * + * {
	margin-block-start: 1.1rem;
}

.grectus-chamada .wp-block-buttons {
	margin-block-start: 1.9rem;
}

@media (max-width: 781px) {
	.grectus-cabecalho .wp-element-button {
		padding: 0.55rem 0.95rem;
	}

	.is-style-passos > li {
		padding-left: 3rem;
	}

	/* Faixa em duas linhas: sem separador, senão sobra um traço no começo da linha de baixo. */
	.grectus-faixa__itens {
		row-gap: 0.85rem;
	}

	.grectus-faixa__itens .is-style-sobrelinha + .is-style-sobrelinha::before {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   11. Impressão (termo de garantia, políticas)
   -------------------------------------------------------------------------- */

@media print {
	.grectus-cabecalho,
	.grectus-rodape,
	.grectus-chamada,
	.grectus-nota-interna,
	.wp-block-buttons {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.wp-block-details {
		break-inside: avoid;
	}

	.wp-block-details > :not(summary) {
		display: block !important;
	}
}