/*!
 * Primal Child — cabeçalho flutuante em vidro, menu, WhatsApp, hover e rodapé.
 *
 * Portado do tema Orpit Child (o mesmo do site da Sisu Veículos), com as
 * classes trocadas de orpit-* para primal-* e as cores ligadas às variáveis
 * da marca (--primal-*). Liga/desliga cada efeito em Personalizar →
 * Identidade Primal+ → Cabeçalho, menu e WhatsApp.
 */

/* ===== Menu e WhatsApp flutuante (origem: Orpit Child, linhas 653-1016) ===== */
/* =======================================================================
 * Menu
 * ==================================================================== */

.primal-tema .main-nav > li > a,
.primal-tema .mobile-main-nav > li > a {
	font-family: var(--primal-font);
	font-weight: 700;
	letter-spacing: .02em;
	transition: color .18s ease;
}

.primal-menu-caps .main-nav > li > a .menu-text {
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .92em;
}

/* Efeito de hover: barra deslizante */
.primal-menu-barra .main-nav > li > a .menu-text {
	position: relative;
	display: inline-block;
	padding-bottom: 3px;
}

.primal-menu-barra .main-nav > li > a .menu-text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--primal-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .26s cubic-bezier(.16, 1, .3, 1);
}

.primal-menu-barra .main-nav > li:hover > a .menu-text::after,
.primal-menu-barra .main-nav > li.act > a .menu-text::after,
.primal-menu-barra .main-nav > li.current-menu-item > a .menu-text::after {
	transform: scaleX(1);
}

/* Efeito de hover: pílula */
.primal-menu-pilula .main-nav > li > a {
	border-radius: 999px;
	transition: background-color .2s ease, color .2s ease;
}

.primal-menu-pilula .main-nav > li:hover > a,
.primal-menu-pilula .main-nav > li.act > a {
	background: color-mix(in srgb, var(--primal-primary) 24%, transparent);
}

/* Item em destaque: vira botão. Classe CSS do menu: primal-menu-btn */
.primal-tema .main-nav > li.primal-menu-btn > a,
.primal-tema .mobile-main-nav > li.primal-menu-btn > a {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin-inline: 6px;
	padding: 11px 20px !important;
	border-radius: var(--primal-radius-sm);
	background: var(--primal-primary);
	color: var(--primal-on-primary) !important;
	line-height: 1;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.primal-tema .main-nav > li.primal-menu-btn > a:hover {
	background: var(--primal-dark);
	color: #fff !important;
	transform: translateY(-1px);
}

.primal-botao-pilula .main-nav > li.primal-menu-btn > a { border-radius: 999px; }
.primal-botao-reto .main-nav > li.primal-menu-btn > a { border-radius: 0; }

.primal-tema .main-nav > li.primal-menu-btn > a .menu-text::after {
	display: none;
}

/* O contato principal vira uma chamada direta para WhatsApp. */
.primal-tema .main-nav > li.primal-menu-whatsapp > a,
.primal-tema .mobile-main-nav > li.primal-menu-whatsapp > a {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin-inline: 6px;
	padding: 11px 18px !important;
	border: 1px solid #19ad59;
	border-radius: var(--primal-radius-sm);
	background: #20bf60;
	color: #fff !important;
	line-height: 1;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.primal-tema .main-nav > li.primal-menu-whatsapp > a .menu-text,
.primal-tema .mobile-main-nav > li.primal-menu-whatsapp > a .menu-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff !important;
}

.primal-tema .main-nav > li.primal-menu-whatsapp > a .menu-text::before,
.primal-tema .mobile-main-nav > li.primal-menu-whatsapp > a .menu-text::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a9.7 9.7 0 0 0-8.3 14.7L2.4 22l5.5-1.4A9.8 9.8 0 1 0 12 2Zm0 17.7a7.9 7.9 0 0 1-4-.0l-.5-.2-3.2.8.9-3.1-.3-.5A7.8 7.8 0 1 1 12 19.7Zm4.3-5.9c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1-.2.2-.6.8-.8 1-.1.2-.3.2-.5.1-.2-.1-1-.4-1.9-1.2-.7-.6-1.2-1.4-1.3-1.6-.1-.2 0-.3.1-.5l.4-.4c.1-.1.2-.2.2-.4.1-.2 0-.3 0-.4l-.7-1.7c-.2-.4-.4-.4-.5-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 1.9s.8 2.2.9 2.4c.1.2 1.6 2.5 3.9 3.4.5.2.9.4 1.2.4.5.2 1 .2 1.3.1.4-.1 1.4-.6 1.6-1.1.2-.5.2-1 .2-1.1s-.2-.2-.4-.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a9.7 9.7 0 0 0-8.3 14.7L2.4 22l5.5-1.4A9.8 9.8 0 1 0 12 2Zm0 17.7a7.9 7.9 0 0 1-4-.0l-.5-.2-3.2.8.9-3.1-.3-.5A7.8 7.8 0 1 1 12 19.7Zm4.3-5.9c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1-.2.2-.6.8-.8 1-.1.2-.3.2-.5.1-.2-.1-1-.4-1.9-1.2-.7-.6-1.2-1.4-1.3-1.6-.1-.2 0-.3.1-.5l.4-.4c.1-.1.2-.2.2-.4.1-.2 0-.3 0-.4l-.7-1.7c-.2-.4-.4-.4-.5-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 1.9s.8 2.2.9 2.4c.1.2 1.6 2.5 3.9 3.4.5.2.9.4 1.2.4.5.2 1 .2 1.3.1.4-.1 1.4-.6 1.6-1.1.2-.5.2-1 .2-1.1s-.2-.2-.4-.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.primal-tema .main-nav > li.primal-menu-whatsapp:hover > a,
.primal-tema .mobile-main-nav > li.primal-menu-whatsapp:hover > a {
	transform: translateY(-1px);
	border-color: #138d48;
	background: #168f49;
	color: #fff !important;
}

/* Ícones nos itens do menu — classes primal-icone-* */
.primal-tema .main-nav > li[class*="primal-icone-"] > a .menu-text::before,
.primal-tema .mobile-main-nav > li[class*="primal-icone-"] > a .menu-text::before {
	content: "";
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	margin-right: 7px;
	vertical-align: -.16em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.primal-icone-carro > a .menu-text::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11l1.5-4.5A2 2 0 0 1 8.4 5h7.2a2 2 0 0 1 1.9 1.5L19 11h.5a1.5 1.5 0 0 1 1.5 1.5V18a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1H6v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5.5A1.5 1.5 0 0 1 4.5 11H5Zm2.1 0h9.8l-1.1-3.4a.5.5 0 0 0-.5-.35H8.7a.5.5 0 0 0-.5.35L7.1 11Zm-.6 4.2a1.3 1.3 0 1 0 0-2.6 1.3 1.3 0 0 0 0 2.6Zm11 0a1.3 1.3 0 1 0 0-2.6 1.3 1.3 0 0 0 0 2.6Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11l1.5-4.5A2 2 0 0 1 8.4 5h7.2a2 2 0 0 1 1.9 1.5L19 11h.5a1.5 1.5 0 0 1 1.5 1.5V18a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1H6v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5.5A1.5 1.5 0 0 1 4.5 11H5Zm2.1 0h9.8l-1.1-3.4a.5.5 0 0 0-.5-.35H8.7a.5.5 0 0 0-.5.35L7.1 11Zm-.6 4.2a1.3 1.3 0 1 0 0-2.6 1.3 1.3 0 0 0 0 2.6Zm11 0a1.3 1.3 0 1 0 0-2.6 1.3 1.3 0 0 0 0 2.6Z'/%3E%3C/svg%3E");
}

.primal-icone-busca > a .menu-text::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5Zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5Zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9Z'/%3E%3C/svg%3E");
}

.primal-icone-local > a .menu-text::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E");
}

.primal-icone-contato > a .menu-text::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E");
}

.primal-icone-estoque > a .menu-text::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2H2v8l12 12 8-8L10 2Zm-4 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2H2v8l12 12 8-8L10 2Zm-4 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z'/%3E%3C/svg%3E");
}

.primal-icone-oferta > a .menu-text::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27><path%20d=%27M13%202%204.5%2013.5H11L9.5%2022%2019%2010.5h-6.5L13%202Z%27/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27><path%20d=%27M13%202%204.5%2013.5H11L9.5%2022%2019%2010.5h-6.5L13%202Z%27/></svg>");
}

.primal-icone-financiamento > a .menu-text::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27><path%20d=%27M3%205h18a1%201%200%200%201%201%201v12a1%201%200%200%201-1%201H3a1%201%200%200%201-1-1V6a1%201%200%200%201%201-1Zm9%203a4%204%200%201%200%200%208%204%204%200%200%200%200-8ZM5%208a2%202%200%200%201-2%202v4a2%202%200%200%201%202%202h14a2%202%200%200%201%202-2v-4a2%202%200%200%201-2-2H5Z%27/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27><path%20d=%27M3%205h18a1%201%200%200%201%201%201v12a1%201%200%200%201-1%201H3a1%201%200%200%201-1-1V6a1%201%200%200%201%201-1Zm9%203a4%204%200%201%200%200%208%204%204%200%200%200%200-8ZM5%208a2%202%200%200%201-2%202v4a2%202%200%200%201%202%202h14a2%202%200%200%201%202-2v-4a2%202%200%200%201-2-2H5Z%27/></svg>");
}

