/**
 * Ajustes finales que cruzan varios componentes. El resto de los archivos
 * ya es mobile-first con sus propias media queries; esto es sólo el remate.
 *
 * Breakpoints usados en todo el tema:
 *   base   -> celular (foco principal, 90% del tráfico)
 *   640px  -> celular grande / phablet
 *   900px  -> tablet / desktop chico (acá aparece el header de escritorio)
 *   1200px -> desktop grande
 */

.error-404 {
	text-align: center;
	padding-top: var(--space-7);
}

.error-404 .branch-cards {
	margin-left: auto;
	margin-right: auto;
}

.error-404 .header-search {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	max-width: 420px;
	margin: var(--space-6) auto 0;
	background: var(--color-bg-subtle);
	border-radius: var(--radius-full);
	padding: 12px var(--space-4);
}

.error-404 .header-search__icon {
	width: 18px;
	height: 18px;
	color: var(--color-text-tertiary);
}

.error-404 .header-search__input {
	border: none;
	background: transparent;
	width: 100%;
	font-size: 0.92rem;
}

.error-404 .header-search__input:focus {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

@media print {
	.site-header,
	.mobile-tabbar,
	.announce-bar,
	.drawer,
	.search-overlay,
	.site-footer {
		display: none !important;
	}
}