/*!
 * Orpit Child — design system
 *
 * Nada de cor, fonte ou medida fixa aqui: tudo lê as variáveis geradas pelo
 * Personalizar → "Identidade da marca". Para trocar o visual de um cliente,
 * mexa lá, não neste arquivo.
 */

/* ------------------------------------------------------------ Fundação */

:root {
	--orpit-primary: #FFC400;
	--orpit-on-primary: #111111;
	--orpit-dark: #1A1A1A;
	--orpit-gray: #6B7280;
	--orpit-bg: #F5F5F5;
	--orpit-border: #E5E7EB;
	--orpit-success: #15803D;
	--orpit-white: #FFFFFF;
	--orpit-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--orpit-font-title: var(--orpit-font);
	--orpit-title-weight: 800;
	--orpit-scale: 1;
	--orpit-width: 1240px;
	--orpit-radius: 14px;
	--orpit-radius-sm: 8px;
	--orpit-radius-lg: 22px;
	--orpit-shadow: 0 2px 10px rgba(17, 17, 17, .06);
	--orpit-section: 88px;
}

.orpit-tema {
	font-family: var(--orpit-font);
	color: var(--orpit-dark);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.orpit-tema h1,
.orpit-tema h2,
.orpit-tema h3,
.orpit-tema h4,
.orpit-tema h5,
.orpit-tema .orpit-titulo {
	font-family: var(--orpit-font-title);
	font-weight: var(--orpit-title-weight);
	color: var(--orpit-dark);
	letter-spacing: -.02em;
	line-height: 1.12;
}

.orpit-tema h1 { font-size: calc(clamp(2rem, 1.3rem + 2.6vw, 3.5rem) * var(--orpit-scale)); }
.orpit-tema h2 { font-size: calc(clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem) * var(--orpit-scale)); }
.orpit-tema h3 { font-size: calc(clamp(1.25rem, 1rem + .8vw, 1.65rem) * var(--orpit-scale)); }
.orpit-tema h4 { font-size: calc(1.15rem * var(--orpit-scale)); }

.orpit-tema p {
	line-height: 1.65;
}

/* ------------------------------------------------------- Estrutura */

.orpit-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--orpit-width);
	margin-inline: auto;
	padding-inline: 20px;
}

.orpit-section {
	padding-block: var(--orpit-section);
	position: relative;
}

.orpit-section-sm { padding-block: calc(var(--orpit-section) * .6); }
.orpit-section-lg { padding-block: calc(var(--orpit-section) * 1.4); }

.orpit-section-claro { background: var(--orpit-bg); }
.orpit-section-branco { background: var(--orpit-white); }

.orpit-section-escuro {
	background: var(--orpit-dark);
	color: #fff;
}

.orpit-section-escuro h1,
.orpit-section-escuro h2,
.orpit-section-escuro h3,
.orpit-section-escuro h4 {
	color: #fff;
}

.orpit-section-escuro p {
	color: rgba(255, 255, 255, .72);
}

.orpit-section-marca {
	background: var(--orpit-primary);
	color: var(--orpit-on-primary);
}

.orpit-section-marca h1,
.orpit-section-marca h2,
.orpit-section-marca h3 {
	color: var(--orpit-on-primary);
}

/* Faixa diagonal opcional entre seções */
.orpit-section-diagonal {
	clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%);
	margin-top: -3vw;
}

/* --------------------------------------------------------- Cabeçalhos */

.orpit-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--orpit-primary) 22%, transparent);
	color: var(--orpit-dark);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.orpit-section-escuro .orpit-eyebrow {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.orpit-head {
	max-width: 720px;
	margin-bottom: 44px;
}

.orpit-head-centro {
	margin-inline: auto;
	text-align: center;
}

.orpit-head p {
	margin-top: 12px;
	font-size: 1.06rem;
	color: var(--orpit-gray);
}

.orpit-titulo-risco {
	position: relative;
	padding-bottom: 16px;
}

.orpit-titulo-risco::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 5px;
	border-radius: 3px;
	background: var(--orpit-primary);
}

.orpit-head-centro .orpit-titulo-risco::after {
	left: 50%;
	transform: translateX(-50%);
}

/* ------------------------------------------------------------ Botões */

.orpit-tema .orpit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 28px;
	border: 2px solid transparent;
	border-radius: var(--orpit-radius-sm);
	background: var(--orpit-primary);
	color: var(--orpit-on-primary);
	font-family: var(--orpit-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.orpit-tema .orpit-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--orpit-shadow);
	background: var(--orpit-dark);
	color: #fff;
}

.orpit-tema .orpit-btn-escuro {
	background: var(--orpit-dark);
	color: #fff;
}

.orpit-tema .orpit-btn-escuro:hover {
	background: var(--orpit-primary);
	color: var(--orpit-on-primary);
}

.orpit-tema .orpit-btn-contorno {
	background: transparent;
	border-color: currentColor;
	color: var(--orpit-dark);
}

.orpit-section-escuro .orpit-btn-contorno {
	color: #fff;
}

.orpit-tema .orpit-btn-contorno:hover {
	background: var(--orpit-primary);
	border-color: var(--orpit-primary);
	color: var(--orpit-on-primary);
}

.orpit-tema .orpit-btn-lg { padding: 18px 34px; font-size: 16px; }
.orpit-tema .orpit-btn-sm { padding: 11px 18px; font-size: 13px; }
.orpit-tema .orpit-btn-bloco { display: flex; width: 100%; }

/* Variações globais escolhidas no Personalizar */
.orpit-botao-pilula .orpit-btn,
.orpit-botao-pilula .orpitcar-btn,
.orpit-botao-pilula .dt-btn { border-radius: 999px !important; }

.orpit-botao-reto .orpit-btn,
.orpit-botao-reto .orpitcar-btn,
.orpit-botao-reto .dt-btn { border-radius: 0 !important; }

.orpit-botao-contorno .orpit-btn:not(.orpit-btn-escuro) {
	background: transparent;
	border-color: var(--orpit-primary);
	color: var(--orpit-dark);
}

/* ------------------------------------------------------------- Cards */

.orpit-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.orpit-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.orpit-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.orpit-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.orpit-card {
	position: relative;
	padding: 30px;
	border: 1px solid var(--orpit-border);
	border-radius: var(--orpit-radius);
	background: var(--orpit-white);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.orpit-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--orpit-shadow);
	border-color: var(--orpit-primary);
}

.orpit-card h3 {
	margin: 0 0 8px;
	font-size: 1.15rem;
}

.orpit-card p {
	margin: 0;
	color: var(--orpit-gray);
	font-size: .95rem;
}

.orpit-card-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	border-radius: var(--orpit-radius-sm);
	background: color-mix(in srgb, var(--orpit-primary) 20%, transparent);
	color: var(--orpit-dark);
	font-size: 24px;
}

.orpit-card-numero {
	position: absolute;
	top: 22px;
	right: 26px;
	font-family: var(--orpit-font-title);
	font-size: 2.6rem;
	font-weight: 900;
	line-height: 1;
	color: var(--orpit-border);
}

/* ------------------------------------------------------------- Hero */

.orpit-hero {
	position: relative;
	display: flex;
	align-items: center;
	padding-block: clamp(26px, 3.4vw, 46px);
	background: var(--orpit-dark);
	color: #fff;
	overflow: hidden;
}

/* Faixa compacta: título e ações lado a lado. */
.orpit-hero .orpit-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

.orpit-hero-texto {
	flex: 1 1 420px;
	min-width: 0;
}

/* Quando quiser a capa alta de novo, é só somar esta classe. */
.orpit-hero-alto {
	min-height: min(82vh, 720px);
	padding-block: calc(var(--orpit-section) * 1.1);
}

.orpit-hero-alto .orpit-container {
	display: block;
}

.orpit-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 80% at 78% 30%, color-mix(in srgb, var(--orpit-primary) 26%, transparent), transparent 70%),
		linear-gradient(120deg, var(--orpit-dark) 40%, color-mix(in srgb, var(--orpit-dark) 70%, #000) 100%);
}

.orpit-hero > * {
	position: relative;
	z-index: 1;
}

.orpit-hero h1 {
	margin: 0;
	color: #fff;
	font-size: calc(clamp(1.45rem, 1.05rem + 1.5vw, 2.25rem) * var(--orpit-scale));
	line-height: 1.15;
	max-width: 22ch;
}

.orpit-hero-alto h1 {
	font-size: calc(clamp(2rem, 1.3rem + 2.6vw, 3.5rem) * var(--orpit-scale));
	max-width: 15ch;
}

.orpit-hero h1 em {
	font-style: normal;
	color: var(--orpit-primary);
}

.orpit-hero p {
	max-width: 56ch;
	margin: 6px 0 0;
	font-size: .98rem;
	color: rgba(255, 255, 255, .72);
}

.orpit-hero-alto p {
	margin-top: 18px;
	font-size: 1.12rem;
}

.orpit-hero-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex: 0 0 auto;
}

.orpit-hero-alto .orpit-hero-acoes {
	margin-top: 32px;
}

/* Etiqueta acima do título fica inline na faixa curta. */
.orpit-hero .orpit-eyebrow {
	margin-bottom: 8px;
	padding: 4px 11px;
	font-size: 11px;
}

/* ------------------------------------------------------------ Números */

.orpit-stats {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.orpit-stat {
	padding: 26px 22px;
	border-radius: var(--orpit-radius);
	background: var(--orpit-white);
	border-left: 5px solid var(--orpit-primary);
	box-shadow: var(--orpit-shadow);
}

.orpit-section-escuro .orpit-stat {
	background: rgba(255, 255, 255, .06);
	box-shadow: none;
}

.orpit-stat strong {
	display: block;
	font-family: var(--orpit-font-title);
	font-size: 2.4rem;
	font-weight: 900;
	line-height: 1;
	color: var(--orpit-dark);
}

.orpit-section-escuro .orpit-stat strong {
	color: var(--orpit-primary);
}

.orpit-stat span {
	display: block;
	margin-top: 6px;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--orpit-gray);
}

.orpit-section-escuro .orpit-stat span {
	color: rgba(255, 255, 255, .6);
}

/* --------------------------------------------------------- Chamada */

.orpit-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	padding: 42px;
	border-radius: var(--orpit-radius-lg);
	background: var(--orpit-primary);
	color: var(--orpit-on-primary);
}

.orpit-cta h2 {
	margin: 0;
	color: var(--orpit-on-primary);
}

.orpit-cta p {
	margin: 6px 0 0;
	opacity: .78;
}