.primal-icone-favorito > a .menu-text::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27><path%20d=%27m12%2021-1.5-1.3C5.4%2015.1%202%2012.1%202%208.5A4.5%204.5%200%200%201%206.5%204c1.7%200%203.3.8%204.3%202.1h.4A5.3%205.3%200%200%201%2017.5%204%204.5%204.5%200%200%201%2022%208.5c0%203.6-3.4%206.6-8.5%2011.2L12%2021Z%27/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27><path%20d=%27m12%2021-1.5-1.3C5.4%2015.1%202%2012.1%202%208.5A4.5%204.5%200%200%201%206.5%204c1.7%200%203.3.8%204.3%202.1h.4A5.3%205.3%200%200%201%2017.5%204%204.5%204.5%200%200%201%2022%208.5c0%203.6-3.4%206.6-8.5%2011.2L12%2021Z%27/></svg>");
}

.primal-icone-sobre > a .menu-text::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27><path%20d=%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20Zm1%2015h-2v-6h2v6Zm0-8h-2V7h2v2Z%27/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27><path%20d=%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20Zm1%2015h-2v-6h2v6Zm0-8h-2V7h2v2Z%27/></svg>");
}

.primal-icone-home > a .menu-text::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27><path%20d=%27M12%203%202%2012h3v9h6v-6h2v6h6v-9h3L12%203Z%27/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27><path%20d=%27M12%203%202%2012h3v9h6v-6h2v6h6v-9h3L12%203Z%27/></svg>");
}

/* Submenu mais leve */
.primal-tema .main-nav ul.sub-nav {
	border-radius: var(--primal-radius-sm);
	box-shadow: 0 14px 34px rgba(17, 17, 17, .14);
	overflow: hidden;
	border: 1px solid var(--primal-border);
}

/* =======================================================================
 * WhatsApp flutuante
 * ==================================================================== */

.primal-whats {
	position: fixed;
	left: 22px;
	bottom: 22px;
	z-index: 9970;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.primal-whats-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 62px;
	width: 62px;
	padding: 0;
	border-radius: 999px;
	background: linear-gradient(145deg, #2bdd70, #18a957);
	color: #fff;
	text-decoration: none;
	outline: 2px solid rgba(255, 255, 255, .92);
	outline-offset: 2px;
	box-shadow: 0 10px 28px rgba(18, 163, 83, .34), 0 3px 9px rgba(17, 24, 39, .16);
	overflow: hidden;
	transition: width .32s cubic-bezier(.16, 1, .3, 1), gap .32s cubic-bezier(.16, 1, .3, 1),
		padding .32s cubic-bezier(.16, 1, .3, 1), background .2s ease, box-shadow .2s ease, transform .24s ease;
}

.primal-whats-btn svg {
	flex: 0 0 auto;
	width: 29px;
	height: 29px;
	margin-inline: 16px;
	fill: currentColor;
}

.primal-whats-texto {
	white-space: nowrap;
	font-family: var(--primal-font);
	font-size: 14px;
	font-weight: 700;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .2s ease .06s, transform .28s cubic-bezier(.16, 1, .3, 1);
}

.primal-whats-btn:hover,
.primal-whats-btn:focus-visible {
	width: auto;
	padding-right: 22px;
	background: linear-gradient(145deg, #24c866, #128c49);
	box-shadow: 0 14px 32px rgba(18, 163, 83, .4), 0 4px 12px rgba(17, 24, 39, .18);
	color: #fff;
}

.primal-whats-btn:hover .primal-whats-texto,
.primal-whats-btn:focus-visible .primal-whats-texto {
	opacity: 1;
	transform: none;
}

/* Anel de pulso */
.primal-whats-anel {
	position: absolute;
	left: 0;
	top: 0;
	width: 58px;
	height: 58px;
	border-radius: 999px;
	pointer-events: none;
}

.primal-whats.tem-pulso .primal-whats-anel::before,
.primal-whats.tem-pulso .primal-whats-anel::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	border: 2px solid rgba(37, 211, 102, .55);
	animation: primal-pulso 2.6s cubic-bezier(.24, 0, .38, 1) infinite;
}

.primal-whats.tem-pulso .primal-whats-anel::after {
	animation-delay: 1.3s;
}

@keyframes primal-pulso {
	0%   { transform: scale(1);   opacity: .85; }
	70%  { transform: scale(1.9); opacity: 0; }
	100% { transform: scale(1.9); opacity: 0; }
}

/* Balão de chamada */
.primal-whats-balao {
	position: relative;
	max-width: 170px;
	padding: 8px 24px 8px 11px;
	border-radius: 12px 12px 12px 4px;
	background: #fff;
	color: var(--primal-dark);
	font-size: 12px;
	line-height: 1.35;
	box-shadow: 0 10px 26px rgba(17, 17, 17, .16);
	animation: primal-balao .42s cubic-bezier(.16, 1, .3, 1);
}

.primal-whats-balao[hidden] {
	display: none;
}

@keyframes primal-balao {
	from { opacity: 0; transform: translateY(8px) scale(.96); }
	to   { opacity: 1; transform: none; }
}

.primal-whats-balao-fechar {
	position: absolute;
	top: 3px;
	right: 4px;
	border: 0;
	background: none;
	color: var(--primal-gray);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 4px;
}

@media (max-width: 782px) {
	.primal-whats {
		left: 14px;
		bottom: 66px;
	}

	.primal-whats-balao {
		max-width: 200px;
	}

	/* A barra fixa já dá acesso ao WhatsApp. Evita o balão sobrepor cards e
	 * campos enquanto a pessoa navega em uma tela pequena. */
	.primal-whats-balao {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.primal-whats.tem-pulso .primal-whats-anel::before,
	.primal-whats.tem-pulso .primal-whats-anel::after {
		animation: none;
	}
}


/* ===== Hover do tema (origem: Orpit Child, linhas 1050-1172) ===== */
/* =======================================================================
 * Hover do tema
 * ==================================================================== */

/* Botões ganham o mesmo brilho do plugin */
.primal-tema .primal-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.primal-tema .primal-btn::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -140%;
	width: 60%;
	z-index: -1;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
	transform: skewX(-18deg);
	transition: left .55s cubic-bezier(.16, 1, .3, 1);
}

.primal-tema .primal-btn:hover::after,
.primal-tema .primal-btn:focus-visible::after {
	left: 140%;
}

/* Cards: borda que acende e ícone que responde */
.primal-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--primal-radius);
	box-shadow: inset 0 0 0 2px var(--primal-primary);
	opacity: 0;
	transition: opacity .24s ease;
	pointer-events: none;
}

.primal-card:hover::before {
	opacity: 1;
}

.primal-card-icone {
	transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), background-color .24s ease;
}

.primal-card:hover .primal-card-icone {
	transform: translateY(-3px) rotate(-4deg);
	background: var(--primal-primary);
}

.primal-card-numero {
	transition: color .24s ease, transform .28s ease;
}

.primal-card:hover .primal-card-numero {
	color: var(--primal-primary);
	transform: scale(1.06);
}

/* Links de texto com sublinhado que cresce */
.primal-tema .primal-link,
.primal-tema .primal-link-todos {
	background-image: linear-gradient(var(--primal-primary), var(--primal-primary));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	border-bottom: 0;
	transition: background-size .3s cubic-bezier(.16, 1, .3, 1);
}

.primal-tema .primal-link:hover,
.primal-tema .primal-link-todos:hover {
	background-size: 100% 2px;
}

/* Números da loja */
.primal-stat {
	transition: transform .24s cubic-bezier(.16, 1, .3, 1), box-shadow .24s ease, border-color .24s ease;
}

.primal-stat:hover {
	transform: translateY(-4px);
}

/* Itens da lista com marcação */
.primal-lista li {
	transition: transform .2s ease;
}

.primal-lista li:hover {
	transform: translateX(4px);
}

/* Atalhos da busca */
.primal-busca-atalhos a {
	transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background-color .18s ease, border-color .18s ease, color .18s ease;
}

.primal-busca-atalhos a:hover {
	transform: translateY(-2px);
}

/* Foco visível em todo o tema */
.primal-tema a:focus-visible,
.primal-tema button:focus-visible {
	outline: 3px solid var(--primal-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.primal-card:hover .primal-card-icone,
	.primal-stat:hover,
	.primal-lista li:hover,
	.primal-busca-atalhos a:hover {
		transform: none;
	}
}


/* ===== Rodapé (origem: Orpit Child, linhas 1279-1622) ===== */
/* =======================================================================
 * Rodapé
 * ==================================================================== */

.primal-rodape {
	background: var(--primal-dark);
	color: rgba(255, 255, 255, .7);
	border-top: 4px solid var(--primal-primary);
	padding-block: calc(var(--primal-section) * .62) 0;
	font-size: 14px;
}

.primal-rodape > .primal-container {
	width: 100%;
	max-width: var(--primal-width);
	margin-inline: auto;
	padding-inline: 20px;
}

/*
 * Três colunas, não quatro.
 *
 * A grade foi escrita para quatro (marca, navegue, marcas, contato). Com a
 * coluna de marcas fora, a quarta fração continuava reservada e sobrava um
 * vazio à direita. Agora as três dividem a largura toda, e o contato — que é
 * o texto mais longo — fica com a maior fatia.
 */
.primal-rodape-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1.5fr;
	gap: 48px;
	padding-bottom: 36px;
}

@media (max-width: 1100px) {
	.primal-rodape-grid {
		gap: 32px;
	}
}

