/* ---------------------------------------------------------------------------
 * Correcciones de experiencia mobile.
 *
 * Todo lo de acá sale de medir el sitio en 375x812, no de recomendaciones
 * genéricas. Cada bloque dice qué se midió.
 * ------------------------------------------------------------------------ */

@media (max-width: 782px) {

	/* -----------------------------------------------------------------------
	 * 1. Zoom automático de iOS en el formulario de pedido.
	 *
	 * Los campos estaban en 13,76 px. Safari en iPhone hace zoom automático
	 * sobre cualquier input de menos de 16 px al enfocarlo: el usuario toca
	 * "Nombre", la página se agranda sola y tiene que volver a achicarla a
	 * mano en cada campo. Son nueve campos. Es el bug más caro del flujo de
	 * cotización, que es por donde entran los pedidos.
	 * -------------------------------------------------------------------- */
	.insu-cart-panel input[type="text"],
	.insu-cart-panel input[type="email"],
	.insu-cart-panel input[type="tel"],
	.insu-cart-panel input[type="number"],
	.insu-cart-panel select,
	.insu-cart-panel .insu-cart-form select,
	body .insu-cart-panel select,
	.insu-cart-panel textarea,
	.insu-wa-form input,
	.insu-wa-form textarea,
	.woocommerce form input[type="text"],
	.woocommerce form input[type="email"],
	.woocommerce form input[type="tel"],
	.woocommerce form textarea {
		font-size: 16px;
	}

	/* Botón de sumar al pedido en las tarjetas del catálogo: 36x36. */
	.insu-cart-add--catalog {
		min-width: 44px;
		min-height: 44px;
	}

	/* Los radios de método de contacto medían 16x16. Se agranda el área
	   sensible sin agrandar el control, para no romper el diseño del form. */
	.insu-cart-panel input[type="radio"],
	.insu-cart-panel input[type="checkbox"] {
		width: 22px;
		height: 22px;
	}

	.insu-cart-panel label:has(input[type="radio"]),
	.insu-cart-panel label:has(input[type="checkbox"]) {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		min-height: 44px;
		padding: .25rem 0;
	}

	/* -----------------------------------------------------------------------
	 * Enlaces "Leer +" de las novedades.
	 *
	 * Medían 56 x 24 px, por debajo del mínimo de 24 recomendado para tocar con
	 * el dedo y muy por debajo de los 48 que sugiere Google en sus informes de
	 * usabilidad.
	 *
	 * Este arreglo estaba escrito desde antes contra .post-read-more, a.more-link
	 * y .entry-readmore a, que son clases de temas clásicos de WordPress. El
	 * archivo de novedades lo arma Elementor desde su plantilla 3637, y el enlace
	 * real es .elementor-post__read-more: comprobado sobre el sitio publicado,
	 * las tres clases viejas aparecen cero veces y la de Elementor diez. O sea
	 * que la regla nunca llegó a aplicarse, ni antes ni ahora.
	 *
	 * Se apunta al enlace que existe. No es marcado del tema, así que sobrevive
	 * al cambio a Hello.
	 * -------------------------------------------------------------------- */
	.elementor-post__read-more {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* -----------------------------------------------------------------------
	 * 3. Espacio ocupado por elementos fijos.
	 *
	 * En la página de categoría conviven header fijo de 60 px, barra de
	 * filtros de 56 y el globo de WhatsApp de 64. Son 116 px de alto útil
	 * permanentemente ocupados sobre 812, más el globo tapando la esquina.
	 * Se reserva espacio al final para que el último producto y el pie no
	 * queden debajo de la barra.
	 * -------------------------------------------------------------------- */
	.woocommerce.archive .site-footer,
	.post-type-archive-product .site-footer {
		padding-bottom: 72px;
	}

	/* El globo de WhatsApp tapa el botón de pedido de la última tarjeta.
	   En la ficha de producto no hay globo: ahí .insu-wa-float es el panel a
	   pantalla completa, y subirle el borde inferior lo dejaría descentrado. */
	body .insu-wa-float:not(.insu-wa-float--suelto),
	body .insu-wa-float:not(.insu-wa-float--suelto).is-ready {
		bottom: 76px !important;
	}
}

@media (max-width: 767px) {

	/* -----------------------------------------------------------------------
	 * 4. Área táctil de la paginación y del pie.
	 *
	 * Medido a 375 px: los enlaces de paginación del catálogo daban 20 × 27 px
	 * y los del pie 21 px de alto. El mínimo recomendado para tocar con el dedo
	 * es 24 px y Google sugiere 48 en sus informes de usabilidad. Son diez
	 * páginas de catálogo, y desde el teléfono es la forma principal de
	 * recorrerlo: cada intento fallido devuelve a la persona a la página que ya
	 * estaba viendo.
	 *
	 * Se lleva a 44 px, que es el objetivo que ya cumplen el resto de los
	 * controles del sitio y no obliga a rehacer el diseño de la barra.
	 *
	 * El prefijo .woocommerce nav.woocommerce-pagination —igual al que usa
	 * insuplagas-catalog-ui.css— no es estilo: WooCommerce trae su propia regla
	 * con esa forma exacta y especificidad (0,2,4) para estos mismos elementos
	 * (display:block, padding:.5em); sin igualar el prefijo, WooCommerce sigue
	 * imponiendo su tamaño y estos 44 px nunca se aplican.
	 * -------------------------------------------------------------------- */
	.woocommerce nav.woocommerce-pagination .page-numbers li a,
	.woocommerce nav.woocommerce-pagination .page-numbers li span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0 6px;
		line-height: 1;
	}

	.woocommerce nav.woocommerce-pagination .page-numbers {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px;
	}

	/* El pie es una lista de enlaces apilados sin separación: al tocar uno se
	   toca el de al lado. No hace falta llevarlos a 44, alcanza con que no se
	   pisen entre sí.

	   El pie lo arma Elementor, así que el selector va sobre su marcado y
	   acotado a la ubicación de pie: la misma lista de iconos se usa en otras
	   partes del sitio y ahí no hace falta tocar nada. */
	.elementor-location-footer .elementor-icon-list-item {
		margin-bottom: 4px;
	}

	.elementor-location-footer .elementor-icon-list-item > a {
		display: flex;
		align-items: center;
		min-height: 36px;
		line-height: 1.3;
	}

	/* "Consultar precio" daba 32 px de alto: es el botón que abre la consulta,
	   o sea el que más importa que se pueda tocar bien. */
	.insu-precio-consultar--btn {
		min-height: 44px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	/* -----------------------------------------------------------------------
	 * 5. El pie, que medía 927 px de alto.
	 *
	 * Nueve enlaces cortos —tres por sección, "Novedades", "Local:
	 * 011...", "Facebook"— y entre una sección y la siguiente había 88 px de
	 * blanco. Ninguno de los enlaces es el culpable: cada uno mide entre 36 y
	 * 44 y están a 4-8 px uno del otro, ya ajustado en la sección 4. El vacío
	 * salía de tres lugares que no tienen contenido adentro:
	 *
	 *   - .e-con-inner, el contenedor que apila las tres secciones más el
	 *     logo del final, tenía gap: 30px entre cada uno de esos cuatro
	 *     bloques. Ese solo valor explicaba los 88 px: 30 del hueco entre
	 *     secciones más el margen de cada título y su primer enlace.
	 *   - el mismo .e-con-inner tenía 40 px de relleno arriba y 40 abajo,
	 *     sólo para separar el pie entero del contenido de encima y de abajo.
	 *   - el bloque final —el logo con el enlace a Latamplagas— tenía 32 px
	 *     de relleno por los cuatro lados para un solo enlace de 69 px.
	 *
	 * .e-con-inner es un contenedor genérico de Elementor: el selector va
	 * atado a la clase que sólo tiene el pie (.elementor-3532) para no tocar
	 * ningún otro bloque armado con contenedores en el resto del sitio.
	 * -------------------------------------------------------------------- */
	.elementor-3532.elementor-location-footer .e-con-inner {
		gap: 14px;
		padding-top: 22px;
		padding-bottom: 22px;
	}

	.elementor-3532.elementor-location-footer .elementor-element-3cd5f51 {
		padding: 14px;
	}
}