/* ---------------------------------------------------------- Lista */

.orpit-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.orpit-lista li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: .98rem;
}

.orpit-lista li::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--orpit-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* --------------------------------------------- Cabeçalho e rodapé */

.orpit-header-fixo .masthead {
	transition: box-shadow .25s ease, background-color .25s ease, padding .25s ease;
}

.orpit-header-fixo.orpit-rolou .masthead {
	box-shadow: 0 4px 20px rgba(17, 17, 17, .1);
	backdrop-filter: saturate(180%) blur(10px);
}

.orpit-tema .footer,
.orpit-tema .bottom-bar {
	font-family: var(--orpit-font);
}

.orpit-rodape-marca {
	border-top: 4px solid var(--orpit-primary);
}

/* Barra fixa de contato no mobile */
.orpit-barra-mobile {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9980;
	display: none;
	gap: 1px;
	background: var(--orpit-border);
	box-shadow: 0 -4px 16px rgba(17, 17, 17, .12);
	transform: translateY(calc(100% + 12px));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform .38s cubic-bezier(.16, 1, .3, 1), opacity .28s ease, visibility 0s linear .38s;
}

.orpit-barra-mobile.is-visivel {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: transform .38s cubic-bezier(.16, 1, .3, 1), opacity .28s ease, visibility 0s;
}

.orpit-barra-mobile a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 8px;
	background: var(--orpit-white);
	color: var(--orpit-dark);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.orpit-barra-mobile a.is-destaque {
	background: var(--orpit-primary);
	color: var(--orpit-on-primary);
}

/* ------------------------------------------------------- Animações */

/*
 * Entrada com desfoque.
 *
 * O item nasce um pouco abaixo, transparente e borrado, e vai ganhando foco
 * conforme entra na tela — é o "esfumaçado" que dá a sensação de profundidade.
 *
 * O will-change some junto com a animação: mantê-lo para sempre obriga o
 * navegador a guardar uma camada por elemento, e numa listagem de doze carros
 * isso come memória à toa.
 */
.orpit-anima .orpit-reveal {
	opacity: 0;
	transform: translateY(26px) scale(.985);
	filter: blur(9px);
	will-change: opacity, transform, filter;
	transition:
		opacity .75s cubic-bezier(.16, 1, .3, 1),
		transform .75s cubic-bezier(.16, 1, .3, 1),
		filter .6s cubic-bezier(.16, 1, .3, 1);
}

.orpit-anima .orpit-reveal.is-visivel {
	opacity: 1;
	transform: none;
	filter: blur(0);
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.orpit-barra-mobile,
	.orpit-barra-mobile.is-visivel {
		transition: none;
	}

	.orpit-anima .orpit-reveal {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}

	.orpit-tema .orpit-btn:hover,
	.orpit-card:hover {
		transform: none;
	}
}

/* ------------------------------------------------------ Responsivo */

@media (max-width: 1024px) {
	.orpit-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.orpit-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
	:root { --orpit-section: 56px; }

	.orpit-grid-2,
	.orpit-grid-3,
	.orpit-grid-4 { grid-template-columns: minmax(0, 1fr); }

	.orpit-hero { min-height: 0; text-align: left; }
	.orpit-hero h1 { max-width: none; }
	.orpit-hero .orpit-container { gap: 16px; }
	.orpit-hero-acoes { width: 100%; }
	.orpit-hero-acoes .orpit-btn { flex: 1; }
	.orpit-hero-alto { min-height: 0; }

	.orpit-cta { padding: 28px; }
	.orpit-cta .orpit-btn { width: 100%; }

	.orpit-barra-mobile { display: flex; }
	.orpit-tema.orpit-barra-mobile-visivel { padding-bottom: 54px; }
}

/* Impressão limpa */
@media print {
	.orpit-barra-mobile,
	.orpit-hero::before { display: none !important; }
}

/* =======================================================================
 * Menu
 * ==================================================================== */

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

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

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

.orpit-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(--orpit-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .26s cubic-bezier(.16, 1, .3, 1);
}

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

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

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

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

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

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

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

/* O contato principal vira uma chamada direta para WhatsApp. */
.orpit-tema .main-nav > li.orpit-menu-whatsapp > a,
.orpit-tema .mobile-main-nav > li.orpit-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(--orpit-radius-sm);
	background: #20bf60;
	color: #fff !important;
	line-height: 1;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

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

.orpit-tema .main-nav > li.orpit-menu-whatsapp > a .menu-text::before,
.orpit-tema .mobile-main-nav > li.orpit-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;
}

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

/* Ícones nos itens do menu — classes orpit-icone-* */
.orpit-tema .main-nav > li[class*="orpit-icone-"] > a .menu-text::before,
.orpit-tema .mobile-main-nav > li[class*="orpit-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;
}

.orpit-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");
}

.orpit-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");
}

.orpit-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");
}

.orpit-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");
}

.orpit-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");
}

.orpit-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>");
}

.orpit-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>");
}

.orpit-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>");
}

.orpit-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>");
}

.orpit-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 */
.orpit-tema .main-nav ul.sub-nav {
	border-radius: var(--orpit-radius-sm);
	box-shadow: 0 14px 34px rgba(17, 17, 17, .14);
	overflow: hidden;
	border: 1px solid var(--orpit-border);
}

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

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

.orpit-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;
}

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

.orpit-whats-texto {
	white-space: nowrap;
	font-family: var(--orpit-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);
}

.orpit-whats-btn:hover,
.orpit-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;
}

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

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

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

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

@keyframes orpit-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 */
.orpit-whats-balao {
	position: relative;
	max-width: 230px;
	padding: 12px 30px 12px 14px;
	border-radius: 14px 14px 14px 4px;
	background: #fff;
	color: var(--orpit-dark);
	font-size: 13.5px;
	line-height: 1.4;
	box-shadow: 0 10px 26px rgba(17, 17, 17, .16);
	animation: orpit-balao .42s cubic-bezier(.16, 1, .3, 1);
}

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

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

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

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

	.orpit-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. */
	.orpit-whats-balao {
		display: none !important;
	}
}

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

/* =======================================================================
 * Painel de busca do menu
 * ==================================================================== */

/* (a gaveta de busca está mais abaixo, no bloco próprio) */

.orpit-busca-atalhos a {
	padding: 6px 12px;
	border: 1px solid var(--orpit-border);
	border-radius: 999px;
	color: var(--orpit-dark);
	text-decoration: none;
	font-weight: 600;
	transition: all .16s ease;
}

.orpit-busca-atalhos a:hover {
	background: var(--orpit-primary);
	border-color: var(--orpit-primary);
	color: var(--orpit-on-primary);
}

@media (max-width: 782px) {
	.orpit-busca-overlay {
		padding: 16px;
		align-items: stretch;
	}

	.orpit-busca-painel {
		padding: 26px 20px;
	}
}

/* =======================================================================
 * Hover do tema
 * ==================================================================== */

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

.orpit-tema .orpit-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);
}

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

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

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

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

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

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

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

/* Links de texto com sublinhado que cresce */
.orpit-tema .orpit-link,
.orpit-tema .orpit-link-todos {
	background-image: linear-gradient(var(--orpit-primary), var(--orpit-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);
}

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

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

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

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

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

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

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

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

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

/* =======================================================================
 * Barra superior
 * ==================================================================== */

.orpit-topbar {
	position: relative;
	z-index: 60;
	background: var(--orpit-dark);
	color: rgba(255, 255, 255, .78);
	font-size: 13px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.orpit-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	min-height: 42px;
	padding-block: 6px;
}

.orpit-topbar-info,
.orpit-topbar-acoes {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.orpit-topbar a,
.orpit-topbar span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: inherit;
	text-decoration: none;
	transition: color .18s ease;
}

.orpit-topbar a:hover {
	color: var(--orpit-primary);
}

.orpit-topbar svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	opacity: .75;
}

.orpit-topbar-acoes {
	gap: 10px;
}

.orpit-topbar-rede {
	width: 30px;
	height: 30px;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	transition: background-color .2s ease, transform .2s ease;
}

.orpit-topbar-rede:hover {
	background: var(--orpit-primary);
	color: var(--orpit-on-primary);
	transform: translateY(-2px);
}

.orpit-topbar-rede svg {
	opacity: 1;
}

.orpit-topbar-whats {
	padding: 5px 13px;
	border-radius: 999px;
	background: #25D366;
	color: #fff !important;
	font-weight: 700;
	font-size: 12.5px;
	transition: background-color .2s ease, transform .2s ease;
}

.orpit-topbar-whats:hover {
	background: #1eb455;
	transform: translateY(-1px);
}

@media (max-width: 782px) {
	.orpit-topbar-inner {
		justify-content: center;
		gap: 10px;
	}

	.orpit-topbar-info {
		gap: 12px;
		font-size: 12px;
	}

	.orpit-topbar-cidade {
		display: none;
	}
}

/* =======================================================================
 * Rodapé
 * ==================================================================== */

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