.primal-rodape h3 {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #fff;
}

.primal-rodape p {
	line-height: 1.6;
	color: rgba(255, 255, 255, .62);
	max-width: 40ch;
}

.primal-rodape a {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	transition: color .18s ease;
}

.primal-rodape a:hover {
	color: var(--primal-primary);
}

/*
 * O logotipo vai como é.
 *
 * Antes um brightness(0) invert(1) forçava tudo para branco — servia para
 * logotipo preto não sumir no rodapé escuro, mas achatava um logotipo
 * colorido numa mancha só, sem contorno nenhum.
 */
.primal-rodape-logo {
	max-width: 180px;
	height: auto;
	margin-bottom: 16px;
}

.primal-rodape-nome {
	display: block;
	margin-bottom: 14px;
	font-family: var(--primal-font-title);
	font-size: 22px;
	font-weight: 900;
	color: #fff;
}

.primal-rodape-redes {
	display: flex;
	gap: 9px;
	margin-top: 18px;
}

.primal-rodape-redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	transition: background-color .2s ease, transform .2s ease;
}

.primal-rodape-redes a:hover {
	background: var(--primal-primary);
	color: var(--primal-on-primary);
	transform: translateY(-3px);
}

.primal-rodape-redes svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

/* Listas */
.primal-rodape-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.primal-rodape-menu li {
	margin-bottom: 9px;
}

.primal-rodape-menu a {
	display: inline-block;
	position: relative;
	padding-left: 0;
	transition: padding-left .2s ease, color .18s ease;
}

.primal-rodape-menu a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 2px;
	background: var(--primal-primary);
	transform: translateY(-50%);
	transition: width .2s ease;
}

.primal-rodape-menu a:hover {
	padding-left: 16px;
}

.primal-rodape-menu a:hover::before {
	width: 10px;
}

/* O botão do menu não vira botão no rodapé */
.primal-rodape-menu .primal-menu-btn > a {
	background: none !important;
	color: rgba(255, 255, 255, .78) !important;
	padding: 0 !important;
	margin: 0 !important;
}

.primal-rodape-contato {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.primal-rodape-contato li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 13px;
	line-height: 1.5;
}

.primal-rodape-contato svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	fill: var(--primal-primary);
}

.primal-rodape-mapa {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--primal-primary) !important;
	text-decoration: underline;
}

.primal-rodape-fim {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-block: 20px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: 12.5px;
	color: rgba(255, 255, 255, .5);
}

.primal-rodape-legal {
	display: flex;
	align-items: center;
	gap: 18px;
}

.primal-rodape-legal a {
	color: rgba(255, 255, 255, .62);
	text-decoration: none;
	transition: color .2s ease;
}

.primal-rodape-legal a:hover,
.primal-rodape-legal a:focus-visible {
	color: var(--primal-primary);
}

.primal-legal-page {
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(32px, 6vw, 76px) 24px;
	color: #263238;
	font-size: 16px;
	line-height: 1.75;
}

body.primal-legal-view #main .wf-container-main {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
}

body.primal-legal-view #main .content {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
}

body.primal-legal-view #main .sidebar,
body.primal-legal-view #main #sidebar {
	display: none !important;
}

body.primal-legal-view .primal-legal-page {
	margin-inline: auto;
	padding-block: clamp(40px, 6vw, 76px);
}

.primal-legal-page h1,
.primal-legal-page h2 {
	color: #17191b;
	line-height: 1.2;
}

.primal-legal-page h1 {
	margin: 0 0 12px;
	font-size: clamp(32px, 5vw, 48px);
}

.primal-legal-page h2 {
	margin: 34px 0 10px;
	font-size: 22px;
}

.primal-legal-page p,
.primal-legal-page ul {
	margin: 0 0 16px;
}

.primal-legal-page a {
	color: var(--primal-primary, #f5b800);
	font-weight: 600;
}

.primal-legal-page .primal-legal-updated {
	margin-bottom: 28px;
	color: #69727e;
	font-size: 14px;
}

/* Assinatura discreta: só aparece de verdade quando o mouse passa. */
.primal-rodape-assinatura {
	text-align: right;
}

.primal-rodape-assinatura a {
	color: rgba(255, 255, 255, .34);
	font-size: 11.5px;
	letter-spacing: .06em;
	text-decoration: none;
	transition: color .2s ease;
}

.primal-rodape-assinatura a:hover,
.primal-rodape-assinatura a:focus-visible {
	color: var(--primal-primary);
}

@media (max-width: 1024px) {
	.primal-rodape-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}

	/* Em duas colunas, a marca ocupa a linha inteira. */
	.primal-rodape-marca-col {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.primal-rodape-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 16px;
	}

	.primal-rodape-fim {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.primal-rodape-assinatura {
		text-align: center;
	}

	.primal-rodape-legal {
		justify-content: center;
		width: 100%;
		flex-wrap: wrap;
		gap: 10px 18px;
	}

	/* Espaço para a barra fixa de contato */
	.primal-rodape {
		padding-bottom: 44px;
	}
}


/* ===== Compatibilidade com o The7 (origem: Orpit Child, linhas 1623-1812) ===== */
/* =======================================================================
 * Compatibilidade com o The7
 *
 * O tema pai desenha elementos próprios que competem com os nossos. Aqui
 * ficam só as correções que precisam vencer o CSS dele — por isso o
 * !important, usado de propósito e apenas nestes pontos.
 * ==================================================================== */

/*
 * O The7 põe um <i class="underline"> dentro de cada item do menu, com um
 * degradê azul-esverdeado fixo. Ele aparecia junto com a nossa barra amarela,
 * inclusive dentro do botão "Venda seu veículo".
 */
.primal-tema .main-nav > li > a .underline,
.primal-tema .mobile-main-nav > li > a .underline,
.primal-tema .main-nav > li > a i.underline {
	display: none !important;
}

/* Nossa barra precisa vencer o que o tema define para o mesmo pseudo. */
.primal-menu-barra .main-nav > li > a .menu-text::after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: -2px !important;
	height: 2px !important;
	border-radius: 2px !important;
	background: var(--primal-primary) !important;
	transform: scaleX(0) !important;
	transform-origin: left center !important;
	transition: transform .26s cubic-bezier(.16, 1, .3, 1) !important;
	mask: none !important;
	-webkit-mask: none !important;
	width: auto !important;
	margin: 0 !important;
}

.primal-menu-barra .main-nav > li:hover > a .menu-text::after,
.primal-menu-barra .main-nav > li.act > a .menu-text::after,
.primal-menu-barra .main-nav > li.current-menu-item > a .menu-text::after,
.primal-menu-barra .main-nav > li.current-menu-ancestor > a .menu-text::after {
	transform: scaleX(1) !important;
}

/* No botão não entra barra nenhuma. */
.primal-tema .main-nav > li.primal-menu-btn > a .menu-text::after,
.primal-tema .main-nav > li.primal-menu-btn > a .underline {
	display: none !important;
	content: none !important;
}

/* O The7 tem cor própria para o texto do item; o botão precisa da nossa. */
.primal-tema .main-nav > li.primal-menu-btn > a,
.primal-tema .main-nav > li.primal-menu-btn > a .menu-text,
.primal-tema .mobile-main-nav > li.primal-menu-btn > a,
.primal-tema .mobile-main-nav > li.primal-menu-btn > a .menu-text {
	color: var(--primal-on-primary) !important;
}

.primal-tema .main-nav > li.primal-menu-btn:hover > a,
.primal-tema .main-nav > li.primal-menu-btn:hover > a .menu-text {
	color: #fff !important;
}

/* O ícone herda a cor do texto e não pode receber máscara do tema. */
.primal-tema .main-nav > li[class*="primal-icone-"] > a .menu-text::before {
	background-color: currentColor !important;
	content: "" !important;
	position: static !important;
}

/*
 * A barra superior e o rodapé nascem dentro do container do The7, que é mais
 * estreito que a tela. Isso os deixava com faixas brancas nas laterais e o
 * texto cortado à direita. Aqui eles voltam a ocupar a largura toda.
 */
.primal-tema .primal-rodape,
.primal-tema .primal-topbar {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box !important;
}

/*
 * As faixas ficam com a largura do conteúdo, que logo abaixo passa a ser a
 * tela inteira. Sai mais preciso do que 100vw, que conta a barra de rolagem
 * e deixava tudo uns 7px torto para a esquerda.
 */
.primal-tema .primal-section {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
}

/*
 * O The7 fecha o conteúdo num container de 1200px com 50px de recuo. As
 * faixas de fundo (cinza, branca, escura) precisavam ir de ponta a ponta,
 * senão sobrava margem branca dos dois lados. Quem centraliza o conteúdo
 * agora é o .primal-container de dentro de cada faixa.
 */
.primal-sem-titulo #main .wf-wrap,
.primal-topo-cheio #main .wf-wrap,
.primal-sem-titulo .sidebar-none > .wf-wrap,
.primal-topo-cheio .sidebar-none > .wf-wrap {
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.primal-sem-titulo #main .wf-container-main,
.primal-topo-cheio #main .wf-container-main {
	width: 100% !important;
	max-width: none !important;
}

