/* ------------------------------------------------------------------
   Ouro & Terra — Catálogo de ofertas
   Cada folha é uma A4. Tudo dentro dela é medido em % da folha ou em
   cqw (1cqw = 1% da largura da folha), então a folha inteira encolhe
   junto e nada sai do lugar.
   As medidas vieram do próprio PDF do catálogo.
   ------------------------------------------------------------------ */

.oet-cat {
	--oet-marrom: #76220B;
	--oet-ouro: #B17C36;
	--oet-rodape: #925F36;
	--oet-script: 'OET Script', 'Pinyon Script', 'Great Vibes', cursive;
	--oet-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--oet-poiret: 'Poiret One', 'Montserrat', sans-serif;
	--oet-cond: 'Oswald', 'Montserrat', sans-serif;
	--oet-plex: 'IBM Plex Sans Condensed', 'Montserrat', sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	width: 100%;
	max-width: min(840px, 100vw - 20px);
	margin: 0 auto;
	padding: 6px 0 40px;
	box-sizing: border-box;
}

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

.oet-folha {
	position: relative;
	width: 100%;
	aspect-ratio: 210 / 297;
	container-type: inline-size;
	background: #fff;
	overflow: hidden;
	font-family: var(--oet-sans);
	color: var(--oet-marrom);
	box-shadow: 0 2px 16px rgba(0, 0, 0, .13);
	line-height: 1.2;
	text-rendering: optimizeLegibility;
}

.oet-im {
	position: absolute;
	height: auto;
	max-width: none;
	display: block;
	object-fit: fill;
}

/* O tema do site tem `.elementor img{max-width:100%}` e espremia as fotos
   largas, que no catálogo passam de propósito da borda da folha.
   Dentro da folha quem manda é a medida da folha. */
.oet-cat .oet-folha img {
	max-width: none !important;
	min-width: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.oet-cat .oet-capa-qr img { max-width: 100% !important; }

.oet-im-cobre { object-fit: cover; object-position: center top; }

/* véu colorido por cima da foto, como no catálogo impresso */
.oet-veu {
	position: absolute;
	display: block;
	background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--veu) 62%, transparent) 68%, color-mix(in srgb, var(--veu) 74%, transparent) 100%);
	pointer-events: none;
}

/* texto solto posicionado pelas coordenadas medidas no PDF */
.oet-txt {
	position: absolute;
	line-height: 1;
	white-space: nowrap;
	margin: 0;
	-webkit-text-stroke-width: var(--oet-borda, 0);
	-webkit-text-stroke-color: var(--oet-contorno, transparent);
	paint-order: stroke fill;
}

.oet-f-script { font-family: var(--oet-script); }
.oet-f-poiret { font-family: var(--oet-poiret); }
.oet-f-cond   { font-family: var(--oet-cond); font-weight: 300; }
.oet-f-sans   { font-family: var(--oet-sans); }
.oet-f-plex   { font-family: var(--oet-plex); }

.oet-faixa { position: absolute; display: block; }

/* ---------------- rodapé ---------------- */

.oet-rodape {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3.55%;
	background: var(--oet-rodape);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3.4cqw;
	font-size: 1.55cqw;
	font-weight: 600;
	letter-spacing: .22em;
}

.oet-rodape-ponto { letter-spacing: 0; }
.oet-rodape-insta { display: inline-flex; align-items: center; gap: .7cqw; letter-spacing: .22em; }
.oet-rodape-insta svg { width: 2.1cqw; height: 2.1cqw; flex: 0 0 auto; }

/* ================= CAPA ================= */

.oet-capa-chapeu {
	position: absolute;
	left: 0; right: 0; top: 73.6%;
	text-align: center;
	font-size: 2.6cqw;
	font-weight: 400;
	letter-spacing: .34em;
	color: #762d15;
	text-indent: .34em;
}

.oet-capa-marca {
	position: absolute;
	left: 0; right: 0; top: 76.4%;
	text-align: center;
	font-size: 7.2cqw;
	letter-spacing: .04em;
	color: #762d15;
	line-height: 1.25;
}

.oet-capa-edicao {
	position: absolute;
	left: 2.9%; top: 92.2%;
	width: 30%;
	height: 3.6%;
	background: #f3e8d6;
	color: #a27346;
	font-size: 1.72cqw;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: .04em;
}