.orpit-rodape > .orpit-container {
	width: 100%;
	max-width: var(--orpit-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.
 */
.orpit-rodape-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1.5fr;
	gap: 48px;
	padding-bottom: 36px;
}

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

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

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

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

.orpit-rodape a:hover {
	color: var(--orpit-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.
 */
.orpit-rodape-logo {
	max-width: 180px;
	height: auto;
	margin-bottom: 16px;
}

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

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

.orpit-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.orpit-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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =======================================================================
 * 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".
 */
.orpit-tema .main-nav > li > a .underline,
.orpit-tema .mobile-main-nav > li > a .underline,
.orpit-tema .main-nav > li > a i.underline {
	display: none !important;
}

/* Nossa barra precisa vencer o que o tema define para o mesmo pseudo. */
.orpit-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(--orpit-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;
}

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

/* No botão não entra barra nenhuma. */
.orpit-tema .main-nav > li.orpit-menu-btn > a .menu-text::after,
.orpit-tema .main-nav > li.orpit-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. */
.orpit-tema .main-nav > li.orpit-menu-btn > a,
.orpit-tema .main-nav > li.orpit-menu-btn > a .menu-text,
.orpit-tema .mobile-main-nav > li.orpit-menu-btn > a,
.orpit-tema .mobile-main-nav > li.orpit-menu-btn > a .menu-text {
	color: var(--orpit-on-primary) !important;
}

.orpit-tema .main-nav > li.orpit-menu-btn:hover > a,
.orpit-tema .main-nav > li.orpit-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. */
.orpit-tema .main-nav > li[class*="orpit-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.
 */
.orpit-tema .orpit-rodape,
.orpit-tema .orpit-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.
 */
.orpit-tema .orpit-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 .orpit-container de dentro de cada faixa.
 */
.orpit-sem-titulo #main .wf-wrap,
.orpit-topo-cheio #main .wf-wrap,
.orpit-sem-titulo .sidebar-none > .wf-wrap,
.orpit-topo-cheio .sidebar-none > .wf-wrap {
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.orpit-sem-titulo #main .wf-container-main,
.orpit-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. */
.orpit-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 orpit-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.
 */
.orpit-tema {
	--orpit-mapa-sobe: clamp(60px, 6vw, 96px);
}

.orpit-sem-titulo #main,
.orpit-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.
 */
.orpit-sem-titulo #main .content,
.orpit-topo-cheio #main .content {
	padding-bottom: var(--orpit-mapa-sobe);
}

/* O container interno do The7 também não pode estreitar as nossas faixas. */
.orpit-sem-titulo #main .content,
.orpit-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. */
.orpit-tema {
	overflow-x: clip;
}

/* O rodapé do The7, quando ligado, vem logo abaixo do nosso — sem espaço duplo. */
.orpit-tema .orpit-rodape + .footer,
.orpit-tema .orpit-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 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 {
	--orpit-vidro-desfoque: 20px;
	--orpit-vidro-opacidade: 72%;
}

/* Parado, ocupa a largura toda, sem margem nem canto arredondado do tema. */
.orpit-header-vidro .masthead,
.orpit-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.orpit-tema .masthead,
body.orpit-tema .masthead.sticky-off,
body.orpit-tema .masthead.fixed-masthead.sticky-off {
	background-color: var(--orpit-white) !important;
	background-image: none !important;
	border-bottom: 1px solid var(--orpit-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.
 */
.orpit-tema .masthead::before,
.orpit-tema .masthead::after,
.orpit-tema .masthead .header-bar,
.orpit-tema .masthead .branding,
.orpit-tema .masthead .navigation-holder,
.orpit-tema .masthead .main-nav-wrap,
.orpit-tema .masthead-mobile,
.orpit-tema .masthead .mobile-header-bar {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

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

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

/* Estado flutuante: aí sim, vidro. */
body.orpit-tema.orpit-header-vidro .masthead.sticky-on,
body.orpit-tema.orpit-header-vidro .masthead.fixed-masthead.sticky-on,
body.orpit-tema.orpit-header-vidro .masthead.floating-navigation-below-slider,
body.orpit-tema.orpit-header-vidro.orpit-rolou .masthead.fixed-masthead {
	background-color: rgba(255, 255, 255, .72) !important;
	background-color: color-mix(in srgb, var(--orpit-white) var(--orpit-vidro-opacidade), transparent) !important;
	background-image: none !important;
	-webkit-backdrop-filter: blur(var(--orpit-vidro-desfoque)) saturate(180%);
	backdrop-filter: blur(var(--orpit-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.
 */
.orpit-tema .masthead .main-nav > li:not(.orpit-menu-btn) > a,
.orpit-tema .masthead .main-nav > li:not(.orpit-menu-btn) > a .menu-text,
.orpit-tema .masthead .mini-nav > li > a,
.orpit-tema .masthead .mobile-main-nav > li:not(.orpit-menu-btn) > a,
.orpit-tema .masthead .mobile-main-nav > li:not(.orpit-menu-btn) > a .menu-text,
.orpit-tema .masthead .dt-mobile-menu-icon .lines,
.orpit-tema .masthead .soc-ico a {
	color: var(--orpit-dark) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =======================================================================
 * Página que começa com a capa
 *
 * O The7 põe respiro no topo do conteúdo. Numa home que abre com a capa de
 * tela cheia isso vira uma faixa branca entre o cabeçalho e a foto.
 * ==================================================================== */

.orpit-topo-cheio #main,
.orpit-topo-cheio .page-content,
.orpit-topo-cheio .wf-container-main,
.orpit-topo-cheio #content,
.orpit-topo-cheio .content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.orpit-topo-cheio .page-title,
.orpit-topo-cheio .dt-breadcrumbs-wrapper,
.orpit-topo-cheio #fancy-header {
	display: none !important;
}

/*
 * Faixa de título do The7 nas telas do plugin.
 *
 * O arquivo de veículos e as páginas de marca não têm onde desligar isso no
 * painel, e o que aparecia era "Arquivo: Toyota". Some em todas elas.
 */
.orpit-sem-titulo .page-title,
.orpit-sem-titulo .dt-breadcrumbs-wrapper,
.orpit-sem-titulo #fancy-header,
.orpit-sem-titulo .page-title-head {
	display: none !important;
}

.orpit-sem-titulo #main,
.orpit-sem-titulo .wf-container-main {
	padding-top: 0 !important;
}

/*
 * A capa não tem margem própria — quem a posiciona é o bloco "Capa por baixo
 * do menu", mais abaixo neste arquivo.
 *
 * Aqui existia um `margin-top: 0 !important` com :first-child, de quando a
 * ideia era a capa encostar embaixo do cabeçalho. Com o pseudo-seletor ele
 * pesava mais que a regra nova e travava a capa no lugar.
 */
.orpit-topo-cheio .orpit-hero:first-child {
	margin-top: 0 !important;
}

/* O que vem depois da capa volta a respirar. */
.orpit-tema .orpitcar-hero + .orpit-section {
	padding-top: var(--orpit-section);
}

/* =======================================================================
 * Ícones do menu com vida no hover
 *
 * Cada ícone se comporta conforme o que ele é: a etiqueta balança pendurada
 * pelo furo, a lupa aumenta e varre a área, o alfinete cai do céu e quica, o
 * telefone toca e o carro sai de cena e volta pelo outro lado.
 * ==================================================================== */

.orpit-tema .main-nav > li[class*="orpit-icone-"] > a .menu-text::before,
.orpit-tema .mobile-main-nav > li[class*="orpit-icone-"] > a .menu-text::before {
	transform: none;
	transform-origin: center;
	will-change: transform;
}

/* Etiqueta pendurada: o furo fica no canto superior esquerdo. */
.orpit-tema .main-nav > li.orpit-icone-estoque > a .menu-text::before,
.orpit-tema .mobile-main-nav > li.orpit-icone-estoque > a .menu-text::before {
	transform-origin: 20% 20%;
}

@keyframes orpit-balanca {
	0%, 100% { transform: rotate(0deg); }
	18%      { transform: rotate(-17deg); }
	38%      { transform: rotate(12deg); }
	58%      { transform: rotate(-8deg); }
	78%      { transform: rotate(4deg); }
}

@keyframes orpit-lupa {
	0%, 100% { transform: scale(1) translate(0, 0); }
	22%      { transform: scale(1.28) translate(-13%, -9%); }
	48%      { transform: scale(1.28) translate(11%, -4%); }
	72%      { transform: scale(1.22) translate(4%, 8%); }
	88%      { transform: scale(1.12) translate(-4%, 2%); }
}

@keyframes orpit-cai-do-ceu {
	0%   { transform: translateY(-110%) scale(.9); opacity: 0; }
	40%  { transform: translateY(0) scale(1); opacity: 1; }
	55%  { transform: translateY(-26%) scale(1); }
	70%  { transform: translateY(0) scaleY(.88) scaleX(1.12); }
	84%  { transform: translateY(-9%) scale(1); }
	100% { transform: translateY(0) scale(1); }
}

@keyframes orpit-toca {
	0%, 72%, 100%    { transform: rotate(0deg); }
	8%, 26%, 44%     { transform: rotate(-15deg); }
	17%, 35%, 53%    { transform: rotate(15deg); }
}

@keyframes orpit-carro-vai-volta {
	0%        { transform: translateX(0); opacity: 1; }
	32%       { transform: translateX(210%); opacity: 0; }
	33%       { transform: translateX(-210%); opacity: 0; }
	68%, 100% { transform: translateX(0); opacity: 1; }
}

@keyframes orpit-raio {
	0%, 100%    { transform: scale(1); opacity: 1; }
	25%, 65%    { transform: scale(1.18); opacity: .35; }
	45%, 85%    { transform: scale(1.05); opacity: 1; }
}

@keyframes orpit-batida {
	0%, 100%  { transform: scale(1); }
	20%       { transform: scale(1.3); }
	38%       { transform: scale(1); }
	56%       { transform: scale(1.22); }
	74%       { transform: scale(1); }
}

@keyframes orpit-vira {
	0%   { transform: rotateY(0deg); }
	100% { transform: rotateY(360deg); }
}

@keyframes orpit-pulinho {
	0%, 100% { transform: translateY(0); }
	35%      { transform: translateY(-32%); }
	60%      { transform: translateY(0) scaleY(.9); }
	80%      { transform: translateY(-10%) scaleY(1); }
}

.orpit-tema .main-nav > li.orpit-icone-estoque:hover > a .menu-text::before,
.orpit-tema .main-nav > li.orpit-icone-estoque:focus-within > a .menu-text::before,
.orpit-tema .mobile-main-nav > li.orpit-icone-estoque:hover > a .menu-text::before {
	animation: orpit-balanca 1s ease-in-out;
}

.orpit-tema .main-nav > li.orpit-icone-busca:hover > a .menu-text::before,
.orpit-tema .main-nav > li.orpit-icone-busca:focus-within > a .menu-text::before,
.orpit-tema .mobile-main-nav > li.orpit-icone-busca:hover > a .menu-text::before {
	animation: orpit-lupa 1.25s ease-in-out;
}

.orpit-tema .main-nav > li.orpit-icone-local:hover > a .menu-text::before,
.orpit-tema .main-nav > li.orpit-icone-local:focus-within > a .menu-text::before,
.orpit-tema .mobile-main-nav > li.orpit-icone-local:hover > a .menu-text::before {
	animation: orpit-cai-do-ceu .95s cubic-bezier(.3, 1.2, .5, 1);
}

.orpit-tema .main-nav > li.orpit-icone-contato:hover > a .menu-text::before,
.orpit-tema .main-nav > li.orpit-icone-contato:focus-within > a .menu-text::before,
.orpit-tema .mobile-main-nav > li.orpit-icone-contato:hover > a .menu-text::before {
	animation: orpit-toca 1s ease-in-out;
}

.orpit-tema .main-nav > li.orpit-icone-carro:hover > a .menu-text::before,
.orpit-tema .main-nav > li.orpit-icone-carro:focus-within > a .menu-text::before,
.orpit-tema .mobile-main-nav > li.orpit-icone-carro:hover > a .menu-text::before {
	animation: orpit-carro-vai-volta 1.1s cubic-bezier(.5, 0, .3, 1);
}

.orpit-tema .main-nav > li.orpit-icone-oferta:hover > a .menu-text::before,
.orpit-tema .mobile-main-nav > li.orpit-icone-oferta:hover > a .menu-text::before {
	animation: orpit-raio .9s ease-in-out;
}

.orpit-tema .main-nav > li.orpit-icone-favorito:hover > a .menu-text::before,
.orpit-tema .mobile-main-nav > li.orpit-icone-favorito:hover > a .menu-text::before {
	animation: orpit-batida .95s ease-in-out;
}

.orpit-tema .main-nav > li.orpit-icone-financiamento:hover > a .menu-text::before,
.orpit-tema .mobile-main-nav > li.orpit-icone-financiamento:hover > a .menu-text::before {
	animation: orpit-vira .85s ease-in-out;
}

.orpit-tema .main-nav > li.orpit-icone-sobre:hover > a .menu-text::before,
.orpit-tema .mobile-main-nav > li.orpit-icone-sobre:hover > a .menu-text::before {
	animation: orpit-vira .85s ease-in-out;
}

.orpit-tema .main-nav > li.orpit-icone-home:hover > a .menu-text::before,
.orpit-tema .mobile-main-nav > li.orpit-icone-home:hover > a .menu-text::before {
	animation: orpit-pulinho .8s ease-in-out;
}

/* O carro dentro do botão amarelo também anda. */
.orpit-tema .main-nav > li.orpit-menu-btn:hover > a .menu-text::before {
	animation: orpit-carro-vai-volta 1.1s cubic-bezier(.5, 0, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
	.orpit-tema .main-nav > li > a .menu-text::before,
	.orpit-tema .mobile-main-nav > li > a .menu-text::before {
		animation: none !important;
	}
}

/* =======================================================================
 * 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.orpit-tema .masthead::after,
body.orpit-tema .masthead::before,
body.orpit-tema .masthead.shadow-decoration::after,
body.orpit-tema .masthead .shadow-decoration {
	display: none !important;
	height: 0 !important;
}

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

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

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

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

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

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

/* =======================================================================
 * Redes sociais no fim do menu
 * ==================================================================== */

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

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

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

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

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

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

/* No menu do celular elas ficam em linha, centralizadas. */
.orpit-tema .mobile-main-nav > li.orpit-menu-redes .orpit-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;
}

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

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

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

/* =======================================================================
 * Textura de fundo
 *
 * Uma malha de pontinhos que desliza devagar atrás do conteúdo. Começa logo
 * abaixo da capa — que é opaca e a esconde — e vai sumindo até o rodapé, só
 * para o fundo branco não ficar chapado de cima a baixo.
 * ==================================================================== */

.orpit-tema #main .content {
	position: relative;
}

.orpit-tema #main .content::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle at center, rgba(17, 17, 17, .07) 1.4px, transparent 1.5px),
		radial-gradient(circle at center, color-mix(in srgb, var(--orpit-primary) 40%, transparent) 2px, transparent 2.2px);
	background-size: 26px 26px, 132px 132px;
	background-position: 0 0, 18px 22px;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .85) 34%, rgba(0, 0, 0, .4) 68%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .85) 34%, rgba(0, 0, 0, .4) 68%, transparent 100%);
	animation: orpit-textura 42s linear infinite;
}

.orpit-tema #main .content > * {
	position: relative;
	z-index: 1;
}

@keyframes orpit-textura {
	from { background-position: 0 0, 18px 22px; }
	to   { background-position: 26px 26px, -114px 154px; }
}

/*
 * As faixas claras ficam translúcidas para a textura aparecer. As escuras
 * continuam sólidas: ali o fundo já tem peso.
 */
.orpit-tema .orpit-section-branco {
	background: transparent !important;
}

.orpit-tema .orpit-section-claro {
	background: color-mix(in srgb, var(--orpit-bg) 86%, transparent) !important;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.orpit-tema #main .content::before {
		background-image: radial-gradient(circle at center, rgba(17, 17, 17, .07) 1.4px, transparent 1.5px);
		background-size: 26px 26px;
	}

	.orpit-tema .orpit-section-claro {
		background: var(--orpit-bg) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.orpit-tema #main .content::before {
		animation: none;
	}
}

/* =======================================================================
 * Cabeçalho de faixa com link à direita
 * ==================================================================== */

.orpit-head-entre {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

.orpit-head-entre h2 {
	margin-bottom: 0;
}

.orpit-link-seta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 4px;
	font-size: 14px;
	font-weight: 700;
	color: var(--orpit-dark);
	text-decoration: none;
	white-space: nowrap;
	transition: color .18s ease, gap .18s ease;
}

.orpit-link-seta::after {
	content: "→";
	transition: transform .18s ease;
}

.orpit-link-seta:hover {
	color: var(--orpit-primary);
	gap: 10px;
}

.orpit-link-seta:hover::after {
	transform: translateX(3px);
}

/* A faixa das marcas não corta o carrossel nas laterais. */
.orpit-section-marcas .orpit-container {
	overflow: visible;
}

@media (max-width: 600px) {
	.orpit-head-entre {
		align-items: flex-start;
	}
}

/* =======================================================================
 * 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.
 */
.orpit-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(--orpit-mapa-sobe, 80px));
	margin-bottom: 44px;
	/* Claro, para destacar do rodapé escuro em volta. */
	background: var(--orpit-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(--orpit-radius);
	overflow: hidden;
}

.orpit-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.
 */
.orpit-tema .orpit-rodape-mapa-texto h3 {
	margin: 0 0 8px;
	font-size: 16px;
	color: var(--orpit-dark) !important;
}

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

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

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

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

.orpit-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) {
	.orpit-rodape-mapa-box {
		grid-template-columns: minmax(0, 1fr);
	}

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

/* =======================================================================
 * Foto de destaque do veículo, de ponta a ponta
 *
 * O The7 mostra a imagem destacada no topo do anúncio, dentro do container
 * estreito. Aqui ela vira uma faixa cheia, encostada no cabeçalho — é o
 * "hero" da página do veículo. A galeria, logo abaixo, já abre na segunda
 * foto para não repetir esta.
 *
 * Os seletores cobrem as variações do The7; o que não casar simplesmente
 * não faz nada.
 * ==================================================================== */

body.single-orpit_car .post-thumbnail,
body.single-orpit_car .post-thumbnail-rollover,
body.single-orpit_car .single-post-thumbnail,
body.single-orpit_car article > .post-thumbnail-wrap {
	position: relative;
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 clamp(20px, 3vw, 38px) !important;
	border-radius: 0 !important;
	overflow: hidden;
}

/*
 * Faixa baixa de propósito.
 *
 * A foto do anúncio raramente tem resolução para cobrir a tela inteira; a
 * 250px ela é recortada em vez de esticada, e o que aparece é a parte nítida.
 */
body.single-orpit_car .post-thumbnail img,
body.single-orpit_car .post-thumbnail-rollover img,
body.single-orpit_car .single-post-thumbnail img {
	width: 100% !important;
	max-width: none !important;
	height: 250px !important;
	object-fit: cover !important;
	object-position: center 45% !important;
	border-radius: 0 !important;
	display: block;
}

/*
 * Trama por cima, para disfarçar o que sobrar de pixel.
 *
 * Linhas diagonais finíssimas quebram os blocos de compressão e a serrilha
 * da imagem ampliada — o olho lê a textura e para de procurar o defeito.
 * O gradiente nas pontas costura a faixa com o cabeçalho e com o conteúdo.
 */
body.single-orpit_car .post-thumbnail::after,
body.single-orpit_car .single-post-thumbnail::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		repeating-linear-gradient(
			135deg,
			rgba(255, 255, 255, .05) 0px,
			rgba(255, 255, 255, .05) 1px,
			transparent 1px,
			transparent 3px
		),
		repeating-linear-gradient(
			45deg,
			rgba(10, 10, 12, .06) 0px,
			rgba(10, 10, 12, .06) 1px,
			transparent 1px,
			transparent 3px
		),
		linear-gradient(to bottom, rgba(10, 10, 12, .34) 0%, transparent 34%, transparent 62%, rgba(10, 10, 12, .28) 100%);
}

/* A faixa de conteúdo do anúncio acompanha a largura fluida do plugin. */
body.single-orpit_car #main .wf-wrap,
body.post-type-archive-orpit_car #main .wf-wrap,
body.tax-oc_marca #main .wf-wrap {
	width: 100% !important;
	max-width: 100% !important;
	padding-inline: 0 !important;
}