/* A capa também: o pai já ocupa a tela toda, então 100% basta. */
.primal-tema #main .orpitcar-hero {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * O The7 põe respiro no #main, e o mesmo respiro já vem de cada faixa. Dava
 * espaço dobrado no topo e no fim da página — era isso que obrigava a zerar
 * o padding na mão no custom.css do tema.
 *
 * Vale só nas telas nossas (as que levam a classe primal-sem-titulo: os modelos
 * de página do tema e as telas do plugin). Um post do blog ou uma página
 * montada no WPBakery continua com o respiro do The7 intacto.
 *
 * Aqui não existe regra de reserva devolvendo padding aos filhos. Já existiu,
 * e ela acertava o <div class="content"> do The7 — que envolve a página toda
 * e não tem "orpit" no nome —, empurrando tudo para dentro.
 */
.primal-tema {
	--primal-mapa-sobe: clamp(60px, 6vw, 96px);
}

.primal-sem-titulo #main,
.primal-topo-cheio #main {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/*
 * O espaço que o mapa ocupa ao subir fica no .content, não no #main.
 *
 * O rodapé é irmão do .content e mora dentro do #main — um padding no #main
 * cairia DEPOIS do rodapé, como uma faixa clara no fim da página. No .content
 * ele fica entre o conteúdo e o rodapé, que é onde precisa estar.
 */
.primal-sem-titulo #main .content,
.primal-topo-cheio #main .content {
	padding-bottom: var(--primal-mapa-sobe);
}

/* O container interno do The7 também não pode estreitar as nossas faixas. */
.primal-sem-titulo #main .content,
.primal-topo-cheio #main .content {
	width: 100% !important;
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* clip (e não hidden) corta o excesso sem quebrar position: sticky. */
.primal-tema {
	overflow-x: clip;
}

/* O rodapé do The7, quando ligado, vem logo abaixo do nosso — sem espaço duplo. */
.primal-tema .primal-rodape + .footer,
.primal-tema .primal-rodape + #footer {
	margin-top: 0 !important;
}

/* O rodapé padrão do The7 traz Archives/Categories após o rodapé Sisu.
 * Esconda-o nas páginas de veículos; ele não é irmão imediato do rodapé Sisu. */
body.single-orpit_car #footer {
	display: none !important;
}


/* ===== Cabeçalho em vidro (origem: Orpit Child, linhas 1813-1999) ===== */
/* =======================================================================
 * Cabeçalho claro, vidro só quando flutua
 *
 * Parado no topo da página o cabeçalho é claro e sólido: o logotipo e o
 * menu ficam legíveis sobre branco, sem concorrer com a foto da capa.
 * Quando a pessoa rola e ele passa a flutuar sobre o conteúdo, aí sim vira
 * vidro — translúcido, com desfoque do que passa atrás.
 * ==================================================================== */

:root {
	--primal-vidro-desfoque: 20px;
	--primal-vidro-opacidade: 72%;
}

/* Parado, ocupa a largura toda, sem margem nem canto arredondado do tema. */
.primal-header-vidro .masthead,
.primal-header-vidro .masthead.sticky-off {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	left: 0 !important;
	right: 0 !important;
	border-radius: 0 !important;
}

/*
 * Estado parado: claro e sólido.
 *
 * Os seletores levam o body na frente de propósito. O The7 pinta o cabeçalho
 * em vários pontos (custom.css do painel, regras de sticky, estilos por
 * cabeçalho), e sem esse peso extra uma delas voltava a vencer.
 */
body.primal-tema .masthead,
body.primal-tema .masthead.sticky-off,
body.primal-tema .masthead.fixed-masthead.sticky-off {
	background-color: var(--primal-white) !important;
	background-image: none !important;
	border-bottom: 1px solid var(--primal-border) !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}

/*
 * O The7 pinta o fundo em camadas internas. Elas precisam ficar
 * transparentes, senão tapam o cabeçalho.
 */
