/* ==========================================================================
   Global Styles - Hello Elementor Child
   ========================================================================== */

:root {
	/* Brand palette — per 02_STYLEGUIDE.html (Amazonia Premium brand style guide) */
	--color-brown-dark: #8b4513;
	--color-brown-mid: #654321;
	--color-footer-dark: #1a1208;
	--color-forest-green: #1a3a2f; /* Floresta — manual de marca 14/09 (era #2d4f1e) */
	--color-cream: #f3eac0;
	--color-cream-dark: #f9f7f4; /* Creme — manual de marca (era #F9F3E3) */
	--color-brown-light: #d4a574; /* Algaroba — manual de marca (era #cdbca7) */
	--color-brown-text: #654321; /* Terra — manual de marca (era #3A2E1A) */
	--color-terra-red: #c0392b;
	--color-amazon-orange: #e67e22;
	--color-cream-2: #f9f3e3;
	--color-green: #628557; /* Musgo — manual de marca (era #2d6a4f) */
	--color-brown-2: #6c5e47;
	--color-gold-dark: #b8960c;
	--color-brown-3: #9a8b74;
	--color-cream-3: #f5f0e8;

	/* Legacy variable names kept so existing component CSS keeps working;
	   they now resolve to the style-guide palette above instead of the
	   earlier ad-hoc Playfair/Inter-era colors. */
	--color-brand-dark: var(--color-brown-mid);
	--color-brand-gold: #c9a027;
	--color-brand-gold-strong: #c9a027;
	--color-brand-cream: var(--color-cream);
	--color-brand-green: var(--color-forest-green);
	--color-brand-tan: var(--color-brown-light);
	--color-brand-brown-mid: var(--color-brown-mid);
	--color-brand-forest: var(--color-forest-green);
	--color-brand-terracotta: var(--color-terra-red);
	--color-section-cream: var(--color-cream-dark);
	--color-heading-dark: var(--color-brown-text);
	--color-body-text: var(--color-brown-mid);
	--color-gold-light: #d4af37;
	--color-cream-1: #fffdf7;

	--container-width: 1200px;
	--page-container-width: 1240px;
	--page-container-padding: 20px;

	--font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* manual de marca 14/09 (era Inter) */

	--section-padding-y: 80px;
}

@media (max-width: 992px) {
	:root {
		--section-padding-y: 60px;
	}

	h1,
	.h1 {
		font-size: 62px;
	}

	h2,
	.h2,
	.section-heading {
		font-size: 42px;
	}
}

@media (max-width: 768px) {
	:root {
		--section-padding-y: 48px;
	}
}

body {
	font-family: var(--font-body);
}

html {
	scroll-behavior: smooth;
}

.container {
	max-width: var(--page-container-width);
	margin: 0 auto;
	padding-left: var(--page-container-padding);
	padding-right: var(--page-container-padding);
}

/* ---- Typography scale ---- */
h1,
.h1 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 86px;
	line-height: normal;
	/* letter-spacing: 0.02em; */
	text-align: center;
	color: var(--color-heading-dark);
}

h2,
.h2,
.section-heading {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 48px;
	line-height: normal;
	/* letter-spacing: 0.02em; */
	text-align: center;
	/* text-transform: capitalize; — removido 14/09 (PT-BR não usa Title Case; DEC-0021) */
	color: var(--color-heading-dark);
}

h3,
.h3 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 28px;
	line-height: normal;
	/* letter-spacing: 0.02em; */
	/* text-transform: capitalize; — removido 14/09 (PT-BR não usa Title Case; DEC-0021) */
	color: var(--color-heading-dark);
}

h4,
.h4 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 32px;
	line-height: normal;
	letter-spacing: 0.02em;
	text-align: right;
	/* text-transform: capitalize; — removido 14/09 (PT-BR não usa Title Case; DEC-0021) */
	color: var(--color-cream-2);
}

h5,
.h5 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	line-height: normal;
	letter-spacing: 0.02em;
	text-align: center;
	/* text-transform: capitalize; — removido 14/09 (PT-BR não usa Title Case; DEC-0021) */
	color: var(--color-heading-dark);
}

p {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.02em;
}

.text-sm {
	font-size: 14px;
	line-height: 1.5;
}