/* A listagem começa abaixo do cabeçalho fixo, com respiro suficiente para
 * separar os filtros e os resultados do menu. */
body.post-type-archive-orpit_car .orpitcar-estoque,
body.tax-oc_marca .orpitcar-estoque {
	margin-block-start: clamp(22px, 3vw, 36px);
}


/* =======================================================================
 * Capa por baixo do menu
 *
 * Nas páginas que abrem com a capa, o cabeçalho deixa de ocupar espaço e
 * passa a flutuar em cima da foto, em vidro escuro. Ao rolar, ele vira o
 * vidro claro de sempre — porque aí o fundo atrás dele é branco.
 *
 * A capa sobe com margem negativa do tamanho exato do cabeçalho, e cresce o
 * mesmo tanto para não encolher: assim funciona independente de como o The7
 * reserva o espaço, que muda conforme o tipo de cabeçalho escolhido.
 * ==================================================================== */

/*
 * A capa sobe exatamente a altura medida do cabeçalho.
 *
 * --orpit-header-real vem do theme.js, que mede a barra de verdade. A minha
 * variável de configuração (--orpit-header-altura) serve de reserva para o
 * caso do JavaScript não rodar, mas ela é só a intenção: o The7 costuma
 * desenhar o cabeçalho mais alto do que foi pedido.
 */
.orpit-topo-cheio .orpitcar-hero {
	margin-top: calc(-1 * var(--orpit-header-real, 90px)) !important;
	min-height: calc(var(--oc-hero-altura, clamp(300px, 34vw, 440px)) + var(--orpit-header-real, 90px)) !important;
}

/* O conteúdo do slide desce, para não nascer embaixo do menu. */
.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-conteudo {
	padding-top: var(--orpit-header-real, 90px);
}