.primal-tema .masthead::before,
.primal-tema .masthead::after,
.primal-tema .masthead .header-bar,
.primal-tema .masthead .branding,
.primal-tema .masthead .navigation-holder,
.primal-tema .masthead .main-nav-wrap,
.primal-tema .masthead-mobile,
.primal-tema .masthead .mobile-header-bar {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

.primal-tema .masthead {
	position: relative;
}

.primal-tema .masthead > *:first-child {
	position: relative;
	z-index: 1;
}

/* Estado flutuante: aí sim, vidro. */
body.primal-tema.primal-header-vidro .masthead.sticky-on,
body.primal-tema.primal-header-vidro .masthead.fixed-masthead.sticky-on,
body.primal-tema.primal-header-vidro .masthead.floating-navigation-below-slider,
body.primal-tema.primal-header-vidro.primal-rolou .masthead.fixed-masthead {
	background-color: rgba(255, 255, 255, .72) !important;
	background-color: color-mix(in srgb, var(--primal-white) var(--primal-vidro-opacidade), transparent) !important;
	background-image: none !important;
	-webkit-backdrop-filter: blur(var(--primal-vidro-desfoque)) saturate(180%);
	backdrop-filter: blur(var(--primal-vidro-desfoque)) saturate(180%);
	border-bottom: 1px solid rgba(17, 17, 17, .08) !important;
	box-shadow: 0 8px 30px rgba(17, 17, 17, .12) !important;
}

/*
 * Logotipo e menu escuros, já que o fundo é claro nos dois estados.
 * O item que virou botão amarelo fica de fora: a cor dele é a do botão.
 */
.primal-tema .masthead .main-nav > li:not(.primal-menu-btn) > a,
.primal-tema .masthead .main-nav > li:not(.primal-menu-btn) > a .menu-text,
.primal-tema .masthead .mini-nav > li > a,
.primal-tema .masthead .mobile-main-nav > li:not(.primal-menu-btn) > a,
.primal-tema .masthead .mobile-main-nav > li:not(.primal-menu-btn) > a .menu-text,
.primal-tema .masthead .dt-mobile-menu-icon .lines,
.primal-tema .masthead .soc-ico a {
	color: var(--primal-dark) !important;
}

.primal-tema .masthead .main-nav > li:not(.primal-menu-btn) > a:hover .menu-text,
.primal-tema .masthead .main-nav > li:not(.primal-menu-btn).current-menu-item > a .menu-text {
	color: var(--primal-primary) !important;
}

/* A barra superior acompanha: clara, com texto escuro. */
.primal-tema .primal-topbar {
	background-color: var(--primal-bg) !important;
	color: var(--primal-dark) !important;
	border-bottom: 1px solid var(--primal-border);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.primal-tema .primal-topbar a {
	color: var(--primal-dark) !important;
}

/* Navegador sem suporte a desfoque: fundo sólido. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.primal-tema.primal-header-vidro .masthead.sticky-on,
	body.primal-tema.primal-header-vidro.primal-rolou .masthead.fixed-masthead {
		background-color: var(--primal-white) !important;
	}
}

@media (prefers-reduced-transparency: reduce) {
	body.primal-tema.primal-header-vidro .masthead.sticky-on,
	body.primal-tema.primal-header-vidro.primal-rolou .masthead.fixed-masthead {
		background-color: var(--primal-white) !important;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* =======================================================================
 * O mesmo vidro nas barras flutuantes
 * ==================================================================== */

.primal-tema .orpitcar-comparador,
.primal-tema .orpitcar-barra-veiculo,
.primal-tema .primal-barra-mobile {
	-webkit-backdrop-filter: blur(var(--primal-vidro-desfoque)) saturate(180%);
	backdrop-filter: blur(var(--primal-vidro-desfoque)) saturate(180%);
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.primal-tema .orpitcar-comparador {
	background-color: rgba(26, 26, 26, .72) !important;
	background-color: color-mix(in srgb, var(--primal-dark) 78%, transparent) !important;
}

/* Estas duas são claras: o vidro fica branco. */
.primal-tema .orpitcar-barra-veiculo,
.primal-tema .primal-barra-mobile {
	background-color: rgba(255, 255, 255, .78) !important;
	border-top: 1px solid rgba(17, 17, 17, .08);
}

.primal-tema .primal-barra-mobile a {
	background: transparent;
}

.primal-tema .primal-barra-mobile a.is-destaque {
	background: var(--primal-primary);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.primal-tema .orpitcar-comparador {
		background-color: var(--primal-dark) !important;
	}

	.primal-tema .orpitcar-barra-veiculo,
	.primal-tema .primal-barra-mobile {
		background-color: #fff !important;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.primal-header-vidro .masthead,
	.primal-header-vidro .primal-topbar {
		background-color: var(--primal-dark) !important;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}


/* ===== Altura do cabeçalho (origem: Orpit Child, linhas 2209-2274) ===== */
/* =======================================================================
 * Altura do cabeçalho
 *
 * O The7 reserva uma faixa de sombra decorativa embaixo do cabeçalho que não
 * desenha nada aqui — ela só empurrava o conteúdo para baixo e deixava um
 * vazio em cima do logotipo. Some, e a barra passa a ter a altura que a
 * pessoa escolher no Personalizar.
 * ==================================================================== */

body.primal-tema .masthead::after,
body.primal-tema .masthead::before,
body.primal-tema .masthead.shadow-decoration::after,
body.primal-tema .masthead .shadow-decoration {
	display: none !important;
	height: 0 !important;
}

body.primal-tema .masthead,
body.primal-tema .masthead .header-bar {
	min-height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.primal-tema .masthead .header-bar,
body.primal-tema .masthead .branding,
body.primal-tema .masthead .navigation-holder {
	height: var(--primal-header-altura, 76px) !important;
	min-height: 0 !important;
}

body.primal-tema .masthead .branding {
	display: flex !important;
	align-items: center !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.primal-tema .masthead .branding a img,
body.primal-tema .masthead #site-logo img,
body.primal-tema .masthead .branding img {
	max-height: calc(var(--primal-header-altura, 76px) - 22px) !important;
	width: auto !important;
	height: auto !important;
}

/* No celular a barra encolhe mais. */
@media (max-width: 768px) {
	body.primal-tema .masthead .header-bar,
	body.primal-tema .masthead .branding,
	body.primal-tema .masthead .navigation-holder {
		height: auto !important;
		min-height: 58px !important;
	}

	body.primal-tema .masthead .branding a img,
	body.primal-tema .masthead #site-logo img,
	body.primal-tema .masthead .branding img,
	body.primal-tema .masthead img.mobile-logo {
		max-width: 210px !important;
		width: auto !important;
		height: auto !important;
		object-fit: contain;
	}
}


/* ===== Redes sociais no menu (origem: Orpit Child, linhas 2275-2360) ===== */
/* =======================================================================
 * Redes sociais no fim do menu
 * ==================================================================== */

.primal-tema .main-nav > li.primal-menu-redes {
	display: flex !important;
	align-items: center;
}

.primal-tema .main-nav > li.primal-menu-redes::before,
.primal-tema .main-nav > li.primal-menu-redes::after {
	display: none !important;
}

.primal-menu-redes-lista {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding-left: 14px;
	margin-left: 4px;
	border-left: 1px solid var(--primal-border);
}

.primal-tema .main-nav > li.primal-menu-redes a.primal-menu-rede {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0 !important;
	border-radius: 50%;
	color: var(--primal-dark) !important;
	background: transparent;
	transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.primal-tema .main-nav > li.primal-menu-redes a.primal-menu-rede svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.primal-tema .main-nav > li.primal-menu-redes a.primal-menu-rede:hover {
	background: var(--primal-primary);
	color: var(--primal-on-primary) !important;
	transform: translateY(-2px);
}

/* No menu do celular elas ficam em linha, centralizadas. */
.primal-tema .mobile-main-nav > li.primal-menu-redes .primal-menu-redes-lista {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border-left: 0;
	padding-left: 0;
	margin-left: 0;
	gap: 10px;
	padding-top: 8px;
}

.primal-tema .mobile-main-nav > li.primal-menu-redes {
	display: flex;
	justify-content: flex-start;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--primal-border);
}

.primal-tema .mobile-main-nav > li.primal-menu-redes a.primal-menu-rede {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	background: var(--primal-bg);
	color: var(--primal-dark);
}

.primal-tema .mobile-main-nav > li.primal-menu-redes a.primal-menu-rede svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}


/* ===== Mapa no rodapé (origem: Orpit Child, linhas 2482-2575) ===== */
/* =======================================================================
 * Mapa no rodapé
 * ==================================================================== */

/*
 * O mapa abre o rodapé, subindo por cima da faixa anterior.
 *
 * O quanto ele sobe fica numa variável porque o conteúdo acima precisa abrir
 * o mesmo espaço embaixo — senão o mapa cobre o que estiver ali, como fez com
 * o botão "Ver todos os veículos" na página do veículo.
 *
 * A sobreposição é o que costura as duas seções: sem ela o rodapé começa com
 * um bloco solto, e com ela o mapa vira a emenda entre as duas.
 */
.primal-rodape-mapa-box {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 0;
	margin-top: calc(-1 * var(--primal-mapa-sobe, 80px));
	margin-bottom: 44px;
	/* Claro, para destacar do rodapé escuro em volta. */
	background: var(--primal-mapa-fundo, #DFDFDF);
	border-color: rgba(17, 17, 17, .08) !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--primal-radius);
	overflow: hidden;
}

.primal-rodape-mapa-texto {
	padding: 26px 26px 28px;
	align-self: center;
}

/*
 * Texto escuro: o bloco do mapa é claro, mesmo dentro do rodapé escuro.
 *
 * As regras do rodapé pintam títulos e parágrafos de branco, e elas pesam
 * mais que estas — daí o !important. Sem ele o texto some no fundo claro.
 */
.primal-tema .primal-rodape-mapa-texto h3 {
	margin: 0 0 8px;
	font-size: 16px;
	color: var(--primal-dark) !important;
}

.primal-tema .primal-rodape-mapa-texto p {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--primal-gray) !important;
}

/* O botão "Traçar rota" também precisa contrastar com o claro. */
.primal-tema .primal-rodape-mapa-texto .primal-btn {
	background: var(--primal-dark);
	color: #fff;
	border-color: var(--primal-dark);
}

.primal-tema .primal-rodape-mapa-texto .primal-btn:hover {
	background: var(--primal-primary);
	border-color: var(--primal-primary);
	color: var(--primal-on-primary);
}

.primal-rodape-mapa-frame {
	position: relative;
	min-height: 240px;
}

.primal-rodape-mapa-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	/* Leve dessaturação só para o mapa não gritar mais que o conteúdo. */
	filter: grayscale(.15) contrast(1.02);
}

@media (max-width: 782px) {
	.primal-rodape-mapa-box {
		grid-template-columns: minmax(0, 1fr);
	}

	.primal-rodape-mapa-frame {
		min-height: 220px;
	}
}


/* ===== Cabeçalho encolhe ao flutuar (origem: Orpit Child, linhas 3658-3797) ===== */
/* =======================================================================
 * O cabeçalho encolhe quando flutua
 *
 * Parado, ele é uma barra de ponta a ponta. Ao rolar, descola das bordas e
 * vira uma ilha centralizada e mais baixa — o conteúdo aparece dos dois
 * lados e fica claro que aquilo está por cima da página, não preso nela.
 * ==================================================================== */

.primal-tema {
	--primal-header-ilha: 62px;
	--primal-header-folga: 12px;
}

body.primal-tema .masthead.sticky-on,
body.primal-tema.primal-rolou .masthead.fixed-masthead.sticky-on {
	top: var(--primal-header-folga) !important;
	left: 0 !important;
	right: 0 !important;
	width: min(var(--primal-width, 1240px), calc(100% - 28px)) !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
	border-radius: 18px !important;
	border: 1px solid rgba(17, 17, 17, .07) !important;
	box-shadow: 0 14px 40px rgba(17, 17, 17, .16) !important;
}

/* A barra interna encolhe junto, e o logotipo acompanha. */
body.primal-tema .masthead.sticky-on .header-bar,
body.primal-tema .masthead.sticky-on .branding,
body.primal-tema .masthead.sticky-on .navigation-holder {
	height: var(--primal-header-ilha) !important;
	min-height: 0 !important;
}

body.primal-tema .masthead.sticky-on .branding img,
body.primal-tema .masthead.sticky-on #site-logo img,
body.primal-tema .masthead.sticky-mobile-on .branding img,
body.primal-tema .masthead.sticky-mobile-on #site-logo img,
body.primal-tema .masthead.sticky-mobile-on .sticky-mobile-logo-first-switch img,
body.primal-tema .masthead.sticky-mobile-on .sticky-mobile-logo-second-switch img {
	width: 150px !important;
	max-width: 150px !important;
	max-height: calc(var(--primal-header-ilha) - 22px) !important;
}

/* Centraliza todos os elementos do menu na mesma linha do logotipo. */
body.primal-tema .masthead.sticky-on .header-bar,
body.primal-tema .masthead.sticky-on .navigation-holder,
body.primal-tema .masthead.sticky-on .main-nav-wrap,
body.primal-tema .masthead.sticky-on .main-nav,
body.primal-tema .masthead.sticky-on .main-nav > li {
	display: flex !important;
	align-items: center !important;
}

body.primal-tema .masthead.sticky-on .main-nav-wrap,
body.primal-tema .masthead.sticky-on .main-nav,
body.primal-tema .masthead.sticky-on .main-nav > li {
	height: 100% !important;
	min-height: 0 !important;
}

body.primal-tema .masthead.sticky-on .main-nav > li > a {
	display: inline-flex !important;
	align-items: center !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.2 !important;
}

body.primal-tema .masthead.sticky-on .main-nav > li.primal-menu-btn > a {
	height: 44px !important;
	padding-block: 0 !important;
}

body.primal-tema .masthead.sticky-on .primal-menu-redes-lista {
	height: 32px;
}

/*
 * A transição mora aqui, e não na regra do estado flutuante: assim ela vale
 * nos dois sentidos — ao virar ilha e ao voltar a ser barra.
 */
body.primal-tema .masthead {
	transition:
		width .34s cubic-bezier(.16, 1, .3, 1),
		border-radius .34s cubic-bezier(.16, 1, .3, 1),
		top .34s cubic-bezier(.16, 1, .3, 1),
		background-color .3s ease,
		box-shadow .3s ease;
}

body.primal-tema .masthead .header-bar,
body.primal-tema .masthead .branding,
body.primal-tema .masthead .navigation-holder,
body.primal-tema .masthead .branding img {
	transition: height .34s cubic-bezier(.16, 1, .3, 1), max-height .34s cubic-bezier(.16, 1, .3, 1);
}

/*
 * O conteúdo do cabeçalho não pode encostar no canto arredondado, então a
 * ilha ganha um recuo interno próprio.
 */
body.primal-tema .masthead.sticky-on .header-bar {
	padding-left: 22px !important;
	padding-right: 22px !important;
}

/* Na ilha o menu já está sobre fundo claro: texto escuro, como na barra. */
body.primal-tema.primal-topo-cheio .masthead.sticky-on .main-nav > li:not(.primal-menu-btn) > a .menu-text {
	color: var(--primal-dark) !important;
	text-shadow: none;
}

@media (max-width: 768px) {
	.primal-tema {
		--primal-header-ilha: 54px;
		--primal-header-folga: 8px;
	}

	body.primal-tema .masthead.sticky-on {
		width: calc(100% - 16px) !important;
		border-radius: 14px !important;
	}

	body.primal-tema .masthead.sticky-on .header-bar {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.primal-tema .masthead,
	body.primal-tema .masthead .header-bar,
	body.primal-tema .masthead .branding {
		transition: none;
	}
}


/* ===== Rodapé em colunas e menu do celular (origem: Orpit Child, linhas 4238-4435) ===== */
/* =======================================================================
 * Rodapé: o menu em duas colunas
 *
 * Com a coluna de marcas fora, sobrou largura. O menu se divide sozinho com
 * columns — nada de dividir a lista na mão, que quebraria assim que o
 * cliente acrescentasse ou tirasse um item do menu.
 * ==================================================================== */

.primal-rodape-col-navegue .primal-rodape-menu {
	columns: 2;
	column-gap: 28px;
}

.primal-rodape-col-navegue .primal-rodape-menu li {
	break-inside: avoid;
}

@media (max-width: 600px) {
	.primal-rodape-col-navegue .primal-rodape-menu {
		columns: 1;
	}
}

/* =======================================================================
 * Botão do menu no celular
 *
 * Quadrado amarelo arredondado, e as três barras viram um X quando o menu
 * abre. Os seletores cobrem as variações de classe que o The7 usa para o
 * estado aberto — o que não casar simplesmente não faz nada.
 * ==================================================================== */

.primal-tema .dt-mobile-menu-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--primal-primary) !important;
	/* A sombra sai da própria cor da marca, não de um amarelo fixo. */
	box-shadow: 0 4px 14px color-mix(in srgb, var(--primal-primary) 42%, transparent);
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.primal-tema .dt-mobile-menu-icon:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--primal-primary) 55%, transparent);
}

.primal-tema .dt-mobile-menu-icon:active {
	transform: scale(.94);
}

/* As barras: desenhadas por mim, para poderem virar X. */
.primal-tema .dt-mobile-menu-icon .lines,
.primal-tema .dt-mobile-menu-icon .line-menu {
	position: relative;
	display: block !important;
	width: 20px !important;
	height: 2px !important;
	border-radius: 2px;
	background: var(--primal-on-primary) !important;
	transition: background-color .18s ease;
}

.primal-tema .dt-mobile-menu-icon .lines::before,
.primal-tema .dt-mobile-menu-icon .lines::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--primal-on-primary);
	transition: transform .28s cubic-bezier(.16, 1, .3, 1), top .2s ease, bottom .2s ease;
}