@media (max-width: 768px) {
	.about-story-media img {
		border-radius: 20px;
	}

	.about-story-grid {
		gap: 40px;
		display: flex !important;
		flex-direction: column-reverse;
	}

	p {
		font-size: 14px;
		line-height: 150%;
		letter-spacing: 0.28px;
	}

	h1,
	.h1 {
		font-size: 46px;
	}

	h2,
	.h2,
	.section-heading {
		font-size: 32px;
	}

	h4,
	.h4 {
		font-size: 18px;
	}

	h5,
	.h5 {
		font-size: 14px;
	}
}

/* ---- Section eyebrow label ---- */
.section-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-brand-terracotta);
}

.section-label::before {
	content: '';
	flex-shrink: 0;
	width: 2px;
	height: 12px;
	background-color: currentColor;
}

.section-label--center {
	justify-content: center;
}

.section-heading--center {
	text-align: center;
}

/* ---- Small shared utilities ---- */
.text-accent {
	color: var(--color-gold-dark);
}

.pill-outline {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--color-gold-dark);
	color: var(--color-gold-dark);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.32px;
	padding: 14px 20px;
	border-radius: 999px;
	text-decoration: none;
}

/* ---- Shared CTA button ("Big Light Button") ---- */
.btn-quote {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	width: fit-content;
	background-color: var(--color-gold-light);
	color: var(--color-cream-1);
	font-family: var(--font-body);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: 0.32px;
	padding: 18px 22px;
	border-radius: 12px;
	text-decoration: none;
	white-space: nowrap;
	line-height: normal;
}

/* ---- Shared secondary CTA ("White Stroke Big" / brown variant) ---- */
.btn-outline-white,
.btn-outline-brown {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: fit-content;
	background-color: transparent;
	font-family: var(--font-body);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: 0.32px;
	padding: 18px 22px;
	border-radius: 12px;
	text-decoration: none;
	white-space: nowrap;
}

.btn-outline-white {
	border: 1px solid var(--color-cream-1);
	color: var(--color-cream-1);
}

.btn-outline-brown {
	border: 1px solid var(--color-brown-text);
	color: var(--color-brown-text);
}
/* ==========================================================================
   Compatibilidade Elementor (14/09/2026 — DEC-0021)
   A escala tipográfica acima centraliza h1/h2/h3/h5 e alinha h4 à direita para os
   templates PHP legados. Dentro de páginas Elementor o alinhamento é decidido
   pelo widget, então os títulos herdam o alinhamento do wrapper.
   ========================================================================== */
.elementor h1, .elementor h2, .elementor h3, .elementor h4, .elementor h5,
.elementor .elementor-heading-title {
	text-align: inherit;
}
.elementor h4 {
	color: inherit;
}

/* ---- Formulários CF7 dentro de páginas Elementor (Contato B2C, 14/09) ---- */
.elementor .wpcf7 label { display:block; font-family: var(--font-body); font-size:14px; font-weight:600; color: var(--color-brown-text); margin:0 0 14px; }
.elementor .wpcf7 .ap-form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 767px) { .elementor .wpcf7 .ap-form-grid { grid-template-columns: 1fr; } }
.elementor .wpcf7 input[type="text"], .elementor .wpcf7 input[type="email"], .elementor .wpcf7 input[type="tel"],
.elementor .wpcf7 select, .elementor .wpcf7 textarea {
	display:block; width:100%; margin-top:6px; padding:12px 14px; border:1px solid var(--color-brown-light); border-radius:10px;
	background:#fff; font-family: var(--font-body); font-size:15px; color: var(--color-brown-text); font-weight:400;
}
.elementor .wpcf7 textarea { min-height:140px; }
.elementor .wpcf7 input:focus, .elementor .wpcf7 select:focus, .elementor .wpcf7 textarea:focus { outline:none; border-color: var(--color-brand-gold); box-shadow:0 0 0 3px rgba(201,160,39,.2); }
.elementor .wpcf7 .wpcf7-acceptance label { display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:13px; line-height:1.5; }
.elementor .wpcf7 .wpcf7-acceptance input { margin-top:3px; }
.elementor .wpcf7 input[type="submit"] {
	background: var(--color-brand-gold); color: var(--color-footer-dark); border:0; border-radius:10px; padding:16px 28px;
	font-family: var(--font-body); font-size:14px; font-weight:600; letter-spacing:1px; text-transform:uppercase; cursor:pointer;
}
.elementor .wpcf7 input[type="submit"]:hover { background: var(--color-gold-dark); }
.elementor .wpcf7 form.sent .wpcf7-response-output { border-color: var(--color-green); color: var(--color-green); }
/* links em textos do Elementor (cards de contato etc.) */
.elementor .elementor-widget-text-editor a { color: var(--color-brown-dark); text-decoration: underline; text-underline-offset: 3px; }
.elementor .elementor-widget-text-editor a:hover { color: var(--color-brand-gold); }