/* O cabeçalho flutua sobre a foto. */
.orpit-topo-cheio .masthead {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}

/* Vidro escuro enquanto está sobre a foto. */
body.orpit-tema.orpit-topo-cheio .masthead:not(.sticky-on),
body.orpit-tema.orpit-topo-cheio .masthead.sticky-off {
	background-color: rgba(10, 10, 12, .26) !important;
	background-image: none !important;
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	backdrop-filter: blur(18px) saturate(170%);
	border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
	box-shadow: none !important;
}

/* Sobre a foto, o texto do menu é claro. */
body.orpit-tema.orpit-topo-cheio .masthead:not(.sticky-on) .main-nav > li:not(.orpit-menu-btn) > a,
body.orpit-tema.orpit-topo-cheio .masthead:not(.sticky-on) .main-nav > li:not(.orpit-menu-btn) > a .menu-text,
body.orpit-tema.orpit-topo-cheio .masthead:not(.sticky-on) .mini-nav > li > a,
body.orpit-tema.orpit-topo-cheio .masthead:not(.sticky-on) .dt-mobile-menu-icon .lines,
body.orpit-tema.orpit-topo-cheio .masthead:not(.sticky-on) .orpit-menu-rede {
	color: #fff !important;
}

body.orpit-tema.orpit-topo-cheio .masthead:not(.sticky-on) .main-nav > li:not(.orpit-menu-btn) > a:hover .menu-text {
	color: var(--orpit-primary) !important;
}

body.orpit-tema.orpit-topo-cheio .masthead:not(.sticky-on) .orpit-menu-redes-lista {
	border-left-color: rgba(255, 255, 255, .22);
}

/* A sombra por baixo do texto ajuda quando a foto é clara. */
body.orpit-tema.orpit-topo-cheio .masthead:not(.sticky-on) .main-nav > li > a .menu-text {
	text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

/*
 * Rolou: volta o vidro claro. As regras de cor escura do bloco principal já
 * valem aqui, porque elas não têm o :not(.sticky-on).
 */
body.orpit-tema.orpit-topo-cheio.orpit-rolou .masthead.sticky-on {
	position: fixed !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.orpit-tema.orpit-topo-cheio .masthead:not(.sticky-on) {
		background-color: rgba(10, 10, 12, .62) !important;
	}
}

@media (prefers-reduced-transparency: reduce) {
	body.orpit-tema.orpit-topo-cheio .masthead:not(.sticky-on) {
		background-color: rgba(10, 10, 12, .72) !important;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

@media (max-width: 768px) {
	.orpit-topo-cheio .orpitcar-hero {
		min-height: calc(340px + var(--orpit-header-real, 58px)) !important;
	}
}

/* =======================================================================
 * Ajustes de ritmo da home
 * ==================================================================== */

/* O plugin usa esta medida para alinhar o carrossel de marcas com o título. */
.orpit-tema .orpitcar,
.orpit-tema .orpitcar-marcas-slider {
	--oc-largura: var(--orpit-width);
}

/* Cabeçalho de faixa com link: o link vai até a borda do container. */
.orpit-head-entre {
	max-width: none;
	width: 100%;
}

/*
 * O h1 da home é uma linha de apoio, não um letreiro.
 *
 * O seletor leva o .orpit-tema na frente de propósito: existe um
 * `.orpit-tema h1` com o tamanho grande dos títulos de seção, e sem esse peso
 * extra ele vencia esta regra e o h1 saía do tamanho de uma manchete.
 */
.orpit-tema .orpit-h1-busca {
	margin: 0 0 12px;
	/* 2.1rem no desktop; encolhe no celular para não virar três linhas. */
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--orpit-gray);
}

.orpit-tema .orpit-h1-busca::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin-top: 10px;
	border-radius: 3px;
	background: var(--orpit-primary);
}

/* A busca vem logo depois do carrossel de marcas: sem respiro sobrando. */
.orpit-tema .orpit-section-marcas + .orpit-section {
	padding-top: clamp(10px, 1.4vw, 20px) !important;
}

/* A busca vem logo abaixo da capa: sem o respiro cheio entre as duas. */
.orpit-topo-cheio .orpitcar-hero + .orpit-section,
.orpit-tema .orpitcar-hero + .orpit-section {
	padding-top: clamp(18px, 2.4vw, 32px) !important;
}

/* A faixa das marcas também encosta, já que o carrossel tem folga própria. */
.orpit-section-marcas {
	padding-top: clamp(20px, 2.6vw, 36px) !important;
	padding-bottom: clamp(20px, 2.6vw, 36px) !important;
}

.orpit-section-marcas .orpit-head {
	margin-bottom: 22px;
}

/* A faixa das marcas não tem título nem link: só os logotipos. */
/* E ela encosta na capa. */
.orpit-section-marcas {
	padding-top: 10px !important;
	padding-bottom: clamp(8px, 1.2vw, 16px) !important;
}

/* =======================================================================
 * Convite para avaliar o usado
 *
 * Faixa de tela cheia com foto ao fundo e paralaxe. O efeito é feito com
 * background-attachment: fixed, que é a versão que não custa JavaScript —
 * e que fica desligada no celular, onde o iOS não a implementa direito.
 * ==================================================================== */

.orpit-convite {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	padding-block: clamp(64px, 9vw, 130px);
	background: var(--orpit-dark);
	color: #fff;
	text-align: center;
}

/*
 * O fundo é maior que a faixa e o theme.js o desloca conforme a rolagem.
 *
 * Antes era background-attachment: fixed, que o iOS ignora e o Android
 * resolve repintando a tela inteira. Mover a camada com transform roda na
 * GPU e funciona igual em todo lugar.
 */
.orpit-convite-fundo {
	position: absolute;
	left: 0;
	right: 0;
	top: -18%;
	bottom: -18%;
	z-index: -2;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	will-change: transform;
}

/* Escurece o suficiente para o texto branco ficar legível em qualquer foto. */
.orpit-convite::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to right, rgba(10, 10, 12, .72) 0%, rgba(10, 10, 12, .64) 55%, rgba(10, 10, 12, .52) 100%);
}

/*
 * Scanlines.
 *
 * Linhas finas descendo devagar sobre a foto. O truque para não pesar é
 * animar só o background-position de um gradiente repetido — o navegador
 * resolve na GPU e não repinta o conteúdo.
 */
.orpit-convite::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		repeating-linear-gradient(
			to bottom,
			rgba(255, 255, 255, .055) 0px,
			rgba(255, 255, 255, .055) 1px,
			transparent 1px,
			transparent 4px
		),
		repeating-linear-gradient(
			to bottom,
			color-mix(in srgb, var(--orpit-primary) 14%, transparent) 0px,
			color-mix(in srgb, var(--orpit-primary) 14%, transparent) 1px,
			transparent 1px,
			transparent 22px
		);
	background-size: 100% 4px, 100% 22px;
	animation: orpit-scanlines 5.5s linear infinite;
	mix-blend-mode: overlay;
}

@keyframes orpit-scanlines {
	from { background-position: 0 0, 0 0; }
	to   { background-position: 0 4px, 0 22px; }
}

/* Brilho horizontal que atravessa de tempos em tempos, tipo varredura. */
.orpit-convite-varredura {
	position: absolute;
	left: 0;
	right: 0;
	top: -20%;
	height: 26%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		transparent,
		color-mix(in srgb, var(--orpit-primary) 22%, transparent),
		transparent
	);
	animation: orpit-varre 7s ease-in-out infinite;
}

@keyframes orpit-varre {
	0%, 100% { transform: translateY(0); opacity: 0; }
	10%      { opacity: .85; }
	60%      { opacity: .85; }
	70%, 100% { transform: translateY(460%); opacity: 0; }
}

.orpit-convite-interno {
	position: relative;
	max-width: 780px;
}

.orpit-convite-selo {
	display: inline-block;
	margin-bottom: 16px;
	padding: 7px 16px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--orpit-primary) 20%, transparent);
	border: 1px solid color-mix(in srgb, var(--orpit-primary) 45%, transparent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--orpit-primary);
}

.orpit-tema .orpit-convite h2 {
	margin: 0 0 14px;
	font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -.02em;
	color: #fff;
}

.orpit-tema .orpit-convite h2 em {
	font-style: normal;
	color: var(--orpit-primary);
}

.orpit-tema .orpit-convite p {
	max-width: 56ch;
	margin: 0 auto 30px;
	font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
	color: rgba(255, 255, 255, .78);
}

.orpit-convite-acoes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.orpit-tema .orpit-convite .orpit-btn-contorno {
	border-color: rgba(255, 255, 255, .42);
	color: #fff;
	background: transparent;
}

.orpit-tema .orpit-convite .orpit-btn-contorno:hover {
	background: #fff;
	border-color: #fff;
	color: var(--orpit-dark);
}

/*
 * No celular o paralaxe sai: o iOS ignora background-attachment: fixed e o
 * Android o resolve repintando a tela inteira a cada rolagem.
 */
@media (prefers-reduced-motion: reduce) {
	.orpit-convite-fundo {
		transform: none !important;
	}

	.orpit-convite::after,
	.orpit-convite-varredura {
		animation: none;
	}
}

/* Navegador sem color-mix: as linhas ficam só brancas, sem o tom da marca. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.orpit-convite::after {
		background-image: repeating-linear-gradient(
			to bottom,
			rgba(255, 255, 255, .06) 0px,
			rgba(255, 255, 255, .06) 1px,
			transparent 1px,
			transparent 4px
		);
		background-size: 100% 4px;
	}

	.orpit-convite-varredura {
		display: none;
	}
}

/* =======================================================================
 * A faixa das marcas sobe por cima da capa
 *
 * Os cartões de logotipo invadem o fim da foto — é o que costura as duas
 * seções em vez de deixar um corte reto.
 *
 * A medida fica numa variável só porque três coisas dependem dela: o quanto
 * a faixa sobe, o quanto o texto da capa desce para não ficar por baixo, e
 * onde param os controles do slider.
 * ==================================================================== */

.orpit-tema {
	--orpit-marcas-sobe: clamp(38px, 4.6vw, 70px);
}

/*
 * Transparente só na faixa que cobre a capa; do resto para baixo é branco.
 *
 * Com o fundo todo transparente, os vãos entre os cartões viravam janelas
 * para a foto da capa — as listras escuras que apareciam entre as marcas.
 */
.orpit-tema .orpit-section-marcas {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * var(--orpit-marcas-sobe)) !important;
	padding-top: 0 !important;
	background: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--orpit-marcas-sobe),
		var(--orpit-white) var(--orpit-marcas-sobe)
	) !important;
}

