/*
 * Táctil y legibilidad · 21 de septiembre de 2026
 *
 * Salió de medir las nueve pantallas del sitio entre 360x740 y 1920x1080. Dos
 * cosas fallaban en todas las de mano:
 *
 * 1. Letra por debajo de 12px. Un rótulo en versalitas se lee bien en un
 *    monitor a 10px; en un teléfono a 30cm de la cara, no. El piso es 12px en
 *    cualquier texto que alguien tenga que leer.
 * 2. Objetivos de toque de 15px de alto. Los enlaces del pie, las migas y los
 *    correos eran una línea de texto suelta: para acertarles hay que apuntar.
 *    El mínimo de 44px es el de Apple y el de WCAG 2.5.5, y se consigue con
 *    relleno: la letra se queda donde estaba y lo que crece es el área.
 *
 * ESTA HOJA VA DE ÚLTIMA A PROPÓSITO. Estuvo dentro de app.css y no servía de
 * nada: casos.css, contacto.css y las demás hojas de página cargan después y
 * ganaban por orden con la misma especificidad.
 *
 * El corte es 1024px inclusive, no 1023: un iPad apaisado mide exactamente
 * 1024 y se quedaba por fuera.
 */

@media (max-width: 1024px) {

	/* ------------------------------------------------ el piso de 12px */
	.dk-eyebrow,
	.dk-chip,
	.dk-migas,
	.dk-btn,
	.dk-caso__meta,
	.dk-poster__meta,
	.dk-poster__anio,
	.dk-poster__aire,
	.dk-cifra__label,
	.dk-cifra-grande__label,
	.dk-cocina-card__n,
	.dk-cocina-card__caso,
	.dk-cocina-card__label,
	.dk-producto__rotulo,
	.dk-producto__otro,
	.dk-carta-indice__n,
	.dk-prueba__rot,
	.dk-prueba__caso,
	.dk-tel__genero,
	.dk-tel__cifra,
	.dk-carrusel__cuenta,
	.dk-contacto__tel-rot,
	.dk-oficina__pais,
	.dk-oficina__dir,
	.dk-pie__legal,
	.dk-equipo__sumarme { font-size: .75rem; }

	/* Los de la página de contacto, que tiene hoja propia. */
	.dk-tira__rot,
	.dk-tira__dato,
	.dk-puerta__lista-rot,
	.dk-copiar__estado,
	.dk-oficina__hora,
	.dk-paso__tiempo,
	.dk-impacto__f,
	.dk-copiar__correo,
	.dk-listo__replica,
	.dk-puerta__chips li { font-size: .75rem; }

	/* El botón repite su clase para pesar lo mismo que `.dk-producto__cta
	   .dk-btn`, que lo bajaba a 11,2px. Con el mismo peso gana esta hoja, que
	   carga de última. */
	.dk-btn.dk-btn { font-size: .75rem; }

	/* ----------------------------------- 44px de alto en lo que se toca */
	.dk-pie a,
	.dk-migas a,
	.dk-producto__otro,
	.dk-equipo__sumarme,
	.dk-contacto__tel a,
	.dk-nav__menu a,
	.dk-puerta a,
	.dk-tira a,
	.dk-copiar {
		display: inline-flex; align-items: center;
		min-height: 44px;
	}

	/* Un botón crece con relleno vertical, no con `min-height`: así el texto
	   sigue centrado y el borde redondeado no se deforma. */
	.dk-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

	/* El pie apila sus enlaces en columna, así que ahí el área puede ocupar todo
	   el ancho: acertar deja de depender de la puntería. */
	.dk-pie__cols a { justify-content: center; width: 100%; }
}

/* El ritmo del pie.
 *
 * Cada enlace mide ahora 44px de alto, pero su <p> o su <li> seguía poniendo
 * 6px de margen debajo: la fila quedaba en 50px y los enlaces se veían sueltos
 * al lado de la dirección, que no es enlace. Sin ese margen, los 44px son el
 * ritmo y las cuatro columnas se leen parejas.
 *
 * Ojo: aquí NO se toca el `gap` de `.dk-pie__cols`. Son los 32px que separan
 * las cuatro columnas del pie; pisarlos las pega unas contra otras. */
@media (max-width: 1024px) {
	.dk-pie li { margin-bottom: 0; }
	.dk-pie p:has(> a) { margin-bottom: 0; }
	.dk-pie__cols a { border-radius: 10px; }
	.dk-pie__cols a:active { background: rgb(255 255 255 / .06); }
}