/* ==========================================================================
   Auditoria visual 17/09/2026 — componentes compartilhados
   AP-03 (links sobre blocos escuros) · AP-05 (consentimento na identidade) ·
   AP-23 (container da Política de Cookies) · AP-25 (aba Gerenciar consentimento) ·
   AP-26 (página 404)
   ========================================================================== */

/* ---- AP-03: blocos verdes das políticas -------------------------------- */
/* Os links herdavam o marrom dos textos do Elementor (#8B4513 sobre #1A3A2F =
   1,75:1 — ilegível). Creme sobre o mesmo verde = 10,26:1. */
#contato-legal a,
.ap-secao-escura a,
#contato-legal .elementor-widget-text-editor a,
.ap-secao-escura .elementor-widget-text-editor a {
	color: var(--color-cream);
	text-decoration: underline;
	text-underline-offset: 3px;
}

#contato-legal a:hover,
#contato-legal a:focus-visible,
.ap-secao-escura a:hover,
.ap-secao-escura a:focus-visible {
	color: #ffffff;
}

#contato-legal a:focus-visible,
.ap-secao-escura a:focus-visible {
	outline: 2px solid var(--color-gold-light);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ---- AP-05: banner de consentimento com as cores da marca --------------- */
/* Só cores: os botões aceitar/rejeitar/preferências, as categorias e todo o
   funcionamento do Complianz continuam como o plugin define. O ajuste
   definitivo pode ser repetido em Complianz › Banner de consentimento ›
   Aparência; aqui ele fica versionado junto do tema.
   Contrastes: texto #1A1208 sobre ouro #C9A027 = 7,53:1; #654321 sobre branco
   = 9,3:1; link #8B4513 sobre branco = 7,1:1. */
html:root {
	--cmplz_button_accept_background_color: #c9a027;
	--cmplz_button_accept_border_color: #c9a027;
	--cmplz_button_accept_text_color: #1a1208;
	--cmplz_button_deny_background_color: #ffffff;
	--cmplz_button_deny_border_color: #c9a027;
	--cmplz_button_deny_text_color: #654321;
	--cmplz_button_settings_background_color: #ffffff;
	--cmplz_button_settings_border_color: #d4a574;
	--cmplz_button_settings_text_color: #654321;
	--cmplz_hyperlink_color: #8b4513;
	--cmplz_slider_active_color: #628557;
	--cmplz_text_color: #3a2e1a;
	--cmplz_category_header_always_active_color: #4a6b42;
}

.cmplz-cookiebanner .cmplz-btn:focus-visible,
.cmplz-cookiebanner .cmplz-category-toggle:focus-visible,
.cmplz-cookiebanner a:focus-visible,
#cmplz-manage-consent .cmplz-manage-consent:focus-visible {
	outline: 2px solid #8b4513;
	outline-offset: 2px;
}

/* ---- AP-25: aba "Gerenciar consentimento" mais discreta ----------------- */
/* RV-08 — 19/09/2026: rótulo inteiro visível, sem depender de hover.
   No mobile, o botão fica no fluxo ao fim da página para não cobrir CTAs. */
html:root {
	--cmplz-manage-consent-height: 44px;
	--cmplz-manage-consent-offset: 0px;
}

#cmplz-manage-consent .cmplz-manage-consent {
	right: 16px;
	padding: 8px 14px;
	font-size: 12px;
	max-width: 62vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#cmplz-manage-consent .cmplz-manage-consent:focus-visible {
	animation: mc_slideIn 0.2s forwards;
}

@media (max-width: 768px) {
	/* Preserva a ocultação do plugin enquanto o banner está aberto. */
    #cmplz-manage-consent .cmplz-manage-consent.cmplz-show:not(.cmplz-dismissed) {
        display: block;
        position: static;
        margin: 12px 18px;
        max-width: calc(100% - 36px);
        height: auto;
        min-height: 44px;
        white-space: normal;
    }
}

/* ---- AP-23: Política de Cookies com o container das demais políticas ---- */
/* A saída do Complianz é dinâmica e continua intacta — só ganha o mesmo
   container de leitura, margens e hierarquia das outras páginas legais. */