/*
 * A capa cresce só o que o cabeçalho ocupa por cima dela.
 *
 * Antes eu somava também a subida da faixa de marcas, achando que a margem
 * negativa da seção seguinte encolheria a capa. Não encolhe — margem negativa
 * puxa o vizinho por cima, não corta quem está embaixo. O resultado era uma
 * capa alta demais, sobrando foto atrás dos cartões de marca.
 */
.orpit-topo-cheio .orpitcar-hero {
	min-height: calc(
		var(--oc-hero-altura, clamp(300px, 34vw, 440px))
		+ var(--orpit-header-real, 90px)
	) !important;
}

/* Preço e botões sobem, para não ficarem embaixo dos logotipos. */
.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-conteudo {
	padding-bottom: calc(clamp(28px, 4vw, 56px) + var(--orpit-marcas-sobe)) !important;
}

/* Os controles do slider acompanham. */
.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-controles {
	bottom: calc(clamp(14px, 2.6vw, 30px) + var(--orpit-marcas-sobe));
}

/* As setas do carrossel de marcas ficam acima da foto que passa atrás. */
.orpit-section-marcas .orpitcar-marcas-nav {
	z-index: 4;
}

@media (max-width: 768px) {
	.orpit-tema {
		--orpit-marcas-sobe: 26px;
	}
}

/* =======================================================================
 * Destaques do estoque na home
 * ==================================================================== */

.orpit-section-destaques .orpit-head {
	max-width: none;
	margin-bottom: 16px;
}

.orpit-section-destaques .orpit-eyebrow {
	gap: 9px;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: var(--orpit-dark);
	font-size: 12px;
	letter-spacing: .12em;
}

.orpit-section-destaques .orpit-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--orpit-primary);
}

.orpit-section-destaques .orpitcar-secao-head {
	position: relative;
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--orpit-border);
}

.orpit-section-destaques .orpitcar-secao-head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 58px;
	height: 3px;
	border-radius: 3px;
	background: var(--orpit-primary);
}

.orpit-section-destaques .orpitcar-secao-titulo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
}

.orpit-tema .orpit-section-destaques .orpitcar-section-title {
	margin: 0;
	padding: 0;
	font-size: calc(clamp(2rem, 1.4rem + 2vw, 3rem) * var(--orpit-scale));
	font-weight: 850;
	letter-spacing: -.035em;
	line-height: 1.1;
	color: var(--orpit-dark);
}

.orpit-section-destaques .orpitcar-section-title::before {
	display: none;
}

.orpit-section-destaques .orpitcar-secao-sub {
	max-width: 620px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--orpit-gray);
}

/* =======================================================================
 * "Por que comprar aqui"
 * ==================================================================== */

.orpit-tema .orpit-section-motivos {
	background: var(--orpit-white);
	color: var(--orpit-dark);
}

.orpit-section-motivos .orpit-head p {
	color: var(--orpit-gray);
}

.orpit-motivos {
	gap: 20px;
}

.orpit-motivo {
	position: relative;
	overflow: hidden;
	padding: 0;
	border-radius: var(--orpit-radius);
	background: var(--orpit-white);
	border: 1px solid var(--orpit-border);
	transition: transform .24s ease, border-color .24s ease, background-color .24s ease;
}

.orpit-motivo-imagem {
	position: relative;
	height: 180px;
	overflow: hidden;
	background: var(--orpit-bg);
}

.orpit-motivo-imagem::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 65%, rgba(17, 17, 17, .12));
}

.orpit-motivo-imagem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.orpit-motivo:hover .orpit-motivo-imagem img {
	transform: scale(1.055);
}

.orpit-motivo-conteudo {
	position: relative;
	padding: 26px 26px 28px;
}

.orpit-motivo:hover {
	transform: translateY(-4px);
	background: var(--orpit-white);
	border-color: var(--orpit-primary);
}

/* Ícone e hover acompanham a cor principal definida na identidade da marca. */
.orpit-motivo-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	border-radius: 16px;
	background: var(--orpit-bg);
	background: color-mix(in srgb, var(--orpit-primary) 12%, var(--orpit-white));
	border: 1px solid var(--orpit-border);
	border-color: color-mix(in srgb, var(--orpit-primary) 38%, var(--orpit-white));
	transition: background-color .24s ease, transform .24s ease;
}

.orpit-motivo-icone svg {
	width: 26px;
	height: 26px;
	fill: var(--orpit-primary);
}

.orpit-motivo:hover .orpit-motivo-icone {
	background: var(--orpit-primary);
	transform: rotate(-6deg) scale(1.05);
}

.orpit-motivo:hover .orpit-motivo-icone svg {
	fill: var(--orpit-on-primary);
}

/* O número vira marca d'água no canto, sem disputar com o texto. */
.orpit-motivo-numero {
	position: absolute;
	top: 24px;
	right: 18px;
	font-size: 3.4rem;
	font-weight: 900;
	line-height: 1;
	color: rgba(17, 17, 17, .12);
	pointer-events: none;
	transition: color .24s ease;
}

.orpit-motivo:hover .orpit-motivo-numero {
	color: var(--orpit-primary);
}

.orpit-tema .orpit-motivo h3 {
	margin: 0 0 10px;
	font-size: calc(1.15rem * var(--orpit-scale));
	font-weight: 800;
	color: var(--orpit-dark);
}

.orpit-tema .orpit-motivo p {
	margin: 0;
	font-size: 14.8px;
	line-height: 1.65;
	color: var(--orpit-gray);
}

/* Fio na cor da marca que cresce na base ao passar o mouse. */
.orpit-motivo::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 0;
	background: var(--orpit-primary);
	transition: width .32s cubic-bezier(.16, 1, .3, 1);
}

.orpit-motivo:hover::after {
	width: 100%;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.orpit-motivo-icone {
		background: var(--orpit-bg);
		border-color: var(--orpit-primary);
	}
}

@media (max-width: 600px) {
	.orpit-motivo-imagem {
		height: 170px;
	}

	.orpit-motivo-conteudo {
		padding: 24px 20px;
	}

	.orpit-motivo-icone {
		width: 48px;
		height: 48px;
		margin-bottom: 16px;
	}
}

/* =======================================================================
 * Gaveta de busca
 *
 * Desce por baixo do cabeçalho e empurra o site para baixo. Não cobre a
 * tela como um modal: a pessoa continua vendo onde estava.
 * ==================================================================== */

.orpit-busca-overlay {
	position: fixed;
	top: var(--orpit-header-real, 90px);
	left: 0;
	right: 0;
	z-index: 900;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	background-color: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	backdrop-filter: blur(22px) saturate(180%);
	border-bottom: 1px solid var(--orpit-border);
	box-shadow: 0 18px 44px rgba(17, 17, 17, .14);
	transition:
		max-height .52s cubic-bezier(.16, 1, .3, 1),
		opacity .3s ease,
		visibility 0s linear .52s;
}

body.orpit-busca-aberta .orpit-busca-overlay {
	max-height: calc(100dvh - var(--orpit-header-real, 90px));
	overflow-y: auto;
	opacity: 1;
	visibility: visible;
	transition:
		max-height .52s cubic-bezier(.16, 1, .3, 1),
		opacity .3s ease,
		visibility 0s;
}

.orpit-busca-painel {
	position: relative;
	width: 100%;
	max-width: var(--orpit-width);
	margin-inline: auto;
	padding: 30px 20px 34px;
	box-sizing: border-box;
}

.orpit-busca-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 10px;
}

.orpit-busca-painel .orpit-eyebrow {
	display: inline-flex;
	margin: 0;
}

.orpit-tema .orpit-busca-painel h2 {
	margin: 0 0 22px;
	font-size: clamp(1.25rem, 1.05rem + .8vw, 1.8rem);
	font-weight: 800;
	color: var(--orpit-dark);
}