.primal-tema .dt-mobile-menu-icon .lines::before { top: -6px; }
.primal-tema .dt-mobile-menu-icon .lines::after  { bottom: -6px; }

/* Aberto: a barra do meio some e as outras se cruzam. */
.primal-tema .dt-mobile-menu-icon.active .lines,
.primal-tema .dt-mobile-menu-icon.opened .lines,
.primal-tema .dt-mobile-menu-icon.is-active .lines,
body.mobile-menu-show .primal-tema .dt-mobile-menu-icon .lines,
body.menu-opened .dt-mobile-menu-icon .lines {
	background: transparent !important;
}

.primal-tema .dt-mobile-menu-icon.active .lines::before,
.primal-tema .dt-mobile-menu-icon.opened .lines::before,
.primal-tema .dt-mobile-menu-icon.is-active .lines::before,
body.menu-opened .dt-mobile-menu-icon .lines::before {
	top: 0;
	transform: rotate(45deg);
}

.primal-tema .dt-mobile-menu-icon.active .lines::after,
.primal-tema .dt-mobile-menu-icon.opened .lines::after,
.primal-tema .dt-mobile-menu-icon.is-active .lines::after,
body.menu-opened .dt-mobile-menu-icon .lines::after {
	bottom: 0;
	transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.primal-tema .dt-mobile-menu-icon,
	.primal-tema .dt-mobile-menu-icon .lines::before,
	.primal-tema .dt-mobile-menu-icon .lines::after {
		transition: none;
	}
}

/* Navegador sem color-mix: sombra neutra, que serve para qualquer cor. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.primal-tema .dt-mobile-menu-icon {
		box-shadow: 0 4px 14px rgba(17, 17, 17, .22);
	}
}

/* =======================================================================
 * Botão de fechar o menu do celular
 *
 * O The7 desenha um quadrado com o degradê azul dele. Aqui vira um círculo
 * na cor da marca, com o X girando ao passar o dedo.
 * ==================================================================== */

.primal-tema .dt-close-mobile-menu-icon,
.primal-tema .close-mobile-menu-icon,
.primal-tema .mobile-menu-close,
.primal-tema #mobile-menu .close,
.primal-tema .dt-mobile-header__close {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--primal-primary) !important;
	background-image: none !important;
	color: var(--primal-on-primary) !important;
	box-shadow: 0 6px 18px rgba(17, 17, 17, .18);
	transition: background-color .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}

/* O The7 pinta o ícone por dentro; estas camadas precisam sair da frente. */
.primal-tema .dt-close-mobile-menu-icon::before,
.primal-tema .dt-close-mobile-menu-icon::after,
.primal-tema .close-mobile-menu-icon::before,
.primal-tema .close-mobile-menu-icon::after {
	background: var(--primal-on-primary) !important;
	background-image: none !important;
}

.primal-tema .dt-close-mobile-menu-icon .close-line,
.primal-tema .close-mobile-menu-icon .close-line,
.primal-tema .dt-close-mobile-menu-icon span,
.primal-tema .close-mobile-menu-icon span {
	background: var(--primal-on-primary) !important;
	background-image: none !important;
}

.primal-tema .dt-close-mobile-menu-icon svg,
.primal-tema .close-mobile-menu-icon svg {
	fill: var(--primal-on-primary) !important;
	color: var(--primal-on-primary) !important;
}

.primal-tema .dt-close-mobile-menu-icon:hover,
.primal-tema .close-mobile-menu-icon:hover,
.primal-tema .mobile-menu-close:hover {
	background: var(--primal-dark) !important;
	color: #fff !important;
	transform: rotate(90deg);
}

.primal-tema .dt-close-mobile-menu-icon:hover::before,
.primal-tema .dt-close-mobile-menu-icon:hover::after,
.primal-tema .close-mobile-menu-icon:hover::before,
.primal-tema .close-mobile-menu-icon:hover::after,
.primal-tema .dt-close-mobile-menu-icon:hover span,
.primal-tema .close-mobile-menu-icon:hover span {
	background: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
	.primal-tema .dt-close-mobile-menu-icon,
	.primal-tema .close-mobile-menu-icon {
		transition: none;
	}

	.primal-tema .dt-close-mobile-menu-icon:hover,
	.primal-tema .close-mobile-menu-icon:hover {
		transform: none;
	}
}


/* ===== Menu maior e com ícone em cada item ===== */
.primal-tema .main-nav > li > a .menu-text { display: inline-flex; align-items: center; gap: 8px; font-size: 16px !important; white-space: nowrap; }
.primal-tema .main-nav > li > a { padding-left: 11px !important; padding-right: 11px !important; }
/* Menu numa linha só: as redes não quebram para baixo. */
.primal-tema .masthead .main-nav { flex-wrap: nowrap !important; }
.primal-tema .masthead .primal-menu-redes-lista { white-space: nowrap; }
.primal-menu-ico { display: inline-flex; width: 22px; height: 22px; color: var(--primal-primary-2); flex: none; }
.primal-menu-ico .primal-ico { width: 22px; height: 22px; }
.primal-tema .main-nav > li > a:hover .primal-menu-ico { color: var(--primal-primary-2) !important; }
.primal-tema .mobile-main-nav .primal-menu-ico { margin-right: 8px; vertical-align: middle; }
.primal-tema .main-nav > li.primal-menu-redes a.primal-menu-rede { width: 38px; height: 38px; }
.primal-tema .main-nav > li.primal-menu-redes a.primal-menu-rede svg { width: 20px; height: 20px; }
#contato { scroll-margin-top: 90px; }

/* =======================================================================
 * Cabeçalho transparente sobre a capa
 *
 * Nas páginas com capa (.primal-hero), o cabeçalho parado fica
 * transparente — só um brilho de vidro suave no alto — e a capa sobe por
 * baixo dele (theme.js mede a altura e liga .primal-header-sobre).
 * Ao rolar, volta a ser a ilha de vidro de sempre.
 * ==================================================================== */
