/* =====================================================
	INOVA - INDÚSTRIA DE PAINÉIS ELÉTRICOS
	responsive.css — Breakpoints (Mobile First)
===================================================== */

/* ---------- Tablet pequeno (≥ 480px) ---------- */
@media (min-width: 480px) {
	.hero-actions { flex-wrap: nowrap; }
	.hero-visual { height: 300px; }
	.servicos-grid { grid-template-columns: repeat(2, 1fr); }
	.diferencial-grid { grid-template-columns: repeat(2, 1fr); }
	.form-row { grid-template-columns: repeat(2, 1fr); }

	.publico-actions .btn { flex: 0 1 auto; padding-inline: 1.75rem; font-size: 0.95rem; }

	.footer-bottom { flex-direction: row; gap: 1.5rem; text-align: left; }
	.footer-bottom .logo-footer { padding-right: 1.5rem; border-right: 1px solid rgba(255, 255, 255, 0.12); }
	.footer-copy { text-align: left; }
}

/* ---------- Tablet (≥ 768px) ---------- */
@media (min-width: 768px) {
	:root { --section-padding: 6rem 0; }

	.header-phone { display: flex; }
	.header-cta { display: inline-flex; }
	.header-quick-contacts { display: none; }
	.nav-toggle { display: flex; }
	.nav-cta { display: none; }

	.hero-visual { height: 380px; }
	.hero-content { max-width: 620px; }

	.sobre-inner { flex-direction: row; align-items: flex-start; gap: 4rem; }
	.sobre-media, .sobre-content { flex: 1 1 50%; }
	.sobre-content .btn-wide { margin-inline: 0; }

	.aplicacoes-cards { grid-template-columns: repeat(3, 1fr); }

	.diferencial-grid { grid-template-columns: repeat(3, 1fr); }

	.testemunhos-track { grid-template-columns: repeat(2, 1fr); }
	.testemunho-card:last-child { grid-column: span 2; max-width: 70%; margin-inline: auto; }
}

/* ---------- Desktop / Notebook (≥ 1024px) ---------- */
@media (min-width: 1024px) {
	.main-nav {
		position: static;
		height: auto;
		width: auto;
		background: transparent;
		display: flex;
		flex-direction: row;
		padding: 0;
		transform: none;
		transition: none;
		z-index: auto;
	}
	.main-nav .nav-list { flex-direction: row; align-items: center; gap: 2.1rem; }
	.main-nav .nav-link { font-size: 0.92rem; color: rgba(13, 13, 13, 0.75); }
	.main-nav .nav-link:hover,
	.main-nav .nav-link.is-active { color: var(--color-black); }
	.nav-toggle { display: none; }
	.nav-overlay { display: none; }

	.hero { flex-direction: row; align-items: center; min-height: 620px; }
	.hero-visual { order: 0; position: absolute; inset: 0; height: 100%; }
	.hero-inner { order: 0; padding-block: 3rem; }
	.hero-content { max-width: 480px; margin-inline: 0; text-align: left; }
	.hero-subtitle { margin-inline: 0; }
	.hero-actions, .hero-trust { justify-content: flex-start; }

	.servicos-grid { grid-template-columns: repeat(4, 1fr); }

	.publico-inner { flex-direction: row; align-items: center; gap: 4.5rem; }
	.publico-content { flex: 1 1 56%; }
	.publico-list { flex: 1 1 40%; }

	.diferencial-grid { grid-template-columns: repeat(5, 1fr); }

	.testemunhos-track { grid-template-columns: repeat(3, 1fr); }
	.testemunho-card:last-child { grid-column: auto; max-width: none; margin-inline: 0; }

	.contato-inner { flex-direction: row; align-items: flex-start; gap: 4rem; }
	.contato-info { flex: 1 1 42%; padding-top: 1rem; }
	.contato-form-card { flex: 1 1 52%; }

	.section-title { font-size: clamp(2rem, 3.2vw, 2.75rem); }
}

/* ---------- Desktop Full HD (≥ 1280px) ---------- */
@media (min-width: 1280px) {
	.hero { min-height: 700px; }
	.hero-title { font-size: 2.3rem; }
	.hero-subtitle { font-size: 1.1rem; }
	.hero-content { max-width: 520px; }
}

/* ---------- Desktop grande / 4K (≥ 1600px) ---------- */
@media (min-width: 1600px) {
	:root {
		--container-width: 1400px;
		--section-padding: 7rem 0;
	}
	.hero { min-height: 820px; }
	.hero-title { font-size: 2.55rem; }
	body { font-size: 1.05rem; }
}

/* ---------- Desktop muito grande (≥ 1920px) ---------- */
@media (min-width: 1920px) {
	.hero { min-height: 900px; }
	.hero-content { max-width: 560px; }
}

/* ---------- Telas muito pequenas (≤ 360px) ---------- */
@media (max-width: 360px) {
	.hero-actions { flex-direction: column; align-items: stretch; }
	.btn { width: 100%; }
}

/* ---------- Orientação paisagem em celulares (altura reduzida) ---------- */
@media (max-height: 480px) and (orientation: landscape) {
	.main-nav { padding: 1.25rem; justify-content: flex-start; overflow-y: auto; }
	.main-nav .nav-list { gap: 1rem; }
}

/* ---------- Hero mobile (≤ 767px): imagem de fundo em tela cheia ---------- */
@media (max-width: 767px) {
	/* A foto fica presa no rodapé da seção; o texto sempre acima dela (altura da seção cresce com o conteúdo) */
	/* Fundo liso (sem grid), mesma cor do topo da imagem hero-bg-mobile-inova.jpg */
	.hero { background: #0e0e0e; padding-bottom: 70vw; }
	.hero-visual {
		order: 0;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 66vw;
	}
	.hero-bg-image { object-position: center bottom; }
	.hero-scrim { display: none; }
	.hero-inner { order: 0; }

	.hero-content { padding-block: 0.5rem 1.5rem; }
	.hero-title { font-size: 1.4rem; margin-bottom: 0.75rem; }
	.hero-subtitle { margin-bottom: 1.25rem; }
	.hero-actions { margin-bottom: 1.25rem; }
}

/* ===== WhatsApp: link web (computador) x app (celular/tablet) ===== */
@media (hover: hover) and (pointer: fine) {
	.wa-mobile { display: none !important; }

	/* Ligação e e-mail: só no celular/tablet */
	.quick-contact-btn[href^="tel:"],
	.quick-contact-btn[href^="mailto:"] { display: none !important; }
	a[href^="tel:"],
	a[href^="mailto:"] { pointer-events: none; cursor: default; }
}
@media (hover: none), (pointer: coarse) {
	.wa-desktop { display: none !important; }
}