/* ==========================================================================
   XNOVA LED — Responsive (móvil impecable)
   Se carga DE ÚLTIMA. Usa !important para sobreescribir los estilos inline
   de las plantillas (un !important externo gana a un inline sin !important).
   Breakpoints: 1040 (tablet) · 760 (tablet chico) · 560 (móvil) · 400 (chico)
   ========================================================================== */

/* Nunca scroll horizontal */
html, body { max-width: 100%; overflow-x: hidden; }
body.xnova-led-active img { max-width: 100%; }
body.xnova-led-active * { min-width: 0; }

/* ============================ <= 1040px : TABLET ========================== */
@media (max-width: 1040px) {
	.xn-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
	.xn-footer-cta-grid { grid-template-columns: 1fr !important; }
	.xn-footer-cols-grid { grid-template-columns: 1fr 1fr !important; }
	.xn-strip-cats { grid-template-columns: repeat(3, 1fr) !important; }
	.xn-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
	.xn-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
	.xn-catalog-layout { grid-template-columns: 1fr !important; }
	.xn-product-layout { grid-template-columns: 1fr !important; gap: 30px !important; }
	.xn-compat-console { grid-template-columns: 1fr 1fr !important; }

	/* La consola de compatibilidad: el intro ocupa toda la fila */
	.xn-compat-console > div:first-child { grid-column: 1 / -1 !important; }

	/* Reducir títulos gigantes */
	body.xnova-led-active .xn-hero-title { font-size: 64px !important; }
}

/* ============================ <= 760px : TABLET CHICO ==================== */
@media (max-width: 760px) {
	.xn-footer-cols-grid { grid-template-columns: 1fr !important; }

	/* Padding vertical de secciones más compacto */
	body.xnova-led-active main section { padding-left: 18px !important; padding-right: 18px !important; }

	/* Tabs / tablas de producto en una columna */
	.xn-product-tabs-grid { grid-template-columns: 1fr !important; }
}

/* ============================ <= 560px : MÓVIL =========================== */
@media (max-width: 560px) {

	/* ---- Contenedores ---- */
	.xn-wrap { padding-left: 16px !important; padding-right: 16px !important; }
	body.xnova-led-active main > section { padding-top: 34px !important; padding-bottom: 34px !important; }

	/* ---- HEADER ---- */
	.xn-header .xn-search { display: none !important; }              /* buscador va al menú/lupa */
	.xn-header img { height: 44px !important; }
	.xn-header .xn-hactions { gap: 12px !important; }
	.xn-hnav-extra { display: none !important; }                     /* Asesoría/Garantía ocultas, quedan en footer/menú */
	.xn-header .xn-topbar-social { display: none !important; }       /* redes/whatsapp del topbar */
	.xn-topbar-promo { font-size: 11px !important; }
	.xn-header .xn-main-bar-inner { height: 60px !important; gap: 14px !important; }
	.xn-header .xn-catnav { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
	.xn-header .xn-catnav-inner { gap: 18px !important; }
	.xn-header-spacer { height: 132px !important; }

	/* ---- HERO ---- */
	body.xnova-led-active .xn-hero-title { font-size: 46px !important; line-height: .9 !important; }
	.xn-hero-grid { padding-top: 40px !important; padding-bottom: 44px !important; }
	.xn-hero-grid p { font-size: 15.5px !important; }
	.xn-hero-grid .xn-cta,
	.xn-hero-grid a[href] { width: auto; }

	/* Consola de compatibilidad: 1 columna, botón full-width */
	.xn-compat-console { grid-template-columns: 1fr !important; gap: 12px !important; }
	.xn-compat-console button[type="submit"] { width: 100% !important; }

	/* ---- Grids de producto ---- */
	.xn-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
	.xn-grid-3 { grid-template-columns: 1fr !important; }
	.xn-strip-cats { grid-template-columns: repeat(2, 1fr) !important; }

	/* Card de producto un poco más compacta */
	.xn-card h3 { font-size: 15px !important; min-height: 0 !important; }
	.xn-card [style*="184px"] { height: 150px !important; }

	/* ---- Antes/después ---- */
	.xn-ba { height: 300px !important; }

	/* ---- Títulos de sección grandes ---- */
	body.xnova-led-active main h2 { font-size: 30px !important; line-height: 1 !important; }
	body.xnova-led-active main h2[style*="60px"],
	body.xnova-led-active main h2[style*="46px"],
	body.xnova-led-active main h2[style*="44px"] { font-size: 32px !important; }

	/* ---- WooCommerce grid ---- */
	body.xnova-led-active ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

	/* Catálogo: sidebar arriba, no sticky */
	.xn-catalog-layout { grid-template-columns: 1fr !important; }
	.xn-catalog-sidebar { position: static !important; top: auto !important; }

	/* Ficha producto */
	.xn-product-layout { grid-template-columns: 1fr !important; }
	body.xnova-led-active .xn-product-layout h1 { font-size: 28px !important; }

	/* Carrito drawer a pantalla casi completa */
	.xn-cart-drawer { width: 100vw !important; max-width: 100vw !important; }

	/* Footer */
	.xn-footer-cta-grid { padding-top: 40px !important; padding-bottom: 40px !important; }
	body.xnova-led-active .xn-footer h2 { font-size: 34px !important; }
	.xn-footer [style*="220px"] { font-size: 120px !important; }     /* watermark */

	/* WhatsApp FAB compacto (solo icono) */
	.xn-wa-fab { padding: 14px !important; }
	.xn-wa-fab > span:last-child,
	.xn-wa-fab { font-size: 0 !important; }
	.xn-wa-fab svg { width: 26px !important; height: 26px !important; }

	/* Reseñas: 1 columna */
	.xn-grid-3 { grid-template-columns: 1fr !important; }

	/* Formularios (asesoría/garantía) a 1 columna */
	.xn-form-2col { grid-template-columns: 1fr !important; }
}

/* ============================ <= 400px : MÓVIL CHICO ==================== */
@media (max-width: 400px) {
	body.xnova-led-active .xn-hero-title { font-size: 40px !important; }
	.xn-strip-cats { grid-template-columns: repeat(2, 1fr) !important; }
	.xn-grid-4 { grid-template-columns: 1fr !important; }
	body.xnova-led-active ul.products { grid-template-columns: 1fr !important; }
	.xn-header .xn-hactions .xn-hnav-blog span { display: none; }    /* Blog: solo icono */
}

/* ---- Utilidades táctiles ---- */
@media (hover: none) and (pointer: coarse) {
	.xn-card:hover { transform: none; }                              /* sin hover-lift en táctil */
	.xn-card .xn-qv { opacity: 1; transform: none; }                 /* "ver detalles" siempre visible */
	a, button, select, input { touch-action: manipulation; }
	select.xn-sel, .xn-input { font-size: 16px !important; }         /* evita zoom en iOS al enfocar */
}