body.primal-tema.primal-header-sobre .masthead:not(.sticky-on),
body.primal-tema.primal-header-sobre .masthead.sticky-off,
body.primal-tema.primal-header-sobre .masthead.fixed-masthead.sticky-off {
	background-color: transparent !important;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .25) 55%, rgba(255, 255, 255, 0) 100%) !important;
	border-bottom-color: transparent !important;
	box-shadow: none !important;
	z-index: 60;
}
/* Reflexo de gloss subindo pela capa: uma faixa clara que passa devagar. */
body.primal-tema.primal-header-sobre .masthead:not(.sticky-on)::after {
	content: "" !important;
	position: absolute;
	inset: 0;
	display: block !important;
	pointer-events: none;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 45%, transparent 70%) !important;
	background-size: 250% 100% !important;
	animation: primal-gloss-topo 7s ease-in-out infinite;
}
@keyframes primal-gloss-topo { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
body.primal-tema.primal-header-sobre .primal-hero:first-child,
body.primal-tema.primal-header-sobre .primal-hero {
	margin-top: calc(-1 * var(--primal-masthead, 0px));
	/* O espaço do menu entra no padding: fundo e colmeia começam no topo, sem corte. */
	padding-top: calc(clamp(72px, 9vw, 130px) + var(--primal-masthead, 0px));
}
body.primal-tema.primal-header-sobre .primal-hero-curto { padding-top: calc(clamp(56px, 7vw, 96px) + var(--primal-masthead, 0px)); }

/*
 * Logo "estourando" o cabeçalho: parado no topo, ele é maior que a barra e
 * passa um pouco da borda de baixo, com sombra. Ao rolar, volta ao tamanho da ilha.
 */
body.primal-tema .masthead:not(.sticky-on),
body.primal-tema .masthead:not(.sticky-on) .header-bar,
body.primal-tema .masthead:not(.sticky-on) .branding { overflow: visible !important; }
/* Só o logo principal: o .sticky-logo do The7 fica escondido fora da tela. */
body.primal-tema .masthead:not(.sticky-on) .branding a:not(.sticky-logo) img {
	position: relative;
	z-index: 5;
	max-height: 112px !important;
	max-width: 200px !important;
	margin: 0 0 -38px !important;
	filter: drop-shadow(0 10px 18px rgba(120, 75, 0, .22));
	transition: transform .35s ease, filter .35s ease;
}
body.primal-tema .masthead:not(.sticky-on) .branding a:not(.sticky-logo):hover img { transform: rotate(-3deg) scale(1.04); }
@media (max-width: 778px) {
	body.primal-tema .masthead:not(.sticky-on) .branding a:not(.sticky-logo) img { max-height: 72px !important; margin-bottom: -18px !important; }
}
@media (prefers-reduced-motion: reduce) {
	body.primal-tema.primal-header-sobre .masthead::after { animation: none; }
}

/* =======================================================================
 * Ícones do menu animados no hover
 * Abelha voa (bate asa e sobe/desce), casa solta fumaça e abre a porta,
 * loja balança o toldo, telefone toca, aperto de mãos, redes vibram.
 * ==================================================================== */
.primal-menu-ico .primal-ico { overflow: visible; }

.masthead li > a:hover .primal-menu-ico .primal-ico-abelha { animation: primal-menu-voa 1.1s ease-in-out infinite; }
.masthead li > a:hover .primal-ico-abelha .pi-asa { animation: primal-asa .1s linear infinite alternate; }

.masthead li > a:hover .primal-ico-casa .pi-porta { scale: .35 1; }
.masthead li > a:hover .primal-ico-casa .pi-fumaca { animation: primal-fumaca 1.4s ease-out infinite; }
.masthead li > a:hover .primal-ico-casa .pi-f2 { animation-delay: .5s; }

.masthead li > a:hover .primal-ico-loja .pi-toldo { animation: primal-toldo .7s ease-in-out infinite alternate; }

.primal-ico-telefone .pi-fone { transform-origin: 50% 50%; }
.masthead li > a:hover .primal-menu-ico .primal-ico-telefone { animation: primal-menu-toca 1.2s ease-in-out infinite; }

.masthead li > a:hover .primal-ico-parceiro .pi-maos { animation: primal-aperto .55s ease-in-out infinite; }
.masthead .primal-menu-rede:hover .pi-social { animation: primal-vibra .5s linear infinite; }

/* Voo em oito, subindo e descendo. */
@keyframes primal-menu-voa {
	0%, 100% { transform: translate(0, 0) rotate(0); }
	25% { transform: translate(3px, -5px) rotate(8deg); }
	50% { transform: translate(0, -2px) rotate(0); }
	75% { transform: translate(-3px, -5px) rotate(-8deg); }
}
/* Toca: tremida rápida, pausa, tremida de novo — como campainha. */
@keyframes primal-menu-toca {
	0%, 40%, 100% { transform: rotate(0); }
	5%, 15%, 25% { transform: rotate(-16deg); }
	10%, 20%, 30% { transform: rotate(16deg); }
	35% { transform: rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
	.masthead li > a:hover .primal-menu-ico *, .masthead li > a:hover .primal-menu-ico .primal-ico { animation: none !important; }
}

/* Reflexo gloss nos itens principais, sem interferir na barra ativa. */
.primal-tema .masthead .main-nav > li:not(.primal-menu-btn):not(.primal-menu-redes) > a {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 12px;
	transition: background-color .25s ease, box-shadow .25s ease;
}
.primal-tema .masthead .main-nav > li:not(.primal-menu-btn):not(.primal-menu-redes) > a .menu-text {
	position: relative;
	z-index: 1;
}
.primal-tema .masthead .main-nav > li:not(.primal-menu-btn):not(.primal-menu-redes) > a::after {
	content: "";
	position: absolute;
	inset: -25% auto -25% -42%;
	width: 38%;
	z-index: 0;
	pointer-events: none;
	transform: skewX(-24deg) translateX(0);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .92), transparent);
	opacity: 0;
}
.primal-tema .masthead .main-nav > li:not(.primal-menu-btn):not(.primal-menu-redes) > a:hover,
.primal-tema .masthead .main-nav > li:not(.primal-menu-btn):not(.primal-menu-redes) > a:focus-visible {
	background-color: rgba(242, 183, 5, .18);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 5px 14px rgba(175, 119, 0, .1);
}
.primal-tema .masthead .main-nav > li:not(.primal-menu-btn):not(.primal-menu-redes) > a:hover::after,
.primal-tema .masthead .main-nav > li:not(.primal-menu-btn):not(.primal-menu-redes) > a:focus-visible::after {
	animation: primal-menu-gloss .65s ease-out both;
}
@keyframes primal-menu-gloss {
	from { transform: skewX(-24deg) translateX(0); opacity: 0; }
	15% { opacity: .9; }
	to { transform: skewX(-24deg) translateX(450%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.primal-tema .masthead .main-nav > li:not(.primal-menu-btn):not(.primal-menu-redes) > a:hover::after,
	.primal-tema .masthead .main-nav > li:not(.primal-menu-btn):not(.primal-menu-redes) > a:focus-visible::after { animation: none; }
}

/* ===== Botão "Quero participar" no fim do menu (gloss de mel) ===== */
.primal-tema .main-nav > li.primal-menu-cta { display: flex !important; align-items: center; margin-left: 14px; }
.primal-tema .main-nav > li.primal-menu-cta::before,
.primal-tema .main-nav > li.primal-menu-cta::after { display: none !important; }
body.primal-tema .main-nav > li.primal-menu-cta > a.primal-menu-cta-btn {
	padding: 12px 22px !important;
	font-size: 15px !important;
	line-height: 1 !important;
	white-space: nowrap;
	color: #1a1204 !important;
}
.primal-tema .main-nav > li.primal-menu-cta > a .primal-ico { width: 18px; height: 18px; }
/* Reflexo que passa de tempos em tempos, mesmo sem hover. */
body.primal-tema .main-nav > li.primal-menu-cta > a.primal-menu-cta-btn::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
	transform: skewX(-20deg);
	animation: primal-cta-brilho 3.5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes primal-cta-brilho { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.primal-tema .mobile-main-nav > li.primal-menu-cta { padding: 14px 0; }
@media (prefers-reduced-motion: reduce) {
	body.primal-tema .main-nav > li.primal-menu-cta > a.primal-menu-cta-btn::after { animation: none; }
}

/* ===== Rodapé: contato mais compacto, "ver no mapa" na linha de baixo ===== */
.primal-rodape-contato { max-width: 290px; }
.primal-rodape-contato li { gap: 9px; margin-bottom: 10px; font-size: 14px; line-height: 1.45; }
.primal-rodape-contato .primal-rodape-ver-mapa { display: block; margin-top: 2px; font-size: 12.5px; }

/* ===== Rodapé: "Navegue" numa coluna, cada item numa linha só ===== */
.primal-rodape-col-navegue .primal-rodape-menu { columns: 1 !important; }
.primal-rodape-menu li { margin-bottom: 10px; }
.primal-rodape-menu a { white-space: nowrap; }
.primal-rodape-menu a .menu-text,
.primal-rodape-menu a { display: inline-flex !important; align-items: center; gap: 8px; }
.primal-rodape-menu .primal-menu-ico { width: 18px; height: 18px; color: var(--primal-primary); }
.primal-rodape-menu .primal-menu-ico .primal-ico { width: 18px; height: 18px; }

/* O hover só muda a cor: não altera a largura nem quebra o nome do link. */
.primal-rodape-menu a,
.primal-rodape-menu a:hover { padding-left: 0 !important; }
.primal-rodape-menu a::before { display: none; }
.primal-rodape-menu a:hover { color: var(--primal-primary) !important; }
.primal-rodape-col-navegue { min-width: 0; }
.primal-rodape-col-navegue .primal-rodape-menu a { max-width: 100%; white-space: nowrap; }
.primal-rodape-contato li > .primal-rodape-endereco { display: block; min-width: 0; }
.primal-rodape-contato .primal-rodape-ver-mapa { display: block !important; width: fit-content; margin: 4px 0 0 !important; }

/* ===== Rodapé: redes no hover — ícone escuro sobre o círculo amarelo ===== */
body.primal-tema .primal-rodape .primal-rodape-redes a:hover,
body.primal-tema .primal-rodape .primal-rodape-redes a:not(.primal-btn):hover { color: var(--primal-dark) !important; background: var(--primal-primary) !important; }
body.primal-tema .primal-rodape .primal-rodape-redes a:hover svg { fill: var(--primal-dark) !important; color: var(--primal-dark) !important; }

/* ===== WhatsApp flutuante: a linha branca em volta pulsa ===== */
.primal-whats-btn { animation: primal-whats-linha 1.8s ease-in-out infinite; }
@keyframes primal-whats-linha {
	0%, 100% { outline-color: rgba(255, 255, 255, .95); outline-offset: 2px; }
	50% { outline-color: rgba(255, 255, 255, .25); outline-offset: 6px; }
}
@media (prefers-reduced-motion: reduce) { .primal-whats-btn { animation: none; } }

/* Abelhinha no rodapé (no lugar do logo retangular). */
.primal-rodape-logo.primal-rodape-abelha { background: none !important; padding: 0 !important; border-radius: 0 !important; width: 110px; max-width: 110px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .4)); transition: transform .35s ease; }
.primal-rodape-logo.primal-rodape-abelha:hover { transform: rotate(-6deg) scale(1.06); }

/* Setinha de "abre em nova janela" (Primal Imobiliária). */
.primal-menu-externo { display: inline-flex; margin-left: 5px; color: var(--primal-primary-2); opacity: .8; transition: transform .25s ease, opacity .25s ease; }
.masthead li > a:hover .primal-menu-externo { transform: translate(2px, -2px); opacity: 1; }

/* O brilho de vidro do menu parado desce mais suave, sem borda. */
body.primal-tema.primal-header-sobre .masthead:not(.sticky-on) {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, 0) 100%) !important;
	/* Sem isto o degradê se repetia na borda de 1px de baixo e aparecia uma linha branca fininha. */
	background-origin: border-box !important;
	background-repeat: no-repeat !important;
	border-bottom: 0 !important;
}
/* Cartão (Primal+) no menu: brilho passando e o chip piscando no hover. */
.masthead li > a:hover .primal-ico-cartao .pi-brilho { animation: primal-cartao-brilho 1.1s ease-in-out infinite; }
.masthead li > a:hover .primal-ico-cartao .pi-chip { animation: primal-chip 1.1s ease-in-out infinite; }
.masthead li > a:hover .primal-menu-ico .primal-ico-cartao { animation: primal-menu-voa 1.4s ease-in-out infinite; }