body.page-id-31 #primary.site-main,
body.page-id-31 .site-main > article,
/* o Complianz também usa a classe .cmplz-document no <body>; o seletor precisa
   ser o container do documento, senão o site inteiro fica com 860px */
.entry-content div.cmplz-document {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

body.page-id-31 #primary.site-main {
	padding: 56px var(--page-container-padding) 80px;
}

body.page-id-31 .entry-title,
body.page-id-31 .page-header h1 {
	font-size: 44px;
	line-height: 1.15;
	text-align: left;
	margin-bottom: 8px;
	color: var(--color-heading-dark);
}

/* AP RODAPE COOKIES 2026-09-24: as regras abaixo eram ".cmplz-document X".
   Como o Complianz também põe a classe .cmplz-document no <body> desta página,
   elas vazavam para o cabeçalho e o rodapé (links sublinhados e marrons,
   títulos e listas com outra cor e entrelinha). Agora valem só dentro do documento. */
div.cmplz-document h2 {
	font-family: var(--font-heading);
	font-size: 28px;
	margin: 40px 0 14px;
	color: var(--color-heading-dark);
}

div.cmplz-document h3 {
	font-family: var(--font-heading);
	font-size: 22px;
	margin: 28px 0 10px;
	color: var(--color-heading-dark);
}

div.cmplz-document p,
div.cmplz-document li,
div.cmplz-document td {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--color-brown-2);
}

div.cmplz-document a {
	color: var(--color-brown-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

div.cmplz-document table {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0 24px;
}

div.cmplz-document table td,
div.cmplz-document table th {
	border: 1px solid var(--color-brown-light);
	padding: 12px 14px;
	text-align: left;
}

@media (max-width: 768px) {
	body.page-id-31 #primary.site-main {
		padding: 32px 18px 56px;
	}

	body.page-id-31 .entry-title,
	body.page-id-31 .page-header h1 {
		font-size: 32px;
	}

	div.cmplz-document h2 {
		font-size: 22px;
	}
}

/* ---- AP-26: página 404 ------------------------------------------------- */
.hec-404 {
	background-color: var(--color-cream-dark);
}

.hec-404-inner {
	max-width: 680px;
	margin: 0 auto;
	padding: 90px var(--page-container-padding) 110px;
	text-align: center;
}

.hec-404-code {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--color-gold-dark);
	margin-bottom: 12px;
}

.hec-404-title {
	font-family: var(--font-heading);
	font-size: 52px;
	line-height: 1.1;
	color: var(--color-heading-dark);
	margin-bottom: 16px;
}

.hec-404-text {
	font-size: 17px;
	line-height: 1.65;
	color: var(--color-brown-2);
	margin-bottom: 28px;
}

.hec-404-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-bottom: 24px;
}

.hec-404-actions .btn-quote {
	color: #1a1208;
	font-weight: 600;
}

.hec-404-help {
	font-size: 15px;
	color: var(--color-brown-2);
}