/* O formulário do plugin entra sem a moldura, que já é a da gaveta. */
.orpit-busca-painel .orpitcar-busca-standalone {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.orpit-busca-painel .orpitcar-busca-standalone .orpitcar-filtros-corpo {
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.orpit-busca-painel .orpitcar-busca-standalone .orpitcar-filtros-campos {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.orpit-busca-painel .orpitcar-busca-standalone .orpitcar-filtros-acoes {
	flex-direction: row;
	justify-content: flex-end;
	width: 100%;
	gap: 10px;
}

.orpit-busca-painel .orpitcar-busca-standalone .orpitcar-filtros-acoes .orpitcar-btn {
	width: auto;
	min-height: 44px;
	padding-inline: 22px;
}

.orpit-busca-fechar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--orpit-border);
	border-radius: 12px;
	background: var(--orpit-white);
	color: var(--orpit-dark);
	box-shadow: 0 4px 14px rgba(17, 17, 17, .06);
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.orpit-busca-fechar svg {
	width: 18px;
	height: 18px;
}

.orpit-busca-fechar:hover {
	background: var(--orpit-primary);
	border-color: var(--orpit-primary);
	color: var(--orpit-on-primary);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(17, 17, 17, .12);
}

.orpit-busca-fechar:focus-visible {
	outline: 2px solid var(--orpit-primary);
	outline-offset: 3px;
}

.orpit-busca-atalhos {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	font-size: 13.5px;
}

.orpit-busca-atalhos > span {
	flex: none;
	font-weight: 700;
	color: var(--orpit-gray);
}

.orpit-busca-marcas-trilho {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	gap: 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.orpit-busca-marcas-trilho::-webkit-scrollbar {
	display: none;
}

.orpit-busca-marcas-trilho a {
	flex: none;
	padding: 6px 13px;
	border: 1px solid var(--orpit-border);
	border-radius: 999px;
	color: var(--orpit-dark);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.orpit-busca-marcas-trilho a:hover,
.orpit-busca-marcas-trilho a:focus-visible {
	background: var(--orpit-primary);
	border-color: var(--orpit-primary);
	color: var(--orpit-on-primary);
}

.orpit-busca-atalhos > button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--orpit-border);
	border-radius: 50%;
	background: var(--orpit-white);
	color: var(--orpit-dark);
	font-size: 23px;
	line-height: 1;
	cursor: pointer;
}

.orpit-busca-atalhos > button:hover:not(:disabled) {
	background: var(--orpit-primary);
	border-color: var(--orpit-primary);
	color: var(--orpit-on-primary);
}

.orpit-busca-atalhos > button:disabled {
	opacity: .35;
	cursor: default;
}

.orpit-busca-atalhos > button[hidden] {
	display: none;
}

@media (max-width: 600px) {
	.orpit-busca-atalhos {
		flex-wrap: wrap;
	}

	.orpit-busca-atalhos > span {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.orpit-busca-marcas-trilho {
		scroll-behavior: auto;
	}
}

/*
 * O empurrão.
 *
 * Margem e não transform: um transform no #main criaria um novo bloco de
 * contenção e tiraria do lugar tudo que é position: fixed dentro dele — a
 * barra do comparador e o botão do WhatsApp, por exemplo.
 */
.orpit-empurravel {
	transition: margin-top .52s cubic-bezier(.16, 1, .3, 1);
}

body.orpit-busca-aberta .orpit-empurravel {
	margin-top: var(--orpit-busca-altura, 260px);
}

/* Enquanto a gaveta está aberta o item do menu fica aceso. */
body.orpit-busca-aberta .orpit-menu-busca > a .menu-text {
	color: var(--orpit-primary) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.orpit-busca-overlay {
		background-color: var(--orpit-white);
	}
}

@media (prefers-reduced-motion: reduce) {
	.orpit-busca-overlay,
	.orpit-empurravel {
		transition: none;
	}
}

@media (max-width: 768px) {
	.orpit-busca-painel {
		padding: 22px 16px 26px;
	}

	.orpit-busca-painel .orpitcar-busca-standalone .orpitcar-filtros-campos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.orpit-busca-painel .orpitcar-busca-standalone,
	.orpit-busca-painel .orpitcar-filtros-corpo,
	.orpit-busca-painel .orpitcar-filtros-campos,
	.orpit-busca-painel .orpitcar-filtro,
	.orpit-busca-painel .orpitcar-filtro > select,
	.orpit-busca-painel .orpitcar-filtro > input,
	.orpit-busca-painel .orpitcar-filtro > .orpitcar-slider {
		box-sizing: border-box;
		min-width: 0;
		max-width: 100%;
	}

	.orpit-busca-painel .orpitcar-busca-standalone,
	.orpit-busca-painel .orpitcar-filtros-corpo,
	.orpit-busca-painel .orpitcar-filtros-campos,
	.orpit-busca-painel .orpitcar-filtro > select,
	.orpit-busca-painel .orpitcar-filtro > input,
	.orpit-busca-painel .orpitcar-filtro > .orpitcar-slider {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.orpit-busca-painel .orpitcar-busca-standalone .orpitcar-filtros-campos {
		grid-template-columns: minmax(0, 1fr);
	}

	.orpit-busca-painel .orpitcar-busca-standalone .orpitcar-filtros-acoes {
		justify-content: space-between;
	}

	.orpit-busca-painel .orpitcar-busca-standalone .orpitcar-filtros-acoes .orpitcar-btn {
		flex: 1 1 0;
		padding-inline: 12px;
	}
}

/* =======================================================================
 * 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.
 * ==================================================================== */

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

body.orpit-tema .masthead.sticky-on,
body.orpit-tema.orpit-rolou .masthead.fixed-masthead.sticky-on {
	top: var(--orpit-header-folga) !important;
	left: 0 !important;
	right: 0 !important;
	width: min(var(--orpit-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.orpit-tema .masthead.sticky-on .header-bar,
body.orpit-tema .masthead.sticky-on .branding,
body.orpit-tema .masthead.sticky-on .navigation-holder {
	height: var(--orpit-header-ilha) !important;
	min-height: 0 !important;
}

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

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

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

body.orpit-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.orpit-tema .masthead.sticky-on .main-nav > li.orpit-menu-btn > a {
	height: 44px !important;
	padding-block: 0 !important;
}

body.orpit-tema .masthead.sticky-on .orpit-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.orpit-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.orpit-tema .masthead .header-bar,
body.orpit-tema .masthead .branding,
body.orpit-tema .masthead .navigation-holder,
body.orpit-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.orpit-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.orpit-tema.orpit-topo-cheio .masthead.sticky-on .main-nav > li:not(.orpit-menu-btn) > a .menu-text {
	color: var(--orpit-dark) !important;
	text-shadow: none;
}

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

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

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

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

/* =======================================================================
 * Barra de rolagem e seleção de texto na cor do cliente
 *
 * As duas saem das variáveis da marca, então trocam junto com o cliente sem
 * ninguém tocar em código.
 *
 * ::selection precisa vir sozinha na regra: navegador que não entende um
 * seletor de uma lista descarta a regra inteira, e agrupá-la com a versão
 * -moz- derrubaria as duas.
 * ==================================================================== */

::selection {
	background: var(--orpit-primary, #FFC400);
	color: var(--orpit-on-primary, #111);
	text-shadow: none;
}

::-moz-selection {
	background: var(--orpit-primary, #FFC400);
	color: var(--orpit-on-primary, #111);
	text-shadow: none;
}

/* Seleção sobre fundo escuro: o amarelo sozinho sumiria. */
.orpit-section-escuro ::selection,
.orpit-convite ::selection,
.orpit-rodape ::selection,
.orpitcar-hero ::selection {
	background: var(--orpit-primary, #FFC400);
	color: var(--orpit-dark, #1A1A1A);
}

/*
 * A barra da janela é do documento, não do body.
 *
 * Eu tinha escrito `.orpit-tema ::-webkit-scrollbar`, que é um seletor de
 * descendente: pegava a barra de caixas internas, mas nunca a da janela —
 * essa pertence ao elemento raiz. Por isso nada mudava na lateral da tela.
 */
html,
:root {
	scrollbar-width: thin;
	scrollbar-color: var(--orpit-primary, #FFC400) rgba(17, 17, 17, .1);
}

::-webkit-scrollbar {
	width: 11px;
	height: 11px;
}

::-webkit-scrollbar-track {
	background: rgba(17, 17, 17, .07);
}

::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: var(--orpit-primary, #FFC400);
	/* A borda transparente afina o polegar sem estreitar a área de clique. */
	border: 3px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--orpit-dark, #1A1A1A);
	background-clip: content-box;
}

::-webkit-scrollbar-corner {
	background: transparent;
}

/* Dentro das faixas escuras o trilho não pode ser mais escuro que o fundo. */
.orpit-section-escuro ::-webkit-scrollbar-track,
.orpit-rodape ::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, .08);
}

/* O carrossel de marcas esconde a própria barra de propósito. */
.orpitcar-marcas-trilho::-webkit-scrollbar {
	display: none;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	html,
	:root {
		scrollbar-color: var(--orpit-primary) rgba(17, 17, 17, .12);
	}

	::-webkit-scrollbar-track {
		background: rgba(17, 17, 17, .07);
	}
}

/* =======================================================================
 * Hover das marcas na cor do cliente
 *
 * O The7 pinta todo link com o azul do tema ao passar o mouse, e ele vencia
 * o do plugin dentro do carrossel.
 * ==================================================================== */

.orpit-tema .orpitcar-marca-item:hover .orpitcar-marca-nome,
.orpit-tema .orpitcar-marca-item:focus-visible .orpitcar-marca-nome,
.orpit-tema .orpitcar-marca-item:hover,
.orpit-tema .orpitcar-marca-tile:hover .orpitcar-marca-tile-nome {
	color: var(--orpit-primary) !important;
}

.orpit-tema .orpitcar-marca-item:hover .orpitcar-marca-count {
	color: var(--orpit-gray) !important;
}

/* =======================================================================
 * Marca-texto nos títulos
 *
 * O traço é um gradiente sólido no fundo do próprio texto, com a largura
 * controlada por --orpit-marca. Ele mora atrás das letras, então não muda
 * nada no fluxo — o título não pula de lugar enquanto o traço cresce.
 * ==================================================================== */

.orpit-marca-texto {
	display: inline;
	background-image: linear-gradient(var(--orpit-primary), var(--orpit-primary));
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: var(--orpit-marca, 0%) 72%;
	padding-inline: 4px;
	margin-inline: -4px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* =======================================================================
 * Polimento da experiência da home: capa, busca e estoque
 * ==================================================================== */

/* A capa continua escura o bastante para manter o texto legível, mas deixa
 * aparecer melhor a foto do veículo. */
.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-conteudo {
	background:
		linear-gradient(to right, rgba(12, 12, 14, .78) 0%, rgba(12, 12, 14, .56) 38%, rgba(12, 12, 14, .08) 78%, transparent 100%),
		linear-gradient(to top, rgba(12, 12, 14, .68) 0%, transparent 58%) !important;
}

.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-interno {
	max-width: var(--orpit-width, 1240px);
}

.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-controles {
	right: clamp(20px, 4vw, 52px);
	bottom: calc(clamp(22px, 3vw, 38px) + clamp(16px, 2vw, 24px));
	background: rgba(17, 17, 17, .56);
	border-color: rgba(255, 255, 255, .24);
}

/* Busca da home em um painel destacado e fácil de identificar. */
.orpit-tema .orpit-section-busca-home {
	padding-top: clamp(28px, 4vw, 52px) !important;
	padding-bottom: clamp(40px, 5vw, 64px) !important;
}

.orpit-tema .orpit-section-busca-home .orpit-h1-busca {
	margin-bottom: 18px;
	color: var(--orpit-dark);
	font-size: clamp(1.65rem, 1.3rem + 1.7vw, 2.35rem);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.15;
}

.orpit-tema .orpit-section-busca-home .orpit-h1-busca::after {
	width: 48px;
	height: 4px;
	margin-top: 12px;
}

.orpit-tema .orpit-section-busca-home .orpitcar-busca-standalone {
	padding: clamp(18px, 2.4vw, 30px);
	border: 1px solid var(--orpit-border);
	border-radius: var(--orpit-radius-lg);
	background: var(--orpit-white);
	box-shadow: 0 16px 48px rgba(17, 17, 17, .07);
}

/* Mantém rótulos e controles na mesma linha visual na busca da página inicial. */
.orpit-tema .orpit-section-busca-home .orpitcar-filtros-campos {
	align-items: stretch;
	column-gap: 16px;
	row-gap: 16px;
}

.orpit-tema .orpit-section-busca-home .orpitcar-filtro {
	min-width: 0;
}

.orpit-tema .orpit-section-busca-home .orpitcar-filtro-label {
	min-height: 16px;
	margin-bottom: 8px;
	line-height: 16px;
}

.orpit-tema .orpit-section-busca-home .orpitcar-filtro > select,
.orpit-tema .orpit-section-busca-home .orpitcar-filtro > .orpitcar-input-busca {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
}

.orpit-tema .orpit-section-busca-home .orpitcar-filtro > select {
	height: 48px;
}

.orpit-tema .orpit-section-busca-home .orpitcar-input-busca input {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding-left: 40px;
}

.orpit-tema .orpit-section-busca-home .orpitcar-input-busca > .orpitcar-icon {
	left: 14px;
	width: 16px;
	height: 16px;
}

.orpit-busca-painel .orpitcar-filtros-campos {
	align-items: stretch;
	column-gap: 16px;
	row-gap: 16px;
}

.orpit-busca-painel .orpitcar-filtro {
	min-width: 0;
}

.orpit-busca-painel .orpitcar-filtro-label {
	min-height: 16px;
	margin-bottom: 8px;
	line-height: 16px;
}

.orpit-busca-painel .orpitcar-filtro > select,
.orpit-busca-painel .orpitcar-filtro > .orpitcar-input-busca {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
}

.orpit-busca-painel .orpitcar-filtro > select,
.orpit-busca-painel .orpitcar-input-busca input {
	height: 48px;
}

.orpit-busca-painel .orpitcar-input-busca input {
	box-sizing: border-box;
	width: 100%;
	padding-left: 40px;
}

.orpit-busca-painel .orpitcar-input-busca > .orpitcar-icon {
	left: 14px;
	width: 16px;
	height: 16px;
}

/* Cards da vitrine: mais espaço entre dados e ações, com movimento discreto. */
.orpit-tema .orpit-section-destaques .orpitcar-card-veiculo {
	border-color: color-mix(in srgb, var(--orpit-border) 78%, var(--orpit-dark));
	border-radius: var(--orpit-radius-lg);
	box-shadow: 0 5px 20px rgba(17, 17, 17, .045);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.orpit-tema .orpit-section-destaques .orpitcar-card-veiculo:hover {
	transform: translateY(-4px);
	border-color: var(--orpit-primary);
	box-shadow: 0 16px 34px rgba(17, 17, 17, .11);
}

.orpit-tema .orpit-section-destaques .orpitcar-card-media {
	aspect-ratio: 16 / 10;
	background: var(--orpit-bg);
}

.orpit-tema .orpit-section-destaques .orpitcar-card-body {
	padding: 18px;
}

.orpit-tema .orpit-section-destaques .orpitcar-card-titulo {
	margin-top: 6px;
	font-size: clamp(1rem, .93rem + .25vw, 1.15rem);
	line-height: 1.3;
}

.orpit-tema .orpit-section-destaques .orpitcar-card-specs {
	gap: 8px 12px;
	margin-bottom: 16px;
	border-color: color-mix(in srgb, var(--orpit-border) 82%, transparent);
}

.orpit-tema .orpit-section-destaques .orpitcar-card-preco strong {
	font-size: clamp(1.2rem, 1.1rem + .35vw, 1.45rem);
	letter-spacing: -.025em;
}

.orpit-tema .orpit-section-destaques .orpitcar-card-footer .orpitcar-btn {
	min-height: 44px;
	padding-inline: 16px;
}

/* A seção de confiança ganha uma hierarquia mais editorial e áreas de toque
 * confortáveis, mantendo as fotos e a paleta já configuradas para a loja. */
.orpit-tema .orpit-section-motivos .orpit-head {
	max-width: 760px;
	margin-bottom: clamp(28px, 4vw, 44px);
}

.orpit-tema .orpit-section-motivos .orpit-head h2 {
	font-size: clamp(1.8rem, 1.4rem + 1.7vw, 2.6rem);
	letter-spacing: -.04em;
}

.orpit-tema .orpit-motivo:hover {
	transform: translateY(-5px);
	border-color: color-mix(in srgb, var(--orpit-primary) 58%, var(--orpit-border));
	box-shadow: 0 18px 40px rgba(17, 17, 17, .09);
}

@media (max-width: 782px) {
	.orpit-rodape-whatsapp-cta {
		display: none !important;
	}

	.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-specs .orpitcar-hero-cambio {
		display: none !important;
	}
	.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-interno {
		text-align: left !important;
	}

	.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-tags,
	.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-specs,
	.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-acoes {
		justify-content: flex-start !important;
		text-align: left !important;
	}

	/* No celular, a foto cobre o hero vertical inteiro. Como a origem é
	 * panorâmica, ela ultrapassa a largura e é cortada pelas laterais. */
	.orpit-topo-cheio .orpitcar-hero {
		height: max(460px, 60vh) !important;
		min-height: max(460px, 60vh) !important;
		max-height: none !important;
	}

	.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-slide::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image: var(--orpit-hero-fundo-foto);
		background-position: center;
		background-repeat: no-repeat;
		background-size: auto 100%;
	}

	.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-foto {
		display: none !important;
	}

	/* O plugin põe o slide ativo no fluxo, abaixo da altura real do hero.
	 * Aqui ele volta a cobrir a seção fixa inteira. */
	.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-slides,
	.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-slide.is-active {
		position: absolute !important;
		inset: 0 !important;
		height: 100% !important;
	}

	.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-conteudo {
		box-sizing: border-box !important;
		height: 100% !important;
		min-height: 0 !important;
		background: linear-gradient(to top, rgba(12, 12, 14, .52) 0%, rgba(12, 12, 14, .22) 45%, rgba(12, 12, 14, .08) 100%) !important;
	}

	.orpit-topo-cheio .orpitcar-hero .orpitcar-hero-controles {
		right: 50%;
		bottom: clamp(32px, 6vw, 38px);
	}

	.orpit-tema .orpit-section-busca-home .orpit-container {
		width: 100%;
		max-width: 100%;
		margin-inline: 0 !important;
		box-sizing: border-box;
		padding-inline: 16px;
	}

	.orpit-tema .orpit-section-busca-home .orpitcar-busca-standalone {
		padding: 18px 14px;
		border-radius: var(--orpit-radius);
	}

	.orpit-tema .orpit-section-destaques .orpitcar-card-body {
		padding: 16px;
	}

	.orpit-tema .orpit-section-destaques .orpitcar-card-footer {
		align-items: flex-start;
		flex-direction: column;
	}

	.orpit-tema .orpit-section-destaques .orpitcar-card-footer .orpitcar-btn {
		width: 100%;
	}
}

/* A barra fixa de estoque/WhatsApp foi removida do mobile. */
@media (max-width: 782px) {
	.orpit-tema .orpit-barra-mobile {
		display: none !important;
	}

	.orpit-tema.orpit-barra-mobile-visivel {
		padding-bottom: 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.orpit-tema .orpit-section-destaques .orpitcar-card-veiculo,
	.orpit-tema .orpit-motivo {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.orpit-marca-texto {
		background-image: none;
	}
}

/* =======================================================================
 * 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.
 * ==================================================================== */

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

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

@media (max-width: 600px) {
	.orpit-rodape-col-navegue .orpit-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.
 * ==================================================================== */

.orpit-tema .dt-mobile-menu-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--orpit-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(--orpit-primary) 42%, transparent);
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

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

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

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

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

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

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

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

.orpit-tema .dt-mobile-menu-icon.active .lines::after,
.orpit-tema .dt-mobile-menu-icon.opened .lines::after,
.orpit-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) {
	.orpit-tema .dt-mobile-menu-icon,
	.orpit-tema .dt-mobile-menu-icon .lines::before,
	.orpit-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)) {
	.orpit-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.
 * ==================================================================== */

.orpit-tema .dt-close-mobile-menu-icon,
.orpit-tema .close-mobile-menu-icon,
.orpit-tema .mobile-menu-close,
.orpit-tema #mobile-menu .close,
.orpit-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(--orpit-primary) !important;
	background-image: none !important;
	color: var(--orpit-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. */
.orpit-tema .dt-close-mobile-menu-icon::before,
.orpit-tema .dt-close-mobile-menu-icon::after,
.orpit-tema .close-mobile-menu-icon::before,
.orpit-tema .close-mobile-menu-icon::after {
	background: var(--orpit-on-primary) !important;
	background-image: none !important;
}

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

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

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

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

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

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

/* =======================================================================
 * Barra fixa do celular: botões separados
 *
 * Eles eram coladinhos, divididos só por um fio de 1px, e o bloco todo ia
 * de ponta a ponta encostado na borda. Agora cada um é um botão inteiro,
 * com folga em volta e cantos próprios — fica claro que são duas ações.
 * ==================================================================== */

.orpit-tema .orpit-barra-mobile {
	gap: 10px !important;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
	background: color-mix(in srgb, var(--orpit-white) 88%, transparent) !important;
	-webkit-backdrop-filter: blur(16px) saturate(170%);
	backdrop-filter: blur(16px) saturate(170%);
	border-top: 1px solid var(--orpit-border);
	box-shadow: 0 -6px 24px rgba(17, 17, 17, .14);
}

.orpit-tema .orpit-barra-mobile a {
	border-radius: 12px;
	padding: 13px 10px;
	font-weight: 700;
	border: 1px solid var(--orpit-border);
	box-shadow: 0 2px 8px rgba(17, 17, 17, .06);
	transition: transform .16s ease, box-shadow .16s ease;
}

.orpit-tema .orpit-barra-mobile a:active {
	transform: scale(.97);
}

/* O destaque não precisa de contorno: a cor já o separa. */
.orpit-tema .orpit-barra-mobile a.is-destaque {
	border-color: transparent;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--orpit-primary) 40%, transparent);
}

/* Botões empilhados dentro do menu do celular também respiram. */
.orpit-tema .mobile-main-nav > li.orpit-menu-btn > a,
.orpit-tema .mobile-main-nav > li.orpit-menu-whats > a,
.orpit-tema .mobile-main-nav > li.orpit-menu-whatsapp > a {
	display: flex !important;
	box-sizing: border-box;
	width: calc(100% - 32px);
	min-height: 44px;
	margin: 8px 16px;
	padding: 11px 16px !important;
	border-radius: 12px;
	justify-content: center;
}

.orpit-tema .mobile-main-nav > li.orpit-menu-btn > a .menu-text,
.orpit-tema .mobile-main-nav > li.orpit-menu-whats > a .menu-text,
.orpit-tema .mobile-main-nav > li.orpit-menu-whatsapp > a .menu-text {
	justify-content: center;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.orpit-tema .orpit-barra-mobile {
		background: var(--orpit-white) !important;
	}

	.orpit-tema .orpit-barra-mobile a.is-destaque {
		box-shadow: 0 4px 14px rgba(17, 17, 17, .18);
	}
}