/* ============================================================================
   HG Tracker — OVERRIDES AGRESSIVOS
   Vence a guerra de especificidade contra Hello Elementor + Elementor.
   Carrega POR ÚLTIMO (depende de react-build + hg-custom).
   ============================================================================ */

/* =====================  BODY: fonte + cor padrão  ==================== */
html body,
html body.wp-singular,
html body.elementor-page {
	font-family: 'Exo', Helvetica, Arial, sans-serif !important;
	color: #1f242e !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	background: white !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	height: auto !important;
}

/* ============================================================================
   ANTI-FOUC — Desabilita transitions enquanto o body NÃO tem .hg-js-loaded.
   Evita que conteúdo "deslize" durante carregamento incremental da CSS,
   sem mexer em transforms (que são layout-críticos do Tailwind).
   ============================================================================ */
body:not(.hg-js-loaded),
body:not(.hg-js-loaded) *,
body:not(.hg-js-loaded) *::before,
body:not(.hg-js-loaded) *::after {
	transition: none !important;
	animation-duration: 0s !important;
	animation-delay: 0s !important;
}

body * { font-family: 'Exo', Helvetica, Arial, sans-serif; }

/* =====================  MENU: cores e estilo dos links  ============== */
/* WP injeta classes próprias (.menu-item) — sobrescrevemos com força */
header .menu-item,
header li.menu-item {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
header .menu-item a,
header li.menu-item > a,
header ul a,
header nav ul li a {
	color: #000 !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: color 0.2s !important;
	font-family: 'Exo', sans-serif !important;
	padding: 0 !important;
	background: transparent !important;
}
header .menu-item a:hover,
header li.menu-item > a:hover,
header ul a:hover,
header nav ul li a:hover {
	color: #ff1414 !important;
	text-decoration: underline !important;
}
header .current-menu-item > a,
header .current_page_item > a {
	color: #ff1414 !important;
}

/* Reset list-style global em listas dentro do site */
header ul, footer ul, main ul.menu, main ul.flex {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* =====================  COR vermelho HG (primary)  =================== */
.bg-primary { background-color: #ff1414 !important; }
.text-primary { color: #ff1414 !important; }
.border-primary { border-color: #ff1414 !important; }
.hover\:bg-primary:hover { background-color: #ff1414 !important; }
.hover\:text-primary:hover { color: #ff1414 !important; }

/* =====================  COR cinza escuro (secondary)  ================ */
.bg-secondary { background-color: #1f242e !important; }
.text-secondary { color: #1f242e !important; }
.hover\:bg-secondary:hover { background-color: #1f242e !important; }
.hover\:text-secondary:hover { color: #1f242e !important; }

/* =====================  COR cinza claro de seção  ==================== */
.bg-hg-gray { background-color: #f0f0f0 !important; }
.text-hg-muted { color: #717580 !important; }

/* =====================  COR red-600 do banner parceiro  ============== */
.bg-red-600 { background-color: #ff1414 !important; }

/* =====================  Cor preto (botões)  ========================== */
.bg-black { background-color: #000 !important; }
.text-black { color: #000 !important; }
.text-white { color: #fff !important; }
.hover\:bg-black:hover { background-color: #000 !important; }
.hover\:text-white:hover { color: #fff !important; }

/* =====================  BOTÕES: Elementor injeta estilo padrão  ====== */
/* Anula Elementor button defaults */
.elementor-page button:not(.elementor-button):not(.hg-allow),
.elementor-page a.cursor-pointer {
	font-family: 'Exo', sans-serif !important;
	border: none !important;
	border-radius: 0 !important;
	transition: all 0.2s !important;
	display: inline-block;
}

/* =====================  HEADER GRADIENT  ============================= */
.header-gradient {
	background: linear-gradient(to left, white 0%, white 55%, #1f242e 45%, #1f242e 100%) !important;
}
@media screen and (min-width: 430px) {
	.header-gradient { background: linear-gradient(to left, white 0%, white 85%, #1f242e 15%, #1f242e 100%) !important; }
}
@media screen and (min-width: 1250px) {
	.header-gradient { background: linear-gradient(to left, white 0%, white 75%, #1f242e 25%, #1f242e 100%) !important; }
}
@media screen and (min-width: 1450px) {
	.header-gradient { background: linear-gradient(to left, white 0%, white 70%, #1f242e 30%, #1f242e 100%) !important; }
}

/* =====================  SHAPE: clip-path do logo  ==================== */
.shape {
	clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%) !important;
}

/* =====================  ELEMENTOR STRETCH: anular o JS de stretch  ==== */
/* Elementor injeta inline `width: <bodyW>px; left: -Xpx` que desloca as seções
   à esquerda. Forçamos a section a ficar no fluxo normal full-width. */
.elementor-section.elementor-section-stretched {
	left: 0 !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* Para sections BOXED (não-stretched), o Elementor já centraliza via .elementor-container.
   Nada a fazer aqui — não interferir com o layout boxed. */

/* ============================================================================
   PÁGINAS LEGAIS (Política de Privacidade, Termos) — conteúdo centralizado
   max-width 900px com margens automáticas
   ============================================================================ */
.elementor-section.hg-legal-section > .elementor-container {
	max-width: 900px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

/* =====================  CONTAINER: anular limites Hello Elementor  === */
.site, .site-content, .site-main, main.site-main {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* Regra geral pra Hello Elementor — boxed = 100% (NÃO se aplica a .hg-legal-section) */
.elementor-section.elementor-section-boxed:not(.hg-legal-section) > .elementor-container {
	max-width: 100% !important;
}
.elementor-section:not(.hg-legal-section) .elementor-container {
	padding: 0 !important;
}
.elementor-widget-html { padding: 0 !important; margin: 0 !important; }
.elementor-widget-html .elementor-widget-container { padding: 0 !important; }

/* =====================  FONT awesome icons no card hero  ============== */
/* Removi o 🎧 emoji e quero que apareça igual o React (svg headphone) */
/* (mantenho emoji por simplicidade — fica visualmente OK) */

/* =====================  TIPOGRAFIA fina (Exo weights)  ================ */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Exo', sans-serif !important;
	margin: 0 !important;
}
.font-bold { font-weight: 700 !important; }
.font-semibold { font-weight: 600 !important; }
.font-medium { font-weight: 500 !important; }
.font-normal { font-weight: 400 !important; }

/* =====================  Forçar text-5xl/4xl funcionarem  ============== */
.text-5xl { font-size: 48px !important; line-height: 1 !important; }
.text-4xl { font-size: 36px !important; line-height: 2.5rem !important; }
.text-3xl { font-size: 30px !important; line-height: 2.25rem !important; }
.text-2xl { font-size: 24px !important; line-height: 2rem !important; }
.text-xl { font-size: 20px !important; line-height: 1.75rem !important; }
.text-lg { font-size: 18px !important; line-height: 1.75rem !important; }
.text-base { font-size: 16px !important; line-height: 1.5rem !important; }
.text-sm { font-size: 14px !important; line-height: 1.25rem !important; }
.text-xs { font-size: 12px !important; line-height: 1rem !important; }

/* =====================  ROUNDED quirks  ============================== */
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-xl { border-radius: 0.75rem !important; }
.rounded-2xl { border-radius: 1rem !important; }
.rounded-full { border-radius: 9999px !important; }
.rounded-md { border-radius: 0.375rem !important; }
.rounded { border-radius: 0.25rem !important; }

/* =====================  Shadow card (do React)  ====================== */
.shadow-card {
	box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
}

/* =====================  Footer link colors (over Hello Elementor)  === */
footer a {
	color: white !important;
	text-decoration: none !important;
}
footer a:hover { color: #ff1414 !important; }
footer .text-gray-300 a {
	color: #d1d5db !important;
}
footer .text-gray-300 a:hover { color: white !important; }

/* =====================  Bg-opacity-primary (card num passos)  ========= */
.bg-opacity-primary {
	background-color: rgba(255, 20, 20, 1) !important;
}

/* =====================  min-full-height (Hero altura) ================= */
.min-full-height { min-height: 600px; }

/* =====================  TAILWIND classes que podem ter conflito ======== */
/* Forçar w-/h- específicos */
.w-\[320px\] { width: 320px !important; }
.w-\[350px\] { width: 350px !important; }
.w-\[260px\] { width: 260px !important; }
.w-\[200px\] { width: 200px !important; }
.w-\[370px\] { width: 370px !important; }
.w-\[420px\] { width: 420px !important; }
.w-\[400px\] { width: 400px !important; }
.w-\[700px\], .max-w-\[700px\] { max-width: 700px !important; }
.w-\[600px\], .max-w-\[600px\] { max-width: 600px !important; }
.w-\[540px\], .max-w-\[540px\] { max-width: 540px !important; }
.w-48 { width: 12rem !important; }
.h-48 { height: 12rem !important; }
.w-24 { width: 6rem !important; }
.h-24 { height: 6rem !important; }
.w-20 { width: 5rem !important; }
.h-20 { height: 5rem !important; }
.w-16 { width: 4rem !important; }
.h-16 { height: 4rem !important; }
.w-11 { width: 2.75rem !important; }
.h-11 { height: 2.75rem !important; }
.min-w-\[277px\] { min-width: 277px !important; }
.min-h-60 { min-height: 15rem !important; }
.min-h-\[180px\] { min-height: 180px !important; }
.min-h-\[210px\] { min-height: 210px !important; }
.min-h-\[250px\] { min-height: 250px !important; }
.h-\[50px\] { height: 50px !important; }
.h-\[100px\] { height: 100px !important; }
.h-\[180px\] { height: 180px !important; }
.h-\[300px\] { height: 300px !important; }
.h-32 { height: 8rem !important; }
.h-40 { height: 10rem !important; }
.max-h-40 { max-height: 10rem !important; }
.max-h-36 { max-height: 9rem !important; }
.max-w-7xl { max-width: 80rem !important; }
.max-w-6xl { max-width: 72rem !important; }
.max-w-3xl { max-width: 48rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-w-lg { max-width: 32rem !important; }
.max-w-xl { max-width: 36rem !important; }

/* Posicionamento absoluto */
.absolute { position: absolute !important; }
.relative { position: relative !important; }
.-bottom-9 { bottom: -2.25rem !important; }
.-bottom-2 { bottom: -0.5rem !important; }
.-top-12 { top: -3rem !important; }
.-left-20 { left: -5rem !important; }
.-left-14 { left: -3.5rem !important; }
.-right-5 { right: -1.25rem !important; }
.right-0 { right: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.top-0 { top: 0 !important; }
.top-4 { top: 1rem !important; }
.left-0 { left: 0 !important; }
.left-1\/2 { left: 50% !important; }
.top-1\/2 { top: 50% !important; }
.top-\[40px\] { top: 40px !important; }
/* IMPORTANTE: Tailwind v4 já usa a propriedade CSS `translate` (não transform).
   NÃO devemos duplicar com transform: translate aqui — causaria translação dupla
   (descobrimos isso ao depurar badges/mascote/watermark do hero). */

/* mt-/ml- negativos do circle */
.mt-\[-303px\] { margin-top: -303px !important; }
.ml-\[-303px\] { margin-left: -303px !important; }

/* Espelhamento horizontal (caminhão) */
.-scale-x-100 { transform: scaleX(-1) !important; }

/* Z-index */
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-50 { z-index: 50 !important; }
.z-\[0\] { z-index: 0 !important; }
.z-\[2\] { z-index: 2 !important; }

/* Padding/margin específicos */
.py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.px-13 { padding-left: 3.25rem !important; padding-right: 3.25rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
.pb-8 { padding-bottom: 2rem !important; }
.pb-10 { padding-bottom: 2.5rem !important; }
.pb-12 { padding-bottom: 3rem !important; }
.pt-30 { padding-top: 7.5rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-8 { padding: 2rem !important; }

/* Overflow */
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-x-auto { overflow-x: auto !important; }

/* Display */
.hidden { display: none !important; }
.flex { display: flex !important; }
.block { display: block !important; }
.inline-block { display: inline-block !important; }

@media (min-width: 768px) {
	.md\:flex { display: flex !important; }
	.md\:block { display: block !important; }
	.md\:hidden { display: none !important; }
	.md\:flex-row { flex-direction: row !important; }
	.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.md\:w-1\/2 { width: 50% !important; }
	.md\:w-4\/5 { width: 80% !important; }
	.md\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
	.md\:text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
	.md\:!h-\[300px\] { height: 300px !important; }
}

@media (min-width: 960px) {
	.min-\[960px\]\:block { display: block !important; }
	.min-\[960px\]\:flex { display: flex !important; }
	.min-\[960px\]\:hidden { display: none !important; }
}

@media (min-width: 1000px) {
	.min-\[1000px\]\:left-\[-50px\] { left: -50px !important; }
	.min-\[1000px\]\:-left-70 { left: -17.5rem !important; }
	.min-\[1000px\]\:w-\[400px\] { width: 400px !important; }
}

@media (min-width: 1050px) {
	.min-\[1050px\]\:min-w-\[270px\] { min-width: 270px !important; }
}

@media (min-width: 1134px) {
	.min-\[1134px\]\:left-\[-100px\] { left: -100px !important; }
	.min-\[1134px\]\:-left-70 { left: -17.5rem !important; }
	.min-\[1134px\]\:w-\[420px\] { width: 420px !important; }
}

@media (min-width: 1250px) {
	.min-\[1250px\]\:min-w-\[370px\] { min-width: 370px !important; }
}

@media (min-width: 1270px) {
	.min-\[1270px\]\:absolute { position: absolute !important; }
	.min-\[1270px\]\:min-h-\[210px\] { min-height: 210px !important; }
	.min-\[1270px\]\:pt-30 { padding-top: 7.5rem !important; }
}

@media (max-width: 951px) {
	.max-\[951px\]\:-top-10 { top: -2.5rem !important; }
}

@media (max-width: 830px) {
	.\[\@media\(max-width\:830px\)\]\:hidden { display: none !important; }
	.min-\[830px\]\:-left-15 { left: -3.75rem !important; }
}

/* Grid */
.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.gap-4 { gap: 1rem !important; }
.gap-6 { gap: 1.5rem !important; }
.gap-8 { gap: 2rem !important; }

/* Shadow */
.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important; }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important; }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important; }

/* Border */
.border { border-width: 1px !important; border-style: solid !important; }
.border-t { border-top-width: 1px !important; border-top-style: solid !important; }
.border-l { border-left-width: 1px !important; border-left-style: solid !important; }
.border-gray-100 { border-color: #f3f4f6 !important; }
.border-gray-200 { border-color: #e5e7eb !important; }
.border-gray-300 { border-color: #d1d5db !important; }
.border-gray-700 { border-color: #374151 !important; }

/* Cores secundárias usadas */
.bg-orange-200 { background-color: #fed7aa !important; }
.text-orange-600 { color: #ea580c !important; }
.text-green-500 { color: #22c55e !important; }
.text-gray-500 { color: #6b7280 !important; }
.text-gray-600 { color: #4b5563 !important; }
.text-gray-700 { color: #374151 !important; }
.text-gray-800 { color: #1f2937 !important; }
.text-gray-300 { color: #d1d5db !important; }
.bg-white { background-color: white !important; }
.bg-gray-100 { background-color: #f3f4f6 !important; }
.bg-green-500 { background-color: #22c55e !important; }

/* Italic */
.italic { font-style: italic !important; }

/* Round */
.rotate-90 { transform: rotate(90deg) !important; }
.rotate-180 { transform: rotate(180deg) !important; }
.rounded-bl-full { border-bottom-left-radius: 9999px !important; }

/* Drop shadow */
.drop-shadow-xl { filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08)) !important; }

/* Whitespace */
.whitespace-nowrap { white-space: nowrap !important; }
.uppercase { text-transform: uppercase !important; }

/* Transition */
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-duration: .15s; }

/* Cursor */
.cursor-pointer { cursor: pointer !important; }

/* Padding extras */
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-13 { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }

/* Margin */
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mb-12 { margin-bottom: 3rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-8 { margin-top: 2rem !important; }
.mt-12 { margin-top: 3rem !important; }
.mt-20 { margin-top: 5rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-4 { margin-right: 1rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }

/* min-h */
.min-h-\[180px\] { min-height: 180px !important; }
.min-h-\[210px\] { min-height: 210px !important; }
.min-h-\[250px\] { min-height: 250px !important; }
@media (min-width: 640px) { .sm\:min-h-\[210px\] { min-height: 210px !important; } }
.min-w-11\/12 { min-width: 91.666667% !important; }
@media (min-width: 640px) { .sm\:w-4\/5 { width: 80% !important; } }

/* ============================================================================
   FIXES ESPECÍFICOS POS-REVIEW (alinhamentos)
   ============================================================================ */

/* FIX 1: Top bar separators (border-l + bg-white precisa ter borda funcionando) */
.bg-primary .border-l,
header .border-l {
	border-left: 1px solid white !important;
	border-left-width: 1px !important;
	border-left-style: solid !important;
	border-left-color: white !important;
	background: white !important;
	width: 1px !important;
	height: 50% !important;
}
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-5 { gap: 1.25rem !important; }
.gap-12 { gap: 3rem !important; }

/* FIX 2: Menu space-x-8 (Tailwind utility class — > * + * margin-left) */
.flex.space-x-8 > :not([hidden]) ~ :not([hidden]),
ul.space-x-8 > :not([hidden]) ~ :not([hidden]),
ul.space-x-8 > li:not(:first-child) {
	margin-left: 2rem !important;
}
ul.space-x-8 { display: flex !important; }
.space-x-8 > * + * { margin-left: 2rem !important; }

/* FIX 3: Login plataforma button (w-72 + rounded-lg + visible) */
.w-72 { width: 18rem !important; min-width: 18rem !important; }
header .relative button.cursor-pointer,
footer .relative button.cursor-pointer {
	width: 18rem !important;
	min-width: 18rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	padding: 0.75rem 1rem !important;
	border-radius: 0.5rem !important;
	font-weight: 600 !important;
	background-color: #ff1414 !important;
	color: white !important;
	border: none !important;
	font-size: 16px !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
}
header .relative button.cursor-pointer:hover,
footer .relative button.cursor-pointer:hover {
	background-color: black !important;
	color: white !important;
}
header .relative button.cursor-pointer svg,
footer .relative button.cursor-pointer svg {
	width: 1rem !important;
	height: 1rem !important;
	margin-left: 0.5rem !important;
}

/* FIX 4: Hero — caminhão + vídeo + bloco vermelho overlap */
/* O .h-10\/12 do React */
.h-10\/12 { height: 83.333333% !important; }

/* Container do media (lado direito do hero) precisa de altura definida */
.relative.flex.flex-col.items-end.z-10.min-w-\[340px\].h-10\/12 {
	min-height: 500px !important;
}

/* O bloco vermelho de background */
.absolute.bg-primary.w-\[200px\].h-full {
	width: 200px !important;
	height: 100% !important;
	right: 0 !important;
	top: 0 !important;
	position: absolute !important;
}

/* Container do vídeo */
.absolute.top-\[40px\] {
	top: 40px !important;
	position: absolute !important;
	height: calc(100% - 80px) !important;
}

/* h-[calc(100%-80px)] do React */
.h-\[calc\(100\%-80px\)\] { height: calc(100% - 80px) !important; }

/* video w-[85%] */
video.w-\[85\%\] { width: 85% !important; }

/* w-[820px] do caminhão */
.w-\[820px\] { width: 820px !important; }

/* FIX 5: Tecnologia 3x3 — cards alturas iguais */
.bg-hg-gray .grid > .bg-white,
.bg-hg-gray .grid > .bg-primary,
[class*="grid-template-columns"] > .bg-white,
[class*="grid-template-columns"] > .bg-primary {
	min-height: 180px !important;
}
/* grid auto-rows pra fazer rows com mesma altura */
.grid.grid-cols-1.md\:\[grid-template-columns\:clamp\(40\%\,350px\,40\%\)_auto_clamp\(40\%\,350px\,40\%\)\] {
	grid-auto-rows: 1fr !important;
}
@media (min-width: 768px) {
	[class*="grid-template-columns:clamp"] {
		grid-template-columns: clamp(40%, 350px, 40%) auto clamp(40%, 350px, 40%) !important;
		grid-auto-rows: 1fr !important;
	}
}

/* FIX 6: Nossos Serviços — sem espaço sobrando, card altura conforme imagem */
@media (min-width: 768px) {
	.bg-white.rounded-xl.shadow.flex.md\:flex-row {
		min-height: 300px !important;
	}
	.bg-white.rounded-xl.shadow .w-full.aspect-video.md\:w-1\/2 {
		width: 50% !important;
		height: 300px !important;
		flex-shrink: 0 !important;
		aspect-ratio: auto !important;
	}
	.bg-white.rounded-xl.shadow .w-full.aspect-video.md\:w-1\/2 img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
	.bg-white.rounded-xl.shadow .flex.flex-1 {
		justify-content: center !important;
	}
}
@media (min-width: 1024px) {
	.bg-white.rounded-xl.shadow .lg\:h-40 {
		height: 10rem !important;
	}
}

/* FIX 7: Banner Parceiro botão "ENTRE EM CONTATO E SAIBA COMO!" */
/* Mais específico que o footer a { color: white } */
footer a.bg-white,
footer a.whitespace-nowrap.bg-white.text-black,
.bg-red-600 a,
footer .bg-red-600 a {
	background-color: white !important;
	color: black !important;
	text-decoration: underline !important;
	padding: 0.5rem 2rem !important;
	display: inline-block !important;
	white-space: nowrap !important;
	font-weight: 500 !important;
}
footer a.bg-white:hover,
.bg-red-600 a:hover {
	background-color: #f0f0f0 !important;
	color: black !important;
}

/* ANULA o footer a {color:white} pra anchor com classes específicas */
footer a.text-black { color: black !important; }
footer a.bg-white { color: black !important; }

/* Container do banner parceiro precisa estar correto */
footer .bg-red-600 {
	background-color: #ff1414 !important;
	border-radius: 0.5rem !important;
	padding: 0 3.25rem !important;
	display: flex !important;
	min-height: 180px !important;
	align-items: center !important;
}

/* Mascote do banner — overflow visible pro mascote pular pra cima */
footer .min-\[1270px\]\:pt-30 {
	overflow: visible !important;
}

/* Constrain mascote do banner parceiro */
footer img[alt="Homem"] {
	min-width: 277px !important;
	min-height: 15rem !important;
	max-height: 280px !important;
	width: auto !important;
	object-fit: cover !important;
	object-position: center bottom !important;
}
@media (min-width: 1270px) {
	footer img[alt="Homem"] {
		position: absolute !important;
		bottom: 0 !important;
	}
}

/* aspect-video */
.aspect-video { aspect-ratio: 16/9 !important; }

/* flex-1 */
.flex-1 { flex: 1 1 0% !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

/* items-stretch */
.items-stretch { align-items: stretch !important; }

/* h-full */
.h-full { height: 100% !important; }
.w-full { width: 100% !important; }
.min-h-full { min-height: 100% !important; }

/* leading classes (line-height) */
.leading-tight { line-height: 1.25 !important; }
.leading-relaxed { line-height: 1.625 !important; }
.leading-7 { line-height: 1.75rem !important; }
.leading-9 { line-height: 2.25rem !important; }

/* ============================================================================
   FIXES ESPECÍFICOS POS-REVIEW v2 (3 issues finais)
   ============================================================================ */

/* FIX 1: Top bar "Segunda à Sexta..." desalinhado verticalmente
   Causa: <p> tags do WordPress têm margin top/bottom default (16px),
   que somado ao flex items-center não centra direito.
*/
header .bg-primary p,
header .bg-primary .hg-topbar p,
.bg-primary.w-full p {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	display: flex !important;
	align-items: center !important;
	height: 100% !important;
}
/* Wrapper do top bar precisa flex+center bem aplicado */
header .bg-primary > div {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 50px !important;
	max-width: 80rem !important;
	margin: 0 auto !important;
	padding: 0 0.5rem !important;
	gap: 0.5rem !important;
}

/* FIX 2: Hero "Seu veículo protegido" todo conteúdo à esquerda
   Causa: a div pai tem `flex justify-center` mas Tailwind compilado pode
   não estar criando esta regra com priority suficiente, OU o max-w-7xl
   não está centralizando.
*/
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-end { justify-content: flex-end !important; }
.justify-start { justify-content: flex-start !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-stretch { align-items: stretch !important; }
/* REMOVED: .flex-col global !important — estava vencendo .md:flex-row.
   Tailwind compiled já tem .flex-col rule (sem !important), que é correto.
   Use apenas as variantes responsive (.sm:flex-row, .md:flex-row etc.) */
.flex-wrap { flex-wrap: wrap !important; }

/* Hero parent — wp adiciona <p> ou wraps que quebram o flex */
.bg-white.relative.w-full.flex.justify-center {
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
}
/* O max-w-7xl interno precisa funcionar */
.bg-white.relative > .relative.flex.items-center.justify-between {
	width: 100% !important;
	max-width: 80rem !important;
	margin: 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

/* Elementor envolve nosso HTML widget num <div class="elementor-widget-container">
   que tem width:auto — pode quebrar nossa flex-center. Forçar 100%. */
.elementor-widget-container { width: 100% !important; }
.elementor-widget-html .elementor-widget-container { width: 100% !important; }

/* FIX 3: Footer "Login plataforma" dropdown — links INVISÍVEIS (white on white)
   Causa: meu override `footer a { color: white }` pega TUDO no footer.
   Solução: regra mais específica pros links DO dropdown.
*/
footer .bg-white a,
footer div.bg-white a,
footer .relative > div.bg-white a,
footer .hg-login-dropdown a,
footer button + div.bg-white a,
footer .text-black a,
footer .relative div.absolute.bg-white a {
	color: #000 !important;
	background-color: transparent !important;
	font-weight: 500 !important;
	display: block !important;
	padding: 0.75rem 1rem !important;
}
footer .bg-white a:hover,
footer div.bg-white a:hover {
	background-color: #f3f4f6 !important;
	color: #000 !important;
}

/* Mesmo cuidado pro header dropdown — escopado pra .absolute (dropdown box),
   NUNCA pega o logo .shape (que é filho direto do nav.bg-white). */
header .absolute.bg-white a,
header div.absolute.bg-white a {
	color: #000 !important;
	background-color: transparent !important;
}
header .absolute.bg-white a:hover {
	background-color: #f3f4f6 !important;
	color: #000 !important;
}

/* ============================================================================
   LOGO HEADER — bg-secondary mesma cor do gradient, SEM hover
   ============================================================================ */
header a.shape,
header a.shape:hover,
header a.shape:focus,
header a.shape:active,
header a.shape:visited {
	background-color: #1f242e !important;
	color: inherit !important;
	text-decoration: none !important;
	outline: none !important;
	transition: none !important;
	opacity: 1 !important;
}
header a.shape img {
	transition: none !important;
}
header a.shape:hover img {
	transform: none !important;
	filter: none !important;
	opacity: 1 !important;
}

/* Garante que `block` (display: block) funcione no dropdown */
.block { display: block !important; }
.inline { display: inline !important; }
.inline-flex { display: inline-flex !important; }

/* "hidden" do dropdown precisa ESCONDER mesmo */
.hidden { display: none !important; }
.flex.hidden { display: none !important; }

/* Login dropdowns: position correta */
.absolute.top-full { top: 100% !important; position: absolute !important; }
.absolute.bottom-full { bottom: 100% !important; top: auto !important; position: absolute !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }

/* Estilo do container do dropdown (caixa branca) */
header .absolute.bg-white,
footer .absolute.bg-white {
	width: 18rem !important;
	min-width: 18rem !important;
	background-color: white !important;
	box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
	border-radius: 0.5rem !important;
	z-index: 50 !important;
	overflow: hidden !important;
}
header .absolute.bg-white a,
footer .absolute.bg-white a {
	display: block !important;
	padding: 0.75rem 1rem !important;
	color: #000 !important;
	border-bottom: 1px solid #f0f0f0 !important;
}
header .absolute.bg-white a:last-child,
footer .absolute.bg-white a:last-child {
	border-bottom: none !important;
}

/* ============================================================================
   FIXES v3 — CTA Dúvida + Depoimentos
   ============================================================================ */

/* CTA card: phone icon container precisa min-w-20/min-h-20 */
.min-w-20 { min-width: 5rem !important; }
.min-h-20 { min-height: 5rem !important; }
.min-w-\[24px\] { min-width: 24px !important; }
.text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
.text-7xl { font-size: 4.5rem !important; line-height: 1 !important; }
.text-md { font-size: 1rem !important; line-height: 1.5rem !important; }

/* mb-12 (espaçamento entre CTA e Depoimentos) */
.mb-12 { margin-bottom: 3rem !important; }

/* Override !bg-white (Tailwind important variant) */
.\!bg-white { background-color: white !important; }

/* Card de depoimento — max-w-3xl */
.max-w-3xl { max-width: 48rem !important; }

/* Setas do carrossel (depoimentos) — posição absoluta nas laterais */
.left-\[-32px\] { left: -32px !important; }
.right-\[-32px\] { right: -32px !important; }
.w-8 { width: 2rem !important; }
.h-8 { height: 2rem !important; }

/* max-md:hidden (esconde no mobile) */
@media (max-width: 767px) {
	.max-md\:hidden { display: none !important; }
}

/* CTA card phone icon — tamanho correto */
.bg-white.rounded-2xl.shadow-xl .min-w-20.min-h-20 {
	min-width: 5rem !important;
	min-height: 5rem !important;
	width: 5rem !important;
	height: 5rem !important;
	border-radius: 9999px !important;
	background-color: #ff1414 !important;
	color: white !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

/* CTA card: SVG dentro do círculo vermelho — 36px */
.bg-white.rounded-2xl.shadow-xl .min-w-20 svg {
	width: 36px !important;
	height: 36px !important;
	color: white !important;
}

/* Decorativo 1/4 círculo bottom-right do CTA */
.bg-white.rounded-2xl.shadow-xl .absolute.bottom-0.-right-5 {
	position: absolute !important;
	bottom: 0 !important;
	right: -1.25rem !important;
	width: 5rem !important;
	height: 5rem !important;
	background-color: #ff1414 !important;
	transform: rotate(90deg) !important;
	border-bottom-left-radius: 100% !important;
}

/* ============================================================================
   FIXES v4 — ULTRA-FINAL — Responsive utilities devem ganhar de .hidden
   IMPORTANTE: estas regras precisam ficar NO FIM do arquivo
   ============================================================================ */

/* Responsive display utilities — CARREGAM POR ÚLTIMO pra ganhar .hidden */
@media (min-width: 640px) {
	.sm\:block { display: block !important; }
	.sm\:flex { display: flex !important; }
	.sm\:hidden { display: none !important; }
	.sm\:flex-row { flex-direction: row !important; }
	.sm\:gap-8 { gap: 2rem !important; }
	.sm\:text-left { text-align: left !important; }
}
@media (min-width: 768px) {
	.md\:block { display: block !important; }
	.md\:flex { display: flex !important; }
	.md\:hidden { display: none !important; }
	.md\:inline { display: inline !important; }
	.md\:grid { display: grid !important; }
	.md\:flex-row { flex-direction: row !important; }
	.md\:flex-col { flex-direction: column !important; }
	.md\:items-center { align-items: center !important; }
	.md\:items-start { align-items: flex-start !important; }
	.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.md\:w-1\/2 { width: 50% !important; }
	.md\:w-4\/5 { width: 80% !important; }
	.md\:text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
	.md\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
	.md\:text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
	.md\:mb-0 { margin-bottom: 0 !important; }
	.md\:px-0 { padding-left: 0 !important; padding-right: 0 !important; }
	.md\:!h-\[300px\] { height: 300px !important; }
	.md\:aspect-auto { aspect-ratio: auto !important; }
	.md\:block { display: block !important; }
}
@media (min-width: 960px) {
	.min-\[960px\]\:block { display: block !important; }
	.min-\[960px\]\:flex { display: flex !important; }
	.min-\[960px\]\:hidden { display: none !important; }
}
@media (min-width: 1024px) {
	.lg\:flex { display: flex !important; }
	.lg\:block { display: block !important; }
	.lg\:hidden { display: none !important; }
	.lg\:flex-row { flex-direction: row !important; }
}
@media (max-width: 767px) {
	.max-md\:hidden { display: none !important; }
}
@media (max-width: 1000px) {
	.max-\[1000px\]\:\!-left-6 { left: -1.5rem !important; }
}
@media (max-width: 951px) {
	.max-\[951px\]\:-top-10 { top: -2.5rem !important; }
}
@media (max-width: 675px) {
	.max-\[675px\]\:pb-4 { padding-bottom: 1rem !important; }
	.max-\[675px\]\:flex-wrap { flex-wrap: wrap !important; }
}

/* ============================================================================
   FIX FINAL — imagens com max-width Hello Elementor + bg-[url] do circle
   ============================================================================ */

/* IMPORTANTE: NÃO force max-width:none nos imgs do hero!
   No React, o truck e outros imgs SÃO constrained pelo parent (max-width:100%).
   Isso é o comportamento correto/desejado. */

/* Circle decorativo — Tailwind não compilou bg-[url] pro path novo,
   uso atributo selector pra targetar pelo class string contendo "circle.svg" */
div[class*="circle.svg"] {
	background-image: url('../img/circle.svg') !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
	background-position: top left !important;
}

/* Menu item ATUAL (current page) — vermelho */
header .current-menu-item > a,
header .current_page_item > a,
header .menu-item-object-page.current-menu-item a,
header .current-menu-item a.text-black {
	color: #ff1414 !important;
}

/* Imgs do Elementor — manter comportamento padrão WP (max-width:100%)
   exceto pra imgs com width fixo conhecido (que devem manter o tamanho exato) */
.elementor-section img,
.elementor-widget img,
.elementor img {
	height: auto;
}
/* Quando img tem class h-full, height: 100% */
.elementor-section img.h-full,
img.h-full {
	height: 100% !important;
}
/* Quando img tem class w-full, width: 100% */
.elementor-section img.w-full,
img.w-full {
	width: 100% !important;
	max-width: 100% !important;
}
.object-cover { object-fit: cover !important; }

/* ============================================================================
   FONT AWESOME inline SVGs — sem isso o <svg> renderiza no viewBox nativo (448×512)
   ============================================================================ */
.svg-inline--fa {
	display: inline-block !important;
	height: 1em !important;
	overflow: visible !important;
	vertical-align: -0.125em !important;
	width: var(--fa-width, auto) !important;
}
.svg-inline--fa.fa-fw { width: 1.25em !important; }
.svg-inline--fa.fa-pull-left { margin-right: 0.3em !important; }
.svg-inline--fa.fa-pull-right { margin-left: 0.3em !important; }
.svg-inline--fa.fa-sm { font-size: 0.875em !important; }
.svg-inline--fa.fa-lg { font-size: 1.25em !important; }
.svg-inline--fa.fa-xl { font-size: 1.5em !important; }
.svg-inline--fa.fa-2xl { font-size: 2em !important; }
.svg-inline--fa.fa-1x { font-size: 1em !important; }
.svg-inline--fa.fa-2x { font-size: 2em !important; }
.svg-inline--fa.fa-3x { font-size: 3em !important; }
.svg-inline--fa.fa-4x { font-size: 4em !important; }
.svg-inline--fa.fa-5x { font-size: 5em !important; }
/* Aspect-ratio square: width auto baseado em viewBox / height 1em */
svg.svg-inline--fa {
	width: auto !important;
	max-width: 100% !important;
}

/* ============================================================================
   HEADER LOGIN PLATAFORMA — botão com bordas arredondadas
   ============================================================================ */
header button.bg-primary,
header button[onclick*="hidden"],
header .relative > button.bg-primary {
	border-radius: 0.5rem !important;
}
.rounded-lg {
	border-radius: 0.5rem !important;
}

/* ============================================================================
   COMO FUNCIONA — todos os 4 cards com mesma altura + badges centralizados
   ============================================================================ */
.flex.flex-wrap.justify-center.max-w-6xl > div {
	align-self: stretch !important;
}
.flex.flex-wrap.justify-center.max-w-6xl > div > .mt-12.bg-white.rounded.shadow-card {
	min-height: 280px !important;
	height: 100% !important;
	flex: 1 !important;
	position: relative !important;  /* badge ancorará neste card */
}
/* Container vazio do badge — torna position relativa ao card, não a si mesmo */
.flex.flex-wrap.justify-center.max-w-6xl .mt-12.bg-white.rounded.shadow-card > div.relative.py-6 {
	position: static !important;  /* faz badge usar card como containing block */
	padding: 0 !important;
	margin: 0 !important;
	height: 0 !important;
}
/* Badge — pixel-perfect. Card w-[260px] → center horizontal = 130px.
   Badge w=54 → center do badge fica em 130-27 = 103px from card left
   IMPORTANTE: Tailwind v4 usa a propriedade CSS `translate` (não só transform)
   pra `-translate-x-1/2`. Precisamos anular AMBOS. */
.flex.flex-wrap.justify-center.max-w-6xl .mt-12.bg-white.rounded.shadow-card span.absolute.z-10 {
	left: 103px !important;
	right: auto !important;
	top: -28px !important;
	transform: none !important;
	translate: none !important;
	margin: 0 !important;
}

/* ============================================================================
   CTA DÚVIDA — mascote (men.avif) deve ficar JUNTO ao card,
   centralizado VERTICALMENTE com ele
   ============================================================================ */
/* Wrapper é w-full + flex justify-center. Card é w-4/5 (80%, começa em 10%).
   - Horizontal: left: calc(10% - 56px) pra encostar na borda esquerda do card
   - Vertical: top:0 + bottom:0 + margin auto (truque clássico de centralização absoluta) */
section.relative.max-w-7xl > div.relative.w-full.flex.justify-center > div.absolute.hidden.md\:block {
	left: calc(10% - 56px) !important;
	top: 0 !important;
	bottom: 0 !important;
	transform: none !important;
	translate: none !important;
	margin-top: auto !important;
	margin-bottom: auto !important;
	height: 192px !important;
}
@media (max-width: 1000px) {
	section.relative.max-w-7xl > div.relative.w-full.flex.justify-center > div.absolute.hidden.md\:block {
		left: calc(10% - 24px) !important;
	}
}

/* (Footer-bottom layout fica no inline-style do footer.php — igual ao React:
    row no desktop, column no mobile <640px) */

/* ============================================================================
   HERO — img traffic.avif (substituiu video) deve ocupar 85% × 100% do wrapper
   ============================================================================ */
.hg-hero-bg-img {
	width: 85% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}
.hg-hero-video-wrap {
	height: calc(100% - 80px) !important;
}
.hg-hero-right {
	min-height: 460px !important;
}

/* ============================================================================
   MOBILE (≤767px) — STACKING, FONTES, PADDING
   ============================================================================ */
@media (max-width: 767px) {
	/* Hero: empilha vertical, sem video/truck à direita (já tem hidden via @media max 830) */
	.bg-white.relative.w-full.min-full-height {
		padding: 32px 16px !important;
		min-height: auto !important;
	}
	.bg-white.relative.w-full.min-full-height h1 {
		font-size: 2.2rem !important;
		line-height: 1.15 !important;
		padding: 0 !important;
	}
	.bg-white.relative.w-full.min-full-height h3 {
		font-size: 1rem !important;
		padding: 0 !important;
	}
	.bg-white.relative.w-full.min-full-height .min-\[768px\]\:px-4 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Botões hero mobile — empilha vertical, full width */
	.bg-white.relative.w-full.min-full-height a[href*="contato"],
	.bg-white.relative.w-full.min-full-height a[href*="sobre"] {
		width: 100% !important;
		text-align: center !important;
	}

	/* Tecnologia 3×3 — vira 1 coluna */
	.bg-hg-gray .grid,
	section.bg-hg-gray div[class*="grid-cols"] {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	/* Header da seção Tecnologia (título + CTA) — empilha */
	section.bg-hg-gray > div:first-of-type {
		flex-direction: column !important;
		text-align: center !important;
		gap: 24px !important;
		align-items: center !important;
	}
	section.bg-hg-gray h2 {
		font-size: 1.75rem !important;
		text-align: center !important;
	}

	/* Nossos Serviços — cards empilham, imagem em cima do texto */
	section[class*="bg-white"] .grid-cols-2,
	section .grid.grid-cols-2 {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	.flex.flex-row,
	div.flex.md\:flex-row {
		flex-direction: column !important;
	}

	/* Como Funciona — 4 passos empilham em 2 colunas no mobile */
	section .grid-cols-4 {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 24px !important;
	}

	/* CTA Dúvida — empilha mascote em cima, card abaixo */
	section[class*="cta"] > div,
	div[class*="duvida"] {
		flex-direction: column !important;
		text-align: center !important;
		gap: 16px !important;
	}

	/* Depoimentos — 2 colunas viram 1 */
	.grid-cols-2 {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	/* Banner Parceiro footer — empilha texto, mascote, botão */
	.hg-footer-banner {
		flex-direction: column !important;
		padding: 24px 20px !important;
		text-align: center !important;
		min-height: auto !important;
		gap: 16px !important;
	}
	.hg-footer-banner-title {
		font-size: 1.4rem !important;
		text-align: center !important;
	}
	.hg-footer-banner-right {
		flex-direction: column !important;
		gap: 16px !important;
		width: 100% !important;
	}
	.hg-footer-mascot-wrap {
		width: 200px !important;
	}
	.hg-footer-mascot-wrap img {
		min-width: 180px !important;
		min-height: 180px !important;
		max-width: 200px !important;
		max-height: 220px !important;
	}
	.hg-footer-banner-btn {
		display: block !important;
		text-align: center !important;
		white-space: normal !important;
	}

	/* Footer escuro — 4 colunas viram 1, center */
	.hg-footer-cols {
		flex-direction: column !important;
		text-align: center !important;
		gap: 16px !important;
	}
	.hg-footer-col { text-align: center !important; }
	.hg-footer-login-wrap { justify-content: center !important; margin-top: 24px !important; }
	.hg-footer-login-btn { width: 100% !important; max-width: 280px !important; }
	.hg-footer-bottom {
		flex-direction: column !important;
		text-align: center !important;
		gap: 12px !important;
	}
	.hg-footer-bottom-links { flex-direction: column !important; gap: 8px !important; }

	/* Header mobile — top bar oculta (já é via min-[960px]), menu vira hambúrguer */
	/* (Hello Elementor parent já trata isso via responsive menu) */
}

/* ============================================================================
   TABLET (768px – 1023px)
   ============================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
	.bg-white.relative.w-full.min-full-height h1 {
		font-size: 2.6rem !important;
	}
	section .grid-cols-4 {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 24px !important;
	}
}

/* ============================================================================
   LARGE SCREENS (≥1920px) — matchea produção até 1920, depois aproveita viewport
   IMPORTANTE: até 1920px usamos max-w-7xl padrão (1280px) para alinhar com produção.
   ============================================================================ */
@media (min-width: 1920px) {
	.max-w-7xl {
		max-width: 1400px !important;
	}
}

/* ============================================================================
   ULTRAWIDE (≥2560px) — limite máximo pra não esticar demais
   ============================================================================ */
@media (min-width: 2560px) {
	.max-w-7xl {
		max-width: 1600px !important;
	}
}
.object-contain { object-fit: contain !important; }

/* ============================================================================
   CARROSSEL DE DEPOIMENTOS — só slide ativo visível
   ============================================================================ */
.hg-testimonial-carousel {
	outline: none !important;
}
.hg-testimonial-slides {
	position: relative !important;
	min-height: 240px !important;
}
.hg-testimonial-slide {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
	transition: opacity 0.4s ease-in-out !important;
}
.hg-testimonial-slide[data-active="true"] {
	position: relative !important;  /* permite que o container expanda */
	opacity: 1 !important;
	pointer-events: auto !important;
	visibility: visible !important;
}
.hg-testimonial-dot {
	cursor: pointer !important;
	border: none !important;
	padding: 0 !important;
	width: 10px !important;
	height: 10px !important;
	min-width: 10px !important;
	min-height: 10px !important;
	border-radius: 9999px !important;
	transition: background-color 0.2s, transform 0.2s !important;
}
.hg-testimonial-dots {
	padding-bottom: 24px !important;
	padding-top: 8px !important;
	margin: 0 !important;
}
.hg-testimonial-dot:hover {
	transform: scale(1.3) !important;
}
.hg-testimonial-dot.bg-primary {
	background-color: #ff1414 !important;
}
.hg-testimonial-dot.bg-gray-300 {
	background-color: #d1d5db !important;
}
.hg-testimonial-prev,
.hg-testimonial-next {
	cursor: pointer !important;
	border: none !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	padding: 0 !important;
	border-radius: 9999px !important;
	background-color: #ffffff !important;
	color: #1f242e !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s !important;
}
.hg-testimonial-prev:hover,
.hg-testimonial-next:hover {
	background-color: #ff1414 !important;
	color: #ffffff !important;
	transform: translateY(-50%) scale(1.1) !important;
	box-shadow: 0 4px 12px rgba(255, 20, 20, 0.3) !important;
}
.hg-testimonial-prev svg,
.hg-testimonial-next svg {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
}

/* ============================================================================
   PLANOS — Hero detail: imagem com badge "100+ Instalações" sobreposto
   ============================================================================ */
.hg-plans-hero-image-wrap {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}
.hg-plans-hero-image {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	border-radius: 16px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
	object-fit: cover !important;
}
.hg-plans-hero-badge {
	position: absolute !important;
	bottom: 24px !important;
	left: 24px !important;
	background-color: #ff1414 !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	padding: 20px 32px !important;
	text-align: center !important;
	box-shadow: 0 8px 20px rgba(255, 20, 20, 0.35) !important;
	z-index: 10 !important;
	font-family: 'Exo', Helvetica, Arial, sans-serif !important;
}
.hg-plans-hero-badge__number {
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	margin: 0 !important;
}
.hg-plans-hero-badge__label {
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	margin-top: 4px !important;
}
/* Mobile: badge menor, mais embaixo */
@media (max-width: 767px) {
	.hg-plans-hero-badge {
		bottom: 16px !important;
		left: 16px !important;
		padding: 14px 22px !important;
	}
	.hg-plans-hero-badge__number {
		font-size: 22px !important;
	}
	.hg-plans-hero-badge__label {
		font-size: 12px !important;
	}
}

/* ============================================================================
   PLANOS — Compra e Comodato cards (pixel-perfect com produção)
   ============================================================================ */
.hg-plans-section {
	background-color: #f5f5f6 !important;
}
.hg-plans-grid {
	margin-left: auto !important;
	margin-right: auto !important;
}
.hg-plan-card {
	background: #ffffff !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
	padding: 40px 30px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
}
.hg-plan-icon {
	width: 64px !important;
	height: 64px !important;
	border-radius: 9999px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #ffffff !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	margin-bottom: 20px !important;
	font-family: 'Exo', sans-serif !important;
}
.hg-plan-icon--dark { background-color: #1f242e !important; }
.hg-plan-icon--red  { background-color: #ff1414 !important; }

.hg-plan-title {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #1f242e !important;
	margin: 0 0 16px 0 !important;
	font-family: 'Exo', sans-serif !important;
}
.hg-plan-subtitle {
	font-size: 13px !important;
	color: #6b7280 !important;
	margin: 0 0 6px 0 !important;
}
.hg-plan-price {
	font-family: 'Exo', sans-serif !important;
	color: #1f242e !important;
	display: flex !important;
	align-items: baseline !important;
	justify-content: center !important;
	gap: 6px !important;
	margin: 0 0 6px 0 !important;
	line-height: 1 !important;
}
.hg-plan-price__currency {
	font-size: 18px !important;
	font-weight: 700 !important;
}
.hg-plan-price__amount {
	font-size: 38px !important;
	font-weight: 700 !important;
}
.hg-plan-note {
	font-size: 12px !important;
	color: #6b7280 !important;
	margin: 0 0 24px 0 !important;
	max-width: 260px !important;
}
.hg-plan-list-label {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #4b5563 !important;
	margin: 0 0 12px 0 !important;
}
.hg-plan-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 28px 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	align-items: center !important;
}
.hg-plan-list li {
	font-size: 14px !important;
	color: #6b7280 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.hg-plan-check {
	color: #ff1414 !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 1 !important;
}

.hg-plan-cta {
	display: block !important;
	width: 100% !important;
	padding: 14px 20px !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	text-align: center !important;
	text-decoration: none !important;
	font-family: 'Exo', sans-serif !important;
	margin-top: auto !important;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s !important;
	cursor: pointer !important;
}
.hg-plan-cta--outline {
	background-color: #ffffff !important;
	color: #1f242e !important;
	border: 2px solid #1f242e !important;
}
.hg-plan-cta--outline:hover {
	background-color: #1f242e !important;
	color: #ffffff !important;
}
.hg-plan-cta--solid {
	background-color: #ff1414 !important;
	color: #ffffff !important;
	border: 2px solid #ff1414 !important;
}
.hg-plan-cta--solid:hover {
	background-color: #e60f0f !important;
	border-color: #e60f0f !important;
}

/* Mobile: cards empilham com gap menor */
@media (max-width: 767px) {
	.hg-plan-card {
		padding: 32px 24px !important;
	}
	.hg-plan-price__amount {
		font-size: 32px !important;
	}
}
/* Em mobile (<768px) esconde, em md+ mostra como flex */
@media (max-width: 767px) {
	.hg-testimonial-prev,
	.hg-testimonial-next {
		display: none !important;
	}
}

/* ============================================================================
   MENU HAMBURGUER MOBILE (<960px)
   Quando body.mobile-menu-open, mostra o menu como overlay
   ============================================================================ */
@media (max-width: 959px) {
	/* Esconde menu desktop por padrão no mobile (Hello Elementor já faz mas força) */
	header nav .hidden.min-\[960px\]\:flex,
	header nav .ml-2.md\:ml-0.items-center.hidden.min-\[960px\]\:flex {
		display: none !important;
	}

	/* Quando hamburguer abre, menu desktop vira coluna FLUTUANTE abaixo do header */
	body.mobile-menu-open header nav .hidden.min-\[960px\]\:flex {
		display: flex !important;
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		flex-direction: column !important;
		background-color: #fff !important;
		padding: 20px 16px !important;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
		z-index: 100 !important;
		gap: 16px !important;
		border-top: 1px solid #e5e7eb !important;
	}
	body.mobile-menu-open header nav .hidden.min-\[960px\]\:flex ul {
		flex-direction: column !important;
		gap: 16px !important;
		width: 100% !important;
		align-items: flex-start !important;
	}
	body.mobile-menu-open header nav .hidden.min-\[960px\]\:flex ul li {
		width: 100% !important;
	}
	body.mobile-menu-open header nav .hidden.min-\[960px\]\:flex ul li a {
		display: block !important;
		padding: 8px 0 !important;
		font-size: 1.1rem !important;
	}

	/* Login plataforma — quando JS move pra dentro do overlay, ele fica inline no flow */
	body.mobile-menu-open header nav .hidden.min-\[960px\]\:flex .ml-2.md\:ml-0.items-center,
	.hg-mobile-login-inline {
		display: flex !important;
		position: static !important;
		width: 100% !important;
		margin: 16px 0 0 !important;
		padding: 0 !important;
	}
	.hg-mobile-login-inline .relative,
	.hg-mobile-login-inline button {
		width: 100% !important;
	}

	/* Botão hambúrguer — discreto, transparente, cor preta */
	header nav button.hg-hamburger,
	header nav button[aria-label="Abrir menu"] {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		background: transparent !important;
		background-color: transparent !important;
		border: none !important;
		cursor: pointer !important;
		color: #1f242e !important;
		padding: 8px !important;
		width: auto !important;
		font-size: inherit !important;
	}
	header nav button.hg-hamburger:hover {
		background: transparent !important;
		color: #ff1414 !important;
	}
	header nav button.hg-hamburger svg {
		width: 28px !important;
		height: 28px !important;
		display: block !important;
	}

	/* Toggle linhas/X via classe body.mobile-menu-open */
	header nav button.hg-hamburger .hg-hamburger-x {
		display: none !important;
	}
	header nav button.hg-hamburger .hg-hamburger-lines {
		display: block !important;
	}
	body.mobile-menu-open header nav button.hg-hamburger .hg-hamburger-lines {
		display: none !important;
	}
	body.mobile-menu-open header nav button.hg-hamburger .hg-hamburger-x {
		display: block !important;
	}

	/* Header position relative para o menu absoluto se ancorar */
	header nav {
		position: relative !important;
	}
}