.hec-404-help a {
	color: var(--color-brown-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 768px) {
	.hec-404-inner {
		padding: 56px 18px 72px;
	}

	.hec-404-title {
		font-size: 34px;
	}

	.hec-404-actions .btn-quote,
	.hec-404-actions .btn-outline-brown {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Auditoria visual 17/09/2026 — ajustes de página
   AP-07 (primeira ação visível em 390×844) · AP-08 (vitrine da Home) ·
   AP-09 (processo em 4/2/1) · AP-20 (retratos da equipe) · AP-22 (conta)

   Os seletores usam os ids das seções geradas pelo kit (Elementor). Se a página
   for regerada com novos ids, revisar este bloco.
   ========================================================================== */

/* ---- AP-08: vitrine "Nossos produtos" em duas colunas ------------------- */
@media (min-width: 1025px) {
	body .elementor-141 .elementor-element.elementor-element-64e8464 {
		flex-direction: row;
		align-items: center;
		gap: 48px;
	}

	body .elementor-141 .elementor-element.elementor-element-2790b5b,
	body .elementor-141 .elementor-element.elementor-element-9b07045 {
		/* calc() por causa do gap de 48px: 50% + 50% + gap estouraria a linha */
		width: calc(50% - 24px);
		max-width: calc(50% - 24px);
		flex: 1 1 calc(50% - 24px);
	}

	body .elementor-141 .elementor-element.elementor-element-9b07045 .woocommerce ul.products li.product,
	body .elementor-141 .elementor-element.elementor-element-9b07045 .woocommerce ul.products {
		width: 100%;
		max-width: 460px;
		margin: 0;
		float: none;
	}
}

body .elementor-141 .elementor-element.elementor-element-9b07045 .woocommerce ul.products li.product img {
	width: 100%;
	height: auto;
	border-radius: 14px;
}

body .elementor-141 .elementor-element.elementor-element-9b07045 .woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-heading);
	font-size: 22px;
	color: var(--color-heading-dark);
	padding: 12px 0 4px;
}

body .elementor-141 .elementor-element.elementor-element-9b07045 .woocommerce ul.products li.product .price {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	color: var(--color-brown-text);
}

body .elementor-141 .elementor-element.elementor-element-9b07045 .woocommerce ul.products li.product .button {
	background-color: var(--color-brand-gold);
	color: #1a1208;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 10px;
	padding: 14px 22px;
	margin-top: 10px;
}

body .elementor-141 .elementor-element.elementor-element-9b07045 .woocommerce ul.products li.product .button:hover {
	background-color: var(--color-gold-dark);
	color: #1a1208;
}

/* ---- AP-09: etapas do processo em 4 / 2 / 1 ---------------------------- */
@media (min-width: 1025px) {
	body .elementor-141 .elementor-element.elementor-element-8df501d {
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 20px;
	}

	body .elementor-141 .elementor-element.elementor-element-8df501d > .e-con {
		width: 25%;
		max-width: 25%;
		flex: 1 1 25%;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	/* Correção 23/09/2026: no tablet o Elementor aplica gap de 24px (não 20px).
	   Com calc(50% - 10px), 2 cards + gap = 100% + 4px, e cada card caía
	   sozinho numa linha, colado à esquerda. O gap agora é explícito e a
	   largura é derivada dele. */
	body .elementor-141 .elementor-element.elementor-element-8df501d {
		gap: 24px;
		justify-content: center;
	}

	body .elementor-141 .elementor-element.elementor-element-8df501d > .e-con {
		width: calc((100% - 24px) / 2);
		max-width: calc((100% - 24px) / 2);
		flex: 0 0 calc((100% - 24px) / 2);
	}
}

/* proporção igual nas fotos das etapas */
body .elementor-141 .elementor-element.elementor-element-8df501d .elementor-widget-image img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 12px;
}

/* ---- AP-07: primeira ação visível no mobile (Home e Loja) -------------- */
@media (max-width: 767px) {
	/* Home — hero */
	body .elementor-141 .elementor-element.elementor-element-df3165e {
		padding-top: 44px !important;
		padding-bottom: 44px !important;
	}

	body .elementor-141 .elementor-element.elementor-element-df3165e h1,
	body .elementor-141 .elementor-element.elementor-element-df3165e .elementor-heading-title {
		font-size: 34px !important;
		line-height: 1.12 !important;
	}

	body .elementor-141 .elementor-element.elementor-element-df3165e p {
		font-size: 15px !important;
	}

	/* Loja — hero e bloco de compra */
	body #loja-hero {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	body #loja-hero h1,
	body #loja-hero .elementor-heading-title {
		font-size: 32px !important;
		line-height: 1.12 !important;
	}

	body #loja-hero .elementor-widget-image img {
		max-width: 190px;
		margin: 0 auto;
	}

	body #comprar {
		padding-top: 36px !important;
		padding-bottom: 44px !important;
	}

	body #comprar h2,
	body #comprar .elementor-heading-title {
		font-size: 26px !important;
	}
}

/* ---- AP-20: retratos da equipe com a mesma proporção ------------------- */
body .elementor-188 .elementor-element .elementor-widget-image img[src*="equipe-0"] {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border-radius: 14px;
}