.oet-capa-credito {
	position: absolute;
	left: 0; right: 0; top: 94.3%;
	height: 5.7%;
	background: var(--oet-rodape);
	color: #fff;
	font-size: 1.72cqw;
	font-weight: 600;
	display: flex;
	align-items: flex-end;
	padding: 0 0 .9% 4.2%;
}

.oet-capa-qr {
	position: absolute;
	left: 82.1%; top: 90.5%;
	width: 13.4%;
	height: 9.5%;
	background: #fff;
	padding: .5%;
}
.oet-capa-qr img { width: 100%; height: 100%; object-fit: contain; }

/* ================= EDITORIAL ================= */

.oet-ed-texto {
	position: absolute;
	font-weight: 400;
	text-align: justify;
}
.oet-ed-texto p { margin: 0 0 .5em; text-indent: 2.6em; }
.oet-ed-texto strong { font-weight: 700; }

/* ================= PÁGINA DE FOTO ================= */

.oet-ft-linhas {
	position: absolute;
	left: 0; right: 0; top: 87.6%;
	text-align: center;
	color: #fff;
	font-size: 2.55cqw;
	line-height: 1.5;
}
.oet-ft-linhas span { display: block; }

/* ================= PRODUTO ================= */

.oet-pd-ref {
	position: absolute;
	right: 12.4%;
	top: 72.1%;
	background: var(--oet-ouro);
	color: #fff;
	font-size: 1.5cqw;
	font-weight: 600;
	padding: .62cqw 1.5cqw;
	white-space: nowrap;
	line-height: 1;
}

/* o selo desenhado nao recebe clique — quem e clicavel e o .oet-pd-link,
   uma rodela do tamanho do botao. Antes o <a> cobria a folha inteira: no
   navegador a folha toda virava link e no PDF a marcacao saia do lugar. */
.oet-pd-video { position: absolute; inset: 0; display: block; color: #1d1d1b; pointer-events: none; }

.oet-pd-link {
	position: absolute;
	display: block;
	aspect-ratio: 1;
	border-radius: 50%;
	z-index: 6;
	/* quase invisivel de proposito: um retangulo pintado e o que faz o
	   Chrome gravar o link no PDF. O <a> e vazio e a cor vai a forca — o tema
	   pinta link com cor propria e qualquer texto aqui dentro vazaria. */
	background: rgba(0, 0, 0, .004);
	overflow: hidden;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	text-decoration: none !important;
	box-shadow: none !important;
	border: 0 !important;
}
.oet-pd-sombra, .oet-pd-play { position: absolute; height: auto; display: block; }
.oet-pd-disco { position: absolute; aspect-ratio: 1; border-radius: 50%; display: block; }
.oet-pd-anel { position: absolute; aspect-ratio: 1; overflow: visible; animation: oet-gira 18s linear infinite; }
.oet-pd-anel text { font-family: var(--oet-sans); font-size: 10.6px; font-weight: 600; letter-spacing: .06em; fill: currentColor; }
@keyframes oet-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .oet-pd-anel { animation: none; } }

.oet-pd-tags {
	position: absolute;
	left: 5%; right: 5%;
	top: var(--tags-y, 78.5%);
	margin-top: -.5em;
	display: flex;
	justify-content: center;
	gap: 1.5cqw;
	line-height: 1;
}
.oet-pd-tags span {
	border: .1cqw solid var(--oet-marrom);
	color: var(--oet-marrom);
	font-size: var(--tags-sz, 1.35cqw);
	font-weight: 500;
	padding: .46em .62em;
	white-space: nowrap;
}

/* ---------------- tabela de preços ---------------- */

.oet-pd-precos { position: absolute; inset: 0; line-height: 1; }

.oet-pd-bloco { color: var(--oet-c); }

.oet-pd-teor {
	position: absolute;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--oet-c);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.oet-pd-teor b { font-size: calc(1.49cqw * var(--esc, 1)); font-weight: 700; letter-spacing: .02em; }
.oet-pd-teor span { font-size: calc(2.96cqw * var(--esc, 1)); font-weight: 700; margin-top: .12em; }

.oet-pd-cols { position: absolute; display: flex; }

