.elementor-kit-8{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1320px;}.e-con{--container-max-width:1320px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:900px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:520px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* Tokens de design da Gráfica Máximus — extraídos de brifin/grafica-maximus/site-exemplo/assets/style.css (tarefa 06). */
:root {
	--gm-ciano: #00AFEF;
	--gm-ciano-texto: #0079A8;
	--gm-magenta: #EC268F;
	--gm-magenta-texto: #C4157A;
	--gm-amarelo: #FFF200;
	--gm-grafite: #373435;
	--gm-azul-fundo: #1A5B8F;
	--gm-papel: #ffffff;
	--gm-papel-alt: #f2f8fb;
	--gm-borda: #d9e4ea;
	--gm-tinta: #2b2a2b;
	--gm-tinta-fraca: #5c5a5c;
}

/* Stack de sistema — nenhuma webfont carregada, conforme o protótipo. */
body, .elementor-widget-container, .elementor-heading-title {
	font-family: "Segoe UI", Calibri, Arial, Helvetica, sans-serif;
}

/* Tarefa 09 — cabeçalho e rodapé globais (detalhes visuais sem controle
   próprio nos widgets iw-header-contact / iw-footer-complete). */
.iw-hf--contact {
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: 0 1px 0 rgba(0,175,239,.18);
}

.iw-hf--footer-complete .iw-hf-bar {
	border-top: 5px solid var(--gm-ciano, #00AFEF);
}

.iw-hf--footer .iw-hf-col-title {
	color: var(--gm-ciano, #00AFEF);
}

.iw-hf--footer .iw-hf-col-text,
.iw-hf--footer .iw-hf-contato li,
.iw-hf--footer .iw-hf-col-menu a {
	font-size: .88rem;
}

.iw-hf-bottombar,
.iw-hf-bottombar a {
	font-size: .78rem;
}

@media (max-width: 900px) {
	.iw-hf--contact .iw-hf-bar-inner {
		flex-wrap: wrap;
	}
	.iw-hf--contact .iw-hf-nav {
		order: 3;
		width: 100%;
	}
}

/* Tarefa 12 — visual do protótipo nos cards de listagem (/embalagens/ e
   /embalagens/{sub}/): borda superior colorida no lugar de sombra. */
.iw-cat-item {
	background: var(--gm-papel, #ffffff);
	border-top: 3px solid var(--gm-ciano, #00AFEF);
	border-radius: 6px;
	box-shadow: none;
	padding: 12px;
}

.iw-cat-item .iw-cat-foto {
	border-radius: 4px;
}

/* Tarefas 13/14/15 — estruturas desenhadas à mão no protótipo
   (brifin/grafica-maximus/site-exemplo/assets/style.css). Não existe widget
   equivalente no Industrial Widgets; ver "Lacuna" nas tarefas. */

/* Tipografia das seções */
.gm-chapeu .elementor-heading-title {
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: .72rem;
	color: var(--gm-magenta-texto, #C4157A);
	font-weight: 700;
}
.gm-chapeu { margin-bottom: 8px; }
.gm-h1 .elementor-heading-title {
	font-size: 2.5rem;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--gm-grafite, #373435);
}
.gm-h2 .elementor-heading-title {
	font-size: 1.85rem;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--gm-grafite, #373435);
}
.gm-lide, .gm-lide p {
	font-size: 1.08rem;
	color: var(--gm-tinta-fraca, #5c5a5c);
}
.gm-sub-secao, .gm-sub-secao p {
	color: var(--gm-tinta-fraca, #5c5a5c);
	max-width: 660px;
}
@media (max-width: 900px) {
	.gm-h1 .elementor-heading-title { font-size: 1.95rem; }
}

/* Botões */
.gm-btn .elementor-button,
.gm-btn-linha .elementor-button,
.gm-btn-zap .elementor-button,
.gm-a-btn {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 4px;
	font-weight: 700;
	font-size: .92rem;
	line-height: 1.4;
	text-decoration: none;
	border: 2px solid transparent;
}
.gm-btn .elementor-button, .gm-a-btn {
	background: var(--gm-magenta, #EC268F);
	color: #ffffff;
	border-color: var(--gm-magenta, #EC268F);
}
.gm-btn .elementor-button:hover, .gm-a-btn:hover {
	background: var(--gm-magenta-texto, #C4157A);
	border-color: var(--gm-magenta-texto, #C4157A);
	color: #ffffff;
}
.gm-btn-linha .elementor-button {
	background: transparent;
	color: var(--gm-ciano-texto, #0079A8);
	border-color: var(--gm-ciano, #00AFEF);
}
.gm-btn-linha .elementor-button:hover {
	background: var(--gm-ciano, #00AFEF);
	color: #ffffff;
}
.gm-a-btn-zap {
	background: #128c7e;
	border-color: #128c7e;
}
.gm-a-btn-zap:hover {
	background: #0d6b60;
	border-color: #0d6b60;
}

/* Barra de provas */
.gm-provas {
	background: var(--gm-grafite, #373435);
	padding: 22px 0;
	border-top: 4px solid var(--gm-ciano, #00AFEF);
}
.gm-provas ul {
	list-style: none;
	width: 100%;
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	text-align: center;
}
.gm-provas li {
	font-size: .82rem;
	line-height: 1.35;
	color: #ddd9da;
}
.gm-provas b {
	display: block;
	font-size: 1.5rem;
	color: var(--gm-amarelo, #FFF200);
	font-weight: 800;
	margin-bottom: 2px;
}
@media (max-width: 900px) {
	.gm-provas ul { grid-template-columns: repeat(2, 1fr); text-align: left; }
}
@media (max-width: 520px) {
	.gm-provas ul { grid-template-columns: 1fr; }
}

/* Grade de selos */
.gm-tres {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.gm-selo {
	border: 1px solid var(--gm-borda, #d9e4ea);
	border-left: 4px solid var(--gm-ciano, #00AFEF);
	border-radius: 6px;
	padding: 20px;
	background: var(--gm-papel, #ffffff);
}
.gm-selo h3 {
	font-size: 1.15rem;
	margin: 0 0 8px;
	color: var(--gm-grafite, #373435);
	word-break: break-word;
}
.gm-selo p {
	margin: 0;
	color: var(--gm-tinta-fraca, #5c5a5c);
	font-size: .95rem;
}
.gm-selo-n {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--gm-ciano-texto, #0079A8);
	display: block;
	margin-bottom: 4px;
	text-decoration: none;
	word-break: break-word;
}
.gm-selo-acao {
	font-size: .85rem;
	font-weight: 700;
	color: var(--gm-magenta-texto, #C4157A);
}
@media (max-width: 900px) {
	.gm-tres { grid-template-columns: 1fr; }
}

/* Passos numerados */
.gm-passos {
	list-style: none;
	counter-reset: p;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.gm-passos--coluna { grid-template-columns: 1fr; }
.gm-passos li {
	counter-increment: p;
	border-top: 4px solid var(--gm-ciano, #00AFEF);
	padding-top: 14px;
	font-size: .92rem;
	color: var(--gm-tinta-fraca, #5c5a5c);
}
.gm-passos li::before {
	content: counter(p);
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--gm-magenta, #EC268F);
	line-height: 1.1;
}
.gm-passos b {
	display: block;
	margin: 2px 0 4px;
	color: var(--gm-grafite, #373435);
}
@media (max-width: 900px) {
	.gm-passos { grid-template-columns: 1fr; }
}

/* Tabelas de especificação */
.gm-table-wrap { overflow-x: auto; }
.gm-table-wrap table {
	border-collapse: collapse;
	width: 100%;
	font-size: .88rem;
	min-width: 520px;
}
.gm-table-wrap th,
.gm-table-wrap td {
	border: 1px solid var(--gm-borda, #d9e4ea);
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
}
.gm-table-wrap th {
	background: var(--gm-grafite, #373435);
	color: #ffffff;
	font-weight: 700;
}
.gm-table-wrap tbody tr:nth-child(even) td { background: #f6fbfd; }

/* Fotos de seção */
.gm-foto img {
	width: 100%;
	border-radius: 6px;
	display: block;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}
/* Na largura inteira o 16/9 passaria de 600px de altura e dominaria a página. */
.gm-foto--larga img {
	aspect-ratio: auto;
	height: 420px;
}

/* CTA final */
.gm-cta-titulo .elementor-heading-title { color: #ffffff; }
.gm-cta-texto, .gm-cta-texto p {
	color: #d6e7f2;
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
}
.gm-cta-botoes {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}
.gm-cta-botoes .gm-a-btn:hover {
	background: #ffffff;
	color: var(--gm-magenta-texto, #C4157A);
	border-color: #ffffff;
}
.gm-cta-botoes .gm-a-btn-zap:hover {
	background: #0d6b60;
	color: #ffffff;
	border-color: #0d6b60;
}

/* Ficha cadastral */
.gm-ficha {
	border: 1px solid var(--gm-borda, #d9e4ea);
	border-top: 3px solid var(--gm-ciano, #00AFEF);
	border-radius: 6px;
	padding: 20px 24px;
	background: var(--gm-papel-alt, #f2f8fb);
	margin: 0;
}
.gm-ficha dt {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
	color: var(--gm-magenta-texto, #C4157A);
}
.gm-ficha dd {
	margin: 0 0 14px;
	color: var(--gm-tinta, #2b2a2b);
}
.gm-ficha dd:last-child { margin-bottom: 0; }

/* Formulário do Elementor Pro com a aparência do protótipo */
.gm-form .elementor-field-group > label {
	font-size: .86rem;
	font-weight: 700;
	color: var(--gm-grafite, #373435);
	margin-bottom: 5px;
}
.gm-form .elementor-field-textual {
	border: 1px solid #b9cdd8;
	border-radius: 4px;
	padding: 11px 12px;
	font-size: .95rem;
	background: #ffffff;
	color: var(--gm-tinta, #2b2a2b);
}
.gm-form .elementor-field-textual:focus {
	outline: 2px solid var(--gm-ciano, #00AFEF);
	outline-offset: 1px;
	border-color: var(--gm-ciano, #00AFEF);
	box-shadow: none;
}
.gm-form textarea.elementor-field-textual {
	min-height: 120px;
	resize: vertical;
}
/* O select herdava altura fixa do Elementor e cortava o texto. */
.gm-form select.elementor-field-textual {
	height: auto;
	min-height: 44px;
	line-height: 1.4;
}
.gm-form .elementor-upload-field {
	border: 1px dashed #b9cdd8;
	border-radius: 4px;
	padding: 11px 12px;
	background: #ffffff;
	width: 100%;
}
.gm-form .elementor-button[type="submit"] {
	background: var(--gm-magenta, #EC268F);
	border: 2px solid var(--gm-magenta, #EC268F);
	color: #ffffff;
	border-radius: 4px;
	padding: 12px 22px;
	font-weight: 700;
	font-size: .92rem;
}
.gm-form .elementor-button[type="submit"]:hover {
	background: var(--gm-magenta-texto, #C4157A);
	border-color: var(--gm-magenta-texto, #C4157A);
}
.gm-form .elementor-message-success {
	background: #e7f5ec;
	border: 1px solid #7bbd95;
	border-radius: 4px;
	padding: 10px 12px;
	font-size: .86rem;
	color: var(--gm-tinta, #2b2a2b);
}
.gm-form .elementor-message-danger {
	background: #fdecec;
	border: 1px solid #e08a8a;
	border-radius: 4px;
	padding: 10px 12px;
	font-size: .86rem;
	color: var(--gm-tinta, #2b2a2b);
}
.gm-consent {
	font-size: .8rem;
	color: var(--gm-tinta-fraca, #5c5a5c);
	margin: 0;
}

/* Bloco de telefones da seção final de contato da home (tarefa 13). */
.gm-contato-fones {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 24px;
}
.gm-fone-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.gm-fone-label {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
	color: var(--gm-magenta-texto, #C4157A);
}
.gm-fone-valor {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--gm-tinta, #2b2a2b);
	text-decoration: none;
}
/* Tarefa 16 — checklist de envio de arte. */
.gm-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 32px;
}
.gm-checklist li {
	position: relative;
	padding-left: 30px;
	font-size: .92rem;
	color: var(--gm-tinta-fraca, #5c5a5c);
}
.gm-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 1px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border-radius: 3px;
	background: var(--gm-ciano, #00AFEF);
	color: #ffffff;
	font-weight: 800;
	font-size: .8rem;
}
.gm-checklist b {
	display: block;
	color: var(--gm-grafite, #373435);
	margin-bottom: 2px;
}
@media (max-width: 900px) {
	.gm-checklist { grid-template-columns: 1fr; }
}
/* Página de produto — grade de "outras linhas" e botões do hero (protótipo
   caixa-de-pizza-personalizada.html: .grade / .card / .hero-ctas). */
.gm-grade {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.gm-card {
	border: 1px solid var(--gm-borda, #d9e4ea);
	border-top: 3px solid var(--gm-ciano, #00AFEF);
	border-radius: 6px;
	background: var(--gm-papel, #ffffff);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.gm-card h3 {
	font-size: 1.02rem;
	margin: 0;
	color: var(--gm-grafite, #373435);
}
.gm-card-spec {
	font-size: .8rem;
	color: var(--gm-tinta-fraca, #5c5a5c);
	flex: 1;
	margin: 0;
}
.gm-card-link {
	font-size: .85rem;
	font-weight: 700;
	color: var(--gm-magenta-texto, #C4157A);
	text-decoration: none;
}
@media (max-width: 900px) {
	.gm-grade { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.gm-grade { grid-template-columns: 1fr; }
}

/* No hero do produto os dois CTAs ficam à esquerda, não centralizados. */
.gm-cta-botoes--esq { justify-content: flex-start; }

/* ===== responsivo 02-08 ===== */

/* ========================================================================
   Planos de responsividade 02 a 08 (resumo/responsivo/) — 16/09/2026
   ======================================================================== */

/* Container padronizado em 1320/24.
   A barra de provas (.gm-provas ul) já usava 1320 com 24px de recuo, valores do
   .iw-container do plugin, enquanto as seções do Elementor ficavam em 1140 com
   os 10px de recuo padrão de coluna. Isso desalinhava a faixa escura do texto
   logo acima e abaixo — 4px no celular, 100px de cada lado no desktop.
   A largura máxima em si vem do ajuste `container_width` do Kit; aqui ficam o
   recuo lateral e a anulação do recuo de coluna, para os 24px serem exatos. */
.elementor-section.elementor-section-boxed > .elementor-container {
	padding-left: 24px;
	padding-right: 24px;
}

.elementor-section.elementor-section-boxed > .elementor-container > .elementor-column > .elementor-element-populated {
	padding-left: 0;
	padding-right: 0;
}

/* Dica de que a tabela rola na horizontal.
   As tabelas de 3 colunas têm min-width: 520px e rolam de propósito a 375px,
   mas nada indicava isso: a última coluna simplesmente ficava cortada na borda
   e quem usa celular não descobria que dá para arrastar. As duas primeiras
   camadas são máscaras da cor do papel, as duas últimas as sombras; com
   background-attachment: local as máscaras rolam junto e vão revelando ou
   escondendo a sombra conforme a posição do scroll. */
.gm-table-wrap {
	background:
		linear-gradient(to right, var(--gm-papel, #fff) 30%, rgba(255, 255, 255, 0)),
		linear-gradient(to left,  var(--gm-papel, #fff) 30%, rgba(255, 255, 255, 0)) 100% 0,
		radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)),
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) 100% 0;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

/* A tabela de 2 colunas (Como enviar sua arte) cabe em 375px — o min-width de
   520px, pensado para as de 3 colunas, só a forçava a rolar. Sem rolagem, a
   dica de arraste acima não faz sentido e sai junto. */
.gm-table-wrap--estreita { background: none; }
.gm-table-wrap--estreita table { min-width: 0; }

/* O h2 da seção seguinte nascia colado na borda inferior da tabela. */
.gm-table-wrap { margin-bottom: 18px; }

/* Descrição do cartão do catálogo. Neste projeto .iw-cat-preco carrega a
   descrição, não preço, e vinha em magenta e negrito — com mais peso visual
   que o próprio nome do produto logo acima, o olho lia a descrição primeiro.
   Alinha com .gm-card-spec, que é a formatação correta de descrição de cartão. */
.iw-cat-preco {
	color: var(--gm-tinta-fraca, #5c5a5c);
	font-weight: 400;
	font-size: .82rem;
	line-height: 1.5;
}

/* O e-mail é o dado mais longo do bloco e quebrava no meio da palavra
   (…yahoo.com.b + r na linha seguinte). */
.gm-fone-valor,
.gm-selo h3 { overflow-wrap: anywhere; hyphens: none; }

@media (max-width: 520px) {
	/* ---------- piso de 13px ----------
	   Estes rem davam 11,52px (.72rem) e 12,8px (.8rem), abaixo do piso de 13px
	   que o resto do site usa para texto de apoio. */
	.gm-chapeu .elementor-heading-title,
	.gm-fone-label,
	.gm-ficha dt,
	.gm-consent,
	.gm-card-spec,
	.gm-selo-acao { font-size: 13px; }

	/* ---------- alvos de toque de 44px ---------- */
	a.gm-fone-valor,
	a.gm-selo-n,
	a.gm-selo-acao,
	a.gm-card-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Os botões medem 43px — 1px abaixo do mínimo, por conta do line-height. */
	.gm-btn .elementor-button,
	.gm-btn-linha .elementor-button,
	.gm-form .elementor-button[type="submit"],
	.gm-a-btn {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* O valor em destaque não cabe em uma linha a 375px com 1.25rem — vale para
	   o e-mail do card de contato, que é o mais longo dos três. */
	.gm-fone-valor,
	.gm-selo-n { font-size: 1.05rem; }

	/* ---------- barra de provas: um item por linha, centralizados ----------
	   O `grid-template-columns: 1fr` já vem do bloco de 520px mais acima nesta
	   folha; o que falta é desfazer o `text-align: left` que o bloco de 900px
	   aplica — sem isso os cinco números ficam encostados à esquerda, cada um
	   numa linha de largura cheia. */
	.gm-provas ul { text-align: center; }
}/* End custom CSS */