/* ---- AP-22: largura dos formulários de conta -------------------------- */
.woocommerce-account:not(.logged-in) .woocommerce,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account .woocommerce-form-register {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-ResetPassword {
	border: 1px solid var(--color-brown-light);
	border-radius: 14px;
	padding: 28px;
	background-color: #fff;
}

@media (max-width: 767px) {
	.woocommerce-account .woocommerce-form-login,
	.woocommerce-account .woocommerce-ResetPassword {
		padding: 20px 16px;
	}
}

/* ---- AP-18: leitura da página Sobre no celular ------------------------- */
/* A página tinha 13.805 px de altura em 390 px. Nenhum fato foi removido:
   as seções ficam mais compactas (respiro, altura de imagem e escala dos
   títulos), o que reduz a rolagem sem tocar no conteúdo aprovado. */
@media (max-width: 767px) {
	body .elementor-188 .elementor-element.e-con > .e-con-inner,
	body .elementor-188 .elementor-element.e-parent {
		padding-top: 44px !important;
		padding-bottom: 44px !important;
	}

	body .elementor-188 .elementor-element .elementor-heading-title {
		line-height: 1.15;
	}

	body .elementor-188 h2.elementor-heading-title,
	body .elementor-188 .elementor-widget-heading h2 {
		font-size: 28px !important;
	}

	body .elementor-188 .elementor-widget-image img {
		max-height: 260px;
		object-fit: cover;
	}

	body .elementor-188 .elementor-element .elementor-widget-image img[src*="equipe-0"] {
		max-height: 320px;
	}
}

/* ==========================================================================
   BEGIN AP ALINHAMENTOS HOME/LOJA 2026-09-23
   Centralização e distribuição de seções da Home (elementor-141) e da Loja
   (elementor-184). Seletores por id de elemento do kit; se a página for
   regerada com novos ids, revisar este bloco.
   ========================================================================== */

/* ---- Home · indicadores (#numeros): 4 / 2 / 1 colunas iguais ----------- */
/* Causa: os 3 contadores têm largura natural e o "Padrão UE" (740px) não
   cabia na mesma linha; sem justify-content, tudo ficava à esquerda. */
body .elementor-141 .elementor-element.elementor-element-02eab32 > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 24px;
	align-items: start;
	justify-items: center;
}

body .elementor-141 .elementor-element.elementor-element-02eab32 > .e-con-inner > .elementor-element {
	width: 100%;
	max-width: 100%;
	margin: 0;
	text-align: center;
}

@media (max-width: 1024px) {
	body .elementor-141 .elementor-element.elementor-element-02eab32 > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	body .elementor-141 .elementor-element.elementor-element-02eab32 > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}

/* ---- Home · conformidade: blocos no mesmo eixo central ---------------- */
/* Causa: cada icon-box tinha a largura do próprio texto e ficava encostado
   à esquerda; o centro de cada bloco caía num x diferente. */
body .elementor-141 .elementor-element.elementor-element-8e4866d {
	justify-content: center;
}

body .elementor-141 .elementor-element.elementor-element-8e4866d > .elementor-element {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

/* ---- Home e Loja · grupos de CTA centralizados, empilháveis ------------ */
/* Causa: containers em linha sem justify-content; os botões ficavam à
   esquerda enquanto título e texto estavam centralizados. Com wrap, os
   botões empilham em telas estreitas e continuam centralizados. */
body .elementor-141 .elementor-element.elementor-element-75aa19f,
body .elementor-184 .elementor-element.elementor-element-2ddacc2 {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px;
}

body .elementor-141 .elementor-element.elementor-element-75aa19f > .elementor-widget-button,
body .elementor-184 .elementor-element.elementor-element-2ddacc2 > .elementor-widget-button {
	width: auto;
	max-width: 100%;
	margin: 0;
}

body .elementor-141 .elementor-element.elementor-element-75aa19f .elementor-button-wrapper,
body .elementor-184 .elementor-element.elementor-element-2ddacc2 .elementor-button-wrapper {
	text-align: center;
}

/* o botão com contorno tem 1px de borda (52px contra 50px): mesma altura
   para os dois, com o texto centrado, para alinharem no topo e na base */
body .elementor-141 .elementor-element.elementor-element-75aa19f a.elementor-button,
body .elementor-184 .elementor-element.elementor-element-2ddacc2 a.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	body .elementor-141 .elementor-element.elementor-element-75aa19f,
	body .elementor-184 .elementor-element.elementor-element-2ddacc2 {
		flex-direction: column;
	}
}
/* ---- Sobre · indicadores (#numeros) e "O que fazemos": 4 / 2 / 1 ----- */
/* Mesma causa da Home: itens de largura natural sem centralização em
   #numeros; e em "O que fazemos" 50% + 50% + gap 24px estourava a linha
   no tablet, deixando um card por linha colado à esquerda. */
body .elementor-188 .elementor-element.elementor-element-486d1c4 > .e-con-inner,
body .elementor-188 .elementor-element.elementor-element-361cd4c {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 24px;
	align-items: start;
	justify-items: center;
}