/* ===== Hover dos itens do menu: mais forte e mais alto ===== */
body.primal-tema .masthead .main-nav > li:not(.primal-menu-cta):not(.primal-menu-redes) > a {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	border-radius: 999px;
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.primal-tema .masthead .main-nav > li:not(.primal-menu-cta):not(.primal-menu-redes) > a:hover {
	background-color: color-mix(in srgb, var(--primal-primary) 30%, #fff) !important;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--primal-primary) 35%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--primal-primary) 55%, transparent);
	transform: translateY(-2px);
}
body.primal-tema .masthead .main-nav > li:not(.primal-menu-btn):not(.primal-menu-cta) > a:hover .menu-text { color: #2a1b00 !important; }
body.primal-tema .masthead .main-nav > li > a:hover .primal-menu-ico { color: #b86e00 !important; }

/* Loja (Para empresas): pula e o toldo abana com força. */
@keyframes primal-loja-pula {
	0%, 100% { transform: translateY(0) rotate(0); }
	25% { transform: translateY(-4px) rotate(-8deg); }
	50% { transform: translateY(0) rotate(0); }
	75% { transform: translateY(-4px) rotate(8deg); }
}
@keyframes primal-toldo-forte { 0%, 100% { scale: 1 1; } 50% { scale: 1 .55; } }
.masthead li > a:hover .primal-menu-ico .primal-ico-loja { animation: primal-loja-pula .9s ease-in-out infinite; }
.masthead li > a:hover .primal-ico-loja .pi-toldo { animation: primal-toldo-forte .45s ease-in-out infinite; }

/* ===== Celular: logo maior no topo (estourando um pouco, como no computador) ===== */
@media (max-width: 778px) {
	body.primal-tema .masthead:not(.sticky-on):not(.sticky-mobile-on) .mobile-branding img {
		max-height: 92px !important;
		max-width: 180px !important;
		margin-bottom: -22px !important;
		position: relative;
		z-index: 5;
		filter: drop-shadow(0 8px 14px rgba(120, 75, 0, .22));
	}
	body.primal-tema .masthead:not(.sticky-on):not(.sticky-mobile-on),
	body.primal-tema .masthead:not(.sticky-on):not(.sticky-mobile-on) .mobile-header-bar,
	body.primal-tema .masthead:not(.sticky-on):not(.sticky-mobile-on) .mobile-branding { overflow: visible !important; }
}

/* ===== Celular: cabeçalho flutuando vira a ilha de vidro (igual ao computador) ===== */
body.primal-tema .masthead.sticky-mobile-on,
body.primal-tema.primal-header-sobre .masthead.sticky-mobile-on {
	top: 10px !important;
	left: 10px !important;
	right: 10px !important;
	width: auto !important;
	border-radius: 18px !important;
	background-color: rgba(255, 255, 255, .78) !important;
	background-image: none !important;
	-webkit-backdrop-filter: blur(18px) saturate(180%) !important;
	backdrop-filter: blur(18px) saturate(180%) !important;
	border: 1px solid rgba(17, 17, 17, .07) !important;
	box-shadow: 0 12px 34px rgba(17, 17, 17, .16) !important;
	overflow: hidden;
}
body.primal-tema .masthead.sticky-mobile-on::after { display: none !important; }
body.primal-tema .masthead.sticky-mobile-on .mobile-header-bar { min-height: 64px !important; height: 64px !important; padding: 0 12px !important; }
body.primal-tema .masthead.sticky-mobile-on .mobile-branding img { max-height: 46px !important; max-width: 46px !important; }

/* ===== Celular: rodapé em uma coluna (o contato não espreme nem corta o e-mail) ===== */
@media (max-width: 600px) {
	.primal-rodape-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
	.primal-rodape-contato { max-width: none; }
	.primal-rodape-contato a, .primal-rodape-contato span { overflow-wrap: anywhere; }
	.primal-rodape-logo.primal-rodape-abelha { width: 90px; max-width: 90px; }
}

/* ===== Menu do celular ===== */
/* Item atual: o The7 pintava com degradê azul/verde (accent-gradient). Agora é mel. */
body.primal-tema .mobile-main-nav > li.current-menu-item > a,
body.primal-tema .mobile-main-nav > li.act > a,
body.primal-tema .mobile-main-nav > li.current-menu-item > a .menu-text,
body.primal-tema .mobile-main-nav > li.act > a .menu-text,
body.primal-tema .mobile-main-nav > li > a:hover .menu-text {
	background: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	-webkit-text-fill-color: #b86e00 !important;
	color: #b86e00 !important;
}
/* Sem a linha depois das redes (antes do botão "Quero participar"). */
body.primal-tema .mobile-main-nav > li.primal-menu-cta,
body.primal-tema .mobile-main-nav > li.primal-menu-redes { border: 0 !important; }
body.primal-tema .mobile-main-nav > li.primal-menu-cta::before,
body.primal-tema .mobile-main-nav > li.primal-menu-cta::after,
body.primal-tema .mobile-main-nav > li.primal-menu-redes::before,
body.primal-tema .mobile-main-nav > li.primal-menu-redes::after { display: none !important; }
/* Sombra atrás do menu aberto: mel em vez de cinza. */
body.primal-tema .mobile-sticky-header-overlay,
body.primal-tema .dt-mobile-menu-overlay { background-color: rgba(242, 183, 5, .38) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* Frase "Polinizando sonhos" no rodapé, logo abaixo da abelhinha. */
.primal-rodape-frase {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-family: var(--primal-font-title);
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--primal-primary) !important;
}
.primal-rodape-frase .primal-ico { width: 22px; height: 22px; }
.primal-rodape-frase .pi-asa { animation: primal-asa .12s linear infinite alternate; }

/* ===== Páginas internas (termo, políticas, parceiros, busca): capa mais baixa ===== */
body.primal-tema .primal-hero.primal-hero-curto { padding-top: clamp(28px, 3.5vw, 48px); padding-bottom: clamp(56px, 6vw, 80px); }
body.primal-tema.primal-header-sobre .primal-hero.primal-hero-curto { padding-top: calc(clamp(28px, 3.5vw, 48px) + var(--primal-masthead, 0px)); }
body.primal-tema .primal-hero-curto h1 { font-size: clamp(2rem, 4vw, 3.1rem) !important; line-height: 1.08; margin-bottom: 12px; }
body.primal-tema .primal-hero-curto .primal-hero-texto > p { margin-bottom: 0; }
/* Benefícios (etiqueta) no menu: balança como pêndulo e o % pisca. */
.masthead li > a:hover .primal-ico-desconto .pi-etiqueta { animation: primal-pendulo .9s ease-in-out infinite; }
.masthead li > a:hover .primal-ico-desconto .pi-pct { animation: primal-pisca .5s steps(2) infinite; }
/* Capa das internas: espaço entre o subtítulo e o botão. */
body.primal-tema .primal-hero-curto .primal-hero-texto > p + .primal-hero-acoes { margin-top: 24px; }