/*
 * KONEXTEK Child — ajustes responsive
 * Quiebres alineados con Divi: 980 px (tablet) y 767 px (móvil).
 * Las composiciones cambian por dispositivo; no solo se reducen.
 */

/* ---------- Laptop y tablet (≤ 980 px) ---------- */
@media (max-width: 980px) {
	html { scroll-padding-top: calc(var(--knx-header-alto-movil) + 8px); }

	.knx-header .et-menu > li > a,
	.knx-header .et_pb_menu .et-menu-nav > ul > li > a { padding-block: 20px; }

	/* El bloque teléfono/correo del header se oculta; el contacto queda en el menú y la barra móvil. */
	.knx-header__contacto { display: none; }

	.knx-indice__fila {
		grid-template-columns: 72px minmax(0, 1fr) 48px;
		row-gap: var(--knx-e-2);
	}
	.knx-indice__num { font-size: 2.25rem; padding-left: var(--knx-e-3); }
	.knx-indice__texto { grid-column: 2 / 3; grid-row: 2; }
	.knx-indice__ir { grid-column: 3; grid-row: 1; }
	.knx-indice__detalle { grid-template-columns: 72px minmax(0, 1fr); }
	.knx-indice__detalle > :first-child { grid-column: 2; }
	.knx-indice__detalle > * { grid-column: 2; }
}

/* ---------- Móvil (≤ 767 px) ---------- */
@media (max-width: 767px) {
	body.admin-bar .knx-header.knx-header--fija { top: 0; }

	.knx-btn--movil-bloque,
	.knx-btn--movil-bloque .et_pb_button { width: 100%; justify-content: flex-start; }

	/* Índice: número + título + signo; el texto pasa debajo */
	.knx-indice__fila {
		grid-template-columns: 44px minmax(0, 1fr) 40px;
		gap: var(--knx-e-2) var(--knx-e-3);
		padding: 18px 0;
	}
	.knx-indice__num { font-size: 1.75rem; padding-left: var(--knx-e-2); }
	.knx-indice__titulo { font-size: 1.3125rem; }
	.knx-indice__texto { grid-column: 1 / -1; grid-row: 2; padding-inline: var(--knx-e-2); font-size: 0.9375rem; }
	.knx-indice__ir { width: 40px; height: 40px; }
	.knx-indice__detalle { display: block; padding: 0 var(--knx-e-3) var(--knx-e-5); }

	/* Líneas de producto: lista simple a una columna */
	.knx-lineas { grid-template-columns: 1fr; }
	.knx-linea { padding: 16px 0; }
	.knx-linea__titulo,
	.knx-lineas dt { font-size: 1.1875rem; }

	.knx-etiquetas { gap: 8px; }
	.knx-etiquetas > li,
	.knx-etiqueta { padding: 8px 12px; font-size: 0.9375rem; }

	/* Método: lista vertical con número a la izquierda */
	.knx-metodo { grid-template-columns: 1fr; }
	.knx-metodo > li {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		column-gap: var(--knx-e-4);
		padding: 16px 0;
		border-bottom: 1px solid rgba(31, 35, 40, 0.35);
	}
	.knx-metodo > li::before { grid-row: span 3; font-size: 2.75rem; }
	.knx-metodo > li:last-child { border-bottom: 0; }

	.knx-form { padding: 22px 18px; }
	.knx-form__opciones { flex-direction: column; }
	.knx-form__opcion { width: 100%; box-sizing: border-box; }
	.knx-form .et_pb_contact_submit,
	.knx-form button[type="submit"],
	.knx-form input[type="submit"] { width: 100%; }

	.knx-legal { flex-direction: column; }

	/* Barra fija de acciones (Llamar / WhatsApp / Cotizar) */
	.knx-barra-movil {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9991;
		display: grid;
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
		height: 64px;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: var(--knx-marfil);
		border-top: 2px solid var(--knx-grafito);
	}
	body:has(.knx-barra-movil) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

	/* Con barra móvil, el botón flotante sobra */
	body:has(.knx-barra-movil) .knx-whatsapp-flotante { display: none; }

	.knx-whatsapp-flotante { right: 16px; bottom: 16px; min-height: 52px; }
	.knx-foto--alta img,
	img.knx-foto--alta { min-height: 260px; }
}

/* ---------- Preferencias del usuario ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[class*="knx-"],
	[class*="knx-"]::before,
	[class*="knx-"]::after { transition: none !important; animation: none !important; }
}

@media print {
	.knx-header,
	.knx-whatsapp-flotante,
	.knx-barra-movil { display: none !important; }
	.knx-seccion--oscura,
	.knx-seccion--naranja { background: none !important; color: #000 !important; }
}

/* v1.0.1 — landing */
@media (max-width: 980px) {
	.knx-foto-llena { min-height: 380px; }
	.knx-banda .et_pb_image img { height: 260px; }
}
@media (max-width: 767px) {
	.knx-foto-llena { min-height: 260px; }
	.knx-banda .et_pb_image img { height: 180px; }
	.knx-banda .knx-banda__pie { padding: 10px 12px; font-size: 0.8125rem; }
}