body .elementor-188 .elementor-element.elementor-element-361cd4c {
	gap: 24px;
}

body .elementor-188 .elementor-element.elementor-element-486d1c4 > .e-con-inner > .elementor-element,
body .elementor-188 .elementor-element.elementor-element-361cd4c > .elementor-element {
	width: 100%;
	max-width: 100%;
	margin: 0;
	text-align: center;
}

/* o 4º indicador vem dentro de um container com 8px de respiro no topo;
   sem ele, os topos dos quatro itens alinham */
body .elementor-188 .elementor-element.elementor-element-486d1c4 .elementor-element.elementor-element-8be3db4 {
	padding-top: 0;
	padding-bottom: 0;
}

@media (max-width: 1024px) {
	body .elementor-188 .elementor-element.elementor-element-486d1c4 > .e-con-inner,
	body .elementor-188 .elementor-element.elementor-element-361cd4c {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	body .elementor-188 .elementor-element.elementor-element-486d1c4 > .e-con-inner,
	body .elementor-188 .elementor-element.elementor-element-361cd4c {
		grid-template-columns: minmax(0, 1fr);
	}
	body .elementor-188 .elementor-element.elementor-element-486d1c4 > .e-con-inner {
		gap: 28px;
	}
}
/* END AP ALINHAMENTOS HOME/LOJA 2026-09-23 */


/* ==========================================================================
   BEGIN AP BLOG 2026-09-23
   Índice (home.php), arquivos (archive.php) e artigo (single-post.php) do blog.
   Tudo escopado em .ap-blog: nenhuma outra página é afetada.
   Antes: título "Arquivos" a 86px, links no magenta padrão do Hello (#cc3366),
   texto de ponta a ponta (1440px por linha no desktop), sem imagem, data,
   trilha nem ligação com a loja.
   Reversão: apagar deste BEGIN até o END (e os três modelos PHP do blog).
   ========================================================================== */

/* o Hello aplica body:not([class*=elementor-page-]) .site-main { max-width: 100%;
   padding: 0 } com peso (0,2,1); este seletor tem (0,2,2) */
body main.site-main.ap-blog {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 56px 24px 80px;
	box-sizing: border-box;
	color: var(--color-body-text);
	font-family: var(--font-body);
}

.ap-blog a {
	color: var(--color-brown-dark);
}

.ap-blog-rotulo {
	margin: 0 0 12px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--color-gold-dark);
}

.ap-blog-rotulo a {
	color: inherit;
	text-decoration: none;
}

.ap-blog-meta {
	margin: 0;
	font-size: 13px;
	color: var(--color-brown-3);
}

.ap-blog-meta span {
	margin: 0 6px;
}

/* ---- Índice ------------------------------------------------------------ */
.ap-blog-cabecalho {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
}

.ap-blog-cabecalho__titulo {
	margin: 0 0 12px;
	font-family: var(--font-heading);
	font-size: 48px;
	line-height: 1.1;
	color: var(--color-heading-dark);
}

.ap-blog-cabecalho__intro {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-brown-2);
}

.ap-blog-grade {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 24px;
}

.ap-blog-grade--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ap-blog-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(212, 165, 116, 0.45);
	border-radius: 14px;
	overflow: hidden;
}

.ap-blog-card__imagem {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--color-cream-3);
	overflow: hidden;
}

.ap-blog-card__imagem img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.ap-blog-card:hover .ap-blog-card__imagem img {
	transform: scale(1.03);
}

.ap-blog-card__sem-imagem {
	display: block;
	width: 100%;
	height: 100%;
}

.ap-blog-card__corpo {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 20px 22px 24px;
}

.ap-blog-card__titulo {
	margin: 0;
	text-align: left;
	font-family: var(--font-heading);
	font-size: 26px;
	line-height: 1.15;
}

.ap-blog-card__titulo a {
	color: var(--color-heading-dark);
	text-decoration: none;
}

.ap-blog-card__titulo a:hover {
	color: var(--color-brown-dark);
}

.ap-blog-card__resumo p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-brown-2);
}