.oet-pd-col {
	width: var(--passo, 13.8cqw);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	white-space: nowrap;
}

.oet-pd-larg  { font-size: calc(2.15cqw * var(--esc, 1)); font-weight: 700; margin-bottom: .42em; }
.oet-pd-de    { font-size: calc(1.60cqw * var(--esc, 1)); font-weight: 700; text-decoration: line-through; }
.oet-pd-12x   { font-size: calc(1.14cqw * var(--esc, 1)); font-weight: 700; margin-top: .28em; }
.oet-pd-por   { font-size: calc(3.64cqw * var(--esc, 1)); font-weight: 700; margin-top: .06em; }
.oet-pd-vista { font-size: calc(1.33cqw * var(--esc, 1)); font-weight: 700; margin-top: .3em; }

/* ---------------- barra de ações ---------------- */

.oet-barra { display: flex; justify-content: flex-end; max-width: min(840px, 100vw - 20px); margin: 0 auto; padding: 10px 0 0; }
.oet-btn-print {
	background: #925F36; color: #fff; border: 0; border-radius: 3px;
	font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600;
	letter-spacing: .04em; padding: 9px 18px; cursor: pointer;
}
.oet-btn-print:hover { background: #76220B; }

/* ---------------- impressão ---------------- */

@media print {
	@page { size: A4 portrait; margin: 0; }
	body * { visibility: hidden; }
	.oet-cat, .oet-cat * { visibility: visible; }
	/* o Chrome vem com "Graficos de plano de fundo" DESLIGADO: sem isto as
	   tarjas, as bolinhas de teor e a barra do rodape somem do PDF e o texto
	   branco que mora em cima delas fica invisivel no papel */
	.oet-cat, .oet-cat * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
	.oet-barra { display: none !important; }
	.oet-cat { max-width: none; width: 210mm; gap: 0; padding: 0; margin: 0; }
	.oet-folha { width: 210mm; height: 297mm; box-shadow: none; break-after: page; page-break-after: always; }
	.oet-folha:last-child { break-after: auto; page-break-after: auto; }
	.oet-pd-anel { animation: none; }
	.oet-pd-link { display: block !important; visibility: visible !important; }
}

/* ==================================================================
   Topo e rodapé da página do catálogo (modelo próprio)
   ================================================================== */

body.oet-pagina {
	margin: 0;
	background: #f3efe9;
	font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: #3c3c3b;
	--oet-rodape: #925F36;
	--oet-marrom: #76220B;
}

.oet-topo {
	position: sticky;
	top: 0;
	z-index: 30;
	background: #fff;
	border-bottom: 1px solid rgba(146, 95, 54, .18);
	box-shadow: 0 1px 10px rgba(0, 0, 0, .05);
}
body.admin-bar .oet-topo { top: 32px; }

.oet-topo-dentro {
	max-width: 1140px;
	margin: 0 auto;
	padding: 10px 18px;
	display: flex;
	align-items: center;
	gap: 18px;
}

.oet-topo-logo { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.oet-topo-logo img { height: 34px; width: auto; display: block; }
.oet-topo-marca { font-family: 'Poiret One', sans-serif; font-size: 22px; color: #762d15; letter-spacing: .06em; white-space: nowrap; }

.oet-topo-meio {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.25;
	min-width: 0;
}
.oet-topo-titulo {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .3em;
	text-indent: .3em;
	text-transform: uppercase;
	color: #762d15;
	white-space: nowrap;
}
.oet-topo-edicao {
	margin-top: 3px;
	font-size: 11px;
	color: #a27346;
	background: #f6efe3;
	border-radius: 2px;
	padding: 2px 9px;
	white-space: nowrap;
}

.oet-topo-acoes { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.oet-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 600 13px/1 'Montserrat', sans-serif;
	letter-spacing: .02em;
	padding: 10px 15px;
	border-radius: 999px;
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s;
	white-space: nowrap;
}
.oet-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
/* o tema pinta button/a por conta própria; no topo do catálogo quem manda é isto */
.oet-topo .oet-btn-zap,
.oet-topo .oet-btn-zap:visited { background: var(--oet-rodape) !important; color: #fff !important; border-color: var(--oet-rodape) !important; }
.oet-topo .oet-btn-zap:hover,
.oet-topo .oet-btn-zap:focus { background: #76220B !important; color: #fff !important; }
.oet-topo .oet-btn-baixar { background: transparent !important; color: var(--oet-rodape) !important; border-color: rgba(146, 95, 54, .45) !important; box-shadow: none !important; }
.oet-topo .oet-btn-baixar:hover,
.oet-topo .oet-btn-baixar:focus { background: var(--oet-rodape) !important; color: #fff !important; border-color: var(--oet-rodape) !important; }
.oet-topo .oet-btn { text-transform: none !important; letter-spacing: .02em !important; min-height: 0 !important; }

.oet-corpo { padding: 22px 0 6px; }

/* ---------------- rodapé da página ---------------- */

.oet-pe {
	background: var(--oet-rodape);
	color: #fff;
	padding: 34px 18px 30px;
	margin-top: 10px;
}
.oet-pe-dentro { max-width: 720px; margin: 0 auto; text-align: center; }
.oet-pe-marca { font-family: 'Poiret One', sans-serif; font-size: 27px; letter-spacing: .16em; margin-bottom: 12px; }
.oet-pe-linhas p { margin: 0 0 5px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.oet-pe-tel { letter-spacing: .02em; }
.oet-pe-links { margin-top: 16px; display: flex; justify-content: center; gap: 10px 22px; flex-wrap: wrap; }
.oet-pe-links a,
.oet-pe-links a:visited,
.oet-pe-links a:hover {
	color: #fff !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
	padding-bottom: 2px;
}
.oet-pe-links a:hover { border-bottom-color: #fff; }
.oet-topo-logo, .oet-topo-logo:visited, .oet-topo-logo:hover { color: #762d15 !important; text-decoration: none !important; }

/* ---------------- telas menores ---------------- */

@media (max-width: 820px) {
	.oet-topo-meio { align-items: flex-start; }
	.oet-topo-titulo { font-size: 11px; letter-spacing: .22em; }
}
@media (max-width: 640px) {
	.oet-topo-dentro { gap: 10px; padding: 8px 12px; }
	.oet-topo-meio { display: none; }
	.oet-topo-logo img { height: 28px; }
	.oet-btn { padding: 9px 12px; font-size: 12px; }
}
@media (max-width: 420px) {
	.oet-btn span { display: none; }
	.oet-btn { padding: 10px; }
	.oet-btn svg { width: 18px; height: 18px; }
}

@media print {
	.oet-topo, .oet-pe { display: none !important; }
	.oet-corpo { padding: 0 !important; }
	body.oet-pagina { background: #fff; }
}


/* ==================================================================
   Recado que sai no papel quando ha PDF pronto (classe oet-tem-pdf).
   Imprimir a pagina pelo navegador devolve as fotos recortadas em PNG
   com alfa, e o "Microsoft Print to PDF" as descarta. Entao a pagina
   nao se imprime: no papel sai so o caminho do arquivo certo.
   ================================================================== */

.oet-so-impressao { display: none; }

@media print {
	body.oet-tem-pdf .oet-cat,
	body.oet-tem-pdf .oet-cat * { display: none !important; visibility: hidden !important; }

	body.oet-tem-pdf .oet-so-impressao,
	body.oet-tem-pdf .oet-so-impressao * { visibility: visible !important; }

	body.oet-tem-pdf .oet-so-impressao {
		display: block !important;
		position: static;
		box-sizing: border-box;
		width: 210mm;
		padding: 45mm 22mm 0;
		margin: 0;
		font-family: 'Montserrat', system-ui, sans-serif;
		font-size: 12pt;
		line-height: 1.6;
		color: #3c3c3b;
		text-align: center;
		break-after: auto;
		page-break-after: auto;
	}
	body.oet-tem-pdf .oet-so-impressao p { margin: 0 0 10mm; }
	.oet-so-impressao-marca {
		font-family: 'Poiret One', sans-serif;
		font-size: 26pt;
		letter-spacing: .1em;
		color: #762d15;
		margin-bottom: 12mm;
	}
	.oet-so-impressao-titulo {
		font-size: 16pt;
		font-weight: 600;
		color: #925F36;
	}
	.oet-so-impressao-url {
		font-size: 10pt;
		word-break: break-all;
		color: #925F36;
	}
}