.ap-blog-card__ler {
	margin-top: auto;
	padding-top: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.ap-blog-paginacao {
	margin-top: 40px;
	text-align: center;
}

/* ---- Artigo -------------------------------------------------------------- */
.ap-blog-artigo__coluna {
	max-width: 760px;
	margin: 0 auto;
}

.ap-blog-trilha {
	margin-bottom: 20px;
	font-size: 13px;
	color: var(--color-brown-3);
}

.ap-blog-trilha a {
	text-decoration: none;
}

.ap-blog-trilha span {
	margin: 0 6px;
}

.ap-blog-artigo__cabecalho {
	margin-bottom: 24px;
}

.ap-blog-artigo__titulo {
	margin: 0 0 12px;
	font-family: var(--font-heading);
	font-size: 46px;
	line-height: 1.1;
	text-align: left;
	color: var(--color-heading-dark);
}

.ap-blog-artigo__destaque {
	margin: 0 0 32px;
}

.ap-blog-artigo__destaque img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 14px;
}

.ap-blog-artigo__texto {
	font-size: 17px;
	line-height: 1.75;
	color: var(--color-body-text);
}

.ap-blog-artigo__texto p,
.ap-blog-artigo__texto ul,
.ap-blog-artigo__texto ol {
	margin: 0 0 18px;
}

.ap-blog-artigo__texto h2,
.ap-blog-artigo__texto h3 {
	font-family: var(--font-heading);
	color: var(--color-heading-dark);
	text-align: left;
	line-height: 1.2;
}

.ap-blog-artigo__texto h2 {
	margin: 44px 0 14px;
	font-size: 32px;
}

.ap-blog-artigo__texto h3 {
	margin: 28px 0 10px;
	font-size: 24px;
}

.ap-blog-artigo__texto ul,
.ap-blog-artigo__texto ol {
	padding-left: 22px;
}

.ap-blog-artigo__texto li {
	margin-bottom: 8px;
}

.ap-blog-artigo__texto li::marker {
	color: var(--color-brand-gold);
}

.ap-blog-artigo__texto a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ap-blog-artigo .ap-credito-autoria {
	margin: 0 0 24px;
	font-size: 14px;
	color: var(--color-brown-2);
}

.ap-blog-cta {
	margin: 48px 0 0;
	padding: 28px 28px 30px;
	background: var(--color-cream-3);
	border-left: 4px solid var(--color-brand-gold);
	border-radius: 0 14px 14px 0;
}

.ap-blog-cta__titulo {
	margin: 0 0 8px;
	font-family: var(--font-heading);
	font-size: 28px;
	line-height: 1.15;
	color: var(--color-heading-dark);
}

.ap-blog-cta__texto {
	margin: 0 0 18px;
	font-size: 15px;
	color: var(--color-brown-2);
}

.ap-blog .ap-blog-cta__botao {
	display: inline-block;
	padding: 14px 26px;
	border-radius: 10px;
	background: var(--color-brand-gold);
	color: #1a1208;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
}

.ap-blog .ap-blog-cta__botao:hover,
.ap-blog .ap-blog-cta__botao:focus-visible {
	background: var(--color-gold-dark);
	color: #1a1208;
}

.ap-blog-mais {
	max-width: var(--container-width);
	margin: 72px auto 0;
	padding-top: 40px;
	border-top: 1px solid rgba(212, 165, 116, 0.45);
}

.ap-blog-mais__titulo {
	margin: 0 0 24px;
	font-family: var(--font-heading);
	font-size: 32px;
	text-align: center;
	color: var(--color-heading-dark);
}

.ap-blog-mais .ap-blog-grade--2 {
	max-width: 900px;
	margin: 0 auto;
}

/* ---- Tablet e celular ---------------------------------------------------- */
@media (max-width: 1024px) {
	.ap-blog-grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	body main.site-main.ap-blog {
		padding: 32px 16px 56px;
	}

	.ap-blog-cabecalho {
		margin-bottom: 32px;
	}

	.ap-blog-cabecalho__titulo {
		font-size: 34px;
	}

	.ap-blog-grade,
	.ap-blog-grade--2 {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.ap-blog-card__titulo {
		font-size: 24px;
	}

	.ap-blog-artigo__titulo {
		font-size: 32px;
	}

	.ap-blog-artigo__texto {
		font-size: 16px;
		line-height: 1.7;
	}

	.ap-blog-artigo__texto h2 {
		margin-top: 36px;
		font-size: 26px;
	}

	.ap-blog-artigo__texto h3 {
		font-size: 21px;
	}

	.ap-blog-cta {
		padding: 22px 20px 24px;
	}

	.ap-blog-cta__titulo {
		font-size: 24px;
	}

	.ap-blog-mais {
		margin-top: 56px;
	}
}
/* END AP BLOG 2026-09-23 */